/* UI polish (MudBlazor üstüne, güvenli görsel incelikler) */

/* ===== TEMA TOKEN'LARI =====
   Renkler doğrudan yazılmaz; buradan gelir. Sebep: koyu tema eklenince sabit renkler
   (beyaz kart / koyu yazı) olduğu yerde kalır ve okunmaz hâle gelir.
   Açık tema = :root · koyu tema = :root[data-theme="dark"] (B2C ile aynı sözleşme).
   Marka renkleri (lacivert/amber/kırmızı) İKİ temada da marka olarak kalır — sadece
   zemin/yazı/çizgi tonları değişir. */
/* 9. paket: değerler artık TEMADAN GELİR (tema.css tek kaynak). Bu blok eski adları
   yeni token'lara BAĞLAR — eski adı kullanan ekranlar göç bitene kadar çalışmaya devam eder.
   Buraya hex YAZILMAZ; koyu blok B2C sözleşmesi gereği duruyor (B2B daima açık). */
:root {
    --fp-bg: var(--fp-zemin);
    --fp-surface: var(--fp-yuzey);
    --fp-surface-2: var(--fp-yuzey2);
    --fp-surface-3: var(--fp-zemin2);
    --fp-hover: var(--fp-vurgu-zemin);       /* satır hover */
    --fp-hover-2: var(--fp-vurgu-zemin);
    --fp-line: var(--fp-cizgi2);             /* ince ayraç */
    --fp-line-2: var(--fp-cizgi2);           /* kart kenarı */
    --fp-line-3: var(--fp-cizgi);            /* input/chip kenarı */
    --fp-text: var(--fp-murekkep);
    --fp-text-dim: var(--fp-murekkep2);
    --fp-text-mute: var(--fp-murekkep3);
    --fp-text-soft: var(--fp-murekkep3);
    --fp-text-strike: var(--fp-murekkep3);   /* üstü çizili eski fiyat */
    /* DİKKAT: --fp-navy = AÇIK zemin üstünde yazı/kenar rengi. Koyu çubuk ZEMİNİ için
       kullanma → koyu temada açık maviye döner ve üstündeki beyaz yazıyı yutar.
       Koyu çubuklar (ERP tablo başlığı vb.) için --fp-bar-* kullan. */
    --fp-navy: var(--fp-vurgu);              /* marka lacivert (yazı/kenar) */
    --fp-bar-1: var(--fp-vurgu);             /* koyu çubuk zemini — üstü daima --fp-on-navy */
    --fp-bar-2: var(--fp-vurgu-koyu);
    --fp-on-navy: var(--fp-yuzey);
    /* DOLU/seçili çipin (filtre sayacı, sıralama çipi) yazısı. --fp-on-navy'den AYRI olmalı:
       koyu temada çip zemini AÇILIR (mavi/yeşil açık tona döner) → üstünde beyaz yazı okunmaz.
       Bu token koyu temada koyuya döner. */
    --fp-on-accent: var(--fp-yuzey);
    --fp-link: var(--fp-vurgu);              /* marka adı/bağlantı — tek vurgu rengi */
    --fp-accent: var(--fp-vurgu-orta);       /* bölüm başlığı/ikon/kart vurgusu (ana sayfa) */
    --fp-ok: var(--fp-iyi);
    --fp-ok-bg: var(--fp-iyi-zemin);
    --fp-ok-line: var(--fp-iyi-cizgi);
    --fp-ok-strong: var(--fp-iyi);
    --fp-err: var(--fp-kritik);
    --fp-err-bg: var(--fp-kritik-zemin);
    --fp-err-line: var(--fp-kritik-cizgi);
    --fp-err-text: var(--fp-kritik);
    --fp-scroll: var(--fp-cizgi);
    --fp-zebra: var(--fp-yuzey2);            /* tablo çift satır */
}

:root[data-theme="dark"] {
    --fp-bg: #0d1622;
    --fp-surface: #16212e;
    --fp-surface-2: #1b2836;
    --fp-surface-3: #223041;
    --fp-hover: #1d2b3b;
    --fp-hover-2: #22344a;
    --fp-line: #243447;
    --fp-line-2: #243447;
    --fp-line-3: #33455c;
    --fp-text: #e6edf5;
    --fp-text-dim: #cfd8e3;
    --fp-text-mute: #8fa2b7;
    --fp-text-soft: #8fa2b7;
    --fp-text-strike: #7d8b9c;
    /* Lacivert koyu zeminde "marka" değil "görünmez" olur → aynı ailenin açık tonu */
    --fp-navy: #7ea6d8;
    /* Çubuk zemini koyu KALIR (yazısı beyaz); sadece bir tık daha derin */
    --fp-bar-1: #17293f;
    --fp-bar-2: #0f1b2a;
    --fp-on-navy: #eef3f9;
    /* Açık mavi/yeşil çip zemini üstünde KOYU yazı (Material "container" kalıbı) */
    --fp-on-accent: #0d1622;
    --fp-link: #64b5f6;
    --fp-accent: #8ab4e8;
    --fp-ok: #66bb6a;
    --fp-ok-bg: #14301c;
    --fp-ok-line: #2e5d38;
    --fp-ok-strong: #81c784;
    --fp-err: #ef5350;
    --fp-err-bg: #3a1b1b;
    --fp-err-line: #6d3030;
    --fp-err-text: #ff8a80;
    --fp-scroll: #3a4c63;
    --fp-zebra: #18242f;
}

/* Ürün görselleri: kaynak PNG'ler BEYAZ zemin varsayar (şeffaf olsalar bile beyaz için
   çizilmişler) → koyu temada görsel kutusu beyaz kalmalı, yoksa parça siyaha gömülür. */
:root { --fp-img-bg: #ffffff; }
:root[data-theme="dark"] { --fp-img-bg: #e9edf1; }

/* Modern, net sistem-fontu (Windows'ta Segoe UI — ekstra indirme yok) */
body, .mud-typography, .mud-input, .mud-button-root, .mud-table {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Arka plan — düz gri yerine çok hafif derinlik */
body { background: var(--fp-bg); }

/* Modern, ince scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--fp-scroll) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--fp-scroll); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--fp-navy); }
*::-webkit-scrollbar-track { background: transparent; }

/* Yumuşak global geçişler */
.mud-button-root, .mud-card, .mud-chip, .mud-nav-link, .mud-icon-button {
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* Ürün/kategori/marka kartları — hover'da hafif yüksel + gölge (katalog canlansın) */
.b2b-card, .mud-card.b2b-hover {
    transition: transform .16s ease, box-shadow .16s ease;
    will-change: transform;
}
.b2b-card:hover, .mud-card.b2b-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30, 58, 95, .14) !important;
}

/* KPI / dashboard kartlarına hafif derinlik */
.mud-paper { box-shadow: 0 1px 3px rgba(28, 39, 51, .08); }

/* Ürün görseli — tutarlı oran, yumuşak zoom */
.b2b-product-img {
    object-fit: contain;
    background: var(--fp-img-bg);
    transition: transform .25s ease;
}
.b2b-card:hover .b2b-product-img { transform: scale(1.04); }

/* Resimsiz ürün placeholder — boş gri yerine zarif desen */
.b2b-noimg {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--fp-surface-3) 0%, var(--fp-surface-2) 100%);
    color: var(--fp-text-mute);
}

/* Fiyat vurgusu */
.b2b-price { font-weight: 700; color: var(--fp-navy); letter-spacing: -.02em; }

/* Stok rozetleri yumuşat */
.b2b-badge { border-radius: 10px; font-size: .72rem; font-weight: 600; padding: 1px 9px; }

/* Sayfa başlıkları — biraz daha karakterli */
.mud-typography-h4, .mud-typography-h5 { letter-spacing: -.015em; }

