/* Spotreach panel stili.
   Eskiden dashboard.py içindeki BASE dizesine gömülüydü; her istekte Jinja
   tarafından yeniden derleniyordu ve tarayıcı önbelleğe alamıyordu.

   Palet pazarlama sitesiyle aynı (spotreach_site/index.html): kâğıt zemin,
   mürekkep metin, tek vurgu mürekkep yeşili. Panel önce koyu/mint idi ve site
   yeniden tasarlanınca iki yüzey iki ayrı ürün gibi görünmeye başlamıştı. */

/* Marka yazı tipi KENDİ SUNUCUMUZDAN gelir. Önce fonts.googleapis.com'dan
   çekiliyordu: her panel ziyaretçisi Google'a bir istek atıyordu (kiracının
   panele girdiği an üçüncü tarafa sızıyordu), CSP'de iki dış kaynağa izin
   vermek gerekiyordu ve Google'a erişilemeyen bir ağda panel yedek yazı
   tipine düşüyordu. Dosyalar spotreach_site/assets/fonts ile aynı. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
    U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   TASARIM SİSTEMİ
   Palet ve tipografi pazarlama sitesiyle ORTAK (kâğıt zemin, mürekkep metin,
   tek aksan mürekkep yeşili). Panel bir ARAÇ: süsleme yok, yoğunluk var.

   İki karar bu dosyanın omurgasını belirledi:
   1. Yoğun bir liste kart duvarıyla okunmaz. Lead'ler kutulardan çıkarılıp
      1px kurallarla ayrılmış satırlara alındı; rakamlar mono, çapa solda.
   2. İmza öğesi üründen çıkar. Sitede kanıt cümlesindeki sinyal kelimesi sarı
      kalemle işaretleniyordu; panelde o iz yoktu. Artık var (--iz), ve
      dekorasyon değil: lead'i üreten matcher'ın bulduğu aralık.
   ========================================================================== */
:root{
  /* Beş rol + iki durum + bir imza. Fazlası yok. */
  --kagit:#f5f6f4;        /* zemin */
  --yuzey:#fdfdfc;        /* yükseltilmiş yüzey: yalnız form ve diyalog */
  --cizgi:#dcdfd8;        /* 1px kural */
  --cizgi-ince:#e7e9e3;   /* liste içi ayraç */
  --murekkep:#14181b;     /* metin */
  --soluk:#5f686d;        /* ikincil metin */
  --yesil:#0a6b4a;        /* TEK aksan; sayfa boyunca kilitli */
  --yesil-zemin:#e0efe7;
  --yesil-cizgi:rgba(10,107,74,.3);
  --kehribar:#8a6410;     /* durum: kapasite haberi, bayat sinyal */
  --kehribar-zemin:#fdf6e6;
  --kehribar-cizgi:rgba(138,100,16,.32);
  --kirmizi:#a3231f;      /* durum: abonelik durdu */
  --kirmizi-zemin:rgba(176,42,42,.06);
  --kirmizi-cizgi:rgba(176,42,42,.28);
  --tukendi-zemin:#fbeee6;  /* havuz tükendi: kehribardan bir tık daha koyu */
  --tukendi-cizgi:rgba(138,60,16,.3);
  --iz:#ffe27a;           /* İMZA: kanıtta sinyali taşıyan ifade */
  --iz-metin:#14181b;     /* iz üstündeki yazı: HER İKİ temada koyu */

  /* Bileşen rolleri: koyu temada renkleri ayrı ayarlanır. */
  --buton-zemin:var(--yesil); --buton-metin:#fff;
  --girdi-hover:#c8ccc3;
  --golge:rgba(20,24,27,.28);

  /* Shape Lock - üç kademe, karışım yok:
     kontrol (girdi/buton) - yüzey (kart/diyalog) - pill (yalnız durum çipi) */
  --r-kontrol:6px; --r-yuzey:10px; --r-pill:999px;

  --mono:ui-monospace,'Cascadia Code',Consolas,monospace;
  --brand:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --govde:system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Eski adlar: şablonlar ve signup bölümü bunlara bağlı. Tek kaynak yukarısı. */
  --bg:var(--kagit); --panel:var(--yuzey); --line:var(--cizgi);
  --txt:var(--murekkep); --dim:var(--soluk); --acc:var(--yesil); --a:var(--yesil);
  --b:var(--kehribar); --acc-soft:var(--yesil-zemin); --acc-line:var(--yesil-cizgi);
  --mark:var(--iz);
}
*{box-sizing:border-box;margin:0}
body{background:var(--kagit);color:var(--murekkep);
     font:15px/1.55 var(--govde);min-height:100vh;
     -webkit-font-smoothing:antialiased}
