/* Kalistack — Tasima Bolumu (ksb-transfer)
 * Koyu zemin, solda metin, sagda sema kutusu, altta madalyon.
 * Hover golgesi yok; sayfa genelindeki kararla ayni. */

.ktr-kap {
	position: relative;
	background: #0B1A31;
	/* Madalyon alt kenardan tasar, o yuzden kirpilmaz. Isik huzmeleri
	   kendi katmaninda kirpildigi icin disari sizmaz. */
	overflow: visible;
}

/* Isik huzmeleri icin ayri, kirpilan katman. */
.ktr-isik {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
}
.ktr-isik::before,
.ktr-isik::after {
	content: '';
	position: absolute;
	width: 620px; height: 620px;
	border-radius: 50%;
}
.ktr-isik::before {
	top: -240px; left: -180px;
	background: radial-gradient(circle, rgba(47, 155, 255, .16), transparent 66%);
}
.ktr-isik::after {
	right: -200px; bottom: -300px;
	background: radial-gradient(circle, rgba(47, 155, 255, .12), transparent 66%);
}

.ktr {
	--ktr-vurgu: #2F9BFF;
	--ktr-btn1: #2F9BFF;
	--ktr-btn2: #0B6FD8;
	position: relative;
	z-index: 1;
	max-width: 1180px; margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ktr-sema-en, 440px);
	gap: 48px;
	align-items: center;
}
.ktr--semasiz { grid-template-columns: minmax(0, 1fr); }

/* ---------------- Sol sutun ---------------- */
.ktr-rozet {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 16px;
	border: 1px solid rgba(47, 155, 255, .38);
	border-radius: 999px;
	color: var(--ktr-vurgu);
	font-size: 12px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
}
.ktr-rozet i { font-size: 12px; }
.ktr-rozet svg { width: 12px; height: 12px; fill: currentColor; }

.ktr-bas {
	margin: 18px 0 14px;
	font-size: 40px; line-height: 1.18; font-weight: 800;
	color: #fff;
}
.ktr-vurgu { color: var(--ktr-vurgu); }

/* Vurgulu kelimede iki renk arasi gecis. background-clip: text
   desteklenmeyen tarayicida yazi kaybolmasin diye @supports icinde. */
@supports ( ( -webkit-background-clip: text ) or ( background-clip: text ) ) {
	.ktr-vurgu--gecis {
		background-image: linear-gradient(
			var(--ktr-vurgu-aci, 90deg),
			var(--ktr-vurgu1, var(--ktr-vurgu)),
			var(--ktr-vurgu2, var(--ktr-vurgu))
		);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
		/* Degradenin harflere oturmasi icin kendi kutusunu alir. */
		display: inline-block;
	}
}

.ktr-ack {
	margin: 0 0 6px;
	max-width: 600px;
	font-size: 15px; line-height: 1.68;
	color: #9FB3C8;
}
.ktr-alt {
	margin: 0 0 26px;
	font-size: 15px; line-height: 1.68;
	color: #9FB3C8;
}
.ktr-alt a { color: var(--ktr-vurgu); text-decoration: none; }
.ktr-alt a:hover { text-decoration: underline; }

/* ---------------- Ozellikler ---------------- */
.ktr-ozellikler {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0 0 32px;
}
.ktr-oz { display: flex; align-items: flex-start; gap: 10px; }
.ktr-oz-ikon {
	flex: 0 0 auto;
	font-size: 17px; line-height: 1;
	color: var(--ktr-vurgu);
	margin-top: 1px;
}
.ktr-oz-ikon svg { width: 17px; height: 17px; fill: currentColor; }
.ktr-oz-metin { display: flex; flex-direction: column; gap: 4px; }
.ktr-oz-bas { font-size: 14px; font-weight: 700; color: #fff; }
.ktr-oz-ack { font-size: 13px; line-height: 1.5; color: #8FA3B8; }

/* ---------------- Dugme ---------------- */
.ktr-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 30px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--ktr-btn1), var(--ktr-btn2));
	color: #fff; text-decoration: none;
	font-size: 14px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	transition: filter .18s ease;
}
.ktr-btn:hover { filter: brightness(1.1); color: #fff; }
.ktr-btn i { font-size: 12px; }

/* ---------------- Sag sutun: gorsel secenegi ----------------
   Kutu ve gorsel ayri katman; gorsel kutudan tasabilir. */
.ktr-medya {
	position: relative;
	min-height: 320px;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, .03);
	overflow: hidden;
}
.ktr-medya--tasma { overflow: visible; z-index: 2; }