/* ÜST ŞERİT (9. paket göçü — MainLayout gömülü <style> buraya söküldü, token'lı):
   gümüş gövde + 3px lacivert tepe çizgisi (taslaktaki e-tepe/e-ust dili). Koyu lacivert
   çubuk GİTTİ — logo artık açık zemin üstünde, "çıkartma" kutusuna gerek kalmadı.
   Tenant marka rengi MainLayout'taki inline style ile EZMEYE devam eder (beyaz etiket). */
/* Seçici ÇİFT sınıflı: MudAppBar kendine `mud-theme-primary` basıyor (0,2,0) — tek sınıflı
   kuralımız renkte yeniliyordu ve logo yazısı gümüş bar üstünde BEYAZ kalıyordu (K-01 kalıntısı). */
.mud-appbar, .mud-appbar.mud-theme-primary {
    background: linear-gradient(180deg, var(--fp-yuzey) 0%, var(--fp-yuzey2) 100%);
    color: var(--fp-murekkep);
    border-bottom: 1px solid var(--fp-cizgi);
    box-shadow: 0 2px 8px rgba(16, 30, 51, .07) !important; /* MudBlazor elevation'ını ezer — tek satır gerekçeli */
}
/* K-02: künye tepe çizgisi — 3px lacivert, sağa doğru gümüşe bırakır (taslak e-tepe).
   border-image DEĞİL sahte eleman: border-image alt kenarın 1px çizgisini de boyuyordu. */
.mud-appbar::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--fp-vurgu-koyu) 0%, var(--fp-vurgu-orta) 26%, var(--fp-vurgu-acik) 30%, var(--fp-cizgi) 30%, var(--fp-cizgi) 100%);
}
.mud-appbar .mud-button-root:hover { background: color-mix(in srgb, var(--fp-vurgu) 8%, transparent); border-radius: 6px; }
/* Üst bar araması: ön rengi BARDAN alır — ama `inherit` ile DEĞİL (05.09 CAN canlı ölçümü: kiracı
   lacivert barda input yazısı #16202A kaldı, görünmezdi). Kök: MudBlazor `.mud-input` kendi rengini
   basar, `inherit` oradan gelir; barın beyazı inputa hiç inmiyordu. Çözüm: barın ön rengi
   `--fp-ustbar-on` değişkeninde taşınır (varsayılan gümüş bar → mürekkep; kiracı rengi
   MainLayout.BuildAppBarStyle inline'da aynı değişkeni de yazar) ve input bunu DOĞRUDAN kullanır.
   !important: MudBlazor input renklerine karşı. */
.mud-appbar { --fp-ustbar-on: var(--fp-murekkep); }
/* K-07 md.3: 1280-1920 arası TEK SATIR disiplini. Sıkışınca kademeli kısalma:
   önce arama daralır, sonra kur tarihi → EUR gizlenir, en son bakım rozeti ikonlaşır. */
.appbar-search { flex: 0 1 auto; }
@media (max-width: 1500px) {
    .ustserit-kur .kur-tarih { display: none; }
    .appbar-search { min-width: 180px !important; } /* markup'taki inline min-width'i ezer — tek satır uğruna */
}
/* K11 (CAN VM 11.09): 1400 px'te arama kutusu açıkken 9 menü öğesi sığmıyor, başlıklar iki satıra kırılıyordu.
   Menü düğmesi hiçbir genişlikte iki satır olmaz (nowrap); 1450 altında arama biraz daha daralır, düğme dolgusu kısalır. */
.nav-desktop .mud-button-root { white-space: nowrap; }
@media (max-width: 1450px) {
    .appbar-search { min-width: 150px !important; max-width: 230px !important; }
    .nav-desktop .mud-button-root { padding-left: 8px; padding-right: 8px; font-size: .8rem; }
    .nav-desktop .mud-button-root .mud-button-icon-start { margin-right: 4px; }
}
@media (max-width: 1380px) { .ustserit-kur .kur-eur { display: none; } }
@media (max-width: 1300px) { .ustserit-bakim .bakim-metin { display: none; } }
.appbar-search .mud-input, .appbar-search .mud-input-root, .appbar-search input { color: var(--fp-ustbar-on) !important; }
.appbar-search input::placeholder { color: var(--fp-ustbar-on) !important; opacity: .7 !important; }
.appbar-search .mud-input-label, .appbar-search label,
.appbar-search .mud-icon-root { color: var(--fp-ustbar-on) !important; opacity: .85; }
/* Kutu zemini: ön rengin %8'i — koyu barda hafif beyaz, gümüş barda hafif koyu; odakta %14. */
.appbar-search .mud-input-outlined { background: color-mix(in srgb, var(--fp-ustbar-on) 8%, transparent); border-radius: 4px; }
.appbar-search .mud-input-outlined.mud-input-focused { background: color-mix(in srgb, var(--fp-ustbar-on) 14%, transparent); }
.appbar-search .mud-input-outlined-border { border-color: color-mix(in srgb, var(--fp-ustbar-on) 45%, transparent) !important; }
.appbar-search .mud-input-root:hover .mud-input-outlined-border,
.appbar-search .mud-input-focused .mud-input-outlined-border { border-color: color-mix(in srgb, var(--fp-ustbar-on) 80%, transparent) !important; }
/* Birincil düğme: temanın İKİNCİ (ve son) gradyanı. app.css MudBlazor'dan sonra yüklenir,
   seçici daha özgül — !important gerekmez. */
.mud-button-filled.mud-button-filled-primary { background: var(--fp-grad-birincil); }
/* Tablo başlığı: hafif gümüş şerit */
.mud-table-head .mud-table-row { background: var(--fp-yuzey2); }
.mud-chip.mud-chip-outlined { border-width: 1.5px; }

/* K0.5 maskeli tutar: rakam yerine noktalar, aynı yükseklik/kalınlık — düzen kaymasın */
.maskeli-tutar { letter-spacing: .12em; opacity: .75; user-select: none; }
/* Boş-durum / yükleniyor metinleri yumuşak */
.b2b-muted { color: var(--fp-text-soft); }

/* Kategori chip'leri tıklanabilir hissi */
.mud-chip.b2b-clickable { cursor: pointer; }
.mud-chip.b2b-clickable:hover { filter: brightness(.96); }

/* Yönetim paneli — arama sayfasıyla aynı sıkı ızgara dili.
   9. paket PİLOT: gümüş gövde + lacivert vurgu (tema.css) — kart beyazdan gümüşe süzülür,
   gölge lacivert tonlu, seçili grup lacivert gradyanla "yanar". */
.panel-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.panel-kpis .mud-paper {
    background: linear-gradient(180deg, var(--fp-yuzey) 0%, var(--fp-yuzey2) 100%);
    border-color: var(--fp-cizgi); border-radius: var(--fp-kose-kutu);
    box-shadow: var(--fp-golge-1);
}
.panel-kpis .mud-typography-h6 { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* Yönetim paneli — ÜSTTE GRUP ŞERİDİ, ALTINDA YAYVAN KARTLAR (23.08).
   Önceki hâlde 12 grup alt alta diziliyor, sayfa aşağı doğru uzayıp gidiyordu. */
.panel-gruplar { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px; margin-top: 4px; }
.panel-grup { padding: 10px 8px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; min-height: 86px;
    background: linear-gradient(180deg, var(--fp-yuzey) 0%, var(--fp-yuzey2) 100%);
    border-radius: var(--fp-kose-kutu); box-shadow: var(--fp-golge-1); }
/* Seçili grup lacivert gradyanla dolar (tasarımdaki aktif ray ikonu dili) —
   üstündeki yazı ve ikon BEYAZA döner, yoksa lacivert üstünde lacivert kalır. */
.panel-grup-secili { border-color: var(--fp-vurgu-koyu) !important;
    background: var(--fp-grad-birincil); box-shadow: var(--fp-golge-2); }
.panel-grup-secili .mud-typography, .panel-grup-secili .mud-icon-root { color: var(--fp-yuzey) !important; }
/* Kartlar YAYVAN: ikon solda, ad sağda — dikeyde yer yemez, ad tek satırda okunur. */
.panel-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; }
.panel-kartlar .mud-paper {
    background: linear-gradient(180deg, var(--fp-yuzey) 0%, var(--fp-yuzey2) 100%);
    border-color: var(--fp-cizgi); border-radius: var(--fp-kose-kutu);
    box-shadow: var(--fp-golge-1);
}

