/* PalKonto arayüz stilleri */
:root{
  /* 80-12 (kullanıcı onayı 17.09.2026): YEŞİL tasarım + açık mavi kutular + metalik adaçayı gümüşü zemin
   * (kaynak: Claude outputs/PalKonto_Tasarim_Yesil_Acik_Mavi_Kutular.html). Jeton yapısı 80-1…80-10 ile aynı; değerler değişti.
   * Yüzey kuralı: zemin metalik (--ground-hi→--ground), kutular/paneller açık mavi (--box-hi→--box, çerçeve --box-line);
   * BEYAZ yalnız veri tabloları, yazı alanları, PIN tuşları ve ikincil/tehlike düğmeleri. Yan menü ve üst şerit koyu yeşil.
   * Kontrast testi: server/test/design-tokens-contrast.test.js */
  --ground:#E1EDE4;--ground-hi:#EFF5F1;--surface:#FFFFFF;--surface-2:#ECF3EE;
  /* 80-15 (kullanıcı düzeltmesi 17.09): yan menü / üst şerit / tanıtım menüsü METALİK ORTA YEŞİL (--sidebar-top → --sidebar geçişi + hafif üst ışık);
   * koyu yeşil #1F4D2B / #2A7038 yalnız düğmelerde ve küçük vurgularda. Menü yazısı beyaz, ikincil #D7E8DB; seçili öğe açık pill + koyu yazı. */
  --sidebar-top:#41704D;--sidebar:#386340;   /* istenen #4F7F5C→#3F6E4B: en açık tonda ikincil menü yazısı 3,64 < 4,5 → üst ton minimum koyulaştırıldı (#41704D = 4,51), alt ton geçiş görünsün diye bir kademe (#386340) */
  --sidebar-ink:#FFFFFF;--sidebar-ink-2:#D7E8DB;--sidebar-line:rgba(255,255,255,.22);--sidebar-line-2:rgba(255,255,255,.38);--sidebar-hover:rgba(0,0,0,.16);--sidebar-field-border:#FFFFFF;   /* hover koyulaştırır: menü yazısı kontrastı düşmez */
  --nav-on-bg:#EAF4ED;--nav-on-ink:#1F4D2B;--brand-ink:#FFFFFF;--toast-bg:#3F6E4B;   /* seçili menü öğesi açık; marka beyaz; toast orta yeşil */
  /* 80-15 A: ikincil düğmeler açık-orta yeşil (ana düğme koyu yeşil, tehlike düğmesi kırmızı çerçeveli kalır) */
  --btn-soft:#CFE5D5;--btn-soft-hover:#C2DDC9;--btn-soft-ink:#1F4D2B;--btn-soft-line:#4E7D5B;
  /* 80-15 C: yan menü sayı rozeti belirgin metalik kırmızı + 2 px beyaz halka */
  --badge-top:#C8281C;--badge-ring:#FFFFFF;
  --ink:#132016;--ink-2:#3A503F;--ink-3:#4E6553;--line:#CADDCF;--line-2:#A9C2B0;   /* ink-2: surface üzerinde 9,9:1 (≥ 7) */
  /* --field-border giriş/seçim/onay kutusu kenarı (beyaz alan ve kutu üstünde ≥ 3:1); --focus odak halkası = vurgu rengi */
  --field-border:#657B6B;--focus:var(--accent);
  /* 8.8-A2: depo grubu ayırıcısı — alan kenarıyla AYNI ton (her temada onunla birlikte değişir), ince satır çizgisinden kalın */
  --grp-line:var(--field-border);
  /* 8.9-A4: başlık şeridi yüksekliği TEK yerde — iki satırlık başlık + iç boşluk. */
  --th-h:3.1rem;
  --accent:#2A7038;--accent-2:#3A8A48;--accent-soft:#E5F5E9;--accent-strong:#256532;   /* accent: beyaz yazılı ana düğme/bağlantı; accent-strong: hover; accent-2 yalnız dekoratif/metin dışı */
  /* Kutular (80-12): bütün paneller/kartlar/çekmeceler açık mavi */
  --box:#EAF2FA;--box-hi:#F0F6FC;--box-line:#C6D7E6;--box-deep:#DCE9F6;   /* box-deep: giriş/tanıtım büyük yüzeylerinde geçişin koyu ucu */
  /* Bakiye renkleri (pilot kararı): ALACAK yeşil ve artı, BORÇ kırmızı ve eksi. 80-12: eksi belirgin kırmızı --neg; --pay = --neg (kontrast: beyaz 6,5 · box 5,8 · ground 5,4) */
  --recv:#2C6E52;--recv-soft:#DCEDE4;      /* + karşı taraf bize borçlu (alacak) — vurgu renginden ayrı */
  --neg:#B42318;--pay:#B42318;--pay-soft:#FBE9E7;        /* − biz karşı tarafa borçluyuz (borç) */
  --bad:#B42318;--bad-soft:#FBE9E7;
  --warn:#7A5B12;--warn-soft:#FBF1D6;
  --good:#2C6E52;--good-soft:#DCEDE4;
  /* Otomatik pano durumu (80-12): normal = mavi kutu, dikkat = sarı, acil = kırmızı; sol şerit + küçük etiket. Kullanıcı seçmez. */
  --st-warn-bg:#FBF1D6;--st-warn-hi:#FDF6E3;--st-warn-line:#E6D3A0;--st-warn-bar:#7A5B12;--st-warn-ink:#6B4F0F;--st-warn-lab:#F3E2B3;
  --st-crit-bg:#FBE9E7;--st-crit-hi:#FDF1EF;--st-crit-line:#EBC3BE;--st-crit-bar:#B42318;--st-crit-ink:#9A1D14;--st-crit-lab:#F6D5D1;
  --st-ok-bar:#2563B8;--st-ok-bg:#DCE8F7;--st-ok-ink:#1D4F94;
  --shadow:0 1px 2px rgba(19,32,22,.05),0 14px 30px -22px rgba(19,32,22,.4);--box-inset:inset 0 1px 0 #FFFFFF;
  /* Tek yarıçap ölçeği (023 arayüz tutarlılık geçişi): kartlar/panolar/kutular AYNI köşe
   * yuvarlaklığını paylaşır — önceden 7px/10px/12px karışıktı, "tek tasarım dili" isteğiyle
   * birleştirildi. `-sm` küçük öğeler (etiket, çip, giriş alanı) içindir. */
  --radius:10px;--radius-sm:6px;--radius-pill:999px;
  /* Boşluk ölçeği (80-3): 4 px tabanlı; --sp-N = N×4 (1–6), 8, 10, 12. Düzensiz rem değerleri kademeli olarak taşınır. */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  /* Yoğunluk (80-4): rahat varsayılan; [data-density="compact"] sıkı; mobil (≤ 820 px) ve şoför rolünde kontrol ≥ 44 px. */
  --ctl-h:40px;--row-h:44px;--pad-card:20px;
  /* 80-5/80-10/80-12: koyu yüzey üstü metin, rozet, örtü — koyu temada da jeton */
  --on-dark:#FFFFFF;--on-dark-2:#E6EFE8;   /* 80-15: orta yeşil (açık ton #41704D) üstünde de ≥ 4,5 */   /* yalnız GERÇEKTEN koyu yüzeyler (yan menü, üst şerit, toast, şoför kimlik kartı) üstü metin/ikincil metin */
  /* Rozet: koyu yeşil yan menüde AÇIK zeminli rozet (zemin/yan menü ≥ 3, yazı ≥ 4,5); seçili (açık) öğede kırmızı zemin + beyaz yazı */
  --on-accent:#FFFFFF;--badge:#B42318;--on-badge:#FFFFFF;--nav-badge-on-bg:#B42318;--nav-badge-on-ink:#FFFFFF;--overlay:rgba(19,32,22,.5);--card-shadow:rgba(19,32,22,.06);
  /* Yazı ölçeği (80-2/80-10): 7 kademe, 12 px altı yok; kalınlık 400/600/700. Rahat: gövde 16 px, satır aralığı 1,6. */
  --fs-xs:12px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:21px;--fs-2xl:27px;--fs-3xl:34px;--lh:1.6;
  --f-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-b:"Instrument Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --f-m:"IBM Plex Mono",Consolas,monospace;
}
/* 80-10 → 8.10-A1 (kullanıcı kararı 19.09): VARSAYILAN ARTIK "Yeşil — koyu". Aşağıdaki blok hem seçili koyu temayı
 * (data-theme="dark") hem de HENÜZ ÖZNİTELİK YOKKEN ilk boyamayı (`:root:not([data-theme])`) kapsar — böylece tercihi
 * olmayan kullanıcıda ve tanıtım sayfasının ilk açılışında açık→koyu sıçraması olmaz (satır içi script CSP'de yasak).
 * "Sistem" seçeneği cihazın açık/koyu ayarını izler; varsayılan DEĞİLDİR. */
@media (prefers-color-scheme:dark){:root[data-theme="system"]{
  --ground:#14201A;--ground-hi:#1B2B22;--surface:#1C2A22;--surface-2:#24342B;--sidebar-top:#2E5237;--sidebar:#24432C;   /* koyu tema (80-12/80-15): yeşil aileden, orta koyulukta metalik yeşil şerit, saf siyah yok; yalnız kullanıcı seçimiyle */
  --sidebar-ink:#FFFFFF;--sidebar-ink-2:#D7E8DB;--sidebar-line:rgba(255,255,255,.16);--sidebar-line-2:rgba(255,255,255,.3);--sidebar-hover:rgba(0,0,0,.22);--sidebar-field-border:#FFFFFF;
  --nav-on-bg:#EAF4ED;--nav-on-ink:#1F4D2B;--brand-ink:#FFFFFF;--toast-bg:#24432C;   /* seçili öğe koyu temada da açık pill (yan menüye karşı ≥ 3) */
  --btn-soft:#2F5A3A;--btn-soft-hover:#3A6A46;--btn-soft-ink:#E6EFE8;--btn-soft-line:#8AB396;
  --badge-top:#CF3A31;--badge-ring:#FFFFFF;
  --ink:#E6EFE8;--ink-2:#C3D2C7;--ink-3:#9DB0A3;--line:#35473C;--line-2:#4A6052;--field-border:#8AA391;--focus:var(--accent);
  --accent:#7BCB87;--accent-2:#8FD69A;--accent-soft:#1F3A27;--accent-strong:#9ADBA4;
  --box:#1E2B36;--box-hi:#24323E;--box-line:#3A4C5C;--box-deep:#182430;
  --recv:#7FCB9E;--recv-soft:#1B3328;--neg:#F0958A;--pay:#F0958A;--pay-soft:#3E2320;
  --bad:#F0958A;--bad-soft:#3E2320;--warn:#E3B95E;--warn-soft:#3A3118;--good:#7FCB9E;--good-soft:#1B3328;
  --st-warn-bg:#3A3118;--st-warn-hi:#433A1E;--st-warn-line:#6A5A2A;--st-warn-bar:#E3B95E;--st-warn-ink:#F1D48A;--st-warn-lab:#5A4C1F;
  --st-crit-bg:#3E2320;--st-crit-hi:#482A26;--st-crit-line:#6E3B36;--st-crit-bar:#F0958A;--st-crit-ink:#F5B5AD;--st-crit-lab:#5E302B;
  --st-ok-bar:#6FA6E8;--st-ok-bg:#24384E;--st-ok-ink:#A9CBF3;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px -20px rgba(0,0,0,.6);--box-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --on-accent:#14201A;--badge:#C22C21;--on-badge:#FFFFFF;--nav-badge-on-bg:#C22C21;--nav-badge-on-ink:#FFFFFF;--overlay:rgba(0,0,0,.55);--card-shadow:rgba(0,0,0,.3);
}}
:root:not([data-theme]),:root[data-theme="dark"]{
  --ground:#14201A;--ground-hi:#1B2B22;--surface:#1C2A22;--surface-2:#24342B;--sidebar-top:#2E5237;--sidebar:#24432C;   /* koyu tema (80-12/80-15): yeşil aileden, orta koyulukta metalik yeşil şerit, saf siyah yok; yalnız kullanıcı seçimiyle */
  --sidebar-ink:#FFFFFF;--sidebar-ink-2:#D7E8DB;--sidebar-line:rgba(255,255,255,.16);--sidebar-line-2:rgba(255,255,255,.3);--sidebar-hover:rgba(0,0,0,.22);--sidebar-field-border:#FFFFFF;
  --nav-on-bg:#EAF4ED;--nav-on-ink:#1F4D2B;--brand-ink:#FFFFFF;--toast-bg:#24432C;   /* seçili öğe koyu temada da açık pill (yan menüye karşı ≥ 3) */
  --btn-soft:#2F5A3A;--btn-soft-hover:#3A6A46;--btn-soft-ink:#E6EFE8;--btn-soft-line:#8AB396;
  --badge-top:#CF3A31;--badge-ring:#FFFFFF;
  --ink:#E6EFE8;--ink-2:#C3D2C7;--ink-3:#9DB0A3;--line:#35473C;--line-2:#4A6052;--field-border:#8AA391;--focus:var(--accent);
  --accent:#7BCB87;--accent-2:#8FD69A;--accent-soft:#1F3A27;--accent-strong:#9ADBA4;
  --box:#1E2B36;--box-hi:#24323E;--box-line:#3A4C5C;--box-deep:#182430;
  --recv:#7FCB9E;--recv-soft:#1B3328;--neg:#F0958A;--pay:#F0958A;--pay-soft:#3E2320;
  --bad:#F0958A;--bad-soft:#3E2320;--warn:#E3B95E;--warn-soft:#3A3118;--good:#7FCB9E;--good-soft:#1B3328;
  --st-warn-bg:#3A3118;--st-warn-hi:#433A1E;--st-warn-line:#6A5A2A;--st-warn-bar:#E3B95E;--st-warn-ink:#F1D48A;--st-warn-lab:#5A4C1F;
  --st-crit-bg:#3E2320;--st-crit-hi:#482A26;--st-crit-line:#6E3B36;--st-crit-bar:#F0958A;--st-crit-ink:#F5B5AD;--st-crit-lab:#5E302B;
  --st-ok-bar:#6FA6E8;--st-ok-bg:#24384E;--st-ok-ink:#A9CBF3;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px -20px rgba(0,0,0,.6);--box-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --on-accent:#14201A;--badge:#C22C21;--on-badge:#FFFFFF;--nav-badge-on-bg:#C22C21;--nav-badge-on-ink:#FFFFFF;--overlay:rgba(0,0,0,.55);--card-shadow:rgba(0,0,0,.3);
}
/* ═══════════════════════════ 8.10 (kullanıcı kararı 19.09): TEMA LİSTESİ
 * Her tema YALNIZ jeton değiştirir (C1): zemin, yüzey, çizgi, yazı, yan pano, vurgu. Düzen, boşluk, yazı tipi ve
 * bileşen yapısı temadan temaya DEĞİŞMEZ — aşağıdaki bloklarda --sp-*, --fs-*, --radius*, --f-* ve --ctl-h YOKTUR.
 * ANLAM RENKLERİ (C2) hiçbir temada değişmez: eksi kırmızı, artı yeşil, uyarı sarı, acil kırmızı, bilgi mavisi.
 * Açık aileden temalar (çelik mavisi, App Store mavisi) anlam jetonlarını :root'tan MİRAS ALIR — bloklarında hiç
 * yazılmaz, böylece "tema anlamı değiştiremez" kuralı CSS basamağıyla garanti edilir (testle de sabit).
 * Koyu aileden tema (antrasit) koyu yüzeye göre ayarlanmış AYNI anlam ailesini "Yeşil — koyu" ile birebir taşır. */

