/* ==========================================================================
   GOOD IPTV PLAYER — SİTE TEMASI (10.10.2026)
   --------------------------------------------------------------------------
   Birkan: "Tüm site teması, kartları, yazıları, geçişleri bir tema yapısına
   sahip olsun… premium bir tasarım olsun… ufak animasyon ekleyebilirsin
   temaya uygun… telefonların alt ya da üst kısmını şeffaflaştırıp güzel
   görseller elde edebilirsin, tam cihazı göstermene gerek yok."

   TEK KAYNAK. Renk, yazı, aralık, köşe, gölge ve hareket yalnız aşağıdaki
   belirteçlerden okunur; bileşenler kendi sayısını taşımaz.
   • Renkler uygulamanın Theme.swift'inden gelir (css/temel.css :root).
   • Düğme DÜZ pembedir (Theme.pink). Pembe→mor degrade yalnız marka
     işaretinin hakkıdır (good-iptv-renk-kurali). Telefonların alttaki
     saydamlaşması bir RENK değil, alfa maskesidir.
   • Uygulama kopyası kartlar (afiş, kanal, kaldığınız yer) css/temel.css'te,
     uygulamadan ölçülmüş hâlleriyle durur; burada yalnız yerleşimleri var.
   ========================================================================== */

:root{
  /* --- Renk ------------------------------------------------------------- */
  --zemin:        var(--ink);                 /* #050509  Theme.bg        */
  --zemin-ust:    var(--ink-2);               /* #0B0813  Theme.bgTop     */
  --yuzey:        var(--card);                /* #171721  Theme.card      */
  --yuzey-ust:    #1C1C28;                    /* kart üzerine gelince     */
  --yuzey-cip:    var(--chip);                /* #21212E  Theme.cardLight */
  --cizgi:        rgba(255,255,255,.08);      /* Theme.standartKenar      */
  --cizgi-guclu:  rgba(255,255,255,.15);
  --cizgi-pembe:  rgba(231,19,128,.40);       /* Theme.premiumKenar       */
  --yazi:         #FFFFFF;
  --yazi-2:       rgba(255,255,255,.86);
  --soluk:        rgba(255,255,255,.62);      /* gövde metni              */
  --silik:        rgba(255,255,255,.52);      /* dipnot (koyu zeminde 4,5:1 üstü — PSI 10.10) */
  --pembe:        var(--magenta);             /* #E71380  Theme.pink      */
  --pembe-yazi:   #EE5AA6;                    /* küçük pembe yazı (kart zemininde 4,5:1 üstü) */
  --pembe-zemin:  rgba(231,19,128,.13);
  --iyi:          #34C759;
  --hata:         var(--red);                 /* #FF6666 */

  /* --- Yazı -------------------------------------------------------------- */
  --font:      -apple-system,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --y-dev:     clamp(38px, 5.4vw, 66px);      /* h1                       */
  --y-baslik:  clamp(30px, 3.9vw, 48px);      /* h2                       */
  --y-alt:     18px;                          /* h3 (kart başlığı)        */
  --y-giris:   clamp(16.5px, 1.32vw, 19px);   /* bölüm açıklaması         */
  --y-govde:   15.5px;
  --y-kart:    14.5px;
  --y-kucuk:   13px;
  --y-etiket:  11.5px;

  /* --- Aralık ------------------------------------------------------------ */
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px; --a8:64px; --a9:96px;
  --bolum-ara: clamp(84px, 11vw, 140px);
  --kap-en:    1160px;
  --kap-pay:   24px;

  /* --- Köşe -------------------------------------------------------------- */
  --k-kucuk: 10px;
  --k-dugme: 12px;                            /* HesapOlcu.satirKosesi    */
  --k-kart:  18px;
  --k-buyuk: 28px;
  --k-hap:   999px;

  /* --- Gölge ------------------------------------------------------------- */
  --g-kart:   inset 0 1px 0 rgba(255,255,255,.045), 0 30px 60px -40px rgba(0,0,0,.95);
  --g-dugme:  0 12px 30px -14px rgba(231,19,128,.95);
  --g-cihaz:  drop-shadow(0 34px 44px rgba(0,0,0,.6));

  /* --- Hareket ----------------------------------------------------------- */
  --egri:        cubic-bezier(.22,1,.36,1);   /* yavaşlayarak oturur       */
  --egri-giris:  cubic-bezier(.4,0,.2,1);
  --s-kisa:      180ms;
  --s-orta:      380ms;
  --s-uzun:      900ms;
  --belir-kayma: 26px;
  --tel-yuksel:  56px;

  /* --- Telefon kesiti (alfa maskesi; renk değil) --------------------------- */
  --kesit-tam:   #000 66%, transparent 100%;  /* bölüm telefonları         */
  --kesit-hafif: #000 72%, transparent 98%;   /* açılış telefonu           */
}