/* K-09: sol menü zıplaması — açılma animasyonu KALDIRILDI (içerik geç geliyordu, menü
   kayıyordu); kaydırma çubuğu yeri SABİT (çubuk belirince içerik daralmasın). */
.admin-nav .mud-collapse-container { transition: none !important; } /* MudBlazor'un kendi geçişini ezer — gerekçeli */
.admin-drawer .mud-drawer-content { scrollbar-gutter: stable; }

/* ── KOMUTA KÖPRÜSÜ (9. paket) — lambalar · karolar · bekleyenler · altbilgi ── */
.kopru-kur { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem;
    color: var(--fp-murekkep); border: 1px solid var(--fp-cizgi); border-radius: var(--fp-kose-dugme);
    padding: 3px 10px; background: linear-gradient(180deg, var(--fp-yuzey), var(--fp-yuzey2)); }
.kopru-lambalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kopru-lamba { border: 1px solid var(--fp-cizgi); border-radius: var(--fp-kose-kutu); padding: 8px 10px;
    background: linear-gradient(180deg, var(--fp-yuzey), var(--fp-yuzey2));
    box-shadow: var(--fp-golge-1); cursor: pointer; }
.kopru-lamba:hover { box-shadow: var(--fp-golge-2); }
.kopru-lamba .bas { display: flex; align-items: center; gap: 6px; color: var(--fp-murekkep2);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.kopru-lamba .deg { font-size: .92rem; font-weight: 600; color: var(--fp-murekkep); margin-top: 3px; }
.kopru-lamba .alt { color: var(--fp-murekkep3); font-size: .7rem; min-height: 1em; }
/* K-03 şartname md.4: sarı/kırmızı LAMBANIN ZEMİNİ de hafif renklenir (çizim .lamba.sari). */
.kopru-lamba.sari { background: linear-gradient(180deg, var(--fp-yuzey) 0%, var(--fp-uyari-zemin) 100%); border-color: var(--fp-uyari-cizgi); }
.kopru-lamba.kirmizi { background: linear-gradient(180deg, var(--fp-yuzey) 0%, var(--fp-kritik-zemin) 100%); border-color: var(--fp-kritik-cizgi); }
.kopru-lamba .nokta, .kopru-is .nokta { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.kopru-lamba .nokta.yesil, .kopru-is .nokta.yesil { background: var(--fp-iyi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-iyi) 16%, transparent); }
.kopru-lamba .nokta.sari, .kopru-is .nokta.sari { background: var(--fp-uyari); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-uyari) 20%, transparent); }
.kopru-lamba .nokta.kirmizi, .kopru-is .nokta.kirmizi { background: var(--fp-kritik); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-kritik) 18%, transparent); }
.kopru-lamba .nokta.gri, .kopru-is .nokta.gri { background: var(--fp-murekkep3); box-shadow: none; }
.kopru-karolar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.kopru-karo { border: 1px solid var(--fp-cizgi); border-radius: var(--fp-kose-kutu); padding: 10px 12px;
    background: linear-gradient(180deg, var(--fp-yuzey), var(--fp-yuzey2));
    box-shadow: var(--fp-golge-1); cursor: pointer; }
.kopru-karo:hover { box-shadow: var(--fp-golge-2); }
.kopru-karo .ad { color: var(--fp-murekkep2); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.kopru-karo .say { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--fp-murekkep); }
.kopru-karo .alt { color: var(--fp-murekkep3); font-size: .72rem; }
/* 7 günlük mini çubuk çizim (çizim .cizim): son gün dolu, öncekiler soluk. */
.kopru-cizim { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: 6px; }
.kopru-cizim i { flex: 1; border-radius: 1px; background: linear-gradient(180deg, var(--fp-vurgu-acik), var(--fp-vurgu)); opacity: .42; }
.kopru-cizim i:last-child { opacity: 1; }
/* Üç sütun (çizim uc-sutun): Bekleyenler · ERP işleri · Son hareket. */
.kopru-sutunlar { display: grid; grid-template-columns: 1.05fr 1.25fr .85fr; gap: 10px; align-items: start; }
@media (max-width: 1100px) { .kopru-sutunlar { grid-template-columns: 1fr; } }
.kopru-raf-bas { display: flex; align-items: center; gap: 6px; font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--fp-murekkep2); margin-bottom: 8px; }
.kopru-isler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
@media (max-width: 700px) { .kopru-isler { grid-template-columns: 1fr; } }
.kopru-is { display: flex; align-items: center; gap: 7px; border: 1px solid var(--fp-cizgi);
    border-radius: 7px; padding: 5px 8px; font-size: .76rem;
    background: linear-gradient(180deg, var(--fp-yuzey), var(--fp-yuzey2)); }
.kopru-is .ad { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopru-is .sure { font-family: ui-monospace, Consolas, monospace; color: var(--fp-murekkep3); font-size: .7rem; white-space: nowrap; }
.kopru-is .kos { color: var(--fp-vurgu); border: 1px solid var(--fp-vurgu-cizgi); background: var(--fp-vurgu-zemin);
    border-radius: 5px; padding: 1px 7px; font-size: .72rem; cursor: pointer; }
.kopru-is .kos:disabled { opacity: .5; cursor: default; }
.kopru-tehlike { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kopru-akis { display: flex; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--fp-cizgi2);
    font-size: .78rem; cursor: pointer; }
.kopru-akis:last-of-type { border-bottom: 0; }
.kopru-akis:hover { background: var(--fp-hover); }
.kopru-akis .yz { flex: 1; min-width: 0; }
.kopru-akis .yz b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopru-akis .yz span { color: var(--fp-murekkep2); font-size: .72rem; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopru-akis .zm { color: var(--fp-murekkep3); font-size: .7rem; }
.kopru-satir { display: flex; align-items: center; gap: 9px; padding: 8px 4px;
    border-bottom: 1px solid var(--fp-cizgi2); cursor: pointer; }
.kopru-satir:last-of-type { border-bottom: 0; }
a.kopru-satir, a.kopru-lamba, a.kopru-karo { color: inherit; text-decoration: none; display: block; }
a.kopru-satir { display: flex; }
.kopru-satir:hover { background: var(--fp-hover); }
.kopru-satir .serit { width: 3px; height: 26px; border-radius: 2px; flex: 0 0 auto; }
.kopru-satir .serit.sari { background: var(--fp-uyari); }
.kopru-satir .serit.kirmizi { background: var(--fp-kritik); }
.kopru-satir .serit.yesil { background: var(--fp-iyi); }
.kopru-satir .ana { flex: 1; min-width: 0; }
.kopru-satir .ana b { display: block; font-weight: 600; font-size: .88rem; }
.kopru-satir .ana span { color: var(--fp-murekkep2); font-size: .78rem; }
.kopru-altbilgi { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 12px;
    color: var(--fp-murekkep2); font-size: .78rem;
    background: linear-gradient(180deg, var(--fp-yuzey2), var(--fp-zemin2));
    border: 1px solid var(--fp-cizgi); border-radius: var(--fp-kose-kutu); }
.kopru-altbilgi b { color: var(--fp-murekkep); font-weight: 600; }

/* Ayar araması eşleşme vurgusu (admin/ayarlar) */
.ayar-eslesme { outline: 2px solid var(--mud-palette-warning); outline-offset: 4px; border-radius: 6px; }

/* 🩸 SEKME KABI FLEX (MudTabs Position.Left): içine konan her şey YAN YANA diziliyordu —
   uyarı kutuları, ayar listesi ve yasal metin alanları yatay akıp ekrandan taşıyordu (ekranda
   görüldü, kod incelemesinde görünmezdi). Kap DİKEY olmalı; tek tek sarmalayıcı eklemek her
   yeni sekmede unutulacak bir adım bırakırdı. */
.ayar-panel { display: block !important; width: 100%; min-width: 0; }
.ayar-liste { display: block; width: 100%; min-width: 0; }
.ayar-bolum { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); padding: 16px 0 6px; }
.ayar-liste > .ayar-bolum:first-child { padding-top: 0; }

/* AYAR SATIRI — bir ayar = BİR SATIR (panel şartnamesi md.6, 23.08).
   Önceki hâl: her alanın altında kalıcı gri paragraf + araya giren mavi kutular; 76 ayar
   birbirinin aynı görünüyor, göz tarayamıyordu. Artık ikon solda, değer ortada, birim ve
   öneri ayrı çipte, açıklama ⓘ altında kapalı. */
.ayar-satiri { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-divider); border-left: 3px solid transparent; }
.ayar-satiri:hover { background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent); }
.ayar-ikon { color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.ayar-ad { flex: 1 1 auto; min-width: 150px; font-size: .9rem; }
/* Değer kutusu SABİT genişlikte: değerler alt alta hizalanınca göz sütunu tarar, satırı değil. */
.ayar-deger { flex: 0 0 auto; width: 190px; }
/* Birim ve öneri SABİT yuvalar: boş olsalar da yer tutarlar, yoksa değer sütunu satır satır
   kayar ve tarama imkânsız olur (ekranda ölçüldü). */
.ayar-birim { flex: 0 0 42px; font-size: .78rem;
    color: var(--mud-palette-text-secondary); }
.ayar-onerilen-yuva { flex: 0 0 86px; display: flex; justify-content: flex-start; }
/* Öneri DEĞERİN İÇİNDE değil, ayrı ve soluk: "24" ile "önerilen 24" karışmasın. */
.ayar-onerilen { font-size: .72rem; padding: 1px 7px; border-radius: 9px;
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary); white-space: nowrap; }
.ayar-ne-zaman { display: block; font-size: .7rem; color: var(--mud-palette-text-secondary); }
.ayar-eylem { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.ayar-kilit { color: var(--mud-palette-warning); }
.ayar-kilit-acik { color: var(--mud-palette-text-disabled); }
/* Kaydedilmemiş değişiklik: satır soldan renkli şeritle belirir. */
.ayar-degisti { border-left-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent); }
.ayar-yardim { padding: 6px 12px 12px 44px; font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider); }
/* Uyarı ŞERİT olarak kalır — blok kutu ızgarayı kırıyordu. */
.ayar-uyari { padding: 6px 12px 6px 44px; font-size: .78rem;
    border-left: 3px solid var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, transparent); }
