@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* design.md §1 — renk sistemi. Gradyan yok, düz renk. */
    --color-primary: #D9642B;
    --color-primary-dark: #B9501F;
    --color-ink: #1A1A1A;
    --color-surface: #FFFFFF;
    /* Renkli ya da koyu zemin üstündeki metin/ikon. Değeri --color-surface ile aynı ama rolü
       değil: yüzey bir ZEMİN, bu bir MÜREKKEP. Otuz kadar yerde `color: #fff` yazılıydı; rolün
       adı olmadığı için kimse tokeni aramamıştı. Zemini --color-surface ile karıştırmamak,
       ileride koyu tema ya da açık marka rengi geldiğinde ikisini ayrı ayarlayabilmek demek. */
    --color-on-accent: #FFFFFF;
    --color-gray-50: #F7F7F7;
    --color-gray-200: #E5E5E5;
    --color-gray-500: #737373;

    /* design.md §1 (2026-08-25) — ROL tokenleri. Bu beş isim 137 yerde kullanılıyordu ama HİÇBİRİ
       tanımlı değildi: her kullanım kendi fallback'iyle çalışıyordu ve `--color-surface-alt` beş
       ayrı gri ile yazılmıştı (#f2f2f2, #f5f5f5, #f6f6f6, #f7f7f7, #fafafa). Aynı rol beş renkti.
       Gri ölçek ham değerdir, aşağıdakiler roldür; CSS rolü kullanır. */
    --color-border: #E5E5E5;
    --color-border-soft: #F0F0F0;
    --color-surface-alt: #F7F7F7;
    --color-ink-muted: #737373;
    --color-primary-soft: #FDF1EA;

    /* R2 (2026-08-25) — sayfa tuvali. Her şey beyazdı: sayfa zemini, kart, tablo aynı renk olunca
       ekran tek düz yüzey gibi okunuyor, kartların sınırını yalnız 1px çizgi taşıyordu ve site
       "eski" duruyordu. Tuval bir ton koyu: kartlar kendiliğinden öne çıkıyor. */
    --color-canvas: #F1F2F4;

    /* Klavye odağı halkası. Bileşenlerde odak yalnız kenarlık rengiyle gösteriliyordu; ince bir
       çizginin rengi değişince klavyeyle gezen kullanıcı nerede olduğunu göremiyor. */
    --color-focus-ring: rgba(217, 100, 43, 0.45);

    /* Modal/çekmece/palet örtüsü. Üç bileşen `rgba(26,26,26,.5)` yazıyordu, komut paleti ise
       mavi-lacivert `rgba(15,23,42,.45)`: aynı iş dört yerde, biri farklı renkte. Tek token. */
    --color-backdrop: rgba(26, 26, 26, 0.5);

    /* design.md §1 — semantik durum tokenleri (marka rengi sayılmaz, gri ölçek gibi yapısal destek) */
    --color-danger: #B3261E;
    --color-danger-bg: #FBEEEE;
    --color-success: #2E7D46;
    --color-success-bg: #EAF6EE;
    --color-warning: #B7791F;
    --color-warning-bg: #FDF3E0;
    /* OneBadge'in `info` varyantı bu maviyi dosyasında ham hex olarak taşıyordu; varyant kullanımda
       olduğu için kaldırılmadı, palete alındı. */
    --color-info: #1B5E9C;

    /* design.md §2 — tipografi ölçeği (2026-08-25: sekiz kademe; 2026-07-22 ve 07-24'teki
       küçültme kararları korundu, kademeler var olan boyutlardan türetildi).
       Gövde 13px: kod tabanının baskın boyutu buydu, UI kiti ise 12px kullanıyordu — buton
       yanındaki sayfa metninden 1px küçüktü. Kademe değil kaymaydı, 13'te birleştirildi. */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Stok kodu, barkod ve jeton gibi karakter karakter okunan alanlar. Yedi ekranda
       `var(--font-mono, ui-monospace, monospace)` yazılıyordu ama token hiç tanımlı değildi:
       her ekran kendi yedeğiyle çalışıyordu; yedeği yazılmayan bir ekran gövde fontuna düşerdi. */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-metric: 22px;
    --text-page: 20px;
    --text-section: 16px;
    --text-subsection: 14px;
    --text-body: 13px;
    --text-dense: 12px;
    --text-caption: 11px;
    --text-micro: 10px;

    /* Eski adlar takma ad olarak duruyor: kullanan CSS'ler kırılmasın. Yeni kod bunları yazmaz. */
    --text-h1: var(--text-section);
    --text-h2: var(--text-body);
    --text-table: var(--text-caption);

    /* Satır yüksekliği ve ağırlık da tokendir: "13px + 1.2" gibi elle kırpılmış aralık yazılmaz. */
    --leading-tight: 1.25;
    --leading-snug: 1.4;
    --leading-normal: 1.5;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* design.md §2a — ikon boyutu. İkonlar yazı kademesi değil: kenar menüde tek dosyada dört
       ayrı boyut (13/14/15/16) vardı, hiçbiri bir karara dayanmıyordu. */
    --icon-sm: 13px;
    --icon-md: 16px;
    --icon-lg: 22px;

    /* design.md §1a (2026-07-26) — spacing/radius/shadow token'ları: mevcut, zaten kullanılan
       değerlerin SAF tokenizasyonu (görsel değişiklik yok), 27+ .razor.css dosyasında tekrarlanan
       magic number'ları tek kaynağa toplar. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 100px;

    /* design.md §1b (2026-08-25) — kontrol yüksekliği. Buton `padding: .5rem 1rem` ile 35px,
       girdi 7px dolguyla 33px, adımlayıcı 26px çıkıyordu: yan yana duran üç kontrol üç farklı
       yükseklikteydi ve hiçbiri karar değildi. Tek ölçü: 34px, yoğun bağlamda 28px. */
    --control-h: 34px;
    --control-h-sm: 28px;

    /* design.md §4 (2026-08-25, R6) — bayi alt araç çubuğu yüksekliği. İçerik dolgusu ve panel
       konumu aynı ölçüye bağlanır; sabit yazılsaydı üçü ayrı ayrı kayardı. */
    --bbar-h: 36px;

    /* (2026-08-26, kullanıcı kararı) Konteyner genişliği: üst çubuk, breadcrumb ve içerik
       bandı aynı tokeni okur. Önce 1200 denendi, kullanıcı 1440'a geri istedi; 1200 denemesinin
       üst çubuk sıkışma düzeltmeleri (arama alt sınırı, ad kısaltma, dar dolgular) duruyor —
       genişlik yeniden değişirse çubuk taşmaz. */
    --container-w: 1440px;

    /* Ölçeğin en küçük basamağı: kartı tuvalden ayırmaz, yalnız bir satırı komşusundan bir tık
       yukarı alır (kenar menüdeki aktif alt bağlantı). --shadow-sm bu iş için üç kat büyüktü,
       o yüzden kullanılmamış ve yerine elle rgba yazılmıştı. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* P4.1 — grafik kategorik paleti (accent'ten bağımsız, sabit; distinct hue'lar). */
    --chart-1: #2563EB;
    --chart-2: #D9642B;
    --chart-3: #2E7D46;
    --chart-4: #7C3AED;
    --chart-5: #0D9488;
    --chart-6: #B7791F;
}

