/* ==========================================================================
   ALT SAYFALAR — site.css'in EN SONUNA eklenecek blok
   Kaynak: arastirma/alt-sayfalar.md (10.09.2026)
   • Dinlenme hâli GÖRÜNÜR — hiçbir içerik opacity:0'da gözlemci beklemez
   • Süre/eğri yalnız mevcut jetonlardan: --sure-hizli/orta/yavas, --egri
   • 🪤 animation-fill-mode:both, AYNI öğedeki :hover transform'unu ezer.
     Bu yüzden açılış animasyonu ile hover dönüşümü hiçbir yerde aynı öğede
     buluşmaz (.ac dış sarmalayıcıda, hover içteki kartta).
   ========================================================================== */

/* --- 1 · Üst bant: başka SAYFAYA giden bağlantı ---------------------------
   İşaret uygulamanın kendi "Tümü ›" deyimi (ShelfHeader) — pembe ›. */
.ustbant nav a.sayfa{ color:rgba(255,255,255,.86) }
.ustbant nav a.sayfa::after{ content:" ›"; color:var(--magenta); font-weight:800 }
.ustbant nav a[aria-current="page"]{ color:#fff; padding-block:6px;
  box-shadow:inset 0 -2px 0 var(--magenta) }
.ustbant nav a[aria-current="page"]::after{ content:none }

/* Sessiz etiket — "henüz yayında değil" dili pembe taşımaz */
.etiket.sessiz{ color:rgba(255,255,255,.62) }
.etiket.sessiz::before{ background:rgba(255,255,255,.3) }

/* --- 2 · Geçit kartları (ana sayfa: Apple TV · Android) -------------------- */
.gecitler{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.gecitler > *{ min-width:0 }
@media (max-width:760px){ .gecitler{ grid-template-columns:minmax(0,1fr) } }

.gecit{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-kutu); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform var(--sure-orta) var(--egri),
             border-color var(--sure-orta) var(--egri),
             box-shadow var(--sure-orta) var(--egri);
}
.gecit.canli{ background:var(--premium-kart); border-color:var(--hair-pro) }

/* Kapak — televizyon ekranı: 16:9, telefon çerçevesine GİRMEZ */
.gecit .kapak{ position:relative; display:block; aspect-ratio:16/9;
  overflow:hidden; background:#000; border-bottom:1px solid var(--hair) }
.gecit .kapak img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--sure-yavas) var(--egri) }
.gecit .kapak::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(5,5,9,.5) 100%) }

/* Durum rozeti — kapak ile gövdenin SINIRINA oturur (yarısı kapakta).
   Kapağın köşelerine konamaz: ölçüldü 10.09.2026 — sol üstte rozet uygulamanın
   kendi işaretini ve "Derin Su" başlığını örtüyordu; sağ üstte uygulamanın
   DEMO rozeti var. İki görselin de alt şeridi boş, koyu alan. */
