/* ==========================================================================
   GOOD IPTV PLAYER — SİTE KATMANI
   Tipografi ve düzen uygulamadan ölçülmüştür: arastirma/duzen-ve-tipografi.md
   • Gövde yazısı SF Pro (uygulamanın Theme.app(...) karşılığı)
   • "GOOD" marka kelimesi Avenir Next Bold + dikey #FFF→#9696A6 degrade
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--ink); color:#fff;
  font-family:-apple-system,"SF Pro Text","SF Pro Display",system-ui,
              "Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

/* Sayfa zemini — Theme.screenGradient (Theme.swift:143) + marka ışıması */
.zemin{
  position:fixed; inset:0; z-index:-2; background:var(--zemin-grad);
}
.zemin::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 620px at 78% -6%, rgba(142,90,255,.16), transparent 62%),
    radial-gradient(780px 540px at 10% 4%,  rgba(231,19,128,.13), transparent 60%);
}

/* --- Kap ------------------------------------------------------------------ */
.kap{ width:min(1180px, calc(100% - 40px)); margin-inline:auto }

/* --- Marka kilidi — AppLogo (Theme.swift:261-280) -------------------------
   İşaret yüksekliği = size×1.8 · "GOOD" punto = size×1.45
   İşaret↔yazı = size×0.22 · kerning = size×0.03
   -------------------------------------------------------------------------- */
.marka{ display:inline-flex; align-items:center; --s:17px; gap:calc(var(--s)*.22) }
.marka img{ height:calc(var(--s)*1.8); width:auto }
.marka b{
  font-family:"Avenir Next","Avenir",-apple-system,sans-serif; font-weight:700;
  font-size:calc(var(--s)*1.45); letter-spacing:calc(var(--s)*.03);
  line-height:1;
  background:var(--yazi-grad); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}

/* --- Üst bant ------------------------------------------------------------- */
.ustbant{
  position:sticky; top:0; z-index:50; height:64px;
  display:flex; align-items:center; gap:18px;
  background:rgba(5,5,9,.92); border-bottom:1px solid var(--hair);   /* S4: backdrop-filter kaldırıldı */
}
.ustbant nav{ margin-left:auto; display:flex; gap:26px; align-items:center }
.ustbant nav a{ font-size:13.5px; font-weight:500; color:var(--dim);
  transition:color .18s ease }