/* 3. Çelik mavisi — açık aile (kullanıcı verdiği renkler: #4079B1 / #336394) */
:root[data-theme="steel"]{
  --ground:#E3EAF2;--ground-hi:#F1F5F9;--surface:#FFFFFF;--surface-2:#EBF1F7;
  --sidebar-top:#3A6894;--sidebar:#2F5878;--sidebar-ink:#FFFFFF;--sidebar-ink-2:#DCE8F5;
  --sidebar-line:rgba(255,255,255,.22);--sidebar-line-2:rgba(255,255,255,.38);--sidebar-hover:rgba(0,0,0,.16);--sidebar-field-border:#FFFFFF;
  --nav-on-bg:#E7F0F9;--nav-on-ink:#1F4468;--brand-ink:#FFFFFF;--toast-bg:#33628C;
  --btn-soft:#D2E3F2;--btn-soft-hover:#C3D9EE;--btn-soft-ink:#1F4468;--btn-soft-line:#4E7CA8;
  --ink:#111B24;--ink-2:#36495A;--ink-3:#4A5D6E;--line:#CBD9E5;--line-2:#A9BECF;--field-border:#63788A;--focus:var(--accent);
  --accent:#336394;--accent-2:#4079B1;--accent-soft:#E5EFF8;--accent-strong:#2A5379;
  --box:#EAF1F9;--box-hi:#F2F7FC;--box-line:#C6D7E6;--box-deep:#DCE9F6;
}
/* 4. App Store mavisi — açık aile (#007AFF; düğmelerde #0064D2, beyaz yazıda kontrast için) */
:root[data-theme="ios"]{
  --ground:#E7ECF2;--ground-hi:#F4F7FA;--surface:#FFFFFF;--surface-2:#EEF2F7;
  --sidebar-top:#0F5FAF;--sidebar:#0B4D8F;--sidebar-ink:#FFFFFF;--sidebar-ink-2:#DCE8F7;
  --sidebar-line:rgba(255,255,255,.22);--sidebar-line-2:rgba(255,255,255,.38);--sidebar-hover:rgba(0,0,0,.16);--sidebar-field-border:#FFFFFF;
  --nav-on-bg:#E8F1FD;--nav-on-ink:#0B3F76;--brand-ink:#FFFFFF;--toast-bg:#0B4D8F;
  --btn-soft:#DCE9F9;--btn-soft-hover:#CEE0F6;--btn-soft-ink:#0B3F76;--btn-soft-line:#4A7FBC;
  --ink:#0F151B;--ink-2:#374654;--ink-3:#4B5B69;--line:#D2DAE3;--line-2:#AFBCC9;--field-border:#68757F;--focus:var(--accent);
  --accent:#0064D2;--accent-2:#007AFF;--accent-soft:#E3EEFC;--accent-strong:#0051AC;
  --box:#EDF3FB;--box-hi:#F5F9FD;--box-line:#CBDCEE;--box-deep:#DFEAF8;
}
/* 5. Antrasit + turuncu — koyu aile. Anlam renkleri "Yeşil — koyu" ile BİREBİR aynı (C2). */
:root[data-theme="anthracite"]{
  --ground:#191B1E;--ground-hi:#212428;--surface:#232629;--surface-2:#2B2F33;
  --sidebar-top:#343940;--sidebar:#292D33;--sidebar-ink:#FFFFFF;--sidebar-ink-2:#DADDE1;
  --sidebar-line:rgba(255,255,255,.16);--sidebar-line-2:rgba(255,255,255,.3);--sidebar-hover:rgba(0,0,0,.22);--sidebar-field-border:#FFFFFF;
  --nav-on-bg:#F0E4D6;--nav-on-ink:#5A3A11;--brand-ink:#FFFFFF;--toast-bg:#292D33;
  --btn-soft:#393E45;--btn-soft-hover:#454B53;--btn-soft-ink:#E8EAEC;--btn-soft-line:#8C949C;
  --ink:#E8EAEC;--ink-2:#C6CBD0;--ink-3:#A0A7AD;--line:#3A4046;--line-2:#4E555C;--field-border:#8E969D;--focus:var(--accent);
  --accent:#F0913C;--accent-2:#FFA95C;--accent-soft:#3A2A18;--accent-strong:#F7A659;
  --box:#242A31;--box-hi:#2B323A;--box-line:#3E4852;--box-deep:#1E242A;
  /* anlam aileleri — "Yeşil — koyu" ile aynı değerler (tema anlamı değiştirmez) */
  --recv:#7FCB9E;--recv-soft:#1B3328;--neg:#F0958A;--pay:#F0958A;--pay-soft:#3E2320;
  --bad:#F0958A;--bad-soft:#3E2320;--warn:#E3B95E;--warn-soft:#3A3118;--good:#7FCB9E;--good-soft:#1B3328;
  --st-warn-bg:#3A3118;--st-warn-hi:#433A1E;--st-warn-line:#6A5A2A;--st-warn-bar:#E3B95E;--st-warn-ink:#F1D48A;--st-warn-lab:#5A4C1F;
  --st-crit-bg:#3E2320;--st-crit-hi:#482A26;--st-crit-line:#6E3B36;--st-crit-bar:#F0958A;--st-crit-ink:#F5B5AD;--st-crit-lab:#5E302B;
  --st-ok-bar:#6FA6E8;--st-ok-bg:#24384E;--st-ok-ink:#A9CBF3;
  --badge-top:#CF3A31;--badge-ring:#FFFFFF;--badge:#C22C21;--on-badge:#FFFFFF;--nav-badge-on-bg:#C22C21;--nav-badge-on-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px -20px rgba(0,0,0,.6);--box-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --on-accent:#191B1E;--overlay:rgba(0,0,0,.55);--card-shadow:rgba(0,0,0,.3);
}
/* 80-4 yoğunluk: sıkı düzen (masaüstü merkez varsayılanı) */
:root[data-density="compact"]{--fs-md:15px;--fs-sm:13px;--lh:1.5;--ctl-h:32px;--row-h:32px;--pad-card:12px}
/* Mobil ve şoför ekranında dokunma hedefi en az 44 px — yoğunluktan bağımsız */
@media (max-width:820px){:root,:root[data-density="compact"]{--ctl-h:44px;--row-h:44px}}
:root[data-role="driver"],:root[data-role="driver"][data-density="compact"]{--ctl-h:44px;--row-h:44px}
/* 80-6: Bulgarca (Kiril) — yerel woff2 alt kümeleri Kiril taşımaz; karışık glif görünümü yerine bütün yığın sistem yazı tipine
 * düşer (bkz. fonts.css notu). Arayüz metinleri i18n bg dizisi Kiril'dir. */
:root:lang(bg){--f-d:"Helvetica Neue",Arial,system-ui,sans-serif;--f-b:"Segoe UI",Helvetica,Arial,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-b);font-size:var(--fs-md);line-height:var(--lh);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit}
input[type="checkbox"],input[type="radio"]{accent-color:var(--accent)}   /* 80-1: onay kutusu/radyo vurgu rengi jetondan (kenarı tarayıcı çizer) */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.form-submit-attempted input:invalid,.form-submit-attempted select:invalid,.form-submit-attempted textarea:invalid,
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border:2px solid var(--bad);box-shadow:0 0 0 3px var(--bad-soft);outline:none
}
.field-error{display:block;color:var(--bad);font-size:var(--fs-xs);font-weight:700;margin-top:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 013 (toplu kapanış madde 1): kart→liste kaydırma vurgusu (main.js:scrollToPanel). Yukarıdaki
 * reduced-motion kuralı BUNU zaten otomatik kapatır (animation:none!important); JS tarafı da
 * AYRICA scrollIntoView'ı "auto"ya düşürür (CSS bunu kapsamaz). */
@keyframes hlFlash{0%{background:var(--accent-soft)}100%{background:transparent}}
.hl-flash{animation:hlFlash 1.4s ease-out}

/* ═══════════════ 8.8-A1 (kullanıcı kararı 19.09): sol pano HER ekranda ve HER kaydırmada solda kalır.
 * Üç kademe: ≥1000 px tam pano (değişmedi) · 820–1000 px dar pano (ikon + kısa etiket) · <820 px yalnız ikon şeridi.
 * Pano hiçbir kademede üste/alta taşınmaz, gizlenmez, hamburger menü arkasına saklanmaz; kendi içinde dikey kaydırır.
 * Giriş, platform firma seçimi ve tanıtım sayfaları `.shell` KULLANMAZ, bu yüzden bu kuralların tamamen dışındadır. */
.shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
.side{background:var(--sidebar);color:var(--sidebar-ink);display:flex;flex-direction:column;gap:1.1rem;padding:1.1rem .8rem;position:sticky;top:0;height:100vh;min-height:0;overflow:hidden}
.brand{display:flex;flex-direction:column;gap:.15rem;padding:.2rem .55rem 0}
.brand b{font-family:var(--f-d);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.02em;color:var(--brand-ink)}
.brand span{font-family:var(--f-m);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--sidebar-ink-2)}
.side-quick{display:flex;flex-direction:column;gap:.35rem;padding:.15rem .2rem .8rem;border-bottom:1px solid var(--sidebar-line);flex:0 0 auto}
.side-quick-title{font-size:var(--fs-xs);font-weight:600;color:var(--sidebar-ink-2);line-height:1.3;padding:0 .35rem .2rem}
.side-quick button{display:flex;align-items:center;gap:.55rem;width:100%;min-height:44px;padding:.45rem .55rem;border-radius:var(--radius-sm);background:var(--nav-on-bg);color:var(--nav-on-ink);font-size:var(--fs-sm);font-weight:700;text-align:left}
.side-quick button:hover,.side-quick button:focus-visible{background:var(--sidebar-hover);color:var(--sidebar-ink);outline:2px solid var(--sidebar-line-2);outline-offset:1px}
.side-quick .nav-ic{font-size:20px;line-height:1;flex:0 0 22px;text-align:center}
.side-quick .nav-lb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-quick .nav-lb-short{display:none}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1 1 auto;min-height:0}
.nav button{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:.46rem .55rem;border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--sidebar-ink);text-align:left;width:100%;position:relative}
.nav .nav-ic{display:none;flex:0 0 auto;width:22px;text-align:center;font-size:16px;line-height:1}
.nav .nav-lb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-mark{display:none}
.nav button:hover{background:var(--sidebar-hover)}
.nav button.on{background:var(--nav-on-bg);color:var(--nav-on-ink);font-weight:600;font-weight:600}
.nav button.nav-create{margin:.25rem 0 .4rem;border:1px solid var(--sidebar-line-2);font-weight:700}
.nav button.nav-create:hover,.nav button.nav-create:focus-visible{background:var(--sidebar-hover)}
/* İncelemeyi kolaylaştırmak için: bekleyen/karar isteyen sayaçlar (inceleme, transfer,
 * YZ önerisi, mobil kuyruk, acil asistan işi) sabit kırmızı bir rozette durur — tema/aktif
 * durumdan bağımsız her zaman aynı belirgin renk (yan çubuk her zaman koyu zeminlidir). */
.nav .badge{font-family:var(--f-m);font-size:var(--fs-xs);font-weight:700;background:var(--badge);color:var(--on-badge);
  border-radius:var(--radius);padding:0 .4rem;min-width:18px;text-align:center}
.nav button.on .badge{background:var(--nav-badge-on-bg);color:var(--nav-badge-on-ink)}   /* 80-12: seçili (açık) öğede kırmızı rozet + beyaz yazı */
.sidefoot{margin-top:auto;padding:.7rem .55rem;border-top:1px solid var(--sidebar-line);font-size:var(--fs-xs);color:var(--sidebar-ink-2);display:flex;flex-direction:column;gap:var(--sp-1)}
.sidefoot b{color:var(--sidebar-ink);font-weight:600;font-size:var(--fs-xs)}

/* 8.8-A1 — 820–1000 px: pano daralır ama YERİNDE kalır; her düğme ikon + kısa etiket taşır, dokunma alanı ≥ 44 px.
 * Tam ad `title` ve `aria-label` içinde durur (main.js), etiket sığmazsa üç noktayla kısalır. */
