/* =========================================================================
   ANASAYFA — KAYDIRMAYLA OYNAYAN TAM EKRAN VİDEO (deneme varyantı)
   Yalnız page-home-alt.php şablonunda yüklenir. Yayındaki anasayfanın
   hero'su (page-homealt.css) bundan hiç etkilenmez.

   DÜZEN MANTIĞI
   Dış sarmalayıcı uzun (--scrub-mesafe); içindeki sahne `sticky` olduğu için
   ekranda çakılı kalır. Kullanıcı o mesafe boyunca kaydırdıkça JS videonun
   currentTime'ını ilerletir. Yani "sayfa duruyor, video dönüyor" hissi.

   METİN YERLEŞİMİ — karakterin üstüne yazı BİNMİYOR:
   Karakter karenin dikey ortasında duruyor. Bu yüzden başlık ÜSTTE, lead +
   CTA ALTTA; orta şerit karaktere bırakıldı. Okunurluk için videonun
   üstünde üst/alt koyu perde var (ortası şeffaf — karakter net kalsın).
   ========================================================================= */

/* ⚠ STICKY'NİN ÖN KOŞULU — bu kural olmadan hero sabitlenmez, kayıp gider.
   base.css:46 `body { overflow-x: hidden }` veriyor (yatay taşmayı kesmek
   için). Ama overflow-x:hidden, body'yi bir KAYDIRMA BAĞLAMI yapar ve
   içindeki her `position: sticky` çalışmaz hâle gelir — ölçüldü, hero
   sabitlenmiyordu. `clip` yatay taşmayı aynı şekilde keser ama kaydırma
   bağlamı YARATMAZ, sticky çalışır.
   Şimdilik yalnız bu sayfada; varyant onaylanırsa base.css'e taşınmalı
   (site genelinde sticky kullanımının önünü açar). */
body { overflow-x: clip; }

.tk-scrub {
	--scrub-mesafe: 320vh;   /* video başından sonuna bu kadar kaydırmada sarılır */
	position: relative;
	background: #000;
	color: var(--tk-on-dark);
}

/* ⚠ Sahne, YAPIŞKAN SİTE BAŞLIĞININ ALTINA yapışmalı — top:0 verilince
   sahnenin tepesi (eyebrow) opak beyaz başlığın arkasında kalıyor ve alttaki
   CTA ekrandan taşıyordu (ölçüldü). Başlık yüksekliği kadar aşağıdan başlar,
   yüksekliği de o kadar kısalır. */
.tk-scrub__sahne {
	position: sticky;
	top: var(--tk-header-h);
	height: calc(100svh - var(--tk-header-h));  /* svh: mobil çubukları 100vh'yi yalan söyler */
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-items: start;
}

/* Sarmalayıcı yüksekliği — sticky sahnenin kayacağı mesafe. */
.tk-scrub { height: var(--scrub-mesafe); }

/* ------------------------------- VİDEO ------------------------------- */
.tk-scrub__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;       /* 4:3 kaynak → geniş ekranda üst/alt kırpılır */
	object-position: 50% 42%;/* karakterin başı kadraj dışına çıkmasın */
	z-index: 0;
	pointer-events: none;
}

/* Üst/alt koyu perde — yazılar okunsun, ORTA şeffaf kalsın (karakter net). */
.tk-scrub__perde {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom,
			rgba(0, 0, 0, .78) 0%,
			rgba(0, 0, 0, .35) 22%,
			rgba(0, 0, 0, 0) 42%,
			rgba(0, 0, 0, 0) 56%,
			rgba(0, 0, 0, .45) 76%,
			rgba(0, 0, 0, .88) 100%);
}

/* ------------------------------- ÜST BLOK ---------------------------- */
.tk-scrub__ust {
	position: relative;
	z-index: 2;
	grid-row: 1;
	padding: clamp(20px, 4vh, 52px) var(--tk-gutter) 0;
	text-align: center;
}

.tk-scrub__eyebrow {
	margin: 0 0 clamp(8px, 1.4vh, 16px);
	font: 600 var(--tk-fs-eyebrow) / 1 var(--tk-font-body);
	letter-spacing: var(--tk-ls-wide);
	text-transform: uppercase;
	color: var(--tk-primary);
}