/* ==========================================================================
   TABAN
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; background:var(--zemin) }
body{
  margin:0; background:var(--zemin); color:var(--yazi);
  font-family:var(--font); font-size:var(--y-govde); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
p{ margin:0 }
:focus-visible{ outline:2px solid var(--pembe-yazi); outline-offset:3px; border-radius:6px }
::selection{ background:rgba(231,19,128,.45); color:#fff }

/* Sayfa zemini — uygulamanın ekran zemini (Theme.screenGradient, Theme.swift:143) + açılışta tek, kısık pembe ışık */
.zemin{ position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg,var(--zemin-ust) 0%,var(--zemin) 46%) }
.zemin::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(70vmax 46vmax at 82% -8%, rgba(231,19,128,.13), transparent 64%) }

.kap{ width:min(var(--kap-en), calc(100% - 2 * var(--kap-pay))); margin-inline:auto }

/* ==========================================================================
   YAZI DÜZENİ
   ========================================================================== */
h1,h2,h3{ margin:0; text-wrap:balance }
h1{ font-size:var(--y-dev); font-weight:800; line-height:1.03; letter-spacing:-.032em }
h2{ font-size:var(--y-baslik); font-weight:800; line-height:1.08; letter-spacing:-.024em }
h3{ font-size:var(--y-alt); font-weight:700; line-height:1.3; letter-spacing:-.01em }
.vurgu{ color:var(--pembe) }
.giris{ font-size:var(--y-giris); line-height:1.6; color:var(--soluk); max-width:60ch; text-wrap:pretty }
.dipnot{ font-size:var(--y-kucuk); line-height:1.6; color:var(--silik); max-width:80ch }
.dipnot a, .kart p a, .bilgilendirme p a{ color:var(--yazi-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--cizgi-guclu) }
.dipnot a:hover, .kart p a:hover, .bilgilendirme p a:hover{ color:#fff; text-decoration-color:var(--pembe) }

/* Bölüm etiketi — uygulamadaki raf başlığının pembe kapsülü (ShelfHeader 3,5 × 17) */
.etiket{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 var(--a4);
  font-size:var(--y-etiket); font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pembe-yazi);
}
.etiket::before{ content:""; width:3.5px; height:15px; border-radius:2px; background:var(--pembe) }

/* Rozet — Premium vb. küçük kapsül (büyük harfe ÇEVRİLMEZ: Türkçede "PREMİUM" sorunu yok) */
.rozet{
  display:inline-flex; align-items:center; vertical-align:.18em; margin-left:8px;
  padding:3px 9px; border-radius:var(--k-hap);
  font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.3; white-space:nowrap;
  color:var(--pembe-yazi); background:var(--pembe-zemin); border:1px solid var(--cizgi-pembe);
}
.rozet.sade{ color:var(--yazi-2); background:rgba(255,255,255,.06); border-color:var(--cizgi) }
.rozet.durum{ margin:0; gap:7px; color:#fff; background:var(--pembe); border-color:transparent }
.rozet.durum::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.28) }

/* ==========================================================================
   MARKA KİLİDİ — AppLogo (Theme.swift:261-280): işaret = s×1,8 · GOOD = s×1,45
   ========================================================================== */
.marka{ display:inline-flex; align-items:center; --s:16px; gap:calc(var(--s)*.22) }
.marka img{ height:calc(var(--s)*1.8); width:auto }
.marka b{
  font-family:"Avenir Next","Avenir",var(--font); 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;
}