.ustbant nav a:hover{ color:#fff }

/* --- Düğmeler ------------------------------------------------------------- */
.dugme{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:var(--r-satir);
  font-size:14.5px; font-weight:700; letter-spacing:.01em;
  background:var(--pembe-dolgu); color:#fff;      /* Theme.pinkFill */
  box-shadow:0 10px 30px -12px rgba(231,19,128,.85);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.dugme:hover{ transform:translateY(-2px);
  box-shadow:0 16px 40px -14px rgba(231,19,128,.95) }
.dugme.sade{ background:var(--chip); box-shadow:none;
  border:1px solid var(--hair); color:rgba(255,255,255,.92) }
.dugme.sade:hover{ background:#282838 }

/* --- Bölüm tipografisi ---------------------------------------------------- */
.bolum{ padding:118px 0; position:relative }
.etiket{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:800; letter-spacing:.17em;
  text-transform:uppercase; color:var(--magenta); margin-bottom:16px;
}
.etiket::before{                       /* ShelfHeader'ın pembe kapsülü 3.5×17 */
  content:""; width:3.5px; height:17px; border-radius:2px;
  background:var(--pembe-dolgu);
}
h1{ font-size:clamp(34px,4.7vw,58px); font-weight:800; line-height:1.03;
    letter-spacing:-.028em; margin:0 0 20px }
h2{ font-size:clamp(28px,3.9vw,46px); font-weight:800; line-height:1.1;
    letter-spacing:-.022em; margin:0 0 16px }
h3{ font-size:19px; font-weight:700; letter-spacing:-.008em; margin:0 0 8px }
.giris{ font-size:clamp(16px,1.35vw,19px); color:var(--dim);
        max-width:62ch; margin:0 0 30px }
.vurgu{ color:var(--magenta) }   /* 🔴 Degrade kuralı: pembe+mor degrade
   YALNIZ marka işaretinde (GMark.fillGradient). Uygulamada Theme.titleGradient
   hiç çizilmiyor; başlık vurgusu düz Theme.pink olur. */

/* ==========================================================================
   AÇILIŞ SAHNESİ
   ========================================================================== */
.kahraman{ padding:76px 0 96px; position:relative; overflow:hidden }
.kahraman .ic{ display:grid; grid-template-columns:1.06fr .94fr;
  gap:56px; align-items:center }

/* Logo kendini kuruyor — 4 ORİJİNAL parça (g/logo-parca1..4.png).
   Hiçbiri yeniden çizilmedi; her biri tam tuval üstünde kendi yerinde. */
.logokur{ position:relative; width:132px; aspect-ratio:1280/1368; margin-bottom:26px }
.logokur img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:0; animation:parcaGel .95s cubic-bezier(.2,.8,.2,1) forwards }
.logokur img:nth-child(1){ animation-delay:.05s; --dx:-46px; --dy:-30px; --r:-14deg }
.logokur img:nth-child(2){ animation-delay:.17s; --dx:-40px; --dy: 42px; --r: 12deg }
.logokur img:nth-child(3){ animation-delay:.29s; --dx: 52px; --dy:-38px; --r: 16deg }
.logokur img:nth-child(4){ animation-delay:.41s; --dx: 46px; --dy: 34px; --r:-12deg }
@keyframes parcaGel{
  from{ opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.86) }
  to  { opacity:1; transform:none }
}
.kahraman h1{ opacity:0; animation:yukselGel .8s .62s cubic-bezier(.2,.8,.2,1) forwards }
.kahraman .giris{ opacity:0; animation:yukselGel .8s .74s cubic-bezier(.2,.8,.2,1) forwards }
.kahraman .eylem{ opacity:0; animation:yukselGel .8s .86s cubic-bezier(.2,.8,.2,1) forwards;
  display:flex; gap:13px; flex-wrap:wrap; align-items:center }
@keyframes yukselGel{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }

.kunye{ margin-top:26px; display:flex; gap:26px; flex-wrap:wrap;
  font-size:12.5px; color:var(--dim); opacity:0;
  animation:yukselGel .8s .98s cubic-bezier(.2,.8,.2,1) forwards }
.kunye b{ display:block; color:rgba(255,255,255,.9); font-size:15px; font-weight:700 }

@media (prefers-reduced-motion:reduce){
  .logokur img,.kahraman h1,.kahraman .giris,.kahraman .eylem,.kunye{
    animation:none; opacity:1; transform:none }
}
@media (max-width:900px){
  .kahraman .ic{ grid-template-columns:1fr; gap:44px }
  .bolum{ padding:84px 0 }
}

/* ==========================================================================
   3B TELEFON — içindeki ana ekran uygulamadan birebir kurulmuştur
   (üst bant 48pt · raf başlığı ShelfHeader · afiş kartı PosterCardView)
   Sahne perspektifle eğik durur; kartlar ekranın İÇİNDEN çıkar.
   ========================================================================== */
.sahne{ perspective:1500px; perspective-origin:50% 42%; position:relative }
.telefon{
  /* 🔴 HER ÖLÇÜ TEK KAYNAKTAN TÜRER (--en). Sabit px yazılırsa boy varyantları
     bozulur: 10.09.2026'da ölçüldü — 232px varyantında ekran köşesi %42
     sapıyordu, çünkü padding ve border-radius px cinsindendi.
       kenar  = gövde eninin %3,03'ü   ((77,6−72,89)/2 / 77,6)
       köşe   = gövde eninin %14,77'si (55/440 pt + kenar payı)
       ada    = gövde eninin %26,68'i × %7,91'i (125×37 pt) */
  --en:min(310px,84%);
  position:relative; width:var(--en); margin-inline:auto;
  aspect-ratio:776/1630;        /* iPhone 16 Pro Max GÖVDESİ 77,6×163,0 mm */
  border-radius:calc(var(--en)*.1477); padding:calc(var(--en)*.0303);
  background:linear-gradient(155deg,#3a3a48,#14141c 42%,#2c2c38);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.92),
             0 0 0 1px rgba(255,255,255,.07),
             0 0 90px -30px rgba(231,19,128,.42);
  transform:rotateY(-10deg) rotateX(4deg) rotateZ(-1deg);
  transform-style:preserve-3d;
  animation:telefonGel 1.15s .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes telefonGel{
  from{ opacity:0; transform:rotateY(-22deg) rotateX(8deg) translateY(38px) scale(.94) }
  to  { opacity:1; transform:rotateY(-10deg) rotateX(4deg) rotateZ(-1deg) }
}
.telefon .cam{
  position:relative; width:100%; height:100%;
  border-radius:calc(var(--en)*.1174);   /* dış köşe − kenar */
  overflow:hidden; background:var(--zemin-grad);
  display:flex; flex-direction:column;
}
.telefon .cikinti{                             /* dinamik ada */
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:26.68%; aspect-ratio:3.375; border-radius:999px;  /* 125×37 pt */
  top:calc(var(--en)*.036); background:#000; z-index:6;
}
/* — telefon içi: üst bant (HeaderMetrics.height 48 · edge 16) — */
.ekbant{ height:34px; flex:0 0 34px; display:flex; align-items:center;
  padding:0 11px; margin-top:26px }
.ekbant .marka{ --s:9px }
.ekbant .sag{ margin-left:auto; display:flex; gap:9px; opacity:.75 }
.ekbant .sag i{ width:13px; height:2px; background:#fff; border-radius:1px;
  box-shadow:0 4px 0 #fff, 0 -4px 0 #fff }

/* — telefon içi: hero afişi — */
.ekhero{ margin:2px 11px 0; border-radius:10px; overflow:hidden;
  aspect-ratio:16/10; position:relative; background:var(--card); }
.ekhero > img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block }
.ekhero .kar{ position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(5,5,9,.92) 0%,rgba(5,5,9,.86) 33%,
             rgba(5,5,9,.42) 60%,transparent 100%) }
.ekhero .yz{ position:absolute; left:9px; bottom:8px; right:34% }
.ekhero .yz b{ display:block; font-size:9.5px; font-weight:800; line-height:1.1 }
.ekhero .yz span{ display:block; font-size:6px; color:var(--dim); margin-top:2px }
.ekhero .yz em{ display:inline-block; margin-top:5px; font-style:normal;
  font-size:6px; font-weight:800; padding:3px 8px; border-radius:5px;
  background:var(--pembe-dolgu) }

/* — telefon içi: raf başlığı — ShelfHeader (Components.swift:315-352) — */
.ekraf{ margin:11px 11px 0 }
.ekraf .bas{ display:flex; align-items:center; gap:5px; margin-bottom:6px }
.ekraf .bas::before{ content:""; width:2px; height:9.5px; border-radius:1px;
  background:var(--pembe-dolgu); flex:0 0 2px }
.ekraf .bas b{ font-size:8.5px; font-weight:800; letter-spacing:-.01em }
.ekraf .bas span{ font-size:6px; font-weight:600; color:var(--dim);
  background:var(--chip); padding:1px 4px; border-radius:20px }
.ekraf .bas u{ margin-left:auto; text-decoration:none; font-size:6.5px;
  font-weight:700; color:rgba(255,255,255,.7) }
.ekraf .bas u::after{ content:" ›"; color:var(--magenta) }
.ekraf .sir{ display:flex; gap:5px }
.ekraf .sir > *{ flex:0 0 auto }

/* — telefon içi: alt sekme — */
.ekalt{ margin-top:auto; padding:7px 11px 13px; display:flex;
  align-items:center; gap:7px }
.ekalt .sek{ display:flex; align-items:center; gap:4px; font-size:6.5px;
  font-weight:700; padding:5px 9px; border-radius:20px;
  background:var(--pembe-dolgu) }
.ekalt .bos{ width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.07) }

/* — ekrandan ÇIKAN kartlar — gerçek kart yapıları. Telefonun üstüne
     BİLEREK biniyorlar (ekrandan çıkma etkisi); konumları .sahne ile sınırlı,
     sayfa akışını hiç bozmuyorlar. — */
.ucan{ position:absolute; z-index:4; transform-style:preserve-3d;
  animation:ucanGel 1s cubic-bezier(.2,.8,.2,1) both }
@keyframes ucanGel{
  from{ opacity:0; transform:translate3d(-38px,14px,0) scale(.82) }
}
.ucan.k1{ top:15%;  right:1%;   width:146px; animation-delay:1.25s;
          transform:translateZ(70px) rotateY(-11deg) }
.ucan.k2{ top:44%;  right:-3%;  width:166px; animation-delay:1.45s;
          transform:translateZ(96px) rotateY(-13deg) }
.ucan.k3{ bottom:6%; left:-1%;  width:112px; animation-delay:1.65s;
          transform:translateZ(58px) rotateY(9deg) }
.ucan .baslik{ font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--magenta); margin-bottom:7px }
.ucan.k1 .baslik, .ucan.k2 .baslik{ text-align:right }   /* telefonun altında kalmasın */