.gecit .govde{ position:relative }
.gecit .durum{ position:absolute; left:24px; top:0; transform:translateY(-50%); z-index:2;
  display:inline-flex; align-items:center; gap:7px; line-height:1;
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 11px 6px 9px; border-radius:20px; color:#fff }
.gecit .durum i{ width:6px; height:6px; border-radius:50%; flex:0 0 6px }
.gecit.canli .durum{ background:var(--pembe-dolgu);
  box-shadow:0 6px 18px -8px rgba(231,19,128,.9) }
.gecit.canli .durum i{ background:#fff }
.gecit.yolda .durum{ background:rgba(11,8,19,.8); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.gecit.yolda .durum i{ border:1.5px solid rgba(255,255,255,.75) }

.gecit .govde{ display:flex; flex-direction:column; flex:1; padding:24px 26px 22px }
.gecit .etiket{ margin-bottom:10px }
.gecit h3{ font-size:22px; line-height:1.2; margin:0 0 8px }
.gecit p{ margin:0; font-size:14.5px; color:var(--dim); max-width:48ch }
.gecit .kunyesatir{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:14px 0 22px;
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.62) }
.gecit .kunyesatir span{ display:inline-flex; align-items:center; gap:7px }
.gecit .kunyesatir span::before{ content:""; width:4px; height:4px; border-radius:50%;
  background:var(--magenta); flex:0 0 4px }
.gecit.yolda .kunyesatir span::before{ background:rgba(255,255,255,.4) }

/* Ok satırı — margin-top:auto iki kartın oklarını aynı hizaya indirir */
.gecit .git{ margin-top:auto; padding-top:18px; border-top:1px solid var(--ayrac);
  display:flex; align-items:center; gap:12px;
  font-size:14px; font-weight:700; color:rgba(255,255,255,.92) }
.gecit .ok{ margin-left:auto; flex:0 0 42px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:var(--chip); border:1px solid rgba(255,255,255,.12);
  transition:transform var(--sure-orta) var(--egri),
             background-color var(--sure-orta) var(--egri),
             border-color var(--sure-orta) var(--egri) }
.gecit .ok svg{ width:16px; height:14px; overflow:visible; fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--sure-orta) var(--egri) }
.gecit.canli .ok{ background:var(--pembe-dolgu); border-color:transparent;
  box-shadow:0 10px 24px -12px rgba(231,19,128,.95) }

/* Etkileşim — üzerine gelince ve klavye odağında AYNI */
.gecit:hover, .gecit:focus-visible{ transform:translateY(-4px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 36px 64px -36px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07) }
.gecit.canli:hover, .gecit.canli:focus-visible{ border-color:rgba(231,19,128,.72);
  box-shadow:0 38px 80px -36px rgba(231,19,128,.5), inset 0 1px 0 rgba(255,255,255,.07) }
.gecit:hover .kapak img, .gecit:focus-visible .kapak img{ transform:scale(1.045) }
.gecit:hover .ok, .gecit:focus-visible .ok{ transform:translateX(5px) }
.gecit:hover .ok svg, .gecit:focus-visible .ok svg{ transform:translateX(2px) }
.gecit.yolda:hover .ok, .gecit.yolda:focus-visible .ok{
  background-color:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34) }
.gecit:focus-visible{ outline:2px solid var(--magenta); outline-offset:3px }

/* Açılış: ekran "uyanır" — görüntü hafif büyükten yerine oturur ve aydınlanır;
   ok BİR KEZ dürtülür.
   🔴 Ölçüldü 10.09.2026: çizim yapmayan panelde animasyon İLK KAREDE donup
   kalabiliyor (kapak 3 sn sonra hâlâ opacity .12 · clip %30 → siyah kutu).
   Bu yüzden ilk kare de GÖRÜNÜR: opaklık ve kırpma YOK, yalnız ölçek+parlaklık.
   🪤 `scale`/`translate` AYRI özelliklerdir; hover'ın `transform`unu ezmez,
   onunla çarpılır — açılış ile hover aynı öğede çatışmaz. */
.js-var .ac.gor .gecit .kapak img{ animation:gecitUyan var(--sure-yavas) .12s var(--egri) both }
@keyframes gecitUyan{
  from{ scale:1.08; filter:brightness(.72) }
  to  { scale:1;    filter:none }
}
.js-var .ac.gor .gecit .ok svg{ animation:okDurt .9s .6s var(--egri) }
@keyframes okDurt{ 0%,100%{ translate:0 0 } 45%{ translate:6px 0 } }

.gecitnot{ margin:14px 0 0; font-size:12.5px; color:var(--dim) }

/* --- 3 · Televizyon ekranı çerçevesi --------------------------------------- */
.tvcerceve{ position:relative; border-radius:var(--r-kutu); overflow:hidden;
  border:1px solid var(--hair); background:#000;
  box-shadow:0 44px 90px -46px rgba(0,0,0,.95) }
