/* ===========================================================================
   AppStreamers — TEK stil dosyası
   ---------------------------------------------------------------------------
   Önce ne vardı: 185 sayfa üç ayrı kaynaktan besleniyordu —
     · 66 sayfa  assets/as.css        (tasarım sistemi, açık/koyu uyumlu)
     · 119 sayfa css/style.css        (%59'u ölü: 126 sınıfın 74'ü kullanılmıyor)
     · 123 sayfa sayfa içine GÖMÜLÜ kritik CSS, 11 FARKLI sürüm
   Gömülü sürümler arasında 39 seçici birbirinden farklı tanımlıydı: bağlantı
   rengi 85 sayfada devralınan, 34 sayfada turuncu; .container 1180/980/920px;
   .section dolgusu 80/56/52/36/30px. Yani "tek site" gibi görünen şey aslında
   on bir ayrı mini tasarımdı.

   Buradaki yaklaşım:
     1. Tasarım sistemi (as.css) kaynak doğrudur — uygulamanın theme.dart'ından
        gelir, site ve uygulama aynı markaya benzemek zorunda.
     2. Eski belirteç ADLARI yaşamaya devam eder (--text-2, --surface, --gold…):
        448 satır içi style="" bunları doğrudan kullanıyor, adları silmek o
        sayfaları anında bozardı. Yeni belirteçlere takma ad veriliyor.
     3. Eski sayfalar KOYUYA sabitlenir (html[data-tema="koyu"]). Sebebi ölçüm:
        o sayfalarda 448 satır içi sabit renk var ve bir kısmı açık zemin için
        okunamaz (#86efac, #fde68a, #fff). Tek dosya, iki tema yeteneği —
        ama koyu sayfalar koyu kalır.
     4. Yazı sayfaları dar kapsayıcıyı html[data-stil="yazi"] ile sürdürür;
        okuma genişliği gerçek bir tasarım kararıydı, kaybedilmemeli.
     5. Metin içi bağlantılar artık KAPSAMA alınarak renklendirilir. Eskiden
        çıplak "a" seçicisi 34 sayfada her bağlantıyı turuncuya boyuyordu;
        şimdi yalnızca paragraf/liste içindeki bağlantı renkli, menü ve
        butonlar etkilenmiyor.
   =========================================================================== */

/* ====================== 1. BELİRTEÇLER ====================== */
:root{
  /* Marka — her iki temada sabit (theme.dart: YC.green / YC.orange) */
  --green:#00C784; --green-dark:#00A86E; --orange:#FF9300; --danger:#E5484D;

  /* Yüzeyler — açık tema (YC.light) */
  --bg:#EAF8F1; --card:#FFFFFF; --border:#DCEEE7;
  --text:#16241E; --muted:#6C8078; --soft:#F2FBF7;

  /* Durum çiftleri (fg/bg) — hepsi kendi zemininde WCAG AA */
  --ok-fg:#0B6B45; --ok-bg:#E3F7ED;
  --warn-fg:#8A4B00; --warn-bg:#FFF2E0;
  --danger-fg:#B4262B; --danger-bg:#FDECEC;

  --shadow:0 4px 12px rgba(22,36,30,.06);
  --shadow-lg:0 12px 32px rgba(22,36,30,.10);

  /* Ölçekler — uygulamadaki rSm/rMd/rLg/rPill ve s4..s64 */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s24:24px; --s40:40px; --s64:64px;

  --container:1140px;
  --container-dar:920px;
  /* Uygulamayla aynı sistem yığını: ek font yükü yok, ş/ğ/ı/ə her cihazda doğru */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* --- Koyu tema değerleri. Üç yoldan da aynı sonuç: ---
   (a) işletim sistemi koyu + sayfa açığa zorlamamış
   (b) sayfa data-tema="koyu" (eski nesil, her zaman koyu)
   (c) sayfa data-theme="dark"                                              */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-tema="acik"]){
    --bg:#0E1512; --card:#18221D; --border:#26332C;
    --text:#ECF6F1; --muted:#8FA39B; --soft:#141D18;
    --ok-fg:#5FE0AC; --ok-bg:rgba(0,199,132,.15);
    --warn-fg:#F5B871; --warn-bg:rgba(255,147,0,.15);
    --danger-fg:#FF8A8E; --danger-bg:rgba(229,72,77,.15);
    --shadow:0 4px 12px rgba(0,0,0,.35);
    --shadow-lg:0 12px 32px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"], :root[data-tema="koyu"]{
  --bg:#0E1512; --card:#18221D; --border:#26332C;
  --text:#ECF6F1; --muted:#8FA39B; --soft:#141D18;
  --ok-fg:#5FE0AC; --ok-bg:rgba(0,199,132,.15);
  --warn-fg:#F5B871; --warn-bg:rgba(255,147,0,.15);
  --danger-fg:#FF8A8E; --danger-bg:rgba(229,72,77,.15);
  --shadow:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 12px 32px rgba(0,0,0,.45);
}

