/* ---- 1. Token'lar (kurumsal siteyle birebir aynı değerler) --------------- */
:root{
  --paper:#fbf9f5; --paper-2:#f3efe7; --surface:#fff; --line:#e2ddd2; --line-soft:#ece7dd;
  --ink:#17211e; --ink-2:#4a5551; --ink-3:#5f6b66;
  --brand:#0b6b5c; --brand-deep:#085043; --brand-wash:#e6f0ec;
  --accent:#b3541c; --accent-ink:#9c4715; --accent-wash:#f7ece3;
  --tehlike:#a3231b; --tehlike-wash:#fbeae8;
  --focus:#b3541c;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --gutter:clamp(16px,4vw,32px);
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif","Source Serif Pro",ui-serif,serif;
  --font-text:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Noto Sans","Helvetica Neue",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101513; --paper-2:#161d1a; --surface:#171f1c; --line:#26302c; --line-soft:#1e2724;
    --ink:#ece7dd; --ink-2:#b3bdb8; --ink-3:#93a09a;
    --brand:#4fc9b0; --brand-deep:#6fd8c1; --brand-wash:#14302a;
    --accent:#e8a06a; --accent-ink:#efb589; --accent-wash:#2a1f16;
    --tehlike:#ff8f84; --tehlike-wash:#2c1512;
    --focus:#e8a06a;
  }
}

/* ---- 2. Temel ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-block-size:100dvh; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.012em;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(1.75rem, 1.45rem + 1.5vw, 2.25rem)}
h2{font-size:1.125rem}
h3{font-size:1rem;letter-spacing:0}
p{margin:0 0 1em;color:var(--ink-2)}
p:last-child{margin-block-end:0}
a{color:var(--brand-deep);text-underline-offset:.18em}
a:hover{color:var(--accent-ink)}
img{max-inline-size:100%;height:auto;display:block}
code{font-family:var(--font-mono);font-size:.9375em;overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.gizli{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.atla{position:absolute;inset-inline-start:12px;inset-block-start:12px;z-index:60;padding:12px 18px;
  background:var(--surface);color:var(--ink);border:2px solid var(--accent);border-radius:var(--r-sm);
  font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .18s ease}
.atla:focus{transform:translateY(0)}

/* ---- 3. Kabuk: üst bar · içerik · alt sekmeler --------------------------- */
.ust{
  position:sticky;inset-block-start:0;z-index:20;background:var(--paper);
  border-block-end:1px solid var(--line);
}
/* ⛔ 320px'te YATAY TAŞMA (ölçüldü 2026-08-16, Chromium 320×760): TR'de 2px
   (scrollWidth 322 / clientWidth 320), İNGİLİZCE'de 8px — "Settings" > "Ayarlar".
   Taşan eleman her ikisinde de <a class="dugme sade kucuk">, sağ kenarı 322.44.
   Sebep: logo + dil hapı + "Ayarlar" düğmesinin min-içerik genişlikleri toplamı 320'yi
   geçiyor ve hiçbiri küçülemiyor (nowrap metin + flex min-inline-size:auto). İşletme adı
   (.kimlik b) overflow:hidden olduğu için zaten sıfıra kadar iniyor, suçlu o değil.
   Çözüm MOBİL-ÖNCE: dar ekranda bar boşluğu ve hap iç boşlukları bir tık daralır
   (dokunma hedefi 44px yükseklik KORUNUR), 22.5rem'den itibaren asıl ölçüler geri gelir.
   ⛔ flex-wrap denenmedi: bar iki satıra düşünce sticky yükseklik büyüyor ve içerik kayıyor. */
.ust-ic{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-block-size:56px;padding-inline:var(--gutter);max-inline-size:74rem;margin-inline:auto}
.ust .dil-hap{padding-inline:10px}
.ust .dugme.kucuk{padding-inline:12px}
@media (min-width:22.5rem){
  .ust-ic{gap:12px}
  .ust .dil-hap{padding-inline:14px}
  .ust .dugme.kucuk{padding-inline:16px}
}
.logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:1.15rem;
  font-weight:600;letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding-block:8px}
.logo em{font-style:normal;color:var(--brand)}
.logo-im{inline-size:22px;block-size:20px;border-radius:7px 7px 7px 3px;background:var(--brand);flex:none;position:relative}
.logo-im::before{content:"";position:absolute;inset-block-start:6px;inset-inline-start:5px;inline-size:12px;block-size:2px;
  border-radius:2px;background:var(--paper);box-shadow:0 4px 0 0 var(--paper)}
.kimlik{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--ink-3);min-inline-size:0}
.kimlik b{font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:11rem}

main{display:block;max-inline-size:74rem;margin-inline:auto;padding:20px var(--gutter) 104px}
.sayfa-basi{margin-block-end:20px}
.sayfa-basi p{margin-block-start:6px;font-size:.9375rem;max-inline-size:40rem}

.sekmeler{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:30;
  display:flex;background:var(--surface);border-block-start:1px solid var(--line);
  padding-block-end:env(safe-area-inset-bottom);
}
.sekmeler a{
  flex:1 1 0;min-inline-size:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-block-size:58px;padding:8px 4px;font-size:.75rem;font-weight:600;color:var(--ink-3);
  text-decoration:none;border-block-start:2px solid transparent;
}
.sekmeler a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%}
.sekmeler .nav-ikon{flex:none}
.sekmeler .uzun{display:none}
.sekmeler .kisa{display:block}
.sekmeler a[aria-current="page"]{color:var(--brand-deep);border-block-start-color:var(--brand);
  background:var(--brand-wash)}
.sekmeler a:hover{color:var(--ink)}

