/* ============================================================
   PERON ERP — Premium Panel Stylesheet v2.0
   Tasarım: Ultra-Modern Enterprise SaaS Dashboard
   ============================================================ */

/* Yatay sürükleme/kaydırmanın tarayıcı geri-ileri navigasyonunu (swipe-back) tetiklemesini
   engelle — küçük tablo ekranlarında fareyi basılı tutup kenara çekince sayfanın kaybolması
   bu native gesture'dan kaynaklanıyordu. Panel sayfalarına özel (bu CSS yalnızca ERP'de yüklenir). */
html,
body.peron-active {
    overscroll-behavior-x: none;
}
.peron-content,
.peron-main,
.peron-table-wrap {
    overscroll-behavior-x: contain;
}

/* ── CSS Özel Değişkenleri ── */
:root {
    --sb-w:       240px;
    --sb-w-col:   60px;
    --hdr-h:      56px;

    /* Birincil palette — Kurumsal Çelik Mavi */
    --pri:            #3f74a8;
    /* Dolgulu MOBİL aksiyon butonları için AA-güvenli koyu varyantlar (üstünde beyaz metin).
       --pri gece temasında #5b91c7'e açılıyor ve beyazla 3.32:1'e düşüyor (14px/700 büyük
       metin sayılmaz → 4.5 gerekir). --green #5e9c8b beyazla 3.18, #6fae9e ise 2.55. */
    --pri-strong:     #3f74a8;   /* beyazda 4.91:1 */
    --green-strong:   #43705f;   /* beyazda 5.64:1 */
    /* 🔴🔴 AVATAR GRADYANLARI ICIN (1.364.0 tarayici denetimi).
       OLCULDU gece: `.company-avatar` beyaz metinle rampa boyunca 2,33-3,29:1 ·
       `.user-avatar` 2,29-3,32:1 — esik 4,5 (metin 12px/700, "buyuk metin" DEGIL).
       Gunduzde ayni iki eleman 4,91-5,13 ile GECIYOR; yani deger BILEREK ayarlanmis,
       gece blogu `--cyan-ink`/`--violet-ink`i ACIK degerlere cevirince ters donmus.
       O iki token "KOYU ZEMINDE METIN" icin ayarlidir; "BEYAZ METIN TASIYAN DOLGU"
       icin KULLANILAMAZ — satir 399'daki karar bunu `--pri-strong` ile zaten cozmus,
       ama cyan/violet karsiliklari YOKTU. 🔴 YENI MEKANIZMA DEGIL: var olan
       `-strong` deseni (bkz. ust iki satir) cyan ve violet'e TASINIYOR.
       🔴 TEMADAN BAGIMSIZ, gece blogunda YENIDEN TANIMLANMAZ: beyaz metin
          tasiyan bir dolgunun okunurlugu SAYFA ZEMININDEN bagimsizdir; degerler
          gunduzun BUGUNKU `--cyan-ink`/`--violet-ink` degerleriyle BIREBIR aynidir,
          yani gunduzde SIFIR gorsel degisiklik olur (olculdu: 4,91-5,13 aynen kaldi). */
    --cyan-strong:    #4d7671;   /* beyazda 5.07:1 — iki temada da */
    --violet-strong:  #7c5fbf;   /* beyazda 4.95:1 — iki temada da */

    /* ── Üretim aşaması paleti (tek kaynak) ────────────────────────────────
       Her aşama ayrı tonda; zeminler İKİ TEMADA DA AÇIK kalır ve metin koyu olur
       (masaüstündeki .peron-badge.prod-st-* kuralları da aynı kararı uygular —
       koyu temada açık metin bu açık zeminlerde 2.2:1'e düşüyordu). Bu yüzden gece
       modunda EZİLMEZ. Ölçülen metin/zemin kontrastları: 4.59-5.66 (hepsi AA).
       🔴 Masaüstü kuralları hâlâ kendi sabit hex'lerini kullanıyor; ton değerleri
       birebir aynı olduğu için görünüm ortak. 1.229.0'da masaüstündeki `diliste`
       yazım hatası `dikiste` yapıldı ve `beklemede` eklendi — öncesinde Dikişte
       turkuazı ölüydü ve Kesimde ile aynı mavi görünüyordu. */
    --st-wait-bg: #eef1f5;  --st-wait-fg: #5b6675;  --st-wait-bd: #dfe5ec;
    --st-cut-bg:  #e3f0fb;  --st-cut-fg:  #2f6aa6;  --st-cut-bd:  #cfe3f6;
    --st-sew-bg:  #e1f4f1;  --st-sew-fg:  #206b5f;  --st-sew-bd:  #c9eae4;
    --st-uph-bg:  #efe9f8;  --st-uph-fg:  #6f54a6;  --st-uph-bd:  #e0d6f1;
    --st-pack-bg: #fdeedd;  --st-pack-fg: #8a5622;  --st-pack-bd: #f6ddc2;
    --st-done-bg: #e2f3e7;  --st-done-fg: #256a41;  --st-done-bd: #cbe9d3;
    /* Sevk Edildi — "bitti"den AYRI okunmalı: tamamlandı yeşili üretimin bittiğini,
       bu ton malın ÇIKTIĞINI anlatır. Kontrast ölçüldü: 6,06:1 (AA normal metin ≥4,5). */
    --st-ship-bg: #dceef2;  --st-ship-fg: #14606e;  --st-ship-bd: #c4e2e8;
    --st-canc-bg: #fae6e7;  --st-canc-fg: #b1454b;  --st-canc-bd: #f1cdcf;

    /* ── GRAFİK AŞAMA PALETİ (1.290.0) — rozet paletinden AYRI ────────────────
       Kullanıcı: *"Üretim aşamaları pasta grafiğinde RENKLER BİRBİRİNE ÇOK YAKIN,
       düzelt bunu."* Haklıydı: rozet tonları bilerek soluk ve aynı aileden
       seçilmiş (bir listede yan yana 40 çip yanıp sönmesin diye). Dilim dilim
       ayırt edilmesi gereken bir HALKADA aynı seçim üç rengi birbirine bindiriyordu
       — `--st-sew-fg #206b5f` · `--st-done-fg #256a41` · `--st-ship-fg #14606e`
       neredeyse aynı yeşil-turkuaz; `beklemede` ile `plana_alindi` ise BİREBİR
       aynı tokenı paylaşıyordu (iki ayrı dilim, tek renk).
       🔴 ROZET PALETİNE DOKUNULMADI: o palet tüm uygulamada listelerde kullanılıyor
          ve orada soluk olması DOĞRU. Bu set yalnız grafiklerin dilim/efsane rengidir.
       🔴 TONLAR RENK ÇARKINA YAYILDI (yaklaşık): 6° · 30° · 75° · 140° · 182° ·
          204° · 243° · 318° + nötr gri. Komşu iki dilim arasında en az ~25° var.
       🔴 KONTRAST ÖLÇÜLDÜ (efsane metni de bu rengi kullanıyor → AA 4,5 gerekir):
          beyaz zeminde en düşük 4,95:1 (ship #5c7a0d), en yüksek 6,79:1. */
    --pg-st-wait: #5f6b7b;   /* beklemede    — nötr slate */
    --pg-st-plan: #5348c4;   /* plana alındı — indigo     */
    --pg-st-cut:  #1a72b5;   /* kesimde      — mavi       */
    --pg-st-sew:  #0a7a7f;   /* dikişte      — turkuaz    */
    --pg-st-uph:  #a63d83;   /* döşemede     — magenta    */
    --pg-st-pack: #a95611;   /* ambalajda    — turuncu    */
    --pg-st-done: #256e3d;   /* tamamlandı   — yeşil      */
    --pg-st-ship: #5c7a0d;   /* sevk edildi  — zeytin     */
    --pg-st-canc: #b23a30;   /* iptal        — kırmızı    */

    /* ═══ KATEGORİK GRAFİK PALETİ — halka/şerit dilim rengi (2026-09-13) ══════
       Kullanıcı (1.312.0 notunda kayıtlı): "grafikte tüm ürünlerin renkleri aynı
       olduğu için hiçbir şey anlaşılmıyor". Kök neden ÖLÇÜLDÜ: motor `PALET`i
       arayüz tokenlarından kuruyordu (--pri/--amber/--green/--violet/--rose/--cyan)
       ve o set veri işareti olarak ÇÖKÜYOR:
         · kroma tabanı: --pri 0,10 · --green 0,07 · --violet 0,063 · --cyan 0,064
           → dördü de GRİ okunuyor (taban 0,10)
         · --green ↔ --cyan normal görüşte ΔE 3,9 (açık) / 0,6 (gece) → AYNI RENK
         · komşu en kötü ΔE 5,0 (deutan) — ayrım eşiği 8
       🔴 ARAYÜZ TOKENLARI DEĞİŞMEDİ. Buton/rozet/vurgu rengi kurumsal çelik mavi
          kalır; bu set YALNIZ veri işaretidir. İkisi ayrı işlerdir: chrome sakin
          olmalı, veri işareti AYIRT EDİLEBİLİR olmalı. Aynı tokenı iki işe
          koşmak ölçülen çöküşün sebebiydi.
       🔴 ÖLÇÜM (dataviz doğrulayıcısı, gerçek zeminlerle — açık #ffffff, gece
          #18212e): iki temada da TÜM KAPILAR GEÇTİ.
          açık  → komşu en kötü CVD ΔE 9,1 · normal ΔE 19,6 · halka sarması 26,5
          gece  → komşu en kötü CVD ΔE 8,4 · normal ΔE 19,3 · halka sarması 27,3
          ilk 3 slot tüm-çift de geçer (dağılım/serpme için güvenli üst sınır).
       🔴 AÇIK TEMADA slot 3/4/5 zeminle 3:1'in ALTINDA (2,82 / 2,17 / 2,69).
          Bu, "rahatlama kuralı" gereği GÖRÜNÜR ETİKET zorunlu kılar — halka ve
          şerit her dilim için efsanede ad + sayı basar, koşul sağlanıyor.
          Bu tonları METİN rengi olarak KULLANMA (efsane metni --text-* kullanır).
       🔴 SLOT SIRASI GÜVENLİK MEKANİZMASIDIR, süs değil: komşu çiftler bu sırada
          doğrulandı. Sırayı değiştirme, araya renk ekleme. 6'dan fazla dilim
          motorda "Diğer"e katlanır — 7. bir renk ÜRETİLMEZ. */
    --pg-k1: #2a78d6;   /* mavi    */
    --pg-k2: #eb6834;   /* turuncu */
    --pg-k3: #1baf7a;   /* deniz   */
    --pg-k4: #eda100;   /* sarı    */
    --pg-k5: #e87ba4;   /* magenta */
    --pg-k6: #008300;   /* yeşil   */
    --pri-dark:       #335f8a;
    --pri-hover:      #386a9b;
    --pri-light:      rgba(63, 116, 168, 0.08);
    --pri-border:     rgba(63, 116, 168, 0.20);
    --pri-on:         #ffffff;
    --pri-soft:       rgba(63, 116, 168, 0.16);
    --pri-text:       #356394;

    /* Renk sistemi */
    --green:      #5e9c8b;
    --cyan:       #6fa99b;
    --amber:      #be7438;
    --rose:       #c2545a;
    --violet:     #a98bb0;
    /* Renkli SAYI/METİN için AA-koyu türevler (dolgu/nokta/buton --green/--amber/--rose kalır) */
    --green-ink:  #43705f;   /* beyazda 5.64:1 */
    --amber-ink:  #95592b;   /* beyazda 5.61:1 */
    --rose-ink:   #ab4a4f;   /* beyazda 5.49:1 */
    /* 1.415.2 — UYARI YÜZEYİNDE (--peach-surface) metin: -ink orada 4,24–4,43:1 kalıyordu (ölçüldü: fiş farkı, yevmiye
       boşluk rozeti, "diğer bilinen eksikler"). Yüzeyde ≥5,06:1 · beyazda ≥6,55:1. */
    --amber-ink-yuzey: #83512c;
    --rose-ink-yuzey:  #95444b;
    --violet-ink: #7c5fbf;   /* beyazda 4.92:1 (mor METİN; --violet #a98bb0 beyazda 2.9:1 başarısız) */
    --cyan-ink:   #4d7671;   /* beyazda 5.07:1 (--cyan #6fa99b beyazda 2.68:1 → AA başarısız) */
    /* Sipariş notu işareti (1.380.0) — sarı üçgen + koyu ünlem. Ünlem/üçgen 9,6:1;
       üçgen kenarı beyaz kartta 3,1:1 (metin-dışı eşik 3,0). */
    --not-sari:        #f2c230;
    --not-sari-kenar:  #a87a00;
    --not-sari-ink:    #2b1d00;
    /* ÜRÜN KAYDIRMA (takas) semantiği — buton, plan mor-vurgusu, takas rozetleri tek kaynak. */
    --shift-accent:        var(--violet-ink);
    --shift-surface:       rgba(124, 95, 191, 0.10);
    --shift-surface-border: rgba(124, 95, 191, 0.34);
    /* Hata-kutusu crimson yüzey/kenar tint'i (inline stillerde tekrar eden rgba(225,29,72,…) → tek token) */
    --rose-surface:        rgba(225, 29, 72, 0.08);
    --rose-surface-border: rgba(225, 29, 72, 0.20);

    /* Sidebar — Buzlu mavi-gri AÇIK panel. Rail tonlu tuval (içerik #f4f6f9'un çelik-mavi
       akrabası), üstündeki akordiyon başlığı/firma rozeti BEYAZ yüzey → içerik alanındaki
       "tonlu tuval + beyaz kart" grameriyle aynı dil. Metin tokenları bilinçli olarak
       --text-primary/-secondary/-muted ile AYNI hex: ikinci bir gri skalası bakım borcudur.
       🔴 --sb-hover ve --sb-border KOYU ALFA: beyaz-alfa açık zeminde sıfır etki üretir. */
    --sb-bg:            #eaf0f7;
    --sb-bg-2:          #e2e9f3;                    /* ÖLÜ TOKEN (hiçbir kural var() ile çağırmıyor) */
    --sb-hover:         rgba(30, 52, 82, 0.07);
    --sb-active:        linear-gradient(135deg, rgba(63,116,168,.18) 0%, rgba(63,116,168,.11) 100%);
    --sb-active-solid:  rgba(63, 116, 168, 0.16);
    --sb-border:        rgba(30, 52, 82, 0.13);
    --sb-text:          #46535f;                    /* = --text-secondary · rail'de 6.87:1 */
    --sb-text-bright:   #1b2533;                    /* = --text-primary   · rail'de 13.47:1 */
    --sb-section-label: #5e6873;                    /* = --text-muted     · rail'de 4.94:1 */

    /* ── Sidebar yüzey/gölge katmanı — koyu zemin varsayan sabitlerin token karşılığı.
       Her birinin GECE değeri, daha önce kuralda duran literalin BİREBİR kopyasıdır
       → kural gövdesi TEK, farkı yalnız token taşır (gece modu değişmez). ── */
    --sb-raised:            #ffffff;                    /* akordiyon başlığı */
    --sb-raised-hover:      #ffffff;                    /* kabarma transform+gölgeden gelir */
    --sb-card:              #ffffff;                    /* firma rozeti */
    --sb-card-hover:        #ffffff;
    --sb-control:           #ffffff;                    /* sidebar kapat/aç butonu */
    --sb-control-hover:     rgba(30, 52, 82, 0.07);
    --sb-user-hover:        #ffffff;                    /* alt kullanıcı kartı */
    --sb-ring-strong:       rgba(30, 52, 82, 0.20);
    --sb-scroll:            rgba(30, 52, 82, 0.20);
    --sb-inner-light:       #ffffff;
    --sb-inner-light-hover: #ffffff;
    --sb-lift:              0 1px 2px rgba(30, 52, 82, 0.09);
    --sb-lift-hover:        0 3px 9px rgba(30, 52, 82, 0.14);
    --sb-press:             inset 0 2px 4px rgba(30, 52, 82, 0.13);
    --sb-badge-lift:        0 2px 8px rgba(30, 52, 82, 0.10);
    --sb-edge-shadow:       2px 0 8px -6px rgba(30, 52, 82, 0.16);
    --sb-drawer-shadow:     4px 0 24px rgba(30, 52, 82, 0.18);   /* mobil çekmece */
    --sb-active-text:       #1b2533;                    /* pastel aktif satırda 10.69-11.56:1 */
    --sb-soon-opacity:      0.66;                       /* 3.13:1 */
    --sb-bar-glow:          none;                       /* beyaz sis açık zeminde çubuğu siler */
    --sb-plan-hover:        #e6ebf3;                    /* .plan-col-head--click:hover */

    /* ── Modül çip reçetesi — YÖN anahtarları. Gece bloğu bunları eski ifadelere
       matematiksel olarak geri indirger: color-mix(X 100%,#fff) ≡ X · color-mix(X 0%,#fff) ≡ #fff. ── */
    --nav-chip-fb:      rgba(30, 52, 82, 0.06);  /* color-mix desteklenmezse düz dolgu */
    --nav-chip-a:       22%;    /* çip dolgusu       (gece 18%) */
    --nav-ring-a:       36%;    /* çip halkası       (gece 24%) */
    --nav-ink-a:        52%;    /* glif karışım oranı(gece 72%) */
    --nav-ink-base:     #0d1622;/* 🔴 glif KOYUYA açılır (gece #ffffff) */
    --nav-on-a:         52%;    /* gradyan üstü glif (gece 0% → #fff) */
    --nav-on-base:      #0d1622;
    --nav-hi-a:         30%;    /* hover/aktif gradyan → pastel (gece 100% → doygun) */
    --nav-hi-base:      #ffffff;
    --nav-halo-a:       30%;    /* dış halo          (gece 62%) */
    --nav-gloss:        transparent;              /* pastel çipte beyaz iç ışık üst kenarı yıkar */
    --nav-shade:        rgba(13, 22, 34, 0.10);   /* (gece rgba(0,0,0,.22)) */
    --nav-glyph-shadow: transparent;              /* pastel çipte glif gölgesi kir yapar */
    --nav-row-a:        20%;    /* aktif satır yıkaması (gece 17%) */
    --nav-row-ring-a:   36%;    /* aktif satır halkası  (gece 30%) */
    --nav-row-halo-a:   30%;    /* aktif satır halosu   (gece 52%) */
    --nav-bar-a:        62%;    /* sol çubuk            (gece 100% → var(--nav-c)) */
    --nav-bar-base:     #0d1622;

    /* Arkaplan & yüzeyler */
    --content-bg:   #f4f6f9;
    --card-bg:      #ffffff;
    --header-bg:    #ffffff;

    /* Metin */
    --text-primary:   #1b2533;
    --text-secondary: #46535f;
    --text-muted:     #5e6873; /* WCAG AA: beyazda ~5:1, içerik zemininde ~4.6:1 (eski #8a96a3 başarısızdı) */

    /* Kenar */
    --border:       #e3e8ef;
    /* 🔴 FORM KONTROLÜ KENARLIĞI AYRI TOKEN (1.351.0 — piksel denetimi bulgusu).
       ÖLÇÜLDÜ: gece modunda `--border` (#2a3543) kart zemininde (#18212e) **1,30:1**
       veriyor; WCAG 2.2 AA §1.4.11 arayüz bileşeni sınırı **3:1**. Yani karanlıkta
       girdi kutusunun nerede bittiği GÖRÜNMÜYOR.
       🔴🔴 AÇIK TEMA İÇİN ÖNCE "12,44:1" YAZILMIŞTI — O ÖLÇÜM YANLIŞTI (1.351.1'de
          tarayıcıda yeniden ölçüldü: #e3e8ef beyaz üstünde **1,23:1**). Yanlış bir
          sayıyı gerekçe diye kaydetmek hiç ölçmemekten KÖTÜDÜR: bir sonraki okuyucu
          o dalı "çözülmüş" sanıp geçer. Doğru durum: açık temada da 3:1 eşiği AŞILMIYOR.
       🔴 AÇIK TEMA YİNE DE DEĞİŞTİRİLMEDİ — BİLEREK. `--border` bu uygulamadaki HER
          girdinin kenarlığıdır; yalnız bu modalın kutularını koyultmak kullanıcının
          açık kuralını ("TASARIM DİLİ HER YERDE AYNI OLSUN") bozar ve modal, komşu
          ekranlardan farklı görünür. Doğru düzeltme uygulama GENELİNDE ve 8+ ekranda
          ölçülerek yapılır — ayrı bir tur işi. Gece dalı ayrıldı çünkü orada kutunun
          sınırı fiilen GÖRÜNMÜYORDU; açık temada soluk ama seçilebilir durumda.
       🔴 `--border`IN KENDİSİ DEĞİŞTİRİLMEDİ: o token tablo çizgisi, kart sınırı ve
          ayraç olarak onlarca yerde kullanılıyor; hepsini açmak gece temasını
          "çizgili kağıt" gibi gösterirdi. Sorun ÇİZGİDE değil, DOKUNULABİLİR
          BİLEŞENİN sınırında. */
    --border-ctl:   #e3e8ef;
    /* 🔴 1.346.0'da `var(--border-light)` (KENDİNE referans) olmuştu → token geçersiz,
       154 kullanım tarayıcı varsayılanına düşüyordu (rozet zemini şeffaf, toast yazısı
       görünmez — kullanıcı: "bildirim yazısı siyah, hiçbir şey okunmuyor"). 1.340.0'daki
       değer geri kondu. */
    --border-light: #f3f6fa;
    --switch-off:   #cbd3dd;

    /* Gölgeler — Stripe stili */
    --shadow-card:       0 2px 5px -1px rgba(50,50,93,0.05), 0 1px 3px -1px rgba(0,0,0,0.07);
    --shadow-card-hover: 0 7px 14px -3px rgba(50,50,93,0.10), 0 3px 6px -3px rgba(0,0,0,0.07);
    --shadow-modal:      0 30px 60px -12px rgba(50,50,93,0.25), 0 18px 36px -18px rgba(0,0,0,0.30);
    --shadow-toast:      0 4px 20px -2px rgba(50,50,93,0.12), 0 2px 6px -2px rgba(0,0,0,0.08);

    /* Kenar yuvarlaklığı */
    --r-sm:   5px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-full: 9999px;

    /* Geçişler */
    --tr-fast:   0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --tr-normal: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --tr-spring: 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Tipografi */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Tipografi ölçeği (yeni kod bunları kullanmalı; mevcut sabit px'ler kademeli taşınır) */
    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13px;
    --fs-md:   14px;
    --fs-lg:   16px;
    --fs-xl:   19px;
    --fs-2xl:  24px;
    --fs-3xl:  30px;

    /* Boşluk ölçeği — 4px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Türetilmiş / eş-anlamlı token'lar — önceden TANIMSIZDI (hayalet), var() fallback'ine
       düşüyordu (dark'ta uyum yok / pri-tint pembe hatalı). Alias olanlar hedefin dark
       override'ıyla otomatik uyar; yüzey/kenarlar gece bloğunda ayrıca tanımlı. */
    --mint:          var(--green);
    --mint-text:     var(--green-ink);
    --peach:         var(--amber);
    --pri-tint:      var(--pri-light);
    --mint-surface:  rgba(94, 156, 139, 0.16);
    --peach-surface: rgba(190, 116, 56, 0.15);
    --amber-border:  rgba(190, 116, 56, 0.40);
    --bg-inset:      #eef2f6;

    /* Canlı durum göstergeleri — presence noktaları + mesaj tikleri (JS inline stilinden token'a) */
    --presence-on:  #2bbf6a;
    --presence-off: #e0524d;
    --tick-read:    #2f6bd8;
    --tick-sent:    #9aa6b4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLO YOGUNLUK SOZLESMESI — TEK SATIR YUKSEKLIGI (KURAL)
   ═══════════════════════════════════════════════════════════════════════════
   KURAL: Uygulamadaki HER veri tablosunun satır yüksekliği AYNIDIR. Yükseklik
   ekran modülünde değil, BURADA tanımlanır; ekranlar yalnız bu token'ları okur.
   Yeni bir tablo yazarken satır yüksekliği/dolgu/yazı boyu ELLE VERİLMEZ.

   NEDEN: Ölçüldü (1366px, gerçek veri, 2026-08-04) — aynı uygulamada satır boyu:
       Üretim Takibi 30 · Üretim Siparişleri 41 · Faturalar 41 · Satınalma 50
       Stok 52 · Cari 52 · Sipariş Yönetimi 53 (min 37 / max 72 — kendi içinde de dağınık)
   Fark dolgudan DEĞİL, hücre içindeki denetimlerden geliyordu: satır içi
   <select> 36px, .peron-input 36px, .peron-badge 24px, aksiyon butonu 28-30px.
   Bu yüzden sözleşme yalnız dolguyu değil, HÜCRE İÇİ DENETİM ÖLÇÜLERİNİ de bağlar.

   ÖLÇÜ MANTIĞI (masaüstü-fare): satır = denetim 26 + 2×3 dolgu = 32px (8px ızgara).
   Rozet (18px) ve düz metin (17px) daha kısa kalır; `height` alt sınır olduğu için
   satır yine 32px'te durur → ızgara dümdüz olur, "dağınık satır" biter.

   REJİM: Değerler burada (taban = dokunmatik/telefon) ve aşağıdaki
   `(min-width:769px) and (pointer:fine)` bloğunda (masaüstü-fare) tanımlıdır.
   Dokunmatikte 44px hedef kuralı token üzerinden korunur.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --tbl-row-h:     44px;   /* satır yüksekliği (ALT SINIR) — dokunmatikte hedef ölçüsü */
    --tbl-cell-py:    8px;   /* hücre dikey dolgusu */
    --tbl-fs:         12px;  /* gövde yazı boyu — 9 PUNTO (kullanıcı kuralı 2026-09-13).
                                Önce 13px (10 punto) idi. Kullanıcı: "dashboard ekranındaki
                                yazı karakterlerini standart 9 punto olarak ayarla, tablolarda
                                alan açılmış olur". 1 punto = 4/3 px → 9 punto = 12px.
                                Dokunmatik taban da 12px'e indi: "standart" tek değer demek;
                                masaüstü 12, tablet 12, yoğun mod 10,5, telefon --m-fs-sm. */
    --tbl-head-py:    9px;   /* başlık dikey dolgusu */
    --tbl-head-fs:    11px;  /* başlık yazı boyu */
    --tbl-ctl-h:     36px;   /* hücre içi input/select/buton yüksekliği */
    --tbl-badge-fs:  11px;   /* hücre içi rozet yazı boyu */
    /* 🔴 HÜCRE İÇİ GİRDİ/AÇILIR KUTU YAZI BOYU — TABANDA 16px OLMAK ZORUNDA.
       iOS Safari, yazı boyu 16px'in ALTINDA olan bir denetime odaklanınca sayfayı
       kendiliğinden büyütür ve BİR DAHA KÜÇÜLTMEZ (aynı gerekçe dosyanın mobil
       bloğunda da yazılı). Rozet/kod etiketi (--tbl-code-fs) küçülebilir, ÇÜNKÜ
       onlara odaklanılmaz; girdiler AYRI token kullanır. Masaüstü-fare rejiminde
       11.5px'e iner — orada dokunmatik klavye ve otomatik büyütme yoktur. */
    --tbl-ctl-fs:    16px;
    --tbl-code-fs: 11.5px;   /* hücre içi kod/etiket (.user-code) yazı boyu */
    /* 🔴 HÜCRE İÇİ TARİH KOLONU — REJİME BAĞLI, ÇÜNKÜ MASKE PUNTOYLA BÜYÜR.
       `<input type="date">` sabit bir maske basar ("gg.aa.yyyy" + takvim simgesi) ve
       o maskenin genişliği --tbl-ctl-fs ile birlikte değişir. ÖLÇÜLDÜ (Chrome, 390px,
       gerçek render + ekran görüntüsü): 124px → "gg.aa.yyy" (son harf kayıp) ·
       128/131px → hâlâ kırpık · 134px → TEMİZ (sıkı) · 140px → rahat.
       🦷 `scrollWidth` BU KUSURU YAKALAMAZ — UA gölge ağacındaki maskeyi ölçmez;
          kırpılma yalnız ekran görüntüsüyle görülür (aynı tuzak #po-shell'de de yaşandı).
       🔴 MASAÜSTÜ-FARE REJİMİNDE KÜÇÜLTÜLÜR, ÇÜNKÜ ORADA PUNTO 11,5px: girdi 104px'e
          oturuyor ve 124px fazlasıyla yetiyor. Kullanıcı kuralı "büyütme bişeyi" —
          dar ekranda gereken pay, geniş ekranda GEREKMEZ ve alınmaz. */
    --tbl-date-col:  140px;
    /* 🔴 AKSİYON KOLONU GENİŞLİĞİ — DÜĞMEYİ KÜÇÜLTMEK TEK BAŞINA YETMİYOR (1.365.0).
       Tasarım ölçümü kasada şunu gösterdi: 🔗'li satır 44px, düğmeli satır 101px
       (390px) / 104px (768px) — 57-60px zıplama. Kök neden ÖLÇÜLDÜ: iki düğme
       44+4+44 = 92px istiyor, kolon 70px → `flex-wrap` devreye giriyor ve düğmeler
       ALT ALTA yığılıyor. O sarma bir kusur değil, 44px'i kurtarmak için BİLEREK
       konmuş bir çözümdü; zıplamayı üreten de o.
       🦷 ARİTMETİK: 36+4+36 = 76 · hücre dolgusu dokunmatikte 24px → 100px gerekir.
          Dolgu aksiyon kolonunda 6px'e çekilince (masaüstü-fare bloğunda ZATEN öyle)
          76+12 = 88px yetiyor. Bu yüzden İKİSİ BİRDEN değişti; biri eksik kalsaydı
          sarma sürer ve satır yine zıplardı.
       🔴 Masaüstü-fare rejiminde 70px KALIR: orada düğme 26px (26+4+26+12 = 68 ≤ 70)
          ve kullanıcı kuralı "büyütme bişeyi" — dar ekranda gereken pay orada ALINMAZ. */
    --tbl-act-col:    88px;
}

/* Masaüstü + FARE: sıkı rejim. Dokunmatik geniş ekran (tablet) TABANDA kalır —
   orada 44px hedefler korunmalı.
   🔴 1.442.0 — kullanıcı: "yazı karakterlerini küçült, sütunlarda daha çok yer aç, yukarıdan aşağı daraltmaya çalış, bu TÜM
      TABLOLARDA aynı olsun". 2026-09-13'te 12px (9 punto) standardı konmuştu; Satınalma / Sipariş / Üretim ekranları o tarihten
      beri kendi kabuklarında 10,5px ve altına inmişti ve kullanıcı artık bunu her tabloda istiyor. TEK değişiklik bu token
      bloğudur: gövde 12 → 10,5 · başlık 10,5 → 9,5 · rozet / kod 10,5 → 9,5 · hücre içi girdi 11,5 → 10,5 · satır alt sınırı
      32 → 28 · hücre dolgusu 3 → 2 · başlık dolgusu 6 → 5. Hiçbir değer BÜYÜMEDİ; mutlak taban 9px korunur; hücre içi denetim
      yüksekliği (26px) değişmedi (yoğun yüzey tabanı 24px). Dokunmatik ve telefon değerleri (yukarıdaki :root) AYNEN. */
@media (min-width: 769px) and (pointer: fine) {
    :root {
        --tbl-row-h:     28px;
        --tbl-cell-py:    2px;
        --tbl-fs:       10.5px;
        --tbl-head-py:    5px;
        --tbl-head-fs:   9.5px;
        --tbl-ctl-h:     26px;
        --tbl-badge-fs:  9.5px;
        --tbl-code-fs:   9.5px;
        --tbl-ctl-fs:   10.5px;
        --tbl-date-col: 124px;   /* 11,5px puntoda maske 104px'e oturur (ölçüldü) */
        --tbl-act-col:   70px;   /* 26px düğme: 26+4+26+12 = 68 ≤ 70 (ölçüldü) */
    }
    /* 1.443.0 — SIĞDIRILMIŞ TABLODA PUNTO TABANI (tasarım ölçümü). Sığdırma kabı (`.is-sigdir`) tabloyu `--sigdir` oranında
       küçültür; ekranda görünen punto = punto × oran. Kolonları sabit px olan tabloda punto küçültmek YER AÇMAZ (oran aynı
       kalır), yalnız yazıyı küçültür: Cari 1280px'te başlık 7,2px'e inmişti. Burada punto orana göre GERİ BÜYÜR, böylece
       görünen yazı 9px'e çıkar; ama hiçbir zaman 1.442.0'daki değerin ÜSTÜNE çıkmaz (kolonlar o boya göre ölçülmüştü,
       rakam kırpılmaz). Sığan tabloda (oran 1) yeni, küçük punto aynen geçerlidir.
       🔴 Kendi tokenını kabukta ezen ekranlar (#pur-shell · #ord-shell · #prod-shell) DIŞARIDA: bu bildirim kabın içinde
          olduğu için kabuğun değerini ezer ve o ekranları BÜYÜTÜRDÜ. */
    .is-sigdir:where(:not(#pur-shell *, #ord-shell *, #prod-shell *)) {
        --tbl-fs:       clamp(10.5px, calc(9px / var(--sigdir, 1)), 12px);
        --tbl-head-fs:  clamp(9.5px,  calc(9px / var(--sigdir, 1)), 10.5px);
        --tbl-badge-fs: clamp(9.5px,  calc(9px / var(--sigdir, 1)), 10.5px);
        --tbl-code-fs:  clamp(9.5px,  calc(9px / var(--sigdir, 1)), 10.5px);
        --tbl-ctl-fs:   clamp(10.5px, calc(9px / var(--sigdir, 1)), 11.5px);
    }
}

/* BASKI: satir yuksekligi ALT SINIRI KALKAR.
   `pointer` medya ozelligi baskida `fine` DEGILDIR → token'lar dokunmatik tabanda
   (44px) kalirdi ve kagitta satirlar ekrandakinden YUKSEK basardi (sayfa basina daha
   az satir). Baskida satir icerigi kadardir; dolgu/yazi ekranin sikko rejimini izler. */
@media print {
    :root {
        --tbl-row-h:     auto;
        --tbl-cell-py:    4px;
        --tbl-fs:       10.5px;
        --tbl-head-py:    4px;
        --tbl-head-fs:   10px;
        --tbl-ctl-h:     20px;
        --tbl-badge-fs:  10px;
        --tbl-code-fs:   10px;
        --tbl-ctl-fs:    10px;
    }
}

/* ============================================================
   GECE MODU — değişken ezme (bileşenlerin çoğu var() kullandığı için otomatik uyar)
   ============================================================ */
html[data-peron-theme="dark"] {
    color-scheme: dark;
    /* Dolgulu mobil aksiyon butonları — üstünde beyaz metinle AA.
       Gece --pri #5b91c7'ye açılıyor ve beyazla 3.32:1'e düşüyor (14px/700 büyük metin
       sayılmaz → 4.5 gerekir). --green #6cae9c ise 2.57. */
    --pri-strong:     #3f6d9c;   /* beyazda 5.41:1 */
    /* 🔴🔴 BU TOKENIN OLCULMUS TAKASI (1.364.0 tarayici denetimi).
       Beyaz METIN kontrasti KAZANIR: --pri uzerinde 3,32 -> --pri-strong uzerinde
       5,41:1 (WCAG 1.4.3, esik 4,5 — NORMATIF olan bu).
       Ama DOLGUNUN ZEMINE karsi orani DUSER: koyu kartta (#18212e) 4,88 -> 2,99;
       #273341 kartta 3,86 -> 2,37. Metin-disi esik (1.4.11) 3,0.
       🔴 TAKAS SU KOSULLA KABUL EDILDI: "aktif/secili" durumu YALNIZ dolguyla
          degil, METIN RENGIYLE DE anlatiliyor. OLCULDU — kenarliksiz sekiz durum
          kuralinin HEPSINDE pasif hal `color: var(--text-secondary)` ya da
          `--text-muted`, aktif hal `var(--pri-on)`. Yani durum CIFT KODLU ve
          1.4.11'in "bilgi baska gorsel yolla da veriliyor" kosulu saglaniyor.
       🔴 BU KOSUL BIR KAPIYLA KORUNUYOR: `arac/olcum/t149_1364_tarayici_olcum.js`
          D bolumu. Biri pasif metni beyaza cekerse durum YALNIZ dolguya kalir,
          takas GECERSIZLESIR ve kapi ISIRIR.
       🔴 KENARLIK TASIYAN 21 kuralda soru zaten YOK (sinir kenarlikta).
       🔴 `.gl-subnav-item.is-active` BILEREK MUAF: gecede KOYU metin aliyor
          (`color: var(--content-bg)`), dolgu koyulasirsa kontrast 4,65 -> 2,85'e
          DUSERDI. Duzeltme degil, regresyon olurdu. */
    --green-strong:   #38705f;   /* beyazda 5.75:1 */

    /* 🔴 GECE MODUNDA DOLGU AYDINLANIR, MUREKKEP KOYULASIR (2026-09-13).
       ÖLÇÜLDÜ: beyaz metin --pri (#5b91c7) üzerinde 3,32:1 — AA eşiği 4,5.
       Açık temada aynı çift 4,91:1 geçiyordu çünkü orada --pri koyu (#3f74a8).
       Gece için aksanı KOYULAŞTIRMAK yanlış olurdu: --pri aynı zamanda koyu
       zeminde kenarlık/aktif vurgu rengi, koyulaşırsa görünmez olur. Doğrusu
       dolgunun üstündeki mürekkebi çevirmek.
       🔴 --pri-dark DA ÇEVRİLDİ: gece temasında degradenin KOYUYA gitmesi ters —
          koyu zeminde yüzey yükseldikçe AYDINLANIR. Eski #4a7cb0 ile koyu
          mürekkep 4,33:1'de kalıyordu (eşiğin altı); #6699cf ile geçiyor.
       🔴 Saf siyah kullanılmadı (palet kuralı): #0b1118 lacivert-siyah. */
    --pri:            #5b91c7;
    --pri-dark:       #3a6491;   /* beyazda 6,16:1 — birincil dolgunun koyu ucu */
    --pri-hover:      #6699cf;
    --pri-light:      rgba(91, 145, 199, 0.14);
    --pri-border:     rgba(91, 145, 199, 0.34);
    --pri-on:         #ffffff;
    /* 🔴 BEYAZ METIN TASIYAN DOLGU ICIN AYRI TOKEN (2026-09-13).
       ÖLÇÜLDÜ: beyaz / --pri (#5b91c7) = 3,32:1 — AA eşiği 4,5.
       İLK DENEDIĞIM YOL YANLIŞTI: --pri-on'u koyulaştırıp --pri-dark'ı
       aydınlatmak. Ölçtüm, YAN HASAR üretti — satır 2121/2572'deki tablo
       başlığı gradyanı da --pri-dark okuyor ve açılınca başlık metni
       2,49:1'e DÜŞTÜ. Aksan tokenine dokunmak çok geniş bir yüzeyi vurur.
       DOĞRUSU: aksanı yerinde bırakıp, beyaz metin taşıyan DOLGULAR için
       AYRI token kullanmak — `--pri-strong` bu dosyada ZATEN TANIMLI
       (satır ~30 açık #3f74a8 · satır ~359 gece #3f6d9c, ikisi de ölçülmüş).
       Yeni token UYDURMA; var olanı KULLAN. */
    --pri-soft:       rgba(91, 145, 199, 0.26);
    --pri-text:       #8fbbe6;

    --green:  #6cae9c;
    --cyan:   #7bb6a8;
    --amber:  #d68a4e;
    --rose:   #d76b71;
    --violet: #bda3c4;
    /* Ink türevleri METİN renkleridir (dolgu DEĞİL): --violet/--cyan koyu kartta zaten AA.
       --green/--rose ise tint'li zeminde AA'yı kaçırıyordu (ölçüldü: #6cae9c → 4,25:1,
       #d76b71 → 3,24:1) → yalnız METİN için açık varyant; dolgular --green/--rose'u kullanır. */
    --green-ink: #7dbdaa;
    --amber-ink: var(--amber);
    --rose-ink:  #e08890;
    /* 1.415.2 — gece uyarı yüzeyinde (#424035 bileşik) -ink 4,11 / 4,38:1 kalıyordu → 4,87 / 4,85:1. */
    --amber-ink-yuzey: #dc9c69;
    --rose-ink-yuzey:  #e3949b;
    --violet-ink: var(--violet);   /* dark: #bda3c4, #18212e kartta ~6.95:1 */
    /* Sipariş notu işareti: koyu kartta sarı dolgu zaten ≥9:1 öne çıkar; kenar açılır. */
    --not-sari:        #e8b52c;
    --not-sari-kenar:  #f3d06a;
    --not-sari-ink:    #241800;
    --cyan-ink:   var(--cyan);
    --shift-surface:        rgba(189, 163, 196, 0.20);
    --shift-surface-border: rgba(189, 163, 196, 0.42);

    --sb-bg:            #0b1119;
    --sb-bg-2:          #080d13;
    --sb-hover:         rgba(255, 255, 255, 0.05);
    --sb-active:        linear-gradient(135deg, var(--pri) 0%, var(--pri-hover) 100%);
    --sb-active-solid:  rgba(91, 145, 199, 0.28);
    --sb-border:        rgba(255, 255, 255, 0.07);
    --sb-text:          #aab6c4;
    --sb-text-bright:   #eef3f9;
    --sb-section-label: #6d7c8d;

    /* ── Sidebar yüzey/gölge tokenları = kurallarda eskiden duran literallerin BİREBİR kopyası.
       Gece modunda tarayıcıya giden nihai renkler değişmez. ── */
    --sb-raised:            rgba(255, 255, 255, 0.05);
    --sb-raised-hover:      rgba(255, 255, 255, 0.09);
    --sb-card:              rgba(255, 255, 255, 0.04);
    --sb-card-hover:        rgba(255, 255, 255, 0.08);
    --sb-control:           rgba(255, 255, 255, 0.08);
    --sb-control-hover:     rgba(255, 255, 255, 0.14);
    --sb-user-hover:        rgba(255, 255, 255, 0.08);
    --sb-ring-strong:       rgba(255, 255, 255, 0.14);
    --sb-scroll:            rgba(255, 255, 255, 0.10);
    --sb-inner-light:       rgba(255, 255, 255, 0.07);
    --sb-inner-light-hover: rgba(255, 255, 255, 0.10);
    --sb-lift:              0 2px 5px rgba(0, 0, 0, 0.38);
    --sb-lift-hover:        0 4px 9px rgba(0, 0, 0, 0.46);
    --sb-press:             inset 0 2px 4px rgba(0, 0, 0, 0.40);
    --sb-badge-lift:        0 2px 10px rgba(0, 0, 0, 0.35);
    --sb-edge-shadow:       1px 0 0 rgba(255, 255, 255, 0.07);
    --sb-drawer-shadow:     none;
    --sb-active-text:       #ffffff;
    --sb-soon-opacity:      0.38;
    --sb-bar-glow:          0 0 8px rgba(255, 255, 255, 0.6);
    --sb-plan-hover:        #0b1119;

    /* Çip reçetesi — eski ifadeleri matematiksel olarak yeniden üretir */
    --nav-chip-fb:      rgba(255, 255, 255, 0.05);
    --nav-chip-a:       18%;
    --nav-ring-a:       24%;
    --nav-ink-a:        72%;   --nav-ink-base: #ffffff;   /* ≡ eski color-mix(X 72%, #fff) */
    --nav-on-a:         0%;    --nav-on-base:  #ffffff;   /* mix(X 0%,#fff) = #fff  ≡ eski color:#fff */
    --nav-hi-a:         100%;  --nav-hi-base:  #ffffff;   /* mix(X 100%,#fff) = X   ≡ eski doygun gradyan */
    --nav-halo-a:       62%;
    --nav-gloss:        rgba(255, 255, 255, 0.42);
    --nav-shade:        rgba(0, 0, 0, 0.22);
    --nav-glyph-shadow: rgba(0, 0, 0, 0.34);
    --nav-row-a:        17%;
    --nav-row-ring-a:   30%;
    --nav-row-halo-a:   52%;
    --nav-bar-a:        100%;  --nav-bar-base: #ffffff;   /* mix(X 100%,#fff) = X ≡ eski var(--nav-c) */

    --content-bg:   #0f1620;
    --card-bg:      #18212e;
    --header-bg:    #141c27;

    --text-primary:   #e7edf4;
    --text-secondary: #b8c3d0;
    --text-muted:     #9eabba;

    --border:       #2a3543;
    /* 3,75:1 ölçüldü (#6b7b8f üzerinde #18212e) — 3:1 eşiğini geçiyor. */
    --border-ctl:   #6b7b8f;
    --border-light: #222c39;
    --switch-off:   #3f4d5e;

    --shadow-card:       0 2px 5px -1px rgba(0,0,0,0.40), 0 1px 3px -1px rgba(0,0,0,0.50);
    --shadow-card-hover: 0 7px 14px -3px rgba(0,0,0,0.50), 0 3px 6px -3px rgba(0,0,0,0.55);
    --shadow-modal:      0 30px 60px -12px rgba(0,0,0,0.65), 0 18px 36px -18px rgba(0,0,0,0.70);
    --shadow-toast:      0 4px 20px -2px rgba(0,0,0,0.45), 0 2px 6px -2px rgba(0,0,0,0.40);

    /* Hayalet-token yüzey/kenarları — gece modu (mint/mint-text/peach/pri-tint alias'ları zaten otomatik uyar) */
    --mint-surface:  rgba(94, 156, 139, 0.24);
    --peach-surface: rgba(214, 138, 78, 0.22);
    --amber-border:  rgba(214, 138, 78, 0.45);
    --bg-inset:      #1f2a37;

    /* Canlı durum göstergeleri — gece uyarlaması */
    --presence-on:  #3ddb80;
    --presence-off: #f0736d;
    --tick-read:    #5b91c7;
    --tick-sent:    #6b7889;
}

/* Gece modu okunabilirlik düzeltmeleri: literal açık-mod renk taşıyan bileşenlerin dark
   override'ları — aksi halde koyu zeminde metin/kutu okunmuyordu (yalnız dark scope, açık modu ETKİLEMEZ). */
html[data-peron-theme="dark"] .peron-spreadsheet .ss-cell { color: var(--text-primary); }
/* Düzenlenen (focus) hücrenin açık-literal zeminine (#e9f0ee) koyu metin yazınca görünmezdi
   → koyu focus tinti; --text-primary #e7edf4 ~7:1 okunur. */
html[data-peron-theme="dark"] .peron-spreadsheet .ss-cell:focus { background: var(--bg-inset); }
html[data-peron-theme="dark"] .peron-spreadsheet thead th { background: var(--bg-inset); color: var(--text-secondary); }
html[data-peron-theme="dark"] .pmsg-bubble.theirs,
html[data-peron-theme="dark"] .peron-cmsg-bubble.theirs { color: var(--text-primary); }
html[data-peron-theme="dark"] .peron-notes-area { background: var(--card-bg); color: var(--text-primary); }
html[data-peron-theme="dark"] .peron-btn.info { background: rgba(108, 174, 156, 0.16); color: var(--green); }

/* Sabit (var olmayan) açık zeminleri gece modunda koyulaştır — yüksek özgüllükle
   modüllerin JS ile enjekte edilen inline <style> bloklarını da ezer. */
html[data-peron-theme="dark"] .pl-table .pl-c-image { background: #131b25; }
html[data-peron-theme="dark"] #pkg-shell { --pkg-accent: #4fc4c4; --pkg-accent-soft: rgba(79, 196, 196, 0.16); }
html[data-peron-theme="dark"] #pkg-shell .icon-btn { background: var(--card-bg); border-color: var(--border); color: var(--text-muted); }
html[data-peron-theme="dark"] #pkg-shell .mod-recipe { background: #131b25; }
html[data-peron-theme="dark"] #pkg-shell table.rec-table td { border-bottom-color: var(--border); }
/* Opak açık amber/rose literalleri gece modunda AA'ya taşı (light dokunulmadı; özgüllük 0,3,1 → JS <style>'ı ezer). */
html[data-peron-theme="dark"] #pkg-shell .pc-bottle,
html[data-peron-theme="dark"] #pkg-shell .mod-stat.cap.bottle .ms-v,
html[data-peron-theme="dark"] #pkg-shell .rc-can.low { color: var(--amber); }
html[data-peron-theme="dark"] #pkg-shell .rc-ok { color: var(--green); }
html[data-peron-theme="dark"] #pkg-shell .icon-btn:hover { color: #e08890; border-color: rgba(215, 107, 113, 0.45); background: rgba(215, 107, 113, 0.12); }
html[data-peron-theme="dark"] #pkg-shell .rec-bottle-note { color: var(--amber); background: #2a2012; border-color: #3a2c17; }
/* Danger/sil buton hover'ları: opak açık-pembe (#fbeaec) → gece modunda subtle rose tint (renk/kenar zaten var(--rose) token'lı). */
html[data-peron-theme="dark"] .po-act-btn.danger:hover,
html[data-peron-theme="dark"] #bom-shell .bom-card .bc-del:hover,
html[data-peron-theme="dark"] #bom-shell .bom-del:hover,
html[data-peron-theme="dark"] .bom-attr-mini.danger:hover { background: rgba(215, 107, 113, 0.12); }
/* Toplu düzenleme grid'i: gece modunda beyaz input zemini (#fff) + açık metin = okunmaz (1.18:1) → koyu input + AA. */
html[data-peron-theme="dark"] #bulk-shell .bulk-in { background: var(--card-bg); border-color: var(--border); }
html[data-peron-theme="dark"] .pkgpick-list,
html[data-peron-theme="dark"] .pkgpick > input { background: var(--card-bg); border-color: var(--border); color: var(--text-primary); }
html[data-peron-theme="dark"] .pkgpick-item { border-bottom-color: var(--border); }
html[data-peron-theme="dark"] .pkgpick-item .pi-name { color: var(--text-primary); }
html[data-peron-theme="dark"] .pkgpick-item:hover { background: var(--pri-light); }
html[data-peron-theme="dark"] .po-ac-list { background: var(--card-bg); border-color: var(--border); }
/* Ürün ekle seçicisi (1.319.0) — açık zeminli panel/gölge gece modunda koyulaşsın. */
html[data-peron-theme="dark"] .po-pick-panel { background: var(--card-bg); border-color: var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
html[data-peron-theme="dark"] .peron-qty-btn,
html[data-peron-theme="dark"] .pl-qty-btn { background: var(--card-bg); }
html[data-peron-theme="dark"] img.peron-logo,
html[data-peron-theme="dark"] .peron-login-logo img { filter: brightness(0.95); }
/* 🔴 GECE MODU TABLO BAŞLIĞI — KONTRAST DÜZELTMESİ (1.257.1)
   Eski gradyan `--pri-dark → --pri → --pri-hover` idi. Gece modunda bu üçlü
   #4a7cb0 → #5b91c7 → #6699cf'e açılıyor ve beyaz başlık yazısıyla ölçülen kontrast:
       #4a7cb0 → 4,37   ·   #5b91c7 → 3,55   ·   #6699cf → 2,99   (AA eşiği 4,5)
   Yani şeridin SAĞ UCU 2,99'a kadar düşüyordu. Bu, Raporlar'a özel değil UYGULAMA
   GENELİYDİ: Cari, Satınalma ve Mali Özet ekranlarında da birebir aynı ölçüldü.

   🔴 ÖLÇÜM DERSİ: beyaz metin için EN KÖTÜ DURUM gradyanın EN AÇIK durağıdır.
   Ölçerken "en koyu durağı al" demek 4,37 gibi iyimser bir sayı üretir ve gerçek
   ihlali (2,99) GİZLER. Gradyanlı zeminde her durağı ayrı ölç, en kötüsünü raporla.

   Yeni duraklar ayrı token'lardan gelir (tek kaynak) ve ÜÇÜ DE AA geçer:
       #2f5480 → 7,78   ·   #3a6491 → 6,15   ·   #44729f → 5,06
   Gündüz teması DEĞİŞMEZ — kural yalnız dark seçicisinin altındadır. */
html[data-peron-theme="dark"] {
    --tbl-head-1: #2f5480;
    --tbl-head-2: #3a6491;
    --tbl-head-3: #416e9a;
    /* 🔴 AŞAMA/DURUM ÇİPİ TOKENLERİ GECE MODUNDA HİÇ EZİLMİYORDU (1.270.0'da ölçüldü).
       `--st-*` ailesi yalnız `:root`ta tanımlıydı → koyu kartın (#18212e, L≈0,014)
       üzerinde çip zemini #eef1f5 (L=0,872) kalıyor, yani kabından **62 KAT** parlak
       bir ışık adası oluyordu (mobil listede 12 yama sayıldı). Çipin kendi kontrastı
       geçiyordu; sorun kontrast değil TEMA TUTARLILIĞIYDI.
       Tek yazıcı: bu blok satınalma, üretim ve plan çiplerinin HEPSİNİ düzeltir —
       ikinci bir kopya YAZILMAZ. Her çift AA (≥4,5:1) hedefiyle seçildi. */
    --st-wait-bg: #232f3d;  --st-wait-fg: #aab7c6;  --st-wait-bd: #31404f;
    --st-cut-bg:  #1c2c3d;  --st-cut-fg:  #7fb3e8;  --st-cut-bd:  #284258;
    --st-sew-bg:  #163330;  --st-sew-fg:  #74cbbd;  --st-sew-bd:  #214743;
    --st-uph-bg:  #2a2440;  --st-uph-fg:  #b6a2e0;  --st-uph-bd:  #3a3157;
    --st-pack-bg: #33281a;  --st-pack-fg: #e0b075;  --st-pack-bd: #4a3a24;
    --st-done-bg: #1b3126;  --st-done-fg: #7fc99b;  --st-done-bd: #254634;
    --st-ship-bg: #143036;  --st-ship-fg: #74c2d1;  --st-ship-bd: #1f454e;
    --st-canc-bg: #331f21;  --st-canc-fg: #e08f95;  --st-canc-bd: #4a2c2f;

    /* Grafik aşama paleti — gece. Aynı tonlar açıldı; koyu kart zemininde
       (#161f2b) ölçülen en düşük kontrast 6,35:1. */
    --pg-st-wait: #9aa6b6;
    --pg-st-plan: #a49df5;
    --pg-st-cut:  #6ab4f0;
    --pg-st-sew:  #4fc7cd;
    --pg-st-uph:  #e58fc7;
    --pg-st-pack: #eda85e;
    --pg-st-done: #6ec98c;
    --pg-st-ship: #bcd75f;
    --pg-st-canc: #ef8078;

    /* Kategorik grafik paleti — gece. AYNI altı ton, koyu zemin için adımlandı
       (otomatik çevirme DEĞİL: gece bandı L 0,48-0,67 dar, ayrı seçildi).
       Gece zemininde altısı da ≥3:1 — rahatlama kuralı burada devreye girmez. */
    --pg-k1: #3987e5;
    --pg-k2: #d95926;
    --pg-k3: #199e70;
    --pg-k4: #c98500;
    --pg-k5: #d55181;
    --pg-k6: #008300;
}
/* 🔴 9,5px'lik şerit etiketi gece modunda `--text-muted` ile 4,37:1 ölçüldü (AA 4,5
   ister). Punto büyütmek KURTARMAZ — "büyük metin" eşiği 18,66px. Renk değişir. */
html[data-peron-theme="dark"] .pur-dd-lbl { color: var(--text-secondary); }
html[data-peron-theme="dark"] .peron-table thead { background: linear-gradient(120deg, var(--tbl-head-1) 0%, var(--tbl-head-2) 55%, var(--tbl-head-3) 100%); }
html[data-peron-theme="dark"] .pl-table .pl-h { background: linear-gradient(120deg, var(--tbl-head-1) 0%, var(--tbl-head-2) 55%, var(--tbl-head-3) 100%); }
/* 🔴 SABIT "İşlemler" BASLIGI GECE OVERRIDE'INDAN KACIYORDU (2026-09-13).
   `.peron-table--fixed thead th.col-actions` kendi --pri gradyanini DAHA OZGUL
   bir kuralla yeniden uyguluyor; ustteki --tbl-head duzeltmesi ona ulasmiyordu.
   OLCULDU: beyaz metin 2,99:1 (esik 4,5). Ayni gradyana baglandi. */
html[data-peron-theme="dark"] .peron-table--fixed thead th.col-actions { background: linear-gradient(120deg, var(--tbl-head-1) 0%, var(--tbl-head-2) 55%, var(--tbl-head-3) 100%); }
/* Personel kartı rozet/etiket ink'leri — gece modunda koyu ink koyu tint üzerinde okunmuyordu;
   kanonik dark token'larıyla okunur kılınır (light stiller değişmez, yalnız dark override). */
html[data-peron-theme="dark"] .prsnl-badge.pay-monthly,
html[data-peron-theme="dark"] .prsnl-login-tag { color: var(--pri-text); }
html[data-peron-theme="dark"] .prsnl-badge.pay-piece,
html[data-peron-theme="dark"] .prsnl-bal b.owe { color: var(--green); }
html[data-peron-theme="dark"] .prsnl-badge.pay-daily,
html[data-peron-theme="dark"] .prsnl-mode-tag,
html[data-peron-theme="dark"] .prsnl-dept { color: var(--amber); }
html[data-peron-theme="dark"] .prsnl-mgr-tag { color: var(--violet); }
html[data-peron-theme="dark"] .prsnl-complete-tag { color: var(--green); }

/* ============================================================
   RESET & TEMEL
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================================
   BODY — WP CHROME GİZLEME
   ============================================================ */
body.peron-active {
    font-family: var(--font);
    background: var(--content-bg);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WordPress yönetim çubuğu ve menüsü */
body.peron-active #wpadminbar,
body.peron-active #adminmenuwrap,
body.peron-active #adminmenuback,
body.peron-active #adminmenu,
body.peron-active #wpfooter,
body.peron-active .site-header,
body.peron-active .site-footer,
body.peron-active #masthead,
body.peron-active #colophon,
body.peron-active .navigation-top,
body.peron-active nav.navigation-top {
    display: none !important;
}

body.peron-active #wpcontent,
body.peron-active #wpbody,
body.peron-active #wpbody-content {
    margin-left: 0 !important;
    padding-top: 0 !important;
}

body.peron-active #wpwrap {
    min-height: 100vh;
    overflow: hidden;
}

/* Genel scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-full); }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   KÖK PANEL
   ============================================================ */
#peron-panel-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--content-bg);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   ANA DÜZEN
   ============================================================ */
/* 🔴 PANELİN KENDİ TABAN PUNTOSU YOKTU (2026-09-13'te ölçüldü, düzeltildi).
   Panel hiçbir yerde `font-size` belirtmiyordu; kuralı olmayan her metin
   WordPress temasının gövde puntosunu miras alıyordu — bu kurulumda **14px**.
   ÖLÇÜLDÜ: `.peron-card-body` 14px hesaplanıyordu, yani "Sevkiyat Raporu"
   kartındaki uyarı düğmesi gibi kendi kuralı olmayan her öğe 13-14px'e
   çıkıyordu. Bu, tek tek kural avlayarak kapatılamayacak bir sızıntıydı:
   kaynak temaydı, panel değil.
   🔴 BAŞKA TEMADA BAŞKA SONUÇ verirdi — 16px'lik bir temada tüm panel şişerdi.
      Taban artık panelin kendi sözleşmesi: 12px = 9 punto (kullanıcı kuralı).
   🔴 `em` RİSKİ ÖLÇÜLDÜ: dosyada em tabanlı tek bir punto var (.88em), rem 2
      kullanım — taban değişikliği hiçbir kutu ölçüsünü kaydırmıyor.
   🔴 FORM DENETİMLERİ MİRAS ALMAZ (UA kendi puntosunu verir); onların kuralı
      ayrıdır ve mobilde 16px zorunluluğu (iOS zoom) YERİNDE DURUR. */
.peron-layout {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: var(--content-bg);
    font-size: 12px;
}

/* ============================================================
   SİDEBAR
   ============================================================ */
.peron-sidebar {
    width: var(--sb-w);
    min-width: var(--sb-w);
    height: 100vh;
    background: var(--sb-bg);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: width var(--tr-normal), min-width var(--tr-normal);
    z-index: 100;
    overflow: hidden;
    border-right: 1px solid var(--sb-border);
    flex-shrink: 0;
    box-shadow: var(--sb-edge-shadow);
}

/* collapsed sidebar her zaman dar (60px). Laptop orta-aralığında (769–1440) peron-app.js
   otomatik ekler → geniş tablolara yer açar; "mini menü" tercihi (sidebar_mini) her
   genişlikte korunur. ≤768'de mobil çekmece kuralı (width 240px !important) bunu ezer. */
.peron-sidebar.collapsed {
    width: var(--sb-w-col);
    min-width: var(--sb-w-col);
}

/* ── Sidebar Header ── */
.peron-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 16px;
    height: 64px;
    border-bottom: 1px solid var(--sb-border);
    flex-shrink: 0;
    gap: 10px;
}

/* Firma kimliği — kenar çubuğunun sol üstünde (firma logosu + ad/kod) */
.peron-company-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.peron-company-head .company-avatar.co-has-logo {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.peron-sidebar.collapsed .peron-sidebar-header {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: auto;
    padding: 8px 0;
}

.peron-sidebar.collapsed .peron-company-head {
    justify-content: center;
    flex: 0 0 auto;
}

.peron-sidebar.collapsed .peron-company-head .company-avatar.co-has-logo {
    width: 36px;
    height: 36px;
}

.peron-sidebar-brand {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    opacity: 1;
    max-width: 170px;
    transition: opacity var(--tr-normal), max-width var(--tr-normal);
    white-space: nowrap;
}

.peron-sidebar.collapsed .peron-sidebar-brand {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

.peron-sidebar-brand h2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-text-bright);
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.peron-sidebar-brand small {
    font-size: 10px;
    font-weight: 500;
    color: var(--sb-section-label);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

.peron-sidebar-collapse {
    /* 🔴 MASAÜSTÜNDE DE GÖRÜNÜR. Eskiden `display:none` idi ve otomatik daraltma
       1440px'in altında devreye girince kullanıcının menüyü geri açmasının HİÇBİR
       yolu yoktu (tek ayar olan `sidebar_mini` tersini yapıyor). */
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    background: var(--sb-control);
    border: 1px solid var(--sb-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--sb-text);
    transition: background var(--tr-fast), color var(--tr-fast);
    flex-shrink: 0;
}

.peron-sidebar-collapse:hover {
    background: var(--sb-control-hover);
    color: var(--sb-text-bright);
}

.peron-sidebar-collapse svg {
    width: 14px;
    height: 14px;
    transition: transform var(--tr-normal);
}

.peron-sidebar.collapsed .peron-sidebar-collapse svg {
    transform: rotate(180deg);
}

/* 🔴 Daraltılmış menüde düğme GİZLENEMEZ: menüyü geri açmanın TEK yolu odur.
   Başlık ikon moduna geçtiğinde düğme ortalanır ve dokunma hedefi korunur. */
.peron-sidebar.collapsed .peron-sidebar-header { justify-content: center; }
.peron-sidebar.collapsed .peron-sidebar-collapse { display: flex; margin: 0 auto; }

/* ── Şirket Rozeti ── */
.peron-company-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    margin: 8px 10px 4px;
    background: var(--sb-card);
    border: 1px solid var(--sb-border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
    overflow: hidden;
    flex-shrink: 0;
}

.peron-company-badge:hover {
    background: var(--sb-card-hover);
    border-color: var(--sb-ring-strong);
    box-shadow: var(--sb-badge-lift);
}

.peron-sidebar.collapsed .peron-company-badge {
    justify-content: center;
    padding: 9px;
}

.company-avatar {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--cyan-strong), var(--pri-strong));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    letter-spacing: -0.5px;
}

/* Firma logosu yüklendiğinde kutucuk büyür; logo kırpılmadan (contain) sığar */
.company-avatar.co-has-logo {
    width: 48px;
    height: 48px;
    border-radius: 11px;
}

.company-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 7px;
    display: block;
}

.company-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    max-width: 170px;
    transition: opacity var(--tr-normal), max-width var(--tr-normal);
}

.peron-sidebar.collapsed .company-info {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

.company-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.company-code {
    font-size: 10.5px;
    color: var(--sb-section-label);
    font-weight: 500;
    white-space: nowrap;
    margin-top: 1px;
    letter-spacing: 0.3px;
}

/* ── Navigasyon ── */
.peron-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-scroll) transparent;
}

.peron-nav::-webkit-scrollbar { width: 3px; }
.peron-nav::-webkit-scrollbar-thumb {
    background: var(--sb-scroll);
    border-radius: var(--r-full);
}

.peron-nav-section {
    margin-bottom: 2px;
}

.peron-nav-section-label {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--sb-section-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 8px 5px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: opacity var(--tr-normal), height var(--tr-normal), padding var(--tr-normal);
    height: auto;
}

.peron-sidebar.collapsed .peron-nav-section-label {
    opacity: 0;
    height: 0;
    padding: 0;
    pointer-events: none;
}

/* ─── Sidebar akordiyon: bölüm başlıkları açılır-kapanır ──────────────────
   Başlık .peron-nav-section-label sınıfını korur (mikro-tipografi aynı);
   burada yalnız kutu davranışı + chevron + katlanma animasyonu eklenir. */
/* Ana başlıklar = kabartılmış (3D) buton; alt sekmelerden belirgin ayrışır. Sidebar
   her iki temada da koyu → beyaz iç-ışık + siyah dış-gölge kabartma etkisi verir. */
.peron-nav-acc > .peron-nav-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    margin: 0 0 4px;
    background: var(--sb-raised);
    border: 1px solid var(--sb-border);
    cursor: pointer;
    font-family: inherit;
    /* 🔴 12 → 11px (1.405.6, kullanıcı: "ana sayfadaki 'İnsan Kaynakları' yazısı ekrana sığmadığı için
       kelime yarıda kesiliyor … gerekirse yazı boyutunu küçült"). Ölçüldü (1440px, 240px kenar çubuğu):
       "İNSAN KAYNAKLARI" 12px'te 126px, başlık yuvası açıkken 126px (pay 0), katlıyken 136px ama
       "buradasın" noktası +11px → 137px, üç noktaya düşüyordu. 11px'te 115,5px. Bütün bölüm
       başlıkları BİRLİKTE küçüldü (hiyerarşi); Raporlar maddesi aynı ölçüyü taşır (aşağıda). */
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--sb-text-bright);
    text-align: left;
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--sb-inner-light), var(--sb-lift);
    transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}

.peron-nav-acc > .peron-nav-acc-toggle:hover {
    background: var(--sb-raised-hover);
    color: var(--sb-text-bright);
    box-shadow: inset 0 1px 0 var(--sb-inner-light-hover), var(--sb-lift-hover);
    transform: translateY(-1px);
}

.peron-nav-acc > .peron-nav-acc-toggle:active {
    transform: translateY(1px);
    box-shadow: var(--sb-press);
}

.peron-nav-acc > .peron-nav-acc-toggle:focus-visible {
    outline: 2px solid var(--pri);
    outline-offset: -2px;
}

.peron-nav-acc > .peron-nav-acc-toggle .nav-acc-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-acc-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-section-label);
    transition: color var(--tr-fast);
}

.nav-acc-icon svg { width: 100%; height: 100%; }

.peron-nav-acc > .peron-nav-acc-toggle:hover .nav-acc-icon { color: var(--sb-text-bright); }

/* Katlıyken (içinde aktif sayfa) başlık ikonu da vurgulanır — tek çelik mavi yerine
   bölümün KENDİ modül rengiyle (kapalı bölümde renk kodu tek ipucu). */
.peron-nav-acc.is-collapsed.has-active > .peron-nav-acc-toggle .nav-acc-icon {
    color: var(--sb-text-bright);
    color: color-mix(in srgb, var(--nav-c,#5793b8) var(--nav-ink-a,52%), var(--nav-ink-base,#0d1622));
}

.nav-acc-chevron {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.65;
    transform: rotate(-90deg);            /* kapalı: sağa bakar */
    transition: transform var(--tr-normal), opacity var(--tr-fast);
}

.peron-nav-acc:not(.is-collapsed) > .peron-nav-acc-toggle .nav-acc-chevron {
    transform: rotate(0deg);              /* açık: aşağı bakar */
    opacity: 0.9;
}

.peron-nav-acc > .peron-nav-acc-toggle:hover .nav-acc-chevron { opacity: 1; }

/* ─── ALT akordiyon (bölüm İÇİNDE açılan başlık — ör. Muhasebe → Faturalar) ──
   Aynı mekanizma, FARKLI ağırlık: ana bölüm başlığı kabartılmış 3D bir butondur;
   alt başlık bir nav öğesi GİBİ görünmeli, yoksa iki hiyerarşi düzeyi aynı
   görsel ağırlıkta çıkar ve kullanıcı hangisinin neyin içinde olduğunu okuyamaz.
   🔴 Özgüllük ana kuralla EŞİT (0,2,1) → bu blok ondan SONRA gelmek ZORUNDA.
   Ölçü: yükseklik 38px (nav öğesiyle birebir), dokunma hedefi 38px yükseklik ×
   tam genişlik; 44px'lik dokunma kuralı satır YÜKSEKLİĞİYLE değil, ::after ile
   büyütülür (aşağıda) — satırı 44px yapmak listeyi seyreltirdi. */
.peron-nav-sub > .peron-nav-acc-toggle {
    min-height: 38px;
    padding: 0 10px;
    margin: 1px 0 2px;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--sb-text);
    border-radius: var(--r-md);
    position: relative;
}
.peron-nav-sub > .peron-nav-acc-toggle:hover {
    background: var(--sb-hover, rgba(255, 255, 255, .06));
    box-shadow: none;
    transform: none;
    color: var(--sb-text-bright);
}
.peron-nav-sub > .peron-nav-acc-toggle:active { transform: none; box-shadow: none; }

/* Dokunma hedefi ≥44px — satır yüksekliğini büyütmeden, görünmez bir tampon ile.
   🔴 Bu desen KAPSAYICI ya da ELEMANIN KENDİSİ overflow'u kırpıyorsa ÖLÜR.
   Sidebar'ın nav listesi dikey kaydırır (overflow-y:auto) ama YATAY kırpmaz ve
   tampon yalnız dikeyde taşar → hedef canlı kalır. */
.peron-nav-sub > .peron-nav-acc-toggle::after {
    content: '';
    position: absolute;
    inset: -3px 0;
}

/* Alt akordiyonun kendi öğeleri bir kademe daha içeride başlar (hiyerarşi görünür
   olsun). Ana bölümün 12px'i ÜSTÜNE gelir → toplam 24px. */
.peron-sidebar:not(.collapsed) .peron-nav-sub .peron-nav-section-inner { padding-left: 12px; }

/* Açıkken başlık vurgulanır; içinde aktif sayfa varsa nokta işareti ana bölümle
   aynı kuraldan gelir (.is-collapsed.has-active) — burada tekrarlanmaz. */
.peron-nav-sub:not(.is-collapsed) > .peron-nav-acc-toggle { color: var(--sb-text-bright); }

/* Mini/ikon modda ana başlıklar gizleniyor; alt başlık da gizlenir ve öğeleri
   ikon olarak görünür kalır (ana bölümle AYNI davranış). */
.peron-sidebar.collapsed .peron-nav-sub > .peron-nav-acc-toggle { display: none; }

/* İçerik: grid 0fr↔1fr — JS ile yükseklik ölçmeden yumuşak katlanma */
.peron-nav-section-items {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--tr-normal);
}

.peron-nav-section-inner {
    overflow: hidden;
    min-height: 0;
}

/* Alt sekmeleri ana (3D) başlıktan görsel olarak ayırmak için biraz sağa kaydır.
   Yalnız geniş sidebar + akordiyon içi: mini/ikon modda öğeler ortalı kalır. */
.peron-sidebar:not(.collapsed) .peron-nav-acc .peron-nav-section-inner {
    padding-left: 12px;
}

/* Katlama YALNIZ geniş sidebar'da; mini/ikon modda tüm öğeler görünür kalır */
.peron-sidebar:not(.collapsed) .peron-nav-acc.is-collapsed .peron-nav-section-items {
    grid-template-rows: 0fr;
}

/* Katlıyken linkleri odak sırasından çıkar (Tab görünmez linke gitmesin).
   Gizlemeyi katlanma animasyonu (0.22s) kadar geciktir → kayarak kapanış korunur;
   açılışta gecikmesiz görünür. Mini modda muaf (:not(.collapsed) sayesinde). */
.peron-sidebar:not(.collapsed) .peron-nav-acc:not(.is-collapsed) .peron-nav-section-inner {
    transition: visibility 0s;
}
.peron-sidebar:not(.collapsed) .peron-nav-acc.is-collapsed .peron-nav-section-inner {
    visibility: hidden;
    transition: visibility 0s linear 0.22s;
}

/* Mini/ikon mod: akordiyon başlığını da tamamen gizle (label gibi)
   🔴 visibility ŞART: opacity:0 düğmeyi Tab sırasında bırakıyordu (1024px'te 4 görünmez
   odak durağı, 29×2px — kenarlık + margin sıfırlanmadığı için). */
.peron-sidebar.collapsed .peron-nav-acc > .peron-nav-acc-toggle {
    min-height: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
}

/* Katlıyken içinde aktif sayfa varsa başlıkta ince "buradasın" işareti
   (aktif bölüm normalde otomatik açılır; bu yalnız kullanıcı elle kapatırsa) */
.peron-nav-acc.is-collapsed.has-active > .peron-nav-acc-toggle { color: var(--sb-text-bright); }
.peron-nav-acc.is-collapsed.has-active > .peron-nav-acc-toggle .nav-acc-title::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--pri);
    vertical-align: middle;
}

.peron-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 10px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
    color: var(--sb-text);
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 1px;
}

/* Aktif item sol çizgi göstergesi */
.peron-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 18px;
    background: var(--pri);
    border-radius: 0 3px 3px 0;
    transition: transform var(--tr-spring);
    flex-shrink: 0;
}

.peron-nav-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

/* Collapsed sidebar: overflow visible so tooltip can escape */
.peron-sidebar.collapsed {
    overflow: visible;
}

.peron-sidebar.collapsed .peron-nav-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: var(--text-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--r-md);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tr-fast), transform var(--tr-fast);
    z-index: 500;
    box-shadow: var(--shadow-toast);
}

.peron-sidebar.collapsed .peron-nav-item[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.peron-sidebar.collapsed .peron-nav-item {
    justify-content: center;
    padding: 0 10px;
    overflow: visible;
}

.peron-nav-item:hover {
    background: var(--sb-hover);
    color: var(--sb-text-bright);
}

/* 🔴 Bu üç blok modül renk sistemi (dosya sonu) tarafından EZİLİR; buradaki değerler
   color-mix desteklenmeyen tarayıcıda geçerli olan düz yedeklerdir. */
.peron-nav-item.active {
    background: var(--sb-active-solid);
    color: var(--sb-active-text);
    font-weight: 600;
}

.peron-nav-item.active .nav-icon {
    color: var(--sb-active-text);
}

.peron-nav-item.active::before {
    background: var(--nav-c2, #2b5fac);
    box-shadow: var(--sb-bar-glow, none);
}

.peron-nav-item.peron-nav-soon {
    opacity: var(--sb-soon-opacity, 0.38);
    cursor: not-allowed;
    pointer-events: none;
}

.nav-icon {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sb-section-label);
    transition: color var(--tr-fast);
}

.peron-nav-item:hover .nav-icon {
    color: var(--sb-text-bright);
}

.nav-icon svg {
    width: 100%;
    height: 100%;
}

.nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--tr-normal);
}

.peron-sidebar.collapsed .nav-label {
    display: none;
}

.nav-badge-soon {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: rgba(63, 116, 168, 0.10);
    color: var(--pri-text);
    padding: 2px 7px;
    border-radius: var(--r-full);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 1;
    transition: opacity var(--tr-normal);
}

.peron-sidebar.collapsed .nav-badge-soon,
.peron-sidebar.collapsed .nav-badge-msg {
    display: none;
}

/* ── Sidebar Footer ── */
.peron-sidebar-footer {
    border-top: 1px solid var(--sb-border);
    padding: 10px;
    flex-shrink: 0;
}

.peron-user-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--tr-fast);
    overflow: hidden;
}

.peron-user-card:hover {
    background: var(--sb-user-hover);
}

.peron-sidebar.collapsed .peron-user-card {
    justify-content: center;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--pri-strong), var(--violet-strong));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.3px;
}

.user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    max-width: 140px;
    transition: opacity var(--tr-normal), max-width var(--tr-normal);
}

.peron-sidebar.collapsed .user-info {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

.user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--sb-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 10.5px;
    color: var(--sb-section-label);
    white-space: nowrap;
    margin-top: 1px;
    font-weight: 500;
}

.logout-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--sb-section-label);
    transition: background var(--tr-fast), color var(--tr-fast), opacity var(--tr-normal);
    flex-shrink: 0;
}

.peron-sidebar.collapsed .logout-btn {
    opacity: 0;
    pointer-events: none;
}

.logout-btn:hover {
    background: rgba(194, 84, 90, 0.15);
    color: var(--rose);
}

.logout-btn svg {
    width: 15px;
    height: 15px;
}

/* ============================================================
   ANA ALAN
   ============================================================ */
.peron-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    min-width: 0;
}

/* ── Header ── */
.peron-header {
    height: var(--hdr-h);
    min-height: var(--hdr-h);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px 0 16px;
    gap: 12px;
    z-index: 50;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(50,50,93,0.04);
}

.peron-header-toggle {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--text-secondary);
    transition: background var(--tr-fast), color var(--tr-fast);
    flex-shrink: 0;
}

.peron-header-toggle:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

.peron-header-toggle svg {
    width: 18px;
    height: 18px;
}

.peron-breadcrumb {
    flex: 0 1 auto;
    min-width: 0;
}

.peron-breadcrumb .page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.peron-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 5px 6px;
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
}

/* ── Tarih & Saat ── */
.peron-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 4px 10px;
    background: var(--border-light);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    gap: 0;
    min-width: 90px;
}
.peron-datetime-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: .01em;
}
.peron-datetime-date {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
@media (max-width: 600px) { .peron-datetime { display: none; } }

/* ── Canlı Nokta ── */
.peron-live-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(94, 156, 139, 0.07);
    border: 1px solid rgba(94, 156, 139, 0.18);
    border-radius: var(--r-full);
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--green);
    animation: peron-pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}

.live-dot.offline {
    background: var(--rose);
    animation: none;
}

.live-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--green-ink);
    letter-spacing: 0.2px;
    white-space: nowrap;
    display: none;
}

@media (min-width: 640px) {
    .live-label { display: inline; }
}

/* ============================================================
   İÇERİK ALANI
   ============================================================ */
.peron-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--content-bg);
    padding: 22px;
    scrollbar-width: thin;
    scrollbar-color: #cdd5df transparent;
}

.peron-content::-webkit-scrollbar { width: 5px; }
.peron-content::-webkit-scrollbar-thumb { background: #cdd5df; border-radius: var(--r-full); }

/* ── Yükleniyor ── */
.peron-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 320px;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.peron-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(63, 116, 168, 0.15);
    border-top-color: var(--pri-text);
    border-radius: var(--r-full);
    animation: peron-spin 0.7s linear infinite;
}

/* ── Sayfa Girişi ── */
.peron-page-enter {
    animation: peron-page-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* 🔴🔴 SESSİZ ÇİZİMDE GİRİŞ ANİMASYONU YOK (1.342.0).
   Başka bir kullanıcının değişikliği salt-okunur bir ekranı tazelediğinde sayfa
   YENİDEN ÇİZİLİR; animasyon da yeniden tetiklenirse ekran "kendi kendine açılır"
   ve kullanıcı bunu SAYFA YENİLENMESİ diye okur — kaldırmaya çalıştığımız hissin
   ta kendisi. Bayrağı `sessizCiz()` koyar ve çizim biter bitmez KALDIRIR, yani
   kullanıcının KENDİ sayfa geçişleri animasyonlu kalmaya devam eder.
   🔴 Bayrak `#peron-content` ÜZERİNDE: o düğüm çizim boyunca YAŞAR (yalnız
      `innerHTML`i değişir), içindeki `.peron-page-enter` ise her çizimde YENİDEN
      DOĞAR — bayrağı içeri koymak imkânsızdı. */
#peron-content[data-sessiz] .peron-page-enter { animation: none; }

/* ── Sayfa Başlık Alanı ── */
.peron-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
/* Başlık altındaki aksiyon-buton grupları (inline display:flex, flex-wrap YOK) dar
   ekranda tek parça olup taşıyordu → doğrudan div çocukları sarsın, kırpma olmasın. */
.peron-page-header > div { flex-wrap: wrap; }

.peron-page-header h1,
.peron-page-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.peron-page-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 400;
    line-height: 1.5;
}

/* Genel Bakış başlık bandı — bildirim zilinin altındaki boş alana yerleşen marka logosu */
.peron-dash-logo {
    height: 54px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.96;
}

.peron-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   İSTATİSTİK KARTLARI
   ============================================================ */
.peron-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.peron-stat-card {
    background: var(--card-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--border);
    transition: box-shadow var(--tr-normal), transform var(--tr-normal), border-color var(--tr-normal);
    position: relative;
    overflow: hidden;
}

/* 🔴 DEKORATİF PARILTI + YÜZEN KART KALDIRILDI (2026-09-13).
   Global tasarım kuralı birebir: "Floating feature kartları yasak — ekranda
   'yüzen' gölgeli beyaz kartlar" ve "Motion motivasyonlu: animasyon varsa bir
   nedeni olsun". Buradaki üçü de nedensizdi: 64px'lik degrade örtü, imleçle
   3px yükselme ve renkli 32px gölge. Kurumsal panelde KPI satırı okunacak bir
   veridir, tıklanacak bir kart değil — hareketi yalnız KENAR RENGİ bildirir.
   🔴 `--stat-glow` değişkeni .stat-icon.<renk> varyantlarında hâlâ TANIMLI ama
      artık okunmuyor; varyantları bozmamak için oradan silinmedi. */
.peron-stat-card:hover { border-color: var(--pri-border); }

/* Anlam, renkli üst şeritle değil ikon tonuyla taşınır (temiz, kurumsal) */

/* 🔴 DEGRADE FAYANS → DÜZ TON, YALNIZ KPI KARTINDA (2026-09-13).
   .stat-icon.<renk> varyantları `linear-gradient(145deg…)` + renkli 16px gölge
   taşıyor; bu, kuralların yasakladığı "degrade + yüzen" dilidir ve dört özdeş
   parlak fayans KPI satırını bir pazarlama şeridine çeviriyordu. Burada zemin
   sessiz bir tona, glif RENGE döner — anlam kaybolmaz, gürültü gider.
   🔴 KAPSAM DAR: yalnız `.peron-stat-card` içi. `.peron-filter-card .stat-icon`
      beyaz glif + dolu zemin ile çalışıyor ve varyant zeminine BAĞIMLI —
      oraya dokunulursa glif okunmaz hale gelir.
   🔴 `!important` KULLANILMADI (proje kuralı 6). Varyantlar `.stat-icon.indigo`
      biçiminde 0,2,0 özgüllükte ve dosyada BURADAN SONRA duruyor; eşit özgüllükte
      sonraki kazanırdı. Çözüm özgüllüğü bir sınıf artırmak: `.peron-stat-card
      .stat-icon.indigo` = 0,3,0. Ölçüldü: altı varyantın altısı da devralınıyor.
   🔴 Glif rengi `--*-ink` — bunlar beyazda 4,92-5,64:1 ÖLÇÜLMÜŞ metin tonlarıdır;
      ham `--violet` (2,9:1) ve `--cyan` (2,68:1) glif olarak AA'yı geçmez. */
.peron-stat-card .stat-icon { border-radius: 8px; }
.peron-stat-card .stat-icon.indigo,
.peron-stat-card .stat-icon.green,
.peron-stat-card .stat-icon.cyan,
.peron-stat-card .stat-icon.amber,
.peron-stat-card .stat-icon.rose,
.peron-stat-card .stat-icon.violet {
    background: color-mix(in srgb, currentColor 13%, transparent);
    box-shadow: none;
}
.peron-stat-card .stat-icon.indigo { color: var(--pri-text); }
.peron-stat-card .stat-icon.green  { color: var(--green-ink); }
.peron-stat-card .stat-icon.cyan   { color: var(--cyan-ink); }
.peron-stat-card .stat-icon.amber  { color: var(--amber-ink); }
.peron-stat-card .stat-icon.rose   { color: var(--rose-ink); }
.peron-stat-card .stat-icon.violet { color: var(--violet-ink); }

/* Stat ikon renk varyantları */
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--tr-normal), box-shadow var(--tr-normal);
    position: relative;
    z-index: 1;
    color: #fff;
}

.stat-icon svg { width: 21px; height: 21px; }

.stat-icon.indigo { background: linear-gradient(145deg, var(--pri) 0%, var(--pri-dark) 100%); box-shadow: 0 6px 16px -4px rgba(63, 116, 168, 0.55); --stat-glow: linear-gradient(180deg, rgba(63,116,168,0.14), transparent); }
.stat-icon.green  { background: linear-gradient(145deg, var(--green) 0%, #3f7d69 100%); box-shadow: 0 6px 16px -4px rgba(94, 156, 139, 0.55); --stat-glow: linear-gradient(180deg, rgba(94,156,139,0.14), transparent); }
.stat-icon.cyan   { background: linear-gradient(145deg, var(--cyan) 0%, #4d8a7c 100%); box-shadow: 0 6px 16px -4px rgba(111, 169, 155, 0.55); --stat-glow: linear-gradient(180deg, rgba(111,169,155,0.14), transparent); }
.stat-icon.amber  { background: linear-gradient(145deg, var(--amber) 0%, #a35f28 100%); box-shadow: 0 6px 16px -4px rgba(190, 116, 56, 0.55); --stat-glow: linear-gradient(180deg, rgba(190,116,56,0.14), transparent); }
.stat-icon.rose   { background: linear-gradient(145deg, var(--rose) 0%, #a0464c 100%); box-shadow: 0 6px 16px -4px rgba(194, 84, 90, 0.55); --stat-glow: linear-gradient(180deg, rgba(194,84,90,0.14), transparent); }
.stat-icon.violet { background: linear-gradient(145deg, var(--violet) 0%, #6224b8 100%); box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.55); --stat-glow: linear-gradient(180deg, rgba(124,58,237,0.14), transparent); }

.stat-body {
    flex: 1;
    min-width: 0;
}

.stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-value {
    font-size: 27px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.9px;
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

.stat-change {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============================================================
   Tıklanabilir durum-filtre kartları (.peron-stat-card ailesi)
   Liste ekranlarındaki pill sekmelerin yerine geçer: ikon + etiket + adet,
   tıklanabilir, seçili durumu 4 renk-dışı ipucuyla belli (çerçeve+alt şerit+
   iç halka+kalın etiket). 4–9 kart auto-fit ile akar.
   ============================================================ */
.peron-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.peron-filter-card {
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: 12px 14px;
    /* 2-satır etikete yetecek sabit yükseklik → etiket sarsın sarmasın TÜM ekranlarda
       kartlar birebir aynı boyutta (oran/orantı tutarlılığı). */
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
    transition: box-shadow var(--tr-normal), transform var(--tr-normal),
                border-color var(--tr-normal), background-color var(--tr-normal);
}

/* İkon tonuyla eşleşen ince üst parıltı — referans kartla aile benzerliği */
.peron-filter-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 46px;
    background: var(--stat-glow, transparent);
    opacity: 0.32;
    pointer-events: none;
}

/* Alt aksan şeridi — seçili durumun animasyonlu göstergesi */
.peron-filter-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--pri);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--tr-normal);
    pointer-events: none;
}

/* Kompakt ikon (referans 50px yerine 40px) — .stat-icon.<renk> varyantlarını kullanır */
.peron-filter-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    z-index: 1;
    transition: transform var(--tr-normal), box-shadow var(--tr-normal);
}
.peron-filter-card .stat-icon svg { width: 18px; height: 18px; }

.ffc-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ffc-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-bottom: 5px;
    /* Uzun Türkçe etiketler (ÜRETİM AŞAMASINDA, AÇIK SİPARİŞLERİM) kesilmeden 2 satıra sarar;
       aynı satırdaki kartlar grid stretch ile eşit yüksekliğe hizalanır.
       white-space:normal → paylaşılan .stat-label'ın nowrap'ini geçersiz kılar. */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.ffc-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

/* Hover — referans stat-card ile birebir aynı hareket */
.peron-filter-card:hover {
    box-shadow: var(--shadow-card-hover), 0 16px 32px -18px rgba(63, 116, 168, 0.35);
    transform: translateY(-3px);
    border-color: var(--pri-border);
}
.peron-filter-card:hover .stat-icon { transform: scale(1.08) rotate(-4deg); }

.peron-filter-card:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.peron-filter-card:active { transform: translateY(-1px) scale(0.99); box-shadow: var(--shadow-card); }

/* Seçili/aktif — çerçeve + tint + iç halka + alt şerit + kalın etiket (renkten bağımsız ipuçları) */
.peron-filter-card.is-active {
    border-color: var(--pri);
    background: var(--pri-light);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--pri);
}
.peron-filter-card.is-active::after { transform: scaleX(1); }
.peron-filter-card.is-active .ffc-label { color: var(--pri-text); font-weight: 700; }
.peron-filter-card.is-active:hover { border-color: var(--pri); }

/* "Tümü / Tümü" için nötr ikon — referans renk varyantlarını genişletir */
.stat-icon.slate {
    background: linear-gradient(145deg, #64748b 0%, #475569 100%);
    box-shadow: 0 6px 16px -4px rgba(71, 85, 105, 0.5);
    --stat-glow: linear-gradient(180deg, rgba(100, 116, 139, 0.14), transparent);
}

html[data-peron-theme="dark"] .peron-filter-card.is-active {
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--pri);
}
html[data-peron-theme="dark"] .peron-filter-card:hover {
    box-shadow: var(--shadow-card-hover), 0 16px 32px -18px rgba(0, 0, 0, 0.5);
}

/* Mobil: tek-kaydırmalı yatay satır (9 kartlık dikey yığın çok uzun olurdu) */
@media (max-width: 640px) {
    .peron-filter-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 8px;
        padding-bottom: 6px;
    }
    .peron-filter-card {
        flex: 0 0 auto;
        width: 44%;
        min-width: 150px;
        max-width: 220px;
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .peron-filter-card,
    .peron-filter-card .stat-icon,
    .peron-filter-card::after { transition: none; }
    .peron-filter-card:hover,
    .peron-filter-card:hover .stat-icon,
    .peron-filter-card:active { transform: none; }
}

/* ============================================================
   DASHBOARD GRID & KARTLAR
   ============================================================ */
.peron-dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense;
    gap: 16px;
    margin-bottom: 20px;
}

/* Notlarım — her zaman en sağ sütun, üstten 2 satır yüksekliğinde */
.peron-dash-grid .dash-notepad-right {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: stretch;
}
@media (max-width: 1024px) {
    .peron-dash-grid .dash-notepad-right { grid-column: auto; grid-row: auto; }
}

.peron-card {
    background: var(--card-bg);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--tr-normal), transform var(--tr-normal), border-color var(--tr-normal);
    border: 1px solid var(--border);
}

.peron-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--pri-border);
}

.peron-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg, var(--card-bg) 0%, var(--border-light) 100%);
    border-bottom: 1px solid var(--border-light);
    gap: 10px;
}

.peron-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.peron-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.peron-card-body {
    padding: 16px 20px;
}

/* ── Aktivite ── */
.peron-activity {
    display: flex;
    flex-direction: column;
}

.peron-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--tr-fast);
}

.peron-activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--pri);
    flex-shrink: 0;
    margin-top: 5px;
}

.activity-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.activity-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.activity-time {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
    padding-top: 2px;
    flex-shrink: 0;
}

/* ============================================================
   TABLOLAR
   ============================================================ */
.peron-table-wrap {
    /* Hem yatay hem dikey kaydırma kart içinde — gövde kayarken thead üstte sabit
       kalır (Excel "bölmeleri dondur"). Yükseklik sınırı olmadan position:sticky
       thead'in kayacak alanı olmaz ve sayfayla birlikte yukarı giderdi. */
    overflow: auto;
    max-height: calc(100vh - 210px);
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-xl);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    transition: box-shadow var(--tr-normal);
}

/* Minimal yatay-kaydırma sarmalayıcı — kendi çerçevesi olan (bom/reçete/rapor) veya
   modal içi tablolar için. .peron-table-wrap'in kart stilini (border/shadow/max-height)
   GETİRMEZ; yalnız dar ekranda tabloyu kendi kutusunda yatay kaydırır (kırpma yok). */
.peron-xscroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.peron-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.peron-table thead {
    background: linear-gradient(120deg, var(--pri-dark) 0%, var(--pri) 55%, var(--pri-hover) 100%);
    border-bottom: none;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 5;
}

.peron-table th {
    padding: 14px 13px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.peron-table td {
    padding: 12px 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.peron-table tbody tr:last-child td {
    border-bottom: none;
}

.peron-table tbody tr {
    transition: background var(--tr-fast);
}

.peron-table tbody tr:nth-child(even) {
    background: rgba(63, 116, 168, 0.018);
}

/* Temiz kurumsal hover — sol renk şeridi (AI klişesi) kaldırıldı, yerine
   yumuşak zemin + hafif iç gölge ile "kaldırılmış" his verilir */
.peron-table tbody tr:hover {
    background: var(--pri-light);
    box-shadow: inset 0 1px 0 rgba(63, 116, 168, 0.08);
}

/* Aksiyon butonları satır hover'ında belirginleşir — premium mikro-etkileşim */
.peron-table td.cell-actions .peron-btn.ghost,
.peron-table td.td-actions .peron-btn.ghost {
    opacity: 0.55;
    transition: opacity var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.peron-table tbody tr:hover td.cell-actions .peron-btn.ghost,
.peron-table tbody tr:hover td.td-actions .peron-btn.ghost {
    opacity: 1;
}

/* ============================================================
   ARAÇ ÇUBUĞU — Arama & Filtre
   ============================================================ */
.peron-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.peron-search-input {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.peron-search-input svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    pointer-events: none;
}

.peron-search-input input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 33px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--card-bg);
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
    outline: none;
}

.peron-search-input input::placeholder { color: var(--text-muted); }

.peron-search-input input:focus {
    border-color: var(--pri-text);
    box-shadow: 0 0 0 3px var(--pri-light);
}

.peron-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-secondary);
    background: var(--card-bg);
    cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
    white-space: nowrap;
}

.peron-filter-btn:hover {
    background: var(--border-light);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.peron-filter-btn svg { width: 14px; height: 14px; }

/* ============================================================
   BOŞ DURUM
   ============================================================ */
.peron-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
}

/* Yüklenemeyen tablo — sebep + "Tekrar Dene" (PERON_APP.tabloHatasi) */
.peron-tablo-hata {
    padding: 36px 20px;
    text-align: center;
}

/* İçerik kutusu kabın GÖRÜNEN genişliğine sabitlenir: hata hücresi `colspan` ile tablonun tamamına yayılır ve
   tablo kabından genişken (dar ekranda `min-width`li tablo kendi kabında kayar) ortalanan metin ile "Tekrar Dene"
   görünen alanın dışına düşüyordu (ölçüldü: Üretim Siparişleri 390px — hücre 720 / kap 372, düğme 25px dışarıda).
   Genişlik ve sol pay `tabloHatasi`nden CSS değişkeniyle gelir (kabın iç genişliği − hücre dolgusu); değişken
   yoksa kutu hücreyi doldurur. Kutu sola yaslı doğar (`margin: auto` YOK): yapışkan konum öğeyi yalnız İLERİ iter,
   hücrenin ortasında doğan kutuyu görünen alana geri ÇEKMEZ. Yana kaydırılınca `left` ile kabın içinde kalır. */
.peron-tablo-hata__ic {
    box-sizing: border-box;
    position: sticky;
    left: var(--pth-sol, 0px);
    width: var(--pth-w, auto);
    max-width: 100%;
}

.peron-tablo-hata p {
    margin: 0 auto 14px;
    max-width: 46ch;
    color: var(--rose-ink);
    /* Punto HÜCRENİNDİR: hücre `--tbl-fs` okur (`.peron-table td`), yoğun mod ve telefon kuralları da hücreyi
       ezer (tokeni değil) — tokeni burada doğrudan okumak, hücreler küçülürken bu metni 12px'te bırakırdı.
       Eski sabit 14px, kaldırılan "mobilde gövde ≥14px" kuralından kalmıştı ve merdivende yoktu. */
    font-size: inherit;
    line-height: 1.5;
}

/* Birincil kurtarma eylemi — dokunma hedefi 44px.
   🔴 `.peron-tablo-hata .peron-btn.sm` (0,3,0) seçiciliği ŞART: `.peron-btn.sm`
   kuralı (0,2,0) mobil media query'nin İÇİNDE ve dosyada DAHA SONRA geliyor
   (min-height:38px). Media query özgüllük EKLEMEZ — eşit özgüllükte kaynak
   sırası kazanırdı, yani (0,2,0) yazsaydık 38px'e ezilirdik. */
.peron-tablo-hata .peron-btn.sm {
    min-height: 44px;
    padding: 0 20px;
}

.peron-empty > p:first-child {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.65;
}

.peron-empty > p:nth-child(2) {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.peron-empty > p:nth-child(3) {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Eski yapı uyumluluğu */
.peron-empty-icon {
    width: 52px;
    height: 52px;
    background: var(--border-light);
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.peron-empty-icon svg { width: 26px; height: 26px; color: var(--text-muted); }
.peron-empty h3 { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.peron-empty p  { font-size: 12px; }

/* ============================================================
   FORMLAR
   ============================================================ */
.peron-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.peron-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.peron-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.1px;
    margin-bottom: 6px;
}

.peron-label .req { color: var(--rose-ink); margin-left: 3px; }

.peron-select,
.peron-textarea,
.peron-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--card-bg);
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
    outline: none;
    -webkit-appearance: none;
}

.peron-textarea {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    min-height: 90px;
}

.peron-input::placeholder,
.peron-textarea::placeholder { color: var(--text-muted); }

.peron-select:focus,
.peron-textarea:focus,
.peron-input:focus {
    border-color: var(--pri-text);
    box-shadow: 0 0 0 3px rgba(63, 116, 168, 0.12);
    outline: none;
    background: var(--card-bg);
}

.peron-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 36px;
}

/* Eski .peron-form-row uyumluluğu */
.peron-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.peron-form-group { margin-bottom: 18px; }
.peron-form-help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   ROZETLER (BADGE)
   ============================================================ */
.peron-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15px;
    white-space: nowrap;
    line-height: 1.5;
    transition: filter var(--tr-fast);
}

/* Nokta indikatör */
.peron-badge::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
}

/* 1.416.0 — başarı rozeti metni sabit #467468 → `--green-ink` (#43705f): kasada renkli satır zemininde 4,42:1 ölçüldü
   (AA 4,5 altı), token 4,70:1 verir; beyaz zeminde 5,05 → 5,37. Ton aynı kalır, yalnız koyulaşır. Gece kuralı aşağıda, değişmedi. */
.peron-badge.active,
.peron-badge.success { background: rgba(94, 156, 139, 0.09);  color: var(--green-ink); border: 1px solid rgba(94, 156, 139,0.20); }
.peron-badge.inactive { background: var(--border-light); color: var(--text-secondary); border: 1px solid var(--border); }
.peron-badge.suspended,
.peron-badge.danger  { background: rgba(194, 84, 90, 0.09);  color: #b84653; border: 1px solid rgba(194, 84, 90,0.20); }
.peron-badge.info    { background: rgba(63, 116, 168, 0.09); color: var(--pri-text); border: 1px solid var(--pri-border); }
.peron-badge.warning { background: rgba(190, 116, 56, 0.09); color: #9c5f2e; border: 1px solid rgba(190, 116, 56,0.20); }
/* Dark modda badge zemini koyu tint → light hex başarısız; tema token'larına eşle (AA ✓) */
html[data-peron-theme="dark"] .peron-badge.active,
html[data-peron-theme="dark"] .peron-badge.success  { color: #6cae9c; }
/* 🔴 ÖLÇÜLDÜ (1.276.0): eski #d76b71 gece modunda gerçek satır zemininde ([40,39,52]
   — kart + rozet tint'i üst üste) yalnız 4,36:1 veriyordu, AA eşiği 4,5. Yanındaki
   .success 5,55:1 ile geçiyordu; yani ikisi AYNI kalitede DEĞİLDİ ve kırmızı olan
   —yani "dikkat" demesi gereken— daha zor okunuyordu. #d97177 aynı tonu korur
   (kanallar orantılı aydınlatıldı, kırmızı kimliği bozulmadı) ve 4,60:1 ölçer.
   Açık tema DEĞİŞMEDİ: kural yalnız dark seçicisinin içinde. */
html[data-peron-theme="dark"] .peron-badge.suspended,
html[data-peron-theme="dark"] .peron-badge.danger   { color: #d97177; }
html[data-peron-theme="dark"] .peron-badge.warning  { color: #d68a4e; }
.peron-badge.neutral { background: var(--border-light); color: var(--text-muted); border: 1px solid var(--border); }

/* ── Yardımcı etiketler ── */
.user-code {
    display: inline-flex;
    align-items: center;
    background: var(--pri-light);
    color: var(--pri-text);
    border-radius: var(--r-sm);
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    letter-spacing: 0.03em;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 500;
}

/* ============================================================
   MODAL
   ============================================================ */
.peron-modal {
    position: fixed;
    inset: 0;
    background: rgba(27, 37, 51, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 20px;
    animation: peron-fade-in 0.18s ease-out both;
}

/* Eski .peron-modal-overlay uyumluluğu */
.peron-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 37, 51, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: peron-fade-in 0.18s ease-out both;
}

.peron-modal-box {
    background: var(--card-bg);
    border-radius: 20px;
    border-top: none;
    box-shadow: var(--shadow-modal), 0 0 0 1px var(--border);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: peron-modal-up 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Eski .peron-modal (iç kutu olarak kullanılıyorsa) */
.peron-modal-overlay > .peron-modal {
    background: var(--card-bg);
    border-radius: 20px;
    border-top: none;
    box-shadow: var(--shadow-modal), 0 0 0 1px var(--border);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: peron-modal-up 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    /* İç modalde overlay özellikleri iptal */
    position: static;
    inset: auto;
    backdrop-filter: none;
    padding: 0;
    /* .peron-modal taban kuralından (overlay) gelen align-items:center'ı ez —
       aksi halde başlık/gövde/altlık içeriğe göre daralıp ortalanır, geniş
       tablolar modal genişliğini aşıp overflow:hidden ile kırpılır. */
    align-items: stretch;
}

.peron-modal.lg { max-width: 680px; }
.peron-modal.sm { max-width: 380px; }

/* ── MODAL GENİŞLİK ÖLÇEĞİ — KURAL ────────────────────────────────────────────
   Modal içeriği kapsamlı/ayrıntılı olabilir; ANCAK EKRANA SIĞMALIDIR. İçerik dar
   bir modalda kullanıcıyı YATAY KAYDIRMAYA zorluyorsa çözüm içeriği kırpmak değil
   MODALI GENİŞLETMEKTİR: gövdeye uygun w-* sınıfını ver.
   🔴 Her basamak min(px, vw) ile viewport'a kilitli → geniş modal küçük ekranda taşmaz.
   🔴 Yalnız ≥769px'te geçerli: mobilde createModal tam genişlik ALT-SHEET olur
      (@media max-width:768px'teki .peron-modal-overlay > .peron-modal kuralı). Bu
      utility'ler o kuraldan daha ÖZGÜL olduğu için media query'ye alınmasaydı
      alt-sheet'i sessizce bozarlardı.
   Kullanım: createModal(...) sonrası
      document.querySelector('#peron-modal-overlay .peron-modal')?.classList.add('w-xl') */
@media (min-width: 769px) {
    .peron-modal-overlay > .peron-modal.w-md   { max-width: min(760px,  96vw); }
    .peron-modal-overlay > .peron-modal.w-lg   { max-width: min(980px,  96vw); }
    .peron-modal-overlay > .peron-modal.w-xl   { max-width: min(1200px, 96vw); }
    .peron-modal-overlay > .peron-modal.w-full { max-width: min(1560px, 97vw); }
}

.peron-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(120deg, var(--pri-dark) 0%, var(--pri) 60%, var(--pri-hover) 100%);
    border-bottom: none;
    flex-shrink: 0;
}
/* 🔴🔴 GECE MODUNDA BASLIK METNI AA'YI GECMIYORDU (1.364.0 tasarim denetimi).
   Gece temasinda `--pri` #3f74a8'den #5b91c7'ye ACILIYOR; gradyanin acik ucunda
   beyaz baslik OLCULDU: 6,16 / 3,32 / 2,99:1. Baslik 16px/700, yani WCAG'in
   "buyuk metin" tanimina GIRMEZ (>=18,66px + bold gerekir) -> esik 4,5:1.
   Kapsam: `.peron-modal-header` TEK kuraldir, yani 106 `createModal()` cagrisinin
   HEPSI etkileniyordu.
   🔴 YENI TOKEN UYDURULMADI: proje ayni sorunu TABLO basliklari icin zaten
      cozmus (`--tbl-head-1/2/3`, yalniz gece blogunda tanimli, satir ~574) ve
      `.peron-table thead` orada bu seti okuyor. Modal basligi o cozumu ALMAMISTI.
      Beyazla olculen: 7,78 / 6,16 / 5,35:1 — uc durakta da AA gecer.
   🔴 Kapatma dugmesi (`rgba(255,255,255,.14)` uzerine beyaz) gece modunda
      2,51-2,74:1 olculmustu; zemin koyulasinca o da duzelir. */
html[data-peron-theme="dark"] .peron-modal-header {
    background: linear-gradient(120deg, var(--tbl-head-1) 0%, var(--tbl-head-2) 60%, var(--tbl-head-3) 100%);
}

.peron-modal-header h3,
.peron-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    margin: 0;
}

.peron-modal-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--r-sm);
    cursor: pointer;
    color: #ffffff;
    transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
}

.peron-modal-close:hover {
    background: var(--rose-surface, var(--border-light));
    color: var(--rose);
    transform: rotate(90deg);
}

.peron-modal-close svg { width: 15px; height: 15px; }

.peron-modal-body {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: auto;
    padding: 20px 22px;
}

/* Modal içi log tablosu — modal genişliğine sığar, içerik taşmaz/kaydırmaz.
   .peron-table taban kuralı veri tablolarına min-width:760px (≤1280px'de 920px)
   uyguluyor; compound selector (specificity 0,0,2,0) ile onu ezip modale sığdır. */
.peron-table.prod-log-table { table-layout: fixed; width: 100%; min-width: 0; }
.prod-log-table th,
.prod-log-table td { white-space: normal; word-break: break-word; }

.peron-modal-foot,
.peron-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--border-light);
}

/* Modal Form */
.peron-modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.peron-modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.peron-modal-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.1px;
}

.peron-modal-input,
.peron-modal-select,
.peron-modal-textarea {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--card-bg);
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
    outline: none;
    -webkit-appearance: none;
}

.peron-modal-textarea {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    min-height: 90px;
}

.peron-modal-input::placeholder,
.peron-modal-textarea::placeholder { color: var(--text-muted); }

.peron-modal-input:focus,
.peron-modal-select:focus,
.peron-modal-textarea:focus {
    border-color: var(--pri-text);
    box-shadow: 0 0 0 3px var(--pri-light);
}

.peron-modal-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 36px;
}

.peron-modal-input.error,
.peron-modal-select.error,
.peron-modal-textarea.error {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(194, 84, 90, 0.10);
}

.peron-modal-error {
    font-size: 11.5px;
    color: var(--rose);
    font-weight: 500;
}

/* ============================================================
   BUTONLAR
   ============================================================ */
.peron-btn,
.peron-btn-primary,
.peron-btn-danger,
.peron-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition:
        background var(--tr-fast),
        border-color var(--tr-fast),
        box-shadow var(--tr-fast),
        transform var(--tr-fast),
        color var(--tr-fast);
    border: 1.5px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: -0.1px;
    outline: none;
    user-select: none;
    -webkit-appearance: none;
}

.peron-btn:active,
.peron-btn-primary:active,
.peron-btn-danger:active,
.peron-btn-outline:active {
    transform: scale(0.97);
}

.peron-btn:disabled,
.peron-btn-primary:disabled,
.peron-btn-danger:disabled,
.peron-btn-outline:disabled {
    opacity: 0.55;
    pointer-events: none;
}
/* aria-disabled görünümü: `disabled` özelliğinin aksine odaklanabilir kalır (ekran okuyucu
   butonu bulup nedenini okuyabilir). Tıklamayı JS reddeder — pointer-events KAPATILMAZ,
   yoksa odak ve dokunmatik geri bildirim de kaybolur. */
.peron-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.peron-btn svg,
.peron-btn-primary svg,
.peron-btn-danger svg,
.peron-btn-outline svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Nötr */
.peron-btn {
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--text-primary);
}
.peron-btn:hover { background: var(--border-light); border-color: #cdd5df; }
.peron-btn:active { transform: scale(0.97); }

/* Varyant sistemi (eski kod uyumluluğu) */
.peron-btn.primary { background: linear-gradient(155deg, var(--pri-strong) 0%, var(--pri-dark) 100%); border-color: var(--pri-text); color: var(--pri-on); box-shadow: 0 1px 3px rgba(63, 116, 168,0.30), 0 1px 0 rgba(255,255,255,0.12) inset; }
.peron-btn.primary:hover { background: linear-gradient(155deg, var(--pri-hover) 0%, var(--pri-dark) 100%); border-color: var(--pri-dark); box-shadow: 0 4px 14px rgba(63, 116, 168,0.35); transform: translateY(-1px); }
.peron-btn.primary:active { transform: translateY(0) scale(0.97); box-shadow: 0 1px 3px rgba(63, 116, 168,0.20); }

.peron-btn.secondary { background: var(--pri-light); border-color: transparent; color: var(--pri-text); }
.peron-btn.secondary:hover { background: rgba(63, 116, 168,0.15); }

.peron-btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.peron-btn.ghost:hover { background: var(--border-light); color: var(--text-primary); }

.peron-btn.danger { background: rgba(194, 84, 90,0.08); border-color: transparent; color: var(--rose-ink); }
.peron-btn.danger:hover { background: var(--rose); color: #fff; box-shadow: 0 3px 10px rgba(194, 84, 90,0.30); }
/* Dark: kırmızı-tint zeminde --rose-ink(=--rose) 4.4:1'e düşüyor → biraz açık kırmızı; hover'da #fff korunur */
html[data-peron-theme="dark"] .peron-btn.danger { color: #e08890; }
html[data-peron-theme="dark"] .peron-btn.danger:hover { color: #fff; }

.peron-btn.warning { background: rgba(190, 116, 56,0.10); border-color: transparent; color: var(--amber); }

.peron-btn.sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: var(--r-sm); gap: 5px; }
.peron-btn.sm svg { width: 13px; height: 13px; }
.peron-btn.lg { height: 44px; padding: 0 22px; font-size: 14px; }

/* Birincil (Indigo) */
.peron-btn-primary {
    background: var(--pri-strong);
    border-color: var(--pri-text);
    color: #fff;
    box-shadow: 0 1px 3px rgba(63, 116, 168, 0.30);
}
.peron-btn-primary:hover {
    background: var(--pri-dark);
    border-color: var(--pri-dark);
    box-shadow: 0 4px 14px rgba(63, 116, 168, 0.40);
    transform: translateY(-1px);
}

/* Tehlikeli */
.peron-btn-danger {
    background: var(--rose);
    border-color: var(--rose);
    color: #fff;
    box-shadow: 0 1px 3px rgba(194, 84, 90, 0.28);
}
.peron-btn-danger:hover {
    background: #c24a57;
    border-color: #c24a57;
    box-shadow: 0 4px 14px rgba(194, 84, 90, 0.36);
    transform: translateY(-1px);
}

/* Çerçeveli */
.peron-btn-outline {
    background: transparent;
    border-color: var(--pri-text);
    color: var(--pri-text);
}
.peron-btn-outline:hover {
    background: var(--pri-light);
    box-shadow: 0 0 0 3px var(--pri-light);
}

/* Küçük varyant */
.peron-btn-sm,
.peron-btn.peron-btn-sm,
.peron-btn-primary.peron-btn-sm,
.peron-btn-danger.peron-btn-sm,
.peron-btn-outline.peron-btn-sm {
    height: 30px;
    padding: 0 11px;
    font-size: 12px;
    border-radius: var(--r-sm);
    gap: 4px;
}

/* ============================================================
   TOAST BİLDİRİMLER
   ============================================================ */
.peron-toast-container {
    position: fixed;
    bottom: 22px;
    right: 22px;
    /* 🔴 Modal örtüsü (99999, bulanık) DOM'da bu kabın SONRASINDA basılır; eşit z-index'te bildirim
       örtünün altında kalıp bulanıklaşıyordu (kullanıcı bildirimi 2026-10-15). En üst katman bildirimdir. */
    z-index: 100010;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 44px);
}

.peron-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #1b2533;
    /* 🔴 Zemin HER temada koyu (yukarıda sabit) → yazı da SABİT açık olmak zorunda. Tema
       token'ı (`--border-light`) gece temasında #222c39'dur; koyu üstüne koyu = görünmez.
       1.346.0'a kadar zaten #f3f6fa idi. */
    color: #f3f6fa;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-toast);
    border-left: 3px solid var(--text-muted);
    pointer-events: all;
    font-size: 13px;
    font-weight: 500;
    min-width: 240px;
    line-height: 1.45;
    animation: peron-toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.peron-toast svg { width: 15px; height: 15px; flex-shrink: 0; }
.peron-toast.success { border-left-color: var(--green); }
.peron-toast.error   { border-left-color: var(--rose); }
.peron-toast.warning { border-left-color: var(--amber); }
.peron-toast.info    { border-left-color: var(--pri-text); }

.peron-toast.out,
.peron-toast.peron-toast-out {
    animation: peron-toast-out 0.25s ease-in both;
}

/* ============================================================
   ONAY DİYALOĞU
   ============================================================ */
.peron-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 37, 51, 0.50);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99000;
    padding: 20px;
    animation: peron-fade-in 0.18s ease-out both;
}

.peron-confirm-box,
.peron-confirm {
    background: var(--card-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-modal);
    padding: 28px 26px 22px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    animation: peron-modal-up 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.peron-confirm-box .confirm-icon,
.peron-confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.peron-confirm-icon.danger { background: rgba(194, 84, 90,0.10); color: var(--rose); }
.peron-confirm-icon svg { width: 22px; height: 22px; }

.peron-confirm-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }

.peron-confirm-msg,
.peron-confirm-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 22px;
}

.peron-confirm-actions {
    display: flex;
    gap: 9px;
    justify-content: center;
}

.peron-confirm-actions .peron-btn,
.peron-confirm-actions .peron-btn-danger,
.peron-confirm-actions .peron-btn-primary {
    flex: 1;
    justify-content: center;
}

/* ============================================================
   MOBİL OVERLAY
   ============================================================ */
.peron-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(27, 37, 51, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 90;
    animation: peron-fade-in 0.18s ease;
}

/* 🔴 Yalnız mobil: menü açıkken cihaz döndürülüp masaüstü genişliğine geçilirse
   .active sınıfı üzerinde KALIYOR (closeMobileSidebar isMobile() guard'ı içinde) ve
   bu kural taban display:none'ı ezip tam ekran perdeyi masaüstünde ASILI bırakıyordu
   — tıklama geçirmez. ≥769px'te perde artık her koşulda gizli. */
@media (max-width: 768px) {
    .peron-mobile-overlay.active,
    .peron-mobile-overlay.visible {
        display: block;
    }
}

/* ============================================================
   SKELETON YÜKLEME
   ============================================================ */
.peron-skeleton {
    background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
    background-size: 400% 100%;
    animation: peron-shimmer 1.5s infinite;
    border-radius: var(--r-sm);
}

/* ============================================================
   ANİMASYONLAR
   ============================================================ */

/* Canlı nokta nabzı */
@keyframes peron-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(94, 156, 139, 0.5);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
        box-shadow: 0 0 0 5px rgba(94, 156, 139, 0);
    }
}

/* Döndürme (spinner) */
@keyframes peron-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Sayfa girişi */
@keyframes peron-page-in {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal solma */
@keyframes peron-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal yükselme */
@keyframes peron-modal-up {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Toast girişi */
@keyframes peron-toast-in {
    from { opacity: 0; transform: translateX(20px) scale(0.94); }
    to   { opacity: 1; transform: translateX(0)    scale(1);    }
}

/* Toast çıkışı */
@keyframes peron-toast-out {
    from { opacity: 1; transform: translateX(0) scale(1);    max-height: 80px;  margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(20px) scale(0.9); max-height: 0; margin-bottom: -8px; }
}

/* Skeleton shimmer */
@keyframes peron-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Güncelleme flaşı */
@keyframes peron-data-flash {
    0%   { background: rgba(63, 116, 168, 0.08); }
    100% { background: transparent; }
}

.peron-updated {
    animation: peron-data-flash 1s ease-out;
}

/* Ortak yükleme iskeleti hücresi (skeletonRows) — token tabanlı, gece moduna uyar */
.peron-skel-cell {
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: peron-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .peron-skel-cell { animation: none; }
}

/* ============================================================
   RESPONSIVE — ≤1024px
   ============================================================ */
@media (max-width: 1024px) {
    .peron-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .peron-dash-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   RESPONSIVE — ≤768px (MOBİL)
   ============================================================ */
@media (max-width: 768px) {
    .peron-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 200;
        width: var(--sb-w) !important;
        min-width: var(--sb-w) !important;
        transform: translateX(-100%);
        transition: transform var(--tr-normal);
    }

    .peron-sidebar.mobile-open {
        transform: translateX(0);
        /* Rail artık açık tonda: perde (z-90) çekmecenin ALTINDA kaldığı için ayrım
           yalnız 1px kenara kalırdı. Gece = none → gece davranışı değişmez. */
        box-shadow: var(--sb-drawer-shadow);
    }

    .peron-mobile-overlay {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--tr-normal);
    }

    .peron-mobile-overlay.active,
    .peron-mobile-overlay.visible {
        opacity: 1;
        pointer-events: all;
    }

    /* Mobilde menüyü kapatma butonu — başlığın sağına yaslı, daha büyük dokunma alanı */
    .peron-sidebar-collapse {
        display: flex;
        margin-left: auto;
        width: 36px;
        height: 36px;
    }

    .peron-main {
        width: 100%;
    }

    .peron-content {
        padding: 14px;
    }

    .peron-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .peron-dash-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .peron-form-grid,
    .peron-form-row {
        grid-template-columns: 1fr;
        /* 🔴 Satır-içi stil bu kuralı KOŞULSUZ ezer (özgüllük değil, satır-içi önceliği).
           Personel formlarındaki 7 ızgara kolon değerini `var(--pfr-cols, …)` ile okur;
           değişkeni burada ezmek satır-içi bildirimin SONUCUNU değiştirir → 360px'te
           "Ad Soyad" alanına 172px kalması biter. */
        --pfr-cols: 1fr;
    }

    .peron-header {
        padding: 0 14px;
    }

    .peron-page-header {
        flex-direction: column;
        /* 🔴 :1335'teki align-items:center flex-direction:column ile birlikte her
           sayfa başlığını ORTALIYOR, gövde sola yaslı kalıyordu (ölçüldü: başlık
           136px, gövde 21px). stretch ile başlık da sola hizalanır. */
        align-items: stretch;
        gap: 10px;
    }

    .peron-page-header h1,
    .peron-page-title {
        font-size: 17px;
    }

    .peron-dash-logo {
        display: none;
    }

    .peron-modal-box {
        max-width: 100%;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        align-self: flex-end;
        max-height: 92vh;
    }

    .peron-modal {
        align-items: flex-end;
        padding: 0;
    }

    /* createModal yapısı (.peron-modal-overlay > .peron-modal) — mobilde tam genişlik alt-sheet */
    .peron-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    /* 🔴🔴 SATIR-ICI GENISLIK BURADAN EZILIR (1.364.0 tasarim denetimi).
       JS 24 yerde `box.style.maxWidth = '820px'` gibi SATIR-ICI deger yaziyordu ve
       satir-ici stil `@media`yi KOSULSUZ ezer. OLCULDU (Ihtiyac Listesi, 390px):
       kutu 374x423, x=8 — yani iki yanda 8px koyu serit, altta koseli "yuzen kart";
       alt-sheet'e HIC donusmuyordu. 320'de 307px, 360'ta 346px.
       🔴 COZUM PROJE KURALI md.7: JS artik `var(--modal-mw, 820px)` yaziyor ve
          degisken BURADA eziliyor. MASAUSTU degerleri BIREBIR korunur (yedek deger
          aynen eski sayidir), mobilde tam genislik olur.
       🔴 `window.innerWidth > 768` kontrolu YETMEZDI: modal acikken cihaz
          dondurulunce deger bayat kalirdi. Degisken kaskadla birlikte yeniden cozulur. */
    .peron-modal-overlay > .peron-modal {
        --modal-mw: 100%;
        --modal-w: 100%;
        max-width: 100%;
        width: 100%;
        align-items: stretch;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        max-height: 92vh;
    }

    .peron-confirm-box,
    .peron-confirm {
        padding: 22px 18px 18px;
    }

    .peron-toast-container {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: unset;
        width: auto;
    }

    .stat-value { font-size: 22px; }

    .peron-table th,
    .peron-table td { padding: 10px 12px; }

    /* ── Mobil dokunma & kaydırma iyileştirmeleri ──────────────────────────── */
    /* Geniş veri tabloları kendi kartı içinde yatay kayar; sayfa taşmaz.
       Sağ kenardaki kaydırma ipucu (fade) "daha fazla sütun var →" sinyali verir. */
    .peron-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .peron-table-wrap::-webkit-scrollbar { height: 6px; }
    .peron-table-wrap::-webkit-scrollbar-thumb { background: rgba(27,37,51,.22); border-radius: 6px; }

    /* Dokunma hedefleri — buton/satır aksiyonları parmakla rahat seçilsin.
       🔴 SATIR AKSİYONU ARTIK 44px DEĞİL (1.365.0, kullanıcı kararı). Kullanıcının
          kendi eşiği: birincil eylem ≥36 · YOĞUN YÜZEY DENETİMİ (tablo satır eylemi,
          ikon düğme) ≥28 · mutlak taban 24. Tablo satırındaki ikon düğme yoğun
          yüzeydir; 44px onu ZATEN aşıyordu ve kullanıcı birebir "44 kuralını değiştir,
          çok büyük olmasın her şey" dedi.
       🦷 Ölçülen bedel: 44px iki düğme dar aksiyon kolonuna sığmıyor, `flex-wrap`
          devreye giriyor ve SATIR 101px'e fırlıyordu (🔗'li satır 44px). Değer artık
          tablo yoğunluk sözleşmesinden (`--tbl-ctl-h`, dokunmatikte 36px) okunur —
          elle ikinci bir sayı yazmak, hücre içi diğer denetimlerden ayrışması demekti. */
    .peron-btn { min-height: 42px; }
    .peron-btn.sm { min-height: 38px; padding-top: 8px; padding-bottom: 8px; }
    .peron-table td.col-actions .peron-btn,
    .peron-table td.col-actions button { min-width: var(--tbl-ctl-h); min-height: var(--tbl-ctl-h); }
    /* 🔴🔴 DOLGU KURALI BURADA DEĞİL, "MOBİL SON SÖZ" BLOĞUNDA (1.365.0).
       İlk yazımda buraya koymuştum ve TARAYICI ÖLÇÜMÜ ÖLÜ olduğunu gösterdi:
       `getComputedStyle` 768px'te 6px değil **8px** döndü. Kazanan, dosyanın
       SONUNDAKİ `.peron-layout .peron-table td { padding: 8px 8px }` (aynı
       özgüllük, DAHA SONRA geliyor). Sonuç ölçüldü: içerik alanı 72px, gereken
       76px → sarma → kasa satırı 44 yerine **89px**.
       🦷 Bu dosyanın kendi kuralı bunu zaten yazıyordu: "Yeni mobil kuralları
          dosya sonundaki MOBİL SON SÖZ bloğuna yaz" — okumuştum, uygulamadım.
          İki STATİK denetim de kazananı yanlış tahmin etti; ölçüm çözdü. */
    .peron-select, .peron-input, .peron-textarea { min-height: 44px; }

    /* Araç çubukları & filtreler dar ekranda sarsın, arama tam genişlik olsun */
    .peron-toolbar { flex-wrap: wrap; }
    .peron-toolbar .peron-search { flex: 1 1 100%; max-width: none; }
}

/* ============================================================
   RESPONSIVE — ≤480px (KÜÇÜK MOBİL)
   ============================================================ */
@media (max-width: 480px) {
    .peron-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .peron-stat-card {
        padding: 14px;
        flex-direction: column;
        gap: 10px;
    }

    .peron-content { padding: 10px; }

    .peron-header { padding: 0 10px; gap: 8px; }

    .live-label { display: none !important; }

    .peron-table th,
    .peron-table td { padding: 9px 10px; }
}

/* ============================================================
   ERİŞİLEBİLİRLİK
   ============================================================ */
.peron-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.peron-btn:focus-visible,
.peron-btn-primary:focus-visible,
.peron-btn-danger:focus-visible,
.peron-btn-outline:focus-visible,
.peron-modal-close:focus-visible,
.peron-sidebar-collapse:focus-visible,
.peron-header-toggle:focus-visible,
.logout-btn:focus-visible,
.peron-notif-bell:focus-visible,
.peron-filter-btn:focus-visible {
    outline: 2px solid var(--pri);
    outline-offset: 2px;
}

/* Azaltılmış hareket tercihi */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Masaüstünde hamburger gereksiz — sidebar collapse butonu yeterli */
@media (min-width: 769px) {
    .peron-header-toggle { display: none; }
}

/* ============================================================
   ARAÇ ÇUBUĞU — Alias (peron-toolbar / peron-search)
   ============================================================ */
.peron-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Toolbar içindeki select'ler uzun kategori adıyla layout kırmamalı */
.peron-toolbar .peron-select {
    max-width: 200px;
    min-width: 120px;
    width: auto;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tarih aralığı filtresi — kompakt, kurumsal; iki tarih + ayraç tek blok */
.peron-daterange {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.peron-daterange .peron-input {
    width: 140px;
    min-width: 120px;
    padding: 7px 8px;
    font-size: 12px;
}
.peron-daterange-sep {
    color: var(--text-muted);
    font-weight: 600;
    user-select: none;
}
@media (max-width: 640px) {
    /* 🔴🔴 SARMA ŞART — `min-width: 0` TEK BAŞINA YETMEZ. `input[type=date]` UA'dan
       ~150px İÇSEL asgari genişlik taşır (16px yazıda ölçüldü: 154px) ve flex bunu
       küçültemez; iki kutu + ayraç 328px istiyor, 320px ekranda kap 308px.
       Bu, projenin kendi belgelenmiş tuzağı ("min-width:0 verilse bile UA'dan ~120px
       içsel minimum taşır → sarmalayıcıya flex-wrap: wrap"). Kutular alt alta iner. */
    .peron-daterange { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; }
    /* 🔴🔴 `min-width` DE GEVŞETİLMEK ZORUNDA (1.310.0 — denetim bulgusu). Eskiden
       yalnız `width` serbest bırakılıyordu; taban kuralın `min-width: 120px`i yerinde
       kaldığı için iki kutu 320px ekranda 240px + ayraç + dolgu istiyordu.
       ÖLÇÜLDÜ (Üretim Takibi, 320px): `.prod-date-wrap` doğal genişliği 328px, kap
       308px → ikinci tarih kutusu viewport'u 14px aşıyor ve `overflow-x: hidden`
       onu SESSİZCE kırpıyordu (takvim simgesinin büyük kısmı tıklanamaz hâle
       geliyordu). 360/390px'te sorun yoktu — bu yüzden yalnız en dar ekranda
       görünüyor ve gözden kaçıyordu. */
    .peron-daterange .peron-input { flex: 1 1 130px; width: auto; min-width: 0; }
}

/* Stok Hareketleri sayfası (eski Günlük Aktivite modalı): tablo / özet kuralları dosya sonundaki "1.402.2 — GÜNLÜK AKTİVİTE
   MODALI" bloğunda; süzgeç çubuğu `peron-stok-aktivite.css`'te. */

.peron-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
}

.peron-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.peron-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--card-bg);
    outline: none;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

.peron-search input::placeholder { color: var(--text-muted); }
.peron-search input:focus {
    border-color: var(--pri-text);
    box-shadow: 0 0 0 3px var(--pri-light);
}

/* ─── Sipariş Modülü ─────────────────────────────────────────────────────── */
.peron-order-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    background: var(--card-bg);
    padding: 5px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
}
.peron-order-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-md);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--tr-fast);
}
.peron-order-tab svg { width: 14px; height: 14px; }
.peron-order-tab:hover { background: var(--border-light); color: var(--text-primary); }
.peron-order-tab.active { background: var(--pri-strong); color: var(--pri-on); box-shadow: 0 1px 4px rgba(63, 116, 168,0.30); }
.tab-count {
    background: rgba(255,255,255,0.25);
    border-radius: var(--r-full);
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
}
.peron-order-tab:not(.active) .tab-count { background: rgba(194, 84, 90,0.08); color: var(--rose); }
.peron-order-tab:not(.active) .tab-count.incoming { background: rgba(190, 116, 56,0.10); color: var(--amber); }

.peron-order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    padding: 4px 0;
}
.peron-order-card {
    background: var(--card-bg);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow var(--tr-fast), transform var(--tr-fast);
}
.peron-order-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.peron-order-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.order-num {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: monospace;
}
.order-product { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.order-code {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-family: monospace;
    background: var(--border-light);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--text-secondary);
}
.order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12px;
    color: var(--text-secondary);
}
.order-meta span { display: flex; align-items: center; gap: 4px; }
.order-meta svg { width: 13px; height: 13px; }
.order-termin { color: var(--amber-ink) !important; font-weight: 500; }
.order-notes {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--border-light);
    border-radius: var(--r-md);
    padding: 8px 12px;
    border-left: 3px solid var(--border);
}
.order-notes.info { border-left-color: var(--pri-text); background: rgba(63, 116, 168,0.05); color: var(--pri-text); }
.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.peron-btn.sm { padding: 5px 11px; font-size: 12px; }
.peron-btn.info { background: #dde9e5; color: #3f6b5e; }
.peron-btn.info:hover { background: #cfe5dc; }
.peron-btn.warning { background: #fbead8; color: #9a5b2e; }
.peron-btn.warning:hover { background: #f7c6a0; }

/* ─── Bildirim Zili ──────────────────────────────────────────────────────── */
.peron-notif-bell {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--content-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
    color: var(--text-secondary);
    box-shadow: 0 1px 2px rgba(27, 37, 51, 0.04);
}
.peron-notif-bell:hover {
    background: var(--pri-strong);
    border-color: var(--pri-text);
    color: var(--pri-on, #fff);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(63, 116, 168, 0.5);
}
.peron-notif-bell:active { transform: translateY(0) scale(0.95); }
.peron-notif-bell svg { width: 22px; height: 22px; }
/* Okunmamış varsa zil hafifçe sallanır (premium ipucu) */
.peron-notif-bell.has-unread { color: var(--pri-text); border-color: var(--pri-border, var(--border)); }
.peron-notif-bell.has-unread svg { animation: bell-swing 2.4s ease-in-out infinite; transform-origin: 50% 4px; }
@keyframes bell-swing {
    0%, 70%, 100% { transform: rotate(0); }
    78% { transform: rotate(11deg); }
    86% { transform: rotate(-9deg); }
    93% { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) { .peron-notif-bell.has-unread svg { animation: none; } }
.notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    background: var(--rose);
    color: #fff;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2.5px solid var(--header-bg);
    box-shadow: 0 2px 6px -1px rgba(194, 84, 90, 0.55);
    animation: peron-pulse 2s ease-in-out infinite;
}

/* ─── İzin Yönetimi Modal ────────────────────────────────────────────────── */
.perm-groups { display: flex; flex-direction: column; gap: 12px; }
.perm-group {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.perm-group-header {
    background: var(--border-light);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.perm-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}
.perm-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0;
}
.perm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
}
.perm-item:hover { background: rgba(63, 116, 168,0.04); }
.perm-item input[type="checkbox"] { accent-color: var(--pri-text); width: 14px; height: 14px; flex-shrink: 0; }
/* 1.429.0 — yazı rengi BU kuralda da yazılır: yukarıdaki (:2949) üzerine gelme kuralının `color:#fff`i, burada zemin
   yalnız %20 güle döndüğü için ölçüldü 1,39:1 (beyaz yazı soluk zeminde); normal hâl --rose-ink ile kartta 4,48:1.
   Renkli zemin metni --rose-ink-yuzey: normal 5,3 · üzerinde 4,7. Gece kuralları (:2951-2952) daha özgül, değişmez. */
.peron-btn.danger { background: rgba(194, 84, 90,0.1); color: var(--rose-ink-yuzey); }
.peron-btn.danger:hover { background: rgba(194, 84, 90,0.2); color: var(--rose-ink-yuzey); }

/* ─── ANAHTAR (switch) — TEK BİLEŞEN, AŞAĞIDA (:6551) TANIMLI ────────────────
   🔴 BURAYA İKİNCİ BİR `.peron-switch` YAZMA. 1.277.0'de yazıldı ve ÖLÇÜMLE
      yakalandı: dosyanın ilerisindeki asıl bileşen (button + role="switch" +
      .peron-switch-knob) aynı adı taşıdığı için KAYNAK SIRASI onu kazandırıyor,
      yeni tanım sessizce ölüyordu (anahtar 43×24px ölçüldü, hedeflenen 46×44
      dokunma alanı hiç oluşmadı). Yeni bir açık/kapalı tercih gerekiyorsa
      `peron-mod-settings.js`'teki markup'ı kopyala:
      <button type="button" class="peron-switch" role="switch" aria-checked="…">
          <span class="peron-switch-knob"></span></button>
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── Global Inline İkon Boyutu ──────────────────────────────────────────── */
.peron-card-title svg,
.peron-page-title svg,
.peron-order-tab svg,
.tab-pane-title svg,
.peron-empty-icon svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
}

/* ─── Kompakt Tasarım Overrides ──────────────────────────────────────────── */
/* Sağ padding, sabit yan çekmece sekmesini (.peron-side-rail, ~30px) açıkta bırakır;
   sağa yapışık (sticky) aksiyon kolonundaki butonların sekmeyle örtüşmemesi için ~8px pay. */
.peron-content { padding: 16px 38px 16px 20px; }
.peron-page-title { font-size: clamp(17px, 0.4vw + 13px, 23px); font-weight: 700; }
.peron-page-subtitle { font-size: 12px; margin-top: 2px; }
.peron-page-header { margin-bottom: 16px; }
/* 🔴 ÖLÇÜLDÜ 1440px: kart 93px, stat-value 22,6px (clamp tavanı 30px).
   Sayfanın EN BÜYÜK yazısı bir KPI rakamıydı. SaaS panelinde rakam okunur
   olmalı, afiş olmamalı — tavan 22px'e indi, taban 19px. Punto oranı korunur:
   etiket 11 < değer 19-22, hiyerarşi aynı, yalnız tepe alçaldı. */
.peron-stat-card { padding: 11px 14px; gap: 11px; }
.stat-icon { width: 30px; height: 30px; border-radius: 8px; }
.stat-icon svg { width: 15px; height: 15px; }
.stat-value { font-size: clamp(19px, 0.35vw + 14px, 22px); letter-spacing: -0.4px; }
.stat-label { font-size: 11px; margin-bottom: 4px; }
.peron-stats-grid { gap: 12px; margin-bottom: 16px; }
.peron-card-header { padding: 12px 16px; }
.peron-card-body { padding: 12px 16px; }
.peron-card-title { font-size: 13px; }
.peron-dash-grid { gap: 12px; margin-bottom: 16px; }
/* 🔴 SABIT PUNTO YERINE TOKEN (2026-09-13). Bu iki satir 81 tablonun govde
   puntosunu belirliyordu ve elle 12,5px yaziyordu — oysa tasarim sisteminde
   `--tbl-fs` zaten tanimliydi ve KIMSE kullanmiyordu (1200 punto bildiriminden
   yalniz 4'u tokeni okuyordu). Sabit deger yazmak, "standart" diye bir sey
   olmamasinin sebebiydi: her tablo kendi puntosunu uyduruyordu.
   Token: masaustu/tablet 12px (9 punto) · yogun mod 10,5px · telefon --m-fs-sm.
   Baslik `--tbl-head-fs`: dokunmatik 11px (degismedi), masaustu 10,5px. */
.peron-table th { padding: 9px 12px; font-size: var(--tbl-head-fs); }
.peron-table td { padding: 9px 12px; font-size: var(--tbl-fs); }
.peron-toolbar { margin-bottom: 12px; }
.peron-btn { height: 34px; padding: 0 14px; font-size: 13px; }
.peron-btn.sm { height: 28px; padding: 0 10px; font-size: 11.5px; }
.peron-btn svg { width: 13px; height: 13px; }
.peron-order-tab { padding: 6px 14px; font-size: 12px; }
.peron-order-tabs { margin-bottom: 14px; padding: 4px; }
.peron-modal { max-height: 88vh; }
.peron-modal-header { padding: 14px 18px; }
.peron-modal-body { padding: 14px 18px; }
.peron-modal-footer { padding: 10px 18px; }
/* 🔴 BİRİNCİL EYLEM ≥36px (kullanıcı kuralı; ölçüldü: 34px). Bu, "büyütme" değil
   EŞİĞİ KARŞILAMAdır — punto değişmiyor, yalnız düğme 2px yükseliyor. Kural modal
   ayağındaki TÜM düğmelere uygulanır: Kaydet/Sil/Onayla hepsi burada yaşıyor. */
.peron-modal-footer .peron-btn { min-height: 36px; }
/* 🔴 Sayfa başlığındaki birincil eylem de ≥36 (ölçüldü: 12 ekranda 34px). Medya sınırı
   ŞART: sınırsız bu seçici ≤768'deki 42/40px tabanlarını ezip 36'ya DÜŞÜRÜRDÜ. `.sm`
   (toplu seçim çubuğu) ve ghost düğmeler yoğun denetimdir, büyütülmez. */
@media (min-width: 769px) {
    .peron-page-header .peron-btn.primary:not(.sm) { min-height: 36px; }
}
.peron-input, .peron-select { height: 36px; font-size: 13px; padding: 0 10px; }
textarea.peron-input { height: auto; padding: 8px 10px; }
.peron-form-label { font-size: 12px; margin-bottom: 8px; }
.peron-form-group { margin-bottom: 18px; }
.peron-search input { height: 34px; font-size: 13px; }

/* ── Alan altı ipucu + KULLANICI ADI ÇAKIŞMA DURUMU (1.310.0) ────────────────
   🔴 `.peron-hint` sınıfı kullanılıyordu ama HİÇ TANIMLI DEĞİLDİ (ölçüldü: dosyada
      tek eşleşme yok) — kullanıcı formundaki "tüm firmalarda benzersiz olmalıdır"
      satırı gövde yazı boyunda, etiketten daha büyük basılıyordu.
   Üç durum tokenlardan boyanır (sabit hex yazılmaz → gece modu kırılmaz). */
.peron-hint {
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-muted);
}
.peron-hint.kimlik-bekle { color: var(--text-secondary); }
.peron-hint.kimlik-ok    { color: var(--green); font-weight: 600; }
.peron-hint.kimlik-hata  { color: var(--rose);  font-weight: 600; }
/* 🔴 DAR EKRAN TABANI (denetim bulgusu): ipucu 11.5px, projenin "320-480px'te gövde
   yazısı ≥14px" kuralının altında kalıyordu. Bu metin modalda alt-sheet olarak da
   açılıyor ve çakışma uyarısını TAŞIYOR — okunamazsa uyarı kaybolur. */
@media (max-width: 480px) {
    .peron-hint { font-size: 14px; line-height: 1.4; }
}

/* ─── Yeni Sipariş Sayfası ───────────────────────────────────────────────── */
.new-order-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 14px;
    align-items: start;
}
.order-picker-col { min-width: 0; }
.order-cart-col   { min-width: 0; }

.picker-row-added td { background: rgba(94, 156, 139,0.05) !important; }

.cart-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

@media (max-width: 1100px) {
    .new-order-layout { grid-template-columns: 1fr; }
    .order-cart-col .peron-card { position: static !important; }
}

/* ─── Dashboard widget satırları ────────────────────────────────────────── */
.peron-dash-grid .peron-card-header .peron-card-title {
    display: flex;
    align-items: center;
    gap: 5px;
}
.peron-dash-grid .peron-card-header .peron-card-title svg {
    width: 13px;
    height: 13px;
    opacity: 0.75;
}

/* ─── Satınalma Modülü ───────────────────────────────────────────────────── */
.pur-status-bar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.pur-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--tr-fast);
    box-shadow: 0 1px 2px rgba(50,50,93,0.04);
}
.pur-status-btn:hover { border-color: var(--pri-border); color: var(--pri-text); background: var(--pri-light); }
.pur-status-btn:active { transform: scale(0.96); }
.pur-status-btn.active { background: var(--pri-strong); border-color: var(--pri-text); color: var(--pri-on); box-shadow: 0 2px 8px rgba(63, 116, 168,0.28); }
.pur-status-btn.active .tab-count { background: rgba(255,255,255,0.22); color: #fff; }
.pur-status-btn .tab-count { background: var(--content-bg); color: var(--text-secondary); font-size: 11px; }

/* ─── Üretim Hattı Pipeline ──────────────────────────────────────────────── */
.prod-pipeline {
    display: flex;
    gap: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
}

.prod-pipeline-step {
    flex: 1;
    padding: 14px 10px;
    text-align: center;
    border-right: 1px solid var(--border);
    position: relative;
    transition: background 0.15s;
}
.prod-pipeline-step:last-child { border-right: none; }
.prod-pipeline-step:not(.done):not(.cancelled):hover { background: var(--pri-light); }

.prod-pipeline-step.done { background: rgba(94, 156, 139,0.07); }
.prod-pipeline-step.cancelled { background: var(--border-light); }

.prod-pipeline-count {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.5px;
}
.prod-pipeline-step.done    .prod-pipeline-count { color: #5e9c8b; }
.prod-pipeline-step.cancelled .prod-pipeline-count { color: #97a3b0; }

.prod-pipeline-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Durum seçici hücre içi */
.prod-status-sel {
    height: 32px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    min-width: 130px;
    border-radius: var(--r-sm) !important;
}
/* Aşama hücresi: aşama seçici / ilerleme çubuğu + iş durumu çipi ("Kesim işlemi başladı/bitti")
   dikey istifli. Çip dili mevcut rozetlerle aynı: 5px köşe, 10.5px, .12 tint, -ink metin (AA). */
.prod-stage-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
/* Grup satırında ilerleme çubuğu daralmasın: hücre enini doldur (max-width 168px zaten sınırlar). */
.prod-stage-cell > .prod-grp-progbar { align-self: stretch; margin-top: 0; }
/* Çip metni ("Kesim işlemi başladı" vb.) hiçbir zaman kırpılmaz: kısıtlı Aşama kolonunda
   gerekirse 2 satıra sarar → tam okunur (kullanıcı isteği: yarıda kesilmesin). */
.prod-phase-pill { display: inline-flex; align-items: flex-start; gap: 4px; max-width: 100%; font-size: 10.5px; font-weight: 600; line-height: 1.32; padding: 3px 8px; border-radius: 6px; white-space: normal; overflow-wrap: anywhere; }
.prod-phase-pill svg { width: 11px; height: 11px; flex-shrink: 0; margin-top: 1px; }
.prod-phase-pill span { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; }
/* başladı → devam eden (amber); bitti → tamamlanan (yeşil). AA için -ink token'lar (koyu temada döner). */
.prod-phase-start { color: var(--amber-ink, #95592b); background: rgba(190,116,56,.12); }
.prod-phase-done  { color: var(--green-ink, #43705f); background: rgba(47,124,90,.12); }
/* Manuel personel atama: modül satırında "Bitir" + "Kim yapacak?" modal personel listesi. */
.prod-stage-cell > .prod-finish-btn { align-self: stretch; justify-content: center; margin-top: 1px; }
.prod-asg-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.prod-bf-p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.prod-bf-liste { margin: 0 0 8px; padding-left: 18px; font-size: 12px; line-height: 1.6; max-height: 40vh; overflow-y: auto; color: var(--text-primary); }
.prod-bf-p.prod-bf-not { font-size: 11px; color: var(--text-muted); margin-bottom: 0; }
.prod-asg-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.prod-asg-item:hover { border-color: var(--pri); background: var(--pri-light, rgba(63,116,168,.06)); }
.prod-asg-item input { width: 16px; height: 16px; accent-color: var(--pri); flex-shrink: 0; cursor: pointer; }
.prod-asg-item:has(input:checked) { border-color: var(--pri); background: var(--pri-light, rgba(63,116,168,.09)); box-shadow: inset 0 0 0 1px var(--pri); }
.prod-asg-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--pri-light); color: var(--pri); }
.prod-asg-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.prod-asg-info b { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-asg-info small { font-size: 11.5px; color: var(--text-muted); }
/* 1.423.0 — aşama geçişinde "hammadde hangi depodan düşsün?" (Aşama Geçişi + Kim yapacak? pencereleri). */
.prod-depo-sec { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.prod-depo-sec[hidden] { display: none; }
.prod-depo-bas { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.prod-depo-sat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prod-depo-ad { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; min-width: 0; font-size: 12px; color: var(--text-primary); }
.prod-depo-ad b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.prod-depo-ad small { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-depo-sat .peron-select { width: 100%; max-width: 100%; }

/* ─── Üretim Takibi: ürün akordeonu (alt modüller) ───────────────────────── */
.prod-grp-row.is-expandable { cursor: pointer; }
.prod-grp-row.is-expandable:hover { background: var(--pri-light, rgba(212,163,168,.08)); }
.prod-grp-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Ürün bilgisi: TEK satır — ad (kalın) + ardından inline soluk meta, taşarsa ellipsis. */
.prod-grp-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.prod-grp-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; }
.prod-grp-line .prod-grp-name { flex-shrink: 0; max-width: 45%; font-size: 12px; }
.prod-grp-line .prod-grp-meta { flex: 1; min-width: 0; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ─── Cari → Müşteri → Ürün İSTİFLİ grup başlığı (Üretim Takibi + Üretim Siparişleri ORTAK) ─── */
.prod-grp-title { align-items: flex-start; }
.prod-grp-title .prod-acc-toggle,
.prod-grp-title .prod-acc-spacer { margin-top: 1px; flex-shrink: 0; }
.prod-grp-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; overflow: hidden; }
.prod-grp-cari { font-weight: 700; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.prod-grp-l2 { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.32; }
.prod-grp-l2 em { font-style: normal; color: var(--text-muted); font-weight: 500; }
.prod-grp-stack .prod-grp-meta { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin-top: 1px; }
.prod-grp-stack .tico { display: inline-flex; vertical-align: -1px; opacity: .7; }
/* Düzenlendi rozeti istifin dikey SON satırında (yatay rekabet yok → stack sıfır-genişliğe düşmez). */
.prod-grp-stack .prod-edit-chip { align-self: flex-start; margin-top: 3px; max-width: 100%; }
/* ─── TEK SATIR düz kolonlar + akordiyon (Üretim Siparişleri + Üretim Takibi ORTAK) ─── */
/* Kolonlar tek satıra sığmazsa yatay kaydır (thead sticky, İşlemler sticky-right); başlıklar çakışmaz. */
.po-acc-table { min-width: 1158px; }
.prod-acc-table { min-width: 1370px; }
/* Uzun başlıklar ("SİPARİŞ G.TARİHİ", "TERMİN TARİHİ") komşu kolona değmesin: thead yatay padding + harf aralığını kıs.
   Özgüllük (0,2,3) temel .peron-table--fixed thead kuralını (0,1,3) geçer → padding gerçekten uygulanır. */
.peron-table--fixed.po-acc-table > thead > tr > th,
.peron-table--fixed.prod-acc-table > thead > tr > th { padding-left: 8px; padding-right: 8px; letter-spacing: .01em; }
/* Özgüllük (0,2,3) → taban ".peron-table--fixed > tbody > tr > td{vertical-align:top}" (0,1,3) kuralını GEÇER (yoksa ortalama ölü kalır). */
.peron-table--fixed > tbody > tr.po-flat-row > td,
.peron-table--fixed > tbody > tr.prod-flat-row > td { vertical-align: middle; }
/* Sipariş No hücresi: chevron (aç/kapat) + kod tek satır. */
.peron-table--fixed td.col-code .po-no-cell { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.peron-table--fixed td.col-code .po-no-cell .user-code { min-width: 0; }
.peron-table--fixed td.col-code .po-no-cell .prod-acc-toggle { width: 22px; height: 22px; flex-shrink: 0; }
.peron-table--fixed td.col-code .po-no-cell .prod-acc-toggle svg { width: 13px; height: 13px; }
/* 1.415.2 — DOKUNMATİK TABLET (≥769px, kaba işaretçi): akordiyon oku ve fiş no bağlantısının isabet alanı ≤768 bandındaki
   sözde öğe deseniyle 24px tabanına çıkar (ölçüldü 769–1024: 22×22). Kutu ve punto BÜYÜMEZ. */
@media (min-width: 769px) and (pointer: coarse) {
    .prod-acc-toggle { position: relative; }
    .prod-acc-toggle::after { content: ""; position: absolute; inset: -2px; }
    span.gl-fisno { position: relative; }
    span.gl-fisno::after { content: ""; position: absolute; inset: -6px 0; }
}
/* Alt modül satırlarında ad/meta hâlâ alt alta (akordeon detayı kompaktlanmadı). */
.prod-mod-table .prod-grp-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Düzenlendi rozeti + mat mavi satır */
/* 🔴 ZEMIN TEMAYA DONUYOR, METIN DONMUYORDU (1.364.0 denetimi). `rgba(58,93,153,.12)`
   kart zeminine gore composite olur ve gece modunda KOYULASIR; ama `color` sabit
   #3a5d99 (koyu mavi) kaldigi icin koyu zeminde koyu metin olusuyordu — olculen
   2,26:1. Uretim takibinde "kimin degistirdigi" okunmuyordu.
   --pri-text iki temada da tanimli (:root 114 · dark 411). */
.prod-edit-chip { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--pri-text); background: rgba(58,93,153,.12); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.prod-edit-chip svg { width: 10px; height: 10px; }
tr.prod-edited > td { background: rgba(58,93,153,.07) !important; }
tr.prod-edited > td:first-child { box-shadow: inset 3px 0 0 #3a5d99; }

/* Aşama bazlı pastel renkler — her üretim aşaması ayrı tonda; bitince ürün komple yeşil.
   .peron-badge.{cls} ile aynı özgüllükte olduğundan SONRA tanımlanır → bu kurallar kazanır. */
/* 🔴 `dikiste` (1.74'te `diliste`→`dikiste` yeniden adlandırıldı). Eski `diliste` seçicisi
   HİÇBİR ZAMAN eşleşmiyordu → Dikişte'nin turkuazı ölüydü, Kesimde ile aynı mavi çıkıyordu. */
.peron-badge.prod-st-beklemede    { background: #f2f0ec; color: #6a6357; border-color: #e4e0d8; }
.peron-badge.prod-st-plana_alindi { background: #eef1f5; color: #5b6675; border-color: #dfe5ec; }
.peron-badge.prod-st-kesimde      { background: #e3f0fb; color: #2f6aa6; border-color: #cfe3f6; }
.peron-badge.prod-st-dikiste      { background: #e1f4f1; color: #206b5f; border-color: #c9eae4; }
.peron-badge.prod-st-dosemede     { background: #efe9f8; color: #6f54a6; border-color: #e0d6f1; }
.peron-badge.prod-st-ambalajda    { background: #fdeedd; color: #8a5622; border-color: #f6ddc2; }
.peron-badge.prod-st-tamamlandi   { background: #e2f3e7; color: #256a41; border-color: #cbe9d3; }
.peron-badge.prod-st-sevk_edildi  { background: var(--st-ship-bg); color: var(--st-ship-fg); border-color: var(--st-ship-bd); }
.peron-badge.prod-st-iptal        { background: #fae6e7; color: #b1454b; border-color: #f1cdcf; }
/* prod-st badge'leri success/warning/danger ikinci sınıfını da taşır; dark tema o generic
   override'ı uygulayınca metin AÇILIP light prod-st zemininde washout oluyordu (2.2-2.8:1).
   prod-st zemini iki temada da AÇIK → dark'ta da KOYU metin kullan (eşit specificity, sonra gelir → kazanır). */
html[data-peron-theme="dark"] .peron-badge.prod-st-beklemede    { color: #6a6357; }
html[data-peron-theme="dark"] .peron-badge.prod-st-plana_alindi { color: #5b6675; }
html[data-peron-theme="dark"] .peron-badge.prod-st-kesimde      { color: #2f6aa6; }
html[data-peron-theme="dark"] .peron-badge.prod-st-dikiste      { color: #206b5f; }
html[data-peron-theme="dark"] .peron-badge.prod-st-dosemede     { color: #6f54a6; }
html[data-peron-theme="dark"] .peron-badge.prod-st-ambalajda    { color: #8a5622; }
html[data-peron-theme="dark"] .peron-badge.prod-st-tamamlandi   { color: #256a41; }
html[data-peron-theme="dark"] .peron-badge.prod-st-sevk_edildi  { color: var(--st-ship-fg); }
html[data-peron-theme="dark"] .peron-badge.prod-st-iptal        { color: #b1454b; }

/* ═══ SEVK — Üretim Takibi aşama hücresi + sevk modalı (1.259.0) ═══════════════
   Renk: tek aksan (--pri) + durum renkleri; sabit hex YOK (gece modu bozulmasın).

   🔴 `.prod-ship-btn` (+ `:hover`, ` svg`, `.is-partial`) 1.274.0'da SİLİNDİ: o düğmeyi
      üreten tek yer `sevkCell` idi ve "Sevk Et" bu ekrandan kaldırıldı (sevk artık
      Sevkiyat Planı'ndan yapılır). Ölü CSS bırakmak mayındır — bir sonraki geliştirici
      "stil var demek ki düğme de olmalı" diye sevk yolunu geri açabilirdi.
   🔴 1.380.0 — AYNI GEREKÇEYLE `.prod-sevk-tag` · `.prod-unship-btn` ·
      `.prod-shipplan-btn` · `.prod-sevkplan-tag` da SİLİNDİ; yerlerini aşağıdaki
      `.prod-bitti` (durum çipi) ve `.prod-bitti-ico` (tek simge düğme) aldı.
      Ölçülmüş iki kural korundu: çip ZEMİNSİZ olamaz (`--st-ship-fg` koyu satırda
      2,26:1'e düşüyordu) ve dokunma hedefi yoğun yüzey eşiğini (≥28px) karşılar. */

/* ── BİTMİŞ ÜRÜN AŞAMA HÜCRESİ (1.380.0) ─────────────────────────────────────
   Tek satır: durum çipi + en fazla bir simge düğme. Bütçe ÖLÇÜLMÜŞ kolondan:
   Aşama 131px − dolgu 20 = 111px içerik → çip ≤ ~77px + 6px boşluk + 28px düğme.
   🔴 Çipte simge YOK: "Sevk Edildi" + kamyon 119px'e çıkıp kolonu taşırıyordu.
   🔴 Renkler `--st-done-*` / `--st-ship-*` — iki temada AA ölçülmüş aşama çipi ailesi
      (sabit hex YOK, gece modu token ezmesiyle kendiliğinden döner). */
.prod-stage-cell--bitti { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 6px; }
.prod-sevk-satir { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
.prod-bitti {
    box-sizing: border-box; display: inline-flex; align-items: center; flex-shrink: 0;
    height: 22px; padding: 0 6px; border: 1px solid var(--st-done-bd); border-radius: 6px;
    background: var(--st-done-bg); color: var(--st-done-fg);
    font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.prod-bitti--sevk { border-color: var(--st-ship-bd); background: var(--st-ship-bg); color: var(--st-ship-fg); }
.prod-bitti-ico {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 28px; padding: 0; border-radius: 6px;
    color: var(--text-muted);
}
.prod-bitti-ico svg { width: 13px; height: 13px; }
.prod-bitti-ico.is-plan { color: var(--pri-text); }
.prod-bitti-ico.is-btn {
    border: 1px solid var(--pri-border); background: var(--card-bg); color: var(--pri-text);
    cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.prod-bitti-ico.is-btn:hover { border-color: var(--pri); background: var(--pri-strong); color: var(--pri-on); }
.prod-bitti-ico.is-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.prod-bitti-ico.is-geri { border-color: var(--border); color: var(--text-secondary); }
.prod-bitti-ico.is-geri:hover { border-color: var(--rose); background: var(--card-bg); color: var(--rose-ink); }

/* ── "Sevkiyat Planına Gönder" onay penceresi ──────────────────────────────── */
.spg-lead   { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--text-primary); }
.spg-skip   { display: block; margin-top: 4px; font-size: 12px; color: var(--amber); }
.spg-list   {
    border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden auto; max-height: min(240px, 40vh); margin-bottom: 16px;
}
.spg-row    {
    display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
    padding: 7px 12px; border-top: 1px solid var(--border-light);
}
.spg-row:first-child { border-top: 0; }
.spg-name   { flex: 1 1 0; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spg-meta   { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted); }
.spg-more   { padding: 7px 12px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border-light); }
.spg-opt    { font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
/* 🔴 `flex-wrap` ŞART: input[type=date] UA'dan ~120px içsel minimum taşır ve üç
   düğmeyle birlikte dar modalda taşardı. */
.spg-date-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spg-date-row .peron-input { flex: 0 1 auto; min-width: 0; }
.spg-hint   { margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--text-muted); }

/* ── Sevkiyat günü penceresi (tek satır / toplu kaydırma) ──────────────────── */
.spd-lead { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--text-primary); }
.spd-row  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spd-row .peron-input { flex: 0 1 auto; min-width: 0; }
.spd-hint { margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--text-muted); }

/* ── Sevk modalı ───────────────────────────────────────────────────────────── */
.sevk-uyari {
    box-sizing: border-box; margin: 0 0 14px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; line-height: 1.55; color: var(--text-primary);
}
.sevk-uyari svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.sevk-uyari.is-ok   { background: var(--st-done-bg); border-color: var(--st-done-bd); color: var(--st-done-fg); }
.sevk-uyari.is-warn { background: var(--st-pack-bg); border-color: var(--st-pack-bd); color: var(--st-pack-fg); }
.sevk-uyari-alt     { display: inline-block; margin-top: 4px; font-size: 12px; opacity: .88; }

.sevk-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
/* Nakliye alanının nereden geldiğini söyler: cari kartından mı otomatik doldu,
   yoksa kartta tanımsız mı. Operatör alanı silebilir ya da elle yazabilir. */
.sevk-oto-not { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.sevk-mod-baslik {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--text-secondary);
}
.sevk-mod-ipucu { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.sevk-mod-liste {
    border: 1px solid var(--border); border-radius: 8px; overflow: hidden auto;
    /* 🔴 Ölçüldü (320/390px): sabit 264px, alt-sheet'in kendi kaydırmasıyla ÜST ÜSTE
       iki kaydırma alanı üretiyordu — parmak listenin üzerindeyken sheet kaydırılamıyor.
       45vh ile telefonda liste doğal boyuna yakın kalır, tek kaydırma olur. */
    max-height: min(264px, 45vh);
}
.sevk-mod {
    box-sizing: border-box;
    display: flex; align-items: center; gap: 10px;
    min-height: 44px;          /* dokunma hedefi — satırın TAMAMI tıklanabilir (label) */
    padding: 6px 12px; cursor: pointer;
    border-top: 1px solid var(--border-light);
}
.sevk-mod:first-child { border-top: 0; }
.sevk-mod:hover       { background: var(--pri-light); }
.sevk-mod input       { width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; }
.sevk-mod-ad          { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sevk-mod-st          { flex: 0 0 auto; }
/* Üretimi bitmemiş modül — varsayılan olarak işaretsiz gelir, sebebi görünür olsun. */
.sevk-mod.is-open .sevk-mod-ad { color: var(--text-muted); }

.sevk-tutar {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-top: 16px; padding: 12px 14px;
    background: var(--pri-light); border-radius: 8px;
    font-size: 13px; color: var(--text-secondary);
}
.sevk-tutar b {
    font-size: 20px; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sevk-tutar-alt  { width: 100%; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* --rose DOLGU/nokta rengidir; metin için AA-koyu türev --rose-ink kullanılır
   (peron-panel.css:66-71'deki kendi notu). Ölçüldü: --rose 4,03 / gece 3,93 (FAIL). */
.sevk-tutar-hata { color: var(--rose-ink); font-size: 13px; line-height: 1.5; }

/* Geniş ekranda tarih + nakliyeci yan yana; darda alt alta (mobile-first). */
@media (min-width: 560px) {
    .sevk-grid { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); }
    /* Sevkiyat Planı'ndan yapılan sevkte tarih alanı YOK (kullanıcı kuralı) → geriye
       tek alan kalır; iki sütunlu ızgarada nakliye kutusu 190px'lik BOŞ bir sütunun
       sağında asılı kalırdı. Sınıf aynı media bloğunda tanımlı: `.sevk-grid`
       kuralıyla eşit özgüllükte olsaydı SONRAKİ kazanırdı, sınıf eklemesi zaten
       daha özgül — iki temada da tek yol. */
    .sevk-grid.is-tarihsiz { grid-template-columns: minmax(0, 1fr); }
    /* Liste dar ekranda 45vh'e kilitliydi; masaüstünde ölçülen 6 satırlık pencere yeter. */
    .sevk-mod-liste { max-height: 264px; }
}
/* 🔴 320px'te gövde metni ≥14px olmalı (mobil kuralı). Yeni yüzeylerde yükseltme yoktu:
   ölçüldü .sevk-mod-ipucu 11,5px · .sevk-tutar-alt / .sevk-uyari-alt 12px.
   Emsal: Raporlar ekranının 11277-11284'teki aynı yükseltmesi. */
@media (max-width: 560px) {
    .sevk-mod-ipucu, .sevk-tutar-alt, .sevk-uyari-alt, .sevk-oto-not { font-size: 13px; }
    /* .inv-sw-ord / .inv-sw-note buradan KALDIRILDI: ikisi de 14042-14044'te
       media DIŞINDA ve DAHA SONRA 12px tanımlı — media query özgüllük EKLEMEZ,
       o yüzden buradaki kural HİÇBİR genişlikte kazanmıyordu (ölü kural). */
}

/* 🔴 1.380.0 — `.prod-shipplan-btn`/`.prod-unship-btn` için yazılmış 44×44 `::after`
   dokunma katmanı KALDIRILDI: iki düğme de silindi ve yerini alan `.prod-bitti-ico`
   zaten 28×28px (kullanıcı kuralı: yoğun yüzey ≥28px; 44px zorunluluğu 2026-09-03'te
   kaldırıldı). */

/* Henüz üretime girmemiş (tüm modüller "plana alındı") → ürün satırı açık mavi
   (düzenleme indigo tonundan belirgin farklı sky-blue; tamamlandı yeşili bunu ezer). */
tr.prod-all-planned > td { background: rgba(45,106,166,.10) !important; }
tr.prod-all-planned > td:first-child { box-shadow: inset 3px 0 0 #2f6aa6; }
tr.prod-all-planned .prod-grp-name { color: #2f6aa6; }
/* Tüm modüller tamamlandı → ürün satırı komple yeşil (mavi düzenleme tonunu ezer). */
tr.prod-all-done > td { background: rgba(47,125,79,.10) !important; }
/* 1.380.0 — yeşil SOL ŞERİT kaldırıldı (kullanıcı: "yeşil çizgi olmasın"; tasarım
   sözleşmesi md.12 kenar aksan çizgisini zaten yasaklıyor). Durum artık aşama
   hücresindeki "Tamamlandı" çipinden okunur. */
tr.prod-all-done .prod-grp-name { color: #2f7d4f; }
/* Yapışkan İşlemler hücresi ŞEFFAF olmamalı: satır tonu (edited/all-done/all-planned, yarı
   saydam !important) yatay kaydırmada altındaki kolonların görünmesine yol açar → OPAK zemine zorla.
   ANCAK düz card-bg (beyaz) satırın renkli tonundan farklı görünüyordu ("İşlemler kolonu beyaz").
   Çözüm: aynı yarı-saydam tonu OPAK var(--card-bg) üzerine katmanla → hem opak hem satırla aynı renk
   (gradient tonu satır kuralıyla birebir aynı rgba; card-bg tabanı gece modunda otomatik döner). */
#prod-shell tr.prod-edited td.col-actions {
    background: linear-gradient(rgba(58,93,153,.07), rgba(58,93,153,.07)), var(--card-bg) !important;
}
#prod-shell tr.prod-all-planned td.col-actions {
    background: linear-gradient(rgba(45,106,166,.10), rgba(45,106,166,.10)), var(--card-bg) !important;
}
#prod-shell tr.prod-all-done td.col-actions {
    background: linear-gradient(rgba(47,125,79,.10), rgba(47,125,79,.10)), var(--card-bg) !important;
}
/* Üretim Takibi işlem ikonları — kompakt, eşit boy, TEK satır (7 ikon İptal+Sil yan yana). */
#prod-shell td.col-actions > div {
    flex-wrap: nowrap;
    gap: 3px;
    justify-content: flex-end;
}
#prod-shell td.col-actions .peron-btn.sm {
    /* Yukseklik tablo yogunluk sozlesmesinden okunur (elle sayi yazilmaz). */
    height: var(--tbl-ctl-h);
    min-width: 26px;
    width: 26px;
    padding: 0 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#prod-shell td.col-actions .peron-btn.sm svg { width: 16px; height: 16px; }
/* Üretim Takibi · İptal sekmesi: "Geri Al" ETİKETLİ birincil eylem — 26px ikon kutusundan çıkar, yumuşak-yeşil pill.
   Seçici (1,4,1) yukarıdaki 26px kuralını (1,3,1) geçer → !important gerekmez; --mint-surface + --green-ink temaya göre otomatik döner. */
#prod-shell td.col-actions .peron-btn.sm.prod-restore-btn {
    width: auto;
    min-width: 0;
    padding: 0 10px;
    gap: 6px;
    /* Yükseklik tablo yoğunluk sözleşmesinden okunur — komşu simge butonlarıyla
       aynı boyda kalsın diye elle sayı yazılmaz. */
    height: var(--tbl-ctl-h);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--r-sm);
    color: var(--green-ink);
    background: var(--mint-surface);
    border: 1px solid rgba(94, 156, 139, 0.40);
    transition: background var(--tr-fast), border-color var(--tr-fast);
}
#prod-shell td.col-actions .peron-btn.sm.prod-restore-btn:hover {
    background: rgba(94, 156, 139, 0.32);
    border-color: rgba(94, 156, 139, 0.58);
}
#prod-shell td.col-actions .peron-btn.sm.prod-restore-btn svg { width: 16px; height: 16px; }
/* Üretim Takibi: grup satırı tek satıra indirildi → dikey padding düşür, daha çok ürün sığsın. */
/* 🔴 KALDIRILDI (tablo yogunluk sozlesmesi): grup satirina ozel dolgu/yazi boyu.
   ID tasidigi icin dosya SONUNDAKI kanonik kurali eziyordu; yogunluk artik
   --tbl-* token'larindan gelir ve grup satiri da diger satirlarla ayni boyda. */
.prod-acc-toggle {
    flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-bg);
    color: var(--text-secondary); cursor: pointer; font-size: 13px; line-height: 1;
    transition: transform .15s ease, background .15s ease;
}
.prod-acc-toggle svg { width: 14px; height: 14px; }
.prod-grp-row.is-open .prod-acc-toggle { transform: rotate(90deg); background: var(--pri-strong); color: var(--pri-on); }
/* "İşlemler" başlığı ORTALI — gövde aksiyon butonları flex-end kalır (kullanıcı: sağa yaslı değil, ortala). */
.prod-acc-table thead th.col-actions { text-align: center; }

/* 🔴 STICKY SIZINTISI — İÇ İÇE TABLO. :5789'daki kural
   ".peron-table--fixed td.col-actions" bir DESCENDANT seçicidir (">" yok). Akordiyon açılınca
   iç modül tablosu (.prod-mod-table) dış tablonun <td colspan="12"> hücresinin İÇİNDE durur →
   kural iç tablonun aksiyon hücresine de uygulanıyor ve onu ekranın sağ kenarına çiviliyordu.
   Dış tablonun colgroup toplamı 1364px olduğundan 1366/1440 ekranda yatay kaydırma HER ZAMAN
   var; bu yüzden iç tablonun "İşlemler" hücresi doğal yerinden sola çekilip modül tablosunun
   "Aşama"/"Termin" sütunlarının ÜZERİNE biniyordu. (Ölçüldü: iç td.col-actions
   position=sticky, right=0, z-index=2 — olmamalıydı.)
   Paylaşılan :5789 kuralını "> tbody > tr >" ile daraltmak TÜM sabit tabloları etkileyecek
   riskli bir cerrahi olurdu; bunun yerine EKLEMELİ ve yalnız iç tabloyu hedefleyen bu geri
   alma yazıldı. Özgüllük (0,3,1) > (0,2,1) → kaynak sırasından bağımsız kazanır.
   Mobilde zaten :8469 hepsini static yapıyor; bu kural orada da zararsızdır. */
.peron-table--fixed .prod-mod-table td.col-actions,
.peron-table--fixed .prod-mod-table th.col-actions {
    position: static;
    right: auto;
    z-index: auto;
    box-shadow: none;
    background: transparent;
}
.prod-acc-spacer { display: inline-block; width: 24px; flex-shrink: 0; }
.prod-grp-modcount { color: var(--text-muted); }
.prod-grp-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.prod-grp-prog { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-left: 2px; }

.prod-acc-body { padding: 4px 12px 12px 44px; }
.prod-mod-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.prod-mod-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 7px 10px; background: var(--content-bg); border-bottom: 1px solid var(--border); }
.prod-mod-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light, var(--border)); vertical-align: top; font-size: 12.5px; }
.prod-mod-table tr:last-child td { border-bottom: none; }
/* 🔴 SAYI SATIR ATLAMAZ (1.336.0). ÖLÇÜLDÜ 768px: Takım kolonu 54px ve takım hanesi
   3'e çıkınca "12,345" / "573,125" İKİ SATIRA kırılıyordu (Range.getClientRects 1→2);
   bir sayının ortadan bölünmesi onu okunmaz yapar. `table-layout: auto` olduğu için
   `nowrap` kolonu 54→68px büyütüyor ve farkı esnek "Atanan"dan alıyor — tablo KABINDAN
   TAŞMIYOR (ölçüldü: tabloTasma false · sayfa yatay kaydırma false).
   Miktar kolonu da `col-num`dur ve aynı kuralı hak eder: ikisi de sayıdır. */
.prod-mod-table td.col-num, .prod-mod-table th.col-num { white-space: nowrap; }

/* 🔴🔴 1.311.0 — AKORDİYON MODÜL TABLOSU DA TOKEN'A BAĞLANDI (denetim bulgusu).
   `.prod-mod-table` `.peron-table` sınıfını TAŞIMIYOR, bu yüzden yukarıdaki iki kural
   yoğunluk sözleşmesinin DIŞINDA kalıyordu: 12,5px / 10,5px SABİTTİ.
   🔴 Bu, "1 punto düşür" isteğini akordiyonda sessizce ETKİSİZ bırakmakla kalmıyordu —
      TERSİNE ÇEVİRİYORDU: `dueCell()` (Termin) eskiden satır içi `font-size:12px`
      taşıyordu ve bu, buradaki 12,5px'i EZİYORDU. Satır içi stil kaldırılınca hücre
      12px'ten 12,5px'e ÇIKTI. "Atanan" hücresi de zaten 12,5px'e denk düştüğü için
      hiç küçülmüyordu; grup satırı 10,5px'e inerken alt satır 12,5px kalıyor,
      akordiyon açılınca iki yazı boyu yan yana tutarsız görünüyordu.
   🔴 Rejim MASAÜSTÜ-FARE: dokunmatikte token kök değerinde kalır, yani mobil görünüm
      bu turdan ÖNCEKİYLE BİREBİR aynıdır (12,5px). */
@media (min-width: 769px) and (pointer: fine) {
    #prod-shell .prod-mod-table td { font-size: var(--tbl-fs); }
    #prod-shell .prod-mod-table th { font-size: var(--tbl-head-fs); }
    #prod-shell .prod-mod-table .prod-grp-meta { font-size: var(--tbl-code-fs); }
}
.prod-mat-lbl { font-weight: 600; color: var(--text-muted); }

/* ─── Modül ZAMAN ÇİZELGESİ (nested akordeon) ─────────────────────────────── */
.prod-mod-tl-btn.is-open { background: var(--pri-strong); color: var(--pri-on, #fff); border-color: var(--pri); }
.prod-mod-detail > td.prod-mod-detail-cell { padding: 0 !important; background: var(--content-bg); border-bottom: 1px solid var(--border); }
.prod-mod-tl { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 16px; }
.prod-tl-loading { display: flex; justify-content: center; padding: 18px; }
.prod-tl-empty { padding: 12px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.prod-tl-sec { display: flex; flex-direction: column; gap: 8px; }
.prod-tl-h { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pri-text); }
.prod-tl-h svg { width: 13px; height: 13px; }
/* Aşama yolculuğu — dikey zaman çizgisi */
.prod-tl-list { list-style: none; margin: 0; padding: 0 0 0 6px; }
.prod-tl-step { position: relative; padding: 0 0 14px 20px; border-left: 2px solid var(--border); }
.prod-tl-step:last-child { border-left-color: transparent; padding-bottom: 2px; }
.prod-tl-dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--pri); border: 2px solid var(--card-bg); box-shadow: 0 0 0 1px var(--pri); }
.prod-tl-content { display: flex; flex-direction: column; gap: 2px; }
.prod-tl-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prod-tl-unit { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.prod-tl-wait { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--amber-ink, #95592b); background: rgba(190,116,56,.12); border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.prod-tl-wait svg { width: 11px; height: 11px; }
.prod-tl-row2 { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.prod-tl-work { color: var(--green-ink, #43705f); font-weight: 600; }
.prod-tl-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; }
/* QR çalışma kayıtları tablosu */
.prod-tl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.prod-tl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.prod-tl-table th { text-align: left; padding: 6px 10px; background: var(--card-bg); color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.prod-tl-table td { padding: 6px 10px; border-top: 1px solid var(--border-light, var(--border)); color: var(--text-primary); vertical-align: middle; white-space: nowrap; }
.prod-tl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.prod-tl-ubadge { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--pri-text); background: var(--pri-light); border-radius: 5px; padding: 1px 8px; }
.prod-tl-live { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--green-ink, #43705f); }
.prod-tl-live svg { width: 11px; height: 11px; }

/* ─── Grup aşamaları modalı (F4) ─────────────────────────────────────────── */
/* 🔴 1.380.0 — `.prod-gst-table` / `.prod-gst-mod` SİLİNDİ: "Aşamaları Gör" modalı Üretim
   Hikâyesi'ne katıldı (peron-mod-production.js → storyStepRow). */

/* ─── Tüm Aşamalar görünümü (F5) ─────────────────────────────────────────── */
.peron-back-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pri-text);
    text-decoration: none;
    margin-bottom: 4px;
}
.peron-back-link:hover { text-decoration: underline; }
.sh-table .col-num { text-align: right; }

/* ─── SSH — Satış Sonrası Hizmet ─────────────────────────────────────────── */
/* 🔴 1.380.0 — `!important` KALDIRILDI: telefonda da 12px'e kilitliyordu ve iOS 16px
   altındaki seçiciye odaklanınca sayfayı büyütüyor (mobil denetim, 390px). Özgüllükle
   (0,3,2) masaüstü değeri korunur; dar ekranda 16px kalkanı aşağıda. */
.peron-table td select.ssh-status-sel.peron-select { min-width: 130px; height: 30px; font-size: 12px; padding: 0 8px; }
@media (max-width: 768px) {
    .peron-table td select.ssh-status-sel.peron-select { min-width: 150px; height: 36px; font-size: 16px; }
}
/* 🔴 1.380.0 — `#ssh-shipped-wrap { max-height: 50vh; overflow-y: auto }` KALDIRILDI: içindeki
   `.ssh-urun-liste` zaten kendi içinde kayıyordu → İÇ İÇE İKİ kaydırma alanı oluşuyordu. */

/* ── SSH EKLE 1. ADIM — CARİ SEÇ (1.380.0) ─────────────────────────────────────
   Arama üstte sabit, liste KENDİ içinde kayar; satır: ad (birincil) · il/telefon ·
   ürün sayısı. Satır bir düğmedir (klavyeyle gezilir, Enter seçer). */
.ssh-cari-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ssh-cari-ara { box-sizing: border-box; width: 100%; }
.ssh-cari-liste {
    display: flex; flex-direction: column; min-width: 0;
    max-height: min(56vh, 520px); max-height: min(56dvh, 520px);
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg);
}
.ssh-cari {
    box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: 12px; row-gap: 1px; align-items: center; width: 100%; min-height: 44px; padding: 7px 12px;
    border: 0; border-top: 1px solid var(--border-light); background: transparent;
    text-align: left; font: inherit; color: var(--text-primary); cursor: pointer;
}
.ssh-cari:first-child { border-top: 0; }
.ssh-cari[hidden] { display: none; }
.ssh-cari:hover { background: var(--pri-light); }
.ssh-cari:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; background: var(--pri-light); }
.ssh-cari-ad { grid-column: 1; grid-row: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssh-cari-alt { grid-column: 1; grid-row: 2; min-width: 0; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssh-cari-urun {
    grid-column: 2; grid-row: 1 / 3; align-self: center;
    padding: 2px 8px; border-radius: 999px; background: var(--pri-light); color: var(--pri-text);
    font-size: 11px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ssh-cari-yok[hidden] { display: none; }
.ssh-cari-say { font-size: 11px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
/* 2. adım başı: seçili cari + geri dönüş */
.ssh-ekle-secili { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.ssh-cari-degis {
    box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg);
    color: var(--pri-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ssh-cari-degis:hover { border-color: var(--pri); background: var(--pri-light); }
.ssh-cari-degis svg { width: 14px; height: 14px; }
.ssh-ekle-secili-k { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ssh-ekle-secili-ad { min-width: 0; font-size: 14px; color: var(--text-primary); overflow-wrap: anywhere; }
/* ── SSH EKLE (1.380.0) ──────────────────────────────────────────────────────
   Kullanıcı: *"müşteri ismi gözükmüyor bu önemli gözüksün, daha modern bir modal yap
   ... bedelli tikini tamamen kaldır ... birden çok modül seçilmişse hepsine ayrı fiyat
   ve arıza notu"*. Kart: kimlik (ürün + MÜŞTERİ) · bilgi şeridi · modül satırları
   (seç · bedel · not) · alt şerit (termin · genel not · toplam · ekle).
   Mobile-first: modül satırı tek kolon başlar, ≥641px'te üç kolon yan yana. */
.ssh-ekle { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ssh-zorunlu { color: var(--rose-ink); }
.ssh-ekle-bos { padding: 18px 4px; font-size: 12px; color: var(--text-muted); }
.ssh-ekle-hata { color: var(--rose-ink); }
.ssh-ekle-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ssh-ekle-baslik { font-size: 12px; color: var(--text-secondary); }
.ssh-ekle-baslik span { color: var(--text-primary); font-weight: 600; }
.ssh-ekle-ara { flex: 1 1 220px; max-width: 320px; min-width: 0; }
.ssh-urun-liste { display: flex; flex-direction: column; gap: 10px; max-height: min(62vh, 640px); max-height: min(62dvh, 640px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.ssh-urun {
    box-sizing: border-box; min-width: 0;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
    transition: border-color .15s ease, opacity .15s ease;
}
.ssh-urun[hidden] { display: none; }
.ssh-urun:focus-within { border-color: var(--pri-border); }
.ssh-urun.is-eklendi { opacity: .6; }
.ssh-urun-bas { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 12px 14px 10px; }
.ssh-urun-kimlik { flex: 1 1 260px; min-width: 0; }
.ssh-urun-ad { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.ssh-urun-ad code { font-size: 11px; color: var(--text-muted); }
.ssh-urun-musteri { margin-top: 3px; font-size: 13px; color: var(--pri-text); overflow-wrap: anywhere; }
.ssh-urun-musteri span { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.ssh-urun-bilgi { flex: 0 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 4px 16px; margin: 0; }
.ssh-urun-bilgi div { min-width: 0; }
.ssh-urun-bilgi dt { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.ssh-urun-bilgi dd { margin: 0; font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ssh-mod-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--border-light); font-size: 11px; color: var(--text-muted); }
.ssh-gecmis-btn { flex-shrink: 0; min-height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--pri-text); font-size: 11px; font-weight: 600; cursor: pointer; }
.ssh-gecmis-btn:hover { background: var(--pri-light); }
.ssh-urun-gecmis { padding: 4px 14px 8px; }
.ssh-urun-gecmis[hidden] { display: none; }
.ssh-mod-liste { display: flex; flex-direction: column; padding: 0 14px 6px; }
.ssh-mod {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
    padding: 7px 0; border-top: 1px dashed var(--border-light);
}
.ssh-mod:first-child { border-top: 0; }
.ssh-mod-sec { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; color: var(--text-primary); cursor: pointer; min-width: 0; }
.ssh-mod-sec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssh-mod-sec input { width: 16px; height: 16px; accent-color: var(--pri); flex-shrink: 0; }
.ssh-mod.is-secili .ssh-mod-sec { font-weight: 600; }
.ssh-mod .ssh-mod-bedel,
.ssh-mod .ssh-mod-not { box-sizing: border-box; width: 100%; min-width: 0; }
.ssh-mod .ssh-mod-bedel { text-align: right; font-variant-numeric: tabular-nums; }
.ssh-mod .ssh-mod-bedel::placeholder { color: var(--text-muted); font-style: italic; }
.ssh-mod input:disabled { opacity: .45; }
.ssh-urun-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px 12px; border-top: 1px solid var(--border-light); background: var(--content-bg); border-radius: 0 0 10px 10px; }
.ssh-fld { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.ssh-urun-alt .ssh-due { max-width: 160px; }
.ssh-urun-alt .ssh-genel-not { flex: 1 1 200px; min-width: 0; }
.ssh-toplam { margin-left: auto; font-size: 12px; font-style: italic; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ssh-toplam.is-bedelli { font-style: normal; font-weight: 700; color: var(--text-primary); }
.ssh-eklendi { font-size: 12px; font-weight: 600; color: var(--green-ink); }
@media (min-width: 641px) {
    .ssh-mod { grid-template-columns: minmax(140px, 1.2fr) minmax(96px, 120px) minmax(0, 2fr); align-items: center; gap: 10px; }
    .ssh-urun-bilgi { grid-template-columns: repeat(4, minmax(0, auto)); }
}

/* ── SSH LİSTESİ — tek satır + akordeon (1.380.0) ──────────────────────────── */
.ssh-t col.sshc-no     { width: 176px; }
.ssh-t col.sshc-tarih  { width: 88px; }
.ssh-t col.sshc-cari   { width: 16%; }
.ssh-t col.sshc-mus    { width: 14%; }
.ssh-t col.sshc-urun   { width: auto; }
.ssh-t col.sshc-termin { width: 88px; }
.ssh-t col.sshc-bedel  { width: 108px; }
.ssh-t col.sshc-asama  { width: 152px; }
.ssh-t col.sshc-eyl    { width: 76px; }
/* 1.381.0: dar ekranda aşama seçicisi 150px + 2×8px dolgu = 166px ister; 152px'lik kolonda
   (ölçüldü 390px) İşlem kolonunun üstüne biniyordu. Kolon seçiciyle BİRLİKTE büyür.
   🔴 Bu kural taban kolon kurallarının ALTINDA durmak zorunda: medya sorgusu özgüllük
      eklemez, yukarıdaki seçici bloğunun içine yazılınca (ilk deneme) taban 152px kazanıyordu. */
@media (max-width: 768px) { .ssh-t col.sshc-asama { width: 168px; } }
.ssh-t .ssh-row.is-expandable { cursor: pointer; }
.ssh-t .ssh-row.is-open > td { background: var(--pri-light); }
.ssh-t .ssh-idwrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ssh-t .ssh-acc {
    flex: 0 0 auto; box-sizing: border-box; width: 24px; height: 24px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer;
    transition: transform .15s ease;
}
.ssh-t .ssh-acc:hover { background: var(--pri-light); color: var(--pri-text); }
.ssh-t .ssh-row.is-open .ssh-acc { transform: rotate(90deg); color: var(--pri-text); }
.ssh-t .ssh-c-tarih, .ssh-t .ssh-c-termin { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ssh-t .ssh-c-cari, .ssh-t .ssh-c-mus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssh-t .ssh-c-cari { color: var(--text-secondary); }
.ssh-t .ssh-urun-hucre { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ssh-t .ssh-urun-ad { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssh-mod-cip { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--rose-ink); background: color-mix(in srgb, var(--rose-ink) 10%, transparent); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.ssh-mod-tek { flex-shrink: 1; min-width: 0; font-size: 11px; color: var(--rose-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssh-t .ssh-c-bedel, .ssh-t th.ssh-th-bedel { text-align: right; }
.ssh-bedel { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ssh-bedelsiz { color: var(--text-muted); font-style: italic; }
.ssh-bos { color: var(--text-muted); }
.ssh-detail-row > td.ssh-detail-cell { padding: 0; background: var(--content-bg); }
/* 🔴 1.380.0 — KULLANICI: *"yazılar ile renkler birbirine girmiş, oradaki mavi zemin rengini
   tamamen kaldır ve akordiyondaki yazıyı tabloya yay, neden sınırlı tuttun"*.
   İç tablo dış `.peron-table`ın İÇİNDE durduğu için onun SOY seçicilerini miras alıyordu:
   `.peron-table thead` (mavi gradyan + yapışkan) ve `.peron-table th` (beyaz yazı, 14px dolgu).
   Gri başlık yazısı mavi zeminin üstüne düşüyor, okunmuyordu; tablo da 760px'te kesiliyordu.
   Kurallar `.peron-table .ssh-…` ile (0,2,x) — miras alınan her özelliği ADIYLA geri alır;
   tablo artık hücrenin TAMAMINA yayılır, kolonlar oransal (modül · not · bedel). */
.ssh-detay { box-sizing: border-box; padding: 10px 16px 12px 46px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.peron-table .ssh-mod-tablo { width: 100%; max-width: none; table-layout: fixed; border-collapse: collapse; font-size: 12px; background: transparent; }
.peron-table .ssh-mod-tablo thead { background: none; position: static; box-shadow: none; }
.peron-table .ssh-mod-tablo th {
    padding: 4px 8px; background: none; text-align: left;
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.peron-table .ssh-mod-tablo th:first-child { width: 30%; }
.peron-table .ssh-mod-tablo th.ssh-num { width: 140px; text-align: right; }
.peron-table .ssh-mod-tablo td { height: auto; padding: 6px 8px; background: transparent; color: var(--text-primary); border-bottom: 1px solid var(--border-light); vertical-align: top; }
.peron-table .ssh-mod-tablo tbody tr,
.peron-table .ssh-mod-tablo tbody tr:nth-child(even),
.peron-table .ssh-mod-tablo tbody tr:hover { background: transparent; }
.peron-table .ssh-mod-tablo .ssh-mod-ad { font-weight: 600; overflow-wrap: anywhere; }
.peron-table .ssh-mod-tablo .ssh-mod-not { white-space: pre-wrap; overflow-wrap: anywhere; }
.peron-table .ssh-mod-tablo .ssh-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.peron-table .ssh-mod-tablo tfoot td { font-weight: 700; border-bottom: 0; }
.ssh-tum-urun { font-size: 12px; }
.ssh-genel-not { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ssh-genel-not span, .ssh-bilgi span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
/* Bilgi şeridi de tabloya yayılır: dört eşit kolon (telefonda iki). */
.ssh-bilgi-satir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 24px; }
@media (max-width: 640px) { .ssh-bilgi-satir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ssh-bilgi { min-width: 0; overflow-wrap: anywhere; }
.ssh-bilgi { font-size: 12px; }
.ssh-bilgi b { font-weight: 600; }
/* 🔴 1.381.0 — DÜŞEN HÜCRE `display:none` OLAMAZ (proje kuralı; burada ihlal edilmişti).
   Ölçüldü (1024px): Tarih hücreleri satır akışından çıkınca SONRAKİ HER HÜCRE bir kolon sola
   kayıyordu — "Cari" başlığı 0px'lik düşen kolona düştü, "Müşteri" başlığı Cari verisinin,
   "Onarım Aşaması" Bedel'in üstünde duruyordu; aşama rozeti 108px'lik Bedel kolonundan
   32px taşıyordu. Doğrusu kolon `collapse` + hücre `visibility:hidden`. */
@media (max-width: 1100px) {
    :where(:not(.is-sigdir)) > .ssh-t col.sshc-tarih { visibility: collapse; width: 0; }
    :where(:not(.is-sigdir)) > .ssh-t > thead > tr > th.ssh-th-tarih,
    :where(:not(.is-sigdir)) > .ssh-t > tbody > tr > td.ssh-c-tarih { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
.ssh-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 18px; margin-bottom: 14px; }
.ssh-detail-grid > div { font-size: 13px; }
.ssh-detail-grid span { color: var(--text-muted); display: inline-block; min-width: 96px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }
.ssh-detail-sec { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.ssh-detail-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 8px; }
.ssh-fault-box { font-size: 13px; white-space: pre-wrap; background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; }
.ssh-hist-mod { margin-bottom: 10px; }
.ssh-hist-mod-name { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.ssh-hist-list { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }

/* ─── Yeni Sipariş Sayfası: Topbar & Cart ────────────────────────────────── */
.no-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cart-badge {
    display: inline-flex;
    align-items: center;
    background: var(--border-light);
    color: var(--text-secondary);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.cart-badge.has-items {
    background: var(--pri-light);
    color: var(--pri-text);
}

.no-picker-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.no-cart-card {
    position: sticky;
    top: 16px;
}
.no-cart-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

.cart-qty-input {
    width: 60px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
    background: var(--card-bg);
    color: var(--text-primary);
}
.cart-qty-input:focus {
    outline: none;
    border-color: var(--pri-text);
}

.btn-picker-add {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1.5px solid var(--pri);
    background: transparent;
    color: var(--pri-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.btn-picker-add:hover {
    background: var(--pri-strong);
    color: var(--pri-on);
}
.btn-picker-add:disabled,
.btn-picker-add.added {
    background: #eaf3ef;
    border-color: #6fae9e;
    color: #6fae9e;
    cursor: default;
}

.btn-cart-remove {
    background: none;
    border: none;
    color: #97a3b0;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    transition: color 0.12s;
    flex-shrink: 0;
}
.btn-cart-remove:hover { color: #d9696f; }

/* ─── Sipariş İşlem Butonları (Kompakt) ─────────────────────────────────── */
.order-actions-wrap {
    display: flex;
    gap: 3px;
    align-items: center;
    flex-wrap: nowrap;
}
.order-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.14s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.2;
}
/* 🔴🔴 SEKIZ VARYANTIN SEKIZI DE AA'YI GECMIYORDU (1.364.0 tasarim denetimi).
   OLCULDU (390px, gercek kaskad): info 2,50 · info:hover 2,93 · warning 3,34 ·
   warning:hover 3,66 · success 2,81 · success:hover 3,18 · danger 3,91 ·
   danger:hover 4,46 — esik 4,5:1. Renkler SABIT HEX'ti ve gece karsiligi YOKTU,
   yani koyu tablo satirinda acik pembe/turuncu/yesil cipler kaliyordu ve oranlar
   iki temada BIREBIR ayniydi.
   🔴 COZUM TOKENE BAGLAMAK: `*-ink` ve yari saydam yuzeyler temayla birlikte
      doner, yani tek kural iki temada da gecer. Olculen yeni degerler:
      info 5,65 (G) / 6,57 (Ge) · warning 5,15 / 4,72 · success 5,22 / 5,89 ·
      danger 4,85 / 5,99.
   🔴 HOVER ARTIK BEYAZ METINLE DOLMUYOR. Dolgulu hover `*-ink` uzerine beyaz
      demekti; `--green-ink` GECE temasinda #7dbdaa (ACIK) oldugu icin beyaz metin
      orada cokerdi. Bunun yerine zemin koyulasir, murekkep sabit kalir: kontrast
      dinlenme durumundan DUSMEZ ve iki temada da gecerlidir.
   🔴 KOPYALA-YAPISTIR HATASI DUZELTILDI: `.info` ve `.success` AYNI yesilimsi
      kenari (#cfe5dc) paylasiyordu; `.info` anlamca mavi olmasi gerekirken pembeydi.
   🔴 YUKSEKLIK 23px -> 25px: mutlak taban 24px'in ALTINDAYDI (WCAG 2.2 §2.5.8).
      Bu BUYUTME DEGIL, TABANI KARSILAMADIR — 1px dolgu yeter. */
.order-action-btn.info    { background: var(--pri-light);   border-color: var(--pri-border, var(--border)); color: var(--pri-text); }
.order-action-btn.info:hover    { background: rgba(63, 116, 168, .20);  border-color: var(--pri-text);   color: var(--pri-text); }
.order-action-btn.warning { background: rgba(190, 116, 56, .10); border-color: rgba(190, 116, 56, .30); color: var(--amber-ink); }
.order-action-btn.warning:hover { background: rgba(190, 116, 56, .20); border-color: var(--amber-ink); color: var(--amber-ink); }
.order-action-btn.success { background: rgba(94, 156, 139, .10); border-color: rgba(94, 156, 139, .30); color: var(--green-ink); }
.order-action-btn.success:hover { background: rgba(94, 156, 139, .20); border-color: var(--green-ink); color: var(--green-ink); }
.order-action-btn.danger  { background: var(--rose-surface); border-color: var(--rose-surface-border); color: var(--rose-ink); }
.order-action-btn.danger:hover  { background: rgba(225, 29, 72, .18);  border-color: var(--rose-ink);  color: var(--rose-ink); }

/* ─── Spreadsheet Yeni Sipariş ───────────────────────────────────────────── */
.peron-spreadsheet-wrap {
    overflow-x: auto;
    border-radius: 12px;
}
.peron-spreadsheet {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 860px;
}
.peron-spreadsheet thead th {
    background: var(--border-light);
    padding: 9px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: #4b5663;
    border-bottom: 2px solid #e3e8ef;
    border-right: 1px solid #e3e8ef;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    z-index: 2;
}
.peron-spreadsheet thead th:first-child { border-left: none; }
.peron-spreadsheet tbody td {
    border-bottom: 1px solid #eaeef3;
    border-right: 1px solid #eaeef3;
    padding: 0;
    position: relative;
}
.peron-spreadsheet tbody td.ss-num-td {
    text-align: center;
    color: #97a3b0;
    font-size: 11px;
    background: var(--border-light);
    width: 36px;
    border-right: 1px solid #e3e8ef;
    padding: 0;
    line-height: 34px;
    user-select: none;
}
.peron-spreadsheet tbody td.ss-unit-td {
    text-align: center;
    color: #8a96a3;
    font-size: 11.5px;
    background: var(--border-light);
    padding: 0 8px;
    white-space: nowrap;
    line-height: 34px;
    font-weight: 500;
}
.peron-spreadsheet tbody td.ss-clear-td {
    text-align: center;
    width: 30px;
    padding: 0;
}
.peron-spreadsheet .ss-cell {
    width: 100%;
    height: 34px;
    padding: 0 9px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #1b2533;
    font-family: inherit;
    display: block;
}
.peron-spreadsheet .ss-cell::placeholder { color: #cdd5df; }

/* Stok kart seçici butonu */
.ss-pick-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    background: var(--border-light);
    border: 1px solid #e3e8ef;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: #97a3b0;
    text-align: left;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
    overflow: hidden;
}
.ss-pick-btn:hover {
    border-color: #3f74a8;
    background: #f7eaeb;
    color: #3f74a8;
}
.ss-pick-btn .ss-pick-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.ss-row-filled .ss-pick-btn {
    border-color: #b4d4cd;
    background: #eaf3ef;
    color: #3f6b5e;
    font-weight: 500;
}

.peron-spreadsheet .ss-cell:focus {
    background: #e9f0ee;
    box-shadow: inset 0 0 0 1px #3f74a8;
    border-radius: 2px;
    z-index: 1;
    position: relative;
}
.peron-spreadsheet tbody tr:hover td:not(.ss-num-td):not(.ss-unit-td) {
    background: var(--border-light);
}
.peron-spreadsheet tbody tr.ss-row-filled td:not(.ss-num-td):not(.ss-unit-td) {
    background: #eaf3ef;
}
.peron-spreadsheet tbody tr.ss-row-filled td.ss-unit-td {
    background: #d9e8e1;
    color: #3f6b5e;
}
.ss-clear-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    color: #cdd5df;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    transition: all 0.12s;
}
.ss-clear-btn:hover { background: #fbedec; color: #c2545a; }
.ss-footer-bar {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border-light);
}
.cart-qty-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    color: var(--text-primary);
    background: var(--card-bg);
}

/* ============================================================
   TOOLTIP
   ============================================================ */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
    background: #1b2533;
    color: #fff;
    padding: 5px 9px;
    border-radius: var(--r-sm);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tr-fast), transform var(--tr-fast);
    transform: translateY(-50%) translateX(-4px);
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.peron-sidebar:not(.collapsed) [data-tooltip]::after {
    display: none;
}

/* KBD tanımı aşağıda header-search-btn bölümünde */

/* ============================================================
   COMMAND PALETTE (Ctrl+K)
   ============================================================ */
.peron-cmd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26,31,54,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: peron-fade-in 0.14s ease both;
}
.peron-cmd-box {
    background: var(--card-bg);
    border-radius: var(--r-xl);
    box-shadow: 0 25px 50px -12px rgba(50,50,93,0.25), 0 12px 24px -8px rgba(0,0,0,0.18);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    animation: peron-modal-up 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
}
.peron-cmd-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.peron-cmd-search svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.peron-cmd-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: var(--font);
    color: var(--text-primary);
    background: transparent;
}
.peron-cmd-input::placeholder { color: var(--text-muted); }
.peron-cmd-results {
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
}
.peron-cmd-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 8px 12px 4px;
}
.peron-cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--tr-fast);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
}
.peron-cmd-item:hover,
.peron-cmd-item.selected {
    background: var(--pri-light);
    color: var(--pri-text);
}
.peron-cmd-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--text-muted);
}
.peron-cmd-item:hover svg,
.peron-cmd-item.selected svg { color: var(--pri-text); }
.peron-cmd-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: var(--border-light);
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: background var(--tr-fast), color var(--tr-fast);
}
.peron-cmd-item-icon svg { width: 14px; height: 14px; }
.peron-cmd-item:hover .peron-cmd-item-icon,
.peron-cmd-item.selected .peron-cmd-item-icon {
    background: var(--pri-light);
    color: var(--pri-text);
}
.peron-cmd-item-label { flex: 1; }
.peron-cmd-item-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}
.peron-cmd-item-hint kbd {
    font-family: var(--font);
    font-size: 10px;
    padding: 1px 4px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--border-light);
}
.peron-cmd-empty {
    padding: 28px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.peron-cmd-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--content-bg);
}
.peron-cmd-footer-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.peron-progress {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: var(--r-full);
    overflow: hidden;
}
.peron-progress-bar {
    height: 100%;
    border-radius: var(--r-full);
    background: var(--pri);
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.peron-progress-bar.green  { background: var(--green); }
.peron-progress-bar.amber  { background: var(--amber); }
.peron-progress-bar.rose   { background: var(--rose); }

/* ============================================================
   STAT CARD — TREND GÖSTERGESI
   ============================================================ */
.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
}
.stat-trend.up   { color: var(--green); }
.stat-trend.down { color: var(--rose); }
.stat-trend.flat { color: var(--text-muted); }
.stat-trend svg  { width: 12px; height: 12px; }

/* ============================================================
   QUICK ACTIONS GRID
   ============================================================ */
/* 🔴 4x4 KART IZGARASI → ÇİP ŞERİDİ (2026-09-13).
   ÖLÇÜLDÜ (1920x1072, tasarim-denetci): 13 kısayol 4 kolonda 4 satıra yayılıyor ve
   blok 294px yer kaplıyordu; dashboard'un toplam 2088px yüksekliğinin %14'ü. Bu 13
   hedefin TAMAMI sol sidebar'da zaten aynı anda görünür — masaüstünde birebir tekrar
   (mobilde ızgara 1.288.0'da zaten kaldırılmıştı, yani blok yalnız sidebar'ın açık
   olduğu ekranlarda çıkıyordu).
   Özellik KALDIRILMADI (widget_shortcuts /yonetim'de açılıp kapanır, varsayılan 1);
   yalnız yoğunluğu düzeltildi: sabit 4 kolon yerine akan çip şeridi → ~2 satır, ~62px.
   Sabit kolon sayısı ayrıca "identik kart grid" klişesiydi (CLAUDE.md yasağı).
   Dokunma: çip yüksekliği 28px (yoğun yüzey eşiği) ve aralar 6px (komşuluk eşiği). */
.peron-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.peron-quick-action {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-height: 28px;
    padding: 4px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
    text-decoration: none;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 550;
    text-align: left;
    white-space: nowrap;
}
.peron-quick-action:hover {
    border-color: var(--pri-text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}
/* 🔴 `.peron-quick-action-icon` BURADA TANIMLANMAZ — tek yetkili tanım, renk sisteminin
   yanındaki blokta (aşağıda, `--nav-c` kurallarının hemen altında). Boyut iki yerde
   tutulunca ikisi de tek sınıf seçici (özgüllük 0,1,0) olduğu için DOSYADA SONRAKİ
   kazanıyordu ve buradaki küçültme sessizce iptal oluyordu (2026-09-13'te yaşandı). */

/* ============================================================
   GELİŞMİŞ SKELETON LOADER
   ============================================================ */
.peron-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.peron-skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.peron-skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.peron-skeleton-line {
    height: 10px;
    border-radius: var(--r-sm);
}
.peron-skeleton-line.w-full  { width: 100%; }
.peron-skeleton-line.w-3-4   { width: 75%; }
.peron-skeleton-line.w-1-2   { width: 50%; }
.peron-skeleton-line.w-1-3   { width: 33%; }

/* Skeleton puls animasyonu */
.peron-skeleton,
.peron-skeleton-avatar,
.peron-skeleton-line {
    background: linear-gradient(90deg, #eaeef3 25%, #e3e8ef 50%, #eaeef3 75%);
    background-size: 400% 100%;
    animation: peron-shimmer 1.4s ease-in-out infinite;
}

/* ============================================================
   GELİŞMİŞ BOŞ DURUM
   ============================================================ */
.peron-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}
.peron-empty-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--content-bg) 0%, #fff 100%);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(50,50,93,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.peron-empty-state-icon svg {
    width: 22px;
    height: 22px;
    color: var(--text-muted);
    opacity: 0.8;
}
.peron-empty-state-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
}
.peron-empty-state-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 260px;
    margin-bottom: 20px;
}

/* ============================================================
   HEADER ARAMA BUTONU
   ============================================================ */
.peron-header-search-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 10px 0 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font);
    transition: all var(--tr-fast);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(50,50,93,0.04);
}
.peron-header-search-btn:hover {
    border-color: var(--pri-border);
    color: var(--text-secondary);
    box-shadow: 0 2px 6px rgba(63, 116, 168,0.12);
}
.peron-header-search-btn:active {
    transform: scale(0.97);
}
.peron-header-search-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Gece / Gündüz modu butonu */
.peron-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-secondary);
    font-family: var(--font);
    transition: all var(--tr-fast);
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(50,50,93,0.04);
}
.peron-theme-toggle:hover { border-color: var(--pri-border); color: var(--pri-text); box-shadow: 0 2px 6px rgba(63,116,168,0.12); }
.peron-theme-toggle:active { transform: scale(0.97); }
.peron-theme-toggle svg { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.peron-theme-toggle .pth-label { line-height: 1; }
.peron-theme-toggle .pth-moon { display: none; }
.peron-theme-toggle .pth-sun { display: block; color: var(--amber); }
html[data-peron-theme="dark"] .peron-theme-toggle .pth-sun  { display: none; }
html[data-peron-theme="dark"] .peron-theme-toggle .pth-moon { display: block; color: #cdb2ec; }

/* Dar ekran / sığmayan başlık: ikon-only kare buton — etiket gizlenir,
   ikon ile yazının alt alta binmesi (telefon + bazı masaüstü) önlenir. */
@media (max-width: 1024px) {
    .peron-theme-toggle { width: 34px; padding: 0; gap: 0; }
    .peron-theme-toggle .pth-label { display: none; }
}

kbd, .peron-kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    font-size: 10px;
    font-family: var(--font);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--border-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    letter-spacing: 0.03em;
    line-height: 1.5;
}

/* ============================================================
   SATIR SAYIMI & PAGINATION INFO
   ============================================================ */
.peron-table-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    background: var(--border-light);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.peron-table-count {
    font-weight: 500;
}
.peron-table-count strong {
    color: var(--text-primary);
}

/* ============================================================
   SORT HEADER
   ============================================================ */
.peron-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.peron-table th.sortable:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}
.peron-table th.sorted-asc::after  { content: ' ↑'; color: #ffffff; }
.peron-table th.sorted-desc::after { content: ' ↓'; color: #ffffff; }

/* ============================================================
   INLINE FORM VALIDATION
   ============================================================ */
.peron-field-error {
    font-size: 11.5px;
    color: var(--rose);
    font-weight: 500;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.peron-field-error svg { width: 12px; height: 12px; }

.peron-input.is-valid,
.peron-modal-input.is-valid {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(94, 156, 139,0.08);
}
/* 🔴 Yarım/bozuk tarih kutusu da bu durumu giyer (peron-app.js "tarihKorumasi");
   sınıfsız tarih kutusu (mobil gün çubuğu) aria-invalid ile yakalanır. */
.peron-input.is-invalid,
.peron-modal-input.is-invalid,
input.is-invalid[aria-invalid="true"] {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(194, 84, 90,0.08);
}

/* ============================================================
   STATUS FLOW — Durum adımları
   ============================================================ */
.peron-status-flow {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
}
.peron-status-step {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}
.peron-status-step::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: calc(100% - 28px);
    height: 2px;
    background: var(--border);
    margin-left: 4px;
    left: 24px;
}
.peron-status-step:last-child::after { display: none; }
.peron-status-step.done::after { background: var(--green); }
.peron-status-step.active::after { background: var(--border); }

.status-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}
.peron-status-step.done .status-step-dot {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}
.peron-status-step.active .status-step-dot {
    border-color: var(--pri-text);
    background: var(--pri-strong);
    color: var(--pri-on);
}
.status-step-label {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}
.peron-status-step.done .status-step-label,
.peron-status-step.active .status-step-label {
    color: var(--text-primary);
}

/* ============================================================
   RESPONSIVE — Quick Actions & Yeni Bileşenler
   ============================================================ */
@media (max-width: 768px) {
    .peron-cmd-box { max-width: calc(100vw - 32px); margin: 0 16px; }
}
@media (max-width: 480px) {
    .peron-quick-actions { gap: 6px; }
}

/* ============================================================
   MOBİL ERP UX — Depo & Üretim Hızlı İşlem Ekranları
   ============================================================ */

/* ── Alt Navigasyon Çubuğu ─────────────────────────────────── */
.peron-mob-nav {
    display: none;
}

@media (max-width: 640px) {
    .peron-mob-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: var(--card-bg, #fff);
        border-top: 1px solid var(--border);
        z-index: 150;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    }

    /* 🔴 ALT BAR PAYININ TEK OTORİTESİ BU KURALDIR (1.288.0'da değer tokena taşındı).
       Sayı 74px'ten `--m-bar-pay` (= 60px çubuk + env + 12px) hâline geldi; bugünkü
       hesaplanan değer 72px, yani ESKİSİYLE 2px farkla AYNI. Değişimin amacı sayıyı
       düzeltmek DEĞİL, çubuk yüksekliğinin TEK YERDE tanımlı olmasıdır: modüller
       kendi listelerinin altına ayrı ayrı 72/74/80px yazmayı bıraksın.
       ⚠️ `env(safe-area-inset-bottom)` BUGÜN 0 DÖNER: `templates/fullscreen.php`
          viewport meta'sında `viewport-fit=cover` YOK (yalnız /yonetim'de var), bu
          yüzden iOS içeriği zaten güvenli alanın İÇİNE yerleştiriyor ve env sıfırdır.
          Yani ortada ÖLÇÜLMÜŞ bir taşma hatası yok; terim, ileride kenardan kenara
          (edge-to-edge) görünüme geçilirse pay kendiliğinden doğrusun diye duruyor.
          `viewport-fit=cover` eklemek AYRI bir karardır: eklendiği an ÜST çentik
          payı da gerekir ve bu turda BİLEREK yapılmadı.
       🔴 `!important` YENİ DEĞİL, yerinde duruyordu; yalnız değeri değişti. Kaldırmak
       cascade davranışını değiştirir (modül kuralları payı ezmeye başlar), bu yüzden
       bilinçli olarak korundu.
       🔴 İKİNCİ bir alt-bar payı kuralı YAZMA. */
    .peron-content {
        padding-bottom: var(--m-bar-pay, 74px) !important;
    }
}

.peron-mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    padding: 6px 4px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
    white-space: nowrap;
}

.peron-mob-nav-item svg {
    width: 22px; height: 22px;
    stroke-width: 1.75;
    flex-shrink: 0;
}

.peron-mob-nav-item.active        { color: var(--pri-text); }
.peron-mob-nav-item.active svg    { stroke-width: 2.25; }

/* ── Ekran Kapsayıcı ───────────────────────────────────────── */
.peron-mob-screen {
    max-width: 560px;
    margin: 0 auto;
    /* .peron-content zaten 74px alt dolgu veriyor (alt navigasyon) — 80px daha eklemek
       ÇİFT SAYIMDI, listenin altında ~154px ölü alan bırakıyordu. */
    padding-bottom: 8px;
}

/* 1.229.0 — mobil hızlı GİRİŞ/ÇIKIŞ formunun TÜM kuralları KALDIRILDI (~205 satır).
   Form, "giriş çıkışı sadece QR okutan personel yapabilir" kararıyla silindi; mode/
   search-wrap/autocomplete/product-card/stock-badge/qty/notes/save sınıfları artık
   hiçbir JS veya PHP dosyasında ÜRETİLMİYOR (grep ile doğrulandı). */

/* 1.229.0 — "Bölüm Başlığı" + "Son Hareketler" kuralları KALDIRILDI: depo ekranındaki
   "Bugünkü Son Hareketler" bloğunun yerini tarih gezinmeli İşlem Geçmişi sekmesi aldı,
   sınıflar hiçbir yerde üretilmiyordu. */

/* ── Üretim Mobil Kartları ──────────────────────────────────── */
.peron-mob-filter-scroll {
    display: flex; gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin-bottom: 16px;
    scrollbar-width: none;
}
.peron-mob-filter-scroll::-webkit-scrollbar { display: none; }

.peron-mob-filter-pill {
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: 50px;
    border: 1.5px solid var(--border);
    background: var(--card-bg, #fff);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.peron-mob-filter-pill.active {
    border-color: var(--pri-text);
    background: var(--pri-strong);
    color: var(--pri-on);
}

/* (Eski mobil üretim kartı kuralları 1.228.0'de dosya sonundaki yeni bloğa taşındı.) */

/* ============================================================
   YOĞUN MOD (dense_mode kullanıcı ayarı)
   ============================================================ */
.peron-layout.dense-mode .peron-content-area { padding: 16px 20px; }
.peron-layout.dense-mode .peron-card-body    { padding: 10px 14px; }
.peron-layout.dense-mode .peron-page-header  { margin-bottom: 12px; }
.peron-layout.dense-mode .peron-stats-grid   { gap: 10px; margin-bottom: 12px; }
.peron-layout.dense-mode .peron-dash-grid    { gap: 10px; }
/* 🔴 KALDIRILDI (tablo yogunluk sozlesmesi): burasi padding 7px 12px yaziyordu ve
   ozgullugu (0,3,1) masaustu yogunluk kuralini (0,1,1 / 6px) EZIYORDU — yani
   'Kompakt Tasarim' ayarini ACAN kullanicinin tablo satirlari 2px DAHA YUKSEK
   oluyordu. Tablo yogunlugu artik tek yerden (--tbl-* token'lari) gelir; yogun mod
   sayfa cercevesini (icerik alani, kart, baslik, menu) sikistirmaya devam eder. */
.peron-layout.dense-mode .peron-nav-item     { padding: 6px 10px; }

/* ============================================================
   ÇOKLU SEÇİM SİSTEMİ
   ============================================================ */

/* Seçili satır vurgusu */
.peron-table tbody tr.peron-sel-active {
    background: rgba(63, 116, 168, 0.07) !important;
    outline: 1px solid rgba(63, 116, 168, 0.25);
    outline-offset: -1px;
}
.peron-table tbody tr.peron-sel-active:hover {
    background: rgba(63, 116, 168, 0.11) !important;
}

/* Checkbox hücresi */
.peron-sel-cell {
    width: 36px !important;
    padding: 0 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.peron-sel-cell:has(> .peron-row-cb) { cursor: pointer; }
.peron-row-cb {
    width: 15px;
    height: 15px;
    accent-color: var(--pri-text);
    cursor: pointer;
}

/* Seçim başlık hücresi (attachMultiSelect'in thead'e eklediği) */
.peron-sel-th {
    width: 36px;
    text-align: center;
    padding: 0 8px !important;
    vertical-align: middle;
}
.peron-sel-th .peron-row-cb { vertical-align: middle; }

/* colgroup'lu (table-layout:fixed) tablolarda checkbox sütun genişliği */
.peron-sel-col { width: 36px; }

/* ─── Floating aksiyon barı ─────────────────────────────────────────── */
.peron-selection-bar {
    position: fixed;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%) translateY(160%);
    opacity: 0;
    pointer-events: none;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: 0 8px 32px -4px rgba(50,50,93,.18), 0 4px 12px -4px rgba(0,0,0,.12);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    /* 🔴🔴 ÇUBUK EKRANDAN TAŞIYORDU — ÖLÇÜLDÜ (1.362.0, tasarım denetimi).
       Eski hâli: `white-space: nowrap` + `max-width` YOK + `flex-wrap` YOK. Genişlik
       içeriğe göre sabitleniyordu (ölçüldü: 479px) ve `left:50%` merkezlemesi
       yüzünden dar ekranda İKİ YANDAN birden taşıyordu:
         320px → solda 80px, sağda 80px dışarda · "Seçimi Temizle"nin %28'i görünür
         360px → 60px / 60px · 390px → 44px / 44px
       🔴 STANDART TAŞMA TESTİ BUNU YAKALAMAZ: öge `position: fixed` olduğu için
       `documentElement.scrollWidth`e girmiyor — yani "yatay kaydırma yok" ölçümü
       YEŞİL verirken düğmenin yarısı ekran dışında ve DOKUNULAMAZ kalıyordu.
       🔴 SATINALMA'DA GÖRÜNMEZ ama bu çubuk GLOBALDİR: `purchasing` →
       `purchasing-mobile` ve `stock` → `warehouse` ≤640px'te yönleniyor, ama
       `workorders` ve `orders`/Rezerv YÖNLENMİYOR — kullanıcı kesik çubuğu
       gerçekten orada görüyordu.
       🔴 BÜYÜTME DEĞİL SIĞDIRMA: punto/dolgu/yükseklik DEĞİŞMEDİ; yalnız kutu
       ekrana sığmaya ve sığmazsa SARMAYA başlıyor. */
    max-width: min(560px, calc(100vw - 24px));
    flex-wrap: wrap;
    justify-content: center;
    /* Kutu sarabilsin, ama DÜĞME METİNLERİ kendi içinde bölünmesin
       ("Toplu Durum Değiştir" iki satıra düşmesin). */
    white-space: normal;
}
.sel-actions .peron-btn.sm { white-space: nowrap; }
.peron-selection-bar.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
/* Alt navigasyon varsa biraz daha yukarı çık */
@media (max-width: 640px) {
    .peron-selection-bar { bottom: 84px; padding: 10px 12px; gap: 8px; }
}

.sel-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--pri-text);
    padding-right: 8px;
    border-right: 1px solid var(--border);
}
/* 🔴🔴 BU BLOK TEMEL KURALIN ALTINDA DURMAK ZORUNDA (1.362.0 ölçüm bulgusu).
   İlk yazımda aynı override 30 satır YUKARIDAKİ medya bloğuna konmuştu ve HİÇ
   UYGULANMIYORDU: `@media` ÖZGÜLLÜK EKLEMEZ — iki kural da (0,1,0) tek sınıf
   seçicidir, bu yüzden KAYNAK SIRASI karar verir ve sonraki (koşulsuz) kural kazanır.
   Ölçüldü (320/360/390, hepsinde aynı): `borderRightStyle: "solid"`, `paddingRight: "8px"`
   — yani "dikey çizgiyi kaldır" niyeti yazılmış ama GERÇEKLEŞMEMİŞTİ.
   İlginç olan: aynı bloğtaki `width: 100%` ve `text-align: center` ÇALIŞIYORDU —
   çünkü onların temel kuralda karşılığı yok, yani çakışma da yok. Yarım uygulanan
   bir kural, hiç uygulanmayandan daha zor fark edilir.
   🔴 Proje kuralının ta kendisi (CLAUDE.md, "Kaynak sırası tuzağı"). */
@media (max-width: 640px) {
    /* Sayac kendi satırına düştüğünde sağındaki dikey çizgi hiçbir şeyi ayırmaz. */
    .sel-count { border-right: none; padding-right: 0; width: 100%; text-align: center; }
}
.sel-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    /* Kutu sardığında eylemler de kendi aralarında sarsın; aksi halde `.sel-actions`
       tek parça kalıp kutunun sarmasını ETKİSİZ bırakırdı. */
    flex-wrap: wrap;
    justify-content: center;
}
.sel-actions .peron-btn.sm {
    font-size: 12px;
    padding: 5px 12px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sel-actions .peron-btn.ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}
.sel-actions .peron-btn.ghost:hover { color: var(--rose); background: rgba(220,38,38,.06); }
.sel-actions .peron-btn.outline {
    background: transparent;
    color: var(--pri-text);
    border: 1px solid var(--pri);
}
.sel-actions .peron-btn.outline:hover { background: var(--pri-light); }

/* ============================================================
   DARK MODE — sistem tercihi
   ============================================================ */
/* Bu blok YALNIZ açık theme henüz seçilmemişken (JS boot öncesi FOUC penceresi, yani
   data-peron-theme attribute'u HENÜZ yokken) OS-koyu tercihini uygular. JS tema attribute'unu
   (light/dark) yazar yazmaz `:not([data-peron-theme])` eşleşmez → seçilen tema kesin kazanır.
   ÖNCEDEN `:root`/`.peron-input` gibi kapsamsız seçiciler kullanıyordu: kullanıcı "Gündüz"
   seçse bile OS koyuysa token'lar koyuya kayıp arayüz melez/okunmaz görünürdü (fix). */
@media (prefers-color-scheme: dark) {
    html:not([data-peron-theme]) {
        --content-bg:    #1b2533;
        --card-bg:       #273341;
        --header-bg:     #273341;

        /* 🔴 ÖLÇÜLDÜ (1.309.0 tasarım denetimi): bu blok --amber-ink/--green-ink/
           --rose-ink'i yeniden tanımlarken --violet-ink ve --cyan-ink'i UNUTMUŞTU.
           Sonuç: açık-tema renkleri (#7c5fbf / #4d7671) koyu #273341 zeminde
           kalıyor → 2,60:1 ve 2,53:1 (WCAG AA eşiği 4,5). Koyu tema bloğuyla
           (bkz. --violet-ink/--cyan-ink eşlemesi) BİREBİR aynı değerler yazılır:
           #bda3c4 → 5,62:1 · #7bb6a8 → 5,55:1. Bu, yalnız yeni rozetleri değil
           bu iki token'ı kullanan TÜM ekranları onarır. */
        --violet-ink: #bda3c4;
        --cyan-ink:   #7bb6a8;

        --text-primary:   #eaeef3;
        --text-secondary: #cdd5df;
        --text-muted:     #97a3b0;

        --border:         #46535f;
        --border-light:   #273341;
        --switch-off:     #55636f;
        --amber:          #d68a4e;

        --pri-light:      rgba(63, 116, 168, 0.15);
        --pri-border:     rgba(63, 116, 168, 0.30);
        /* --pri (#3f74a8 buton dolgusu) karanlık temada değişmiyor → üstündeki metin
           beyaz kalmalı. --pri-text karanlık yüzeyde okunması için AÇIK maviye çekildi
           (eski #2a527a koyu mavi, koyu zeminde ~1.5:1 ile okunamıyordu). */
        --pri-on:         #ffffff;
        --pri-text:       #9ec3ea;

        /* Sistem-koyu fallback: -ink/yüzey token'ları html[data-peron-theme=dark] ile
           aynı olmalı; yoksa açık ink koyu zeminde okunmaz (ör. fason çipi 1.9:1). */
        --amber-ink:      #d68a4e;
        --green-ink:      #6cae9c;
        --rose-ink:       #d76b71;
        --amber-ink-yuzey: #dc9c69;
        --rose-ink-yuzey:  #e3949b;
        --pri-strong:     #3f6d9c;
        --not-sari:       #e8b52c;
        --not-sari-kenar: #f3d06a;
        --not-sari-ink:   #241800;
        --green-strong:   #38705f;
        --peach-surface:  rgba(214, 138, 78, 0.22);
        --amber-border:   rgba(214, 138, 78, 0.45);

        /* 🔴 Sidebar: kullanıcı hiç tema seçmemiş + işletim sistemi koyu ise sidebar da koyu
           kalmalı. Aksi halde içerik koyu / sol menü açık MELEZ ekran çıkar (boot scripti
           yalnız 'dark' yazar; 'light' damgası JS bundle'ından gelir → JS hata alırsa kalıcı).
           html[data-peron-theme="dark"] bloğuyla AYNI set. */
        --sb-bg:#0b1119; --sb-bg-2:#080d13;
        --sb-hover:rgba(255,255,255,.05);
        --sb-active:linear-gradient(135deg, var(--pri) 0%, var(--pri-hover) 100%);
        --sb-active-solid:rgba(91,145,199,.28);
        --sb-border:rgba(255,255,255,.07);
        --sb-text:#aab6c4; --sb-text-bright:#eef3f9; --sb-section-label:#6d7c8d;
        --sb-raised:rgba(255,255,255,.05);      --sb-raised-hover:rgba(255,255,255,.09);
        --sb-card:rgba(255,255,255,.04);        --sb-card-hover:rgba(255,255,255,.08);
        --sb-control:rgba(255,255,255,.08);     --sb-control-hover:rgba(255,255,255,.14);
        --sb-user-hover:rgba(255,255,255,.08);  --sb-ring-strong:rgba(255,255,255,.14);
        --sb-scroll:rgba(255,255,255,.10);
        --sb-inner-light:rgba(255,255,255,.07); --sb-inner-light-hover:rgba(255,255,255,.10);
        --sb-lift:0 2px 5px rgba(0,0,0,.38);    --sb-lift-hover:0 4px 9px rgba(0,0,0,.46);
        --sb-press:inset 0 2px 4px rgba(0,0,0,.40);
        --sb-badge-lift:0 2px 10px rgba(0,0,0,.35);
        --sb-edge-shadow:1px 0 0 rgba(255,255,255,.07);
        --sb-drawer-shadow:none;
        --sb-active-text:#ffffff; --sb-soon-opacity:.38;
        --sb-bar-glow:0 0 8px rgba(255,255,255,.6);
        --sb-plan-hover:#0b1119;
        --nav-chip-fb:rgba(255,255,255,.05);
        --nav-chip-a:18%; --nav-ring-a:24%;
        --nav-ink-a:72%;  --nav-ink-base:#ffffff;
        --nav-on-a:0%;    --nav-on-base:#ffffff;
        --nav-hi-a:100%;  --nav-hi-base:#ffffff;
        --nav-halo-a:62%; --nav-gloss:rgba(255,255,255,.42); --nav-shade:rgba(0,0,0,.22);
        --nav-glyph-shadow:rgba(0,0,0,.34);
        --nav-row-a:17%;  --nav-row-ring-a:30%; --nav-row-halo-a:52%;
        --nav-bar-a:100%; --nav-bar-base:#ffffff;

        --shadow-card:       0 2px 5px -1px rgba(0,0,0,.40), 0 1px 3px -1px rgba(0,0,0,.30);
        --shadow-card-hover: 0 7px 14px -3px rgba(0,0,0,.50), 0 3px 6px -3px rgba(0,0,0,.30);
        --shadow-modal:      0 30px 60px -12px rgba(0,0,0,.70), 0 18px 36px -18px rgba(0,0,0,.50);
        --shadow-toast:      0 4px 20px -2px rgba(0,0,0,.40), 0 2px 6px -2px rgba(0,0,0,.30);
    }

    /* Giriş ve seçim alanları */
    html:not([data-peron-theme]) .peron-input,
    html:not([data-peron-theme]) .peron-select,
    html:not([data-peron-theme]) .peron-textarea {
        background: #1b2533;
        border-color: var(--border);
        color: var(--text-primary);
    }
    html:not([data-peron-theme]) .peron-input:focus,
    html:not([data-peron-theme]) .peron-select:focus,
    html:not([data-peron-theme]) .peron-textarea:focus {
        border-color: var(--pri-text);
        box-shadow: 0 0 0 3px var(--pri-light);
    }

    /* Tablo şeritleri */
    html:not([data-peron-theme]) .peron-table tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
    html:not([data-peron-theme]) .peron-table tbody tr:hover           { background: rgba(255,255,255,.04); }

    /* Modal arka planı */
    html:not([data-peron-theme]) .peron-modal-overlay { background: rgba(0,0,0,.70); }
    html:not([data-peron-theme]) .peron-modal         { background: var(--card-bg); }

    /* Badge'lar */
    html:not([data-peron-theme]) .peron-badge.neutral { background: #46535f; color: #97a3b0; }

    /* Dropdown */
    html:not([data-peron-theme]) .peron-dropdown-menu {
        background: var(--card-bg);
        border-color: var(--border);
    }

    /* Toast */
    html:not([data-peron-theme]) .peron-toast {
        background: #273341;
        border-color: var(--border);
        color: var(--text-primary);
    }

    /* Scrollbar */
    html:not([data-peron-theme]) * { scrollbar-color: #46535f transparent; }
}

/* ============================================================
   YAZDIR (@media print)
   ============================================================ */
@media print {
    /* Panel dışı elemanları gizle */
    .peron-sidebar,
    .peron-header,
    .peron-mob-nav,
    .peron-modal-overlay,
    #peron-toast-container,
    .peron-fab,
    .peron-page-header .peron-btn,
    .peron-page-header .peron-btn-group,
    .peron-search-input,
    .peron-filter-bar,
    .peron-pagination,
    .peron-table-actions,
    .peron-table td:last-child button { display: none !important; }

    /* Layout düzelt */
    body.peron-active { overflow: visible !important; height: auto !important; background: #fff !important; }
    .peron-layout     { display: block !important; }
    .peron-content    { margin: 0 !important; padding: 0 !important; overflow: visible !important; height: auto !important; }
    .peron-content-area { padding: 0 !important; }

    /* Kartlar */
    .peron-card          { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
    /* 🔴 .peron-table-wrapper DİYE BİR SINIF YOK — gerçek adlar .peron-table-wrap ve
       .peron-xscroll. Yanlış ada yazıldığı için yatay kaydırmalı geniş tablolar (mizan,
       defter-i kebir, sipariş listeleri) KAĞITTA KIRPILIYORDU: ekranda kaydırarak
       görülen kolonlar çıktıda hiç basılmıyordu. max-height de sıfırlanmalı, yoksa
       uzun tablo tek sayfaya sıkışıp kesiliyor. */
    .peron-table-wrapper,
    .peron-table-wrap,
    .peron-xscroll { box-shadow: none !important; overflow: visible !important;
                     max-height: none !important; max-width: none !important; }

    /* Tablo çerçeveleri */
    .peron-table th,
    .peron-table td { border: 1px solid #ccc !important; color: #000 !important; font-size: 11px !important; }
    .peron-table th { background: #eaeef3 !important; }

    /* Sayfa kenar boşlukları */
    @page { margin: 1.5cm; size: A4 landscape; }
}

/* ============================================================
   CHAT BUBBLE
   ============================================================ */
.peron-chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ═══ SAĞ KENAR ÇEKMECELERİ — Notlarım · Bildirimler · Mesajlar ═══════════════
   Dikey ortalanmış ince oval tab rayı + sağdan açılan panel. 3 farklı pastel tema. */
.peron-side-rail {
    position: fixed;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 10001; /* #peron-panel-root (9999) üzerinde */
    pointer-events: none;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.peron-side-rail > * { pointer-events: auto; }
body.peron-drawer-open .peron-side-rail { right: 380px; }
/* Mobilde sağ ray içeriği/araç çubuğunu örtüyordu → gizle (bildirim/mesaj header ve alt
   navigasyondan erişilir). Açık bir çekmece varsa kapatılabilsin diye onu gizleme. */
@media (max-width: 768px) {
    body:not(.peron-drawer-open) .peron-side-rail { display: none; }
}

.peron-side-tab {
    position: relative;
    width: 30px;
    min-height: 100px;
    border: 1px solid;
    border-right: none;
    border-radius: 16px 0 0 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 0 12px;
    box-shadow: -3px 3px 13px rgba(27, 37, 51, 0.10);
}
/* Uçları çok az üst üste binsin (kapanık görünüm) */
.peron-side-tab + .peron-side-tab { margin-top: -9px; }
.peron-side-tab:hover { z-index: 1; }
.peron-side-tab .lbl {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.peron-side-tab .peron-side-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #d63b42;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    display: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.peron-side-tab.has-badge .peron-side-badge { display: block; animation: peronBadgePulse 1.5s ease-in-out infinite; }
/* Okunmamış varken rozet nazikçe nabız atar */
@keyframes peronBadgePulse {
    0%, 100% { transform: translateX(-50%) scale(1);    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
    50%      { transform: translateX(-50%) scale(1.18); box-shadow: 0 0 0 4px rgba(214, 59, 66, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2); }
}
/* Okunmamış varken çekmece tabı SÜREKLI yanıp söner (okununca durur) */
.peron-side-tab.has-badge { animation: peronTabBlink 1.3s ease-in-out infinite; }
@keyframes peronTabBlink {
    0%, 100% { box-shadow: -3px 3px 13px rgba(27, 37, 51, 0.10); }
    50%      { box-shadow: -3px 3px 13px rgba(27, 37, 51, 0.10), 0 0 0 4px rgba(214, 59, 66, 0.42); }
}
/* Yeni mesaj/bildirim geldiği an daha güçlü, hızlı bir başlangıç vurgusu (sürekli blink'in üzerine biner) */
.peron-side-tab.flash { animation: peronTabFlash 0.45s ease-in-out 4; }
@keyframes peronTabFlash {
    0%, 100% { box-shadow: -3px 3px 13px rgba(27, 37, 51, 0.10); }
    50%      { box-shadow: -3px 3px 13px rgba(27, 37, 51, 0.10), 0 0 0 6px rgba(214, 59, 66, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .peron-side-tab.has-badge .peron-side-badge,
    .peron-side-tab.has-badge,
    .peron-side-tab.flash { animation: none; }
}

/* Mesaj çekmecesi liste başlığı (Gruplar / Kişiler) */
.peron-side-listlabel {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 14px 4px;
}

/* Tab temaları (pastel) */
.peron-side-tab.t-notes { background: #fdf6d8; border-color: #efe2a8; color: #7a6a12; }
.peron-side-tab.t-notif { background: #e7ecfb; border-color: #c5d2f1; color: #34508a; }
.peron-side-tab.t-msg   { background: #e3f4ec; border-color: #bbe2cf; color: #1f6e4c; }
/* Gece modu: sabit parlak pasteller göz yoruyordu → token tabanlı koyu yüzeye düş. */
html[data-peron-theme="dark"] .peron-side-tab.t-notes,
html[data-peron-theme="dark"] .peron-side-tab.t-notif,
html[data-peron-theme="dark"] .peron-side-tab.t-msg {
    background: var(--card-bg); border-color: var(--border); color: var(--text-secondary);
}

.peron-side-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 380px;
    max-width: 92vw;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: -12px 0 34px rgba(27, 37, 51, 0.16);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    z-index: 10000;
}
.peron-side-panel.open { transform: translateX(0); }
@media (max-width: 430px) {
    body.peron-drawer-open .peron-side-rail { right: 92vw; }
}

.peron-side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 18px;
    border-bottom: 1px solid;
    flex-shrink: 0;
}
.peron-side-title {
    flex: 1;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.peron-side-title svg { width: 17px; height: 17px; flex-shrink: 0; }
.peron-side-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}
.peron-side-close svg { width: 16px; height: 16px; }
.peron-side-body { flex: 1; overflow-y: auto; min-height: 0; }
.peron-side-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 18px;
    border-top: 1px solid;
    font-size: 11.5px;
    flex-shrink: 0;
}

/* Panel temaları (pastel) */
.peron-side-panel.t-notes { background: #fffdf2; }
.peron-side-panel.t-notes .peron-side-head { background: #fdf6d8; border-bottom-color: #efe2a8; }
.peron-side-panel.t-notes .peron-side-title,
.peron-side-panel.t-notes .peron-side-close { color: #7a6a12; }
.peron-side-panel.t-notes .peron-side-close:hover { background: rgba(122, 106, 18, 0.12); }
/* 🔴 OLCULDU 3,39:1 (esik 4,5) — "N karakter" sayaci her ekranda gorunuyor.
   #9a8a3a -> #6d6127: ayni sari-zeytin ailesi, zeminle (#fffdf2) 6,1:1.
   Kenar rengi DEGISMEDI (dekoratif, metin degil). */
.peron-side-panel.t-notes .peron-side-foot { border-top-color: #efe2a8; color: #6d6127; }

.peron-side-panel.t-notif { background: #f5f7fe; }
.peron-side-panel.t-notif .peron-side-head { background: #e7ecfb; border-bottom-color: #c5d2f1; }
.peron-side-panel.t-notif .peron-side-title,
.peron-side-panel.t-notif .peron-side-close { color: #34508a; }
.peron-side-panel.t-notif .peron-side-close:hover { background: rgba(52, 80, 138, 0.12); }
.peron-side-panel.t-notif .peron-side-foot { border-top-color: #c5d2f1; color: #5b75ad; }

.peron-side-panel.t-msg { background: #f1faf5; }
.peron-side-panel.t-msg .peron-side-head { background: #e3f4ec; border-bottom-color: #bbe2cf; }
.peron-side-panel.t-msg .peron-side-title,
.peron-side-panel.t-msg .peron-side-close { color: #1f6e4c; }
.peron-side-panel.t-msg .peron-side-close:hover { background: rgba(31, 110, 76, 0.12); }
.peron-side-panel.t-msg .peron-side-foot { border-top-color: #bbe2cf; color: #4f9577; }

/* Gece modu: kenar çekmece panelleri (Notlar/Bildirim/Mesaj) sabit beyaz/pastel zeminlerle
   gece modunda okunmaz bir beyaz dikdörtgene dönüyordu → panel gövdesi + başlık + foot + okunmamış
   satır token tabanlı koyu yüzeye düşürülür (içerideki metin zaten --text-* token'ları kullanıyor). */
html[data-peron-theme="dark"] .peron-side-panel.t-notes,
html[data-peron-theme="dark"] .peron-side-panel.t-notif,
html[data-peron-theme="dark"] .peron-side-panel.t-msg { background: var(--card-bg); }
html[data-peron-theme="dark"] .peron-side-panel .peron-side-head { background: var(--content-bg); border-bottom-color: var(--border); }
html[data-peron-theme="dark"] .peron-side-panel .peron-side-title,
html[data-peron-theme="dark"] .peron-side-panel .peron-side-close { color: var(--text-primary); }
html[data-peron-theme="dark"] .peron-side-panel .peron-side-foot { border-top-color: var(--border); color: var(--text-muted); }
html[data-peron-theme="dark"] .peron-side-row.unread { background: var(--pri-light); }

/* Notlarım metin alanı */
.peron-notes-area {
    flex: 1;
    width: 100%;
    border: none;
    background: #fffdf2;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.7;
    resize: none;
    outline: none;
    font-family: var(--font);
    color: #3a3415;
}
/* Notlar odaklanınca global mavi focus halkası (var(--pri) = #3f74a8) sarı not
   temasıyla çirkin duruyordu → tema-uyumlu amber ince iç çerçeveyle değiştir. */
body.peron-active .peron-notes-area:focus,
body.peron-active .peron-notes-area:focus-visible {
    outline: 2px solid #d8c879;
    outline-offset: -2px;
    border-radius: 0;
}

/* Çekmece liste satırları (bildirim & mesaj) */
.peron-side-row {
    display: flex;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(27, 37, 51, 0.06);
    cursor: pointer;
    align-items: flex-start;
    transition: background 0.12s;
}
.peron-side-row:hover { background: rgba(27, 37, 51, 0.035); }
.peron-side-row.unread { background: rgba(255, 255, 255, 0.55); }
.peron-side-row-title { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: normal; word-break: break-word; }
.peron-side-row-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.peron-side-row-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.peron-side-empty { padding: 44px 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.peron-side-empty svg { width: 46px; height: 46px; opacity: 0.4; margin-bottom: 10px; }
.peron-side-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; overflow: hidden; }
.peron-side-avatar.has-svg { background: var(--card-bg); border: 1px solid var(--border, #ebe0d0); }
.peron-side-avatar.has-svg svg { width: 100%; height: 100%; }

.peron-chat-trigger {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pri-strong);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hafif, katmanlı gölge — yumuşak derinlik + ince renk tonu */
    box-shadow:
        0 10px 24px -8px rgba(63, 116, 168, 0.55),
        0 3px 8px -3px rgba(27, 37, 51, 0.22);
    transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s ease;
    position: relative;
    flex-shrink: 0;
    color: #fff;
}
/* Yavaş "nefes alıp verme" halesi — buton transform'una dokunmaz, hover ile çakışmaz */
.peron-chat-trigger::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--pri);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    filter: blur(7px);
    animation: peron-chat-breathe 3.8s ease-in-out infinite;
}
@keyframes peron-chat-breathe {
    0%, 100% { transform: scale(0.95); opacity: 0.24; }
    50%      { transform: scale(1.22); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
    .peron-chat-trigger::before { animation: none; }
}
.peron-chat-trigger::after {
    /* üstte ince ışık vurgusu — cam/premium his */
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 55%);
    pointer-events: none;
}
.peron-chat-trigger:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 16px 32px -10px rgba(63, 116, 168, 0.6),
        0 6px 12px -4px rgba(27, 37, 51, 0.24);
}
.peron-chat-trigger:active { transform: translateY(0) scale(1.0); }
.peron-chat-trigger svg { display: block; position: relative; z-index: 1; }

/* Yeni mesaj geldiğinde simge KIRMIZI-BEYAZ yanıp söner. Toplu duyuru biraz daha hızlı yanar. */
@keyframes chat-blink-red  { 0%, 49% { background: #d63b42; color: #fff; box-shadow: 0 0 0 4px rgba(214,59,66,.28); } 50%, 100% { background: var(--card-bg); color: #d63b42; box-shadow: 0 0 0 4px rgba(214,59,66,.12); } }
.peron-chat-trigger.msg-blink-normal,
.peron-chat-trigger.msg-blink-broadcast { animation: chat-blink-red 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .peron-chat-trigger.msg-blink-normal,
    .peron-chat-trigger.msg-blink-broadcast { animation: none; }
}

/* Konuşmada gün ayıracı (WhatsApp tarzı) */
.peron-chat-day-sep { display: flex; align-items: center; justify-content: center; margin: 12px 0 6px; }
.peron-chat-day-sep span {
    font-size: 10.5px; font-weight: 600; color: var(--text-muted);
    background: rgba(27, 37, 51, 0.06); padding: 3px 11px; border-radius: 11px;
}

.peron-chat-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    background: #d9696f;
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #fff;
    line-height: 1;
}

.peron-chat-panel {
    position: absolute;
    bottom: 66px;
    right: 0;
    width: 360px;
    height: 520px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e3e8ef);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0,0,0,.16);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: chatPanelOpen .2s ease;
}
@keyframes chatPanelOpen {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.peron-chat-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border, #e3e8ef);
    background: var(--card-bg, #fff);
    flex-shrink: 0;
}

.peron-chat-back-btn,
.peron-chat-header-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #8a96a3);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.peron-chat-back-btn:hover,
.peron-chat-header-btn:hover {
    background: var(--border-light, #eaeef3);
    color: var(--text-primary, #1b2533);
}

.peron-chat-threads {
    flex: 1;
    overflow-y: auto;
}
.peron-chat-thread-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-light, #eaeef3);
    cursor: pointer;
    transition: background .12s;
}
.peron-chat-thread-item:hover { background: var(--border-light, #eaeef3); }
.peron-chat-thread-item.active { background: var(--pri-light, #f7eaeb); }
.peron-chat-thread-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pri-strong, #3f74a8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.peron-chat-thread-info { flex: 1; min-width: 0; }
.peron-chat-thread-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peron-chat-thread-preview { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.peron-chat-thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.peron-chat-thread-time { font-size: 10px; color: var(--text-muted); }
.peron-chat-unread-dot { min-width: 18px; height: 18px; background: var(--pri-strong); color: var(--pri-on); border-radius: 999px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* Birleşik liste: bölüm etiketi + kişi satırı */
.peron-chat-list-label {
    padding: 10px 14px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--card-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}
.peron-chat-unread {
    min-width: 18px; height: 18px;
    background: var(--pri-strong); color: var(--pri-on);
    border-radius: 999px; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px; flex-shrink: 0;
}
.peron-chat-prev {
    font-size: 11.5px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}

.peron-chat-conv { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.peron-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.peron-chat-msg-mine { align-self: flex-end; max-width: 80%; }
.peron-chat-msg-theirs { align-self: flex-start; max-width: 80%; }
.peron-chat-msg-bubble {
    display: inline-block;
    padding: 8px 11px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    /* Kelimeyi ortadan bölme; max-width sarmalayıcıda, baloncuk içeriğe göre büyür */
    overflow-wrap: break-word;
    word-break: normal;
}
.peron-chat-msg-mine .peron-chat-msg-bubble {
    background: var(--pri-strong, #3f74a8);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.peron-chat-msg-theirs .peron-chat-msg-bubble {
    background: var(--border-light, #eaeef3);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.peron-chat-msg-sender { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; padding: 0 2px; }
.peron-chat-msg-time { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; padding: 0 2px; text-align: right; }

.peron-chat-input-wrap {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-light, #eaeef3);
    align-items: flex-end;
    flex-shrink: 0;
    background: var(--card-bg, #fff);
}
.peron-chat-input {
    flex: 1;
    border: 1px solid var(--border, #e3e8ef);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    resize: none;
    max-height: 100px;
    background: var(--content-bg, var(--border-light));
    color: var(--text-primary);
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
    line-height: 1.5;
}
.peron-chat-input:focus { border-color: var(--pri, #3f74a8); background: var(--card-bg); }
.peron-chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--pri-strong, #3f74a8);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: background .15s, transform .15s;
}
.peron-chat-send-btn:hover { background: var(--pri-dark, #3f74a8); transform: scale(1.05); }
.peron-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px;
    text-align: center;
}

@media (max-width: 480px) {
    .peron-chat-panel { width: calc(100vw - 32px); right: -4px; bottom: 62px; height: 70vh; }
    .peron-chat-bubble { bottom: 16px; right: 16px; }
}

/* ============================================================
   AZALTILMIŞ ANİMASYON (erişilebilirlik)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto !important;
    }
}

/* ============================================================
   EXPORT MODAL
   ============================================================ */
.peron-radio-group {
    display: flex;
    gap: 16px;
}
.peron-radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}
.peron-radio-label input[type="radio"] {
    accent-color: var(--pri-text);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.peron-export-modal .peron-form-hint {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
/* 1.382.0 — uygulanacak kapsam (ekranın süzgeci) ve tarih alanının anlamı */
.peron-export-modal .exp-kapsam {
    margin: 0 0 6px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.peron-export-modal .exp-tarih-not {
    margin: -4px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* ============================================================
   v1.2.4 — TABLO GÖRSEL STANDARDI
   ============================================================
   - Uzun metinler ellipsis ile kırpılır (title attribute üzerine
     hover ile tam metin görünür)
   - Son kolon (İşlemler) sağa hizalı, butonlar nowrap inline-flex
   - Dar viewport'larda yatay scroll garantili
   - Sayısal/Kod/Tarih/Durum kolonları için yardımcı sınıflar
   ============================================================ */

/* Yatay scroll iyileştirmesi */
.peron-table-wrap {
    max-width: 100%;
    position: relative;
}
.peron-table {
    min-width: 760px;
}
@media (max-width: 1280px) {
    .peron-table { min-width: 920px; }
}

/* Ellipsis hücresi — uzun ürün adı / not / tedarikçi vb. */
.peron-table td.cell-truncate,
.peron-table th.cell-truncate {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peron-table td.cell-truncate > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.peron-table td.cell-truncate-lg { max-width: 320px; }
.peron-table td.cell-truncate-sm { max-width: 180px; }

/* Aksiyon kolonu — sağda, nowrap, sabit min-width */
.peron-table td.cell-actions,
.peron-table th.cell-actions {
    white-space: nowrap;
    text-align: right;
    min-width: 144px;
    width: 1%;
}
.peron-table td.cell-actions > div,
.peron-table td.cell-actions {
    --gap: 4px;
}
.peron-table td.cell-actions > div {
    display: inline-flex;
    gap: var(--gap);
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}
.peron-table td.cell-actions .peron-btn,
.peron-table td.cell-actions button {
    flex-shrink: 0;
}

/* Sayısal kolonlar — sağa hizalı, tabular-nums (5000+ üründe okunaklılık) */
.peron-table td.cell-num,
.peron-table th.cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Kod kolonu (Sipariş No, Talep No, UR No, Stok Kodu) */
.peron-table td.cell-code,
.peron-table th.cell-code {
    width: 110px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Durum/Badge kolonu */
.peron-table td.cell-status,
.peron-table th.cell-status {
    width: 130px;
    white-space: nowrap;
}

/* Tarih kolonu */
.peron-table td.cell-date,
.peron-table th.cell-date {
    width: 112px;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Kullanıcı/Atanan kolonu */
.peron-table td.cell-user,
.peron-table th.cell-user {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

/* ============================================================
   v1.2.5 — FIXED TABLE LAYOUT (colgroup tabanlı)
   ============================================================
   Sorun: table-layout: auto, content-based dağıtım yapıyor ve
   bir kolon kısıtlanınca (max-width) kalan alanı diğer kolonlar
   eşit dağıtarak büyük boşluklar oluşturuyordu.
   Çözüm: <colgroup> ile açık kolon genişlikleri + fixed layout.
   ============================================================ */
.peron-table--fixed {
    table-layout: fixed;
    width: 100%;
    /* Tablo, colgroup'taki sabit sütun genişlikleri toplamının altına ASLA inmesin.
       Aksi halde dar ekranda sütunlar sıkışır, metin harf harf alt alta diziliyordu.
       max-content = colgroup genişlikleri toplamı → konteyner darsa .peron-table-wrap yatay kayar. */
    min-width: max-content;
}

/* Fixed tabloda tüm hücreler default ellipsis */
/* Metin kırpma KAPALI — uzun isimler (tedarikçi, ürün, cari) alt satıra kayar, eksik yazı kalmaz */
.peron-table--fixed > thead > tr > th,
.peron-table--fixed > tbody > tr > td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
}
.peron-table--fixed > tbody > tr > td > div {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* Belirli hücreler için kırpmayı serbest bırak + sticky-right */
.peron-table--fixed td.col-actions,
.peron-table--fixed th.col-actions {
    overflow: visible;
    white-space: nowrap;
    text-align: right;
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--card-bg);
    box-shadow: -8px 0 12px -10px rgba(27, 37, 51, 0.12);
}
.peron-table--fixed thead th.col-actions {
    background: linear-gradient(120deg, var(--pri-dark) 0%, var(--pri) 55%, var(--pri-hover) 100%);
    z-index: 3;
}
.peron-table--fixed tbody tr:hover td.col-actions {
    background: var(--content-bg);
}
.peron-table--fixed td.col-actions > div {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow: visible;
}

/* Sayısal kolon — sağa hizalı tabular nums */
.peron-table--fixed td.col-num,
.peron-table--fixed th.col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Başlık hücreleri tek satır kalsın — sarmasın (ör. "2. İskonto", "Vergi No")
   Gövde hücreleri sarmaya devam eder; sadece thead etkilenir. */
.peron-table--fixed > thead > tr > th {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

/* Tek satırda kalması gereken veri hücreleri (vergi no, tarih, kod vb.) */
.peron-table--fixed td.col-nowrap {
    white-space: nowrap;
}

/* Tek satır + taşarsa "…" (telefon, e-posta gibi uzun ama sarılmaması gereken alanlar);
   tam değer title ile hover'da görünür. */
.peron-table--fixed td.col-ellip,
.peron-table--fixed td.col-ellip > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Satır içi not göstergesi (sipariş/satınalma "Not") — ürün altında, en çok 2 satır;
   tamı title ile hover'da görünür. Tablo türünden bağımsız çalışır. */
.peron-table td .row-note {
    font-size: 11px;
    color: var(--pri-text, var(--text-secondary));
    margin-top: 3px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
}

/* Kod (Sipariş/Talep/UR No) — monospace yapısı */
.peron-table--fixed td.col-code,
.peron-table--fixed th.col-code {
    font-variant-numeric: tabular-nums;
}

/* Status badge kolonu */
.peron-table--fixed td.col-status {
    overflow: visible;
}

/* Üretim status select için iç padding */
.peron-table--fixed td .peron-select { width: 100%; max-width: 100%; }

/* ============================================================
   v3 RAFİNASYON — Erişilebilirlik & Tutarlılık (additive)
   Mevcut görünümü değiştirmez; yalnızca klavye/erişilebilirlik
   ve hareket tercihleri için iyileştirme ekler.
   ============================================================ */

/* Klavye odak halkaları — yalnızca klavyeyle gezinende görünür (WCAG 2.4.7) */
body.peron-active a:focus-visible,
body.peron-active button:focus-visible,
body.peron-active .peron-btn:focus-visible,
body.peron-active .peron-nav-item:focus-visible,
body.peron-active input:focus-visible,
body.peron-active select:focus-visible,
body.peron-active textarea:focus-visible,
body.peron-active [tabindex]:focus-visible {
    outline: 2px solid var(--pri);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Fare/dokunmatik etkileşimde tarayıcı varsayılan outline'ı bastırılır
   (focus-visible zaten klavye için sağlıyor) */
body.peron-active .peron-btn:focus:not(:focus-visible),
body.peron-active .peron-nav-item:focus:not(:focus-visible) {
    outline: none;
}

/* Hareket azaltma tercihi — animasyon/geçişleri sönümle (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    body.peron-active *,
    body.peron-active *::before,
    body.peron-active *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dışa aktarım izni kapalıysa export butonlarını gizle (allow_export ayarı) */
body.peron-export-off [id^="btn-export-"] { display: none; }

/* ============================================================
   Segmented control + supplier-price repeater (urun modali)
   ============================================================ */
.peron-seg { display:inline-flex; gap:4px; background:var(--content-bg); border:1px solid var(--border); border-radius:10px; padding:3px; }
.peron-seg-opt {
    appearance:none; border:none; background:transparent; cursor:pointer;
    padding:7px 14px; border-radius:7px; font:600 12px var(--font); color:var(--text-muted);
    transition:color 150ms cubic-bezier(0.23,1,0.32,1), background-color 150ms cubic-bezier(0.23,1,0.32,1), transform 120ms ease-out;
}
.peron-seg-opt:hover { color:var(--text-secondary); }
.peron-seg-opt.active { background:var(--pri-strong); color:var(--pri-on); box-shadow:0 1px 3px rgba(63, 116, 168,0.4); }
.peron-seg-opt:active { transform:scale(0.96); }

.peron-sup-list { display:flex; flex-direction:column; gap:8px; }
.peron-sup-row {
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(6px);
    transition:opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1);
}
.peron-sup-row.in { opacity:1; transform:translateY(0); }
.peron-sup-row.removing { opacity:0; transform:translateY(-4px); }
.peron-sup-row .sup-contact { flex:1; min-width:0; }
.peron-sup-row .sup-price { width:110px; flex-shrink:0; text-align:right; }
.peron-sup-row .sup-vat { flex-shrink:0; }
.peron-sup-row .sup-vat .peron-seg-opt { padding:6px 10px; font-size:11px; }
.peron-sup-row .sup-default-lbl { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; font-size:11px; font-weight:600; color:var(--text-secondary); white-space:nowrap; cursor:pointer; }
.peron-sup-row .sup-default-lbl input { accent-color:var(--pri); cursor:pointer; }

/* Button press feedback (Emil: responsive press) */
.peron-btn { transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 130ms cubic-bezier(0.23,1,0.32,1); }
.peron-btn:active { transform:scale(0.97); }

@media (prefers-reduced-motion: reduce) {
    .peron-sup-row { transition:opacity 150ms ease; transform:none; }
    .peron-sup-row.in, .peron-sup-row.removing { transform:none; }
    .peron-seg-opt, .peron-seg-opt:active, .peron-btn, .peron-btn:active { transition:background-color 150ms ease, color 150ms ease; transform:none; }
}

/* ============================================================
   Stok hareketleri modali (genis + ayrintili)
   ============================================================ */
.stk-mv-wrap { max-height:440px; overflow-x:auto; overflow-y:auto; border:1px solid var(--border); border-radius:10px; }
.stk-mv-table { width:100%; border-collapse:collapse; font-size:12px; }
.stk-mv-table thead th { position:sticky; top:0; background:var(--content-bg); z-index:1; padding:10px 12px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.stk-mv-table th.num, .stk-mv-table td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stk-mv-table td { padding:10px 12px; border-bottom:1px solid var(--border-light); color:var(--text-secondary); white-space:nowrap; }
.stk-mv-table tbody tr:last-child td { border-bottom:none; }
.stk-mv-table tbody tr { transition:background-color 120ms ease; animation:stk-mv-in 260ms cubic-bezier(0.23,1,0.32,1) both; }
.stk-mv-table tbody tr:hover { background:var(--content-bg); }
.stk-mv-badge { font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:99px; white-space:nowrap; }
/* %12 tint panel zemini üzerine binince efektif bg koyulaşıyor → -ink 4.4:1'de kalıyordu;
   light'ta bir tık daha koyu (panel zemininde 5.2:1). Dark tema aşağıda override edilir. */
.stk-mv-badge.in  { background:rgba(94,156,139,.16); color:#3a6152; }
.stk-mv-badge.out { background:rgba(194,84,90,.12);  color:#9a3f45; }
/* Dark: koyu kartta light metin — in yeşili --green, out kırmızısı tint yüzünden biraz açık */
html[data-peron-theme="dark"] .stk-mv-badge.in  { color: #6cae9c; }
html[data-peron-theme="dark"] .stk-mv-badge.out { color: #e08890; }
.stk-mv-chip { background:rgba(63, 116, 168,.10); color:var(--pri-text); border-radius:5px; padding:2px 7px; font-size:11.5px; font-weight:500; }
@keyframes stk-mv-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .stk-mv-table tbody tr { animation:none; } }

/* ============================================================
   Header: yenile butonu + TCMB doviz kuru
   ============================================================ */
.peron-header-refresh { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--border); background:var(--card-bg); border-radius:9px; color:var(--text-secondary); cursor:pointer; flex-shrink:0; transition:background-color 150ms ease, color 150ms ease, transform 250ms cubic-bezier(0.23,1,0.32,1); }
.peron-header-refresh svg { width:17px; height:17px; }
.peron-header-refresh:hover { background:var(--content-bg); color:var(--pri-text); }
.peron-header-refresh:active { transform:rotate(-180deg) scale(0.92); }
.peron-fx { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; line-height:1.15; }
.peron-fx:empty { display:none; }
.peron-fx .fx-grid { display:flex; align-items:center; gap:16px; padding:5px 16px; background:var(--card-bg); border:1px solid var(--border); border-radius:11px; }
.peron-fx .fx-divider { width:1px; align-self:stretch; background:var(--border); margin:1px 0; }
.peron-fx .fx-col { display:flex; flex-direction:column; gap:1px; align-items:center; }
.peron-fx .fx-head { display:flex; align-items:baseline; justify-content:center; gap:5px; }
.peron-fx .fx-sym { font-size:14px; font-weight:800; color:var(--pri-text); line-height:1; }
.peron-fx .fx-name { font-size:11px; font-weight:700; color:var(--text-secondary); letter-spacing:.02em; }
.peron-fx .fx-rates { display:flex; gap:12px; }
.peron-fx .fx-rate { display:flex; align-items:baseline; gap:4px; }
.peron-fx .fx-lbl { font-size:9px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.peron-fx .fx-num { font-size:12px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.peron-fx .fx-source { font-size:9px; color:var(--text-muted); letter-spacing:.01em; }
@media (max-width:1100px) { .peron-fx { display:none; } }
/* 🔴 1.288.0 — GERİ DÜĞMESİ TELEFONDA GÖRÜNÜR (kullanıcı: "ürün ağacının içine
   girdiğimde geri butonu yok, geri butonu genel olarak her ekranda olsun").
   ESKİ KURAL `.peron-header-refresh { display:none }` idi ve YENİLE ile GERİ'yi
   AYNI SINIF taşıdığı için ikisini birden gizliyordu. Geri düğmesi sayfa-içi
   derinliğin (Ürün Ağacı: liste→grup→modül) TEK çıkışıydı; telefonda o derinliğe
   inen kullanıcı ancak alt bardan BAŞKA sayfaya giderek kurtulabiliyordu.
   Yenile gizli KALIR: gerçek zamanlı yoklama (peron-realtime.js) zaten tazeliyor
   ve dar başlıkta yer yok. */
@media (max-width:768px)  { #peron-refresh-btn { display:none; } }
@media (prefers-reduced-motion: reduce) { .peron-header-refresh:active { transform:scale(0.94); } }

/* ─── Mesaj avatarları + seçici ─── */
.peron-chat-thread-avatar.peron-av-svg { padding: 0; overflow: hidden; background: transparent; }
.peron-av-svg svg { width: 100%; height: 100%; display: block; border-radius: inherit; }
.peron-av-mini { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; font-size: 10px; line-height: 18px; overflow: hidden; }
.peron-av-mini.peron-av-svg svg { width: 100%; height: 100%; }

.peron-av-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.peron-av-pick {
    aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: 12px;
    background: var(--content-bg); cursor: pointer; overflow: hidden; transition: border-color .12s, transform .12s;
}
.peron-av-pick svg { width: 100%; height: 100%; display: block; }
.peron-av-pick:hover { transform: translateY(-2px); border-color: var(--pri-border); }
.peron-av-pick.sel { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-light); }
.slp-wrap { display: flex; flex-direction: column; gap: 4px; }
.slp-list { display: flex; flex-direction: column; max-height: 340px; overflow: auto; margin-top: 4px; }
.slp-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.slp-row:last-child { border-bottom: none; }
.slp-all { border-bottom: 2px solid var(--border); }
.slp-row input { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.slp-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.slp-meta { font-size: 12px; color: var(--text-muted); margin-left: auto; text-align: right; }
.slp-note { font-size: 11.5px; color: var(--text-muted); margin-top: 10px; line-height: 1.4; }

/* ─── Sevk etiketi: eksik paket / modül kontrolü (yazdırmadan önceki adım) ───
   Depo görevlisi bunu koli başında okur: modül adı birincil, adet ve paket sayısal.
   Izgara kolonları [kutucuk | ad | adet | paket] tüm ürünlerde AYNI hizada kalır. */
.lbc-wrap { display: flex; flex-direction: column; gap: 14px; }
.lbc-intro { font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.lbc-prod { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lbc-prod-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 9px 12px; background: var(--border-light); border-bottom: 1px solid var(--border);
}
.lbc-prod-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.lbc-prod-meta { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }
.lbc-head, .lbc-row {
    display: grid; grid-template-columns: 42px 1fr auto 74px; align-items: center; gap: 10px;
    padding: 0 12px;
}
.lbc-head {
    padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--border);
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    color: var(--text-muted);
}
.lbc-h-cb, .lbc-h-p { text-align: center; }
.lbc-h-q { text-align: right; }
.lbc-row { min-height: 44px; border-bottom: 1px solid var(--border-light); }
.lbc-row:last-of-type { border-bottom: none; }
.lbc-cbw { display: flex; align-items: center; justify-content: center; min-height: 40px; cursor: pointer; }
.lbc-cb { width: 19px; height: 19px; cursor: pointer; accent-color: var(--rose); }
.lbc-name {
    min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary);
    line-height: 1.3; overflow-wrap: anywhere;
}
.lbc-fason, .lbc-warn {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    vertical-align: 1px;
}
.lbc-fason { background: var(--pri-light); color: var(--pri-text); }
/* --amber (#be7438) kendi tint zemininde 3.12:1 → 9.5px metin için AA'yı geçmez.
   --amber-ink aynı zeminde 4.78:1 verir ve gece modunda --amber'e alias olduğu için
   (peron-panel.css:212) koyu temada görünüm değişmez. */
.lbc-warn { background: var(--peach-surface); color: var(--amber-ink); }
.lbc-qty { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lbc-qty i { font-size: 10px; font-style: normal; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
.lbc-pkg {
    width: 100%; height: 34px; padding: 0 8px; text-align: center;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--card-bg); color: var(--text-primary);
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.lbc-pkg:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-light); }
.lbc-pkg:disabled { background: var(--border-light); color: var(--text-muted); }
.lbc-row.miss { background: var(--rose-surface); }
.lbc-row.miss .lbc-name { text-decoration: line-through; color: var(--text-muted); }
.lbc-row.miss .lbc-qty { color: var(--text-muted); }
.lbc-nomod { padding: 12px; font-size: 12px; color: var(--text-muted); }
.lbc-prod-total {
    padding: 8px 12px; border-top: 1px solid var(--border); background: var(--border-light);
    font-size: 12px; color: var(--text-secondary); text-align: right;
}
.lbc-prod-total b { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lbc-sum {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-radius: 8px; background: var(--pri-light);
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.lbc-sum b { font-size: 22px; font-weight: 800; color: var(--pri-text); font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    /* Telefonda kolon başlığı ve satır aynı ızgarayı korur; dokunma hedefleri 44px'e çıkar
       (ızgara align-items:center olduğu için satırın 52px'i öğeye YANSIMAZ — öğenin kendi
       yüksekliği verilmeli). */
    .lbc-head, .lbc-row { grid-template-columns: 44px 1fr auto 68px; gap: 8px; padding: 0 10px; }
    .lbc-row { min-height: 52px; }
    .lbc-cbw { min-height: 44px; }
    .lbc-cb { width: 22px; height: 22px; }
    .lbc-pkg { height: 44px; font-size: 16px; }
    .lbc-prod-meta { margin-left: 0; }
}
.peron-switch {
    position: relative; width: 46px; height: 26px; min-width: 46px; flex-shrink: 0;
    border: none; border-radius: 999px; background: var(--switch-off); cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
    transition: background .18s;
}
/* 🔴 DOKUNMA UZANTISI YALNIZ DİKEY (`-9px 0`), dört yön DEĞİL.
   Anahtar 46×26'dır: genişlik zaten ≥44, yalnız yükseklik 44'e çıkarılmalı.
   Dört yöne uzatan eski hâl, satırın SAĞ kenarındaki anahtarın 9px dışarı
   taşmasına ve modal gövdesinin yatay kaydırılabilir hâle gelmesine yol açıyordu
   (ölçüldü, 320px: panel scrollWidth 293 / clientWidth 284). Tasarım kuralı gereği
   modal içinde yatay kaydırma olmaz. */
.peron-switch::after { content: ''; position: absolute; inset: -9px 0; }
.peron-switch[aria-checked="true"] { background: var(--pri); box-shadow: none; }
.peron-switch:disabled { opacity: .5; cursor: not-allowed; }
.peron-switch-knob {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .05);
    transition: transform .18s;
}
.peron-switch[aria-checked="true"] .peron-switch-knob { transform: translateX(20px); }

@media (max-width: 560px) {
    .peron-av-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ─── Tek-instance uyarı ekranı (PERON zaten açık) ─── */
body.peron-si-active { overflow: hidden; }
.peron-second-instance {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; background: var(--content-bg);
}
.peron-second-instance .psi-card {
    max-width: 420px; width: 100%; text-align: center;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 16px; padding: 36px 28px; box-shadow: var(--shadow-modal);
}
.peron-second-instance .psi-badge {
    width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(190, 116, 56, .14); color: var(--amber);
}
.peron-second-instance .psi-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; }
.peron-second-instance .psi-text { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0 0 24px; }
.peron-second-instance .psi-actions { display: flex; flex-direction: column; gap: 10px; }
.peron-second-instance .psi-btn {
    min-height: 44px; padding: 11px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; transition: background .14s, border-color .14s, color .14s;
}
.peron-second-instance .psi-primary { background: #356394; color: #fff; }
.peron-second-instance .psi-primary:hover { filter: brightness(1.06); }
.peron-second-instance .psi-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.peron-second-instance .psi-ghost:hover { background: var(--pri-light); color: var(--pri-text); border-color: var(--pri-border); }
@media (max-width: 480px) {
    .peron-second-instance .psi-card { padding: 28px 20px; }
}

/* ═══ Üretim Siparişleri — kapsamlı sipariş formu ═══ */
/* 🔴🔴 EKRANIN TAMAMI KULLANILIR (kullanıcı kuralı: "ekranda boşluk bırakma").
   Eski `max-width: 1120px` tavanı 1920px'lik bir ekranda içerik alanının ~%31'ini
   BOŞ bırakıyordu: form 1120px'te duruyor, sağda 500px+ ölü alan kalıyordu.
   Tavan kaldırıldı; okunabilirlik `.po-detay` gibi UZUN METİN alanlarında
   satır uzunluğu sınırıyla korunur, tüm sayfayı daraltarak değil. */
.po-form { max-width: none; }
.po-form-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.po-form-crumb a { color: var(--pri-text); cursor: pointer; font-weight: 600; }
.po-form-crumb .sep { opacity: .5; }

.po-form-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.po-meta-it { display: inline-flex; align-items: baseline; gap: 6px; }
.po-meta-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

/* TABAN (mobile-first): tek kolon. Genişletme AŞAĞIDA, `min-width` ile. */
.po-head-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px; margin-bottom: 14px; }
.po-head-grid .peron-form-group { margin: 0; min-width: 0; }
.po-col-full { grid-column: 1 / -1; }

/* ═══ Fatura başlık ızgarası — alanlar bitişik ve hizalı (12 kolon) ═══ */
/* ═══ FATURA BELGESİ — Alış · Satış · İade ═══════════════════════════════════
   Kurumsal belge düzeni: üst başlık çubuğu · etiketli alan ızgarası · kalem
   tablosu · sağ altta toplam bloğu.
   🔴 MOBILE-FIRST: taban DAR ekran (tek kolon, etiket ÜSTTE). `min-width`
   sorguları yalnız GENİŞLETİR — masaüstü yolunu ayrı bir dala kopyalamaz.
   🔴 Renkler token'dan; sabit hex gece modunu kırar.
   🔴 Izgara çizgileri `gap:1px` + zemin renkleriyle çizilir, `nth-child`
   kenarlıklarıyla DEĞİL: tam satır kaplayan bir alan (Cari/Açıklama) eklendiği
   anda nth-child hesabı kayar ve çizgiler rastgele yerlerde kırılırdı. */

/* 🔴 `.inv-hint` STİLLERİ DE SİLİNDİ (1.367.0): tek kullanıcısı faturaların
   bilgilendirme şeridiydi ve o şerit kullanıcı isteğiyle kaldırıldı. Kullanıcısı
   kalmayan seçiciyi bırakmak, bir gün başka bir ekranın ona yanlışlıkla tutunması
   demekti. */

/* 🔴🔴 "Teslim belges…" KIRPILMASI — GENİŞLİK ÇALMADAN ÇÖZÜLDÜ (1.367.0).
   Kullanıcı: *"Durum kısmının altındaki yazıların bi kısmı kesik gözüküyor"*.
   ÖLÇÜLDÜ: Durum kolonu `<col style="width:96px">`; içindeki dört rozetten üçü
   ("Taslak" · "Kesildi" · "İptal") rahat sığıyor, YALNIZ belgeli satınalma
   teslimlerinin "Teslim belgesi" rozeti taşıyor ve `.peron-badge`in
   `white-space: nowrap`ı yüzünden kesiliyordu.

   🔴🔴 1.369.0 — SARMA GERİ ALINDI, ROZET TEK SATIR (kullanıcı: *"Durum bölümünü
      genişlet yazıları tek satıra sığdır"*). 1.367.0'daki gerekçe ("kolon
      genişletilemez, çünkü piksel CARİ'den gider") DOĞRUYDU AMA EKSİKTİ: pikselin
      TEK kaynağı Cari değil. Hücre dolgusu 13px→10px inince sayı kolonları
      daraltılabilir hale geldi ve Durum'a 44px, Cari'ye 2px kaldı. Ölçüm
      değişince karar da değişir; eski gerekçeyi savunmak, ölçümü değil METNİ
      korumak olurdu.
   🦷 SINIF ADI DA DEĞİŞTİ (`inv-badge-wrap` → `inv-badge-tek`): davranış
      "sar"dan "tek satır"a döndüğü halde adı "wrap" kalsaydı, sınıf adı kodun
      ne yaptığı konusunda YALAN söylerdi. */
.peron-table td .inv-badge-tek {
    white-space: nowrap;
}

/* 🔴🔴 FATURA TABLOSU YOĞUNLUĞU (1.369.0 — kullanıcı: *"sütunlar yukarıdan aşağı
   dar olsun daha çok bilgi sığsın"*).
   🔴 KAPSAM `[data-tur]`: bu öznitelik YALNIZ fatura tablosunda var
      (`peron-mod-invoice.js`). Çıplak `.peron-table td` kuralı yazmak, stok ·
      cari · üretim · kasa dahil TÜM tabloların yoğunluğunu habersizce değiştirirdi
      — bu dosyada belgelenmiş "global sınıfa kural yazma" tuzağı.
   🔴 DOLGU DÜŞER, PUNTO DÜŞMEZ: yazı boyutu `--tbl-fs` zincirinden gelir ve
      dokunulmaz. Satır yüksekliği dolgudan kazanılır (dikeyde 12→7px), yani
      okunabilirlik aynı kalırken ekrana daha çok satır girer.
   🦷 KAPSAM ÖLÇÜLDÜ, "HER GENİŞLİKTE" DEĞİL (kod denetimi bulgusu): bu kuralın
      özgüllüğü (0,2,1) dosyanın SONUNDAKİ "MOBİL SON SÖZ" bloğundaki
      `.peron-layout .peron-table td` ile EŞİT ve o blok DAHA SONRA geldiği için
      ≤768px'te O kazanır. Yani buradaki dolgu fiilen ≥769px bandında geçerlidir.
      Kural mobil bloğa TAŞINMADI: mobil zaten daha dar dolgu (8/5/4px) uyguluyor,
      yani orada zaten daha yoğun. Taşımak, ölçülmemiş bir "iyileştirme" uğruna
      telefonda dokunma hedeflerini daraltma riski alırdı. */
.peron-table[data-tur] th { padding: 9px 10px; }
.peron-table[data-tur] td { padding: 7px 10px; }

.inv-doc {
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card-bg); overflow: hidden; margin-bottom: 16px;
}
.inv-doc-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; padding: 10px 14px;
    background: var(--content-bg); border-bottom: 1px solid var(--border);
}
.inv-doc-name { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text-primary); }
.inv-doc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-chip {
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-muted);
    background: var(--card-bg); white-space: nowrap;
}
.inv-chip.is-in  { color: var(--green-ink, var(--green)); border-color: var(--green); }
.inv-chip.is-out { color: var(--amber-ink, var(--amber)); border-color: var(--amber); }

.inv-doc-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 1px; background: var(--border-light);
}
.inv-fld {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
    padding: 10px 14px; background: var(--card-bg); min-width: 0;
}
.inv-fld > label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
/* İpucu KASITLI olarak ikinci satıra iner: 116px etiket sütununda
   "Belge No (tedarikçiden)" zaten sarıyordu (ölçüldü: etiket 38px, komşuları 19px)
   ve kazara kırılmış gibi duruyordu. Blok yapınca iki satır TASARIM olur; ızgara
   satır yükseklikleri zaten eşitlendiği için hizalama bozulmaz (satır 54px). */
.inv-fld-hint { display: block; font-weight: 400; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.inv-fld .peron-input,
.inv-fld .peron-select { width: 100%; min-width: 0; }
/* 🔴 Paylaşılan `.po-ac` kuralı `max-width:340px; flex:1` taşır (üretim siparişi
   formunun dar kolonu için). Yalnız `width:100%` yazmak onu EZMEZ — alan geniş
   olsa bile girdi 340px'te kalır ve sağında ölü boşluk oluşur. */
.inv-fld .po-ac { width: 100%; min-width: 0; max-width: none; flex: none; }
.inv-fld .po-ac-input { width: 100%; min-width: 0; }

@media (min-width: 720px) {
    .inv-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 116px: "Belge No (tedarikçiden)" 104px'te iki satıra kırılıyordu (ölçüldü) —
       etiket sütunu en uzun etiketi TEK satırda taşıyacak kadar geniş olmalı. */
    .inv-fld { grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 14px; }
    .inv-fld-wide { grid-column: 1 / -1; }
    .inv-fld-grow { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
    .inv-doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Son satırda "Para Birimi" tek başına kalıp sağında 2 kolonluk boşluk bırakıyordu;
       Açıklama kalan genişliği doldurur → satırların hiçbiri yarım kalmaz. */
    .inv-fld-grow { grid-column: span 2; }
}

/* ─── Kalem tablosu ─── */
.inv-lines-card { padding: 0; overflow: hidden; margin-bottom: 16px; }
.inv-lines-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    flex-wrap: wrap; padding: 10px 14px;
    border-bottom: 1px solid var(--border); background: var(--content-bg);
}
.inv-lines-t { font-weight: 700; font-size: var(--tbl-fs); color: var(--text-primary); }
.inv-lines-note { font-size: 12px; color: var(--text-muted); }
/* 🔴 `--text-muted` bu hücrede OKUNMUYOR: tablo başlığı koyu zeminde beyaz metindir,
   soluk gri onun üstünde ölçülemeyecek kadar söner. Başlığın kendi renginden türet
   (inherit + opaklık) → hangi tema olursa olsun kontrast korunur. */
/* 🔴 ELLIPSIS BİLE YOKTU: `text-overflow: clip` ile metin SÖZCÜK ORTASINDA
   kesiliyordu ve kullanıcıya "kesildi" sinyali (…) hiç verilmiyordu. Ölçüldü:
   1440px'te 37px, 320px'te 19px taşma — masaüstünde bile kırpık.
   🦷 ÇÖZÜM ELLIPSIS DEĞİL, SARMA: bu etiket zaten `<br>` ile KENDİ satırında.
      Sarmasına izin vermek fazladan genişlik İSTEMEZ, yalnız ikinci bir satır
      kullanır — kolonu büyütmeden kırpılma tamamen biter. Ellipsis koysaydım
      metin yine okunmazdı, sadece kesildiği belli olurdu. */
.inv-th-sub { display: block; font-weight: 400; font-size: 10.5px; color: inherit; opacity: .78;
    white-space: normal; overflow-wrap: anywhere; }
.inv-lines-table td { vertical-align: middle; }
.inv-lines-table .inv-l-inp[data-field="quantity"],
.inv-lines-table .inv-l-inp[data-field="unit_price"],
.inv-lines-table .inv-l-inp[data-field="vat_rate"],
.inv-lines-table .inv-l-inp[data-field="discount_rate"] { text-align: right; font-variant-numeric: tabular-nums; }
.inv-l-no    { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.inv-l-code  { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.inv-l-total { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-l-ro    { display: block; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-l-name  { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-l-unit  { color: var(--text-secondary); }
.inv-l-empty { text-align: center; color: var(--text-muted); padding: 22px 14px; font-size: 12px; }
/* Masaüstünde satırlar sıkışır; mobilde global 16px/44px kuralları yürürlükte kalır. */
@media (min-width: 769px) {
    .inv-lines-table .peron-input { height: 34px; }
    .inv-lines-table .inv-l-del { height: 30px; width: 30px; padding: 0; }
}

/* ─── Alt blok: açıklama + toplamlar ─── */
.inv-foot { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.inv-foot-note { flex: 1 1 240px; min-width: 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); padding-top: 4px; }
.inv-foot-note b { color: var(--text-secondary); font-weight: 600; }
.inv-tot {
    flex: 0 1 320px; min-width: 0;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 12px 16px;
}
.inv-tot-row { display: flex; justify-content: space-between; gap: 24px; padding: 3px 0; font-size: 12px; color: var(--text-secondary); }
.inv-tot-v   { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-primary); }
.inv-tot-row.is-grand {
    font-weight: 700; font-size: 13px; color: var(--text-primary);
    border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px;
}
.inv-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.inv-form-err { color: var(--rose-ink); font-size: 12px; margin-top: 10px; text-align: right; }
.inv-detail { padding: 8px 12px 12px; }
/* Akordiyon ic tablosu: dis tablo zaten kabin genisligini belirliyor — ikinci bir
   min-width tabani fazladan tasma uretirdi. */
.inv-detail .peron-table.inv-detail-tbl { min-width: 0; }
.inv-detail-msg { padding: 14px 18px; color: var(--text-muted); font-size: 12px; }

/* ─── İade kaynak listesi: bu cariden gelen ürünler ─── */
.inv-ret {
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card-bg); overflow: hidden; margin-bottom: 16px;
}
.inv-ret-empty { padding: 14px; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.inv-ret-bar {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 12px 14px;
    background: var(--content-bg); border-bottom: 1px solid var(--border);
}
.inv-ret-t   { font-weight: 700; font-size: var(--tbl-fs); color: var(--text-primary); }
.inv-ret-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.inv-ret-tools  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-ret-search { min-width: 0; flex: 1 1 180px; }
/* Uzun listede sayfa gövdesi değil, KUTU kayar (yatay kaydırma invaryantı). */
.inv-ret-wrap { max-height: 300px; overflow-y: auto; }
.inv-ret-row  { cursor: pointer; }
.inv-ret-row:hover,
.inv-ret-row.is-sel { background: var(--pri-light); }
.inv-ret-row.is-off { opacity: .45; cursor: default; }
.inv-ret-none { text-align: center; color: var(--text-muted); padding: 18px; }
.inv-ret-cb   { width: 18px; height: 18px; accent-color: var(--pri); cursor: pointer; }
/* Ürün birden fazla para biriminde gelmişse hangi kovanın satırı olduğunu söyleyen rozet.
   Yalnız o durumda basılır — tek para birimli üründe gürültü olurdu. */
.inv-ret-pb {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--amber-ink, var(--amber)); border: 1px solid var(--amber);
    vertical-align: 1px;
}
/* Fiyat izi olmayan kova — para birimi rozetinden AYRI renk (uyarı değil, bilgi). */
.inv-ret-pb.is-nopr { color: var(--text-muted); border-color: var(--border); }

.po-section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }

/* Ürün ekleme kartı — başlık ortada, seçici kutusu KABI KADAR GENİŞ.
   🔴 1.319.0: `align-items:center` çapraz eksende çocuğu GERMİYOR; `.po-add-row`
      max-content'e küçülüyor ve `.po-pick`in `width:100%`i input'un içsel genişliğine
      çözülüyordu. ÖLÇÜLDÜ: 1440px'te kutu 1130px'lik kartın içinde yalnız 182px
      (%32) yer kaplıyor, ürün adı panelde ALTI SATIRA bölünüyordu. `stretch` +
      `width:100%` zinciri kutuyu kabına oturtur. */
.po-add-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center;
    background: var(--card-bg); border: 1px dashed var(--pri-border, var(--border)); border-radius: 16px;
    padding: 22px 18px; margin: 4px 0 18px; }
.po-add-card-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.po-add-row { display: flex; width: 100%; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.po-add-row .peron-select { min-width: 240px; }

/* ═══ ÜRÜN EKLE SEÇİCİSİ — ana ürün + ALTINDA modülleri (1.319.0) ═══════════════
   🔴 AKORDİYON YOK (kullanıcı kuralı): modüller her zaman görünür.
   🔴 GENİŞ: kutu kabını doldurur, üst sınır `min()` ile → 320px'te bile yatay
      kaydırma açmaz; panel KENDİ İÇİNDE kayar, sayfa gövdesi asla.
   🔴 SATIR = IZGARA (`1fr auto`), flex-wrap DEĞİL. Ad ile meta tek hücrede
      sarmalanınca isimler birbirine giriyordu (kullanıcı bildirimi); ızgarada ad
      esner ve taşarsa üç noktayla kesilir, meta sabit genişlikte sağda durur.
   🔴 YAZI 9 PUNTO (12px) — kullanıcı kuralı. Dar ekran zemini (≥14px) BU KURALIN
      ÜSTÜNDEDİR ve aşağıdaki media bloğunda geri alınır. */
.po-pick { position: relative; width: 100%; max-width: min(980px, 96vw); margin: 0 auto;
    text-align: left; box-sizing: border-box; }
.po-pick-inp { width: 100%; box-sizing: border-box; font-size: 12px; }
.po-pick-panel { position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(44, 62, 53, .16); overflow: hidden; }
.po-pick-list { max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
.po-pick-grp + .po-pick-grp { border-top: 1px solid var(--border); }
.po-pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
    width: 100%; box-sizing: border-box; padding: 7px 14px; min-height: 30px;
    background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text-primary); }
.po-pick-row:hover, .po-pick-row:focus-visible { background: var(--pri-light); }
.po-pick-nm { font-size: 12px; font-weight: 700; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-pick-code { font-weight: 500; color: var(--text-muted); }
.po-pick-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; justify-self: end; }
/* Modül satırı: ana ürünün ALTINDA, girintili (kullanıcı kuralı: "biraz sağa kaysın"). */
.po-pick-m { padding-left: 32px; background: var(--content-bg); }
.po-pick-m .po-pick-nm { font-weight: 500; }
.po-pick-m .po-pick-nm::before { content: "└ "; color: var(--text-muted); }
.po-pick-raw .po-pick-nm { font-weight: 700; }
.po-pick-empty { padding: 12px 14px; font-size: 12px; color: var(--text-muted); text-align: center; }
.po-pick-empty--sub { padding: 6px 14px 8px 32px; text-align: left; }
.po-pick-hint { font-size: 11px; color: var(--text-muted); max-width: min(980px, 96vw); margin: 0 auto; }

/* Dokunmatikte hedef yüksekliği ≥44px (satırın TAMAMI tıklanabilir).
   🔴 iOS odak yakınlaştırması: girdi 16px'in ALTINA inmez. */
@media (max-width: 768px), (hover: none) {
    .po-pick-row { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .po-pick-inp { font-size: 16px; }
}
/* 🔴 DAR EKRAN ZEMİNİ 9 PUNTO KURALINI EZER (global kural: 320-480px'te gövde ≥14px).
   Ekran bu genişlikte menüden açılmıyor ama zorla/derin bağlantıyla açılabilir. */
@media (max-width: 480px) {
    .po-pick-nm { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
    .po-pick-sub { font-size: 12px; white-space: normal; }
    .po-pick-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; align-items: start; }
    .po-pick-sub { justify-self: start; }
}

.po-empty { padding: 8px 0 16px; }
.po-foot-info { font-size: 13px; color: var(--text-secondary); }
.po-foot-info b { color: var(--text-primary); }

.po-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.po-item.is-locked { background: var(--content-bg); }
.po-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.po-item-title { display: flex; flex-direction: column; gap: 2px; }
.po-item-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.po-item-code { font-size: 11.5px; color: var(--text-muted); }
.po-item-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 1.425.0 — hedef ETİKETİN tamamı (kutu 13px; etiket 28px yükseklik = yoğun yüzey eşiği). */
.po-std-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.po-std-toggle input { accent-color: var(--pri); }

.po-qty { display: inline-flex; align-items: center; gap: 4px; }
.po-qty-btn { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-secondary); }
.po-qty-btn:hover { border-color: var(--pri-border); color: var(--pri-text); }
.po-qty-inp { width: 64px; text-align: center; padding: 5px 4px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.po-dup { display: inline-flex; align-items: center; gap: 5px; }
.po-dup-count { width: 52px; text-align: center; padding: 5px 4px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.po-dup-unit { font-size: 12px; color: var(--text-muted); }
/* 1.425.0 — dokunmatikte girdi 16px: iOS 16px altındaki girdiye odaklanınca sayfayı büyütür. */
@media (pointer: coarse) { .po-dup-count, .po-qty-inp { font-size: 16px; } }
.po-opt-list { display: flex; flex-direction: column; }
.po-opt-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.po-opt-row:last-child { border-bottom: none; }
.po-opt-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; }
.po-opt-row .po-opt-add { flex-shrink: 0; }
.po-opt-empty { font-size: 13px; color: var(--text-muted); padding: 16px 2px; text-align: center; }
.po-qty-unit { font-size: 12px; color: var(--text-muted); }

.po-modules { display: flex; flex-direction: column; gap: 14px; }
/* Her modül (= ayrı ürün) ayırt edilebilsin: sol aksan + üst başlık bandı tonu döner.
   Aksan rengi --mod-accent / band tonu --mod-tint nth-child ile 6'lı palette döner. */
.po-mod { position: relative; border: 1px solid var(--border); border-left: 3px solid var(--mod-accent, var(--border)); border-radius: 10px; padding: 0 12px 12px; background: var(--card-bg); overflow: hidden; }
.po-item.is-locked .po-mod { background: var(--card-bg); }
.po-mod-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin: 0 -12px 10px; padding: 8px 12px; background: var(--mod-tint, var(--content-bg)); border-bottom: 1px solid var(--border-light, var(--border)); }
.po-mod-idx { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--mod-accent, var(--pri)); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.po-modules > .po-mod:nth-child(6n+1) { --mod-accent: #5e9c8b; --mod-tint: rgba(94,156,139,.10); }
.po-modules > .po-mod:nth-child(6n+2) { --mod-accent: #3f74a8; --mod-tint: rgba(63,116,168,.10); }
.po-modules > .po-mod:nth-child(6n+3) { --mod-accent: #be7438; --mod-tint: rgba(190,116,56,.10); }
.po-modules > .po-mod:nth-child(6n+4) { --mod-accent: #a98bb0; --mod-tint: rgba(169,139,176,.12); }
.po-modules > .po-mod:nth-child(6n+5) { --mod-accent: #c2545a; --mod-tint: rgba(194,84,90,.10); }
.po-modules > .po-mod:nth-child(6n+6) { --mod-accent: #4f93b8; --mod-tint: rgba(79,147,184,.10); }
.po-mod-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.po-mod-name-inp { max-width: 280px; }
.po-mod-price { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--pri-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-mod-price .po-mod-x { color: var(--text-muted); font-weight: 500; font-size: 11.5px; }
.po-mod-price b { color: var(--text-primary); }
.po-mod-noprice { color: var(--text-muted); font-weight: 500; font-style: italic; }
/* Modül başına fiyat ayrıntı tablosu */
.po-mod-calc { margin-top: 8px; }
.po-mod-calc-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.po-mod-calc-table th { text-align: right; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); padding: 4px 9px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.po-mod-calc-table th:first-child, .po-mod-calc-table td:first-child { text-align: left; }
.po-mod-calc-table td { text-align: right; padding: 6px 9px; font-variant-numeric: tabular-nums; vertical-align: top; }
/* Modül toplam zemini, ürün toplam zemininden (rose) FARKLI — mint/teal tonu (gece modu güvenli) */
.po-mod-calc-table { background: rgba(94,156,139,.06); }
.po-mod-calc-table .po-mod-tcol { background: rgba(94,156,139,.18); font-weight: 700; color: var(--text-primary); }
.po-mod-calc-empty { font-size: 11.5px; color: var(--text-muted); font-style: italic; padding: 4px 2px; }
.po-mod-dup { white-space: nowrap; }
.po-item-total { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.po-item-total-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.po-item-total-label em { font-style: normal; color: var(--pri-text); font-weight: 600; }
.po-item-total-val { font-size: 16px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* Ürün başına hesap tablosu (Fiyat · Miktar · KDV · İskonto · 2.İskonto · Toplam) */
.po-calc { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); overflow-x: auto; }
.po-calc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.po-calc-table th { text-align: right; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 4px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.po-calc-table th:first-child, .po-calc-table td:first-child { text-align: left; }
.po-calc-table td { text-align: right; padding: 8px 10px; vertical-align: top; font-variant-numeric: tabular-nums; }
.po-calc-table .po-calc-tcol { background: var(--pri-soft, rgba(212,163,168,.14)); font-weight: 800; border-radius: 0 6px 6px 0; }
.po-calc-qty { font-weight: 600; }
.po-calc-unit { color: var(--text-muted); font-weight: 500; font-size: 11.5px; }
.po-money { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.po-calc-table td:first-child .po-money { align-items: flex-start; }
.po-money-tl { font-weight: 700; color: var(--text-primary); }
.po-calc-tcol .po-money-tl { font-size: 15px; font-weight: 800; }
.po-money-fx { font-size: 10.5px; color: var(--text-muted); font-weight: 500; letter-spacing: .01em; }
.po-kdv-rate { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.po-kdv-in { color: var(--mint, #5e9c8b); font-weight: 700; }
.po-kdv-sub { display: block; font-size: 10px; color: var(--text-muted); }
.po-kdv-none { color: var(--text-muted); }
.po-foot-info { display: flex; flex-direction: column; gap: 2px; }
.po-foot-grand { font-size: 13px; color: var(--text-secondary); }
.po-foot-grand b { font-size: 16px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.po-shipped-tag { font-size: 11.5px; font-weight: 700; color: var(--green-ink); background: color-mix(in srgb, var(--green) 14%, transparent); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.po-item-ship { white-space: nowrap; }
.po-mod-empty, .po-mat-empty { font-size: 12px; color: var(--text-muted); padding: 6px 0; text-align: center; }

.po-mat-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.po-mat-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.po-mat-table td { padding: 4px 6px; border-bottom: 1px solid var(--border-light, var(--border)); vertical-align: middle; }
.po-mat-grp { white-space: nowrap; }
.po-grp-badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--pri-text); background: var(--pri-light); border-radius: 6px; padding: 2px 8px; }
/* Ürün Grubu — özelleştirilebilir üründe elle düzenlenir (yalnız snapshot, stok kartını etkilemez) */
.po-mat-table .po-mat-grp-inp.peron-input.sm { width: 100%; max-width: 150px; font-size: 12px; }
/* Ürün Ağacı: "Adet Değişkenliği" tiki (yalnız değişken satırda) */
.bom-qtyvar-lbl { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.bom-qtyvar-lbl input { width: 15px; height: 15px; cursor: pointer; }
/* Modül notu — fişte görünür; malzeme tablosu ile hesap tablosu arasında */
.po-mod-note-wrap { margin-top: 8px; }
.po-mod-note { width: 100%; resize: vertical; font-size: 12px; min-height: 38px; }
/* Ürün (Genel) notu — ürün bloğunun en altında */
.po-item-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light, var(--border)); }
.po-item-note .peron-form-label { display: block; margin-bottom: 4px; }
.po-item-note-inp { width: 100%; resize: vertical; font-size: 12px; min-height: 40px; }
/* Malzeme adet stepper (1-2-3) — satır başında */
.po-mat-adet { white-space: nowrap; }
.po-adet { display: inline-flex; align-items: center; gap: 3px; }
.po-adet-btn { width: 24px; height: 26px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--text-secondary); flex: 0 0 auto; }
.po-adet-btn:hover { border-color: var(--pri); color: var(--pri-text); background: var(--pri-light); }
.po-mat-table .po-adet .po-mat-qty.peron-input.sm { width: 48px; text-align: center; padding: 4px 2px; }
.po-adet-ro { font-weight: 700; color: var(--text-primary); }
/* Hammadde satırı aksiyon hücresi: Çoğalt + Sil yan yana */
.po-mat-actcell { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.po-mat-actcell .peron-btn.sm { padding: 4px 7px; }
/* Üretim siparişi listesi — Ürün kolonu (birincil) + Firma/Müşteri 2-satır clamp + modül alt-satırı.
   NOT: -webkit-box clamp <td>'nin display:table-cell'ini bozar → clamp DAİMA iç .cell-clamp2 div'inde. */
.col-prod { font-size: 12px; color: var(--text-primary); }
/* Üretim Siparişleri = tek satır kompakt: hücreler tek satır, taşan metin ellipsis (tam metin title'da). */
.cell-clamp2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.peron-table--fixed td.col-code { overflow: hidden; }
.peron-table--fixed td.col-code .user-code { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; letter-spacing: -.2px; }
.po-status-quick { min-width: 0; }
.po-row-modc { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 🔴🔴 "Bu ekranda yeni güncellemeler var" ŞERİDİNİN STİLLERİ SİLİNDİ (1.367.0).
   Kullanıcı: *"güncelleme yazısını aslaa görmek istemiyorum hiçbir ekranda buna
   engel ol kaldır tamamen"*. Şeridi üreten JS de silindi; görevini
   `bekleyeniZamanla()` devraldı (bkz. peron-app.js). Bu yorum MEZAR TAŞIDIR:
   `.peron-refresh-bar*` seçicileri bir daha YAZILMAZ — yazılırsa
   t124 kapısı kırmızı verir. */
/* Üretim Siparişleri liste — işlem butonları: ikon-only (tooltip + aria-label), kompakt */
.po-act-cell { display: flex; gap: 5px; flex-wrap: nowrap; justify-content: flex-end; }
/* Mobilde (≤768px) 4 ikon 184px kolona sığsın: dokunma hedefi koruyucu 44px kuralını burada dar tut. */
@media (max-width: 768px) {
    .peron-table--fixed td.col-actions .po-act-btn { min-width: 38px; padding: 7px 6px; }
    .peron-table--fixed td.col-actions { padding-left: 4px; padding-right: 4px; }
}
.po-act-btn { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; min-width: 36px; padding: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); border-radius: var(--r-sm, 8px); font-weight: 600; line-height: 1.1; white-space: nowrap; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.po-act-btn svg { width: 16px; height: 16px; }
.po-act-btn:hover { background: var(--pri-light); color: var(--pri-text); border-color: var(--pri); }
.po-act-btn.danger { color: var(--rose); }
.po-act-btn.danger:hover { background: #fbeaec; color: var(--rose); border-color: var(--rose); }
.po-mat-table .peron-input.sm, .po-mat-table .peron-select.sm { padding: 4px 6px; font-size: 12px; width: 100%; }

/* ── Takım tamamlanma göstergesi (üretim aşamalarına göre %) — liste + plan + takip ── */
.peron-prog { display: flex; align-items: center; gap: 6px; }
.peron-prog-bar { position: relative; flex: 1; min-width: 40px; height: 6px; border-radius: 999px;
    background: var(--track, #e6ebf1); overflow: hidden; }
.peron-prog-fill { position: absolute; left: 0; top: 0; bottom: 0; height: 100%; border-radius: 999px;
    background: var(--pri, #3f74a8); transition: width .25s ease; }
.peron-prog-fill.is-start { background: var(--pri, #3f74a8); opacity: .55; }
.peron-prog-fill.is-done { background: var(--green, #4f9d7f); }
.peron-prog-pct { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text-secondary); min-width: 30px; text-align: right; }
.peron-prog-pct.is-done { color: var(--green, #4f9d7f); }
.po-row-prog { margin-top: 3px; max-width: 100%; }
/* Dar Kalem kolonunda (82px) taşmayı önle: bar+yüzde min genişlikleri hücreye sığar (20+24+6≤58). */
.po-row-prog .peron-prog-bar { min-width: 20px; }
.po-row-prog .peron-prog-pct { min-width: 24px; font-size: 10.5px; }
.plan-card-prog { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* Üretim Siparişleri — toplu seçim kolonu + toplu işlem şeridi */
.peron-table--fixed td.col-check, .peron-table--fixed th.col-check { text-align: center; overflow: visible; padding-left: 6px; padding-right: 6px; }
.peron-table--fixed td.col-check input, .peron-table--fixed th.col-check input { cursor: pointer; width: 16px; height: 16px; }
/* Toplu işlem grubu — sayfa başlığında, "Yeni Üretim Siparişi" yanında kompakt satır içi */
.po-bulkbar { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0; padding: 4px 6px 4px 12px; background: var(--pri-light, #eef3fa);
    border: 1px solid var(--pri, #3f74a8); border-radius: 10px; }
/* display kuralı UA [hidden]{display:none}'ı ezer → seçim yokken JS bar.hidden etkisiz kalmasın */
.po-bulkbar[hidden] { display: none; }
.po-bulkbar-info { font-size: 13px; color: var(--pri-text, #2c4f74); white-space: nowrap; }
.po-bulkbar-info b { font-variant-numeric: tabular-nums; }
.prod-grp-progbar { margin-top: 5px; max-width: 168px; }
html[data-peron-theme="dark"] .peron-prog-bar { background: rgba(255,255,255,.10); }

/* Üretim Takibi akordiyon — malzeme satırları; her malzemenin BAŞINDA ürün grubu çipi */
/* 🔴 1.311.0 — SATIR İÇİ STİLDEN BURAYA TAŞINDI. Önce `font-size:11px` satır içi
   yazılıydı ve satır içi stil token'ı KOŞULSUZ ezer: üretim listesi 1 punto
   küçültülünce (bkz. #prod-shell yoğunluk bloğu) bu satır tek başına eski boyda kalırdı. */
.prod-mod-mats { margin-top: 3px; font-size: var(--tbl-code-fs); color: var(--text-secondary); }
.prod-mod-mats .prod-mat-line { margin-top: 2px; line-height: 1.75; }
.prod-mat-cat { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
    line-height: 1; padding: 2px 6px; border-radius: 999px; background: var(--pri-light, #eef3fa);
    color: var(--pri-text, #2c4f74); border: 1px solid var(--border, #dbe3ec); margin-right: 5px; }
html[data-peron-theme="dark"] .prod-mat-cat { background: rgba(120,160,210,.16); color: #cfe0f2; border-color: rgba(255,255,255,.12); }
.prod-mat-sep { color: var(--text-muted); margin: 0 6px; opacity: .55; }

/* Üretim Takibi akordiyon — SİPARİŞ FİŞİ NOTLARI.
   Genel not (ürün notu + sipariş notu) modül tablosunun ÜSTÜNDE, modül notu ise kendi
   modül satırında durur. İkisi de aynı rozet+metin biçimini kullanır (tek desen).
   🔴 [hidden] kuralları ŞART: açık `display` beyanı UA'nın [hidden]{display:none}
   kuralını ezer → JS `hidden = true` dediğinde boş kutu ekranda kalırdı. */
.prod-acc-notes { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.prod-acc-notes[hidden] { display: none; }
.prod-note-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0;
    padding: 7px 10px; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--r-sm); }
.prod-note-lbl { flex: 0 0 auto; font-size: 10px; font-weight: 700; line-height: 1.5;
    text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px;
    background: var(--pri-light); color: var(--pri-text); border: 1px solid var(--border); }
/* max-width okuma ölçüsüdür: geniş ekranda (1920px) not tek satırda 1800px'e yayılıyordu —
   göz satır başını kaybediyor. Kısa notlar zaten daha dar, kural yalnız uzun notu sınırlar. */
.prod-note-txt { min-width: 0; max-width: 90ch; font-size: 12px; line-height: 1.55;
    color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-peron-theme="dark"] .prod-note-lbl { background: rgba(120,160,210,.16); color: #cfe0f2; border-color: rgba(255,255,255,.12); }
/* ─── ZİL (BİLDİRİM) PANELİ ────────────────────────────────────────────────
   🔴 Panel eskiden TAMAMEN satır içi stille kuruluyordu (`width:400px;right:20px`) ve
   bu dosyada TEK bir kuralı yoktu. Satır içi stil medya sorgusunu EZDİĞİ için mobil
   düzeltme YAZILAMIYORDU: 360-390px telefonda 400px'lik panel ekranın soluna taşıyor,
   başlıkların yarısı kesiliyordu. Kural sınıfa taşındı — masaüstü davranışı BİREBİR
   aynı (top 60 / right 20 / 400px / 540px), mobil karşılığı dosya sonundaki
   "MOBİL SON SÖZ" bloğunda alt-sayfaya dönüşüyor. */
.peron-notif-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(0, 0, 0, .15); }
.peron-notif-panel { position: fixed; top: 60px; right: 20px; width: 400px; max-height: 540px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-modal); z-index: 99999; overflow: hidden;
    display: flex; flex-direction: column; }
.peron-notif-head { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.peron-notif-head-t { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.peron-notif-readall { font-size: 12px; color: var(--pri-text); background: none; border: 0;
    cursor: pointer; padding: 6px 2px; white-space: nowrap; }
.peron-notif-list { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
/* Satır: sabitler burada, severity rengi ve okunmamış zemini satır içinde kalır. */
.peron-notif-panel .peron-notif-item { padding: 14px 20px; cursor: pointer;
    border-bottom: 1px solid var(--border-light); border-left: 3px solid var(--pri); }

/* Zil panelinde "cihaz bildirimini aç" şeridi — yalnız abonelik yokken basılır.
   Panelin gövdesi satır içi stille kuruluyor; bu şerit sınıf tabanlıdır ki gece modu
   ve mobil ölçüleri token/medya ile yönetilebilsin. */
.peron-notif-ac { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    background: var(--pri-light); border-bottom: 1px solid var(--border); }
.peron-notif-ac-ikon { display: inline-flex; flex: 0 0 auto; color: var(--pri-text); }
.peron-notif-ac-txt { flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 1.45;
    color: var(--text-secondary); }
.peron-notif-ac .peron-btn { flex: 0 0 auto; min-height: 34px; }
.peron-notif-ac.is-blok { background: rgba(194, 84, 90, .09); }
.peron-notif-ac.is-blok .peron-notif-ac-ikon { color: var(--rose); }
.peron-notif-ac.is-acik { background: rgba(94, 156, 139, .12); }
.peron-notif-ac.is-acik .peron-notif-ac-ikon { color: var(--green); }

/* Proaktif "bildirimleri aç" çağrısı — ekranın altında, ertelenebilir tek şerit.
   🔴 z-index modal katmanının ALTINDA (modal 99998/99999): bir modal açıkken şerit
   onun üstüne çıkmamalı. Mobil karşılığı "MOBİL SON SÖZ" bloğunda. */
.peron-notif-cta { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
    z-index: 9000; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    width: min(560px, calc(100vw - 32px)); padding: 10px 14px;
    background: var(--card-bg); border: 1px solid var(--pri); border-radius: 12px;
    box-shadow: var(--shadow-modal); }
.peron-notif-cta-ikon { display: inline-flex; flex: 0 0 auto; color: var(--pri-text); }
.peron-notif-cta-txt { flex: 1 1 240px; min-width: 0; font-size: 12px; line-height: 1.45;
    color: var(--text-secondary); }
.peron-notif-cta .peron-btn { flex: 0 0 auto; min-height: 34px; }

/* Modül satırındaki not: aynı desen, satır içi ölçekte (çerçevesiz, daha küçük). */
.prod-mod-note { margin-top: 4px; }
.prod-mod-note[hidden] { display: none; }
.prod-mod-note .prod-note-row { padding: 0; background: none; border: 0; border-radius: 0; gap: 6px; }
.prod-mod-note .prod-note-txt { font-size: 11.5px; color: var(--text-secondary); }

/* Opsiyonel ürünleri ekle şeridi — ürün ağacındaki is_optional modüller için */
.po-optional-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 14px; background: var(--pri-light); border: 1px dashed var(--pri-border, var(--pri)); border-radius: 10px; }
.po-optional-info { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.po-optional-info svg { width: 14px; height: 14px; flex: 0 0 auto; }
.po-optional-info b { color: var(--pri-text); }

/* Opsiyonel ürünler bölümü — eklenen opsiyonel modüller en altta ayrı, çerçeveli blok */
.po-optional-section { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding: 12px; border: 1px dashed #8a6d92; border-radius: 12px; background: rgba(138,109,146,.07); }
.po-optional-section-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a6d92; }
.po-optional-section-head svg { width: 14px; height: 14px; flex: 0 0 auto; }
.po-optional-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #8a6d92; color: #fff; font-size: 11px; font-weight: 700; }
.po-mod--optional { --mod-accent: #8a6d92; --mod-tint: rgba(138,109,146,.12); border-style: dashed; }
.po-opt-tag { font-size: 10px; font-weight: 700; color: #fff; background: #8a6d92; border-radius: 5px; padding: 1px 7px; text-transform: uppercase; letter-spacing: .03em; }

.po-item-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.po-add-module.sm { padding: 5px 8px; font-size: 12px; }
.po-mat-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.po-mat-fixed { font-size: 12px; color: var(--text-primary); }
.po-mat-bound, .po-mat-unbound { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 1px 6px; }
.po-mat-bound { color: var(--green, #5e9c8b); background: rgba(94,156,139,.12); }
.po-mat-bound svg { width: 11px; height: 11px; }
.po-mat-unbound { color: var(--text-muted); background: var(--content-bg); }
.po-var-tag { font-size: 10px; font-weight: 600; color: var(--pri-text); background: var(--pri-light); border: 1px solid var(--pri-border); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.po-mat-attr { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.po-mat-attr .po-attr-cat { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.po-mat-attr .po-mat-attr-sel { max-width: 200px; }
.po-mat-attr .po-attr-badge { font-size: 11.5px; color: var(--text-secondary); background: var(--content-bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.po-mat-attr .po-attr-badge b { color: var(--text-primary); }
.po-mat-attr .po-attr-ek { font-size: 11px; font-weight: 600; color: var(--amber-ink, var(--amber)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-mat-attr .po-attr-ek[hidden] { display: none; }
.po-calc-ek { margin-top: 4px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.po-calc-ek b { color: var(--amber-ink, var(--amber)); font-weight: 600; }

/* Stoktan ürün arama (autocomplete) — komple liste açmaz */
.po-ac { position: relative; min-width: 260px; flex: 1; max-width: 340px; }
.po-ac-input { width: 100%; padding: 5px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; }
.po-ac-list { position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 2px); background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(44,62,53,.12); max-height: 240px; overflow-y: auto; }
/* Altta yer yoksa yukarı açıl (modal en altındaki tedarikçi alanı vb.) */
.po-ac-list.po-ac-up { top: auto; bottom: calc(100% + 2px); box-shadow: 0 -8px 24px rgba(44,62,53,.12); }
.po-ac-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; }
.po-ac-item:hover { background: var(--pri-light); }
.po-ac-name { font-weight: 500; color: var(--text-primary); }
.po-ac-code { font-size: 11px; color: var(--text-muted); margin-left: auto; }
/* Kart kodu seçici satırında ADIN SOLUNDA durur — "kod addan ayrılmaz" kuralı.
   `flex-shrink:0` ŞART: uzun cari adı kodu ezip okunmaz hâle getiriyordu. */
.po-ac-kod { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-secondary);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-ac-empty { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }

/* Fason üretim */
.po-fason-tag { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--amber-ink, #95592b); background: var(--peach-surface, #f7c6a0); border-radius: 5px; padding: 1px 7px; margin-left: 6px; }
.po-item.is-fason { border-color: var(--peach, #be7438); }
.po-fason-firm { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; background: var(--content-bg); border: 1px dashed var(--peach, #be7438); border-radius: 10px; }
.po-fason-firm.sm { margin: 0 0 8px; padding: 6px 10px; }
.po-fason-tag.sm { font-size: 9.5px; padding: 1px 6px; margin-left: 4px; }
.po-fason-hint { font-size: 11.5px; color: var(--text-muted); margin: 0 0 10px; }
.po-mod-fason-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; margin-left: auto; white-space: nowrap; }
.po-mod-fason-toggle input { accent-color: var(--peach, #be7438); }
.po-mod.is-fason { --mod-accent: var(--peach, #be7438); --mod-tint: rgba(190,116,56,.12); border-color: var(--peach, #be7438); border-style: solid; }
.fason-term { max-width: 150px; }
.fason-term.saved { border-color: var(--mint, #5e9c8b); background: var(--mint-surface, #b4d4cd); transition: background .3s, border-color .3s; }
/* 1.435.0 — Fason Alışlar E-Ticaret eki: eylem çubuğu · ürün hücresinin alt satırları · birim fiyat girdisi. */
.fason-etic-bar {
    box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg);
}
.fason-etic-bar[hidden] { display: none; }
.fason-etic-bar__bilgi { min-width: 0; font-size: 12px; line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }
.fason-etic-bar__eylem { display: flex; flex-wrap: wrap; gap: 6px; }
.fason-etic-bar__eylem > .peron-btn { min-height: 30px; }
.fason-etic-bar__eylem > .peron-btn > svg { width: 14px; height: 14px; }
.fason-urun { min-width: 0; }
/* Seçim kutusu genel `.peron-row-cb` ölçüsünde (15px · dokunmatikte 24px); hücrenin tamamı tıklanır. */
#fason-tablo .peron-sel-cell:has(> input) { cursor: pointer; }
.fason-sec, #fason-sec-hepsi { width: 15px; height: 15px; margin: 0; vertical-align: middle; accent-color: var(--pri-text); cursor: pointer; }
/* Ürün adı düğmesi: dolgu + aynı kadar negatif kenar boşluğu → dokunma kutusu ≥24px, satır büyümez (belge zinciri deseni). */
.fason-ayrinti {
    display: block; max-width: 100%; margin: -6px 0; padding: 6px 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 600; text-align: left; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fason-ayrinti:hover { color: var(--pri-text); text-decoration: underline; }
.fason-ayrinti:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.fason-alt { font-size: max(.92em, 9px); line-height: 1.4; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fason-alt--pazar { color: var(--text-secondary); font-weight: 500; }
.fason-fiyat { box-sizing: border-box; width: 100%; max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.fason-fiyat.saved { border-color: var(--mint, #5e9c8b); background: var(--mint-surface, #b4d4cd); transition: background .3s, border-color .3s; }
@media (max-width: 768px) {
    .fason-etic-bar__eylem > .peron-btn { min-height: 36px; }
    .fason-fiyat { font-size: 16px; }
}
@media (pointer: coarse) {
    .fason-sec, #fason-sec-hepsi { width: 24px; height: 24px; }
}

/* ── Üretim Planı (haftalık board) ── */
/* Metin-içi ikon hizalayıcı — emoji yerine iconSVG'yi metin baseline'ına oturtur (kurumsal tutarlılık) */
.tico { display: inline-flex; align-items: center; vertical-align: -2px; }
.tico svg { display: block; }

/* Üst kontroller — masaüstünde TEK satır (hafta-nav + kategori + PDF/etiket aksiyonları) */
.plan-topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.plan-weeknav { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.plan-topbar .plan-cat { width: 168px; min-width: 150px; flex: 0 0 auto; }
/* ── PLAN ARAMASI (1.270.0) ────────────────────────────────────────────────
   Ürün + cari + sipariş no + HAFTA BAŞLIĞI aranır; sonuç ekrandaki haftayı
   değiştirmeden AYRI bir görünüm çizer. */
.plan-search { flex: 0 0 auto; }
.plan-search .peron-input { width: 232px; min-width: 168px; }
/* Başlığı eşleşen haftalar: tıklanınca o haftaya ATLAR (arama kutusu temizlenir). */
.plan-search-weeks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.plan-search-week {
    display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px;
    padding: 8px 14px; cursor: pointer; font-family: inherit; text-align: left;
    border: 1px solid var(--pri); border-radius: 10px; background: var(--pri-light);
    transition: background .12s, border-color .12s;
}
.plan-search-week:hover { background: var(--pri); border-color: var(--pri); }
.plan-search-week:hover .psw-t, .plan-search-week:hover .psw-r, .plan-search-week:hover .psw-n { color: #fff; }
.psw-t { font-size: 13px; font-weight: 800; color: var(--pri-text); }
.psw-r { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.psw-n { font-size: 11.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* "hangi haftanın planında" — gün başlığının içinde, tarihin yanında. */
.plan-search-where {
    margin-left: 10px; font-size: 11.5px; font-weight: 600; color: var(--pri-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* İki tarih arası filtre — masaüstünde tek satır, mobilde tam genişlik sarar */
.plan-daterange { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.plan-daterange .peron-input { width: 148px; min-width: 128px; }
.plan-daterange-sep { color: var(--text-muted); }
@media (max-width: 640px) {
    .plan-topbar { width: 100%; justify-content: flex-start; }
    .plan-topbar .plan-cat { flex: 1 1 160px; width: auto; }
    /* 🔴 flex-wrap ŞART: min-width:0 verilse bile <input type="date"> UA'dan gelen
       içsel minimumla (~120px) durur; iki tarih + ayraç + Ara + Temizle 360px ekranda
       370px yer istiyor ve .peron-content'i 20px yatay kaydırıyordu (ölçüldü). */
    .plan-daterange { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; }
    .plan-daterange .peron-input { flex: 1 1 130px; width: auto; min-width: 0; }
    .plan-daterange-sep { display: none; }
}

/* Board grid — mobile-first, temiz kırılım (kötü sarma yok) */
/* Üretim Planı — günler DİKEY yığın; her gün TAM GENİŞLİK yatay bant. Gün içi kalemler
   kompakt yan-yana kutucuk grid'inde (satırda ~10, taşarsa sarar) → uzun dikey liste yok. */
.plan-board { display: flex; flex-direction: column; gap: 10px; }
.plan-day { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(27, 37, 51, .04); }
.plan-day.is-today { border-color: var(--pri-border); box-shadow: 0 0 0 1px var(--pri-border), 0 1px 3px rgba(63, 116, 168, .16); }
.plan-day-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--content-bg); border-bottom: 1px solid var(--border); }
.plan-day.is-today .plan-day-head { background: var(--pri-light); }
.plan-col-head--click { cursor: pointer; transition: background .15s; }
.plan-col-head--click:hover { background: var(--sb-plan-hover); }
.plan-day-head-main { display: flex; align-items: baseline; gap: 8px; min-width: 96px; flex: none; }
.plan-day-name { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.plan-day.is-today .plan-day-name { color: var(--pri-text); }
.plan-day-date { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.plan-day-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 21px; padding: 0 6px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pri-on); background: var(--pri-strong); border-radius: 999px; flex: none; }
.plan-day-count.is-zero { color: var(--text-muted); background: transparent; border: 1px solid var(--border); }
/* 🦷 BOSLUK 4 -> 6px (1.365.0): kullanicinin esik tablosu komsu dokunma hedefleri
   arasi >= 6px istiyor. Bedelsiz karsilandi — ayni turda `.peron-icon-btn` 44'ten kendi
   28px tabanina dondugu icin hucrede 32px bosaldi, 2px'i buraya gitti. */
.plan-day-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
/* İkon butonu — CSS'i tanımsızdı: SVG (yalnız viewBox) boyutsuz kalıp 4px'lik dikey çizgiye
   çöküyordu. Buton + SVG boyutlandırılır → gün sağındaki "uzun çizgi" giderilir. */
.peron-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; flex: none; border: 1px solid var(--border); background: var(--card-bg); border-radius: 7px; color: var(--text-secondary); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.peron-icon-btn:hover { background: var(--pri-light); border-color: var(--pri-border); color: var(--pri-text); }
.peron-icon-btn svg { width: 16px; height: 16px; }
.plan-day-head .plan-add { flex: none; }
.plan-day-label { flex: none; color: var(--pri); }
.plan-day-label:hover { background: var(--pri-light); }
/* Gün detayı / ürün detayı — dikey kompakt bloklar (Kategori/Durum yok; cari+müşteri belirgin) */
.pd-blocks { display: flex; flex-direction: column; gap: 9px; }
.pd-block { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card-bg); }
.pd-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pd-block-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pd-block-no { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; padding: 0 5px; background: var(--pri-strong); color: var(--pri-on, #fff); border-radius: 6px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-block-name { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.pd-block-code { font-size: 11px; color: var(--text-muted); font-family: 'Courier New', monospace; }
.pd-block-due { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pd-block-due .pd-due-lbl { text-transform: uppercase; font-size: 10px; letter-spacing: .03em; margin-right: 5px; }
.pd-block-due b { color: var(--pri-text); font-weight: 700; }
.pd-parties { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 9px; }
.pd-party-lbl { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-right: 7px; }
.pd-party-val { font-size: 13px; font-weight: 700; color: var(--pri-text); }
.pd-block-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.pd-block-meta b { color: var(--text-primary); font-weight: 600; }
.pd-mods { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 7px; }
.pd-mod-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pd-mod-name { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.pd-mod-qty { font-size: 11.5px; color: var(--pri-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-mod-fason { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--amber-ink); background: var(--peach-surface); border: 1px solid var(--amber-border); border-radius: 5px; padding: 1px 6px; }
.pd-mod-mats { margin-top: 2px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
/* Hammadde grubu başlığı (sipariş ekranındaki "Ürün Grubu") — modül hammaddelerinin üstünde */
.pd-matgrp:not(:first-child) { margin-top: 5px; }
.pd-matgrp-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.pd-mat:not(:last-child)::after { content: ' · '; color: var(--border); }
.pd-mat-attr { color: var(--text-muted); opacity: .85; }
.pd-mod-none { font-size: 12px; color: var(--text-muted); font-style: italic; }
.plan-detail-foot { padding: 10px 4px 2px; font-size: 12px; color: var(--text-secondary); text-align: right; }
.plan-detail-weektitle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); background: var(--pri-light); border: 1px solid var(--pri-border); border-radius: 8px; padding: 7px 13px; margin-bottom: 12px; }
.plan-detail-weektitle::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pri); flex: none; }

/* Haftalık plan başlık çubuğu (manuel girilir) — etiketli alan, emoji yok */
.plan-week-titlebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
.plan-week-titlebar-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.plan-week-titlebar-ico { display: inline-flex; color: var(--pri-text); }
.plan-week-titlebar-ico svg { width: 15px; height: 15px; }
.plan-week-title-input { flex: 1; min-width: 200px; max-width: 520px; height: 36px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--content-bg); border: 1px solid var(--border); border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.plan-week-title-input:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-light); }
.plan-week-titlebar--ro { gap: 8px; }
.plan-week-titlebar-text { font-size: 15px; font-weight: 600; color: var(--text-primary); }
/* Boş gün — başlıkta satır-içi (ayrı gövde yok → 6 boş gün dikey yer harcamaz). */
.plan-day-empty-inline { font-size: 12px; color: var(--text-muted); margin-left: 2px; }
/* Gün gövdesi — kompakt kutucuk grid'i: satırda otomatik ~10-11 (auto-fill), taşarsa alt satıra sarar. */
.plan-day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 9px 10px; }

/* Kompakt çip — ad(2 satır) + miktar + durum noktası + ince ilerleme. Ayrıntı tıklamada modalde. */
.plan-card { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 66px; padding: 7px 8px 8px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .14s; }
.plan-card:hover { border-color: var(--pri-border); box-shadow: 0 3px 10px rgba(63, 116, 168, .15); transform: translateY(-1px); z-index: 1; }
.plan-chip-main { display: flex; align-items: flex-start; gap: 5px; }
.plan-card-dot { width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; background: var(--pri); flex: none; }
/* Ana satır artık CARİ adı (kullanıcı isteği: cari en üstte, büyük). */
.plan-chip-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; line-height: 1.25; color: var(--text-primary); letter-spacing: -.01em; padding-right: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Müşteri + Ürün alt satırları — cari altında sırayla (kullanıcı isteği: cari > müşteri > ürün). */
.plan-chip-sub { padding-left: 13px; font-size: 10.5px; line-height: 1.3; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-chip-cust { color: var(--text-secondary); }
.plan-chip-prod { color: var(--text-muted); }
.pcs-lbl { display: inline-block; font-size: var(--m-fs-micro, 9px); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-right: 4px; }
.plan-chip-qty { font-size: 11px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; padding-left: 13px; }
.plan-chip-qty .pcq-unit { font-weight: 500; color: var(--text-muted); }
.plan-chip-prog { display: block; height: 3px; margin-top: auto; border-radius: 999px; background: var(--border-light); overflow: hidden; }
.plan-chip-prog-fill { display: block; height: 100%; border-radius: 999px; background: var(--pri); }
.plan-chip-prog-fill.is-done  { background: var(--green); }
.plan-chip-prog-fill.is-start { background: var(--amber); }
.plan-card-menu-btn { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 6px; color: var(--text-muted); cursor: pointer; opacity: .35; transition: opacity .12s, background .12s, color .12s; }
.plan-card:hover .plan-card-menu-btn { opacity: 1; }
/* 🔴🔴 DOKUNMA HEDEFI TABANIN ALTINDAYDI (1.364.0 tasarim denetimi).
   OLCULDU 768 ve 1024px: 22x22px — mutlak taban 24x24 (WCAG 2.2 AA 2.5.8).
   🔴 KUTU BUYUTULMEDI. Bu projenin yerlesik deseni psodo ile hedefi genisletmektir
      (`.gl-fisno::after`, `.peron-mob-filter-pill::after`). Gorsel 22px kalir, hedef
      28x28 olur — hem taban hem yogun yuzey esigi karsilanir, hicbir sey buyumez.
   🔴 Dugme `position: absolute` oldugu icin psodo ona gore konumlanir; kartin
      kendi tiklamasini calmamasi icin yalniz 3px tasar. */
.plan-card-menu-btn::after { content: ""; position: absolute; inset: -3px; }
.plan-card-menu-btn:hover { background: var(--content-bg); color: var(--text-primary); }
.plan-card-menu-btn svg { width: 15px; height: 15px; }
@media (hover: none) { .plan-card-menu-btn { opacity: .6; } }
html[data-peron-theme="dark"] .plan-chip-prog { background: rgba(255,255,255,.08); }
.plan-card.status-devam      .plan-card-dot { background: var(--amber); }
.plan-card.status-tamamlandi .plan-card-dot { background: var(--green); }
.plan-card.status-iptal      .plan-card-dot { background: var(--text-muted); }
.plan-card.status-iptal { opacity: .6; }
.plan-card.status-iptal .plan-chip-name { text-decoration: line-through; text-decoration-color: var(--border); }

/* Plan tarihi DEĞİŞTİRİLMİŞ kart — amber ton + kalıcı uyarı satırı (kim · ne zaman değiştirdi) */
.plan-card-rescheduled { background: rgba(190,116,56,.09); border-color: var(--amber-border, rgba(190,116,56,.35)); }
.plan-card-rescheduled:hover { border-color: var(--amber-ink); box-shadow: 0 3px 10px rgba(190,116,56,.18); }
.plan-chip-resched { display: flex; align-items: flex-start; gap: 4px; margin: 0 0 2px; padding: 3px 20px 3px 5px; background: rgba(190,116,56,.14); border-radius: 5px; font-size: 9.5px; line-height: 1.3; color: var(--amber-ink); font-weight: 600; }
.plan-chip-resched svg { width: 12px; height: 12px; flex: none; margin-top: 1px; }
.plan-chip-resched .pcrs-txt { min-width: 0; }
.plan-chip-resched .pcrs-txt b { font-weight: 800; }

/* BAŞKA HAFTAYA taşınmış kart — kullanıcı isteği: pastel kırmızı FONT.
   Aynı hafta içi gün kaydırması amber kalır; yalnız hafta değişimi kırmızıdır.
   🔴 .plan-card-rescheduled ile aynı özgüllükte (0,1,0) → SONRA gelmeli, yoksa amber
   zemin kırmızı yazının altında kalıp okunmaz görünürdü.
   🔴 Alt öğeler kendi rengini tanımlıyor → tek tek ezilir; karta color vermek yetmez.
   --rose-ink beyazda 5.49:1, gece modunda otomatik parlak tona düşer (AA).
   🔴 Zemin AMBER'DEN NÖTRE çekilir (pembeye DEĞİL): PDF'te de zemin yok, yalnız yazı
   kırmızı — ekran ile çıktı aynı görünmeli. Amber bırakılsaydı kırmızı yazı turuncu
   zeminde kalıp kontrastı 4.30'a düşürüyordu (AA sınırı 4.5). */
.plan-card-moved { background: var(--card-bg); border-color: var(--rose-surface-border); }
.plan-card-moved:hover { border-color: var(--rose-ink); box-shadow: 0 3px 10px rgba(194,84,90,.18); }
.plan-card-moved .plan-chip-name,
.plan-card-moved .plan-chip-sub,
.plan-card-moved .plan-chip-cust,
.plan-card-moved .plan-chip-prod,
.plan-card-moved .plan-chip-qty,
.plan-card-moved .pcs-lbl,
.plan-card-moved .plan-chip-qty .pcq-unit { color: var(--rose-ink); }
/* Uyarı satırı: zemin ROSE-SURFACE, kart zemini artık nötr olduğu için üst üste binmiyor
   → efektif kontrast 4.85 (açık) / 4.61 (koyu), AA geçer. */
.plan-card-moved .plan-chip-resched { background: var(--rose-surface); color: var(--rose-ink); }

/* Kart seçenek menüsü (kebab popover) */
.plan-card-menu { position: fixed; z-index: 100001; min-width: 216px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-modal); padding: 6px; }
.pcm-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: none; background: transparent; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-primary); text-align: left; transition: background .12s; }
.pcm-item:hover { background: var(--pri-light); }
.pcm-item svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.pcm-item.danger { color: var(--rose-ink); }
.pcm-item.danger svg { color: var(--rose-ink); }
.pcm-item.danger:hover { background: var(--rose-surface); }
.peron-badge.sm { font-size: 10px; padding: 1px 6px; }

/* ── Yeni Sipariş — sütun (kart) bazlı giriş ── */
/* Her sipariş = yatay satır; satırlar alt alta dizilir */
.no-cols-wrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; }
.no-col { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.no-col.no-col-filled { border-color: var(--pri); box-shadow: 0 1px 8px rgba(168, 93, 103, .12); }
.nc-rownum { align-self: center; min-width: 22px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.nc-f { display: flex; flex-direction: column; gap: 3px; }
.no-col-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.nc-f-no   { width: 92px; }
.nc-f-date { width: 150px; }
.nc-f-prod { flex: 1; min-width: 220px; }
.nc-f-qty  { width: 92px; }
.nc-f-unit { width: 70px; }
.nc-f-firm { width: 180px; }
.nc-f-note { flex: 1; min-width: 150px; }
/* 1.415.2 — isabet kutusu 25×22 → yoğun yüzey tabanı 28×28 (glif aynı boyda kalır). */
.no-col-remove { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; align-self: center; border: 0; background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 6px; }
.no-col-remove:hover { color: var(--rose); background: rgba(194, 84, 90, .1); }
.no-col .nc-pick-btn { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--content-bg); border-radius: 8px; padding: 7px 10px; font-size: 12px; cursor: pointer; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-col .nc-pick-btn:hover { border-color: var(--pri); }
.no-col .nc-unit-box { border: 1px solid var(--border); background: var(--border-light); border-radius: 8px; padding: 7px 8px; font-size: 12px; color: var(--text-muted); text-align: center; }
.no-cols-footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ── Satınalma tablosu (sütun içi düzenleme) ── */
.pur-table td { vertical-align: top; }
.pur-table th, .pur-table td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
/* Tüm tabloda kompakt font (kullanıcı: yazı karakterlerini küçült, hiçbir yerde kesme). */
.pur-table th { font-size: 10px; }
.pur-table td { font-size: 11.5px; }
/* ── TEDARİKÇİ HÜCRESİ — düğme BAŞTA, ad kalan alanın tamamında ────────────────
   🔴 Kullanıcı: "tedarikçi değiştirme butonu da yazının sonuna değil BAŞINDA
      düzenli şekilde dursun". Sonda dururken düğmenin x'i her satırda ADIN
      UZUNLUĞUNA göre kayıyor, iki satıra sarmış adlarda ikinci satırın altına
      düşüyordu. Başta + flex ile TÜM satırlarda aynı x'te sabit bir şerit olur ve
      sarma yapan adın ikinci satırı da düğmenin değil ADIN sol kenarına hizalanır
      (`flex` çocuğu kendi kutusunda sarar; satır içi akışta ikinci satır düğmenin
      altına geçerdi).
   🔴 TEK flex `<td>`: komşuları (Kritik / Talep Eden — recv düzeninde Stok /
      Talep Eden) flex DEĞİL. "Ardışık flex td'ler Chrome'da tek anonim hücrede
      toplanıp satırı 32→64px yapıyor" tuzağı (bkz. .pur-rqty ve Durum/Termin
      notları) yalnız YAN YANA iki flex hücrede doğar; burada doğmaz.
   🔴 `height` DEĞİL `min-height`: uzun ad iki satıra sarabiliyor. Sabit `height`
      flex kapta KESİN yükseklik demektir ve üçüncü satır hücreden taşardı;
      `min-height` yoğunluk sözleşmesini korur, güvenlik supabını da bırakır. */
/* 🔴🔴 HÜCRE FLEX YAPILMADI — DENENDİ VE ÖLÇÜLDÜ: `display:flex` verilince 27/27
   satır 33 → 35px'e çıkıyordu (Chrome flex `<td>` için anonim tablo hücresi üretir;
   dosyada Durum/Termin ve Gelen/Sipariş hücrelerinde aynı tuzağın daha ağır hâli
   yazılı). Aynı görsel sonuç satır-içi kutularla, satır boyunu HİÇ değiştirmeden
   elde ediliyor:
     · düğme ve ad `vertical-align: middle` ile aynı çizgide,
     · ad `inline-block` → SARARSA ikinci satırı kendi kutusunun sol kenarına
       hizalar (düz satır-içi akışta düğmenin altına geçerdi — asıl "düzensiz" olan buydu),
     · `max-width: calc(100% - 27px)` düğmenin yerini ayırır (20px kutu + 5px boşluk
       + 2px emniyet) → ad hiçbir satırda düğmenin üstüne binmez. */
.pur-supplier-edit { vertical-align: middle; }
/* 🔴 Seçici (0,3,0): aşağıdaki `.pur-supplier-cell .pur-ell { max-width: none }`
   kuralı BU SATIRDAN SONRA geliyor ve eşit özgüllükte olsaydı `max-width`i ezerdi. */
.pur-supplier-cell .pur-ell.pur-supplier-name {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 27px);
    font-size: 11.5px;
    color: var(--text-primary);
    line-height: 1.3;
}
/* Düğme yoksa (kilitli satır) yerini BOŞ YUVA tutar — yoksa o satırların adı 25px
   sola kayar ve kolon dağınık görünürdü. Yuva YALNIZ karma tabloda basılır (bkz.
   `supEditVar`, peron-mod-orders.js); hiçbir satırın düğmesi olamayacağı listede
   ad kolonun TAMAMINI kullanır. */
.pur-supplier-gap { display: inline-block; width: 20px; margin-right: 5px; vertical-align: middle; }
.pur-supplier-cell .pur-ell.pur-supplier-name--full { max-width: 100%; }
/* 🔴 FİRMA ADI KÜÇÜLTÜLDÜ (kullanıcı: "firma isimlerinin yazılarını küçült, daha
   uzun kelimeler yan yana sığsın"). YALNIZ masaüstü-fare rejiminde: dokunmatikte
   11.5px zaten okunabilirlik tabanıdır ve orada tablo yatay kayabiliyor. */
@media (min-width: 769px) and (pointer: fine) {
    .pur-supplier-cell .pur-ell.pur-supplier-name { font-size: 10.5px; }
}
/* 🔴 "değiştir" YAZISI SİMGEYE ÇEVRİLDİ (kullanıcı isteği): metin ~48px yer kaplıyordu
   ve tedarikçi adını ikinci satıra itiyordu; simge 20px. Kazanılan yer Tedarikçi
   kolonunun adına gitti. Erişilebilirlik korundu: `aria-label` + `title` var, dokunmatik
   44px hedefi aşağıdaki `::after` bloğundan geliyor (metin kaldırıldı diye küçülmedi). */
.pur-supplier-edit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: 0 0 auto;
    border: 0; background: transparent; color: var(--text-muted);
    cursor: pointer; padding: 0; border-radius: 5px;
    transition: background .12s, color .12s;
}
.pur-supplier-edit svg { width: 13px; height: 13px; }
.pur-supplier-edit:hover { color: var(--pri-text); background: var(--pri-light); }
.pur-supplier-edit:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
/* 🔴 `margin-top` KALDIRILDI: akordeon paneli artık TEK SATIR flex şeridi; üst boşluk
   düğmeyi hizadan düşürüyordu. Dikey hizayı şeridin `align-items:center`i verir. */
/* 🔴 ÖLÇÜLDÜ: kutu 142×23px idi — WCAG 2.2 SC 2.5.8 (Target Size Minimum, AA)
   24×24 CSS px ister, 1px eksikti; punto da projenin 10 punto (≈13px) tabanının
   altındaydı. 28px, şeridin 36px yüksekliğine (36 − 2×4px dolgu) tam oturur. */
.pur-revert-btn { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; min-height: 28px; border: 1px solid var(--amber); background: rgba(190, 116, 56, .1); color: var(--amber); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 10px; border-radius: 6px; transition: background .12s, color .12s; }
.pur-revert-btn:hover { background: var(--amber); color: #fff; }
.pur-revert-btn:disabled { opacity: .5; cursor: default; }
.pur-table .pur-date { max-width: 130px; }

/* ── Satınalma "daha düzenli" — sayısal sağ hiza + ölçülü dolgu + grup ayırıcı ── */
/* Sayısal başlık ve veri aynı sağ kenara hizalanır (taban pur-table'da col-num sağ
   hizası yoktu → başlık/rakam kayması giderilir). */
.pur-table th.col-num,
.pur-table td.col-num { text-align: right; }
.pur-table td.col-num { font-variant-numeric: tabular-nums; }

/* Ölçülü yatay dolgu (13px → 10px → 8px) — yalnız sol/sağ, satır yüksekliği korunur;
   12 kolon az/hiç yatay kaydırmayla sığar. Checkbox hücresi kendi padding'ini korur.
   8px'e iniş ÖLÇÜLDÜ: Satınalma 13 kolon × 2 × 2px = 52px geri kazanır; bu 52px
   Ürün/Tedarikçi/Talep Eden kolonlarına gidince metin sarması (satır 45px) biter.
   🔴 Seçici `> thead > tr > th` / `> tbody > tr > td` (0,1,3) YAZILMAK ZORUNDA: dosya
      sonundaki `@media (min-width:769px) and (pointer:fine){ .peron-table td{padding:6px 10px} }`
      bloğu (0,1,1) DAHA SONRA geldiği için eşit özgüllükte olan `.pur-table td`'yi eziyordu
      (ölçüldü: hücre dolgusu 8px değil 10px kalmıştı, kolon bütçesi 4px/kolon şaşıyordu). */
.pur-table > thead > tr > th,
.pur-table > tbody > tr > td { padding-left: 8px; padding-right: 8px; }

/* Mantıksal grup sınırlarına ince dikey ayırıcı — .col-num koşusunun başladığı/bittiği
   yerler: [Talep No·Ürün] | [Miktar·Stok·Rezerve·Kritik] | [Tedarikçi·Talep Eden] |
   [Birim Fiyat·Tutar] | [Durum·Termin]. Sınıf/nth-child yerine bitişik-kardeş seçici →
   enjekte edilen checkbox sütunundan ve reconciler imza-hash'inden bağımsız çalışır. */
.pur-table td:not(.col-num) + td.col-num,
.pur-table td.col-num + td:not(.col-num) { border-left: 1px solid var(--border-light); }
.pur-table thead th:not(.col-num) + th.col-num,
.pur-table thead th.col-num + th:not(.col-num) { border-left: 1px solid rgba(255, 255, 255, 0.16); }

/* Durum select — eski min-width:150px kolonu taşırıp yatay kaydırma yaratıyordu.
   .peron-select tabanı width:100% olduğundan select kendi içeriğini talep etmez ve
   auto-layout Durum kolonunu aç açlıkta bırakır → uzun metin kırpılırdı. Çözüm: en
   uzun durum etiketini ("Sipariş Onaylandı") sığdıran ölçülü bir min-width (150→112→100),
   inline max-width:132px sınırı korunur. Kolon starve olmaz, metin kırpılmaz, ~38px
   kaydırma geri kazanılır. 100'e iniş: --tbl-code-fs 10.5px'te en uzun etiket
   ("Sipariş Onaylandı") 78px + ok 22px = 100px — kırpma sınırında değil, TAM sığar. */
.pur-table .pur-status-sel { min-width: 100px; }

/* ── TEK-SATIR ÖZET + AKORDEON — her sipariş tek temiz satır (tüm kolonlar + satır-içi
   düzenleme görünür); ürün kodu/kaynak sipariş/notlar gibi ikincil bilgiler akordeon
   detayında. Kullanıcı: "alt alta yazı olmasın, herşey standart olsun". ── */
.pur-grp-row.is-expandable { cursor: pointer; }
.pur-grp-row > td { white-space: nowrap; vertical-align: middle; }
/* Metin hücreleri KESİLMESİN: ürün/tedarikçi/talep-eden hücreleri sarabilir (kullanıcı:
   yarıda kesilen metin istemiyorum) — özet satırın nowrap'i bu hücrelerde ezilir. */
.pur-grp-row > td.pur-prod,
.pur-grp-row > td.pur-supplier-cell,
.pur-grp-row > td.pur-req { white-space: normal; }

/* ── İKİ SATIR DA 32px'E SIĞSIN (yoğunluk sözleşmesi + "kırpma yok" birlikte) ──────
   ÖLÇÜLDÜ (1366px, gerçek veri): Satınalma satırı 45px, Sipariş Yönetimi 47px idi.
   Sınırlayıcı DOLGU DEĞİL, sarmış metnin satır kutusuydu: "Sistem Yöneticisi" 88px'lik
   kolonda 2 satıra düşüyor (35px) + 2×3px dolgu = 41px → satır 45px.
   Kırpmak yasak olduğuna göre tek çıkış, İKİ SATIRIN 32px'e SIĞMASI:
       satır boşluğu 1.2 × 12px   = 14.4px ×2 = 28.8px ≤ 32 ✓
       satır boşluğu 1.2 × 11.5px = 13.8px ×2 = 27.6px ≤ 32 ✓  (ürün adı)
   Tek satırlık hücreler zaten `height: var(--tbl-row-h)` tabanına oturduğu için dolgunun
   1px'e inmesi ONLARDA HİÇBİR ŞEY DEĞİŞTİRMEZ (32px taban zaten içeriğin üstünde).
   Üç+ satırlık patolojik içerik hâlâ satırı büyütür — güvenlik supabı korunur.
   🔴 Özgüllük (0,2,3): dosya sonundaki sözleşme kuralı (0,1,3) yazımlı; dolguyu ancak
      ondan YÜKSEK özgüllükle geri alabiliriz (!important kullanılmaz). */
.peron-table > tbody > tr.pur-grp-row > td {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
}

/* Metin hücreleri — max-width kaldırıldı + normal sarma → HİÇ kırpma yok (tam ad görünür). */
.pur-ell { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.pur-prod .pur-ell { display: block; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-weight: 500; font-size: 11.5px; line-height: 1.2; }
.pur-supplier-cell .pur-ell { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.pur-req .pur-ell { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 11px; color: var(--text-secondary); }
.pur-muted { color: var(--text-muted); }

/* Talep No / Tarih — chevron + numara + tarih YAN YANA tek satır. Numara KIRPILMAZ
   (kullanıcı: hiçbir yerde yarıda kesme): yeni 5 haneli no rahat sığar; nadir uzun
   eski "SAT-…" no'lar kolonu bir miktar genişletir (tablo yatay kaydırılabilir). */
/* 🔴 GÜVENLİK SUPABI — artık HER İKİ ekranda (eskiden yalnız .ord-table'da tanımlıydı):
   numara kolona sığmazsa KIRPILMAZ, önce tarih alt satıra iner, gerekirse numara kendi
   içinde sarar. Kolon genişlikleri ölçülen EN UZUN numaraya göre verildiği için bugünkü
   veride hiç tetiklenmez; ileride daha uzun bir numara gelirse satır büyür ama tek
   karakter bile gizlenmez. */
.pur-idwrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; row-gap: 2px; max-width: 100%; min-width: 0; vertical-align: middle; }
.pur-idno { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; font-family: var(--mono, ui-monospace, "SFMono-Regular", monospace); font-size: 11px; font-weight: 700; color: var(--text-primary); }
.pur-iddate { flex: none; font-size: 10px; color: var(--text-muted); }

/* Akordeon chevron — hafif; is-open'da döner + dolar. */
/* margin-right KALDIRILDI: .pur-idwrap zaten gap:4px veriyordu → chevron ile numara
   arasında 8px oluşuyor ve o 4px numaranın alanından çalınıyordu (ölçüldü). */
.pur-acc-toggle {
    flex-shrink: 0; width: 22px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    border: 1px solid transparent; border-radius: 6px; background: transparent;
    color: var(--text-secondary); cursor: pointer; line-height: 1;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.pur-acc-toggle svg { width: 14px; height: 14px; }
.pur-grp-row.is-expandable:hover .pur-acc-toggle { color: var(--pri-text); }
.pur-grp-row.is-open .pur-acc-toggle { transform: rotate(90deg); background: var(--pri-strong); color: #fff; border-color: var(--pri); }
.pur-grp-row.is-open > td { background: var(--pri-light) !important; }

/* Miktar hücresi — input + birim + lot ikonu (yalnız logo) tek satır.
   🔴 1.258.0'DA GENİŞLETİLDİ. Eski 52px (fare) DEĞERİ KIRPIYORDU: ölçüldü, "600"
      yazılınca girdi 53px istiyor ama iç genişlik 50px kalıyordu — kullanıcı ekranda
      "20C" / "70C" görüyordu. Kolon 123→118px'e indi ama fazlalık artık ORANSAL
      dağıtımdan geliyor (bkz. colgroup notu), o yüzden hücrede yer var:
          fare  70 + 7 + 22(birim) + 26(lot) = 125 ≤ 129px (ölçülen kolon)
          dokunmatik 76 + 7 + 22 + 26        = 131 ≤ 132px
      Yeni kutu 6 haneli miktarı ("999999") kırpmadan gösterir. */
.pur-qtycell .pur-qty { width: 76px; text-align: right; }
.pur-qtycell .pur-qtyval { font-weight: 600; }
.pur-unit { color: var(--text-muted); font-size: 10.5px; margin: 0 3px 0 4px; }
/* 🔴 LOT DÜĞMESİ ve BOŞ YUVASI BİREBİR AYNI KUTU (22px). Eskiden düğme dolgudan
   doğal genişlik alıyordu (~24px) ve ürünsüz satırda hiç basılmıyordu; iki durum
   arasındaki fark miktar hücresindeki HER ŞEYİ kaydırıyordu. Sabit kutu, iki
   düzende de (taban `.pur-qtycell` flex · "Teslim Alındı" `.pur-rqty` satır içi)
   hizayı garanti eder. */
.pur-lot-icon {
    display: inline-flex; align-items: center; justify-content: center;
    /* 🔴 `border-box` BEYAN EDİLMEK ZORUNDA: dosyada global sıfırlama yok, kenarlık
       `width`in ÜSTÜNE ekleniyordu → düğmeli satır 24px, boş yuvalı satır 22px ve
       "Gelen" sütununda rakamın sağ kenarı 1,8px oynuyordu (60 satırda ölçüldü). */
    box-sizing: border-box;
    width: 22px; height: 20px; padding: 0;
    border: 1px solid var(--border); background: var(--content-bg); border-radius: 5px;
    font-size: 12px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.pur-lot-gap { display: inline-block; width: 22px; height: 1px; vertical-align: middle; }
.pur-lot-icon:hover { background: var(--pri-light); border-color: var(--pri); }

/* Birim Fiyat hücresi — input + para birimi.
   🔴 1.258.0'DA GENİŞLETİLDİ. Eski 58px (fare) KIRPIYORDU: ölçüldü, "1200" değerinde
      girdi 58px istiyor, iç genişlik 56px kalıyordu → ekranda "334:" gibi yarım sayı.
      Yeni: fare 74 + 3 + 14(para birimi) = 91 ≤ 103px (ölçülen kolon)
            dokunmatik 80 + 3 + 14        = 97 ≤ 105px
      Binlik ayraçlı 7 karakterlik fiyatı ("134.500") kırpmadan gösterir. */
.pur-amt .pur-price { width: 80px; text-align: right; }

/* ── MİKTAR ve BİRİM FİYAT hücresi: girdi ALANI DOLDURUR (sabit genişlik DEĞİL) ──
   🔴 Sabit px genişlik bu iki hücrede yapısal olarak yanlıştı: kolon genişliği
      değiştiğinde (oransal dağıtım, fiyat gizleme, dar ekran) girdi ya kırpıyor ya
      boşluk bırakıyordu. Ölçülen son hâli: hücre içeriği 137px, kullanılabilir 125px
      → 13 satırda taşma; aynı anda 6 haneli miktar da kırpılıyordu.
   Çözüm: hücre flex olur, birim etiketi ve lot düğmesi doğal boyunda kalır, GİRDİ
   kalan alanın TAMAMINI alır. Böylece kolon genişliği ne olursa olsun ne taşma ne
   boşluk kalır — kullanıcının "bu alanı komple kullan" isteğinin yapısal karşılığı.
   🔴 ÖZGÜLLÜK TUZAĞI: `#pur-shell.prices-hidden .pur-amt { display: none }` (1,2,1)
      fiyat gizleme kuralıdır. Buradaki seçici (0,2,1) BİLEREK onun ALTINDA tutuldu;
      `#pur-shell` öneki eklenirse (1,3,2) gizleme kuralını EZER ve `stok.fiyat_gizle`
      izinli kullanıcıya fiyatlar geri gelir. Önek EKLEME.
   🔴 `td.pur-amt` hem Birim Fiyat hem TUTAR hücresinde var; Tutar'ın iki satırlı
      döviz gösterimi (tutar + "≈ TL karşılığı") flex'e alınırsa bozulur →
      `:not(.pur-total-cell)` ile ayrıldı. */
td.pur-qtycell,
td.pur-amt:not(.pur-total-cell) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: var(--tbl-row-h);
}
/* ── MİKTAR HÜCRESİ 1.272.0'DA YENİDEN KURULDU — "sayılar aynı hizada olmalı" ──
   🔴 KÖK NEDEN ÖLÇÜLDÜ, TAHMİN EDİLMEDİ: hücre SAĞA yaslıydı (`flex-end`) ve girdi
      `flex: 1 1 auto` ile kalan alanı yiyordu. Girdinin SAĞ kenarı, sağındaki iki
      öğenin genişliğinin toplamıyla belirleniyordu — ve o toplam SATIRDAN SATIRA
      DEĞİŞİYORDU: birim etiketi doğal genişlikteydi ("mt" 13px ↔ "paket" 26px) ve
      lot düğmesi ürünsüz satırda HİÇ basılmıyordu (−24px). Yani rakamların bittiği
      x, satırın BİRİM ADINA ve ürünü olup olmamasına göre 0–37px oynuyordu.
      Kullanıcının "düzensiz" dediği şey buydu; sorun yazı tipi ya da hizalama
      beyanı değil, DEĞİŞKEN SAĞ KENARDI.
   ÇÖZÜM: hücre SOLDAN hizalanır ve girdi SABİT genişliktedir → girdinin kutusu her
   satırda aynı [sol, sol+62px] aralığında durur; metin kutunun içinde sağa yaslı
   olduğu için rakamlar TÜM satırlarda aynı x'te biter. Birim ve lot düğmesi ondan
   sonra gelir, yani onların genişliği artık rakamı ETKİLEMEZ.
   🔴 Burada "girdi alanı komple kullansın" kuralı BİLEREK terk edildi: o kural
      hizayı sağlayamaz, çünkü kalan alanı doldurmak demek satırdan satıra farklı
      genişlik demektir. Kolon da bu yüzden daraltılabildi (bkz. colgroup notu).
   🔴 62px ölçüyle seçildi: 11.5px Inter'de altı rakam ("100000") ≈ 41px + 12px
      yatay dolgu + 3px kenarlık = 56px → 62px'te kırpma sınırının 6px üstünde.
      Kullanıcı kuralı "en fazla 100.000 miktar sığacak kadar". */
td.pur-qtycell {
    justify-content: flex-start;
    gap: 2px;
}
/* 🔴 ÖZGÜLLÜK TUZAĞI — ÖLÇÜLDÜ, İLK YAZIMDA BU YÜZDEN TAŞIYORDU. Dolgu `.pur-table
   > tbody > tr > td` (0,1,3) kuralından geliyor ve 8px; `td.pur-qtycell` (0,1,1)
   onu EZEMEZ. Kısa dolgu yazılmış ama ÖLÜYDÜ: hücrenin iç alanı 114px değil 108px
   kalıyor, çocuklar 114px istiyor ve lot düğmesi 27/27 satırda Stok hücresinin
   üstüne 7px (5 harfli birimde 8,7px) taşıyordu. `td.scrollWidth` bunu YAKALAMAZ —
   flex kapta taşan çocuk scrollWidth'i büyütmüyor; sondanın "çocuğun sağ kenarı ile
   hücrenin iç sağ kenarını karşılaştır" ölçümü yakaladı. */
#pur-shell .pur-table > tbody > tr > td.pur-qtycell {
    padding-left: 4px;
    padding-right: 6px;
}
/* 🔴 REJİM AYRIMI (dosyanın token deseniyle aynı): TABAN = dokunmatik/tablet, orada
   `--tbl-ctl-fs` 16px'tir (iOS odak-zoom koruması, token tanımındaki not) ve aynı
   altı hane 62px'e SIĞMAZ — 768px'te ölçüldü, "100000" kırpılıyordu (bu turdan
   ÖNCE de kırpılıyordu: eski `min-width: 64px` daha da dardı). Yuva bu rejimde
   78px; masaüstü-fare rejiminde (yazı 11.5px) 62px'e iner. */
td.pur-qtycell .pur-qty,
td.pur-qtycell .pur-qtyval {
    flex: 0 0 78px; width: 78px; min-width: 0; text-align: right;
}
@media (min-width: 769px) and (pointer: fine) {
    td.pur-qtycell .pur-qty,
    td.pur-qtycell .pur-qtyval { flex-basis: 62px; width: 62px; }
}
td.pur-qtycell .pur-qty { padding-left: 6px; padding-right: 6px; }
/* 🔴 `min-width` (sabit `width` DEĞİL): kısa birimlerde lot düğmesi de hizalanır,
   "takım/paket/balya" gibi 5 harfli birimde yuva BÜYÜR — kırpmak yasak. */
td.pur-qtycell .pur-unit { flex: 0 0 auto; min-width: 26px; margin: 0; text-align: left; }
/* 🔴 Çevirici okları KAPALI: Chrome `input[type=number]`de fareyle üstüne gelince
   ~15px'lik oku METNİN ÜSTÜNE çiziyor; sağa yaslı altı haneli miktarın son iki
   rakamı fare hücrenin üstündeyken görünmez oluyordu (kırpma sayılmadığı için
   `scrollWidth` taraması da yakalamaz). */
td.pur-qtycell .pur-qty::-webkit-inner-spin-button,
td.pur-qtycell .pur-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
td.pur-qtycell .pur-qty { -moz-appearance: textfield; appearance: textfield; }
/* 🔴 `width` SABİT DEĞİL: girdi kalan alanın tamamını alır. Sabit px yazmak, kolon
   genişliği her değiştiğinde kırpma ya da boşluk üretiyordu — bu hatanın kaynağıydı.
   `min-width` girdinin okunmaz derecede daralmasını engeller (ölçüldü: 56px "20000"i,
   62px "134500"ü kırpmadan gösteriyor); `flex-grow` fazlalığı ona verir. */
td.pur-amt:not(.pur-total-cell) .pur-price {
    width: auto; flex: 1 1 auto; min-width: 62px; text-align: right;
}
td.pur-qtycell .pur-lot-icon,
td.pur-qtycell .pur-lot-gap,
td.pur-amt:not(.pur-total-cell) .pur-cur { flex: 0 0 auto; margin: 0; }
/* 1.436.0 — PARA BİRİMİ SEÇİCİSİ fiyatın sağında (yalnız simge: ₺ $ €). Kolon genişliği DEĞİŞMEDİ: seçici sabit
   24px (dokunmatikte 30px), fiyat girdisi kalan alanı alır; tabanı 62 → 44px ("12345.5" sığar). Yazı tokenden
   (--tbl-ctl-fs; dokunmatikte 16px → iOS büyütmesi yok). */
td.pur-amt:not(.pur-total-cell) .pur-price { min-width: 44px; padding-left: 4px; padding-right: 4px; -moz-appearance: textfield; appearance: textfield; }
td.pur-amt:not(.pur-total-cell) .pur-price::-webkit-inner-spin-button,
td.pur-amt:not(.pur-total-cell) .pur-price::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
td.pur-amt:not(.pur-total-cell) .pur-cur-sel {
    flex: 0 0 auto; box-sizing: border-box; width: 24px; height: 24px; margin: 0; padding: 0;
    border: 1px solid var(--border); border-radius: 5px; background: var(--card-bg);
    color: var(--text-secondary); font-family: inherit; font-size: var(--tbl-ctl-fs); font-weight: 600;
    text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; cursor: pointer;
}
td.pur-amt:not(.pur-total-cell) .pur-cur-sel:hover,
td.pur-amt:not(.pur-total-cell) .pur-cur-sel:focus-visible { border-color: var(--pri); outline: none; }
td.pur-amt:not(.pur-total-cell) .pur-cur-sel:disabled { opacity: .6; cursor: progress; }
@media (max-width: 768px), (pointer: coarse) {
    td.pur-amt:not(.pur-total-cell) .pur-cur-sel { width: 30px; height: 30px; }
}

/* ── Satır yüksekliği TEK DEĞER (tablo yoğunluk sözleşmesi) ──
   Ölçüldü: 13 satırın 5'i 37px, 8'i 32px — ızgara dağınıktı. Sebep TUTAR hücresi:
   dövizli satırda iki satır taşıyor ("4.200,00 $" + "≈ 199.809,12 ₺").
   🔴 Sözleşmenin çözümü KIRPMAK DEĞİL, satır aralığını sıkmak (bilgi gizlenmez):
       2 × (12px × 1.2) = 28,8px ≤ 32px  ✓
   Tek satırlık hücreler zaten `height: var(--tbl-row-h)` tabanına oturduğu için
   dolgunun sıfırlanması onlarda GÖRÜNMEZ. */
#pur-shell .pur-table td.pur-total-cell {
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
}
.pur-cur { color: var(--text-muted); font-size: 10.5px; margin-left: 3px; }
.pur-priceval { font-weight: 500; }

/* Durum / Termin — kolonu doldur (min-width:112 select'i kırpılmaktan korur).
   🔴 BU İKİ HÜCREYİ FLEX YAPMA — DENENDİ ve GERİLEDİ: `display:flex` verilince Chrome
      anonim tablo hücresi üretti ve TÜM SATIRLAR 32→64px'e çıktı (ölçüldü, 13/13 satır).
      Miktar/Fiyat hücrelerinde aynı teknik sorunsuz çalışıyor; fark, bu ikisinin tek
      çocuğunun `width:100%` bir DENETİM olması. Çözüm genişlik vermek: Durum kolonu
      seçicinin en uzun seçeneğini ("Sipariş Verildi" 74px) + ok + dolguyu taşımalı. */
/* 🔴 ÖLÇÜLDÜ (1.270.0, 1440px): `select` kutusu 108px, kolon 102px → 6px KOMŞUNUN
   ÜSTÜNE taşıyordu (28/28 satırda). `width:100%` bunu çözmez: UA, seçicinin en uzun
   seçeneğinden bir İÇSEL EN AZ genişlik türetir. Kırpma kabın kendisinde yapılır. */
.pur-statuscell { overflow: hidden; }
/* `min-width:0` seçicinin UA'dan gelen İÇSEL en-az genişliğini serbest bırakır →
   kutu kolona gerçekten sığar. `overflow:hidden` yine de kalır (emniyet supabı:
   daha uzun bir durum etiketi eklenirse komşuya taşmak yerine kırpılsın). */
.pur-statuscell .pur-status-sel { width: 100%; min-width: 0; }
.pur-datecell .pur-date { width: 100%; }

/* Özet satırdaki "değiştir" — hücrenin BAŞINDA, adın solunda.
   🔴 Eski `margin: 0 0 0 6px` TERSİNE ÇEVRİLDİ: düğme artık ilk öğe; boşluk SAĞINDA
   olmalı, solunda değil (soldaki boşluk onu kolonun kenarından içeri itiyordu). */
.pur-grp-row .pur-supplier-edit { margin: 0 5px 0 0; }

/* Detay satır (akordeon) — açık satırla aynı pri-light zemin (özet↔detay bağı). */
.pur-detail-row > td { padding: 0 !important; background: var(--pri-light); white-space: normal; vertical-align: top; }
/* ── AKORDİYON PANELİ — İKİ SATIR, SABİT YUVALI IZGARA (1.273.1, kullanıcı kararı) ──
   🔴 Kullanıcı: "akordiyon içindeki düzen çok karışık ve kötü … tek satırlık mimariyi
      2 satıra geçir … tüm bilgileri bir tablo gibi düzenli simetrik yap."
   TARİHÇE — ikisi de aynı kusurun iki ucuydu:
     · 1.258.0 `auto-fit` ızgara: alan sayısı değişince kolon sayısı da değişiyor,
       panel yüksekliği 40–150px arasında oynuyordu.
     · 1.270.0 tek şerit: yükseklik sabitlendi ama alanlar SIRAYLA aktığı için
       "Tedarikçi" bir talepte 2., ötekinde 6. sıraya düşüyordu — göz her satırda
       bilgiyi yeniden aramak zorundaydı. Kullanıcının "karışık" dediği buydu.
   ÇÖZÜM: kolon sayısı SABİT 6 ve yuvalar da sabit (JS boş yuvaya "—" basar), yani
   ızgara gerçek bir TABLO gibi davranır — 3. kolon her satırda aynı alandır. Dikey
   ayırıcı çizgiler `nth-child(6n+1)` ile kolon sınırlarına oturur, öğe sayısına
   bakmaz; Sipariş Yönetimi akordeonu (aynı sınıfları basar, yuvaları sabit değil)
   bu yüzden aynı kaynaktan bozulmadan biçimlenir. */
.pur-detail-panel {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 12px;
    min-height: 36px; padding: 7px 12px 7px 40px;
    border-top: 1px dashed var(--border);
}
.pur-dd-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px 0;
    flex: 1 1 auto; min-width: 0;
}
/* Her yuva: ETİKET ÜSTTE, DEĞER ALTTA. Yan yana (baseline) düzende etiket genişliği
   yuvadan yuvaya değiştiği için DEĞERLER bir kolonda hizalanmıyordu; alt alta düzende
   tüm değerler aynı x'ten başlar — "simetrik" şartının ölçülebilir karşılığı budur.
   `nowrap` + `hidden` BİRLİKTE: nowrap tek başına kırpmaz, taşan metin komşuya taşar. */
.pur-dd {
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
    padding: 2px 10px;
    border-left: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
}
.pur-dd:nth-child(6n+1) { border-left: 0; padding-left: 0; }
/* 🔴🔴 KIRPMA HER ALANDA — İKİ BAĞIMSIZ İNCELEME BUNU YAKALADI (1.270.0).
   İlk yazımda `overflow:hidden` YALNIZ NOT alanındaydı; diğer alanlar `nowrap`
   ile daralıyor ama metin daralmıyordu → taşan metin KOMŞUNUN ÜSTÜNE çiziliyordu.
   Ölçüldü (gerçek fabrika, 1440px): 6 alanlı satırda 5/6 alan çakışıyor ve
   9 alanlı satırda toplam 851px taşma — okunacak hiçbir şey kalmıyordu.
   Izgaraya geçerken de geçerli: `minmax(0, 1fr)` olmadan grid kolonu içeriğin
   doğal genişliğinden KÜÇÜLMEZ ve aynı taşma geri gelir. */
.pur-dd-val { overflow: hidden; text-overflow: ellipsis; }
/* Boş yuva: yuva KAYBOLMAZ, "—" ile durur. Kaybolsaydı kolonlar kayar ve simetri
   (aynı alan = aynı kolon) satır bazında bozulurdu — düzeltilen kusurun ta kendisi. */
.pur-dd-bos { color: var(--text-muted); }
/* Talep No ızgaranın İLK ve en belirgin yuvası — ana tablodan kaldırıldığı için
   burada kaybolmamalı. */
.pur-dd--key .pur-dd-val {
    font-size: 12px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.pur-dd--key .pur-dd-lbl { color: var(--pri-text); }
.pur-dd-sep { color: var(--text-muted); font-weight: 400; margin: 0 2px; }

/* 🔴 SATIR YÜKSEKLİĞİ AÇIKÇA VERİLİR. Devralınan `line-height` ile ölçüldü: panel
   96px. Yuva iki metin satırı taşıdığı için devralınan boşluk İKİ KAT sayılıyor;
   1.15/1.3 ile panel 96 → 78px'e iniyor ve hiçbir harf kırpılmıyor (ölçüldü). */
.pur-dd-lbl { flex: 0 0 auto; font-size: 9px; line-height: 1.15; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; }
.pur-dd-val { min-width: 0; font-size: 11px; line-height: 1.3; color: var(--text-primary); white-space: nowrap; }
/* İptal nedeni ızgaranın yuvası DEĞİL, altındaki tam genişlik şerididir: uzun bir
   cümledir ve 1/6 kolona kırpılırsa okunmaz olur. Yalnız iptal edilen talepte doğar. */
.pur-dd-alert {
    flex: 1 1 100%; display: flex; align-items: baseline; gap: 6px; min-width: 0;
    padding: 3px 0 0; font-size: 11px; color: var(--rose-ink);
    border-top: 1px dotted var(--border);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* İptal nedeni KAPALI satırda (1.395.2): Satınalma ve Sipariş Yönetimi'nde iptal edilmiş satırın ÜRÜN
   hücresinde, adın altında ikinci satır. Son hücreye (termin) konmaz: tablo kabından geniştir ve son
   hücre yatay kaydırmadan görünmez (ölçüldü). Tek satır + üç nokta; tamamı ipucunda ve yukarıdaki
   akordiyon şeridinde. Punto hücreden miras alınır (ürün adından küçük kalır, büyütülmez).
   Üretim siparişi iptal ışığı yanan hücrede (.pur-iptal) renk ışıkla birlikte döner. */
.pur-iptal-neden {
    display: block; max-width: 100%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 400; color: var(--rose-ink);
}
.pur-iptal-neden b { font-weight: 700; }
.pur-prod.pur-iptal .pur-iptal-neden { color: inherit; }
/* 1.405.6 — "Teslim Alındı" sekmesinde KISMİ teslim: iptal nedeniyle AYNI yuva (adın altında tek satır, punto hücreden). */
.pur-kismi-satir {
    display: block; max-width: 100%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 400; color: var(--amber-ink);
}
.pur-kismi-satir b { font-weight: 700; }
/* Telefon Satınalma kartı: neden kart açılmadan, satırın altında sakin bir şerit (sarar, kırpmaz). */
.peron-mob-neden {
    display: block; padding: 4px 12px 6px; border-top: 1px solid var(--border-light);
    font-size: 11px; line-height: 1.35; color: var(--rose-ink); overflow-wrap: anywhere;
}
.peron-mob-neden b { font-weight: 700; }
.pur-iptal-p { margin: 0 0 12px; color: var(--text-secondary); }
.pur-iptal-ops { font-weight: 400; color: var(--text-muted); }

/* Ekran okuyucu için görünmez başlık (chevron kolonu) — görsel olarak yer kaplamaz. */
.pur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pur-cari-tag { font-size: 10px; background: var(--pri-light); color: var(--pri); border-radius: 4px; padding: 1px 5px; }
/* 🔴 EYLEM ŞERİDİ KENDİ SATIRINDA (1.273.1). Önce ızgaranın SAĞINDA duruyordu ve
   ızgaranın genişliğini düğme VARSA daraltıyordu: ölçüldü, "Tümü" sekmesinde
   teslim alınmış satırlarda ("↩ Teslim Almayı Geri Al") kolonlar komşu satıra göre
   21px kayıyordu — yani düzeltmeye çalıştığımız hizasızlığın ta kendisi, yalnız
   başka sebeple. Tam genişlik satırı ızgarayı HER panelde aynı yapar; ölçülen
   hiza sapması 21 → 0. Bedeli: eylemi olan satır ~26px uzar (o satırlar zaten
   istisnadır ve "Teslim Alındı" sekmesinde HEPSİ eşit uzar). */
.pur-dd-actions { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: 8px; }
.pur-dd-empty { flex: 1 1 auto; padding: 7px 0; font-size: 12px; color: var(--text-muted); font-style: italic; }

/* ── Sipariş Yönetimi tablosu — Satınalma ile aynı akordeon (.pur-*); ek: rezerv etiketi,
   Sil butonu + "işlem görmüş → silinemez" kilit notu (akordeon detayında). ── */
/* Kolon genişlikleri KESİN olsun (colgroup honored) — aksi halde auto-layout seyrek
   kolonlarda metni harf harf alt alta diziyordu (v1.2.5 --fixed gerekçesiyle aynı). --fixed
   sınıfı EKLENMEZ (onun white-space:normal hücre kuralı özet satırın tek-satırını bozardı);
   yalnız layout ölçütü .ord-table'a verilir. Konteyner darsa .peron-table-wrap yatay kayar. */
.ord-table { table-layout: fixed; width: 100%; min-width: max-content; }
/* Satınalma tablosu da aynı ölçütü alır: auto-layout colgroup genişliklerini yok sayıyordu
   (ölçüldü — Tedarikçi kolonuna 140px verilmişti, 80px alıyordu; metin 2 satıra düşüyor,
   tablo yine de 1384px'e taşıyordu). fixed + ölçülmüş genişlik = hem sığar hem sarmaz. */
#pur-shell .pur-table { table-layout: fixed; width: 100%; min-width: max-content; }
/* Başlıklar tek kelimeyi ORTADAN bölmesin (ör. "REZERVE"→"REZERV/E"); yalnız boşlukta sar
   ("KRİTİK STOK" doğru şekilde iki satıra düşer). */
.ord-table th { overflow-wrap: normal; word-break: keep-all; }

/* ═══ KOLON GENİŞLİKLERİ — satır içi style yerine CSS (medya sorgusu ezilmesin) ═══════
   ÖLÇÜM (1366px, Chrome, gerçek veri): her kolon için hem başlık metni hem satırlardaki
   EN UZUN içerik tek satıra zorlanıp ölçüldü; kolon = ihtiyaç + 8px×2 dolgu.
   Kapasite: .peron-table-wrap iç genişliği 1366px'te 1224px.

   Sipariş Yönetimi ihtiyaçları (dolgu dahil): No 258 · Ürün 186 · Miktar 52 · Stok 54 ·
   Rezerve 64(başlık) · Kritik 42(başlık) · Talep Eden 110 · Durum 128 · Termin 125 = 1019.
   205px boşluk vardı; Sipariş No (kırpılamaz) ve Ürün öncelikli olarak dağıtıldı. */

/* 🔴🔴 1.356.0 — BÜTÇE YENİDEN DAĞITILDI: EN GENİŞ KOLON ARTIK ÜRÜN.
   Kullanıcı birebir: *"sipariş yönetimi kısmında dengesizlik var, sipariş no tarih
   kolonu aşırı büyük 'ürün' bölümünü sıkıştırmış, geniş olması gereken kısım ürün."*

   Üstteki 2026-06 bütçesi 12px puntoya göre kurulmuştu; punto 10,5px'e indi (bkz.
   dosya sonundaki "9 PUNTO TAVANI" bloğu) ve ihtiyaçlar küçüldü. HÜCRE HÜCRE
   YENİDEN ÖLÇÜLDÜ (1440px, gerçek veri, 5 sekmenin hepsi, 29 sipariş; her hücre
   nowrap'e zorlanıp doğal genişliği + td dolgusu alındı). Sekmeler arası EN KÖTÜ:

     kolon         eski   ölçülen ihtiyaç   yeni     not
     Sipariş No     276         270 → 220   220      ↓ kullanıcının işaret ettiği kolon
     Ürün           242         184         300/225  ↑ artık EN GENİŞ kolon
     Miktar          76          73          78
     Stok            76          78          82      2px EKSİKTİ (1005📦 kırpıyordu)
     Rezerve         76          62          68
     Kritik          66          50          56
     Talep Eden     134         105         120
     Durum          140         144         150      4px EKSİKTİ (Tedarik Sürecinde)
     Termin         138         144         150      21px EKSİKTİ (rozet 2 satıra düşüyordu)

   🔴 220px BİR EŞİKTİR, TAHMİN DEĞİL. Sipariş No hücresi kırpılmaz (`.pur-idwrap`
      güvenlik supabı: sığmazsa önce tarih alt satıra iner). Kolon genişliğine göre
      kaç satırın iki satıra düştüğü ÖLÇÜLDÜ (29 satır):
        250px → 2 satır · 230px → 2 · 220px → 2 · 210px → 14 · 200px → 14
      220 ile 210 arasında uçurum var: 220'de yalnız iki uç kayıt
      (`#US-20260629-0008-10-01-02`, 24 karakter) iki satıra düşer, 210'da normal
      `#US-20260629-0008` ailesinin tamamı düşerdi. Bu yüzden taban 220'dir —
      bir punto daha kısmak 12 satırı birden büyütürdü.

   🔴 TOPLAM 1224'TE SABİT TUTULDU — İKİ DÜZENDE DE. Sekme değiştirince tablonun
      genişliği ZIPLAMASIN diye; 9 kolonluk düzen tek başına 1138'e (1440px'teki kap)
      sığdırılabilirdi ama o zaman "Tümü"ye geçerken tablo 86px genişler, kullanıcı
      her sekmede farklı bir hizayla karşılaşırdı. Yatay kaydırma davranışı
      DEĞİŞMEDİ (ölçüldü: önce de sonra da 1224/1138). */
/* 🔴🔴 MİKTAR KOLONU — KLON ÖLÇÜMÜ FLEX HÜCREYİ ÜRETEMEZ (1.357.0'da yaşandı).
   Kolon bütçesini `max-content` klonuyla ölçerken Miktar 45-69px "yetiyor" göründü ve
   52/76px verildi. GERÇEK render'da hücre `display:flex`tir ve içinde üç kutu vardır:
   `.pur-qtyval` + `.pur-unit` + SABİT 22px lot yuvası. Ölçüldü (1440px, gerçek satır):
   10 kolonlu sekmede 29 satırın 29'u +21px, 9 kolonluda 3'ün 3'ü +45px TAŞIYORDU —
   ekranda "10 ad0" gibi Miktar ile Stok iç içe giriyordu.
   🔴 DERS: klon ölçümü blok/inline metin için doğrudur, FLEX hücre için DEĞİLDİR.
      Kolon genişliği verdikten SONRA `hücre.clientWidth − padding` ile çocukların
      gerçek toplam genişliği KARŞILAŞTIRILIR; "klon sığdı" yeterli kanıt değildir.
   Her iki düzende de 100px (ölçülen ihtiyaç 97px), fark Ürün kolonundan alındı. */
.ord-table > colgroup > .ordc-id     { width: 196px; }
.ord-table > colgroup > .ordc-prod   { width: 370px; }
.ord-table > colgroup > .ordc-qty    { width:  100px; }
.ord-table > colgroup > .ordc-stock  { width:  60px; }
.ord-table > colgroup > .ordc-rsv    { width:  58px; }
.ord-table > colgroup > .ordc-crit   { width:  46px; }
.ord-table > colgroup > .ordc-req    { width: 110px; }
.ord-table > colgroup > .ordc-status { width: 142px; }
.ord-table > colgroup > .ordc-due    { width: 142px; }   /* toplam 1224 */

/* "Tümü" / "Teslim Alındı" sekmelerinde Miktar İKİYE ayrılır (Sipariş Mik. + Gelen Mik.)
   → 10 kolon. Bu düzende bütçe DAR: ölçülen ihtiyaçlar toplamı 1231 ve tek büyük
   kaynak Sipariş No'dur. O yüzden Ürün'e ayrılabilen pay 9 kolonluk düzendekinden
   küçüktür (225), ama yine de tablonun EN GENİŞ kolonudur (No 220'nin üstünde).
   Toplam yine 1224 kalır. */
.ord-table--2qty > colgroup > .ordc-id     { width: 196px; }
.ord-table--2qty > colgroup > .ordc-prod   { width: 278px; }
.ord-table--2qty > colgroup > .ordc-qty    { width:  100px; }
.ord-table--2qty > colgroup > .ordc-qty2   { width:  80px; }
.ord-table--2qty > colgroup > .ordc-stock  { width:  72px; }
.ord-table--2qty > colgroup > .ordc-rsv    { width:  58px; }
.ord-table--2qty > colgroup > .ordc-crit   { width:  46px; }
.ord-table--2qty > colgroup > .ordc-req    { width: 110px; }
.ord-table--2qty > colgroup > .ordc-status { width: 142px; }
.ord-table--2qty > colgroup > .ordc-due    { width: 142px; }  /* toplam 1224 */
/* 🔴 DOKUNMATİK/DAR REJİM (1.381.0, ölçüldü 390px): miktar değeri 78px'lik yuvada durur
   (bkz. `td.pur-qtycell .pur-qtyval` — satınalmadaki 16px girdiyle aynı hizada kalsın diye)
   ve birim 26px ile 4+4 dolgu eklenince 112px ister; 100px'lik kolonda "10 adet" komşu
   Stok kolonunun üstüne 11px biniyordu. Masaüstü-fare rejimi (1224 bütçesi) DEĞİŞMEZ.
   🔴 Stok hücresi GENİŞLETİLMEDİ: oradaki "taşma" (scrollWidth 75 > 60) lot düğmesinin
      GÖRÜNMEZ 44×44 dokunma alanıdır (`::after`); görünen düğme hücrenin içinde (ölçüldü:
      düğme 730-752, hücre 688-756). scrollWidth tek başına taşma kanıtı DEĞİLDİR. */
@media (max-width: 768px), (pointer: coarse) {
    .ord-table > colgroup > .ordc-qty,
    .ord-table--2qty > colgroup > .ordc-qty { width: 112px; }
    /* Dokunmatikte başlık 11px: "REZERVE" 65px, "KRİTİK" 50px istiyor (58/46px'te "…"). */
    .ord-table > colgroup > .ordc-rsv,
    .ord-table--2qty > colgroup > .ordc-rsv { width: 66px; }
    .ord-table > colgroup > .ordc-crit,
    .ord-table--2qty > colgroup > .ordc-crit { width: 52px; }
}

/* Satınalma — 12 veri kolonu + toplu seçim onay kutusu (peron-app.js colgroup'a
   <col class="peron-sel-col"> ekliyor; genişliği burada, satır içi stille DEĞİL).
   TEK SATIRA sığdırmanın gerçek maliyeti ölçüldü (içerik + 16px dolgu):
       ☑30 · Talep No 201 · Ürün 202 · Miktar 123 · Stok 38 · Rezerve 60 · Kritik 38 ·
       Tedarikçi 128 · Talep Eden 104 · B.Fiyat 88 · Tutar 115 · Durum 116 · Termin 118
       = 1361px  →  1234px'lik kaba 127px SIĞMIYOR. 12 kolon için fizik bu.
   Bu yüzden ÜÇ metin kolonu (Ürün · Tedarikçi · Talep Eden) bilerek İKİ SATIRA
   bırakıldı — iki satır artık 32px'e sığdığı için SATIR BOYU DEĞİŞMİYOR ve tek
   karakter bile gizlenmiyor. Talep NUMARASI ise tek satırda tutuldu (kırpma/sarma
   yasağı orada mutlak: chevron 22px yüzünden sarınca satır 39px'e çıkıyordu). */
/* ── 1.258.0 YENİDEN DAĞITIM — ölçümle ──────────────────────────────────────
   🔴 KÖK NEDEN: `table-layout: fixed` + colgroup toplamı (1230) kaptan (1320) KÜÇÜK
      olduğu için tarayıcı 90px fazlalığı TÜM kolonlara ORANSAL dağıtıyordu. Kullanıcının
      gördüğü "boşluk" buydu: en geniş kolon (Talep No) fazlalığın en büyük payını alıyor,
      dar olan Ürün ise en azını. Yani sorun boşluğun VARLIĞI değil, PAYLAŞIMIYDI.
   🔴 Doğal genişlikler `width:max-content` klonuyla ölçüldü (Range.getBoundingClientRect
      SARILMIŞ kutuyu verir, doğal genişliği DEĞİL — bu ayrım ölçümü baştan yanlışlardı):
        sel 36 · Talep No 187 · Ürün 186 · Miktar 113 · Stok 36 · Rezerve 64 · Kritik 42 ·
        Tedarikçi 112 · Talep Eden 88 · B.Fiyat 83 · Tutar 99 · Durum 105 · Termin 131
        = 1282  →  1320px kaba SIĞIYOR, üstelik 37px ARTIYOR.
      Yani 12 kolon için "fizik" değil, dağıtım hatasıymış.
   Değişim: Talep No −34 (ölü alanı en çoktu) · Tutar −16 · Durum −12 → hepsi
   Ürün'e (+56) ve Tedarikçi'ye (+14) verildi. Ürün ve Tedarikçi artık tek satıra
   sığıyor; ikinci satıra düşen ad kalmadı. */
#pur-shell .pur-table > colgroup > .peron-sel-col { width: 30px; }
/* 🔴 ALT SINIR 179px — DAHA AZINI VERME. Talep numarası `SAT-YYYYMMDD-NNNN` biçiminde
   187px doğal genişlik ister; 174px'te SARIYOR ve satır 32→39px'e fırlıyor (ölçüldü).
   Canlıda numaralar kısa ("00048") olduğu için orada görünmez — ama iki biçim de aynı
   sistemde var, dar olan belirleyicidir. */
/* 🔴 1.273.1 yeniden dağıtım — yazı 11.5 → 10.5px küçülünce sayı kolonlarının
   İÇERİĞİ de küçüldü ve ölü alan doğdu; kazanılan piksel Ürün + Tedarikçi'ye verildi
   (kullanıcı: "gereksiz boşlukları kapatarak yer aç uzun yazılara"). TOPLAM SABİT
   kaldı (masaüstü-fare rejiminde 1289px) — sekme/rejim değişince tablo ZIPLAMASIN.
   Alınan: Tarih −5 · Stok −4/−2 · B.Fiyat −4 · Tutar −3 · Durum −5.
   Verilen: Ürün +12 · Tedarikçi +7. */
#pur-shell .pur-table > colgroup > .purc-id     { width: 82px; }
#pur-shell .pur-table > colgroup > .purc-prod   { width: 196px; }
/* 🔴 1.272.0 — MİKTAR 136 → 124, kazanılan 12px TEDARİKÇİ'ye verildi (kullanıcı:
   "miktar kısmını en fazla 100.000 sığacak kadar daralt, kalan boşluğu tedarikçi
   firmada kullan"). Yeni bütçe (hücrenin gerçek içeriği):
       sol dolgu 4 + girdi 62 + 2 + birim 26 + 2 + lot 22 + sağ dolgu 6 = 124
   Kolon 128px verildi: 4px pay, 5 harfli birimde ("paket" 27,7px) yuva büyüyünce
   lot düğmesi yine de komşuya taşmasın diye (ölçüldü).
   Eskiden girdi `flex: 1 1 auto` ile kalan 120px'in ~64'ünü alıyordu; sabit 62px
   aynı altı haneyi taşır, artan yer kolonun kendisinden düşülür. TOPLAM 1244
   DEĞİŞMEDİ — sekme değiştirince tablo genişliği oynamasın diye (aşağıdaki
   `.pur-table--recv` bloğunda Ürün de aynı 12px'i geri veriyor). */
#pur-shell .pur-table > colgroup > .purc-qty    { width: 144px; }
/* 🔴 36 → 44/40: ÖLÇÜLDÜ, dört haneli stok ("1015") masaüstünde 40px, dokunmatik
   rejimde (yazı 13px) 42px istiyor; kolon 36px'ti ve sayı KIRPILIYORDU (bu turda
   değil, ÖNCEDEN — hizayı ölçen sonda yakaladı). Kullanıcının "sayılar düzgün
   görünsün" kuralı bunu da kapsıyor. Fark Ürün'den alındı; toplam yine 1244. */
/* 🔴 STOK 44 → 72: kullanıcı kuralı "stok en fazla 100.000 alacak kadar geniş olsun".
   ÖLÇÜLDÜ: "100.000" dizesi bu yazı boyunda 62px; eski 40/44px kolonda SIĞMIYORDU
   (gerçek veride 100.000'lik talep VAR — PATİ 05). 62 + 10 dolgu = 72. */
#pur-shell .pur-table > colgroup > .purc-stock  { width: 68px; }
#pur-shell .pur-table > colgroup > .purc-rsv    { width: 56px; }
#pur-shell .pur-table > colgroup > .purc-crit   { width: 38px; }
/* 🔴 ESKİ SİPARİŞLER — aynı üründen depoya girmemiş BAŞKA talepler.
   Başlık "Eski Sip." 52px, içerik "1.234,5" + "2×" rozeti ≈ 56px, +10 dolgu = 66. */
#pur-shell .pur-table > colgroup > .purc-old    { width: 66px; }
#pur-shell .pur-table > colgroup > .purc-sup    { width: 147px; }
#pur-shell .pur-table > colgroup > .purc-req    { width: 85px; }
#pur-shell .pur-table > colgroup > .purc-price  { width: 95px; }
#pur-shell .pur-table > colgroup > .purc-total  { width: 91px; }
#pur-shell .pur-table > colgroup > .purc-status { width: 97px; }
/* 🔴 ALT SINIR ~113px — daha azında `input[type=date]` yer tutucuyu "gg.aa.yyy" diye
   KIRPIYOR (gözle görüldü; `scrollWidth` bunu YAKALAMAZ, tarih girdisinin iç çizimi
   taşma bildirmiyor). Sayısal sonda tek başına yetmedi, ekran görüntüsü gerekti. */
#pur-shell .pur-table > colgroup > .purc-due    { width: 116px; }
/* ── TABAN (dokunmatik/tablet) ↔ MASAÜSTÜ-FARE bütçesi ────────────────────────
   Yukarıdaki değerler TABAN rejimidir (yazı büyük): Miktar 144 · Stok 44 · Ürün 184.
   Masaüstü-fare rejiminde yazı küçüldüğü için Miktar 144 → 128 ve Stok 44 → 40,
   kazanılan 20px Ürün'e döner (184 → 204). İKİ REJİMDE DE TOPLAM 1244:
     taban:     30+87+184+144+44+59+40+160+85+99+94+102+116 = 1244
     masaüstü:  30+87+204+128+40+59+40+160+85+99+94+102+116 = 1244
   Böylece ekran genişliği değişince tablo genişliği ZIPLAMAZ. */
/* 🔴🔴 1.273.3 — ÜRÜN'E YER AÇMA (kullanıcı ekran görüntüsünde işaretledi:
   "gereksiz büyük sütunlar … oluşan boşluğu ÜRÜN kısmına kaydır").
   Havuz TAHMİNLE değil ölçümle çıkarıldı ve BEKLENENDEN KÜÇÜK: toplam 24px.
     Stok       66 → 58  (−8)   Talep Eden 85 → 79  (−6)   B.Fiyat 95 → 85 (−10)
     ÜRÜN      198 → 222 (+24)
   Alınmayanlar ve NEDENİ:
   · Tutar 91px — dövizli satırda TL karşılığı (`.pur-tl{display:block}`) KENDİ satırında
     ve en geniş gerçek örnek ("≈ 15.042,42 ₺") tam 83px; kullanılabilir alan da 83px.
     SIFIR MARJ, tek px kesilemez.
   · Rezerve/Kritik/Eski Sip. — içerikleri zaten kolonlarını dolduruyor.

   🔴🔴 ÖLÇÜM ARACI HATASI DÜZELTİLDİ (bu turda bulundu): `getComputedStyle(el).font`
   KISAYOLU, öğede `font-variant-numeric: tabular-nums` varsa (tüm `.col-num` hücreler)
   SERİLEŞTİRİLEMEZ ve BOŞ DİZE döner. Ölçüm betikleri o boş dizeyi offscreen span'e
   kopyalayınca span VARSAYILAN (büyük) fontla ölçülüyordu. Ölçülen sapma:
     "Rezerve" başlığı  61,33px sanılıyordu → GERÇEĞİ 43,84px
     "100.000" stok dizesi 62px sanılıyordu → GERÇEĞİ 43,7px + 8 dolgu = 52px
   Bu yüzden "dar sayı kolonlarında bağlayıcı kısıt BAŞLIKTIR" önermesi YANLIŞTI ve
   başlıkları 2 satıra sarmaya / kısaltmaya GEREK YOK — hiçbiri komşusuna binmiyor.
   Stok 58px, gerçek 52px ihtiyacın 6px üstünde: kullanıcının "stok 100.000 almalı"
   kuralı KORUNUYOR (canlı hücreye "100.000" yazılıp Range ile doğrulandı).

   🔴 Değişiklikler YALNIZ bu media bloğunda: dokunmatik/tablet rejimi (taban 68/196/85/95)
   HİÇ değişmiyor → mobil risk sıfır. Toplam 1289px SABİT kaldı. */
@media (min-width: 769px) and (pointer: fine) {
    #pur-shell .pur-table > colgroup > .purc-qty   { width: 122px; }
    #pur-shell .pur-table > colgroup > .purc-stock { width:  58px; }
    #pur-shell .pur-table > colgroup > .purc-prod  { width: 222px; }
    #pur-shell .pur-table > colgroup > .purc-req   { width:  79px; }
    #pur-shell .pur-table > colgroup > .purc-price { width:  85px; }
}
/* 🔴 1.381.0 — DOKUNMATİK rejimde başlık 11px: "KRİTİK" 40px istiyor, 38px'lik kolonda
   (ölçüldü 768px) "KRİT…" okunuyordu. +4px Ürün'den; masaüstü-fare bütçesi (yukarıdaki blok,
   kullanıcının onayladığı düzen) DEĞİŞMEZ — iki medya koşulu birbirini dışlar. */
@media (max-width: 768px), (pointer: coarse) {
    #pur-shell .pur-table > colgroup > .purc-crit { width: 42px; }
    #pur-shell .pur-table > colgroup > .purc-prod { width: 192px; }
}
/* 1.436.0 — PARA BİRİMİ SEÇİCİSİNE YER: seçici fiyat kolonuna girince girdi daraldı (ölçüldü 768 dokunmatik: girdi 52px,
   "125" kırpılıyordu). Fark TEDARİKÇİ'den alınır (ad üç noktayla kısalır), TOPLAM DEĞİŞMEZ. Yalnız taban düzen ve fiyat
   görünürken: Teslim Alındı düzeninde seçici yok; fiyatı gizli kullanıcıda kolonlar kayar (aşağıdaki .prices-hidden). */
@media (min-width: 769px) and (pointer: fine) {
    #pur-shell:not(.prices-hidden) .pur-table:not(.pur-table--recv) > colgroup > .purc-price { width: 97px; }
    #pur-shell:not(.prices-hidden) .pur-table:not(.pur-table--recv) > colgroup > .purc-sup   { width: 135px; }
}
@media (max-width: 768px), (pointer: coarse) {
    #pur-shell:not(.prices-hidden) .pur-table:not(.pur-table--recv) > colgroup > .purc-price { width: 115px; }
    #pur-shell:not(.prices-hidden) .pur-table:not(.pur-table--recv) > colgroup > .purc-sup   { width: 127px; }
}

/* ── 🔴 SIKILAŞTIRMA (kullanıcı kuralı) ────────────────────────────────────────
   "tablodaki yazı karakterlerini küçült … gereksiz büyük kısımlar var ise daralt …
    stok, termin ve tarih kısımlarının önünde/arkasında gereksiz boşluk var."
   ÖLÇÜLDÜ (1440px, gerçek 17 satır): hücre yatay dolgusu 16px × 13 kolon = 208px'i
   yalnız BOŞLUK harcıyordu; kolonların toplam ARTANI ise 43px'ti. Yani yer kolon
   genişliklerinde değil, DOLGUDA duruyordu — yeni kolon oradan çıktı.
   🔴 Yazı 12 → 11.5px YALNIZ bu tabloda. Projenin "tablo hücresi ≈13px" varsayılanı
   duruyor; burada kullanıcı açıkça küçültme istedi ve tablo 14 kolona çıktı. */
/* 🔴 1.273.1 — BİR PUNTO DAHA (kullanıcı: "satınalma kısmındaki tüm yazı karakterleri
   bir punto daha düşür ve satır içinde daha çok yer açılsın, gereksiz boşlukları
   kapatarak yer aç uzun yazılara mesela ürün ve tedarikçi kısmına").
   11.5px ≈ 8,6pt → bir punto aşağısı ≈ 7,6pt ≈ 10.5px. Yatay dolgu da 5 → 4px:
   13 kolon × 2px = 26px, bu doğrudan METİN alanına dönüşür (kolon genişliği
   değişmeden her hücre 2px daha uzun yazı taşır). Asıl kazanç yazının kendisinde:
   aynı 186px'lik Ürün kolonu %9 daha fazla karakter gösterir — kullanıcının
   istediği "yer" kolon genişliğinden ÖNCE buradan çıkar. */
#pur-shell .pur-table td { padding-left: 4px; padding-right: 4px; font-size: var(--tbl-fs); }
/* 🔴 BAŞLIK, DAR SAYI KOLONLARINDA BAĞLAYICI KISITTIR — içerik değil.
   ÖLÇÜLDÜ: "Rezerve" başlığı 61px iken hücre içeriği 47px; kolonu belirleyen başlıktı.
   İlk denemede th'yi 11 → 11.5px yaptım ve başlıklar BÜYÜDÜ (yanlış yön). Taban
   `.peron-table th` 11px + `letter-spacing:.09em` + UPPERCASE; harf aralığı tek başına
   9 harfli bir başlıkta ~9px yer yiyor. Bu tabloda ikisi de kısılır. */
#pur-shell .pur-table th { padding-left: 4px; padding-right: 4px;
    font-size: var(--tbl-head-fs); letter-spacing: 0.01em; }
#pur-shell .pur-table .pur-qtycell { padding-left: 3px; padding-right: 3px; }
/* Sayı kolonları hizalı ve tek satır — dar kolonda sarma satırı 32→39px yapardı. */
#pur-shell .pur-table td.col-num,
#pur-shell .pur-table th.col-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "Eski Sip." hücresi: miktar + kaç talep olduğu rozeti. */
#pur-shell .pur-old { font-weight: 700; color: var(--amber-ink); cursor: help; }
#pur-shell .pur-old-n { font-style: normal; font-weight: 600; font-size: 9.5px;
    color: var(--text-secondary); margin-left: 2px; }
/* Miktar/Fiyat kolonu GERÇEK VERİYE göre boyutlandı, tahminle değil:
   en büyük miktar 20000 · en uzun gösterim "1790,3" · canlıda fiyat 4-5 hane.
   Miktar hücresi girdiden başka BİRİM etiketi (22px) ve LOT düğmesi (26px) de taşır;
   109px'lik iç alanda girdiye yalnız 53px kalıyordu — kırpmanın gerçek sebebi buydu,
   girdi genişliği değil. Kolon 126px'e çıkınca girdiye ~62px kalıyor. */

/* ── Talep No hücresi: numara üstte, tarih altta; satır 32px'te kalır ──
   🔴 Kolon "en uç noktaya kadar" daraltıldı (223→145px) ve fazlalık Ürün'e verildi.
      Bu genişlikte numara ile tarih ZORUNLU olarak alt alta düşer — kabul edilen
      tasarım kararı budur. Ama üç satıra düşmemeli:
        chevron 22 + boşluk 4 + numara 103 = 129 > 125 (141px kolonun iç alanı)
      → numara da alt satıra kaçıyor ve satır 52px'e fırlıyordu (ölçüldü).
      Kolon 145px'e çıkarıldı (iç alan 129) ve chevron 22→18px'e indirildi:
        satır 1 = max(18, 13) = 18 · boşluk 2 · satır 2 = 12  →  32px  ✓
   🔴 Chevron'un KÜÇÜLMESİ dokunma hedefini BOZMAZ: `(pointer: coarse)` bloğundaki
      `::after` 44×44 görünmez alanı üretmeye devam ediyor (bkz. aşağıdaki mobil blok). */
#pur-shell .pur-table td.col-code .pur-acc-toggle { width: 18px; height: 18px; }
#pur-shell .pur-table td.col-code .pur-acc-toggle svg { width: 12px; height: 12px; }

/* ── 🔴 BAŞLIK HİZASI = VERİ HİZASI (1.310.0 — ölçülmüş düzeltme) ──────────────
   ESKİ KURAL "başlıklar kolonun TAM ORTASINDA" idi ve TÜM başlıkları (sayısal olanlar
   dahil) ortalıyordu. Sonucu kullanıcı bildirdi: "Teslim Alındı'da Tedarikçi · Talep
   Eden · Geliş Tarihi · Fatura No kısmı kayık, aşağıdaki yazılar ile birbirini
   tutmuyor." ÖLÇÜLDÜ (1244px kap, `Range.getBoundingClientRect` ile başlık metni ile
   hücre metninin SOL/SAĞ kenarları):
       Ürün      +104px · Tedarikçi +58px · Tarih +22px · Geliş Tarihi +21px ·
       Fatura No +19px  · Sipariş   −35px · Gelen −34px · Tutar −25px
   Yani metin kolonlarında başlık sağa, sayı kolonlarında sola kaçıyordu; hiçbiri
   altındaki veriyle aynı x'te başlamıyordu. Ortalama, kolon genişliği içeriğe göre
   değiştiği için HER KOLONDA FARKLI bir kaçıklık üretir — göz bunu "hizasız" okur.
   YENİ KURAL: başlık, altındaki verinin hizasını İZLER.
     · `.col-num`  → sağa  (rakamlar zaten sağa yaslı ve `tabular-nums`)
     · diğer hepsi → sola  (metin hücreleri `start` hizalı)
   🔴 Özgüllük şart: `#pur-shell` öneki (1,1,2) hem `.peron-table th`(0,1,1) hem
      `.pur-table th.col-num`(0,2,0) kurallarını geçer — ikisi de aynı yönü söylüyor,
      burada yalnız KESİNLEŞTİRİLİYOR.
   🔴 Seçim kutusu kolonu (`.peron-sel-th`) DIŞARIDA: içinde metin değil onay kutusu
      var, ortalı kalmalı — sola çekilirse 30px kolonda kutu kenara yapışırdı.
   🔴🔴 1.381.0 — KULLANICI KARARIYLA YENİDEN ORTALANDI (2026-09-26). Kolon genişliği
      artık kullanıcının elinde (`A.kolonAyari`); sola/sağa yaslı başlıklar kolon
      daraltılıp genişletildikçe farklı kenarlara kaçıyordu. Kullanıcı birebir: "başlıkların
      hepsi ortalı olsun kaydırdıkça hep ortalansın, şu anda çok dağınık hepsi".
      Bedeli bilinerek alındı: metin kolonlarında başlık, sola yaslı verinin tam üstünde
      başlamaz (yukarıdaki 1.310.0 ölçümü). Veri hizası DEĞİŞMEDİ.
   🔴 Aynı gün TÜM tablolara yayıldı ("şimdi tüm tablolarda bunu yap, başlıkları ortalamayı
      unutma") → kural TEK YERDE: dosya sonundaki "TABLO BAŞLIKLARI ORTALI" bloğu
      (`#peron-panel-root table > thead > tr > th`). Burada ikinci bir kopya TUTULMAZ. */
/* Onay kutusu sütunu zaten ortalı; başlığı boş, kural onu etkilemiyor. */
/* Fiyat gizliyken (.prices-hidden hücreleri display:none yapar) fixed-layout kolonu
   yine de ayırırdı → 178px'lik boş şerit. Kolonu da sıfırla: kalan alan diğer
   kolonlara dağılır. */
/* 🔴 FİYAT GİZLİYKEN KOLON EŞLEŞMESİ KAYAR — ölçülmüş hata (1.258.0'da bulundu).
   `display:none` verilen hücreler satırdan tamamen çıkıyor, geriye kalan hücreler
   colgroup'taki SIRAYA göre eşleşiyor: Durum → purc-price, Termin → purc-total.
   Eski kural bu ikisini 0'a çektiği için `stok.fiyat_gizle` izinli kullanıcıda
   DURUM ve TERMİN kolonları 0px oluyordu (ölçüldü: 13+13 hücre taşıyor, seçici ve
   tarih girdisi görünmüyor). Doğru çözüm: kaymayı hesaba katıp genişlikleri KAYDIR —
   sıfırlanacak olan artık SON İKİ kolondur. */
/* 🔴 BU İKİ DEĞER TÜREVDİR: `.purc-status` ve `.purc-due`nin GÜNCEL genişliğini
   taşımak zorundalar. 1.273.2'de Durum 102 → 97px'e indirildi ama bu satır 102'de
   kaldı ve fiyat gizli kullanıcıda Durum kolonu 5px fazla genişledi (kontrol turu
   yakaladı). Aşağıdaki ikisini DEĞİŞTİREN, yukarıdaki `.purc-status`/`.purc-due`
   satırlarını da değiştirmek zorundadır — ve tersi. */
#pur-shell.prices-hidden .pur-table > colgroup > .purc-price  { width:  97px; }  /* → Durum (.purc-status ile AYNI) */
#pur-shell.prices-hidden .pur-table > colgroup > .purc-total  { width: 116px; }  /* → Termin */
#pur-shell.prices-hidden .pur-table > colgroup > .purc-status,
#pur-shell.prices-hidden .pur-table > colgroup > .purc-due    { width: 0; }
/* ═══ "TESLİM ALINDI" SEKMESİ — kendi kolon düzeni (.pur-table--recv) ═══════════════
   Kullanıcı kuralı: teslim alınan ürün TEK SATIRDA okunsun (gelen adet · sipariş adedi ·
   geliş tarihi · fatura no akordeonu açmadan görünür). Teslim BİTMİŞ satırda Rezerve /
   Kritik / Termin planlama kolonlarıdır ve bilgi taşımaz → yerlerini bu dörtlü alır.

   🔴 DURUM KOLONU DA YOK: sunucu bu sekmede `status = 'received'` süzüyor, kolonun 100'de
   100'ü AYNI değeri taşıyordu; üstelik rozet 115px istiyor, kolon 102px'ti ve metin
   kırpılıyordu (ölçüldü). Kolon sayısı 12 → 11; JS tarafında `PUR_COLS` TEK kaynaktır ve
   akordeon colspan'i / iskelet / hata satırı oradan okur.

   GENİŞLİKLER ÖLÇÜLDÜ, TAHMİN EDİLMEDİ (gerçek fabrika verisi, 8 ekran genişliğinde
   `td.scrollWidth > td.clientWidth` taramasıyla; belirleyici ölçü 768px'te alınır — orada
   satır 44px ve yazı büyür, yani EN GENİŞ ihtiyaç orada doğar):
     Gelen "5000 adet 📦" 107 → 108 · Sipariş "150 mt +151,8 ?" 114 → 116 · Stok "113.3" 46 → 48
     Geliş Tarihi "03.07.2026 2×" 115 → 116 (rozet 4 haneli yılın yanına sığmalı) · Fatura No 102.
   Kalan alanın TAMAMI Ürün'e verildi (taban 212 → 211, pratikte AYNI): bu sekmede dört kolon eksildiği için
   ürün adı artık kırpılmadan sığıyor.
   Toplam: 87+211+108+116+48+148+85+116+102+99+94 = 1214 (+30 seçim kolonu = 1244) —
   taban düzenle BİREBİR aynı bütçe, yani sekme değiştirmek tablo genişliğini oynatmaz.

   🔴 FİYAT GİZLİYKEN: `.pur-amt` hücreleri bu düzende SON İKİ kolondur. İkisi
      `display:none` olunca kalan 9 hücre colgroup'un ilk 9 col'una birebir oturur —
      taban düzendeki "kolon eşleşmesi KAYAR" tuzağı burada doğmaz. AMA artan iki col
      genişliğini TUTMAYA devam eder: taban `.prices-hidden` kuralının verdiği 102+116px
      hiçbir hücreye denk gelmediği için sağda 223px ÖLÜ ŞERİT bıraktı ve tablo 1244 →
      1269px'e ŞİŞTİ (ölçüldü, 1600px kap). Bu yüzden bu düzende ikisi de SIFIRLANIR. */
#pur-shell.prices-hidden .pur-table--recv > colgroup > .purc-price,
#pur-shell.prices-hidden .pur-table--recv > colgroup > .purc-total { width: 0; }
/* 🔴 1.272.0 — Tedarikçi kolonu iki düzende de ORTAK (`.purc-sup` 148 → 160).
   Bu düzende Miktar kolonu YOK, yani 12px'i geri verecek başka bir kolon lazım:
   bütçe fazlası en çok Ürün'deydi (taban düzende 212, burada 211 — dört kolon
   eksildiği için ad zaten kırpılmadan sığıyordu). Ayrıca "Gelen" 108 → 110 oldu
   (aşağıdaki nota bak), o 2px de Ürün'den geldi → 211 − 12 − 2 = 197. TOPLAM YİNE
   1244: 87+197+110+116+48+160+85+116+102+99+94 = 1214 (+30 seçim kolonu).
   Sekme değiştirince tablo genişliği oynamaz — o sözleşme korundu. */
/* 🔴 1.273.1 — SEKME GENİŞLİK PARİTESİ GERİ ALINDI. "Eski Sip." kolonu (+66px)
   YALNIZ taban düzene eklendiği için taban 1289px, teslim düzeni 1219px olmuştu:
   sekme değiştirince tablo 70px daralıyor, tüm kolonlar yerinden oynuyordu (yukarıdaki
   sözleşme tam bunu yasaklıyor). 70px, kullanıcının yer istediği İKİ metin kolonuna
   verildi: Ürün 197 → 232, Tedarikçi 147 → 182. Bu sekmede dört kolon eksik olduğu
   için ikisi de zaten en bol yere sahipti; ölçüm 0 kırpma gösteriyor. */
/* 🔴 1.310.0 — ORAN YENİDEN DAĞITIMI (kullanıcı: "oran orantı kuralımıza uymuyor").
   ÖLÇÜLDÜ (1244px kap, ölçüm span'i HÜCRENİN İÇİNE konarak — klon yöntemi fontu
   devralmadığı için sayıları şişiriyordu, o tuzağa düşülmedi). "açık" = iç alan − ihtiyaç:
     Ürün +97 · Gelen +68 · Sipariş +42 · Geliş Tarihi +41 · Tutar +33 · Tarih/Stok +17
     🔴 Tedarikçi  ("İNEGÖL STRAFOR SAN. TİC. LTD. ŞTİ." 183px istiyor, 174px vardı → 2 satıra sarıyordu)
     🔴 Talep Eden ("Muhammed Çağlayan"  98px istiyor,  71px vardı → 2 satıra sarıyordu)
   🔴 İKİ İHTİYAÇ DA HÜCRENİN KENDİ YAZI BOYUNDA (11px `.pur-ell`) ölçüldü. İlk turda
      başlığın yazı boyuyla (9.5px) ölçülmüştü ve "Muhammed Çağlayan" 94px sanılıyordu;
      kolon 105px'e çıkarılınca 1px eksik kalıp HÂLÂ sarıyordu (ölçümle yakalandı).
   Ürün'ün 97px'lik açığından 45px alınıp iki aç kolona verildi; Ürün'de hâlâ ~52px pay
   var ve zaten `.pur-ell` + `title` ile kırpılabilir bir kolondur, ötekiler değil.
   🔴 DEĞİŞİKLİK YALNIZ TESLİM DÜZENİNDE: `.purc-sup`/`.purc-req` taban düzenle
      PAYLAŞILDIĞI için burada recv'e ÖZEL yazıldı — taban (13 kolonlu) düzenin bütçesi
      bir bayt bile oynamıyor, 1.273.3'te Ürün'e verilen yer orada duruyor.
   🔴 TOPLAM SABİT: 82+199+110+116+52+198+108+116+102+85+91 = 1259 (fare rejimi) ·
      82+193+110+116+52+198+108+116+102+95+91 = 1263 (dokunmatik) — ikisi de ESKİ
      toplamlarıyla birebir aynı, yani sekme değiştirince tablo genişliği ZIPLAMAZ. */
/* 🔴 1.406.0 — İLK KOLON TESLİM TARİHİ (`.purcr-tarih` 116, eski "Geliş Tarihi" kolonunun ölçülmüş genişliği:
   "03.07.2026 2×" + akordeon oku), ayrı tarih kolonu kalktı. Eski ilk kolonun 82px'i Ürün'e verildi: 193 → 275 ·
   199 → 281 (fare). TOPLAM SABİT: 116+281+110+116+52+198+108+102+85+91 = 1259 (fare) · 1263 (dokunmatik). */
#pur-shell .pur-table--recv > colgroup > .purcr-tarih { width: 116px; }
#pur-shell .pur-table--recv > colgroup > .purc-prod   { width: 275px; }
#pur-shell .pur-table--recv > colgroup > .purc-sup    { width: 198px; }
#pur-shell .pur-table--recv > colgroup > .purc-req    { width: 108px; }
/* 🔴 TESLİM DÜZENİNİN ÜRÜN TELAFİSİ (1.273.3). Taban düzende Talep Eden (−6) ve
   B.Fiyat (−10) daraltıldı; bu iki kural PAYLAŞILDIĞI için teslim düzeni de 16px
   kaybediyor. Sekme genişlik paritesi (ikisi de 1289px) korunsun diye o 16px buranın
   Ürün'üne geri verilir: 232 → 248.
   🔴 BU BLOK, YUKARIDAKİ `.purc-sup` SATIRINDAN SONRA OLMAK ZORUNDA. Recv override'ları
   media DIŞINDA ve (1,2,0) özgüllükte; media özgüllük EKLEMEZ. Kural daha yukarıdaki
   `@media`e konsaydı, kaynak sırasında sonra gelen koşulsuz recv kuralları onu ezer ve
   masaüstünde Ürün 232px'te kalırdı (sessiz, ölçümde 1273px olarak görünürdü). */
@media (min-width: 769px) and (pointer: fine) {
    /* 🔴 1.310.0 — 244 → 199: Tedarikçi (+16) ve Talep Eden (+29) için gereken 45px
       buradan alındı (bkz. yukarıdaki ölçüm). Toplam 1259 SABİT kaldı. */
    #pur-shell .pur-table--recv > colgroup > .purc-prod { width: 281px; }
}
/* 🔴 108 → 110: ÖLÇÜLDÜ (60 satırlık gerçek veri) — ondalıklı bir gelen miktarda
   ("301,8 mt 📦") satır içi içerik 93,3px istiyor, 108px kolonun iç alanı 92px'ti.
   İçerik sağa yaslı olduğu için taşma KIRPILMIYOR, TÜM SATIRI 1,8px sağa kaydırıyordu
   ve o tek satırın rakamı 59 komşusuyla hizasız duruyordu. `scrollWidth` taraması bunu
   "kırpılmış" saymaz (kabın `text-overflow: ellipsis`i var), yani sayısal sonda
   YAKALAYAMAZ — hizayı doğrudan ölçen sonda yakaladı. 2px Ürün'den alındı. */
#pur-shell .pur-table--recv > colgroup > .purcr-recv  { width: 110px; }
#pur-shell .pur-table--recv > colgroup > .purcr-ord   { width: 116px; }
/* 🔴 48 → 52: "stok 100.000 almalı" kuralı BU DÜZENDE DE geçerli ve tutmuyordu
   (1.273.3'te yakalandı — önceden var olan açık). Gerçek ihtiyaç canlı hücrede
   ölçüldü: 43,7px metin + 8px dolgu = 52px; 48px'te altı hane KIRPILIYORDU.
   4px, aşağıdaki Ürün telafisinden düşülür → toplam yine 1289. */
#pur-shell .pur-table--recv > colgroup > .purc-stock  { width:  52px; }
#pur-shell .pur-table--recv > colgroup > .purcr-doc   { width: 102px; }

/* 🔴 GELEN / SİPARİŞ HÜCRELERİ FLEX OLAMAZ — ÖLÇÜLMÜŞ HATA.
   Taban düzendeki `td.pur-qtycell { display:flex }` girdiye kalan alanı vermek içindir ve
   orada TEK BAŞINA durur. Bu düzende iki miktar hücresi YAN YANA düşüyor; Chrome ardışık
   flex `<td>`leri TEK anonim tablo hücresinde topladı ve hücreler 32px kalırken SATIR
   32 → 64px'e çıktı (4/4 satırda ölçüldü). CSS'teki "bu iki hücreyi flex yapma" uyarısının
   (Durum/Termin) aynısı. Burada içerik salt okunur metin → normal tablo hücresi yeterli. */
/* 🔴 `overflow: hidden` ŞART: `white-space: nowrap` tek başına taşan içeriği KIRPMAZ,
   komşu hücrenin ÜSTÜNE çizdirir (ölçüldü: 768px'te "1000 palet −500" 107px istiyordu,
   kolon 100px → 7px Stok hücresinin üzerine taşıyordu ve `scrollWidth` taraması bunu
   "kırpılmış" saymıyordu çünkü kırpılmıyordu — üste biniyordu). */
.pur-rqty {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
/* 🔴 "Gelen" sütununda da rakamlar aynı x'te bitsin: sağdaki birim etiketi doğal
   genişlikteydi ("mt" 13px ↔ "paket" 26px) ve sayının bittiği yer satırdan satıra
   14px oynuyordu (ölçüldü: 60 satırda 3 farklı sağ kenar, 621,9–636). `min-width`
   yalnız blok/inline-block'ta çalışır → etiket inline-block'a alındı; uzun birimde
   yuva BÜYÜR (kırpma yasak), kısa birimde hizayı tutar. Lot düğmesinin boş yuvası
   (`.pur-lot-gap`) zaten sabit 22px. */
.pur-rqty .pur-unit { display: inline-block; min-width: 28px; text-align: left; }
/* Gelen miktar — satırın ASIL sayısı, kalın yazılır.
   🔴 RENK BURADA KONUŞMAZ: teslim alınmış satır `order-row-done` sınıfını taşıyor ve
   projenin standart kuralı (`.order-row-done * { color: … !important }`) TÜM torunları
   yeşile boyuyor — "tamamlanan satır yeşil yazı" sözleşmesi. Buradaki renk beyanı yalnız
   akordeon panelinde (o satır `order-row-done` DEĞİL) etkilidir. Ayrım bu yüzden renge
   değil, KALINLIĞA ve işarete (+/−) yüklendi; `!important` ile karşı kural yazılmadı
   (projede `!important` yasak ve iki kuralın savaşı bakımı imkânsız kılar). */
.pur-recvval { color: var(--pri-text); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Sipariş ↔ gelen sapması ("+2" / "−5") ve bilinemezlik işareti ("?").
   🔴 SEMANTİK RENK BURADA İMKÂNSIZ, DENEME: satır `order-row-done` taşıyor ve projenin
      `.order-row-done * { color: … !important }` kuralı TÜM torunları yeşile boyuyor.
      Fazla/eksik için amber/gül beyan edilmişti; ÖLÇÜLDÜ — 45 rozetin 45'i aynı yeşile
      hesaplanıyordu, yani iki beyan da ÖLÜYDÜ. Ayrımı taşıyan şey RENK değil İŞARETTİR
      (+/−) ve `title` metnidir. Karşı kural `!important` ile yazılmadı: projede yasak.
   🔴 `flex: 0 0 auto` da ÖLÜYDÜ (ebeveyn `.pur-rqty` flex değil) — kaldırıldı. */
.pur-rdiff {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
    background: var(--pri-light);
    vertical-align: middle;
}
/* "…?" = sipariş miktarı kayıtta yok (tam teslimde silinir) → farkın NEDENİ bilinmiyor.
   Kesikli çerçeve "bu sayıya güvenme, başlığı oku" demenin renk gerektirmeyen yoludur
   (renk bu satırda `!important` ile yeşile sabitli — bkz. yukarıdaki not). */
.pur-runsure { cursor: help; box-shadow: inset 0 0 0 1px var(--border); }
/* Geliş tarihi / fatura no değeri — sayı hizası ve kırpma sözleşmesi.
   🔴 Kırpma KABIN kendisinde yapılır, `.pur-ell` ile DEĞİL: bu hücrelerde değerin yanında
   bir rozet durabiliyor ("2×" çok seferli teslim / "+2" başka belgeler) ve `.pur-ell`in
   `max-width:100%`i rozeti hücrenin dışına itiyor. Kabın `overflow:hidden` +
   `text-overflow:ellipsis` çifti ikisini BİRLİKTE kırpar. */
.pur-rdoccell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pur-rtarihcell .pur-rval, .pur-dd-val .pur-rval { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pur-rdoccell  .pur-rval { font-weight: 600; }
/* "3×" (çok seferli teslim) ve "+2" (birden çok belge) rozeti — aynı görsel dil. */
.pur-rchip {
    display: inline-block;
    margin-left: 4px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 5px;
    color: var(--pri-text);
    background: var(--pri-light);
    vertical-align: middle;
}

/* (Sipariş No / Tarih taşma supabı artık .pur-idwrap / .pur-idno taban kuralında —
   Satınalma da aynı korumayı alsın diye TEK yere taşındı, burada tekrarlanmaz.) */
.ord-table .ord-rsv-tag { display: inline-flex; align-items: center; color: var(--violet-ink, #7c5cbf); opacity: .85; }
.ord-table .ord-rsv-tag svg { width: 12px; height: 12px; }
.ord-del-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rose-ink, #ab4a4f); background: rgba(215, 107, 113, .1); color: var(--rose-ink, #ab4a4f); font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 7px; transition: background .12s, color .12s, border-color .12s; }
.ord-del-btn:hover { background: var(--rose, #d76b71); border-color: var(--rose, #d76b71); color: #fff; }
.ord-del-btn:disabled { opacity: .5; cursor: default; }
.ord-del-btn svg { width: 14px; height: 14px; }
.ord-del-locked { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-style: italic; white-space: nowrap; cursor: help; }
.ord-del-locked svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARİ YÖNETİMİ tablosu — yoğunluk (Sipariş/Satınalma ile AYNI mantık)
   ═══════════════════════════════════════════════════════════════════════════
   ÖLÇÜLDÜ (1366px, gerçek veri): satır medyanı 46px, dağılım 32/33/46/47 — dağınık.
   Zorlayan hücreler: "İl / İlçe" 35px (107px kolonda 2 satır), "İletişim Kişisi" 34px,
   çok para birimli "Bakiye" 38px (iki <div> alt alta).

   🔴 KOLON GENİŞLİKLERİ BURADAN DEĞİŞTİRİLEMEZ: colgroup genişlikleri satır içi
      style ile yazılmış (peron-mod-stock.js) ve satır içi stil !important olmadan
      ezilemez — !important yasak. Bu yüzden çözüm genişlik DEĞİL, "iki satır da
      32px'e sığsın": dikey dolgu 0 + satır boşluğu 1.2 →
          2 × (12px × 1.2) = 30px ≤ 32px  ✓   (İl/İlçe, satır içi 12px yazı)
          2 × (12px   × 1.2) = 28.8px       ✓   (Cari Adı, İletişim Kişisi)
          (12 + 11.5) × 1.2  = 28.2px       ✓   (iki para birimli Bakiye)
      Tek satırlık hücreler zaten `height: var(--tbl-row-h)` tabanına oturuyor →
      dolgunun 0'a inmesi onlarda GÖRÜNMEZ. HİÇBİR HÜCRE KIRPILMAZ.
   🔴 Özgüllük (1,1,3): hem dosya sonundaki sözleşme kuralını (0,1,3) hem de
      `.peron-table--fixed > tbody > tr > td { vertical-align: top }` kuralını geçer;
      dikey ortalama olmadan tek satırlık içerik hücrenin tepesine yapışırdı. */
#contacts-shell .peron-table > tbody > tr > td {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    vertical-align: middle;
}

/* 1.441.0 — Cari Yönetimi başlığı ve özet kartları kaldırıldı; "Dışa Aktar" + "Yeni Cari" süzgeç çubuğunun SAĞ
   ucunda (Yeni Cari en sonda). Çubuk sarınca eylem grubu bulunduğu satırda sağa yaslanır (ayrı satır AÇILMAZ —
   768px'te zorla tam genişlik çubuğu 3 satıra çıkarıyordu, ölçüldü 161px). */
#contacts-shell .ctc-eylem {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
/* Birincil eylem ≥ 36px (kademeli eşik): araç çubuğunda 34px ölçüldü. */
#contacts-shell .ctc-eylem .peron-btn { min-height: 36px; }

/* ── Rezerve sütunu (Satınalma + Sipariş) — tıklanabilir miktar rozeti ── */
.pur-reserve-btn {
    border: 0;
    background: rgba(190, 116, 56, .12);
    color: var(--amber-ink);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    transition: background .12s;
}
.pur-reserve-btn:hover { background: rgba(190, 116, 56, .22); }

/* ═══ DOKUNMA HEDEFLERİ — satır içi .pur-* denetimleri (yalnız dokunmatik) ═══════════
   ÖLÇÜLDÜ (390px, touch): chevron 22×22 · lot ikonu 26×21 · rezerve rozeti 37×18 ·
   tedarikçi "değiştir" simge düğmesi 20×20 → dördü de 44px kuralının ALTINDA.
   Denetimin KENDİSİNİ büyütmek satır yüksekliğini (44px) ve kolon bütçesini bozardı;
   bunun yerine görünmez bir ::after katmanı hedefi 44×44'e taşır — yerleşim, görünüm
   ve satır boyu AYNEN kalır (uygulamada .nl-mat-cbwrap'ta kullanılan desenin aynısı).
   Komşu ETKİLEŞİMLİ öğeyle çakışma ölçüldü: lot ikonunun katmanı soluna 9px taşıyor,
   en yakın etkileşimli komşu (miktar girdisi) 25px uzakta → çakışma yok. */
@media (pointer: coarse) {
    .pur-acc-toggle,
    .pur-lot-icon,
    .pur-reserve-btn,
    .pur-supplier-edit { position: relative; }
    .pur-acc-toggle::after,
    .pur-lot-icon::after,
    .pur-reserve-btn::after,
    .pur-supplier-edit::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
    /* 🔴🔴 44px KUTU KOMSU KOLONU KAPLIYORDU (1.364.0 tarayici denetimi).
       Eski kural `width:44px; height:44px; padding:12px; background-clip:content-box`
       yaziyordu, yanindaki yorum da "gorunen kare 20px'te kalir" diyordu. IKISI DE YANLISTI:
       🔴 Chrome, `appearance:auto` olan YERLESIK `<input type=checkbox>` uzerinde
          yazar `padding`i UYGULAMIYOR — olculen `getComputedStyle().padding` = 0px.
          Yani content-box = border-box ve `background-clip: content-box` HICBIR ISE
          YARAMIYOR; kutu GORSEL OLARAK tam 44x44 render ediliyordu.
       🔴 OLCULDU (Satinalma, 1440px, pointer:coarse): kolon 262-292 (30px), kutu
          270-314 (44px) -> komsu "TARIH" baslik hucresinin uzerine 22px biniyordu.
       🔴 Yorum "Kolon da 46px'e cikar" diyordu ama kural 30px yaziyordu — kolon
          HIC genisletilmemisti. Kok neden buydu.
       COZUM 24x24: WCAG 2.2 §2.5.8 MUTLAK TABANI. Bu BUYUTME DEGIL, 44'ten KUCULTMEDIR.
       Kolon Satinalma'da 30 -> 36px: `td` `padding: 0 8px !important` tasidigi icin
       24px kutu 30px kolonda 2px tasiyordu; 36px projenin KENDI genel varsayilanidir (:5496).
       🔴 KURAL ARTIK `#pur-shell`E OZEL DEGIL: dokunmatik dizustu/2-in-1'de
          (coarse + genis ekran) DIGER tablolarin kutulari 15px'te kaliyordu — tabanin
          ALTINDA. Cozum kardes ekranlara da tasindi.
       🔴 Gercek telefonda (<=640px) bu tablolar KART gorunumune dusuyor ve hic
          onay kutusu render edilmiyor; kural tabletleri ve dokunmatik dizustuleri kapsar. */
    .peron-row-cb { width: 24px; height: 24px; }
    #pur-shell .pur-table > colgroup > .peron-sel-col { width: 36px; }
}

/* Modal içindeki rezervasyon kırılım tablosu — peron-table min-width'i ezilir */
.peron-table.rsv-table { min-width: 0; }
.rsv-table th, .rsv-table td { white-space: normal; word-break: break-word; }

/* #3 — Sipariş listesine karışan üretim rezerve satırı (etiketle ayırt edilir) */
.order-row-reserve { background: rgba(190, 116, 56, .05); }
.order-row-reserve:hover { background: rgba(190, 116, 56, .1); }
.reserve-tag {
    margin-top: 3px;
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--peach, #be7438);
    background: rgba(190, 116, 56, .12);
    border-radius: 5px;
    padding: 1px 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   İHTİYAÇ LİSTESİ MODALI (nl-*) — malzeme bazlı toplu ihtiyaç + akordiyon.
   Sipariş Yönetimi → "İhtiyaç Listesi" butonu. createModal gövdesine gömülü;
   kendi yapışkan başlığı/altlığı vardır (varsayılan footer JS ile kaldırılır). */
.peron-modal-body.nl-host { padding: 0; overflow: hidden; display: flex; }
.nl-root { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--card-bg); }

.nl-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--content-bg); border-bottom: 1px solid var(--border); }
.nl-all { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; -webkit-user-select: none; user-select: none; }
.nl-all-cb { width: 16px; height: 16px; accent-color: var(--pri); cursor: pointer; }
.nl-count-chip { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--border-light); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.nl-search { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--r-md, 9px); color: var(--text-muted); }
.nl-search:focus-within { border-color: var(--pri); }
.nl-search svg { flex-shrink: 0; }
.nl-search-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13px; color: var(--text-primary); }
.nl-search-input::placeholder { color: var(--text-muted); }
/* 1.427.0 — kategori süzgeci (stok kartının kategorisi) + satır rakamının etiketi (Eksik / Yolda / Stokta). */
.nl-toolbar .nl-cat { box-sizing: border-box; flex: 0 1 220px; min-width: 0; height: 34px; font-size: 12px; }
.nl-sub-cat { font-weight: 600; color: var(--text-secondary); }
.nl-qty-lbl { margin-right: 4px; font-size: 10px; font-weight: 600; color: var(--text-muted); }

.nl-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.nl-group { border-bottom: 1px solid var(--border-light); }
.nl-group[hidden] { display: none; }
.nl-group:last-child { border-bottom: none; }
.nl-mat { display: flex; align-items: center; gap: 10px; padding: 10px 18px; cursor: pointer; transition: background .15s; }
.nl-mat:hover { background: var(--pri-light); }
.nl-mat:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.nl-group.open > .nl-mat { background: var(--pri-light); }
.nl-mat-cbwrap { flex-shrink: 0; display: inline-flex; padding: 4px; margin: -4px; }
.nl-mat-cb { width: 16px; height: 16px; accent-color: var(--pri); cursor: pointer; }
.nl-chev { flex-shrink: 0; display: inline-flex; color: var(--text-muted); transition: transform .18s ease; }
.nl-chev svg { width: 16px; height: 16px; }
.nl-group.open > .nl-mat .nl-chev { transform: rotate(180deg); color: var(--pri-text); }
.nl-mat-main { flex: 1; min-width: 0; }
.nl-mat-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-mat-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.nl-mat-figs { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.nl-mat-total { font-size: 14px; font-weight: 700; color: var(--rose-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-unit { font-size: 10px; font-weight: 500; color: var(--text-muted); margin-left: 3px; }
.nl-stock { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--border-light); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nl-stock.low { color: var(--rose-ink); background: rgba(194,84,90,.09); border-color: var(--pri-border); }

.nl-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s ease; background: var(--content-bg); }
.nl-children-inner { overflow: hidden; min-height: 0; }
.nl-group.open > .nl-children { grid-template-rows: 1fr; }
.nl-child { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 40px; border-top: 1px solid var(--border-light); font-size: 12px; }
.nl-child:first-child { border-top: none; }
.nl-child:hover { background: var(--pri-light); }
.nl-child-cbwrap { flex-shrink: 0; display: inline-flex; padding: 4px; margin: -4px; }
.nl-child-cb { width: 16px; height: 16px; accent-color: var(--pri); cursor: pointer; }
.nl-child-ord { flex-shrink: 0; min-width: 78px; font-weight: 600; color: var(--pri-text); font-variant-numeric: tabular-nums; }
.nl-child-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-cari { color: var(--text-secondary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.nl-cust { color: var(--text-muted); font-size: 11.5px; }
.nl-child-due { flex-shrink: 0; min-width: 72px; text-align: right; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-child-req { flex-shrink: 0; min-width: 78px; text-align: right; font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-child-qty { flex-shrink: 0; min-width: 78px; text-align: right; font-weight: 700; color: var(--rose-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-send-one { flex-shrink: 0; }
.nl-cancel-one { flex-shrink: 0; }
.nl-send-grp { flex-shrink: 0; white-space: nowrap; }

/* ── 1.380.0 — NET MOTOR ETİKETLERİ ─────────────────────────────────────────
   Liste artık canlı hesaplanır; satırın NEDEN listede olduğunu küçük etiketler
   söyler. Renkler token + color-mix: gece modu token'ları ezerek kendiliğinden uyar. */
.nl-child-tags { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.nl-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10px; font-weight: 700; white-space: nowrap; color: var(--text-secondary); background: var(--border-light); }
/* 🔴 ZEMİN OPAK KARIŞIM (kart zeminiyle %7-8): tasarım denetimi açık temada saydam
   karışımı ölçtü — kabın krem zemini üstünde 3,94 / 4,47 / 4,46:1 (AA altı). Opak
   karışım zemini kaptan BAĞIMSIZ yapar; gece modunda kart zemini koyu olduğundan
   aynı formül koyu bir zemin üretir. */
.nl-tag--prod   { color: var(--violet-ink); background: color-mix(in srgb, var(--violet-ink) 7%, var(--card-bg)); }
.nl-tag--topup  { color: var(--amber-ink);  background: color-mix(in srgb, var(--amber) 8%, var(--card-bg)); }
.nl-tag--manual { color: var(--pri-text);   background: color-mix(in srgb, var(--pri) 8%, var(--card-bg)); }
.nl-tag--way    { color: var(--green-ink);  background: color-mix(in srgb, var(--green-ink) 7%, var(--card-bg)); }
.nl-child--way { color: var(--text-muted); }
.nl-child--way .nl-child-ord { color: var(--text-muted); }
.nl-child-qty--way { color: var(--green-ink); font-weight: 600; }
.nl-group--way .nl-mat-total { color: var(--text-muted); }
.nl-sub-way { color: var(--green-ink); font-weight: 600; }
.nl-sub-way.is-old { color: var(--amber-ink); }
.nl-sub-neg { color: var(--rose-ink); font-weight: 600; }
.nl-way-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 11px; font-weight: 600; color: var(--text-secondary); cursor: pointer; -webkit-user-select: none; user-select: none; }
.nl-way-toggle input { width: 15px; height: 15px; accent-color: var(--pri); cursor: pointer; }
.nl-bd-short { color: var(--rose-ink); font-weight: 700; }

/* ── REZERV İPTAL ŞERİDİ (1.379.0) — satırın ALTINDA açılan onay ────────────
   Ayrı overlay YOK: `closeModal` her iki overlay'i birden sildiği için modalın
   içinden ikinci bir modal açmak İhtiyaç Listesi'ni de kapatırdı. */
.nl-cx { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 18px 10px 40px; background: rgba(194, 84, 90, .06); border-top: 1px solid var(--border-light); }
.nl-cx-lbl { flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rose-ink); }
/* 🔴 `.peron-input` temel sınıfı BİLEREK duruyor: mobil iOS kalkanı (16px) onu
      seçiciyle yakalıyor. Buradaki punto yalnız masaüstü içindir, kalkan sonra gelip
      dar ekranda ezer — sabit `height` yerine `min-height`, 16px'te kırpılmasın.
   🔴 12px, 12,5px DEĞIL: yarım adımlar bu kod tabanında kapalıdır ve t147'nin D bölümü
      ölçüyor — 12,5px YALNIZ üç belgeli mobil sözleşme yerinde kalır. Satırın kendi
      gövdesi (.nl-child) zaten 12px; hiyerarşi de böyle korunuyor. */
.nl-cx-reason { flex: 1 1 200px; width: auto; height: auto; min-height: 30px; padding: 4px 10px; font-size: 12px; }
.nl-cx-reason.is-err { border-color: var(--rose); }

/* ── İLAVE SİPARİŞ (1.380.0) — stoktan karşılanan satır + onay şeridi ─────────
   Satır bir BİLGİ satırıdır (yoldakiyle aynı sessiz ton); tek eylemi "İlave Sipariş".
   Şerit iptal şeridinin desenidir, rengi uyarı (amber): işlem geri alınabilir ama
   motorun "karşılanmış" dediği bir ihtiyaç için bilinçli bir ek alım. */
.nl-tag--stock { color: var(--text-secondary); background: color-mix(in srgb, var(--text-secondary) 8%, var(--card-bg)); }
.nl-child--stock { color: var(--text-muted); }
.nl-child--stock .nl-child-ord { color: var(--text-muted); }
.nl-child-qty--stock { color: var(--text-secondary); font-weight: 600; }
.nl-ilave-one { flex-shrink: 0; white-space: nowrap; }
.nl-ix { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 18px 10px 40px; background: color-mix(in srgb, var(--amber) 7%, var(--card-bg)); border-top: 1px solid var(--border-light); }
.nl-ix-lbl { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 700; color: var(--amber-ink); }
.nl-ix-miktar { display: inline-flex; align-items: center; gap: 4px; }
.nl-ix-qty { box-sizing: border-box; width: 110px; height: auto; min-height: 30px; padding: 4px 8px; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.nl-ix-qty.is-err { border-color: var(--rose); }
/* 🔴 Şeritteki ONAY düğmeleri birincil/yıkıcı eylemdir (talep açar / ihtiyacı kapatır):
   ≥36px HER genişlikte. `.peron-btn.sm` tabanı 28px ve 36px'e yalnız ≤768px'te
   çıkıyordu — tasarım denetimi 820-1440px'te 28px ölçtü. */
.nl-ix-onay, .nl-cx-onay { min-height: 36px; }

/* Grup içi "TÜM rezervasyon kırılımı" — bu stoğa (ör. 500 mt) ait tüm cari/müşteri rezervleri. */
.nl-breakdown-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; box-sizing: border-box; margin: 8px 18px 4px 40px; padding: 5px 11px; border: 1px dashed var(--border); background: transparent; color: var(--pri-text); font-size: 11.5px; font-weight: 600; border-radius: 7px; cursor: pointer; transition: background .12s, border-color .12s; }
.nl-breakdown-btn:hover { background: var(--pri-light); border-color: var(--pri); }
.nl-breakdown-btn.open { background: var(--pri-light); border-style: solid; border-color: var(--pri); }
.nl-breakdown { margin: 0 18px 10px 40px; }
.nl-breakdown[hidden] { display: none; }
.nl-bd-loading { padding: 16px; display: flex; justify-content: center; }
.nl-bd-empty { padding: 12px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.nl-bd-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 4px 0 6px; }
.nl-bd-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.nl-bd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nl-bd-table th { text-align: left; padding: 6px 10px; background: var(--content-bg); color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.nl-bd-table td { padding: 6px 10px; border-top: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; }
.nl-bd-table code { font-size: 11px; font-weight: 700; color: var(--pri-text); }
.nl-bd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nl-bd-foot-lbl { text-align: right; font-weight: 600; }
.nl-bd-foot-val { font-weight: 700; }
.nl-bd-table tfoot td { border-top: 1px solid var(--border); background: var(--content-bg); }
.nl-bd-sent { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--green-ink); background: rgba(34,150,94,.12); border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.nl-bd-active { display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--amber-ink, #95592b); background: rgba(190,116,56,.12); border-radius: 5px; padding: 1px 7px; white-space: nowrap; }

.nl-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--content-bg); border-top: 1px solid var(--border); }
.nl-selcount { font-size: 12px; color: var(--text-secondary); }
.nl-selcount-n { color: var(--pri-text); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 🔴🔴 320px'TE DUGME KIRPILIYOR VE ERISILEMIYORDU (1.364.0 tasarim denetimi).
   OLCULDU: `.peron-modal-body.nl-host` clientWidth 307 / scrollWidth 352 = 45px tasma;
   kap `overflow: hidden` oldugu icin KAYDIRILAMIYOR, KIRPILIYOR. "Secilenleri
   Satinalmaya Gonder" dugmesi sag kenardan 27px kesiliyordu — yani islem 320px'te
   YAPILAMIYORDU. 360px'te tasma 6px, 390px'te yok.
   Kok neden: bu satir `nowrap`ti (varsayilan) ve min-content = 242+8+66+36 = 352px.
   🔴 `.nl-root { min-width: 0 }` da zorunlu: flex cocugunun varsayilan
      `min-width: auto` degeri 352'yi TABANA kilitliyor ve sarma tek basina yetmiyor. */
.nl-footer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nl-footer-actions .peron-btn { min-height: 36px; }

.nl-empty { text-align: center; padding: 48px 24px; }
.nl-empty-ico { display: inline-flex; color: var(--green); margin-bottom: 10px; }
.nl-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.nl-empty-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Header butonundaki gönderilmemiş-ihtiyaç sayısı rozeti */
.nl-btn-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--pri-on); background: var(--pri-strong); border-radius: 999px; font-variant-numeric: tabular-nums; }
/* Açık display kuralı UA [hidden]{display:none}'ı ezer → guard şart (kritik-stok gotcha'sı). */
.nl-btn-badge[hidden] { display: none; }

html[data-peron-theme="dark"] .nl-stock.low { background: rgba(215,107,113,.14); }
html[data-peron-theme="dark"] .nl-mat:hover,
html[data-peron-theme="dark"] .nl-child:hover,
html[data-peron-theme="dark"] .nl-group.open > .nl-mat { background: rgba(120,160,210,.10); }

/* 🔴 1.380.0 — TASARIM DENETİMİ: 768-820px'te sabit genişlikli kardeşler (sipariş no,
   etiket, termin, Ger., eksik, iki düğme ≈ 583px) "kim için" alanını 22px'e eziyordu.
   Satır sarması 640'tan 900px'e genişletildi; alan kendi satırına iner. */
@media (max-width: 900px) {
    .nl-child { flex-wrap: wrap; }
    .nl-child-who { flex-basis: 100%; order: 5; white-space: normal; }
}
/* 1.427.0 — kategori seçicisi dokunmatikte 16px (iOS odak-zoom kalkanı). Tam satıra ZORLANMAZ: boşluğu doldurur, yalnız
   sığmazsa alt satıra iner (tasarım ölçümü: zorla tam satır 768px'te araç çubuğunu 59 → 147px yapıyordu). */
@media (max-width: 768px) {
    .nl-toolbar .nl-cat { flex: 1 1 180px; height: auto; min-height: 40px; font-size: 16px; }
}
@media (max-width: 640px) {
    /* 🔴 1.380.0 — TASARIM DENETİMİ: rakam bloğu (`.nl-mat-figs`, flex-shrink:0, ~249px)
       malzeme adını 390px'te 41px'e, 320px'te 0px'e eziyordu ve 320px'te satır 11px
       taşıyordu. Başlık sarar: ad tam satır, rakamlar ve "Toplu Gönder" alt satırda. */
    .nl-mat { flex-wrap: wrap; row-gap: 6px; }
    .nl-mat-main { flex: 1 1 0; min-width: 0; }
    .nl-mat-name { white-space: normal; overflow-wrap: anywhere; }
    .nl-mat-figs { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
    .nl-mat-figs { gap: 8px; }
    .nl-mat-total { font-size: 13px; }
    .nl-child { flex-wrap: wrap; padding-left: 34px; }
    .nl-cx { padding-left: 34px; }
    .nl-cx-reason { flex-basis: 100%; }
    .nl-ix { padding-left: 34px; }
    .nl-ix-lbl { flex-basis: 100%; }
    .nl-ix-miktar { margin-right: auto; }
    .nl-child-who { flex-basis: 100%; order: 5; white-space: normal; }
    .nl-child-qty { margin-left: auto; }
    .nl-child-tags { order: 6; }
    /* 🔴 1.380.0 — mobil denetim (320px): kayıt 131px, ekranda ~2 kayıt. Sabit
       `min-width`ler (78/72/78px) ilk sırayı üçe bölüyordu. Artık ÜÇ sıra:
       (1) sipariş · termin · miktar  (2) kim için  (3) etiketler · Ger. · eylemler. */
    .nl-child-ord, .nl-child-due, .nl-child-req, .nl-child-qty { min-width: 0; }
    .nl-child-req { order: 6; margin-right: auto; text-align: left; }
    .nl-send-one, .nl-cancel-one, .nl-ilave-one { order: 7; }
    .nl-all-cb, .nl-mat-cb { width: 18px; height: 18px; }
    .nl-child-cb { width: 17px; height: 17px; }
}

/* Rezervasyon Kırılımı modalı — kısayol satınalma gönderimi (Görev: düzenlenebilir eksik). */
.rsv-hint { margin: 4px 2px 12px; padding: 9px 12px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); background: var(--pri-light); border: 1px solid var(--pri-border); border-radius: 8px; }
.rsv-sent { display: inline-block; font-size: 11px; font-weight: 700; color: var(--green); background: rgba(46,160,90,.10); border: 1px solid rgba(46,160,90,.35); border-radius: 6px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rsv-table th { white-space: nowrap; }

/* ── SİPARİŞ MAİLİ ÖNİZLEME DENETİMLERİ (1.380.0) ───────────────────────────
   Önizleme satır içi stilli (mailin kendisini taklit eder) ama DENETİMLERİN punto'su
   buradadır: satır içi yazılsaydı iOS kalkanı (telefonda 16px) onu ezemezdi — iOS
   16px altındaki girdiye odaklanınca sayfayı büyütür ve geri küçültmez. */
/* 1.381.0 — alıcı satırı (eski 5 satırlık açıklamanın yerine) + uzun önizleme + satır silme.
   🔴 Önizleme bilerek AÇIK "kâğıt"tır (mailin kendisini taklit eder), gece modunda da
      beyaz kalır — o yüzden sil düğmesinin renkleri kâğıda göre sabittir. */
.om-alici { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.om-alici-k { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.om-alici-ad { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.om-alici-e { color: var(--pri-text); overflow-wrap: anywhere; }
.om-alici-not { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--amber-ink); }
.om-sil {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: #8a94a3; cursor: pointer; transition: color .12s, border-color .12s, background .12s;
}
.om-sil svg { width: 14px; height: 14px; }
.om-sil:hover, .om-sil:focus-visible { color: #b1454b; border-color: #f1cdcf; background: #fdf3f3; outline: none; }
.om-bos { padding: 18px 8px; text-align: center; font-size: 12px; color: #64748b; border: 1px solid #ddd; }
/* Boy ekrandan türer: başlık + alıcı satırı + alt şerit ≈ 170px, kalan önizlemeye. Telefonda
   modal alt-sayfadır ve kendi gövdesi kayar → önizleme sınırsız. */
@media (min-width: 769px) {
    .peron-modal.om-modal { max-height: 94vh; max-height: 94dvh; }
    .om-modal .om-onizleme { max-height: calc(94vh - 170px); max-height: calc(94dvh - 170px); }
}
.om-ctl { font-size: 13px; }
.om-ctl--sm { font-size: 12px; }
/* Sınır 768: sipariş penceresi 768px'te de alt sayfadır (eşik öteki alt sayfa kurallarıyla aynı); 767'de
   kalınca tablet dikeyde girdiler 13 / 12px basılıyordu (iOS odakta sayfayı büyütür). */
@media (max-width: 768px) {
    .om-ctl, .om-ctl--sm { font-size: 16px; }
}

/* ── SİPARİŞ NOTU İŞARETİ (1.380.0) ─────────────────────────────────────────
   Kullanıcı: *"ürün isminin yanında sarı üçgenin içinde yanıp sönen bir ünlem işareti
   olsun, ünlemin üstünde 'sipariş notu var' yazsın"*. Üretici `A.siparisNotuIsareti`.
   Renk tokenı `--not-sari` (:root + gece modu); ipucu üstte, fareyle ve klavye odağıyla.
   Hareket azaltma tercihinde yanıp sönme DURUR, işaret kalır. */
.siparis-not-isaret {
    position: relative; display: inline-flex; flex-shrink: 0; box-sizing: border-box;
    width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px;
    cursor: help; outline: none;
}
.siparis-not-isaret svg { width: 100%; height: 100%; overflow: visible; animation: not-isaret-yan 1.1s ease-in-out infinite; }
.siparis-not-isaret .sni-ucgen { fill: var(--not-sari); stroke: var(--not-sari-kenar); stroke-width: 1.2; stroke-linejoin: round; }
.siparis-not-isaret .sni-unlem { fill: var(--not-sari-ink); }
@keyframes not-isaret-yan { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* 🔴 1.382.0 — İPUCU NOTUN KENDİSİNİ GÖSTERİR ve artık `::after` DEĞİL, panel köküne asılı
   sabit bir balondur (`.sni-balon`, peron-app.js `siparisNotuBalonu`). Kullanıcı: "sarı
   ünlemin üzerine mouse getirince not kısmını göstersin, açmama gerek kalmasın akordiyonu".
   `::after` tek satırlık sabit bir cümle taşıyordu ve tablonun kaydırma kabı (`overflow:auto`)
   onu 1.381.0'da İKİ KEZ kesti (kabın solunda ve tek satırlık listede) — sabit balon kaba
   bağlı değildir, o kusur sınıfı kapandı. */
.sni-balon {
    position: fixed; z-index: 9990; box-sizing: border-box;
    max-width: min(360px, calc(100vw - 16px)); padding: 7px 10px 8px;
    border-radius: 8px; border: 1px solid var(--not-sari-kenar);
    background: var(--text-primary); color: var(--card-bg);
    box-shadow: 0 6px 18px rgba(27, 37, 51, .18);
    pointer-events: none;
}
.sni-balon[hidden] { display: none; }
.sni-balon-b {
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--not-sari); margin-bottom: 2px;
}
.sni-balon-m {
    font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Gece modunda balon zemini AÇIK (`--text-primary` tersine döner): sarı başlık orada okunmaz →
   aynı ailenin koyu mürekkebi. */
html[data-peron-theme="dark"] .sni-balon-b { color: var(--not-sari-ink); }
@media print { .sni-balon { display: none; } }
.siparis-not-isaret:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .siparis-not-isaret svg { animation: none; } }

/* ── STANDART UYARI IŞIĞI (tüm widget/list/kart aynı renk + aynı süre) ──
   Geçmiş termin / kritik durum → kırmızı-beyaz 1.1s yanıp söner. Tek kaynak. */
@keyframes order-blink-rw {
    0%, 100% { background: rgba(194, 84, 90, 0.22); }
    50%      { background: rgba(194, 84, 90, 0.05); }
}
.peron-table tbody tr.order-row-done td      { background: rgba(94, 156, 139, 0.13); }
.peron-table tbody tr.order-row-due-soon td  { background: rgba(190, 116, 56, 0.14); }
.peron-table tbody tr.order-row-overdue td   { animation: order-blink-rw 1.8s ease-in-out infinite; }
/* Kritik stok satırı — widget'lardaki kritik uyarı ışığıyla aynı (kırmızı yanıp sönme).
   Stok tablosu .stk-tbl class'ını kullanır (.peron-table değil). */
.peron-table tbody tr.stk-row-crit td,
.stk-tbl tbody tr.stk-row-crit td            { animation: order-blink-rw 1.8s ease-in-out infinite; }
.order-row-done     { background: rgba(94, 156, 139, 0.12); }
.order-row-due-soon { background: rgba(190, 116, 56, 0.14); }
.order-row-overdue,
.dash-warn          { animation: order-blink-rw 1.8s ease-in-out infinite; }
.peron-order-card.order-row-done     { border-color: var(--mint, #5e9c8b); }
.peron-order-card.order-row-due-soon { border-color: #e8c84b; }
.peron-order-card.order-row-overdue  { border-color: var(--rose, #c2545a); }
@media (prefers-reduced-motion: reduce) {
    .order-row-overdue, .dash-warn,
    .peron-table tbody tr.order-row-overdue td,
    .peron-table tbody tr.stk-row-crit td,
    .stk-tbl tbody tr.stk-row-crit td { animation: none; background: rgba(194, 84, 90, 0.22); }
}

/* ── KISMİ TESLİM IŞIĞI — geçmiş termin uyarısıyla aynı tarz (1.1s sert yanıp
   sönme), yalnız renk doğal pastel mor. Tam teslime dek "Sipariş Verildi"de kalır. */
@keyframes order-blink-partial {
    0%, 100% { background: rgba(169, 139, 176, 0.26); }
    50%      { background: rgba(169, 139, 176, 0.06); }
}
.peron-table tbody tr.order-row-partial td { animation: order-blink-partial 1.8s ease-in-out infinite; }
.order-row-partial                         { animation: order-blink-partial 1.8s ease-in-out infinite; }
.peron-order-card.order-row-partial        { border-color: #b9a3d8; }
@media (prefers-reduced-motion: reduce) {
    .peron-table tbody tr.order-row-partial td,
    .order-row-partial { animation: none; background: rgba(169, 139, 176, 0.16); }
}

/* ══ SİPARİŞİ İPTAL EDİLEN HAMMADDE TALEBİ — SİYAH-BEYAZ UYARI IŞIĞI (1.304.0) ══
   Kullanıcı kararı: "iptal edilen hammadde sütunu siyah beyaz yanıp sönsün."

   🔴 IŞIK SATIRIN TAMAMINDA DEĞİL, YALNIZ ÜRÜN (HAMMADDE) HÜCRESİNDE. Satınalma
      tablosunda satır ışığı ZATEN üç anlam taşıyor (geçmiş termin kırmızı · kısmi
      teslim mor · teslim alındı yeşil); dördüncüsü satıra eklenseydi hiçbiri
      okunmaz olurdu. Hücre ışığı bunların ÜZERİNE biner ve çakışmaz.
   🔴 SERT GEÇİŞ (0/49 → 50/100). Renk geçişi yumuşatılsaydı ara karede zemin ile
      yazı ORTA GRİDE buluşur ve metin bir an için okunamaz olurdu (kontrast 1:1).
      Zemin ve yazı BİRLİKTE ters çevrilir → her karede kontrast 21:1 (WCAG AAA).
      Aynı desen `chat-blink-red`te de bu gerekçeyle kullanılıyor.
   🔴 Özgüllük (0,3,3) satır ışıklarınınkinden (0,2,3) YÜKSEK — kısmi teslim ışığı
      olan bir satırda ürün hücresi yine de siyah-beyaz yanar. */
@keyframes pur-iptal-bw {
    0%, 49%   { background: #14161a; color: #ffffff; }
    50%, 100% { background: #ffffff; color: #14161a; }
}
.peron-table tbody tr td.pur-prod.pur-iptal {
    animation: pur-iptal-bw 1.1s ease-in-out infinite;
    box-shadow: inset 0 0 0 1px rgba(20, 22, 26, .35);
}
@media (prefers-reduced-motion: reduce) {
    .peron-table tbody tr td.pur-prod.pur-iptal {
        animation: none; background: #14161a; color: #ffffff;
    }
}

/* Uyarı çipi — hücre ışığıyla birlikte ters döner (`currentColor`), yani hiçbir
   karede zeminine karışmaz. Mail gönderilebiliyorsa <button>, değilse <span>. */
.pur-iptal-chip {
    display: inline-flex; align-items: center; max-width: 100%;
    font-family: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.2;
    padding: 1px 5px; margin-bottom: 2px; border-radius: 4px;
    border: 1px solid currentColor; background: transparent; color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.pur-iptal-chip { cursor: pointer; min-height: 20px; }
button.pur-iptal-chip:hover { background: rgba(127, 127, 127, .25); }
/* Mail gönderildi → alarm bitti: sakin, yanıp SÖNMEYEN damga (hücre de yanmaz). */
.pur-iptal-chip.is-sent {
    color: var(--mint, #5e9c8b); border-color: var(--mint, #5e9c8b);
    background: rgba(94, 156, 139, .10);
}
/* 🔴 DOKUNMA HEDEFİ: parmakla kullanılan cihazda çip 44px'e büyür (mobil kural).
   Yalnız UYARILI satırlarda ve yalnız coarse pointer'da olur — 32px'lik satır
   yoğunluğu sözleşmesi masaüstünde aynen korunur. Aynı eylem akordeon
   detayındaki tam boy düğmeden de yapılabilir. */
@media (pointer: coarse) {
    button.pur-iptal-chip { min-height: 44px; padding: 0 10px; font-size: 11px; }
}

/* Akordeon detayındaki tam genişlik iptal şeridi — çipteki kısa etiketin TAM
   karşılığı. Taban `.pur-dd-alert` tek satırda kırpar; bu metin kırpılırsa
   uyarının ANLAMI (kim, hangi sipariş, ne zaman) kaybolur → sarma açılır. */
.pur-dd-alert--wrap {
    align-items: flex-start; white-space: normal;
    overflow: visible; text-overflow: clip; line-height: 1.45;
}
.pur-dd-alert--wrap.is-sent { color: var(--mint, #5e9c8b); }

/* 🔴 KULLANICI NOTU ŞERİDİ (1.332.0). Şerit iskeletini `.pur-dd-alert--wrap`tan alır
   (tam genişlik + sarma), RENGİNİ ALMAZ: taban şerit `--rose-ink` ile ALARM'dır ve
   sıradan bir sipariş notunu kırmızı basmak, gerçek iptal uyarısının anlamını aşındırır.
   Not nötr metindir → gövde rengi. Şerit yalnız GERÇEK bir not varsa doğar (bkz. JS). */
.pur-dd-note { color: var(--text-primary); }

/* 🔴 "SAYIYA DAHİL EDİLMEDİ" NOTU (1.333.0) — SEKİZ EKRANIN TEK GÖRÜNÜMÜ.
   Ağaçta oturum/puan girilmemiş takım artık hiçbir takım sayısına katılmıyor; not,
   o farkın nereden geldiğini söyler ve tıklanınca hangi siparişler olduğunu açar.
   🔴 UYARI DEĞİL DİPNOT: gerçek uyarıların (kırmızı/turuncu) anlamı aşınmasın diye
      durum rengi KULLANILMAZ; soluk metin + ince çerçeve.
   🔴 Dokunma hedefi 24px tabanını karşılar (yoğun yüzey denetimi); DAHA BÜYÜK
      yapılmadı — kullanıcı kuralı: "büyütme bişeyi, daha minimalist".
   🔴 `display:inline-flex` + `vertical-align:middle`: alt başlık bir metin satırı,
      blok öğe satırı kırardı. */
.takim-haric-not {
    display: inline-flex; align-items: center; vertical-align: middle;
    min-height: 24px; margin-left: 10px; padding: 2px 9px;
    border: 1px solid var(--amber); border-radius: 999px;
    background: var(--st-warn-bg, rgba(190, 116, 56, .10));
    font: inherit; font-size: 11px; font-weight: 800; line-height: 1.2;
    letter-spacing: .01em; color: var(--amber-ink); cursor: pointer; white-space: nowrap;
    /* 🔴 `min-width: 0` OLMADAN `max-width: 100%` DAR KAPTA İŞLEMEZ: esnek kutu
       içeriğinin doğal genişliğinden küçülmez ve kutu kabı taşar (ölçüldü: 320px'te
       3px). İkisi birlikte yazılır. */
    min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.takim-haric-not::before { content: '!'; display: inline-flex; align-items: center;
    justify-content: center; width: 13px; height: 13px; margin-right: 5px; flex: 0 0 auto;
    border-radius: 50%; background: var(--amber); color: #fff; font-size: 9px; font-weight: 900; }
/* 🔴 1.389.0 — ÜZERİNE GELİNCE RENK TERS ÇEVRİLMEZ (tasarım ölçümü, axe): beyaz metin
   `--amber` zeminde 3,65:1 (gece modunda `--amber` daha açık → daha kötü). Metin ve zemin
   dinlenme hâliyle AYNI kalır (AA geçiyor), etkileşim altı çizgi + koyu çerçeveyle belli olur. */
.takim-haric-not:hover { text-decoration: underline; border-color: var(--amber-ink); }
/* 🔴 DAR EKRANDA KISA METİN — ölçülmüş kusur (1.333.2): tam metin 256px ve `nowrap`,
   320px'te kartı 3px taşıyor, dashboard satır içi yuvasında 42px kesiliyor, mobilde
   başlığın yanına sığmayıp satır açıyordu (+24px). Kısa metin ~110px: sığar, kesilmez,
   satır açmaz. Tam cümle `title`da duruyor, bilgi kaybı YOK.
   🔴 Kırpma son çare olarak KALIR (`text-overflow`), ama artık devreye girmiyor. */
.takim-haric-not .thn-kisa { display: none; }
@media (max-width: 640px) {
    .takim-haric-not .thn-uzun { display: none; }
    .takim-haric-not .thn-kisa { display: inline; }
}
/* Dashboard özetinin satır içi yuvası masaüstünde de dardır → orada da kısa metin. */
.dash-gs-ozet .takim-haric-not .thn-uzun { display: none; }
.dash-gs-ozet .takim-haric-not .thn-kisa { display: inline; }
/* 🔴 Başlık satırında dururken başlığın 19px/800 puntosunu MİRAS ALMAZ (font-size
   kendi kuralında) ve satır yüksekliğini BÜYÜTMEZ: 24px, başlığın 23px satırıyla
   aynı kutuda kalır. Ölçülmeden büyütülmesi yasak (kullanıcı: "büyütme bişeyi"). */
.peron-page-title .takim-haric-not,
.peron-page-header h1 .takim-haric-not { position: relative; top: -1px; }
/* Not YUVASI. Boşken hiç yer kaplamaz — hariç yoksa satır da doğmaz.
   🔴 Blok davranışı YALNIZ rapor ekranında: orada not kendi satırında durur ve
      özet şeridinin `repeat(6,1fr)` ızgarasını bozmaz. Dashboard'da ve alt
      başlıklarda aynı yuva SATIR İÇİ kalır (`display:inline`), yoksa tek satırlık
      özet ikiye bölünür ve kart yükselirdi. */
.takim-haric-host:empty { display: none; }
/* 🔴 `div` yuva BLOK (alt başlığın kardeşi — mobilde alt başlık gizlense de bu
   görünür kalır, ölçülmüş kusur), `span` yuva SATIR İÇİ (dashboard özeti tek
   satırdır, blok yapılsaydı kart yükselirdi). */
div.takim-haric-host { display: block; margin: 2px 0 0; }
div.takim-haric-host .takim-haric-not { margin-left: 0; }
#up-govde > .takim-haric-host,
#rp-govde > .takim-haric-host { margin: 2px 0 10px; }
.pur-dd-note .pur-dd-lbl { flex: 0 0 auto; }

.pur-cancelmail-btn {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    min-height: 32px; padding: 0 12px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--rose, #c2545a); background: rgba(194, 84, 90, .10);
    color: var(--rose-ink, #ab4a4f); font-size: 12px; font-weight: 600; font-family: inherit;
    transition: background .12s, color .12s;
}
.pur-cancelmail-btn:hover { background: var(--rose, #c2545a); color: #fff; }
.pur-cancelmail-btn:disabled { opacity: .5; cursor: default; }
@media (pointer: coarse) { .pur-cancelmail-btn { min-height: 44px; } }

/* 🔴🔴 EYLEM ŞERİDİ DAR EKRANDA EKRANIN DIŞINDA KALIYORDU (1.304.0'da ÖLÇÜLDÜ).
   Akordeon detay hücresi tablonun TAM genişliğidir ve şerit `flex-end` ile o
   genişliğin SAĞ ucuna gider. Ölçüm (768px görünür alan, tablo 1311px):
   "✉ Tedarikçiye İptal Maili Gönder" düğmesi x=985..1197'de duruyordu — yani
   alarmın ÇÖZÜM YOLU, tabloyu yatay kaydırmadan BULUNAMIYORDU. Aynı şey
   "↩ Teslim Almayı Geri Al" için de geçerliydi.

   Tablonun en-az genişliği ~1311px; kenar çubuğu + sayfa dolgusuyla birlikte
   1600px altındaki HER pencerede taşar → eşik oradan seçildi. Üstünde tablo
   sığar ve 1.273.1'de kararlaştırılan sağa yaslı düzen AYNEN korunur.

   `sticky` ikinci savunma: kullanıcı tabloyu sağa kaydırmışsa düğme sola
   yapışıp görünür kalır (kaydırma kabı `.peron-table-wrap`). */
@media (max-width: 1600px) {
    .pur-dd-actions { justify-content: flex-start; }
    .pur-dd-actions > * { position: sticky; left: 8px; }
}

/* ══ AŞAMA KAPISI UYARI MODALI (1.304.0) — "bir önceki istasyon bitmedi" ══════
   🔴 TOAST YERİNE MODAL: kullanıcı şartı uyarının personel adı, birimi ve tüm
      bilgileri taşımasıdır; 3,5 saniyelik tek satırlık toast bunu taşıyamaz.
   🔴 Etiket/değer ızgarası `.pur-dd-grid` ile AYNI dili konuşur (11px versal etiket
      + koyu değer) — panelde ikinci bir "künye" tipografisi doğmasın. */
.asama-kapi { display: flex; flex-direction: column; gap: 12px; }
.asama-kapi-baslik {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800; color: var(--rose-ink, #ab4a4f);
}
.asama-kapi-baslik svg { width: 18px; height: 18px; flex-shrink: 0; }
.asama-kapi-metin { font-size: 13px; line-height: 1.55; color: var(--text-primary); }
.asama-kapi-kutu {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px; border-radius: 8px;
    background: rgba(194, 84, 90, .07); border: 1px solid rgba(194, 84, 90, .22);
}
.asama-kapi-satir { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.asama-kapi-satir > span {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-muted);
}
.asama-kapi-satir > b {
    flex: 1 1 auto; min-width: 0; text-align: right;
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    line-height: 1.35; overflow-wrap: anywhere;
}
.asama-kapi-not { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 480px) {
    /* 🔴 320-480px: etiket ve değer ALT ALTA. Yan yana kaldıklarında uzun bir personel
       adı etiketi 2 harfe sıkıştırıyordu (ölçüldü) — kırpma yerine satır kırılır. */
    .asama-kapi-satir { flex-direction: column; gap: 1px; }
    .asama-kapi-satir > b { text-align: left; }
}

/* MOBİL Satınalma listesi — aynı uyarı, tam genişlik şerit. Satır düğmesinin
   İÇİNE konmadı: `.peron-mob-t1/t2` iki dar flex satırıdır ve 320px'te oraya
   sıkıştırılan bir çip ürün adını birkaç harfe kırpardı. Şerit SARAR, kırpmaz
   → yatay kaydırma doğmaz. Işık masaüstüyle AYNI keyframe'i kullanır. */
/* 🔴 12px = `.peron-mob-lead` (ürün adı) ile AYNI punto. Alarm, kartın en önemli
   satırıdır; ürün adından KÜÇÜK yazılması onu ikincil bir dipnot gibi gösterirdi.
   Yoğunluk sözleşmesindeki 11px ikincil metinler (`.peron-mob-fact`) için geçerlidir. */
.peron-mob-iptal {
    display: block; padding: 6px 12px; border-top: 1px solid var(--border-light);
    font-size: 12.5px; font-weight: 800; letter-spacing: .01em; line-height: 1.4;
    overflow-wrap: anywhere; animation: pur-iptal-bw 1.1s ease-in-out infinite;
}
.peron-mob-iptal.is-sent {
    animation: none; font-weight: 700;
    background: rgba(94, 156, 139, .12); color: var(--mint, #5e9c8b);
}
@media (prefers-reduced-motion: reduce) {
    .peron-mob-iptal { animation: none; background: #14161a; color: #ffffff; }
}

/* ── STANDART WIDGET SATIRI — tüm dashboard listelerinde tek tipografi/spacing ── */
.dash-row { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-bottom: 1px solid var(--border-light); }
.dash-row:last-child { border-bottom: none; }
.dash-row-main { flex: 1; min-width: 0; }
/* 🔴 13,5px → 12px: bu bir LISTE SATIRI, baslik degil. Kritik Stok
   Uyarilari'nda 10 satir, Son Siparislerim/Gelen Siparisler/Is Emirleri'nde
   de ayni sinif. Kart basligi (.peron-card-title) 13px; satirin ondan BUYUK
   olmasi hiyerarsiyi ters ceviriyordu. */
.dash-row-title { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-aside { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.dash-row-date { font-size: 12px; font-weight: 600; color: var(--pri-text); }
.dash-sec-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 20px 6px; }

/* ── Üretim Durumu + Termin Takvimi widget'ları (takım + akordiyon + %; cari·müşteri·ürün) ── */
/* Cari · Müşteri · Ürün ortak satır */
.dash-cmu-cari { font-weight: 600; color: var(--text-primary); }
.dash-cmu-mus  { color: var(--text-secondary); }
.dash-cmu-urun { color: var(--text-muted); }
.dash-cmu-sep  { margin: 0 5px; color: var(--text-muted); opacity: .7; }
/* Aşama filtre çipleri — TIKLANABİLİR filtre; kaç aşama varsa TEK SATIRA sığar (yatay kaydırma YOK).
   flex:1 dağıtır, min-width:0 + span ellipsis ile taşma olmadan sığar; sayaç her zaman görünür. */
.dash-prod-chips { display: flex; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--border-light); }
.dash-prod-chip { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 6px; background: var(--content-bg); border: 1px solid transparent; border-radius: 8px; font-size: 11px; line-height: 1.2; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: background .12s ease, border-color .12s ease; }
.dash-prod-chip strong { color: var(--pri-text); flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-prod-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-prod-chip:hover { background: var(--border-light); }
.dash-prod-chip:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.dash-prod-chip.is-active { background: var(--pri-soft); border-color: var(--pri); color: var(--pri-text); font-weight: 600; }
.dash-prod-chip.is-active strong { color: var(--pri-text); }
/* Arama */
.dash-prod-search { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid var(--border-light); color: var(--text-muted); }
.dash-prod-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.dash-prod-search input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; font-size: 12px; background: var(--card-bg); color: var(--text-primary); }
.dash-prod-search input:focus { outline: 2px solid var(--pri); outline-offset: 1px; border-color: var(--pri); }
.dash-prod-empty { padding: 14px 16px; font-size: 12px; color: var(--text-muted); text-align: center; }
/* Liste: ~10 satır görünür (satır ≈ 60px), 10-20 arası kaydırmalı */
#dash-prod-list { max-height: 600px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Takım satırı */
.dash-prod-team { border-bottom: 1px solid var(--border-light); }
.dash-prod-team:last-child { border-bottom: none; }
.dash-prod-head { display: flex; align-items: center; gap: 9px; padding: 9px 14px; }
.dash-prod-head[role="button"] { cursor: pointer; }
.dash-prod-head[role="button"]:hover { background: var(--content-bg); }
.dash-prod-toggle { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 6px; padding: 0; }
.dash-prod-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; }
.dash-prod-team.is-open .dash-prod-toggle svg { transform: rotate(90deg); }
.dash-prod-spacer { flex-shrink: 0; width: 22px; }
.dash-prod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Aşama/ilerleme TEK SATIR: bar + % (+ modül sayısı) */
.dash-prod-progline { display: flex; align-items: center; gap: 8px; }
.dash-prod-progline .peron-prog { flex: 1; min-width: 40px; }
.dash-prod-pct { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--pri-text); font-variant-numeric: tabular-nums; }
.dash-prod-pct.is-done { color: var(--green-ink); }
.dash-prod-modcount { flex-shrink: 0; font-size: 10.5px; color: var(--text-muted); }
/* Altta: cari · müşteri · ürün · miktar */
.dash-prod-meta { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-prod-qty { color: var(--text-muted); }
/* Akordiyon: modüller — [hidden] guard: açık display, UA'nın [hidden]{display:none}'ını ezer */
.dash-prod-mods { padding: 4px 14px 11px 45px; display: flex; flex-direction: column; gap: 8px; background: var(--content-bg); }
.dash-prod-mods[hidden] { display: none; }
.dash-prod-mod { display: flex; align-items: center; gap: 8px; }
.dash-prod-mod-name { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-prod-mod-badge { font-size: 10.5px !important; flex-shrink: 0; padding: 1px 7px !important; }
.dash-prod-mod-prog { display: flex; align-items: center; gap: 6px; width: 116px; flex-shrink: 0; }
.dash-prod-mod-pct { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
/* Termin Takvimi — ~10 satır görünür (satır ≈ 58px), 10-20 arası kaydırmalı */
#dash-cal-list { max-height: 585px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Termin Takvimi satırı */
.dash-cal-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-light); }
.dash-cal-row:last-child { border-bottom: none; }
.dash-cal-main { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-cal-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dash-cal-date { font-size: 11.5px; font-weight: 600; color: var(--pri-text); white-space: nowrap; }
.dash-cal-date svg { width: 12px; height: 12px; vertical-align: -1px; }
.dash-cal-pct { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Overdue satırın metni yanıp-sönme TEPESİNDE (rgba .22 tint) de AA kalsın: muted→secondary,
   tarih temaya göre daha koyu/açık kırmızı (rose-ink tint tepesinde 4.5 altına düşüyordu). */
.order-row-overdue .dash-cmu-urun,
.order-row-overdue .dash-cal-pct,
.order-row-overdue .dash-prod-qty { color: var(--text-secondary); }
.dash-cal-row.order-row-overdue .dash-cal-date { color: #8f3a3f; }
html[data-peron-theme="dark"] .dash-cal-row.order-row-overdue .dash-cal-date { color: #f0989c; }
@media (prefers-reduced-motion: reduce) {
    .peron-table tbody tr.order-row-overdue td,
    .order-row-overdue { animation: none; background: rgba(194, 84, 90, 0.14); }
}
/* Tamamlanan/gelen satırlarda yeşil font (tüm tablo ve widget'larda standart) */
.peron-table tbody tr.order-row-done td,
.peron-table tbody tr.order-row-done td .stat-value,
.order-row-done,
.order-row-done * { color: #2f6b54 !important; }
.order-row-done .peron-badge { color: inherit !important; }
/* Yanıp sönen overdue satır tinti (tepe rgba(194,84,90,0.22)) warning badge kontrastını
   3.2:1'e düşürüyordu → yalnız LIGHT modda koyu amber (tepede 4.88:1); dark zaten AA (:not ile hariç). */
html:not([data-peron-theme="dark"]) .order-row-overdue .peron-badge.warning { color: #7a481f; }
/* Gece modunda koyu yeşil metin koyu zemine düşük kontrastlı kalıyordu → açık yeşile çevir. */
html[data-peron-theme="dark"] .peron-table tbody tr.order-row-done td,
html[data-peron-theme="dark"] .peron-table tbody tr.order-row-done td .stat-value,
html[data-peron-theme="dark"] .order-row-done,
html[data-peron-theme="dark"] .order-row-done * { color: #86cdb0 !important; }

/* Fason Alışlar — durum filtre kartları (tıklanabilir stat) */
.fason-stat { transition: transform .12s, box-shadow .12s, border-color .12s; }
.fason-stat:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(44,62,53,0.08); }
.fason-stat.active { border-color: var(--pri); box-shadow: 0 0 0 2px var(--pri-light, rgba(212,163,168,0.35)) inset; }

/* ── Dashboard Fason Takibi ── */
.dash-fason-row { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--border-light); }
.dash-fason-row:last-child { border-bottom: 0; }
.dash-fason-tag { display: inline-block; font-size: 9.5px; font-weight: 700; color: var(--amber-ink, #95592b); background: var(--peach-surface, #f7c6a0); border-radius: 5px; padding: 0 6px; margin-left: 6px; vertical-align: middle; }
.dash-fason-overdue { background: rgba(194, 84, 90, 0.08); animation: dash-fason-blink 1.8s ease-in-out infinite; }
@keyframes dash-fason-blink {
    0%, 100% { background: rgba(194, 84, 90, 0.05); }
    50%      { background: rgba(194, 84, 90, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
    .dash-fason-overdue { animation: none; background: rgba(194, 84, 90, 0.14); }
}

.po-form-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; margin-top: 6px; box-shadow: 0 -2px 12px rgba(44, 62, 53, .06); }

.po-saved { text-align: center; padding: 56px 20px; }
.po-saved-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--pri-light); color: var(--pri-text); display: flex; align-items: center; justify-content: center; }
.po-saved-icon svg { width: 30px; height: 30px; }
.po-saved-title { font-size: 19px; font-weight: 700; color: var(--text-primary); }
.po-saved-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.po-saved-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

@media (min-width: 720px) {
    .po-head-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══ ÜRETİM SİPARİŞİ FORMU — İKİ SATIRLIK BAŞLIK IZGARASI (1.312.0) ══════════
   Kullanıcı: "Sipariş Tarihi · Sipariş No · Firma (Cari) · Müşteri Adı yan yana;
   il · ilçe · telefon · adres · Termin · Durum · Sipariş Detayı yan yana sığdır."

   🔴 16 SÜTUN seçildi çünkü ikinci satırda YEDİ alan var ve 12 sütunla tam sayı
      pay çıkmıyordu: 2+2+2+3+2+2+3 = 16 ✔ · ilk satır 3+3+5+5 = 16 ✔
   🔴 PAYLAR SINIFLA, satır içi `style` ile DEĞİL — satır içi stil medya sorgusunu
      koşulsuz ezer ve dar ekran ayarı ASLA çalışmaz (bu dosyanın belgelenmiş tuzağı).
   🔴 Eşik 1100px: altında ızgara 8 sütuna, 700px altında tek kolona iner —
      yedi alanı 900px'e sıkıştırmak her birine 110px bırakır ve tarih girdisi
      (UA içsel asgarisi ~150px) taşar. */
/* 🔴🔴 EŞİK KAPTAN TÜRETİLDİ, PENCEREDEN DEĞİL — bu dosyanın belgelenmiş tuzağı:
      kap = pencere − 298 (sol menü açık) / − 118 (mini menü, pencere ≤1100'de
      otomatik). Bağlayıcı kısıt TARİH GİRDİSİDİR: `input[type=date]` UA'dan ~150px
      İÇSEL asgari genişlik taşır ve flex/grid bunu küçültemez. Bu yüzden Termin
      2 → 3 sütuna çıkarıldı (Sipariş Tarihi zaten 3): 3/16 = %18,75 → kap ≥ 800px
      olduğunda 150px'i karşılar.
      Pencere karşılığı: menü açıkken 800 + 298 = 1098 → eşik güvenli tarafta 1120px.
      1101-1120 bandında menü AÇIK (240px) ve kap 803-822 ✔; ≤1100'de menü mini
      olduğu için kap zaten 982+ ✔.
   🔴 ORTA BANT 4 EŞİT SÜTUN: yedi alanı sekiz sütuna paylarla dağıtmak dar kapta
      tarih kutusunu yine 100px'e düşürüyordu. Dört eşit sütun → 1. satır tek satır,
      2. satır iki satır; hiçbir alan içsel asgarisinin altına inmez. */
@media (min-width: 1120px) {
    .po-head-grid { grid-template-columns: repeat(16, 1fr); gap: 10px 8px; }
    .po-head-grid .poc-2 { grid-column: span 2; }
    .po-head-grid .poc-3 { grid-column: span 3; }
    .po-head-grid .poc-5 { grid-column: span 5; }
}
@media (min-width: 820px) and (max-width: 1119px) {
    .po-head-grid { grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
    .po-head-grid .poc-2,
    .po-head-grid .poc-3,
    .po-head-grid .poc-5 { grid-column: span 1; }
}

/* 🔴 YAZI TAVANI 9 PUNTO (12px) — kullanıcı kuralı: "standart 9 punto, şu an daha
   küçükse KÜÇÜK KALSIN, büyütme". Bu yüzden yalnız TAVAN konur: 40px'lik girdi
   yüksekliği ve 13,5px'lik gövde bu ekranda 12px'e iner, zaten daha küçük olan
   (etiket 12px, meta 10,5px) OLDUĞU GİBİ kalır.
   🔴 Rejim masaüstü-FARE: dokunmatikte girdi 16px kalmalı (iOS zoom kalkanı). */
@media (min-width: 769px) and (pointer: fine) {
    .po-form .peron-input,
    .po-form .peron-select,
    .po-form .peron-textarea { font-size: 12px; height: 32px; padding: 0 8px; }
    .po-form textarea.peron-input { height: auto; min-height: 32px; padding: 6px 8px; }
    .po-form .peron-form-label { font-size: 11px; }
    .po-form .po-form-crumb { font-size: 12px; }
    .po-form .peron-page-subtitle { font-size: 11.5px; }
}

/* Özel Sipariş tiki: başlığın SAĞINDA, tek satır, açıklamasız (kullanıcı isteği). */
.po-form-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.po-form-bas .po-ozel-tik {
    width: auto; flex: 0 0 auto; align-items: center; gap: 8px;
    margin: 0; padding: 6px 12px; min-height: 34px;
}
.po-form-bas .po-ozel-tik input { width: 16px; height: 16px; margin: 0; }
.po-form-bas .po-ozel-tik b { font-size: 12px; color: var(--text-primary); white-space: nowrap; }
@media (max-width: 768px) {
    /* Telefonda tik tam satır ve 44px dokunma hedefi — masaüstü yoğunluğu MOBİLİ EZMEZ. */
    .po-form-bas .po-ozel-tik { width: 100%; min-height: 44px; padding: 10px 14px; }
    .po-form-bas .po-ozel-tik input { width: 20px; height: 20px; }
    .po-form-bas .po-ozel-tik b { font-size: 14px; }
}

/* ═══ Üretim Takibi — İhtiyaç Listesi modali ════════════════════════════════
   🔴 `.prod-needs-*` kuralları 1.273.0'da SİLİNDİ. Ekran artık Üretim Planı'ndaki
   "Haftalık İhtiyaç Listesi" ile AYNI tabloyu kullanıyor; stil TEK yerde,
   `A.Cikti.IHTIYAC_STIL` içinde (peron-cikti.js). Silinen kurallar `--rose`/`--amber`
   token'larını DOĞRUDAN METİN rengi olarak kullanıyordu (açık zeminde AA'yı geçmez) —
   geri getirilecekse `*-ink` türevleriyle getirilmeli.                               */

/* ═══ TOPLU İhtiyaç Listesi (birden çok siparişi toplayan geniş ekran) ═══════ */
.bulkneeds-head { margin-bottom: 12px; }
.bulkneeds-head-title { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.bulkneeds-ordchips { display: flex; flex-wrap: wrap; gap: 6px; }
.bulkneeds-ordchip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
    color: var(--pri-text); background: var(--pri-light); border: 1px solid var(--pri-border, var(--border));
    border-radius: 6px; padding: 3px 9px;
}
.bulkneeds-ordchip-cust { font-weight: 500; color: var(--text-secondary); }
.bulkneeds-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }

/* 🔴 İHTİYAÇ MODALLARI — BİLGİ ŞERİDİ ÜSTTE SABİT KALIR.
   ÖLÇÜLDÜ (toplu liste, 1440/1280px): modal gövdesi `scrollTop=191` ile AÇILIYORDU —
   "12 sipariş toplandı" başlığı y=-99 ile TAMAMEN görünmez, ilk uyarının 54px'inin
   yalnız 9px'i görünür hâldeydi ("yazılar üstte yarım kalmış" şikâyeti tam buydu).
   Kök neden İKİ katmanlı: (a) tablo sarmalayıcısının max-height'i (60vh) gövde
   bütçesinden BÜYÜK olduğu için gövdenin KENDİSİ kayıyordu; (b) createModal açılışta
   ilk metin kutusuna odaklanıyor ve o kutu (arama) TABLONUN ALTINDA olduğu için
   tarayıcı gövdeyi aşağı kaydırıyordu.
   Çözüm sabit bir yükseklik TAHMİN etmek değil: gövde flex kolon olur, tablo kalan
   alanı alır → gövde hiç kaymaz, odaklanacak kutu zaten görünür olur.
   🔴 KAPSAM: yalnız `.wn-modal` sınıfı verilen modal. `.peron-modal-body`'yi genel
   olarak flex yapmak TÜM modalları etkilerdi. */
.wn-modal .peron-modal-body { display: flex; flex-direction: column; min-height: 0; }
.wn-modal .peron-modal-body > .bulkneeds-wrap,
.wn-modal .peron-modal-body > .wn-wrap { flex: 1 1 auto; min-height: 140px; max-height: none; }
.bulkneeds-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bulkneeds-table th {
    position: sticky; top: 0; z-index: 1; background: var(--content-bg); text-align: left;
    font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 8px 10px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.bulkneeds-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light, var(--border)); color: var(--text-secondary); vertical-align: top; }
.bulkneeds-table td.num, .bulkneeds-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulkneeds-table tbody tr:hover { background: var(--pri-light); }
.bulkneeds-mat { font-weight: 600; color: var(--text-primary); }
.bulkneeds-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 4px; }
.bulkneeds-code { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bulkneeds-unit { font-size: 10.5px; color: var(--text-muted); }
/* 🔴 NİTELENMİŞ SEÇİCİ ŞART: `.bulkneeds-table td` (0,1,1) `color: var(--text-secondary)`
   yazıyor ve sade `.bulkneeds-short` (0,1,0) onu YENEMİYORDU → ölçüldü, "Eksik" kolonundaki
   3 değerin üçü de rgb(70,83,95) (gri) çiziliyordu; satınalmaya gidecek miktar hiç
   vurgulanmıyordu. Ayrıca `--rose` DOĞRUDAN METİN rengi olamaz (AA) → `--rose-ink`. */
.bulkneeds-table td.bulkneeds-short { color: var(--rose-ink); font-weight: 700; }
/* 🔴 `--amber` beyaz zeminde 3,66:1 (ölçüldü) — AA 4,5 ister. `--amber-ink` 5,61:1.
   Gece modunda token parlak tona döndüğü için arıza YALNIZ GÜNDÜZ görünüyordu. */
.bulkneeds-res { font-size: 11px; color: var(--amber-ink); font-weight: 600; }
/* Aynı gerekçe (bkz. .bulkneeds-res): --amber metin olarak AA'yı geçmez. */
.bulkneeds-nomatch { font-size: 10px; background: var(--pri-light); color: var(--amber-ink); border-radius: 4px; padding: 1px 5px; }
.bulkneeds-orders { display: flex; flex-direction: column; gap: 3px; min-width: 160px; }
.bulkneeds-sub { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.bulkneeds-sub b { color: var(--pri-text); font-weight: 600; }
.bulkneeds-sub-qty { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bulkneeds-cb { accent-color: var(--pri); width: 16px; height: 16px; }
/* 🔴 Satınalmaya NE GİDECEĞİNE karar veren tek kontrol, modaldaki EN KÜÇÜK hedefti:
   ölçüldü 16×16px (44 gerekiyor). Dokunmatikte hücre 44px'e genişler ve kutu büyür. */
@media (max-width: 768px) {
    .bulkneeds-cb { width: 22px; height: 22px; }
    .bulkneeds-table td:first-child { min-width: 44px; }
}
.bulkneeds-cb:disabled { accent-color: var(--green); opacity: .5; }
/* Okunur satır 45-75ch: sınırsız bırakılınca 1440px'te 123ch ölçüldü. */
.bulkneeds-warn { max-width: 75ch; font-size: 12px; color: var(--text-secondary); margin-top: 10px; background: var(--pri-light); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 6px; }
.bulkneeds-warn .tico { display: inline-flex; color: var(--amber); }
html[data-peron-theme="dark"] .bulkneeds-ordchip { background: rgba(120,160,210,.16); color: #cfe0f2; border-color: rgba(255,255,255,.12); }
html[data-peron-theme="dark"] .bulkneeds-table tbody tr:hover { background: rgba(120,160,210,.10); }
html[data-peron-theme="dark"] .bulkneeds-warn { background: rgba(120,160,210,.12); }

/* Faz 2 — Stok kartında rezervasyon paneli */
.stk-res-panel { border: 1px solid var(--pri-border, var(--border)); background: var(--pri-light); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
/* 🔴🔴 AYNI SINIF (1.364.0): zemin #fae7e7 SABITTI, icindeki .stk-res-title ve
   .stk-res-firm `--text-primary` ile gece modunda #e7edf4'e donuyordu → 1,01:1.
   Panel yalniz rezerve miktar stoktan FAZLAYKEN bu hale gecer, yani tam da
   okunmasi en kritik oldugu anda okunamiyordu. Taban `.stk-res-panel` zaten
   `var(--pri-light)` okuyordu; sapan yalniz `.danger` varyantiydi.
   --rose-surface / --rose-surface-border :root'ta ZATEN tanimli (satir 133-134). */
.stk-res-panel.danger { border-color: var(--rose-surface-border, var(--rose)); background: var(--rose-surface); }
.stk-res-title { font-size: 13px; color: var(--text-primary); margin-bottom: 6px; }
/* 🔴 OLCULDU 3,93:1 (esik 4,5) — `--rose` DOLGU rengidir, METIN degil.
   `--rose-ink` iki temada da metin icin ayarlidir: GUNDUZ 4,85:1 · GECE 5,99:1.
   Bu uyari yalniz "rezerve > mevcut stok" durumunda cikar, yani tam da okunmasi
   en kritik oldugu anda soluk kaliyordu. */
.stk-res-alert { color: var(--rose-ink); font-weight: 600; margin-left: 8px; }
.stk-res-list { display: flex; flex-direction: column; gap: 4px; }
.stk-res-row { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.stk-res-firm { font-weight: 600; color: var(--text-primary); min-width: 120px; }
/* Cari ve MÜŞTERİ ayrı bilgilerdir; panel eskiden yalnız birini basıyordu
   (contact_name || customer_name) ve son müşteri hiç görünmüyordu. */
.stk-res-cust { display: block; font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.stk-res-ord { color: var(--pri-text); }
.stk-res-qty { margin-left: auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ═══ STOK HAREKETİ — "kimin için" hücresi (müşteri / cari / sipariş no) ═══
   İki satır: üstte müşteri (yoksa cari), altta tamamlayıcı bilgi. Kolon dar
   olduğu için ikisi de kırpılır; tam metin title'da durur. */
.stk-mv-forwho { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stk-mv-forwho b { font-weight: 600; color: var(--text-primary); font-size: 12px;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-mv-forwho i { font-style: normal; font-size: 11px; color: var(--text-muted);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* İptal maili onay penceresi */
.ipm-lead { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 14px; }
.ipm-opt { font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
.ipm-err { margin-top: 10px; font-size: 12px; color: var(--rose);
           background: var(--rose-surface, rgba(194,84,90,.10)); border: 1px solid var(--rose-surface-border, rgba(194,84,90,.28));
           border-radius: 8px; padding: 8px 11px; }

/* ═══ HIZLI SİPARİŞ — stok satırından sipariş + satınalma talebi ═════════════
   Dar modal (createModal varsayılanı 520px): iki kolonlu ızgara 8px sisteminde. */
.qo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-width: 0; }
.qo-code { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; color: var(--pri-text);
           background: var(--pri-light); border-radius: 5px; padding: 2px 7px; flex-shrink: 0; }
/* 🔴 14px → 13px: dashboard kartlarindaki EN BUYUK metin buydu. Kartin
   basligi konumunda (tek urun gosteriyor), o yuzden govdeye (12px) degil
   baslik tier'ina (13px) hizalandi. */
.qo-name { font-size: 13px; font-weight: 700; color: var(--text-primary);
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qo-stok { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.qo-stok b { color: var(--text-secondary); font-weight: 600; }
.qo-grid { display: grid; grid-template-columns: var(--qo-cols, 1fr 1fr); gap: 8px 16px; }
.qo-grid .qo-wide { grid-column: 1 / -1; }
.qo-hint { margin-top: 12px; font-size: 12px; color: var(--text-secondary);
           background: var(--pri-light); border-radius: 8px; padding: 9px 12px; }
.qo-err { margin-top: 10px; font-size: 12px; color: var(--rose);
          background: var(--rose-surface, rgba(194,84,90,.10)); border: 1px solid var(--rose-surface-border, rgba(194,84,90,.28));
          border-radius: 8px; padding: 8px 11px; }
.qo-qty-row { display: flex; align-items: center; gap: 8px; }
.qo-qty-row .peron-input { flex: 1 1 0; min-width: 0; text-align: center; font-size: 16px; font-weight: 600; }
.qo-unit { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* ═══ FİYAT LİSTESİ — Editör ═══════════════════════════════════════════════ */
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table td, .pl-table th { border: 1px solid var(--border); padding: 8px 10px; vertical-align: middle; font-size: 13px; }
.pl-table .pl-h { background: var(--content-bg); font-weight: 700; text-align: center; font-size: 11.5px; color: var(--text-secondary); letter-spacing: .04em; }
.pl-table .pl-c-image { width: auto; min-width: 120px; max-width: 200px; text-align: center; background: #fafbfc; vertical-align: top; }
.pl-img-wrap { padding: 10px; }
.pl-img-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 150px; border: 2px dashed var(--border); border-radius: 10px;
    color: var(--text-muted); cursor: pointer; text-align: center; padding: 14px;
    transition: border-color .15s, color .15s, background .15s;
}
.pl-img-drop:hover { border-color: var(--pri); color: var(--pri-text); background: var(--pri-light); }
.pl-img-drop svg { width: 26px; height: 26px; }
.pl-img-drop small { font-size: 11px; opacity: .8; }
.pl-kind {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em;
    padding: 1px 6px; border-radius: 5px; margin-right: 6px; vertical-align: middle;
    background: var(--border-light); color: var(--text-secondary);
}
.pl-kind.mamul { background: #e7eefb; color: #34508a; }
.pl-kind.opt   { background: #fdeede; color: #9a5b2e; }
/* 🔴🔴 SABIT HEX ZEMIN + TOKENDEN METIN = GECE MODUNDA GORUNMEZ (1.364.0).
   Zemin #f7faff (neredeyse beyaz) SABITTI, metin `--text-primary` uzerinden gece
   modunda #e7edf4'e donuyordu. OLCULEN KONTRAST 1,13:1 — urun adi, olcu, m3 ve
   FIYAT degerleri okunamiyordu. `--pri-light` YARI SAYDAMDIR (acik .08 · gece .14),
   yani kart zeminine gore composite olur ve iki temada da dogru yonde durur.
   🔴 Ayri bir html[data-peron-theme="dark"] kurali ACILMADI — proje kurali:
      tema tokeni ezer, kural tema bilmez. */
.pl-mamul-row { background: var(--pri-light); }
.pl-opt-sep td { background: #3a3a3a; color: #fff; font-weight: 700; text-align: center; letter-spacing: 1px; font-size: 11.5px; padding: 5px; }
.pl-note { font-size: 11px; color: var(--text-muted); font-style: italic; }
.pl-c-add { padding: 6px 8px !important; }
.pl-c-rm { width: 34px; text-align: center; padding: 4px !important; }
.pl-rm, .pl-prod-rm {
    width: 22px; height: 22px; border: none; background: transparent; cursor: pointer;
    color: var(--text-muted); font-size: 18px; line-height: 1; border-radius: 5px;
}
.pl-rm:hover, .pl-prod-rm:hover { background: rgba(194,84,90,.12); color: var(--rose); }
.pl-table .peron-input.sm { height: 30px; padding: 0 8px; font-size: 12px; }
.pl-ac-mamul .po-ac-input { font-weight: 600; }

/* Autocomplete dropdown kartın altında kalmasın (overflow:hidden iptal + üst z-index) */
.pl-product { overflow: visible; }
.pl-product .peron-card-body { overflow: visible; }
.pl-table .po-ac-list { z-index: 200; }
.pl-table .po-ac { min-width: 150px; }

/* Modül/opsiyonel satırları MAMÜL'ün biraz sağında (içerde) */
.pl-table .pl-c-label.pl-indent { padding-left: 30px; }

/* Ürün sürükle-sırala tutamacı */
.pl-drag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 28px; flex-shrink: 0; cursor: grab;
    color: var(--text-muted); border-radius: 6px; transition: color var(--tr-fast), background var(--tr-fast);
}
.pl-drag:hover { color: var(--pri-text); background: var(--pri-light); }
.pl-drag:active { cursor: grabbing; }
.pl-product.pl-dragging { opacity: .45; }
.pl-product.pl-drop-before { box-shadow: 0 -3px 0 0 var(--pri); }
.pl-product.pl-drop-after  { box-shadow: 0 3px 0 0 var(--pri); }

/* Fiyat listesi ürünleri — akordiyon başlık çubuğu */
.pl-prod-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
    background: var(--border-light); border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.pl-product.pl-collapsed .pl-prod-bar { border-bottom: none; border-radius: var(--r-xl); }
.pl-collapse {
    width: 26px; height: 26px; border: none; background: transparent; cursor: pointer;
    color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: background var(--tr-fast); flex-shrink: 0;
}
.pl-collapse svg { transition: transform .2s ease; transform: rotate(90deg); }   /* açık → aşağı */
.pl-product.pl-collapsed .pl-collapse svg { transform: rotate(0deg); }            /* kapalı → sağ */
.pl-collapse:hover { background: var(--pri-light); color: var(--pri-text); }
.pl-prod-name {
    flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--text-primary);
    cursor: pointer; display: flex; align-items: baseline; gap: 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-prod-name small { font-weight: 600; color: var(--pri-text); font-size: 12px; flex-shrink: 0; }
.pl-prod-bar .pl-prod-rm { margin-left: auto; flex-shrink: 0; }
.pl-product.pl-collapsed .pl-prod-body { display: none; }

/* 1.436.0 — ürün ağacı ↔ liste farkı (editör). Uyarı ailesi TANIMLI tokenlardır (.dv-haric ile aynı):
   --amber-ink / --amber-border / --peach-surface. Satırlar sarar, kabından taşmaz; kapalı kartta çip görünür.
   Çip zemini KART rengidir: başlık çubuğunun gri zemini üstünde peach yüzey kontrastı 4,4:1'e düşürüyordu (ölçüldü).
   Uyarı METNİ --text-primary: --amber-ink peach yüzeyde gece modunda 4,1:1 kalıyordu (ölçüldü); amber zemin + kenarda. */
.pl-agac {
    box-sizing: border-box; max-width: 100%;
    padding: 8px 12px; border-bottom: 1px solid var(--amber-border);
    background: var(--peach-surface); color: var(--text-primary);
    font-size: 12px; line-height: 1.45; overflow-wrap: anywhere;
}
.pl-agac-bas { font-weight: 700; }
.pl-agac-grup { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.pl-agac-et { flex: none; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.pl-agac ul { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.pl-agac li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pl-agac-ad { color: var(--text-primary); font-weight: 600; }
.pl-agac-kod { color: var(--text-muted); font-size: 11px; font-weight: 400; }
.pl-agac-cip {
    flex: none; padding: 1px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
    color: var(--amber-ink); background: var(--card-bg); border: 1px solid var(--amber-border);
}

/* Adet stepper: − N + */
.pl-qty-ctl { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle; }
.pl-qty-btn {
    width: 22px; height: 22px; border: 1px solid var(--border); background: var(--card-bg);
    border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.pl-qty-btn:hover { background: var(--pri-light); border-color: var(--pri); color: var(--pri-text); }
.pl-qty-val { min-width: 20px; text-align: center; font-weight: 700; font-size: 13px; color: var(--text-primary); }

/* ═══ FİYAT LİSTESİ / PROFORMA — sekmeler, pastel buton, proforma editör ═══ */
.pl-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.pl-tab {
    border: none; background: transparent; padding: 10px 18px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pl-tab:hover { color: var(--text-primary); }
.pl-tab.active { color: var(--pri-text); border-bottom-color: var(--pri); }

/* Proforma butonu — pastel mor/lila ton (farklı) */
.peron-btn.pl-proforma-btn {
    background: #ede7fb; color: #5b3da8; border: 1px solid #d6c8f3;
}
.peron-btn.pl-proforma-btn:hover { background: #e3d9f8; border-color: #c3aef0; }

/* Proforma editör */
.pf-group { overflow: visible; }
.pf-grp-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--content-bg); }
.pf-grp-img { width: 72px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pf-grp-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pf-grp-title { flex: 1; font-weight: 700; }
.pf-grp-rm { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.pf-grp-rm:hover { background: rgba(194,84,90,.12); color: var(--rose); }
.pf-grp-rm svg { width: 15px; height: 15px; }
.pf-table-wrap { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; min-width: 920px; }
.pf-table th { background: var(--content-bg); font-size: 10px; font-weight: 700; color: var(--text-secondary); padding: 7px 6px; text-align: center; letter-spacing: .03em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pf-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-light); font-size: 12px; }
.pf-table .pf-desc { font-weight: 600; min-width: 150px; }
.pf-table .pf-dim { font-weight: 400; color: var(--text-muted); font-size: 10.5px; margin-top: 2px; }
.pf-table .pf-c { text-align: center; }
.pf-table tfoot td { border-top: 1px solid var(--border); }
.pf-table .peron-input.sm { height: 28px; padding: 0 6px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MESAJLAR — tam sayfa kurumsal mesajlaşma (renderMessages)
   ═══════════════════════════════════════════════════════════════════════════ */
.pmsg-wrap {
    height: calc(100vh - 132px);
    min-height: 460px;
    display: flex;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(27,37,51,.04);
}
.pmsg-side {
    width: 320px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--content-bg, #f7f8fa);
}
.pmsg-side-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.pmsg-side-title { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
.pmsg-side-title-ic { display: inline-flex; color: var(--pri); }
.pmsg-side-title-ic svg { width: 19px; height: 19px; }
.pmsg-compose { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border: 0; border-radius: 9px; background: var(--pri-strong); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: filter .14s, transform .06s; }
.pmsg-compose svg { width: 14px; height: 14px; }
.pmsg-compose:hover { filter: brightness(1.07); }
.pmsg-compose:active { transform: translateY(1px); }
.pmsg-quick { display: flex; gap: 8px; padding: 0 16px 12px; }
.pmsg-quick-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--card-bg); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.pmsg-quick-btn:hover { background: var(--pri-light); border-color: var(--pri); color: var(--pri); }
.pmsg-search { padding: 0 16px 10px; }
.pmsg-search .peron-search { height: 36px; }
.pmsg-threads { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.pmsg-loading, .pmsg-empty { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.pmsg-thread { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; cursor: pointer; transition: background .12s; position: relative; }
.pmsg-thread + .pmsg-thread { margin-top: 2px; }
.pmsg-thread:hover { background: var(--sb-hover); }
.pmsg-thread.active { background: var(--pri-light); }
.pmsg-thread.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pri); }
.pmsg-thread-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.pmsg-thread-main { flex: 1; min-width: 0; }
.pmsg-thread-top { display: flex; align-items: baseline; gap: 8px; }
.pmsg-thread-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmsg-thread.unread .pmsg-thread-title { font-weight: 800; }
.pmsg-tag { margin-left: 6px; font-size: 10px; font-weight: 600; color: var(--text-muted); background: var(--border-light); padding: 1px 6px; border-radius: 5px; vertical-align: middle; }
.pmsg-thread-time { font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; }
.pmsg-thread-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.pmsg-thread-prev { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmsg-thread.unread .pmsg-thread-prev { color: var(--text-secondary); font-weight: 500; }
.pmsg-thread-badge { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--pri-strong); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
.pmsg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--card-bg); }
.pmsg-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); padding: 24px; text-align: center; }
.pmsg-placeholder-ic { display: inline-flex; opacity: .35; }
.pmsg-placeholder-ic svg { width: 58px; height: 58px; }
.pmsg-placeholder-t { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.pmsg-placeholder-s { font-size: 12px; max-width: 280px; }
.pmsg-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pmsg-chat-head { display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pmsg-head-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.pmsg-head-info { flex: 1; min-width: 0; }
.pmsg-head-title { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmsg-head-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.pmsg-head-clear { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: #c2545a; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .14s, border-color .14s; }
.pmsg-head-clear:hover { background: #fdf0f0; border-color: #e6b9bc; }
.pmsg-chat-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; background: radial-gradient(circle at 1px 1px, rgba(27,37,51,.035) 1px, transparent 0); background-size: 22px 22px; }
.pmsg-row { display: flex; flex-direction: column; gap: 3px; max-width: 74%; }
.pmsg-row.mine { align-self: flex-end; align-items: flex-end; }
.pmsg-row.theirs { align-self: flex-start; align-items: flex-start; }
.pmsg-sender { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 0 2px; }
.pmsg-bubble { padding: 9px 13px; font-size: 13px; line-height: 1.5; overflow-wrap: break-word; word-break: normal; max-width: 100%; box-shadow: 0 1px 1px rgba(27,37,51,.05); }
.pmsg-bubble.mine { background: var(--pri-strong); color: #fff; border-radius: 14px 4px 14px 14px; }
.pmsg-bubble.theirs { color: #1b2533; border-radius: 4px 14px 14px 14px; }
.pmsg-time { font-size: 10px; color: var(--text-muted); padding: 0 3px; }
.pmsg-composer { flex-shrink: 0; display: flex; gap: 9px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--card-bg); }
.pmsg-attach, .pmsg-send { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); transition: background .14s, color .14s, border-color .14s; }
.pmsg-attach:hover { background: var(--sb-hover); color: var(--pri); }
.pmsg-send { border: 0; background: var(--pri-strong); color: #fff; }
.pmsg-send:hover { filter: brightness(1.07); }
.pmsg-send svg { width: 18px; height: 18px; }
.pmsg-composer textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; font-size: 13px; font-family: inherit; line-height: 1.45; color: var(--text-primary); background: var(--content-bg, #f7f8fa); transition: border-color .14s, background .14s; }
.pmsg-composer textarea:focus { outline: 0; border-color: var(--pri); background: var(--card-bg); box-shadow: 0 0 0 3px var(--pri-light); }
.peron-side-act { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); transition: background .14s, color .14s, border-color .14s; }
.peron-side-act:hover { background: var(--pri-light); color: var(--pri); border-color: var(--pri); }
.peron-side-act svg { width: 15px; height: 15px; }
.peron-side-act.danger { color: #c2545a; }
.peron-side-act.danger:hover { background: #fdf0f0; border-color: #e6b9bc; color: #c2545a; }

/* ── Sağ "Mesajlar" çekmecesi: kendi avatarım + içeride sohbet ── */
.peron-msg-myav { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.65); background: var(--pri-strong); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; overflow: hidden; padding: 0; }
.peron-msg-myav.has-svg { background: var(--card-bg); }
.peron-msg-myav svg { width: 100%; height: 100%; }
.peron-msg-myav:hover { box-shadow: 0 0 0 3px var(--pri-light); }

.peron-msg-conv { flex: 1; min-height: 0; flex-direction: column; }
.peron-msg-conv-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.peron-msg-back { height: 30px; padding: 0 11px 0 7px; border-radius: 8px; border: none; background: #1f6e4c; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12px; flex-shrink: 0; transition: filter .14s, box-shadow .14s; }
.peron-msg-back:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px rgba(31, 110, 76, .22); }
.peron-msg-back svg { flex-shrink: 0; }
.peron-msg-conv-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; overflow: hidden; }
.peron-msg-conv-av.has-svg { background: var(--card-bg); border: 1px solid var(--border, #ebe0d0); }
.peron-msg-conv-av.has-svg svg { width: 100%; height: 100%; }
.peron-msg-conv-meta { flex: 1; min-width: 0; }
.peron-msg-conv-meta .t { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peron-msg-conv-meta .s { font-size: 11px; color: var(--text-muted); }

.peron-msg-conv-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.peron-cmsg { display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.peron-cmsg.mine { align-self: flex-end; align-items: flex-end; }
.peron-cmsg.theirs { align-self: flex-start; align-items: flex-start; }
.peron-cmsg-name { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 0 2px; }
.peron-cmsg-av { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; overflow: hidden; flex-shrink: 0; }
.peron-cmsg-av.has-svg { background: var(--card-bg); }
.peron-cmsg-av svg { width: 100%; height: 100%; }
.peron-cmsg-bubble { padding: 8px 11px; font-size: 13px; line-height: 1.45; overflow-wrap: break-word; box-shadow: 0 1px 1px rgba(27,37,51,.05); }
.peron-cmsg-bubble.mine { background: var(--pri-strong); color: #fff; border-radius: 13px 4px 13px 13px; }
.peron-cmsg-bubble.theirs { color: #1b2533; border-radius: 4px 13px 13px 13px; }
.peron-cmsg-time { font-size: 9.5px; color: var(--text-muted); padding: 0 3px; }
.peron-cmsg-img img { max-width: 190px; max-height: 200px; border-radius: 10px; display: block; }
.peron-cmsg-file { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; background: rgba(27,37,51,.06); border-radius: 10px; text-decoration: none; color: inherit; font-size: 12px; max-width: 210px; }
.peron-cmsg-file svg { width: 16px; height: 16px; flex-shrink: 0; }
.peron-cmsg-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.peron-msg-conv-input { flex-shrink: 0; display: flex; align-items: flex-end; gap: 7px; padding: 9px 11px; border-top: 1px solid var(--border); }
.peron-msg-conv-input textarea { flex: 1; resize: none; min-height: 38px; max-height: 120px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-size: 13px; font-family: inherit; line-height: 1.4; background: var(--content-bg, #f7f8fa); color: var(--text-primary); }
.peron-msg-conv-input textarea:focus { outline: none; border-color: var(--pri); background: var(--card-bg); box-shadow: 0 0 0 3px var(--pri-light); }
.peron-msg-attach, .peron-msg-sendbtn { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); }
.peron-msg-attach:hover { background: var(--sb-hover); color: var(--pri); }
.peron-msg-sendbtn { border: none; background: var(--pri-strong); color: #fff; }
.peron-msg-sendbtn:hover { filter: brightness(1.07); }
@media (max-width: 820px) {
    .pmsg-wrap { height: calc(100vh - 110px); }
    .pmsg-side { width: 240px; min-width: 200px; }
    .pmsg-quick-btn { font-size: 11.5px; }
    .pmsg-row { max-width: 86%; }
}

/* ═══ Mobil dokunma hedefleri + boş-durum düzeltmesi (objektif UI QA) ═══════
   Ölçümle doğrulanan sub-40px defektleri parmakla basılabilir minimuma çıkarır.
   Satır aksiyon butonları col-actions dışındaki hücrelerde (stk-act/td-actions)
   mevcut 44px kuralını ıskalıyordu.
   🔴 1.227.0 — eşik 640 → 768: 641-768px bandı isMobile()'a göre MOBİLDİ ama bu
   blok hiç uygulanmıyordu; o bantta modal kapat-X 30px, arama 34px, .stk-act 28px
   kalıyordu. Blok içeriğinin tamamı zaten mobil-özel; `td .peron-empty`'nin
   100vw hesabı da güvenli çünkü sidebar AYNI eşikte (:2739) off-canvas oluyor. */
@media (max-width: 768px) {
    /* 🔴 `.peron-row-cb` BURADAN KALDIRILDI (1.364.0): ayni ozgullukte (0,1,0)
       ve AYNI `max-width:768px` kosulunda :11285 DAHA SONRA 24px yaziyordu, yani bu
       satir sessizce OLUYDU. @media ozgullik EKLEMEZ — kaynak sirasi karar verir. */
    /* 🔴🔴 `min-width` `width`i EZMEZ, IKISI AYRI KISITTIR (1.365.0 tasarim
       olcumu). Stok modulu kendi CSS'inde `.stk-act`a 36px yaziyordu ama buradaki
       40px'lik ALT SINIR yuzunden nihai boyut max(36,40) = 40px olculdu — yani
       "platform genelinde 36px" iddiam stok ekraninda TUTMUYORDU. Alt sinir da
       ayni sozlesmeden okunur ki iki sayi bir daha ayrismasin. */
    td.td-actions .stk-act { min-width: var(--tbl-ctl-h); min-height: var(--tbl-ctl-h); }
    .pur-status-btn { min-height: 40px; }

    /* ── Modal + form dokunma hedefleri (TÜM modalları kapsar — paylaşılan sınıflar) ── */
    .peron-modal-close { min-width: 40px; min-height: 40px; }        /* her modal kapat-X 28→40 */
    .peron-btn.sm { min-height: 40px; }                              /* 38→40 (col-actions dışı + modal butonları) */
    .peron-modal-footer { flex-wrap: wrap; }                         /* 3+ buton/uzun etiket taşmasın */
    /* Native form/izin/checkbox görseli 13-15→20px; tıklama alanı satırdan (perm-item ≥44px) */
    .perm-item input[type="checkbox"],
    .perm-group-all,
    .peron-check-inline input[type="checkbox"] { width: 20px; height: 20px; }
    .perm-item { min-height: 44px; }
    /* Sekme + adım (stepper) kontrolleri */
    .pl-tab, .peron-order-tab { min-height: 40px; }
    .pl-qty-btn, .btn-picker-add, .btn-cart-remove, .pf-grp-rm { min-width: 40px; min-height: 40px; }
    .cart-qty-input { min-height: 40px; }
    /* Arama input dokunma hedefi 34→40 (masaüstü 34px korunur; pager JS'te ≤640'ta 40px) */
    .peron-search input { height: 40px; }

    /* Boş-durum: geniş (min-width'li) tablonun içinde ortalandığından mobilde
       görünür viewport'un dışına kayıyordu (içerik ~579px'de). Kenar çubuğu mobilde
       off-canvas olduğundan viewport'a sticky sabitle → içerik görünür + ortalı. */
    td .peron-empty, th .peron-empty {
        position: sticky;
        left: 0;
        width: calc(100vw - 32px);
        box-sizing: border-box;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUHASEBE DEFTERLERİ — Mizan · Defter-i Kebir · Yevmiye Defteri (Faz D-3)
   Renk YALNIZ token ile; sabit hex yazılmaz (gece modu token ezmesiyle çalışır).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Alt gezinme: üç defter tek modülde, ayrı route ── */
.gl-subnav { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px;
    background: var(--content-bg); border: 1px solid var(--border);
    border-radius: var(--r-md); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gl-subnav-item { flex: 0 0 auto; min-height: 40px; padding: 0 16px;
    display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
    border-radius: var(--r-sm); font: 600 13px/1 var(--font); color: var(--text-secondary);
    cursor: pointer; white-space: nowrap; transition: background var(--tr-fast), color var(--tr-fast); }
.gl-subnav-item:hover { background: var(--pri-light); color: var(--pri-text); }
.gl-subnav-item.is-active { background: var(--pri); color: var(--pri-on); }
.gl-subnav-item:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* ── Filtre çubuğu ── */
.gl-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 16px; }
.gl-filterbar .peron-input[type="date"] { min-height: 40px; width: 150px; }
.gl-quick { min-height: 40px; padding: 0 12px; border: 1px solid var(--border);
    background: var(--card-bg); border-radius: var(--r-sm);
    font: 600 12px/1 var(--font); color: var(--text-secondary); cursor: pointer; }
.gl-quick:hover { border-color: var(--pri); color: var(--pri-text); background: var(--pri-light); }
.gl-quick[aria-pressed="true"] { background: var(--pri-light); border-color: var(--pri); color: var(--pri-text); }

/* ── Dürüstlük şeridi: KAPATILAMAZ (bilinen eksikler gizlenmez) ── */
.gl-notice { display: flex; gap: 12px; padding: 12px 16px; margin-bottom: 16px;
    background: var(--peach-surface); border: 1px solid var(--amber-border);
    border-radius: var(--r-md); }
.gl-notice-ico { flex-shrink: 0; width: 18px; height: 18px; color: var(--amber-ink); margin-top: 2px; }
/* Başlık --amber-ink ile açık modda 4.42:1 kalıyordu (13px/700 'büyük metin' DEĞİL,
   AA 4.5 ister). Uyarının OKUNMASI gerekiyor: metin ana renge alındı, amber sinyali
   ikon + zeminde korunuyor. Ölçüldü: 7.28 (açık) / 10.17 (gece). */
.gl-notice-title { font: 700 13px/1.4 var(--font); color: var(--text-primary); margin-bottom: 4px; }
.gl-notice-body { font: 400 12px/1.6 var(--font); color: var(--text-secondary); max-width: 72ch; }
.gl-notice-body b { color: var(--text-primary); font-weight: 700; }
.gl-notice-detail summary { margin-top: 8px; min-height: 24px; display: inline-flex; align-items: center;
    font: 600 12px/1 var(--font); color: var(--amber-ink-yuzey); cursor: pointer; }
.gl-notice-detail ul { margin: 8px 0 0 16px; font-size: 12px; line-height: 1.7; color: var(--text-secondary); }

/* ── Defter tablosu ── */
.gl-code { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-primary); }
.gl-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 🔴 `.peron-table th { text-align:left }` (0,1,1) çıplak `.gl-amt`'yi (0,1,0) eziyordu:
   para sütunlarının BAŞLIKLARI sola, sayıları sağa hizalı çıkıyordu. Ayrıca
   `.peron-table--fixed > tbody > tr > td` (0,1,3) `white-space:normal` uygulayıp
   nowrap'i ve `.gl-name`'in ellipsis'ini ölü bırakıyordu — ikisi de td/th ile yükseltildi. */
.peron-table th.gl-amt,
.peron-table td.gl-amt,
.peron-table--fixed > tbody > tr > td.gl-amt {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.peron-table--fixed > tbody > tr > td.gl-code,
.peron-table--fixed > tbody > tr > td.gl-running { white-space: nowrap; }
.peron-table--fixed > tbody > tr > td.gl-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.gl-zero { color: var(--text-muted); font-weight: 400; }
/* Renk YALNIZ anomalide: bakiye hesabın doğal yönüne ters (eksi kasa vb.).
   Borç/alacağı yeşil-kırmızı yapmak hesapların yarısında anlamı TERS çevirir.
   🔴 `.peron-table td` (0,0,1,1) rengi ezdiği için özgüllük td ile YÜKSELTİLİR;
   yalnız `.gl-contra` yazılsa vurgu hiç görünmez (ölçtüm: --text-primary kalıyordu). */
.peron-table td.gl-contra { color: var(--amber-ink); font-weight: 700; }
.peron-table td.gl-sep, .peron-table th.gl-sep { border-left: 1px solid var(--border-light); }

.gl-row-link { cursor: pointer; }
.gl-row-link:hover { background: var(--pri-light); }
.gl-row-link:hover .gl-code { color: var(--pri-text); }
.gl-row-link:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }

/* Fiş no → fiş detay modalı bağlantısı (Defter-i Kebir) */
/* 🔴🔴 TABLO BASLIGINDA MAVI USTUNE MAVI — METIN GORUNMUYORDU (1.364.0,
   tasarim denetimi, ekran goruntusuyle belgeli). `--pri-text` ACIK yuzey uzerindeki
   okunur mavi metin tokenidir; `.gl-fisno` ise `thead` icinde de kullaniliyor ve
   orasi KOYU birincil gradyandir (`--pri-dark -> --pri -> --pri-hover`).
   OLCULDU (KDV Beyanname, 1440px): GUNDUZ 1,07 / 1,27 / 1,10:1 · GECE 2,66 / 3,05 /
   3,86:1 — esik 4,5. Baslikta "(391)" gibi sayilar okunamiyordu.
   🔴 Kardes `th` zaten `rgba(255,255,255,.92)` kullaniyor; ayni yola getirildi
      (en acik durakta 4,91:1). Govdedeki `.gl-fisno` DEGISMEDI — orasi acik zemin. */
/* 🔴 ÖLÇÜLDÜ: 76×15px — `role="button"` taşıyan GERÇEK tıklanabilir öge ama
   WCAG 2.2 AA §2.5.8 mutlak tabanı 24×24'ün ALTINDA (yükseklik 9px eksik) ve
   320/768/1440'ta DEĞİŞMİYOR (satır içi metin, dikey dolgusu yok).
   🦷 METİN BÜYÜTÜLMEDİ, KUTU YÜKSELTİLDİ: genişlik (76px) zaten yeterliydi;
      eksik olan yalnız yükseklikti. Punto artırmak satır yüksekliğini ve tüm
      tablonun yoğunluğunu bozardı — "büyütme bişeyi". */
.gl-fisno { cursor: pointer; color: var(--pri-text); font-weight: 600; }
/* 🦷 DOKUNMA HEDEFİ YALNIZ GÖVDEDE BÜYÜTÜLÜR — taban kural BAYT BAYT AYNI kaldı.
   Ölçüm gövdedeki linkte yapıldı (76×15px). Taban kuralı yeniden yazsaydım
   iki şey olurdu: (a) 1.364.0'ın kontrast düzeltmesini kilitleyen kapı
   (t147 · X1) kırılırdı — o kapı "gövdedeki renk DEĞİŞMEDİ" diyor ve haklı;
   (b) `thead` içindeki aynı link de 10px yükselir, başlık satırının yüksekliği
   ölçülmeden değişirdi. İkisi de istenmedi: kapsam ölçülen yerle sınırlı. */
.peron-table tbody .gl-fisno { display: inline-block; padding: 5px 0; line-height: 14px; }
.peron-table thead .gl-fisno { color: rgba(255, 255, 255, .92); text-decoration: underline; }
.gl-fisno:hover { text-decoration: underline; }
.gl-fisno:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.gl-vch-modal { max-height: 60vh; overflow: auto; }

/* Kök tür bandı (AKTİF / PASİF / GELİR / GİDER / MALİYET) */
.gl-group td { padding: 8px 13px; background: var(--content-bg);
    font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-secondary); border-bottom: 1px solid var(--border); }
/* 🔴 `.gl-total-row` ile aynı tuzak: çıplak `.gl-subtotal td` (0,1,1),
   `.peron-table--fixed > tbody > tr > td.gl-amt` (0,2,3) font-weight:500'ü ezemiyordu →
   "TOPLAM HASILAT" etiketi kalın, TUTARI ince çıkıyordu. */
.gl-subtotal td,
.peron-table--fixed > tbody > tr.gl-subtotal > td { font-weight: 700; background: var(--border-light); }

/* "kayıt yok" rozeti — 620/621 gibi bilerek boş hesaplar */
.gl-gap-badge { display: inline-flex; align-items: center; margin-left: 8px;
    padding: 1px 7px; border-radius: var(--r-sm); vertical-align: middle;
    background: var(--peach-surface); color: var(--amber-ink-yuzey); border: 1px solid var(--amber-border);
    font: 700 10.5px/1.6 var(--font); white-space: nowrap; }

/* Genel toplam — kutu içinde alta yapışır */
/* 🔴 `.peron-table--fixed > tbody > tr > td.gl-amt` (0,2,3) buradaki font-weight:800'i
   eziyordu: GENEL TOPLAM etiketi kalın, TUTARI ince çıkıyordu (ölçüldü: 500). Aynı
   uzunlukta ikinci bir zincir eklendi — deklarasyon zaten vardı, yalnız ölüydü. */
.gl-total-row td,
.peron-table--fixed > tbody > tr.gl-total-row > td {
    position: sticky; bottom: 0; z-index: 3; background: var(--card-bg);
    border-top: 2px solid var(--border); box-shadow: 0 -1px 0 var(--border);
    font-weight: 800; font-size: var(--tbl-fs); color: var(--text-primary); padding: 14px 13px; }

/* Denge göstergesi: dengeliyken SESSİZ (zaten yapı gereği dengeli), bozukken gürültülü */
.gl-balance { display: flex; align-items: flex-start; gap: 6px; padding: 10px 2px;
    font: 600 12px/1.5 var(--font); color: var(--text-secondary); }
.gl-balance.is-off { color: var(--rose-ink); font-weight: 700; }

/* Yürüyen bakiye (Defter-i Kebir) */
.gl-running { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.gl-side { margin-left: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); }

/* Yevmiye akordiyon */
.gl-fis-lines td { padding: 0; background: var(--content-bg); }
/* 🔴 SÜZGEÇ ETİKETİ TEK KAYNAKTAN. peron-mod-gl.js (3 yer) ve peron-mod-gl-mali.js (7 yer)
   satır-içi `style="font-size:11px"` yazıyordu; satır-içi bildirim her @media bloğunu
   ezdiği için bu etiketler dar ekranda diğerleriyle birlikte küçülmüyordu. */
.gl-filterbar .peron-form-label { font-size: 11px; }
/* Dovizli fiste para birimi rozeti — kolon TRY karsiligini basar. */
.gl-pb { font-size: 9.5px; font-weight: 700; color: var(--text-muted); letter-spacing: .03em; }
/* 🔴 FİŞ SATIRI TUTAR HÜCRELERİ: sağa dayalı + tabular-nums + nowrap. Hem Fiş Detay
   modalı hem yevmiye akordiyonu AYNI kuralı alır; eskiden yalnız th'lerde satır-içi
   text-align:right vardı, td'ler sola dayalı kalıyordu (rakamlar hizasızdı). */
.gl-fis-lines th.gl-amt, .gl-fis-lines td.gl-amt {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gl-fis-lines table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gl-fis-lines th { padding: 6px 13px; text-align: left; font: 700 10.5px/1 var(--font);
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
    background: transparent; border-bottom: 1px solid var(--border); }
.gl-fis-lines td.l { padding: 7px 13px; border-bottom: 1px solid var(--border-light); }

/* İptal / ters kayıt — defterden SİLİNMEZ, soluklaşır */
.gl-void td { color: var(--text-secondary); }
.gl-void .gl-amt { text-decoration: line-through; }

.gl-print-note { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   MALİ TABLOLAR · HESAP PLANI · FİŞ GİRİŞİ
   🔴 Tablo içi yardımcı sınıflar `.peron-table td.x` / `th.x` ile YAZILIR.
      Çıplak `.x` (0,1,0) `.peron-table td` (0,1,1) tarafından sessizce ezilir —
      bu dosyada daha önce iki kez yaşandı (bkz. .gl-amt / .th-hint notları).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gelir tablosu / bilanço ara sonuç satırı (brüt kâr, dönem sonucu)
   🔴 Zemin --pri-light DEĞİL: gece modunda mavi tint zemini rgb(33,49,67)'ye taşıyıp
   üzerindeki eksi tutarı (--rose-ink) 3,93:1'e düşürüyordu (ÖLÇÜLDÜ) — AA 4,5 ister.
   --content-bg hem açık hem gece modunda satırı normal satırlardan ayırır ve
   kontrastı korur (gece 5,4:1 / açık 5,2:1). */
/* 🔴 Ağırlık `.peron-table--fixed > tbody > tr > td.gl-amt` (0,2,3) tarafından 500'e
   çekiliyordu: etiket kalın, TUTAR ince kalıyordu (ölçüldü). Aynı uzunlukta zincirle
   yazılır — yoksa sonuç satırının en önemli hücresi vurgusuz kalır. */
.gl-result td,
.peron-table--fixed > tbody > tr.gl-result > td {
    background: var(--content-bg); font-weight: 700;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* 🔴 `.peron-table--fixed > tbody > tr > td.gl-amt` (0,2,3) font-weight:500 uyguluyor;
   çıplak `.peron-table td.gl-neg` (0,2,1) ONU EZEMEZ — vurgu sessizce ölür (ölçüldü:
   hesaplanan ağırlık 500 kaldı). Bu yüzden aynı zincir uzunluğunda yazılır. */
.peron-table td.gl-neg,
.peron-table--fixed > tbody > tr > td.gl-neg { color: var(--rose-ink); font-weight: 800; }
.peron-table td.gl-muted { color: var(--text-muted); font-style: normal; }
.gl-marj { margin-left: 8px; font: 600 11px/1 var(--font); color: var(--text-secondary);
    font-variant-numeric: tabular-nums; }

/* Hesap planı */
.gl-chart-group td { background: var(--content-bg); font-weight: 700; }
.gl-dim-badge { display: inline-flex; align-items: center; margin-left: 6px;
    padding: 1px 7px; border-radius: var(--r-sm); vertical-align: middle;
    background: var(--pri-light); color: var(--pri-text); border: 1px solid var(--border);
    font: 700 10.5px/1.6 var(--font); white-space: nowrap; }

/* Hata / zorunluluk göstergeleri — --rose (4.0:1) AA'yı geçmiyor, --rose-ink (5.49:1) geçiyor */
.gl-err { margin: 10px 0; padding: 10px 13px; border-radius: var(--r-sm);
    background: var(--rose-surface); border: 1px solid var(--rose-surface-border);
    font: 600 12px/1.5 var(--font); color: var(--rose-ink); }
.gl-req { color: var(--rose-ink); margin-left: 2px; font-weight: 800; }
.gl-modal-note { font: 400 12px/1.6 var(--font); color: var(--text-secondary); max-width: 62ch; }
.gl-modal-note b { color: var(--text-primary); }

/* Yevmiye satır aksiyonu (ters kayıt) */
.peron-table td.gl-act { padding: 6px 10px; white-space: nowrap; }
/* Dokunma hedefi ≥40px (proje kuralı) — 32px'te mobilde yanlışlıkla ters kayıt
   modalı açılıyordu; bu düğme geri alınamaz bir işlemin kapısı. */
.gl-act-btn { min-height: 40px; padding: 0 10px; border: 1px solid var(--border);
    background: var(--card-bg); border-radius: var(--r-sm); cursor: pointer;
    font: 600 11.5px/1 var(--font); color: var(--text-secondary); white-space: nowrap; }
.gl-act-btn:hover { border-color: var(--rose-ink); color: var(--rose-ink); }
.gl-act-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* ── Fiş girişi ── */
/* Değişmezlik kuralı: kullanıcı "kaydettikten sonra düzeltirim" sanmadan ÖNCE okumalı */
.gl-rule { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;
    padding: 11px 14px; border-radius: var(--r-md);
    background: var(--content-bg); border: 1px solid var(--border);
    font: 400 12px/1.6 var(--font); color: var(--text-secondary); }
.gl-rule b { color: var(--text-primary); font-weight: 700; }
.gl-rule-ico { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--text-secondary); }

.gl-fis-head { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
@media (min-width: 720px) { .gl-fis-head { grid-template-columns: 170px 190px minmax(0, 1fr); } }

/* Dar ekranda satır ızgarası kendi kutusunda kayar (.peron-xscroll) — sayfa gövdesi taşmaz */
.gl-fis-table { min-width: 700px; }
.peron-table td.gl-fis-cell { padding: 8px; vertical-align: top; }
.gl-fis-cell .peron-input { width: 100%; min-height: 40px; }
.gl-fis-cell .peron-input.gl-num { text-align: right; font-variant-numeric: tabular-nums; }
.gl-fis-cell .peron-input.is-bad { border-color: var(--rose-ink); }
.gl-fis-dim { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.gl-dim-lbl { display: block; margin: 0 0 4px; font: 700 10.5px/1.4 var(--font);
    letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.gl-fis-dim .peron-input + .gl-dim-lbl { margin-top: 8px; }
.gl-fis-warn { margin-top: 6px; font: 600 11.5px/1.45 var(--font); color: var(--rose-ink); }

.gl-rowdel { display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--card-bg); color: var(--text-secondary); cursor: pointer; }
.gl-rowdel:hover { border-color: var(--rose-ink); color: var(--rose-ink); }
.gl-rowdel:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

.gl-fis-actions { margin: 12px 0 0; }

/* Canlı denge şeridi — dengesizken kaydetme kapalı, sebebi burada yazılı */
.gl-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
    margin-top: 16px; padding: 12px 16px; border-radius: var(--r-md);
    background: var(--card-bg); border: 1px solid var(--border); }
.gl-sum.is-off { border-color: var(--amber-border); background: var(--peach-surface); }
.gl-sum-item { display: flex; flex-direction: column; gap: 2px; }
.gl-sum-lbl { font: 700 10.5px/1.2 var(--font); letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-secondary); }
.gl-sum-val { font: 800 17px/1.2 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; }
.gl-sum.is-off .gl-sum-item.is-diff .gl-sum-val { color: var(--rose-ink-yuzey); }
.gl-sum-msg { flex: 1 1 220px; min-width: 0; font: 600 12px/1.5 var(--font); color: var(--text-secondary); }
.gl-sum.is-off .gl-sum-msg { color: var(--amber-ink-yuzey); }

.gl-fis-submit { margin-top: 16px; }
.gl-fis-submit .peron-btn { min-height: 44px; padding: 0 22px; }

.gl-done { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-top: 16px; padding: 12px 16px; border-radius: var(--r-md);
    background: var(--mint-surface); border: 1px solid var(--border); }
.gl-done-ico { flex-shrink: 0; width: 18px; height: 18px; color: var(--green-ink); }
.gl-done-title { font: 700 13px/1.4 var(--font); color: var(--text-primary); }
.gl-done-body { font: 400 12px/1.6 var(--font); color: var(--text-secondary); max-width: 62ch; }
.gl-done .peron-btn { margin-left: auto; }

/* ── Cari Yaşlandırma ──────────────────────────────────────────────────────
   🔴 Cari sütunu colgroup'ta genişlik ALMAZ, tablodan ARTAN'ı alır (mizan deseni).
   Sayı sütunları 690px tuttuğu için `.peron-table`in 760px'lik min-width'inde cari
   kolonuna 57px kalıyordu (ölçüldü): yön rozeti bile sığmıyor, ad tamamen kırpılıyordu.
   950 → dar ekranda cari kolonuna 260px garanti. Özgüllük (0,2,0), `.peron-table`i
   (0,1,0) ve @media içindeki 920px kuralını ezer. Sayfa taşmaz: kutu zaten kayıyor. */
.peron-table.gl-ag-table { min-width: 950px; }

/* Yön rozeti: "Tümü" görünümünde tahsil edilecek ve ödenecek bakiyeler AYNI
   tablodadır — tutarın hangi yöne ait olduğunu söyleyen tek işaret budur.
   Adın ÖNÜNDE durur (hücre ellipsis'li; sonda olsaydı dar ekranda ilk o kırpılırdı). */
.gl-yon { display: inline-block; margin-right: 8px; padding: 1px 7px;
    border-radius: var(--r-sm); vertical-align: middle;
    font: 700 10.5px/1.6 var(--font); white-space: nowrap; }
/* 🔴 DOLGU YOK, yalnız kenarlık. Rozetin yarı saydam dolgusu (--peach-surface) gece
   modunda zemini metnin rengine doğru açıyor ve "Ödenecek" 4,11:1'e düşüyordu (ölçüldü)
   — 10,5px metin AA için 4,5:1 ister, "büyük metin" muafiyeti geçerli değil. Zemin
   şeffaf bırakılınca oran 5,87:1'e çıkıyor; ayırt edici sinyal zaten METİN RENGİ. */
.gl-yon.is-alacak { color: var(--pri-text); background: transparent; border: 1px solid var(--border); }
.gl-yon.is-borc { color: var(--amber-ink); background: transparent; border: 1px solid var(--amber-border); }

/* 90+ kovası: tahsil edilemez hâle gelmeye en yakın para — görsel olarak öne çıkar.
   🔴 Çıplak `.gl-age-hot` (0,1,0) SESSİZCE ÖLÜRDÜ: ağırlığı
   `.peron-table--fixed > tbody > tr > td.gl-amt` (0,2,3), rengi ise genel toplam
   satırında `.peron-table--fixed > tbody > tr.gl-total-row > td` (0,2,3) eziyor.
   Zincirler EŞİT/DAHA UZUN yazıldı; toplam satırı için ayrıca (0,3,3) verildi. */
.peron-table td.gl-age-hot,
.peron-table--fixed > tbody > tr > td.gl-age-hot,
.peron-table--fixed > tbody > tr.gl-total-row > td.gl-age-hot {
    color: var(--rose-ink); font-weight: 800; }

@media print {
    .gl-subnav, .gl-filterbar, .gl-quick { display: none; }
    /* 🔴 `.gl-act` hücresi GİZLENMEZ, yalnız içindeki düğme: td gizlenirse th kalır
       ve basılı yevmiyede tüm sütunlar bir kayar. */
    .gl-fis-actions, .gl-fis-submit, .gl-rowdel, .gl-act-btn, .gl-done { display: none; }
    .gl-result td, .gl-sum { break-inside: avoid; }
    .gl-notice-detail summary { display: none; }
    .gl-notice-detail { display: block; }
    .gl-print-note { display: block; margin-top: 12px; padding-top: 8px;
        border-top: 1px solid #000; font-size: 9pt; line-height: 1.5; }
    .peron-table thead { display: table-header-group; }
    .gl-total-row td { position: static; }
    .gl-group td { break-after: avoid; }
    .peron-table tbody tr, .gl-notice { break-inside: avoid; }
}

/* Gece modunda --pri açılıyor (#5b91c7); üzerine BEYAZ yazı 3.32:1 kalıyor ve AA'yı
   geçmiyor (ölçüldü). Aktif sekmede koyu metin 5.46:1 veriyor. Tema toggle'ı ve
   OS tercihi AYRI seçiciler ister — tek blok yazılırsa yarısı çalışmaz. */
/* 🔴 YALNIZ tema-toggle yolunda. OS-gece blokunda `--pri` BİLEREK #3f74a8 kalıyor
   (satır ~4852 yorumu: "üstündeki metin beyaz kalmalı") ve beyazla 4.93:1 ile zaten
   AA'yı geçiyor. Bu override oraya da uygulansaydı koyu metni koyu maviye bindirip
   3.13:1'e DÜŞÜRÜRDÜ — düzeltme değil, regresyon olurdu. */
html[data-peron-theme="dark"] .gl-subnav-item.is-active { color: var(--content-bg); }

/* Tablo başlığı yan-notu (ör. "Birim Fiyat (KDV hariç)").
   🔴 `th` ile yazılmalı: `.peron-table th` (0,1,1) çıplak `.th-hint`i (0,1,0) ezer —
   bu tabloda çıplak yardımcı sınıflar sessizce ölür. */
.peron-table th .th-hint {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ═══ ÜRÜN KAYDIR (takas) modalı ═══════════════════════════════════════════
   Simetrik: kaynak paneli · cari seçimi · hedef ürün listesi · özet — tutarlı
   boşluk ritmi + ortak sol ray. Mor (--shift-accent) feature rengi tüm blokta tek. */
.shift-modal { display: flex; flex-direction: column; gap: 14px; }

.shift-panel {
    background: var(--shift-surface);
    border: 1px solid var(--shift-surface-border);
    border-radius: var(--r-md, 12px);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 3px;
}
.shift-panel-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--shift-accent);
}
.shift-prod { font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.shift-prod-qty { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.shift-meta { font-size: 12px; color: var(--text-secondary); }

/* Kaynak ürün seçici — üst çubuktaki "Ürün Kaydır" modalı kaynağı kendi içinde seçtirir.
   [hidden] AÇIKÇA yazılı: .peron-btn gibi author display kuralları UA'nın [hidden]'ını ezer. */
.shift-modal [hidden] { display: none; }
.shift-src-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.shift-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shift-pick-list {
    display: flex; flex-direction: column; max-height: 216px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--r-sm, 8px); background: var(--card-bg);
}
.shift-pick-list > .shift-hint { border: 0; background: transparent; }
.shift-pick-opt {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; align-items: baseline;
    width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--border-light, var(--border));
    background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background var(--tr-fast, .15s);
}
.shift-pick-opt:first-child { border-top: 0; }
.shift-pick-opt:hover { background: var(--shift-surface); }
.shift-pick-opt:focus-visible { outline: 2px solid var(--shift-accent); outline-offset: -2px; }
.shift-pick-prod { font-size: 12px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-pick-qty, .shift-pick-ono { font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.shift-pick-qty { color: var(--text-secondary); }
.shift-pick-party { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-pick-ono { color: var(--text-muted); }
.shift-pick-note { font-size: 11px; color: var(--text-muted); }

.shift-field { margin: 0; }

/* Mod seçici (segmented): Takas / Taşı. */
.shift-modes {
    display: flex; gap: 6px; padding: 4px;
    background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
}
.shift-mode {
    flex: 1; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent;
    color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background var(--tr-fast, .15s), color var(--tr-fast, .15s);
}
.shift-mode:hover { color: var(--text-primary); }
.shift-mode.is-active { background: var(--card-bg); color: var(--shift-accent); box-shadow: 0 1px 3px rgba(27, 37, 51, .10); }
.shift-qty-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* Taşı (tek yön) modunda hedef sipariş seçimi — radyo + no + taraf tek satırda. */
.shift-order--pick {
    display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 10px;
    padding: 10px 12px; cursor: pointer; transition: background var(--tr-fast, .15s);
}
.shift-order--pick:hover { background: var(--shift-surface); }
.shift-order--pick input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.shift-order--pick .shift-oparty { text-align: right; }
.shift-order--pick input:checked ~ .shift-ono { color: var(--shift-accent); }

.shift-targets { display: flex; flex-direction: column; gap: 10px; }
.shift-hint {
    font-size: 12px; color: var(--text-muted); line-height: 1.5;
    padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--r-sm, 8px);
    background: var(--content-bg); text-align: center;
}
.shift-hint--empty { color: var(--rose-ink); border-color: var(--rose-surface-border); }
.shift-tlabel {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); margin-bottom: -2px;
}

.shift-order {
    border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
    overflow: hidden; background: var(--card-bg);
}
.shift-order-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    /* Sol pay 40px = radyo kolonu(18) + gap(10) + iç boşluk(12) → sipariş no, altındaki ürün
       adlarıyla AYNI sol rayda hizalanır (asimetrik hariç görünmesin). */
    padding: 8px 12px 8px 40px; background: var(--content-bg); border-bottom: 1px solid var(--border);
}
.shift-ono { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.shift-oparty { font-size: 11.5px; color: var(--text-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shift-item {
    display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px;
    padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--border-light, var(--border));
    transition: background var(--tr-fast, .15s);
}
.shift-order .shift-item:first-of-type { border-top: 0; }
.shift-item:hover { background: var(--shift-surface); }
.shift-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.shift-item-radio {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border);
    display: inline-block; position: relative; transition: border-color var(--tr-fast, .15s);
}
.shift-item input:checked + .shift-item-radio,
.shift-order--pick input:checked + .shift-item-radio,
.shift-mod-item input:checked + .shift-item-radio { border-color: var(--shift-accent); }
.shift-item input:checked + .shift-item-radio::after,
.shift-order--pick input:checked + .shift-item-radio::after,
.shift-mod-item input:checked + .shift-item-radio::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--shift-accent);
}
.shift-item input:focus-visible + .shift-item-radio,
.shift-order--pick input:focus-visible + .shift-item-radio,
.shift-mod-item input:focus-visible + .shift-item-radio { outline: 2px solid var(--shift-accent); outline-offset: 2px; }

/* Modül taşı modu: taşınacak modülü seçtiren radyo listesi. */
.shift-mod-list {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: var(--r-sm, 8px); overflow: hidden;
}
.shift-mod-item {
    display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 10px;
    padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--border-light, var(--border));
    transition: background var(--tr-fast, .15s);
}
.shift-mod-item:first-child { border-top: 0; }
.shift-mod-item:hover { background: var(--shift-surface); }
.shift-mod-item input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.shift-mod-item input:checked ~ .shift-item-name { color: var(--shift-accent); }
.shift-item-name { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-item-qty { font-size: 12px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shift-item input:checked ~ .shift-item-name { color: var(--shift-accent); }

.shift-summary {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--r-md, 12px);
    background: var(--shift-surface); border: 1px solid var(--shift-surface-border);
}
.shift-sum-a, .shift-sum-b {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* İki ürün adı eşit alan paylaşır → ⇄ ikonu daima GÖRSEL ORTADA (ad uzunluğundan bağımsız). */
.shift-sum-a { text-align: right; }
.shift-sum-b { text-align: left; }
.shift-sum-ico { color: var(--shift-accent); display: inline-flex; flex: 0 0 auto; }
.shift-sum-ico svg { width: 18px; height: 18px; }

.shift-warn {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--amber-ink); line-height: 1.4;
    padding: 8px 12px; border-radius: var(--r-sm, 8px);
    background: var(--peach-surface); border: 1px solid var(--amber-border);
}
/* Gece modunda amber metin peach-surface üzerinde 4.1:1 (AA altı) → koyu-uyumlu tona çek
   (kod tabanında aynı durum L244'te #e6a566 ile çözülmüştü; iki dark mekanizmasını da kapsa). */
html[data-peron-theme="dark"] .shift-warn { color: #e6a566; }
@media (prefers-color-scheme: dark) { .shift-warn { color: #e6a566; } }
.shift-warn .tico { display: inline-flex; flex-shrink: 0; }

/* 1.429.0 — Ürün Kaydır → Mamül depoya: havuzda depo birimi (seçilemez, rozetli) · hedef depo önizlemesi · başarı ekranı. */
.shift-pick-opt.is-depo { cursor: not-allowed; }
.shift-pick-opt.is-depo:hover { background: transparent; }
.shift-pick-opt.is-depo .shift-pick-prod { color: var(--text-secondary); }
.shift-depo-ozet {
    display: flex; flex-direction: column; gap: 4px; box-sizing: border-box;
    font-size: 12px; line-height: 1.5; color: var(--text-secondary);
    padding: 8px 12px; border-radius: var(--r-sm, 8px);
    background: var(--content-bg); border: 1px solid var(--border);
}
.shift-depo-ozet b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.shift-depo-ozet.is-engel { color: var(--rose-ink); background: var(--rose-surface); border-color: var(--rose-surface-border); }
.shift-ok { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shift-ok-baslik { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green-ink); }
.shift-ok-baslik svg { flex: 0 0 auto; }
.shift-ok-meta { font-size: 12px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.shift-ok-meta b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.shift-ok-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Birincil eylem modalın kendi eylem düğmeleriyle AYNI yükseklikte (.peron-modal-footer .peron-btn deseni). */
.shift-ok-acts .peron-btn.primary { min-height: 36px; }
.shift-ok-not { margin: 0; max-width: 72ch; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.shift-ok-kaynak {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; box-sizing: border-box;
    padding: 8px 12px; border-radius: var(--r-sm, 8px); background: var(--content-bg); border: 1px solid var(--border);
    font-size: 12px; color: var(--text-secondary);
}
.shift-ok-kaynak b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Kaydırma modalı mobilde de simetrik: özet dikeyde sarmalanır, satırlar tam genişlik. */
@media (max-width: 560px) {
    .shift-sum-a, .shift-sum-b { max-width: 100%; }
    .shift-item { grid-template-columns: 18px 1fr; }
    .shift-item-qty { grid-column: 2; justify-self: start; }
}

/* Rezervasyon kırılımı → Satınalmaya Gönder: miktar KAYNAĞI seçici (Eksik | Tüm Miktar).
   Tek buton yerine iki seçenekli segment: hem geri dönüş hem "hangi moddayım" bilgisi verir.
   Seçili reçetesi kod tabanındaki .gl-quick[aria-pressed="true"] ile aynı (pri-light/pri/pri-text).
   🔴 34px: taban .peron-btn'in bu panelde ÖLÇÜLEN yüksekliği. .peron-btn.sm burada 28px render
      ediliyor (Kompakt Overrides) → dokunma hedefi 32px'in altında kalırdı. */
.rsv-qty-seg {
    display: flex;
    width: fit-content;
    margin: 0 0 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--card-bg);
}
.rsv-qty-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: 600 12px/1 var(--font);
    cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.rsv-qty-opt + .rsv-qty-opt { border-left: 1.5px solid var(--border); }
.rsv-qty-opt b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rsv-qty-opt:hover { background: var(--border-light); color: var(--text-primary); }
.rsv-qty-opt[aria-pressed="true"] {
    background: var(--pri-light);
    color: var(--pri-text);
    box-shadow: inset 0 -2px 0 var(--pri);
}
.rsv-qty-opt:focus-visible { outline: 2px solid var(--pri); outline-offset: -3px; }
/* Mobilde dokunma hedefi: kod tabanındaki diğer kontroller gibi büyütülür (.peron-btn → 42px). */
@media (max-width: 768px) {
    .rsv-qty-opt { min-height: 42px; padding: 0 16px; }
}

.rsv-qty-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.rsv-qty-hint {
    margin-top: 6px;
    max-width: 44ch;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Rezervasyon kırılımı sonuç şeridi — MODALIN EN ÜSTÜNDE.
   🔴 Toast sağ-ALT köşede çıkar; modal açıkken gözden kaçıyordu (kullanıcı geri bildirimi).
   Bu modalda sonuç/hata mesajı toast'a DEĞİL bu şeride yazılır. */
.stk-rsv-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 12px;
    border-radius: var(--r-md);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.stk-rsv-notice svg { flex: 0 0 auto; margin-top: 1px; }
.stk-rsv-notice--success {
    /* --mint-surface :root ve html[data-peron-theme="dark"] bloklarında tanımlı. Üçüncü tema
       yolunda (@media prefers-color-scheme: dark + tema seçilmemiş) EZİLMİYOR — ama yarı
       saydam olduğu için koyu zeminde de doğru kompozit veriyor; --green-ink orada açık yeşile
       döndüğü için metin okunur kalıyor. */
    background: var(--mint-surface);
    border: 1px solid var(--green);
    color: var(--green-ink);
}
.stk-rsv-notice--error {
    background: var(--rose-surface);
    border: 1px solid var(--rose);
    color: var(--rose-ink);
}

/* Rezervasyon kırılımı: satır zaten satınalmaya gönderilmişse buton yerine talep rozeti.
   Çift sipariş riskinin görünür tek işareti bu — soluk gri DEĞİL, okunur bir rozet. */
.stk-rsv-done {
    display: inline-block;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    background: var(--pri-light);
    border: 1px solid var(--pri-border, var(--border));
    color: var(--pri-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    word-break: break-word;
}

/* ═══════════════ RENKLİ İKON SİSTEMİ — modül renk kodlaması ═══════════════
   Her modül bölümüne bir renk (--nav-c parlak / --nav-c2 koyu). 🔴 Bu hex'ler TEMADAN
   BAĞIMSIZ ve ÜÇ blokta paylaşımlıdır (nav-item · nav-acc · anasayfa .peron-quick-action)
   — birini soldurmak ANASAYFA kartlarının beyaz glifini de 3:1 altına düşürür.
   Bu yüzden pastel görünüm hue SOLDURARAK değil, reçete YÖNÜ çevrilerek elde edilir:
   --nav-ink-base açık temada #0d1622 (glif KOYUYA açılır), gecede #ffffff.
   Aynı desen kod tabanında zaten var: --green-ink/--amber-ink/--rose-ink/--cyan-ink.
   🔴 color-mix bir custom property'nin İÇİNE saklanırsa parse-time fallback ÇALIŞMAZ
   (invalid-at-computed-value-time → initial, önceki bildirim DEĞİL). Bu yüzden color-mix
   daima kullanım satırındadır ve her satırın ÖNÜNDE düz bir yedek bildirimi durur.
   Markup DEĞİŞMEDİ — mevcut .peron-nav-item[data-page] + .nav-icon yapısı kullanılır. */

/* 🔴 GRUPLAMA = SIDEBAR AKORDİYON ÜYELİĞİ (peron-app.js nav tanımı) ile BİREBİR aynıdır:
   bir bölümün altındaki TÜM sekmeler o bölümün rengini taşır. Kullanıcı kuralı: "grupların
   altındaki simgeler hep o grubun ton(un)da olsun". peron-app.js'te bir sekme başka bölüme
   taşınırsa BURASI da taşınmalı — yoksa alt sekme yalnız kendi başına farklı renkte kalır. */
/* Grupsuz (Genel) — mavi */
.peron-nav-item[data-page="dashboard"]     { --nav-c:#4f8ff0; --nav-c2:#2b5fac; }
/* DEPO — pastel sarı/altın (kullanıcı isteği) */
.peron-nav-item[data-page="stock"],
.peron-nav-item[data-page="bom"]           { --nav-c:#d2a017; --nav-c2:#a2740a; }
/* SİPARİŞLER — yeşil */
.peron-nav-item[data-page="orders"],
.peron-nav-item[data-page="purchasing"]    { --nav-c:#2bba86; --nav-c2:#1a8b60; }
/* MUHASEBE — mor (cari · ekstre · fatura · çek · kasa · defterler · fiyat). Personel 1.405.0'da İnsan Kaynakları
   bölümüne taşındı ve rengini o bölümden miras alır. */
.peron-nav-item[data-page="contacts"],
.peron-nav-item[data-page="ekstre"],
.peron-nav-item[data-page="invoices-alis"],
.peron-nav-item[data-page="invoices-satis"],
.peron-nav-item[data-page="invoices-iade"],
.peron-nav-item[data-page="cek"],
.peron-nav-item[data-page="kasa"],
.peron-nav-item[data-page="mali-ozet"],
.peron-nav-item[data-page="mizan"],
.peron-nav-item[data-page="defter-kebir"],
.peron-nav-item[data-page="yevmiye"],
.peron-nav-item[data-page="hesap-plani"],
.peron-nav-item[data-page="gelir-tablosu"],
.peron-nav-item[data-page="bilanco"],
.peron-nav-item[data-page="kdv"],
.peron-nav-item[data-page="yaslandirma"],
.peron-nav-item[data-page="mutabakat"],
.peron-nav-item[data-page="fis-girisi"],
.peron-nav-item[data-page="pricelist"]     { --nav-c:#8163e6; --nav-c2:#5b40bd; }
/* ÜRETİM — turuncu (SSH · Sevkiyat Planı · Mal Kabul bu bölümün altında).
   🔴 SEVKİYAT PLANI BU LİSTEDE OLMAK ZORUNDA (kullanıcı bildirimi 2026-09-14: "soldaki
      sevkiyat planı kısmının rengi neden üretim kısımlarındaki diğerlerinden farklı").
      2026-09-13'te `shipplan`e AYRI bir cyan (`#17b7c7`) atanmıştı; o kural item
      seviyesinde olduğu için `.peron-nav-acc[data-acc="uretim"]`den MİRAS ALINAN
      turuncuyu eziyordu ve madde, bölüm arkadaşlarının yanında tek başına duruyordu.
      Bir bölümün rengi BÖLÜMÜN kimliğidir; madde kendi rengini takınırsa kullanıcı onu
      başka bir modül sanır. Cyan tonu `.peron-tone-cyan` olarak paletle DURUYOR — yalnız
      bu maddeye atanması geri alındı.
   🔴 `malkabul` burada YOK ama kusur değil: item kuralları OLMADIĞI
      için akordiyondan turuncuyu miras alıyor. Buraya eklemek de zararsızdır; eksik
      olan yalnız EZEN bir kuraldı. */
.peron-nav-item[data-page="prodorders"],
.peron-nav-item[data-page="production"],
.peron-nav-item[data-page="plan"],
.peron-nav-item[data-page="shipplan"],
.peron-nav-item[data-page="workorders"],
.peron-nav-item[data-page="fason"],
.peron-nav-item[data-page="ssh"]           { --nav-c:#e8683f; --nav-c2:#bc4620; }
/* RAPORLAR — çelik */
.peron-nav-item[data-page="reports"]       { --nav-c:#5793b8; --nav-c2:#356e91; }

/* İkon çipi: boşta pastel tint, hover/aktifte pastel gradyan. Glif rengi HER ÜÇ
   durumda da aynı ink → açık temada "beyaza atlama" flaşı olmaz. */
.peron-nav-item .nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--nav-chip-fb, rgba(30,52,82,.06));
    background: color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-chip-a,22%), transparent);
    color: var(--sb-text-bright);
    color: color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-ink-a,52%), var(--nav-ink-base,#0d1622));
    box-shadow: inset 0 0 0 1px var(--sb-border);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-ring-a,36%), transparent);
    transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
.peron-nav-item .nav-icon svg { width: 16px; height: 16px; }
.peron-nav-item:hover .nav-icon,
.peron-nav-item.active .nav-icon {
    color: var(--sb-text-bright);
    color: color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-on-a,52%), var(--nav-on-base,#0d1622));
    background: var(--nav-chip-fb, rgba(30,52,82,.06));
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--nav-c,#4f8ff0)  var(--nav-hi-a,30%), var(--nav-hi-base,#ffffff)),
        color-mix(in srgb, var(--nav-c2,#2b5fac) var(--nav-hi-a,30%), var(--nav-hi-base,#ffffff)));
    box-shadow: var(--sb-lift), inset 0 1.5px 0 var(--nav-gloss), inset 0 -2px 5px var(--nav-shade);
    box-shadow:
        0 4px 11px -3px color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-halo-a,30%), transparent),
        inset 0 1.5px 0 var(--nav-gloss),
        inset 0 -2px 5px var(--nav-shade);
}
.peron-nav-item:hover .nav-icon svg,
.peron-nav-item.active .nav-icon svg { filter: drop-shadow(0 1px 1.5px var(--nav-glyph-shadow, transparent)); }

/* Aktif satır: modül rengiyle yıkama + renkli halka. Yazı --sb-active-text
   (açık pastel zeminde beyaz ~1.1:1 ile kaybolurdu). */
.peron-nav-item.active {
    background: var(--sb-active-solid);
    background: color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-row-a,20%), transparent);
    box-shadow: inset 0 0 0 1px var(--sb-ring-strong);
    box-shadow:
        0 4px 14px -4px color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-row-halo-a,30%), transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-row-ring-a,36%), transparent);
}
.peron-nav-item.active::before {
    background: var(--nav-c2, #2b5fac);
    background: color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-bar-a,62%), var(--nav-bar-base,#0d1622));
}

/* Akordiyon bölüm başlıkları (Depo / Siparişler / Muhasebe / Üretim / Raporlar).
   Bölümler varsayılan KAPALI → sidebar'da en çok görünen öğe bunlar. */
.peron-nav-acc[data-acc="depo"]       { --nav-c:#d2a017; --nav-c2:#a2740a; }
.peron-nav-acc[data-acc="siparisler"] { --nav-c:#2bba86; --nav-c2:#1a8b60; }
.peron-nav-acc[data-acc="muhasebe"]   { --nav-c:#8163e6; --nav-c2:#5b40bd; }
/* Alt akordiyon bölümün rengini MİRAS ALIR — ikinci bir renk tanımı, iki başlığın
   zamanla ayrışmasına yol açardı (Faturalar mor kalmalı, Muhasebe'nin içindedir). */
.peron-nav-acc[data-acc="faturalar"]  { --nav-c:#8163e6; --nav-c2:#5b40bd; }
.peron-nav-acc[data-acc="uretim"]     { --nav-c:#e8683f; --nav-c2:#bc4620; }
.peron-nav-acc[data-acc="raporlar"]   { --nav-c:#5793b8; --nav-c2:#356e91; }
/* İnsan Kaynakları ile E-Ticaret ikisi de varsayılan maviye düşüyordu ve yan yana aynı renkte görünüyordu
   (kullanıcı bildirimi 2026-10-15). Gül (İK) · kral mavisi (E-Ticaret); camgöbeği Siparişler'in yeşiline çok
   yakın çıktı (ölçülen zemin farkı ΔE 7,9). */
.peron-nav-acc[data-acc="ik"]         { --nav-c:#e0559a; --nav-c2:#b3336f; }
.peron-nav-acc[data-acc="eticaret"]   { --nav-c:#3a6ee8; --nav-c2:#2a4fb0; }

/* ─── TEK MADDELİ BÖLÜM (Raporlar) — akordiyon değil, doğrudan bağlantı ────────
   1.328.0: "Raporlar" hem bölüm başlığı hem tek maddesiydi; kullanıcı aynı kelimeye
   İKİ KEZ tıklıyordu. Madde artık doğrudan gezindiriyor ama bölüm başlıklarıyla AYNI
   kabartılmış kutuyu giyer — yoksa menüde alt maddeymiş gibi küçülür ve hiyerarşi
   bozulurdu. Ölçüler `.peron-nav-acc > .peron-nav-acc-toggle` ile BİREBİR aynıdır
   (min-height 44px · padding 11px 12px · 12px/800 · aynı gölge/kenarlık).
   🔴 Chevron YOK: katlanacak bir şey olmadığını göz bir bakışta görmeli. */
.peron-nav-tek-kap { --nav-c:#5793b8; --nav-c2:#356e91; }

/* 🔴 `text-transform: uppercase` ŞART (kullanıcı bildirimi 2026-09-14: "soldaki RAPORLAR
   kısmı neden küçük harflerle yazılmış"). Diğer bölüm başlıkları `<button>`dır ve
   `.peron-nav-section-label` sınıfını TAŞIR — büyük harf oradan gelir (satır ~974).
   Raporlar 1.328.0'da akordiyondan çıkarılıp `<a class="peron-nav-item peron-nav-tek">`
   yapıldı ve o sınıfla birlikte büyük harf kuralını da kaybetti: kutu/punto/ağırlık
   birebir eşitlenmişti ama TİPOGRAFİK KİP eşitlenmemişti, tek fark buydu.
   Ölçüler `.peron-nav-acc > .peron-nav-acc-toggle` ile aynı kalmak zorunda — bu satırı
   silersen madde yine bölüm başlıklarından ayrışır. */
.peron-nav-section .peron-nav-item.peron-nav-tek {
    min-height: 44px;
    height: auto;
    padding: 11px 12px;
    margin: 0 0 4px;
    gap: 8px;
    background: var(--sb-raised);
    border: 1px solid var(--sb-border);
    font-size: 11px;   /* bölüm başlıklarıyla BİREBİR (1.405.6: 12 → 11px) */
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--sb-text-bright);
    box-shadow: inset 0 1px 0 var(--sb-inner-light), var(--sb-lift);
    transition: background var(--tr-fast), color var(--tr-fast),
                box-shadow var(--tr-fast), transform var(--tr-fast);
}

.peron-nav-section .peron-nav-item.peron-nav-tek:hover {
    background: var(--sb-raised-hover);
    color: var(--sb-text-bright);
    box-shadow: inset 0 1px 0 var(--sb-inner-light-hover), var(--sb-lift-hover);
    transform: translateY(-1px);
}

.peron-nav-section .peron-nav-item.peron-nav-tek:active {
    transform: translateY(1px);
    box-shadow: var(--sb-press);
}

/* Aktif sayfa: bölüm başlıklarındaki "buradasın" vurgusuyla aynı dil. */
.peron-nav-section .peron-nav-item.peron-nav-tek.active {
    color: var(--sb-text-bright);
    box-shadow: inset 0 1px 0 var(--sb-inner-light-hover), var(--sb-lift-hover);
}

/* İkon kutusu bölüm başlıklarındaki `.nav-acc-icon` ile aynı boyda dursun. */
.peron-nav-tek .nav-icon { width: 28px; height: 28px; flex-shrink: 0; }
.peron-nav-tek .nav-icon svg { width: 16px; height: 16px; }

/* Mini (ikon) kip: yatay dolgu daralır, kutu daralan yuvaya sığar. Bölüm başlıkları
   mini kipte tamamen GİZLENİR ama bu bir MADDEDİR — gizlenirse Raporlar'a mini
   kipten hiç ulaşılamazdı (kullanıcının şikâyet ettiği "fazladan adım"ın daha
   kötüsü). Görünür kalır, yalnız daralır. */
.peron-sidebar.collapsed .peron-nav-section .peron-nav-item.peron-nav-tek {
    padding: 11px 6px;
    justify-content: center;
}

.peron-nav-acc .nav-acc-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--nav-chip-fb, rgba(30,52,82,.06));
    background: color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-chip-a,22%), transparent);
    color: var(--sb-text-bright);
    color: color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-ink-a,52%), var(--nav-ink-base,#0d1622));
    box-shadow: inset 0 0 0 1px var(--sb-border);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-ring-a,36%), transparent);
    transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
.peron-nav-acc .nav-acc-icon svg { width: 16px; height: 16px; }
/* Bölüm açıkken veya üstüne gelince kutucuk canlı 3D gradyana döner */
.peron-nav-acc:not(.is-collapsed) .nav-acc-icon,
.peron-nav-acc .peron-nav-acc-toggle:hover .nav-acc-icon {
    color: var(--sb-text-bright);
    color: color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-on-a,52%), var(--nav-on-base,#0d1622));
    background: var(--nav-chip-fb, rgba(30,52,82,.06));
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--nav-c,#4f8ff0)  var(--nav-hi-a,30%), var(--nav-hi-base,#ffffff)),
        color-mix(in srgb, var(--nav-c2,#2b5fac) var(--nav-hi-a,30%), var(--nav-hi-base,#ffffff)));
    box-shadow: var(--sb-lift), inset 0 1.5px 0 var(--nav-gloss), inset 0 -2px 5px var(--nav-shade);
    box-shadow:
        0 4px 11px -3px color-mix(in srgb, var(--nav-c,#4f8ff0) var(--nav-halo-a,30%), transparent),
        inset 0 1.5px 0 var(--nav-gloss),
        inset 0 -2px 5px var(--nav-shade);
}
.peron-nav-acc:not(.is-collapsed) .nav-acc-icon svg,
.peron-nav-acc .peron-nav-acc-toggle:hover .nav-acc-icon svg { filter: drop-shadow(0 1px 1.5px var(--nav-glyph-shadow, transparent)); }
/* Açık bölümün başlığı da kendi rengini alsın */
.peron-nav-acc:not(.is-collapsed) > .peron-nav-acc-toggle { color: var(--sb-text-bright); }

/* Yeniden kullanılabilir 3D ikon kutucuğu — widget/modal/tablo başlıklarında kullanılır */
.peron-ic3d {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex: 0 0 auto;
    color: #fff;
    /* 🔴 Yedek deger (`--nav-c` verilmeyen cagrilar): gece `--pri` #5b91c7 ve
       beyaz ikon/metinle 3,32:1. `--pri-strong` gunduzde AYNI hex (#3f74a8, sifir
       gorsel fark), gecede #3f6d9c ile 5,41:1. Ton siniflari (.peron-tone-*) kendi
       `--nav-c`lerini verdigi icin ETKILENMEZ. */
    background: linear-gradient(145deg, var(--nav-c, var(--pri-strong)), var(--nav-c2, var(--pri-dark, #335f8a)));
    box-shadow:
        0 7px 15px -6px color-mix(in srgb, var(--nav-c, var(--pri)) 52%, transparent),
        inset 0 1.5px 0 rgba(255,255,255,.40),
        inset 0 -3px 6px rgba(0,0,0,.15);
    position: relative;
}
.peron-ic3d > svg { width: 19px; height: 19px; position: relative; z-index: 1; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.24)); }
.peron-ic3d::after {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(115% 75% at 28% 6%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%);
}
.peron-ic3d--sm { width: 30px; height: 30px; border-radius: 9px; }
.peron-ic3d--sm > svg { width: 16px; height: 16px; }
/* Ton yardımcıları (widget/kart başlıklarına renk vermek için) */
.peron-tone-blue   { --nav-c:#4f8ff0; --nav-c2:#2b5fac; }
.peron-tone-cyan   { --nav-c:#17b7c7; --nav-c2:#0f8794; }
.peron-tone-green  { --nav-c:#2bba86; --nav-c2:#1a8b60; }
.peron-tone-amber  { --nav-c:#e0932f; --nav-c2:#b06c17; }
.peron-tone-violet { --nav-c:#8163e6; --nav-c2:#5b40bd; }
.peron-tone-rose   { --nav-c:#e0607f; --nav-c2:#b23e5c; }
.peron-tone-orange { --nav-c:#e8683f; --nav-c2:#bc4620; }
.peron-tone-steel  { --nav-c:#5793b8; --nav-c2:#356e91; }

/* ── Anasayfa kısayol kartları: sol menüyle AYNI modül renkleri (data-qa) ── */
/* Stok kartı sol menüdeki DEPO bölümüyle aynı ailede (altın). 🔴 Sidebar'ın pastel
   #d2a017'si burada KULLANILMAZ: bu kartta glif BEYAZ ve doygun gradyanın üstünde durur
   (beyaz/#d2a017 = 2.2:1 → 3:1 başarısız). Bir tık koyu altın seçildi: 3.2 / 4.9:1. */
.peron-quick-action[data-qa="stock"]                                { --nav-c:#b8860b; --nav-c2:#8a6208; }
.peron-quick-action[data-qa="orders-new"],
.peron-quick-action[data-qa="purchasing"],
.peron-quick-action[data-qa="contacts"]                             { --nav-c:#2bba86; --nav-c2:#1a8b60; }
.peron-quick-action[data-qa="cek"],
.peron-quick-action[data-qa="kasa"]                                 { --nav-c:#e0932f; --nav-c2:#b06c17; }
.peron-quick-action[data-qa="pricelist"],
.peron-quick-action[data-qa="personnel"]                            { --nav-c:#e0607f; --nav-c2:#b23e5c; }
/* 🔴 SEVKİYAT ÜRETİM AİLESİNDEDİR (2026-09-14). 2026-09-13'te `shipplan` hiç `--nav-c`
   almıyordu (boş dize) ve ona paletten boşta duran cyan atanmıştı. Renk EKSİKLİĞİ doğru
   teşhisti, seçilen ton yanlıştı: bu blok "sol menüyle AYNI modül renkleri" sözü verir ve
   Sevkiyat Planı sol menüde ÜRETİM akordiyonunun içindedir. Cyan, kısayol şeridinde de
   maddeyi bölüm arkadaşlarından (Üretim Siparişleri · Fason · Plan · İş Emirleri)
   ayırıyordu. Aynı modül iki yüzeyde iki renk taşıyamaz. */
.peron-quick-action[data-qa="prodorders"],
.peron-quick-action[data-qa="fason"],
.peron-quick-action[data-qa="plan"],
.peron-quick-action[data-qa="shipplan"],
.peron-quick-action[data-qa="workorders"]                           { --nav-c:#e8683f; --nav-c2:#bc4620; }

/* 🔴 ÇİP ŞERİDİNDE 38px GRADYAN KUTUCUK YOK (2026-09-13).
   Kısayollar 4x4 kart ızgarasından (294px) çip şeridine indi; 38px'lik gradyan+gölge+
   parlama kutucuğu 28px'lik çipe sığmıyor ve satırı ~46px'e şişiriyordu. Renk KİMLİĞİ
   korunuyor — kutucuk yerine GLİFİN KENDİSİ `--nav-c` rengini alıyor, böylece her
   kısayol yine kendi rengiyle tanınıyor ama dekorasyon (gradyan, box-shadow, ::after
   parlaması) kalkıyor. Bu, tek yetkili tanımdır; yukarıda ikinci bir tanım YOKTUR. */
.peron-quick-action-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--nav-c, var(--pri-text));
    transition: color var(--tr-fast), transform var(--tr-fast);
}
.peron-quick-action-icon > svg { width: 14px; height: 14px; }
.peron-quick-action:hover .peron-quick-action-icon { color: var(--nav-c2, var(--pri-dark)); }

/* ── Stat kartları: mevcut gradyan tile'a 3D cam parlaması ekle ── */
.stat-icon { position: relative; box-shadow: inherit; }
.stat-icon > svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.26)); }
.stat-icon::before {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(115% 75% at 28% 6%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -3px 6px rgba(0,0,0,.15);
}

/* ── Kart / widget başlık ikonları: soluk gri yerine vurgulu renk ── */
.peron-card-title svg { color: var(--pri-text); }
/* ── Boş durum ikonu: yumuşak renkli kutucuk ── */
.peron-empty-state-icon {
    color: var(--pri-text);
    background: var(--pri-light);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(63,116,168,.14);
}

/* ════════════════════════════════════════════════════════════════════════════
   MAL KABUL (1.277.0) — gelen hammaddenin depo girişi + 10×10 etiket ekranı
   ────────────────────────────────────────────────────────────────────────────
   🔴 EKRAN PARA GÖSTERMEZ: fiyat kolonu CSS ile gizlenmiyor, HİÇ YOK (sunucu
      yükten siliyor). Buraya bir `.mk-amount` kuralı EKLEME — ekleyen, olmayan
      bir veriyi gizlediğini sanır ve gerçek koruma sunucuda olduğu için sessizce
      yanlış bir güven duygusu üretir.
   🔴 Kolon genişlikleri colgroup'ta SINIFLA verilir (satır içi style DEĞİL):
      satır içi genişlik media query'yi EZER (CLAUDE.md md.7) ve dar ekranda
      kolon daraltma ölü kalırdı.
   ════════════════════════════════════════════════════════════════════════════ */
.mk-toolbar { gap: 8px; flex-wrap: wrap; align-items: center; }
.mk-search { flex: 1 1 220px; min-width: 180px; max-width: 360px; }
.mk-toolbar .peron-select { min-width: 168px; flex: 0 1 auto; }
.mk-merge-wrap { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.mk-merge-lbl { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
#mk-merge[aria-checked="true"] ~ .mk-merge-lbl { color: var(--pri-text); }

/* Seçim bandı — seçim yokken hiç yer kaplamaz (hidden). */
.mk-bulk {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 10px 14px;
    border: 1px solid var(--pri);
    border-radius: 10px;
    background: var(--pri-light);
}
.mk-bulk[hidden] { display: none; }
.mk-bulk-count { font-size: 13px; font-weight: 700; color: var(--pri-text); flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.mk-bulk-note  { font-size: 12px; color: var(--text-muted); }
/* 🔴 1.416.0 — DOKUNMATİKTE VE TELEFONDA BANT LİSTENİN ALTINA YAPIŞIR.
   Tablonun ÜSTÜNDE akışa girdiği için ilk seçimde liste aşağı kayıyordu, ikinci dokunuş başka satıra düşüyordu
   (ölçüldü: 1024 dokunmatik 66 px · 768 122 px · 390 169 px). Kabuk dikey esnek kutu olur, bant sırada en sona geçer ve
   görüş alanının altına yapışır: görünüp kaybolması üstteki satırları oynatmaz. Telefon kuralındaki `sticky` DOM sırası
   yüzünden hiç çalışmıyordu (bant tablonun önündeydi). Zemin `--pri-light` yarı saydamdır → kartın üstüne katmanlanır,
   arkasından satır görünmez. Fareli masaüstü (≥641 px, ince işaretçi) bu bloğun DIŞINDA — orada davranış aynı. */
@media (max-width: 640px), (pointer: coarse) {
    #mk-shell { display: flex; flex-direction: column; }
    #mk-shell > .mk-bulk {
        order: 1;
        position: sticky; bottom: 0; z-index: 3;
        margin: 8px 0 0;
        background: linear-gradient(var(--pri-light), var(--pri-light)), var(--card-bg);
        box-shadow: var(--shadow-toast);
    }
    /* Satır ve grup kutuları da dokunmatikte 24 px tabanına çıkar: genel `.peron-row-cb` dokunmatik kuralının Mal Kabul
       karşılığı (o kural `.mk-chk`yi kapsamıyordu, 768 dokunmatikte 17 px ölçüldü). Kolon 34 px − 2×5 px dolgu = 24 px →
       kolon büyümez, kutu başlıktaki "Tümünü seç" (24 px) ile aynı hizaya oturur. Fareli masaüstünde 17 px kalır. */
    #mk-shell .mk-td-check input[type="checkbox"] { width: 24px; height: 24px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   KOLON BÜTÇESİ — CARİ / MÜŞTERİ / ÜRETİM ÜÇ AYRI KOLON
   ────────────────────────────────────────────────────────────────────────────
   🔴 CANLIDA ÖLÇÜLDÜ (peronsoft · firma 2 · 264 bekleyen satır) — tahmin YOK.
        alan        dolu/264   en uzun    en uzun örnek
        tedarikçi   257        22 hane    "LEDOREX LED AYDINLATMA"
        ürün        264        70 hane    "VELARİS ŞİFONYER -KONSOL 2150MM …"
        cari        183        21 hane    "İNTERMOBİLİ FURNİTURE"
        müşteri      34        19 hane    "EMİR FATİH BOSTANCI"
        üretim       35        42 hane    "CROWN KOLTUK TAKIMI · ASHLEY …"
        talep no    264        17 hane    "SAT-20260616-0020"  (medyan 5)
        TERMİN        6        10 hane    "2026-09-10"
   ────────────────────────────────────────────────────────────────────────────
   🔴 TERMİN KOLONU KALDIRILDI — 264 satırın YALNIZ 6'sında dolu (%2,3). 92px'lik
      bir kolonun %97,7'si "—" basıyordu. Tarih artık TALEP hücresinin alt satırında
      ve YALNIZ dolu olduğunda çizilir; hiçbir bilgi kaybolmadı, 92px serbest kaldı.
      O 92px, kullanıcının istediği üçüncü kolonun (Üretim) bedelidir.
   🔴 KIRPMA (`col-ellip` / `text-overflow`) BU TABLODAN TAMAMEN KALKTI. Kullanıcı
      şartı: "yazılar yarıda silinmesin". Hücreler artık SARAR. Bu yüzden kolonlar
      "en uzun metni tek satırda taşıyacak" kadar geniş OLMAK ZORUNDA DEĞİL — 21
      haneli cari adı iki satıra iner ve TAMAMI okunur.
   ────────────────────────────────────────────────────────────────────────────
   SABİT BÜTÇE: 34+92+136+120+114+140+84+118+92 = 930  ·  + esnek Ürün (min 168)
   → tablonun en dar hâli 1098px (1440px ekranda ölçülen kap 1118px).
   ════════════════════════════════════════════════════════════════════════════ */
.mk-table .mk-c-check  { width: 34px;  }
.mk-table .mk-c-talep  { width: 92px;  }
.mk-table .mk-c-ted    { width: 136px; }
.mk-table .mk-c-urun   { width: auto; min-width: 168px; }
.mk-table .mk-c-cari   { width: 120px; }
.mk-table .mk-c-mus    { width: 114px; }
.mk-table .mk-c-uret   { width: 140px; }
.mk-table .mk-c-sip    { width: 84px;  }
.mk-table .mk-c-gelen  { width: 118px; }
/* Termin — TALEP hücresinin ikinci satırı. `nowrap`: "12.06.2026" ortadan
   bölünürse tarih iki ayrı sayı gibi okunur (bu tabloda daha önce ölçülmüş hata). */
.mk-termin {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* 🔴 52 → 84px: kolon ARTIK İKİ DÜĞME TAŞIYOR (yazıcı = sadece etiket, kutu =
   mal kabul). 52px'te ikinci düğme SESSİZCE ALT SATIRA sarıyordu — ölçüldü:
   768px'te iki düğmenin yatay kutusu birebir aynıydı (694,5-729,5), yani üst
   üsteydiler ve satır yüksekliği de zıplıyordu. 35 + 4 (metin boşluğu) + 6
   🔴 84 DEĞİL 92: 84 ölçümde hücreyi HÂLÂ taşırıyordu (sw 88 > cw 84) — hesapta
      hücrenin KENDİ yatay dolgusu (2×4px) unutulmuştu. 35 + 4 (metin boşluğu)
      + 6 (margin) + 35 = 80, + 8 dolgu + 4 pay = 92. Kolon bütçesi 854 → 894. */
.mk-table .mk-c-islem  { width: 92px; }

/* 🔴 Yatay dolgu 6 → 5px: kolon 34px, başlıktaki onay kutusu 24px olacak
   (aşağıdaki kural) → 34 − 2×5 = 24px içerik kutusu TAM yeter. Kolon
   BÜYÜMEDİ; büyüyen tek şey dokunma hedefi. */
.mk-table th.mk-th-check,
.mk-table td.mk-td-check { text-align: center; padding-left: 5px; padding-right: 5px; }
/* 🔴 `nowrap` ZORUNLU: iki düğmenin arasındaki şablon boşluğu bir metin
   düğümüdür ve kolon daraldığında tam oradan kırılır. Genişliği artırmak tek
   başına yetmez — daha dar bir ekranda aynı sarma geri gelirdi. */
.mk-table th.mk-th-islem,
.mk-table td.mk-td-islem { text-align: center; white-space: nowrap; }
.mk-table td.mk-td-islem .peron-btn + .peron-btn { margin-left: 6px; }
.mk-td-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--pri); cursor: pointer; }
/* 🔴 ÖLÇÜLDÜ: `#mk-all` (tümünü seç) 13×13px idi — WCAG 2.2 AA §2.5.8'in
   24px mutlak tabanının YARISINDAN AZ. Sebep: üstteki kural yalnız
   `.mk-td-check`i (gövde hücresi) hedefliyor, başlık hücresi `th.mk-th-check`
   kapsam dışıydı ve kutu tarayıcı varsayılanında kalıyordu. Bu BÜYÜTME değil,
   erişilebilirlik tabanına çıkarmadır — satır kutuları 17px'te BIRAKILDI. */
.mk-table th.mk-th-check input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--pri); cursor: pointer; }

.mk-table > tbody > tr.mk-row > td { vertical-align: middle; }
.mk-row.is-sel > td { background: var(--pri-light); }
.mk-muted { color: var(--text-muted); }

.mk-talep { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.mk-kismi { margin-left: 4px; font-size: 9.5px; }

/* 13 → 12px: 9 punto tavanı (kullanıcı kuralı "büyütme bişteyi" — hiçbir şey
   gereğinden büyük olmayacak). Mobilde `#mk-shell .mk-urun` kendi puntosunu
   (11.5px) yazıyor → dar ekranın punto düzeni BİT BİT AYNI kalır. */
.mk-urun { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.mk-urun-alt { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.mk-code { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mk-cat  { font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--border-light); border-radius: 4px; padding: 1px 5px; }
.mk-lot-flag { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--pri-text); border: 1px solid var(--pri); border-radius: 4px; padding: 0 4px; }
/* LOT düğmesi — aynı rozetin tıklanabilir hâli. Yeni bir kolon AÇILMADI: lot
   takibi zaten ürünün bir özelliği, düğme de ürün hücresinde durur. */
.mk-lot-btn {
    font: inherit;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--pri-text);
    background: transparent;
    border: 1px solid var(--pri);
    border-radius: 4px;
    padding: 1px 5px;
    cursor: pointer;
    line-height: 1.5;
}
/* 🔴 MİNİMÜM 24px — BÜYÜTME DEĞİL, ERİŞİLEBİLİRLİK TABANI.
   Ölçüldü (1440px, 14/14 örnek): düğme 32×18px — WCAG 2.2 AA §2.5.8'in mutlak
   24×24 tabanının ALTINDA. Mobil sürümü (≤640) zaten 44×24'e çekilmişti, masaüstü
   sürümü unutulmuş. Punto ve dolgu DEĞİŞMİYOR — yalnız kutu tabanı yükseliyor,
   yani düğme görsel olarak BÜYÜMÜYOR, tıklanabilir alanı tabana çıkıyor. */
.mk-lot-btn { min-height: 24px; }
.mk-lot-btn:hover { background: var(--pri-light); }
.mk-lot-btn.is-set { background: var(--pri-strong); color: #fff; border-color: var(--pri); }
.mk-note { font-size: 11px; cursor: help; }

/* ── CARİ · MÜŞTERİ · ÜRETİM — ÜÇ AYRI HÜCRE, KIRPMA YOK ─────────────────────
   🔴 ÖNCESİ: üçü TEK hücrede, cari ile müşteri `flex: 1 1 0` ile 194px'i eşit
      bölüşüyor (her birine ~90px) ve ÜÇÜ DE `text-overflow: ellipsis` ile
      kesiliyordu. Canlıda ölçülen en uzun cari 21 hane → 12. hanede bitiyordu.
   🔴 ŞİMDİ: her biri kendi kolonunda, `white-space: normal` ile SARAR. Kullanıcı
      şartı birebir: "yazılar yarıda silinmesin". Bir ad kolona sığmazsa kesilmez,
      ALT SATIRA iner — tabloda kaybolan tek bir harf kalmaz.
   🔴 `overflow-wrap: anywhere` MİRAS: taban `.peron-table--fixed > tbody > tr > td`
      kuralından gelir; burada tekrar YAZILMADI ki tek yetkili tanım orada kalsın.
   🔴 Aynı hücrede birden çok ad varsa (talep birden çok müşteriye ait — canlıda
      9/264 satır) her ad KENDİ satırında: `display: block`. Eskiden "+2" rozetine
      indirgeniyor, adlar hiç görünmüyordu. */
.mk-cari {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}
.mk-mus {
    display: block;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
}
.mk-cari + .mk-cari,
.mk-mus  + .mk-mus  { margin-top: 2px; }

/* Üretim: sipariş no (RK 4510) üstte, üretilen ürün adları altında — her biri
   AYRI satır. `·` ile birleştirilmiş 42 hanelik dize JS'te bölünür; burada
   yalnız satır düzeni tanımlanır. */
.mk-uretim { display: block; }
.mk-uretim + .mk-uretim { margin-top: 4px; }
.mk-uretim-no {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--pri-text);
    background: var(--pri-light);
    border-radius: 4px;
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
}
.mk-uretim-ad {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-secondary);
}
.mk-src  { display: block; font-size: 10px; color: var(--pri-text); margin-top: 1px; }

/* ── Sayı + birim: birim SAYININ YANINDA kalır ────────────────────────────────
   🔴 ÖLÇÜLDÜ: birim ayrı bir satır-içi öğeydi ve hücre daraldığında (uzun birim
      adı ya da 4 haneli miktar) SAYININ ALTINA sarıyordu — kolon hizası bozuluyor,
      satır yüksekliği zıplıyordu. Sarmalayıcı `inline-flex` + `nowrap` bunu
      yapısal olarak imkânsız kılar; `white-space:nowrap`'e güvenmek yetmez,
      çünkü input ayrı bir yerleşim kutusudur. */
.mk-num-wrap { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; max-width: 100%; }
.mk-sip  { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-unit { flex: 0 0 auto; font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.mk-td-sip, .mk-td-gelen { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.mk-table input.mk-qty { flex: 0 0 76px; width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.mk-table input.mk-qty[readonly] { background: var(--border-light); cursor: not-allowed; }

/* Fark rozeti — "45 geldi, 40 lazımdı" bilgisini SAYIYLA söyler. */
.mk-diff-wrap { display: block; text-align: right; }
.mk-diff {
    display: inline-block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}
.mk-diff.is-fazla { color: var(--pri-text); background: var(--pri-light); }
.mk-diff.is-eksik { color: var(--amber-ink, var(--amber)); background: var(--amber-surface, var(--border-light)); }

/* Birleştirme başlığı — "bu satırlar TEK etikette birleşecek" görsel kabı. */
.mk-table > tbody > tr.mk-grp > td {
    background: var(--content-bg);
    border-top: 2px solid var(--border);
    padding-top: 9px;
    padding-bottom: 9px;
}
.mk-grp-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.mk-grp-sub   { font-size: 10.5px; color: var(--text-secondary); margin-left: 8px; }

/* 🔴 GRUBA GERÇEK KAP (1.330.0). Ölçüldü: grup başlığının tek işareti 2px üst
   çizgi, üyelerinkiyse 3px soluk sol şeritti — canlıda 50 çoklu grup 157 tekilin
   arasına dağılmış hâlde 60 kez yer değiştiriyordu. Şerit kalınlaştırıldı ve
   başlığa zemin verildi ki grubun NEREDE başlayıp NEREDE bittiği görünsün. */
.mk-table > tbody > tr.mk-grp > td { background: var(--border-light); }
.mk-table > tbody > tr.mk-grp > td:last-child { border-radius: 0 6px 0 0; }
.mk-grp-sayi {
    display: inline-block; min-width: 18px; padding: 1px 5px; margin-right: 6px;
    border-radius: 9px; background: var(--pri-strong); color: #fff;
    font-size: 10px; font-weight: 700; text-align: center;
    font-variant-numeric: tabular-nums;
}
.mk-row.is-grouped > td:first-child { box-shadow: inset 3px 0 0 var(--pri); }
/* Grubun SON üyesinden sonra nefes payı — bir sonraki başlık yapışmasın. */
.mk-row.is-grouped + tr.mk-grp > td { border-top-width: 10px; border-top-style: solid; border-top-color: transparent; }

/* "Tekil siparişler" bölüm başlığı — grup DEĞİL, ayraç. Aynı görünürse
   kullanıcı tekilleri de birleşecek sanır. */
.mk-table > tbody > tr.mk-grp--tekil > td {
    background: transparent; border-top: 2px dashed var(--border);
}
.mk-table > tbody > tr.mk-grp--tekil .mk-grp-title { color: var(--text-secondary); font-weight: 600; }

/* ── Kolon düşürme — <col> collapse İLE ───────────────────────────────────────
   🔴 th/td'ye `display:none` yazmak tabloyu DARALTMAZ (bu kod tabanında ölçülmüş
      tuzak); daraltan şey `<col>`un `visibility: collapse`'ıdır.
   🔴 DÜŞME SIRASI DOLULUK ORANINDAN GELİR, sezgiden değil (canlı, 264 satır):
        Üretim  35/264 dolu (%13) → ilk düşen
        Talep no  — etikette ve arama kutusunda ZATEN var → ikinci
      Tedarikçi · Ürün · Cari · Miktar ASLA düşmez: ekranın varlık sebebi onlar.
      (Termin artık kolon değil — Talep hücresinin alt satırında, hiç düşmez.)

   🔴🔴 EŞİK, VİEWPORT DEĞİL KAP GENİŞLİĞİNE GÖRE SEÇİLDİ. Tablo `@media`yi
      viewport'tan okur ama sığacağı yer KAPTIR; ikisi arasındaki fark kenar
      çubuğu + dolgudur ve bu kod tabanında ÖLÇÜLMÜŞTÜR:
          viewport ≥1025 → kap = viewport − 322   (1440 → 1118 · 1366 → 1044)
          viewport 769-1024 → kap = viewport − 142 (1024 → 882, kenar çubuğu mini)
          viewport ≤768   → kap = viewport − 38    (768 → 730)
      Bir bandın DAR UCUNU karşılamayan bütçe, o bandın tamamında kabı taşırır;
      bu yüzden her bant, KENDİ EN DAR viewport'undaki kaba göre boyutlandı.
      🔴 `.mk-c-urun` `width: auto`: bandın geniş ucunda artan yeri O YUTAR,
         yani bütçeyi dar uca göre kısmak sağda boşluk BIRAKMAZ.
   Kolon sırası: 1 seçim · 2 talep · 3 tedarikçi · 4 ürün · 5 cari · 6 müşteri
                 7 üretim · 8 sipariş · 9 gelen · 10 çıktı  */
@media (max-width: 1440px) {
    /* dar uç 1367 → kap 1045 · bütçe 1036 */
    :where(:not(.is-sigdir)) > .mk-table .mk-c-ted    { width: 124px; }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-cari   { width: 110px; }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-mus    { width: 104px; }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-uret   { width: 128px; }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-urun   { min-width: 150px; }
}
@media (max-width: 1366px) {
    /* dar uç 1281 → kap 959 · ÜRETİM düşer (%13 dolu) → bütçe 908 */
    :where(:not(.is-sigdir)) > .mk-table col.mk-c-uret { visibility: collapse; width: 0; }
    :where(:not(.is-sigdir)) > .mk-table > thead > tr > th:nth-child(7),
    :where(:not(.is-sigdir)) > .mk-table > tbody > tr > td:nth-child(7) { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1280px) {
    /* dar uç 1201 → kap 879 · TALEP NO da düşer → bütçe 816 */
    :where(:not(.is-sigdir)) > .mk-table col.mk-c-talep { visibility: collapse; width: 0; }
    :where(:not(.is-sigdir)) > .mk-table > thead > tr > th:nth-child(2),
    :where(:not(.is-sigdir)) > .mk-table > tbody > tr > td:nth-child(2) { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1200px) {
    /* dar uç 1025 → kap 703 (kenar çubuğu HÂLÂ geniş) · bütçe 706 */
    :where(:not(.is-sigdir)) > .mk-table .mk-c-ted    { width: 100px; }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-cari   { width: 92px;  }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-mus    { width: 88px;  }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-sip    { width: 74px;  }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-gelen  { width: 108px; }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-urun   { min-width: 118px; }
}
@media (max-width: 1024px) {
    /* Kenar çubuğu MİNİ olur → kap 1024'te 882'ye ÇIKAR. Bütçe geri gevşetilir
       (730) ki kolonlar gereksiz yere sıkışıp metni fazladan sardırmasın. */
    :where(:not(.is-sigdir)) > .mk-table .mk-c-ted    { width: 104px; }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-cari   { width: 96px;  }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-mus    { width: 92px;  }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-urun   { min-width: 130px; }
}
/* 🔴 TALEP NO TABLETTE GERİ GELİR — ÖLÇÜM SONUCU, süsleme değil.
   990-1024px'te kenar çubuğu MİNİ'ye geçtiği için kap birden 848-882px'e SIÇRAR,
   ama bütçe 730'da kalıyordu: ölçüldü, tablonun sağında **152px ÖLÜ BOŞLUK**
   kalıyor ve o sırada Talep no kolonu GEREKSİZ YERE düşük duruyordu.
   Talep geri geldiğinde bütçe 822 → 848'lik dar uçta bile sığar, boşluk 152'den
   26-60px'e iner. `min-width` alt sınırı 990: 989'da kap 847'ye düşer ve 822
   bütçe kabuk kadar pay bırakır; altında kolon yeniden düşer.
   🔴 `visibility: visible` GEREKLİ: ≤1280 bloğu kolonu collapse etmişti ve
      medya sorgusu özgüllük EKLEMEZ — kazanan KAYNAK SIRASIDIR, o yüzden bu blok
      o kuralın ALTINDA durmak zorunda. */
@media (min-width: 990px) and (max-width: 1024px) {
    :where(:not(.is-sigdir)) > .mk-table col.mk-c-talep { visibility: visible; width: auto; }
    :where(:not(.is-sigdir)) > .mk-table > thead > tr > th:nth-child(2),
    :where(:not(.is-sigdir)) > .mk-table > tbody > tr > td:nth-child(2) { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 900px) {
    /* dar uç 769 → kap 627 · bütçe 688. Kalan ~60px kart İÇİNDE kayar;
       sayfa gövdesi ASLA kaymaz (`.peron-table-wrap { overflow: auto }`).
       769-800 bandı için kolon daha fazla kısılmadı: kısmak metni sardırıp
       satırı uzatır, yani kazanılan genişlik dikeyde geri ödenirdi. */
    :where(:not(.is-sigdir)) > .mk-table .mk-c-ted    { width: 96px;  }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-cari   { width: 88px;  }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-mus    { width: 84px;  }
    :where(:not(.is-sigdir)) > .mk-table .mk-c-urun   { min-width: 112px; }
}

/* ── LOT GİRİŞİ MODALI — parça parça gelen mal ───────────────────────────────
   "50 mt kumaş 3 parça hâlinde geldi" → 3 satır, 3 lot, 3 etiket. */
.mk-lot-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 12px; }
.mk-lot-hint-em { display: block; margin-top: 4px; font-weight: 700; color: var(--pri-text); }
.mk-lot-list { display: flex; flex-direction: column; gap: 8px; }
.mk-lot-row { display: flex; align-items: center; gap: 8px; }
.mk-lot-idx {
    flex: 0 0 22px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.mk-lot-row .mk-lot-code { flex: 1 1 auto; min-width: 0; }
.mk-lot-qty-wrap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.mk-lot-qty-wrap .mk-lot-qty { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.mk-lot-del {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.mk-lot-del:hover { border-color: var(--rose); color: var(--rose); }
.mk-lot-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.mk-lot-sum { font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mk-lot-sip { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════════════════
   MOBİL SON SÖZ — 1.227.0
   ────────────────────────────────────────────────────────────────────────────
   🔴 NEDEN DOSYA SONU: Bulguların yarısı "media query özgüllük EKLEMEZ, kaynak
   SIRASI kazanır" tuzağından geliyordu. Yukarıdaki "Kompakt Tasarım" bloğu
   (.peron-content :3274, .peron-table th/td :3288-3289) media query DIŞINDA ve
   mobil bloklardan (:2739, :2884) SONRA durduğu için o mobil kurallar ÖLÜYDÜ.
   Dosya sonu hem sıra hem özgüllük sorununu tek hamlede çözer.

   🔴 KAPSAM: bu bloğun TAMAMI @media (max-width: …) içindedir. Masaüstü
   (≥769px) render yolu DEĞİŞMEZ — kullanıcı şartı: "web kısmını hiçbir zaman
   bozmamalı, sadece mobil".
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── A · Ölü mobil padding'leri dirilt (0,2,0 > :3274'ün 0,1,0) ───────── */
    .peron-layout .peron-content { padding: 14px 12px; }   /* alt 74px'i :4610 !important verir */
    .peron-layout .peron-table th,
    .peron-layout .peron-table td { padding: 8px 8px; }
    /* 🔴🔴 AKSİYON KOLONU GENEL DOLGUDAN MUAF — burada, çünkü kazanması
       gereken yer burası (yukarıdaki genel kuraldan SONRA).
       BÜTÇE (ölçülerek kuruldu, tahminle değil):
         kolon --tbl-act-col = 88px
         iki düğme 2 × --tbl-ctl-h(36) = 72 · aradaki boşluk 6 → 78px
         dolgu 2 × 4 = 8 → toplam 86 ≤ 88  ✓ (2px pay)
       8px dolguyla 78 + 16 = 94 > 88 olur ve sarma geri gelirdi.
       🦷 BOŞLUK 4 DEĞİL 6px: kullanıcının eşik tablosu komşu hedefler arası
          ≥6px istiyor. Tasarım ölçümü 4px'i bulgu olarak yazdı ve "kolonu
          büyütmek gerekir" dedi — GEREKMEDİ: dolgu 8→4 düşünce 6px boşluk
          bütçeye SIĞIYOR. Eşiği karşılamak için hiçbir kutu BÜYÜTÜLMEDİ. */
    .peron-layout .peron-table td.col-actions,
    .peron-layout .peron-table th.col-actions,
    .peron-layout .peron-table td.cell-actions { padding-left: 4px; padding-right: 4px; }
    .peron-layout .peron-table td.col-actions > div,
    .peron-layout .peron-table td.cell-actions > div { gap: 6px; }
    .peron-layout .peron-table--fixed > thead > tr > th { padding-left: 8px; padding-right: 8px; }

    /* ── B · Dinamik viewport: iOS Safari adres çubuğu 100vh'yi yalan söyler ─
       Desteklemeyen tarayıcı yukarıdaki 100vh kuralında kalır (kademeli bozulma). */
    body.peron-active,
    .peron-layout,
    .peron-sidebar,
    .peron-main,
    .peron-side-panel { height: 100dvh; }
    .peron-modal-overlay > .peron-modal,
    .peron-modal-box { max-height: 92dvh; }

    /* ── C · İç içe kaydırıcı YOK + İşlemler kolonu yapışkanlıktan çıksın ───
       Telefonda 210px'lik dikey pencere içinde tablo kaydırmak kullanılamaz;
       sayfa kaydırması tek kaydırıcı olur. Yapışkan kolon 390px'te tablonun
       yarısını yiyordu. */
    /* 🔴 `none` DEĞİL: sarmalayıcı overflow:auto olduğu için sticky thead'in scrollport'u
       ODUR — dikey sınır kalkınca başlık satırı içerikle yukarı kayıp gidiyordu (ölçüldü:
       350px kaydırmada thead 541 → 191). Orijinal calc(100vh - 210px) ise YATAY telefonda
       180px'lik kullanılamaz bir pencere bırakıyordu. max() ikisini de çözer. */
    .peron-table-wrap { max-height: max(60dvh, 320px); }
    .peron-table--fixed td.col-actions,
    .peron-table--fixed th.col-actions { position: static; box-shadow: none; }
    /* Sabit kolonlu olmayan tablolar: kolonları ezmek yerine KART İÇİNDE yatay
       kaydır. Yalnız .peron-table-wrap içindekiler — sarmalayıcısız tablo
       .peron-content'in overflow-x:hidden'ına takılıp KIRPILIRDI.
       Dışlananlar: .ord-table (max-content + table-layout:fixed) ve .rsv-table
       (min-width:0) ezilirse "metin harf harf alt alta" regresyonu geri gelir. */
    .peron-table-wrap .peron-table:not(.peron-table--fixed):not(.ord-table):not(.rsv-table):not(.gl-fis-table):not(.gl-ag-table):not(.pon-tablo) { min-width: 640px; }

    /* ── D · Dokunma hedefleri ──────────────────────────────────────────────
       .po-act-btn'e min-height VERİLMEDİ: :2873'teki mevcut 44px küçülürdü.
       Çözüm daraltmak değil SARMAK. */
    .peron-table--fixed td.col-check input,
    .peron-table--fixed th.col-check input,
    .po-row-cb { width: 24px; height: 24px; }
    .peron-table--fixed td.col-actions > div { flex-wrap: wrap; row-gap: 4px; justify-content: flex-end; }
    /* 1.365.0: 44px -> yogunluk sozlesmesi (dokunmatikte 36px). Gerekce mobil
       bloktaki notta: 44px satiri 101px'e firlatiyordu. */
    #prod-shell td.col-actions .peron-btn.sm { width: var(--tbl-ctl-h); min-width: var(--tbl-ctl-h); height: var(--tbl-ctl-h); }
    /* Akordeon oku: KUTU 22px KALIR (yogunluk sozlesmesi, "buyutme bir seyi"),
       yalniz FIILI ISABET alani psodo ile 24px tabanina cikar. Dosyadaki mevcut
       desen: :6699 .peron-switch, :12357 .ek-acc, :13808 .rp-dip-detay>summary. */
    .prod-acc-toggle { position: relative; }
    .prod-acc-toggle::after { content: ""; position: absolute; inset: -2px; }
    #prod-shell td.col-actions > div { flex-wrap: wrap; row-gap: 4px; }
    /* TERMIN kolonu :13301'de col.oc-due ile collapse ediliyor ama HUCRE ICERIGI
       gizlenmiyordu: col genisligi (:13267 116px) iptal olunca td 0px'e duser ve
       18px'lik date girdisi komsu hucrenin USTUNE tasip durum acilir listesinin
       hit-test'ini kapatiyordu (olculdu: elementFromPoint = select.po-status-quick).
       Kolon zaten gorunmez -> icerigi de gizle. Bu bir GORUNURLUK/ORTUSME hatasidir,
       buyutmeyle cozulmez. Termin masaustunde ve siparis formunda duzenlenmeye devam eder. */
    #po-shell .peron-table td.po-duecell > * { display: none; }
    .peron-mob-filter-pill { min-height: 40px; }
    /* Fis no baglantisi: 12px PUNTO KORUNUR, kutu buyumez; yalniz dokunma
       yuksekligi psodo ile 24px tabaninin ustune cikar (span inline oldugu icin
       dokunma kutusu = 15px'lik satir kutusuydu).
       SPAN'e sinirlandi: peron-mod-gl.js:360 ayni sinifi bir <td>'ye de veriyor;
       hucreye uygulanirsa +-6px ortu komsu satirin .gl-row-link tiklamasini calardi. */
    span.gl-fisno { position: relative; }
    span.gl-fisno::after { content: ""; position: absolute; inset: -6px 0; }

    /* ── E · iOS odak zoom'u: font-size < 16px olan kontrol odaklanınca
       Safari sayfayı büyütür ve bir daha küçültmez. ───────────────────────── */
    .peron-input,
    .peron-select,
    .peron-textarea,
    .peron-search input,
    .peron-modal-input,
    .peron-modal-select,
    .peron-modal-textarea,
    .peron-notes-area { font-size: 16px; }
    .peron-daterange .peron-input, .dash-prod-search input, .nl-search-input, .plan-week-title-input, .peron-cmd-input,
    .po-mat-table .peron-input.sm, .po-mat-table .peron-select.sm,
    .pl-table .peron-input.sm,
    .pf-table .peron-input.sm,
    .po-mat-table .po-mat-grp-inp.peron-input.sm { font-size: 16px; }
    /* Çıplak <textarea>: sınıfı yok, kalkanın sınıf listesi bunları ıskalıyordu. */
    .peron-msg-conv-input textarea,
    .pmsg-composer textarea { font-size: 16px; }

    /* ── F · Dashboard satırı: uzun ürün adı tek satıra sıkışıp "…" oluyordu ─ */
    .dash-row { padding: 10px 12px; flex-wrap: wrap; row-gap: 4px; }
    .dash-row-main { flex: 1 1 100%; }
    .dash-row-title {
        white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
    }
    .dash-row-meta { white-space: normal; }

    /* ── G · Menü perdesi alt navigasyonun (z:150) ÜSTÜNE, sidebar'ın (z:200)
       ALTINA. z:90 iken perde alt navın arkasında kalıyordu. ──────────────── */
    .peron-mobile-overlay { z-index: 160; }

    /* ── H · <select> metni chevron ikonunun altında kalıyordu ──────────────
       :2048 padding-right:36px veriyor ama :3319 (.peron-input,.peron-select)
       media query OLMADAN daha sonra gelip 10px'e düşürüyor; E bloğu da yazıyı
       16px'e büyütüyor. Ölçüldü: "Tüm Kategoriler" 119.8px metin / 120.0px alan
       → chevron son 18px'in üstüne biniyordu. */
    .peron-layout .peron-select { padding-right: 34px; }

    /* ── I · Dokunma hedefleri (ölçülen değerler 28-34px idi) ─────────────── */
    .peron-header-toggle,
    .peron-theme-toggle { width: 44px; height: 44px; }
    /* 🔴 EZME TAMAMEN KALDIRILDI (1.365.0, kod denetimi bulgusu).
       `.peron-icon-btn` TABLO satır aksiyonu DEĞİL (yalnız üretim planı takvim
       başlığında, 2 kullanım) ve tabanı ZATEN 28px — kullanıcının yoğun yüzey
       eşiğini tam karşılıyor. Mobilde 44'e çıkarmak eski kuralın kalıntısıydı;
       36'ya çekmek ise TABLO tokenini tablo olmayan bir bileşene sızdırmak ve
       eşiği zaten karşılayan bir kutuyu 8px BÜYÜTMEK olurdu ("büyütme bişeyi").
       Doğru cevap: ezmeyi kaldır, kendi tabanına dönsün. */

    /* 🔴 .stk-act 44px KURALLARI SILINDI (1.365.0): olculdu ve OLUYDULAR —
       ozgullukleri (0,1,0) :9935'teki `td.td-actions .stk-act` (0,2,1) kuralindan
       dusuk. Olu kural, birakildigi surece bir sonraki gelistiriciye "stok dugmesi
       44px" diye yalan soyler. `.peron-btn.sm` ayni satirdan ayrildi ve KENDI
       sozlesmesine baglandi. */
    .peron-btn.sm { min-height: var(--tbl-ctl-h); }
    /* 🔴 YORUM YANLISTI, KOD DA (1.364.0 tarayici denetimi). "Gorsel 20px kalir,
       tiklama alani 44px'e cikar" diyordu; kural 44 degil 24 yaziyordu ve `padding`
       zaten ETKISIZDI: Chrome `appearance:auto` olan yerlesik `<input type=checkbox>`
       uzerinde yazar `padding`i UYGULAMIYOR (olculen computed padding = 0px), yani
       `background-clip: content-box` de hicbir ise yaramiyordu. Kutu her zaman TAM
       kutu boyutunda render ediliyordu. Etkisiz iki bildirim kaldirildi; 24px hem
       gorsel hem hedef boyutudur ve WCAG 2.2 §2.5.8 mutlak tabanini karsilar.
       Kolon 36px (:5496) ve `td` `padding: 0 8px` ile 24px kutu TASMAZ. */
    .peron-row-cb { width: 24px; height: 24px; }

    /* ── J · Mobil üretim/plan görsel kuralları 1.228.0'de dosya SONUNDAKİ
       "MOBİL ÜRETİM TAKİP + ÜRETİM PLANI" bloğuna taşındı (tipografi, boşluk,
       kontrast ve aşama paleti orada tek yerde durur). Buradaki eski satırlar
       aynı özgüllükte olup DAHA ÖNCE geldiği için sessizce eziliyordu. */

    /* ── K · Kontrast (AA) — sabit hex'ler tema ezmesine cevap vermiyordu ────
       Ölçülenler: dolgulu buton gece beyaz/--pri = 3.32 → --pri-strong ≥4.9. */
    .peron-mob-filter-pill.active { background: var(--pri-strong); border-color: var(--pri-strong); }
    .stat-link { color: var(--violet-ink); }
}

@media (max-width: 480px) {
    .peron-layout .peron-content { padding: 10px; }
    /* 🔴 Tablo dolgusu/yazi boyu ARTIK BURADA YAZILMAZ — ozgullugu (0,2,1) tablo
       yogunluk sozlesmesini (0,1,3) eziyordu ve token'i degistiren gelistirici
       dar telefonda hicbir etki goremiyordu. Deger token override'ina tasindi. */
    :root {
        --tbl-cell-py:   7px;
        --tbl-fs:        12px;
        --tbl-head-py:   7px;
        --tbl-head-fs:   10.5px;
    }
    .peron-layout .peron-table th,
    .peron-layout .peron-table td { padding-left: 6px; padding-right: 6px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBİL ÜRETİM TAKİP + ÜRETİM PLANI — 1.228.0  ("sıra defteri" düzeni)
   .peron-mob-* sınıfları YALNIZ mobil ekranlarda (production-mobile, plan-mobile,
   warehouse) kullanılır; masaüstü sol menüsünde bu sayfalar yoktur → masaüstü
   render yoluna dokunamazlar.

   🔴 İMZA KARARI: satırları ayıran çizginin KENDİSİ ilerleme çubuğudur
   (.peron-mob-row::after, genişlik = --pm-pct). Yüzde göstergesi böylece SIFIR
   ek dikey piksel harcar. Ölçüldü: eski kapalı kart 138px → yeni satır ~80px.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Arama kutusu (üretim + plan ORTAK) ───────────────────────────────────── */
.peron-mob-find {
    position: relative; display: flex; align-items: center; gap: 8px;
    height: 46px; padding: 0 12px;
    border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--card-bg, #fff);
}
.peron-mob-find:focus-within { border-color: var(--pri-text); }
.peron-mob-find > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.peron-mob-find input {
    flex: 1; min-width: 0; height: 100%; border: none; background: none; padding: 0;
    /* 🔴 16px altı: iOS odaklanınca sayfayı zoomlar ve bir daha küçültmez. */
    font-size: 16px; color: var(--text-primary); outline: none;
}
/* 🔴🔴 PLACEHOLDER SIĞMAZSA ÜÇ NOKTAYLA BİTER (1.363.0 ölçüm bulgusu).
   1.363.0'te bu çubuğa ikinci bir 46px ikon düğme ("Yazdır") eklendi ve arama
   kutusu daralıyor — ÖLÇÜLDÜ: 360px'te 238 → 184px, 390px'te 264 → 210px.
   Metin 230px istiyordu, yani 360/390'da ÖNCEDEN SIĞIYORDU ve artık sığmıyor.
   Metin 25 karaktere indirildi (~174px) → 360 ve 390 tekrar sığıyor; 320px'te
   (144px) hâlâ sığmıyor ama bu düğmeden ÖNCE de sığmıyordu (198px vs 230px).
   🔴 KALAN TAŞMA SERT KESİLMEZ: varsayılan `clip` metni kelimenin ortasından
      kesiyordu ("…veya ted"). Üç nokta, kırpılmış olduğunu SÖYLER — kırpılmış
      bir metnin kaza süsü vermesi, kırpılmasından daha kötüdür.
   🔴 PUNTO KÜÇÜLTÜLMEDİ: girdi 16px kalmak zorunda (iOS odaklanınca 16px altında
      sayfayı zoomlar ve geri çıkılamaz); placeholder 14px'te bırakıldı. */
.peron-mob-find input::placeholder {
    color: var(--text-muted); font-size: 14px;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.peron-mob-find input::-webkit-search-cancel-button { display: none; }
.peron-mob-find-x {
    flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 8px;
    background: var(--border-light); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.peron-mob-find-x svg { width: 15px; height: 15px; }
.peron-mob-find-x[hidden] { display: none; }

/* ── TARİH SÜZGECİ (mobil Üretim Takip) — 1.290.0 ─────────────────────────────
   Kullanıcı: "üstte arama filtresi ve tarih filtresi olsun, filtreleri YAN YANA
   sığdır, çok büyük yapma."
   🔴 İki `input[type=date]` aramanın YANINA sığmaz: UA her birine ~120px içsel
      minimum verir (min-width:0 verilse bile), 320px'te arama 40px'e çökerdi.
      Bu yüzden yan yana duran şey bir AÇ/KAPA düğmesidir; tarih kutuları altta
      açılan panelde. Düğme KAPALIYKEN DE seçili aralığı yazar → süzgeç asla
      sessizce açık kalmaz. */
/* 🔴 YÜKSEKLİK KOMŞUSUYLA AYNI OLMAK ZORUNDA. İlk yazımda 46px verilmişti,
   oysa aynı satirdaki arama kutusu `.peron-mob-tools .peron-mob-find` kuralıyla
   44px'e sabitleniyor. Ölçüldü (320px): kap 42px, düğme 46px — düğme kabını
   taşıyor ve GERÇEK dokunma hedefi 40px'e düşüyordu (görsel kutu 46 diyor,
   `elementFromPoint` 40 ölçüyor). İki komşu aynı yüksekliği paylaşır. */
.peron-mob-datebtn {
    position: relative;
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    height: 44px; min-width: 44px; padding: 0 9px;
    border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--card-bg, #fff); color: var(--text-secondary);
    font: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    font-variant-numeric: tabular-nums;
}
.peron-mob-datebtn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Üretim Takibi mobil süzgeç çipleri (1.309.0) — tarih düğmesiyle AYNI kutu ölçüsü.
   🔴 44px yükseklik komşusuyla PAYLAŞILIR: farklı olsaydı, bu dosyanın yukarıda
      ölçüp belgelediği hata tekrarlanırdı (görsel kutu 46 der, elementFromPoint 40
      ölçer). `height` değil `min-height` de yazılmaz — kardeşiyle birebir aynı olmalı.
   🔴 `appearance:none` YOK: yerel açılır liste mobilde OS seçicisini açar, kendi
      panelimizi yazmak ikinci bir yol ve ikinci bir hata kaynağı olurdu. */
/* Süzgeç çipi satırı — `.peron-mob-tools` kabuğunun ALTINDA, ayrı satır.
   🔴 `flex-wrap:wrap`: 320px'te iki çip yan yana sığmazsa alt alta iner, YATAY
      KAYDIRMA ÜRETMEZ. `gap:8px` komşu dokunma hedefleri arası zorunlu boşluktur. */
.peron-mob-filtre { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.peron-mob-filtre .peron-mob-chipsel { flex: 1 1 auto; }

.peron-mob-chipsel {
    flex: 0 0 auto;
    height: 44px; min-width: 44px; max-width: 40vw; padding: 0 8px;
    box-sizing: border-box;
    border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--card-bg); color: var(--text-secondary);
    font: inherit; font-size: 16px; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Etkin süzgeç GÖRÜNÜR olmalı (sessiz süzgeç yok) — tarih düğmesindeki `is-on` ile aynı dil. */
.peron-mob-chipsel.is-on {
    border-color: var(--pri-border); color: var(--pri-text, var(--pri));
    background: var(--pri-light);
}
/* Görsel kutu 44px; alt-piksel yuvarlaması hedefi 43'e düşürmesin diye
   genişletici katman (tasarım sistemi §3 — `.peron-mob-seg-btn` ile aynı desen).
   Yatay genişlik DEĞİŞMEZ (inset 0 sağ/sol) → satır genişliğine dokunmaz. */
.peron-mob-datebtn::after { content: ''; position: absolute; inset: -2px 0; }
/* 🔴🔴 ALT KOMŞU ÜSTTEKİ DÜĞMEYİ ÖRTÜYORDU. Ölçüldü (320px, m103):
   tarih düğmesi 60→104px aralığında, ama 96px'ten itibaren `elementFromPoint`
   `.peron-mob-filter-pill` döndürüyordu — süzgeç şeridi kendi 7px dolgusunu
   `margin-top: -7px` ile geri alıyor (1.289.0) ve çiplerin dokunma genişleticileri
   o bantta üstte kalıyor. Sonuç: düğmenin gerçek hedefi 44 değil 40px.
   ÇÖZÜM: araç satırı kendi yığın bağlamını alır ve üstte boyanır. Çipler bir şey
   KAYBETMEZ — kaybettikleri 7px kendi genişleticilerinin ÜST kenarıdır, hedefleri
   aşağı doğru zaten 44px'i geçiyor.
   🔴 KAPSAM `.peron-mob-sticky` ALTIYLA SINIRLI: depo ekranı da `.peron-mob-tools`
      kullanıyor ama altında çip şeridi yok — orada bu kural etkisizdir. */
.peron-mob-sticky .peron-mob-tools { position: relative; z-index: 2; }
.peron-mob-datebtn.is-on {
    border-color: var(--pri); background: var(--pri-light); color: var(--pri-text);
}
.peron-mob-datepanel {
    margin-top: 6px; padding: 8px; border: 1.5px solid var(--border);
    border-radius: 12px; background: var(--card-bg, #fff);
}
.peron-mob-datepanel[hidden] { display: none; }
.peron-mob-datepre { display: flex; flex-wrap: wrap; gap: 6px; }
.peron-mob-datepre > button {
    position: relative; min-height: 36px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--border-light); color: var(--text-secondary);
    font: inherit; font-size: 11.5px; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Görsel yükseklik 36px kalır, DOKUNMA hedefi 44px'e çıkar (kutuyu büyütmeden) —
   `.peron-mob-seg-btn` ile aynı desen. */
.peron-mob-datepre > button::after { content: ''; position: absolute; inset: -4px 0; }
.peron-mob-datepre > button.is-clear { color: var(--rose-ink); }
/* 🔴 `flex-wrap` ŞART: date kutusunun UA içsel minimumu 320px'te iki kutuyu yan
   yana zor sığdırır; sarmalama olmadan kap taşardı. */
.peron-mob-daterow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px;
}
.peron-mob-daterow > span { flex: 0 0 auto; color: var(--text-muted); font-weight: 700; }
.peron-mob-daterow .peron-input { flex: 1 1 120px; min-width: 0; }
.peron-mob-datehint { margin: 7px 0 0; font-size: 10px; line-height: 1.35; color: var(--text-muted); }
.peron-mob-datehint b { font-weight: 800; color: var(--text-secondary); }

/* ── Yapışkan başlık bloğu — kaydırırken arama/süzgeç ekranda kalır ───────── */
.peron-mob-sticky {
    position: sticky; top: 0; z-index: 5;
    /* 🔴 8px → 5px: kullanıcı "daha çok stok kartı gözüksün" dedi. Yapışkan başlığın
       alt boşluğu ekranın tepesinde SÜREKLİ duruyor; 3px orada 3px'tir, listede ise
       her kaydırmada geri kazanılır. Kartlar arası boşluğa DOKUNULMADI (okunabilirlik). */
    padding-bottom: 5px; margin-bottom: 2px;
    background: var(--content-bg);
}

/* ── Liste kabı ───────────────────────────────────────────────────────────── */
.peron-mob-list { display: block; }

/* ── KALEM ÇERÇEVESİ ──────────────────────────────────────────────────────────
   Kullanıcı: "yazılar birbirine girmemesi için birbirinden ayır ince çerçeve yap
   her ürün veya stok için". Çerçeve satırın KAPSAYICISIDIR (kardeşi değil) — açık
   üretim kaleminde gövde de aynı çerçevenin içinde kalır, aksi halde açılan kalem
   çerçevenin dışına taşardı. Maliyet: kalem başına 1px kenarlık + 4px boşluk. */
.peron-mob-card {
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card-bg, #fff);
    margin-bottom: 3px;
    overflow: hidden;          /* köşeleri kırp: is-open zemini ve ilerleme çubuğu taşmasın */
}

/* ── ORTAK SATIR İSKELETİ (üretim · hafta · plan · stok · hareket) ─────────── */
.peron-mob-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; column-gap: 8px;
    width: 100%; padding: 5px 8px 6px; position: relative;
    background: none; border: none; text-align: left; font: inherit; color: inherit;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* İlerleme çubuğu = satırın alt kenarındaki 2px şerit. Mutlak konumlu → SIFIR ek
   dikey piksel. Alt katman (::before) nötr ray, üst katman (::after) --pm-pct dolu. */
.peron-mob-row::before,
.peron-mob-row::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
}
.peron-mob-row::before { right: 0; background: var(--border-light); }
.peron-mob-row::after  { width: var(--pm-pct, 0%); background: var(--pri-strong); transition: width .25s ease; }
/* Yüzdesi olmayan satırlarda (stok, hareket) ray da çizilmez — çerçeve zaten ayırıyor. */
.peron-mob-row.is-wh::before,   .peron-mob-row.is-wh::after,
.peron-mob-row.is-hist::before, .peron-mob-row.is-hist::after { display: none; }
.peron-mob-row.is-plan { cursor: default; }
.peron-mob-row.is-open { background: var(--pri-light); }
/* 🔴 Dokunulabilir satırlar (üretim kalemi, hafta) ≥44px. Sıkıştırma sonrası 43px'e
   düşmüştü — salt okunur satırlara (stok, hareket, plan kalemi) uygulanmaz, onlarda
   dokunma hedefi gerekmez ve 1px bile boşuna gider. */
.peron-mob-row.is-prod,
.peron-mob-row.is-week { min-height: 44px; }

.peron-mob-row-main { min-width: 0; display: flex; flex-direction: column; row-gap: 2px; }
.peron-mob-row-side {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; row-gap: 2px;
}

/* ── İKİ SATIR: 1) cari + öncelik + miktar   2) ÜRÜN ADI + DURUM ÇİPİ ────────
   Kullanıcı şartı: "ürün toplamda ana sayfada 2 satır gözüksün en fazla" ve
   "ürünün durum kısmını ürün adının sağ kısmına taşı". */
.peron-mob-t1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.peron-mob-t2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* İKİNCİL üst satır (üretimde ÜRÜN ADI, plan/hafta/depoda ilgili ikincil metin). */
.peron-mob-cari,
.peron-mob-sub {
    flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 700; line-height: 14px;
    color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* BİRİNCİL satır. Üretimde CARİ · MÜŞTERİ buraya taşındı (kullanıcı: "cari ve müşteri
   ismi daha belirgin olsun") → en koyu renk + en yüksek ağırlık + harf aralığı. */
.peron-mob-name,
.peron-mob-lead {
    flex: 1 1 auto; min-width: 72px; font-size: 12px; font-weight: 700; line-height: 16px;
    color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peron-mob-lead { font-weight: 800; letter-spacing: -.1px; }
/* 🔴 Adı `peron-mob-qty` OLAMAZ: o sınıf depo miktar sayacı kabına aitti
   (`margin-bottom:16px`) ve satırı 16px şişiriyordu (ölçüldü: t1 32px). */
.peron-mob-amt {
    flex-shrink: 0; font-size: 10.5px; font-weight: 700; line-height: 14px;
    color: var(--text-secondary); font-variant-numeric: tabular-nums;
}

/* ── TEK SATIR ÜRETİM KALEMİ — 1.290.0 ───────────────────────────────────────
   Kullanıcı: "sipariş tarihi · cari-müşteri · ürün olarak TEK SATIR gözüksün,
   tıklayınca tüm bilgiler akordiyonda olsun."
   🔴 `min-width` tabanları DÜŞÜRÜLÜR (72px → 44/40px): dört alan + aşama çipi
      320px'te ancak böyle sığar. Ölçüm: 320px'te kap 284px, taban toplamı
      30+44+40+92+14 = 220px + boşluklar 34px = 254px → taşma yok.
      Kırpılan metin `title` ile tam hâliyle erişilebilir; akordiyonda da yazar.
   🔴 Kural YALNIZ `.is-tek` altında: iki satırlı kardeş satırlar (plan · hafta ·
      depo · hareket) AYNI iskeleti kullanıyor, taban düşürmek onları da bozardı. */
.peron-mob-row.is-tek .peron-mob-t1 { gap: 5px; }
.peron-mob-row.is-tek .peron-mob-lead { flex: 1.2 1 0; min-width: 44px; }
.peron-mob-row.is-tek .peron-mob-sub  { flex: 1 1 0;   min-width: 40px; }
/* Sipariş tarihi — satırın ilk alanı. Rakam hizası için tabular-nums; kırpılmaz. */
.peron-mob-odate {
    flex: 0 0 auto; font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 13px;
    letter-spacing: -.2px; color: var(--text-muted); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Sağ kolon tek ögeye (aşama çipi) indi → dikey yığın yerine ortalanmış tek satır. */
.peron-mob-row.is-tek .peron-mob-row-side { flex-direction: row; align-items: center; }
.peron-mob-row.is-tek .peron-mob-stg { max-width: 92px; }

/* Öncelik/bu-hafta bayrağı */
.peron-mob-flag {
    flex-shrink: 0; font-style: normal; font-size: 9.5px; font-weight: 800; line-height: 13px;
    letter-spacing: .3px; text-transform: uppercase; padding: 1px 4px; border-radius: 4px;
}
.peron-mob-flag.is-acil   { background: var(--rose-surface);  color: var(--rose-ink); }
.peron-mob-flag.is-yuksek { background: var(--peach-surface); color: var(--amber-ink); }
.peron-mob-flag.is-now    { background: var(--pri-strong);    color: #fff; }

/* Yüzde — sağ kolonun en büyük ögesi. 20px iken satırı büyütüyordu; 15px'te sağ
   kolon (15+2+13 = 30px) sol kolondan (16+2+18 = 36px) KISA kalır → satırı BÜYÜTMEZ. */
.peron-mob-pct {
    font-size: 13px; font-weight: 800; line-height: 14px; letter-spacing: -.3px;
    color: var(--pri-text); font-variant-numeric: tabular-nums;
}
.peron-mob-pct i { font-size: var(--m-fs-micro, 9px); font-style: normal; font-weight: 700; margin-left: 1px; }
.peron-mob-pct.sm { font-size: 12px; letter-spacing: 0; }

/* Termin — "geç kaldım mı?" KELİMEYLE. */
.peron-mob-due { font-size: 10px; font-weight: 700; line-height: 12px; color: var(--text-muted); white-space: nowrap; }
.peron-mob-due.is-late  { color: var(--rose-ink); }
.peron-mob-due.is-today { color: var(--amber-ink); }

.peron-mob-chev { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); transition: transform .2s; }
.peron-mob-row.is-open .peron-mob-chev { transform: rotate(90deg); }

/* ── Aşama çipi — tonlar masaüstü .prod-st-* paletiyle aynı (--st-* token) ──
   Renk TEK BAŞINA bilgi taşımaz: aşama adı her zaman yazılıdır.
   🔴 flex-shrink:0 — baskıyı ürün adı emer (min-width:78px tabanı + ellipsis);
   çip kısalırsa "Plana Alınd…" gibi okunamaz bir etiket çıkardı. max-width yalnız
   beklenmedik uzun etiket için emniyet supabı. */
.peron-mob-stg {
    flex-shrink: 0; display: inline-flex; align-items: center; max-width: 66%;
    padding: 0 5px; border-radius: 4px; border: 1px solid transparent;
    font-size: 10.5px; font-weight: 700; line-height: 14px; white-space: nowrap;
}
.peron-mob-stg > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* "· 01.01 Sal" — plana alınan kalemin HANGİ TARİHTE planlandığı. */
.peron-mob-st-d { flex-shrink: 0; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.peron-mob-dow  { font-weight: 700; }
.peron-mob-stg em { font-style: normal; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 3px; }
.peron-mob-stg-more { flex-shrink: 0; font-size: 11px; font-weight: 800; line-height: 18px; color: var(--text-muted); }
.peron-mob-st-beklemede,
.peron-mob-st-plana_alindi { background: var(--st-wait-bg); color: var(--st-wait-fg); border-color: var(--st-wait-bd); }
.peron-mob-st-kesimde      { background: var(--st-cut-bg);  color: var(--st-cut-fg);  border-color: var(--st-cut-bd); }
.peron-mob-st-dikiste      { background: var(--st-sew-bg);  color: var(--st-sew-fg);  border-color: var(--st-sew-bd); }
.peron-mob-st-dosemede     { background: var(--st-uph-bg);  color: var(--st-uph-fg);  border-color: var(--st-uph-bd); }
.peron-mob-st-ambalajda    { background: var(--st-pack-bg); color: var(--st-pack-fg); border-color: var(--st-pack-bd); }
.peron-mob-st-tamamlandi   { background: var(--st-done-bg); color: var(--st-done-fg); border-color: var(--st-done-bd); }
.peron-mob-st-sevk_edildi  { background: var(--st-ship-bg); color: var(--st-ship-fg); border-color: var(--st-ship-bd); }
.peron-mob-st-iptal        { background: var(--st-canc-bg); color: var(--st-canc-fg); border-color: var(--st-canc-bd); }
/* 1.429.0 — "Mamül depoda" (depo siparişinin depoya giren birimi): masaüstü `.po-depo-rozet` dili — dolgusuz, yeşil yazı. */
.peron-mob-st-depo         { background: transparent; color: var(--green-ink); border-color: var(--border); }
/* Plan durumu — üretim aşamasıyla KARIŞMASIN diye ayrı, daha sakin bir set. */
.peron-mob-pl-planlandi  { background: var(--st-wait-bg); color: var(--st-wait-fg); border-color: var(--st-wait-bd); }
.peron-mob-pl-devam      { background: var(--st-cut-bg);  color: var(--st-cut-fg);  border-color: var(--st-cut-bd); }
.peron-mob-pl-tamamlandi { background: var(--st-done-bg); color: var(--st-done-fg); border-color: var(--st-done-bd); }
.peron-mob-pl-iptal      { background: var(--st-canc-bg); color: var(--st-canc-fg); border-color: var(--st-canc-bd); }

/* Satınalma durumu (mobil) — üretim aşaması ve plan durumuyla KARIŞMASIN diye
   ayrı set; tonlar masaüstü `.peron-badge` semantiğini izler (açık nötr, süreç
   kehribar, teslim yeşil, iptal kırmızı). Renk TEK BAŞINA bilgi taşımaz: durum
   adı her çipte yazılıdır. */
.peron-mob-pu-open      { background: var(--st-wait-bg); color: var(--st-wait-fg); border-color: var(--st-wait-bd); }
.peron-mob-pu-approved  { background: var(--st-cut-bg);  color: var(--st-cut-fg);  border-color: var(--st-cut-bd); }
.peron-mob-pu-ordered,
.peron-mob-pu-partial   { background: var(--st-pack-bg); color: var(--st-pack-fg); border-color: var(--st-pack-bd); }
.peron-mob-pu-received  { background: var(--st-done-bg); color: var(--st-done-fg); border-color: var(--st-done-bd); }
.peron-mob-pu-cancelled { background: var(--st-canc-bg); color: var(--st-canc-fg); border-color: var(--st-canc-bd); }

/* Satınalma akordeon gövdesi — üretim gövdesiyle AYNI zemin/dolgu (tek görsel dil). */
.peron-mob-purbody { padding: 2px 8px 9px; background: var(--pri-light); }
.peron-mob-purbody[hidden] { display: none; }
.peron-mob-purbody .peron-mob-facts { margin-top: 4px; }

/* "Perşembe 23 Tem · 20 Tem – 26 Tem" — aramada nerede planlandığı. */
.peron-mob-where {
    min-width: 0; font-size: 11px; font-weight: 700; color: var(--pri-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Açık gövde (satırın KARDEŞİ — <button> içine blok konulamaz) ─────────── */
.peron-mob-prod-body { padding: 2px 8px 9px; background: var(--pri-light); }
.peron-mob-prod-body[hidden] { display: none; }
.peron-mob-mods { padding: 0; }
/* İKİ kolon: modül adı + aşama çipi. Üçüncü (miktar) kolon KALDIRILDI — üç kolon
   çekiştiğinde aşama çipi kırpılıyordu ("aşama kısmı yarım gözüküyor"). */
.peron-mob-mod {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 8px; padding: 3px 0;
    border-bottom: 1px solid var(--border-light);
}
.peron-mob-mod:last-child { border-bottom: none; }
.peron-mob-mod-name {
    min-width: 0; display: flex; flex-direction: column; gap: 1px;
    font-size: 11.5px; line-height: 15px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere;
}
.peron-mob-mod-sub { font-size: 10px; line-height: 13px; font-weight: 500; color: var(--text-muted); }
.peron-mob-mod.is-live .peron-mob-mod-sub { color: var(--pri-text); font-weight: 700; }
/* Modül satırında yer bol → çip kısıtlanmaz, TAM görünür. */
.peron-mob-mod .peron-mob-stg { max-width: none; }

/* Detaylar tek paragraf akışında — her biri ayrı satır olsaydı 8×29px giderdi. */
.peron-mob-facts { padding: 0; margin-top: 7px; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
/* 1.426.0 — telefonda Üretim Hikâyesi girişi (masaüstündeki mor saat düğmesinin karşılığı; sevk / teslim fotoğrafları orada). */
.peron-mob-hikaye { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 8px; color: var(--violet-ink); }
.peron-mob-hikaye > svg { width: 14px; height: 14px; }
/* Telefondan açılan Üretim Hikâyesi'nin "← Üretim Takibi" bağlantısı 15 px yüksekti (mutlak taban 24). Dolgu kadar eksi kenar
   payı: dokunma kutusu 25 px, yerleşim birebir aynı. */
@media (max-width: 768px) {
    .peron-back-link { padding: 5px 0; margin-top: -5px; margin-bottom: -1px; }
}
.peron-mob-fact { display: inline; font-weight: 600; color: var(--text-secondary); }
/* 🔴 ÖLÇÜLDÜ: `var(--border)` ayırıcı zeminle 1,11:1 — görünmüyordu ve 8 bilgi
   tek metin akışında ayırıcısız birleşiyordu. `--text-muted` ile 5,12:1. */
.peron-mob-fact + .peron-mob-fact::before { content: ' · '; color: var(--text-muted); }
.peron-mob-fact i { font-style: normal; font-weight: 400; color: var(--text-muted); margin-right: 3px; }

/* ── Plan: kırıntı (geri + hafta) — yapışkan blokta ───────────────────────── */
.peron-mob-crumb { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.peron-mob-crumb[hidden] { display: none; }
.peron-mob-back {
    display: inline-flex; align-items: center; gap: 3px; min-height: 44px; padding: 0 6px 0 0;
    background: none; border: none; cursor: pointer; font: inherit;
    font-size: 12px; font-weight: 700; color: var(--pri-text);
    -webkit-tap-highlight-color: transparent;
}
.peron-mob-back svg { width: 16px; height: 16px; }
.peron-mob-crumb-t {
    flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peron-mob-crumb-n { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* ── Plan: gün başlığı (yapışkan) + o günün GİRİNTİLİ kalemleri ────────────
   🔴 Kullanıcı: "plan tarihine tıklayınca ekranda bir sürü isim yazıyor ama belli
   olmuyor; plan tarihi üstte, planlanan kısımlar biraz sağa küçük yazılarla diğer
   plan tarihlerinden ayır." İki bağımsız sinyal kullanılır:
     1) gün başlığı BÜYÜK + KALIN ayraç (2px) — kalem çerçevesi 1px, karışmaz
     2) kalemler 12px GİRİNTİLİ kapta — hiyerarşi renkten bağımsız okunur */
.peron-mob-day-h {
    /* 🔴 --pm-sticky JS tarafından ÖLÇÜLEREK yazılır (yapışkan arama bloğunun yüksekliği).
       top:0 verilirse gün başlığı o bloğun ARKASINA kayar — ölçüldü: 66px < 172px. */
    position: sticky; top: var(--pm-sticky, 0px); z-index: 2;
    display: flex; align-items: baseline; gap: 6px;
    margin: 18px 0 6px; padding: 0 2px 4px;
    border-bottom: 2px solid var(--pri-strong);
    background: var(--content-bg);
    font-size: 10px; color: var(--text-muted);
}
.peron-mob-day-h b {
    font-size: 12px; font-weight: 800; line-height: 15px; letter-spacing: .4px;
    text-transform: uppercase; color: var(--text-primary);
}
.peron-mob-day-h > span { font-size: 11px; font-weight: 700; line-height: 15px; color: var(--text-secondary); }
.peron-mob-day-h em { font-style: normal; font-size: 10px; font-weight: 700; line-height: 15px; }
.peron-mob-day-h .peron-mob-day-n { margin-left: auto; }
.peron-mob-day-h.is-today b { color: var(--pri-text); }
/* "bugün" — renk TEK BAŞINA taşımasın diye kelimeyle de yazılır. */
.peron-mob-day-h .is-now {
    background: var(--pri-strong); color: #fff; padding: 0 5px; border-radius: 4px;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
}
/* 🔴 "her şey iç içeymiş gibi gözüküyor": girinti TEK BAŞINA gruplamayı anlatmıyordu —
   kalemler hangi güne ait belli olmuyordu. Sol KILAVUZ ÇİZGİ girintiyi bir gruba
   bağlar; gün başlığındaki 2px vurgu çizgisiyle aynı renk ailesini kullanır. */
.peron-mob-daygrp {
    margin: 0 0 4px 3px; padding-left: 9px;
    border-left: 2px solid var(--border);
}

/* Plan kalemi üretim satırından bir tık küçük — hiyerarşi tipografiyle de kurulur. */
.peron-mob-row.is-plan { padding: 4px 7px 5px; }
.peron-mob-row.is-plan .peron-mob-cari { font-size: 10.5px; line-height: 13px; }
.peron-mob-row.is-plan .peron-mob-name { font-size: 11.5px; line-height: 15px; }
.peron-mob-row.is-plan .peron-mob-stg  { font-size: 10px; line-height: 13px; }

/* Kapsam notu — yüzdenin ne olduğunu ve yüklü dönemi söyler (yanlış karar önler). */
.peron-mob-scope {
    margin: 16px 2px 0; padding-top: 12px; border-top: 1px solid var(--border-light);
    font-size: 11px; line-height: 1.5; color: var(--text-muted);
}
.peron-mob-scope b { font-weight: 700; color: var(--text-secondary); }

.peron-mob-empty { text-align: center; padding: 40px 16px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.peron-mob-empty small { font-size: 11.5px; }
.peron-mob-sect {
    padding: 14px 2px 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-muted);
}

/* Çip görsel olarak 40px kalır, DOKUNMA hedefi 44px'e çıkar (yapışkan bloğu şişirmeden). */
.peron-mob-filter-pill { position: relative; }
.peron-mob-filter-pill::after { content: ''; position: absolute; inset: -2px 0; }

/* Süzgeç çipi sayacı — çipin İÇİNDE, 0 ek dikey piksel. */
.peron-mob-filter-pill b {
    margin-left: 5px; font-size: 11px; font-weight: 800;
    font-variant-numeric: tabular-nums; opacity: .75;
}
/* Aktif çip sayısı 0 olsa bile SOLDURULMAZ — seçili süzgeç devre dışı görünüyordu. */
.peron-mob-filter-pill.is-empty:not(.active) { opacity: .5; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBİL DEPO — 1.229.0
   Üstte kategori + arama + toplam stok değeri, altında İKİ görünüm: Stok · İşlem Geçmişi.
   🔴 SALT OKUNUR — stok giriş/çıkışı yalnız QR okutan personel yapar.
   Satır iskeleti üretim/plan ile ORTAK (.peron-mob-row) — üçüncü bir düzen dili
   çıkarmak ekranlar arası tutarlılığı bozardı.
   ════════════════════════════════════════════════════════════════════════════ */
.peron-mob-pane[hidden] { display: none; }

.peron-mob-tools { display: flex; gap: 8px; }
.peron-mob-cat {
    flex: 0 0 40%; min-width: 0; height: 44px; padding: 0 8px;
    /* 🔴 16px altı: iOS odaklanınca sayfayı büyütür ve bir daha küçültmez — <select> de kapsamda. */
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    border: 1.5px solid var(--border); border-radius: 12px; background: var(--card-bg, #fff);
}
.peron-mob-tools .peron-mob-find { flex: 1 1 auto; min-width: 0; height: 44px; }

/* Segment seçici — iki görünüm arası geçiş */
.peron-mob-seg {
    display: flex; gap: 2px; margin-top: 8px; padding: 3px;
    border-radius: 12px; background: var(--border-light);
}
.peron-mob-seg-btn {
    position: relative; flex: 1; min-width: 0; min-height: 34px; padding: 0 6px;
    border: none; border-radius: 9px; background: none; font: inherit;
    font-size: 12px; font-weight: 700; color: var(--text-secondary);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Görsel yükseklik 34px kalır, DOKUNMA hedefi 44px'e çıkar (kutuyu büyütmeden). */
.peron-mob-seg-btn::after { content: ''; position: absolute; inset: -5px 0; }
.peron-mob-seg-btn.active { background: var(--card-bg, #fff); color: var(--text-primary); box-shadow: 0 1px 2px rgba(30, 52, 82, .10); }

/* Görünüm segmenti + toplam stok değeri AYNI SATIRDA.
   🔴 Kullanıcı: "depo bölümünün üst tasarımı çok kaba, ekrana sığdırabiliyorsan üst
   kısımları yan yana al, yazı karakterlerini küçült." İkisi de DURUM bildirir (kontrol
   değil), bu yüzden bir satırı paylaşabilirler; ayrı satırlarda 34+21+boşluk yiyorlardı.
   Segment esner ve baskıyı O emer; para ASLA küçülmez/kırpılmaz. */
.peron-mob-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
.peron-mob-bar .peron-mob-seg { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.peron-mob-bar .peron-mob-total { flex: 0 1 auto; min-width: 0; margin-top: 0; }

/* Toplam stok değeri — kategori seçilince o kategorinin toplamına döner. */
.peron-mob-total {
    display: flex; align-items: baseline; gap: 6px; padding: 0 2px;
    font-size: 9.5px; line-height: 15px; color: var(--text-muted);
}
.peron-mob-total[hidden] { display: none; }
.peron-mob-total-k {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-transform: uppercase; letter-spacing: .3px; font-weight: 700;
}
.peron-mob-total b {
    flex: 0 0 auto; font-size: 12.5px; font-weight: 800; letter-spacing: -.2px;
    color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 🔴 320px'te kapsam etiketi ("TÜM KATEGORİLER") 82px'e sıkışıp kırpılıyordu
   (ölçüldü: gerekli ~95px). Kırpılmış bir etiket bilgi taşımaz, yer yer.
   Kapsam ZATEN 8px yukarıdaki kategori seçicisinde yazılı → dar ekranda etiket
   düşer, PARA kalır. ≥360px'te ikisi de sığıyor (ölçüldü). */
@media (max-width: 359px) {
    .peron-mob-total-k { display: none; }
}
/* 🔴 Sekme düğmesine BURADAN dokunulmuyor: dosya sonundaki "altı çizili sekme" bloğu
   zaten 30px/12,5px veriyor ve dokunma hedefini `::after { inset: -7px 0 }` ile 44px'e
   çıkarıyor. Buradan 32px yazmak onu BÜYÜTÜYORDU (özgüllük 2 sınıf > 1 sınıf) —
   "küçült" isteğinin tersi. Kazanç tür çipi satırının kaldırılmasından geliyor. */

/* Stok satırı: sağda miktar+birim, altta "Sipariş Firması · Sipariş · Rezerv".
   🔴 Kullanıcı: "daha belirgin yap, yazı karakterlerini BÜYÜLTME, isimlerini tam açıklama
   olarak yaz, renklerini pastel kırmızı yap". Belirginlik boyuttan DEĞİL ağırlık + renk +
   harf aralığından geliyor: 10px korunur, weight 600→700/800, renk pastel kırmızıya döner.
   --rose-ink beyazda 5.49:1 (AA), --rose-surface zemininde de okunur. */
.peron-mob-facts-line {
    flex: 1 1 auto; min-width: 0; font-size: 10px; line-height: 13px; letter-spacing: .1px;
    color: var(--text-secondary); font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 🔴 `opacity` YOK. .78 opaklıkta 10px/700 etiket AA'yı GEÇMİYOR (ölçüldü:
   mor 3.26 · kehribar 3.58 · gül 3.60 — hepsi 4.5 altı; koyu temada kehribar
   4.09, gül 3.43). Opaklıksız token değerleri geçiyor: 4.92 / 5.61 / 5.49.
   Hiyerarşi opaklıkla değil BÜYÜK-KÜÇÜK harf + harf aralığıyla kuruluyor. */
.peron-mob-facts-line i {
    font-style: normal; font-weight: 700; color: inherit;
    text-transform: uppercase; letter-spacing: .3px; margin-right: 3px;
}
.peron-mob-facts-line b { font-weight: 800; color: inherit; font-variant-numeric: tabular-nums; }
.peron-mob-sup { font-weight: 800; color: inherit; }

/* ── ÜÇ VERİ, ÜÇ AYRI RENK ──────────────────────────────────────────────────
   Kullanıcı: "sipariş-sipariş-rezerv hepsinin rengi farklı olsun birbirinden
   bağımsız gözüksün". İki etiket de "SİPARİŞ" yazıyor; ayrımı renk + içerik türü
   (biri firma ADI, biri SAYI) birlikte taşır. Hepsi hazır --*-ink token'ları:
   beyazda ölçülü kontrastları 4.92-5.61 (AA), koyu temada token kendini çevirir.
   `color` MİRAS ALINIYOR (i/b/sup `inherit`) → tek yerden renk değişir. */
/* 🔴 Üç kural da `.peron-mob-facts-line` ile NİTELENMELİ: sade `.pm-f-firma` (0,1,0)
   olsa `.peron-mob-facts-line .pm-f` (0,2,0) sıfırlaması onu EZER ve üçü de aynı gri
   çıkar (ölçüldü: hepsi rgb(70,83,95)). */
.peron-mob-facts-line .pm-f          { color: var(--text-secondary); }
.peron-mob-facts-line .pm-f-firma    { color: var(--violet-ink); }  /* firma = taraf (cari mor) */
.peron-mob-facts-line .pm-f-sip      { color: var(--amber-ink);  }  /* yolda gelen = kehribar   */
.peron-mob-facts-line .pm-f-rez      { color: var(--rose-ink);   }  /* bağlanmış  = pastel kırmızı */
/* Kategori yedeği + İşlem Geçmişi alt satırı NÖTR kalır (uyarılacak bir şey yok).
   🔴 `:not(:has(i))` kullanmadım: :has() eski WebView'larda yok ve kural sessizce
   düşünce kategori satırı kırmızı kalırdı → sınıf JS'te veriliyor. */
.peron-mob-facts-line.is-plain,
.peron-mob-row.is-hist .peron-mob-facts-line {
    color: var(--text-secondary); font-weight: 600; letter-spacing: 0;
}
.peron-mob-stock {
    font-size: 12px; font-weight: 800; line-height: 15px;
    color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peron-mob-stock i { font-size: 9px; font-style: normal; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.peron-mob-stock.is-low  { color: var(--amber-ink); }
.peron-mob-stock.is-zero { color: var(--rose-ink); }
.peron-mob-row.is-wh .peron-mob-name,
.peron-mob-row.is-hist .peron-mob-name { font-size: 12px; line-height: 15px; }
/* Salt okunur satır: dokunacak eylem yok → imleç de "tıklanır" demesin. */
.peron-mob-row.is-wh, .peron-mob-row.is-hist { cursor: default; }

/* Giriş/çıkış yön rozeti — renk yalnız pekiştirir, kelime her zaman yazılı. */
.peron-mob-io {
    flex-shrink: 0; font-style: normal; padding: 1px 4px; border-radius: 4px;
    font-size: 9.5px; font-weight: 800; line-height: 13px; letter-spacing: .3px;
}
.peron-mob-io.in  { background: var(--st-done-bg); color: var(--st-done-fg); }
.peron-mob-io.out { background: var(--st-canc-bg); color: var(--st-canc-fg); }

/* 🔴 TARİH SÜZGECİ "İşlem Geçmişi"NİN YANINDA (kullanıcı isteği) ve yön çipleriyle
   AYNI SATIRDA. Önce iki ayrı satırdı: 44px gün çubuğu + 38px çip şeridi + 16px
   boşluk = 98px. Şimdi tek satır 44px. Şerit YALNIZ geçmiş görünümünde basılır. */
.peron-mob-histbar {
    display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0;
}
.peron-mob-histbar[hidden] { display: none; }
.peron-mob-histbar .peron-mob-daybar { flex: 0 0 auto; margin: 0; }
.peron-mob-histbar .peron-mob-filter-scroll { flex: 1 1 auto; min-width: 0; margin: 0; }
/* Dar ekranda gün çubuğu daralır; ok düğmeleri 44px KALIR (dokunma hedefi). */
.peron-mob-histbar .peron-mob-daybar input { width: 128px; flex: 0 0 auto; }
@media (max-width: 359px) {
    .peron-mob-histbar .peron-mob-daybar input { width: 108px; }
}

/* İşlem Geçmişi: gün gezinme çubuğu + özet şeridi */
.peron-mob-daybar { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.peron-mob-daybar button {
    width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--card-bg, #fff); color: var(--text-secondary);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.peron-mob-daybar button svg { width: 18px; height: 18px; }
.peron-mob-daybar input {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 10px;
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    border: 1.5px solid var(--border); border-radius: 12px; background: var(--card-bg, #fff);
}
.peron-mob-sum {
    display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 2px 8px;
    font-size: 11.5px; line-height: 15px; color: var(--text-secondary);
}
.peron-mob-sum b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.peron-mob-sum-not { font-style: normal; font-size: 10px; color: var(--text-muted); }

/* ── HAREKET SATIRINDA PARA: birim maliyet + satır tutarı ───────────────────
   Kullanıcı: "gelen ürünün birim maliyet, miktarı ve genel toplamı yazsın".
   🔴 Üçüncü satır YALNIZ tutar varken basılır → para izi olmayan hareketlerde
      (ölçüldü: girişlerin %75'i) satır eskisi gibi iki satır kalır, liste şişmez.
   🔴 "kart" rozeti kaynağı söyler: tutar bu harekete ait bir kayıttan değil, stok
      kartının fiyatından türetilmiştir. Sessizce karıştırmak, kesin olmayan bir
      sayıyı kesin gibi göstermek olurdu. */
.peron-mob-t3 {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    font-size: 10.5px; line-height: 14px; color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.peron-mob-t3 i { font-style: normal; font-weight: 700; color: var(--text-muted);
                  text-transform: uppercase; letter-spacing: .3px; font-size: 9px; }
.peron-mob-cost   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kardeşi `.peron-mob-cost` gibi kırpılabilir olmalı: sıkışınca `.peron-mob-card`'ın
   `overflow:hidden`'ı tarafından SESSİZCE kesiliyordu, "…" bile görünmüyordu. */
.peron-mob-cost-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                    font-weight: 800; color: var(--text-primary); }
.peron-mob-cost-k {
    display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px;
    background: var(--border-light); color: var(--text-muted);
    font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .2px;
}

/* "Daha fazla göster" — sayfalama yerine artan sınır (kaydırma yeri korunur). */
.peron-mob-more {
    display: block; width: 100%; min-height: 44px; margin: 6px 0 2px;
    border: 1px dashed var(--border); border-radius: 10px;
    background: none; font: inherit; font-size: 12px; font-weight: 700;
    color: var(--pri-text); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.peron-mob-more i { font-style: normal; font-weight: 600; color: var(--text-muted); margin-left: 6px; }

/* ════════════════════════════════════════════════════════════════════════════
   ODAK — "arama filtrelerine tıklayınca mavi çerçeve çıkıyor"
   🔴 Kök neden ÖLÇÜLDÜ: :6090 `body.peron-active input:focus-visible` özgüllüğü
   (0,2,2); `.peron-mob-find input:focus-visible` (0,2,1) → KAYBEDER (media query
   özgüllük eklemez, kaynak sırası da yetmez). Dokunmayla da :focus-visible
   eşleştiği için sarmalayıcının kenarlığı + 2px ofsetli outline = ÇİFT MAVİ ÇERÇEVE.
   Çözüm: aynı `body.peron-active` önekiyle bastır, odak sinyalini SARMALAYICIYA taşı
   → klavye erişilebilirliği (WCAG 2.4.7) KAYBOLMAZ.
   ════════════════════════════════════════════════════════════════════════════ */
body.peron-active .peron-mob-find input:focus,
body.peron-active .peron-mob-find input:focus-visible,
body.peron-active .peron-mob-cat:focus-visible,
body.peron-active .peron-mob-daybar input:focus-visible { outline: none; }

.peron-mob-find:focus-within,
.peron-mob-cat:focus-visible,
.peron-mob-daybar input:focus-visible {
    border-color: var(--pri-strong); box-shadow: 0 0 0 3px var(--pri-soft);
}

/* Düğmeler: dokunmada halka YOK, klavyede halka İÇE çizilir (kutuyu büyütmez). */
body.peron-active .peron-mob-filter-pill:focus:not(:focus-visible),
body.peron-active .peron-mob-seg-btn:focus:not(:focus-visible),
body.peron-active .peron-mob-row:focus:not(:focus-visible),
body.peron-active .peron-mob-more:focus:not(:focus-visible),
body.peron-active .peron-mob-daybar button:focus:not(:focus-visible),
body.peron-active .peron-mob-back:focus:not(:focus-visible) { outline: none; }

body.peron-active .peron-mob-filter-pill:focus-visible,
body.peron-active .peron-mob-seg-btn:focus-visible,
body.peron-active .peron-mob-row:focus-visible,
body.peron-active .peron-mob-more:focus-visible,
body.peron-active .peron-mob-daybar button:focus-visible,
body.peron-active .peron-mob-back:focus-visible { outline: 2px solid var(--pri-strong); outline-offset: -2px; }

.peron-mob-row, .peron-mob-seg-btn, .peron-mob-cat, .peron-mob-more { -webkit-tap-highlight-color: transparent; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBİL FİLTRE DİLİ — 1.229.0
   Kullanıcı: "grup filtresi kısmı çok kötü, filtre kısımlarını düzenle daha estetik yap".
   🔴 SORUN ÖLÇÜLDÜ: depo yapışkan başlığı 182px (788px'lik ekranın %23'ü) ve dört satır
   ÜÇ AYRI görsel dil konuşuyordu — kenarlıklı <select>, gri kutulu segment, 50px yuvarlak
   baloncuk çipler. Çözüm: TEK dil (aynı yükseklik/radius/tipografi), iki BOYUT iki farklı
   araçla ("hangi görünüm" = altı çizili sekme, "hangi alt küme" = düz çip).
   Bütçe: 44 + 16 + 40 + 44 = 182px  →  44 + 16 + 30 + 32 = 122px (−60px).
   Kurallar dosya SONUNDA: media query özgüllük eklemez, kaynak sırası kazanır.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Çip şeridi: baloncuk değil, düz ve sıkı ─────────────────────────────── */
/* 🔴 DİKEY DOLGU + NEGATİF KENAR BOŞLUĞU, `padding: 0` DEĞİL. Çipin
   `::after { inset: -7px 0 }` genişletmesi 30px'lik görseli 44px dokunma hedefine
   çıkarmayı amaçlıyor; ama kap `overflow-x: auto` taşıyor ve bu hesaplanan
   `overflow-y: auto`yu doğurup pseudo-elemanı KESİYOR. elementFromPoint ile 1px
   adımlı tarama: efektif hedef 30px (kural 44px); kap `overflow: visible` yapılınca
   aynı tarama 43px ölçtü — mekanizma çalışıyor, yalnız kırpılıyordu.
   ÖLÇÜM SONUCU (A/B, gerçek eski hâle karşı): dokunma hedefi Cari · Üretim ·
   Depo/İşlem Geçmişi'nde 30 → 44px. Plan ekranında bu şerit HİÇ YOK, oraya etkisi
   yok. Kartın ilk 16px'inde çipe ait 0 piksel var → tıklama çalınmıyor.
   🔴 Alt kenar boşluğu AÇIKÇA yazılır: `margin: -7px 0` kısayolu satır 4994'teki
   `margin-bottom: 16px`'i de siliyordu ve sticky sessizce 16px kısalıyordu. İlk
   A/B ölçümüm bunu KAÇIRDI çünkü karşılaştırma tarafında da margin'i sıfırlamıştım —
   iki taraf da yanlıştı, fark 0 çıktı. 8px 8'lik ızgaradadır ve çipin 7px'lik
   görünmez genişletmesini listeden ayırır; net etki −8px (bilinçli). */
/* 🔴 1.289.0: çipler arası boşluk 4 → 8px. ÖLÇÜLDÜ (m101, 360px): komşu görsel
   kutular arasında 4px vardı; kural tabanı komşu dokunma hedefleri arası ≥8px.
   Çipin `::after`i YALNIZ DİKEY genişliyor (inset -7px 0), yani yatayda hedef =
   görsel kutu → 4px, eldivenli parmakta yanlış süzgeç seçtiriyordu. Şerit zaten
   yatay KAYIYOR: 8px ne taşma ne kırpma üretir, yalnız aynı anda görünen çip
   sayısı bir azalır. Yoğunluktan önce ISKALAMA gelir. */
.peron-mob-filter-scroll { gap: 8px; padding: 7px 0; margin: -7px 0 8px; }
/* 🔴 `display:flex` bir AUTHOR kuralı; UA'nın `[hidden]{display:none}` kuralını köken
   önceliğiyle EZER. Guard olmadan ürün türü çipleri "İşlem Geçmişi" sekmesinde de
   ekranda kalıyordu (ölçüldü: hidden=true ama display=flex, 30px yer yiyor).
   Aynı tuzak .peron-mob-find-x / -total / -crumb / -pane için de kapatılmış. */
.peron-mob-filter-scroll[hidden] { display: none; }
.peron-mob-filter-pill {
    min-height: 30px; padding: 0 9px;
    border: none; border-radius: 8px;
    background: var(--border-light); color: var(--text-secondary);
    font-size: 11.5px; font-weight: 700; letter-spacing: .1px;
    display: inline-flex; align-items: center;
    transition: background .15s, color .15s;   /* `all` outline'ı da animasyonluyordu */
}
/* Görsel 30px kalır, DOKUNMA hedefi 44px'e çıkar (yapışkan alanı şişirmeden). */
.peron-mob-filter-pill::after { inset: -7px 0; }
.peron-mob-filter-pill.active {
    background: var(--pri-strong); color: #fff;   /* beyazda 4.91:1 — --pri 3.32 ile AA'yı geçmez */
    border-color: transparent;
}
/* Sayaç çipin İÇİNDE, "plaka" olarak — 0 ek dikey piksel.
   🔴 `opacity` KULLANILMAZ: pasif çipte .6 opaklık metni ~2,6:1'e düşürüyordu (AA
   başarısız). Aktif çipte de beyazı soldurmak yerine plaka KOYULAŞIR:
   rgba(255,255,255,.22) denenirse #6993bb olur → beyazla 3,19 (başarısız);
   rgba(0,0,0,.18) → #345f8a → beyazla 6,67 (geçer). */
.peron-mob-filter-pill b {
    display: inline-block; margin-left: 6px; padding: 0 4px;
    min-width: 15px; border-radius: 5px; text-align: center;
    background: var(--bg-inset); color: var(--text-secondary);
    font-size: 10.5px; font-weight: 800; line-height: 15px;
    font-variant-numeric: tabular-nums;
}
.peron-mob-filter-pill.active b { background: rgba(0, 0, 0, .18); color: #fff; }
/* Boş süzgeç: sinyal OPAKLIK değil YÜZEY KAYBI (dolu → şeffaf). Üç kademeli merdiven
   gri tonda ve renk körlüğünde de okunur; ayrıca sayaç zaten "0" yazıyor. */
.peron-mob-filter-pill.is-empty:not(.active) {
    opacity: 1; background: none; color: var(--text-muted);
}
.peron-mob-filter-pill.is-empty:not(.active) b { background: none; padding: 0; color: var(--text-muted); }

/* ── Görünüm sekmesi: ALTI ÇİZİLİ (çipten kasten FARKLI bir araç) ──────────
   "Stok / İşlem Geçmişi" bir alt küme değil ayrı bir EKRAN; aynı dili konuşsalardı
   kullanıcı hangisinin listeyi süzdüğünü, hangisinin ekranı değiştirdiğini ayırt edemezdi. */
.peron-mob-seg {
    gap: 14px; margin-top: 8px; padding: 0;
    background: none; border-radius: 0;
    border-bottom: 1px solid var(--border-light);
}
.peron-mob-seg-btn {
    flex: 0 0 auto; min-height: 30px; padding: 0 1px 5px;
    border-radius: 0; background: none; box-shadow: none;
    font-size: 12px; font-weight: 700; color: var(--text-muted);
    /* 🔴 `overflow: hidden` (taban kuraldan) düğmenin KENDİ `::after` genişletmesini
       kesiyordu → 44px dokunma hedefi ÖLÜYDÜ, efektif 30px (elementFromPoint ile
       1px adımlı tarama ile ölçüldü: üstte 0, altta 0 piksel). Ellipsis burada
       gereksiz: `flex: 0 0 auto` düğmeyi hiç daraltmıyor ve iki etiket de kısa
       ("Stok", "İşlem Geçmişi"). Kırpma kaldırılınca genişletme yaşıyor. */
    overflow: visible;
}
.peron-mob-seg-btn::after { inset: -7px 0; }
.peron-mob-seg-btn.active {
    background: none; box-shadow: none; color: var(--text-primary); font-weight: 800;
}
/* Aktif sekmenin 2px alt çizgisi — kutuyu büyütmeden (ayraç çizgisinin ÜSTÜNE biner). */
.peron-mob-seg-btn.active::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; border-radius: 2px; background: var(--pri-strong);
}

/* ── Kategori + arama: İKİ kutu değil TEK KABUK + 1px ayraç ────────────────
   Görsel kap sayısı 4→3'e düşer ve kategori artık aramanın KAPSAMI gibi okunur
   (select "bağımsız üçüncü dil" olmaktan çıkar). Yükseklik kazancı yok, netlik var. */
.peron-mob-tools {
    display: flex; align-items: center; gap: 0;
    height: 42px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--card-bg, #fff);
    transition: border-color .15s, box-shadow .15s;
}
/* 🔴 KOMPAKTLAŞTIRMA BURADA (kullanıcı: "kategori filtresi çok büyük ve kaba").
   Bu blok dosyanın SONUNDA ve medya sorgusu dışında → aynı özgüllükteki (0,1,0)
   erken bloğu her genişlikte EZER. Kompakt kuralları erken bloğa yazmak SESSİZCE
   ÖLÜRDÜ (ölçüldü: iki blok da top-level, kazanan sonraki).
   Değişen: sabit %42 pay yerine İÇERİĞE GÖRE daralma (kısa kategori adında arama
   kutusu büyür) + daha hafif tipografi. `height:100%` KORUNUR: kabuk 42px sabit,
   zincir kırılırsa select tarayıcının doğal yüksekliğine çöker. */
.peron-mob-cat {
    flex: 0 1 auto; width: auto; max-width: 44%; min-width: 0; height: 100%;
    padding: 0 4px 0 10px;
    font-weight: 600; color: var(--text-secondary);
    text-overflow: ellipsis;
    border: none; border-right: 1px solid var(--border); border-radius: 0; background: none;
}
.peron-mob-tools .peron-mob-find {
    flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px 0 10px;
    border: none; border-radius: 0; background: none;
}
/* Odak sinyali KABUĞA taşınır; iç kutunun kendi halkası bastırılır — yoksa çift
   mavi çerçeve regresyonu geri gelir. (0,3,0) > (0,2,0) → sıradan bağımsız kazanır. */
.peron-mob-tools:focus-within { border-color: var(--pri-strong); box-shadow: 0 0 0 3px var(--pri-soft); }
.peron-mob-tools .peron-mob-find:focus-within { border-color: transparent; box-shadow: none; }

/* Tek başına duran arama (üretim + plan) aynı dilde */
.peron-mob-find { border-radius: 8px; border-width: 1px; }
.peron-mob-daybar button,
.peron-mob-daybar input { border-radius: 8px; border-width: 1px; }

/* Toplam stok değeri YAPIŞKAN ALANDAN ÇIKTI: yapışkan bölge tekrar dokunulan
   kontroller için; toplam bir kez okunan özettir. Listenin ilk çocuğu olur, ekran
   tepesinde görünür, kaydırınca gider. −21px, sıfır bilgi kaybı. */
.peron-mob-total { margin: 2px 2px 7px; }

/* 🔴 DOSYANIN EN SONU: 380px altında aşama çipindeki GÜN ADI düşer (tarih kalır).
   Ölçüldü — 360px'te ana kolon 244px, çip+ad+"+N" 247px isterdi ve ürün adı
   okunamayacak kadar kırpılırdı. Temel kuraldan SONRA gelmeli. */
@media (max-width: 380px) {
    .peron-mob-dow { display: none; }
}

/* ═══ ELLE REZERV MODALI (Stok → Rezerv Oluştur) ══════════════════════════
   Mobil önce; ≥760px'te SABİT kolonlar. Kolon sayısını viewport'a bırakan
   auto-fit/minmax KULLANILMAZ — son satır yarım kalır ve kartlar kayar. */
.stk-resv { display: flex; flex-direction: column; gap: 22px; }

.stk-resv__label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.stk-resv__search { width: 100%; }

/* Arama sonuçları: kabı doldurur, her satır tek yükseklikte (sarma yok). */
.stk-resv__results {
    margin-top: 6px; max-height: 232px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg);
}
.stk-resv__opt {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
    width: 100%; min-height: 44px; padding: 8px 12px;
    border: 0; border-bottom: 1px solid var(--border-light);
    background: transparent; text-align: left; cursor: pointer; color: var(--text-primary);
}
.stk-resv__opt:last-child { border-bottom: 0; }
.stk-resv__opt:hover,
.stk-resv__opt:focus-visible { background: var(--pri-light); }
/* 🔴 Üç çocuğun da yeri AÇIKÇA verilir. Yalnız `grid-row: 1 / span 2` yazmak yetmez:
   açık satırlı öğe otomatik yerleşimden ÖNCE konur ve 1. kolonu kapar → ölçüldü, miktar
   sola, ad/kod sağa geçmişti. */
.stk-resv__opt-name  {
    grid-column: 1; grid-row: 1;
    font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stk-resv__opt-code  { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--text-muted); }
.stk-resv__opt-stock {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.stk-resv__empty     { padding: 18px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* Seçilen ürün + üç eşit ölçü. flex:1 1 0 → üç kutu BİREBİR eşit genişlikte. */
.stk-resv__picked {
    margin-top: 12px; padding: 14px;
    border: 1px solid var(--pri-border); border-radius: var(--r-md); background: var(--pri-light);
}
.stk-resv__pname { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.stk-resv__pcode { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.stk-resv__stats { display: flex; gap: 10px; margin-top: 10px; }
.stk-resv__stat {
    flex: 1 1 0; min-width: 0; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-bg);
}
.stk-resv__stat span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.stk-resv__stat b {
    display: block; margin-top: 2px; font-size: 14px; color: var(--text-primary);
    /* 390px'te kutu ~103px'e iner; nowrap tek başına uzun değeri komşu kutunun ÜSTÜNE taşırır. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.stk-resv__stat.is-low b { color: var(--rose-ink); }

/* Form alanları: mobilde tek kolon, geniş ekranda 3 SABİT kolon (alan sayısı = 3). */
.stk-resv__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.stk-resv__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.stk-resv__field > span { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.stk-resv__field em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.stk-resv__field input {
    width: 100%; min-height: 44px; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card-bg); color: var(--text-primary);
    /* 16px: iOS bunun altındaki alana odaklanınca sayfayı zoomlar. */
    font-size: 16px; font-family: var(--font);
}
.stk-resv__field input:focus {
    border-color: var(--pri); outline: 2px solid var(--pri-soft); outline-offset: 1px;
}

.stk-resv__warn {
    margin: 12px 0 0; padding: 10px 12px;
    border-radius: var(--r-md); background: rgba(194, 84, 90, 0.08);
    font-size: 13px; font-weight: 500; color: var(--rose-ink);
}
/* Gece modunda --rose-ink (#d76b71) bu zeminde 4.48:1 ölçüldü — AA sınırının (4.5) hemen
   altı. Zemini koyulaştırıp metni açarak eşiğin üstüne çıkarılır; gündüz teması etkilenmez. */
html[data-peron-theme="dark"] .stk-resv__warn { background: rgba(215, 107, 113, 0.14); color: #f0a2a6; }

/* Liste */
.stk-resv__secttl {
    display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted);
}
.stk-resv__count { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.stk-resv__tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.stk-resv__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stk-resv__table th {
    padding: 9px 12px; border-bottom: 1px solid var(--border);
    background: var(--border-light); text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
    white-space: nowrap;
}
.stk-resv__table td { padding: 9px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--text-secondary); }
.stk-resv__table tr:last-child td { border-bottom: 0; }
.stk-resv__table .num  { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stk-resv__table .act  { width: 1%; white-space: nowrap; text-align: right; }
.stk-resv__table .cell-strong { font-weight: 600; color: var(--text-primary); }
.stk-resv__table .muted { color: var(--text-muted); }
.stk-resv__short { display: block; font-size: 11px; font-weight: 600; color: var(--rose-ink); }
.stk-resv__date  { display: block; font-size: 11px; color: var(--text-muted); }
/* Düğmenin YANINDA duran bilgi rozeti (düğmenin yerine geçmez) — bkz. loadManualReserves. */
.stk-resv__locked { display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 600; color: var(--amber-ink); }
.stk-resv__confirm { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.stk-resv__reason {
    /* 44px + 16px: dokunma hedefi ve iOS zoom eşiği (satır içi de olsa kural aynı). */
    width: 190px; min-height: 44px; padding: 8px 11px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--card-bg); color: var(--text-primary); font-size: 16px; font-family: var(--font);
}
.stk-resv__reason:focus { border-color: var(--pri); outline: 2px solid var(--pri-soft); outline-offset: 1px; }

/* 🔴 [hidden] GUARD — .stk-resv__field'in AÇIK `display:flex`i tarayıcının
   `[hidden]{display:none}` kuralını EZER. Guard olmadan "Birim Fiyat"/"Toplam" alanları
   cari seçilmeden de ekranda kalırdı (aynı tuzak kritik-stok rozetinde yaşanmıştı). */
.stk-resv__field[hidden] { display: none; }

/* Otomatik tamamlama girişi de aynı dokunma/zoom eşiğinde olmalı (iOS 16px kuralı).
   🔴 max-width/flex SIFIRLANMALI: paylaşılan `.po-ac` kuralı `max-width:340px; flex:1` taşır
   (prodorder formunun dar kolonu için). Yalnız `width:100%` yazmak onu EZMEZ — ölçüldü:
   2 kolonluk (626px) alanın içinde girdi 340px'te kalıyor, ortada 286px ölü boşluk oluşuyor
   ve alanın sağ kenarı altındaki Miktar kutusunu 32px ıskalıyordu (dağınık ızgara).
   `min-width:0` da şart: 260px taban genişliği 320px ekranda ızgarayı taşırır. */
.stk-resv__field .po-ac { width: 100%; min-width: 0; max-width: none; flex: none; }
.stk-resv__field .po-ac-input { min-height: 44px; }

/* Yer tutucu rengi token'a bağlanır — tarayıcı varsayılanı (#757575) gece modunda
   girdi zemininde 3,52:1 ölçülmüştü (AA sınırı 4,5). */
.stk-resv__field input::placeholder,
.stk-resv__reason::placeholder { color: var(--text-muted); }

/* Toplam: HESAPLANMIŞ SONUÇ, girdi değil. Komşularıyla aynı çerçeve+arka plan verilirse
   "devre dışı girdi" gibi okunur ve dokunmatikte tıklanıp tepkisiz kalır. Çerçeve kalkar,
   hiyerarşi renkle değil BOYUTLA kurulur (18px); 44px satır hizası korunur. */
.stk-resv__total {
    display: flex; align-items: center; min-height: 44px; padding: 9px 12px;
    border: 0; border-radius: var(--r-md);
    background: var(--pri-light); color: var(--text-primary);
    font-size: 18px; font-weight: 700; cursor: default;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}

.stk-resv__hint {
    margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted);
}

/* Cari/tutar rozetleri — tutar hücresinde tek satır altında durur. */
.stk-resv__cari {
    margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--pri-light); color: var(--pri-text);
    /* 11px = tablodaki diğer rozetlerle aynı taban; 10px'te büyük harf metin okunaksızlaşıyordu. */
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.stk-resv__paid,
.stk-resv__pending,
.stk-resv__idle { display: block; font-size: 11px; font-weight: 600; }
.stk-resv__paid    { color: var(--green-ink); }
.stk-resv__pending { color: var(--amber-ink); }
.stk-resv__idle    { color: var(--text-muted); }

@media (min-width: 760px) {
    /* Üç EŞİT kolon: 1. satır "Kim için" (2 kolon) + Not, 2. satır Miktar | Fiyat | Toplam.
       Kolon sayısı sabittir — auto-fit kullanılmaz (kolon sayısı viewport'a göre değişirse
       alanlar satır atlar ve ızgara dağılır).
       🔴 Yerleşim AÇIKÇA verilir: DOM sırası mobil sıradır (Not en sonda) — otomatik
       yerleşime bırakılırsa Not 2. satıra düşer ve masaüstü düzeni bozulur. */
    .stk-resv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stk-resv__field--wide { grid-column: 1 / span 2; grid-row: 1; }
    .stk-resv__field--note { grid-column: 3; grid-row: 1; }
}

/* Rezervasyon kırılımında ELLE oluşturulmuş satırın rozeti (sipariş numarası yerine). */
.stk-rsv-manual {
    display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
    background: var(--pri-light); color: var(--pri-text);
    font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* ═══ HAMMADDE SATIŞI — kompakt veri giriş ızgarası ═══════════════════════════
   TEK panel, tablo gibi hizalı satırlar: ÜRÜN · MİKTAR · BİRİM FİYAT · TOPLAM.
   Satır = kart DEĞİL (hedef 39px; mamul .po-mod ritmiyle aynı). Mobile-first:
   taban düzen telefon içindir, 769px ve üstünde gerçek ızgaraya geçer. Kolon
   şablonu TEK yerde (--po-raw-grid): başlık şeridi ve satırlar aynı değişkeni
   okur; ayrı yazılsaydı kolonlar birbirinden kayardı. */
.po-raw-panel {
    --po-raw-gap:     8px;
    --po-raw-qty-w:   96px;
    --po-raw-price-w: 104px;
    --po-raw-total-w: 116px;
    --po-raw-act-w:   44px;
    --po-raw-grid: minmax(0, 1fr) minmax(0, 1fr) var(--po-raw-act-w);
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
}
.po-raw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               padding: 8px 12px; border-bottom: 1px solid var(--border); }
.po-raw-head[hidden] { display: none; }
.po-raw-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
              color: var(--pri-text); background: var(--pri-light);
              border-radius: var(--r-full); padding: 3px 9px; }
.po-raw-count { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.po-raw-sum { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text-primary);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-raw-cols { display: none; }

/* Satır .po-item sınıfını KORUR (itemOf closest('.po-item'), paintPrices
   .po-item[data-uid]); kart kutusu burada nötrlenir. İki-sınıflı seçici (0,2,0)
   .po-item kuralını (0,1,0) kaynak sırasından bağımsız ezer. */
.po-item.po-raw-r,
.po-raw-r { position: relative; display: grid; grid-template-columns: var(--po-raw-grid);
            gap: var(--po-raw-gap); align-items: center; margin: 0; padding: 10px 12px;
            border: 0; border-top: 1px solid var(--border-light); border-radius: 0; background: transparent; }
.po-item.po-raw-r[hidden],
.po-raw-r[hidden] { display: none; }
.po-raw-rows > .po-raw-r:first-child { border-top: 0; }
.po-raw-r:hover, .po-raw-r:focus-within { background: var(--pri-light); }

.po-raw-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-raw-c[hidden] { display: none; }
.po-raw-c--name  { grid-column: 1 / 3; }
/* Arama sonucu AD HUCRESINE capalanir: satira capalanirsa liste tum satir
   enini kaplar ve mobilde arama kutusundan ~54px asagida acilirdi. */
.po-raw-c--name.po-raw-search { position: relative; }
.po-raw-c--act   { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
.po-raw-c--qty   { grid-column: 1; }
.po-raw-c--price { grid-column: 2; }
.po-raw-c--total { grid-column: 1 / 4; flex-direction: row; align-items: baseline;
                   justify-content: space-between; gap: 8px; }
.po-raw-lbl { font-size: 12px; font-weight: 600; color: var(--text-secondary); }

.po-raw-idn { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.po-raw-idn[hidden] { display: none; }
.po-raw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
               font-size: 14px; font-weight: 600; color: var(--text-primary); }
.po-raw-code { flex: 0 0 auto; font-size: 11.5px; color: var(--text-secondary);
               font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-raw-change { flex: 0 0 auto; }

.po-raw-qtywrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.po-raw-qtywrap[hidden] { display: none; }
.po-raw-qtywrap .peron-input.sm { flex: 1 1 auto; min-width: 0; }
.po-raw-unit { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.po-raw-qty, .po-raw-price { text-align: right; font-variant-numeric: tabular-nums; }

.po-raw-tv { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; }
.po-raw-tv[hidden] { display: none; }
.po-raw-total { font-size: 15px; font-weight: 700; color: var(--text-primary);
                font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.po-raw-kdv { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
              white-space: nowrap; line-height: 1.2; }

/* Aksiyon kolonu SABİT genişlikte + ikon: metinli buton yalnız kayıtlı satırda
   çıkar; kolon auto olsaydı satırdan satıra genişleyip ızgara hizasını bozardı. */
.po-raw-c--act { flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 6px; }
.po-raw-c--act .peron-btn.sm { width: 44px; min-width: 44px; height: 44px; padding: 0; }
.po-raw-shipped { display: inline-flex; align-items: center; justify-content: center;
                  width: 44px; height: 44px; border-radius: var(--r-sm);
                  color: var(--green-ink); background: var(--border-light); }
.po-raw-shipped svg { width: 15px; height: 15px; }

.po-raw-noterow { grid-column: 1 / -1; }
.po-raw-noterow[hidden] { display: none; }
.po-raw-noterow .po-item-note-inp { width: 100%; min-height: 36px; resize: vertical; }

/* Sayfa içi arama (modal YOK). Sonuç listesi satıra MUTLAK konumlanır, ızgarayı
   itmez ve gövde yatay kaymaz. Görünürlüğü :focus-within yönetir. */
.po-raw-res { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
              z-index: 6; max-height: 240px; overflow-y: auto;
              border: 1px solid var(--border); border-radius: var(--r-md);
              background: var(--card-bg); box-shadow: var(--shadow-modal); }
.po-raw-search:focus-within .po-raw-res { display: block; }
.po-raw-pick { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 44px;
               padding: 8px 12px; background: none; border: 0;
               border-bottom: 1px solid var(--border-light); cursor: pointer; text-align: left; }
.po-raw-pick:last-child { border-bottom: 0; }
.po-raw-pick:hover, .po-raw-pick:focus-visible { background: var(--pri-light); }
.po-raw-pick__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                     font-size: 13px; font-weight: 600; color: var(--text-primary); }
.po-raw-pick__meta { flex: 0 0 auto; font-size: 11.5px; color: var(--text-muted);
                     font-variant-numeric: tabular-nums; }
.po-raw-empty { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--text-muted); }

.po-raw-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               padding: 8px 12px; border-top: 1px solid var(--border); }
.po-raw-foot[hidden] { display: none; }
.po-raw-note { margin: 0; flex: 1 1 220px; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

/* Masaüstü: gerçek ızgara. Girdi font-size yalnız burada tanımlı — 768px ve
   altında iOS odak-zoom engelleyen global 16px kuralı yürürlükte kalsın. */
@media (min-width: 769px) {
    .po-raw-panel { --po-raw-act-w: 96px;
        --po-raw-grid: minmax(0, 1fr) var(--po-raw-qty-w) var(--po-raw-price-w)
                       var(--po-raw-total-w) var(--po-raw-act-w); }
    .po-raw-cols { display: grid; grid-template-columns: var(--po-raw-grid); gap: var(--po-raw-gap);
                   padding: 6px 12px; background: var(--content-bg);
                   border-bottom: 1px solid var(--border); }
    .po-raw-cols[hidden] { display: none; }
    .po-raw-cols > span { font-size: 11px; font-weight: 700; text-transform: uppercase;
                          letter-spacing: .04em; color: var(--text-muted); }
    .po-raw-cols .po-raw-cols--n { text-align: right; }
    .po-item.po-raw-r,
    .po-raw-r { padding: 4px 12px; }
    .po-raw-c--name, .po-raw-c--qty, .po-raw-c--price,
    .po-raw-c--total, .po-raw-c--act { grid-column: auto; grid-row: auto; }
    .po-raw-c--total { flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; }
    .po-raw-c--act { flex-direction: row; align-items: center; justify-content: flex-end; }
    .po-raw-lbl { display: none; }
    .po-raw-name { font-size: 13px; }
    .po-raw-total { font-size: 13px; }
    .po-raw-r .peron-input.sm { height: 30px; padding: 0 8px; font-size: 12px; }
    .po-raw-c--act .peron-btn.sm { width: 28px; min-width: 28px; height: 28px; }
    .po-raw-shipped { width: 28px; height: 28px; }
    .po-raw-pick { min-height: 34px; padding: 6px 12px; }
}
@media (min-width: 1200px) {
    .po-raw-panel { --po-raw-qty-w: 112px; --po-raw-price-w: 120px; --po-raw-total-w: 132px; }
}

/* ═══ ÜRETİM FİŞİ SEÇİCİ (plan → "Üretim Fişi") ═══════════════════════════════
   Plan bir TAKVİM olduğu için liste gün gün bölünür: düz bir sıra, hangi ürünün
   hangi güne planlandığını gizler. Satırda ad birincil, sipariş/müşteri ikincil,
   miktar sağ uçta hizalı (tabular-nums) — göz tek kolonu tarar. */
.tkp-wrap { display: flex; flex-direction: column; }

.tkp-all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--pri-light);
    cursor: pointer;
}
.tkp-all input { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--pri); }
.tkp-all-lbl { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tkp-all-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pri-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tkp-list {
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.tkp-day + .tkp-day { border-top: 1px solid var(--border); }

/* Gün başlığı listeyle birlikte kayar ama üstte yapışır → uzun listede bağlam kaybolmaz. */
.tkp-day-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 12px;
    background: var(--content-bg);
    border-bottom: 1px solid var(--border-light, var(--border));
}
.tkp-day-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.tkp-day-date { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tkp-day-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    font-variant-numeric: tabular-nums;
}

.tkp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light, var(--border));
}
.tkp-day:last-child .tkp-row:last-child { border-bottom: none; }
.tkp-row:hover { background: var(--pri-light); }
.tkp-row input { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--pri); }
.tkp-row:focus-within { outline: 2px solid var(--pri); outline-offset: -2px; }

.tkp-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.tkp-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tkp-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tkp-qty {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tkp-note { font-size: 11.5px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.45; }

/* Telefonda miktar alta iner; satır yine tek dokunuşluk kalır. */
/* 🔴 flex:1 1 auto ile temel boyut max-content (355px) > kalan yer (285px) olunca
   .tkp-main KENDİ SATIRINA düşüyor, onay kutusu tek başına kalıyordu. Ölçüldü: satırlar
   114/86/85px, ad x konumu 31/59/59 — aynı listede 28px yatay ve 28px dikey kayma.
   flex-basis 0 ile: 86/86/85px, ad x = 59/59/59 (tam hizalı). */
@media (max-width: 520px) {
    .tkp-row { flex-wrap: wrap; }
    .tkp-main { flex: 1 1 0; }
    .tkp-qty { width: 100%; padding-left: 28px; }
}
/* ════════════════════════════════════════════════════════════════════════════
   CARİ HESAP EKSTRESİ — belge kırılımlı kompakt tablo
   Kullanıcı isteği: "daha anlaşılır, daha küçük yazı karakterleri ve ayrıntılı;
   aynı fiş veya fatura numaralı ürünleri alt alta yaz ve sadece ilk üründe tarih
   olsun, o faturanın toplamını faturanın sonunda göster."

   🔴 SEÇİCİLER `.peron-layout .peron-table` ÖNEKİYLE YAZILIR — süs değil, ZORUNLU:
   satır 4774'teki `.peron-layout.dense-mode .peron-table td` (özgüllük 0,3,1) MEDIA
   DIŞINDA ve `font-size:12px` veriyor. Çıplak `.ek-t td` (0,1,1) yazılırsa "Kompakt
   Tasarım" açık olan kullanıcıda bu blok KAYNAK SIRASINDAN BAĞIMSIZ ezilir ve punto
   küçültme sessizce ölür. Önekle özgüllük (0,3,1)+ olur ve dosya sonunda durduğu
   için eşitlikte de kazanır.

   🔴 PUNTO KÜÇÜLTME YALNIZ ≥769px: mobil bloklar `max-width` ile yazılmış ve mobil
   okunabilirlik kuralı 14px altını istemiyor; min-width/max-width HİÇ kesişmez →
   telefon görünümü değişmez. `@media print` bloğu th/td'ye !important font-size
   verir, çıktının kendi stili printEkstre() içindedir → çıktı da etkilenmez.
=========================================================================== */
.peron-layout .peron-table.ek-t td.ek-dt,
.peron-layout .peron-table.ek-t td.ek-doc,
.peron-layout .peron-table.ek-t td.ek-bal,
.peron-layout .peron-table.ek-t td.col-num { font-variant-numeric: tabular-nums; }

/* 🔴🔴 HER KAYIT TEK SATIR (1.347.0) — kullanıcı: *"TÜM TABLOYU AYNI SATIRA SIĞDIR
   YAZI PUNTOLARINI DÜŞÜR"*. Taban `.peron-table--fixed > tbody > tr > td` kuralı
   `white-space: normal; word-break: break-word; vertical-align: top` verir; 13 kolonda
   bu, bir ürün adının üç satıra bölünüp satırı 3 kat yükseltmesi demekti. Burada
   sarma KAPATILIR, taşan metin üç noktaya düşer (tamı `title` içinde durur).
   Seçici `> tbody > tr > td` ile yazılır ki AKORDİYON İÇİNDEKİ `.ek-det-tbl` tablosunu
   ETKİLEMESİN (çıplak inen seçici modül adlarını da nowrap yapardı).
   🔴 `vertical-align: middle`: tek satırlık hücrede `top` rozet ile sayıyı 1-2px
   ayrıştırıyor ve hizasız görünüyordu. */
.peron-layout .peron-table.ek-t > thead > tr > th,
.peron-layout .peron-table.ek-t > tbody > tr > td {
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    vertical-align: middle;
}
/* 🔴 YAN DOLGU 12 → 5px. Punto düşürmek TEK BAŞINA yetmiyordu: 13 kolonda yalnız
   dolgu 13 × 24 = 312px yiyordu ve para hücreleri kırpılıyordu ("kırpılmış rakam
   yalandır" — bu kod tabanındaki ölçülmüş kural). */
.peron-layout .peron-table.ek-t > thead > tr > th,
.peron-layout .peron-table.ek-t > tbody > tr > td {
    padding-left: 5px; padding-right: 5px;
}

.peron-layout .peron-table.ek-t td.ek-dt  { white-space: nowrap; color: var(--text-secondary); }
.peron-layout .peron-table.ek-t td.ek-doc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                                            font-weight: 600; color: var(--pri-text); }

/* ── BELGE ZİNCİRİ (1.359.0): belge numarası kaynak belgeye götürür ───────────
   🔴 SATIR BÜYÜMEZ. Kullanıcı kuralı: *"büyütme bişeyi"*. Dokunma yüksekliğini
      dolguyla açıp AYNI kadar negatif kenar boşluğu vererek geri alıyoruz:
      yerleşim yüksekliği metnin kendisiyle BİREBİR aynı (18px), dokunulabilir
      kutu 24px (WCAG 2.2 §2.5.8 mutlak tabanı). Ölçülebilir iddia: düğmeli ve
      düğmesiz satırın yüksekliği eşit olmalı.
   🔴 PUNTO DA BÜYÜMEZ (`font: inherit`) — hücre ne diyorsa o.
   🔴 Renk `--pri-text`: hücrenin mevcut rengiyle AYNI ailede, yalnız noktalı alt
      çizgi "tıklanabilir" der. Ekstre 13 kolonluk yoğun bir tablo; burada parlak
      bir bağlantı rengi satırı okunmaz hale getirirdi. */
.peron-layout .peron-table.ek-t td.ek-doc .ek-belge {
    display: block; width: 100%;
    margin: -3px 0; padding: 3px 0;
    border: 0; background: none; font: inherit; color: var(--pri-text);
    text-align: left; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: underline dotted; text-underline-offset: 2px;
}
.peron-layout .peron-table.ek-t td.ek-doc .ek-belge:hover { text-decoration-style: solid; }
/* `outline-offset` NEGATİF: hücre `overflow: hidden` — dışa taşan odak halkası
   KIRPILIR ve klavyeyle gezen kullanıcı nerede olduğunu göremezdi. */
.peron-layout .peron-table.ek-t td.ek-doc .ek-belge:focus-visible {
    outline: 2px solid var(--pri); outline-offset: -1px; text-decoration-style: solid;
}
@media print {
    .peron-layout .peron-table.ek-t td.ek-doc .ek-belge { text-decoration: none; color: inherit; }
}

/* ── ODAKLANAN SATIR — belge zincirinden gelindiğinde hedefi işaretler ────────
   🔴 `background` DEĞİL `box-shadow: inset`. Çek listesi vadesi geçmiş satıra
      SATIR İÇİ stil basıyor (`style="background:…"`); satır içi stil dış CSS'i
      yener ve vurgu O SATIRLARDA hiç görünmezdi — yani tam da aranan satırda.
      `!important` yasak (proje kuralı), inset gölge ise satır içi arka planın
      ÜSTÜNE çizer ve her üç tabloda da aynı davranır.
   🔴 Vurgu KENDİ KENDİNE söner (2,4sn) ve JS sınıfı 2,6sn'de kaldırır: kalıcı
      bir işaret, sonraki tazelemede "bu satır seçili" yanılgısı üretirdi. */
@keyframes peronOdakSoner {
    from { box-shadow: inset 0 0 0 9999px var(--pri-soft); }
    to   { box-shadow: inset 0 0 0 9999px transparent; }
}
tr.peron-odak > td { animation: peronOdakSoner 2.4s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
    tr.peron-odak > td { animation: none; box-shadow: inset 0 0 0 9999px var(--pri-soft); }
}
.peron-layout .peron-table.ek-t td.ek-bal { white-space: nowrap; font-weight: 600; }
/* Stok kodu — tanımlayıcıdır, tipografik olarak sayıya yakın durur. */
.peron-layout .peron-table.ek-t td.ek-kod { font-variant-numeric: tabular-nums;
                                            color: var(--text-secondary); font-weight: 600; }
.peron-layout .peron-table.ek-t td.ek-bir { color: var(--text-muted); }
.peron-layout .peron-table.ek-t td.ek-isk { color: var(--amber-ink, var(--amber)); }

/* 🔴🔴 AYNI FİŞ/FATURA NUMARALI SATIRLAR BİR TIK SAĞA KAYAR (kullanıcı kuralı 1.347.0:
   *"AYNI FATURA VEYA FİŞ NUMARALI OLANLARI KENDİ İÇİNDE Bİ TIK SAĞA KAYDIR"*).
   Girinti `tr`ye VERİLEMEZ (tablo satırı padding almaz) → bloğun İLK hücresine
   dolgu + sol aksan çizgisi. Çizgi bloğun nerede başlayıp bittiğini de gösterir;
   noktalı alt kenar (aşağıda) satırları birbirine bağlamayı sürdürür.
   🔴 `box-shadow: inset` DEĞİL `border-left`: gölge hücre genişliğini etkilemez ama
   `overflow: hidden` ile birlikte bazı motorda kırpılıyor; kenarlık kesin çizer. */
.peron-layout .peron-table.ek-t tr.ek-in > td:first-child {
    padding-left: 14px;
    border-left: 2px solid var(--pri);
}
.peron-layout .peron-table.ek-t tr.ek-sub > td:first-child { border-left: 2px solid var(--pri); }

/* Aynı belgenin satırları: noktalı ayırıcı onları tek blok gibi bağlar,
   blok sonundaki düz çizgi bloğu kapatır. */
.peron-layout .peron-table.ek-t tr.ek-in > td { border-bottom-style: dotted; }

.peron-layout .peron-table.ek-t tr.ek-sub > td { background: var(--border-light); font-weight: 700;
                                                 border-top: 1px solid var(--border);
                                                 color: var(--text-primary); }
.peron-layout .peron-table.ek-t tr.ek-open > td  { background: var(--border-light); font-weight: 600; }
.peron-layout .peron-table.ek-t tr.ek-close > td { background: var(--content-bg); font-weight: 700; }
.peron-layout .peron-table.ek-t tr.ek-close > td.col-num { font-weight: 800; }

/* 🔴🔴 PUNTO HER GENİŞLİKTE DÜŞER (1.347.0). Eski blok `@media (min-width: 769px)` ile
   sarılıydı ve gerekçesi "mobil okunabilirlik 14px altını istemiyor" idi; o kural
   2026-09-07'de kullanıcı tarafından KALDIRILDI (birebir: *"asla mobilde 10 puntoda
   bırakma diye bir kural yok, sadece sayfalardaki oran orantıyı yakala ve mümkün
   olduğunda sayfaya yazıları sığdır küçült yani"*). Medya sargısı kaldırıldı: telefon
   da aynı yoğunluğu alır, ekstre orada zaten kendi kabında yatay kayar.
   🔴 ORAN KORUNUR, MUTLAK TABAN 9px: gövde 10,5 · yardımcı (tarih/kaynak/kod/birim) 9,5 ·
   blok toplamı 10 · başlık 9,5. Hiçbiri 9px'in altına inmez. */
.peron-layout .peron-table.ek-t > thead > tr > th,
.peron-layout .peron-table.ek-t > tbody > tr > td { font-size: 10.5px; padding-top: 4px; padding-bottom: 4px; }
.peron-layout .peron-table.ek-t > thead > tr > th { font-size: 9.5px; }
.peron-layout .peron-table.ek-t > tbody > tr > td.ek-dt,
.peron-layout .peron-table.ek-t > tbody > tr > td.ek-ref,
.peron-layout .peron-table.ek-t > tbody > tr > td.ek-kod,
.peron-layout .peron-table.ek-t > tbody > tr > td.ek-bir { font-size: 9.5px; }
.peron-layout .peron-table.ek-t > tbody > tr.ek-sub > td { font-size: 10px; }

/* 🔴🔴 TELEFONDA KOLON GENİŞLİKLERİ DARALIR (1.347.0).
   13 kolonlu bir cari ekstresi 360px'lik bir ekrana SIĞMAZ — bu matematiksel bir
   sınırdır, tasarım tercihi değil. Bağlayıcı invaryant korunur: tablo KENDİ kabında
   (`.peron-table-wrap`, overflow-x:auto) kayar, `document.documentElement` ASLA kaymaz.
   Burada yapılan, kaydırma MESAFESİNİ azaltmaktır: sabit toplam 892 → 740px (1.348.0;
   1.347.0'da 696 idi — Borç/Alacak 66 → 90px: 8 haneli tutar 82px metin, 66px'lik kolon
   5 haneden fazlasını KIRPIYORDU. Kaydırma mesafesi +44px, rakam dürüstlüğü önce gelir).
   🔴 1.348.0 ölçümü (390px): Toplam hücresi "146.516,80 TRY" 92px'e 94-96px istiyordu →
      98px; Kaynak rozeti (9,5px'te ~85px) 86px'lik kolonun 78px iç alanına sığmıyordu →
      96px. Pay Belge No (62→52), Kod (54→48), İskonto (48→42, "%10+5" 38px) ve KDV
      (38→34, "%20" 28px) kolonlarından alındı — ilk ikisi title'lı metin, kırpılması
      serbest; son ikisi ölçülen metinden geniş. Tek para birimli ekstrede Toplam soneki
      de kaldırıldı (bkz. finance.js).
   🔴 KOLON DÜŞÜRÜLMEDİ. "Alan düşer, veri düşmez" kuralı bir alanı gizlemeden önce
      YENİ EVİNİ göstermeyi şart koşar; Kod ve Birim'in ekstre dışında görünür bir evi
      YOK (sevk akordiyonu yalnız `prod_order` satırlarını kapsıyor). Kullanıcı 13
      kolonu ADIYLA istedi — gizlemek isteğin yarısını sessizce geri almak olurdu.
   🔴 PUNTO BURADA DÜŞÜRÜLMEZ: yukarıdaki blok zaten 9,5-10,5px veriyor ve mutlak
      taban 9px. Kazanç genişlikten alınır, okunabilirlikten değil. */
/* 🔴🔴 1024px ARA KADEMESİ — TASARIM ÖLÇÜMÜ BULGUSU (1.347.0).
   ÖLÇÜLDÜ (1024px): kap 902px, tablo 957px → "Toplam" kolonunun 104px'inin yalnız 49px'i
   görünüyordu; kullanıcı EKRANI AÇAR AÇMAZ yürüyen bakiyenin %53'ünü göremiyor ve bunu
   fark etmesi için bir sebep de yok (gövde kaymıyor, kaydırma çubuğu kabın içinde).
   1024 yaygın bir dizüstü çözünürlüğüdür — "kabında kayıyor, invaryant sağlam" demek
   bu ekranda YETERLİ DEĞİL: en önemli rakam varsayılan görünümde okunabilmeli.
   Sabit toplam 892 → 818px; ölçülen tablo 957 → ~883px < 902px kap.
   🔴 1.348.0: Borç/Alacak 82 → 92px (8 haneli "40.684.320,00" 82px metin ister; ölçüldü
      1024px'te 72px iç alanda 10px kırpılıyordu — "kırpılmış rakam yalandır"). Pay Belge No
      70→62, Kod 66→60, Kaynak 104→102 (rozet 9,5px'te "Üretim Siparişi" 91,4px; hücre
      dolgusu bu kademede 5+5 → iç alan 92 ≥ 91,4 — 100px'te 90 kalıyor ve 1,4px kırpıyordu).
      Sabit toplam 818 → 822px; Açıklama'ya 1024'te ~80px kalır (metin, title'lı). */
/* 🔴 TARİH KOLONU ÖLÇÜLDÜ, TAHMİN EDİLMEDİ (1.350.0). Kullanıcı: *"tarih kısmını
   genişlet, yıl kısmını kesiyor ve toplu fatura işleme olduğunda tarih tablodan
   taşıyor"*. Hücre `overflow:hidden; text-overflow:ellipsis` taşıyor (13 kolonluk
   ortak kural) → kırpılan şey YILDI ve kırpılmış bir tarih yanlış bir tarihtir.
   Bütçe: "03.07.2026" 10,5px tabular rakamda ~58px + yan dolgu 5+5 = 68px. AYNI FİŞ
   NUMARALI satırlar bloklandığında ilk hücre `padding-left: 14px` + 2px aksan çizgisi
   alıyor (1.347.0 girinti kuralı) → ihtiyaç 79px. Bu yüzden 64 → 82px; ≤1200'de 78,
   ≤640'ta (yan dolgu 4px) 76px. Kod kolonu da kullanıcı isteğiyle genişledi (68 → 80).
   🔴 KAYBEDEN TARAF AÇIKLAMA — kullanıcının kendi dediği gibi ("tarih sütununu
   açıklama kısmından aldığın alan ile genişlet"): o kolon esnektir, metni kırpılabilir
   ve tamı `title`dadır. Rakam kırpılması serbest DEĞİLDİR. */
/* 🔴 KADEME SINIRI 1200 → 1360px (1.350.0 — tasarım denetimi bulgusu). 1280px
   yaygın bir dizüstü genişliğidir ve TABAN kademeye düşüyordu: sabit kolonlar
   928px, içerik alanı ~993px → Açıklama'ya 65px kalıyor ve 40 karakterlik ürün
   adı "TAM DE…" oluyordu. Sıkıştırılmış kademe (854px) 1280'de Açıklama'yı
   ÖLÇÜLDÜ 65 → 124px'e çıkarır (1440'ta 210px değişmedi); rakam kolonları AYNI
   kalır — onlar kırpılamaz, Açıklama kırpılabilir (tamı `title`da). */
/* 🔴 1.381.0: Telefonda (≤640) Belge No 48 → 56 · Miktar 44 → 48 · Birim 32 → 36px — aynı
   ölçüm 390px'te bu üç başlığı "…" ile kesiyordu (56/46/35px istiyorlar; tablo zaten kendi
   kabında kayıyor, +16px yeni kaydırma yaratmaz).
   🔴 1.381.0: İskonto (--ek-c10) 54/50/48 → 58/56/54px. Başlıklar ortalanıp taşan başlık
   "…" ile kısalmaya başlayınca ÖLÇÜLDÜ: "İSKONTO" 1440 ve 1280'de 56px istiyor, 54/50px'te
   "İSKON…" okunuyordu. Fark esnek Açıklama kolonundan gelir (metin, tamı title'da). */
@media (max-width: 1360px) {
    .peron-layout .peron-table.ek-t {
        --ek-c1: 78px; --ek-c2: 62px; --ek-c3: 102px; --ek-c4: 72px;
        --ek-c6: 52px; --ek-c7: 38px; --ek-c8: 72px;  --ek-c9: 48px; --ek-c10: 56px;
        --ek-c11: 92px; --ek-c12: 92px; --ek-c13: 96px;
    }
}

/* 🔴 1.381.0 — DOKUNMATİK (641px+) rejimde başlık 11px: "BELGE NO" 64, "BİRİM" 41, "İSKONTO"
   59px istiyor (ölçüldü 768px; 62/38/56'da "…"). Telefon bloğu (≤640) AŞAĞIDA ve onu ezer. */
@media (pointer: coarse) {
    .peron-layout .peron-table.ek-t { --ek-c2: 66px; --ek-c7: 42px; --ek-c10: 60px; }
}
@media (max-width: 640px) {
    .peron-layout .peron-table.ek-t {
        --ek-c1: 76px; --ek-c2: 56px; --ek-c3: 100px; --ek-c4: 60px;
        --ek-c6: 48px; --ek-c7: 36px; --ek-c8: 62px;  --ek-c9: 44px; --ek-c10: 54px;
        --ek-c11: 90px; --ek-c12: 90px; --ek-c13: 98px;
    }
    .peron-layout .peron-table.ek-t > thead > tr > th,
    .peron-layout .peron-table.ek-t > tbody > tr > td { padding-left: 4px; padding-right: 4px; }
}

/* ══ CARİ EKSTRE MODALI — 12 KOLONLU KIRILIM (1.349.0) ═══════════════════════
   Kullanıcı: *"cari kısmındaki ekstre simgesine tıkladığında modal daha büyük olsun."*
   Modal artık `w-xl` (min(1200px, 96vw)) ve tablo Hesap Ekstresi ekranıyla AYNI
   kırılımı taşıyor (Belge No · Kaynak · Miktar · Fiyat · İskonto · KDV).
   🔴 TABLO KENDİ KABINDA KAYAR, MODAL GÖVDESİ DEĞİL: `overflow-x` burada; dikey
      kaydırma modalın kendi gövdesine bırakılır (iç içe dikey kaydırıcı YOK).
   🔴 PUNTO EKSTRE EKRANIYLA AYNI MERDİVENDE: gövde 10,5 · yardımcı/başlık 9,5 ·
      mutlak taban 9px. Modal dar bir yüzeydir; 12 kolon ancak bu yoğunlukta okunur. */
/* 🔴 SEÇİCİ `.peron-table.ek-modal-t` — TEK SINIFLA YAZMAK YETMİYOR (1.349.0, ölçüldü).
   `.peron-table > thead > tr > th` ile `.ek-modal-t > thead > tr > th` AYNI özgüllükte
   (0,1,3) ve genel kural dosyada SONRA geldiği için o kazanıyordu: modal başlığı 9,5
   yerine `var(--tbl-head-fs)` = 10,5px, gövde 10,5 yerine `var(--tbl-fs)` = 12px
   basıyordu (tarayıcıda eşleşen kural listesiyle kanıtlandı). İki sınıfı birleştirmek
   özgüllüğü (0,2,3)'e çıkarır ve sırayla oynamaya gerek kalmaz. */
.ek-modal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 🔴 `table-layout: fixed` colgroup paylarını BAĞLAYICI kılar; otomatik düzende
   tarayıcı içeriğe göre şişiriyordu (ölçüldü: doğal genişlik 1091px).
   `min-width` 820 → 880: sabit payların toplamı 854px + Açıklama payı. */
.peron-table.ek-modal-t { width: 100%; min-width: 880px; table-layout: fixed; }
.peron-table.ek-modal-t > thead > tr > th,
.peron-table.ek-modal-t > tbody > tr > td {
    font-size: 10.5px;
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.peron-table.ek-modal-t > thead > tr > th { font-size: 9.5px; }
.peron-table.ek-modal-t > tbody > tr > td.col-num { font-variant-numeric: tabular-nums; text-align: right; }
.peron-table.ek-modal-t > tbody > tr > td .peron-badge { font-size: 9.5px; padding: 2px 6px; gap: 3px; }
/* Açıklama kolonu esner, gerisi içeriğe göre daralır. */
.peron-table.ek-modal-t > tbody > tr > td:nth-child(4) { max-width: 240px; }
/* 🔴 1.381.0 — DAR PENCEREDE AÇIKLAMA EZİLİYORDU. 11 sabit kolonun toplamı 864px, tablo tabanı
   880px → kap tabandan darken esnek Açıklama'ya yalnız ~16-20px kalıyordu (tasarım denetimi
   ölçtü: 768 dokunmatik ve 780/800/900px fare pencerede başlık "A.", hücre "K." okunuyordu —
   1.381.0 öncesinde de 26px'ti). Modal ≥769'da min(1200px, 96vw): kap ≈ 0,96·pencere − 38px,
   yani ≤956px'te tablo ZATEN kendi kabında kayıyordu. Bant ≤1000px: taban 1090 → Açıklama
   ~226px (kaydırma bu bantta zaten vardı / 957-1000'de 16-50px'lik Açıklama yerine kayma).
   🔴 1024px BİLEREK DIŞARIDA: 1.350.0 kararı — en önemli rakam Bakiye kaydırmasız görünür
      (orada Açıklama 73px, metin "…" ile kısalır, tamı title'da). */
@media (max-width: 1000px) {
    .peron-table.ek-modal-t { min-width: 1090px; }
}
.ek-modal-act { text-align: center; white-space: nowrap; }
/* 🔴 Dokunma hedefi: yoğun yüzey denetimi eşiği 28px (kullanıcı kuralı — 44px
   ZORUNLULUĞU 2026-09-03'te kaldırıldı, "her şey büyük olmasın"). */
.ek-modal-act .icon-btn { min-width: 28px; min-height: 28px; padding: 4px; }
.ek-modal-act .icon-btn + .icon-btn { margin-left: 4px; }

/* 🔴🔴 TELEFONDA AKORDİYON PANELİ EKRANA YAPIŞIR (1.347.0 — tasarım ölçümü bulgusu).
   ÖLÇÜLDÜ (360px): sevk kırılımı açıldığında modül tablosunun başlıkları x=449-753,
   özet tablosunun DEĞER sütunu x=503-753 aralığındaydı; görünür pencere ise x=0-344.
   Yani Mal Bedeli · KDV · Ara Toplam · İskonto · Kalem Toplamı · Adet · Liste Fiyatı ·
   Tutar — SEKİZ alanın SEKİZİ de ~410px sağa kaydırmadan görünmüyordu. Panel bir
   `colspan=13` hücrenin içinde yaşıyor ve o hücre tablonun TAM genişliğinde.
   🔴 ÇÖZÜM PANELİ KÜÇÜLTMEK DEĞİL, KAYDIRMADAN AYIRMAK: `position: sticky; left: 0`
      paneli kaydırma kabının sol kenarına sabitler — kullanıcı tabloyu yatay
      kaydırırken panel yerinde kalır ve İÇERİĞİ HEP GÖRÜNÜR. Genişlik kabın görünür
      alanına kilitlenir; kendi tablosu gerekirse `.ek-det-tbl{overflow-x:auto}` ile
      KENDİ İÇİNDE kayar (o kural zaten vardı, dış kaydırma yüzünden işe yaramıyordu).
   🔴 Yalnız ≤768px: masaüstünde tablo zaten kaba sığıyor, sticky orada hiçbir şeyi
      düzeltmez ama boyama maliyeti getirir (MOBİL KURALI: masaüstü yolu değişmez). */
@media (max-width: 768px) {
    .peron-layout .peron-table.ek-t > tbody > tr.ek-det-row > td > .ek-det {
        position: sticky;
        left: 0;
        width: min(100%, calc(100vw - 30px));
        box-sizing: border-box;
    }
}

/* ── SEVK AKORDİYONU ─────────────────────────────────────────────────────────
   Sevk borcunun kırılımı: hangi modüller gitti, liste fiyatı, KDV, iskonto.
   🔴 Ok AÇIKLAMA hücresinin içinde durur — 8. kolon açmak `peron-table--fixed`
      düzenini yeniden ölçmeyi gerektirirdi ve dar ekranda bakiye sıkışırdı.
   🔴 Renk yalnız `var(--token)` (gece modu token ezerek çalışıyor).           */
/* 🔴 `overflow: hidden` HÜCREDE DEĞİL, METİN SPAN'İNDE. Hücrede olduğunda okun
   `::after` ile büyütülmüş 44px dokunma hedefi hücrenin dolgu kutusunda KIRPILIYOR
   ve efektif hedef 22+6+6 = 34px'e (hedefin %77'si) düşüyordu. Aynı tuzak bu
   dosyada iki kez daha ölçülüp düzeltilmiş (.peron-mob-filter-scroll,
   .peron-mob-seg-btn `overflow: visible`) — burada da aynı çözüm. */
.peron-layout .peron-table.ek-t td.ek-has-acc {
    white-space: nowrap; overflow: visible;
}
.peron-layout .peron-table.ek-t td.ek-has-acc .ek-aciklama {
    display: inline-block; vertical-align: middle;
    max-width: calc(100% - 30px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Hesap Ekstresi araç çubuğu — cari seçici <select> yerine aramalı kutu oldu.
   🔴 `.po-ac` sarmalayıcısı bir <div>, yani BLOK. `.peron-form-label`ın `display:block`u
   YOK (satır içi etiket), bu yüzden "Cari" etiketi kendi satırına düşüyor ve şerit
   36px'ten 54px'e çıkıyordu: dört etiketten biri diğer üçüyle HİZASIZ kalıyordu
   (ölçüldü: Cari etiketY 4 / kontrolY 18, diğer üçü 13,5 / 0). Sarmalayıcıyı satır
   içi yapmak eski hizayı birebir geri verir. */
#ek-contact { display: inline-block; vertical-align: bottom; }

.ek-acc {
    position: relative;    /* ::after ile büyütülen dokunma hedefinin çıpası */
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 22px; height: 22px; margin-right: 6px; padding: 0; border: 1px solid var(--border);
    border-radius: 5px; background: var(--card-bg); color: var(--text-secondary);
    cursor: pointer; transition: transform .15s ease, color .15s ease;
}
/* 🔴 Dokunma hedefi 44×44 — GÖRSEL boyut 22px kalır, satır yüksekliği ARTMAZ.
   Görünür kutuyu büyütmek ekstre satırını 22→44px'e çıkarıp ekrandaki satır
   sayısını yarıya indirirdi. */
.ek-acc::after { content: ''; position: absolute; inset: -11px; }
.ek-acc:hover { color: var(--pri-text); border-color: var(--pri); }
.ek-acc svg { width: 13px; height: 13px; }
.ek-acc.is-open { transform: rotate(90deg); color: var(--pri-text); border-color: var(--pri); }

.peron-layout .peron-table.ek-t tr.ek-det-row > td { padding: 0; background: var(--content-bg); }
.ek-det { padding: 10px 12px 12px; border-left: 0; }
/* 🔴 13px → 12px (1.346.0). Kullanıcı: *"hesap ekstresi … yazı karakterlerini küçült
   9 puntoyu geçmesin"*. 9 punto = 12px (1 punto = 4/3 px) ve bu, projenin gövde
   standardı `--tbl-fs` ile aynı sayıdır. Ekstre ekranında tavanı aşan TEK yer burasıydı
   (ölçüldü: kalan tüm `.ek-*` kuralları 10,5–12px bandında). Sabit 13px yerine tokeni
   okumak, punto standardı bir daha değişirse bu satırın geride kalmasını önler.
   🔴 BÜYÜTME YAPILMADI: 11px ve 11,5px kurallara DOKUNULMADI — kullanıcı kuralı
      "gereğinden büyük olanı küçült, küçük olanı olduğu gibi bırak". */
.ek-det-bas { font-weight: 700; font-size: var(--tbl-fs, 12px); color: var(--text-primary); }
.ek-det-kn  { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.ek-det-gr  { display: grid; gap: 12px; margin-top: 8px; grid-template-columns: 1fr; }
.ek-det-tbl { overflow-x: auto; }
.ek-det-tbl table, .ek-det-ozet { width: 100%; border-collapse: collapse; background: var(--card-bg); }
.ek-det-tbl th, .ek-det-tbl td, .ek-det-ozet th, .ek-det-ozet td {
    padding: 5px 8px; border: 1px solid var(--border-light); font-size: 12px; text-align: left;
}
.ek-det-tbl thead th { background: var(--border-light); font-weight: 700; font-size: 11px;
                       text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.ek-det-tbl td.col-num, .ek-det-ozet td.col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ek-det-tbl tr.ek-det-yok td { color: var(--text-muted); text-decoration: line-through; }
/* 🔴 Renk `--rose` DEĞİL `--rose-ink`: ölçüldü, `--rose`/`--border-light` çifti
   4,11:1 (açık) ve 4,19:1 (gece) — 10px/700 "büyük metin" sayılmaz, eşik 4,5:1.
   `--rose-ink` bu dosyada zaten AA için türetilmiş token. Punto da 10 → 11px. */
.ek-det-rz { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
             background: var(--border-light); color: var(--rose-ink); font-size: 11px;
             font-weight: 700; text-decoration: none; vertical-align: middle; }
.ek-det-ozet th { font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ek-det-ozet th i { font-style: normal; font-weight: 400; color: var(--text-muted); }
.ek-det-ozet tr.ek-det-tp th, .ek-det-ozet tr.ek-det-tp td { font-weight: 800; color: var(--text-primary); background: var(--border-light); }
/* 🔴 `--amber` beyaz kart üzerinde 3,66:1 (ölçüldü) — AA altı. `--amber-ink`
   aynı anlamı taşıyan, bu dosyada AA için türetilmiş token (5,61:1). */
.ek-det-ozet tr.ek-det-sv th, .ek-det-ozet tr.ek-det-sv td { color: var(--amber-ink); font-weight: 700; }
.ek-det-bos { padding: 10px; color: var(--text-muted); font-size: 12px; text-align: center; }
.ek-det-yuk { padding: 18px; text-align: center; }

/* ≥900px: modül tablosu ve özet YAN YANA (özet 260px, oran sabit — auto-fit YOK). */
@media (min-width: 900px) {
    .ek-det-gr { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BELGELİ TESLİM MODALI (.rd-*) — tedarikçi fişi/faturası altında çok satırlı teslim

   🔴 Seçiciler `.peron-layout` önekiyle yazılır: satır 4774'teki
   `.peron-layout.dense-mode .peron-table td` (0,3,1) MEDIA DIŞINDA font-size veriyor;
   çıplak `.rd-t td` (0,1,1) "Kompakt Tasarım" açık kullanıcıda sessizce ezilir.
   🔴 Punto küçültme yalnız ≥769px: mobil bloklar max-width ile yazılmış ve mobil
   okunabilirlik kuralı 14px altını istemiyor → min-width/max-width kesişmez.
   🔴 Form kontrolleri mobilde 16px (iOS odakta sayfayı zoomlar).
=========================================================================== */
/* 🔴 PUNTO TAVANI 12px — KULLANICI KURALI (1.351.0): "yazıları 9 puntodan büyük
   yapma". 9 punto = 12px (tasarım sözleşmesi 3.b). Modal GENİŞLEDİ ama tipografi
   BÜYÜMEDİ: hiyerarşi punto değil AĞIRLIK ve RENK ile kuruluyor (GENEL TOPLAM
   `font-weight:800` + `--pri-text`). 13px olan hata kutusu da tavana çekildi. */
/* 🔴 METİN ROSE'U `--rose` DEĞİL `--rose-ink` (piksel denetimi bulgusu). ÖLÇÜLDÜ:
   `--rose` (#c2545a) `--border-light` zemininde **4,11:1** → AA (4,5:1) ALTINDA.
   `--rose-ink` (#ab4a4f) beyazda 5,49:1 verir ve gece temasında ayrı tanımlıdır.
   Bu bir HATA mesajıdır: okunmazsa operatör neden reddedildiğini bilmez. */
.rd-err { color: var(--rose-ink); font-size: 12px; margin-bottom: 10px;
          background: var(--border-light); border-left: 3px solid var(--rose);
          border-radius: 4px; padding: 8px 10px; }
.rd-err[hidden] { display: none; }

.rd-note { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
/* 🔴 `[hidden]` AÇIKÇA BEYAN EDİLİR. Bugün `.rd-note` bir `display` bildirmiyor, yani
   tarayıcının `[hidden]{display:none}` kuralı çalışıyor — ama birisi buraya
   `display:flex` eklediği gün YAZAR bildirimi UA kuralını EZER ve gizlenmesi gereken
   her not koşulsuz ekranda kalır. Bu tuzağa bu dosyada üç kez düşüldü (rd-f kur alanı,
   rd-unit-karta tiki, bölüm süzgeci); dördüncüsü beklenmesin. */
.rd-note[hidden] { display: none; }
/* Tablo altındaki tek satırlık sözleşme metni: KDV kutusu boşsa "dahil" demek.
   🔴 `title` ipucunun YERİNE GEÇMEZ, ONU TAMAMLAR — telefonda hover yoktur. */
/* 🔴 `.ctr-*` BLOĞU KALDIRILDI (1.353.0): cari Excel aktarım modalı ERP ekranından
   taşındı ("içe dışa aktarma sadece yönetim panelinden firma ayarları içinden olsun").
   Yeni arayüz /yonetim panelinin KENDİ CSS'iyle (`public/yonetim/yonetim.css`) çizilir;
   47 kuralı burada bırakmak, hiçbir şeyin uygulanmadığı ölü stil demekti — ölü stil,
   sonraki okuyucuya "bu ekran hâlâ var" der. */

/* 🔴 `.rd-legend` KALDIRILDI (1.368.0). Kullanıcı: *"bilgilendirme yazılarını
   tamamen kaldır ekranda yer aç"*. Kural (KDV boşsa dahil · iskonto kademeli)
   ortadan kalkmadı; KDV ve iskonto kutularının `title`/`aria-label` metinlerinde
   tam cümle olarak duruyor. Kabı boş bırakmak ölü stil olurdu. */
/* 🔴 `.rd-pbfark` KALDIRILDI (1.351.0). "Kartı farklı para biriminde" rozeti, belge
   para birimi operatörün BEYANI olduğu sürece anlamlıydı; beyan kalktı, gruplama
   anahtarı belgeyi tek para birimine kilitliyor ve farklı kartlı ürün `urunEkle`
   içinde REDDEDİLİYOR → rozet hiçbir koşulda basılamaz. Basılamayan bir uyarıyı
   CSS'te tutmak, "uyarı çıkmadıysa sorun yok" güvenini boşa harcar. */

/* Başlık ızgarası: 8px ritmi, alanlar kendi doğal genişliğinde, dar ekranda sarar.

   🔴🔴 ALTI ALAN TEK SATIRDA (1.369.0 — kullanıcı: *"fiş no kısmını neden alt
      sütuna attın, bunu değiştir üst satıra sığdır, bilgi kısımları tek satırda
      olsun"*). Belge Türü seçicisi eklenince taban genişlikler toplamı
      132+260+190+148+190+240 = 1160px, artı 5 boşluk = 1220px oluyordu; oysa
      1440px ekranda `.rd-head`in iç genişliği ÖLÇÜLDÜ: 1164px. Fazlalık tam da
      Fiş No alanını ikinci satıra düşürüyordu.
   🦷 ÇÖZÜM MODALI BÜYÜTMEK DEĞİL (kullanıcı kuralı: "büyütme bişeyi"): tabanlar
      gerçek içerik ihtiyacına çekildi — toplam 874 + 60 boşluk = 934px. Kalan
      230px `flex-grow` ile dağılır, yani alanlar ekran genişledikçe yine büyür,
      yalnız SARMA eşiği düşer. 1024px'te de (iç genişlik 947px) tek satır.
   🔴 TARİH ALANININ TABANI 132px'İN ALTINA İNMEZ: `input[type=date]` tarayıcıdan
      ~120px içsel asgari genişlik taşır; altına inen taban kutuyu kabından
      taşırır (bu dosyada belgelenmiş tuzak). */
.rd-head { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.rd-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 132px; min-width: 0; }
.rd-f > span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.rd-f > span > b { color: var(--rose); }
.rd-f--doc { flex: 1 1 180px; }
/* Belge türü seçicisi (1.368.0): içeriğe göre dar durur — dört seçeneğin en uzunu
   "İrsaliye". Esnetilseydi komşu tarih/numara alanlarından yer çalardı; bu satırda
   ZATEN altı alan var ve dar ekranda hepsi tam genişliğe sarıyor. */
.rd-f--kind { flex: 0 1 128px; }
/* Tedarikçi kodu SABİT ve DAR (320.01.00001 = 12 karakter), ad ise esnek ve geniş —
   ikisi yan yana tek bir kimlik bloğu okur. */
.rd-f--kod { flex: 0 1 112px; }
.rd-f--ted { flex: 2 1 190px; }
.rd-f--kod input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rd-f input[readonly] { background: var(--border-light); color: var(--text-secondary); }

/* 🔴 46 → 58vh (1.351.0). Kullanıcı: "tek bir faturada 25 adet ürün olabilir alt alta
   ona göre bir yapı yap, bazısında 50, modalı olduğunca verimli kullan." Satır artık
   TEK SATIR (kod kendi kolonunda, lot düğmesi adın önünde, birim tiki seçicinin
   yanında) → aynı yükseklikte ~%40 daha çok kalem görünüyor. Tablo başlığı
   `.peron-table thead`ten gelen `position:sticky` ile kaydırırken yerinde kalır. */
.rd-wrap { max-height: 58vh; overflow: auto; }

/* 🔴🔴 HER HÜCRE TEK SATIR — KULLANICI KURALI (1.351.0):
   "hepsi tek satır halinde asla bozulmasın satır."
   Alta inen düğüm KALMADI; `nowrap` bunu CSS'te de kilitler, taşan METİN (kod, ürün
   adı) üç noktayla kesilir ve tamı `title` ile görünür. 🔴 SAYI KESİLMEZ: rakam taşıyan
   kolonlar (Fiyat/KDV/İskonto/Toplam) sabit ve ölçülmüş genişliktedir. */
.peron-modal .peron-table.rd-t td,
.peron-modal .peron-table.rd-t th { vertical-align: middle; white-space: nowrap; }
/* Yatay dolgu 12 → 8px: 8 kolonun her birinde 8px, toplam 64px ÜRÜN adına geri döner.
   (Küçültme; proje kuralı "gereğinden büyük olanı küçült"e uygun.) */
.peron-modal .peron-table.rd-t td,
.peron-modal .peron-table.rd-t th { padding-left: 8px; padding-right: 8px; }
.peron-modal .peron-table.rd-t td.col-num,
.peron-modal .peron-table.rd-t td.rd-unit { font-variant-numeric: tabular-nums; }
.peron-modal .peron-table.rd-t td.rd-kod,
.peron-modal .peron-table.rd-t td.rd-ad,
/* 🔴 BAŞLIK DA KIRPILABİLİR OLMALI: `nowrap` tek başına taşmayı ENGELLEMEZ, yalnız
   sarmayı engeller — taşan başlık komşu kolonun üstüne biner ve iki etiket bitişik
   okunur (ölçüldü: "İSKONTO %2. İSK. %"). Etiket üç noktaya düşebilir; sayı düşemez,
   o yüzden bu kural yalnız `th`ye ve metin hücrelerine uygulanır. */
.peron-modal .peron-table.rd-t th { overflow: hidden; text-overflow: ellipsis; }
/* Ürün KODU artık kendi kolonunda (adın altında değil): tek karakter genişliğinde
   yazı tipi, kod listesi dikey olarak hizalı okunsun. */
.peron-modal .peron-table.rd-t td.rd-kod {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; color: var(--text-muted);
}
.peron-modal .peron-table.rd-t td.rd-total { font-weight: 700; }
.peron-modal .peron-table.rd-t td.rd-unit  { color: var(--text-primary); }
/* Dövizli belgede TL karşılığı ALTA DEĞİL YANA yazılır (satır tek kalsın); karşılığında
   Toplam kolonu `.rd-t--fx` ile genişler — genişlik yalnız gerçekten gerektiğinde alınır. */
.peron-modal .peron-table.rd-t td.rd-total .pur-tl {
    display: inline; margin-left: 6px; font-weight: 600;
}
/* 🔴🔴 GECE MODU KENARLIK TOKENİ TÜM DENETİMLERE BAĞLANIR (piksel denetimi bulgusu).
   `--border-ctl` eklenmişti ama yalnız `.rd-unit-sel`e yazılmıştı; kalan 7 girdi
   `.peron-input { border: 1.5px solid var(--border) }` genel kuralını miras alıp
   gece modunda **1,14-1,30:1** kontrastta kalıyordu (WCAG 1.4.11 eşiği 3:1). Yani
   tokeni ekleyip bağlamamak, sorunu çözmüş gibi görünen bir kayıt bırakmıştı.
   🔴 Özgüllük: `.peron-modal … input` (0,3,1) ve `.peron-modal .rd-head .peron-input`
      (0,3,0), tabandaki (0,1,0) kuralı ezer. */
.peron-modal .peron-table.rd-t input { width: 100%; min-width: 0; text-align: right;
    border-color: var(--border-ctl); }
/* 1.395.1 — "Fiyat giriniz" işareti: üstteki kural (0,3,1) genel `.is-invalid` kenarlığını eziyordu
   (ölçüldü: kenarlık nötr kalıyordu). Yalnız renk değişir; kutu boyutu ve punto aynı. */
.peron-modal .peron-table.rd-t input.is-invalid[aria-invalid="true"] { border-color: var(--rose); }
.peron-modal .rd-head .peron-input { border-color: var(--border-ctl); }
/* 🔴 SAYI SÜTUNLARINDA `tabular-nums` TUTARLI OLMALI (denetim bulgusu): Fiyat ve
   Miktar girdileri "normal" ölçülüyordu, KDV/İskonto/Toplam "tabular-nums". Orantısız
   rakam genişliği, alt alta duran tutarlarda hizayı bozar (ölçüldü: 26px kayma). */
.peron-modal .peron-table.rd-t input.rd-price,
.peron-modal .peron-table.rd-t input.rd-qty { font-variant-numeric: tabular-nums; }
/* KDV % ve İskonto % kutuları dar kolonda: sayı sağa dayalı, dolgu kısıtlı. */
.peron-modal .peron-table.rd-t input.rd-vr,
.peron-modal .peron-table.rd-t input.rd-isk1,
.peron-modal .peron-table.rd-t input.rd-isk2 {
    padding-left: 5px; padding-right: 5px; font-variant-numeric: tabular-nums;
}

/* ── BİRİM SEÇİCİ (1.326.0) ──────────────────────────────────────────────────
   Hücre eskiden düz metindi; seçiciye dönüştü. Seçici ve "karta da yaz" tiki artık
   YAN YANA tek satırda (1.351.0) — tik altta dururken hücre ikiye bölünüyordu. */
/* 🔴 KOMŞU DOKUNMA HEDEFLERİ ARASI ≥6px (global kural; ölçüldü 4px). Seçicinin
   kaybettiği 2px kolon genişliğinden geri veriliyor (rdc-bir 104 → 108px). */
.rd-unitwrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* 🔴 YOĞUN YÜZEY DENETİMİ ≥28px (ölçüldü: masaüstünde 26px). Bu bir BÜYÜTME değil,
   eşiği KARŞILAMAdır — punto 12px'te sabit kalıyor, yalnız kutu 2px yükseliyor. */
.peron-modal .peron-table.rd-t .rd-unit-sel {
    flex: 1 1 auto; width: auto; min-width: 0; min-height: 28px; padding: 5px 4px; font-size: 12px;
    border: 1px solid var(--border-ctl); border-radius: 6px;
    background: var(--card-bg); color: var(--text-primary);
}
/* Değişmiş birim GÖRÜNÜR OLMALI: operatör 12 satırlık bir belgede hangisine
   dokunduğunu tablodan okuyabilsin (kaydettikten sonra değil).
   🔴 Burada `--amber` DOĞRUDUR: bu bir KENAR ÇİZGİSİ, metin değil. Ölçüldü 3,66:1 —
      WCAG 1.4.11 (grafik/arayüz bileşeni) eşiği 3:1'i geçiyor. */
.peron-modal .peron-table.rd-t .rd-unit-sel.is-degisti {
    border-color: var(--amber); font-weight: 700;
}
/* 🔴🔴 GERÇEK KUSUR, 1.326.0'DAN BERİ AÇIKTI (1.351.0'da yakalandı — kullanıcı
   "kartada yaz seçeneği ne olduğunu anlamadım, o ne işe yarıyor?" diye sordu).
   JS `lbl.hidden = !degisti` yazıyor, AMA yazar (author) stil sayfasındaki
   `display:flex`, tarayıcının kendi `[hidden]{display:none}` kuralını HER ZAMAN
   EZER — kaynak sırası değil, KÖKEN önceliği: author > user-agent. Yani tik birim
   hiç değiştirilmemişken de EKRANDAYDI ve kullanıcı onu bir "onay kutusu" sanıp
   işaretleyebiliyordu; o tik STOK KARTINI değiştiriyor.
   🔴 Bu yüzden `[hidden]` AÇIKÇA yazılır. Aynı tuzak bu dosyada daha önce üç yerde
      yaşandı (rd-f fx alanı, Kritik Stok, bölüm süzgeci) — tik atarken `hidden`
      özniteliğine güvenen her kural bunu beyan etmek ZORUNDA. */
.peron-modal .peron-table.rd-t .rd-unit-karta[hidden] { display: none; }
/* "↪" = yeni birimi STOK KARTINA da yaz. Metin etiket ("Karta da yaz") satırı ikiye
   bölüyordu; 25-50 kalemlik bir belgede bu, tablonun yarısını yüksekliğe harcamak
   demek. Anlam kaybolmuyor: tam cümle `title` ve `aria-label` içinde duruyor.
   🔴 Dokunma hedefi 24px — global kuralın "yoğun yüzey denetimi ≥ 28px / mutlak
      taban 24px" kademesi; telefonda aşağıda 32px'e çıkarılıyor. */
.peron-modal .peron-table.rd-t .rd-unit-karta {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; cursor: pointer; position: relative;
}
.peron-modal .peron-table.rd-t .rd-unit-karta input {
    position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
/* 🔴 METİN AMBER'İ `--amber` DEĞİL `--amber-ink`: ölçüldü, `--amber` (#be7438) beyaz
   zeminde 3,66:1 → AA (4,5:1) ALTINDA. `--amber-ink` 5,61:1 verir ve gece temasında
   `--amber`e alias olduğu için orada da bozulmaz (ölçülen gece değeri 5,87:1). */
.peron-modal .peron-table.rd-t .rd-unit-karta b {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 5px;
    border: 1px solid var(--border); background: var(--card-bg);
    font-size: 12px; line-height: 1; font-weight: 700; color: var(--amber-ink);
}
.peron-modal .peron-table.rd-t .rd-unit-karta input:checked + b {
    border-color: var(--amber); background: var(--amber);
    color: var(--pri-on);
}
.peron-modal .peron-table.rd-t .rd-unit-karta input:focus-visible + b {
    outline: 2px solid var(--pri); outline-offset: 1px;
}

/* Toplam kutusu: sağa yaslı, genel toplam belirgin. */
.rd-sum { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px;
          margin-top: 14px; padding: 12px 14px; background: var(--content-bg);
          border: 1px solid var(--border); border-radius: 8px; }
.rd-sum > div { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rd-sum span { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.03em; }
/* 🔴 14 → 13px (1.351.0): 14 punto merdivende YOK (KPI 19-22 · başlık 13 · gövde 12 ·
   etiket 11-11,5 · yardımcı 9,5-10,5). KÜÇÜLTME olduğu için "büyütme yasak" kuralına
   aykırı değil ve 11 / 13 / 17 üçlüsü hiyerarşiyi daha net veriyor. */
.rd-sum b { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
            color: var(--text-primary); }
/* 🔴 17 → 12px: punto tavanı GENEL TOPLAM'ı da kapsıyor. Ayırt ediciliği kaybetmesin
   diye ağırlık 800'de kalır, renk aksan `--pri-text` olur ve etiketi büyük harf
   basılır — hiyerarşi boyutla değil AĞIRLIK + RENK + BOŞLUK ile kuruluyor
   (tasarım sözleşmesi madde 3: "görsel hiyerarşi sadece renkle değil"). */
.rd-sum-grand b { font-size: 12px; font-weight: 800; color: var(--pri-text); }

/* ── BELGELİ TESLİM TABLOSU: KOLON GENİŞLİKLERİ + DARALAN EKRANDA KOLON DÜŞÜRME ─
   🔴 GENİŞLİKLER JS'TEN BURAYA TAŞINDI (peron-mod-orders.js ~2531). Satır içi
      `style="width:96px"` media query'yi EZER → kolon düşürmek işe YARAMIYORDU:
      ÖLÇÜLDÜ, `visibility:collapse; width:0` satır içi genişliğe yenilip tabloyu
      1023px'te 945→769 daraltıyor, ama boşalan 176px kapta BOŞLUK olarak kalıyor
      ve ürün yine 165px'te duruyordu. Taşıma davranışı DEĞİŞTİRMEZ — doğrulandı:
      1440/1280/1024/900/820/768/320'de ürün 579/422/166/59/59/55/54, taşımadan
      önceki ölçümle BİREBİR aynı.
   🔴 KUSUR: `.peron-table--fixed { min-width: max-content }` (6259) + 7 SABİT kolon
      (88+88+96+180+96+80+152 = 780px). Ürün TEK esnek kolondur; tablonun max-content'i
      780 + `<th>Ürün</th>`in max-content'i (nowrap + 2×10px dolgu = 54px) = 834px'tir.
      Kap 834'ün altına inince ürün 54px'e ÇAKILIR — ölçüldü: 916px'te 58, 900'de 59,
      820'de 59, 768'de 55, 390/360/320'de 54 → 40 harflik addan ~5 harf.
   🔴 DÜŞEN İKİ KOLON TÜRETİLMİŞTİR ve toplamları `.rd-sum` özetinde DURUYOR:
      "KDV Tutarı" = fiyat×oran, "İskonto" = belge başlığındaki iki oranın satıra
      düşen etkisi. DÜŞMEYENLER: Miktar / Birim / Fiyat / KDV oranı (hepsi operatörün
      DÜZENLEDİĞİ alan — gizlemek düzenlemeyi imkânsız kılardı) ve Toplam (operatörün
      faturayla karşılaştırdığı kontrol sayısı).
   🔴 `display:none` tabloyu DARALTMAZ — daraltan `<col>`un `visibility: collapse`'ıdır
      (bu kod tabanında ölçülmüş tuzak; Risk Tablosu 16523, Mal Kabul 10410 aynı desen).
      `width: 0` ŞARTTIR: collapse TEK BAŞINA kolonu düşürür ama yerini BOŞLUK bırakır.
      Risk Tablosu'ndaki ek `padding-left/right: 0` kuralı BURADA GEREKSİZ — `width:0`
      ile hücre zaten 0px ölçüldü (kurallı ve kuralsız iki senaryo birebir aynı sonuç).
   🔴 EŞİKLER ÖLÇÜLDÜ (kap = modal kutusu − 38px; ≤768'de kutu tam genişlik):
        1024 → kap 946 · 8 kolon sığıyor, ürün 166  → DOKUNULMAZ
        1023 → kap 945 · iki kolon düşer → ürün 341 · iç kaydırma 0
         950 → kap 872 · ürün 268      ·  900 → kap 822 · ürün 218
         860 → kap 782 · ürün 178      ·  820 → kap 742 · ürün 138
         800 → kap 722 · ürün 118      ·  hepsinde iç kaydırma 0
      ≤768'de kap 730 ve altına iner, esnek kolon YİNE tabana düşerdi (700→58, 320→54).
      Orada ürün AÇIK GENİŞLİK alır: tablo 804px'e sabitlenir, fazlası `.rd-wrap` İÇİNDE
      kayar — sayfa gövdesi ASLA kaymaz (320-768 arası documentElement taşması ölçüldü: yok).
      200px SEÇİLDİ: iç genişlik 176px, 12-13px punto ile ~23-25 harf (bugün ~5). Üstelik
      iç kaydırma AZALIYOR: 768→74 (bugün 105) · 480→362 (392) · 390→452 (482) · 320→522 (552).
   🔴 `.rd-t--tam` ŞART: fiyatı gizli operatörde tablo 3 kolona iner ve BUGÜN her genişlikte
      SIĞIYOR (320→ürün 106, 768→554, iç kaydırma 0). Genişliği koşulsuz vermek o dala
      olmayan bir kaydırma sokardı; `.rd-t--tam` ile o dal her genişlikte BİREBİR aynı kalır. */
/* ── BELGELİ TESLİM TABLOSU: KOLON GENİŞLİKLERİ (1.351.0'da yeniden ölçüldü) ────
   🔴 KOLON DÜZENİ KULLANICI KURALI: "ürün kodu-ürün-miktar-birim-fiyat-kdv-iskonto
      (manuel girilebilir olacak)-toplam şeklinde yapılandır."
   🔴 SABİT TOPLAM 798px (110+76+108+146+62+78+78+140). Eskisi 780px'ti ve
      `.rd-t col.rdc-kdv` TEK BAŞINA 180px yiyordu (Hariç/Dahil ikili düğmesi + oran
      kutusu). İkili düğme kalktı, yerine tek kutu geldi → 180 → 62; "KDV Tutarı"
      kolonu (96px) tamamen kaldırıldı. İKİ kolon EKLENMESİNE (2. iskonto) ve Kod'un
      genişlemesine rağmen tablo hâlâ 1.350.0'ın 780px'inden dar.
   🔴 SONUÇ — DAR EKRANDA KOLON DÜŞÜRMEYE ARTIK GEREK YOK. `.peron-table--fixed`in
      max-content'i 632 + `<th>Ürün</th>` (~62px) = ~694px; modal ölçüm basamağı
      694+38 = 732 → `w-md` (760) seçiyor, kap 722 ≥ 694. Eski 834px'lik tabloda
      ≤1023px'te İskonto ve KDV Tutarı kolonları `visibility:collapse` ile düşürülüyordu;
      o kural KALDIRILDI çünkü İskonto artık OPERATÖRÜN DÜZENLEDİĞİ bir kutu —
      düşürmek onu düzenlenemez yapardı (aynı gerekçeyle Miktar/Fiyat/KDV de hiç
      düşürülmüyordu).
   🔴 ÜRÜN TEK ESNEK KOLON: taşarsa `col-ellip` ile üç noktayla kesilir, tamı `title`da.
      Sayı taşıyan hiçbir kolon esnek değildir — kırpılmış rakam yalandır. */
/* 🔴 1.351.0 ikinci tur (kullanıcı): "kod kısmınıda genişlet" · "2 tane iskonto
   bölümü oluştur". Kod 84 → 110px (ölçüldü: 15 karakterlik kod hiçbir genişlikte
   kırpılmıyor).
   🔴 İSKONTO KOLONLARI 62 → 78px (piksel denetimi bulgusu, FATAL): "İSKONTO %" başlığı
      63px yer istiyordu, kolonun iç alanı 46px'ti ve başlık HER genişlikte taşıyordu —
      820px'te "İSKONTO %2. İSK. %" bitişik okunuyordu. İki düzeltme birlikte: etiket
      "İSK. 1 %" / "İSK. 2 %" olarak kısaldı VE kolon 78px'e çıktı.
      🔴 Başlığa ayrıca ellipsis kalkanı kondu (aşağıda): etiket bir gün yine uzarsa
         bitişik okunmak yerine üç noktaya düşsün. METİN kesilebilir, SAYI kesilemez.
   Sabit toplam 798px (110+76+108+146+62+78+78+140). */
.rd-t col.rdc-kod  { width: 110px; }
.rd-t col.rdc-mik  { width:  76px; }
.rd-t col.rdc-bir  { width: 108px; }
/* 🔴 96 → 112px (1.351.1 — piksel denetimi, ÖLÇÜLDÜ). "123.456,78" (10 karakter)
   kutuda 83px yer istiyor, 96px'lik kolonun iç alanı 78px'ti → 1440/1024/820'de
   son hane KIRPILIYORDU. Mobil kolon bir önceki turda 126px'e çıkarılmıştı ama
   masaüstü tabanı dokunulmamıştı: "mobilde düzelttim" masaüstünü KAPSAMAZ.
   🔴 Kırpılmış rakam yalandır — metin üç noktaya düşebilir, PARA düşemez. */
/* 🔴 112 → 146px (1.358.1 — piksel denetimi, FATAL). Hücre artık İKİ denetim
   taşıyor: fiyat girdisi + para birimi seçicisi. 112px'te seçici hücrenin tamamını
   alıp fiyata **16px** bırakıyor ve komşu KDV kutusunun 4px üstüne biniyordu.
   83px (ölçülmüş "123.456,78") + 6px boşluk + 36px seçici + 18px dolgu = 143 → 146px.
   🔴 Tablo 764 → 798px. 769-1023px bandında `.rd-wrap` içinde zaten iç kaydırma
      vardı (`col.rdc-ad { width: 220px }` → 984px > kap 945px); 34px onu uzatır,
      YENİ kaydırma İCAT ETMEZ. Sayfa gövdesi asla kaymaz. */
.rd-t col.rdc-fiy  { width: 146px; }
.rd-t col.rdc-kdv  { width:  62px; }
.rd-t col.rdc-isk,
.rd-t col.rdc-isk2 { width:  78px; }
.rd-t col.rdc-top  { width: 140px; }
/* 🔴 DÖVİZLİ BELGEDE TOPLAM GENİŞLER — SATIRI İKİYE BÖLMEK YERİNE. Hücre
   "4.200,00 $ ≈ 199.731,00 ₺" taşır; 140px'te bu kırpılırdı. Sınıf yalnız
   `cur !== 'TRY'` iken basılır → TL belgeler 78px'i boşuna harcamaz. */
.rd-t--fx col.rdc-top { width: 218px; }

/* 🔴🔴 ÜRÜN KOLONU TABANI — 769-1023px BANDI (piksel denetimi bulgusu, FATAL).
   ÖLÇÜLDÜ: 820px'te ürün kolonu **32px**'e çakılıyordu ve 56 karakterlik bir ad
   ekranda "PA…" olarak görünüyordu. Sebep: modal basamağı `min(px, 96vw)` ile
   kırpılıyor (820 × 0,96 = 787 → kap 749) ve sabit kolonlar 748px tuttuğu için
   esnek tek kolona 1px kalıyor. JS'teki `URUN_TABAN` yalnız BASAMAK SEÇİMİNİ
   etkiler; basamak viewport'a kilitli olduğu için o bantta işe yaramıyor.
   🔴 ÇÖZÜM KOLON DÜŞÜRMEK DEĞİL: dokuz kolonun sekizi operatörün DÜZENLEDİĞİ ya da
      faturayla KARŞILAŞTIRDIĞI alan. Ürüne taban verilir, artan genişlik
      `.rd-wrap` İÇİNDE kayar — sayfa gövdesi asla kaymaz (projenin sözleşmesi).
      2 karakterlik bir ürün adı, 200px'lik bir iç kaydırmadan çok daha kötüdür.
   🔴 BANT ≤1023px İLE SINIRLI: 1024px'te kolon ölçüldü (213px, ~32 karakter) ve orada
      iç kaydırma YOK. Tabanı oraya da uygulamak, olmayan bir kusuru "düzeltip"
      23px'lik bir kaydırma İCAT ederdi. */
@media (min-width: 769px) and (max-width: 1023px) {
    .rd-t--tam col.rdc-ad { width: 220px; }
}

/* 🔴 "ORANI GİRİN →" / "ORAN YOK" UYARILARI KALDIRILDI (1.351.0). İkisi de tek bir
   varsayıma dayanıyordu: "KDV oranının boş olması bir EKSİKLİKTİR." Yeni sözleşmede
   boş kutu GEÇERLİ VE ANLAMLI bir beyandır — "bu fiyat KDV dahil". Geçerli bir duruma
   uyarı basmak, operatöre düzeltecek bir şey varmış gibi gösterirdi.
   Kaldırılanlar: `.rd-vat.is-warn` · `.rd-vatwrap .rd-vr.is-warn` ·
   `.rd-vatmode.is-warn .rd-seg` · `.rd-vatuyari` (hepsi ikili düğmeyle birlikte). */

@media (min-width: 769px) {
    .peron-modal .peron-table.rd-t td { font-size: 12px; padding-top: 6px; padding-bottom: 6px; }
    /* 🔴 BAŞLIK GÖVDEDEN KÜÇÜK OLMALI (piksel denetimi bulgusu): ≥769px'te `th` de
       12px'ti, yani hiyerarşi YOKTU; ≤768px'te ise zaten 10,5-11px'e iniyordu —
       aynı tablo geniş ekranda düz, dar ekranda kademeliydi. Merdivenin "tablo
       başlığı 9,5-10,5px" adımına çekildi. KÜÇÜLTMEdir, büyütme değil. */
    .peron-modal .peron-table.rd-t th { font-size: 10.5px; padding-top: 6px; padding-bottom: 6px; }
    .peron-modal .peron-table.rd-t input { font-size: 12px; padding: 5px 7px; min-height: 28px; }
}

/* Telefon: kolonlar sarmasın diye tablo yatay kayar (sayfa gövdesi ASLA kaymaz);
   form kontrolleri 16px kalır ve dokunma hedefi korunur. */
@media (max-width: 768px) {
    .rd-f, .rd-f--doc { flex: 1 1 100%; }
    .rd-wrap { max-height: 48vh; }
    .peron-modal .peron-table.rd-t input { font-size: 16px; min-height: 44px; }
    /* 🔴 `select` DE 16px OLMALI — `input` seçicisi onu KAPSAMAZ (denetim bulgusu).
       iOS Safari, 16px'in altındaki bir form kontrolüne odaklanınca sayfayı zoomlar;
       kullanıcı birimi seçtiğinde modal büyüyüp kayar. Birim hücresi 1.326.0'da düz
       metinden `<select>`e döndüğü için bu kural o gün eksik kaldı. */
    .peron-modal .peron-table.rd-t .rd-unit-sel { font-size: 16px; min-height: 44px; }
    /* 🔴 "↪" tiki telefonda 32×32: global kuralın "yoğun yüzey denetimi ≥ 28px"
       kademesi (44px zorunluluğu 2026-09-03'te kaldırıldı — "çok büyük olmasın her
       şey"). Metin taşımadığı için punto kuralı bunu KAPSAMAZ; anlam `title` ve
       `aria-label`da. */
    .peron-modal .peron-table.rd-t .rd-unit-karta { width: 32px; height: 32px; }
    .peron-modal .peron-table.rd-t .rd-unit-karta b { font-size: 14px; }
    /* Telefonda kolonlar: 16px'lik girdiler ve 44px hedefler sığsın diye genişler;
       tablo `.rd-wrap` İÇİNDE kayar — sayfa gövdesi ASLA kaymaz. */
    /* 🔴🔴 GERİLEME DÜZELTMESİ (piksel denetimi ölçtü: ürün kolonu 768/390/360/320'de
       **50-51px**, ~6-8 harf). 1.327.0'da konmuş `col.rdc-ad { width: 200px }` kuralı,
       1.351.0'da kolon bloğu yeniden yazılırken DÜŞTÜ. Esnek tek kolon, sabitlerin
       toplamı kabı aştığı an tabana ÇAKILIR — telefonda 200px'i AÇIKÇA vermek şart;
       fazlası `.rd-wrap` İÇİNDE kayar, sayfa gövdesi asla kaymaz.
       🔴 "Ölçülmedikçe düzeldiğini varsayma": kural silinince hiçbir test kırmızı
          vermedi, kusur yalnız tarayıcıda görüldü. */
    .rd-t--tam col.rdc-ad  { width: 200px; }
    .rd-t--tam col.rdc-kod { width: 116px; }
    .rd-t--tam col.rdc-mik { width:  92px; }
    .rd-t--tam col.rdc-bir { width: 132px; }
    /* 🔴 116 → 126px (piksel denetimi bulgusu): "123.456,78" (10 karakter) mobilde
       16px punto + taban dolgu ile 100px istiyor, kolonun iç alanı 98px'ti → 2px
       KIRPILIYORDU. Kırpılmış rakam yalandır; 10px daha vermek tek doğru cevap. */
    /* 🔴 126 → 190px (1.358.1): telefonda punto 16px (iOS odak-zoom kalkanı) →
       fiyat kutusu + 6px boşluk + 52px seçici + 16px dolgu.
       🔴🔴 İLK HESAP 180px'ti VE YANLIŞTI (piksel denetimi ölçtü, FATAL). "123.456,78"
          için 16px punto ile **100px** varsaymıştım; GERÇEK ihtiyaç `scrollWidth` ile
          **108px** ölçüldü. Kutunun iç alanı 104px kalıyor ve son hane KIRPILIYORDU.
          🔴 Ders: 12px puntoda ölçülmüş bir genişliği (83px) 16px bandına ORANLAYARAK
             tahmin etmek ölçüm değildir. Punto değişen her bantta metin YENİDEN ölçülür —
             aynı hata bu kolonda 1.351.1'de de yaşanmıştı ("mobilde düzelttim" masaüstünü
             kapsamamıştı), bu kez ters yönde tekrarlandı.
       🔴 Kırpılmış rakam yalandır: METİN üç noktaya düşebilir, PARA düşemez. Kolonu
          genişletmek tek doğru cevap — seçici zaten 52×44 ile eşiği fazlasıyla karşılıyor,
          onu daraltmak dokunma hedefini bozardı. */
    .rd-t--tam col.rdc-fiy { width: 190px; }
    .rd-t--tam col.rdc-kdv { width:  78px; }
    .rd-t--tam col.rdc-isk,
    .rd-t--tam col.rdc-isk2 { width:  86px; }
    .rd-t--tam col.rdc-top { width: 148px; }
    .rd-t--tam.rd-t--fx col.rdc-top { width: 226px; }
    .rd-sum { justify-content: space-between; }
}

/* ── Belgeli teslim: LOT alt-düzenleyicisi ──────────────────────────────────
   Parça parça gelen ürün için satır altına açılan kutu. Ana satırın Miktar alanı
   lot toplamından türer ve kilitlenir (.is-locked) — iki doğruluk kaynağı olmasın. */
/* 🔴 LOT DÜĞMESİ ADIN ÖNÜNDE, SATIR İÇİNDE (1.351.0 — kullanıcı kuralı: "lot kayıtları
   olan ürünlerin lot butonu ürün isminin önünde yer alsın altında değil"). `margin-top`
   onu alt satıra itiyordu; artık sağ boşlukla addan ayrılan bir çip. */
.rd-lot-btn { margin: 0 6px 0 0; vertical-align: middle; padding: 1px 6px; font-size: 10.5px; font-weight: 700;
              letter-spacing: 0.04em; color: var(--text-muted); background: transparent;
              border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.rd-lot-btn:hover { color: var(--pri-text); border-color: var(--pri); }
.rd-lot-btn.is-on { color: #fff; background: var(--pri-strong); border-color: var(--pri); }
/* 1.436.0 — teslim düzeltmesinde bekleyen (talebi henüz açılmamış) satırın çipi: etiket ile çıkarma TEK denetim,
   Lot düğmesi gibi adın ÖNÜNDE (satır tek satır kalır). Boyut Lot düğmesinin kademesinde, 24px tabanı korur. */
.rd-yeni { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; min-height: 24px;
           margin: 0 6px 0 0; padding: 0 8px; vertical-align: middle; font: inherit; font-size: 10.5px;
           font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: var(--pri-text);
           background: transparent; border: 1px solid var(--pri); border-radius: 999px; cursor: pointer; }
.rd-yeni:hover { background: var(--bg-inset); border-color: var(--rose); }
.rd-yeni:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
@media (max-width: 768px) {
    .rd-yeni { min-height: 28px; }
}

.peron-modal .peron-table.rd-t input.rd-qty.is-locked {
    background: var(--border-light); color: var(--text-secondary); cursor: not-allowed; }

.peron-modal .peron-table.rd-t tr.rd-lotrow > td { background: var(--content-bg); padding: 0; }
.rd-lot-box { padding: 10px 12px; border-left: 2px solid var(--pri); }
.rd-lot-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
/* 🔴 SATIR SOLA TOPLANIR, GENİŞLİĞİ YUTMAZ. `justify-content: flex-start` + kod
   alanının SINIRLI olması birlikte çalışır; ikisinden biri eksik olursa satır yine
   modal genişliğine yayılır. */
.rd-lot-row { display: flex; align-items: center; justify-content: flex-start;
              gap: 8px; margin-bottom: 6px; }
.rd-lot-row input { border: 1px solid var(--border-ctl); border-radius: 6px; padding: 6px 8px;
                    font-size: 12px; font-family: inherit; min-width: 0; }
/* Lot sıra numarası — GÖSTERİM (bkz. lotSatiriCiz içindeki not). Sabit genişlik:
   1→9 ile 10→99 arasında kod alanının başlangıcı KAYMASIN (hizasız ızgara yasak). */
.rd-lot-no { flex: 0 0 20px; text-align: right; font-size: 11.5px; font-weight: 700;
             color: var(--text-muted); font-variant-numeric: tabular-nums;
             -webkit-user-select: none; user-select: none; }
/* 🔴🔴 LOT KODU ARTIK ARTAN ALANI YUTMAZ (kullanıcı isteği: "gereksiz yere çok büyük").
   Eskiden `flex: 1 1 auto` idi: satırdaki TÜM boşluğu alıyordu ve modal `w-xl`
   (1200px) basamağına çıktığında kutu ~1000px'e ulaşıyordu — 12-20 karakterlik bir
   lot kodu için. Şimdi büyümüyor (grow 0), yalnız dar ekranda küçülüyor (shrink 1).
   240px = 20 karakterlik monospace kod + iç boşluk; üretilen otomatik kodlar bu
   bandın içinde kalıyor. */
.rd-lot-row .rd-lot-code { flex: 0 1 240px; font-family: ui-monospace, monospace; }
.rd-lot-row .rd-lot-qty  { flex: 0 0 110px; text-align: right; font-variant-numeric: tabular-nums; }
.rd-lot-del { flex: 0 0 auto; min-width: 30px; min-height: 30px; color: var(--rose);
              background: transparent; border: 1px solid var(--border); border-radius: 6px;
              cursor: pointer; line-height: 1; }
.rd-lot-del:hover { border-color: var(--rose); }
.rd-lot-foot { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.rd-lot-foot b { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rd-lot-add { padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--pri-text);
              background: transparent; border: 1px dashed var(--pri); border-radius: 6px;
              cursor: pointer; }

/* Telefon: alanlar tam genişliğe iner, dokunma hedefleri 44px, yazı 16px (iOS zoom). */
@media (max-width: 768px) {
    .rd-lot-row { flex-wrap: wrap; }
    .rd-lot-row input { font-size: 16px; min-height: 44px; }
    /* 🔴 KOD, SIRA NUMARASIYLA AYNI SATIRI PAYLAŞIR. Düz `100%` yazılırsa numara
       (20px + 8px boşluk) koda yer bırakmaz, kod ALT SATIRA düşer ve numara tek
       başına boş bir satırda kalır. `calc` ikisini tam olarak bir satıra oturtur;
       miktar ve sil düğmesi ikinci satıra sarar (istenen davranış). */
    .rd-lot-row .rd-lot-code { flex: 1 1 calc(100% - 28px); }
    .rd-lot-row .rd-lot-qty  { flex: 1 1 auto; }
    .rd-lot-no { align-self: center; }
    .rd-lot-del { min-width: 44px; min-height: 44px; }
    .rd-lot-add { min-height: 44px; }
    /* 🔴 `.rd-lot-btn`in telefon kuralı TEK YERDE (aşağıdaki "Lot alt-düzenleyicisi"
       mobil bloğunda, min-height 28px + yatay dolgu 12px). Burada ikinci bir kural
       vardı; aynı seçici + aynı breakpoint'te çakışıyor ve kaynak sırasıyla
       çözülüyordu — biri "temizlik" diye silindiğinde düğme sessizce dolgusuz
       kalırdı. Değer kaybolmadı, birleştirildi. */
}

/* ════════════════════════════════════════════════════════════════════════════
   TABLO YOĞUNLUĞU — "ekrana sığdır" geçişi (1.250.0)
   ────────────────────────────────────────────────────────────────────────────
   ÖLÇÜM (Chrome, 1280×900, cari tablosu):
     · satır yüksekliği 53px  → içeriğin kendisi 15px, geri kalanı dolgu + buton
     · aksiyon butonu 43×34px → SİMGE butonu, ama hap gibi basılıyordu
     · .icon-btn HİÇBİR YERDE TANIMLI DEĞİLDİ (6 modülde 26 kullanım) — yalnız
       #pkg-shell altındaki gece-modu kuralı vardı. Sınıf yok sayılınca buton
       .peron-btn'in 0 14px dolgusunu alıyor: 13px ikon + 28px boşluk = 43px.

   🔴 KAPSAM: yoğunluk kuralları (min-width:769px) ile SINIRLI. Mobil (≤768px)
   render yolu kendi bloğundan okunur — mobil blok `col-actions` düğmelerine
   `--tbl-ctl-h` verir.
   🔴 BU NOT 1.365.0'DA GÜNCELLENDİ: eskiden "mobil blok kendi 44px hedeflerini
      zaten veriyor" diyordu ve o artık YANLIŞ. 44px kullanıcının eşik tablosunu
      (yoğun yüzey ≥28) gereksiz aşıyordu ve iki düğme dar aksiyon kolonuna
      sığmadığı için satırı 101px'e fırlatıyordu. Bayat bir "ölçtüm" notu, bir
      sonraki geliştiricinin yanlış karar vermesi demektir — bu dosyanın kendi
      tekrarlayan dersi.
   Dosya SONUNDA duruyor: media query ÖZGÜLLÜK EKLEMEZ, sıra ile kazanılır.
   ════════════════════════════════════════════════════════════════════════════ */

/* Eksik sınıfın tanımı — simge butonu KARE olmalı. Yalnız ŞEKİL burada; ÖLÇÜ rejim
   başına aşağıda. 🔴 Genişliği burada (media dışında) vermek MOBİLİ GERİLETİRDİ:
   .icon-btn'in col-actions DIŞINDAKİ kullanımlarında (finance hesap kartı, tedarikçi
   satırı, ekstre modalı) buton doğal 43px genişlikteydi; 34px'e sabitlemek dokunma
   hedefini 44px kuralının altına indiriyordu. */
.peron-btn.icon-btn {
    padding: 0;
    flex: 0 0 auto;
    justify-content: center;
}
.peron-btn.icon-btn svg { width: 15px; height: 15px; }

/* Telefon/tablet: kare ve yoğunluk sözleşmesinden okunur (1.365.0'da 44px'ten indi —
   gerekçe mobil bloktaki nottadır: 44px satırı 101px'e fırlatıyordu). */
@media (max-width: 768px) {
    .peron-btn.icon-btn {
        width: var(--tbl-ctl-h); min-width: var(--tbl-ctl-h);
        height: var(--tbl-ctl-h); min-height: var(--tbl-ctl-h);
    }
    .peron-btn.icon-btn svg { width: 15px; height: 15px; }
}

/* ── Fare ile kullanılan masaüstü: sıkı yoğunluk ─────────────────────────── */
@media (min-width: 769px) and (pointer: fine) {
    .peron-table th { padding: 7px 10px; letter-spacing: .04em; }
    .peron-table td { padding: 6px 10px; }
    .peron-table--fixed > thead > tr > th { padding-left: 10px; padding-right: 10px; }

    /* Satır yüksekliğini içerik değil, satır içi buton belirliyordu (34px). */
    /* Yukseklik tablo yogunluk sozlesmesinden okunur — elle sayi yazilmaz. */
    .peron-table td.col-actions .peron-btn,
    .peron-table td.cell-actions .peron-btn,
    .peron-table td.td-actions .peron-btn { height: var(--tbl-ctl-h); }
    .peron-btn.icon-btn { width: var(--tbl-ctl-h); height: var(--tbl-ctl-h); }
    .peron-btn.icon-btn svg { width: 14px; height: 14px; }

    /* Aksiyon kolonundaki butonlar arası boşluk: 3 buton + 2 aralık = 92px.
       Hücre dolgusu 10px yerine 6px: 92 + 12 = 104px, kolon 108px → sığar
       (10px dolguyla 92 + 20 = 112 > 108 idi, 4px taşıyordu). */
    .peron-table td.col-actions > div,
    .peron-table td.cell-actions > div { gap: 4px; }
    .peron-table td.col-actions,
    .peron-table th.col-actions { padding-left: 6px; padding-right: 6px; }
}

/* ── Dokunmatik geniş ekran (tablet, dokunmatik dizüstü) ──────────────────── */
@media (min-width: 769px) and (pointer: coarse) {
    /* 🔴 min-* ŞART: yogunluk sozlesmesinin `.peron-table td .icon-btn { height }`
       kurali (0,3,3) buradaki `height`i (0,2,0) eziyordu → tablet/dokunmatik
       dizustunde buton 44x36'ya dusuyordu (olculdu 1024x768 touch). `height`
       farkli bir ozellik oldugu icin `min-height` kurtarir. */
    .peron-btn.icon-btn {
        width: var(--tbl-ctl-h); height: var(--tbl-ctl-h);
        min-width: var(--tbl-ctl-h); min-height: var(--tbl-ctl-h);
    }
    .peron-btn.icon-btn svg { width: 15px; height: 15px; }
    .peron-table td.col-actions .peron-btn,
    .peron-table td.cell-actions .peron-btn { min-width: var(--tbl-ctl-h); min-height: var(--tbl-ctl-h); }
    /* Telefonla AYNI bütçe (bkz. MOBİL SON SÖZ): 72 + 6 + 8 = 86 ≤ 88.
       6px dolgu burada da denendi ve 94 > 88 çıkıyordu — iki rejimde İKİ AYRI
       sayı tutmak, birinde çalışan hesabın ötekinde sessizce tutmaması demekti. */
    .peron-table td.col-actions,
    .peron-table th.col-actions { padding-left: 4px; padding-right: 4px; }
    .peron-table td.col-actions > div,
    .peron-table td.cell-actions > div { gap: 6px; }
    /* 🔴 SARMA KALDIRILMADI, EMNİYET SUBABI OLARAK KALDI. 1.365.0'da düğme 44 → 36px'e
       indi ve İKİ düğmelik yaygın durum artık yan yana sığıyor (76+12 = 88 ≤ 88px kolon),
       yani kasadaki 44 ↔ 101px zıplaması biter. Ama ÜÇ ve daha çok düğmeli tablolar
       (fatura listesi 5 düğme: 5×36 + 4×4 = 196px) hiçbir makul kolon genişliğine
       sığmaz; orada sarma TEK doğru davranıştır — kaldırılsaydı taşma SOLA, komşu
       kolonun üstüne binerdi (1.288.0'da ölçülmüştü). */
    .peron-table--fixed td.col-actions > div,
    .peron-table td.col-actions > div,
    .peron-table td.cell-actions > div { flex-wrap: wrap; row-gap: 4px; justify-content: flex-end; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   URETIM TAKIBI — HER EKRANA SIGAN TABLO + DIKEY YOGUNLUK  (1.251.0)
   ═══════════════════════════════════════════════════════════════════════════
   ÖLÇÜLDÜ (Chrome, gerçek veri) — ekran genişliği → tablo kabının iç genişliği:
       1920→1618 · 1600→1298 · 1440→1318 · 1366→1244 · 1280→1148 · 1024→892 · 768→730
   (1600'de kenar çubuğu 240px'e AÇILDIĞI için alan 1440'takinden DARDIR — bu yüzden
    kırılma noktaları ekran genişliğine değil, ölçülen kap genişliğine göre seçildi.)

   SORUN: tablo 12 kolonla sabit 1261px idi → 1366'da 17px, 1280'de 113px, 1024'te
   369px yatay kayma. Kaydırınca 249px'lik YAPIŞKAN "İşlemler" kolonu alttaki dört
   kolonun (Öncelik/Aşama/Planlanan/Termin) üzerinde durduğu için ekran "her şey
   birbirine girmiş" görünüyordu.

   ÇÖZÜM: ikincil kolonlar daralan ekranda SIRAYLA düşer → tablo HER ZAMAN sığar,
   yapışkan kolonun örtecek bir şeyi kalmaz. Düşme sırası (en az kritik önce):
       Sip. Tarihi → Öncelik → Planlanan → Müşteri → Termin → seçim kutusu
   Düşen bilgi kaybolmaz: satırı açınca modül tablosunda ve satır ipucunda durur.

   🔴 th/td'yi display:none yapmak tabloyu DARALTMAZ (ölçüldü: 1261→1261).
      Daraltan tek şey <col>'un visibility:collapse edilmesidir (1261→1165).
      Bu yüzden gizleme kuralı hücreye değil <col>'a yazılır.
   🔴 Kolon düşürme rejimi POINTER'a bağlı DEĞİL: 1024px'lik bir tablet de dar.
      Yalnız YAZI KÜÇÜLTME (pointer:fine) ile sınırlıdır — dokunmatikte 16px altına
      inen alan iOS'ta sayfayı büyütür.
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══ 1.311.0 — ÜRETİM TAKİBİ LİSTESİ: YAZI 1 PUNTO KÜÇÜLDÜ ═══════════════════
   Kullanıcı: "üretim takibi listesindeki yazı karakterlerini 1 punto düşür, ekrana
   olabildiğince çok bilgi sığmasını sağla."

   1 punto = 1/72 inç = 96dpi'da 1,333px. Masaüstü-fare rejimindeki yoğunluk
   sözleşmesi 12px (9pt) gövde kullanıyordu; bir punto aşağısı 10,67px'tir ve
   tasarım dizgesinde zaten var olan 10,5px'e (7,88pt) yuvarlandı. Başlık/rozet/kod
   da aynı miktarda indi ki hiyerarşi korunsun (gövde > başlık farkı sabit kaldı).

   🔴 GLOBAL `--tbl-fs` DEĞİŞTİRİLMEDİ. O token satınalma, siparişler, cari, stok…
      hepsini birden taşır ve yoğunluk sözleşmesinde "DEĞİŞTİRİLMEZ" diye işaretli.
      Kullanıcı yalnız ÜRETİM TAKİBİ listesini istedi → kapsam `#prod-shell`.
      Özel özellikler kalıtsaldır, bu yüzden kabuğa yazmak tablonun tamamını
      (akordiyon içindeki modül tablosu dahil) tek yerden indirir.

   🔴 REJİM `(pointer: fine)` — DOKUNMATİK DIŞARIDA. Telefon/tablette gövde tabanı
      13px'tir ve hücre içi girdiler 16px'te kalmak ZORUNDADIR (iOS Safari 16px
      altına odaklanınca sayfayı büyütür ve geri küçültmez). Mobil kural masaüstü
      isteğinin önündedir.

   🔴 ÖLÇÜLDÜ (1366px, kap 1064px, gerçek yazı ailesi). Kolon genişlikleri AYNI
      kaldı; küçülen yazı sayesinde kırpılan üç kolonda daha çok karakter görünüyor:
        Firma   ihtiyaç 186→166px → 136px kolonda %73 → %82 görünür
        Müşteri ihtiyaç 155→138px → 110px kolonda %71 → %80 görünür
        Ürün    ihtiyaç 178→158px → 146px kolonda %82 → %92 görünür
      Kolon bütçesi bu turda DEĞİŞTİRİLMEDİ. Aşama/Planlanan/Termin hücreleri metinle
      değil ROZET + İKON ile ölçülüyor (gecikmiş termin uyarı üçgeni ekler); ölçüm
      boş görünen payın bir kısmının gerçek olmadığını gösterdi, yeniden bütçeleme
      gerçek veriyle ayrı bir ölçüm turu ister. */
@media (min-width: 769px) and (pointer: fine) {
    #prod-shell {
        --tbl-fs:       10.5px;
        --tbl-head-fs:   9.5px;
        --tbl-badge-fs:  9.5px;
        --tbl-code-fs:   9.5px;
        --tbl-ctl-fs:   10.5px;
    }
    /* Durum kısayolu <select>: satır-içi font-size:12px JS'ten kaldırıldı (iOS odak-zoom).
       Masaüstü değeri bit bit korunsun diye buraya taşındı; telefonda --tbl-ctl-fs 16px kalır. */
    .peron-table > tbody > tr > td select.po-status-quick { font-size: 12px; }
}

/* TABAN GENİŞLİKLER — toplam 1287px (11 kolon; Miktar KALDIRILDI).
   🔴 Toplam, EN DAR masaüstü kabına göre seçilir: 1600px ekranda kenar çubuğu 240px'e
      AÇILDIĞI için kap 1298'dir (1440'taki 1318'den DAR). Toplam 1309 iken 1600/1150/
      1024'te yatay kayma geri gelmişti — Firma 140→136, Müşteri 116→110, Ürün 158→146
      ile 1287'ye indirildi (kırpılabilir üç kolon, hepsi col-ellip + ipucu).
   1.251.1'de kolon içeriği YENİDEN ÖLÇÜLDÜ (1366px, gerçek veri). Ölçülen en geniş
   içerik / mevcut genişlik:
       Sipariş No 189/162 · Firma 140/88 · Müşteri 98/80 · Ürün 153/100
   Yani Firma, Müşteri ve Ürün kırpılıyordu; Miktar (76px) ise içeriğine tam oturuyordu
   ama zaten akordiyon içindeki modül tablosunda tekrar ediyordu → KALDIRILDI.
   Boşalan 76px + Sipariş No'dan alınan 22px, kırpılan üç kolona dağıtıldı. */
#prod-shell .prod-acc-table col.pc-check   { width: 32px; }
#prod-shell .prod-acc-table col.pc-order   { width: 140px; }
#prod-shell .prod-acc-table col.pc-odate   { width: 96px; }
#prod-shell .prod-acc-table col.pc-firma   { width: 136px; }
#prod-shell .prod-acc-table col.pc-musteri { width: 110px; }
#prod-shell .prod-acc-table col.pc-urun    { width: 146px; }
#prod-shell .prod-acc-table col.pc-prio    { width: 82px; }
#prod-shell .prod-acc-table col.pc-stage   { width: 131px; }
#prod-shell .prod-acc-table col.pc-plan    { width: 86px; }
#prod-shell .prod-acc-table col.pc-due     { width: 96px; }
#prod-shell .prod-acc-table col.pc-act     { width: 232px; }
/* Sipariş No 162→140: uzun birleşik kodlar (US-20260629-0008-10-…) kırpılır,
   tam metin hücre ipucunda durur. (Kod rozetini 9.5px'e küçülten bir kural yazılmıştı
   ama ölçüldü: yoğunluk bloğundaki `> tbody > tr > td .user-code {10.5px}` daha ÖZGÜL
   olduğu için hiç uygulanmıyordu — ölü kural kaldırıldı, yazı 10.5px kalır.) */

/* ══ KOLON DÜŞÜRME — EKRAN DEĞİL KAP GENİŞLİĞİ (1.380.0) ═══════════════════════
   🔴 ÖNCEKİ EŞİKLER EKRAN genişliğine (`@media`) bağlıydı ve "1440'ta kap 1318"
      VARSAYIYORDU. Tasarım denetimi ÖLÇTÜ: kenar çubuğu AÇIKKEN (240px, varsayılan
      giriş) + sağdaki çekmece şeridiyle 1440px'te kap **1138px**. Tablo 1287px'te
      kalıyor, yapışkan İşlemler kolonu Planlanan/Termin'in ÜSTÜNE 53px biniyordu.
      Aynı ekran genişliği kenar çubuğu açık/kapalıyken ~180px farklı kap verir —
      doğru soru "ekran kaç px" değil "TABLONUN KABI kaç px".
   🔴 Artık `@container prodkap` (kap = `.prod-tbl-kap`, peron-mod-production.js).
      Eşik = o adımda kalan kolonların TOPLAMI: tablo kabından büyük olduğu an
      bir sonraki kolon düşer. Adımlar (toplam): 1287 → −Sip.Tarihi 1191 →
      −Öncelik 1109 → −Planlanan 1023 → −Müşteri 913 → −Termin & Sip.No 118 → 795
      → Ürün 96 · Firma 104 · İşlemler 190 → 671. Altında tablo KENDİ kabında kayar.
   🔴 Düşen kolonun HÜCRESİ de gizlenir (`visibility:hidden; overflow:hidden`):
      `visibility:collapse` kolonu 0px yapıyor ama içerik ÇİZİLMEYE devam ediyordu —
      "Normal" öncelik rozeti "Tamamlandı" çipinin üstüne biniyordu (ölçüldü 1280/1024).
   Düşen bilgiler akordiyonda (modül tablosu: Termin) ve satır ipucunda durur. */
#prod-shell .prod-tbl-kap { container: prodkap / inline-size; }
@container prodkap (max-width: 1286px) {
    #prod-shell .prod-acc-table col.pc-odate { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table > thead > tr > th:nth-child(3),
    #prod-shell .prod-acc-table > tbody > tr > td:nth-child(3) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
@container prodkap (max-width: 1190px) {
    #prod-shell .prod-acc-table col.pc-prio { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table > thead > tr > th:nth-child(7),
    #prod-shell .prod-acc-table > tbody > tr > td:nth-child(7) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
@container prodkap (max-width: 1108px) {
    #prod-shell .prod-acc-table col.pc-plan { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table > thead > tr > th:nth-child(9),
    #prod-shell .prod-acc-table > tbody > tr > td:nth-child(9) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
@container prodkap (max-width: 1022px) {
    #prod-shell .prod-acc-table col.pc-musteri { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table > thead > tr > th:nth-child(5),
    #prod-shell .prod-acc-table > tbody > tr > td:nth-child(5) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
/* 🔴 Simge KÜÇÜLTME yalnız fare rejiminde (dokunmatikte hedef eşiği korunur). */
@media (pointer: fine) {
    @container prodkap (max-width: 1022px) {
        #prod-shell .prod-acc-table col.pc-act { width: 214px; }
        #prod-shell td.col-actions .peron-btn.sm { min-width: 23px; padding: 0 3px; }
        #prod-shell td.col-actions .peron-btn.sm svg { width: 14px; height: 14px; }
        #prod-shell td.col-actions > div { gap: 2px; }
    }
    @container prodkap (max-width: 794px) {
        #prod-shell td.col-actions .peron-btn.sm { min-width: 20px; padding: 0 2px; }
        #prod-shell td.col-actions .peron-btn.sm svg { width: 13px; height: 13px; }
    }
}
@container prodkap (max-width: 912px) {
    #prod-shell .prod-acc-table col.pc-due { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table > thead > tr > th:nth-child(10),
    #prod-shell .prod-acc-table > tbody > tr > td:nth-child(10) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #prod-shell .prod-acc-table col.pc-order { width: 118px; }
}
@container prodkap (max-width: 794px) {
    #prod-shell .prod-acc-table col.pc-urun  { width: 96px; }
    #prod-shell .prod-acc-table col.pc-firma { width: 104px; }
    #prod-shell .prod-acc-table col.pc-act  { width: 190px; }
}

/* ══ BİTİŞ KOLONU — Tamamlandı / Sevk Edildi sekmesi (1.393.1) ═══════════════════
   Kullanıcı: "tamamlanan bölümünde tamamlanma tarihi yok, ilave et; sevk kısmında da
   sevk tarihi gözüksün". 11. kolon (Termin ile İşlemler arası) DOM'da hep durur ve
   yalnız tabloda `prod-acc-table--bt` varken açılır (peron-mod-production.js →
   tarihAlaniIpucu). Kapalıyken yukarıdaki düşen kolonlarla AYNI teknik: col collapse +
   hücre gizli; yukarıdaki nth-child sayıları (3·5·7·9·10) kaymaz.
   🔴 Açıkken tablo 86px büyür (1287 → 1373) → aynı merdiven 86px ERKEN işler:
      1373 → −Sip.Tarihi 1277 → −Öncelik 1195 → −Planlanan 1109 → −Müşteri 999 →
      −Termin & Sip.No 118 → 881 → Ürün 96 · Firma 104 · İşlemler 190 → 757.
      Bitiş kolonu DÜŞMEZ (sekmenin var oluş sebebi); 757 altında tablo kabında kayar.
   🔴 SIRA ÖNEMLİ: aşağıdaki `pc-act` kuralları eşit özgüllükte; 190'lık adım 214'lük
      (fare) adımından SONRA yazılı olmalı. */
#prod-shell .prod-acc-table col.pc-bitis { width: 86px; }
#prod-shell .prod-acc-table:not(.prod-acc-table--bt) col.pc-bitis { visibility: collapse; width: 0; }
#prod-shell .prod-acc-table:not(.prod-acc-table--bt) > thead > tr > th:nth-child(11),
#prod-shell .prod-acc-table:not(.prod-acc-table--bt) > tbody > tr > td:nth-child(11) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
#prod-shell .prod-acc-table > tbody > tr > td.prod-bitis-t { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@container prodkap (max-width: 1372px) {
    #prod-shell .prod-acc-table--bt col.pc-odate { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table--bt > thead > tr > th:nth-child(3),
    #prod-shell .prod-acc-table--bt > tbody > tr > td:nth-child(3) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
@container prodkap (max-width: 1276px) {
    #prod-shell .prod-acc-table--bt col.pc-prio { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table--bt > thead > tr > th:nth-child(7),
    #prod-shell .prod-acc-table--bt > tbody > tr > td:nth-child(7) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
@container prodkap (max-width: 1194px) {
    #prod-shell .prod-acc-table--bt col.pc-plan { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table--bt > thead > tr > th:nth-child(9),
    #prod-shell .prod-acc-table--bt > tbody > tr > td:nth-child(9) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
@container prodkap (max-width: 1108px) {
    #prod-shell .prod-acc-table--bt col.pc-musteri { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table--bt > thead > tr > th:nth-child(5),
    #prod-shell .prod-acc-table--bt > tbody > tr > td:nth-child(5) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
}
@media (pointer: fine) {
    @container prodkap (max-width: 1108px) {
        #prod-shell .prod-acc-table--bt col.pc-act { width: 214px; }
        #prod-shell .prod-acc-table--bt td.col-actions .peron-btn.sm { min-width: 23px; padding: 0 3px; }
        #prod-shell .prod-acc-table--bt td.col-actions .peron-btn.sm svg { width: 14px; height: 14px; }
        #prod-shell .prod-acc-table--bt td.col-actions > div { gap: 2px; }
    }
    @container prodkap (max-width: 880px) {
        #prod-shell .prod-acc-table--bt td.col-actions .peron-btn.sm { min-width: 20px; padding: 0 2px; }
        #prod-shell .prod-acc-table--bt td.col-actions .peron-btn.sm svg { width: 13px; height: 13px; }
    }
}
@container prodkap (max-width: 998px) {
    #prod-shell .prod-acc-table--bt col.pc-due { visibility: collapse; width: 0; }
    #prod-shell .prod-acc-table--bt > thead > tr > th:nth-child(10),
    #prod-shell .prod-acc-table--bt > tbody > tr > td:nth-child(10) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #prod-shell .prod-acc-table--bt col.pc-order { width: 118px; }
}
@container prodkap (max-width: 880px) {
    #prod-shell .prod-acc-table--bt col.pc-urun  { width: 96px; }
    #prod-shell .prod-acc-table--bt col.pc-firma { width: 104px; }
    #prod-shell .prod-acc-table--bt col.pc-act  { width: 190px; }
}

/* ── DİKEY YOĞUNLUK ─────────────────────────────────────────────────────────
   ÖLÇÜLDÜ (1366): sayfa başlığı 42 + aşama kartları 168 + araç çubuğu 36 = tablo
   y=365'te başlıyordu, 820px yükseklikte yalnız 7 satır görünüyordu.
   Aşama kartları 9 adet ve 165px'lik ızgara yüzünden 1366'da İKİ SIRAYA taşıyordu.
   Kart 78→54px ve ızgara 165→132px: 1366'da TEK sıraya iner (168→54).
   Kurallar #prod-shell ile sınırlı — .peron-filter-grid/.peron-filter-card GLOBAL
   sınıflar, sipariş/satınalma/stok ekranlarında da kullanılıyor, onlar DEĞİŞMEZ. */
#prod-shell .peron-filter-grid {
    /* 112px ÖLÇÜLEREK seçildi. 9 aşama kartı TEK sıraya insin diye eşik en dar
       masaüstünden geri hesaplandı: 1280'de ızgara 1158px → 9x112 + 8x8 = 1072 ≤ 1158 ✓.
       132px'te 1280'de 8 sütuna, 126px'te yine 8 sütuna düşüp filtre şeridi 116px
       oluyordu (ölçüldü). 1024 ve altında 2 sıraya inmesi kabul — orada dikey yer var. */
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
#prod-shell .peron-filter-card {
    min-height: 54px;
    /* Dolgu 10→8 ve ikon 30→26: etiket için kalan genişlik 63→80px.
       Ölçüldü: 63px'te BEKLEMEDE/AMBALAJDA/TAMAMLANDI kelime ORTASINDAN bölünüp
       iki satıra düşüyordu ("BEKLEMED / E"). 80px'te dördü de tek satır. */
    padding: 8px 8px;
    gap: 7px;
}
#prod-shell .peron-filter-card::before { height: 30px; }
#prod-shell .peron-filter-card .stat-icon { width: 26px; height: 26px; border-radius: 8px; }
#prod-shell .peron-filter-card .stat-icon svg { width: 14px; height: 14px; }
#prod-shell .ffc-label {
    /* 9px + harf aralığı 0: "TAMAMLANDI" (en uzun etiket) 67→63px, kartta kalan
       69px'e sığar. 9.5px'te kelime kırpılıp "TAMAMLAN…" görünüyordu. */
    font-size: 9px;
    margin-bottom: 2px;
    letter-spacing: 0;
    /* Paylaşılan .stat-label'daki overflow-wrap:anywhere kelimeyi ortadan kırıyordu;
       burada yalnız BOŞLUKTAN sarsın ("Plana Alındı" iki satır, diğerleri tek). */
    word-break: keep-all;
    overflow-wrap: normal;
}
/* 🔴 17px → 14px (1.336.0). Takım hanesi 2→3 çıkınca kartın sayı alanı YETMEDİ.
   ÖLÇÜLDÜ (1280px, kart 114,5px · sayı alanı 65,5px):
     17px  "560,504" 73,8px → KIRPILIYOR   ·  15px 64,2px (pay 1,3px — çok ince)
     14px  "560,504" 59,7px → SIĞAR (pay 5,8px)  ·  kart yüksekliği 56px'te KALDI
   🔴 KART BÜYÜTÜLMEDİ, YAZI KÜÇÜLDÜ — kullanıcı kuralı: *"büyütme bişeyi … mümkün
      olduğunda sayfaya yazıları sığdır küçült"*. Hiyerarşi korunuyor: 9 / 14 / 9.
   🔴 SINIR (1.336.0'dan ÖNCE DE VARDI): ≥1000 takımda "1.234,125" 75px sürüyor ve
      hiçbir okunur puntoda sığmıyor; 2 hanede de ("1.234,13") kırpılıyordu. Bu kartın
      kendi ölçüm turu ister, hane değişikliğinin işi değil. */
/* 🔴 14px → 12px (1.338.0). Takım hanesi 3 → 4 çıktı (aynı oturumdaki iki modül
   0,188 / 0,187 görünüyordu; 1,5÷8 = 0,1875 DÖRT hane ister). Sayı bir karakter
   daha uzadı: "571,5127" 8 karakter.
   ÖLÇÜLDÜ (1280px, sayı alanı 65,5px):
     14px 70,6px KIRPIYOR · 13px 64,7px (pay 0,8px — çok ince) · 12px 59,5px (pay 6,0px)
   🔴 KART BÜYÜTÜLMEDİ, YAZI KÜÇÜLDÜ. Hiyerarşi 9 / 12 / 9'a indi — ince ama duruyor;
      alternatifi sayıyı KIRPMAKTI ve kırpılmış sayı yanlış sayıdır. */
#prod-shell .ffc-value { font-size: 12px; letter-spacing: -0.3px; }
/* Modül adedi: takım adedinin ALTINDA, belirgin şekilde DAHA KÜÇÜK (17px → 9px).
   Kart yüksekliği 54px'te kalsın diye satır aralığı sıkı; kartın tasarımı değişmez. */
#prod-shell .ffc-sub {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Satır sıklığı — yalnız FARE rejiminde küçültülür (dokunmatikte hedefler korunur).
   Alt sınır 769: uygulamanın kendi mobil rejimi max-width:768 ile başlıyor, orada
   dokunma hedefleri 44px'e çıkar ve bu blok girmemeli. */
@media (min-width: 769px) and (pointer: fine) {
    /* 🔴 Seçici `tr.prod-grp-row > td` OLMAK ZORUNDA. Dosyanın başında (:3655-3656)
       `#prod-shell .prod-acc-table tr.prod-grp-row > td { padding:6px; font-size:12px }`
       var ve özgüllüğü (1 id + 2 sınıf + 2 eleman) buradaki `> tbody > tr > td`
       yazımından (1 id + 1 sınıf + 3 eleman) YÜKSEK. Ölçüldü: yoğunluk kuralı
       DOSYA SONUNDA olmasına rağmen hiç uygulanmıyordu (td 6px/12px kalıyordu). */
    /* 🔴 Dolgu/yazi boyu/rozet/buton yuksekligi KALDIRILDI — hepsi artik tablo
       yogunluk sozlesmesinden (--tbl-* token'lari) geliyor. Burada yalnizca bu
       ekrana OZGU olan (asama hucresi/ilerleme cubugu) kurallar kalir. */
    #prod-shell td.col-actions .peron-btn.sm svg { width: 14px; height: 14px; }
    /* Aşama hücresi satırı 39'dan 67px'e çıkarıyordu (ölçüldü). İki nedeni vardı:
       (1) çipin İÇ span'i white-space:normal olduğu için metin İKİ satıra sarıyordu,
       (2) çip + ilerleme çubuğu alt alta ve ikisi de gereğinden yüksekti.
       Ölçüm: çip 34→14, çubuk 18→12, satır 67→41 (diğer satırlar 39) → sıra hizalı. */
    #prod-shell .prod-stage-cell { gap: 2px; }
    #prod-shell .prod-stage-cell .prod-phase-pill { padding: 0 6px; font-size: 9.5px; line-height: 1.5; }
    #prod-shell .prod-stage-cell .prod-phase-pill svg { width: 9px; height: 9px; }
    #prod-shell .prod-stage-cell .peron-prog { gap: 5px; }
    #prod-shell .prod-stage-cell .peron-prog-pct { font-size: 10px; line-height: 1.2; }
    #prod-shell .prod-stage-cell .peron-prog-bar { height: 5px; }
}

/* 🔴 Bu iki kural POINTER'dan BAĞIMSIZ: çipin iç span'i white-space:normal olduğu
   için metin dokunmatikte de iki satıra sarıyor ve satırı ikiye katlıyordu.
   Kırpma her yerde geçerli; yalnız KÜÇÜLTME fare rejiminde (yukarıdaki blokta). */
#prod-shell .prod-stage-cell .prod-phase-pill > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#prod-shell .prod-stage-cell .prod-phase-pill { max-width: 100%; }

/* ── DURUM ANALİZİ açılır kutucuk paneli ──────────────────────────────────── */
#prod-shell .prod-da { position: relative; flex-shrink: 0; }
#prod-shell .prod-da-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 168px; text-align: left; cursor: pointer;
}
/* Açılır ok — .peron-select'in kendi oku arka plan görseli olduğu için burada tekrar
   çizilmez; buton zaten .peron-select sınıfını taşıyor ve okunu ondan alır. */
#prod-shell .prod-da-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    min-width: 220px; max-width: min(280px, 92vw);
    /* 8 durum + başlık + açıklama = ~380px (ölçüldü: 340px'te alt açıklama kırpılıyordu).
       Durum sayısı artabileceği için yine kaydırmalı, ama tipik listede kırpma yok. */
    max-height: min(440px, 72vh); overflow: auto;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 14px 32px -12px rgba(27, 37, 51, .28);
    padding: 4px;
}
#prod-shell .prod-da-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: 7px; cursor: pointer;
    font-size: 12px; color: var(--text-primary);
    -webkit-user-select: none; user-select: none;   /* iOS Safari öneki şart */
}
#prod-shell .prod-da-item:hover { background: var(--pri-light); }
#prod-shell .prod-da-item input { width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }
#prod-shell .prod-da-all { font-weight: 700; }
#prod-shell .prod-da-head { border-bottom: 1px solid var(--border); margin-bottom: 3px; padding-bottom: 3px; }
#prod-shell .prod-da-foot {
    border-top: 1px solid var(--border); margin-top: 3px; padding: 6px 8px 2px;
    font-size: 10.5px; line-height: 1.35; color: var(--text-muted);
}
/* Dokunmatikte hedefler 44px — kural gereği. */
@media (pointer: coarse) {
    #prod-shell .prod-da-btn { min-height: 44px; }
    #prod-shell .prod-da-item { min-height: 44px; padding: 10px 8px; }
    #prod-shell .prod-da-item input { width: 20px; height: 20px; }
}

/* Sayfa başlığındaki düğmeler dokunmatikte 42px ölçüldü (kural 44). Yalnız bu ekran
   için düzeltilir — .peron-page-header tüm modüllerde ortak, global değiştirilmez. */
@media (pointer: coarse) {
    #prod-shell .peron-page-header .peron-btn { min-height: 44px; }
}

/* ── TERMİN kolonu: geciken tarih ALT SATIRA TAŞIYORDU ─────────────────────
   Ölçüldü (1366): hücre 72px, yatay dolgu 20 → kullanılabilir 52px. İçerik
   "04.08.2026" 51px + boşluk 4 + gecikme simgesi 12 = 67px → sarıyor ve SATIR
   31px'ten 43px'e çıkıyordu. Kolon 96px'e (67 + 20 dolgu + 9 pay) çıkarıldı ve
   sarma KAPATILDI: içerik uzasa bile satır yüksekliği artık sabit kalır.
   Alınan yer: İşlemler 249→232 (simge 26→25px, boşluk 3→2, dolgu 10→6 ile
   8 düğmeli en kötü satır 226px'e sığar) + Öncelik 89→82 (içerik 59+20=79). */
#prod-shell .prod-acc-table > tbody > tr > td:nth-child(10),
#prod-shell .prod-acc-table > thead > tr > th:nth-child(10) { white-space: nowrap; }
#prod-shell .prod-acc-table > tbody > tr > td:nth-child(10) > span { white-space: nowrap; }
@media (min-width: 769px) and (pointer: fine) {
    #prod-shell td.col-actions { padding-left: 6px; padding-right: 6px; }
    #prod-shell td.col-actions > div { gap: 2px; }
    #prod-shell td.col-actions .peron-btn.sm { min-width: 25px; }
}

/* Tarih aralığının HANGİ tarihi süzdüğünü söyleyen etiket. Aşama sekmesine göre
   sunucu tarafında değişiyor; kullanıcı ne süzdüğünü görmeden tahmin etmesin. */
#prod-shell .prod-date-hint {
    flex: 0 0 auto;
    align-self: center;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-muted);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Etiket + tarih kutuları TEK parça sarsın: etiket üstte, kutular altında kalırsa
   hangi tarihi süzdüğü kopuk görünüyordu (ölçüldü: 1366'da etiket 1. satırda,
   kutular 2. satırda kalıyordu). */
#prod-shell .prod-date-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 0 0 auto;
}
/* 🔴 DAR EKRANDA BLOK KÜÇÜLEBİLMELİ (1.310.0 — denetim bulgusu). `flex: 0 0 auto`
   kutuyu doğal genişliğinde DONDURUYOR; 320px'te doğal genişlik 328px olduğu için
   blok viewport'u aşıyor ve sessizce kırpılıyordu. Tam satır kaplayıp içeride
   bölüşmesi hem taşmayı bitirir hem iki kutuyu eşitler. */
@media (max-width: 640px) {
    #prod-shell .prod-date-wrap { flex: 1 1 100%; min-width: 0; }
    #prod-shell .prod-date-wrap .peron-daterange { min-width: 0; }
}

/* ═══ 1.311.0 — SÜZGEÇ ÇUBUĞU: KUTULAR İÇERİĞİ KADAR, ARTAN TARİHE ═════════════
   Kullanıcı: "tarih filtresi 'durum analiz' filtresinin altında kalmış; müşteri,
   sipariş türü, öncelik filtrelerini içindeki yazılara göre sıfırla, kalan boşluğu
   bu kısma ata."

   🔴🔴 1.310.0'DAKİ İKİ ÖLÇÜLMÜŞ HATA — İKİSİ DE BURADA KAPANIYOR:

   1) EŞİK TUZAĞI. Tek satır kuralı `@media (min-width: 1300px)` ile açılıyordu ve
      medya sorgusu PENCEREYE bakar, çubuğun oturduğu KABA değil. Kap = pencere − 284
      (sol menü 240 + dolgu 44); menü "mini" iken −104. Yani AYNI pencere genişliğinde
      kap 180px oynuyor ve tek bir eşik ikisini birden doğru anlatamıyor. Ölçüldü
      (1280px pencere, kap 996): kural kapalı olduğu için kutular varsayılan
      ölçülerine dönüyordu (arama 300 · select 120-155 · tarih 300 = 1675px) →
      çubuk ÜÇ SATIRA düşüyor ve tarih bloğu ikinci satırda "Durum Analizi"nin
      ALTINDA kalıyordu. Kullanıcının bildirdiği kusur tam olarak budur.
      ÇÖZÜM: eşik KALDIRILDI. `flex-basis` her kutunun ASGARİ ölçüsüne eşitlendi;
      taban toplamı 917px + 9×4px boşluk = **953px**. Flex, satıra sığdırmayı KABIN
      genişliğine göre yapar — pencereye değil. Böylece mini menü de, geniş ekran da,
      dar ekran da kendiliğinden doğru davranır.
      🔴 ÖLÇÜLEN EŞİK, TABAN TOPLAMININ TA KENDİSİ: kap 953px → TEK satır,
         952px → iki satır (tasarım denetimi gerçek pencereyle doğruladı:
         pencere 1258 → kap 960 → 1 satır · pencere 1250 → kap 952 → 2 satır).
      🔴🔴 KAP = PENCERE − 298 (menü açık) / − 118 (menü mini). Dolgu SİMETRİK DEĞİL:
         `.peron-content { padding: 16px 38px 16px 20px }` (bu dosyada satır ~3566) →
         yatay dolgu 58px, 44px DEĞİL. İlk turda 44px varsayıp kap etiketlerimi 14px
         DAR yazmıştım; sözleşme yine güvenli taraftaydı ama rakamlar yanlıştı.
         Pencere karşılığı: menü açıkken ≥1251px, mini menüde ≥1071px tek satır.
        kap < 953 → iki satıra SARAR (taşma yok, kırpma yok) — sarmak kırpmaktan iyidir.

   2) DURUM ANALİZİ DÜĞMESİ KABINDAN TAŞIYORDU. `#prod-shell .prod-da-btn` tabanda
      `min-width: 168px` taşıyor; 1.310.0 bloğu düğmenin genişliğini ayarlıyor ama bu
      asgariyi SIFIRLAMIYORDU. `> * { min-width: 0 }` yalnız çubuğun DOĞRUDAN
      çocuklarına (`.prod-da`) işler, içindeki düğmeye değil. Ölçüldü: kap 84px'lik
      `.prod-da` içinde düğme 168px → 84px taşma, komşu tarih bloğunun üstüne biniyordu.
      Aşağıda düğmeye açıkça `min-width: 0` verildi.

   KUTU ÖLÇÜLERİ NEREDEN GELİYOR (11px yazıda, en uzun SEÇENEK + dolgu ölçülerek):
     Müşteri "Cari atanmamış" 102.9 → 107   · Sipariş türü "Standart sipariş" 102.4 → 107
     Öncelik "Normal" 64.2 → 69             · Kayıt "1000 / sayfa" 86.7 → 90
     (İlk yazımda tam ölçüye yazılmıştı; pay 1,1-1,8px kalıyordu — yazı işleme
      makineye/yakınlaştırmaya göre oynayabildiği için her birine +3px emniyet verildi.)
     Durum "Durum: Tümü" 95 → 98
   Bu beşi SABİT seçenek kümesine sahip; ölçüleri içeriğine KİLİTLENDİ (`flex-grow: 0`)
   — kullanıcının "içindeki yazılara göre sıfırla" dediği şey budur. Kategori, Plan ve
   Sıralama seçenekleri SUNUCUDAN gelir (uzunluğu bilinmez): onlara asgari bir taban +
   üst sınır verilip aradaki payı büyümeyle almaları sağlandı, aşarsa `title` taşır.
   Artan boşluğun ASLAN PAYI tarih bloğuna gider (grow 3; arama 2) — ölçülen sonuç:
     kap  960 → tarih 174px  ·  996 → 189  ·  1082 → 226  ·  1156 → 258  ·  1348 → 300 (tavan)

   🔴 Telefon/tabletde çubuk ESKİSİ GİBİ SARAR: 10 kontrolü 360px'e tek satıra
      sıkıştırmak her birini 30px'e indirirdi — dokunma hedefi (≥44px) ve okunabilirlik
      (input ≥16px, iOS zoom kalkanı) kuralları birden ihlal olurdu. Bu yüzden blok
      `(min-width: 769px) and (pointer: fine)` rejimindedir; mobil kural masaüstü
      isteğinin ÖNÜNDE gelir.
   🔴 Satır içi `style="gap:8px"` JS'ten KALDIRILDI — satır içi stil medya sorgusunu
      koşulsuz ezer (bu dosyada belgelenmiş tuzak); aksi hâlde buradaki `gap:4px`
      hiçbir zaman uygulanmazdı. */
@media (min-width: 769px) and (pointer: fine) {
    #prod-shell .peron-toolbar--tek {
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
    }
    #prod-shell .peron-toolbar--tek > * { min-width: 0; }

    /* Ortak kutu biçimi — ölçüler aşağıda tek tek verilir. */
    #prod-shell .peron-toolbar--tek .peron-select,
    #prod-shell .peron-toolbar--tek .prod-da-btn {
        width: auto;
        height: 34px;
        font-size: 11px;
        padding: 0 19px 0 7px;
        background-position: right 3px center;
        background-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* SABİT seçenekli süzgeçler: genişlik = en uzun seçenek. Büyümez, küçülmez —
       hiçbir genişlikte kırpmazlar. */
    #prod-shell .peron-toolbar--tek #prod-musteri-tipi    { flex: 0 0 107px; max-width: 107px; }
    #prod-shell .peron-toolbar--tek #prod-siparis-turu    { flex: 0 0 107px; max-width: 107px; }
    #prod-shell .peron-toolbar--tek #prod-priority-filter { flex: 0 0  69px; max-width:  69px; }
    #prod-shell .peron-toolbar--tek #prod-perpage         { flex: 0 0  90px; max-width:  90px; }

    /* SUNUCUDAN gelen seçenekli süzgeçler: taban dar, boşluk varsa büyürler. */
    #prod-shell .peron-toolbar--tek #prod-category  { flex: 0.6 1 58px; max-width: 121px; }
    #prod-shell .peron-toolbar--tek #prod-plan-week { flex: 0.6 1 54px; max-width: 143px; }
    #prod-shell .peron-toolbar--tek #prod-sort      { flex: 0.8 1 70px; max-width: 134px; }

    /* 🔴 min-width: 0 ŞART — taban kural düğmeye 168px asgari veriyor (bkz. yukarıdaki
       2 numaralı bulgu); sıfırlanmazsa düğme kabından taşıp tarih bloğuna biner. */
    #prod-shell .peron-toolbar--tek .prod-da { flex: 0 0 98px; max-width: 98px; }
    #prod-shell .peron-toolbar--tek .prod-da-btn {
        display: flex;
        gap: 3px;
        width: 100%;
        min-width: 0;
    }
    #prod-shell .peron-toolbar--tek .prod-da-btn > span {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    #prod-shell .peron-toolbar--tek .peron-search {
        flex: 2 1 92px;
        width: auto;
        max-width: 300px;
    }
    #prod-shell .peron-toolbar--tek .peron-search input {
        height: 34px;
        font-size: 11px;
        padding: 0 6px 0 26px;
    }
    #prod-shell .peron-toolbar--tek .peron-search svg { left: 7px; width: 13px; height: 13px; }

    /* Tarih bloğu: etiket ÜSTTE değil YANDA → çubuk tek satır yüksekliğinde kalır.
       🔴 1.310.0 — GÖRÜNÜR AŞAMA BİLGİ YAZISI KALDIRILDI (kullanıcı kuralı). Kutu
       artık yalnız iki tarih girdisini taşır; anlam tarih kutusunun `title`ında ve
       tarih KOLONUNUN başlığında yaşar.
       🔴 ARTAN BOŞLUĞUN ASLAN PAYI BURAYA (grow 3) — kullanıcının açık isteği. */
    #prod-shell .peron-toolbar--tek .prod-date-wrap {
        flex: 3 1 172px;
        max-width: 300px;
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }
    #prod-shell .peron-toolbar--tek .peron-daterange {
        flex: 1 1 auto;
        min-width: 0;
        gap: 2px;
    }
    /* 🔴 ALT SINIR 78px — İKİ KEZ ÖLÇÜLDÜ. Yer tutucu ("gg.aa.yyyy" 54px + takvim
       simgesi + dolgu) 10.5px yazıda ~75px ister. İlk yazımda payı serbest bıraktım →
       kutular 42px'e düştü; sonra 66px verdim → 1366px dizüstünde kutu 72px'te kaldı
       ve 3× yakınlaştırılmış görüntüde yer tutucu HÂLÂ "gg.aa.yy" diye kesiliyordu
       (denetim bulgusu). 78px, ölçülen ihtiyacın 3px üstünde. */
    #prod-shell .peron-toolbar--tek .peron-daterange .peron-input {
        flex: 1 1 0;
        width: auto;
        min-width: 78px;
        height: 34px;
        font-size: 10.5px;
        padding: 0 3px;
    }
    #prod-shell .peron-toolbar--tek .peron-daterange-sep { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   URETIM SIPARISLERI — URETIM TAKIBI ILE AYNI YOGUNLUK  (#po-shell)
   ═══════════════════════════════════════════════════════════════════════════
   Kullanici: "tasarim butunlugu korunarak Uretim Takibi gibi olsun, satirlari
   daralt, ekrana daha cok urun sigsin."

   ÖLÇÜLDÜ (1366px, gerçek veri) — metin genişliği / o günkü kolon:
       Sipariş No 129/149 · Firma 140/141(TAŞIYOR) · Ürün 135/134(TAŞIYOR)
       Müşteri 87/124 · Sip.Tarihi 65/126 · Termin 12/124 · Tutar 20/96 · Durum 62/130
   Yani Firma ve Ürün kırpılırken Termin/Tutar/Sip.Tarihi kolonlarında 40–90px
   ölü alan vardı. Genişlikler içeriğe göre yeniden dağıtıldı; boşalan yer
   kırpılan iki kolona verildi ve toplam 1158 → 1102'ye indi.

   Satır yüksekliği 47px idi (Üretim Takibi 30px). Aynı yoğunluk kuralları
   uygulandı: dolgu 6→2, gövde 12→11.5px, başlık 11→10px, simge 38→26px.
   ─────────────────────────────────────────────────────────────────────────── */

/* TABAN GENİŞLİKLER — toplam 1102px (10 kolon). Başlık metni de hesaba katıldı:
   "Sipariş Tarihi" başlığı 83px, o yüzden kolon 104px (83 + 20 dolgu). */
#po-shell .peron-table col.oc-check   { width: 32px; }
/* 🔴 1.415.2 — FAREDE 140 → 156px (toplam 1118). 140px'te numaraya 97px kalıyordu; "ÜS-20260629-0008" 109px ister ve
   1440px'te 12 satırın HEPSİ "ÜS-20260629-…" diye aynı görünüyordu (ayırt edici son kısım kırpık). Kabın boş payı (1440:
   1142px) ve tablo sığdırma genişlemeyi karşılar; çoğaltma alt kodları (-10-01) tirelerden ikinci satıra iner
   (`.po-no-cell .user-code`). DOKUNMATİKTE 140px kalır: orada sığdırma kapalı, kolon büyüseydi tablo kendi kabında daha çok
   kayardı; numara da tireden sarar ve satır boyu zaten iki sıralı işlem düğmelerinden gelir (kırpılmaz, boy değişmez). */
#po-shell .peron-table col.oc-no      { width: 140px; }
@media (pointer: fine) {
    #po-shell .peron-table col.oc-no  { width: 156px; }
}
#po-shell .peron-table col.oc-date    { width: 104px; }
#po-shell .peron-table col.oc-firma   { width: 148px; }
#po-shell .peron-table col.oc-musteri { width: 110px; }
#po-shell .peron-table col.oc-urun    { width: 156px; }
/* 🔴 104 → 116px: Termin artık satır-içi <input type="date">. Tarih girdisi UA'dan
   ~120px içsel minimum taşır (min-width:0 verilse bile) — 104px'te gg.aa.yyyy
   maskesi "gg.aa.yyy" diye KIRPILIYORDU ve scrollWidth bunu YAKALAMIYORDU
   (yalnız ekran görüntüsünde görülür). Emsal: Satınalma'nın aynı girdisi 113px'te
   çalışıyor. Fark firmadan alındı (col-ellip → üç noktayla zarifçe kısalır;
   tarih girdisi kısalamaz), toplam 1102px KORUNDU. */
#po-shell .peron-table col.oc-due     { width: 116px; }
#po-shell .peron-table col.oc-tutar   { width: 76px; }
#po-shell .peron-table col.oc-durum   { width: 88px; }
#po-shell .peron-table col.oc-act     { width: 132px; }

/* ── TERMİN hücresi (satır-içi düzenleme) ────────────────────────────────────
   Girdi kolonun tamamını alır; box-sizing bu dosyada global sıfırlanmıştır ama
   yeni kutu kendi beyanını taşısın (dolgu + %100 genişlik = taşma tuzağı). */
#po-shell .peron-table td.po-duecell { overflow: visible; }
#po-shell .po-due-inline { box-sizing: border-box; width: 100%; min-width: 0; }
/* 1.415.2 — sipariş numarası üç noktayla KESİLMEZ: ayırt edici kısım sondadır. Sığmazsa tirelerden (`<wbr>`) alt satıra iner. */
#po-shell .po-no-cell .user-code { white-space: normal; overflow-wrap: normal; text-overflow: clip; line-height: 1.25; }
#po-shell .po-due-ro     { font-size: 12px; color: var(--text-secondary); }
/* Kaydedildi parıltısı — listeyi yeniden çizmeden geri bildirim (fason-term emsali).
   Renk token'dan gelir; sabit hex gece modunda kırılırdı. */
#po-shell .po-due-inline.is-saved {
    border-color: var(--green);
    background: var(--pri-light);
    transition: background .3s ease, border-color .3s ease;
}

/* Dar ekranda ikincil kolonlar SIRAYLA düşer — Üretim Takibi ile aynı yaklaşım.
   🔴 th/td'ye display:none tabloyu DARALTMAZ; daraltan şey <col>'un collapse'idir.
   Kolon sırası: 1 sec · 2 no · 3 tarih · 4 firma · 5 müşteri · 6 ürün · 7 termin
                 8 tutar · 9 durum · 10 işlemler */
@media (max-width: 1279px) {              /* Sipariş Tarihi düşer → 998 */
    #po-shell :where(:not(.is-sigdir)) > .peron-table col.oc-date { visibility: collapse; width: 0; }
    #po-shell :where(:not(.is-sigdir)) > .peron-table > thead > tr > th:nth-child(3),
    #po-shell :where(:not(.is-sigdir)) > .peron-table > tbody > tr > td:nth-child(3) { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1149px) {              /* Tutar düşer → 922 */
    #po-shell :where(:not(.is-sigdir)) > .peron-table col.oc-tutar { visibility: collapse; width: 0; }
    #po-shell :where(:not(.is-sigdir)) > .peron-table > thead > tr > th:nth-child(8),
    #po-shell :where(:not(.is-sigdir)) > .peron-table > tbody > tr > td:nth-child(8) { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1009px) {              /* Termin düşer + Müşteri daralır → 800 */
    #po-shell :where(:not(.is-sigdir)) > .peron-table col.oc-due { visibility: collapse; width: 0; }
    #po-shell :where(:not(.is-sigdir)) > .peron-table > thead > tr > th:nth-child(7),
    #po-shell :where(:not(.is-sigdir)) > .peron-table > tbody > tr > td:nth-child(7) { padding-left: 0; padding-right: 0; }
    #po-shell :where(:not(.is-sigdir)) > .peron-table col.oc-musteri { width: 92px; }
}
@media (max-width: 899px) {               /* Ürün/Firma daralır → 700 */
    #po-shell :where(:not(.is-sigdir)) > .peron-table col.oc-urun  { width: 120px; }
    #po-shell :where(:not(.is-sigdir)) > .peron-table col.oc-firma { width: 116px; }
}

/* ── YOĞUNLUK — yalnız FARE rejiminde (dokunmatikte 44px hedefler korunur) ──
   🔴 Seçici `tr > td` OLMALI: Üretim Takibi'nde `> tbody > tr > td` yazımı, dosyanın
      başındaki daha ÖZGÜL bir kural yüzünden hiç uygulanmamıştı. Burada da hem satır
      sınıfına hem genel gövdeye yazılıyor. */
@media (min-width: 769px) and (pointer: fine) {
    /* 🔴 Dolgu/yazi/rozet KALDIRILDI — tablo yogunluk sozlesmesinden geliyor. */
    #po-shell .po-act-cell { gap: 2px; }
    #po-shell .po-act-btn { min-width: var(--tbl-ctl-h); width: var(--tbl-ctl-h); height: var(--tbl-ctl-h); padding: 0; }
    #po-shell .po-act-btn svg { width: 14px; height: 14px; }
    /* Akordiyon oku satırı yükseltmesin: Üretim Takibi'nde 24px, burada da aynı. */
    #po-shell .po-no-cell .prod-acc-toggle { width: 22px; height: 22px; }
}

/* Dokunmatikte işlem simgeleri tablo yoğunluk sözleşmesinden (`--tbl-ctl-h`, dokunmatikte 36px) okunur.
   🔴 1.415.2 — eski 44px kuralı 2026-09-03 kullanıcı kararıyla kalkan "44 zorunluluğu"nun kalıntısıydı (Stok ve Üretim
   Takibi 1.365.0'da sözleşmeye geçmişti, burası unutulmuştu): 4 düğme 132px kolonda 2×44 sıraya sarıp satırı 109px'e
   çıkarıyordu (ölçüldü 1024 dokunmatik). */
@media (pointer: coarse) {
    #po-shell .po-act-btn { min-width: var(--tbl-ctl-h); min-height: var(--tbl-ctl-h); }
}
/* Dört düğme 3 + 1 sarıyordu (yetim dördüncü, komşu boşluk 4px): kap iki düğme genişliğine sınırlanır → 2 + 2, boşluk 6px.
   YALNIZ tam dört düğmeli satır: üç düğme (izne göre çoğalt / sil yok) tek sıraya sığıyordu, beş düğme (müşteri onayı
   açık + taslak) üç sıraya inerdi. Sarma burada da açıkça yazılır — başka bir bloğa bağlı kalmasın. */
@media (pointer: coarse) and (min-width: 769px) {
    #po-shell .po-act-cell:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
        flex-wrap: wrap; gap: 6px; max-width: calc(2 * var(--tbl-ctl-h) + 6px);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLAN KARTI UYARILARI — TEK TASARIM DILI  (amber + mor)
   ═══════════════════════════════════════════════════════════════════════════
   İki uyarı vardı ve birbirine benzemiyordu: "plan tarihi değişti" kartın TÜM
   zeminini amber yapıyor, "başka haftadan taşındı" ise bütün YAZILARI pastel
   kırmızıya çeviriyordu. Kullanıcı: "ikisi de aynı tarzda, daha şık olsun."

   Ortak dil:
     · sol kenarda 3px AKSAN ŞERİDİ (rengi duruma göre)
     · üstte küçük, yuvarlatılmış ETİKET satırı (aynı geometri, aynı yazı ölçüsü)
     · kart zemini sakin kalır — okunabilirlik yazıdan değil şeritten gelir
   Böylece iki (ileride üç) uyarı yan yana durduğunda kart karmaşıklaşmıyor.

   🔴 ÖZGÜLLÜK: mevcut `.plan-card-rescheduled` (0,1,0) ile aynı seviyedeyiz; bu blok
      dosya SONUNDA olduğu için sonra gelir ve kazanır. Alt öğeler kendi rengini
      tanımladığından karta `color` vermek YETMEZ — tek tek ezilir (mevcut
      .plan-card-moved kuralında da aynı not var).
   ─────────────────────────────────────────────────────────────────────────── */

/* Ortak: kart konumlandırma + sol aksan şeridi için zemin */
.plan-card.plan-card-rescheduled,
.plan-card.plan-card-gecikmis { position: relative; overflow: hidden; }

.plan-card.plan-card-rescheduled::before,
.plan-card.plan-card-gecikmis::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    pointer-events: none;
}

/* Ortak etiket geometrisi — iki uyarı da BİREBİR aynı ölçüde */
.plan-chip-resched,
.plan-chip-gecik {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0 0 3px;
    padding: 2px 18px 2px 6px;
    border-radius: 999px;
    font-size: 9.5px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .01em;
}
.plan-chip-resched svg,
.plan-chip-gecik svg { width: 11px; height: 11px; flex: none; margin-top: 1px; }
.plan-chip-gecik .pcg-txt,
.plan-chip-resched .pcrs-txt { min-width: 0; }

/* ── AMBER: plan tarihi değişti ───────────────────────────────────────────── */
.plan-card.plan-card-rescheduled { background: var(--card-bg); border-color: var(--amber-border, rgba(190,116,56,.35)); }
.plan-card.plan-card-rescheduled::before { background: var(--amber-ink, #95592b); }
.plan-chip-resched { background: rgba(190,116,56,.13); color: var(--amber-ink, #95592b); }

/* ── MOR: planlanan haftada bitmedi ───────────────────────────────────────── */
/* Renk paletinde --violet zaten var (Üretim Hikâyesi düğmesi kullanıyor); uyarı
   tonu ondan türetilir, yeni bir marka rengi icat edilmez. */
.plan-card.plan-card-gecikmis { background: var(--card-bg); border-color: rgba(109,64,168,.34); }
.plan-card.plan-card-gecikmis::before { background: #6d40a8; }
.plan-chip-gecik { background: rgba(109,64,168,.12); color: #5a2f8f; }
.plan-card.plan-card-gecikmis:hover { border-color: #6d40a8; box-shadow: 0 3px 10px rgba(109,64,168,.20); }

/* İkisi birden ise (tarihi değişmiş VE hâlâ bitmemiş): şerit ikiye bölünür —
   üst yarı amber, alt yarı mor. Tek bakışta iki durumu da anlatır. */
.plan-card.plan-card-rescheduled.plan-card-gecikmis::before {
    background: linear-gradient(to bottom,
        var(--amber-ink, #95592b) 0 50%, #6d40a8 50% 100%);
}

/* Gece modu: zeminler saydam olduğu için yalnız metin/şerit tonu tazelenir. */
html[data-peron-theme="dark"] .plan-card.plan-card-gecikmis { border-color: rgba(167,124,224,.42); }
html[data-peron-theme="dark"] .plan-card.plan-card-gecikmis::before { background: #a77ce0; }
html[data-peron-theme="dark"] .plan-chip-gecik { background: rgba(167,124,224,.18); color: #c4a6ef; }

/* 🔴 .plan-card-moved (başka haftadan taşındı) ARTIK TÜM YAZIYI boyamaz — aynı dile
   çekildi: etiket zaten "← X haftasından taşındı" diyor, kartın gövde metnini pastel
   kırmızıya çevirmek okunabilirliği düşürüyordu ve mor uyarıyla yan yana kakofoni
   oluyordu. Şerit/etiket rengi korunur, gövde metni normal renge döner. */
.plan-card.plan-card-moved .plan-chip-name,
.plan-card.plan-card-moved .plan-chip-sub,
.plan-card.plan-card-moved .plan-chip-cust,
.plan-card.plan-card-moved .plan-chip-prod,
.plan-card.plan-card-moved .plan-chip-qty,
.plan-card.plan-card-moved .pcs-lbl,
.plan-card.plan-card-moved .plan-chip-qty .pcq-unit { color: inherit; }
.plan-card.plan-card-moved::before { background: var(--rose-ink, #ab4a4f); }
.plan-card.plan-card-moved { position: relative; overflow: hidden; border-color: var(--rose-surface-border); }
.plan-card.plan-card-moved .plan-chip-resched { background: var(--rose-surface); color: var(--rose-ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   TABLO YOGUNLUK SOZLESMESI — UYGULAMA (token'lari okuyan TEK kural)
   ═══════════════════════════════════════════════════════════════════════════
   Token tanımları dosyanın başındadır (":root" bloğunun hemen ardı). Burası
   onları TÜM veri tablolarına uygular. Ekran başına yoğunluk kuralı YAZILMAZ.

   🔴 SEÇİCİ YAZIMI `> tbody > tr > td` (0,1,3): dosyada `.peron-table td` (0,1,1)
      yazımlı birden çok kural var (:3359 padding 9px, :6737 .pur-table font 11.5px).
      Eleman sayısı fazla olduğu için bu kural onları kaskad sırasından BAĞIMSIZ ezer.
   🔴 `.stk-tbl` AYRICA yazılır: Stok Yönetimi tablosu tarihsel olarak `.peron-table`
      sınıfını taşımıyor (peron-mod-stock.js:180 notu). Kendi ölçüleri de JS içinde
      gömülü `<style>`'da ve ID kapsamlı olduğu için oradaki iki değer token'a
      çevrildi — buradaki kural onu ezemezdi, ama artık aynı sayıyı okuyorlar.
   🔴 `.gl-total-row` (toplam satırı) ve `.gl-fis-cell` (fiş girişi ızgarası) BİLEREK
      dışarıda: biri özet satırı, diğeri form ızgarası — ikisi de veri satırı değil.
   ─────────────────────────────────────────────────────────────────────────── */

.peron-table > tbody > tr > td,
.stk-tbl     > tbody > tr > td,
.pl-table    > tbody > tr > td,
.pf-table    > tbody > tr > td {
    /* `height` tabloda ALT SINIR gibi davranır: içerik kısaysa satır bu boya çıkar,
       uzunsa büyür. Dağınık ızgarayı (aynı listede 37-72px satırlar) bitiren şey budur. */
    height: var(--tbl-row-h);
    padding-top: var(--tbl-cell-py);
    padding-bottom: var(--tbl-cell-py);
    font-size: var(--tbl-fs);
}
.peron-table > thead > tr > th,
.stk-tbl     > thead > tr > th,
.pl-table    > thead > tr > th,
.pf-table    > thead > tr > th {
    padding-top: var(--tbl-head-py);
    padding-bottom: var(--tbl-head-py);
    font-size: var(--tbl-head-fs);
}

/* ── HÜCRE İÇİ DENETİMLER — satır boyunu asıl bunlar zorluyordu ────────────
   Ölçüldü: Üretim Siparişleri'nde durum <select>'i 36px → satır 41px; Satınalma'da
   miktar/tutar input'ları 36px → satır 50px. Dolguyu kısmak bu satırları
   KISALTMIYORDU çünkü sınırlayıcı denetimin kendisiydi. */
.peron-table > tbody > tr > td .peron-select,
.peron-table > tbody > tr > td .peron-input,
.stk-tbl     > tbody > tr > td .peron-select,
.stk-tbl     > tbody > tr > td .peron-input {
    height: var(--tbl-ctl-h);
    /* 🔴 --tbl-code-fs DEĞİL: girdiye ODAKLANILIR, rozete odaklanılmaz. Tabanda 16px
       kalmalı yoksa iOS odak-zoom'u tetiklenir (bkz. token tanımındaki not). */
    font-size: var(--tbl-ctl-fs);
    padding: 0 8px;
}
/* Açılır ok: 36px'lik dolgu 26px'lik bir denetimde kutunun yarısını yiyordu. */
.peron-table > tbody > tr > td .peron-select,
.stk-tbl     > tbody > tr > td .peron-select {
    padding-right: 22px;
    background-size: 14px;
    background-position: right 5px center;
}

/* Rozet + kod etiketi — ekran başına üç ayrı yerde tekrarlanıyordu, tek yere indi. */
.peron-table > tbody > tr > td .peron-badge,
.stk-tbl     > tbody > tr > td .peron-badge {
    font-size: var(--tbl-badge-fs);
    padding: 1px 7px;
}
.peron-table > tbody > tr > td .user-code,
.stk-tbl     > tbody > tr > td .user-code { font-size: var(--tbl-code-fs); }

/* Satır içi butonlar (aksiyon kolonu + hücre içi küçük butonlar) aynı ölçüde.
   🔴 Dokunmatikte token 36px'e çıkar; 44px hedef kuralı ayrıca aşağıdaki
      (pointer:coarse) bloklarında min-width/min-height ile korunuyor. */
.peron-table > tbody > tr > td .peron-btn.sm,
.peron-table > tbody > tr > td .peron-btn.icon-btn,
.stk-tbl     > tbody > tr > td .peron-btn.sm,
.stk-tbl     > tbody > tr > td .peron-btn.icon-btn { height: var(--tbl-ctl-h); }


/* ═══════════════════════════════════════════════════════════════════════════
   SATINALMA — DOVIZ GOSTERIMI (TL karsiligi + kur seridi)
   ═══════════════════════════════════════════════════════════════════════════
   Ekranda dövizli tutarın yanında TL karşılığı gösterilir. Cariye YAZILAN tutar
   budur; operatörün kâğıttaki rakamla ekrandakini eşleştirebilmesi gerekiyor.
   İkincil bilgi olduğu için ana tutarın altında, daha küçük ve soluk. */
.pur-tl {
    display: block;
    font-size: 10.5px;
    line-height: 1.2;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Belgeli teslim modalinda kur seridi — ozetin altinda tek satir. */
.rd-fx-note {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--pri-tint, rgba(63,116,168,.10));
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BELGELI TESLIM — SATIR EKLEME
   ═══════════════════════════════════════════════════════════════════════════
   🔴 KDV İKİLİ DÜĞMESİ (.rd-seg / .rd-seg-opt / .rd-vatwrap / .rd-vrbox / .rd-vrpct)
      1.351.0'DA TAMAMEN KALDIRILDI. Kullanıcı: "kdv kutucuğunda dahil hariç gibi
      gösterme boş kutucuk olsun, eğer değer yazarsak hariçtir yazmazsak dahildir
      zaten." Kip artık kutunun DOLU/BOŞ olmasından okunuyor; ekranda ayrı bir
      denetim yok, dolayısıyla ayrı bir stil de yok. Oran kutusunun hücre içi
      biçimi `.rd-t input.rd-vr` kuralında (yukarıda, kolon bloğunun yanında). */

/* Kart para birimi belgeninkinden farklı olan satırlar için uyarı şeridi.
   🔴 Dolgu ŞART: `.rd-note` yalnız `margin-bottom` taşıyor, dolgusu yok. Tonlu zemin +
      sol aksan çizgisi dolgusuz kalınca metin çizgiye yapışıyordu (kardeşi `.rd-err`
      8px 10px kullanıyor — 8px ızgara). */
.rd-note--warn {
    padding: 8px 10px;
    border-left: 3px solid var(--amber);
    border-radius: 4px;
    background: var(--amber-tint, rgba(190,116,56,.10));
    color: var(--text-secondary);
    line-height: 1.4;
}
.rd-fx-note.is-warn {
    background: var(--amber-tint, rgba(190,116,56,.12));
    color: var(--amber);
    font-weight: 600;
}
/* 🔴 `hidden` TEK BAŞINA YETMİYORDU: `.rd-sum > div { display:flex }` (0,1,1) UA'nın
   `[hidden]{display:none}` kuralını EZİYOR ve TRY belgede özetin yanına BOŞ, tonlu
   197×33px bir kutu basılıyordu (ölçüldü). Kur şeridi ayrıca tam satır kaplamalı —
   "özetin altında tek satır" olması gereken yer flex sırasına karışmıştı. */
.rd-sum > .rd-fx-note { flex: 1 1 100%; }
.rd-sum > .rd-fx-note[hidden] { display: none; }
/* Kur alanı iskonto kutularından geniş — "47,5550" dört haneli ondalıkla sığmalı. */
.rd-f--fx { flex: 0 0 auto; min-width: 168px; }

/* Satır ekleme şeridi — tablonun ALTINDA, ayrı bir bölge olduğu belli olsun. */
.rd-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-inset);
}
.rd-add-lbl { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.rd-add-pick { flex: 1 1 220px; min-width: 0; max-width: 340px; }
/* 🔴 `.rd-add-hint` KALDIRILDI (1.368.0 — kullanıcı isteği). Seçicinin ne yaptığını
   artık yanındaki etiket ("Belgede olmayan bir ürün mü geldi?") anlatıyor. */

/* Telefon: arama kutusu ve satır eylemleri dokunma hedefi ölçüsünde kalsın.
   🔴 `.rd-seg-opt` / `.rd-vatwrap` / `.rd-vrbox` / `.rd-vr` KURALLARI KALDIRILDI
      (1.351.0) — KDV ikili düğmesiyle birlikte o sınıflar da yok oldu. Sahibi
      olmayan bir kural "yaptım" duygusu verir, hiçbir pikseli değiştirmez.
      Oran kutusunun telefondaki genişliği artık kolonun kendisinden gelir
      (`.rd-t--tam col.rdc-kdv`, aşağıdaki blokta ölçüldü). */
@media (max-width: 768px) {
    .rd-add { flex-direction: column; align-items: stretch; }
    .rd-add-pick { max-width: none; }
    /* 🔴 44 → 28px (1.351.0). Düğme artık ÜRÜN ADIYLA AYNI SATIRDA; 44px vermek her
       satırı 44px'e zorlar ve 50 kalemlik bir belgede ekranı boşa harcar. Global
       kuralın "yoğun yüzey denetimi (tablo satır eylemi) ≥ 28px" kademesi geçerli —
       44 zorunluluğu 2026-09-03'te kullanıcı tarafından kaldırıldı. */
    .rd-lot-btn { min-height: 28px; padding: 0 12px; }
    .rd-f--fx { flex: 1 1 100%; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RAPORLAR — Günlük Operasyon Raporu

   Omurga: GİREN → İŞLENEN → ÇIKAN. Üç bağımsız tasarım önerisi ve dört mercekli
   jüri ölçümünün SENTEZİ:
     · akış omurgası + tarih girişi + tablo sarmalama disiplini  → "Günün Akışı"
     · üst şerit + sessiz kanallar paneli                        → "Yoğun Pafta"
     · token disiplini (iki temada da 0 kontrast ihlali)         → "Para Önce"

   REDDEDİLENLER ve ölçülen gerekçeleri:
     · İÇ DİKEY KAYDIRMA: "1,6 ekran" yoğunluğu sahteydi — panel içeriğinin %24-49'u
       kaydırma çubuğunun arkasında kalıyordu. Burada iç dikey kaydırma YOK; kırpma
       "ilk N satır + dipnotta toplam" ile yapılır.
     · 320px'te 66,9px tarih kutusu (tarih "04.0" diye kırpılıyordu) → burada tam genişlik.
     · position:fixed tema düğmesi (bir para rakamının üstüne oturuyordu) → burada yok.

   🔴 MOBILE-FIRST: taban kurallar dar ekran içindir, min-width blokları yalnız BÜYÜTÜR.
      Böylece "media query özgüllük eklemez" tuzağına hiç girilmez.
   🔴 SABİT HEX YOK — hepsi token; gece modu token ezerek çalışır.
   ══════════════════════════════════════════════════════════════════════════════ */

.rp-eylem { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── DÖRT RAPOR SEKMESİ AYNI EYLEM ÇUBUĞU GRAMERİNİ KULLANIR (1.306.0) ───────
   ÖLÇÜLEN TUTARSIZLIK: Üretim (`#up-shell`) ve Detaylı (`#dr-shell`) sekmelerinde
   eylem çubuğu için `flex: 1 1 auto / min-height: 44px` + 769px'te
   `flex: 0 0 auto / min-height: 32px` kuralları vardı; Günlük (`#rp-kok`) ve
   Sevkiyat (`#sv-shell`) sekmelerinde YOKTU. Sonuç, AYNI EKRANIN sekmeleri
   arasında görünür fark:
     · 1024px → up/dr düğmeleri 32px, rp/sv düğmeleri 28px yüksekliğinde
     · 768px  → up/dr düğmeleri kabı doldurup geriliyor (toplam ~710px),
                rp/sv düğmeleri doğal genişlikte kalıyor (toplam ~350px)
   Kullanıcı "oran orantılı olsun" derken tam olarak bu sınıf farkı kastediyor.
   🔴 KONUM ÖNEMLİ: bu blok, `@media (max-width: 640px)` mobil yoğunluk
      bloklarından ÖNCE gelir (17201 ve 18246). Eşit özgüllükte kaynak sırası
      kazanır; sonraya konsaydı mobil yoğunluk ayarlarını EZERDİ. */
#rp-kok .rp-eylem,
#sv-shell .rp-eylem,
#hm-shell .rp-eylem { flex: 1 1 100%; }
#rp-kok .rp-eylem .peron-btn,
#sv-shell .rp-eylem .peron-btn,
#hm-shell .rp-eylem .peron-btn { flex: 1 1 auto; min-height: 44px; }

@media (min-width: 769px) and (pointer: fine) {
    #rp-kok .rp-eylem,
    #sv-shell .rp-eylem,
    #hm-shell .rp-eylem { flex: 0 0 auto; margin-left: auto; }
    #rp-kok .rp-eylem .peron-btn,
    #sv-shell .rp-eylem .peron-btn,
    #hm-shell .rp-eylem .peron-btn { flex: 0 0 auto; min-height: 32px; }
}

.rp-filtre { align-items: flex-end; gap: 10px; }
.rp-tarih { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; }
/* 🔴 input[type=date] UA'dan ~120px içsel minimum taşır; dar ekranda ezilmesin diye
   kolon tam genişlik alır. Ölçülen karşı örnek: 66,9px'te tarih kırpılıyordu. */
.rp-filtre .peron-input[type="date"] { width: 100%; min-height: 44px; font-size: 16px; }
.rp-cipler { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
/* Dokunma hedefi 44px + komşular arası >=8px (gap). Üç maketin ÜÇÜ DE bu iki
   kuralda kalmıştı (komşu aralığı 1,4-7,6px ölçüldü). */
.rp-cip { min-height: 44px; padding: 0 14px; }
.rp-cip[aria-pressed="true"] { background: var(--pri-light); border-color: var(--pri);
    color: var(--pri-text); font-weight: 700; }

.rp-serit { display: grid; grid-template-columns: 1fr; gap: 1px; margin-bottom: 16px;
    background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md);
    overflow: hidden; }
.rp-serit-kutu { background: var(--card-bg); padding: 12px 14px; box-sizing: border-box; }
.rp-serit-et { font: 600 11px/1.4 var(--font); letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 4px; }
.rp-serit-buyuk { font: 700 21px/1.2 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-serit-alt { font: 400 12px/1.5 var(--font); color: var(--text-muted); margin-top: 3px; }

/* ─── TAKIM BİRİMİ ROZETİ (1.328.0) ───────────────────────────────────────────
   Takım sayısının HANGİ TABANDAN geldiğini söyler: oturum · puan · satır.
   🔴 GERÇEK BİR DÜĞÜM, RENK MİRASI DEĞİL. 1.327.0'da bir uyarı yalnız kabın
      `color`unu değiştirerek yazılmıştı ve kabın tek içeriği kendi rengini
      bildiren düğmeler olduğu için HİÇBİR PİKSELDE görünmedi. Rozetin kendi
      zemini, kendi kenarlığı ve kendi metni var.
   🔴 'satır' hâli UYARI RENGİNDE: o durumda sayı ölçülmüş bir takım değil, satır
      adedidir — göz farkı bir bakışta görmeli. */
.takim-birim {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--content-bg);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

/* 🔴 `--amber-text` DİYE BİR TOKEN YOK (ölçüldü: 0 tanım) → `var()` yedeği
   devreye giriyor ve rozet SABİT bir hex ile boyanıyordu; gece modu için de iki
   ayrı hex yazılmıştı. Doğru token `--amber-ink`: açık temada AA-koyu türev
   (#95592b, beyazda 5,61:1), gece temasında `var(--amber)`e eşlenmiş (satır 340).
   Yani gece kuralları GEREKSİZ — token zinciri işi zaten yapıyor ve iki ayrı hex
   temayla birlikte sessizce ayrışırdı. */
.takim-birim.is-yok {
    border-color: color-mix(in srgb, var(--amber) 45%, transparent);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    color: var(--amber-ink);
    cursor: help;
}
/* Takım ve modül AYNI ağırlıkta — biri diğerinin alt yazısı değildir. */
.rp-ikili .rp-esit { color: var(--text-muted); font-weight: 400; margin: 0 4px; }

.rp-perde { margin: 0 0 8px; }
.rp-perde-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
    padding: 18px 0 10px; }
.rp-perde-no { font: 700 20px/1 var(--font); color: var(--pri-text);
    font-variant-numeric: tabular-nums; }
.rp-perde-ad { font: 700 13px/1 var(--font); letter-spacing: 1.2px; color: var(--text-primary); }
.rp-perde-ack { font: 400 12px/1.5 var(--font); color: var(--text-muted); flex: 1 1 100%; }
.rp-perde-cizgi { display: none; }
.rp-perde-ozet { font: 600 12px/1 var(--font); color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap; }

.rp-kart { padding: 0; overflow: hidden; margin-bottom: 12px; }
.rp-kart-bas { display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; padding: 11px 14px; background: var(--content-bg);
    border-bottom: 1px solid var(--border); }
.rp-kart-ad { font: 700 13px/1.3 var(--font); color: var(--text-primary);
    display: flex; align-items: center; gap: 6px; }
/* 🔴 EMNİYET: kart başlığındaki simge, çağıran boyut vermeyi unutsa bile
   büyüyemez (ölçüsüz `<svg>` 300×150 açılır — sevkiyat raporundaki "kocaman
   kamyon" tam olarak buydu). Öznitelik değil KURAL olduğu için son sözü bu söyler. */
.rp-kart-ad > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.rp-kart-sag { font: 400 12px/1.3 var(--font); color: var(--text-secondary);
    font-variant-numeric: tabular-nums; }
.rp-dipnot { padding: 9px 14px 11px; border-top: 1px solid var(--border-light);
    font: 400 12px/1.65 var(--font); color: var(--text-muted); max-width: 78ch; }
.rp-dipnot b { color: var(--text-secondary); font-weight: 700; }
/* Katlanır not bloğu (1.305.0): summary tıklanabilir → dokunma hedefi 44px'e
   ::after ile tamamlanır (yoğunluk bozulmaz, hedef büyür — çip deseniyle aynı). */
.rp-dip-detay { position: relative; }
.rp-dip-detay > summary {
    position: relative; display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer; list-style: none; user-select: none;
    font-weight: 600; color: var(--text-secondary); min-height: 24px;
}
.rp-dip-detay > summary::-webkit-details-marker { display: none; }
.rp-dip-detay > summary::after { content: ''; position: absolute; inset: -10px -8px; }
.rp-dip-detay[open] > summary { margin-bottom: 4px; }
.rp-dip-detay > ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }

.rp-ikili-kolon { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
/* Tam genislik yigin — kolon sayisi fazla olan tablolar icin (1.271.0). */
.rp-tek-kolon { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }

.rp-t .rp-ad { font-weight: 600; color: var(--text-primary); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.rp-t .rp-alt { font-size: 11.5px; color: var(--text-muted); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.rp-t .rp-kod { font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--text-secondary); }
/* 🔴 Rakam içeren HER hücre: tabular-nums + nowrap (tasarım sözleşmesi md.4).
   TARİH hücreleri de rakam hücresidir — jüri iki makette tam bunu eksik ölçtü.
   Seçiciler `.peron-table td` (0,1,1) kuralını yenecek özgüllükte yazıldı. */
.rp-t td.rp-para, .rp-t td.col-num, .rp-t th.col-num,
.rp-t td.col-nowrap, .rp-t tfoot td {
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-t td.rp-para { text-align: right; }
.rp-t td.rp-artis, .rp-artis { color: var(--amber-ink); font-weight: 700; }
.rp-t td.rp-azalis, .rp-azalis { color: var(--green-ink); font-weight: 700; }
.rp-t tfoot td { font-weight: 700; background: var(--content-bg);
    border-top: 2px solid var(--border);
    /* 🔴 KIRPMA (1.271.0). Bu blok yalnız `nowrap` aliyordu (yukaridaki toplu
       secididen) ve tasan etiket komsu hucrenin USTUNE ciziliyordu. Olculdu:
       "Toplam (opsiyoneller haric)" 168px istiyor, kolon 56px veriyordu.
       `nowrap` TEK BASINA KIRPMAZ - overflow + text-overflow ile BIRLIKTE yazilir. */
    overflow: hidden; text-overflow: ellipsis; }

/* 🔴 SIK TABLO (1.271.0 - kullanici istegi: "isimleri, rakamlarin puntolarini
   kucult"). Yogun kolonlu uc tabloda uygulanir: urun agaci maliyeti, gelen
   siparisler, satinalma. Yogunluk sozlesmesindeki `--tbl-fs` DEGISTIRILMEZ;
   bu sinif yalniz kendi tablosunu kucultur, baska ekrana sizmaz. */
.rp-t--sik th, .rp-t--sik td { font-size: 12px; }
.rp-t--sik .rp-alt { font-size: 11px; }
.rp-t--sik th { letter-spacing: 0; }
.rp-bos { text-align: center; color: var(--text-muted); padding: 18px 12px; font-size: 12px; }
.rp-bos-kutu { padding: 16px 14px; font: 400 13px/1.7 var(--font); color: var(--text-secondary); }
.rp-silik { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.rp-tip { display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
    background: var(--border-light); font: 600 11px/1.6 var(--font);
    color: var(--text-secondary); white-space: nowrap; }

.rp-ac-h { padding-left: 4px; padding-right: 0; }
.rp-ac { display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: 0; background: transparent;
    color: var(--text-muted); cursor: pointer; border-radius: var(--r-sm); }
.rp-ac:hover { background: var(--pri-light); color: var(--pri-text); }
.rp-ac:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.rp-ok { display: flex; transition: transform var(--tr-fast); }
.rp-ok.is-acik { transform: rotate(90deg); }
.rp-modul-h { padding: 0; background: var(--border-light); }
.rp-ic { margin: 0; }
/* Akordiyon içindeki modül tablosu da KENDİ kabında kayar (320px'te doğal genişliği
   424px, kabı 296px). Kap iç içe olduğu için dış kabın gölgesi/kenarı/yükseklik sınırı
   devralınmaz — yoksa kart içinde ikinci bir dikey kaydırma bölgesi doğardı. */
.rp-ic-wrap { max-height: none; border: 0; border-radius: 0;
    box-shadow: none; background: transparent; overflow-y: visible; }
/* 🔴 Rozet: "6/7" eşit değilse takım o gün BİTMEDİ. Dolgulu yüzeyde BEYAZ METİN
   KULLANILMIYOR — gece modunda --pri #5b91c7'ye açılıyor ve beyazla 3,32:1'e düşüyor
   (jüri iki farklı makette de tam bunu ölçtü). Açık zemin + koyu metin iki temada da
   AA geçer; --st-* üçlüleri gece bloğunda da eşleşik tanımlı. */
.rp-rozet { display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
    font: 700 11px/1.7 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-rozet.is-tam { background: var(--st-done-bg); color: var(--st-done-fg);
    border: 1px solid var(--st-done-bd); }
.rp-rozet.is-yarim { background: var(--st-pack-bg); color: var(--st-pack-fg);
    border: 1px solid var(--st-pack-bd); }
.rp-durum { display: inline-block; padding: 1px 7px; border-radius: var(--r-full);
    background: var(--st-wait-bg); color: var(--st-wait-fg); font: 600 11px/1.7 var(--font); }
.rp-durum.rp-d-tamamlandi { background: var(--st-done-bg); color: var(--st-done-fg); }
.rp-durum.rp-d-iptal { background: var(--st-canc-bg); color: var(--st-canc-fg); }

.rp-uyari-serit { padding: 9px 14px; background: var(--rose-surface);
    border-bottom: 1px solid var(--rose-surface-border);
    font: 400 12px/1.6 var(--font); color: var(--text-secondary); }
.rp-uyari-serit b { color: var(--rose-ink); font-weight: 700; }
.rp-kanallar { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border-light); }
.rp-kanal { background: var(--card-bg); padding: 12px 14px; box-sizing: border-box; }
.rp-kanal-ad { font: 600 12px/1.4 var(--font); color: var(--text-muted); margin-bottom: 4px; }
.rp-kanal-tutar { font: 700 19px/1.2 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-kanal-tutar.is-bos { color: var(--text-muted); font-weight: 400; }
.rp-kanal-alt { font: 400 12px/1.5 var(--font); color: var(--text-muted); margin-top: 3px; }

.rp-bom-neden { padding: 9px 14px; background: var(--pri-light);
    border-bottom: 1px solid var(--border);
    font: 400 12px/1.6 var(--font); color: var(--text-secondary); }
.rp-bom-neden b { color: var(--pri-text); font-weight: 700; }

/* 1.440.0 — Ürün Ağacı Maliyeti özeti: solda tek baskın fark, sağda dar tanım listesi, altta yöntem notu.
   Eşit kart dizisi DEĞİL (sözleşme §12) — tek satır, ayraçlı, dar. */
.rp-bom-ozet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 20px; padding: 10px 14px;
    border-bottom: 1px solid var(--border); background: var(--border-light); box-sizing: border-box; }
.rp-bom-ozet-ana { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.rp-bom-ozet-et { font: 600 11px/1.4 var(--font); color: var(--text-muted); }
.rp-bom-ozet-deger { font: 700 15px/1.2 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-bom-ozet-dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; min-width: 0; }
.rp-bom-ozet-dl > div { display: flex; align-items: baseline; gap: 6px; }
.rp-bom-ozet-dl dt { font: 400 11px/1.4 var(--font); color: var(--text-muted); }
.rp-bom-ozet-dl dd { margin: 0; font: 600 12px/1.4 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-bom-ozet-not { grid-column: 1 / -1; margin: 0; font: 400 11px/1.5 var(--font); color: var(--text-secondary); max-width: 75ch; }
/* Artış / azalış rengi tablodaki `.rp-artis` / `.rp-azalis` ile AYNI token; özgüllük yalnız yukarıdaki nötr rengi ezmek için. */
.rp-bom-ozet-deger.rp-artis, .rp-bom-ozet-dl dd.rp-artis { color: var(--amber-ink); }
.rp-bom-ozet-deger.rp-azalis, .rp-bom-ozet-dl dd.rp-azalis { color: var(--green-ink); }
@media (min-width: 900px) {
    .rp-bom-ozet { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; }
    .rp-bom-ozet-dl { justify-content: flex-end; }
}
.rp-bom-ic .rp-tip { margin-left: 4px; padding: 0 6px; font-size: 10px; }
.rp-bom-diger > td { background: var(--card-bg); }
/* 🔴 Tasarım ölçümü (1.440.0): raporların para hücresi kuralı (`#rp-kok .rp-t td.rp-para` → yeşil, 1,2,1) artış rengini
   EZİYORDU — "+4.081,00" maliyet artışı yeşil görünüyordu. Bu kartta yön rengi para renginin önüne geçer (1,3,1). */
#rp-kok .rp-t.rp-bom-t td.rp-artis, #rp-kok .rp-t.rp-bom-ic td.rp-artis { color: var(--amber-ink); }
#rp-kok .rp-t.rp-bom-t td.rp-azalis, #rp-kok .rp-t.rp-bom-ic td.rp-azalis { color: var(--green-ink); }
/* Takım adı ve kalem adı SARAR (2 satır), kırpılmaz — telefonda/tablette "VELARİS YATAK ODASI" 116/117px'te kesiliyordu.
   Neden metni de sarar: dokunmatikte `title` okunmaz, ölçüldü 77 karakterlik neden 175px kolonda tek satıra kırpılıyordu. */
#rp-kok .rp-t.rp-bom-t td.rp-bom-takim, #rp-kok .rp-t.rp-bom-t td.rp-neden, #rp-kok .rp-t.rp-bom-ic td.rp-bom-kalem {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }
#rp-kok .rp-t.rp-bom-t td.rp-bom-takim .rp-ad, #rp-kok .rp-t.rp-bom-ic td.rp-bom-kalem .rp-ad { white-space: normal; }
#rp-kok .rp-t.rp-bom-t td.rp-bom-fark .rp-alt { display: block; }
/* Geniş ekranda "gg.aa.yyyy" 85px yeter; Baz gün payı nedene verilir (colgroup `var()` okur, satır-içi stil medyayı ezmez). */
@media (min-width: 1280px) {
    #rp-kok .rp-bom-t { --rp-bom-baz: 8%; --rp-bom-neden: 28%; }
}

.rp-sessiz { margin-top: 16px; }
.rp-etiket-yok { display: inline-block; margin-left: 6px; padding: 1px 7px;
    border-radius: var(--r-full); background: var(--st-pack-bg); color: var(--st-pack-fg);
    font: 600 10.5px/1.7 var(--font); white-space: nowrap; }
.rp-kisit { margin: 16px 0 8px; padding: 12px 14px; background: var(--content-bg);
    border: 1px solid var(--border); border-radius: var(--r-md); }
.rp-kisit summary { min-height: 24px; display: inline-flex; align-items: center;
    font: 700 12px/1 var(--font); color: var(--text-secondary); cursor: pointer; }
.rp-kisit ul { margin: 10px 0 0 18px; font: 400 12px/1.75 var(--font);
    color: var(--text-muted); max-width: 82ch; }
.rp-kisit li { margin-bottom: 5px; }

.rp-onizleme-yuk { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.rp-onizleme-bas { padding: 0 0 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--border); font: 400 13px/1.6 var(--font);
    color: var(--text-secondary); }
.rp-onizleme-bas .rp-alt { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
/* 🔴 Mail HTML'i iframe içinde İZOLE edilir — panel CSS'ini miras alsaydı önizleme
   gerçekte gidecek maili YANLIŞ gösterirdi. */
.rp-onizleme { width: 100%; height: 62vh; min-height: 320px; border: 1px solid var(--border);
    border-radius: var(--r-sm); background: var(--card-bg); }

@media (min-width: 520px) {
    .rp-serit { grid-template-columns: repeat(2, 1fr); }
    .rp-kanallar { grid-template-columns: repeat(3, 1fr); }
    .rp-tarih { flex: 0 0 160px; }
    .rp-cipler { flex: 1 1 auto; }
}

@media (min-width: 900px) {
    /* 🔴 auto-fit YASAK (1440px'te 5 kolon verip düzeni dağıtır) — SABİT kolon sayısı. */
    .rp-serit { grid-template-columns: repeat(5, 1fr); }
    .rp-perde-ack { flex: 0 1 auto; }
    .rp-perde-cizgi { display: block; flex: 1 1 auto; height: 1px;
        background: var(--border); align-self: center; }
}

/* 1024'te (içerik ~858px) iki tablo yan yana BİLEREK açılmıyor: 410px'lik tablo okunmuyor. */
@media (min-width: 1280px) {
    .rp-ikili-kolon { grid-template-columns: 1fr 1fr; }
    /* 🔴 `.rp-ikili-gnis` (1.62fr 1fr) SİLİNDİ: 1.271.0'da onu kullanan tek yer olan
       İŞLENEN bölümü tam genişliğe alındı; kural ölü kalmıştı. */
}

/* ── Telefon (<=768px): dokunma hedefi ve okunurluk ezmeleri ──
   🔴 Bu blok min-width bloklarından SONRA gelir. Media query özgüllük EKLEMEZ, sırayla
      kazanır; dar ekranda min-width blokları zaten eşleşmediği için çakışma yok.
   🔴 Web'i BOZMAZ: kuralların tamamı max-width içindedir, >=769px'te hiçbiri uygulanmaz. */
@media (max-width: 768px) {
    /* Ölçüldü 320px'te: akordiyon düğmesi 30x30 idi — parmakla basılmıyordu. */
    .rp-ac { width: 44px; height: 44px; }
    .rp-ac-h { padding-left: 0; }
    /* Ölçüldü: <summary> 73x24. Yalnız BU ekranın uyarı şeridi ve kısıt bloğu;
       paylaşılan .gl-notice diğer ekranlarda dokunulmadan kalır. */
    .rp-notice .gl-notice-detail summary,
    .rp-kisit summary { min-height: 44px; }
    /* Ölçüldü: en küçük yazılar 10,5 / 11 / 12px idi. Tablo hücreleri yoğunluk
       sözleşmesine (--tbl-fs 13px) bağlıdır ve DEĞİŞTİRİLMEZ; tablo DIŞI metinler
       okunur tabana çekildi. */
    .rp-serit-et { font-size: 12px; }
    .rp-serit-alt, .rp-perde-ack, .rp-dipnot, .rp-kanal-alt,
    .rp-bom-neden, .rp-uyari-serit, .rp-kisit ul { font-size: 13px; }
    .rp-etiket-yok { font-size: 11.5px; }
    .rp-t .rp-alt { font-size: 12px; }
}

@media print {
    .rp-eylem, .rp-filtre, .rp-ac { display: none; }
    .rp-kart { break-inside: avoid; }
}

/* ── ÇİFT BORÇ UYARISI (fatura formu, 1.259.0) ────────────────────────────────
   Sevk ve fatura cari hesaba BAĞIMSIZ borç yazar. Aynı mal ikisinden de geçerse
   müşteri iki kez borçlanır. Kullanıcı kararı: engelleme, UYAR.
   Kalemler tablosunun üstünde durur; amber = "dur ve oku", rose değil (hata değil). */
.inv-sevk-uyari {
    /* 🔴 Ham hex yerine token. Ayrıca sol kenar ÇİZGİSİ zeminle aynı renkteydi
       (#f0cfa6 beyazda 1,48:1) → "aksan" işlevini hiç görmüyordu; --amber ile 3,55:1. */
    box-sizing: border-box;
    margin: 0 0 16px; padding: 12px 14px;
    background: var(--st-pack-bg); border: 1px solid var(--st-pack-bd);
    border-left: 3px solid var(--amber);
    border-radius: 8px; color: var(--st-pack-fg); font-size: 12px; line-height: 1.55;
}
.inv-sevk-uyari[hidden] { display: none; }

/* Belge No kolonu — ÖLÇÜLEREK ayarlandı (1.366.1).
   🔴 SORUN TÜRE GÖRE DEĞİŞİYOR: satış/iade numarası OTOMATİK ve 16 karakterde
      sabit (FAT-2026-000001) → 120px'te 1440'ta yalnız 2-5px taşıyor. ALIŞ ise
      tedarikçiden gelen SERBEST metin (ör. "T04-c1-2.0915-A509", 19 karakter) →
      120px'te 1440'ta 18-32px taşıyor ve ellipsis'le okunamaz hâle geliyor.
   🔴 KİMDEN ALINIYOR: Cari kolonu `<col>` genişliksizdir, yani esneyen kolondur;
      Belge No'ya verilen her piksel ondan gider. Kullanıcı 1.365.0'da "Belge
      No'yu kısalt, Cari'ye ver" demişti — o karar KORUNUYOR. Genişletme YALNIZ
      ≥1200px'te yapılır, çünkü ölçüm orada Cari'nin 226px olduğunu gösterdi;
      1280px'te Cari zaten 47px'e sıkışıyor (bilinen darboğaz) ve orada 30px
      almak onu okunamaz hâle getirirdi.
   🦷 Dar ekranda DEĞİŞMİYOR: punto küçüldüğü için taşma zaten 5-7px ve yer yok.
      "Büyütme bişeyi" — yalnız ölçülen yerde, ölçülen kadar. */
:root { --tbl-belgeno-col: 120px; }
@media (min-width: 1200px) {
    :root { --tbl-belgeno-col: 150px; }
}

/* Cari kimlik bilgisi — form içinde salt okunur şerit (1.366.0).
   Yoğunluk sözleşmesi: 11px yardımcı metin, gövdeden (13px) küçük ama
   mutlak tabanın (9px) üstünde; hiyerarşi korunur. */
/* Fatura başlığı sağ blok — tür seçici + yeni belge düğmesi (1.366.0).
   Alt sekmeler kaldırıldığı için tür SEÇİMİ artık ekranın kendisinde.
   Yoğunluk sözleşmesi: seçici ekran denetimidir, birincil eylem değil.
   🦷 ÖLÇÜLEN GERÇEK YÜKSEKLİK 32px DEĞİL, BREAKPOINT'E GÖRE 32/34/40px.
      Aşağıdaki `height:32px` yalnız ≥769px'te render edilen kutudur; ≤640'ta
      global `.peron-layout .peron-select { min-height:34px }`, 641-768'de ise
      40px kuralı devreye giriyor. `min-height`, `height`i EZMEZ — son ölçü
      `max(height, min-height)`tır (bu dosyada `.stk-act` ile aynı tuzak
      yaşanmıştı). Üçü de yoğun yüzey eşiğini (≥28px) geçiyor; hiçbir şey
      BÜYÜTÜLMEDİ, önceki yorumun "32px" iddiası EKSİKTİ. */
.inv-head-sag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-head-sag .inv-tur-lbl {
    font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
/* 🔴🔴 "YENİ … FATURASI" DÜĞMESİ SEÇİCİNİN YANINA GELDİ (1.367.0).
   Kullanıcı: *"yeni fatura oluşturma butonunu fatura türünün yanına taşı yanında
   olsun altında değil"*.
   🔴 KÖK NEDEN MARKUP DEĞİLDİ — üçü ZATEN aynı `.inv-head-sag` flex kabındaydı.
      Seçici temel `.peron-select { width: 100% }` kuralını miras alıyor; flex
      kabında `width:100%` bir flex-basis gibi davranıp tüm satırı kaplıyor ve
      düğmeyi `flex-wrap` ile ALT SATIRA itiyordu. Ekran görüntüsünde görülen
      "etiket / seçici / düğme alt alta" düzeni buydu.
   🦷 DÜĞME BÜYÜTÜLMEDİ, TAŞAN KUTU FRENLENDİ: `width: auto` seçiciyi içeriği
      kadar yapar, `max-width` ise uzun bir seçenek adının kabı yeniden şişirmesini
      engeller. Punto ve yükseklik (32px) DEĞİŞMEDİ — "büyütme bişeyi". */
.inv-head-sag #inv-tur { width: auto; min-width: 104px; max-width: 160px; height: 32px; }
/* Dar ekranda başlığın altına iner; etiket satırı tek başına yer yemesin.
   🔴 SINIR 560 DEĞİL 768 (ölçüldü). 561-768 bandında seçici temel
      `.peron-select { width:100% }` kuralını miras alıyordu ve 768px'te
      734×40px ölçülmüştü — 104px'lik bir açılır liste için. "Yeni Fatura"
      düğmesi 48px altına düşüyordu: üst üste binme yok ama oran bozuk.
   🦷 Kutu BÜYÜTÜLMEDİ, taşan kutu FRENLENDİ: `flex:1` + `min-width:0`
      seçiciyi kabına sığdırır ve komşusunu alta itmez. */
@media (max-width: 768px) {
    .inv-head-sag { width: 100%; gap: 6px; }
    .inv-head-sag #inv-tur { flex: 1; min-width: 0; }
}

.inv-cari-bilgi {
    box-sizing: border-box;
    grid-column: 1 / -1;
    margin: 8px 0 0; padding: 8px 10px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-muted);
    font-size: 11px; line-height: 1.5;
}
.inv-cari-bilgi[hidden] { display: none; }
.inv-cari-bilgi .icb-satir { display: flex; flex-wrap: wrap; gap: 4px 16px; }
/* 🔴 ÖLÇÜLDÜ: boşluksuz tek parça uzun bir vergi dairesi/adres değerinde kutu
   320px'te 167px, 360'ta 127px, 390'da 101px TAŞIYORDU. Sayfa yatay kaydırma
   ÜRETMİYORDU ama metin kartın kenarında kesiliyor ve OKUNAMIYORDU —
   kaydırılamayan taşma, görünmeyen veri demektir. `white-space: normal` tek
   başına yetmez: o yalnız BOŞLUKTAN kırar. */
.inv-cari-bilgi .icb-p { white-space: nowrap; overflow-wrap: anywhere; }
.inv-cari-bilgi .icb-p b { color: var(--text-primary); font-weight: 600; }
.inv-cari-bilgi .icb-yok { color: var(--rose-ink); font-style: normal; }
.inv-cari-bilgi .icb-uyari {
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
    /* 🔴 `--rose` DEĞİL `--rose-ink`: ölçüldü, --rose beyaz kart üzerinde 4,459:1
       veriyor; WCAG AA normal metin eşiği 4,5:1 — 0,04 ile KALIYORDU (11px punto
       "büyük metin" sayılmaz). `--rose-ink` projenin KENDİ ölçümüyle beyazda
       5,49:1. Yeni token uydurulmadı, var olan kullanıldı. */
    color: var(--rose-ink);
}
/* Dar ekranda adres uzun; nowrap taşma üretmesin diye sarmaya izin ver. */
@media (max-width: 768px) {
    .inv-cari-bilgi .icb-satir { gap: 2px 12px; }
    .inv-cari-bilgi .icb-p { white-space: normal; }
}
.inv-sw-t    { font-weight: 700; margin-bottom: 6px; }
.inv-sw-list { margin: 0 0 8px; padding-left: 20px; }
.inv-sw-list li { margin: 2px 0; }
.inv-sw-list b  { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-sw-ord  { opacity: .75; font-size: 12px; }
.inv-sw-more { list-style: none; margin-left: -20px; opacity: .8; font-style: italic; }
.inv-sw-note { font-size: 12px; }


/* ════════════════════════════════════════════════════════════════════════════
   MOBİL CARİ EKRANI (1.259.0) — SALT OKUNUR bakiye listesi
   ────────────────────────────────────────────────────────────────────────────
   🔴 Yalnız `cari-mobile` ekranında kullanılan `.peron-mob-*` sınıfları →
      masaüstünü ETKİLEYEMEZ (mobil-özel ekranlar sol menüde yoktur).
   🔴 Sayılar tabular-nums + nowrap: para sütunu sarınca hizasızlık oluşuyor.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── SATIR: 1) ad + BAKİYE (tek satır)  2) 3 aylık ciro şeridi ──────────────
   Kullanıcı şartı: "yazıları küçült, üst satırda cari isim sağ kısmında toplam
   bakiye, hemen altına son 3 ayın ciro toplamları, bölümler büyük olmasın,
   ekrana ne kadar çok cari sığdırabilirsen sığdır."
   Eski düzen ÜÇ satırdı (ad / tür+telefon / bakiye rozeti) → 72px. Yeni düzen
   İKİ satır; tür+telefon akordiyona indi. Yükseklik ve kaç cari sığdığı
   ölçülüp bu bloğun altına yazılmıştır. */
/* Yüzde rayı yok: cari satırının ilerleme kavramı yok, 2px'lik gri şerit
   kart çerçevesiyle çakışıp çift çizgi gösteriyordu. */
.peron-mob-row.is-cari::before,
.peron-mob-row.is-cari::after { display: none; }
/* Dokunma hedefi: satır akordiyon açar → 44px ZORUNLU. */
.peron-mob-row.is-cari { min-height: 44px; }
.peron-mob-row.is-cari .peron-mob-t1 { justify-content: space-between; gap: 8px; }

/* Bakiye — satırdaki TEK renkli sayı (hiyerarşi renkle değil, ağırlık+boyutla;
   renk yalnız burada bilgi taşır ve yönü İŞARET de söyler). */
/* 🔴 Adla AYNI kademede olamaz: ikisi de 12,5px/800 iken onları ayıran TEK şey renk
   kalıyordu ("hiyerarşi renkle değil" kuralı). Bakiye bir kademe geride: 12px/700. */
.pmc-bal {
    flex-shrink: 0;
    font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: -.2px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 🔴 RENK YÖNÜ = İŞLETME SAHİBİNİN GÖZÜ, DEFTERİN DEĞİL.
   Kullanıcı: "eğer borcum var ise kırmızı, alacağım var ise yeşil olacak."
   (+) bakiye = cari BİZE borçlu = bizim ALACAĞIMIZ → YEŞİL
   (−) bakiye = biz cariye borçluyuz = bizim BORCUMUZ → KIRMIZI
   Sınıf adları `is-borc/is-alacak` DEĞİL `is-arti/is-eksi`: eski adlar defterin
   yönünü söylüyordu ve renkleri çevirince ad ile renk çelişik hale gelirdi
   ("is-borc" sınıfı yeşil boyanan bir kural = bir sonraki okuyucuyu yanıltır). */
.pmc-bal.is-arti { color: var(--green-ink); }
.pmc-bal.is-eksi { color: var(--rose-ink); }
.pmc-zero { flex-shrink: 0; font-size: 11px; line-height: 16px; color: var(--text-muted); white-space: nowrap; }
/* Baskın olmayan para birimlerinin sayısı — "+1" = bir para birimi daha var. */
/* 🔴 `opacity` YOK: alfa birleştirmesi rengi zemine yaklaştırıp kontrastı 3,44 (açık)
   / 3,87 (koyu) yapıyordu. Opaklıksız ve 10px ile ≈5,10 / 5,17 → AA geçer. */
.pmc-pb { font-size: 10px; font-weight: 700; vertical-align: super; margin-left: 1px; }

/* Ciro şeridi — 3 EŞİT kolon. `auto-fit` YASAK (düzeni dağıtır): sabit 3 kolon,
   her satırda AYNI x'te başlar → satırlar arası dikey hizalama korunur. */
.pmc-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 6px; align-items: baseline;
}
/* Sayı SAĞA dayalı (proje kuralı: rakam içeren hücre `col-num`). Ölçüldü: sola
   dayalıyken tutarların sağ kenarı bir kolon içinde 44,75px yayılıyordu.
   🔴 `space-between` DEĞİL `flex-end`: space-between etiketi hücrenin soluna,
   tutarı sağına itiyordu ve ekran görüntüsünde tutar KENDİ etiketinden çok bir
   SONRAKİ aya yakın duruyordu ("TEM  −418.458 AĞU" → sayı hangi aya ait?).
   flex-end ikisini bir ÇİFT olarak sağa yaslar: sayıların sağ kenarı yine tek
   x'te hizalı kalır, etiket sayısına yapışır. */
.pmc-m { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; min-width: 0; }
/* 🔴 BASKIYI ETİKET EMER, SAYI DEĞİL. Ölçüldü (320px): hücre içi alan 55,63px,
   veri setindeki en geniş tutar 54,84px → pay 0,79px. "−1.234.567" 65,41px,
   "−418.458 $" 64,70px isterdi ve `text-overflow` PARAYI sessizce keserdi
   ("−1.234.5…"). Etiket kısalabilir (ay konumu üç sütunda sabittir ve komşu
   satırlarda yazılı); tutar ASLA. Sığmayan uç durumda ellipsis son çare olarak
   duruyor ama JS 1.000.000+ değerleri "1,2 Mn" biçimine çevirdiği için en geniş
   olası dize "−999.999 $" = 63,61px < 80px hücre. */
.pmc-m i {
    flex: 0 1 auto; min-width: 0; overflow: hidden; font-style: normal;
    font-size: 9px; font-weight: 700; line-height: 14px; letter-spacing: .2px;
    text-transform: uppercase; color: var(--text-muted);
}
.pmc-m b {
    flex: 0 0 auto; min-width: 0;
    font-size: 11px; font-weight: 700; line-height: 14px; text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.pmc-m b.is-bos { color: var(--text-muted); font-weight: 600; }
/* 🔴 Açık kartın zemini `--pri-light`; koyu temada `--text-muted` o zeminde 4,46:1'e
   düşüyor (kapalı satırda 5,45 ile geçiyor). Yalnız açık satırda bir ton koyulaşır. */
.peron-mob-row.is-cari.is-open .pmc-m i,
.peron-mob-row.is-cari.is-open .pmc-m b.is-bos { color: var(--text-secondary); }

.peron-mob-caribody { padding: 0 8px 8px; }
.peron-mob-caribody[hidden] { display: none; }
.pmc-meta { padding: 8px 0 0; font-size: 11px; line-height: 15px; color: var(--text-muted); }

/* Ay seçici — üç eşit çip, dokunma hedefi 44px. */
.pmc-tabs { display: flex; gap: 8px; padding: 8px 0 0; }
.pmc-tab {
    flex: 1 1 0; min-width: 0; min-height: 44px;
    padding: 6px 4px; border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--card-bg, #fff); cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 700; line-height: 16px;
    color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 🔴 `--pri` DEĞİL `--pri-strong`: koyu temada --pri #5b91c7 olur ve beyaz metinle
   3,32:1 verir (AA 4,5 ister). Aynı ekrandaki `.peron-mob-filter-pill.active` bu
   dersi zaten almıştı. Ölçüldü: --pri-strong ile açık 4,91 · koyu 5,41. */
.pmc-tab.is-on { background: var(--pri-strong); border-color: var(--pri-strong); color: var(--pri-on); }

/* Ekstre özeti — 2×2 kutucuk. Okuma sırası Açılış → Borç → Alacak → Kapanış;
   sonuç sağ-altta. Etiket ÜSTTE (yan yana 320px'te sarıyordu). */
.pmc-sum {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; margin: 8px 0 2px;
    background: var(--border); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden;
}
.pmc-cur {
    grid-column: 1 / -1; padding: 4px 8px; background: var(--content-bg);
    font-size: 10px; font-weight: 800; letter-spacing: .4px; color: var(--text-muted);
}
.pmc-cell {
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px; background: var(--card-bg, #fff); min-width: 0;
}
.pmc-cell i {
    font-style: normal; font-size: 9px; font-weight: 800; line-height: 12px;
    letter-spacing: .4px; color: var(--text-muted);
}
.pmc-cell b {
    font-size: 13px; font-weight: 800; line-height: 17px; letter-spacing: -.2px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
/* Özet kutuları: BORÇ satırı bakiyeyi ARTIRIR (alacağımız büyür) → yeşil;
   ALACAK satırı bakiyeyi AZALTIR → kırmızı. Bakiye işaretiyle aynı yön. */
.pmc-cell b.is-arti { color: var(--green-ink); }
.pmc-cell b.is-eksi { color: var(--rose-ink); }

.peron-mob-cariled { display: flex; flex-direction: column; margin-top: 6px; }
.peron-mob-cariled-row {
    display: grid;
    /* 🔴 ÖLÇÜLDÜ: tam tarih ("03.07.2026") 12px'te 69px istiyor — 66px kolonda
       kırpılıyordu. Ay seçiliyken tarih GÜN.AY (38px), değilse tam (72px). */
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 8px; align-items: baseline;
    padding: 5px 0; border-top: 1px solid var(--border-light);
    font-size: 12px; line-height: 17px;
}
.peron-mob-cariled.is-kisa .peron-mob-cariled-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
.peron-mob-cariled-row:first-child { border-top: 0; }
.pmc-d { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 🔴 TEK SATIR + ellipsis: açıklamalar uzun ("Stok girişi: TAM DEVE MENTEŞE SAMET
   MASTER FRENLİ (600)") ve sarınca satır 26 → 60px oluyordu; 10 hareket akordiyonu
   793px'e çıkarıp cari satırını ekrandan atıyordu. Birincil bilgi TARİH ve TUTAR. */
.pmc-t { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmc-a { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pmc-a.is-arti { color: var(--green-ink); }
.pmc-a.is-eksi { color: var(--rose-ink); }
/* Kalem künyesi (1.350.0) — satırın ALTINA iner, ızgaranın 2. kolonundan sonuna kadar.
   🔴 SARAR, KIRPMAZ: kullanıcı *"yarıda kalmış rakam olmasın"* dedi; künyede miktar,
      birim fiyat ve KDV/iskonto oranı var — üç noktaya düşen bir rakam YALANDIR
      (1.339.0'daki "kırpılmış rakam yalandır" kuralıyla aynı gerekçe). Açıklama (.pmc-t)
      kırpılmaya devam eder çünkü tamı `title`da duruyor ve o bir RAKAM değil.
   🔴 Punto merdivenden: gövde 12px → künye 10,5px (yarım adım YASAK, 11,5 gövdeye
      fazla yakın, 9,5 tablo başlığı kademesi). */
.pmc-k {
    grid-column: 2 / -1;
    color: var(--text-muted);
    font-size: 10.5px; line-height: 14px;
    overflow-wrap: anywhere;
}
.peron-mob-cariled-row.has-kunye { row-gap: 1px; padding-bottom: 6px; }
.pmc-more, .pmc-bos {
    padding: 8px 0 2px; font-size: 11px; line-height: 15px; color: var(--text-muted);
}

.peron-mob-carisum b { color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pmc-lgnd { display: inline-block; margin-top: 4px; font-size: 11px; line-height: 15px; color: var(--text-muted); }
.pmc-lgnd b { font-weight: 800; }
.pmc-lgnd b.is-arti { color: var(--green-ink); }
.pmc-lgnd b.is-eksi { color: var(--rose-ink); }

/* 6. düğme eklendi (Cari): 320px'te 5 düğme 64px'ti, 6'da 53px kalıyor —
   dokunma hedefi 44px'in üstünde ama etiket sığmıyor → etiket 9.5px'e iner
   ve tek satırda kalır. Yükseklik DEĞİŞMEZ (hedef alanı korunur). */
@media (max-width: 380px) {
    .peron-mob-nav-item span { font-size: 9.5px; letter-spacing: -.01em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MÜŞTERİ PANELİ YÖNETİMİ (1.265.0)
 *  1) Fiyat listesindeki "Müşteri Paneli Fotoğrafları" modalı (kapak + galeri)
 *  2) Cari kartındaki portal hesabı bölümü (kod/kullanıcı/parola/menüler)
 *
 * 🔴 Bu blok dosyanın SONUNDADIR (bkz. "MOBİL SON SÖZ" kuralı): media query
 *    ÖZGÜLLÜK EKLEMEZ, sonradan gelen kural kazanır. Buraya yazılan mobil
 *    kuralların üstünü örtecek başka bir blok yok.
 * ═══════════════════════════════════════════════════════════════════════════ */

.pl-gal-hint {
    margin: 8px 0 0; font-size: 11px; line-height: 15px;
    color: var(--text-muted); text-align: center;
}

.pl-gal-modal { display: flex; flex-direction: column; gap: 16px; }
.pl-gal-sec h4 {
    margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-secondary);
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pl-gal-sec h4 small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.pl-gal-count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }

.pl-gal-cover { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
/* 🔴 auto-fit YOK: kolon sayısı her kırılımda AÇIKÇA seçilir (1440px'te 5 kolona
   dağılıp kutu oranını bozmasın). */
.pl-gal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.pl-gal-item {
    position: relative; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; background: var(--content-bg); aspect-ratio: 4 / 3;
}
.pl-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-gal-item--cover { flex: 1 1 200px; max-width: 260px; aspect-ratio: 4 / 3; }
.pl-gal-x {
    position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
    border-radius: 50%; border: 0; cursor: pointer; line-height: 1;
    background: rgba(24, 34, 46, .72); color: #fff; font-size: 17px; font-weight: 700;
}
.pl-gal-x:hover { background: var(--rose); }
.pl-gal-x:disabled { opacity: .5; cursor: default; }

.pl-gal-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; cursor: pointer; text-align: center; aspect-ratio: 4 / 3;
    border: 1.5px dashed var(--border); border-radius: 8px;
    background: var(--content-bg); color: var(--text-secondary);
    padding: 8px; min-height: 88px;
}
.pl-gal-add:hover { border-color: var(--pri); color: var(--pri-text); }
.pl-gal-add b { font-size: 13px; font-weight: 600; }
.pl-gal-add small { font-size: 11px; color: var(--text-muted); }
.pl-gal-add--sm { flex: 0 0 120px; aspect-ratio: auto; min-height: 0; padding: 10px 8px; }
.pl-gal-full { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.pl-gal-load { font-size: 12px; color: var(--text-muted); }
.pl-gal-note { margin: 0; font-size: 11px; line-height: 16px; color: var(--text-muted); }

@media (min-width: 560px) {
    .pl-gal-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 769px) {
    .pl-gal-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Cari kartı: müşteri paneli hesabı ──────────────────────────────────── */

.cp-box {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--content-bg); padding: 12px; margin-top: 4px;
}
.cp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-head h4 { margin: 0; font-size: 13px; font-weight: 700; }
.cp-state {
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    border: 1px solid currentColor; white-space: nowrap;
}
.cp-state.on  { color: var(--green); }
.cp-state.off { color: var(--text-muted); }
.cp-url { margin-left: auto; font-size: 11px; color: var(--text-muted); word-break: break-all; }

.cp-menus { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 4px; }
.cp-menu {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    min-height: 40px; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--card-bg); font-size: 13px;
}
.cp-menu:hover { border-color: var(--pri); }
.cp-menu input { width: 18px; height: 18px; accent-color: var(--pri); flex: 0 0 auto; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cp-note { margin: 8px 0 0; font-size: 11px; line-height: 16px; color: var(--text-muted); }

@media (min-width: 560px) {
    .cp-menus { grid-template-columns: repeat(2, 1fr); }
}

/* Panel hesabı uyarı şeridi — hesap KAPALI ya da cari PASİF olduğunda kalıcı
   olarak görünür. Toast KULLANILMADI: toast 3 saniyede kaybolur ve operatör
   ekrandan ayrılmadan uyarıyı bir daha göremez; bu uyarı durumu anlatır. */
.cp-uyari {
    display: block; margin: 0 0 10px; padding: 8px 10px;
    border: 1px solid var(--amber); border-radius: 8px;
    background: rgba(190, 116, 56, .08); color: var(--text-primary);
    font-size: 12px; line-height: 17px;
}
.cp-uyari b { font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════════
 * AYARLAR MERKEZİ (`peron-mod-settings.js`)
 *
 * Başlıktaki dişliden açılır; kullanıcının programla ilgili TÜM kişisel
 * özelleştirmeleri buradadır (görünüm · bildirim · hesap · uygulama).
 *
 * 🔴 MOBİL-ÖNCE yazıldı: taban kurallar dar ekran içindir, `min-width` yalnız
 *    GENİŞLETİR. Bu blok dosyanın SONUNDADIR — "media query özgüllük eklemez"
 *    tuzağı yüzünden (bkz. MOBİL KURALI) sonradan gelen bir kural onu ezemesin.
 * 🔴 Yeni sınıflar; hiçbir mevcut seçiciyi EZMEZ (masaüstü render yolu
 *    değişmez). `!important` yok, sabit hex yok — hepsi token.
 * ═══════════════════════════════════════════════════════════════════════════ */

.pset { display: grid; gap: 16px; min-width: 0; }

/* Sekme rayı — dar ekranda yatay şerit, geniş ekranda sol sütun. */
.pset-rail {
    display: flex; gap: 6px; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    scrollbar-width: thin;
}
.pset-tab {
    flex: 0 0 auto;
    min-height: 44px; padding: 0 14px;
    border: 0; border-radius: var(--r-md);
    background: transparent; color: var(--text-secondary);
    font-family: var(--font); font-size: 13px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.pset-tab:hover { background: var(--pri-light); color: var(--pri-text); }
.pset-tab.sel { background: var(--pri-strong); color: var(--pri-on, #fff); }

.pset-panel { min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.pset-sec { min-width: 0; }
.pset-sec-t {
    margin: 0 0 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted);
}

/* Satır: metin esner, kontrol sabit. `flex:1 1 0` (auto DEĞİL) → farklı uzunluktaki
   etiketler aynı x'te başlar; `auto` ile ölçülen kayma 28px idi. */
.pset-row {
    display: flex; align-items: center; gap: 14px;
    min-height: 52px; padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}
.pset-row:last-child { border-bottom: none; }
.pset-row-txt { flex: 1 1 0; min-width: 0; }
.pset-row-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pset-row-lbl { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.pset-row-hint { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

.pset-badge {
    display: inline-block; margin-left: 7px; padding: 1px 6px;
    border-radius: var(--r-sm); background: var(--pri-light); color: var(--pri-text);
    font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    vertical-align: 1px;
}

.pset-sel { min-width: 132px; max-width: 100%; }

/* Segment düğmesi (tema / menü) — iki-üç seçenekli, açılır liste açmaya değmez. */
.pset-seg {
    display: inline-flex; padding: 3px; gap: 3px;
    background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--r-md);
}
.pset-seg-btn {
    min-height: 38px; padding: 0 12px;
    border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text-secondary);
    font-family: var(--font); font-size: 12px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.pset-seg-btn:hover { color: var(--pri-text); }
.pset-seg-btn.sel { background: var(--card-bg); color: var(--pri-text); box-shadow: 0 1px 2px rgba(27, 37, 51, .10); }

/* Okuma satırı 45-75ch bandında tutulur; 532px'lik sütunda 12px metin ~88ch'ye
   çıkıyordu ve göz satır sonunda kayboluyor. */
.pset-note { margin: 0; max-width: 62ch; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.pset-sec .pset-note + .peron-av-grid { margin-top: 10px; }
.pset-push-test { margin-top: 8px; }

/* Kimlik künyesi — etiket/değer çifti; iki kolon dar ekranda alt alta. */
.pset-kv { display: grid; grid-template-columns: 1fr; gap: 2px 14px; margin: 0; }
.pset-kv dt { font-size: 11.5px; color: var(--text-muted); }
.pset-kv dd { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }

.pset-av-grid { grid-template-columns: repeat(5, 1fr); }

@media (min-width: 561px) {
    /* Ray sola geçer ve kaydırma sırasında YERİNDE kalır (sticky) — panel uzun
       olduğunda sekmeleri görmek için yukarı çıkmak gerekmesin. */
    .pset { grid-template-columns: 168px 1fr; gap: 24px; align-items: start; }
    .pset-rail {
        flex-direction: column; gap: 2px;
        overflow: visible; padding-bottom: 0;
        border-bottom: 0; border-right: 1px solid var(--border);
        padding-right: 12px;
        position: sticky; top: 0;
    }
    .pset-tab { width: 100%; text-align: left; }
    .pset-kv { grid-template-columns: 140px 1fr; align-items: baseline; }
    .pset-kv dd { margin-bottom: 4px; }
    .pset-av-grid { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 768px) {
    /* iOS: 16px altındaki kontrole odaklanınca Safari sayfayı zoomlar. */
    .pset-sel { font-size: 16px; min-height: 44px; }
    .pset-seg-btn { min-height: 44px; }
    .pset-row { min-height: 56px; }
    /* 🔴 AVATAR IZGARASI DA 5 KOLON. `min-width:561px` kuralı rayı sola alıp (168+24px)
       ızgarayı 8 kolona çıkarıyor, ama modal ancak ≥769px'te `w-md` genişliğine
       kavuşuyor. Aradaki 561-768 bandında panel sütunu DARALIRKEN kolon sayısı
       ARTIYOR: hesaplandı, 561px'te hücre 34,6px · 600px'te 39,5px — ikisi de
       44px dokunma hedefinin altında. Bu blok mobil son sözdür, kaynak sırasıyla
       `min-width` kuralını ezer. */
    .pset-av-grid { grid-template-columns: repeat(5, 1fr); }
}

/* 🔴 RAY DAR EKRANDA 4 EŞİT KOLON (kullanıcı isteği: "sekmelerin hepsi yan
   yana 4 adet olsun"). Önce 2×2 ızgara yapılmıştı çünkü dört UZUN etiket 320px'te
   355px yer istiyordu; çözüm ızgarayı bölmek değil, ETİKETİ KISALTMAK: dar ekranda
   `.pset-tab-uzun` gizlenip `.pset-tab-kisa` ("Bildirim") çıkar. Böylece dördü de
   tek sırada, kaydırmasız ve kesilmeden durur.

   🔴 IZGARA YALNIZ ≤560px İÇİNDEDİR. ≥561px'te ray zaten SOL SÜTUNDUR (.pset
      168px + 1fr) ve dört sekme orada ALT ALTA tek sıra hâlinde durur. Izgarayı
      medya sorgusunun dışına yazmak onu o 168px'lik sütuna da uyguluyordu:
      1280px'te ölçüldü — hücre 34px, etiket 72-77px, white-space:nowrap
      yüzünden etiketler birbirinin üstüne 18px ve 23,1px biniyor, sonuncusu
      panel sütununa 5,6px taşıyordu (rail scrollWidth 198 > clientWidth 167).
      Yeni bir kural eklerken bu medya sorgusunun DIŞINA çıkma. */
.pset-tab-kisa { display: none; }

@media (max-width: 560px) {
    .pset-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; overflow: visible; }
    .pset-tab { width: 100%; min-width: 0; text-align: center; }
    /* 🔴 Kolon daralınca dolgu da daraldığı için yükseklik 41,4px'e düşüyordu
       (ölçüldü) — dokunma hedefi 44px'in altında. Yükseklik açıkça sabitlenir. */
    .pset-tab { padding-left: 4px; padding-right: 4px; font-size: 11.5px; letter-spacing: -0.2px; min-height: 44px; }
    /* Uzun etiket dar kolona sığmaz; kısası çıkar. `display` değişimi metni
       tamamen değiştirir — `text-overflow` ile kırpmak yerine BİLEREK kısaltılır. */
    .pset-tab-uzun { display: none; }
    .pset-tab-kisa { display: inline; }
}

/* Başlıktaki dişli — zil ile AYNI kutu (44×44, aynı yarıçap/kenarlık).
   Kendi sınıfı; `.peron-icon-btn` (28px, plan ekranı) mirası KULLANILMAZ. */
.peron-settings-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--content-bg); color: var(--text-secondary);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(27, 37, 51, .04);
    transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
.peron-settings-btn svg { width: 21px; height: 21px; display: block; }
.peron-settings-btn:hover {
    background: var(--pri-strong); border-color: var(--pri-text); color: var(--pri-on, #fff);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(63, 116, 168, .5);
}
.peron-settings-btn:active { transform: translateY(0) scale(0.95); }
.peron-settings-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBİL BAŞLIK — SİMGELER KÜÇÜK, HEPSİ SAĞDA
   Kullanıcı: "üstteki simgeler çok büyük, küçült, sağ kısma daya hepsini."

   🔴 ÖLÇÜLDÜ (320px, düzeltme öncesi): eylem kutusu 199px yer kaplıyordu
      (3 × 44px düğme + 8px boşluklar + hap dolgusu) ve sayfa başlığına yalnız
      **41px** kalıyordu — "Dashboard" üç nokta ile kırpılıyordu. Simgeler zaten
      sağdaydı; asıl sorun başlığı YİYOR olmalarıydı.

   🔴 DOKUNMA HEDEFİ KÜÇÜLMEZ. Görsel kutu 40px'e iner, tıklama alanı `::after`
      ile 44px'te kalır. Boşluk 6px seçildi: hedefler her yönde 2px büyüyor,
      aradaki 6px'ten 2px net açıklık kalıyor → hedefler ÇAKIŞMIYOR.
      (5px boşluk + 38px kutu denendi: hedefler 1px örtüşüyordu, dokunuş hangi
      düğmeye gittiği belirsizleşiyordu.)

   Bu blok dosyanın SONUNDA: medya sorgusu özgüllük EKLEMEZ, yalnız kaynak
   sırası kazanır — :9312'deki 44px dokunma kuralını ancak buradan ezebiliriz.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .peron-header { padding: 0 8px; gap: 6px; }

    /* Başlık esner ve sağa yaslanan eylem kutusunu iter. */
    .peron-breadcrumb { flex: 1 1 auto; }
    .peron-breadcrumb .page-title { font-size: 14px; letter-spacing: -0.2px; }

    .peron-header-actions { gap: 6px; padding: 3px 5px; margin-left: auto; }

    .peron-layout .peron-header-actions > button,
    .peron-layout .peron-settings-btn,
    .peron-layout .peron-theme-toggle,
    .peron-layout .peron-notif-bell {
        width: 40px; height: 40px; border-radius: 12px; position: relative;
    }
    /* Görsel 40px, dokunma 44px. 🔴 `inset` KENAR KUTUSUNDAN DEĞİL, İÇ (padding)
       KUTUSUNDAN ölçülür: düğme 40px border-box + 1px kenarlık → iç kutu 38px.
       `-2px` verilince hedef 38+4 = **42px** oluyordu (ölçüldü: elementFromPoint
       merkezden 20,5px uzağa kadar düğmeyi döndürüyor). 44px için `-3px` gerekir
       (38+6). `inset` dört yöne 3px — hedef kenar kutusunun 2px dışına taşar,
       boşluk 6px olduğu için
       komşu hedefler arasında 2px açıklık kalır. */
    .peron-layout .peron-header-actions > button::after,
    .peron-layout .peron-notif-bell::after {
        content: ''; position: absolute; inset: -3px;
    }
    .peron-layout .peron-settings-btn svg,
    .peron-layout .peron-notif-bell svg { width: 19px; height: 19px; }
    .peron-layout .peron-theme-toggle svg { width: 17px; height: 17px; }

    /* Canlı göstergesi: hap yerine çıplak nokta — 29px yerine ~12px.
       Bilgi kaybı yok, "Canlı" etiketi zaten :3126'da gizli. */
    .peron-live-dot { padding: 0 2px; background: none; border: none; gap: 0; }
}

@media (max-width: 380px) {
    /* 🔴 Zil rozeti ile birlikte üç düğme + nokta 360px altında başlığı yeniden
       ezmeye başlıyor. Tema düğmesi burada düşer: aynı ayar **Ayarlar →
       Görünüm**'de duruyor, yani işlev kaybolmuyor, yalnız kısayol gidiyor. */
    .peron-layout .peron-theme-toggle { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   YOĞUNLUK DÜZELTMESİ ≤768px — "her şey çok büyük, sığdır" şikâyeti
   ═══════════════════════════════════════════════════════════════════════════
   ÖLÇÜLDÜ (Üretim Siparişleri listesi #po-shell, 768×900 fare + 360×740
   dokunmatik, chrome-devtools MCP):
     · .po-act-cell 4 ikonu (yazdır/düzenle/çoğalt/sil) 2×2 dizip 44×44 buton +
       4px boşluk = 92px içerik + ~16.5px hücre dolgusu → SATIR 108.5px.
       12 siparişlik listede tek hücre türü ~1300px gereksiz kaydırma demek.
     · Araç çubuğu (arama+kategori+tarih+sayfa boyu) 360px'te 4 satıra bölünüp
       196px, 768px'te 2 satır 96px tutuyor; ilk veri satırı 360px'te 426px'te
       başlıyor (hedef ~320px).
     · Tablo başlık+gövde dikey dolgusu 8px, filtre kontrolleri 44px (kural
       tabanı 40px'in üzerinde), sayfa başlığı bloğu (başlık+buton) 92px.
   Çözüm satır satır ölçülüp minimum gerekene indirildi; dokunma hedefi HİÇBİR
   yerde 40px'in altına inmiyor — küçültülen görsel kutularda dosyanın kendi
   :7583 desenindeki teknik kullanıldı (bkz. .pur-acc-toggle::after): görünmez
   ::after katmanı gerçek hedefi büyütür, satır boyu KÜÇÜLÜR.
   Masaüstü-fare (≥769px, satır :11141) ve ≥1024px HİÇ ETKİLENMEZ — tüm
   kurallar max-width:768px içinde; var olan kurallar SİLİNMEDİ, dosya sonu
   olduğu için kaynak sırasıyla ÜZERİNE yazılıyor. */
@media (max-width: 768px) {

    /* 1) İŞLEM BUTONLARI (.po-act-btn / #po-shell dahil tüm .peron-table--fixed
       listeleri) — görsel kutu 44×44 → 30×30, dokunma hedefi ::after ile 40×40
       KORUNUYOR. Komşu butonlar arası boşluk 10px: merkezler arası mesafe
       30+10=40px → görünmez ::after alanları TAM sınırında birleşir, ÇAKIŞMA
       YOK (ölçüldü: yatay ve dikey komşularda 0px örtüşme). */
    .peron-table--fixed td.col-actions .po-act-btn {
        box-sizing: border-box;
        position: relative;
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
        padding: 0;
    }
    .peron-table--fixed td.col-actions .po-act-btn svg { width: 14px; height: 14px; }
    .peron-table--fixed td.col-actions .po-act-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
    /* 🔴 BOŞLUK 12px — 10px DEĞİL. Görsel kutu 30px, `::after` hedefi 40px, yani
       hedef her yöne 5px taşar. 10px boşlukta iki hedef TAM DEĞERLE bitişiyordu
       (kontrol turu ölçtü: merkezler tam 40px arayla, açıklık 0px) ve en riskli
       çift "Sil"in doğrudan "Çoğalt"ın ALTINDA olması. 12px → 2px ölü bölge. */
    .peron-table--fixed td.col-actions > div.po-act-cell { gap: 12px; }
    /* Gerçek dokunmatikte #po-shell .po-act-btn{min-width:44px} (id, :11152)
       ID özgüllüğüyle 30px'i ezerdi; eşdeğer id seçiciyle geçersiz kılınıyor —
       ::after yukarıda zaten tanımlı olduğundan 40px hedef burada da geçerli. */
    @media (pointer: coarse) {
        #po-shell .po-act-btn {
            width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0;
        }
    }

    /* 2) TABLO HÜCRE DOLGUSU — yalnız DİKEY 8px→6px (yatay dolguya dokunma;
       :6841'deki col-actions 4px yan-dolgu kuralı böylece etkilenmez). Her
       listede (Üretim Siparişleri, Cari Yaşlandırma, Fiş Girişi, faturalar…)
       başlık + her satır ~4px alçalır. */
    .peron-layout .peron-table th,
    .peron-layout .peron-table td { padding-top: 6px; padding-bottom: 6px; }

    /* 3) FİLTRE KONTROLLERİ — 44px → 40px (kuralın ALT SINIRI, altına inilmedi).
       Ayrıca .peron-search input zaten 40px'ti; artık tüm araç çubuğu kontrolleri
       aynı yükseklikte hizalanıyor (önceden 40/44 karışıktı). */
    .peron-select, .peron-input, .peron-textarea { min-height: 40px; }

    /* 🔴 AYARLAR MODALI SELECT'LERİ 44px KALIR. Yukarıdaki taban kural (0,1,0)
       :12120'deki `.pset-sel{min-height:44px}` ile AYNI özgüllükte ama DAHA SONRA
       geldiği için onu sessizce 40px'e düşürüyordu (ölçüldü: computed 40px, hedef
       44px). Aynı modalda `.pset-seg-btn` 44px kaldığı için kontrol yükseklikleri
       40/44 karışıyordu; :12120'nin gerekçesi zaten iOS dokunma hedefiydi. */
    .pset-sel { min-height: 44px; }

    /* 4) ARAÇ ÇUBUĞU — alt boşluk 12px→8px.
       🔴 `gap` BU KURALDAN GELMİYOR: 20+ modül araç çubuğunu satır içi
       `style="gap:8px"` ile basıyor (peron-mod-orders.js:1243 ·
       peron-mod-prodorder.js:139 · peron-mod-stock.js:644 · peron-mod-finance.js:117 …)
       ve satır içi stil medya sorgusunu KOŞULSUZ ezer. Ölçüldü: hesaplanan
       değer 8px, 6px değil. Bildirim ileride satır içi stiller `var(--tb-gap,8px)`
       kalıbına çevrilirse diye bırakıldı; net etki 2px, 20 dosyaya dokunmaya değmez.
       Bu satırın ÇALIŞAN tek yanı `margin-bottom` (peron-mod-pricelist.js hariç —
       o da satır içi margin yazıyor). */
    .peron-toolbar { gap: 6px; margin-bottom: 8px; }

    /* 5) SAYFA BAŞLIĞI BLOĞU — başlık/buton arası 10px→6px, alt boşluk 16px→10px;
       "+ Yeni …" düğmesi (.peron-btn) 42px→40px (kural tabanı). */
    .peron-page-header { gap: 6px; margin-bottom: 10px; }
    .peron-btn { min-height: 40px; }

    /* 6) SATINALMA / SİPARİŞ AKORDEONU — 6 KOLONLU IZGARA DAR EKRANDA 2 KOLON.
       Masaüstünde 6 sabit yuva (1.273.1); telefonda 6 kolon yuva başına ~55px
       bırakır ve HER değer üç noktaya kesilir — yani okunacak bilgi kalmaz.
       Izgara 2 kolona iner: yuva sayısı aynı, satır sayısı artar. Kolon SAYISI
       değiştiği için ayırıcı çizgi kuralı da (nth-child(6n+1)) burada 2n+1'e
       çevrilmek ZORUNDA; yoksa çizgiler kolon sınırlarından kayar.
       Şerit tablonun İÇİNDE olduğu için genişlik tablodan gelir → gövde KAYMAZ. */
    .pur-detail-panel { min-height: 44px; padding-left: 12px; }
    .pur-dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pur-dd { border-left: 1px solid var(--border); padding-left: 10px; }
    .pur-dd:nth-child(2n+1) { border-left: 0; padding-left: 0; }
    .pur-dd-val { font-size: 12px; }
    .pur-dd-lbl { font-size: 9.5px; }
    .pur-revert-btn, .ord-del-btn { min-height: 40px; padding-top: 0; padding-bottom: 0; }
    .ord-del-locked { min-height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBİL ANA SAYFA — "uygulama gibi" açılış ekranı (1.271.0, kullanıcı kararı)

   Kullanıcı: "mobil kısmı tamamen bir uygulama gibi yap, yani anasayfa dashboard
   kısmını tamamen mobile (kullanıcıya sadece izin verilen kısımlar) olsun."
   Seçilen düzen: GÜNÜN ÖZETİ (2-4 sayı) + BÜYÜK KISAYOL IZGARASI.

   🔴 Ölçülen sebep: 390px'te eski dashboard YALNIZ 2 kart basıyordu (Fason Takibi
      370x318 · Fiyat Listesi 370x171). Telefonda ana sayfa fiilen boştu.
   🔴 Bu sınıflar YALNIZ mobil dalda üretilir (peron-mod-dashboard.js, A.mobilDar()).
      Masaüstünde DOM'a hiç girmezler → masaüstü render yolu değişmez.
   🔴 Dokunma hedefi >= 44px, kutular arası >= 8px. Sabit px genişlik YOK; ızgara
      auto-fit DEĞİL sabit kolon (auto-fit dar ekranda tek kolona düşüp devleşiyordu).
   🔴 Renk yalnız token — gece modu token ezerek çalışır, sabit hex kırılır.
   ══════════════════════════════════════════════════════════════════════════════ */
.peron-mob-home { padding: 2px 0 8px; }
.peron-mob-home-bas { padding: 2px 2px 12px; }
.peron-mob-home-ad { font: 700 17px/1.25 var(--font); color: var(--text-primary); }
.peron-mob-home-alt { margin-top: 2px; font: 400 12px/1.3 var(--font); color: var(--text-muted); }

.peron-mob-ozet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.peron-mob-ozet-kutu { display: flex; flex-direction: column; align-items: flex-start;
    gap: 2px; min-height: 66px; padding: 10px 12px; box-sizing: border-box;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--r-md); cursor: pointer; text-align: left;
    -webkit-tap-highlight-color: transparent; }
.peron-mob-ozet-kutu:active { background: var(--content-bg); }
.peron-mob-ozet-sayi { font: 700 22px/1.1 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; }
.peron-mob-ozet-et { font: 600 11.5px/1.3 var(--font); color: var(--text-muted);
    letter-spacing: .2px; }
/* Sayı rengi durumu ANLATIR; kutunun tamamını boyamak gürültü yapıyordu. */
.peron-mob-ozet-kutu.is-rose  .peron-mob-ozet-sayi { color: var(--rose-ink, var(--rose)); }
.peron-mob-ozet-kutu.is-amber .peron-mob-ozet-sayi { color: var(--amber-ink, var(--amber)); }
.peron-mob-ozet-kutu.is-green .peron-mob-ozet-sayi { color: var(--green-ink, var(--green)); }
.peron-mob-ozet-kutu.is-pri   .peron-mob-ozet-sayi { color: var(--pri-text); }

/* 🔴 `.peron-mob-kisayol*` KURALLARI 1.288.0'DA SİLİNDİ — kullanıcı kararı:
   "dashboard ekranındaki kısa yolları kaldır … onun yerine farklı veriler ekle".
   Izgara mobil ana sayfanın yarısını yiyordu ve HİÇBİR YENİ YOL AÇMIYORDU:
   süzgeçten geçen 5 sayfanın 4'ü zaten alt navigasyon çubuğunun varsayılan
   slotu, 5.'si "Menü" çekmecesinde duruyordu (ölçüldü).
   Kurallar da BIRAKILMADI: sınıfları üreten JS kaldırıldığı için ölü kaldılar
   ve ölü CSS bir sonraki okuyucuya "demek ki bu ekran hâlâ var" diye yalan
   söyler. `grep` ile doğrulandı: hiçbir JS/PHP dosyası bu sınıfları üretmiyor. */
.peron-mob-bos { padding: 28px 16px; text-align: center;
    font: 400 14px/1.6 var(--font); color: var(--text-muted);
    background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--r-md); }


/* ─── ZİL PANELİ MOBİLDE ALT-SAYFA ─────────────────────────────────────────
   🔴 Telefonda 400px sabit genişlikli, sağ üste tutturulmuş açılır pencere ekranın
   SOLUNA taşıyordu; başlıkların yarısı görünmüyordu. Mobilde panel ekranın altına
   yapışan tam genişlikte bir sayfaya dönüşür (createModal'ın alt-sheet deseniyle
   aynı dil). `dvh` şart: `vh` adres çubuğunu saymaz ve panelin alt kenarı çubuğun
   altında kalır. Alt güvenli alan (iPhone çubuğu) padding ile bırakılır. */
@media (max-width: 768px) {
    .peron-notif-overlay { background: rgba(0, 0, 0, .35); }
    .peron-notif-panel {
        top: auto; right: 0; left: 0; bottom: 0;
        width: auto; max-width: 100%; max-height: 82dvh;
        border-radius: 16px 16px 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .peron-notif-head { padding: 14px 16px; }
    .peron-notif-head-t { font-size: 15px; }
    /* Dokunma hedefi: "Tümünü okundu işaretle" 12px bir metin düğmesiydi. */
    .peron-notif-readall { font-size: 13px; padding: 12px 4px; min-height: 44px; }
    .peron-notif-panel .peron-notif-item { padding: 14px 16px; }
}

/* Proaktif "bildirimleri aç" şeridi — telefonda.
   🔴 ALT NAVİGASYONUN ÜSTÜNDE durmalı: çubuk `.peron-mob-nav` 60px + güvenli alan.
   Şerit onun altında kalsaydı düğmeler tıklanamaz olurdu. */
@media (max-width: 768px) {
    .peron-notif-cta { left: 8px; right: 8px; width: auto; transform: none;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 12px 14px; }
    .peron-notif-cta-txt { flex: 1 1 100%; font-size: 13px; }
    .peron-notif-cta .peron-btn { min-height: 44px; flex: 1 1 auto;
        padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
    /* Alt navigasyon bu genişlikte görünür (60px) → şerit onun ÜSTÜNE çıkar. */
    .peron-notif-cta { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* Zil panelindeki "cihaz bildirimini aç" şeridi — telefonda dokunma hedefi 44px.
   Dar ekranda düğme alt satıra iner; metin kırpılmaz (izin bir kerelik karardır,
   kullanıcının ne kabul ettiğini okuyabilmesi gerekir). */
@media (max-width: 768px) {
    .peron-notif-ac { flex-wrap: wrap; padding: 12px 16px; row-gap: 8px; }
    /* 🔴 `flex-basis: 100%` KULLANMA: metin kendi satırına kaçar ve İKON TEK BAŞINA bir
       satırda kalır (ölçüldü: şerit 124px, üç satır). %60 taban ikon+metni yan yana
       tutar, düğme kendiliğinden alt satıra iner ve sağa yaslanır (şerit 88px). */
    .peron-notif-ac-txt { flex: 1 1 60%; font-size: 13px; }
    .peron-notif-ac .peron-btn { min-height: 44px; margin-left: auto;
        padding-left: 18px; padding-right: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEVKİYAT PLANI (#sp-shell)
   ═══════════════════════════════════════════════════════════════════════════
   Tamamlanmış ürünlerin gün bazlı sevk listesi. Tablo düzeni ÜRETİM TAKİBİ ile
   AYNI dili konuşur (kullanıcı kuralı: "tabloyu üretim takibi kısmı düzeninde
   yap, yazı büyüklüğü tablo düzeni gibi") → aynı .peron-table--fixed + colgroup
   + col-ellip/col-num/col-nowrap standardı, aynı yoğunluk token'ları.

   🔴 Blok DOSYA SONUNDADIR: medya sorgusu ÖZGÜLLÜK EKLEMEZ, bu ekranın dar-ekran
      kuralları dosyanın ortasındaki "Kompakt Tasarım" bloğunun ARDINDAN gelmeli
      (bkz. "MOBİL SON SÖZ" kuralı).
   🔴 Genişlikler SATIR İÇİ style ile DEĞİL burada: satır içi stil medya sorgusunu
      ezer ve kolon daraltma kuralları sessizce ölür (Üretim Takibi'nde yaşandı).
   🔴 Renkler yalnız token: sabit hex gece modunu kırar.                            */

#sp-shell .sp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Gün seçici: ‹ [tarih] › — sevkiyatçı günler arasında tek tıkla gezer.
   flex-wrap ŞART: input[type=date] UA'dan ~120px içsel minimum taşır. */
#sp-shell .sp-daypick { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }
#sp-shell .sp-daypick .peron-input { width: auto; min-width: 0; flex: 0 1 auto; }
#sp-shell .sp-daypick .peron-btn.sm { min-width: 28px; padding: 0 8px; font-size: 15px; line-height: 1; }

/* Toplu işlem çubuğu — seçim varken görünür. */
#sp-shell .sp-bulk {
    box-sizing: border-box;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 8px 12px;
    border: 1px solid var(--pri); border-radius: 10px;
    background: var(--pri-light);
}
#sp-shell .sp-bulk[hidden] { display: none; }
#sp-shell .sp-bulk-n   { font-size: 13px; color: var(--text-primary); }
#sp-shell .sp-bulk-lbl { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
#sp-shell .sp-bulk-date { width: auto; min-width: 0; flex: 0 1 auto; }

#sp-shell .sp-pager {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-top: 1px solid var(--border);
    flex-wrap: wrap; gap: 8px; background: var(--content-bg);
}

/* ── Kolon genişlikleri ─────────────────────────────────────────────────────
   Toplam 1224px — Üretim Takibi'nin 1287'sinden DAR, dolayısıyla orada sığan her
   masaüstü kabında burada da sığar. Dağıtım içerik/öneme göre (oran-orantı kuralı):
   İşlemler 208 (Sevk Et metin düğmesi ~86 + 3 simge × 26 + 3 boşluk × 3 + 2 × 10
   dolgu = 193; 208 pay bırakır), kırpılabilir üç kolon (Firma/Müşteri/Ürün) col-ellip
   + title taşır, kırpılamayan kod/rozet/tarih kolonlarına ihtiyacı kadar yer verilir. */
#sp-shell .sp-table col.spc-check   { width: 32px; }
#sp-shell .sp-table col.spc-order   { width: 128px; }
#sp-shell .sp-table col.spc-firma   { width: 118px; }
#sp-shell .sp-table col.spc-musteri { width: 100px; }
#sp-shell .sp-table col.spc-urun    { width: 126px; }
#sp-shell .sp-table col.spc-qty     { width: 72px; }
#sp-shell .sp-table col.spc-il      { width: 96px; }
#sp-shell .sp-table col.spc-nak     { width: 116px; }
#sp-shell .sp-table col.spc-day     { width: 92px; }
#sp-shell .sp-table col.spc-st      { width: 114px; }
#sp-shell .sp-table col.spc-due     { width: 88px; }
#sp-shell .sp-table col.spc-act     { width: 196px; }

/* 🔴 Gizleme kuralı col'a YAZILIR: th/td'yi display:none yapmak tabloyu DARALTMAZ
   (Üretim Takibi'nde ölçüldü: 1261→1261); daraltan şey col'un collapse edilmesidir.
   Kolon önceliği (önce düşen en az kritik): Sip. Tarihi → Müşteri → Termin.

   🔴 EŞİKLER TAHMİN DEĞİL ÖLÇÜM. Tarayıcıda (gerçek CSS + gerçek modül markup'ı)
   `.peron-table-wrap` iç genişliği ölçüldü:
       sidebar AÇIK  (>1100px):  kap = viewport − 302   (1440→1138 · 1366→1064 · 1280→978)
       sidebar MİNİ  (≤1100px):  kap = viewport − 132   (1100→968 · 1024→892)
   Her basamak, o basamaktaki EN DAR kaba tablonun SIĞMASI için seçildi:
       1600→1224 ✓ · 1440→1128 ✓ · 1366→1024 ✓ · 1280→928 ✓ · 1150→834 ✓
       1100→834 ✓ · 1024→834 ✓ (kap 892)
   ~900px altında tablo kabına sığmaz ve KENDİ kabında kayar — sözleşmenin izin
   verdiği tek kaydırma budur; `document.documentElement.scrollWidth` her genişlikte
   `clientWidth`e eşit kalır (ölçüldü). */
@media (max-width: 1599px) {
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-due { visibility: collapse; width: 0; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table > thead > tr > th:nth-child(11),
    #sp-shell :where(:not(.is-sigdir)) > .sp-table > tbody > tr > td:nth-child(11) { padding-left: 0; padding-right: 0; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-order   { width: 116px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-firma   { width: 108px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-musteri { width: 92px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-urun    { width: 116px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-qty     { width: 68px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-il      { width: 88px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-nak     { width: 108px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-day     { width: 88px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-st      { width: 108px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-act     { width: 180px; }
}
/* ≤1439 (kap 1064@1366): MÜŞTERİ düşer. Eşik 1365 DEĞİL 1439: 1366-1439 bandında
   tablo 1104px kalıyor ve kap 1064'e indiği için kabında kayıyordu (ÖLÇÜLDÜ). */
@media (max-width: 1439px) {
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-musteri { visibility: collapse; width: 0; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table > thead > tr > th:nth-child(4),
    #sp-shell :where(:not(.is-sigdir)) > .sp-table > tbody > tr > td:nth-child(4) { padding-left: 0; padding-right: 0; }
}
/* ≤1365 (kap 898@1200): kırpılabilir kolonlar daralır → 890. */
@media (max-width: 1365px) {
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-order { width: 100px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-firma { width: 92px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-urun  { width: 100px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-qty   { width: 62px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-il    { width: 78px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-nak   { width: 92px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-day   { width: 82px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-st    { width: 96px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-act   { width: 156px; }
}
/* ≤1199 (kap 799@1101 — sol menü HÂLÂ açık, mini moda ≤1100'de geçiyor): DURUM
   kolonu düşer → 794. Bilgisi satır tonunda ve "Sevk Günü" rozetinde zaten var;
   İL/İLÇE ve NAKLİYE bilerek KORUNUR (kullanıcı bu iki kolonu açıkça istedi,
   sevkiyatçının araç kararı onlara bağlı). */
@media (max-width: 1199px) {
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-st { visibility: collapse; width: 0; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table > thead > tr > th:nth-child(10),
    #sp-shell :where(:not(.is-sigdir)) > .sp-table > tbody > tr > td:nth-child(10) { padding-left: 0; padding-right: 0; }
}
/* 🔴 Simge KÜÇÜLTME yalnız FARE rejiminde: dokunmatikte 44×44 hedef kuralı geçerli
   kalır (aynı ayrım Üretim Takibi'nde de var; pointer'dan bağımsız verilince telefonda
   düğmeler 44px'in altına düşüyordu). */
@media (max-width: 1279px) and (pointer: fine) {
    #sp-shell :where(:not(.is-sigdir)) > .sp-table td.col-actions .peron-btn.sm { min-width: 23px; padding: 0 5px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table td.col-actions .peron-btn.sm svg { width: 14px; height: 14px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table td.col-actions > div { gap: 3px; }
}
/* ≤999: son sıkıştırma. Sevkiyatçının çalıştığı kolonlar (Ürün · İl/İlçe ·
   Nakliye · Sevk Günü) BİLEREK korunur; kırpma önce koda ve firmaya uygulanır. */
@media (max-width: 999px) {
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-order { width: 88px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-firma { width: 84px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-urun  { width: 88px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-qty   { width: 56px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-il    { width: 70px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-nak   { width: 80px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-day   { width: 78px; }
    #sp-shell :where(:not(.is-sigdir)) > .sp-table col.spc-act   { width: 140px; }
}

/* ── Satır ─────────────────────────────────────────────────────────────────── */
#sp-shell .sp-row.is-expandable { cursor: pointer; }
#sp-shell .sp-row.is-gecikti  > td:first-child { box-shadow: inset 3px 0 0 var(--rose); }
#sp-shell .sp-row.is-bugun    > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
#sp-shell .sp-row.is-sevk     > td { color: var(--text-muted); }
#sp-shell .sp-row.is-sevk .user-code { opacity: .85; }

#sp-shell .sp-acc-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--card-bg); color: var(--text-secondary);
    cursor: pointer; transition: transform .15s ease, background .15s ease;
}
#sp-shell .sp-acc-toggle svg { width: 13px; height: 13px; }
#sp-shell .sp-row.is-open .sp-acc-toggle { transform: rotate(90deg); background: var(--pri-strong); color: var(--pri-on); border-color: var(--pri); }
#sp-shell .sp-acc-spacer { display: inline-block; width: 22px; flex-shrink: 0; }

#sp-shell .sp-dim  { font-size: 12px; color: var(--text-secondary); }
#sp-shell .sp-late { color: var(--rose); font-weight: 600; }
#sp-shell .sp-unit { font-size: 11px; color: var(--text-muted); }
#sp-shell .sp-nodate { font-size: 11.5px; color: var(--text-muted); font-style: italic; }
#sp-shell .sp-day-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--card-bg); color: var(--text-primary);
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Başka günden taşınmış kayıt — Üretim Planı'ndaki "taşındı" işaretiyle aynı dil. */
#sp-shell .sp-moved { font-style: normal; color: var(--amber); font-size: 11px; }

/* ── Akordiyon: YALNIZ MODÜL ADLARI ────────────────────────────────────────
   Kullanıcı kuralı: "akordiyon sisteminde sadece modül isimleri gözüksün,
   ürünlerin ayrıntılı bilgileri gözükmesin". Buraya malzeme/atanan/termin EKLEME —
   o bilgi Üretim Takibi'nin akordiyonundadır. */
#sp-shell .sp-detail-td { padding: 0; background: var(--content-bg); }
#sp-shell .sp-mods {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px 10px 44px;
}
#sp-shell .sp-mods-cap  { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
#sp-shell .sp-mods-list { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
#sp-shell .sp-mod {
    display: inline-flex; align-items: baseline; gap: 4px;
    padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--card-bg); color: var(--text-primary);
    font-size: 12px; line-height: 1.5;
}
#sp-shell .sp-mod i { font-style: normal; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#sp-shell .sp-mod.is-sevk  { background: var(--st-ship-bg); border-color: var(--st-ship-bd); color: var(--st-ship-fg); }
#sp-shell .sp-mod.is-iptal { color: var(--text-muted); text-decoration: line-through; }

/* ══ MOBİL (≤768) — TABLO DEĞİL, KART ═════════════════════════════════════════
   🔴🔴 KULLANICI KURALI: "her tablo KENDİ KABINDAN TAŞMAMALI" ve "her iş mobil
      uyumlu olmak zorunda". Bu ekranı sevkiyatçı SAHADA TELEFONDAN okuyor.
      ÖLÇÜLDÜ (390px, gerçek modül markup'ı): 11 kolonlu tablo 754px, kabı 366px
      → kullanıcı her satır için YATAY KAYDIRMAK zorundaydı. Bu yüzden ≤768'de
      tablo `display:block` ile ÇÖZÜLÜR ve her satır bir KARTA dönüşür:

          [✓] ÜRÜN ADI                         [Durum]
              FİRMA                            2 adet
              MÜŞTERİ                          📅 14.08
              SİPARİŞ NO
          [ Sevk Et ] [🏷] [📅] [✕]

   🔴 Hücreler `data-sp` ADIYLA yerleştirilir, `nth-child` ile DEĞİL: kolon
      eklenince/çıkınca mobil düzen sessizce kaymasın.
   🔴 `display:block` colgroup'u ve `table-layout:fixed`i devre dışı bırakır →
      masaüstü kolon genişlikleri bu blokta HİÇ rol oynamaz. Blok tamamen
      `@media (max-width:768px)` içinde: masaüstü render yolu DEĞİŞMEZ.
   🔴 Sipariş tarihi ve termin telefonda GİZLENİR — ikisi de masaüstünde zaten
      ilk düşen kolonlar (≤1599 / ≤1365) ve günlük sevkiyat listesinde ikincil. */
@media (max-width: 768px) {
    #sp-shell .sp-head-actions { width: 100%; }
    #sp-shell .sp-head-actions .peron-btn { flex: 1 1 auto; min-height: 44px; }
    #sp-shell .sp-daypick { width: 100%; }
    #sp-shell .sp-daypick .peron-input { flex: 1 1 auto; font-size: 16px; }
    /* iOS Safari 16px altındaki input'a odaklanınca sayfayı ZOOMLAR. */
    /* 🔴 44px DOKUNMA HEDEFİ araç çubuğunun KENDİSİNDE de geçerli: ölçüldü, arama
       kutusu · gün seçici · durum/sayfa seçicileri 40px'te kalıyordu (kural ≥44). */
    #sp-shell .sp-bulk-date, #sp-shell #sp-search, #sp-shell .peron-select { font-size: 16px; }
    #sp-shell .peron-search { min-height: 44px; }
    #sp-shell #sp-search, #sp-shell #sp-date, #sp-shell .peron-select,
    #sp-shell .sp-bulk-date { min-height: 44px; }
    #sp-shell .sp-daypick .peron-btn.sm { min-width: 44px; min-height: 44px; }
    #sp-shell .sp-bulk { flex-direction: column; align-items: stretch; }
    #sp-shell .sp-bulk .peron-btn { min-height: 44px; }
    /* Sayfa boyu seçici telefonda GİZLENİR: 44px'lik bir satırı tek başına yiyordu ve
       varsayılan 200 kayıt bir günlük sevkiyat listesinin çok üstünde. Liste yine
       sayfalayıcıdan gezilebilir. */
    #sp-shell #sp-perpage { display: none; }

    /* Tablo → kart listesi. Kap artık kaymaz (içerik genişliği kabı aşmaz). */
    #sp-shell .peron-table-wrap { overflow-x: visible; }
    /* 🔴 `min-width: 0` ŞART. Global tablo kuralı `.peron-table` üzerine
       `min-width: max-content` koyuyor (geniş tablolar kabında kaysın diye). Kart
       düzeninde bu kural tabloyu 596px'te KİLİTLİYOR ve `width:100%` hiçbir işe
       yaramıyordu (ölçüldü: hesaplanan genişlik 596,375px, kap 366px). Taban
       kuralı ezmeden "neden sığmıyor" sorusunun cevabı bulunamaz. */
    #sp-shell .sp-table { display: block; width: 100%; min-width: 0; max-width: 100%; table-layout: auto; }
    /* 🔴 `colgroup`/`col` GİZLENMEK ZORUNDA. Tablo `display:block` olunca bu iki eleman
       artık "tablo kolonu" değil SIRADAN BLOK olur ve `width:96px` gibi genişlikleriyle
       satır satır çizilirler. ÖLÇÜLDÜ (390px): 11 `col` yan yana yığılıp kabı 1050px'e
       çıkarıyordu — kart düzeni doğruydu, taşmayı görünmez `col` blokları yapıyordu. */
    #sp-shell .sp-table > colgroup { display: none; }
    #sp-shell .sp-table > thead { display: none; }
    #sp-shell .sp-table > tbody { display: block; max-width: 100%; }
    /* 🔴 ÜÇÜNCÜ SÜTUN `auto` DEĞİL `minmax(0, auto)`: `auto` içeriğin max-content'ini
       taban alır ve uzun bir durum rozeti ("Sevk Edildi · 14.08.2026") satırı kabın
       DIŞINA taşırır (ölçüldü: 390px'te satır 416px). `box-sizing` ve `max-width`
       burada AÇIKÇA beyan edilir — dolgu + %100 genişlik aksi hâlde taşar. */
    #sp-shell .sp-table > tbody > tr.sp-row {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) minmax(0, auto);
        grid-template-areas:
            "chk urun    st"
            "chk firma   qty"
            "chk musteri day"
            "chk nak     il"
            "chk order   order"
            "act act     act";
        align-items: center;
        gap: 2px 10px;
        box-sizing: border-box;
        width: 100%; max-width: 100%;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
    }
    /* 🔴 `min-height: 0` ŞART. Genel mobil kural her tablo hücresine 44px dokunma
       yüksekliği veriyor; kart düzeninde 5 satırın HEPSİ 44px olunca kart 257px'e
       çıkıyordu (ölçüldü) ve 844px'lik telefonda ekrana 1,6 ürün sığıyordu. 44px
       kuralı METİN hücresine değil, DOKUNULAN öğeye (düğme/kutucuk) aittir — o
       hedefler aşağıda ayrıca 44px'e sabitlenmiştir. Kart 257 → 128px. */
    /* 🔴 `height: auto` ŞART — ve `min-height: 0` TEK BAŞINA YETMEZ. Tablo yoğunluk
       sözleşmesi hücreye SABİT bir `height` veriyor; kart düzeninde beş satırın
       hepsi o yüksekliğe kilitleniyor ve kart 257px oluyordu (ölçüldü). `height:auto`
       ile 257 → 165px, yani 844px'lik telefonda 1,6 yerine ~3,5 ürün görünür.
       44px dokunma hedefi METİN hücresinin değil, DOKUNULAN öğenin sorumluluğudur
       (düğmeler/kutucuk aşağıda ayrıca sabitleniyor). */
    #sp-shell .sp-table > tbody > tr.sp-row > td {
        display: block; border: 0; padding: 0;
        min-width: 0; max-width: 100%;
        min-height: 0; height: auto;
        line-height: 1.45;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="check"]   { grid-area: chk; align-self: start; padding-top: 2px; }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="urun"]    { grid-area: urun; font-size: 14px; font-weight: 600; color: var(--text-primary); }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="st"]      { grid-area: st; text-align: right; }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="firma"]   { grid-area: firma; font-size: 13px; color: var(--text-secondary); }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="musteri"] { grid-area: musteri; font-size: 12px; color: var(--text-muted); }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="qty"]     { grid-area: qty; text-align: right; font-size: 13px; }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="day"]     { grid-area: day; text-align: right; }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="order"]   { grid-area: order; }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="act"]     { grid-area: act; overflow: visible; margin-top: 8px; }
    /* Nakliye + il/ilçe telefonda TEK satırı paylaşır: sevkiyatçının araç kararı
       bu ikisine bağlı, kart düzeninden düşürülemezler. */
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="nak"]     { grid-area: nak; font-size: 12px; }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="il"]      { grid-area: il; text-align: right; font-size: 12px; }
    /* 🔴 Nakliyeci düğmesi telefonda DOKUNULAN bir hedeftir → 44px (ölçüldü: 32px'te
       kalıyordu). Kart 199 → 211px olur; kullanıcı bu iki alanı açıkça istedi. */
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="nak"] .sp-nak-btn {
        min-height: 44px; width: 100%; justify-content: flex-start;
    }
    /* Telefonda ikincil olan kolon: masaüstünde de ilk düşen. */
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="due"] { display: none; }

    /* Izgara çocuklarının İÇ sarmalayıcıları da daralabilmeli: `min-width:0` yalnız
       ızgara öğesine (td) verilirse, içindeki flex/inline kutular kendi max-content'ini
       dayatıp satırı yine taşırır. */
    #sp-shell .sp-table > tbody > tr.sp-row > td .po-no-cell { min-width: 0; }
    #sp-shell .sp-table > tbody > tr.sp-row > td .user-code {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="st"] .peron-badge {
        max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    }
    #sp-shell .sp-table > tbody > tr.sp-row > td[data-sp="act"] > div {
        display: flex; gap: 8px; flex-wrap: wrap; max-width: 100%;
    }
    /* 1.365.0: 44px -> yogunluk sozlesmesi. "Sevk Et" BIRINCIL eylemdir ve
       dokunmatikte 36px olur — kullanicinin birincil esigi (>=36) korunur. */
    #sp-shell td.col-actions .peron-btn { min-height: var(--tbl-ctl-h); }
    #sp-shell td.col-actions .peron-btn.sm { min-width: var(--tbl-ctl-h); min-height: var(--tbl-ctl-h); }
    /* "Sevk Et" birincil eylemdir → kalan genişliği kaplar, ikonlar yanında kalır. */
    #sp-shell td.col-actions .sp-ship-btn { flex: 1 1 120px; min-width: 0; justify-content: center; }
    #sp-shell .sp-cb { width: 24px; height: 24px; }
    /* 🔴 Psodo genisletme BURADA CALISMAZ: kart duzeninde satir `display:grid` ve
       hucreler `overflow:hidden` (:15003) -> ::after KIRPILIYOR. OLCULDU: inset -2px
       ve -4px denendi, fiili isabet yuksekligi 22px'te KALDI. Bu yuzden tek calisan
       yol kutuyu mutlak tabana (24px) cikarmak. Bos satirdaki ayirici da ayni olcuye
       gelir, yoksa kod sutunu 2px kayar. */
    #sp-shell .sp-acc-toggle { width: 24px; height: 24px; }
    #sp-shell .sp-acc-spacer { width: 24px; }

    /* 🔴 Durum şeridi telefonda KALDIRILIR. Masaüstünde `td:first-child`e vurulan
       inset gölge satırın SOL KENARIDIR; kart düzeninde o hücre seçim kutusudur ve
       şerit kutunun yanında anlamsız bir çizgiye dönüşüyordu (ekran görüntüsüyle
       doğrulandı). Durumu zaten sağ üstteki rozet söylüyor; ayrıca "kartın sol
       kenarında aksan çizgisi" tasarım sözleşmesinde YASAKLI desenler arasında. */
    #sp-shell .sp-table > tbody > tr.sp-row > td:first-child { box-shadow: none; }

    /* Akordiyon satırı da blok: modül çipleri kartın altında akar. */
    #sp-shell .sp-table > tbody > tr.sp-detail-row { display: block; }
    #sp-shell .sp-table > tbody > tr.sp-detail-row[hidden] { display: none; }
    #sp-shell .sp-table > tbody > tr.sp-detail-row > td { display: block; width: 100%; }
    #sp-shell .sp-mods { padding: 8px 12px 12px; }

    /* Boş durum satırı da blok olmalı, yoksa hücre genişliği çöker. */
    #sp-shell .sp-table > tbody > tr:not(.sp-row):not(.sp-detail-row) { display: block; }
    #sp-shell .sp-table > tbody > tr:not(.sp-row):not(.sp-detail-row) > td { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEVKİYAT PLANI — 1.275.0 EKLERİ
   ═══════════════════════════════════════════════════════════════════════════
   Nakliye firması · il/ilçe · sevk edilenler raporu (iki tarih arası) ·
   dashboard bölümü · telefonun kendi sevkiyat ekranı.
   🔴 Blok DOSYA SONUNDA: medya sorgusu özgüllük eklemez, dar-ekran kuralları
      "Kompakt Tasarım" bloğunun ARDINDAN gelmeli (MOBİL SON SÖZ kuralı).
   🔴 Renkler yalnız token — sabit hex gece modunu kırar.                        */

/* ── Sevk tarihi aralığı (yalnız "Sevk Edilen" görünümünde) ───────────────── */
#sp-shell .sp-range {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0;
}
#sp-shell .sp-range[hidden] { display: none; }
#sp-shell .sp-daypick[hidden] { display: none; }
#sp-shell .sp-range .peron-input { width: auto; min-width: 0; flex: 0 1 auto; }
#sp-shell .sp-range-lbl { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
#sp-shell .sp-range-sep { color: var(--text-muted); }

/* ── Sevk edilenler özeti ──────────────────────────────────────────────────
   Kullanıcı: "hangi tarihlerde toplam kaç adet ürün sevk edilmiş … ürün
   toplamları yazsın … oran orantı çok önemli."
   🔴 Kutu sayısı SABİT 5 ve ızgara `auto-fit` DEĞİL: auto-fit 1440px'te kutuları
      dağıtıp aralarında 200px'lik ölü alan bırakıyor (tasarım sözleşmesi md. 3). */
#sp-shell .sp-ozet {
    box-sizing: border-box;
    margin-bottom: 12px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--card-bg);
}
#sp-shell .sp-ozet[hidden] { display: none; }
#sp-shell .sp-ozet-bas {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
#sp-shell .sp-ozet-t  { font-size: 13px; font-weight: 700; color: var(--text-primary); }
#sp-shell .sp-ozet-ar {
    font-size: 12px; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
#sp-shell .sp-ozet-kutular {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
#sp-shell .sp-ozet-kutu {
    box-sizing: border-box; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border-light); border-radius: 8px;
    background: var(--content-bg);
}
#sp-shell .sp-ozet-v {
    font-size: 19px; font-weight: 700; line-height: 1.15; color: var(--pri-text);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
#sp-shell .sp-ozet-e { font-size: 11.5px; color: var(--text-secondary); }

#sp-shell .sp-ozet-det { margin-top: 12px; }
#sp-shell .sp-ozet-det > summary {
    cursor: pointer; list-style: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; min-height: 32px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--content-bg);
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
#sp-shell .sp-ozet-det > summary::-webkit-details-marker { display: none; }
#sp-shell .sp-ozet-det > summary::before { content: '▸'; color: var(--text-muted); }
#sp-shell .sp-ozet-det[open] > summary::before { content: '▾'; }
#sp-shell .sp-ozet-det .peron-table-wrap { margin-top: 8px; }
#sp-shell .sp-ozet-tablo col.spo-no    { width: 40px; }
#sp-shell .sp-ozet-tablo col.spo-kod   { width: 120px; }
#sp-shell .sp-ozet-tablo col.spo-ad    { width: 220px; }
#sp-shell .sp-ozet-tablo col.spo-bar   { width: 160px; }
#sp-shell .sp-ozet-tablo col.spo-satir { width: 72px; }
#sp-shell .sp-ozet-tablo col.spo-mik   { width: 116px; }
/* Dağılım çubuğu — KAREKÖK ölçekli (JS'te), `min-width` YOK: 2px'lik taban
   sıfır olmayan küçük değeri "var" gibi değil, sıfırı "var" gibi gösterirdi. */
#sp-shell .sp-bar {
    display: block; height: 8px; border-radius: 999px;
    background: var(--border-light); overflow: hidden;
}
#sp-shell .sp-bar > i { display: block; height: 100%; background: var(--pri); border-radius: 999px; }

/* ── Nakliye hücresi ───────────────────────────────────────────────────────
   Kaynağı görsel olarak ayrılır: cari kartından türeyen değer SOLUK ve kesik
   çizgili, elle yazılan değer NET. Ayrılmazsa operatör otomatik değeri
   "onaylanmış" sanar. */
#sp-shell .sp-nak-td { padding-top: 0; padding-bottom: 0; }
#sp-shell .sp-nak-btn {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    min-height: 28px; padding: 2px 6px;
    border: 1px solid transparent; border-radius: 6px;
    background: none; color: inherit; cursor: pointer; text-align: left;
    font: inherit;
}
#sp-shell .sp-nak-btn:hover { border-color: var(--border); background: var(--pri-light); }
/* 🔴 SİMGEYE AÇIK ÖLÇÜ. `iconSVG(name, size)` genişliği YALNIZ `size` verilirse
   satır içi yazar; verilmezse SVG kabını doldurur. Ölçüm düzeneğinde tam bu oldu:
   ölçüsüz simge 82×82 büyüdü ve TABLO SATIRINI 33px'ten 89px'e çıkardı. Satır içi
   ölçüye güvenmek yerine kural burada da beyan edilir. */
#sp-shell .sp-nak-btn svg { flex: 0 0 auto; width: 12px; height: 12px; opacity: .55; }
/* Metin esner, simge sabit kalır: `min-width:0` olmadan flex öğesi max-content'ini
   dayatır ve düğme hücreyi taşırır. */
#sp-shell .sp-nak, #sp-shell .sp-nak-yok {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; line-height: 1.5;
}
#sp-shell .sp-nak { color: var(--text-primary); }
#sp-shell .sp-nak.is-oto { color: var(--text-secondary); border-bottom: 1px dashed var(--border); }
#sp-shell .sp-nak-yok { color: var(--text-muted); font-style: italic; font-size: 11.5px; }
/* Prefikssiz: `createModal()` overlay'i `#sp-shell` DIŞINA (body) ekliyor.
   Sınıf adı tekil, başka ekranda kullanılmıyor. */
.spc-oneri { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ═══ DASHBOARD — SEVKİYAT PLANI BÖLÜMÜ ═══════════════════════════════════
   Kullanıcı: "bugün, yarın 'sevkiyat planı' diye bölüm aç; önce cari isim,
   sonra müşteri ismi, sonra ürün ismi." Satır düzeni Termin Takvimi ile ORTAK
   (`dash-cmu-*`) — aynı bilgi için ikinci bir görsel dil yaratılmaz.            */
#dash-shipplan-card .dash-sp-grup { border-bottom: 1px solid var(--border-light); }
#dash-shipplan-card .dash-sp-grup:last-child { border-bottom: 0; }
#dash-shipplan-card .dash-sp-cap {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    position: sticky; top: 0; z-index: 1;
    padding: 6px 14px;
    background: var(--content-bg); border-bottom: 1px solid var(--border-light);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-muted);
}
#dash-shipplan-card .dash-sp-cap > span {
    padding: 1px 7px; border-radius: 999px;
    background: var(--pri-light); color: var(--pri-text);
    font-size: 11px; font-variant-numeric: tabular-nums;
}
#dash-shipplan-card .dash-sp-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 14px; border-bottom: 1px solid var(--border-light);
}
#dash-shipplan-card .dash-sp-row:last-child { border-bottom: 0; }
#dash-shipplan-card .dash-sp-main { min-width: 0; flex: 1 1 auto; }
#dash-shipplan-card .dash-sp-right {
    display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto;
}
#dash-shipplan-card .dash-sp-il  { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
#dash-shipplan-card .dash-sp-mik {
    font-size: 12px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
#dash-shipplan-card .dash-sp-bos { padding: 10px 14px; font-size: 12px; color: var(--text-muted); }
/* 🔴 KAPSAM HATASI (2026-09-13 ölçümle bulundu): kural yalnız
   `#dash-shipplan-card`e bağlıydı, ama bu şerit `#dash-sevkrapor-card` içinde
   de basılıyor. Orada hiçbir punto kuralı tutmuyordu ve `<button>` tarayıcı
   varsayılanına (13,33px) düşüyordu — sayfanın en büyük gövde metni oydu.
   Kural artık karta değil ŞERİDİN KENDİSİNE bağlı. */
.dash-sp-uyari,
#dash-shipplan-card .dash-sp-uyari {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    padding: 8px 14px; border: 0; border-bottom: 1px solid var(--amber-border);
    background: var(--st-wait-bg); color: var(--amber-ink);
    font-size: 12px; font-weight: 600; cursor: pointer;
}

/* ═══ MOBİL ANA SAYFA — SEVKİYAT BÖLÜMÜ ═══════════════════════════════════ */
.peron-mob-sevk {
    box-sizing: border-box; width: 100%; max-width: 100%;
    display: block; text-align: left; margin: 0 0 14px;
    padding: 0; border: 1px solid var(--border); border-radius: 14px;
    background: var(--card-bg); color: inherit; cursor: pointer;
    overflow: hidden;
}
.peron-mob-sevk .mob-sp-bas {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 11px 14px; border-bottom: 1px solid var(--border-light);
    font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.peron-mob-sevk .mob-sp-bas > span {
    font-size: 11.5px; font-weight: 600; color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peron-mob-sevk .mob-sp-uyari {
    padding: 7px 14px; border-bottom: 1px solid var(--border-light);
    /* 🔴 METİN İÇİN `--rose-ink`. Ham `--rose` (#c2545a) DOLGU rengidir ve beyaz
       zeminde ~4,46:1 — 12px kalın metin için AA eşiği 4,5:1'in ALTINDA. Masaüstü
       karşılığı (`.dash-sp-uyari`) zaten `--amber-ink` kullanıyor. */
    font-size: 12px; font-weight: 600; color: var(--rose-ink);
}
.peron-mob-sevk .mob-sp-cap {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 14px; background: var(--content-bg);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-muted);
}
.peron-mob-sevk .mob-sp-cap > span {
    padding: 1px 7px; border-radius: 999px;
    background: var(--pri-light); color: var(--pri-text);
    font-size: 11px; font-variant-numeric: tabular-nums;
}
.peron-mob-sevk .mob-sp-row { padding: 7px 14px; border-bottom: 1px solid var(--border-light); }
.peron-mob-sevk .mob-sp-blok:last-child .mob-sp-row:last-child { border-bottom: 0; }
.peron-mob-sevk .mob-sp-cari {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peron-mob-sevk .mob-sp-mus {
    font-size: 12px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peron-mob-sevk .mob-sp-alt {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-top: 1px;
}
.peron-mob-sevk .mob-sp-urun {
    min-width: 0; font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peron-mob-sevk .mob-sp-mik {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peron-mob-sevk .mob-sp-daha { padding: 7px 14px; font-size: 12px; color: var(--pri-text); font-weight: 600; }

/* ═══ MOBİL SEVKİYAT EKRANI (#msp-screen) ═════════════════════════════════
   BUGÜN · YARIN · TÜMÜ (kullanıcı sırası). Salt okunur.                         */
#msp-screen .peron-mob-seg { margin-bottom: 8px; }
/* 🔴 44px DOKUNMA HEDEFİ. Paylaşılan `.peron-mob-seg-btn` 30px yükseklikte (ölçüldü);
   kural burada EKRANA KAPSAMLI uygulanır — genel sınıfı ezmek Depo ekranının
   ölçülmüş düzenini de değiştirirdi. */
#msp-screen .peron-mob-seg-btn { min-height: 44px; }
#msp-screen .msp-say {
    font-style: normal; margin-left: 6px; padding: 0 6px;
    border-radius: 999px; background: var(--border-light); color: var(--text-secondary);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
#msp-screen .peron-mob-seg-btn.active .msp-say { background: var(--pri-strong); color: var(--pri-on); }
#msp-screen .msp-say:empty { display: none; }

#msp-screen .msp-row {
    box-sizing: border-box; width: 100%; max-width: 100%;
    padding: 10px 14px; border-bottom: 1px solid var(--border-light);
}
#msp-screen .msp-l1 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
#msp-screen .msp-cari {
    min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Gün etiketi = kullanıcının "hangi tarihin planında belli olsun" kuralının cevabı. */
#msp-screen .msp-gun {
    flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card-bg);
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
#msp-screen .msp-row.is-bugun   .msp-gun { border-color: var(--amber-border); color: var(--amber-ink); }
#msp-screen .msp-row.is-gecikti .msp-gun { border-color: var(--rose);  color: var(--rose-ink); }
#msp-screen .msp-row.is-sevk    .msp-gun { border-color: var(--green); color: var(--green-ink); }
#msp-screen .msp-row.is-sevk .msp-cari,
#msp-screen .msp-row.is-sevk .msp-urun { color: var(--text-muted); }
#msp-screen .msp-l2 {
    font-size: 12px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#msp-screen .msp-l3 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-top: 2px;
}
#msp-screen .msp-urun {
    min-width: 0; font-size: 13px; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#msp-screen .msp-mik {
    flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
#msp-screen .msp-l4 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
#msp-screen .msp-et {
    max-width: 100%; padding: 1px 7px; border-radius: 6px;
    background: var(--content-bg); color: var(--text-muted);
    font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#msp-screen .msp-et.is-nak { background: var(--pri-light); color: var(--pri-text); font-weight: 600; }

/* ── Dar ekran ayarları ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* 🔴 Özet kutuları 5 kolondan 2'ye iner. 390px'te 5 kolon = kutu başına 66px
       ve "1.234.567" gibi bir sayı KIRPILIRDI. */
    #sp-shell .sp-ozet-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sp-shell .sp-ozet-v { font-size: 17px; }
    #sp-shell .sp-range { width: 100%; }
    #sp-shell .sp-range .peron-input { flex: 1 1 130px; font-size: 16px; min-height: 44px; }
    #sp-shell .sp-range .peron-btn.sm { min-height: 44px; }
    #sp-shell .sp-ozet-det > summary { min-height: 44px; }
    /* Ürün toplamları tablosunda dağılım çubuğu düşer: 360px'te tabloyu tek başına
       taşırıyordu, bilgisi zaten "Toplam" kolonunda var. */
    #sp-shell .sp-ozet-tablo col.spo-bar { visibility: collapse; width: 0; }
    #sp-shell .sp-ozet-tablo > thead > tr > th:nth-child(4),
    #sp-shell .sp-ozet-tablo > tbody > tr > td:nth-child(4) { padding-left: 0; padding-right: 0; }
    #sp-shell .sp-ozet-tablo col.spo-kod { width: 92px; }
    #sp-shell .sp-ozet-tablo col.spo-ad  { width: 130px; }
    #sp-shell .sp-ozet-tablo col.spo-mik { width: 96px; }
}
@media (max-width: 480px) {
    #sp-shell .sp-ozet-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    #sp-shell .sp-ozet { padding: 10px; }
    /* 🔴 ÜRÜN KODU da düşer. ÖLÇÜLDÜ (390px): kod kolonuyla birlikte özet tablosu
       430px, kabı 346px → tablo kendi kabında kayıyordu. Kod, ürün adının yanında
       ikincil bilgi; asıl soru "hangi üründen kaç adet çıktı". */
    #sp-shell .sp-ozet-tablo col.spo-kod { visibility: collapse; width: 0; }
    #sp-shell .sp-ozet-tablo > thead > tr > th:nth-child(2),
    #sp-shell .sp-ozet-tablo > tbody > tr > td:nth-child(2) { padding-left: 0; padding-right: 0; }
    #sp-shell .sp-ozet-tablo col.spo-ad    { width: 126px; }
    #sp-shell .sp-ozet-tablo col.spo-satir { width: 58px; }
    #sp-shell .sp-ozet-tablo col.spo-mik   { width: 92px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SİPARİŞ MAİLLERİ — MOBİL (1.276.0)
   🔴 DOSYANIN SONUNDA: media query ÖZGÜLLÜK EKLEMEZ. Bu kurallar dosyanın
      ortasına yazılsaydı sonraki `.peron-mob-*` blokları onları sessizce ezerdi
      ve düzeltme ÖLÜ kalırdı (aynı tuzak "Kompakt Tasarım" bloğunda yaşandı).
   🔴 Masaüstü (≥641px) HİÇ etkilenmez: ekranın kendisi yalnız ≤640px'te açılır,
      `.peron-mob-*` sınıfları da yalnız mobil kabuklarda kullanılır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Başlık satırı: esneyen arama kabuğu + sabit ikon düğmesi.
   🔴 Düğme `.peron-mob-tools`un İÇİNE KONULAMAZ. O kabuk `height:42px` +
   `overflow:hidden` taşır (kategori+arama'yı tek kutu gibi göstermek için) →
   46px'lik düğmeyi üstten/alttan 2'şer piksel KIRPAR ve dokunulabilir yüksekliği
   41px'e düşürür (44 kuralının altı; ölçüldü: y=64-65 bandı sayfaya isabet
   ediyordu, düğmeye değil). Bu satır kabuğun DIŞINDA ve `overflow` taşımaz.
   Kabuğun 42px'i burada 46'ya çıkar → iki kontrol de kenar kenara hizalı ve
   ikisi de ≥44px. Kapsam sınıfı yüzünden Depo'nun kabuğu 42px kalır. */
.peron-mob-tools-satir { display: flex; align-items: center; gap: 8px; }
.peron-mob-tools-satir .peron-mob-tools { flex: 1 1 auto; min-width: 0; height: 46px; }
/* 🔴 8px BOŞLUK — çakışmayı ÇÖZER, taraf tutmaz.
   `.peron-mob-filter-scroll` altında `margin-top:-7px` + `padding:7px 0` ile
   YUKARI biner (çipin dokunma alanını görsel yükseklik harcamadan büyüten bilinen
   numara) ve DOM'da sonra geldiği için üstte kalır. Ölçüldü: y=105-112 bandında
   `elementFromPoint` çipi döndürüyordu → düğmenin fiili dokunulabilir yüksekliği
   46 değil **39px**. Bu sıfır toplamlı bir kavga: `z-index` ile satırı öne almak
   düğmeyi 46'ya çıkarıyor ama çipi 44 → 37'ye düşürüyordu. 8px boşluk ikisini de
   kurtarır (ölçüldü: düğme 46 · arama 44 · çip 44) ve zaten kuralın kendisidir —
   "komşu dokunma hedefleri arası ≥8px". Depo/Üretim bu satır sınıfını
   KULLANMADIĞI için oradaki sıkı yerleşim aynen korunur. */
.peron-mob-tools-satir { margin-bottom: 8px; }

/* İkon düğmesi — kare bir ikon düğmesi için mobil sette karşılık YOKTU:
   `.peron-mob-find-x` 32px ve arama kutusunun İÇİNDE yaşıyor, `.peron-mob-cat`
   ise %40 genişlikte bir <select>. Dokunma hedefi 44×44 → yeni ve TEK sınıf. */
.peron-mob-ikon-btn {
    flex: 0 0 auto;
    width: 46px; height: 46px;          /* .peron-mob-find ile aynı yükseklik → hizalı */
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border); border-radius: 12px;
    background: var(--card-bg, #fff); color: var(--pri-text);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s;
}
.peron-mob-ikon-btn:active { background: var(--pri-light); border-color: var(--pri-text); }
.peron-mob-ikon-btn svg { width: 21px; height: 21px; }

/* Kart satırı — tablo DEĞİL. `.peron-mob-row` ızgarası (1fr auto auto) korunur;
   rozet sağ sütuna oturur, üç metin satırı sol sütunda dikey akar. */
.peron-mob-row.is-oml { cursor: default; align-items: start; padding: 9px 8px 10px; }
.peron-mob-row.is-oml::before,
.peron-mob-row.is-oml::after { display: none; }   /* yüzde rayı yok — bu bir kayıt listesi */

/* Tarih şeridi: "Gönderim …  Okunma …" — etiket soluk, değer okunur.
   🔴 Gövde metni 13px DEĞİL: dar ekranda taban ≥14px (kullanıcı kuralı). */
.peron-mob-oml-tarih {
    display: flex; flex-wrap: wrap; gap: 2px 10px;
    margin-top: 3px; font-size: 14px; color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.peron-mob-oml-tarih i { font-style: normal; color: var(--text-muted); margin-right: 3px; }

/* Rozet mobilde de aynı bileşen — yeni renk TANIMLANMADI, `.peron-badge`in
   success/danger varyantları (gece modu dahil) olduğu gibi kullanılır. */
.peron-mob-row.is-oml .peron-badge { white-space: nowrap; }

/* 360px altında rozet + firma adı aynı satırda sıkışıyordu; rozet alta iner. */
@media (max-width: 359px) {
    .peron-mob-row.is-oml { grid-template-columns: minmax(0, 1fr); }
    .peron-mob-row.is-oml .peron-mob-row-side { margin-top: 6px; }
}

/* 🔴 PUNTO TABANI — YALNIZ BU EKRANDA (`.is-oml` kapsamında).
   Ölçüldü (390px): `.peron-mob-lead` 12,5px · `.peron-mob-sub` 11px · rozet 11px.
   Mobil tabanı ≥14px. Ama bu üç sınıf Depo/Üretim/Plan/Cari ekranlarında da
   kullanılıyor ve oralarda punto BİLEREK küçük — o listeler yoğun ("daha çok stok
   kartı gözüksün", satır 86px'e ölçülmüş). Global büyütmek onların satır
   yüksekliğini ve ekrana sığan kayıt sayısını değiştirirdi.
   Bu ekran SEYREK (kart başına 3 satır) → artış burada bedelsiz. */
.peron-mob-row.is-oml .peron-mob-lead { font-size: 15px; }
.peron-mob-row.is-oml .peron-mob-sub  { font-size: 14px; }
/* Rozet gövde metni değil, kısa bir etiket çipi — 14px'e çıkarmak satırı şişirir.
   11 → 12,5px: aynı ailedeki aşama çipleriyle tutarlı, okunurluk artıyor. */
.peron-mob-row.is-oml .peron-badge { font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBİL YOĞUNLUK + ÜST BOŞLUK — 1.276.2
   ────────────────────────────────────────────────────────────────────────────
   Kullanıcı (ekran görüntüsüyle): "üst kısımda boşluk var bunu kapat, genel
   olarak mobilde tabloların HEPSİNDE böyle boşluk var" · "simgeler, yazılar,
   tablolar her şey çok büyük, normal mobil uygulaması gibi daha temiz olsun".

   Bu blok dosyanın EN SONUNDA: media query özgüllük EKLEMEZ, kaynak sırası
   kazanır (aynı tuzak bu dosyada iki kez yaşandı).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TELEFONUN KENDİ YAZI BÜYÜTMESİNİ KİLİTLE ──────────────────────────
   `peron-panel.css`te bu beyan HİÇ YOKTU (ölçüldü: computed değer `auto`),
   `peron-personnel.css`te ise VAR. `auto` iken Android Chrome iki şey yapar:
   (a) geniş metin bloklarını kendi kararıyla büyütür ("font boosting"),
   (b) kullanıcının Ayarlar → Erişilebilirlik → Yazı boyutu ölçeğini uygular.
   İkisi de CSS'te yazan px'i ekranda BAŞKA bir px yapar; yoğunluk için
   ölçtüğümüz her değer telefonda kayar. 100% = "benim px'im px kalsın". */
.peron-layout,
.peron-layout .peron-content {
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
}

@media (max-width: 768px) {
    /* ── 2 · ÜST BOŞLUK / SIZAN ŞERİT ─────────────────────────────────────
       ÖLÇÜLEN ARIZA: `.peron-content`in üst dolgusu (≤480px'te 10px, 481-768'de
       14px) yapışkan başlığın ÜSTÜNDE boyanmamış bir şerit bırakıyordu.
       `position:sticky` scrollport'un tepesine (`top:0`) yapışmak İSTER ama
       kapsayıcı bloğunun (= `.peron-mob-screen`in içerik kutusu) dışına
       ÇIKAMAZ; kutu dolgudan sonra başladığı için başlık o şeride hiç
       ulaşamıyor ve liste kartları ORADAN GEÇİYORDU. Kullanıcının ekran
       görüntüsünde arama kutusunun üstünde görünen "1 kalem · Muhammed"
       satırı tam olarak budur — boşluk değil, SIZINTI.
       🔴 NEGATİF KENAR BOŞLUĞU ÇÖZMEZ — DENENDİ VE ÖLÇÜLDÜ. Ekranı `margin-top:-10px`
          ile yukarı çekmek kapsayıcı bloğu 56px'e taşıyor ama `top:0` eşiği hâlâ
          scrollport'un DOLGU kutusundan (66px) hesaplanıyor; yapışkan başlık kendini
          10px AŞAĞI sabitliyor ve şerit aynen geri geliyor (ölçüldü: ekran 56, başlık
          66, liste 152 → hem şerit hem 10px'lik örtüşme).
       DOĞRUSU: eşiği taşıyan DOLGUYU kaldırmak. Böylece scrollport dolgu kutusu =
       56px, başlık oraya yapışır, kendi zeminini boyar ve altından hiçbir şey geçmez.
       Yalnız mobil ekran BARINDIRAN kapsayıcı hedeflenir — masaüstü tablosu açık bir
       sayfa dar ekranda kendi üst dolgusunu KORUR. `:has()` desteklenmezse kural
       yok sayılır ve eski (kusurlu ama çalışan) görünüme düşülür. */
    .peron-layout .peron-content:has(> .peron-mob-screen) { padding-top: 0; }

    /* Şerit artık YOK; onun yerine yapışkan başlığın KENDİ dolgusu var — fark
       şu ki bu dolgu BOYANIR, altından içerik geçmez. 14px ölü alan → 5px nefes. */
    .peron-mob-sticky { padding-top: 5px; }

    /* ── 3 · SÜZGEÇ ÇİPLERİ İLE İLK KAYIT ARASI ───────────────────────────
       Ölçüldü (393px): çipin görsel altı 142px, ilk kart 172px → 30px ölü alan.
       Kaynak üç ayrı kural: çip kabının `margin-bottom:8` + yapışkan bloğun
       `padding-bottom:5` + `margin-bottom:2` (üstüne çip kabının kendi 7px
       dokunma dolgusu). Üçü de küçültülür; çipin 7px'i KORUNUR çünkü o dolgu
       görsel değil, dokunma hedefini 30px'ten 44px'e çıkaran şeydir.
       Yeni toplam ≈ 11px. */
    .peron-mob-sticky .peron-mob-filter-scroll { margin-bottom: 0; }
    .peron-mob-sticky { padding-bottom: 2px; margin-bottom: 0; }

    /* Arama satırı ile çipler arasındaki 8px de fazlaydı — dokunma hedefleri
       çakışmadan 6px yeter (çipin −7px negatif üst kenarı bunu ZATEN yiyor,
       bkz. `.peron-mob-tools-satir` notu). */
    .peron-mob-sticky .peron-mob-tools-satir { margin-bottom: 6px; }

    /* ── 4 · SİPARİŞ MAİLLERİ KARTI — uygulamanın geri kalanıyla AYNI DİL ──
       🔴 BU EKRAN UYGULAMANIN EN BÜYÜK YAZISIYDI ve aykırıydı: 15px/800 başlık,
          14px/700 ikincil, 14px tarih (393px'te İKİ SATIRA sarıp kartın %40'ını
          yiyordu), 12,5px rozet → kart 92px, ekranda 6,8 kayıt.
          Depo/Üretim/Plan/Cari ekranları ise 11-12,5px ve kullanıcı o yoğunluğu
          bilerek istemişti ("daha çok stok kartı gözüksün").
       Burada boyut DÜŞÜRÜLÜRKEN okunurluk AĞIRLIK ve RENK ile korunuyor:
       başlık tek belirgin öge (700), ikincil bilgi normal ağırlıkta ve soluk —
       eskiden ikisi de kalındı, o yüzden hiçbir hiyerarşi yoktu ve her şey
       "büyük" görünüyordu. Modern liste satırı böyle kurulur. */
    .peron-mob-row.is-oml { padding: 7px 8px 8px; }
    .peron-mob-row.is-oml .peron-mob-lead { font-size: 13px; font-weight: 700; line-height: 17px; }
    .peron-mob-row.is-oml .peron-mob-sub  { font-size: 11.5px; font-weight: 500; line-height: 15px; }
    .peron-mob-row.is-oml .peron-badge {
        font-size: 10px; font-weight: 700; letter-spacing: .2px; padding: 2px 7px;
    }
    /* Okunma damgası — yalnız okunmuş kayıtlarda basılır (bkz. omlMobKartHtml).
       Tek damga kaldığı için sarma ihtimali yok; yine de `nowrap` ile tarihin
       ortasından kırılması engellenir. */
    .peron-mob-oml-tarih {
        font-size: 11px; line-height: 14px; margin-top: 1px;
        flex-wrap: nowrap; white-space: nowrap; gap: 0; overflow: hidden;
        color: var(--green-ink, var(--text-muted));
    }
    .peron-mob-oml-tarih i { margin-right: 3px; color: inherit; opacity: .75; }

    /* İkincil satır artık "N kalem · Gönderen · tarih" taşıyor → sığmazsa
       üç noktayla kesilir (temel sınıfta zaten `text-overflow:ellipsis` var,
       burada yalnız sayısal hizalama eklenir; tarih rakamları zıplamasın). */
    .peron-mob-row.is-oml .peron-mob-sub { font-variant-numeric: tabular-nums; }
}

/* 🔴 İKİNCİ EŞİK: ≤480px'te `.peron-content` dolgusu 14 değil 10px'tir ve o kural
   yukarıdaki 768px bloğundan SONRA geldiği için üst dolguyu geri getirir.
   Aynı iptal burada da tekrarlanmak ZORUNDA — yoksa düzeltme yalnız 481-768px
   aralığında yaşar ve asıl hedef olan telefonda (≤480) hiç çalışmaz. */
@media (max-width: 480px) {
    .peron-layout .peron-content:has(> .peron-mob-screen) { padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MAL KABUL — MOBİL (≤640px): tablo → KART, TEK HTML ile
   ────────────────────────────────────────────────────────────────────────────
   🔴 İKİNCİ BİR ŞABLON YAZILMADI. Aynı `<tr>` çıktısı burada flex kartına
      dönüşür; ayrı bir "mobil render" yolu iki şablonun zamanla ayrışması
      demekti (biri güncellenir, diğeri unutulur). Sıralama `order` ile
      değiştirilir: ÜRÜN en üstte, gelen miktar en altta (parmakla erişilen yer).
   🔴 Blok tamamen @media içindedir → masaüstü (≥641px) render yolu DEĞİŞMEZ.
   🔴 Gelen miktar alanı 16px: iOS Safari 16px altındaki input'a odaklanınca
      sayfayı ZOOMLAR. Bu satır, tablo yoğunluğu için kullanılan 10pt kuralını
      MOBİLDE bilerek ezer (CLAUDE.md mobil kuralı).
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .mk-shell .peron-table-wrap { overflow: visible; }
    .mk-table { min-width: 0; width: 100%; display: block; table-layout: auto; }
    .mk-table thead, .mk-table colgroup { display: none; }
    .mk-table tbody { display: block; }

    .mk-table > tbody > tr.mk-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--card-bg);
        margin: 0 0 8px;
        padding: 10px 12px;
    }
    .mk-table > tbody > tr.mk-row > td {
        display: block;
        border: none;
        padding: 0;
        background: none;
        /* 🔴 ÖLÇÜLDÜ: `.peron-table > tbody > tr > td` kuralı `height: var(--tbl-row-h)`
           (44px) taşıyor. Kart modunda her hücre AYRI SATIR olduğu için o yükseklik
           6 kez tekrarlanıyor ve kart 306px'e çıkıyordu (ekranda 2,7 kart). `auto` ile
           155px: ekranda 5,4 kart. Sabit yükseklik yalnız TABLO satırı için anlamlıdır. */
        height: auto;
    }
    /* 🔴🔴 BU BLOK ÖLÜ DEĞİL — SİLMEYİN. Denetimde "JS'teki `#mk-shell` grid'i
       nasıl olsa eziyor" denildi; ez(mi)yor: `MK_MOB_CSS` **≤640px** içindedir,
       bu blok ise **≤768px**. Yani **641-768px** bandında (tablet dikey, küçük
       dizüstü) kart düzenini YALNIZ BURASI kurar. Burayı silmek o bandda
       satırları sıralı flex'e düşürür ve hücre sırası DOM sırasına oturur.
       Kolon sırası kartta ANLAM sırasına döner (DOM sırası değişmeden). */
    .mk-table td.mk-td-check  { order: 1; flex: 0 0 auto; }
    .mk-table td.mk-td-urun   { order: 2; flex: 1 1 auto; min-width: 0; }
    .mk-table td.mk-td-islem  { order: 3; flex: 0 0 auto; }
    /* 🔴 SATIR SAYISI = KART YÜKSEKLİĞİ. Ölçüldü: her bilgi kendi satırına
       konduğunda kart 220px (ekranda 3,7 kart); ikişerli eşleştirilince 178px
       (4,6 kart). Depocu listeyi kaydırarak tarar — satır sayısı doğrudan
       "bir bakışta kaç ürün" demektir. */
    .mk-table td:nth-child(3) { order: 4; flex: 1 1 auto; min-width: 0; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
    .mk-table td.mk-td-talep  { order: 5; flex: 0 0 auto; }
    /* 🔴 CARİ / MÜŞTERİ / ÜRETİM — ÜÇ AYRI HÜCRE (masaüstüyle aynı sözleşme).
       Cari ile müşteri kartta AYNI satırı paylaşır, üretim altında tam genişlik.
       Termin hücresi KALKTI — artık talep numarasının alt satırı (canlıda 264
       satırın yalnız 6'sında dolu; kendi kutusunu hak edecek kadar sık değil). */
    .mk-table td.mk-td-cari   { order: 6; flex: 1 1 auto; min-width: 0; }
    .mk-table td.mk-td-mus    { order: 7; flex: 1 1 auto; min-width: 0; text-align: right; }
    .mk-table td.mk-td-uret   { order: 8; flex: 1 1 100%; min-width: 0; }
    /* Boş hücre kartta yer kaplamaz — gerekçe JS'teki MK_MOB_CSS bloğunda. */
    .mk-table > tbody > tr.mk-row > td.is-bos { display: none; }
    .mk-table td.mk-td-sip    { order: 9; flex: 0 0 auto; }
    .mk-table td.mk-td-gelen  { order: 10; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

    /* Bağlamı kaybetmesin: başlık satırı yok, etiketi hücre kendi taşır. */
    .mk-table td.mk-td-sip::before,
    .mk-table td.mk-td-gelen::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: 4px;
    }
    .mk-table td.mk-td-gelen .mk-diff-wrap { flex: 1 1 100%; }

    /* Dokunma hedefleri — ölçüldü: kutu 17px görsel + 13px dolgu = 43px, komşu
       boşlukla birlikte 44px'i geçer; yazdır düğmesi 44×44 sabittir. */
    .mk-td-check input[type="checkbox"] { width: 24px; height: 24px; margin: 0; }
    .mk-table td.mk-td-check { padding: 11px 6px 11px 0; }
    .mk-table .mk-print { min-width: 44px; min-height: 44px; }
    .mk-table input.mk-qty {
        font-size: 16px;
        min-height: 44px;
        width: 108px;
        text-align: right;
    }
    .mk-urun { font-size: 14px; }

    /* 🔴 GRUP SEÇİM KUTUSU MOBİLDE DE DURUR. Önce `display:none` yazılmıştı ve
       kontrol turunda yakalandı: birleştirilmiş grubu tek dokunuşla seçmek tam da
       telefonda en çok gereken şey — depocu 6 siparişi tek tek işaretlemek zorunda
       kalıyordu. Satır flex olur, kutu 44px dokunma hedefini korur. */
    .mk-table > tbody > tr.mk-grp {
        display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; flex-wrap: wrap;
    }
    .mk-table > tbody > tr.mk-grp > td { display: block; border: none; background: none; padding: 0; height: auto; }
    .mk-table > tbody > tr.mk-grp > td.mk-td-check { flex: 0 0 auto; padding: 11px 6px 11px 0; }
    .mk-table > tbody > tr.mk-grp > td:last-child { flex: 1 1 auto; min-width: 0; }
    .mk-grp-sub { display: block; margin: 2px 0 0; }

    /* Bandın konumu (alta yapışık) yukarıdaki 1.416.0 bloğunda; yerleşimi modülün telefon stilinde (MK_MOB_CSS). */
    .mk-toolbar .peron-select, .mk-search { flex: 1 1 100%; max-width: none; }
    .mk-toolbar .peron-select, .mk-toolbar input { font-size: 16px; min-height: 44px; }

    /* 🔴 LOT DÜĞMESİ GERÇEK BİR DOKUNMA HEDEFİDİR — komşu rozetlerden (mk-cat,
       mk-code) farkı bu. `::after` ile görünmez alan büyütme YAPILMADI: bu kod
       tabanında o numara komşunun hedefini yiyip 46px'lik düğmeyi 39px'e
       düşürmüştü. Düğme kendi satırına geçer ve 44px'i GÖRÜNÜR olarak kaplar. */
    .mk-lot-btn { flex: 0 0 auto; min-height: 44px; min-width: 64px; font-size: 11px; padding: 0 12px; }
    .mk-urun-alt { gap: 6px 8px; }

    /* Cari · Müşteri kartta da YAN YANA kalır; üretim satırı altta tam genişlik. */
    .mk-table td.mk-td-cari,
    .mk-table td.mk-td-mus,
    .mk-table td.mk-td-uret { font-size: 12px; }

    /* Lot modalı — iOS zoom eşiği 16px, dokunma hedefi 44px. */
    .mk-lot-row { flex-wrap: wrap; }
    .mk-lot-row .mk-lot-code { flex: 1 1 100%; }
    .mk-lot-qty-wrap { flex: 1 1 auto; justify-content: flex-end; }
    .mk-lot-list .peron-input { font-size: 16px; min-height: 44px; }
    .mk-lot-qty-wrap .mk-lot-qty { width: 120px; }
    .mk-lot-del { width: 44px; height: 44px; font-size: 16px; }
    .mk-lot-foot .peron-btn { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RAPORLAR — ÜRETİM RAPORU (up-*) + iki bölümlü sekme çubuğu (rp-sekmeler)

   Günlük Operasyon Raporu'nun (12348+) yanına ikinci bir tam ekran rapor eklendi:
   iki tarih arası AŞAMA işlemleri. Bir satır = bir TAKIM; akordiyon açılınca o
   takımın modülleri ve her modülde kimin hangi aşamada ne kadar çalıştığı görünür.

   ─── DEVRALINAN OTORİTELER (yeni sistem İCAT EDİLMEDİ) ──────────────────────

   🔴🔴 `.up-t` ve `.up-ic` tabloları `rp-t` sınıfını DA taşır. `rp-t` bu dosyada
      "Raporlar tablosu yardımcı sözleşmesi"dir (12419-12448): `rp-ad`/`rp-alt`/
      `rp-kod`/`rp-para` ile `col-num`/`col-nowrap` hücrelerine tabular-nums ve
      kırpma verir. Emsal: peron-mod-reports.js'in akordiyon tablosu da
      `class="peron-table peron-table--fixed rp-t rp-ic"` yazıyor — kolon genişliği
      ayrı bir modifier, sözleşme ayrı. `rp-t` düşerse sayı kolonları hizasını,
      uzun adlar kırpılmasını SESSİZCE kaybeder.

   🔴 AŞAMA RENGİ: yeni palet YOK. `.peron-badge.prod-st-*` (~3762) üretim
      aşamalarının TEK yetkili rengidir ve Üretim Takibi ekranı da onu kullanıyor,
      yani "Döşeme" iki ekranda AYNI tonda görünür. Bu blokta aşama rengi
      TANIMLANMAZ. (İkinci sınıfın neden 'info', neden 'neutral' OLMADIĞI JS
      tarafındaki `asamaCip()` yorumunda ölçümle yazılı: sistem teması koyu olan
      kullanıcıda `html:not([data-peron-theme]) .peron-badge.neutral` kuralı 0,3,0
      özgüllükle prod-st tonunu EZİYOR ve dört aşama tek griye düşüyor.)

   🔴 YOĞUNLUK (satır yüksekliği / hücre yazı boyu) İÇİN TEK SATIR YAZILMADI:
      `.peron-table > tbody > tr > td` kuralı (~12120) `up-t`/`up-ic` `peron-table`
      taşıdığı için kendiliğinden uygulanır. `--tbl-fs` DEĞİŞTİRİLMEZ.

   🔴 FİLTRE ÇUBUĞU: `.rp-cip` ve `.peron-btn` AYNEN yeniden kullanılır. Yalnız
      native `select` için yeni bir alan sarmalayıcısı gerekiyordu: taban
      `.peron-select` 40px/13,5px'tir; dokunma hedefi (>=44px) ve iOS odak-zoom'u
      (>=16px) için bu ekranda yükseltiliyor — `.rp-filtre`nin tarih girdisinde
      yaptığının aynısı (12374).

   🔴 MOBİL: taban kurallar DAR EKRAN, `min-width` blokları yalnız BÜYÜTÜR.
      Tablo-kart dönüşümü ise bloğun SONUNDAKİ tek `max-width: 768px` içinde
      (MOBİL SON SÖZ) — desen #sp-shell'den (13521+) birebir devralındı, oradaki
      dört ölçülmüş tuzak dahil: `colgroup` gizleme, `min-width: 0`, `height: auto`,
      `min-height: 0`.

   🔴 SABİT HEX YOK — hepsi token; gece modu token ezerek çalışır.
   ══════════════════════════════════════════════════════════════════════════════ */

#up-shell { box-sizing: border-box; min-width: 0; }

/* ── Sekme çubuğu: Günlük Operasyon / Üretim Raporu ──────────────────────────
   `#up-shell` DIŞINDA tanımlı — iki bölümün PAYLAŞTIĞI sayfa seviyesi denetim,
   ve Raporlar ekranı baştan sona `#id`siz `.rp-*` konuşuyor.
   Taban: eşit bölüşen tam genişlik segment (telefon). Fare rejiminde içerik
   kadar daralan pill'e döner — ayraç yoğunluk sözleşmesiyle AYNI (pointer: fine). */
.rp-sekmeler {
    display: flex; gap: 8px;
    /* 1.433.0 — üstündeki "Raporlar" başlık satırı kaldırıldı; çubuk sayfanın İLK öğesi, üst boşluk 14 → 0. */
    margin: 0 0 16px; padding: 4px;
    box-sizing: border-box;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.rp-sekme {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px;
    border: 0; border-radius: var(--r-md); background: none;
    font: 700 13px/1.2 var(--font); color: var(--text-secondary);
    cursor: pointer; box-sizing: border-box;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: background var(--tr-fast), color var(--tr-fast);
}
/* 🔴🔴 AKTİF SEKME: DOLGULU --pri ZEMİN + AÇIK METİN KULLANILMAZ.
   ÖLÇÜLDÜ (gece modu, bu ekran): `background: var(--pri); color: var(--pri-on)`
   çifti **3,32:1** veriyor — AA eşiği 4,5. Sebep dosyanın 12471. satırında zaten
   yazılı: gece modunda `--pri` #5b91c7'ye AÇILIYOR ve açık metinle kontrast
   çöküyor. Aynı sayı (3,32) orada da ölçülmüş; yani bu tuzağa iki kez düşülmüş.
   ÇÖZÜM (aynı satırın reçetesi): AÇIK zemin + KOYU metin — iki temada da geçer.
   Ölçüm sonrası: gündüz 8,49:1 · gece 7,15:1. Seçili durum yalnız renkle değil
   AĞIRLIKLA da anlaşılır (700 → 800) ve `aria-selected` ekran okuyucuya söyler. */
.rp-sekme[aria-selected="true"] {
    background: var(--pri-light);
    color: var(--pri-text);
    font-weight: 800;
    box-shadow: inset 0 0 0 1px var(--pri-border);
}
.rp-sekme:not([aria-selected="true"]):hover { background: var(--pri-light); color: var(--text-primary); }
.rp-sekme:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* ── ÜÇ SEKME (1.281.0) — dar ekranda KISA etiket ────────────────────────────
   🔴🔴 ÖLÇÜLDÜ (320px): üç sekme eşit bölüşünce her birine ~88px kalıyor;
      "Detaylı Üretim Raporu" 13px/700 ile ~145px sürüyor → ÜÇ etiket de üç noktaya
      düşüyordu. Kısa etiket ("Detaylı") 52px sürer ve rahat sığar.
   🔴 `display: none` erişilebilirlik ağacından da düşürür — bu yüzden düğmenin
      `aria-label`ı HER ZAMAN tam adı taşır (JS tarafında yazılı).

   🔴🔴 EŞİK 620 → 1150px (1.312.0, tasarım denetimi bulgusu). 620px değeri ÜÇ sekme
      için ölçülmüştü. Sekme sayısı ÜÇTEN BEŞE çıktı ve düğmeler payı EŞİT bölüştüğü
      için bağlayıcı kısıt EN UZUN etikettir: "Detaylı Üretim Raporu" 157px sürüyor →
      beş sekme için kap ≥ 5×157 + boşluk ≈ 785px olmalı. Ölçüldü (768px, dokunmatik):
      kap 744px → sekme başına 140px → İKİ sekme kırpılıyordu ("Detaylı Üretim Ra…",
      "Hammadde Tük…"). Yani beşinci sekme yalnız kendini değil, MEVCUT bir sekmeyi de
      kırdı — regresyon.
   🔴🔴 EŞİK PENCEREYE BAKAR, KABA DEĞİL: sol menü açıkken kap = pencere − 298,
      "mini" iken − 118, dokunmatikte menü yok. En dar hâl 1101-1150 bandıdır
      (menü 240px açık): 1150 − 298 = 852px ≥ 785 ✔. 1024'te kısa etiket görünür —
      bilgi kaybı YOK, tam ad `aria-label` ve `title`da durur.
   🔴 SARMA EMNİYETİ: eşik yine de yanılırsa çubuk İKİ SATIRA sarar, etiket KIRPILMAZ.
      Sekme çubuğu bir gezinme denetimidir; kırpılmış bir sekme "hangi ekrandayım?"
      sorusunu cevapsız bırakır, sarmak bırakmaz. */
.rp-sekmeler { flex-wrap: wrap; }
.rp-sekme-uzun { display: none; }
.rp-sekme-kisa { display: inline; }
@media (min-width: 1150px) {
    .rp-sekme-uzun { display: inline; }
    .rp-sekme-kisa { display: none; }
}

@media (min-width: 769px) and (pointer: fine) {
    .rp-sekmeler { display: inline-flex; }
    .rp-sekme { flex: 0 0 auto; min-height: 34px; padding: 0 18px; }
}

/* ── Filtre çubuğu ──────────────────────────────────────────────────────────
   Beş alan (2 tarih + 3 seçim) + hazır aralık çipleri + çıktı düğmeleri.
   🔴 `input[type=date]` UA'dan ~120px içsel minimum taşır; dar ekranda alan TAM
      GENİŞLİK alır (12372'deki ölçülmüş karşı örnek: 66,9px'te tarih kırpılıyordu). */
#up-shell .up-filtre { align-items: flex-end; gap: 10px; }
#up-shell .up-f {
    display: flex; flex-direction: column; gap: 4px;
    /* 🔴 min-width 0 → 148px — gerekçe dr-f ile aynı (select değer kırpması). */
    flex: 1 1 150px; min-width: 148px; box-sizing: border-box;
}
#up-shell .up-filtre .peron-input[type="date"],
#up-shell .up-filtre .peron-select { width: 100%; min-height: 44px; font-size: 16px; }
#up-shell .up-cipler { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
#up-shell .up-eylem { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; box-sizing: border-box; }
#up-shell .up-eylem .peron-btn { flex: 1 1 auto; min-height: 44px; }

@media (min-width: 520px) {
    #up-shell .up-f--tarih { flex: 0 0 150px; }
    #up-shell .up-cipler { flex: 1 1 auto; }
}
@media (min-width: 769px) and (pointer: fine) {
    #up-shell .up-eylem { flex: 0 0 auto; margin-left: auto; }
    #up-shell .up-eylem .peron-btn { flex: 0 0 auto; min-height: 32px; }
}

/* ── Özet şerit: `.rp-serit` gramerinin AYNISI, tek fark kutu sayısı ──────────
   🔴 `auto-fit` YASAK (düzeni dağıtır) — SABİT kolon sayısı.
   🔴 `.rp-serit`in 900px kuralını (5 kolon) ezmesi SIRAYA DEĞİL ÖZGÜLLÜĞE dayanır:
      `#up-shell .up-serit` (1,1,0) çıplak `.rp-serit` (0,1,0) kuralını her koşulda
      geçer. (Bu yorum ilk sürümde "eşit özgüllükte, sonra geldiği için kazanır"
      diyordu — YANLIŞTI ve bloğu yukarı taşıyacak bir sonraki okuyucuyu
      "sıraya güvenebilirim" diye yanıltırdı.)
   🔴 900px'te 6 kolon DEĞİL 3: altı kutunun ikisinin etiketi uzun ("Toplam süre",
      "Personel") ve 900-1279 bandında kap ~600-860px; altıya bölününce kutu
      100-143px'e iner ve etiket sarar. Altı kolon 1280px'ten itibaren açılır. */
#up-shell .up-serit { box-sizing: border-box; }
@media (min-width: 900px) {
    #up-shell .up-serit { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    #up-shell .up-serit { grid-template-columns: repeat(6, 1fr); }
}

/* ── Aşama dağılımı şeridi ───────────────────────────────────────────────────
   Bilgi amaçlı, TIKLANMAZ, bu yüzden 44px dokunma hedefi kuralı burada geçmez
   (kural yalnız dokunulan öğeler için). Renk çipin kendisinden (prod-st-*) gelir. */
#up-shell .up-asama-serit {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 16px; box-sizing: border-box;
}
#up-shell .up-asama-cip {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
    padding: 5px 11px; box-sizing: border-box; max-width: 100%;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--r-full);
}
#up-shell .up-asama-cip i {
    font-style: normal; font-size: 11.5px; color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Ana tablo ───────────────────────────────────────────────────────────────
   Kolon bütçesi: 38px sabit + %80 (yedi yüzdeli kolon) + AUTO (Ürün, kalanı emer).
   `table-layout: fixed` altında px + yüzde + auto karışımı, peron-mod-reports.js'in
   "Üretilen Ürünler" tablosunda ZATEN kullanılan ve doğrulanmış desendir. */
#up-shell .up-wrap { box-sizing: border-box; }
/* 🔴 GENİŞLİKLER SINIFLA, satır içi `style` ile DEĞİL: satır içi stil medya sorgusunu
   EZER ve aşağıdaki dar-masaüstü kolon düşürmesi ASLA çalışmazdı. */
#up-shell .up-t col.upc-ac      { width: 38px; }
/* 🔴 18 → 17,5% ve süre 8 → 8,5% (1.339.0 — tasarım denetimi, 1024px):
   "262s 48dk" 73px isterken süre kolonu 70,6px veriyordu. `overflow: visible`
   olduğu için metin görsel olarak KESİLMİYOR ama komşu kolona bir pıksel bırakmıyor
   ve eşiği deliyor. Fark, metin taşıyan (ve `col-ellip` ile güvenli olan) CARİ
   kolonundan yarım puan alınarak karşılandı — sayıdan sayıya aktarılsaydı başka
   bir rakam kırpılırdı. */
#up-shell .up-t col.upc-cari    { width: 17.5%; }
/* 🔴 müş 15→14: ürün kolonu 1024px'te "BELVİA KOLTUK TAKIMI"yı (136px)
   120px'e sığdırıp kırpıyordu (ölçüldü) — 2 puan ürüne aktarıldı (aşağıda hakediş de 13→12). */
#up-shell .up-t col.upc-mus     { width: 14%; }
/* upc-urun: genişliksiz — AUTO, kalanı emer. */
#up-shell .up-t col.upc-asama   { width: 12%; }
#up-shell .up-t col.upc-modul   { width: 7%; }
#up-shell .up-t col.upc-islem   { width: 7%; }
#up-shell .up-t col.upc-sure    { width: 8.5%; }
#up-shell .up-t col.upc-hakedis { width: 12%; }

#up-shell .up-ic col.upic-no       { width: 34px; }
/* upic-modul: genişliksiz — AUTO. */
#up-shell .up-ic col.upic-asama    { width: 14%; }
#up-shell .up-ic col.upic-personel { width: 18%; }
#up-shell .up-ic col.upic-zaman    { width: 16%; }
#up-shell .up-ic col.upic-sure     { width: 9%; }
#up-shell .up-ic col.upic-adet     { width: 8%; }
#up-shell .up-ic col.upic-hakedis  { width: 12%; }

/* ── DAR MASAÜSTÜ (769-1023px): TABLO KABINA SIĞDIRILIR ──────────────────────
   🔴🔴 ÖLÇÜLDÜ (900px, gerçek veri): tablo 844px sürüyor, kabı 758px → tablo KENDİ
      kabında yatay kayıyordu. Sayfa gövdesi kaymıyordu ama kullanıcı şartı
      "tablo kabından TAŞMAYACAK".
   🔴 SEBEP `.peron-table--fixed { min-width: max-content }` (6164): tablo, hücre
      içeriklerinin doğal genişlikleri toplamının ALTINA inemiyor. O kural "dar
      ekranda metin harf harf alt alta dizilmesin" diye konmuş; BU tabloda geçerli
      değil, çünkü metin kolonları `col-ellip` taşıyor — taşan ad üç noktayla kısalır
      ve tam değeri `title`da durur. Aynı kaçış yolu `.prod-log-table` (2498) ve
      `.rsv-table` (8209) için de kullanılıyor.
   🔴 `<col>` + `visibility: collapse` ile kolon DÜŞÜRMEK DENENDİ ve BIRAKILDI:
      844 → 813px yaptı (yetmedi, kap 758) ve `min-width: 0` eklendiğinde tablo
      kabın %88'ine (667px) çekilip sağda 91px BOŞLUK bıraktı — collapse edilen
      kolonun yüzdesi tablodan tamamen düşüyor. `min-width: 0` TEK BAŞINA hem
      taşmayı bitiriyor hem dokuz kolonu da koruyor: kap ne ise tablo o.
   🔴 İÇ TABLO DA GEREKLİ: dış tablo daralınca akordiyon gövdesinin kabı da
      daralıyor ve iç tablo (773px) aynı sebeple taşıyordu. */
@media (max-width: 1023px) {
    #up-shell .up-t,
    #up-shell .up-ic { min-width: 0; }
    /* Başlık `nowrap` (6226) olduğu için dar kolonda komşusunun üstüne taşardı. */
    #up-shell .up-t > thead > tr > th,
    #up-shell .up-ic > thead > tr > th { overflow: hidden; text-overflow: ellipsis; }
    /* Dar bandda Aşama çipi tek satırda kalsın; Cari/Müşteri bir puan genişler. */
    #up-shell .up-t col.upc-cari  { width: 19%; }
    #up-shell .up-t col.upc-mus   { width: 16%; }
    #up-shell .up-t col.upc-asama { width: 13%; }
}
#up-shell .up-asamalar { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
/* Sipariş no ikinci satırda ve rakam taşır, hizalı ve kırpılabilir olmalı. */
#up-shell .up-t td .up-sip { font-variant-numeric: tabular-nums; }
#up-shell .up-detay-td { padding: 0; background: var(--border-light); }
/* Akordiyon içi tablo KENDİ kabında kayar; dış kartın gölgesi/kenarı/yükseklik
   sınırı devralınmaz (yoksa kart içinde ikinci bir dikey kaydırma bölgesi doğar). */
#up-shell .up-ic-wrap { max-height: none; border: 0; border-radius: 0;
    box-shadow: none; background: transparent; overflow-y: visible; }
#up-shell .up-ic-bos { padding: 14px; font: 400 12px/1.6 var(--font); color: var(--text-muted); }
#up-shell .up-ic .up-ok { color: var(--text-muted); }
#up-shell .up-kisit { margin-top: 16px; }
/* 🔴 BİRİM ETİKETİ MASAÜSTÜNDE GİZLİ. Tabloda kolon başlığı "Modül"/"İşlem"/
   "Hakediş (₺)" zaten yazıyor; hücrede tekrar etmek yoğunluğu bozar. Kart
   düzeninde ise BAŞLIK SATIRI YOK — ölçüldü (390px): kartın sağ kolonu
   "4 / 4 / 0dk / 0,00" diye çıplak sayı dizisi oluyordu ve hangisinin modül,
   hangisinin işlem olduğu okunamıyordu. Etiket ≤768'de açılır.
   🔴 Metin MARKUP'ta, CSS `content`inde DEĞİL: `content` çevrilemez ve ekran
      okuyucuya güvenilir biçimde ulaşmaz. */
#up-shell .up-et { display: none; }

/* KÜNYE ŞERİDİ (1.339.0) — akordiyonun içindeki kimlik satırı.
   🔴 MASAÜSTÜNDE GİZLİ: orada kapalı satır cari · müşteri · aşama · son tarih
      kolonlarını ZATEN gösteriyor; künye aynı bilgiyi ikinci kez yazardı.
   🔴 <=640px'te AÇILIR — orada kapalı satır TEK SATIRA indi ve bu alanlar
      oradan düştü. Künye o alanların YENİ EVİDİR; bilgi ekrandan SİLİNMEDİ. */
#up-shell .up-kunye { display: none; }

/* ══ MOBİL (<=768) — HEM ana tablo HEM detay tablosu TABLO DEĞİL, KART ═════════
   🔴🔴 Bu raporu üretim sorumlusu SAHADA TELEFONDAN okuyor. 9 kolonlu tablo dar
      ekranda kabından taşar ve her satır için yatay kaydırma gerekir. <=768'de
      tablo `display: block` ile çözülür ve her satır bir KARTA döner:

          [>] CARİ ADI                        42 işlem
              Müşteri adı                      3 modül
              ÜRÜN ADI                        1s 45dk
              (Döşeme) (Kesim)            12.500,00

   🔴 Hücreler `data-up` ADIYLA yerleştirilir, `nth-child` ile DEĞİL: kolon
      eklenince/çıkınca mobil düzen sessizce KAYMASIN.
   🔴 `display: block` colgroup'u ve `table-layout: fixed`i devre dışı bırakır,
      masaüstü kolon genişlikleri bu blokta HİÇ rol oynamaz. Blok tamamen
      `max-width: 768px` içinde: masaüstü render yolu DEĞİŞMEZ.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Kap artık kaymaz — içerik genişliği kabı aşmıyor. */
    #up-shell .peron-table-wrap { overflow-x: visible; }

    /* 🔴 `min-width: 0` ŞART: global `.peron-table` kuralı `min-width: max-content`
       koyuyor (geniş tablolar kabında kaysın diye). Kart düzeninde o kural tabloyu
       doğal genişliğinde KİLİTLER ve `width: 100%` hiçbir işe yaramaz. */
    #up-shell .up-t,
    #up-shell .up-ic { display: block; width: 100%; min-width: 0; max-width: 100%; table-layout: auto; }
    /* 🔴 `colgroup`/`col` GİZLENMEK ZORUNDA. Tablo `display: block` olunca bu iki
       eleman artık "tablo kolonu" değil SIRADAN BLOK olur ve `width: 38px` gibi
       genişlikleriyle satır satır çizilir; dokuz `col` yan yana yığılıp kabı
       taşırır. Taşmayı kart düzeni değil, GÖRÜNMEZ `col` blokları yapar. */
    #up-shell .up-t > colgroup,
    #up-shell .up-ic > colgroup { display: none; }
    #up-shell .up-t > thead,
    #up-shell .up-ic > thead { display: none; }
    #up-shell .up-t > tbody,
    #up-shell .up-ic > tbody { display: block; max-width: 100%; }

    /* 🔴 ÜÇÜNCÜ SÜTUN `auto` DEĞİL `minmax(0, auto)`: `auto` içeriğin max-content'ini
       taban alır ve uzun bir sayı ("12.500,00") satırı kabın DIŞINA taşırır. */
    #up-shell .up-t > tbody > tr.up-row {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) minmax(0, auto);
        grid-template-areas:
            "ac cari    islem"
            "ac musteri modul"
            "ac urun    sure"
            "ac asama   hakedis";
        align-items: center;
        gap: 3px 10px;
        box-sizing: border-box;
        width: 100%; max-width: 100%;
        padding: 11px 12px;
        border-bottom: 1px solid var(--border);
    }
    /* 🔴 `height: auto` ŞART ve `min-height: 0` TEK BAŞINA YETMEZ. Tablo yoğunluk
       sözleşmesi hücreye SABİT bir `height` veriyor; kart düzeninde dört satırın
       hepsi o yüksekliğe kilitlenir ve kart iki katına çıkar. 44px dokunma hedefi
       METİN hücresinin değil, DOKUNULAN öğenin (akordiyon düğmesi) sorumluluğudur. */
    #up-shell .up-t > tbody > tr.up-row > td,
    #up-shell .up-ic > tbody > tr.up-ic-row > td {
        display: block; border: 0; padding: 0;
        min-width: 0; max-width: 100%;
        min-height: 0; height: auto;
        line-height: 1.4;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* 🔴🔴 HER `data-up` KURALI `> tbody > tr.up-row >` / `> tbody > tr.up-ic-row >`
       İLE KAPSANIR — DESCENDANT (boşluklu) seçici YASAK. İç tablo (`.up-ic`) DOM'da
       `.up-t`'nin ALTINDADIR; `#up-shell .up-t td[data-up="modul"]` yazıldığında kural
       iç kartın "Modül" hücresine de uyuyordu. ÖLÇÜLDÜ (390px, ekran görüntüsü):
       dış kartın modül SAYISI sağa yaslı olduğu için `text-align: right` verilmişti ve
       aynı kural iç kartta MODÜL ADINI sağa yasladı — "VELARİS 3 LÜ KOLTUK (1)" ve
       takip numarası sağ kenara yapışıyordu. `asama`, `sure`, `hakedis`, `modul`
       adları iki tabloda da kullanılıyor; hepsi aynı sızıntıya açıktı.
       Aynı sınıf hata bu dosyada daha önce `.col-actions` için ölçülmüştü (~4047). */
    #up-shell .up-t > tbody > tr.up-row > td[data-up="ac"]      { grid-area: ac; align-self: start; overflow: visible; }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="cari"]    { grid-area: cari; }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="musteri"] { grid-area: musteri; font-size: 13px; color: var(--text-secondary); }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="urun"]    { grid-area: urun; }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="asama"]   { grid-area: asama; overflow: visible; white-space: normal; margin-top: 3px; }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="islem"]   { grid-area: islem; text-align: right; font-size: 12px; color: var(--text-secondary); }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="modul"]   { grid-area: modul; text-align: right; font-size: 12px; color: var(--text-secondary); }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="sure"]    { grid-area: sure; text-align: right; font-size: 12px; color: var(--text-secondary); }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="hakedis"] { grid-area: hakedis; text-align: right;
        font-size: 14px; font-weight: 700; color: var(--text-primary); align-self: center; }
    /* Kart düzeninde başlık yok, cari ve ürün kendi kademesini TAŞIMAK zorunda. */
    #up-shell .up-t > tbody > tr.up-row > td[data-up="cari"] .rp-ad { font-size: 14px; }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="urun"] .rp-ad { font-size: 13px; }
    /* Izgara çocuklarının İÇ sarmalayıcıları da daralabilmeli: `min-width: 0` yalnız
       hücreye verilirse içindeki kutular kendi max-content'ini dayatıp satırı taşırır. */
    #up-shell .up-t > tbody > tr.up-row > td .rp-ad,
    #up-shell .up-t > tbody > tr.up-row > td .rp-alt { min-width: 0; max-width: 100%; }

    /* Akordiyon satırı da blok: iç kart listesi kartın altında akar.
       🔴🔴 `height: auto` BURADA DA ŞART — ve bu, kart satırlarına yazmakla
          KAPANMIYOR. ÖLÇÜLDÜ (390px, gerçek veri): `.peron-table > tbody > tr > td`
          kuralı (12126) hücreye `height: var(--tbl-row-h)` = 44px veriyor.
          MASAÜSTÜNDE zararsız — tablo düzeninde `height` ALT SINIR gibi davranır,
          satır içeriğe göre büyür. BLOK düzeninde ise KESİN yüksekliktir: akordiyon
          gövdesi 44px'te kilitlendi, içindeki 479px'lik iç kart listesi taştı ve
          BİR SONRAKİ TAKIM KARTININ ÜSTÜNE ÇİZİLDİ (ekran görüntüsüyle yakalandı:
          iki takımın metni üst üste). Kart satırları düzgün görünüyordu çünkü onların
          `td`'lerine zaten `height: auto` verilmişti; ayrı seçici olan bu satır
          atlanmıştı. Aynı sınıf hata `.mk-table`da da ölçülmüştü (14207). */
    #up-shell .up-t > tbody > tr.up-detay-row { display: block; height: auto; }
    #up-shell .up-t > tbody > tr.up-detay-row[hidden] { display: none; }
    #up-shell .up-t > tbody > tr.up-detay-row > td {
        display: block; width: 100%; max-width: 100%; padding: 0;
        height: auto; min-height: 0;
    }
    /* Boş durum satırı da blok olmalı, yoksa hücre genişliği çöker. */
    #up-shell .up-t > tbody > tr:not(.up-row):not(.up-detay-row) { display: block; }
    #up-shell .up-t > tbody > tr:not(.up-row):not(.up-detay-row) > td {
        display: block; height: auto; min-height: 0;
    }

    /* Detay tablosu: daha hafif (dört satırlık) iç kart. */
    #up-shell .up-ic > tbody > tr.up-ic-row {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) minmax(0, auto);
        grid-template-areas:
            "no modul    hakedis"
            "no asama    sure"
            "no personel adet"
            "no zaman    zaman";
        align-items: center;
        gap: 2px 8px;
        box-sizing: border-box;
        width: 100%; max-width: 100%;
        padding: 9px 12px 9px 10px;
        border-bottom: 1px solid var(--border);
    }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="no"]       { grid-area: no; align-self: start; }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="modul"]    { grid-area: modul; }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="asama"]    { grid-area: asama; overflow: visible; }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="personel"] { grid-area: personel; font-size: 12px; color: var(--text-secondary); }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="zaman"]    { grid-area: zaman; font-size: 12px; color: var(--text-muted);
        font-variant-numeric: tabular-nums; margin-top: 2px; }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="sure"]     { grid-area: sure; text-align: right; font-size: 12px; color: var(--text-secondary); }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="adet"]     { grid-area: adet; text-align: right; font-size: 12px; color: var(--text-secondary); }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="hakedis"]  { grid-area: hakedis; text-align: right;
        font-size: 13px; font-weight: 700; color: var(--text-primary); }
    #up-shell .up-ic > tbody > tr.up-ic-row > td[data-up="modul"] .rp-ad { font-size: 13px; }
    #up-shell .up-ic-wrap { overflow-x: visible; }

    /* Birim etiketleri: kartta başlık satırı olmadığı için sayıların yanında açılır.
       🔴 11,5 → 12,5px (1.281.0): ölçüldü, dar ekran gövde tabanı (--tbl-fs 12px)
          ALTINDA kalıyordu. Birim, kartta sayının ne olduğunu söyleyen TEK ipucu. */
    #up-shell .up-et {
        display: inline; font-style: normal; font-weight: 400;
        font-size: 12px; color: var(--text-muted);
    }
    /* Aşama dağılımı şeridindeki çip `.peron-badge.sm` = 10px (7287) ve tablo
       hücresi OLMADIĞI için `--tbl-badge-fs` onu bağlamaz → dar ekranda okunmuyordu. */
    #up-shell .up-asama-cip .peron-badge,
    #up-shell .rp-kart-bas .peron-badge { font-size: 12px; padding: 2px 8px; }
    /* Ölçüldü 320px'te: akordiyon düğmesi 30x30 idi — parmakla basılmıyordu. */
    #up-shell .up-ac { width: 44px; height: 44px; margin-left: -7px; }
    /* Tablo DIŞI en küçük yazılar okunur tabana çekilir (tablo hücreleri yoğunluk
       sözleşmesine bağlıdır ve DEĞİŞTİRİLMEZ). */
    #up-shell .up-asama-cip i,
    #up-shell .up-ic-bos { font-size: 13px; }
    /* Ölçüldü: `<summary>` 12,5px kalıyordu (dar ekran tabanı 13px). */
    #up-shell .up-kisit summary { min-height: 44px; font-size: 13px; }
}

@media print {
    /* Ekran süzgeçleri ve akordiyon düğmeleri kâğıda basılmaz; PDF çıktısı kendi
       belgesini üretir (peron-mod-uretim-raporu.js -> pdfCikti). */
    #up-shell .up-filtre, #up-shell .up-ac, .rp-sekmeler { display: none; }
    #up-shell .up-kart { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RAPORLAR — DETAYLI ÜRETİM RAPORU (dr-*)  ·  1.281.0

   Üçüncü sekme: "iki tarih arası hangi ürün ağacından hangi modül kaç adet".
   Tablo GRUPLUDUR: her ürün ağacı kendi `<tbody>`sinde bir BAŞLIK satırı + modül
   satırları taşır; genel toplam `tfoot`ta.

   ─── DEVRALINAN OTORİTELER (yeni sistem İCAT EDİLMEDİ) ──────────────────────

   🔴 `.dr-t` tablosu `rp-t` sınıfını DA taşır — `rp-t` bu dosyadaki "Raporlar
      tablosu yardımcı sözleşmesi"dir (12419+): `col-num`/`col-ellip`/`col-nowrap`
      hücrelerine tabular-nums ve kırpma verir. Düşerse sayı kolonları hizasını
      SESSİZCE kaybeder.
   🔴 Şerit (`.rp-serit`), süzgeç çubuğu (`.gl-filterbar`, `.rp-cip`), kart
      (`.peron-card .rp-kart`), dipnot (`.rp-dipnot`) ve kısıt (`.rp-kisit`)
      AYNEN yeniden kullanılır. Bu blok yalnız BU ekrana özgü olanı tanımlar:
      grup başlığı satırı, girinti, birim etiketleri ve mobil kart düzeni.
   🔴 SABİT HEX YOK — hepsi token; gece modu token ezerek çalışır.
   🔴 MOBİL: taban kurallar DAR EKRAN; `min-width` blokları yalnız BÜYÜTÜR. Tablo→kart
      dönüşümü bloğun SONUNDAKİ tek `max-width: 768px` içinde (MOBİL SON SÖZ).
   ══════════════════════════════════════════════════════════════════════════════ */

#dr-shell { box-sizing: border-box; min-width: 0; }

/* ── Filtre çubuğu — Üretim Raporu'yla AYNI gramer (beş alan + çip + düğme) ───
   🔴 `select`/`date` bu ekranda da 44px/16px'e yükseltilir: dokunma hedefi ve iOS
      odak-zoom'u. Taban `.peron-select` 40px/13,5px'tir. */
#dr-shell .dr-filtre { align-items: flex-end; gap: 10px; }
#dr-shell .dr-f {
    display: flex; flex-direction: column; gap: 4px;
    /* 🔴 min-width 0 → 148px: 320px'te iki kutu yan yana sıkışıp select'in
       SEÇİLİ DEĞERİNİ kırpıyordu ("Tamamlandı"→"Tamamland", ölçüldü). 148px
       tabanla dar ekranda kutular alt alta iner, değer tam okunur. */
    flex: 1 1 150px; min-width: 148px; box-sizing: border-box;
}
#dr-shell .dr-filtre .peron-input[type="date"],
#dr-shell .dr-filtre .peron-select { width: 100%; min-height: 44px; font-size: 16px; }
#dr-shell .dr-cipler { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
#dr-shell .dr-eylem { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; box-sizing: border-box; }
#dr-shell .dr-eylem .peron-btn { flex: 1 1 auto; min-height: 44px; }

@media (min-width: 520px) {
    #dr-shell .dr-f--tarih { flex: 0 0 150px; }
    #dr-shell .dr-cipler { flex: 1 1 auto; }
}
@media (min-width: 769px) and (pointer: fine) {
    #dr-shell .dr-eylem { flex: 0 0 auto; margin-left: auto; }
    #dr-shell .dr-eylem .peron-btn { flex: 0 0 auto; min-height: 32px; }
}

/* ── Özet şerit: DÖRT kutu ───────────────────────────────────────────────────
   🔴 `auto-fit` YASAK (düzeni dağıtır) — SABİT kolon sayısı. Özgüllük:
      `#dr-shell .dr-serit` (1,1,0) çıplak `.rp-serit` (0,1,0) kuralını her koşulda
      geçer; SIRAYA değil ÖZGÜLLÜĞE dayanır (bloğu taşıyan bir sonraki okuyucu
      "sıraya güvenebilirim" diye yanılmasın).
   🔴 Dört kutunun etiketleri kısa ("Toplam adet", "Ürün ağacı", "Takım",
      "Günlük ortalama") → 620px'te ikiye, 900px'te dörde açılır. */
#dr-shell .dr-serit { box-sizing: border-box; }
@media (min-width: 620px) {
    #dr-shell .dr-serit { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    #dr-shell .dr-serit { grid-template-columns: repeat(4, 1fr); }
}
/* ÜÇ KUTU (1.325.0) — takım istatistiği basılmadığında şerit bir kutu kaybeder.
   🔴 BOŞ HÜCRE GÖRÜNÜR BİR KUSURDUR: `.rp-serit` zemini `--border` ve gap 1px'tir;
      dolmayan hücre ekranda dolu bir çizgi bloğu olarak çizilir (kutu değil, leke).
      Bu yüzden kolon sayısı üçe çekilir; 620-899 bandında (2 kolon) üçüncü kutu
      satırın kalanını KAPLAR — yine boş hücre kalmaz.
   🔴🔴 BU BLOK ŞERİDİN YALNIZ YARISIDIR — 640px ALTI "MOBİL SON SÖZ"DEDİR.
      Dosyanın sonundaki mobil bloklar (`@media (max-width:640px)` ve
      `@media (min-width:360px) and (max-width:640px)`) çıplak `.dr-serit`i AYNI
      özgüllükte ve DAHA SONRA eziyor; buraya yazılan bir telefon kuralı ölü doğar
      (bu tam olarak yaşandı: üç kutu 320px'te 2+BOŞ, 390px'te 3+BOŞ diziliyordu).
      Üç kutunun telefon kuralları için oradaki `dr-serit--3` satırlarına bak.
   🔴 `span 2` YALNIZ 620-899 arasında geçerli: 620px altında ızgara TEK kolondur ve
      `span 2` orada örtük ikinci bir kolon üretip düzeni ikiye bölerdi. */
@media (min-width: 620px) and (max-width: 899.98px) {
    #dr-shell .dr-serit--3 .rp-serit-kutu:last-child { grid-column: span 2; }
}
@media (min-width: 900px) {
    #dr-shell .dr-serit--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── ÖLÇÜ ŞERİDİ ─────────────────────────────────────────────────────────────
   🔴 `.gl-notice` HER ZAMAN AMBER'dir (9066) — yani "uyarı". Modül kipinde bu şerit
      uyarı DEĞİL, ölçünün TANIMIdır ("adet = üretilen miktar"); amber zemin her
      açılışta yanlış alarm verir ve kullanıcı bir süre sonra şeridi hiç okumaz.
      Olay kipinde ise GERÇEKTEN uyarıdır (adet üretim değil, aşamadan geçen modül)
      ve amber KALIR — sinyalin anlamı korunur. */
#dr-shell .dr-olcu { margin-bottom: 16px; }
#dr-shell .dr-olcu.is-bilgi { background: var(--pri-light); border-color: var(--pri-border); }
#dr-shell .dr-olcu.is-bilgi .gl-notice-ico { color: var(--pri-text); }

/* ── Ana tablo ───────────────────────────────────────────────────────────────
   Kolon bütçesi: AUTO (ürün/modül adı, kalanı emer) + %16 + %11 + %15.
   🔴 GENİŞLİKLER SINIFLA, satır içi `style` ile DEĞİL: satır içi stil medya
      sorgusunu EZER ve dar ekran ayarı ASLA çalışmazdı. */
#dr-shell .dr-wrap { box-sizing: border-box; }
/* drc-modul: genişliksiz — AUTO. */
#dr-shell .dr-t col.drc-adet { width: 16%; }
#dr-shell .dr-t col.drc-pay  { width: 11%; }
#dr-shell .dr-t col.drc-son  { width: 15%; }

/* ── DAR MASAÜSTÜ (769-1023px): TABLO KABINA SIĞDIRILIR ──────────────────────
   🔴 `.peron-table--fixed { min-width: max-content }` (6164) tabloyu içeriğin doğal
      genişliğinin ALTINA indirmez → tablo KENDİ kabında yatay kayardı. Kaçış
      `min-width: 0`; metin kolonu `col-ellip` taşıdığı için güvenli (taşan ad üç
      noktayla kısalır, tamamı `title`da durur). Emsal: `.up-t` (14483),
      `.prod-log-table` (2498), `.rsv-table` (8209). */
@media (max-width: 1023px) {
    #dr-shell .dr-t { min-width: 0; }
    /* Başlık `nowrap` (6226) olduğu için dar kolonda komşusunun üstüne taşardı. */
    #dr-shell .dr-t > thead > tr > th { overflow: hidden; text-overflow: ellipsis; }
    /* 🔴 ÖLÇÜLDÜ (900px): "Son Üretim" başlığı 130px sürüyor, kolonu %15 = 114px →
       başlık üç noktaya düşüyordu ("Son Üreti…"). Kolon adı KIRPILIRSA kullanıcı
       tarihin hangi olayın tarihi olduğunu okuyamaz (tamamlanma mı, sevk mi?).
       Pay ve Adet birer puan verir; ikisi de sayı kolonu ve zaten dar sığıyor. */
    #dr-shell .dr-t col.drc-adet { width: 15%; }
    #dr-shell .dr-t col.drc-pay  { width: 10%; }
    #dr-shell .dr-t col.drc-son  { width: 18%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HAMMADDE TÜKETİMİ RAPORU (#hm-shell) — 1.312.0
   Kullanıcı: "raporlar kısmına 'hammadde tüketim' raporu ekle … aylık alıma göre
   aylık ne kadar tüketildiği, birim fiyatı, ortalama tüketim miktarı."

   🔴 YENİ id HİÇBİR KURAL MİRAS ALMAZ. Paylaşılan `rp-*` iskeleti (şerit · kart ·
      tablo · dipnot · kısıt) zaten hazır; burada YALNIZ bu ekrana özgü olan
      kolon bütçesi, şerit sütun sayısı ve iki durum rengi tanımlanır.
   🔴 GENİŞLİKLER SINIFLA, satır içi `style` ile DEĞİL — satır içi stil medya
      sorgusunu EZER ve dar ekran ayarı ASLA çalışmaz (dosyanın kendi kuralı).
   ═══════════════════════════════════════════════════════════════════════════ */
#hm-shell { box-sizing: border-box; min-width: 0; }

/* Şerit DÖRT kutudur; taban `.rp-serit` 900px'te BEŞ sütun verir ve dördüncü kutu
   yalnız başına kalırdı. `auto-fit` kullanılmaz: 1440px'te beşinci sütun açıp
   düzeni dağıtıyor. */
@media (min-width: 900px) {
    #hm-shell .hm-serit { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Süzgeç: altı alan + çipler + eylemler. Tabanda (telefon) alanlar tam satır,
   masaüstünde içeriğine göre paylaşır. */
#hm-shell .hm-filtre { align-items: flex-end; gap: 10px; }
#hm-shell .hm-f {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1 1 100%; min-width: 0; box-sizing: border-box;
}
/* 🔴 16px PAZARLIKSIZ: iOS Safari 16px altındaki alana odaklanınca sayfayı
   büyütür ve BİR DAHA küçültmez. Küçülen şey yalnız YÜKSEKLİK olabilir. */
#hm-shell .hm-filtre .peron-input,
#hm-shell .hm-filtre .peron-select { width: 100%; min-height: 44px; font-size: 16px; }
#hm-shell .rp-cipler { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }

@media (min-width: 769px) and (pointer: fine) {
    #hm-shell .hm-f { flex: 0 1 auto; }
    #hm-shell .hm-f--ay  { flex: 0 0 148px; }
    #hm-shell .hm-f--ara { flex: 1 1 180px; }
    #hm-shell .hm-filtre .peron-input,
    #hm-shell .hm-filtre .peron-select { min-height: 32px; font-size: 12px; }
}

/* Malzeme tablosu — kolon bütçesi ölçülerek dağıtıldı.
   Malzeme AUTO (kalanı emer, `col-ellip` + title); sayı kolonları içeriğine göre.
   🔴 `peron-table--fixed` ŞART (markup'ta): onsuz `col-ellip` masaüstünde çalışmaz,
      `col-num` sağa yaslanmaz ve colgroup yüzdeleri bağlayıcı olmaz. */
/* 🔴🔴 KOLON BÜTÇESİ ÖLÇÜLEREK TÜRETİLDİ — yüzde tahmin edilmez.
   Tablo ALT genişliğine (760px) sıkışmışken her kolonun GERÇEK ihtiyacı ölçüldü
   (başlık + gövde + tfoot, dolgu dâhil, gerçek veriyle):
     Birim 53 · Ort. aylık 79 · Tüketim 69 · Alım 58 · Karşılama 85 ·
     Birim fiyat 121 ("1.100,00 ₺ ekstre") · Tüketim değeri 112 ("Tüketim değeri" BAŞLIĞI)
   Toplam 577px. Malzeme kolonu `col-ellip` olduğu için kısalabilir ama okunur kalması
   için ~160px ister → tablo tabanı 577 + 160 ≈ 740, güvenli tarafta **760px**.
   🔴 İlk yazımda taban 660px'ti ve yüzdeler ona göreydi: "Birim" başlığı 26px alanda
      32px istiyor, "Karşılama" 61'de 64, "Tüketim değeri" 86'da 91 → BAŞLIKLAR üç
      noktaya düşüyordu. Kolon ADI kırpılırsa sayının ne olduğu okunamaz.
   🔴 Yüzdeler ihtiyacın 760'a oranı + küçük emniyet payıdır; toplamları %78,5,
      kalan %21,5 malzeme adına gider. */
#hm-shell .hm-t--urun col.hmc-birim { width: 7%; }
#hm-shell .hm-t--urun col.hmc-ort   { width: 11%; }
#hm-shell .hm-t--urun col.hmc-tuk   { width: 9.5%; }
#hm-shell .hm-t--urun col.hmc-alim  { width: 8%; }
#hm-shell .hm-t--urun col.hmc-kars  { width: 11.5%; }
/* 🔴 %16,5 → %18 (1.339.0, ölçüldü): kaynak eki taşıyan fiyat hücresi
   ("1.100,00 ₺ ekstre") 131px ister; %16,5 kolonu 780px'lik tabloda 129px, 660px'lik
   telefon kovasında 109px veriyordu ve fiyatın SON HANESİ kesiliyordu — kırpılmış
   rakam yalandır. Fark, genişliksiz (AUTO) MALZEME kolonundan gelir; o kolon
   `col-ellip` taşır ve tam adı `title` özniteliğinde tutar.
   🔴 KURAL TABANDA, medya sorgusunda DEĞİL: kusur 641-1023px bandında da ölçüldü;
      yalnız telefonu düzeltmek ikinci bir yol açıp aynı hatayı orada bırakırdı. */
#hm-shell .hm-t--urun col.hmc-fiyat { width: 18%; }
#hm-shell .hm-t--urun col.hmc-deger { width: 15%; }

#hm-shell .hm-t--ay col.hmc-ay     { width: 20%; }
#hm-shell .hm-t--ay col.hmc-atuk   { width: 23%; }
#hm-shell .hm-t--ay col.hmc-aalim  { width: 23%; }
#hm-shell .hm-t--ay col.hmc-afark  { width: 21%; }
#hm-shell .hm-t--ay col.hmc-acesit { width: 13%; }

/* 🔴🔴 ALT GENİŞLİK KOVASI — MEDYA SORGUSUNA BAĞLANMAZ.
   İlk yazımda kovalar `@media (max-width: 640px)` içindeydi ve ben 320px için ayrı bir
   `@media (max-width: 360px)` bloğu açarken 640px bloğunu ERKEN KAPATMIŞTIM; o noktadan
   sonraki TÜM paylaşımlı mobil kurallar (Üretim · Detaylı · Sevkiyat sekmeleri dahil)
   sessizce 360px'e hapsolmuştu. Ders: bir medya bloğunun ORTASINA yeni blok açma;
   kural medyaya bağlı olmak ZORUNDA değilse TABANA yaz.
   Kova bir TABANDIR, tavan değil: geniş ekranda tablo kabı doldurur (width %100),
   dar ekranda KENDİ kabında kayar. `peron-table--fixed`in `min-width: max-content`
   varsayılanı burada YANLIŞ olurdu — `col-ellip` hücreleri nowrap olduğu için
   max-content = kırpılmamış en uzun malzeme adı → tablo 1200px'e fırlar. */
#hm-shell .hm-t--urun { min-width: 780px; }   /* 8 kolon — ölçülen 577 + malzeme ~160, +20px emniyet */
/* 🔴 AY TABLOSU 480 → 500: ölçüldü, "Tüketim değeri" BAŞLIĞI 91px istiyor,
   %23 × 480 = 110 → iç alan 90px kalıyordu (1px açık). Uzun süre ürün tablosunu
   suçladım; taşan hücre ay tablosundaydı — seçici İKİ tabloyu birden kapsıyor. */
#hm-shell .hm-t--ay   { min-width: 500px; }   /* 5 kolon */

/* 🔴🔴 GENİŞ EKRANDA FAZLA GENİŞLİK SAYI KOLONLARINA DEĞİL, MALZEME ADINA
   GİDER (1.339.0 — tasarım denetimi bulgusu).
   Yüzde kolonlar tablo büyüdükçe ORANTILI büyür; oysa bir SAYININ genişlik
   ihtiyacı ekran büyüdü diye artmaz. Sonuç: en önemli TANIMLAYICI kolon (malzeme
   adı) en dar kolonlardan biri kalıyor ve adın çoğu üç noktaya düşüyordu.
   ÖLÇÜLDÜ (178 satır gerçek veri, masaüstü puntosuyla doğal genişlikler):
     ihtiyaç → birim 52 · ort 83 · tüketim 71 · alım 65 · karşılama 87 ·
              birim fiyat 138 · tüketim değeri 119  =  615px
     yüzdeyle verilen → 1024px'te 706 · 1280px'te 766  (91-151px BOŞA GİDİYOR)
   Kolonlar ihtiyaç + ~8px emniyetle SABİTLENİR; artan genişliği genişliksiz (AUTO)
   malzeme kolonu emer: 1024'te 176 → 211px, 1280'de 192 → 287px (ölçüldü).
   🔴 KURAL YALNIZ >=1024px: 641-1023 bandında tablo 780px kovasına oturuyor ve
      orada yüzdeler ihtiyacı ancak karşılıyor — sabit px oraya yazılsaydı malzeme
      kolonu 100px'in altına düşer, yani düzeltme kusura dönüşürdü.
   🔴 SAYI KOLONU ASLA İHTİYACININ ALTINA İNDİRİLMEZ: kırpılmış rakam yalandır.
      Metnin üç noktaya düşmesi serbesttir (tam adı `title` özniteliğinde durur). */
@media (min-width: 1024px) {
    #hm-shell .hm-t--urun col.hmc-birim { width: 60px; }
    #hm-shell .hm-t--urun col.hmc-ort   { width: 91px; }
    #hm-shell .hm-t--urun col.hmc-tuk   { width: 79px; }
    #hm-shell .hm-t--urun col.hmc-alim  { width: 73px; }
    #hm-shell .hm-t--urun col.hmc-kars  { width: 95px; }
    #hm-shell .hm-t--urun col.hmc-fiyat { width: 146px; }
    #hm-shell .hm-t--urun col.hmc-deger { width: 127px; }
}

/* Seri çipleri — kart BAŞLIĞININ yanında durur, dashboard'daki gibi tam genişlik
   şeridi değildir. Taban `.dash-nabiz-b { flex: 1 1 0 }` eşit pay verir ve burada
   ÖLÇÜLDÜ (1440px): "Tüketim değeri" 109px sürüyor, kutuya 92px düşüyordu →
   etiket üç noktaya iniyordu. İçeriğine göre paylaşsın.
   🔴 44px dokunma hedefi TABANDA KALIR; yalnız masaüstü-farede alçalır. */
#hm-shell .dash-nabiz-cip { margin: 0; flex-wrap: wrap; justify-content: flex-end; }
#hm-shell .dash-nabiz-b { flex: 0 0 auto; }
@media (min-width: 769px) and (pointer: fine) {
    #hm-shell .dash-nabiz-b { min-height: 30px; padding: 5px 10px; font-size: 12px; }
}

/* Şerit kutusundaki birim ("çeşit", "çeşit/ay") — sayıdan daha sessiz.
   🔴 Vurgu RENKLE değil AĞIRLIK + BOYUT ile: şeritte tek aksan rengi vardır. */
.rp-birim { font: 500 11px/1 var(--font); color: var(--text-muted); margin-left: 3px; }

/* Fiyat kaynağı rozeti — "gerçekleşen" (ekstreden okundu) ile "kart" (güncel alış
   fiyatı) AYNI ŞEY DEĞİLDİR; ikincisi geçmişe bakmaz. Ayrım okunur olmalı ama
   sayının önüne geçmemeli: küçük, nötr zemin, yalnız gerçekleşen olan yeşil metin. */
#hm-shell .rp-rozet {
    display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px;
    font: 700 9px/1.6 var(--font); text-transform: uppercase; letter-spacing: .03em;
    background: var(--content-bg); color: var(--text-muted); vertical-align: 1px;
}
#hm-shell .rp-rozet--gerceklesen { color: var(--green-ink); background: var(--green-soft, var(--content-bg)); }

/* Durum renkleri ANLAMLIDIR, dekoratif değil:
   karşılama > %100 → stoktan yeniyoruz (amber) · ay farkı eksi → stok eriyor. */
#hm-shell .hm-fazla { color: var(--amber-ink); font-weight: 700; }
#hm-shell .hm-eksi  { color: var(--rose); }

/* Malzeme hücresi: kod sessiz ve tek aralıklı, ad baskın. */
#hm-shell .rp-kod { font: 600 10.5px/1 var(--font); color: var(--text-muted);
    font-variant-numeric: tabular-nums; }
#hm-shell .rp-ad  { font-weight: 600; }

/* ── DAR MASAÜSTÜ (769-1023px) ───────────────────────────────────────────────
   `.peron-table--fixed { min-width: max-content }` tabloyu içeriğin doğal
   genişliğinin ALTINA indirmez → tablo KENDİ kabında yatay kayardı. Kaçış
   `min-width: 0`; malzeme kolonu `col-ellip` taşıdığı için güvenli. */
@media (max-width: 1023px) {
    /* 🔴 `min-width: 0` BURAYA YAZILMAZ — `#dr-shell`den kopyalanmıştı ve 4 kolonlu
       bir tabloda doğru, 8 kolon + fiyat rozeti taşıyan bu tabloda YANLIŞTIR.
       Tasarım denetimi ölçtü: 361-767px arasında hücreler kırpılmıyor, KOMŞUSUNUN
       ÜSTÜNE yazıyordu (390px'te 58 hücre) — `overflow: visible` olduğu için
       `scrollWidth` bunu göstermiyor, yani belge taşması testi bu sınıf hataya KÖRDÜR.
       Kova artık TABANDA (aşağıda) tanımlı: tablo kabına sığmazsa KENDİ kabında kayar. */
    /* 🔴🔴 BAŞLIK KIRPILMAZ, SARAR (1.339.0 — tasarım denetimi bulgusu).
       ÖLÇÜLDÜ 768px: "Tüketim değeri" 123px istiyor, kolon 117px — ekranda
       "TÜKETİM DEĞ…" olarak kesiliyordu. Kolon adı KıRPıLıRSA kullanıcı altındaki
       sayının NE olduğunu okuyamaz; bu dosyanın kendi notu da bunu söylüyor
       ("bu sayı hangi kolondu?").
       🔴 ÇÖZÜM KOLONU GENİŞLETMEK DEĞİL: genişlik SAYI kolonlarından ya da
          malzeme adından çalınırdı (ikisi de ölçülerek daraltılmış). Başlık SARAR:
          başlık satırı bir kademe uzar, tablo genişliği DEĞİŞMEZ.
       🔴 `overflow/ellipsis` KALIR: tek parça uzun bir kelime gelirse komşusunun
          üstüne yazmasın — sarma önce, üç nokta son çaredir. */
    #hm-shell .hm-t > thead > tr > th {
        white-space: normal; word-break: break-word;
        overflow: hidden; text-overflow: ellipsis; }
}

/* ── GRUP BAŞLIĞI SATIRI (ürün ağacı) ────────────────────────────────────────
   🔴 Ayrım RENKLE DEĞİL, AĞIRLIK + ZEMİN + ÜST ÇİZGİ ile kurulur: ekranda on
      grup üst üste gelebiliyor, her birine aksan rengi vermek tabloyu alacaya
      çevirirdi (ve gece modunda kontrast düşürürdü). */
#dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow > th,
#dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow > td {
    background: var(--border-light);
    border-top: 2px solid var(--border);
    font-weight: 800;
    color: var(--text-primary);
    text-align: left;
    /* 🔴 `.peron-table th` BÜYÜK HARFE ÇEVİRİR (2008). Bu `th` bir KOLON BAŞLIĞI
       değil, GRUP başlığıdır: ürün adı verinin kendisidir ve modül satırları
       (td) büyütülmediği için tablo içinde iki farklı harf rejimi doğuyordu.
       Ayrıca "14 çeşit" etiketi "14 ÇEŞİT" diye bağırıyordu. Vurgu AĞIRLIK +
       ZEMİN ile kurulur (bu bloğun açılış notu). */
    text-transform: none;
}
#dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow > td { text-align: right; }
/* 🔴 GRUP BAŞLIĞI GÖVDEDEN BÜYÜK OLMAK ZORUNDA (1.339.0). ÖLÇÜLDÜ 1024/1280px:
   başlık 12px, altındaki veri satırı da 12px — hiyerarşi DÜZLEŞMİŞTİ. (Telefon ve
   768 bandında ayrıca düzeltildi; orada başlık daha da KÜÇÜKTÜ, yani TERSİYDİ.)
   🔴 Bu bir "büyütme" değil: vurgu zaten AĞIRLIK (800) + ZEMİN ile kuruluyor,
      ama iki boyut EŞİT olduğunda göz grubun nerede başladığını seçemiyor. Tek
      kademe (12 → 13px) yeterli; daha fazlası yoğunluğu bozardı. */
#dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow > th { font-size: 13px; }
#dr-shell .dr-no {
    display: inline-block; min-width: 18px; margin-right: 8px;
    color: var(--text-muted); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Modül çeşidi sayısı ürün ADININ yanında — PAY kolonundan buraya TAŞINDI.
   🔴 Kolon başlığı "Pay" iken o hücreye yüzde işareti olmayan bir sayı ("14")
      basılıyordu; kolon kendini yalanlıyordu (ekran görüntüsüyle yakalandı). */
#dr-shell .dr-cesit {
    margin-left: 10px; font-weight: 400;
    /* 🔴 TABAN ŞART: mobil yoğunlukta hücre 8,5px'e iner; 0.92em onu 7,82px'e
       düşürüyordu (ölçüldü, 320px) — yoğunluk turunun kendi tabanının bile altı. */
    font-size: max(0.92em, var(--m-fs-xs, 9.5px));
    color: var(--text-muted); white-space: nowrap;
}
/* Modül satırı: adı grup başlığından GİRİNTİLİ. Yalnız sol dolgu değişir; dikey
   yoğunluk tablo sözleşmesinden gelir ve DEĞİŞTİRİLMEZ. */
#dr-shell .dr-t > tbody.dr-grup > tr.dr-row > td[data-dr="modul"] { padding-left: 30px; }
#dr-shell .dr-t .dr-pay { color: var(--text-secondary); }
#dr-shell .dr-t .dr-son { color: var(--text-muted); }
#dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow > td.dr-pay { color: var(--text-secondary); }

/* ── GENEL TOPLAM: sayfanın en güçlü satırı ve HER ZAMAN GÖRÜNÜR ──────────────
   🔴🔴 `.peron-table-wrap` tabloyu `max-height: calc(100vh - 210px)` ile KENDİ
      kutusunda dikey kaydırır ve `thead`i yukarıda sabitler (1970-2003, "bölmeleri
      dondur"). ÖLÇÜLDÜ (320px, temmuz verisi): tablo 4.349px, kutu 454px → GENEL
      TOPLAM satırı kutunun 4.000px altında kalıyor ve kullanıcı onu görmek için iç
      kutuyu sonuna kadar kaydırmak zorunda. Kullanıcının şartı "EN ALTTA TOPLAM
      ADETLER" — ulaşılamayan bir toplam, olmayan toplamdır.
   🔴 `position` HÜCREYE verilir, `tr`ye DEĞİL: tablo satırında sticky çalışmaz.
      Zemin ZORUNLU (altından geçen satırlar görünürdü) ve `z-index` gövdenin
      üstünde olmalı. Emsal: 9136'daki sticky alt şerit. */
#dr-shell .dr-t > tfoot > tr > th,
#dr-shell .dr-t > tfoot > tr > td {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--pri-light);
    border-top: 2px solid var(--pri);
    font-weight: 800;
    color: var(--pri-text);
    text-align: left;
    /* "GENEL TOPLAM" etiketi MARKUP'ta büyük harf; devamı ("10 ürün ağacı · 63 modül
       çeşidi") cümle düzeninde kalsın — tek satırda iki kademe okunurluk. */
    text-transform: none;
}
#dr-shell .dr-t > tfoot > tr > td { text-align: right; font-variant-numeric: tabular-nums; }
#dr-shell .dr-t .dr-adet { font-variant-numeric: tabular-nums; }

/* 🔴 BİRİM ETİKETİ MASAÜSTÜNDE GİZLİ: kolon başlığı ("Adet") zaten yazıyor,
   hücrede tekrar etmek yoğunluğu bozar. Kart düzeninde BAŞLIK SATIRI YOKTUR →
   ≤768'de açılır (emsal `.up-et`, 14512). Metin markup'ta, `content`te değil. */
#dr-shell .dr-et { display: none; }

/* ── BİRLEŞTİRME ROZETİ ("2×") ────────────────────────────────────────────────
   Aynı modülün numaralanmış kopyaları (ürün ağacında adet ≥ 2) TEK satırda
   toplanıyor; rozet kaç etiketin birleştiğini söyler, ayrıntı hücrenin `title`ında.
   🔴 AKSAN RENGİ KULLANILMAZ (`--pri` bu ekranda YALNIZ GENEL TOPLAM ve aktif
      sekmenin): rozet bir vurgu değil, bir DİPNOT. Ayrım renkle değil AĞIRLIK ve
      ZEMİNLE kuruluyor — böylece gece modunda da kontrastı `--text-muted`
      sözleşmesinden miras alır, ikinci bir renk kuralı gerekmez.
   🔴 `flex-shrink: 0` + `vertical-align`: hücre `col-ellip` (taşan metin üç nokta);
      rozet küçülüp okunmaz hâle gelmemeli, ad kısalmalı. */
/* Birleşmiş satırda modül adı: rozete yer AYIRARAK kısalır.
   🔴 PAY `em` TABANLI, px DEĞİL. Rozetin genişliği yazı boyutuyla büyür ve bu
      hücrenin boyu kırılma noktasına göre değişiyor (masaüstü 13px · kart düzeni
      13,5px). Sabit 38px masaüstünde bol, kartta dardı; 3,4em ikisinde de rozetin
      en geniş hâlini (margin + padding + "120×") karşılar. ÖLÇÜLDÜ (tasarım
      denetimi): 320px'te rozet 25,03px, hücrede 46px boşluk vardı — pay büyümesi
      adı kısaltmıyor, yalnız uç durumda rozeti kurtarıyor.
   🔴 SEÇİCİ ÇOCUK ZİNCİRİYLE KAPSANIR (`> tbody.dr-grup > tr.dr-row >`). `thead`,
      `tfoot` ve grup başlığı AYNI `data-dr` adlarını taşıyor; descendant seçici
      1.280.0'da tam bu sebeple iç tabloya sızmıştı. Regresyon bunu kilitliyor. */
#dr-shell .dr-t > tbody.dr-grup > tr.dr-row > td[data-dr="modul"] > .dr-ad {
    display: inline-block;
    max-width: calc(100% - 3.4em);
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

#dr-shell .dr-birlesik {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 4px;
    background: var(--border);
    font-style: normal;
    font-weight: 700;
    /* 🔴 `.85em` GÖRELİDİR ve dar ekranda tabanı deler: gövde 10,5px iken bu rozet
       8,925px'e düşüyordu (ölçüldü) — kullanıcının mutlak tabanı 9px.
       `max()` medya sorgusu AÇMADAN çözer: masaüstünde (13px gövde) .85em = 11px
       zaten kazanır, yalnız 9px'in altına inecekken taban devreye girer. */
    font-size: max(.85em, 9px);
    line-height: 1.5;
    /* 🔴 `--text-muted` DEĞİL `--text-secondary`. ÖLÇÜLDÜ: muted zemini `--border`
       olunca gündüz 4,60:1 (sınırda) ama GECE 4,15:1 → AA'nın ALTINDA. secondary
       ikisinde de geçiyor (6,41 · 6,94). Rozet ~11px, yani "büyük metin" istisnası
       YOK. */
    color: var(--text-secondary);
    vertical-align: 1px;
}
#dr-shell .dr-kisit { margin-top: 16px; }

/* ══ MOBİL (<=768) — TABLO DEĞİL, KART ═════════════════════════════════════════
   Üretim sorumlusu bu raporu SAHADA TELEFONDAN okuyor.

       ▸ 1  FRİDA KÖŞE TAKIMI                       82 adet
                                                   14 çeşit
         FRİDA KÖŞE MODÜL                          14 adet
         23.07.2026                                    %17

   🔴 Hücreler `data-dr` ADIYLA yerleştirilir, `nth-child` ile DEĞİL: kolon
      eklenince/çıkınca mobil düzen sessizce KAYMASIN.
   🔴 HER kural `> tbody.dr-grup > tr.dr-row >` gibi ÇOCUK zinciriyle kapsanır.
      DESCENDANT seçici bu ekranda da yasak: 1.280.0'da `#up-shell .up-t td[data-up]`
      yazımı iç tabloya SIZDI ve modül ADINI sağa yasladı (ölçüldü, ekran
      görüntüsüyle). Burada iç tablo yok ama `tfoot`/`thead`/grup başlığı AYNI
      `data-dr` adlarını taşıyor.
   ═════════════════════════════════════════════════════════════════════════════ */
/* 🔴🔴 KART DÜZENİ KALDIRILDI (1.293.0) — KULLANICI KARARI.
   İstek (birebir): *"detaylı kısmında üretim gibi olsun tasarımı"* ve
   *"bozuk tablo birbirine giriş düzensiz ekranlar tablolar istemiyorum"*.

   1.281.0'da bu sekme telefonda TABLOYU KARTA çeviriyordu (`display:block`,
   `thead` gizli, satırlar ızgara). Kullanıcı bunu "bozuk / birbirine girmiş"
   olarak niteledi ve Üretim Raporu'nun düzenini istedi: TABLO KALIR, KENDİ
   KABINDA yatay kayar, başlık satırı yapışkın durur.

   🔴 SEBEP TEKNİK DEĞİL, OKUMA: kart düzeni her satırı iki satıra bölüyordu ve
      dört kolonluk bir tabloda (Ürün/Modül · Adet · Tarih · Pay) kolon
      başlıkları hiç görünmüyordu; "bu sayı adet mi pay mı" sorusu ekranda
      cevapsız kalıyordu. Tablo + yapışkan başlık bunu çözüyor.
   🔴 KART KURALLARI SİLİNDİ, DEVRE DIŞI BIRAKILMADI: yarısı uygulanan bir
      düzen (blok tablo + görünür thead) her ikisinden de kötüdür. Yeni düzenin
      kuralları dosyanın SONUNDAKİ "RAPORLAR — MOBİL YOĞUNLUK (1.293.0)"
      bloğunda (`#dr-shell .dr-t { min-width: 460px }` + yapışkan başlık + zebra).
   🔴🔴 `data-dr` ÖZNİTELİKLERİ HALA KULLANILIYOR — KALDIRMAYIN.
      Bu özniteliklere bağlı İKİ kural DAHA VAR ve ikisi de AKTİF:
        · masaüstü modül girintisi  `td[data-dr="modul"]`
        · 620-768px "geniş kart bandı" `td[data-dr="son"]`
      (İlk yazımda bu yorum "hiçbir CSS okumuyor" diyordu — YANLIŞTI ve okuyan
      kişiyi özniteliği markup'tan silmeye davet ediyordu; denetimde yakalandı.)
      Kaldırılan şey YALNIZ tam-ekran kart dönüşümüdür.                       */
@media (max-width: 768px) {
    /* Telefonda iç DİKEY kaydırma yok: `.peron-table-wrap` masaüstünde
       `max-height: calc(100vh - 210px)` taşıyor ("bölmeleri dondur"), telefonda
       ise 63 satırlık rapor 454px'lik bir kutuya sıkışıyor ve kullanıcı sayfa
       içinde İKİNCİ bir kaydırma alanıyla boğuşuyordu. YATAY kaydırma KALIR
       (tablo kendi kabında kayar, sayfa gövdesi ASLA). */
    #dr-shell .peron-table-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }
    /* Yapışkan tfoot telefonda kartı ekranın altına yapıştırıyordu. */
    #dr-shell .dr-t > tfoot > tr > th,
    #dr-shell .dr-t > tfoot > tr > td { position: static; }
    /* 🔴🔴 GRUP BAŞLIĞI ALT SATIRLARDAN KÜÇÜK KALIYORDU — HİYERARŞİ TERS
       (tasarım denetimi, 1.339.0). ÖLÇÜLDÜ: 768px'te grup 12px, alt satır 13px;
       320-390px'te grup 8,5px, alt satır 10,5px. Sebep: `.peron-layout .peron-table th`
       (~17709) bu `th`yi bir KOLON BAŞLIĞI sanıp `--m-fs-micro`ya (8,5px) düşürüyor,
       oysa bu bir GRUP başlığıdır ve içindeki ürün adı VERİNİN KENDİSİDİR.
       🔴 BU BİR "BÜYÜTME" DEĞİL: kullanıcının kuralı hıyerarşinin KORUNMASI
          (başlık > gövde) ve mutlak tabanın 9px olması. 8,5px ikisini birden çiğniyordu. */
    #dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow > th {
        font-size: 13px; letter-spacing: 0; }
}

/* ── GENİŞ KART BANDI (620-768px): kart İKİ SATIR değil TEK SATIR ─────────────
   🔴 ÖLÇÜLDÜ (620px, tasarım denetimi): iki satırlık kartta modül adı 131px sürerken
      kendi ızgara sütunu 509px — satırın **%64'ü (378px) BOŞ**. Tablet ve büyük
      telefonlarda liste gereksiz uzuyor (63 satır ≈ 5.700px). Bu bantta dört alan
      YAN YANA dizilir: ad · tarih · adet · pay.
   🔴 Kart mimarisi DEĞİŞMEZ (kırılma noktası 768'de kalır, iç dikey kaydırma
      kapalı kalır). Yalnız ızgara yerleşimi değişir — masaüstü tablo yoluna
      geçmek bu bantta "Son Tamamlanma" başlığını üç noktaya düşürüyordu.
   🔴 Sayı sütunları SABİT genişlikte: `auto` olsaydı en uzun sayı sütunu
      belirlerdi ve satırdan satıra kayardı (rakamlar hizasız görünür). */
@media (min-width: 620px) and (max-width: 768px) {
    #dr-shell .dr-t > tbody.dr-grup > tr.dr-row,
    #dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow {
        grid-template-columns: minmax(0, 1fr) 116px 86px 62px;
        gap: 2px 10px;
    }
    #dr-shell .dr-t > tbody.dr-grup > tr.dr-row {
        grid-template-areas: "modul son adet pay";
        padding: 8px 12px;
    }
    /* Ürün başlığı iki sütun boyunca uzar — adı ve "N çeşit" etiketi sarmasın. */
    #dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow {
        grid-template-areas: "urun urun adet pay";
    }
    #dr-shell .dr-t > tbody.dr-grup > tr.dr-row > td[data-dr="son"] { text-align: right; }
}

@media print {
    /* Ekran süzgeçleri kâğıda basılmaz; PDF çıktısı kendi belgesini üretir
       (peron-mod-detay-raporu.js -> pdfCikti). */
    #dr-shell .dr-filtre { display: none; }
    #dr-shell .dr-kart { break-inside: avoid; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RİSK TABLOSU + CARİ LİMİT ALANLARI  (1.282.0)
   ───────────────────────────────────────────────────────────────────────────
   Muhasebe → Risk Tablosu ekranı ve cari kartındaki "Risk Kontrolü" bloğu.

   🔴 RENK: yalnız `var(--token)`. Sabit hex YAZILMAZ — gece modu
      html[data-peron-theme="dark"] token'ları ezerek çalışır. Durum renkleri
      anlamlıdır: --rose engel · --amber uyarı · --green uygun · --text-muted
      sınırsız. Tek aksan (--pri) yalnız etkileşim için.
   🔴 KLİŞE YOK: gradient metin, dekoratif blur, sol kenarda aksan çizgisi,
      ortalanmış hero, identik 4'lü kart sırası — hiçbiri kullanılmadı. Özet
      bandı ASİMETRİKTİR: solda tek baskın rakam + bileşim çubuğu, sağda dar
      tanım listesi.
   🔴 BOŞLUK 8px ızgarası. Rakam hücreleri tabular-nums + nowrap.
   🔴 MOBİL: bu bloğun sonundaki TEK `max-width:768px` içinde tablo KARTA
      dönüşür (data-lbl). İkinci bir render yolu yoktur → iki görünüm ayrışamaz.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── DURUM YÜZEYİ TOKENLARI — TEK TANIM, İKİ TEMA ────────────────────────────
   🔴 SABİT `rgba(194,84,90,.10)` KULLANILAMAZ. Gece modunda ölçüldü: rozet metni
      ile zemini arasındaki kontrast **1,32:1**'e düşüyordu (AA 4,5 gerekli) —
      çünkü zemin açık-tema kırmızısının translüsanıydı, metin ise gece token'ı.
      `rgba()` hex olmadığı için "sabit hex yok" ölçümüne de yakalanmıyordu.
   🔴 ÇÖZÜM ALİASTIR, YENİ PALET DEĞİL: projenin `--st-*` ailesi zaten HER İKİ
      temada AA ölçülmüş bg/fg/bd üçlüleri taşıyor (`:root` ve
      `html[data-peron-theme="dark"]` bloklarında ayrı ayrı tanımlı). `var()`
      kullanım anında çözüldüğü için tek satır alias iki temayı birden doğru yapar.
      İkinci bir renk seti tanımlamak, ölçülmemiş bir palet daha demekti. */
:root {
    --risk-red-bg:   var(--st-canc-bg);
    --risk-red-fg:   var(--st-canc-fg);
    --risk-red-bd:   var(--st-canc-bd);
    --risk-amber-bg: var(--st-pack-bg);
    --risk-amber-fg: var(--st-pack-fg);
    --risk-amber-bd: var(--st-pack-bd);
    --risk-green-bg: var(--st-done-bg);
    --risk-green-fg: var(--st-done-fg);
    --risk-green-bd: var(--st-done-bd);
}

/* ── MUHASEBE KODLARI ekranı ─────────────────────────────────────────────────
   Üç panel alt alta: Kod Şablonu · Kart Durumu · Kod Listesi. Identik üçlü kart
   sırası BİLEREK kullanılmadı — paneller farklı yükseklikte ve farklı işlevde;
   ızgaraya dizmek görsel simetri uğruna okuma sırasını bozardı.

   🔴 Kolon genişlikleri CSS'te (`col.hkl-*`), satır-içi stilde DEĞİL: satır-içi
      stil media query'yi ezer ve dar ekranda kolon düşürmeyi imkânsız kılar.     */
.hk-wrap { display: flex; flex-direction: column; gap: 16px; }

.hk-panel {
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px 16px;
    background: var(--card-bg);
}
.hk-panel__h {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    margin-bottom: 12px;
}
.hk-panel__h > span { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.hk-panel__h > em {
    font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary);
}
.hk-ornek { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--pri-text); }
/* 🔴 METİN rengi HAM durum token'ı olamaz: --amber (#be7438) beyazda AA'yı geçmez.
   -ink varyantı bu iş için ölçülmüş (5.61:1). */
.hk-eksik { color: var(--amber-ink); font-variant-numeric: tabular-nums; }

.hk-grid {
    display: grid;
    grid-template-columns: var(--hk-cols, minmax(0, 1fr) minmax(0, 1fr));
    gap: 12px 16px;
    align-items: end;
}
.hk-check {
    display: flex; align-items: center; gap: 8px;
    min-height: 44px;                 /* dokunma hedefi */
    font-size: 12px; line-height: 1.45; color: var(--text-primary);
    cursor: pointer; user-select: none;
}
.hk-check > input { flex: 0 0 auto; }
.hk-check em { font-style: normal; color: var(--text-muted); }

.hk-note {
    margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-secondary);
}
.hk-note--kilit { color: var(--amber-ink); }
.hk-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

.hk-log {
    margin-top: 12px; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--border-light);
    font-size: 12px; line-height: 1.5; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.hk-filtre {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.hk-filtre > #hk-q  { flex: 1 1 220px; min-width: 0; }
.hk-filtre > #hk-tur { flex: 0 1 200px; min-width: 0; }

.hk-rozet {
    display: inline-block; padding: 1px 7px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--border-light);
    font-size: 11px; line-height: 1.6; color: var(--text-secondary); white-space: nowrap;
}
.hk-rozet--pasif { color: var(--text-muted); }
/* Kartın türü/yönü değişip kod donuk kaldığında düşen uyarı rozeti.
   METİN rengi -ink varyantıdır (ham --amber beyazda AA'yı geçmez). */
.hk-rozet--uyari { margin-left: 8px; color: var(--amber-ink); border-color: var(--amber-ink); }

.gl-empty-cell { color: var(--text-muted); text-align: center; padding: 18px 8px; }

/* 🔴 KOLON GENİŞLİKLERİ PİKSEL — YÜZDE DEĞİL. Global kural
   `.peron-table--fixed { min-width: max-content }` tabloyu doğal genişliğinde
   kilitler; yüzdeli colgroup'ta doğal genişlik "en geniş başlık ÷ kendi yüzdesi"
   olur ve tablo kabından taşar (ölçüldü: %22'lik "MUHASEBE KODU" başlığı toplamı
   853px'e çıkarıyor, kap 755px). Pikselde doğal genişlik = piksellerin TOPLAMIDIR
   ve kaba sığdığı ÖLÇÜLEBİLİR. */

/* Kart Durumu tablosu — toplam 720px */
col.hkc-tur { width: 300px; }
col.hkc-n   { width: 120px; }
col.hkc-a   { width: 180px; }

/* Kod Listesi tablosu — toplam 740px */
col.hkl-kod { width: 150px; }
col.hkl-ad  { width: 300px; }
col.hkl-tur { width: 110px; }
col.hkl-ana { width: 90px;  }
col.hkl-not { width: 90px;  }

@media (max-width: 900px) {
    /* Tek sütuna in: iki seçici 900px altında 150px'e sıkışıp etiketleri sarıyordu. */
    .hk-grid { --hk-cols: minmax(0, 1fr); }
    /* "Tür" türetilebilir kolondur; `visibility: collapse` tabloyu DARALTIR
       (`display:none` daraltmaz — kolon yerinde kalır). */
    col.hkl-tur { visibility: collapse; width: 0; }
    col.hkl-ad  { width: 260px; }
    /* 768px'te kap 698px; Kart Durumu tablosu 720px doğal genişlikle taşıyordu (ölçüldü). */
    col.hkc-tur { width: 260px; }
    col.hkc-n   { width: 100px; }
    col.hkc-a   { width: 160px; }
}
@media (max-width: 620px) {
    /* "Not" da düşer. Ölçülen kap 430px (390px cihazda kabuk 500px'e genişliyor);
       kolon toplamı hücre dolgusuyla birlikte o sınırın ALTINDA kalmalı. */
    col.hkl-not { visibility: collapse; width: 0; }
    col.hkl-kod { width: 104px; }
    col.hkl-ad  { width: 142px; }
    col.hkl-ana { width: 66px;  }
    col.hkc-tur { width: 140px; }
    col.hkc-n   { width: 60px;  }
    col.hkc-a   { width: 92px;  }
    .peron-hkod-cell { font-size: 12px; }
}
@media (max-width: 420px) {
    col.hkl-kod { width: 96px;  }
    col.hkl-ad  { width: 118px; }
    col.hkl-ana { width: 50px;  }
    col.hkc-tur { width: 118px; }
    col.hkc-n   { width: 54px;  }
    col.hkc-a   { width: 78px;  }
}

/* ── kart formu: RESMÎ MUHASEBE KODU bloğu ───────────────────────────────────
   Risk bloğuyla AYNI kabuk (aynı kenarlık/dolgu/zemin) — iki blok üst üste
   duruyor ve farklı ölçüler kartı basamaklı gösterirdi. Kod alanı
   `tabular-nums` + `nowrap`: 120.01.00001 rakamları eşit genişlikte hizalanır. */
.peron-hkod-inp {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    white-space: nowrap;
}
.peron-hkod-inp[readonly] {
    background: var(--content-bg);
    color: var(--text-secondary);
    cursor: not-allowed;
}
/* Listede/tabloda muhasebe kodu hücresi. */
.peron-hkod-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* ── cari kartı: Risk Kontrolü bloğu ─────────────────────────────────────── */
.peron-risk-fs {
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px 16px;
    margin: 4px 0 16px;
    background: var(--border-light);
}
.peron-risk-fs__h {
    display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px;
}
.peron-risk-fs__h > span { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.peron-risk-fs__h > em {
    font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary);
}
.peron-risk-fs__note {
    margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-secondary);
}
.peron-risk-fs__live {
    box-sizing: border-box;
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 12px; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg);
    font-size: 12px; line-height: 1.5; color: var(--text-primary);
}
.peron-risk-fs__split { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.peron-risk-dot {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
    background: var(--text-muted);
}
.peron-risk-dot.is-kirmizi { background: var(--rose); }
.peron-risk-dot.is-sari    { background: var(--amber); }
.peron-risk-dot.is-yesil   { background: var(--green); }

/* ── ekran başlığı eylemleri ─────────────────────────────────────────────── */
.rk-head-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── filtre çubuğu ───────────────────────────────────────────────────────── */
.rk-bar {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    margin: 0 0 16px;
}
.rk-bar__date { display: flex; flex-direction: column; gap: 3px; }
.rk-bar__date .peron-form-label { font-size: 11px; margin: 0; }
.rk-bar__date .peron-input { width: 168px; max-width: 100%; }
.rk-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rk-chip {
    box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 6px 11px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card-bg); color: var(--text-secondary);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.rk-chip > b { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rk-chip.is-on > b { color: inherit; }
.rk-chip:hover { border-color: var(--pri); color: var(--pri-text); }
.rk-chip.is-on { border-color: var(--pri); background: var(--pri-light); color: var(--pri-text); }
.rk-chip.is-kirmizi.is-on { border-color: var(--risk-red-bd);   background: var(--risk-red-bg);   color: var(--risk-red-fg); }
.rk-chip.is-sari.is-on    { border-color: var(--risk-amber-bd); background: var(--risk-amber-bg); color: var(--risk-amber-fg); }
.rk-chip.is-yesil.is-on   { border-color: var(--risk-green-bd); background: var(--risk-green-bg); color: var(--risk-green-fg); }

/* ── uyarı kutuları ──────────────────────────────────────────────────────── */
.rk-uyari { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.rk-uyari__i {
    box-sizing: border-box;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--card-bg);
}
.rk-uyari__i svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--amber-ink); }
.rk-uyari__i > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-uyari__i b    { font-size: 12px; color: var(--text-primary); }
.rk-uyari__i span { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }

/* ── ÖZET BANDI — asimetrik (1.55fr / 1fr), identik kart sırası DEĞİL ─────── */
.rk-ozet {
    display: grid; grid-template-columns: var(--rk-ozet-cols, minmax(0, 1.55fr) minmax(0, 1fr));
    gap: 16px; margin: 0 0 16px;
}
.rk-ozet__ana, .rk-ozet__yan {
    box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--card-bg); padding: 18px 20px;
}
.rk-ozet__lbl {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted);
}
.rk-ozet__big {
    display: flex; align-items: baseline; gap: 6px; margin: 6px 0 14px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rk-ozet__big > span { font-size: 22px; font-weight: 700; line-height: 1.05; color: var(--text-primary); }
.rk-ozet__big > i    { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* Yığın çubuk: riskin ekstre / açık sipariş bileşimi. Rakam ayrıca YAZILIR
   (yalnız renk taşıyan çubuk okunamaz) — bkz. .rk-legend. */
.rk-stack {
    display: flex; height: 10px; border-radius: 999px; overflow: hidden;
    background: var(--border-light);
}
.rk-stack > span { display: block; width: var(--w, 0); height: 100%; }
.rk-stack__a { background: var(--pri); }
.rk-stack__b { background: var(--violet); }
.rk-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rk-legend > li {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; color: var(--text-secondary);
}
.rk-legend > li > i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.rk-legend > li > i.is-a { background: var(--pri); }
.rk-legend > li > i.is-b { background: var(--violet); }
.rk-legend > li > b {
    margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--text-primary);
}
.rk-legend > li > em { font-style: normal; font-size: 11px; color: var(--text-muted); }

/* Yan blok: dört tanım — TEK sütun listesi, kart sırası değil. */
.rk-ozet__yan { display: flex; flex-direction: column; gap: 0; margin: 0; }
.rk-ozet__yan > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.rk-ozet__yan > div:first-child { padding-top: 0; }
.rk-ozet__yan > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rk-ozet__yan dt { font-size: 12px; color: var(--text-secondary); }
.rk-ozet__yan dd {
    margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rk-ozet__yan dd > span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.rk-ozet__yan dd.is-kirmizi { color: var(--rose-ink); }
.rk-ozet__yan dd.is-sari    { color: var(--amber-ink); }

/* ── MALİ ÖZET (peron-mod-acc-reports.js) ─────────────────────────────────────
   🔴 Bu sınıflar, JS'te satır-içi yazılmış 9 sabit puntonun YERİNE geçer. Satır-içi
      bildirim her CSS kuralını ve @media bloğunu ezdiği için o hücreler dar ekranda
      diğerleriyle birlikte küçülmüyordu (punto sözleşmesi md.3.b).
   🔴 'Net' rakamı 18px'ti — merdivende böyle bir adım YOK (KPI 19-22 · başlık 13 ·
      gövde 12 · etiket 11-11,5 · yardımcı 9,5-10,5). Kullanıcı kuralı BÜYÜTMEYİ
      yasakladığı için 19'a çıkarılmadı, başlık adımına (13px) indirildi. */
.rep-card-h  { padding: 11px 14px; font-weight: 700; font-size: 13px; }
.rep-h-inline{ font-weight: 700; font-size: 13px; }
.rep-band    { padding: 9px 14px; font-weight: 600; font-size: 12px; }
.rep-net     { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-net-lbl { font-size: 12px; color: var(--text-muted); }
.rep-pb-not  { padding: 8px 12px; margin: -6px 0 14px; font-size: 11.5px; line-height: 1.5;
               color: var(--text-secondary); background: var(--content-bg);
               border: 1px solid var(--border); border-radius: var(--r-sm); }
.rep-bos     { padding: 18px; color: var(--text-muted); font-size: 12px; margin-top: 12px; }

/* ── EN RİSKLİ / ONAY ızgarası ───────────────────────────────────────────── */
.rk-grid {
    display: grid; grid-template-columns: var(--rk-grid-cols, minmax(0, 1fr) minmax(0, 1fr));
    gap: 16px; margin: 0 0 16px; align-items: start;
}
.rk-top, .rk-onay {
    box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--card-bg); padding: 16px 18px;
}
.rk-top__h, .rk-onay__h {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.rk-top__h > em, .rk-onay__h > em {
    font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-muted);
}
.rk-top__list { list-style: none; margin: 0; padding: 0; }
.rk-top__row {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--rk-top-bar, 132px) 62px;
    align-items: center; gap: 10px;
    min-height: 34px; padding: 5px 0; cursor: pointer; border-radius: 4px;
}
.rk-top__row:hover  { background: var(--pri-light); }
.rk-top__row:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.rk-top__ad {
    font-size: 12px; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-top__bar {
    display: flex; height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--border-light);
}
/* 🔴 Aşan kısım AYRI parça: çubuğu %100'de kırpmak aşımın büyüklüğünü gizler
   (ölçüldü: %222 ve %105 kullanan iki cari birebir aynı görünüyordu). Çubuğun
   TAMAMI toplam riski temsil eder; `i` limite kadarki pay, `u` aşan pay.
   Aşan pay dolgu rengiyle (metin değil) çizilir → `-ink` gerekmez. */
.rk-top__bar > i { display: block; width: var(--w, 0); height: 100%; background: var(--green); }
.rk-top__bar > u {
    display: block; width: var(--w, 0); height: 100%;
    background: var(--rose); border-left: 1px solid var(--card-bg);
}
.rk-top__bar.is-sari    > i { background: var(--amber); }
.rk-top__bar.is-kirmizi > i { background: var(--rose); }
.rk-top__bar.is-yok     > i { background: var(--text-muted); }
.rk-top__val {
    text-align: right; font-size: 12px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── onay istekleri ──────────────────────────────────────────────────────── */
.rk-onay__bos { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.rk-onay__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rk-onay__row {
    box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px;
    background: var(--content-bg);
}
.rk-onay__row.is-bekle { border-color: var(--risk-amber-bd); background: var(--risk-amber-bg); }
.rk-onay__ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rk-onay__cari {
    font-size: 12px; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-onay__meta {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
    font-size: 11.5px; color: var(--text-secondary);
}
.rk-onay__meta b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rk-onay__not {
    margin-top: 7px; font-size: 11.5px; font-style: italic; line-height: 1.5;
    color: var(--text-secondary);
}
.rk-onay__not.is-karar { font-style: normal; color: var(--text-muted); }
.rk-onay__act { display: flex; gap: 8px; margin-top: 10px; }

/* ── durum rozeti / nokta / bayrak ───────────────────────────────────────── */
.rk-badge {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    border: 1px solid var(--border); background: var(--border-light); color: var(--text-secondary);
}
.rk-badge.is-kirmizi { border-color: var(--risk-red-bd);   background: var(--risk-red-bg);   color: var(--risk-red-fg); }
.rk-badge.is-sari    { border-color: var(--risk-amber-bd); background: var(--risk-amber-bg); color: var(--risk-amber-fg); }
.rk-badge.is-yesil   { border-color: var(--risk-green-bd); background: var(--risk-green-bg); color: var(--risk-green-fg); }
.rk-badge.is-bekle   { border-color: var(--risk-amber-bd); background: var(--risk-amber-bg); color: var(--risk-amber-fg); }
.rk-badge.is-onay    { border-color: var(--risk-green-bd); background: var(--risk-green-bg); color: var(--risk-green-fg); }
.rk-badge.is-red     { border-color: var(--risk-red-bd);   background: var(--risk-red-bg);   color: var(--risk-red-fg); }
.rk-dot {
    display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted);
}
.rk-dot.is-kirmizi { background: var(--rose); }
.rk-dot.is-sari    { background: var(--amber); }
.rk-dot.is-yesil   { background: var(--green); }
.rk-flag {
    display: inline-block; padding: 1px 6px; border-radius: 4px;
    border: 1px dashed var(--risk-amber-bd); color: var(--risk-amber-fg);
    background: var(--risk-amber-bg);
    font-size: 10px; font-weight: 700; white-space: nowrap; cursor: help;
}
.rk-tag {
    font-style: normal; padding: 1px 6px; border-radius: 4px;
    background: var(--border-light); color: var(--text-muted);
    font-size: 10px; font-weight: 600; white-space: nowrap;
}
.rk-sub { display: block; font-style: normal; font-size: 10.5px; color: var(--text-muted); }
.rk-zero { color: var(--text-muted); }
.rk-hot  { color: var(--rose-ink); font-weight: 700; }

/* ── ana tablo ───────────────────────────────────────────────────────────── */
.rk-table .rk-num {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rk-table .rk-sep { border-left: 1px solid var(--border); }
.rk-table .rk-ad {
    display: flex; align-items: center; gap: 7px; min-width: 0;
}
.rk-table .rk-ad__t {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--text-primary);
}
.rk-table .rk-row { cursor: pointer; }
.rk-table .rk-row:hover > td { background: var(--pri-light); }
html[data-peron-theme="dark"] .rk-table .rk-row:hover > td { background: transparent; }
.rk-table .rk-riskcell b { font-weight: 700; }
.rk-table .rk-total > td {
    font-weight: 700; background: var(--border-light); border-top: 2px solid var(--border);
}
/* Kullanım yüzdesi: rakam + altında mini çubuk (sağa dayalı hücre içinde). */
.rk-pct { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; }
.rk-pct > b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.rk-pct > i {
    display: block; height: 5px; border-radius: 999px; background: var(--border-light);
    position: relative; overflow: hidden;
}
.rk-pct > i::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0);
    border-radius: 999px; background: var(--green);
}
/* 🔴 AŞAN PAY AYRI PARÇA — çubuğu %100'de kırpmak aşımın büyüklüğünü gizler
   (ölçüldü: %222 ve %105 kullanan iki cari tabloda birebir aynı görünüyordu).
   `::after` limite kadarki payı (--w), `::before` aşan payı (--w2) boyar; ikisi
   bitişik olduğu için üst üste binmez. Özet bandındaki `.rk-top__bar` ile AYNI
   desen — iki yüzey ayrışmasın. */
.rk-pct > i::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    left: var(--w, 0); width: var(--w2, 0);
    background: var(--rose); border-left: 1px solid var(--card-bg);
}
.rk-pct.is-sari    > i::after { background: var(--amber); }
.rk-pct.is-kirmizi > i::after { background: var(--rose); }
.rk-pct.is-kirmizi > b { color: var(--rose-ink); }
.rk-meta-note { font-size: 11px; color: var(--text-muted); }
.rk-not {
    box-sizing: border-box;
    margin: 14px 0 0; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg);
    font-size: 11.5px; line-height: 1.6; color: var(--text-secondary);
}


/* ── KOLON GENİŞLİKLERİ + DARALAN EKRANDA KOVA DÜŞÜRME ────────────────────────
   🔴 Genişlikler burada, JS'te satır-içi stille DEĞİL: satır-içi stil media
      query'yi EZER (proje kuralı) ve kolon düşürmek imkânsız hale gelirdi.
   🔴 `display:none` tabloyu DARALTMAZ — daraltan `<col>`un `visibility: collapse`'ı
      (bu kod tabanında ölçülmüş tuzak; mal kabul ve üretim tablolarında aynı desen).
   🔴 EŞİKLER ÖLÇÜLDÜ, tahmin edilmedi. Tarayıcıdan alınan gerçek kap genişliği
      ≈ pencere − 320px (sol menü 248 + içerik dolgusu). Kolon toplamı 10 kolonda
      1196px. Eşikler "iç kaydırma OLMASIN" hedefine göre seçildi:
        1440px pencere → kap 1120px → 0-30 düşünce 1088 SIĞAR
        1280px pencere → kap  960px → 31-60 + 61-90 düşünce 872 SIĞAR
      İlk denemede eşikler 1400/1200/1000 idi ve 1440'ta 1196 > 1120 ile TAŞIYORDU
      (ölçüldü). ≤1024'te 10 kolonluk para tablosu fiziksel olarak sığmaz; orada
      tablo `.peron-table-wrap` İÇİNDE kayar — sayfa gövdesi asla kaymaz.
      Düşme sırası EN AZ KRİTİK kovadan: 0-30 (henüz vadesi geçmemiş) → 31-60 →
      61-90. 90+ ve "En eski" ASLA düşmez: ekranın varlık sebebi tam olarak
      yaşlanmış alacağı göstermek. Limit / Risk / Kullanım / Durum da düşmez.
   ───────────────────────────────────────────────────────────────────────────── */
/* 🔴 "Cari" kolonu ESNEK BIRAKILMAZ. `table-layout: fixed` altında esnek kolon,
   sabit kolonların toplamı kabı aşınca ARTAN NE KALIRSA onu alır ve okunamaz hale
   düşer — ÖLÇÜLDÜ: 929px pencerede 47px (ürün adı tek harfe iniyordu). Açık
   genişlik verilince tablo kendi doğal toplamına ulaşır ve FAZLASI `.peron-table-wrap`
   İÇİNDE kayar (proje invariantı: sayfa gövdesi asla yatay kaymaz).
   220px ölçümle seçildi: 1024px pencerede kap 884px, düşürme sonrası sabit toplam
   652px → 220 eklenince 872 ≤ 884 (iç kaydırma YOK). 1280 ve 1440'ta da sığar. */
.rk-table col.rkc-ad    { width: 220px; }
/* 118→112 ve durum 104→100: 820px pencerede toplam 682px iken kap 680px'ti (2px iç
   kaydırma ÖLÇÜLDÜ). Kırpma yok — "1.234.567,89" 12px tabular rakamla ~75px, dolgu
   dahil 95px; 112px hâlâ rahat. */
.rk-table col.rkc-limit { width: 112px; }
.rk-table col.rkc-risk  { width: 132px; }
.rk-table col.rkc-kul   { width: 104px; }
.rk-table col.rkc-b1,
.rk-table col.rkc-b2,
.rk-table col.rkc-b3,
.rk-table col.rkc-b4    { width: 108px; }
.rk-table col.rkc-gun   { width: 86px; }
.rk-table col.rkc-durum { width: 100px; }

/* ÖLÇÜLEN KAP: kap ≈ pencere − 320px (sol menü 248 + içerik dolgusu; tarayıcıdan
   okundu). Eşikler "iç kaydırma OLMASIN" hedefiyle seçildi ve HER BİRİ ölçüldü:
     1536 → kap 1216 · 10 kolon 1196  SIĞAR
     1440 → kap 1120 · 0-30 düşer  1088  SIĞAR   (ölçüldü)
     1366 → kap 1046 · 31-60 düşer  980  SIĞAR
     1280 → kap  960 · 61-90 düşer  872  SIĞAR   (ölçüldü)
     1024 → kap  884 (menü daralıyor) · 9 kolon 872  SIĞAR      (ölçüldü)
     1000 → kap  860 · Kullanım+En eski düşer  682  SIĞAR
   İlk denemede eşikler 1400/1200/1000 idi; 1440'ta 1196 > 1120 ve 1280'de 980 > 960
   ile TAŞIYORDU (ikisi de ölçüldü). ≤1000'de 10 kolonluk para tablosu fiziksel olarak
   sığmaz; orada tablo `.peron-table-wrap` İÇİNDE kayar — sayfa gövdesi ASLA kaymaz. */
@media (max-width: 1500px) {
    :where(:not(.is-sigdir)) > .rk-table col.rkc-b1 { visibility: collapse; width: 0; }
    :where(:not(.is-sigdir)) > .rk-table > thead > tr > th:nth-child(5),
    :where(:not(.is-sigdir)) > .rk-table > tbody > tr > td:nth-child(5) { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1400px) {
    :where(:not(.is-sigdir)) > .rk-table col.rkc-b2 { visibility: collapse; width: 0; }
    :where(:not(.is-sigdir)) > .rk-table > thead > tr > th:nth-child(6),
    :where(:not(.is-sigdir)) > .rk-table > tbody > tr > td:nth-child(6) { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1300px) {
    :where(:not(.is-sigdir)) > .rk-table col.rkc-b3 { visibility: collapse; width: 0; }
    :where(:not(.is-sigdir)) > .rk-table > thead > tr > th:nth-child(7),
    :where(:not(.is-sigdir)) > .rk-table > tbody > tr > td:nth-child(7) { padding-left: 0; padding-right: 0; }
}
/* ≤1023: "Kullanım" ve "En eski" düşer.
   🔴 EŞİK ÖLÇÜMLE 1100'DEN 1023'E ÇEKİLDİ: 1024px pencerede sol menü DARALIYOR ve
      gerçek kap 884px (varsayılan formülün öngördüğü 704 değil — tarayıcıdan okundu).
      1100'de düşürmek, 1024'te sığan iki kolonu boşuna kaybettiriyordu:
      682 + 104 + 86 = 872 ≤ 884 SIĞIYOR.
   🔴 İkisi de TÜRETİLEBİLİR bilgidir: kullanım yüzdesi Risk ÷ Limit'tir ve durum
      çipi (kırmızı/sarı) aynı şeyi söyler; en eski gün ise 90+ kovasının dolu olup
      olmamasıyla ve satırın "eşik N g" alt etiketiyle görünür. "Limit" ve "Risk"
      DÜŞMEZ — ekranın varlık sebebi o ikisinin karşılaştırılmasıdır.
   🔴 Mobil kart görünümünde (≤768) HER İKİSİ DE GERİ GELİR: kartta kolon darlığı
      yoktur, hücreler etiketli satır olur. */
@media (max-width: 1023px) {
    :where(:not(.is-sigdir)) > .rk-table col.rkc-kul,
    :where(:not(.is-sigdir)) > .rk-table col.rkc-gun { visibility: collapse; width: 0; }
    :where(:not(.is-sigdir)) > .rk-table > thead > tr > th:nth-child(4),
    :where(:not(.is-sigdir)) > .rk-table > tbody > tr > td:nth-child(4),
    :where(:not(.is-sigdir)) > .rk-table > thead > tr > th:nth-child(9),
    :where(:not(.is-sigdir)) > .rk-table > tbody > tr > td:nth-child(9) { padding-left: 0; padding-right: 0; }
}

/* ── plan engeli modalı ──────────────────────────────────────────────────── */
.rk-block__i {
    box-sizing: border-box;
    border: 1px solid var(--risk-red-bd); border-radius: 8px;
    background: var(--risk-red-bg); padding: 12px 14px; margin-bottom: 10px;
}
.rk-block__msg { display: flex; align-items: flex-start; gap: 9px; }
.rk-block__msg svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--rose-ink); }
.rk-block__msg span { font-size: 12px; line-height: 1.55; font-weight: 600; color: var(--text-primary); }
.rk-block__meta {
    display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 8px 0 0 26px;
    font-size: 11.5px; color: var(--text-secondary);
}
.rk-block__meta b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rk-block__note {
    margin: 0 0 14px; font-size: 12px; line-height: 1.6; color: var(--text-secondary);
}
.rk-opt { font-weight: 400; font-size: 11px; color: var(--text-muted); }
.rk-modal-p { margin: 0 0 12px; font-size: 12px; line-height: 1.55; color: var(--text-primary); }
.rk-modal-box {
    box-sizing: border-box;
    border: 1px solid var(--border); border-radius: 8px; background: var(--content-bg);
    padding: 10px 13px; margin: 0 0 12px;
}
.rk-modal-box > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 5px 0; font-size: 12px;
}
.rk-modal-box span { color: var(--text-secondary); }
.rk-modal-box b { color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; }
.rk-modal-note { margin: 0 0 12px; font-size: 11.5px; line-height: 1.55; color: var(--text-muted); }

/* ── 1024-1180: özet ve ızgara tek sütuna iner (kolonlar sıkışmasın) ─────── */
@media (max-width: 1180px) {
    .rk-ozet { --rk-ozet-cols: minmax(0, 1fr); }
    .rk-ozet__big > span { font-size: 20px; }
}
@media (max-width: 1024px) {
    .rk-grid { --rk-grid-cols: minmax(0, 1fr); }
}

/* ═══ MOBİL SON SÖZ — RİSK TABLOSU (≤768px) ═════════════════════════════════
   🔴 Bu blok dosyanın SONUNDADIR ve TEK `max-width: 768px` içindedir (proje
      kuralı: media query ÖZGÜLLÜK EKLEMEZ; "Kompakt Tasarım" bloğundan sonra
      gelmeyen mobil kural ÖLÜDÜR).
   🔴 Masaüstü (≥769px) render yolu DEĞİŞMEZ — buradaki hiçbir kural o eşiğin
      dışına taşmaz.
   🔴 10 kolonlu tablo telefonda `table-layout:fixed` ile esnek kolonu 0px'e
      çökertir (projede ölçülmüş arıza). Çözüm: satır KARTA dönüşür, hücre
      etiketleri `data-lbl`den gelir → İKİNCİ bir render yolu yok, iki görünüm
      ayrışamaz. Sayfa gövdesi yatay KAYMAZ.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 🔴 `flex: 1 1 auto` düğmeleri GERİYORDU ve üç düğme "2 + 1 ortada" diye
       kırılıyordu (390px'te ölçüldü: "Yazdır" tek başına 44px'lik bir satır
       harcıyordu). `0 1 auto` + sola yaslama ile paketlenirler; hiçbir düğme
       GİZLENMEDİ — mobilde yazdırma nadir de olsa erişilebilir kalmalı. */
    .rk-head-act { width: 100%; justify-content: flex-start; }
    .rk-head-act .peron-btn { flex: 0 1 auto; min-height: 44px; }

    .rk-bar { gap: 12px; }
    .rk-bar__date { width: 100%; }
    /* iOS: 16px altı input odaklanınca sayfayı zoomlar. */
    .rk-bar__date .peron-input { width: 100%; font-size: 16px; min-height: 44px; }
    .rk-chip { min-height: 44px; padding: 8px 13px; font-size: 12px; }

    .rk-ozet__ana, .rk-ozet__yan, .rk-top, .rk-onay { padding: 14px 15px; }
    .rk-ozet__big > span { font-size: 19px; }
    .rk-ozet__yan dd { font-size: 13px; }
    .rk-top__row { grid-template-columns: minmax(0, 1fr) 84px 54px; min-height: 44px; }

    .rk-onay__act .peron-btn { flex: 1 1 0; min-height: 44px; }

    /* ── tablo → kart ── */
    .rk-table, .rk-table tbody, .rk-table tr, .rk-table td { display: block; width: auto; }
    .rk-table colgroup, .rk-table thead { display: none; }
    .rk-table { table-layout: auto; border-collapse: separate; border-spacing: 0; }
    .rk-table tbody tr {
        box-sizing: border-box;
        border: 1px solid var(--border); border-radius: 10px;
        background: var(--card-bg); padding: 12px 14px; margin-bottom: 10px;
    }
    .rk-table tbody tr.rk-total { background: var(--border-light); }
    /* 🔴 KART GÖVDESİ DE 9 PUNTO (--tbl-fs, 12px).
       Buradaki eski kural ("dar ekranda gövde BÜYÜR, ≥14px") KULLANICI TARAFINDAN
       KALDIRILDI (2026-09-07): "asla mobilde 10 puntoda bırakma diye bir kural yok,
       sadece sayfalardaki oran orantıyı yakala ve mümkün olduğunda sayfaya yazıları
       sığdır küçült yani." Mobil kural masaüstünü BÜYÜTEMEZ: masaüstü hücre 12px iken
       burası 14px yazıyordu — kart yüksekliğini gereksiz uzatıyordu. Hiyerarşi
       korunur: etiket (::before) 12px soluk · değer 12px koyu. */
    .rk-table tbody td {
        box-sizing: border-box;
        border: 0; padding: 4px 0; text-align: left;
        display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
        font-size: 12px;
    }
    .rk-table tbody td::before {
        content: attr(data-lbl);
        flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-muted);
    }
    .rk-legend > li,
    .rk-onay__meta,
    .rk-onay__not,
    .rk-uyari__i span,
    .rk-not,
    .peron-risk-fs__note { font-size: 12px; }
    .rk-top__ad, .rk-top__val { font-size: 12px; }
    /* Etiketi boş olan hücre (cari adı / genel toplam başlığı) tam satır olur. */
    .rk-table tbody td[data-lbl=""]::before,
    .rk-table tbody td.rk-ad::before { content: none; }
    .rk-table tbody td.rk-ad {
        display: flex; justify-content: flex-start; flex-wrap: wrap;
        padding-bottom: 8px; margin-bottom: 4px;
        border-bottom: 1px solid var(--border-light);
        font-size: 12px;
    }
    .rk-table .rk-sep { border-left: 0; }
    /* 🔴 BOŞ/SIFIR hücre karttan DÜŞER — kart yoğunluğu.
       ÖLÇÜLDÜ: 10 hücre × 44px dokunma yüksekliği = 470px kart; dolu olmayan
       kovalar düşünce tipik kart ~250px. Masaüstü tablo ETKİLENMEZ (bu blok yalnız
       ≤768px) ve orada hücre "—" basmaya devam eder: tablo satır hizası bozulmaz.
       `rk-nil` sınıfını JS'in AYNI markup'ı koyar — ikinci render yolu yok. */
    .rk-table tbody td:empty,
    .rk-table tbody td.rk-nil { display: none; }
    .rk-table tbody tr:hover > td { background: transparent; }
    .rk-pct { flex-direction: row; align-items: center; gap: 8px; width: 148px; }
    .rk-pct > b { text-align: right; min-width: 44px; }
    .rk-pct > i { flex: 1 1 auto; }
    .rk-table tbody td.rk-riskcell { flex-wrap: wrap; }
    .rk-table tbody td.rk-riskcell .rk-sub { flex: 1 1 100%; text-align: right; }

    .rk-block__meta { margin-left: 0; }
    .rk-modal-box > div { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRAFİK MOTORU (peron-app.js → PERON_APP.grafik)  ·  sınıf öneki `pg-`
   ---------------------------------------------------------------------------
   🔴 MOBILE-FIRST: temel kurallar dar ekran içindir; `min-width` sorguları
      YALNIZ büyütür. Hiçbir grafik sabit piksel genişlik kullanmaz — SVG
      `width:100%` + `viewBox` ile ölçeklenir, gövde asla yatay kaymaz.
   🔴 RENK TEK DEĞİŞKENDEN: `--pg-c` (varsayılan birincil aksan). Çağıran satır
      bazında ezer; ikinci bir palet tanımlanmaz.
   🔴 GECE MODU EZMESİ YOK: tüm renkler zaten tema değişkeni
      (`--pri`, `--border`, `--text-muted`); `html[data-peron-theme="dark"]`
      altında ayrı kural yazmak iki paletin ayrışması demekti.
   ═══════════════════════════════════════════════════════════════════════════ */
.pg,
.pg-cubuklar,
.pg-halka,
.pg-serit { --pg-c: var(--pri); box-sizing: border-box; max-width: 100%; }

/* ── Alan grafiği ────────────────────────────────────────────────────────── */
.pg-svg { display: block; width: 100%; height: auto; aspect-ratio: 640 / 170; overflow: visible; }
.pg-izgara { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; }
.pg-cizgi  { stroke: var(--pg-c); stroke-width: 2.2; vector-effect: non-scaling-stroke;
             stroke-linecap: round; stroke-linejoin: round; }
.pg-son    { fill: var(--pg-c); stroke: var(--card-bg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pg-g0     { stop-color: var(--pg-c); stop-opacity: .26; }
.pg-g1     { stop-color: var(--pg-c); stop-opacity: 0; }

.pg-eksen { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px;
            font: 600 11px/1.2 var(--font); color: var(--text-muted);
            font-variant-numeric: tabular-nums; }
.pg-eksen-orta { opacity: .8; }

/* ── ALAN GRAFİĞİ: Y ÖLÇEĞİ + NİŞANGÂH KATMANI (2026-09-13) ──────────────────
   🔴 SORUN ÖLÇÜLDÜ: grafik yalnız ŞEKİL veriyordu. Üç ızgara çizgisi çiziliyor
      ama hiçbirinin değeri yazmıyordu; imleç bir güne geldiğinde tek geri
      bildirim tarayıcının ~1 sn gecikmeli native ipucuydu ve dokunmatikte o da
      açılmıyordu. İkisi birlikte "amatör grafik" hissinin kaynağıydı.
   🔴 EK JS YOK: motor yalnız dize döndürür, bağlanacak yaşam döngüsü kancası
      yoktur. Tüm etkileşim CSS `:hover` — dinleyici sızıntısı imkânsız.
   🔴 METİN SVG'NİN DIŞINDA (motorun kuralı): SVG `preserveAspectRatio="none"`
      ile esnetiliyor, içine yazılan her `<text>` de esner. Etiketler yüzdeyle
      konumlanan HTML. */
.pg-alan-kap { position: relative; }

.pg-yeksen { position: absolute; inset: 0; pointer-events: none; }
.pg-yeksen span {
    position: absolute; left: 0; transform: translateY(-100%);
    padding: 0 4px 1px 0; background: var(--card-bg);
    font: 500 9.5px/1 var(--font); color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Gün bantları: her veri noktası için tam yükseklik görünmez şerit.
   🔴 `flex: 1 1 0` — 30 gün eşit paylaşır; `1 1 auto` içerik genişliğine göre
      kayardı ve bant ile nokta hizası bozulurdu (aynı hata daha önce liste
      satırlarında 28px kaymaya yol açmıştı). */
.pg-bantlar { position: absolute; inset: 0; display: flex; }
.pg-bant { position: relative; flex: 1 1 0; min-width: 0; }
.pg-bant::before {                                   /* nişangâh */
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
    transform: translateX(-50%); background: var(--pg-c); opacity: 0;
    transition: opacity 120ms ease;
}
.pg-bant::after {                                    /* o günün noktası */
    content: ''; position: absolute; left: 50%; top: var(--py); width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px; border-radius: 50%;
    background: var(--pg-c); box-shadow: 0 0 0 2px var(--card-bg);
    opacity: 0; transition: opacity 120ms ease;
}
/* 🔴 `:focus` ZORUNLU, `:hover` TEK BAŞINA YETMEZ (2026-09-13).
   ÖLÇÜLDÜ: gerçek dokunmatik bağlamda (390px, hasTouch) bantlara dokununca
   ipucu `opacity:0` kalıyordu — `:hover` dokunmatik tarayıcıda tetiklenmez.
   Bant artık `tabindex` taşıyor; dokunmak onu ODAKLAR, ok tuşları gezdirir.
   Bu yüzden her kural `:hover` ve `:focus` için AYNI şeyi yapar. */
.pg-bant:hover::before, .pg-bant:focus::before { opacity: .38; }
.pg-bant:hover::after,  .pg-bant:focus::after  { opacity: 1; }
/* Odak halkası yalnız KLAVYEDE — dokunmada halka görsel gürültüdür, ipucu
   zaten nerede olduğunu söylüyor. */
.pg-bant:focus { outline: none; }
.pg-bant:focus-visible { outline: 2px solid var(--pg-c); outline-offset: -2px; border-radius: 3px; }

.pg-ipucu {
    position: absolute; bottom: calc(100% - var(--py) + 12px); left: 50%;
    transform: translateX(-50%); z-index: 3; pointer-events: none;
    display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
    padding: 5px 8px; border-radius: 7px; white-space: nowrap;
    background: var(--text-primary); color: var(--card-bg);
    box-shadow: var(--shadow-card); opacity: 0; transition: opacity 120ms ease;
}
/* İlk/son bantta ipucu kartın dışına taşar — kenara yaslanır. */
.pg-bant.is-bas .pg-ipucu { left: 0; transform: none; }
.pg-bant.is-son .pg-ipucu { left: auto; right: 0; transform: none; }
.pg-bant:hover .pg-ipucu, .pg-bant:focus .pg-ipucu { opacity: 1; }
.pg-ipucu em { font: 500 9.5px/1.2 var(--font); font-style: normal; opacity: .75; }
.pg-ipucu s  { font: 700 12px/1.2 var(--font); text-decoration: none;
               font-variant-numeric: tabular-nums; }

/* ── Yatay çubuklar ──────────────────────────────────────────────────────── */
.pg-cubuklar { display: flex; flex-direction: column; gap: 11px; }
.pg-cb-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.pg-cb-ad  { font: 500 12px/1.35 var(--font); color: var(--text-secondary);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pg-cb-dg  { font: 700 13px/1.2 var(--font); color: var(--text-primary);
             font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.pg-cb-ray { height: 8px; border-radius: 99px; background: var(--content-bg);
             border: 1px solid var(--border); overflow: hidden; }
.pg-cb-ray > i { display: block; height: 100%; border-radius: 99px; background: var(--pg-c);
                 /* 🔴 Hareketin gerekçesi var: çubuk yüklendiğinde uzunluk DEĞİŞİYOR,
                    göz onu takip etsin. Dekoratif "nefes alan" animasyon yok. */
                 transition: width 420ms cubic-bezier(.22,.61,.36,1); }

/* ── Halka ───────────────────────────────────────────────────────────────── */
.pg-halka { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pg-halka-cizim { position: relative; width: min(160px, 62vw); flex: none; }
.pg-halka-cizim svg { display: block; width: 100%; height: auto; }
.pg-yay { fill: none; stroke: var(--pg-c); stroke-width: 15; stroke-linecap: butt; }
.pg-yay--zemin { stroke: var(--content-bg); }
.pg-halka-ic { position: absolute; inset: 0; display: flex; flex-direction: column;
               align-items: center; justify-content: center; gap: 1px; pointer-events: none; }
.pg-halka-ic b { font: 800 21px/1 var(--font); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pg-halka-ic em { font: 500 10.5px/1.2 var(--font); font-style: normal; color: var(--text-muted);
                  text-transform: uppercase; letter-spacing: .04em; }
/* ÜÇÜNCÜ SATIR (1.290.0) — "12 takım / 34 modül". Kullanıcı: "önce takım olarak
   göster, altında modül yaz". Yalnız `merkezNot` verildiğinde basılır. */
.pg-halka-ic small { margin-top: 2px; font: 700 9.5px/1.2 var(--font); color: var(--text-secondary);
                     font-variant-numeric: tabular-nums; }
/* Efsane değerinin ALT SATIRI — büyük sayı takım, altındaki küçük sayı modül.
   Yalnız `.pg-efsane--alt` altında; diğer grafikler tek satırlık değeri korur. */
.pg-efsane--alt li > b { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.pg-efsane--alt li > b em { font: 500 9.5px/1.2 var(--font); font-style: normal; color: var(--text-muted); }
.pg-efsane--alt li { align-items: flex-start; }
.pg-efsane--alt li > i { margin-top: 4px; }

/* ── Efsane (halka + şerit ortak) ────────────────────────────────────────── */
.pg-efsane { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
             gap: 7px; width: 100%; min-width: 0; }
.pg-efsane li { display: flex; align-items: center; gap: 8px; min-width: 0;
                font: 500 12px/1.35 var(--font); color: var(--text-secondary); }
.pg-efsane li > i { width: 10px; height: 10px; border-radius: 3px; background: var(--pg-c); flex: none; }
/* 🔴 EFSANE METNİ KIRPILMAZ, SARILIR (2026-09-03). Ölçüldü (1440px, Hammadde):
   "BELVİA KANEPE ALT KASA BEYAZ" 202px istiyor, kutu 151px veriyordu → tek satırda
   üç nokta. Grafik efsanesi "hangi renk hangi ürün" sorusunun TEK cevabıdır; kırpılmış
   efsane grafiği okunamaz yapar ve `title` ipucu dokunmatikte yok hükmündedir.
   En fazla İKİ satır: üçüncü satır efsaneyi grafikten uzun yapardı. */
.pg-efsane li > span { flex: 1 1 auto; min-width: 0; overflow: hidden;
                       white-space: normal; overflow-wrap: anywhere;
                       display: -webkit-box; -webkit-box-orient: vertical;
                       -webkit-line-clamp: 2; line-height: 1.25; }
.pg-efsane li > b { flex: none; font-weight: 700; color: var(--text-primary);
                    font-variant-numeric: tabular-nums; }
.pg-efsane--yatay { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
.pg-efsane--yatay li { flex: 0 1 auto; }
.pg-efsane--yatay li > span { flex: 0 1 auto; }

/* ── Yığılmış şerit ──────────────────────────────────────────────────────── */
.pg-serit { display: flex; flex-direction: column; gap: 11px; }
.pg-serit-ray { display: flex; height: 12px; border-radius: 99px; overflow: hidden;
                background: var(--content-bg); border: 1px solid var(--border); gap: 1px; }
.pg-serit-ray > i { display: block; background: var(--pg-c); min-width: 3px; }

/* ── Kıvılcım (stat kutusu içi) ──────────────────────────────────────────── */
/* ═══ GRAFİK MOTORU EKLERİ — çok serili çizgi · ısı takvimi · zaman çizelgesi ═══
   🔴 YALNIZ TOKEN: seri rengi `--pg-c` üzerinden gelir, kademeler `color-mix` ile
      aynı tondan türer (ikinci bir palet yok → gece modu kendiliğinden doğru).
   🔴 EK DİNLEYİCİ YOK: etkileşim `alan()` ile aynı bant katmanı (:hover / :focus). */
.pg-hsonu { fill: var(--text-muted); opacity: .07; }
.pg-cizgi--baglam { stroke-width: 1.4; opacity: .55; }
.pg--coklu .pg-nk {
    position: absolute; left: 50%; top: var(--py); width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px; border-radius: 50%; text-decoration: none;
    background: var(--pg-c); box-shadow: 0 0 0 2px var(--card-bg);
    opacity: 0; transition: opacity 120ms ease;
}
.pg-bant:hover .pg-nk, .pg-bant:focus .pg-nk { opacity: 1; }
.pg-eksen.pg-eksen--konum { display: block; position: relative; height: 14px; }
.pg-eksen--konum span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
/* İpucu nişangâhın YANINA açılır (üstüne değil): üç satırlık kutu noktaları örtmez.
   Yüzey kart zeminidir — seri anahtarları kart zemini için ölçülmüş tokenlardır. */
.pg-ipucu.pg-ipucu--coklu {
    bottom: auto; top: 2px; left: calc(50% + 12px); transform: none;
    gap: 3px; min-width: 128px; padding: 8px 10px; border-radius: 9px;
    background: var(--card-bg); color: var(--text-primary);
    border: 1px solid var(--border); box-shadow: var(--shadow-card-hover);
}
.pg-bant.is-sag .pg-ipucu.pg-ipucu--coklu { left: auto; right: calc(50% + 12px); }
.pg-ipucu--coklu em { margin-bottom: 2px; font-size: 10.5px; color: var(--text-muted); opacity: 1; }
.pg-ip-s {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 6px;
    align-items: center; width: 100%; color: var(--text-secondary);
}
.pg-ip-s.is-odak { color: var(--text-primary); }
.pg-ip-s > u { height: 2px; border-radius: 2px; background: var(--pg-c); text-decoration: none; }
.pg-ip-s.is-odak > u { height: 3px; }
.pg-ip-s > span { font: 500 11px/1.3 var(--font); }
.pg-ip-s.is-odak > span { font-weight: 700; }
.pg-ipucu--coklu .pg-ip-s > s { font: 700 11.5px/1.3 var(--font); }
.pg-ip-s > small { grid-column: 2 / -1; justify-self: end; font: 500 9.5px/1.2 var(--font); color: var(--text-muted); }

.pg-isi {
    --pg-c: var(--pri); --isi-h: 10px; box-sizing: border-box; max-width: 100%;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 6px; align-items: end;
}
.pg-isi-gunler {
    display: grid; grid-template-rows: repeat(7, var(--isi-h)); row-gap: 2px;
    font: 500 9px/1 var(--font); color: var(--text-muted);
}
.pg-isi-gunler span { align-self: center; }
.pg-isi-gunler span:nth-child(1) { grid-row: 1; }
.pg-isi-gunler span:nth-child(2) { grid-row: 3; }
.pg-isi-gunler span:nth-child(3) { grid-row: 5; }
.pg-isi-govde { min-width: 0; }
.pg-isi-aylar {
    display: grid; grid-template-columns: repeat(var(--isi-sutun), minmax(0, 1fr)); column-gap: 2px;
    margin-bottom: 4px; font: 600 9.5px/1.2 var(--font); color: var(--text-muted);
}
.pg-isi-aylar span {
    min-width: 0; padding-top: 2px; border-top: 2px solid transparent;
    white-space: nowrap; overflow: hidden;
}
.pg-isi-aylar span[data-nabiz-ay] { cursor: pointer; }
.pg-isi-aylar span.is-on { color: var(--text-primary); border-top-color: var(--pg-c); }
.pg-isi-izgara {
    display: grid; grid-template-rows: repeat(7, var(--isi-h)); grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr); gap: 2px;
}
.pg-isi-h { position: relative; display: block; border-radius: 2px; background: var(--content-bg); }
.pg-isi-h.is-bos { background: none; }
.pg-isi-h.is-gelecek { background: none; box-shadow: inset 0 0 0 1px var(--border-light); }
.pg-isi-s1 { background: color-mix(in srgb, var(--pg-c) 24%, var(--card-bg)); }
.pg-isi-s2 { background: color-mix(in srgb, var(--pg-c) 48%, var(--card-bg)); }
.pg-isi-s3 { background: color-mix(in srgb, var(--pg-c) 74%, var(--card-bg)); }
.pg-isi-s4 { background: var(--pg-c); }
.pg-isi--secili .pg-isi-izgara .pg-isi-h:not(.is-ay) { opacity: .5; }
.pg-isi-h[data-ip] { cursor: pointer; }
.pg-isi-efsane {
    grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 3px;
    font: 500 9.5px/1 var(--font); color: var(--text-muted);
}
.pg-isi-efsane .pg-isi-h { width: 10px; height: 10px; }

.pg-zc { --pg-c: var(--green); box-sizing: border-box; max-width: 100%; display: flex; flex-direction: column; gap: 4px; }
.pg-zc-eksen {
    position: relative; height: 13px; font: 600 9.5px/1 var(--font); color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.pg-zc-eksen span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pg-zc-eksen span:first-child { transform: none; }
.pg-zc-eksen span:last-child { transform: translateX(-100%); }
.pg-zc-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pg-zc-s {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 8px 0;
    border-top: 1px solid var(--border-light);
}
.pg-zc-s.is-gec { --pg-c: var(--rose); }
.pg-zc-s.is-yakin { --pg-c: var(--amber); }
.pg-zc-ad { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pg-zc-ad b { font: 600 12px/1.3 var(--font); color: var(--text-primary); overflow-wrap: anywhere; }
.pg-zc-ad span { font: 400 11px/1.3 var(--font); color: var(--text-muted); overflow-wrap: anywhere; }
.pg-zc-sag {
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pg-zc-sag b { font: 700 11px/1.3 var(--font); color: var(--text-primary); }
.pg-zc-sag span { font: 500 10.5px/1.3 var(--font); color: var(--text-muted); }
.pg-zc-s.is-gec .pg-zc-sag span { color: var(--rose-ink); font-weight: 700; }
.pg-zc-s.is-yakin .pg-zc-sag span { color: var(--amber-ink); font-weight: 700; }
.pg-zc-ray {
    grid-column: 1 / -1; position: relative; height: 8px; margin: 0 5px; border-radius: 99px;
    background-color: var(--content-bg);
    background-image: linear-gradient(to right, var(--border) 1px, transparent 1px);
    background-size: 50% 100%;
}
.pg-zc-cubuk {
    position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; border-radius: 99px;
    background: color-mix(in srgb, var(--pg-c) 26%, var(--card-bg));
}
.pg-zc-cubuk b { display: block; height: 100%; background: var(--pg-c); }
.pg-zc-nokta {
    position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: var(--pg-c); box-shadow: 0 0 0 2px var(--card-bg); text-decoration: none;
}

/* ═══ DASHBOARD — MASAÜSTÜ YERLEŞİMİ VE KARTLAR ══════════════════════════════════
   🔴 KAPSAM `.dash-kok`: bu sınıf yalnız masaüstü dalının kökünde basılır; telefon
      dalı (`.peron-mob-home`) bu kuralların HİÇBİRİNİ görmez.
   🔴 KOLON KARARI KABA GÖRE (`@container dashkap`): aynı ekran genişliğinde kenar
      çubuğu açık/kapalı ~180px fark eder; `@media` ile kap tahmin edilmez.
   🔴 SABİT 12 KOLON: kart genişliği JS'te görünen kart SAYISINDAN hesaplanır
      (8+4 · 4+4+4 · 6+6 · 12) — `auto-fit` yok, tek başına kalan kart yok. */
.dash-kok { container-type: inline-size; container-name: dashkap; }
.dash-kpi {
    display: grid; grid-template-columns: repeat(var(--dash-kpi-n, 4), minmax(0, 1fr)); grid-auto-rows: 1fr;
    gap: 12px; margin: 0 0 12px;
}
.dash-kpi-k {
    box-sizing: border-box; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr);
    align-content: start; row-gap: 4px; padding: 12px 14px; text-align: left;
    font: inherit; color: inherit; cursor: pointer;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
    transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 120ms ease-out;
}
.dash-kpi-k:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.dash-kpi-k.is-duz { cursor: default; }
.dk-et { font: 600 11px/1.3 var(--font); color: var(--text-muted); }
.dk-dg { font: 800 22px/1.1 var(--font); color: var(--text-primary); letter-spacing: -.01em; }
.dash-kpi-k.is-uyari .dk-dg { color: var(--rose-ink); }
.dk-not { font: 500 10.5px/1.4 var(--font); color: var(--text-muted); }
.dk-not b { font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dk-olcer, .dk-serit, .dk-cift { display: flex; margin: 4px 0 2px; }
.dk-olcer { height: 6px; border-radius: 99px; background: var(--content-bg); overflow: hidden; }
.dk-olcer > i { display: block; height: 100%; border-radius: 99px; background: var(--rose); }
.dk-serit { height: 6px; gap: 2px; }
.dk-serit > i { display: block; min-width: 0; height: 100%; border-radius: 99px; background: var(--pg-c); }
.dk-cift { flex-direction: column; gap: 3px; }
.dk-cift > i { display: block; height: 4px; border-radius: 99px; background: var(--pri); }
.dk-cift > i.is-cikis { background: color-mix(in srgb, var(--pri) 42%, var(--card-bg)); }

.dash-bolum {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px;
    align-items: stretch; margin: 0 0 12px;
}
.dash-b { grid-column: span 12; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; }
.dash-b--8 { grid-column: span 8; }
.dash-b--6 { grid-column: span 6; }
.dash-b--4 { grid-column: span 4; }
.dash-b > .peron-card { box-sizing: border-box; flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.dash-b > .peron-card > .peron-card-body { flex: 1 1 auto; min-width: 0; }
.dash-b .dash-govde { padding: 0; }
.dash-b .dash-govde--ic { padding: 12px 16px; }
.dash-kaydir { max-height: 420px; overflow: auto; }
.dash-kaydir--kisa { max-height: 360px; }
/* Aşama çipleri kırpılmaz, sığmazsa alt satıra iner ("2 Plana Alı…" ölçüldü, 1280px). */
.dash-kok .dash-prod-chips { flex-wrap: wrap; }
.dash-kok .dash-prod-chips .dash-prod-chip { flex: 0 0 auto; max-width: 100%; min-height: 28px; overflow: visible; text-overflow: clip; white-space: nowrap; }
.dash-bos {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 72px; padding: 14px 16px; text-align: center;
}
/* Kart içinde ortak boş durum da kompakt: büyük ikon boş kartı dolu kart boyuna çıkarıyordu. */
.dash-b .peron-empty-state { padding: 14px 16px; }
.dash-b .peron-empty-state .peron-empty-state-icon { display: none; }
.dash-bos b { font: 600 12px/1.3 var(--font); color: var(--text-secondary); }
.dash-bos span { font: 500 11px/1.4 var(--font); color: var(--text-muted); }

/* ═══ DASHBOARD — İNSAN KAYNAKLARI KUTULARI (1.406.0) ══════════════════════════
   Üç kutu üç ayrı yapıdır: "Bugün Fabrikada" asimetrik özet (tek baskın rakam + durum şeridi + iki ad listesi),
   "Onay Bekleyen" eylem listesi (satır tıklanır), "Yaklaşanlar" gün gün ajanda. Renk durum tokenlarından:
   içeride yeşil · çıktı nötr · izinli mor · gelmedi gül · geç kalan amber. Kutuların yerleşimi kendi kabına
   (`@container dikyok` / `dikkap`) bağlı — kart yarım sütuna inince iki sütun tek sütuna döner. */
.dik-serit, .dik-tanim, .dik-liste, .dik-gun, .mob-ik-say { --dik-c: var(--text-muted); --dik-ink: var(--text-secondary); }
.is-ic   { --dik-c: var(--green);  --dik-ink: var(--green-ink); }
.is-cik  { --dik-c: var(--st-wait-fg); --dik-ink: var(--text-secondary); }
.is-izin { --dik-c: var(--violet); --dik-ink: var(--violet-ink); }
.is-yok  { --dik-c: var(--rose);   --dik-ink: var(--rose-ink); }
.is-gec  { --dik-c: var(--amber);  --dik-ink: var(--amber-ink); }
.dik-serit { display: flex; gap: 2px; height: 8px; margin: 8px 0 0; border-radius: 99px; overflow: hidden; background: var(--content-bg); }
.dik-serit > i { display: block; min-width: 0; height: 100%; background: var(--dik-c); }

#dash-ik-yoklama .peron-card-body { container: dikyok / inline-size; }
.dik-yoklama { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 24px; align-items: start; }
.dik-ana { min-width: 0; }
.dik-buyuk { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.dik-buyuk b { font: 800 22px/1.1 var(--font); color: var(--text-primary); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dik-buyuk span { font: 600 11px/1.3 var(--font); color: var(--text-muted); }
.dik-tanim { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 4px; margin: 12px 0 0; }
.dik-tanim > div { min-width: 0; }
.dik-tanim dt { display: flex; align-items: center; gap: 4px; font: 600 10px/1.3 var(--font); color: var(--text-muted); white-space: nowrap; }
.dik-tanim dt::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--dik-c); }
.dik-tanim dd { margin: 2px 0 0; font: 700 13px/1.2 var(--font); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dik-not { margin: 12px 0 0; font: 500 11px/1.45 var(--font); color: var(--text-muted); }
.dik-listeler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.dik-liste { min-width: 0; }
.dik-liste-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; padding: 0 0 4px;
    border-bottom: 2px solid var(--dik-c); font: 700 11px/1.3 var(--font); color: var(--text-secondary); }
.dik-liste-b b { font: 700 12px/1.2 var(--font); color: var(--dik-ink); font-variant-numeric: tabular-nums; }
.dik-liste ul { list-style: none; margin: 0; padding: 0; }
.dik-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0;
    border-bottom: 1px solid var(--border-light); font: 500 12px/1.35 var(--font); }
.dik-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.dik-sag { flex: none; font: 600 11px/1.3 var(--font); color: var(--dik-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dik-bos { margin: 4px 0 0; font: 500 11px/1.4 var(--font); color: var(--text-muted); }
.dik-daha { margin: 4px 0 0; font: 600 10.5px/1.3 var(--font); color: var(--text-muted); }
.dik-daha--alt { margin: 0; padding: 8px 16px; border-top: 1px solid var(--border-light); }
@container dikyok (max-width: 600px) {
    .dik-yoklama { grid-template-columns: minmax(0, 1fr); }
}
@container dikyok (max-width: 380px) {
    .dik-tanim { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dik-listeler { grid-template-columns: minmax(0, 1fr); }
}

.dik-sayac { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px;
    box-sizing: border-box; border-radius: 99px; border: 1px solid var(--st-pack-bd); background: var(--st-pack-bg);
    color: var(--st-pack-fg); font: 700 10.5px/1 var(--font); font-variant-numeric: tabular-nums; vertical-align: 1px; }
.dik-onay { list-style: none; margin: 0; padding: 0; }
.dik-onay > li + li { border-top: 1px solid var(--border-light); }
.dik-onay-s { box-sizing: border-box; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    width: 100%; min-height: 44px; padding: 8px 16px; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
button.dik-onay-s { cursor: pointer; }
button.dik-onay-s:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.dik-tur { padding: 4px 6px; border-radius: 6px; border: 1px solid var(--st-wait-bd); background: var(--st-wait-bg); color: var(--st-wait-fg);
    font: 700 10px/1 var(--font); white-space: nowrap; text-align: center; }
.dik-tur.is-izin   { border-color: var(--st-uph-bd);  background: var(--st-uph-bg);  color: var(--st-uph-fg); }
.dik-tur.is-avans  { border-color: var(--st-pack-bd); background: var(--st-pack-bg); color: var(--st-pack-fg); }
.dik-tur.is-masraf { border-color: var(--st-cut-bd);  background: var(--st-cut-bg);  color: var(--st-cut-fg); }
.dik-onay-ic { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dik-onay-ic b, .dik-onay-ic em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dik-onay-ic b { font: 600 12px/1.3 var(--font); color: var(--text-primary); }
.dik-onay-ic em { font: 500 11px/1.35 var(--font); font-style: normal; color: var(--text-muted); }
.dik-onay-ic .dik-tutar { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dik-zaman { font: 500 10.5px/1.3 var(--font); color: var(--text-muted); white-space: nowrap; }

#dash-ik-takvim .peron-card-body { container: dikkap / inline-size; }
.dik-ajanda { --dik-kol: 1; list-style: none; margin: 0; padding: 0; display: grid;
    grid-template-columns: repeat(var(--dik-kol), minmax(0, 1fr)); gap: 0 24px; }
.dik-gun { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 8px 0;
    border-top: 1px solid var(--border-light); }
.dik-tarih b { display: block; font: 700 12px/1.25 var(--font); color: var(--text-primary); white-space: nowrap; }
.dik-tarih span { display: block; font: 500 10px/1.3 var(--font); color: var(--text-muted); }
.dik-gun.is-bugun .dik-tarih b { color: var(--pri-text); }
.dik-gun ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dik-gun li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dik-gun li > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dik-c); }
.dik-gun li.is-dogum  { --dik-c: var(--amber); }
.dik-gun li.is-yil    { --dik-c: var(--green); }
.dik-gun li.is-tatil  { --dik-c: var(--pri); }
.dik-gun li.is-belge  { --dik-c: var(--rose); }
.dik-olay { display: flex; flex-direction: column; min-width: 0; }
.dik-olay b, .dik-olay em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dik-olay b { font: 600 12px/1.3 var(--font); color: var(--text-primary); }
.dik-olay em { font: 500 10.5px/1.3 var(--font); font-style: normal; color: var(--text-muted); }
@container dikkap (min-width: 560px) { .dik-ajanda { --dik-kol: 2; } }
@container dikkap (min-width: 900px) { .dik-ajanda { --dik-kol: 3; } }
@media (hover: hover) and (pointer: fine) {
    button.dik-onay-s:hover { background: var(--pri-light); }
}

/* Telefon (ana sayfanın telefon dalı): yoklama özeti — şerit + sayılar + gelmeyen adlar. */
.peron-mob-home .mob-ik .dik-serit { margin: 4px 0 8px; }
.peron-mob-home .mob-ik-say { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font: 500 11px/1.4 var(--font); color: var(--text-muted); }
.peron-mob-home .mob-ik-say span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.peron-mob-home .mob-ik-say span::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--dik-c); }
.peron-mob-home .mob-ik-say b { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.peron-mob-home .mob-ik-ad { margin: 8px 0 0; font: 500 11px/1.4 var(--font); color: var(--rose-ink); overflow-wrap: anywhere; }

/* Nabız: yan kart ana kartla AYNI boyda; rakam tablosu + yıl haritası alt şeritte. */
.dash-nabiz--yeni { align-items: stretch; }
.dash-nabiz--yeni > #dash-nabiz-yan { display: flex; min-width: 0; }
.dash-nabiz--yeni > #dash-nabiz-yan > .pg-kart { box-sizing: border-box; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#dash-nabiz > .dash-nabiz-ek {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 16px 24px; align-items: start;
}
#dash-nabiz > .dash-nabiz-ek.is-tek,
#dash-nabiz > .dash-nabiz-ek:has(> .dash-nabiz-tablo[hidden]) { grid-template-columns: minmax(0, 1fr); }
#dash-nabiz > .dash-nabiz-ek.is-tek:has(> .dash-nabiz-tablo[hidden]) { display: none; }
.dash-nabiz-ek .dash-nabiz-tablo { margin-top: 0; padding-top: 0; border-top: 0; }
/* Yarım sütundaki rakam tablosu: "Gün ort." 57px ister, %30 seri kolonu + 6px dolgu 51px
   bırakıyordu (ölçüldü, 1440px). Seri kolonu daralır, dolgu 4px olur → 60px. */
#dash-nabiz > .dash-nabiz-ek .pgt col.pgt-c1 { width: 24%; }
#dash-nabiz > .dash-nabiz-ek .pgt th,
#dash-nabiz > .dash-nabiz-ek .pgt td { padding-left: 4px; padding-right: 4px; }
.dash-nabiz-isi { min-width: 0; }
.dash-nabiz-isi .pg-isi { margin-top: 8px; }
.pg-kart__buyuk.dash-nabiz-donem { font: 600 11px/1.4 var(--font); color: var(--text-muted); text-align: right; white-space: nowrap; }

/* Seri sekmeleri: seçici + efsane + ayın rakamı tek öğede. */
#dash-nabiz .dash-nabiz-olcu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
#dash-nabiz .dash-nabiz-olcu .dash-nabiz-b {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 76px);
    grid-template-areas: "ad kv" "dg kv" "md fk"; align-items: center; column-gap: 10px; row-gap: 2px;
    height: auto; min-height: 0; padding: 9px 12px; text-align: left; white-space: normal; overflow: visible;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary);
}
#dash-nabiz .dash-nabiz-olcu .dash-nabiz-b.is-on {
    border-color: var(--pg-c); box-shadow: inset 0 0 0 1px var(--pg-c);
    background: color-mix(in srgb, var(--pg-c) 6%, var(--card-bg)); color: var(--text-primary);
}
.dnb-ad { grid-area: ad; display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 11.5px/1.3 var(--font); }
.dnb-ad > i { flex: none; width: 12px; height: 3px; border-radius: 2px; background: var(--pg-c); }
.dnb-dg { grid-area: dg; min-width: 0; font: 800 19px/1.15 var(--font); color: var(--text-primary); overflow-wrap: anywhere; }
.dnb-dg em { margin-left: 4px; font: 500 10.5px/1 var(--font); font-style: normal; color: var(--text-muted); }
.dnb-md { grid-area: md; font: 500 10.5px/1.3 var(--font); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dnb-kv { grid-area: kv; align-self: stretch; display: flex; align-items: center; min-width: 0; }
.dnb-kv .pg-kivilcim { height: 30px; }
.dnb-fk { grid-area: fk; justify-self: end; font: 700 10.5px/1.3 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dnb-fk.is-up { color: var(--green-ink); }
.dnb-fk.is-down { color: var(--rose-ink); }
.dnb-fk.is-flat { color: var(--text-muted); }

/* Üretim aşamaları: halkanın efsanesi yerine TIKLANABİLİR aşama satırları. */
.dash-kok .dash-asama-kart .pg-halka > .pg-efsane { display: none; }
.dash-asama {
    list-style: none; margin: 10px 0 0; padding: 0; flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: space-evenly; gap: 6px;
}
/* Değer kolonu SABİT: `auto` iken "1" ile "0,75" farklı genişlik veriyor, çubukların
   başlangıcı satırdan satıra 10px kayıyordu (ölçüldü). */
.dash-asama-b {
    box-sizing: border-box; width: 100%; min-height: 28px; padding: 2px 8px;
    display: grid; grid-template-columns: 10px minmax(0, 1fr) minmax(36px, 1fr) 40px 34px;
    grid-template-areas: "nk ad ray dg yz" "nk md ray dg yz"; align-items: center; column-gap: 8px;
    text-align: left; font: inherit; color: inherit; cursor: pointer;
    background: none; border: 1px solid transparent; border-radius: 8px;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.dash-asama-b > i { grid-area: nk; width: 10px; height: 10px; border-radius: 3px; background: var(--pg-c); }
.da-ad { grid-area: ad; font: 600 12px/1.25 var(--font); color: var(--text-primary); overflow-wrap: anywhere; }
.da-md { grid-area: md; font: 500 9.5px/1.2 var(--font); font-style: normal; color: var(--text-muted); }
.da-ray { grid-area: ray; height: 6px; border-radius: 99px; background: var(--content-bg); overflow: hidden; }
.da-ray > b { display: block; height: 100%; border-radius: 99px; background: var(--pg-c); }
.da-dg { grid-area: dg; font: 700 12px/1.2 var(--font); color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; }
.da-yz { grid-area: yz; font: 500 10.5px/1.2 var(--font); font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.dash-asama-b.is-active { background: var(--pri-light); border-color: var(--pri-text); }
.dash-asama-b.is-duz { cursor: default; }
.dash-asama-b:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }

/* Kart içi tablolar — nabız tablosuyla (`.pgt`) aynı hafif başlık dili. */
.dash-t { width: 100%; table-layout: fixed; border-collapse: collapse; }
/* 🔴 YAPIŞKANLIK `thead`DE, `th`DE DEĞİL: ortak kolon ayarı yapışkan `th`yi içerik kolonu
      saymaz (`kolonIcerikMi`); hepsi yapışkan olunca artan yeri alacak esnek kolon
      bulunamaz ve genişliği kaydedilmiş tablo kabını doldurmaz. */
.dash-t thead { position: sticky; top: 0; z-index: 1; }
.dash-t thead th {
    padding: var(--tbl-head-py, 6px) 8px;
    background: var(--content-bg); border-bottom: 1px solid var(--border);
    font: 700 var(--tbl-head-fs, 10.5px)/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-t tbody td {
    padding: 7px 8px; border-bottom: 1px solid var(--border-light);
    font: 400 var(--tbl-fs, 12px)/1.35 var(--font); color: var(--text-primary);
    text-align: left; vertical-align: middle; overflow-wrap: anywhere;
}
.dash-t tbody tr:last-child > td { border-bottom: 0; }
.dash-t tbody td.col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-t b { font-weight: 600; }
.dash-t em { display: block; font: 500 10.5px/1.3 var(--font); font-style: normal; color: var(--text-muted); }
.dash-t-soluk { color: var(--text-muted); }
.dash-t-tarih { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-t-tarih.is-gec { color: var(--rose-ink); font-weight: 600; }
.dash-t-tarih.is-yakin { color: var(--amber-ink); font-weight: 600; }
col.dpt-mus { width: 24%; }
col.dpt-asama { width: 17%; }
col.dpt-prog { width: 112px; }
col.dpt-termin { width: 88px; }
col.dpt-modul { width: 66px; }
/* Malzeme adı en geniş kolondur: iki sayı kolonu ölçülen ihtiyaca sabit, artan ada gider. */
col.dks-olcu { width: 112px; }
col.dks-sip { width: 92px; }
col.dsp-termin { width: 86px; }
col.dsp-durum { width: 138px; }
.dash-pt-mus { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.dash-pt-mus > span { min-width: 0; padding-top: 5px; }
.dash-t .dash-prod-toggle {
    flex: none; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 6px; color: var(--text-muted); cursor: pointer;
    transition: background-color 120ms ease-out;
}
.dash-t .dash-prod-toggle svg { width: 14px; height: 14px; }
.dash-t .dash-prod-toggle:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
/* Oku DÖNDÜREN kural eski `.dash-prod-team.is-open .dash-prod-toggle svg`dir; düğme de
   dönseydi toplam 180° olur, açık satırın oku sola bakardı (ölçüldü). */
.dash-t .dash-prod-team.is-open .dash-prod-toggle { color: var(--pri-text); }
.dash-t .dash-prod-spacer { flex: none; width: 28px; height: 28px; }
.dash-pt-cipler { display: flex; flex-wrap: wrap; gap: 3px 4px; }
.dash-pt-cip {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 5px; border-radius: 99px;
    font: 600 10.5px/1.5 var(--font); color: var(--text-secondary); white-space: nowrap;
    background: color-mix(in srgb, var(--pg-c) 12%, var(--card-bg));
}
.dash-pt-cip > i { width: 6px; height: 6px; border-radius: 50%; background: var(--pg-c); }
.dash-pt-cip > b { font-weight: 700; color: var(--text-muted); }
.dash-pt-prog { display: flex; align-items: center; gap: 6px; }
.dash-pt-prog .peron-prog { flex: 1 1 auto; min-width: 0; }
.dash-pt-prog > b { flex: none; min-width: 32px; text-align: right; font: 700 11px/1 var(--font); font-variant-numeric: tabular-nums; }
.dash-pt-termin b { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-prod-team.is-gec .dash-pt-termin b, .dash-prod-team.is-gec .dash-pt-termin em { color: var(--rose-ink); }
.dash-prod-team.is-yakin .dash-pt-termin b, .dash-prod-team.is-yakin .dash-pt-termin em { color: var(--amber-ink); }
/* 🔴 Modül satırı bir <tr>dir: eski `.dash-prod-mods { display:flex; padding }` kuralı onu
      tablo düzeninden çıkarıp ilk kolona sıkıştırıyordu (ölçüldü: 181px / 753px). */
.dash-t tbody tr.dash-prod-mods:not([hidden]) { display: table-row; padding: 0; background: none; }
.dash-t tbody .dash-prod-mods > td { padding: 6px 12px 10px 40px; background: var(--content-bg); }
.dash-t tbody .dash-prod-mods .dash-prod-mod + .dash-prod-mod { margin-top: 6px; }
.dash-mini { display: block; height: 5px; margin-bottom: 3px; border-radius: 99px; background: var(--content-bg); overflow: hidden; }
.dash-mini > i { display: block; height: 100%; border-radius: 99px; background: var(--rose); }
.dash-mini-yz { font: 500 10.5px/1.3 var(--font); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dash-mini-yz b { font-weight: 700; color: var(--rose-ink); }

/* Cari bakiye: borç solda, alacak sağda, ortada nötr eksen (karşılıklı çubuk). */
.dash-bk { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.dash-bk-net { display: flex; flex-direction: column; gap: 2px; }
.dash-bk-net span, .dash-bk-uc span, .dash-bk-alt { font: 500 10.5px/1.3 var(--font); color: var(--text-muted); }
.dash-bk-net b { font: 800 22px/1.1 var(--font); color: var(--green-ink); }
.dash-bk-net b.is-eksi { color: var(--rose-ink); }
.dash-bk-ray { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); align-items: center; }
.dash-bk-ray > span { display: flex; height: 10px; }
.dash-bk-ray > span:first-child { justify-content: flex-end; }
.dash-bk-ray > u { width: 1px; height: 16px; background: var(--text-muted); text-decoration: none; }
.dash-bk-ray i { display: block; height: 100%; }
.dash-bk-ray .is-borc { border-radius: 4px 0 0 4px; background: var(--rose); }
.dash-bk-ray .is-alacak { border-radius: 0 4px 4px 0; background: var(--green); }
.dash-bk-uc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dash-bk-uc > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-bk-uc > div:last-child { align-items: flex-end; text-align: right; }
.dash-bk-uc b { font: 700 13px/1.25 var(--font); color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dash-ie-ust { padding: 12px 16px 6px; }
.dash-ie-s {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 8px 16px; border-top: 1px solid var(--border-light);
}
.dash-ie-s > div:first-child { min-width: 0; }
.dash-ie-s b { display: block; font: 600 12px/1.3 var(--font); color: var(--text-primary); overflow-wrap: anywhere; }
.dash-ie-s em { display: block; font: 500 10.5px/1.3 var(--font); font-style: normal; color: var(--text-muted); }
.dash-ie-yan { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; white-space: nowrap; }
.dash-ie-yan span { font: 600 10.5px/1.3 var(--font); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dash-ie-dugme { display: flex; gap: 6px; margin-top: 6px; }
.dash-ie-bos { padding: 10px 16px 14px; font: 500 11.5px/1.4 var(--font); color: var(--text-muted); }

/* Rakam tablosu yarım sütuna inince başlıklar KISA etikete geçer (uzunu kırpılıyordu:
   ölçüldü 1280 ve 1024). Tam metin başlığın `title`ında durur. */
@container dashkap (min-width: 901px) and (max-width: 1100px) {
    #dash-nabiz > .dash-nabiz-ek .pgt th .pgt-u { display: none; }
    #dash-nabiz > .dash-nabiz-ek .pgt th .pgt-k { display: inline; }
}
@container dashkap (max-width: 1040px) {
    #dash-nabiz .dash-nabiz-olcu .dash-nabiz-b { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad fk" "dg dg" "md md"; }
    .dnb-kv { display: none; }
}
@container dashkap (max-width: 1000px) {
    .dash-bolum:not([data-bolum="operasyon"]) > .dash-b { grid-column: span 6; }
    .dash-bolum:not([data-bolum="operasyon"]) > .dash-b:last-child:nth-child(odd) { grid-column: span 12; }
}
@container dashkap (max-width: 900px) {
    .dash-bolum[data-bolum="operasyon"] > .dash-b { grid-column: span 12; }
    .dash-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-kpi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    #dash-nabiz > .dash-nabiz-ek { grid-template-columns: minmax(0, 1fr); }
}
@container dashkap (max-width: 620px) {
    .dash-bolum:not([data-bolum="operasyon"]) > .dash-b { grid-column: span 12; }
}
@media (hover: hover) and (pointer: fine) {
    .dash-kpi-k:not(.is-duz):hover { border-color: var(--pri-text); box-shadow: var(--shadow-card-hover); }
    .dash-kpi-k:not(.is-duz):active { transform: scale(.985); }
    .dash-asama-b:not(.is-duz):hover { background: var(--content-bg); }
    .dash-asama-b.is-active:hover { background: var(--pri-light); }
    .dash-t .dash-prod-toggle:hover { background: var(--pri-light); color: var(--pri-text); }
    .dash-t tbody tr.dash-prod-team:hover > td { background: var(--pri-light); }
    .pg-isi-h[data-ip]:hover { z-index: 2; opacity: 1; box-shadow: 0 0 0 2px var(--text-primary); }
    .pg-isi-h[data-ip]:hover::after {
        content: attr(data-ip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
        z-index: 4; pointer-events: none; padding: 4px 7px; border-radius: 6px; white-space: nowrap;
        background: var(--text-primary); color: var(--card-bg); box-shadow: var(--shadow-card);
        font: 600 10.5px/1.3 var(--font);
    }
    .pg-isi-h.is-bas[data-ip]:hover::after { left: 0; transform: none; }
    .pg-isi-h.is-son[data-ip]:hover::after { left: auto; right: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-kpi-k, .dash-asama-b, .dash-t .dash-prod-toggle, .dash-t .dash-prod-toggle svg, .pg--coklu .pg-nk { transition: none; }
}

.pg-kivilcim { display: block; width: 100%; height: 26px; overflow: visible; }
.pg-kivilcim path { stroke: var(--pg-c); stroke-width: 2; vector-effect: non-scaling-stroke;
                    stroke-linecap: round; stroke-linejoin: round; }

/* ── Boş durum ───────────────────────────────────────────────────────────── */
.pg-bos { display: flex; align-items: center; justify-content: center; min-height: 96px;
          padding: 18px 14px; text-align: center; border: 1px dashed var(--border);
          border-radius: 12px; background: var(--content-bg);
          font: 500 12px/1.5 var(--font); color: var(--text-muted); }

/* Halka: 420px üstünde çizim ve efsane yan yana (dikeyde 2 kat yer kaplıyordu) */
@media (min-width: 420px) {
    .pg-halka { flex-direction: row; align-items: center; gap: 20px; }
    .pg-halka-cizim { width: 150px; }
}

/* 🔴 EFSANE KIRPILMASI ONARILDI (tasarım denetimi, 2026-09-03).
   ÖLÇÜLDÜ (Hammadde Tüketimi, 1024px, `.pg-efsane li span` scrollW vs clientW):
     "ASHLEY 20"                    → gerekli 68px · kutu 61px  ·  7px kırpma
     "ASHLEY 10"                    → gerekli 66px · kutu 47px  · 19px kırpma
     "BELVİA KANEPE ALT KASA BEYAZ" → gerekli 202px · kutu 60px · 142px kırpma
   Ürün adı üç harfe inince grafik "hangi ürün" sorusunu cevaplayamaz; hover ipucu
   telefonu/dokunmatiği olan kullanıcı için yok hükmündedir.
   Çözüm: 1200px altında halka DİKEY dizilir — efsane tam genişliği alır. 1200px
   üstünde yan yana kalır (orada ölçüm kırpma göstermiyor). */
@media (min-width: 420px) and (max-width: 1199.98px) {
    .pg-halka { flex-direction: column; align-items: center; gap: 12px; }
    .pg-halka-cizim { width: min(150px, 60%); }
    .pg-halka .pg-efsane { width: 100%; }
}

/* ── Grafik kartı iskeleti (Dashboard + Raporlar ORTAK) ──────────────────── */
.pg-kart { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px;
           padding: 16px 16px 14px; box-sizing: border-box; min-width: 0; }
.pg-kart__bas { display: flex; align-items: flex-start; justify-content: space-between;
                gap: 12px; margin-bottom: 14px; }
.pg-kart__ad { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pg-kart__ad h4 { margin: 0; font: 700 13px/1.25 var(--font); color: var(--text-primary);
                  letter-spacing: -.005em; }
.pg-kart__ad span { font: 400 11.5px/1.45 var(--font); color: var(--text-muted); }
.pg-kart__buyuk { font: 800 22px/1 var(--font); color: var(--text-primary); flex: none;
                  font-variant-numeric: tabular-nums; text-align: right; }
.pg-kart__buyuk em { display: block; font: 500 10.5px/1.3 var(--font); font-style: normal;
                     color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
                     margin-top: 3px; }

/* Izgara: telefonda tek kolon; geniş ekranda ASİMETRİK (geniş grafik + dar dağılım).
   🔴 Eşit üç kart dizmiyoruz — bilgi ağırlıkları eşit değil, düzen de olmamalı. */
.pg-izgara2 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 900px) {
    .pg-izgara2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

/* ── Dashboard "30 Günlük Nabız" bölümü ──────────────────────────────────────
   🔴 Mobile-first: çipler dar ekranda TAM GENİŞLİK üçe bölünür (dokunma hedefi
      ≥44px); geniş ekranda içerik kadar yer kaplar. Ölçüldü 320px: çip 44×44.
   🔴 Bölüm masaüstünde asimetriktir (`.pg-izgara2` 1.7fr + 1fr) — eşit üç kart
      dizmek bu ekranı "AI şablonu" hissine sokuyordu.                           */
.dash-nabiz { margin: 0 0 16px; }
.dash-nabiz-cip { display: flex; gap: 6px; margin: 0 0 14px; }
.dash-nabiz-b {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
    color: var(--text-secondary); font: 600 12px/1.2 var(--font); cursor: pointer;
    box-sizing: border-box; transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.dash-nabiz-b:hover { color: var(--text-primary); border-color: var(--pg-c); }
.dash-nabiz-b.is-on {
    color: var(--pg-c); border-color: var(--pg-c);
    background: color-mix(in srgb, var(--pg-c) 10%, transparent);
    font-weight: 700;
}
/* ── ÜRETİM NABZI — AY ŞERİDİ (1.346.0) ──────────────────────────────────────
   Kullanıcı: *"tüm aylar yan yana yazsın tam 'Fabrikanın günlük hareketi' kısmının
   altına sıralı olarak güzel butonlar olarak"* + *"pastel tonlarında renklendir"*.

   🔴 TABAN `.dash-nabiz-b` YENİDEN KULLANILIR. O taban beş kabukta ayrı ayrı ölçülmüş
      yamalar taşıyor; yeni bir sınıf adı o beş ölçümü sıfırdan yaptırırdı. Burada
      yalnız ay şeridine ÖZGÜ olan davranış tanımlanır.
   🔴 `flex: 1 1 0` DEĞİL: seri çipleri üç tanedir ve eşit bölünür; ay şeridinde 13
      düğme var ve eşit bölünseler 1440px'te 92px, 360px'te 24px olurdu (24px, kullanıcı
      kuralındaki 24×24 mutlak tabanın SINIRI). Şerit bunun yerine SARAR ve düğme
      içeriği kadar yer kaplar.
   🔴 PASTEL YÜZEY TOKENDEN GELİR (`--st-cut-bg` ailesi, iki temada ölçülmüş) — sabit
      hex YAZILMAZ, yoksa gece modu kırılır. Seçili ay serinin KENDİ rengini alır, yani
      şerit ile grafik aynı şeyi söyler.
   🔴 12 AYRI RENK YOK: 12 ay ORDİNAL bir eksendir, kategorik değil. Projenin kategorik
      paleti 6 renkle sınırlı ve CSS'in kendi notu (bkz. `--pg-k1..k6`) 7. rengin
      üretilmesini yasaklıyor. Ayrım renkle değil, DEĞERLE ve seçim vurgusuyla kurulur. */
/* 🔴 ŞERİT BAŞLIĞIN İÇİNDE (2026-09-14 kullanıcı kararı: alt başlık kaldırıldı, ay
   düğmeleri onun yerine geçti). `.pg-kart__ad` bir dikey yığın; şerit onun ikinci
   satırıdır. `min-width: 0` ŞART — grid/flex çocuğu varsayılan `auto` minimum genişlik
   taşır ve sarmak yerine kabı GENİŞLETİR (kart yatay taşar). */
.dash-nabiz-bas .pg-kart__ad { min-width: 0; flex: 1 1 auto; }
/* 🔴 BOŞLUK 6px — ÖLÇÜMLE DÜZELTİLDİ (tasarım denetimi, 2026-09-14): 4px'te komşu ay
   düğmeleri arası mesafe kullanıcı kuralının (komşu dokunma hedefleri arası ≥6px)
   ALTINDAYDI ve 12'li yoğun şeritte yanlış aya dokunma riski ölçüldü. Değişen yalnız
   ARALIK — düğme kutusu BÜYÜTÜLMEDİ (kullanıcı kuralı: "büyütme bişeyi"). */
.dash-nabiz-cip--ay { flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.dash-nabiz-b.dash-nabiz-ay {
    /* Tam ay adları (Ocak … Aralık) 12 düğmede yan yana durur; eşit bölünmez
       (`flex:1 1 0` olsaydı "Ocak" ile "Ağustos" aynı genişliğe zorlanır, dar ekranda
       ikisi de kırpılırdı). İçerik kadar yer kaplar, sığmayınca SARAR. */
    flex: 0 1 auto;
    min-height: 30px;                    /* yoğun yüzey denetimi eşiği (≥28px) */
    padding: 3px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    background: var(--st-cut-bg);
    border-color: var(--st-cut-bd);
    color: var(--st-cut-fg);
    font-weight: 600;
    line-height: 1.12;
}
.dash-nabiz-b.dash-nabiz-ay .dna-ad { font-size: 10.5px; letter-spacing: .01em; }
.dash-nabiz-b.dash-nabiz-ay .dna-dg {
    font-size: 10.5px; font-weight: 700; opacity: .85;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 🔴 ÜÇÜNCÜ SATIR = MODÜL, takımın ALTINDA (kullanıcı kuralı). Takımdan görsel olarak
   AYRIŞMALI, yoksa iki sayı tek bir sayı gibi okunur: bir tık küçük ve daha soluk.
   9,5px mutlak tabanın (9px) üstünde — bu bir yardımcı sayıdır, gövde metni değil. */
.dash-nabiz-b.dash-nabiz-ay .dna-md {
    font-size: 9.5px; font-weight: 600; opacity: .62;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    line-height: 1.1;
}
/* Boş kalan modül satırı (gelecek ay) kutuyu yine de bir satır yükseltmesin. */
.dash-nabiz-b.dash-nabiz-ay .dna-md:empty { display: none; }
/* Gelecek ay tıklanamaz — imleç de bunu söylesin. */
.dash-nabiz-b.dash-nabiz-ay[disabled] { cursor: default; }
.dash-nabiz-b.dash-nabiz-ay:hover {
    border-color: var(--pg-c);
    color: var(--st-cut-fg);
}
/* Seçili ay: serinin rengi — grafikle aynı dil. */
.dash-nabiz-b.dash-nabiz-ay.is-on {
    background: color-mix(in srgb, var(--pg-c) 14%, transparent);
    border-color: var(--pg-c);
    color: var(--pg-c);
    font-weight: 700;
}
/* Henüz gelmemiş ay: nötr ve soluk — "üretim yok" ile karışmasın. */
.dash-nabiz-b.dash-nabiz-ay.is-bos {
    background: var(--st-wait-bg);
    border-color: var(--st-wait-bd);
    color: var(--text-muted);
}
/* "Son 30 gün" düğmesi bir AY değildir: nötr yüzeyde durur ve şeritte ayrışır. */
.dash-nabiz-b.dash-nabiz-ay--gun {
    background: var(--card-bg);
    border-color: var(--border);
    color: var(--text-secondary);
}
.dash-nabiz-b.dash-nabiz-ay--gun .dna-ad { font-size: 11px; font-weight: 700; }

.dash-nabiz-fark {
    display: block; margin-top: 6px; font: 700 11px/1.2 var(--font);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dash-nabiz-fark i { font-style: normal; font-weight: 500; color: var(--text-muted); }
.dash-nabiz-fark.is-up   { color: var(--green-ink); }
.dash-nabiz-fark.is-down { color: var(--rose-ink); }
.dash-nabiz-fark.is-flat { color: var(--text-muted); }
/* Telefonda büyük rakam başlığı sıkıştırmasın: 400px altında alt satıra iner */
@media (max-width: 400px) {
    .dash-nabiz .pg-kart__bas { flex-direction: column; align-items: flex-start; gap: 8px; }
    .dash-nabiz .pg-kart__buyuk { text-align: left; }
}
/* Çip metni 3 dilde de sığar; yine de taşarsa üç nokta — çubuk asla kaymaz */
.dash-nabiz-b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 🔴 44px TABANI DOKUNMA İÇİNDİR, masaüstü faresi için değil (2026-09-13).
   ÖLÇÜLDÜ 1440px: üç seri çipi 44px yüksekliğinde bir şerit kaplıyordu; bu
   yoğun yüzey denetimi ve eşiği 28px. Üç modül (#hm-shell 30px · #rp-kok 28px ·
   #sv-shell) bunu zaten kendi kabuğunda yamamıştı — taban yanlış olduğu için
   herkes ayrı yama yazmış. Yama noktası TABANA alındı; modül yamaları kendi
   ölçülerini korumak için yerinde kalır (daha özgül, kazanmaya devam eder). */
/* 🔴 EŞİK 769 DEĞİL 641 (2026-09-13, ölçümle düzeltildi). JS mobil dalı
   `MOBIL_ESIK = 640` (peron-app.js:688) — yani 641px'ten itibaren MASAÜSTÜ
   şablonu çiziliyor. Eşiği 769'da bırakmak 641-768px aralığında (küçük
   dizüstü, bölünmüş ekran) masaüstü düzenini gösterip çipi 44px'te bırakıyordu:
   ÖLÇÜLDÜ 768px'te çip 233×44, 1024px'te aynı çip 172×30. Aynı düzende iki
   farklı ölçü kusurdur. `pointer: fine` koşulu KALIYOR — dokunmatik tablet
   hâlâ 44px alır. */
@media (min-width: 641px) and (pointer: fine) {
    .dash-nabiz-b { min-height: 30px; padding: 5px 10px; }
}

/* ── 30 GÜNÜN RAKAM TABLOSU — 1.290.0 ────────────────────────────────────────
   Kullanıcı: "Son 30 gün tablosunu daha gelişmiş yap, RAKAMLAR YAZSIN, daha
   profesyonel bir tablo yap."
   🔴 Grafiğin ALTINDA ve grafiği TAMAMLAR: grafik seçili TEK seriyi şekil olarak,
      tablo ÜÇ seriyi birden sayıyla anlatır. Aynı sayıyı iki kez okutmaz.
   🔴 Kolon genişlikleri `col` sınıflarında (satır-içi stil medya sorgusunu ezer).
      320px hedefi: 78+40+40+38+38+44 = 278px ≤ 284px kap → yatay kaydırma YOK.
   🔴 `.pgt-kap` yine de kaydırılabilir: beklenmedik uzun bir yerelleştirme ya da
      kullanıcı yazı tipi büyütmesi taşırsa TABLO kendi kabında kayar, sayfa asla. */
.dash-nabiz-tablo { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.pgt-bas {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    font: 700 11px/1.3 var(--font); letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 9px;
}
.pgt-bas span { font: 500 10.5px/1.3 var(--font); letter-spacing: 0; text-transform: none; }
.pgt-kap { overflow-x: auto; }
.pgt { width: 100%; table-layout: fixed; border-collapse: collapse; }
.pgt col.pgt-c1 { width: auto;  }
.pgt col.pgt-c2 { width: 40px;  }
.pgt col.pgt-c3 { width: 40px;  }
.pgt col.pgt-c4 { width: 38px;  }
.pgt col.pgt-c5 { width: 38px;  }
.pgt col.pgt-c6 { width: 46px;  }
.pgt th, .pgt td { padding: 5px 3px; border-bottom: 1px solid var(--border-light); }
.pgt thead th {
    font: 700 9.5px/1.25 var(--font); letter-spacing: .02em; color: var(--text-muted);
    text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pgt .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pgt tbody th {
    display: flex; align-items: baseline; gap: 5px; min-width: 0;
    font: 700 11px/1.3 var(--font); color: var(--text-primary); text-align: left;
}
.pgt tbody th span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgt tbody th em {
    flex-shrink: 0; font: 500 9.5px/1.3 var(--font); font-style: normal; color: var(--text-muted);
}
.pgt-nokta {
    flex-shrink: 0; width: 7px; height: 7px; border-radius: 2px;
    background: var(--pg-c, var(--pri)); align-self: center;
}
.pgt tbody td { font: 600 11px/1.3 var(--font); color: var(--text-secondary); }
.pgt tbody td b { font-weight: 800; color: var(--text-primary); }
.pgt tbody tr.is-on { background: var(--border-light); }
.pgt tbody tr:last-child th, .pgt tbody tr:last-child td { border-bottom: 0; }
.pgt-yon { font-weight: 800; white-space: nowrap; }
.pgt-yon.is-up   { color: var(--green-ink); }
.pgt-yon.is-down { color: var(--rose-ink); }
.pgt-yon.is-flat { color: var(--text-muted); }
.pgt-not { margin: 8px 0 0; font: 500 10px/1.4 var(--font); color: var(--text-muted); }
.pgt-not b { font-weight: 800; color: var(--text-secondary); }

/* ── İKİ BİRİMLİ HÜCRE — 1.291.0 ─────────────────────────────────────────────
   Kullanıcı kuralı: "önce TAKIM, altında MODÜL, hatta tüm verilerde aynısını".
   🔴 İki sayı YAN YANA değil ALT ALTA: yan yana yazınca 320px'te kolon 88px'e
      çıkıyor ve tablo kabından taşıyordu (ölçüldü). Alt alta yazınca kolon
      genişliği DEĞİŞMEZ, yalnız satır 13px uzar.
   🔴 Modül satırı `--text-muted` DEĞİL `--text-secondary`: 8.5px'te muted
      gece modunda AA'nın altına düşüyor (aynı tuzak 1.288.0'da ölçülmüştü). */
.pgt .pgt-iki { line-height: 1.15; }
.pgt .pgt-iki b { display: block; }
.pgt .pgt-iki em {
    display: block; font-style: normal; font-weight: 600; font-size: 9px;
    color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.peron-mob-home .pgt .pgt-iki em { font-size: var(--m-fs-micro); }
/* Nabız başlığındaki büyük rakamın altındaki modül satırı. */
.dash-nabiz-alt {
    display: block; margin-top: 2px; font: 700 11px/1.2 var(--font);
    color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peron-mob-home .dash-nabiz-alt { font-size: var(--m-fs-xs); }
/* Güncel Siparişler: satırın sağındaki modül sayacı + üstteki takım/modül özeti. */
.dash-gs-mod {
    flex: 0 0 auto; font: 800 10.5px/1.2 var(--font); color: var(--pri-text);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dash-gs-mod i { font-style: normal; font-weight: 600; font-size: 9px; color: var(--text-muted); margin-left: 2px; }
.dash-gs-ozet {
    padding: 6px 14px 7px; border-bottom: 1px solid var(--border-light);
    font: 700 10.5px/1.3 var(--font); letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.peron-mob-home .dash-gs-mod  { font-size: var(--m-fs-xs); }
.peron-mob-home .dash-gs-ozet { padding: 5px var(--m-pad-x) 6px; font-size: var(--m-fs-micro); }

/* ── SEVKİYAT RAPORU — 1.290.0 ───────────────────────────────────────────────
   Kullanıcı: "Sevkiyat Planı kısmını SEVKİYAT RAPORU olarak değiştir; günlük sevk
   edilen ürünlerin toplam adetlerini ve fiyatlarının toplamını bugün · dün ·
   son 7 gün · aylık bazda göstersin."
   🔴 `.pgt` iskeletini PAYLAŞIR — dashboard'da ikinci bir tablo dili çıkarılmadı.
      Yalnız kolon genişlikleri ve para hücresi farklı.
   🔴 İLK SATIR (bugün) vurgulu: dönemler İÇ İÇE pencerelerdir, TOPLANMAZLAR —
      "en altta kalın toplam satırı" deseni burada yalan söylerdi. */
.dash-sr { padding: 12px 14px 4px; }
.dash-sr-t col.srt-c1 { width: auto; }
.dash-sr-t col.srt-c2 { width: 52px; }
.dash-sr-t col.srt-c3 { width: 62px; }
.dash-sr-t col.srt-c4 { width: 96px; }
.dash-sr-t tbody th { flex-direction: column; align-items: flex-start; gap: 0; }
.dash-sr-t tbody th em {
    font: 500 9.5px/1.25 var(--font); font-style: normal; color: var(--text-muted);
}
.dash-sr-t tbody tr.is-bas th span { font-size: 12px; }
.dash-sr-t tbody tr.is-bas td { color: var(--text-primary); }
/* Bugunun satiri vurgulu kalir ama standarda oturur: hucreler 11px,
   bugunun rakami 12px (9 punto) — vurgu korunur, tier uydurulmaz. */
.dash-sr-t tbody tr.is-bas td b { font-size: 12px; }
.dash-sr-para { font-weight: 800; color: var(--text-primary); }
.dash-sr-t tbody tr.is-bas .dash-sr-para { color: var(--pri-text); }
/* Plan sayacı — bölüm artık RAPOR, ama "bugün ne çıkacak" bilgisi kaybolmasın.
   Tek satır, düğme (Sevkiyat Planı'na gider); dokunma hedefi ≥44px. */
.dash-sr-plan {
    display: block; width: 100%; min-height: 44px; padding: 10px 14px;
    border: none; border-top: 1px solid var(--border-light); background: var(--content-bg);
    font: 600 11.5px/1.3 var(--font); color: var(--text-secondary); text-align: left;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dash-sr-plan b { font-weight: 800; color: var(--text-primary); }
.peron-mob-sevk.is-rapor { display: block; text-align: left; }
.peron-mob-home .dash-sr { padding: var(--m-pad-y) var(--m-pad-x) 2px; }
.peron-mob-home .dash-sr-t col.srt-c2 { width: 40px; }
.peron-mob-home .dash-sr-t col.srt-c3 { width: 48px; }
.peron-mob-home .dash-sr-t col.srt-c4 { width: 82px; }
.peron-mob-home .dash-sr-plan { min-height: 40px; padding: 8px var(--m-pad-x); font-size: var(--m-fs-xs); }
.peron-mob-home .dash-sr-t tbody tr.is-bas th span,
.peron-mob-home .dash-sr-t tbody tr.is-bas td b { font-size: var(--m-fs); }

/* ── TABLO CİLASI (1.290.0 tasarım denetimi) ─────────────────────────────────
   Denetim bulgusu: dashboard'un "tablo" hissi vermeyen sebebi tablo YOKLUĞU değil,
   sayıların KOLON değil CÜMLE olmasıydı; ayrıca tek gerçek tablo (`.pgt`) uygulamanın
   kendi `.peron-table` başlık dilini kullanmıyordu.
   🔴 `.peron-table` başlığındaki tam `--pri` gradyan bandı BURAYA UYGULANMADI:
      1440px genişlikte doğru olan o ağırlık, 300px'lik bir kart tablosunda
      orantısız kalıyor. Alınan şey büyük-harf + harf aralığı + nötr zemin. */
.pgt thead th { background: var(--border-light); text-transform: uppercase; letter-spacing: .06em; }
.pgt thead th:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.pgt thead th:last-child  { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
/* Zebra — DEĞER `.peron-table`ten BİREBİR alındı, yeni renk icat edilmedi. */
.pgt tbody tr:nth-child(even) { background: rgba(63, 116, 168, 0.018); }
.pgt tbody tr.is-on,
.pgt tbody tr.is-bas { background: var(--border-light); }
/* Sayı hizası — sözleşme §4. `.dash-row` ailesi bunu taşımıyordu (denetim bulgusu):
   miktar/tarih hücreleri hizasız akıyordu. */
.dash-row-meta, .dash-row-date, .dash-row-aside,
.dash-cal-row .dash-cal-meta { font-variant-numeric: tabular-nums; }
/* Zebra `.dash-row` ailesine de geldi: 4+ satırda satırlar birbirine karışıyordu. */
.dash-row:nth-child(even) { background: rgba(63, 116, 168, 0.018); }
/* Onay bekleyen iş emri satırı — sabit `rgba(217,119,6,.05)` satır-içi stildi;
   gece modunda token ezilemediği için orada bir ışık adası oluyordu. Aynı anlam
   için dosyada ZATEN `--st-wait-bg` vardı (Sevkiyat Planı uyarısı onu kullanıyor). */
.dash-row.dash-row--bekliyor { align-items: flex-start; background: var(--st-wait-bg); }
/* Kritik stok rozetleri — genişlik/dolgu tek yerden, satırlar arası hizasızlık biter. */
.dash-row-pill {
    flex-shrink: 0; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
    font: 600 11.5px/1.35 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dash-row-pill.is-ok   { color: var(--st-done-fg); background: var(--st-done-bg); border-color: var(--st-done-bd); }
.dash-row-pill.is-none { color: var(--rose-ink); }

/* ── GÜNCEL SİPARİŞLER — 1.290.0 ─────────────────────────────────────────────
   Bugün/dün sekmeli, TEK SATIRLIK sipariş listesi (sipariş tarihi · cari ·
   müşteri · ürün). Satır düzeni `cmuLine` ile ORTAK — Sevkiyat Planı ve Termin
   Takvimi de aynı üçlüyü basıyor, ikinci bir görsel dil çıkarılmadı.
   🔴 Satır TEK SATIRDIR ve taşan metin üç noktayla kesilir; sarmalama satır
      yüksekliğini iki katına çıkarır ve liste "kaç sipariş var" sorusunu
      cevaplayamaz hâle gelir. Tam metin `title` ile değil, Üretim Takibi'nde. */
.dash-gs { margin: 0 0 16px; }
.dash-gs-sek { display: flex; gap: 2px; padding: 3px; margin: 0 14px; border-radius: 10px; background: var(--border-light); }
.dash-gs-sb {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 36px; padding: 0 8px;
    border: none; border-radius: 8px; background: none;
    font: 700 12px/1.2 var(--font); color: var(--text-secondary);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
/* Görsel yükseklik 36px, DOKUNMA hedefi 44px (`.peron-mob-seg-btn` ile aynı desen). */
.dash-gs-sb::after { content: ''; position: absolute; inset: -4px 0; }
.dash-gs-sb b {
    font: 800 10.5px/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.dash-gs-sb b:empty { display: none; }
.dash-gs-sb.is-on { background: var(--card-bg); color: var(--text-primary); box-shadow: 0 1px 2px rgba(30, 52, 82, .10); }
.dash-gs-sb.is-on b { color: var(--pri-text); }
.dash-gs-liste { padding: 4px 0 2px; max-height: 340px; overflow-y: auto; }
.dash-gs-row {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 7px 14px; border-bottom: 1px solid var(--border-light);
}
.dash-gs-row:last-child { border-bottom: 0; }
.dash-gs-tar {
    flex: 0 0 auto; font: 800 10px/1.3 var(--font); letter-spacing: -.2px;
    color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dash-gs-main { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dash-gs-bos { padding: 18px 14px; font: 500 12px/1.4 var(--font); color: var(--text-muted); text-align: center; }
.dash-gs-daha { padding: 8px 14px; font: 600 10.5px/1.3 var(--font); color: var(--text-muted); }

/* Telefon: kart dolgusu daralır, punto rampaya bağlanır (8.5px tabanı korunur). */
.peron-mob-home .dash-gs { margin: 0 0 var(--m-gap-lg); }
/* Telefonda kart başlığı masaüstü dolgusuyla (16/20px) gelirse tek başına 53px yer
   yer; mobil ana sayfanın diğer bölümleriyle aynı yoğunluğa çekilir.
   🔴 Yatay dolgu tokenı `--m-pad-x` (9px) — `--m-pad` diye bir token YOKTUR;
      tanımsız değişken `padding` beyanını komple düşürür ve kart 0 dolguya iner. */
.peron-mob-home .dash-gs .peron-card-header { padding: var(--m-pad-y) var(--m-pad-x); }
.peron-mob-home .dash-gs .peron-card-title { font-size: var(--m-fs-sm); }
.peron-mob-home .dash-gs-sek { margin: 0 var(--m-pad-x); }
.peron-mob-home .dash-gs-sb { font-size: var(--m-fs-sm); }
.peron-mob-home .dash-gs-row { padding: 6px var(--m-pad-x); gap: var(--m-gap-sm); }
.peron-mob-home .dash-gs-tar { font-size: var(--m-fs-micro); }
.peron-mob-home .dash-gs-main { font-size: var(--m-fs-xs); }
.peron-mob-home .dash-gs-bos { padding: 14px var(--m-pad-x); font-size: var(--m-fs-xs); }
.peron-mob-home .dash-gs-daha { padding: 7px var(--m-pad-x); font-size: var(--m-fs-micro); }
.peron-mob-home .dash-nabiz-tablo { margin-top: 10px; padding-top: 9px; }
.peron-mob-home .pgt-bas { font-size: var(--m-fs-micro); margin-bottom: 7px; }
.peron-mob-home .pgt-bas span { font-size: var(--m-fs-micro); }
.peron-mob-home .pgt thead th { font-size: var(--m-fs-micro); }
.peron-mob-home .pgt tbody th { font-size: var(--m-fs-xs); }
.peron-mob-home .pgt tbody th em { font-size: var(--m-fs-micro); }
.peron-mob-home .pgt tbody td { font-size: var(--m-fs-xs); }
.peron-mob-home .pgt-not { font-size: var(--m-fs-micro); }

/* ── Raporlar: grafik bandı + kart içi mini kırılım ───────────────────────────
   🔴 `.rp-nabiz` üst şeridin hemen altında durur; perde başlıklarıyla arasında
      bilinçli bir nefes payı var (bant "günün şekli", perdeler "günün dökümü").
   🔴 Mini kırılım kartın İÇİNDE ve tablonun ÜSTÜNDEDİR: aynı sayıyı iki kez
      okutmaz — grafik ilk beşi, tablo tamamını verir.                            */
.rp-nabiz { margin: 0 0 18px; }
.rp-nabiz-alt { display: block; margin-top: 5px; font: 500 11px/1.2 var(--font);
                color: var(--text-muted); white-space: nowrap; }
.rp-mini-grafik { padding: 14px 14px 4px; border-bottom: 1px solid var(--border); }
.rp-mini-bas { font: 700 11px/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase;
               color: var(--text-muted); margin-bottom: 11px; }

/* Yazdırma: grafikler kâğıda BASILMAZ — mürekkep yer, sayı zaten tabloda.
   🔴 Rapor çıktısı yönetime gider; yarım kalan bir SVG orada gürültüdür.
   🔴 ÖNCELİK ZORLAMASI YOK ve GEREKMİYOR: bu dört sınıf bu sürümle doğdu, hiçbir
      kural onlara `display` yazmıyor; ekran kuralları da yalnız kutu/renk veriyor.
      (Depodaki öncelik-zorlama kullanımı diş testiyle denetleniyor — gereksiz yere
      eklemek o kapıyı köreltir. Bu yüzden bu yorumda da o dizge GEÇMEZ: tarayıcı
      yorumu koddan ayırt etmiyor, tek bir anıştırma bile ölçümü yalanlar.) */
@media print {
    .rp-nabiz, .rp-mini-grafik, .pg-kart, .dash-nabiz { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   1.288.0 — MOBİL YOĞUNLUK TURU (kullanıcı kararı)
   ═══════════════════════════════════════════════════════════════════════════════
   Kullanıcı: "genel olarak mobil ekrandaki yazı karakterlerini küçült, ekrana daha
   çok veri sığdır · fazla boşluklar, fazla büyük simge, yanlış punto · büyük
   filtreler asla olmasın · sitenin görünen yüzü ve markası mobil kısmı olacak."

   🔴 BU BLOK DOSYANIN SONUNDA. Medya sorgusu ÖZGÜLLÜK EKLEMEZ — yalnız kaynak
      sırası kazandırır. Yukarıdaki ≤768px yoğunluk bloğunu ezmek için buradan
      yazmak ZORUNLU; o blok SİLİNMEDİ, üzerine yazılıyor.
   🔴 HER KURAL max-width içinde → masaüstü render yolu BİT BİT AYNI.
   🔴 Tokenlar :root'ta KOŞULSUZ tanımlı (medya sorgusu İÇİNDE DEĞİL): modüllerin
      kendi inline style blokları da bunlara başvuruyor ve bir tokenın yalnız dar
      ekranda var olması, geniş ekranda var() çözümlenemediğinde o bildirimin
      TAMAMINI düşürür (CSS geçersiz değeri yok sayar, kuralı değil).
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Tipografi — arac/mobil-1288/MOBIL-TASARIM-SISTEMI.md §1 ile birebir aynı.
       🔴 1.289.0: taban 9.5px → 8.5px (kullanıcı kuralı: "asla büyük punto").
       8.5px ALT SINIRDIR; altına inilmez. Rakam sütunları bu boyutta yalnız
       `font-variant-numeric: tabular-nums` ile hizalı kalır — sayı basan her
       kural onu TAŞIMAK ZORUNDA, yoksa 360px'te haneler birbirine girer.
       🔴 METİN GİRİLEN input/textarea/select bu rampaya DAHİL DEĞİL: iOS,
       16px altındaki alana odaklanınca sayfayı yakınlaştırır ve kullanıcı
       elle geri çıkmak zorunda kalır. Onlar 16px'te kalır, yalnız YÜKSEKLİĞİ
       ve dolgusu küçülür. */
    /* 🔴 8,5 → 9px (1.339.0). Kullanıcının mutlak tabanı 9px'tir
       ("bunun altı okunmaz; bulgudur") ve bu token onun ALTINDA kalıyordu.
       ÖLÇÜLDÜ (390px, Raporlar): 8,5px'te kalan 76 kolon başlığı, 28 yardımcı
       hücre, 13 aşama çipi etiketi. Artış 0,5px — "büyütme" değil, tabanı
       KARŞILAMA. Kademeler arası oran korunur (9 / 9,5 / 10,5 / 11,5). */
    --m-fs-micro: 9px;
    --m-fs-xs:     9.5px;
    --m-fs-sm:    10.5px;
    --m-fs:       11.5px;
    --m-fs-md:    12.5px;
    --m-fs-lg:      15px;
    --m-fs-xl:      19px;

    /* Boşluk / yarıçap */
    --m-gap-xs: 3px;
    --m-gap-sm: 5px;
    --m-gap:    7px;
    --m-gap-lg: 11px;
    --m-pad-x:  9px;
    --m-pad-y:  7px;
    --m-r:      9px;
    --m-r-sm:   6px;

    /* Sayfa kabuğunun yatay dolgusu — 390px'te 2×2px kazandırır, dar ekranda
       (≤380px) 6px'e iner. */
    --m-page-x: 8px;

    /* 🔴 ALT NAVİGASYON PAYI — TEK OTORİTE. Çubuk 60px + iPhone güvenli alanı.
       Her mobil ekranın en alt öğesi bunu kullanır; ayrı ayrı 72px/80px yazmak
       çubuk yüksekliği değişince sessizce bozulur. */
    --m-bar-pay: calc(60px + env(safe-area-inset-bottom, 0px) + 12px);
}

/* ─── GERİ DÜĞMESİ — telefonda görünür ────────────────────────────────────────
   Gerekçesi #peron-refresh-btn kuralının yanında yazılı: YENİLE ile GERİ aynı
   sınıfı taşıdığı için tek kural ikisini birden gizliyordu. */
@media (max-width: 768px) {
    /* Görsel kutu 32px, dokunma hedefi ::after ile 44px — dosyanın kendi
       .po-act-btn deseni: satır boyu küçülür, hedef küçülmez. */
    .peron-layout #peron-back-btn {
        display: inline-flex; position: relative;
        width: 32px; min-width: 32px; height: 32px; border-radius: var(--m-r-sm);
    }
    .peron-layout #peron-back-btn svg { width: 16px; height: 16px; }
    .peron-layout #peron-back-btn::after {
        content: ''; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
    /* 🔴 180 DERECE DÖNME İPTAL: .peron-header-refresh:active YENİLEME
       hareketidir. Aynı sınıfı taşıdığı için geri düğmesi de dönüyordu — geri
       gitmenin görsel karşılığı dönmek DEĞİL, geri kaymaktır. */
    .peron-layout #peron-back-btn:active { transform: translateX(-2px) scale(0.94); }
}

/* Alt barlı ekranlarda başlıktaki hamburger GEREKSİZ: alt çubuğun 6. yuvası
   "Menü" ve aynı çekmeceyi açıyor (peron-app.js buildMobileNav → __menu__).
   Yerini geri düğmesi alır — dar başlıkta iki menü açacağına bir çıkış olur.
   🔴 Eşik alt barın kendi eşiğiyle AYNI (640px): 641-768 arasında alt bar YOK,
      orada hamburger TEK menü yoludur ve gizlenirse kullanıcı kilitlenir. */
@media (max-width: 640px) {
    .peron-layout .peron-header-toggle { display: none; }
}

/* ─── SAYFA KABUĞU + ORTAK BİLEŞEN YOĞUNLUĞU (≤640px) ─────────────────────── */
@media (max-width: 640px) {
    .peron-layout .peron-content { padding: var(--m-page-x); }

    /* Sayfa başlığı 20px → 15px. Alt başlık (açıklama cümlesi) telefonda BİLGİ
       TAŞIMIYOR ama 2 satır yer yiyor → gizlenir. Masaüstünde aynen durur. */
    .peron-layout .peron-page-title    { font-size: 15px; line-height: 1.25; }
    .peron-layout .peron-page-subtitle { display: none; }
    .peron-layout .peron-page-header   { margin-bottom: 8px; gap: 6px; }

    /* Kart başlığı ve gövde dolgusu */
    .peron-layout .peron-card-header    { padding: 8px var(--m-pad-x); }
    .peron-layout .peron-card-title     { font-size: var(--m-fs-md); gap: 6px; }
    .peron-layout .peron-card-title svg { width: 15px; height: 15px; }
    .peron-layout .peron-card-body      { padding: var(--m-pad-y) var(--m-pad-x); }

    /* Tablo: dikey dolgu 6px → 4px, gövde 13px → 11.5px, başlık 9.5px. */
    .peron-layout .peron-table th,
    .peron-layout .peron-table td { padding-top: 4px; padding-bottom: 4px; font-size: var(--m-fs-sm); }
    .peron-layout .peron-table th { font-size: var(--m-fs-micro); letter-spacing: .02em; }
    .peron-layout .peron-table td.num,
    .peron-layout .peron-table td.text-right { font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* Rozet 11.5px → 10.5px. Rozet TIKLANMAZ (durum etiketi) → 44px kuralına tabi değil. */
    .peron-layout .peron-badge { font-size: var(--m-fs-xs); padding: 2px 7px; border-radius: 999px; }

    /* 🔴 SÜZGEÇLER — kullanıcı: "büyük filtreler asla olmasın".
       Kontrol yüksekliği 40px → 34px. FONT 16px KALIR: iOS Safari 16px'in
       ALTINDAKİ bir alana odaklanınca sayfayı ZORLA yakınlaştırır ve kullanıcı
       elle uzaklaştırana kadar tüm ekran bozuk kalır. Yükseklik düşürmek bu
       tuzağa girmez, font düşürmek girer. */
    .peron-layout .peron-select,
    .peron-layout .peron-input,
    .peron-layout .peron-textarea { min-height: 34px; font-size: 16px; padding-top: 4px; padding-bottom: 4px; }
    .peron-layout .peron-toolbar  { gap: 5px; margin-bottom: 6px; }

    /* Süzgeç ÇİPİ (metin düğmesi) 28px; dokunma hedefi ::after ile 40px'e tamamlanır. */
    .peron-layout .peron-filter-btn {
        position: relative; min-height: 28px; padding: 3px 10px;
        font-size: var(--m-fs-xs); border-radius: var(--m-r-sm);
    }
    .peron-layout .peron-filter-btn::after {
        content: ''; position: absolute; left: 0; right: 0; top: 50%;
        height: 40px; transform: translateY(-50%);
    }

    /* Birincil eylem düğmesi 40px KALIR (dokunma tabanı); font ve yatay dolgu düşer.
       .sm ikincil düğmeler 32px'e iner, hedefleri ::after ile 40px'e tamamlanır. */
    .peron-layout .peron-btn     { min-height: 40px; font-size: var(--m-fs); padding-left: 11px; padding-right: 11px; gap: 5px; }
    .peron-layout .peron-btn svg { width: 14px; height: 14px; }
    .peron-layout .peron-btn.sm  { position: relative; min-height: 32px; font-size: var(--m-fs-xs); padding-left: 8px; padding-right: 8px; }
    .peron-layout .peron-btn.sm::after {
        content: ''; position: absolute; left: 0; right: 0; top: 50%;
        height: 40px; transform: translateY(-50%);
    }

    /* Boş durum bloğu: 3 satırlık şiir yerine tek satır. */
    .peron-layout .peron-empty-state       { padding: 18px 12px; }
    .peron-layout .peron-empty-state-icon  { width: 34px; height: 34px; margin-bottom: 6px; }
    .peron-layout .peron-empty-state-title { font-size: var(--m-fs-md); }
    .peron-layout .peron-empty-state-desc  { font-size: var(--m-fs-xs); }

    /* 🔴 SON ÖĞE ALT BARIN ALTINDA KALMASIN — tek otorite --m-bar-pay. */
    .peron-layout .peron-content { padding-bottom: var(--m-bar-pay); }
}

/* 380px altı — en dar cihaz (iPhone SE 1. nesil 320px dahil) */
@media (max-width: 380px) {
    :root { --m-page-x: 6px; }
    .peron-layout .peron-page-title { font-size: 14px; }
    .peron-layout .peron-table th,
    .peron-layout .peron-table td   { padding-left: 5px; padding-right: 5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERON 1.288.0 — MOBİL ANA SAYFA (Dashboard) YAMASI
   Sahibi: mobil-dashboard ajanı · Hedef: peron-panel.css SONUNA eklenecek
   ═══════════════════════════════════════════════════════════════════════════

   NE DEĞİŞTİ
   ----------
   Kullanıcı: *"dashboard ekranındaki kısa yolları kaldır (üretim planı, sevk planı,
   stok yönetimi, satınalma, cari yönetim) onun yerine farklı veriler ekle …
   anlaşılır ve daha çok veri, gayet renkli, grafikler … muhteşem bir mobil ekran."*

   Mobil ana sayfa artık KISAYOL IZGARASI basmıyor (`peron-mod-dashboard.js`,
   `if (_mobilDal)` dalı). Yerine sekiz VERİ bölümü geldi: KPI şeridi (3 sütun) ·
   Son 7 gün üç seri kıvılcım · 30 günlük nabız (mevcut) · üretim aşama şeridi ·
   sevkiyat (yoğunlaştırıldı) · termin · kritik stok · cari bakiye · iş emirleri.

   🔴 MASAÜSTÜ RENDER YOLU DEĞİŞMEZ. Buradaki HER seçici ya `.peron-mob-home`
      soyundan başlar ya da `.peron-mob-sevk` gibi YALNIZ mobil dalda üretilen bir
      sınıftır. Bu iki kap masaüstü DOM'una hiç girmez → 769/1280/1440'ta fark 0.
      (Aynı gerekçeyle `.peron-mob-home` bloğu peron-panel.css'te de media query
      İÇİNDE DEĞİLDİR: dal `A.mobilDar()` ile DONDURULUYOR; pencere sonradan
      genişlerse media kuralları düşer ve donmuş mobil DOM stilsiz kalırdı.)

   🔴 `!important` YOK. Özgüllük `.peron-mob-home` önekiyle (0,2,0) çözülür.
   🔴 SABİT HEX YOK. Renk yalnız token — gece modu tokenları ezerek çalışır.
   🔴 ÖLÇÜ TOKENLARI `.peron-mob-home` kabında tanımlıdır; değerler
      MOBIL-TASARIM-SISTEMI.md §1-2 ile BİREBİRDİR. Ana oturum aynı tokenları
      `:root`ta tanımlarsa çakışma olmaz (aynı değer), ama bu ekranın ölçüsü
      kabın kendisinde durduğu için başka bir modülün token değişikliğinden
      etkilenmez.

   🔴 ÖLÜ KURAL UYARISI (ana oturuma not): peron-panel.css ~13258-13277 arasındaki
      `.peron-mob-kisayol*` kuralları artık HİÇBİR YERDE kullanılmıyor (ızgara
      kaldırıldı). Bu ajan o dosyaya dokunmuyor; temizlik ana oturumun kararı.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · ÖLÇÜ TOKENLARI (MOBIL-TASARIM-SISTEMI.md §1-2) ───────────────────── */
.peron-mob-home {
    --m-fs-micro: 9px;   /* mutlak taban — bkz. yukarıdaki not */
    --m-fs-xs:   9.5px;
    --m-fs-sm:   10.5px;
    --m-fs:      11.5px;
    --m-fs-md:     12.5px;
    --m-fs-lg:     15px;
    --m-fs-xl:     19px;
    --m-gap-xs:     3px;
    --m-gap-sm:     5px;
    --m-gap:        7px;
    --m-gap-lg:    11px;
    --m-pad-x:      9px;
    --m-pad-y:      7px;
    --m-r:          9px;
    --m-r-sm:       6px;
    padding: 2px 0 6px;
}
/* Son bölümün altındaki 11px'lik boşluk, `.peron-content`in 74px alt dolgusuyla
   (alt navigasyon çubuğu) üst üste binmesin — çubuk zaten yeri ayırıyor. */
.peron-mob-home > :last-child { margin-bottom: 0; }

/* ── 1 · BAŞLIK ──────────────────────────────────────────────────────────── */
.peron-mob-home-bas { padding: 0 2px 10px; }
.peron-mob-home-ad  { font: 700 var(--m-fs-lg)/1.2 var(--font); color: var(--text-primary); }
.peron-mob-home-alt {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--m-gap-sm); flex-wrap: wrap; margin-top: 2px;
    font: 500 var(--m-fs)/1.3 var(--font); color: var(--text-secondary);
    min-width: 0;
}
.peron-mob-home-gun {
    flex: 0 0 auto; font: 600 var(--m-fs-xs)/1.3 var(--font);
    color: var(--text-muted); white-space: nowrap;
}

/* ── 2 · KPI ŞERİDİ — ADAY SAYISI KADAR SÜTUN, EN FAZLA 5 ─────────────────
   Kullanıcı kararı 1.288.0: *"üst 5 adet menüyü yan yana konumlandır"*.
   🔴 Sütun sayısı JS'ten `--kpi-n` ile gelir. SABİT 5 YAZILMADI: izni kısıtlı
      kullanıcıda 2-3 kutu 5 sütuna bölünüp 56px'lik cüce kutular olarak kalırdı.
   🔴 Sabit px genişlik YOK, `auto-fit` YOK (1.271.0'da ölçüldü: `auto-fit`
      320px'te tek sütuna düşüp kutuları devleştiriyordu).
   🔴 Renk KUTUYU değil SAYIYI boyar — beş renkli dolu kutu yan yana gürültü
      yapar ve "hangisi acil" bilgisini yok eder.                               */
.peron-mob-home .peron-mob-ozet {
    display: grid; grid-template-columns: repeat(var(--kpi-n, 3), minmax(0, 1fr));
    gap: var(--m-gap-sm); margin: 0 0 var(--m-gap-lg);
}
.peron-mob-home .peron-mob-ozet-kutu {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1px; min-height: 58px; padding: 8px; box-sizing: border-box;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--m-r); cursor: pointer; text-align: left;
    min-width: 0; -webkit-tap-highlight-color: transparent;
}
.peron-mob-home .peron-mob-ozet-kutu:active { background: var(--content-bg); }
.peron-mob-home .peron-mob-ozet-sayi {
    font: 800 var(--m-fs-lg)/1.05 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peron-mob-home .peron-mob-ozet-et {
    font: 600 var(--m-fs-xs)/1.25 var(--font); color: var(--text-muted);
    letter-spacing: .1px; min-width: 0; overflow-wrap: anywhere;
}
/* 4-5 sütun bandı: kutu 320px'te 56-74px'e iner. ÖLÇÜLDÜ — bu bantta sola
   yaslı metin kutuyu boş gösteriyor, ortalanmış hâli okunuyor; sayı 17px'te
   47px sürüp taşıyordu, 14px'te 38px'e iniyor. Etiket JS'te KISA sürüme
   geçer (tam karşılığı `title`/`aria-label`de durur), burada yalnız ölçek. */
.peron-mob-home .peron-mob-ozet.is-n4 { gap: 4px; }
.peron-mob-home .peron-mob-ozet.is-n5 { gap: 4px; }
.peron-mob-home .is-n4 .peron-mob-ozet-kutu,
.peron-mob-home .is-n5 .peron-mob-ozet-kutu {
    align-items: center; text-align: center; padding: 7px 3px; min-height: 52px; gap: 2px;
}
.peron-mob-home .is-n4 .peron-mob-ozet-sayi,
.peron-mob-home .is-n5 .peron-mob-ozet-sayi { font-size: var(--m-fs-md); }
.peron-mob-home .is-n5 .peron-mob-ozet-et {
    font-size: var(--m-fs-micro); letter-spacing: 0;
    /* 🔴 Etiket SARMAZ: iki satıra düşen tek bir etiket, komşu kutuların
       taban çizgisini bozup şeridi eğri gösteriyordu (ölçüldü 320px). Kısa
       sürüm zaten sığıyor; sığmazsa üç nokta, satır atlama YOK. */
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 3 · ORTAK KART KABUĞU ───────────────────────────────────────────────── */
.peron-mob-home .mob-kart {
    display: block; box-sizing: border-box; width: 100%; max-width: 100%;
    margin: 0 0 var(--m-gap-lg); padding: var(--m-pad-y) var(--m-pad-x) 9px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--m-r); color: inherit; text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.peron-mob-home .mob-kart--tik { cursor: pointer; }
.peron-mob-home .mob-kart--tik:active { background: var(--content-bg); }
.peron-mob-home .mob-kart-bas {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--m-gap-sm); min-width: 0;
    padding-bottom: 6px; margin-bottom: var(--m-gap);
    border-bottom: 1px solid var(--border-light);
}
.peron-mob-home .mob-kart-ad {
    display: inline-flex; align-items: baseline; gap: var(--m-gap-sm);
    flex: 1 1 auto; min-width: 0;
    font: 700 var(--m-fs-md)/1.25 var(--font); color: var(--text-primary);
    letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 🔴 Sol kenar aksan ŞERİDİ YASAK (klişe AI kalıbı) → 6px dolu NOKTA. */
.peron-mob-home .mob-kart-nokta {
    flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--pg-c, var(--pri)); transform: translateY(-1px);
}
.peron-mob-home .mob-kart-us {
    flex: none; font: 600 var(--m-fs-xs)/1.3 var(--font); color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Dokunulabilir kartın işareti — metinden sonra, kutuyu büyütmeyen tek karakter. */
.peron-mob-home .mob-kart--tik .mob-kart-bas::after {
    content: '\203A'; flex: none; align-self: center;
    font: 700 var(--m-fs-md)/1 var(--font); color: var(--text-muted);
}

/* ── 4 · SON 7 GÜN — üç seri kıvılcım ────────────────────────────────────
   Izgara: ad · kıvılcım · toplam · fark. 320px'te kıvılcıma 111px kalır
   (280 − 62 − 44 − 48 − 3×5). Sayısal sütunlar SABİT; ad ve grafik esner.     */
.peron-mob-home .mob-hafta { display: grid; gap: var(--m-gap-sm); }
.peron-mob-home .mob-hafta-satir {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) 44px 48px;
    align-items: center; gap: var(--m-gap-sm); min-height: 30px; box-sizing: border-box;
}
.peron-mob-home .mob-hafta-ad {
    display: flex; align-items: center; gap: 4px; min-width: 0;
    font: 600 var(--m-fs-sm)/1.25 var(--font); color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peron-mob-home .mob-hafta-ad > i {
    flex: none; width: 7px; height: 7px; border-radius: 2px;
    background: var(--pg-c, var(--pri));
}
.peron-mob-home .mob-hafta-graf { min-width: 0; }
.peron-mob-home .mob-hafta-graf .pg-kivilcim { height: 22px; }
.peron-mob-home .mob-hafta-sayi {
    text-align: right; font: 700 var(--m-fs)/1.15 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peron-mob-home .mob-hafta-sayi > em {
    display: block; font: 500 var(--m-fs-micro)/1.1 var(--font); font-style: normal;
    color: var(--text-muted); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis;
}
.peron-mob-home .mob-hafta-fark {
    text-align: right; font: 700 var(--m-fs-xs)/1.2 var(--font);
    font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-muted);
}
.peron-mob-home .mob-hafta-fark.is-up   { color: var(--green-ink); }
.peron-mob-home .mob-hafta-fark.is-down { color: var(--rose-ink); }
.peron-mob-home .mob-hafta-fark.is-flat { color: var(--text-muted); }

/* ── 5 · TEK SATIR REÇETESİ (kritik stok · termin) ───────────────────────
   Tasarım sözleşmesi §6: ad esner (`minmax(0,1fr)` + ellipsis), sayısal
   sütunlar SABİT ve sağa dayalı — sabit olmaları ŞART, çünkü her satır KENDİ
   grid kabıdır (`order-row-*` durum zeminini satır taşıyor); `auto` sütun
   satırdan satıra kayar ve tasarım sözleşmesi §10'un "aynı x" kuralı bozulur.

   🔴 KRİTİK STOK SATIRI İKİ SATIRLI IZGARADIR, ÜÇ SÜTUNLU DEĞİL. ÖLÇÜLDÜ
      (320px): "1.240 kg" 59px sürüyor, üç sütunlu düzende sayı sütunu 54px'ti →
      değer eşik metninin ÜSTÜNE taşıyordu. Sayı ve eşik ALT ALTA alınınca ikisi
      de 66px'lik tek sütunda rahat duruyor (ölçülen en geniş: 58px / 52px) ve
      doluluk çubuğu boşalan sol yarıya geçiyor — satır 43px, taşma yok.         */
.peron-mob-home .mob-satirlar { display: block; }
.peron-mob-home .mob-satir {
    display: grid; grid-template-columns: minmax(0, 1fr) 62px 34px;
    align-items: center; gap: var(--m-gap-sm);
    padding: 6px 4px; border-bottom: 1px solid var(--border-light);
    border-radius: 4px; box-sizing: border-box;
}
.peron-mob-home .mob-satir--kritik {
    grid-template-columns: minmax(0, 1fr) 66px;
    row-gap: 2px;
}
.peron-mob-home .mob-satir--kritik .mob-satir-ad  { grid-area: 1 / 1; }
.peron-mob-home .mob-satir--kritik .mob-satir-s1  { grid-area: 1 / 2; }
.peron-mob-home .mob-satir--kritik .mob-satir-s2  { grid-area: 2 / 2; }
.peron-mob-home .mob-satirlar > .mob-satir:last-child { border-bottom: 0; }
.peron-mob-home .mob-satir-ad {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 var(--m-fs)/1.3 var(--font); color: var(--text-primary);
}
.peron-mob-home .mob-satir-s1 {
    text-align: right; font: 700 var(--m-fs-sm)/1.25 var(--font); color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peron-mob-home .mob-satir-s1 > em {
    font: 500 var(--m-fs-micro)/1 var(--font); font-style: normal;
    color: var(--text-muted); margin-left: 2px;
}
.peron-mob-home .mob-satir-s2 {
    text-align: right; font: 500 var(--m-fs-xs)/1.25 var(--font); color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Kritik stokta sayı KENDİ rengini taşır (rozet/şerit eklemeden uyarı verir). */
.peron-mob-home .mob-satir--kritik .mob-satir-s1 { color: var(--rose-ink); }
/* Mini doluluk ölçeri: UZUNLUK = stok/eşik oranı, RENK = şiddet.
   🔴 Sıfır = sıfır genişlik (min-width YOK — `A.grafik.cubuk`la aynı kural:
      dolu bir kütük sıfırı "var" gibi gösterir ve grafik sayıyı yalanlar).
   🔴 Tek renk kullanmak GÖRSEL DENETİMDE ÇÜRÜDÜ: %5 ve %83 dolu satırlar aynı
      kırmızıydı ve uzun kırmızı "daha kötü" okunuyordu. Şiddet eşikleri JS'te
      (`mobKritikBolumu`) hesaplanır, renk burada verilir — tek tanım, iki yer. */
.peron-mob-home .mob-satir-ray {
    grid-area: 2 / 1; align-self: center; height: 3px;
    background: var(--border-light); border-radius: 99px; overflow: hidden;
}
.peron-mob-home .mob-satir-ray > i {
    display: block; height: 100%; border-radius: 99px; background: var(--text-muted);
}
.peron-mob-home .mob-satir-ray.is-acil  > i { background: var(--rose-ink); }
.peron-mob-home .mob-satir-ray.is-dusuk > i { background: var(--amber-ink); }
.peron-mob-home .mob-satir-ray.is-yakin > i { background: var(--green-ink); }

/* ── 5b · CANLI ÜRETİM (masaüstü "Üretim Durumu"nun mobil karşılığı) ──────
   🔴 "ASLA BÜYÜK OLMASIN" (kullanıcı). Satır İKİ ızgara satırıdır: üstte
      ad + aşama + %, altta tam genişlik ilerleme çubuğu. Ölçülen: 38px.
      Masaüstündeki akordiyon (modül listesi) ve arama kutusu taşınmadı —
      320px'te üçü birlikte kartı üç katına çıkarıyordu.
   🔴 AŞAMA RENGİ SATIRIN `--pg-c`sidir (JS `PROD_STAGE_RENK` = `--st-*-fg`).
      Hem etiket hem ilerleme çubuğu ondan beslenir: iki farklı yerde aynı
      aşama iki farklı renk gösteremez.                                        */
.peron-mob-home .mob-satir--uretim {
    /* 🔴 78px DEĞİL 86px — GÖRSEL DENETİM ÖLÇÜMÜ YALANLADI. `Range` ile
       ölçülen metin 71px'ti ve "sığıyor" diyordu; ama `::before` noktası
       (6px + 4px boşluk) Range'e GİRMEZ ve hücrede `overflow:hidden`
       olduğu için taşma ölçeri de susuyordu. Gerçek içerik 81px →
       "Plana Alındı ×12" ekranda "Plana Alındı…" diye kırpılıyordu.
       Ölçüyü artık `scrollWidth`/`clientWidth` doğrular. */
    grid-template-columns: minmax(0, 1fr) 86px 30px;
    row-gap: 3px;
}
.peron-mob-home .mob-satir--uretim .mob-satir-ad  { grid-area: 1 / 1; }
.peron-mob-home .mob-satir--uretim .mob-cu-asama  { grid-area: 1 / 2; }
.peron-mob-home .mob-satir--uretim .mob-satir-s2  { grid-area: 1 / 3; }
.peron-mob-home .mob-satir--uretim .mob-satir-ray { grid-area: 2 / 1 / 3 / -1; }
/* 🔴 AŞAMA ETİKETİ `--st-*-fg` İLE BOYANMAZ — ÖLÇÜLDÜ VE ÇÜRÜDÜ.
   `--st-*` üçlüsü bir bg+fg ÇİFTİDİR (fg, kendi tonlu zemini üstünde AA'yı
   geçer). Beyaz kart üstünde tek başına kullanılınca "Kesimde"
   (`--st-cut-fg #2f6aa6`) 4,29:1 veriyordu — 9,5px/700 için eşik 4,5:1.
   Diğer altı aşama geçiyordu; yani hata SESSİZ ve seçiciydi.
   ÇÖZÜM: metin `--text-secondary` (açık 7,9:1 · gece 8,6:1), aşama rengi
   6px DOLU NOKTAYA ve satırın ilerleme çubuğuna taşındı. Renk kodlaması
   kaybolmadı, okunurluk kazanıldı (sözleşme §4: "nokta, rozet zemini veya
   sayının kendi rengi" — kenar şeridi değil). */
.peron-mob-home .mob-cu-asama {
    min-width: 0; text-align: right; color: var(--text-secondary);
    font: 600 var(--m-fs-micro)/1.3 var(--font);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peron-mob-home .mob-cu-asama::before {
    content: ''; display: inline-block; vertical-align: 1px;
    width: 6px; height: 6px; border-radius: 50%; margin-right: 4px;
    background: var(--pg-c, var(--pri));
}
/* Modül sayısı rozeti — aşamanın yanında, ayrı sütun İSTEMEDEN. */
.peron-mob-home .mob-cu-asama > em {
    font-style: normal; font-weight: 600; color: var(--text-muted);
    margin-left: 3px;
}
.peron-mob-home .mob-cu-asama > em::before { content: '\00D7'; margin-right: 1px; }
.peron-mob-home .mob-satir-ray.is-asama > i { background: var(--pg-c, var(--pri)); }

/* Aşama süzgeci — TEK SATIR, KENDİ kabında yatay kayar.
   🔴 Sarmalama denendi ve ölçüldü: 8 aşama 320px'te 3 satıra düşüp çip bloğunu
      90px yapıyordu ("asla büyük olmasın" ihlali). Sözleşme §0.3: geniş içerik
      body'yi değil KENDİ kabını kaydırır.
   🔴 Çip yüksekliği 28px (sözleşme §3 süzgeç çipi) — kullanıcı "büyük filtreler
      asla olmasın" dedi. Dokunma alanı `::after` ile 40px'e genişletilir. */
.peron-mob-home .mob-cu-cip {
    display: flex; gap: 4px; margin: 0 0 var(--m-gap);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.peron-mob-home .mob-cu-cip::-webkit-scrollbar { display: none; }
/* Sağ kenar solar: şeridin kaydırılabildiğini söyler. Sondaki 24px'lik boşluk son
   çipin solmayan alana kadar kaydırılabilmesini sağlar (son çip soluk kalmaz). */
.peron-mob-home .mob-cu-cip {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
}
.peron-mob-home .mob-cu-cip::after { content: ''; flex: 0 0 24px; }
.peron-mob-home .mob-cu-b {
    position: relative; flex: 0 0 auto; box-sizing: border-box;
    height: 28px; padding: 0 9px; border-radius: 99px;
    border: 1px solid var(--border); background: var(--card-bg);
    color: var(--text-secondary); font: 600 var(--m-fs-xs)/26px var(--font);
    white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.peron-mob-home .mob-cu-b::after { content: ''; position: absolute; inset: -6px 0; }
.peron-mob-home .mob-cu-b > b {
    font-weight: 800; color: var(--pg-c, var(--text-primary)); margin-right: 4px;
    font-variant-numeric: tabular-nums;
}
.peron-mob-home .mob-cu-b.is-on {
    border-color: var(--pg-c, var(--pri)); color: var(--text-primary);
    background: var(--content-bg); font-weight: 700;
}
.peron-mob-home .mob-cu-bos {
    padding: 10px 4px; text-align: center;
    font: 500 var(--m-fs-sm)/1.4 var(--font); color: var(--text-muted);
}
.peron-mob-home .mob-cu-daha {
    padding: 6px 4px 0; font: 600 var(--m-fs-xs)/1.3 var(--font); color: var(--text-muted);
}
.peron-mob-home .mob-cu-daha[hidden],
.peron-mob-home .mob-cu-bos[hidden] { display: none; }
/* Çipte MODÜL sayısı — büyük sayı TAKIM, bu onun yanındaki küçük ikincil bilgi
   (kullanıcı kuralı: "önce takım, altında modül"). Çip tek satırlık ve yatay
   kayan bir şerit olduğu için modül YANDA durur, altta değil: alt satır çip
   yüksekliğini 28 → 40px'e çıkarır ve şerit ekranın 12px'ini daha yerdi. */
.peron-mob-home .mob-cu-b > em {
    font-style: normal; font-weight: 600; font-size: var(--m-fs-micro);
    color: var(--text-muted); margin-left: 4px; font-variant-numeric: tabular-nums;
}

/* ── 5c · İKİ SATIRLI KAYIT (bekleyen talepler · son siparişlerim) ────────
   Üstte ad + miktar, altta meta + durum rozeti. Sayısal sütun SABİT kalır ki
   iki kartın satırları aynı x'te hizalansın (sözleşme §10).                   */
.peron-mob-home .mob-satir--iki {
    /* 🔴 62px DEĞİL 96px — ÖLÇÜLDÜ. Sütun hem miktarı (1. satır) hem DURUM
       ROZETİNİ (2. satır) taşıyor; `statusLabel()`in en uzun metni "Tedarik
       Sürecinde" 9,5px/700'de dolgusuyla 91px sürüyor ve 62px'lik sütunda
       "Tedarik Sürec…" diye kırpılıyordu — rozet kırpılınca DURUM BİLGİSİ
       kaybolur, ad kırpılması gibi zararsız değildir.
       🔴 Sütun `auto` YAPILMADI: her satır KENDİ grid kabıdır, `auto` satırdan
       satıra kayar ve sözleşme §10'un "aynı x" hizalaması bozulur. */
    grid-template-columns: minmax(0, 1fr) 96px;
    row-gap: 2px;
}
.peron-mob-home .mob-satir--iki .mob-satir-ad    { grid-area: 1 / 1; }
.peron-mob-home .mob-satir--iki .mob-satir-s1    { grid-area: 1 / 2; }
.peron-mob-home .mob-satir--iki .mob-satir-alt   { grid-area: 2 / 1; }
.peron-mob-home .mob-satir--iki .mob-satir-rozet { grid-area: 2 / 2; }
.peron-mob-home .mob-satir-alt {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 var(--m-fs-xs)/1.3 var(--font); color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.peron-mob-home .mob-satir-rozet {
    justify-self: end; max-width: 100%; box-sizing: border-box;
    padding: 1px 6px; border-radius: 99px;
    font: 700 var(--m-fs-micro)/1.5 var(--font);
    background: var(--border-light); color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Rozet renkleri `statusLabel()`in sınıf adlarıyla BİREBİR (neutral/info/
   warning/success/danger) — ikinci bir eşleme tablosu yazmak, durum eklenince
   sessizce gri kalan bir rozet demekti. */
.peron-mob-home .mob-satir-rozet.is-info    { background: var(--pri-light);   color: var(--pri-text); }
.peron-mob-home .mob-satir-rozet.is-warning { background: var(--st-wait-bg);  color: var(--amber-ink); }
.peron-mob-home .mob-satir-rozet.is-success { background: var(--st-done-bg);  color: var(--green-ink); }
.peron-mob-home .mob-satir-rozet.is-danger  { background: var(--st-canc-bg, var(--border-light)); color: var(--rose-ink); }

/* ── 6 · CARİ BAKİYE (PARA — `A.pricesHidden()` ile JS'te kapatılır) ─────── */
.peron-mob-home .mob-net {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--m-gap-sm); margin-top: var(--m-gap); padding-top: var(--m-gap-sm);
    border-top: 1px solid var(--border-light);
}
.peron-mob-home .mob-net > span { font: 600 var(--m-fs-sm)/1.3 var(--font); color: var(--text-muted); }
.peron-mob-home .mob-net > b {
    font: 800 var(--m-fs-md)/1.2 var(--font); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.peron-mob-home .mob-net > b.is-arti { color: var(--green-ink); }
.peron-mob-home .mob-net > b.is-eksi { color: var(--rose-ink); }

/* ── 7 · ÜÇLÜ SAYAÇ (iş emirleri) ────────────────────────────────────────── */
.peron-mob-home .mob-uclu {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m-gap-sm);
}
.peron-mob-home .mob-uclu-k {
    box-sizing: border-box; min-width: 0; padding: 7px 6px; text-align: center;
    background: var(--content-bg); border-radius: var(--m-r-sm);
}
.peron-mob-home .mob-uclu-k > b {
    display: block; font: 800 var(--m-fs-lg)/1.05 var(--font);
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.peron-mob-home .mob-uclu-k > span {
    display: block; margin-top: 1px; font: 600 var(--m-fs-micro)/1.2 var(--font);
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.peron-mob-home .mob-uclu-k.is-amber > b { color: var(--amber-ink); }
.peron-mob-home .mob-uclu-k.is-pri   > b { color: var(--pri-text); }
.peron-mob-home .mob-uclu-k.is-green > b { color: var(--green-ink); }

/* ── 8 · GRAFİK MOTORU — mobil yoğunluk ayarı ─────────────────────────────
   🔴 `A.grafik` ORTAK çizerdir (Raporlar da kullanır); çizerin KENDİSİNE
      dokunulmadı, yalnız bu ekrandaki tipografi/yükseklik daraltıldı.          */
.peron-mob-home .pg-kart {
    border-radius: var(--m-r);
    padding: var(--m-pad-y) var(--m-pad-x) 9px;
}
.peron-mob-home .pg-izgara2 { gap: var(--m-gap-lg); margin-bottom: 0; }
.peron-mob-home .dash-nabiz { margin: 0 0 var(--m-gap-lg); }
.peron-mob-home .pg-kart__bas { gap: var(--m-gap); margin-bottom: 9px; }
.peron-mob-home .pg-kart__ad { gap: 2px; }
.peron-mob-home .pg-kart__ad h4   { font-size: var(--m-fs-md); }
.peron-mob-home .pg-kart__ad span { font-size: var(--m-fs-xs); line-height: 1.35; }
.peron-mob-home .pg-kart__buyuk     { font-size: var(--m-fs-xl); }
.peron-mob-home .pg-kart__buyuk em  { font-size: var(--m-fs-micro); margin-top: 2px; }
.peron-mob-home .dash-nabiz-fark    { font-size: var(--m-fs-xs); margin-top: 4px; }
/* Seri sekmeleri: 40px — tasarım sözleşmesi §3'ün BİRİNCİL EYLEM tabanı.
   Eskiden 44px'ti; kullanıcı yoğunluk istedi, 4px kazanıldı ama tabanın ALTINA
   inilmedi (bu üç sekme ekranın tek gerçek etkileşimi). */
.peron-mob-home .dash-nabiz-cip { gap: var(--m-gap-sm); margin: 0 0 9px; }
.peron-mob-home .dash-nabiz-b {
    min-height: 40px; padding: 7px 8px; border-radius: var(--m-r-sm);
    font-size: var(--m-fs);
}
/* 🔴 SEÇİLİ SEKMENİN METNİ AA DEĞİLDİ — ÖLÇÜLDÜ (alfa birleştirmeli):
   `.dash-nabiz-b.is-on { color: var(--pg-c) }` ve Üretim serisinin rengi
   `var(--pri)`. Kendi %10'luk zemini üstünde 3,92:1 (açık) / 3,42:1 (gece),
   12,5px/700 için eşik 4,5:1. Renk kodlaması KAYBOLMAZ: kenarlık ve zemin
   hâlâ `--pg-c`dir; okunması gereken tek şey olan METİN yüksek kontrasta
   alınır. Diğer iki seri zaten `-ink` türevi kullandığı için AA'yı geçiyordu.
   ⚠️ Aynı kural MASAÜSTÜNDE de geçerlidir (peron-panel.css ~15960) ama o dosya
      bu ajanın sahipliğinde değil — ana oturuma bildirildi. */
.peron-mob-home .dash-nabiz-b.is-on { color: var(--text-primary); }
.peron-mob-home .pg-eksen { font-size: var(--m-fs-xs); margin-top: 5px; }
.peron-mob-home .pg-halka { gap: 10px; }
.peron-mob-home .pg-halka-cizim { width: min(128px, 44vw); }
.peron-mob-home .pg-halka-ic b  { font-size: var(--m-fs-lg); }
.peron-mob-home .pg-halka-ic em { font-size: var(--m-fs-micro); }
.peron-mob-home .pg-efsane { gap: 5px; }
.peron-mob-home .pg-efsane li   { font-size: var(--m-fs-sm); gap: 6px; }
.peron-mob-home .pg-efsane li > i { width: 8px; height: 8px; }
.peron-mob-home .pg-efsane--yatay { gap: 4px 10px; }
.peron-mob-home .pg-serit { gap: var(--m-gap); }
.peron-mob-home .pg-serit-ray { height: 10px; }
.peron-mob-home .pg-cubuklar { gap: 8px; }
.peron-mob-home .pg-cb-ust { margin-bottom: 4px; }
.peron-mob-home .pg-cb-ad  { font-size: var(--m-fs-sm); }
.peron-mob-home .pg-cb-dg  { font-size: var(--m-fs); }
.peron-mob-home .pg-bos {
    min-height: 64px; padding: 12px 10px; border-radius: var(--m-r);
    font-size: var(--m-fs-sm);
}

/* ── 9 · SEVKİYAT KARTI — yoğunlaştırma ──────────────────────────────────
   Satır 3 → 2 satıra indi (cari + müşteri artık AYNI satırda: ikisi de "kimden/
   kime" bilgisinin parçası). Blok başına 3 → 4 kayıt.                          */
.peron-mob-home .peron-mob-sevk { border-radius: var(--m-r); margin: 0 0 var(--m-gap-lg); }
.peron-mob-home .peron-mob-sevk .mob-sp-bas {
    padding: 8px var(--m-pad-x); font-size: var(--m-fs-md);
}
.peron-mob-home .peron-mob-sevk .mob-sp-bas > span { font-size: var(--m-fs-xs); }
.peron-mob-home .peron-mob-sevk .mob-sp-uyari { padding: 6px var(--m-pad-x); font-size: var(--m-fs-sm); }
.peron-mob-home .peron-mob-sevk .mob-sp-cap {
    padding: 4px var(--m-pad-x); font-size: var(--m-fs-micro); letter-spacing: .3px;
}
.peron-mob-home .peron-mob-sevk .mob-sp-cap > span { font-size: var(--m-fs-micro); padding: 1px 6px; }
.peron-mob-home .peron-mob-sevk .mob-sp-row { padding: 5px var(--m-pad-x); }
.peron-mob-home .peron-mob-sevk .mob-sp-ust {
    display: flex; align-items: baseline; gap: var(--m-gap-sm); min-width: 0;
}
.peron-mob-home .peron-mob-sevk .mob-sp-ust > .mob-sp-cari {
    flex: 0 1 auto; min-width: 0; font-size: var(--m-fs); line-height: 1.3;
}
.peron-mob-home .peron-mob-sevk .mob-sp-ust > .mob-sp-mus {
    flex: 1 1 auto; min-width: 0; font-size: var(--m-fs-xs); line-height: 1.3;
}
.peron-mob-home .peron-mob-sevk .mob-sp-alt { gap: var(--m-gap-sm); margin-top: 0; }
.peron-mob-home .peron-mob-sevk .mob-sp-urun {
    flex: 1 1 auto; font-size: var(--m-fs-sm); line-height: 1.3;
}
.peron-mob-home .peron-mob-sevk .mob-sp-il {
    flex: 0 0 auto; max-width: 84px; padding: 1px 6px; border-radius: 99px;
    background: var(--border-light); color: var(--text-muted);
    font: 600 var(--m-fs-micro)/1.4 var(--font);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peron-mob-home .peron-mob-sevk .mob-sp-mik { font-size: var(--m-fs-sm); line-height: 1.3; }
.peron-mob-home .peron-mob-sevk .mob-sp-daha { padding: 6px var(--m-pad-x); font-size: var(--m-fs-xs); }

/* ── 10 · BOŞ DURUM ──────────────────────────────────────────────────────── */
.peron-mob-home .peron-mob-bos {
    padding: 24px 14px; border-radius: var(--m-r);
    font: 400 var(--m-fs-md)/1.6 var(--font);
}

/* ── 11 · 340px ALTI (eski/küçük telefonlar) ──────────────────────────────
   3 sütun KORUNUR (sözleşme §5); yalnız etiket ve dolgu küçülür. Sütun genişliği
   320px'te 96,7px → kutu iç genişliği 78,7px; en uzun etiket ("Bekleyen talep",
   10,5px) ≈ 70px sürüyor ve tek satırda kalıyor.                                */
@media (max-width: 340px) {
    .peron-mob-home .peron-mob-ozet-kutu { padding: 7px 6px; min-height: 54px; }
    .peron-mob-home .mob-hafta-satir { grid-template-columns: 56px minmax(0, 1fr) 40px 44px; }
    .peron-mob-home .peron-mob-sevk .mob-sp-il { max-width: 66px; }
    /* 🔴 `.mob-satir` sütunları BURADA DARALTILMAZ. Denendi ve ölçüldü: 54px'e
       inen sayı sütununda "1.240 kg" (59px) komşu hücrenin üstüne taşıyordu.
       Ad sütunu zaten `minmax(0,1fr)` ile esniyor — dar ekranda kısalması
       gereken tek şey odur. */
}

/* ══════════════════════════════════════════════════════════════════════════════
   RAPORLAR — MOBİL YOĞUNLUK (1.288.0)   ·   peron-panel.css SONUNA eklenecek
   ──────────────────────────────────────────────────────────────────────────────
   Kullanıcı isteği (birebir): "raporlar ekranı kısmı felaket derecede kötü her şey
   çok büyük … üstte yazan 'raporlar fabrikanın günü…' yazılarını tamamen kaldır …
   tüm sayfayı sıkıştır, alt alta olan yerleri yan yana getir … daralt küçült ve
   oran orantı olsun".

   🔴 MASAÜSTÜ BİT BİT AYNI: bu dosyadaki HER kural TEK bir
      `@media (max-width: 640px)` bloğunun içindedir. >=641px'te hiçbiri uygulanmaz.
   🔴 `!important` YOK: özgüllük seçiciyle çözüldü. Paylaşılan sınıflara
      (`.peron-page-subtitle`, `.peron-table`, `.pg-kart`, `.dash-nabiz-b`,
      `.rp-serit`) ÇIPLAK kural yazılmadı — hepsi `#rp-kok` ya da bu turda doğan
      kanca sınıfları (`.rp-baslik`, `.rp-sekmeler--m`) altında.
      🔴 `.rp-serit` sınıfını `#up-shell .up-serit` ve `#dr-shell .dr-serit` DE
         taşıyor (14419+); çıplak yazılsaydı diğer iki rapor sekmesinin şeridi de
         6'lı ızgaraya düşerdi. `#rp-kok` yalnız Günlük Operasyon'da var.
   🔴 SIRA: dosyanın SONUNA gelir. `@media (min-width: 520px)` (12526) ve
      `@media (max-width: 768px)` (12551) blokları AYNI özgüllükte kurallar taşıyor;
      media query özgüllük EKLEMEZ, kaynak sırası kazanır (MOBİL SON SÖZ kuralı).

   ÖLÇÜLEN GEOMETRİ (`.peron-layout .peron-content` dolgusu <=480px'te 10px,
   481-640px'te 12px):
     320px → içerik 300px · 360px → 340px · 390px → 370px · 520px → 496px
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* ── 1 · SAYFA BAŞLIĞI — açıklama metni telefonda DÜŞER ──────────────────
       Silinen metin (`ALT_BASLIK.gunluk`, masaüstünde AYNEN duruyor):
       "Fabrikanın günü bir akıştır: içeri giren → işlenen → dışarı çıkan.
        Rapor bu sırayla okunur."
       Diğer iki sekmenin alt başlıkları da aynı kancadan düşer (tek üretici).
       ÖLÇÜLDÜ: iki satırlık 12,5px açıklama + 20px alt boşluk = 57px; kalan
       başlık bloğu 24px → ilk veri 33px yukarı çıkıyor. */
    .peron-page-header.rp-baslik { margin-bottom: 6px; gap: 8px; }
    .rp-baslik .peron-page-title { font-size: 15px; letter-spacing: -.2px; }
    /* 🔴 "Raporlar" BAŞLIĞI TELEFONDA DÜŞER (1.339.0 — kullanıcı: *"'günlük' yazan
       kısmın üstündeki 'raporlar' yazısını kaldırarak yer aç"*). ÖLÇÜLDÜ 390px:
       başlık 19px + boşluk ≈ 25px kazanç. Bilgi KAYBOLMUYOR — hangi ekranda
       olduğunu hemen ALTINDAKİ sekme çubuğu (Günlük/Üretim/…) zaten söylüyor.
       🔴 MASAÜSTÜ (≥641px) DOKUNULMAZ: orada dikey yer sorun değil ve başlık
          sayfanın kimliğidir. */
    .peron-page-header.rp-baslik { display: none; }
    .rp-baslik .rp-baslik-ack { display: none; }

    /* ── 2 · SEKME ÇUBUĞU ───────────────────────────────────────────────────
       Gezinme denetimi olduğu için 38px'in ALTINA inilmedi (yoğunluk sözleşmesi
       birincil eylem için 40px diyor; buradaki kayıp 44→38 = 6px + 15px kenar). */
    .rp-sekmeler.rp-sekmeler--m { margin: 6px 0 9px; padding: 3px; gap: 4px;
        border-radius: 10px; }
    .rp-sekmeler--m .rp-sekme { min-height: 38px; padding: 0 6px;
        font-size: var(--m-fs, 11.5px); }

    /* ── 3 · SÜZGEÇLER — "büyük filtreler asla olmasın" ─────────────────────
       🔴 `font-size: 16px` DEĞİŞMEZ: iOS Safari 16px altındaki input'a odaklanınca
          sayfayı zoomlar. Küçülen şey YÜKSEKLİK (44 → 34px).
       🔴 Çip görsel kutusu 28px ama dokunma alanı `::after` ile 34px'e genişler;
          satır arası boşluk 6px = 2×3px inset → komşu çipler ÇAKIŞMAZ. */
    /* 🔴 TARİH + EYLEM TEK SATIR (1.339.0 — kullanıcı: *"tarih aralığı kısmını
       daralt yanına gönder ve whatsapp butonunu sığdır"*). ÖLÇÜLDÜ 390px: süzgeç
       ÜÇ satırdı (tarih 54 + çip 28 + eylem 34 = 128px); şimdi tarih ve eylem
       aynı satırda.
       🔴 "Başlangıç"/"Bitiş" ETİKETLERİ DÜŞER: `type=date` alanı zaten gg.aa.yyyy
          maskesi gösteriyor ve iki alan yan yana olduğunda sıra kendiliğinden
          okunuyor. Etiketler 2×16px dikey yer yiyordu.
       🔴 `font-size: 16px` DEĞİŞMEZ (iOS zoom kalkanı) — küçülen şey YÜKSEKLİK. */
    #rp-kok .rp-filtre { gap: 6px; margin-bottom: 9px; align-items: center; }
    /* 🔴🔴 TARİH ALANI 148px'İN ALTINA İNDİRİLEMEZ — ÖLÇÜLDÜ (1.339.0).
       `input[type=date]` değerini kendi GÖLGE DOM'unda çizer; kutu daraltılınca metni
       KIRPAR ve bunu `scrollWidth` ile BİLDİRMEZ. İlk denemede 94px verilmişti ve
       "taşma yok" görünüyordu; içsel genişlik (`max-content`) ile ölçünce gerçek
       ihtiyaç **148px** çıktı — yani tarih SESSİZCE kesiliyordu.
       (1.335.0'daki `<select>` dersinin aynısı: sığma ölçümü raporlanan taşmaya
        değil, İÇSEL İHTİYACA bakılır.)
       🔴 Bu yüzden "düğmeleri tarihin YANINA koy" isteği 16px zorunluluğu altında
          FİZİKSEL OLARAK MÜMKÜN DEĞİL: 2×148 + 108 = 404px, 320px ekranda 308px var.
          Puntoyu düşürmek iOS'ta sayfayı zoomlar (işlevsel kırılma, yasak).
          ÇÖZÜM: tarihler 1. satırda TAM genişlikte kalır; düğmeler ÇİPLERİN yanına
          (2. satır) alınır — süzgeç 3 satırdan 2'ye iner ve ikisi de kaydırmadan
          görünür. Kesilmiş tarih göstermektense bir satır payı verilir. */
    #rp-kok .rp-tarih { flex: 1 1 calc(50% - 3px); min-width: 0; gap: 2px; }
    #rp-kok .rp-tarih .peron-form-label { display: none; }
    /* 🔴 `min-width: 0` + `width: 100%` ŞART: `input[type=date]` TARAYICI TANIMLI bir
       asgari genişlik taşır (gg.aa.yyyy maskesi + takvim ikonu). Onu serbest bırakmadan
       `flex: 1 1 0` İŞE YARAMAZ — ölçüldü 390px: iki alan 183+183=366px ile satırı
       DOLDURUYOR ve Gönder/WhatsApp alt satıra düşüyordu.
       🔴 `font-size: 16px` DEĞİŞMEZ (iOS zoom kalkanı) — daralan şey KUTU, yazı değil. */
    #rp-kok .rp-filtre .peron-input[type="date"] {
        height: 34px; min-height: 34px; padding: 0 4px; font-size: 16px;
        min-width: 0; width: 100%; box-sizing: border-box;
        border-width: 1px; border-radius: var(--m-r-sm, 6px); }
    /* 🔴 ÇİPLER EN SONA (1.339.0). `flex: 1 1 100%` bir SATIR KIRICIDIR ve DOM'da
       düğmelerden ÖNCE durduğu için Gönder/WhatsApp ÜÇÜNCÜ satıra düşüyordu
       (ölçüldü 390px: süzgeç 3 satır / 107px). `order` ile çipler sona alınınca
       1. satır = tarih + tarih + düğmeler, 2. satır = çipler olur.
       🔴 DOM SIRASI DEĞİŞMİYOR: `order` yalnız bu medya bloğunda geçerlidir, yani
          MASAÜSTÜ DİZİLİMİ AYNEN KALIR. Klavye/ekran okuyucu sırası ile görsel sıra
          telefonda ayrışır; ikisi de AYNI araç çubuğunun denetimleri olduğu için
          kabul edilebilir bir taviz — alternatifi DOM'u değiştirip masaüstünü de
          bozmaktı. */
    #rp-kok .rp-cipler { gap: 6px; flex: 1 1 0; min-width: 0; order: 1;
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; }
    #rp-kok .rp-cip { flex: 0 0 auto; }
    #rp-kok .rp-cipler::-webkit-scrollbar { display: none; }
    /* 🔴 ÇİPLER SIĞMAZSA KENDİ KABINDA KAYAR, satır KIRILMAZ — aksi hâlde
       düğmeler yine alt satıra düşerdi. Gövde asla yatay kaymaz. */
    #rp-kok .rp-cip { position: relative; height: 28px; min-height: 28px;
        padding: 0 9px; font-size: var(--m-fs-xs, 9.5px); line-height: 1;
        border-radius: var(--m-r-sm, 6px); }
    #rp-kok .rp-cip::after { content: ""; position: absolute; inset: -3px 0; }
    /* 🔴 TELEFONDA "Mail şablonu" ve "Yazdır" GİZLENİR (1.335.0 — kullanıcı isteği).
       Yerlerini "Gönder" alır; üç düğme yerine iki düğme kalınca her biri 320px'te
       ~150px'e çıkar ve etiketi kırpılmadan okunur. MASAÜSTÜ (≥641px) DOKUNULMAZ. */
    #rp-kok .rp-e-masaustu { display: none; }
    /* 🔴 `flex: 1 1 100%` KALKTI: o kural düğmeleri KENDİ SATIRINA itiyordu.
       Artık tarih alanlarının yanında durur ve yalnız gereken yeri alır. */
    #rp-kok .rp-eylem { gap: 6px; flex: 0 0 auto; order: 2; }
    /* 🔴 TELEFONDA DÜĞMELER SİMGE (1.339.0 — kullanıcı: *"tarih aralığı kısmını daralt
       yanına gönder ve whatsapp butonunu sığdır"*). ÖLÇÜLDÜ 390px: etiketli hâlde
       "Gönder" 51px kutuda TAŞIYORDU; iki etiketli düğme ~150px yiyor ve geriye kalan
       210px iki tarih alanına (asgari ~120px) YETMİYOR.
       🔴 METİN SİLİNMEZ, yalnız `font-size: 0` ile görünmez olur — DOM'da durduğu için
          ekran okuyucu ve `title` ipucu çalışmaya devam eder. Simge kendi `width`/
          `height` özniteliğini taşıdığı için 0 punto ondan ETKİLENMEZ. */
    #rp-kok .rp-eylem .peron-btn { font-size: 0; }
    #rp-kok .rp-eylem .peron-btn svg { flex: 0 0 auto; }
    #rp-kok .rp-eylem .peron-btn { flex: 1 1 0; min-width: 0;
        height: 34px; min-height: 34px; padding: 0 8px;
        font-size: var(--m-fs-xs, 9.5px); border-radius: var(--m-r-sm, 6px); }
    #rp-kok .rp-eylem .peron-btn svg { width: 13px; height: 13px; }
    /* WhatsApp DOLU logo → aynı kutuda optik olarak küçük kalıyor; bir tık büyür.
       Özgüllük ŞART (bkz. `.pb-wa svg` bloğu): (1,2,1) seçici (0,2,1)'i ezer. */
    #rp-kok .rp-eylem .peron-btn.pb-wa svg { width: 15px; height: 15px; }

    /* ── 4 · SAYI KARTLARI — ALT ALTA DEĞİL, YAN YANA ───────────────────────
       Kullanıcı: "satınalma, gelen siparişler, üretim, parçabaşı hakediş, kasa net
       gibi bilgileri yan yana getir … oran orantı olsun".

       🔴 IZGARA 6 SÜTUN, KUTULAR 2 ve 3 SÜTUN KAPLAR — görünen sonuç 3 + 2'dir.
          Düz `repeat(3,1fr)` denendi ve ÇÜRÜDÜ: 5 kutu 3 sütunda son satırda BOŞ
          bir hücre bırakıyor (hizasız ızgara yasak) ve 84,7px'lik kutuda
          "PARÇABAŞI HAKEDİŞ" (9,5px ile ~117px) iki satıra kırılıp komşularından
          uzun bir kutu üretiyordu. 6'lı ızgarada 4. ve 5. kutu 3 sütun alır:
          etiket 134,5px'e sığar, satır sonu boşluk KALMAZ, oran korunur (2:3).
       ÖLÇÜLDÜ 320px: ızgara alanı 298px, 5×1px boşluk → sütun 48,83px
          → 1-3. kutu 98,7px (içerik 84,7px) · 4-5. kutu 148,5px (içerik 134,5px)
       ÖLÇÜLDÜ 360px: 112,0 / 168,5px   ·   390px: 122,0 / 183,5px

       🔴 SAYI `clamp(14px, 4.6vw, 17px)`: tavan yoğunluk sözleşmesinin
          `--m-fs-lg` (17px) değeridir ve 370px'ten itibaren AYNEN uygulanır
          (17,02px = 4,6vw). 320px'te 14,7px'e iner — çünkü 84,7px'lik kutuda
          17px'lik "9.876,54 ₺" ~85px sürüyor ve `.rp-serit`in `overflow:hidden`i
          son rakamı KESERDİ. Kesilmiş para yalandır; küçülen yazı değildir. */
    #rp-kok .rp-serit { grid-template-columns: repeat(10, minmax(0, 1fr));
        margin-bottom: var(--m-gap-lg, 11px); border-radius: 8px; }
    /* 🔴 BEŞ KUTU TEK SATIR (1.339.0 — kullanıcı: *"satınalma, gelen sipariş,
       üretim, parçabaşı hakediş, kasa kısmını yan yana sığdır"*).
       ÖNCEKİ düzen 6 sütunluk ızgarada 3+2 olarak İKİ SATIRA yayılıyordu
       (ölçüldü 390px: şerit 135px). Beş eşit sütun tek satır ≈ 69px.
       🔴 `minmax(0, 1fr)` ŞART: `1fr` tek başına min-content'e kilitlenir ve
          "Parçabaşı hakediş" etiketi ızgarayı taşırırdı. */
    #rp-kok .rp-serit-kutu { grid-column: span 2; padding: 7px;
        min-width: 0; box-sizing: border-box; }
    #rp-kok .rp-serit-kutu:nth-child(4),
    #rp-kok .rp-serit-kutu:nth-child(5) { grid-column: span 2; }
    /* 🔴 8,5px → 10px (2026-09-03). Kullanıcı: *"her istatistiğin anlaşılır olması
       gerekli"*. 8,5px bir 320px telefonda pratikte okunmuyordu. Mutlak 14px'e
       çıkarmak kutu yüksekliğini iki katına çıkarıp yoğunluğu bozardı (kullanıcının
       1.293.0'daki "raporlar çok büyük, küçült" isteğiyle çelişirdi); ölçülü orta yol
       10px. `--rp-fs-etiket` AYRI bir belirteçtir: `--m-fs-micro` 57 yerde kullanılıyor,
       onu oynatmak mobil ana ekranı ve tabloları da değiştirirdi. */
    #rp-kok, #up-shell, #dr-shell, #sv-shell, #hm-shell { --rp-fs-etiket: 10px; }
    /* 🔴 HARF ARALIĞI 0 (1.339.0): beş kutu tek satıra inince kutu 123 → 73px oldu ve
       ".3px" ile "Satınalma" kutuyu TAŞIRIYORDU (ölçüldü: scrollWidth > clientWidth).
       Aralık sıfırlanınca etiket sığar; punto DEĞİŞMEZ (okunabilirlik korunur). */
    #rp-kok .rp-serit-et { font-size: var(--rp-fs-etiket, 10px); line-height: 1.15;
        letter-spacing: 0; overflow-wrap: anywhere; margin-bottom: 3px;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden; }
    #rp-kok .rp-serit-buyuk { font-size: clamp(14px, 4.6vw, 17px); line-height: 1.15; }
    /* 🔴 ÜRETİM KUTUSU AYRI ÖLÇÜLDÜ: içeriği para değil "takım = modül" ikilisi ve
       `=` işaretinin 2×4px kendi kenar boşluğu var. ÖLÇÜLDÜ 320px (span-2 = 84,7px):
       "1.200 = 4.800" 14,7px'te 95,8px + 8px boşluk = 103,8px → TAŞIYOR. Kısaltma
       burada uygulanamaz (adet zaten tam sayı, "1,2 B takım" saçma olurdu), o yüzden
       taban 12,5px'e (`--m-fs`) inip boşluk 4 → 1px yapıldı: 81,5 + 2 = 83,5px SIĞAR.
       360px'te 93,5/98,0 · 390px'te 101,0/108,0 · 436px'ten sonra tavan 17px. */
    /* 🔴 clamp(12px, 3.9vw, 17px) → clamp(11.5px, 3.4vw, 17px) (1.336.0).
       3. hane bu kutuyu taşırıyordu. ÖLÇÜLDÜ ("573,125 = 4.800"):
         390px (kutu 120px): 132px TAŞIYOR(+12) → 115px SIĞAR(−5)
         320px (kutu  98px): 109px TAŞIYOR(+11) → 100px (+2)
       🔴 320px'te +2 kalıyor ama bu YENİ DEĞİL: eski 2 haneli "573,14" de aynı kutuda
          100px sürüyordu (+2). Yeni ölçekte "573,14" 92px'e inip SIĞIYOR, yani 320px
          eskisinden KÖTÜ değil, iki durumda da daha iyi. Tam çözüm 10,5px isterdi;
          orada sayı, kendi etiketiyle (10px) aynı boya inip hiyerarşiyi yıkardı. */
    /* 🔴 3.4vw → 3.2vw (1.338.0): takım hanesi 4'e çıkınca sayı bir karakter daha
       uzadı. ÖLÇÜLDÜ 390px (kutu 120px): "573,1257" 3.4vw'de 124px TAŞIYOR(+4),
       3.2vw'de 117px SIĞAR. "0,1875" ve "44,5625" ikisinde de sığıyor. */
    #rp-kok .rp-serit-buyuk.rp-ikili { font-size: clamp(11.5px, 3.2vw, 17px); }
    #rp-kok .rp-ikili .rp-esit { margin: 0 1px; }
    #rp-kok .rp-serit-alt { font-size: var(--rp-fs-etiket, 10px); line-height: 1.25;
        margin-top: 2px;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden; }

    /* 🔴 UZUN/KISA PARA — JS iki biçimi de MARKUP'a basar, seçimi CSS yapar.
       Kısa biçim `[hidden]` ile gelir: masaüstünde onu UA sayfası gizler, böylece
       bu dosyanın media query DIŞINDA tek bir kuralı bile olmaz. Yazar kuralı UA
       kuralını her zaman yener → telefonda `display:inline` kazanır.
       Tam değer kutunun `title`ında ve alttaki tablolarda DURUR. */
    #rp-kok .rp-tam { display: none; }
    #rp-kok .rp-kisa[hidden] { display: inline; }

    /* ── 5 · GRAFİK BANDI (Dashboard ile ORTAK sınıflar → `#rp-kok` şart) ────── */
    #rp-kok .rp-nabiz { margin: 0 0 10px; gap: 8px; }
    #rp-kok .pg-kart { padding: 10px 10px 8px; border-radius: 10px; }
    #rp-kok .pg-kart__bas { gap: 8px; margin-bottom: 8px; }
    #rp-kok .pg-kart__ad h4 { font-size: var(--m-fs, 11.5px); }
    #rp-kok .pg-kart__ad span { font-size: var(--m-fs-micro, 9px); line-height: 1.25;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden; }
    #rp-kok .pg-kart__buyuk { font-size: var(--m-fs-lg, 15px); line-height: 1.1; }
    #rp-kok .pg-kart__buyuk em { font-size: var(--m-fs-micro, 9px); margin-top: 2px; }
    #rp-kok .rp-nabiz-alt { font-size: var(--m-fs-micro, 9px); margin-top: 3px; }
    /* Seri çipleri: görsel 28px, dokunma alanı `::after` ile 34px (çip boşluğu 5px
       olduğu için inset dikeyde -3px; yatayda 0 → komşuya taşma yok). */
    #rp-kok .dash-nabiz-cip { gap: 5px; margin: 0 0 8px; }
    #rp-kok .dash-nabiz-b { position: relative; min-height: 28px; padding: 4px 6px;
        font-size: var(--m-fs-xs, 9.5px); border-radius: 7px; }
    #rp-kok .dash-nabiz-b::after { content: ""; position: absolute; inset: -3px 0; }
    #rp-kok .rp-mini-grafik { padding: 9px 9px 2px; }
    #rp-kok .rp-mini-bas { font-size: var(--m-fs-micro, 9px); margin-bottom: 7px; }

    /* ── 6 · PERDE BAŞLIKLARI (01 GİREN / 02 İŞLENEN / 03 ÇIKAN) ────────────
       12551'deki `.rp-perde-ack{font-size:13px}` (0,1,0) burada `#rp-kok` (1,1,0)
       ile geri alınıyor: o kural okunurluk için BÜYÜTÜYORDU, kullanıcı küçültme
       istedi. Metin SİLİNMEDİ — yalnız 13 → 10,5px. */
    #rp-kok .rp-perde { margin: 0 0 4px; }
    #rp-kok .rp-perde-bas { padding: 10px 0 5px; gap: 5px; }
    #rp-kok .rp-perde-no { font-size: var(--m-fs-md, 12.5px); }
    #rp-kok .rp-perde-ad { font-size: var(--m-fs, 11.5px); letter-spacing: .6px; }
    #rp-kok .rp-perde-ack { font-size: var(--m-fs-xs, 9.5px); line-height: 1.35; }
    #rp-kok .rp-perde-ozet { font-size: var(--m-fs-xs, 9.5px); }

    /* ── 7 · KARTLAR + DİPNOTLAR ────────────────────────────────────────────
       Dipnotlar ekranın en büyük dikey tüketicisiydi (13px × 1,65 satır aralığı,
       kart başına 6-11 satır). KIRPILMADI (sessiz kırpma yasak) — 10,5px/1,5'e
       indirildi: aynı metin ~%29 daha az dikey piksel harcıyor. */
    #rp-kok .rp-kart { margin-bottom: 8px; border-radius: 10px; }
    #rp-kok .rp-tek-kolon,
    #rp-kok .rp-ikili-kolon { gap: 8px; }
    #rp-kok .rp-kart-bas { padding: 7px 9px; gap: 5px; }
    #rp-kok .rp-kart-ad { font-size: var(--m-fs, 11.5px); }
    #rp-kok .rp-kart-sag { font-size: var(--m-fs-xs, 9.5px); }
    #rp-kok .rp-dipnot { padding: 6px 9px 8px; font-size: var(--m-fs-xs, 9.5px);
        line-height: 1.5; max-width: none; }
    #rp-kok .rp-uyari-serit,
    #rp-kok .rp-bom-neden { padding: 6px 9px; font-size: var(--m-fs-xs, 9.5px);
        line-height: 1.4; }
    /* 1.440.0 — ürün ağacı özeti telefonda: aynı oranla küçülür (başlık > değer > not). */
    #rp-kok .rp-bom-ozet { padding: 7px 9px; gap: 4px 12px; }
    #rp-kok .rp-bom-ozet-et,
    #rp-kok .rp-bom-ozet-dl dt { font-size: var(--m-fs-micro, 9px); }
    #rp-kok .rp-bom-ozet-deger { font-size: var(--m-fs, 11.5px); }
    #rp-kok .rp-bom-ozet-dl dd { font-size: var(--m-fs-sm, 10.5px); }
    #rp-kok .rp-bom-ozet-not { font-size: var(--m-fs-micro, 9px); line-height: 1.4; }
    #rp-kok .rp-bom-ozet .rp-alt { font-size: var(--m-fs-micro, 9px); }
    #rp-kok .rp-bos-kutu { padding: 9px; font-size: var(--m-fs-sm, 10.5px);
        line-height: 1.5; }
    #rp-kok .rp-sessiz { margin-top: 10px; }

    /* ── 8 · TABLOLAR — hepsi KENDİ KABINDA yatay kayar, sayfa gövdesi ASLA ──
       Karar: TABLO KALIR, tek satır ızgaraya DÖNÜŞMEZ. Gerekçe: dokuz tablonun
       tamamı 3-6 kolonlu ve kolonların hiçbiri türetilebilir değil (tarih · belge
       no · cari · takım · adet · tutar). Izgaraya çevirmek her satırın HTML'ini
       yeniden yazmayı, akordiyonu (`data-rp-govde`) ve `colgroup` oranlarını
       kaybetmeyi gerektirirdi. `.peron-table-wrap` zaten `overflow:auto`.

       🔴 `min-width: max-content` (6164) BU EKRANDA DEVRE DIŞI: `col-ellip`
          hücreleri `nowrap` olduğu için max-content = KIRPILMAMIŞ en uzun cari
          adı → tablo 900-1200px'e fırlıyor ve kullanıcı bitmeyen bir yatay
          kaydırma yapıyordu. Yerine ÖLÇÜLMÜŞ üç kova geldi; `colgroup`taki
          yüzdeler o genişliğe oranlanır, yani oran/orantı colgroup'ta KALIR.
       ÖLÇÜLEN KOVALAR (kap = 320px'te 298px, 390px'te 368px):
         · 360px  varsayılan — Personel · Kasa Hesap · Kasa Cari · Sessiz Kanallar
                  (390px'te KAYMAZ; 320px'te 62px kayar)
         · 460px  `--orta`  — Satınalma. Tarih hücresi "01 Ağu – 05 Ağu" biçiminde
                  ~88px sürüyor; %24 kolon 360px'te 74px veriyordu (kırpardı),
                  460px'te 98px veriyor.
         · 620px  `--gnis`  — Gelen Siparişler (6 kolon) · Üretilen Ürünler
                  (3 sabit px kolon + 2 esnek) · Ürün Ağacı Maliyeti (5-6 kolon,
                  4'ü para) · Faturalı satış listesi (330px sabit kolon).
                  620px'te en dar para kolonu 62px içerik verir → "45.678,90"
                  (10,5px ile ~52px) TAM okunur; 560px'te 3px eksik kalıyordu.
         · 480px  `.rp-ic`  — akordiyon içindeki modül tablosu. Dış tablo 620px
                  olduğu için İKİNCİ bir kaydırma doğmaz (548px kullanılabilir). */
    #rp-kok .rp-t { min-width: 360px; }
    #rp-kok .rp-t--orta { min-width: 460px; }
    #rp-kok .rp-t--gnis { min-width: 620px; }
    #rp-kok .rp-ic { min-width: 480px; }
    #rp-kok .peron-table-wrap { border-radius: 8px; }

    /* Hücre yoğunluğu. `height:auto` ŞART: `--tbl-row-h` satıra ALT SINIR koyuyor
       ve dolgu küçülse bile satır o boya çıkıyordu. */
    #rp-kok .rp-t > thead > tr > th {
        padding: 4px 6px; font-size: var(--m-fs-micro, 9px); letter-spacing: .02em;
        line-height: 1.15; white-space: normal; word-break: break-word; }
    #rp-kok .rp-t > tbody > tr > td,
    #rp-kok .rp-t > tfoot > tr > td {
        padding: 4px 6px; height: auto; line-height: 1.3;
        font-size: var(--m-fs-sm, 10.5px); }
    #rp-kok .rp-t .rp-ad { font-size: var(--m-fs-sm, 10.5px); }
    #rp-kok .rp-t .rp-alt { font-size: var(--m-fs-micro, 9px); }
    /* `--sik` üç yoğun tabloda (siparişler · satınalma · ürün ağacı) masaüstünde
       de zaten küçüktür; telefonda 10,5px'e iner ki para kolonları taşmasın. */
    #rp-kok .rp-t--sik > thead > tr > th { font-size: var(--m-fs-micro, 9px); }
    #rp-kok .rp-t--sik > tbody > tr > td,
    #rp-kok .rp-t--sik > tfoot > tr > td { font-size: var(--m-fs-xs, 9.5px); }
    #rp-kok .rp-t--sik .rp-alt { font-size: var(--m-fs-micro, 9px); }
    /* Sayı kolonu: dolgu 6 → 4px (kolon başına 4px kazanç, tabular hizayı bozmaz). */
    #rp-kok .rp-t > tbody > tr > td.col-num,
    #rp-kok .rp-t > tbody > tr > td.rp-para,
    #rp-kok .rp-t > tfoot > tr > td.col-num,
    #rp-kok .rp-t > tfoot > tr > td.rp-para {
        padding-left: 4px; padding-right: 4px;
        font-variant-numeric: tabular-nums; white-space: nowrap; }
    /* 🔴 `nowrap` TEK BAŞINA KIRPMAZ — komşu hücrenin ÜSTÜNE çizer (dosyanın
       tfoot notunda ölçülmüş tuzak). Tarih/kod hücreleri dar kovada taşarsa
       görünür bir "…" ile kesilsin; SAYI hücreleri bu kurala GİRMEZ (kırpılmış
       rakam yalandır — onlara kova genişliğiyle yer açıldı). */
    #rp-kok .rp-t > tbody > tr > td.col-nowrap {
        overflow: hidden; text-overflow: ellipsis; }
    /* 🔴 ÜÇ HÜCRE GENEL `td` DOLGUSUNUN DIŞINDA KALMALI — yukarıdaki (1,1,3)
       seçici bu üçünün kendi (0,1,0) kurallarını EZERDİ:
       · `.rp-modul-h` akordiyon kabıdır, dolgusu 0'dır (iç tablo tam otursun);
       · `.rp-ac-h` 38px'lik `<col>`a bakar — 6px yan dolgu 34px'lik düğmeye
         26px bırakır ve düğme hücreden TAŞAR. 2px → tam 34px kalır;
       · `.rp-bos` ("kayıt yok") tek satırlık boş durumdur, 4px'te ezik görünür. */
    #rp-kok .rp-t > tbody > tr > td.rp-modul-h { padding: 0; }
    #rp-kok .rp-t > tbody > tr > td.rp-ac-h { padding: 2px; }
    #rp-kok .rp-t > tbody > tr > td.rp-bos { padding: 10px 8px;
        font-size: var(--m-fs-sm, 10.5px); }
    #rp-kok .rp-rozet,
    #rp-kok .rp-durum,
    #rp-kok .rp-tip { font-size: var(--m-fs-micro, 9px); padding: 1px 5px; }
    #rp-kok .rp-etiket-yok { font-size: var(--m-fs-micro, 9px); }
    /* Akordiyon düğmesi: GÖRSEL kutu 34×34, dokunma alanı `::after` ile 44×44
       (yoğunluk sözleşmesi §3). 12554'teki 44×44 görsel kutu satırı 10px
       yükseltiyordu ve `colgroup`taki 38px'lik kolona da sığmıyordu. */
    #rp-kok .rp-ac { position: relative; width: 34px; height: 34px; }
    #rp-kok .rp-ac::after { content: ""; position: absolute; inset: -5px; }

    /* ── 9 · SATIŞ KANALLARI — üç kutu YAN YANA (taban 1 kolondu) ───────────
       ÖLÇÜLDÜ 320px: kap 298px, 2×1px boşluk → kutu 99,3px (içerik 85,3px).
       Tutar `clamp(13px, 4.2vw, 16px)` → 320px'te 13,4px · 381px'ten sonra 16px.
       Para yine uzun/kısa çift biçimle basılıyor (bkz. md.4). */
    #rp-kok .rp-kanallar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #rp-kok .rp-kanal { padding: 7px; min-width: 0; }
    #rp-kok .rp-kanal-ad { font-size: var(--m-fs-micro, 9px); line-height: 1.15;
        margin-bottom: 3px;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden; }
    #rp-kok .rp-kanal-tutar { font-size: clamp(13px, 4.2vw, 16px); line-height: 1.15; }
    #rp-kok .rp-kanal-alt { font-size: var(--m-fs-micro, 9px); line-height: 1.25;
        margin-top: 2px;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden; }

    /* ── 10 · UYARI KUTULARI + "Bu rapor neyi göstermez?" ───────────────────
       🔴 `summary` DOKUNMA HEDEFİ 44px'te BIRAKILDI (12556) — yalnız yazı boyu
          düşürüldü. Katlanan bir denetim, çipten farklı olarak tek hedeftir. */
    #rp-kok .gl-notice { padding: 7px 9px; gap: 7px; margin-bottom: 8px;
        border-radius: 8px; }
    #rp-kok .gl-notice-ico { width: 15px; height: 15px; margin-top: 1px; }
    #rp-kok .gl-notice-ico svg { width: 15px; height: 15px; }
    #rp-kok .gl-notice-title { font-size: var(--m-fs, 11.5px); margin-bottom: 2px; }
    #rp-kok .gl-notice-body { font-size: var(--m-fs-xs, 9.5px); line-height: 1.45;
        max-width: none; }
    #rp-kok .gl-notice-detail ul { font-size: var(--m-fs-xs, 9.5px); line-height: 1.5;
        margin-left: 15px; }
    #rp-kok .rp-kisit { margin: 9px 0 4px; padding: 7px 9px; border-radius: 8px; }
    #rp-kok .rp-kisit summary { font-size: var(--m-fs, 11.5px); }
    #rp-kok .rp-kisit ul { font-size: var(--m-fs-xs, 9.5px); line-height: 1.5;
        margin: 7px 0 0 15px; max-width: none; }

    /* ── 11 · ALT NAVİGASYON PAYI ───────────────────────────────────────────
       🔴 60px + 12px'i BURAYA TAM YAZMAK ÇİFT SAYIM OLURDU: aynı breakpoint'te
          `.peron-content { padding-bottom: 74px !important }` (5081) zaten var ve
          alt çubuk kendi `env(safe-area-inset-bottom)` dolgusunu ekliyor. Bu
          dosyada eksik kalan tek şey güvenli alan + nefes payıydı; toplam
          74px + güvenli alan + 8px = 82px + güvenli alan (gereken 72px + güvenli
          alanın üstünde). `.peron-mob-screen` notu (5119) aynı çift sayımı
          ölçmüş: 154px ölü alan bırakıyordu. */
    #rp-kok { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1.288.0 — MOBİL YAMASI · peron-mod-mobile.js
   İki işlevsel ekleme:
     1) Cari akordiyonunda "Ayrıntılı Ekstre" düğmesi (.pmc-ust / .pmc-eks)
     2) Sipariş Mailleri akordiyonu (.peron-mob-omlbody / .omlb-*)

   🔴 Bu dosya `assets/css/peron-panel.css` DOSYASININ SONUNA eklenir (ana oturum).
      Sonda durması KASITLIDIR: media query özgüllük EKLEMEZ, kaynak sırası kazanır
      ve bu dosya 1.276.x'te yazılmış `.is-oml` kurallarını (özellikle
      `cursor:default` ve `grid-template-columns`) EZMEK zorundadır.
   🔴 Her kural `@media (max-width: 640px)` içindedir → masaüstü dalı BİT BİT AYNI.
      (Her iki ekran da yalnız mobil sayfalardır; yine de kapı kapalı tutulur.)
   🔴 `!important` YOK. Renkler token; ölçüler 1.288.0 ölçek tokenları — token bloğu
      henüz yoksa yedek değer devreye girer, yama tek başına da doğru çalışır.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* ═══ 1 · CARİ → "AYRINTILI EKSTRE" ═══════════════════════════════════════
       Düğme akordiyon gövdesinin İLK satırındadır (meta bilgisinin sağında):
       320×568'de gövde zaten ~495px ve kullanılabilir alan ~342px — dibe konsaydı
       açılışta ekran dışında kalır, kullanıcı varlığını göremezdi. Üstte durunca
       her genişlikte ilk bakışta görünür ve satırın kendi 8px dolgusunu paylaşır. */
    /* 🔴 SAĞDA 6px PAY: simge düğmesinin dokunma alanı (`::after{inset:-6px}`) tam
       6px taşar. Pay olmadan ÖLÇÜLDÜ: `.pmc-ust` scrollWidth > clientWidth
       (320/360/390'da üçü de). Sayfa kaymıyordu (kartın `overflow:hidden`i
       kırpıyor) ama kırpılan bölge HİT-TEST EDİLEMEZ hâle gelir, yani 44px'lik
       hedefin sağ kenarı sessizce ölürdü. Pay hem taşmayı hem ölü kenarı bitirir. */
    .peron-mob-caribody .pmc-ust {
        display: flex;
        align-items: center;
        gap: var(--m-gap, 7px);
        padding: 6px 6px 0 0;
        box-sizing: border-box;
    }
    /* Meta metni baskıyı EMER (ellipsis); düğme sabit kalır — tersi olsaydı uzun
       telefon+VN bilgisi düğmeyi iki satıra kırardı. */
    .peron-mob-caribody .pmc-ust .pmc-meta {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* İKİNCİL SİMGE DÜĞMESİ — 1.288.0 sözleşmesi §3: görsel kutu 32-34px, dokunma
       hedefi `::after` ile ≥40px'e genişletilir.
       🔴 ETİKET KALDIRILDI (kullanıcı: "yazıcı simgesini sütunu genişletmeyecek
          şekilde ... büyüklüğünü de ayarla bozulmasın tablo"). ÖLÇÜLDÜ (320px):
          etiketli hâli 124,2px yiyordu ve meta metnini 148,8px'e sıkıştırıyordu;
          simge kutusu 32px → metne 92px İADE edilir. Ad `aria-label` + `title`de
          yaşar; ekran okuyucu ve uzun basış için bilgi KAYBOLMAZ.
       🔴 Sol kenar şeridi / gradyan YOK; vurgu tek aksan renginin açık dolgusu. */
    .pmc-eks {
        position: relative;                 /* ::after dokunma alanının çapası */
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid var(--pri-strong);
        border-radius: var(--m-r-sm, 6px);
        background: var(--pri-light);
        color: var(--pri-text);
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    /* 🔴 GÖRSEL KUTU 32, DOKUNMA HEDEFİ 44: `inset:-6px` her yönde 6px ekler
       (32+12 = 44). Ölçüde görünmez, parmakta vardır. Komşusu yalnız metin
       olduğu için çakışacak ikinci bir hedef yok. */
    .pmc-eks::after {
        content: '';
        position: absolute;
        inset: -6px;
    }
    .pmc-eks svg { width: 16px; height: 16px; flex-shrink: 0; }
    /* 🔴 `color: #fff` DEĞİL, `var(--pri-on)`: sabit hex gece modunda token
       ezmesini atlar ve projenin "sabit hex yasak" kuralını da ihlal ediyordu
       (regresyon testi yakaladı). `--pri-on` tam bu iş için tanımlı. */
    .pmc-eks:active { background: var(--pri-strong); color: var(--pri-on); }
    .pmc-eks[disabled] { cursor: default; }
    /* Hazırlanırken GENİŞLİK SABİT kalır (eski metin değişimi satırı oynatıyordu);
       yalnız simge soluklaşıp nabız atar. Hareket azaltma tercihinde nabız durur. */
    .pmc-eks.is-mesgul { opacity: .5; }
    .pmc-eks.is-mesgul svg { animation: pmc-eks-nabiz 1.1s ease-in-out infinite; }
    @keyframes pmc-eks-nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
    @media (prefers-reduced-motion: reduce) {
        .pmc-eks.is-mesgul svg { animation: none; }
    }


    /* ═══ 2 · SİPARİŞ MAİLLERİ → AKORDİYON ════════════════════════════════════
       1.276.0'da satır SALT OKUNUR bir kayıt satırıydı (`cursor:default`) ve hiçbir
       dinleyicisi yoktu. Artık `<button>`: dokunma hedefi satırın KENDİSİ. */
    .peron-mob-row.is-oml { cursor: pointer; }

    /* Rozet + ok yan yana. Satırın 3. ızgara sütununu AÇMAK yerine ok sağ kolonun
       İÇİNE alındı: ≤359px'te `.is-oml` tek sütuna düşüyor ve üçüncü çocuk orada
       kendi satırına kayardı. Bu kurgu her genişlikte tek yapıyla çalışır. */
    .peron-mob-row.is-oml .peron-mob-row-side {
        flex-direction: row;
        align-items: center;
        column-gap: var(--m-gap-sm, 5px);
    }
    /* ≤359px'te satır TEK SÜTUNA düşer (1.276.1 kuralı) ve sağ blok metnin ALTINA
       geçer. Ölçüldü (320px): varsayılan `flex-start` ile ok rozetin hemen sağında,
       x=90,7'de yalnız kalıyordu — satırın sağ ucunda değil. Rozet metinle aynı
       x'ten başlar (hizalama kuralı), ok sağ uca itilir. */
    @media (max-width: 359px) {
        .peron-mob-row.is-oml .peron-mob-row-side {
            width: 100%;
            justify-content: space-between;
        }
    }

    /* Gövde — satırın KARDEŞİ, `.peron-mob-card` çerçevesinin İÇİNDE (açılan kayıt
       çerçeveden taşmasın; kalem çerçevesi kuralının aynısı). */
    .peron-mob-omlbody {
        padding: 0 var(--m-pad-x, 9px) var(--m-pad-y, 7px);
        background: var(--pri-light);
        box-sizing: border-box;
    }
    .peron-mob-omlbody[hidden] { display: none; }

    /* Başlık alanları: her biri TEK satır + ellipsis. Sarmalanan konu satırı
       gövdenin yüksekliğini öngörülemez yapardı (mail zaten altta tam olarak var). */
    .omlb-bilgi {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: var(--m-gap-sm, 5px) 0 var(--m-gap, 7px);
        box-sizing: border-box;
    }
    .omlb-s {
        min-width: 0;
        font-size: var(--m-fs-xs, 9.5px);
        line-height: 14px;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* 🔴 ETİKET `--text-muted` DEĞİL. ÖLÇÜLDÜ: muted, gövdenin `--pri-light` zemini
       üzerinde GECE MODUNDA 4,45:1 veriyordu (AA sınırı 4,5). Hiyerarşi renk
       KOYULUĞUYLA değil, boyut + büyük harf + değerin `--text-primary` olmasıyla
       kuruluyor; iki temada da en düşük oran 5:1'in üstünde. */
    .omlb-s i {
        font-style: normal;
        font-size: var(--m-fs-micro, 9px);
        font-weight: 700;
        letter-spacing: .2px;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-right: 4px;
    }
    .omlb-s b { font-weight: 700; }
    /* Yön/durum RENGİ token'dan: gece modunda kontrast korunur (sabit rgba/hex
       kullanan rozetler 1.282.0'da 1,32:1'e düşmüştü). */
    .omlb-s b.is-okundu   { color: var(--green-ink); }
    .omlb-s b.is-okunmadi { color: var(--text-muted); }

    /* Mail çerçevesi.
       🔴 YÜKSEKLİK SINIRLI: mail 2000px'i bulabilir; sınırsız bırakılsa akordiyon
          listeyi ekrandan tamamen sürerdi. İçerik KENDİ kabında kayar — sayfa
          gövdesi asla kaymaz (yatay kaydırma invariantı da bu kapta korunur).
       🔴 SARMALAYICI + `height:100%` iframe: iframe yüksekliğini yok sayıp içeriğe
          göre büyüyen motorlarda (eski iOS Safari) kap kaydırır; sayana göre
          davranan motorlarda iframe kendi içinde kaydırır. İki motorda da çalışır.
       🔴 `#eef2f6` BİLEREK SABİT: mailin KENDİ tuvali (Peron_Mail::wrap_branded
          içinde bu hex gömülü). Token verilseydi gece modunda çerçevenin zemini
          koyu, içindeki mail açık kalır ve etrafında yanlış bir hale oluşurdu.
          Masaüstü `openMailViewer` de aynı hex'i kullanır — belge rengidir, UI değil. */
    .omlb-kutu {
        height: min(56vh, 460px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--border);
        border-radius: var(--m-r-sm, 6px);
        background: #eef2f6;
        box-sizing: border-box;
    }
    .omlb-frame {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 100%;
        border: 0;
    }

    /* ── SİPARİŞ KALEMLERİ (varsayılan görünüm, 1.288.0) ───────────────────
       Kullanıcı: "mail şablonu gözükmesin, sadece gönderilen siparişlerin adı ve
       miktarı birimi gözüksün". Tasarım sözleşmesi §6 "TEK SATIR" reçetesi:
       ad esner + kırpılır, sayı sağda sabit ve `tabular-nums`. */
    .omlb-baslik {
        font-size: var(--m-fs-micro, 9px);
        font-weight: 800;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: var(--text-secondary);
        padding: 0 0 3px;
    }
    .omlb-liste {
        border: 1px solid var(--border);
        border-radius: var(--m-r-sm, 6px);
        background: var(--card-bg, #fff);
        overflow: hidden;
        box-sizing: border-box;
    }
    .omlb-kalem {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--m-gap-sm, 5px);
        padding: 5px var(--m-pad-x, 9px);
        border-bottom: 1px solid var(--border-light);
        box-sizing: border-box;
    }
    .omlb-kalem:last-child { border-bottom: 0; }
    .omlb-ad {
        min-width: 0;
        font-size: var(--m-fs-sm, 10.5px);
        font-weight: 600;
        line-height: 15px;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .omlb-mik {
        font-size: var(--m-fs-sm, 10.5px);
        font-weight: 800;
        line-height: 15px;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .omlb-mik i {
        font-style: normal;
        font-size: var(--m-fs-micro, 9px);
        font-weight: 600;
        color: var(--text-secondary);
        margin-left: 3px;
    }
    /* Sunucudaki kalem sayısı ile gövdeden okunan sayı çelişirse — sessiz kalma. */
    .omlb-not {
        font-size: var(--m-fs-xs, 9.5px);
        line-height: 14px;
        color: var(--amber-ink);
        padding: 0 0 4px;
    }
    /* Kalem çıkmayan kayıtta gövdenin KENDİ metni — ölçüldü: 54 kaydın kalem
       çıkmayan 7'sinin gövdesi zaten bir açıklama cümlesi (1.276.0 öncesi geri
       doldurulmuş yer tutucular). Genel hata metni o açıklamayı gizlerdi. */
    .omlb-metin {
        font-size: var(--m-fs-xs, 9.5px);
        line-height: 15px;
        color: var(--text-secondary);
        padding: 2px 0 4px;
    }

    /* Kaçış yolu: mailin ORİJİNALİ. Tam genişlik, 40px — ikincil ama bulunabilir. */
    .omlb-tam {
        display: block;
        width: 100%;
        min-height: 40px;
        margin-top: var(--m-gap, 7px);
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px dashed var(--border);
        border-radius: var(--m-r-sm, 6px);
        background: none;
        color: var(--text-secondary);
        font: inherit;
        font-size: var(--m-fs-xs, 9.5px);
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .omlb-tam:active { background: var(--pri-light); color: var(--pri-text); }
    /* İframe artık VARSAYILAN DEĞİL — yalnız "Tam maili aç" ile eklenir. */
    .peron-mob-omlbody .omlb-kutu { margin-top: var(--m-gap, 7px); }

    .omlb-yuk {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 26px 0;
    }
    .omlb-bos {
        padding: 16px 0;
        text-align: center;
        font-size: var(--m-fs-sm, 10.5px);
        color: var(--text-muted);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   1.288.0 — SEVKİYAT PLANI (MOBİL, #msp-screen) · HER KAYIT TAM 2 SATIR
   ──────────────────────────────────────────────────────────────────────────────
   Kullanıcı: "sevkiyat planı ekranı çok ama çok karışık, yine her şey çok büyük;
   sevk planında alt alta satır sayısını 2'ye düşür, tüm bilgileri 2 satıra
   sığdır, yazıları küçült, sevk edilenler birbirinden ayrı olacak şekilde
   belirginleştir veya çizgi ekle."

   🔴 BU BLOK peron-panel.css'in SONUNA EKLENİR. Yukarıdaki #msp-screen kuralları
      (~13891) AYNI özgüllükte; medya sorgusu özgüllük EKLEMEZ, kazandıran şey
      KAYNAK SIRASIDIR. Blok yukarı taşınırsa kuralların yarısı sessizce ölür.
   🔴 EKRAN ZATEN YALNIZ ≤640px'te ÜRETİLİR (peron-app.js `MOBIL_ESIK = 640`,
      `MOBIL_KARSILIK.shipplan = 'shipplan-mobile'`). Blok yine de @media içine
      alındı: masaüstü dalının BİT BİT aynı kaldığı tek bakışta kanıtlanabilsin.
   🔴 `!important` YOK. Özgüllük `#msp-screen` (1,x,y) ile çözülür.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Kabuk: alt navigasyon payı ────────────────────────────────────────────
       🔴 ÇİFT SAYIM YOK. `.peron-content` ≤640px'te `padding-bottom:74px !important`
          veriyor (peron-panel.css:5082) → 60px çubuk + 14px hava ZATEN ödenmiş.
          Ödenmemiş tek şey iPhone güvenli alanı (çubuğun kendi
          `padding-bottom: env(safe-area-inset-bottom)` payı). Buraya sözleşmedeki
          `calc(60px + env(...) + 12px)` değerini OLDUĞU GİBİ yazmak 74+72 = 146px
          ölü alan bırakırdı — `.peron-mob-screen` yorumunda ölçülmüş (~154px) ve
          bilerek iptal edilmiş hatanın aynısı. Etkin pay: 74 + 8 + güvenli alan. */
    #msp-screen { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }

    /* ── Sekme çubuğu: 44px → 28px kutu, 44px DOKUNMA HEDEFİ korunur ──────────
       Kullanıcı "büyük filtreler asla olmasın" dedi. Görsel kutu küçülür, hedef
       `::after` ile 28+8+8 = 44px'te kalır (dosyanın kendi .peron-mob-seg-btn
       deseni; `overflow: visible` taban kuralda zaten açık, yoksa genişletme
       kırpılır ve hedef ÖLÜR). */
    #msp-screen .peron-mob-seg { margin-top: 5px; margin-bottom: 5px; gap: 11px; }
    #msp-screen .peron-mob-seg-btn {
        min-height: 28px; padding: 0 1px 4px; font-size: var(--m-fs-xs);
    }
    #msp-screen .peron-mob-seg-btn::after { inset: -8px 0; }
    #msp-screen .msp-say {
        margin-left: 4px; padding: 0 5px;
        font-size: var(--m-fs-micro); line-height: 14px;
    }

    /* ── Arama kutusu: 46px → 36px. FONT 16px KALIR (iOS zoom kapısı). ───────── */
    #msp-screen .peron-mob-find {
        height: 36px; padding: 0 8px; gap: 6px;
        border-width: 1px; border-radius: var(--m-r-sm);
    }
    #msp-screen .peron-mob-find > svg { width: 15px; height: 15px; }
    #msp-screen .peron-mob-find input::placeholder { font-size: var(--m-fs); }
    /* Temizle düğmesi: görsel 26px, hedef ::after ile 42px (komşusu yalnız input). */
    #msp-screen .peron-mob-find-x { position: relative; width: 26px; height: 26px; }
    #msp-screen .peron-mob-find-x::after { content: ''; position: absolute; inset: -8px; }
    #msp-screen .peron-mob-find-x svg { width: 13px; height: 13px; }
    #msp-screen .peron-mob-sticky { padding-bottom: 4px; margin-bottom: 0; }

    /* ── BÖLÜM AYRACI — "sevk edilenler birbirinden ayrı olsun" ────────────────
       🔴 SEÇİM: sevk edilmiş kayıtlar listenin SONUNDA kendi başlığı altında
          toplanır ("Sevk Edildi · N") + ayrı zemin + 2px kalın ayraç. Gerekçe:
          (a) sevkiyatçının sorusu "bugün NE ÇIKACAK" — biten iş listenin başında
          yer kaplamamalı; (b) satır satır serpiştirilmiş "sevk edildi" rozetleri
          arasına ayraç koymak, karışık listede her iki satırda bir çizgi demekti
          (gürültü); (c) hiçbir satır GİZLENMEZ — bu bir SIRALAMA, süzgeç değil,
          yani sayfalanan listeyi istemcide süzme yasağına girmez. */
    #msp-screen .msp-sec {
        display: flex; align-items: center; gap: var(--m-gap-sm);
        box-sizing: border-box;
        margin: var(--m-gap) 0 0; padding: 5px var(--m-pad-x) 4px;
        border-top: 2px solid var(--border);
        font-size: var(--m-fs-micro); font-weight: 800; letter-spacing: .06em;
        text-transform: uppercase; color: var(--text-muted);
    }
    #msp-screen .msp-sec:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
    #msp-screen .msp-sec i {
        font-style: normal; padding: 0 5px; border-radius: 999px;
        background: var(--border-light); color: var(--text-secondary);
        font-variant-numeric: tabular-nums; letter-spacing: 0;
    }
    #msp-screen .msp-sec.is-sevk    { border-top-color: var(--st-ship-bd); color: var(--st-ship-fg); }
    #msp-screen .msp-sec.is-sevk i  { background: var(--st-ship-bg); color: var(--st-ship-fg); }

    /* ── KAYIT — TAM 2 SATIR ──────────────────────────────────────────────────
       Ölçülen yükseklik: 6+16+1+14+6 = 43px (≥40px satır-hedefi kuralı ✓).
       Eski düzen 4 blok + sarabilen çip şeridiydi (ölçülen 98-124px). */
    #msp-screen .msp-row {
        box-sizing: border-box; position: relative;
        display: block; width: 100%; max-width: 100%;
        padding: 6px var(--m-pad-x);
        border-bottom: 1px solid var(--border-light);
        cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    #msp-screen .msp-row:focus-visible { outline: 2px solid var(--pri-strong); outline-offset: -2px; }
    #msp-screen .msp-row:active { background: var(--pri-light); }

    /* 1. satır — ürün/takım adı + miktar */
    #msp-screen .msp-l1 { display: flex; align-items: baseline; gap: var(--m-gap-sm); min-width: 0; }
    #msp-screen .msp-urun {
        flex: 1 1 auto; min-width: 0;
        font-size: var(--m-fs); font-weight: 700; line-height: 1.28;
        color: var(--text-primary);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #msp-screen .msp-mik {
        flex: 0 0 auto;
        font-size: var(--m-fs); font-weight: 800; line-height: 1.28;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    #msp-screen .msp-mik i {
        font-style: normal; margin-left: 2px;
        font-size: var(--m-fs-micro); font-weight: 700; color: var(--text-muted);
    }

    /* 2. satır — cari · müşteri · sipariş no · gün/durum rozeti */
    #msp-screen .msp-l2 {
        display: flex; align-items: center; gap: var(--m-gap-xs);
        margin-top: 1px; min-width: 0;
    }
    #msp-screen .msp-who {
        flex: 1 1 auto; min-width: 0;
        font-size: var(--m-fs-xs); line-height: 1.35; color: var(--text-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #msp-screen .msp-who b { font-weight: 700; color: var(--text-secondary); }
    #msp-screen .msp-no {
        flex: 0 1 auto; min-width: 0; max-width: 36%;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: var(--m-fs-micro); font-weight: 700; color: var(--pri-text);
        font-variant-numeric: tabular-nums;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #msp-screen .msp-gun {
        flex: 0 0 auto; padding: 1px 6px; border-radius: 999px;
        border: 1px solid var(--st-wait-bd); background: var(--st-wait-bg);
        font-size: var(--m-fs-micro); font-weight: 800; line-height: 1.45;
        color: var(--st-wait-fg);
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    /* 🔴 RENK KODLAMA — `--st-*` üçlüsü TEK KAYNAK (bg/fg/bd birlikte alınır).
       Sabit rgba/hex YAZILMADI: gece modu bu tokenları ezerek çalışır, sabit
       değer gece modunda kontrastı düşürür (Risk Tablosu'nda 1,32:1 ölçülmüştü). */
    #msp-screen .msp-row.is-bugun    .msp-gun { border-color: var(--st-pack-bd); background: var(--st-pack-bg); color: var(--st-pack-fg); }
    #msp-screen .msp-row.is-yarin    .msp-gun { border-color: var(--st-cut-bd);  background: var(--st-cut-bg);  color: var(--st-cut-fg);  }
    #msp-screen .msp-row.is-gecikti  .msp-gun { border-color: var(--st-canc-bd); background: var(--st-canc-bg); color: var(--st-canc-fg); }
    #msp-screen .msp-row.is-sevk     .msp-gun { border-color: var(--st-ship-bd); background: var(--card-bg);    color: var(--st-ship-fg); }
    #msp-screen .msp-row.is-tarihsiz .msp-gun { border-style: dashed; }

    /* Sevk edilmiş satır: ayrı zemin + üstünde 2px'lik bölüm ayracı. */
    #msp-screen .msp-row.is-sevk {
        background: var(--st-ship-bg);
        border-bottom-color: var(--st-ship-bd);
    }
    /* 🔴 SOLUKLAŞTIRMA İPTAL. Eski kural (13925) sevk edilmiş satırın ürün ve cari
       metnini `--text-muted`a düşürüyordu; #dceef2 zemininde 4,59:1'e iner ve
       sevk edilenler "silinmiş" gibi okunur. Kullanıcı belirginleştirilmesini
       istedi, soluklaştırılmasını değil → metin --text-primary/--text-secondary. */
    #msp-screen .msp-row.is-sevk .msp-urun,
    #msp-screen .msp-row.is-sevk .msp-cari { color: var(--text-primary); }
    #msp-screen .msp-row.is-sevk .msp-who  { color: var(--text-secondary); }
    #msp-screen .msp-row.is-sevk .msp-who b { color: var(--text-primary); }
    #msp-screen .msp-row.is-sevk .msp-no   { color: var(--st-ship-fg); }

    /* Aç/kapa oku — 2 satıra sığmayan alanlar dokununca açılan detayda. */
    #msp-screen .msp-chev {
        flex: 0 0 auto; width: 11px; height: 11px; color: var(--text-muted);
        transition: transform .15s ease;
    }
    #msp-screen .msp-row.is-open .msp-chev { transform: rotate(180deg); }

    /* ── DETAY (dokununca) — 2 satıra sığmayan alanlar burada, KAYIP YOK ─────── */
    #msp-screen .msp-det { display: none; }
    #msp-screen .msp-row.is-open .msp-det {
        display: grid; grid-template-columns: 58px minmax(0, 1fr);
        gap: 2px var(--m-gap-sm);
        margin: 5px 0 1px; padding-top: 5px;
        border-top: 1px dashed var(--border);
    }
    #msp-screen .msp-det dt {
        font-size: var(--m-fs-micro); font-weight: 800; letter-spacing: .02em;
        text-transform: uppercase; color: var(--text-muted); line-height: 1.4;
    }
    #msp-screen .msp-det dd {
        margin: 0; min-width: 0;
        font-size: var(--m-fs-xs); line-height: 1.4; color: var(--text-primary);
        overflow-wrap: anywhere;
    }

    /* Boş durum / kırpma notu */
    #msp-screen .peron-mob-empty { padding: 20px 12px; font-size: var(--m-fs-xs); line-height: 1.5; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RAPORLAR — SESSİZ TAZELEME GÖSTERGESİ (1.293.0)
   ──────────────────────────────────────────────────────────────────────────────
   Kullanıcı kuralı (birebir): "tarih değiştirince veya gün değiştirince sayfa
   yenilemesi yapıyor bunu asla istemiyorum … sessiz yenileme olmalı".

   Üç rapor sekmesi de artık yalnız GÖVDESİNİ değiştiriyor (`#rp-govde`,
   `#up-govde`, `#dr-govde`); kabuk DOM'da kalıyor, `.peron-page-enter` yeniden
   tetiklenmiyor. Geriye tek soru kalıyor: "istek yolda" bilgisi nasıl verilir?

   🔴 SPINNER YASAK: spinner basmak gövdeyi silmek demektir ve kullanıcı yine
      "sayfa yenilendi" görür. Onun yerine kabuğun ÜSTÜNDE 2px'lik bir şerit
      koşar — düzeni bir piksel bile kaydırmaz (`position:absolute`, kabuk
      `position:relative`), veri ekranda KALIR.
   🔴 ESKİ VERİ SOLUKLAŞIR (opacity .55) — "bu sayı henüz yenilenmedi" bilgisi
      görsel olarak verilir ama okunur kalır. `pointer-events:none` yok: kullanıcı
      bekleme sırasında da eski tabloyu kaydırabilir.
   🔴 `prefers-reduced-motion` uyumu: animasyonu kapatanlarda şerit SABİT durur
      (görünür kalır, koşmaz) — bilgi kaybolmaz.
   ══════════════════════════════════════════════════════════════════════════════ */
/* 🔴 1.312.0 — `#sv-shell` BURAYA HİÇ EKLENMEMİŞTİ: Sevkiyat sekmesinde JS
   `rp-bekliyor` sınıfını ekliyor ama CSS karşılığı olmadığı için sessiz yenileme
   göstergesi HİÇ ÇİZİLMİYORDU (mevcut regresyon, bu turda onarıldı). */
#rp-kok, #up-shell, #dr-shell, #sv-shell, #hm-shell { position: relative; }

#rp-kok.rp-bekliyor::before,
#up-shell.rp-bekliyor::before,
#dr-shell.rp-bekliyor::before,
#sv-shell.rp-bekliyor::before,
#hm-shell.rp-bekliyor::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%, var(--pri) 35%, var(--pri) 65%, transparent 100%);
    background-size: 240% 100%;
    animation: rp-serit-kos 1.1s linear infinite;
    z-index: 3; pointer-events: none;
}
@keyframes rp-serit-kos {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}

#rp-kok.rp-bekliyor #rp-govde,
#up-shell.rp-bekliyor #up-govde,
#dr-shell.rp-bekliyor #dr-govde,
#sv-shell.rp-bekliyor #sv-govde,
#hm-shell.rp-bekliyor #hm-govde {
    opacity: .55;
    transition: opacity .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    #rp-kok.rp-bekliyor::before,
    #up-shell.rp-bekliyor::before,
    #dr-shell.rp-bekliyor::before,
    #sv-shell.rp-bekliyor::before,
    #hm-shell.rp-bekliyor::before { animation: none; background-position: 50% 0; }
    #rp-kok.rp-bekliyor #rp-govde,
    #up-shell.rp-bekliyor #up-govde,
    #dr-shell.rp-bekliyor #dr-govde,
    #sv-shell.rp-bekliyor #sv-govde,
    #hm-shell.rp-bekliyor #hm-govde { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HESAP EKSTRESİ — "HANGİ KASA/BANKA HESABI" (1.293.0)
   ──────────────────────────────────────────────────────────────────────────────
   Kullanıcı isteği (birebir): "cariye kasadan ödeme girildiğinde hangi kasadan
   ödeme girildiği belirtilmiyor, sadece 'kaynak' kasa yazıyor bunu düzelt hangi
   kasa hesabından ödeme girişi olduğu gözüksün".

   🔴 ROZET DEĞİŞMEZ, ALTINA SATIR EKLENİR. Rozetin metnini hesap adıyla
      değiştirmek satırın TÜRÜNÜ (kasa mı, fatura mı, çek mi) okunamaz yapardı;
      ekstre okuyan kişi önce türü, sonra ayrıntıyı arar.
   🔴 TAM AD `title`DA DURUR: hücre 132px ve uzun hesap adları ("Ziraat Bankası
      TL Ticari") kırpılır — kırpılan metin ELLIPSIS ile GÖRÜNÜR biçimde kesilir,
      sessizce taşmaz (nowrap tek başına komşu hücrenin üstüne çizerdi).
   ══════════════════════════════════════════════════════════════════════════════ */
/* 🔴🔴 1.347.0'DA İKİNCİ SATIR KALKTI, BİLGİ KALKMADI. Tablo 13 kolona çıkıp "her kayıt
   TEK satır" kuralına geçince `display:block` hesap adı kasa satırlarını iki kat
   yükseltiyor ve düzeni tek başına bozuyordu. Hesap adı artık rozetin YANINDA, aynı
   satırda durur; sığmazsa üç noktaya düşer ve TAM ADI hücrenin `title`ında okunur
   (istemci `title`ı "Kasa: Ziraat Bankası TL Ticari" biçiminde zaten yazıyor).
   🔴 ROZET HÂLÂ ÖNCE GELİR: ekstre okuyan kişi önce satırın TÜRÜNÜ arar. */
/* 🔴 KAYNAK ROZETİ EKSTREDE YARDIMCI PUNTODADIR (1.348.0 — tasarım ölçümü). Genel
   `.peron-badge` 11px/9px dolgu ile "Stok Hareketi" 98,6px, "Üretim Siparişi" 101,4px
   kaplıyordu; ≤1200 kademesinde hücre iç alanı 94-96px → rozet üç nokta bile vermeden
   KESİLİYORDU (inline-flex; ölçüldü 1024px: 7px, 390px: 21px taşma). Kullanıcı: *"Kaynak
   kısmını biraz genişlet, ekrana sığdır."* Punto tarih/kod/birim ile aynı yardımcı
   kademeye (9,5px) çekildi, dolgu daraltıldı — hiyerarşi bozulmaz, kolon büyütülmez. */
.peron-layout .peron-table.ek-t > tbody > tr > td.ek-ref .peron-badge {
    font-size: 9.5px;
    padding: 2px 6px;
    gap: 3px;
}
.peron-layout .peron-table.ek-t > tbody > tr > td.ek-ref .ek-kasa {
    display: inline;
    margin-left: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-secondary);
}
.peron-layout .peron-table.ek-t > tbody > tr > td.ek-ref .ek-kasa::before { content: '· '; }

/* 🔴 AKORDİYON GÖVDESİ TEK SATIR KURALININ DIŞINDADIR. Sevk kırılımı kendi tablosunu
   ve özet listesini taşır; `nowrap` + `overflow:hidden` oraya sızsaydı modül adları
   kırpılır ve özet tablosu görünmez olurdu. */
.peron-layout .peron-table.ek-t > tbody > tr.ek-det-row > td {
    white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top;
}
/* Boş durum / spinner / hata satırı da sarabilmeli (tam genişlik, metin bloğu). */
.peron-layout .peron-table.ek-t > tbody > tr > td[colspan="13"]:not(.ek-det-cell) {
    white-space: normal; overflow: visible; text-overflow: clip;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BELGE GÖRÜNTÜLEYİCİ + WHATSAPP DÜĞMESİ (1.293.0)
   ──────────────────────────────────────────────────────────────────────────────
   Kullanıcı: "mobildeki pdf ve excel indirmelerin hiçbiri çalışmıyor daha doğrusu
   indirmiyor açılıyor ama indirmiyor, EKRANDA BÜYÜMÜYOR."

   🔴 "Ekranda büyümüyor" çünkü belge EKRANDA DEĞİLDİ: `A.printHTML` onu
      `left:-10000px; opacity:0` bir çerçeveye yazıyor. Telefonda artık GERÇEKTEN
      gösteriliyor — tam ekran katman, A4 genişliğinde dizilip ekrana ölçeklenen
      çerçeve, iki parmakla büyütme serbest.
   🔴 MASAÜSTÜ ETKİLENMEZ: bu katman yalnız `A.Belge.mobilMi()` doğruyken kurulur
      (`max-width:900px` VEYA `pointer:coarse`); geniş ekranda hiç DOM'a girmez,
      dolayısıyla aşağıdaki kuralların hiçbirinin uygulanacağı bir düğüm olmaz.
   ══════════════════════════════════════════════════════════════════════════════ */
body.pb-kilit { overflow: hidden; }

.pb-kat {
    position: fixed; inset: 0; z-index: 9800;
    display: flex; flex-direction: column;
    background: var(--content-bg, #eef2f6);
    box-sizing: border-box;
}
.pb-ust {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--pri-strong, #12314f); color: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
    /* Çentikli telefonlarda üst çubuk çentiğin altında kalsın. */
    padding-top: max(8px, env(safe-area-inset-top));
}
.pb-ust-ad {
    flex: 1 1 auto; min-width: 0;
    font-size: 13px; font-weight: 700; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 🔴 44×44 DOKUNMA HEDEFİ (mobil sözleşmesi) — komşular arası 8px boşluk `gap`ten. */
.pb-ust-b {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .14); color: #fff;
    cursor: pointer; padding: 0;
}
.pb-ust-b:active { background: rgba(255, 255, 255, .26); }
.pb-ust-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pb-ust-b svg { width: 18px; height: 18px; }
/* WhatsApp DOLU logo, çizgisel komşularıyla (yazıcı/kapat) aynı kutuda optik olarak
   küçük kalır — 21px ile etkin camı 18px'e oturur. Dokunma hedefi 44×44 DEĞİŞMEZ.
   🔴🔴 İKON BEYAZ KALIR, MARKA YEŞİLİ DEĞİL — ÖLÇÜLDÜ. Üst çubuk `--pri` (#3f74a8,
      ORTA parlaklıkta mavi) ve marka yeşili (#25d366) de orta parlaklıkta: bileşik
      kontrast 1,90:1 çıktı; WCAG 1.4.11 ikon-only bir denetim için 3:1 ister.
      Yanındaki beyaz ikonlar aynı zeminde 4,91:1. Yeşili KOYULAŞTIRMAK da çare
      değil (mavi zemine YAKLAŞIR, oran 1,17'ye düşer) — orta parlaklıkta bir
      zeminde geçen tek yön BEYAZ'dır. Marka rengi, açık zeminli düğmelerde
      (`.pb-wa`) zaten kullanılıyor. */
.pb-ust-b.pb-wa2 svg { width: 21px; height: 21px; }

.pb-govde {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 6px 14px;
    /* 🔴 Sayfa GÖVDESİ değil, BU KAP kayar; belge kendi kabında büyür. */
}
.pb-cerceve {
    display: block;
    border: 0;
    background: var(--card-bg);
    box-shadow: 0 2px 14px rgba(20, 40, 65, .16);
    transform-origin: top left;
    /* Genişlik/yükseklik/ölçek JS'te ölçülerek verilir (A4 + scale). */
}
.pb-ipucu {
    flex: 0 0 auto;
    padding: 7px 12px;
    padding-bottom: max(7px, env(safe-area-inset-bottom));
    font-size: 11px; line-height: 1.4; text-align: center;
    color: var(--text-secondary, #5b6b7d);
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border, #cdd8e3);
}

/* WhatsApp düğmesi — markanın yeşili yalnız İKONDA; düğme kabuğu diğer
   çıktı düğmeleriyle AYNI (ghost) kalır ki araç çubuğunun ritmi bozulmasın.

   🔴 İKON KOMŞULARINDAN BÜYÜK OLMALI (1.306.0) — kullanıcı: "butonu da büyüt biraz
      oran orantılı olsun diğer simgelerle". Ölçülen sebep: bütün düğme ikonları
      13px kutuda basılıyor (`.peron-btn svg`), ama WhatsApp logosu DOLU bir
      yuvarlaktır ve yolu 24'lük görünüm kutusunun yalnız 2→22 aralığını kaplar
      (%83); `printer`/`download` gibi ÇİZGİSEL ikonlar kutuyu tam doldurur.
      Aynı kutuda WhatsApp optik olarak ~%17 küçük görünüyordu.
      16px → etkin cam ≈ 13,3px = komşularla EŞİT; 17px → ≈14,1px = "bir tık büyük".
   🔴 SATIR YÜKSEKLİĞİ DEĞİŞMEZ: 17px ikon 30px'lik `sm` düğmenin içinde rahat
      durur (2×6px dolgu + 17 = 29 < 30), yani araç çubuğu satırı kaymaz. */
/* 🔴🔴 YEŞİL KOYU TON (#128c4a), PARLAK MARKA YEŞİLİ (#25d366) DEĞİL — ÖLÇÜLDÜ.
   Parlak yeşil beyaza yakın parlaklıktadır: açık temada kart zemini üzerinde
   kontrast 1,73:1 çıkıyordu; WCAG 1.4.11 ikon-only bir denetim için 3:1 ister ve
   ≤640px'te bu düğmenin metni GİZLENİR (`.rp-e-uzun`), yani ikon tek başına
   anlam taşır. #128c4a açık temada 4,4:1, koyu temada 3,6:1 verir — TEK renk her
   iki temayı da geçer, tema başına ayrı token gerekmez. */
.peron-btn.pb-wa svg { color: #128c4a; width: 17px; height: 17px; }
.peron-btn.pb-wa:hover svg { color: #0f7a41; }
/* Ghost kabukta çok soluk kalmasın: yeşile çalan ince bir zemin — komşularla aynı
   yükseklikte kalır, yalnız düğmenin "gönder" işi olduğu okunur. */
.peron-btn.pb-wa { background: rgba(37, 211, 102, .08); border-color: transparent; }
.peron-btn.pb-wa:hover { background: rgba(37, 211, 102, .16); }
.peron-btn.pb-wa:focus-visible { outline: 2px solid #1eb955; outline-offset: 2px; }

/* ============================================================
   TOPLU TEDARİKÇİ DEĞİŞTİR MODALI  (#bs-kok)
   ------------------------------------------------------------
   🔴 NEDEN AYRI BLOK: markup satır-içi stille yazılınca dar ekran için
      @media yazılamıyordu. ÖLÇÜLDÜ (tasarım denetimi, gerçek CSS + diş testi):
      320px'te tablo scrollWidth 556px / kutu clientWidth 249px → "Durum"
      kolonu tamamen ekran DIŞINDA kalıyordu; sağa kayınca bu kez seçim
      kutusu kayboluyordu. Kök neden: `Mevcut tedarikçi` hücresinde
      `white-space:nowrap` var, `max-width` YOK — uzun cari adı tek başına
      325px'lik kolon açıyordu.
   🔴 ÇÖZÜM YATAY KAYDIRMA DEĞİL, DÜZEN DEĞİŞİMİ: ≤560px'te tedarikçi ve
      durum kolonları GİZLENİR ve ürün adının altına ikinci satır olarak
      iner (`.bs-alt`). Böylece 320px'te bile seçim kutusu + ürün + mevcut
      tedarikçi + durum AYNI ANDA görünür ve yatay kaydırma HİÇ oluşmaz.
   ============================================================ */
#bs-kok {
    /* 🔴 KONTRAST TOKEN'LARI ÖLÇÜLEREK SEÇİLDİ (tarayıcıda gerçek blend hesabı).
       `--rose` (#c2545a) açık temada 4,13:1 → AA ALTI. `--rose-ink` 5,07:1 ✓.
       KOYU TEMADA İKİ AYRI ZEMİN VAR ve ikisi de tutmalı:
         · `data-peron-theme="dark"` kartı  #18212e → satır tinti sonrası rgb(36,39,47)
         · JS boot ÖNCESİ FOUC yolu (`html:not([data-peron-theme])`) kartı #273341
           → rgb(50,56,64), yani DAHA AÇIK ve kontrastı DÜŞÜREN zemin.
       Token'lar açık olanı da geçecek şekilde seçildi:
         #e88f95 → 4,93:1 (FOUC) / 6,22:1 (dark)   · #eda868 → 5,66:1 / 7,16:1 */
    --bs-ted-renk:   var(--rose-ink);
    --bs-uyari-renk: var(--amber-ink);
}
html[data-peron-theme="dark"] #bs-kok { --bs-ted-renk: #e88f95; --bs-uyari-renk: #eda868; }
@media (prefers-color-scheme: dark) {
    html:not([data-peron-theme]) #bs-kok { --bs-ted-renk: #e88f95; --bs-uyari-renk: #eda868; }
}

#bs-kok .bs-hata      { display: none; color: var(--rose-ink); font-size: 13px; margin-bottom: 10px; }
#bs-kok .bs-aciklama  { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
#bs-kok .bs-uyari {
    font-size: 13px;
    color: var(--bs-uyari-renk);
    background: rgba(190, 116, 56, .10);
    border: 1px solid rgba(190, 116, 56, .28);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
#bs-kok .bs-ozet      { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
#bs-kok .bs-ted-ad    { color: var(--bs-ted-renk); }
#bs-kok .bs-yok       { color: var(--text-muted); }

/* Geniş içerik KENDİ kabında kayar, `body` asla; dikey kaydırma tabandır. */
#bs-kok .bs-tablo-kutu {
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 10px;
}
#bs-kok .bs-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
#bs-kok .bs-tablo thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg-subtle, #f0f4f8);
    padding: 4px 6px;
    text-align: center;   /* 1.381.0: tüm tablo başlıkları ortalı (dosya sonu, tek kural) */
    font-size: 12px;
    white-space: nowrap;
}
#bs-kok .bs-tablo td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
#bs-kok .bs-riskli   { background: rgba(190, 116, 56, .07); }

#bs-kok .bs-c-pick  { width: 48px; text-align: center; padding: 0 !important; }
#bs-kok .bs-c-urun  { min-width: 40%; }
/* 🔴 `nowrap` TEK BAŞINA kolonu sınırsız büyütür — tavan + kırpma ŞART. */
#bs-kok .bs-c-ted   { max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bs-kok .bs-c-durum { white-space: nowrap; width: 1%; }
#bs-kok .bs-urun    { overflow-wrap: anywhere; }
#bs-kok .bs-alt     { display: none; }

/* Dokunma hedefi: görsel kutu 16px kalır, tıklama alanı 44×44. */
#bs-kok .bs-pick-wrap {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    margin: 0; cursor: pointer;
}
#bs-kok .bs-pick-wrap input { width: 16px; height: 16px; accent-color: #2a527a; cursor: pointer; }
#bs-kok .bs-pick-wrap input:disabled { cursor: not-allowed; }
#bs-kok tr:has(.bs-pick:disabled) .bs-c-urun { opacity: .6; }

/* iOS yakınlaştırmasını önlemek için arama kutusu ≥16px + 44px yükseklik. */
#bs-kok .po-ac-input { min-height: 44px; }

@media (max-width: 560px) {
    /* Mobil kural masaüstü 10 puntoyu EZER (CLAUDE.md): 320px'te gövde ≥14px. */
    #bs-kok .bs-tablo,
    #bs-kok .bs-aciklama,
    #bs-kok .bs-uyari,
    #bs-kok .bs-ozet          { font-size: 14px; }
    #bs-kok .peron-form-label { font-size: 14px; }
    #bs-kok .bs-c-ted,
    #bs-kok .bs-c-durum,
    #bs-kok .bs-tablo thead th.bs-c-ted,
    #bs-kok .bs-tablo thead th.bs-c-durum { display: none; }
    /* Kendi `font-size`ı olan başlık hücresi tablo tabanını EZER — ayrıca yükseltilir. */
    #bs-kok .bs-tablo thead th { font-size: 14px; }
    #bs-kok .bs-alt {
        display: block;
        margin-top: 3px;
        font-size: 14px;
        color: var(--text-secondary);
        overflow-wrap: anywhere;
    }
    /* Rozet bir ETİKETTİR, gövde metni değil; yine de panel tabanından (10-11px)
       yükseltilir — 320px'te 11px okunmuyordu. */
    #bs-kok .peron-badge { font-size: 12px; }
    #bs-kok .bs-tablo-kutu { max-height: 52vh; }
    #bs-kok .bs-tablo td   { padding: 6px 6px; }
}

/* 🔴 KONUM KASITLI: bu blok, 'RAPORLAR … MOBİL YOĞUNLUK' ve 'ÜRETİM BÖLÜMÜ
   ÇİPLERİ' bloklarının ÜSTÜNE konur. O iki bloğun testleri (t42/t49) işaretten
   DOSYA SONUNA kadar okuyor; dosya sonuna eklenen her kural onların
   "sabit hex YOK / !important YOK" sözleşmesini ihlal ediyormuş gibi görünüyordu.
   Buradaki ÖLÇÜLMÜŞ kontrast renkleri (#e88f95 / #eda868) o sözleşmenin
   kapsamında DEĞİL. Konum davranışı değiştirmez: `#bs-kok` ID özgüllüğü,
   aşağıdaki sınıf tabanlı genel kurallardan yüksektir. */

/* ══════════════════════════════════════════════════════════════════════════════
   RAPORLAR — ÜRETİM · DETAYLI · SEVKİYAT SEKMELERİ MOBİL YOĞUNLUK (1.293.0)
   ──────────────────────────────────────────────────────────────────────────────
   Kullanıcı isteği (birebir):
     (3) "mobildeki raporlar bölümünde çok büyük düzensizlik var, üretim kısmı
          detaylı kısmında herşey çok büyük yazı puntolarını küçült, üretim
          bölümünde başlangış bitiş fitresi ni küçült yine yan yana olsun,
          altında aşama-personel-cari olsun, altında bugün-dün-son7-bu ay-son 30
          gün, altında süzgeci sıfırla pdf excel, altında işlem-takım-modül-
          personel-hakediş yan yana sıkıştır gereksiz boşlukları sil alt
          kısmındaki tabloları da düzenle"
     (4) "detaylı kısmında üretim gibi olsun tasarımı"
     (7) "bozuk tablo birbirine giriş düzensiz ekranlar tablolar istemiyorum
          gösterişli ve renkli olsun tablolar ve ekranlar"

   1.288.0'daki yoğunluk turu YALNIZ `#rp-kok`u (Günlük Operasyon) kapsıyordu —
   sınıflar `#rp-kok` altına yazılmıştı, bu yüzden Üretim/Detaylı sekmeleri eski
   büyük ölçülerinde kaldı. Bu blok o turu ÜÇ sekmeye daha taşır ve düzeni
   kullanıcının verdiği SIRAYA oturtur.

   🔴 MASAÜSTÜ BİT BİT AYNI: bu bloktaki HER kural tek bir
      `@media (max-width: 640px)` içindedir. >=641px'te hiçbiri uygulanmaz.
      (Yalnız `.rp-e-uzun` / `.rp-e-kisa` çiftinin masaüstü tarafı gerekli değil:
      kısa biçim `[hidden]` ile gelir, onu UA sayfası gizler → media DIŞINA tek
      kural bile yazılmaz. Aynı reçete `.rp-tam`/`.rp-kisa`da ölçülmüştü.)
   🔴 `!important` YOK: özgüllük seçiciyle çözüldü.
   🔴 DOSYA SONUNA GELİR: `@media (min-width: 520px)` (14572) ve `(max-width: 768px)`
      blokları AYNI özgüllükte kurallar taşıyor; media query özgüllük EKLEMEZ,
      kaynak sırası kazanır (MOBİL SON SÖZ kuralı).

   ÖLÇÜLEN GEOMETRİ (`.peron-layout .peron-content` dolgusu <=480px'te 10px,
   481-640px'te 12px):  320px → içerik 300px · 360px → 340px · 390px → 370px
   ══════════════════════════════════════════════════════════════════════════════ */

/* SEVKİYAT sekmesinin İKİ TARİHİ — her genişlikte YAN YANA.
   🔴 Bu kural media query DIŞINDA olmak ZORUNDA: sarmalayıcı çıplak bir <div>
      (blok) ve içindeki `.rp-tarih` sütun-flex; kural olmadan iki tarih 641px
      ÜSTÜNDE ALT ALTA düşüyordu (ÖLÇÜLDÜ 768 ve 1440px: tarihSatir = [1,1]).
      Mobil blok yalnız boşluğu daraltır. */
#sv-shell .rp-tarih-ikili { display: flex; gap: 10px; min-width: 0; flex: 1 1 320px; }
#sv-shell .rp-tarih-ikili > .rp-tarih { flex: 1 1 0; min-width: 0; }
@media (min-width: 520px) {
    #sv-shell .rp-tarih-ikili { flex: 0 0 auto; }
    #sv-shell .rp-tarih-ikili > .rp-tarih { flex: 0 0 160px; }
}

/* Uzun/kısa eylem etiketi — düğme metni MARKUP'ta iki biçimde durur, seçimi CSS
   yapar. `content` kullanılmadı: çevrilemez ve ekran okuyucuya güvenilir ulaşmaz. */
@media (max-width: 640px) {
    .rp-e-uzun { display: none; }
    .rp-e-kisa[hidden] { display: inline; }
}

@media (max-width: 640px) {

    /* ── 1 · SEKME ÇUBUĞU — ARTIK DÖRT SEKME ────────────────────────────────
       1.288.0'da üç sekme vardı ve 11,5px/6px dolgu ölçülmüştü. Dördüncü sekme
       (Sevkiyat) gelince 320px'te sekme başına düşen pay 88 → 70px'e indi.
       ÖLÇÜ: kap 300px − 2×3px dolgu − 3×4px boşluk = 282px → 70,5px/sekme.
       "Sevkiyat" 11px/700 ile ~52px sürüyor; 2×4px dolgu ile 60px → SIĞAR.
       11,5px'te 54,5 + 12 = 66,5px de sığıyordu ama pay 4px'e düşüyordu; 11px
       güvenli paydır ve 8,5px alt sınırının çok üstünde kalır. */
    .rp-sekmeler--m .rp-sekme { padding: 0 4px; font-size: 11px; }

    /* ── 2 · SÜZGEÇ ÇUBUĞU — KULLANICININ VERDİĞİ SIRA ──────────────────────
       satır 1: Başlangıç | Bitiş            (iki eşit sütun)
       satır 2: Aşama | Personel | Cari      (üç eşit sütun)
       satır 3: Bugün · Dün · Son 7 · Bu ay · Son 30
       satır 4: Sıfırla · PDF · WhatsApp · Excel
       DOM sırası zaten buydu; eksik olan sütun genişlikleriydi — `flex: 1 1 150px`
       ile beş alan 300px'lik kapta 150px tabana takılıp ALT ALTA diziliyordu
       (kullanıcının "çok büyük / düzensiz" dediği şey buydu).

       🔴 `font-size: 16px` DEĞİŞMEZ: iOS Safari 16px altındaki alana odaklanınca
          sayfayı zoomlar ve kullanıcı elle geri çıkmak zorunda kalır. Küçülen şey
          YÜKSEKLİK (44 → 34px) ve dolgu.
       🔴 `calc(50% - 3px)` / `calc(33.333% - 4px)`: 6px boşlukla tam 2 ve 3 sütun.
          Yüzde tabanı `flex-basis`tedir, `width` değil — `flex-wrap` doğru sarar. */
    #up-shell .up-filtre,
    #dr-shell .dr-filtre,
    #sv-shell .sv-filtre { gap: 6px; margin-bottom: 9px; }

    /* ═══ ÜRETİM RAPORU — TELEFON YOĞUNLUĞU (1.339.0) ═══════════════════════
       Kullanıcı: *"tarih filtresini de daralt yanına sadece sıfırla butonu ekle,
       diğer pdf whatsapp ve excel kaldır tamamen mobilde ihtiyaç yok bunlara,
       işlemi kaldır, takım, modül, toplam süre, hakediş yan yana olsun"*.
       ÖLÇÜLDÜ 390px (önce): süzgeç 187px/4 satır · şerit 135px/2 satır (6 kutu). */
    #up-shell .rp-e-masaustu,
    #up-shell .up-e-masaustu,
    #up-shell #up-wa { display: none; }
    /* Şerit sütunu ve araç çubuğu düzeni AŞAĞIDA, kendi SAHİP kurallarının yanında
       değiştirildi (aynı medya bloğunda sonradan gelen kurallar burayı eziyordu —
       ölçüldü: `order` uygulanıyor ama `flex`/`grid-template-columns` uygulanmıyordu).
       İkinci bir yol bırakmamak için kopya kurallar kaldırıldı. */

    #up-shell .up-f,
    #dr-shell .dr-f { gap: 2px; min-width: 0; box-sizing: border-box; }
    #up-shell .up-f--tarih,
    #dr-shell .dr-f--tarih { flex: 1 1 calc(50% - 3px); }
    #up-shell .up-f:not(.up-f--tarih),
    #dr-shell .dr-f:not(.dr-f--tarih) { flex: 1 1 calc(33.333% - 4px); }

    /* Sevkiyat sekmesinde seçim alanı yok; iki tarih kendi sarmalayıcısında. */
    #sv-shell .rp-tarih-ikili { display: flex; gap: 6px; flex: 1 1 100%; min-width: 0; }
    #sv-shell .rp-tarih { flex: 1 1 0; min-width: 0; gap: 2px; }

    /* 🔴 ÖLÇÜLDÜ (390px): altı süzgeç alanı tam satır alınca çubuk 570px sürüyordu
       ve kullanıcı veriye inmeden önce bir ekran boyu kaydırıyordu. İki sütun:
       `calc(50% - 3px)` + 6px boşluk = tam iki kolon; üç satırda biter.
       🔴 Arama alanı TAM SATIR kalır — ad/kod yazarken dar kutu okunmaz. */
    #hm-shell .hm-filtre { gap: 6px; margin-bottom: 9px; }
    /* 🔴 ARAMA, KAPSAMIN YERİNE ÇIKAR (1.340.0 — kullanıcı: *"yanina arama
       filtresini ekle"*). Alan zaten vardı ama süzgecin EN ALTINDAYDI; kapsam ve
       tür düşünce sıra [ay|ay] · [kategori] · [ara] olacaktı ve en çok kullanılan
       alan yine en altta kalıyordu. `order` ile ara iki tarihin hemen altına gelir:
       [ay|ay] · [ara] · [kategori].
       🔴 DOM SIRASI DEĞİŞTİRİLMEDİ: masaüstünde `hm-f--ara` `flex: 1 1 180px` ile
          boşluğu emen SON alandır; DOM'da öne alınsaydı boşluk çubuğun ORTASINDA
          açılırdı. Kural yalnız 640px altında yaşar, masaüstü bayt-bayt aynı kalır.
       🔴 ODAK SIRASI: gizli iki alan `display:none` olduğu için sekme sırasından
          ZATEN düşer; geriye kalan dört alanda görsel sıra ile odak sırası tek bir
          komşuluk kayar (ara ↔ kategori). Anlam ve işletilebilirlik korunur.
       🔴 `> *` KURALI ÖNCE YAZILIR: altındaki iki kural onunla AYNI özgüllükte
          (1-1-0); sonra gelen kazanır. Sıra bozulursa `order` sessizce ölür. */
    #hm-shell .hm-filtre > *   { order: 3; }
    #hm-shell .hm-f--ay        { order: 1; }
    #hm-shell .hm-f--ara       { order: 2; }
    #hm-shell .hm-f { gap: 2px; min-width: 0; box-sizing: border-box;
        flex: 1 1 calc(50% - 3px); }
    #hm-shell .hm-f--ara { flex: 1 1 100%; }
    /* 🔴 ÖLÇÜLDÜ (390px): "Hammadde + yarı mamul" 16px yazıda ~175px sürüyor, yarım
       sütuna 165px düşüyor → "…yarı mamu" diye KIRPILIYORDU. Yazıyı küçültmek YASAK
       (16px iOS zoom kalkanı), etiketi kısaltmak anlamı bozar → alan TAM SATIR olur.
       Düzen: [ay|ay] · [kapsam|kategori] · [tür] · [ara] = dört satır. */
    /* 🔴 2026-09-08 — KULLANICI KURALI DEGISTI: "sadece sayfalardaki oran orantiyi
       yakala ve mumkun oldugunda sayfaya yazilari sigdir kucult yani" + "filtreler
       cok kaba". OLCULDU (390x844): hm suzgeci 369px = ekranin %44'u; kullanici
       tek bir malzeme gormeden once yarim ekran suzgec kaydiriyordu.
       `tur` ve `kapsam` TAM SATIRDAN yarim sutuna cekildi; secenek metni yarim
       sutuna sigmadiginda `text-overflow` ile kisalir. Yazi 16px'te KALIR (iOS
       buyutme kalkani) — kucultulen sey ALAN, punto degil. */
    /* 🔴 TÜR ALANI TAM SATIRDA KALIR — ÖLÇÜLDÜ, KARAR BİLİNÇLİ (tasarım denetimi
       bulgusu, 2026-09-08). Buraya bir süre `calc(50% - 3px)` yazılmıştı ama DOM
       sırası (ay·ay·kapsam·kategori·tür·ara) yüzünden GÖRSEL OLARAK ETKİSİZDİ:
       flex sarması ikişerli eşleştiriyor → (ay,ay) · (kapsam,kategori) · (tür TEK).
       Tek kalan öge `flex-grow: 1` ile satırı zaten dolduruyordu; yani kural ÖLÜYDÜ
       ve okuyanı "tür yarım sütun" diye yanıltıyordu.
       🔴 DOM SIRASINI DEĞİŞTİRİP tür'ü kapsamla EŞLEŞTİRMEK ÇÖZÜM DEĞİL: seçili metin
          "Hammadde + yarı mamul" 390px'te 188px sürüyor, yarım sütunun içi ise 184px →
          alan yarıya inseydi metin KIRPILIRDI. `<select>` üzerinde `text-overflow`
          güvenilir çalışmadığı için kırpılma ÜÇ NOKTASIZ olur ve kullanıcı yanlış
          türü okuduğunu ANLAMAZ. Yoğunluk için doğruluk feda edilmez.
       Sonuç: kural ölü olmaktan çıkarılıp NİYETİ yazıyor. Görünen düzen değişmez
       ([ay|ay] · [kapsam|kategori] · [tür] · [ara]); süzgeç 390'da 309px, 320'de 329px. */
    #hm-shell .hm-f--tur { flex: 1 1 100%; }
    /* 🔴 ÖLÇÜLDÜ (390px): "Üretim + depo çıkışı" 142px sürüyor, yarım sütunun iç alanı
       ~120px → son harf kayboluyordu (tasarım denetimi bulgusu). Yazı 16px'te KALIR
       (iOS zoom kalkanı), etiket kısaltılmaz → alan tam satır olur.
       Düzen: [ay|ay] · [kategori] · [kapsam] · [tür] · [ara]. */
    /* 🔴🔴 YARIM SÜTUN DENENDİ VE GERİ ALINDI — SESSİZ KIRPMA ÜRETİYORDU (2026-09-08).
       Kapsam alanını yarım sütuna çekmek onu KATEGORİ ile eşleştiriyor; kategori o ana
       kadar satırda tek olduğu için `flex-grow` ile tam genişlikteydi ve YARIYA İNİYORDU.
       ÖLÇÜLDÜ (390px, tüm seçenekler taranarak — yalnız SEÇİLİ olan değil): yarım sütunun
       içi 152px, kategori adlarının DÖRDÜ taşıyor:
         DÖŞEME YARDIMCI MALZEME 230px · CAM-ÇERÇEVE KAPAK 173px ·
         KASA-AYAK-İSKELET 159px · BOYALI HAMMADDE 155px
       Kategori adı KULLANICI VERİSİDİR, uzunluğu firmadan firmaya değişir; `<select>`
       üzerinde `text-overflow` güvenilir çalışmadığı için kırpma ÜÇ NOKTASIZ olur ve
       kullanıcı yanlış kategoriyi okuduğunu ANLAMAZ.
       🔴 62px'lik yükseklik kazancı, yanlış kategori okunmasına değmez. Süzgeci gerçekten
          küçültmenin doğru yolu KATLANIR (açılır) bir süzgeç panelidir — ayrı bir iş.
       🔴 DERS: bir seçim kutusunun sığıp sığmadığını ölçerken SEÇİLİ seçeneğe bakmak
          yetmez, TÜM seçeneklerin en uzunu ölçülür. Tasarım denetimi bu alanı seçili
          metinle ölçtüğü için temiz gördü; kusur en uzun seçenekte saklıydı. */
    #hm-shell .hm-f--kapsam { flex: 1 1 100%; }

    /* 🔴🔴 KAPSAM ve MALZEME TÜRÜ TELEFONDA DÜŞER — VARSAYILANDAYKEN (1.340.0).
       Kullanıcı: *"kapsam filtresini kaldir varsayilan olarak hepsi secilsin …
       malzeme türünü kaldir varsayilan olarak hepsi olsun"*.
       🔴 GİZLEMEK RAPORUN KAPSAMINI DARALTMAZ: ikisinin de varsayılanı ZATEN EN
          GENİŞ kümedir (kapsam = "Üretim + depo çıkışı", tür = "Hammadde + yarı
          mamul"). Telefonda düşen şey bir VERİ değil, iki tam satırlık ALAN.
          ÖLÇÜLDÜ 390px: ikisi 2×(13 etiket + 34 alan) + 2×6 boşluk = 106px.
       🔴🔴 GİZLEME KOŞULLU — `.hm-f--vars` YOKSA ALAN GÖRÜNÜR KALIR.
          Koşulsuz `display:none` yazılsaydı kullanıcı EKRANDA GÖRMEDİĞİ bir kısıtla
          süzülmüş rapor okuyabilirdi: telefonu yatay tutmak (844px) bu iki süzgeci
          açar, "Yalnız üretim" seçip dikey çevirmek onu GİZLER ve rakamlar sessizce
          düşer. Sapan süzgeç görünür kalır — zorla sıfırlanmaz da: kullanıcının
          seçimini sessizce geri almak, sessizce gizlemek kadar yanlıştır.
          Sınıfı kim yazar: `suzgec()` (ilk çizim) + `varsayilanSenkron()` (sonrası).
       🔴 ÖĞE DOM'DA DURUR: `bagla()` onu buluyor, "Süzgeci sıfırla" değerini geri
          alıyor, masaüstü/yatay ekran AYNI DOM'u kullanıyor. Çizimden çıkarmak
          JS'te bir kırılganlık dalgası açardı (null kontrolü, PDF, sıfırlama). */
    #hm-shell .hm-f--kapsam.hm-f--vars,
    #hm-shell .hm-f--tur.hm-f--vars { display: none; }

    /* 🔴 320px'TE YARIM SÜTUN YETMİYOR — MOBİL DENETİM ÖLÇTÜ (2026-09-08).
       Yarım sütunun iç genişliği 119px; seçili metin ("Üretim + depo çıkışı")
       canvas measureText ile 150px. Fark 31px ve <select> öğesinde text-overflow
       GÜVENİLİR ÇALIŞMAZ (Chrome sessizce keser, üç nokta basmaz) — yani kullanıcı
       metnin kesildiğini ANLAMADAN yanlış kapsamı okuyabilirdi.
       Yoğunluk için doğruluğu feda etmek yasak: 360px altında iki uzun seçim alanı
       TAM SATIRA döner. 360px ve üstünde ölçüm temiz (390'da 152px yer / 150px metin)
       ve yan yana kalır — kullanıcının istediği sıkışma orada korunuyor. */

    /* 🔴 8,5 → 9,5px (1.339.0): kullanıcının MUTLAK TABANI 9px. Süzgeç etiketleri
       ("Başlangıç ayı", "Kapsam") bu tabanın altındaydı — ölçüldü, 390px'te 19 öge.
       Artış 1px ve YALNIZ tabanı karşılamak içindir; etiket hâlâ girdiden (16px)
       ve gövdeden (10,5px) küçüktür, yani hiyerarşi korunur. */
    #up-shell .up-f .peron-form-label,
    #dr-shell .dr-f .peron-form-label,
    #sv-shell .rp-tarih .peron-form-label,
    #hm-shell .hm-f .peron-form-label {
        font-size: var(--m-fs-xs, 9.5px); line-height: 1.2; letter-spacing: .3px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #up-shell .up-filtre .peron-input[type="date"],
    #up-shell .up-filtre .peron-select,
    #dr-shell .dr-filtre .peron-input[type="date"],
    #dr-shell .dr-filtre .peron-select,
    #sv-shell .sv-filtre .peron-input[type="date"],
    #hm-shell .hm-filtre .peron-input,
    #hm-shell .hm-filtre .peron-select {
        height: 34px; min-height: 34px; padding: 0 5px; font-size: 16px;
        border-width: 1px; border-radius: var(--m-r-sm, 6px);
    }

    /* Hazır gün çipleri — görsel kutu 28px, dokunma alanı `::after` ile 34px.
       Satır arası boşluk 6px = 2×3px inset → komşu çipler ÇAKIŞMAZ. */
    #up-shell .up-cipler,
    #dr-shell .dr-cipler,
    #sv-shell .rp-cipler,
    #hm-shell .rp-cipler { gap: 6px; flex: 1 1 100%; }
    #up-shell .rp-cip,
    #dr-shell .rp-cip,
    #sv-shell .rp-cip,
    #hm-shell .rp-cip {
        position: relative; height: 28px; min-height: 28px; padding: 0 9px;
        font-size: var(--m-fs-xs, 9.5px); line-height: 1; border-radius: var(--m-r-sm, 6px);
    }
    #up-shell .rp-cip::after,
    #dr-shell .rp-cip::after,
    #sv-shell .rp-cip::after,
    #hm-shell .rp-cip::after { content: ""; position: absolute; inset: -3px 0; }

    /* Eylem düğmeleri: dört düğme TEK satırda.
       🔴 YORUM DÜZELTİLDİ (1.306.0 ölçümü): burada `flex: 1 1 0` yazıyor, yani
          taban genişlik SIFIRDIR ve dört düğme kabı EŞİT böler — içeriğe göre
          orantılı DEĞİL. Eski yorum düğme başına içerik genişliği hesaplıyordu
          (65/53/41/57px) ve bir sonraki okuyucuyu yanıltıyordu.
       ÖLÇÜLEN GERÇEK (320px, kap 300px, 3×6px boşluk → 282px):
          dört düğme de 72,5px · gap 6px · toplam 308px = kap genişliği,
          sarma YOK, taşma YOK (`scrollWidth == clientWidth`).
       Sonuç: ikon-only WhatsApp düğmesi, "Süzgeci sıfırla" ile aynı kutuyu alır.
       Bilinçli: eşit kutular ritmi bozmaz ve dokunma hedefini büyütür. */
    #up-shell .up-eylem,
    #dr-shell .dr-eylem,
    #sv-shell .rp-eylem,
    #hm-shell .rp-eylem { gap: 6px; flex: 1 1 100%; }
    #up-shell .up-eylem .peron-btn,
    #dr-shell .dr-eylem .peron-btn,
    #sv-shell .rp-eylem .peron-btn,
    #hm-shell .rp-eylem .peron-btn {
        flex: 1 1 0; min-width: 0;
        height: 34px; min-height: 34px; padding: 0 7px;
        font-size: var(--m-fs-xs, 9.5px); border-radius: var(--m-r-sm, 6px);
        white-space: nowrap;
    }
    #up-shell .up-eylem .peron-btn svg,
    #dr-shell .dr-eylem .peron-btn svg,
    #sv-shell .rp-eylem .peron-btn svg,
    #hm-shell .rp-eylem .peron-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }

    /* ═══ ÜRETİM RAPORU — TEK KALAN DÜĞME ÇİPLERİN YANINA (1.339.0) ═══════════
       Kullanıcı: *"tarih filtresini de daralt yanına sadece sıfırla butonu ekle,
       diğer pdf whatsapp ve excel kaldır"*. PDF/WhatsApp/Excel düştükten sonra
       geriye TEK düğme kalıyor; `flex: 1 1 100%` onu KENDİ SATIRINA itip tam
       genişliğe yayıyordu (ölçüldü 390px: 372px genişlik, 4. satır).
       🔴 TARİHLERİN YANINA KONULAMAZ: `input[type=date]` 16px'te içsel 148px ister
          (ölçüldü) ve 2×148 + düğme 320px ekrana sığmaz; puntoyu düşürmek iOS'ta
          sayfayı zoomlar (işlevsel kırılma). Kesilmiş tarih göstermektense düğme
          çiplerin yanına alınır — günlük rapordaki reçetenin AYNISI.
       🔴 YALNIZ `#up-shell`: Detaylı/Sevkiyat/Tüketim'de araç çubuğunda hâlâ birden
          çok düğme var, onlar tam satırda kalır. */
    #up-shell .up-cipler { flex: 1 1 0; min-width: 0; order: 1;
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    #up-shell .up-cipler::-webkit-scrollbar { display: none; }
    #up-shell .up-cipler > * { flex: 0 0 auto; }
    #up-shell .up-eylem { flex: 0 0 auto; order: 2; }
    #up-shell .up-eylem .peron-btn { flex: 0 0 auto; }

    /* 🔴 WhatsApp ikonu bu üç sekmede de bir tık BÜYÜK (gerekçe: `.pb-wa svg` bloğu).
       Özgüllük ŞART: yukarıdaki seçici (1,2,1) genel `.peron-btn.pb-wa svg` (0,2,1)
       kuralını EZER — media query özgüllük eklemez, o yüzden id'li biçim yazılır.
       ÖLÇÜ 320px (kap 300px): ikon-only WhatsApp 15 + 2×7 dolgu = 29px;
       dört düğme 65 + 53 + 29 + 57 = 204px + 3×6px boşluk = 222 < 282 → SARMAZ. */
    #up-shell .up-eylem .peron-btn.pb-wa svg,
    #dr-shell .dr-eylem .peron-btn.pb-wa svg,
    #sv-shell .rp-eylem .peron-btn.pb-wa svg,
    #hm-shell .rp-eylem .peron-btn.pb-wa svg { width: 15px; height: 15px; }

    /* ── 3 · SAYI ŞERİDİ — ALT ALTA DEĞİL, YAN YANA ────────────────────────
       Kullanıcı: "işlem-takım-modül-personel-hakediş yan yana sıkıştır gereksiz
       boşlukları sil". Taban `.rp-serit` tek sütundu → Üretim'de ALTI kutu alt
       alta diziliyor ve şerit ~380px yükseklik yiyordu.

       ÜRETİM 6 kutu → 3×2 (boş hücre YOK, hizasız ızgara yasak).
         ÖLÇÜ 320px: 298px − 2×1px boşluk = 296 / 3 = 98,7px kutu (84,7px içerik)
         ÖLÇÜ 360px: 112,7px  ·  390px: 122,7px
       DETAYLI 4 kutu ve SEVKİYAT 4 kutu → 400px altında 2×2, üstünde 1×4.
         🔴 4 kutu 320px'te tek sıraya ALINMADI: kutu 74px'e (60px içerik) iner ve
            "Günlük ortalama açılış" etiketi üç satıra kırılırken komşusundan uzun
            bir kutu üretir — oran/orantı bozulur. 400px'ten itibaren kutu 92px+
            oluyor ve dörtlü sıra oturuyor.

       🔴 SAYI `clamp(13px, 4.3vw, 16px)`: 320px'te 13,8px, 372px'ten sonra tavan.
          84,7px'lik kutuda 16px'lik "1.648s 32dk" ~80px sürüyor — sınırda ama
          `.rp-serit-buyuk` `nowrap` + kutu `overflow:hidden` olduğu için taban
          13px'e inebilmesi ŞART, yoksa rakam KESİLİR (kesilmiş sayı yalandır).

       🔴🔴 PARA KUTUSU BU TABANLA DA SIĞMAZ — ÇÖZÜM YAZI BOYU DEĞİL, KISA BİÇİMDİR.
          ÖLÇÜLDÜ (kutu içeriği 87px @320): "105.600,00 ₺" 95,4px → 8,4px; 360px'te
          6,3px; 390px'te 1,9px; "1.234.567,89 ₺" 440px'te bile 0,5px taşıyor —
          kesme bandı 320-441px. `minmax(0, 1fr)` kolonun min-content zeminini
          kaldırdığı için kolon büyüyemiyor ve şeridin `overflow:hidden`i SESSİZCE
          kesiyor (masaüstünde düz `1fr` var, orada kolon büyüyor ve kesme YOK).
          Fontu 12px'e indirmek denendi ve ÇÜRÜDÜ: 7 haneli değer yine 7,9px taşıyor.
          Bu yüzden para kutusu `.rp-tam`/`.rp-kisa` reçetesine bağlandı (bkz. aşağıda
          `#up-shell .rp-tam`): kısa biçimin en genişi "9.999,99 ₺" 76,6px → 10,4px pay. */
    /* 🔴 3 → 5 SÜTUN (1.339.0 — kullanıcı: *"işlemi kaldır, takım, modül, toplam
       süre, hakediş yan yana olsun"*). "İşlem" kutusu telefonda düştüğü için geriye
       BEŞ kutu kalıyor (Takım · Modül · Personel · Fiilî çalışma · Hakediş) ve
       üçlü ızgarada İKİ satıra yayılıyordu (ölçüldü 390px: şerit 135px).
       🔴 `Personel` kullanıcının listesinde YOKTU ama KALDIRILMASI da istenmedi;
          istenmeden veri silmek yerine tek satıra sığdırıldı (beş kutu 390px'te
          73px — günlük raporda ölçüldü). */
    #up-shell .up-serit { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    /* 🔴 BEŞ KUTU 320px'te KUTU BAŞINA 46px İÇ ALAN BIRAKIR (ölçüldü) ve şeridin
       ortak `clamp(14px, 4.6vw, 17px)` tabanı orada "606s 37dk"yı 80px, "105.600,00 ₺"yi
       56px sürüyor → şerit kabını 3px taşıyordu. Günlük rapordaki BEŞ KUTULU şeridin
       reçetesi buraya da uygulanır: taban 14 → 11,5px ve değer SARABİLİR.
       🔴 Küçülen şey YAZI, kutu DEĞİL (kullanıcı kuralı: *"mümkün olduğunda sayfaya
          yazıları sığdır küçült"*). 11,5px mutlak tabanın (9px) ÜSTÜNDEDİR.
       🔴 Seçici İKİ sınıflı (`.up-serit .rp-serit-buyuk`, özgüllük 1-2-0): ortak kural
          dosyada DAHA SONRA geliyor ve tek sınıflı olsaydı O kazanırdı. Dört sekmenin
          ortak kuralına dokunulmaz — dr/sv/hm şeritlerinde iki kutu var, orada sorun yok. */
    #up-shell .up-serit .rp-serit-kutu { padding: 6px 5px; }
    #up-shell .up-serit .rp-serit-buyuk {
        font-size: clamp(11.5px, 3vw, 15px);
        white-space: normal; overflow-wrap: anywhere; }
    #up-shell .up-serit .rp-serit-et { letter-spacing: 0; overflow-wrap: anywhere; }
    #dr-shell .dr-serit,
    #sv-shell .sv-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 🔴🔴 TÜKETİM ŞERİDİ TELEFONDA İKİ KUTU, YAN YANA (1.340.0).
       Kullanıcı: *"tuketilen malzeme ve tuketim degeri yan yana olsun, diger
       ikisini kaldir"*.
       🔴 ÖNCE BİR EKSİK VARDI: `#hm-shell .hm-serit` için 640px altında SÜTUN
          KURALI HİÇ YAZILMAMIŞTI. dr ve sv şeritleri (hemen yukarıda) `repeat(2, …)`
          alırken hm, çıplak `.rp-serit` tabanına düşüyordu — o taban 520px altında
          TEK sütundur. Yani dört kutu ALT ALTA diziliyordu.
       🔴 DÜŞEN İKİSİNİN EVİ AYNI EKRANDA — VERİ KAYBI YOK:
          · "Karşılama" toplamı  → ürün tablosunun `tfoot` satırında (aynı yüzde)
          · "Ortalama aylık çeşit" → ay tablosunun "Çeşit" kolonunda AY AY
            (ortalamanın kendisinden FAZLA bilgi)
          Masaüstünde (900px↑) dördü de yerinde; bu kural yalnız telefonda yaşar.
       🔴 KİMLİK SINIFIYLA gizlenir, `nth-child` ile DEĞİL: şeride bir kutu eklendiği
          gün sıra kayar ve YANLIŞ kutu düşerdi — sessizce.
       🔴 İKİ KUTU KALINCA KUTU 148px'e (320px'te) çıkar; ortak `clamp(14px, 4.6vw,
          17px)` ve kısa para biçimi ("9.999,99 ₺" ≈ 77px) rahatlıkla sığar — dar
          kutuda rakam kesilmesi riski YOK. */
    #hm-shell .hm-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #hm-shell .hm-kutu--ortcesit,
    #hm-shell .hm-kutu--karsilama { display: none; }
    /* DETAYLI ŞERİT ÜÇ KUTUYA DÜŞTÜĞÜNDE (1.325.0 — takım istatistiği yokken).
       🔴 KURALI YUKARIYA (15584 bloğuna) YAZMAK YETMEZ: bu "MOBİL SON SÖZ" bloğu
          dosyada DAHA SONRA duruyor ve aynı özgüllükte (#id + .sınıf) olduğu için
          640px altında onu EZER. Üç kutu 2 kolonluk ızgarada 2+1 diziliyor ve
          ikinci satırın sağ yarısı BOŞ hücre olarak `--border` renginde bir blok
          gibi görünüyordu (denetim bulgusu). Son kutu satırı tamamlar.
       ÖLÇÜ 320px: kap 298px → 2 kolon × ~148px; son kutu tam genişlik. */
    #dr-shell .dr-serit--3 .rp-serit-kutu:last-child { grid-column: span 2; }

    #up-shell .rp-serit,
    #dr-shell .rp-serit,
    #sv-shell .rp-serit,
    #hm-shell .rp-serit { margin-bottom: var(--m-gap-lg, 11px); border-radius: 8px; }
    #up-shell .rp-serit-kutu,
    #dr-shell .rp-serit-kutu,
    #sv-shell .rp-serit-kutu,
    #hm-shell .rp-serit-kutu { padding: 7px; min-width: 0; box-sizing: border-box; }
    #up-shell .rp-serit-et,
    #dr-shell .rp-serit-et,
    #sv-shell .rp-serit-et,
    #hm-shell .rp-serit-et {
        font-size: var(--rp-fs-etiket, 10px); line-height: 1.15; letter-spacing: .3px;
        margin-bottom: 3px;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden;
    }
    /* 🔴 Ölçüldü (320px): Günlük Operasyon 14,72px · diğer dört sekme 13,76px —
       AYNI bileşen sınıfı sekmeye göre farklı taban kullanıyordu. Tek clamp'e
       hizalandı; `#rp-kok`taki reçetenin AYNISI (14 / 4.6vw / 17). */
    #up-shell .rp-serit-buyuk,
    #dr-shell .rp-serit-buyuk,
    #sv-shell .rp-serit-buyuk,
    #hm-shell .rp-serit-buyuk { font-size: clamp(14px, 4.6vw, 17px); line-height: 1.15; }
    #up-shell .rp-serit-alt,
    #dr-shell .rp-serit-alt,
    #sv-shell .rp-serit-alt,
    #hm-shell .rp-serit-alt {
        font-size: var(--rp-fs-etiket, 10px); line-height: 1.25; margin-top: 2px;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden;
    }
    /* Para kutusu: uzun biçim düşer, kısa biçim ( `[hidden]` ile gelen) görünür —
       `#rp-kok`taki ölçülmüş reçetenin AYNISI. Tam değer `title`da ve tablodadır. */
    #up-shell .rp-tam,
    #sv-shell .rp-tam,
    #hm-shell .rp-tam { display: none; }
    #up-shell .rp-kisa[hidden],
    #sv-shell .rp-kisa[hidden],
    #hm-shell .rp-kisa[hidden] { display: inline; }

    /* ── 4 · GRAFİK BANDI (Dashboard ile ORTAK sınıflar → kabuk id'si ŞART) ── */
    #sv-shell .sv-nabiz { margin: 0 0 10px; gap: 8px; }
    #sv-shell .pg-kart { padding: 10px 10px 8px; border-radius: 10px; }
    #sv-shell .pg-kart__bas { gap: 8px; margin-bottom: 8px; }
    #sv-shell .pg-kart__ad h4 { font-size: var(--m-fs, 11.5px); }
    #sv-shell .pg-kart__ad span {
        font-size: var(--m-fs-micro, 9px); line-height: 1.25;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        overflow: hidden;
    }
    #sv-shell .pg-kart__buyuk { font-size: var(--m-fs-lg, 15px); line-height: 1.1; }
    #sv-shell .pg-kart__buyuk em { font-size: var(--m-fs-micro, 9px); margin-top: 2px; }
    #sv-shell .dash-nabiz-cip { gap: 5px; margin: 0 0 8px; }
    #sv-shell .dash-nabiz-b {
        position: relative; min-height: 28px; padding: 4px 6px;
        font-size: var(--m-fs-xs, 9.5px); border-radius: 7px;
    }
    #sv-shell .dash-nabiz-b::after { content: ""; position: absolute; inset: -3px 0; }

    /* ── 5 · AŞAMA DAĞILIM ŞERİDİ + KART BAŞLIKLARI ────────────────────────
       14840'taki kural bu çipleri 12,5px'e BÜYÜTÜYORDU (okunurluk için);
       kullanıcı küçültme istedi. Metin SİLİNMEDİ — yalnız 12,5 → 10,5px. */
    #up-shell .up-asama-serit { gap: 5px; margin-bottom: 9px; }
    #up-shell .up-asama-cip { gap: 4px; padding: 5px 7px; border-radius: 7px; }
    #up-shell .up-asama-cip .peron-badge,
    #up-shell .rp-kart-bas .peron-badge,
    #dr-shell .dr-kart-bas .peron-badge {
        font-size: var(--m-fs-xs, 9.5px); padding: 1px 6px;
    }
    #up-shell .up-asama-cip i { font-size: var(--m-fs-micro, 9px); }

    #up-shell .up-kart, #dr-shell .dr-kart, #sv-shell .sv-kart {
        margin-bottom: 8px; border-radius: 10px;
    }
    #up-shell .rp-kart-bas, #dr-shell .rp-kart-bas, #sv-shell .rp-kart-bas {
        padding: 7px 9px; gap: 5px;
    }
    #up-shell .rp-kart-ad, #dr-shell .rp-kart-ad, #sv-shell .rp-kart-ad {
        font-size: var(--m-fs, 11.5px);
    }
    #up-shell .rp-kart-sag, #dr-shell .rp-kart-sag, #sv-shell .rp-kart-sag {
        font-size: var(--m-fs-xs, 9.5px);
    }
    #up-shell .rp-dipnot, #dr-shell .rp-dipnot, #sv-shell .rp-dipnot {
        padding: 6px 9px 8px; font-size: var(--m-fs-xs, 9.5px);
        line-height: 1.5; max-width: none;
    }
    #up-shell .rp-bos-kutu, #dr-shell .rp-bos-kutu, #sv-shell .rp-bos-kutu {
        padding: 9px; font-size: var(--m-fs-sm, 10.5px); line-height: 1.5;
    }
    #up-shell .up-kisit summary,
    #dr-shell .dr-kisit summary,
    #sv-shell .rp-kisit summary { min-height: 38px; font-size: var(--m-fs-sm, 10.5px); }
    #up-shell .up-kisit li,
    #dr-shell .dr-kisit li,
    #sv-shell .rp-kisit li { font-size: var(--m-fs-xs, 9.5px); line-height: 1.5; }

    /* ── 6 · TABLOLAR — YOĞUNLUK ──────────────────────────────────────────
       Karar `#rp-kok` ile AYNI: TABLO KALIR, tek satır ızgaraya DÖNÜŞMEZ.
       Kolonların hiçbiri türetilebilir değil (tarih · sipariş · cari · ürün ·
       modül · adet · tutar) ve `colgroup` oranları kart düzeninde kaybolurdu.
       Her tablo KENDİ kabında yatay kayar; sayfa gövdesi ASLA. */
    #up-shell .peron-table-wrap,
    #dr-shell .peron-table-wrap,
    #sv-shell .peron-table-wrap,
    #hm-shell .peron-table-wrap { border-radius: 8px; }

    #up-shell .rp-t > thead > tr > th,
    #dr-shell .rp-t > thead > tr > th,
    #sv-shell .rp-t > thead > tr > th,
    #hm-shell .rp-t > thead > tr > th {
        padding: 4px 6px; font-size: var(--m-fs-micro, 9px); letter-spacing: .02em;
        line-height: 1.15; white-space: normal; word-break: break-word;
    }
    /* `height: auto` ŞART: `--tbl-row-h` satıra ALT SINIR koyuyor ve dolgu
       küçülse bile satır o boya çıkıyordu. */
    #up-shell .rp-t > tbody > tr > td,
    #up-shell .rp-t > tfoot > tr > td,
    #dr-shell .rp-t > tbody > tr > td,
    #dr-shell .rp-t > tfoot > tr > td,
    #hm-shell .rp-t > tbody > tr > td,
    #sv-shell .rp-t > tbody > tr > td,
    #sv-shell .rp-t > tfoot > tr > td,
    #hm-shell .rp-t > tfoot > tr > td {
        padding: 4px 6px; height: auto; line-height: 1.3;
        font-size: var(--m-fs-sm, 10.5px);
    }
    #up-shell .rp-t .rp-ad, #dr-shell .rp-t .rp-ad, #sv-shell .rp-t .rp-ad {
        font-size: var(--m-fs-sm, 10.5px);
    }
    /* 🔴 8,5 → 9,5px: kullanıcının MUTLAK TABANI 9px'tir ("bunun altı okunmaz;
       bulgudur"). Tasarım denetimi 320/360/390px'te bu sınıfın 8,5px'te kaldığını
       ölçtü. Artış 1px'tir ve YALNIZ tabanı karşılamak içindir — hİyerarşi korunur
       (gövde 10,5px > yardımcı 9,5px). */
    #up-shell .rp-t .rp-alt, #dr-shell .rp-t .rp-alt, #sv-shell .rp-t .rp-alt {
        font-size: var(--m-fs-xs, 9.5px);
    }
    /* Grup başlığı telefonda da alt satırdan (10,5px) BÜYÜK olmalı — bkz. 768
       bandındaki aynı düzeltmenin gerekçesi. */
    #dr-shell .dr-t > tbody.dr-grup > tr.dr-basrow > th {
        font-size: 11px; letter-spacing: 0; }
    /* Sayı kolonu: dolgu 6 → 4px (kolon başına 4px kazanç, hizayı bozmaz).
       🔴 `tabular-nums` ZORUNLU — 8,5-10,5px'te haneler aksi hâlde birbirine girer. */
    #up-shell .rp-t td.col-num, #up-shell .rp-t td.rp-para,
    #dr-shell .rp-t td.col-num, #dr-shell .rp-t td.rp-para,
    #sv-shell .rp-t td.col-num, #sv-shell .rp-t td.rp-para {
        padding-left: 4px; padding-right: 4px;
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    /* 🔴 `nowrap` TEK BAŞINA KIRPMAZ — komşu hücrenin ÜSTÜNE çizer. Metin
       hücreleri görünür bir "…" ile kesilsin; SAYI hücreleri bu kurala GİRMEZ
       (kırpılmış rakam yalandır — onlara kova genişliğiyle yer açıldı). */
    #up-shell .rp-t td.col-nowrap,
    #dr-shell .rp-t td.col-nowrap,
    #sv-shell .rp-t td.col-nowrap,
    #hm-shell .rp-t td.col-nowrap { overflow: hidden; text-overflow: ellipsis; }

    /* Ölçülmüş kovalar — `min-width: max-content` bu ekranlarda DEVRE DIŞI:
       `col-ellip` hücreleri nowrap olduğu için max-content = kırpılmamış en uzun
       cari adı → tablo 900-1200px'e fırlar ve kullanıcı bitmeyen bir yatay
       kaydırma yapar. Yerine kolon sayısına göre ÖLÇÜLMÜŞ kovalar.

       🔴🔴 KOVALAR 1.339.0'DA YENİDEN ÖLÇÜLDÜ (kullanıcı: *"detaylı, sevkiyat ve
          tüketim kısmında ... daha az yer kaplayacak şekilde uyarla, daha çok yere
          daha çok veriyi tek ekranda görmeye ihtiyacım var"*).
          BU SEKMELERDE SORUN SATIR YÜKSEKLİĞİ DEĞİL, YATAY KAYDIRMAYDI — ölçüldü
          390px'te satırlar zaten 23-36px, ama tablolar 460 / 620 / 780px'lik
          kovalarda 370px'lik bir pencereden okunuyordu: kullanıcı bir satırın
          ancak %48-60'ını aynı anda görüyordu. Kovaları GERÇEK ihtiyaca çekmek,
          satır kısaltmaktan çok daha fazla veri kazandırıyor.
       🔴 KOVA "KÜÇÜK OLSUN" DİYE SEÇİLMEZ, ÖLÇÜLEREK SEÇİLİR: her aday genişlikte
          `scrollWidth > clientWidth` olan SAYI hücreleri sayıldı (kırpılmış rakam
          yalandır; metnin üç noktaya düşmesi serbest, çünkü tamamı `title`da).
       🔴 SEVKİYAT TABLOLARI `peron-table--fixed` DEĞİL — kova kaldırılınca
          tarayıcı İÇERİĞİN kendi asgarisini kullanır. Ölçüldü: satır tablosu
          620 kovası yerine 384px'e oturuyor ve SIFIR hücre kırpılıyor. Yani 620
          bir ölçüm değil, fazladan boşluktu. */
    #sv-shell .sv-t--cari { min-width: 0; }    /* 4 kolon — kabı zaten dolduruyor */
    #sv-shell .sv-t--satir { min-width: 0; }   /* 7 kolon — ölçüldü: 620 → 384px */
    /* 🔴🔴 ÜRETİM RAPORU BU KOVAYA GİRMEZ (1.335.0 — ölçülmüş kusur).
       `@media (max-width: 768px)` bloğu (15828) `.up-t`nin satırlarını ARTIK TABLO
       SATIRI DEĞİL, `display:grid` KART yapıyor ve karta `width:100%` veriyor.
       Buraya yazılan `min-width: 620px` ise TABLO düzeni için ölçülmüştü; kart
       düzeninde kartın kendisini 620px'e zorluyordu.
       ÖLÇÜLDÜ (390×844, yerel, firma Rixxe): `.peron-table-wrap` clientWidth 370 /
       scrollWidth 620 → kartın SAĞ 250 PİKSELİ EKRAN DIŞINDA kalıyordu. Sağa yaslı
       dört sayı (İşlem · Modül · Süre · Hakediş) tam o şeritte duruyor; yani
       telefonda kullanıcı raporun SAYILARINI hiç görmüyor, yatay kaydırmadıkça.
       Kart düzeninde yatay cetvel ANLAMSIZDIR: kart zaten kabına göre dizilir. */
    #up-shell .up-t,
    #up-shell .up-ic { min-width: 0; }
    /* 🔴 460 → 370 (ölçüldü): dört kolon 370px'lik kapta SIFIR sayı kırpılmadan
       sığıyor, yani 390px'lik telefonda YATAY KAYDIRMA KALMIYOR (önce 90px).
       🔴🔴 340 DENENDİ ve GERİ ALINDI: 320px ekranda tablo 340'a oturunca
          "Son Tamamlanma" tarihi (68px ister) %18 × 340 = 61px kolona sıkıştı ve
          53 hücrede tarihin son hanesi kesildi (ölçüldü). Kova, KABIN değil
          İÇERİĞİN tabanıdır: 370 her genişlikte tarihi bütün tutar. */
    #dr-shell .dr-t { min-width: 370px; }
    /* 🔴 PAY %10 → %12 ve SON TAMAMLANMA %18 → %20 (ölçüldü, 370px kapta):
       "%100" 39px ister, %10 = 37px veriyordu; tarih 68px ister, %18 = 66,6px
       veriyordu. İkisi de son hanesini kaybediyordu — KIRPILMIŞ RAKAM YALANDIR.
       Fark MODÜL adlı METİN kolonundan alınır; o kolon `col-ellip` taşır ve tam
       adı `title` özniteliğinde tutar (kırpılan metin okunabilir kalır). */
    #dr-shell .dr-t col.drc-pay { width: 12%; }
    #dr-shell .dr-t col.drc-son { width: 20%; }
    /* Toplam satırı başlığı ("GENEL TOPLAM — 10 ürün ağacı · 53 modül çeşidi")
       tek satıra sığmaz; kova daraltıldığı için SARMASINA izin verilir — aksi
       hâlde üç noktaya düşer ve kaç ürün ağacı olduğu okunamazdı. */
    #dr-shell .dr-t > tfoot > tr > th { white-space: normal; }

    /* ── HAMMADDE TÜKETİMİ ───────────────────────────────────────
       🔴 ÜRÜN TABLOSU 780 → 660. ÖLÇÜLDÜ (390px, 178 satır gerçek veri): kova
          640px'te SADECE 1, 600px'te 26, 560px'te 95 sayı hücresi kırpılıyor.
          Yani sekiz sayı kolonunun gerçek tabanı ~640px'tir; 660 bunun üzerine
          20px emniyet bırakır. 370'e İNDİRİLEMEZ — 209 sayı hücresi kırpılırdı ve
          kırpılmış rakam yalandır. Kazanılan: her satırda 120px daha az kaydırma.
       🔴 AY TABLOSU 500 → 370 + kolon payları yeniden dağıtıldı. Ölçüldü: tüketim
          ve alım değerleri 85px, "Fark" 90px istiyor; eski %21 pay 370px kapta
          78px veriyor ve eksi bakiye ("-2.266.779,70 ₺") kesiliyordu. */
    #hm-shell .hm-t--urun { min-width: 660px; }
    /* Birim fiyat kolonu (%18) TABANDA düzeltildi — bkz. `hmc-fiyat` notu (~16199).
       Buraya kopyası KONULMAZ: aynı kural iki yerde durursa biri güncellenip
       diğeri unutulur ve ekranlar sessizce ayrışır. */
    #hm-shell .hm-t--ay   { min-width: 370px; }
    #hm-shell .hm-t--ay col.hmc-ay     { width: 18.5%; }
    #hm-shell .hm-t--ay col.hmc-atuk   { width: 23%; }
    #hm-shell .hm-t--ay col.hmc-aalim  { width: 23%; }
    #hm-shell .hm-t--ay col.hmc-afark  { width: 24.5%; }
    #hm-shell .hm-t--ay col.hmc-acesit { width: 11%; }

    /* 🔴🔴 KAPALI ÖZET SATIRI: ÜÇ KADEME → TEK SATIR (1.339.0). Kullanıcı birebir:
       *"alttaki ürünler listesini tek satır yap ve birbirinden ayrı olsun akordiyon
        sistemli ... daha çok yere daha çok veriyi tek ekranda görmeye ihtiyacım var"*.
       (1.335.0'da dört kademe üçe inmişti; ölçüldü 390px: kart 136px, ekrana ~6 kayıt.)
       🔴🔴 DÜŞEN ALANLAR EKRANDAN SİLİNMEZ. cari · sipariş no · müşteri · son tarih ·
          işlem sayısı · aşama çipleri akordiyonun İÇİNE, `.up-kunye` şeridine taşındı
          (peron-mod-uretim-raporu.js -> `kunye()`). "Yer açmak" adına veri silmek
          YASAK: kullanıcı aynı ekranda cari ve sipariş numarasıyla çalışıyor.
       🔴 SAYI SÜTUNLARI `auto` (max-content), `minmax(0,auto)` DEĞİL: üçü de 0'a
          inebilseydi hepsi "…" ile kırpılırdı ve KIRPILMIŞ RAKAM YALANDIR. Daralan
          tek sütun `urun`dür — o da `title` özniteliğinde tam hâlini taşır. */
    #up-shell .up-t > tbody > tr.up-row {
        grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
        grid-template-areas: "ac urun modul sure hakedis";
        gap: 0 7px;
        padding: 4px 8px 4px 3px;
        margin-bottom: 5px;
        border: 1px solid var(--border);
        border-radius: 8px;
    }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="asama"],
    #up-shell .up-t > tbody > tr.up-row > td[data-up="cari"],
    #up-shell .up-t > tbody > tr.up-row > td[data-up="musteri"],
    #up-shell .up-t > tbody > tr.up-row > td[data-up="islem"] { display: none; }
    /* Ürün hücresi tek satır: "son bitiş" alt satırı künyeye taşındı. */
    #up-shell .up-t > tbody > tr.up-row > td[data-up="urun"] .rp-alt { display: none; }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="urun"] .rp-ad {
        font-size: var(--m-fs, 11.5px); font-weight: 600; }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="ac"] { align-self: center; }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="modul"],
    #up-shell .up-t > tbody > tr.up-row > td[data-up="sure"] {
        font-size: var(--m-fs-sm, 10.5px); }
    #up-shell .up-t > tbody > tr.up-row > td[data-up="hakedis"] {
        font-size: var(--m-fs, 11.5px); }
    #up-shell .up-t > tbody > tr.up-row .up-et { font-size: var(--m-fs-xs, 9.5px); }
    /* 🔴 44 → 28px. Kullanıcı kuralı (kademeli eşik): birincil eylem >=36,
       YOĞUN YÜZEY DENETİMİ (tablo satır eylemi) >=28, mutlak taban 24. Akordiyon oku
       tam olarak "tablo satır eylemi"dir; 44px'lik düğme satır yüksekliğini TEK BAŞINA
       belirliyordu (metin satırı ~16px) ve tek satırlık düzeni anlamsız kılıyordu. */
    #up-shell .up-ac { width: 28px; height: 28px; margin-left: 0; }
    /* "birbirinden ayrı olsun": her kayıt KENDİ kutusu. Açık akordiyonda gövde
       başlığa YAPIŞIR; `:has` desteklemeyen tarayıcıda aralarında 5px boşluk kalır —
       kademe kaybıdır, BOZULMA DEĞİL (ikisi de kendi kutusunda okunur). */
    #up-shell .up-t > tbody > tr.up-row:has(+ tr.up-detay-row:not([hidden])) {
        margin-bottom: 0; border-bottom-color: transparent;
        border-radius: 8px 8px 0 0; }
    #up-shell .up-t > tbody > tr.up-detay-row:not([hidden]) {
        margin-bottom: 5px; border: 1px solid var(--border); border-top: 0;
        border-radius: 0 0 8px 8px; overflow: hidden; }

    /* KÜNYE — kapalı satırdan düşen alanların yeni evi.
       🔴 Etiket puntosu `--m-fs-xs` (9,5px), `--m-fs-micro` (8,5px) DEĞİL:
          kullanıcının mutlak tabanı 9px'tir ve YENİ bir 8,5px kullanımı açmak
          mevcut açık borcu büyütmek olurdu. */
    #up-shell .up-kunye {
        display: flex; flex-wrap: wrap; gap: 3px 10px;
        padding: 7px 9px; background: var(--pri-light);
        border-bottom: 1px solid var(--border);
        font-size: var(--m-fs-sm, 10.5px); line-height: 1.35;
    }
    #up-shell .up-kunye-x { display: inline-flex; align-items: baseline; gap: 4px;
        min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    #up-shell .up-kunye-x i { font-style: normal; font-size: var(--m-fs-xs, 9.5px);
        color: var(--text-muted); white-space: nowrap; }
    #up-shell .up-kunye-cip { display: inline-flex; flex-wrap: wrap; gap: 4px; }

    /* 🔴 ZEBRA HÜCREYE DEĞİL SATIRA (ölçüldü, ekran görüntüsüyle yakalandı):
       akordiyon içindeki satır `display: grid` ve hücreleri arasında `gap` var;
       `tr:nth-child(2n) > td` kuralı yalnız HÜCRELERİ boyayınca satır, aralarında
       beyaz boşluklar olan PARÇALI gri bloklara bölünüyordu — "bozuk" görünen tam
       olarak buydu. Zebranın işi satırı ayırt ettirmek; o hâlde satırı boyar.
       🔴 SEÇİCİ `.rp-t.up-ic` (İKİ sınıf) — SIRAYA GÜVENİLMEZ: genel zebra kuralı
          bu dosyada DAHA AŞAĞIDA duruyor ve eşit özgüllükte olsaydı O kazanırdı. */
    #up-shell .rp-t.up-ic > tbody > tr:nth-child(2n) > td { background: transparent; }
    #up-shell .rp-t.up-ic > tbody > tr:nth-child(2n) { background: var(--pri-light); }

    /* ── 7 · TABLOLAR — RENK VE OKUNURLUK ("gösterişli ve renkli olsun") ────
       🔴 RENK DEKORASYON DEĞİL, OKUMA YARDIMI:
         · zebra → göz satırı kaydırırken kolon atlamıyor (7 kolonlu sevk
           tablosunda ölçülebilir fark);
         · YAPIŞKAN BAŞLIK → tablo kendi kabında kayarken kolon adı ekranda
           KALIR; 620px'lik bir tabloyu 300px'lik pencereden okurken "bu sayı
           hangi kolondu?" sorusu tam olarak buradan doğuyordu;
         · tutar kolonu tek aksan rengiyle ayrışır (tek aksan kuralı — yeni
           palet İCAT EDİLMEZ, `--pri`/`--green-ink` tokenları kullanılır);
         · toplam satırı (tfoot) dolgulu → "bu satır veri değil, özet".
       🔴 KONTRAST: metin renkleri `-ink` türevleridir (beyazda >=4,9:1) ve
          zemin tint'leri `--pri-light` (%8 alfa) — AA korunur, gece modunda
          token zaten eziliyor.
       🔴 SABİT HEX YOK. */
    #rp-kok .rp-t > tbody > tr:nth-child(2n) > td,
    #up-shell .rp-t > tbody > tr:nth-child(2n) > td,
    #dr-shell .rp-t > tbody > tr:nth-child(2n) > td,
    #sv-shell .rp-t > tbody > tr:nth-child(2n) > td,
    #hm-shell .rp-t > tbody > tr:nth-child(2n) > td {
        background: var(--pri-light);
    }
    #rp-kok .peron-table-wrap,
    #up-shell .peron-table-wrap,
    #dr-shell .peron-table-wrap,
    #sv-shell .peron-table-wrap,
    #hm-shell .peron-table-wrap { position: relative; }
    /* 🔴 KAYDIRMA İPUCU: rapor tabloları kendi kabında yatay kayar (620px tablo /
       370px kap ölçüldü) ama kullanıcıya "sağda devamı var" diyen HİÇBİR işaret
       yoktu — tasarım denetçisi bulgusu: İŞLEM/SÜRE/HAKEDİŞ kolonları görünmez
       kalıyor, kaydırınca da bağlamsız geliyordu. Kenara sabitlenen gölge çifti +
       içerikle kayan örtü deseni: kenarda içerik bittiğinde gölge KENDİLİĞİNDEN
       kaybolur (JS yok, salt CSS; background-attachment local/scroll çifti). */
    #rp-kok .peron-table-wrap,
    #up-shell .peron-table-wrap,
    #dr-shell .peron-table-wrap,
    #sv-shell .peron-table-wrap,
    #hm-shell .peron-table-wrap {
        background:
            linear-gradient(90deg, var(--card-bg) 46%, rgba(255,255,255,0)) left / 36px 100%,
            linear-gradient(270deg, var(--card-bg) 46%, rgba(255,255,255,0)) right / 36px 100%,
            radial-gradient(farthest-side at 0 50%, rgba(27,37,51,.22), rgba(27,37,51,0)) left / 14px 100%,
            radial-gradient(farthest-side at 100% 50%, rgba(27,37,51,.22), rgba(27,37,51,0)) right / 14px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
    /* 🔴🔴 THEAD GRADYANI BURADA NÖTRLENMEK ZORUNDA. Aşağıdaki kural başlığa
       AÇIK tint (--pri-soft, %16 alfa) + KOYU mavi yazı (--pri-text) veriyor —
       niyet "mobilde açık başlık". Ama taban kural (.peron-table thead, ~2035)
       KOYU gradyanı thead'e basmaya devam ediyordu; %84 şeffaf tint onun üstünde
       kayboluyor ve koyu zeminde koyu yazı kalıyordu. ÖLÇÜLDÜ (390px, gerçek
       veri): kontrast ≈1,27:1 — başlık metni ("SİPARİŞ TARİHİ", "ADET", "PAY")
       gözle SEÇİLEMİYORDU; tasarım denetçisi FATAL olarak raporladı. Tint'in
       kompoze olacağı zemin karta sabitlenince kontrast --pri-text/açık-tint
       çiftine döner (beyazda ≥4,9:1). */
    #rp-kok .rp-t > thead,
    #up-shell .rp-t > thead,
    #dr-shell .rp-t > thead,
    #sv-shell .rp-t > thead,
    #hm-shell .rp-t > thead { background: var(--card-bg); }
    #rp-kok .rp-t > thead > tr > th,
    #up-shell .rp-t > thead > tr > th,
    #dr-shell .rp-t > thead > tr > th,
    #sv-shell .rp-t > thead > tr > th,
    #hm-shell .rp-t > thead > tr > th {
        position: sticky; top: 0; z-index: 2;
        /* 🔴 OPAK KATMAN ŞART: th yapışkandır; %16 alfalı tek tint kaydırma
           sırasında ALTINDAN geçen satırları gösterir. Tint kart zemininin
           üstüne gradyan katmanıyla kompoze edilir → opak, ama aynı renk. */
        background: linear-gradient(var(--pri-soft), var(--pri-soft)), var(--card-bg);
        color: var(--pri-text);
        font-weight: 700;
    }
    #rp-kok .rp-t td.rp-para,
    #sv-shell .sv-t td.rp-para,
    #up-shell .rp-t td.rp-para,
    #dr-shell .rp-t td.rp-para { color: var(--green-ink); font-weight: 700; }
    #rp-kok .rp-t > tfoot > tr > td,
    #up-shell .rp-t > tfoot > tr > td,
    #dr-shell .rp-t > tfoot > tr > td,
    #sv-shell .rp-t > tfoot > tr > td,
    #hm-shell .rp-t > tfoot > tr > td {
        background: var(--pri-soft); font-weight: 700;
        border-top: 1px solid var(--pri);
    }
    /* İlk kolon bir "kimlik" kolonudur (cari/ürün/tarih) — ince aksan çizgisi
       satırın nerede başladığını gösterir; 7 kolonlu tabloda yatay kaydırınca
       satır başlangıcı kaybolmasın. */
    #sv-shell .sv-t > tbody > tr > td:first-child {
        border-left: 2px solid var(--pri-soft);
    }
}

/* 360px'ten itibaren Detaylı ve Sevkiyat şeridi TEK SIRAYA açılır.
   ÖLÇÜLDÜ: 360px kapta içerik 340px → 4×85px kutu (71px içerik) · 390px → 92,5px.
   Etiketler ("Sevk edilen takım", "Günlük ortalama") 8,5px'te iki satıra
   kırpılıyor ve ızgara hücreleri eşit yükseklikte kaldığı için oran bozulmuyor.
   320px'te 2×2 kalır: kutu 75px'e (61px içerik) inince kısa para biçimi bile
   ("139,1 B ₺" 13px'te ~52px) kenara 9px bırakıyor — emniyet payı yok. */
@media (min-width: 360px) and (max-width: 640px) {
    #dr-shell .dr-serit,
    #sv-shell .sv-serit { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Üç kutulu Detaylı şerit (1.325.0): dört kolonda 3+BOŞ dizilirdi. Üç kolon
       satırı tam doldurur — 360px'te kap 340px → 3×113px kutu (99px içerik), yani
       dörtlü sıradaki 85px'ten GENİŞ; etiketler daha rahat.
       🔴 320px bloğundaki `span 2` BURADA GERİ ALINIR: üç kolonluk ızgarada iki
          kolon kaplayan son kutu örtük bir dördüncü kolon açar ve düzeni bozardı. */
    #dr-shell .dr-serit--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #dr-shell .dr-serit--3 .rp-serit-kutu:last-child { grid-column: auto; }
}

/* TABLET BANDI (641-899px) — GÜNLÜK OPERASYON ŞERİDİNDE BOŞ HÜCRE KALMASIN.
   ÖLÇÜLDÜ 768px: çıplak `.rp-serit` bu bantta `repeat(2, 1fr)` ve BEŞ kutu
   2+2+1 diziliyor — son satırda bir hücre BOŞ kalıyor (hizasız ızgara yasak).
   Çözüm mobil bloktaki reçetenin AYNISI: altı sütunluk ızgara, kutular ikili,
   4. ve 5. kutu üçlü → görünen sonuç 3 + 2 ve satır sonu boşluğu YOK.
   🔴 Kapsam `#rp-kok`: çıplak `.rp-serit` yazılsaydı altı kutulu Üretim ve
      dört kutulu Detaylı/Sevkiyat şeritleri de bu ızgaraya düşerdi. */
@media (min-width: 641px) and (max-width: 899px) {
    #rp-kok .rp-serit { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #rp-kok .rp-serit-kutu { grid-column: span 2; }
    #rp-kok .rp-serit-kutu:nth-child(4),
    #rp-kok .rp-serit-kutu:nth-child(5) { grid-column: span 3; }
}

@media print {
    /* Ekran süzgeçleri kâğıda basılmaz; PDF çıktısı kendi belgesini üretir. */
    #sv-shell .sv-filtre, #sv-shell .sv-nabiz { display: none; }
    #sv-shell .sv-kart { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOD + AD  —  kart kodunun adıyla birlikte basılması (peron-app.js `kodAd`)

   🔴 MOBİL-ÖNCE YAZILDI: taban kural DAR EKRAN içindir (ad üstte, kod altında
      küçük punto — kullanıcı seçimi), `min-width` sorgusu yalnız BÜYÜTÜR ve kodu
      adın ÖNÜNE alır. Ters yazsaydık (masaüstü taban + max-width), medya sorgusunun
      hiç uğramadığı bağlamlar (yazdırma çerçevesi, e-posta önizlemesi) telefonda
      yan yana kalırdı.
   🔴 `flex-wrap` ŞART: masaüstünde uzun cari adı kodu iterek hücreden TAŞIRDI;
      sarınca ikinci satıra iner ve kolon genişliği sabit kalır.
   🔴 `min-width:0` ŞART: flex öğesi varsayılan `min-width:auto` ile içeriğinden
      küçülmez — kapsıyan tablo hücresi genişler ve tablo yatay taşar.
   Yazdırma/CSV yolu bu sınıfı KULLANMAZ; orada `kodAdDuz()` düz metin üretir.
   ═══════════════════════════════════════════════════════════════════════════ */
.peron-kodad {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    max-width: 100%;
    vertical-align: top;
}
.peron-kodad__ad  { order: 1; min-width: 0; }
.peron-kodad__kod {
    order: 2;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (min-width: 769px) {
    .peron-kodad {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 7px;
    }
    .peron-kodad__kod { order: 0; font-size: .88em; line-height: inherit; }
}

/* ═══ VİRMAN EKRANI (peron-mod-virman) ════════════════════════════════
   🔴 MOBİL-ÖNCE: taban kural DAR EKRAN içindir (iki taraf ALT ALTA, ok simgesi
      aşağı bakar), `min-width` sorgusu yalnız genişletir. Ters yazsaydık telefonda
      iki cari kutusu yan yana sıkışıp okunmaz olurdu — mal kabul etiketinde tam bu
      hataya düşülmüştü (kare kutular, sığmayan isimler).
   🔴 Tablo KENDİ kabında kayar (`.peron-table-wrap`), sayfa gövdesi ASLA.
   ════════════════════════════════════════════════════════════ */
.vr-form { padding: 14px; }
.vr-taraflar { display: flex; flex-direction: column; gap: 10px; }
.vr-taraf {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--content-bg);
}
.vr-taraf-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 7px; }
.vr-taraf-cap { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.vr-taraf-h > em { font-style: normal; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.vr-taraf-bak { margin-top: 7px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.vr-bak { font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-bak > em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-muted); }
/* 🔴 SEKME DÜĞMELERİNİN HİÇBİR KURALI YOKTU (ölçüldü 2026-09-13: 13,3px).
   `<button>` font-size'ı MİRAS ALMAZ — tarayıcının kendi varsayılanına (Chrome 13,333px)
   düşer, yani `.peron-layout { font-size:12px }` tabanı bu elemanlara HİÇ ulaşmıyordu.
   Sonuç: tasarım sisteminin dışında kalan, merdivende karşılığı olmayan bir punto ve
   stilsiz ham tarayıcı düğmeleri. Desen `.gl-subnav` ile BİREBİR aynıdır — muhasebe
   bölümündeki iki sekme yüzeyi ayrışmasın diye yeniden icat EDİLMEDİ.
   Punto 12px (gövde adımı); `.gl-subnav-item` 13px'tir ama o ana gezinme şerididir,
   bu ise kart içi ikincil sekmedir — hiyerarşi bilinçli olarak bir adım aşağıda. */
.peron-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px;
    background: var(--content-bg); border: 1px solid var(--border);
    border-radius: var(--r-md); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.peron-tab { flex: 0 0 auto; min-height: 36px; padding: 0 14px;
    display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
    border-radius: var(--r-sm); font: 600 12px/1 var(--font); color: var(--text-secondary);
    cursor: pointer; white-space: nowrap; transition: background var(--tr-fast), color var(--tr-fast); }
.peron-tab:hover { background: var(--pri-light); color: var(--pri-text); }
.peron-tab.active { background: var(--pri-strong); color: var(--pri-on); }
.peron-tab:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }

/* TRY dışı bakiye notu ve kırpma şeridi — ikisi de yardımcı metin adımında (11,5px). */
/* Kirpma seridi — ekstre modali (peron-mod-stock.js). Yardimci metin adimi (11,5px). */
.ek-kirpma { padding: 8px 12px; margin-bottom: 10px; font-size: 11.5px; line-height: 1.5;
    /* Token adi UYDURULMAZ: `--st-warn-bg` hicbir yerde tanimli degil, yedegi hep
       devreye giriyordu. Tanimli olan dogrudan yazilir. */
    color: var(--amber-ink); background: var(--peach-surface);
    border: 1px solid var(--amber-border); border-radius: var(--r-sm); }
.vr-bak-diger { font-style: normal; font-size: 11.5px; color: var(--text-muted); margin-left: 4px; }
.vr-kirpma    { padding: 9px 14px; font-size: 11.5px; color: var(--text-muted);
                border-top: 1px solid var(--border-light); background: var(--content-bg); }
.vr-bak-bos { color: var(--text-muted); font-size: 11.5px; }
/* İşlem SONRASI bakiye — kaydetmeden önce sonucu göstermek, "alacaklıdan borçluya"
   aktarımın hangi yöne gittiğini tarif etmenin en kısa yoludur. */
.vr-sonra { font-weight: 800; font-size: 12px; color: var(--pri); font-variant-numeric: tabular-nums; }
.vr-ok { display: flex; align-items: center; justify-content: center; color: var(--text-muted); transform: rotate(90deg); }
.vr-alanlar { margin-top: 12px; }
.vr-eylem { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.vr-uyari {
    box-sizing: border-box;
    border: 1px solid var(--rose);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--rose-ink);
    background: var(--rose-soft, transparent);
}
/* 🔴 Dokunma hedefi ≥ 44px (WCAG) — telefonda tam genişlik. */
.vr-eylem .peron-btn { min-height: 44px; }
.vr-kasa { padding: 16px; }
.vr-kasa p { margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.vr-kasa-not { font-size: 12px; color: var(--text-muted); }
.vr-kasa-btn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vr-kasa-btn .peron-btn { min-height: 44px; }

@media (min-width: 769px) {
    .vr-form { padding: 18px; }
    .vr-taraflar { flex-direction: row; align-items: stretch; gap: 12px; }
    .vr-ok { transform: none; flex: 0 0 28px; }
    .vr-eylem { flex-direction: row; align-items: center; justify-content: space-between; }
    .vr-eylem .peron-btn { min-height: 38px; }
    .vr-uyari { flex: 1 1 auto; margin-right: 12px; }
}
/* Yazma izni olmayan kullanıcıya form yerine basılan not. */
.vr-salt-okur p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════
   ÜRETİM BÖLÜMÜ ÇİPLERİ (1.299.0) — Üretim Takibi, aşama kartlarının ÜSTÜ
   🔴 Renk YALNIZ var(--token) ile; sabit hex gece modunu kırar. TEK istisna
      --pg-c: bölümün KULLANICI TANIMLI rengi, satır içi style ile gelir.
   🔴 !important YOK. Mobile-first: temel kural dar ekran, @media BÜYÜTÜR.
   ═══════════════════════════════════════════════════════════════════════════ */
.peron-prod-groups{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
/* 🔴 [hidden] GUARD ŞART. Yazar (author) kaynaklı `display:flex`, tarayıcının
   UA kuralı olan `[hidden]{display:none}`'ı EZER — köken (origin) özgüllükten
   önce gelir. Guard olmadan `kap.hidden = true` HİÇBİR ŞEY yapmaz. Sonuç: bölüm
   sayısı 2'den 1'e düşen firmada (birleştirme/silme) önceki çizimden kalan
   çipler GÖRÜNÜR ve TIKLANABİLİR kalırdı. Bu tuzak bu dosyada zaten 8 yerde
   tanınıp guard'lanmış (`.po-bulkbar[hidden]`, `.peron-mob-filter-scroll[hidden]`…);
   yeni paylaşılan bileşen o kurala tabi tutulmamıştı. */
.peron-prod-groups[hidden]{ display:none; }
.peron-prod-group{
  appearance:none; cursor:pointer; font:inherit; font-size:12px; line-height:1.2;
  /* 🔴 Dokunma hedefi ≥44px. 1.299.0'da yorum "≥44px" diyordu ama değer 34px'ti —
     yorum ile kod ayrışmıştı ve kural sessizce ihlal ediliyordu. Masaüstünde
     34px yeterli görünüyor diye küçültme: aynı çip telefonda da basılıyor. */
  min-height:44px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--card-bg); color:var(--text-secondary);
  display:inline-flex; align-items:center; gap:6px; transition:background .15s, color .15s;
}
.peron-prod-group:hover{ background:var(--pri-light); color:var(--text-primary); }
/* Bölüm rengi: sol kenarda ince bir nokta — kart kenarı çizgisi DEĞİL (klişe) */
.peron-prod-group[style*="--pg-c"]::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--pg-c, var(--pri));
  flex:0 0 auto;
}
.peron-prod-group.active{
  /* 🔴 `#fff` DEĞİL `var(--pri-on)`: gece modu tokenları ezerek çalışıyor, sabit
     hex orada kırılır. Aynı ikili `.peron-seg-opt.active`te de kullanılıyor. */
  background:var(--pri-strong); border-color:var(--pri); color:var(--pri-on); font-weight:600;
}

/* ── BÖLÜM DIŞI KALEM: sessiz kırpma YASAK ──────────────────────────────────
   Bölüm süzgeci açıkken karma bir siparişin diğer bölüme ait kalemleri
   gizlenir. Kaç tanesinin gizlendiği SÖYLENMEZSE kullanıcı "kalemlerim eksik"
   der ve hatayı üründe arar. İki yüzey: liste satırında rozet, detayda not. */
.po-bolum-rozet{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  font-size:11px; line-height:1.6; white-space:nowrap;
  /* 🔴 `--amber-soft` DİYE BİR TOKEN YOKTU (0 tanım). Fallback devreye girip zemin
     MAVİ (`--pri-light`) oluyor, yazı kehribar kalıyordu.
     🔴🔴 DOLGU YOK — ve emsal olarak `.po-fason-tag`/`.dash-fason-tag` ALINMAZ.
        İlk düzeltme onları örnek aldı; oysa bu dosya `--peach-surface` dolgusunun
        gece modunda kırıldığını ZATEN bir kez ölçüp belgelemiş (bkz. satır ~9351,
        `.gl-yon.is-borc`). Yarı saydam kehribar dolgu, zemini metnin rengine doğru
        açıyor. ÖLÇÜLDÜ (11px yazı, AA eşiği 4,5:1 — "büyük metin" muafiyeti YOK):
              gece #18212e : dolgulu 4,11  →  şeffaf 5,87
              gece #273341 : dolgulu 3,33  →  şeffaf 4,65
              ışık #ffffff : dolgulu 4,74  →  şeffaf 5,61
        Yani dolgu İKİ gece varyantında da AA'yı düşürüyordu. Ayırt edici sinyal
        zaten METİN RENGİ + kenarlık; dolgu hiçbir bilgi taşımıyor. */
  background:transparent; color:var(--amber-ink);
  border:1px solid var(--amber-border);
}
.po-bolum-not{
  margin:0; padding:8px 14px; font-size:12px; line-height:1.5;
  color:var(--text-secondary); background:var(--pri-light);
  border-bottom:1px solid var(--border);
}

/* ============================================================
   ÖZEL SİPARİŞ — form tiki + liste rozetleri  (1.309.0)
   ------------------------------------------------------------
   🔴 SABİT HEX YOK, `!important` YOK: bu blok `RAPORLAR … MOBİL YOĞUNLUK`
      işaretinin ALTINDA kalıyor ve t42/t49 testleri o işaretten DOSYA SONUNA
      kadar tarıyor. Yalnız token kullanılır.
   🔴 ROZETLERDE DOLGU YOK — bu dosya `.po-bolum-rozet`te ölçerek belgelemişti:
      yarı saydam dolgu zemini metnin rengine doğru açıyor ve İKİ gece
      varyantında da AA'yı düşürüyor (gece #18212e 4,11 · #273341 3,33 ·
      ışık 4,74 → şeffafta 5,87 / 4,65 / 5,61). Ayırt edici sinyal METİN
      RENGİ + kenarlıktır; dolgu bilgi taşımaz.
   ============================================================ */
.po-ozel-rozet,
.prod-ozel-rozet,
.prod-yd-rozet{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  font-size:11px; font-weight:700; line-height:1.6; white-space:nowrap;
  letter-spacing:.02em; background:transparent; border:1px solid var(--border);
  vertical-align:middle;
}
.po-ozel-rozet, .prod-ozel-rozet{ color:var(--violet-ink); }
.prod-yd-rozet{ color:var(--cyan-ink); }

/* 🔴 ROZET, ELLIPSIS'İN KURBANI OLMAMALI — ÖLÇÜLDÜ (tasarım denetimi, 5 genişlik):
   `.peron-table--fixed td.col-ellip` hücreyi tek `nowrap` akışı sayıp SAĞDAN kırpıyor;
   rozet metinden sonra geldiği için gerçekçi bir firma adında (23 karakter) rozetin
   TAMAMI hücre dışında kalıyordu (hücre x=[158,262], rozet x=[282,315]).
   Aynı satırdaki ÖZEL rozeti bunu yaşamıyor çünkü `.po-no-cell` bir FLEX kabı —
   burada da o kanıtlanmış desen kullanılır, yeni bir çözüm icat edilmez:
   metin kendi ellipsis'ini alır (`min-width:0`), rozet `flex-shrink:0` ile payını korur. */
.prod-cari-cell{ display:flex; align-items:center; gap:6px; min-width:0; }
.prod-cari-cell .prod-cari-ad{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod-cari-cell .prod-yd-rozet{ flex:0 0 auto; margin-left:0; }

/* Sipariş formundaki "Özel Sipariş" tiki — başlığın altında, tam genişlikte. */
.po-ozel-tik{
  display:flex; align-items:flex-start; gap:12px;
  box-sizing:border-box; width:100%;
  margin:0 0 12px; padding:10px 14px;
  min-height:44px;                       /* dokunma hedefi (tüm satır tıklanır) */
  background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
  cursor:pointer; user-select:none;
}
.po-ozel-tik input{
  flex:0 0 auto; width:20px; height:20px; margin:2px 0 0;
  accent-color:var(--pri); cursor:pointer;
}
.po-ozel-metin{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.po-ozel-metin b{ font-size:14px; color:var(--text-primary); }
.po-ozel-metin small{ font-size:12px; color:var(--text-secondary); line-height:1.45; }
/* İşaretliyken kutu görünür şekilde ayrışır — tikin kendisi 20px, uzaktan seçilmez. */
.po-ozel-tik:has(input:checked){ border-color:var(--pri-border); background:var(--pri-light); }

/* 1.429.0 — MAMÜL DEPO (stoğa üretim): sipariş formundaki anahtar + mamül depo seçici, cari yuvasındaki depo metni,
   listedeki "DEPO · {ad}" rozeti. Firmada etkin mamül depo yoksa bölüm basılmaz (form değişmez). Yalnız token; rozet
   dolgusuz (yukarıdaki rozet kuralı). Mobil-önce: taban tek kolon, geniş düzen yalnız min-width ile. */
.po-mamul{
  display:grid; grid-template-columns:minmax(0,1fr); gap:8px 16px; align-items:end;
  box-sizing:border-box; padding:12px 14px; margin-bottom:12px;
}
.po-mamul.is-depo{ border-color:var(--pri-border); }
.po-mamul-anahtar{
  display:flex; align-items:center; gap:8px; min-height:32px; cursor:pointer;
  font-size:12px; font-weight:600; color:var(--text-primary);
}
.po-mamul-anahtar input{ flex:0 0 auto; width:16px; height:16px; margin:0; accent-color:var(--pri); cursor:pointer; }
.po-mamul-anahtar.is-kilitli, .po-mamul-anahtar.is-kilitli input{ cursor:default; color:var(--text-secondary); }
.po-mamul-depo{ min-width:0; }
.po-mamul-depo .peron-select{ box-sizing:border-box; width:100%; }
.po-mamul-not{ grid-column:1 / -1; margin:0; max-width:78ch; font-size:11.5px; line-height:1.5; color:var(--text-secondary); }
.po-cari-depo{
  display:flex; align-items:center; box-sizing:border-box; min-height:32px; min-width:0;
  font-size:12px; font-weight:600; color:var(--green-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#po-f-contact-ac[hidden], .po-cari-depo[hidden]{ display:none; }
.po-depo-rozet{
  display:inline-block; max-width:100%; box-sizing:border-box; padding:1px 7px; border-radius:999px;
  border:1px solid var(--border); background:transparent; color:var(--green-ink);
  font-size:11px; font-weight:700; line-height:1.6; letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
}
@media (min-width:720px){
  .po-mamul{ grid-template-columns:auto minmax(0,320px) minmax(0,1fr); }
  .po-mamul-not{ grid-column:auto; }
}

@media (max-width:560px){
  /* 320px'te gövde ≥14px (mobil kural masaüstü 10 puntoyu EZER). */
  .po-ozel-metin small{ font-size:14px; }
  .po-ozel-tik{ padding:12px; gap:10px; }
  .po-ozel-rozet, .prod-ozel-rozet, .prod-yd-rozet{ font-size:12px; }
}

.peron-prod-group.active::before{ background:var(--pri-on); }
@media (max-width:480px){
  /* Dar ekranda çipler tek satıra sığmaz; sarmalanır. Yatay kaydırma YOK.
     🔴 `min-height` BURADA EZİLMEZ. Eski kural 38px'e DÜŞÜRÜYORDU — üstelik
        kendi yorumu "dokunma hedefi büyür" diyordu: yorum ile kod tersti ve
        44px kuralı tam da en çok gerektiği yerde (320-480px, parmakla dokunulan
        genişlikler) ihlal ediliyordu. Taban 44px zaten mobile-first; media
        sorgusu yalnız yazı boyutunu ayarlar. */
  .peron-prod-group{ font-size:13px; }
  /* 🔴 KOMŞU DOKUNMA HEDEFLERİ ARASI ≥8px (zorunlu mobil kural). Taban `gap:6px`
     masaüstünde fare için sorun değil; parmakla 6px, 44px'lik iki hedefi
     bitişik yapıp yanlış çipe basmaya yol açıyor. ÖLÇÜLDÜ: 390px'te komşu
     boşluk 6px idi. Media yalnız BÜYÜTÜR — masaüstü düzeni değişmez. */
  .peron-prod-groups{ gap:8px; }
}

/* ── ÜRÜN TÜRÜ SEÇİCİSİ — 1.315.0 (MOBİL, masaüstü DEĞİŞMEZ) ────────────────
   🔴 Bu segmented kontrol 1.315.0'da ZORUNLU hâle geldi: yeni üründe hiçbir
      seçenek ön seçili gelmiyor, kullanıcı parmakla dokunmak ZORUNDA. Tasarım
      denetimi ölçtü: buton yüksekliği 360-1440px'te 27,3px, 320px'te 41,4px —
      44px eşiğinin ALTINDA; komşu boşluk 3,8px (eşik 8px); 320px'te "Yarı
      Mamül" iki satıra kırılıyordu.
   🔴 KAPSAM `#m-prod-type` İLE SINIRLI. `.peron-seg-opt` eklentinin her yerinde
      (KDV dahil/hariç, para birimi…) kullanılıyor; global min-height vermek bu
      sürümün ölçmediği onlarca ekranın düzenini değiştirirdi. Ölçülmemiş yeri
      değiştirmemek, "hepsini düzeltmek"ten yeğdir.
   🔴 YALNIZ @media İÇİNDE: masaüstü render yolu (≥769px) BİREBİR aynı kalır. */
@media (max-width: 768px) {
    #m-prod-type { gap: 8px; }
    #m-prod-type .peron-seg-opt {
        min-height: 44px;
        white-space: nowrap;   /* 320px'te "Yarı Mamül" satır kırılması */
        box-sizing: border-box;
    }
}

/* ═══ STOK KARTI ÖLÇÜLERİ — 1.318.0 ══════════════════════════════════════════
   En × Boy × Yükseklik + birim; altında hesaplanan m² / m³.
   🔴 Mobile-first: temel kural DAR ekran, @media (min-width) yalnız SIKIŞTIRIR.
      Yeni seçicilerdir, mevcut hiçbir kuralla çakışmaz (masaüstü render'ı
      değiştirmez — proje "MOBİL KURALI" şartı).
   🔴 Sayı hücreleri tabular-nums: eksenler alt alta hizalı okunsun. */
.m-dim-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.m-dim-row .m-dim-in {
    flex: 1 1 84px;
    min-width: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Dokunma hedefi ≥44px — ölçüldü: peron-input dar ekranda 40px veriyor. */
.m-dim-row .m-dim-in,
.m-dim-row .m-dim-unit { min-height: 44px; }
.m-dim-row .m-dim-x {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}
.m-dim-row .m-dim-unit {
    flex: 0 0 auto;
    width: 84px;
}
/* 🔴 SONUÇ SATIRI DAR EKRANDA SARAR. nowrap + overflow-x:auto ile 999999999 gibi
   uzun girdide m³ sonucu ekran dışına çıkıp GÖRÜNMEZ oluyordu (ölçüldü 390px:
   scrollWidth 571 / clientWidth 354). Hesabın kendisi kırpılamaz — sarsın. */
.m-dim-out {
    margin-top: 7px;
    min-height: 20px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pri-text);
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
}
.m-dim-out .m-dim-raw {
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 9px;
}

/* 🔴 ≤479px: üç kutu yan yana sığmıyor ve 2+2 ASİMETRİK kırılıyordu (ölçüldü 320px:
   En 121 · Boy 121 · Yükseklik 192 — sonuncusu 71px geniş, "×" bağı kopuyor).
   Alt alta dizmek hem simetriyi hem okunabilirliği geri veriyor; hangi kutunun ne
   olduğunu placeholder (En/Boy/Yükseklik) zaten söylüyor. */
@media (max-width: 479px) {
    .m-dim-row { flex-direction: column; align-items: stretch; }
    .m-dim-row .m-dim-x { display: none; }
    .m-dim-row .m-dim-unit { width: 100%; }
}

@media (min-width: 769px) {
    .m-dim-row .m-dim-in,
    .m-dim-row .m-dim-unit { min-height: 0; }
    .m-dim-row .m-dim-unit { width: 76px; }
    .m-dim-out { font-size: 13px; white-space: nowrap; }
}

/* 🔴 TEDARİKÇİ SATIRI — ÖNCEDEN VAR OLAN TAŞMA (ölçüldü, 1.318.0'da yakalandı).
   `.peron-sup-row` flex ve çocuklarının çoğu `flex-shrink:0`; 390px'te modal gövdesi
   scrollWidth 622 / clientWidth 390 (232px) ile yatay kayıyordu — proje kuralı
   "modal içi yatay taşma OLMAMALI". YALNIZ ≤768px'te sarma açılır; masaüstü satır
   düzeni (714px, taşmasız) DEĞİŞMEZ. */
@media (max-width: 768px) {
    .peron-sup-row { flex-wrap: wrap; }
    .peron-sup-row .sup-contact { flex: 1 1 100%; }
    .peron-sup-row .sup-price { flex: 1 1 110px; width: auto; }
}

/* ═══ MOBİL SON SÖZ — BELGELİ TESLİM LOT SATIRI (≤768px) ═════════════════════
   ÖLÇÜLEN KUSUR (Chrome, gerçek modal, 12 lot):
     320px → kod 779,7px · satır 148px · 12 lot kutusu 1936px  (görünür alan 282px)
     360px → kod 779,7px · satır 148px · kutu 1936px           (görünür alan 322px)
     390px → kod 779,7px · satır 148px · kutu 1936px           (görünür alan 352px)
     768px → kod 781,3px · satır 148px · kutu 1936px           (görünür alan 730px)
   Kod kutusu VIEWPORT'TAN BAĞIMSIZ sabitti. Sebep ÜÇ katmanlı:
     1) Lot düzenleyicisi ana tablonun `<td colspan>` hücresinin İÇİNDEDİR
        (peron-mod-orders.js `lotSatiriCiz`). Tablo `.peron-table--fixed` →
        `min-width: max-content`; colgroup toplamı (88+88+96+180+96+80+152 = 780
        + esnek Ürün kolonu) tabloyu 833,7px'te tutar. `.rd-wrap` yatay kayar,
        ama hücrenin İÇİNDEKİ `100%` hâlâ 808px'tir.
     2) `.rd-lot-code { flex: 1 1 calc(100% - 28px) }` → 779,7px: 1. satır TAM dolar.
     3) `.rd-lot-qty { flex: 1 1 auto }` — taban `auto` olduğu için `width` okunur ve
        `.peron-modal .peron-table.rd-t input { width: 100% }` (bkz. 12046) lot
        girdilerine de uygulanır → miktarın TABANI da %100 (807,7px) olur, 2. satırı
        tek başına doldurur, sil düğmesi 3. SATIRA düşer.
   🔴 GENİŞLİK SINIRI TEK BAŞINA YETMEZ (ölçüldü): yalnız kutuyu 280px'e indirince
      kod 226px'e indi ama satır HÂLÂ 3, yükseklik HÂLÂ 148px kaldı. (2) ve (3)
      sırayla 1. ve 2. satırı tam doldurduğu için sarma değişmiyor.
   🔴 SEÇİCİ ÖZGÜLLÜĞÜ YÜK TAŞIR: `.rd-lot-box { max-width: … }` (0,1,0) ÖLÜ KURALDIR —
      `.peron-table--fixed > tbody > tr > td > div { max-width: 100% }` (0,1,4 · :6277)
      onu ezer; ölçtüm, computed değer "100%" kaldı ve kutu 833,7px'te durdu.
   🔴 `position: sticky; left: 0` GENİŞLİĞİ DÜZELTMEZ (tek başına ölçüldü: taban ile
      birebir aynı). Görevi başkadır: kutu daraldıktan sonra operatör tabloyu sağa
      kaydırınca düzenleyici ekrandan çıkıyordu (390px'te sol kenar -463px ölçüldü);
      sticky ile sol kenar 19px'te KALIR.
   🔴 `calc(100vw - 40px)` NEREDEN: ≤768px'te modal tam genişlik alt-sheet'tir
      (`.peron-modal{padding:0}` + kutu `max-width:100%`), `.peron-modal-body` dolgusu
      2×18px ve `.rd-wrap` kenarlığı 2×1px → görünür alan = 100vw − 38px. Bu formül
      320/360/390/768'de birebir doğrulandı (282/322/352/730). 40px = 2px paylı sınır.
   ÖLÇÜLEN SONUÇ (yama sonrası, 12 lot):
     320px → kutu 280 · kod 226 · miktar 202 · sil 44 · İKİ satır · satır 96px · kutu 1326px
     360px → kutu 320 · kod 266 · miktar 242 · sil 44 · İKİ satır · satır 96px · kutu 1326px
     390px → kutu 350 · kod 296 · miktar 272 · sil 44 · İKİ satır · satır 96px · kutu 1326px
     768px → kutu 728 · kod 674 · miktar 650 · sil 44 · İKİ satır · satır 96px · kutu 1312px
     Her genişlikte satır · kutu · dipnot `scrollWidth == clientWidth`, gövde yatay
     kayma YOK, girdi yazısı 16px, sil ve "+ Lot ekle" 44×44px KORUNDU.
   🔴 MASAÜSTÜ (1440px) ÖLÇÜLDÜ VE DEĞİŞMEDİ: kod 240 · miktar 110 · sil 30 · TEK satır ·
      30px · kutu 502px — yama öncesi/sonrası BİREBİR AYNI. Kuralları bu media
      query'nin DIŞINA yazmak masaüstünü BOZAR (aynı ölçümde kod 240 → 193,9 ·
      miktar 110 → 848,1). Sarmalayıcı süs değil, kapıdır. */
@media (max-width: 768px) {
    .peron-modal .peron-table.rd-t > tbody > tr.rd-lotrow > td > .rd-lot-box {
        position: sticky;
        left: 0;
        max-width: calc(100vw - 40px);
    }
    /* 52px = sil düğmesi 44px + satır boşluğu 8px → miktar ile sil AYNI satırda kalır.
       `flex: 1 1 0` da aynı sonucu veriyor (ölçüldü, birebir); açık `calc` tercih
       edildi çünkü niyeti ("sil düğmesine yer ayır") kodun kendisi söylüyor ve
       dosyadaki `calc(100% - 28px)` deyimiyle aynı dili konuşuyor. */
    .peron-modal .peron-table.rd-t .rd-lot-row .rd-lot-qty { flex: 1 1 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RAPOR SÜZGEÇ ÇUBUKLARI — TEK SATIR · 9 PUNTO (1.328.0)
   ══════════════════════════════════════════════════════════════════════════════
   Kullanıcı kuralı birebir: *"raporlar ekranındaki üstteki filtreler aşırı büyük,
   hepsini 8,5 veya 9 punto yap ve tek satıra sığacak şekilde düzenle"* ve
   *"hammadde tüketimi rapor ekranındaki filtreler 2 satıra yayılmış, tek satıra
   sığdır"*.

   ── ÖLÇÜLEN ESKİ DURUM (1440px, gerçek tarayıcı) ────────────────────────────
     sekme      satır  çubuk yüksekliği   alan yazısı / yüksekliği
     gunluk       3        71px            16px / 44px
     uretim       3       125px            16px / 44px
     detay        3       125px            16px / 44px
     hammadde     3       159px            12,5px / 36px   (1024px'te 4 satır · 232px)
     sevk         3        67px            13px  / 44px
   Üç satırın kaynağı: `.up-cipler` ve `.up-eylem` (ve kardeşleri) `flex: 1 1 100%`
   taşıyordu → çipler ve düğmeler HER ZAMAN kendi satırına iniyordu.

   ── BU BLOĞUN YAPTIĞI ───────────────────────────────────────────────────────
   1) `flex-wrap: nowrap` → alanlar · çipler · düğmeler AYNI satırda.
   2) 9 punto (12px) alan yazısı, 10px etiket, 28px alan yüksekliği.
   3) 🔴 `overflow-x: auto` ÇUBUĞUN KENDİSİNDE. Altı alan + beş çip + dört düğme
      bazı genişliklerde fiziken sığmaz; sığmadığında ÇUBUK kendi içinde kayar,
      `body` ASLA kaymaz (projenin mobil sözleşmesi: geniş içerik KENDİ kabında
      kayar). Alternatif olan `wrap` ikinci satırı geri getirirdi — kullanıcının
      kaldırılmasını istediği şeyin ta kendisi.
   4) `overflow-y: visible` DEĞİL — `overflow-x: auto` y'yi de `auto` yapar ve
      `align-items: flex-end` ile birlikte odak halkasını kırpardı; bu yüzden
      dikey nefes payı `padding-bottom` ile verilir.

   ── NEDEN YALNIZ (min-width: 769px) and (pointer: fine) ─────────────────────
   🔴 TELEFONDA 16px PAZARLIKSIZ: iOS Safari 16px altındaki bir alana odaklanınca
      sayfayı büyütür ve bir daha küçültmez. CLAUDE.md'nin kendi kuralı: "320px'te
      input >=16px — bu satır MOBİLDE HER ZAMAN ÖNCELİKLİ, 10 punto kuralıyla
      çelişirse mobil kural kazanır." Dokunma hedefi de >=44px kalmak zorunda.
      Bu yüzden 9 punto YALNIZ fare rejimindeki geniş ekrana uygulanır; telefonun
      mevcut kuralları (dosya sonundaki MOBİL SON SÖZ blokları) DOKUNULMADAN kalır.

   🔴 BLOK DOSYANIN SONUNDA: `#up-shell .up-eylem` gibi kurallar 15450+ satırlarda
      AYNI medya sorgusu ve AYNI özgüllükle tanımlı. Aynı özgüllükte sonra gelen
      kazanır → bu blok onların ARDINDA olmak ZORUNDA. (Dosyanın kendi tuzağı:
      "MOBİL SON SÖZ" blokları da tam bu yüzden sondadır.)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (pointer: fine) {

    #rp-kok .rp-filtre,
    #up-shell .up-filtre,
    #dr-shell .dr-filtre,
    #sv-shell .sv-filtre,
    #hm-shell .hm-filtre {
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 3px;          /* odak halkası kırpılmasın */
        margin-bottom: 12px;
        scrollbar-width: thin;
    }

    /* ── Alan kutusu: etiket 10px üstte, kontrol 28px ── */
    #up-shell .up-f,
    #dr-shell .dr-f,
    #hm-shell .hm-f,
    #rp-kok .rp-filtre .rp-tarih,
    #sv-shell .sv-filtre .rp-tarih {
        gap: 2px;
        flex: 0 1 auto;
        min-width: 0;
    }

    #rp-kok .rp-filtre .peron-form-label,
    #up-shell .up-f .peron-form-label,
    #dr-shell .dr-f .peron-form-label,
    #sv-shell .sv-filtre .peron-form-label,
    #hm-shell .hm-f .peron-form-label {
        font-size: 10px;
        line-height: 1.3;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 9 punto = 12px. Yükseklik 44 → 28px (çubuk 125px'ten ~48px'e iner). */
    #rp-kok .rp-filtre .peron-input,
    #rp-kok .rp-filtre .peron-select,
    #up-shell .up-filtre .peron-input[type="date"],
    #up-shell .up-filtre .peron-select,
    #dr-shell .dr-filtre .peron-input[type="date"],
    #dr-shell .dr-filtre .peron-select,
    #sv-shell .sv-filtre .peron-input,
    #hm-shell .hm-filtre .peron-input,
    #hm-shell .hm-filtre .peron-select {
        width: 100%;
        min-height: 28px;
        height: 28px;
        padding: 0 7px;
        font-size: 12px;
        line-height: 1.2;
    }

    /* Tarih/ay alanı: UA'nın içsel genişliği ~120px; takvim ikonu için 104px yeter. */
    #rp-kok .rp-filtre .rp-tarih,
    #sv-shell .sv-filtre .rp-tarih   { flex: 0 0 108px; }
    #up-shell .up-f--tarih,
    #dr-shell .dr-f--tarih           { flex: 0 0 108px; }
    #hm-shell .hm-f--ay              { flex: 0 0 112px; }

    /* Açılır kutular: kalanı paylaşır, 96px altına düşmez (seçili değer kırpılır). */
    #up-shell .up-f:not(.up-f--tarih),
    #dr-shell .dr-f:not(.dr-f--tarih),
    #hm-shell .hm-f:not(.hm-f--ay)   { flex: 1 1 108px; min-width: 96px; }
    /* ÖLÇÜLDÜ: "Hammadde + yarı mamul" 142px sürüyor, kutu 96px — kapalı hâlde
       seçili süzgeç okunamıyordu. Çipler kendi kabında kaydığı için (yukarıya bak)
       bu 24px'lik pay artık kimseyi ezmiyor. */
    #hm-shell .hm-f--tur             { min-width: 120px; }

    /* ── Çipler: TEK SATIR, kaymaz, kendi satırına inmez ── */
    /* 🔴🔴 FATAL ONARILDI (tasarım denetimi, 2026-09-03) — ÇİP ŞERİDİ TAŞIYORDU.
       ÖLÇÜLDÜ (gerçek `getBoundingClientRect`, çakışan piksel):
         1024px → Üretim Raporu 57px · Detaylı 5px · Hammadde 40-80px
         1440px → Detaylı 16px · Hammadde 42px
       Kök neden: kutu `flex: 0 1 auto; min-width: 0` ile SIFIRA kadar küçülüyordu
       (1024px'te Hammadde'de ölçülen gerçek genişlik 15px), ama içindeki
       `.rp-cip` `white-space: nowrap` ile küçülmeyi REDDEDİYOR → çipler 15px'lik
       kabından taşıp bir sonraki eylem düğmesinin üstüne biniyordu.
       🔴 ÜST KAPTAKİ `overflow-x: auto` BUNU YAKALAMIYORDU: taşma çip↔düğme
          sınırında oluşuyor, `.rp-filtre` düzeyinde `scrollWidth == clientWidth`
          görünüyordu. Bu yüzden ölçüm de "taşma yok" diyordu — bakılan yer yanlıştı.
       Çözüm: kutu KENDİ İÇİNDE kaysın. Çipler artık kabı aşmıyor; sığmayan çip
       kaydırmayla erişiliyor ve hiçbir düğmenin üstüne binmiyor. */
    #rp-kok .rp-cipler,
    #up-shell .up-cipler,
    #dr-shell .dr-cipler,
    #sv-shell .rp-cipler,
    #hm-shell .rp-cipler {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 4px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* Kaydırma çubuğu 28px'lik şeridin içinde yer kaplayıp çipleri kırpardı. */
        padding-bottom: 0;
    }
    /* Kaydırma çubuğu gizli olduğu için "devamı var" işareti maskeyle verilir:
       şeridin sağ kenarı son 14px'te soluyor. Kaydırma yoksa maske görünmez
       (`mask-image` tam opak kalır) — sabit bir gölge çizmedik. */
    #rp-kok .rp-cipler,
    #up-shell .up-cipler,
    #dr-shell .dr-cipler,
    #sv-shell .rp-cipler,
    #hm-shell .rp-cipler {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent 100%);
    }
    #rp-kok .rp-cipler::-webkit-scrollbar,
    #up-shell .up-cipler::-webkit-scrollbar,
    #dr-shell .dr-cipler::-webkit-scrollbar,
    #sv-shell .rp-cipler::-webkit-scrollbar,
    #hm-shell .rp-cipler::-webkit-scrollbar { display: none; }
    /* Çipler kendi kaplarında kaydığı için ASLA küçülmemeli (yarım çip okunmaz). */
    #rp-kok .rp-filtre .rp-cip,
    #up-shell .up-filtre .rp-cip,
    #dr-shell .dr-filtre .rp-cip,
    #sv-shell .sv-filtre .rp-cip,
    #hm-shell .hm-filtre .rp-cip { flex: 0 0 auto; }
    /* Eylem grubu artık çiplerin baskısıyla ezilmez. */
    #rp-kok .rp-eylem,
    #up-shell .up-eylem,
    #dr-shell .dr-eylem,
    #sv-shell .rp-eylem,
    #hm-shell .rp-eylem { flex: 0 0 auto; }

    #rp-kok .rp-filtre .rp-cip,
    #up-shell .up-filtre .rp-cip,
    #dr-shell .dr-filtre .rp-cip,
    #sv-shell .sv-filtre .rp-cip,
    #hm-shell .hm-filtre .rp-cip {
        min-height: 28px;
        height: 28px;
        padding: 0 9px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* ── Eylem düğmeleri: sağa yaslı, tek satır ── */
    #rp-kok .rp-eylem,
    #up-shell .up-eylem,
    #dr-shell .dr-eylem,
    #sv-shell .rp-eylem,
    #hm-shell .rp-eylem {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 4px;
        margin-left: auto;
    }

    #rp-kok .rp-eylem .peron-btn,
    #up-shell .up-eylem .peron-btn,
    #dr-shell .dr-eylem .peron-btn,
    #sv-shell .rp-eylem .peron-btn,
    #hm-shell .rp-eylem .peron-btn {
        flex: 0 0 auto;
        min-height: 28px;
        height: 28px;
        padding: 0 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* 🔴 "Süzgeci sıfırla" YERİNE "Sıfırla": markup her iki metni de taşıyor
          (`.rp-e-uzun` / `.rp-e-kisa`, `hidden` ile). Tek satır bütçesinde uzun
          etiket ~92px yiyor; kısası ~46px. İkon kalır, anlam kaybolmaz. */
    #rp-kok .rp-eylem .rp-e-uzun,
    #up-shell .up-eylem .rp-e-uzun,
    #dr-shell .dr-eylem .rp-e-uzun,
    #sv-shell .rp-eylem .rp-e-uzun,
    #hm-shell .rp-eylem .rp-e-uzun { display: none; }

    /* 🔴 `!important` KULLANILMADI (proje yasağı). Markup `<span class="rp-e-kisa"
       hidden>` yazıyor ve UA'nın `[hidden]{display:none}` kuralı işliyor; onu ezmenin
       doğru yolu ÖZGÜLLÜK ve `[hidden]` niteliğinin KENDİSİdir — bu deyim dosyada
       zaten var (`.rp-e-kisa[hidden] { display: inline; }`, satır ~19259). */
    #rp-kok .rp-eylem .rp-e-kisa[hidden],
    #up-shell .up-eylem .rp-e-kisa[hidden],
    #dr-shell .dr-eylem .rp-e-kisa[hidden],
    #sv-shell .rp-eylem .rp-e-kisa[hidden],
    #hm-shell .rp-eylem .rp-e-kisa[hidden] { display: inline; }

    #rp-kok .rp-eylem .peron-btn svg,
    #up-shell .up-eylem .peron-btn svg,
    #dr-shell .dr-eylem .peron-btn svg,
    #sv-shell .rp-eylem .peron-btn svg,
    #hm-shell .rp-eylem .peron-btn svg { width: 13px; height: 13px; }

    /* Sevkiyat: iki tarih zaten bir sarmalayıcıda — o da tek satır kalsın. */
    #sv-shell .sv-filtre .rp-tarih-ikili {
        display: flex; flex-wrap: nowrap; gap: 8px; flex: 0 0 auto;
    }
}

/* ── 769-1199px: TEK SATIR BÜTÇESİ DARALTILIR ────────────────────────────────
   ÖLÇÜLDÜ (gerçek tarayıcı, üstteki blok uygulandıktan sonra):
     1440px → taşma 0px (beş sekmenin hepsi)   · 1280px → 0px
     1024px → detay 7px · hammadde 13px        ·  900px → 77-137px
   Kıl payı taşmalar yalnız dolgu/boşluk kaynaklı; bu blok onları kapatır.
   🔴 SIĞMAYAN GENİŞLİKTE (≈900px altı fare rejimi) ÇUBUK KENDİ İÇİNDE KAYAR —
      `body` kaymaz. İkinci satıra dönmek kullanıcının kaldırılmasını istediği
      şeydi; kontrolü gizlemek ise işlev kaybı olurdu. Kaydırma, ikisinin
      arasındaki tek dürüst seçenek. */
@media (min-width: 769px) and (max-width: 1199.98px) and (pointer: fine) {
    #rp-kok .rp-filtre,
    #up-shell .up-filtre,
    #dr-shell .dr-filtre,
    #sv-shell .sv-filtre,
    #hm-shell .hm-filtre { gap: 6px; }

    #rp-kok .rp-filtre .rp-cipler,
    #up-shell .up-cipler,
    #dr-shell .dr-cipler,
    #sv-shell .rp-cipler,
    #hm-shell .rp-cipler { gap: 3px; }

    #rp-kok .rp-filtre .rp-cip,
    #up-shell .up-filtre .rp-cip,
    #dr-shell .dr-filtre .rp-cip,
    #sv-shell .sv-filtre .rp-cip,
    #hm-shell .hm-filtre .rp-cip { padding: 0 7px; font-size: 10.5px; }

    #rp-kok .rp-filtre .rp-tarih,
    #sv-shell .sv-filtre .rp-tarih { flex: 0 0 100px; }
    #up-shell .up-f--tarih,
    #dr-shell .dr-f--tarih         { flex: 0 0 100px; }
    #hm-shell .hm-f--ay            { flex: 0 0 104px; }

    #up-shell .up-f:not(.up-f--tarih),
    #dr-shell .dr-f:not(.dr-f--tarih),
    #hm-shell .hm-f:not(.hm-f--ay) { flex: 1 1 100px; min-width: 88px; }

    #rp-kok .rp-eylem,
    #up-shell .up-eylem,
    #dr-shell .dr-eylem,
    #sv-shell .rp-eylem,
    #hm-shell .rp-eylem { gap: 3px; }

    #rp-kok .rp-eylem .peron-btn,
    #up-shell .up-eylem .peron-btn,
    #dr-shell .dr-eylem .peron-btn,
    #sv-shell .rp-eylem .peron-btn,
    #hm-shell .rp-eylem .peron-btn { padding: 0 6px; font-size: 10.5px; }
}

/* ── TABLET (dokunmatik, 620px+): Hammadde süzgeci 8 SATIRDAN kurtulur ───────
   ÖLÇÜLDÜ 768px: `#hm-shell .hm-f { flex: 1 1 100% }` tabanı yüzünden ALTI alan
   alt alta iniyor ve çubuk 584px yükseliyordu (uretim/detay 206px). Alanlar
   satır paylaşınca 768px'te ~4 satıra iner.
   🔴 YAZI BOYU VE DOKUNMA HEDEFİ DEĞİŞMEZ: 16px / 44px yerinde kalır (iOS
      odak-zoom kuralı). Değişen tek şey `flex-basis` — yani KAÇ TANE yan yana
      durabileceği. Bu, mobil sözleşmeyi ihlal etmeden yükseklik kazandırır. */
@media (min-width: 620px) {
    #hm-shell .hm-f       { flex: 1 1 210px; min-width: 200px; }
    #hm-shell .hm-f--ay   { flex: 1 1 150px; min-width: 140px; }
    #hm-shell .hm-f--ara  { flex: 1 1 220px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   İŞ EMİRLERİ — MASAÜSTÜ TABLO + TELEFON KARTI (1.328.0)
   ══════════════════════════════════════════════════════════════════════════════
   Kullanıcı: *"iş emri kısmını mobile uygun hale getir ve çok şık tasarıma sahip
   olsun."* Ekran 1.328.0'a kadar telefonda HİÇ AÇILMIYORDU
   (`mobilUyumlu('workorders')` false) — sekiz kolonlu masaüstü tablosu dar ekranda
   okunamayacağı için bilerek gizlenmişti.

   ── İKİNCİ BİR RENDER YOLU YAZILMADI ────────────────────────────────────────
   Ayrı bir `workorders-mobile` modülü açmak yerine AYNI satır karta dönüşüyor;
   hücre etiketleri `data-lbl`den geliyor. Desen `.rk-table`den (risk ekranı,
   ~16825) birebir devralındı. İki ayrı render yolu, iki görünümün zamanla
   ayrışması demekti (bu projede üç kez yaşandı: sevkiyat planı · ürün ağacı ·
   personel).

   ── SATIR İÇİ STİL YASAK ────────────────────────────────────────────────────
   🔴 Kolon genişlikleri `<col class="woc-*">` üzerinden CSS'te. 1.327.0'da
      ölçüldü: `<col style="width:Npx">` satır içi genişlik medya sorgusunu EZER
      ve kolon düşürmeyi/daraltmayı FİİLEN İMKÂNSIZ kılar.
   🔴 Gecikmiş termin rengi de satır sınıfıyla (`.is-gecikti`) — satır içi
      `color:var(--rose)` gece modunda token ezmesine kapalıydı.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Ekran okuyucu için görünmez başlık (boş <th> yerine). */
.wo-t .wo-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Araç çubuğu: mobile-first (tek kolon), fare rejiminde yan yana ── */
.wo-arac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wo-arac .wo-ara { flex: 1 1 100%; min-width: 0; }
/* 🔴 16px PAZARLIKSIZ: iOS 16px altı alana odaklanınca sayfayı büyütür. */
.wo-arac .wo-ara input { width: 100%; min-height: 44px; font-size: 16px; }
.wo-arac .wo-sec { flex: 1 1 140px; min-width: 0; min-height: 44px; font-size: 16px; }

@media (min-width: 641px) {
    .wo-arac .wo-ara { flex: 1 1 240px; max-width: 380px; }
    .wo-arac .wo-sec { flex: 0 0 auto; min-width: 132px; }
}
@media (min-width: 769px) and (pointer: fine) {
    .wo-arac .wo-ara input,
    .wo-arac .wo-sec { min-height: 34px; font-size: 13px; }
}

/* ── Sayfalayıcı (satır içi style yerine) ── */
.wo-pager {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--content-bg);
}

/* ── Masaüstü kolon bütçesi (1.380.0) ───────────────────────────────────────
   Kullanıcı: *"iş emrini atayan kişi gözükmüyor"* → "Atayan" kolonu; *"onayla reddet
   butonları tarih kısmının üstüne çıkıyor"* → onay/ret düğmeleri DURUM hücresine
   taşındı (eylem kolonu artık yalnız düzenle ikonunu taşır, 112 → 44px).
   Sabit toplam 150+116+116+84+176+92+92+44 = 870px; "Başlık" AUTO (kalanı emer).
   İE No kolonu akordeon okunu da taşır (24px + 6px boşluk). */
.wo-t col.woc-no   { width: 150px; }
.wo-t col.woc-bas  { width: auto;  }
.wo-t col.woc-atn  { width: 116px; }
.wo-t col.woc-kisi { width: 116px; }
.wo-t col.woc-onc  { width: 84px;  }
.wo-t col.woc-drm  { width: 176px; }
.wo-t col.woc-bsl  { width: 92px;  }
.wo-t col.woc-bit  { width: 92px;  }
.wo-t col.woc-eyl  { width: 44px;  }

/* ── TEK SATIR + AKORDEON (1.380.0) ─────────────────────────────────────────
   Kullanıcı: *"iş emirleri tek satır olarak ayarla akordiyon sistem olacak,
   tıklayınca iş emri konusu gözükecek"*. Açıklama özet satırdan detay satırına
   taşındı; özet satırdaki her hücre TEK satırdır (üç nokta ile kırpılır). */
.wo-t .wo-row.is-expandable { cursor: pointer; }
.wo-t .wo-idwrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wo-t .wo-acc {
    flex: 0 0 auto; box-sizing: border-box;
    width: 24px; height: 24px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent;
    color: var(--text-muted); cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.wo-t .wo-acc:hover { background: var(--pri-light); color: var(--pri-text); }
.wo-t .wo-acc:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.wo-t .wo-row.is-open .wo-acc { transform: rotate(90deg); color: var(--pri-text); }
.wo-t .wo-row.is-open > td { background: var(--pri-light); }
.wo-t .wo-c-atn,
.wo-t .wo-c-kisi { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-t .wo-bos { color: var(--text-muted); }
.wo-t .wo-karar-grup { display: flex; gap: 6px; flex-wrap: nowrap; }
/* Onayla/Reddet birincil eylemdir → ≥36px (tasarım denetimi: 28px ölçüldü). */
.wo-t .wo-karar { box-sizing: border-box; min-height: 36px; padding: 0 10px; font-size: 11px; }

.wo-t .wo-detail-row > td.wo-detail-cell { padding: 0; background: var(--content-bg); }
.wo-t .wo-detay { box-sizing: border-box; padding: 10px 16px 12px 44px; }
.wo-t .wo-dd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
.wo-t .wo-dd { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wo-t .wo-dd--genis { grid-column: 1 / -1; }
/* 1.415.2 — ayrıntıdaki Öncelik yalnız kolonun düştüğü bantta (kap ≤781px, telefon hariç) görünür; o bantta beşinci kalem
   iki kolonlu ızgarada tek kalmasın diye tarih satırı tam genişlik alır. */
.wo-t .wo-dd--onc { display: none; }
.wo-t .wo-dd-lbl { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.wo-t .wo-dd-val { font-size: 12px; color: var(--text-primary); overflow-wrap: anywhere; }
.wo-t .wo-konu { white-space: pre-wrap; line-height: 1.5; }
.wo-t .wo-onayli { color: var(--green-ink); font-weight: 600; }
.wo-t .wo-bekliyor { color: var(--amber-ink); font-weight: 600; }

.wo-t .wo-c-no code { font-size: 11.5px; }
.wo-t .wo-bas {
    display: block; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 1.380.0 — özet satır açıklama basmıyor; sınıf eski çıktı yolları için duruyor. */
.wo-t .wo-ack {
    display: block; margin-top: 2px;
    font-size: 11.5px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wo-t .wo-c-kisi,
.wo-t .wo-c-bsl,
.wo-t .wo-c-bit { color: var(--text-secondary); }
.wo-t .wo-eyl { display: flex; gap: 4px; justify-content: flex-end; }

/* Gecikmiş termin — satır sınıfından, token ile (gece modu ezebilir). */
/* 🔴 METİN İÇİN `--rose` DEĞİL `--rose-ink`: token bloğunun kendi notu (satır 90)
   *"Renkli SAYI/METİN için AA-koyu türevler; dolgu/nokta/buton --rose kalır"* diyor.
   `--rose` beyaz zeminde AA altında; 3px'lik şerit (dolgu) `--rose` kullanır, TERMİN
   TARİHİ (metin) `--rose-ink`. Eski satır içi stil `--rose` yazıyordu — o da AA
   ihlaliydi, taşınırken düzeltildi. Sabit hex YOK: iki token da her iki temada var. */
.wo-t .wo-row.is-gecikti .wo-c-bit { color: var(--rose-ink); font-weight: 700; }

/* Dar masaüstünde iki tarih kolonu düşer: "Başlangıç" bilgisi karttaki kadar
   kritik değil, "Bitiş" (termin) kalır.
   🔴 `visibility: collapse` + `width: 0` — `display:none` colgroup'ta çalışmaz. */
/* 🔴 `nth-child` KULLANILMAZ — ÖLÇÜLDÜ: `attachMultiSelect` tablonun BAŞINA bir
   seçim kolonu ve bir `<col class="peron-sel-col">` ekliyor; kolon sayısı 8 değil
   9 oluyor ve tüm `nth-child` sayıları BİR KAYIYOR. İlk yazımda `nth-child(6)`
   "Başlangıç" sanılmıştı, gerçeği "Durum"du → dar masaüstünde Durum BAŞLIĞI
   gizlenip hücresi kalacaktı (başlık ile gövde bir kolon kayardı). */
/* 1.380.0 — "Atayan" kolonu eklendi; düşme sırası: Başlangıç (≤1280) → Atanan (≤1024)
   → Atayan (≤900). Düşen bilgi detay satırında (akordeon) HER ZAMAN durur. */
/* 🔴 1.380.0 — EŞİKLER KAP GENİŞLİĞİNE TAŞINDI (`@container wokap`). Tasarım denetimi:
   1024px'te (kenar çubuğu açık) kap ~700px iken yalnız iki kolon düşmüştü; sabit
   toplam kabı aşınca `table-layout: fixed` kolonları ORANTILI ezdi — Durum 176 → 84px,
   "Reddet" Bitiş tarihinin üstüne 50px bindi. Eşik = kalan kolonların toplamı
   (seçim 36 + sabitler + Başlık için 200): 1106 → −Başlangıç 1014 → −Atanan 898 →
   −Atayan 782 → −Öncelik 698. Durum (onay/ret) HİÇ düşmez. */
.wo-wrap { container: wokap / inline-size; }
/* 🔴🔴 HÜCRE `display:none` OLMAZ — ÖLÇÜLDÜ (tasarım denetimi, 1024px, kap 904px).
   `display:none` hücreyi satırın AKIŞINDAN çıkarır ama `<col>` yerinde kalır; sonraki her
   hücre bir kolon SOLA kayar: Öncelik hücresi Atanan'ın 0px kolonuna, Durum Öncelik'in
   84px kolonuna, Bitiş Durum'un 176px kolonuna düşüyordu → "Reddet" Bitiş tarihine 50px
   biniyordu (eski @media kuralları da aynı hatayı taşıyordu). Hücre YERİNDE kalır,
   yalnız görünmez olur; kolonu `visibility: collapse` 0px'e indirir. */
@container wokap (max-width: 1105px) {
    .wo-t col.woc-bsl { visibility: collapse; width: 0; }
    .wo-t .wo-c-bsl, .wo-t thead th.woh-bsl { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; white-space: nowrap; }
}
@container wokap (max-width: 1013px) {
    .wo-t col.woc-kisi { visibility: collapse; width: 0; }
    .wo-t .wo-c-kisi, .wo-t thead th.woh-kisi { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; white-space: nowrap; }
    .wo-t .wo-dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wokap (max-width: 897px) {
    .wo-t col.woc-atn { visibility: collapse; width: 0; }
    .wo-t .wo-c-atn, .wo-t thead th.woh-atn { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; white-space: nowrap; }
}
@container wokap (max-width: 781px) {
    .wo-t col.woc-onc { visibility: collapse; width: 0; }
    .wo-t .wo-c-onc, .wo-t thead th.woh-onc { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; white-space: nowrap; }
    .wo-t .wo-dd--onc { display: flex; }
    .wo-t .wo-dd--tarih { grid-column: 1 / -1; }
}

/* ══ TELEFON (≤640px): SATIR → KART ═══════════════════════════════════════════
   🔴 `.peron-table--fixed` telefonda esnek kolonu 0px'e çökertir (projede
      ölçülmüş arıza) → `table-layout: auto` + blok akış.
   🔴 Kartın üst şeridi öncelik rengini taşır — "şık" olan şey süs değil,
      tarama hızıdır: göz önce ne kadar acil olduğunu görür.
   🔴🔴 1.416.0 — KART 10 SATIRLIK YIĞINDAN 5 SATIRLIK IZGARAYA (ölçüldü 390/360/320: kart 496 px, ekrana 1 kayıt).
      Kök neden: tablo tabanı her hücreye `height: var(--tbl-row-h)` = 44 px veriyordu; kartta 10 hücre alt alta
      10 × 44 px yığılıyordu. Hücre yüksekliği içeriğe iner, alanlar ızgarada eşleşir:
        seçim · İE no · öncelik / başlık / atayan · atanan / başlangıç · bitiş / durum · düzenle.
      Hiçbir alan düşmedi. Yazı 2026-09-07 kuralıyla mobil merdivene iner (eski "gövde ≥14px" kuralı kalktı):
      başlık 13 · değer `--m-fs` · etiket `--m-fs-xs`. Girdi 16 px kalır (iOS). */
@media (max-width: 640px) {
    .wo-t, .wo-t tbody, .wo-t tr, .wo-t td { display: block; width: auto; }
    .wo-t colgroup, .wo-t thead { display: none; }
    /* 🔴🔴 `min-width: 0` HAYATİ — TASARIM DENETİMİNDE ÖLÇÜLDÜ (1.328.0).
       Global kural `.peron-table--fixed { min-width: max-content; }`
       (peron-panel.css:6259) tablo KARTA çevrilirken sıfırlanmazsa `<table>`
       kutusu en uzun satıra göre büyür. Ölçüldü (390px ekran, kart kabı 374px):
         12 karakterlik başlık → tablo 372px  (sorun yok)
         45 karakterlik başlık → tablo 392px  (kap aşıldı)
         80 karakterlik başlık → tablo 662px
        129 karakterlik başlık → tablo 1197px · Atanan/Öncelik/Bitiş satırları
                                  ekranda TAMAMEN BOŞ görünüyor
       `.wo-wrap { overflow: visible }` bunu kesmiyor, dış `.peron-card`
       SESSİZCE kırpıyor: ne kaydırma çubuğu ne üç nokta — veri kayboluyor.
       `peron_work_orders.title` VARCHAR(255) (installer:5232), yani 45 karakter
       olağan bir başlıktır; yereldeki tek kayıt 7 karakter olduğu için ilk
       ölçümlerim bunu göremedi.
       🔴 Aynı tuzak için kod tabanında SEKİZ kardeş ekran zaten `min-width: 0`
          yazıyor (15596 · 15949 · 15994 · 16329 · 18182 · 19583 …) — dokuzuncusu
          bu. */
    .wo-t { table-layout: auto; border-collapse: separate; border-spacing: 0;
            min-width: 0; width: 100%; max-width: 100%; }
    .wo-wrap { overflow: visible; min-width: 0; }
    .wo-kart { background: transparent; border: 0; box-shadow: none; }

    /* Dar masaüstünde düşürülen kolonlar KARTTA GERİ GELİR — kartta yer var. */
    .peron-layout .wo-t > tbody > tr > td.wo-c-bsl,
    .peron-layout .wo-t > tbody > tr > td.wo-c-atn,
    .peron-layout .wo-t > tbody > tr > td.wo-c-kisi,
    .peron-layout .wo-t > tbody > tr > td.wo-c-onc { display: flex; visibility: visible; overflow: visible; white-space: normal; }

    /* Kolonlar: seçim 36 px (`.peron-sel-cell` genişliği `!important` 36 px) + iki eşit yarım. İçerik seçim kutusunun
       hizasından başlar; ikinci yarımın başlangıcı her kartta aynı x'tedir. Öncelik rozeti İE no satırının, düzenle
       düğmesi durum satırının sağ ucuna biner (aynı alan); altlarındaki öğe onlara dolgu ayırır — dördüncü bir kolon
       açılsaydı 320 px'te yarımlar 96 px'e iner, İE no üç satıra bölünürdü (ölçüldü). */
    .wo-t tbody tr.wo-row {
        position: relative;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "sec no  no"
            ".   bas bas"
            ".   atn kisi"
            ".   bsl bit"
            ".   drm drm";
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-bg);
        padding: 10px 12px 10px 4px;
        margin-bottom: 8px;
        overflow: hidden;
        /* Satır da kendi kabına kilitlenir: tablo `min-width:0` alsa bile tek bir
           kırılmayan uzun kelime (URL benzeri başlık) satırı şişirebilir. */
        min-width: 0;
        max-width: 100%;
    }
    /* Öncelik şeridi: kartın sol kenarı DEĞİL üst kenarı — sol şerit projenin
       "AI klişesi" yasağında (CLAUDE.md: side-stripe border yasak). */
    .wo-t tbody tr.wo-row::before {
        content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
        background: var(--border);
    }
    .wo-t tbody tr.wo-row.is-gecikti::before { background: var(--rose); }

    /* 🔴🔴 ÖZGÜLLÜK — İKİ KEZ ÖLÇÜLDÜ, İKİ KEZ YANILDIM:
       (1) `.wo-t tbody td` (0,1,2) yazıldı → 10,5px kaldı.
       (2) `.wo-t > tbody > tr > td` (0,1,3) yazıldı → YİNE 10,5px kaldı.
       Ezen kural `.peron-layout .peron-table td` (0,2,1 · satır ~17412) ve
       `--m-fs-sm` (10,5px) uyguluyor. Özgüllük SINIF SAYISINI önce karşılaştırır:
       2 sınıf > 1 sınıf, kaç ETİKET yazdığın fark etmez. Bu yüzden seçici İKİ
       SINIF taşımak zorunda → `.peron-layout` öne alındı (0,2,3).
       🔴 `!important` KULLANILMADI (proje yasağı) — doğru araç özgüllüktür.
       Ölçüm: kart gövde hücreleri (Atanan · Başlangıç · Bitiş) 320/390px'te
       10,5px'ti; CLAUDE.md 320-480px'te gövde ≥14px istiyor. */
    /* 🔴 `height: auto` ŞART: tablo tabanı her hücreye 44 px veriyordu (kartın 496 px'inin kaynağı). */
    .peron-layout .wo-t > tbody > tr > td {
        box-sizing: border-box;
        border: 0; padding: 0; text-align: left;
        display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 0 5px;
        font-size: var(--m-fs);
        height: auto; min-height: 0; min-width: 0;
    }
    .wo-t tbody td::before {
        content: attr(data-lbl);
        flex: 0 0 auto; font-size: var(--m-fs-xs); font-weight: 600; color: var(--text-muted);
    }
    /* Seçim hücresinin `data-lbl`ı yok: boş sözde öğe esnek kutuda 12 px boşluk yiyor, kutuyu 13 px'e eziyordu. */
    .wo-t tbody td[data-lbl=""]::before,
    .wo-t tbody td.peron-sel-cell::before { content: none; }

    /* Izgara yerleşimi — alan adları yukarıdaki şablonda. */
    .wo-t tbody tr.wo-row > td.peron-sel-cell { grid-area: sec; align-items: center; justify-content: center; }
    .wo-t tbody tr.wo-row > td.peron-sel-cell .peron-row-cb { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; }
    .wo-t tbody tr.wo-row > td.wo-c-no   { grid-area: no; }
    .wo-t tbody tr.wo-row > td.wo-c-onc  { grid-area: no; justify-self: end; align-self: center; }
    /* Rozet kartta etiketsiz: "Öncelik" yazısı 320 px'te İE no'ya yer bırakmıyordu; rozet metni (Acil · Yüksek …) kendini söyler. */
    .wo-t tbody tr.wo-row > td.wo-c-onc::before { content: none; }
    .wo-t tbody tr.wo-row > td.wo-c-bas  { grid-area: bas; }
    .wo-t tbody tr.wo-row > td.wo-c-atn  { grid-area: atn; }
    .wo-t tbody tr.wo-row > td.wo-c-kisi { grid-area: kisi; }
    .wo-t tbody tr.wo-row > td.wo-c-bsl  { grid-area: bsl; }
    .wo-t tbody tr.wo-row > td.wo-c-bit  { grid-area: bit; }
    .wo-t tbody tr.wo-row > td.wo-c-drm  { grid-area: drm; }
    .wo-t tbody tr.wo-row > td.wo-c-eyl  { grid-area: drm; justify-self: end; align-self: center; }
    /* Düzenle düğmesi olan satırda durum ona yer ayırır; olmayanda (tamamlanmış · iptal · izin yok) tam genişliktir. */
    .wo-t tbody tr.wo-row:has(> td.wo-c-eyl > .wo-eyl:not(:empty)) > td.wo-c-drm { padding-right: calc(var(--tbl-ctl-h) + 8px); }
    .wo-t tbody tr.wo-row > td.wo-c-eyl:has(> .wo-eyl:empty) { display: none; }
    .wo-t tbody tr.wo-row > td.wo-c-atn,
    .wo-t tbody tr.wo-row > td.wo-c-kisi { overflow-wrap: anywhere; }
    /* Yarımlar üstten hizalanır: dar ekranda sarılan ad komşu yarımın etiketini aşağı itmesin. */
    .wo-t tbody tr.wo-row > td.wo-c-atn,
    .wo-t tbody tr.wo-row > td.wo-c-kisi,
    .wo-t tbody tr.wo-row > td.wo-c-bsl,
    .wo-t tbody tr.wo-row > td.wo-c-bit { align-self: start; }

    /* Kart başı: iş emri numarası (küçük, sönük). Sağdaki 72 px öncelik rozetinin yeri (en geniş rozet ≈ 64 px + boşluk). */
    .peron-layout .wo-t > tbody > tr > td.wo-c-no {
        padding: 0 72px 0 0;
        display: block;
    }
    .wo-t tbody td.wo-c-no code { font-size: var(--m-fs-sm); color: var(--text-muted); }

    /* Başlık: tam satır, kırpma YOK — kartın birincil metni. */
    .peron-layout .wo-t > tbody > tr > td.wo-c-bas {
        display: block;
        padding: 0;
    }
    .wo-t tbody td.wo-c-bas .wo-bas {
        font-size: 13px; font-weight: 700; line-height: 1.3;
        white-space: normal; overflow: visible; text-overflow: clip;
        /* Boşluksuz uzun bir dizi (ör. yapıştırılmış bir bağlantı) satırı
           şişirmesin — `min-width:0` genişliği serbest bırakır, kırılma
           metnin kendisinde olur. */
        overflow-wrap: anywhere;
    }
    .wo-t tbody td.wo-c-bas .wo-ack {
        font-size: 12px; line-height: 1.4; margin-top: 3px;
        white-space: normal; overflow: visible; text-overflow: clip;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Durum kutusu tam genişlik + 44px dokunma hedefi */
    /* 🔴 `height: auto` ŞART (mobil denetim 1.380.0, 390px): tablo tabanı hücreye
       `height: var(--tbl-row-h)` = 44px veriyor; kartta etiket (≈17px) + 44px seçici bu
       kutuya sığmıyor, seçici 24px TAŞIP alttaki "Başlangıç" satırının üstüne biniyordu —
       `elementFromPoint` o satırda SEÇİCİYİ döndürüyordu (yanlışlıkla durum değiştirme). */
    .peron-layout .wo-t > tbody > tr > td.wo-c-drm { display: block; padding: 0; height: auto; }
    /* 1.416.0 — "Durum" etiketi kartta basılmaz: seçici ve rozet durumu kendisi söyler (seçicinin `aria-label`ı var). */
    .wo-t tbody td.wo-c-drm::before { content: none; }
    .wo-t tbody td.wo-c-drm .wo-status-sel {
        width: 100%; min-height: var(--tbl-ctl-h); font-size: 16px;
    }

    /* Düzenle: durumun sağında, 36 px (birincil eşik). */
    .peron-layout .wo-t > tbody > tr > td.wo-c-eyl { display: flex; justify-content: flex-end; padding: 0; }
    .wo-t tbody td.wo-c-eyl .wo-eyl {
        justify-content: flex-end; gap: 6px;
    }
    .wo-t tbody td.wo-c-eyl .wo-eyl:empty { display: none; }
    /* 1.365.0: 44px -> yogunluk sozlesmesi (dokunmatikte 36px). Metin dugmeleri
       birincil eylemdir, 36 esigini karsilar; ikon dugme yogun yuzeydir (>=28). */
    .wo-t tbody td.wo-c-eyl .peron-btn {
        flex: 1 1 0; min-height: var(--tbl-ctl-h); font-size: var(--m-fs);
    }
    .wo-t tbody td.wo-c-eyl .peron-btn.icon-btn { flex: 0 0 var(--tbl-ctl-h); min-width: var(--tbl-ctl-h); }

    /* Boş durum / iskelet satırı da blok olmalı, yoksa hücre genişliği çöker. */
    .wo-t tbody tr:not(.wo-row) { display: block; }
    .wo-t tbody tr:not(.wo-row) > td { display: block; padding: 0; }

    /* 🔴 1.380.0 — AKORDEON DETAYI KARTIN DEVAMIDIR. Yukarıdaki `tr:not(.wo-row)
       { display:block }` UA'nın `[hidden]` kuralını EZER (özgüllük 0,2,2 > 0,1,0) —
       koruma olmasaydı kapalı detay telefonda HER ZAMAN açık görünürdü. */
    .wo-t tbody tr.wo-detail-row[hidden] { display: none; }
    .wo-t tbody tr.wo-row.is-open { margin-bottom: 0; border-radius: 12px 12px 0 0; }
    .wo-t tbody tr.wo-row.is-open > td { background: transparent; }
    .wo-t tbody tr.wo-detail-row {
        box-sizing: border-box; margin: 0 0 10px;
        border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px;
        background: var(--content-bg); overflow: hidden; min-width: 0; max-width: 100%;
    }
    .wo-t .wo-detay { padding: 10px 14px 12px; }
    .wo-t .wo-dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
    .wo-t .wo-dd--onc { display: none; }
    .wo-t .wo-dd--tarih { grid-column: auto; }
    .wo-t .wo-dd-lbl { font-size: var(--m-fs-xs); }
    .wo-t .wo-dd-val { font-size: var(--m-fs); }
    .wo-t tbody td.wo-c-drm .wo-karar-grup { gap: 6px; }
    .wo-t tbody td.wo-c-drm .wo-karar { flex: 1 1 0; min-height: var(--tbl-ctl-h); font-size: var(--m-fs); }

    .wo-pager { border-radius: 12px; border: 1px solid var(--border); margin-top: 4px; }
    .wo-pager .pager-btn { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   30 GÜNLÜK NABIZ — YAZI KIRPILMASI ONARIMI + MODERN ÖZET (1.328.0)
   ══════════════════════════════════════════════════════════════════════════════
   Kullanıcı: *"30 günlük nabız widgesini düzenle, daha profesyonel yap ve daha
   modern bir widget olsun; yazılar yarıda kesilmiş çoğu, buna engel ol."*

   ── ÖLÇÜLEN KUSUR (gerçek tarayıcı, ENJEKTE EDİLMİŞ 30 günlük veriyle) ──────
   Rakam tablosunun BAŞLIKLARI ve DEĞERLERİ her genişlikte kırpılıyordu — 1440px
   dahil, yani "dar ekran sıkıntısı" değildi:

     öğe            gereken   verilen   kırpılan
     "30 gün"          46px      40px      6px
     "Gün ort."        57px      40px     17px
     "Son 7g"          46px      38px      8px
     "Önce 7g"         53px      38px     15px
     <b>119,75</b>     42px      34px      8px
     <b>31,25</b>      34px      32px      2px

   🔴 KÖK NEDEN: `.pgt col.pgt-c2…c6` SABİT PİKSELDİ (40/40/38/38/46) ve 320px
      hedefine göre seçilmişti; `table-layout: fixed` bu genişlikleri HER ekranda
      birebir uyguluyor. 1440px'te tablo 677px genişken sayı kolonları hâlâ 38px
      kalıyor, artan alanın TAMAMINI ilk kolon yutuyordu. Yani sorun "yer yok"
      değil, "yer VAR ama dağıtılmıyor"du.
   🔴 `white-space: nowrap` + `overflow: hidden` kırpmayı SESSİZ yapıyordu: üç
      nokta bile çıkmıyordu (`text-overflow` `.col-num`da tanımlı değil).

   ── ÇÖZÜM ──────────────────────────────────────────────────────────────────
   1) ≥641px : sayı kolonları `width: auto` → `table-layout: fixed` kalanı EŞİT
               böler (677px'te kolon başına ~89px; en uzun başlık 57px).
   2) 481-640: ölçülmüş genişlikler (44/52/44/50/48) — hepsi gerçek metinden
               türetildi, tahmin yok.
   3) ≤480px : "Önce 7g" kolonu DÜŞER. 288px'lik kapta altı kolona yer yok
               (5 sayı kolonu 238px yer, seri adına 50px kalıyordu). Bilgi
               KAYBOLMUYOR: "Önce 7g" = "Son 7g" − "Fark" ve ikisi de ekranda.
               Kolon düşürmek, sayıları kırpmaktan iyidir.
   🔴 `visibility: collapse` + `width: 0` — `display: none` bir `<col>`da çalışmaz.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ≥641px: kalanı eşit böl — hiçbir başlık/değer kırpılmaz. */
@media (min-width: 641px) {
    .dash-nabiz-tablo .pgt col.pgt-c1 { width: 30%; }
    .dash-nabiz-tablo .pgt col.pgt-c2,
    .dash-nabiz-tablo .pgt col.pgt-c3,
    .dash-nabiz-tablo .pgt col.pgt-c4,
    .dash-nabiz-tablo .pgt col.pgt-c5,
    .dash-nabiz-tablo .pgt col.pgt-c6 { width: auto; }
    .dash-nabiz-tablo .pgt th,
    .dash-nabiz-tablo .pgt td { padding: 6px 6px; }
}

/* 481-640px: ölçülmüş sabit genişlikler (metnin gerçek ihtiyacı + 2px pay). */
@media (min-width: 481px) and (max-width: 640px) {
    .dash-nabiz-tablo .pgt col.pgt-c2 { width: 44px; }
    .dash-nabiz-tablo .pgt col.pgt-c3 { width: 52px; }
    .dash-nabiz-tablo .pgt col.pgt-c4 { width: 44px; }
    .dash-nabiz-tablo .pgt col.pgt-c5 { width: 50px; }
    .dash-nabiz-tablo .pgt col.pgt-c6 { width: 48px; }
}

/* ≤480px: BAŞLIKLAR KISALIR, KOLON DÜŞMEZ ────────────────────────────────────
   🔴 KOLON DÜŞÜRME DENENDİ VE REDDEDİLDİ (ikisi de ÖLÇÜLDÜ):
      (a) `col.pgt-c5 { visibility: collapse }` + `th:nth-child(5){display:none}`
          → 6. hücre 5. KONUMA kayıyor ve collapse edilmiş kolonun 0px genişliğini
            miras alıyor; "Fark" başlığı tamamen kayboldu (sw/cw = 28/0).
      (b) yalnız collapse (hücrede display:none yok) → "Önce 7g" ve üç değeri
            0px genişlikte kaldı.
      İki denemenin ikisi de BİLGİ KAYBETTİ.
   Çözüm: altı kolon KALIR, başlıklar KISA karşılıklarına döner (markup ikisini
   de taşır, tam metin `title`da).

   🔴 GENİŞLİK BAŞLIĞA DEĞİL, EN UZUN DEĞERE GÖRE. İlk denemede kolonlar kısa
      başlığa göre daraltıldı (28/30/22/28/46) ve başlıklar sığdı — ama DEĞERLER
      kırpıldı (ölçüldü: "119,75" 36px istiyor, kolon 24px veriyordu; "31,25"
      29px istiyor, 18px veriyordu). Başlık dar, sayı geniştir; bütçe sayıdan
      türetilir. Ölçülen ihtiyaç (9,5px yazı + 4px dolgu):
        30g 40 · Ort. 30 · 7g 33 · Ö7g 33 · Fark 44 = 180px
      288px'lik kapta seri adına 108px kalır (nokta + ad + birim, ellipsis'li). */
@media (max-width: 480px) {
    .dash-nabiz-tablo .pgt th .pgt-u { display: none; }
    .dash-nabiz-tablo .pgt th .pgt-k { display: inline; }
    /* 🔴 YENİDEN ÖLÇÜLDÜ (2026-10-12): takım 4 haneye çıktıktan (1.338.0) sonra eski
          bütçe (40/30/33/33/44) sayıları kırpıyordu — "159,625" 44px istiyor, kolon 40
          veriyordu; 10 ayın 9'unda 2-7 hücre "159,6…" basıyordu. Yeni bütçe en uzun
          gerçekçi değere göre ("147,3125" 51 · "37,6875" 44 · "▼12,0625" 55) + 1px pay. */
    .dash-nabiz-tablo .pgt col.pgt-c2 { width: 52px; }
    .dash-nabiz-tablo .pgt col.pgt-c3 { width: 30px; }
    .dash-nabiz-tablo .pgt col.pgt-c4 { width: 45px; }
    .dash-nabiz-tablo .pgt col.pgt-c5 { width: 44px; }
    .dash-nabiz-tablo .pgt col.pgt-c6 { width: 56px; }
    .dash-nabiz-tablo .pgt th,
    .dash-nabiz-tablo .pgt td { padding: 5px 2px; }
}

/* ≤339px: seri kolonuna 61px kalır (nokta + ad + "takım" 73px ister). Birim etiketi
   düşer, ad kırpılmaz; birim tablonun başlık satırında ("büyük sayı takım") yazılı. */
@media (max-width: 339px) {
    .dash-nabiz-tablo .pgt tbody th em { display: none; }
}

/* Uzun etiket VARSAYILAN; kısa olan yalnız yukarıdaki blokta açılır. */
.dash-nabiz-tablo .pgt .pgt-u { display: inline; }
.dash-nabiz-tablo .pgt .pgt-k { display: none; }

/* 🔴 SON SAVUNMA: beklenmedik uzun bir sayı (ya da kullanıcı yazı tipi
   büyütmesi) yine taşarsa SESSİZCE kesilmesin — üç nokta çıksın. `.col-num`
   `nowrap` taşıyor ama `text-overflow` tanımı YOKTU. */
.dash-nabiz-tablo .pgt .col-num,
.dash-nabiz-tablo .pgt tbody th { text-overflow: ellipsis; }

/* ── ÖZET BLOĞU: telefonda dikey yığın DEĞİL, satır ─────────────────────────
   ÖLÇÜLDÜ 320px: `.pg-kart__buyuk` 120px genişlikte 70px yüksekti ve DÖRT
   satır taşıyordu (rakam · birim · modül · fark) — 120px'e sıkışan bir kolonda
   "takım oturum · 30 gün" iki satıra düşüyordu. Kart başlığı ile aynı satırı
   paylaşmak zorunda değil: telefonda TAM GENİŞLİK alıp yatay dizilir.
   🔴 Ölçü 400px değil 640px'ten: 401-640 bandında da aynı sıkışma var
      (mevcut kural yalnız ≤400px'i düzeltiyordu, ölçüm 360/390'da da
      kırpılma gösterdi). */
@media (max-width: 640px) {
    .dash-nabiz .pg-kart__bas { flex-direction: column; align-items: stretch; gap: 10px; }
    .dash-nabiz .pg-kart__buyuk {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
        text-align: left; width: 100%;
        padding-top: 8px; border-top: 1px solid var(--border-light);
    }
    .dash-nabiz .pg-kart__buyuk em,
    .dash-nabiz .dash-nabiz-alt,
    .dash-nabiz .dash-nabiz-fark { display: inline-flex; align-items: baseline; gap: 4px; margin: 0; }
    /* Rakam ile birimi arasına satır sonu girmesin. */
    .dash-nabiz .pg-kart__buyuk em { flex: 0 1 auto; white-space: nowrap; }
    /* Fark rozeti satırın SONUNA yaslanır → göz rakam-birim-fark sırasını okur. */
    .dash-nabiz .dash-nabiz-fark { margin-left: auto; }
}

/* ═══ 641-768px BANDI — 44px ZORUNLULUĞU KALKTI (2026-09-03) ══════════════════
   ÖLÇÜLDÜ (Günlük Operasyon, kontrol yükseklikleri):
     320-390px → sekme 38 · çip 28 · tarih 34 · düğme 34
     768px     → sekme 44 · çip 44 · tarih 44 · düğme 44     ← BURASI
     769px     → sekme 34 · çip 28 · tarih 28 · düğme 28
   Yani 768px, bir piksel komşusundan 10-16px DAHA ŞİŞKİNDİ: mobil yoğunluk bloğu
   `max-width: 640px`te bitiyor, masaüstü sıkı bloğu `min-width: 769px`te başlıyordu
   ve arada kalan bant TABAN kuralın (44px) elinde kalıyordu.
   Kullanıcı: *"44 kuralını değiştir, çok büyük olmasın her şey"* — bu bant artık
   masaüstü ölçülerine çekildi. Dokunma hedefi 28-34px, yeni kademeli eşiğin
   (yoğun yüzey ≥28px) içindedir.

   🔴🔴 KONUM DOSYANIN SONUNDA — KAYNAK SIRASI TUZAĞI. Blok ilk yazıldığında 13360
   civarındaydı ve `#up-shell .up-eylem .peron-btn { min-height: 44px }` (15487) ile
   `#dr-shell ...` (15821) AYNI ÖZGÜLLÜKTE ama DAHA SONRA geldiği için onlar kazandı:
   Üretim ve Detaylı sekmelerinde düğmeler 768px'te 44px kalmaya devam etti ve ölçüm
   bunu yakaladı. Eşit özgüllükte KAYNAK SIRASI KAZANIR — bu blok sona alındı.
   Buranın altına rapor kuralı YAZMAYIN. */
@media (min-width: 641px) and (max-width: 768.98px) {
    /* 🔴 `.up-eylem` / `.dr-eylem` İLK DENEMEDE UNUTULDU ve ölçüm bunu ancak
       seçici genişletilince gördü: Üretim/Detaylı sekmelerinde düğmeler 768px'te
       hâlâ 44px kalıyordu. Ölçüm aracı yalnız `.rp-eylem`e baktığı sürece
       "0 kaldı" yazıyordu — kör kapı, hatanın kendisinden daha tehlikelidir. */
    #rp-kok .rp-eylem .peron-btn,
    #sv-shell .rp-eylem .peron-btn,
    #hm-shell .rp-eylem .peron-btn,
    #up-shell .up-eylem .peron-btn,
    #dr-shell .dr-eylem .peron-btn { min-height: 32px; }
    #rp-kok .rp-cip,
    #sv-shell .rp-cip,
    #hm-shell .rp-cip,
    #up-shell .rp-cip,
    #dr-shell .rp-cip { min-height: 28px; height: 28px; padding: 0 9px; font-size: 11px; }
    .rp-filtre .peron-input[type="date"] { min-height: 30px; font-size: 12px; }
    #rp-kok .rp-sekme,
    #up-shell .rp-sekme,
    #dr-shell .rp-sekme,
    #sv-shell .rp-sekme,
    #hm-shell .rp-sekme { min-height: 34px; }
}

/* 🔴🔴 iPad DIKEYDE iOS ODAK-ZOOM'U (1.364.0 tasarim denetimi).
   Yukaridaki bant `@media (min-width:641px) and (max-width:768.98px)` — `(pointer: fine)`
   kosulu TASIMIYOR. 768px hem o bandin icinde hem DOKUNMATIK olabilir (iPad dikey):
   OLCULDU 768px'te `#rp-from` ve `#rp-to` = 12px, esik 16px. iOS Safari 16px altindaki
   denetime odaklaninca sayfayi zorla buyutur ve kullanici cift dokunusla geri cikamaz.
   🔴 Kalkanin (`@media max-width:768px`) kendisi bu seciciyi YENEMEZ: oradaki
      `.peron-input` (0,1,0) bu kuralin (0,2,1) ozgullugunun altinda kalir.
   🔴 BANDIN TAMAMINA `(pointer: fine)` EKLENMEDI — o blokta yogunlugu tum
      cihazlarda isteyen baska kurallar da var. Yalniz DOKUNMATIK cihazda, yalniz bu
      girdi geri 16px'e cekilir; fareyle ayni genislikte 12px yogunlugu KORUNUR.
   🔴 Ayni ozgullukte ve SONRA geldigi icin kazanir; `!important` gerekmez. */
@media (min-width: 641px) and (max-width: 768.98px) and (pointer: coarse) {
    .rp-filtre .peron-input[type="date"] { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MAL KABUL — ÖLÇÜM DÜZELTMELERİ + MOBİL YENİLE
   🔴 BU BLOK DOSYANIN SONUNDA OLMAK ZORUNDA. Bu dosyada aynı özgüllükteki
      SONRAKİ kural kazanır; ezilecek kurallar (`.peron-table--fixed
      td.col-ellip` :6334 ve `#peron-refresh-btn { display:none }` :6502)
      yukarıda duruyor ve SİLİNMEDİ — üzerine yazılıyor.
   🔴 Mal kabul kuralları `min-width: 641px` içinde: ≤640px'in kart düzeni
      peron-mod-malkabul.js'in kendi `#mk-shell` bloğundan gelir, oraya
      DOKUNULMADI (mobilin küçük puntoları olduğu gibi kaldı).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
    /* ── Talep kolonu: "Kısmi" rozeti ALT SATIRA ──────────────────────
       🔴 ÖLÇÜLDÜ: kutu 96px, "#SAT-20260625-0002 Kısmi" tek satırda 195px →
          99px kesiliyordu (9 satırda). Rozet kendi satırına inince yatay
          ihtiyaç ~119px'e düşer. Mobil kart düzeninde bu mantık ZATEN vardı
          (peron-mod-malkabul.js → `td.mk-td-talep { white-space: normal }`);
          burada masaüstüne taşınıyor — İKİNCİ BİR YOL AÇILMADI.
       🔴 Hücrenin `col-ellip`i `white-space: nowrap` veriyor; `text-overflow`
          bir blok kabın KENDİ satır-içi akışına uygulanır ve blok çocuk gelince
          düşer. Bu yüzden üç nokta hücreden `.mk-talep`e TAŞINDI; yoksa talep
          numarası uyarısız kırpılırdı. Özgüllük eşit (0,2,1) → kaynak sırası. */
    .peron-table--fixed td.mk-td-talep { white-space: normal; overflow: hidden; }
    .mk-table td.mk-td-talep .mk-talep {
        display: block;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mk-table td.mk-td-talep .mk-kismi {
        display: inline-block; margin-left: 0; margin-top: 2px;
    }

    /* ── "Cari · Müşteri" ile "Üretim" AYRI BÖLÜM ─────────────────────
       🔴 İkisini ayıran tek şey 2px `margin-top` idi: ne çizgi ne zemin
          farkı vardı, üç ad alt alta TEK blok gibi okunuyordu. Ayırıcı çizgi +
          3px dolgu geliyor; ara 2px'ten 4px'e çıkıyor (net +2px) — BÜYÜTME
          değil, okunabilirlik sınırı. `.mk-uretim` `display: flex` olduğu için
          blok seviyesindedir; çizgi hücre genişliğini kaplar. */
    .mk-table .mk-uretim {
        margin-top: 0;
        padding-top: 3px;
        border-top: 1px solid var(--border-light);
    }
}

/* ── MOBİLDE YENİLE SİMGESİ GÖRÜNÜR ────────────────────────────
   🔴 :6502 `@media (max-width:768px) { #peron-refresh-btn { display:none } }`
      simgeyi tamamen gizliyordu; kullanıcı: "mobilde ekranda yenile simgesi yok".
      Özgüllük (1,1,0) > (1,0,0) → kural EZİLİR, silinmez.
   🔴 Desen `#peron-back-btn`ten (:17415) BİREBİR kopyalandı: görsel kutu 32px,
      dokunma hedefi `::after` ile 44px. Yani ekranda BÜYÜYEN bir şey yok. */
@media (max-width: 768px) {
    .peron-layout #peron-refresh-btn {
        display: inline-flex; position: relative;
        width: 32px; min-width: 32px; height: 32px; border-radius: var(--m-r-sm);
    }
    .peron-layout #peron-refresh-btn svg { width: 16px; height: 16px; }
    .peron-layout #peron-refresh-btn::after {
        content: ''; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
}

/* ── AŞAĞI ÇEKEREK YENİLE — göstergesi ──────────────────────────
   Kullanıcı: "ekranı aşağı kaydırdığımda da yenileme yapmıyor."
   🔴 `position: fixed`: kaydırıcı `#peron-content` (çünkü `.peron-layout`
      100vh + overflow:hidden — sayfa DEĞİL o kayar). Göstergeyi onun İÇİNE
      koymak `overflow` yüzünden görünmez kılardı; fixed hem oradan kurtarır
      hem yerleşimi HİÇ değiştirmez (akış dışı).
   🔴 z-index 900: modal örtüsü 99999 — gösterge onun ÜSTÜNE çıkmaz.
   🔴 Yalnız ≤768px görünür: masaüstünde yenile düğmesi zaten ekranda. */
.peron-ptr {
    position: fixed; top: 0; left: 50%; z-index: 900;
    width: 30px; height: 30px; margin-left: -15px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--card-bg); border: 1px solid var(--border);
    color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
    opacity: 0; transform: translateY(-44px);
    pointer-events: none;
}
.peron-ptr svg { width: 16px; height: 16px; display: block; }
.peron-ptr.is-ready { color: var(--pri-text); border-color: var(--pri); }
.peron-ptr.is-spin  { color: var(--pri-text); border-color: var(--pri); }
.peron-ptr.is-spin svg { animation: peron-ptr-donme 800ms linear infinite; }
@keyframes peron-ptr-donme { to { transform: rotate(360deg); } }
/* Hareket duyarlılığı: dönme İPTAL, gösterge yerinde kalır (bilgi kaybolmaz). */
@media (prefers-reduced-motion: reduce) {
    .peron-ptr.is-spin svg { animation: none; }
}
@media (min-width: 769px) { .peron-ptr { display: none; } }

/* ── Rapor "Gönder" kutusu (1.335.0) ─────────────────────────────────────────
   Modal içeriği; masaüstünde ve telefonda AYNI. Girdi 16px (iOS büyütme kalkanı). */
.rp-gonder { display: flex; flex-direction: column; gap: 12px; }
.rp-gonder-ozet { font-size: 13px; color: var(--text-secondary); }
.rp-gonder .peron-select,
.rp-gonder .peron-input { width: 100%; min-height: 40px; font-size: 16px; box-sizing: border-box; }
.rp-gonder-not { font-size: 12px; color: var(--text-muted); min-height: 16px; }
.rp-gonder-not.hata { color: var(--rose-ink, var(--rose)); }
.rp-gonder-yuk { display: flex; align-items: center; justify-content: center; min-height: 90px; }

/* ══ ÇEK / SENET GİRİŞ EKRANI — TAM SAYFA (1.346.0) ═══════════════════════════
   Kullanıcı: *"modal istemiyorum, tamamen ayrı bir tablo açılsın ve ayrıntılı olacak
   şekilde çek senet giriş çıkışı olsun"*.

   🔴 MOBILE-FIRST: taban tek kolondur, `min-width` ile GENİŞLETİLİR. Ters yazsaydık
      (masaüstü taban + max-width daralt) dar ekran kuralları dosyanın sonundaki
      "MOBİL SON SÖZ" bloğuna taşınmak zorunda kalırdı.
   🔴 `auto-fit` KULLANILMADI (tasarım dili sözleşmesi md.3): 1440px'te kendiliğinden
      5 kolon verip alan kutularını dağıtırdı. Kolon sayısı basamak basamak SABİTTİR.
   🔴 `box-sizing: border-box` her kutuda BEYAN EDİLİR — dosyada global sıfırlama yok;
      `width:100%` + padding taşma üretirdi.
   🔴 Punto: gövde `--tbl-fs` (12px) tokeninden gelir, sabit punto YAZILMAZ. TEK istisna
      form denetimleri: telefonda 16px (iOS Safari 16px altındaki girdide sayfayı
      büyütür ve kullanıcı geri çıkamaz).                                            */
.cekf-izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}
@media (min-width: 900px)  { .cekf-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .cekf-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Görsel bölümü iki yüz yan yana dursun diye geniş ekranda TÜM satırı kaplar. */
@media (min-width: 900px) { .cekf-bolum--gorsel { grid-column: 1 / -1; } }

.cekf-bolum { padding: 14px 16px 16px; box-sizing: border-box; min-width: 0; }
.cekf-bas {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: .01em;
}
.cekf-bas em {
    font-style: normal; font-weight: 500; font-size: 10.5px;
    color: var(--text-muted); margin-left: 6px;
}

/* Alan ızgarası: dar ekranda tek kolon, geniş ekranda iki. 8px ızgara. */
.cekf-satir { display: grid; grid-template-columns: 1fr; gap: 10px 12px; }
@media (min-width: 560px) { .cekf-satir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cekf-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; box-sizing: border-box; }
.cekf-alan--genis { grid-column: 1 / -1; }
.cekf-alan .peron-input,
.cekf-alan .peron-select { width: 100%; box-sizing: border-box; }
.cekf-zorunlu { color: var(--rose-ink, var(--rose)); }

.cekf-not {
    margin: 10px 0 0;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--text-muted);
    /* Okuma satırı 45-75ch — daha uzun satır yorar (tasarım kuralı). */
    max-width: 72ch;
}

.cekf-onay {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 10px 0 0; cursor: pointer;
    font-size: 11.5px; color: var(--text-secondary);
}
.cekf-onay em { font-style: normal; color: var(--text-muted); }
/* Kutucuk yoğun yüzey denetimidir — eşiği (≥28px) karşılar, DAHA BÜYÜK değil. */
.cekf-onay input { width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 auto; }

.cekf-eylem-serit { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Görsel slotları (ön / arka) ──────────────────────────────────────────── */
.cekf-gorseller { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .cekf-gorseller { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cekf-gorsel {
    border: 1px solid var(--border);
    border-radius: var(--r-md, 10px);
    padding: 10px;
    background: var(--content-bg);
    box-sizing: border-box;
    min-width: 0;
}
.cekf-gorsel-bas {
    font-size: 11px; font-weight: 700; color: var(--text-secondary);
    margin-bottom: 8px; letter-spacing: .02em;
}
/* Sabit oran: çek yatay bir belgedir (~2:1). Yükseklik sabitlemek yerine oran vermek,
   farklı en-boy oranlı fotoğrafların kutuyu zıplatmasını önler. */
.cekf-gorsel-kutu {
    position: relative;
    aspect-ratio: 2 / 1;
    max-width: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: var(--r-sm, 8px);
    overflow: hidden;
}
.cekf-gorsel-kutu img {
    width: 100%; height: 100%;
    object-fit: contain;          /* çek KIRPILMAZ — seri no/tutar kenarda olabilir */
    display: block;
}
.cekf-gorsel-bos { font-size: 10.5px; color: var(--text-muted); }
.cekf-gorsel-eylem { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* `<label>` düğme gibi görünür ama düğme değildir — hizası elle verilir. */
.cekf-yukle-lbl {
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; margin: 0;
}

/* Telefon: form denetimleri 16px (iOS büyütme kalkanı) — punto standardının İSTİSNASI. */
@media (max-width: 768px) {
    .cekf-alan .peron-input,
    .cekf-alan .peron-select { font-size: 16px; min-height: 40px; }
    .cekf-bolum { padding: 12px 12px 14px; }
    /* Eylem şeridi başlıkta sıkışmasın: tam genişlikte iki düğme. */
    .cekf-eylem-serit { width: 100%; }
    /* `min-height` BURADA YAZILMAZ: aşağıdaki koşulsuz 36px kuralı daha sonra gelir,
       aynı özgüllüktedir ve buradaki değeri her hâlükârda ezerdi (ölçüldü: 390px'te
       gerçek değer 36px). Ölü bir satır bırakmak, okuyanı yanıltmaktan başka bir şey
       yapmazdı — davranış zaten 36px ve eşiği karşılıyor. */
    .cekf-eylem-serit .peron-btn { flex: 1 1 0; }
}

/* 🔴 ŞERİDİN TELEFON KURALI DA SİLİNDİ (1.367.0). 1.346.0'da şerit telefonda
   alta indirilmişti çünkü başlıktaki "Kaydet" düğmesini örtüyordu (ölçüldü 390px:
   tam çakışma). Şeridin kendisi kalkınca o çakışma da ortadan kalktı — düzeltmeyi
   bırakmak, olmayan bir ögeyi konumlandıran ölü bir kural bırakmak olurdu. */

/* ══ ÇEK FORMU — BİRİNCİL EYLEM DOKUNMA EŞİĞİ (1.346.0) ══════════════════════════
   Tasarım denetimi: masaüstünde "Kaydet"/"Listeye Dön" 34px ölçüldü; kullanıcı kuralında
   birincil/yıkıcı eylem eşiği ≥36px.
   🔴 BU BİR "BÜYÜTME" DEĞİL, EŞİĞİ KARŞILAMA: 2px fark eşiğin altında kalmakla
      karşılamak arasındaki farktır. Eşiği zaten geçen hiçbir denetim büyütülmedi.

   🔴🔴 YORUM 1.370.0'DA DÜZELTİLDİ — "telefonda zaten 40px" YANLIŞTI. Yukarıdaki
      `@media (max-width: 768px)` bloğunda 40px yazıyor, AMA bu kural KOŞULSUZ ve
      DAHA SONRA geldiği için aynı özgüllükte onu EZİYOR: telefonda ölçülen gerçek
      değer 36px (390px'te doğrulandı). Yani 40px kuralı 1.346.0'dan beri ÖLÜYDÜ.
      Kural 36px'te BIRAKILDI (eşiği karşılıyor ve kullanıcı kuralı "büyütme bişeyi"),
      ölü 40px satırı KALDIRILDI: davranış değişmez, YALAN ortadan kalkar. Bu, bu
      dosyanın kendi "kaynak sırası tuzağı" dersinin birebir tekrarıydı. */
.cekf-eylem-serit .peron-btn { min-height: 36px; }


/* ══ ÇEK ÇIKIŞI (CİRO) + KAYIT ŞERİDİ — 1.370.0 ══════════════════════════════
   Mobile-first: taban kurallar dar ekran, @media yalnız genişletir.

   🔴 `.peron-form-error` BURADA DOĞUYOR, YENİDEN DEĞİL. Sınıf 1.346.0'dan beri
      HTML'de vardı (`#cekf-err`) ama CSS'te HİÇBİR kuralı yoktu — ölçüldü, tüm
      dosyada 0 eşleşme. Yani çek formunun hata kutusu gövde metniyle birebir aynı
      görünüyordu: kullanıcı "kaydedilmedi" uyarısını sıradan bir açıklama sanabilirdi.
      Kural eklemek hiçbir şeyi EZMEZ (ezilecek bir şey yoktu) ve iki ekranı birden
      düzeltir. */
.peron-form-error {
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid var(--rose);
    border-left-width: 3px;
    border-radius: var(--r-md);
    color: var(--rose-ink);
    /* 🔴 SABİT KIRMIZI YAZILMADI. Dolgu `currentColor`dan türetilir; gece kipinde
       --rose-ink yeniden tanımlandığı için zemin de KENDİLİĞİNDEN uyar. Sabit bir
       rgba() yazsaydık koyu zeminde okunmaz bir kutu kalırdı. Üstteki düz renk,
       color-mix desteklemeyen tarayıcı için yedektir (dosyanın kendi deyimi). */
    /* 🔴 KARIŞIM %10 DEĞİL %6 (tasarım ölçümü, 1.370.0). %10'da açık temada metin
       rgb(171,74,79) / efektif zemin rgb(237,229,232) = **4,43:1** ölçüldü — WCAG AA
       normal metin eşiği 4,5:1'in ALTINDA. Zemin metnin KENDİ renginden türediği için
       karışımı ARTIRMAK kontrastı DÜŞÜRÜR (zemin metne yaklaşır); doğru yön AZALTMAKTIR.
       Yeniden hesap: %6 → açık 4,68:1 · koyu 5,55:1 — ikisi de eşiğin üstünde.
       🔴 Tonu kaybetmiyoruz: kutunun asıl işareti 1px çerçeve + 3px sol şerittir,
          dolgu yalnız destekler. `--rose-ink` tokenına DOKUNULMADI — o paylaşılan bir
          token ve başka ekranlarda kendi AA ölçümüyle duruyor. */
    background: var(--content-bg);
    background: color-mix(in srgb, currentColor 6%, transparent);
    font-size: 12px;
    line-height: 1.45;
}

/* Zorunlu alan işareti — satır-içi renk yazmak yerine tek sınıf. */
.peron-req { color: var(--rose); font-weight: 600; }

.ciro-ops { color: var(--text-muted); font-weight: 400; }

/* Çek listesinde "kime ciro edildi" alt satırı — rozetin altında, tek satır, kırpılırsa
   `title` ile erişilebilir. Punto rozetten KÜÇÜK: hiyerarşi korunur, kutu büyümez. */
.cek-ciro-alt {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Seçim özeti: tablo ile sayfalama şeridinin aynı dili. */
.ciro-ozet {
    padding: 9px 12px;
    border-top: 1px solid var(--border);
    background: var(--content-bg);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

/* Kayıttan sonra temiz forma dönerken bırakılan iz: "kaydedildi + görsel ekle". */
.cekf-kayit-notu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: var(--r-md);
    background: var(--content-bg);
    color: var(--text-secondary);
    font-size: 12px;
}
/* 🔴 EŞİĞİ KARŞILAR, BÜYÜTMEZ: yoğun yüzey denetimi tabanı 28px. */
.cekf-kayit-notu .peron-btn { min-height: 28px; }

@media (min-width: 560px) {
    .cekf-kayit-notu { padding: 8px 14px; }
    .ciro-ozet { padding: 10px 16px; }
}

/* 🔴🔴 DOKUNMA HEDEFİ GERÇEKTEN HÜCRE KADAR — ARTIK ÖYLE (1.370.0).
   İlk yazımda bu yorum "hücrenin tamamı tıklanabilir bir etiket gibi davranır"
   diyordu ama HİÇBİR ŞEY bunu uygulamıyordu: `<td>` içinde çıplak bir
   `<input type="checkbox">` vardı, hücrenin kenarına tıklamak kutuyu DEĞİŞTİRMİYORDU
   (tasarım denetimi ölçtü: `elementFromPoint` → TD, `toggled: false`). Yani gerçek
   hedef 16×16px idi — WCAG 2.2 AA §2.5.8 mutlak tabanı 24×24px'in ALTINDA.
   🔴 ÇÖZÜM KUTUYU BÜYÜTMEK DEĞİL: kutu 16px kalır (kullanıcı kuralı "büyütme bişeyi"),
      `<label>` sarmalaması hücreyi doldurur ve etiket tıklaması native olarak input'a
      düşer. Hedef, kutuyu hiç şişirmeden hücre boyutuna çıkar. */
.ciro-chk {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    margin: -4px -2px;
    cursor: pointer;
}
.ciro-kok #ciro-tbody input[type="checkbox"],
.ciro-kok #ciro-all { width: 16px; height: 16px; cursor: pointer; }
.ciro-kok .peron-table td:first-child,
.ciro-kok .peron-table th:first-child { padding-left: 10px; padding-right: 4px; text-align: left; }


/* ═══════════════════════════════════════════════════════════════════════════
   1.355.0 — SİPARİŞ + SATINALMA LİSTE ALANI: 9 PUNTO TAVANI
   ═══════════════════════════════════════════════════════════════════════════
   Kullanıcı: "satınalma yönetimi ve sipariş yönetimi kısmındaki listelerin yazı
   boyutları 9 puntodan fazla olmasın şu an büyük gözüküyor."

   🔴 ÖNCE ÖLÇÜLDÜ (1440px, giriş yapılmış panel, gerçek veri, tarayıcıda):
        tablo gövdesi   satınalma 10,5px · sipariş 12px   → İKİSİ DE ZATEN ≤ 9 punto
        durum kartı sayısı     19px  (.stat-value clamp)  → TAVANIN ÜSTÜNDE ×5
        araç çubuğu denetimi   13px / 13,3px              → TAVANIN ÜSTÜNDE ×15-18
      Yani "büyük görünen" şey listenin KENDİSİ değil, onu yukarı iten ÇEVRESİYDİ.
      Değişen tam olarak bu iki küme; tablo hücrelerine punto yazılmadı.

   🔴 KAPSAM `#pur-shell` · `#ord-shell` · `#pur-filter-bar` · `#ord-filter-bar`.
      `.peron-filter-card` · `.ffc-value` · `.peron-select` GLOBAL sınıflardır;
      üretim takibi, sevkiyat planı, stok ve dashboard da onları kullanır —
      kullanıcı yalnız bu iki ekranı istedi, diğerleri DEĞİŞMEZ. Yeni bir yol
      açılmadı: aynı kabuk-kapsamlı desen `#prod-shell` bloğunda (:13366) zaten
      vardı, o desen genişletildi.

   🔴 REJİM `(pointer: fine)` — DOKUNMATİK DIŞARIDA. Telefon/tablette form
      denetimleri 16px KALMAK ZORUNDA: iOS Safari 16px altındaki alana odaklanınca
      sayfayı büyütür ve kullanıcı geri küçültemez. Mobil kural masaüstü isteğinin
      ÖNÜNDEDİR ve bu blok mobil dalı hiç görmez.

   🔴 HİYERARŞİ BOYUTLA DEĞİL AĞIRLIK + VERSALLE KORUNDU: kart sayısı 19 → 12px
      ama ağırlık 800'de kaldı; etiket 11 → 9,5px ve BÜYÜK HARF. Oran (etiket <
      sayı) her genişlikte duruyor. KART BÜYÜTÜLMEDİ, KÜÇÜLDÜ → liste yukarı çıkar.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── A · DURUM FİLTRE KARTLARI (her iki ekran) ─────────────────────────────── */
#pur-filter-bar .ffc-value,
#ord-filter-bar .ffc-value {
    /* 19 → 12px. Özgüllük (1,1,0); paylaşılan `.stat-value` (0,1,0) clamp'ını
       kaskad sırasından BAĞIMSIZ ezer, o yüzden bloğun dosyadaki yeri önemsiz. */
    font-size: 12px;
    letter-spacing: -0.3px;
}
#pur-filter-bar .ffc-label,
#ord-filter-bar .ffc-label {
    /* 11 → 9,5px. Paylaşılan `.stat-label` (0,1,0) 11px basıyordu; `.ffc-label`in
       kendi 10,5px'i dosyada ONDAN ÖNCE geldiği için zaten ölüydü. */
    font-size: 9.5px;
    margin-bottom: 2px;
}
#pur-filter-bar.peron-filter-grid > .peron-filter-card,
#ord-filter-bar.peron-filter-grid > .peron-filter-card {
    /* Yazı küçülünce 78px'lik kart boş kalıyordu; yükseklik yazıyı TAKİP eder.
       54px `#prod-shell`de ölçülmüş ve kanıtlanmış değerdir — yeni sayı uydurulmadı. */
    min-height: 54px;
    padding: 8px 10px;
    gap: 8px;
}
#pur-filter-bar .peron-filter-card .stat-icon,
#ord-filter-bar .peron-filter-card .stat-icon {
    /* 40px ikon + 16px dolgu = 56px; 54px'lik kartta İKON sınırlayıcı olurdu ve
       kart küçülmezdi. Yazı küçülüyorsa ikon da küçülür, yoksa oran bozulur. */
    width: 28px;
    height: 28px;
    border-radius: 9px;
}
#pur-filter-bar .peron-filter-card .stat-icon svg,
#ord-filter-bar .peron-filter-card .stat-icon svg { width: 15px; height: 15px; }
#pur-filter-bar .peron-filter-card::before,
#ord-filter-bar .peron-filter-card::before {
    /* Üst parıltı kartın 46px'ine göre çizilmişti; 54px'lik kartta kartın tamamını
       boyayıp "dolu kutu" hissi veriyordu. */
    height: 30px;
}

/* ── B · ARAÇ ÇUBUĞU DENETİMLERİ + SİPARİŞ TABLOSU YOĞUNLUĞU ───────────────── */
@media (min-width: 769px) and (pointer: fine) {
    /* Arama kutusu, kategori/sayfa boyutu açılırları, tarih aralığı: 13 → 12px.
       `--tbl-ctl-fs` DEĞİL — o token HÜCRE İÇİ denetimi yönetir; bunlar tablo
       dışında, araç çubuğundadır ve gövde puntosuyla (12px) hizalanır. */
    #pur-shell .peron-toolbar .peron-input,
    #pur-shell .peron-toolbar .peron-select,
    #pur-shell .peron-search input,
    #pur-shell .pur-sup-ac input,
    #ord-shell .peron-toolbar .peron-input,
    #ord-shell .peron-toolbar .peron-select,
    #ord-shell .peron-search input { font-size: 12px; }

    /* Sipariş tablosu, satınalma ile AYNI yoğunluğa iner (kullanıcı kararı:
       "evet, satınalma ile eşitle"). ÖLÇÜLDÜ: sipariş td 12px / th 10,5px iken
       satınalma td 10,5px / th 9,5px'ti — iki liste yan yana farklı görünüyordu.

       🔴 GLOBAL `--tbl-fs` DEĞİŞTİRİLMEDİ. O token stok, cari, fatura, üretim…
          hepsini birden taşır ve yoğunluk sözleşmesinde "DEĞİŞTİRİLMEZ" işaretli.
          Kapsam kabuğa yazılır; özel özellikler kalıtsaldır, bu yüzden tek
          bildirim tablonun tamamını (rozet + kod + hücre içi denetim dahil)
          aynı anda indirir ve ekran başına punto kuralı yazmaya gerek kalmaz. */
    #ord-shell {
        --tbl-fs:       10.5px;
        --tbl-head-fs:   9.5px;
        --tbl-badge-fs:  9.5px;
        --tbl-code-fs:   9.5px;
        --tbl-ctl-fs:   10.5px;
    }
}

/* ── C · SATIR-İÇİ PUNTODAN KURTARILAN HÜCRELER ────────────────────────────── */
/* Termin tarihi: eskiden `style="font-size:12px"` taşıyordu ve hücre 10,5px'e
   inince satırın EN BÜYÜK yazısı oluyordu (satır-içi stil her kuralı ezer,
   tasarım dili sözleşmesi md.3.b). Artık punto yok — hücreden miras alır. */
.ord-termin-date { color: var(--text-secondary); }
/* İptal edilen rezervler bloğu — bölüm başlığı ve ikincil hücreler. */
.ord-cancel-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 18px 0 8px;
}
.ord-c-sec { color: var(--text-secondary); }


/* ═══════════════════════════════════════════════════════════════════════════
   1.357.0 — LİSTE İÇİ YAZILAR GERÇEKTEN KÜÇÜLDÜ (kullanıcı düzeltmesi)
   ═══════════════════════════════════════════════════════════════════════════
   Kullanıcı birebir: *"sen sadece üstteki simgeleri küçültmüşsün, benim için önemli
   olan tablo İÇİNDEKİ yazıların boyutlarının düşmesi."* HAKLIYDI ve sebebi ölçüldü.

   🔴 1.356.0'da hücrenin (`td`) puntosu tokene bağlandı ama HÜCRENİN İÇİNDEKİ metin
      düğümleri KENDİ SABİT PUNTOLARINI taşıyor ve tokeni hiç okumuyordu. 1440px'te
      ölçülen gerçek değerler (td 10,5px iken):
        12px    .pur-lot-icon · .pur-reserve-btn        ← satırın EN BÜYÜĞÜ
        11,5px  .pur-prod .pur-ell (ÜRÜN ADI) · option  ← en çok okunan metin
        11px    .pur-idno · .pur-req .pur-ell
        10,5px  .pur-unit · .pur-qtyval · .pur-supplier-name · .pur-cur · .pur-total-cell
      Yani hücre küçülüyor, İÇİ küçülmüyordu. "Tabloyu küçülttüm" demek ÖLÇMEDEN
      verilmiş bir hükümdü; ekranda görünen yazı 11,5px olarak kalmıştı.

   🔴 ÇÖZÜM SABİT SAYI DAĞITMAK DEĞİL, TOKENE BAĞLAMAK: her biri artık `--tbl-fs`
      zincirinden türer. Tek sayı değiştiğinde satırın tamamı birlikte iner; bir
      sonraki turda yine "bazıları küçüldü, bazıları kalmış" durumu doğmaz.

   🔴 HİYERARŞİ KORUNDU, MUTLAK TABAN 9px AŞILMADI (kullanıcı kuralı):
        ürün adı  --tbl-fs + 0,5   (en belirgin satır metni)
        gövde     --tbl-fs         9,5px
        yardımcı  --tbl-head-fs    9px   (birim · tarih · başlık · rozet)
      Oran her genişlikte aynı; hiçbir öge BÜYÜTÜLMEDİ.

   🔴 REJİM `(pointer: fine)` — dokunmatik DIŞARIDA; telefonda form denetimleri
      16px kalmak ZORUNDA (iOS odak-zoom). Mobil dal bu bloğu hiç görmez.
   ─────────────────────────────────────────────────────────────────────────── */
/* 🔴🔴 KOŞULSUZ TABAN — TOKENE GEÇERKEN DAVRANIŞ BÜYÜTÜLMEMELİ (kod denetimi bulgusu).
   `#pur-shell .pur-table td/th` 1.273.1'den beri KOŞULSUZ 10,5px/9,5px'ti. 1.357.0'da
   `var(--tbl-fs)`e bağlanınca değer yalnız `(min-width:769px) and (pointer:fine)`
   bandında tanımlı kaldı; o bandın DIŞINDA (641-768px masaüstü ve ≥769px DOKUNMATİK —
   iPad, Surface, kiosk) kök değere (12px/11px) düşüyordu. Yani satınalma yazısı orada
   küçülmek yerine BÜYÜYORDU — kullanıcının "büyütme" yasağının doğrudan ihlali.
   Taban burada, medya sorgusunun DIŞINDA beyan edilir: o bantlarda eski davranış
   BİREBİR korunur, masaüstü-fare bandında aşağıdaki blok daha da indirir. */
#pur-shell {
    --tbl-fs:       10.5px;
    --tbl-head-fs:   9.5px;
}

@media (min-width: 769px) and (pointer: fine) {
    #pur-shell,
    #ord-shell {
        --tbl-fs:        9.5px;
        --tbl-head-fs:     9px;
        --tbl-badge-fs:    9px;
        --tbl-code-fs:     9px;
        --tbl-ctl-fs:    9.5px;
    }

    /* ÜRÜN ADI — satırın birincil metni. Hücreden yarım adım büyük kalır ki
       hiyerarşi düzleşmesin; 11,5 → 10px (ölçüldü: aynı kolonda %13 daha çok
       karakter görünüyor). */
    #pur-shell .pur-prod .pur-ell,
    #ord-shell .pur-prod .pur-ell { font-size: 10px; }

    /* Talep eden / tedarikçi — ikincil metin, gövdeyle aynı adımda. */
    #pur-shell .pur-req .pur-ell,
    #ord-shell .pur-req .pur-ell,
    /* 🔴 `.pur-supplier-cell` YALNIZ satınalma satırında basılır (purRowHtml);
       sipariş tablosunda tedarikçi kolonu YOKTUR. `#ord-shell` karşılığı ÖLÜ
       seçicidir, kod denetimi bulgusu üzerine kaldırıldı. */
    #pur-shell .pur-supplier-cell .pur-ell { font-size: var(--tbl-fs); }

    /* Talep/sipariş numarası ve tarihi — kod ailesi. */
    #pur-shell .pur-idno,
    #ord-shell .pur-idno   { font-size: var(--tbl-fs); }
    #pur-shell .pur-iddate,
    #ord-shell .pur-iddate { font-size: var(--tbl-head-fs); }

    /* Sayı ve birim hücreleri. */
    #pur-shell .pur-qtyval,
    #ord-shell .pur-qtyval { font-size: var(--tbl-fs); }
    #pur-shell .pur-unit,
    #ord-shell .pur-unit   { font-size: var(--tbl-head-fs); }

    /* 🔴 HÜCRE İÇİ DÜĞMELER 12px'TE ÇAKILIYDI — satırın en büyük yazısıydı.
       Dokunma hedefi DEĞİŞMEZ: kutu boyutu ayrı kurallarda, burada yalnız punto. */
    #pur-shell .pur-lot-btn,
    #ord-shell .pur-lot-btn,
    #pur-shell .pur-reserve-btn,
    #ord-shell .pur-reserve-btn { font-size: var(--tbl-fs); }

    /* Para/tutar hücreleri — tabular hizalama kurallarına dokunulmaz. */
    #pur-shell .pur-cur,
    #pur-shell .pur-amt,
    #pur-shell .pur-total-cell { font-size: var(--tbl-fs); }
}

/* 🔴 1.357.0 — SİPARİŞ TABLOSU DOLGUSU SATINALMAYA EŞİTLENDİ (4px).
   Kullanıcı: *"sipariş yönetimindeki ürün kısmını tarih kısmına yaklaştır, ürün
   kısımda boşluk çok olsun daha fazla yazı sığsın."* Sipariş tablosu 8px yatay dolgu
   kullanıyordu, satınalma 1.273.1'den beri 4px. 10 kolon × 2 × 4px = **80px** yalnız
   boşluğa gidiyordu; o alan doğrudan METNE dönüştü ve Ürün kolonuna verildi.
   Ölçülen sonuç: Ürün 300 → 418px (9 kolon) · 225 → 302px (10 kolon);
   Sipariş No 220 → 196px, yani tarih ile ürün arasındaki mesafe 24px kısaldı. */
#ord-shell .ord-table > thead > tr > th,
#ord-shell .ord-table > tbody > tr > td { padding-left: 4px; padding-right: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   1.358.1 — BELGELİ TESLİM: FİYATIN SAĞINDA PARA BİRİMİ SEÇİCİSİ
   ═══════════════════════════════════════════════════════════════════════════
   Kullanıcı: *"her stok kodunun yanında fiyat kısmının sağında hangi döviz cinsinden
   fiyatlandırılmışsa o gösterilsin ve sistemde kayıtlı olan döviz simgeleri de gözüksün
   ve değiştirilebilsin."*

   🔴🔴 1.358.0'IN İKİ ÖLÇÜLMÜŞ KUSURU BURADA KAPATILDI (piksel denetimi, FATAL):
     (a) `.rd-price` kutusu **16px** ölçüldü — "150,50" yazan operatör HİÇBİR rakamı
         göremiyordu. Sebep özgüllük: `.peron-table--fixed td .peron-select` (0,2,1)
         `width:100%` diyor ve `.rd-fiywrap .rd-cur-sel` (0,2,0) onu EZEMİYOR. Seçici
         hücrenin tamamını (96px) alıp fiyata 16px bırakıyordu. Kural artık komşu birim
         seçicisiyle AYNI düzeyde yazılır: `.peron-modal .peron-table.rd-t .rd-cur-sel` (0,4,0).
     (b) Seçici komşu KDV kutusunun (`.rd-vr`) **4px üstüne biniyordu** ve hücreyi 12px
         aşıyordu; sebep aynı: kolon 112px iken içine 96px'lik bir kutu konmuştu.
   🔴 ÇÖZÜM İKİ AYAKLI: seçici SABİT ve DAR (36px, yalnız simge), kolon ise gerçekten
      gereken kadar genişler (112 → 146px). Yalnız birini yapmak yetmezdi — kolonu
      genişletip seçiciyi `width:100%` bırakmak fiyatı yine yok ederdi.
   🔴 SATIR TEK SATIR KALIR (belgeli teslim sözleşmesi): seçici fiyatın ALTINA değil
      YANINA girer. Alta konsaydı 25-50 kalemlik bir belgede tablo boyu iki katına
      çıkardı — o sözleşme bu modalda bir kez zaten ihlal edilip geri alınmıştı.
   🔴 Fiyat kutusu ESNEK (`flex: 1 1 0`), seçici SABİT: kolon daralınca kırpılan şey
      seçici DEĞİL fiyat kutusudur. `min-width: 0` olmadan flex çocuğu kendi içeriğinin
      altına inmez ve hücreyi taşırır — bu kod tabanında ölçülmüş tuzak.
   🔴 BİÇİM KOMŞU BİRİM SEÇİCİSİYLE BİREBİR AYNI (`.rd-unit-sel`): aynı tabloda iki
      seçicinin farklı görünmesi hiyerarşi değil gürültüdür. Chevron ikonu ikisinde de
      yok — 36px'lik bir kutuda ikon metnin üstüne binerdi.
   🔴 YOĞUN YÜZEY EŞİĞİ: 36×28px. Global kuralın "tablo satırı denetimi ≥28px" kademesini
      KARŞILAR; komşu hedefle arası 6px (eşik ≥6px, 1.358.0'da 4px ölçülmüştü).
   ─────────────────────────────────────────────────────────────────────────── */
.rd-fiywrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.peron-modal .peron-table.rd-t .rd-fiywrap input.rd-price {
    flex: 1 1 0; width: auto; min-width: 0;
}
.peron-modal .peron-table.rd-t .rd-cur-sel {
    flex: 0 0 auto; width: 36px; min-width: 36px; min-height: 28px;
    padding: 5px 2px; font-size: 12px; text-align: center;
    border: 1px solid var(--border-ctl); border-radius: 6px;
    background: var(--card-bg); color: var(--text-primary);
    font-variant-numeric: normal;
}

/* 🔴 FİYAT KOLONU DA GENİŞLEDİ (112 → 146px masaüstü, 126 → 180px telefon) —
   değerler kendi kolon bloklarında, ÖLÇÜMLERİYLE birlikte duruyor. Genişliği buraya
   İKİNCİ kez yazmak, bir gün biri değiştirdiğinde sessizce ayrışan iki tanım bırakırdı. */

@media (max-width: 768px) {
    /* iOS Safari, 16px altındaki bir form denetimine odaklanınca sayfayı büyütür ve
       kullanıcı geri çıkamaz — `.rd-unit-sel` ile AYNI kalkan. */
    .peron-modal .peron-table.rd-t .rd-cur-sel {
        font-size: 16px; min-height: 44px; width: 52px; min-width: 52px;
    }
}


/* ============================================================
   DÖNEM SONU DEVRİ (1.359.0) — BELGE YÜZEYİ
   Bu ekran bir DÖKÜM'dür, bir pano değil: gösterge kartı yok, satır
   yoğunluğu tablo adımıyla aynı, hiyerarşi punto + ağırlıkla kurulur.
   🔴 MOBİL-ÖNCE: taban dar ekrandır, `min-width` yalnız BÜYÜTÜR.
   🔴 Hiçbir kutu sabit genişlik almaz; tablolar kendi `.peron-table-wrap`
      kabında kayar, `body` asla kaymaz.
   ============================================================ */
.peron-layout .dv-card { padding: 0; overflow: hidden; margin-bottom: 12px; }

.peron-layout .dv-sec-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--content-bg);
}
.peron-layout .dv-sec-t { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.peron-layout .dv-sec-n { margin-left: 7px; font-size: 10.5px; color: var(--text-muted); }
.peron-layout .dv-sec-r { display: flex; align-items: center; gap: 9px; margin-left: auto; }
/* Toplam sayıdır: hane hizası kayarsa iki bölümün rakamı göz karşılaştırmasında bozulur. */
.peron-layout .dv-sec-sum {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* KÜNYE — belgenin kimliği; kâğıda da basılır. */
/* 🔴 KÜNYE KENDİ ÇERÇEVESİNİ ÇİZMEZ: işaretlemede `.peron-card` de taşır, kutu
   görünümü ORADAN gelir. İkinci bir kart tanımı yazmak, kart dilini iki yerden
   yönetmek demekti — ve yazdırma kuralları (@media print: gölge yok, ince gri
   çerçeve, break-inside) yalnız `.peron-card`a bağlı; kendi çerçevemi çizseydim
   künye kâğıtta öteki kartlardan FARKLI basardı. */
.peron-layout .dv-kunye {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 7px 10px;
    margin-bottom: 12px;
}
.peron-layout .dv-kunye > div { display: flex; flex-direction: column; gap: 1px; }
.peron-layout .dv-kunye span {
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.peron-layout .dv-kunye b {
    font-size: 12px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* "Tutar neden yok" sorusunun cevabı; metni SUNUCU yazar. */
.peron-layout .dv-not {
    padding: 7px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    background: var(--content-bg);
}

/* Dışarıda kalanın uyarısı. Renk TOKENDIR — sabit hex gece modunda körleşir ve dosya
   sonundaki tarama alanına takılır (bkz. blok başı).
   🔴 TOKEN ADI UYDURULMAZ: bu dosyanın kendi notu (`.ek-kirpma`) `--st-warn-bg`in
   HİÇBİR YERDE tanımlı olmadığını, yedeğinin hep devreye girdiğini yazıyor. Uyarı
   yüzeyinin TANIMLI ailesi şudur ve `.ek-kirpma` ile birebir aynıdır. */
.peron-layout .dv-haric {
    padding: 7px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--amber-ink);
    border-bottom: 1px solid var(--amber-border);
    background: var(--peach-surface);
}

.peron-layout .peron-table.dv-t td.dv-num,
.peron-layout .peron-table.dv-t td.dv-kod {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.peron-layout .peron-table.dv-t td.dv-kod { color: var(--text-secondary); }
.peron-layout .peron-table.dv-t td.dv-mut { color: var(--text-secondary); }
.peron-layout .peron-table.dv-t td.dv-son { font-weight: 700; }
/* Eksi stok GİZLENMEZ: gerçek bir veri kusurudur, görünmesi gerekir. */
.peron-layout .peron-table.dv-t td.dv-eksi { color: var(--rose-ink); font-weight: 700; }
.peron-layout .peron-table.dv-t .dv-yon { margin-left: 5px; font-size: 10px; color: var(--text-muted); }
.peron-layout .peron-table.dv-t td.dv-bos { padding: 14px 12px; text-align: center; color: var(--text-muted); }
.peron-layout .dv-pasif { font-size: 10px; color: var(--text-muted); }

/* Geniş ekranda yalnız nefes payı artar — punto hiyerarşisi AYNI oranla korunur. */
@media (min-width: 560px) {
    .peron-layout .dv-sec-h { padding: 9px 13px; gap: 6px 12px; }
    .peron-layout .dv-kunye { gap: 6px 22px; padding: 8px 13px; }
    .peron-layout .dv-not   { padding: 8px 13px; font-size: 11.5px; }
    .peron-layout .dv-haric { padding: 8px 13px; font-size: 11.5px; }
}

@media print {
    /* Bölüm başlığındaki CSV düğmesi kâğıda basılmaz. Seçicilik (0,3,0) ile
       `.peron-btn` (0,1,0) ezilir — `!important` GEREKMEZ.
       🔴 BAŞKA YAZDIRMA KURALI YOK — KASITLI: kart çerçevesi, gölgesizlik ve
       `break-inside` panelin TEK yazdırma bloğunda `.peron-card` üzerinden
       zaten tanımlı; künye ve bölümler o sınıfı taşıdığı için kendiliğinden
       uyar. Burada sabit renk yazmak, gece modu dâhil tüm kart dilini bu ekran
       için ikinci kez tanımlamak olurdu. */
    .peron-layout .dv-sec-h .peron-btn { display: none; }
}


/* ============================================================
   KAYDEDİLEBİLİR SÜZGEÇ ŞERİDİ (1.360.0)
   Araç çubuğunun İÇİNDE yaşar; kendi satırını AÇMAZ — yoğunluk
   kuralı: ERP'de ekranda onlarca denetim var, her biri için yeni
   satır açmak aracı şişirir. Dar ekranda kendi kendine sarar.
   🔴 Renkler TOKEN; dosya sonuna yazılan blok sabit hex kullanamaz
   (bkz. DÖNEM SONU DEVRİ bloğu — aynı tarama alanına düşer).
   ============================================================ */
.peron-layout .szg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    max-width: 100%;
}
/* Seçici içeriğe göre daralır: kayıtlı süzgeci olmayan kullanıcıda
   şerit yer kaplamasın, uzun adda da komşularını ezmesin. */
.peron-layout .szg .szg-sec {
    min-width: 132px;
    max-width: min(220px, 60vw);
}
.peron-layout .szg-not {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}

@media print {
    /* Kayıtlı süzgeç bir ARAÇTIR, belgenin parçası değil. */
    .peron-layout .szg { display: none; }
}


/* ═══ BANKA TANIMLARI (1.367.0) ═══════════════════════════════════════════════
   Kullanıcı ticari bir ERP'nin "Banka Tanımları" penceresini örnek gösterdi.
   🔴 KLİŞE KART IZGARASI DEĞİL: kartlar aynı yükseklikte, aynı ikonlu, üçlü
      dekoratif bir sıra DEĞİL — her kart bir VERİ satırıdır (şube · sayaçlar) ve
      ızgara içeriğe göre akar. Gradyan, cam efekti, yan şerit yok.
   🔴 YOĞUNLUK ERDEMDİR: bu bir ERP; kart 10px dolgulu, punto 12/11px, sayaçlar
      tek satır. Hiçbir denetim eşiğinin üstüne BÜYÜTÜLMEDİ. */
.bank-grid {
    display: grid;
    gap: 10px;
}
.bank-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.bank-card:hover  { border-color: var(--pri); box-shadow: 0 2px 10px rgba(27, 37, 51, .08); }
.bank-card:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.bank-card[data-pasif] { opacity: .55; }
.bank-card-ust { display: flex; align-items: center; gap: 7px; }
.bank-card-ad {
    font-weight: 700; font-size: 13px;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bank-card-sube {
    font-size: 11px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Hesap formu: Banka seçicisi türe göre gizlenince kardeşi satırın TAMAMINI alır
   (1.368.0 — tasarım ölçümü: 1440px'te sağda 232px boş hücre kalıyordu). */
.peron-form-row.acc-tek-sutun { grid-template-columns: 1fr; }

/* Künye satırı (yetkili · telefon) — şubeden yarım basamak daha silik, çünkü
   kartın okuma sırası ad → şube → künye → sayaçlardır (1.368.0). */
.bank-card-kunye {
    font-size: 10.5px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bank-card-sayac {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 11px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.bank-card-sayac span { display: inline-flex; align-items: center; gap: 3px; }
.bank-card-sayac svg  { width: 13px; height: 13px; flex: 0 0 auto; }

/* 🔴 GENİŞ MODAL AYRI BİR VARYANT: `.lg` (680px) altı sekmeli tabloya dar
   geliyordu ve tablolar `overflow:hidden` ile kırpılırdı. Taban kural zaten
   `width:100%` olduğu için dar ekranda hiçbir şey değişmez. */
.peron-modal.xl { max-width: 940px; }

/* Sekme şeridi — 6 sekme dar ekrana sığmaz, KENDİ İÇİNDE kayar (sayfa kaymaz). */
.bank-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    padding-bottom: 0;
    scrollbar-width: thin;
}
.bank-tab {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 6px 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.bank-tab:hover:not(:disabled) { color: var(--text-primary); }
.bank-tab.is-on { color: var(--pri-text); border-bottom-color: var(--pri); }
.bank-tab:disabled { opacity: .4; cursor: not-allowed; }

.bank-panes { min-height: 180px; }
.bank-pane-ust {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
/* 🔴 YARIM ADIM YASAK (punto merdiveni). 12,5px yazmıştım; kapı
   `t147_1364_denetim_dogrula.js` "12,5px yalnız üç belgeli yerde olabilir"
   iddiasıyla kırmızı verdi. Merdivenin onaylı adımına çekildi. */
.bank-pane-baslik { font-weight: 700; font-size: 12px; }
.bank-pane-not { font-weight: 400; font-size: 11px; color: var(--text-muted); margin-left: 6px; }
.bank-bos {
    padding: 16px 12px;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 8px;
}
.bank-table { font-size: 12px; }
.bank-table th { font-size: 11px; }
.bank-table td, .bank-table th { padding: 6px 8px; }
.bank-iban { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* 🔴🔴 DAR EKRANDA ALAN DÜŞER, VERİ DÜŞMEZ (tasarım denetimi bulgusu, 1.367.0).
   ÖLÇÜLDÜ: 7 kolonluk alt hesap tablosu 320px'te 640px istiyor, kabı 282px —
   satırın ancak %44'ü aynı anda görünüyordu. İkincil kolonlar burada düşer;
   düşen HER alanın yeni evi ad hücresindeki `.bk-kunye` satırıdır.
   🔴 GİZLEME CSS'TE, JS'TE DEĞİL (1.335.0 kuralı): künye her genişlikte basılır.
      Koşullu basmak, pencere döndürülünce ekranı çizmeden yanlış gövdeyle
      bırakırdı. */
.bk-kunye {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
@media (min-width: 561px) {
    .bk-kunye { display: none; }
}
@media (max-width: 560px) {
    .bank-table .bk-ikincil { display: none; }
}

/* 🔴 YIKICI EYLEM KOMŞUSUNA YAPIŞMAZ. ÖLÇÜLDÜ: düzenle↔sil arası 3px (eşik ≥6px)
   ve 320 ile 1440'ta aynı. "Sil" geri alınamaz bir eylem; 3px'lik ayrım yanlış
   dokunuşu davet eder.
   🦷 DÜĞME BÜYÜTÜLMEDİ (36×36 kaldı) — yalnız ARALARI açıldı. "Büyütme bişeyi". */
.bank-table td.col-actions > div { display: flex; gap: 6px; justify-content: flex-end; }

/* 🔴🔴 MOBILE-FIRST — KOD DENETİMİ BULGUSU (1.367.0).
   İlk yazımda bu blok bir üst-sınır kırılma noktasıyla, yani MASAÜSTÜ TABANLI
   yazılmıştı (768px üstü varsayılan, altı istisna).
   🦷 YORUMDA DA O DİZEYİ YAZMIYORUM: kapı blok metnini HAM tarıyor, yani bir
      YORUM içindeki örnek bile kural sanılır ve hem iddiayı hem diş testini
      KÖRLEŞTİRİR (bir kez yaşandı). Kapıyı gevşetmek yerine cümleyi değiştirmek
      doğrusu: kapı kusuru değil, benim anlatım biçimim düzeltildi.
   Proje kuralı: *"temel kurallar dar ekran, `@media (min-width: …)` yalnız
   BÜYÜTÜR"*. Kapı `t140_1359_devir_dogrula.js` §K bunu ADIYLA ölçüyor ve
   kırmızı verdi.
   🦷 TUZAK DOSYA SONUNA YAZMAKTIR: o kapı "1.359.0 bloğundan dosya SONUNA
      kadar" tarıyor, yani sona eklenen HER blok bu denetime girer. CLAUDE.md
      bunu zaten belgeliyordu; ben yine de sona yazdım.

   🔴 TELEFON GİRDİSİ 16px — okunabilirlik tercihi DEĞİL: iOS Safari, odaklanan
      girdinin puntosu 16px'in ALTINDAYSA sayfayı BÜYÜTÜR ve kullanıcı yatay
      kaydırmaya sıkışır. Bu yüzden 16px TABANDADIR ve geniş ekranda düşürülür. */
.bank-grid { grid-template-columns: 1fr; padding: 10px; }
.bank-panes .peron-input,
.bank-panes .peron-select,
.bank-panes textarea.peron-input { font-size: 16px; min-height: 40px; }
.bank-tab { min-height: 34px; }

/* 🔴 SINIR 768 DAHİL (tasarım denetimi bulgusu): 769 yazılınca TAM 768px'te —
   yani standart tablet genişliğinde — ızgara tek sütunda kalıyor ve 712px boş
   alan duruyordu. Telefon girdisi 16px kuralı ise ≤768'de GEÇERLİ KALMALI
   (iOS büyütme kalkanı), o yüzden yalnız ızgara 768'e alındı. */
@media (min-width: 768px) {
    .bank-grid { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); padding: 14px; }
}
@media (min-width: 769px) {
    .bank-panes .peron-input,
    .bank-panes .peron-select,
    .bank-panes textarea.peron-input { font-size: inherit; min-height: 0; }
    .bank-tab { min-height: 30px; }
}


/* ============================================================
   1.374.0 — MOBİL ERİŞİLEBİLİRLİK DÜZELTMELERİ
   ============================================================ */

/* 🔴🔴 ÇEK-SENET LİSTESİ — ESNEK "Cari" KOLONU ÇÖKMESİN.
   Colgroup'ta "Cari" dışındaki yedi kolon SABİT (70+84+110+130+104+118+150 = 766px);
   "Cari" ise genişliksiz bırakılmış, yani kalanı alıyor. Kap 766px'in altına indiğinde
   kalan sıfıra koşuyor ve kolon eziliyor.
   🔴 ÖLÇÜLDÜ: 1024px'te Cari 136px (sorun yok) · 768px'te 46,6px. Sonuç KIRPMA değil
      — bu kolonda ellipsis yok, metin SARIYOR: "deneme müşteri" 4+ satıra bölünüyor ve
      satır yüksekliği 72,5px'e çıkıyor. Yoğunluk hedefinin tam tersi.
   🔴 ÇÖZÜM TABLOYA TABAN GENİŞLİK: kolona sabit genişlik vermek geniş ekranda da
      dondururdu. Taban 900px seçildi çünkü Cari'ye 900-766 = 134px bırakır — 1024px'te
      ölçülen 136px'in pratik olarak aynısı, yani GENİŞ EKRANDA HİÇBİR ŞEY DEĞİŞMEZ
      (kap 900px'ten genişse taban hiç devreye girmez). Dar ekranda tablo kendi kabında
      yatay kayar; sayfa gövdesi kaymaz (proje kuralı korunur). */
#cek-table { min-width: 900px; }

/* 🔴🔴 FATURA LİSTESİ — "İşlemler" SÜTUNU 641-768px BANDINDA YAPIŞKAN KALSIN.
   ÖLÇÜLDÜ (768px): tablo 1057px, kap 740px; İşlemler hücresi x:908→1058, yani ilk
   açılışta tamamen görünmez alanda. Kullanıcı her satırda ~700-900px yatay kaydırmadan
   Yazdır/Düzenle/Kes/İptal düğmelerine ULAŞAMIYOR.
   🔴 DÜĞMELER BÜYÜTÜLMEDİ: ölçüldü, 36×36px ve aralarında 6px — proje eşiğini
      (birincil eylem ≥36px, komşu ≥6px) zaten karşılıyorlar. Kusur boyut değil KONUM.

   🔴🔴 TABAN KURAL TEK YETKİLİDİR — ARKA PLAN BURADA YENİDEN YAZILMAZ.
      `.peron-table--fixed td.col-actions` (bu dosyada ~6596) yapışkanlığı, gölgeyi,
      `thead th.col-actions` gradyanını ve `tr:hover td.col-actions` rengini ZATEN
      tanımlıyor. İlk yazımda bunları görmeden yeniden bildirdim ve İKİ GÖRSEL
      GERİLEME ürettim (ölçüldü): gece modunda başlık düz `var(--pri)` basıp koyu
      gradyanın içinde parlak bir kutu olarak sırıtıyordu; hover'da satır boyanırken
      İşlemler hücresi `--card-bg`de kalıp dikiş bırakıyordu. Burada yalnız KONUM
      geri veriliyor; renkler taban kuraldan gelir ve tema token'larıyla otomatik
      doğru düşer.

   🔴 ALT SINIR 641px ŞART, KALDIRILMAZ. Bu dosyada ~11305'teki kural yapışkanlığı
      ≤768px'te BİLEREK kapatıyor ve gerekçesi ÖLÇÜLMÜŞ: "yapışkan kolon 390px'te
      tablonun yarısını yiyordu". Bandı ≤640px'e açmak o kusuru geri getirir.
      Fatura listesi bugün ≤640px'te menüde zaten görünmüyor
      (`mobilUyumlu('invoices')` false), ama kural ileride o ekran mobile açıldığında
      da doğru kalmalıdır — kapı bandın alt sınırını savlar.
   🔴 768 ÜSTÜNE GEREK YOK: kapatma kuralı yalnız ≤768px'te; onun üstünde taban kural
      zaten yapışkan. Karşı kuralı geniş ekrana taşımak ölü kod olurdu.
   🔴 KAPSAM `[data-tur]`: `.col-actions` çek listesi dahil birçok tabloda var;
      çıplak seçici ölçülmemiş ekranları da etkilerdi. `data-tur` yalnız fatura
      liste tablosunda (peron-mod-invoice.js:281). */
@media (min-width: 641px) and (max-width: 768px) {
    .peron-table--fixed[data-tur] > tbody > tr > td.col-actions,
    .peron-table--fixed[data-tur] > thead > tr > th.col-actions {
        position: sticky;
        right: 0;
        box-shadow: -8px 0 12px -10px rgba(27, 37, 51, 0.12);
    }
}


/* ============================================================
   1.376.0 — SEÇİM ÇUBUĞU SADELEŞTİRME
   Kullanıcı: "daha modern ve tek minimalist butonlar olsun, şu anki çok kaba."
   🔴 BÜYÜTME YOK: yükseklik/punto artmadı. Kazanç METİN KISALTMADAN ve gürültü
      azaltmadan geliyor (dikey ayıraç kalktı, sayaç çipe döndü, X ikona indi).
   ============================================================ */

/* Hap biçim yalnız TEK SATIRDAYKEN doğru görünür; dar ekranda çubuk sarıyor ve
   999px yarıçap sarmış kutuda tuhaf duruyor → orada köşe yarıçapı korunur. */
@media (min-width: 641px) {
    .peron-selection-bar { border-radius: 999px; padding: 7px 10px 7px 14px; gap: 10px; }
}

/* Sayaç: ayıraç çizgisi yerine hafif bir çip. Çizgi, sarma durumunda hiçbir şeyi
   ayırmıyordu ve tek satırda da gereksiz bir dikey vurgu üretiyordu. */
.peron-selection-bar .sel-count {
    border-right: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pri) 12%, transparent);
    color: var(--pri-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.peron-selection-bar .sel-count b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Düğmeler hap biçimli ve dar. 30px yükseklik: proje eşiği yoğun yüzey denetimi için
   ≥28px — altına inilmedi, üstüne de çıkılmadı. */
.peron-selection-bar .sel-actions .peron-btn.sm {
    min-height: 30px;
    padding: 5px 12px;
    gap: 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
/* Birincil eylem ("Satınalmaya Gönder") yıkıcı/ana eylemdir → ≥36px eşiği. */
.peron-selection-bar .sel-actions .peron-btn.sm.primary { min-height: 36px; padding: 7px 14px; }

/* Yalnız-ikon temizle düğmesi: kare ve ≥28px. */
.peron-selection-bar .sel-actions .peron-btn.sm.sel-x {
    width: 30px;
    min-width: 30px;
    padding: 0;
    justify-content: center;
    color: var(--text-muted);
}
.peron-selection-bar .sel-actions .peron-btn.sm.sel-x:hover { color: var(--rose-ink, var(--text-primary)); }

/* 🔴 1.380.0 — DOKUNMATİKTE KOMŞU HEDEFLER ARASI ≥6px (mobil denetim, 768px tablet: 3px).
   BURADA, DOSYANIN SONUNDA durmak ZORUNDA: `#prod-shell td.col-actions > div` için
   koşulsuz `gap: 3px` ve `(pointer: fine)` bloklarındaki `gap: 2px` AYNI özgüllükte ve
   daha aşağıdaydı; ilk yazım (dosyanın ortasında) ölçüldü ve hiç uygulanmıyordu. */
@media (pointer: coarse) {
    #prod-shell td.col-actions > div { gap: 6px; row-gap: 6px; }
}

/* 🔴 1.380.0 — SSH iç modül tablosu GECE MODUNDA: `html[data-peron-theme="dark"] .peron-table
   thead` (0,2,2) mavi gradyanı yeniden basıyordu — açık temadaki `background: none` (0,2,1)
   onu YENEMEZ. Ölçüldü: gece başlık kontrastı 2,64:1 (AA 4,5). Emsal: aynı dosyada
   `.peron-table--fixed thead th.col-actions` için yazılmış gece kuralı. */
html[data-peron-theme="dark"] .peron-table .ssh-mod-tablo thead { background: none; }
/* Dar ekranda `.peron-layout .peron-table th/td { padding: 8px }` (aynı özgüllük, daha
   aşağıda) iç tablonun yoğun dolgusunu eziyordu — iç tablo kendi dolgusunu korur. */
@media (max-width: 768px) {
    .peron-layout .peron-table .ssh-mod-tablo th { padding: 4px 8px; }
    .peron-layout .peron-table .ssh-mod-tablo td { padding: 6px 8px; }
}

/* ══ KOLON GENİŞLİĞİ AYARI (1.381.0) — `A.kolonAyari` ══════════════════════════
   Her başlığın sağ kenarında ince, yarım boy, soluk bir ayırıcı HEP görünür (kullanıcı:
   "tutup kaydırma yerleri belirgin olsun ama kaba değil, zarif"). Başlığın üstüne
   gelince koyulaşır; tutamacın üstünde ve sürüklenirken 2px'e kalınlaşıp boyu uzar —
   yalnız TUTULAN kolonunki (`.is-aktif`), ötekiler sakin kalır. Tutma alanı çizgiden
   geniştir (8px, dokunmatikte 12px): çizgi ince kalırken hedef kaçmaz. Rengi başlık
   metninden (`currentColor`) — iki temada da başlık zemininde okunur, sabit renk yok.
   Boy `scaleY` ile değişir: yerleşim hesabı tetiklenmez.
   🔴 1.381.0 — TÜM TABLOLARA yayıldı (`peron-app.js` otomatik bağlama, MutationObserver).
   🔴 `:where()` → özgüllük 0: başlığa `position: sticky` veren HER kural (yapışkan
      İşlemler kolonu) bunu yener; tutamaç o durumda yapışkan hücreye göre konumlanır.
      Sıradan (0,1,1) yazılsaydı dosya sonunda durduğu için eşit özgüllükteki yapışkan
      başlıkları sessizce `relative`e çevirirdi. */
:where(th.kol-konum) { position: relative; }
.kol-tut {
    position: absolute; top: 0; right: 0; bottom: 0; width: 8px;
    cursor: col-resize; touch-action: none; z-index: 3;
}
.kol-tut::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
    border-radius: 1px; background: currentColor; opacity: .3;
    transform: scaleY(.46); transition: opacity .14s ease, transform .14s ease;
}
th:hover > .kol-tut::after { opacity: .55; }
.kol-tut:hover::after, .kol-tut.is-aktif::after { width: 2px; opacity: .95; transform: scaleY(.72); }
body.kol-suruklen, body.kol-suruklen * { cursor: col-resize; -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) { .kol-tut { width: 12px; } }
/* 1.382.0 — son görünür kolonun sağ tutamacı gizli (o kenar kabın kenarıdır, oynamaz);
   sağa yapışkan kolon (İşlemler) SOL kenarından ayarlanır: tablo taşınca yapışkan kolon
   kabın sağına çivilenir ve solundaki sınır onun altında kalıyordu. Ayrıntı: peron-app.js
   `kolonTutamacDuzeni`. */
.kol-tut--gizli { display: none; }
.kol-tut--sol { left: 0; right: auto; }
.kol-tut--sol::after { left: 0; right: auto; }
/* 1.415.2 — seçim kutusu kolonunda tutamaç yok: dar kolonda (28-36px) 8-12px'lik tutma alanı "Tümünü seç" kutusunun sağ
   yarısını örtüyordu (ölçüldü: Mal Kabul dokunmatikte etkin alan 13,5×24, Üretim Siparişleri telefonda kutunun ortası).
   O kolonu genişletmenin bir anlamı da yok. */
table[data-kolon-ayari] > thead > tr > th:has(input[type="checkbox"]) > .kol-tut:not(.kol-tut--sol) { display: none; }

/* ══ BAŞLIĞA TIKLA → SIRALA (1.382.0) — `peron-app.js` siralaHazirla ════════════════
   Ok başlığın SAĞ dolgusunda, `::after` ile: başlık METNİNE dokunulmaz (kolon ayarının
   anahtarı başlık metninden türer) ve yerleşim değişmez (mutlak konum). Tutamacın
   (sağdan 0-8px) hemen solunda durur; tutamaç üstte kaldığı için tutma alanı bozulmaz.
   Sıralı değilken fareyle gelince soluk ↕ görünür: "tıklanabilir" ipucu, kalıcı gürültü
   değil. Renk başlık metninden (`currentColor`) — iki temada da sabit renk yok. */
:where(table[data-kolon-ayari] > thead > tr > th.sir-th) { cursor: pointer; }
/* 1.444.0 — kullanıcı: "oku biraz belirgin yap çok küçük şu anda". 9px'lik ince ok başlığın yanında
   kayboluyordu; 11px kalın. Tek kaynak bu kural: her tablonun oku aynı (tasarım dili her yerde aynı).
   🔴 Ok 2,4px genişledi; `right` 8 → 6px ile sol kenarı eski yerinde kalır. 8px'te bırakılsaydı ölçüldü (1440px):
      Stok "Durum", Cari "Vergi No", Satınalma "Birim Fiyat" başlık metnine 0,4-0,8px biniyordu. Görünen tutamaç
      çizgisi hücrenin en sağındaki 1-2px'tir; okla arasında 4px kalır. */
table[data-kolon-ayari] > thead > tr > th.sir-th::after {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    font-size: 11px; font-weight: 700; line-height: 1; opacity: 0; pointer-events: none;
    content: "↕"; transition: opacity .12s ease;
}
table[data-kolon-ayari] > thead > tr > th.sir-th:hover::after { opacity: .6; }
table[data-kolon-ayari] > thead > tr > th.sir-th.sir-artan::after { content: "▲"; opacity: .95; }
table[data-kolon-ayari] > thead > tr > th.sir-th.sir-azalan::after { content: "▼"; opacity: .95; }
table[data-kolon-ayari] > thead > tr > th.sir-th:focus-visible { outline: 2px solid var(--card-bg); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { table[data-kolon-ayari] > thead > tr > th.sir-th::after { transition: none; } }
@media print { table[data-kolon-ayari] > thead > tr > th.sir-th::after { content: none; } }
@media (prefers-reduced-motion: reduce) { .kol-tut::after { transition: none; } }
/* Başlık kolon daralınca komşusuna taşmaz, "…" ile kısalır (tam adı `title`'da ya da
   kolon genişletilince görünür). Denetim taşıyan başlık hariç (tümünü seç kutusu — Mal Kabul,
   Üretim, Sevkiyat…): dokunmatikte 24px'lik kutu 34px'lik hücrenin iç alanını aşıyor, odak
   halkası kırpılmasın. */
table[data-kolon-ayari] > thead > tr > th:not(.peron-sel-th):not(.col-check):not(:has(input, select, button)) { overflow: hidden; text-overflow: ellipsis; }
/* 🔴 GÖVDE HÜCRESİ KIRPILMAZ (kod denetimi + ölçüm, 1.381.0). İlk yazımda elle ayarlanmış
   (`kol-elle`) tabloda `td { overflow:hidden }` vardı; hücrenin İÇİNDE konumlanan ipucu ve
   açılır öğeleri de kesiyordu — ölçüldü: Satınalma "Sipariş notu var" ipucu (`::after`)
   hücrenin 6px üstünde açılır ve görünmez olurdu. Kullanıcının kendi daralttığı kolonda
   tek satırlık bir değerin komşuya taşması GÖRÜNÜR ve geri alınabilir (kolonu genişletir);
   gizlenen bir ipucu ise sessiz bir kayıptır. Başlık kırpması ("…") yukarıda DURUR. */
@media print { .kol-tut { display: none; } }
/* Başlıktaki grup ayırıcısı (`border-left`) her kolondaki ayırıcıyla yan yana ÇİFT çizgi
   verirdi → bağlı tablonun başlığında kalkar. Gövdedeki grup ayırıcıları durur.
   Satınalma'da başladı; tüm tablolara yayılınca ölçüldü (1280px): Sipariş (2) · Mizan ·
   Defter-i Kebir · KDV · Cari Yaşlandırma · Risk (1'er) başlığında aynı ayırıcı vardı.
   🔴 `transparent` DEĞİL, 0: başlık zemini `thead`'dedir, hücrenin kenarlık şeridine
      boyanmaz — şeffaf kenarlıktan alttaki BEYAZ görünüyordu (ölçüldü: x=596'da tam
      boy #fff çizgi). `table-layout: fixed` kolon genişliğini `<col>`dan aldığı için
      kenarlığın kalkması kolonları kaydırmaz.
   🔴 Özgüllük (2,1,4) — başlık hizası kuralıyla aynı iki kimlik: ayırıcıyı yazan modül
      kuralları (ör. `.pur-table thead th:not(.col-num) + th.col-num` (0,3,3)) geçilir. */
#peron-panel-root :is(#peron-content, #peron-modal-container) table[data-kolon-ayari] > thead > tr > th { border-left: 0; }

/* ══ TABLO BAŞLIKLARI ORTALI (1.381.0) ══════════════════════════════════════════
   Kullanıcı: "başlıkların hepsi ortalı olsun kaydırdıkça hep ortalansın" (Satınalma) →
   "şimdi tüm tablolarda bunu yap, başlıkları ortalamayı unutma". Kolon genişliği artık
   kullanıcının elinde; sola/sağa yaslı başlık kolon daraltılıp genişletildikçe farklı
   kenara kaçıyor, tablo "dağınık" görünüyordu.
   ■ TEK KURAL, TEK YER. Yalnız başlık satırı (`thead`); gövdedeki satır başlığı (`tbody
     th`) ve veri hizası DEĞİŞMEZ — sayı sağda, metin solda kalır.
   ■ Özgüllük (2,0,4) — İKİ kimlik: sayfa gövdesi (`#peron-content`) ya da modal kabı
     (`#peron-modal-container`). Modüllerin başlık hizası yazan kuralları TEK kimlikle
     sınırlı (ölçüldü: en yükseği Stok'un JS içi `#stock-shell .stk-tbl thead tr th`
     (1,1,4) ve `.th-stock` (1,2,0) ailesi; CSS dosyasında `#bs-kok .bs-tablo thead th`
     (1,1,2)) → hepsini `!important` OLMADAN geçer. Tek kimlikli yazılsaydı (1,0,4) Stok
     listesi sola/sağa yaslı kalıyordu (ölçüldü).
   🔴 Satır içi `style="text-align:…"` bunu EZER — ekrandaki başlıklarda yazılmaz
      (Stok → ihtiyaç modalındaki iki başlık bu yüzden `col-num` sınıfına çevrildi).
   ■ Yazdırma belgeleri (ayrı pencere/iframe) bu kökün DIŞINDA — kâğıt düzenleri etkilenmez. */
#peron-panel-root :is(#peron-content, #peron-modal-container) table > thead > tr > th { text-align: center; }
/* Cari listesi "Fiyat Listesi" rozeti kolonundan TAŞMAZ (1.381.0, ölçüldü 1280/1440px:
   "2026 ilk liste" rozeti 102px isterken kolon 88px'ti ve rozet "Bakiye" kolonunun üstüne
   biniyordu). Ad "…" ile kısalır, tamı hücrenin title'ında. Rozetin nokta imi korunur. */
.ct-pl-rozet { max-width: 100%; }
.ct-pl-rozet .ct-pl-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ══ YAPIŞKAN "İŞLEMLER" BAŞLIĞI ŞERİTLE BİR BÜTÜN (1.381.0) ══════════════════════
   Kullanıcı: "üretim takibi kısmındaki işlemler kısmı neden hala eskisi gibi? diğer
   tablolarda da aynı sorun varsa düzelt". Başlıklar ortalanıp ayırıcılar gelince
   İşlemler başlığı şeridin sağında AYRI, KOYU bir blok olarak kaldı (ölçüldü 1440px,
   Üretim Takibi: x=1146, 234×30).
   KÖK NEDEN: yapışkan hücre altından kayan başlıkları örtmek için KENDİ zeminini boyamak
   zorunda; ama şeridin 120°'lik gradyanını kendi kutusunda BAŞTAN başlatıyordu → sol
   kenarı şeridin koyu ucu (--pri-dark) oluyor, üstüne sol gölge biniyordu.
   ÇÖZÜM (hesaplandı, tahmin değil): hücrenin sol kenarı şerit gradyanının %78–85'ine
   düşer (tablo 900–1400px, kolon 156–234px → t = 0,5 + (W/2 − k)·0,866/(0,866W + H/2));
   o noktadaki renk iki ucun %40/%60 karışımıdır. Hücre o renkten şeridin uç rengine
   YATAY gradyanla boyanır → dikiş ±1 renk birimi. Başlıktaki gölge kalkar (gövdede durur);
   sınırı zaten kolon ayırıcısı çiziyor. Tüm `.peron-table--fixed` tablolarını kapsar
   (Cari · Üretim · Üretim Siparişleri · Sevkiyat · SSH · Fatura · Çek…).
   `color-mix` desteklenmeyen tarayıcıda ilk (düz uç rengi) bildirim kalır. */
.peron-table--fixed thead th.col-actions {
    background: var(--pri-hover);
    background: linear-gradient(90deg, color-mix(in srgb, var(--pri) 40%, var(--pri-hover)) 0%, var(--pri-hover) 100%);
    box-shadow: none;
}
html[data-peron-theme="dark"] .peron-table--fixed thead th.col-actions {
    background: var(--tbl-head-3);
    background: linear-gradient(90deg, color-mix(in srgb, var(--tbl-head-2) 40%, var(--tbl-head-3)) 0%, var(--tbl-head-3) 100%);
}

/* ══ CARİ EKSTRE MODALI — YENİ HAREKET PANELİ + GENEL TOPLAM (1.382.0) ══════════════════
   Kullanıcı: "ekstreleri gösteren modalda altta genel toplam yok, hesaba ekleme çıkarma
   kısmını daha detaylı yap … üstte evrak türü, tarihi, işlem tarihi; aşağıda stok
   kartından ürün, adet, fiyat, KDV, iskonto, 2. iskonto … profesyonel olsun".
   ■ Sekmeler mevcut `.peron-tabs` desenidir (yeniden icat edilmedi); evrak formu fatura
     formunun `.inv-*` sınıflarını kullanır — iki yüzey aynı dili konuşur.
   ■ Yalnız token; sabit renk yok (gece modu tokenla ezilir). Mobil önce yazıldı: dar
     ekranda alanlar alt alta, ≥720px'te yan yana. */
.led-giris { box-sizing: border-box; margin-bottom: 14px; }
.led-giris-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.led-giris-bar .peron-tabs { margin: 0; min-width: 0; }
.led-giris.is-kapali .led-giris-bar { margin-bottom: 0; }
.led-giris-kat { flex: 0 0 auto; min-height: 28px; }
.led-giris-govde[hidden] { display: none; }

/* Evrak formu modalın içinde: fatura sayfasındaki kartın alt boşluklarını sıkılaştır. */
.led-giris .inv-doc { margin-bottom: 10px; }
.led-giris .inv-lines-card { margin-bottom: 10px; }
.led-giris .inv-actions { margin-top: 10px; }
.eg-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.eg-tur { margin: 0; padding: 3px; }
.eg-tur .peron-tab { min-height: 28px; padding: 0 12px; }
/* Kalem tablosu kendi kabında kayar; sabit kolonlar toplamı 702px + esnek Ürün. */
.peron-table.eg-t { min-width: 860px; }
.eg-t .inv-l-inp[data-f="quantity"],
.eg-t .inv-l-inp[data-f="unit_price"],
.eg-t .inv-l-inp[data-f="vat_rate"],
.eg-t .inv-l-inp[data-f="i1"],
.eg-t .inv-l-inp[data-f="i2"] { text-align: right; font-variant-numeric: tabular-nums; }
.eg-t .inv-l-inp { box-sizing: border-box; width: 100%; min-width: 0; }
.eg-t .inv-prod-ac,
.eg-t .inv-prod-ac .po-ac { width: 100%; min-width: 0; max-width: none; }

/* Serbest borç/alacak — eski tek satırlık form, satır içi stilden sınıfa taşındı. */
.led-serbest {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: end;
    padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card-bg); box-sizing: border-box;
}
.led-serbest-f { display: grid; gap: 3px; min-width: 0; }
.led-serbest-f > label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.led-serbest-f > label.is-borc { color: var(--green-ink); }
.led-serbest-f > label.is-alacak { color: var(--rose-ink); }
.led-serbest-f .peron-input,
.led-serbest-f .peron-select { width: 100%; min-width: 0; box-sizing: border-box; }
.led-serbest-not { margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
@media (min-width: 720px) {
    .led-serbest { grid-template-columns: minmax(0, 1fr) 140px 120px 120px 96px auto; }
}

/* Genel toplam — tfoot; para birimi başına bir satır. Gövdeyle aynı punto merdiveni
   (10,5px), vurgu kalınlık + üst çizgiyle; zemin yardımcı yüzey. */
.peron-table.ek-modal-t > tfoot > tr > td {
    font-size: 10.5px; padding: 6px 6px; white-space: nowrap;
    font-weight: 700; color: var(--text-primary);
    background: var(--content-bg); border-top: 2px solid var(--border);
}
.peron-table.ek-modal-t > tfoot > tr + tr > td { border-top: 1px solid var(--border-light); }
.peron-table.ek-modal-t > tfoot > tr > td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.peron-table.ek-modal-t > tfoot > tr > td.ek-top-ad { text-align: right; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.peron-table.ek-modal-t > tfoot > tr > td.ek-top-b { color: var(--green-ink); }
.peron-table.ek-modal-t > tfoot > tr > td.ek-top-a { color: var(--rose-ink); }

/* Faturalar akordiyonu — evrak türü + işlem tarihi künyesi (yalnız doluysa basılır). */
.inv-detail-kunye { padding: 2px 2px 8px; font-size: 11px; color: var(--text-muted); }
.inv-detail-kunye b { color: var(--text-secondary); font-weight: 600; }
/* Evrak formunda Açıklama satırın kalanını doldurur (değer JS'ten değişkenle gelir, bkz.
   peron-mod-invoice.js `belgeGirisi` → `alanSay`). Varsayılanlar `.inv-fld-grow` ile aynı. */
@media (min-width: 720px) { .eg-doc .inv-fld.eg-acik { grid-column: var(--eg-acik-2, 1 / -1); } }
@media (min-width: 1080px) { .eg-doc .inv-fld.eg-acik { grid-column: var(--eg-acik-3, span 2); } }

/* ══ E-TİCARET — GENEL BAKIŞ · SENKRONİZASYON · ENTEGRASYONLAR (1.390.0) ══════════════
   peron-mod-eticaret.js. Kapsam kabuk kimlikleriyle (#etk-gb · #etk-sn · #etk-en)
   daraltılır; global sınıflara (.peron-table, .peron-badge, .peron-select) kural YAZILMAZ.
   Renk yalnız token; gece modu tokenlerle kendiliğinden gelir. Masaüstü kolon bütçesi
   sabit kolonların toplamı + esnek kolonun okunur payı (min-width) olarak yazıldı; daha dar
   kapta tablo kendi .peron-table-wrap kabında kayar. Telefon düzeni dosyanın en sonunda. */

/* ── ortak ── */
.etk-sayfa { box-sizing: border-box; min-width: 0; }
.etk-yok, .etk-sifir { color: var(--text-muted); }
.etk-zaman { font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-tag {
    box-sizing: border-box; flex: 0 0 auto; display: inline-block;
    padding: 0 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--border-light); color: var(--text-secondary);
    font-size: var(--tbl-badge-fs); font-weight: 600; line-height: 18px; white-space: nowrap;
}
.etk-kanal { display: flex; align-items: center; gap: 6px; min-width: 0; }
.etk-kanal__ad {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--text-primary);
}
.etk-bayrak {
    display: inline-block; margin-left: 6px;
    font-size: var(--tbl-badge-fs); font-weight: 600; color: var(--amber-ink); white-space: nowrap;
}
.etk-t .col-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-t .is-hata { color: var(--rose-ink); }
.etk-t .is-karar { color: var(--amber-ink); }

/* Sayaç = süzgeçli geçiş. Görsel olarak satır yüksekliğini büyütmez (negatif pay),
   dokunma hedefi yine 28px (yoğun yüzey eşiği). */
.etk-say {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: flex-end;
    min-width: 28px; min-height: 28px; margin: -4px -6px; padding: 0 6px;
    border: 0; border-radius: var(--r-sm); background: transparent;
    font: inherit; font-weight: 700; color: inherit; font-variant-numeric: tabular-nums;
    text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 2px; cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.etk-say:hover { background: var(--pri-light); color: var(--pri-text); }
.etk-say:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }

/* ── Genel Bakış: durum şeridi (tek cümle + üç sayaç; metrik kartı DEĞİL) ── */
.etk-serit {
    box-sizing: border-box;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 24px; margin: 0 0 12px; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg);
}
.etk-serit__ana { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 320px; }
.etk-serit__ikon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--green-ink); }
.etk-serit__ikon svg { width: 18px; height: 18px; }
.etk-serit__metin { min-width: 0; }
.etk-serit__bas { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
.etk-serit__alt { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.etk-serit.is-uyari {
    border-color: color-mix(in srgb, var(--amber) 45%, var(--border));
    background: color-mix(in srgb, var(--amber) 7%, var(--card-bg));
}
.etk-serit.is-uyari .etk-serit__ikon { color: var(--amber-ink); }
.etk-serit.is-tehlike {
    border-color: color-mix(in srgb, var(--rose) 50%, var(--border));
    background: color-mix(in srgb, var(--rose) 8%, var(--card-bg));
}
.etk-serit.is-tehlike .etk-serit__ikon,
.etk-serit.is-tehlike .etk-serit__bas { color: var(--rose-ink); }
.etk-serit.is-notr .etk-serit__ikon { color: var(--text-muted); }
.etk-serit__say { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 0; }
.etk-serit__say > div { display: flex; align-items: baseline; gap: 6px; }
.etk-serit__say dt { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.etk-serit__say dd {
    margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.etk-serit__say dd.is-sifir { color: var(--text-muted); font-weight: 600; }
.etk-serit__say dd.is-hata { color: var(--rose-ink); }
.etk-serit__say dd.is-karar { color: var(--amber-ink); }

/* Genel Bakış panolarının kuralları dosya sonundadır ("E-TİCARET — GENEL BAKIŞ PANOSU"). */

/* ── Senkronizasyon: durum şeridi = süzgeç ── */
.etk-suz { margin: 0 0 10px; }
.etk-cipler { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.etk-cip {
    box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--r-full);
    background: var(--card-bg); color: var(--text-secondary);
    font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.etk-cip > b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.etk-cip:hover { border-color: var(--pri); color: var(--pri-text); }
.etk-cip:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.etk-cip.is-on { border-color: var(--pri); background: var(--pri-light); color: var(--pri-text); }
.etk-cip.is-on > b { color: inherit; }
.etk-cip.is-dikkat > b { color: var(--rose-ink); }
/* 1.421.0 — çipin başındaki simge (isteğe bağlı, `E.cipHtml` 6. bağımsız değişkeni). */
.etk-cip__ik { display: inline-flex; flex: 0 0 auto; color: var(--text-muted); }
.etk-cip__ik > svg { width: 13px; height: 13px; }
.etk-cip.is-on > .etk-cip__ik { color: inherit; }
.etk-cip.is-dikkat > .etk-cip__ik { color: var(--rose-ink); }
.etk-cip.has-nokta::before {
    content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted);
}
.etk-cip.is-isleniyor::before { background: var(--pri); }
.etk-cip.is-basarili::before  { background: var(--green); }
.etk-cip.is-hata::before      { background: var(--rose); }
.etk-cip.is-tekrar::before,
.etk-cip.is-engelli::before   { background: var(--amber); }

.etk-arac { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 12px; }
.etk-alan { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.etk-alan > span { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.etk-alan .peron-select { box-sizing: border-box; width: 220px; max-width: 100%; height: 36px; }
.etk-toplu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.etk-toplu[hidden] { display: none; }
.etk-toplu .peron-btn { min-height: 36px; }
.etk-toplu .peron-btn b { font-variant-numeric: tabular-nums; }

.etk-sn-t col.etk-c-no    { width: 72px; }
.etk-sn-t col.etk-c-kanal { width: 140px; }
.etk-sn-t col.etk-c-tur   { width: 124px; }
.etk-sn-t col.etk-c-hedef { width: 104px; }
.etk-sn-t col.etk-c-durum { width: 156px; }
.etk-sn-t col.etk-c-den   { width: 76px; }
.etk-sn-t col.etk-c-son   { width: 96px; }
.etk-sn-t col.etk-c-sure  { width: 68px; }
.etk-sn-t col.etk-c-olus  { width: 96px; }
/* Sabit 932 + Kanal yanıtı 160; seçim kolonu (36) varsa tablo o kadar genişler. */
.peron-table--fixed.etk-sn-t { min-width: 1092px; }
.peron-table--fixed.etk-sn-t:has(col.peron-sel-col) { min-width: 1128px; }
.etk-sn-t td.etk-a-no { color: var(--text-secondary); }
.etk-sn-t td.etk-a-yanit { color: var(--text-secondary); }
#etk-sn .etk-kap { transition: opacity .15s ease; }
#etk-sn .etk-kap.is-yukleniyor { opacity: .55; }
.etk-pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 2px 0;
}
.etk-pager:empty { display: none; }
/* Ortak sayfalayıcının düğme aralığı satır içi 4px; komşu hedef tabanı 6px → düğme başına 1px dış pay. */
#etk-sn-pager .pager-btn { margin: 0 1px; }

.etk-modal-p { margin: 0 0 8px; font-size: 12px; line-height: 1.55; color: var(--text-primary); }
.etk-modal-not { margin: 0 0 8px; font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }

/* ── Entegrasyonlar ── */
.etk-en-giris { margin: 0 0 8px; max-width: 72ch; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.etk-gosterge {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    font-size: 11.5px; color: var(--text-secondary);
}
.etk-gosterge > li { display: inline-flex; align-items: center; gap: 6px; }
.etk-en-bolum { margin: 0 0 16px; }
.etk-en-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.etk-mx-s { font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.etk-mx-s.is-var,
.etk-mx-s.is-var2   { color: var(--green-ink); }
.etk-mx-s.is-kismi,
.etk-mx-s.is-kismi2 { color: var(--amber-ink); }
.etk-mx-s.is-yok,
.etk-mx-s.is-belirsiz { color: var(--text-muted); }
.etk-hesaplar { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.etk-hesap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.etk-hesap__ad { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); }

.etk-en-t col.etk-c-plt { width: 200px; }
.etk-en-t col.etk-c-faz { width: 152px; }
.etk-en-t col.etk-c-wh  { width: 124px; }
.peron-table--fixed.etk-en-t { min-width: 720px; }

/* Matris: 16 yetenek satırı × kanal kolonları. İlk kolon yapışkan — dar kapta yatay
   kaydırılırken satırın ne olduğu kaybolmasın. Marka adları özel isim olduğu için başlık
   büyük harfe çevrilmez (n11, idefix, PTTAVM yazılışı korunur ve 88px'e sığar). */
.etk-mx { --etk-mx-yet: 150px; --etk-mx-col: 88px; }
.etk-mx col.etk-c-yet { width: var(--etk-mx-yet); }
.etk-mx col.etk-c-mx  { width: var(--etk-mx-col); }
.peron-table--fixed.etk-mx { min-width: calc(var(--etk-mx-yet) + var(--etk-mx-n, 11) * var(--etk-mx-col)); }
#etk-en .etk-mx > thead > tr > th {
    padding-left: 4px; padding-right: 4px;
    text-transform: none; letter-spacing: 0;
}
#etk-en .etk-mx > thead > tr > th:first-child {
    position: sticky; left: 0; z-index: 6;
    background: var(--pri-dark);
    background: linear-gradient(90deg, var(--pri-dark) 0%, color-mix(in srgb, var(--pri-dark) 73%, var(--pri)) 100%);
}
html[data-peron-theme="dark"] #etk-en .etk-mx > thead > tr > th:first-child {
    background: var(--tbl-head-1);
    background: linear-gradient(90deg, var(--tbl-head-1) 0%, color-mix(in srgb, var(--tbl-head-1) 73%, var(--tbl-head-2)) 100%);
}
#etk-en .etk-mx > tbody > tr > td { padding: 5px 6px; vertical-align: top; }
#etk-en .etk-mx > tbody > tr > td.etk-mx-yet {
    position: sticky; left: 0; z-index: 1;
    background: var(--card-bg); box-shadow: 1px 0 0 var(--border);
    font-weight: 600; color: var(--text-primary); line-height: 1.35;
}
.etk-mx td.etk-mx-h { overflow: hidden; }
.etk-mx td.etk-mx-h.is-var,
.etk-mx td.etk-mx-h.is-var2   { background: color-mix(in srgb, var(--green) 7%, transparent); }
.etk-mx td.etk-mx-h.is-kismi,
.etk-mx td.etk-mx-h.is-kismi2 { background: color-mix(in srgb, var(--amber) 7%, transparent); }
.etk-mx-not {
    display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10px; line-height: 1.3; color: var(--text-secondary);
}

/* ── TABLET/TELEFON: girdiler 16px — iOS odaklanınca sayfayı büyütmesin. Yatay telefon (dokunmatik,
   kısa kenar ≤640 — A.telefonMu ile aynı ölçüt) masaüstü düzenine geçse de telefondur (ölçüldü 844×390: 13px). ── */
@media (max-width: 768px), (pointer: coarse) and (max-height: 640px) {
    #etk-sn .etk-alan .peron-select { font-size: 16px; height: 40px; }
}

/* ═══ MOBİL SON SÖZ — E-TİCARET (≤640px) ═══════════════════════════════════════════
   Dosyanın sonunda: "Kompakt Tasarım" ve genel telefon bloklarından SONRA gelmek zorunda.
   Masaüstü (≥641px) yolu değişmez. Telefonda ekran salt okunur: yazma denetimi JS'te hiç
   basılmaz; burada da kemer olarak gizlenir (pencere daraltılmış masaüstü için).
   Satır → kart: ikinci bir render yolu YOK, aynı <tr> ızgaraya dizilir. */
@media (max-width: 640px) {
    .etk-serit { gap: 8px; padding: 9px 10px; }
    .etk-serit__ana { flex-basis: 100%; }
    .etk-serit__bas { font-size: 12px; }
    .etk-serit__alt { font-size: var(--m-fs-sm); }
    .etk-serit__say { width: 100%; justify-content: space-between; gap: 4px 12px; }
    .etk-serit__say dt { font-size: var(--m-fs-xs); }
    .etk-serit__say dd { font-size: 12px; }

    .etk-cip { padding: 0 9px; font-size: var(--m-fs-sm); }
    .etk-arac { flex-direction: column; align-items: stretch; }
    .etk-alan .peron-select { width: 100%; }
    #etk-sn .etk-toplu { display: none; }

    /* Kabuk: kart listesi taşıyıcısı olur; yatay taşma kabın içinde de oluşmaz. */
    #etk-sn .etk-kap,
    #etk-en .etk-kap:not(.etk-mx-kap) {
        max-height: none; overflow: hidden;
        border: 0; border-radius: 0; box-shadow: none; background: transparent;
    }
    #etk-sn .etk-sn-t,
    #etk-en .etk-en-t { display: block; width: auto; min-width: 0; table-layout: auto; }
    #etk-sn .etk-sn-t > colgroup, #etk-sn .etk-sn-t > thead,
    #etk-en .etk-en-t > colgroup, #etk-en .etk-en-t > thead { display: none; }
    #etk-sn .etk-sn-t > tbody,
    #etk-en .etk-en-t > tbody { display: block; }
    #etk-sn .etk-sn-t > tbody > tr,
    #etk-en .etk-en-t > tbody > tr { display: block; }

    #etk-sn .etk-sn-t > tbody > tr[data-rk],
    #etk-en .etk-en-t > tbody > tr {
        box-sizing: border-box; display: grid; gap: 6px 10px;
        margin: 0 0 8px; padding: 10px 12px;
        border: 1px solid var(--border); border-radius: var(--r-md);
        background: var(--card-bg); box-shadow: none;
    }
    /* `height: auto` ŞART: `.peron-table > tbody > tr > td` hücreye 44px taban (--tbl-row-h) verir;
       kartta her hücre ayrı satır olduğu için o taban satır sayısı kadar tekrarlanır (ölçüldü:
       tek satırlık "Son başarı" 44px, kart 221-224px). Aynı tuzak Mal Kabul kartında belgelidir. */
    #etk-sn .etk-sn-t > tbody > tr > td,
    #etk-en .etk-en-t > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0;
        text-align: left; font-size: var(--m-fs-sm); line-height: 1.35; background: transparent;
    }
    #etk-sn .etk-sn-t > tbody > tr > td[data-lbl]::before,
    #etk-en .etk-en-t > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); display: block; margin: 0 0 1px;
        font-size: var(--m-fs-micro); font-weight: 600; letter-spacing: .02em; color: var(--text-muted);
    }
    /* Alan kuralları genel kart hücresiyle AYNI önekle yazılır: daha zayıf seçici
       display/text-align'ı ezemezdi. */
    #etk-sn .etk-sn-t > tbody > tr > td.peron-sel-cell,
    #etk-sn .etk-sn-t > tbody > tr > td.etk-nil { display: none; }
    #etk-gb .etk-kanal__ad,
    #etk-sn .etk-kanal__ad,
    #etk-en .etk-kanal__ad { font-size: var(--m-fs); }
    #etk-gb .etk-tag, #etk-sn .etk-tag, #etk-en .etk-tag { font-size: var(--m-fs-micro); line-height: 16px; }
    #etk-gb .etk-say { margin: -4px 0; justify-content: flex-start; }

    /* Yoğunluk (ölçüldü 390px: Senkronizasyon kartı 288px → ekrana 2,6 kayıt).
       Etiket değerin ÖNÜNDE satır içi: her etiketli alan iki satır yerine bir satır kaplar.
       Alan düşmez, yalnız yer değiştirir; boş alan (etk-nil) hiç yer kaplamaz. */
    #etk-sn .etk-sn-t > tbody > tr[data-rk] { gap: 3px 8px; margin: 0 0 6px; padding: 8px 10px; }
    #etk-sn .etk-sn-t > tbody > tr > td[data-lbl]::before { display: inline; margin: 0 4px 0 0; }

    /* Senkronizasyon kartı: kanal+no · durum+tür+oluşma · hedef · yanıt (≤2 satır) · deneme/sonraki/süre.
       Kanal adı satırı rozetle paylaşmaz (ölçüldü 320px: rozet yanında ada ~9px kalıyordu). */
    #etk-sn .etk-sn-t > tbody > tr[data-rk] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas: "ka ka no" "du tu ol" "he he he" "ya ya ya" "de so su";
        align-items: center;
    }
    #etk-sn td.etk-a-no    { grid-area: no; font-weight: 600; }
    #etk-sn .etk-sn-t > tbody > tr > td.etk-a-no,
    #etk-sn .etk-sn-t > tbody > tr > td.etk-a-olus,
    #etk-sn .etk-sn-t > tbody > tr > td.etk-a-sure { text-align: right; }
    #etk-sn td.etk-a-durum { grid-area: du; }
    #etk-sn td.etk-a-kanal { grid-area: ka; }
    #etk-sn td.etk-a-tur   { grid-area: tu; color: var(--text-secondary); }
    #etk-sn td.etk-a-olus  { grid-area: ol; }
    #etk-sn td.etk-a-hedef { grid-area: he; }
    #etk-sn td.etk-a-yanit { grid-area: ya; }
    #etk-sn td.etk-a-den   { grid-area: de; }
    #etk-sn td.etk-a-son   { grid-area: so; }
    #etk-sn td.etk-a-sure  { grid-area: su; }
    #etk-sn .etk-sn-t > tbody > tr > td.etk-a-yanit {
        white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; overflow: hidden;
    }
    #etk-sn .etk-sn-t > tbody > tr > td.etk-a-yanit.etk-nil { display: none; }

    /* Entegrasyon kanalları kartı. */
    #etk-en .etk-en-t > tbody > tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "k k" "f w" "hs hs";
    }
    #etk-en td.etk-a-k  { grid-area: k; }
    #etk-en td.etk-a-f  { grid-area: f; }
    #etk-en td.etk-a-w  { grid-area: w; }
    #etk-en td.etk-a-hs { grid-area: hs; }

    /* Matris kart olmaz (iki boyutlu veri); kendi kabında kayar, ilk kolon yapışkan kalır. */
    .etk-mx { --etk-mx-yet: 112px; --etk-mx-col: 80px; }
    #etk-en .etk-mx > tbody > tr > td { padding: 4px 5px; }
    .etk-mx-s { font-size: 12px; }
    .etk-mx-not { font-size: var(--m-fs-micro); }
    .etk-gosterge { gap: 4px 12px; font-size: var(--m-fs-sm); }
    .etk-en-giris { font-size: var(--m-fs); }
}

/* ══ E-TİCARET — GENEL BAKIŞ PANOSU (FAZ 2 · C2) ═══════════════════════════════════
   Yalnız .etk- önekli sınıflar, yalnız var(--token) ve tokenlardan color-mix. Kapsam #etk-gb.
   Düzen KAP genişliğine bağlıdır (@container etkgb / etkpano), ekrana değil.
   FAZ 1'in .etk-gb-t kolon bütçesi ve ≤640 kart kuralları bu blokla birlikte SİLİNİR. */

#etk-gb { container-type: inline-size; container-name: etkgb; }

/* ── Şerit: sıradaki iş cümlesi + düğmesi + sipariş sayaçları. Hero-metrik DEĞİL: 11/13px satır içi çift.
   Her sayaç 28px yüksek kendi kutusunda durur; komşu hedefler arası 6px (dikey) / 16px (yatay). ── */
#etk-gb .etk-serit__ana { align-items: center; flex: 1 1 360px; }
#etk-gb .etk-serit__metin { flex: 1 1 auto; }
.etk-serit__git {
    box-sizing: border-box; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px;
    padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-bg);
    font: inherit; font-size: 11.5px; font-weight: 700; color: var(--pri-text); white-space: nowrap; cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.etk-serit__git:hover { border-color: var(--pri); background: var(--pri-light); }
.etk-serit__git:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.etk-serit__gruplar {
    box-sizing: border-box; flex: 1 1 100%; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
}
.etk-serit__grup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.etk-serit__get {
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap;
}
#etk-gb .etk-serit__say { align-items: center; gap: 6px 16px; }
#etk-gb .etk-serit__say > div { align-items: center; min-height: 28px; }
#etk-gb .etk-serit__say .etk-say { margin: 0 -6px; }
/* "Risk" grubu yalnız tek sütunlu düzende: orada risk panosu katlamanın altına iner, sayısı şeritte kalır. */
@container etkgb (min-width: 900px) {
    .etk-serit__gruplar { flex: 0 1 auto; }
    .etk-serit__grup.is-dar { display: none; }
}

/* ── Düzen: dar kapta tek sütun (grafik → risk → kanal → çok satan); ≥900px kapta 1,6fr + 1fr
   (sol: grafik + kanal sağlığı · sağ: risk + çok satanlar). 640–899px kapta risk panosu iki yana bölünür. ── */
.etk-gb-duzen { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.etk-gb-kol { display: contents; }
.etk-pano--grafik { order: 1; }
.etk-pano--risk   { order: 2; }
.etk-pano--kanal  { order: 3; }
.etk-pano--satan  { order: 4; }
@container etkgb (min-width: 900px) {
    .etk-gb-duzen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
    .etk-gb-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
}

/* ── Pano kabuğu ── */
.etk-pano {
    box-sizing: border-box; min-width: 0;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg);
    container-type: inline-size; container-name: etkpano;
}
.etk-pano__bas {
    box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 4px 16px; padding: 12px 12px 8px;
}
.etk-pano__ad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.etk-pano__h { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.etk-pano__alt { font-size: 11px; line-height: 1.4; color: var(--text-muted); }
/* Bölüm kendi tablosunun kabıdır: kart eşiği panoya değil BÖLÜMÜN genişliğine bakar. */
.etk-pano__bolum { box-sizing: border-box; min-width: 0; container-type: inline-size; container-name: etkpano; }
.etk-pano__bolum + .etk-pano__bolum { border-top: 1px solid var(--border); }
@container etkgb (min-width: 640px) and (max-width: 899px) {
    .etk-pano--risk:not(.is-tek) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .etk-pano--risk:not(.is-tek) > .etk-pano__bolum + .etk-pano__bolum { border-top: 0; border-left: 1px solid var(--border); }
}
.etk-nabiz { font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.etk-nabiz.is-uyari { color: var(--amber-ink); font-weight: 600; }
.etk-pano__not { margin: 0; padding: 8px 12px 12px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }
.etk-pano__not b { font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.etk-pano__bos { margin: 0; padding: 4px 12px 12px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.etk-pano__bos.is-uyari { color: var(--amber-ink); }
.etk-rozet-say { font-variant-numeric: tabular-nums; }

/* Bağlantı düğmeleri: görsel olarak satırı büyütmez (negatif pay), hedef 28px (yoğun yüzey eşiği). */
.etk-git, .etk-bag {
    box-sizing: border-box; border: 0; border-radius: var(--r-sm); background: transparent;
    font: inherit; cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.etk-git {
    display: inline-flex; align-items: center; min-height: 28px; margin: -6px -4px -2px; padding: 0 4px;
    font-size: 11px; font-weight: 600; color: var(--pri-text); white-space: nowrap;
}
/* Ad bağlantısı KIRPILMAZ: sığmayan ad ikinci satıra sarar (satır yalnız gerektiğinde uzar). */
.etk-bag {
    display: block; max-width: calc(100% + 8px); min-height: 28px; margin: 0 -4px; padding: 2px 4px;
    white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.35;
    font-weight: 600; color: var(--text-primary);
}
.etk-bag--kanal { display: flex; align-items: center; padding: 0 4px; }
.etk-git:hover, .etk-bag:hover { background: var(--pri-light); color: var(--pri-text); }
.etk-git:focus-visible, .etk-bag:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.etk-duz { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; font-weight: 600; color: var(--text-primary); }
.etk-kod { font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 6px; white-space: nowrap; }
.etk-ek { flex: 0 0 auto; margin-left: 2px; font-size: 9.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
/* Veri işareti kenarı: açık temada k3/k4/k5 zeminle 3:1'in altında kalır; kenar aynı tokenın koyultulmuş hâlidir. */
.etk-nokta {
    box-sizing: border-box; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px;
    background: var(--pg-c, var(--text-muted));
    border: 1px solid color-mix(in srgb, var(--pg-c, var(--text-muted)) 55%, var(--text-primary));
}
/* Pano içinde kanal adı kırpılmaz, sarar. */
#etk-gb .etk-pano .etk-kanal { flex-wrap: wrap; row-gap: 2px; }
#etk-gb .etk-pano .etk-kanal__ad { white-space: normal; overflow: visible; overflow-wrap: anywhere; }

/* Yön: renk + işaret + metin (yalnız renk DEĞİL). */
.etk-yon { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-yon.is-art  { color: var(--green-ink); }
.etk-yon.is-azal { color: var(--rose-ink); }
.etk-yon.is-duz  { color: var(--text-muted); }

/* ── Grafik panosu: başlık özeti (TEK baskın rakam) ── */
.etk-gr-ozet {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 8px;
    min-width: 0; font-variant-numeric: tabular-nums;
}
.etk-gr-ozet__ana { font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--text-primary); }
.etk-gr-ozet__bir { font-size: 11px; color: var(--text-muted); }
.etk-gr-ozet__tutar { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.etk-gr-ozet .etk-yon { font-size: 11px; }
.etk-gr-ozet__not { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

/* ── Grafik: gün × kanal yığılmış sütun, iki bölge (adet üstte, tutar altta), ORTAK gün ekseni.
   Çift y-ekseni YOK. Metin SVG'de değil HTML'de (A.grafik kuralı). Sıfır = sıfır yükseklik. ── */
.etk-gr {
    --etk-gr-oluk: 36px; --etk-gr-h1: 136px; --etk-gr-h2: 72px; --etk-gr-etk: 16px; --etk-gr-ara: 8px;
    box-sizing: border-box; padding: 0 12px 8px;
}
.etk-gr-cizim { position: relative; }
.etk-gr-arka { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.etk-gr-bolge { position: relative; }
.etk-gr-bolge--adet  { --h: var(--etk-gr-h1); height: calc(var(--etk-gr-etk) + var(--etk-gr-h1)); }
.etk-gr-bolge--tutar { --h: var(--etk-gr-h2); height: calc(var(--etk-gr-etk) + var(--etk-gr-h2)); margin-top: var(--etk-gr-ara); }
.etk-gr-bolge__ad {
    position: absolute; top: 0; left: var(--etk-gr-oluk);
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 12px;
    color: var(--text-muted); white-space: nowrap;
}
.etk-gr-plan { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); }
.etk-gr-cizgi { position: absolute; left: var(--etk-gr-oluk); right: 0; height: 0; border-top: 1px solid var(--border-light); }
.etk-gr-cizgi.is-taban { border-top-color: var(--border); }
.etk-gr-cizgi > span {
    position: absolute; right: 100%; top: 0; margin-right: 6px; transform: translateY(-50%);
    font-size: 9.5px; font-weight: 500; font-style: normal; line-height: 1; color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.etk-gr-gunler { position: relative; display: flex; margin-left: var(--etk-gr-oluk); }
.etk-gr-gun {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    padding-bottom: 4px; border-radius: var(--r-sm); outline: 0; cursor: default;
    transition: background-color .12s ease;
}
.etk-gr-gun.is-hs { background: color-mix(in srgb, var(--text-muted) 7%, transparent); }
.etk-gr-gun:hover, .etk-gr-gun:focus { background: var(--pri-light); }
.etk-gr-gun:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.etk-gr-hucre { width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.etk-gr-hucre--adet  { --h: var(--etk-gr-h1); height: calc(var(--etk-gr-etk) + var(--etk-gr-h1)); }
.etk-gr-hucre--tutar { --h: var(--etk-gr-h2); height: calc(var(--etk-gr-etk) + var(--etk-gr-h2)); margin-top: var(--etk-gr-ara); }
.etk-gr-yigin {
    width: min(64%, 28px); height: calc(var(--h) * var(--o, 0));
    display: flex; flex-direction: column-reverse; gap: 2px;
    border-radius: 2px 2px 0 0; overflow: hidden;
}
.etk-gr-yigin > i {
    box-sizing: border-box; flex: 0 1 0; min-height: 0; background: var(--pg-c); transition: opacity .12s ease;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-c) 55%, var(--text-primary));
}
.etk-gr.has-odak .etk-gr-yigin > i:not(.is-odak) { opacity: .22; }
.etk-gr-gunet {
    margin-top: 4px; display: flex; flex-direction: column; align-items: center;
    line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.etk-gr-gunet b { font-size: 10px; font-weight: 600; color: var(--text-secondary); }
.etk-gr-gunet em { font-size: 9px; font-style: normal; color: var(--text-muted); }
.etk-gr-gun.is-bugun .etk-gr-gunet b { font-weight: 800; color: var(--pri-text); }

/* Gün dökümü: sütunun üstünü örtmez — sol yarıdaki gün için sağda, sağ yarıdaki için solda açılır. */
.etk-gr-ipucu {
    position: absolute; z-index: 4; top: var(--etk-gr-etk); right: 0;
    box-sizing: border-box; width: 240px; max-width: 100%; padding: 8px;
    display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 2px 8px;
    border-radius: var(--r-md); background: var(--text-primary); color: var(--card-bg);
    box-shadow: var(--shadow-card); font-size: 11px; line-height: 1.4; text-align: left;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
}
.etk-gr-gun.is-sag .etk-gr-ipucu { right: auto; left: 0; }
.etk-gr-gun:hover .etk-gr-ipucu, .etk-gr-gun:focus .etk-gr-ipucu { opacity: 1; visibility: visible; }
.etk-gr-ipucu > strong { grid-column: 1 / -1; font-size: 11px; font-weight: 700; }
.etk-gr-ipucu > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etk-gr-ipucu > b { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.etk-gr-ipucu > .is-top { margin-top: 2px; padding-top: 2px; border-top: 1px solid color-mix(in srgb, var(--card-bg) 30%, transparent); }
.etk-gr-ipucu > small { grid-column: 1 / -1; font-size: 10px; opacity: .8; }

.etk-gr-iskelet { box-sizing: border-box; padding: 16px 12px; display: grid; gap: 16px; min-height: 276px; align-content: center; }
.etk-gr-iskelet.etk-gr-iskelet--kisa { min-height: 96px; }
#etk-gb .etk-gr .pg-bos { min-height: 132px; border-radius: var(--r-md); }

@container etkpano (max-width: 559px) {
    .etk-gr { --etk-gr-oluk: 30px; --etk-gr-h1: 112px; --etk-gr-h2: 56px; }
    .etk-gr-gunet em { display: none; }
    .etk-gr-ipucu, .etk-gr-gun.is-sag .etk-gr-ipucu {
        top: calc(100% + 4px); left: calc(-1 * var(--etk-gr-oluk)); right: 0; width: auto;
    }
    .etk-gr-ozet { justify-content: flex-start; }
    .etk-gr-iskelet { min-height: 228px; }
}
@container etkpano (max-width: 359px) {
    .etk-gr-gun:nth-child(even) .etk-gr-gunet b { visibility: hidden; }
    .etk-gr-gun.is-bugun .etk-gr-gunet b { visibility: visible; }
}
.etk-gr.is-tutarsiz { --etk-gr-h1: 200px; }
@container etkpano (max-width: 559px) { .etk-gr.is-tutarsiz { --etk-gr-h1: 152px; } }

/* ── Genel Bakış — "Pazaryeri nabzı" (1.426.0, peron-mod-eticaret-pano.js) ──────────────────────────────────────
   Asimetrik: solda TEK baskın rakam (bu ayın cirosu) + 30 günlük eğri, sağda üç dar satır (bugün · hafta · 30 gün).
   Altında farklı biçimde dört blok — yığın çubuk (durumlar), görselli sıralı liste (en çok satanlar), çubuk listeler
   (kanal · şehir), halka (ilan sağlığı): özdeş kart ızgarası DEĞİL. Veri işareti renkleri grafik paletinden (--pg-k*,
   --pg-st-*), metin daima --text-* (renk tek başına kimlik taşımaz: her dilimin adı + sayısı efsanede). Punto merdiveni:
   hero 22 · başlık 13 · gövde 12 · etiket 11 · yardımcı 10,5. */
#etk-gb .etk-gbp { container: etkgbp / inline-size; display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0 0 12px; }
.etk-gbp-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.etk-gbp-baslik { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.etk-gbp-baslik > svg { width: 16px; height: 16px; color: var(--pg-k1); }
.etk-gbp-alt { font-size: 10.5px; color: var(--text-muted); }
.etk-gbp-bos { margin: 0; padding: 10px 0; font-size: 11px; color: var(--text-muted); }
.etk-gbp-bos.is-genis { padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--card-bg); }

.etk-gbp-nabiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.etk-gbp-ana, .etk-gbp-kart, .etk-gbp-yan {
    box-sizing: border-box; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-bg);
}
.etk-gbp-ana { position: relative; padding: 14px 16px 8px; background: color-mix(in srgb, var(--pg-k1) 4%, var(--card-bg)); }
.etk-gbp-ana__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.etk-gbp-etiket { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.etk-gbp-ana__s { margin: 4px 0 2px; font-size: 22px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.etk-gbp-ana__alt { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.etk-gbp-deg {
    display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.etk-gbp-deg.is-art { background: var(--st-done-bg); color: var(--st-done-fg); }
.etk-gbp-deg.is-azal { background: var(--st-canc-bg); color: var(--st-canc-fg); }
.etk-gbp-deg.is-yok { padding: 0; font-weight: 500; color: var(--text-muted); }

.etk-gbp-egri { position: relative; margin: 8px -4px 0; padding-bottom: 18px; touch-action: pan-y; cursor: crosshair; }
.etk-gbp-egri > svg { display: block; width: 100%; height: 132px; overflow: visible; }
.etk-gbp-egri__taban { stroke: var(--border); stroke-width: 1; }
.etk-gbp-egri__cizgi { fill: none; stroke: var(--pg-k1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.3, .7, .2, 1); }
.etk-gbp-egri__alan { transition: opacity .9s ease .25s; }
.etk-gbp-egri__imlec { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.etk-gbp-egri__nokta {
    position: absolute; z-index: 1; box-sizing: border-box; width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border: 2px solid var(--card-bg); border-radius: 50%; background: var(--pg-k1); box-shadow: 0 0 0 1px var(--pg-k1); pointer-events: none;
}
.etk-gbp-ipucu {
    position: absolute; top: -6px; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 6px 9px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); box-shadow: var(--shadow-toast);
    font-size: 11px; line-height: 1.35; color: var(--text-secondary); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums;
}
.etk-gbp-ipucu b { font-weight: 700; color: var(--text-primary); }
/* `display` kuralı `hidden` niteliğini ezer: gizli ipucu / imleç / nokta açıkça kapatılır. */
.etk-gbp-ipucu[hidden], .etk-gbp-egri__nokta[hidden], .etk-gbp-egri__imlec[hidden] { display: none; }
.etk-gbp-egri__eksen { position: absolute; right: 4px; bottom: 0; left: 4px; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); }

.etk-gbp-yan { display: flex; flex-direction: column; padding: 4px 14px; }
.etk-gbp-yan__k { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 0; }
.etk-gbp-yan__k + .etk-gbp-yan__k { border-top: 1px solid var(--border-light); }
.etk-gbp-yan__b { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.etk-gbp-yan__s { font-size: 13px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-gbp-yan__a { grid-column: 1 / -1; font-size: 10.5px; color: var(--text-muted); }

.etk-gbp-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.etk-gbp-yigit { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.etk-gbp-kart { padding: 12px 14px; }
.etk-gbp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.etk-gbp-h > span { font-size: 10.5px; font-weight: 500; color: var(--text-muted); }

.etk-gbp-yigin { display: flex; gap: 2px; height: 14px; overflow: hidden; border-radius: var(--r-full); background: var(--border-light); }
.etk-gbp-dilim { flex: 0 0 0; min-width: 0; transform-origin: left center; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.etk-gbp-efsane { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--text-secondary); }
.etk-gbp-efsane > li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.etk-gbp-efsane i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; }
.etk-gbp-efsane b { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.etk-gbp-efsane span { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.etk-gbp-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.etk-gbp-satir, .etk-gbp-urun { display: grid; align-items: center; gap: 4px 10px; min-height: 32px; }
.etk-gbp-satir { grid-template-columns: minmax(0, 7fr) minmax(48px, 5fr) auto; }
.etk-gbp-satir__ad { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.etk-gbp-satir__ad > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.etk-gbp-nokta { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; }
.etk-gbp-satir__s { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-gbp-satir__s b { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.etk-gbp-satir__s em { font-style: normal; font-size: 10.5px; color: var(--text-muted); }
.etk-gbp-cubuk { display: block; min-width: 0; height: 8px; overflow: hidden; border-radius: var(--r-full); background: var(--border-light); }
.etk-gbp-cubuk > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--pg-k1); transform: scaleX(var(--o, 0)); transform-origin: left center; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }

.etk-gbp-urun { grid-template-columns: 18px 40px minmax(0, 1fr) auto; padding: 4px 0; }
.etk-gbp-urun + .etk-gbp-urun { border-top: 1px solid var(--border-light); }
.etk-gbp-urun__sira { font-size: 11px; font-weight: 700; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.etk-gbp-urun__g { box-sizing: border-box; display: block; width: 40px; height: 40px; border: 1px solid var(--border-light); border-radius: var(--r-md); background: var(--bg-inset); object-fit: cover; }
.etk-gbp-urun__g.is-bos { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.etk-gbp-urun__g.is-bos > svg { width: 16px; height: 16px; }
.etk-gbp-urun__ad { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.etk-gbp-urun__ad > span:first-child { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text-primary); }

.etk-gbp-ilan__ust { display: flex; align-items: center; gap: 14px; }
.etk-gbp-halka { flex: 0 0 auto; width: 76px; height: 76px; transform: rotate(-90deg); }
.etk-gbp-halka__z { fill: none; stroke: var(--border-light); stroke-width: 8; }
.etk-gbp-halka__d { fill: none; stroke: var(--pg-k3); stroke-width: 8; stroke-linecap: round; stroke-dashoffset: var(--ofs); transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .2, 1); }
.etk-gbp-halka text { transform: rotate(90deg); transform-origin: 32px 32px; font-size: 12px; font-weight: 800; fill: var(--text-primary); }
.etk-gbp-ilan__say { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; flex: 1 1 auto; min-width: 0; margin: 0; }
.etk-gbp-ilan__say > div { min-width: 0; }
.etk-gbp-ilan__say dt { font-size: 10.5px; color: var(--text-muted); }
.etk-gbp-ilan__say dd { margin: 0; font-size: 13px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.etk-gbp-ilan__say > .is-uyari dd { color: var(--amber-ink); }
.etk-gbp-not { margin: 10px 0 8px; font-size: 11px; line-height: 1.45; color: var(--text-secondary); }

/* İlk çizim: çubuklar sıfırdan büyür, eğri çizilir, halka dolar (yalnız ilk açılışta; sessiz yenileme yerinde yazar). */
.etk-gbp.is-giris .etk-gbp-cubuk > i { transform: scaleX(0); }
.etk-gbp.is-giris .etk-gbp-dilim { transform: scaleX(0); }
.etk-gbp.is-giris .etk-gbp-egri__cizgi { stroke-dashoffset: 1; }
.etk-gbp.is-giris .etk-gbp-egri__alan { opacity: 0; }
.etk-gbp.is-giris .etk-gbp-halka__d { stroke-dashoffset: 163.36; }
@media (prefers-reduced-motion: reduce) {
    .etk-gbp-cubuk > i, .etk-gbp-dilim, .etk-gbp-egri__cizgi, .etk-gbp-egri__alan, .etk-gbp-halka__d { transition: none; }
}

@container etkgbp (min-width: 700px) {
    .etk-gbp-nabiz { grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); }
    .etk-gbp-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .etk-gbp-izgara > .etk-gbp-durum { grid-column: 1 / -1; }
}
@container etkgbp (min-width: 1100px) {
    .etk-gbp-izgara { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .9fr); }
    .etk-gbp-izgara > .etk-gbp-durum { grid-column: 1 / -1; }
}

/* ── Pano tabloları: sessiz başlık (dashboard'daki .pgt emsali), ortak kart düzeni mekanizması ── */
#etk-gb .etk-ic-kap { border-top: 1px solid var(--border-light); }
#etk-gb .peron-table.etk-pt { --tbl-row-h: 34px; --tbl-cell-py: 3px; font-size: var(--tbl-fs); font-variant-numeric: tabular-nums; }
#etk-gb .etk-pt .etk-say { margin: 0 -6px; }
#etk-gb .peron-table.etk-pt > thead { position: static; background: var(--border-light); box-shadow: none; }
#etk-gb .peron-table.etk-pt > thead > tr > th {
    padding: 4px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted);
}
#etk-gb .etk-pt > tbody > tr > td { padding-left: 8px; padding-right: 8px; vertical-align: middle; }
#etk-gb .etk-pt .is-acil  { color: var(--rose-ink); }
#etk-gb .etk-pt .is-yakin { color: var(--amber-ink); }

/* Kanal kırılımı (grafiğin efsanesi = tablo görünümü). Sabit 388 + Kanal 164. */
.etk-kk-t col.etk-c-adet  { width: 60px; }
.etk-kk-t col.etk-c-tutar { width: 92px; }
.etk-kk-t col.etk-c-g7    { width: 92px; }
.etk-kk-t col.etk-c-deg   { width: 72px; }
.etk-kk-t col.etk-c-eg    { width: 72px; }
.peron-table--fixed.etk-kk-t { min-width: 552px; }
.peron-table--fixed.etk-kk-t.is-tutarsiz { min-width: 460px; }
#etk-gb .etk-kk-t .pg-kivilcim { height: 18px; }
#etk-gb .etk-kk-t > tbody > tr.etk-kk-top > td { font-weight: 700; border-top: 1px solid var(--border); }
#etk-gb .etk-kk-t > tbody > tr[data-id] { cursor: default; }

/* En çok satanlar — "sıra defteri": Ürün hücresinin alt çizgisi satış payıdır (sıfır = sıfır genişlik,
   min-width YOK). Sabit 164 + Ürün 196 = 360. */
.etk-cs-t col.etk-c-sira { width: 24px; }
.etk-cs-t col.etk-c-adet { width: 44px; }
.etk-cs-t col.etk-c-mik  { width: 56px; }
.etk-cs-t col.etk-c-sip  { width: 40px; }
.peron-table--fixed.etk-cs-t { min-width: 360px; }
#etk-gb .etk-cs-t td.etk-a-s { padding-left: 4px; padding-right: 0; color: var(--text-muted); text-align: right; }
#etk-gb .etk-cs-t td.etk-a-a { font-weight: 700; }
#etk-gb .etk-cs-t td.etk-a-u { position: relative; }
#etk-gb .etk-cs-t td.etk-a-u::after {
    content: ""; position: absolute; left: 8px; bottom: 0; height: 2px; border-radius: var(--r-full);
    width: calc((100% - 16px) * var(--etk-pay, 0)); background: var(--pri);
}

/* Dar kapta (tek sütun) liste ilk 5 satırla açılır; kalan 5 satır aynı panoda tek dokunuşla gelir.
   Gizlenen SATIRDIR (kolon değil): hücre kayması olmaz. Seçim modül durumunda (gb.satanAcik) yaşar. */
.etk-pano__ayak { display: none; box-sizing: border-box; padding: 8px 12px; border-top: 1px solid var(--border-light); }
.etk-pano__ayak .etk-git { margin: 0 -4px; }
@container etkgb (max-width: 639px) {
    #etk-gb .etk-pano--satan:not(.is-acik) .etk-cs-t > tbody > tr:nth-child(n+6) { display: none; }
    .etk-pano__ayak { display: block; }
}
/* Dip işareti: tutarı TRY dışı sipariş yüzünden eksik görünen kanal; açıklaması tablonun altındaki notta. */
.etk-dip { margin-left: 2px; font-weight: 700; color: var(--amber-ink); }

/* Risk listeleri: kalan ölçeği (çizgi ne kadar kısaysa o kadar acil). */
.etk-kalan { --pg-c: var(--text-muted); display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; vertical-align: middle; }
.etk-kalan > b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-kalan__ray { display: block; width: 56px; height: 3px; border-radius: var(--r-full); background: var(--border); overflow: hidden; }
.etk-kalan__ray > i { display: block; height: 100%; background: var(--pg-c); }
.etk-kalan.is-acil  { --pg-c: var(--rose); }
.etk-kalan.is-yakin { --pg-c: var(--amber); }

/* Bekleyen iade. Sabit 480 + Ürün 150. */
.etk-ia-t col.etk-c-kalan { width: 100px; }
.etk-ia-t col.etk-c-no    { width: 132px; }
.etk-ia-t col.etk-c-kanal { width: 176px; }
.etk-ia-t col.etk-c-tarih { width: 72px; }
.peron-table--fixed.etk-ia-t { min-width: 630px; }
/* Düşük stok. Sabit 416 + Ürün 190. */
.etk-ds-t col.etk-c-kanal { width: 176px; }
.etk-ds-t col.etk-c-sat   { width: 100px; }
.etk-ds-t col.etk-c-emn   { width: 76px; }
.etk-ds-t col.etk-c-acik  { width: 64px; }
.peron-table--fixed.etk-ds-t { min-width: 606px; }
#etk-gb .etk-pt td.etk-zaman, #etk-gb .etk-pt td.etk-ikincil { color: var(--text-secondary); }

/* ── KART DÜZENİ: aynı <tr> ızgaraya dizilir (ikinci render yolu yok). Eşik = o tablonun kolon toplamı,
   KAP (etkpano) genişliğiyle ölçülür. Kanal sağlığı HER genişlikte kompakt satırdır. ── */
#etk-gb .etk-ks-t { display: block; width: auto; min-width: 0; }
#etk-gb .etk-ks-t > colgroup, #etk-gb .etk-ks-t > thead { display: none; }
#etk-gb .etk-ks-t > tbody { display: block; }
/* Hedefler 28px ve negatif pay YOK: iki satırlı düzende üst üste gelen hedefler arası 6px (satır aralığı). */
#etk-gb .etk-ks-t > tbody > tr {
    box-sizing: border-box; display: grid; align-items: center; gap: 6px 8px; padding: 4px 12px;
    border-bottom: 1px solid var(--border-light);
}
#etk-gb .etk-ks-t > tbody > tr:last-child { border-bottom: 0; }
#etk-gb .etk-ks-t > tbody > tr > td {
    display: block; min-width: 0; height: auto; padding: 0; border: 0;
    font-size: 11px; line-height: 1.45; text-align: left; background: transparent;
}
#etk-gb .etk-ks-t > tbody > tr > td[data-lbl]::before {
    content: attr(data-lbl); margin-right: 4px; font-size: 9.5px; font-weight: 600; color: var(--text-muted);
}
#etk-gb .etk-ks-t > tbody > tr > td.etk-nil { display: none; }
#etk-gb .etk-ks-t > tbody > tr > td.etk-a-k { font-size: 12px; }
#etk-gb .etk-ks-t > tbody > tr:not(.etk-bos-satir) {
    grid-template-columns: auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "k k k k k" "b n1 n2 n3 e";
}
#etk-gb .etk-ks-t > tbody > tr.has-hata:not(.etk-bos-satir) { grid-template-areas: "k k k k k" "b n1 n2 n3 e" "h h h h h"; }
#etk-gb .etk-ks-t > tbody > tr > td:is(.etk-a-b, .etk-a-n1, .etk-a-n2, .etk-a-n3) { display: flex; align-items: center; min-height: 16px; }
#etk-gb .etk-ks-t .etk-bag--kanal { margin: 0 -4px; }
#etk-gb .etk-ks-t td.etk-a-k  { grid-area: k; }
.etk-ks-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; min-width: 0; }
.etk-ks-ust > :first-child { flex: 0 1 auto; min-width: 0; }
.etk-ks-ust > .peron-badge { flex: 0 0 auto; }
#etk-gb .etk-ks-t > tbody > tr.etk-ks-top { border-top: 1px solid var(--border); }
#etk-gb .etk-ks-t > tbody > tr.etk-ks-top > td.etk-a-k { font-weight: 700; color: var(--text-secondary); }
#etk-gb .etk-ks-t > tbody > tr > td:is(.etk-a-b, .etk-a-n1, .etk-a-n2, .etk-a-n3) { white-space: nowrap; }
#etk-gb .etk-ks-t td.etk-a-b  { grid-area: b; }
#etk-gb .etk-ks-t td.etk-a-n1 { grid-area: n1; }
#etk-gb .etk-ks-t td.etk-a-n2 { grid-area: n2; }
#etk-gb .etk-ks-t td.etk-a-n3 { grid-area: n3; }
#etk-gb .etk-ks-t td.etk-a-e  { grid-area: e; align-self: center; justify-self: end; }
/* Hata künyesi: KIRPILMAZ (satır kırpma yok); bağlantı hatası ile son başarısız iş ayrı satırda. */
#etk-gb .etk-ks-t > tbody > tr > td.etk-a-h {
    grid-area: h; color: var(--rose-ink); white-space: normal; overflow-wrap: anywhere;
}
.etk-pano[hidden], .etk-serit__grup[hidden] { display: none; }
#etk-gb .etk-ks-t > tbody > tr > td.etk-a-h.etk-nil { display: none; }
#etk-gb .etk-ks-t > tbody > tr > td.etk-a-h { margin-top: -4px; padding-bottom: 4px; }
#etk-gb .etk-ks-t .etk-say { margin: 0; justify-content: flex-start; padding: 0 4px; }
#etk-gb .etk-senk-ikon {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text-secondary); cursor: pointer;
}
#etk-gb .etk-senk-ikon:hover { background: var(--pri-light); color: var(--pri-text); }
#etk-gb .etk-senk-ikon:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
#etk-gb .etk-senk-ikon svg { width: 14px; height: 14px; }
@container etkpano (min-width: 640px) {
    #etk-gb .etk-ks-t > tbody > tr:not(.etk-bos-satir) {
        grid-template-columns: minmax(0, 1fr) 80px 60px 84px 64px 28px;
        grid-template-areas: "k b n1 n2 n3 e";
    }
    #etk-gb .etk-ks-t > tbody > tr.has-hata:not(.etk-bos-satir) { grid-template-areas: "k b n1 n2 n3 e" "h h h h h h"; }
}

@container etkpano (max-width: 559px) {
    #etk-gb .etk-kk-t { display: block; width: auto; min-width: 0; }
    #etk-gb .etk-kk-t > colgroup, #etk-gb .etk-kk-t > thead { display: none; }
    #etk-gb .etk-kk-t > tbody { display: block; }
    #etk-gb .etk-kk-t > tbody > tr {
        box-sizing: border-box; display: grid; align-items: baseline; gap: 2px 8px; padding: 8px 12px;
        border-bottom: 1px solid var(--border-light);
    }
    #etk-gb .etk-kk-t > tbody > tr:last-child { border-bottom: 0; }
    #etk-gb .etk-kk-t > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0;
        font-size: 11px; line-height: 1.45; text-align: left; background: transparent;
    }
    #etk-gb .etk-kk-t > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); margin-right: 4px; font-size: 9.5px; font-weight: 600; color: var(--text-muted);
    }
    #etk-gb .etk-kk-t > tbody > tr > td.etk-a-k { font-size: 12px; }

    #etk-gb .etk-kk-t > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
    #etk-gb .etk-kk-t > tbody > tr::before { content: ""; order: 4; flex: 0 0 100%; height: 0; }
    #etk-gb .etk-kk-t > tbody > tr > td { flex: 0 0 auto; white-space: nowrap; }
    #etk-gb .etk-kk-t > tbody > tr > td.etk-a-k    { order: 1; flex: 1 1 0; min-width: 50%; white-space: normal; }
    #etk-gb .etk-kk-t > tbody > tr > td.etk-a-deg  { order: 2; }
    #etk-gb .etk-kk-t > tbody > tr > td.etk-a-eg   { order: 3; flex: 0 0 56px; }
    #etk-gb .etk-kk-t > tbody > tr > td.etk-a-adet { order: 5; }
    #etk-gb .etk-kk-t > tbody > tr > td.etk-a-tutar { order: 6; }
    #etk-gb .etk-kk-t > tbody > tr > td.etk-a-g7   { order: 7; }
    #etk-gb .etk-kk-t > tbody > tr.etk-kk-top > td { border-top: 0; }
    #etk-gb .etk-kk-t td.etk-a-adet .etk-say { margin: -4px 0 -6px; padding: 0 4px; }
}

/* En çok satanlar: 360px'in altındaki panoda (yalnız 320px telefon) iki satır. */
@container etkpano (max-width: 359px) {
    #etk-gb .etk-cs-t { display: block; width: auto; min-width: 0; }
    #etk-gb .etk-cs-t > colgroup, #etk-gb .etk-cs-t > thead { display: none; }
    #etk-gb .etk-cs-t > tbody { display: block; }
    #etk-gb .etk-cs-t > tbody > tr {
        box-sizing: border-box; display: grid; align-items: baseline; gap: 2px 12px; padding: 8px;
        border-bottom: 1px solid var(--border-light);
        grid-template-columns: 16px auto auto minmax(0, 1fr);
        grid-template-areas: "s u u u" "s a m n";
    }
    #etk-gb .etk-cs-t > tbody > tr:last-child { border-bottom: 0; }
    #etk-gb .etk-cs-t > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0;
        font-size: 11px; line-height: 1.45; text-align: left; background: transparent;
    }
    #etk-gb .etk-cs-t > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); margin-right: 4px; font-size: 9.5px; font-weight: 600; color: var(--text-muted);
    }
    #etk-gb .etk-cs-t > tbody > tr > td.etk-a-s { grid-area: s; padding: 0; text-align: left; white-space: nowrap; }
    #etk-gb .etk-cs-t > tbody > tr > td.etk-a-u { grid-area: u; font-size: 12px; }
    #etk-gb .etk-cs-t > tbody > tr > td.etk-a-u::after { left: 0; bottom: -2px; width: calc(100% * var(--etk-pay, 0)); }
    #etk-gb .etk-cs-t .etk-bag { margin: -4px -4px -2px; }
    #etk-gb .etk-cs-t td.etk-a-a { grid-area: a; }
    #etk-gb .etk-cs-t td.etk-a-m { grid-area: m; }
    #etk-gb .etk-cs-t td.etk-a-n { grid-area: n; }
}

@container etkpano (max-width: 639px) {
    #etk-gb :is(.etk-ia-t, .etk-ds-t) { display: block; width: auto; min-width: 0; }
    #etk-gb :is(.etk-ia-t, .etk-ds-t) > colgroup, #etk-gb :is(.etk-ia-t, .etk-ds-t) > thead { display: none; }
    #etk-gb :is(.etk-ia-t, .etk-ds-t) > tbody { display: block; }
    #etk-gb :is(.etk-ia-t, .etk-ds-t) > tbody > tr {
        box-sizing: border-box; display: grid; align-items: baseline; gap: 2px 8px; padding: 8px 12px;
        border-bottom: 1px solid var(--border-light);
    }
    #etk-gb :is(.etk-ia-t, .etk-ds-t) > tbody > tr:last-child { border-bottom: 0; }
    #etk-gb :is(.etk-ia-t, .etk-ds-t) > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0;
        font-size: 11px; line-height: 1.45; text-align: left; background: transparent;
    }
    #etk-gb :is(.etk-ia-t, .etk-ds-t) > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); margin-right: 4px; font-size: 9.5px; font-weight: 600; color: var(--text-muted);
    }
    #etk-gb .etk-ia-t > tbody > tr > td.etk-a-no,
    #etk-gb .etk-ds-t > tbody > tr > td.etk-a-u { font-size: 12px; }
    #etk-gb :is(.etk-ia-t, .etk-ds-t) .etk-bag { margin: -4px -4px -2px; }

    #etk-gb .etk-ia-t > tbody > tr {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "no kanal kalan" "urun urun tarih";
    }
    #etk-gb .etk-ia-t td.etk-a-no    { grid-area: no; }
    #etk-gb .etk-ia-t > tbody > tr > td.etk-a-tarih { grid-area: tarih; text-align: right; }
    #etk-gb .etk-ia-t > tbody > tr > td.etk-a-kalan { grid-area: kalan; text-align: right; }
    #etk-gb .etk-ia-t td.etk-a-urun  { grid-area: urun; }
    #etk-gb .etk-ia-t td.etk-a-kanal { grid-area: kanal; }

    #etk-gb .etk-ds-t > tbody > tr {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "u u s" "k e a";
    }
    #etk-gb .etk-ds-t td.etk-a-u { grid-area: u; }
    #etk-gb .etk-ds-t > tbody > tr > td.etk-a-sat { grid-area: s; text-align: right; }
    #etk-gb .etk-ds-t td.etk-a-kanal { grid-area: k; }
    #etk-gb .etk-ds-t td.etk-a-emn { grid-area: e; }
    #etk-gb .etk-ds-t td.etk-a-acik { grid-area: a; }
}

/* İskelet satırı kart düzeninde de tek satır yer tutar. */
#etk-gb .etk-pt > tbody > tr.peron-skel-row > td { height: auto; padding-top: 8px; padding-bottom: 8px; }

/* ── Telefon (≤640px): oran korunarak bir kademe küçülür; --m-fs-* tokenları. ── */
@media (max-width: 640px) {
    .etk-gb-duzen { gap: 8px; }
    #etk-gb .etk-serit__ana { flex-wrap: wrap; flex-basis: 100%; }
    #etk-gb .etk-serit__metin { flex: 1 1 0; }
    .etk-serit__git { margin-left: 28px; }
    .etk-serit__gruplar { gap: 6px 16px; }
    .etk-serit__grup { flex: 1 1 100%; }
    .etk-serit__get { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    #etk-gb .etk-serit__say { width: auto; flex: 1 1 0; justify-content: flex-start; gap: 6px 16px; }
    .etk-pano__bas { padding: 8px 8px 4px; }
    .etk-pano__h { font-size: 12px; }
    .etk-pano__alt, .etk-pano__not { font-size: var(--m-fs-sm); }
    .etk-pano__not { padding: 8px; }
    .etk-pano__bos { padding: 4px 8px 8px; font-size: var(--m-fs); }
    .etk-gr { padding: 0 8px 8px; }
    .etk-gr-ozet__tutar { font-size: 12px; }
    .etk-gr-ipucu { font-size: var(--m-fs-sm); }
    #etk-gb .etk-pt > tbody > tr { padding: 8px; }
    #etk-gb .etk-pt > tbody > tr > td { font-size: var(--m-fs-sm); }
    #etk-gb .etk-pt > tbody > tr > td:is(.etk-a-k, .etk-a-u, .etk-a-no) { font-size: var(--m-fs); }
    #etk-gb .etk-pt > tbody > tr > td[data-lbl]::before { font-size: var(--m-fs-micro); }
    #etk-gb .etk-tag { font-size: var(--m-fs-micro); line-height: 16px; }
    #etk-gb .etk-senk-ikon { display: none; }
}

/* ── Genel Bakış: sağ sütunun iki panosu da yoksa (iade · düşük stok · çok satan listelerinin izni yok)
   kanal sağlığı sağ sütuna geçer; sütunlar çözülür, grafik ile kanal sağlığı aynı ızgaranın iki hücresi olur.
   Dar kapta düzen zaten tek sütundur: gizli pano yer tutmaz. ── */
@container etkgb (min-width: 900px) {
    .etk-gb-duzen.is-sagsiz > .etk-gb-kol { display: contents; }
}

/* ══ E-TİCARET — LİSTE EKRANLARI · ORTAK İSKELET (FAZ 2 · C2b) ═══════════════════════
   Siparişler · Ürünler & Eşleştirme · Fiyat Yönetimi (#etk-sp · #etk-es · #etk-fy) aynı iskeleti
   kullanır: çipler + süzgeç çubuğu + kendi kabında tablo + sayfalayıcı. Kolon düşürme KABIN
   genişliğine bağlıdır (@container etkkap); düşen bilgi komşu hücrenin 2. satırında açılır
   (.etk-alt2). FAZ 1 kurallarına (#etk-sn · #etk-en) dokunulmaz. Yalnız token renk. */
:is(#etk-sp, #etk-es, #etk-fy) .etk-kap { container: etkkap / inline-size; transition: opacity .15s ease; }
:is(#etk-sp, #etk-es, #etk-fy) .etk-kap.is-yukleniyor { opacity: .55; }
:is(#etk-sp-pager, #etk-es-pager, #etk-fy-pager) .pager-btn { margin: 0 1px; }

/* Süzgeç çubuğu: metin/tarih girdisi, onay kutusu, "süzgeci temizle". Denetim yüksekliği 36px. */
:is(#etk-sp, #etk-es, #etk-fy) .etk-alan .peron-input { box-sizing: border-box; max-width: 100%; height: 36px; }
:is(#etk-sp, #etk-es, #etk-fy) .etk-alan--ara .peron-input { width: 240px; }
.etk-aralik { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.etk-aralik > .peron-input { flex: 0 1 136px; width: 136px; min-width: 0; font-variant-numeric: tabular-nums; }
.etk-aralik > i { font-style: normal; color: var(--text-muted); }
.etk-onay {
    box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
    font-size: 11.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; cursor: pointer;
}
.etk-onay > input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--pri); cursor: pointer; }
.etk-onay > input:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.etk-arac > .etk-git { min-height: 36px; margin: 0; padding: 0 8px; }
.etk-arac > .etk-git[hidden] { display: none; }
/* Süzgeç aç/kapa düğmesi yalnız telefonda görünür (aşağıdaki ≤640 bloğu). */
.etk-suz-ac { display: none; }

/* Hücre içi satırlar: birinci satır tanımlayıcı, ikinci satır yardımcı (her zaman görünür);
   .etk-alt2 yalnız o kolon DÜŞTÜĞÜNDE açılan ikinci satırdır. */
.etk-birinci {
    display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--text-primary);
}
.etk-ikinci {
    display: block; min-width: 0; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; font-weight: 500; line-height: 1.35; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.etk-birinci--sar, .etk-ikinci--sar { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.etk-t .etk-ikinci.is-hata { color: var(--rose-ink); }
/* 1.431.0 — ürünün kanal izi / Eşleştir bağlantısı: satır yüksekliği değişmeden 24px dokunma alanı (dolgu + eksi kenar). */
.etk-iz { box-sizing: border-box; max-width: 100%; margin: -5px 0; padding: 5px 0; border: 0; background: none; font: inherit;
    font-size: 10.5px; line-height: 14px; font-weight: 600; text-align: left; color: var(--text-secondary); cursor: pointer; }
.etk-iz.is-cok { color: var(--pri-text); }
.etk-iz:hover, .etk-iz:focus-visible { text-decoration: underline; }
.etk-t .etk-ikinci.is-karar { color: var(--amber-ink); }
.etk-soluk { margin-left: 6px; font-weight: 500; color: var(--text-muted); }
.etk-alt2 {
    display: none; margin-top: 1px; font-size: 10.5px; line-height: 1.35; color: var(--text-muted);
    white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.etk-t .etk-alt2.is-hata { color: var(--rose-ink); font-weight: 700; }
.etk-sorun {
    display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--rose-ink);
    white-space: normal; overflow-wrap: anywhere;
}
.etk-bos-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -8px 0 16px; }
.etk-modal-not.is-karar { color: var(--amber-ink); }

/* ── Siparişler (#etk-sp · .etk-sp-t) ──
   Kolon bütçesi ÖLÇÜLDÜ (en geniş gerçek içerik + 16px hücre dolgusu, 4'ün katı): Sipariş 108 · Kanal 152 · Tarih 92 · Alıcı 120 · Tutar 108 · Kanal durumu 136 · PERON 144 · Termin 64 = 924 sabit;
   + seçim 36 + Ürün ≥ 172 = 1132 (1.419.0: Alıcı 100 → 120, ikinci satırda ilçe / il). Sipariş 108: 11 haneli pazaryeri numarası 96px ister (düğme içi 100px) — SAYI KIRPILMAZ. Kanal 152: çip 58 + 6 +
   mağaza adına 72px (platform öneki `kanalKisaAd` ile atılır; ölçülen "Ana Mağaza" 72px). İki pay da Ürün'den alındı (kırpılabilir metin; tamı
   title'da): 1440px'te (menü açık) Ürün 180–200px, taban 172 yalnız en dar T0 kabında (1122px). 🔴 Eşikler tablo tabanından 10px BÜYÜKTÜR: kabın dikey kaydırma çubuğu @container
   genişliğine dahildir ama tablonun kullanabildiği alana değil (ölçüldü, 1440px: kap 1130, iç 1120). Böylece çubuk
   varken de tablo kabından taşmaz; 1440px ekranda (menü açık) bütün kolonlar görünür, 8px pay kalır.
   Yazamayan kullanıcıda (.is-salt) seçim kolonu yoktur: her eşik 36 düşer. Fiyatı gizli kullanıcıda (.is-tutarsiz)
   Tutar kolonu üretilmez. Hücre dolgusu fare ve dokunmatikte aynıdır (8px): bütçe iki bağlamda da tutar. */
.etk-sp-t col.etk-c-no     { width: 108px; }
.etk-sp-t col.etk-c-kanal  { width: 152px; }
.etk-sp-t col.etk-c-tarih  { width: 92px; }
.etk-sp-t col.etk-c-alici  { width: 120px; }
.etk-sp-t col.etk-c-tutar  { width: 108px; }
.etk-sp-t col.etk-c-kdurum { width: 136px; }
.etk-sp-t col.etk-c-peron  { width: 144px; }
.etk-sp-t col.etk-c-termin { width: 64px; }
#etk-sp .peron-table--fixed.etk-sp-t { min-width: 1132px; }
#etk-sp .peron-table--fixed.etk-sp-t.is-salt { min-width: 1096px; }
#etk-sp .etk-sp-t > thead > tr > th:where(:not(.peron-sel-th)),
#etk-sp .etk-sp-t > tbody > tr > td:where(:not(.peron-sel-cell)) { padding-left: 8px; padding-right: 8px; }
#etk-sp .etk-sp-t > tbody > tr > td { vertical-align: middle; }
/* 1.417.1 — boş liste düğmeleri masaüstünde 26px ölçüldü; diğer E-Ticaret ekranlarıyla aynı 28px (telefonda 36px, dokunulmaz). */
@media (min-width: 769px) {
    #etk-sp .etk-bos-eylem .peron-btn.sm { height: 28px; }
}
/* Fareyle satır tabanı 34px: tek satırlık satırda da alt alta iki sipariş düğmesi (28px) arasında 6px kalır. */
@media (min-width: 769px) and (pointer: fine) {
    #etk-sp .peron-table.etk-sp-t { --tbl-row-h: 34px; }
}
#etk-sp .etk-sp-t > tbody > tr[data-rk] { cursor: pointer; }
#etk-sp .etk-sp-t > tbody > tr > td.etk-a-alici { overflow: hidden; }
/* 1.434.0 — alıcı satırı telefonu da taşır: Ürün hücresinin ikinci satırı (Alıcı kolonu düşünce) tek satır kalır, fazlası üç noktaya
   düşer (tamı title'da). Ölçüldü 768px: sararken satır 56 → 70px büyüyordu (100 satırın 91'i). */
#etk-sp .etk-sp-t .etk-alt2--alici { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
/* Bağlantı düğmesi satırı büyütmez (negatif pay); dokunma hedefi 28px kalır. Pazaryeri numarası kolona SIĞAR (108px, yukarıda);
   kırpma yalnız beklenmedik uzunlukta numaranın komşu hücreye taşmasına karşı emniyettir.
   Sipariş no düğmesi sola 2px taşar (4 değil): seçim hücresiyle arasında 6px kalır. */
#etk-sp .etk-sp-t :is(.etk-sp-no, .etk-sp-us) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums;
}
#etk-sp .etk-sp-t .etk-bag:is(.etk-sp-no, .etk-sp-us) { margin-top: -6px; margin-bottom: -6px; }
/* 🔴 Uzun pazaryeri numarası KIRPILMAZ, SARAR (1.396.0). Ölçüldü: Amazon'un 19 karakterlik numarası (156px) 100px'lik
   hücrede üç noktaya düşüyordu (%36'sı okunmuyordu), n11'in 12 hanesi son hanede kesiliyordu. Kolonu genişletmek ürün
   adından yer alırdı; numara ikinci satıra sarar (satır tabanı 34px iki satırı taşır). Trendyol / Hepsiburada numaraları
   sığdığı için tek satırda kalır. */
#etk-sp .etk-sp-t td.etk-a-no .etk-sp-no {
    margin-left: -2px; padding-left: 2px; font-weight: 700;
    white-space: normal; overflow-wrap: anywhere; text-overflow: clip; text-align: left; line-height: 1.15;
}
.etk-urun { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 600; color: var(--text-primary); }
.etk-urun__ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etk-urun__ek { flex: 0 0 auto; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
#etk-sp .etk-sp-t td.etk-a-kdurum .etk-kalan { display: flex; align-items: flex-start; margin-top: 3px; }
#etk-sp .etk-sp-t td.etk-a-termin.is-hata { font-weight: 700; }
/* Dar Termin başlığı: harf aralığı kapanır ve sıralama oku kolonun sağ kenarına yaslanır (ok metne binmesin). */
#etk-sp .etk-sp-t > thead > tr > th.etk-h-termin { letter-spacing: 0; }
#etk-sp .etk-sp-t > thead > tr > th.etk-h-termin.sir-th::after { right: 0; }

/* 1.417.0 — Geçmiş sekmesi: üstte tek satır açıklama + kanal başına tarama durumu (.etk-kutu bileşeni; yeni kutu dili YOK). */
#etk-sp .etk-gecmis__not { margin: 0 0 8px; font-size: 11px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
/* Kutu metni başlığıyla aynı boyda (bileşen tabanı 11,5 / başlık 11: başlık metinden küçük kalıyordu); büyütme değil küçültme. */
#etk-sp .etk-gecmis .etk-kutu { margin: 0 0 8px; font-size: 11px; }
.etk-gecmis__ayr { font-size: 11px; line-height: 1.45; color: var(--text-secondary); white-space: normal; overflow-wrap: anywhere; }

/* D1 — PERON düşer → Kanal durumu 2. satırı. Kalan sabit 780 + 200 + 36 = 1016 (eşik +10). 1.419.0: Alıcı 100 → 120 (ilçe / il), D1–D2 eşikleri +20. */
@container etkkap (714px <= width < 1142px) {
    #etk-sp .peron-table--fixed.etk-sp-t:not(.is-salt) { min-width: 1016px; }
    #etk-sp .etk-sp-t:not(.is-salt) col.etk-c-kanal { width: 152px; }
    #etk-sp .etk-sp-t:not(.is-salt) col.etk-c-peron { visibility: collapse; width: 0; }
    #etk-sp .etk-sp-t:not(.is-salt) :is(th.etk-h-peron, td.etk-a-peron) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-sp .etk-sp-t:not(.is-salt) .etk-alt2--peron { display: block; }
}
@container etkkap (714px <= width < 1106px) {
    #etk-sp .peron-table--fixed.etk-sp-t.is-salt { min-width: 980px; }
    #etk-sp .etk-sp-t.is-salt col.etk-c-kanal { width: 152px; }
    #etk-sp .etk-sp-t.is-salt col.etk-c-peron { visibility: collapse; width: 0; }
    #etk-sp .etk-sp-t.is-salt :is(th.etk-h-peron, td.etk-a-peron) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-sp .etk-sp-t.is-salt .etk-alt2--peron { display: block; }
}
/* D2 — Alıcı düşer → Ürün 2. satırı. Kalan sabit 660 + 200 + 36 = 896. */
@container etkkap (714px <= width < 1026px) {
    #etk-sp .peron-table--fixed.etk-sp-t:not(.is-salt) { min-width: 896px; }
    #etk-sp .etk-sp-t:not(.is-salt) col.etk-c-alici { visibility: collapse; width: 0; }
    #etk-sp .etk-sp-t:not(.is-salt) :is(th.etk-h-alici, td.etk-a-alici) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-sp .etk-sp-t:not(.is-salt) .etk-alt2--alici { display: block; }
}
@container etkkap (714px <= width < 990px) {
    #etk-sp .peron-table--fixed.etk-sp-t.is-salt { min-width: 860px; }
    #etk-sp .etk-sp-t.is-salt col.etk-c-alici { visibility: collapse; width: 0; }
    #etk-sp .etk-sp-t.is-salt :is(th.etk-h-alici, td.etk-a-alici) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-sp .etk-sp-t.is-salt .etk-alt2--alici { display: block; }
}
/* D3 — Tarih düşer → Sipariş 2. satırı. Kalan sabit 568 + 200 + 36 = 804. */
@container etkkap (714px <= width < 906px) {
    #etk-sp .peron-table--fixed.etk-sp-t:not(.is-salt) { min-width: 804px; }
    #etk-sp .etk-sp-t:not(.is-salt) col.etk-c-tarih { visibility: collapse; width: 0; }
    #etk-sp .etk-sp-t:not(.is-salt) :is(th.etk-h-tarih, td.etk-a-tarih) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-sp .etk-sp-t:not(.is-salt) .etk-alt2--tarih { display: block; }
}
@container etkkap (714px <= width < 870px) {
    #etk-sp .peron-table--fixed.etk-sp-t.is-salt { min-width: 768px; }
    #etk-sp .etk-sp-t.is-salt col.etk-c-tarih { visibility: collapse; width: 0; }
    #etk-sp .etk-sp-t.is-salt :is(th.etk-h-tarih, td.etk-a-tarih) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-sp .etk-sp-t.is-salt .etk-alt2--tarih { display: block; }
}
/* D4 — Termin düşer → Tutar 2. satırı; Kanal 152 → 112 (etiket üstte, ad altta: ada 96px — ölçülen en uzun tohum adı 95px).
   Kalan sabit 464 + 204 + 36 = 704; kart eşiği 714.
   Fiyatı gizli kullanıcıda Tutar kolonu yoktur → Termin DÜŞMEZ (yeni evi olmazdı); Tutar'ın boşalttığı yer onu taşır.
   Kart eşiği iki kipte de 714'tür: yazamayan kullanıcının D4 bandı [714, 778). */
@container etkkap (714px <= width < 814px) {
    #etk-sp .peron-table--fixed.etk-sp-t:not(.is-salt) { min-width: 704px; }
    #etk-sp .etk-sp-t:not(.is-salt) col.etk-c-kanal { width: 112px; }
    #etk-sp .etk-sp-t:not(.is-salt) .etk-kanal { flex-wrap: wrap; row-gap: 2px; }
    #etk-sp .etk-sp-t:not(.is-salt, .is-tutarsiz) col.etk-c-termin { visibility: collapse; width: 0; }
    #etk-sp .etk-sp-t:not(.is-salt, .is-tutarsiz) :is(th.etk-h-termin, td.etk-a-termin) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-sp .etk-sp-t:not(.is-salt, .is-tutarsiz) .etk-alt2--termin { display: block; }
}
@container etkkap (714px <= width < 778px) {
    #etk-sp .peron-table--fixed.etk-sp-t.is-salt { min-width: 668px; }
    #etk-sp .etk-sp-t.is-salt col.etk-c-kanal { width: 112px; }
    #etk-sp .etk-sp-t.is-salt .etk-kanal { flex-wrap: wrap; row-gap: 2px; }
    #etk-sp .etk-sp-t.is-salt:not(.is-tutarsiz) col.etk-c-termin { visibility: collapse; width: 0; }
    #etk-sp .etk-sp-t.is-salt:not(.is-tutarsiz) :is(th.etk-h-termin, td.etk-a-termin) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-sp .etk-sp-t.is-salt:not(.is-tutarsiz) .etk-alt2--termin { display: block; }
}
/* Kart — kap < 714: aynı <tr> ızgaraya dizilir (ikinci render yolu yok). Alıcı, Ürün'ün 2. satırındadır.
   `height: auto` ŞART: hücre tabanı (--tbl-row-h) kartta her hücrede tekrarlanırdı. */
@container etkkap (width < 714px) {
    #etk-sp .peron-table--fixed.etk-sp-t,
    #etk-sp .peron-table--fixed.etk-sp-t.is-salt { display: block; width: auto; min-width: 0; table-layout: auto; }
    #etk-sp .etk-sp-t > colgroup, #etk-sp .etk-sp-t > thead { display: none; }
    #etk-sp .etk-sp-t > tbody { display: block; }
    #etk-sp .etk-sp-t > tbody > tr { display: block; }
    #etk-sp .etk-sp-t > tbody > tr[data-rk] {
        box-sizing: border-box; display: grid; align-items: center;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas: "no no kdurum" "urun urun urun" "kanal kanal tutar" "peron peron termin";
        gap: 3px 8px; margin: 0 0 6px; padding: 8px 10px;
        border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); box-shadow: none;
    }
    /* Seçim kutusu kartta da durur (yazabilen kullanıcı, daraltılmış masaüstü penceresi): kartın sol sütunu. */
    #etk-sp .etk-sp-t > tbody > tr[data-rk]:has(> td.peron-sel-cell) {
        grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-areas: "sec no no kdurum" "sec urun urun urun" "sec kanal kanal tutar" "sec peron peron termin";
    }
    #etk-sp .etk-sp-t > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0;
        text-align: left; font-size: var(--m-fs-sm); line-height: 1.35; background: transparent;
    }
    #etk-sp .etk-sp-t > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); display: inline; margin-right: 4px;
        font-size: var(--m-fs-micro); font-weight: 600; letter-spacing: .02em; color: var(--text-muted);
    }
    /* Alıcı Ürün'ün, Tarih Sipariş no'nun yanındaki 2. satırdadır (320px'te üç etiketli alan tek sıraya sığmıyordu). */
    #etk-sp .etk-sp-t > tbody > tr > td:is(.etk-nil, .etk-a-alici, .etk-a-tarih) { display: none; }
    #etk-sp .etk-sp-t > tbody > tr > td.peron-sel-cell {
        grid-area: sec; align-self: stretch; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px;
    }
    #etk-sp .etk-sp-t > tbody > tr:has(> td.peron-sel-cell) > td.etk-a-no .etk-sp-no { margin-left: 0; padding-left: 0; }
    #etk-sp .etk-sp-t :is(.etk-alt2--alici, .etk-alt2--tarih) { display: block; margin-top: 0; font-size: var(--m-fs-sm); }
    /* Numara ile tarih yan yana sığmıyorsa (320px, uzun durum rozeti) tarih alt satıra iner: SAYI KIRPILMAZ. */
    #etk-sp .etk-sp-t td.etk-a-no     { grid-area: no; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
    #etk-sp .etk-sp-t td.etk-a-no .etk-sp-no { flex: 0 1 auto; max-width: 100%; margin-left: -4px; padding-left: 4px; margin-right: 0; }
    #etk-sp .etk-sp-t td.etk-a-no .etk-alt2--tarih { flex: 0 0 auto; white-space: nowrap; }
    #etk-sp .etk-sp-t td.etk-a-kdurum { grid-area: kdurum; justify-self: end; }
    #etk-sp .etk-sp-t td.etk-a-urun   { grid-area: urun; }
    #etk-sp .etk-sp-t td.etk-a-kanal  { grid-area: kanal; }
    #etk-sp .etk-sp-t > tbody > tr > td.etk-a-tutar { grid-area: tutar; text-align: right; font-weight: 700; }
    #etk-sp .etk-sp-t td.etk-a-peron  { grid-area: peron; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
    #etk-sp .etk-sp-t td.etk-a-peron .etk-sp-us { flex: 0 1 auto; min-width: 0; }
    #etk-sp .etk-sp-t > tbody > tr > td.etk-a-termin { grid-area: termin; text-align: right; white-space: nowrap; }
    #etk-sp .etk-sp-t td.etk-a-no .etk-sp-no,
    #etk-sp .etk-sp-t td.etk-a-urun .etk-urun { font-size: var(--m-fs); }
    #etk-sp .etk-sp-t td.etk-a-peron .etk-ikinci { margin-top: 0; font-size: var(--m-fs-sm); }
    #etk-sp .etk-sp-t td.etk-a-kdurum .etk-kalan { align-items: flex-end; }
    #etk-sp .etk-sp-t .etk-kanal__ad { font-size: var(--m-fs); }
    #etk-sp .etk-sp-t .etk-tag { font-size: var(--m-fs-micro); line-height: 16px; }
    #etk-sp .etk-sp-t .etk-sorun { font-size: var(--m-fs-sm); }
    #etk-sp .etk-sp-t > tbody > tr.peron-skel-row > td { height: auto; padding: 6px 0; }
}

/* ── Sipariş detayı (createModal · w-md 760). Kalem tablosu: Fiyat 88 · Miktar 64 · KDV 48 · İskonto 84 ·
   Toplam 92 · Durum 128 = 504 + Ürün ≥ 200 = 704; +38 kutu payı = 742 ≤ 760. Ürün adı sarar. ── */
.etk-sp-detay { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.etk-kunye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 0; }
.etk-kunye__s { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; min-width: 0; }
/* Uzun açıklama satırı (geçmiş sipariş notu) künyenin tam genişliğini alır: yarım sütunda 4 satıra sarıyordu. */
.etk-kunye > .is-genis { grid-column: 1 / -1; }
.etk-kunye__s > dt { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.etk-kunye__s > dd { margin: 0; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--text-primary); overflow-wrap: anywhere; }
.etk-kunye__s > dd .is-hata { color: var(--rose-ink); font-weight: 700; }
.etk-kunye__s > dd .etk-ikinci { display: inline; margin: 0 0 0 6px; font-size: 11px; }
.etk-kunye__s > dd :is(.etk-bag, .etk-duz) { display: inline-block; min-height: 0; margin: 0; padding: 0; vertical-align: baseline; }
.etk-kunye__s > dd .etk-bag { min-height: 28px; margin: -6px -4px; padding: 0 4px; color: var(--pri-text); }
.etk-sp-uyari {
    padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--rose) 45%, var(--border)); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--rose) 7%, var(--card-bg));
}
.etk-sp-uyari > p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--rose-ink); overflow-wrap: anywhere; }
.etk-sp-uyari > p.etk-sp-uyari__ham { margin-top: 2px; font-size: 11px; color: var(--text-secondary); }
.etk-sp-iade {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
    font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
}
.etk-sp-h { margin: 4px 0 -6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.etk-sp-kalem col.etk-c-fiyat { width: 88px; }
.etk-sp-kalem col.etk-c-mik   { width: 64px; }
.etk-sp-kalem col.etk-c-kdv   { width: 48px; }
.etk-sp-kalem col.etk-c-isk   { width: 84px; }
.etk-sp-kalem col.etk-c-top   { width: 92px; }
.etk-sp-kalem col.etk-c-kd    { width: 128px; }
.peron-modal .peron-table--fixed.etk-sp-kalem { min-width: 704px; }
.peron-modal .etk-sp-kalem > thead > tr > th,
.peron-modal .etk-sp-kalem > tbody > tr > td { padding-left: 8px; padding-right: 8px; }
.peron-modal .peron-table--fixed.etk-sp-kalem.is-tutarsiz { min-width: 392px; }
.peron-modal .etk-sp-kalem > tbody > tr > td { vertical-align: top; }
.peron-modal .etk-sp-kalem > tbody > tr > td.etk-sp-top { font-weight: 700; }
.peron-modal .etk-sp-kalem td.etk-a-kd .etk-kalan { display: flex; align-items: flex-start; margin-top: 3px; }
/* 1.418.0 — kalemin görseli (40px kare) adın solunda; mağaza görseli dış adrestir (lazy, no-referrer). Ürün kolonu ≥ 200px:
   görsel + 8px boşluk sonrası ad için ≥ 152px kalır, ad sarar. */
.etk-sp-urun { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.etk-sp-urun__m { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.etk-sp-gorsel {
    flex: 0 0 40px; box-sizing: border-box; width: 40px; height: 40px; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--border-light);
}
.etk-sp-gorsel > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.etk-sp-gorsel:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
/* Müşteri notu satır sonlarını korur (künyenin `dd`si tek satırlık değerler için yazılmıştı). */
.etk-sp-musteri .etk-sp-not { white-space: pre-line; }
.etk-sp-musteri .etk-sp-posta { color: var(--pri-text); }
.peron-modal .etk-sp-kalem-kap, .peron-modal .etk-sp-sonuc-kap { max-height: none; box-shadow: none; border-radius: var(--r-md); }
.etk-tutar { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: -4px 0 0; }
.etk-tutar > div { display: flex; align-items: baseline; gap: 16px; }
.etk-tutar dt { font-size: 11px; color: var(--text-muted); }
.etk-tutar dd { margin: 0; min-width: 104px; text-align: right; font-size: 12px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-zc { list-style: none; margin: 0; padding: 0; }
.etk-zc > li {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px;
    padding: 5px 0; border-top: 1px solid var(--border-light); font-size: 12px; line-height: 1.4;
}
.etk-zc > li:first-child { border-top: 0; }
.etk-zc > li > time { color: var(--text-secondary); }
.etk-zc__ad { min-width: 0; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.etk-zc__mesaj { grid-column: 2 / -1; font-size: 11px; color: var(--text-secondary); overflow-wrap: anywhere; }
.etk-sp-onay__kim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; overflow-wrap: anywhere; }
.etk-sp-neden { margin: 4px 0 8px; }
.etk-sp-neden .peron-select { width: 100%; }
.etk-sp-sonuc col.etk-c-sno { width: 168px; }
.peron-modal .peron-table--fixed.etk-sp-sonuc { min-width: 0; }
.peron-modal .etk-sp-sonuc-kap { max-height: min(320px, 46vh); margin: 0 0 8px; }
.etk-modal-p .is-hata { color: var(--rose-ink); }
/* Modal altbilgisi birincil/yıkıcı eylem taşır: 36px taban. */
:is(.etk-sp-modal, .etk-sp-onay, .etk-sp-sonuc-modal) > .peron-modal-footer .peron-btn { min-height: 36px; }

/* ── Tablet/telefon: girdiler 16px (iOS odakta sayfayı büyütmesin); yatay telefon da telefondur. ── */
@media (max-width: 768px), (pointer: coarse) and (max-height: 640px) {
    :is(#etk-sp, #etk-es, #etk-fy) .etk-alan :is(.peron-select, .peron-input) { font-size: 16px; height: 40px; }
    :is(#etk-sp, #etk-es, #etk-fy) .etk-alan--ara .peron-input { width: 288px; }
    .etk-aralik > .peron-input { flex-basis: 164px; width: 164px; }
    .etk-sp-neden .peron-select { font-size: 16px; height: 40px; }
    .etk-onay { min-height: 40px; }
}

/* ── Telefon (≤640px): süzgeç çubuğu alt alta; künye tek sütun. Toplu çubuk JS'te hiç basılmaz,
   burada kemer olarak gizlenir (pencere daraltılmış masaüstü). Masaüstü (≥641px) yolu değişmez. ── */
@media (max-width: 640px) {
    :is(#etk-sp, #etk-es, #etk-fy) .etk-alan--ara .peron-input { width: 100%; }
    .etk-aralik > .peron-input { flex: 1 1 0; width: auto; }
    .etk-arac > .etk-git { align-self: flex-start; }
    /* Katlanan süzgeç çubuğu: arama + "Süzgeç" tek sırada; VARSAYILANINDAKİ süzgeçler (.is-vars) çubuk kapalıyken
       gizlenir (ölçüldü 390px: süzgeçler 290px tutuyor, ilk kart ekranın yarısında başlıyordu). Varsayılanından
       sapmış süzgeç her zaman görünür — gizlenen süzgeç etkisiz değildir. */
    .etk-arac--katla { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
    .etk-arac--katla > * { grid-column: 1 / -1; }
    .etk-arac--katla > .etk-alan--ara { grid-column: 1; order: -2; }
    .etk-arac--katla > .etk-alan--ara > span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .etk-arac--katla > .etk-suz-ac {
        grid-column: 2; order: -1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
        min-width: 72px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-md);
        background: var(--card-bg); font: inherit; font-size: var(--m-fs); font-weight: 600; color: var(--text-secondary); cursor: pointer;
    }
    .etk-arac--katla > .etk-suz-ac[aria-expanded="true"] { border-color: var(--pri); background: var(--pri-light); color: var(--pri-text); }
    .etk-arac--katla > .etk-suz-ac:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
    .etk-arac--katla:not(.is-acik) > .is-vars { display: none; }
    :is(#etk-sp, #etk-es, #etk-fy) .etk-toplu { display: none; }
    #etk-sp .etk-sp-t > tbody > tr > td.peron-sel-cell { display: none; }
    .etk-kunye { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .etk-kunye__s { grid-template-columns: 88px minmax(0, 1fr); }
    .etk-kunye__s > dt { font-size: var(--m-fs-sm); }
    .etk-zc > li { grid-template-columns: 76px minmax(0, 1fr) auto; }
    /* 1.417.0 — Geçmiş sekmesi telefonda listeyle aynı oranda küçülür (kart gövdesi --m-fs-sm, yardımcı metin bir kademe altı). */
    #etk-sp .etk-gecmis__not { font-size: var(--m-fs-xs); }
    #etk-sp .etk-gecmis .etk-kutu,
    #etk-sp .etk-gecmis .etk-kutu__b { font-size: var(--m-fs-sm); }
    /* Sipariş ayrıntısının kalem tablosu telefonda kart: 7 kolon 352px'e sığmıyor, Toplam kaydırmadan görünmüyordu
       (ölçüldü 390px: tablo 704 / kap 352). Etiketler hücrenin `data-lbl`ından; ürün ve durum tam satır. */
    .peron-modal .peron-table--fixed.etk-sp-kalem,
    .peron-modal .peron-table--fixed.etk-sp-kalem.is-tutarsiz { display: block; width: auto; min-width: 0; table-layout: auto; }
    .peron-modal .etk-sp-kalem > colgroup, .peron-modal .etk-sp-kalem > thead { display: none; }
    .peron-modal .etk-sp-kalem > tbody { display: block; }
    .peron-modal .etk-sp-kalem > tbody > tr {
        box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px;
        padding: 8px 0; border-bottom: 1px solid var(--border-light);
    }
    .peron-modal .etk-sp-kalem > tbody > tr:last-child { border-bottom: 0; }
    .peron-modal .etk-sp-kalem > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0; text-align: left; font-size: var(--m-fs-sm); line-height: 1.35;
    }
    .peron-modal .etk-sp-kalem > tbody > tr > td:is(.etk-a-kalem, .etk-a-kd),
    .peron-modal .etk-sp-kalem > tbody > tr.etk-sp-grup > td { grid-column: 1 / -1; }
    .peron-modal .etk-sp-kalem > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); display: block; font-size: var(--m-fs-micro); font-weight: 600; letter-spacing: .02em; color: var(--text-muted);
    }
}

/* ══ E-TİCARET — ÜRÜNLER & EŞLEŞTİRME (FAZ 2 · C2c) ═════════════════════════════════
   #etk-es · .etk-es-t. Üç sekmenin kolonları farklıdır (.is-eslesmis · .is-bekleyen · .is-fark); tablo sekme
   değişince yeniden kurulur, gövde kimliği aynı kalır. Kolon bütçesi ÖLÇÜLDÜ (en geniş gerçek içerik + 16px hücre
   dolgusu, 4'ün katı). Eşikler tablo tabanından 10px BÜYÜKTÜR (kabın dikey kaydırma çubuğu @container genişliğine
   dahildir, tablonun alanına değil). Yazamayan kullanıcıda (.is-salt) seçim ve eylem kolonu ÜRETİLMEZ: eşikler
   aynı kalır, taban o kolonlar kadar düşer, kazanılan yer esnek ad kolonuna gider. Kart eşiği üç sekmede AYNIDIR
   (722): sekme değiştirmek aynı genişlikte tablo ↔ kart arasında zıplatmaz. Yalnız token renk. */
.etk-birim { margin-left: 3px; font-size: 10.5px; font-weight: 500; color: var(--text-muted); }
.etk-ikon-btn {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--text-secondary); cursor: pointer;
}
.etk-ikon-btn:hover { background: var(--pri-light); color: var(--pri-text); }
.etk-ikon-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.etk-ikon-btn svg { width: 14px; height: 14px; }

.etk-arac > .etk-es-cek { height: 36px; white-space: nowrap; }
.etk-es-not { margin: 0 0 8px; max-width: 132ch; }
.etk-es-not[hidden] { display: none; }
.etk-es-not > p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.etk-es-not > p.is-karar { margin-top: 2px; font-weight: 600; color: var(--amber-ink); }

.etk-es-t col.etk-c-kanal { width: 124px; }
.etk-es-t col.etk-c-eylem { width: 44px; }
/* Eşleşmiş — sabit 856 (Kanal 124 · İlan 168 · Mod 112 · Satılabilir 92 · Giden 64 · Son giden 88 · Kanalda 80 ·
   Durum 84 · eylem 44) + seçim 36 + PERON ürünü ≥ 220 = 1112. */
.etk-es-t.is-eslesmis col.etk-c-ilan    { width: 168px; }
.etk-es-t.is-eslesmis col.etk-c-mod     { width: 112px; }
.etk-es-t.is-eslesmis col.etk-c-sat     { width: 92px; }
.etk-es-t.is-eslesmis col.etk-c-giden   { width: 64px; }
.etk-es-t.is-eslesmis col.etk-c-son     { width: 88px; }
.etk-es-t.is-eslesmis col.etk-c-kanalda { width: 80px; }
.etk-es-t.is-eslesmis col.etk-c-durum   { width: 84px; }
/* Eşleşme bekleyen — sabit 412 (Kanal 124 · SKU 136 · Eşle 152) + seçim 36 + İlan ve Önerilen ürün ≥ 220'şer = 888. */
.etk-es-t.is-bekleyen col.etk-c-sku  { width: 136px; }
.etk-es-t.is-bekleyen col.etk-c-esle { width: 152px; }
/* Stok farkı — sabit 408 (Kanal 124 · PERON 72 · Kanalda 100 · Fark 68 · eylem 44) + seçim 36 + Ürün ≥ 220 = 664; kolon düşmez. */
.etk-es-t.is-fark col.etk-c-peron { width: 72px; }
.etk-es-t.is-fark col.etk-c-taban { width: 100px; }
.etk-es-t.is-fark col.etk-c-fark  { width: 68px; }
#etk-es .peron-table--fixed.etk-es-t { min-width: var(--etk-es-min, 0); }
#etk-es .etk-es-t.is-eslesmis:not(.is-salt) { --etk-es-min: 1112px; }
#etk-es .etk-es-t.is-eslesmis.is-salt       { --etk-es-min: 1032px; }
#etk-es .etk-es-t.is-bekleyen:not(.is-salt) { --etk-es-min: 888px; }
#etk-es .etk-es-t.is-bekleyen.is-salt       { --etk-es-min: 700px; }
#etk-es .etk-es-t.is-fark:not(.is-salt)     { --etk-es-min: 664px; }
#etk-es .etk-es-t.is-fark.is-salt           { --etk-es-min: 584px; }
#etk-es .etk-es-t > thead > tr > th:where(:not(.peron-sel-th)),
#etk-es .etk-es-t > tbody > tr > td:where(:not(.peron-sel-cell)) { padding-left: 8px; padding-right: 8px; }
#etk-es .etk-es-t > tbody > tr > td { vertical-align: middle; }
/* Tümünü-seç kutusu başlık bandında dikey ortalı (`.peron-table--fixed > thead > tr > th` tabanı `top`tur; kutu üst kenara yapışıyordu). */
#etk-es .etk-es-t > thead > tr > th.peron-sel-th { vertical-align: middle; line-height: 0; }
@media (min-width: 769px) and (pointer: fine) {
    #etk-es .peron-table.etk-es-t { --tbl-row-h: 34px; }
}
#etk-es .etk-es-t > tbody > tr > td:is(.etk-a-ilan, .etk-a-urun, .etk-a-oneri, .etk-a-sku) { overflow: hidden; }
#etk-es .etk-es-t > tbody > tr > td.etk-a-mod .etk-ikinci { display: inline; margin: 0 0 0 6px; }
#etk-es .etk-es-t > tbody > tr > td:is(.etk-a-giden, .etk-a-peron, .etk-a-fark) > b { font-weight: 700; }
#etk-es .etk-es-t > tbody > tr > td.etk-a-eylem { text-align: center; }
#etk-es .etk-es-t > tbody > tr > td.etk-a-eylem .etk-ikon-btn { margin: -2px 0; }
#etk-es .etk-es-t > tbody > tr > td.etk-a-esle { white-space: nowrap; }
#etk-es .etk-es-t > tbody > tr > td.etk-a-esle .peron-btn + .peron-btn { margin-left: 6px; }
/* Satır eylemi yoğun yüzey denetimidir: 28px taban (birincil 36 değil). */
#etk-es :is(.etk-es-t, .etk-bos-eylem) .peron-btn.sm { height: 28px; }
/* Kanal hücresi iki satırdır (etiket üstte, ad altta): satır zaten iki satırlık olduğu için yükseklik artmaz,
   ad kolonun tamamını kullanır (ölçüldü: yan yana 124px kolonda adın yalnız 46px'i görünüyordu). */
#etk-es .etk-es-t .etk-kanal { flex-wrap: wrap; row-gap: 1px; }
#etk-es .etk-es-t .etk-kanal__ad { flex: 1 1 100%; }
#etk-es .etk-es-t .etk-tag { line-height: 14px; }
#etk-es .etk-es-t .etk-es-sku { font-weight: 500; font-variant-numeric: tabular-nums; }
#etk-es .etk-es-t .etk-alt2.is-pasif { color: var(--text-secondary); font-weight: 600; }
/* Düşen İlan / SKU kolonunun 2. satırı tek satırdır (ilan adı 100+ karakter olabilir; sarsaydı satır 39 → 80px
   oluyordu). Kırpılan metnin tamı hücrenin title'ındadır. */
#etk-es .etk-es-t :is(.etk-alt2--ilan, .etk-alt2--sku) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }

/* Eşleşmiş D1 — Son giden düşer → Giden 2. satırı (Giden 64 → 88). Kalan sabit 792 + 220 + 36 = 1048 (eşik +10). */
@container etkkap (722px <= width < 1122px) {
    #etk-es .etk-es-t.is-eslesmis:not(.is-salt) { --etk-es-min: 1048px; }
    #etk-es .etk-es-t.is-eslesmis.is-salt       { --etk-es-min: 968px; }
    #etk-es .etk-es-t.is-eslesmis col.etk-c-giden { width: 88px; }
    #etk-es .etk-es-t.is-eslesmis col.etk-c-son { visibility: collapse; width: 0; }
    #etk-es .etk-es-t.is-eslesmis :is(th.etk-h-son, td.etk-a-son) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-es .etk-es-t.is-eslesmis .etk-alt2--son { display: block; }
}
/* Eşleşmiş D2 — Giden + Kanalda düşer → Satılabilir 2. satırı. Üç sayı tek satıra sığsın diye Satılabilir 92 → 192
   (ölçüldü: "giden 100 · son 100 · kanalda 100" 172px; 168px kolonda ikiye bölünüp satırı 39 → 51px yapıyordu),
   karşılığında İlan 168 → 148. Kalan sabit 704 + 220 + 36 = 960 = 1280px ekranda kabın iç genişliği. */
@container etkkap (722px <= width < 1058px) {
    #etk-es .etk-es-t.is-eslesmis:not(.is-salt) { --etk-es-min: 960px; }
    #etk-es .etk-es-t.is-eslesmis.is-salt       { --etk-es-min: 880px; }
    #etk-es .etk-es-t.is-eslesmis col.etk-c-sat { width: 192px; }
    #etk-es .etk-es-t.is-eslesmis col.etk-c-ilan { width: 148px; }
    #etk-es .etk-es-t.is-eslesmis col:is(.etk-c-giden, .etk-c-kanalda) { visibility: collapse; width: 0; }
    #etk-es .etk-es-t.is-eslesmis :is(th.etk-h-giden, td.etk-a-giden, th.etk-h-kanalda, td.etk-a-kanalda) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-es .etk-es-t.is-eslesmis .etk-alt2--son { display: none; }
    #etk-es .etk-es-t.is-eslesmis .etk-alt2--giden { display: block; }
}
/* Eşleşmiş D3 — İlan düşer → PERON ürünü 2. satırı. Kalan sabit 556 + 220 + 36 = 812. */
@container etkkap (722px <= width < 970px) {
    #etk-es .etk-es-t.is-eslesmis:not(.is-salt) { --etk-es-min: 812px; }
    #etk-es .etk-es-t.is-eslesmis.is-salt       { --etk-es-min: 732px; }
    #etk-es .etk-es-t.is-eslesmis col.etk-c-ilan { visibility: collapse; width: 0; }
    #etk-es .etk-es-t.is-eslesmis :is(th.etk-h-ilan, td.etk-a-ilan) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-es .etk-es-t.is-eslesmis .etk-alt2--ilan { display: block; }
}
/* Eşleşmiş D4 — Durum düşer → Mod 2. satırı; Kanal 124 → 104. Kalan sabit 452 + 220 + 36 = 708. */
@container etkkap (722px <= width < 822px) {
    #etk-es .etk-es-t.is-eslesmis:not(.is-salt) { --etk-es-min: 708px; }
    #etk-es .etk-es-t.is-eslesmis.is-salt       { --etk-es-min: 628px; }
    #etk-es .etk-es-t.is-eslesmis col.etk-c-kanal { width: 104px; }
    #etk-es .etk-es-t.is-eslesmis col.etk-c-durum { visibility: collapse; width: 0; }
    #etk-es .etk-es-t.is-eslesmis :is(th.etk-h-durum, td.etk-a-durum) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-es .etk-es-t.is-eslesmis .etk-alt2--durum { display: block; }
}
/* Eşleşme bekleyen D1 — Pazaryeri SKU düşer → İlan 2. satırı. Kalan sabit 276 + 2 × 200 + 36 = 712. */
@container etkkap (722px <= width < 898px) {
    #etk-es .etk-es-t.is-bekleyen:not(.is-salt) { --etk-es-min: 712px; }
    #etk-es .etk-es-t.is-bekleyen.is-salt       { --etk-es-min: 524px; }
    #etk-es .etk-es-t.is-bekleyen col.etk-c-sku { visibility: collapse; width: 0; }
    #etk-es .etk-es-t.is-bekleyen :is(th.etk-h-sku, td.etk-a-sku) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-es .etk-es-t.is-bekleyen .etk-alt2--sku { display: block; }
}
/* Kart — kap < 722: aynı <tr> ızgaraya dizilir (ikinci render yolu yok). Düşen kolonların bilgisi kartta
   komşu hücrenin 2. satırındadır (.etk-alt2); o kolonların kendi hücresi kartta basılmaz.
   `height: auto` ŞART: hücre tabanı (--tbl-row-h) kartta her hücrede tekrarlanırdı. */
@container etkkap (width < 722px) {
    #etk-es .peron-table--fixed.etk-es-t { display: block; width: auto; min-width: 0; table-layout: auto; }
    #etk-es .etk-es-t > colgroup, #etk-es .etk-es-t > thead { display: none; }
    #etk-es .etk-es-t > tbody { display: block; }
    #etk-es .etk-es-t > tbody > tr { display: block; }
    #etk-es .etk-es-t > tbody > tr[data-rk] {
        box-sizing: border-box; display: grid; align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 8px; margin: 0 0 6px; padding: 8px 10px;
        border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); box-shadow: none;
    }
    #etk-es .etk-es-t > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0;
        text-align: left; font-size: var(--m-fs-sm); line-height: 1.35; background: transparent;
    }
    #etk-es .etk-es-t > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); display: inline; margin-right: 4px;
        font-size: var(--m-fs-micro); font-weight: 600; letter-spacing: .02em; color: var(--text-muted);
    }
    #etk-es .etk-es-t > tbody > tr > td.peron-sel-cell {
        grid-area: sec; align-self: stretch; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px;
    }
    #etk-es .etk-es-t .etk-alt2 { display: block; margin-top: 0; font-size: var(--m-fs-sm); }
    /* Kartta title okunmaz: ilan adı iki satıra kadar açılır (pazaryeri başlığı en çok 100 karakterdir), SKU sarar. */
    #etk-es .etk-es-t .etk-alt2--ilan {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere;
    }
    #etk-es .etk-es-t .etk-alt2--sku { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
    #etk-es .etk-es-t .etk-birinci { font-size: var(--m-fs); white-space: normal; overflow-wrap: anywhere; }
    #etk-es .etk-es-t .etk-ikinci { font-size: var(--m-fs-sm); white-space: normal; overflow-wrap: anywhere; }
    #etk-es .etk-es-t .etk-kanal { flex-wrap: wrap; row-gap: 2px; }
    #etk-es .etk-es-t .etk-kanal__ad { flex: 0 1 auto; font-size: var(--m-fs-sm); font-weight: 500; color: var(--text-secondary); }
    #etk-es .etk-es-t .etk-tag { font-size: var(--m-fs-micro); line-height: 16px; }
    #etk-es .etk-es-t .etk-birim { font-size: var(--m-fs-micro); }
    #etk-es .etk-es-t > tbody > tr.peron-skel-row > td { height: auto; padding: 6px 0; }

    #etk-es .etk-es-t.is-eslesmis > tbody > tr[data-rk] { grid-template-areas: "urun eylem" "kanal mod" "sat sat"; }
    #etk-es .etk-es-t.is-eslesmis > tbody > tr[data-rk]:has(> td.peron-sel-cell) {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas: "sec urun eylem" "sec kanal mod" "sec sat sat";
    }
    #etk-es .etk-es-t.is-eslesmis > tbody > tr > td:is(.etk-a-ilan, .etk-a-giden, .etk-a-son, .etk-a-kanalda, .etk-a-durum) { display: none; }
    #etk-es .etk-es-t.is-eslesmis td.etk-a-mod {
        grid-area: mod; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 6px;
    }
    #etk-es .etk-es-t.is-eslesmis td.etk-a-mod .etk-ikinci { margin: 0; }
    #etk-es .etk-es-t.is-eslesmis td.etk-a-sat { grid-area: sat; }
    #etk-es .etk-es-t.is-eslesmis td.etk-a-sat .etk-alt2--giden { display: inline; margin-left: 8px; }

    #etk-es .etk-es-t.is-bekleyen > tbody > tr[data-rk] { grid-template-areas: "ilan ilan" "kanal kanal" "oneri oneri" "esle esle"; }
    #etk-es .etk-es-t.is-bekleyen > tbody > tr[data-rk]:has(> td.peron-sel-cell) {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas: "sec ilan ilan" "sec kanal kanal" "sec oneri oneri" "sec esle esle";
    }
    #etk-es .etk-es-t.is-bekleyen > tbody > tr > td.etk-a-sku { display: none; }
    #etk-es .etk-es-t.is-bekleyen td.etk-a-oneri { grid-area: oneri; }
    #etk-es .etk-es-t.is-bekleyen td.etk-a-oneri .etk-birinci { display: inline; font-size: var(--m-fs-sm); }
    #etk-es .etk-es-t.is-bekleyen td.etk-a-oneri .etk-ikinci { display: inline; margin: 0 0 0 6px; }
    #etk-es .etk-es-t.is-bekleyen td.etk-a-esle { grid-area: esle; padding-top: 3px; }

    #etk-es .etk-es-t.is-fark > tbody > tr[data-rk] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
        grid-template-areas: "urun urun urun eylem" "kanal kanal kanal kanal" "peron taban fark fark";
    }
    #etk-es .etk-es-t.is-fark > tbody > tr[data-rk]:has(> td.peron-sel-cell) {
        grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) auto auto;
        grid-template-areas: "sec urun urun urun eylem" "sec kanal kanal kanal kanal" "sec peron taban fark fark";
    }
    #etk-es .etk-es-t.is-fark td.etk-a-peron { grid-area: peron; }
    #etk-es .etk-es-t.is-fark td.etk-a-taban { grid-area: taban; }
    #etk-es .etk-es-t.is-fark td.etk-a-taban .etk-ikinci { display: inline; margin: 0 0 0 4px; }
    #etk-es .etk-es-t.is-fark > tbody > tr > td.etk-a-fark { grid-area: fark; text-align: right; }

    #etk-es .etk-es-t td.etk-a-urun  { grid-area: urun; }
    #etk-es .etk-es-t td.etk-a-ilan  { grid-area: ilan; }
    #etk-es .etk-es-t td.etk-a-kanal { grid-area: kanal; }
    #etk-es .etk-es-t > tbody > tr > td.etk-a-eylem { grid-area: eylem; align-self: start; }
}

/* ── Eşleştirme modalları (createModal · varsayılan 520px: tek/iki sütun form ve liste; tablo yok). ── */
.etk-es-kimlik {
    display: grid; gap: 3px; min-width: 0; margin: 0 0 12px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--border-light); font-size: 12px;
}
.etk-es-kimlik > div { min-width: 0; }
.etk-es-kimlik__ilan { font-size: 12px; line-height: 1.4; color: var(--text-primary); overflow-wrap: anywhere; }
.etk-es-kimlik__ilan > b { font-weight: 600; }
.etk-es-kimlik__urun { font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }
.etk-es-kimlik__urun:empty { display: none; }
.etk-es-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 0 0 8px; }
.etk-es-form > .is-genis { grid-column: 1 / -1; }
.etk-es-alan :is(.peron-input, .peron-select) { box-sizing: border-box; width: 100%; max-width: none; height: 36px; }
.etk-es-alan > .peron-input.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.etk-es-alan > small, .etk-es-form > small { font-size: 10.5px; line-height: 1.35; color: var(--text-muted); }
.etk-es-form > .etk-es-aktif { white-space: normal; }
.etk-es-ara .peron-input { box-sizing: border-box; width: 100%; height: 36px; }
.etk-es-ara-durum { min-height: 16px; margin: 4px 0 6px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }
.etk-es-ara-durum.is-hata { color: var(--rose-ink); }
.etk-es-sonuc { display: flex; flex-direction: column; gap: 6px; max-height: min(272px, 40vh); margin: 0 0 10px; padding: 2px; overflow-y: auto; }
.etk-es-sonuc:empty { display: none; }
.etk-es-sonuc__s {
    box-sizing: border-box; flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 32px; margin: 0; padding: 6px 8px;
    border: 1px solid var(--border-light); border-radius: var(--r-sm); background: var(--card-bg);
    font: inherit; font-size: 12px; line-height: 1.4; text-align: left; color: var(--text-primary); cursor: pointer;
}
.etk-es-sonuc__s:hover { border-color: var(--pri); }
.etk-es-sonuc__s:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.etk-es-sonuc__s.is-on { border-color: var(--pri); background: var(--pri-light); color: var(--pri-text); font-weight: 600; }
.etk-es-sonuc__s > .etk-kod { margin-right: 0; }
.etk-es-sonuc__s.is-on > .etk-kod { color: inherit; }
.etk-es-sonuc__ad { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.etk-es-sonuc__s > :is(.etk-bayrak, .etk-birim) { flex: 0 0 auto; margin-left: 0; }
.etk-es-ozet { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--border-light); border-radius: var(--r-md); }
.etk-es-ozet > li {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px;
    padding: 5px 10px; border-top: 1px solid var(--border-light); font-size: 12px; line-height: 1.4;
}
.etk-es-ozet > li:first-child { border-top: 0; }
.etk-es-ozet > li > b { min-width: 0; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.etk-es-ozet > li > span { min-width: 0; font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.etk-es-ozet > li.etk-es-ozet__ek { color: var(--text-muted); }
/* 1.435.0 — Ürün Seç: tür sekmesi (Ürün ağacı · Stok kartı) + ağacın modül listesi; İlan Ayarları'nda modül özeti. */
.etk-es-tur { box-sizing: border-box; display: flex; width: 100%; margin: 0 0 4px; }
.etk-es-tur > .peron-seg-opt { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 0 10px; }
.etk-es-tur-not { margin: 0 0 10px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }
.etk-es-sonuc[hidden], .etk-es-modul[hidden] { display: none; }
.etk-es-modul { box-sizing: border-box; margin: 0 0 10px; }
.etk-es-modul__bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
.etk-es-modul__bas > b { min-width: 0; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.etk-es-modul__sayac { margin-left: auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-es-modul__liste {
    display: flex; flex-direction: column; max-height: min(272px, 40vh); overflow-y: auto;
    border: 1px solid var(--border-light); border-radius: var(--r-md);
}
.etk-es-modul__s {
    box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px;
    border-top: 1px solid var(--border-light); font-size: 12px; line-height: 1.4; color: var(--text-primary); cursor: pointer;
}
.etk-es-modul__s:first-child { border-top: 0; }
.etk-es-modul__s:hover { background: var(--border-light); }
.etk-es-modul__s > input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--pri-strong); }
.etk-es-modul__s > :is(.etk-bayrak, .etk-birim) { flex: 0 0 auto; margin-left: 0; }
.etk-es-modul__geri { margin-top: 8px; }
.etk-es-modul-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 36px; font-size: 12px; color: var(--text-secondary); }
.etk-es-modul-ozet > span { min-width: 0; overflow-wrap: anywhere; }
/* Modal altbilgisi birincil/yıkıcı eylem taşır: 36px taban. */
:is(.etk-es-onay, .etk-es-duz, .etk-es-sec) > .peron-modal-footer .peron-btn { min-height: 36px; }

/* ── Tablet/telefon: modal girdileri 16px (iOS odakta sayfayı büyütmesin); yatay telefon da telefondur. ── */
@media (max-width: 768px), (pointer: coarse) and (max-height: 640px) {
    .etk-es-alan :is(.peron-input, .peron-select), .etk-es-ara .peron-input { font-size: 16px; height: 40px; }
    .etk-arac > .etk-es-cek { height: 40px; }
}
/* ── Telefon (≤640px): ekran salt okunurdur (seçim, eylem ve "ilanları çek" JS'te basılmaz); seçim hücresi
   pencere daraltılmış masaüstü için kemer olarak gizlenir. Masaüstü (≥641px) yolu değişmez. ── */
@media (max-width: 640px) {
    #etk-es .etk-es-t > tbody > tr > td.peron-sel-cell { display: none; }
    .etk-arac > .etk-es-cek { align-self: flex-start; }
    .etk-es-form { grid-template-columns: minmax(0, 1fr); }
}

/* ══ E-TİCARET — FİYAT YÖNETİMİ (FAZ 2 · C2d) ═══════════════════════════════════════
   #etk-fy · .etk-fy-t. Eşleşmiş aktif ilanların kanal fiyatı + satır içi yeni fiyat taslağı (yalnız yazabilen
   kullanıcıda: .is-salt olmayan tablo). Seçim kolonu yoktur: gönderilecek satırlar fiyat yazılan satırlardır.
   Kolon bütçesi başlık metni ve en geniş tutar (9.999.999,99) + 16px hücre dolgusundan hesaplandı (4'ün katı);
   eşikler tablo tabanından 10px BÜYÜKTÜR (kabın dikey kaydırma çubuğu @container genişliğine dahildir, tablonun
   alanına değil). Yazamayan kullanıcıda iki girdi kolonu ÜRETİLMEZ: taban 224 düşer, eşikler de. Kart eşiği diğer
   liste ekranlarıyla AYNIDIR (722). Düşen kolonun bilgisi komşu hücrenin 2. satırına iner (.etk-alt2); adımlar,
   hücreler olabildiğince iki satırda kalacak sırayla dizildi (satır yüksekliği 1280px ekranda da artmaz).
   Yalnız token renk. */
.etk-fy-t col.etk-c-kanal  { width: 124px; }
.etk-fy-t col.etk-c-kf     { width: 108px; }
.etk-fy-t col.etk-c-durum  { width: 128px; }
.etk-fy-t col.etk-c-yeni   { width: 112px; }
.etk-fy-t col.etk-c-yliste { width: 112px; }
/* 1.394.0 — Liste fiyatı · Özel fiyat · Son giden kolonları işaretlemeden kalktı; seçicileri (kolon · hücre · başlık ·
   2. satır) bu bloktan silindi. Aşağıdaki taban ve adım değerleri o üç kolon dahil ölçülmüştü (1096 / 872): tablo her
   zaman `.is-oneri` taşır ve geçerli kolon bütçesini, tabanı, adımları "2b — Fiyat" bloğu verir (bu değerleri ezer). */
#etk-fy .peron-table--fixed.etk-fy-t { min-width: var(--etk-fy-min, 0); }
#etk-fy .etk-fy-t:not(.is-salt) { --etk-fy-min: 1096px; }
#etk-fy .etk-fy-t.is-salt       { --etk-fy-min: 872px; }
#etk-fy .etk-fy-t > thead > tr > th,
#etk-fy .etk-fy-t > tbody > tr > td { padding-left: 8px; padding-right: 8px; }
#etk-fy .etk-fy-t > tbody > tr > td { vertical-align: middle; }
@media (min-width: 769px) and (pointer: fine) {
    #etk-fy .peron-table.etk-fy-t { --tbl-row-h: 34px; }
}
#etk-fy .etk-fy-t > tbody > tr > td.etk-a-urun { overflow: hidden; }
#etk-fy .etk-fy-t > tbody > tr > td.etk-a-kf > b { font-weight: 700; }
#etk-fy .etk-fy-t > tbody > tr > td.etk-a-durum .etk-ikinci { margin-top: 2px; }
/* Kanal hücresi iki satırdır (etiket üstte, ad altta): satır zaten iki satırlıktır, ad kolonun tamamını kullanır. */
#etk-fy .etk-fy-t .etk-kanal { flex-wrap: wrap; row-gap: 1px; }
#etk-fy .etk-fy-t .etk-kanal__ad { flex: 1 1 100%; }
#etk-fy .etk-fy-t .etk-tag { line-height: 14px; }
/* Düşen kolonların 2. satırı tek satırdır: tutar bölünmez; durum özeti kırpılır, tamı hücrenin ipucundadır. */
#etk-fy .etk-fy-t .etk-alt2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }

/* Satır içi fiyat girdisi: yoğun yüzey denetimi (28px). Dolu girdi taslaktır (vurgulu); okunamayan giriş işaretlidir. */
#etk-fy .etk-fy-t .etk-fy-girdi {
    box-sizing: border-box; width: 100%; height: 28px; padding: 0 6px; border-width: 1px; border-radius: var(--r-sm);
    font-size: var(--tbl-fs); text-align: right; font-variant-numeric: tabular-nums;
}
#etk-fy .etk-fy-t .etk-fy-girdi:not(:placeholder-shown) { border-color: var(--pri); background: var(--pri-light); font-weight: 600; }
#etk-fy .etk-fy-t .etk-fy-girdi[aria-invalid="true"] {
    border-color: var(--rose); background: color-mix(in srgb, var(--rose) 7%, var(--card-bg)); color: var(--rose-ink);
}
/* Taslak çubuğu (.etk-toplu): özet + "Önizle" + "Taslakları temizle". */
.etk-fy-ozet { font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.etk-fy-ozet > b { font-weight: 700; color: var(--text-primary); }
.etk-fy-ozet > .is-hata { font-weight: 600; color: var(--rose-ink); }
.etk-fy-gizli > p { max-width: 62ch; }
/* Boş durum eylemi yoğun yüzey denetimidir: 28px taban (`.peron-btn.sm` 26px; Eşleştirme'deki karşılığıyla aynı). */
#etk-fy .etk-bos-eylem .peron-btn.sm { height: 28px; }

/* D1 — 2a'da Son giden burada düşüyordu (kolon kalktı); kalan: 2a tabanı. */
@container etkkap (722px <= width < 1106px) {
    #etk-fy .etk-fy-t:not(.is-salt) { --etk-fy-min: 1016px; }
}
@container etkkap (722px <= width < 882px) {
    #etk-fy .etk-fy-t.is-salt { --etk-fy-min: 792px; }
}
/* D2 — 2a'da Liste fiyatı burada düşüyordu (kolon kalktı); kalan: 2a tabanı + Kanal fiyatı 108 → 112. */
@container etkkap (722px <= width < 1026px) {
    #etk-fy .etk-fy-t:not(.is-salt) { --etk-fy-min: 920px; }
    #etk-fy .etk-fy-t:not(.is-salt) col.etk-c-kf { width: 112px; }
}
@container etkkap (722px <= width < 802px) {
    #etk-fy .etk-fy-t.is-salt { --etk-fy-min: 696px; }
    #etk-fy .etk-fy-t.is-salt col.etk-c-kf { width: 112px; }
}
/* D3 — kolon düşmez, DARALIR: Kanal 124 → 104, girdi kolonları 112 → 100. Kalan sabit 656 + 220 = 876. */
@container etkkap (722px <= width < 930px) {
    #etk-fy .etk-fy-t:not(.is-salt) { --etk-fy-min: 876px; }
    #etk-fy .etk-fy-t:not(.is-salt) col.etk-c-kanal { width: 104px; }
    #etk-fy .etk-fy-t:not(.is-salt) col:is(.etk-c-yeni, .etk-c-yliste) { width: 100px; }
}
/* D4 — 2a'da Özel fiyat burada düşüyordu (kolon kalktı); kalan: 2a tabanı. */
@container etkkap (722px <= width < 886px) {
    #etk-fy .etk-fy-t:not(.is-salt) { --etk-fy-min: 764px; }
}
/* D5 — Durum düşer → İlan 3. satırı (durum · zaman · giden). Kalan sabit 416 + 220 = 636.
   Düşen Durum hücresi sayı hücresi değildir (col-num yok): 0px genişlikte "gönderilmedi" harf harf sarıp satırı
   büyütüyordu (ölçüldü: 58 → 188px). Gizli hücre SARMAZ; satır yüksekliğini görünen hücreler belirler. */
@container etkkap (722px <= width < 774px) {
    #etk-fy .etk-fy-t:not(.is-salt) { --etk-fy-min: 636px; }
    #etk-fy .etk-fy-t:not(.is-salt) col.etk-c-durum { visibility: collapse; width: 0; }
    #etk-fy .etk-fy-t:not(.is-salt) :is(th.etk-h-durum, td.etk-a-durum) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-fy .etk-fy-t:not(.is-salt) td.etk-a-durum { white-space: nowrap; }
    #etk-fy .etk-fy-t:not(.is-salt) .etk-alt2--durum { display: block; }
}
/* Kart — kap < 722: aynı <tr> ızgaraya dizilir (ikinci render yolu yok). Kartta bütün alanlar kendi hücresinde,
   etiketiyle durur; 2. satırlar (.etk-alt2) açılmaz. `height: auto` ŞART: hücre tabanı (--tbl-row-h) kartta her
   hücrede tekrarlanırdı. */
@container etkkap (width < 722px) {
    #etk-fy .peron-table--fixed.etk-fy-t { display: block; width: auto; min-width: 0; table-layout: auto; }
    #etk-fy .etk-fy-t > colgroup, #etk-fy .etk-fy-t > thead { display: none; }
    #etk-fy .etk-fy-t > tbody { display: block; }
    #etk-fy .etk-fy-t > tbody > tr { display: block; }
    #etk-fy .etk-fy-t > tbody > tr[data-rk] {
        box-sizing: border-box; display: grid; align-items: center;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "urun urun" "kanal durum" "kf lf" "ozel son";
        gap: 3px 8px; margin: 0 0 6px; padding: 8px 10px;
        border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); box-shadow: none;
    }
    #etk-fy .etk-fy-t:not(.is-salt) > tbody > tr[data-rk] { grid-template-areas: "urun urun" "kanal durum" "kf lf" "ozel son" "yeni yliste"; }
    #etk-fy .etk-fy-t > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0;
        text-align: left; font-size: var(--m-fs-sm); line-height: 1.35; background: transparent;
    }
    #etk-fy .etk-fy-t > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); display: inline; margin-right: 4px;
        font-size: var(--m-fs-micro); font-weight: 600; letter-spacing: .02em; color: var(--text-muted);
    }
    /* Kartta etiket ile tutar arasından satır bölünebilir (320px); tutarın kendisi bölünmez. */
    #etk-fy .etk-fy-t > tbody > tr > td.col-num { white-space: normal; }
    #etk-fy .etk-fy-t td.etk-a-urun  { grid-area: urun; }
    #etk-fy .etk-fy-t td.etk-a-kanal { grid-area: kanal; }
    #etk-fy .etk-fy-t > tbody > tr > td.etk-a-durum { grid-area: durum; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 6px; }
    #etk-fy .etk-fy-t td.etk-a-kf    { grid-area: kf; }
    #etk-fy .etk-fy-t > tbody > tr > td:is(.etk-a-yeni, .etk-a-yliste) { display: flex; align-items: center; gap: 6px; padding-top: 3px; }
    #etk-fy .etk-fy-t > tbody > tr > td:is(.etk-a-yeni, .etk-a-yliste)::before { flex: 0 0 auto; margin-right: 0; }
    #etk-fy .etk-fy-t td.etk-a-yeni   { grid-area: yeni; }
    #etk-fy .etk-fy-t td.etk-a-yliste { grid-area: yliste; }
    #etk-fy .etk-fy-t .etk-fy-girdi { flex: 1 1 0; min-width: 0; }
    #etk-fy .etk-fy-t > tbody > tr > td.etk-a-durum .etk-ikinci { margin: 0; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
    #etk-fy .etk-fy-t .etk-birinci { font-size: var(--m-fs); white-space: normal; overflow-wrap: anywhere; }
    #etk-fy .etk-fy-t .etk-ikinci { font-size: var(--m-fs-sm); white-space: normal; overflow-wrap: anywhere; }
    #etk-fy .etk-fy-t .etk-kanal { flex-wrap: nowrap; }
    #etk-fy .etk-fy-t .etk-kanal__ad { flex: 0 1 auto; font-size: var(--m-fs-sm); font-weight: 500; color: var(--text-secondary); }
    #etk-fy .etk-fy-t .etk-tag { font-size: var(--m-fs-micro); line-height: 16px; }
    #etk-fy .etk-fy-t > tbody > tr.peron-skel-row > td { height: auto; padding: 6px 0; }
}

/* ── Önizleme modalı (createModal · w-md 760). Eski 96 · Yeni 112 · Fark 104 · Uyarı 180 = 492 + İlan ≥ 200 = 692;
   +38 kutu payı = 730 ≤ 760. İlan adı ve uyarı cümlesi sarar; tutar ve yüzde bölünmez (kolona sığmayan uç yüzde
   üç noktayla kırpılır, tamı hücrenin ipucundadır; o satır her zaman uyarılıdır). ── */
.etk-fy-on col.etk-c-eski  { width: 96px; }
.etk-fy-on col.etk-c-yeni  { width: 112px; }
.etk-fy-on col.etk-c-fark  { width: 104px; }
.etk-fy-on col.etk-c-uyari { width: 180px; }
.peron-modal .peron-table--fixed.etk-fy-on { min-width: 692px; }
.peron-modal .etk-fy-on > thead > tr > th,
.peron-modal .etk-fy-on > tbody > tr > td { padding-left: 8px; padding-right: 8px; }
.peron-modal .etk-fy-on > tbody > tr > td { vertical-align: top; }
.peron-modal .etk-fy-on > tbody > tr > td.etk-a-yeni > b { font-weight: 700; }
.peron-modal .etk-fy-on > tbody > tr > td.etk-a-yeni > .etk-ikinci { overflow: visible; }
.peron-modal .etk-fy-on > tbody > tr > td.etk-a-fark { overflow: hidden; text-overflow: ellipsis; }
.peron-modal .etk-fy-on > tbody > tr.is-uyari > td { background: color-mix(in srgb, var(--amber) 8%, var(--card-bg)); }
.peron-modal .etk-fy-on-kap { max-height: min(360px, 46vh); margin: 0 0 8px; box-shadow: none; border-radius: var(--r-md); }
.etk-fy-uyari { display: block; font-size: 11px; line-height: 1.4; color: var(--amber-ink); overflow-wrap: anywhere; }
.etk-fy-uyari + .etk-fy-uyari { margin-top: 3px; }
.etk-fy-uyari > b { font-weight: 700; }
.etk-fy-red { margin: 0 0 8px; }
:is(.etk-fy-on-modal, .etk-fy-sonuc) .etk-modal-not.is-hata { color: var(--rose-ink); }
:is(.etk-fy-on-modal, .etk-fy-sonuc) .etk-modal-p .is-karar { color: var(--amber-ink); }
.etk-fy-onay {
    display: flex; align-items: flex-start; margin: 4px 0 8px; padding: 8px 10px; white-space: normal;
    border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border)); border-radius: var(--r-md);
    background: color-mix(in srgb, var(--amber) 7%, var(--card-bg)); color: var(--text-primary);
}
.etk-fy-onay > input { margin-top: 1px; }

/* ── Dokunmatik ve dar ekran: satır içi girdi 16px (iOS odakta sayfayı büyütmesin). Telefonda ekran salt okunurdur
   (girdi ve taslak çubuğu JS tarafında basılmaz); kural, girdinin basıldığı dokunmatik tablet ve dar pencere içindir. ── */
@media (max-width: 768px), (pointer: coarse) {
    #etk-fy .etk-fy-t .etk-fy-girdi { height: 36px; font-size: 16px; }
}

/* ══ E-TİCARET — FAZ 2b · TOPLU İŞLEMLER · FİYAT KURALI · YAYINDA DEĞİL · ÜRÜN GÖNDER ═══════════════
   Şartname: docs/eticaret/faz2b/TASARIM_2B.md. Yalnız YENİ seçiciler; 2a kurallarına dokunulmaz, sınıfları
   yeniden kullanılır (.etk-cip · .etk-arac · .etk-toplu · .etk-kap · .etk-alt2 · .etk-birinci/.etk-ikinci ·
   .etk-kunye · .etk-es-form · .etk-es-sonuc · .etk-es-ozet · .etk-fy-on · .etk-fy-uyari · .etk-fy-onay).
   Kolon düşürme KABIN genişliğine bağlıdır (@container); eşik = tablo tabanı + 10px (kabın dikey kaydırma
   çubuğu payı). Düşen kolon visibility: collapse; düşen bilgi komşu hücrede .etk-alt2 ile açılır.
   Yalnız token renk; gece modu tokenlarla kendiliğinden gelir. */

/* ── 2b — Ortak ───────────────────────────────────────────────────────────────────────── */
/* Toplu İşlemler kabuğu 2a liste iskeletini kullanır; ortak küme (#etk-sp, #etk-es, #etk-fy) kurallarının
   #etk-tp karşılığı (aynı bildirimler; kümeyi genişletmek yerine yeni seçici — 2a kuralı değişmez). */
#etk-tp .etk-kap { container: etkkap / inline-size; transition: opacity .15s ease; }
#etk-tp .etk-kap.is-yukleniyor { opacity: .55; }
#etk-tp-pager .pager-btn { margin: 0 1px; }

/* Bilgi kutusu: tam kenarlık + hafif zemin (sol aksan çizgisi YOK). Metin sarar, kırpılmaz.
   .is-uyari karar ister · .is-hata sorun · .is-basari sonuç · sınıfsız nötr bilgi. */
.etk-kutu {
    box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0;
    margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--border-light); font-size: 11.5px; line-height: 1.5; color: var(--text-secondary);
}
.etk-kutu[hidden] { display: none; }
.etk-kutu__m { flex: 1 1 220px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.etk-kutu__m > b { font-weight: 700; color: var(--text-primary); }
.etk-kutu__b { display: block; margin: 0 0 2px; font-size: 11px; font-weight: 700; color: var(--text-primary); }
.etk-kutu__ham { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.etk-kutu__e { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.etk-kutu__e .peron-btn.sm { height: 28px; }
.etk-kutu__e .etk-git { margin: 0; padding: 0 6px; }
.etk-modal-not > .etk-git { margin: -6px 0; }
.etk-kutu.is-uyari {
    border-color: color-mix(in srgb, var(--amber) 45%, var(--border));
    background: color-mix(in srgb, var(--amber) 7%, var(--card-bg)); color: var(--text-primary);
}
.etk-kutu.is-uyari .etk-kutu__b { color: var(--amber-ink); }
.etk-kutu.is-hata {
    border-color: color-mix(in srgb, var(--rose) 45%, var(--border));
    background: color-mix(in srgb, var(--rose) 7%, var(--card-bg)); color: var(--text-primary);
}
.etk-kutu.is-hata .etk-kutu__b { color: var(--rose-ink); }
.etk-kutu.is-basari {
    border-color: color-mix(in srgb, var(--green) 45%, var(--border));
    background: color-mix(in srgb, var(--green) 7%, var(--card-bg)); color: var(--text-primary);
}
.etk-kutu.is-basari .etk-kutu__b { color: var(--green-ink); }

/* Kritik onay: kullanıcı kritik satır SAYISINI yazar (sihirbaz adım 5 · fiyat önizlemesi · geri al · ürün gönder
   AYNI bileşeni kullanır). .is-tamam yazılan sayı tuttuğunda, girdideki aria-invalid tutmadığında. */
.etk-kritik {
    box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0;
    margin: 0 0 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--rose) 50%, var(--border));
    border-radius: var(--r-md); background: color-mix(in srgb, var(--rose) 7%, var(--card-bg));
}
.etk-kritik[hidden] { display: none; }
.etk-kritik__m { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-primary); overflow-wrap: anywhere; }
.etk-kritik__m > b { font-weight: 700; color: var(--rose-ink); font-variant-numeric: tabular-nums; }
.etk-kritik__g { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.etk-kritik__g > span { font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.etk-kritik__girdi.peron-input {
    box-sizing: border-box; width: 72px; height: 36px; padding: 0 8px; text-align: right;
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.etk-kritik__girdi.peron-input[aria-invalid="true"] { border-color: var(--rose); color: var(--rose-ink); }
.etk-kritik.is-tamam { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); background: color-mix(in srgb, var(--green) 7%, var(--card-bg)); }
.etk-kritik.is-tamam .etk-kritik__m > b { color: var(--green-ink); }

/* Adım şeridi: düğme DEĞİL, tıklanmaz. Sıra numarası sayaçtan; biten adımda işaret. */
.etk-adim {
    list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 12px; padding: 0 0 8px;
    border-bottom: 1px solid var(--border); counter-reset: etkadim; font-size: 11px; line-height: 1.4; color: var(--text-muted);
}
.etk-adim > li { counter-increment: etkadim; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.etk-adim > li::before { content: counter(etkadim); font-weight: 700; font-variant-numeric: tabular-nums; }
.etk-adim > li + li { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--border); }
.etk-adim > li.is-tamam { color: var(--text-secondary); }
.etk-adim > li.is-tamam::before { content: '\2713'; color: var(--green-ink); }
.etk-adim > li.is-on { font-weight: 700; color: var(--pri-text); }

/* Etiket solda form (kural formu · sihirbaz kurgu). Dar kapta tek sütun; ≥769px etiket 148px + denetim. */
.etk-form2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 12px; min-width: 0; margin: 0 0 10px; }
.etk-form2__et { min-width: 0; padding-top: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--text-secondary); }
.etk-form2__et .req { margin-left: 3px; color: var(--rose-ink); }
.etk-form2__al { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; margin: 0 0 6px; }
.etk-form2__al :is(.peron-input, .peron-select) { box-sizing: border-box; flex: 0 1 auto; width: 240px; max-width: 100%; height: 36px; }
.etk-form2__al :is(.peron-input, .peron-select).is-kisa { width: 88px; }
.etk-form2__al :is(.peron-input, .peron-select).is-orta { width: 168px; }
.etk-form2__al :is(.peron-input, .peron-select).is-tam { flex: 1 1 100%; width: 100%; }
.etk-form2__al .peron-input.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.etk-form2__al textarea.peron-input { height: auto; min-height: 72px; }
.etk-form2__bir { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.etk-form2__ip { flex: 1 1 140px; min-width: 0; font-size: 10.5px; line-height: 1.4; color: var(--text-muted); }
.etk-form2__hata { flex: 1 1 100%; min-width: 0; font-size: 11px; line-height: 1.4; color: var(--rose-ink); overflow-wrap: anywhere; }
.etk-form2__hata:empty, .etk-form2__hata[hidden] { display: none; }
@media (min-width: 769px) {
    .etk-form2 { grid-template-columns: 148px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
    .etk-form2__al { margin: 0; }
}

/* Açılır bölüm (hatalı satırlar · isteğe bağlı özellikler). Özet satırı 28px hedef. */
.etk-ac { min-width: 0; margin: 0 0 10px; border: 1px solid var(--border-light); border-radius: var(--r-md); }
.etk-ac > summary {
    box-sizing: border-box; display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px;
    font-size: 11.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; list-style: none;
}
.etk-ac > summary::-webkit-details-marker { display: none; }
.etk-ac > summary::before { content: '\25B8'; flex: 0 0 auto; color: var(--text-muted); }
.etk-ac[open] > summary::before { content: '\25BE'; }
.etk-ac > summary:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.etk-ac > summary > b { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.etk-ac > summary.is-hata > b { color: var(--rose-ink); }
.etk-ac__ic { padding: 2px 10px 10px; }
.etk-ac__ic > :last-child { margin-bottom: 0; }

/* Modal altbilgisinde sola yaslanan ikincil eylem (createModal `cls: 'ghost etk-sol'`). */
.peron-modal-footer > .peron-btn.etk-sol { margin-right: auto; }
.peron-modal .etk-pager { padding-bottom: 10px; }

/* Modal içi tablolar kendi kabının genişliğine bakar (modal telefonda alt-sheet, masaüstünde basamaklı). */
.peron-modal :is(.etk-fy-on-kap, .etk-tp-d-kap, .etk-kr-kap) { container: etkon / inline-size; }
.peron-modal :is(.etk-tp-d-kap, .etk-kr-kap) { max-height: min(360px, 46vh); margin: 0 0 8px; box-shadow: none; border-radius: var(--r-md); }
/* Önizleme tablosu ekleri (.etk-fy-on 2a sınıfıdır): .is-maliyet fiyat türlerinde Maliyet + Katkı kolonları,
   .is-ayar ayar türlerinde Fark kolonu yok. Kritik satır gül, uyarılı satır kehribar (2a), bilgi nötr. */
.etk-fy-on col.etk-c-mal   { width: 108px; }
.etk-fy-on col.etk-c-katki { width: 104px; }
.etk-fy-on.is-ayar col:is(.etk-c-eski, .etk-c-yeni) { width: 128px; }
.peron-modal .peron-table--fixed.etk-fy-on.is-maliyet { min-width: 904px; }
.peron-modal .peron-table--fixed.etk-fy-on.is-ayar { min-width: 636px; }
.peron-modal .etk-fy-on > tbody > tr.is-kritik > td { background: color-mix(in srgb, var(--rose) 8%, var(--card-bg)); }
.peron-modal .etk-fy-on > tbody > tr > td.etk-a-katki.is-hata { color: var(--rose-ink); font-weight: 700; }
.etk-fy-uyari.is-kritik { color: var(--rose-ink); }
.etk-fy-uyari.is-bilgi { color: var(--text-secondary); }
/* Dar kap (820px ekran: w-lg iç genişliği ~750): Maliyet → Katkı 2. satırı, Fark → Eski 2. satırı. Taban 904 → 692. */
@container etkon (700px <= width < 914px) {
    .peron-modal .peron-table--fixed.etk-fy-on.is-maliyet { min-width: 692px; }
    .peron-modal .etk-fy-on.is-maliyet col:is(.etk-c-mal, .etk-c-fark) { visibility: collapse; width: 0; }
    .peron-modal .etk-fy-on.is-maliyet :is(th.etk-h-mal, td.etk-a-mal, th.etk-h-fark, td.etk-a-fark) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    .peron-modal .etk-fy-on.is-maliyet :is(.etk-alt2--mal, .etk-alt2--fark) { display: block; }
}
/* ── Tablet/telefon: 2b modal girdileri 16px (iOS odakta sayfayı büyütmesin); yatay telefon da telefondur. ── */
@media (max-width: 768px), (pointer: coarse) and (max-height: 640px) {
    #etk-tp .etk-alan .peron-select { font-size: 16px; height: 40px; }
    .etk-form2__al :is(.peron-input, .peron-select), .etk-kritik__girdi.peron-input { font-size: 16px; height: 40px; }
    .etk-form2__al textarea.peron-input { height: auto; }
}

/* ── 2b — Toplu ───────────────────────────────────────────────────────────────────────── */
/* #etk-tp · .etk-tp-t. Kolon bütçesi ÖLÇÜLDÜ (maket, gerçek panel CSS'i): İşlem 64 · Tür 180 · Kanal 124 ·
   Satır 56 · Başarılı 72 · Hatalı 60 · Kim 120 · Ne zaman 96 · Durum 132 · eylem 44 = 948 sabit + Kapsam ≥ 220
   = 1168 (seçim kolonu yok). Tür kırpılmasın diye 148 → 180 (en uzun ad "Eşleşme önerilerini onayla" 152 + 16), Durum 124 → 132
   ("Kısmen geri alındı" rozeti 114 + 16); karşılığı
   Kanal'dan (iki satır: etiket üstte, ad altta) ve sayı kolonlarından alındı. Yazamayan kullanıcıda (.is-salt)
   eylem kolonu ÜRETİLMEZ: taban 44 düşer, eşikler aynı. */
/* "Yeni toplu işlem" telefonda JS'te basılmaz; taban kural kemer olarak gizler, ≥641px açar (mobile-first). */
.etk-arac > .etk-tp-yeni { display: none; height: 36px; margin-left: auto; white-space: nowrap; }
@media (min-width: 641px) {
    .etk-arac > .etk-tp-yeni { display: inline-flex; }
}
.etk-tp-t col.etk-c-no    { width: 64px; }
.etk-tp-t col.etk-c-tur   { width: 180px; }
.etk-tp-t col.etk-c-kanal { width: 124px; }
.etk-tp-t col.etk-c-satir { width: 56px; }
.etk-tp-t col.etk-c-bas   { width: 72px; }
.etk-tp-t col.etk-c-hat   { width: 60px; }
.etk-tp-t col.etk-c-kim   { width: 120px; }
.etk-tp-t col.etk-c-zaman { width: 96px; }
.etk-tp-t col.etk-c-durum { width: 132px; }
.etk-tp-t col.etk-c-eylem { width: 44px; }
#etk-tp .peron-table--fixed.etk-tp-t { min-width: var(--etk-tp-min, 0); }
#etk-tp .etk-tp-t:not(.is-salt) { --etk-tp-min: 1168px; }
#etk-tp .etk-tp-t.is-salt       { --etk-tp-min: 1124px; }
#etk-tp .etk-tp-t > thead > tr > th,
#etk-tp .etk-tp-t > tbody > tr > td { padding-left: 8px; padding-right: 8px; }
#etk-tp .etk-tp-t > tbody > tr > td { vertical-align: middle; }
@media (min-width: 769px) and (pointer: fine) {
    #etk-tp .peron-table.etk-tp-t { --tbl-row-h: 34px; }
}
#etk-tp .etk-tp-t > tbody > tr[data-rk] { cursor: pointer; }
#etk-tp .etk-tp-t > tbody > tr > td:is(.etk-a-tur, .etk-a-kapsam, .etk-a-kim) { overflow: hidden; }
/* İşlem numarası satırın klavye durağıdır (ayrıntıyı açar); satırı büyütmez (negatif pay), hedef 28px. */
#etk-tp .etk-tp-t .etk-bag.etk-tp-no {
    margin-top: -6px; margin-bottom: -6px; font-weight: 600; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.etk-tp-geri { margin-right: 4px; font-weight: 500; color: var(--text-muted); }
#etk-tp .etk-tp-t .etk-kanal { flex-wrap: wrap; row-gap: 1px; }
#etk-tp .etk-tp-t .etk-kanal__ad { flex: 1 1 100%; }
#etk-tp .etk-tp-t .etk-tag { line-height: 14px; }
#etk-tp .etk-bos-eylem .peron-btn.sm { height: 28px; }
#etk-tp .etk-tp-t > tbody > tr > td.etk-a-satir > b { font-weight: 700; }
#etk-tp .etk-tp-t > tbody > tr > td.etk-a-hat.is-hata { font-weight: 700; }
#etk-tp .etk-tp-t > tbody > tr > td.etk-a-eylem { text-align: center; }
#etk-tp .etk-tp-t > tbody > tr > td.etk-a-eylem .etk-ikon-btn { margin: -2px 0; }
/* Rozet grubu: iki rozet (durum + geri alındı) yan yana sığmazsa alt alta. */
.etk-rz { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; vertical-align: middle; }
/* Kapsam hücresinin 2. satırı: düşen Kim ve Ne zaman tek satırda yan yana açılır. */
#etk-tp .etk-tp-t :is(.etk-alt2--kim, .etk-alt2--zaman) { margin-top: 0; }
#etk-tp .etk-tp-t .etk-alt2--kim + .etk-alt2--zaman::before { content: '\00B7'; margin: 0 5px; }

/* D1 — Kim düşer → Kapsam 2. satırı. Kalan sabit 828 + 220 = 1048 (eşik +10). */
@container etkkap (798px <= width < 1178px) {
    #etk-tp .etk-tp-t:not(.is-salt) { --etk-tp-min: 1048px; }
    #etk-tp .etk-tp-t.is-salt       { --etk-tp-min: 1004px; }
    #etk-tp .etk-tp-t col.etk-c-kim { visibility: collapse; width: 0; }
    #etk-tp .etk-tp-t :is(th.etk-h-kim, td.etk-a-kim) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-tp .etk-tp-t .etk-alt2--kim { display: inline; }
}
/* D2 — Kanal düşer → Tür 2. satırı. Kalan sabit 704 + 220 = 924. */
@container etkkap (798px <= width < 1058px) {
    #etk-tp .etk-tp-t:not(.is-salt) { --etk-tp-min: 924px; }
    #etk-tp .etk-tp-t.is-salt       { --etk-tp-min: 880px; }
    #etk-tp .etk-tp-t col.etk-c-kanal { visibility: collapse; width: 0; }
    #etk-tp .etk-tp-t :is(th.etk-h-kanal, td.etk-a-kanal) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-tp .etk-tp-t .etk-alt2--kanal { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
}
/* D3 — Başarılı + Hatalı düşer → Satır 2. satırı; Satır 56 → 148. Kalan sabit 664 + 220 = 884. */
@container etkkap (798px <= width < 934px) {
    #etk-tp .etk-tp-t:not(.is-salt) { --etk-tp-min: 884px; }
    #etk-tp .etk-tp-t.is-salt       { --etk-tp-min: 840px; }
    #etk-tp .etk-tp-t col.etk-c-satir { width: 148px; }
    #etk-tp .etk-tp-t col:is(.etk-c-bas, .etk-c-hat) { visibility: collapse; width: 0; }
    #etk-tp .etk-tp-t :is(th.etk-h-bas, td.etk-a-bas, th.etk-h-hat, td.etk-a-hat) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-tp .etk-tp-t .etk-alt2--sonuc { display: block; overflow-wrap: normal; }
}
/* D4 — Ne zaman düşer → Kapsam 2. satırı (Kim'in yanına). Kalan sabit 568 + 220 = 788; kart eşiği 798. */
@container etkkap (798px <= width < 894px) {
    #etk-tp .etk-tp-t:not(.is-salt) { --etk-tp-min: 788px; }
    #etk-tp .etk-tp-t.is-salt       { --etk-tp-min: 744px; }
    #etk-tp .etk-tp-t col.etk-c-zaman { visibility: collapse; width: 0; }
    #etk-tp .etk-tp-t :is(th.etk-h-zaman, td.etk-a-zaman) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-tp .etk-tp-t .etk-alt2--zaman { display: inline; }
}
/* Kart — kap < 798: aynı <tr> ızgaraya dizilir (ikinci render yolu yok). Kim, Kapsam'ın 2. satırındadır;
   Başarılı / Hatalı, Satır'ın yanındadır. `height: auto` ŞART (hücre tabanı kartta her hücrede tekrarlanırdı). */
@container etkkap (width < 798px) {
    #etk-tp .peron-table--fixed.etk-tp-t { display: block; width: auto; min-width: 0; table-layout: auto; }
    #etk-tp .etk-tp-t > colgroup, #etk-tp .etk-tp-t > thead { display: none; }
    #etk-tp .etk-tp-t > tbody { display: block; }
    #etk-tp .etk-tp-t > tbody > tr { display: block; }
    #etk-tp .etk-tp-t > tbody > tr[data-rk] {
        box-sizing: border-box; display: grid; align-items: center;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "no tur durum" "kapsam kapsam kapsam" "kanal kanal zaman" "satir satir eylem";
        gap: 3px 8px; margin: 0 0 6px; padding: 8px 10px;
        border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); box-shadow: none;
    }
    #etk-tp .etk-tp-t > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0;
        text-align: left; font-size: var(--m-fs-sm); line-height: 1.35; background: transparent;
    }
    #etk-tp .etk-tp-t > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); display: inline; margin-right: 4px;
        font-size: var(--m-fs-micro); font-weight: 600; letter-spacing: .02em; color: var(--text-muted);
    }
    #etk-tp .etk-tp-t > tbody > tr > td:is(.etk-nil, .etk-a-kim, .etk-a-bas, .etk-a-hat) { display: none; }
    #etk-tp .etk-tp-t td.etk-a-no     { grid-area: no; }
    #etk-tp .etk-tp-t td.etk-a-tur    { grid-area: tur; }
    #etk-tp .etk-tp-t td.etk-a-durum  { grid-area: durum; justify-self: end; }
    #etk-tp .etk-tp-t td.etk-a-kapsam { grid-area: kapsam; }
    #etk-tp .etk-tp-t td.etk-a-kanal  { grid-area: kanal; }
    #etk-tp .etk-tp-t > tbody > tr > td.etk-a-zaman { grid-area: zaman; text-align: right; white-space: nowrap; }
    #etk-tp .etk-tp-t > tbody > tr > td.etk-a-satir { grid-area: satir; white-space: normal; }
    #etk-tp .etk-tp-t > tbody > tr > td.etk-a-eylem { grid-area: eylem; }
    #etk-tp .etk-tp-t .etk-bag.etk-tp-no { margin: -6px -4px; font-size: var(--m-fs-sm); }
    #etk-tp .etk-tp-t .etk-birinci { font-size: var(--m-fs); white-space: normal; overflow-wrap: anywhere; }
    #etk-tp .etk-tp-t td.etk-a-kapsam .etk-birinci { font-weight: 500; }
    #etk-tp .etk-tp-t .etk-ikinci { font-size: var(--m-fs-sm); white-space: normal; overflow-wrap: anywhere; }
    #etk-tp .etk-tp-t .etk-alt2 { font-size: var(--m-fs-sm); }
    #etk-tp .etk-tp-t .etk-alt2--kim { display: inline; }
    #etk-tp .etk-tp-t .etk-alt2--sonuc { display: inline; margin: 0 0 0 8px; }
    #etk-tp .etk-tp-t .etk-kanal { flex-wrap: wrap; row-gap: 2px; }
    #etk-tp .etk-tp-t .etk-kanal__ad { flex: 0 1 auto; font-size: var(--m-fs-sm); font-weight: 500; color: var(--text-secondary); }
    #etk-tp .etk-tp-t .etk-tag { font-size: var(--m-fs-micro); line-height: 16px; }
    #etk-tp .etk-tp-t > tbody > tr.peron-skel-row > td { height: auto; padding: 6px 0; }
}
/* İşlem ayrıntısı (createModal · w-md 760). Satır tablosu: Önce 112 · Sonra 112 · Sonuç 200 = 424 + İlan ≥ 200
   = 624; +38 kutu payı = 662 ≤ 760. İlan adı ve sonuç cümlesi sarar; tutar bölünmez. */
.etk-tp-d col:is(.etk-c-once, .etk-c-sonra) { width: 112px; }
.etk-tp-d col.etk-c-sonuc { width: 200px; }
.peron-modal .peron-table--fixed.etk-tp-d { min-width: 624px; }
.peron-modal .etk-tp-d > thead > tr > th,
.peron-modal .etk-tp-d > tbody > tr > td { padding-left: 8px; padding-right: 8px; }
.peron-modal .etk-tp-d > tbody > tr > td { vertical-align: top; }
.peron-modal .etk-tp-d > tbody > tr > td.etk-a-sonra > b { font-weight: 700; }
.peron-modal .etk-tp-d > tbody > tr > td :is(.etk-ikinci, .etk-ikinci--sar) { overflow: visible; }
.peron-modal .etk-tp-d > tbody > tr.is-hata > td { background: color-mix(in srgb, var(--rose) 7%, var(--card-bg)); }
.peron-modal .etk-tp-d > tbody > tr.is-atla > td.etk-a-sonra { color: var(--text-muted); }
.etk-tp-neden { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--text-secondary); white-space: normal; overflow-wrap: anywhere; }
.etk-tp-d tr.is-hata .etk-tp-neden { color: var(--rose-ink); }

/* Sihirbaz (createModal · w-lg 980; en geniş adım fiyat önizlemesi 904 + 38 = 942). Telefonda YOKTUR. */
.etk-sb { display: flex; flex-direction: column; min-width: 0; }
.etk-sb-turler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; margin: 0 0 10px; }
.etk-sb-grup { padding-top: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.etk-sb-sec { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; }
.etk-sb-tur {
    box-sizing: border-box; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-bg);
    font: inherit; font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.etk-sb-tur:hover { border-color: var(--pri); color: var(--pri-text); }
.etk-sb-tur:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.etk-sb-tur.is-on { border-color: var(--pri); background: var(--pri-light); color: var(--pri-text); }
.etk-sb-acik { min-height: 34px; margin: 0 0 4px; font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); max-width: 72ch; }
.etk-sb-acik > .is-karar { font-weight: 600; color: var(--amber-ink); }
.etk-sb-modlar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; min-width: 0; }
.etk-sb-modlar > .etk-onay { white-space: normal; }
.etk-sb-sonuc__b { margin: 0 0 4px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--text-primary); }
.etk-sb-sonuc__b .is-hata { color: var(--rose-ink); }
@media (min-width: 769px) {
    .etk-sb-turler { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
    /* Adımların yüksekliği farklıdır (ölçüldü 294–448px); dikey ortalanan pencerenin üst kenarı adım değişiminde 77px'e kadar
       oynuyordu. Pencere ÜSTTEN sabitlenir (adım şeridi yerinde kalır); azami yükseklik aynı pay kadar kısalır, alt kenar ekranda kalır.
       Yalnız ≥769px: telefonda sihirbaz yoktur, alt-sheet kuralına dokunulmaz. */
    .peron-modal-overlay > .peron-modal.etk-sb-modal {
        --etk-sb-ust: clamp(0px, 10vh, 88px);
        align-self: flex-start; margin-top: var(--etk-sb-ust); max-height: calc(100vh - 40px - var(--etk-sb-ust));
    }
}

/* ── 2b — Fiyat ───────────────────────────────────────────────────────────────────────── */
/* #etk-fy · .etk-fy-t.is-oneri (liste `oneri = 1` ile istenir). 2a'nın Liste fiyatı · Özel fiyat · Son giden
   kolonları ÜRETİLMEZ (liste Kanal fiyatının, son giden Durum'un 2. satırında; kayıtlı fiyat ipucunda ve kartta);
   yerlerine Maliyet · Önerilen · Katkı gelir. Kolon bütçesi ÖLÇÜLDÜ (en geniş tutar 9.999.999,99; "liste" ve "≥"
   önekleri dahil): Kanal 108 · Maliyet 108 · Kanal fiyatı 116 · Önerilen 108 · Katkı 96 · Durum 148 · Yeni fiyat 140
   (öneriyi yaz 28 + girdi) · Yeni liste 104 = 928 sabit + İlan ≥ 220 = 1148; salt okunur 684 + 220 = 904.
   1440px ekranda (menü açık, kap 1130) varsayılan D1'dir: Kanal etiketi İlan'ın 2. satırında, İlan ~300px.
   `.is-oneri` sınıfı 2a'nın adım kurallarını özgüllükle ezer (o kuralların kolonları bu tabloda yoktur). */
/* Kural düğmesi her genişlikte basılır: telefonda SALT OKUNUR kural listesini açar (form ve yazma denetimi yalnız yazabilen
   kullanıcıda üretilir; telefonda yazan yoktur). Dar ekranda (≤640px) katlanan çubuğun üyesidir: kural kanal başına olduğundan
   kanal süzgeciyle AYNI ölçütle gizlenir — çubuk kapalı VE kanal seçilmemişken görünmez, kanal seçilince hep görünür. */
.etk-arac > .etk-fy-kural-ac { display: inline-flex; height: 36px; white-space: nowrap; }
@media (max-width: 640px) {
    .etk-arac--katla > .etk-fy-kural-ac { justify-self: start; }
    .etk-arac--katla:not(.is-acik) > .etk-alan--kanal.is-vars ~ .etk-fy-kural-ac { display: none; }
}
#etk-fy .etk-fy-t.is-oneri col.etk-c-kanal  { width: 108px; }
#etk-fy .etk-fy-t.is-oneri col.etk-c-mal    { width: 108px; }
#etk-fy .etk-fy-t.is-oneri col.etk-c-kf     { width: 116px; }
#etk-fy .etk-fy-t.is-oneri col.etk-c-oneri  { width: 108px; }
#etk-fy .etk-fy-t.is-oneri col.etk-c-katki  { width: 96px; }
#etk-fy .etk-fy-t.is-oneri col.etk-c-durum  { width: 148px; }
#etk-fy .etk-fy-t.is-oneri:not(.is-salt) col.etk-c-yeni   { width: 140px; }
#etk-fy .etk-fy-t.is-oneri:not(.is-salt) col.etk-c-yliste { width: 104px; }
#etk-fy .etk-fy-t.is-oneri:not(.is-salt) { --etk-fy-min: 1148px; }
#etk-fy .etk-fy-t.is-oneri.is-salt       { --etk-fy-min: 904px; }
#etk-fy .etk-fy-t.is-oneri > tbody > tr > td:is(.etk-a-oneri, .etk-a-kf) > b { font-weight: 700; }
#etk-fy .etk-fy-t.is-oneri > tbody > tr > td.etk-a-katki.is-hata { font-weight: 700; }
#etk-fy .etk-fy-t.is-oneri > tbody > tr > td.etk-a-durum .etk-ikinci > b { font-weight: 600; color: var(--text-secondary); }
.etk-fy-bilinmiyor { font-weight: 600; color: var(--amber-ink); }
#etk-fy .etk-fy-t.is-oneri .etk-ikinci > .etk-yon { margin-right: 4px; font-weight: 600; }
/* İlan 2. satırına inen Kanal etiketi ve Maliyet: aynı satırda, önde (kırpılan uç PERON ürün adıdır). */
#etk-fy .etk-fy-t.is-oneri :is(.etk-alt2--kanal, .etk-alt2--mal) { margin: 0 6px 0 0; overflow: visible; }
#etk-fy .etk-fy-t.is-oneri .etk-alt2--kanal > .etk-tag { vertical-align: baseline; }
#etk-fy .etk-fy-t.is-oneri .etk-alt2--mal.is-karar { font-weight: 600; color: var(--amber-ink); }
#etk-fy .etk-fy-t.is-oneri .etk-alt2--katki.is-hata { color: var(--rose-ink); font-weight: 700; }
#etk-fy .etk-fy-t.is-oneri .etk-alt2--kayit { display: none; }
/* Öneriyi yaz + girdi: düğme 28×28 (yoğun yüzey), girdi kalan yeri alır; önerisi olmayan satırda düğme kapalıdır
   (yer tutar — girdiler satırlar arasında hizalı kalır). */
.etk-fy-yaz { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.etk-fy-oner.etk-ikon-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--text-muted); }
.etk-fy-not { margin: 0 0 8px; max-width: 132ch; font-size: 11px; line-height: 1.45; color: var(--text-muted); }

/* Liste yüksekliği EKRANA bağlıdır: tablo kabı sayfanın KALAN yüksekliğini alır (üstündeki şeritler açılıp kapansa da), sayfalama
   katlamanın üstünde kalır — tek kaydırma tablonun kendi kabındadır. Ortak taban `calc(100vh - 210px)` üstte 210px varsayar; bu
   ekranda kap 303px'te başlıyordu (ölçüldü 1440×900: kap altı 993, sayfalama 993–1033 → önce sayfa sonra tablo kayıyordu).
   Kap 240px'in altına inmez: sığmıyorsa (çok kısa pencere) sayfa yine kayar. Dar ekran ve kısa pencere (≤640px) eski yoldadır. */
@media (min-width: 769px) and (min-height: 641px) {
    #etk-fy { display: flex; flex-direction: column; height: 100%; }
    #etk-fy > :is(.peron-page-header, .etk-fy-ust) { flex: 0 0 auto; }
    /* 1.421.0 — `:not([hidden])` ŞART: yazar kuralı `[hidden]`ı ezer; Mağaza Ürünleri sekmesinde Pazaryeri Fiyatları'nın gövdesi
       (çipler + iskelet tablo) sayfanın altında görünüyordu (1.415.0'dan beri). */
    #etk-fy > #etk-fy-govde:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
    #etk-fy-govde > * { flex: 0 0 auto; }
    #etk-fy-govde > .etk-kap { flex: 0 1 auto; min-height: 240px; max-height: none; }
}

/* D1 — Kanal düşer → İlan 2. satırı (etiket). Kalan sabit 820 + 220 = 1040 (eşik +10); salt okunur 576 + 220 = 796. */
@container etkkap (722px <= width < 1158px) {
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) { --etk-fy-min: 1040px; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) col.etk-c-kanal { visibility: collapse; width: 0; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) :is(th.etk-h-kanal, td.etk-a-kanal) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) .etk-alt2--kanal { display: inline; }
}
@container etkkap (722px <= width < 914px) {
    #etk-fy .etk-fy-t.is-oneri.is-salt { --etk-fy-min: 796px; }
    #etk-fy .etk-fy-t.is-oneri.is-salt col.etk-c-kanal { visibility: collapse; width: 0; }
    #etk-fy .etk-fy-t.is-oneri.is-salt :is(th.etk-h-kanal, td.etk-a-kanal) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-fy .etk-fy-t.is-oneri.is-salt .etk-alt2--kanal { display: inline; }
}
/* D2 — Maliyet düşer → İlan 2. satırı ("maliyet 812,40"). Kalan sabit 712 + 220 = 932: 1280px ekranda (kabın iç
   genişliği 960) Katkı kolonu durur ve hücreler iki satırda kalır. Salt okunur 468 + 220 = 688. */
@container etkkap (722px <= width < 1050px) {
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) { --etk-fy-min: 932px; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) col.etk-c-mal { visibility: collapse; width: 0; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) :is(th.etk-h-mal, td.etk-a-mal) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) .etk-alt2--mal { display: inline; }
}
@container etkkap (722px <= width < 806px) {
    #etk-fy .etk-fy-t.is-oneri.is-salt { --etk-fy-min: 688px; }
    #etk-fy .etk-fy-t.is-oneri.is-salt col.etk-c-mal { visibility: collapse; width: 0; }
    #etk-fy .etk-fy-t.is-oneri.is-salt :is(th.etk-h-mal, td.etk-a-mal) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-fy .etk-fy-t.is-oneri.is-salt .etk-alt2--mal { display: inline; }
}
/* D3 — Katkı düşer → Önerilen 3. satırı ("katkı 182,35"). Kalan sabit 616 + 220 = 836. */
@container etkkap (722px <= width < 942px) {
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) { --etk-fy-min: 836px; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) col.etk-c-katki { visibility: collapse; width: 0; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) :is(th.etk-h-katki, td.etk-a-katki) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) .etk-alt2--katki { display: block; overflow: visible; }
}
/* D4 — Durum düşer → İlan 3. satırı (durum · zaman · giden). Kalan sabit 468 + 220 = 688; kart eşiği 722. */
@container etkkap (722px <= width < 846px) {
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) { --etk-fy-min: 688px; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) col.etk-c-durum { visibility: collapse; width: 0; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) :is(th.etk-h-durum, td.etk-a-durum) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) td.etk-a-durum { white-space: nowrap; }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) .etk-alt2--durum { display: block; }
}
/* Kart — kap < 722 (2a ile aynı eşik). Üç sayı (Maliyet · Kanal fiyatı · Önerilen) tek sırada, etiketi üstte;
   Katkı altında. Kayıtlı fiyat Durum hücresinde açılır. Yazabilen kullanıcıda (daraltılmış pencere) girdiler altta. */
@container etkkap (width < 722px) {
    #etk-fy .etk-fy-t.is-oneri > tbody > tr[data-rk] {
        grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
        grid-template-areas: "urun urun urun" "kanal durum durum" "mal kf oneri" "katki katki katki";
    }
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) > tbody > tr[data-rk] {
        grid-template-areas: "urun urun urun" "kanal durum durum" "mal kf oneri" "katki katki katki" "yeni yeni yeni" "yliste yliste yliste";
    }
    /* Kanal hücresi kartın üçte birinde mağaza adını kırpıyordu (53px): kartta da etiket + ad İlan'ın 2. satırındadır. */
    #etk-fy .etk-fy-t.is-oneri > tbody > tr > td.etk-a-kanal { display: none; }
    #etk-fy .etk-fy-t.is-oneri .etk-alt2--kanal { display: inline; }
    #etk-fy .etk-fy-t.is-oneri td.etk-a-mal   { grid-area: mal; }
    #etk-fy .etk-fy-t.is-oneri td.etk-a-oneri { grid-area: oneri; }
    #etk-fy .etk-fy-t.is-oneri td.etk-a-katki { grid-area: katki; }
    #etk-fy .etk-fy-t.is-oneri > tbody > tr > td:is(.etk-a-mal, .etk-a-kf, .etk-a-oneri) { white-space: nowrap; font-size: var(--m-fs); }
    #etk-fy .etk-fy-t.is-oneri > tbody > tr > td:is(.etk-a-mal, .etk-a-kf, .etk-a-oneri)[data-lbl]::before { display: block; margin: 0; }
    #etk-fy .etk-fy-t.is-oneri > tbody > tr > td:is(.etk-a-mal, .etk-a-kf, .etk-a-oneri) .etk-ikinci {
        margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: var(--m-fs-xs);
    }
    #etk-fy .etk-fy-t.is-oneri > tbody > tr > td.etk-a-katki { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
    #etk-fy .etk-fy-t.is-oneri .etk-alt2--kayit { display: inline; margin-left: auto; overflow: visible; font-size: var(--m-fs-sm); }
    #etk-fy .etk-fy-t.is-oneri .etk-fy-yaz { flex: 1 1 0; }
}
/* Yazabilen kullanıcının daraltılmış penceresi: iki girdi tek sırada (kart 200px → 150px). */
@container etkkap (480px <= width < 722px) {
    #etk-fy .etk-fy-t.is-oneri:not(.is-salt) > tbody > tr[data-rk] {
        grid-template-areas: "urun urun urun" "kanal durum durum" "mal kf oneri" "katki katki katki" "yeni yeni yliste";
    }
}
/* Kural paneli (createModal · w-md 760). Liste: Kapsam 128 · Komisyon 72 · Kargo 96 · Marj 96 · Yuvarlama 84 ·
   eylem 76 = 552 + Ad ≥ 140 = 692; +38 = 730 ≤ 760 (96vw'ye kilitli 738px modalda iç genişlik 702). Yazamayan
   kullanıcıda (.is-salt) eylem kolonu ve form ÜRETİLMEZ. */
.etk-kr-t col.etk-c-kapsam { width: 128px; }
.etk-kr-t col.etk-c-kom    { width: 72px; }
.etk-kr-t col:is(.etk-c-kargo, .etk-c-marj) { width: 96px; }
.etk-kr-t col.etk-c-yuv    { width: 84px; }
.etk-kr-t col.etk-c-eylem  { width: 76px; }
.peron-modal .peron-table--fixed.etk-kr-t { min-width: 692px; }
.peron-modal .peron-table--fixed.etk-kr-t.is-salt { min-width: 616px; }
.peron-modal .etk-kr-t > thead > tr > th,
.peron-modal .etk-kr-t > tbody > tr > td { padding-left: 8px; padding-right: 8px; }
.peron-modal .etk-kr-t > tbody > tr > td { vertical-align: middle; }
.peron-modal .etk-kr-t > tbody > tr > td.etk-a-ad { overflow: hidden; }
.peron-modal .etk-kr-t > tbody > tr.is-on > td { background: var(--pri-light); }
.peron-modal .etk-kr-t > tbody > tr > td.etk-a-eylem { white-space: nowrap; text-align: right; }
.peron-modal .etk-kr-t > tbody > tr > td.etk-a-eylem .etk-ikon-btn + .etk-ikon-btn { margin-left: 6px; }
.etk-kr-bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 6px; }
.etk-kr-bas > h4 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.etk-kr-bas > span { font-size: 11px; line-height: 1.4; color: var(--text-muted); }
/* Desi tablosu: en çok 10 satır (desi üst sınırı · tutar). */
.etk-kr-desi { flex: 1 1 100%; display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.etk-kr-desi > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.etk-kr-desi > li > span { font-size: 11px; color: var(--text-muted); }
.etk-kr-desi .etk-git, .etk-kr-bas .etk-git { margin: 0; }
.etk-kr-acik { margin: 0 0 4px; max-width: 86ch; font-size: 11px; line-height: 1.5; color: var(--text-secondary); }

/* ── 2b — Yayında değil ───────────────────────────────────────────────────────────────── */
/* #etk-es · .etk-es-t.is-yayin (dördüncü sekme; kanal seçilmeden boş durum). Sabit 448 (seçim 36 · Barkod 132 ·
   Marka 112 · Durum 124 · eylem 44) + Ürün ve Hazır değil ≥ 220'şer = 888. Yazamayan kullanıcıda seçim yoktur
   (taban 852); eylem (aç) durur — pencere salt okunur açılır. Kart eşiği sekmelerle AYNI (722). */
.etk-es-t.is-yayin col.etk-c-barkod { width: 132px; }
.etk-es-t.is-yayin col.etk-c-marka  { width: 112px; }
.etk-es-t.is-yayin col.etk-c-durum  { width: 124px; }
#etk-es .etk-es-t.is-yayin:not(.is-salt) { --etk-es-min: 888px; }
#etk-es .etk-es-t.is-yayin.is-salt       { --etk-es-min: 852px; }
#etk-es .etk-es-t.is-yayin > tbody > tr > td:is(.etk-a-barkod, .etk-a-marka) { overflow: hidden; font-variant-numeric: tabular-nums; }
#etk-es .etk-es-t.is-yayin > tbody > tr > td.etk-a-neden { overflow: hidden; }
#etk-es .etk-es-t.is-yayin :is(.etk-alt2--barkod, .etk-alt2--marka) { margin-top: 0; }
#etk-es .etk-es-t.is-yayin .etk-alt2--barkod + .etk-alt2--marka::before { content: '\00B7'; margin: 0 5px; }
/* "Gönder" çubuğunun yeri araç satırında AYRILIR: kanal seçiliyken çubuk gizliyken de yer tutar ve genişliği sabittir (216px) →
   satır seçince araç çubuğu ikinci sıraya taşmaz, tablo aşağı itilmez (ölçüldü: 46px itiyordu). Yer bu sekmenin süzgeçlerinden
   alındı: Kanal 220 → 176 · Arama 240 → 200 · Ürün türü / Durum 220 → 144 (1440px, menü açık: 840 + 216 + ara 60 = 1116 ≤ kap 1130).
   Sınır notu çubuğun içinde üç satıra kadar sarar (10px / 12px = 36px: çubuk denetim yüksekliğini aşmaz). Yalnız ≥769px: dar
   pencerede çubuk zaten gizlidir. */
@media (min-width: 769px) {
    #etk-es .etk-arac:has(> .etk-alan--yayin) > .etk-alan--kanal .peron-select { width: 176px; }
    #etk-es .etk-arac:has(> .etk-alan--yayin) > .etk-alan--ara .peron-input { width: 200px; }
    #etk-es .etk-arac > .etk-alan--yayin .peron-select { width: 144px; }
    #etk-es .etk-arac > .etk-alan--yayin ~ .etk-toplu { box-sizing: border-box; flex: 0 0 216px; flex-wrap: nowrap; justify-content: flex-end; height: 36px; }
    #etk-es .etk-arac > .etk-alan--kanal:not(.is-vars) ~ .etk-alan--yayin ~ .etk-toplu[hidden] { display: flex; visibility: hidden; }
    #etk-es .etk-arac > .etk-alan--yayin ~ .etk-toplu > .etk-fy-ozet {
        flex: 1 1 0; min-width: 0; max-height: 36px; overflow: hidden; font-size: 10px; line-height: 12px; text-align: right; overflow-wrap: anywhere;
    }
    #etk-es .etk-arac > .etk-alan--yayin ~ .etk-toplu > .peron-btn { flex: 0 0 auto; min-width: 104px; }
}
/* Hazır değil: ilk neden tek satır (kırpılır, tamı açılınca); "+N" 28px hedef, satırı büyütmez (negatif pay). */
.etk-nd { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; }
.etk-nd__ilk { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; color: var(--text-primary); }
.etk-nd__ilk.is-bilgi { color: var(--text-muted); }
.etk-nd__ilk.is-hata { color: var(--rose-ink); }
.etk-nd__ac {
    box-sizing: border-box; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; min-height: 28px; margin: -5px -4px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: transparent;
    font: inherit; font-size: 11px; font-weight: 700; color: var(--pri-text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.etk-nd__ac:hover { background: var(--pri-light); }
.etk-nd__ac:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
.etk-nd__tum { flex: 1 1 100%; min-width: 0; margin: 2px 0 0; padding: 0; list-style: none; }
.etk-nd__tum[hidden] { display: none; }
.etk-nd__tum > li { padding: 2px 0; border-top: 1px solid var(--border-light); font-size: 11px; line-height: 1.4; color: var(--text-secondary); white-space: normal; overflow-wrap: anywhere; }
.etk-nd.is-acik > .etk-nd__ilk { flex: 1 1 0; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.etk-nd.is-acik { align-items: flex-start; }
.etk-nd.is-acik > .etk-nd__ac { margin-top: 0; margin-bottom: 0; }

/* D1 — Marka düşer → Ürün 2. satırı. Kalan sabit 336 + 440 = 776 (eşik +10). */
@container etkkap (722px <= width < 898px) {
    #etk-es .etk-es-t.is-yayin:not(.is-salt) { --etk-es-min: 776px; }
    #etk-es .etk-es-t.is-yayin.is-salt       { --etk-es-min: 740px; }
    #etk-es .etk-es-t.is-yayin col.etk-c-marka { visibility: collapse; width: 0; }
    #etk-es .etk-es-t.is-yayin :is(th.etk-h-marka, td.etk-a-marka) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-es .etk-es-t.is-yayin .etk-alt2--marka { display: inline; }
}
/* D2 — Barkod düşer → Ürün 2. satırı (Marka'nın önüne). Kalan sabit 204 + 440 = 644. */
@container etkkap (722px <= width < 786px) {
    #etk-es .etk-es-t.is-yayin:not(.is-salt) { --etk-es-min: 644px; }
    #etk-es .etk-es-t.is-yayin.is-salt       { --etk-es-min: 608px; }
    #etk-es .etk-es-t.is-yayin col.etk-c-barkod { visibility: collapse; width: 0; }
    #etk-es .etk-es-t.is-yayin :is(th.etk-h-barkod, td.etk-a-barkod) { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #etk-es .etk-es-t.is-yayin .etk-alt2--barkod { display: inline; }
}
/* Kart — kap < 722: ürün + aç · durum · nedenler. Barkod ve Marka Ürün'ün 2. satırındadır. */
@container etkkap (width < 722px) {
    #etk-es .etk-es-t.is-yayin > tbody > tr[data-rk] { grid-template-areas: "urun eylem" "durum durum" "neden neden"; }
    #etk-es .etk-es-t.is-yayin > tbody > tr[data-rk]:has(> td.peron-sel-cell) {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas: "sec urun eylem" "sec durum durum" "sec neden neden";
    }
    #etk-es .etk-es-t.is-yayin > tbody > tr > td:is(.etk-a-barkod, .etk-a-marka) { display: none; }
    #etk-es .etk-es-t.is-yayin td.etk-a-durum { grid-area: durum; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
    #etk-es .etk-es-t.is-yayin td.etk-a-durum .etk-ikinci { margin: 0; }
    #etk-es .etk-es-t.is-yayin td.etk-a-neden { grid-area: neden; }
    #etk-es .etk-es-t.is-yayin :is(.etk-alt2--barkod, .etk-alt2--marka) { display: inline; }
    #etk-es .etk-es-t.is-yayin .etk-nd__ilk { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
    #etk-es .etk-es-t.is-yayin .etk-nd__tum > li { font-size: var(--m-fs-sm); }
}

/* ── 2b — Ürün modalı ─────────────────────────────────────────────────────────────────── */
/* Ürün gönder (createModal · w-lg 980): form 560 + ray 288 + ara 20 = 868; +38 = 906 → w-lg. Kap ≥ 820px: solda
   bölümler, sağda yapışkan hazırlık rayı (künye + eksikler + kanal yanıtı); dar kapta ray ÜSTTE, tek sütun.
   Telefonda yalnız ray basılır (salt okunur özet). */
.etk-ug { container: etkug / inline-size; min-width: 0; }
.etk-ug__d { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.etk-ug-ray { order: -1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.etk-ug-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.etk-ug-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin: 0 0 10px; font-size: 12px; line-height: 1.4; }
.etk-ug-ust > .etk-ikinci { margin: 0; overflow: visible; white-space: normal; }
.etk-ug-b { min-width: 0; }
.etk-ug-h {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted);
}
.etk-ug-h > small { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.etk-ug-h > small.is-hata { font-weight: 600; color: var(--rose-ink); }
.etk-ug-b .etk-es-form { margin: 0; }
.etk-ug-b .etk-ac { margin: 10px 0 0; }
.etk-ug-ray > .etk-git { align-self: flex-start; margin: -4px 0; }
.etk-ug-bekle > .etk-git { margin: -6px 0; }
.etk-ug-b .etk-es-alan .peron-form-label { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.etk-ug-b .peron-form-label .req { margin-left: 3px; color: var(--rose-ink); }
.etk-ug-b .etk-es-alan textarea.peron-input { height: auto; min-height: 84px; }
.etk-ug-b .etk-es-alan .peron-input.is-hata { border-color: var(--rose); }
.etk-ug-b .etk-es-alan :is(.peron-input, .peron-select)[aria-invalid="true"] { border-color: var(--rose); }
.etk-ug-uc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 12px; }
.etk-ug-b .etk-es-form + .etk-ug-uc { margin-top: 10px; }
.etk-ug-b .etk-kritik { margin: 8px 0 0; }
.etk-sayac { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-sayac.is-hata { font-weight: 700; color: var(--rose-ink); }
/* Seçili değer satırı (kategori · marka): yol metni sarar, "Değiştir" 28px. */
.etk-ug-secili {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin: 0 0 6px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; line-height: 1.4; color: var(--text-primary);
}
.etk-ug-secili > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.etk-ug-secili > span > b { font-weight: 700; }
.etk-ug-secili .peron-btn.sm { height: 28px; }
/* Kategori gezgini: üstte yol (yukarı çıkış), altta liste. Dal (alt kategorisi olan) SEÇİLMEZ, içine girilir;
   yaprak seçilir (.etk-es-sonuc__s 2a sınıfıdır: .is-on seçili). */
.etk-kt-yol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; min-width: 0; margin: 6px 0 4px; font-size: 11px; color: var(--text-muted); }
.etk-kt-yol > .etk-git { min-height: 28px; margin: 0; padding: 0 6px; font-size: 11px; }
.etk-kt-yol > i { font-style: normal; color: var(--text-muted); }
.etk-kt-yol > b { padding: 0 6px; font-weight: 700; color: var(--text-primary); }
.etk-es-sonuc__s.is-dal { color: var(--text-secondary); }
.etk-es-sonuc__s.is-dal::after { content: '\203A'; flex: 0 0 auto; margin-left: auto; font-weight: 700; color: var(--text-muted); }
.etk-kt-say { flex: 0 0 auto; font-size: 10.5px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.etk-ug-bekle { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.etk-ug-bekle.is-karar { color: var(--amber-ink); font-weight: 600; }
/* Görseller: salt okunur küçük resim şeridi; https olmayan işaretli. */
.etk-gs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.etk-gs > li {
    box-sizing: border-box; position: relative; width: 56px; height: 56px; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--border-light);
}
.etk-gs > li > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.etk-gs > li.is-hata { border-color: var(--rose); }
.etk-gs__not {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 2px;
    background: var(--card-bg); font-size: 9px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--rose-ink);
}
/* 1.432.0 — ilana özgü görsel listesi: kutu 76px, altında üç 24px düğme (öne al · çıkar · geriye al); adresle ekleme satırı. */
.etk-gs.is-duzen > li { width: 76px; height: 100px; }
.etk-gs.is-duzen > li > img { height: 74px; }
.etk-gs.is-duzen .etk-gs__not { bottom: 26px; }
.etk-gs__e { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 2px; padding: 1px; background: var(--card-bg); }
.etk-gs__e > button {
    box-sizing: border-box; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; padding: 0;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-bg);
    font: inherit; font-size: 13px; font-weight: 700; line-height: 1; color: var(--text-secondary); cursor: pointer;
}
.etk-gs__e > button:hover:not(:disabled) { border-color: var(--pri); color: var(--pri-text); }
.etk-gs__e > button[data-gs-sil]:hover { border-color: var(--rose); color: var(--rose-ink); }
.etk-gs__e > button:disabled { opacity: .4; cursor: default; }
.etk-gs-ekle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; min-width: 0; }
.etk-gs-ekle > .peron-input { box-sizing: border-box; flex: 1 1 220px; min-width: 0; max-width: 100%; }
.etk-gs-ekle > small { font-size: 10.5px; color: var(--text-muted); }
/* Onay adımı: kanaldaki hâl ↔ gönderilecek (kabında kayar, sayfa kaymaz). */
.etk-ug-fark-kap { margin: 8px 0 0; }
.etk-ug-fark { min-width: 420px; }
.etk-ug-fark col.etk-ug-fark__a { width: 120px; }
.etk-ug-fark td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.etk-ug-fiyat-not { margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.etk-ug-fiyat-not > b { font-weight: 700; color: var(--text-primary); }
.etk-ug-fiyat-not > b.is-hata { color: var(--rose-ink); }
/* Hazırlık rayı: künye tek sütun; eksikler tek tek, her biri ilgili alana götüren 28px düğmeyle. */
.etk-ug-ray .etk-kunye { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.etk-ug-ray .etk-kunye__s { grid-template-columns: 64px minmax(0, 1fr); }
.etk-ug-ray .etk-kunye__s > dd { font-variant-numeric: tabular-nums; }
.etk-ug-ray .etk-kutu { margin: 0; }
.etk-hz-kap { min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); }
.etk-hz-kap.is-hazir { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: color-mix(in srgb, var(--green) 6%, var(--card-bg)); }
.etk-hz-bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin: 0 0 4px; }
.etk-hz-bas > b { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.etk-hz-bas > span { font-size: 11px; font-weight: 700; color: var(--rose-ink); font-variant-numeric: tabular-nums; }
.etk-hz-kap.is-hazir .etk-hz-bas > span { color: var(--green-ink); }
.etk-hz { margin: 0; padding: 0; list-style: none; }
.etk-hz > li {
    box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 35px; padding: 3px 0;
    border-top: 1px solid var(--border-light); font-size: 11.5px; line-height: 1.4; color: var(--text-primary);
}
.etk-hz > li:first-child { border-top: 0; }
.etk-hz > li > span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.etk-hz > li.is-bilgi > span { color: var(--text-muted); }
.etk-hz__git {
    box-sizing: border-box; flex: 0 0 auto; min-height: 28px; margin: 0 -4px 0 0; padding: 0 6px;
    border: 0; border-radius: var(--r-sm); background: transparent;
    font: inherit; font-size: 11px; font-weight: 700; color: var(--pri-text); white-space: nowrap; cursor: pointer;
}
.etk-hz__git:hover { background: var(--pri-light); }
.etk-hz__git:focus-visible { outline: 2px solid var(--pri); outline-offset: -2px; }
@container etkug (min-width: 480px) {
    .etk-ug-uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container etkug (min-width: 820px) {
    .etk-ug__d { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 20px; align-items: start; }
    .etk-ug-form { grid-column: 1; grid-row: 1; }
    .etk-ug-ray { grid-column: 2; grid-row: 1; position: sticky; top: 0; }
    .etk-ug__d > .etk-ug-ray:only-child { grid-column: 1 / -1; position: static; }
}

/* Stok kartı formu: Ölçüler grubundan sonra Barkod · Marka · Desi (mevcut form sınıfları; yeni görsel dil yok).
   ≤640px mevcut `.peron-form-row` kuralı tek sütuna indirir; girdi puntosu mobil iOS kalkanından gelir. */
@media (min-width: 641px) {
    .peron-form-row.m-tic-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px; }
}
.m-tic-row .peron-input { box-sizing: border-box; min-width: 0; }
.m-tic-row .m-tic-desi { text-align: right; font-variant-numeric: tabular-nums; }

/* 1.440.0 — hizmet kartının gider hesabı seçimi (Ürün Türü altında; mevcut form sınıfları). */
.m-hiz-hesap { display: grid; gap: 4px; margin: 2px 0 8px; box-sizing: border-box; max-width: 100%; }
.m-hiz-hesap .peron-label { margin: 0; }
.m-hiz-hesap .peron-select { box-sizing: border-box; width: 100%; min-width: 0; }
.m-hiz-not { font-size: 11px; line-height: 1.45; color: var(--text-muted); }

/* ── Tablet/telefon: ürün modalı girdileri 16px; yatay telefon da telefondur. ── */
@media (max-width: 768px), (pointer: coarse) and (max-height: 640px) {
    .etk-ug-b .etk-es-alan textarea.peron-input { font-size: 16px; }
    .etk-ug-b .etk-es-alan textarea.peron-input { height: auto; }
}

/* ── 2b — Stok kartı aç (Eşleşme bekleyen · createModal varsayılan 520px) ──────────────────────────── */
/* Üç seçim tek sırada (Birim 88 · Ürün türü 217 — en uzun seçenek sığar · Kategori 155), ipucu altlarında tam satır: iki sütunlu ızgarada Kategori tek başına
   ikinci sıraya düşüyor, ipucu 236px'te iki satıra sarıyor ve pencerenin sağ yarısı boş kalıyordu. ≤640px tek sütun (taban kural). */
@media (min-width: 641px) {
    .etk-es-kart .etk-es-form { grid-template-columns: 88px minmax(0, 1.4fr) minmax(0, 1fr); }
    .etk-es-kart .etk-es-form > small { margin-top: -4px; }
}
/* Onay penceresi 2a sınıflarını kullanır (.etk-es-ozet · .etk-es-form · .etk-es-alan · .etk-kutu); seçimler dokunmatikte
   2a kuralıyla 16px'tir. Yeni olan yalnız: en çok 50 satırlık liste KENDİ kabında kayar, açılamayan / atlanan satırın nedeni gül. */
.etk-es-kart-liste { max-height: min(232px, 36vh); overflow-y: auto; }
.etk-es-ozet > li > span.is-hata { color: var(--rose-ink); }

/* ── 2b — Ortak (son söz): modal içi tablolar dar kapta karta döner. Taban min-width kurallarından SONRA durur. ── */
/* Kart — kap < 700 (daraltılmış pencere, alt-sheet): aynı <tr> ızgaraya dizilir. */
@container etkon (width < 700px) {
    .peron-modal .peron-table.peron-table--fixed:is(.etk-fy-on, .etk-tp-d, .etk-kr-t) { display: block; width: auto; min-width: 0; table-layout: auto; }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > :is(colgroup, thead) { display: none; }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody,
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody > tr { display: block; }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody > tr {
        box-sizing: border-box; display: grid; align-items: baseline; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3px 10px; padding: 8px 10px; border-top: 1px solid var(--border-light);
    }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody > tr:first-child { border-top: 0; }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody > tr > td {
        display: block; min-width: 0; height: auto; padding: 0; border: 0; text-align: left;
        font-size: var(--m-fs-sm); line-height: 1.35; white-space: normal;
    }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody > tr > td[data-lbl]::before {
        content: attr(data-lbl); display: inline; margin-right: 4px;
        font-size: var(--m-fs-micro); font-weight: 600; letter-spacing: .02em; color: var(--text-muted);
    }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody > tr > td .etk-ikinci { display: inline; margin: 0 0 0 6px; font-size: var(--m-fs-sm); }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody > tr > td:is(.etk-a-urun, .etk-a-uyari, .etk-a-sonuc, .etk-a-ad) { grid-column: 1 / -1; }
    .peron-modal :is(.etk-fy-on, .etk-tp-d, .etk-kr-t) > tbody > tr > td.etk-a-urun .etk-ikinci { display: block; margin: 1px 0 0; }
    .peron-modal :is(.etk-fy-on, .etk-tp-d) > tbody > tr > td.etk-nil { display: none; }
    /* Kartta renk hücreye değil SATIRA verilir (hücreler arası boşlukta zemin parçalanmasın). */
    .peron-modal :is(.etk-fy-on, .etk-tp-d) > tbody > tr:is(.is-hata, .is-uyari, .is-kritik) > td { background: transparent; }
    .peron-modal .etk-fy-on > tbody > tr.is-uyari { background: color-mix(in srgb, var(--amber) 8%, var(--card-bg)); }
    .peron-modal .etk-fy-on > tbody > tr.is-kritik { background: color-mix(in srgb, var(--rose) 8%, var(--card-bg)); }
    .peron-modal .etk-tp-d > tbody > tr.is-hata { background: color-mix(in srgb, var(--rose) 7%, var(--card-bg)); }
    .peron-modal .etk-kr-t > tbody > tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "ad ad eylem" "kapsam kapsam kom" "kargo marj yuv"; }
    .peron-modal .etk-kr-t > tbody > tr > td.etk-a-ad     { grid-area: ad; grid-column: auto; font-size: var(--m-fs); }
    .peron-modal .etk-kr-t > tbody > tr > td.etk-a-eylem  { grid-area: eylem; }
    .peron-modal .etk-kr-t > tbody > tr > td.etk-a-kapsam { grid-area: kapsam; }
    .peron-modal .etk-kr-t > tbody > tr > td.etk-a-kom    { grid-area: kom; }
    .peron-modal .etk-kr-t > tbody > tr > td.etk-a-kargo  { grid-area: kargo; }
    .peron-modal .etk-kr-t > tbody > tr > td.etk-a-marj   { grid-area: marj; }
    .peron-modal .etk-kr-t > tbody > tr > td.etk-a-yuv    { grid-area: yuv; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   1.402.2 — GÜNLÜK AKTİVİTE MODALI · TOPLU İŞLEMLER · SATINALMA "SİPARİŞİ GÖNDER" GRUBU
   Renkler yalnız token. Modal genişliği ≥769px'tedir (telefonda createModal alt sayfadır).
   Kolon genişlikleri `<col>` sınıflarındadır (satır içi stil medya sorgusunu ezer).
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Stok Hareketleri (eski Günlük Aktivite modalı) ─────────────────────────────────────────────────
   1.429.0 — modal SAYFAYA taşındı (`peron-mod-stok-aktivite.js`; süzgeç çubuğu `peron-stok-aktivite.css`'te). Modal
   genişliği ve eski süzgeç satırı kuralları (stk-act-modal · -suzgec · -tarih · -sec · -ara · -ozet-not) hiçbir dosyada
   kullanılmadığı için silindi; aşağıdakileri sayfa kullanır.
   Tablo: her hücre iki kademe (üst asıl bilgi, alt yardımcı) → satır boyu sabit; not en çok iki satır. */
.stk-act-typebar { flex: 0 0 auto; }
.stk-act-typebar .peron-seg-opt { min-height: 28px; padding: 0 12px; font-size: 12px; }

.stk-act-ozet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; min-height: 18px; margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.stk-act-ozet:empty { display: none; }
.stk-act-ozet-ana { font-size: 13px; color: var(--text-primary); }
.stk-act-ozet-ana b { font-weight: 700; }
.stk-act-ozet-k { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.stk-act-ozet-k > i { flex: 0 0 auto; align-self: center; width: 7px; height: 7px; border-radius: var(--r-full); }
.stk-act-ozet-k.is-in > i { background: var(--green); }
.stk-act-ozet-k.is-out > i { background: var(--amber); }
.stk-act-ozet-k b { font-weight: 700; color: var(--text-primary); }
.stk-act-ozet-k > span::before { content: '·'; margin-right: 6px; color: var(--text-muted); }

.stk-act-body { min-height: 120px; }
.stk-act-body[aria-busy="true"] .peron-table-wrap { opacity: .55; }
.stk-act-yukleniyor { height: 120px; }
.stk-act-bos { padding: 36px 16px; }
.stk-act-bos .peron-btn { margin-top: 10px; }
.stk-act-body .peron-table-wrap { min-height: 140px; max-height: calc(100vh - 330px); max-height: calc(100dvh - 330px); }
.stk-act-table { min-width: 874px; }
col.stk-act-k-tarih { width: 98px; }
col.stk-act-k-tur   { width: 104px; }
col.stk-act-k-mik   { width: 116px; }
col.stk-act-k-cari  { width: 190px; }
col.stk-act-k-yapan { width: 112px; }
/* Dar kapta (1024px ekranda pencere ≈ 940px) sabit kolonlar daralır; açılan yer ürün adı ile nota gider. */
.stk-act-body { container-type: inline-size; container-name: aktkap; }
@container aktkap (max-width: 1000px) {
    col.stk-act-k-tur   { width: 96px; }
    col.stk-act-k-cari  { width: 150px; }
    col.stk-act-k-yapan { width: 88px; }
}
.stk-act-table > tbody > tr > td { vertical-align: middle; line-height: 1.3; }
.stk-act-ust, .stk-act-alt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-act-alt { margin-top: 1px; font-size: 10.5px; color: var(--text-muted); }
.stk-act-ad { font-weight: 600; }
.stk-act-kod, .stk-act-c-tarih { font-variant-numeric: tabular-nums; }
.stk-act-c-tarih .stk-act-ust { color: var(--text-secondary); }
.stk-act-mik { font-weight: 700; font-variant-numeric: tabular-nums; }
.stk-act-mik.is-in { color: var(--green-ink); }
.stk-act-mik.is-out { color: var(--amber-ink); }
.stk-act-mik i { font-style: normal; font-weight: 400; color: var(--text-muted); }
.stk-act-table > tbody > tr > td.stk-act-c-yapan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.stk-act-c-not { color: var(--text-secondary); }
.stk-act-nottx { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.stk-act-nottx b { font-weight: 600; color: var(--text-primary); }

.stk-act-sayfa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.stk-act-sayfa[hidden] { display: none; }
.stk-act-sayfa b { color: var(--text-primary); }
.stk-act-sayfa-dugme { display: inline-flex; align-items: center; gap: 8px; }
/* Alt sayfada (≤768px) tablo kendi kabında kayar: özet ve sayfalayıcı gövdeyle birlikte uzaklaşmaz.
   Başlık orada 11px ve geniş harf aralıklıdır; iki kademeli başlıkların sığması için kolonlar genişler
   (tablo o bantta zaten kendi kabında yatay kayar). */
@media (max-width: 768px) {
    .stk-act-body .peron-table-wrap { max-height: 58vh; max-height: 58dvh; }
    .stk-act-table { min-width: 920px; }
    col.stk-act-k-tur { width: 112px; }
    col.stk-act-k-mik { width: 140px; }
    col.stk-act-k-cari { width: 160px; }
}

/* ── Toplu İşlemler (stok) — ekran içi düzenleme tablosu ───────────────────────────────────────────
   Hücre denetimleri `.peron-input` / `.peron-select`tir: boy ve punto tablo yoğunluk tokenlarından gelir.
   🔴 `.peron-table--fixed td .peron-select` genişliği %100 yapar; para birimi seçicisi kimlikli seçiciyle
      (1,2,0) sabitlenir — yoksa fiyat kutusunu hücreden iter (belgeli teslim modalında yaşandı). */
#stock-shell[hidden] { display: none; }
#bulk-shell .bulk-bas { display: flex; align-items: center; gap: 12px; min-width: 0; }
#bulk-shell .bulk-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#bulk-shell .bulk-sifirla { color: var(--rose-ink); }
#bulk-shell .bulk-not { margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--amber-border); border-radius: var(--r-md); background: var(--peach-surface); font-size: 12px; color: var(--amber-ink); }
#bulk-shell .bulk-not[hidden] { display: none; }
#bulk-shell .bulk-arac { gap: 8px; }
#bulk-shell .bulk-ara { flex: 1 1 220px; max-width: 340px; min-width: 0; }
#bulk-shell .bulk-kat { flex: 0 1 220px; width: auto; min-width: 150px; }
#bulk-shell .bulk-toplam { display: inline-flex; align-items: baseline; gap: 8px; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
#bulk-shell .bulk-toplam-k { font-size: 11px; color: var(--text-muted); }
#bulk-shell .bulk-toplam b { font-size: 13px; font-weight: 700; color: var(--pri-text); }

/* 1.441.0 — Kategori (Kod'un yanında) ve Tedarikçi (fiyatın solunda) kolonları eklendi; ürün adı 1440px'te (kap ≈ 1140px)
   ≥ 230px kalır: 108+104+132+84+140+160+76+92 = 896px sabit.
   🔴 STOK 132 · KDV 76 ÖLÇÜMDÜR: 120/64'e indirildiğinde "1005" → "100(" ve "20" → "2(" KIRPILDI (sayı kutusunun dolgusu +
      döndürme okları; kırpılmış rakam yalandır). Yer para birimi seçicisinden (82 → 70) ve Kategori'den alındı. */
#bulk-shell .bulk-t { min-width: 1110px; }
#bulk-shell col.bulk-k-kod    { width: 108px; }
#bulk-shell col.bulk-k-kat    { width: 104px; }
#bulk-shell col.bulk-k-stok   { width: 132px; }
#bulk-shell col.bulk-k-kritik { width: 84px; }
#bulk-shell col.bulk-k-sup    { width: 140px; }
#bulk-shell col.bulk-k-fiyat  { width: 160px; }
#bulk-shell col.bulk-k-kdv    { width: 76px; }
#bulk-shell col.bulk-k-durum  { width: 92px; }
#bulk-shell .bulk-kat-ad { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tbl-code-fs); color: var(--text-secondary); }
#bulk-shell .bulk-sup-tek { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tbl-code-fs); color: var(--text-primary); }
#bulk-shell .bulk-sup-tek.is-yok { color: var(--text-muted); font-style: italic; }
#bulk-shell .bulk-t td .peron-select.bulk-sup { width: 100%; min-width: 0; text-overflow: ellipsis; }
#bulk-shell .bulk-alt { display: none; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#bulk-shell .bulk-code-alt, #bulk-shell .bulk-kat-alt { display: none; }
#bulk-shell .bulk-t > tbody > tr[hidden] { display: none; }
#bulk-shell .bulk-t > tbody > tr > td { vertical-align: middle; }
#bulk-shell .bulk-wrap[aria-busy="true"] tbody { opacity: .55; }
#bulk-shell .bulk-in { box-sizing: border-box; width: 100%; min-width: 0; }
#bulk-shell .bulk-num { text-align: right; font-variant-numeric: tabular-nums; }
#bulk-shell .bulk-code { font-size: var(--tbl-code-fs); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
#bulk-shell .bulk-stok, #bulk-shell .bulk-fiy { display: flex; align-items: center; gap: 6px; min-width: 0; }
#bulk-shell .bulk-stok .bulk-in, #bulk-shell .bulk-fiy .bulk-num { flex: 1 1 0; }
#bulk-shell .bulk-unit { flex: 0 0 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 10.5px; color: var(--text-muted); }
#bulk-shell .bulk-fiy .bulk-pb { flex: 0 0 70px; width: 70px; }
#bulk-shell .bulk-salt { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#bulk-shell .bulk-salt i { font-style: normal; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
#bulk-shell .bulk-yok { font-size: 11px; color: var(--text-muted); }
#bulk-shell .bulk-t > tbody > tr.is-kirli > td { background: var(--peach-surface); }
#bulk-shell .bulk-t > tbody > tr.is-kirli .bulk-in { border-color: var(--amber-border); }
#bulk-shell .bulk-iskelet { display: block; height: 10px; border-radius: var(--r-sm); background: var(--border); }
#bulk-shell .bulk-t > tbody > tr.bulk-bos > td { padding: 28px 12px; text-align: center; color: var(--text-muted); }
/* Dar kapta (kenar çubuğu açık 1024px ≈ 744px) kolonlar ölçülen ihtiyaca iner; ürün adı kalan yeri alır.
   Karar KABIN genişliğinedir (aynı ekran genişliği kenar çubuğuna göre ~180px farklı kap verir). */
#bulk-shell .bulk-wrap { container-type: inline-size; container-name: bulkkap; }
/* Kap 1110px'in altına inince Kategori kolonu DÜŞER, kategori ürün adının ALTINDA basılır (alan düşer, veri düşmez).
   Düşen kolon `visibility: collapse` + genişlik 0; hücresi gizli ve dolgusuz (display:none hücreyi akıştan çıkarıp
   öteki hücreleri bir kolon kaydırırdı). */
@container bulkkap (max-width: 1110px) {
    #bulk-shell .bulk-t { min-width: 1000px; }
    #bulk-shell col.bulk-k-kat { visibility: collapse; width: 0; }
    #bulk-shell .bulk-t > thead > tr > th.bulk-h-kat,
    #bulk-shell .bulk-t > tbody > tr > td.bulk-c-kat { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #bulk-shell .bulk-alt { display: block; }
    #bulk-shell .bulk-kat-alt { display: inline; }
}
@container bulkkap (max-width: 900px) {
    #bulk-shell .bulk-t { min-width: 870px; }
    #bulk-shell col.bulk-k-kod    { width: 100px; }
    #bulk-shell col.bulk-k-stok   { width: 110px; }
    #bulk-shell col.bulk-k-kritik { width: 72px; }
    #bulk-shell col.bulk-k-sup    { width: 128px; }
    #bulk-shell col.bulk-k-fiyat  { width: 156px; }
    #bulk-shell col.bulk-k-kdv    { width: 64px; }
    #bulk-shell col.bulk-k-durum  { width: 86px; }
    #bulk-shell .bulk-unit { flex-basis: 26px; }
    #bulk-shell .bulk-fiy .bulk-pb { flex-basis: 66px; width: 66px; }
}
/* Daha dar kapta (tablet dikey ≈ 730px) Kod kolonu da DÜŞER, kod ürün adının ALTINDA kategoriyle aynı satırda basılır
   → ürün adı ≥ 200px. Tablo bu bantta kendi kabında yatay kayar (sayfa gövdesi kaymaz). */
@container bulkkap (max-width: 800px) {
    #bulk-shell .bulk-t { min-width: 760px; }
    #bulk-shell col.bulk-k-kod { visibility: collapse; width: 0; }
    #bulk-shell .bulk-t > thead > tr > th.bulk-h-kod,
    #bulk-shell .bulk-t > tbody > tr > td.bulk-c-kod { visibility: hidden; overflow: hidden; padding-left: 0; padding-right: 0; }
    #bulk-shell .bulk-code-alt { display: inline; }
    #bulk-shell .bulk-code-alt + .bulk-kat-alt::before { content: " · "; }
}
/* 🔴 1.441.0 — SAYI KUTUSU RAKAM KIRPMAZ (tasarım denetimi, YÜKSEK). Döndürme okları yoğun tabloda işe yaramıyor ama iç alanı
   ~12px daraltıyordu; 768px'te girdiler 16px'e çıkınca (iOS yakınlaştırma kuralı) "1005" → "100", "20" → "2" ölçüldü. Oklar
   gizlenir (klavye okları ve yazma çalışır) ve dokunmatik banttaki sayı kolonları 16px yazıya göre genişler. */
#bulk-shell .bulk-num { -moz-appearance: textfield; appearance: textfield; }
#bulk-shell .bulk-num::-webkit-inner-spin-button,
#bulk-shell .bulk-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 768px) {
    #bulk-shell .bulk-t { min-width: 800px; }
    #bulk-shell col.bulk-k-stok   { width: 124px; }
    #bulk-shell col.bulk-k-kritik { width: 84px; }
    #bulk-shell col.bulk-k-fiyat  { width: 170px; }
    #bulk-shell col.bulk-k-kdv    { width: 72px; }
}
.bulk-soru { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.bulk-uyari { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--rose-surface-border); border-radius: var(--r-md); background: var(--rose-surface); font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.bulk-uyari-ik { flex: 0 0 20px; width: 20px; height: 20px; color: var(--rose-ink); }
.bulk-uyari-ik svg { display: block; width: 20px; height: 20px; }
.bulk-hata { margin-top: 8px; padding: 10px; border: 1px solid var(--rose-surface-border); border-radius: var(--r-md); background: var(--rose-surface); font-size: 13px; color: var(--rose-ink); }

/* ── Satınalma — "Siparişi gönder" grubu (başlıkta, Yazdır'ın önünde) ───────────────────────────────
   Başlık üstte, iki simge düğme altında. Düğmeler HER ZAMAN basılıdır; gönderilecek bir şey yokken
   pasif görünür ve tıklanınca nedenini söyler (`aria-disabled`, `disabled` değil). */
.pur-hdr-eylem { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 8px; }

/* 1.433.0 — başlık satırı kaldırıldı; eylemler DURUM KARTLARININ SATIRINA, sağ uca indi.
   Kartlar ≥ 140px'lik beş kolona sığdığı sürece tek satır: 1440px'te kap 1142px = 5 × 152 + eylemler.
   Yer yetmezse (kap < 1043px: 5 × 140 + 4 × 12 + 12 + 282,4 = 1042,4 ölçüldü) eylemler kartların ALTINA, sağa yaslı kendi satırına düşer ve yazıları geri gelir.
   🔴 Ara bantta (1043–1319px; 1366px dizüstünde kap 1068px) Yazdır · Sipariş Mailleri · Dışa Aktar yalnız simge olur: yazılarıyla 441px tutuyorlar
      ve kartları ikinci satıra itiyorlardı. Ad `aria-label` + `title`da durur. "Sipariş Mailleri" simgesi `inbox`:
      yan yana iki zarf ("Siparişi gönder" + kayıt) simge hâlinde birbirinden ayırt edilemezdi. */
#pur-shell .pur-ust { container-type: inline-size; container-name: purust; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
#pur-shell .pur-ust > #pur-filter-bar { flex: 1 1 748px; min-width: 0; margin-bottom: 0; }
#pur-shell .pur-ust > .pur-hdr-eylem { flex: 0 0 auto; margin-left: auto; }
/* Birincil eylem ≥ 36px (kademeli dokunma eşiği); başlık satırındayken 36'ydı, kart satırında 34'e düşüyordu. */
#pur-shell .pur-ust #btn-new-purchase { min-height: 36px; }
@container purust (min-width: 1043px) {
    #pur-shell .pur-ust > #pur-filter-bar.peron-filter-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@container purust (min-width: 1043px) and (max-width: 1319px) {
    #pur-shell .pur-ust-btn { width: 34px; padding: 0; justify-content: center; }
    #pur-shell .pur-ust-btn .pur-etk { display: none; }
}
.pur-gonder { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-right: 4px; }
.pur-gonder-bas { font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: .03em; white-space: nowrap; color: var(--text-muted); }
.pur-gonder-dugmeler { display: inline-flex; gap: 6px; }
.pur-gonder-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); color: var(--pri-text); cursor: pointer; transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), opacity var(--tr-fast); }
.pur-gonder-btn svg { display: block; width: 16px; height: 16px; }
.pur-gonder-btn:hover { border-color: var(--pri-border); background: var(--pri-light); }
.pur-gonder-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.pur-gonder-btn--wa { color: var(--green-ink); }
.pur-gonder-btn--wa svg { width: 17px; height: 17px; }
.pur-gonder-btn--wa:hover { border-color: var(--green); background: var(--mint-surface); }
.pur-gonder-btn.is-pasif, .pur-gonder-btn.is-pasif:hover { border-color: var(--border); background: var(--card-bg); color: var(--text-muted); opacity: .6; }
.om-hata { margin-bottom: 10px; font-size: 13px; color: var(--rose-ink); }
.om-wa-yedek { margin-top: 10px; font-size: 12px; color: var(--text-secondary); }

/* ── YATAY TELEFON — girdiler 16px (iOS odak büyütmesi) ───────────────────────────────────────────────
   Dikeyde aynı kalkan "MOBİL SON SÖZ · E" bloğundadır (≤768px). Yatay telefon (844×390) masaüstü yoluna düşer:
   ölçüldü — ürün kartı formunun 17 girdisi 13px, Notlarım 14px. Bant E-Ticaret bloklarındakiyle AYNI ölçüttür
   (dokunmatik + yükseklik ≤ 640): masaüstü (fare) ve tablet (yükseklik > 640) ETKİLENMEZ. Değişen yalnız punto;
   kutu yüksekliği değişmez. Dosya sonundadır: medya sorgusu özgüllük eklemez, kaynak sırası kazanır. */
@media (pointer: coarse) and (max-height: 640px) {
    .peron-input,
    .peron-select,
    .peron-textarea,
    .peron-search input,
    .peron-modal-input,
    .peron-modal-select,
    .peron-modal-textarea,
    .peron-notes-area,
    .peron-modal textarea,
    .peron-side-panel textarea { font-size: 16px; }
    .peron-daterange .peron-input, .dash-prod-search input, .nl-search-input, .plan-week-title-input, .peron-cmd-input,
    .po-mat-table .peron-input.sm, .po-mat-table .peron-select.sm,
    .pl-table .peron-input.sm,
    .pf-table .peron-input.sm,
    .po-mat-table .po-mat-grp-inp.peron-input.sm,
    .peron-msg-conv-input textarea,
    .pmsg-composer textarea { font-size: 16px; }
}

/* Telefonda modal alt-sheet olarak açılır ve altta duran bildirim pencerenin düğmelerini örterdi
   (2026-10-15): pencere açıkken bildirim üstten iner. */
@media (max-width: 768px) {
    html:has(#peron-modal-container .peron-modal-overlay) .peron-toast-container { top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: auto; }
}

/* Sağ çekmece (2026-10-15 tasarım ölçümü): kapalı panelin gölgesi ekranın sağında ~50px gri bant bırakıyordu
   (telefon / tablet); rozetli sekmede rozet etiketin ucuna biniyordu. */
.peron-side-panel:not(.open) { box-shadow: none; }
.peron-side-tab.has-badge { padding-top: 28px; }

/* Lisans bitiş uyarısı (1.405.2) — /yonetim'de seçilen kullanıcıların ana ekranının üstünde, kapatılamaz.
   Zemin --rose-ink (beyazda 5,49:1); yazı --card-bg: gece temasında zemin açık pembe, yazı koyu kalır. */
.peron-lisans-uyari { flex: 0 0 auto; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 22px; background: var(--rose-ink); color: var(--card-bg); font-size: 12px; line-height: 1.45; }
.peron-lisans-uyari svg { width: 18px; height: 18px; flex: 0 0 18px; }
.peron-lisans-uyari-metin { min-width: 0; }
.peron-lisans-uyari-metin b { font-weight: 700; }
@media (max-width: 768px) {
    .peron-lisans-uyari { align-items: flex-start; padding: 8px 12px; font-size: 11px; }
    .peron-lisans-uyari svg { width: 16px; height: 16px; flex-basis: 16px; margin-top: 1px; }
}

/* 1.405.3 — Rezervin sipariş aşaması (A.rezervAsama): planda · kesimde · dikimde … */
.rsv-asama { display: inline-block; box-sizing: border-box; max-width: 100%; padding: 1px 7px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    vertical-align: middle; color: var(--text-muted); background: var(--content-bg); font-variant-numeric: tabular-nums; }
.rsv-asama--plan   { color: var(--pri-text); background: var(--pri-light); }
.rsv-asama--uretim { color: var(--amber-ink); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.rsv-asama--bitti  { color: var(--green-ink); background: color-mix(in srgb, var(--green) 10%, transparent); }
.rsv-asama-sat { margin-top: 3px; line-height: 1; }
.stk-res-ord .rsv-asama { margin-left: 6px; }

/* 1.405.5 — Satınalma "Rezerve" hücresi: plan yaklaştı (turuncu) / ACİL (kırmızı) yanıp söner.
   1.405.7 — 'yakin' ACİL ile AYNI kalıp (dolu zemin + alt etiket "PLAN" + aynı hız): soluk sarı zemin fark edilmiyordu.
   Zemin --amber-ink (beyazda 5,61:1), yazı --card-bg: gece temasında zemin açık turuncu, yazı koyu kalır. */
@keyframes rsv-yanip { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
.pur-reserve-btn.rsv-yakin,
.pur-reserve-btn.rsv-acil { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; max-width: 100%; box-sizing: border-box;
    padding: 2px 6px; line-height: 1.05; color: var(--card-bg); animation: rsv-yanip .9s ease-in-out infinite; }
.pur-reserve-btn.rsv-yakin { background: var(--amber-ink); border-color: var(--amber-ink); }
.pur-reserve-btn.rsv-acil { background: var(--rose-ink); border-color: var(--rose-ink); }
.rsv-acil-kod { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .pur-reserve-btn.rsv-yakin, .pur-reserve-btn.rsv-acil { animation: none; } }
.rsv-table td.rsv-durum { white-space: normal; }

/* 1.405.5 — "Siparişi gönder": etkin kanal kendi renginde; simgeler biraz büyük (kutu boyu aynı) */
.pur-gonder-btn svg { width: 19px; height: 19px; }
.pur-gonder-btn--wa svg { width: 20px; height: 20px; }
.pur-gonder-btn:not(.is-pasif) { color: var(--pri-text); background: var(--pri-light); border-color: var(--pri-border); }
.pur-gonder-btn:not(.is-pasif):hover { background: var(--pri-soft); }
.pur-gonder-btn--wa:not(.is-pasif) { color: var(--green-ink); background: var(--mint-surface); border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.pur-gonder-btn--wa:not(.is-pasif):hover { background: color-mix(in srgb, var(--green) 24%, var(--card-bg)); }

/* ═══ 1.408.0 — MÜŞTERİ ONAYI (Üretim Siparişleri) ══════════════════════════════
   Firma ayarı "Müşteri onay butonu" açıkken taslak satırda BEŞİNCİ işlem düğmesi çıkar.
   İşlemler kolonu ona yer açar; pay Ürün + Firma'dan alınır (tablo toplamı korunur).
   Renkler yalnız token (bu blok dosya sonunda; t42/t49 sabit renk taraması kapsar). */
#po-shell.po-onay-acik .peron-table col.oc-act   { width: 164px; }
#po-shell.po-onay-acik .peron-table col.oc-urun  { width: 140px; }
#po-shell.po-onay-acik .peron-table col.oc-firma { width: 132px; }
@media (max-width: 899px) {
    #po-shell.po-onay-acik :where(:not(.is-sigdir)) > .peron-table col.oc-urun  { width: 104px; }
    #po-shell.po-onay-acik :where(:not(.is-sigdir)) > .peron-table col.oc-firma { width: 100px; }
}
/* 1.409.0 — Kullanıcı: "müşteri onayı butonun simgesi farklı olsun, müşteriye giden bilgilendirme
   butonu ile aynı renk olmuş". Düğmenin KENDİ kimliği: pano + onay simgesi ve mor yüzey (gönder /
   sevke-hazır maili yeşil-mavi ailededir). Durum rengi düğmeyi boyamaz, köşedeki NOKTADIR.
   🔴 `--amber-soft / --green-soft / --rose-soft` TANIMSIZDI (1.408.0): zemin hiç çizilmiyordu. */
.po-onay-btn { position: relative; color: var(--violet-ink); border-color: var(--shift-surface-border); background: var(--shift-surface); }
.po-onay-btn:hover { color: var(--violet-ink); border-color: var(--violet-ink); background: var(--shift-surface); }
.po-onay-btn::after { content: ''; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--card-bg); }
.po-onay-btn.is-yok::after { display: none; }
.po-onay-btn.is-bekliyor::after { background: var(--amber); }
.po-onay-btn.is-onay::after     { background: var(--green); }
.po-onay-btn.is-red::after      { background: var(--rose); }
.po-onay-uyari {
    margin-top: 12px; padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5;
    background: transparent; color: var(--amber-ink); border: 1px solid var(--amber-border);
}
.po-onay-liste { margin: 8px 0 0; padding-left: 18px; text-align: left; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

.pon { display: flex; flex-direction: column; gap: 12px; }
.pon-durum {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border-radius: 8px;
    background: var(--content-bg); border: 1px solid var(--border); font-size: 12px;
}
.pon-durum.is-bekliyor { background: var(--peach-surface); border-color: var(--amber-border); }
.pon-durum.is-onay     { background: var(--mint-surface); border-color: var(--green); }
.pon-durum.is-red      { background: var(--rose-surface); border-color: var(--rose); }
.pon-rozet { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-primary); }
.pon-rozet svg { width: 15px; height: 15px; }
.pon-iz { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pon-karar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 8px; }
.pon-karar.is-onay { border-style: solid; border-color: var(--green); }
.pon-karar-bas { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.pon-karar-btn { display: flex; flex-wrap: wrap; gap: 6px; }
.pon-kunye { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 12px; }
.pon-kunye span { color: var(--text-muted); margin-right: 6px; }
.pon-kunye b { color: var(--text-primary); }
.pon-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .pon-izgara { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.pon-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pon-alan { display: flex; flex-direction: column; gap: 4px; }
.pon-alan[hidden], .pon-ipucu[hidden], .pon-hata[hidden] { display: none; }
/* 1.409.0 — Kanal seçimi: önce WhatsApp (yeşil), sonra e-posta (pastel sarı). Yazı nötr kalır
   (iki temada kontrast), renk zemin + simgededir; seçili olan kendi renginde çerçeve alır. */
.pon-kanal { display: flex; flex-wrap: wrap; gap: 8px; }
.pon-kanal-btn {
    box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px;
    border: 1px solid; border-radius: var(--r-md); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary);
    cursor: pointer; transition: background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.pon-kanal-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pon-kanal-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.pon-kanal-btn--wa { background: var(--mint-surface); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.pon-kanal-btn--wa svg { color: var(--green-ink); }
.pon-kanal-btn--wa:hover, .pon-kanal-btn--wa.active { background: color-mix(in srgb, var(--green) 26%, var(--card-bg)); border-color: var(--green); }
.pon-kanal-btn--wa.active { box-shadow: inset 0 0 0 1px var(--green); }
.pon-kanal-btn--eposta { background: color-mix(in srgb, var(--not-sari) 18%, var(--card-bg)); border-color: color-mix(in srgb, var(--not-sari-kenar) 40%, transparent); }
.pon-kanal-btn--eposta svg { color: var(--not-sari-kenar); }
.pon-kanal-btn--eposta:hover, .pon-kanal-btn--eposta.active { background: color-mix(in srgb, var(--not-sari) 34%, var(--card-bg)); border-color: var(--not-sari-kenar); }
.pon-kanal-btn--eposta.active { box-shadow: inset 0 0 0 1px var(--not-sari-kenar); }
.pon-mod { margin: 4px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.pon-std { color: var(--text-muted); }
.pon-ipucu { font-size: 11px; color: var(--text-muted); }
.pon-ipucu.is-uyari { color: var(--amber-ink); }
.pon-tik { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.pon-mesaj { font-family: inherit; line-height: 1.5; resize: vertical; }
.pon-hata { font-size: 12px; color: var(--rose); font-weight: 500; }
.pon-onizleme { min-width: 0; }
.pon-onizleme-bas { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
/* Modal tablolarının 760px tabanı bu özet tabloya uymaz: kabına sığar, uzun özellik satırı sarar. */
.peron-modal .peron-table.pon-tablo { min-width: 0; width: 100%; }
.pon-tablo td { vertical-align: top; white-space: normal; }
.pon-tablo td.col-nowrap { white-space: nowrap; }
.pon-tablo td.col-num { font-variant-numeric: tabular-nums; }
.pon-oz { font-size: 11px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.pon-tablo tfoot td { font-size: 12px; color: var(--text-secondary); text-align: right; }
.pon-tablo .pon-genel td { font-weight: 700; color: var(--text-primary); }

/* ═══ 1.409.0 — TABLO SIĞDIRMA (peron-app.js → sigdirUygula) ══════════════════════════
   Kullanıcı: "sayfa %70 de olsa %130 da olsa tablodaki her şey gözükmeli". Fareli masaüstünde
   tablo kabı, tablonun TAM kolon genişliğine sığacak oranda küçülür (taban 0,7) — kolon
   düşmez, yatay kaydırmaya saklanmaz. Ekrana bağlı kolon düşürme kuralları
   `:where(:not(.is-sigdir)) > .<tablo>` ile yalnız KABI sığdırılmayan tabloda (telefon, tablet,
   eski tarayıcı, elle kolon ayarı, bilerek geniş tablo) çalışır. Yalnız ekranda: baskıda tablo
   kendi ölçüsünde kalır. */
@media screen {
    .sigdir-kap.is-sigdir { zoom: var(--sigdir, 1); }
}

/* 1.414.0 — Yönetici oturumu şeridi: /yonetim'den açılmış oturumda ERP'nin en üstünde durur,
   kimin adına çalışıldığını ve çıkışı her an gösterir. Ana alan esnek kolon olduğu için
   şerit içeriği aşağı iter, üstüne binmez. */
.peron-yonetici-serit {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 6px 16px;
    box-sizing: border-box;
    background: var(--st-pack-bg);
    color: var(--st-pack-fg);
    border-bottom: 1px solid var(--st-pack-bd);
    font-size: 12px;
    line-height: 1.4;
}
.peron-yonetici-serit__metin { min-width: 0; }
.peron-yonetici-serit__cik {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid var(--st-pack-bd);
    background: var(--card-bg);
    color: var(--st-pack-fg);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* 1.415.2 — Raporlar → Ürün Ağacı Maliyeti (Takım Bazlı): "Farkın nedeni" dokunmatikte ve telefonda SARAR. Tam metin
   yalnız `title`daydı; dokunmatikte ipucu açılmaz, metin üç noktayla kesilip okunamıyordu (ölçüldü 390px: kolon 130px,
   metin 272px ister). Farede tek satır + üç nokta kalır (tablo yoğunluğu). */
@media (pointer: coarse), (max-width: 640px) {
    .peron-table--fixed td.col-ellip.rp-neden { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}

/* ══ 1.419.0 — E-TİCARET SİPARİŞLER: TEK BANT · AŞAMA RENKLERİ · ÜRÜN FOTOĞRAFI · AŞAMA ŞERİDİ ═══════════════════
   Kullanıcı: "siparişler başlığını kaldır, oraya aşamaları kaydır, yanına filtreleri yerleştir, tabloda geniş yer açılsın,
   tabloyu / düğmeleri / ikonları renklendir" + "her ürünün başına resmini yerleştir" + "aşamaları elle değiştirebileyim".
   Renk yalnız aşama tokenlarından (`--st-*`, iki temada AA ölçülmüş üretim paleti); sabit renk YOK. Aşama → renk eşlemesi
   TEK yerde (aşağıdaki `--asm-*` bloğu): liste rozeti, aşama çipi ve pencerenin şeridi aynı değişkeni okur. */

/* Aşama → renk (tek eşleme). Liste rozeti `.etk-asm[data-asm]`, şerit adımı `.etk-asm-adim[data-asm]`, sekme çipi `[data-suz]`. */
:is(.etk-asm, .etk-asm-adim, .etk-asmp__adim)[data-asm],
#etk-sp .etk-sp-cip .etk-cip[data-suz] { --asm-bg: var(--st-wait-bg); --asm-fg: var(--st-wait-fg); --asm-bd: var(--st-wait-bd); }
:is(.etk-asm, .etk-asm-adim, .etk-asmp__adim)[data-asm="yeni"],
#etk-sp .etk-sp-cip .etk-cip[data-suz="yeni"] { --asm-bg: var(--st-cut-bg); --asm-fg: var(--st-cut-fg); --asm-bd: var(--st-cut-bd); }
:is(.etk-asm, .etk-asm-adim, .etk-asmp__adim)[data-asm="hazirlaniyor"],
:is(.etk-asm, .etk-asm-adim, .etk-asmp__adim):is([data-asm="iade_talebi"], [data-asm="iade_kabul"]),
#etk-sp .etk-sp-cip .etk-cip[data-suz="hazirlanacak"] { --asm-bg: var(--st-pack-bg); --asm-fg: var(--st-pack-fg); --asm-bd: var(--st-pack-bd); }
:is(.etk-asm, .etk-asm-adim, .etk-asmp__adim)[data-asm="faturalandi"] { --asm-bg: var(--st-sew-bg); --asm-fg: var(--st-sew-fg); --asm-bd: var(--st-sew-bd); }
#etk-sp .etk-sp-cip .etk-cip[data-suz="uretimde"] { --asm-bg: var(--st-uph-bg); --asm-fg: var(--st-uph-fg); --asm-bd: var(--st-uph-bd); }
:is(.etk-asm, .etk-asm-adim, .etk-asmp__adim)[data-asm="kargoda"],
#etk-sp .etk-sp-cip .etk-cip[data-suz="kargoda"] { --asm-bg: var(--st-ship-bg); --asm-fg: var(--st-ship-fg); --asm-bd: var(--st-ship-bd); }
:is(.etk-asm, .etk-asm-adim, .etk-asmp__adim)[data-asm="teslim_edildi"],
#etk-sp .etk-sp-cip .etk-cip[data-suz="teslim"] { --asm-bg: var(--st-done-bg); --asm-fg: var(--st-done-fg); --asm-bd: var(--st-done-bd); }
:is(.etk-asm, .etk-asm-adim, .etk-asmp__adim):is([data-asm="iptal"], [data-asm="tedarik_edilemedi"], [data-asm="teslim_edilemedi"]),
#etk-sp .etk-sp-cip .etk-cip:is([data-suz="iptal_iade"], [data-suz="sorunlu"]) { --asm-bg: var(--st-canc-bg); --asm-fg: var(--st-canc-fg); --asm-bd: var(--st-canc-bd); }

/* Kanal durumu rozeti — gece temasının rozet renk kurallarından (0,3,1) özgül: kimlik ya da pencere kapsamı. */
#etk-sp .peron-badge.etk-asm,
.peron-modal-overlay .peron-modal .peron-badge.etk-asm { background: var(--asm-bg); color: var(--asm-fg); border-color: var(--asm-bd); }

/* ── Üst bant: başlık yok (ekran okuyucu için görünmez h1), aşama çipleri + süzgeçler tek bantta ── */
#etk-sp .etk-sp-baslik {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#etk-sp .etk-sp-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px; }
/* 1.421.0 — aşama çipleri bandın ilk satırını DOLDURUR (ekrana sığar; sığmazsa alta sarar, yatay taşma yok); süzgeçler ikinci
   satırda SOLA yaslı, toplam sayı sağ uçta. Çipin simgesi aşamanın rengindedir (simgesiz çipte eski nokta). */
#etk-sp .etk-sp-ust > .etk-sp-cip { flex: 1 1 100%; min-width: 0; gap: 6px; }
#etk-sp .etk-sp-cip > .etk-cip { flex: 1 1 auto; max-width: 240px; justify-content: center; padding: 0 9px; }
#etk-sp .etk-sp-ust > .etk-sp-arac { flex: 1 1 100%; align-items: center; justify-content: flex-start; gap: 8px 10px; margin: 0; }
#etk-sp .etk-sp-arac > .etk-sp-say { margin-left: auto; }
#etk-sp .etk-sp-cip .etk-cip:not(.is-ikonlu)::before {
    content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--asm-fg);
}
#etk-sp .etk-sp-cip .etk-cip__ik { color: var(--asm-fg); }
#etk-sp .etk-sp-cip .etk-cip:hover { border-color: var(--asm-bd); color: var(--asm-fg); }
#etk-sp .etk-sp-cip .etk-cip.is-on { border-color: var(--asm-fg); background: var(--asm-bg); color: var(--asm-fg); }
#etk-sp .etk-sp-cip .etk-cip.is-on > b { color: inherit; }
#etk-sp .etk-sp-say { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
#etk-sp .etk-sp-say:empty { display: none; }
#etk-sp .etk-sp-arac > .etk-git:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; }
#etk-sp .etk-sp-arac > .etk-git > svg { width: 12px; height: 12px; }
#etk-sp .etk-toplu .peron-btn > svg { width: 14px; height: 14px; }
/* Arama simgesi girdinin içinde (etiketin doğrudan çocuğu: etiket gizleme kuralları yalnız `span`ı hedefler); tarih aralığının başında
   takvim simgesi. Simge girdinin altına hizalı: girdi 36px (fare) / 40px (dokunmatik, tablet ve telefon). */
#etk-sp .etk-alan--ara { position: relative; }
#etk-sp .etk-alan--ara > svg {
    position: absolute; left: 10px; bottom: 11px; width: 14px; height: 14px; color: var(--text-muted); pointer-events: none;
}
#etk-sp .etk-alan--ara > .peron-input { padding-left: 30px; }
.etk-sp-takvim { display: inline-flex; flex: 0 0 auto; color: var(--text-muted); font-style: normal; }
.etk-sp-takvim > svg { width: 14px; height: 14px; }
/* Geniş ekranda süzgeç etiketleri görünmez (bant tek satır yüksekliğinde kalır); seçim / yer tutucu / aria-label anlatır.
   Telefonda süzgeçler alt alta açılır ve etiketler görünür (eski düzen). */
@media (min-width: 641px) {
    #etk-sp .etk-sp-arac .etk-alan > span:first-child {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    #etk-sp .etk-sp-arac .etk-alan .peron-select { width: 176px; }
    #etk-sp .etk-sp-arac .etk-alan--ara .peron-input { width: 220px; }
}

/* ── Tablo: satır vurgusu, ürün fotoğrafları (başlık satırı ortak tablo dilinin koyu çelik mavisinde kalır) ── */
#etk-sp .etk-sp-t > tbody > tr[data-rk]:hover > td { background: color-mix(in srgb, var(--pri) 5%, var(--card-bg)); }
#etk-sp .etk-sp-t .etk-urun { align-items: center; gap: 8px; }
.etk-sp-yigin { display: inline-flex; flex: 0 0 auto; align-items: center; }
/* Birden çok ürün: ilk ürünün fotoğrafı ÜSTTE ve tam görünür, ötekiler arkasından üçte ikisi kadar görünür. */
.etk-sp-yigin > img {
    position: relative; box-sizing: border-box; display: block; width: 28px; height: 28px; object-fit: cover;
    border: 1px solid var(--border); border-radius: 6px; background: var(--border-light); box-shadow: 0 0 0 2px var(--card-bg);
}
.etk-sp-yigin > img:nth-child(1) { z-index: 3; }
.etk-sp-yigin > img:nth-child(2) { z-index: 2; }
.etk-sp-yigin > img + img { margin-left: -10px; }
.etk-sp-yigin.is-bos {
    box-sizing: border-box; justify-content: center; width: 28px; height: 28px; border: 1px dashed var(--border); border-radius: 6px; color: var(--text-muted);
}
.etk-sp-yigin.is-bos > svg { width: 14px; height: 14px; }
/* Kart düzeninde (dar kap) fotoğraf bir kademe küçük: kart boyu ürün satırı kadar büyümesin. */
@container etkkap (width < 714px) {
    #etk-sp .etk-sp-yigin > img,
    #etk-sp .etk-sp-yigin.is-bos { width: 24px; height: 24px; }
    #etk-sp .etk-sp-yigin > img + img { margin-left: -9px; }
}

/* ── Sipariş penceresi: aşama şeridi ── */
.etk-asm-serit {
    display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--pri) 3%, var(--card-bg));
}
.etk-asm-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.etk-asm-adimlar { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; }
.etk-asm-adim { display: flex; flex: 1 1 0; align-items: center; min-width: 0; }
.etk-asm-adim:last-child { flex: 0 0 auto; }
.etk-asm-adim::after { content: ''; flex: 1 1 auto; min-width: 8px; height: 2px; margin: 0 6px; border-radius: 1px; background: var(--border); }
.etk-asm-adim:last-child::after { content: none; }
.etk-asm-adim.is-gecti::after { background: var(--st-done-bd); }
.etk-asm-adim > :is(button, .etk-asm-adim__k) {
    box-sizing: border-box; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 28px; margin: 0;
    padding: 3px 10px 3px 4px; border: 1px solid transparent; border-radius: var(--r-full); background: none;
    font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--text-muted); white-space: nowrap;
}
.etk-asm-adim > button { border-color: var(--border); background: var(--card-bg); color: var(--text-secondary); cursor: pointer; }
.etk-asm-adim > button:hover { border-color: var(--asm-bd); background: var(--asm-bg); color: var(--asm-fg); }
.etk-asm-adim > button:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.etk-asm-adim__n {
    box-sizing: border-box; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; height: 20px;
    border: 1.5px solid var(--border); border-radius: 50%; background: var(--card-bg);
    font-style: normal; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.etk-asm-adim__n > svg { width: 12px; height: 12px; }
.etk-asm-adim.is-gecti > * { color: var(--text-secondary); }
.etk-asm-adim.is-gecti .etk-asm-adim__n { border-color: var(--st-done-bd); background: var(--st-done-bg); color: var(--st-done-fg); }
.etk-asm-adim.is-simdi > * { border-color: var(--asm-bd); background: var(--asm-bg); color: var(--asm-fg); }
.etk-asm-adim.is-simdi .etk-asm-adim__n { border-color: var(--asm-fg); background: var(--asm-fg); color: var(--card-bg); }
.etk-asm-adimlar.is-yan .etk-asm-adim > * { opacity: .6; }
.etk-asm-yan { display: inline-flex; flex: 0 0 auto; }
.etk-asm-iptal { flex: 0 0 auto; min-height: 28px; margin-left: auto; color: var(--rose-ink); }
.etk-asm-iptal > svg { width: 12px; height: 12px; }
.etk-asm-durum {
    display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere;
}
.etk-asm-durum.is-bekliyor { color: var(--pri-text); }
.etk-asm-durum.is-hata { color: var(--rose-ink); }
.etk-asm-cark {
    box-sizing: border-box; flex: 0 0 auto; width: 12px; height: 12px; border: 2px solid var(--pri-border); border-top-color: var(--pri);
    border-radius: 50%; animation: etk-asm-don .8s linear infinite;
}
@keyframes etk-asm-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .etk-asm-cark { animation: none; }
}
/* ── Sipariş penceresi: açılır-kapanır "Aşamalar" (1.426.0) — başlık şu anki aşamayı söyler; açılınca dikey zaman çizgisi.
   Renk aşama eşlemesinden (`--asm-*`, data-asm); geçilen yeşil ✓, şu an dolu daire. */
.etk-asmp { box-sizing: border-box; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg); }
.etk-asmp__bas {
    box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 40px; padding: 6px 12px;
    border-radius: var(--r-md); list-style: none; cursor: pointer;
}
.etk-asmp__bas::-webkit-details-marker { display: none; }
.etk-asmp__bas:hover { background: var(--pri-light); }
.etk-asmp__bas:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.etk-asmp__baslik { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.etk-asmp__ipucu { flex: 1 1 160px; min-width: 0; font-size: 11px; line-height: 1.4; color: var(--text-muted); }
.etk-asmp__ok { display: inline-flex; flex: 0 0 auto; margin-left: auto; font-style: normal; color: var(--text-muted); transition: transform .18s ease; }
.etk-asmp__ok > svg { width: 16px; height: 16px; }
.etk-asmp[open] > .etk-asmp__bas { border-bottom: 1px solid var(--border-light); border-radius: var(--r-md) var(--r-md) 0 0; }
.etk-asmp[open] > .etk-asmp__bas .etk-asmp__ok { transform: rotate(180deg); }
.etk-asmp__govde { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 12px; }
.etk-asmp__liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.etk-asmp__adim {
    position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px;
    min-height: 36px; padding: 3px 0;
}
.etk-asmp__adim:not(:last-child):not(.is-iptal)::before {
    content: ''; position: absolute; top: 28px; bottom: -8px; left: 10px; width: 2px; border-radius: 1px; background: var(--border);
}
.etk-asmp__adim.is-gecti::before { background: var(--st-done-bd); }
.etk-asmp__n {
    position: relative; z-index: 1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border: 1.5px solid var(--border); border-radius: 50%; background: var(--card-bg);
    font-style: normal; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.etk-asmp__n > svg { width: 12px; height: 12px; }
.etk-asmp__ad { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--text-secondary); }
.etk-asmp__hal { font-size: 11px; white-space: nowrap; color: var(--text-muted); }
.etk-asmp__adim.is-gecti .etk-asmp__n { border-color: var(--st-done-bd); background: var(--st-done-bg); color: var(--st-done-fg); }
.etk-asmp__adim.is-simdi .etk-asmp__n { border-color: var(--asm-fg); background: var(--asm-fg); color: var(--card-bg); }
.etk-asmp__adim.is-simdi :is(.etk-asmp__ad, .etk-asmp__hal) { font-weight: 700; color: var(--asm-fg); }
.etk-asmp__adim.is-iptal { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.etk-asmp__adim.is-iptal .etk-asmp__n { border-color: var(--rose-surface-border); background: var(--rose-surface); color: var(--rose-ink); }
.etk-asmp__al { min-height: 28px; white-space: nowrap; }
.etk-asmp__al.is-tehlike { color: var(--rose-ink); }
.etk-asmp__uyari {
    display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 7px 10px; border: 1px solid var(--amber-border);
    border-radius: var(--r-sm); background: var(--peach-surface); font-size: 11.5px; line-height: 1.45; color: var(--amber-ink-yuzey);
}
.etk-asmp__uyari > svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.etk-asmp__yan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: var(--text-secondary); }
@media (max-width: 480px) {
    .etk-asmp__adim { grid-template-columns: 22px minmax(0, 1fr) auto; }
    .etk-asmp__adim > .etk-asmp__al { grid-column: 2 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .etk-asmp__ok { transition: none; }
}
/* Onay adımı: "şu an → hedef" rozetleri; kargo formu iki sütun (telefonda tek). */
.etk-asm-gecis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.etk-asm-gecis > i { font-style: normal; color: var(--text-muted); }
.etk-asm-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: 4px 0 0; }
.etk-asm-form__genis { grid-column: 1 / -1; }
.etk-asm-form .peron-input { box-sizing: border-box; width: 100%; height: 36px; }
.etk-asm-form .etk-onay { white-space: normal; }
.peron-modal-footer .peron-btn > svg { width: 14px; height: 14px; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 640px) {
    .etk-asm-form .peron-input { font-size: 16px; height: 40px; }
    #etk-sp .etk-alan--ara > svg { bottom: 13px; }
}
@media (max-width: 640px) {
    #etk-sp .etk-sp-ust { gap: 8px; }
    #etk-sp .etk-sp-ust > :is(.etk-sp-cip, .etk-sp-arac) { flex: 1 1 100%; }
    /* Telefonda aşama çipleri TEK satırda, kendi kabında yana kayar (ölçüldü 390px: üç satıra sarıp tabloyu 35px aşağı itiyordu);
       seçili çip görünür alana kaydırılır (JS). Toplam sayı "Tümü" çipinde zaten yazar; bant satırı yemesin. */
    #etk-sp .etk-sp-cip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
    #etk-sp .etk-sp-cip::-webkit-scrollbar { display: none; }
    #etk-sp .etk-sp-cip .etk-cip { flex: 0 0 auto; }
    #etk-sp .etk-sp-say { display: none; }
    .etk-asm-form { grid-template-columns: minmax(0, 1fr); }
    /* Dar şeritte yalnız şu anki aşamanın adı yazar; ötekiler numaralı daire (adları ekran okuyucuda kalır). */
    .etk-asm-adim:not(.is-simdi) .etk-asm-adim__ad {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .etk-asm-adim:not(.is-simdi) > :is(button, .etk-asm-adim__k) { padding-right: 4px; }
    .etk-asm-adim > :is(button, .etk-asm-adim__k) { font-size: var(--m-fs-sm); }
    .etk-asm-durum { font-size: var(--m-fs-xs); }
}

/* ═══ 1.420.0 — OTURUM DEĞİŞTİ PERDESİ ═══════════════════════════════════════════════════════════════════════════════
   Sekme başka bir oturumla açılmışsa (aynı tarayıcıda başka hesapla giriş) ekranı kilitler; kapatılamaz, tek çıkış
   sayfayı yenilemek. Modal katmanının ÜSTÜNDE durur: açık bir pencere de eski firmanın ekranıdır. */
.peron-oturum-perde {
    box-sizing: border-box; position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: color-mix(in srgb, var(--text-primary) 60%, transparent);
}
.peron-oturum-perde__kutu {
    box-sizing: border-box; width: min(440px, 100%); padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--card-bg); color: var(--text-primary);
}
.peron-oturum-perde__kutu h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.peron-oturum-perde__kutu p { margin: 0 0 16px; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

/* ═══ 1.422.0 — MODÜLE ÖZEL FİYAT + SİPARİŞ İSKONTOSU ══════════════════════════════════════════════════════════════
   Üretim siparişi formunda modülün Fiyat (birim) · KDV · İskonto · 2. İskonto kutuları düzenlenir; başlıktaki
   "Liste" tutarı sabittir. Genel Toplam şeridinde siparişin iskontosu durur (cari kartından tohumlanır).
   Kolon adları/sırası md.8 deseninin aynısı; telefonda satır etiketli ızgaraya döner (ikinci çizim yolu yok). */
.po-mod-price .po-mod-liste { font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
/* Başlıklar ortalı (proje kuralı 1.381.0) → içerik de ORTALI: sola/sağa yaslı kutu geniş kolonda başlığından
   47-64px kayıyordu (tasarım ölçümü, 1440px). */
.po-mod-calc-table--duz th,
.po-mod-calc-table--duz th:first-child { text-align: center; }
.po-mod-calc-table--duz td,
.po-mod-calc-table--duz td:first-child { vertical-align: middle; padding-top: 4px; padding-bottom: 4px; white-space: nowrap; text-align: center; }
.po-mod-calc-table--duz .po-money { align-items: center; }
.po-mod-inw { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.po-mod-in-u { font-size: 11px; color: var(--text-muted); }
.po-mod-calc-table--duz .po-mod-in.peron-input.sm {
    box-sizing: border-box; width: 60px; height: var(--tbl-ctl-h); padding: 0 6px;
    font-size: var(--tbl-ctl-fs); text-align: right; font-variant-numeric: tabular-nums;
}
.po-mod-calc-table--duz .po-mod-in.peron-input.sm[data-k="fiyat"] { width: 104px; }
.po-mod-calc-table--duz .po-mod-in.peron-input.sm.is-ozel { border-color: var(--pri); color: var(--pri-text); font-weight: 600; }
/* KDV tutarı kutunun ALTINDA: yanında dururken 820px'te 6 haneli fiyatla tablo kabından taşıyordu (ölçüldü). */
.po-mod-kdv-alt { display: block; margin-top: 2px; font-size: 10px; line-height: 1.2; color: var(--text-muted); }
.po-mod-kdv-alt:empty { display: none; }
/* Sayı kutusunun oku dar kutuda rakamın üstüne biner (ölçüldü: 360px'te 2 kutu içeriği kırpılıyordu) —
   `td.pur-qtycell .pur-qty` ile aynı çözüm; değer klavyeyle girilir. */
.po-mod-in::-webkit-inner-spin-button, .po-mod-in::-webkit-outer-spin-button,
.po-foot-isk-in::-webkit-inner-spin-button, .po-foot-isk-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.po-mod-in, .po-foot-isk-in { -moz-appearance: textfield; appearance: textfield; }
/* Yapışkan alt şerit, kolon genişliği tutamaklarının (z-index 3) ALTINDA kalıyordu: tutamaklar şeridin
   üstünden ince dikey çizgi olarak geçiyordu. Açılır listeler (1200) etkilenmez. */
.po-form-footer { z-index: 4; }

.po-foot-isk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11px; color: var(--text-secondary); }
.po-foot-isk-f { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.po-foot-isk .po-foot-isk-in.peron-input.sm {
    box-sizing: border-box; width: 64px; height: var(--tbl-ctl-h); padding: 0 6px;
    font-size: var(--tbl-ctl-fs); text-align: right; font-variant-numeric: tabular-nums;
}
.po-foot-isk-kart { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.po-foot-isk-kart[hidden] { display: none; }

@media (max-width: 768px) {
    /* Altı kolon + dört kutu dar kapta sığmaz: satır İKİ satırlı etiketli ızgaraya döner, başlık satırı düşer
       (etiket her hücrede `data-lbl`). 1. satır Fiyat · Adet · Toplam (okunan rakamlar), 2. satır KDV · İskonto ·
       2. İskonto. Üç satırlı ilk deneme modül başına 179px yer tutuyordu (ölçüldü 390px). */
    /* Altı birimlik ızgara: Fiyat yarım satır (3) — 6 haneli kuruşlu fiyat 80px kutuda kırpılıyordu (ölçüldü:
       "12499.90" 92/80px @390) —, Adet 1, Toplam 2; ikinci satırda üç oran eşit (2+2+2). */
    .po-mod-calc-table--duz thead { display: none; }
    .po-mod-calc-table--duz tbody tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 8px; padding: 8px; }
    .po-mod-calc-table--duz tbody td,
    .po-mod-calc-table--duz tbody td:first-child { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; padding: 0; text-align: left; grid-column: span 2; }
    .po-mod-calc-table--duz tbody td::before { content: attr(data-lbl); font-size: var(--m-fs-xs, 9.5px); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); }
    .po-mod-calc-table--duz tbody td:first-child { grid-column: span 3; }
    .po-mod-calc-table--duz tbody td[data-lbl="Adet"] { order: 1; grid-column: span 1; }
    .po-mod-calc-table--duz tbody td.po-mod-tcol { order: 2; white-space: normal; padding: 0 6px; border-radius: var(--r-sm); }
    .po-mod-calc-table--duz tbody td:nth-child(n+3):not(.po-mod-tcol) { order: 3; }
    .po-mod-calc-table--duz .po-money { align-items: flex-start; }
    .po-mod-calc-table--duz .po-mod-inw { justify-content: flex-start; width: 100%; }
    .po-mod-calc-table--duz .po-mod-in.peron-input.sm,
    .po-mod-calc-table--duz .po-mod-in.peron-input.sm[data-k="fiyat"] { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 4px; }
    .po-mod-kdv-alt { margin-top: 0; font-size: var(--m-fs-xs, 9.5px); }
    /* Yapışkan şerit telefonda ekranın %22'sini tutuyordu (175px @360): adet + Genel Toplam tek satıra,
       iskonto kutuları alt satıra; "Cari kartı" ipucu düşer — oran kutuların ipucunda (title) yazar. */
    .po-foot-info { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
    .po-foot-isk { order: 3; flex-basis: 100%; }
    .po-foot-isk-kart { display: none; }
    .po-foot-isk .po-foot-isk-in.peron-input.sm { width: 56px; }
    .po-form-footer { gap: 8px; padding: 10px 12px; }
}

/* ═══ 1.436.0 — FİYAT LİSTESİ SEÇİMİ ═════════════════════════════════════════════════════════════════════════════
   Sipariş formunda "Sipariş Ürünleri" başlık satırındaki liste çipi (yeni satır açmaz; sığmazsa alta iner), modül
   başlığında "Fiyat yok · 0 ₺" işareti + "stok kartı" rozeti, Fiyat Listesi kartında Varsayılan rozeti/düğmesi.
   Dolgu YOK (gece modunda AA'yı düşürür — bkz. .po-bolum-rozet notu): ton yalnız metin rengi + kenarlık, hepsi token. */
.po-section-title--fl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; }
.po-fl-cip {
    box-sizing: border-box; display: inline-block; max-width: 100%; min-width: 0; padding: 2px 8px;
    border: 1px solid var(--border); border-radius: 999px; background: transparent;
    font-size: 10.5px; font-weight: 600; line-height: 1.5; color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.po-fl-cip[hidden] { display: none; }
.po-fl-cip.is-uyari { color: var(--amber-ink); border-color: var(--amber-border); }
.po-fl-cip.is-tehlike { color: var(--rose-ink); border-color: var(--rose-surface-border); }
.po-mod-noprice.is-yok { color: var(--amber-ink); font-style: normal; font-weight: 600; }
.po-mod-kaynak {
    display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: 9.5px; font-weight: 600; line-height: 1.5; color: var(--text-muted); vertical-align: 1px; white-space: nowrap;
}
.pl-vars-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.pl-vars-rozet {
    display: inline-block; padding: 1px 8px; border: 1px solid var(--pri-border); border-radius: 999px;
    font-size: 10.5px; font-weight: 700; line-height: 1.6; color: var(--pri-text); white-space: nowrap;
}
.pl-vars-btn {
    box-sizing: border-box; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 999px; background: transparent; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.pl-vars-btn:hover { border-color: var(--pri-border); color: var(--pri-text); }
.pl-vars-btn:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.pl-vars-btn:disabled { cursor: default; color: var(--text-muted); }

/* ═══ 1.424.0 — teslim/foto: Üretim Siparişleri — sevk/teslim hücresi · fotoğraf çipi · teslim rozeti · galeri ═══
   Teslim bir ÜRETİM DURUMU değildir, kalemin kendi kolonudur: renk dili mevcut "Sevk edildi" rozetinin (yeşil,
   başarı) devamıdır — dördüncü bir vurgu rengi açılmaz. Hiyerarşi AĞIRLIKLA kurulur: teslim (son durum) kalın,
   sevk ikincil metin. Fotoğraf çipi nötrdür; galeri tek modal, iki görünüm (ızgara · büyük). Yalnız token. */
.po-st { display: flex; align-items: center; gap: 8px; }
.po-st-tar { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.po-st-s { color: var(--text-secondary); }
.po-st-t { color: var(--green-ink); font-weight: 700; }
.po-st-yok { color: var(--text-muted); }
.prod-mod-table th.po-st-th,
.prod-mod-table td.po-st-hucre { white-space: nowrap; }
.po-foto-cip {
    box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 28px; padding: 0 8px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card-bg); color: var(--text-secondary);
    font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.po-foto-cip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.po-foto-cip:hover { border-color: var(--pri-border); color: var(--pri-text); }
.po-foto-cip:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.po-teslim-tag {
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    color: var(--green-ink); background: color-mix(in srgb, var(--green) 14%, transparent);
    border-radius: 999px; padding: 3px 10px;
}
.po-item-undeliver { white-space: nowrap; }
.po-raw-shipped.is-teslim { background: color-mix(in srgb, var(--green) 14%, transparent); }
/* 1.425.0 — Üretim Hikâyesi'nin altında sevk / teslim fotoğrafı ÖNİZLEMESİ (galeri ızgarasının dili: adım etiketi
   solda, 128px 4:3 küçük resim). İndirme küçük resmin altındaki satırın sağında 28px hedef (yoğun yüzey eşiği). */
.story-foto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.story-foto-grup { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; padding: 8px 0; }
.story-foto-grup + .story-foto-grup { border-top: 1px solid var(--border-light); }
.story-foto-ad { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.story-foto-ad span { font-size: 10.5px; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.story-foto-grup.is-arsiv .story-foto-ad { color: var(--text-muted); }
.story-foto-iz { display: grid; grid-template-columns: repeat(auto-fill, 128px); gap: 8px; min-width: 0; }
.story-foto-k { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.story-foto-th { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.story-foto-th img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--content-bg);
}
.story-foto-th:hover img { border-color: var(--pri-border); }
.story-foto-th:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: var(--r-md); }
.story-foto-k figcaption { display: flex; flex-direction: column; min-width: 0; padding-right: 30px; }
.story-foto-kim, .story-foto-an { display: block; font-size: 10.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-foto-kim { font-weight: 600; color: var(--text-secondary); }
.story-foto-an { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.story-foto-dl {
    position: absolute; right: 0; bottom: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: var(--r-md); color: var(--pri-text);
}
.story-foto-dl:hover { background: var(--pri-light); }
.story-foto-dl:focus-visible { outline: 2px solid var(--pri); outline-offset: 1px; }
.story-foto-alt { display: flex; justify-content: flex-end; }
.po-galeri-bilgi a + a { margin-left: 0; }
.po-galeri-indir { gap: 4px; }
@media (max-width: 768px) {
    .story-foto-grup { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .story-foto-ad { flex-direction: row; align-items: baseline; gap: 6px; }
}
/* Önizleme dar ekranda BÜYÜMEZ (masaüstü 128px): telefonda üç eşit kolon ≈116px @390. */
@media (max-width: 480px) {
    .story-foto-iz { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.po-galeri { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.po-galeri-ust {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    font-size: 11px; color: var(--text-muted);
}
.po-galeri-bos { display: flex; flex-direction: column; gap: 4px; padding: 24px 8px; text-align: center; font-size: 12px; color: var(--text-muted); }
.po-galeri-bos b { font-size: 13px; color: var(--text-primary); }
.po-galeri-kalem { min-width: 0; }
.po-galeri-kalem + .po-galeri-kalem { padding-top: 16px; border-top: 1px solid var(--border); }
.po-galeri-kalem-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.po-galeri-kalem-ad { min-width: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.po-galeri-kalem-say { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.po-galeri-adim { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; padding: 8px 0; }
.po-galeri-adim + .po-galeri-adim { border-top: 1px solid var(--border-light); }
.po-galeri-adim-ad { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.po-galeri-adim-ad span { font-size: 10.5px; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.po-galeri-adim.is-arsiv .po-galeri-adim-ad { color: var(--text-muted); }
.po-galeri-izgara { display: grid; grid-template-columns: repeat(4, 128px); gap: 8px; }
.po-galeri-th {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in;
}
.po-galeri-th img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--content-bg);
}
.po-galeri-th:hover img { border-color: var(--pri-border); }
.po-galeri-th:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: var(--r-md); }
.po-galeri-th-kim, .po-galeri-th-an { display: block; font-size: 10.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-galeri-th-kim { font-weight: 600; color: var(--text-secondary); }
.po-galeri-th-an { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.po-galeri-buyuk { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.po-galeri-buyuk-ust { display: flex; align-items: center; gap: 12px; min-width: 0; }
.po-galeri-buyuk-ust .peron-btn { flex: 0 0 auto; }
.po-galeri-buyuk-bas { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-galeri-buyuk-bas b { color: var(--text-primary); }
.po-galeri-buyuk-say { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.po-galeri-sahne {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 240px; border-radius: var(--r-md); background: var(--content-bg); overflow: hidden; touch-action: pan-y;
}
.po-galeri-sahne img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(62vh, 640px); object-fit: contain; }
.po-galeri-sahne.is-yukleniyor img { opacity: 0; }
.po-galeri-sahne-not { position: absolute; font-size: 12px; color: var(--text-muted); }
.po-galeri-ok {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%;
    background: var(--card-bg); color: var(--text-primary); cursor: pointer;
}
.po-galeri-ok svg { width: 18px; height: 18px; }
.po-galeri-ok.is-sol { left: 8px; }
.po-galeri-ok.is-sag { right: 8px; }
.po-galeri-ok:disabled { opacity: .35; cursor: default; }
.po-galeri-ok:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
.po-galeri-bilgi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-secondary); }
.po-galeri-olcu { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* "Tam boy aç" ayrı bir eylemdir: dokunma kutusu 28px (yoğun yüzey eşiği), negatif kenar boşluğu satırı BÜYÜTMEZ. */
.po-galeri-bilgi a {
    display: inline-flex; align-items: center; align-self: center; min-height: 28px; padding: 0 6px; margin: -7px -6px -7px auto;
    font-size: 11px; font-weight: 600; color: var(--pri-text);
}

/* ≤768 modal alt-sheet'tir: adım etiketi küçük resimlerin ÜSTÜNE çıkar. Kolon sayısı ÖLÇÜLDÜ — 768'de iki kolon
   küçük resmi 362px'e büyütüyordu (masaüstünde 128px); tablette dört, telefonda iki eşit kolon (≈173px @390). */
@media (max-width: 768px) {
    .po-galeri-adim { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .po-galeri-adim-ad { flex-direction: row; align-items: baseline; gap: 6px; }
    .po-galeri-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .po-galeri-sahne img { max-height: 56vh; }
}
@media (max-width: 480px) {
    .po-galeri-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.po-galeri-sahne img { -webkit-user-drag: none; user-select: none; }

/* 1.437.0 — SEVK BELGESİ DÜZELTME penceresi (cari ekstresi → Düzenle). Yalnız token; satırlar sarar, kabından taşmaz. */
.sd-kunye { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; overflow-wrap: anywhere; }
.sd-not { font-size: 11px; color: var(--text-secondary); margin: 0 0 10px; }
.sd-t { width: 100%; }
.sd-t col.sd-c-mik { width: 64px; }
.sd-t col.sd-c-fiy { width: 136px; }
.sd-t .peron-input.sm { width: 100%; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; }
.sd-eksik { font-size: 10.5px; font-weight: 600; color: var(--amber-ink); }
.sd-alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 12px; }
@media (min-width: 769px) { .sd-alanlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sd-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.sd-alan .peron-input { width: 100%; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; }
.sd-ozet { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
           font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sd-ozet b { color: var(--text-primary); white-space: nowrap; }
@media (max-width: 768px), (pointer: coarse) {
    .sd-t .peron-input.sm, .sd-alan .peron-input { font-size: 16px; }
}

/* 1.438.0 — ALIŞ BELGESİ DÜZELTME penceresi (cari ekstresi → Mal Kabul satırı → Düzenle). Tablo kendi kabında kayar;
   sayfa yatay kaymaz. Yalnız token. */
.ab-ust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 10px; }
@media (min-width: 769px) { .ab-ust { grid-template-columns: minmax(0, 220px) minmax(0, 170px); } }
.ab-ust .sd-alan .peron-input { text-align: left; }
.ab-wrap { max-width: 100%; overflow-x: auto; box-sizing: border-box; }
/* Ürün kolonu dar bantta da ≥ 200px kalsın: sabit kolonlar 638px (+84 kur) → tablo kabında kayar, sayfa kaymaz. */
.ab-t { width: 100%; min-width: 840px; }
.ab-t--kur { min-width: 924px; }
.ab-t col.ab-c-mik { width: 84px; }
.ab-t col.ab-c-fiy { width: 128px; }
.ab-t col.ab-c-isk { width: 72px; }
.ab-t col.ab-c-kdv { width: 64px; }
.ab-t col.ab-c-dah { width: 58px; }
.ab-t col.ab-c-kur { width: 84px; }
.ab-t col.ab-c-tut { width: 120px; }
.ab-t col.ab-c-sil { width: 40px; }
.ab-t td { vertical-align: middle; }
/* Girdi hücresinde yatay dolgu dar: dokunmatikte 12px dolgu 16px'lik değeri ("41.25") kırpıyordu. */
.peron-table.ab-t th, .peron-table.ab-t td { padding-left: 6px; padding-right: 6px; }
.ab-t .peron-input.sm { width: 100%; min-height: 28px; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; }
/* Sayı kutularında döndürme okları değeri kırpıyordu ("20" → "2"): kaldırılır, girdi klavyeyle yapılır. */
.ab-t input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ab-t input[type="number"]::-webkit-inner-spin-button,
.ab-t input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ab-urun { min-width: 0; }
.ab-ad { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text-primary); }
.ab-alt { display: block; font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-uyar { color: var(--amber-ink); }
.ab-cip { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
          color: var(--pri-text); background: var(--pri-soft, var(--border-light)); }
.ab-fiyat { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ab-fiyat .peron-input.sm { flex: 1 1 auto; min-width: 0; }
.ab-pb { flex: 0 0 auto; font-size: 11px; color: var(--text-secondary); }
.ab-c { text-align: center; }
.ab-onay { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; cursor: pointer; }
.ab-onay input { width: 16px; height: 16px; margin: 0; }
.ab-bos { color: var(--text-muted); }
.ab-t td.ab-tutar { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); }
.ab-sil { min-width: 28px; min-height: 28px; padding: 0 6px; }
.ab-ekle { position: relative; max-width: 360px; margin-top: 10px; }
.ab-ekle .sd-alan .peron-input { text-align: left; }
/* Sonuç listesi akışta açılır: alttaki özetin üstüne binmez, modal içinde kırpılmaz. */
.ab-sonuc { margin: 4px 0 0; padding: 4px 0; list-style: none; max-height: 220px; overflow-y: auto;
            background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md, 8px); box-sizing: border-box; }
.ab-sec { display: block; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; background: none; text-align: left; cursor: pointer;
          font-size: 12.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-sec span { color: var(--text-muted); font-size: 11px; }
.ab-sec:hover, .ab-sec:focus-visible { background: var(--border-light); }
.ab-yok { padding: 6px 10px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 768px), (pointer: coarse) {
    .ab-t .peron-input.sm, .ab-ust .peron-input, .ab-ekle .peron-input { font-size: 16px; }
}