@media (max-width:1000px){
  .shell{grid-template-columns:152px minmax(0,1fr)}
  .side{padding:.8rem .45rem;gap:.7rem}
  .nav button{padding:.4rem .4rem;min-height:44px;gap:.4rem}
  .nav .nav-ic{display:inline-block}
  .brand{padding:.2rem .3rem 0}
  .brand span{display:none}
  .side-quick-title{display:none}
  .side-quick .nav-lb{display:none}
  .side-quick .nav-lb-short{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .drawer{left:152px}
}
/* 8.8-A1 — <820 px (telefon): pano SOLDA, yalnız ikon şeridi (56 px), tam yükseklik, kendi içinde kaydırmalı.
 * Rozet ikonun sağ üstünde durur; tam ad dokunmatikte `title`/`aria-label` ile erişilebilir kalır. */
@media (max-width:820px){
  .shell{grid-template-columns:56px minmax(0,1fr)}
  .side{padding:.5rem .2rem;gap:.45rem;align-items:center}
  .nav{width:100%;gap:1px}
  .nav button{justify-content:center;padding:.3rem 0;min-height:44px}
  .nav .nav-ic{display:inline-block;width:auto;font-size:18px}
  .nav .nav-lb{display:none}
  .nav .badge{position:absolute;top:2px;right:2px;font-size:10px;min-width:15px;padding:0 .2rem}
  .brand{padding:0;align-items:center}
  .brand b{display:none}
  .brand span:not(.brand-mark){display:none}   /* marka işareti hariç: `.brand span` ondan daha belirgin olduğu için ayrı tutulur */
  .brand .brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);
    background:var(--nav-on-bg);color:var(--nav-on-ink);font-family:var(--f-d);font-weight:700;font-size:18px}
  .side-quick{width:100%;padding:.15rem 0 .45rem;align-items:center}
  .side-quick button{width:44px;padding:0;justify-content:center}
  .side-quick .nav-ic{flex-basis:auto;font-size:22px}
  .side-quick .nav-lb{display:none}
  .side-quick .nav-lb-short{display:none}
  .sidefoot{padding:.5rem .1rem;align-items:center;gap:2px}
  .sidefoot b,.sidefoot>span{display:none}   /* yalnız DOĞRUDAN çocuk metinler gizlenir; çıkış düğmesinin simgesi kalır */
  .sidefoot .out{width:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center}
  .sidefoot .out .nav-ic{display:inline-block;font-size:18px}
  .sidefoot .out .nav-lb{display:none}
  .drawer{left:56px}
}
.sidefoot .out{margin-top:.4rem;border:1px solid var(--sidebar-line-2);border-radius:var(--radius-sm);padding:.28rem .5rem;font-size:var(--fs-xs);text-align:center}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between;padding:.9rem clamp(.8rem,2.2vw,1.5rem);border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5}
.top h1{font-family:var(--f-d);font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;margin:0}
.top .sub{font-size:var(--fs-xs);color:var(--ink-3)}
.toolbar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.btn{min-height:var(--ctl-h);padding:.4rem .75rem;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:600;border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.sm{padding:.22rem .5rem;font-size:var(--fs-xs);font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.view{padding:clamp(.8rem,2.2vw,1.5rem);display:flex;flex-direction:column;gap:1.05rem}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.65rem}
/* Telefon: kartlar tek sütuna iner — dar ekranda iki kart yan yana sıkışıp rakamlar taşmasın. */
@media (max-width:560px){.kpis{grid-template-columns:1fr}}
/* 20.09 (A1): ana panoda İKİ liste kartı var (net pozisyon + depo stoku). Dar ekranda kartlar tek
   sütuna dizildiği için İKİNCİL kart (`klist-compact`) yalnız ilk iki türü gösterir; gizlenen türler
   alt satırdaki "+N tür daha" metnine eklenir. İçerik HTML'de durur, yalnız görünürlük değişir. */
.klist-compact .d-narrow{display:none}
@media (max-width:560px){
  .klist-compact .klist-i.k-wide{display:none}
  .klist-compact .d-wide{display:none}
  .klist-compact .d-narrow{display:inline}
}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:calc(var(--pad-card) * .75) var(--pad-card);display:flex;flex-direction:column;gap:.1rem;box-shadow:var(--shadow)}
.kpi .l{font-size:var(--fs-xs);color:var(--ink-3)}
.kpi .v{font-family:var(--f-d);font-weight:700;font-size:25px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}   /* 80-15 E: değer ~24–26 px (telefonda 22) */
.kpi .d{font-family:var(--f-m);font-size:var(--fs-xs);color:var(--ink-3)}
.kpi.acc .v{color:var(--accent)}.kpi.recv .v{color:var(--recv)}.kpi.pay .v{color:var(--pay)}
.kpi.bad .v{color:var(--bad)}.kpi.good .v{color:var(--good)}.kpi.warn .v{color:var(--warn)}

/* Paket kartları (kayıt formu + "Paketler" ekranı ortak, § views.js:planCards). Radyo
 * girdisi görsel olarak gizlenir; seçim, komşu <label>'ı native :checked seçiciyle vurgular
 * — ekstra JS state gerekmez. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.65rem}
.plan-radio{position:absolute;opacity:0;width:0;height:0}
.plancard{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:.85rem .9rem;display:flex;flex-direction:column;gap:.3rem;box-shadow:var(--shadow);cursor:pointer}
.plan-radio:checked+.plancard{border-color:var(--accent);background:var(--accent-soft)}
.plan-radio:focus-visible+.plancard{outline:2px solid var(--accent);outline-offset:1px}
.plancard .pc-name{font-family:var(--f-d);font-weight:700;font-size:var(--fs-md)}
.plancard .pc-price{font-family:var(--f-d);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plancard .pc-per{font-family:var(--f-b);font-weight:400;font-size:var(--fs-xs);color:var(--ink-3)}
.plancard .pc-limit,.plancard .pc-contract{font-size:var(--fs-xs);color:var(--ink-3)}
.plancard .pc-annual-total{font-size:var(--fs-xs);color:var(--ink-3);margin-top:.2rem}
.plancard .pc-annual-savings{font-size:var(--fs-xs);color:var(--good);font-weight:600}
.plancard .pc-current{align-self:flex-start;margin-top:.15rem;font-size:var(--fs-xs);font-weight:600;color:var(--accent)}
.plancard .pc-pending{align-self:flex-start;margin-top:.15rem;font-size:var(--fs-xs);font-weight:600;color:var(--warn)}
.plancard .pc-trial{font-size:var(--fs-xs);color:var(--good);font-weight:600}
.plancard .pc-quickpick{align-self:flex-start;margin-top:.3rem;font-size:var(--fs-xs);font-weight:700;color:var(--accent)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-shrink:0}
.ph{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:space-between;padding:.72rem .95rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ph h2{font-family:var(--f-d);font-size:var(--fs-md);font-weight:600;margin:0;letter-spacing:-.01em}
.ph .hint{font-size:var(--fs-xs);color:var(--ink-3)}
.pb{padding:var(--pad-card);display:flex;flex-direction:column;gap:.7rem}
.grid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.05rem}
.grid2e{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:820px){.grid2,.grid2e{grid-template-columns:minmax(0,1fr)}}   /* 80-21: 1fr → minmax(0,1fr): dar ekranda geniş tablo (min-width 560px) sütunu büyütüp yatay taşma yaratıyordu; .tw kendi içinde kaydırır */

.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--fs-sm)}
/* 8.9-A (kullanıcı kararı 19.09): başlıklar ALT KENARDA hizalanır — bir başlık iki satır, diğeri tek satır olsa
 * bile son satırları aynı taban çizgisinde biter. Metin sütunu solda, sayı sütunu sağda (th.n). Başlık şeridinin
 * yüksekliği bir kez belirlenir (`--th-h`), sütundan sütuna değişmez; başlık en fazla iki satırdır (B ile kısaltıldı). */
/* 8.10-F (kullanıcı isteği 19.09): başlıkta heceleme KAPALI. Tarayıcı `hyphens:auto` ya da `overflow-wrap:anywhere`
 * ile "AKTUEL-LER BUCHBESTAND" gibi kelime ORTASINDAN bölüyordu; başlık artık yalnız kelime sınırından sarar. */
th{hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal;text-align:left;vertical-align:bottom;height:var(--th-h);font-family:var(--f-m);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:700;padding:.62rem .8rem;border-bottom:1px solid var(--line-2);white-space:nowrap;background:var(--surface-2)}
td{padding:.58rem .8rem;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
/* 8.9-C1: satır yüksekliği eşit — hücre içi sarma satırı büyütmesin. */
tbody tr{height:var(--row-h)}
tbody td{overflow:hidden}
tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer;transition:background-color .1s ease}
tbody tr.clickable:hover td{background:var(--surface-2)}
/* 8.9-D2: bütün rakamlar eşit genişlikte (tabular) — basamaklar alt alta hizalanır.
 * 8.9-D4: eksi işareti sayıyı kaydırmaz; metinde tipografik eksi (U+2212) kullanılır (i18n.js:nf/sgn). */
td.n,th.n{font-family:var(--f-m);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
/* SAYISAL SÜTUNUN ORTAK KURALI — bütün panolar için, yalnızca özet tabloları için değil.
   Başlık ile rakam AYNI kenarda biter: ikisi de sağa yaslıdır, bu yüzden basamak sayısı
   değişse bile rakamlar kendi başlıklarının tam altında hizalanır. Uzun başlık sarabilir ve
   ALTA hizalanır — çok satırlı başlık, altındaki rakamla aynı satırda biter. */
th.n,td.n{text-align:right}
/* 8.9-A3: başlık en fazla İKİ satır olmalı. Bunu CSS ile kırpmak (line-clamp) hücreyi tablo düzeninden
 * çıkarıp hizayı bozuyor — bu yüzden sınır METİN tarafında tutulur: uzun başlıklar kısaltıldı (8.9-B) ve
 * sayı sütunu başlıklarının 15 dilde de iki satıra sığdığı testle sabitlendi (table-typography-ui). */
th.n{white-space:normal;vertical-align:bottom;line-height:1.3}
/* Rakamın altındaki açıklama (ör. "1/10 depoda sayıldı") satırı iki satır yapar; hücreler
   üstten hizalanır ki her rakam başlığının hemen altında, aynı ilk satırda dursun. */
td.n{vertical-align:top}

/* Depo Günlük Kontrol tabloları — ana tablo (`.dc`, yedi sütun) ve kalem bazlı stok/kayıp
   özeti (`.inv`): rakamlar okunaklı olmalı.
   · sayısal başlık ve değerler AYNI hizada (sağa) — başlık sola, değer sağa kaymaz;
   · sayısal sütunlara sabit genişlik: uzun başlık veya tarih sütunu kaydırmaz;
   · ilk sütun (palet türü) yatay kaydırmada yerinde kalır ve zemini opak durur;
   · dar ekranda tablo `.tw` içinde KONTROLLÜ yatay kaydırma yapar (satır kırpılmaz). */
table.dc,table.inv{min-width:640px;table-layout:fixed}
table.dc th.n,table.dc td.n,table.inv th.n,table.inv td.n{text-align:right;width:6.5rem}
table.dc th:first-child,table.dc td:first-child,
table.inv th:first-child,table.inv td:first-child{width:auto;min-width:11rem;position:sticky;left:0;z-index:1}
table.dc th:first-child,table.inv th:first-child{background:var(--surface-2)}
table.dc td:first-child,table.inv td:first-child{background:var(--surface)}
table.dc tbody tr.clickable:hover td:first-child{background:var(--surface-2)}
table.dc th:last-child,table.dc td:last-child{width:8rem}
table.dc td .sub2{white-space:nowrap}

/* Stok/kayıp özeti (`.inv`) beş SAYISAL sütun taşır ve başlıkları uzundur ("Güncel defter
   stoku", "Açıklanamayan eksik" …). Ana tablonun 6.5rem'lik dar sütunlarında bu başlıklar
   hücreye sığmayıp yan sütunun üstüne taşıyordu. Bu yüzden özet tablosunda:
     · sayısal sütunlar daha geniş (8.5rem) ve başlıklar İKİ SATIRA sarabilir;
     · başlık hücresi alta hizalanır — çok satırlı başlık, altındaki rakamla aynı hizada biter;
     · ilk sütun sabit genişliktedir, kalan yeri sayısal sütunlara bırakır. */
table.inv{min-width:860px}
/* Sayısal sütunlar sabit 8.5rem idi: geniş ekranda kalan boşluk ilk sütuna gidiyor, sayılar
   sola yığılıp başlıkların altında dengesiz duruyordu. `table-layout:fixed` altında genişlik
   verilmeyen sütunlar kalan yeri EŞİT paylaşır — böylece başlıklar farklı uzunlukta olsa da
   sayılar aynı ritimde, birbirine orantılı aralıklarla dizilir. Alt sınırı tablonun
   `min-width`i korur (dar ekranda sütunlar ezilmez, tablo kaydırılır). */
table.inv th.n,table.inv td.n{width:auto}
table.inv th.n{white-space:normal;vertical-align:bottom;line-height:1.3;hyphens:auto}
/* Bir hücrede alt açıklama olunca (ör. "10/10 depoda sayıldı") satır iki satırlık olur ve
   ortalanan diğer rakamlar başlıklarının altından kayardı. Hücreler ÜSTTEN hizalanır:
   her rakam kendi başlığının hemen altında, aynı ilk satırda durur; açıklama altına iner. */
table.inv td{vertical-align:top}
table.inv td .sub2{margin-top:.1rem}
/* İlk sütun (palet türü) oransal: tablo genişledikçe o da büyür, ama sayısal sütunları
   ezmeyecek bir alt sınırı vardır. */
table.inv th:first-child,table.inv td:first-child{width:22%;min-width:11rem}
@media (max-width:560px){
  table.dc th.n,table.dc td.n{width:5.4rem}
  table.dc th:first-child,table.dc td:first-child{min-width:8.5rem}
  table.inv th:first-child,table.inv td:first-child{width:26%;min-width:8.5rem}}
/* 8.9-F (kullanıcı seçimi 19.09): kalem adı = 4 px ince renk şeridi + ad. Çerçeveli rozet KALDIRILDI.
 * Şerit 4×23 px, 2 px yuvarlatılmış; şerit ile ad arası 11 px; ad 16 px / 650 ağırlık / -0.005em, tek satır.
 * Renk kalemin kendi verisinden gelir (kiracı verisi), sınıf sabit kalır. */
.item{display:inline-flex;align-items:center;gap:11px;min-width:0;max-width:100%}
.item-bar{flex:0 0 auto;width:4px;height:23px;border-radius:2px;background:var(--grp-line)}
/* 8.10-C3 (bu turun kontrast ölçümünde çıktı): kalem şeridinin rengi KİRACI VERİSİDİR (8.9-F6) — koyu yüzeyde
 * bugünkü standart renkler yüzeye karşı 2,4–3,0 kalıyor, yani 3:1 eşiğinin altında. Rengi değiştirmek kiracının
 * seçimini bozardı; bunun yerine koyu yüzeylerde şeridin KENARI çiziliyor: yarı saydam beyaz tel çizgi yüzeye
 * karşı 4,2 verir ve HANGİ renk seçilirse seçilsin şeridin sınırı görünür kalır. Açık temalarda gerek yok. */
:root:not([data-theme]) .item-bar,:root[data-dark] .item-bar{box-shadow:0 0 0 1px rgba(255,255,255,.45)}
.item .item-name{font-size:16px;font-weight:650;letter-spacing:-.005em;color:var(--ink)}
.item-code{font-family:var(--f-m);font-size:var(--fs-xs);color:var(--ink-3)}
table .item .item-name{font-size:var(--fs-sm)}   /* tabloda satır yüksekliği bozulmasın */

/* 8.9-C2/C3: kalem ve depo adı TEK satır — sığmazsa üç noktayla kısalır, tam ad `title` balonunda kalır. */
.item-name,.depot-name{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
td.strong{color:var(--ink);font-weight:600}
.sub2{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:400}

/* Depo görevlisinin günlük iş listesi: telefonda tek sütun, geniş ekranda iki sütun.
   Renk kodu doğrudan aciliyettir — kırmızı: bugün yapılmalı, sarı: sırada, yeşil: bilgi. */
.todos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem}
@media (max-width:560px){.todos{grid-template-columns:1fr}}
.todo{border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--radius);
  padding:.7rem .8rem;display:flex;flex-direction:column;gap:.35rem;background:var(--surface)}