/* --- Eski belirteç adları: takma ad. ---
   Silinemezler — 448 satır içi style="" doğrudan bunlara bakıyor
   (--surface 1834, --text-2 1728, --grad-1 341, --text-3 268, --grad-2 202,
   --shadow-pink 170, --gold 153 kullanım). Artık yeni belirteçlerden
   türüyorlar, böylece tema değişince birlikte hareket ediyorlar.          */
:root{
  --bg-2:var(--soft);
  --bg-3:var(--card);
  --surface:var(--soft);
  --surface-2:var(--border);
  --text-2:var(--muted);
  --text-3:var(--muted);
  --pink:var(--green);
  /* --pink-2 hiçbir yerde tanımlı değildi ama 1 satır içi style="" hâlâ onu
     okuyor; tanımsız kalırsa o öğe rengini tümden kaybeder. */
  --pink-2:var(--orange);
  --purple:var(--green-dark);
  --gold:var(--orange);
  --radius:var(--r-md);
  --grad-1:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  --grad-2:linear-gradient(135deg,var(--orange) 0%,var(--green) 100%);
  --grad-bg:none;
  --shadow-pink:0 8px 24px rgba(0,199,132,.30);
}

/* ====================== 2. TEMEL ====================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;cursor:pointer}
img,svg{max-width:100%;display:block}
ul,ol{list-style:none}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--s16)}
/* Yazı sayfalarında okuma genişliği. Eskiden 920px'i gömülü CSS veriyordu;
   satır uzunluğu gerçek bir tasarım kararıydı, korunuyor. */
:root[data-stil="yazi"] .container{max-width:var(--container-dar)}

/* --- Metin içi bağlantılar ---
   Eskiden çıplak "a{color:#FF9300}" 34 sayfada menüyü, logoyu, kartları da
   turuncuya boyuyordu. Artık yalnızca okunan metnin içinde renkleniyor. */
main p a, main li a, .article-body a, .blog-body a,
.faq-a a, details.qa p a, .label a, .body a{
  color:var(--orange); text-decoration:underline; text-underline-offset:2px;
}
main p a:hover, main li a:hover, .article-body a:hover, .blog-body a:hover,
.faq-a a:hover, details.qa p a:hover{ color:var(--green); }
/* Kart/buton/rozet içindeki bağlantılar metin bağlantısı değildir */
.card a, .btn, .chip a, .nav a, .footer a, .eyebrow a, .fork-card a{
  text-decoration:none;
}
.card .title a{color:inherit}
.card .title a:hover{color:var(--green-dark)}


