/* =====================================================================
   temizle.pro YZ Müşteri Asistanı (dp/admin) · Tasarım Sistemi v2
   ---------------------------------------------------------------------
   Bileşen tabanlı, framework'süz (Bootstrap KURULMAZ) CSS. Sınıf adları
   Bootstrap'e aşina gelecek şekilde adlandırıldı (btn, card, form-control,
   badge, modal ...) ama tamamı kendi kodumuz.

   GERİYE UYUMLULUK: bu dosya panelin TEK stil dosyası; onlarca sayfa halen
   eski sınıf adlarını kullanıyor (btn.ghost, btn.danger, grid.cols-3,
   stat, badge b-*, flash, toggle, switchrow, tabs, timeline, inbox/thread,
   keybox, chips, pill, preview ...) ve bu sayfalar F1 kapsamı DIŞINDA —
   ayrı issue'larda yeni bileşen sınıflarına taşınacak. O yüzden eski
   sınıflar SİLİNMEDİ, yeni bileşenlerle birlikte YAŞIYOR. Aşağıda yeni bir
   varyant eklenen her yerde eski seçici de korunarak eşleştirildi
   (ör. ".btn.ghost, .btn-outline{...}").

   Eski CSS değişkenleri (--bg, --card, --soft, --ink, --muted, --line,
   --brand, --brand-d, --green, --red, --amber, --violet) yeni token'lara
   ALIAS olarak tutuluyordu; tüm sayfalar bu adlardan yeni token'lara
   taşındıktan sonra (YAZ-138/2-10) alias bloğu silindi (YAZ-138/11).

   Kırılım noktaları: 560 (büyük telefon) · 720 (tablet) · 992 (masaüstü) · 1280
   ================================================================== */

/* ---------------------------------------------------------------- *
 *  1) DEĞİŞKENLER (token'lar) — dp/yenitema tasarım diline taşındı  *
 *     (YAZ-125). Kaynak: dp/yenitema/*.dc.html (oklch renkler, IBM  *
 *     Plex tipografi, 68px koyu lacivert ikon rayı). Muted rengi     *
 *     tasarımdaki oklch(0.6 0.015 265) yerine oklch(0.56 0.015 265) *
 *     kullanır — birebir değer AA (4.5:1) metin kontrastını         *
 *     tutturamıyordu (3.95:1), bu ince ayar 4.63:1'e çıkarır.       *
 * ---------------------------------------------------------------- */
:root{
  /* Vurgu mavisi — tasarımın oklch(0.52 0.17 250) / hover oklch(0.42
     0.17 250) değerleri. --renk-primary-rgb alfa-blend kullanan
     eski `rgb(var(--renk-primary-rgb) / X)` çağrıları için AYNI
     rengin düz rgb kanalları (oklch()'in içinden kanal çıkarmak CSS'te
     mümkün değil, bu yüzden ikisi birlikte tutulur). */
  --renk-primary:oklch(0.52 0.17 250);      --renk-primary-d:oklch(0.42 0.17 250);
  --renk-primary-rgb:0 106 197;
  /* Dolgu (buton/fab) rengi: aydınlıkta --renk-primary'nin aynısı (beyaz
     metinle 5.43:1 kontrast), koyu temada AYRI ve daha koyu bir mavi —
     koyu temada --renk-primary metin/kenarlık için AÇIK tutulur
     (yüzeyler üzerinde okunsun diye), ama üzerine BEYAZ metin binen
     dolgularda (btn, btn-fab) o açık mavi AA kontrastını (4.5:1)
     tutturamaz. Aşağıdaki [data-tema="koyu"] bloğu bu ikisini ayırır. */
  --renk-primary-buton:var(--renk-primary); --renk-primary-buton-d:var(--renk-primary-d);
  --renk-secondary:#64748b;    --renk-secondary-d:#475569;
  --renk-success:#059669;      --renk-success-d:#047857;
  --renk-danger:#e11d48;       --renk-danger-d:#be123c;
  --renk-warning:#d97706;      --renk-warning-d:#b45309;
  --renk-info:#0284c7;         --renk-info-d:#0369a1;
  --renk-violet:#7c3aed;

  --renk-bg:oklch(0.975 0.004 265);
  --renk-surface:#ffffff;
  --renk-surface-2:oklch(0.965 0.005 265);    /* yumuşak yüzey / hover zemini */
  --renk-border:oklch(0.93 0.008 265);
  /* Liste/tablo SATIR ayracı — tasarımda kart kenarlığından bir tık açık
     (oklch 0.955 vs 0.93). Aynı tonu kullanmak listeleri "kafes" gibi
     gösteriyordu; yenitema satır ayracını kasten daha soluk tutar
     (bkz. Hazır Yanıtlar.dc.html satır kuralı). Metin değil, AA dışı. */
  --renk-border-yumusak:oklch(0.955 0.006 265);
  /* Girdi zemini — tasarımda beyazın bir tık altı; odakta beyaza döner
     (Ayarlar.dc.html style-focus="… background:#fff"). */
  --renk-input-bg:oklch(0.99 0.002 265);
  --renk-text:oklch(0.28 0.02 265);
  --renk-text-2:oklch(0.45 0.02 265);
  --renk-muted:oklch(0.56 0.015 265);
  --renk-scrollbar:oklch(0.88 0.01 265);

  /* Kenar çubuğu (rail) — her iki temada da koyu lacivert kalır (bkz.
     BILESENLER.md "Tema ve kabuk"), bu yüzden [data-tema="koyu"]
     bloğunda GEÇERSİZ KILINMAZ. */
  --renk-rail-bg:oklch(0.235 0.032 255);
  --renk-rail-hover:oklch(0.30 0.032 255);
  --renk-rail-ico:oklch(0.72 0.02 255);

  --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px;

  --golge-sm:0 1px 2px rgba(23,24,50,.06);
  --golge-md:0 1px 3px rgba(23,24,50,.08),0 10px 26px rgba(23,24,50,.06);
  --golge-lg:0 20px 46px rgba(23,24,50,.16),0 4px 12px rgba(23,24,50,.08);

  --bosluk-1:4px; --bosluk-2:8px; --bosluk-3:12px; --bosluk-4:16px;
  --bosluk-5:24px; --bosluk-6:32px; --bosluk-7:40px;

  /* IBM Plex Sans/Mono — YAZ-133: assets/fonts/ altından YERELDEN servis
     edilir (@font-face aşağıda, §1.1). YAZ-125 bunu Google Fonts CDN'e
     bağlamıştı; bu panel oturum açılmadan önce (login/register/install/
     sifre-yenile) yüklendiği için ziyaretçinin IP'sini onaysız Google'a
     göndermek gizlilik riskiydi — bkz. BILESENLER.md "Yazı tipleri".
     Harici CDN'e bağımlılık yok: internetsiz ortamda da doğru render
     alır (orijinal YAZ-92 kararı). */
  --font-sans:'IBM Plex Sans','Inter','Manrope',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-xs:11.5px; --font-sm:12.5px; --font-md:14.5px; --font-lg:16px;
  --font-xl:18px; --font-2xl:22px; --font-3xl:28px;

  --gecis-hizli:.12s ease; --gecis-normal:.2s ease; --gecis-yavas:.32s ease;

  --side-w:258px; --side-w-daralt:68px;
  --topbar-h:64px;
  --tap:44px;                      /* dokunma hedefi alt sınırı */
  /* Masaüstü kontrol yüksekliği (buton/girdi/simge butonu). yenitema
     kontrolleri 38-40px; --tap (44px) DOKUNMA hedefi alt sınırıdır ve
     mobilde korunur — bu değer yalnız ≥992px'te (fare bağlamı) devreye
     girer, bkz. §6 "masaüstü kontrol ölçeği". */
  --kontrol-h:38px;
  --kontrol-h-girdi:40px;
  --pad:16px;                      /* sayfa iç boşluk (ekrana göre büyür) */
  /* Okunabilir satır uzunluğu ölçüsü — tasarımın kalıbı (Ayarlar.dc.html
     "max-width:1180px; margin:0 auto"). `.content` ve `.kap` ortak kullanır,
     bkz. BILESENLER.md "Genişlik ölçüsü". */
  --olcu-kap:1180px;
  /* Gelen kutusu kolon genişlikleri (Canlı Destek.dc.html: liste 288px,
     ≥1080px'te 352px; ziyaretçi paneli 308px). Panel kırılım noktalarına
     (992 / 1280) yuvarlanır. */
  --inbox-liste-w:288px;
  --inbox-info-w:308px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --radius:var(--radius-md); --shadow:var(--golge-md);
}

/* ---------------------------------------------------------------- *
 *  1.1) YAZI TİPLERİ — IBM Plex Sans/Mono, assets/fonts/ altından     *
 *       yerelden (YAZ-133). Yalnızca fiilen kullanılan ağırlıklar    *
 *       (Sans 400/500/600/700, Mono 400/500) ve gereken iki alt küme *
 *       (latin + latin-ext — Türkçe ğ/ş/İ latin-ext'te, ı/ç/ö/ü      *
 *       latin'de) indirildi; diğer diller (kiril, yunan, vietnam)    *
 *       panelde kullanılmadığı için atlandı. Kaynak: Google Fonts    *
 *       (SIL OFL 1.1, bkz. assets/fonts/LICENSE.txt).                *
 * ---------------------------------------------------------------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans-400-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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans-400-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-sans-500-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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-sans-500-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-sans-600-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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-sans-600-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/ibm-plex-sans-700-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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/ibm-plex-sans-700-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-400-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-500-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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-500-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Karanlık tema — sidebar her iki temada da koyu kalır (yaygın SaaS
   deseni); burada sadece ana yüzey/metin/tema renkleri değişir. */
[data-tema="koyu"]{
  --renk-primary:#60a5fa;      --renk-primary-d:#93c5fd;    --renk-primary-rgb:96 165 250;
  /* Üzerine beyaz metin binen dolgular (btn, btn-fab) için AA'yı (4.5:1)
     tutturan ayrı, daha koyu mavi — bkz. §1'deki açıklama. */
  --renk-primary-buton:#1d4ed8; --renk-primary-buton-d:#1e40af;
  --renk-secondary:#94a3b8;    --renk-secondary-d:#cbd5e1;
  --renk-success:#22c55e;      --renk-success-d:#4ade80;
  --renk-danger:#fb7185;       --renk-danger-d:#fda4af;
  --renk-warning:#f59e0b;      --renk-warning-d:#fbbf24;
  --renk-info:#38bdf8;         --renk-info-d:#7dd3fc;
  --renk-violet:#a78bfa;

  --renk-bg:#0f1116;
  --renk-surface:#181b24;
  --renk-surface-2:#20232f;
  --renk-border:#2b2f3d;
  /* Aydınlıktakinin karşılığı: satır ayracı kart kenarlığından daha SOLUK
     (koyuda "daha soluk" = zemine daha yakın, yani daha koyu). */
  --renk-border-yumusak:#23262f;
  --renk-input-bg:#14161d;
  --renk-text:#e8eaf2;
  --renk-text-2:#b7bccd;
  --renk-muted:#8991a8;
  /* Aydınlıktaki --renk-scrollbar (açık gri) koyu yüzeyde neredeyse
     beyaz görünüp kontrastı bozuyordu (YAZ-133 bulgusu) — burada koyu
     yüzeye uygun ayrı bir ton tanımlanır. */
  --renk-scrollbar:#3a3f52;

  --golge-sm:0 1px 2px rgba(0,0,0,.3);
  --golge-md:0 1px 3px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.3);
  --golge-lg:0 20px 46px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.3);
}

/* ---------------------------------------------------------------- *
 *  2) TABAN — reset + tipografi                                     *
 * ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--renk-bg); color:var(--renk-text);
  font-size:15px; line-height:1.55;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  transition:background var(--gecis-normal),color var(--gecis-normal);
}
a{color:var(--renk-primary);text-decoration:none}
a:hover{text-decoration:underline}
/* Başlık ölçeği — yenitema başlıkları KÜÇÜK ve 600 ağırlıkta ("Canlı Destek"
   15px/600, "Gelen kutusu" 16px/600, kart başlığı 14.5px/600); hiyerarşi
   punto/kalınlıkla değil boşluk ritmiyle kurulur. Eski ölçek (19-28px, 800)
   panelin her kartını afiş gibi gösteriyordu — YAZ-157'nin kapattığı en
   büyük görsel fark bu. Ayrıca IBM Plex Sans yerelden yalnız 400/500/600/700
   yüklenir: 800 zaten 700'e düşüyordu, yani 800 yazmak sahte bir ağırlıktı. */
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.3;color:var(--renk-text);font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(17px,4vw,var(--font-2xl))}
h2{font-size:clamp(15.5px,3.4vw,var(--font-lg))}
h3{font-size:var(--font-md)}
h4{font-size:13.5px}
h5{font-size:13px}
h6{font-size:var(--font-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--renk-muted)}
small,.text-sm{font-size:var(--font-sm)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--renk-primary);outline-offset:2px}

.ico-svg{display:inline-block;vertical-align:middle;flex:none}

/* Marka logoları (WhatsApp/Instagram/Facebook/Telegram) — FILL tabanlı,
   sp_ui_ikon() 'whatsapp'/'instagram'/'facebook'/'telegram' anahtarları
   için ".ico-marka" + kısa sınıf (.wa/.ig/.fb/.tg) döner. Varsayılan
   currentColor'dur (tek renk, metinle uyumlu); marka rengini istemek
   için aşağıdaki sınıflardan biri eklenir. Kullanım: bkz. BILESENLER.md. */