.todo-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.todo-h b{font-size:var(--fs-sm)}
.todo.bad{border-left-color:var(--bad)}
.todo.warn{border-left-color:var(--warn)}
.todo.ok{border-left-color:var(--good)}

.tag{display:inline-flex;align-items:center;gap:.28rem;font-family:var(--f-m);font-size:var(--fs-xs);padding:.16rem .46rem;border-radius:var(--radius-sm);white-space:nowrap;font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.t-open{background:var(--warn-soft);color:var(--warn)}
.t-ok{background:var(--good-soft);color:var(--good)}
.t-bad{background:var(--bad-soft);color:var(--bad)}
.t-neutral{background:var(--surface-2);color:var(--ink-3)}
.t-acc{background:var(--accent-soft);color:var(--accent)}
.t-recv{background:var(--recv-soft);color:var(--recv)}
.t-pay{background:var(--pay-soft);color:var(--pay)}
.chip{display:inline-block;font-family:var(--f-m);font-size:var(--fs-xs);padding:.1rem .38rem;border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--ink-3);margin-right:.22rem}
.chip.t{border-color:var(--accent);color:var(--accent)}

.filters{display:flex;gap:.34rem;flex-wrap:wrap;align-items:center}
.filters input,.filters select{min-height:var(--ctl-h);padding:.32rem .5rem;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:var(--fs-xs)}
.fbtn{padding:.28rem .6rem;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:var(--fs-xs);color:var(--ink-3);background:var(--surface);transition:border-color .1s ease,color .1s ease}
.fbtn:hover{border-color:var(--line-2);color:var(--ink-2)}
.fbtn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
/* 8.8-B10 (QA 19.09): telefonda süzgeç çipleri ve formdaki yön düğmeleri 30 px kalıyordu — dokunma alanı ≥ 44 px. */
@media (max-width:820px){.fbtn{min-height:44px;padding:.4rem .8rem;display:inline-flex;align-items:center}}

/* Sayısal giriş alanları (açılış/sayım adet kutuları): TEK genişlik ve TEK görünüm — önceden
 * çıplak (stilsiz) tarayıcı varsayılanıyla, 110/120px karışık satır içi stil olarak
 * tekrarlanıyordu (023 tutarlılık geçişi); artık formlardaki girişlerle aynı dilde. */
.qtynum{width:7rem;padding:.34rem .5rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}

.note{border-left:3px solid var(--line-2);background:var(--surface-2);padding:.55rem .75rem;font-size:var(--fs-sm);color:var(--ink-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.note.warn{border-color:var(--warn);background:var(--warn-soft)}
.note.bad{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.note.good{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.note.acc{border-color:var(--accent);background:var(--accent-soft)}

/* M-P5: şoför kimlik kartı — formdan bağımsız, açık ve kolay taranan kimlik özeti. */
.drv-idcard{background:linear-gradient(135deg,var(--good-soft),var(--surface));color:var(--ink);
  border:1px solid var(--line);border-left:5px solid var(--sidebar);border-radius:var(--radius);
  padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden;box-shadow:var(--shadow-sm)}
.drv-idcard-person{display:flex;flex-direction:column;gap:.08rem;padding:.72rem 1rem;
  background:var(--toast-bg);color:var(--on-dark)}
.drv-idcard-person .drv-idcard-label{color:var(--on-dark-2)}   /* 80-10: kart lacivert (--toast-bg) kaldı; etiket koyu yüzey üstü ikincil metin, açık yan menü jetonu DEĞİL */
.drv-idcard-name{font-family:var(--f-d);font-size:var(--fs-xl);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.drv-idcard-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;padding:.75rem 1rem .9rem}
.drv-idcard-row{display:flex;flex-direction:column;gap:.12rem;min-width:0;padding:.55rem .65rem;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);box-shadow:0 1px 2px var(--card-shadow)}
.drv-idcard-row:last-child{margin-left:.35rem}
.drv-idcard-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.drv-idcard-value{font-size:var(--fs-lg);font-weight:700}
@media (max-width:560px){.drv-idcard-rows{grid-template-columns:1fr}.drv-idcard-row:last-child{margin-left:0}}

.form{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.form label,.f1{display:flex;flex-direction:column;gap:.2rem;font-size:var(--fs-xs);color:var(--ink-3)}
/* font-size EN AZ 16px (1rem, kök font-size 16px) — gerçek iPhone testinde kanıtlanan bulgu:
 * .86rem (13.76px) iOS Safari'nin otomatik-yakınlaştırma EŞİĞİNİN (16px) altındaydı, bu yüzden
 * her form alanına odaklanınca sayfa KENDİLİĞİNDEN büyüyordu, kullanıcı elle küçültmek zorunda
 * kalıyordu. Çözüm pinch-zoom'u KAPATMAK (viewport'a user-scalable=no/maximum-scale eklemek,
 * bir erişilebilirlik ihlali) DEĞİL — tetikleyen küçük yazı boyutunun kendisi büyütüldü. */
.form input,.form select,.form textarea,.f1 input,.f1 select,.f1 textarea{min-height:var(--ctl-h);padding:.42rem .55rem;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:1rem}   /* 80-2 istisna: 1rem = 16px, iOS Safari otomatik yakınlaştırma eşiği (ölçekte 16 yok; test mobile-usability-ui) */
.form .wide{grid-column:1/-1}
.small.good{color:var(--good)}
.small.bad{color:var(--bad)}

/* M-P3: parola göster/gizle */
.pwrow{display:flex;gap:.4rem;align-items:center}
.pwrow input{flex:1;min-width:0}

/* M-P3: belge fotoğrafı — ayrı "kamerayla çek" / "galeriden seç" düğmeleri. Görünür buton bir
   <span>, gerçek <input type=file> onun İÇİNDE görünmez konumlandırılır (tıklama input'a düşer;
   erişilebilir native dosya seçici davranışı korunur, ekstra JS/aria gerekmez). */
.doc-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.filebtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;cursor:pointer}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}

/* M-P3: aranabilir müşteri seçimi */
.cust-results{display:flex;flex-direction:column;gap:.15rem;max-height:11rem;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-1)}
.cust-opt{display:block;width:100%;text-align:left;background:none;border:none;padding:.32rem .4rem;
  border-radius:var(--radius-sm);font:inherit;color:var(--ink);cursor:pointer}
.cust-opt:hover,.cust-opt:focus-visible{background:var(--accent-soft)}
/* M-P4: bir müşteri seçilince arama/liste yerine gösterilen belirgin kart. */
.cust-selected-card{grid-column:1/-1;border:1px solid var(--good);background:var(--good-soft);
  border-radius:var(--radius-sm);padding:.5rem .6rem;color:var(--good)}

/* M-P4: çevrimdışı formda BÜYÜK, zorunlu Giriş/Çıkış seçimi — hiçbir yön sessizce varsayılmaz;
   ikisi de "on" değilken düğmeler nötr (dolgusuz) kalır, kullanıcı bunu net görür. */
.dirfield{grid-column:1/-1;display:flex;flex-direction:column;gap:.3rem}
.dirlabel{font-size:var(--fs-xs);color:var(--ink-3)}
.dirlabel .req{color:var(--bad)}
.dirchoice{display:flex;gap:.6rem}
.dirbtn{flex:1;padding:.85rem .6rem;font-size:var(--fs-md);font-weight:700;border-radius:var(--radius-sm);
  border:2px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
/* DÜZELTME: Giriş/Çıkış ikisi de normal, eşdeğer işlem türüdür — biri "başarı" (yeşil) biri
   "hata" (kırmızı) DEĞİLDİR. Seçili durum artık iki NÖTR ama birbirinden ayırt edilebilir
   renkle gösterilir (teal/accent — koyu gri); asıl anlam ok+metinde (↗ Çıkış / ↙ Giriş) taşınır,
   `queueDirTag` (views.js) ile AYNI renk eşlemesi — tutarlılık için. */
.dirbtn.out.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dirbtn.in.on{border-color:var(--ink-2);background:var(--surface-2);color:var(--ink)}
/* 027: teslim alma sonucu seçimi — AYNI büyük/zorunlu radiogroup deseni (hiçbiri sessizce
   varsayılmaz). Burada "başarı/hata" anlamı GERÇEKTEN var (`.dirbtn.out/in`'in aksine),
   bu yüzden good/warn/bad renkleri kasıtlı. */
.dirbtn.full.on{border-color:var(--good);background:var(--good-soft);color:var(--good)}
.dirbtn.partial.on{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.dirbtn.failed.on{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}

.drawer{position:fixed;inset:0;background:var(--overlay);display:flex;justify-content:flex-end;z-index:40}
.drawer[hidden]{display:none}
.dpanel{width:min(560px,100%);background:var(--surface);height:100%;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.9rem;border-left:1px solid var(--line)}
.dpanel h2{font-family:var(--f-d);font-size:var(--fs-lg);margin:0}
/* Demo bulgusu: flex sütun içindeki çocuklar VARSAYILAN olarak küçülebilir (flex-shrink:1) —
 * toplam içerik konteynerden uzun olunca büyük bir bölüm (ör. özet tablosu) doğal boyutunun
 * çok altına sıkıştırılıyor, taşma hiç oluşmuyor (scrollHeight === clientHeight) ve çekmece
 * kaydırılamıyordu; sıkıştırılan bölümün içeriği görünmez oluyordu. Hiçbir çocuk küçülmesin —
 * kaydırma gerçek taşmaya dayansın. */
.dpanel>*{flex-shrink:0}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  position:sticky;top:-1.1rem;background:var(--surface);z-index:1}

.tl{display:flex;flex-direction:column;gap:var(--sp-2);border-left:2px solid var(--line);padding-left:.85rem;margin-left:.3rem}
.tl .ev{position:relative;font-size:var(--fs-xs);color:var(--ink-2)}
.tl .ev::before{content:"";position:absolute;left:-1.19rem;top:.42rem;width:8px;height:8px;border-radius:50%;background:var(--line-2);border:2px solid var(--surface)}
.tl .ev.acc::before{background:var(--accent)}
.tl .ev.bad::before{background:var(--bad)}
.tl .ev.good::before{background:var(--good)}
.tl .ev b{display:block;color:var(--ink);font-size:var(--fs-sm)}
.tl .ev time{font-family:var(--f-m);font-size:var(--fs-xs);color:var(--ink-3)}
.tl .ev .diff{font-family:var(--f-m);font-size:var(--fs-xs);color:var(--ink-3);background:var(--surface-2);border-radius:var(--radius-sm);padding:.2rem .4rem;display:block;margin-top:.2rem;white-space:pre-wrap}

.login{min-height:100vh;display:grid;place-items:center;padding:var(--sp-6);background:
  radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 60%), var(--ground)}
.loginbox{width:min(920px,100%);display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:820px){.loginbox{grid-template-columns:1fr}}
.lp-page{width:min(1280px,100%);display:grid;gap:var(--sp-5);min-width:0}
@media (min-width:821px){
  .loginbox{width:min(1200px,100%)}
  .lp-page .pb{padding:1.4rem}
  .lp-page .lp-title{font-size:var(--fs-3xl);line-height:1.25}
  .lp-page .lp-sub,.lp-page .lp-benefit span{font-size:var(--fs-md);line-height:1.6}
  .lp-page .lp-benefit b,.lp-page h2{font-size:var(--fs-lg)}
  .lp-page .small,.lp-page .note,.lp-page .btn{font-size:var(--fs-md)}
  .lp-page .btn{min-height:44px}
  .lp-page .plans{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-4)}
  .lp-page .pc-name{font-size:var(--fs-lg)}
  .lp-page .pc-price{font-size:var(--fs-2xl)}
  .lp-page .pc-per,.lp-page .pc-limit,.lp-page .pc-contract,.lp-page .pc-trial,.lp-page .pc-quickpick,.lp-page .pc-annual-total,.lp-page .pc-annual-savings{font-size:var(--fs-md);line-height:1.5}
}
.lp-hero .pb{padding-top:.2rem}
.lp-title{font-size:var(--fs-xl);line-height:1.25;margin:.1rem 0 .5rem;font-family:var(--f-d)}
.lp-sub{color:var(--ink-3);margin:0 0 .8rem;line-height:1.5}
.lp-ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.lp-benefits{display:grid;gap:.9rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.lp-benefits{grid-template-columns:1fr}}
.lp-benefit b{display:block;font-size:var(--fs-sm);margin-bottom:var(--sp-1);font-family:var(--f-d)}
.lp-benefit span{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.45}
.linklike{border:none;background:none;padding:0;font-size:var(--fs-xs);color:var(--accent);text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linklike:hover{color:var(--accent-strong);text-decoration:underline}
.note .linklike,.note a,.pb .note .acc{color:var(--accent-strong)}   /* surface-2 zemininde vurgu metni accent-strong (accent 4,39 < 4,5) */
.acctrow{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.5rem .6rem;width:100%;text-align:left}
.acctrow:hover{border-color:var(--accent)}
.acctrow b{font-size:var(--fs-sm);font-family:var(--f-d)}
.acctrow span{display:block;font-size:var(--fs-xs);color:var(--ink-3)}

.legend{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-3);align-items:center}
.legend .k{display:inline-flex;align-items:center;gap:.3rem;padding:.14rem .45rem;border-radius:var(--radius-pill);background:var(--surface-2)}
.legend .sw{width:9px;height:9px;border-radius:var(--radius-sm);display:inline-block}

