/* ==========================================================================
   Ajans Theme – motion.css
   Laptop/telefon maketleri, kodla çizilmiş canlı arayüzler, ekran geçişleri,
   hero efektleri, kaydırınca beliren öğeler ve sayfa geçişleri.

   Kural: Animasyonlar yalnızca body.has-motion (panelden açık) ve
   prefers-reduced-motion: no-preference iken çalışır. Animasyonsuz durumda
   her öğe son halinde, tam görünür şekilde durur.
   ========================================================================== */

:root {
	--bezel: #121a15;
	--bezel-edge: #2a352e;
	--screen-bg: #ffffff;
	--ui-line: #e3e9df;
	--ui-soft: #f1f5ee;
}

:root[data-theme="dark"] {
	--screen-bg: #0f1913;
	--ui-line: #24342a;
	--ui-soft: #18251d;
}

/* ---------------------------------------------------------------------------
   Cihaz maketi
   ------------------------------------------------------------------------- */
.devices {
	--rx: 0deg;
	--ry: 0deg;
	margin: 0;
	position: relative;
	transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform .5s var(--ease);
}

.devices__glow {
	background: radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 35%, transparent), transparent);
	filter: blur(30px);
	inset: 8% 4% 4% 4%;
	position: absolute;
	z-index: -1;
}

.device {
	position: relative;
}

.devices__stage {
	padding: 4% 6% 10% 0;
	position: relative;
}

/* Laptop */
.device--laptop {
	width: 100%;
}

.device__lid {
	background: var(--bezel);
	border: 1px solid var(--bezel-edge);
	border-radius: 14px 14px 4px 4px;
	box-shadow: 0 30px 60px -20px rgba(8, 20, 12, .45);
	padding: 2.2%;
}

.device__screen {
	background: var(--screen-bg);
	border-radius: 6px;
	overflow: hidden;
	position: relative;
}

.device--laptop .device__screen {
	aspect-ratio: 16 / 10.4;
	display: flex;
	flex-direction: column;
}

.device__bar {
	align-items: center;
	background: var(--ui-soft);
	border-bottom: 1px solid var(--ui-line);
	display: flex;
	flex-shrink: 0;
	gap: 10px;
	height: 7%;
	min-height: 18px;
	padding: 0 3%;
}

.device__dots {
	display: flex;
	gap: 4px;
}

.device__dots i {
	background: #ff5f57;
	border-radius: 50%;
	display: block;
	height: 7px;
	width: 7px;
}

