/* NOS Servis — depo personeli bunu telefondan kullanır:
   büyük dokunma hedefleri (≥44px), yüksek kontrast, tek elle erişilebilir aksiyonlar. */

:root {
    --ana: #0f766e;
    --ana-koyu: #115e59;
    --ana-acik: #ccfbf1;
    --zemin: #f1f5f9;
    --kart: #ffffff;
    --cizgi: #e2e8f0;
    --metin: #0f172a;
    --soluk: #64748b;
    --basari: #16a34a;
    --hata: #dc2626;
    --uyari: #d97706;

    --yan-genis: 248px;
    --yan-dar: 64px;
    --ust: 52px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: var(--zemin);
    color: var(--metin);
    -webkit-tap-highlight-color: transparent;
}

h1 { font-size: 1.35rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 8px; }

/* ── Kabuk ───────────────────────────────────────────────────────────────── */
.nos-kabuk { display: flex; min-height: 100vh; }

.nos-yan {
    width: var(--yan-genis);
    flex: 0 0 var(--yan-genis);
    background: #0b1220;
    color: #cbd5e1;
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    transition: width .18s ease, flex-basis .18s ease, transform .2s ease;
    overflow-x: hidden;
}

/* Dar mod: yalnızca ikonlar */
.nos-kabuk.dar .nos-yan { width: var(--yan-dar); flex-basis: var(--yan-dar); }
.nos-kabuk.dar .etiket { display: none; }
.nos-kabuk.dar .grup-baslik { height: 12px; padding: 6px 0 0; }
.nos-kabuk.dar .menu,
.nos-kabuk.dar .kullanici { justify-content: center; padding-left: 0; padding-right: 0; }
/* Daralınca kullanıcı bloğu yalnız baş harf dairesini gösterir — "admin/Admin" metni sığmıyordu.
   .nos-alt .kullanici .etiket { display:flex } kuralını özgüllükle ezmek için 4 sınıf. */
.nos-kabuk.dar .nos-alt .kullanici .etiket { display: none; }

/* Daraltılmış menü ipucu balonu (navtip.js body'ye ekler) — marka renginde, sağa açılır ok. */
.nos-nav-tip {
    position: fixed; transform: translateY(-50%);
    background: var(--ana); color: #fff;
    padding: 6px 11px; border-radius: 8px;
    font-size: .82rem; font-weight: 600; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    pointer-events: none; opacity: 0; z-index: 3000;
    transition: opacity .12s ease;
}
.nos-nav-tip.gorunur { opacity: 1; }
.nos-nav-tip::before {
    content: ''; position: absolute; top: 50%; left: -5px;
    transform: translateY(-50%);
    border: 5px solid transparent; border-left: 0; border-right-color: var(--ana);
}

.nos-marka {
    display: flex; align-items: center; gap: 10px;
    height: var(--ust); flex: 0 0 var(--ust); padding: 0 14px;
    border-bottom: 1px solid #1e293b;
    font-weight: 700; color: #fff; white-space: nowrap;
}
.nos-marka .logo {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: grid; place-items: center;
    background: var(--ana); border-radius: 8px; color: #fff;
}
/* Yüklenen logo — dikdörtgen olabilir, bu yüzden yüksekliği sabitleyip genişliği serbest bırakıyoruz.
   Logo varken firma adı yazılmaz; tüm marka alanı logonun. */
.nos-marka .logo-img {
    height: 34px; max-width: 190px;
    object-fit: contain; display: block;
}
/* Dar menüde yalnızca ikon genişliği kadar yer var. */
.nos-kabuk.dar .nos-marka .logo-img { max-width: 44px; }

.nos-kabuk.dar .nos-marka { justify-content: center; padding: 0; }

.nos-yan nav { flex: 1; overflow-y: auto; padding: 8px 0; }

/* Menüde ara kutusu — tema-nötr: beyaz zemin + koyu metin, hem açık hem koyu menüde okunur. */
.menu-ara { position: relative; margin: 6px 12px 10px; }
.menu-ara .ara-ikon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: .78rem; color: #94a3b8; pointer-events: none;
}
.menu-ara input {
    width: 100%; height: 36px; padding: 0 30px; box-sizing: border-box;
    background: #fff; border: 1px solid rgba(0,0,0,.14);
    border-radius: 9px; color: #1e293b; font-size: .86rem; font-weight: 500;
}
.menu-ara input::placeholder { color: #94a3b8; font-weight: 400; }
.menu-ara input:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px var(--ana-acik); }

/* GENEL: tüm arama/metin girişleri odakta MENÜ ARAMASIYLA aynı kırmızı border + halka
   (tarayıcının mavi outline'ı yerine). border-color !important — çoğu input inline border
   taşıyor (style="border:1px solid var(--cizgi)"), class kuralı inline'ı ezemez; !important ezer.
   HARİÇ: checkbox/radio (halka anlamsız) ve Radzen input'ları ([class*="rz-"], ör. dropdown
   içindeki filtre kutusu) — onlar KENDİ odak stilini kullansın, yoksa açılan dropdown'da
   pembe halka çıkıyordu. */
input:not([type=checkbox]):not([type=radio]):not([class*="rz-"]):focus,
textarea:not([class*="rz-"]):focus,
select:not([class*="rz-"]):focus {
    outline: none;
    border-color: var(--ana) !important;
    box-shadow: 0 0 0 3px var(--ana-acik);
}

/* Radzen input/combobox odak vurgusu da KIRMIZI olsun. Radzen mavi odağını (—rz-primary
   #4340D2) KENDİ değişkenlerinden alıyor (:root'ta): —rz-input-focus-border / —shadow.
   app.css material-base.css'ten SONRA yüklendiği için bu :root ezmesi Radzen'inkini geçer —
   özgüllük kavgası yok, tüm Radzen input'ları (dropdown, textbox, filtre…) kırmızı odak alır. */