/* design.md §1a / §6a (2026-07-26) — form sayfalarında 27+ dosyada birebir tekrarlanan
   grid/inline-form/aksiyon-çubuğu/hata deseni tek yere toplandı. Sayfa-özel .razor.css'ler
   artık kendi grid/aksiyon kurallarını YAZMAZ, bu sınıfları doğrudan markup'ta kullanır. */
.one-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.one-form-grid--compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.one-inline-form-panel {
    padding: var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background-color: var(--color-gray-50);
}

.one-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.one-field-error {
    font-size: var(--text-caption);
    color: var(--color-danger);
}

.one-field-required-marker {
    color: var(--color-danger);
    margin-left: 2px;
}

/* ============================================================
   design.md §6c (2026-07-26) — YATAY ETİKETLİ FORM YERLEŞİMİ
   Kullanıcı, WorkCube'un yoğun form düzenini seçti: etiket girdinin
   SOLUNDA (üstünde değil), alanlar tek panelde, ince bölüm başlıklarıyla
   ayrılmış. Bu blok TÜM form bileşenleri için ortaktır — her bileşen
   Horizontal="true" verildiğinde wrapper'ına .one-field--horizontal ekler,
   görsel kurallar burada TEK yerde yaşar (7 scoped CSS dosyasında tekrar
   edilmez). Grid kullanılır çünkü hata mesajının etiket sütununu atlayıp
   girdinin altına hizalanması gerekiyor.
   ============================================================ */