/* ==========================================================================
   DÜĞMELER
   ========================================================================== */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px;
  padding:13px 22px; border-radius:var(--k-dugme); border:1px solid transparent;
  font:700 15px/1.2 var(--font); letter-spacing:.005em; color:#fff; white-space:nowrap;
  background:var(--pembe); box-shadow:var(--g-dugme); cursor:pointer;
  transition:transform var(--s-kisa) var(--egri), box-shadow var(--s-kisa) var(--egri),
             background-color var(--s-kisa) var(--egri), border-color var(--s-kisa) var(--egri);
}
.dugme:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -16px rgba(231,19,128,1) }
.dugme:active{ transform:translateY(0) scale(.985) }
.dugme.ikincil{ background:var(--yuzey-cip); border-color:var(--cizgi); box-shadow:none; color:var(--yazi-2) }
.dugme.ikincil:hover{ background:#282838; border-color:var(--cizgi-guclu); color:#fff }
.dugme svg{ width:18px; height:18px; flex:none; fill:currentColor }
.dugmeler{ display:flex; flex-wrap:wrap; gap:var(--a3); align-items:center }

/* Ok bağlantısı — "… sayfasına geçin →" */
.git{ display:inline-flex; align-items:center; gap:12px; font-size:14.5px; font-weight:700; color:var(--yazi) }
.git .ok{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--pembe);
  transition:transform var(--s-orta) var(--egri) }
.git .ok svg{ width:15px; height:13px; fill:none; stroke:#fff; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round }

/* ==========================================================================
   ÜST BANT
   ========================================================================== */
.ustbant{ position:sticky; top:0; z-index:50; background:rgba(5,5,9,.86); border-bottom:1px solid var(--cizgi) }
@supports (backdrop-filter:blur(1px)){
  .ustbant{ background:rgba(5,5,9,.72); backdrop-filter:saturate(1.4) blur(18px); -webkit-backdrop-filter:saturate(1.4) blur(18px) }
}
.ustbant .kap{ display:flex; align-items:center; gap:var(--a5); height:64px }
.ustbant nav{ margin-left:auto; display:flex; gap:var(--a5); align-items:center }
.ustbant nav a{ position:relative; font-size:14px; font-weight:600; color:var(--soluk); padding:8px 0;
  transition:color var(--s-kisa) var(--egri) }
.ustbant nav a:hover{ color:#fff }
.ustbant nav a[aria-current="page"]{ color:#fff }
.ustbant nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--pembe) }

/* İndir menüsü (açılır) */
.indirmenu{ position:relative; flex:none }
.indirmenu > summary{ list-style:none; cursor:pointer; user-select:none; min-height:40px; padding:10px 16px; font-size:14px }
.indirmenu > summary::-webkit-details-marker{ display:none }
.indirmenu > summary::after{ content:""; width:6px; height:6px; margin-left:2px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:translateY(-2px) rotate(45deg); transition:transform var(--s-kisa) var(--egri) }
.indirmenu[open] > summary::after{ transform:translateY(2px) rotate(-135deg) }
.indirliste{ position:absolute; right:0; top:calc(100% + 10px); z-index:80; min-width:270px; margin:0; padding:8px;
  list-style:none; background:var(--yuzey); border:1px solid var(--cizgi-guclu); border-radius:var(--k-kart);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9); animation:menuAc var(--s-orta) var(--egri) }
@keyframes menuAc{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.indirsatir{ display:flex; flex-direction:column; gap:2px; padding:11px 14px; border-radius:var(--k-kucuk) }
.indirsatir b{ font-size:14.5px; font-weight:700 }
.indirsatir span{ font-size:12.5px; color:var(--soluk) }
a.indirsatir:hover, a.indirsatir:focus-visible{ background:var(--pembe-zemin); outline:none }

/* ==========================================================================
   AÇILIŞ (ANA SAYFA) — metin + cihaz vitrini (TV arkada, telefon önde)
   ========================================================================== */
.acilis{ position:relative; padding:clamp(48px, 7vw, 92px) 0 clamp(64px, 8vw, 110px) }
.acilis .kap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px, 5vw, 72px); align-items:center }
.acilis h1{ margin:0 0 var(--a5); font-size:clamp(36px, 4.7vw, 60px) }
.acilis .giris{ margin:0 0 var(--a6) }

/* Logo dört ORİJİNAL parçadan kendini kurar (g/logo-parca1..4) */
.logokur{ position:relative; width:118px; aspect-ratio:1280/1368; margin-bottom:var(--a5) }
.logokur img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }

.kunye{ display:flex; flex-wrap:wrap; gap:var(--a5) var(--a6); margin-top:var(--a6); padding-top:var(--a5);
  border-top:1px solid var(--cizgi); font-size:var(--y-kucuk); color:var(--soluk) }
.kunye b{ display:block; margin-bottom:2px; font-size:15px; font-weight:700; color:var(--yazi) }