:root {
    --rz-input-focus-border: 1px solid var(--ana);
    --rz-input-focus-border-block-end: 1px solid var(--ana);
    --rz-input-focus-shadow: 0 0 0 3px var(--ana-acik);
    --rz-border-focus: var(--ana);
}
.menu-ara .ara-temizle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #94a3b8; cursor: pointer; font-size: .78rem; padding: 4px;
}
.menu-ara .ara-temizle:hover { color: #1e293b; }
.menu-bos { padding: 16px; color: #94a3b8; font-size: .82rem; text-align: center; }

.grup-baslik {
    padding: 12px 16px 4px;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: #64748b; white-space: nowrap;
}

.nos-yan .menu {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    color: #cbd5e1; text-decoration: none; white-space: nowrap; cursor: pointer;
    border-left: 3px solid transparent;
}
.nos-yan .menu:hover { background: #131c2e; color: #fff; }
.nos-yan .menu.active { background: #131c2e; color: #fff; border-left-color: var(--ana); }
/* Tema renginde çerçeve YALNIZCA "Menüde ara" sonuçlarında (tıklanan sonuç belli olsun). */
.nos-yan .menu.ara-sonuc.active { box-shadow: inset 0 0 0 2px var(--ana); }
.nos-yan .menu .ikon { width: 24px; flex: 0 0 24px; text-align: center; font-size: 1.05rem; }

/* Gruba ait olmayan tek başına öğe (Panel) — grupların üstünde, boşlukla ayrılır. */
.nos-yan .menu.tekil { margin-top: 6px; margin-bottom: 6px; }

/* ── Menü stilleri: Normal / Akordiyon / Ağaç ─────────────────────────────── */
/* Akordiyon ve Ağaç'ta grup başlığı tıklanabilir bir butondur. */
.nos-yan .grup-baslik.tiklanir {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none;
    cursor: pointer; font: inherit;
    padding: 10px 16px 6px;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: #64748b;
}
.nos-yan .grup-baslik.tiklanir:hover { color: #cbd5e1; }
.nos-yan .grup-baslik .ok { font-size: .7rem; opacity: .7; }

/* Ağaç: gövde girintili ve bağlantı çizgili — hiyerarşi görünsün. */
.nos-yan nav.stil-agac .grup-govde {
    margin-left: 22px;
    border-left: 1px solid #1e293b;
}
.nos-yan nav.stil-agac .grup-govde .menu { padding-left: 12px; }

/* ── Menü görünümü seçici (yalnız admin) ─────────────────────────────────── */
.nav-stil { padding: 8px 12px 10px; }
.nav-stil .ns-lbl {
    display: block; font-size: .62rem; text-transform: uppercase;
    letter-spacing: .06em; color: #64748b; margin-bottom: 5px;
}
.nav-stil .ns-seg { display: flex; border: 1px solid #1e293b; border-radius: 7px; overflow: hidden; }
.nav-stil .ns-seg button {
    flex: 1; padding: 5px 2px; border: none; background: transparent;
    color: #94a3b8; font-size: .64rem; cursor: pointer; white-space: nowrap;
}
.nav-stil .ns-seg button:hover { background: #131c2e; color: #e2e8f0; }
.nav-stil .ns-seg button.aktif { background: var(--ana); color: #fff; font-weight: 600; }

.nos-alt { border-top: 1px solid #1e293b; padding: 8px 0; }
.nos-alt .kullanici { display: flex; align-items: center; gap: 12px; padding: 8px 16px; white-space: nowrap; }
.nos-alt .kullanici .ikon {
    width: 28px; height: 28px; flex: 0 0 28px;
    display: grid; place-items: center;
    background: var(--ana); color: #fff; border-radius: 50%; font-size: .8rem; font-weight: 700;
}
.nos-alt .kullanici .etiket { display: flex; flex-direction: column; line-height: 1.2; }
.nos-alt .kullanici small { color: #64748b; font-size: .7rem; }

/* ── Ana alan ─────────────────────────────────────────────────────────────── */
.nos-ana {
    flex: 1; min-width: 0;                 /* min-width:0 → geniş tablolar sayfayı taşırmasın */
    margin-left: var(--yan-genis);
    transition: margin-left .18s ease;
    display: flex; flex-direction: column;
}
.nos-kabuk.dar .nos-ana { margin-left: var(--yan-dar); }

.nos-ust {
    height: var(--ust);
    background: var(--kart); border-bottom: 1px solid var(--cizgi);
    display: flex; align-items: center; gap: 8px; padding: 0 12px;
    position: sticky; top: 0; z-index: 30;
}

.ikon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--cizgi); background: #fff; border-radius: 8px;
    cursor: pointer; font-size: 1rem; color: var(--soluk);
}
.ikon-btn:hover { background: var(--zemin); }

/* Üst barın sağı: kullanıcı bloğu + Çıkış (Ayarlar → "Üst" seçiliyken). Çıkış en sağda. */
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ust-kullanici { display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 4px; }
.ust-avatar {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--ana); color: #fff; font-size: .82rem; font-weight: 700;
}
.ust-ad { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.ust-ad strong { font-size: .85rem; color: var(--metin); }
.ust-ad small { font-size: .7rem; color: var(--soluk); }
.ust-cikis {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: 8px;
    border: 1px solid var(--ana); color: var(--ana);
    font-size: .85rem; font-weight: 600; text-decoration: none;
    background: #fff; transition: background .12s, color .12s;
}
.ust-cikis:hover { background: var(--ana); color: #fff; }
/* Telefonda ad/rol sığmaz — yalnız avatar + Çıkış kalsın. */
@media (max-width: 640px) { .ust-ad { display: none; } }

.nos-icerik { padding: 16px; flex: 1; min-width: 0; }
.nos-perde { display: none; }

/* ── Ortak ────────────────────────────────────────────────────────────────── */
.kart {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.sayfa-bas { margin-bottom: 14px; }
.sayfa-bas p { margin: 0; color: var(--soluk); font-size: .85rem; }

.arac-cubugu { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }

.rozet { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.rozet.bekle { background: #fef3c7; color: #92400e; }
.rozet.tamam { background: #dcfce7; color: #166534; }
.rozet.bilgi { background: var(--ana-acik); color: var(--ana-koyu); }

.bos-durum { text-align: center; padding: 40px 16px; color: var(--soluk); }

/* Geniş tablolar kendi içinde kaysın; sayfa gövdesi asla yatay kaymamalı. */
.kaydir { overflow-x: auto; }

/* ── Toplama ekranı ───────────────────────────────────────────────────────── */
.toplama-satir {
    background: var(--kart);
    border: 1px solid var(--cizgi); border-left: 4px solid var(--cizgi);
    border-radius: 10px; padding: 12px; margin-bottom: 10px;
}
.toplama-satir.tamam { border-left-color: var(--basari); background: #f0fdf4; }
.toplama-satir.kismi { border-left-color: var(--uyari); }
.toplama-satir.vurgu { animation: vurgula .8s ease; }
@keyframes vurgula { from { background: var(--ana-acik); } to { background: var(--kart); } }

.toplama-satir .stok { font-weight: 700; font-size: .95rem; }
.toplama-satir .aciklama { color: var(--soluk); font-size: .82rem; margin: 2px 0 8px; }
.toplama-satir .raf { font-size: .75rem; color: var(--ana-koyu); font-weight: 600; }

.miktar-kutu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.miktar-kutu button {
    width: 44px; height: 44px;               /* parmak hedefi — 44px altına inme */
    border: 1px solid var(--cizgi); background: #fff; border-radius: 8px;
    font-size: 1.3rem; cursor: pointer; color: var(--metin);
}
.miktar-kutu button:active { background: var(--ana-acik); }
.miktar-kutu input {
    width: 74px; height: 44px; text-align: center;
    border: 1px solid var(--cizgi); border-radius: 8px;
    font-size: 1.05rem; font-weight: 700;
}
.miktar-kutu .hedef { color: var(--soluk); font-size: .85rem; white-space: nowrap; }

.okutma-bar {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--kart); border-top: 1px solid var(--cizgi);
    padding: 10px; margin: 12px -16px -16px;
    display: flex; gap: 8px;
}
.okutma-bar .btn-birincil { flex: 1; }

.btn-birincil, .btn-ikincil, .btn-tehlike {
    height: 48px; padding: 0 18px; border-radius: 10px;
    font-size: .95rem; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}

/* Buton görünümlü BAĞLANTILAR (<a class="btn-...">). Tarayıcı bağlantıya alt çizgi
   koyuyor ve yazıyı dikeyde ortalamıyor — buton gibi görünmeleri gerekiyorsa
   buton gibi davranmalılar. */
a.btn-birincil, a.btn-ikincil, a.btn-tehlike {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    text-decoration: none; box-sizing: border-box;
}
a.btn-birincil:hover, a.btn-ikincil:hover, a.btn-tehlike:hover { text-decoration: none; }
.btn-birincil { background: var(--ana); color: #fff; }
.btn-birincil:hover { background: var(--ana-koyu); }
.btn-birincil:disabled { background: #94a3b8; cursor: not-allowed; }
.btn-ikincil { background: #fff; border-color: var(--cizgi); color: var(--metin); }
.btn-ikincil:hover { background: var(--zemin); }
.btn-tehlike { background: #fff; border-color: #fecaca; color: var(--hata); }
.btn-tehlike:hover { background: #fef2f2; }

/* Kartın sağ alt köşesindeki Sil butonu — kırmızı zemin, beyaz ikon + yazı. */
.kart-sil-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px; border-radius: 9px;
    background: var(--hata); color: #fff; border: none; cursor: pointer;
    font-size: .82rem; font-weight: 600; line-height: 1;
    box-shadow: 0 1px 4px rgba(220, 38, 38, .25);
    transition: filter .15s, transform .1s, box-shadow .15s;
}
.kart-sil-btn:hover { filter: brightness(.94); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(220, 38, 38, .32); }
.kart-sil-btn:active { transform: translateY(0); }
.kart-sil-btn svg { display: block; }

/* ── Sevkiyat Planlama Dashboard (B2B BI dili) ───────────────────────── */
.bi-top-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bi-top-kpi {
    background: #fff; border-radius: 14px; padding: 14px 18px; min-width: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.04); border-left: 5px solid #0284c7;
    transition: transform .16s ease, box-shadow .16s ease;
}
.bi-top-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.bi-top-kpi.kpi-tik { cursor: pointer; }
.bi-top-kpi.kpi-tik:hover { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.bi-top-kpi.kpi-tik .bi-top-kpi-alt { color: var(--ana); font-weight: 600; }
.bi-top-kpi-blue { border-left-color: #0284c7; }
.bi-top-kpi-teal { border-left-color: #14b8a6; }
.bi-top-kpi-purple { border-left-color: #8e2de2; }
.bi-top-kpi-orange { border-left-color: #f59e0b; }
.bi-top-kpi-red { border-left-color: #dc2626; }
.bi-top-kpi-label { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-top-kpi-value { font-size: 22px; font-weight: 800; color: #0f172a; margin-top: 4px; line-height: 1.1; }
.bi-top-kpi-alt { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.bi-gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }

/* Sevkiyat Planı ağaç/accordion (grupla → tıkla → detay) */
.plan-agac { background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.plan-baslik, .plan-satir { display: grid; align-items: center; gap: 8px; padding: 10px 14px; }
.musteri-mod .plan-baslik, .musteri-mod .plan-satir { grid-template-columns: 24px minmax(150px, 2.4fr) 1.4fr .9fr .9fr .9fr 1.3fr; }
.stok-mod .plan-baslik, .stok-mod .plan-satir { grid-template-columns: 24px minmax(150px, 2.6fr) .9fr .9fr .9fr .8fr 1.3fr; }
.plan-baslik { background: var(--zemin); font-size: .7rem; font-weight: 700; color: var(--soluk); text-transform: uppercase; letter-spacing: .4px; }
.plan-satir { border-top: 1px solid var(--cizgi); cursor: pointer; transition: background .12s; }
.plan-satir:hover { background: var(--zemin); }
.plan-grup.acik .plan-satir { background: var(--ana-acik); }
.plan-ok { color: var(--soluk); font-size: .7rem; }
.plan-ad { min-width: 0; }
.plan-ad .ad-1 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-ad .ad-1.mono { font-family: Menlo, monospace; font-size: .82rem; }
.plan-ad .ad-2 { font-size: .74rem; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-huc.sag { text-align: right; font-weight: 600; }
.plan-huc.orta { text-align: center; }
.plan-detay { background: #fafbfc; border-top: 1px dashed var(--cizgi); padding: 4px 14px 8px 46px; }
.plan-detay-satir { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f1f5f9; font-size: .82rem; }
.plan-detay-satir:last-child { border-bottom: none; }
.plan-detay-satir .mini { flex-shrink: 0; min-width: 74px; text-align: center; }
.detay-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detay-miktar { font-weight: 700; min-width: 56px; text-align: right; }
.detay-termin { min-width: 96px; text-align: right; }

/* Görünüm barı: perspektif + kart/tablo yan yana */
/* Perspektif solda, Kart/Tablo EN SAĞDA — diğer liste ekranlarındaki yerin aynısı. */
.plan-gorunum-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.plan-gorunum-bar > .gorunum:last-child { margin-left: auto; }

/* Kart görünümü — 3 sütun ızgara, açılabilir */
.plan-kart-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1150px) { .plan-kart-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .plan-kart-izgara { grid-template-columns: 1fr; } }
.plan-kartc { padding: 12px 14px; }
.plan-kartc-bas { display: flex; align-items: start; justify-content: space-between; gap: 8px; cursor: pointer; }
.plan-kartc-ad { min-width: 0; }
.plan-kartc-ad .baslik-1 { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.plan-kartc-ad .baslik-1.mono { font-family: Menlo, monospace; font-size: .84rem; }
.plan-kartc-ad .baslik-2 { font-size: .74rem; color: var(--soluk); margin-top: 2px; }
.plan-kartc .plan-ok { color: var(--soluk); font-size: .72rem; flex-shrink: 0; margin-top: 3px; }
.plan-kartc-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.plan-kartc-sayilar > div {
    border-radius: 8px; padding: 7px 8px; display: flex; flex-direction: column; gap: 2px;
    border-left: 3px solid transparent;
}
.plan-kartc-sayilar span { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; opacity: .85; }
.plan-kartc-sayilar strong { font-size: 1.05rem; }

/* Parasal karar satırı (müşteri): Toplam Açık + Mali Durum butonu */
.plan-mali {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    padding: 7px 9px; border-radius: 8px; background: var(--zemin); border: 1px solid var(--cizgi);
}
.plan-mali .pm-etiket { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--soluk); }
.plan-mali .pm-tutar { font-size: 1rem; margin-right: auto; }
.pm-tutar.borc, .ad-mali strong.borc { color: var(--hata); }
.pm-btn {
    border: 1px solid var(--ana); background: var(--ana-acik); color: var(--ana-koyu);
    border-radius: 8px; padding: 4px 10px; font-size: .76rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pm-btn:hover { background: var(--ana); color: #fff; }
.plan-ad .ad-mali { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: .74rem; color: var(--soluk); }
.plan-ad .ad-mali strong { color: var(--metin); }
/* Kategori renkleri: Kalan Sipariş=mavi, Hazırlıkta=turkuaz, Fatura Hzr.=mor */
.plan-kartc-sayilar > div:nth-child(1) { background: #eff6ff; border-left-color: #0284c7; }
.plan-kartc-sayilar > div:nth-child(1) span, .plan-kartc-sayilar > div:nth-child(1) strong { color: #0284c7; }
.plan-kartc-sayilar > div:nth-child(2) { background: #f0fdfa; border-left-color: #0f766e; }
.plan-kartc-sayilar > div:nth-child(2) span, .plan-kartc-sayilar > div:nth-child(2) strong { color: #0f766e; }
.plan-kartc-sayilar > div:nth-child(3) { background: #faf5ff; border-left-color: #7c3aed; }
.plan-kartc-sayilar > div:nth-child(3) span, .plan-kartc-sayilar > div:nth-child(3) strong { color: #7c3aed; }
/* Sıfır değerleri soluk göster ki dolu olanlar öne çıksın */
.plan-kartc-sayilar > div.sifir { background: var(--zemin); border-left-color: var(--cizgi); }
.plan-kartc-sayilar > div.sifir span, .plan-kartc-sayilar > div.sifir strong { color: #cbd5e1; }
.plan-kartc.acik { border-color: var(--ana); box-shadow: 0 0 0 1px var(--ana); }
.plan-detay.kart-detay { margin-top: 10px; padding: 4px 0 0; border-top: 1px dashed var(--cizgi); background: transparent; }
.plan-detay.kart-detay .plan-detay-satir { padding: 5px 0; }

/* Kart modu — uzun ad (.kart-mod) VEYA dar ekran: satır dikey karta dönüşür, data-label görünür */
.plan-agac.kart-mod .plan-baslik { display: none; }
.plan-agac.kart-mod .plan-satir { display: block; padding: 12px 14px; position: relative; }
.plan-agac.kart-mod .plan-ok { position: absolute; right: 14px; top: 12px; }
.plan-agac.kart-mod .plan-ad { margin-bottom: 8px; padding-right: 20px; }
.plan-agac.kart-mod .plan-ad .ad-1 { white-space: normal; }
.plan-agac.kart-mod .plan-huc, .plan-agac.kart-mod .plan-il {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    text-align: left !important; padding: 3px 0; font-weight: 600;
}
.plan-agac.kart-mod .plan-huc::before, .plan-agac.kart-mod .plan-il::before {
    content: attr(data-label); font-weight: 600; color: var(--soluk); font-size: .74rem; text-transform: none;
}
@media (max-width: 820px) {
    .plan-baslik { display: none; }
    .plan-satir { display: block; padding: 12px 14px; position: relative; }
    .plan-ok { position: absolute; right: 14px; top: 12px; }
    .plan-ad { margin-bottom: 8px; padding-right: 20px; }
    .plan-ad .ad-1 { white-space: normal; }
    .plan-huc, .plan-il {
        display: flex; justify-content: space-between; align-items: center; gap: 8px;
        text-align: left !important; padding: 3px 0; font-weight: 600;
    }
    .plan-huc::before, .plan-il::before {
        content: attr(data-label); font-weight: 600; color: var(--soluk); font-size: .74rem;
    }
    .plan-detay { padding-left: 14px; }
    .plan-filtre { flex-wrap: wrap; }
}
/* AI serbest soru input */
.dash-ai-input { display: flex; gap: 8px; margin-top: 12px; }
.dash-ai-input input { flex: 1; height: 38px; border: 1px solid #d8b4fe; border-radius: 8px; padding: 0 12px; font-size: 13.5px; }
.dash-ai-input button { background: linear-gradient(135deg, #8e2de2, #4a00e0); color: #fff; border: none; border-radius: 8px; width: 46px; font-size: 16px; font-weight: 700; cursor: pointer; }
.dash-ai-input button:disabled { opacity: .5; cursor: default; }

/* AI İçgörü paneli (varsayılan gizli toggle) — B2B dash-ai mor gradient */
.dash-ai { margin-top: 20px; background: linear-gradient(180deg, #faf5ff, #fff); border: 1px solid #e9d5ff; border-radius: 12px; padding: 14px 16px; }
.dash-ai-head { display: flex; align-items: center; gap: 10px; }
.dash-ai-title { font-weight: 800; color: #7c3aed; font-size: 15px; }
.dash-ai-mini { background: #fff; color: #6d28d9; border: 1px solid #d8b4fe; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.dash-ai-mini:hover { background: #f3e8ff; }
.dash-ai-body { margin-top: 12px; }
.dash-ai-empty { color: #888; font-size: 13px; padding: 8px 0; }
.dash-ai-yorum { background: #fff; border: 1px solid #ede9fe; border-radius: 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: #1f2937; }
.dash-ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dash-ai-chip { background: #f3e8ff; color: #6d28d9; border: none; border-radius: 16px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dash-ai-chip:hover { background: #e9d5ff; }
.dash-ai-chip:disabled { opacity: .5; cursor: default; }
.dash-ai-chip-ana { background: #7c3aed; color: #fff; }
.dash-ai-chip-ana:hover { background: #6d28d9; }

/* ── Silme onay diyaloğu (B2B tarzı) ─────────────────────────────────── */
.silo-dialog .rz-dialog-content { padding: 0 !important; }
.silo-dialog .rz-dialog { border-radius: 14px; overflow: hidden; padding: 0; }

.silo { width: 100%; }
.silo-bas {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--ana); color: #fff; padding: 12px 18px;
    font-weight: 700; font-size: 1rem;
}
.silo-x {
    border: none; background: transparent; color: #fff; opacity: .85; cursor: pointer;
    font-size: 1rem; width: 28px; height: 28px; border-radius: 7px; line-height: 1;
}
.silo-x:hover { background: rgba(255, 255, 255, .18); opacity: 1; }

.silo-govde { text-align: center; padding: 22px 26px 24px; }
.silo-ikon { font-size: 52px; margin-bottom: 10px; animation: silo-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes silo-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.silo-mesaj { font-size: .92rem; color: var(--metin); margin: 0 0 14px; line-height: 1.5; }
.silo-mesaj strong { color: var(--metin); font-weight: 700; }
.silo-detay {
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px;
    padding: 10px 14px; color: #991b1b; font-size: .78rem; line-height: 1.45;
    margin-bottom: 18px; text-align: left;
}
.silo-butonlar { display: flex; gap: 10px; justify-content: center; }
.silo-vazgec, .silo-sil {
    padding: 10px 22px; border-radius: 9px; font-weight: 600; font-size: .86rem;
    cursor: pointer; border: 1px solid transparent; transition: all .16s ease;
}
.silo-vazgec { background: #fff; border-color: var(--cizgi); color: var(--soluk); }
.silo-vazgec:hover { background: var(--zemin); color: var(--metin); }
.silo-sil {
    background: var(--hata); color: #fff; display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .28);
}
.silo-sil:hover { filter: brightness(.95); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 38, 38, .36); }
.silo-sil:active { transform: translateY(0); }

/* ── Dışa Aktar: doğrudan Excel + PDF butonları ──────────────────────── */
.da-btn {
    height: 40px; padding: 0 15px; border-radius: 10px; cursor: pointer;
    font-size: .9rem; font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid transparent; transition: all .15s ease;
}
.da-btn-ikon { font-size: 1.05rem; line-height: 1; }
.da-btn.xls { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.da-btn.xls:hover { background: #16a34a; border-color: #16a34a; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 163, 74, .28); }
.da-btn.pdf { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.da-btn.pdf:hover { background: #dc2626; border-color: #dc2626; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(220, 38, 38, .28); }

.da-katman {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}

.da-onizle {
    background: #fff; border-radius: 12px; width: 100%; max-width: 900px; height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.da-onizle-bas {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--cizgi);
    background: var(--zemin); font-weight: 700; color: var(--metin);
}
.da-onizle-arac { display: flex; gap: 8px; align-items: center; }
.da-onizle-arac a, .da-onizle-arac button {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--cizgi);
    background: #fff; color: var(--metin); display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; text-decoration: none; font-size: 1rem;
}
.da-onizle-arac a:hover { background: var(--zemin); color: var(--ana); }
.da-onizle-arac button:hover { background: #fee2e2; color: var(--hata); }
.da-onizle-govde { flex: 1; min-height: 0; background: #f1f5f9; }
.da-onizle-cerceve { width: 100%; height: 100%; border: none; display: block; }

.okutma-durum { padding: 8px 12px; border-radius: 8px; font-size: .85rem; margin-bottom: 10px; font-weight: 600; }
.okutma-durum.ok { background: #dcfce7; color: #166534; }
.okutma-durum.yok { background: #fee2e2; color: #991b1b; }

#kamera-video { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; background: #000; }

/* ── Login ────────────────────────────────────────────────────────────────── */
.giris-sayfa {
    min-height: 100vh; display: grid; place-items: center; padding: 20px;
    background: linear-gradient(135deg, #0b1220 0%, #134e4a 100%);
}
.giris-kart {
    width: 100%; max-width: 380px;
    background: #fff; border-radius: 16px; padding: 28px;
    box-shadow: 0 20px 45px rgba(0,0,0,.25);
}
.giris-kart .logo {
    width: 52px; height: 52px; margin: 0 auto 14px;
    display: grid; place-items: center;
    background: var(--ana); color: #fff; border-radius: 14px;
    font-size: 1.5rem; font-weight: 800;
}
.giris-logo {
    display: block; margin: 0 auto 14px;
    max-height: 64px; max-width: 220px; object-fit: contain;
}
/* Alt yazı kaldırıldı — boşluğu başlık taşıyor. */
.giris-kart h1 { text-align: center; font-size: 1.25rem; margin-bottom: 20px; }
.giris-kart .alt { text-align: center; color: var(--soluk); font-size: .85rem; margin-bottom: 20px; }
.giris-kart label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.giris-kart input {
    width: 100%; height: 46px; padding: 0 12px; margin-bottom: 14px;
    border: 1px solid var(--cizgi); border-radius: 10px; font-size: .95rem;
}
.giris-kart input:focus { outline: 2px solid var(--ana); border-color: var(--ana); }
.giris-kart .btn-birincil { width: 100%; }
.giris-kart .hatirla {
    display: flex; align-items: center; gap: 8px;
    margin: -4px 0 14px; font-size: .85rem; font-weight: 500;
    cursor: pointer; user-select: none;
}
.giris-kart .hatirla input {
    width: 18px; height: 18px; margin: 0; accent-color: var(--ana);
}
.giris-hata {
    background: #fee2e2; color: #991b1b; padding: 10px 12px;
    border-radius: 8px; font-size: .85rem; margin-bottom: 14px;
}
.kur-btn {
    width: 100%; height: 46px; margin-top: 12px;
    background: #fff; border: 1px dashed var(--ana); color: var(--ana-koyu);
    border-radius: 10px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.kur-btn:hover { background: var(--ana-acik); }

/* ── Liste ekranları (B2B.Blazor deseni) ──────────────────────────────────── */
/* Başlık + kayıt sayısı */
.liste-bas {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.liste-bas h1 { margin: 0; flex: 1; }
.liste-bas .sayac { font-size: .8rem; color: var(--soluk); font-weight: 400; }

/* Filtre çubuğu — beyaz kart içinde arama + seçimler */
.filtre-bar {
    background: var(--kart); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.filtre-bar input[type="text"], .filtre-bar input:not([type]) {
    flex: 1; min-width: 240px;
    height: 40px; padding: 0 12px;
    border: 1px solid var(--cizgi); border-radius: 8px; font-size: .86rem;
}
/* Not: `background` KISAYOLU kullanılmaz — taban `select` kuralındaki ok gradyanını
   silerdi. Yalnız rengi ezip ok çizimini devralıyoruz. */
.filtre-bar select {
    height: 40px; padding: 0 30px 0 10px;
    border: 1px solid var(--cizgi); border-radius: 8px;
    font-size: .86rem; background-color: #fff;
}

/* Tarih girdileri filtre çubuğunda çıplak kalıyordu — metin kutularıyla aynı ölçü. */
.filtre-bar input[type="date"], .filtre-bar input[type="time"], .filtre-bar input[type="number"] {
    height: 40px; padding: 0 10px;
    border: 1px solid var(--cizgi); border-radius: 8px;
    font-family: inherit; font-size: .86rem; background-color: #fff; color: inherit;
}
.filtre-bar input:focus, .filtre-bar select:focus {
    outline: none; border-color: var(--ana);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ana) 18%, transparent);
}

/* Dışa aktarma (Excel/PDF) her ekranda filtre çubuğunun EN SAĞINDA durur —
   arama alanlarıyla karışmasın, göz hep aynı yerde arasın. */
.filtre-bar .disa-aktar {
    margin-left: auto; display: flex; align-items: center; gap: 8px;
}
/* Filtre çubuğu DIŞINDAKİ açılır listeler — Satış İrsaliyesi'nin Durum/Onay
   seçicileri stilsiz kalıyordu. .filtre-bar select ile aynı görünüm. */
.sec-kutu {
    height: 36px; padding: 0 30px 0 12px;
    border: 1px solid var(--cizgi); border-radius: 8px;
    font-size: .84rem; font-weight: 600; color: var(--metin);
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E") no-repeat right 9px center;
    background-size: 14px;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.sec-kutu:hover { border-color: var(--ana); }
.sec-kutu:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px var(--ana-acik); }

/* Ara / Temizle düğmeleri — GLOBAL. Eskiden yalnız `.filtre-bar` içindeyken stilleniyordu;
   filtre satırını kart başlığının yanına koyan ekranlarda (Satış İrsaliyesi) buton çıplak
   kalıyordu. Adı olan sınıf her yerde aynı görünmeli. */
.btn-ara, .btn-temizle {
    height: 40px; padding: 0 16px; border-radius: 8px;
    font-size: .84rem; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.btn-ara { background: var(--ana); color: #fff; }
.btn-ara:hover { background: var(--ana-koyu); }
.btn-ara:disabled { background: #94a3b8; cursor: default; }
.btn-temizle { background: var(--zemin); color: #475569; border-color: var(--cizgi); }

/* Kart ızgarası */
.kart-izgara { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.veri-kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 10px; padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex; flex-direction: column;
}
/* Kart görünümü de aynı dili konuşur: üzerine gelince tema renginde kenarlık. */
.veri-kart { transition: border-color .12s ease, box-shadow .12s ease; }
.veri-kart:hover { border-color: var(--ana); box-shadow: 0 6px 18px rgba(15,23,42,.08); }

.veri-kart .kod {
    font-family: "SF Mono", Menlo, monospace;
    font-size: .88rem; font-weight: 700; color: var(--ana-koyu);
}
.veri-kart .baslik { font-size: .82rem; color: #334155; line-height: 1.4; margin-top: 2px; }

/* Avatarlı kart başlığı (kişi/kurum listeleri). Unvan kalın ve üstte, kod avatar
   rengiyle altında — NatraWMS müşteri kartı deseni. */
.kart-kimlik { display: flex; gap: 10px; align-items: center; min-width: 0; }
.kart-kimlik .baslik {
    font-weight: 700; color: var(--metin); font-size: .88rem; margin-top: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kart-kimlik .kod { font-size: .75rem; font-weight: 600; }
.veri-kart .satirlar { font-size: .8rem; color: #475569; line-height: 1.7; margin-top: 8px; }
/* flex-wrap ŞART: kartlarda 3-4 aksiyon butonu olabiliyor; sarmazsa dar kartta
   son buton kart dışına taşıp kesiliyor. Butonlar da küçülebilmeli (min-width:0). */
.veri-kart .aksiyon { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.veri-kart .aksiyon > button { min-width: 0; white-space: nowrap; }

/* Küçük rozetler */
.mini { font-size: .65rem; font-weight: 600; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.mini.gri { color: #64748b; background: #f1f5f9; }
.mini.yesil { color: #15803d; background: #dcfce7; }
.mini.kirmizi { color: #b91c1c; background: #fee2e2; }
.mini.mavi { color: #1565c0; background: #e3f2fd; }
.mini.turkuaz { color: #0f766e; background: #ccfbf1; }
.mini.sari { color: #92400e; background: #fef3c7; }
.mini.mor { color: #6d28d9; background: #ede9fe; }
.mini.transfer { color: #9a3412; background: #ffedd5; }
.mini.depo { color: #3730a3; background: #e0e7ff; }

/* Serbest metin etiketleri (Marka, Grup …): renk DEĞERDEN türetilir, elle
   eşlenmez — 778 marka var, listelenemez. Aynı metin her zaman aynı rengi alır,
   böylece göz "Bosch mavi" diye öğrenebiliyor. Tonlar rozet renkleriyle
   karışmasın diye ayrı bir dizi. */
.mini.e0 { color: #1d4ed8; background: #dbeafe; }
.mini.e1 { color: #b45309; background: #fef3c7; }
.mini.e2 { color: #15803d; background: #dcfce7; }
.mini.e3 { color: #a21caf; background: #fae8ff; }
.mini.e4 { color: #0f766e; background: #ccfbf1; }
.mini.e5 { color: #be123c; background: #ffe4e6; }
.mini.e6 { color: #4338ca; background: #e0e7ff; }
.mini.e7 { color: #c2410c; background: #ffedd5; }
.mini.e8 { color: #0369a1; background: #e0f2fe; }
.mini.e9 { color: #6d28d9; background: #ede9fe; }

.rozet-satir { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Müşteri avatarı — koddan üretilen renk */
.avatar {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: .82rem;
}

/* Tablo görünümü */
.veri-tablo { width: 100%; border-collapse: collapse; font-size: .84rem; background: #fff; }
.veri-tablo th {
    background: var(--zemin); padding: 10px 12px; text-align: left;
    font-weight: 600; color: #475569; font-size: .76rem; white-space: nowrap;
    border-bottom: 2px solid var(--cizgi); position: sticky; top: 0; z-index: 5;
}
.veri-tablo td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }

/* Satır vurgusu TEMA RENGİNDEN gelir (sabit gri değil) — kart görünümü zaten
   --ana-acik kullanıyordu, tablo görünümü ondan kopuktu.
   Arka plan TD'ye veriliyor: vurgulu satırlar (tr.vurgu td) rengi TD üzerinde
   tanımlıyor ve TR'ye verilen arka planı örterdi.

   İmleç `default`: kayıt ÇİFT TIKLA açılıyor, el imleci "tek tık yeter" diye
   yanlış söz verirdi. Tıklanabilirlik hover rengiyle belli oluyor. */
.veri-tablo tbody tr { transition: background .12s ease; }
.veri-tablo tbody tr:hover > td { background: var(--ana-acik); }

/* Tıklama anı: aynı renk ailesi, soldan tema renginde şerit — basıldığı belli olsun. */
.veri-tablo tbody tr:active > td { background: var(--ana-acik); }
.veri-tablo tbody tr:active > td:first-child { box-shadow: inset 3px 0 0 var(--ana); }

.veri-tablo .sag { text-align: right; }
.veri-tablo .orta { text-align: center; }

/* Görünüm değiştirici (tablo / kart) */
.gorunum { display: inline-flex; border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; }
.gorunum button {
    height: 40px; padding: 0 12px; border: none; background: #fff;
    cursor: pointer; font-size: .82rem; color: #475569;
}
.gorunum button.aktif { background: var(--ana); color: #fff; }

.sayfalayici {
    background: var(--kart); border-radius: 10px; padding: 4px 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06); margin-top: 14px;
}

/* ── Evrak kabuğu (GioNextCRM deseni) ─────────────────────────────────────── */
.evrak-katman {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    animation: evrakGir .18s ease-out;
}
@keyframes evrakGir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Tam sayfa: ekranı kaplar. Popup: ortada pencere, arkada perde. */
.evrak-katman.tam { background: var(--zemin); }
.evrak-katman.popup { background: rgba(15, 23, 42, .55); padding: 24px; }

.evrak-pencere {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: var(--zemin);
    overflow: hidden;
}
.evrak-katman.popup .evrak-pencere {
    max-width: 1200px; max-height: 92vh;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.evrak-ust {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: #0f172a; color: #fff;
    flex: 0 0 auto;
}
.evrak-geri, .evrak-kapat {
    width: 36px; height: 36px; flex: 0 0 36px;
    display: grid; place-items: center;
    border: 1px solid #334155; background: transparent; color: #cbd5e1;
    border-radius: 8px; cursor: pointer; font-size: 1rem;
}
.evrak-geri:hover, .evrak-kapat:hover { background: #1e293b; color: #fff; }

.evrak-kimlik { flex: 1; min-width: 0; }
.evrak-kimlik .ust-satir { font-size: .74rem; color: #94a3b8; display: flex; gap: 6px; align-items: center; }
.evrak-kimlik .ust-satir .evrak-no { font-family: Menlo, monospace; color: #cbd5e1; }
.evrak-kimlik .alt-satir {
    font-size: 1.02rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.evrak-ust-aksiyon { display: flex; align-items: center; gap: 8px; }

.evrak-sekme {
    display: flex; gap: 4px; padding: 0 16px;
    background: var(--kart); border-bottom: 1px solid var(--cizgi);
    flex: 0 0 auto; overflow-x: auto;
}
.evrak-sekme button {
    padding: 11px 16px; border: none; background: none;
    border-bottom: 2px solid transparent;
    color: var(--soluk); font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.evrak-sekme button:hover { color: var(--ana-koyu); }
.evrak-sekme button.aktif { color: var(--ana); border-bottom-color: var(--ana); }

.evrak-govde { flex: 1; overflow-y: auto; padding: 16px; }

/* Tek formluk kayıt popup'ı içeriği kadar yer kaplar — boş gövdeyle ekranı doldurmaz.
   (Evrak popup'ı aksine sabit yüksek kalır: kalem tablosu büyüyüp küçüldükçe zıplamasın.) */
.evrak-katman.popup .evrak-pencere.dar { height: auto; }
.evrak-katman.popup .evrak-pencere.dar .evrak-govde { flex: 0 1 auto; padding: 20px; }
.evrak-toplam { margin-top: 12px; }

.evrak-alt {
    display: flex; gap: 8px; justify-content: flex-end; align-items: center;
    padding: 10px 16px;
    background: var(--kart); border-top: 1px solid var(--cizgi);
    flex: 0 0 auto;
}

/* CRM'deki üçlü özet kartları (İskontolar · KDV · Genel Toplamlar) */
.ozet-izgara {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.ozet-kart {
    background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: 12px; overflow: hidden;
}
.ozet-kart .ozet-bas {
    padding: 9px 12px; background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--soluk);
}
.ozet-kart .ozet-govde { padding: 10px 12px; }
.ozet-satir {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 5px 0; font-size: .85rem;
}
.ozet-satir .deger { font-weight: 600; }
.ozet-satir.vurgu {
    border-top: 1px solid var(--cizgi); margin-top: 6px; padding-top: 10px;
    font-size: 1.35rem; font-weight: 800; color: var(--ana);
}

/* ── Barkod kutusu ────────────────────────────────────────────────────────── */
.barkod-kutu {
    display: flex; align-items: stretch; gap: 0;
    border: 2px solid var(--ana); border-radius: 12px;
    background: #fff; overflow: hidden;
}
.barkod-kutu .bk-ikon {
    display: grid; place-items: center;
    width: 48px; flex: 0 0 48px;
    background: var(--ana-acik); color: var(--ana-koyu);
    border-right: 1px solid var(--ana);
}
.barkod-kutu input {
    flex: 1; min-width: 0; height: 48px;
    border: none; outline: none; padding: 0 12px;
    font-size: .95rem; font-family: Menlo, monospace;
}
.barkod-kutu .bk-btn {
    padding: 0 16px; border: none; cursor: pointer;
    background: var(--ana); color: #fff; font-weight: 600; font-size: .88rem;
    display: flex; align-items: center; gap: 6px;
}
.barkod-kutu .bk-btn:hover { background: var(--ana-koyu); }
.barkod-kutu .bk-btn.kamera { background: #fff; color: var(--ana-koyu); border-left: 1px solid var(--ana); }
.barkod-kutu .bk-btn.kamera:hover { background: var(--ana-acik); }

@media (max-width: 640px) {
    .evrak-katman.popup { padding: 0; }
    .evrak-katman.popup .evrak-pencere { max-height: 100vh; border-radius: 0; }
    .evrak-alt { justify-content: stretch; }
    .evrak-alt > * { flex: 1; }
}

/* ── Mobil ────────────────────────────────────────────────────────────────── */
.sadece-mobil { display: none; }
.sadece-masaustu { display: grid; }

@media (max-width: 860px) {
    .sadece-mobil { display: grid; }
    .sadece-masaustu { display: none; }

    /* Yan menü ekran dışına çekilir, drawer olarak açılır. */
    .nos-yan { transform: translateX(-100%); width: var(--yan-genis); flex-basis: var(--yan-genis); }
    .nos-kabuk.drawer-acik .nos-yan { transform: translateX(0); }

    /* Mobilde "dar" mod anlamsız — drawer her zaman tam genişlik açılır. */
    .nos-kabuk.dar .nos-yan { width: var(--yan-genis); flex-basis: var(--yan-genis); }
    .nos-kabuk.dar .etiket { display: revert; }
    .nos-kabuk.dar .grup-baslik { height: auto; padding: 12px 16px 4px; }
    .nos-kabuk.dar .menu, .nos-kabuk.dar .kullanici { justify-content: flex-start; padding-left: 16px; }

    .nos-ana, .nos-kabuk.dar .nos-ana { margin-left: 0; }

    .nos-kabuk.drawer-acik .nos-perde {
        display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.45);
    }

    .nos-icerik { padding: 12px; }
    .okutma-bar { margin: 12px -12px -12px; }
}

/* Blazor hata çubuğu */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: #fee2e2; color: #991b1b; padding: 10px 14px;
    box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ── Kayıt formu alan ızgarası (stok/müşteri/…) ───────────────────────────── */
/* ── Açılır liste (combobox) — TABAN görünüm ────────────────────────────────
   Yerel <select> görünümü işletim sistemine göre değişiyor; tablo/kart içinde
   kaba duruyordu. Ok işareti CSS gradyanıyla çizilir (ikon dosyası yok), böylece
   her yerde aynı görünür.

   Kap-özel kurallar (.filtre-bar, .alan-izgara, .bf-input) DAHA SPESİFİK olduğu
   için kendi ölçülerini korur; buradan yalnız ortak görünümü devralırlar.
   Radzen'in kendi kontrolleri (rz-*) dışarıda bırakılır. */
select:not([class*="rz-"]) {
    height: 36px; padding: 0 30px 0 10px;
    background-color: var(--kart); color: inherit;
    border: 1px solid var(--cizgi); border-radius: 8px;
    font-family: inherit; font-size: .86rem; line-height: 1.2; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--soluk) 50%),
                      linear-gradient(135deg, var(--soluk) 50%, transparent 50%);
    background-position: right 14px center, right 9px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color .12s, box-shadow .12s;
}
select:not([class*="rz-"]):hover:not(:disabled) { border-color: #cbd5e1; }
select:not([class*="rz-"]):disabled {
    background-color: var(--zemin); color: var(--soluk); cursor: not-allowed; opacity: 1;
}
/* Ok, metnin üstüne binmesin diye satır içi ızgara girdilerinde de sağ boşluk. */
select.bf-input { padding-right: 28px; }

.alan-izgara {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.alan-izgara label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; }
.alan-izgara input, .alan-izgara select {
    width: 100%; height: 42px; padding: 0 12px;
    background: var(--kart); color: inherit;
    border: 1px solid var(--cizgi); border-radius: 10px; font-size: .9rem;
    transition: border-color .12s, box-shadow .12s;
}
.alan-izgara select { appearance: none; padding-right: 32px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--soluk) 50%),
                      linear-gradient(135deg, var(--soluk) 50%, transparent 50%);
    background-position: right 15px center, right 10px center;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.alan-izgara input:focus, .alan-izgara select:focus {
    outline: none; border-color: var(--ana);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ana) 18%, transparent);
}
.alan-izgara input:disabled { background: var(--zemin); color: var(--soluk); cursor: not-allowed; }
/* Tam satır kaplayan alan (uzun açıklama vb.) */
.alan-izgara .genis { grid-column: 1 / -1; }

/* Anahtar ızgarası. Anahtarlar .alan-izgara İÇİNE konamaz: oradaki
   `.alan-izgara label { display:block }` kuralı daha spesifik olduğu için
   `.anahtar { display:flex }`i eziyor ve yuvarlak, yazının üstüne biniyordu. */
.anahtar-izgara {
    display: grid; gap: 10px 20px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Anahtar (switch) — Delphi'deki onay kutularının web karşılığı. */
.anahtar { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
    min-height: 42px; font-size: .86rem; font-weight: 600; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar .yol {
    flex: 0 0 42px; width: 42px; height: 24px; border-radius: 999px;
    background: var(--cizgi); position: relative; transition: background .15s;
}
.anahtar .yol::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
.anahtar input:checked + .yol { background: var(--ana); }
.anahtar input:checked + .yol::after { transform: translateX(18px); }
.anahtar input:focus-visible + .yol { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ana) 25%, transparent); }

/* ── Belge Formu (BelgeFormu.razor) — SIR / SFT / HIR / TIR ortak tasarımı ──────
   GioNextCRM sipariş ekranı deseni: sekmeler + üst ızgara + kalem grid + özet panelleri. */
.bf { display: flex; flex-direction: column; gap: 12px; padding-bottom: 70px; }

.bf-ust {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 12px;
}
.bf-ust-sol { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bf-ust-sag { display: flex; align-items: center; gap: 8px; }
.bf-yol { font-size: .74rem; opacity: .7; }
.bf-yol span { margin: 0 4px; }
.bf-musteri { font-weight: 700; font-size: 1.02rem; }
.bf-geri, .bf-kapat {
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
    color: #fff; font-size: 1rem; display: grid; place-items: center;
}
.bf-geri:hover, .bf-kapat:hover { background: rgba(255,255,255,.2); }

.bf-kilit {
    background: #fffbeb; border: 1px solid var(--uyari, #f59e0b); color: #92400e;
    padding: 9px 14px; border-radius: 10px; font-size: .85rem; font-weight: 600;
}

.bf-sekmeler { display: flex; gap: 2px; border-bottom: 2px solid var(--cizgi); }
.bf-sekmeler button {
    border: none; background: none; cursor: pointer; padding: 9px 18px;
    font-size: .88rem; font-weight: 600; color: var(--soluk);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.bf-sekmeler button:hover { color: var(--metin); }
.bf-sekmeler button.aktif { color: var(--ana); border-bottom-color: var(--ana); }

.bf-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px 16px; }
.bf-kart-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.bf-kart-bas h3 { margin: 0; font-size: .95rem; }

.bf-baslik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.bf-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bf-alan.gen2 { grid-column: span 2; }
.bf-alan.gen4 { grid-column: 1 / -1; }
/* Döviz + Kur tek hücrede yan yana; Kur dar (sadece kur sayısı). */
.bf-doviz-kur { flex-direction: row; gap: 12px; }
.bf-doviz-kur .bf-dk-oge { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.bf-doviz-kur .bf-dk-kur { flex: 0 0 88px; }
.bf-alan label { font-size: .72rem; font-weight: 700; color: var(--soluk); letter-spacing: .02em; }
.bf-sabit {
    background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 8px;
    padding: 8px 10px; font-size: .88rem; min-height: 36px;
    display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-sabit.vurgu { color: var(--ana-koyu); font-weight: 700; font-family: Menlo, monospace; }
.bf-kod { color: var(--soluk); font-size: .78rem; }
.bf-input {
    border: 1px solid var(--cizgi); border-radius: 8px; padding: 8px 10px;
    font-size: .88rem; font-family: inherit; min-height: 36px; width: 100%;
}
.bf-input:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px var(--ana-acik); }
.bf-input:disabled { background: var(--zemin); color: var(--soluk); }
.bf-input.dar { max-width: 78px; }

/* ── Kalem grid ─────────────────────────────────────────────────────────────── */
.bf-grid { width: 100%; border-collapse: collapse; font-size: .85rem; }
.bf-grid th {
    text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .03em;
    color: var(--soluk); padding: 8px 8px; border-bottom: 2px solid var(--cizgi); white-space: nowrap;
}
.bf-grid th.sag { text-align: right; }
.bf-grid th.orta { text-align: center; }
.bf-grid th.dar, .bf-grid td.dar { width: 68px; }
.bf-grid td { padding: 7px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.bf-grid td.sag { text-align: right; }
.bf-grid td.orta { text-align: center; }
/* Evrak satır ızgarası da tema rengini kullanır — liste tablolarıyla aynı dil.
   Kilitli (faturalanmış) satırın kendi zemini korunur: dokunulamayan bir satırın
   üzerine gelince "tıklanabilir" görünmesi yanıltıcı olurdu. */
.bf-grid tbody tr:hover > td { background: var(--ana-acik); }
.bf-grid tbody tr.kilitli:hover > td { background: #f8fafc; }
.bf-sira { color: var(--soluk); font-size: .78rem; }
.bf-stok { font-family: Menlo, monospace; font-weight: 700; white-space: nowrap; }
.bf-birim { color: var(--soluk); font-size: .8rem; }
.bf-net { color: var(--soluk); font-variant-numeric: tabular-nums; }
.bf-toplam { font-weight: 700; font-variant-numeric: tabular-nums; }
.bf-hucre {
    border: 1px solid var(--cizgi); border-radius: 7px; padding: 5px 7px;
    font-size: .84rem; font-family: inherit; width: 88px; font-variant-numeric: tabular-nums;
}
.bf-hucre.sag { text-align: right; }
.bf-hucre:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 2px var(--ana-acik); }
/* Satır aksiyonları YAN YANA — hücre dar kalınca alt alta sarıyordu. */
.bf-aksiyon { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: nowrap; }
.bf-grid td:has(.bf-aksiyon) { white-space: nowrap; }

/* Butonlar %20 büyük: 28 → 34px, ikon 1rem → 1.2rem. */
.bf-sil {
    width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 1.05rem;
    border: 1px solid #fecaca; background: #fff; color: var(--hata);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.bf-sil:hover { background: #fef2f2; }

/* ── Giriş (yeni belge) grid'i: Satır Ekle, Stok Kodu hücresi, varyant rozetleri ── */
.bf-ekle-bar { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.bf-ekle-bar .bf-input.dar { width: 110px; height: 34px; }

/* Stok Kodu hücresi düzenlenebilirken: input + 🔍 yan yana, kolon dar kalsın. */
.bf-stok-hucre { display: flex; gap: 4px; align-items: center; }
.bf-stok-hucre .bf-hucre {
    flex: 1; width: auto; min-width: 0;
    font-family: Menlo, monospace; font-weight: 700;
}
.bf-ara-btn {
    height: 28px; padding: 0 8px; flex: none; cursor: pointer;
    border: 1px solid var(--cizgi); background: #fff; border-radius: 7px; font-size: .8rem;
}
.bf-ara-btn:hover { border-color: var(--ana); background: var(--zemin); }

/* Varyant kırılımı rozetleri (açıklama hücresinin altında) */
.bf-varyant { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

/* Miktar, seçili depodaki bakiyeyi aşıyor → satır kırmızı (çıkış belgelerinde). */
.bf-grid tbody tr.bf-eksi { background: #fef2f2; }
.bf-grid tbody tr.bf-eksi:hover { background: #fee2e2; }

/* Satırdaki "＋" — altına yeni satır açıp Stok Seç getirir. (Sil ile aynı boy.) */
.bf-ekle-satir {
    width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 1.05rem;
    border: 1px solid var(--cizgi); background: #fff; color: var(--ana); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.bf-ekle-satir:hover { border-color: var(--ana); background: var(--ana-acik); }

/* ── Evrak kabuğu: katman + gövde + alt çubuk ────────────────────────────────
   Bu kurallar önce ServisBelgeFormu.razor'un içindeydi; o bileşeni kullanmayan
   ekranlara (Araç Kabul, Araç Teslim) hiç ulaşmıyordu — alt çubukları yapışkan
   olmuyor, zemini/çizgisi çıkmıyordu. Dört evrak ekranı da aynı görünsün diye
   buraya taşındı. ServisBelgeFormu'nda YENİDEN TANIMLAMAYIN. */
.bf-katman { display: flex; flex-direction: column; min-height: calc(100vh - var(--ust) - 32px); gap: 0; }
.bf-govde { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 0; }
.bf-sekme-govde { min-height: 120px; }

.bf-cubuk {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--kart); border-top: 1px solid var(--cizgi);
    position: sticky; bottom: 0; z-index: 5;
}
/* Alt çubuğun sol bilgi alanı. Adı bf-durum DEĞİL — o ad aşağıdaki rozet
   sınıfına ait ve font-weight'i buraya sızıyordu. */
.bf-cubuk-durum { flex: 1; font-size: .8rem; color: var(--soluk); display: flex; gap: 18px; flex-wrap: wrap; }
.bf-cubuk-aksiyon { display: flex; gap: 8px; flex-wrap: wrap; }

/* Satır durumu (yalnız sipariş): onay yeşil, red kırmızı, iptal gri. */
.bf-durum { font-weight: 600; }
.bf-durum.onay  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.bf-durum.red   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.bf-durum.iptal { background: #f1f5f9; color: #64748b; border-color: var(--cizgi); }

/* ── Alt özet panelleri ─────────────────────────────────────────────────────── */
.bf-ozet { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: start; }
.bf-panel-bas {
    font-size: .72rem; font-weight: 800; letter-spacing: .05em; color: var(--soluk);
    padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--cizgi);
}
.bf-gi { margin-bottom: 10px; }
.bf-gi label { display: block; font-size: .78rem; color: var(--soluk); margin-bottom: 4px; }
.bf-gi-alan { display: flex; gap: 6px; }
.bf-gi-not { font-size: .72rem; color: var(--soluk); }

.bf-mini { width: 100%; border-collapse: collapse; font-size: .82rem; }
.bf-mini th {
    text-align: left; font-size: .68rem; font-weight: 800; color: var(--soluk);
    padding-bottom: 6px; letter-spacing: .03em;
}
.bf-mini th.sag, .bf-mini td.sag { text-align: right; }
.bf-mini td { padding: 5px 0; border-top: 1px solid var(--cizgi); font-variant-numeric: tabular-nums; }
.bf-kdv { color: var(--ana); font-weight: 700; }

.bf-genel { background: linear-gradient(180deg, #fff 0%, var(--ana-acik) 320%); }
.bf-tsatir {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 6px 0; font-size: .82rem;
}
.bf-tsatir span { color: var(--soluk); font-weight: 600; letter-spacing: .02em; }
.bf-tsatir strong { font-variant-numeric: tabular-nums; }
.bf-tsatir strong.eksi { color: var(--hata); }
.bf-tsatir.ara { border-top: 1px solid var(--cizgi); padding-top: 9px; }
.bf-tsatir.ara strong { font-weight: 700; }
.bf-tsatir.sonuc {
    border-top: 2px solid var(--ana); margin-top: 6px; padding-top: 10px;
}
.bf-tsatir.sonuc span { color: var(--ana-koyu); font-weight: 800; }
.bf-tsatir.sonuc strong { font-size: 1.25rem; color: var(--ana-koyu); }

.bf-aciklama { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* ── Alt aksiyon çubuğu ─────────────────────────────────────────────────────── */
.bf-alt {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px;
    padding: 10px 14px; box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.bf-alt-sag { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 1100px) {
    .bf-ozet { grid-template-columns: 1fr; }
    .bf-baslik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bf-alan.gen2 { grid-column: span 1; }
}

/* Parasal olmayan belgede (Yükleme, Depo Transfer) alt özet — tutar paneli yerine miktar. */
.bf-miktar-ozet { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bf-miktar-ozet span { color: var(--soluk); font-weight: 600; font-size: .84rem; }
.bf-miktar-ozet strong { font-size: 1.05rem; color: var(--ana-koyu); font-variant-numeric: tabular-nums; }
/* Katman içindeyken .bf kendi dolgusunu yönetsin, evrak-govde zaten padding veriyor. */
.evrak-govde > .bf { padding-bottom: 0; }

/* ── Yükleniyor göstergesi (Yukleniyor.razor) ──────────────────────────────────
   Üç eş-merkezli yay farklı hızlarda döner + ortada nabız atan nokta.
   prefers-reduced-motion'da yalnız soluk nabza düşer (hareket duyarlılığı). */
.yukleniyor {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 56px 20px; min-height: 220px;
}
.yukleniyor.kucuk { padding: 24px 12px; min-height: 0; gap: 10px; }

.yk-halka { position: relative; width: 62px; height: 62px; }
.yukleniyor.kucuk .yk-halka { width: 38px; height: 38px; }

.yk-halka span {
    position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid transparent;
    animation: ykDon 1.4s cubic-bezier(.5,.15,.5,.85) infinite;
}
.yk-halka span:nth-child(1) { border-top-color: var(--ana); }
.yk-halka span:nth-child(2) {
    inset: 9px; border-top-color: var(--ana);opacity: .55;
    animation-duration: 1.9s; animation-direction: reverse;
}
.yk-halka span:nth-child(3) {
    inset: 18px; border-top-color: var(--ana); opacity: .3;
    animation-duration: 2.4s;
}
@keyframes ykDon { to { transform: rotate(360deg); } }

/* Ortadaki nabız — halkalar dönerken merkez "canlı" dursun. */
.yk-halka::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 8px; height: 8px; border-radius: 50%; background: var(--ana);
    animation: ykNabiz 1.4s ease-in-out infinite;
}
.yukleniyor.kucuk .yk-halka::after { width: 5px; height: 5px; }
@keyframes ykNabiz {
    0%, 100% { transform: scale(.7); opacity: .45; }
    50%      { transform: scale(1.15); opacity: 1; }
}

.yk-metin {
    font-size: .88rem; font-weight: 600; color: var(--soluk); letter-spacing: .01em;
    animation: ykSoluk 1.8s ease-in-out infinite;
}
.yukleniyor.kucuk .yk-metin { font-size: .8rem; }
@keyframes ykSoluk { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .yk-halka span { animation: none; border-top-color: var(--ana); opacity: .35; }
    .yk-halka::after, .yk-metin { animation: ykSoluk 2s ease-in-out infinite; }
}

/* ── Belge formu: Taşıyıcı / Asıl Alıcı sekmeleri ─────────────────────────── */
.bf-grup-bas {
    font-size: .72rem; font-weight: 800; letter-spacing: .05em; color: var(--ana-koyu);
    padding-bottom: 5px; border-bottom: 1px solid var(--cizgi); margin-top: 4px;
}
.bf-secim { display: flex; gap: 6px; align-items: stretch; }
.bf-secim .bf-input, .bf-secim .bf-sabit { flex: 1; min-width: 0; }
.bf-sec {
    flex: none; width: 38px; border: 1px solid var(--cizgi); border-radius: 8px;
    background: var(--zemin); cursor: pointer; font-size: .95rem;
}
.bf-sec:hover:not(:disabled) { background: var(--ana-acik); border-color: var(--ana); }
.bf-sec:disabled { opacity: .45; cursor: default; }

.bf-onay { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
.bf-onay input { width: 18px; height: 18px; accent-color: var(--ana); }
.bf-onay span { font-size: .84rem; }

.bf-radyo { display: flex; gap: 18px; padding: 6px 0; }
.bf-radyo label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: .86rem; }
.bf-radyo input { width: 17px; height: 17px; accent-color: var(--ana); }

.bf-sabit.eksik { color: var(--hata); border-color: #fecaca; background: #fef2f2; }

/* Hazırlık deposu seçici — hazırlık türünde birden fazla depo olabilir (şube/bölge başına
   ayrı hazırlık alanı). Başlık çubuğunda ve uyarı kartında aynı görünsün diye tek sınıf. */
.depo-sec {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    background: #fff;
    color: var(--metin);
    font-size: .84rem;
    font-weight: 600;
    max-width: 260px;
}
.depo-sec:disabled { background: #f1f5f9; color: var(--soluk); cursor: not-allowed; }

/* Oluşturma ekranlarındaki Taşıyıcı Bilgileri açılır başlığı */
.tasiyici-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* e-Belge seri gibi zorunlu ama eksik alanlar */
.bf-input.eksik, .bf-sabit.eksik { border-color: var(--tehlike); background: #fef2f2; }