/* ÖZGÜLLÜK NOTU: Blazor CSS isolation, bileşenin kendi `.razor.css`'indeki
   `.one-input` kuralını derlerken `.one-input[b-xyz]` haline getirir — özgüllük
   (0,2,0). Buradaki global kuralın onu YENMESİ için sınıf adı bilinçli olarak
   tekrarlanır: üç kez yazılan seçici (0,3,0) olur ve yükleme sırasından bağımsız
   olarak kazanır. Alt seçicilerde iki tekrar (0,2,1) yeterlidir. Bu, 6 bileşenin
   scoped CSS'inde aynı bloğu tekrar etmemek için ödenen bilinçli bir bedeldir. */
.one-field--horizontal.one-field--horizontal.one-field--horizontal {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-1) var(--space-2);
}

.one-field--horizontal.one-field--horizontal > label {
    text-align: right;
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    line-height: 1.3;
}

.one-field--horizontal.one-field--horizontal > .one-field-error {
    grid-column: 2;
}

/* Yatay modda girdiler bir kademe daha sıkı — WorkCube yoğunluğu. */
.one-field--horizontal.one-field--horizontal input,
.one-field--horizontal.one-field--horizontal select,
.one-field--horizontal.one-field--horizontal textarea {
    padding: 0.35rem 0.55rem;
}

/* Tek panelli formun üst checkbox şeridi (Satılabilir / Satın Alınabilir / ...) */
.one-form-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Panel içi bölüm başlığı — ayrı bir OneCard açmadan grupları ayırır.
   Altındaki kısa çizgi bilinçli olarak metinden DAHA KISA ve soluk: bölümü
   işaretlemeye yetecek kadar, dikkati başlıktan çalmayacak kadar. */
.one-form-section-caption {
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    margin: var(--space-5) 0 var(--space-3);
}

.one-form-section-caption::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 5px;
    border-radius: var(--radius-pill);
    background-color: var(--color-gray-200);
}

.one-form-section-caption:first-child {
    margin-top: 0;
}

/* Yatay etiketli alanların ızgarası. Sayfa genişliği sınırlanmıyor (kullanıcı kararı, 2026-07-26:
   form sayfaları da liste sayfaları gibi container-fluid kalır), ama SÜTUN genişliği sınırlı.

   Ne vardı: sütunlar `1fr` ile esniyordu, yani alanın genişliğini o bölümde kaç alan olduğu
   belirliyordu. Ayarlar ekranında sekiz alanlı bölümde girdi 242px, iki alanlı bölümde 432px
   çıkıyordu: tutar kutusu adres kutusundan 1.8 kat genişti. Ne yapıldı: sütun tavanı 420px,
   ızgara soldan hizalı. Bölümdeki alan sayısı değişse de kutu aynı kalıyor. */
.one-form-hgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 420px));
    justify-content: start;
    gap: var(--space-2) var(--space-5);
}

.one-form-hgrid--single {
    grid-template-columns: 1fr;
}

/* KPI şeridi (2026-08-28). Yirmi üç sayfa aynı ızgarayı kendi sınıfıyla yazıyordu ve hiçbiri
   ötekiyle aynı değildi: minmax 160/170/190px, gap 10/12/--space-3, alt boşluk 4/6/12/16px,
   kimi grid kimi flex. Aynı KPI şeridi ekrandan ekrana başka sütun sayısına düşüyordu. */
.one-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Liste tablosundaki sıra numarası sütunu — OneListPage otomatik ekler. */
.one-list-col-index {
    width: 40px;
    text-align: center;
}

/* (h) 2026-08-25 — süzgeç-boşluğu mesajı ve temizleme eylemi (OneListPage EffectiveEmptyTemplate
   RenderTreeBuilder ile üretir; builder içeriği scoped b-xxx attribute'u almadığından sınıflar
   global). Buton kutusu boş satırı kalabalıklaştırırdı; bağlantı görünümü yeter, tek eylem bu. */
.one-empty-note {
    color: var(--color-gray-500);
    font-size: var(--text-body);
}

.one-empty-clear {
    margin-left: 8px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--text-body);
    font-family: inherit;
    cursor: pointer;
}

.one-empty-clear:hover {
    text-decoration: underline;
}