a{color:var(--yesil);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--yesil);outline-offset:2px;border-radius:var(--r-kontrol)}
.wrap{max-width:1040px;margin:0 auto;padding:26px 22px 60px}

/* --- başlık + kota metresi ------------------------------------------------
   Kota eskiden "0/25" yazısının yanındaki soluk bir çubuktu; müşterinin ayın
   hangi noktasında olduğunu gösteren tek sayı okunmuyordu. Artık metre
   rakamın ALTINDA ve rakam mono: bakılan şey o. */
header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
       flex-wrap:wrap;margin-bottom:22px;padding-bottom:14px;
       border-bottom:1px solid var(--cizgi)}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--brand);font-weight:600;
      font-size:19px;letter-spacing:-.02em;color:var(--murekkep)}
.logo .mark{flex:0 0 22px;width:22px;height:22px;color:var(--yesil)}
.logo .who{color:var(--soluk);font-family:var(--govde);font-weight:400;
      font-size:13px;letter-spacing:0}
.quota{display:flex;align-items:flex-end;gap:18px;font-size:13px;color:var(--soluk)}
.kota-metre{min-width:150px}
.kota-sayi{font-family:var(--mono);font-size:12.5px;color:var(--soluk);
      display:flex;justify-content:space-between;gap:12px;margin-bottom:5px}
.kota-sayi b{color:var(--murekkep);font-weight:700}
.bar{display:block;height:4px;background:var(--cizgi);border-radius:var(--r-pill);
     overflow:hidden}
/* Genişlik istek başına değişir; head'deki nonce'lu style bloğu geçersiz
   kılar. Öznitelikle yazılamaz: style-src 'unsafe-inline' gerektirirdi. */
.bar i{display:block;height:100%;background:var(--yesil);width:0;border-radius:inherit}
.quota-eylem{display:flex;align-items:center;gap:14px;font-size:13px;padding-bottom:1px}

/* --- yüzeyler ------------------------------------------------------------- */
.card{background:var(--yuzey);border:1px solid var(--cizgi);
      border-radius:var(--r-yuzey);padding:18px 20px;margin-bottom:14px}

/* --- lead listesi ---------------------------------------------------------
   Kart duvarı bırakıldı. Her lead bir satır: solda mono skor çapası, ortada
   kimlik ve kanıt. Kilitli ve açık satır AYNI iskeleti kullanır - eskiden
   kilitli kart açık karttan daha okunaklıydı, yani ödenmemiş veri ödenmişten
   iyi görünüyordu. */
.leadlist{list-style:none;padding:0;margin:2px 0 0;border-top:1px solid var(--cizgi)}
.lead{display:grid;grid-template-columns:74px minmax(0,1fr);gap:20px;
      padding:20px 6px;border-bottom:1px solid var(--cizgi-ince)}
.lead:last-child{border-bottom:1px solid var(--cizgi)}
.lead-skor{text-align:right;padding-top:2px}
.lead-puan{display:block;font-family:var(--mono);font-size:25px;font-weight:700;
      letter-spacing:-.04em;line-height:1;color:var(--murekkep);
      font-variant-numeric:tabular-nums}
.lead-onuzerinden{font-family:var(--mono);font-size:11px;color:var(--soluk);
      display:block;margin-top:3px}
.lead-kademe{display:inline-block;margin-top:8px;font-family:var(--mono);
      font-size:11px;font-weight:700;letter-spacing:.04em;
      padding:1px 7px;border-radius:var(--r-kontrol)}
.lead-kademe.A{background:var(--yesil-zemin);color:var(--yesil);
      border:1px solid var(--yesil-cizgi)}
.lead-kademe.B{background:var(--kehribar-zemin);color:var(--kehribar);
      border:1px solid var(--kehribar-cizgi)}