.bal{font-family:var(--f-m);font-variant-numeric:tabular-nums;font-weight:600}
.bal.recv{color:var(--recv)}.bal.pay{color:var(--neg)}.bal.zero{color:var(--ink)}   /* 80-12: eksi belirgin kırmızı, artı yeşil, sıfır ana metin rengi */
/* 8.9-E (kullanıcı kararı 19.09): İŞARET RENGİ KURALI TEK YERDE. Sayıyı basan her bileşen değerin işaretine göre
 * sınıfı kendisi seçer (`ui.js:balCls` → recv/pay/zero; kanonik eşanlamlıları .pos/.neg/.zero), hiçbir ekranda
 * satır içi renk yazılmaz. Kural sayının yerine bakmaz: tablo, pano kutusu, rozet, çekmece, telefon, tanıtım panosu. */
.pos,.bal.pos{color:var(--recv)}.neg,.bal.neg{color:var(--neg)}
.kpi .v.recv,.kpi .v.pos{color:var(--recv)}.kpi .v.pay,.kpi .v.neg{color:var(--neg)}

.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:var(--toast-bg);color:var(--on-dark);padding:.6rem .9rem;border-radius:var(--radius-sm);font-size:var(--fs-sm);box-shadow:0 12px 30px -12px rgba(0,0,0,.6);z-index:60;max-width:90vw}
.toast[hidden]{display:none}

/* Mutlak oturum bitişine birkaç dakika kala — kalıcı, kapatılamaz uyarı (toast'ın aksine
 * kendiliğinden kaybolmaz), formda ne yapıyorsa görebilsin diye ÜSTTE, `role="alert"` ile
 * ekran okuyucuya da duyurulur. */
.sesswarn{position:fixed;top:0;left:0;right:0;background:var(--warn-soft);color:var(--warn);padding:.55rem 1rem;font-size:var(--fs-sm);font-weight:600;text-align:center;z-index:70;border-bottom:1px solid var(--warn)}
.sesswarn[hidden]{display:none}

.pillrow{display:flex;gap:.3rem;flex-wrap:wrap}
.small{font-size:var(--fs-xs);color:var(--ink-3)}
.mono{font-family:var(--f-m)}
.right{margin-left:auto}
.spread{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.testrow{display:flex;align-items:flex-start;gap:.55rem;padding:.45rem .2rem;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.testrow:last-child{border-bottom:0}
.testrow .st{font-family:var(--f-m);font-size:var(--fs-xs);padding:.1rem .38rem;border-radius:var(--radius-sm);white-space:nowrap}
.st.pass{background:var(--good-soft);color:var(--good)}
.st.fail{background:var(--bad-soft);color:var(--bad)}
.ph-photo{width:56px;height:42px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-size:var(--fs-lg);color:var(--ink-3)}
button.ph-photo{font:inherit;cursor:pointer}
button.ph-photo:hover{background:var(--surface-3,var(--surface-2))}
/* Giriş/çıkış kanıt belgesi (Lieferschein/Palettenschein) önizlemesi. */
.doc-preview{max-width:100%;max-height:220px;border-radius:var(--radius-sm);border:1px solid var(--line);display:block;margin-top:.4rem;object-fit:contain}
.doc-preview.sm{max-height:28px;max-width:40px;display:inline-block;vertical-align:middle;margin:0 .35rem 0 0;border-radius:var(--radius-sm)}
.movement-proof{margin-top:var(--sp-4);padding-top:.85rem;border-top:1px solid var(--line)}
.doc-open-card{display:flex;align-items:center;gap:.7rem;margin-top:.45rem;padding:.7rem .8rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:inherit;text-decoration:none}
.doc-open-card:hover{border-color:var(--accent);background:var(--surface-3,var(--surface-2))}
.doc-open-card small{display:block;color:var(--ink-3);margin-top:.15rem}
.doc-open-icon{min-width:42px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);
  background:var(--accent);color:white;font-size:var(--fs-xs);font-weight:700}

/* ─────────────────────────────────── platform (sistem sahibi) şeridi
   Başkasının verisine bakıldığı EKRANDAN OKUNMALIDIR: şerit her ekranın üstünde durur,
   salt okunurken sakin, düzeltme modunda uyarı renginde olur. */
.platbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:.55rem .9rem;margin:0 0 .9rem;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--surface-2);font-size:var(--fs-sm)}
.platbar.on{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,var(--surface-2))}
.platbar .right{margin-left:auto}
.panel.plat .ph{background:var(--surface-2)}
@media (max-width:560px){.platbar{font-size:var(--fs-xs)}.platbar .right{margin-left:0;width:100%}}

/* Tablo içindeki tıklanabilir rakam: düğme gibi görünmez, sayı gibi durur — ama altı
   çizilidir ve imleç değişir, çünkü arkasında kırılım vardır (ana pano alacak/borç). */
.linknum{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  font-family:var(--f-m);font-variant-numeric:tabular-nums;font-weight:600;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.linknum.recv{color:var(--recv)}
.linknum.pay{color:var(--neg)}
.linknum:hover{text-decoration-style:solid}

/* ─────────────────────────────────── yapay zeka analisti başlığı (M-D3)
   Öneri veren tarafın kim olduğu EKRANDAN okunmalı: görsel + unvan + tek cümlelik iş tanımı,
   altında kararın merkezde olduğunu söyleyen not. Görsel satır içi SVG'dir (CSP dış kaynağa
   izin vermez) ve rengini metinden alır, böylece koyu/açık temada da okunur. */
.aihead{display:flex;align-items:flex-start;gap:.9rem;padding:.8rem .95rem;margin:0 0 .9rem;
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface-2)}
.aihead .ai-ava{width:48px;height:48px;flex:0 0 48px;color:var(--accent)}
.aihead-t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.aihead-t b{font-size:var(--fs-md)}
.aihead-note{font-size:var(--fs-xs);color:var(--ink-3);border-left:3px solid var(--line-2);
  padding-left:var(--sp-2);margin-top:var(--sp-1)}
.aihead-x{margin-left:auto;align-self:center}
@media (max-width:560px){.aihead{gap:.6rem;padding:.65rem .7rem}
  .aihead .ai-ava{width:38px;height:38px;flex:0 0 38px}
  .aihead-x{margin-left:0;width:100%}}

/* Ana panonun üstündeki dört özet kartı: tıklanabilir olduğu ANLAŞILMALI ama kart sadeliği
   bozulmamalı — düğme sıfırlanır, imleç ve hafif bir yükselme ipucu kalır. */
.kpi.klink{cursor:pointer;text-align:left;font:inherit;width:100%;
  transition:border-color .12s ease, transform .12s ease}
.kpi.klink:hover{border-color:var(--accent)}
.kpi.klink:active{transform:translateY(1px)}
.kpi.klink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Akıllı Denetim (023): KPI bir bulgu filtresini AÇIKTA tutuyorsa (.on) seçili görünür —
   .fbtn.on ile aynı görsel dil, yalnız kart biçimine uyarlanmış. */
.kpi.klink.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.kpis-top{margin:0 0 .9rem}

/* Tür bazlı stok kartı: tek bir toplam yerine satırlar. Rakamlar sağa yaslı ve aynı
   genişlikte (tabular-nums) — göz aşağı doğru rahatça tarasın. */