.tvcerceve > img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.tvcerceve.ince{ border-radius:12px; box-shadow:0 24px 48px -26px rgba(0,0,0,.9) }
.tvbaslik{ display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.62) }
.tvbaslik::before{ content:""; width:3.5px; height:14px; border-radius:2px;
  background:rgba(255,255,255,.3) }
.tvbaslik.elma{ color:var(--magenta) }
.tvbaslik.elma::before{ background:var(--pembe-dolgu) }
.tvalt{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--dim) }
.tvalt b{ color:rgba(255,255,255,.9); font-weight:700 }

/* --- 4 · Alt sayfa başlığı ve dönüş bağlantısı ----------------------------- */
.sayfabas{ padding:34px 0 30px; position:relative }
.sayfabas h1{ font-size:clamp(32px,4.4vw,54px); max-width:17ch }
.sayfabas .eylem{ display:flex; gap:13px; flex-wrap:wrap; align-items:center }
.sayfabas .kunye{ opacity:1; animation:none }   /* ana sayfanın yükleme gecikmesi burada yok */
.donus{ display:inline-flex; align-items:center; gap:9px; margin:0 0 18px; min-height:44px;
  padding:11px 0; font-size:13.5px; font-weight:600; color:var(--dim);
  transition:color var(--sure-hizli) var(--egri) }
.donus:hover{ color:#fff }
.donus svg{ width:15px; height:13px; fill:none; stroke:var(--magenta); stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--sure-hizli) var(--egri) }
.donus:hover svg{ transform:translateX(-3px) }

/* Durum şeridi — .guven'in dürüst ikizi: dolu nokta yerine boş halka */
.guven.bekle li::before{ background:transparent; border:1.5px solid rgba(255,255,255,.55) }

/* --- 5 · İki platform yan yana (duran kıyas) ------------------------------- */
.kiyas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.kiyas > *{ min-width:0 }
@media (max-width:760px){ .kiyas{ grid-template-columns:minmax(0,1fr) } }

/* --- 6 · Sürgülü kıyas — solda Apple TV, sağda Android TV ------------------
   İki görsel de 16:9 (1600×900 · 1280×720); üst üste tam oturur.
   🪤 Süpürme animasyonunun dolgu kipi YOK: `both` olsaydı kullanıcının
   sürüklediği --kiyas değerini animasyonun son karesi ezerdi. */
@property --kiyas{ syntax:'<percentage>'; inherits:true; initial-value:50% }
.kiyasla{ position:relative; --kiyas:50% }
.kiyasla .tvcerceve{ isolation:isolate }
.kiyasla .tvcerceve > img.ust{ position:absolute; inset:0; height:100%;
  clip-path:inset(0 calc(100% - var(--kiyas)) 0 0) }