.lead-ad{font-size:16.5px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.lead-meta{color:var(--soluk);font-size:12.5px;margin-top:4px;line-height:1.5}
.lead-satir{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}

/* Kanıt: satırın kalbi. Sol kural, işaretli ifade. */
.ev{margin-top:12px;border-left:2px solid var(--cizgi);padding-left:13px}
.ev p{color:var(--soluk);font-size:13.5px;margin:7px 0;line-height:1.55}
.ev .puanbaslik{font-family:var(--mono);font-size:11.5px;color:var(--soluk);
      display:block;margin-bottom:2px}
.ev q{color:var(--murekkep);font-style:normal}
.ev mark{background:var(--iz);color:var(--iz-metin);padding:.5px 2px;
      border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ev-link{display:inline-block;margin-top:7px;font-size:13px}

/* Kilitli satırın gövdesi: kimlik yok, sebep ve tek eylem var. */
.kilit-govde{display:flex;justify-content:space-between;align-items:center;
      gap:14px;flex-wrap:wrap;margin-top:11px;padding:12px 14px;
      border:1px dashed var(--cizgi);border-radius:var(--r-kontrol)}
.kilit-govde span{color:var(--soluk);font-size:13px;max-width:52ch}
.kilitli-uyari{color:var(--soluk);font-size:13px}

/* --- çipler ve rozetler --------------------------------------------------- */
.cat{display:inline-block;font-size:12px;color:var(--yesil);
     border:1px solid var(--yesil-cizgi);background:var(--yesil-zemin);
     padding:1.5px 9px;border-radius:var(--r-pill)}
.score{font-family:var(--mono);color:var(--soluk);font-size:12.5px}
.pbadge{display:inline-block;font-size:11.5px;color:var(--soluk);
        border:1px solid var(--cizgi);padding:1px 8px;border-radius:var(--r-kontrol)}
.yeni-pot{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;
        letter-spacing:.06em;color:var(--buton-metin);background:var(--buton-zemin);
        padding:2px 7px;border-radius:var(--r-kontrol);vertical-align:middle}
.yenirozet{display:inline-block;font-size:11.5px;color:var(--yesil);
        background:var(--yesil-zemin);border:1px solid var(--yesil-cizgi);
        padding:1px 8px;border-radius:var(--r-kontrol);vertical-align:middle}
.lead.yeni{background:linear-gradient(90deg,var(--yesil-zemin),transparent 62%);
        box-shadow:inset 3px 0 0 var(--yesil)}

/* Teklif ve vurgular. Vurgu listesi eskiden dikey yığılıyordu. */
.oneri{margin-top:9px;font-size:13.5px;color:var(--soluk)}
.oneri b{color:var(--murekkep)}
.yonler{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.yonler .lbl{font-size:12px;color:var(--soluk)}
.yon{font-size:12px;color:var(--soluk);border:1px solid var(--cizgi);
     padding:1.5px 9px;border-radius:var(--r-pill)}
.contact .phone::before{content:"Phone ";font-family:var(--govde);
                        font-weight:400;color:var(--soluk)}
.contact{margin-top:11px;font-size:13px;color:var(--soluk);
     display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.contact a{font-family:var(--mono);font-size:12.5px}
.contact .phone{color:var(--yesil);font-weight:600}

/* --- düğmeler ------------------------------------------------------------- */
button,.btn{background:var(--buton-zemin);color:var(--buton-metin);border:0;border-radius:var(--r-kontrol);
       padding:8px 16px;font:600 13.5px var(--govde);cursor:pointer;
       display:inline-block;transition:filter .15s ease-out}
button:hover,.btn:hover{filter:brightness(1.12);text-decoration:none}
.ghost{background:transparent;color:var(--murekkep);border:1px solid var(--cizgi);
       font-weight:500}
.ghost:hover{border-color:var(--yesil);filter:none}
.linkbtn{background:none;border:0;padding:0;color:var(--soluk);font:inherit;
    font-size:13px;cursor:pointer}
.linkbtn:hover{color:var(--murekkep);filter:none}
form.inline{display:inline}

/* --- girdiler ------------------------------------------------------------- */
label{display:block;font-size:12.5px;color:var(--soluk);margin-top:2px}
input[type=password],input[type=text],input[type=email],input[type=number],
input[type=tel],select,textarea{
   width:100%;background:var(--kagit);border:1px solid var(--cizgi);
   border-radius:var(--r-kontrol);padding:9px 11px;color:var(--murekkep);
   font:14px var(--govde);margin:8px 0 13px}
input[type=password],input[type=text],input[type=email],input[type=tel]{
  font-family:var(--mono);font-size:13.5px}
textarea{font:13px var(--mono);resize:vertical;min-height:70px;margin:8px 0 13px}
textarea.tall{min-height:110px}
input:hover,select:hover,textarea:hover{border-color:var(--girdi-hover)}
/* Bal küpü: insan görmez, doldurulursa bot sayılır. display:none DEĞİL. */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;
    overflow:hidden}

/* --- bildirimler ---------------------------------------------------------- */
.flash{background:var(--yesil-zemin);border:1px solid var(--yesil-cizgi);color:var(--yesil);
       padding:10px 14px;border-radius:var(--r-kontrol);margin-bottom:16px;font-size:13.5px}
.flash.warn{background:var(--kehribar-zemin);border-color:var(--kehribar-cizgi);color:var(--kehribar)}
.abon{padding:11px 15px;border-radius:var(--r-kontrol);margin-bottom:16px;
      font-size:13.5px;line-height:1.55}
.abon.uyari{background:var(--kehribar-zemin);border:1px solid var(--kehribar-cizgi);
      border-left:3px solid var(--kehribar);color:var(--kehribar)}
.abon.durdu{background:var(--kirmizi-zemin);border:1px solid var(--kirmizi-cizgi);
      border-left:3px solid var(--kirmizi);color:var(--kirmizi)}
.abon b{color:var(--murekkep)}
.empty{color:var(--soluk);text-align:center;padding:56px 0}

/* --- ürün sekmeleri ------------------------------------------------------- */
.ptabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.ptab{font-size:13px;color:var(--soluk);border:1px solid var(--cizgi);background:var(--yuzey);
      padding:6px 13px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:7px}
.ptab:hover{border-color:var(--yesil);color:var(--murekkep);text-decoration:none}
.ptab.on{background:var(--yesil-zemin);border-color:var(--yesil-cizgi);color:var(--murekkep);
      font-weight:600}
.pcount{font-family:var(--mono);font-size:11.5px;color:var(--soluk);background:var(--kagit);
        padding:1px 6px;border-radius:var(--r-pill)}
.ptab.on .pcount{color:var(--yesil)}
.ptab.add{border-style:dashed;border-color:var(--yesil-cizgi);color:var(--yesil)}
.ptab.add:hover{background:var(--yesil-zemin)}
.ptab.pending{cursor:default;background:transparent;border-style:dashed;
      color:var(--soluk)}
.ptab.pending:hover{border-color:var(--cizgi);color:var(--soluk)}

/* Havuz göstergesi. Kırmızı DEĞİL kehribar: bu bir arıza değil, kapasite
   haberi, ve çaresi hemen yanında duruyor. */
.pool-badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--kehribar);
        background:var(--kehribar-zemin);border:1px solid var(--kehribar-cizgi);
        padding:1px 6px;border-radius:var(--r-pill)}
.pool-note{display:flex;gap:14px;align-items:center;justify-content:space-between;
        flex-wrap:wrap;font-size:13.5px;color:var(--murekkep);background:var(--kehribar-zemin);
        border:1px solid var(--kehribar-cizgi);border-left:3px solid var(--kehribar);
        border-radius:var(--r-kontrol);padding:11px 14px;margin-bottom:16px}
.pool-note b{color:var(--kehribar)}
.pool-note.spent{background:var(--tukendi-zemin);border-color:var(--tukendi-cizgi)}
.pool-note .ghost{white-space:nowrap}

/* --- tarama şeridi + filtre ------------------------------------------------
   İkisi de eskiden dolu birer karttı ve lead listesiyle ağırlık yarışıyordu.
   Şerit haline getirildiler: zemin yok, altlarında tek kural. */
.tarama{display:flex;justify-content:space-between;align-items:center;gap:14px;
        flex-wrap:wrap;padding:0 0 12px;margin-bottom:14px;
        border-bottom:1px solid var(--cizgi-ince);font-size:12.5px}
.tarama .tarama-durum{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
        color:var(--soluk);text-align:right}
.tarama button{margin:0;padding:5px 12px;font-size:12.5px}
.tarama .hint-s{margin:0}
.isdurum{font-size:12.5px;color:var(--soluk);border:1px solid var(--cizgi);
        border-radius:var(--r-pill);padding:3px 10px}
.isdurum.running{color:var(--yesil);background:var(--yesil-zemin);border-color:var(--yesil-cizgi)}
.kosuhata{font-family:var(--mono);font-size:11.5px;color:var(--kehribar);
        max-width:100%;overflow-wrap:anywhere}

.filtre{padding:0 0 14px;margin-bottom:4px;border-bottom:1px solid var(--cizgi)}
.filtre form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filtre .alan{display:flex;flex-direction:column;min-width:124px;flex:1 1 124px}
.filtre .alan.genis{flex:2 1 200px}
.filtre label{margin:0 0 4px;font-size:11.5px}
.filtre input[type=text],.filtre select{margin:0;padding:6px 9px;font-size:13px}
.filtre .dugmeler{display:flex;gap:8px;align-items:center}
.filtre .dugmeler a{font-size:13px;color:var(--soluk)}

.topline{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
        margin:14px 0 2px;font-size:13px}

/* --- mesaj taslağı -------------------------------------------------------- */
/* Açılmış lead: solda kanıt, sağda hazır mesaj. Taslak sütunu dar tutulur
   (okunacak metin değil, kopyalanacak blok) ve uzun e-posta kendi içinde
   kayar; yoksa tek lead ekranı doldurup listeyi listelikten çıkarıyordu. */
.lead-icerik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);
             gap:22px;align-items:start}