/* Dar ekranda değer alta iner; sabit 190px yatay kaydırma üretmesin. */
@media (max-width: 700px) {
    .ayar-satiri { flex-wrap: wrap; }
    .ayar-deger { width: 100%; }
    .ayar-onerilen-yuva { flex-basis: auto; }
    .ayar-yardim, .ayar-uyari { padding-left: 12px; }
}

/* Operasyon Merkezi — CANLI KONSOL (şartname md.4).
   İş sürerken ekranın susması, kullanıcı için işin durması demektir; akan satır o sessizliği
   kapatır. Geçmiş SİLİNMEZ: iş bitince "ne oldu" sorusunun cevabı ekranda kalır. */
.op-konsol { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem;
    line-height: 1.5; max-height: 220px; overflow-y: auto; padding: 8px 10px; border-radius: 6px;
    background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary); white-space: pre-wrap; word-break: break-word; }

/* Boş liste yerine ilk-adım yönlendirmesi (BosDurum bileşeni) */
.bos-durum { display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 44px 16px; text-align: center; color: var(--fp-text-mute); }
.bos-durum .mud-icon-root { font-size: 3.4rem; opacity: .5; }

/* Ürün kartı görseli — B2C referansı (b2c/arama): yüksek BEYAZ kutu, parça ortalanmış ve
   TAMAMI görünür (contain; cover kırpıyordu). */
/* Mockup NİHAİ/SADE (28.08 onaylı): TecDoc görseli marka+kod+teknik ikonları ZATEN taşıyor —
   çerçeve beyaz ve süssüz, görsel kendisi konuşur. 3:2 sabit oran kart hizasını görsel oranından
   koparır; `multiply` beyaz zeminli fotoğrafı kutuyla KAYNAŞTIRIR ("yama" görünmez). */
.pcard-img { aspect-ratio: 3 / 2; background: var(--fp-yuzey);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 8px; border: 1px solid var(--fp-cizgi2); padding: 10px; }
.pcard-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* 🩸 GÖRSEL YÜKLENİRKEN BOŞ BEYAZ KUTU (CAN ölçtü 23.08, demo hesabıyla):
   ilk izlenimde kartların görsel alanı kocaman beyazdı ve "görsel eksik / sistem yarım"
   hissi veriyordu. Ölçüm: görseller dış depodan 200 dönüyor, yalnız GEÇ geliyor
   (tek görsel 0,36–0,47 sn × sayfada 24 görsel). Yani kusur yokluk değil, BEKLEME ANINDA
   hiçbir şey göstermemek. Beklerken hafif bir parıltı, "yükleniyor"u anlatır; boşluk anlatmaz. */
.pcard-img { position: relative; }
.pcard-img::before {
    content: ""; position: absolute; inset: 0; border-radius: 8px;
    background: linear-gradient(90deg, #f2f4f7 25%, #e8ebf0 37%, #f2f4f7 63%);
    background-size: 400% 100%;
    animation: pcard-parilti 1.4s ease-in-out infinite;
}
/* Görsel yüklendiği an iskelet söner. `img` yüklenene kadar saydamdır; yüklenince
   opaklaşır ve altındaki iskeleti gizler. */
.pcard-img img { position: relative; z-index: 1; opacity: 0; transition: opacity .25s ease;
    background: #fff; }
.pcard-img img[data-yuklendi="1"] { opacity: 1; }
/* 28.08 multiply notu: karışım alttaki parıltıyı GÖSTERİR (beyaz×gri=gri) — görsel gelince
   iskelet yalnız gizlenmez, animasyonuyla birlikte KAPANIR. */
.pcard-img:has(img[data-yuklendi="1"])::before { animation: none; opacity: 0; }

/* Hareketi azaltılmış tercih: parıltı KAPANIR ama yer tutucu kalır — erişilebilirlik
   tercihini görmezden gelmek, animasyonu hiç koymamaktan kötüdür. */
@media (prefers-reduced-motion: reduce) {
    .pcard-img::before { animation: none; }
}
@keyframes pcard-parilti {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* GÖRSELİ OLMAYAN ÜRÜN — BLUEPRINT kimlik (mockup NİHAİ, 28.08 onaylı).
   İlk hâli (07.08) çizgili gri kutuydu; şimdi lacivert künye gradyanı + ince mühendislik ızgarası +
   MARKA + KOD rozeti + soluk teknik silüet. Gerekçe aynı: bayi "resmi yok" ile "sistem bozuk"u
   ayırt etsin — artık "eksik" değil "tasarlanmış" görünür. GERÇEK GÖRSEL VARSA blok HİÇ ÇİZİLMEZ.
   ⚠ Mockup sürecindeki "FP" köşe damgası ve KATEGORİ satırı BİLEREK YOK: damga white-label
   sızıntısı (e-posta "fpg" dersi), kategori adıysa DTO'da yok (slug'dan başlık üretmek yasak). */
.pcard-noimg {
    flex-direction: column; gap: 7px; text-align: center; padding: 14px;
    background: linear-gradient(158deg, var(--fp-vurgu), var(--fp-vurgu-koyu2));
    border: 1px solid var(--fp-vurgu-koyu);
    color: var(--fp-yuzey);
}
/* ::before parıltı iskeletinin YERİNİ ince ızgara alır (animation:none şart — üst kural parıldar). */
.pcard-noimg::before {
    content: ""; position: absolute; inset: 0; border-radius: 8px; opacity: .13; animation: none;
    background: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size: 20px 20px;
}
.pcard-noimg-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: .05em;
    text-transform: uppercase; color: var(--fp-yuzey); opacity: .96; z-index: 1; }
.pcard-noimg-code  { font-family: monospace; font-weight: 500; font-size: .78rem; color: var(--fp-yuzey);
    padding: 3px 11px; border-radius: 6px; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2); word-break: break-all; z-index: 1; }