/* Sayısal hücre (miktar, tutar, yüzde): sağa yaslı, rakamlar sabit genişlikli — üst üste gelen
   sayılar hizalı okunur. 34 dosyada 187 kullanım vardı ama sınıfın TANIMI hiç yazılmamıştı:
   sayı kolonları sola yaslı ve orantılı rakamla dağınık okunuyordu. MashaERP app.css'teki
   tanımın birebir kopyası (One* kütüphanesi kopya-senkron ilkesi).
   Dikkat: sayfaların scoped `.x-table th, .x-table td` kuralları `text-align: left`i
   tekrarlıyordu ve derlenince (0,2,1) spesifiklikle bu sınıfı eziyordu — global `th, td`
   zaten left verdiği için o tekrarlar silindi, hiza tek kaynaktan akar. Scoped tablo
   kuralına text-align YAZMA. */
.one-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Tablo satırı içindeki ikon aksiyonu (Düzenle/Pasifleştir vb.) — tüm liste
   sayfalarında aynı görünsün diye global. */
.one-row-btn {
    border: none;
    background: none;
    color: var(--color-gray-500);
    font-size: var(--text-body);
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.one-row-btn:hover {
    background-color: var(--color-gray-200);
    color: var(--color-ink);
}

/* Alana özgü fiil taşıyan satır aksiyonları (Tahsil Et / Ciro Et / Karşılıksız)
   ikonla ayırt edilemez — kullanıcı hangisinin hangisi olduğunu ancak üzerine
   gelerek anlar. Bu durumlarda buton metin taşır, sadece küçülür. */
.one-row-btn--text {
    padding: 2px 6px;
    font-size: var(--text-caption);
    border: 1px solid var(--color-gray-200);
    white-space: nowrap;
}

/* ============================================================
   design.md §6c (2026-07-26) — LİSTE SAYFASI YERLEŞİMİ
   Seçilen desen: KART YOK, filtreler sayfa zemininde ve HER ZAMAN açık,
   tek marka vurgusu (sadece "+" dolu turuncu; "Ara" aynı turuncunun
   çerçeveli hali — iki dolu renk yarışmaz).
   ============================================================ */
/* Liste içeriği, diğer iç sayfalar gibi beyaz bir yüzeyin üzerinde durur —
   sayfa zemini (gray-50) doğrudan tablonun arkasında görünmez. */
.one-list-surface {
    background: var(--color-surface);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.one-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* Sayfa başlığı kademesi: liste başlığı 13px/700, form başlığı 16px/600, global h1 16px/600 idi —
   aynı ekran ailesinde başlık boyutu sayfa türüne göre değişiyordu ve hiçbiri design.md §2'nin
   sayfa kademesi (20px/semibold) değildi. Üçü de `--text-page` + `--weight-semibold` oldu. */
.one-list-title {
    font-size: var(--text-page);
    font-weight: var(--weight-semibold);
    margin: 0;
}

/* Filtre çubuğu tablodan bir ayraçla ve belirgin bir boşlukla ayrılır. */
.one-list-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Filtre çubuğundaki bileşenler etiketsiz ve dar kullanılır. */
.one-list-filterbar .one-input,
.one-list-filterbar .one-select,
.one-list-filterbar .one-searchable-select {
    width: auto;
    min-width: 130px;
}

.one-list-filterbar input,
.one-list-filterbar select {
    padding: 0.35rem 0.5rem;
}

.one-list-btn {
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 var(--space-2);
    font-family: var(--font-family);
    font-size: var(--text-body);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.one-list-btn:hover {
    background: var(--color-gray-50);
}

.one-list-btn--search {
    width: 30px;
    padding: 0;
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.one-list-btn--add {
    width: 30px;
    padding: 0;
    margin-left: auto;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-accent);
    font-size: var(--icon-md);
    line-height: 1;
}

.one-list-btn--add:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Liste satırındaki durum göstergesi — rozet/pill DEĞİL, nokta + metin. */
.one-list-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    margin-right: 5px;
    vertical-align: middle;
    background: var(--color-gray-500);
}

.one-list-status-dot--on {
    background: var(--color-success);
}

.one-list-status--off {
    color: var(--color-gray-500);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--text-body);
    color: var(--color-ink);
    background: var(--color-canvas);
}

/* R2 (2026-08-25) — kabuk konteyneri. Üst çubuğun içeriği tam genişliğe yayılırken sayfa içeriği
   1440px'te ortalanıyordu: geniş ekranda menü ile içeriğin sol kenarı hizalanmıyordu. Üst çubuk,
   breadcrumb ve sayfa gövdesi aynı kutuda oturur; bantların zemini tam genişlik kalır. */
.one-container {
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

@media (max-width: 860px) {
    .one-container {
        padding-inline: var(--space-3);
    }
}

h1 {
    font-size: var(--text-page);
    font-weight: var(--weight-semibold);
    margin: 0 0 16px;
}

h2 {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    margin: 0 0 12px;
}

table {
    font-size: var(--text-caption);
    border-collapse: collapse;
    width: 100%;
    background: var(--color-surface);
}

th, td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-gray-200);
}