.kiyasla .cizgi{ position:absolute; top:0; bottom:0; left:var(--kiyas); z-index:2;
  width:2px; margin-left:-1px; background:#fff; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 0 22px rgba(231,19,128,.55) }
.kiyasla .cizgi i{ position:absolute; top:50%; left:50%; width:46px; height:46px;
  transform:translate(-50%,-50%); border-radius:50%; display:grid; place-items:center;
  background:var(--pembe-dolgu); box-shadow:0 10px 26px -8px rgba(231,19,128,.95) }
.kiyasla .cizgi svg{ width:22px; height:12px; fill:none; stroke:#fff; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.kiyasla .yan{ position:absolute; bottom:14px; z-index:2; pointer-events:none;
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 11px; border-radius:20px; background:rgba(5,5,9,.78);
  border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.kiyasla .yan.sol{ left:14px; color:var(--magenta) }
.kiyasla .yan.sag{ right:14px; color:rgba(255,255,255,.9) }
.kiyasla input[type=range]{ position:absolute; inset:0; z-index:3; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none }
.kiyasla:has(input:focus-visible) .cizgi i{ outline:2px solid #fff; outline-offset:3px }
/* Dokunmatikte görünmez sürgü sayfa kaydırmasını yutar → görünür sürgüye döner */
@media (hover:none), (pointer:coarse){
  .kiyasla input[type=range]{ position:static; display:block; height:44px; margin:10px 0 0;
    opacity:1; cursor:auto; -webkit-appearance:auto; appearance:auto; accent-color:#E71380 }
}
@media (prefers-reduced-motion:no-preference){
  .js-var .ac.gor .kiyasla.suz{ animation:kiyasSuz 2.6s .4s var(--egri) }
}
@keyframes kiyasSuz{ 0%{ --kiyas:50% } 32%{ --kiyas:24% } 68%{ --kiyas:76% } 100%{ --kiyas:50% } }

/* --- 7 · Eşleşme sahnesi (appletv.html #bagla) ----------------------------
   HTML televizyon + küçük telefon. Metinler birebir uygulamadan:
   TVEslesmeView.swift:69-87,221 · TVListeEkle.swift:90-91,446-448 ·
   AppleTVBaglaView.swift:76,146 · TVListeIstegiView.swift:73.
   Karekod OKUNABİLİR DEĞİLDİR — yalnız simgedir. */
/* Telefon TV'nin altından yalnız 70px biner: 150px çerçeve 315px boy → 315−70 = 245px pay.
   Ölçüldü 10.09.2026: TV'nin yanına konunca telefon karekodun %80'ini örtüyordu. */
.eslesme{ position:relative; width:100%; padding-bottom:245px; perspective:1400px }
.eslesme .tvcerceve{ container-type:inline-size }
.tvekran{ position:relative; aspect-ratio:16/9; background:var(--zemin-grad); overflow:hidden }
.tvekran .katman{ position:absolute; inset:0; display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:center; gap:5cqw;
  padding:5.5cqw 6.5cqw; opacity:0; visibility:hidden;
  transition:opacity var(--sure-orta) var(--egri), visibility 0s linear var(--sure-orta) }
.tvekran .katman.resim{ display:block; padding:0 }
.tvekran .katman.resim img{ width:100%; height:100%; object-fit:cover; display:block }
.eslesme[data-adim="0"] .katman[data-k="0"],
.eslesme[data-adim="1"] .katman[data-k="1"],
.eslesme[data-adim="2"] .katman[data-k="2"]{ opacity:1; visibility:visible; transition-delay:0s }

.tvekran .marka{ --s:1.25cqw }
.tvekran h4{ margin:2cqw 0 1.1cqw; font-size:3.2cqw; line-height:1.12; font-weight:800;
  letter-spacing:-.015em }
.tvekran .aciklama{ margin:0 0 2.2cqw; font-size:1.7cqw; line-height:1.45; color:var(--dim) }
.tvekran ol{ list-style:none; margin:0; padding:0; display:grid; gap:1.3cqw }
.tvekran li{ display:flex; align-items:center; gap:1.3cqw; font-size:1.7cqw; line-height:1.3;
  color:rgba(255,255,255,.88) }
.tvekran li b{ flex:0 0 2.7cqw; width:2.7cqw; height:2.7cqw; border-radius:50%;
  display:grid; place-items:center; font-size:1.25cqw; font-weight:800;
  background:rgba(231,19,128,.16); color:var(--magenta) }
.tvekran .tvdugme{ display:inline-flex; margin-top:2.4cqw; padding:1cqw 2cqw; border-radius:99px;
  font-size:1.55cqw; font-weight:700; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.tvekran .karekod{ display:grid; justify-items:center; gap:1.5cqw }
.tvekran .karekod .kare{ width:100%; max-width:21cqw; aspect-ratio:1; padding:1.9cqw;
  border-radius:1.8cqw; background:#fff }
.tvekran .karekod svg{ display:block; width:100%; height:100% }
.tvekran .karekod .harfler{ font-size:2.1cqw; font-weight:800; letter-spacing:.3em;
  margin-right:-.3em; font-variant-numeric:tabular-nums }
.tvekran .bekler{ display:grid; justify-items:center }
.tvekran .bekler .halka{ width:15cqw; aspect-ratio:1; border-radius:50%; display:grid;
  place-items:center; border:.35cqw solid rgba(231,19,128,.5); background:rgba(231,19,128,.08) }
.tvekran .bekler svg{ width:5.4cqw; height:auto; fill:none; stroke:#fff; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }

/* Sahnedeki telefon — çerçeve aynı .telefon bileşeni, --en SABİT px
   (yüzde verilirse köşe yarıçapı kendi kutusuna göre çözülüp elipsleşir) */
.eslesme .telefon{ position:absolute; right:-2%; bottom:0; z-index:3; --en:150px;
  animation:none; transform:rotateY(-12deg) rotateX(3deg);
  transition:transform var(--sure-yavas) var(--egri), opacity var(--sure-orta) var(--egri) }
.eslesme[data-adim="2"] .telefon{ opacity:0;
  transform:translate3d(18px,26px,0) rotateY(-12deg) rotateX(3deg) }
.eslesme .telefon .cam{ container-type:inline-size; padding:0 }
.pekran{ position:absolute; inset:0; display:flex; flex-direction:column;
  padding:24cqw 9cqw 10cqw; opacity:0; visibility:hidden;
  transition:opacity var(--sure-orta) var(--egri), visibility 0s linear var(--sure-orta) }
.eslesme[data-adim="0"] .pekran[data-k="0"],
.eslesme[data-adim="1"] .pekran[data-k="1"],
.eslesme[data-adim="2"] .pekran[data-k="1"]{ opacity:1; visibility:visible; transition-delay:0s }
.pekran .pbas{ margin:0 0 5cqw; font-size:8.6cqw; font-weight:800; line-height:1.2 }
.pekran .palt{ margin:5cqw 0 0; font-size:5.8cqw; line-height:1.4; color:var(--dim) }
.pekran .vizor{ display:block; width:100%; height:auto }
.pekran .psatir{ display:flex; align-items:center; gap:4cqw; margin-top:3.6cqw;
  padding:5cqw; border-radius:5cqw; background:var(--card); font-size:5.9cqw; font-weight:700 }
.pekran .psatir i{ flex:0 0 7cqw; width:7cqw; height:7cqw; border-radius:50%;
  background:rgba(255,255,255,.09) }
.pekran .psatir.etkin{ background:rgba(231,19,128,.13); box-shadow:inset 0 0 0 1px rgba(231,19,128,.55) }
.pekran .psatir.etkin i{ background:var(--pembe-dolgu) }

/* Dar ekranda sahne sabitlenmez (site.css ≤900px) → ilk kare sabit kalır */
@media (max-width:900px){
  .eslesme .katman[data-k="0"], .eslesme .pekran[data-k="0"]{ opacity:1; visibility:visible }
  .eslesme .katman:not([data-k="0"]), .eslesme .pekran:not([data-k="0"]){ display:none }
  .eslesme{ padding-bottom:170px }
  .eslesme .telefon{ opacity:1 !important; --en:100px; right:4% }
}

/* --- 8 · Kumanda ipuçları — TVPlayerView.swift:6286-6313 ------------------ */
.kumanda{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px }
.kumanda + .kumanda{ margin-top:10px }
.kumanda .ne{ min-width:92px; font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim) }
.kumanda span:not(.ne){ padding:6px 12px; border-radius:20px; background:rgba(255,255,255,.06);
  border:1px solid var(--hair); font-size:13px; font-weight:600; color:rgba(255,255,255,.88) }

/* --- 9 · Hareket azaltma --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js-var .ac.gor .gecit .kapak img, .js-var .ac.gor .gecit .ok svg,
  .js-var .ac.gor .kiyasla.suz{ animation:none }
  .gecit, .gecit .kapak img, .gecit .ok, .gecit .ok svg, .donus svg,
  .eslesme .telefon, .tvekran .katman, .pekran{ transition:none }
  .gecit:hover, .gecit:focus-visible,
  .gecit:hover .kapak img, .gecit:focus-visible .kapak img,
  .gecit:hover .ok, .gecit:focus-visible .ok,
  .gecit:hover .ok svg, .gecit:focus-visible .ok svg,
  .donus:hover svg{ transform:none }
}
@media (max-width:880px){ .sayfabas{ padding-top:18px } }

/* ── Üst menü: iOS · Android · İndir ▾ (11.09.2026) ───────────────────────── */
.ustbant{ overflow:visible }
.indirmenu{ position:relative; flex:0 0 auto }
.indirmenu > summary{ display:inline-flex; align-items:center; list-style:none; cursor:pointer; user-select:none }
.indirmenu > summary::-webkit-details-marker{ display:none }
.indirmenu > summary::after{ content:""; width:6px; height:6px; margin-left:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s ease }
.indirmenu[open] > summary::after{ transform:translateY(2px) rotate(-135deg) }
.indirliste{ position:absolute; right:0; top:calc(100% + 10px); z-index:80; min-width:248px;
  margin:0; padding:6px; list-style:none; background:var(--card,#171721);
  border:1px solid rgba(255,255,255,.10); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.5) }
.indirsatir{ display:flex; flex-direction:column; gap:3px; padding:11px 14px; border-radius:10px;
  color:#fff; text-decoration:none; text-align:left }
.indirsatir b{ font-size:14.5px; font-weight:700; color:#fff }
.indirsatir span{ font-size:12.5px; color:var(--dim) }
a.indirsatir:hover, a.indirsatir:focus-visible{ background:rgba(231,19,128,.16); outline:none }
.indirsatir.yakinda{ cursor:default; opacity:.62 }
.indirdugmeler{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.dugme.yakindadugme{ background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.72);
  box-shadow:none; cursor:default; pointer-events:none }
/* Dolan çubuk kaldırıldı (kullanıcı talebi) */
.cubuk{ display:none !important }
@media (max-width:880px){
  .ustbant nav{ display:flex; gap:18px }
}
@media (max-width:380px){
  .ustbant nav{ gap:12px }
  .ustbant nav a{ font-size:13px }
  .ustbant .marka b{ display:none }
}

/* ══ Jenerik telefon + uygulamanın gerçek ekranı (11.09.2026) ══════════════════
   Çerçeve g/telefon-on.webp: 3B render, önden (duz k071), 500×1052.
   Ekran yeri koseler-duz.json k071'den ölçüldü (kırpıma göre):
   sol %3.254 · üst %1.422 · en %93.492 · boy %97.156 · köşe %12.923/%5.911.
   Kamera deliği: merkez x %50 · y %3.097, çap %2.972 (çerçeveye göre).
   Ekranlar g/ekran/*.webp: benzeticiden 1206×2622 (402×874 pt), ada bölgesi
   yatay aradeğerle dolduruldu, 603×1311'e küçültüldü. */
.cihaz{ position:relative; width:var(--cihaz-en,240px); max-width:100%; aspect-ratio:500/1052; flex:0 0 auto;
  filter:drop-shadow(0 28px 36px rgba(0,0,0,.55)) }
.cihaz > .cerceve{ position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none }
.cihaz > .ekran{ position:absolute; left:3.254%; top:1.422%; width:93.492%; height:97.156%; display:block;
  border-radius:12.923% / 5.911%; object-fit:cover; background:#0b0a12 }
.cihaz > .delik{ position:absolute; left:50%; top:3.097%; width:2.972%; aspect-ratio:1/1; border-radius:50%;
  transform:translate(-50%,-50%); background:#030304; box-shadow:0 0 0 1px rgba(255,255,255,.05) }
.kahraman .sahne{ display:flex; justify-content:center; align-items:center; perspective:none }
.cihaz-kahraman{ --cihaz-en:min(290px, 64vw) }
.telefonsira{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px; margin-top:44px; align-items:start }
.cihazkart{ margin:0; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0 }
.cihazkart .cihaz{ --cihaz-en:236px }
.cihazkart figcaption{ margin-top:22px; max-width:270px }
.cihazkart figcaption b{ display:block; margin-bottom:6px; font-size:16px; color:#fff }
.cihazkart figcaption span{ display:block; font-size:13.5px; line-height:1.55; color:var(--dim) }
@media (max-width:1060px){ .telefonsira{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:48px } }
@media (max-width:520px){
  .telefonsira{ gap:16px; row-gap:36px }
  .cihazkart figcaption b{ font-size:14.5px }
  .cihazkart figcaption span{ font-size:12.5px }
}

/* ══ Sade akış (11.09.2026): kaydırmaya bağlı sahne yok; kutular hafifçe dökülür ══
   Gizleme yalnız betik .dokul-hazir koyunca başlar; ilk ekrandakilere dokunulmaz. */
.js-var .ac.gor, .js-var .gor .maske > span, .js-var .maske.gor > span{ animation:none }
.dokul-hazir .dokul{ opacity:0; transform:translateY(28px) }
.dokul-hazir .dokul.dokuldu{ opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--gecikme,0ms), transform .85s cubic-bezier(.22,1,.36,1) var(--gecikme,0ms) }
/* Kalan sabitlenmiş sahneler (Apple TV sayfası) düz akar */
.yol, .js-var .yol{ height:auto !important }
.yol .sahnecam, .js-var .yol .sahnecam{ position:static !important; height:auto !important; padding:80px 0 !important }
.yol .adim, .js-var .yol .adim{ position:relative !important; inset:auto !important; opacity:1 !important;
  transform:none !important; filter:none !important; pointer-events:auto !important; animation:none !important; margin-bottom:40px }

/* ══ Dokunma alanları (11.09.2026) — mobil/tablet: en az ~44 px ══════════════
   Görünüm DEĞİŞMEZ: bağlantının etrafına görünmez ::before alanı eklenir.
   Ölçüm (canlı, 375 px): iOS 22×32 · Android 49×20 · altbilgi 17 px yükseklik. */
.ustbant nav a{ position:relative }
.ustbant nav a::before{ content:""; position:absolute; left:-6px; right:-6px; top:-12px; bottom:-12px }
.ustbant .marka{ position:relative }
.ustbant .marka::before{ content:""; position:absolute; left:-10px; right:-10px; top:0; bottom:0 }
footer nav a{ position:relative }
footer nav a::before{ content:""; position:absolute; left:-4px; right:-4px; top:-12px; bottom:-12px }

/* Görsel boyut öznitelikleri (11.09.2026, SEO/CLS): sınıf kuralı yoksa en-boy oranı korunur.
   :where() özgüllüğü sıfırdır — height veren her sınıf kuralı bunu ezer. */
:where(img[width][height]){ height:auto }

/* ══ Erişilebilirlik (11.09.2026, PageSpeed) ══════════════════════════════════
   Theme.pink (#E71380) kart zemininde (#171721) 4,07:1 kalıyor; küçük yazıda AA eşiği 4,5:1.
   Küçük pembe yazı pinkFill'in cam yansıma durağıyla yazılır: #EE5AA6 → kartta 5,6:1, zeminde 6,4:1.
   Metin içi bağlantılar yalnız renkle ayırt edilmesin diye altı çizili. */
:root{ --pembe-yazi:#EE5AA6 }            /* Theme.pinkFill üst durağı — Theme.swift:136 */
.etiket, .adimno{ color:var(--pembe-yazi) }
.panel p a[href]{ color:var(--pembe-yazi); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px }