@media (prefers-reduced-motion:reduce){
  .telefon,.ucan{ animation:none; opacity:1 }
}
@media (max-width:900px){
  .telefon{ transform:none; animation:none; --en:min(280px,72%) }
  /* 🔴 Ölçüldü 09.09.2026: 561–900 px arasında k3 sol kenardan 11–25 px,
     k1 sağ kenardan 20 px kesiliyordu. Bu aralıkta gizlenirler. */
  .ucan{ display:none }
}
@media (max-width:560px){
  .telefon{ --en:min(260px,78%) }
}

/* ==========================================================================
   KOREOGRAFİ ALTYAPISI
   Kaynak: arastirma/koreografi.md
   • Tek eğri ailesi: cubic-bezier(.22,1,.36,1) — zıplama YOK
   • Mesafe tavanı 24px (Apple 8-16 kullanır)
   • JS yoksa hiçbir içerik kaybolmaz: gizleme kuralları .js-var altında
   ========================================================================== */
:root{
  --sure-hizli:.22s; --sure-orta:.42s; --sure-yavas:.72s;
  --egri:cubic-bezier(.22,1,.36,1);
}

/* ══════════════════════════════════════════════════════════════════════════
   AÇILMA — DİNLENME HÂLİ GÖRÜNÜRDÜR.
   🔴 Öğeler `opacity:0`'da park edip gözlemci beklemez. Neden: 09.09.2026'da
      ölçüldü — çizim yapmayan bir sekmede CSS GEÇİŞLERİ İLERLEMİYOR, bu yüzden
      `.gor` eklenmiş ve kural eşleşmiş olsa bile 10 <h2>'nin tamamı görünmez
      kalıyordu. Geçiş yerine ANİMASYON kullanılır: sınıf yoksa yazı görünür,
      sınıf gelince açılış oynar. Tek bir sessiz hata artık içeriği silemez.
   ══════════════════════════════════════════════════════════════════════════ */
.js-var .ac.gor{ animation:acGel var(--sure-yavas) var(--egri) both }
@keyframes acGel{
  from{ opacity:0; transform:translateY(18px) }
  to  { opacity:1; transform:none }
}

/* Satır maskesi başlık açılımı — aynı ilke: varsayılan GÖRÜNÜR */
.maske{ display:block; overflow:clip; padding-bottom:.08em }
.js-var .maske > span{ display:block }
.js-var .gor .maske > span,
.js-var .maske.gor > span{ animation:maskeAc var(--sure-yavas) var(--egri) both }
@keyframes maskeAc{ from{ transform:translateY(105%) } to{ transform:none } }

@media (prefers-reduced-motion:reduce){
  .js-var .ac.gor,
  .js-var .gor .maske > span,
  .js-var .maske.gor > span{ animation:none }
}

/* S3 (performans): .grain kaldırıldı — tam ekran mix-blend-mode sayfayı
   iki ayrı tam sayfa katmana bölüyordu (+379 MP). */

/* ==========================================================================
   ORTAK YÜZEYLER — koyu temada "yükseklik sinyali üçlüsü"
   (açık zemin + 1px beyaz kenarlık + inset üst ışık)
   ========================================================================== */
.panel{
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-kutu); padding:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.panel.pro{ background:var(--premium-kart); border-color:var(--hair-pro) }
.panel p{ color:var(--dim); margin:0; font-size:14.5px; max-width:70ch }

.izgara{ display:grid; gap:16px }
.iz2{ grid-template-columns:repeat(2,1fr) }
.iz3{ grid-template-columns:repeat(3,1fr) }
.iz4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:900px){ .iz3,.iz4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .iz2,.iz3,.iz4{ grid-template-columns:1fr } }

/* Güven şeridi */
.guven{ border-block:1px solid var(--hair); padding:20px 0;
  background:rgba(23,23,33,.35) }
.guven ul{ list-style:none; margin:0; padding:0; display:flex;
  flex-wrap:wrap; gap:14px 34px; justify-content:center;
  font-size:13px; color:var(--dim) }
.guven li{ display:flex; align-items:center; gap:8px }
.guven li::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--magenta); flex:0 0 5px }

/* ==========================================================================
   SABİTLENMİŞ SAHNE — sticky pin, --p ilerleme değişkeni (0→1)
   Yol 340svh · yapışkan cam 100svh. Kaydırma ELE GEÇİRİLMEZ.
   ========================================================================== */
.yol{ position:relative; height:340svh }
.yol .sahnecam{ position:sticky; top:64px; height:calc(100svh - 64px); display:grid;
  place-items:center; overflow:hidden }
.yol .ic{ width:min(1180px,calc(100% - 40px)); display:grid;
  grid-template-columns:1fr 1fr; gap:52px; align-items:center }
.adimlar{ position:relative }
.adim{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; opacity:0; transform:translateY(14px);
  transition:opacity .34s var(--egri),
  transform .34s var(--egri); pointer-events:none }   /* S5: filter animasyonu kaldırıldı */