.pcard-noimg-siluet { position: absolute; right: -12px; bottom: -14px; width: 130px; height: 130px;
    opacity: .15; stroke: #fff; fill: none; stroke-width: 1.6; pointer-events: none; }

/* ── ÜRÜN KARTI HİYERARŞİSİ (9. paket pilotu) — kod ve fiyat ÖNE, gerisi geri.
   İndirim rozeti fiyatın yanında kalır (kırılım tooltip'i değerli). Tek vurgu: lacivert.
   28.08 (mockup NİHAİ): görsel ÜSTÜNDEKİ marka rozeti (.pcard-marka) KALDIRILDI — gerçek
   TecDoc görseli marka logosunu zaten taşıyor, rozet ÇAKIŞMA/fazlalık yapıyordu. */
.pcard-kod { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 700; color: var(--fp-murekkep); }
.pcard-ad { color: var(--fp-murekkep2); }
.pcard-fiyat { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.02em;
    color: var(--fp-vurgu); }
.pcard-fiyat-ind { color: var(--fp-kritik); }
.pcard-eski { text-decoration: line-through; color: var(--fp-murekkep3); }
.pcard-yok { color: var(--fp-murekkep3); font-weight: 600; }

/* Kategori & marka kutucukları (cat-tile) — hover'da yüksel + lacivert kenar */
.cat-tile { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cat-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(30, 58, 95, .15);
    border-color: var(--fp-navy);
}
.cat-tile:hover .cat-ico { transform: scale(1.08); transition: transform .16s ease; }

/* Muadil paneli sıralama şeridi (Kod / Fiyat / Stok) */
.b2b-eqsort {
    font-size: .65rem; font-weight: 600; line-height: 1;
    padding: 3px 8px; border: 1px solid var(--fp-line-3); border-radius: 12px;
    background: var(--fp-surface); color: var(--fp-text-mute); cursor: pointer; transition: all .12s;
}
.b2b-eqsort:hover { border-color: var(--fp-ok); color: var(--fp-ok); }
.b2b-eqsort.on { background: var(--fp-ok); border-color: var(--fp-ok); color: var(--fp-on-accent); }

/* ===== B2B Detaylı Liste görünümü (yoğun satır + thumbnail hover-zoom) ===== */
.b2b-listhead, .b2b-listrow {
    display: grid;
    grid-template-columns: 56px minmax(118px, 1.1fr) minmax(150px, 1.9fr) 168px 150px 150px;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}
.b2b-listhead {
    font-size: .70rem; font-weight: 700; color: var(--fp-text-mute); letter-spacing: .03em;
    background: var(--fp-surface-2); border-radius: 6px; text-transform: uppercase; margin-bottom: 2px;
}
.b2b-listhead .c-price, .b2b-listhead .c-act { text-align: right; }
.b2b-listrow { border-bottom: 1px solid var(--fp-line); transition: background .12s; }
.b2b-listrow:hover { background: var(--fp-hover); }
.b2b-listrow .r-brand { display: flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--fp-link); font-weight: 600; }
.b2b-listrow .r-mpn { font-family: monospace; font-size: .85rem; display: block; color: var(--fp-text); }
.b2b-listrow .c-name { font-size: .82rem; line-height: 1.18; color: var(--fp-text-dim); }
.b2b-listrow .c-price { text-align: right; }
.b2b-listrow .c-price b { display: block; font-size: .9rem; color: var(--fp-navy); }
.b2b-listrow .c-price b.r-disc { color: var(--fp-err); }
.b2b-listrow .c-price .r-old { text-decoration: line-through; color: var(--fp-text-strike); font-size: .68rem; display: block; }
.b2b-listrow .c-price .r-eur { color: var(--fp-text-mute); font-size: .66rem; }
.b2b-listrow .c-act { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
/* thumbnail + hover büyütme (tıklamasız) */
.b2b-thumb { position: relative; display: inline-block; }
/* 28.08 (mockup NİHAİ): `multiply` beyaz zeminli TecDoc fotosunu hücreyle kaynaştırır. */
.b2b-thumb > img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--fp-line-3);
    border-radius: 6px; background: var(--fp-img-bg); mix-blend-mode: multiply; padding: 2px; }
/* Görselsiz satırın minik BLUEPRINT hücresi — kart yer tutucusunun küçüğü (aynı künye gradyanı). */
.b2b-thumb-bp { width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
    background: linear-gradient(155deg, var(--fp-vurgu), var(--fp-vurgu-koyu2));
    color: var(--fp-yuzey); font-family: monospace; font-size: .5rem; font-weight: 600;
    text-align: center; line-height: 1.25; letter-spacing: .02em;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px; }
.b2b-thumb-zoom {
    /* position: fixed → ERP-grid'in overflow:auto kapsayıcısı KIRPMASIN (kesik/küçük görünme sebebi buydu) */
    display: none; position: fixed; right: 40px; top: 50%; transform: translateY(-50%);
    width: min(620px, 46vw); height: min(620px, 74vh); object-fit: contain; background: var(--fp-img-bg);
    border: 2px solid var(--fp-navy); border-radius: 12px; box-shadow: 0 14px 50px rgba(0,0,0,.40);
    z-index: 9999; padding: 10px;
}
.b2b-thumb:hover .b2b-thumb-zoom { display: block; }
@media (max-width: 960px) {
    .b2b-listhead, .b2b-listrow { grid-template-columns: 48px 1.2fr 1fr 90px; }
    .b2b-listhead .c-name, .b2b-listrow .c-name, .b2b-listhead .c-act, .b2b-listrow .c-act { display: none; }
}


/* çok-depolu stok rozetleri (MAIN·İST·TRX) + KDV'li satır */
.b2b-listrow .c-stock { display: flex; flex-wrap: wrap; gap: 3px; align-content: center; }
.b2b-listrow .wh { display: inline-flex; align-items: center; gap: 2px; font-size: .56rem; font-weight: 700; padding: 1px 4px; border-radius: 4px; line-height: 1.35; }
.b2b-listrow .wh b { font-size: .65rem; }
.b2b-listrow .wh.ok { background: var(--fp-ok-bg); color: var(--fp-ok); border: 1px solid var(--fp-ok-line); }
.b2b-listrow .wh.no { background: var(--fp-err-bg); color: var(--fp-err-text); border: 1px solid var(--fp-err-line); }
.b2b-listrow .c-price .r-vat { color: var(--fp-text-mute); font-size: .63rem; display: block; }

/* ===== B2B ERP-GRID detaylı liste (SystemSoft deseni, renkler bizim) =====
   03.08 — tipografi bir tık büyütüldü (~%8, tüm kademeler ORANTILI). Hedef kullanıcı orta yaş
   üstü esnaf; .80rem tezgâh ekranında yorucuydu. Kademeler arası fark korundu, yoksa hiyerarşi
   (net fiyat > kod > ad > rozet) düzleşir ve satır okunmaz hâle gelir. */
/* Ürün detay fiyatı: inline'dan sınıfa alındı (29.08) — mobil sıkıştırma inline stili ezemiyordu. */
.pd-fiyat { font-size: 1.7rem; }

