/* =========================================================================
   ANASAYFA — SİNEMATİK HERO (alternatif varyant)
   Yalnız /home_alternatife şablonunda yüklenir (functions.php, koşullu).

   FİKİR: tek satır dev tipografi; 3B figür satırın TAM ORTASINDA durup
   yazıyı keser. "FİKİRDEN [figür] ETKİYE" — figür iki kelimeyi bağlayan
   köprü. Derinlik, figürün satırın üstüne (üçgen) ve altına (gövde)
   taşmasından geliyor.

   ⚠ Kelimeler flex'te EŞİT PAY alır (flex:1 1 0). Böylece ortadaki yuva
     matematiksel olarak satırın tam ortasına düşer ve mutlak konumlu figür
     (left:50%) yuvayla birebir hizalanır. Kelimeler doğal genişlikte
     bırakılsaydı FİKİRDEN daha uzun olduğu için yuva sola kayardı.
   ========================================================================= */

.tk-chero {
	/* Üst sınır 5.75 → 6.5rem: 1920px'de kelimeler ekrana göre küçük kalıyor,
	   sağda solda ölü boşluk oluşuyordu (ölçüldü). */
	--chero-fs:      clamp(1.6rem, 7.4vw, 6.5rem);    /* dev kelimeler */
	/* Figür boyu HEM genişliğe HEM yüksekliğe bağlı. Yalnız vw olsaydı geniş
	   ama kısa ekranlarda (dizüstü 1440×800) figür ekranı taşırıp alttaki
	   lead + butonları katlamanın altına itiyordu — ölçüldü, oluyordu. */
	--chero-fig-h:   clamp(300px, min(38vw, 50svh), 560px);
	/* ⚠ YUVA = tasarımın çekirdeği. Denetimde ölçüldü: .46 iken kelimelerle
	   figür arasında her satırda 28–66 px BOŞLUK kalıyordu; yani "figür
	   yazıyı keser" fikri masaüstünde hiç gerçekleşmiyordu — düzen üç ayrı
	   sütundu. Figürün satır hizasındaki gerçek genişliği (çene/yaka)
	   ≈ fig-h × .26; yuvayı ondan DAR tutmak kelimeleri figürün arkasına
	   sokar ve örtüşmeyi yaratır. */
	--chero-slot:    calc(var(--chero-fig-h) * .19);
	--chero-bg:      #0b0b0c;

	position: relative;
	overflow: hidden;
	isolation: isolate;                 /* karışım/z-index kendi içinde kalsın */
	background: var(--chero-bg);
	color: var(--tk-on-dark);
	padding: clamp(24px, 3.4vw, 48px) var(--tk-gutter) clamp(40px, 5vw, 72px);
	/* Sinematik his için ekranı doldursun; ama sabit 100vh DEĞİL — mobil
	   tarayıcı çubukları 100vh'yi yalan söyler ve içerik kesilir. */
	min-height: min(92svh, 960px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Zemin: amber ışıma (figürün başının arkasında) --- */
.tk-chero__glow {
	position: absolute;
	left: 50%;
	top: 18%;
	width: min(1100px, 120%);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle,
		rgba(252, 186, 4, .20) 0%,
		rgba(252, 186, 4, .07) 32%,
		transparent 62%);
	pointer-events: none;
	z-index: 0;
}

/* --- Zemin dokusu: çok soluk ızgara; düz siyahı "ucuz" olmaktan çıkarır --- */
.tk-chero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
	background-size: 76px 76px;
	/* Kenarlara doğru sönsün — çerçeve gibi durmasın. */
	-webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 25%, transparent 72%);
	        mask-image: radial-gradient(ellipse at 50% 42%, #000 25%, transparent 72%);
	pointer-events: none;
	z-index: 0;
}

.tk-chero__eyebrow {
	position: relative;
	z-index: 3;
	margin: 0 0 clamp(10px, 1.6vw, 20px);
	text-align: center;
	font: 600 var(--tk-fs-eyebrow) / 1 var(--tk-font-body);
	letter-spacing: var(--tk-ls-wide);
	text-transform: uppercase;
	color: var(--tk-primary);
}

/* ------------------------------- SAHNE -------------------------------
   Sahne, figürü TAM olarak kapsar: yüksekliği figür boyu kadar. Böylece
   figür ne tepesinden kesilir (eski hata) ne de altındaki bloğa taşar.
   Satır sahnenin dikey ortasında; figürün de ortası orada → satır figürün
   boyun/yaka hizasından geçer: baş + üçgen ÜSTTE, gövde ALTTA kalır.
   Referanstaki derinlik tam olarak buradan geliyor. */