/* ====================== 3. TASARIM SİSTEMİ BİLEŞENLERİ ====================== */
*{box-sizing:border-box;margin:0;padding:0}
.display{font-size:clamp(30px,5.4vw,52px);font-weight:800;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.h1{font-size:clamp(24px,3.4vw,36px);font-weight:800;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.h2{font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.25;text-wrap:balance}
.title{font-size:16px;font-weight:700;line-height:1.3}
.body{font-size:16px;font-weight:400;line-height:1.6;color:var(--text)}
.lead{font-size:clamp(16px,1.9vw,19px);line-height:1.6;color:var(--muted);max-width:62ch}
.label{font-size:13.5px;font-weight:500;line-height:1.4;color:var(--muted)}
.caption{font-size:12.5px;font-weight:500;line-height:1.4;color:var(--muted)}
.money{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.01em}
.eyebrow{display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ok-fg);background:var(--ok-bg); padding:6px 12px;border-radius:var(--r-pill);}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s16); box-shadow:var(--shadow);}
.icon-box{width:42px;height:42px;flex:0 0 42px;border-radius:var(--r-sm); display:grid;place-items:center; background:var(--ok-bg); color:var(--ok-fg);}
.icon-box svg{width:22px;height:22px}
.icon-box.warn{background:var(--warn-bg);color:var(--warn-fg)}
.chip{display:inline-flex;align-items:center;gap:6px; padding:5px 11px;border-radius:var(--r-pill); font-size:12.5px;font-weight:600; background:var(--ok-bg);color:var(--ok-fg);}
.hero{padding:var(--s40) 0 var(--s64)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s40);align-items:center}
.hero h1{margin:var(--s16) 0}
.hero .lead{margin-bottom:var(--s24)}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);margin-bottom:var(--s16)}
.fork-card{display:flex;flex-direction:column;gap:var(--s8); background:var(--card);border:1.5px solid var(--border); border-radius:var(--r-md);padding:var(--s16); transition:border-color .15s ease, transform .15s ease;}
.fork-card:hover{border-color:var(--green);transform:translateY(-2px)}
.fork-card .title{display:flex;align-items:center;gap:var(--s8)}
.fork-card .caption{margin-bottom:var(--s4)}
.fork-go{font-size:14px;font-weight:700;color:var(--green-dark);display:flex;align-items:center;gap:5px}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s16);align-items:center}
.trust-row .caption{display:flex;align-items:center;gap:6px}
.trust-row svg{width:15px;height:15px;color:var(--ok-fg);flex:0 0 15px}
.phone{width:min(300px,100%);margin:0 auto; background:var(--card);border:1px solid var(--border); border-radius:26px;padding:var(--s12);box-shadow:var(--shadow-lg);}
.phone-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s12);padding:0 var(--s4)}
.phone-screen{display:flex;flex-direction:column;gap:var(--s8)}
.mini{background:var(--soft);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--s12)}
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s8)}
.bar{height:7px;border-radius:var(--r-pill);background:var(--border);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:var(--green);border-radius:var(--r-pill)}
.big-money{font-size:27px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16)}
.vs-col{border-radius:var(--r-md);padding:var(--s24);border:1px solid var(--border);background:var(--card)}
.vs-col.them{background:var(--soft)}
.vs-col.us{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.vs-col h3{font-size:17px;font-weight:800;margin-bottom:var(--s16);display:flex;align-items:center;gap:8px}
.vs-list{list-style:none;display:flex;flex-direction:column;gap:var(--s12)}
.vs-list li{display:flex;gap:10px;font-size:15px;line-height:1.5}
.vs-list svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px}
.vs-col.them .vs-list svg{color:var(--muted)}
.vs-col.us .vs-list svg{color:var(--ok-fg)}
.vs-col.them .vs-list li{color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s16)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s16)}
.feature{display:flex;flex-direction:column;gap:var(--s12)}
.feature .title{margin-top:var(--s4)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s16)}
.stat{text-align:center;padding:var(--s16);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md)}
.stat .money{font-size:26px;display:block;color:var(--green-dark)}
.path{border-radius:var(--r-lg);padding:var(--s40);border:1px solid var(--border);background:var(--card)}
.path .eyebrow{margin-bottom:var(--s12)}
.path ul{list-style:none;display:flex;flex-direction:column;gap:var(--s12);margin:var(--s24) 0}
.path li{display:flex;gap:10px;font-size:15.5px;line-height:1.5}
.path li svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px;color:var(--ok-fg)}
.faq{display:flex;flex-direction:column;gap:var(--s12);max-width:76ch}
details.qa{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s16)}
details.qa summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:var(--s12);align-items:flex-start}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";font-size:21px;font-weight:700;color:var(--green-dark);line-height:1;flex:0 0 auto}
details.qa[open] summary::after{content:"−"}
details.qa p{margin-top:var(--s12);color:var(--muted);font-size:15px;line-height:1.6}
.cta-band{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s40);text-align:center}
.cta-band .btn{margin-top:var(--s24)}
.cta-actions{display:flex;gap:var(--s12);justify-content:center;flex-wrap:wrap;margin-top:var(--s24)}
.cta-actions .btn{margin-top:0}

