/* ============================================================================
   ŞAMPİYON PANEL — Tanıtım sitesi stil sistemi
   Saf CSS · harici font/CDN YOK · sistem font yığını · mobil öncelikli
   Tema: açık (varsayılan) + koyu imza-altın (prefers-color-scheme + elle geçiş)
   Marka rengi: altın #ffc928 (panel imzası) — koyu zeminde metin, açık zeminde dolgu
   ========================================================================== */

/* --- 1. Tema jetonları ---------------------------------------------------- */
:root{
  /* Açık tema (varsayılan) */
  --bg:#f5f6f8;
  --bg-alt:#eaedf1;
  --surface:#ffffff;
  --surface-2:#f1f3f6;
  --border:#e2e6ec;
  --border-strong:#d2d8e0;
  --text:#151b24;
  --text-muted:#5a6673;
  --text-soft:#5f6b78;    /* açık zeminde ~4.6:1 kontrast (WCAG AA); koyu tema jetonu ayrı */
  --gold:#a97400;         /* açık zeminde okunur altın (metin/ikon) */
  --gold-bright:#ffc928;  /* imza altın — dolgu/rozet (üstüne koyu metin) */
  --gold-soft:#fff5d6;    /* altın yumuşak zemin */
  --ink-on-gold:#1a1300;  /* altın dolgu üstü metin */
  --green:#178a43;
  --green-soft:#e4f4ea;
  --red:#cf2350;
  --red-soft:#fce7ee;
  --blue:#1466b8;
  --wa:#1aa64d;           /* WhatsApp yeşili (açık temada koyulaştırılmış) */
  --wa-ink:#ffffff;
  --shadow-sm:0 2px 8px rgba(20,30,45,.06);
  --shadow:0 8px 28px rgba(20,30,45,.09);
  --shadow-lg:0 24px 60px rgba(20,30,45,.16);
  --radius:18px;
  --radius-sm:11px;
  --radius-pill:999px;
  --maxw:1140px;
  --pad:20px;
  --sofa:color-mix(in srgb, var(--gold-bright) 12%, transparent);
}

/* Koyu tema jetonları — imza (panelle aynı): #0d1117 zemin + altın vurgu */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1117; --bg-alt:#080b10; --surface:#161b22; --surface-2:#1b222c;
    --border:#2a323d; --border-strong:#3a4450;
    --text:#e6edf3; --text-muted:#9fb6c9; --text-soft:#7d8b9a;
    --gold:#ffc928; --gold-bright:#ffc928; --gold-soft:#241d05; --ink-on-gold:#1a1300;
    --green:#2ecc71; --green-soft:#0e2c1d; --red:#ff5c85; --red-soft:#2a0f18;
    --blue:#4aa3ff; --wa:#25d366; --wa-ink:#052012;
    --shadow-sm:0 2px 10px rgba(0,0,0,.4);
    --shadow:0 10px 34px rgba(0,0,0,.5);
    --shadow-lg:0 28px 70px rgba(0,0,0,.65);
  }
}
/* Elle geçiş (kök üstündeki data-theme kazanır) */
:root[data-theme="dark"]{
  --bg:#0d1117; --bg-alt:#080b10; --surface:#161b22; --surface-2:#1b222c;
  --border:#2a323d; --border-strong:#3a4450;
  --text:#e6edf3; --text-muted:#9fb6c9; --text-soft:#7d8b9a;
  --gold:#ffc928; --gold-bright:#ffc928; --gold-soft:#241d05; --ink-on-gold:#1a1300;
  --green:#2ecc71; --green-soft:#0e2c1d; --red:#ff5c85; --red-soft:#2a0f18;
  --blue:#4aa3ff; --wa:#25d366; --wa-ink:#052012;
  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --shadow-lg:0 28px 70px rgba(0,0,0,.65);
}
:root[data-theme="light"]{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }

/* --- 2. Reset & taban ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* scroll-padding-top: yapışkan üst çubuk (64px) bölüm başlığını örtmesin —
   nav/mobil menü linkleri hedefin 8px altına değil, tam üstüne insin. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
@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(--bg);
  color:var(--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.18; margin:0; font-weight:800; letter-spacing:-.02em; }
p{ margin:0; }
:focus-visible{ outline:3px solid var(--gold-bright); 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(56px,9vw,104px); }
.bolum-dar{ max-width:820px; margin-inline:auto; }
.merkez{ text-align:center; }
.zebra{ background:var(--bg-alt); }
.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.baslik{ font-size:clamp(1.7rem,4.4vw,2.7rem); margin-bottom:16px; }
.alt-metin{ font-size:clamp(1rem,2vw,1.18rem); color:var(--text-muted); max-width:60ch; }
.merkez .alt-metin{ margin-inline:auto; }
.ustu-cizgi{ height:1px; background:var(--border); border:0; margin:0; }

/* --- 4. Butonlar & rozetler ----------------------------------------------- */
.btn{
  --btn-bg:var(--surface); --btn-fg:var(--text); --btn-bd:var(--border-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; 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; transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap; text-align:center;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }
.btn .ikon{ width:20px; height:20px; flex:none; }
.btn-altin{ --btn-bg:var(--gold-bright); --btn-fg:var(--ink-on-gold); --btn-bd:var(--gold-bright);
  box-shadow:0 6px 20px color-mix(in srgb,var(--gold-bright) 40%,transparent); }
.btn-wa{ --btn-bg:var(--wa); --btn-fg:var(--wa-ink); --btn-bd:var(--wa);
  box-shadow:0 6px 20px color-mix(in srgb,var(--wa) 34%,transparent); }
.btn-hayalet{ --btn-bg:transparent; }
.btn-buyuk{ padding:17px 30px; font-size:1.08rem; }
.btn-blok{ display:flex; width:100%; }
.btn-mini{ padding:10px 16px; font-size:.9rem; }

.rozet{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border-radius:var(--radius-pill); font-size:.78rem; font-weight:800;
  background:var(--gold-soft); color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);
  letter-spacing:.02em;
}
.rozet-yesil{ background:var(--green-soft); color:var(--green); border-color:color-mix(in srgb,var(--green) 30%,transparent); }
.pip{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
/* İkon taban ölçüsü — bağlam kuralları bunu ezer (daha yüksek özgüllük) */
.ikon{ width:20px; height:20px; flex:none; vertical-align:middle; }
.rozet .ikon{ width:15px; height:15px; }

/* --- 5. Üst çubuk (sticky) ------------------------------------------------
   KADEMELİ DARALMA — eşikler tahmin değil ÖLÇÜM (Edge/CDP, Segoe UI, dpr 1).
   Doğal genişlikler:  logo 179.8 · nav(5 link) 387.5 · tema 42 · hamburger 42
                       Panele Giriş 142.1 · Ücretsiz Dene 126.6 · .kap dolgusu 40

     Kademe A  ≥1060px   logo + 5 link + tema + giriş + dene       (gereken 976 · pay 84)
     Kademe B   ≥700px   logo + tema + giriş + dene + ☰            (gereken 616 · pay 84)
     Kademe C   ≥460px   logo + dene + ☰                           (gereken 413 · pay 47)
     Kademe D   <460px   Ş işareti + dene + ☰                      (gereken 268 · pay 52@320)

   KATLANMA SIRASI (iş önceliği): "Ücretsiz Dene" HİÇBİR ekranda kaybolmaz.
   Önce bölüm linkleri → sonra tema+giriş → en son logo yazısı hamburgere düşer.
   ⚠️ Eşikleri düşürmeden önce ölç: 900px'te iki buton + 5 link 108px TAŞIYOR.
   Not: ölçüm Windows/Segoe UI ile yapıldı; Android/Roboto biraz DAR olduğundan
   telefonda pay daha da açılır (eşikler bu yönde güvenli tarafta).
-------------------------------------------------------------------------- */
.ust{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border);
}
.ust-ic{ display:flex; align-items:center; gap:16px; height:64px; }
/* flex:none + nowrap → marka baskı altında iki satıra sarıp çubuğu bozamaz;
   yerleşim garantisi yukarıdaki ölçülmüş eşiklerden gelir. */
