/* ============================================================================
   ŞAMPİYON PANEL — Tanıtım sitesi (SİTE2 / "STADYUM" teması)
   Saf CSS · harici font/CDN YOK · sistem font yığını · mobil öncelikli
   Konsept: koyu "ink" bantlar (gece stadyum ışığı) + temiz beyaz içerik
   bölümleri + TEK sabit sanat yönü (kullanıcı tema anahtarı yok — bilinçli
   art-direction tercihi, bkz. rapor). Marka rengi: alev turuncusu #ff5a1f
   (vurgu/CTA) + saha yeşili (güven/onay işaretleri). site/styles.css'in
   altın+açık/koyu-anahtarlı sisteminden kasıtlı olarak farklıdır.
   ========================================================================== */

/* --- 1. Tasarım jetonları -------------------------------------------------- */
:root{
  /* Koyu "ink" bantlar (hero, CTA, footer, "nasıl çalışır") */
  --ink:#0a0d0f;
  --ink-2:#12171a;
  --ink-3:#1a2126;
  --ink-line:#2a3238;
  --on-dark:#eef2f0;
  --on-dark-muted:#a7b2ae;
  --on-dark-soft:#7c8886;

  /* Açık "paper" içerik bölümleri */
  --paper:#ffffff;
  --paper-2:#f4f5f1;
  --paper-3:#eceeea;
  --line:#e3e5e0;
  --line-strong:#d3d6d0;
  --ink-text:#0c1012;
  --ink-text-muted:#565d5a;
  --ink-text-soft:#6a706e;    /* v2: #7b8280→#6a706e — beyaz üstünde 3.93:1 idi, AA (4.5) için koyulaştırıldı */

  /* Marka vurguları */
  --flame:#ff5a1f;            /* birincil vurgu — büyük/kalın CTA dolgusu (üstünde koyu metin kullanılır) */
  --flame-dark:#dd4610;       /* buton hover vb. — DOLGU rengi, metin rengi değil */
  --flame-soft:#fff0e7;
  --flame-soft-dark:#2c180d;
  --ink-on-flame:#180900;
  /* ⚠️ Denetimde bulundu: --flame (3.12:1) ve --flame-dark (3.80:1) küçük METİN
     renginde AA'yı (4.5:1) geçemiyordu (eyebrow, rozet). --flame-ink SADECE küçük
     metin/ikon için — buton dolgusu olarak KULLANILMAZ (o zaman --flame kalır). */
  --flame-ink:#c23a0c;        /* beyazda 4.83:1, flame-soft'ta 4.83:1+ — AA geçer */

  --pitch:#0c7a42;            /* v2: #0e8a4b→#0c7a42 — beyaz üstünde 4.42:1 idi (AA sınırında kaldı), koyulaştırıldı */
  --pitch-bright:#35e08f;      /* saha yeşili — koyu zeminde */
  --pitch-soft:#e5f6ec;
  --pitch-soft-dark:#0e2019;

  --wa:#25d366;
  --wa-ink:#07270f;

  --shadow-sm:0 2px 10px rgba(6,10,8,.07);
  --shadow:0 12px 32px rgba(6,10,8,.11);
  --shadow-lg:0 30px 70px rgba(4,8,7,.45);
  --shadow-dark-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-dark:0 16px 40px rgba(0,0,0,.45);

  --radius:20px;
  --radius-sm:13px;
  --radius-pill:999px;
  --maxw:1180px;
  --pad:20px;
}

/* --- 2. Reset & taban ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:78px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);
  color:var(--ink-text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ line-height:1.14; margin:0; font-weight:800; letter-spacing:-.025em; }
p{ margin:0; }
:focus-visible{ outline:3px solid var(--flame); outline-offset:2px; border-radius:4px; }

/* --- 3. Yerleşim yardımcıları ----------------------------------------------- */
.kap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.bolum{ padding-block:clamp(58px,9vw,108px); position:relative; }
.bolum-dar{ max-width:800px; margin-inline:auto; }
.merkez{ text-align:center; }
.zebra{ background:var(--paper-2); }
.band-dark{ background:var(--ink); color:var(--on-dark); }
.band-dark p{ color:var(--on-dark-muted); }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:.78rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--flame-ink); margin-bottom:16px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; opacity:.55; border-radius:2px; }
.band-dark .eyebrow{ color:var(--pitch-bright); }
.baslik{ font-size:clamp(1.75rem,4.6vw,2.8rem); margin-bottom:16px; }
.band-dark .baslik{ color:var(--on-dark); }
.alt-metin{ font-size:clamp(1rem,2vw,1.16rem); color:var(--ink-text-muted); max-width:62ch; }
.band-dark .alt-metin{ color:var(--on-dark-muted); }
.merkez .alt-metin{ margin-inline:auto; }
.vurgu{ color:var(--flame); }