.ktr-medya-gorsel {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	display: block;
	border-radius: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-decoration: none;
	transform: translate(var(--ktr-gx, 0px), var(--ktr-gy, 0px)) scale(var(--ktr-golcek, 1));
}
.ktr-medya--tasma .ktr-medya-gorsel { border-radius: 0; }

/* ---------------- Sag sutun: 3B sehir ----------------
   Her donusum ayri elemanda: egim, donme, fare kaymasi ve katmanin
   kendi hareketi birbirini ezmesin diye ic ice sarmalanir. */
.ktr-sehir {
	position: relative;
	min-height: 340px;
	perspective: 900px;
	--ktr-guc: 26;
	--ktr-px: 0;
	--ktr-py: 0;
}

/* Sehrin altindaki yumusak isik */
.ktr-sehir-isik {
	position: absolute;
	left: 50%; bottom: 4%;
	width: 82%; height: 42%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(47, 155, 255, .28), transparent 68%);
	pointer-events: none;
}

.ktr-sehir-egim,
.ktr-sehir-don {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	transform-style: preserve-3d;
}

/* Duruş: sabit egim. */
.ktr-sehir-egim {
	transform: rotateX(var(--ktr-taban-egim, 6deg));
	transition: transform .2s ease-out;
}
/* Tek parca izometrik cizimde dogru hareket budur: plaka elde tutulan
   bir nesne gibi farenin oldugu yone dogru egilir. */
.ktr-sehir--egil .ktr-sehir-egim {
	transform:
		rotateX( calc( var(--ktr-taban-egim, 6deg) - var(--ktr-py) * var(--ktr-egim-guc, 7) * 1deg ) )
		rotateY( calc( var(--ktr-px) * var(--ktr-egim-guc, 7) * 1deg ) );
}

/* Egilirken alttaki isik da hafifce kayar, golge hissi verir. */
.ktr-sehir--egil .ktr-sehir-isik {
	transform: translateX( calc( -50% + var(--ktr-px) * -12px ) );
	transition: transform .2s ease-out;
}
.ktr-sehir-don--acik {
	animation: ktr-sehir-don 30s linear infinite;
}
@keyframes ktr-sehir-don {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}

/* Cizimin oturdugu alan. Gorselin en-boy oranini alir ve sahnenin
   icine ortalanir; boylece nokta yuzdeleri dogrudan cizime denk gelir.
   Bu olmadan "contain" ile ortalanan gorselde koordinatlar kayardi. */
.ktr-sehir-alan {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: auto;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	max-height: 100%;
	transform-style: preserve-3d;
}

/* Disdaki katman fare kaymasini, icteki kendi hareketini yapar. */
.ktr-kat {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	--ktr-d: 0.3;
}
/* Katman kaydirmasi yalnizca o mod seciliyken uygulanir; tek parca
   cizimde katmanlarin ayri ayri kaymasi istenmez. */
.ktr-sehir--kaydir .ktr-kat {
	transform: translate3d(
		calc(var(--ktr-px) * var(--ktr-guc) * var(--ktr-d) * 1px),
		calc(var(--ktr-py) * var(--ktr-guc) * var(--ktr-d) * 1px),
		0
	);
	transition: transform .18s ease-out;
	will-change: transform;
}

.ktr-kat-ic {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	--ktr-mesafe: 12px;
	background-size: contain;
	background-position: center bottom;
	background-repeat: no-repeat;
	animation-duration: 6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
.ktr-kat-ic--suzul { animation-name: ktr-suzul; }
.ktr-kat-ic--salin { animation-name: ktr-salin; }
.ktr-kat-ic--nabiz { animation-name: ktr-nabiz-kat; }
.ktr-kat-ic--yok   { animation: none; }

@keyframes ktr-suzul {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(calc(var(--ktr-mesafe) * -1)); }
}
@keyframes ktr-salin {
	0%, 100% { transform: translateX(calc(var(--ktr-mesafe) * -0.5)); }
	50%      { transform: translateX(calc(var(--ktr-mesafe) * 0.5)); }
}
@keyframes ktr-nabiz-kat {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}