th {
    font-weight: var(--weight-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    font-size: var(--text-caption);
    letter-spacing: 0.02em;
}

.btn {
    border-radius: var(--radius-md);
    padding: 8px 16px;
    font-size: var(--text-body);
    border: 1px solid var(--color-gray-200);
    background: var(--color-surface);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
    background: var(--color-gray-50);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

button {
    font-family: inherit;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-on-accent);
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 16px;
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.app-content {
    padding: 20px 24px;
    width: 100%;
}

/* Bayi kabuğu varken içerik alanının KENDİSİ konteyner: üst çubuk ve breadcrumb ile aynı kutu
   (1440px). Sayfa sayfa `.one-container` eklemek 16 bayi sayfasında unutulmaya açıktı — biri
   unutulunca içerik kenara yapışıyordu. Satıcı paneli etkilenmez (bnav yok). */
/* (2026-08-26, kullanıcı kararı) İçerik bandı BEYAZ: gri tuval üstünde yüzen kartlar "iç
   sayfalar şekilsiz" hissi veriyordu; e-ticaret sitelerindeki gibi 1440px'lik beyaz bir bant
   içerik zemini olur, gri tuval yalnız geniş ekranın kenarlarında kalır. Bant hairline'la
   tanımlanır ve viewport'un dibine kadar uzar (kısa sayfada dibi griye dönmesin). */
.app-shell:has(.bnav) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-shell:has(.bnav) .app-body {
    flex: 1;
    display: flex;
}

.app-shell:has(.bnav) .app-content {
    max-width: var(--container-w);
    margin-inline: auto;
    box-sizing: border-box;
    background: var(--color-surface);
    border-inline: 1px solid var(--color-border-soft);
    /* R6: alt araç çubuğu sabit (fixed) — dolgu verilmezse sayfanın son satırı çubuğun
       altında kalıyordu. Mobilde çubuk gizli, oradaki kural eski dolguda kalır. */
    padding: var(--space-4) var(--space-5) calc(var(--space-6) + var(--bbar-h));
}

/* R6: tarayıcı bir öğeyi görünüme kaydırırken (klavye odağı, scrollIntoView) öğeyi viewport'un
   en altına koyuyordu ve sabit alt çubuk onu örtüyordu — canlı testte alttaki ürün bağlantısına
   tıklama çubuğa gitti. scroll-padding hedefi çubuğun üstünde konumlatır. */
html:has(.bnav) {
    scroll-padding-bottom: calc(var(--bbar-h) + 8px);
}

/* Kart dili (2026-08-26, kullanıcı kararı: "tüm bayi kart dili modernleşsin"): 8px köşe bayi
   vitrininde sert duruyordu; BAYİ kabuğunda kart yuvarlaklığı 12px'e, kontrol yuvarlaklığı
   (buton/girdi/select --radius-md kullanır) 8px'e çıkar. Token globalde değişmez — panel
   WorkCube dilinde kalır, aynı sınıflar orada 8/6px döner. */
.app-shell:has(.bnav) {
    --radius-lg: 12px;
    --radius-md: 8px;
}

@media (max-width: 860px) {
    .app-shell:has(.bnav) .app-content {
        padding: var(--space-3) var(--space-3) var(--space-5);
    }
}

/* Hata kırmızısı üç ayrı hexti (#c0392b doğrulama, #b32121 hata şeridi, token #B3261E bileşenler):
   aynı formda üç farklı kırmızı görünüyordu. Hepsi `--color-danger`e bağlandı. */
.validation-message {
    color: var(--color-danger);
    font-size: var(--text-caption);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

#blazor-error-ui {
    background: var(--color-gray-50);
    bottom: 0;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYWxlcnQtdHJpYW5nbGUiPjxwYXRoIGQ9Ik0xMC4yOSAzLjg2TDEuODIgMThhMiAyIDAgMCAwIDEuNzEgM2gxNi45NGEyIDIgMCAwIDAgMS43MS0zTDEzLjcxIDMuODZhMiAyIDAgMCAwLTMuNDIgMHoiPjwvcGF0aD48bGluZSB4MT0iMTIiIHkxPSI5IiB4Mj0iMTIiIHkyPSIxMyI+PC9saW5lPjxsaW5lIHgxPSIxMiIgeTE9IjE3IiB4Mj0iMTIuMDEiIHkyPSIxNyI+PC9saW5lPjwvc3ZnPg==) no-repeat 1rem/1.8rem, var(--color-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* P4.1 — grafik bileşenleri (OneBarChart/OneDonut SVG'yi MarkupString ile bastığı için stiller
   scoped .razor.css'te DEĞİL, global burada; MarkupString elemanları scope attribute almaz). */
.one-chart-empty {
    padding: 24px;
    text-align: center;
    color: var(--color-gray-500);
    font-size: var(--text-caption);
}

.one-barchart {
    display: block;
    font-family: var(--font-family);
}

.one-chart-axis { stroke: var(--color-gray-200); stroke-width: 1; }
/* `--color-gray-600` hiç tanımlanmamıştı ve fallback'i de yoktu: `fill` unset'e düşüp grafik
   rakamı siyah doluyordu. Rol tokeni (`--color-ink-muted`) ikincil metnin doğru karşılığı. */
.one-chart-value { fill: var(--color-ink-muted); font-size: var(--text-micro); font-weight: var(--weight-semibold); }
.one-chart-label { fill: var(--color-gray-500); font-size: var(--text-micro); }

.one-donut {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-family: var(--font-family);
}

.one-donut-svg { flex: none; }
.one-donut-total { fill: var(--color-ink); font-size: var(--text-section); font-weight: var(--weight-bold); }
.one-donut-total-label { fill: var(--color-gray-500); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: .05em; }

.one-donut-legend { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.one-donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-caption); }
.one-donut-swatch { width: 12px; height: 12px; border-radius: var(--radius-sm); flex: none; }
.one-donut-legend-label { color: var(--color-ink-muted); flex: 1; }
.one-donut-legend-value { color: var(--color-ink); font-weight: var(--weight-semibold); }
.one-donut-pct { color: var(--color-gray-500); font-weight: var(--weight-regular); margin-left: 4px; }

/* OneRichText'in İÇERİK stilleri global durmak ZORUNDA: editörün içindeki HTML'i JS basıyor, kapsamlı
   (scoped) CSS o düğümlere işlemiyor — OneBarChart/OneDonut'ta da aynı tuzağa düşülmüştü.
   .one-richtext-render aynı biçimi salt-okunur gösterimde (sanitize edilmiş açıklama) kullanır. */
.one-richtext-area p,
.one-richtext-render p { margin: 0 0 8px; }

.one-richtext-area h2,
.one-richtext-render h2 { margin: 12px 0 6px; font-size: var(--text-section); font-weight: var(--weight-bold); color: var(--color-ink); }

.one-richtext-area h3,
.one-richtext-render h3 { margin: 10px 0 5px; font-size: var(--text-subsection); font-weight: var(--weight-bold); color: var(--color-ink); }

.one-richtext-area ul, .one-richtext-area ol,
.one-richtext-render ul, .one-richtext-render ol { margin: 0 0 8px; padding-left: 22px; }

.one-richtext-area li,
.one-richtext-render li { margin: 2px 0; }

.one-richtext-area a,
.one-richtext-render a { color: var(--color-primary); }

.one-richtext-area code,
.one-richtext-render code {
    font-family: var(--font-mono, monospace);
    background: var(--color-surface-alt);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
}

.one-richtext-area blockquote,
.one-richtext-render blockquote {
    margin: 8px 0;
    padding: 4px 12px;
    border-left: 3px solid var(--color-border);
    color: var(--color-ink-muted);
}

.one-richtext-area > *:last-child,
.one-richtext-render > *:last-child { margin-bottom: 0; }

.one-richtext-render {
    font-size: var(--text-body);
    color: var(--color-ink);
}

/* ------------------------------------------------------------------ yazdırma
   Belge ekranları (sipariş fişi gibi) yazdırılırken uygulama kabuğu kağıda basılmaz:
   üst çubuklar, kenar menüsü, bildirimler ve hata şeridi gizlenir. */
@media print {
    /* (i) 2026-08-26: `.bnav-bar` R0'daki yeniden yazımda `.bnav` oldu ama bu liste
       güncellenmemişti; R6'nın alt çubuğu da eklenmemişti — ikisi de kağıda basılıyordu
       (print emülasyonuyla yakalandı). */
    .top-nav,
    .bnav,
    .bbar,
    .app-body > aside,
    .one-sidebar,
    .one-toast-host,
    #blazor-error-ui,
    blazor-error-ui {
        display: none !important;
    }

    .app-content,
    main {
        padding: 0 !important;
        margin: 0 !important;
    }

    body {
        background: var(--color-surface) !important;
    }
}

/* --- Klavye odağı (Faz 18, 2026-08-21) ---
   Bileşenler odakta `outline: none` yazıp yerine kenarlık rengi koyuyor; o da tek başına
   yetmiyor. Kural tek yerde kalıyor ve `:focus-visible` seçildi — fareyle tıklayana halka
   çıkmaz, klavyeyle gezene çıkar.

   (2026-08-26) Halka `box-shadow` ile çiziliyordu; `box-shadow` kutu akışının parçası olduğu
   için `overflow: hidden` taşıyan kapsayıcı onu KIRPIYOR. Sepet satırı, adımlayıcı, ürün kartı,
   sekme şeridi ve bildirim paneli dahil 12 kapsayıcıda halka kesiliyordu: klavyeyle miktar
   değiştiren bayi nerede olduğunu göremiyordu. `outline` kırpılmaz — halka `outline`a taşındı,
   `outline-offset: -1px` ile kenarlığın üstüne oturuyor ve komşu satırı itmiyor.
   Buradaki `border-radius` satırı da silindi: `box-shadow` halkasına köşe vermek için gerekliydi
   ama öğenin KENDİ köşesini eziyordu — hap biçimli düğme odaklanınca 4px'e düşüp bırakınca geri
   dönüyordu. `outline` öğenin kendi köşesini zaten izler. */
:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: -1px;
}

/* Odağı programla alan hedefler (`tabindex="-1"`) halka çizdirmez. Somut olay: `FocusOnNavigate`
   her gezinmede sayfa başlığına odaklanıyor, bu yüzden HER ekran başlığının etrafında bir kutuyla
   açılıyordu — fareyle gelen kullanıcı için anlamsız gürültü. Odağın taşınması ekran okuyucu için
   önemli, halkanın çizilmesi değil. Kural modal/çekmece istisnasından ÖNCE durur; ikisi de aynı
   özgüllükte, sonraki kazanır. */
[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Modal ve çekmece gövdesinin `box-shadow: var(--shadow-md)` istisnası kalktı: global kural
   artık `box-shadow`a dokunmuyor, ikisinin gölgesi kendi dosyasından zaten geliyordu. */

/* Klavyeyle gezenin ana içeriğe atlaması: menüde onlarca bağlantı var, her sayfada tek tek
   geçmek zorunda kalmasın. Odaklanınca görünür olur. */
.one-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-on-accent);
    border-radius: 0 0 var(--radius-md) 0;
    font-weight: var(--weight-semibold);
}

.one-skip-link:focus {
    left: 0;
}

/* Yalnız ekran okuyucunun duyduğu metin. Renk ya da ikonla anlatılan bir şeyin sözcük karşılığını
   koymak için: "dikkat" rozetini gören görür, görmeyen duyar. Görsel akışı bozmadan durur —
   display:none olsaydı ekran okuyucu da atlardı. */
.one-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Panel kenar menüsünün dar ekran perdesi. AppSidebar çiziyor ama o bileşenin kapsamlı CSS
   dosyası yok; kural global durmalı, yoksa hiç eşleşmez. Üst çubuğun altından başlıyor:
   hamburger perdenin üstünde kalıp menüyü kapatabilmeli. */
.app-nav-backdrop {
    display: none;
}

@media (max-width: 900px) {
    .app-nav-backdrop {
        display: block;
        position: fixed;
        inset: 56px 0 0 0;
        z-index: 25;
        background: var(--color-backdrop);
    }
}

/* Dar ekranda başlık satırı sarar: başlık + eylemler (Excel indir/yükle, dosya seçici) tek
   satıra sığmıyor ve sayfayı itiyordu. Eylemler başlığın altına iner, sola yaslanır. */
@media (max-width: 900px) {
    .one-list-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .one-list-header-actions {
        flex-wrap: wrap;
    }
}