.kpi.klist{gap:.35rem}
.klist-r{display:flex;flex-direction:column;gap:.15rem;margin:.15rem 0}
.klist-i{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.klist-n{font-size:var(--fs-xs);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klist-v{font-family:var(--f-d);font-weight:700;font-size:var(--fs-md);font-variant-numeric:tabular-nums}

/* ─────────────────────────────────── ana pano bölümleri (M-D5)
   Renk YALNIZCA durum göstergesidir: yeşil sorun yok, sarı bakılmalı, kırmızı kritik.
   Mevcut kart/panel dili korunur; yeni bir renk paleti getirilmez. */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.4rem;
  background:var(--ink-3);vertical-align:middle}
.dot.ok{background:var(--good)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.dot.idle{background:var(--line-2)}

/* Hızlı işlemler: düğmeler tek satırda akar, dar ekranda alt alta iner. */
.qa{flex-wrap:wrap;gap:.45rem}

/* Bildirim satırı: sol durum noktası, ortada başlık, sağda sayı. Tamamı tıklanabilir. */
.nlist{display:flex;flex-direction:column;gap:.35rem}
.nrow{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;font:inherit;
  background:none;border:1px solid transparent;border-radius:var(--radius);padding:.5rem .6rem;cursor:pointer}
.nrow:hover{background:var(--surface-2);border-color:var(--line)}
.nrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nrow-t{color:var(--ink-2)}
.nrow-v{margin-left:auto;font-family:var(--f-d);font-variant-numeric:tabular-nums;font-size:var(--fs-md)}

/* Katlanabilir ayrıntı: başlık bir düğmedir; kapalıyken tablo hiç çizilmez. */
.fold{margin:0 0 .9rem}
.foldh{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;font:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .85rem;
  cursor:pointer;box-shadow:var(--shadow)}
.foldh:hover{border-color:var(--accent)}
.foldh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.foldc{font-family:var(--f-m);color:var(--ink-3)}
.foldh .small{margin-left:auto}

/* Özet grafikler: dört küçük kart, her biri tıklanabilir. Grafikler satır içi SVG'dir. */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.65rem;margin:.9rem 0}
.chartcard{display:flex;flex-direction:column;gap:.3rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:.75rem .85rem;box-shadow:var(--shadow);
  text-align:left;font:inherit;cursor:pointer;transition:border-color .12s ease}
.chartcard:hover{border-color:var(--accent)}
.chartcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chartcard .l{font-size:var(--fs-xs);color:var(--ink-3)}
.chartcard .v{font-family:var(--f-d);font-weight:700;font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
.chartcard .d{font-family:var(--f-m);font-size:var(--fs-xs);color:var(--ink-3)}
.chart{width:100%;height:46px;display:block}
.ratio{height:8px;border-radius:var(--radius-sm);background:var(--surface-2);overflow:hidden}
.ratio span{display:block;height:100%;background:var(--bad)}
.hbars{display:flex;flex-direction:column;gap:.2rem}
.hbar{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-xs)}
.hbar-n{font-family:var(--f-m);color:var(--ink-3);width:3.4rem;flex:0 0 3.4rem}
.hbar-b{flex:1;height:6px;border-radius:var(--radius-sm);background:var(--surface-2);overflow:hidden}
.hbar-b i{display:block;height:100%;background:var(--accent)}
.hbar-v{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.platform-readable h2{font-size:var(--fs-2xl);font-weight:700;line-height:1.35}
.platform-readable td{font-size:var(--fs-lg);line-height:1.55}
.platform-readable .strong{font-size:var(--fs-xl);font-weight:700}
.platform-readable .small,.platform-readable .sub2{font-size:var(--fs-lg);font-weight:600}
.platform-readable .btn{font-size:var(--fs-lg);font-weight:600;min-height:44px}
.application-details summary{cursor:pointer;font-size:var(--fs-lg);font-weight:700;padding:10px 0;min-height:44px}
.application-details dl{min-width:220px;max-width:380px;white-space:normal;overflow-wrap:anywhere}
.platform-readable th{font-size:var(--fs-lg);font-weight:700;line-height:1.5}
.application-details dt{font-weight:700;margin-top:12px}
.application-details dd{margin:3px 0 0;font-size:var(--fs-lg)}
/* [K-13-U2] e-posta bağlantısından açılan başvuru satırı */
tbody tr.app-focus{background:var(--accent-soft);outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:560px){.charts{grid-template-columns:1fr}}
.phone-country-field,.plate-country-field{align-items:end;min-width:0}
.form>.phone-country-field,.form>.plate-country-field{grid-column:1/-1}
.phone-country-field>label,.plate-country-field>label{min-width:0}
.phone-country-field input,.phone-country-field select,
.plate-country-field input,.plate-country-field select{width:100%;min-width:0}
.license-plate{display:inline-flex;align-items:stretch;min-height:28px;border:2px solid #20242b;border-radius:var(--radius-sm);background:#f8f8f5;color:#111;overflow:hidden;box-shadow:inset 0 0 0 1px #d8d8d2;font:700 13px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;vertical-align:middle}
.license-country{min-width:31px;padding:3px 5px;background:#0b4aa2;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:var(--fs-xs);letter-spacing:0}
.license-flag{font-size:var(--fs-xs);line-height:1}
.license-number{display:flex;align-items:center;padding:4px 9px;white-space:nowrap}
.license-plate.country-ch .license-country{background:#c8202f}
.license-plate.country-tr .license-country{background:#174f9e}
.license-plate.country-gb .license-country{background:#163f78}

/* ═══════════════════════════════════════ 80-12 yüzey kuralları (kullanıcı onayı 17.09.2026, yeşil tasarım)
   1) Zemin metalik: dikey --ground-hi→--ground geçişi + çok silik dikey fırça çizgileri (beyaz %26) + hafif çapraz parlama
      (beyaz %32). Yalnız beyaz katman; metin zemine değil kutulara/tablolara yazılır, kontrast düşmez. Azaltılmış saydamlık /
      yüksek kontrast isteğinde düz --ground. Koyu temada beyaz katman yok (yalnız geçiş).
   2) Bütün kutular/paneller/kartlar/çekmeceler açık mavi (--box-hi→--box, çerçeve --box-line, üstte 1 px iç ışık).
   3) BEYAZ yalnız veri tabloları, yazı alanları, PIN tuşları, ikincil/tehlike düğmeleri.
   4) Rakamlar: eksi --neg, artı --recv, sıfır --ink (.bal/.linknum, yukarıda).
   5) Otomatik pano durumu: normal mavi şerit, dikkat sarı, acil kırmızı — yalnız kodda VAR OLAN durum sınıfları (.kpi.warn/.bad,
      .todo.warn/.bad, .note.warn/.bad, .t-open/.t-bad); yeni eşik yok. Küçük etiket .st-lab (views.js durumKarti/kart).
   6) Notlar: uyarı sarı, hata kırmızı, bilgi mavi, başarı yeşil. */
body{background:
  linear-gradient(118deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.32) 46%,rgba(255,255,255,0) 62%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 1px,rgba(255,255,255,0) 1px 3px),
  linear-gradient(180deg,var(--ground-hi) 0,var(--ground) 420px,var(--ground) 100%)}
/* 8.10: koyu YÜZEY kuralları artık tema adı saymaz — prefs.js seçili tema koyu aileden olduğunda (ya da "Sistem"
 * seçiliyken cihaz koyu moddayken) <html data-dark> koyar. Yeni bir koyu tema eklendiğinde burası değişmez. */
:root:not([data-theme]) body,:root[data-dark] body{background:linear-gradient(180deg,var(--ground-hi) 0,var(--ground) 420px,var(--ground) 100%)}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){body,:root:not([data-theme]) body,:root[data-dark] body{background:var(--ground)}}
.login{background:none}
/* üst şerit ve yan menü koyu yeşil (hafif üst ışık, animasyon yok) */
.top{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 55%),var(--sidebar);color:var(--sidebar-ink);border-bottom-color:rgba(0,0,0,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.top h1{color:var(--on-dark)}.top .sub{color:var(--sidebar-ink-2)}
.side{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%),var(--sidebar);box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
.side :focus-visible,.top :focus-visible{outline-color:var(--sidebar-ink)}   /* koyu yeşil üstünde odak halkası açık (≥ 3) */
.nav button.on:focus-visible{outline-color:var(--nav-on-ink)}
/* kutular açık mavi */
.panel,.kpi,.chartcard,.todo,.foldh,.dpanel,.plancard,.acctrow,.aihead,.platbar,.drv-idcard,.doc-open-card{background:linear-gradient(180deg,var(--box-hi),var(--box));border-color:var(--box-line);box-shadow:var(--box-inset),var(--shadow)}
.ph{background:rgba(255,255,255,.5);border-bottom-color:var(--box-line)}
.dpanel .dhead{background:var(--box-hi)}
.nrow:hover{background:rgba(255,255,255,.55);border-color:var(--box-line)}
.plan-radio:checked+.plancard{border-color:var(--accent);background:var(--accent-soft)}
/* beyaz: veri tabloları, yazı alanları, ikincil/tehlike düğmeleri (zaten --surface), PIN tuşları */
.tw{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{background:var(--surface)}
tbody tr.clickable:hover td{background:var(--accent-soft)}
/* notlar: bilgi mavi, uyarı sarı, hata kırmızı, başarı yeşil */
.note{background:var(--box);border:1px solid var(--box-line);border-left:4px solid var(--st-ok-bar);color:var(--ink-2);border-radius:var(--radius-sm)}
.note.warn{background:var(--st-warn-bg);border-color:var(--st-warn-line);border-left-color:var(--st-warn-bar);color:var(--st-warn-ink)}
.note.bad{background:var(--st-crit-bg);border-color:var(--st-crit-line);border-left-color:var(--st-crit-bar);color:var(--st-crit-ink)}
.note.good{background:var(--accent-soft);border-color:var(--recv-soft);border-left-color:var(--recv);color:var(--recv)}
.note.acc{background:var(--accent-soft);border-color:var(--recv-soft);border-left-color:var(--accent);color:var(--ink-2)}
/* durum etiketleri (bekleyen sarı, sorun kırmızı) */
.t-open{background:var(--st-warn-lab);color:var(--st-warn-ink)}
.t-bad{background:var(--st-crit-lab);color:var(--st-crit-ink)}
/* otomatik pano durumu: sol şerit + küçük etiket */
.kpi.klink,.todo.ok{border-left:5px solid var(--st-ok-bar)}
.kpi.warn,.todo.warn{background:linear-gradient(180deg,var(--st-warn-hi),var(--st-warn-bg));border-color:var(--st-warn-line);border-left:5px solid var(--st-warn-bar)}
.kpi.bad,.todo.bad{background:linear-gradient(180deg,var(--st-crit-hi),var(--st-crit-bg));border-color:var(--st-crit-line);border-left:5px solid var(--st-crit-bar)}
.kpi.warn .v{color:var(--st-warn-ink)}.kpi.bad .v{color:var(--st-crit-ink)}
.st-lab{display:inline-block;align-self:flex-start;font-size:var(--fs-xs);font-weight:700;line-height:1.4;border-radius:var(--radius-pill);padding:1px 8px;background:var(--st-ok-bg);color:var(--st-ok-ink);margin-bottom:2px}
.kpi.warn .st-lab,.todo.warn .st-lab{background:var(--st-warn-lab);color:var(--st-warn-ink)}
.kpi.bad .st-lab,.todo.bad .st-lab{background:var(--st-crit-lab);color:var(--st-crit-ink)}
.todo .todo-h{align-items:flex-start}
/* ana düğme: koyu yeşil, üstte ince iç ışık (parlama animasyonu yok) */
.btn.pri{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0)),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.btn.pri:hover{background:var(--accent-strong);box-shadow:none}
.btn.pri[disabled]{box-shadow:none}
/* koyu tema ayarları */
:root:not([data-theme]) .ph,:root[data-dark] .ph{background:rgba(255,255,255,.04)}
:root:not([data-theme]) .nrow:hover,:root[data-dark] .nrow:hover{background:rgba(255,255,255,.06)}

/* ═══════════════════════════════════════ 80-13 giriş ekranı ve bağlı akışlar (kullanıcı onayı 17.09.2026)
   Kaynak: Claude outputs/PalKonto_Giris_Sayfasi_Demo.html. Masaüstü iki sütun (sol açık mavi tanıtım, sağ açık mavi kutu);
   ≤ 860 px tek sütun ve fayda kartları gizli; ≤ 560 px 46 px dokunma alanı. Alanlar/akışlar aynı, yalnız görünüm. */
.loginbox.lg-shell{width:min(1180px,100%);grid-template-columns:1.05fr 1fr;gap:0;border:1px solid var(--box-line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(180deg,var(--box-hi),var(--box))}
.lg-brand{background:linear-gradient(160deg,var(--box-hi),var(--box) 60%,var(--box-deep));border-right:1px solid var(--box-line);padding:40px 44px;display:flex;flex-direction:column;gap:18px;min-width:0}
.lg-logo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lg-mark{width:36px;height:36px;border-radius:9px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-family:var(--f-d);font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.lg-logo b{font-family:var(--f-d);font-size:var(--fs-2xl);letter-spacing:-.02em;color:var(--ink)}
.lg-app{font-family:var(--f-m);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);width:100%}
.lg-title{font-family:var(--f-d);font-size:var(--fs-2xl);line-height:1.25;margin:6px 0 0;max-width:22ch;color:var(--ink)}
.lg-sub{color:var(--ink-2);max-width:44ch;margin:0}
.lg-pills{display:grid;gap:12px;margin-top:4px}
.lg-pill{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--box-line);border-radius:var(--radius);padding:12px 14px}
.lg-pill p{margin:0;min-width:0}.lg-pill b{display:block;font-size:var(--fs-sm);color:var(--ink)}.lg-pill span{font-size:var(--fs-sm);color:var(--ink-2)}
.lg-ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm)}
.lg-side{padding:28px 32px;display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.lg-topline{display:flex;justify-content:flex-end}
.lg-box .pb{padding:26px;gap:14px}
.lg-h{font-family:var(--f-d);font-size:var(--fs-xl);margin:0;color:var(--ink)}
.lg-side .f1{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);gap:.3rem}
.lg-side .f1 input,.lg-side .f1 select{min-height:46px;padding:.5rem .75rem}
.lg-side .btn{font-size:var(--fs-sm);min-height:46px;padding:.5rem 1.1rem}
.lg-side .btn.sm{min-height:36px;padding:.22rem .6rem}
.lg-side .btn.pri.wide{width:100%;font-size:var(--fs-md)}
.lg-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px}
.lg-side .linklike{font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--accent);min-height:44px;display:inline-flex;align-items:center}   /* 19.09 QA: dokunma hedefi 36 → 44 px (bulgu B-4) */
.lg-side .linklike:hover{text-decoration:underline;color:var(--accent-strong)}
.lg-sep{border-top:1px solid var(--box-line)}
.lg-newco{display:grid;gap:10px}.lg-newco b{font-size:var(--fs-sm);color:var(--ink)}
.lg-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.lg-foot{display:flex;justify-content:flex-end}
.lg-foot .linklike{font-size:var(--fs-xs);color:var(--ink-3);font-weight:400}
.lg-steps{display:flex;gap:6px}.lg-steps i{flex:1;height:5px;border-radius:3px;background:var(--box-line)}.lg-steps i.on{background:var(--accent)}
.lg-side .pin6{font-family:var(--f-m);font-size:var(--fs-xl);font-weight:600;letter-spacing:.7em;text-align:center;max-width:14ch;padding-left:1em}
.lg-side .acctrow{background:var(--surface)}
.lg-side .note{font-size:var(--fs-sm)}
.lg-side .plans{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:860px){
  .loginbox.lg-shell{grid-template-columns:1fr}
  .lg-brand{padding:22px 20px;border-right:0;border-bottom:1px solid var(--box-line);gap:10px}
  .lg-pills{display:none}
  .lg-title{font-size:var(--fs-xl)}.lg-sub{font-size:var(--fs-sm)}
  .lg-side{padding:18px 16px}
}
@media (max-width:560px){
  .login{padding:var(--sp-3)}
  .lg-box .pb{padding:18px 14px}
  .lg-side .btn,.lg-side .f1 input,.lg-side .f1 select,.lg-side .langmenu-btn,.lg-side .acctrow{min-height:46px}
  .lg-side .btn.sm{min-height:46px}
}

/* ═══════════════════════════════════════ 80-15a (kullanıcı düzeltmeleri 17.09.2026)
   A) İkincil düğmeler açık-orta yeşil (.btn); ana .btn.pri koyu yeşil AYNEN; .btn.danger kırmızı çerçeveli beyaz.
   B) Yan menü, üst şerit ve koyu yeşil yüzeyler metalik orta yeşil (--sidebar-top → --sidebar + üst ışık çizgisi).
   C) Yan menü sayı rozeti metalik kırmızı, 2 px beyaz halka, ~20 px yükseklik.
   D) Palet türü adları tek sınıfla dolgun (.item-name = .chip.t, .klist-n): Archivo 700, normal harf aralığı, tabular rakam, ink.
   E) Pano/KPI kart başlıkları, değer ve alt açıklama ortalı; kartlar eşit yükseklikte; "Stok ve kayıp özeti" (table.inv) başlık ve
      değerleri ortalı (kullanıcı kararı — diğer tablolarda sayısal sütun sağa hizalı kalır). */
.btn{background:var(--btn-soft);color:var(--btn-soft-ink);border-color:var(--btn-soft-line)}
.btn:hover{background:var(--btn-soft-hover);border-color:var(--btn-soft-line);color:var(--btn-soft-ink)}
.btn.pri{color:var(--on-accent);border-color:var(--accent)}
.btn.danger{background:var(--surface);border-color:var(--bad);color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.acctrow,.foldh{background:linear-gradient(180deg,var(--box-hi),var(--box))}
.side,.top{background:linear-gradient(180deg,var(--sidebar-top) 0%,var(--sidebar) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18)}
.side{background:linear-gradient(180deg,var(--sidebar-top) 0%,var(--sidebar) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset -1px 0 0 rgba(0,0,0,.12)}   /* parlama yalnız 1 px üst ışık çizgisi: metin hiçbir yerde açık tonun üstüne binmez */
.top{background:linear-gradient(180deg,var(--sidebar-top) 0%,var(--sidebar) 100%);border-bottom-color:rgba(0,0,0,.18)}
.brand span{color:var(--sidebar-ink-2)}
.nav button:hover{background:var(--sidebar-hover)}
.nav .badge{background:linear-gradient(180deg,var(--badge-top),var(--badge));color:var(--on-badge);font-family:var(--f-b);font-weight:700;font-size:var(--fs-xs);line-height:16px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);border:2px solid var(--badge-ring);box-shadow:0 1px 2px rgba(0,0,0,.25);text-align:center;font-variant-numeric:tabular-nums;flex:none}
.nav button.on .badge{background:linear-gradient(180deg,var(--badge-top),var(--badge));color:var(--on-badge);border-color:var(--badge-ring)}
.drv-idcard{border-left-color:var(--sidebar)}
.toast,.drv-idcard-person{background:linear-gradient(180deg,var(--sidebar-top),var(--sidebar))}   /* B: toast ve şoför kimlik kartı da metalik orta yeşil */
.item-name,.chip.t,.klist-n{font-family:var(--f-d);font-weight:700;letter-spacing:normal;font-variant-numeric:tabular-nums;color:var(--ink)}
.chip.t{border-color:var(--line-2);background:var(--surface);font-size:var(--fs-sm);padding:.08rem .4rem}
/* E: KPI / gösterge kartları ortalı ve eşit yükseklikte */
.kpis{align-items:stretch}
.kpi{text-align:center;align-items:center;justify-content:center;height:100%}
.kpi .l,.kpi .v,.kpi .d,.kpi .st-lab{text-align:center;text-wrap:balance;width:100%}
.kpi .l{align-self:center}.kpi .st-lab{width:auto;align-self:center}
.kpi.klist{text-align:left;align-items:stretch}.kpi.klist .l,.kpi.klist .d{text-align:left;text-wrap:auto}
.chartcard{text-align:center;align-items:center}.chartcard .l,.chartcard .v,.chartcard .d{text-align:center;text-wrap:balance;width:100%}
.chartcard .v{font-size:25px}
.lp-kpi{text-align:center;align-items:center}
@media (max-width:560px){.kpi .v,.chartcard .v{font-size:22px}}
/* 8.9-D1 (kullanıcı kararı 19.09): SAYI SÜTUNU ORTALANMAZ. "Stok ve kayıp özeti" (table.inv) tablosu
 * 80-x turunda ortalanmıştı; artık her sayı sütunu (başlık dahil) SAĞA, metin sütunu sola hizalı —
 * kural bütün tablolarda aynı, istisna yok. Alt açıklama satırı da rakamla aynı kenarda biter. */
table.inv th,table.inv td{text-wrap:balance}
table.inv th:first-child,table.inv td:first-child{text-align:left;text-wrap:auto}
table.inv td .sub2{text-align:right}

/* 80-15b F: tablo hücresindeki sayı etiketi düğme olduğunda (merkez panosu İnceleme / bekleyen transfer) tıklanabilirliği belli */
.tagbtn{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;min-height:24px}
.tagbtn:hover{text-decoration-style:solid;filter:brightness(.95)}
.tagbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ═══════════════════════════════════════ 80-17a (kullanıcı notu 17.09.2026)
   2) Çekmece kendi genişliğine oturur: geniş ekranda sabit 480 px (inceleme çekmecesi iki sütunlu bilgi+form: 960 px), ≤ 900 px tam
      ekran; içerik kutuları min-width:0, uzun metin kırılır, tablolar kendi yatay kaydırma kabında (.tw), tablo min-width çekmecede
      kalkar (sayfa düzeyinde 560 px kuralı çekmece içinde taşmanın nedeniydi), sayı sütunları sağa hizalı kalır. Sayfada yatay taşma 0. */
.dpanel{width:min(480px,100%);min-width:0;overflow-x:hidden;box-sizing:border-box}
.dpanel:has(.inv-grid){width:min(960px,100%)}
.dpanel:has(.customer-history){width:min(900px,100%)}
.dpanel>*{min-width:0;max-width:100%}
.dpanel .tw{overflow-x:auto;max-width:100%;min-width:0}
.customer-balance-list{display:grid;gap:.65rem;max-height:min(58vh,640px);overflow-y:auto;padding:.1rem}
.customer-balance-card{display:block;width:100%;min-width:0;padding:.8rem .9rem;text-align:left;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);cursor:pointer}
.customer-balance-card:hover,.customer-balance-card:focus-visible{border-color:var(--accent);outline-offset:2px}
.customer-balance-head{display:flex;align-items:start;justify-content:space-between;gap:1rem}
.customer-balance-head .strong{min-width:0;overflow-wrap:anywhere}
.customer-balance-head .bal{flex:none;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.customer-balance-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.55rem 0;
  padding:.5rem 0;border-block:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-2)}