@media (min-width:64rem){
  /* Ray + içerik TEK blok olarak ortalanır. İlk denemede içerik sütunu 1fr'di ve
     ray ile metin arasında ~150px ölü bant kalıyordu (1280px ekran görüntüsünde görüldü). */
  /* 🔴 15 Eyl: içerik sütunu 46rem'e kilitliydi ⇒ yönetim tabloları sayfadan TAŞIYORDU
     (canlıda görüldü). Artık içerik ızgaranın kalanını alır; okunaklılık için esnaf
     sayfaları 60rem'de durur, yönetim (main.genis) tam genişlik kullanır. */
  .kabuk{display:grid;grid-template-columns:14.5rem minmax(0,1fr);
    gap:clamp(24px,3.5vw,44px);max-inline-size:80rem;margin-inline:auto;padding-inline:var(--gutter)}
  main{padding:32px 0 72px;max-inline-size:60rem;inline-size:100%}
  main.genis{max-inline-size:none}
  .sekmeler{position:sticky;inset-block-start:76px;inset-block-end:auto;z-index:1;
    flex-direction:column;align-self:start;margin-block-start:32px;
    background:none;border:0;padding-block-end:0;gap:4px}
  .sekmeler a{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-block-size:48px;
    padding:8px 14px;font-size:.96875rem;border:0;border-radius:var(--r-sm);color:var(--ink-2)}
  .sekmeler a:hover{background:var(--paper-2);color:var(--ink)}
  .sekmeler a[aria-current="page"]{background:var(--brand-wash);color:var(--brand-deep)}
  .sekmeler .uzun{display:block}
  .sekmeler .kisa{display:none}
}

/* ---- 4. Cetvel başlık (defter motifi) ------------------------------------ */
.bolum{margin-block:28px 14px;display:flex;align-items:center;gap:12px}
.bolum::after{content:"";flex:1;block-size:1px;background:var(--line)}
.bolum h2{font-family:var(--font-text);font-size:.75rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---- 5. Sıradaki adım şeridi -------------------------------------------- */
.sira{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;margin-block-end:22px;
  background:var(--accent-wash);border:1px solid var(--line);
  border-inline-start:4px solid var(--accent);border-radius:var(--r-md);
}
.sira-ok{inline-size:10px;block-size:10px;flex:none;margin-block-start:9px;border:solid var(--accent);
  border-width:2px 2px 0 0;transform:rotate(45deg)}
.sira b{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);margin-block-end:3px}
.sira p{color:var(--ink);font-size:1.0625rem;line-height:1.45}

/* ---- 6. Kartlar ve durum satırları -------------------------------------- */
.izgara{display:grid;gap:12px}
@media (min-width:34rem){.izgara.uc{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:34rem){.izgara.iki{grid-template-columns:repeat(2,minmax(0,1fr))}}

.kart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.kart + .kart{margin-block-start:12px}
.kart h3{margin-block-end:8px}
.kart .ipucu{font-size:.875rem;color:var(--ink-3);margin-block-start:8px}

.olcu{display:flex;flex-direction:column;gap:6px}
.olcu dt{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.olcu dd{margin:0;font-family:var(--font-display);font-size:1.5rem;line-height:1.2;color:var(--ink)}
.olcu .alt{font-family:var(--font-text);font-size:.875rem;color:var(--ink-2);line-height:1.4}

dl.satirlar{margin:0;display:grid;gap:0}
dl.satirlar div{display:flex;justify-content:space-between;gap:16px;padding-block:11px;
  border-block-end:1px solid var(--line-soft)}
dl.satirlar div:last-child{border-block-end:0}
dl.satirlar dt{font-size:.875rem;color:var(--ink-3)}
dl.satirlar dd{margin:0;font-size:.9375rem;font-weight:600;text-align:end;overflow-wrap:anywhere}

.rozet{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line);font-size:.8125rem;font-weight:600;color:var(--ink-2);background:var(--paper-2)}
.rozet::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:currentColor;flex:none}
.rozet.iyi{color:var(--brand-deep);border-color:var(--brand);background:var(--brand-wash)}
.rozet.uyari{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-wash)}
.rozet.kotu{color:var(--tehlike);border-color:var(--tehlike);background:var(--tehlike-wash)}

/* ---- 7. Adım listesi (3 adımda başla) ----------------------------------- */
.adimlar{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.adimlar li{position:relative;margin:0;padding:14px 0 14px 46px}
.adimlar li::before{content:"";position:absolute;inset-block:44px 0;inset-inline-start:15px;
  inline-size:2px;background:var(--line)}
.adimlar li:last-child::before{display:none}
.adimlar .n{position:absolute;inset-block-start:12px;inset-inline-start:0;inline-size:32px;block-size:32px;
  display:grid;place-items:center;border:1.5px solid var(--accent);border-radius:50%;background:var(--paper);
  font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--accent-ink)}
.adimlar li.bitti .n{border-color:var(--brand);font-size:0;background:var(--brand-wash)}
/* Tik: iki kenarlı bir kare 45° döndürülür. Yükseklik/genişlik oranı 2:1 olmazsa
   "damla" gibi okunuyordu (ilk denemede öyle oldu) — 7×12 doğru oran. */