/* Grid/flex öğesi olan metin sütunları — CSS Grid'in varsayılan min-width:auto
   davranışı, içindeki en geniş öğeye göre track'i şişirip sayfayı yatayda
   taşırabilir (bkz. 320px "İndir" bölümü ölçümü). Savunma amaçlı sıfırlanır. */
.basrol-yazi,.izin-yazi,.guven-metin,.indir-metin,.indir-aksiyon,.video-yazi,.fk{ min-width:0; }

/* --- 4. Butonlar & rozetler -------------------------------------------------*/
.btn{
  --btn-bg:var(--paper); --btn-fg:var(--ink-text); --btn-bd:var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:var(--radius-pill); border:1.5px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg); font-weight:750; font-size:1rem;
  line-height:1.25; transition:transform .13s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  text-align:center;
  /* ⚠️ Bilerek white-space:nowrap YOK (site1'in aksine): dar ekranda (320px)
     "APK İndir (Android)" / "WhatsApp'tan Başla" gibi uzun etiketler nowrap
     olsaydı CSS Grid'in "min-width:auto" davranışıyla kartı/gridi şişirip
     sayfayı yatayda taşırıyordu (320px'te ölçüldü: 348px gövde). Kısa rozet/
     sekme metinleri zaten tek satıra sığacak kadar kısa; blok butonlar
     gerekirse iki satıra sarar — bu, yatay taşmadan daha güvenli. */
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }
.btn .ikon{ width:20px; height:20px; flex:none; }
.btn-ana{ --btn-bg:var(--flame); --btn-fg:var(--ink-on-flame); --btn-bd:var(--flame);
  box-shadow:0 8px 22px rgba(255,90,31,.32); font-weight:800; }
.btn-ana:hover{ box-shadow:0 12px 28px rgba(255,90,31,.4); }
.btn-wa{ --btn-bg:var(--wa); --btn-fg:var(--wa-ink); --btn-bd:var(--wa);
  box-shadow:0 8px 22px rgba(37,211,102,.3); font-weight:800; }
.btn-hayalet{ --btn-bg:transparent; }
.band-dark .btn-hayalet{ --btn-fg:var(--on-dark); --btn-bd:var(--ink-line); }
.band-dark .btn-hayalet:hover{ --btn-bd:var(--on-dark-soft); }
.btn-buyuk{ padding:17px 32px; font-size:1.08rem; }
.btn-blok{ display:flex; width:100%; }
.btn-mini{ padding:10px 17px; font-size:.9rem; }

.rozet{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px;
  border-radius:var(--radius-pill); font-size:.78rem; font-weight:800;
  background:var(--flame-soft); color:var(--flame-ink); border:1px solid rgba(255,90,31,.22);
  letter-spacing:.02em;
}
.rozet-yesil{ background:var(--pitch-soft); color:var(--pitch); border-color:rgba(14,138,75,.24); }
.band-dark .rozet-yesil{ background:var(--pitch-soft-dark); color:var(--pitch-bright); border-color:rgba(53,224,143,.3); }
.pip{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.ikon{ width:20px; height:20px; flex:none; vertical-align:middle; }
.rozet .ikon{ width:14px; height:14px; }

/* --- 5. Üst çubuk (sticky) — 2 kademeli, basit ve dayanıklı -----------------
   ≥1040px: logo + tam nav + Panele Giriş + Ücretsiz Dene.
   <1040px: logo + Ücretsiz Dene (küçük) + hamburger — nav ve Panele Giriş
   hamburger menüsüne taşınır. CTA hiçbir genişlikte kaybolmaz. */
.ust{
  position:sticky; top:0; z-index:60;
  background:rgba(10,13,15,.86);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--ink-line);
  color:var(--on-dark);
}
.ust-ic{ display:flex; align-items:center; gap:16px; height:66px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.14rem;
  letter-spacing:-.02em; flex:none; white-space:nowrap; color:var(--on-dark); }