.ico-marka.wa{color:#25D366}
.ico-marka.fb{color:#1877F2}
.ico-marka.tg{color:#229ED9}
/* Instagram: varsayılan olarak sp_ui_ikon() zaten gradyanlı SVG üretir
   (kendi <defs>/<linearGradient>'ı ile — CSS'ten bağımsız, background-clip
   SVG şekillerinde işe yaramadığı için bu yol seçildi). $tekRenk=true ile
   çağrılırsa currentColor kullanılır; bu sınıf o tek-renk hali için. */
.ico-marka.ig{color:#E1306C}

/* ---------------------------------------------------------------- *
 *  3) KABUK — mobilde üst çubuk + kayan menü, masaüstünde sabit yan  *
 * ---------------------------------------------------------------- */
.wrap{display:flex;min-height:100vh;min-height:100svh}

.side{
  position:fixed; inset:0 auto 0 0; z-index:60;
  width:min(84vw, 300px);
  background:var(--renk-rail-bg); color:#c7cbdd;
  padding:calc(14px + var(--safe-t)) 0 calc(14px + var(--safe-b));
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform .22s ease, width var(--gecis-normal);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  box-shadow:0 0 40px rgba(2,6,23,.4);
}
.side.open{transform:none}

.side-top{display:flex;align-items:center;gap:8px;padding:4px 14px 16px 20px}
.side .brand{font-size:15px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand-mark{
  /* yenitema ray logosu 34x34 / radius 10 (Canlı Destek.dc.html nav başı) */
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(180deg,oklch(0.62 0.17 250),var(--renk-primary));
  display:flex;align-items:center;justify-content:center;color:#fff
}
.brand-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .brand .badge{font-size:10px;padding:2px 6px;letter-spacing:.5px;flex:none}

/* Nav satırları yuvarlak "hap" (pill) — daralmış (ikon-only) rayda
   42x42'lik yuvarlak köşeli buton, genişte tam satır; aktif durum sol
   şerit yerine dolgu (--renk-primary) ile vurgulanır (bkz. yenitema). */
.side-nav{flex:1;padding:2px 10px 0}
.side-nav a{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;min-height:var(--tap);margin:2px 0;border-radius:11px;
  color:#c7cbdd;font-weight:600;font-size:14px;
  position:relative;
  transition:background var(--gecis-hizli),color var(--gecis-hizli)
}
.side-nav a .ico-svg{color:var(--renk-rail-ico);transition:color var(--gecis-hizli)}
.side-nav a:hover{background:var(--renk-rail-hover);text-decoration:none;color:#fff}
.side-nav a:hover .ico-svg{color:#fff}
.side-nav a.active{background:var(--renk-primary);color:#fff}
.side-nav a.active .ico-svg{color:#fff}
.nav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-nav .dot{
  margin-left:auto;background:var(--renk-danger);color:#fff;border-radius:999px;
  font-size:11px;font-weight:800;padding:1px 7px;display:none;flex:none
}
.side-nav a.has-unread .dot{display:inline-block}

.side-collapse{display:none}

.side-foot{
  padding:14px 20px 0;margin-top:10px;font-size:12.5px;color:#9298b3;
  border-top:1px solid rgba(255,255,255,.08)
}
.side-foot strong{color:#e7e9f2}
.side-foot .foot-links{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.side-foot a{color:#9298b3}
.side .close{
  position:absolute;top:calc(10px + var(--safe-t));right:10px;
  width:38px;height:38px;border-radius:10px;border:0;cursor:pointer;
  background:rgba(255,255,255,.08);color:#e7e9f2;display:flex;align-items:center;justify-content:center
}
.side .close:hover{background:rgba(255,255,255,.16)}

.scrim{
  position:fixed;inset:0;z-index:55;background:rgba(6,8,16,.55);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s
}
.scrim.on{opacity:1;visibility:visible}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  background:var(--renk-surface);border-bottom:1px solid var(--renk-border);
  padding:10px var(--pad); padding-top:calc(10px + var(--safe-t));
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:40;min-height:var(--topbar-h)
}
.topbar .titles{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
/* Üst çubuk başlığı yenitema'da 15px/600, altındaki açıklama 11.5px —
   sayfa adı bir "afiş" değil, kabuğun etiketi (Canlı Destek.dc.html header). */
.topbar h1{font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sub{font-size:var(--font-xs);color:var(--renk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-tools{display:flex;align-items:center;gap:8px;flex:none}
/* Üst çubuktaki simge butonları (bildirim/tema) — yenitema'da olduğu gibi
   kenarlıklı kare kutu; genel .btn-icon şeffaf kalır (modal-close, dropdown
   ok gibi başka yerlerde kenarlık istenmez), bu yüzden yalnız topbar'a
   kapsanır. */
.topbar-tools .btn-icon{border:1px solid var(--renk-border);border-radius:var(--radius-sm);background:var(--renk-surface)}
.topbar-tools .btn-icon:hover{background:var(--renk-surface-2)}
/* yenitema'da bu kutular 38x38 (44px'lik dokunma hedefi yalnız <992px'te
   korunur — mobilde üst çubuk zaten tek elle kullanılır). */
@media (min-width:992px){
  .topbar-tools .btn-icon{width:var(--kontrol-h);height:var(--kontrol-h);min-height:0}
}
/* Tema anahtarı: aydınlıkta güneş, koyuda ay ikonu görünür */
.tema-ico-koyu{display:none}
[data-tema="koyu"] .tema-ico-acik{display:none}
[data-tema="koyu"] .tema-ico-koyu{display:inline-flex}

.burger{
  flex:none;width:var(--tap);height:var(--tap);margin-left:-6px;
  border:0;background:none;cursor:pointer;border-radius:10px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 10px
}
.burger:hover{background:var(--renk-surface-2)}
.burger i{display:block;height:2px;background:var(--renk-text);border-radius:2px}
.burger i:nth-child(2){width:75%}

/* Özel kaydırma çubuğu (yenitema .om-scroll) — kaydırılabilir kapsayıcılara
   uygulanır; Firefox scrollbar-color + WebKit ::-webkit-scrollbar. */
.content,.side,.tablewrap,.dropdown-menu,.modal-body{scrollbar-width:thin;scrollbar-color:var(--renk-scrollbar) transparent}
.content::-webkit-scrollbar,.side::-webkit-scrollbar,.tablewrap::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,.modal-body::-webkit-scrollbar{width:8px;height:8px}
.content::-webkit-scrollbar-thumb,.side::-webkit-scrollbar-thumb,.tablewrap::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb{background:var(--renk-scrollbar);border-radius:99px}
.content::-webkit-scrollbar-track,.side::-webkit-scrollbar-track,.tablewrap::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track{background:transparent}

/* İçerik kabı — ÖLÇÜ KURALI (YAZ-161/1, YAZ-178'de SAYFA→BLOK'a taşındı)
   Eskiden burada `max-width:1280px` vardı ama ORTALAMA yoktu: 1280px'ten
   geniş her ekranda panel sola yapışıp sağda açıklanamayan bir boşluk
   bırakıyordu. YAZ-161 ölçüyü tasarımın kalıbına (Ayarlar.dc.html:
   `max-width:1180px; margin:0 auto`) çekip ORTALADI.
   Ama ölçüyü SAYFA düzeyinde vermek tabloyu, kart ızgarasını ve istatistik
   satırını da 1180px'e sıkıştırdı: 1920px'lik bir ekranda solda ve sağda
   ~370px'lik açıklanamayan iki şerit kalıyordu (YAZ-178). Tasarımın kendi
   çözümü de bu değil — `Ayarlar.dc.html` kök kabı `width:100%`, ölçü
   İÇERİDE tek bir bloğa veriliyor.
   Bu yüzden ≥992px'te ölçü kapanı SAYFADAN kalkar (aşağıdaki kural) ve
   yalnızca uzun DÜZ METİN bloklarına verilir. <992px'te kapan zaten etkisiz
   (ekran 1180px'ten dar), mobil belge yerleşimi aynen kalır.
   Tam genişlik isteyen ekranlar (uygulama kabuğu) ayrıca iç boşluk ve
   kaydırma kilidinden de muaftır, bkz. `:has(.app-shell)` §3.1. */
.content{
  padding:var(--pad);padding-bottom:calc(48px + var(--safe-b));
  width:100%;max-width:var(--olcu-kap);margin-inline:auto
}
/* Yeniden kullanılabilir ölçü kabı: tam genişlik bir bölgenin İÇİNDE
   okunabilir satır uzunluğunu geri getirir (form/metin ağırlıklı blok). */
.kap{width:100%;max-width:var(--olcu-kap);margin-inline:auto}

/* ≥992px — ÖLÇÜ SAYFADAN BLOĞA (YAZ-178)
   Sayfa ekranın tamamını kullanır; tablo/kart ızgarası/araç çubuğu ekran
   kadar geniş olur. Okunabilirlik ölçüsü, `.content`in DOĞRUDAN çocuğu olan
   uzun düz metin bloklarında korunur — bunlar tam genişlikte 200+ karakterlik
   satırlara uzayıp okunamaz hâle gelen tek öğe türü. Kart/tablo/ızgara İÇİNDE
   kalan metin zaten kendi kolonuyla sınırlı olduğu için listeye alınmaz.
   `margin-inline:0` ile sola hizalanır (ortalarsa şeritler geri gelir). */
@media (min-width:992px){
  .content{max-width:none;margin-inline:0}
  .content>p,
  .content>.flash,
  .content>.alert,
  .content>.alert-info,.content>.alert-warning,
  .content>.alert-danger,.content>.alert-success{max-width:var(--olcu-kap)}
}

/* ---------------------------------------------------------------- *
 *  3.1) UYGULAMA KABUĞU (app shell) — YAZ-161/1                      *
 *                                                                    *
 *  İki yerleşim kipi var ve hangisinin kullanılacağı SAYFA BAZINDA   *
 *  kararlaştırılır (sayfa sayfa doğaçlama YOK, bkz. BILESENLER.md):  *
 *                                                                    *
 *   a) BELGE yerleşimi (VARSAYILAN) — sayfa gövdesi kayar, içerik    *
 *      `--olcu-kap` ile ortalanır. Liste/rapor/form ekranlarının      *
 *      tamamı böyle kalır.                                           *
 *   b) UYGULAMA KABUĞU — sayfa gövdesi HİÇ kaymaz; ekran 100vh'e     *
 *      kilitlenir ve kaydırma kolonların İÇİNDE olur. Yalnızca çok   *
 *      panelli, "canlı" ekranlar için (şu an tek örnek: inbox.php).  *
 *                                                                    *
 *  Sayfa kipi seçmek için `.content`in içine `.app-shell` sarmalayanı*
 *  koymak yeterli — `_guard.php` iskeleti (`.wrap > .main > .content`)*
 *  DEĞİŞMEZ, kabuk `:has()` ile yukarı doğru uyarlanır.              *
 *                                                                    *
 *  Kip yalnız ≥992px'te devreye girer: <992px'te ekran zaten tek     *
 *  kolon ve dokunmatik; orada 100vh kilidi (mobil tarayıcı adres     *
 *  çubuğu + sanal klavye yüzünden) kaydırmayı bozar. Mobilde her     *
 *  sayfa belge yerleşimindedir.                                      *
 * ---------------------------------------------------------------- */
@media (min-width:992px){
  html:has(.app-shell),body:has(.app-shell){height:100%;overflow:hidden}
  .wrap:has(.app-shell){height:100vh;height:100svh;min-height:0;overflow:hidden}
  .main:has(.app-shell){min-height:0;overflow:hidden}
  .content:has(.app-shell){
    /* Ölçü kabından muaf: kolonlar ekranın tamamını kullanır. */
    max-width:none;margin-inline:0;
    /* Kendi iç boşluğu yok — boşluk kolonların İÇİNDE verilir. */
    padding:0;
    flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden
  }
  /* Kabuktan ÖNCE gelen sayfa üstü bantları (kimliğine bürünme uyarısı =
     `.flash`, bilgi kutusu = `.alert-*`) kendi boşluğunu alır ve KISALMAZ.
     `.content`in altındaki diğer kardeşler (kayan panel perdesi, modal)
     `position:fixed` olduğu için yerleşimi etkilemez, listeye alınmaz. */
  .content:has(.app-shell)>.flash,
  .content:has(.app-shell)>.alert-info,
  .content:has(.app-shell)>.alert-warn,
  .content:has(.app-shell)>.alert-danger,
  .content:has(.app-shell)>.alert-success{
    flex:none;margin:var(--pad) var(--pad) 0;
    /* Kabukta bu bantlar sayfa genişliğinde bir şerittir; yukarıdaki düz
       metin ölçüsü (YAZ-178) buraya UYGULANMAZ. */
    max-width:none
  }
  .app-shell{flex:1;min-height:0;display:flex;flex-direction:column}
  /* Kabuk içindeki kolonlu yerleşim ekranın kenarına yaslanır: kendi
     çerçevesi/köşe yarıçapı olmaz (tasarımda kolonlar sayfanın kendisi). */
  .content:has(.app-shell) .inbox{border:0;border-radius:0}
}

/* ---------------------------------------------------------------- *
 *  Masaüstü kenar çubuğu — 3 durum:                                 *
 *   1) "oto" (html'de sb-* sınıfı yok, tercih yoksa varsayılan):    *
 *      daraltılmış (ikon-only); imleç/klavye odağı .side üzerine    *
 *      gelince GEÇİCİ genişler. .side masaüstünde position:fixed    *
 *      olduğundan (bkz. §6) genişleme .main'i itmez — panel         *
 *      içeriğin üzerine biner (overlay). .main'in sol boşluğu bu    *
 *      durumda SABİT (daralt genişliği) kalır.                      *
 *   2) html.sb-daralt — kullanıcı açıkça daralttı: kalıcı dar,      *
 *      hover devre dışı (görsel olarak "oto" ile aynı, yalnız       *
 *      kalıcı ve hover'a kapalı).                                   *
 *   3) html.sb-genis — kullanıcı açıkça genişletti: kalıcı geniş,   *
 *      hover devre dışı, .main de payını genişliğe göre ayırır      *
 *      (klasik itmeli yerleşim — bir kez seçilen kalıcı durum,      *
 *      "her hover'da zıplama" riski yok).                           *
 * ---------------------------------------------------------------- */
@media (min-width:992px){
  /* Daralmış taban görünüm: metinler DISPLAY:NONE ile değil,
     genişlik/opaklıkla gizlenir — flex öğesi oldukları için width:0
     gerçekten sıfıra çöker, ama ekran okuyucu içeriği yine okur. */
  /* Daralmış raydaki ikon butonu yenitema'da tam 42x42 / radius 11 ve
     aralarında 6px boşluk var; bizde satır 68px'in tamamına yayılıp
     48x44'lük bir dikdörtgen oluyordu — aktif (mavi dolgulu) öge bu
     yüzden mockup'takinden belirgin şekilde daha iri görünüyordu.
     44px'lik --tap alt sınırı burada gevşetilir: ray ≥992px'te, yani
     yalnız fare bağlamında görünür (mobilde kayan menüde satırlar tam
     genişlikte ve --tap yüksekliğinde kalır). */
  .side-nav{padding:2px 0 0}
  .side-nav a{
    justify-content:center;padding:0;gap:0;
    width:42px;height:42px;min-height:42px;margin:3px auto;border-radius:11px
  }
  .side-top{justify-content:center;padding:4px 8px 18px}
  .brand-text,.nav-label,.side-foot strong,.side-foot span,.side .brand .badge{
    display:inline-block;opacity:0;width:0;margin:0;padding:0;overflow:hidden;
    white-space:nowrap;transition:opacity var(--gecis-hizli)
  }
  /* Alt menüdeki "Çıkış" bağlantısı daralmışken tamamen kaldırılır
     (profil menüsünde zaten var); bu görünmez-ama-odaklanabilir bir
     tuzak yaratmasın diye display:none KORUNUR — yukarıdaki nav-label
     kuralından farklı olarak burada gizlenen tek başına bir ikon değil,
     hiçbir görsel karşılığı kalmayan tüm bağlantı. */
  .side-foot .foot-links a:not(.icon-only){display:none}

  .sb-lbl-daralt{display:none}

  /* Kalıcı genişletilmiş (kullanıcı açıkça seçti) */
  html.sb-genis .side{width:var(--side-w)}
  html.sb-genis .main{margin-left:var(--side-w)}
  html.sb-genis .side-nav{padding:2px 10px 0}
  html.sb-genis .side-nav a{
    justify-content:flex-start;padding:12px 14px;gap:13px;
    width:auto;height:auto;min-height:var(--tap);margin:2px 0
  }
  html.sb-genis .side-top{justify-content:flex-start;padding:4px 14px 16px 20px}
  html.sb-genis .brand-text,html.sb-genis .nav-label,html.sb-genis .side-foot strong,
  html.sb-genis .side-foot span,html.sb-genis .side .brand .badge{opacity:1;width:auto;overflow:visible}
  html.sb-genis .side-foot .foot-links a:not(.icon-only){display:inline-flex}
  html.sb-genis .side-collapse svg{transform:rotate(180deg)}
  html.sb-genis .sb-lbl-genislet{display:none}
  html.sb-genis .sb-lbl-daralt{display:inline}
}

/* Geçici genişleme — yalnız "oto" durumda (ne sb-daralt ne sb-genis).
   .main itilmez (margin-left sabit kalır), panel içeriğin üzerine
   biner. Klavye odağı (focus-within) dokunma yeteneğinden bağımsız
   her masaüstü tarayıcıda çalışsın diye ayrı, kapsayıcısız bir sorguda;
   fare "hover"ı ise dokunmatik cihazlarda yapışıp kalmasın diye yalnız
   (hover:hover) destekleyen cihazlarda uygulanır. */
@media (min-width:992px){
  html:not(.sb-daralt):not(.sb-genis) .side:focus-within{width:var(--side-w);box-shadow:var(--golge-lg)}
  html:not(.sb-daralt):not(.sb-genis) .side:focus-within .side-nav{padding:2px 10px 0}
  html:not(.sb-daralt):not(.sb-genis) .side:focus-within :is(.side-nav a){
    justify-content:flex-start;padding:12px 14px;gap:13px;
    width:auto;height:auto;min-height:var(--tap);margin:2px 0
  }
  html:not(.sb-daralt):not(.sb-genis) .side:focus-within .side-top{justify-content:flex-start;padding:4px 14px 16px 20px}
  html:not(.sb-daralt):not(.sb-genis) .side:focus-within :is(.brand-text,.nav-label,.side-foot strong,.side-foot span,.side .brand .badge){opacity:1;width:auto;overflow:visible}
}
@media (min-width:992px) and (hover:hover){
  html:not(.sb-daralt):not(.sb-genis) .side:hover{width:var(--side-w);box-shadow:var(--golge-lg)}
  html:not(.sb-daralt):not(.sb-genis) .side:hover .side-nav{padding:2px 10px 0}
  html:not(.sb-daralt):not(.sb-genis) .side:hover :is(.side-nav a){
    justify-content:flex-start;padding:12px 14px;gap:13px;
    width:auto;height:auto;min-height:var(--tap);margin:2px 0
  }
  html:not(.sb-daralt):not(.sb-genis) .side:hover .side-top{justify-content:flex-start;padding:4px 14px 16px 20px}
  html:not(.sb-daralt):not(.sb-genis) .side:hover :is(.brand-text,.nav-label,.side-foot strong,.side-foot span,.side .brand .badge){opacity:1;width:auto;overflow:visible}
}

/* ---------------------------------------------------------------- *
 *  4) BİLEŞENLER                                                    *
 * ---------------------------------------------------------------- */

/* 4.1 — Buton ------------------------------------------------------ */
.btn,.btn-primary,.btn-secondary,.btn-outline,.btn-danger,.btn-warning,
.btn-success,.btn-ghost,.btn-icon,.btn-fab{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  border:0;border-radius:var(--radius-sm);padding:11px 16px;min-height:var(--tap);
  /* yenitema butonu 12.5-13px / 600 (500'lük ikincil varyantlar da var).
     Eski 650 değeri, yerelden yalnız 600 ve 700 yüklendiği için fiilen
     700'e yuvarlanıyordu — tasarımdakinden bir kademe kalın. */
  font-size:14.5px;font-weight:600;font-family:inherit;text-align:center;
  transition:background var(--gecis-hizli),border-color var(--gecis-hizli),
             color var(--gecis-hizli),transform .1s,box-shadow var(--gecis-hizli);
}
.btn,.btn-primary{background:var(--renk-primary-buton);color:#fff}
.btn:hover,.btn-primary:hover{background:var(--renk-primary-buton-d);text-decoration:none;color:#fff}

.btn-secondary{background:var(--renk-secondary);color:#fff}
.btn-secondary:hover{background:var(--renk-secondary-d);color:#fff;text-decoration:none}

/* Kenarlık kalınlığı 1px — yenitema'nın TÜM kenarlıkları 1px (kart, girdi,
   ikincil buton, arama kutusu). 1.5px panelin çizgilerini tasarımdakinden
   kalın gösteriyordu. */
.btn.ghost,.btn-outline{background:var(--renk-surface);color:var(--renk-text);border:1px solid var(--renk-border)}
.btn.ghost:hover,.btn-outline:hover{background:var(--renk-surface-2);color:var(--renk-text);text-decoration:none}

.btn-ghost{background:transparent;color:var(--renk-text-2);border:1px solid transparent}
.btn-ghost:hover{background:var(--renk-surface-2);color:var(--renk-text);text-decoration:none}

.btn.danger,.btn-danger{background:var(--renk-danger);color:#fff}
.btn.danger:hover,.btn-danger:hover{background:var(--renk-danger-d);color:#fff;text-decoration:none}

.btn-warning{background:var(--renk-warning);color:#fff}
.btn-warning:hover{background:var(--renk-warning-d);color:#fff;text-decoration:none}

.btn-success{background:var(--renk-success);color:#fff}
.btn-success:hover{background:var(--renk-success-d);color:#fff;text-decoration:none}

.btn:active,.btn-primary:active,.btn-secondary:active,.btn-outline:active,.btn-danger:active,
.btn-warning:active,.btn-success:active,.btn-ghost:active{transform:translateY(1px)}
.btn:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-outline:focus-visible,
.btn-danger:focus-visible,.btn-warning:focus-visible,.btn-success:focus-visible,.btn-ghost:focus-visible,
.btn-icon:focus-visible{outline:0;box-shadow:0 0 0 3px rgb(var(--renk-primary-rgb) / .3)}

.btn.sm,.btn-sm{padding:8px 13px;min-height:38px;font-size:13px;border-radius:calc(var(--radius-sm) - 1px)}
.btn-lg{padding:14px 22px;min-height:52px;font-size:16px}
.btn.block,.btn-block{width:100%}
.btn:disabled,.btn[disabled],.btn-primary:disabled,.btn-secondary:disabled,.btn-outline:disabled,
.btn-danger:disabled,.btn-warning:disabled,.btn-success:disabled,.btn-ghost:disabled{
  opacity:.55;cursor:not-allowed;pointer-events:none
}

.btn-icon{
  width:var(--tap);height:var(--tap);padding:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--renk-text-2);position:relative
}
.btn-icon:hover{background:var(--renk-surface-2);color:var(--renk-text)}
.btn-icon.on{background:rgb(var(--renk-primary-rgb) / .14);color:var(--renk-primary)}

.btn-fab{
  width:56px;height:56px;border-radius:999px;padding:0;
  background:var(--renk-primary-buton);color:#fff;box-shadow:var(--golge-lg)
}
.btn-fab:hover{background:var(--renk-primary-buton-d)}

.btnbar{display:flex;gap:8px;flex-wrap:wrap}
.btnbar .btn,.btnbar .btn-primary,.btnbar .btn-outline,.btnbar .btn-secondary{flex:1 1 auto}

/* Bildirim/durum noktası — btn-icon üstünde köşe rozeti */
.notif-dot{
  position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;
  background:var(--renk-danger);border:2px solid var(--renk-surface)
}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--renk-muted);flex:none}
.status-dot.online{background:var(--renk-success)}

/* 4.2 — Form --------------------------------------------------------
   Bilinçli olarak hem çıplak input[type=...] seçicileri (çoğu sayfa
   class="form-control" EKLEMEDEN yalnız name= ile input basıyor) hem de
   .form-control sınıfı aynı kuralları paylaşır. */
/* Etiket — yenitema'da 11.5px / 500 ve soluk (oklch 0.5); girdinin kendisi
   ana ögedir, etiket onun üstünde ince bir künye. Eski 13px/650 etiketleri
   girdi metniyle aynı ağırlıkta gösteriyordu. */
label.fl,.form-label{display:block;font-weight:500;margin:14px 0 6px;font-size:var(--font-xs);color:var(--renk-text-2)}
label.fl:first-child,.form-label:first-child{margin-top:0}
label.fl .hint,.form-label .hint,.form-hint{font-weight:400;color:var(--renk-muted);font-size:12px}
.form-hint{display:block;margin-top:5px}
.form-error{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--renk-danger)}

input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
input[type=tel],input[type=date],input[type=search],select,textarea,.form-control{
  width:100%;padding:11px 12px;border:1px solid var(--renk-border);border-radius:var(--radius-sm);
  /* background-COLOR, kısayol değil: kısayol select'in ok işaretini
     (background-image) siler. Aynı tuzak aşağıdaki :focus kuralında da var. */
  font-size:16px;background-color:var(--renk-input-bg);color:var(--renk-text);font-family:inherit;
  min-height:var(--tap);-webkit-appearance:none;appearance:none;
  transition:border-color var(--gecis-hizli),box-shadow var(--gecis-hizli)
}
select,select.form-control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767d94' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px
}
/* Odak: yenitema yalnız kenarlık rengini değiştirip zemini beyaza çeker
   (style-focus="border-color:… ; background:#fff"). Zemin davranışı birebir
   alındı; 3px'lik halka BİLEREK korundu — tasarımda yok ama tek başına
   kenarlık rengi klavye kullanıcısı için yeterli bir odak göstergesi değil
   (aynı gerekçeyle --renk-muted de tasarımdan koyu tutuluyor). */
input:focus,select:focus,textarea:focus,.form-control:focus{
  outline:0;border-color:var(--renk-primary);background-color:var(--renk-surface);
  box-shadow:0 0 0 3px rgb(var(--renk-primary-rgb) / .16)
}
input.is-invalid,.form-control.is-invalid{border-color:var(--renk-danger)}
input.is-invalid:focus,.form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(225,29,72,.16)}
input[type=color]{width:52px;height:42px;min-height:0;padding:2px;border:1px solid var(--renk-border);border-radius:8px;vertical-align:middle}
input[type=range]{width:100%;accent-color:var(--renk-primary);min-height:var(--tap)}
textarea{resize:vertical;min-height:88px}

.row{display:flex;gap:12px;flex-wrap:wrap}
.row>div{flex:1 1 100%;min-width:0}

/* Onay kutusu / radyo — native element + accent-color; ekstra bir
   kütüphane gerekmeden temayla birlikte renklenir. */
.form-check{display:flex;align-items:center;gap:10px;min-height:var(--tap);cursor:pointer}
.form-check input[type=checkbox],.form-check input[type=radio],
.checkbox,.radio{
  width:19px;height:19px;min-height:0;flex:none;accent-color:var(--renk-primary);cursor:pointer
}

/* label.switchrow / .switch-row -> satırın tamamı tıklanabilir (mobilde önemli).
   switch-row = switchrow'un F1 sonrası sayfalarda kullanılacak yeni adı. */
.switchrow,.switch-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--renk-border-yumusak);cursor:pointer}
.switchrow:last-child,.switch-row:last-child{border-bottom:0}
.switchrow .txt,.switch-row .txt{flex:1;min-width:0}
.switchrow .txt b,.switch-row .txt b{font-weight:600}
.switchrow .txt span,.switch-row .txt span{display:block;color:var(--renk-muted);font-size:12px}

.toggle,.switch{position:relative;width:48px;height:28px;display:inline-block;vertical-align:middle;flex:none;cursor:pointer}
.toggle input,.switch input{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;height:var(--tap);min-height:0;margin:0;padding:0;
  opacity:0;cursor:pointer;z-index:2
}
.toggle .sl,.switch .sl{position:absolute;inset:0;background:var(--renk-border);border-radius:28px;transition:.2s;cursor:pointer}
.toggle .sl:before,.switch .sl:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(15,23,42,.25)}
.toggle input:checked+.sl,.switch input:checked+.sl{background:var(--renk-success)}
.toggle input:checked+.sl:before,.switch input:checked+.sl:before{transform:translateX(20px)}
.toggle input:focus-visible+.sl,.switch input:focus-visible+.sl{box-shadow:0 0 0 3px rgb(var(--renk-primary-rgb) / .3)}

.input-group{display:flex;align-items:stretch}
.input-group>input,.input-group>select,.input-group>.form-control{border-radius:0;flex:1;min-width:0}
.input-group>:first-child{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}
.input-group>:last-child{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
.input-group>.btn,.input-group>.btn-outline{flex:none;border-radius:0}
.input-group>*:not(:first-child){margin-left:-1px}

.search-box{position:relative;flex:1;min-width:0;max-width:320px}
.search-box .ico-svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--renk-muted);pointer-events:none}
.search-box input{padding-left:36px}
/* Üst çubuktaki arama kutusu — yenitema'daki tonlu (surface-2) zemin ve
   38px yükseklik (header 64px içinde nefes payı bırakır). Bu kutu zaten
   yalnız ≥992px'te görünür (bkz. §6), dokunma hedefi kısıtı geçerli değil. */
.topbar .search-box input{
  background-color:var(--renk-surface-2);border-color:var(--renk-border);
  height:var(--kontrol-h);min-height:0;padding-top:0;padding-bottom:0;font-size:13px
}
.topbar .search-box input:focus{background-color:var(--renk-surface)}

/* 4.3 — Kart / İstatistik ------------------------------------------ */
.card{
  background:var(--renk-surface);border:1px solid var(--renk-border);border-radius:var(--radius-md);
  box-shadow:var(--golge-sm);padding:16px
}
.card-baslik{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--renk-border)}
.card-baslik h2,.card-baslik h3{margin:0}
.card-govde{padding:0}
.card-alt{padding-top:12px;margin-top:14px;border-top:1px solid var(--renk-border);
  display:flex;align-items:center;justify-content:flex-end;gap:8px}

.grid{display:grid;gap:14px;grid-template-columns:1fr}
.grid>*{min-width:0}
/* grid-2/3/4 = cols-2/3/4'ün F1 sonrası sayfalarda kullanılacak yeni adı */
.grid.cols-2,.grid.cols-3,.grid.grid-2,.grid.grid-3{grid-template-columns:1fr}
/* İstatistik kutuları en dar ekranda bile iki sütun kalsın */
.grid.cols-4,.grid.grid-4{grid-template-columns:repeat(2,1fr)}

/* stat/metric: "stat" eski sınıf listesinde (tema-denetim.php), F1 sonrası
   sayfalar "metric" kullanmalı — bkz. BILESENLER.md (YAZ-138/4, kb.php). */
.stat,.metric{
  background:var(--renk-surface);border:1px solid var(--renk-border);border-radius:var(--radius-md);
  padding:14px 16px;box-shadow:var(--golge-sm)
}
/* Sayı: yenitema istatistik kartında rakam IBM Plex MONO / 30px / 500 ve
   sıkı harf aralığı (Hazır Yanıtlar.dc.html stats). Mono olması bir süs
   değil: rakamlar eşit genişlikte olduğu için yan yana duran kartlarda
   sayılar hizalanır. Eski sans-800 değeri hem hizasız hem çok kalındı. */
.stat .label,.metric .label{font-size:11px;color:var(--renk-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.stat .num,.metric .num{
  font-family:var(--font-mono);font-size:clamp(23px,5.5vw,30px);font-weight:500;
  letter-spacing:-.02em;margin-top:4px;line-height:1.15;word-break:break-word
}
.stat .sub,.metric .sub{font-size:12px;color:var(--renk-muted);margin-top:3px}
.stat.green .num,.metric.green .num{color:var(--renk-success)}.stat.red .num,.metric.red .num{color:var(--renk-danger)}
.stat.blue .num,.metric.blue .num{color:var(--renk-primary)}.stat.violet .num,.metric.violet .num{color:var(--renk-violet)}

/* 4.4 — Tablo — mobilde satırlar karta döner (td[data-label]) ------ */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
table{width:100%;border-collapse:collapse}
/* Satır ritmi: yenitema liste satırı 14px dikey / 17px yatay iç boşlukla
   nefes alır ve ayraç kart kenarlığından açıktır. Eski 10px/12px + koyu
   ayraç kombinasyonu listeleri sıkışık ve çizgili gösteriyordu. */
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--renk-border-yumusak);font-size:13.5px;vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--renk-muted);font-weight:600;white-space:nowrap;
  border-bottom-color:var(--renk-border);padding-top:11px;padding-bottom:11px}
tbody tr:hover td{background:var(--renk-surface-2)}
td.num,th.num{text-align:right;white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:12.5px}
.trunc{max-width:min(340px,60vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tablewrap.sticky{max-height:64vh;overflow-y:auto}
.tablewrap.sticky thead th{position:sticky;top:0;background:var(--renk-surface);z-index:1;box-shadow:0 1px 0 var(--renk-border)}

@media (max-width:719px){
  table.stack{border-collapse:separate;border-spacing:0}
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack tr{
    display:block;border:1px solid var(--renk-border);border-radius:12px;
    padding:6px 12px;margin-bottom:10px;background:var(--renk-surface)
  }
  table.stack td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:7px 0;border-bottom:1px dashed var(--renk-border);text-align:left
  }
  table.stack td:last-child{border-bottom:0}
  table.stack td:before{
    content:attr(data-label);flex:none;font-size:11px;font-weight:600;
    text-transform:uppercase;letter-spacing:.03em;color:var(--renk-muted)
  }
  table.stack td:empty{display:none}
  table.stack td.full{display:block}
  table.stack td.full:before{display:block;margin-bottom:4px}
  table.stack tbody tr:hover td{background:transparent}
  table.stack .trunc{max-width:60vw}
}

.pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.pagination a,.pagination span,.pagination button{
  min-width:36px;height:36px;padding:0 8px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
  color:var(--renk-text-2);border:1px solid transparent;background:none;cursor:pointer;font-family:inherit
}
.pagination a:hover{background:var(--renk-surface-2);text-decoration:none;color:var(--renk-text)}
.pagination .active{border-color:var(--renk-primary);color:var(--renk-primary)}
.pagination .disabled{opacity:.4;pointer-events:none}

/* 4.5 — Rozet (badge) — mevcut varyantlar (b-*) korunur -------------- */
/* yenitema rozeti 10.5-11.5px / 500-600, hap biçimli; 700 ağırlık rozetleri
   metinden daha baskın gösteriyordu. */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}
.b-green{background:#dcfce7;color:#15803d}.b-red{background:#fee2e2;color:#b91c1c}
.b-amber{background:#fef3c7;color:#b45309}.b-gray{background:var(--renk-surface-2);color:var(--renk-text-2)}
/* b-blue token'a (--renk-primary) bağlı: tema mavi->başka bir renge
   kayarsa rozet otomatik izler, ayrı koyu-tema geçersiz kılmasına
   gerek kalmaz. b-violet KASITLI olarak ayrı, sabit mor kalır — marka
   vurgusundan (artık mavi) bağımsız, kendi başına bir rozet kategorisi
   (bkz. BILESENLER.md). */
.b-blue{background:rgb(var(--renk-primary-rgb) / .14);color:var(--renk-primary-d)}
.b-violet{background:#ede9fe;color:#6d28d9}
[data-tema="koyu"] .b-green{background:rgba(34,197,94,.16);color:#4ade80}
[data-tema="koyu"] .b-red{background:rgba(251,113,133,.16);color:#fda4af}
[data-tema="koyu"] .b-amber{background:rgba(245,158,11,.16);color:#fbbf24}
[data-tema="koyu"] .b-violet{background:rgba(167,139,250,.18);color:#c4b5fd}

/* 4.6 — Uyarı (alert / flash) — .alert-* yeni isimler .flash ile eşlenir */
.flash,.alert{padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-weight:500;font-size:14px}
.flash.ok,.alert-success{background:#dcfce7;color:#15803d}
.flash.err,.alert-danger{background:#fee2e2;color:#b91c1c}
.flash.info,.alert-info{background:#dbeafe;color:#1d4ed8}
.flash.warn,.alert-warning{background:#fef3c7;color:#92400e}
[data-tema="koyu"] .flash.ok,[data-tema="koyu"] .alert-success{background:rgba(34,197,94,.14);color:#4ade80}
[data-tema="koyu"] .flash.err,[data-tema="koyu"] .alert-danger{background:rgba(251,113,133,.14);color:#fda4af}
[data-tema="koyu"] .flash.info,[data-tema="koyu"] .alert-info{background:rgba(56,189,248,.14);color:#7dd3fc}
[data-tema="koyu"] .flash.warn,[data-tema="koyu"] .alert-warning{background:rgba(245,158,11,.14);color:#fbbf24}
.flash .btn,.alert .btn{margin-top:10px}

/* 4.7 — İpucu rozeti ("?") — sp_ui_ipucu(), dp/admin/_ui.php ---------
   Saf CSS: JS'siz tooltip, hover/focus/dokunmatik ile açılır. Davranış
   ve seçiciler AYNEN korunur, yalnızca renk token'ları güncellendi. */
.ipucu{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;min-height:0;border-radius:50%;
  background:var(--renk-surface-2);color:var(--renk-text-2);font-size:11px;font-weight:800;line-height:1;
  cursor:help;vertical-align:middle;margin-left:5px;flex:none
}
.ipucu .ipucu-isaret{pointer-events:none}
.ipucu:hover,.ipucu:focus,.ipucu:focus-visible{background:var(--renk-primary);color:#fff;outline:0}
/* Kapaliyken `display:none` — `visibility:hidden` DEGIL. Absolute konumlu
   torunlar CSS spesine gore en yakin kaydirilabilir atanin scrollWidth'ine
   dahil edilir; gizli balon sabit genislikte oldugu icin dar ekranlarda
   (or. 720px, "WhatsApp / Meta" sekmesi) sayfaya gorunmez bir yatay kaydirma
   ekliyordu. `display:none` balonu yerlesimden tamamen cikarir. Acilis/kapanis
   yumusatmasi `transition-behavior:allow-discrete` + `@starting-style` ile
   korunur; desteklemeyen tarayicida balon animasyonsuz acilir (islev ayni). */
.ipucu-metin{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  width:max-content;max-width:min(280px,78vw);background:var(--renk-rail-bg);color:#e7e9f2;
  font-size:12.5px;font-weight:400;line-height:1.45;padding:8px 10px;border-radius:8px;
  box-shadow:var(--golge-lg);text-align:left;
  display:none;opacity:0;pointer-events:none;
  transition:opacity .12s ease,transform .12s ease,display .12s ease;
  transition-behavior:allow-discrete;z-index:80
}
.ipucu-metin:after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--renk-rail-bg)
}
.ipucu:hover .ipucu-metin,.ipucu:focus .ipucu-metin,.ipucu:focus-visible .ipucu-metin{
  display:block;opacity:1;transform:translateX(-50%) translateY(0)
}
@starting-style{
  .ipucu:hover .ipucu-metin,.ipucu:focus .ipucu-metin,.ipucu:focus-visible .ipucu-metin{
    opacity:0;transform:translateX(-50%) translateY(4px)
  }
}
/* Dar ekran: balon ROZETE degil EKRANA yaslanir (YAZ-168).
   Onceki hal balonu rozete sagdan yasliyordu (`right:-10px`). Konum referansi
   18px'lik rozet oldugu icin, rozet ekranin solunda duruyorsa 280px'lik balonun
   sol yarisi viewport disinda kaliyor ve metin okunamiyordu (olcum: site-edit
   "Izinli alan adlari" ipucusu, 400px genislik -> left = -106px). Sol tasma
   LTR'de scrollWidth'i artirmadigi icin YAZ-167'nin ölcümüne hic yansimamisti.
   Saf CSS'te "balon tasti mi?" sorusu sorulamadigi ve `left:50%` ile
   `right:-10px` arasinda kosullu secim yapilamadigi icin, dar ekranda balon
   viewport'a sabitlenip (`position:fixed`) alt-ortada gosterilir; genislik
   `calc(100% - 16px)` ile viewport'a bagli oldugundan balon HER rozet konumunda
   tamamen ekran icindedir. Ok (`:after`) artik bir seyi isaret etmedigi icin
   gizlenir. Kapaliyken `display:none` (YAZ-167) aynen korunur — balon yerlesime
   hic girmez, dolayisiyla yatay kaydirma da geri gelmez. Yatay eksende `left:50%
   + translateX(-50%)` taban kuraldan gelir; bu yuzden transform ve
   @starting-style bloklarini tekrarlamaya gerek yoktur. */
@media (max-width:719px){
  .ipucu-metin{
    position:fixed;top:auto;bottom:12px;
    max-width:min(280px,calc(100% - 16px))
  }
  .ipucu-metin:after{display:none}
}
label.fl .ipucu{margin-left:6px}
h3 .ipucu,h2 .ipucu{font-size:11px;vertical-align:2px}

/* Katlanır açıklama/detay kutusu */
details.card{padding:0}
details.card summary{
  list-style:none;cursor:pointer;padding:16px;font-weight:600;
  font-size:var(--font-md);display:flex;align-items:center;gap:8px
}
details.card summary::-webkit-details-marker{display:none}
details.card summary:before{content:"▸";color:var(--renk-muted);transition:transform .15s;flex:none}
details.card[open] summary:before{transform:rotate(90deg)}
details.card>*:not(summary){padding-left:16px;padding-right:16px}
details.card>*:last-child{margin-bottom:16px}

/* 4.8 — Sekme (tabs) — mobilde yatay kaydırılır ---------------------- */
.tabs{
  display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--renk-border);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none
}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{
  background:none;border:0;padding:10px 12px 12px;font-size:13px;font-weight:500;cursor:pointer;
  color:var(--renk-muted);border-bottom:2px solid transparent;margin-bottom:-1px;
  font-family:inherit;white-space:nowrap;flex:none;transition:color var(--gecis-hizli),border-color var(--gecis-hizli)
}
/* Sekme metni yenitema'da 13px/500, etkin olan 600 — Ayarlar.dc.html sekme
   şeridi (t.weight/t.color). */
.tabs button.active,.tabs a.active{color:var(--renk-primary);border-bottom-color:var(--renk-primary);font-weight:600}
.tabs button:hover,.tabs a:hover{color:var(--renk-text);text-decoration:none}
.tabpane{display:none}
.tabpane.active{display:block}

/* 4.8b — Segmented kontrol — kapsayıcı içinde beyaz+gölgeli aktif buton
   (kb.php YAZ-138/4 durum filtresi; genel amaçlı, başka sayfalar da kullanabilir). */
/* yenitema kanal/filtre kutusu: kapsayıcı radius 10, öge radius 8, 500 ağırlık. */
.segment{display:inline-flex;gap:4px;padding:3px;border-radius:var(--radius-sm);background:var(--renk-surface-2);flex:none}
.segment-item{
  border:0;cursor:pointer;background:transparent;color:var(--renk-text-2);border-radius:8px;
  padding:6px 14px;font-size:12.5px;font-weight:500;white-space:nowrap;font-family:inherit;
  transition:background var(--gecis-hizli),color var(--gecis-hizli),box-shadow var(--gecis-hizli)
}
.segment-item:hover{color:var(--renk-text);text-decoration:none}
.segment-item.active{background:var(--renk-surface);color:var(--renk-text);box-shadow:var(--golge-sm)}

/* 4.9 — Avatar -------------------------------------------------------- */
.avatar{
  width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--renk-primary),var(--renk-violet));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-sm{width:28px;height:28px;font-size:11.5px}
.avatar-lg{width:48px;height:48px;font-size:17px}

/* 4.10 — İskelet (skeleton) — yüklenme yer tutucusu ------------------- */
.skeleton{
  position:relative;overflow:hidden;background:var(--renk-surface-2);
  border-radius:var(--radius-sm);color:transparent!important;pointer-events:none
}
.skeleton:after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:sp-parilti 1.3s infinite
}
[data-tema="koyu"] .skeleton:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes sp-parilti{100%{transform:translateX(100%)}}
.skeleton-text{height:14px;margin:6px 0;border-radius:5px}
.skeleton-text.w-60{width:60%}.skeleton-text.w-40{width:40%}.skeleton-text.w-80{width:80%}

/* 4.11 — Açılır menü (dropdown) — profil menüsü ve genel kullanım ---- */
.dropdown{position:relative}
.dropdown-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:200px;
  background:var(--renk-surface);border:1px solid var(--renk-border);border-radius:var(--radius-md);
  box-shadow:var(--golge-lg);padding:6px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--gecis-hizli),transform var(--gecis-hizli),visibility var(--gecis-hizli)
}
.dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a,.dropdown-menu button{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--renk-text);font-size:13.5px;font-weight:600;text-align:left;
  background:none;border:0;cursor:pointer;font-family:inherit
}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--renk-surface-2);text-decoration:none}
.dropdown-menu a.danger,.dropdown-menu button.danger{color:var(--renk-danger)}
.dropdown-sep{height:1px;background:var(--renk-border);margin:6px 2px}
.dropdown-head{padding:8px 11px 6px;font-size:12px;color:var(--renk-muted)}

.profile-btn{
  display:flex;align-items:center;gap:9px;background:var(--renk-surface);
  border:1px solid var(--renk-border);cursor:pointer;
  padding:4px 10px 4px 4px;border-radius:999px;font-family:inherit;color:var(--renk-text)
}
.profile-btn:hover{background:var(--renk-surface-2)}
.profile-btn .nm{font-size:13px;font-weight:500;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Üst çubuk profil avatarı yenitema'da DÜZ vurgu mavisi (29px daire);
   .avatar'ın genel mavi→mor gradyanı burada kabuğun sakin diline aykırı
   düşüyordu. Gradyan diğer kullanımlarda (liste avatarları) korunur.
   Üzerine BEYAZ harf bindiği için --renk-primary değil --renk-primary-buton
   kullanılır (koyu temada --renk-primary açık mavidir, AA tutmaz). */
.profile-btn .avatar{background:var(--renk-primary-buton);width:29px;height:29px;font-size:12.5px;font-weight:600}
.profile-btn .ico-svg.chevron{color:var(--renk-muted);transition:transform var(--gecis-hizli)}
.profile-btn[aria-expanded="true"] .chevron{transform:rotate(180deg)}

/* 4.12 — Modal --------------------------------------------------------
   Tek eleman: arkaplan + iletişim kutusu aynı .modal içinde; JS yalnızca
   .open sınıfını ekler/çıkarır (bkz. assets/tema.js). */
.modal{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;visibility:hidden;transition:opacity var(--gecis-normal),visibility var(--gecis-normal)
}
.modal.open{opacity:1;visibility:visible}
.modal:before{content:"";position:absolute;inset:0;background:rgba(8,10,18,.55);backdrop-filter:blur(4px)}
.modal-dialog{
  position:relative;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--renk-surface);border-radius:var(--radius-lg);box-shadow:var(--golge-lg);
  transform:translateY(16px) scale(.98);opacity:0;
  transition:transform var(--gecis-normal),opacity var(--gecis-normal)
}
.modal.open .modal-dialog{transform:none;opacity:1}
.modal-dialog.lg{max-width:720px}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;border-bottom:1px solid var(--renk-border)}
.modal-title{font-size:16px;font-weight:600;margin:0}
.modal-body{padding:20px;overflow:auto}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--renk-border);flex-wrap:wrap}
.modal-close{background:none;border:0;cursor:pointer;color:var(--renk-muted);width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--renk-surface-2);color:var(--renk-text)}
body.modal-open{overflow:hidden}

/* 4.13 — Boş durum (empty state) — eski .empty .big + yeni yapı ------ */
.empty{text-align:center;padding:30px 14px;color:var(--renk-muted)}
.empty .big{font-size:34px;margin-bottom:8px}
.empty-icon{margin:0 auto 12px;color:var(--renk-muted);display:flex;align-items:center;justify-content:center}
.empty-title{font-weight:600;font-size:15px;color:var(--renk-text);margin-bottom:4px}
.empty-text{color:var(--renk-muted);font-size:13.5px;max-width:360px;margin:0 auto}
.empty-action{margin-top:14px}

/* ---------------------------------------------------------------- *
 *  5) SAYFAYA ÖZGÜ YARDIMCILAR — mevcut sayfalarca kullanılan,       *
 *     davranışı/seçicisi DEĞİŞMEYEN bileşenler (yalnızca token'landı)*
 * ---------------------------------------------------------------- */
.muted{color:var(--renk-muted)}.mt{margin-top:14px}.mb{margin-bottom:14px}.mt8{margin-top:8px}
/* F1 sonrası sayfalarda satır-içi stil yerine geçen küçük yardımcılar
   (site-edit.php YAZ-138/2 taşımasında ortaya çıktı). */
.mt6{margin-top:6px}.mb0{margin-bottom:0!important}.ml8{margin-left:8px}
.text-xs{font-size:var(--font-xs)}.self-center{align-self:center}
.flex-1{flex:1}.flex-14{flex:1.4}.gap-8{gap:8px}
.hstack{display:flex;gap:10px;align-items:center}
.break-all{word-break:break-all}
.is-hidden{display:none!important}
.text-danger{color:var(--renk-danger)}.text-success{color:var(--renk-success)}
/* inbox.php (YAZ-138/3) taşımasında ortaya çıktı: min-width sıfırlama
   (flex/grid taşmasını önler) ve dar bir metin girdisi için üst sınır. */
.min-w0{min-width:0}
.mw-140{max-width:140px}
/* not: küçük ipucu/alt metin paragrafı (etiket altındaki tek satır açıklama) */
.note{margin:8px 0 0;font-size:var(--font-xs)}
/* not: numaralı kurulum listeleri (Telegram/Meta sekmeleri) */
.list-note{margin:0 0 12px;padding-left:18px;font-size:13px;line-height:1.75}
.m0{margin:0!important}
hr.divider{border:0;border-top:1px solid var(--renk-border);margin:var(--bosluk-4) 0}
.row-expired{opacity:.5}
.tag-row{border:1px solid var(--renk-border);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:10px}
.tag-hint{color:var(--renk-success);font-size:var(--font-xs)}
.card-nested{background:var(--renk-surface-2)}
.icon-fill{width:100%;height:100%;object-fit:contain}
/* dar sayı/tablo genişlikleri — satır-içi style="width:…" yerine */
.w-44{width:44px}.w-78{width:78px}.w-86{width:86px}.w-90{width:90px}
.w-26p{width:26%}.w-34p{width:34%}
/* install.php + analytics.php (YAZ-138/6) taşımasında ortaya çıktı: bu
   sayfaların çok sayıda tek-kerelik margin/font-size değeri vardı, ölçek
   dışı (--bosluk-*'a uymayan) ama başka satır-içi stille tekrar ediyordu. */
.mt0{margin-top:0}.mt4{margin-top:4px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mb5{margin-bottom:5px}.mb6{margin-bottom:6px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb18{margin-bottom:18px}
.pt12{padding-top:12px}.pl18{padding-left:18px}
.fs12{font-size:12px}.fs14{font-size:14px}.fs20{font-size:20px}.fs24{font-size:24px}
.fw-normal{font-weight:400}
.text-center{text-align:center}
.d-block{display:block}
.cursor-pointer{cursor:pointer}
.border-t{border-top:1px solid var(--renk-border)}
.mw-180{max-width:180px}.mw-260{max-width:260px}
.w-52{width:52px}
.split{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toolbar,.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar>*,.filter-bar>*{flex:1 1 auto;min-width:0}
.toolbar form,.filter-bar form{display:flex;gap:8px;align-items:center}
.toolbar select,.toolbar input[type=date],.filter-bar select,.filter-bar input[type=date]{min-width:0}
/* keybox/code-box, pill/tag, chips/chip-list: sağdaki (tireli) ad F1 sonrası
   sayfalarda kullanılacak yeni bileşen adı — bkz. BILESENLER.md. */
.keybox,.code-box{
  background:var(--renk-rail-bg);color:#e7e9f2;padding:13px 14px;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:12px;line-height:1.6;
  overflow-x:auto;white-space:pre-wrap;word-break:break-all;-webkit-user-select:all;user-select:all
}
/* WhatsApp isletme profili — fotograf onizlemesi + dosya secici yan yana
   (site-edit.php Meta sekmesi). Dar ekranda alt alta duser. */
.wa-profil-foto{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.wa-profil-foto img,.wa-profil-fotobos{
  width:72px;height:72px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  background:var(--renk-surface-2);border:1px solid var(--renk-border)
}
/* Fotograf yokken ya da CDN baglantisi dustugunde: kirik gorsel yerine
   ayni olcude bir yer tutucu — duzen ziplamaz. */
.wa-profil-fotobos{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:6px;font-size:10.5px;line-height:1.3;color:var(--renk-text-2)
}
.pill,.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:rgb(var(--renk-primary-rgb) / .14);color:var(--renk-primary)}
[data-tema="koyu"] .pill,[data-tema="koyu"] .tag{background:rgb(var(--renk-primary-rgb) / .18)}
.chips,.chip-list{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:99px;background:var(--renk-surface-2);color:var(--renk-text-2)}
.chip.on{background:#dcfce7;color:#15803d}
[data-tema="koyu"] .chip.on{background:rgba(34,197,94,.16);color:#4ade80}
/* .chip'i tıklanabilir butona çeviren sıfırlama — kb.php YAZ-138/4 durum
   göstergesi (nokta + metin), aynı zamanda gerçek aç/kapa kontrolü. */
.chip-btn{display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;font:inherit}
.chip-btn .status-dot{background:currentColor}
.hide-sm{display:none}

/* Karakter sayacı */
.charbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:5px 2px 0;font-size:12px;color:var(--renk-muted)}
.charbar b{font-weight:600;color:var(--renk-text)}
.charbar.warn{color:var(--renk-warning)}
.charbar.warn b{color:var(--renk-warning)}
.charbar.full{color:var(--renk-danger)}
.charbar.full b{color:var(--renk-danger)}

/* Giriş ekranları — yalnızca install.php'nin bağımsız kabuğu için */
.center{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:18px}
.authcard{width:100%;max-width:420px}
.authcard.wide{max-width:640px}
.logo{text-align:center;font-size:20px;font-weight:600;margin-bottom:4px}
.logo .c{color:var(--renk-primary)}
/* Not: giriş ve kayıt ekranları da bu dosyayı (admin.css) yükler; sınıf
   çarpışmasını önlemek için ek olarak assets/auth.css üzerine kurulu. */

/* Grafikler — çizim mantığı dp/admin/_chart.php içinde, yalnızca
   token'lara bağlı renkler burada güncellendi. */
.chart{width:100%;overflow-x:auto}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--renk-muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.bar-track{height:9px;background:var(--renk-surface-2);border-radius:6px;overflow:hidden;margin-top:5px}
.bar-fill{height:100%;border-radius:6px}

/* Canlı Destek gelen kutusu (inbox.php, YAZ-138/3) -------------------
   Sayfanın kendi <style> bloğunda yaşayan, ALIAS token'lara (var(--line)
   vb.) ve ham hex renklere bağımlı kurallar buraya taşındı; hepsi
   --renk-* token'larına çevrildi. Üç kolonlu düzen (liste · sohbet ·
   ziyaretçi bilgisi) mobilde tek ekran, ≥992px'te iki, ≥1200px'te üç
   kolona genişler (bkz. medya sorguları altta). "thread" eski bileşen
   sınıfı listesindeydi (bkz. dp/tools/tema-denetim.php $eskiSinif) —
   sayfanın TEK kullanıcısı olduğu için alias BIRAKILMADAN .chat-thread
   olarak yeniden adlandırıldı. */
/* ÜÇ KOLON — BİTİŞİK (YAZ-161/1)
   Tasarımda kolonlar arasında BOŞLUK YOK; ayraç 1px `border-right` /
   `border-left`, kolonlar `.card` kutusu değil ekranın kendisi (Canlı
   Destek.dc.html: `flex:1; display:flex; min-height:0; gap:0`). Eski hâli
   14px boşluklu bir grid'di ve üç kolona ancak ≥1200px'te çıkıyordu.
   Mobilde (<992px) tek kolon: liste YA DA sohbet görünür — hangisinin
   görüneceğini inbox.php'deki `showPane()` `style.display` ile seçer,
   bu yüzden kolonlar `display:none` ile gizlenebilir kalmalı. */
.inbox{
  display:flex;flex-direction:column;min-width:0;background:var(--renk-surface);
  /* Kolonlar artık ayrı `.card` kutuları değil; çerçeve BİR kez, üçünü
     saran kabın üzerinde. Uygulama kabuğunda (≥992px) bu çerçeve de
     kalkar ve yerleşim ekranın kenarlarına yaslanır. */
  border:1px solid var(--renk-border);border-radius:var(--radius-md);overflow:hidden
}
.inbox>.pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.pane-list{overflow:hidden;background:var(--renk-surface)}
/* Liste kolonunun sabit parçaları (başlık + toplu işlem çubuğu) kolon
   kısaldığında SIKIŞMAZ; kayan tek parça `.convlist`tir. */
.pane-list>.list-head,.pane-list>.bulkbar{flex:none}
/* Sohbet kolonu tasarımda beyazdan bir tık gri (oklch 0.978) — panelin
   sayfa zemini (--renk-bg, oklch 0.975) bu tonun karşılığıdır. */
.pane-thread{background:var(--renk-bg);overflow:hidden}
.pane-thread>.empty{margin:auto}
.convlist{max-height:none;overflow:auto;-webkit-overflow-scrolling:touch}
/* `color:inherit` ZORUNLU (YAZ-191/1): satır bir <button>, ve buton metin
   rengini kabuktan MİRAS ALMAZ — tarayıcı kendi varsayılanını (koyu gri
   ButtonText) kullanır. Karanlık temada ziyaretçi adı (.nm) bu yüzden
   koyu zemin üzerinde koyu çıkıp okunmuyordu; alt satırlar (.tm/.last)
   kendi rengini açıkça verdiği için sorun yalnız adda görünüyordu. */
.convitem{
  display:block;width:100%;text-align:left;background:none;border:0;color:var(--renk-text);
  border-bottom:1px solid var(--renk-border-yumusak);padding:13px 14px;cursor:pointer;font-family:inherit
}
.convitem:hover{background:var(--renk-surface-2)}
.convitem.active{background:rgb(var(--renk-primary-rgb) / .1)}
.convitem .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.convitem .nm{font-weight:600;font-size:13.5px}
.convitem .tm{font-size:11px;color:var(--renk-muted);white-space:nowrap}
.convitem .last{font-size:13px;color:var(--renk-muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Liste başlığı: kanal sekmeleri (chan-chip) + arama/filtre araçları
   liste kolonunun İÇİNDE — gerçek sohbet uygulamalarında (WhatsApp
   Business, Front vb.) bu araçlar sayfanın tamamına değil, yalnızca
   sohbet listesine aittir (YAZ-115). */
.list-head{padding:12px 14px;border-bottom:1px solid var(--renk-border);display:grid;gap:10px}
.list-head .toolbar{margin-bottom:0}
.list-head .search-box{display:flex}
.chan-switch{display:flex;gap:6px;flex-wrap:wrap}
.chan-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--renk-border);background:var(--renk-surface-2);color:var(--renk-text-2);
  font-size:12.5px;font-weight:500;white-space:nowrap;
  transition:background var(--gecis-hizli),border-color var(--gecis-hizli),color var(--gecis-hizli)
}
.chan-chip:hover{background:rgb(var(--renk-primary-rgb) / .08);text-decoration:none}
.chan-chip.active{
  background:rgb(var(--renk-primary-rgb) / .14);border-color:rgb(var(--renk-primary-rgb) / .4);
  color:var(--renk-primary)
}
.chan-chip .ico-svg{width:16px;height:16px}
.chan-chip .chan-lbl{max-width:110px;overflow:hidden;text-overflow:ellipsis}

/* Toplu seçim: liste satırını kutucuk + tıklanabilir gövde olarak böler
   (kutucuk butonun İÇİNE konulamaz — buton içinde etkileşimli öge
   olmaz), bu yüzden satır bir sarmalayıcı (.convrow). */
.pick{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}
.convrow{
  display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--renk-border-yumusak);
  transition:background var(--gecis-hizli)
}
.convrow:last-child{border-bottom:0}
.convrow>.pick{padding:0 4px 0 12px}
.convrow>.convitem{flex:1;min-width:0;border-bottom:0}
.convrow.sel{background:var(--renk-surface-2)}
.bulkbar{
  display:none;gap:8px;align-items:center;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--renk-border);background:var(--renk-surface-2)
}
.bulkbar.on{display:flex}
.bulkbar .sp{flex:1}

/* Liste satırında küçük avatar */
.ci-row{display:flex;gap:10px;align-items:flex-start}
.ci-text{min-width:0;flex:1}
.lsavatar{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;color:#fff;background:var(--renk-secondary);margin-top:2px
}

/* Ziyaretçi yazıyor: listede küçük nokta, sohbette taslak balonu */
.tdot{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--renk-success);
  margin-left:6px;animation:sp-blink 1.1s infinite
}
@keyframes sp-blink{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.tdot{animation:none}}
.draftrow{margin:2px 0 6px}
.draftrow .db{
  display:inline-block;max-width:80%;background:var(--renk-surface-2);
  border:1px dashed var(--renk-border);border-radius:14px;padding:8px 11px;
  font-size:13px;color:var(--renk-muted);font-style:italic;word-break:break-word
}

/* YAZ-95: üç kolonlu düzen (liste · sohbet · ziyaretçi bilgisi) */
.th-head{gap:10px}
.th-id{display:flex;align-items:center;gap:10px;min-width:0}
.th-idtext{min-width:0}
.th-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.backlist{display:inline-flex}
.backlist .ico-svg{transform:rotate(180deg)}

/* Sohbet kolonu — mobilde de kolon ritmi aynı: başlık ve yazma alanı
   kendi kenarlığıyla SABİT, ortada yalnız mesaj listesi kayar. Kolonun
   kendi zemini (`.pane-thread`) olduğu için mesaj listesi ŞEFFAFTIR;
   eskiden buradaki `surface-2` + radius, kart içinde ikinci bir kutu
   izlenimi veriyordu. Boşluk ölçüsü ≥992px'te büyür (bkz. §6). */
.chat-thread{display:none;flex-direction:column;min-height:60vh}
.chat-thread .th-head{
  margin:0;padding:12px 14px;flex:none;
  border-bottom:1px solid var(--renk-border);background:var(--renk-surface)
}
.chat-thread .msgs{
  flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:14px;min-height:44vh;max-height:56vh
}
.chat-thread .draftrow,.chat-thread .izquick{margin-left:14px;margin-right:14px}
.chat-thread .composer{
  margin:0;padding:12px 14px;flex:none;
  border-top:1px solid var(--renk-border);background:var(--renk-surface)
}
.chat-thread #thStatus{margin:0 14px 10px}

/* Mesaj balonu: avatar + yumuşak giriş animasyonu. DOM sırası JS'te
   gönderene göre kurulur (ziyaretçi: avatar-balon, temsilci:
   balon-avatar) — row-reverse yerine bu yaklaşım, .mrow.staff{
   justify-content:flex-end} kuralıyla çakışmaz. */
.mrow{display:flex;align-items:flex-end;gap:8px;margin-bottom:10px;animation:sp-msg-in .18s ease-out}
.mrow.staff{justify-content:flex-end}
.mavatar{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;color:#fff;background:var(--renk-muted)
}
.mrow:not(.staff) .mavatar{background:var(--renk-secondary)}
.mrow.staff .mavatar{background:var(--renk-primary)}
@keyframes sp-msg-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mrow{animation:none}}
.mbubble{
  position:relative;max-width:82%;padding:10px 12px;border-radius:14px;background:var(--renk-surface);
  border:1px solid var(--renk-border);font-size:14px;white-space:pre-wrap;word-break:break-word
}
.mrow.staff .mbubble{background:rgb(var(--renk-primary-rgb) / .12);border-color:rgb(var(--renk-primary-rgb) / .3)}
.mbubble .mt-meta{font-size:11px;color:var(--renk-muted);margin-top:5px}
.mtick{margin-left:4px;opacity:.7}
.daysep{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--renk-muted);font-size:12px}
.daysep:before,.daysep:after{content:"";flex:1;height:1px;background:var(--renk-border)}

/* Medya balonları: görsel/video küçük önizleme, ses tam genişlik */
.mmedia{
  display:block;max-width:260px;max-height:260px;width:auto;border-radius:10px;
  margin-bottom:6px;cursor:pointer;background:var(--renk-surface-2)
}
.maudio{display:block;width:240px;max-width:100%;margin-bottom:6px}
.mfile{
  display:inline-block;margin-bottom:6px;font-size:13px;text-decoration:none;
  padding:6px 10px;border:1px solid var(--renk-border);border-radius:8px;background:var(--renk-surface-2)
}
.mfile:hover{border-color:var(--renk-primary)}
.upbar{height:3px;background:var(--renk-border);border-radius:2px;overflow:hidden;margin-top:6px;display:none}
.upbar.on{display:block}
.upbar i{display:block;height:100%;width:0;background:var(--renk-primary);transition:width .2s}

/* Emoji tepkiler */
.mreact{
  display:inline-block;margin-top:6px;padding:2px 7px;border-radius:11px;
  background:var(--renk-surface);border:1px solid var(--renk-border);font-size:13px;line-height:1.4
}
.mreactbtn{
  margin-left:8px;border:0;background:none;cursor:pointer;color:var(--renk-muted);
  font-size:14px;padding:0 2px;opacity:0;transition:opacity .15s;min-width:var(--tap);min-height:22px
}
.mrow:hover .mreactbtn{opacity:1}
.mreactbtn:hover{color:var(--renk-primary)}
.reactpop{
  position:absolute;z-index:30;display:flex;gap:2px;padding:4px 6px;margin-top:4px;
  background:var(--renk-surface);border:1px solid var(--renk-border);border-radius:22px;box-shadow:var(--golge-lg)
}
.reactpop button{
  border:0;background:none;cursor:pointer;font-size:18px;line-height:1;
  padding:5px;border-radius:50%;min-width:34px;min-height:34px
}
.reactpop button:hover{background:var(--renk-surface-2);transform:scale(1.15)}
/* Dokunmatikte hover yok: tepki düğmesi her zaman görünür ve dokunma
   hedefi büyütülür. */
@media (hover:none){.mreactbtn{opacity:.6;font-size:16px}}

.composer{position:relative;display:flex;gap:8px;margin-top:10px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;min-height:var(--tap);height:46px;max-height:120px}
.composer .btn{flex:none}
/* Araç düğmeleri (atac · hazır yanıt · emoji) tek sarmalayıcıda: geniş
   ekranda satırın solunda duran sıradan bir flex öğesi. */
.ctools{display:flex;align-items:flex-end;gap:8px;flex:none}

/* Dar ekran (YAZ-191/3): üç araç düğmesi + yazma alanı + Gönder tek satıra
   sığmayınca textarea ~90px'e iniyor ve tek kelime bile görünmüyordu.
   Araçlar ÜST satıra alınır (order:-1 + tam genişlik → flex-wrap onları
   kendi satırına atar), altta yalnız textarea + Gönder kalır; böylece
   yazma alanı satırın neredeyse tamamını kullanır (375px'te ~90px yerine
   ~273px). Yükseklik de bir tık büyür: mobilde 46px tek satır dardı.

   `flex:1 1 0` ÖNEMLİ: `auto` bazında textarea içerik genişliğinin altına
   inmeyi reddedip Gönder'i de kendi satırına düşürüyor — composer üç
   satıra çıkıp mesaj alanından yer yiyordu. Sıfır bazla ikisi aynı
   satırda kalır. */
@media (max-width:719.98px){
  .composer{flex-wrap:wrap}
  .ctools{order:-1;flex:1 0 100%}
  .composer textarea{flex:1 1 0;height:56px}
}
/* Composer emoji seçici */
.emojipop{
  position:absolute;left:0;bottom:100%;z-index:30;display:none;flex-wrap:wrap;gap:2px;max-width:220px;
  padding:6px;margin-bottom:6px;background:var(--renk-surface);border:1px solid var(--renk-border);border-radius:12px;
  box-shadow:var(--golge-lg)
}
.emojipop.on{display:flex}
.emojipop button{
  border:0;background:none;cursor:pointer;font-size:18px;line-height:1;padding:5px;
  border-radius:8px;min-width:32px;min-height:32px
}
.emojipop button:hover{background:var(--renk-surface-2)}

/* YZ Devret / Devral — sohbet başlığındaki TEK düğme (YAZ-191/2). Eski
   `.aibar` bilgi bölmesi (anahtar + iki satır açıklama) kaldırıldı; durum
   artık düğmenin KENDİ görünümünde: açıkken yeşil dolgu, kapalıyken
   `.btn-outline`ın nötr görünümü — "soluk" olsun diye metin bir kademe
   silik (text-2).

   Yeşil TOKEN'dan değil sabitten geliyor: --renk-success aydınlıkta
   #059669 ve üstüne beyaz metin 3.7:1 kalır (AA altı). Aydınlıkta bir ton
   koyu yeşil + beyaz, karanlıkta parlak yeşil + koyu metin ile iki temada
   da 4.5:1 üstü tutulur (aynı gerekçeyle --renk-primary-buton ayrı
   tanımlı, bkz. karanlık tema bloğu).

   `:hover` de yazılıyor: `.btn-outline:hover` (0,2,0) yeşil dolguyu
   silerdi; `.aibtn.on:hover` (0,3,0) onu yener. */
.aibtn:not(.on){color:var(--renk-text-2)}
.aibtn.on,.aibtn.on:hover{background:#047857;border-color:#047857;color:#fff}
[data-tema="koyu"] .aibtn.on,[data-tema="koyu"] .aibtn.on:hover{
  background:#22c55e;border-color:#22c55e;color:#08221a
}

/* Önceden var olan hata: .btnbar sınıfı display:flex atadığı için
   tarayıcının [hidden] varsayılan kuralı (yalnızca UA katmanında) yenilir
   ve JS'in .hidden=true atadığı kutular görünür kalırdı (örneğin web
   sohbetinde "Profil/Engelle" butonları, ya da ziyaretçi bilgi paneli).
   ID seçici ile ezilir — JS tarafı değişmedi, yalnızca CSS özgünlüğü
   düzeltildi. */
#webActions[hidden], #extActions[hidden], #infoBody[hidden]{display:none}
/* Aynı tuzak TEK düğmelerde de var — buton sınıflarının hepsi
   display:inline-flex atıyor (bkz. §4.1), yani `el.hidden = true` hiçbirini
   gizlemiyordu. Tarayıcıda ölçüldü: gizlenmiş #aiBtn'in computed display'i
   `flex`. Gelen kutusunda JS ile gizlenen üç düğme: YZ devret (bot
   desteklemeyen kanalda), atac (yalnız Meta kanallarında) ve profil
   (WhatsApp'ta yok). */
#aiBtn[hidden], #attachBtn[hidden], #profBtn[hidden]{display:none}

/* Kişi profili kartı (harici kanal) */
.profcard{
  border:1px solid var(--renk-border);border-radius:12px;padding:12px 14px;
  background:var(--renk-surface-2);margin-bottom:10px
}
.profpic{
  width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--renk-surface);
  border:1px solid var(--renk-border);flex:0 0 auto
}
.proflist{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:10px;font-size:12.5px}
.proflist .k{color:var(--renk-muted)}
.proflist .v{word-break:break-word}

/* YAZ-49: hazır yanıt / etiket / atama / iç not */
.izpanel{border:1px solid var(--renk-border);border-radius:10px;margin-bottom:10px;background:var(--renk-surface-2)}
.izpanel summary{cursor:pointer;padding:8px 12px;font-size:13px;font-weight:600;list-style:none}
.izpanel summary::-webkit-details-marker{display:none}
.izbody{padding:0 12px 12px;display:grid;gap:12px}
.izsec .izlabel{font-size:12px;color:var(--renk-muted);margin-bottom:4px}
.izchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.izchip{
  display:inline-flex;align-items:center;gap:6px;background:var(--renk-surface);border:1px solid var(--renk-border);
  border-radius:12px;padding:2px 8px;font-size:12.5px
}
.izchip button{border:0;background:none;cursor:pointer;color:var(--renk-muted);font-size:13px;padding:0}
.izchip button:hover{color:var(--renk-danger)}
.izrow{display:flex;gap:6px;align-items:center}
.izrow input[type=text]{flex:1;min-width:0}
.izquick{
  position:relative;display:none;flex-direction:column;gap:2px;padding:6px;
  border:1px solid var(--renk-border);border-radius:10px;background:var(--renk-surface);box-shadow:var(--golge-lg);
  max-height:180px;overflow:auto;margin-bottom:6px
}
.izquick.on{display:flex}
.izquick .izqi{padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}
.izquick .izqi:hover, .izquick .izqi.hi{background:var(--renk-surface-2)}
.izquick .izqi b{margin-right:6px}
.izquick .izqi .muted{font-size:12px}
.izmodal{
  position:fixed;inset:0;background:rgba(15,23,42,.4);display:none;
  align-items:center;justify-content:center;z-index:60;padding:16px
}
.izmodal.on{display:flex}
.izmodalbox{
  background:var(--renk-surface);border-radius:12px;padding:16px;max-width:420px;width:100%;
  max-height:80vh;overflow:auto;display:grid;gap:10px
}
.izhlist{display:grid;gap:6px}
.izhitem{
  display:flex;align-items:center;gap:8px;border:1px solid var(--renk-border);border-radius:8px;
  padding:6px 8px;font-size:13px
}
.izhitem .k{font-weight:600}
.izhitem .b{flex:1;min-width:0;color:var(--renk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.izhitem button{border:0;background:none;cursor:pointer;color:var(--renk-danger)}

/* Ziyaretçi bilgisi — 3. kolon. <1200px kayan panel, ≥1200px sabit kolon
   (bkz. medya sorguları altta). Kayan panel hâlinde kendi yüzeyi ve
   gölgesi olur; kolon hâlinde bitişik oturur, ayracı `border-left`. */
#paneInfo{padding:0;overflow:hidden;display:flex;flex-direction:column;background:var(--renk-surface)}
.info-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--renk-border)
}
.info-head{flex:none}
.info-head b{font-size:14.5px}
.info-close{display:none}
.info-body{display:grid;padding:14px 16px;overflow:auto;gap:14px;align-content:start;flex:1;min-height:0}
.info-sec{display:grid;gap:6px}
.info-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--renk-muted)}
.info-basics{display:grid;font-size:13px}
.info-basics .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--renk-border)}
.info-basics .row:last-child{border-bottom:0}
.info-basics .row .k{color:var(--renk-muted);flex:none}
/* "Kaynak sayfa" satırında TAM adres basılıyor ve sorgu dizesi uzun
   olabiliyor (utm_*, gclid). `word-break:break-word` boşluksuz uzun bir
   parçayı bölmeye YETMEZ; ayrıca flex öğesinin min-width:auto değeri onu
   içeriğinin min genişliğinin altına indirmediği için satır paneli taşırıp
   yatay kaydırma açıyordu. anywhere + min-width:0 ikisini birlikte
   çözer — aynı düzeltme kb.php'de de yapılmıştı (YAZ-180). */
.info-basics .row .v{text-align:right;min-width:0;word-break:break-word;overflow-wrap:anywhere}
.paneinfo-scrim{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:55;display:none}
.paneinfo-scrim.on{display:block}

.timeline{position:relative;padding-left:24px}
.timeline:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--renk-border)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item:before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--renk-primary);box-shadow:0 0 0 3px var(--renk-surface)}
.tl-item.click:before{background:var(--renk-warning)}
.tl-item.submit:before{background:var(--renk-violet)}
.tl-item.chat:before{background:var(--renk-success)}
.tl-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tl-head b{font-size:14.5px}
.tl-sub{color:var(--renk-muted);font-size:12.5px;margin-top:2px;word-break:break-all}
.tl-events{margin-top:8px;border-left:2px solid var(--renk-border);padding-left:12px}
.tl-ev{padding:5px 0;font-size:13px}

.preview,.preview-box{
  position:relative;height:200px;border-radius:var(--radius-md);border:1px dashed var(--renk-border);
  background:repeating-linear-gradient(45deg,var(--renk-surface-2),var(--renk-surface-2) 10px,var(--renk-surface) 10px,var(--renk-surface) 20px);
  overflow:hidden
}
.preview .pbtn,.preview-box .pbtn{position:absolute;display:flex;align-items:center;gap:8px;color:#fff;border:0;
  box-shadow:0 10px 24px rgba(15,23,42,.25);justify-content:center;cursor:default}
.preview .pbtn .lbl,.preview-box .pbtn .lbl{font-weight:800;white-space:nowrap}

/* Bildirimler (YAZ-116) — sp_yorum_log listesi, dp/admin/bildirimler.php */
.bildirim-list{display:flex;flex-direction:column}
.bildirim-item{display:flex;gap:12px;padding:14px 4px;border-bottom:1px solid var(--renk-border-yumusak)}
.bildirim-item:last-child{border-bottom:0}
.bildirim-item.yeni{background:rgb(var(--renk-primary-rgb) / .05)}
.bildirim-ico{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--renk-surface-2)
}
.bildirim-body{flex:1;min-width:0}
.bildirim-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.bildirim-metin{font-size:14px;white-space:pre-wrap;word-break:break-word}
.bildirim-yanit{
  margin-top:6px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--renk-surface-2);
  font-size:13px;white-space:pre-wrap;word-break:break-word
}
.bildirim-actions{margin-top:8px}

/* Hazır Yanıtlar listesi (kb.php, YAZ-138/4) — kart içinde tablosuz
   satır listesi: onay kutusu, soru/meta, yanıt önizlemesi (satır kırpma),
   durum çipi (bkz. .chip-btn) ve "…" menüsü (bkz. .dropdown) beş sütunlu
   grid'de. Üst çubuk (.kb-head) varsayılan etiket ↔ toplu işlem düğmeleri
   arasında JS ile geçer (bkz. kb.php script bloğu).

   SON SÜTUN var(--tap) OLMALI (YAZ-180): içindeki .btn-icon dokunma hedefine
   uyduğu için 44px'tir; sütun bundan darsa (eski 34px / mobilde 30px) her
   satır taşar ve sayfa yatay kayar. Sütunu daraltıp düğmeyi küçültmek çözüm
   değil — dokunma hedefi korunur, sütun düğmeye uyar. */
.kb-head{border-bottom:1px solid var(--renk-border);padding-bottom:12px;margin-bottom:4px}
.kb-row{
  display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1.15fr) 92px var(--tap);
  align-items:start;gap:14px;padding:14px 0;border-bottom:1px solid var(--renk-border-yumusak)
}
.kb-row:last-child{border-bottom:0}
.kb-row.sel{background:rgb(var(--renk-primary-rgb) / .05)}
.kb-main{display:flex;flex-direction:column;gap:5px;min-width:0}
/* Soru metni bottan öğrenilir; içinde boşluksuz uzun parça (bağlantı, uzun
   WhatsApp bildirimi) bulunabilir. anywhere olmadan tek "kelime" sütunu
   zorlar ve satırı ~700px taşırır — dar ekrandaki yatay kaymanın asıl
   sebebi buydu (YAZ-180). */
.kb-q{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.kb-meta{display:flex;flex-wrap:wrap;gap:5px;font-size:11px;color:var(--renk-muted)}
.kb-a{
  margin:0;min-width:0;font-size:12.5px;line-height:1.55;color:var(--renk-text-2);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
@media (max-width:759px){
  .kb-row{grid-template-columns:20px minmax(0,1fr) var(--tap)}
  .kb-a{grid-column:2;margin-top:2px}
  .kb-status{grid-column:2;margin-top:6px}
}

/* ---------------------------------------------------------------- *
 *  6) DUYARLI TASARIM                                                *
 * ---------------------------------------------------------------- */

/* ≤ 480px — küçük telefon: üst çubuk/kart iç boşluğu daha da sıkılaşır */
@media (max-width:480px){
  .topbar{padding:8px 12px;padding-top:calc(8px + var(--safe-t));gap:8px}
  .topbar h1{font-size:16px}
  .content{padding:12px}
  .card{padding:14px}
}

/* ≥ 560px — büyük telefon: iki sütunlu kutular */
@media (min-width:560px){
  :root{--pad:20px}
  .grid.cols-3,.grid.grid-3{grid-template-columns:1fr 1fr}
  .row>div{flex:1 1 46%}
  .btnbar .btn{flex:0 0 auto}
  .hide-sm{display:initial}
}

/* ≥ 720px — tablet */
@media (min-width:720px){
  body{font-size:14.5px}
  .card{padding:20px}
  .grid{gap:16px}
  .grid.cols-2,.grid.grid-2{grid-template-columns:1fr 1fr}
  .grid.cols-3,.grid.grid-3{grid-template-columns:repeat(3,1fr)}
  input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
  input[type=tel],input[type=date],input[type=search],select,textarea,.form-control{font-size:14.5px}
  .toolbar>*,.filter-bar>*{flex:0 0 auto}
  .chat-thread .msgs{max-height:52vh}
}

/* ≥ 992px — masaüstü: yan menü sabit, kayan menü kapalı */
@media (min-width:992px){
  :root{--pad:26px}
  .side{
    /* position:fixed .side'a mobil taban kuralından (inset:0 auto 0 0)
       zaten geliyor — burada sadece daraltılmış genişliğe düşürüp
       genişleme geçişini tanımlıyoruz. Fixed kalması ÖNEMLİ: sb-genis
       DIŞINDAKİ genişlemeler (hover/focus) böylece .main'i itmeden,
       içeriğin üzerine biner. */
    width:var(--side-w-daralt);transform:none;box-shadow:none;
    transition:width var(--gecis-normal),box-shadow var(--gecis-normal)
  }
  .main{margin-left:var(--side-w-daralt);transition:margin-left var(--gecis-normal)}
  .side .close{display:none}
  .scrim{display:none}
  .burger{display:none}
  .side-collapse{
    display:flex;align-items:center;justify-content:center;padding:10px 20px 4px
  }
  .side-collapse button{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
    background:rgba(255,255,255,.05);border:0;border-radius:var(--radius-sm);color:#c7cbdd;
    padding:8px;cursor:pointer;font-size:12px;font-weight:500
  }
  .side-collapse button:hover{background:rgba(255,255,255,.1);color:#fff}
  .side-collapse svg{transition:transform var(--gecis-normal)}
  .topbar{padding:14px var(--pad)}
  .search-box{display:flex}
  .grid.cols-4,.grid.grid-4{grid-template-columns:repeat(4,1fr)}
  .content{padding:22px var(--pad) 60px}

  /* --- MASAÜSTÜ KONTROL ÖLÇEĞİ ----------------------------------------
     yenitema'nın tüm kontrolleri 38px (buton, simge butonu, arama) veya
     40px (form girdisi). Panel bunları 44px'e (--tap) sabitliyordu; --tap
     bir DOKUNMA hedefi alt sınırıdır ve <992px'te aynen korunur. Fare
     bağlamında bu sınır gerekmediği için burada tasarımın ölçeğine
     dönülür — panelin "iri/şişkin" görünmesinin ikinci büyük nedeni buydu.
     .btn-fab ve .btn-icon (dropdown/modal kapatma gibi yerlerde) listeye
     ALINMAZ: onların ölçüsü kendi kurallarında tanımlı. -------------- */
  /* Gövde metni: yenitema masaüstünde 13-13.5px. Panel 14.5px kullanıyordu;
     başlıklar 14.5px'e indirilince (bkz. §2) gövdeyle aynı puntoya düşüp
     hiyerarşi kaybolurdu — ölçek bir kademe birlikte iner. */
  body{font-size:13.5px}
  /* Kart iç boşluğu yenitema'da 15-17px (Hazır Yanıtlar.dc.html kartları);
     20px, küçülen tipografiyle birlikte kartları boş gösteriyordu. */
  .card{padding:17px}
  details.card{padding:0}
  details.card summary{padding:17px}
  details.card>*:not(summary){padding-left:17px;padding-right:17px}
  details.card>*:last-child{margin-bottom:17px}
  .btn,.btn-primary,.btn-secondary,.btn-outline,.btn-danger,.btn-warning,
  .btn-success,.btn-ghost{min-height:var(--kontrol-h);padding:0 16px;font-size:13.5px}
  .btn.sm,.btn-sm{min-height:34px;padding:0 13px;font-size:12.5px}
  .btn-lg{min-height:46px;padding:0 22px;font-size:15px}
  input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
  input[type=tel],input[type=date],input[type=search],select,.form-control{
    min-height:var(--kontrol-h-girdi);padding:9px 12px;font-size:13.5px
  }
  /* textarea çok satırlıdır: yükseklik sınırı girdininkiyle aynı olamaz. */
  textarea,textarea.form-control{min-height:88px;padding:10px 12px;font-size:13.5px}
  /* Yukarıdaki toplu padding, ok işareti ve büyüteç için ayrılan yan
     boşlukları da eziyor (aynı özgüllük, dosyada sonra geliyor) — ikisi
     burada geri verilir, yoksa metin simgenin altına girer. */
  select,select.form-control{padding-right:34px}
  .search-box input{padding-left:36px}

  /* --- GELEN KUTUSU: iki bitişik kolon (liste | sohbet) --------------
     Üçüncü kolon ≥1200px'te açılır (dosya sonundaki blok). Yükseklik
     artık `70vh` gibi bir TAHMİN değil: sayfa uygulama kabuğu olduğu
     için `.inbox` kalan boyu `flex:1` ile doldurur ve kaydırma
     kolonların İÇİNDEdir. */
  .inbox{flex-direction:row;flex:1;min-height:0}
  .pane-list{flex:0 0 var(--inbox-liste-w);border-right:1px solid var(--renk-border)}
  .pane-thread{flex:1 1 auto;min-width:0}
  .convlist{flex:1;min-height:0;max-height:none}
  .chat-thread{flex:1;min-height:0;height:auto}
  /* Kolon içi boşluk tasarımın masaüstü ölçüsüne çıkar (msgs 22/26).
     Yapı (sabit başlık · kayan liste · sabit yazma alanı) tabanda
     kurulu, burada yalnız ölçü büyür. */
  .chat-thread>*{flex:none}
  .chat-thread .th-head{padding:12px 22px}
  .chat-thread>.msgs{flex:1 1 auto;min-height:0;max-height:none;padding:22px 26px 8px}
  .chat-thread .draftrow,.chat-thread .izquick{margin-left:22px;margin-right:22px}
  .chat-thread .composer{padding:12px 22px}
  .chat-thread #thStatus{margin:0 22px 10px}
  .backlist{display:none}
}

/* ≥ 1280px — geniş masaüstü: liste kolonu tasarımın geniş ölçüsüne çıkar
   (Canlı Destek.dc.html 288px → 352px). */
@media (min-width:1280px){
  :root{--inbox-liste-w:352px}
}
@media (max-width:991.98px){
  .search-box{display:none}
}

/* Canlı Destek ziyaretçi paneli (#paneInfo) — <1200px kayan panel,
   ≥1200px inbox üç kolona genişler. Bu blok .inbox{grid-template-columns:
   330px 1fr} kuralından (yukarıdaki ≥992px medya sorgusu) SONRA gelmeli;
   aksi halde ≥1200px'te iki kural da eşit özgüllükte eşleşir ve dosya
   sırasına göre SONRAKİ kazanır — üç kolonlu düzen iki kolona düşerdi. */
@media (max-width:1199.98px){
  #paneInfo{
    position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);
    transform:translateX(100%);transition:transform .25s ease;z-index:56;
    border-radius:0;box-shadow:var(--golge-lg)
  }
  #paneInfo.open{transform:translateX(0)}
  .info-close{display:inline-flex}
}
@media (min-width:1200px){
  /* Üçüncü kolon: bitişik, ayracı border-left, kendi içinde kayar.
     Yükseklik `.inbox`in satır yüksekliğinden gelir (align-items varsayılan
     `stretch`), bu yüzden eski `height:70vh` tahminine gerek kalmadı. */
  .pane-info{flex:0 0 var(--inbox-info-w);border-left:1px solid var(--renk-border)}
  .info-toggle,.paneinfo-scrim{display:none!important}
}
@media (prefers-reduced-motion:reduce){#paneInfo{transition:none}}

/* Mesaj akışındaki sistem notu (YAZ-166/3) — "YZ Devret" gibi durum
   değişiklikleri. Balon DEĞİL: gönderen yok, bu yüzden .mrow ailesine
   girmez ve gün ayracı (.daysep) gibi ortalanmış bir şerittir. */
.msys{
  width:fit-content;max-width:min(420px,90%);margin:6px auto 10px;padding:4px 12px;text-align:center;
  border:1px solid var(--renk-border);border-radius:99px;background:var(--renk-surface);
  color:var(--renk-muted);font-size:11.5px
}

/* Ziyaretçi panelindeki eylem satırı ("Not ekle" — YAZ-166/3). Tasarımda
   (Canlı Destek.dc.html) panel başlığının altında yan yana duran küçük
   ikincil butonlar; burada .btn-outline.btn-sm ile kurulur, bu sınıf
   yalnızca satırın kendisini hizalar. */
.info-actions{display:flex;gap:7px;flex-wrap:wrap}

/* Oturum + Gezinti geçmişi (YAZ-166/3) — ziyaretçi panelinin 3. ve 4.
   bölümü. "Oturum" YENİ bir bileşen istemez: anahtar/değer satırlarını
   zaten var olan `.info-basics` çizer. "Gezinti geçmişi" ayrı bir liste;
   `.timeline` DEĞİLDİR — orada dikey çizgi + olay dalları var, burada
   sıkışık tek satır meta (yol · süre · kaydırma · tıklama).
   Bölümler `hidden` ile açılıp kapanır; `.info-sec{display:grid}` UA'nın
   [hidden] kuralını yendiği için kimlik seçicisiyle geri alınır (aynı
   sorun #infoBody'de de vardı). */
#izOturumSec[hidden],#izGezintiSec[hidden]{display:none}
.gezinti{display:grid;gap:9px}
.gz-item{display:flex;gap:9px;align-items:flex-start}
.gz-dot{width:6px;height:6px;border-radius:50%;background:var(--renk-border);margin-top:6px;flex:0 0 auto}
.gz-item.giris .gz-dot{background:var(--renk-success)}
.gz-item.cikis .gz-dot{background:var(--renk-primary)}
.gz-body{flex:1;min-width:0}
.gz-title{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gz-meta{
  font-family:var(--font-mono);font-size:10.5px;color:var(--renk-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* Klavye kısayolu rozeti — tasarımdaki arama kutusunun sağındaki "⌘K". */
.kbd{
  font-family:var(--font-mono);font-size:10.5px;color:var(--renk-muted);flex:none;
  border:1px solid var(--renk-border);border-radius:5px;padding:1px 5px
}
.search-box .kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}
/* Rozet girdinin ÜSTÜNDE durduğu için metne yer açılır; yoksa uzun yer
   tutucu rozetin altına girer (gelen kutusu arama kutusu dar). */
.list-head .search-box input{padding-right:46px}

/* Komut paleti (⌘K / Ctrl+K) — sohbetler arası hızlı geçiş. Sunum
   katmanıdır: yeni bir uca istek atmaz, listede zaten yüklü sohbetler
   üzerinde çalışır ve seçimi mevcut openConv() akışına devreder. */
.kpalet{
  position:fixed;inset:0;z-index:70;display:none;justify-content:center;align-items:flex-start;
  padding:12vh 16px 16px;background:rgba(15,23,42,.4)
}
.kpalet.on{display:flex}
.kpalet-box{
  width:100%;max-width:560px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--renk-surface);border:1px solid var(--renk-border);border-radius:14px;box-shadow:var(--golge-lg)
}
.kpalet-box>input{border:0;border-bottom:1px solid var(--renk-border);border-radius:0;background:transparent}
.kp-list{display:grid;gap:2px;padding:6px;overflow:auto}
.kp-item{
  display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;
  cursor:pointer;padding:8px 10px;border-radius:8px;font:inherit;color:inherit
}
.kp-item:hover,.kp-item.hi{background:var(--renk-surface-2)}
.kp-item .nm{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-item .sub{font-size:12px;color:var(--renk-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-foot{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;
  border-top:1px solid var(--renk-border);color:var(--renk-muted);font-size:11.5px
}

/* ---------------------------------------------------------------- *
 *  7) YAZDIRMA + HAREKET AZALTMA                                     *
 * ---------------------------------------------------------------- */
@media print{
  .side,.scrim,.topbar,.btn,.btn-primary,.btn-outline,.btn-secondary,.tabs,.modal{display:none!important}
  /* Yazdırmada ölçü kabı ve uygulama kabuğu kilidi kalkar: kâğıt zaten
     kendi genişliğini dayatır, 100vh kilidi ise tek sayfaya kırpardı. */
  html,body,.wrap,.main,.content,.app-shell{height:auto;overflow:visible}
  .content{padding:0;max-width:none;margin-inline:0}
  .inbox,.inbox>.pane{display:block;overflow:visible}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}