.adimlar li.bitti .n::after{content:"";inline-size:7px;block-size:12px;border:solid var(--brand);
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-2px)}
.adimlar h3{margin-block-end:3px}
.adimlar li.bitti h3{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.adimlar p{font-size:.9rem}

/* ---- 8. Düğmeler --------------------------------------------------------- */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-block-size:50px;
  padding:0 22px;border:1.5px solid transparent;border-radius:var(--r-pill);background:transparent;
  font-family:var(--font-text);font-size:1rem;font-weight:600;line-height:1.2;color:var(--ink);
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.dugme.ana{background:var(--brand);border-color:var(--brand);color:#fff}
.dugme.ana:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
@media (prefers-color-scheme:dark){.dugme.ana,.dugme.ana:hover{color:#08110e}}
.dugme.sade{border-color:var(--line);background:var(--surface);color:var(--ink)}
.dugme.sade:hover{border-color:var(--ink-3)}
.dugme.tehlike{border-color:var(--tehlike);color:var(--tehlike);background:transparent}
.dugme.tehlike:hover{background:var(--tehlike-wash)}
.dugme.kucuk{min-block-size:44px;padding:0 16px;font-size:.875rem}
.dugme.genis{inline-size:100%}
.dugme[disabled]{opacity:.5;cursor:not-allowed}
.dugme-satir{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:16px}
.dugme-satir .dugme{flex:1 1 auto;min-inline-size:min(100%,13rem)}
@media (min-width:34rem){.dugme-satir .dugme{flex:0 0 auto;min-inline-size:0}}
/* Bağımsız gezinme bağlantısı (metin içi değil) → 44px dokunma hedefi.
   inline-flex şart: satır içi <a>'da min-block-size uygulanmıyor. */
.metin-dugme{display:inline-flex;align-items:center;min-block-size:44px;background:none;border:0;
  padding:0;font:inherit;color:var(--brand-deep);text-decoration:underline;
  text-underline-offset:.18em;cursor:pointer}

/* ---- 9. Formlar ---------------------------------------------------------- */
form{margin:0}
.alan{display:block;margin-block-end:18px}
.alan > span{display:block;font-size:.9375rem;font-weight:600;color:var(--ink);margin-block-end:6px}
.alan .ipucu{display:block;font-size:.8125rem;color:var(--ink-3);margin-block-end:8px;font-weight:400}
.alan input,.alan select,.alan textarea{
  inline-size:100%;min-block-size:52px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:1.0625rem}
.alan input:focus,.alan select:focus{border-color:var(--brand)}
.alan input[aria-invalid="true"]{border-color:var(--tehlike)}
.alan input::placeholder{color:var(--ink-3);opacity:.75}
.alan-hata{display:flex;gap:7px;align-items:flex-start;margin-block-start:7px;
  font-size:.875rem;font-weight:500;color:var(--tehlike)}
.alan-hata::before{content:"!";flex:none;inline-size:17px;block-size:17px;margin-block-start:2px;border-radius:50%;
  background:var(--tehlike);color:var(--surface);font-size:.75rem;font-weight:700;line-height:17px;text-align:center}

/* ---- 10. Uyarı / bilgi kutuları ----------------------------------------- */
.kutu{padding:14px 16px;border:1px solid var(--line);border-inline-start:4px solid var(--ink-3);
  border-radius:var(--r-md);background:var(--surface);margin-block-end:18px;font-size:.9375rem}
.kutu p{color:var(--ink-2)}
.kutu.iyi{background:var(--brand-wash);border-color:var(--brand)}
.kutu.uyari{background:var(--accent-wash);border-color:var(--accent)}
.kutu.kotu{background:var(--tehlike-wash);border-color:var(--tehlike)}
.kutu b{display:block;color:var(--ink);margin-block-end:2px}

/* ---- 11. Boş durum ------------------------------------------------------- */
.bos{text-align:center;padding:44px 20px;border:1px dashed var(--line);border-radius:var(--r-lg);
  background:var(--paper-2)}
.bos .im{inline-size:52px;block-size:40px;margin:0 auto 16px;border:2px solid var(--line);
  border-radius:9px 9px 9px 3px;position:relative}
.bos .im::before{content:"";position:absolute;inset-block-start:11px;inset-inline-start:11px;inline-size:26px;
  block-size:2px;border-radius:2px;background:var(--line);box-shadow:0 8px 0 0 var(--line)}
.bos h3{margin-block-end:6px}
.bos p{margin-inline:auto;max-inline-size:26rem;font-size:.9375rem}

/* ---- 12. Giriş ekranı ---------------------------------------------------- */
.giris{min-block-size:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:32px var(--gutter) 48px;max-inline-size:30rem;margin-inline:auto}
.giris .logo{align-self:flex-start;margin-block-end:26px;font-size:1.35rem}
.giris h1{margin-block-end:8px}
.giris .anlat{font-size:1rem;margin-block-end:26px}
.giris .neden{margin-block-start:22px;font-size:.8125rem;color:var(--ink-3)}
/* Yönetici erişim ölçümünün hesap seçimi (OAuth dönüşünde çizilir): alt alta tam genişlik düğmeler. */
.olcum-secim{list-style:none;padding:0;margin-block:14px;display:grid;gap:12px}
.olcum-secim li{display:grid;gap:4px}
.olcum-secim .dugme{overflow-wrap:anywhere;padding-block:10px}

/* Ad + ID: ad okunur büyüklükte, ID onun altında küçük ve soluk — destek/hata ayıklama
   için orada, ama esnafın gözünü yormuyor. */
.satirlar dd .yok{color:var(--ink-3);font-weight:400}
.satirlar dd .alt{display:block;margin-block-start:2px;font-size:.75rem;color:var(--ink-3);
  font-weight:400}

/* ---- 12a. Seçenek listesi (işletme portföyü seçimi) -----------------------
   Radyo düğmesi görünür bırakıldı: para harcayacak bir seçimde "hangisi seçili?"
   sorusunun cevabı tek bakışta okunmalı; süslü özel işaretler bunu zorlaştırıyor. */
.secenek{display:flex;align-items:center;gap:12px;padding:14px 4px;cursor:pointer;
  border-block-end:1px solid var(--line-soft)}
.secenek:last-of-type{border-block-end:0}
.secenek input{inline-size:20px;block-size:20px;flex:none;accent-color:var(--brand)}
.secenek span{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.secenek b{font-weight:600}
.secenek code{font-size:.75rem;color:var(--ink-3)}
.secenek:has(input:checked){background:var(--brand-wash);border-radius:var(--r-sm)}
/* Seçilemeyen (kapalı) hesap: gizlemek YERİNE soluk göster + nedenini yaz. Gizlemek
   "hesabım kayboldu" paniği yaratır; sebebi yazmak esnafa ne yapacağını söyler. */
.secenek.pasif{cursor:not-allowed;opacity:.55}
.secenek code.uyari{color:var(--tehlike)}
/* Kabul kutusu (kayıt formu): kutu + içinde bağlantı geçen TEK cümle. Seçenek satırı (.secenek) kullanılmadı: o satır
   metni alt alta dizer (sütun) ve cümlenin ortasındaki bağlantıları ayrı satırlara bölerdi. */
.kabul{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.9375rem;color:var(--ink)}
.kabul input{inline-size:20px;block-size:20px;flex:none;margin-block-start:2px;accent-color:var(--brand)}
.kabul-sar{margin-block-end:18px}
.kabul-sar .ipucu{display:block;font-size:.8125rem;color:var(--ink-3);margin-block-start:6px;margin-inline-start:32px}
.kabul-sar .alan-hata{margin-inline-start:32px}

/* ---- 12b. Dil hapı --------------------------------------------------------
   reklora.com'un üst-sağ dil hapıyla BİREBİR aynı desen (küre ikonu + hedef dilin adı).
   Ayrı bir yer icat etmiyoruz: kullanıcı dili orada aramaya alışkın. */
.dil-hap{
  display:inline-flex;align-items:center;gap:7px;min-block-size:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-3);font-size:.8125rem;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:border-color .18s ease,color .18s ease;
}
.dil-hap:hover{border-color:var(--brand);color:var(--ink)}
/* Küre: saf CSS — bir yatay, bir dikey çizgili daire. Görsel dosyası/ikon kütüphanesi yok. */
.dil-hap .kure{
  inline-size:14px;block-size:14px;flex:none;border:1.5px solid currentColor;border-radius:50%;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
}
/* Giriş ekranı: üst bar olmadığı için hap sayfanın üst-sağına konumlanır.
   .giris içeriği dikeyde ortalı olduğundan akışa sokulursa logonun üstüne biner. */
.giris{position:relative}
.giris .dil-hap{position:absolute;inset-block-start:16px;inset-inline-end:var(--gutter)}

.kod{margin-block:22px;padding:22px 18px;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);position:relative;overflow:hidden}
.kod::before,.kod::after{content:"";position:absolute;inset-inline:0;block-size:6px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.kod::before{inset-block-start:0}
.kod::after{inset-block-end:0}
.kod b{display:block;font-family:var(--font-display);font-size:clamp(2.5rem, 1.4rem + 5.4vw, 3.4rem);
  font-weight:600;letter-spacing:.16em;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-inline-start:.16em}
.kod .sure{display:block;margin-block-start:8px;font-size:.8125rem;color:var(--ink-3)}
.kod-adim{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px;counter-reset:ka}
.kod-adim li{position:relative;margin:0;padding-inline-start:34px;font-size:.9375rem;color:var(--ink-2)}
.kod-adim li::before{counter-increment:ka;content:counter(ka);position:absolute;inset-inline-start:0;inset-block-start:0;
  inline-size:24px;block-size:24px;display:grid;place-items:center;border-radius:50%;
  background:var(--brand-wash);color:var(--brand-deep);font-size:.8125rem;font-weight:700}
.bekleniyor{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;color:var(--ink-3);margin-block-start:14px}
.bekleniyor .nokta{inline-size:8px;block-size:8px;border-radius:50%;background:var(--accent);
  animation:nabiz 1.4s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:.25}50%{opacity:1}}

/* ---- 13. İçerik ocağı ---------------------------------------------------- */
.ocak{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.parca{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.parca .gorsel{aspect-ratio:4/5;background:var(--paper-2);object-fit:cover;inline-size:100%}
.parca video{inline-size:100%;aspect-ratio:4/5;background:#000;display:block}
.parca .bilgi{padding:12px 14px}
.parca .bilgi h3{font-family:var(--font-text);font-size:.9375rem;overflow-wrap:anywhere}
.parca .bilgi .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-start:8px;
  font-size:.8125rem;color:var(--ink-3)}
.parca a.ac{display:inline-flex;align-items:center;min-block-size:44px;font-size:.875rem;font-weight:600}

/* ---- 13a. Reklam raporu --------------------------------------------------
   Mobile-first: 320px'te TEK sütun. Rakam okunması gereken tek şey olduğu için
   büyük tutuldu; açıklama cümlesi hemen altında küçük ve soluk duruyor ki esnaf
   "1.240" gördüğünde bunun ne olduğunu aynı bakışta okusun. */
.rapor-kart{margin-block-end:14px}
.rapor-basi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-block-end:6px}
.rapor-basi h3{font-family:var(--font-text);font-size:1.0625rem;min-inline-size:0;overflow-wrap:anywhere}
.rapor-ne{margin:0 0 10px;font-size:.9375rem}
.rapor-gun{margin:0 0 8px;font-size:.8125rem;font-weight:600;color:var(--ink-3)}
.rapor-etiket{margin:16px 0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}

/* Gün gün parçalar — yüzde genişliği satır-içi stil ister, CSP onu engeller. */
.ilerleme{display:flex;gap:3px;margin-block-end:14px}
.ilerleme span{flex:1 1 0;block-size:5px;border-radius:var(--r-pill);background:var(--line)}
.ilerleme span.dolu{background:var(--brand)}

.rakamlar{display:grid;gap:14px;margin:0}
.rakam{min-inline-size:0}
.rakam dt{font-size:.75rem;font-weight:600;letter-spacing:.05em;color:var(--ink-3)}
.rakam dd{margin:2px 0 0;min-inline-size:0}
.rakam dd b{display:block;font-family:var(--font-display);font-weight:600;line-height:1.1;
  letter-spacing:-.02em;color:var(--ink);font-size:clamp(1.6rem,8vw,2.4rem);overflow-wrap:anywhere}
.rakam dd .alt{display:block;margin-block-start:4px;font-size:.8125rem;line-height:1.45;color:var(--ink-3)}

.rapor-bugun{margin:16px 0 0;padding:11px 13px;border-radius:var(--r-sm);background:var(--paper-2);
  font-size:.875rem;color:var(--ink-2)}
.rapor-alt{margin-block-start:14px;font-size:.875rem}

@media (min-width:34rem){
  .rakamlar{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .rakam dd b{font-size:2rem}
}

/* ---- 13b. Kırılımlar: nerede gösterildi / kim gördü / hangi bölge -------- */
.kirilim{margin-block-start:20px}
.yer-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}

/* Mobilde üç satır (ad+pay / çubuk / detay), geniş ekranda tek satırda hizalı. */
.yer-satir{display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"ad pay" "cubuk cubuk" "detay detay";gap:4px 10px;align-items:center}
.yer-ad{grid-area:ad;display:flex;align-items:start;gap:8px;min-inline-size:0;line-height:1.35;
  font-size:.875rem;font-weight:600;color:var(--ink-2)}
.yer-ad>span{min-inline-size:0;overflow-wrap:anywhere}
.yer-ikon{flex:none;color:var(--ink-3);margin-block-start:1px}
.yer-pay{grid-area:pay;font-variant-numeric:tabular-nums;font-size:.875rem;font-weight:700;color:var(--ink)}
.yer-cubuk{grid-area:cubuk;display:block;block-size:6px;border-radius:var(--r-pill);
  background:var(--line-soft);overflow:hidden}
.yer-cubuk>i{display:block;block-size:100%;border-radius:var(--r-pill);background:var(--brand)}
.yer-detay{grid-area:detay;font-size:.8125rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ⛔ "Hiç gösterilmedi" satırı SİLİNMEZ, soluklaşır: yokluk da bir bilgidir. */
.yer-satir.sifir .yer-ad,.yer-satir.sifir .yer-detay{color:var(--ink-3);opacity:.75}
.yer-satir.sifir .yer-detay{font-style:italic}

/* Çubuk genişliği %5'lik 21 kademe. ⛔ Satır-içi style="inline-size:%" KULLANILAMAZ:
   CSP style-src 'self' style ÖZNİTELİĞİNİ de engeller, çubuk sessizce boş kalırdı
   (aynı tuzağa .ilerleme'de bir kez düşülmüştü).
   ⛔ Ve bu yorumda ters tırnak KULLANILMAZ: bu dosyanın tamamı bir template literal,
   ters tırnak diziyi ortasından keser (bir kez oldu, tsc 3 satırda patladı). */
.yer-cubuk>i.k0{inline-size:0}
.yer-cubuk>i.k1{inline-size:5%}   .yer-cubuk>i.k2{inline-size:10%}
.yer-cubuk>i.k3{inline-size:15%}  .yer-cubuk>i.k4{inline-size:20%}
.yer-cubuk>i.k5{inline-size:25%}  .yer-cubuk>i.k6{inline-size:30%}
.yer-cubuk>i.k7{inline-size:35%}  .yer-cubuk>i.k8{inline-size:40%}
.yer-cubuk>i.k9{inline-size:45%}  .yer-cubuk>i.k10{inline-size:50%}
.yer-cubuk>i.k11{inline-size:55%} .yer-cubuk>i.k12{inline-size:60%}
.yer-cubuk>i.k13{inline-size:65%} .yer-cubuk>i.k14{inline-size:70%}
.yer-cubuk>i.k15{inline-size:75%} .yer-cubuk>i.k16{inline-size:80%}
.yer-cubuk>i.k17{inline-size:85%} .yer-cubuk>i.k18{inline-size:90%}
.yer-cubuk>i.k19{inline-size:95%} .yer-cubuk>i.k20{inline-size:100%}

.yer-not{margin:10px 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink-3)}
.yer-kapsam{margin:8px 0 0;font-size:.75rem;line-height:1.5;color:var(--ink-3);opacity:.85}

@media (min-width:34rem){
  .yer-satir{grid-template-columns:minmax(9rem,13rem) 3.2rem minmax(4rem,1fr) auto;
    grid-template-areas:"ad pay cubuk detay";gap:12px}
  .yer-pay{text-align:end}
}

/* ---- 14. Yönetici tablosu ------------------------------------------------ */
.tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface)}
table{inline-size:100%;border-collapse:collapse;font-size:.875rem;min-inline-size:34rem}
th,td{text-align:start;padding:11px 12px;border-block-end:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-block-end:0}
th{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  background:var(--paper-2);white-space:nowrap}
td code{font-family:var(--font-mono);font-size:.8125rem;color:var(--ink-2);overflow-wrap:anywhere}
td form{display:inline}
.satir-arac{display:flex;gap:6px;flex-wrap:wrap}
th.sayi,td.sayi{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Ajans okuma raporu OAuth dönüşünde ".giris" kabuğunda çizilir; tablo için dar sütunu genişletir
   (iki sınıflı seçici ".giris"in genişliğini sıradan bağımsız ezer). */
.giris.ajans-rapor{max-inline-size:76rem}
.ajans-kutular{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:10px;margin-block:14px}
.ajans-rapor td:first-child{min-inline-size:9rem}
@media (min-width:48rem){.ajans-rapor td:first-child{min-inline-size:14rem}}
.ajans-rapor .rozet{white-space:nowrap}
.ajans-ozet{margin-block:14px 8px}
.ajans-ozet h2{font-size:1rem;margin-block-end:6px}
.ajans-ozet p{font-size:1rem;line-height:1.6;margin:0}
.ajans-sozluk{margin-block:4px 10px}
.ajans-sozluk summary{cursor:pointer;min-block-size:44px;display:flex;align-items:center;color:var(--brand);font-weight:600}
.ajans-sozluk dl{display:grid;gap:10px;margin:6px 0 0}
.ajans-sozluk dt{font-weight:600}
.ajans-sozluk dd{margin:2px 0 0;color:var(--ink-2);font-size:.9375rem}
@media (min-width:48rem){.ajans-sozluk dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}}
/* Filtre: rapor OAuth dönüşünde bir kez çizilir (token saklanmaz) ⇒ süzme TARAYICIDA, JS'siz — radyo + :has. */
.ajans-filtre{display:flex;flex-wrap:wrap;gap:8px;margin-block:14px 10px}
.ajans-filtre input{position:absolute;opacity:0;pointer-events:none}
.ajans-filtre label{display:inline-flex;align-items:center;min-block-size:44px;padding:0 14px;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:.875rem;cursor:pointer}
.ajans-filtre input:checked+label{border-color:var(--brand);background:var(--brand-wash);font-weight:600}
.ajans-filtre input:focus-visible+label{outline:2px solid var(--brand);outline-offset:2px}
.ajans-filtre input:disabled+label{opacity:.45;cursor:default}
.ajans-rapor:has(#af-yayinda:checked) tbody tr:not(.y-yayinda),
.ajans-rapor:has(#af-gosterim-yok:checked) tbody tr:not(.y-gosterim-yok),
.ajans-rapor:has(#af-bitmis:checked) tbody tr:not(.y-bitmis){display:none}
/* Esnaf "Reklamlarım": aynı çip filtresi, kart düzeyinde. */
.rapor-listesi:has(#rf-yayinda:checked) details.reklam:not(.y-yayinda),
.rapor-listesi:has(#rf-bekliyor:checked) details.reklam:not(.y-bekliyor),
.rapor-listesi:has(#rf-sorunlu:checked) details.reklam:not(.y-sorunlu),
.rapor-listesi:has(#rf-bitti:checked) details.reklam:not(.y-bitti){display:none}
/* Görsel kartın rakamlarını aşağı itmesin (önizlemede 16rem fazla büyüktü): küçük, tanımaya yetecek kadar. */
.rapor-gorsel{display:block;inline-size:100%;max-inline-size:8.5rem;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line);margin-block-end:12px}
/* Kampanya detayı — satıra dokununca altında açılır (panel.js). */
.kampanya-satir{cursor:pointer}
.kampanya-satir:hover td,.kampanya-satir[aria-expanded="true"] td{background:var(--paper-2)}
.kampanya-satir:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.satir-ok{display:inline-block;inline-size:8px;block-size:8px;margin-inline-start:8px;vertical-align:middle;
  border-inline-end:2px solid var(--ink-3);border-block-end:2px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .15s ease}
.kampanya-satir[aria-expanded="true"] .satir-ok{transform:rotate(-135deg)}
.ajans-rapor .kampanya-detay>td{position:static;min-inline-size:0;padding:0;background:var(--paper-2);white-space:normal}
.detay-ic{position:sticky;inset-inline-start:0;display:grid;gap:16px;padding:16px;box-sizing:border-box}
@media (min-width:40rem){.detay-ic{grid-template-columns:minmax(0,14rem) minmax(0,1fr);align-items:start}}
.detay-gorsel{inline-size:100%;max-inline-size:14rem;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}
.bos-gorsel{display:grid;place-items:center;font-size:.8125rem;color:var(--ink-3)}
.detay-sekil{margin:0;max-inline-size:14rem}
.detay-sekil figcaption{margin-block-start:6px;font-size:.75rem}
.galeri-ad{font-weight:600;color:var(--ink-2)}
.galeri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-block-start:8px}
.galeri-kucuk{padding:0;border:2px solid transparent;border-radius:var(--r-sm, 6px);background:none;cursor:pointer;aspect-ratio:1;overflow:hidden;min-block-size:44px}
.galeri-kucuk img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.galeri-kucuk.secili{border-color:var(--brand)}
.galeri-kucuk:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.detay-govde h3{margin:0 0 10px;font-size:1rem}
.detay-govde .rakamlar{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.detay-bilgi{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:.9375rem}
.detay-cubuk{display:block;block-size:8px;margin-block-start:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;max-inline-size:20rem}
.detay-cubuk>i{display:block;block-size:100%;background:var(--brand)}
.detay-cubuk>i.p0{inline-size:0%}
.detay-cubuk>i.p5{inline-size:5%}.detay-cubuk>i.p10{inline-size:10%}.detay-cubuk>i.p15{inline-size:15%}.detay-cubuk>i.p20{inline-size:20%}.detay-cubuk>i.p25{inline-size:25%}
.detay-cubuk>i.p30{inline-size:30%}.detay-cubuk>i.p35{inline-size:35%}.detay-cubuk>i.p40{inline-size:40%}.detay-cubuk>i.p45{inline-size:45%}.detay-cubuk>i.p50{inline-size:50%}
.detay-cubuk>i.p55{inline-size:55%}.detay-cubuk>i.p60{inline-size:60%}.detay-cubuk>i.p65{inline-size:65%}.detay-cubuk>i.p70{inline-size:70%}.detay-cubuk>i.p75{inline-size:75%}
.detay-cubuk>i.p80{inline-size:80%}.detay-cubuk>i.p85{inline-size:85%}.detay-cubuk>i.p90{inline-size:90%}.detay-cubuk>i.p95{inline-size:95%}.detay-cubuk>i.p100{inline-size:100%}

/* Ad sütunu yatay kaydırmada SOLDA SABİT (🔴 16 Eyl canlı ekran: 12 sütun masaüstünde de kayıyor, sağa kayınca ad görünmüyordu).
   Zemin şart: sabit hücre saydamsa altından kayan rakamlar adın üstüne biner. */
.ajans-rapor td:first-child,.ajans-rapor th:first-child{position:sticky;inset-inline-start:0;z-index:1;
  box-shadow:1px 0 0 var(--line)}
.ajans-rapor td:first-child{background:var(--surface)}
.ajans-rapor th:first-child{background:var(--paper-2)}
.ajans-kutular .kart{margin:0;padding:12px 14px;display:grid;gap:4px}
.ajans-kutular .kart b{font-size:1.125rem;font-variant-numeric:tabular-nums}

/* ---- 15. Hareket / baskı ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
@media print{.sekmeler,.ust,.atla{display:none}body{background:#fff;color:#000}}

/* ==== 16. YENİDEN TASARIM (15 Eyl) ==========================================
   🗣 Kadir: "çok karışık, alt alta her şey… bilmeyen birinin rahatça anlayıp kullanacağı".
   Renk/yazı değişmedi (kurumsal siteyle aynı token'lar); değişen HİYERARŞİ:
   ① her sayfanın tepesinde tek bir "ne yapmalıyım" alanı ② durum, tıklanabilir kutucuklarda
   ③ ayrıntı, katlanır bölümlerde ④ ham kimlikler "teknik bilgiler" altında. */

/* Sayfa açılışı: içerik yukarıdan sırayla belirir (bir kez, hareket azaltmada kapalı). */
@keyframes belir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
main > *{animation:belir .42s cubic-bezier(.2,.7,.2,1) both}
main > *:nth-child(2){animation-delay:.04s} main > *:nth-child(3){animation-delay:.08s}
main > *:nth-child(4){animation-delay:.12s} main > *:nth-child(5){animation-delay:.16s}
main > *:nth-child(n+6){animation-delay:.2s}

.sayfa-basi h1{margin-block-end:4px}
.sayfa-basi p{font-size:1rem}

/* ---- 16a. Kahraman: sıradaki tek adım + ana düğme --------------------------- */
.kahraman{position:relative;overflow:hidden;margin-block-end:18px;padding:22px 22px 20px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
/* ⛔ Defter çizgileri DENENDİ ve kaldırıldı (15 Eyl önizleme): büyük yazının üstünden geçip
   "üstü çizili" gibi okunuyordu. Kâğıt hissini sağ üstteki soluk köşe veriyor. */
.kahraman::before{content:"";position:absolute;inset-block-start:-40px;inset-inline-end:-40px;inline-size:180px;
  block-size:180px;border-radius:50%;pointer-events:none;background:var(--brand-wash);opacity:.7}
.kahraman::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:5px;background:var(--accent)}
.kahraman > *{position:relative}
.kahraman .etiket{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-ink);margin-block-end:6px}
.kahraman .kahraman-metin{font-family:var(--font-display);font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);
  line-height:1.3;color:var(--ink);margin:0 0 16px;max-inline-size:34rem;text-wrap:balance}
.kahraman .ipucu{margin:12px 0 0;font-size:.875rem;color:var(--ink-3)}
.dugme.buyuk{min-block-size:56px;padding-inline:28px;font-size:1.0625rem}
@media (max-width:33.99rem){.kahraman .dugme{inline-size:100%}}

/* ---- 16b. Kutucuklar: bir bakışta durum, dokununca ilgili sayfa ------------- */
.kutucuklar{display:grid;gap:12px;margin-block-end:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.kutucuk{position:relative;display:flex;flex-direction:column;gap:6px;min-block-size:104px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);
  text-decoration:none;transition:border-color .18s ease,transform .18s ease,background-color .18s ease}
a.kutucuk:hover{border-color:var(--brand);transform:translateY(-2px);color:var(--ink)}
.kutucuk-etiket{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding-inline-end:28px}
.kutucuk-deger{font-family:var(--font-display);font-size:1.3rem;line-height:1.25;color:var(--ink)}
.kutucuk-deger b{font-size:2rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-inline-end:6px}
.kutucuk-ek{margin-block-start:auto}
.kutucuk-ok{position:absolute;inset-block-start:14px;inset-inline-end:14px;color:var(--ink-3);
  transition:transform .18s ease,color .18s ease}
.kutucuk-ok .nav-ikon{inline-size:18px;block-size:18px}
a.kutucuk:hover .kutucuk-ok{color:var(--brand);transform:translateX(3px)}
.kutucuk.uyari{border-color:var(--accent);background:var(--accent-wash)}

.kutucuk.iyi .kutucuk-deger b{color:var(--brand-deep)}

/* ---- 16c. Katlanır bölüm ---------------------------------------------------- */
.acilir{margin-block-end:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.acilir > summary{list-style:none;display:flex;align-items:center;gap:12px;min-block-size:64px;
  padding:14px 18px;cursor:pointer;border-radius:var(--r-md)}
.acilir > summary::-webkit-details-marker{display:none}
.acilir > summary:hover{background:var(--paper-2)}
.acilir[open] > summary{border-block-end:1px solid var(--line-soft);border-end-start-radius:0;border-end-end-radius:0}
.acilir-baslik{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1}
.acilir-baslik b{font-size:1rem;font-weight:650;color:var(--ink)}
.acilir-baslik small{font-size:.8125rem;color:var(--ink-3);line-height:1.4}
.acilir-sayi{flex:none;min-inline-size:28px;padding:3px 10px;border-radius:var(--r-pill);text-align:center;
  font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums;background:var(--paper-2);color:var(--ink-2);
  border:1px solid var(--line)}
.acilir-sayi.uyari{background:var(--accent-wash);color:var(--accent-ink);border-color:var(--accent)}
.acilir-sayi.iyi{background:var(--brand-wash);color:var(--brand-deep);border-color:var(--brand)}
.acilir-sayi.kotu{background:var(--tehlike-wash);color:var(--tehlike);border-color:var(--tehlike)}
.acilir-ok{flex:none;inline-size:10px;block-size:10px;margin-inline:4px;border:solid var(--ink-3);
  border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.acilir[open] .acilir-ok{transform:rotate(-135deg) translate(-2px,-2px)}
.acilir-ic{padding:16px 18px 18px}
.acilir-ic > .kart{border:0;padding:0;background:none}
.acilir-ic > .bolum:first-child{margin-block-start:0}
.acilir.tehlike > summary b{color:var(--tehlike)}

/* ---- 16d. Reklamlarım: özet şeridi + katlanır reklam satırı ----------------- */
.ozet-serit{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:16px}
.reklam > summary{min-block-size:72px}
.reklam-satir{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.reklam-ad{font-weight:650;font-size:1.0625rem;color:var(--ink);overflow-wrap:anywhere}
.reklam-kisa{font-size:.8125rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---- 16e. İçeriklerim: sıkı ızgara ------------------------------------------ */
.ocak{grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));gap:12px}
.parca .gorsel,.parca video{aspect-ratio:3/4}
.parca .bilgi{padding:10px 12px}
.parca .bilgi h3{font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parca .bilgi .meta{margin-block-start:4px;font-size:.75rem}
.parca a.ac{min-block-size:36px;font-size:.8125rem}
.parca-tur{position:absolute;inset-block-start:8px;inset-inline-start:8px;padding:2px 8px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.62);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.04em}
.parca{position:relative}

/* ---- 16f. Hesabım ------------------------------------------------------------ */
.baglanti-kart{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.baglanti-kart .sol{display:flex;flex-direction:column;gap:6px;min-inline-size:0}
.baglanti-kart h2{font-size:1.125rem}
.izgara-form{display:grid;gap:12px}
@media (min-width:52rem){.izgara-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .izgara-form .kart + .kart{margin-block-start:0}}
.teknik{margin-block-start:14px;font-size:.875rem}
.teknik > summary{cursor:pointer;color:var(--ink-3);min-block-size:40px;display:flex;align-items:center}
.teknik dl{margin-block-start:6px}

/* ---- 16g. Yönetim ------------------------------------------------------------ */
.kutucuklar.dort{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.aciklama{font-size:.875rem;color:var(--ink-2);margin:0 0 12px;max-inline-size:52rem}
.nasil{margin-block:4px 12px;font-size:.8125rem;color:var(--ink-3)}
.nasil > summary{cursor:pointer;min-block-size:36px;display:flex;align-items:center}
.nasil p{font-size:.8125rem;color:var(--ink-3);max-inline-size:52rem}
td .alt-satir{display:block;font-size:.75rem;color:var(--ink-3)}
/* Satır işlemleri: birincil işlem görünür, geri kalanı küçük bir menüde. */
.islem-menu{display:inline-block;vertical-align:top}
.islem-menu > summary{list-style:none;cursor:pointer}
.islem-menu > summary::-webkit-details-marker{display:none}
.islem-menu[open] .islem-liste{display:flex}
/* ⛔ Mutlak konumlu açılır liste DENENDİ ve bozuldu (15 Eyl önizleme): tablo sarmalayıcısının
   overflow-x:auto'su listeyi KIRPIYORDU — menü "açık" ama görünmezdi. Liste satırın İÇİNDE,
   akışta açılır; satır uzar ama hiçbir kapsayıcı onu kesemez. */
.islem-liste{display:none;flex-direction:column;align-items:stretch;gap:6px;margin-block-start:8px;
  padding:8px;min-inline-size:10.5rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.islem-liste .dugme{inline-size:100%;justify-content:flex-start}
.islem-liste form{display:block}
td.islemler{white-space:nowrap;vertical-align:top}
td.islemler form{display:inline-block;vertical-align:middle}
td.islemler .islem-menu{vertical-align:middle;margin-inline-start:6px}
.bosluk{block-size:10px}

/* ---- 16h. Alt bilgi: koşullar ve gizlilik (html.ts altBilgi) -----------------
   Sayfanın en sessiz satırı: ince cetvel, küçük ve soluk yazı. Bağlantılar 44px dokunma hedefi. */
.alt-bilgi{display:flex;flex-wrap:wrap;gap:0 20px;margin-block-start:36px;padding-block-start:8px;
  border-block-start:1px solid var(--line);font-size:.8125rem}
.alt-bilgi a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--ink-3)}
.alt-bilgi a:hover{color:var(--ink)}
/* 🔴 Telefonda kutucuklar TEK SÜTUNA düşüyordu ⇒ yine "alt alta her şey" (önizlemede görüldü).
   Dar ekranda İKİ sütun; tek sayıda kutucuk varsa sonuncusu tam satır olur.
   ⛔ DOSYANIN SONUNDA olmak zorunda: yukarıdaki .kutucuklar.dort kuralı bunu eziyordu. */
@media (max-width:33.99rem){
  .kutucuklar,.kutucuklar.dort{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kutucuklar > :last-child:nth-child(odd){grid-column:1 / -1}
  .kutucuk{min-block-size:92px;padding:13px 14px}
  .kutucuk-etiket{font-size:.6875rem;letter-spacing:.06em;padding-inline-end:20px}
  .kutucuk-deger{font-size:1.05rem}
  .kutucuk-deger b{font-size:1.65rem;margin-inline-end:4px}
  .kutucuk-ok{inset-block-start:11px;inset-inline-end:10px}
}
.dugme-satir form{display:contents}