.tk-chero__stage {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	width: 100%;
	margin-inline: auto;
	min-height: var(--chero-fig-h);
	display: grid;
	align-content: center;
	text-align: center;
}

.tk-chero__title {
	margin: 0;
	font-family: var(--tk-font-head);
}

.tk-chero__line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	font-size: var(--chero-fs);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.03em;
}

.tk-chero__w {
	flex: 1 1 0;                /* eşit pay → yuva tam ortada */
	min-width: 0;
	white-space: nowrap;
}
.tk-chero__w--l { text-align: right; color: var(--tk-on-dark); }
.tk-chero__w--r { text-align: left;  color: var(--tk-primary); }

/* Figürün duracağı boşluk. Kendisi görünmez; yalnız yer açar. */
.tk-chero__slot {
	flex: 0 0 var(--chero-slot);
}

/* Cümlenin devamı — H1'in içinde, dev satırın hemen altında.
   ⚠ ORTADA DEĞİL: ortaya konduğunda tam figürün göğsüne denk geliyor ve
   koyu metin amber montun üstünde okunmuyordu (ölçüldü, ekran görüntüsü).
   Sol yarıya alınıp sağa yaslandı: "FİKİRDEN"in altına, figürün soluna
   düşüyor — hem okunur hem editoryal duruyor. Mobilde satır zaten dikey
   yığıldığı için orada ortalı kalıyor (aşağıdaki mobil bloğa bak). */
.tk-chero__tail {
	display: block;
	position: relative;
	z-index: 3;                    /* figürün sönen alt kenarının önünde */
	width: 50%;
	text-align: right;
	padding-right: clamp(44px, 8vw, 120px);
	margin-top: clamp(6px, 1vw, 14px);
	font-family: var(--tk-font-body);
	font-size: clamp(.95rem, 1.5vw, 1.35rem);
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--tk-on-dark-soft);
}

/* ------------------------------- FİGÜR -------------------------------
   Ortalama `translate` ile yapılıyor, `transform` ile DEĞİL: transform
   sürekli salınım animasyonuna ayrıldı (bkz. HAREKET bölümü). */
.tk-chero__figwrap {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	display: block;
	z-index: 2;                  /* kelimelerin ÖNÜNDE — kesme etkisi burada */
	pointer-events: none;
	line-height: 0;
}

.tk-chero__fig {
	display: block;
	width: auto;
	height: var(--chero-fig-h);
	max-width: none;
	transform-origin: 50% 50%;
	/* Alt kenar karanlığa karışsın: gövde çerçeveden "kesilmiş" gibi
	   bitmesin, sahneden doğuyormuş gibi sönsün. */
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
	        mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
	filter: drop-shadow(0 0 60px rgba(252, 186, 4, .18));
}

/* ------------------------------- ALT BLOK ---------------------------- */
.tk-chero__foot {
	position: relative;
	z-index: 3;                  /* figür burada zaten sönmüş oluyor */
	max-width: 640px;
	margin: clamp(18px, 3vw, 40px) auto 0;
	text-align: center;
}

.tk-chero__lead {
	margin: 0 0 clamp(18px, 2.4vw, 30px);
	font-size: var(--tk-fs-lead);
	line-height: var(--tk-lh-body);
	color: var(--tk-on-dark-soft);
}

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

/* ------------------------------- KEŞFET ------------------------------
   SOLDA duruyor, sağda değil: sağ alt köşe sabit WhatsApp butonunun yeri
   (tk-consent/floating). Referans tasarımda sağdaydı ama burada üst üste
   biniyordu — ölçüldü. */
.tk-chero__cue {
	position: absolute;
	left: var(--tk-gutter);
	bottom: clamp(18px, 3vw, 40px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	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);
	text-decoration: none;
	transition: color var(--tk-t-med);
}
.tk-chero__cue:hover,
.tk-chero__cue:focus-visible { color: var(--tk-primary); }

.tk-chero__cue-txt { writing-mode: vertical-rl; }

.tk-chero__cue-line {
	width: 1px;
	height: 54px;
	background: linear-gradient(to bottom, var(--tk-on-dark-line), var(--tk-primary));
}

