/* ===================================================================
   SCROLL'A BAGLI METIN BELIRMESI                        2026-09-02

   Numarali bolum basliklari (.ek-bolum-no) kelimelere bolunuyor; her
   kelime kendi maskesinin arkasindan, ogenin ekrandaki ilerlemesine
   gore yukari kayarak cikiyor.

   KAYMA HESABI BURADA. metin-belir.js ogeye yalnizca --ek-ilerleme
   (0..1) yaziyor; asagidaki clamp() her kelimenin kaymasini kendi
   sirasina gore o degerden turetiyor. Boylece kare basina tek bir
   ozellik yaziliyor, kelime sayisi kadar degil.

   Butun kurallar .ek-belir-acik sinifina bagli; sinifi betik ekliyor.
   Betik calismazsa metin oldugu gibi, yerinde kaliyor.
   =================================================================== */

/* Kelime araligi flex gap ile: DOM'a bosluk dugumu koymadan, maske
   kutulari birbirine yapismadan. */
.ek-belir{display:inline-flex;flex-wrap:wrap;gap:0 .3em;vertical-align:top}

/* DIS KATMAN = maske. Yuksekligi line-height veriyor; .ek-bolum-no
   uzerinde de ayni 1.3 tanimli ki betik calissa da calismasa da satir
   yuksekligi ayni kalsin, yani duzen kaymasin. */
.ek-belir-kutu{
	display:block;
	overflow:hidden;
	line-height:1.3;
}

/* IC KATMAN = kayan kelime.
   p*n - i : p ilerledikce soldaki kelimeler once yerine oturuyor.
   1.4 carpani yukselisleri birbirine bindiriyor — kelimeler tek tek
   siraya girmis gibi degil, dalga halinde geliyor.
   1 - (o deger) : 1 iken tamamen asagida (%100), 0 iken yerinde. */
.ek-belir-kutu > span{
	display:block;
	line-height:1.3;
	transform:translateY(calc(
		(1 - clamp(0, calc((var(--ek-ilerleme, 1) * var(--ek-n, 1) - var(--ek-i, 0)) * 1.4), 1))
		* 100%
	));
	will-change:transform;
}

/* Bu baslik artik kendi belirisini yonetiyor: hareket.js'in genel
   [data-hrk] gizlemesi devre disi, yoksa iki animasyon ust uste biniyor
   ve maskeden yukselis toplu bir solmanin altinda kayboluyor. */
.hrk-hazir .ek-urun [data-hrk].ek-belir-acik,
.hrk-hazir .ek-urun [data-hrk].ek-belir-acik.hrk-gor{
	opacity:1;transform:none;transition:none;
}

/* Ekran okuyucu icin bolunmemis metin. */
.ek-gorsel-gizli{
	position:absolute;width:1px;height:1px;
	padding:0;margin:-1px;overflow:hidden;
	clip-path:inset(50%);white-space:nowrap;border:0;
}