.lead-sag{min-width:0}
@media (max-width:900px){
  .lead-icerik{grid-template-columns:1fr;gap:12px}
}
.lead-sag details.msg{border:1px solid var(--cizgi);border-radius:var(--r-yuzey);
                      background:var(--yuzey);padding:11px 13px;margin-top:9px}
.lead-sag .msgtxt{font-size:12.5px;margin-top:4px}
/* Uzun blok kendi içinde kayar: taslak sütunu kartın boyunu belirlememeli. */
.lead-sag pre.msgtxt{max-height:132px;overflow:auto}
.lead-sag .msglbl{margin-top:9px}
.lead-sag .msgbtn{margin-top:6px}
.lead-sag .msgnot{font-size:11.5px;line-height:1.45;margin-top:9px}
details.msg{margin-top:12px}
details.msg summary{cursor:pointer;font-size:13px;color:var(--yesil);list-style:none;
        display:inline-flex;align-items:center;gap:6px}
details.msg summary::-webkit-details-marker{display:none}
details.msg summary:hover{text-decoration:underline;text-underline-offset:2px}
details.msg[open] summary{margin-bottom:4px}
.msglbl{font-size:11px;color:var(--soluk);text-transform:uppercase;letter-spacing:.5px;
        margin:12px 0 5px}