.tk-scrub__baslik {
	margin: 0;
	font-family: var(--tk-font-head);
	font-weight: 800;
	line-height: .92;
	letter-spacing: -.03em;
	font-size: clamp(2.6rem, 9vw, 7rem);
	display: flex;
	justify-content: center;
	gap: clamp(12px, 2.2vw, 34px);
	flex-wrap: wrap;
}
.tk-scrub__w { color: var(--tk-on-dark); }
.tk-scrub__w--amber { color: var(--tk-primary); }

/* ------------------------------- ALT BLOK ---------------------------- */
.tk-scrub__alt {
	position: relative;
	z-index: 2;
	grid-row: 3;
	padding: 0 var(--tk-gutter) clamp(26px, 5vh, 64px);
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.tk-scrub__lead {
	margin: 0 0 clamp(14px, 2.4vh, 26px);
	font-size: var(--tk-fs-lead);
	line-height: var(--tk-lh-body);
	color: var(--tk-on-dark-soft);
}

.tk-scrub__alt .tk-btn-row { justify-content: center; }

/* ------------------------------- KAYDIR ------------------------------ */
/* Sağ kenarda ince ilerleme rayı: videonun ne kadarının sarıldığını gösterir.
   Sayfanın genel okuma çubuğundan farklı — bu YALNIZ hero'nun ilerlemesi. */
.tk-scrub__cue {
	position: absolute;
	right: var(--tk-gutter);
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.tk-scrub__cue-yazi {
	writing-mode: vertical-rl;
	font: 600 var(--tk-fs-label) / 1 var(--tk-font-body);
	letter-spacing: var(--tk-ls-label);
	text-transform: uppercase;
	color: var(--tk-on-dark-muted);
}
.tk-scrub__cue-ray {
	width: 2px;
	height: clamp(70px, 16vh, 140px);
	background: var(--tk-on-dark-line);
	border-radius: 2px;
	overflow: hidden;
}
.tk-scrub__cue-dolgu {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--tk-primary);
	transform: scaleY(0);
	transform-origin: 50% 0;   /* yukarıdan aşağı dolsun */
}

/* ------------------------------- MOBİL ------------------------------- */
@media (max-width: 860px) {
	.tk-scrub {
		--scrub-mesafe: 260vh;   /* parmakla daha kısa mesafe daha iyi */
	}
	.tk-scrub__baslik {
		font-size: clamp(2.2rem, 13vw, 4rem);
		flex-direction: column;
		gap: 0;
	}
	/* Dar ekranda dikey yazı yer kaplıyor; yalnız ray kalsın. */
	.tk-scrub__cue-yazi { display: none; }
	.tk-scrub__cue { right: 12px; }

	.tk-scrub__alt .tk-btn-row { flex-direction: column; align-items: stretch; gap: 12px; }
	.tk-scrub__alt .tk-btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   HAREKET
   Buradaki hareket KULLANICININ KENDİ KAYDIRMASI — kendiliğinden oynayan
   bir animasyon değil. Bu yüzden sade modda da açık kalır: kullanıcı
   kaydırmayı bıraktığı an her şey durur, kontrol tamamen onda.
   Kapatılan tek şey: metinlerin ötelemeli girişi (konum değişimi).
   ========================================================================= */
.tk-motion .tk-scrub__ust,
.tk-motion .tk-scrub__alt {
	animation: tk-scrub-gir .6s cubic-bezier(.22, .61, .36, 1) both;
}
.tk-motion .tk-scrub__alt { animation-delay: .12s; }

@keyframes tk-scrub-gir {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@keyframes tk-scrub-solma {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.tk-motion--sade .tk-scrub__ust,
.tk-motion--sade .tk-scrub__alt { animation-name: tk-scrub-solma; }

@media (prefers-reduced-motion: reduce) {
	.tk-scrub__ust,
	.tk-scrub__alt,
	.tk-motion .tk-scrub__ust,
	.tk-motion .tk-scrub__alt { animation-name: tk-scrub-solma; }
}