.adim.etkin{ opacity:1; transform:none; pointer-events:auto }
.adim:first-child{ position:relative }         /* yükseklik bu belirler */
.adimno{ font-size:11.5px; font-weight:800; letter-spacing:.17em;
  color:var(--magenta); margin-bottom:10px }
/* ilerleme çubuğu */
.cubuk{ display:flex; gap:6px; margin-top:26px }
.cubuk i{ height:3px; flex:1; border-radius:2px;
  background:rgba(255,255,255,.12); overflow:hidden }
.cubuk i.dolu{ background:var(--magenta) }
/* JS yoksa: adımlar alt alta, hepsi görünür */
html:not(.js-var) .yol{ height:auto }
html:not(.js-var) .yol .sahnecam{ position:static; height:auto; padding:80px 0 }
html:not(.js-var) .adim{ position:relative; opacity:1; filter:none;
  transform:none; margin-bottom:44px }
@media (max-width:900px){
  .yol{ height:auto }
  .yol .sahnecam{ position:static; height:auto; padding:70px 0 }
  .yol .ic{ grid-template-columns:1fr; gap:36px }
  .adim{ position:relative; opacity:1; filter:none; transform:none;
    margin-bottom:36px }
  .adim:not(:last-child){ border-bottom:1px solid var(--hair);
    padding-bottom:30px }
  .cubuk{ display:none }
}

/* --- İşaretli liste ------------------------------------------------------- */
.im li{ display:flex; align-items:flex-start; gap:10px }
.im li::before{ flex:0 0 16px; width:16px; height:16px; margin-top:6px;
  border-radius:50%; font-size:9px; font-weight:900; line-height:16px;
  text-align:center; display:block }
.im.olur li::before{ content:"✓"; background:rgba(231,19,128,.16);
  color:var(--magenta) }
.im.olmaz li::before{ content:"✕"; background:rgba(255,255,255,.06);
  color:var(--dim) }

/* --- SSS açılır işareti --------------------------------------------------- */
details summary::-webkit-details-marker{ display:none }
details .ok{ flex:0 0 20px; width:20px; height:20px; border-radius:50%;
  background:var(--chip); color:var(--magenta); font-size:14px; font-weight:700;
  line-height:19px; text-align:center; transition:transform .26s var(--egri) }
details[open] .ok{ transform:rotate(45deg) }
details[open]{ border-color:var(--hair-pro) }

/* --- Yatay kaydırmalı raf: kenar solması (mask-image) --------------------- */
.rafkaydir{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  scrollbar-width:none }
.rafkaydir::-webkit-scrollbar{ display:none }

/* --- Satır uzunluğu tavanı ------------------------------------------------
   Ölçüldü 09.09.2026: üç paragraf 155–189 karakter/satırdı. Okunabilir üst
   sınır ~70ch; bu blok gövde metnini o sınırda tutar.  SATIR UZUNLUĞU */
.bolum p:not(.giris):not(.panel p){ max-width:70ch }

/* --- Dar ekran: gezinme bağlantıları --------------------------------------
   Ölçüldü: 390px'te 6 bağlantılı nav markanın üstüne biniyor ve İndir
   düğmesinin sağ kenarı 607px'te — ekran dışında. */
@media (max-width:880px){
  .ustbant nav{ display:none }
  .ustbant{ height:58px }
  .yol .sahnecam{ top:58px }
}
@media (max-width:560px){
  .kap{ width:calc(100% - 28px) }
  h1{ font-size:clamp(30px,8vw,40px) }
}

/* 🔴 `.ekranpano` (çerçevesiz ekran görüntüsü panosu) 10.09.2026'da SİLİNDİ.
   Eski yorumu "cihaz çerçevesi taklit edilmez" diyordu; bu karar müşterinin
   kuralına aykırıydı ve dört ekran görüntüsü çerçevesiz, ~3× küçültülmüş,
   kenarlarından kırpık duruyordu. Telefon görünen HER ŞEY `.telefon`
   bileşeninin içindedir. Bu sınıfı geri getirme. */
@media (max-width:900px){
  .bolum .ac[style*="grid-template-columns"]{ grid-template-columns:1fr !important }
  .telefonkap{ margin-inline:auto }
}

/* ==========================================================================
   DAR EKRAN DÜZELTMELERİ — 09.09.2026 ölçümlü denetim
   🔴 Kural: iki sütunlu düzenler ARTIK satır içi yazılmaz. Satır içi bir
      `grid-template-columns` hiçbir @media ile geri alınamıyordu; 390px'te
      sağ sütun 63px ekran dışına taşıyordu.
   ========================================================================== */
.ikili{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center }
.esli { display:grid; grid-template-columns:var(--sut,1fr 260px); gap:34px;
        align-items:center }
.androidkart{ display:grid; grid-template-columns:minmax(0,1fr) 360px;
        gap:32px; align-items:center }   /* 1fr tek başına 0'a çöküyordu */

/* 🔴 K4 — YATAY RAF. `.afis` esnek öğeydi ve flex-shrink varsayılan 1'di:
   kartlar küçülüp sığdığı için kaydırılacak içerik HİÇ oluşmuyordu.
   Ölçüldü: 390px'te kart 118 yerine 43,1 px — afişler %37 boyutunda.
   Bu tek satır kartı gerçek ölçüsünde tutar ve rafı gerçekten kaydırır. */
.rafkaydir > *{ flex:0 0 auto }
.rafkaydir{ scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch }
.rafkaydir > * { scroll-snap-align:start }

/* K6 — dokunma hedefleri 44px */
.ustbant .dugme{ padding:12px 17px }
footer nav a{ display:inline-block; padding:11px 0 }
footer nav{ gap:28px !important }

@media (max-width:760px){
  .ikili{ grid-template-columns:1fr; gap:32px }
  .esli { grid-template-columns:1fr; gap:26px }
  .esli .telefonkap{ max-width:300px; margin-inline:auto }
}
@media (max-width:620px){
  .androidkart{ grid-template-columns:1fr; gap:24px }
}
@media (max-width:430px){
  .devam{ width:min(176px,100%) }
  .bolum{ padding:64px 0 }
}