.msgtxt{background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--r-kontrol);
        padding:11px 13px;font:13px/1.55 var(--mono);white-space:pre-wrap;
        color:var(--murekkep);margin:0}
.msgnot{font-size:12px;color:var(--soluk);margin-top:10px;line-height:1.5}
.msgbtn{margin-top:7px}

/* --- sayfalama ------------------------------------------------------------ */
.sayfalama{display:flex;gap:12px;align-items:center;justify-content:center;
           margin:24px 0 4px;font-size:13px;color:var(--soluk)}
.sayfalama .sayfabilgi{font-family:var(--mono)}
.sayfalama .btn{background:transparent;color:var(--murekkep);border:1px solid var(--cizgi)}
.sayfalama .btn.pas{opacity:.35;pointer-events:none}

/* --- giriş ---------------------------------------------------------------- */
.login{max-width:390px;margin:12vh auto 0}
.onaykutu{max-width:560px}
.onaykutu .buyuk{font-size:15px;line-height:1.6}

/* --- ölçü/yardımcı sınıflar ----------------------------------------------
   Bunlar eskiden style="..." öznitelikleriydi; CSP'de style-src
   'unsafe-inline' zorunlu kılıyorlardı. */
.narrow{max-width:660px;margin:6vh auto 0}
.form-col{max-width:620px}
.h2{font-family:var(--brand);font-size:21px;font-weight:600;letter-spacing:-.025em;
    margin-bottom:6px}
.lede{color:var(--soluk);font-size:14px;margin-bottom:20px;max-width:62ch}
.hint{color:var(--soluk);font-size:13.5px}
.hint-s{color:var(--soluk);font-size:13px}
.note{color:var(--soluk);font-size:12.5px;margin-top:12px}
.strong{color:var(--murekkep);font-weight:600}
.warn-b{color:var(--kehribar)}
.ok-title{color:var(--yesil)}
.navlink{color:var(--soluk)}
.m{font-family:var(--mono)}
.alannot{font-size:12px;color:var(--soluk);margin:-6px 0 13px;line-height:1.45}
.cats-row{margin-top:9px}
.row2{display:flex;gap:12px}
.row2 .col{flex:1}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:18px}
.plans .card{margin:0}
.card.hi{border-color:var(--yesil-cizgi)}
.plan-n{margin:6px 0}
.plan-p{font-size:17px;font-weight:700}
.plan-yr{margin-top:6px;font-size:12.5px;color:var(--soluk);line-height:1.45}
.plan-yr .save{color:var(--yesil);font-weight:600;white-space:nowrap}
.u-w100{width:100%}
.u-right{text-align:right}
.u-center{text-align:center}
.u-mb4{margin-bottom:4px}
.u-mb6{margin-bottom:6px}
.u-mt6{margin-top:6px}
.u-mt14{margin-top:14px}

@media (max-width:640px){
  .wrap{padding:20px 16px 48px}
  header{align-items:flex-start}
  .lead{grid-template-columns:56px minmax(0,1fr);gap:14px;padding:18px 0}
  .lead-puan{font-size:21px}
  .quota{width:100%;justify-content:space-between;align-items:flex-end}
  .kilit-govde{align-items:stretch}
  .kilit-govde form,.kilit-govde button{width:100%}
  /* Dokunma hedefleri. Ölçüldü: filtre alanları 29-34px, ürün sekmeleri 34px,
     başlıktaki CSV/çıkış 20px çıkıyordu; parmakla bu boyutlar ıskalanır.
     (Aynı kural kayıt formunda zaten vardı, panelde yoktu.) Cümle içindeki
     bağlantılar kapsam dışı: onlar metnin parçası, kontrol değil. */
  .filtre input[type=text],.filtre select,.filtre button,
  .ptab,.quota-eylem a,.linkbtn,.tarama button{min-height:44px}
  .filtre input[type=text],.filtre select{padding:10px 11px}
  /* Alanlar tam genişlik olunca filtre ~450px yer kaplıyor ve lead listesi
     ekranın çok altına düşüyordu. İkişerli: hedefler yine 44px, yükseklik
     yarıya iniyor. Arama alanı tek başına kalır (uzun metin girilir). */
  .filtre .alan{flex:1 1 calc(50% - 5px);min-width:0}
  .filtre .alan.genis{flex:1 1 100%}
  .filtre .dugmeler{flex:1 1 100%}
  .filtre button{padding:10px 18px;flex:1}
  .ptab{padding:10px 14px}
  .quota-eylem{gap:18px}
  .quota-eylem a,.linkbtn{display:inline-flex;align-items:center}
}