.logo-mark{
  width:35px; height:35px; border-radius:10px; flex:none;
  background:linear-gradient(150deg,var(--flame),#c73f0f);
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:1.08rem;
  box-shadow:0 3px 12px rgba(255,90,31,.4);
}
.logo .p2{ color:var(--flame); font-weight:700; }
/* Dar telefonlarda (≤459px) marka yazısı gizlenir, sadece "Ş" rozeti kalır —
   logo + "10 Gün Ücretsiz Dene" + hamburger 320px genişlikte TAŞMASIN diye
   (ölçüldü: yazı açıkken 320px'te ~30-40px pay kalıyor, güvenli tarafta kal). */
@media (max-width:459px){ .logo-metin{ display:none; } }

.ust-nav{ display:none; margin-left:10px; gap:3px; }
.ust-nav a{ padding:9px 14px; border-radius:9px; font-size:.94rem; font-weight:650;
  color:var(--on-dark-muted); white-space:nowrap; transition:color .15s ease, background .15s ease; }
.ust-nav a:hover{ color:var(--on-dark); background:rgba(255,255,255,.06); }

.ust-sag{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.ust-sag .btn{ min-height:42px; }
.ust-giris{ display:none; }
.btn-giris{ --btn-bg:transparent; --btn-fg:var(--on-dark); --btn-bd:var(--ink-line); }
.btn-giris .ikon{ width:16px; height:16px; color:var(--on-dark-soft); }
.menu-btn{
  width:42px; height:42px; border-radius:11px; border:1.5px solid var(--ink-line);
  background:transparent; color:var(--on-dark); display:grid; place-items:center; flex:none;
}
.menu-btn .ikon{ width:20px; height:20px; }

.mobil-menu{ display:none; border-top:1px solid var(--ink-line); background:var(--ink-2);
  box-shadow:var(--shadow-dark); max-height:calc(100dvh - 66px); overflow-y:auto; }
.mobil-menu.acik{ display:block; }
.mobil-menu a{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:15px 20px; font-weight:650; font-size:1rem; text-align:left;
  border:0; border-top:1px solid var(--ink-line); background:transparent; color:var(--on-dark);
}
.mobil-menu > :first-child{ border-top:0; }
.mobil-menu a:hover{ background:rgba(255,255,255,.05); }
.mobil-menu .ikon{ width:18px; height:18px; color:var(--on-dark-soft); flex:none; }
.mobil-menu .mm-giris{ background:rgba(255,255,255,.04); font-weight:750; }
.mobil-menu .mm-giris .ikon{ color:var(--flame); }
.mm-giris .mm-not{ margin-left:auto; font-size:.76rem; font-weight:700; color:var(--on-dark-soft); }
.mobil-menu .mm-wa .ikon{ color:var(--wa); }

@media (min-width:1040px){
  .ust-nav{ display:flex; }
  .ust-giris{ display:inline-flex; }
  .menu-btn{ display:none; }
  .mobil-menu, .mobil-menu.acik{ display:none; }
}

/* --- 6. Hero ----------------------------------------------------------------*/
.hero{ position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden;
  padding-top:clamp(44px,7vw,72px); padding-bottom:0; }
.hero::before{
  content:""; position:absolute; inset:-15% -10% auto -10%; height:640px; z-index:0;
  background:
    radial-gradient(50% 55% at 82% 8%, rgba(255,90,31,.22), transparent 70%),
    radial-gradient(42% 48% at 6% 0%, rgba(53,224,143,.14), transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.hero-ic{ position:relative; z-index:1; display:grid; gap:clamp(38px,5vw,56px); align-items:center;
  padding-bottom:clamp(40px,6vw,64px); }
.hero h1{ font-size:clamp(2.1rem,6.4vw,3.7rem); margin:18px 0 18px; }
.hero h1 .vurgu{ color:var(--flame); }
.hero-lead{ font-size:clamp(1.05rem,2.3vw,1.3rem); color:var(--on-dark-muted); max-width:44ch; }
.hero-ctalar{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-guven{ display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:24px; font-size:.9rem; color:var(--on-dark-soft); }
.hero-guven span{ display:inline-flex; align-items:center; gap:7px; }
.hero-guven .ikon{ width:17px; height:17px; color:var(--pitch-bright); flex:none; }

@media (min-width:960px){ .hero-ic{ grid-template-columns:1.08fr .92fr; } }

/* Telefon maketi */
.telefon-sar{ display:flex; justify-content:center; position:relative; }
.telefon{
  width:min(300px,84vw); border-radius:40px; padding:13px;
  background:linear-gradient(160deg,#252b26,#0c0f0d);
  box-shadow:var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.05);
  position:relative;
}
.telefon::before{
  content:""; position:absolute; top:21px; left:50%; transform:translateX(-50%);
  width:108px; height:7px; border-radius:99px; background:rgba(255,255,255,.14); z-index:3;
}
.telefon-ekran{ border-radius:28px; overflow:hidden; background:#0b0f0d; min-height:520px; }
.maket-etiket{
  position:absolute; bottom:-15px; left:50%; transform:translateX(-50%);
  background:var(--ink-3); border:1px dashed var(--ink-line); color:var(--on-dark-soft);
  font-size:.72rem; font-weight:700; padding:7px 13px; border-radius:99px; white-space:nowrap;
  box-shadow:var(--shadow-dark-sm);
}

/* Skor şeridi — hero altında, koyu bandın dibinde köprü çizgisi */
.skor-serit{ position:relative; z-index:1; border-top:1px solid var(--ink-line); background:var(--ink-2); }
.skor-ic{ display:grid; grid-template-columns:repeat(2,1fr); }
.skor-madde{ padding:20px var(--pad); text-align:center; border-right:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line); }
.skor-madde:nth-child(2n){ border-right:0; }
.skor-rakam{ font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:900; color:var(--on-dark);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.skor-rakam .vurgu{ color:var(--flame); }
.skor-etiket{ font-size:.72rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase;
  color:var(--on-dark-soft); margin-top:4px; }
@media (min-width:760px){
  .skor-ic{ grid-template-columns:repeat(4,1fr); }
  .skor-madde{ border-bottom:0; }
  .skor-madde:nth-child(2n){ border-right:1px solid var(--ink-line); }
  .skor-madde:last-child{ border-right:0; }
}

/* --- 7. Sorun / dert bloğu (numaralı, editoryal) ---------------------------*/
.dert{ display:grid; gap:18px; }
.dert-kart{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.dert-kart .no{
  position:absolute; right:14px; top:6px; font-size:3.4rem; font-weight:900; line-height:1;
  color:var(--paper-3); z-index:0; user-select:none;
}
.dert-kart .ikon-kutu{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--flame-soft); color:var(--flame-ink); position:relative; z-index:1; margin-bottom:14px; }
.dert-kart .ikon-kutu svg{ width:22px; height:22px; }
.dert-kart h3{ font-size:1.06rem; margin-bottom:6px; position:relative; z-index:1; }
.dert-kart p{ color:var(--ink-text-muted); font-size:.96rem; position:relative; z-index:1; }
.dert-cozum{ margin-top:30px; text-align:center; font-size:clamp(1.2rem,2.6vw,1.55rem); font-weight:800; }
@media (min-width:760px){ .dert{ grid-template-columns:1fr 1fr; } }

/* --- 8. Başrol — Arayan Kartı ------------------------------------------------*/
.basrol{ display:grid; gap:32px; align-items:center; }
.basrol-yazi ul{ margin:18px 0 0; padding:0; display:grid; gap:10px; list-style:none; }
.basrol-yazi li{ display:flex; gap:10px; align-items:flex-start; font-size:1rem; }
.basrol-yazi li svg{ width:21px; height:21px; color:var(--pitch); flex:none; margin-top:2px; }
.basrol-yazi p.lead{ font-size:1.08rem; color:var(--ink-text-muted); margin-top:14px; }
.bilgi-kutu{
  margin-top:20px; display:flex; gap:12px; align-items:flex-start; padding:15px 17px;
  background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
}
.bilgi-kutu svg{ width:20px; height:20px; color:var(--flame-ink); flex:none; margin-top:1px; }
.bilgi-kutu p{ font-size:.88rem; color:var(--ink-text-muted); }
.bilgi-kutu b{ color:var(--ink-text); }
@media (min-width:960px){ .basrol{ grid-template-columns:1fr 1fr; } }

/* --- 9. Bento özellik grid ---------------------------------------------------*/
.bento{ display:grid; gap:16px; grid-template-columns:1fr; }
.oz-kart{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.oz-kart::before{ content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--flame),var(--pitch)); opacity:0; transition:opacity .2s ease; }
.oz-kart:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.oz-kart:hover::before{ opacity:1; }
.oz-ikon{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:15px;
  background:var(--ink); color:var(--flame); }
.oz-ikon svg{ width:24px; height:24px; }
.oz-kart h3{ font-size:1.12rem; margin-bottom:7px; }
.oz-kart p{ color:var(--ink-text-muted); font-size:.96rem; }
.oz-kart .mini-not{ display:inline-block; margin-top:10px; font-size:.78rem; font-weight:800;
  color:var(--pitch); background:var(--pitch-soft); padding:4px 10px; border-radius:99px; }
@media (min-width:680px){ .bento{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .bento{ grid-template-columns:1fr 1fr 1fr; } }

/* --- 10. Nasıl çalışır — koyu bant, maç dakikası motifi --------------------*/
.zaman-hat{ display:grid; gap:0; counter-reset:z; position:relative; }
.zaman-adim{ position:relative; padding:26px 8px 26px 62px; border-top:1px solid var(--ink-line); }
.zaman-adim:first-child{ border-top:0; }
.zaman-adim::before{
  counter-increment:z; content:counter(z) "'"; position:absolute; left:0; top:26px;
  width:42px; height:42px; border-radius:50%; background:var(--ink-3); border:1.5px solid var(--flame);
  color:var(--flame); display:grid; place-items:center; font-weight:900; font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.zaman-adim h3{ font-size:1.1rem; margin-bottom:5px; color:var(--on-dark); }
.zaman-adim p{ color:var(--on-dark-muted); font-size:.96rem; max-width:52ch; }
@media (min-width:860px){
  .zaman-hat{ grid-template-columns:1fr 1fr; column-gap:40px; }
  .zaman-adim{ border-top:0; border-bottom:1px solid var(--ink-line); }
  .zaman-adim:nth-last-child(-n+2){ border-bottom:0; }
}

/* --- 11. Ürün turu — sekmeli galeri (saf CSS, JS yok) ------------------------
   Yapı: .tur-wrap > .tur-sekme (radio+label çiftleri, position:relative) ve
   kardeşi .tur-panels. Radio ile paneli eşlemek için :has() kullanılır —
   ':checked + label' aynı .tur-sekme içinde bitişik olduğu için de çalışır.
   Edge/Chrome/Firefox/Safari 2023+ :has() destekler (bu proje 2026 derlemesi). */
.tur-sekme{ position:relative; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:32px; }
.tur-radio{ position:absolute; opacity:0; pointer-events:none; }
.tur-sekme label{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line-strong); font-weight:750; font-size:.95rem; color:var(--ink-text-muted);
  cursor:pointer; transition:all .15s ease; background:var(--paper);
}
.tur-radio:checked + label{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }
.tur-panel{ display:none; }
.tur-sekme:has(#tur-telefon:checked) ~ .tur-panels #panel-telefon,
.tur-sekme:has(#tur-web:checked) ~ .tur-panels #panel-web,
.tur-sekme:has(#tur-yonetim:checked) ~ .tur-panels #panel-yonetim{ display:block; }
/* :has() olmayan çok eski tarayıcı — üç panel de görünür kalsın (tamamen gizlenmesin) */
@supports not selector(:has(a)){ .tur-panel{ display:block; margin-bottom:26px; } }

/* --- 12. Neden Play'de yok — bölünmüş açıklama bloğu ------------------------*/
.izin-blok{ display:grid; gap:32px; align-items:center; }
.izin-yazi ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.izin-yazi li{ display:flex; gap:10px; align-items:flex-start; font-size:.97rem; color:var(--ink-text-muted); }
.izin-yazi li svg{ width:19px; height:19px; color:var(--pitch); flex:none; margin-top:2px; }
.izin-gorsel{ display:flex; justify-content:center; }
.izin-gorsel .telefon{ width:min(260px,78vw); }
.izin-gorsel .telefon-ekran{ min-height:0; }
@media (min-width:920px){ .izin-blok{ grid-template-columns:1.15fr .85fr; } }

/* --- 13. Güven / hikaye — koyu bant ------------------------------------------*/
.guven{ display:grid; gap:30px; align-items:center; }
.guven-metin p{ color:var(--on-dark-muted); font-size:1.05rem; margin-bottom:12px; }
.guven-metin .imza{ font-style:italic; color:var(--on-dark); border-left:3px solid var(--flame);
  padding-left:15px; margin-top:18px; font-size:1.06rem; }
.guven-rozetler{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
@media (min-width:880px){ .guven{ grid-template-columns:1.1fr .9fr; } }

/* --- 14. Video yakında -------------------------------------------------------*/
.video-blok{
  display:grid; gap:26px; align-items:center; background:var(--paper); border:1px solid var(--line);
  border-radius:24px; padding:clamp(24px,4vw,40px); box-shadow:var(--shadow-sm);
}
.video-oynatici{
  position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(60% 80% at 30% 20%, rgba(255,90,31,.5), transparent 60%),
    radial-gradient(55% 70% at 80% 85%, rgba(14,138,75,.55), transparent 60%),
    linear-gradient(150deg,#171d1a,#0a0d0c);
  display:grid; place-items:center; box-shadow:var(--shadow-dark);
}
.video-oynatici .oynat-dugme{
  width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.4); display:grid; place-items:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.video-oynatici .oynat-dugme svg{ width:28px; height:28px; color:#fff; margin-left:3px; }
.video-serit{
  position:absolute; top:16px; right:-38px; transform:rotate(32deg); background:var(--flame);
  color:var(--ink-on-flame); font-weight:900; font-size:.72rem; letter-spacing:.08em; padding:6px 46px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.video-yazi h3{ font-size:1.3rem; margin-bottom:10px; }
.video-yazi p{ color:var(--ink-text-muted); font-size:.98rem; }
@media (min-width:860px){ .video-blok{ grid-template-columns:1.1fr 1fr; } }

/* --- 15. 3 adım ---------------------------------------------------------------*/
.adimlar{ display:grid; gap:16px; counter-reset:a; }
.adim{ text-align:center; padding:26px 22px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); position:relative; }
.adim .n{ width:50px; height:50px; margin:0 auto 15px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--flame); font-weight:900; font-size:1.2rem; }
.adim h3{ font-size:1.1rem; margin-bottom:7px; }
.adim p{ color:var(--ink-text-muted); font-size:.95rem; }
@media (min-width:760px){ .adimlar{ grid-template-columns:repeat(3,1fr); } }

/* --- 16. Fiyat -----------------------------------------------------------------*/
.deger-kutu{
  max-width:680px; margin:0 auto 32px; display:flex; gap:14px; align-items:center; text-align:left;
  background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:18px 22px; box-shadow:var(--shadow-sm);
}
.deger-kutu .ic{ width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:var(--flame-soft); color:var(--flame-ink); }
.deger-kutu .ic svg{ width:23px; height:23px; }
.deger-kutu p{ margin:0; font-size:1rem; color:var(--ink-text-muted); }
.deger-kutu b{ color:var(--ink-text); }

.fiyat-toggle{ display:inline-flex; padding:5px; gap:4px; background:var(--paper);
  border:1px solid var(--line-strong); border-radius:var(--radius-pill); margin:6px auto 8px; }
.seg{ border:0; background:transparent; color:var(--ink-text-muted); font-weight:800; font-size:.95rem;
  padding:10px 20px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:8px;
  transition:background .18s ease,color .18s ease; }
.seg.aktif{ background:var(--ink); color:var(--on-dark); }
.seg .mini-rozet{ font-size:.66rem; font-weight:900; background:var(--pitch); color:#fff;
  padding:2px 7px; border-radius:99px; letter-spacing:.02em; }
.toggle-not{ font-size:.86rem; color:var(--ink-text-soft); margin-top:4px; }

.fiyat-kartlar{ display:grid; gap:20px; margin-top:30px; align-items:start; }
.fk{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; position:relative;
}
/* ⚠️ Bilinçli tercih: iki paketten birine "ÖNERİLEN/POPÜLER" rozeti KOYULMADI —
   hangi paketin daha çok tercih edildiğine dair gerçek veri yok; uydurmak
   yerine iki kartı eşit sundum (metindeki "ikisi de aynı özelliklere sahip"
   ifadesiyle de tutarlı). Gerçek satış verisi gelirse bu kural buraya eklenip
   HTML'de ilgili .fk'ye class="fk-vurgu" verilerek kolayca açılabilir: */
.fk-vurgu{ border:1.5px solid var(--flame); box-shadow:var(--shadow); }
.fk-tur{ font-size:1.25rem; font-weight:900; }
.fk-hedef{ color:var(--ink-text-soft); font-size:.9rem; margin-top:4px; min-height:2.2em; }
.fk-fiyat{ margin:20px 0 4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.fk-rakam{ font-size:2.7rem; font-weight:900; letter-spacing:-.03em; line-height:1; }
.fk-devre{ color:var(--ink-text-muted); font-weight:700; font-size:1.05rem; }
.fk-gunluk{ font-size:.86rem; color:var(--ink-text-soft); min-height:1.3em; }
.fk-tasarruf{ font-size:.86rem; color:var(--pitch); font-weight:800; min-height:1.3em; }
.fk-ozellikler{ list-style:none; margin:20px 0; padding:0; display:grid; gap:11px; flex:1; }
.fk-ozellikler li{ display:flex; gap:10px; align-items:flex-start; font-size:.96rem; }
.fk-ozellikler svg{ width:19px; height:19px; color:var(--pitch); flex:none; margin-top:2px; }
.fk-save-rozet{ align-self:flex-start; margin-bottom:6px; }
.fiyat-guven{ text-align:center; margin-top:28px; color:var(--ink-text-muted); font-size:.94rem;
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; }
.fiyat-guven span{ display:inline-flex; align-items:center; gap:7px; }
.fiyat-guven svg{ width:17px; height:17px; color:var(--pitch); }

.fiyat[data-devre="ay"] .g-yil{ display:none; }
.fiyat[data-devre="yil"] .g-ay{ display:none; }
@media (min-width:820px){ .fiyat-kartlar{ grid-template-columns:1fr 1fr; max-width:840px; margin-inline:auto; } }

.kimin-icin{
  max-width:840px; margin:34px auto 0; display:grid; gap:14px; text-align:left;
}
.ki-satir{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--paper); border:1px solid var(--line); font-size:.94rem; color:var(--ink-text-muted); }
.ki-satir svg{ width:20px; height:20px; flex:none; margin-top:1px; }
.ki-evet svg{ color:var(--pitch); }
.ki-hayir svg{ color:var(--ink-text-soft); }
@media (min-width:700px){ .kimin-icin{ grid-template-columns:1fr 1fr; } }

/* --- 17. Deneme CTA ------------------------------------------------------------*/
.deneme-kutu{ text-align:center; }
.deneme-kutu h2{ font-size:clamp(1.6rem,3.8vw,2.5rem); margin-bottom:14px; color:var(--on-dark); }
.deneme-kutu .buyuk-gun{ color:var(--flame); }
.deneme-kutu p{ color:var(--on-dark-muted); font-size:1.08rem; max-width:54ch; margin:0 auto 8px; }
.deneme-madde{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 22px; margin:26px 0 30px; }
.deneme-madde span{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.98rem; color:var(--on-dark); }
.deneme-madde svg{ width:20px; height:20px; color:var(--pitch-bright); flex:none; }

/* --- 18. SSS ---------------------------------------------------------------------*/
.sss{ display:grid; gap:12px; max-width:820px; margin-inline:auto; }
.sss details{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; transition:border-color .2s ease; }
.sss details[open]{ border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.sss summary{ padding:19px 22px; font-weight:750; font-size:1.02rem; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
.sss summary::-webkit-details-marker{ display:none; }
.sss summary .arti{ width:22px; height:22px; flex:none; color:var(--flame); transition:transform .2s ease; }
.sss details[open] summary .arti{ transform:rotate(45deg); }
.sss .cevap{ padding:0 22px 21px; color:var(--ink-text-muted); font-size:.98rem; line-height:1.65; }
.sss .cevap b{ color:var(--ink-text); }

/* --- 19. İndirme -------------------------------------------------------------------*/
.indir-kutu{ display:grid; gap:26px; align-items:center; }
.indir-metin h2{ font-size:clamp(1.5rem,3.4vw,2.15rem); margin-bottom:12px; }
.indir-metin p{ color:var(--ink-text-muted); font-size:1.02rem; margin-bottom:10px; }
.indir-notlar{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px; }
.indir-notlar li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--ink-text-muted); }
.indir-notlar svg{ width:18px; height:18px; color:var(--pitch); flex:none; margin-top:3px; }
.indir-aksiyon{ text-align:center; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); }
.indir-aksiyon .surum{ font-size:.85rem; color:var(--ink-text-soft); margin-top:12px; }
@media (min-width:820px){ .indir-kutu{ grid-template-columns:1.1fr .9fr; } }

/* --- 20. Son CTA ---------------------------------------------------------------------*/
.son-cta{ text-align:center; }
.son-cta h2{ font-size:clamp(1.75rem,4vw,2.7rem); margin-bottom:14px; color:var(--on-dark); }
.son-cta p{ color:var(--on-dark-muted); font-size:1.1rem; max-width:50ch; margin:0 auto 28px; }
.son-cta .hero-ctalar{ justify-content:center; }

/* --- 21. Footer -----------------------------------------------------------------------*/
.foot{ background:var(--ink); color:var(--on-dark); border-top:1px solid var(--ink-line); padding-block:48px 30px; }
.foot-ic{ display:grid; gap:30px; }
.foot-marka .logo{ margin-bottom:12px; }
.foot-marka p{ color:var(--on-dark-muted); font-size:.94rem; max-width:38ch; }
.foot-kol h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--on-dark-soft); margin-bottom:13px; }
.foot-kol a, .foot-kol span{ display:block; padding:5px 0; color:var(--on-dark-muted); font-size:.95rem; }
.foot-kol a:hover{ color:var(--on-dark); }
.foot-kol .yakinda{ color:var(--on-dark-soft); font-size:.9rem; }
.foot-kol .yakinda em{ font-style:normal; opacity:.7; }
.foot-alt{ border-top:1px solid var(--ink-line); margin-top:32px; padding-top:20px;
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center;
  color:var(--on-dark-soft); font-size:.86rem; }
@media (min-width:760px){ .foot-ic{ grid-template-columns:1.6fr 1fr 1fr; } }

/* --- 22. Kayan galeri (ekran görüntüsü karuseli) ---------------------------------------*/
.galeri{ position:relative; width:100%; max-width:var(--g-max,314px); margin-inline:auto;
  aspect-ratio:var(--g-oran, 72/164); border-radius:26px; overflow:hidden;
  border:1px solid var(--ink-line); box-shadow:var(--shadow-lg); background:#0a0d0c; }
.galeri-ray{ display:flex; height:100%; will-change:transform;
  transition:transform .55s cubic-bezier(.45,.02,.2,1); }
@media (prefers-reduced-motion:reduce){ .galeri-ray{ transition:none; } }
.galeri-ray img{ width:100%; height:100%; flex:0 0 100%; object-fit:cover; object-position:top center; }
.galeri-nokta{ position:absolute; left:0; right:0; bottom:11px; display:flex; gap:6px; justify-content:center; z-index:2; }
.galeri-nokta b{ width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.4);
  cursor:pointer; transition:width .25s ease, background .25s ease; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.galeri-nokta b.aktif{ width:20px; background:var(--flame); }
.galeri-ok{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(8,12,10,.55); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:2;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .2s ease;
  font-size:22px; line-height:0; padding-bottom:3px; }
.galeri:hover .galeri-ok, .galeri:focus-within .galeri-ok{ opacity:1; }
.galeri-onceki{ left:8px; } .galeri-sonraki{ right:8px; }
.galeri-web{ --g-oran:1915/935; --g-max:720px; border-radius:16px; }
.galeri-web .galeri-ray img{ object-position:top left; }
.galeri-foto{ --g-oran:16/10; --g-max:620px; border-radius:18px; }
.galeri-foto .galeri-ray img{ object-position:center center; }
.galeri-sar{ display:flex; flex-direction:column; gap:12px; }
.galeri-alt{ text-align:center; font-size:.82rem; color:var(--ink-text-soft); font-weight:650; }
.band-dark .galeri-alt{ color:var(--on-dark-soft); }

/* --- 23. Yardımcılar / erişilebilirlik --------------------------------------------------*/
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-999px; top:0; z-index:100; background:var(--flame);
  color:var(--ink-on-flame); padding:10px 16px; border-radius:0 0 8px 0; font-weight:800; }
.skip:focus{ left:0; }