.customer-balance-meta>span{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.customer-balance-meta b{color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.customer-depot-list{display:grid;gap:.25rem}
.customer-depot-line{display:flex;justify-content:space-between;gap:.7rem;font-size:var(--fs-xs);min-width:0}
.customer-depot-line>span:first-child{min-width:0;overflow-wrap:anywhere}
.customer-depot-line small{color:var(--ink-3)}
.customer-depot-line .bal{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:560px){.customer-balance-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.operation-task-list{grid-template-columns:minmax(0,1fr)}
.operation-task-table{min-width:760px;table-layout:fixed}
.operation-task-table th:nth-child(1),.operation-task-table td:nth-child(1){width:20%}
.operation-task-table th:nth-child(2),.operation-task-table td:nth-child(2){width:10rem;text-align:right;font-variant-numeric:tabular-nums}
.operation-task-table th:nth-child(3),.operation-task-table td:nth-child(3){width:auto;white-space:normal;overflow-wrap:break-word}
.operation-task-table th:nth-child(4),.operation-task-table td:nth-child(4){width:9rem;text-align:right}
.customer-account-table{min-width:780px}
.customer-account-table .customer-group-start td{border-top:2px solid var(--line-2)}
.customer-account-table td:first-child{min-width:12rem}
.customer-item-link{display:inline-flex;align-items:center;gap:.4rem;text-align:left;min-height:2.75rem}
.customer-item-link:hover{text-decoration:underline}
.customer-history{display:flex;flex-direction:column;gap:.65rem;min-width:0}
.customer-history .tw{max-width:100%;overflow-x:auto}
.customer-history .customer-movement-table{min-width:1080px;width:100%}
.customer-history .customer-movement-table td{vertical-align:top}
.customer-history-pages{justify-content:space-between;align-items:center}
.dpanel table,.dpanel table.dc,.dpanel table.inv{min-width:0;width:100%}
.dpanel td{overflow-wrap:anywhere}
.dpanel td.n,.dpanel th.n{white-space:nowrap;overflow-wrap:normal;text-align:right}
.dpanel .note,.dpanel .todo,.dpanel .kpi,.dpanel p,.dpanel .small,.dpanel h2,.dpanel h3,.dpanel .filters,.dpanel .chip{overflow-wrap:anywhere;min-width:0;max-width:100%}
.dpanel .kpis{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.dpanel .form{min-width:0}
.dpanel .form label,.dpanel input,.dpanel select,.dpanel textarea,.dpanel .btn{min-width:0;max-width:100%}
.dpanel img,.dpanel svg{max-width:100%;height:auto}
@media (max-width:900px){.dpanel,.dpanel:has(.inv-grid){width:100%;border-left:0}}
@media (max-width:900px){.dpanel:has(.customer-history){width:100%;border-left:0}}

/* ═══════════════ 8.8-A2 (kullanıcı kararı 19.09): çok depolu tablolarda depo blokları arasındaki sınır.
 * Bir deponun satırları bitip diğerininki başlarken o satırın ÜST kenarında 2 px ayırıcı durur. Renk `--field`
 * tonundadır: ince satır çizgisinden açıkça kalın, ama vurgu rengi değildir (göze batmaz, bakınca anlaşılır).
 * Tek sınıf, tek tanım: depo kırılımlı her tabloda `ui.js:markGroups()` ile aynı sınıf kullanılır. */
tr.grp-start>td{border-top:2px solid var(--grp-line)}
tr.grp-start:first-child>td{border-top:0}

/* ═══════════════════════════════════════ 80-17b (1): inceleme çekmecesi — solda bilgi panosu, sağda mevcut form; ≤ 900 px tek sütun (bilgi üstte) */
.inv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1rem;align-items:start;min-width:0}
.inv-info,.inv-form{min-width:0;display:flex;flex-direction:column;gap:.7rem}
.inv-info{background:linear-gradient(180deg,var(--box-hi),var(--box));border:1px solid var(--box-line);border-radius:var(--radius);padding:.85rem;position:sticky;top:2.4rem}
.inv-facts{min-width:0;font-size:var(--fs-sm)}
.inv-facts td{padding:.38rem .5rem;vertical-align:top;border-bottom:1px solid var(--line)}
.inv-facts td:first-child{color:var(--ink-3);white-space:nowrap;width:1%}
.inv-hist{display:flex;flex-direction:column;gap:.35rem}
.inv-ev{border-left:3px solid var(--st-ok-bar);padding:.2rem .5rem;background:var(--surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-sm);display:flex;flex-direction:column}
.inv-ev:first-child{border-left-color:var(--accent)}
@media (max-width:900px){.inv-grid{grid-template-columns:1fr}.inv-info{position:static}}

/* ═══════════════════════════════════════ 80-17 md. 5: sol üst geri oku — tek ortak düğme (.btn.back, data-act="go-back"), 44 px dokunma alanı */
.top-l{display:flex;align-items:center;gap:.6rem;min-width:0}
.btn.back{min-width:44px;min-height:44px;padding:0;font-size:var(--fs-lg);line-height:1;border-radius:var(--radius-sm);flex:none}

/* ─────────────────────────────────── Pilot P1-E: belge deposu (kartlar, yükleme, önizleme)
   8.0 kuralı: kart açık mavi kutu (--box), yazı alanları beyaz, dokunma alanı ≥ 44 px, yatay taşma yok (min-width:0). */
.doc-sec{margin-top:var(--sp-4);padding-top:.85rem;border-top:1px solid var(--line);min-width:0}
.doc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem;min-width:0}
.doc-card{display:flex;align-items:center;gap:.6rem;min-height:56px;padding:.55rem .7rem;text-align:left;font:inherit;cursor:pointer;min-width:0;
  border:1px solid var(--box-line);border-radius:var(--radius-sm);background:linear-gradient(180deg,var(--box-hi),var(--box));color:var(--ink);box-shadow:var(--box-inset)}
.doc-card:hover{border-color:var(--accent)}
.doc-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.doc-card.voided{opacity:.6}
.doc-card.queued{cursor:default;border-style:dashed}
.doc-card-body{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.doc-card-body strong,.doc-card-body small{overflow-wrap:anywhere;min-width:0}
.doc-card-body small{color:var(--ink-3)}
.doc-card-body small.warn{color:var(--warn)}
.doc-card-body small.bad{color:var(--bad)}
.doc-open-icon.q{background:var(--surface-3,var(--surface-2));color:var(--ink-2)}
.doc-up-form{margin-top:.6rem}
.filebtn.doc-up{min-height:44px;min-width:44px;padding:.55rem .9rem}
.doc-progress{display:flex;flex-direction:column;gap:.4rem;margin-top:.4rem}
.doc-prog{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.45rem .6rem;background:var(--surface);min-width:0}
.doc-prog-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.doc-prog-name{font-weight:600;overflow-wrap:anywhere;min-width:0;flex:1}
.doc-prog-txt.good{color:var(--good)}.doc-prog-txt.bad{color:var(--bad)}.doc-prog-txt.warn{color:var(--warn)}
.doc-prog-head .btn.sm{min-height:44px;min-width:44px}
.doc-prog-bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:.35rem}
.doc-prog-bar i{display:block;height:100%;background:var(--accent);transition:width .15s}
.doc-light{position:fixed;inset:0;z-index:60;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:var(--sp-3)}
.doc-light[hidden]{display:none}
.doc-light-box{width:min(960px,100%);max-height:100%;display:flex;flex-direction:column;gap:.6rem;padding:.9rem;min-width:0;
  background:linear-gradient(180deg,var(--box-hi),var(--box));border:1px solid var(--box-line);border-radius:var(--radius);box-shadow:var(--shadow)}
.doc-light-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;min-width:0}
.doc-light-head>div{min-width:0;overflow-wrap:anywhere}
.doc-light-body{flex:1;min-height:120px;overflow:auto;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.4rem}
.doc-light-img{max-width:100%;max-height:70vh;object-fit:contain;display:block}
.doc-light-actions .btn{min-height:44px}
@media (max-width:600px){.doc-cards{grid-template-columns:1fr}.doc-light{padding:0}.doc-light-box{width:100%;height:100%;border-radius:0}.doc-light-img{max-height:none}}

/* ─────────────────────────────────── 8.0b-2: dil düğmesi (🌐 Dil / Language) — giriş, tanıtım, oturum içi aynı bileşen */
.langmenu{position:relative;display:inline-block}
.langmenu-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;white-space:nowrap}
.langmenu-globe{font-size:1.05em;line-height:1}
.langmenu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:70;margin:0;padding:.3rem;list-style:none;min-width:240px;max-width:min(92vw,520px);
  max-height:min(60vh,440px);overflow:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr;gap:2px}
.langmenu-list.left{right:auto;left:0}
.langmenu-list[hidden]{display:none}
.langmenu-list li{margin:0;padding:0}
.langmenu-opt{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .7rem;text-align:left;
  font:inherit;font-size:var(--fs-sm);color:var(--ink);background:none;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer}