/* ==========================================================================
   KOYU TEMA
   Üç durum var: açık (varsayılan), koyu, ve "sistemi izle". Sistemi izleyen
   hâlde kök öğede data-theme YOKTUR, o yüzden medya sorgusu
   :root:not([data-theme="light"]) ile korunur — kullanıcı açık temayı ELLE
   seçtiyse sistem koyuya geçse bile seçim korunur.

   İki blok AYNI değerleri taşır (biri sistem tercihi, öteki elle seçim).
   Ayrışmaları tests/test_tema.py'de kilitli.

   color-scheme: tarayıcının kendi çizdiği yüzeyler (kaydırma çubuğu, açılır
   liste, otomatik doldurma) de temayla uyumlu olsun diye.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
  /* Roller TERSİNE DÖNER: markanın mürekkebi zemin, kâğıdı metin olur.
     Yeni bir renk ailesi icat edilmedi; aynı palet çevrildi. Yeşil yalnız
     okunabilirlik için açıldı (#4fb488), neon mint'e KAÇILMADI: koyu zemin +
     parlak mint kombinasyonu bu projede zaten bir kez reddedildi. Sarı iz
     aynen kalır, çünkü fosforlu kalem her iki temada da fosforlu kalemdir. */
  --kagit:#14181b; --yuzey:#1c2126; --cizgi:#2c333a; --cizgi-ince:#232a30;
  --murekkep:#e6e9e5; --soluk:#98a2a8;
  --yesil:#4fb488; --yesil-zemin:#12332a; --yesil-cizgi:rgba(79,180,136,.32);
  --kehribar:#d9a441; --kehribar-zemin:#33280f; --kehribar-cizgi:rgba(217,164,65,.32);
  --kirmizi:#e4756f; --kirmizi-zemin:#331a19; --kirmizi-cizgi:rgba(228,117,111,.3);
  --tukendi-zemin:#33220f; --tukendi-cizgi:rgba(217,140,65,.32);
  --buton-zemin:#0d7d57; --buton-metin:#fff;
  --girdi-hover:#3b444c;
  --golge:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  /* Roller TERSİNE DÖNER: markanın mürekkebi zemin, kâğıdı metin olur.
     Yeni bir renk ailesi icat edilmedi; aynı palet çevrildi. Yeşil yalnız
     okunabilirlik için açıldı (#4fb488), neon mint'e KAÇILMADI: koyu zemin +
     parlak mint kombinasyonu bu projede zaten bir kez reddedildi. Sarı iz
     aynen kalır, çünkü fosforlu kalem her iki temada da fosforlu kalemdir. */
  --kagit:#14181b; --yuzey:#1c2126; --cizgi:#2c333a; --cizgi-ince:#232a30;
  --murekkep:#e6e9e5; --soluk:#98a2a8;
  --yesil:#4fb488; --yesil-zemin:#12332a; --yesil-cizgi:rgba(79,180,136,.32);
  --kehribar:#d9a441; --kehribar-zemin:#33280f; --kehribar-cizgi:rgba(217,164,65,.32);
  --kirmizi:#e4756f; --kirmizi-zemin:#331a19; --kirmizi-cizgi:rgba(228,117,111,.3);
  --tukendi-zemin:#33220f; --tukendi-cizgi:rgba(217,140,65,.32);
  --buton-zemin:#0d7d57; --buton-metin:#fff;
  --girdi-hover:#3b444c;
  --golge:rgba(0,0,0,.5);
}
:root[data-theme="light"]{color-scheme:light}

/* Tema düğmesi: iki ikon üst üste, aktif olan görünür. Metin yerine ikon,
   çünkü düğme başlıktaki en önemsiz kontrol ve yer kaplamamalı. */
