/* ============================================================================
   kabuk.css — PLASİYER PANELİ KABUĞU (Gencer Teknik düzeni · Lider markası)
   ----------------------------------------------------------------------------
   NE: Gencer Teknik plasiyer panelinin BİLGİ MİMARİSİ ve ETKİLEŞİM DİLİ, el
   yazımı ~18 KB CSS ile yeniden kuruldu. Bootstrap 4.6 + 445 KB tema.css +
   FontAwesome Pro TAŞINMADI (lisans + 'fal' sınıfları ücretsiz sürümde çalışmaz
   + Tailwind ile çifte reset). Renkler LİDER markasıdır.

   "BİREBİR AYNI" = yapı · yoğunluk · ölçü · akış · etkileşim.  RENK DEĞİL.

   ÖLÇÜ TÜREVİ (Gencer'in gerçek değerleri → iPad uyarlaması):
     .sh-headpanel 100px          → --ust-h 84px
     .sh-icon-link 115×100px      → --karo-g 96px / --karo-y 80px
     .sh-pagetitle 100px          → --baslik-h 64px
     ikon 40px · etiket 14px/500  → 26px · 12.5px/600
   Gerekçe: Gencer masaüstü için tasarlanmış; 100+44+100 = iPad yatayda ekranın
   %32'si. 84+40+64 = %25. Ölçüler TEK YERDE (:root) — değiştirmek isteyen burayı
   değiştirsin, bileşenlere dokunmasın.

   ⚠ ALTIN ÜZERİNE BEYAZ METİN YASAK (#fcc808 + beyaz = 1.57:1, okunmaz).
     Altın zeminde metin DAİMA siyah (--pls-ink). Bkz. HANDOFF "MARKA KİMLİĞİ".
   ⚠ KÖŞELİ: Gencer'in tüm yüzeyleri keskin (border-radius:0). Bu bilinçli bir
     "yoğun veri ekranı" dilidir; yuvarlatma eklemeyin.
   ============================================================================ */

:root{
  /* --- ölçü sözleşmesi (tek kaynak) --- */
  --ust-h: 84px;          /* üst bar yüksekliği */
  --karo-g: 96px;         /* menü karosu genişliği */
  --karo-y: 80px;         /* menü karosu yüksekliği */
  --baglam-h: 40px;       /* kur + seçili cari şeridi */
  --devir-h:  34px;       /* yönetici devri bandı (yalnız devir modunda görünür) */
  --baslik-h: 64px;       /* sayfa başlığı bandı */

  /* --- marka (bayi/admin ile aynı token adları) --- */
  --pls-ink:      #17181a;   /* logo siyahı — birincil */
  --pls-ink-2:    #000000;
  --pls-altin:    #fcc808;   /* logo altını — vurgu */
  --pls-altin-dk: #d9a800;
  --pls-altin-sf: #fff6d6;
  --pls-altin-ink:#5c4400;
  --pls-kagit:    #f5f4f1;   /* sıcak zemin */
  --pls-yuzey:    #ffffff;
  --pls-cizgi:    #e5e2dc;
  --pls-soluk:    #6e6a63;
  --pls-yesil:    #15803d;
  --pls-yesil-sf: #e4f5ea;
  --pls-kirmizi:  #c0392b;
  --pls-kirmizi-sf:#fdecea;
  --pls-amber:    #c2410c;
  --pls-amber-sf: #fdf0e6;

  /* ═══ ESKİ TOKEN ADLARI — SİLMEYİN ══════════════════════════════════════════
     Panelin 7 sayfasının gövdesi hâlâ Tailwind sınıflarıyla yazılı ve o sınıflar
     bu adları kullanıyor: bg-[var(--green)], text-[var(--muted)], border-[var(--line)]…
     Bu tanımlar P9'da head.php silinince KAYBOLDU ve şu KRİTİK sonucu doğurdu:
     tanımsız var() → CSS spec gereği "invalid at computed-value time" → background-color
     UNSET (şeffaf) olur. Yani "Onayla" butonu #fff metinle #f5f4f1 zemin üzerinde
     kaldı → kontrast 1.10:1 → GÖRÜNMEZ. Ret modalindeki birincil buton 1.00:1.
     ⚠ Bu blok, kalan 7 sayfa .pls-* diline taşınana kadar ZORUNLUDUR. */
  --brand:#17181a;  --brand-dark:#000000;  --brand-soft:#f1f0ee;
  --accent:#fcc808; --accent-dark:#d9a800; --accent-soft:#fff6d6; --accent-ink:#5c4400;
  --orange:#c2410c; --orange-dark:#9a3412;
  --green:#1f9d57;  --green-soft:#e4f5ea;  --green-text:#15803d;
  --danger:#c0392b; --danger-soft:#fdecea; --danger-text:#96281b;
  --ink:#16181c;    --muted:#6e6a63;       --canvas:#f5f4f1;      --line:#e5e2dc;
}

/* ═══ ESKİ BİLEŞEN SINIFLARI — SİLMEYİN ═══════════════════════════════════════
   Kaynak: P9'da silinen partials/head.php <style> bloğu. Kalan 7 Tailwind sayfası
   (bayi-detay · onay-duzenle · onaylar-detay · sepet · bayiler · cari-sec · login)
   bunları kullanır; tanımsızken butonlar minik/dikey yığılmış, kartlar zeminsiz kalır.
   Renkleri YENİ markaya çekildi (siyah+altın); ölçüler dokunmatik hedefi korur. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
     min-height:44px;padding:0 .9rem;border-radius:5px;font-size:14px;font-weight:600;
     cursor:pointer;text-decoration:none;border:0;font-family:inherit;line-height:1;}
.btn-lg{min-height:52px;font-size:15px;padding:0 1.1rem;}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;}
.btn-ghost{background:transparent;}
/* .card KALDIRILDI (P11): yalnız bayi-detay'da 8 kez kullanılıyordu ve `p-4` ile
   eşliydi — tw.css kalkınca dolgusuz kaldı (içerik kenarlığa yapışıyordu). Ayrıca
   border-radius:5px panelin köşesiz diline aykırıydı. Yerine .pls-kart + .pls-dolgu. */