/* ==========================================================================
   HAREKET AZALTMA — ölçüldü: yumuşak kaydırma, başlık maskesi ve adım
   geçişleri `reduce` kapsamı dışında kalmıştı.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js-var .maske > span{ transform:none }
  .adim{ filter:none; transform:none }
  .dugme:hover{ transform:none }
}

/* --------------------------------------------------------------------------
   IZGARA ÇOCUKLARI KÜÇÜLEBİLSİN — `1fr` bir izin değil, bir ÜST SINIRDIR:
   alt sınırı `auto` = min-content. Ölçüldü 09.09.2026: 390px'te `.ikili`nin
   tek sütunu 544px'e kilitlenip sayfayı 168px taşırıyordu, çünkü içindeki
   kanal kartı sırası sarmıyordu. `min-width:0` bu kilidi açar.
   -------------------------------------------------------------------------- */
.ikili > *, .esli > *, .androidkart > *, .izgara > *{ min-width:0 }
.ikili .kanalsira{ flex-wrap:wrap; justify-content:flex-start }

/* Dokunma hedefleri — WCAG 2.5.5 (44×44) */
.ustbant .dugme{ padding:14px 18px }
.ustbant .marka, footer .marka{ padding:11px 0 }
.ustdugme{ padding:13px 18px; font-size:13.5px }
footer nav a{ padding:12px 0 }

/* --------------------------------------------------------------------------
   ÇERÇEVE İÇİNDEKİ GERÇEK EKRAN GÖRÜNTÜSÜ
   🔴 KURAL (müşteri, 10.09.2026): "Telefon görüntüsünde olan her şey 3B
      ORİJİNAL telefon çerçevesi kullanılarak yapılmalıdır."
      Ekran görüntüsü çerçevesiz "pano" olarak GÖSTERİLMEZ.
   ekran.jpg / ekran-detay.jpg 620×1342 = oran 2,165; cam 2,157 → örtüşür.
   -------------------------------------------------------------------------- */
.telefon .cam > .gercekekran{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block;
}

/* ==========================================================================
   TELEFON ÇERÇEVESİ — VARYANTLAR
   🔴 Sitede telefon görünen HER ŞEY bu çerçevenin içindedir. Çerçevesiz
      ekran görüntüsü panosu (`.ekranpano`) KALDIRILDI — müşteri kuralı,
      10.09.2026: "telefon görüntüsünde olan her şey 3B orijinal telefon
      çerçevesi kullanılarak yapılmalıdır."
   ========================================================================== */
/* 🔴 width:100% ZORUNLU. Çerçevenin eni `min(268px,100%)`; kap daralırsa
   yüzde sıfıra çözülüyor ve telefon HİÇ ÇİZİLMİYOR (10.09 ölçümü). */
.telefonkap{ display:flex; justify-content:center; width:100%;
  perspective:1400px }
.telefon.orta{ --en:min(268px,100%) }
.telefon.kucuk{ --en:min(232px,100%) }
.telefon.duz{ transform:none; animation:none }
.telefon.egik{ transform:rotateY(-9deg) rotateX(3deg); animation:none }

/* YÜKSELEN telefon — ekran görüntüsü tam ekran oranını tutmuyorsa
   (mağaza görselinde cihazın altı zaten kesikti) çerçeve alttan taşar.
   Uydurma piksel eklemek yerine dürüst olan bu: telefon aşağı doğru sürer. */
.telefon.yukselen{ aspect-ratio:auto; padding-bottom:0;
  border-bottom-left-radius:0; border-bottom-right-radius:0 }
.telefon.yukselen .cam{ border-bottom-left-radius:0; border-bottom-right-radius:0 }
.telefon.yukselen .gercekekran{ height:auto; object-fit:contain }

/* ==========================================================================
   TELEFON İÇİ: PROGRAM REHBERİ (EPG) — HTML ile kurulmuştur.
   Neden görsel değil: mağaza görselindeki telefon EĞİK render (ölçüldü),
   düz çerçevenin içine konursa "telefon içinde telefon" çıkıyor.
   Yapı uygulamanın kendi EPG ekranından alınmıştır.
   ========================================================================== */
.epg{ display:flex; flex-direction:column; height:100%; font-size:6.5px }
.epg .ust{ display:flex; align-items:center; gap:6px; padding:26px 9px 0 }
.epg .ust .marka{ --s:8px }
.epg .sek{ display:flex; gap:5px; padding:8px 9px 0 }
.epg .sek span{ padding:3px 8px; border-radius:20px; font-weight:700;
  color:var(--dim); background:rgba(255,255,255,.05) }