/* Giriş ekranlarında başlık yok: düğme kartın üstünde sağa yaslı durur. */
.tema-serit{max-width:390px;margin:12vh auto 10px;display:flex;justify-content:flex-end}
.op-giris ~ .tema-serit,.tema-serit+.op-giris{margin-top:16vh}
.login,.op-giris{margin-top:0}
/* Kayıt formunun üst şeridi zaten flex; düğme oraya oturur. */
.su-top{gap:12px}
.tema{background:none;border:1px solid var(--cizgi);border-radius:var(--r-kontrol);
      color:var(--soluk);padding:5px 8px;cursor:pointer;line-height:0;
      display:inline-flex;align-items:center}
.tema:hover{color:var(--murekkep);border-color:var(--yesil);filter:none}
.tema svg{width:15px;height:15px;display:block}
.tema .ay{display:none}
:root[data-theme="dark"] .tema .gunes,
:root[data-theme="dark"] .tema .ay{display:none}
:root[data-theme="dark"] .tema .ay{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema .gunes{display:none}
  :root:not([data-theme="light"]) .tema .ay{display:block}
}
:root[data-theme="light"] .tema .gunes{display:block}
:root[data-theme="light"] .tema .ay{display:none}

/* ==========================================================================
   ADIM ADIM KAYIT (signup)
   Palet siteden devralınır (kâğıt/mürekkep/mürekkep-yeşili). Tek yeni token
   --mark: fosforlu kalem sarısı ve TEK bir işi var — kanıt cümlesinde sinyali
   taşıyan kelimeyi işaretlemek. Formdaki kartta o iz BOŞ duruyor, çünkü henüz
   bulunmuş bir cümle yok ve uydurulmuş bir alıntı ürünün tek vaadini çürütür.
   ========================================================================== */
.su{max-width:1000px;margin:0 auto}
.su-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
        margin-bottom:34px}
.su-top .logo{font-size:19px}
.btn-quiet{color:var(--dim);font-size:13.5px}
.btn-quiet:hover{color:var(--txt)}

.su-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
         gap:48px;align-items:start}

/* ---- soru sütunu ------------------------------------------------------- */
.su-rail{display:none;align-items:center;gap:14px;margin-bottom:30px}
.su-js .su-rail{display:flex}
.su-bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.su-bar i{display:block;height:100%;width:14%;background:var(--acc);
          transition:width .35s cubic-bezier(.2,.7,.3,1)}
.su-count{font-family:var(--mono);font-size:11.5px;color:var(--dim);
          letter-spacing:.02em;white-space:nowrap}

.su-step{border:0;padding:0;margin:0 0 26px}
/* Adımlar YALNIZCA JS varken gizlenir; script düşerse form tek sayfa olur. */
.su-js .su-step{display:none;margin-bottom:0}
.su-js .su-step.on{display:block;animation:su-in .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes su-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .su-js .su-step.on{animation:none}
  .su-bar i{transition:none}
}

/* Soru, sayfadaki en büyük tipografik olay: form değil, sohbet sırası. */
.su-q{font-family:var(--brand);font-size:clamp(25px,3.2vw,33px);font-weight:600;
      letter-spacing:-.03em;line-height:1.12;color:var(--txt);
      padding:0;margin-bottom:18px;text-wrap:balance}
.su-lbl{display:block;font-size:13px;color:var(--dim);margin:16px 0 -4px}
.su-help{font-size:13px;color:var(--dim);line-height:1.5;margin-top:2px;max-width:46ch}
.su-help.warnish{color:var(--b)}
.su-step.eksik input,.su-step.eksik textarea{border-color:var(--b)}

/* Kaynak seçimi: iki büyük hedef, radyo düğmesi görünmez. */
.su-pick{display:grid;gap:10px}
.su-opt{display:block;position:relative;border:1px solid var(--line);border-radius:9px;
        padding:15px 17px;cursor:pointer;background:var(--panel);
        transition:border-color .16s,background .16s}
.su-opt:hover{border-color:var(--acc-line)}
.su-opt input{position:absolute;opacity:0;width:0;height:0}
.su-opt-t{display:block;font-weight:650;font-size:15.5px;color:var(--txt)}
.su-opt-d{display:block;font-size:13px;color:var(--dim);margin-top:4px;line-height:1.45}
.su-opt:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.su-opt:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}

.su-acts{display:flex;gap:10px;align-items:center;margin-top:26px}
.su-go{padding:11px 22px;font-size:14.5px}
.su-acts .ghost:disabled{opacity:.35;cursor:default}
.su-fine{margin-top:14px;font-size:12.5px;color:var(--dim)}

/* Şart onayı: dokunma hedefi etiketin tamamı, kutu tek başına değil. */
.su-kabul{display:flex;gap:10px;align-items:flex-start;margin-top:18px;min-height:44px;
          font-size:13.5px;line-height:1.5;color:var(--txt);cursor:pointer}
.su-kabul input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--acc)}
.su-kabul a,.su-help a{color:var(--acc);text-underline-offset:2px}
.su-step.eksik .su-kabul{color:var(--b)}