.logo{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.12rem;
  letter-spacing:-.02em; flex:none; white-space:nowrap; }
.logo-mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--gold-bright),#e6a700);
  display:grid; place-items:center; color:#1a1300; font-weight:900; font-size:1.05rem;
  box-shadow:0 3px 10px color-mix(in srgb,var(--gold-bright) 45%,transparent);
}
.logo b{ color:var(--text); }
.logo .p2{ color:var(--gold); }
/* Header markası: y07 gömülü kalkan SVG (eski "Ş" kutusunun yerine). Yükseklik header'a
   göre sabit; genişlik oranla. Hafif altın parıltı eski kutunun gölgesini taklit eder.
   ≤459px'te .logo-metin gizli → kalkan tek başına marka kalır (dengeli). */
.logo-kalkan{ height:36px; width:auto; flex:none; display:block; line-height:0;
  filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--gold-bright) 42%,transparent)); }
.logo-kalkan svg{ height:100%; width:auto; display:block; }

.ust-nav{ display:none; margin-left:8px; gap:4px; }
.ust-nav a{ padding:9px 13px; border-radius:9px; font-size:.94rem; font-weight:650;
  color:var(--text-muted); white-space:nowrap; }
.ust-nav a:hover{ color:var(--text); background:var(--surface-2); }

.ust-sag{ margin-left:auto; display:flex; align-items:center; gap:9px; }
/* Üst çubuktaki buton ve düğmeler aynı 42px yüksekliğe otursun */
.ust-sag .btn{ min-height:42px; }
.tema-btn, .menu-btn{
  width:42px; height:42px; border-radius:11px; border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--text); display:grid; place-items:center; flex:none;
}
.tema-btn .ikon,.menu-btn .ikon{ width:20px; height:20px; }
/* Güneş/ay değişimi — hem üst çubuk hem mobil menü düğmesi (data-tema) için */
[data-tema] .ay{ display:none; }
:root[data-theme="dark"] [data-tema] .ay{ display:block; }
:root[data-theme="dark"] [data-tema] .gunes{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-tema] .ay{ display:block; }
  :root:not([data-theme="light"]) [data-tema] .gunes{ display:none; }
}

/* PANELE GİRİŞ — mevcut müşteri CTA'sı: YEŞİL + zarif nabız (patron isteği · taslak D).
   Işık temada beyaz metin, koyu temada koyu metin (parlak yeşil üstünde okunur — btn-wa
   ile aynı desen). Nabız yalnızca gölge halkasıyla (yer kaymaz); reduced-motion'da kapalı. */
.btn-giris{ --btn-bg:var(--green); --btn-fg:#fff; --btn-bd:var(--green);
  box-shadow:0 6px 18px color-mix(in srgb,var(--green) 30%,transparent);
  animation:girisNabiz 2.4s ease-in-out infinite; }
