/* ==========================================================================
   Ajans Theme – scenes.css
   Laptop ve telefon maketinde dönen "web sitesi" sahneleri:
   Tasarım → Kodlama → Hız → SEO → Büyüme

   Ölçüler container query birimleriyle verilir (cqw): sahneler cihaz ekranı
   büyüdükçe birebir ölçeklenir. Animasyonlar slayt .is-active olunca baştan
   başlar. Animasyon kapalıyken her sahne son haliyle statik görünür.
   ========================================================================== */

@property --n {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

.scene,
.scene-m {
	background: var(--screen-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	height: 100%;
	line-height: 1.4;
	overflow: hidden;
	position: relative;
}

.scene {
	font-size: 1.12cqw;
}

.scene-m {
	font-size: 4.1cqw;
}

.scene span,
.scene-m span {
	display: block;
}

/* ---------------------------------------------------------------------------
   1) Tasarım: taslak çizgileri → renkli tasarım
   ------------------------------------------------------------------------- */
.scene.scene-design {
	background: #eef1ec;
	display: grid;
	gap: 1.4em;
	grid-template-columns: 3.6em 1fr 15em;
	padding: 1.4em;
}

:root[data-theme="dark"] .scene.scene-design {
	background: #0b120d;
}

.sd-tools {
	align-content: start;
	background: var(--screen-bg);
	border-radius: .8em;
	display: grid !important;
	gap: .9em;
	justify-items: center;
	padding: 1em 0;
}

.sd-tools i {
	background: var(--ui-line);
	border-radius: .4em;
	display: block;
	height: 1.6em;
	width: 1.6em;
}

.sd-tools i.is-on {
	background: var(--color-primary);
}

.sd-board {
	background: var(--screen-bg);
	border-radius: .6em;
	box-shadow: 0 .4em 1.6em rgba(0, 0, 0, .08);
	position: relative;
}

.sd-el {
	--bg: var(--ui-soft);
	background-color: var(--bg);
	border-radius: .35em;
	outline: 1.5px dashed transparent;
	outline-offset: -1px;
	position: absolute;
}

.sd-nav { height: 8%; left: 4%; top: 4%; width: 92%; }
.sd-logo { --bg: var(--color-primary); height: 3.4%; left: 6%; top: 6.3%; width: 10%; }
.sd-t1 { --bg: var(--color-heading); height: 7%; left: 6%; top: 22%; width: 44%; }
.sd-t2 { --bg: var(--color-heading); height: 7%; left: 6%; top: 31%; width: 32%; }
.sd-p1 { --bg: var(--ui-line); height: 2.6%; left: 6%; top: 42%; width: 40%; }
.sd-p2 { --bg: var(--ui-line); height: 2.6%; left: 6%; top: 46.5%; width: 30%; }
.sd-btn { --bg: var(--color-primary); border-radius: .6em; height: 7%; left: 6%; top: 54%; width: 15%; }
.sd-img { --bg: var(--color-primary-soft); border-radius: 1em; height: 44%; left: 56%; overflow: hidden; top: 19%; width: 38%; }
.sd-c1, .sd-c2, .sd-c3 { border-radius: .8em; height: 24%; top: 70%; width: 27%; }
.sd-c1 { left: 6%; }
.sd-c2 { left: 36.5%; }
.sd-c3 { left: 67%; }

.sd-img::before,
.sd-img::after {
	content: "";
	position: absolute;
}

.sd-img::before {
	background: var(--color-primary);
	border-radius: 50%;
	height: 52%;
	left: 16%;
	top: 22%;
	width: 42%;
}

.sd-img::after {
	background: var(--color-accent);
	border-radius: .6em;
	height: 30%;
	right: 12%;
	top: 14%;
	width: 30%;
}

.sd-select {
	border: 1.5px solid #2f80ff;
	height: 19%;
	left: 5%;
	pointer-events: none;
	position: absolute;
	top: 20.5%;
	width: 46%;
	z-index: 3;
}

.sd-select i {
	background: #fff;
	border: 1.5px solid #2f80ff;
	display: block;
	height: .7em;
	position: absolute;
	width: .7em;
}

.sd-select i:nth-child(1) { left: -.4em; top: -.4em; }
.sd-select i:nth-child(2) { right: -.4em; top: -.4em; }
.sd-select i:nth-child(3) { bottom: -.4em; left: -.4em; }
.sd-select i:nth-child(4) { bottom: -.4em; right: -.4em; }

.sd-select b {
	background: #2f80ff;
	border-radius: .3em;
	color: #fff;
	font-size: .8em;
	left: -1px;
	padding: .15em .5em;
	position: absolute;
	top: -1.8em;
	white-space: nowrap;
}

.sd-panel {
	align-content: start;
	background: var(--screen-bg);
	border-radius: .8em;
	display: grid !important;
	gap: .7em;
	padding: 1.2em;
}

.sd-panel__title {
	color: var(--color-muted);
	font-size: .85em;
	font-weight: 700;
	margin-top: .4em;
}

.sd-swatches {
	display: flex !important;
	gap: .5em;
}

.sd-swatches i {
	border-radius: 50%;
	display: block;
	height: 2em;
	width: 2em;
}

.sd-swatches i:nth-child(1) { background: var(--color-primary); }
.sd-swatches i:nth-child(2) { background: var(--color-secondary); }
.sd-swatches i:nth-child(3) { background: var(--color-accent); }
.sd-swatches i:nth-child(4) { background: var(--ui-line); }

.sd-type {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: 2.6em;
	font-weight: 800;
	line-height: 1;
}

.sd-prop {
	display: flex !important;
	gap: .5em;
}

.sd-prop em {
	background: var(--ui-soft);
	border-radius: .4em;
	color: var(--color-heading);
	flex: 1;
	font-size: .9em;
	font-style: normal;
	font-weight: 600;
	padding: .35em .6em;
}

/* Telefon taslağı */
.scene-m.scene-design {
	background: #eef1ec;
	padding: 13% 6% 6%;
}

.scene-m .sd-board {
	height: 100%;
}

.scene-m .sd-nav { height: 6%; left: 5%; top: 3%; width: 90%; }
.scene-m .sd-img { height: 28%; left: 5%; top: 13%; width: 90%; }
.scene-m .sd-t1 { height: 5%; left: 5%; top: 46%; width: 80%; }
.scene-m .sd-t2 { height: 5%; left: 5%; top: 53%; width: 60%; }
.scene-m .sd-p1 { height: 2.2%; left: 5%; top: 61%; width: 85%; }
.scene-m .sd-btn { height: 6%; left: 5%; top: 67%; width: 45%; }
.scene-m .sd-c1, .scene-m .sd-c2 { height: 18%; top: 78%; width: 42%; }
.scene-m .sd-c1 { left: 5%; }
.scene-m .sd-c2 { left: 53%; }

/* ---------------------------------------------------------------------------
   2) Kodlama: editör + canlı önizleme
   ------------------------------------------------------------------------- */
.scene.scene-code {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
}

.sc-editor {
	background: #0e1712;
	color: #d7e0da;
	display: flex !important;
	flex-direction: column;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	padding: 1.2em 1.4em;
	position: relative;
}

.sc-tabs {
	display: flex !important;
	gap: .4em;
	margin-bottom: 1.4em;
}

.sc-tabs span {
	background: rgba(255, 255, 255, .06);
	border-radius: .4em .4em 0 0;
	color: rgba(255, 255, 255, .5);
	font-size: .85em;
	padding: .4em 1em;
}

.sc-tabs span.is-on {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.sc-lines {
	display: grid !important;
	font-size: 1.05em;
	gap: .55em;
}

.sc-lines > span {
	overflow: hidden;
	white-space: nowrap;
}

.sc-lines em {
	color: rgba(255, 255, 255, .25);
	display: inline-block;
	font-style: normal;
	margin-right: 1em;
	text-align: right;
	width: 1.4em;
}

.sc-lines b {
	font-weight: 400;
}

.sc-lines .k { color: #7fdbca; }
.sc-lines .a { color: #c792ea; }
.sc-lines .s { color: #ecc48d; }
.sc-lines .c { color: #637777; font-style: italic; }

.sc-term {
	background: rgba(255, 255, 255, .06);
	border-radius: .5em;
	bottom: 1.2em;
	color: #c3e88d;
	font-size: .95em;
	left: 1.4em;
	padding: .6em 1em;
	position: absolute;
	right: 1.4em;
}

.sc-term b {
	color: #57d78a;
}

.sc-preview {
	background: var(--screen-bg);
	display: flex !important;
	flex-direction: column;
	gap: 1.2em;
	padding: 1.6em 2em;
}

.sc-nav {
	align-items: center;
	border-bottom: 1px solid var(--ui-line);
	display: flex !important;
	gap: 1.2em;
	padding-bottom: 1em;
}

.sc-nav b {
	background: var(--color-primary);
	border-radius: .4em;
	display: block;
	height: 1.4em;
	margin-right: auto;
	width: 4.5em;
}

.sc-nav i {
	background: var(--ui-line);
	border-radius: .3em;
	display: block;
	height: .6em;
	width: 3em;
}

.sc-h1 {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: 2.6em;
	font-weight: var(--fw-heading);
	letter-spacing: -.03em;
	line-height: 1.05;
	margin-top: .6em;
}

.sc-text {
	color: var(--color-muted);
	font-size: 1.15em;
}

.sc-btn {
	align-self: flex-start;
	background: var(--color-button);
	border-radius: var(--radius-button);
	color: var(--color-button-text);
	font-weight: 700;
	padding: .7em 1.4em;
}

.sc-cards {
	display: grid !important;
	gap: .8em;
	grid-template-columns: repeat(3, 1fr);
	margin-top: auto;
}

.sc-cards i {
	background: var(--ui-soft);
	border: 1px solid var(--ui-line);
	border-radius: .7em;
	color: var(--color-heading);
	display: block;
	font-style: normal;
	font-weight: 700;
	padding: 2.4em .8em .8em;
	position: relative;
}

.sc-cards i::before {
	background: var(--color-primary);
	border-radius: .4em;
	content: "";
	height: 1.4em;
	left: .8em;
	opacity: .85;
	position: absolute;
	top: .8em;
	width: 1.4em;
}

/* Telefon önizleme */
.scene-m.scene-code .sc-preview {
	height: 100%;
	padding: 14% 7% 8%;
}

.scene-m .sc-h1 {
	font-size: 1.9em;
}

.scene-m .sc-text {
	font-size: .95em;
}

.scene-m .sc-cards {
	grid-template-columns: 1fr 1fr;
}

/* ---------------------------------------------------------------------------
   3) Hız: performans skorları
   ------------------------------------------------------------------------- */
.scene.scene-speed {
	display: flex;
	flex-direction: column;
	gap: 2.2em;
	padding: 2.4em 4em;
}

.ss-head {
	align-items: center;
	display: flex !important;
	justify-content: space-between;
}

.ss-title {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: 1.6em;
	font-weight: 800;
	letter-spacing: -.02em;
}

.ss-switch {
	background: var(--ui-soft);
	border-radius: 999px;
	display: flex !important;
	padding: .3em;
}

.ss-switch span {
	border-radius: 999px;
	color: var(--color-muted);
	font-weight: 600;
	padding: .35em 1.1em;
}

.ss-switch .is-on {
	background: var(--screen-bg);
	box-shadow: 0 .1em .4em rgba(0, 0, 0, .1);
	color: var(--color-heading);
}

.ss-rings {
	display: grid !important;
	gap: 2em;
	grid-template-columns: repeat(4, 1fr);
}

.ss-ring {
	align-items: center;
	display: flex !important;
	flex-direction: column;
	gap: .8em;
	text-align: center;
}

.ss-ring em {
	color: var(--color-heading);
	font-size: .95em;
	font-style: normal;
	font-weight: 600;
}

.ss-ring__dial {
	display: grid !important;
	place-items: center;
	width: 72%;
}

.ss-ring__dial > * {
	grid-area: 1 / 1;
}

.ss-ring svg {
	transform: rotate(-90deg);
	width: 100%;
}

.ss-ring circle {
	fill: none;
	stroke-width: 3.6;
}

.ss-ring__bg {
	stroke: color-mix(in srgb, #0cce6b 18%, transparent);
}

.ss-ring__fg {
	stroke: #0cce6b;
	stroke-dasharray: 100 100;
	stroke-dashoffset: calc(100 - var(--v));
	stroke-linecap: round;
}

.ss-num {
	color: #0a9f53;
	counter-reset: n var(--v);
	font-family: var(--font-heading);
	font-size: 2.2em;
	font-weight: 800;
}

.ss-num::after {
	content: counter(n);
}

.ss-metrics {
	display: grid !important;
	gap: 1em 3em;
	grid-template-columns: 1fr 1fr;
}

.ss-metric {
	align-items: center;
	display: grid !important;
	gap: .4em 1em;
	grid-template-columns: auto 1fr;
}

.ss-metric em {
	color: var(--color-muted);
	font-style: normal;
	font-weight: 700;
}

.ss-metric b {
	color: #0a9f53;
	justify-self: end;
}

.ss-metric i {
	background: color-mix(in srgb, #0cce6b 16%, transparent);
	border-radius: 999px;
	display: block;
	grid-column: 1 / -1;
	height: .5em;
	overflow: hidden;
	position: relative;
}

.ss-metric i::after {
	background: #0cce6b;
	border-radius: inherit;
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	transform-origin: left;
	width: var(--w);
}

/* Telefon */
.scene-m.scene-speed {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1.4em;
	padding: 18% 9% 8%;
}

.scene-m .ss-rings {
	grid-template-columns: 1fr;
	width: 100%;
}

.scene-m .ss-ring__dial {
	width: 62%;
}

.scene-m .ss-num {
	font-size: 2.4em;
}

.scene-m .ss-metrics {
	grid-template-columns: 1fr;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   4) SEO: arama sonuçlarında 1. sıraya yükseliş
   ------------------------------------------------------------------------- */
.scene.scene-seo {
	--row: 6.6em;
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 2em 4em;
}

.se-top {
	align-items: center;
	display: flex !important;
	gap: 2em;
}

.se-brand {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: 2em;
	font-weight: 800;
	letter-spacing: -.04em;
}

.se-brand b {
	color: var(--color-primary);
}

.se-box {
	align-items: center;
	background: var(--screen-bg);
	border: 1px solid var(--ui-line);
	border-radius: 999px;
	box-shadow: 0 .2em .8em rgba(0, 0, 0, .08);
	color: var(--color-muted);
	display: flex !important;
	flex: 1;
	gap: .7em;
	max-width: 46em;
	padding: .7em 1.2em;
}

.se-box .ajans-icon {
	flex-shrink: 0;
	height: 1.3em;
	width: 1.3em;
}

.se-query {
	border-right: 2px solid transparent;
	color: var(--color-heading);
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
}

.se-meta {
	color: var(--color-muted);
	font-size: .85em;
	padding-left: 8.4em;
}

.se-results {
	display: grid !important;
	gap: .8em;
	padding-left: 8.4em;
}

.se-res {
	border-radius: .8em;
	height: 5.8em;
	overflow: hidden;
	padding: .6em 1em;
	position: relative;
}

.se-url {
	color: var(--color-muted);
	font-size: .85em;
}

.se-title {
	color: #1a4fd8;
	font-size: 1.25em;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:root[data-theme="dark"] .se-title {
	color: #8ab4f8;
}

.se-desc {
	color: var(--color-muted);
	font-size: .9em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.se-res--you {
	background: var(--color-primary-soft);
	box-shadow: inset .25em 0 0 var(--color-primary);
	padding-left: 3.4em;
	z-index: 2;
}

.se-rank {
	align-items: center;
	background: var(--color-primary);
	border-radius: 50%;
	color: var(--color-primary-contrast);
	display: flex !important;
	font-weight: 800;
	height: 1.8em;
	justify-content: center;
	left: .9em;
	position: absolute;
	top: .9em;
	width: 1.8em;
}

.se-stars {
	color: #f2a516;
	font-size: .85em;
	letter-spacing: .05em;
	position: absolute;
	right: 1em;
	top: .7em;
}

.se-stars small {
	color: var(--color-muted);
	letter-spacing: 0;
}

/* Telefon */
.scene-m.scene-seo {
	--row: 6.4em;
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 15% 6% 6%;
}

.scene-m .se-box {
	flex: none;
	max-width: none;
	padding: .6em .9em;
}

.scene-m .se-results {
	padding-left: 0;
}

.scene-m .se-res {
	height: 5.6em;
	padding: .5em .7em;
}

.scene-m .se-res--you {
	padding-left: 2.6em;
}

.scene-m .se-rank {
	height: 1.5em;
	left: .6em;
	width: 1.5em;
}

.scene-m .se-title {
	font-size: 1em;
}

.scene-m .se-stars {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   5) Büyüme: panel, grafik ve bildirimler
   ------------------------------------------------------------------------- */
.scene.scene-grow {
	display: grid;
	gap: 1.6em;
	grid-template-columns: 1fr 19em;
	grid-template-rows: auto 1fr;
	padding: 2.2em 2.6em;
}

.sg-kpis {
	display: grid !important;
	gap: 1.2em;
	grid-column: 1 / 2;
	grid-template-columns: repeat(3, 1fr);
}

.sg-kpis > span {
	background: var(--ui-soft);
	border: 1px solid var(--ui-line);
	border-radius: .9em;
	padding: 1em 1.2em;
}

.sg-kpis em {
	color: var(--color-muted);
	display: block;
	font-size: .9em;
	font-style: normal;
	font-weight: 600;
}

.sg-kpis b {
	color: var(--color-heading);
	display: block;
	font-family: var(--font-heading);
	font-size: 2.2em;
	font-weight: 800;
	letter-spacing: -.03em;
}

.sg-count {
	counter-reset: n var(--v);
}

.sg-count::after {
	content: counter(n);
}

.sg-kpis i {
	color: #0a9f53;
	font-size: .9em;
	font-style: normal;
	font-weight: 700;
}

.sg-chart {
	background: var(--ui-soft);
	border: 1px solid var(--ui-line);
	border-radius: .9em;
	grid-column: 1 / 2;
	overflow: hidden;
	position: relative;
}

.sg-chart svg {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.sg-area {
	fill: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.sg-line {
	fill: none;
	stroke: var(--color-primary);
	stroke-dasharray: 260;
	stroke-linecap: round;
	stroke-width: 2.2;
	vector-effect: non-scaling-stroke;
}

.sg-dot {
	background: var(--color-primary);
	border: .3em solid var(--screen-bg);
	border-radius: 50%;
	box-shadow: 0 0 0 .4em color-mix(in srgb, var(--color-primary) 30%, transparent);
	height: 1.4em;
	position: absolute;
	right: 0;
	top: 4%;
	transform: translate(30%, -20%);
	width: 1.4em;
}

.sg-toasts {
	align-content: start;
	display: grid !important;
	gap: .9em;
	grid-column: 2;
	grid-row: 1 / 3;
}

.sg-toast {
	align-items: center;
	background: var(--screen-bg);
	border: 1px solid var(--ui-line);
	border-radius: 1em;
	box-shadow: 0 .6em 1.6em rgba(10, 30, 15, .12);
	display: flex !important;
	gap: .8em;
	padding: .9em 1em;
}

.sg-toast__icon {
	align-items: center;
	background: var(--color-primary);
	border-radius: .7em;
	color: var(--color-primary-contrast);
	display: flex !important;
	flex-shrink: 0;
	height: 2.6em;
	justify-content: center;
	width: 2.6em;
}

.sg-toast__icon .ajans-icon {
	height: 1.3em;
	width: 1.3em;
}

.sg-toast:nth-child(2) .sg-toast__icon { background: #1a73e8; }
.sg-toast:nth-child(3) .sg-toast__icon { background: #25d366; }

.sg-toast b {
	color: var(--color-heading);
	display: block;
	font-size: .95em;
}

.sg-toast small {
	color: var(--color-muted);
	display: block;
	font-size: .82em;
}

/* Telefon: kilit ekranı */
.scene-m.scene-lock {
	background: linear-gradient(170deg, var(--color-secondary), color-mix(in srgb, var(--color-primary) 55%, var(--color-secondary)));
	color: #fff;
	padding: 20% 6% 6%;
	text-align: center;
}

.sl-time {
	font-family: var(--font-heading);
	font-size: 3.4em;
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1;
}

.sl-date {
	font-size: .85em;
	margin: .4em 0 1.6em;
	opacity: .8;
}

.scene-lock .sg-toast {
	backdrop-filter: blur(12px);
	background: rgba(255, 255, 255, .85);
	border: 0;
	text-align: left;
}

.scene-lock .sg-toast b {
	color: #0f1d14;
}

.scene-lock .sg-toast small {
	color: #4b5a51;
}

.scene-lock .sg-toast__icon {
	height: 2.2em;
	width: 2.2em;
}

/* ===========================================================================
   Sahne animasyonları
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Tasarım */
	.has-motion .is-active .sd-el {
		animation:
			sd-wire .5s var(--d, 0s) var(--ease) both,
			sd-fill .6s calc(var(--d, 0s) + 1.7s) ease both;
	}

	.has-motion .is-active .sd-img::before,
	.has-motion .is-active .sd-img::after {
		animation: ajans-pop .5s 2.6s var(--ease) both;
	}

	.has-motion .is-active .sd-select {
		animation: sd-select 5s .6s cubic-bezier(.6, 0, .2, 1) both;
	}

	.has-motion .is-active .sd-swatches i {
		animation: ajans-pop .4s var(--ease) both;
	}

	.has-motion .is-active .sd-swatches i:nth-child(1) { animation-delay: 1.9s; }
	.has-motion .is-active .sd-swatches i:nth-child(2) { animation-delay: 2s; }
	.has-motion .is-active .sd-swatches i:nth-child(3) { animation-delay: 2.1s; }
	.has-motion .is-active .sd-swatches i:nth-child(4) { animation-delay: 2.2s; }

	/* Kodlama */
	.has-motion .is-active .sc-lines > span {
		animation: sc-type .4s steps(22) both;
		animation-delay: calc(var(--i) * .28s + .2s);
	}

	.has-motion .is-active .sc-term {
		animation: ajans-rise .5s 3.1s var(--ease) both;
	}

	.has-motion .is-active .sc-p {
		animation: sc-build .6s var(--d, 0s) var(--ease) both;
	}

	/* Hız */
	.has-motion .is-active .ss-ring__fg {
		animation: ss-ring 1.6s calc(var(--i) * .15s + .3s) var(--ease) both;
	}

	.has-motion .is-active .ss-num {
		animation: ss-count 1.6s calc(var(--i) * .15s + .3s) var(--ease) both;
		counter-reset: n var(--n);
	}

	.has-motion .is-active .ss-metric i::after {
		animation: ajans-progress 1.1s calc(var(--i) * .15s + 1.4s) var(--ease) both;
	}

	/* SEO */
	.has-motion .is-active .se-query {
		animation: se-type 1s .3s steps(18) both, se-caret .6s step-end 4;
	}

	.has-motion .is-active .se-meta,
	.has-motion .is-active .se-res {
		animation: se-in .45s var(--ease) both;
	}

	.has-motion .is-active .se-meta { animation-delay: 1.3s; }
	.has-motion .is-active .se-res:nth-child(1) { animation: se-in .45s 1.75s var(--ease) both, se-up-you 1s 2.5s cubic-bezier(.6, 0, .2, 1) both; }
	.has-motion .is-active .se-res:nth-child(2) { animation: se-in .45s 1.4s var(--ease) both, se-down 1s 2.5s cubic-bezier(.6, 0, .2, 1) both; }
	.has-motion .is-active .se-res:nth-child(3) { animation: se-in .45s 1.5s var(--ease) both, se-down 1s 2.5s cubic-bezier(.6, 0, .2, 1) both; }
	.has-motion .is-active .se-res:nth-child(4) { animation: se-in .45s 1.6s var(--ease) both, se-down 1s 2.5s cubic-bezier(.6, 0, .2, 1) both; }

	.has-motion .is-active .se-res--you {
		transition: none;
	}

	.has-motion .is-active .se-rank,
	.has-motion .is-active .se-stars {
		animation: ajans-pop .45s 3.5s var(--ease) both;
	}

	/* Büyüme */
	.has-motion .is-active .sg-count {
		animation: ss-count 2.4s .4s cubic-bezier(.2, .7, .2, 1) both;
		counter-reset: n var(--n);
	}

	.has-motion .is-active .sg-line {
		animation: sg-draw 2.4s .4s var(--ease) both;
	}

	.has-motion .is-active .sg-area {
		animation: se-in 1s 1.6s ease both;
	}

	.has-motion .is-active .sg-dot {
		animation: ajans-pop .4s 2.7s var(--ease) both, sg-pulse 1.6s 3.1s ease-in-out infinite;
	}

	.has-motion .is-active .sg-toast {
		animation: sg-toast .55s calc(var(--i) * .7s + 1.2s) cubic-bezier(.2, .9, .3, 1.2) both;
	}

	.has-motion .is-active .scene-lock .sg-toast {
		animation-name: sg-toast-down;
	}

	.has-motion .is-active .sl-time,
	.has-motion .is-active .sl-date {
		animation: se-in .6s .1s ease both;
	}
}

/* Hizmet kartı ikonu */
@media (prefers-reduced-motion: no-preference) {
	.has-motion .svc-card__icon {
		transition: transform .45s var(--ease);
	}

	.has-motion .card--service:hover .svc-card__icon {
		transform: translateY(-4px) rotate(-6deg) scale(1.04);
	}

	.has-motion .card--service:hover .svc-card__icon::after {
		animation: svc-spin 6s linear infinite;
	}
}

/* ---------------------------------------------------------------------------
   Anahtar kareler
   ------------------------------------------------------------------------- */
@keyframes sd-wire {
	from { clip-path: inset(0 100% 100% 0); outline-color: var(--color-primary); background-color: transparent; }
	to { clip-path: inset(0 0 0 0); outline-color: var(--color-primary); background-color: transparent; }
}

@keyframes sd-fill {
	from { background-color: transparent; outline-color: var(--color-primary); }
	to { background-color: var(--bg); outline-color: transparent; }
}

@keyframes sd-select {
	0% { height: 19%; left: 5%; opacity: 0; top: 20.5%; width: 46%; }
	8%, 26% { height: 19%; left: 5%; opacity: 1; top: 20.5%; width: 46%; }
	36%, 54% { height: 47%; left: 55%; top: 17.5%; width: 40%; }
	64%, 80% { height: 10%; left: 5%; top: 52.5%; width: 17%; }
	90%, 100% { height: 27%; left: 5%; opacity: 1; top: 68.5%; width: 90%; }
}

@keyframes sc-type {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes sc-build {
	from { opacity: 0; outline: 1.5px dashed var(--color-primary); transform: translateY(.8em); }
	60% { outline-color: var(--color-primary); }
	to { opacity: 1; outline: 1.5px dashed transparent; transform: none; }
}

@keyframes ss-ring {
	from { stroke-dashoffset: 100; }
}

@keyframes ss-count {
	from { --n: 0; }
	to { --n: var(--v); }
}

@keyframes se-type {
	from { max-width: 0; }
	to { max-width: 100%; }
}

@keyframes se-caret {
	50% { border-right-color: var(--color-heading); }
}

@keyframes se-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes se-up-you {
	from { transform: translateY(calc(var(--row) * 3)); }
	to { transform: none; }
}

@keyframes se-down {
	from { transform: translateY(calc(var(--row) * -1)); }
	to { transform: none; }
}

@keyframes sg-draw {
	from { stroke-dashoffset: 260; }
	to { stroke-dashoffset: 0; }
}

@keyframes sg-pulse {
	50% { box-shadow: 0 0 0 .9em color-mix(in srgb, var(--color-primary) 0%, transparent); }
}

@keyframes sg-toast {
	from { opacity: 0; transform: translateX(110%); }
	to { opacity: 1; transform: none; }
}

@keyframes sg-toast-down {
	from { opacity: 0; transform: translateY(-60%) scale(.9); }
	to { opacity: 1; transform: none; }
}

@keyframes svc-spin {
	to { transform: rotate(360deg); }
}