/* ---- imza: canlı lead kartı -------------------------------------------- */
.su-side{position:sticky;top:28px}
.su-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
         overflow:hidden;box-shadow:0 20px 40px -28px var(--golge)}
.su-card-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
           text-transform:uppercase;color:var(--dim);padding:11px 16px;
           border-bottom:1px solid var(--line)}
.su-card-b{padding:16px}
.su-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.su-card-top h3{font-size:16px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.su-card-who{font-size:12.5px;color:var(--dim);margin-top:4px}
.su-grade{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:700;
          color:var(--acc);background:var(--acc-soft);border:1px solid var(--acc-line);
          padding:2px 9px;border-radius:5px}
/* Doldurulmamış yuva: metin var ama sözü verilmemiş — italik ve soluk. */
.su-empty{color:var(--dim);font-weight:400;font-style:italic}

.su-quote{margin:16px 0;padding:13px 14px;background:var(--bg);
          border-left:2px solid var(--line);border-radius:0 6px 6px 0}
.su-mark{display:block;height:11px;width:62%;background:var(--mark);opacity:.5;
         border-radius:2px;margin-bottom:8px}
.su-quote-t{font-size:13px;color:var(--dim);font-style:italic;line-height:1.5}
.su-card-f{display:flex;gap:7px;flex-wrap:wrap;align-items:baseline;font-size:13px}
.su-card-lbl{color:var(--dim)}
.su-side-n{margin-top:14px;font-size:12.5px;color:var(--dim);line-height:1.55;max-width:34ch}

/* ---- planlar ----------------------------------------------------------- */
.su-plans{margin-top:64px;padding-top:34px;border-top:1px solid var(--line)}
.su-plans-h{font-family:var(--brand);font-size:20px;font-weight:600;
            letter-spacing:-.025em;color:var(--txt)}
.su-plans .plans{margin-top:16px}
.su-done{max-width:660px}

@media (max-width:860px){
  .su-grid{grid-template-columns:1fr;gap:30px}
  /* Kart mobilde soruların ALTINA iner: küçük ekranda önce cevap, sonra kanıt. */
  .su-side{position:static;order:2}
  .su-side-n{max-width:none}
  /* Dokunma hedefleri: ölçüldü, masaüstü ölçüsünde "Back" 36px ve girdi 38px
     çıkıyordu. Parmakla kullanılan bir formda 44px altı hedef ıskalanır. */
  .su-form input[type=text],.su-form select,.su-acts button{min-height:46px}
  .su-acts{gap:8px}
  .su-acts button{flex:1;padding:12px 16px}
}

/* ---- ekip ve çalışma alanları ------------------------------------------
   Ajans sayfaları: satır düzeni, kart değil. Her satır kendi formu (tek tık
   kaydeder), bu yüzden form ızgaraya oturuyor.                            */
.sayfa-ust{margin-bottom:14px}
.sayfa-h1{font-family:var(--brand);font-size:26px;font-weight:600;
          letter-spacing:-.02em;margin:0 0 6px}
.liste{width:100%;border-collapse:collapse;font-size:14px}
.liste th{text-align:left;font-weight:600;font-size:12.5px;color:var(--soluk);
          padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.liste td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);
          vertical-align:middle}
.liste td.mono{font-family:var(--mono);color:var(--soluk)}
.satir-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.satir-form input[type=text]{flex:1 1 220px;min-width:160px}
.satir-form input.dar,.satir-form input[type=number]{width:96px;flex:0 0 auto}
.satir-form select{flex:0 1 220px}
.satir-form .urun-ad{flex:1 1 220px;font-weight:550}
.flash.ok{border-color:var(--yesil-cizgi);background:var(--yesil-zemin);
          color:var(--yesil)}
.rapor-ozet{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
            gap:0;border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);
            margin-top:14px}
.ozet-hucre{padding:16px 18px 18px;border-right:1px solid var(--cizgi)}
.ozet-hucre:last-child{border-right:0}
.ozet-hucre .v{font-family:var(--mono);font-size:26px;font-weight:700;
               letter-spacing:-.03em;line-height:1;color:var(--murekkep);
               font-variant-numeric:tabular-nums}
.ozet-hucre .k{margin-top:8px;font-size:12.5px;color:var(--soluk);line-height:1.4}
.alan-secim{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.alan-secim label{font-size:12.5px;color:var(--soluk)}
.alan-secim select{width:auto;min-width:180px}
.ptab.yan{margin-left:auto}
.ptab.yan + .ptab.yan{margin-left:0}
@media (max-width:640px){
  .liste thead{display:none}
  .liste td{display:block;border-bottom:0;padding:6px 0}
  .liste tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .ptab.yan{margin-left:0}
}