/* =========================================================================
   MOBİL — satır DİKEY yığılır, figür iki kelimenin ARASINDA kalır.
   Etki korunuyor: üçgen üstteki kelimeye, omuzlar alttakine taşıyor.
   ========================================================================= */
@media (max-width: 860px) {
	/* ⚠ Figür/kelime ORANI sabit tutulmalı. Eski değerlerde (fs max 3.6rem,
	   figür max 420px) 390px'te oran 5,4 iken 768px'te 7,3'e çıkıyordu:
	   figür orantısız büyüyüp üçgen "FİKİRDEN"in harflerini örtüyordu
	   (768px'de ölçüldü). Yeni tavanlar oranı ~5,3'te sabitliyor. */
	.tk-chero {
		--chero-fs:    clamp(2.1rem, 11.5vw, 4.5rem);
		--chero-fig-h: clamp(240px, 62vw, 380px);
		padding-bottom: clamp(56px, 9vw, 88px);
	}

	.tk-chero__line { flex-direction: column; }

	/* Dikey düzende figür yukarıda kaldığı için kuyruk ortada güvenle durur. */
	.tk-chero__tail {
		width: 100%;
		text-align: center;
		padding-right: 0;
		margin-top: clamp(10px, 2.4vw, 18px);
	}

	.tk-chero__w {
		flex: none;
		text-align: center;
	}

	/* Yuva artık YÜKSEKLİK açıyor; figür bu boşluğa oturuyor.
	   ⚠ %86 idi ve YETMİYORDU: figür yuvadan iki uçta fig-h×.07 taşıyor,
	   390px'de 17 px, 768px'de 26,5 px — denetimde ölçüldü, üçgen
	   "FİKİRDEN"in harf gövdesinin %34'ünü örtüyordu. %97: taşma ~5 px'e
	   iner, üçgenin tepesi harflerin taban çizgisine yalnızca DEĞER.
	   Dikeyde derinlik hissi korunur, harfler tam okunur. */
	.tk-chero__slot {
		flex: none;
		width: 100%;
		height: calc(var(--chero-fig-h) * .97);
	}

	/* Dikey düzende figür yuvanın hizasına gelmeli — yuva satırın ortasında
	   olduğu için sahnenin merkezi zaten oraya denk geliyor.
	   Alt kenar daha erken sönüyor ki altındaki kelime okunsun. */
	.tk-chero__fig {
		-webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 88%);
		        mask-image: linear-gradient(to bottom, #000 52%, transparent 88%);
	}

	/* Dikey yazı şeridi dar ekranda yer kaplıyor; yalnız çizgi kalsın. */
	.tk-chero__cue { left: 50%; transform: translateX(-50%); }
	.tk-chero__cue-txt { display: none; }
	.tk-chero__cue-line { height: 38px; }

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

/* =========================================================================
   HAREKET
   · Figür LCP adayı → opacity ile GELMEZ (CLAUDE.md §5.1/3). Yalnız kısa
     bir ölçek girişi; JS hiç çalışmasa da tam görünür.
   · Kelimeler .tk-motion altında gizli başlar, JS açar. `.tk-motion` yoksa
     (JS kapalı/patlak) bu kurallar hiç uygulanmaz → içerik görünür.
   ========================================================================= */
/* 1) GİRİŞ — yalnız ölçek, opacity YOK (figür LCP adayı).
      Görsel çözülene kadar beklesin diye JS `is-hazir` sınıfını ekler;
      sınıf hiç gelmezse (JS kapalı) animasyon da olmaz, figür tam görünür. */
/* ⚠ İKİ ANİMASYON BİRLİKTE: giriş ölçeği (tek sefer) + hale nabzı (sonsuz).
   Ayrı kurallara yazılsaydı ikincisi birincisini ezerdi — `animation`
   tek bir özellik, son bildirim kazanır. */
.tk-chero__figwrap.is-hazir .tk-chero__fig {
	animation:
		tk-chero-fig .75s cubic-bezier(.22, .61, .36, 1) both,
		tk-chero-hale 4.5s ease-in-out infinite;
}
@keyframes tk-chero-fig {
	from { transform: scale(1.05); }
	to   { transform: scale(1); }
}

/* 2) SÜREKLİ SALINIM — figür nefes alır.
      ⚠ Önce 9sn/6px idi ve kullanıcı "animasyon yok" dedi — haklıydı:
      6px, 700px'lik bir figürde gözle fark edilmiyor. 5,5sn/14px + çok
      hafif ölçek: hareket artık görülüyor ama hâlâ sakin.
      Yalnız transform → düzen kaymaz, compositor'da bedava. */
.tk-chero__figwrap {
	animation: tk-chero-salin 5.5s ease-in-out infinite;
}
@keyframes tk-chero-salin {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-14px) scale(1.012); }
}

