/* Natra WMS — 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 ───────────────────────────────────────────────────────────────── */
.wms-kabuk { display: flex; min-height: 100vh; }

.wms-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 */
.wms-kabuk.dar .wms-yan { width: var(--yan-dar); flex-basis: var(--yan-dar); }
.wms-kabuk.dar .etiket { display: none; }
.wms-kabuk.dar .grup-baslik { height: 12px; padding: 6px 0 0; }
.wms-kabuk.dar .menu,
.wms-kabuk.dar .kullanici { justify-content: center; padding-left: 0; padding-right: 0; }

.wms-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;
}
.wms-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. */
.wms-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. */
.wms-kabuk.dar .wms-marka .logo-img { max-width: 44px; }

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

.wms-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); }
.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;
}

.wms-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;
}
.wms-yan .menu:hover { background: #131c2e; color: #fff; }
.wms-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). */
.wms-yan .menu.ara-sonuc.active { box-shadow: inset 0 0 0 2px var(--ana); }
.wms-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. */
.wms-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. */
.wms-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;
}
.wms-yan .grup-baslik.tiklanir:hover { color: #cbd5e1; }
.wms-yan .grup-baslik .ok { font-size: .7rem; opacity: .7; }

/* Ağaç: gövde girintili ve bağlantı çizgili — hiyerarşi görünsün. */
.wms-yan nav.stil-agac .grup-govde {
    margin-left: 22px;
    border-left: 1px solid #1e293b;
}
.wms-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; }

.wms-alt { border-top: 1px solid #1e293b; padding: 8px 0; }
.wms-alt .kullanici { display: flex; align-items: center; gap: 12px; padding: 8px 16px; white-space: nowrap; }
.wms-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;
}
.wms-alt .kullanici .etiket { display: flex; flex-direction: column; line-height: 1.2; }
.wms-alt .kullanici small { color: #64748b; font-size: .7rem; }

/* ── Ana alan ─────────────────────────────────────────────────────────────── */
.wms-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;
}
.wms-kabuk.dar .wms-ana { margin-left: var(--yan-dar); }

.wms-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); }

.wms-icerik { padding: 16px; flex: 1; min-width: 0; }
.wms-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;
}
.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; }

.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;
}
.filtre-bar select {
    height: 40px; padding: 0 10px;
    border: 1px solid var(--cizgi); border-radius: 8px;
    font-size: .86rem; background: #fff;
}
.filtre-bar .btn-ara, .filtre-bar .btn-temizle {
    height: 40px; padding: 0 16px; border-radius: 8px;
    font-size: .84rem; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.filtre-bar .btn-ara { background: var(--ana); color: #fff; }
.filtre-bar .btn-ara:hover { background: var(--ana-koyu); }
.filtre-bar .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;
}
.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; }
.veri-kart .satirlar { font-size: .8rem; color: #475569; line-height: 1.7; margin-top: 8px; }
.veri-kart .aksiyon { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; }

/* 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; }
.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; }
.veri-tablo tbody tr:hover { background: #f8fafc; cursor: pointer; }
.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. */
    .wms-yan { transform: translateX(-100%); width: var(--yan-genis); flex-basis: var(--yan-genis); }
    .wms-kabuk.drawer-acik .wms-yan { transform: translateX(0); }

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

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

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

    .wms-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/…) ───────────────────────────── */
.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); }