.langmenu-opt:hover{background:var(--surface-2);border-color:var(--line)}
.langmenu-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.langmenu-opt.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.langmenu-check{font-weight:700}
@media (min-width:600px){.langmenu-list{grid-template-columns:1fr 1fr;min-width:360px}}
@media (max-width:599px){.langmenu-list{position:fixed;left:8px;right:8px;top:auto;max-width:none;max-height:70vh}}

/* 8.0b-3: çok dilli ülkede dil seçimi (kayıt formu) */
.su-langchoice{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.35rem .7rem;margin:.2rem 0 .4rem;background:var(--surface)}
.su-langchoice legend{padding:0 .3rem;color:var(--ink-3)}
.su-langopt{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;cursor:pointer}

/* 80-18a: belge adımı açıklaması */
.doc-why{border:1px solid var(--box-line);border-radius:var(--radius-sm);background:linear-gradient(180deg,var(--box-hi),var(--box));padding:.5rem .7rem;display:flex;flex-direction:column;gap:.25rem}
.doc-why summary{cursor:pointer;color:var(--accent-strong)}
.doc-why p{margin:.25rem 0}

/* 80-18c: kilitli düğme (yetki yok) — devre dışı + tek cümlelik neden */
.locked-btn{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.locked-btn .btn[disabled]{opacity:.55;cursor:not-allowed}
.locked-btn .small{color:var(--ink-3)}

/* 6a — hesap açma formu: telefon genişliğinde tek sütun, dokunma alanı ≥ 44 px; küçük ipuçları alanın altında. */
.uf-form input,.uf-form select{min-height:44px}
.uf-form label>.small{margin-top:.15rem}
.uf-form .small.bad{color:var(--bad)}
@media (max-width:820px){.uf-form{grid-template-columns:1fr}}

/* ═══════════════════════════ 8.10-D: YAZDIRMA (kullanıcı kararı 19.09 — atlanamaz madde)
 * Yazdırma HANGİ TEMA SEÇİLİ OLURSA OLSUN açık zemin + siyah yazıdır. Koyu tema yazdırılırsa sayfa baştan aşağı
 * dolu basar: mürekkep yakar, çıktı okunmaz. Jetonlar burada yeniden tanımlanır — `:root[data-theme]` seçicisi
 * bütün tema bloklarıyla AYNI özgüllükte ve dosyada SONRA geldiği için hepsini ezer (tek tek tema saymaya gerek yok).
 * ANLAM RENKLERİ korunur (D4), ama işaret (+/−) zaten her sayıda yazılıdır (i18n `sgn`) — siyah beyaz yazıcıda
 * renk kaybolsa bile eksi/artı okunur. */
@media print{
  :root,:root[data-theme]{
    --ground:#FFFFFF;--ground-hi:#FFFFFF;--surface:#FFFFFF;--surface-2:#FFFFFF;
    --box:#FFFFFF;--box-hi:#FFFFFF;--box-deep:#FFFFFF;--accent-soft:#FFFFFF;--recv-soft:#FFFFFF;
    --ink:#000000;--ink-2:#1A1A1A;--ink-3:#333333;
    --line:#999999;--line-2:#666666;--box-line:#999999;--field-border:#666666;
    --accent:#000000;--accent-2:#000000;--accent-strong:#000000;--focus:var(--accent);--on-accent:#FFFFFF;
    /* anlam renkleri (D4): açık aileden değerler — renkli yazıcıda anlam korunur */
    --recv:#2C6E52;--neg:#B42318;--pay:#B42318;--bad:#B42318;--warn:#7A5B12;--good:#2C6E52;
    --st-warn-bg:#FFFFFF;--st-warn-hi:#FFFFFF;--st-warn-line:#999999;--st-warn-bar:#7A5B12;--st-warn-ink:#6B4F0F;--st-warn-lab:#FFFFFF;
    --st-crit-bg:#FFFFFF;--st-crit-hi:#FFFFFF;--st-crit-line:#999999;--st-crit-bar:#B42318;--st-crit-ink:#9A1D14;--st-crit-lab:#FFFFFF;
    --st-ok-bar:#1D4F94;--st-ok-bg:#FFFFFF;--st-ok-ink:#1D4F94;
    --shadow:none;--box-inset:none;--card-shadow:transparent;--overlay:transparent;
  }
  body,:root[data-dark] body{background:#FFFFFF;color:#000000}
  /* D3: yan pano, üst araç çubuğu ve düğmeler basılmaz. İSTİSNA `.tagbtn`: tablo hücresindeki SAYIYI taşır —
   * gizlenirse veri kaybolur, bu yüzden düz metne dönüşür. */
  .side,.top,.drawer,.toast,.sesswarn,.filters,.langmenu,.pagebar{display:none !important}
  .btn,button:not(.tagbtn),a.btn{display:none !important}
  .tagbtn{display:inline;text-decoration:none;color:inherit;cursor:auto}
  .shell{display:block;min-height:0}   /* [rev103] ekran kuralı min-height:100vh kâğıtta boş son sayfa üretiyordu (WebKit A4 gerçek baskı ölçümü) */
  .main,.view{display:block}
  .view{padding:0}
  /* D3: tablo tam genişlikte, başlık satırı HER SAYFADA tekrarlanır, satır ortadan bölünmez */
  table{width:100%;border-collapse:collapse;page-break-inside:auto}
  thead{display:table-header-group}
  tfoot{display:table-footer-group}
  tr{page-break-inside:avoid;break-inside:avoid}
  th{background:#FFFFFF;color:#000000;border-bottom:1px solid #666666}
  .panel,.kpi,.chartcard,.todo,.foldh,.plancard,.acctrow{box-shadow:none;border:1px solid var(--line);break-inside:avoid}
  .ph{background:#FFFFFF}
  a[href]::after{content:""}
  @page{margin:14mm}
}

/* 8.10-B4: tema seçicisi — ad + küçük renk önizlemesi + seçili işareti. Açılır liste mekaniği dil menüsüyle
 * ortaktır (.langmenu*); burada yalnız önizleme noktası ve alt satır var.
 * Önizleme noktası, SEÇİLİ OLMAYAN bir temanın iki ana rengini gösterir — o temanın jetonları o an tanımlı
 * olmadığı için değerler burada tekrarlanır (CSS'te başka yolu yok). Kopyanın kaymaması testle sabitlenir:
 * her noktanın renkleri ilgili tema bloğundaki --sidebar ve --ground ile birebir aynı olmak zorundadır
 * (server/test/theme-picker-ui.test.js). */
.thm-dot{display:inline-block;width:14px;height:14px;border-radius:var(--radius-pill);flex:0 0 auto;
  border:1px solid var(--line-2);background:linear-gradient(135deg,var(--thm-a) 0 50%,var(--thm-b) 50% 100%)}
/* Sol yarı = o temanın yan pano tonu (--sidebar), sağ yarı = sayfa zemini (--ground): kullanıcı
 * "panel + sayfa" ikilisini bir bakışta görür. Değerler tema bloklarıyla birebir aynı olmak zorunda. */
.thm-dot[data-thm="dark"],.thm-dot[data-thm="system"]{--thm-a:#24432C;--thm-b:#14201A}
.thm-dot[data-thm="light"]{--thm-a:#386340;--thm-b:#E1EDE4}
.thm-dot[data-thm="steel"]{--thm-a:#2F5878;--thm-b:#E3EAF2}
.thm-dot[data-thm="ios"]{--thm-a:#0B4D8F;--thm-b:#E7ECF2}
.thm-dot[data-thm="anthracite"]{--thm-a:#292D33;--thm-b:#191B1E}
.thememenu .langmenu-opt{display:flex;align-items:center;gap:.5rem}
.thm-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.5rem .6rem;border-top:1px solid var(--line)}
.thm-note{flex:1 1 12rem;color:var(--ink-2);font-size:var(--fs-xs)}

/* Bakım kipi bandı (yalnız görüntüleme). Uyarı rengi kullanılır, `--bad` DEĞİL: bu bir sorun
   değil, geçici bir durum. Her ekranın üstünde durur ki kullanıcı neden yazamadığını aramasın. */
.maint-banner {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--fg); font-size: 14px; line-height: 1.35;
}
/* K-I (24.09.2026): yasal bağlantılar — tanıtım sayfası ve giriş kabuğu altbilgisi */
.legal-foot{font-size:var(--fs-xs);color:var(--ink-3);display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.legal-foot a{color:var(--ink-2);text-decoration:underline;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.legal-foot a:hover{color:var(--accent-strong)}
.legal-foot .legal-note{margin:0}
.lp-legal{padding:18px 16px 28px}

/* D (27.09): Standorte — anahtar/değer satırı ve stillgelegt depo satırı */
.kv{display:flex;gap:.6rem;align-items:baseline;margin:.25rem 0;flex-wrap:wrap}
.kv>.small:first-child{min-width:9rem}
tr.muted td{opacity:.6}

/* E (27.09): "+ Neuer Eintrag" listesi */
.ne-list{display:grid;gap:.4rem}
.ne-row{display:block;position:relative;min-height:44px;padding-right:1.8rem}
.ne-row>span:first-child{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ne-row>span:first-child>span{font-size:var(--fs-xs);color:var(--ink-3)}
.ne-right{display:block;margin-top:.25rem;white-space:normal;overflow-wrap:anywhere}
.ne-right>span:last-child{position:absolute;right:.65rem;top:50%;transform:translateY(-50%)}
.ne-row[disabled]{opacity:.7;cursor:not-allowed}

/* 28.09: belge eylem şeridi — tablo hücresinde sarar; dar ekranda düğmeler tam genişlik, 44 px hedef */
.doc-file-actions{flex-wrap:wrap;margin-top:.3rem}
.doc-file-actions a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center}   /* Y1/Y7 (29.09): Aç bağlantısı düğmelerle aynı görünüm ve hiza — yalnız bu şerit, global .btn dokunulmadı */
td .doc-file-actions{margin-top:.35rem}
@media (max-width:820px){td .doc-file-actions{flex-direction:column;align-items:stretch}.doc-file-actions .btn{min-height:44px}.doc-file-actions .doc-share-hint{display:block;margin-top:.25rem}}

/* [birleşik rev101] Açıklama ek sayfası yazdırma (K-A5-2 a): yalnız #arc_ek_sayfa basılır; orijinal belge bu sayfada değişmez. */
@media print {
  body.yazdir-ek-sayfa * { visibility: hidden; }
  body.yazdir-ek-sayfa #arc_ek_sayfa, body.yazdir-ek-sayfa #arc_ek_sayfa * { visibility: visible; }
  body.yazdir-ek-sayfa #arc_ek_sayfa { position: absolute; left: 0; top: 0; width: 100%; }
  body.yazdir-ek-sayfa .no-print { display: none; }
  /* [rev103] Gerçek A4 baskı ölçümü (gercek-baski-rev102): gizli uygulama yer kaplamasın — açıklama sayfasını içermeyen her öğe akıştan çıkar;
   * atalar kırpmaz / boşluk bırakmaz; sayfa normal akışta basılır (uzun içerik devam sayfasına bölünür). :has desteklenmezse yukarıdaki eski kurallar geçerli kalır. */
  body.yazdir-ek-sayfa *:not(:has(#arc_ek_sayfa)):not(#arc_ek_sayfa):not(#arc_ek_sayfa *) { display: none !important; }
  body.yazdir-ek-sayfa *:has(#arc_ek_sayfa) { overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  @supports selector(:has(*)) { body.yazdir-ek-sayfa #arc_ek_sayfa { position: static; } }
  /* [rev103] Son sütun başlığı kâğıtta kırpılıyordu (th nowrap + .tw overflow-x:auto): yalnız açıklama sayfasında başlık sözcük sınırında kırılır, kap taşmayı kesmez. */
  body.yazdir-ek-sayfa #arc_ek_sayfa .tw { overflow: visible !important; max-height: none !important; }
  body.yazdir-ek-sayfa #arc_ek_sayfa th { white-space: normal; }
  /* [rev103] Uzun içerikte WebKit tablo hücresi içindeki satırları sayfa sınırında yatay dilimliyordu (gerçek A4 baskı, 36 not): baskıda satırlar
   * aynı beş sütunlu grid bloklara döner — metin satırları sayfa sınırında bütün kalır; ekran tablosu DEĞİŞMEZ (yalnız @media print + yazdırma sınıfı). */
  body.yazdir-ek-sayfa #arc_ek_sayfa table, body.yazdir-ek-sayfa #arc_ek_sayfa thead, body.yazdir-ek-sayfa #arc_ek_sayfa tbody { display: block; width: 100%; }
  body.yazdir-ek-sayfa #arc_ek_sayfa tr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.35fr) minmax(0, 1.45fr) minmax(0, 1.4fr); height: auto !important; break-inside: avoid; page-break-inside: avoid; }
  body.yazdir-ek-sayfa #arc_ek_sayfa th, body.yazdir-ek-sayfa #arc_ek_sayfa td { display: block; height: auto !important; max-height: none !important; overflow: visible !important; white-space: normal !important; overflow-wrap: break-word; }
  /* [rev103] "zaman doğrulanamadı" etiketi (.tag nowrap) dar sütunda yan hücreye taşıyordu: baskıda etiket de satır kırar; hiçbir içerik komşu sütuna geçmez. */
  body.yazdir-ek-sayfa #arc_ek_sayfa td .tag { white-space: normal; max-width: 100%; }
}

/* 066 (19.10, canlı öncesi r3): dış şoför alanları, ortak stok / hesap panosu ayrıntıları, ayna kabul formu */
.cd-fields{grid-column:1/-1;border:1px dashed var(--line, #999);padding:.5rem .75rem;border-radius:6px}
.cd-fields legend{padding:0 .3rem}
.sb-details summary{cursor:pointer;font-size:.85em}
.sb-list{margin:.25rem 0 0;padding-left:1rem;font-size:.85em}
.mr-accept{display:grid;gap:.35rem;max-width:420px}