/* 3) IŞIMA ATIMI — arkadaki amber nefes alır. Genlik .75→1 iken fark
      edilmiyordu; .55→1 ve ölçek değişimiyle "enerji" hissi veriyor. */
.tk-chero__glow {
	animation: tk-chero-atim 4.5s ease-in-out infinite;
}
@keyframes tk-chero-atim {
	0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
	50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* 3b) ÜÇGENİN PARLAMASI — marka işareti nabız gibi atsın.
       Figürün kendisi tek parça görsel olduğu için üçgeni ayrı
       animasyonlayamıyoruz; onun yerine figürün amber drop-shadow'unu
       nabızlandırıyoruz — ışık üçgenden yayılıyormuş gibi okunuyor. */
.tk-chero__fig {
	animation: tk-chero-hale 4.5s ease-in-out infinite;
}
@keyframes tk-chero-hale {
	0%, 100% { filter: drop-shadow(0 0 46px rgba(252, 186, 4, .14)); }
	50%      { filter: drop-shadow(0 0 78px rgba(252, 186, 4, .34)); }
}

/* Hero ekran dışındayken sonsuz döngüler dursun (JS `is-durgun` ekler).
   Boşuna CPU/pil harcamasınlar — sayfanın en altındayken bile 1100px'lik
   bir radial-gradient nabız atmaya devam ediyordu. */
.tk-chero.is-durgun .tk-chero__figwrap,
.tk-chero.is-durgun .tk-chero__glow { animation-play-state: paused; }

/* 4) KELİMELERİN GİRİŞİ — SAF CSS, JS'E BAĞLI DEĞİL.
      ⚠ Eskiden kelimeler `.tk-motion` altında opacity:0 ile başlıyor ve onları
      açan TEK şey tk-althero.js idi. O dosya yüklenemezse (404, reklam
      engelleyici, CSP) BAŞLIK KALICI OLARAK GÖRÜNMEZ kalıyordu — denetimde
      dosya bloklanarak kanıtlandı. CLAUDE.md §5.1/2: içerik JS olmadan
      görünmek ZORUNDA. CSS animasyonu bu bağımlılığı tamamen kaldırır. */
.tk-motion .tk-chero__w {
	animation: tk-chero-w-l .62s cubic-bezier(.22, .61, .36, 1) both;
}
.tk-motion .tk-chero__w--r {
	animation-name: tk-chero-w-r;
	animation-delay: .06s;
}
.tk-motion [data-tk-chero-eyebrow] {
	animation: tk-chero-eyebrow .45s ease-out both;
}
@keyframes tk-chero-w-l {
	from { opacity: 0; transform: translateX(-46px); }
	to   { opacity: 1; transform: none; }
}
@keyframes tk-chero-w-r {
	from { opacity: 0; transform: translateX(46px); }
	to   { opacity: 1; transform: none; }
}
@keyframes tk-chero-eyebrow {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@keyframes tk-chero-solma {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* SADE MOD — öteleme yok, yalnız solma; süreklilik arz eden her şey durur.
   ⚠ Işımanın atımı da KAPANIR: CLAUDE.md §5.1/1 "tüm hareket kapanır,
   İSTİSNA YOK" diyor. Önce estetik gerekçesiyle açık bırakılmıştı —
   anayasada istisnasız yazan tek kural bu, geri alındı. */
.tk-motion--sade .tk-chero__figwrap,
.tk-motion--sade .tk-chero__glow,
.tk-motion--sade .tk-chero__fig,
.tk-motion--sade .tk-chero__figwrap.is-hazir .tk-chero__fig { animation: none; }

.tk-motion--sade .tk-chero__w,
.tk-motion--sade .tk-chero__w--r { animation-name: tk-chero-solma; }

@media (prefers-reduced-motion: reduce) {
	.tk-chero__figwrap,
	.tk-chero__glow,
	.tk-chero__fig,
	.tk-chero__figwrap.is-hazir .tk-chero__fig { animation: none; }

	.tk-chero__w,
	.tk-chero__w--r,
	.tk-motion .tk-chero__w,
	.tk-motion .tk-chero__w--r { animation-name: tk-chero-solma; }
}