.vitrin{ position:relative; aspect-ratio:1.04; isolation:isolate }
.vitrin::before{ content:""; position:absolute; inset:8% 4% 2% 10%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(231,19,128,.20), transparent) }
.vitrin .tv{ position:absolute; right:-6%; top:2%; width:96% }
.vitrin .tel{ position:absolute; left:-2%; bottom:-6%; width:42% }

/* ==========================================================================
   SAYFA BAŞLIĞI (ALT SAYFALAR)
   ========================================================================== */
.sayfabas{ padding:clamp(20px, 3vw, 36px) 0 clamp(24px, 4vw, 48px) }
/* Ana sayfanın açılışıyla aynı kurgu: metin solda, cihaz sağda */
.sayfabas .kap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:clamp(28px, 4.5vw, 64px); align-items:center }
.sayfabas .donus{ grid-column:1 / -1; justify-self:start; margin:0 }
.sayfabas h1{ max-width:16ch; margin:0 0 var(--a5) }
.sayfabas .giris{ margin:0 0 var(--a6) }
.donus{ display:inline-flex; align-items:center; gap:9px; min-height:44px; margin:0 0 var(--a4);
  font-size:13.5px; font-weight:600; color:var(--soluk); transition:color var(--s-kisa) var(--egri) }
.donus:hover{ color:#fff }
.donus svg{ width:15px; height:13px; fill:none; stroke:var(--pembe); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--s-orta) var(--egri) }
.donus:hover svg{ transform:translateX(-3px) }

/* ==========================================================================
   BÖLÜM
   ========================================================================== */
.bolum{ position:relative; padding:var(--bolum-ara) 0 0 }
.bolum:last-of-type{ padding-bottom:var(--bolum-ara) }
.bolum-bas{ max-width:760px; margin:0 0 clamp(32px, 4vw, 52px) }
.bolum-bas h2{ margin:0 0 var(--a4) }
.bolum-bas.orta{ margin-inline:auto; text-align:center }
.bolum-bas.orta .giris{ margin-inline:auto }

/* İki sütun: metin + görsel. `.ters` görseli sola alır. */
.ikili{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 80px); align-items:center }
.ikili.ters > :first-child{ order:2 }
.ikili .bolum-bas{ margin-bottom:var(--a6) }

/* Görsel + kart sütunu: telefon dar sütunda, kartlar geniş sütunda */
.yanyana{ display:grid; grid-template-columns:minmax(0,1fr) clamp(240px, 26vw, 320px); gap:clamp(28px, 4vw, 56px); align-items:center }
.yanyana.ters{ grid-template-columns:clamp(240px, 26vw, 320px) minmax(0,1fr) }
.yanyana.ters > .tel{ order:-1 }

/* ==========================================================================
   KART
   ========================================================================== */
.kartlar{ display:grid; gap:var(--a4) }
.kartlar.k2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.kartlar.k3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.kartlar.k4{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.kart{
  position:relative; padding:var(--a5) var(--a5) 26px; border-radius:var(--k-kart);
  background:var(--yuzey); border:1px solid var(--cizgi); box-shadow:var(--g-kart);
  transition:transform var(--s-orta) var(--egri), border-color var(--s-orta) var(--egri), background-color var(--s-orta) var(--egri);
}
@media (hover:hover){
  .kart:hover{ transform:translateY(-3px); border-color:var(--cizgi-guclu); background:var(--yuzey-ust) }
}
.kart h3{ margin:0 0 var(--a2) }
.kart p{ font-size:var(--y-kart); line-height:1.6; color:var(--soluk) }
.kart .ust{ display:block; margin:0 0 var(--a3); font-size:var(--y-etiket); font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pembe-yazi) }
.kart.pro{ border-color:var(--cizgi-pembe); background:var(--premium-kart) }
@media (hover:hover){ .kart.pro:hover{ border-color:rgba(231,19,128,.6) } }
.kart.genis{ padding:clamp(28px, 4vw, 44px) }

/* Madde listeleri — ✓ olur · ✕ olmaz */
.maddeler{ list-style:none; margin:var(--a4) 0 0; padding:0; display:grid; gap:10px; font-size:var(--y-kart); color:var(--yazi-2) }
.maddeler li{ position:relative; padding-left:28px; line-height:1.5 }
.maddeler li::before{ content:""; position:absolute; left:0; top:.18em; width:18px; height:18px; border-radius:50%;
  background:var(--pembe-zemin) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.4' fill='none' stroke='%23EE5AA6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat }
.maddeler.notr li::before{ top:.55em; left:6px; width:7px; height:7px; background:var(--soluk) }
.maddeler.olmaz li::before{ background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6.2 6.2l5.6 5.6M11.8 6.2l-5.6 5.6' fill='none' stroke='%23ffffff' stroke-opacity='.62' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat }

/* ==========================================================================
   CİHAZ GÖRSELLERİ
   Telefon: jenerik 3B telefon (tools/telefon3d · Apple ürünü TAKLİT EDİLMEZ), içinde uygulamanın gerçek ekranı.
   `.kesik` alt kısmı alfa maskesiyle saydamlaştırır — cihazın tamamı gösterilmez (Birkan 10.10).
   ========================================================================== */
.tel, .tv{ margin:0; position:relative }
.tel img{ width:100%; filter:var(--g-cihaz) }
/* Kesik telefon: görselin üst kısmı görünür, alt kısmı saydamlaşarak biter (kutu görseli kırpar, boşluk bırakmaz) */
.tel.kesik{ aspect-ratio:640/1040; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, var(--kesit-tam)); mask-image:linear-gradient(180deg, var(--kesit-tam)) }
.tel.kesik img{ position:absolute; left:0; top:0 }
.tel.kesik-hafif{ -webkit-mask-image:linear-gradient(180deg, var(--kesit-hafif)); mask-image:linear-gradient(180deg, var(--kesit-hafif)) }
.tel figcaption{ margin-top:var(--a2) }
.tv img{ width:100% }

/* Telefon sırası — dört yöntem */
.telsira{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 2vw, 28px) }
.telsira .tel{ display:flex; flex-direction:column }
.telsira .tel .cerceve{ position:relative; aspect-ratio:640/1000; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent 100%); mask-image:linear-gradient(180deg, #000 70%, transparent 100%) }
.telsira .tel .cerceve img{ position:absolute; left:0; top:0; width:100%; filter:none }
.telsira figcaption b{ display:block; font-size:16px; font-weight:700; margin-bottom:4px }
.telsira figcaption span{ display:block; font-size:var(--y-kart); line-height:1.55; color:var(--soluk) }

/* TV vitrini — alt sayfa başı ve platform kartları */
.vitrin-tv{ position:relative; isolation:isolate }
.vitrin-tv::before{ content:""; position:absolute; inset:10% 12% 18%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(231,19,128,.16), transparent) }
.vitrin-tv img{ width:100% }
.vitrin-tv figcaption, .tv figcaption{ margin:var(--a3) auto 0; text-align:center }

/* ==========================================================================
   PLATFORM KARTLARI (Apple TV · Android) — TV görseli kartın üstünde
   ========================================================================== */
.platformlar{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--a4) }
.platform{ display:flex; flex-direction:column; overflow:hidden; padding:0 }
.platform .sahne{ position:relative; padding:28px 28px 0; border-bottom:1px solid var(--cizgi) }
.platform .sahne img{ width:100%; transition:transform var(--s-uzun) var(--egri) }
.platform .govde{ display:flex; flex-direction:column; flex:1; padding:var(--a5) 28px 28px }
.platform .govde .rozet.durum{ align-self:flex-start; margin-bottom:var(--a4) }
.platform .govde h3{ font-size:22px; margin-bottom:var(--a2) }
.platform .alt{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:var(--a4) 0 0; padding:0; list-style:none;
  font-size:12.5px; color:var(--silik) }
.platform .alt li::before{ content:"•"; margin-right:7px; color:var(--pembe) }
.platform .git{ margin-top:auto; padding-top:var(--a5) }
@media (hover:hover){
  .platform:hover .sahne img{ transform:translateY(-6px) scale(1.012) }
  .platform:hover .git .ok{ transform:translateX(4px) }
}

/* ==========================================================================
   PREMIUM PLANLARI
   ========================================================================== */
.planlar{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--a4); align-items:stretch }
.plan h3{ font-size:22px }
.plan .ozet{ margin:6px 0 0; font-size:var(--y-kart); color:var(--soluk) }
.plan.pro h3{ color:var(--pembe-yazi) }

/* ==========================================================================
   YASAL BİLGİLENDİRME KUTUSU
   ========================================================================== */