.b2b-erp-wrap { overflow-x: auto; border: 1px solid var(--fp-line-2); border-radius: 8px; }
/* 🩸 27.09 (proje sahibi, canlıda): liste aşağı kaydırılınca başlık çubuğu KAYBOLUYORDU. `position: sticky` vardı ama
   sarmalayıcı `overflow-x:auto` bir KAYDIRICI kurar → yapışma pencereye değil o kutuya bağlanır ve hiç tutmaz
   (mobile.css 29.08 dersinin masaüstü ikizi). Masaüstünde sarmalayıcı kaydırıcı DEĞİL (`overflow: clip`; tablo
   1366'da sığar, taşan kırpılır), başlık üst bara (64 px) yapışır; 1100 px altında eski düzen (yatay kaydırma). */
.b2b-erp-grid { width: 100%; border-collapse: collapse; font-size: .86rem; }
.b2b-erp-grid thead th {
    position: sticky; top: 0; z-index: 5;
    /* 🩸 27.09 (proje sahibi): kiracı vurgusu açık tonluysa (gümüş) beyaz yazı zeminle KARIŞIYORDU.
       Zemin vurgunun KOYULTULMUŞ tonu (künyeye yeni renk yok), yazı daima beyaz + hafif gölge → her kiracıda okunur. */
    background: linear-gradient(180deg, color-mix(in srgb, var(--fp-bar-1) 62%, #0f1b2a), color-mix(in srgb, var(--fp-bar-2) 62%, #0f1b2a));
    color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); border-bottom: 2px solid var(--fp-line-2);
    font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    padding: 7px 8px; text-align: left; white-space: nowrap;
}
.b2b-erp-grid thead th.t-wh, .b2b-erp-grid thead th.t-price, .b2b-erp-grid thead th.t-isk { text-align: center; }
.b2b-erp-grid thead th.net { background: linear-gradient(180deg, color-mix(in srgb, var(--fp-ok) 72%, #000), color-mix(in srgb, var(--fp-ok-strong) 72%, #000)); color: #fff; }
.b2b-erp-grid tbody td { padding: 4px 8px; border-bottom: 1px solid var(--fp-line); vertical-align: middle; }
.b2b-erp-grid tbody tr:nth-child(even) { background: var(--fp-zebra); }
.b2b-erp-grid tbody tr:hover { background: var(--fp-hover); }
/* 🩸 27.09 (CAN VM 20:48, 9239F0BF): ilk düzeltme temel kuralın ÖNÜNDE duruyordu → aynı özgüllükte sonra gelen kural
   (top:0 · overflow-x:auto) eziyordu, th ölçümde hâlâ top:0 idi. Bu blok temel kuralların SONRASINDA ve daha özgül:
   masaüstünde sarmalayıcı kaydırıcı değil (overflow:clip), başlık üst bara (66 px) yapışır. 1100 px altı eski düzen. */
@media (min-width: 1101px) {
    div.b2b-erp-wrap { overflow: clip; }
    .b2b-erp-grid thead tr th { top: 66px; }
}
/* 27.09 (CAN): MARKA / ÜRÜN ADI / STOK KODU başlıkları satır sınıflarının rengini (link mavisi · soluk metin · lacivert) miras
   alıp koyu barda SOLUK kalıyordu — başlıkta hepsi beyaz. */
.b2b-erp-grid thead tr th.t-brand, .b2b-erp-grid thead tr th.t-name, .b2b-erp-grid thead tr th.t-code { color: #fff; }
/* 2A (27.09) sıkı tezgâh listesi: satır ≈36 px, zebra yok, hover açık lacivert; depo tek kolon rozetleri; liste küçük. */
.b2b-erp-grid tbody tr td { padding: 2px 8px; height: 36px; }
.b2b-erp-grid tbody tr:nth-child(even) { background: transparent; }
.b2b-erp-grid tbody tr:hover td { background: var(--fp-hover); }
.b2b-erp-grid .t-depo { white-space: nowrap; text-align: center; }
.depo-roz { display: inline-block; min-width: 46px; margin: 0 2px; padding: 1px 5px; border-radius: 4px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.depo-roz small { font-weight: 600; opacity: .8; margin-right: 3px; font-size: .64rem; }
.depo-roz.ok { background: var(--fp-ok-bg); color: var(--fp-ok); }
.depo-roz.no { background: var(--fp-err-bg); color: var(--fp-err); }
.b2b-erp-grid .t-price.liste { font-size: .78rem; color: var(--fp-text-mute); }
.b2b-erp-grid thead tr th.t-price.liste { color: #fff; }
.b2b-muadil-not { color: var(--fp-ok); font-size: .74rem; cursor: pointer; margin-top: 1px; }
.b2b-muadil-not:hover { text-decoration: underline; }
/* 3A (27.09) ürün detayı ÜÇ SÜTUN: 300 · esnek · 280, pencere ≈1120 px (1366'da yatay taşma yok); 1100 px altında tek sütun. */
.mud-dialog:has(.pd3) { max-width: 1120px !important; width: 100%; }
.pd3 { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.pd3-orta, .pd3-sag { min-width: 0; }
.pd-baslik { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 2px 0 4px; }
.pd-baslik .pd-kod { font-family: 'JetBrains Mono', Consolas, monospace; font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: var(--fp-navy); white-space: nowrap; }
.pd-baslik .pd-ad { color: var(--fp-murekkep2); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ozet { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pd-cip { font-size: .72rem; padding: 1px 7px; border-radius: 10px; background: var(--fp-zemin); color: var(--fp-murekkep2); border: 1px solid var(--fp-cizgi); }
.pd-fiyat-kutu { background: var(--fp-yuzey); border: 1px solid var(--fp-cizgi); border-radius: 8px; padding: 6px 10px; }
.pd-oem-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pd-oem { border: 1px solid var(--fp-cizgi); border-radius: 6px; padding: 4px 8px; display: flex; flex-direction: column; min-width: 0; }
.pd-oem.oem { border-left: 3px solid var(--fp-navy); }
.pd-oem-marka { font-size: .68rem; color: var(--fp-murekkep3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-oem-no { font-family: monospace; font-weight: 700; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-birlikte-satir { display: flex; align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px solid var(--fp-zemin); cursor: pointer; }
.pd-birlikte-satir:hover { background: var(--fp-hover); }
.pd-buyut { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.pd-buyut img { max-width: 90vw; max-height: 90vh; background: #fff; border-radius: 8px; padding: 8px; }
@media (max-width: 1100px) { .pd3 { grid-template-columns: 1fr; } .pd-oem-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b2b-erp-grid .t-img { width: 50px; }
.b2b-erp-grid .t-code { font-family: monospace; cursor: pointer; white-space: nowrap; }
.b2b-erp-grid .t-code b { color: var(--fp-navy); font-size: .88rem; }
.b2b-erp-grid .t-brand { display: flex; align-items: center; gap: 4px; color: var(--fp-link); font-weight: 600; font-size: .80rem; white-space: nowrap; }
.b2b-erp-grid .t-name { cursor: pointer; color: var(--fp-text-dim); line-height: 1.2; min-width: 220px; }
.b2b-erp-grid .t-wh { text-align: center; width: 52px; }
.b2b-erp-grid .t-wh.ok { background: var(--fp-ok-bg); }
.b2b-erp-grid .t-wh.no { background: var(--fp-err-bg); }
.b2b-erp-grid .wh-ok { color: var(--fp-ok); font-weight: 700; display: inline-flex; flex-direction: column; line-height: 1; }
.b2b-erp-grid .wh-ok small { font-size: .66rem; color: var(--fp-ok); }
.b2b-erp-grid .wh-no { color: var(--fp-err); font-weight: 700; }
/* tabular-nums (28.08): fiyat/iskonto/adet kolonları alt alta OTURUR — "hesap yapılmış" görünür. */
.b2b-erp-grid .t-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.b2b-erp-grid .t-isk, .b2b-erp-grid .t-wh { font-variant-numeric: tabular-nums; }
.b2b-erp-grid .t-price .p-strike { text-decoration: line-through; color: var(--fp-text-strike); font-size: .80rem; }
.b2b-erp-grid tbody td.t-price.net { background: var(--fp-ok-bg); }
.b2b-erp-grid tbody td.t-price.net b { color: var(--fp-ok-strong); font-size: .94rem; }
.b2b-erp-grid tbody td.t-price.net .p-eur { color: var(--fp-ok); font-size: .66rem; margin-left: 3px; }
.b2b-erp-grid .t-price .p-na { color: var(--fp-text-mute); }
.b2b-erp-grid .t-isk { text-align: center; color: var(--fp-err); font-weight: 700; font-size: .82rem; }
/* 27.09: kademe basliklari (1-5) satirdaki kirmizi rengi MIRAS ALIYORDU -> koyu bar ustunde kirmizi okunmuyor; baslikta beyaz. */
.b2b-erp-grid thead th.t-isk { color: #fff; }
/* 28.08: İşlem kolonu artık SOL BAŞTA (mockup) — hizalama da sola. */
.b2b-erp-grid .t-act { display: flex; align-items: center; gap: 2px; justify-content: flex-start; white-space: nowrap; }
/* 🩸 27.09 (CAN VM 21:13, 06939156): 12 başlık hücresinden 2'si (İŞLEM, MARKA) yapışmıyordu — .t-act/.t-brand'in satır
   hücresi için yazılmış `display:flex`i BAŞLIĞA da uygulanıyor; flex olan th tablo hücresi olmaktan çıkınca sticky tutmaz.
   Başlıkta iki hücre yeniden tablo hücresi. */
.b2b-erp-grid thead tr th.t-act, .b2b-erp-grid thead tr th.t-brand { display: table-cell; }
.b2b-kamp { display: inline-block; background: var(--fp-err); color: var(--fp-on-navy); font-size: .59rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.b2b-uygun { display: inline-block; background: var(--fp-ok-bg); color: var(--fp-ok); font-size: .64rem; font-weight: 700; padding: 0 5px; border-radius: 3px; margin-left: 4px; }

/* ===== Faceted sol panel — marka facet'i ===== */
.b2b-facet {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 6px; border-radius: 5px; cursor: pointer; transition: background .1s;
    font-size: .78rem;
}
.b2b-facet:hover { background: var(--fp-hover-2); }
.b2b-facet.on { background: var(--fp-hover-2); font-weight: 700; }
.b2b-facet .f-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fp-text-dim); }
.b2b-facet .f-count { font-size: .68rem; color: var(--fp-text-mute); background: var(--fp-surface-2); padding: 0 5px; border-radius: 8px; }
.b2b-facet.on .f-count { background: var(--fp-link); color: var(--fp-on-accent); }

/* ===== PREMIUM CİLA (modacılık — marka kimliği korunur, derinlik+incelik eklenir) =====
   CSS-only, fonksiyon riski yok. Katmanlı gölge + yumuşak micro-interaction + net odak. */
:root {
    /* --fp-navy yukarıda tanımlı (tema token blokları) — burada TEKRARLAMA.
       Gölgeler temadan: lacivert tonlu, 3 kademe, üstte 1px beyaz iç çizgi. */
    --fp-amber: var(--fp-uyari);
    --fp-shadow-sm: var(--fp-golge-1);
    --fp-shadow-md: var(--fp-golge-2);
    --fp-shadow-lg: var(--fp-golge-3);
}
/* Kart/panel: tek-düz gölge yerine yumuşak katmanlı derinlik */
.mud-paper.mud-paper-outlined { box-shadow: var(--fp-shadow-sm) !important; border-color: var(--fp-line-2) !important; }
/* P10b: planlı temaslar kartında gecikmiş varsa kenar kırmızı — üstteki !important'ı ancak sınıf kuralı geçer (inline style yenildi, CAN VM 11.09). */
#sp-planli.sp-planli-gecikmis { border-color: var(--mud-palette-error) !important; }
.mud-card.b2b-hover, .b2b-card { border-color: var(--fp-line-2); }
.mud-card.b2b-hover:hover, .b2b-card:hover { box-shadow: var(--fp-shadow-md) !important; }
.cat-tile:hover { box-shadow: var(--fp-shadow-md) !important; }
/* Birincil buton: hafif iç-parlaklık + hover'da yükselme (dokunsal his) */
.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 2px 6px rgba(30,58,95,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.mud-button-filled.mud-button-filled-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30,58,95,.34), inset 0 1px 0 rgba(255,255,255,.14) !important; filter: brightness(1.04); }
.mud-button-filled.mud-button-filled-primary:active { transform: translateY(0); filter: brightness(.97); }
.mud-button-filled.mud-button-filled-secondary:hover { transform: translateY(-1px); filter: brightness(1.03); }
/* Outlined buton: hover'da hafif dolu his */
.mud-button-outlined:hover { background: rgba(30,58,95,.05); }
/* Input odak: net amber-lacivert halka (form profesyonel dursun) */
.mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-width: 2px !important; box-shadow: 0 0 0 3px rgba(30,58,95,.08); }
/* Dialog: derin gölge + yumuşak köşe */
.mud-dialog { box-shadow: var(--fp-shadow-lg) !important; border-radius: 12px !important; }
/* Snackbar/alert biraz daha yumuşak */
.mud-snackbar { box-shadow: var(--fp-shadow-md) !important; border-radius: 10px !important; }

/* ===== KOLAY KULLANIM (orta-yaş+ esnaf; arama→hemen yanıt) =====
   Hedef kitle teknik değil + acele: arama iri/net, tıklamadan yazılabilir (Autofocus razor'da). */
.cat-search-big .mud-input-slot input { font-size: 1.12rem; font-weight: 500; }
.cat-search-big .mud-input-slot input::placeholder { font-size: .92rem; opacity: .7; }
/* Arama satırındaki büyüteç ikonu biraz belirgin */
.cat-search-big .mud-input-adornment .mud-icon-root { font-size: 1.5rem; color: var(--fp-navy); }

/* ── O6 TEZGÂH KİPİ (12.09): katalogda klavye katmanı açıkken büyük hedef + odak çerçevesi.
   Odak = sınıf + !important (outlined kenar inline style'ı yener dersi). İkon yalnız geniş ekranda. ── */
.tezgah-ikon { display: none !important; }
@media (min-width: 961px) { .tezgah-ikon { display: inline-flex !important; } }
.tezgah .cat-cards .tezgah-kart:focus { outline: 3px solid var(--fp-navy) !important; outline-offset: 2px; }
.tezgah .cat-cards .tezgah-sepete-ekle { min-height: 52px !important; font-size: 1.05rem !important; }
.tezgah .cat-cards .tezgah-kart .mud-input-control { min-height: 48px; }
.tezgah .cat-cards .tezgah-eklendi { box-shadow: 0 0 0 3px var(--mud-palette-success) !important; }
#tezgah-yardim { position: fixed; inset: 0; background: rgba(16, 30, 51, .55); z-index: 1400; display: none; align-items: center; justify-content: center; }
#tezgah-yardim.acik { display: flex; }
#tezgah-yardim .kutu { background: #fff; color: #1e3a5f; border-radius: 10px; padding: 20px 24px; min-width: 320px; max-width: 480px; box-shadow: 0 8px 24px rgba(30, 58, 95, .3); }
#tezgah-yardim kbd { display: inline-block; min-width: 2.2em; text-align: center; padding: 2px 6px; border: 1px solid #b8c4d6; border-bottom-width: 3px; border-radius: 6px; background: #f4f7fb; font-family: monospace; margin-right: 8px; }
#tezgah-yardim li { list-style: none; margin: 6px 0; }
#tezgah-yardim .not { margin: 12px 0 0; font-size: .85rem; color: #5b6b82; }
#tezgah-yardim button { padding: 6px 16px; border-radius: 6px; border: 1px solid var(--fp-navy); background: var(--fp-navy); color: #fff; cursor: pointer; }

/* Iade sihirbazi mobil (CAN VM 621BA500, 12.09): baslik x dugmesiyle cakismasin (siparis kodu gizli, tek satir),
   stepper 3 adim sigsin — etiket gizli, numara kalir. */
@media (max-width: 600px) {
    .iade-baslik { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .iade-baslik-kod { display: none; }
    #iade-sihirbaz .mud-stepper-nav .mud-step-label-content { display: none; }
    #iade-sihirbaz .mud-stepper-nav .mud-step { min-width: 0; padding-left: 4px; padding-right: 4px; }
}

/* Iade sihirbazi adim 1 kalem tablosu mobil (CAN VM 4862CAF3, 12.09): Edilebilir/Birim kolonlari <=600px gizli,
   tavan urun adinin altinda; adet kutusu kaydirmadan ekranda. */
#iade-kalemler .iade-kalem-tavan { display: none; font-size: .72rem; color: var(--fp-text-mute); }
@media (max-width: 600px) {
    #iade-kalemler th:nth-child(3), #iade-kalemler td:nth-child(3),
    #iade-kalemler th:nth-child(4), #iade-kalemler td:nth-child(4) { display: none; }
    #iade-kalemler .iade-kalem-tavan { display: block; }
    #iade-kalemler th:last-child { width: 96px; }
    #iade-kalemler td { padding-left: 6px; padding-right: 6px; }
}

/* Iade adim 1 mobil kozmetik (CAN VM 8374D101, 12.09): "Iade Adedi" basligi kirpiliyor, kutu sag kenari tasiyordu. */
#iade-kalemler .iade-adet-kisa { display: none; }
@media (max-width: 600px) {
    #iade-kalemler .iade-adet-uzun { display: none; }
    #iade-kalemler .iade-adet-kisa { display: inline; }
    /* CAN 7FB22706 geometrisi: sarmal 230px; Kod 72 + Urun ~80 + Adet 64 = 216 (kod kirilabilir, 12px). */
    #iade-kalemler th:first-child, #iade-kalemler td:first-child { width: 72px; max-width: 72px; word-break: break-all; font-size: 12px; }
    #iade-kalemler th:last-child { width: 64px; }
    #iade-kalemler td:last-child { padding-right: 2px; }
    #iade-kalemler td:last-child .mud-input-control { min-width: 56px !important; width: 56px; }
}

/* O2 hizli arama satirlari (12.09): "tum sonuclar" ilk satir vurgulu, alan rozeti kucuk. */
#hizli-arama-popover .hizli-tumu, .mud-popover .hizli-tumu { color: var(--fp-navy); font-weight: 600; }
.mud-popover .hizli-alan { margin-left: auto; height: 20px; font-size: .68rem; }
.mud-popover .hizli-marka .mud-chip { height: 20px; font-size: .68rem; }

/* O2 gorunum duzeltmesi (CAN 340599E0, 12.09): ust bar kutusu ~150 px'e siniyor, acilir liste kutu kadar dar kaliyordu.
   Kutu 360 px, odakta 520 px (Amazon/Autodoc deseni); liste kutudan BAGIMSIZ: en az 520 px. Mobilde ikisi de tam genislik. */
/* CAN 11:35 (AB9142C7 GERILEME): sabit min genislik 1280-1600'de sepet ikonu + avatari ekran disina itti. Kutu = KALAN ALAN:
   flex 1 1 auto, min 150 (K11 ile ayni taban), max 360; odakta max 520 — yalniz bos alan varsa buyur, bar TASMAZ.
   Sepet + avatar sagda sabit (flex-shrink 0). Menu sabit genislikte kalir (daralmasi ayri tasarim karari). */
.appbar-search.hizli-kutu { flex: 1 1 auto !important; min-width: 150px !important; max-width: 360px !important; margin-left: 8px; transition: max-width .15s ease; }
.appbar-search.hizli-kutu:focus-within { max-width: 520px !important; }
.mud-appbar .ustbar-sepet, .mud-appbar .mud-badge-root, .mud-appbar .mud-menu, .mud-appbar .mud-avatar, .mud-appbar .tezgah-ikon { flex-shrink: 0; }
.hizli-popover { min-width: 520px !important; max-width: 720px; }
.hizli-popover .mud-list-item { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 960px) {
    /* mobil: tam genislik — ustteki !important kurallari ezmek icin burada da !important (CAN 11:35: 390'da 280→420 buyuyordu) */
    .appbar-search.hizli-kutu, .appbar-search.hizli-kutu:focus-within { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; margin-left: 4px; }
    .hizli-popover { min-width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px); }
}

/* O7 birlikte alinanlar seridi (12.09): 3 kucuk kart, yatay; mobilde kaydirilir. */
.birlikte-serit { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.birlikte-kart { flex: 0 0 180px; border: 1px solid var(--fp-line-2); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: var(--fp-yuzey, #fff); }
.birlikte-img { height: 96px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.birlikte-img img { max-height: 96px; max-width: 100%; object-fit: contain; }
.birlikte-kod { font-family: monospace; font-weight: 700; font-size: .8rem; }
.birlikte-ad { font-size: .8rem; line-height: 1.2; height: 2.4em; overflow: hidden; }
.birlikte-marka { font-size: .7rem; color: var(--fp-text-mute); }
.birlikte-ekle { margin-top: auto; }

/* O9 yenileme cipi (12.09): sik aldiklarin kartinda turuncu; gecmisse kirmizi. */
.whome-yenile, .mhome-yenile { margin-top: 2px; font-size: .68rem; font-weight: 700; color: #b45309; background: #fff7ed; border: 1px solid #fdba74; border-radius: 4px; padding: 1px 5px; display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whome-yenile.gecmis, .mhome-yenile.gecmis { color: var(--fp-err-text); background: var(--fp-err-bg); border-color: var(--fp-err-line); }
#yenileme-tablo .yenile-gecmis { color: var(--fp-err-text); font-weight: 700; }

/* CAN 11:57 (A3C2C825): 1400/1280/1024'te menu + buyutec + klavye ikonu + 150 px kutu bari tasiriyordu (kutu kapaliyken sigar: 1290 < 1400).
   <=1450 px: kutu AKISTAN CIKAR — buyutecle acilinca barin ustune binen 360 px overlay (sagdan 104 px = sepet + avatar), liste yine kutunun sag kenarina hizali.
   1451+ px: esnek kutu (ustteki kural). */
@media (max-width: 1450px) and (min-width: 961px) {
    .appbar-search.hizli-kutu, .appbar-search.hizli-kutu:focus-within {
        position: absolute !important; right: 104px !important; top: 50% !important; transform: translateY(-50%);
        flex: none !important; width: 360px; min-width: 360px !important; max-width: 360px !important; margin-left: 0 !important;
        z-index: 30; background: var(--fp-bar-1); border-radius: 6px; padding: 2px 4px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
}

/* O2 stok noktasi (12.09): hizli arama urun satirinda yesil nokta = indekste kullanilabilir stok > 0 (adet yazilmaz). */
.mud-popover .hizli-stok { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--fp-ok); display: inline-block; margin-left: 4px; }

/* 961-1279 px ust menu IKON-ONLY (CAN 12:48: etiketli menu en az ~1275 px ister; 12:21/12:33: 1024'te menu ~1178 px, bar 250 px tasiyordu). Etiket gizli (title tasir), ikon
   buyutec/klavye ikonuyla ayni boyut (1.5rem); 1201+ px'te hicbir kural uygulanmaz (piksel piksel ayni). */
@media (max-width: 1279px) and (min-width: 961px) {
    .nav-desktop .mud-button-root .mud-button-label { font-size: 0; line-height: 0; }
    .nav-desktop .mud-button-root .mud-button-label .mud-button-icon-start,
    .nav-desktop .mud-button-root .mud-button-label .mud-button-icon-end { margin: 0; line-height: 1; }
    .nav-desktop .mud-button-root .mud-button-label .mud-icon-root { font-size: 1.5rem !important; width: 1.5rem; height: 1.5rem; }
    .nav-desktop .mud-button-root { padding-left: 6px; padding-right: 6px; min-width: 0; }
}