.pls-dolgu{padding:14px}
.row-card{display:block;background:var(--pls-yuzey);border:1px solid var(--pls-cizgi);
          border-radius:5px;padding:.75rem .9rem;text-decoration:none;color:inherit;}
/* Yatay satır kartı: metin bloğu + stepper + buton yan yana. onay-duzenle.php'nin
   katalog arama sonuçları bunu kullanır; eskiden Tailwind 'flex items-center gap-3'
   yazıyordu ve tw.css kalkınca üç sınıf da tanımsız kaldı → üç blok alt alta düşüyordu. */
.row-card.yatay{display:flex; align-items:center; gap:12px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.sticky-actions{position:sticky;bottom:0;z-index:20;display:flex;gap:.6rem;
                background:var(--pls-yuzey);border-top:1px solid var(--pls-cizgi);
                padding:.7rem .9rem;padding-bottom:calc(.7rem + env(safe-area-inset-bottom));}
/* Adet stepper — dokunmatik (44px hedef). JS'i kabuk-alt.php'de. */
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--pls-cizgi);
         border-radius:5px;overflow:hidden;background:#fff;}
.stepper button{width:44px;min-height:44px;font-size:20px;line-height:1;color:var(--pls-ink);
                background:#fff;border:0;cursor:pointer;}
.stepper button:active{background:var(--pls-altin-sf);}
.stepper input{width:4rem;text-align:center;border:0;font-weight:600;font-size:16px;
               color:var(--pls-ink);background:#fff;outline:none;-moz-appearance:textfield;}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.stepper .ad{display:flex;align-items:center;padding:0 .5rem;font-size:12px;color:var(--pls-soluk);
             border-left:1px solid var(--pls-cizgi);}
/* Toast (plsToast) */
.pls-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;
           max-width:90vw;padding:11px 16px;border-radius:5px;font-size:13.5px;font-weight:600;
           color:#fff;background:var(--pls-ink);box-shadow:0 6px 24px #0003;}
.pls-toast.hata{background:var(--pls-kirmizi);}
.pls-toast.ok{background:var(--pls-yesil);}

/* ── temel ────────────────────────────────────────────────────────────────── */
/* Taban, giriş ekranıyla ORTAK: yazı tipi/zemin/reset her iki gövdede de aynı
   olmalı (girişten panele geçerken font ve zemin değişmesin). Kabuk payı ise
   YALNIZ panele ait — giriş sayfasının sabit üst barı yok. */
.pls-govde,.pls-giris-sayfa{
  margin:0; background:var(--pls-kagit); color:var(--pls-ink);
  font-family:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  font-size:13px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.pls-govde{ padding-top:calc(var(--ust-h) + var(--baglam-h)); }   /* sabit kabuk payı */
.pls-govde *,.pls-giris-sayfa *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

/* ── ÜST BAR — Gencer'in .sh-headpanel'i ──────────────────────────────────── */
.pls-ustbar{
  position:fixed; top:0; left:0; right:0; height:var(--ust-h); z-index:1000;
  background:var(--pls-ink); display:flex; align-items:stretch;
}
.pls-marka{
  display:flex; align-items:center; padding:0 14px; flex:none;
  border-right:1px solid #ffffff1f;
}
.pls-marka img{height:44px; width:auto; max-width:150px; object-fit:contain}

/* karo rayı — 9 öğe 1024px'te sığmazsa yatay kayar (kesilmez) */
.pls-karolar{display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:none}
.pls-karolar::-webkit-scrollbar{display:none}

.pls-karo{
  position:relative; width:var(--karo-g); height:var(--karo-y); flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:#ffffffcc; text-decoration:none; text-align:center;
  border-right:1px solid #ffffff1f; transition:background .15s,color .15s;
}
.pls-karo svg{width:24px; height:24px; stroke-width:1.5}
.pls-karo span{font-size:11.5px; font-weight:600; line-height:1.15; letter-spacing:.01em}

/* AKTİF: Gencer'de düz gri (#666) dolgu. Lider'de ALTIN ALT ÇİZGİ + hafif zemin
   — altın dolgu + beyaz metin yasak olduğu için (kontrast), ayrıca altın burada
   "vurgu" rolünde kalır (logo dili: siyah %71 / altın %18). */
.pls-karo.aktif{background:#ffffff1a; color:#fff}
.pls-karo.aktif::after{
  content:""; position:absolute; left:8px; right:8px; bottom:0; height:3px;
  background:var(--pls-altin);
}
/* kilitli karo (cari seçilmeden açılmaz) — tıklanınca modal açar */
.pls-karo.kilitli{opacity:.62}
.pls-karo.kilitli::before{
  content:""; position:absolute; top:10px; right:12px; width:5px; height:5px;
  border-radius:50%; background:var(--pls-altin);
}
/* sayaç rozeti (onay kuyruğu) */
.pls-karo .pls-sayac{
  position:absolute; top:8px; right:10px; min-width:18px; height:18px; padding:0 5px;
  background:var(--pls-kirmizi); color:#fff; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* sağ blok: sepet + çıkış */
.pls-ustbar-sag{display:flex; align-items:center; gap:10px; margin-left:auto; padding:0 14px; flex:none}
.pls-sepet{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px;
  background:var(--pls-altin); color:var(--pls-ink);   /* ALTIN ZEMİN → SİYAH METİN */
  font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.pls-sepet svg{width:17px;height:17px}
.pls-ikonbtn{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  background:#ffffff1a; color:#fff; border:0; cursor:pointer; text-decoration:none;
}
.pls-ikonbtn svg{width:18px;height:18px}

/* ── BAĞLAM ŞERİDİ — Gencer'in -dovizcaribar'ı ────────────────────────────── */
.pls-baglam{
  position:fixed; top:var(--ust-h); left:0; right:0; height:var(--baglam-h); z-index:999;
  display:flex; align-items:center; gap:14px; padding:0 14px;
  background:var(--pls-yuzey); border-bottom:1px solid var(--pls-cizgi);
  font-size:12px; overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.pls-baglam::-webkit-scrollbar{display:none}

/* ── YÖNETİCİ DEVRİ BANDI (admin → plasiyer portalı) ───────────────────────────
   Kabuk SABİT konumludur ve gövde payı :root ölçülerinden gelir; bant da o
   sözleşmeye uyar (yeni ölçü --devir-h) — aksi halde içeriğin üstünü örterdi.
   ⚠ KALICI ve DİKKAT ÇEKİCİ olmalı: bu moddaki yönetici onay kuyruğunda ONAYLA'ya
     basarsa sıradaki cron CANLI DIA'ya GERÇEK sipariş yazar (kullanıcı kararı
     2026-08-09: tam yetki). Altın zemin + SİYAH metin (altın üzerine beyaz YASAK). */
.pls-devir-bant{
  position:fixed; top:calc(var(--ust-h) + var(--baglam-h)); left:0; right:0;
  height:var(--devir-h); z-index:999;
  display:flex; align-items:center; gap:10px; padding:0 14px;
  background:var(--pls-altin); color:var(--pls-ink);
  border-bottom:2px solid var(--pls-altin-dk);
  font-size:12px; white-space:nowrap; overflow-x:auto; scrollbar-width:none;
}
.pls-devir-bant::-webkit-scrollbar{display:none}
.pls-devir-bant svg{width:15px;height:15px;flex:none}
.pls-devir-bant .don{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 9px; background:var(--pls-ink); color:#fff;
  font-size:11.5px; font-weight:700; text-decoration:none;
}
/* "Oturumu kapat" — bandın ikinci eylemi; ikincil görünsün diye içi boş. */
.pls-devir-bant .don-form{flex:none; display:inline-flex}
.pls-devir-bant .don-form button{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  height:24px; padding:0 9px; background:transparent; color:var(--pls-ink);
  border:1px solid var(--pls-ink); font-size:11.5px; font-weight:700; font-family:inherit;
}
.pls-devir-bant .don-form button:hover{background:var(--pls-ink); color:#fff}
/* Bant açıkken gövde payı bir kat daha artar (kabuk ölçü sözleşmesi bozulmaz). */
.pls-govde.devirli{ padding-top:calc(var(--ust-h) + var(--baglam-h) + var(--devir-h)); }
/* ⚠ Bant SABİT (fixed) ve tam da sticky şeridin yapıştığı yükseklikte duruyor: devir modunda
   süzgeç şeridi kaydırınca bandın ARKASINA girip kayboluyordu. Sticky ofseti bant kadar iner.
   .pls-tablo-sar yükseklik sınırı da bant kadar kısalır (yoksa tablo alttan taşar). */
.pls-govde.devirli .pls-suzgec-serit{ top:calc(var(--ust-h) + var(--baglam-h) + var(--devir-h)); }
.pls-govde.devirli .pls-tablo-sar{ max-height:calc(100dvh - 240px - var(--devir-h)); }
.pls-govde.devirli .pls-tablo-sar.tam{ max-height:none; }
@media (max-width:1023px){ .pls-devir-bant{font-size:11.5px; gap:7px} }
.pls-kur{display:inline-flex; align-items:center; gap:5px; color:var(--pls-soluk)}
.pls-kur b{color:var(--pls-ink); font-weight:600; font-variant-numeric:tabular-nums}
.pls-ayrac{width:1px; height:18px; background:var(--pls-cizgi); flex:none}

/* seçili cari — bu şeridin kalbi */
.pls-cari{display:inline-flex; align-items:center; gap:8px; min-width:0}
.pls-cari-kod{
  background:var(--pls-ink); color:#fff; font-weight:700; font-size:11.5px;
  padding:3px 7px; flex:none;
}
.pls-cari-ad{font-weight:600; overflow:hidden; text-overflow:ellipsis; max-width:34ch}
.pls-cari-yok{color:var(--pls-soluk); font-style:italic}
.pls-degis{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; cursor:pointer;
  background:var(--pls-altin-sf); color:var(--pls-altin-ink);
  border:1px solid var(--pls-altin-dk); font-size:11.5px; font-weight:700;
}
.pls-degis svg{width:13px;height:13px}

/* bağlam rozetleri (iskonto / vadesi geçmiş) */
.pls-rozet{
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  font-size:11.5px; font-weight:600; border:1px solid transparent;
}
.pls-rozet.altin  {background:var(--pls-altin-sf); color:var(--pls-altin-ink); border-color:var(--pls-altin-dk)}
.pls-rozet.kirmizi{background:var(--pls-kirmizi-sf); color:var(--pls-kirmizi); border-color:#f0b6b0}
.pls-rozet.yesil  {background:var(--pls-yesil-sf); color:var(--pls-yesil); border-color:#a9d9bd}
.pls-rozet.gri    {background:var(--pls-kagit); color:var(--pls-soluk); border-color:var(--pls-cizgi)}
.pls-rozet.tik    {cursor:pointer}

/* ── SAYFA BAŞLIĞI — Gencer'in .sh-pagetitle'ı ────────────────────────────── */
.pls-sayfabaslik{
  height:var(--baslik-h); background:var(--pls-yuzey); border-bottom:1px solid var(--pls-cizgi);
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 16px;
}
.pls-sayfabaslik h1{margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em}
.pls-sayfabaslik .alt{font-size:11.5px; color:var(--pls-soluk); font-weight:500}
.pls-baslik-sag{display:flex; align-items:center; gap:8px; flex:none}

/* ── SAYFA GÖVDESİ ────────────────────────────────────────────────────────── */
.pls-sayfagovde{padding:14px 16px 40px}

/* ── KART / KPI ───────────────────────────────────────────────────────────── */
.pls-kart{background:var(--pls-yuzey); border:1px solid var(--pls-cizgi)}
.pls-kart-bas{
  padding:9px 13px; border-bottom:1px solid var(--pls-cizgi);
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--pls-soluk); display:flex; align-items:center; gap:7px;
}
.pls-kart-govde{padding:13px}

/* Y8: sayfalar satır içi `grid-template-columns:repeat(3,1fr)` yazınca medya sorguları
   EZİLİYORDU (768px'te 3 sütun sıkışıyor, 4 sütunda ilk kart diğerlerini 64px'e eziyordu).
   Varyantlar sınıfla verilir; medya sorguları bunları da ezebilir. */
.pls-kpi-izgara{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px}
.pls-kpi-izgara.uc{grid-template-columns:repeat(3,1fr)}
.pls-kpi-izgara.dort{grid-template-columns:repeat(4,1fr)}
.pls-kpi .sayi.para{font-size:22px; letter-spacing:-.01em}   /* para rakamları tek boyut */
.pls-kpi{
  background:var(--pls-yuzey); border:1px solid var(--pls-cizgi); padding:14px 16px;
  display:block; text-decoration:none; color:inherit; transition:border-color .15s;
}
.pls-kpi .etiket{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--pls-soluk); display:flex; align-items:center; gap:6px;
}
.pls-kpi .sayi{
  font-size:38px; font-weight:700; line-height:1.05; margin-top:6px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.pls-kpi .not{font-size:11.5px; color:var(--pls-soluk); margin-top:2px}
.pls-kpi.vurgu{border-left:3px solid var(--pls-altin)}
.pls-kpi.uyari .sayi{color:var(--pls-kirmizi)}

/* ── TABLO — Gencer'in yoğun 12px dili ───────────────────────────────────── */
/* ⚠ Y9: `overflow-x:auto` CSS gereği overflow-y'yi de auto'ya çeker; sarmalayıcının
   yüksekliği içerik kadar olduğu için İÇERİDE dikey kaydırma oluşmaz → thead sticky
   ASLA sabitlenmez. Yükseklik sınırı vermek sticky'yi çalıştırır (kabuk 124px + başlık). */
.pls-tablo-sar{overflow:auto; max-height:calc(100dvh - 240px);
               background:var(--pls-yuzey); border:1px solid var(--pls-cizgi)}
.pls-tablo-sar.tam{max-height:none}   /* kısa tablolarda sınır istemeyen yerler */
.pls-tablo{width:100%; border-collapse:collapse; font-size:12px}
.pls-tablo thead th{
  background:var(--pls-ink); color:#fff; text-align:left; font-weight:600;
  font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  padding:.55rem .5rem; white-space:nowrap; position:sticky; top:0; z-index:1;
}
.pls-tablo tbody td{padding:.35rem .5rem; border-bottom:1px solid var(--pls-cizgi); vertical-align:middle}
.pls-tablo tr.ust td{vertical-align:top}   /* çok satırlı kalem hücreleri üstten hizalanır */
/* Klavyeyle gezilebilen satır (onay kuyruğu): odak GÖRÜNÜR olmalı, yoksa sekme
   tuşuyla nerede olunduğu anlaşılmaz. */
.pls-tablo tbody tr[tabindex]:focus-visible{outline:2px solid var(--pls-altin-dk); outline-offset:-2px}
.pls-tablo tbody tr:nth-child(even){background:#faf9f7}
.pls-tablo .sag{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.pls-tablo .orta{text-align:center}
.pls-tablo .kod{font-weight:600; white-space:nowrap}
/* Sıralanabilir sütun başlığı (bayiler.php).
   ① Başlık satırı KOYU zeminli → bağlantı rengi AÇIKÇA beyaza sabitlenir (tarayıcı varsayılan
      mavisi burada okunmaz).
   ② Dolgu th'den bağlantıya TAŞINIR: böylece dokunma hedefi metin değil TÜM HÜCREdir
      (tablet hedefi — T19 dokunma kuralı). Kaba işaretçide hücre ~44px'e çıkar. */
.pls-tablo thead th.sirali{padding:0}
.pls-tablo thead th a.pls-sirala{
  display:block; padding:.55rem .5rem; color:#fff; text-decoration:none; white-space:nowrap;
}
.pls-tablo thead th a.pls-sirala:hover{text-decoration:underline}
.pls-tablo thead th a.pls-sirala.aktif{color:var(--pls-altin)}
.pls-tablo thead th a.pls-sirala:focus-visible{outline:2px solid var(--pls-altin); outline-offset:-2px}
@media (pointer:coarse){
  .pls-tablo thead th a.pls-sirala{padding-top:.85rem; padding-bottom:.85rem}
}
.pls-tablo tfoot td{
  padding:.5rem; border-top:2px solid var(--pls-ink); font-weight:700; background:var(--pls-kagit);
  font-variant-numeric:tabular-nums;
}
/* vade gecikme boyaması (Gencer: ≤-45 amber, ≤-60 kırmızı) */
.pls-tablo tr.gecikme-1 td{background:var(--pls-amber-sf)}
.pls-tablo tr.gecikme-2 td{background:var(--pls-kirmizi-sf)}
.pls-bos{padding:44px 16px; text-align:center; color:var(--pls-soluk)}

/* ── SAYFALAMA — Gencer'in kare düğmeleri (35×40) ────────────────────────── */
.pls-sayfalama{display:flex; align-items:center; gap:4px; margin-top:12px; flex-wrap:wrap}
.pls-sayfalama a,.pls-sayfalama span{
  min-width:35px; height:40px; padding:0 8px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--pls-yuzey); border:1px solid var(--pls-cizgi);
  color:var(--pls-ink); text-decoration:none; font-size:12px; font-weight:600;
}
.pls-sayfalama .aktif{background:var(--pls-ink); border-color:var(--pls-ink); color:#fff}
/* D7: pointer-events yalniz FAREYI engeller; sekme+Enter ile pasif ok ?s=0 e gidiyordu. */
.pls-sayfalama .pasif{opacity:.4; pointer-events:none; user-select:none}
.pls-sayfa-bilgi{margin-left:auto; font-size:11.5px; color:var(--pls-soluk)}

/* ── FORM / BUTON ─────────────────────────────────────────────────────────── */
.pls-girdi{
  height:34px; padding:0 10px; background:var(--pls-yuzey);
  border:1px solid var(--pls-cizgi); font-size:12.5px; color:var(--pls-ink); font-family:inherit;
}
.pls-girdi:focus{outline:2px solid var(--pls-altin-dk); outline-offset:-1px; border-color:var(--pls-altin-dk)}
.pls-girdi.genis{width:100%}
.pls-ara{position:relative; display:inline-flex; align-items:center}
.pls-ara svg{position:absolute; left:9px; width:15px; height:15px; color:var(--pls-soluk); pointer-events:none}
.pls-ara .pls-girdi{padding-left:30px; min-width:260px}
/* Şeride tam genişlik yayılan arama (bayiler): inline-flex içerik kadar daralırdı. */
.pls-ara.genis{display:flex}
.pls-ara.genis .pls-girdi{min-width:0; width:100%}

.pls-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px;
  padding:0 13px; border:1px solid transparent; font-size:12.5px; font-weight:600;
  cursor:pointer; text-decoration:none; font-family:inherit; white-space:nowrap;
}
.pls-btn svg{width:15px;height:15px}
.pls-btn.ana    {background:var(--pls-ink); color:#fff}
.pls-btn.altin  {background:var(--pls-altin); color:var(--pls-ink)}   /* siyah metin */
.pls-btn.sade   {background:var(--pls-yuzey); color:var(--pls-ink); border-color:var(--pls-cizgi)}
.pls-btn.onay   {background:var(--pls-yesil); color:#fff}
.pls-btn.ret    {background:var(--pls-yuzey); color:var(--pls-kirmizi); border-color:var(--pls-kirmizi)}
/* ret-dolu = ret sheet'indeki NİHAİ onay; çerçeveli 'ret' ile aynı ekranda
   göründüğü için dolu olmalı (hangisinin gerçekten sildiği belli olsun). */
.pls-btn.ret-dolu{background:var(--pls-kirmizi); color:#fff; border-color:var(--pls-kirmizi)}
/* İki adımlı onayın "Emin misiniz?" durumu — .onay'dan gözle ayrılabilecek kadar KOYU
   yeşil (aynı yeşil kalsaydı kullanıcı butonun kurulduğunu fark etmezdi). Beyaz
   metinle kontrast 6.4:1. Eskiden JS `bg-[#0f6b3c]` Tailwind sınıfını ekliyordu →
   tw.css kalkınca renk hiç değişmiyordu. */
.pls-btn.emin  {background:#0f6b3c; color:#fff; border-color:#0f6b3c}
.pls-btn.kucuk  {height:27px; padding:0 9px; font-size:11.5px}
/* ⚠ DOKUNMATİKTE 44px HEDEF — .kucuk'un 8 kullanımının HEPSİ dokunulabilir kontrol
   (Ekstre/Vade/İncele/Aç/Seç/Ekle/geçmiş). Panel tablet öncelikli ve bu dosyanın
   sözleşmesi 44px (.pls-btn min-height:44px, .stepper 44px) — 27px o sözleşmeyi
   deliyordu. Görsel boyut korunur; yalnız KABA İŞARETÇİDE (parmak) dokunma alanı
   büyür, fare/masaüstünde yoğun görünüm bozulmaz. */
@media (pointer:coarse) {
  .pls-btn.kucuk{height:44px; padding:0 12px; font-size:12.5px}
}
/* Y12: opacity ile soluklaştırmak kontrastı 1.47:1'e düşürüyordu. Pasif durum
   OKUNUR olmalı — kullanıcı butonun neden kapalı olduğunu görebilmeli. */
.pls-btn[disabled],.pls-btn.pasif{background:var(--pls-cizgi)!important; color:#6e6a63!important;
                                  border-color:var(--pls-cizgi)!important; opacity:1; cursor:not-allowed}
.btn:disabled,.btn[disabled]{background:var(--pls-cizgi)!important;color:#6e6a63!important;opacity:1;cursor:not-allowed}

/* durum çipleri (sipariş durumu süzgeci) */
.pls-cipler{display:flex; gap:6px; flex-wrap:wrap}
.pls-cip{
  display:inline-flex; align-items:center; gap:6px; height:29px; padding:0 11px;
  background:var(--pls-yuzey); border:1px solid var(--pls-cizgi); color:var(--pls-ink);
  font-size:12px; font-weight:600; text-decoration:none;
}
.pls-cip.aktif{background:var(--pls-ink); border-color:var(--pls-ink); color:#fff}
.pls-cip .adet{
  min-width:19px; height:19px; padding:0 5px; display:inline-flex; align-items:center;
  justify-content:center; background:var(--pls-altin); color:var(--pls-ink);
  font-size:10.5px; font-weight:700;
}

/* fiyat gösterimi (liste üstü çizili + net) */
.pls-liste-fiyat{color:var(--pls-soluk); text-decoration:line-through; font-size:11px; display:block}
.pls-net-fiyat{color:var(--pls-yesil); font-weight:700; white-space:nowrap}
.pls-isk{
  display:inline-block; margin-left:4px; padding:1px 5px; font-size:10.5px; font-weight:700;
  background:var(--pls-yesil-sf); color:var(--pls-yesil);
}

/* ── UYARI BANTLARI ───────────────────────────────────────────────────────── */
.pls-bant{
  display:flex; align-items:flex-start; gap:8px; padding:9px 13px; font-size:12.5px;
  border:1px solid; margin-bottom:12px; font-weight:500;
}
.pls-bant svg{width:16px;height:16px;flex:none;margin-top:1px}
.pls-bant.bilgi {background:var(--pls-altin-sf); color:var(--pls-altin-ink); border-color:var(--pls-altin-dk)}
.pls-bant.hata  {background:var(--pls-kirmizi-sf); color:var(--pls-kirmizi); border-color:#f0b6b0}
.pls-bant.basari{background:var(--pls-yesil-sf); color:var(--pls-yesil); border-color:#a9d9bd}

/* ── MODAL ────────────────────────────────────────────────────────────────── */
.pls-modal-arka{
  position:fixed; inset:0; background:#0009; z-index:1100;
  display:flex; align-items:flex-start; justify-content:center; padding:60px 16px 16px;
}
.pls-modal{
  background:var(--pls-yuzey); width:100%; max-width:640px; max-height:calc(100vh - 90px);
  display:flex; flex-direction:column; border-top:3px solid var(--pls-altin);
}
.pls-modal.genis{max-width:900px}
.pls-modal-bas{
  padding:12px 16px; border-bottom:1px solid var(--pls-cizgi);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.pls-modal-bas h2{margin:0; font-size:14.5px; font-weight:700}
.pls-modal-govde{padding:14px 16px; overflow-y:auto}
.pls-modal-alt{
  padding:11px 16px; border-top:1px solid var(--pls-cizgi); background:var(--pls-kagit);
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
}
.pls-kapat{background:none; border:0; cursor:pointer; color:var(--pls-soluk); line-height:0; padding:4px}
.pls-kapat svg{width:19px;height:19px}

/* ── DUYARLI ──────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  :root{--karo-g:88px; --karo-y:76px; --ust-h:80px}
  .pls-karo span{font-size:11px}
  .pls-kpi-izgara{grid-template-columns:repeat(2,1fr)}
}
/* Y7: 768px'te (iPad DİKEY) 10 karonun yalnız 4'ü görünüyor, kaydırma çubuğu da gizli
   (scrollbar-width:none) → menünün yarısının var olduğunu anlamanın yolu YOK.
   Eşik 1023px'e çekildi: altında karolar gizlenir, hamburger + tam ekran çekmece gelir. */
@media (max-width:1023px){
  .pls-karolar{display:none}
  .pls-mobil-menu{display:inline-flex !important}
  .pls-marka img{height:38px}
}
@media (max-width:767px){
  /* O10: sabit 64px yükseklik + flex-wrap yokluğu dar ekranda 30px TAŞMA yapıyordu
     (h1 3 satıra çıkıyor, taşan metin alttaki içeriğin üstüne biniyor). */
  .pls-sayfabaslik{height:auto; min-height:var(--baslik-h); flex-wrap:wrap; padding:10px 12px; gap:8px}
  .pls-baslik-sag{flex:1 1 100%}
  .pls-ara .pls-girdi{min-width:0; width:100%}
  .pls-kpi-izgara,.pls-kpi-izgara.uc,.pls-kpi-izgara.dort{grid-template-columns:1fr 1fr; gap:8px}
  /* Gencer'in "telefon ana ekranı" modu: karolar gizlenir, hamburger açılır */
  :root{--ust-h:60px; --baglam-h:auto}
  .pls-karolar{display:none}
  .pls-marka img{height:34px}
  .pls-baglam{position:static; height:auto; flex-wrap:wrap; gap:8px; padding:8px 12px}
  .pls-govde{padding-top:var(--ust-h)}
  .pls-kpi-izgara{grid-template-columns:1fr 1fr; gap:8px}
  .pls-kpi .sayi{font-size:30px}
  .pls-sayfagovde{padding:10px 12px 32px}
  .pls-mobil-menu{display:flex !important}
}
.pls-mobil-menu{display:none}

/* mobil çekmece */
.pls-cekmece{
  position:fixed; top:var(--ust-h); left:0; right:0; bottom:0; z-index:1050;
  background:var(--pls-yuzey); overflow-y:auto; padding:8px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-content:start;
}
.pls-cekmece a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  height:88px; border:1px solid var(--pls-cizgi); color:var(--pls-ink); text-decoration:none;
  font-size:11.5px; font-weight:600; text-align:center; padding:6px;
}
.pls-cekmece a svg{width:24px;height:24px}
.pls-cekmece a.aktif{border-color:var(--pls-ink); background:var(--pls-altin-sf)}

/* yazdırma: kabuk gizlenir */
@media print{
  .pls-ustbar,.pls-baglam,.pls-sayfabaslik .pls-baslik-sag,.pls-sayfalama{display:none !important}
  .pls-govde{padding-top:0; background:#fff}
  .pls-tablo thead th{background:#fff; color:#000; border-bottom:2px solid #000}
}

/* ═══ HOVER — YALNIZ FARE İÇİN ═══════════════════════════════════════════════
   ⚠ Panel iPad hedefli. Dokunmatikte :hover kuralı, dokunulan öğede ASILI KALIR
     (tablo satırı altın zeminle "seçili" görünür, kullanıcı yanlış satırı okur).
     Silinen head.php bunu yazılı sözleşme yapmıştı; yeni kabukta kaybolmuştu.
   ⚠ .pls-kpi hover'ı `a.` ile daraltıldı: <div> KPI kartlarında da kenarlık
     koyulaşıyordu, kullanıcı tıklıyor hiçbir şey olmuyordu (O5). */
@media (hover:hover) and (pointer:fine){
  .row-card:hover{border-color:var(--pls-ink);}
  .pls-karo:hover{background:#ffffff14; color:#fff}
  .pls-sepet:hover{background:var(--pls-altin-dk); color:var(--pls-ink)}
  .pls-ikonbtn:hover{background:#ffffff2e}
  .pls-degis:hover{background:var(--pls-altin)}
  .pls-rozet.tik:hover{filter:brightness(.97)}
  a.pls-kpi:hover{border-color:var(--pls-ink)}
  .pls-tablo tbody tr:hover{background:var(--pls-altin-sf)}
  .pls-sayfalama a:hover{border-color:var(--pls-ink)}
  .pls-btn.ana:hover{background:var(--pls-ink-2)}
  .pls-btn.altin:hover{background:var(--pls-altin-dk)}
  .pls-btn.sade:hover{border-color:var(--pls-ink)}
  .pls-btn.ret:hover{background:var(--pls-kirmizi); color:#fff}
  .pls-cip:hover{border-color:var(--pls-ink)}
  .pls-kapat:hover{color:var(--pls-ink)}
}
/* Dokunmatik geri bildirim — hover yerine :active */
.pls-karo:active,.pls-btn:active,.pls-cip:active,.pls-sayfalama a:active{filter:brightness(.92)}
.pls-karo:focus-visible,.pls-btn:focus-visible{outline:2px solid var(--pls-altin);outline-offset:2px}

/* ═══ Y6 — STICKY SÜZGEÇ ŞERİDİ ══════════════════════════════════════════════
   Sayfaların `sticky top-[60px] z-20` yazması ESKİ 60px kabuğa göreydi; yeni kabuk
   0-124px arasını KAPLIYOR (üst bar 84 + bağlam 40, z:999/1000) → şerit kabuğun
   ARKASINDA kayboluyordu. Hesap tek yerde: */
.pls-suzgec-serit{
  position:sticky; top:calc(var(--ust-h) + var(--baglam-h)); z-index:900;
  background:var(--pls-kagit); border-bottom:1px solid var(--pls-cizgi);
  margin:-14px -16px 12px; padding:10px 16px;
}

/* D5 — "veri yok" tiresi: #c9c6c0 = 1.70:1 (görünmüyordu). */
.pls-yok{color:#a8a49c}

/* D6 — iOS Safari, 16px'ten KÜÇÜK inputta odaklanınca SAYFAYI ZOOMLAR.
   Silinen head.php bunu açıkça kapatıyordu. Yoğunluk yalnız FARE'li ekranda küçülür. */
.pls-govde input,.pls-govde select,.pls-govde textarea{font-size:16px}
@media (hover:hover) and (pointer:fine){
  .pls-govde input,.pls-govde select,.pls-govde textarea{font-size:12.5px}
  .pls-girdi{height:34px}
}

/* D11 — onaylar.php iki bölmeli düzeni: satır içi `display:flex` KOŞULSUZDU, oysa iç
   öğeler `min-[1200px]:hidden/flex` varsayıyordu → 768px'te sağ bölme ~230px'e sıkışıyordu. */
.pls-iki-bolme{display:block}
.pls-bolme-sol{min-width:0}
@media (min-width:1200px){
  .pls-iki-bolme{display:flex; gap:14px; align-items:flex-start}
  .pls-bolme-sol{flex:1 1 0}
  .pls-bolme-sol.dar{max-width:520px}
}

/* ═══ ONAY DETAY BÖLMESİ — Tailwind'den dönüştürülen bileşenler ══════════════
   Önce bu bölme Tailwind'de kalmıştı ve aynı ekranda İKİ TASARIM DİLİ yan yana
   duruyordu (sol tablo 29.7px/12px, sağ 45.5px/14px — %53 fark; sol köşeli,
   sağ rounded-lg). Ölçüm E2E denetimindendi; artık tek dil. */
.pls-bolme-sag{min-width:0; flex:1 1 0}
.pls-bolme-bos{display:none}
@media (min-width:1200px){
  .pls-bolme-bos{display:flex; flex:1 1 0; align-items:center; justify-content:center}
  .pls-geri{display:none}          /* geniş ekranda liste zaten solda duruyor */
}
.pls-kart-bas.koyu{
  background:var(--pls-ink); color:#fff; border-bottom:0; text-transform:none;
  letter-spacing:0; font-size:13px;
}
.pls-kart-bas.koyu .kod{background:#ffffff26; padding:2px 7px; font-weight:700}
.pls-kart-bas.koyu .ad{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
                       white-space:nowrap; font-weight:600}
.pls-kart-bas.koyu .sag{margin-left:auto; opacity:.75; font-weight:500; white-space:nowrap}
.pls-tablo .urun-ad{font-weight:600}
.pls-tablo .alt{display:block; color:var(--pls-soluk); font-size:11px}
.pls-toplam{margin-top:12px; text-align:right; font-size:13px}
.pls-toplam .buyuk{margin-left:6px; font-size:17px; font-weight:700}

/* Ret alt-sayfası (mobil sheet)
   ⚠ SİLMEYİN — .pls-sheet-kap gizlemeyi YAPAN katmandır. Eskiden kapsayıcı
     Tailwind'in 'fixed inset-0 z-50 hidden'ıydı; tw.css kalkınca dördü de
     tanımsız kaldı → panel sayfanın altında SÜREKLİ açık duruyordu. Açma/kapama
     .acik sınıfıyla (onaylar.php), .hidden ile DEĞİL. */
.pls-sheet-kap{position:fixed; inset:0; z-index:1200; display:none}
.pls-sheet-kap.acik{display:block}
.pls-sheet-perde{position:absolute; inset:0; background:#00000066}
.pls-sheet{position:absolute; left:0; right:0; bottom:0; background:var(--pls-yuzey);
           padding:18px 16px calc(18px + env(safe-area-inset-bottom));
           border-top:3px solid var(--pls-kirmizi)}
.pls-sheet-baslik{margin:0; font-size:15px; font-weight:700}
.pls-sheet-eylem{display:flex; gap:10px; margin-top:12px}

/* ═══ DÖNÜŞÜMDE EKLENEN BİLEŞENLER (P10) ════════════════════════════════════
   Panelin TAMAMI artık .pls-* dilinde — Tailwind kalıntısı 0. Bu blok, son
   dönüştürülen sayfaların (bayiler · sepet · onay-duzenle · bayi-detay) ihtiyacı
   olan bileşenleri tanımlar. ⚠ Dönüşüm sırasında <div> SAYISI hiç değişmedi
   (yalnız class değerleri) — bu kural DOM bozulmasını yapısal olarak engelledi. */
/* ⚠ .pls-liste-fiyat BURADA DEĞİL — satır 350'de zaten tanımlı (font-size + display
   dahil). P11'de buraya bir KOPYA eklenmişti; iki tanım aynı sınıfı iki yerden
   yönetiyordu. Markup'taki Tailwind 'text-gray-400 line-through' → .pls-liste-fiyat
   dönüşümü doğruydu, eksik olan CSS değil markup'tı. */
.pls-kod-yazi{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
/* ⚠ .pls-kart-izgara / .pls-kart-dikey KALDIRILDI (2026-08-09): tek tüketicisi bayiler.php'nin
   kart ızgarasıydı, o ekran tabloya çevrildi (binlerce cari kartla taranamıyordu). Kullanımı
   kalmadığı doğrulandı; ilgili medya sorgusu satırları da temizlendi. Yeniden liste ekranı
   yazacak olan .pls-tablo kalıbını kullansın. */
.pls-mini-kart{background:var(--pls-kagit); border:1px solid var(--pls-cizgi);
               padding:10px; text-align:center}
.pls-ikili{display:grid; grid-template-columns:1fr; gap:14px}
/* Panel dashboard'unun 1.4fr/1fr bölmesi. Satır içi stil olarak yazılmıştı ve MEDYA
   SORGUSU YOKTU: dar tablette/telefonda iki sütun ezilip okunmaz hâle geliyordu.
   Y8 kuralı: ölçü kararları kabuk.css'te, sayfa içinde değil. */
.pls-bolme-14{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:900px){ .pls-bolme-14{grid-template-columns:1.4fr 1fr} }

/* Ürün ekleme kaplaması (onay-duzenle) */
.pls-overlay{position:fixed; inset:0; z-index:1100; display:none; flex-direction:column;
             background:var(--pls-kagit)}
.pls-overlay.acik{display:flex}
.pls-overlay-bas{display:flex; align-items:center; gap:12px; height:56px; flex:none;
                 padding:0 14px; background:var(--pls-yuzey); border-bottom:1px solid var(--pls-cizgi)}
.pls-overlay-govde{flex:1; overflow-y:auto; padding:14px;
                   display:flex; flex-direction:column; gap:8px}

@media (min-width:1200px){
  .pls-ikili{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .pls-ikili{grid-template-columns:1fr}
}

/* ── GİRİŞ EKRANI ─────────────────────────────────────────────────────────────
   Panelle AYNI dilde (eskiden ayrı bir tasarım adasıydı: farklı yazı tipi,
   soğuk zemin, yuvarlak köşe, kopya :root bloğu).
   ⚠ SİLMEYİN — bu blok Tailwind'in bıraktığı ÜÇ boşluğu doldurur; biri eksikse
     giriş ekranı gözle görülür şekilde bozulur:
       1) box-sizing → gövde .pls-govde DEĞİL .pls-giris-sayfa; content-box'ta
          width:100% + padding-right:48px şifre alanını karttan 48px TAŞIRIR.
       2) .pls-giris-kutu → eski 'max-w-[400px]' yerine; yoksa kart ekran kadar
          geniş olur.
       3) .pls-giris-logo → eski 'h-16 w-auto' yerine; yoksa logo DOĞAL boyutunda
          (600px) basılır.
   Ölçüler bilinçli olarak panelden BÜYÜK: .pls-girdi 34px/12.5px yoğun masaüstü
   ölçüsüdür; giriş tablette parmakla kullanılır → 46px alan, 16px yazı
   (16px altı iOS'ta odaklanınca sayfayı zoomlar). */
.pls-giris-sayfa{display:flex; min-height:100dvh; align-items:center; justify-content:center;
                 padding:24px 16px}
.pls-giris-kutu{width:100%; max-width:352px}
.pls-giris-bas{display:flex; flex-direction:column; align-items:center; gap:11px; margin-bottom:18px}
.pls-giris-logo{height:54px; width:auto; max-width:100%; object-fit:contain}
.pls-giris-etiket{background:var(--pls-ink); color:#fff; padding:5px 11px;
                  font-size:10px; font-weight:700; letter-spacing:.28em}
/* Kartın üstündeki altın şerit: markanın tek vurgu rengi, girişte de görünsün. */
.pls-giris-kart{background:var(--pls-yuzey); border:1px solid var(--pls-cizgi);
                border-top:3px solid var(--pls-altin); padding:22px 20px}
.pls-giris-etk{display:block; font-size:11px; font-weight:700; text-transform:uppercase;
               letter-spacing:.05em; color:var(--pls-soluk); margin-bottom:6px}
.pls-giris-kart .pls-girdi{height:46px; padding:0 12px; font-size:16px}
.pls-giris-alan{position:relative; margin-bottom:16px}
.pls-giris-kart .pls-btn.ana{width:100%; height:48px; margin-top:2px;
                             font-size:14px; font-weight:700; letter-spacing:.06em}
.pls-giris-goz{position:absolute; right:0; top:0; display:flex; align-items:center;
               justify-content:center; width:46px; height:46px; background:none; border:0;
               color:var(--pls-soluk); cursor:pointer}
.pls-giris-goz svg{width:19px; height:19px}   /* lucide varsayılanı 24px — alana göre büyük */
.pls-giris-kart .pls-bant{margin-bottom:14px}