/* ====================== 4a. BAŞLIK & ALT BİLGİ ====================== */
.header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.header .container{max-width:1180px; margin:0 auto; padding:0 16px;}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px;}
.header .logo{display:flex; align-items:center; gap:9px; flex:0 0 auto; font-weight:800; font-size:19px; letter-spacing:-.01em; color:var(--text); text-decoration:none;}
.header .logo-mark{width:34px; height:34px; border-radius:9px; object-fit:cover; background:none; box-shadow:none;}
.header .logo span, .header .logo b{color:var(--green); font-weight:800}
.header .nav{display:flex; gap:22px; align-items:center}
.header .nav a{font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .15s;}
.header .nav a:hover{color:var(--text)}
.header-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.header .lang{display:flex; gap:2px; background:var(--soft); padding:3px; border-radius:999px; border:1px solid var(--border);}
.header .lang a{padding:5px 11px; border-radius:999px; text-decoration:none; font-size:12.5px; font-weight:700; color:var(--muted);}
.header .lang a.on, .header .lang a.active{background:var(--green); color:#06281D;}
.menu-btn{display:none; width:42px; height:42px; border-radius:10px; background:var(--soft); border:1px solid var(--border); color:var(--text); align-items:center; justify-content:center; cursor:pointer; padding:0;}
.header a:focus-visible, .menu-btn:focus-visible{outline:3px solid var(--green); outline-offset:2px;}
.footer{background:var(--bg); color:var(--text); border-top:1px solid var(--border); padding:40px 0 24px; margin-top:64px;}
.footer .container{max-width:1180px; margin:0 auto; padding:0 16px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:24px; align-items:start;}
.footer-grid > div{min-width:0}
.footer .logo{display:flex; align-items:center; gap:9px; margin-bottom:12px; font-weight:800; font-size:19px; color:var(--text); text-decoration:none;}
.footer .logo-mark{width:34px; height:34px; border-radius:9px; object-fit:cover; background:none; box-shadow:none;}
.footer .logo span, .footer .logo b{color:var(--green)}
.footer h4{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 12px;}
.footer a{display:block; font-size:14.5px; color:var(--muted); padding:5px 0; text-decoration:none; transition:color .15s;}
.footer a:hover{color:var(--green)}
.footer p{color:var(--muted); font-size:13.5px; line-height:1.6; margin:0}
.footer ul{list-style:none; margin:0; padding:0}
.footer-social{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.footer-social a{padding:0; font-size:19px}
.footer-bottom{margin-top:24px; padding-top:16px; border-top:1px solid var(--border); display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between;}
.footer-bottom p{font-size:13px}
.footer-bottom a{display:inline; color:var(--muted)}

/* ====================== 4b. ESKİ NESİL BİLEŞENLER ======================
   style.css ve 11 gömülü sürümden otomatik çıkarıldı;
   özellik düzeyinde birleştirildi, marka renkleri güncellendi. */
/* ---- eski nesil bilesenler (otomatik cikarildi) ---- */
.appcard{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;text-decoration:none;transition:transform .15s,border-color .15s}
.appcard .go{color:var(--gold);font-weight:700;font-size:14px}
.appcard h3{color:var(--text)}
.appcard p{margin-bottom:8px;font-size:15px}
.appcard:hover{transform:translateY(-3px);border-color:rgba(255,147,0,.45);text-decoration:none}
.article{max-width:780px;margin:0 auto;padding:60px 0}
.article .crumbs{font-size:13px;color:var(--text-3);margin-bottom:14px}
.article .crumbs a{color:var(--orange)}
.article .meta{display:flex;gap:20px;color:var(--text-3);font-size:14px;margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.article h1{font-size:clamp(28px,4.5vw,44px);font-weight:800;line-height:1.15;letter-spacing:-.5px;margin-bottom:18px}
.article-body .info-box{background:linear-gradient(135deg,rgba(255,147,0,.08),rgba(0,199,132,.06));border:1px solid rgba(255,147,0,.25);border-radius:14px;padding:20px 24px;margin:24px 0}
.article-body .info-box b{color:var(--gold);display:block;margin-bottom:6px;font-size:15px}
.article-body blockquote{border-left:4px solid var(--pink);padding:18px 22px;margin:24px 0;background:rgba(0,199,132,.06);border-radius:0 14px 14px 0;font-style:italic;color:var(--text-2)}
.article-body h2{font-size:26px;font-weight:700;margin:36px 0 14px;letter-spacing:-.3px}
.article-body h3{font-size:21px;font-weight:700;margin:28px 0 12px}
.article-body li{margin-bottom:8px}
.article-body p{color:var(--text);font-size:17px;line-height:1.8;margin-bottom:16px}
.article-body strong{color:var(--text)}
.article-body ul,.article-body ol{margin:0 0 18px 22px;color:var(--text);font-size:16.5px;line-height:1.8}
.btn-alt{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-alt:hover{transform:translateY(-2px);text-decoration:none}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--border)}
.btn-gold{background:var(--grad-2);color:#06281D;box-shadow:0 8px 24px rgba(255,147,0,.35)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-wa{background:#25D366;color:#fff;display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;font-weight:700;font-size:15px;margin-top:10px}
.btn-wa:hover{filter:brightness(1.08);transform:translateY(-2px);text-decoration:none}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.calc-cell .lbl{font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.callout{background:linear-gradient(135deg,rgba(255,147,0,.08),rgba(0,199,132,.08));border:1px solid rgba(255,147,0,.25);border-radius:14px;padding:22px;margin:22px 0}
.callout h3{margin-top:0;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chips a{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--text-2)}
.chips a:hover{color:var(--text);border-color:rgba(255,147,0,.45);text-decoration:none}
.code{font-size:110px;font-weight:900;letter-spacing:-4px;line-height:1;background:var(--grad-2);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.crumb{font-size:13px;color:var(--text-3);margin-bottom:14px;text-align:left}
.crumb a{color:var(--text-3)}
.cta-banner{background:linear-gradient(135deg,rgba(0,199,132,.14),rgba(124,58,237,.18));border:1px solid rgba(0,199,132,.3);border-radius:var(--r-lg);padding:50px;text-align:center;position:relative;overflow:hidden}
.cta-banner .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-banner h2{font-size:clamp(26px,3.5vw,38px);font-weight:800;margin-bottom:14px;letter-spacing:-.5px}
.cta-banner h2 span{background:var(--grad-2);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-banner p{color:var(--text-2);font-size:17px;margin-bottom:28px;max-width:600px;margin-left:auto;margin-right:auto}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 0 0,rgba(255,147,0,.12),transparent 70%);pointer-events:none}
.cta-box{background:linear-gradient(135deg,rgba(0,199,132,.10),rgba(0,199,132,.04));border:1px solid rgba(0,199,132,.30);padding:28px;border-radius:14px;margin:24px 0;text-align:center}
.cta-box h3{color:#00C784;margin-top:0;margin-bottom:10px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.dl-btn{display:flex;align-items:center;gap:12px;padding:14px 22px;background:#fff;color:#000;border-radius:14px;font-weight:600;min-width:200px;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.dl-btn .ico{font-size:32px}
.dl-btn .lbl{display:flex;flex-direction:column;text-align:left;line-height:1.2}
.dl-btn .lbl small{font-size:11px;color:#555;font-weight:500}
.dl-btn .lbl span{font-size:16px;font-weight:700}
.dl-btn:hover{transform:translateY(-2px);text-decoration:none}
.dl-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:24px 0}
.fab-wa{position:fixed;bottom:24px;right:24px;z-index:99;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;font-size:30px;color:#fff;box-shadow:0 12px 30px rgba(37,211,102,.4);transition:.3s}
.fab-wa::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #25D366;opacity:.4;animation:ping 2s infinite}
.fab-wa:hover{transform:scale(1.1)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 24px}
.faq-a p{color:var(--text-2);font-size:15px;line-height:1.7}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.3s;margin-bottom:10px;padding:14px 18px;cursor:pointer}
.faq-item p{margin-bottom:0;font-size:16px;color:var(--text-2)}
.faq-item summary{font-weight:600;color:var(--text);list-style:none;outline:none;font-size:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item.open{border-color:rgba(0,199,132,.4);background:var(--surface-2)}
.faq-item.open .faq-a{max-height:600px;padding:0 24px 22px}
.faq-item.open .faq-q .arr{transform:rotate(180deg);background:var(--grad-1)}
.faq-item[open] summary{margin-bottom:10px}
.faq-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-q{padding:20px 24px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer}
.faq-q .arr{width:28px;height:28px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;transition:.3s;flex-shrink:0}
.floating-card .ico{width:42px;height:42px;border-radius:12px;background:var(--grad-1);display:grid;place-items:center;font-size:22px}
.floating-card .ico.gold{background:var(--grad-2)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:18px 0}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--gold);margin-bottom:22px}
.hero-badge .pulse{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 0 rgba(0,199,132,.6);animation:pulse 2s infinite}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stat .lbl{font-size:13px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.hero-stat .num{font-size:30px;font-weight:800;background:var(--grad-2);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats{display:flex;gap:36px;margin-top:40px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:240px 1fr;gap:8px 22px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;margin:18px 0}
.kv dd{color:var(--text);font-size:15px;padding:4px 0}
.kv dt{color:var(--text-3);font-size:14px;padding:4px 0}
.note{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--pink);padding:18px 20px;border-radius:10px;margin:18px 0}
.note p:last-child{margin-bottom:0}
.ok-box{background:linear-gradient(135deg,rgba(0,199,132,.10),rgba(0,199,132,.04));border:1px solid rgba(0,199,132,.30);border-radius:12px;padding:18px 20px;margin:18px 0}
.ok-box b{color:#00C784;display:block;margin-bottom:6px}
.pill{display:inline-block;padding:4px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;font-size:13px;color:var(--text);margin:3px}
.plat-earn .lbl{font-size:12px;color:var(--text-3);text-transform:uppercase}
.quick{margin-top:30px;font-size:14px;color:var(--text-3)}
.quick a{margin:0 8px}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:18px 0}
.related a{background:var(--surface);border:1px solid var(--border);padding:14px 18px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:500;font-size:14px}
.related a:hover{background:var(--surface-2);text-decoration:none}
.section-tag{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(0,199,132,.15);color:var(--orange);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
.short-answer{font-size:17px;font-weight:600;color:var(--text);margin:16px 0}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;position:relative;transition:.3s}
.step h3{font-size:19px;margin:14px 0 10px;font-weight:700}
.step p{color:var(--text-2);font-size:14.5px}
.step-icon{font-size:34px;margin-bottom:6px}
.step-num{position:absolute;top:-14px;left:24px;width:36px;height:36px;border-radius:50%;background:var(--grad-1);display:grid;place-items:center;font-weight:800;font-size:15px;box-shadow:var(--shadow-pink)}
.step:hover{transform:translateY(-6px);border-color:rgba(0,199,132,.4);background:var(--surface-2)}
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border-radius:12px;overflow:hidden;border:1px solid var(--border);margin:16px 0}
.tbl td{padding:12px 16px;border-top:1px solid var(--border);font-size:14px;color:var(--text)}
.tbl td:first-child{color:var(--text-2);width:44%}
.tbl th{background:var(--bg-2);text-align:left;padding:12px 16px;font-size:13px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.tblwrap{overflow-x:auto;margin:18px 0;border:1px solid var(--border);border-radius:12px}
.tc-body{max-width:880px;margin:0 auto;font-size:17px;line-height:1.8;color:var(--text-2,var(--muted))}
.tc-body ul{margin-left:24px}
.tc-card{background:var(--surface,var(--card));border:1px solid var(--border,var(--soft));border-radius:14px;padding:20px}
.tc-card h3{font-size:18px;margin-bottom:8px;color:var(--text)}
.tc-card p{font-size:15px;color:var(--text-2,var(--muted))}
.tc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:24px}
.tc-h3{font-size:20px;color:var(--text);margin-top:28px;margin-bottom:10px}
.tc-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}
.tc-table caption{caption-side:top;text-align:left;font-size:14px;color:var(--text-3,#9a9aa8);padding-bottom:10px;line-height:1.6}
.tc-table td{color:var(--text-2,var(--muted))}
.tc-table th,.tc-table td{padding:12px 14px;text-align:left;border:1px solid var(--border,var(--soft));vertical-align:top}
.tc-table th[scope="row"]{background:transparent;color:var(--text);font-weight:600}
.tc-table thead th{background:var(--surface,var(--card));color:var(--text)}
.testi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;position:relative}
.testi p{font-size:15.5px;color:var(--text);line-height:1.7;margin-bottom:20px;font-style:italic}
.testi-avatar{width:48px;height:48px;border-radius:50%;background:var(--grad-1);display:grid;place-items:center;font-weight:800;font-size:18px;color:var(--text)}
.testi-earn{position:absolute;top:20px;right:20px;background:rgba(255,147,0,.15);color:var(--gold);padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}
.testi-name b{display:block;font-size:14px}
.testi-name span{font-size:12px;color:var(--text-3)}
.testi-stars{color:var(--gold);font-size:16px;margin-bottom:14px;letter-spacing:2px}
.testi-user{display:flex;align-items:center;gap:12px}
.tldr{background:linear-gradient(135deg,rgba(255,147,0,.10),rgba(0,199,132,.08));border-left:4px solid var(--gold);padding:22px 24px;border-radius:10px;font-size:17px;color:var(--text);margin:20px 0;text-align:left;margin-top:14px}
.warn-box{background:linear-gradient(135deg,rgba(255,80,80,.10),rgba(0,199,132,.06));border:1px solid rgba(255,80,80,.35);border-radius:12px;padding:18px 20px;margin:18px 0}
.warn-box b{color:#ff7b7b;display:block;margin-bottom:6px}
.wrap{max-width:560px;text-align:center}
.wrap p{font-size:16px;color:var(--text-2);margin-bottom:28px}

/* ---- animasyonlar ---- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.4);opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,199,132,.6)}70%{box-shadow:0 0 0 12px rgba(0,199,132,0)}100%{box-shadow:0 0 0 0 rgba(0,199,132,0)}}

/* ---- eski nesil duyarlilik ---- */
@media (max-width:680px){
  .cta-banner{padding:36px 22px}
  .dl-btn{min-width:240px}
  .floating-card .ico{width:36px;height:36px;font-size:18px}
  .hero-stat .num{font-size:24px}
  .hero-stats{gap:22px}
  .kv{grid-template-columns:1fr;gap:2px 0;padding:18px}
  .kv dd{padding:0 0 10px;border-bottom:1px solid var(--border)}
  .kv dt{padding:8px 0 2px}
}
@media (max-width:768px){
  .code{font-size:80px}
}

/* ====================== 5. ELLE KARARA BAĞLANAN ÇAKIŞMALAR ================
   İki stil neslinde aynı adı taşıyıp farklı şey yapan seçiciler. Otomatik
   birleştirme bunları sessizce yanlış tarafa çözerdi; burada her biri
   gerekçesiyle yazılı.
   ========================================================================= */

/* --- .section ---
   Eskiden gömülü sürümlere göre 80/56/52/36/30px arasında değişiyordu; bu
   tutarsızlıktı, tasarım kararı değil. Tek değere indi; yazı sayfalarında
   bölümler daha sık geldiği için daha dar. */
.section{padding:var(--s64) 0;position:relative}
:root[data-stil="yazi"] .section{padding:var(--s40) 0;border-top:1px solid var(--border)}
.section-head{max-width:72ch;margin-bottom:var(--s40)}
.section-head .h1{margin:var(--s12) 0}
.section-sm{padding:var(--s40) 0}

/* --- .steps: aynı adı taşıyan İKİ AYRI bileşen ---
   <div class="steps"> → 4 sütunlu kart ızgarası (.step kartları)
   <ol  class="steps"> → sayaçlı adım listesi (li::before numarayı basar)
   Markup'tan kesin ayrıldıkları için ikisi de yaşayabiliyor. Çoğunluk
   kuralıyla tek birine indirseydim diğerini kullanan 8 sayfa bozulurdu. */
div.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s24)}
ol.steps{counter-reset:step;list-style:none;margin:0;padding:0}
ol.steps li{
  counter-increment:step;position:relative;
  background:var(--soft);border:1px solid var(--border);
  border-radius:var(--r-md);padding:18px 18px 18px 62px;margin-bottom:12px;
}
ol.steps li::before{
  content:counter(step);position:absolute;left:18px;top:18px;
  width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#06281D;
  display:grid;place-items:center;font-weight:800;font-size:14px;
}
ol.steps li strong{color:var(--text);display:block;margin-bottom:4px}

/* --- Buton ailesi ---
   Eski sayfalarda buton hap biçimli + degrade, yeni sayfalarda yuvarlatılmış
   dikdörtgen + düz yeşildi. Tek sistem isteniyorsa ikisinden birini seçmek
   gerekiyor: tasarım sistemi (uygulamanın theme.dart'ı) kazanıyor, çünkü
   sitede ikna olan kişi uygulamayı açtığında aynı dili görmeli.
   Eski varyantlar korunuyor ama aynı biçime getiriliyor. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:var(--r-md);
  font-family:inherit;font-size:15.5px;font-weight:700;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.btn-primary{background:var(--green);color:#06281D;box-shadow:0 4px 14px rgba(0,199,132,.3)}
.btn-primary:hover{background:var(--green-dark)}
.btn-outline{background:var(--card);color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:var(--green)}
.btn-lg{padding:17px 30px;font-size:16.5px}
.btn-block{width:100%}
/* WhatsApp butonu markanın değil, WhatsApp'ın rengini taşır — tanınırlık */
.btn-wa{background:#25D366;color:#fff;border-radius:var(--r-md)}
.btn-wa:hover{filter:brightness(1.06)}
.btn-alt,.btn-ghost{background:var(--soft);color:var(--text);border:1px solid var(--border)}
.btn-alt:hover,.btn-ghost:hover{border-color:var(--green)}
.btn-gold{background:var(--orange);color:#2A1700;box-shadow:0 4px 14px rgba(255,147,0,.3)}
.btn-gold:hover{filter:brightness(1.05)}
.btns{display:flex;gap:var(--s12);flex-wrap:wrap}

/* --- Otomatik çıkarmanın kaçırdığı iki kural ---
   .big yalnızca 400 bayttan küçük bir satır içi blokta tanımlıydı (çıkarıcı
   o blokları atlıyor), .hero-copy ise yalnızca as.css'in medya sorgusunda.
   İkisi de sayfalarda kullanılıyor, elle ekleniyor. */
.big{font-size:26px;font-weight:800;margin-bottom:6px;line-height:1.2}

/* --- Başlık ve alt bilgi genişliği ---
   chrome.css'te 1180px sabitti, gövde ise 1140px kullanıyordu: logo ve menü
   içerik kenarından 20px dışarı taşıyordu. Tek değere bağlandı.
   Yazı sayfalarında İÇERİK daralır (920px) ama menü/alt bilgi daralmaz —
   okuma genişliği metne aittir, sayfa çerçevesine değil. */
:root .header .container,
:root .footer .container{max-width:var(--container);padding:0 var(--s16)}

/* --- Geniş içerik taşmasın ---
   Eski sayfalardaki kazanç/karşılaştırma tabloları telefonda sayfanın
   kendisini yatay kaydırıyordu (ölçüm: 375px ekranda tablo 387px). Artık
   tablo kendi içinde kayıyor, sayfa yerinde duruyor. */
.tblwrap,.tc-cards,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
main pre,main code{overflow-x:auto;max-width:100%}

/* --- Yüzen WhatsApp düğmesi: iki nesilde de duruyor --- */
.fab-wa{
  position:fixed;right:18px;bottom:18px;z-index:60;
  width:54px;height:54px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.4);
}
.fab-wa svg,.fab-wa img{width:28px;height:28px}

/* ====================== 6. DUYARLILIK ======================
   Eskiden üç ayrı kırılım dizisi vardı: as.css 960/780/520, style.css
   980/900/680, chrome 1000/860/780/560/400. Aynı sayfada iki dizi birden
   çalıştığında ara genişliklerde düzen bozuluyordu. Tek dizi: 1000/860/780/
   560/400. */
/* NOT: menü kuralları ".header .nav" ile yazılmalı. Başlık bölümü menüyü
   ".header .nav{display:flex}" (özgüllük 0,2,0) ile tanımlıyor; burada düz
   ".nav" (0,1,0) yazılırsa sıradan bağımsız KAYBEDER ve mobilde menü
   gizlenmez — telefonda sayfa yatay taşar. */
@media (max-width:1000px){
  .header .nav{gap:var(--s16)}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s24)}
  /* MOBİLDE BAŞLIK ÖNCE: başlık ve CTA ekranın altında kalmamalı */
  .hero-copy{order:1}
  .hero-visual{order:2}
  div.steps{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .header .nav{display:none}
  .header .menu-btn{display:flex}
  .header .nav.open{
    display:flex;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-bottom:1px solid var(--border);
    padding:var(--s8) var(--s16);
  }
  .header .nav.open a{padding:13px 0;border-bottom:1px solid var(--border);width:100%}
  .header .nav.open a:last-child{border-bottom:0}
  .vs{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .section{padding:var(--s40) 0}
  .path,.cta-band{padding:var(--s24)}
}
@media (max-width:560px){
  .nav-cta{display:none}
  .grid-3{grid-template-columns:1fr}
  .fork{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-actions .btn{width:100%}
  div.steps{grid-template-columns:1fr}
}
@media (max-width:400px){
  .logo{font-size:17px}
  .footer-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .header,.footer,.fab-wa,.nav-cta,.cta-band,.cta-banner{display:none!important}
  body{background:#fff;color:#000}
  .container{max-width:none;padding:0}
}