.bilgilendirme{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--a5); align-items:start }
.bilgilendirme .simge{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--pembe-zemin);
  border:1px solid var(--cizgi-pembe) }
.bilgilendirme .simge svg{ width:22px; height:22px; fill:none; stroke:var(--pembe-yazi); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.bilgilendirme h3{ margin:0 0 var(--a2) }
.bilgilendirme p{ font-size:var(--y-kart); line-height:1.65; color:var(--soluk) }
.bilgilendirme p + p{ margin-top:var(--a2) }

/* ==========================================================================
   SIK SORULAN SORULAR
   ========================================================================== */
.sss{ display:grid; gap:10px; max-width:880px }
.sss details{ border-radius:var(--k-kart); background:var(--yuzey); border:1px solid var(--cizgi);
  transition:border-color var(--s-orta) var(--egri), background-color var(--s-orta) var(--egri) }
.sss details[open]{ border-color:var(--cizgi-pembe); background:var(--yuzey-ust) }
.sss summary{ display:flex; align-items:center; gap:14px; padding:19px 22px; cursor:pointer; list-style:none;
  font-size:15.5px; font-weight:700; line-height:1.4 }
.sss summary::-webkit-details-marker{ display:none }
.sss summary::after{ content:""; flex:none; margin-left:auto; width:9px; height:9px; border-right:2px solid var(--pembe-yazi);
  border-bottom:2px solid var(--pembe-yazi); transform:translateY(-3px) rotate(45deg); transition:transform var(--s-orta) var(--egri) }
.sss details[open] summary::after{ transform:translateY(2px) rotate(-135deg) }
.sss details p{ padding:0 22px 20px; font-size:var(--y-kart); line-height:1.65; color:var(--soluk) }
.sss details[open] p{ animation:sssAc var(--s-orta) var(--egri) }
@keyframes sssAc{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

/* ==========================================================================
   İNDİR KUTUSU
   ========================================================================== */
.indir{ position:relative; overflow:hidden; text-align:center; padding:clamp(48px, 7vw, 84px) clamp(24px, 4vw, 48px);
  border-radius:var(--k-buyuk); background:var(--premium-kart); border:1px solid var(--cizgi-pembe) }
.indir::before{ content:""; position:absolute; left:50%; top:-40%; width:80%; aspect-ratio:1; transform:translateX(-50%);
  border-radius:50%; background:radial-gradient(closest-side, rgba(231,19,128,.18), transparent); pointer-events:none }
.indir > *{ position:relative }
.indir .marka{ --s:20px; margin-bottom:var(--a5) }
.indir h2{ margin:0 0 var(--a3) }
.indir .giris{ margin:0 auto var(--a6) }
.indir .dugmeler{ justify-content:center }

/* ==========================================================================
   ALT BİLGİ
   ========================================================================== */
.altbilgi{ border-top:1px solid var(--cizgi); padding:var(--a7) 0 var(--a8) }
.altbilgi .kap{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--a5) var(--a7); align-items:start }
.altbilgi .marka{ --s:13px; grid-row:span 2; align-self:start }
.altbilgi nav{ display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13px; color:var(--soluk) }
/* Uygulama sayfalarına sabit bağlantı (10.10.2026 SEO: Google'ın Android ve Apple TV sayfalarını taraması için her sayfadan yol) */
.altbilgi nav.urunler{ font-size:13.5px; font-weight:600; color:var(--yazi-2) }
.altbilgi nav.urunler a[aria-current="page"]{ color:var(--pembe-yazi) }
.altbilgi nav a{ transition:color var(--s-kisa) var(--egri) }
.altbilgi nav a:hover{ color:#fff }
.altbilgi .alt-satir{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--a3) var(--a5); align-items:center;
  padding-top:var(--a5); border-top:1px solid var(--cizgi); font-size:12.5px; color:var(--silik) }
.altbilgi .diller{ display:flex; gap:var(--a4) }
.altbilgi .diller a{ color:var(--soluk) }
.altbilgi .diller a[aria-current="page"]{ color:#fff }
.altbilgi .telif{ margin-left:auto }

/* ==========================================================================
   UYGULAMA KOPYASI KARTLARIN YERLEŞİMİ (kartların kendisi temel.css)
   ========================================================================== */
.raf{ margin-top:var(--a6) }
.raf .rafbas{ display:flex; align-items:center; gap:9px; margin-bottom:12px }
.raf .rafbas::before{ content:""; width:3.5px; height:17px; border-radius:2px; background:var(--pembe) }
.raf .rafbas b{ font-size:15px; font-weight:800 }
.raf .rafbas span{ margin-left:auto; font-size:12px; font-weight:700; color:rgba(255,255,255,.7) }
.raf .rafbas span i{ font-style:normal; color:var(--pembe) }
.rafkaydir{ display:flex; gap:10px; overflow-x:auto; padding:6px 2px 10px; scrollbar-width:none; --afis-en:118px }
.rafkaydir::-webkit-scrollbar{ display:none }
.rafkaydir .afis .kutu{ transition:transform var(--s-orta) var(--egri) }
@media (hover:hover){ .rafkaydir .afis:hover .kutu{ transform:scale(1.045) } }
/* Kanal ve kaldığınız yer kartları uygulamanın ÖLÇÜSÜYLE kurulur (temel.css); sitede bütün olarak büyütülür
   (`zoom`: yazı, bant ve çizgi oranları uygulamadakiyle aynı kalır). */
.kanalsira{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; --afis-en:150px; zoom:1.55 }
.devamsira{ display:flex; gap:14px; flex-wrap:wrap; --devam-en:176px; zoom:1.3 }

/* ==========================================================================
   SÜRGÜLÜ KIYAS (Android sayfası) — aynı TV görselinde iki ekran
   ========================================================================== */
.kiyasla{ position:relative; --kiyas:50% }
.kiyasla .katman{ position:relative }
.kiyasla .katman img{ width:100% }
.kiyasla .katman.ust{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--kiyas)) 0 0) }
.kiyasla .cizgi{ position:absolute; top:14%; bottom:26%; left:var(--kiyas); z-index:2; width:2px; margin-left:-1px;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none }
.kiyasla .cizgi i{ position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  display:grid; place-items:center; background:var(--pembe); box-shadow:0 8px 24px -8px rgba(0,0,0,.8) }
.kiyasla .cizgi svg{ width:22px; height:12px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.kiyasla .yan{ position:absolute; top:6%; z-index:2; padding:6px 12px; border-radius:var(--k-hap); pointer-events:none;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(5,5,9,.7); border:1px solid var(--cizgi-guclu) }
.kiyasla .yan.sol{ left:14%; color:var(--pembe-yazi) }
.kiyasla .yan.sag{ right:14%; color:var(--yazi-2) }
.kiyasla input[type=range]{ position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize }
.kiyasla:has(input:focus-visible) .cizgi i{ outline:2px solid #fff; outline-offset:3px }
/* İlk görünüşte çizgi bir kez sağa-sola süpürür; kullanıcı dokununca durur (`suz` sınıfı kalkar). */
@property --kiyas{ syntax:"<percentage>"; inherits:true; initial-value:50% }
.kiyasla.suz.gor{ animation:suz 3.6s var(--egri-giris) .4s 1 both }
@keyframes suz{ 0%{ --kiyas:50% } 30%{ --kiyas:70% } 66%{ --kiyas:32% } 100%{ --kiyas:50% } }

/* Kumanda tuş satırı (Apple TV oynatıcı) */
.kumanda{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:var(--a4) }
.kumanda + .kumanda{ margin-top:10px }
.kumanda .ne{ min-width:96px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--silik) }
.kumanda span:not(.ne){ padding:6px 12px; border-radius:var(--k-hap); background:rgba(255,255,255,.06); border:1px solid var(--cizgi);
  font-size:12.5px; font-weight:600; color:var(--yazi-2) }

/* Adım kartları (Apple TV bağlanma) */
.adim .no{ display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:var(--a4); border-radius:50%;
  font-size:14px; font-weight:800; color:#fff; background:var(--pembe) }

/* ==========================================================================
   HAREKET — bir kez belir, bırak. Kaydırma ELE GEÇİRİLMEZ.
   İçerik dinlenme hâlinde GÖRÜNÜR; gizleme yalnız betik çalışırsa (html.belir-hazir) uygulanır.
   ========================================================================== */
html.belir-hazir .belir{ opacity:0; transform:translateY(var(--belir-kayma)) }
html.belir-hazir .belir.tel, html.belir-hazir .belir .tel{ transform:translateY(var(--tel-yuksel)) }
html.belir-hazir .belir.gor, html.belir-hazir .belir.gor .tel{
  opacity:1; transform:none;
  transition:opacity var(--s-uzun) var(--egri), transform var(--s-uzun) var(--egri);
  transition-delay:var(--gecikme, 0ms);
}

/* Açılış: logo parçaları, başlık, metin ve vitrin sırayla gelir */
.js-var .logokur img{ opacity:0; animation:parcaGel .95s var(--egri) forwards }
.js-var .logokur img:nth-child(1){ animation-delay:.05s; --dx:-46px; --dy:-30px; --r:-14deg }
.js-var .logokur img:nth-child(2){ animation-delay:.17s; --dx:-40px; --dy: 42px; --r: 12deg }
.js-var .logokur img:nth-child(3){ animation-delay:.29s; --dx: 52px; --dy:-38px; --r: 16deg }
.js-var .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 }
}
.js-var .acilis-metin > *:not(.logokur){ opacity:0; animation:yuksel .9s var(--egri) forwards }
.js-var .acilis-metin > :nth-child(2){ animation-delay:.55s }
.js-var .acilis-metin > :nth-child(3){ animation-delay:.67s }
.js-var .acilis-metin > :nth-child(4){ animation-delay:.79s }
.js-var .acilis-metin > :nth-child(5){ animation-delay:.91s }
.js-var .vitrin .tv{ opacity:0; animation:yuksel 1.1s var(--egri) .35s forwards }
.js-var .vitrin .tel{ opacity:0; animation:telGel 1.2s var(--egri) .6s forwards }
@keyframes yuksel{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
@keyframes telGel{ from{ opacity:0; transform:translateY(70px) } to{ opacity:1; transform:none } }
/* Vitrindeki telefon yavaşça süzülür (7 sn, ±7 px) — tek sürekli hareket */
.vitrin .tel img{ animation:suzul 7s ease-in-out 2s infinite }
@keyframes suzul{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  html.belir-hazir .belir, html.belir-hazir .belir .tel, html.belir-hazir .belir.tel{ opacity:1; transform:none; transition:none }
  .js-var .logokur img, .js-var .acilis-metin > *, .js-var .vitrin .tv, .js-var .vitrin .tel,
  .vitrin .tel img, .indirliste, .sss details[open] p, .kiyasla.suz.gor{ animation:none; opacity:1; transform:none }
  .kart, .dugme, .platform .sahne img{ transition:none }
}

/* ==========================================================================
   DAR EKRANLAR
   ========================================================================== */
@media (max-width:1000px){
  .kartlar.k4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .kartlar.k3{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .telsira{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:var(--a6) }
}
@media (max-width:900px){
  .acilis .kap, .sayfabas .kap{ grid-template-columns:1fr }
  .vitrin{ max-width:560px; width:100%; margin-inline:auto }
  .ikili, .yanyana, .yanyana.ters{ grid-template-columns:1fr }
  .ikili.ters > :first-child{ order:0 }
  .yanyana > .tel, .yanyana.ters > .tel{ order:-1; width:min(280px, 70%); margin-inline:auto }
  .ikili > .tel{ width:min(300px, 72%); margin-inline:auto }
  .platformlar, .planlar{ grid-template-columns:1fr }
  .altbilgi .kap{ grid-template-columns:1fr }
  .altbilgi .marka{ grid-row:auto }
  .altbilgi .telif{ margin-left:0 }
}
@media (max-width:620px){
  :root{ --kap-pay:16px }
  .ustbant .kap{ gap:var(--a4); height:58px }
  .ustbant nav{ gap:var(--a4) }
  .ustbant nav a{ font-size:13.5px }
  .indirmenu > summary{ padding:9px 13px; font-size:13.5px }
  .kartlar.k2, .kartlar.k3, .kartlar.k4{ grid-template-columns:1fr }
  .telsira{ grid-template-columns:repeat(4, 68%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
    margin-inline:calc(-1 * var(--kap-pay)); padding-inline:var(--kap-pay); scrollbar-width:none }
  .telsira::-webkit-scrollbar{ display:none }
  .telsira .tel{ scroll-snap-align:center }
  .dugmeler .dugme{ flex:1 1 auto }
  .kunye{ gap:var(--a4) var(--a5) }
  .bilgilendirme{ grid-template-columns:1fr }
  .platform .sahne{ padding:20px 20px 0 }
  .platform .govde{ padding:20px 20px 24px }
  .kiyasla .yan{ font-size:10.5px; padding:5px 9px }
  .kanalsira{ zoom:1.05 }
  .devamsira{ zoom:1 }
}