/* ---- Cizimin uzerindeki hareketli noktalar ----
   Konum yuzde ile verilir; nokta kendi merkezinden hizalanir. */
.ktr-hn {
	position: absolute;
	left: var(--ktr-x, 50%);
	top: var(--ktr-y, 50%);
	width: var(--ktr-boyut, 8px);
	height: var(--ktr-boyut, 8px);
	margin: calc(var(--ktr-boyut, 8px) / -2) 0 0 calc(var(--ktr-boyut, 8px) / -2);
	border-radius: 50%;
	background-color: var(--ktr-hn-renk, #FFD36E);
	animation-duration: 3s;
	animation-iteration-count: infinite;
	pointer-events: none;
}
/* Gorsel yuklendiyse renkli daire degil, gorsel gosterilir. */
.ktr-hn--gorselli {
	border-radius: 0;
	background-color: transparent;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/* Gorselin en-boy orani korunsun diye yukseklik serbest birakilir. */
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Yanip sonen pencere isigi: hafif parlama halesiyle */
.ktr-hn--isik {
	animation-name: ktr-isik;
	animation-timing-function: ease-in-out;
	box-shadow: 0 0 calc(var(--ktr-boyut, 8px) * 1.6) calc(var(--ktr-boyut, 8px) * 0.5) var(--ktr-hn-renk, #FFD36E);
}
@keyframes ktr-isik {
	0%, 100% { opacity: .18; }
	45%      { opacity: 1; }
	55%      { opacity: .95; }
}

/* Nabiz halkasi: yerinde durur, buyuyup soner */
.ktr-hn--nabiz {
	animation-name: ktr-hn-nabiz;
	animation-timing-function: ease-out;
	background-color: transparent;
	border: 2px solid var(--ktr-hn-renk, #FFD36E);
}
@keyframes ktr-hn-nabiz {
	0%   { transform: scale(.4); opacity: .9; }
	100% { transform: scale(2.2); opacity: 0; }
}

/* Gezen nesne: A noktasindan B noktasina. Yuzdeyle konum verildigi
   icin left/top canlandiriliyor; sahnede birkac tane olacagi varsayimiyla
   bu maliyet kabul edilebilir. */
.ktr-hn--gezen {
	animation-name: ktr-gez;
	animation-timing-function: linear;
	will-change: left, top;
}
.ktr-hn--geri { animation-direction: alternate; }
@keyframes ktr-gez {
	from { left: var(--ktr-x, 30%);  top: var(--ktr-y, 60%); }
	to   { left: var(--ktr-x2, 70%); top: var(--ktr-y2, 55%); }
}

/* ---------------- Sema ---------------- */
.ktr-sema {
	display: flex; align-items: center; justify-content: center;
	gap: 6px;
	padding: 34px 30px;
	border: 1px solid transparent;
	border-radius: 18px;
}
/* Dis cerceve yalnizca acikken kenarlik ve zemin alir. */
.ktr-sema--cerceveli {
	border-color: rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .02);
}

.ktr-kutu {
	position: relative;
	flex: 0 0 auto;
	width: 104px; min-height: 104px;
	padding: 18px 10px 12px;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 10px;
	border: 1px solid transparent;
	border-radius: 14px;
}
/* Kutucuk cercevesi varsayilan olarak kapali. */
.ktr-sema--kutulu .ktr-kutu {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .10);
}
.ktr-kutu-ic { font-size: 26px; line-height: 1; color: #C9D8E8; }
.ktr-kutu-ic svg { width: 26px; height: 26px; fill: currentColor; }
.ktr-kutu-ic img { max-width: 44px; max-height: 44px; width: auto; height: auto; display: block; }

.ktr-nokta {
	position: absolute;
	top: 10px; right: 10px;
	width: 7px; height: 7px; border-radius: 50%;
}
.ktr-nokta--kirmizi { background: #FF5A5A; }
.ktr-nokta--yesil { background: #35D07F; }

.ktr-etiket {
	font-size: 10px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: #8FA3B8; text-align: center;
	line-height: 1.3;
}
.ktr-etiket--cizik { text-decoration: line-through; }

/* ---------------- Yol ---------------- */
.ktr-ok {
	position: relative;
	flex: 1 1 auto;
	min-width: 70px;
	display: flex; align-items: center; justify-content: center;
}

.ktr-yol { display: block; width: 100%; height: auto; overflow: visible; }

.ktr-cizgi {
	stroke: rgba(255, 255, 255, .22);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 6 8;
}
/* Kesikler akarak yon belirtir. */
.ktr-ok--akan .ktr-cizgi { animation: ktr-akis 1.6s linear infinite; }
@keyframes ktr-akis { to { stroke-dashoffset: -28; } }

/* Yol uzerinde ilerleyen isaret. Path, PHP tarafindan --ktr-path
   olarak veriliyor; cizgiyle birebir ayni egri. */
.ktr-tasiyici {
	fill: var(--ktr-vurgu, #2F9BFF);
	offset-path: var(--ktr-path);
	offset-rotate: 0deg;
	animation: ktr-git 3s linear infinite;
}
@keyframes ktr-git {
	0%   { offset-distance: 0%;   opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}

.ktr-halka { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .5; }
.ktr-tasiyici--nabiz { color: var(--ktr-vurgu, #2F9BFF); }
.ktr-tasiyici--nabiz .ktr-halka { animation: ktr-nabiz 1.8s ease-in-out infinite; }
@keyframes ktr-nabiz {
	0%, 100% { r: 8; opacity: .5; }
	50%      { r: 12; opacity: .12; }
}

/* Yolun ortasindaki sabit ikon */
.ktr-belge {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px; line-height: 1;
	color: var(--ktr-vurgu);
}
.ktr-belge svg { width: 14px; height: 14px; fill: currentColor; }

/* offset-path desteklenmiyorsa isaret ortada sabit durur, kaybolmaz. */
@supports not (offset-path: path('M 0 0 L 1 1')) {
	.ktr-tasiyici { display: none; }
}

/* ---------------- Madalyon ---------------- */
.ktr-madalyon {
	position: absolute;
	left: 50%; bottom: 0;
	transform: translate(-50%, 50%);
	z-index: 2;
	width: 76px; height: 76px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border-radius: 50%;
	font-size: 28px; line-height: 1;
	color: var(--ktr-vurgu, #2F9BFF);
}
.ktr-madalyon svg { width: 28px; height: 28px; fill: currentColor; }
.ktr-madalyon img { max-width: 44px; max-height: 44px; width: auto; height: auto; display: block; }

/* ---------------- Duyarli ---------------- */
@media ( max-width: 1024px ) {
	.ktr {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}
	.ktr-bas { font-size: 32px; }
	.ktr-sag { display: flex; justify-content: center; }
	.ktr-sema { width: 100%; max-width: 440px; }
	.ktr-medya { width: 100%; max-width: 440px; }
	/* Dar ekranda tasma yatay kaydirma yaratmasin. */
	.ktr-medya--tasma { overflow: hidden; }
	.ktr-medya--tasma .ktr-medya-gorsel {
		top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
		transform: none !important;
		border-radius: inherit;
	}
}
@media ( max-width: 600px ) {
	.ktr-bas { font-size: 26px; }
	.ktr-ozellikler { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ktr-btn { width: 100%; justify-content: center; }
	.ktr-sema { flex-direction: column; gap: 14px; padding: 24px 18px; }
	/* Dikeyken yol da dikey olur: SVG ceyrek tur dondurulur. */
	.ktr-ok { width: 100%; min-height: 70px; }
	.ktr-yol { width: 70px; transform: rotate(90deg); }
}

/* Hareketi azalt tercihi: her sey durur, isaret yolun ortasinda kalir. */
@media ( prefers-reduced-motion: reduce ) {
	.ktr-ok--akan .ktr-cizgi,
	.ktr-tasiyici,
	.ktr-tasiyici--nabiz .ktr-halka { animation: none; }
	.ktr-tasiyici { offset-distance: 50%; opacity: 1; }

	/* Sehir sahnesi durur; katmanlar yerinde kalir. */
	.ktr-sehir-don--acik,
	.ktr-kat-ic { animation: none !important; }
	.ktr-kat { transform: none !important; transition: none !important; }
	.ktr-sehir--egil .ktr-sehir-egim {
		transform: rotateX(var(--ktr-taban-egim, 6deg)) !important;
		transition: none !important;
	}
	.ktr-sehir--egil .ktr-sehir-isik { transform: translateX(-50%) !important; }
	/* Noktalar durur; isiklar sonuk degil yanik kalir. */
	.ktr-hn { animation: none !important; }
	.ktr-hn--isik { opacity: 1; }
	.ktr-hn--nabiz { opacity: .6; }
}

/* ================= Gokyuzu ve hava =================
   Hepsi cizimle uretilir, hicbiri gorsel dosyasi istemez.
   Sehir alaninin icinde durduklari icin plaka egilince onlar da egilir. */

/* ---- Gunes ---- */
.ktr-gunes {
	position: absolute;
	left: var(--ktr-gunes-x, 78%);
	top: var(--ktr-gunes-y, 14%);
	width: var(--ktr-gunes-boyut, 64px);
	height: var(--ktr-gunes-boyut, 64px);
	margin: calc(var(--ktr-gunes-boyut, 64px) / -2) 0 0 calc(var(--ktr-gunes-boyut, 64px) / -2);
	border-radius: 50%;
	/* Disk duz renk: kullanicinin sectigi renk oldugu gibi gorunur.
	   Onceki surumde degradenin ara duragi ile box-shadow ust uste
	   binip kenarda rengi bozan bir halka olusturuyordu. */
	color: var(--ktr-gunes-renk, #FFD36E);
	background-color: var(--ktr-gunes-renk, #FFD36E);
	pointer-events: none;
}
/* Hale ayri katmanda: tek duraklı, yumusak inen bir parlaklik.
   Diskin arkasinda durdugu icin disk rengine karismaz. */
.ktr-gunes::after {
	content: '';
	position: absolute;
	top: -80%; right: -80%; bottom: -80%; left: -80%;
	border-radius: 50%;
	background: radial-gradient(circle at center, currentColor 0%, transparent 66%);
	opacity: .32;
	z-index: -1;
	pointer-events: none;
}

.ktr-gunes--dogan {
	animation: ktr-gunes-dog 14s ease-in-out infinite;
}
@keyframes ktr-gunes-dog {
	0%       { transform: translateY(70%) scale(.75); opacity: 0; }
	18%      { opacity: 1; }
	45%, 70% { transform: translateY(0) scale(1); opacity: 1; }
	100%     { transform: translateY(-18%) scale(1.05); opacity: 0; }
}

/* ---- Gokkusagi ----
   Halka bicimli radyal degrade; alt yarisi kirpilarak yay elde edilir. */
.ktr-gokkusagi {
	position: absolute;
	left: var(--ktr-gk-x, 50%);
	top: var(--ktr-gk-y, 46%);
	width: var(--ktr-gk-en, 78%);
	aspect-ratio: 2 / 1;
	transform: translate(-50%, -100%);
	overflow: hidden;
	opacity: var(--ktr-gk-op, .55);
	pointer-events: none;
}
.ktr-gokkusagi::before {
	content: '';
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 200%;
	border-radius: 50%;
	background: radial-gradient(
		closest-side circle at 50% 50%,
		transparent 0 62%,
		rgba(148, 70, 190, .85) 62.5%,
		rgba(60, 110, 220, .85) 66%,
		rgba(60, 180, 200, .85) 69.5%,
		rgba(90, 195, 110, .85) 73%,
		rgba(245, 215, 90, .85) 76.5%,
		rgba(245, 150, 60, .85) 80%,
		rgba(230, 85, 85, .85) 83.5%,
		transparent 85%
	);
	filter: blur(.4px);
}
.ktr-gokkusagi--beliren { animation: ktr-gk-belir 20s ease-in-out infinite; }
@keyframes ktr-gk-belir {
	0%, 12%   { opacity: 0; }
	32%, 62%  { opacity: var(--ktr-gk-op, .55); }
	85%, 100% { opacity: 0; }
}

/* ---- Yagmur ----
   Tek katman, tekrar eden degrade. Yuzlerce eleman yerine arka plan
   konumu canlandirilir; islemci maliyeti neredeyse sifir. */
.ktr-yagmur {
	position: absolute;
	top: -10%; right: -10%; bottom: -10%; left: -10%;
	background-image: repeating-linear-gradient(
		var(--ktr-y-aci, 12deg),
		transparent 0 calc(var(--ktr-y-aralik, 14px) - 1px),
		var(--ktr-y-renk, rgba(190, 225, 255, .55)) calc(var(--ktr-y-aralik, 14px) - 1px) var(--ktr-y-aralik, 14px)
	);
	background-size: 100% 22px;
	animation: ktr-yagmur-dus 1s linear infinite;
	pointer-events: none;
	/* Ust ve alt kenarda yumusak biterek kesik gorunmesin. */
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
@keyframes ktr-yagmur-dus {
	from { background-position: 0 0; }
	to   { background-position: 0 22px; }
}

/* ---- Kuslar ----
   Iki kanat, ortadan aciyla birlesir; kanat cirpma kanatlarin
   donmesiyle yapilir. Kus sahneyi soldan saga geceer. */
.ktr-kus {
	position: absolute;
	left: -12%;
	top: 22%;
	width: var(--ktr-kus-boyut, 12px);
	height: calc(var(--ktr-kus-boyut, 12px) * .6);
	animation: ktr-kus-uc 16s linear infinite;
	pointer-events: none;
}
.ktr-kus i {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	border-top: 2px solid var(--ktr-kus-renk, #123A5E);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	animation: ktr-kanat 0.5s ease-in-out infinite;
}
.ktr-kus i:first-child  { left: 0;  transform-origin: right center; }
.ktr-kus i:last-child   { right: 0; transform-origin: left center; }

@keyframes ktr-kanat {
	0%, 100% { transform: rotate(0deg) scaleY(1); }
	50%      { transform: rotate(0deg) scaleY(.35); }
}

/* Yatay yolculuk "left" ile yapilir (yuzde, sahne genisligine gore);
   dikey salinim transform'da kalir. Boylece kapsayici sorgu birimine
   (cqw) gerek kalmaz — o birim icin container-type gerekirdi ve
   containment 3B egimi bozardi. */
@keyframes ktr-kus-uc {
	0%   { left: -12%; transform: translateY(0);   opacity: 0; }
	8%   {             opacity: 1; }
	50%  {             transform: translateY(-14px); }
	92%  {             opacity: 1; }
	100% { left: 112%; transform: translateY(6px); opacity: 0; }
}
.ktr-kus--1 { top: 18%; animation-delay: 0s;   }
.ktr-kus--2 { top: 26%; animation-delay: 2.5s; animation-duration: 19s; }
.ktr-kus--3 { top: 13%; animation-delay: 5s;   animation-duration: 14s; }
.ktr-kus--4 { top: 30%; animation-delay: 7.5s; animation-duration: 21s; }
.ktr-kus--5 { top: 21%; animation-delay: 10s;  animation-duration: 17s; }
.ktr-kus--6 { top: 9%;  animation-delay: 12s;  animation-duration: 23s; }
.ktr-kus--7 { top: 34%; animation-delay: 14s;  animation-duration: 15s; }
.ktr-kus--8 { top: 24%; animation-delay: 16s;  animation-duration: 25s; }
.ktr-kus--2 i, .ktr-kus--5 i { animation-duration: .42s; }
.ktr-kus--3 i, .ktr-kus--7 i { animation-duration: .62s; }

/* Hareketi azalt: gokyuzu sakinlesir ama gorunur kalir. */
@media ( prefers-reduced-motion: reduce ) {
	.ktr-gunes--dogan,
	.ktr-gokkusagi--beliren,
	.ktr-yagmur,
	.ktr-kus,
	.ktr-kus i { animation: none !important; }
	.ktr-gunes--dogan { opacity: 1; transform: none; }
	.ktr-gokkusagi--beliren { opacity: var(--ktr-gk-op, .55); }
	.ktr-kus { left: 30%; opacity: 1; }
	.ktr-kus--2 { left: 52%; }
	.ktr-kus--3 { left: 68%; }
	.ktr-kus--4 { left: 44%; }
}