.btn-giris .ikon{ width:16px; height:16px; color:currentColor; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-giris{ --btn-fg:#04140a; } }
:root[data-theme="dark"] .btn-giris{ --btn-fg:#04140a; }
@keyframes girisNabiz{
  0%,100%{ box-shadow:0 6px 18px color-mix(in srgb,var(--green) 28%,transparent), 0 0 0 0 color-mix(in srgb,var(--green) 48%,transparent); }
  50%{ box-shadow:0 8px 22px color-mix(in srgb,var(--green) 42%,transparent), 0 0 0 8px color-mix(in srgb,var(--green) 0%,transparent); }
}
@media (prefers-reduced-motion:reduce){ .btn-giris{ animation:none; } }
.ust-giris{ display:none; }   /* B kademesinde açılır */
.tema-btn{ display:none; }    /* B kademesinde açılır (dar ekranda mobil menüde) */

/* Mobil menü paneli */
.mobil-menu{ display:none; border-top:1px solid var(--border); background:var(--surface);
  box-shadow:var(--shadow); max-height:calc(100dvh - 64px); overflow-y:auto; }
.mobil-menu.acik{ display:block; }
/* Ayırıcı ÜSTTE (border-top) — altta değil: ≥700px'te son iki satır gizlenince
   panelin dibinde öksüz bir çizgi kalmasın diye. */
.mobil-menu a, .mobil-menu .mm-tema{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:14px 20px; font-weight:650; font-size:1rem; text-align:left;
  border:0; border-top:1px solid var(--border); background:transparent; color:var(--text);
}
.mobil-menu > :first-child{ border-top:0; }
.mobil-menu a:hover, .mobil-menu .mm-tema:hover{ background:var(--surface-2); }
.mobil-menu .ikon{ width:18px; height:18px; color:var(--text-soft); flex:none; }
/* "Panele Giriş" satırı bölüm linklerinden ayrışsın — 0,2,0 özgüllük .mobil-menu a'yı ezer.
   YEŞİL vurgu + yumuşak zemin nabzı (üst çubuktaki CTA ile aynı dil · taslak D). */
.mobil-menu .mm-giris{ background:var(--green-soft); font-weight:750;
  animation:mmGirisNabiz 2.4s ease-in-out infinite; }
.mobil-menu .mm-giris .ikon{ color:var(--green); }
.mm-giris .mm-not{ margin-left:auto; font-size:.76rem; font-weight:800; color:var(--green); }
/* iOS/mobil açıklama satırı — mm-giris'e bitişik (üst çizgi yok), aynı yeşil zemin */
.mobil-menu .mm-giris-not{ margin:0; padding:9px 20px 13px; background:var(--green-soft);
  font-size:.82rem; color:var(--text-muted); }
.mobil-menu .mm-wa .ikon{ color:var(--wa); }
@keyframes mmGirisNabiz{ 0%,100%{ background:var(--green-soft); }
  50%{ background:color-mix(in srgb,var(--green) 20%,var(--surface)); } }
@media (prefers-reduced-motion:reduce){ .mobil-menu .mm-giris{ animation:none; } }

/* Kademe C — 460px'ten dar ekranda yalnız Ş işareti kalır (marka yazısı gizlenir) */
@media (max-width:459px){ .logo-metin{ display:none; } }

/* Kademe B — tablet: tema + Panele Giriş üst çubuğa çıkar */
@media (min-width:700px){
  .tema-btn{ display:grid; }
  .ust-giris{ display:inline-flex; }
  /* üstte varken menüde tekrar etmesin — 0,2,0 gerekli, yoksa .mobil-menu a (0,1,1) ezer */
  .mobil-menu .mm-giris, .mobil-menu .mm-giris-not, .mobil-menu .mm-tema{ display:none; }
}

/* Kademe A — masaüstü: bölüm linkleri açılır, hamburger kapanır */
@media (min-width:1060px){
  .ust-nav{ display:flex; }
  .menu-btn{ display:none; }
  /* .acik ile aynı özgüllük (0,2,0) + sonra geldiği için kazanır:
     telefonda menü açıkken yan çevrilirse masaüstünde açık kalmaz. */
  .mobil-menu, .mobil-menu.acik{ display:none; }
}

/* --- 6. Hero -------------------------------------------------------------- */
.hero{ position:relative; padding-top:clamp(36px,6vw,64px); padding-bottom:clamp(48px,7vw,88px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:520px; z-index:0;
  background:
    radial-gradient(60% 60% at 78% 18%, color-mix(in srgb,var(--gold-bright) 22%,transparent), transparent 70%),
    radial-gradient(46% 46% at 12% 4%, color-mix(in srgb,var(--green) 12%,transparent), transparent 70%);
  filter:blur(8px); pointer-events:none;
}
.hero-ic{ position:relative; z-index:1; display:grid; gap:clamp(34px,5vw,56px); align-items:center; }
.hero h1{ font-size:clamp(2.05rem,6.2vw,3.55rem); margin:16px 0 18px; }
.hero h1 .vurgu{ color:var(--gold); }
.hero-lead{ font-size:clamp(1.05rem,2.4vw,1.32rem); color:var(--text-muted); max-width:42ch; }
.hero-ctalar{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero-guven{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; font-size:.9rem; color:var(--text-soft); }
.hero-guven span{ display:inline-flex; align-items:center; gap:7px; }
.hero-guven .ikon{ width:17px; height:17px; color:var(--green); flex:none; }

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

/* Telefon maketi (arayan kartı) — temsilî görsel */
.telefon-sar{ display:flex; justify-content:center; position:relative; }
.telefon{
  width:min(310px,86vw); border-radius:38px; padding:14px;
  background:linear-gradient(160deg,#20262f,#0c0f14);
  box-shadow:var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.05);
  position:relative;
}
.telefon::before{ /* çentik */
  content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:110px; height:7px; border-radius:99px; background:rgba(255,255,255,.14); z-index:3;
}
.telefon-ekran{
  border-radius:26px; overflow:hidden; background:linear-gradient(180deg,#11161d,#0b0f15);
  padding:34px 16px 18px; color:#e9eef4; position:relative; min-height:520px;
  display:flex; flex-direction:column;
}
.ara-ust{ text-align:center; margin-bottom:16px; }
.ara-etiket{ font-size:.72rem; letter-spacing:.2em; color:#8fa2b5; font-weight:800; }
.ara-nabiz{ width:64px; height:64px; margin:14px auto 10px; border-radius:50%;
  background:radial-gradient(circle,#1f6f43,#0e3a24); display:grid; place-items:center;
  box-shadow:0 0 0 0 rgba(46,204,113,.5); animation:nabiz 2.2s ease-out infinite; }
.ara-nabiz svg{ width:30px; height:30px; color:#7dffc4; }
@keyframes nabiz{ 0%{box-shadow:0 0 0 0 rgba(46,204,113,.45)} 70%{box-shadow:0 0 0 20px rgba(46,204,113,0)} 100%{box-shadow:0 0 0 0 rgba(46,204,113,0)} }
@media (prefers-reduced-motion:reduce){ .ara-nabiz{ animation:none; } }
.ara-ad{ font-size:1.5rem; font-weight:900; letter-spacing:-.01em; }
.ara-tel{ font-size:.9rem; color:#9fb6c9; margin-top:2px; font-variant-numeric:tabular-nums; }
.ara-kart{
  margin-top:auto; background:#161d26; border:1px solid #29333f; border-radius:16px; padding:14px;
}
.ara-satir{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:.9rem; }
.ara-satir + .ara-satir{ border-top:1px dashed #2a343f; }
.ara-satir .k{ color:#9fb6c9; display:inline-flex; align-items:center; gap:8px; }
.ara-satir .k svg{ width:16px; height:16px; color:#8fa2b5; }
.ara-satir .v{ font-weight:800; }
.cip{ display:inline-block; padding:3px 10px; border-radius:99px; font-size:.82rem; font-weight:800; }
.cip-borc{ background:#3a1220; color:#ff9db4; border:1px solid #6d2036; }
.cip-kapora{ background:#0e2c1d; color:#7dffc4; border:1px solid #1f6f43; }
.ara-butonlar{ display:flex; gap:10px; margin-top:14px; }
.ara-buton{ flex:1; text-align:center; padding:10px; border-radius:12px; font-weight:800; font-size:.86rem; }
.ara-yesil{ background:#1f8a4c; color:#fff; }
.ara-kirmizi{ background:#7a1a1a; color:#fff; }
.maket-etiket{
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px dashed var(--border-strong); color:var(--text-muted);
  font-size:.72rem; font-weight:700; padding:6px 12px; border-radius:99px; white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.temsili-tag{ position:absolute; top:12px; right:12px; z-index:4; background:rgba(0,0,0,.5);
  color:#cdd8e3; font-size:.62rem; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:99px;
  border:1px solid rgba(255,255,255,.14); }

/* --- 7. Sorun / dert bloğu ------------------------------------------------ */
.dert{ display:grid; gap:18px; }
.dert-kart{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-sm); display:flex; gap:14px; align-items:flex-start;
}
.dert-kart .no{ font-size:1.4rem; }
.dert-kart .ikon-kutu{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--red-soft); color:var(--red); }
.dert-kart .ikon-kutu svg{ width:23px; height:23px; }
.dert-kart h3{ font-size:1.05rem; margin-bottom:4px; }
.dert-kart p{ color:var(--text-muted); font-size:.96rem; }
.dert-cozum{ margin-top:26px; text-align:center; font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:800; }
.dert-cozum .vurgu{ color:var(--gold); }
@media (min-width:760px){ .dert{ grid-template-columns:1fr 1fr; } }

/* --- 8. Özellik vitrini (bento) ------------------------------------------- */
.bento{ display:grid; gap:16px; grid-template-columns:1fr; }
.oz-kart{
  background:var(--surface); border:1px solid var(--border); 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:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-strong); }
.oz-ikon{ width:50px; height:50px; border-radius:13px; display:grid; place-items:center; margin-bottom:15px;
  background:var(--sofa); color:var(--gold); }
.oz-ikon svg{ width:26px; height:26px; }
.oz-kart h3{ font-size:1.16rem; margin-bottom:7px; }
.oz-kart p{ color:var(--text-muted); font-size:.97rem; }
.oz-kart .rozet{ margin-bottom:13px; }
/* Başrol kartı — arayan kartı */
.oz-basrol{ grid-column:1/-1; background:
    linear-gradient(135deg, color-mix(in srgb,var(--gold-bright) 12%,var(--surface)), var(--surface) 60%);
  border-color:color-mix(in srgb,var(--gold-bright) 40%,var(--border)); }
.oz-basrol-ic{ display:grid; gap:22px; align-items:center; }
.oz-basrol h3{ font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:10px; }
.oz-basrol p{ font-size:1.05rem; }
.oz-basrol .liste{ margin-top:16px; display:grid; gap:9px; }
.oz-basrol .liste li{ display:flex; gap:10px; align-items:flex-start; color:var(--text); font-size:.98rem; list-style:none; }
.oz-basrol .liste svg{ width:20px; height:20px; color:var(--green); flex:none; margin-top:2px; }
.oz-basrol ul{ margin:0; padding:0; }
@media (min-width:680px){ .bento{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .bento{ grid-template-columns:1fr 1fr 1fr; } .oz-basrol-ic{ grid-template-columns:1.1fr .9fr; } }

/* --- 9. Otonom zincir (akış) ---------------------------------------------- */
.zincir{ display:grid; gap:18px; counter-reset:z; }
.zincir-kart{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 22px 22px 66px; position:relative; box-shadow:var(--shadow-sm);
}
.zincir-kart::before{
  counter-increment:z; content:counter(z); position:absolute; left:18px; top:22px;
  width:34px; height:34px; border-radius:10px; background:var(--gold-bright); color:var(--ink-on-gold);
  display:grid; place-items:center; font-weight:900; font-size:1.05rem;
}
.zincir-kart h3{ font-size:1.08rem; margin-bottom:5px; }
.zincir-kart p{ color:var(--text-muted); font-size:.96rem; }
.zincir-kart .ok{ position:absolute; left:34px; bottom:-19px; color:var(--border-strong); width:20px; height:20px; z-index:1; }
.zincir-kart:last-child .ok{ display:none; }
@media (min-width:820px){
  .zincir{ grid-template-columns:1fr 1fr; }
  .zincir-kart .ok{ display:none; }
}

/* --- 10. 3 adım ----------------------------------------------------------- */
.adimlar{ display:grid; gap:16px; }
.adim{ text-align:center; padding:24px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.adim .n{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:var(--sofa); color:var(--gold); font-weight:900; font-size:1.25rem; }
.adim h3{ font-size:1.1rem; margin-bottom:6px; }
.adim p{ color:var(--text-muted); font-size:.95rem; }
@media (min-width:760px){ .adimlar{ grid-template-columns:repeat(3,1fr); } }

/* --- 11. Güven bloğu ------------------------------------------------------ */
.guven{ display:grid; gap:28px; align-items:center; }
.guven-metin h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); margin-bottom:14px; }
.guven-metin p{ color:var(--text-muted); font-size:1.05rem; margin-bottom:12px; }
.guven-metin .imza{ font-style:italic; color:var(--text); border-left:3px solid var(--gold-bright);
  padding-left:14px; margin-top:18px; font-size:1.05rem; }
.guven-rozetler{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
@media (min-width:880px){ .guven{ grid-template-columns:1.15fr .85fr; } }
/* Biz Kimiz — güven bölümü içi alt-blok (yeni tam bölüm YOK → zebra ritmi bozulmaz).
   Ortalı başlık + okunur metin sütunu + 3 yaklaşık (~) rozet. */
.biz-kimiz{ max-width:920px; margin:0 auto; text-align:center; }
.biz-kimiz h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); margin-bottom:16px; }
.biz-metin{ text-align:left; display:grid; gap:14px; max-width:760px; margin-inline:auto; }
.biz-metin p{ color:var(--text-muted); font-size:1.04rem; }
.biz-kutular{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }
.biz-kutu{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px 22px; box-shadow:var(--shadow-sm); min-width:128px; }
.biz-kutu b{ display:block; font-size:1.5rem; font-weight:900; color:var(--gold); letter-spacing:-.02em; line-height:1.1; }
.biz-kutu span{ font-size:.85rem; color:var(--text-muted); }
.biz-ayrac{ border:0; border-top:1px solid var(--border); max-width:920px; margin:44px auto; }
/* 18 Tem — Biz Kimiz + Güven YAN YANA (yalnız geniş ekran; mobil/tablet alt alta kalır) */
@media (min-width:1100px){
  .bizguven{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .bizguven .biz-ayrac{ display:none; }
  .bizguven .biz-kimiz{ text-align:left; max-width:none; margin:0; }
  .bizguven .biz-metin{ max-width:none; }
  .bizguven .biz-kutular{ justify-content:flex-start; }
  .bizguven .guven{ grid-template-columns:1fr; }
}

/* --- 12. Fiyat ------------------------------------------------------------ */
.fiyat-toggle{ display:inline-flex; padding:5px; gap:4px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-pill); margin:6px auto 8px; }
.seg{ border:0; background:transparent; color:var(--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(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.seg .mini-rozet{ font-size:.66rem; font-weight:900; background:var(--green); color:#fff;
  padding:2px 7px; border-radius:99px; letter-spacing:.02em; }
.toggle-not{ font-size:.86rem; color:var(--text-soft); margin-top:2px; }

.fiyat-kartlar{ display:grid; gap:20px; margin-top:34px; align-items:start; }
.fk{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.fk-vurgu{ border:1.5px solid color-mix(in srgb,var(--gold-bright) 55%,var(--border)); box-shadow:var(--shadow); }
.fk-tur{ font-size:1.25rem; font-weight:900; }
.fk-hedef{ color:var(--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(--text-muted); font-weight:700; font-size:1.05rem; }
.fk-gunluk{ font-size:.86rem; color:var(--text-soft); min-height:1.3em; }
.fk-tasarruf{ font-size:.86rem; color:var(--green); 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(--green); flex:none; margin-top:2px; }
.fk-save-rozet{ align-self:flex-start; margin-bottom:6px; }
.fiyat-guven{ text-align:center; margin-top:26px; color:var(--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(--green); }

/* aylık/yıllık görünürlük anahtarı */
.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:820px; margin-inline:auto; } }
/* Referans kutusu — "değer kutusu" ile aynı aile (yüzey kutu + renkli ikon çipi);
   yeşil vurgu = kazanç/ödül. Taslak C. */
.referans-kutu{ max-width:660px; margin:30px auto 0; display:flex; gap:14px; align-items:center;
  text-align:left; background:var(--surface); border:1px solid color-mix(in srgb,var(--green) 34%,var(--border));
  border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow-sm); }
.referans-kutu .ref-ikon{ width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:var(--green-soft); color:var(--green); }
.referans-kutu .ref-ikon svg{ width:24px; height:24px; }
.referans-kutu p{ margin:0; font-size:1rem; color:var(--text-muted); }
.referans-kutu p b{ color:var(--text); }

/* --- 13. Deneme / risk-reversal ------------------------------------------- */
.deneme-kutu{
  background:linear-gradient(135deg, color-mix(in srgb,var(--gold-bright) 16%,var(--surface)), var(--surface));
  border:1px solid color-mix(in srgb,var(--gold-bright) 34%,var(--border));
  border-radius:24px; padding:clamp(28px,5vw,52px); text-align:center; box-shadow:var(--shadow);
}
.deneme-kutu h2{ font-size:clamp(1.6rem,3.8vw,2.4rem); margin-bottom:14px; }
.deneme-kutu .buyuk-gun{ color:var(--gold); }
.deneme-kutu p{ color:var(--text-muted); font-size:1.08rem; max-width:52ch; margin:0 auto 8px; }
.deneme-madde{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 20px; margin:24px 0 28px; }
.deneme-madde span{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.98rem; }
.deneme-madde svg{ width:20px; height:20px; color:var(--green); flex:none; }

/* --- 14. SSS -------------------------------------------------------------- */
.sss{ display:grid; gap:12px; max-width:800px; margin-inline:auto; }
.sss details{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden; transition:border-color .2s ease; }
.sss details[open]{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.sss summary{ padding:18px 22px; font-weight:750; font-size:1.03rem; 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(--gold); transition:transform .2s ease; }
.sss details[open] summary .arti{ transform:rotate(45deg); }
.sss .cevap{ padding:0 22px 20px; color:var(--text-muted); font-size:.98rem; line-height:1.65; }
.sss .cevap b{ color:var(--text); }

/* --- 15. İndirme ---------------------------------------------------------- */
.indir-kutu{ display:grid; gap:26px; align-items:center; }
.indir-metin h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); margin-bottom:12px; }
.indir-metin p{ color:var(--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(--text-muted); }
.indir-notlar svg{ width:18px; height:18px; color:var(--green); flex:none; margin-top:3px; }
.indir-aksiyon{ text-align:center; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); }
.indir-aksiyon .surum{ font-size:.85rem; color:var(--text-soft); margin-top:12px; }
.indir-aksiyon .web-not{ font-size:.83rem; color:var(--text-muted); margin-top:10px; }
@media (min-width:820px){ .indir-kutu{ grid-template-columns:1.1fr .9fr; } }

/* --- 16. Son CTA ---------------------------------------------------------- */
.son-cta{ text-align:center; }
.son-cta h2{ font-size:clamp(1.7rem,4vw,2.6rem); margin-bottom:14px; }
.son-cta p{ color:var(--text-muted); font-size:1.1rem; max-width:48ch; margin:0 auto 26px; }
.son-cta .hero-ctalar{ justify-content:center; }

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

/* --- 18. Ekran görüntüsü yer tutucu --------------------------------------- */
.ekran-yer{
  border:2px dashed var(--border-strong); border-radius:var(--radius); background:
    repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 12px, var(--surface) 12px, var(--surface) 24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; padding:28px 20px; color:var(--text-soft); min-height:200px;
}
.ekran-yer svg{ width:38px; height:38px; opacity:.6; }
.ekran-yer .et{ font-weight:800; font-size:.9rem; color:var(--text-muted); }
.ekran-yer .alt{ font-size:.78rem; }
.ekran-yer.kucuk{ min-height:150px; }

/* --- 19. Yardımcılar ------------------------------------------------------ */
.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(--gold-bright);
  color:var(--ink-on-gold); padding:10px 16px; border-radius:0 0 8px 0; font-weight:800; }
.skip:focus{ left:0; }

/* --- 20. Kayan galeri (ekran görüntüsü karuseli) ------------------------- */
.galeri{ position:relative; width:100%; max-width:var(--g-max,318px); margin-inline:auto;
  aspect-ratio:var(--g-oran, 72/164); border-radius:26px; overflow:hidden;
  border:1px solid var(--border-strong); box-shadow:var(--shadow-lg); background:#0a0e14; }
.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,.45);
  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(--gold-bright); }
.galeri-ok{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(8,12,18,.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:680px; border-radius:16px; }
.galeri-web .galeri-ray img{ object-position:top left; }
/* foto galerisi (gerçek saha/tesis fotoğrafları — yatay, ortalı kırpma) */
.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(--text-soft); font-weight:650; }
/* Galeri şeridi (birden çok galeri yan yana) */
.galeri-grid{ display:grid; gap:26px; grid-template-columns:1fr; align-items:start; }
@media (min-width:760px){ .galeri-grid.ikili{ grid-template-columns:1fr 1fr; } }

/* ============================================================================
   21. ÖNERİ B DİLİ — "KATLANIR" (30 Tem 2026)
   Patron 28 Tem'de üç taslaktan B'yi seçti: site/tasarim/b-katlanir.html.
   B'nin dili üç şeyden ibaret:
     (1) daha sıkı bölüm ritmi   → .perde  (.bolum'dan ~%20 kısa)
     (2) uzun gövdeyi SEKMEYE katlamak → .sek-serit / .sek-panel
         🔴 KATLAMAK = SAKLAMAK, SİLMEK DEĞİL. Tek bir bölüm bile atılmadı;
            hepsi DOM'da duruyor, yalnız aynı anda biri görünüyor.
     (3) altın butonun parlaması → 21b (patron 30 Tem: "butonlar parlasın")

   ⚠️ BURAYA YALNIZ YENİ KURAL EKLENİR, mevcut kurallar ellenmez:
      styles.css'i kayit.html · sorun.html · gizlilik.html de yüklüyor.
      (Ölçüldü: o üç sayfa .btn / .bolum / .perde sınıflarının HİÇBİRİNİ
      kullanmıyor, kendi sınıf adları var → bu blok onlara dokunmuyor.)
   ⚠️ .perde ve .sek-* adları site/tasarim/ortak.css ile BİLEREK aynı; taslak
      sayfalar ortak.css'i SONRA yüklediği için orada onların tanımı kazanır.
   ========================================================================== */

/* --- 21a. Bölüm ritmi ----------------------------------------------------- */
.perde{ padding-block:clamp(44px,7vw,84px); }
.perde + .perde{ border-top:1px solid var(--border); }

/* Sekme şeridi — sayfanın gövdesi buraya katlandı.
   ⚠️ B taslağı YATAY KAYDIRMA kullanıyordu (overflow-x:auto); SARMA'ya
      çevirdim: dar telefonda kayan şeritte son sekmeler ekranın dışında
      kalıyor ve "o bölüm siteden kalkmış" gibi duruyor — bu işin tek
      gerçek riski buydu. Sarınca beş sekmenin hepsi ilk bakışta görünür. */
.sek-serit{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px;
  border-bottom:1px solid var(--border); padding-bottom:6px;
  margin-bottom:clamp(22px,3.5vw,32px);
}
.sek-serit button{
  flex:none; padding:11px clamp(11px,2.2vw,18px); border:0; background:transparent;
  cursor:pointer; font-family:inherit; font-weight:800;
  font-size:clamp(.9rem,2.4vw,1rem); color:var(--text-muted);
  border-bottom:3px solid transparent; border-radius:10px 10px 0 0;
  white-space:nowrap; line-height:1.25;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.sek-serit button:hover{ color:var(--text); background:var(--surface-2); }
.sek-serit button[aria-selected="true"]{ color:var(--text); border-bottom-color:var(--gold-bright); }
.sek-panel[hidden]{ display:none; }
/* Panel-içi çapaya (#ozellikler / #nasil / #sss) atlanınca SEKME ŞERİDİ de
   ekranda kalsın; yoksa kullanıcı hangi sekmede olduğunu göremiyor.
   Hesap: html'in scroll-padding-top'u 72px + buradaki 78px = 150px boşluk;
   yapışkan üst çubuk 64px → şeride (~74px) tam yetiyor. */
.sek-panel{ scroll-margin-top:78px; }
.sek-ipucu{ text-align:center; color:var(--text-soft); font-size:.9rem;
  max-width:54ch; margin:0 auto 16px; }
/* Bir sekmenin İKİNCİ yarısı (ör. "Nasıl çalışır" içindeki 3 ADIM bloğu):
   ayrı bölüm gibi görünsün ama yeni bir perde açmasın. */
.sek-alt{ margin-top:clamp(34px,5vw,54px); padding-top:clamp(30px,4.5vw,46px);
  border-top:1px solid var(--border); }

/* --- 21b. ALTIN BUTON PARILTISI ------------------------------------------
   Patron 30 Tem: "butonlar parlasın" + "abartılı animasyon YOK".
   İki katman:
     ::before → SABİT cam ışığı. Hiç hareket etmez; butona "işlenmiş metal"
                hissi verir. Parıltının asıl işini bu yapar.
     ::after  → süzülen ışık bandı. İmleç/odakta BİR kez geçer (0.72 sn).
   .btn-parla verilen 3-4 ana çağrı butonunda bant ~5.5 sn'de bir kendi
   kendine süzülür; sürenin yalnız %14'ü hareket, gerisi durgun → nabız gibi
   sürekli oynayan bir şey DEĞİL.
   🔑 z-index:-1 + isolation:isolate: sözde-öğeler butonun ZEMİNİNİN üstünde
      ama YAZISININ altında kalır (yoksa ışık bandı metni örter).
   🔑 Dolgu artık düz renk değil altın degrade — logodaki spAu degradesiyle
      aynı aile (#ffe487 → #ffc928 → koyu altın), marka dili bozulmadı.  */
.btn-altin{
  --btn-bg:linear-gradient(168deg,#ffe487 0%,var(--gold-bright) 46%,#e9ae05 100%);
  --btn-fg:var(--ink-on-gold); --btn-bd:var(--gold-bright);
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 6px 20px color-mix(in srgb,var(--gold-bright) 40%,transparent);
}
/* .btn:hover ile aynı özgüllük (0,2,0) — SONRA geldiği için kazanır;
   .btn:hover'ın translateY(-2px)'i yerinde kalır, yalnız gölge güçlenir. */
.btn-altin:hover{ box-shadow:0 10px 28px color-mix(in srgb,var(--gold-bright) 52%,transparent); }
.btn-altin::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,0) 58%);
}
.btn-altin::after{
  content:""; position:absolute; top:-70%; bottom:-70%; left:0; width:42%;
  z-index:-1; pointer-events:none; transform:translateX(-160%) rotate(16deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.78),rgba(255,255,255,0));
}
/* (0,2,1) > .btn-parla::after (0,1,1) → imleç üstündeyken tek atış kazanır */
.btn-altin:hover::after,
.btn-altin:focus-visible::after{ animation:altinSuzul .72s ease-out; }
.btn-parla::after{ animation:altinSuzulYavas 5.5s ease-out 1.4s infinite; }
@keyframes altinSuzul{
  from{ transform:translateX(-160%) rotate(16deg); }
  to{   transform:translateX(400%)  rotate(16deg); }
}
@keyframes altinSuzulYavas{           /* %14 hareket · %86 durgun */
  0%{   transform:translateX(-160%) rotate(16deg); }
  14%{  transform:translateX(400%)  rotate(16deg); }
  100%{ transform:translateX(400%)  rotate(16deg); }
}
@media (prefers-reduced-motion:reduce){
  .btn-altin::after, .btn-parla::after,
  .btn-altin:hover::after, .btn-altin:focus-visible::after{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   30 TEMMUZ — PATRON KARARLARI (3 blok)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) 🖥️ MASAÜSTÜ = ESKİ DÜZEN · 📱 TELEFON = ÖNERİ B (sekmeli) ─────────────
   Patron: "web site yani masaüstünden girerken ESKİ düzenimiz olsun, android veya
   ios'dan telefondan girerken B seçeneği olsun."
   Gerekçesi de doğru: sekmeli düzenin derdi MOBİLDE 22 ekranlık kaydırmaydı.
   Masaüstünde 15" ekranda o dert yok; orada her şeyin açık olması SATIŞA yarıyor
   (göz gezdirme + arama motoru + yazdırma). Yani tek düzen iki cihaza uymuyordu.
   ⚙️ Nasıl: eşik 900px. ALTINDA sekme şeridi + ipucu görünür, JS panelleri
   `hidden` ile yönetir. ÜSTÜNDE şerit/ipucu gizlenir ve BEŞ PANEL DE açık kalır;
   aralarına ayraç + nefes payı konur ki tek bir yığın gibi durmasınlar.
   `!important` bilinçli: `[hidden]` tarayıcının kendi kuralıdır, onu ezmek gerekir
   (JS de ayrıca `hidden`ı kaldırıyor — bu CSS ikinci kat emniyet, JS kapalıyken de
   masaüstü düzeni doğru çıksın diye).                                            */
@media (min-width:900px){
  .sek-serit, .sek-ipucu{ display:none !important; }
  .sek-panel{ display:block !important; }
  .sek-panel + .sek-panel{
    margin-top:clamp(48px,6vw,88px);
    padding-top:clamp(40px,5vw,72px);
    border-top:1px solid var(--border);
  }
}

/* ── 1b) 🖥️ MASAÜSTÜNDE BÖLÜM SIRASI = ESKİ SIRA (30 Tem, benim sapmamın düzeltmesi)
   Patron: "sen işini bilirsin, çok önemli değil ama halledersen mutlu olurum."
   Sekmeli düzene geçerken masaüstünde SIRA bozulmuştu:
     ESKİ : Ne yapar · Ekranlar · Nasıl çalışır · BİZ KİMİZ · Tanıdık geldi mi ·
            FİYAT · Deneme · SORULAR · İndir
     BOZUK: Ne yapar · Ekranlar · Nasıl çalışır · Tanıdık geldi mi · SORULAR ·
            BİZ KİMİZ · FİYAT · Deneme · İndir
   KÖK: sıralanacak 9 blok ORTAK BİR EBEVEYNDE DEĞİL — 5 sekme paneli
   `#detay > .kap` içinde, #guven/#fiyat/#deneme/#indir ise doğrudan #icerik çocuğu.
   CSS `order` yalnız AYNI flex kutusunun DOĞRUDAN çocukları arasında çalışır ⇒
   salt `order` YETMEZ; iki sarıcı kutunun `display:contents` ile ERİTİLMESİ gerekir.
   ⚙️ Neden bu yol seçildi: kural TAMAMEN `@media (min-width:900px)` içinde kalıyor ⇒
   ÇALIŞAN MOBİL SEKMELİ DÜZENE TEK SATIR BİLE DOKUNULMUYOR. (Alternatif olan
   "HTML'i eski sıraya göre yeniden kur" yolu riski tam tersine, çalışan mobil
   tarafa taşıyordu.) DOM sırası değişmediği için sekme JS'i de etkilenmiyor —
   panelleri zaten `getElementById(aria-controls)` ile buluyor, konumla değil.     */
@media (min-width:900px){
  #detay, #detay > .kap{ display:contents; }   /* kutular erir → paneller kardeş olur */
  #icerik{ display:flex; flex-direction:column; }

  /* 🔴 HER DOĞRUDAN ÇOCUĞA SIRA VERİLMEK ZORUNDA — flex'te varsayılan `order:0`dır,
     sırası unutulan bir blok HERO'NUN BİLE ÜSTÜNE fırlar. Liste #icerik'in gerçek
     çocuk listesinden (HTML ayrıştırılarak) çıkarıldı ve TAM:
     hero · [detay eridi: ipucu·şerit·5 panel] · guven · fiyat · deneme · indir · son-cta
     ⚠️ Siteye YENİ bir bölüm eklenirse buraya da bir `order` eklenmeli;
        `test_v109_site_sira.js` bunu mekanik olarak kontrol ediyor. */
  #icerik > .hero{ order:1; }
  #ozellikler    { order:2; }   /* Ne yapar        */
  #ekranlar      { order:3; }   /* Ekranlar        */
  #nasil         { order:4; }   /* Nasıl çalışır   */
  #guven         { order:5; }   /* BİZ KİMİZ  ← eski sırada BURASIYDI */
  #sorun         { order:6; }   /* Tanıdık geldi mi */
  #fiyat         { order:7; }   /* FİYAT           */
  #deneme        { order:8; }   /* Deneme          */
  #sss           { order:9; }   /* SORULAR ← fiyat/denemeden SONRA */
  #indir         { order:10; }  /* İndir           */
  #icerik > .son-cta{ order:11; }
  .sek-ipucu, .sek-serit{ order:0; }   /* zaten display:none; yine de tanımlı dursun */

  /* `display:contents` KUTUYU YOK EDER: `.kap`ın max-width + padding-inline'ı da
     buharlaşır ⇒ paneller boydan boya, sıfır kenar boşluğuyla akardı.
     `.kap` kuralının (styles.css:96) birebir aynısı panellere geri veriliyor. */
  .sek-panel{
    width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  }
  /* #detay'ın `.perde` üst nefesi de eridi → yalnız İLK panele geri ver
     (kalan dördü zaten `.sek-panel + .sek-panel` ile üstten nefes alıyor). */
  #ozellikler{ padding-top:clamp(44px,7vw,84px); }
  /* ℹ️ #detay'ın `.zebra` zemini de eridi: masaüstünde ilk beş blok artık sayfa
     zeminiyle aynı renkte. Ayırma işini `.sek-panel + .sek-panel` üst çizgisi ve
     `.perde + .perde` yapıyor. Zebra ritmi geri istenirse tek satır yeter:
     `#ozellikler,#nasil,#sorun{ background:var(--bg-alt); }`                     */
}

/* ── 2) 🔒 MOBİLDE PANEL GİRİŞİ — yalnız simge ───────────────────────────────
   Patron: "telefon sürümünde Ücretsiz Dene'nin yanına Panel'e giriş butonu yok."
   Yazıyla birlikte gösterince iki buton da sıkışıyordu (≤460px'te marka yazısı bile
   gizleniyor). Çözüm: dar ekranda YALNIZ 🔒 simge (aria-label + title ile erişilebilir),
   ≥700px'te yazı açılır. Kırmızı çerçeve korundu — ikincil kalsın, altın CTA ile yarışmasın. */
.ust-giris{ display:inline-flex; }        /* 30 Tem: artık mobilde de görünür */
/* 📱 10 Ağu (patron): «kırmızı kilide PANEL GİRİŞ yazalım, kilit dursun — kafa
   karışıklığı olmasın.» Çıplak 🔒 ne olduğunu söylemiyordu. Dar ekranda sıkışma
   (30 Tem'in gizleme sebebi) yazıyı GİZLEYEREK değil KÜÇÜLTEREK çözülür:
   ≤700px'te 10px kompakt yazı + dar dolgu — «Ücretsiz Dene» ile yarışmaz. */
.ust-giris .ug-yazi{ display:inline; font-size:10px; letter-spacing:.2px; white-space:nowrap; }
.ust-giris{ padding-left:8px; padding-right:8px; }
@media (min-width:700px){
  .ust-giris .ug-yazi{ font-size:inherit; letter-spacing:normal; }
  .ust-giris{ padding-left:14px; padding-right:14px; }
}

/* ── 3) 📞 SAYFA SONU İLETİŞİM BLOĞU ─────────────────────────────────────────
   Patron: "en altta ... 10 günlük deneme ve fiyatları gör şeyini kapatalım, çok sık
   yazıyor deneme alın diye." Üçüncü deneme çağrısı yerine İLETİŞİM kondu.
   Numara WhatsApp yeşili + büyük: sayfanın son sözü "bize ulaş" olsun. */
.son-iletisim{ margin-top:22px; text-align:center; }
.son-iletisim .si-numara{
  display:inline-block; margin-bottom:16px; text-decoration:none;
  font-size:clamp(28px,6.5vw,40px); font-weight:900; letter-spacing:.5px;
  color:var(--wa,#25D366); font-variant-numeric:tabular-nums;
  text-shadow:0 2px 16px color-mix(in srgb,var(--wa,#25D366) 30%,transparent);
}
.son-iletisim .si-numara:hover{ text-decoration:underline; }
.si-butonlar{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.si-butonlar .btn{ min-height:52px; font-size:1rem; font-weight:800; flex:1 1 200px; max-width:280px; }
.si-wa{ background:var(--wa,#25D366); color:#08130c; border:0; }
.si-wa:hover{ filter:brightness(1.06); }
.si-ara{ background:transparent; color:var(--wa,#25D366); border:2px solid var(--wa,#25D366); }
.si-ara:hover{ background:color-mix(in srgb,var(--wa,#25D366) 12%,transparent); }

/* 📞 FİYAT KARTLARINDA DOĞRUDAN İLETİŞİM (31 Tem, patron isteği)
   Patron: "fiyat sekmelerinin altında ücretsiz dene butonu var, burada direk
   numaramız olsun… en alttaki gibi hem WhatsApp hem arama butonu olsun."
   `.son-iletisim` ailesinin kart içine sığan küçük kardeşi — AYNI yeşil dil,
   daha küçük ölçü. `.si-wa`/`.si-ara` renkleri yukarıdan aynen miras alınır;
   burada yalnız ÖLÇÜ ezilir (renk kopyalanırsa ikisi ayrışır). */
.fk-iletisim{ margin-top:18px; padding-top:16px; text-align:center;
  border-top:1px dashed color-mix(in srgb,var(--wa,#25D366) 35%,transparent); }
.fk-il-baslik{ display:block; margin-bottom:4px; font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; opacity:.75; }
.fk-il-no{ display:inline-block; margin-bottom:12px; text-decoration:none;
  font-size:clamp(22px,4.6vw,30px); font-weight:900; letter-spacing:.4px;
  color:var(--wa,#25D366); font-variant-numeric:tabular-nums;
  text-shadow:0 2px 14px color-mix(in srgb,var(--wa,#25D366) 26%,transparent); }
.fk-il-no:hover{ text-decoration:underline; }
.fk-il-btnlar{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.fk-il-btnlar .btn{ flex:1 1 130px; min-height:46px; font-size:.94rem; font-weight:800; }

/* ============================================================================
   22. SICAK SİYAH-ALTIN ZEMİN — form + yasal sayfalar (19 Ağu 2026)

   PATRON (birebir): *«ücretsiz dene butonuyla kayıt olurken arka plan rengi siyah,
   bunu menü rengiyle bağdaştıralım. yani ana sayfa satış sayfamızdaki renk ile
   biraz benzerlik olsun. mesela sarımsı tonlarda hafif çizgili ama siyah odaklı
   olsun. (ana menüye benzesin sadece biraz daha siyah odaklı olsun)»*

   NE YAPILDI
     · Zemin düz #0d1117 (soğuk lacivert-siyah) yerine SICAK siyah: üstte hafif
       altın ışıma, üzerinde ana satış sayfasının çizgi deseninin ALTIN tonlusu
       (`styles.css:126/132` çim yeşili → burada #ffc928, aynı 112° / 2px / 11px).
     · Kartlar opak (#17181c) → desen kartın ARKASINDA kalır, yazıyı hiç bozmaz.
     · Üstte 3 px altın şerit: ana sayfanın üst çubuğunun (menü) imzası, gövdesi yok.

   🔴 BU DOSYA DÖRT SAYFAYA BİRDEN HİZMET EDİYOR
      kayit.html · sorun.html · kosullar.html · gizlilik.html.
      Zemin ve jetonlar bilerek BURADA, tek nüsha: 18-19 Ağu'da renkler dört
      sayfaya elle kopyalanmıştı ve «yazılar siyahta kayboluyor» kusuru
      (patron fotoğrafı) tam bu kopyalamadan doğmuştu. [[iki-kopya-iki-gercek]]

   🔴 SAYFALARDAKİ SATIRIN «background-color» OLMASI ZORUNLU
      Dört sayfanın <head>'inde `html,body{background-color:#0e0d09 !important}`
      yazıyor. Biri bunu KISAYOL `background:` hâline çevirirse `background-image`
      de sıfırlanır ⇒ çizgi deseni sessizce kaybolur, zemin düz siyah kalır.
      (Kısayol her longhand'i yeniden yazar; `!important` olduğu için buradaki
      desen bir daha kazanamaz.) Kapı: `test_kayit_x_isaret.js` §Z.

   ⚠️ Ölçüm (19 Ağu, WCAG kontrast oranları — hepsi AA 4,5:1 eşiğinin üstünde):
      kart #17181c ↔ metin #e6edf3 = 15,0 · ↔ soluk #9aa4b2 = 7,0 ·
      ↔ altın #ffc928 = 11,5 · ↔ hata #ff6b70 = 6,4
      girdi #0e0d09 ↔ metin #e6edf3 = 16,5 · ↔ yer tutucu #7d8b9a = 5,5
   ========================================================================== */
:root{
  /* Bu dört sayfanın kendi sınıfları `var(--zemin,…)`, `var(--panel,…)`,
     `var(--kart,…)`, `var(--cizgi,…)`, `var(--soluk,…)` diye yazılmıştı ama bu
     adlar HİÇBİR YERDE TANIMLI DEĞİLDİ — hepsi yedek değere düşüyordu. Artık
     tanımlılar: paleti değiştirmek için tek yer burası. */
  --zemin:#0e0d09;        /* sayfa + girdi kutusu zemini (çok koyu sıcak siyah) */
  --panel:#17181c;        /* kart zemini */
  --kart:#17181c;         /* okuma penceresi — .panel ile aynı aile */
  --cizgi:#332e26;        /* sıcak kenarlık */
  --soluk:#9aa4b2;        /* ikincil metin (kart üstünde 7,0:1) */
  --altin-cizgi:rgba(255,201,40,.05);   /* desenin altın tonu — «hafif» */
}

html{ background-color:var(--zemin); }
body{
  background-color:var(--zemin);
  background-image:
    /* ① üstte altın ışıma — ana sayfanın hero parıltısının siyah odaklı hâli */
    radial-gradient(1100px 520px at 80% -12%, rgba(255,201,40,.13), rgba(255,201,40,0) 66%),
    /* ② ANA SAYFADAKİ ÇİZGİ DESENİ, altın tonuyla (styles.css ~126/132 ile aynı açı/adım) */
    repeating-linear-gradient(112deg, var(--altin-cizgi) 0 2px, rgba(255,201,40,0) 2px 11px),
    /* ③ dikey sıcaklık — piksel duraklı: sayfa uzadıkça üst ton kaymasın */
    linear-gradient(180deg,#16130b 0px, #100e09 520px, #0d0c08 100%);
  /* Kısa sayfada (ör. sorun.html) gövde ekranı doldurmazsa altta desensiz şerit
     kalırdı; html'in düz zemini görünürdü. */
  min-height:100vh;
  min-height:100dvh;
}

/* Üst çubuk imzası: ana sayfanın menüsündeki altın, gövdesi olmadan.
   3 px · sabit · tıklanamaz. Belge okuma penceresi (z-index 9000) bunun ÜSTÜNDE. */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:5;
  pointer-events:none;
  background:linear-gradient(90deg,#e6a700 0%,#ffc928 42%,#ffe487 62%,#e6a700 100%);
}
@media print{ body::before{ display:none; } }