.epg .sek span.etkin{ background:var(--pembe-dolgu); color:#fff }
.epg .gun{ display:flex; gap:4px; padding:7px 9px 0 }
.epg .gun i{ font-style:normal; text-align:center; padding:3px 5px;
  border-radius:6px; line-height:1.25; color:var(--dim);
  background:rgba(255,255,255,.04) }
.epg .gun i.etkin{ background:var(--pembe-dolgu); color:#fff }
.epg .gun i b{ display:block; font-size:6px; font-weight:800 }
.epg .gun i s{ display:block; text-decoration:none; font-size:5px; opacity:.75 }
.epg .simdi{ display:flex; align-items:center; gap:5px; padding:8px 9px 2px;
  color:var(--magenta); font-weight:800; font-size:6px }
.epg .eksen{ display:flex; gap:14px; padding:0 9px 4px; color:var(--dim);
  font-size:5.5px }
.epg .satir{ display:flex; gap:5px; padding:4px 9px; align-items:stretch;
  border-top:1px solid var(--ayrac) }
.epg .epgkanal{ width:34px; flex:0 0 34px; display:flex; flex-direction:column;
  align-items:center; gap:3px; text-align:center }
.epg .epgkanal .epgkutu{ width:22px; height:16px; border-radius:4px;
  background:var(--chip); display:grid; place-items:center }
.epg .epgkanal .epgkutu svg{ width:11px; height:11px; fill:var(--magenta) }
.epg .epgkanal span{ font-size:5px; color:var(--dim); line-height:1.2 }
.epg .prog{ display:flex; gap:4px; flex:1; min-width:0; overflow:hidden }
.epg .prog a{ flex:0 0 auto; width:52px; padding:4px 5px; border-radius:6px;
  background:var(--card); border:1px solid var(--hair); line-height:1.3 }
.epg .prog a.aktif{ border-color:var(--hair-pro); background:rgba(231,19,128,.10) }
.epg .prog b{ display:block; font-size:5.5px; font-weight:700; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.epg .prog s{ display:block; text-decoration:none; font-size:5px;
  color:var(--dim); margin-top:2px }
.epg .prog em{ display:inline-block; font-style:normal; margin-top:3px;
  font-size:5px; font-weight:800; padding:1.5px 5px; border-radius:20px;
  background:var(--pembe-dolgu); color:#fff }
.epg .prog em.gri{ background:var(--chip); color:var(--dim) }

/* 🔴 ÇİFT ADA — gerçek ekran görüntüsünün İÇİNDE zaten iOS durum çubuğu ve
   dinamik ada var. Çerçevenin kendi `.cikinti`si de çizilince telefon içinde
   telefon çıkıyordu (10.09.2026 ölçümü). Görsel varsa çerçeve ada çizmez. */
.telefon:has(.gercekekran) .cikinti{ display:none }
.telefon.gercek .cikinti{ display:none }          /* :has() yoksa yedek */
.telefon:has(.gercekekran) .cam,
.telefon.gercek .cam{ background:#000 }

/* Çerçevenin boyunu İÇERİK değil `aspect-ratio` belirler.
   Ölçüldü: HTML ekranlı telefon 2,101 yerine 2,142 oluyordu — esnek
   çocukların min-content'i kutuyu şişiriyordu. */
.telefon .cam{ min-height:0; overflow:hidden }
.telefon .cam > *{ min-height:0 }

/* Android TV — gerçek cihaz ekranları (16:9). Telefon değil, televizyon;
   bu yüzden telefon çerçevesine girmez, kendi ince çerçevesiyle durur. */
.andgorsel{ display:grid; gap:12px; width:min(360px,100%) }
.andgorsel img{ width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--hair); box-shadow:0 22px 44px -22px rgba(0,0,0,.85) }
.izgara.iz1{ grid-template-columns:1fr }

/* SSS — diğer bölümlerle aynı sol hizada başlar, liste içeride daralır.
   Ölçüldü: `.kap{max-width:820px}` kabı ortalayıp 180px içeri kaydırıyordu. */
.sss{ max-width:860px }

/* ==========================================================================
   TELEFON İÇİ: OYNATICI — HTML. Motorlar sahnesinde kaydırdıkça etkin motor
   rozeti değişir; sahne artık görselsiz değil.
   Rozet dizisi uygulamanın oynatıcı üst çubuğundan alınmıştır
   (kalite · kare hızı · etkin motor — PlayerView.swift:4832-4859).
   ========================================================================== */
.oynatici{ position:relative; height:100%; background:#000; overflow:hidden }
.oynatici > img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.62 }
.oynatici .ustcubuk{ position:absolute; top:30px; left:9px; right:9px;
  display:flex; gap:4px; align-items:center }
.oynatici .rozet{ font-size:5.5px; font-weight:800; letter-spacing:.04em;
  padding:2.5px 6px; border-radius:20px; background:rgba(0,0,0,.55);
  border:1px solid var(--hair); color:rgba(255,255,255,.9) }
.oynatici .rozet.motor{ background:var(--pembe-dolgu); border-color:transparent }
.oynatici .orta{ position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; gap:16px }
.oynatici .orta i{ font-style:normal; font-size:6px; font-weight:800;
  color:rgba(255,255,255,.82) }
.oynatici .orta .oynat{ width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center }
.oynatici .orta .oynat svg{ width:10px; height:12px; fill:#000 }
.oynatici .altcubuk{ position:absolute; left:9px; right:9px; bottom:16px }
.oynatici .serit{ height:2.5px; border-radius:2px;
  background:rgba(255,255,255,.25); overflow:hidden }
.oynatici .serit i{ display:block; height:100%; width:38%;
  background:var(--magenta) }
.oynatici .sure{ display:flex; justify-content:space-between; margin-top:4px;
  font-size:5px; color:rgba(255,255,255,.7) }
.oynatici .dugmeler{ display:flex; gap:5px; margin-top:8px }
.oynatici .dugmeler span{ flex:1; text-align:center; font-size:5px;
  font-weight:700; padding:4px 0; border-radius:6px;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.86) }

/* 🔴 Sabit sahnenin sütunları küçülebilmeli. Ölçüldü 10.09.2026: sağ sütun
   1026 px'e kilitleniyor, 700 px'te 390 px taşıyor ve "Jestler ve kontroller"
   paneli hiç görünmüyordu. `1fr`in alt sınırı min-content olduğu için. */
.yol .ic > *{ min-width:0 }

/* Kaldırılan `.ekranpano` sınıfının artığı — silindi. */

/* Oynatıcı görseli: yatay kare dikey cama `cover` ile konunca %77'si
   kırpılıyordu. Gerçek oynatıcı da dikeyde letterbox yapar. */
.oynatici > img{ object-fit:contain; opacity:.75 }

/* Başlangıç telefonundaki yol listesi — satırlar HTML'de durur, JS yalnız
   `etkin` sınıfını taşır. JS çalışmazsa telefon yine dolu görünür. */
.ylsatir{ display:flex; align-items:center; gap:8px; padding:9px 10px;
  border-radius:9px; margin-bottom:6px; background:var(--card);
  border:1px solid transparent;
  transition:background .3s var(--egri), border-color .3s var(--egri) }
.ylsatir.etkin{ background:rgba(231,19,128,.13); border-color:rgba(231,19,128,.55) }
.ylsatir .nokta{ width:16px; height:16px; border-radius:50%; flex:0 0 16px;
  background:rgba(255,255,255,.09) }
.ylsatir.etkin .nokta{ background:var(--pembe-dolgu) }
.ylsatir b{ display:block; font-size:8px; font-weight:700 }
.ylsatir span span{ font-size:6.5px; color:var(--dim) }

/* ==========================================================================
   TELEFON İÇİ: SES MODU EKRANI — HTML.
   Neden görsel değil: `ek-sesmodu.jpg`'de ekranın %41'i eksik (mağaza
   görselinde telefonun altı kesik) — çerçeveye oturmuyordu.
   Yapı ve sıra uygulamanın kendi Ses Modu ekranından; metinler
   AudioEnhancer.swift:112-168'deki mod adlarının birebir kendisi.
   ========================================================================== */
.sesmodu{ display:flex; flex-direction:column; height:100%; padding:26px 0 0 }
.sesmodu .basl{ display:flex; align-items:center; gap:8px; padding:6px 11px 10px }
.sesmodu .basl .geri{ font-size:11px; color:rgba(255,255,255,.7); line-height:1 }
.sesmodu .basl b{ flex:1; text-align:center; font-size:9px; font-weight:800;
  margin-right:14px }
.sesmodu ul{ list-style:none; margin:0; padding:0 9px; display:flex;
  flex-direction:column; gap:4px }
.sesmodu li{ display:flex; align-items:center; gap:7px; padding:7px 9px;
  border-radius:8px; background:var(--card); border:1px solid transparent }
.sesmodu li.secili{ background:rgba(231,19,128,.13);
  border-color:rgba(231,19,128,.42) }
.sesmodu li .ik{ width:12px; height:12px; flex:0 0 12px; opacity:.85 }
.sesmodu li .ik svg{ width:100%; height:100%; fill:none;
  stroke:rgba(255,255,255,.82); stroke-width:2 }
.sesmodu li.secili .ik svg{ stroke:var(--magenta) }
.sesmodu li span{ flex:1; font-size:7.5px; font-weight:600 }
.sesmodu li i{ width:9px; height:9px; flex:0 0 9px; border-radius:50%;
  border:1.2px solid rgba(255,255,255,.28) }
.sesmodu li.secili i{ border-color:var(--magenta); background:var(--magenta);
  box-shadow:inset 0 0 0 1.6px #0B0813 }
.sesmodu .dip{ margin-top:auto; padding:10px 11px 16px; font-size:5.5px;
  line-height:1.5; color:var(--dim) }
.sesmodu .bolbas{ padding:8px 12px 5px; font-size:6px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim) }
.sesmodu .dip{ margin-top:8px }
.sesmodu{ overflow:hidden }

/* S6 (performans): gölge filtre değil kutu gölgesi — yuvarlak dikdörtgen analitik çizilir */
.ucan > a .kutu{ box-shadow:0 26px 40px -10px rgba(0,0,0,.72) }

/* ══════════════════════════════════════════════════════════════════════════
   HAREKET KATMANI — arastirma/hareket-plani.md  (2026-09-10)
   css/site.css'in EN SONUNA eklenir.
   Kurallar: yalnız transform/opacity (+ adım girişinde GEÇİCİ blur) ·
   tek eğri (--egri) · dinlenme hâli GÖRÜNÜR · kaydırma ELE GEÇİRİLMEZ ·
   her hareket `prefers-reduced-motion: no-preference` içinde.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §0 JETONLAR — uygulamanın kendi hareket dilinden ölçüldü ─────────────── */
:root{
  --sure-gir: .50s;  /* açılma  — CollapsingBrand  Views/Components.swift:863  */
  --sure-cik: .18s;  /* kapanma — TVMarkaKilidi   TV/TVYanMenu.swift:120      */
  --kademe:   .04s;  /* etiket 0 → başlık 40 → paragraf 80 ms.
                        Ölçüldü: .09 s başlangıç + .06 s kademe, 120. ms'de metin
                        alanını BOŞ bırakıyordu (kare: proto-gecis-t120, ilk tur). */
}

/* ── §1 ADIM GEÇİŞİ — sıralı, yön takipli, asimetrik ─────────────────────── */
@media (min-width:901px){
  /* site.css'teki simetrik .34s geçiş (opacity + 14px + blur 4px) KAPANIR.
     Çıkış JS'te (WAAPI, .18s), giriş aşağıda CSS animasyonuyla (.50s).     */
  .js-var .yol .adim{ transition:none; transform:none; filter:none }
  /* Satır maskesi: h3 > span gerekir. Span yoksa başlık düz solarak girer. */
  .js-var .yol .adim h3{ overflow:clip; padding-bottom:.08em }
  .js-var .yol .adim h3 > span{ display:block }
}
@media (min-width:901px) and (prefers-reduced-motion: no-preference){
  .js-var .yol{ --yon:1 }                         /* ileri: alttan gelir, yukarı gider */
  .js-var .yol[data-yon="geri"]{ --yon:-1 }       /* geri : üstten gelir, aşağı gider  */

  /* GİRİŞ — çıkışla AYNI karede başlar.
     🔴 `backwards` dolgusu ve `animation-delay` KULLANILMAZ (10.09.2026 ölçümü):
        ikisi birlikte, animasyon işlemediği sürece öğeyi BAŞLANGIÇ karesinde
        (opaklık 0 / maskenin %105 altında) tutuyordu — ölçülen etkin adımda
        başlık gizli, paragraf opaklık 0'daydı. Kademe artık anahtar karenin
        İÇİNDE bir bekleme: animasyon hiç çalışmasa da dinlenme hâli görünür. */
  .js-var .yol .adim.etkin > .adimno{ animation: adimGir     var(--sure-gir) var(--egri) }
  .js-var .yol .adim.etkin > h3     { animation: adimGir40   var(--sure-gir) var(--egri) }
  .js-var .yol .adim.etkin > p      { animation: adimGirP80  var(--sure-gir) var(--egri) }
  .js-var .yol .adim.etkin > h3:has(> span){ animation:none }
  .js-var .yol .adim.etkin > h3 > span{ animation: adimMaske40 var(--sure-gir) var(--egri) }
}
/* Bekleme payı: .50s içinde %8 = 40 ms, %16 = 80 ms (eski --kademe değerleri) */
@keyframes adimGir    { from{ opacity:0; translate:0 calc(var(--yon,1) * 8px) } }
@keyframes adimGir40  { 0%,8%  { opacity:0; translate:0 calc(var(--yon,1) * 16px) } }
@keyframes adimGirP80 { 0%,16% { opacity:0; translate:0 calc(var(--yon,1) * 24px) } }   /* S5: blur yok */
@keyframes adimMaske40{ 0%,8%  { translate:0 calc(var(--yon,1) * 105%) } }

/* ── §2 ETİKETLİ İLERLEME RAYI — dolgu kaydırmayla SÜREKLİ ────────────────── */
@media (min-width:901px) and (prefers-reduced-motion: no-preference){
  .js-var .yol .cubuk{ gap:8px; margin-top:28px; padding-bottom:24px }
  .js-var .yol .cubuk i{
    position:relative; overflow:visible; height:3px; border-radius:2px;
    background:rgba(255,255,255,.16);          /* pasif kapsül — HomeView.swift:871 */
  }
  .js-var .yol .cubuk i::after{                /* dolgu — Theme.pinkFill, HomeView.swift:870 */
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:var(--pembe-dolgu); transform-origin:0 50%; transform:scaleX(0);
  }
  .js-var .yol .cubuk i.dolu::after{ transform:scaleX(1) }   /* çizelgesiz tarayıcı: adım adım */
  .js-var .yol .cubuk i::before{               /* etiket — JS, .adimno'dan data-ad yazar */
    content:attr(data-ad); position:absolute; left:0; right:0; top:12px;
    font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-style:normal;                         /* <i> tarayıcıda İTALİKTİR — kareye yansıyordu */
    color:#fff; opacity:.5;                    /* .5 → 5,3:1 (AA geçer) · .4 → 3,7:1 (kalır)   */
  }
  .js-var .yol .cubuk i.etkin::before{
    opacity:1; animation: etiketYak var(--sure-gir) var(--egri) backwards;
  }
}
@keyframes etiketYak{ from{ opacity:.5 } }

/* ── §3 SAHNE ÇİZELGESİ — ray dolgusu + telefon nefesi, compositor'da ─────── */
.yol .telefon{ animation:none }   /* kahraman girişini (telefonGel) sahnede kapatır;
                                     index.html'deki satır içi `animation:none` SİLİNİR */
@supports (animation-timeline: view()){
  @media (min-width:901px) and (prefers-reduced-motion: no-preference){
    /* inset 64px = üst bant. Böylece contain 0%→100% TAM OLARAK sabitlenme süresidir
       (ölçüldü: dolgu p×4−i ile 3 ondalığa kadar aynı — .200 / .599 / .800 / .879). */
    .js-var .yol{ view-timeline: --yol block; view-timeline-inset: 64px 0 }

    .js-var .yol .cubuk i::after,
    .js-var .yol .cubuk i.dolu::after{
      animation: rayDol linear both;
      animation-timeline: --yol;
      animation-range:
        contain calc(100% * var(--i,0) / var(--adet,4))
        contain calc(100% * (var(--i,0) + 1) / var(--adet,4));
    }

    .js-var .yol .telefon{
      animation: telefonNefes linear both;
      animation-timeline: --yol;
      animation-range: contain 0% contain 100%;
    }
    .js-var #basla .telefon{ --don: 7deg }    /* satır içi rotateY(−11°) + 7° → −4° */
    .js-var #motor .telefon{ --don: -6deg }   /* düz → −6°: metne döner              */

    .js-var .yol .sahne,
    .js-var .yol .telefonkap{                 /* varış: sabitlenme başlarken yerine oturur */
      animation: telefonVaris linear both;
      animation-timeline: --yol;
      animation-range: entry 40% entry 100%;
    }
    .js-var .yol .etiket::before{
      transform-origin: 50% 100%;
      animation: kapsulCiz linear both;
      animation-timeline: --yol;
      animation-range: entry 40% entry 90%;
    }
  }
}
@keyframes rayDol      { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes telefonNefes{
  0%  { rotate:y 0deg;            translate:0 12px;  scale:1 }
  92% { scale:1 }
  100%{ rotate:y var(--don,0deg); translate:0 -12px; scale:.96 }
}
@keyframes telefonVaris{ from{ translate:0 24px; scale:.96 } }
@keyframes kapsulCiz   { from{ transform:scaleY(0) } }

/* ── §4 TELEFON EKRANI — seçim pili (sahne 1) ─────────────────────────────── */
@media (min-width:901px){
  /* Kart zemini ::before'a iner; pil kartın ÜSTÜNDE, yazının ALTINDA kalır
     (uygulamadaki dock seçim kapsülü gibi — MainTabView.swift:420).         */
  .js-var #yolliste{ position:relative; z-index:0 }
  .js-var #yolliste .ylsatir{ position:relative; background:transparent; transition:none }
  .js-var #yolliste .ylsatir::before{
    content:""; position:absolute; inset:-1px; z-index:-1;
    border-radius:9px; background:var(--card);
  }
  .js-var #yolliste .ylsatir.etkin{ background:transparent; border-color:transparent }
  .js-var #yolliste .ylpil{
    position:absolute; left:0; right:0; top:0; z-index:0; pointer-events:none;
    border-radius:9px; background:rgba(231,19,128,.13);
    border:1px solid rgba(231,19,128,.55);
  }
  .js-var #yolliste .nokta{ position:relative }
  .js-var #yolliste .ylsatir.etkin .nokta{ background:rgba(255,255,255,.09) }
  .js-var #yolliste .nokta::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:var(--pembe-dolgu); opacity:0;
  }
  .js-var #yolliste .ylsatir.etkin .nokta::after{ opacity:1 }
}
@media (min-width:901px) and (prefers-reduced-motion: no-preference){
  .js-var #yolliste .ylsatir.etkin .nokta::after{
    animation: noktaDol var(--sure-gir) var(--egri);
  }
}
@keyframes noktaDol{ 0%,8%{ opacity:0; scale:.4 } }

/* ── §5 BÖLÜM EŞİĞİ — ShelfHeader kapsülü kaydırmayla çizilir ─────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js-var .bolum{ view-timeline: --bolum block }
    .js-var .bolum .etiket::before{
      transform-origin: 50% 100%;
      animation: kapsulCiz linear both;
      animation-timeline: --bolum;
      animation-range: entry 10% entry 45%;
    }
  }
}