.device__dots i:nth-child(2) { background: #febc2e; }
.device__dots i:nth-child(3) { background: #28c840; }

.device__url {
	align-items: center;
	background: var(--screen-bg);
	border-radius: 999px;
	color: var(--color-muted);
	display: inline-flex;
	font-size: clamp(8px, .75vw, 11px);
	gap: 4px;
	margin-inline: auto;
	max-width: 60%;
	overflow: hidden;
	padding: 2px 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.device__url .ajans-icon {
	color: var(--color-primary);
	flex-shrink: 0;
}

.device__base {
	background: linear-gradient(#cfd6d1, #9aa59e);
	border-radius: 0 0 14px 14px;
	height: 14px;
	margin-inline: -7%;
	position: relative;
}

.device__base span {
	background: #7f8a83;
	border-radius: 0 0 8px 8px;
	height: 5px;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 16%;
}

/* Telefon */
.device--phone {
	bottom: 0;
	position: absolute;
	right: 0;
	width: 27%;
	z-index: 2;
}

.device--phone .device__screen {
	aspect-ratio: 9 / 19;
	border: 5px solid var(--bezel);
	border-radius: 24px;
	box-shadow: 0 0 0 1px var(--bezel-edge), 0 24px 50px -12px rgba(8, 20, 12, .5);
}

.device__notch {
	background: var(--bezel);
	border-radius: 0 0 10px 10px;
	height: 4.5%;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 38%;
	z-index: 3;
}

/* Slaytlar */
.device__slides {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.device--phone .device__slides {
	height: 100%;
}

.device__slide {
	inset: 0;
	opacity: 0;
	position: absolute;
	visibility: hidden;
}

.device__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.device__img {
	height: 100%;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

/* Rozetler */
.device-badges {
	list-style: none;
	margin: 0;
	padding: 0;
}

.device-badge {
	align-items: center;
	backdrop-filter: blur(10px);
	background: color-mix(in srgb, var(--color-card) 88%, transparent);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	display: flex;
	gap: 8px;
	padding: 8px 12px;
	position: absolute;
	z-index: 3;
}

.device-badge strong {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: clamp(.95rem, .8rem + .6vw, 1.25rem);
	letter-spacing: -.02em;
	line-height: 1;
}

.device-badge span {
	color: var(--color-heading);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.2;
	max-width: 11ch;
}

.device-badge--1 { left: -5%; top: 22%; }
.device-badge--2 { bottom: 18%; left: 6%; }
.device-badge--3 { right: 22%; top: -2%; }

.devices__progress {
	background: var(--ui-line);
	border-radius: 2px;
	bottom: 2%;
	height: 3px;
	left: 20%;
	overflow: hidden;
	position: absolute;
	width: 30%;
}

.devices__progress span {
	background: var(--color-primary);
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left;
	width: 100%;
}

/* Proje detay gösterimi */
.project-showcase {
	margin: 0 auto 56px;
	max-width: 980px;
}

/* ---------------------------------------------------------------------------
   Kodla çizilmiş arayüzler (ekran görüntüsü yoksa)
   ------------------------------------------------------------------------- */
.ui {
	background: var(--screen-bg);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 5%;
	position: relative;
}

.ui i,
.ui span,
.ui b,
.ui em,
.ui u {
	display: block;
}

.ui-lines {
	display: grid;
	gap: 7px;
}

.ui-lines i {
	background: var(--color-heading);
	border-radius: 3px;
	height: 9px;
	opacity: .85;
	width: var(--w, 60%);
}

.ui-lines i.is-thin {
	background: var(--ui-line);
	height: 5px;
	opacity: 1;
}

.ui-lines u {
	background: var(--color-primary);
	border-radius: 4px;
	height: 14px;
	margin-top: 6px;
	width: 34%;
}

/* Web sitesi ekranı */
.ui-site {
	gap: 8%;
}

.ui-site__nav {
	align-items: center;
	display: flex;
	gap: 6%;
}

.ui-site__nav b {
	background: var(--color-primary);
	border-radius: 4px;
	height: 10px;
	margin-right: auto;
	width: 12%;
}

.ui-site__nav span {
	background: var(--ui-line);
	border-radius: 3px;
	height: 5px;
	width: 8%;
}

.ui-site__nav em {
	background: var(--color-heading);
	border-radius: 4px;
	height: 12px;
	width: 11%;
}

.ui-site__hero {
	align-items: center;
	display: grid;
	gap: 8%;
	grid-template-columns: 1.2fr 1fr;
}

.ui-site__art {
	aspect-ratio: 1.3;
	background: var(--ui-soft);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

.ui-site__art span {
	border-radius: 50%;
	position: absolute;
}

.ui-site__art span:nth-child(1) {
	background: var(--color-primary);
	height: 60%;
	left: 12%;
	top: 18%;
	width: 46%;
}

.ui-site__art span:nth-child(2) {
	background: var(--color-accent);
	border-radius: 6px;
	height: 34%;
	right: 10%;
	top: 12%;
	width: 30%;
}

.ui-site__art span:nth-child(3) {
	background: var(--color-heading);
	border-radius: 6px;
	bottom: 10%;
	height: 22%;
	right: 18%;
	width: 44%;
}

.ui-site__cards {
	display: grid;
	gap: 4%;
	grid-template-columns: repeat(3, 1fr);
}

.ui-site__cards span {
	aspect-ratio: 1.6;
	background: var(--ui-soft);
	border: 1px solid var(--ui-line);
	border-radius: 6px;
}

.ui-site--mini {
	padding: 6%;
}

/* Proje kartı yer tutucu varyasyonları */
.ui-site--v1 .ui-site__hero {
	grid-template-columns: 1fr 1.2fr;
}

.ui-site--v1 .ui-site__hero > .ui-lines {
	order: 2;
}

.ui-site--v1 .ui-site__art span:nth-child(1) {
	border-radius: 8px;
	transform: rotate(-8deg);
}

.ui-site--v2 {
	background: var(--color-secondary);
}

.ui-site--v2 .ui-lines i,
.ui-site--v2 .ui-site__nav em {
	background: #fff;
}

.ui-site--v2 .ui-lines i.is-thin,
.ui-site--v2 .ui-site__nav span {
	background: rgba(255, 255, 255, .25);
}

.ui-site--v2 .ui-site__art,
.ui-site--v2 .ui-site__cards span {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .12);
}

.ui-site--v2 .ui-site__art span:nth-child(3) {
	background: var(--color-accent);
}

/* Analiz paneli */
.ui-dash {
	flex-direction: row;
	gap: 4%;
	padding: 0;
}

.ui-dash__side {
	background: var(--color-secondary);
	display: grid;
	gap: 10px;
	grid-auto-rows: min-content;
	padding: 5% 3%;
	width: 18%;
}

.ui-dash__side b {
	background: var(--color-primary);
	border-radius: 4px;
	height: 10px;
	margin-bottom: 10px;
	width: 70%;
}

.ui-dash__side i {
	background: rgba(255, 255, 255, .18);
	border-radius: 3px;
	height: 6px;
}

.ui-dash__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6%;
	padding: 5% 5% 5% 0;
}

.ui-dash__kpis {
	display: grid;
	gap: 4%;
	grid-template-columns: repeat(3, 1fr);
}

.ui-dash__kpis span {
	background: var(--ui-soft);
	border: 1px solid var(--ui-line);
	border-radius: 6px;
	padding: 8% 10%;
}

.ui-dash__kpis em {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(9px, 1.15vw, 16px);
	font-style: normal;
	font-weight: 700;
	letter-spacing: -.02em;
}

.ui-dash__kpis span:first-child em {
	color: var(--color-primary);
}

.ui-chart {
	align-items: flex-end;
	background: var(--ui-soft);
	border: 1px solid var(--ui-line);
	border-radius: 6px;
	display: flex;
	flex: 1;
	gap: 4%;
	padding: 4% 4% 0;
	position: relative;
}

.ui-chart > i {
	background: color-mix(in srgb, var(--color-primary) 30%, var(--screen-bg));
	border-radius: 3px 3px 0 0;
	flex: 1;
	height: var(--h);
	transform-origin: bottom;
}

.ui-chart > i:nth-last-child(2) {
	background: var(--color-primary);
}

.ui-chart__line {
	height: 70%;
	inset: auto 4% 10% 4%;
	position: absolute;
	width: 92%;
}

.ui-chart__line polyline {
	fill: none;
	stroke: var(--color-heading);
	stroke-dasharray: 160;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

/* Kod editörü */
.ui-code {
	background: #0f1a13;
	gap: 6%;
	padding: 4% 5%;
}

.ui-code__tabs {
	display: flex;
	gap: 6px;
}

.ui-code__tabs span {
	background: rgba(255, 255, 255, .08);
	border-radius: 4px 4px 0 0;
	height: 12px;
	width: 16%;
}

.ui-code__tabs span.is-on {
	background: rgba(255, 255, 255, .18);
}

.ui-code__lines {
	display: grid;
	gap: 7px;
	position: relative;
}

.ui-code__lines p {
	align-items: center;
	display: flex;
	gap: 2.5%;
	margin: 0;
}

.ui-code__lines em {
	color: rgba(255, 255, 255, .25);
	font-family: ui-monospace, monospace;
	font-size: 8px;
	font-style: normal;
	width: 12px;
}

.ui-code__lines i {
	border-radius: 2px;
	height: 6px;
	width: var(--w);
}

.ui-code .t-k { background: #c792ea; }
.ui-code .t-v { background: #82aaff; }
.ui-code .t-s { background: color-mix(in srgb, var(--color-primary) 70%, #c3e88d); }
.ui-code .t-f { background: #ffcb6b; }
.ui-code .t-p { background: transparent; }

.ui-code__caret {
	background: #fff;
	height: 10px;
	width: 2px;
}

/* Telefon: uygulama */
.ui-app {
	gap: 6%;
	padding: 14% 8% 0;
}

.ui-app__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.ui-app__head b {
	background: var(--color-heading);
	border-radius: 3px;
	height: 8px;
	width: 45%;
}

.ui-app__head span {
	background: var(--color-primary);
	border-radius: 50%;
	height: 18px;
	width: 18px;
}

.ui-app__banner {
	background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary)));
	border-radius: 10px;
	display: grid;
	gap: 6px;
	padding: 12% 10%;
}

.ui-app__banner i {
	background: rgba(255, 255, 255, .9);
	border-radius: 3px;
	height: 6px;
	width: 70%;
}

.ui-app__banner i + i {
	opacity: .6;
	width: 45%;
}

.ui-app__list {
	display: grid;
	gap: 8px;
}

.ui-app__list span {
	background: var(--ui-soft);
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	height: 26px;
	position: relative;
}

.ui-app__list span::before {
	background: var(--color-primary);
	border-radius: 6px;
	content: "";
	height: 14px;
	left: 6px;
	opacity: .3;
	position: absolute;
	top: 5px;
	width: 14px;
}

.ui-app__tab {
	border-top: 1px solid var(--ui-line);
	display: flex;
	justify-content: space-around;
	margin: auto -8% 0;
	padding: 8% 0 10%;
}

.ui-app__tab i {
	background: var(--ui-line);
	border-radius: 4px;
	height: 10px;
	width: 10px;
}

.ui-app__tab i:first-child {
	background: var(--color-primary);
}

/* Telefon: performans halkası */
.ui-ring {
	align-items: center;
	gap: 8%;
	justify-content: center;
	padding: 20% 10% 10%;
}

.ui-ring__dial {
	display: grid;
	place-items: center;
	width: 70%;
}

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

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

.ui-ring circle {
	fill: none;
	stroke-width: 4;
}

.ui-ring__bg {
	stroke: var(--ui-line);
}

.ui-ring__fg {
	stroke: var(--color-primary);
	stroke-dasharray: 100 100;
	stroke-dashoffset: 2;
	stroke-linecap: round;
}

.ui-ring strong {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(14px, 1.6vw, 22px);
}

.ui-ring .ui-lines {
	justify-items: center;
	width: 100%;
}

/* Telefon: sohbet / bildirim */
.ui-chat {
	gap: 8px;
	justify-content: flex-end;
	padding: 14% 7% 12%;
}

.ui-chat__msg {
	align-items: flex-end;
	display: flex;
	gap: 6px;
	margin: 0;
}

.ui-chat__msg b {
	background: var(--color-accent);
	border-radius: 50%;
	flex-shrink: 0;
	height: 14px;
	width: 14px;
}

.ui-chat__msg span {
	background: var(--ui-soft);
	border-radius: 10px 10px 10px 3px;
	display: grid;
	gap: 4px;
	padding: 8px;
	width: 72%;
}

.ui-chat__msg i {
	background: var(--ui-line);
	border-radius: 2px;
	height: 4px;
	width: var(--w);
}

.ui-chat__msg.is-me {
	justify-content: flex-end;
}

.ui-chat__msg.is-me span {
	background: var(--color-primary);
	border-radius: 10px 10px 3px 10px;
}

.ui-chat__msg.is-me i {
	background: rgba(255, 255, 255, .7);
}

/* ---------------------------------------------------------------------------
   Proje kartı: tarayıcı çerçevesi
   ------------------------------------------------------------------------- */
.card__media.browser {
	aspect-ratio: auto;
	background: var(--ui-soft);
	border-bottom: 1px solid var(--color-border);
	padding: 12px 12px 0;
}

.browser__bar {
	align-items: center;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	display: flex;
	gap: 4px;
	height: 22px;
	padding: 0 8px;
}

.browser__bar i {
	background: var(--color-border);
	border-radius: 50%;
	height: 6px;
	width: 6px;
}

.browser__bar span {
	background: var(--ui-soft);
	border-radius: 999px;
	height: 8px;
	margin-left: 8px;
	width: 46%;
}

.browser__view {
	aspect-ratio: 16 / 10;
	background: var(--screen-bg);
	border: 1px solid var(--color-border);
	border-bottom: 0;
	overflow: hidden;
	position: relative;
}

.browser__img {
	height: 100%;
	object-fit: cover;
	object-position: top center;
	width: 100%;
}

/* Uzun ekran görüntüsü: hover'da yukarıdan aşağı kayar. */
.browser--scroll .browser__img {
	height: auto;
	left: 0;
	position: absolute;
	top: 0;
	transform: translateY(0);
}

.card:hover .card__media.browser img {
	transform: none;
}

/* ---------------------------------------------------------------------------
   Kaydırma ilerleme çubuğu
   ------------------------------------------------------------------------- */
.scroll-progress {
	background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
	height: 3px;
	left: 0;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 0;
	transform: scaleX(var(--p, 0));
	transform-origin: left;
	z-index: 200;
}

.admin-bar .scroll-progress {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* ---------------------------------------------------------------------------
   Kart ışıması (imleci takip eder)
   ------------------------------------------------------------------------- */
.has-glow .card::before,
.has-glow .testimonial::before {
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%);
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity .3s;
	z-index: 2;
}

.has-glow .testimonial {
	position: relative;
}

.has-glow .card:hover::before,
.has-glow .testimonial:hover::before {
	opacity: 1;
}


/* ===========================================================================
   ANİMASYONLAR – yalnızca panelden açık ve hareket tercihi uygunsa
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Cihaz ekran geçişleri: dijital silme (wipe) + hafif kayma */
	.has-motion .device__slide {
		transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s .9s;
		transform: translateY(12px) scale(1.015);
	}

	.has-motion .device__slide.is-active {
		animation: ajans-wipe .9s var(--ease) both;
		transform: none;
		transition: opacity .5s var(--ease), transform .9s var(--ease), visibility 0s;
	}

	.has-motion .device__slide.is-leaving {
		opacity: 0;
		transform: translateY(-12px) scale(.985);
		visibility: visible;
	}

	.has-motion .device--phone .device__slide.is-active {
		animation-delay: .15s;
	}

	.has-motion .devices.is-playing .devices__progress span {
		animation: ajans-progress var(--interval, 4000ms) linear infinite;
	}

	/* Kodla çizilmiş arayüz animasyonları: slayt aktif olunca başlar */
	.has-motion .is-active .ui-chart > i {
		animation: ajans-grow .9s var(--ease) both;
		animation-delay: calc(var(--i) * 70ms + .2s);
	}

	.has-motion .is-active .ui-chart__line polyline {
		animation: ajans-draw 1.6s .5s var(--ease) both;
	}

	.has-motion .is-active .ui-code__lines p {
		animation: ajans-type .5s steps(12) both;
		animation-delay: calc(var(--i) * 180ms + .2s);
		clip-path: inset(0 100% 0 0);
	}

	.has-motion .ui-code__caret {
		animation: ajans-blink 1s steps(1) infinite;
	}

	.has-motion .is-active .ui-ring__fg {
		animation: ajans-ring 1.4s .3s var(--ease) both;
	}

	.has-motion .is-active .ui-chat__msg {
		animation: ajans-pop .45s var(--ease) both;
		animation-delay: calc(var(--i) * 450ms + .3s);
	}

	.has-motion .is-active .ui-site__art span:nth-child(1) {
		animation: ajans-float 6s ease-in-out infinite;
	}

	.has-motion .is-active .ui-site__art span:nth-child(2) {
		animation: ajans-float 5s ease-in-out -2s infinite reverse;
	}

	.has-motion .is-active .ui-lines u {
		animation: ajans-pulse 2.4s ease-in-out infinite;
	}

	.has-motion .is-active .ui-app__list span {
		animation: ajans-rise .5s var(--ease) both;
	}

	.has-motion .is-active .ui-app__list span:nth-child(2) { animation-delay: .1s; }
	.has-motion .is-active .ui-app__list span:nth-child(3) { animation-delay: .2s; }
	.has-motion .is-active .ui-app__list span:nth-child(4) { animation-delay: .3s; }

	/* Yüzen rozetler */
	.has-motion .device-badge {
		animation: ajans-badge-in .7s var(--ease) both, ajans-bob 6s ease-in-out infinite;
		animation-delay: calc(var(--i) * .25s + .8s), calc(var(--i) * -2s);
	}

	/* Proje kartı: uzun ekranı kaydır */
	.has-motion .browser--scroll .browser__img {
		transition: top 3.5s cubic-bezier(.45, 0, .25, 1), transform 3.5s cubic-bezier(.45, 0, .25, 1);
	}

	.has-motion .card:hover .browser--scroll .browser__img,
	.has-motion .card:focus-within .browser--scroll .browser__img {
		top: 100%;
		transform: translateY(-100%);
	}

	.has-motion .card--project:hover .card__media.browser {
		background: var(--color-primary-soft);
	}

	/* Hero: hareketli ızgara, ışık kümeleri ve veri ışınları */
	.has-motion .hero:not(.hero--has-bg)::before {
		animation: ajans-grid 30s linear infinite;
	}

	.hero__fx {
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		position: absolute;
		z-index: -1;
	}

	.hero__blob {
		border-radius: 50%;
		filter: blur(60px);
		opacity: .35;
		position: absolute;
	}

	.hero__blob--1 {
		background: var(--color-primary);
		height: 420px;
		right: 5%;
		top: -10%;
		width: 420px;
	}

	.hero__blob--2 {
		background: var(--color-accent);
		bottom: -20%;
		height: 300px;
		left: 30%;
		opacity: .18;
		width: 300px;
	}

	.has-motion .hero__blob--1 { animation: ajans-drift 18s ease-in-out infinite; }
	.has-motion .hero__blob--2 { animation: ajans-drift 22s ease-in-out -6s infinite reverse; }

	.hero__beam {
		background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
		height: 1px;
		left: 0;
		opacity: 0;
		position: absolute;
		width: 160px;
	}

	.hero__beam--1 { top: 143px; }
	.hero__beam--2 { top: 335px; }
	.hero__beam--3 { top: 527px; }

	.hero__beam--v1,
	.hero__beam--v2 {
		background: linear-gradient(180deg, transparent, var(--color-primary), transparent);
		height: 160px;
		top: 0;
		width: 1px;
	}

	.hero__beam--v1 { left: calc(50% + 47px); }
	.hero__beam--v2 { left: calc(50% + 383px); }

	.has-motion .hero__beam--1 { animation: ajans-beam-x 7s linear 1s infinite; }
	.has-motion .hero__beam--2 { animation: ajans-beam-x 9s linear 3.5s infinite; }
	.has-motion .hero__beam--3 { animation: ajans-beam-x 8s linear 6s infinite; }
	.has-motion .hero__beam--v1 { animation: ajans-beam-y 6s linear 2s infinite; }
	.has-motion .hero__beam--v2 { animation: ajans-beam-y 8s linear 5s infinite; }

	/* Hero açılış koreografisi */
	.has-motion .hero__content > * {
		animation: ajans-rise .8s var(--ease) both;
	}

	.has-motion .hero__content > :nth-child(2) { animation-delay: .08s; }
	.has-motion .hero__content > :nth-child(3) { animation-delay: .16s; }
	.has-motion .hero__content > :nth-child(4) { animation-delay: .24s; }
	.has-motion .hero__content > :nth-child(5) { animation-delay: .32s; }

	.has-motion .hero__media {
		animation: ajans-device-in 1.1s .2s var(--ease) both;
	}

	.has-motion .hero__highlights li {
		animation: ajans-rise .6s var(--ease) both;
	}

	.has-motion .hero__highlights li:nth-child(1) { animation-delay: .45s; }
	.has-motion .hero__highlights li:nth-child(2) { animation-delay: .55s; }
	.has-motion .hero__highlights li:nth-child(3) { animation-delay: .65s; }

	/* Kaydırınca beliren öğeler (JS yoksa hiçbir şey gizlenmez) */
	/* translate/scale bağımsız özellikleri kullanılır; hover'daki transform ile çakışmaz. */
	.js-motion .has-motion [data-reveal] {
		opacity: 0;
		transition: opacity .7s var(--ease), translate .8s var(--ease), scale .8s var(--ease);
		transition-delay: calc(var(--d, 0) * 90ms);
		translate: 0 28px;
	}

	.js-motion .has-motion [data-reveal="left"] {
		translate: -32px 0;
	}

	.js-motion .has-motion [data-reveal="zoom"] {
		scale: .94;
		translate: 0 0;
	}

	.js-motion .has-motion [data-reveal].is-visible {
		opacity: 1;
		scale: 1;
		translate: 0 0;
	}

	/* Süreç çizgisi dolar */
	.has-motion .process__step:not(:last-child)::after {
		background: var(--color-primary);
		bottom: 0;
		content: "";
		left: 25px;
		position: absolute;
		top: 52px;
		transform: scaleY(0);
		transform-origin: top;
		transition: transform 1s var(--ease) .3s;
		width: 2px;
	}

	.has-motion .process__step.is-visible:not(:last-child)::after {
		transform: scaleY(1);
	}

	.js-motion .has-motion .process__step.is-visible .process__marker {
		animation: ajans-ping .9s var(--ease) .2s;
	}

	/* Mikro etkileşimler */
	.has-motion .btn--primary {
		overflow: hidden;
		position: relative;
	}

	.has-motion .btn--primary::after {
		background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
		content: "";
		inset: 0;
		position: absolute;
		transform: translateX(-120%);
		transition: transform .7s var(--ease);
	}

	.has-motion .btn--primary:hover::after {
		transform: translateX(120%);
	}

	.has-motion .btn:active {
		transform: scale(.97);
	}

	.has-motion .card {
		transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .35s var(--ease);
	}

	.has-motion .card:hover {
		transform: translateY(-4px);
	}

	.has-motion .card--service:hover .card__icon {
		animation: ajans-icon .6s var(--ease);
		background: var(--color-primary);
		color: var(--color-primary-contrast);
	}

	.has-motion .card__icon {
		transition: background-color .25s, color .25s;
	}

	.has-motion .feature__icon,
	.has-motion .stat__icon {
		transition: transform .35s var(--ease);
	}

	.has-motion .feature:hover .feature__icon,
	.has-motion .stat:hover .stat__icon {
		transform: translateY(-3px) rotate(-6deg);
	}

	.has-motion .feature {
		background-image: linear-gradient(var(--color-primary), var(--color-primary));
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 0 2px;
		border-top-color: var(--color-border);
		transition: background-size .6s var(--ease);
	}

	.has-motion .feature.is-visible,
	.has-motion .feature:hover {
		background-size: 100% 2px;
	}

	.has-motion .faq-item[open] .faq-item__a {
		animation: ajans-rise .4s var(--ease);
	}

	.has-motion .section-kicker::before {
		animation: ajans-pulse 2.4s ease-in-out infinite;
		background: var(--color-primary);
		border-radius: 50%;
		content: "";
		display: inline-block;
		height: 7px;
		margin-right: 8px;
		vertical-align: middle;
		width: 7px;
	}

	.has-motion .cta-box::after {
		animation: ajans-sweep 6s ease-in-out infinite;
		background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
		z-index: 0;
	}

	.cta-box > * {
		position: relative;
		z-index: 1;
	}

	/* Sayfa geçişleri (View Transitions API) */
	.site-header {
		view-transition-name: site-header;
	}

	::view-transition-old(root) {
		animation: ajans-vt-out .22s ease both;
	}

	::view-transition-new(root) {
		animation: ajans-vt-in .38s var(--ease) both;
	}
}

/* Masaüstünde cihazlar faresi izler (perspektif). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.has-motion .devices:hover {
		transition: transform .15s linear;
	}
}

/* ---------------------------------------------------------------------------
   Anahtar kareler
   ------------------------------------------------------------------------- */
@keyframes ajans-wipe {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes ajans-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes ajans-grow {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes ajans-draw {
	from { stroke-dashoffset: 160; }
	to { stroke-dashoffset: 0; }
}

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

@keyframes ajans-blink {
	50% { opacity: 0; }
}

@keyframes ajans-ring {
	from { stroke-dashoffset: 100; }
	to { stroke-dashoffset: 2; }
}

@keyframes ajans-pop {
	from { opacity: 0; transform: translateY(10px) scale(.9); }
	to { opacity: 1; transform: none; }
}

@keyframes ajans-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes ajans-float {
	50% { transform: translate(6%, -8%); }
}

@keyframes ajans-bob {
	50% { transform: translateY(-8px); }
}

@keyframes ajans-badge-in {
	from { opacity: 0; transform: translateY(14px) scale(.9); }
	to { opacity: 1; transform: none; }
}

@keyframes ajans-pulse {
	50% { opacity: .55; }
}

@keyframes ajans-grid {
	to { background-position: 47px 47px; }
}

@keyframes ajans-drift {
	33% { transform: translate(-40px, 30px) scale(1.08); }
	66% { transform: translate(30px, -20px) scale(.95); }
}

@keyframes ajans-beam-x {
	0% { opacity: 0; transform: translateX(-200px); }
	10% { opacity: .9; }
	90% { opacity: .9; }
	100% { opacity: 0; transform: translateX(100vw); }
}

@keyframes ajans-beam-y {
	0% { opacity: 0; transform: translateY(-200px); }
	10% { opacity: .8; }
	90% { opacity: .8; }
	100% { opacity: 0; transform: translateY(900px); }
}

@keyframes ajans-device-in {
	from { opacity: 0; transform: translateY(40px) rotateX(8deg); }
	to { opacity: 1; transform: none; }
}

@keyframes ajans-ping {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent); }
	100% { box-shadow: 0 0 0 16px transparent; }
}

@keyframes ajans-icon {
	30% { transform: translateY(-4px) rotate(-8deg); }
	60% { transform: translateY(0) rotate(4deg); }
}

@keyframes ajans-sweep {
	0%, 60% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@keyframes ajans-vt-out {
	to { opacity: 0; transform: translateY(-8px); }
}

@keyframes ajans-vt-in {
	from { opacity: 0; transform: translateY(12px); }
}

/* ---------------------------------------------------------------------------
   Kırılımlar
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.hero__blob--1 {
		height: 240px;
		opacity: .22;
		right: -30%;
		top: auto;
		bottom: 10%;
		width: 240px;
	}

	.hero__blob--2 {
		display: none;
	}
}

@media (max-width: 479px) {
	.device-badge span {
		display: none;
	}

	.device-badge--3 {
		display: none;
	}

	.device-badge--1 {
		left: 0;
	}
}

@media (min-width: 1024px) {
	.hero.hero--devices .hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}

	.devices {
		margin-right: -4%;
	}

	/* Masaüstünde süreç çizgisi yatay dolar */
	.has-motion .process__step:not(:last-child)::after {
		bottom: auto;
		height: 2px;
		left: 52px;
		right: -24px;
		top: 25px;
		transform: scaleX(0);
		transform-origin: left;
		width: auto;
	}

	.has-motion .process__step.is-visible:not(:last-child)::after {
		transform: scaleX(1);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.has-motion .process__step:not(:last-child)::after {
		display: none;
	}
}

/* ==========================================================================
   Gerçekçi sayfa maketleri: hizmetler laptop ve telefonda
   Ölçüler container query birimleriyle (cqw) verilir: maket, 1440 px genişliğinde
   gerçek bir sayfanın birebir küçültülmüş hali gibi davranır.
   ========================================================================== */
.device__screen {
	container-type: inline-size;
}

.mock,
.mock-m {
	background: var(--screen-bg);
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	height: 100%;
	line-height: 1.45;
	overflow: hidden;
	position: relative;
}

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

.mock {
	font-size: 1.12cqw;
}

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

/* Ortak parçalar */
.mock__logo {
	align-items: center;
	color: var(--color-heading);
	display: flex !important;
	font-family: var(--font-heading);
	font-size: 1.15em;
	font-weight: 800;
	gap: .4em;
	letter-spacing: -.02em;
	white-space: nowrap;
}

.mock__logo b {
	background: var(--color-primary);
	border-radius: .35em;
	display: block;
	height: 1.4em;
	width: 1.4em;
}

.mock__logo img {
	height: 2em;
	object-fit: contain;
	width: auto;
}

.mock__btn {
	background: var(--color-button);
	border-radius: var(--radius-button);
	color: var(--color-button-text);
	display: inline-block !important;
	font-weight: 700;
	padding: .75em 1.4em;
	position: relative;
	white-space: nowrap;
}

.mock__btn--sm {
	font-size: .9em;
	padding: .55em 1.1em;
}

.mock__btn--ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--color-heading);
	color: var(--color-heading);
}

.mock__title {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	letter-spacing: -.03em;
	line-height: 1.05;
}

.mock__lead {
	color: var(--color-muted);
}

.mock__checks {
	display: grid !important;
	gap: .5em;
}

.mock__checks > span {
	align-items: center;
	color: var(--color-heading);
	display: flex !important;
	font-weight: 600;
	gap: .5em;
}

.mock__checks .ajans-icon {
	background: var(--color-primary);
	border-radius: 50%;
	color: var(--color-primary-contrast);
	flex-shrink: 0;
	height: 1.25em;
	padding: .15em;
	width: 1.25em;
}

.mock__img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Laptop sayfası */
.mock__nav {
	align-items: center;
	border-bottom: 1px solid var(--ui-line);
	display: flex;
	gap: 2.5em;
	padding: 1.3em 4.5em;
}

.mock__menu {
	display: flex !important;
	gap: 2.2em;
	margin-left: auto;
}

.mock__menu span {
	color: var(--color-heading);
	font-weight: 600;
}

.mock__menu .is-on {
	color: var(--color-primary);
}

.mock__hero {
	align-items: center;
	display: grid;
	flex: 1;
	gap: 4em;
	grid-template-columns: 1.05fr .95fr;
	padding: 3.2em 4.5em 2.4em;
	position: relative;
}

.mock__hero::before {
	background-image: linear-gradient(var(--ui-line) 1px, transparent 1px), linear-gradient(90deg, var(--ui-line) 1px, transparent 1px);
	background-size: 3em 3em;
	content: "";
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse at 75% 30%, #000, transparent 70%);
	mask-image: radial-gradient(ellipse at 75% 30%, #000, transparent 70%);
	position: absolute;
	z-index: 0;
}

.mock__hero > * {
	position: relative;
	z-index: 1;
}

.mock__text {
	display: flex !important;
	flex-direction: column;
	gap: 1.1em;
}

.mock__crumb {
	color: var(--color-primary);
	font-size: .9em;
	font-weight: 700;
}

.mock .mock__title {
	font-size: 3.6em;
}

.mock .mock__lead {
	font-size: 1.15em;
	max-width: 34em;
}

.mock__actions {
	display: flex !important;
	gap: .8em;
}

.mock__visual {
	aspect-ratio: 4 / 3.2;
	border-radius: 1.2em;
	box-shadow: 0 2em 4em -1.5em rgba(10, 30, 15, .35);
	overflow: hidden;
	position: relative;
}

.mock__visual .service-art,
.mock-m__visual .service-art {
	border-radius: inherit;
}

.mock__visual .service-art__chip {
	font-size: 1em;
}

.mock__strip {
	border-top: 1px solid var(--ui-line);
	display: grid !important;
	gap: 1.5em;
	grid-template-columns: repeat(3, 1fr);
	padding: 1.5em 4.5em;
}

.mock__tile {
	align-items: center;
	color: var(--color-heading);
	display: flex !important;
	font-weight: 700;
	gap: .7em;
}

.mock__tile .ajans-icon {
	background: var(--color-primary-soft);
	border-radius: .5em;
	color: var(--color-primary);
	flex-shrink: 0;
	height: 2.4em;
	padding: .55em;
	width: 2.4em;
}

/* İmleç: Teklif Al butonunun üstünde biter ve tıklar */
.mock-cursor {
	height: 2.2em;
	left: 55%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 45%;
	width: 2.2em;
	z-index: 4;
}

/* Telefon sayfası */
.mock-m__status {
	align-items: center;
	color: var(--color-heading);
	display: flex !important;
	flex-shrink: 0;
	font-size: .78em;
	font-weight: 700;
	justify-content: space-between;
	padding: .9em 1.6em .4em;
	position: relative;
	z-index: 2;
}

.mock-m__sig {
	align-items: flex-end;
	display: flex !important;
	gap: 2px;
}

.mock-m__sig i {
	background: var(--color-heading);
	border-radius: 1px;
	display: block;
	width: 3px;
}

.mock-m__sig i:nth-child(1) { height: 4px; }
.mock-m__sig i:nth-child(2) { height: 6px; }
.mock-m__sig i:nth-child(3) { height: 8px; }

.mock-m__sig b {
	border: 1.5px solid var(--color-heading);
	border-radius: 2px;
	display: block;
	height: 7px;
	margin-left: 4px;
	position: relative;
	width: 15px;
}

.mock-m__sig b::after {
	background: var(--color-heading);
	content: "";
	inset: 1px 4px 1px 1px;
	position: absolute;
}

.mock-m__scroll {
	display: flex !important;
	flex-direction: column;
	gap: .9em;
	padding: 0 1.2em 5em;
}

.mock-m__nav {
	align-items: center;
	display: flex !important;
	justify-content: space-between;
	padding: .4em 0;
}

.mock-m__nav .mock__logo {
	font-size: 1em;
}

.mock-m__burger {
	display: grid !important;
	gap: 3px;
}

.mock-m__burger i {
	background: var(--color-heading);
	border-radius: 2px;
	display: block;
	height: 2px;
	width: 16px;
}

.mock-m__visual {
	aspect-ratio: 4 / 3.3;
	border-radius: 1em;
	overflow: hidden;
}

.mock-m__visual .service-art__chip {
	font-size: .7em;
}

.mock-m .mock__title {
	font-size: 1.9em;
}

.mock-m .mock__lead {
	font-size: .92em;
}

.mock-m .mock__checks {
	font-size: .88em;
}

.mock-m__cta {
	background: var(--color-button);
	border-radius: 999px;
	bottom: 1.1em;
	box-shadow: 0 .8em 1.6em -.4em color-mix(in srgb, var(--color-button) 60%, transparent);
	color: var(--color-button-text);
	font-weight: 700;
	left: 1.2em;
	padding: .85em;
	position: absolute;
	right: 1.2em;
	text-align: center;
	z-index: 2;
}

/* Hizmet sekmeleri (cihazların altında) */

.devices__tabs {
	display: flex;
	gap: 6px;
	margin-top: 22px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.devices__tabs::-webkit-scrollbar {
	display: none;
}

.devices__tab {
	background: transparent;
	border: 0;
	color: var(--color-muted);
	cursor: pointer;
	display: grid;
	flex: 1 0 auto;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	gap: 8px;
	min-width: 88px;
	padding: 6px 4px;
	text-align: left;
}

.devices__tab:hover,
.devices__tab.is-active {
	color: var(--color-heading);
}

.devices__tab-label {
	white-space: nowrap;
}

.devices__tab-bar {
	background: var(--color-border);
	border-radius: 2px;
	height: 3px;
	overflow: hidden;
}

.devices__tab-bar span {
	background: var(--color-primary);
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left;
}

.devices__tab.is-active .devices__tab-bar span {
	transform: scaleX(1);
}

/* Hizmet ekranlarında rozetler içeriği örtmesin: köşelere, ekran dışına */
.hero__media,
.hero__content {
	min-width: 0;
}

.devices--services .device-badge--1 {
	left: -4%;
	top: -2%;
}

.devices--services .device-badge--2 {
	bottom: 0;
	left: 2%;
}

.devices--services .device-badge--3 {
	right: 24%;
	top: -4%;
}

@media (max-width: 767px) {
	.devices--services .device-badge--1 {
		left: 0;
		top: -6%;
	}

	.devices--services .device-badge--2 {
		bottom: -2%;
	}
}

/* Tarayıcı yükleme çizgisi */
.device__bar {
	position: relative;
}

.device__bar::after {
	background: var(--color-primary);
	bottom: -1px;
	content: "";
	height: 2px;
	left: 0;
	opacity: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.has-motion .devices.is-navigating .device__bar::after {
		animation: ajans-load .8s var(--ease) both;
	}

	/* Sekme ilerlemesi: aktif sekmenin çizgisi süre boyunca dolar */
	.has-motion .devices.is-playing .devices__tab.is-active .devices__tab-bar span {
		animation: ajans-progress var(--interval, 4000ms) linear both;
	}

	.has-motion .devices__tab .devices__tab-bar span {
		transition: transform .3s;
	}

	/* Sayfa yüklenme koreografisi */
	.has-motion .device__slide.is-active .mock__text > * {
		animation: ajans-rise .6s var(--ease) both;
	}

	.has-motion .device__slide.is-active .mock__text > :nth-child(2) { animation-delay: .1s; }
	.has-motion .device__slide.is-active .mock__text > :nth-child(3) { animation-delay: .18s; }
	.has-motion .device__slide.is-active .mock__text > :nth-child(4) { animation-delay: .26s; }
	.has-motion .device__slide.is-active .mock__text > :nth-child(5) { animation-delay: .34s; }

	.has-motion .device__slide.is-active .mock__visual {
		animation: ajans-zoom-in .9s .15s var(--ease) both;
	}

	.has-motion .device__slide.is-active .mock__visual img,
	.has-motion .device__slide.is-active .mock-m__visual img {
		animation: ajans-kenburns calc(var(--interval, 4000ms) + 1s) ease-out both;
	}

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

	.has-motion .device__slide.is-active .mock__tile:nth-child(2) { animation-delay: .45s; }
	.has-motion .device__slide.is-active .mock__tile:nth-child(3) { animation-delay: .55s; }
	.has-motion .device__slide.is-active .mock__tile:nth-child(1) { animation-delay: .35s; }

	/* İmleç butona gider ve tıklar */
	.has-motion .device__slide.is-active .mock-cursor {
		animation: ajans-cursor 2.4s .8s cubic-bezier(.5, 0, .2, 1) both;
	}

	.has-motion .device__slide.is-active .mock__btn--cta {
		animation: ajans-click .3s 2.65s ease both;
	}

	/* Telefon: sayfa kendiliğinden aşağı kayar */
	.has-motion .device__slide.is-active .mock-m__scroll {
		animation: ajans-phone-scroll calc(var(--interval, 4000ms)) 1s cubic-bezier(.45, 0, .25, 1) both;
	}

	.has-motion .device__slide.is-active .mock-m__cta {
		animation: ajans-rise .5s .6s var(--ease) both;
	}
}

@keyframes ajans-load {
	0% { opacity: 1; transform: scaleX(0); }
	70% { opacity: 1; transform: scaleX(.85); }
	100% { opacity: 0; transform: scaleX(1); }
}

@keyframes ajans-zoom-in {
	from { opacity: 0; transform: translateY(1.5em) scale(.96); }
	to { opacity: 1; transform: none; }
}

@keyframes ajans-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}

@keyframes ajans-cursor {
	0% { opacity: 0; transform: translate(24em, 12em); }
	15% { opacity: 1; }
	75% { transform: translate(0, 0); }
	82% { transform: translate(0, 0) scale(.85); }
	90%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes ajans-click {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-button) 55%, transparent); transform: scale(1); }
	40% { transform: scale(.95); }
	100% { box-shadow: 0 0 0 1em transparent; transform: scale(1); }
}

@keyframes ajans-phone-scroll {
	0%, 15% { transform: translateY(0); }
	75%, 100% { transform: translateY(-34%); }
}