/* Natra Satış — web sürümü görsel dili.
   Flutter uygulamasındaki kart/rozet düzeniyle aynı: kırmızı üst çubuk, beyaz kartlar,
   turkuaz artı / kırmızı eksi bakiye. Telefon önce tasarlandı, geniş ekranda ortalanır. */

:root {
    --ana: #b71c1c;
    --ana-koyu: #8e0000;
    --zemin: #fbeaea;
    --kart: #ffffff;
    --metin: #212121;
    --soluk: #616161;
    --cizgi: #e0e0e0;
    --arti: #00796b;
    --eksi: #d32f2f;
    --alt-yuk: 62px;          /* alt sekme çubuğu payı */
    --kenar: 16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Android ana sayfasındaki açık pembe yıkama. */
    background: linear-gradient(180deg, #f8dcdc 0%, #fbeaea 42%, #fdf5f5 100%);
    background-attachment: fixed;
    color: var(--metin);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

.kabuk { min-height: 100dvh; display: flex; flex-direction: column; }


/* ── Gövde ───────────────────────────────────────────────────────────────── */
.govde {
    flex: 1;
    padding: var(--kenar) var(--kenar) calc(var(--alt-yuk) + var(--kenar));
    /* Telefon için tasarlanmış bir uygulama; masaüstünde içerik serbest
       bırakılırsa kartlar 1920 pikselde dağılıyor ve boş görünüyor.
       Genişlik telefon ölçüsünde tutulup ortalanıyor. */
    max-width: 560px; width: 100%; margin: 0 auto;
}
.sayfa-baslik { font-size: 18px; font-weight: 700; margin: 4px 0 14px; }

/* ── Alt sekmeler (3 sekme, seçilide pembe hap) ──────────────────────────── */
.alt-sekmeler {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: #fff; border-top: 1px solid rgba(0,0,0,.06);
    display: flex; justify-content: space-around;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(0,0,0,.06);
}
.alt-sekmeler .sekme {
    flex: 1; text-decoration: none; color: #9e9e9e;
    display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px;
}
.alt-sekmeler .hap {
    display: grid; place-items: center; width: 56px; height: 32px; border-radius: 16px;
}
.alt-sekmeler .hap .material-icons-round { font-size: 24px; }
.alt-sekmeler .sekme.active { color: var(--ana); font-weight: 700; }
.alt-sekmeler .sekme.active .hap { background: rgba(183,28,28,.12); }

/* ── Kartlar ─────────────────────────────────────────────────────────────── */
.kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.menu-kart {
    background: linear-gradient(135deg, #00838f, #26c6da);
    color: #fff; border-radius: 16px; padding: 18px 14px; text-decoration: none;
    display: flex; flex-direction: column; gap: 8px; font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.menu-kart .material-icons-round { font-size: 30px; }

.bilgi-kutu { background: var(--kart); border-radius: 16px; padding: 6px 14px; margin-top: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.bilgi-kutu .satir { display: flex; justify-content: space-between; padding: 10px 0;
    border-bottom: 1px solid var(--cizgi); font-size: 14px; }
.bilgi-kutu .satir:last-child { border-bottom: 0; }
.bilgi-kutu .satir span { color: var(--soluk); }
.not { color: var(--soluk); font-size: 13px; margin-top: 16px; }

/* ── Süzgeç kartı ────────────────────────────────────────────────────────── */
.suzgec-kart { background: var(--kart); border-radius: 18px; padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06); margin-bottom: 12px; }
.satir-alan { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.satir-alan .ikon { background: rgba(63,81,181,.1); color: #3949ab; border-radius: 12px; padding: 8px; }
.satir-alan .etiket { font-size: 11px; color: var(--soluk); }
.satir-alan .deger { font-size: 15px; font-weight: 700; }

.arama-satir { display: flex; align-items: center; gap: 6px; border: 1px solid var(--cizgi);
    border-radius: 14px; padding: 6px 10px; }
.arama-satir input { flex: 1; border: 0; outline: 0; font-size: 14px; padding: 8px 0;
    background: transparent; min-width: 0; }
.ikon-dugme { border: 0; background: transparent; color: var(--soluk); cursor: pointer;
    display: flex; padding: 4px; }

.ozet-satir { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ozet-satir .material-icons-round { font-size: 16px; color: var(--soluk); }
.ozet-satir .ozet { flex: 1; font-size: 12px; color: var(--soluk); }
.metin-dugme { border: 0; background: transparent; color: var(--ana); font-weight: 600;
    font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.metin-dugme .material-icons-round { font-size: 18px; }

.gelismis { border-top: 1px solid var(--cizgi); margin-top: 10px; padding-top: 12px;
    display: grid; gap: 10px; }
.gelismis label { display: grid; gap: 4px; font-size: 12px; color: var(--soluk); }
.gelismis input, .gelismis select, .giris-kutu input, .giris-kutu select {
    border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px; font-size: 14px;
    background: #fff; color: var(--metin); width: 100%; }
.gelismis .anahtar { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.gelismis .anahtar input { width: auto; }
.gelismis .dugmeler { display: flex; gap: 10px; }
.gelismis .dugmeler button { flex: 1; }

button.birincil, .dugme { background: var(--ana); color: #fff; border: 0; border-radius: 12px;
    padding: 12px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center;
    display: inline-block; }
/* İkincil GERÇEKTEN ikincil görünmeli: kırmızı çerçeveliyken birincil
   sanılıyordu ("Temizle" düğmesi "Kullan"la yarışıyordu). */
button.ikincil { background: #fff; color: #546e7a; border: 1px solid var(--cizgi);
    border-radius: 12px; padding: 12px; font-weight: 600; cursor: pointer;
    font-family: inherit; }
/* Yalnız kendi (beyaz) zeminindeyken açılır. Renkli türevler — ör. ürün
   penceresinin koyu "Kapat" düğmesi — kendi hover rengini veriyor; bu kural
   onları da yakalayınca zemin beyaza dönüp beyaz yazı görünmez oluyordu. */
button.ikincil:hover { background: #f5f7fa; }
.urun-alt .ikincil:hover { background: #455a64; border-color: #455a64; color: #fff; }
button:disabled { opacity: .45; cursor: default; }

/* ── Ürün listesi ────────────────────────────────────────────────────────── */
.liste { display: grid; gap: 8px; }
.urun-kart { background: var(--kart); border-radius: 14px; padding: 12px; display: flex;
    gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.urun-kart .sol { flex: 1; min-width: 0; }
.urun-kart .ad { font-weight: 700; font-size: 14px; }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rozet { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 8px; }
.rozet .material-icons-round { font-size: 12px; }
.rozet.gri { background: rgba(69,90,100,.12); color: #455a64; }
.rozet.mor { background: rgba(94,53,177,.12); color: #5e35b1; }
.rozet.lacivert { background: rgba(57,73,171,.12); color: #3949ab; }
.urun-kart .sag { text-align: right; }
.bakiye { font-size: 16px; font-weight: 800; padding: 6px 10px; border-radius: 10px; }
.bakiye.arti { color: var(--arti); background: rgba(0,121,107,.1); border: 1px solid rgba(0,121,107,.35); }
.bakiye.eksi { color: var(--eksi); background: rgba(211,47,47,.1); border: 1px solid rgba(211,47,47,.35); }
.urun-kart .birim { font-size: 11px; color: var(--soluk); margin-top: 4px; }

.sayfa-cubugu { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.sayfa-cubugu button { flex: 1; }
.sayfa-cubugu .no { font-weight: 800; color: var(--soluk); }

.bos-durum { text-align: center; color: var(--soluk); padding: 40px 20px; display: grid;
    gap: 8px; justify-items: center; }
.bos-durum .material-icons-round { font-size: 52px; opacity: .45; }
.bos-durum b { color: var(--metin); font-size: 16px; }
.bos-durum.hata .material-icons-round { color: var(--eksi); opacity: .6; }

/* ── Giriş ekranı ────────────────────────────────────────────────────────────
   Düzen NOSCloud'un giriş ekranıyla aynı: yumuşak degrade zemin, beyaz kart,
   etiketli kutular ve "Uygulamayı Kur" kartın İÇİNDE, Giriş'in hemen altında. */
.giris-sayfa {
    min-height: 100dvh; display: grid; place-items: center; padding: 20px;
    background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 45%, #f0abfc 100%);
}
.giris-kutu {
    width: 100%; max-width: 380px; background: #fff; border-radius: 18px;
    padding: 28px; box-shadow: 0 20px 45px rgba(0,0,0,.22);
}
.giris-kutu .logo {
    width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center;
    background: var(--ana); color: #fff; border-radius: 16px;
}
.giris-kutu .logo .material-icons-round { font-size: 30px; }
.giris-kutu h1 { text-align: center; font-size: 19px; margin: 0 0 20px; }

.giris-kutu label { display: block; font-size: 13px; font-weight: 700;
    color: var(--metin); margin-bottom: 14px; }
.giris-kutu label > span { display: block; margin-bottom: 5px; }
.giris-kutu input, .giris-kutu select {
    width: 100%; height: 46px; padding: 0 12px; font-size: 15px;
    border: 1px solid var(--cizgi); border-radius: 10px;
    background: #f4f5fb; color: var(--metin);
}
.giris-kutu input:focus, .giris-kutu select:focus {
    outline: 2px solid var(--ana); border-color: var(--ana); background: #fff;
}
.giris-kutu .hatirla { display: flex; align-items: center; gap: 8px; font-weight: 500;
    font-size: 14px; margin: -2px 0 16px; cursor: pointer; user-select: none; }
.giris-kutu .hatirla input { width: 18px; height: 18px; height: 18px; margin: 0;
    accent-color: var(--ana); }

.giris-dugme {
    width: 100%; height: 48px; background: var(--ana); color: #fff; border: 0;
    border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.giris-dugme:disabled { opacity: .45; cursor: default; }

/* Kurulum düğmesi: birincil düğmeyle yarışmasın diye soluk zemin + kesik çerçeve. */
.kur-dugme {
    width: 100%; height: 46px; margin-top: 12px;
    display: none; align-items: center; justify-content: center; gap: 8px;
    background: #f4f5fb; border: 1px dashed var(--ana); color: var(--ana-koyu);
    border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.kur-dugme .material-icons-round { font-size: 20px; }

.uyari { background: rgba(211,47,47,.1); border: 1px solid rgba(211,47,47,.4); color: #b71c1c;
    border-radius: 10px; padding: 10px; font-size: 13px; margin-bottom: 14px; }

/* ── Yeniden bağlanma kutusu ─────────────────────────────────────────────── */
.yeniden-baglan { display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.55); align-items: center; justify-content: center; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
.yeniden-baglan .kutu { background: #fff; border-radius: 16px; padding: 22px 26px; display: grid;
    gap: 12px; justify-items: center; font-size: 14px; }
.yeniden-baglan .spin { width: 28px; height: 28px; border: 3px solid var(--cizgi);
    border-top-color: var(--ana); border-radius: 50%; animation: don 1s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

/* ── Sekmeler (durum / dönem süzgeçleri) ─────────────────────────────────── */
.sekmeler { display: flex; gap: 6px; flex-wrap: wrap; }
.sekme-dugme { flex: 1; min-width: 86px; border: 1px solid var(--cizgi); background: #fff;
    color: var(--soluk); border-radius: 10px; padding: 8px 6px; font-size: 13px;
    font-weight: 600; cursor: pointer; }
.sekme-dugme.secili { background: var(--ana); border-color: var(--ana); color: #fff; }
.ustbosluk { margin-top: 14px; }

/* ── Menü kartı renkleri ─────────────────────────────────────────────────── */
.menu-kart.turkuaz { background: linear-gradient(135deg, #00838f, #26c6da); }
.menu-kart.mor     { background: linear-gradient(135deg, #6a1b9a, #ab47bc); }
.menu-kart.yesil   { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
.menu-kart.lacivert{ background: linear-gradient(135deg, #283593, #5c6bc0); }
.menu-kart.turuncu { background: linear-gradient(135deg, #ef6c00, #ffa726); }

/* ── Dashboard özet kartları ─────────────────────────────────────────────── */
.ozet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px; margin-top: 12px; }
.ozet-kart { background: var(--kart); border-radius: 14px; padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.ozet-kart .ozet-ad { font-size: 12px; color: var(--soluk); }
.ozet-kart .ozet-tutar { font-size: 17px; font-weight: 800; margin: 4px 0 2px; }
.ozet-kart .ozet-adet { font-size: 11px; color: var(--soluk); }

/* ── Ortak özet kutusu ───────────────────────────────────────────────────── */
.ozet-kutu { background: var(--kart); border-radius: 14px; padding: 12px; display: flex;
    gap: 14px; flex-wrap: wrap; margin: 12px 0; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.ozet-kutu > div { flex: 1; min-width: 100px; display: grid; gap: 2px; }
.ozet-kutu span { font-size: 11px; color: var(--soluk); }
.ozet-kutu b { font-size: 16px; font-weight: 800; }
.ozet-kutu b.borc { color: var(--eksi); }
.ozet-kutu b.alacak { color: var(--arti); }

/* ── Stok listesi ek ─────────────────────────────────────────────────────── */
.urun-kart.pasif { background: #fff1f3; }         /* Kullanım dışı: hafif pembe */
.urun-kart.tiklanir { cursor: pointer; }
.urun-kart .fiyat { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--metin); }
.urun-kart .fiyat .kdv { font-weight: 500; font-size: 11px; color: var(--soluk); margin-left: 6px; }
.rozet.pembe { background: rgba(211,47,47,.12); color: #c62828; }

/* ── Cari ekstre ─────────────────────────────────────────────────────────── */
.tarih-satir { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.tarih-satir label { display: grid; gap: 4px; font-size: 11px; color: var(--soluk); flex: 1;
    min-width: 120px; }
.tarih-satir input { border: 1px solid var(--cizgi); border-radius: 10px; padding: 9px;
    font-size: 14px; width: 100%; }
.anahtar-satir { display: flex; align-items: center; gap: 8px; margin-top: 10px;
    font-size: 13px; color: var(--soluk); }
.grup-notu { background: rgba(57,73,171,.08); color: #3949ab; border-radius: 12px;
    padding: 10px 12px; font-size: 12px; display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; }
.grup-notu .material-icons-round { font-size: 18px; }

.ekstre-kart { background: var(--kart); border-radius: 14px; padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05); display: grid; gap: 6px; }
.ekstre-kart .ust-satir { display: flex; justify-content: space-between; font-size: 14px; }
.ekstre-kart .tarih { color: var(--soluk); font-size: 12px; }
.ekstre-kart .orta-satir { display: flex; gap: 6px; flex-wrap: wrap; }
.ekstre-kart .alt-satir { display: flex; justify-content: space-between; font-size: 12px;
    color: var(--soluk); flex-wrap: wrap; gap: 8px; }
.ekstre-kart .alt-satir b { color: var(--metin); }
.ekstre-kart .yuruyen b { color: var(--ana); }

/* ── Raporlar / Evraklarım ───────────────────────────────────────────────── */
.bolum { background: var(--kart); border-radius: 14px; margin-bottom: 10px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.bolum-baslik { display: flex; align-items: center; gap: 8px; padding: 12px; cursor: pointer; }
.bolum-baslik .bolum-ozet { margin-left: auto; font-size: 12px; color: var(--soluk); }
.bolum-bos { padding: 14px; color: var(--soluk); font-size: 13px; text-align: center; }

.rapor-satir { display: flex; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--cizgi); }
.rapor-satir .sol { flex: 1; min-width: 0; }
.rapor-satir .ad { font-size: 13px; font-weight: 600; }
.rapor-satir .sag { text-align: right; }
.rapor-satir .miktar { font-size: 13px; font-weight: 700; }
.rapor-satir .tutar { font-size: 12px; color: var(--soluk); }

.evrak-kart { background: var(--kart); border-radius: 14px; margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05); overflow: hidden; }
.evrak-kart .ust-satir { display: flex; gap: 10px; align-items: center; padding: 12px;
    cursor: pointer; }
.evrak-kart .sol { flex: 1; min-width: 0; }
.evrak-kart .ad { font-weight: 700; font-size: 14px; }
.evrak-kart .sag { text-align: right; }
.evrak-kart .tutar { font-weight: 800; font-size: 15px; }
.evrak-kart .tarih { font-size: 11px; color: var(--soluk); }

.alt-baslik { font-size: 15px; font-weight: 700; margin: 18px 0 8px; }
.ozet-kart .ozet-tutar.borc { color: var(--eksi); }
.ozet-kart .ozet-tutar.alacak { color: var(--arti); }

/* ── Form ────────────────────────────────────────────────────────────────── */
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin-top: 12px; }
.form-izgara label { display: grid; gap: 4px; font-size: 12px; color: var(--soluk); }
.form-izgara label.genis { grid-column: 1 / -1; }
.form-izgara input, .form-izgara select { border: 1px solid var(--cizgi); border-radius: 10px;
    padding: 10px; font-size: 15px; width: 100%; background: #fff; color: var(--metin); }
.dugme-satir { display: flex; gap: 10px; margin-top: 14px; }
.dugme-satir button, .dugme-satir .dugme { flex: 1; }
.uyari.turuncu { background: rgba(239,108,0,.1); border-color: rgba(239,108,0,.4); color: #e65100; }


/* ════════════════════════════════════════════════════════════════════════════
   ANA SAYFA — Android NatraMobilSales düzeni
   ════════════════════════════════════════════════════════════════════════════ */

/* Karşılama kartı */
.karsilama {
    background: linear-gradient(135deg, #c62828 0%, #a31515 100%);
    color: #fff; border-radius: 22px; padding: 18px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: 0 8px 20px rgba(183,28,28,.28);
}
.karsilama .logo-kutu {
    width: 62px; height: 62px; border-radius: 18px; flex: none;
    background: rgba(255,255,255,.22); display: grid; place-items: center;
}
.karsilama .logo-kutu .material-icons-round { font-size: 32px; }
.karsilama .kim { flex: 1; min-width: 0; }
.karsilama .selam { font-size: 14px; opacity: .92; }
.karsilama .ad { font-size: 24px; font-weight: 800; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karsilama .yer { display: flex; align-items: center; gap: 4px; font-size: 13px;
    opacity: .9; margin-top: 2px; }
.karsilama .yer .material-icons-round { font-size: 16px; }
.karsilama .yuvarlak {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background: rgba(255,255,255,.2); color: #fff;
    display: grid; place-items: center; text-decoration: none;
}
.karsilama .cikis { background: #e53935; }

/* Günlük satış / tahsilat şeridi */
.serit {
    background: #fff; border-radius: 18px; margin-top: 14px; padding: 14px;
    display: flex; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.serit .yari { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.serit .ayrac { width: 1px; align-self: stretch; background: var(--cizgi); margin: 0 10px; }
.serit .ikon { width: 44px; height: 44px; border-radius: 14px; flex: none;
    display: grid; place-items: center; }
.serit .ikon.yesil { background: rgba(46,125,50,.12); color: #2e7d32; }
.serit .ikon.mavi  { background: rgba(21,101,192,.12); color: #1565c0; }
.serit .etiket { font-size: 13px; color: var(--soluk); }
.serit .deger { font-size: 17px; font-weight: 800; }

/* Bölüm başlığı — solunda kırmızı çubuk */
.bolum-basligi {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; font-weight: 800; margin: 22px 0 14px;
}
.bolum-basligi::before {
    content: ""; width: 5px; height: 24px; border-radius: 3px; background: var(--ana);
}

/* Hızlı İşlemler ızgarası */
.islem-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.islem-kart {
    position: relative; overflow: hidden; border-radius: 20px; padding: 16px;
    min-height: 142px; color: #fff; text-decoration: none;
    display: flex; flex-direction: column; justify-content: space-between;
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.islem-kart .daire {
    position: absolute; top: -26px; right: -26px; width: 104px; height: 104px;
    border-radius: 50%; background: rgba(255,255,255,.14);
}
.islem-kart .ikon-kutu {
    width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.24);
    display: grid; place-items: center; position: relative;
}
.islem-kart .ikon-kutu .material-icons-round { font-size: 28px; }
.islem-kart .alt { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; position: relative; }
.islem-kart .ad { font-size: 17px; font-weight: 800; line-height: 1.2; }
.islem-kart .ok { font-size: 22px; }
.islem-kart.yakinda { opacity: .5; cursor: default; }
.islem-kart .rozet-yakinda {
    position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,.28);
    border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 700;
}

.islem-kart.yesil    { background: linear-gradient(135deg, #43a047, #66bb6a); }
.islem-kart.mavi     { background: linear-gradient(135deg, #1e88e5, #42a5f5); }
.islem-kart.turuncu  { background: linear-gradient(135deg, #fb8c00, #ffa726); }
.islem-kart.mor      { background: linear-gradient(135deg, #8e24aa, #ab47bc); }
.islem-kart.deniz    { background: linear-gradient(135deg, #00897b, #26a69a); }
.islem-kart.kahve    { background: linear-gradient(135deg, #6d4c41, #8d6e63); }
.islem-kart.lacivert { background: linear-gradient(135deg, #3949ab, #5c6bc0); }
.islem-kart.turkuaz  { background: linear-gradient(135deg, #00acc1, #26c6da); }
.islem-kart.pembe    { background: linear-gradient(135deg, #d81b60, #ec407a); }
.islem-kart.gri      { background: linear-gradient(135deg, #546e7a, #78909c); }
.islem-kart.kirmizi  { background: linear-gradient(135deg, #c62828, #e53935); }

/* Satışlar (Bugün) özeti */
.satis-ozet {
    display: block; background: #fff; border-radius: 20px; padding: 16px; margin-top: 18px;
    text-decoration: none; color: var(--metin); box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.satis-ozet .ust { display: flex; align-items: center; gap: 8px; font-size: 17px;
    margin-bottom: 10px; }
.satis-ozet .ust > .material-icons-round:first-child { color: var(--ana); }
.satis-ozet .ust .ok { margin-left: auto; color: var(--soluk); }
.satis-ozet .satir { display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
    border-top: 1px solid var(--cizgi); font-size: 15px; }
.satis-ozet .satir:first-of-type { border-top: 0; }
.satis-ozet .satir .ad { flex: 1; }
.satis-ozet .satir .kalem { color: var(--soluk); font-size: 13px; }
.satis-ozet .satir .tutar { font-weight: 700; }
.satis-ozet .toplam { border-top: 2px solid var(--cizgi); font-weight: 800; }
.satis-ozet .toplam .tutar, .satis-ozet .toplam .ad { color: var(--ana); }

/* Dashboard sayaç kartları */
.donem-sekmeleri { display: flex; gap: 10px; margin-bottom: 14px; }
.donem-dugme {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    background: #fff; border: 1px solid var(--cizgi); color: var(--soluk);
    border-radius: 24px; padding: 10px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.donem-dugme.secili { border-color: var(--ana); color: var(--ana);
    box-shadow: inset 0 0 0 1px var(--ana); }
.donem-dugme .material-icons-round { font-size: 18px; }

.sayac-kart {
    background: #fff; border-radius: 18px; padding: 14px; display: flex;
    align-items: center; gap: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.05);
}
.sayac-kart .ikon { width: 46px; height: 46px; border-radius: 14px; flex: none;
    display: grid; place-items: center; }
.sayac-kart .sol { flex: 1; min-width: 0; }
.sayac-kart .ad { font-size: 14px; color: var(--soluk); }
.sayac-kart .adet { font-size: 20px; font-weight: 800; }
.sayac-kart .tutar { font-size: 17px; font-weight: 800; text-align: right; }
.sayac-kart .mavi     { background: rgba(21,101,192,.12);  color: #1565c0; }
.sayac-kart .yesil    { background: rgba(46,125,50,.12);   color: #2e7d32; }
.sayac-kart .turuncu  { background: rgba(239,108,0,.12);   color: #ef6c00; }
.sayac-kart .sari     { background: rgba(245,124,0,.12);   color: #f57c00; }
.sayac-kart .mor      { background: rgba(142,36,170,.12);  color: #8e24aa; }
.sayac-kart .tutar.mavi, .sayac-kart .tutar.yesil, .sayac-kart .tutar.turuncu,
.sayac-kart .tutar.sari, .sayac-kart .tutar.mor { background: transparent; }
/* Kart tıklanınca o türün evrak listesi açılıyor (Android'deki gibi). */
.sayac-kart.tiklanir { cursor: pointer; }
.sayac-kart.tiklanir:active { transform: scale(.995); }
.sayac-kart .ok { color: var(--soluk); font-size: 20px; margin-left: -4px; }

/* Dashboard evrak listesi — renkli toplam şeridi (Android'deki gradyan kart). */
.toplam-serit { display: flex; align-items: center; gap: 12px; padding: 14px;
    border-radius: 16px; margin: 10px 0; color: #fff; }
.toplam-serit .material-icons-round { font-size: 22px; }
.toplam-serit .etiket { font-size: 12px; opacity: .85; }
.toplam-serit .deger { font-size: 19px; font-weight: 800; }
.toplam-serit.mavi    { background: linear-gradient(135deg, #1565c0, #42a5f5); }
.toplam-serit.yesil   { background: linear-gradient(135deg, #2e7d32, #66bb6a); }
.toplam-serit.turuncu { background: linear-gradient(135deg, #ef6c00, #ffa726); }
.toplam-serit.sari    { background: linear-gradient(135deg, #f57c00, #ffb74d); }
.toplam-serit.mor     { background: linear-gradient(135deg, #8e24aa, #ba68c8); }

/* Evrak kartı: Dashboard listesindeki renkli simge ve sağdaki ok. */
.evrak-kart .ust-satir .ikon { width: 40px; height: 40px; border-radius: 12px; flex: none;
    display: grid; place-items: center; }
.evrak-kart .ust-satir .ikon.mavi    { background: rgba(21,101,192,.12);  color: #1565c0; }
.evrak-kart .ust-satir .ikon.yesil   { background: rgba(46,125,50,.12);   color: #2e7d32; }
.evrak-kart .ust-satir .ikon.turuncu { background: rgba(239,108,0,.12);   color: #ef6c00; }
.evrak-kart .ust-satir .ikon.sari    { background: rgba(245,124,0,.12);   color: #f57c00; }
.evrak-kart .ust-satir .ikon.mor     { background: rgba(142,36,170,.12);  color: #8e24aa; }
.evrak-kart .ust-satir.donuk { cursor: default; }
.evrak-kart .ust-satir .ok { color: var(--soluk); font-size: 20px; }
.evrak-kart .tutar.mavi    { color: #1565c0; }
.evrak-kart .tutar.yesil   { color: #2e7d32; }
.evrak-kart .tutar.turuncu { color: #ef6c00; }
.evrak-kart .tutar.sari    { color: #f57c00; }
.evrak-kart .tutar.mor     { color: #8e24aa; }

/* Satış Yap — ürün satırında miktar + ekle */
.ekle-kutu { display: flex; align-items: center; gap: 6px; }
.miktar-kutu { width: 64px; border: 1px solid var(--cizgi); border-radius: 10px;
    padding: 8px; font-size: 14px; text-align: center; }
button.kucuk { padding: 8px 12px; font-size: 13px; border-radius: 10px; }

/* Satış kısıtı diyaloğunda "işaret hangi kartta" listesi. */
.kisit-kartlar { margin: 6px 0 0; padding-left: 20px; font-size: 13px;
    color: var(--metin); line-height: 1.6; }

.not.uyari-not { background: rgba(239,108,0,.08); border: 1px solid rgba(239,108,0,.3);
    border-radius: 12px; padding: 10px 12px; color: #e65100; }

/* Satış Yap — fatura sekmesindeki e-belge kararı */
.karar-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 10px; }
.rozet.rozet-bilgi { background: rgba(69,90,100,.12); color: #455a64; }
.rozet.rozet-uyari { background: rgba(239,108,0,.14); color: #e65100; }
.karar-not { font-size: 12px; color: #c62828; }

/* Barkod okuma katmanı */
.barkod-katman { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.82);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.barkod-kutu { position: relative; width: 100%; max-width: 520px; border-radius: 16px;
    overflow: hidden; background: #000; }
.barkod-kutu video { display: block; width: 100%; max-height: 70vh; object-fit: cover; }
/* Hedef çerçevesi: kullanıcı barkodu nereye tutacağını bilsin. */
.barkod-hedef { position: absolute; left: 10%; right: 10%; top: 50%; height: 26%;
    transform: translateY(-50%); border: 2px solid rgba(255,255,255,.9);
    border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
.barkod-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; background: rgba(0,0,0,.75); color: #fff; font-size: 13px; }
.ikon-dugme.secili { background: rgba(211,47,47,.15); color: #c62828; }

/* ── Satış Yap: müşteri kartı ───────────────────────────────────────────── */
.musteri-kart { background: var(--kart); border-radius: 18px; padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom: 16px; }
.mk-ust { display: flex; align-items: center; gap: 12px; }
.mk-avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(211,47,47,.1); color: #c62828; font-size: 26px; }
.mk-ad { flex: 1; min-width: 0; }
.mk-ad .ad { font-weight: 700; font-size: 16px; line-height: 1.25; }
.mk-ad .kod { color: var(--soluk); font-size: 13px; margin-top: 2px; }

.mk-bakiye { display: flex; align-items: center; gap: 12px; margin-top: 14px;
    padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; }
.mk-bakiye .etiket { font-size: 13px; font-weight: 600; }
.mk-bakiye .tutar { font-size: 22px; font-weight: 700; margin-top: 2px; }
/* Müşterinin bize borcu: dikkat çeksin ama "hata" gibi durmasın. */
.mk-bakiye.borc { background: rgba(239,108,0,.08); border-color: rgba(239,108,0,.3); color: #e65100; }
.mk-bakiye.alacak { background: rgba(46,125,50,.08); border-color: rgba(46,125,50,.3); color: #2e7d32; }

.mk-tel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tel-rozet { display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    background: rgba(46,125,50,.08); color: #2e7d32; font-size: 13px; font-weight: 600;
    padding: 8px 12px; border-radius: 10px; }
.tel-rozet .material-icons-round { font-size: 16px; }

.mk-dugmeler { display: flex; gap: 10px; margin-top: 14px; }
.mk-dugmeler button { flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; }
.mk-dugmeler .material-icons-round { font-size: 18px; }

.mk-not { margin-top: 10px; font-size: 13px; color: #2e7d32; }
.mk-not.kotu { color: #c62828; }

.mk-harita-sec { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Satış Yap: eylem ızgarası (Android'deki kutucuklar) ─────────────────── */
.eylem-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 520px) { .eylem-izgara { grid-template-columns: repeat(3, 1fr); } }

.eylem-kart { position: relative; border: none; cursor: pointer; border-radius: 16px;
    padding: 14px 8px 12px; display: grid; justify-items: center; gap: 8px;
    color: #fff; font-family: inherit;
    background: linear-gradient(145deg, var(--kart) 0%, color-mix(in srgb, var(--kart) 78%, #000) 100%);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--kart) 35%, transparent); }
.eylem-kart:active { transform: scale(.97); }
/* İkon kutusu: Android'deki yarı saydam kare. */
.eylem-ikon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(255,255,255,.22); font-size: 26px; }
.eylem-ad { font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.eylem-kart.yakinda { opacity: .45; }
.eylem-yakinda { position: absolute; top: 6px; right: 8px; font-size: 9px; font-weight: 700;
    letter-spacing: .3px; text-transform: uppercase; background: rgba(0,0,0,.35);
    padding: 2px 6px; border-radius: 6px; }

/* Termal yazdırma */
.yazdir-kutu { margin-top: 12px; }
.yazdir-kutu button { display: inline-flex; align-items: center; gap: 6px; }
.yazdir-kutu .material-icons-round { font-size: 18px; }
.yazdir-not { margin-top: 8px; font-size: 13px; color: #2e7d32; }
.yazdir-not.kotu { color: #c62828; }

/* ── Form ekranları (müşteri kartı) ─────────────────────────────────────── */
.form-kart .alan { margin-bottom: 14px; }
.form-kart label { display: block; font-size: 12.5px; font-weight: 600;
    color: var(--soluk); margin-bottom: 5px; }
.form-kart input, .form-kart select, .form-kart textarea {
    width: 100%; border: 1px solid var(--cizgi); border-radius: 10px;
    padding: 10px 12px; font-size: 14px; font-family: inherit; background: var(--kart);
    color: var(--metin); }
.form-kart input:disabled, .form-kart select:disabled, .form-kart textarea:disabled {
    background: rgba(0,0,0,.04); color: var(--soluk); }
.form-kart .alan-satir { display: flex; align-items: center; gap: 8px; }
.form-kart .alan-satir .kilit { color: var(--soluk); font-size: 18px; }
.form-kart .alan-not { font-size: 12px; color: var(--soluk); margin-top: 5px; }
.alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Izgara hücresi varsayılan min-width:auto ile içeriğinin altına inemez;
   uzun depo adlarında sağdaki alan panelin dışına taşıyordu. */
.alan-ikili > * { min-width: 0; }
@media (max-width: 440px) { .alan-ikili { grid-template-columns: 1fr; } }
.form-kart label.onay { display: flex; align-items: center; gap: 8px; font-size: 14px;
    font-weight: 500; color: var(--metin); margin: 6px 0 14px; }
.form-kart label.onay input { width: auto; }

/* Kaydet onay penceresi */
.onay-kutu { background: var(--kart); border-radius: 18px; padding: 20px;
    width: 100%; max-width: 420px; }
.onay-kutu h2 { font-size: 17px; margin: 0 0 14px; }
.onay-satirlar div { display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--cizgi); font-size: 14px; }
.onay-satirlar div:last-child { border-bottom: none; }
.onay-satirlar span { color: var(--soluk); }
.onay-satirlar b { text-align: right; }

/* ── Rota ────────────────────────────────────────────────────────────────── */
.rota-ozet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.rota-ozet > div { text-align: center; padding: 10px 6px; border-radius: 12px; }
.rota-ozet b { display: block; font-size: 20px; font-weight: 700; }
.rota-ozet span { font-size: 11.5px; }
.rota-ozet .ugranmadi { background: rgba(69,90,100,.1); color: #455a64; }
.rota-ozet .siparis { background: rgba(46,125,50,.1); color: #2e7d32; }
.rota-ozet .almadi { background: rgba(211,47,47,.1); color: #c62828; }

.rota-satir { gap: 10px; }
/* Sıra numarası: plasiyer listeyi yukarıdan aşağı takip ediyor. */
.rota-sira { flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid;
    place-items: center; background: rgba(0,0,0,.05); color: var(--soluk);
    font-size: 13px; font-weight: 700; }
.rota-satir.tamam .rota-sira { background: rgba(46,125,50,.15); color: #2e7d32; }
.rota-satir.almadi .rota-sira { background: rgba(211,47,47,.12); color: #c62828; }
.rota-dugmeler { display: flex; align-items: center; gap: 4px; }

/* OCR — raf etiketi okuma */
.ocr-dugmeler { display: flex; gap: 8px; }
.ocr-adaylar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 10px; padding: 10px 12px; border-radius: 12px;
    background: rgba(94,53,177,.07); border: 1px solid rgba(94,53,177,.25); }
.ocr-adaylar .baslik { font-size: 12.5px; font-weight: 600; color: #5e35b1; }
.ocr-adaylar .aday { display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--cizgi); background: var(--kart); color: var(--metin);
    border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600;
    font-family: inherit; cursor: pointer; }
/* Tanımlı rafla eşleşen aday: yazımı tanımdan geliyor, güvenilir. */
.ocr-adaylar .aday.bilinen { border-color: rgba(46,125,50,.5); color: #2e7d32; }
.ocr-adaylar .aday .material-icons-round { font-size: 15px; }

/* Vergi levhası okuma satırı */
.levha-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--cizgi); }
.levha-satir button { display: inline-flex; align-items: center; gap: 6px; }
.levha-satir .material-icons-round { font-size: 18px; }

/* ══ Satış Evrak ekranı (Android düzeni) ════════════════════════════════ */

/* Kırmızı üst çubuk: seri + e-belge rozeti, Not, barkod */
.evrak-cubugu { display: flex; align-items: center; gap: 10px; margin: -4px -2px 14px;
    padding: 10px 12px; border-radius: 16px; background: linear-gradient(135deg,#d32f2f,#b71c1c);
    color: #fff; box-shadow: 0 3px 12px rgba(183,28,28,.3); }
/* Kırmızı zeminde simgeler BEYAZ olmalı; primary renk verilirse kaybolur. */
.evrak-cubugu .ikon-dugme, .evrak-cubugu .ikon-dugme .material-icons-round { color: #fff; }
.evrak-cubugu .ikon-dugme.secili { background: rgba(255,255,255,.2); color: #fff; }
.evrak-seri { flex: 1; text-align: center; line-height: 1.2; }
.evrak-seri .seri { font-size: 15px; font-weight: 600; }
.seri-rozet { display: inline-block; margin-top: 3px; padding: 2px 10px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.55); font-size: 10.5px; font-weight: 700;
    letter-spacing: .4px; }
.not-dugme { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
    background: rgba(255,255,255,.18); color: #fff; font-family: inherit; font-size: 13px;
    font-weight: 600; padding: 8px 14px; border-radius: 999px; }
.not-dugme.dolu { background: #fff; color: #b71c1c; }
.not-dugme .material-icons-round { font-size: 17px; }

.deger.soluk { color: var(--soluk); font-weight: 400; }
.bos-durum.evrak-bos { padding: 56px 20px; }
.bos-durum.evrak-bos .material-icons-round { font-size: 76px; }

/* Evrak satırı: görsel solda, ad tam genişlik, rozetler, fiyat satırı,
   altta sağa yaslı adet kutusu (orta sütun daralmasın diye alt sırada). */
.evrak-liste { margin-bottom: 12px; }
.evrak-satir { display: flex; gap: 12px; background: var(--kart); border-radius: 16px;
    padding: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.05); margin-bottom: 10px; }
.evrak-satir .gorsel { flex: 0 0 56px; height: 56px; border-radius: 12px; display: grid;
    place-items: center; background: rgba(0,0,0,.04); color: var(--soluk); font-size: 28px; }
.evrak-satir .govde { flex: 1; min-width: 0; }
.evrak-satir .ad { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.evrak-satir .rozetler { margin-top: 5px; }
.rozet.mavi { background: rgba(25,118,210,.12); color: #1565c0; }
.rozet.turuncu { background: rgba(239,108,0,.14); color: #e65100; }
.fiyat-satiri { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px;
    font-size: 13px; }
.fiyat-satiri .fiyat { color: #1565c0; }
.fiyat-satiri .toplam { color: #e65100; font-weight: 600; }
.adet-satiri { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    margin-top: 8px; }
.adet-kutu { display: inline-flex; align-items: center; border: 1px solid var(--cizgi);
    border-radius: 999px; overflow: hidden; }
.adet-kutu button { border: none; background: none; cursor: pointer; font-size: 18px;
    font-weight: 700; color: #1565c0; width: 38px; height: 34px; font-family: inherit; }
.adet-kutu span { min-width: 42px; text-align: center; font-weight: 700; font-size: 15px;
    cursor: pointer; }

/* Alt sabit kart: toplamlar + düğmeler */
/* Evrak ekranı Android'de tam boy: üstte kırmızı çubuk, ortada kalemler,
   altta TOPLAM + düğmeler ekranın dibinde sabit. Webde iki parçalı kural:
   - min-height + flex:1 → kalem azken çubuk yine ekranın dibinde durur
     (yoksa içeriğin bittiği yerde, sayfanın ortasında asılı kalıyordu);
   - position:sticky → kalem çoğalınca kaydırırken dipte kalır.
   Alt sekme çubuğu üstüne binmesin diye --alt-yuk kadar yukarıda. */
.evrak-ekran { display: flex; flex-direction: column;
    min-height: calc(100dvh - var(--alt-yuk) - var(--kenar) * 2); }
.evrak-icerik { flex: 1; }
.evrak-alt { background: var(--kart); border-radius: 18px; padding: 14px;
    box-shadow: 0 -2px 14px rgba(0,0,0,.14); position: sticky; z-index: 15;
    bottom: calc(var(--alt-yuk) - var(--kenar) + 8px); margin-top: 12px; }
.toplam-kutu { border: 1px solid var(--cizgi); border-radius: 14px; padding: 4px 12px;
    margin-bottom: 12px; }
.toplam-baslik { display: flex; align-items: center; gap: 8px; width: 100%; border: none;
    background: none; cursor: pointer; font-family: inherit; padding: 12px 0;
    font-size: 15px; color: var(--metin); }
.toplam-baslik b { margin-left: auto; font-size: 18px; }
.toplam-detay { border-top: 1px solid var(--cizgi); padding: 6px 0; }
.toplam-detay div { display: flex; justify-content: space-between; padding: 6px 0;
    font-size: 14px; }
.toplam-detay span { color: var(--soluk); }
/* Temsilci alanının üst etiketi kutudan taştığı için KDV satırına biniyordu. */
.toplam-temsilci { padding: 14px 0 2px; }
.toplam-temsilci .form-alani { margin-bottom: 0; }

.evrak-dugmeler { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }
.evrak-dugmeler button { display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; }
.evrak-dugmeler .material-icons-round { font-size: 17px; }

/* ── Ürün Ekle penceresi ─────────────────────────────────────────────── */
.urun-pencere { background: var(--kart); border-radius: 18px; width: 100%; max-width: 560px;
    max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.urun-pencere .arama-satir { margin: 12px; }
.urun-liste { flex: 1; overflow-y: auto; padding: 0 12px; }
.urun-sec { display: flex; gap: 10px; align-items: center; cursor: pointer;
    border: 1px solid var(--cizgi); border-radius: 14px; padding: 10px; margin-bottom: 10px; }
/* Eklenmiş ürün: rozet yetmiyor, KART boyanıyor (kullanıcı kuralı). */
.urun-sec.ekli { background: #e3f2fd; border-color: #1976d2; border-width: 1.4px; }
.urun-sec .gorsel { flex: 0 0 48px; height: 48px; border-radius: 10px; display: grid;
    place-items: center; background: rgba(0,0,0,.04); color: var(--soluk); font-size: 24px; }
/* ⚠️ `.govde` aynı zamanda sayfa gövdesinin sınıfı: oradaki padding
   (altta --alt-yuk kadar) ve max-width buraya da geliyordu, satırlar
   gereksiz uzun oluyordu. Satır içindekiler sıfırlanır. */
.urun-sec .govde, .evrak-satir .govde { flex: 1; min-width: 0;
    padding: 0; margin: 0; max-width: none; width: auto; }
.urun-sec .ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.urun-sec .ust b { font-size: 15px; }
.urun-sec .marka { background: rgba(142,36,170,.12); color: #8e24aa; font-size: 11px;
    font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.urun-sec .aciklama { color: var(--soluk); font-size: 13.5px; margin-top: 3px; }
.ekli-rozet { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
    background: #1976d2; color: #fff; font-size: 11.5px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px; }
.ekli-rozet .material-icons-round { font-size: 14px; }
.urun-sec .fiyat-kutu { text-align: right; background: rgba(46,125,50,.08);
    border: 1px solid rgba(46,125,50,.3); border-radius: 10px; padding: 8px 10px; }
.urun-sec .fiyat-kutu b { display: block; color: #2e7d32; font-size: 15px; }
.urun-sec .fiyat-kutu span { color: var(--soluk); font-size: 11px; }
.urun-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px; border-top: 1px solid var(--cizgi); font-size: 14px; color: var(--soluk); }
.urun-alt > span { display: inline-flex; align-items: center; gap: 6px; }
.urun-alt .ikincil { background: #546e7a; color: #fff; border-color: #546e7a; }

/* ── Miktar sor ekranı ───────────────────────────────────────────────── */
.miktar-pencere { background: var(--kart); border-radius: 18px; width: 100%; max-width: 480px;
    max-height: 90vh; overflow-y: auto; }
.miktar-baslik { background: linear-gradient(135deg,#d32f2f,#b71c1c); color: #fff;
    padding: 16px; border-radius: 18px 18px 0 0; }
.miktar-baslik .ad { font-size: 18px; font-weight: 700; line-height: 1.25; }
.miktar-baslik .alt { opacity: .9; font-size: 13px; margin-top: 4px; }
.miktar-kart { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 14px; padding: 16px; border-radius: 14px; background: var(--kart);
    box-shadow: 0 1px 8px rgba(0,0,0,.08); text-align: center; }
.miktar-kart .etiket { color: var(--soluk); font-size: 12px; letter-spacing: .5px; }
.miktar-kart .deger { font-size: 34px; font-weight: 700; color: #d32f2f; line-height: 1.1; }
.miktar-kart .tutar { color: #2e7d32; font-weight: 600; font-size: 14px; }
.yuvarlak { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    font-size: 26px; font-family: inherit; background: rgba(0,0,0,.05); color: var(--soluk); }
.yuvarlak.kirmizi { background: #d32f2f; color: #fff; }
.hizli-baslik { color: var(--soluk); font-size: 12px; letter-spacing: .5px; margin: 0 16px; }
.hizli-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 16px; }
.hizli-izgara button { border: none; cursor: pointer; border-radius: 12px; padding: 18px 0;
    font-size: 22px; font-weight: 700; color: #fff; font-family: inherit; background: var(--kart); }
.elle-gir { margin: 10px 16px; }
.miktar-dugmeler { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 14px 16px 18px; }
.miktar-dugmeler button { display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 600; }
.miktar-dugmeler .yesil { background: #43a047; color: #fff; border: none; cursor: pointer;
    font-family: inherit; }

/* ══ Ortak ekran dili (Android ile aynı) ════════════════════════════════ */

/* Kırmızı başlık çubuğu — simgeler BEYAZ, aksi hâlde zeminde kaybolur. */
.ekran-basligi { display: flex; align-items: center; gap: 10px; margin: -4px -2px 14px;
    padding: 12px; border-radius: 16px; color: #fff;
    background: linear-gradient(135deg,#d32f2f,#b71c1c);
    box-shadow: 0 3px 12px rgba(183,28,28,.3); }
.ekran-basligi .ikon-dugme,
.ekran-basligi .ikon-dugme .material-icons-round,
.ekran-basligi a { color: #fff; }
.ekran-basligi .baslik { flex: 1; min-width: 0; text-align: center; }
.ekran-basligi .baslik .ad { font-size: 18px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ekran-basligi .baslik .alt { font-size: 12px; opacity: .85; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Müşteri özet kartı */
.ozet-kart { background: var(--kart); border-radius: 18px; padding: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom: 14px; }
.ozet-kart .ust { display: flex; align-items: center; gap: 12px; }
.ikon-kutu { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; display: grid;
    place-items: center; font-size: 24px;
    background: color-mix(in srgb, var(--ton) 14%, transparent); color: var(--ton); }
.ozet-kart .bilgi { flex: 1; min-width: 0; }
.ozet-kart .ad { font-weight: 700; font-size: 16px; line-height: 1.25; }
.ozet-kart .alt { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    color: var(--soluk); font-size: 12.5px; margin-top: 3px; }
.ozet-kart .alt .material-icons-round { font-size: 14px; }
.ozet-kart .alt .evrak { letter-spacing: .3px; }
.bakiye-kutu { display: flex; align-items: center; gap: 12px; margin-top: 12px;
    padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; }
.bakiye-kutu .etiket { font-size: 13px; font-weight: 600; }
.bakiye-kutu .tutar { font-size: 21px; font-weight: 700; margin-top: 2px; }
.bakiye-kutu.borc { background: rgba(239,108,0,.08); border-color: rgba(239,108,0,.3); color: #e65100; }
.bakiye-kutu.alacak { background: rgba(46,125,50,.08); border-color: rgba(46,125,50,.3); color: #2e7d32; }

/* Bölüm kartı: başlıkta renkli ikon kutusu */
.bolum-kart { background: var(--kart); border-radius: 18px; padding: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06); margin-bottom: 14px; }
.bolum-baslik { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bolum-baslik h2 { font-size: 17px; font-weight: 700; margin: 0; }

/* İkonlu form alanı */
.form-alani { position: relative; margin-bottom: 14px; }
.form-alani .ust-etiket { position: absolute; top: -7px; left: 14px; z-index: 1;
    background: var(--kart); padding: 0 6px; font-size: 11.5px; font-weight: 600;
    color: var(--soluk); }
/* overflow:hidden idi; içindeki seçim kutusunun açılır listesini kırpıyordu
   (liste açılıyor ama görünmüyordu). Köşeleri ikon kutusu kendi yuvarlıyor. */
.form-alani .kutu { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--cizgi);
    border-radius: 13px; background: var(--kart); }
.form-alani.eksik .kutu { border-color: rgba(211,47,47,.5); }
.form-alani .kutu .ikon-kutu { border-radius: 12px 0 0 12px; height: auto; min-height: 50px; }
.form-alani .icerik { flex: 1; min-width: 0; display: flex; align-items: center; }
/* Seçim kutusu alanı tamamen doldursun — yoksa çerçevenin sağında boşluk kalıyor. */
.form-alani .icerik > .sk-kok { flex: 1; min-width: 0; }
.form-alani .icerik > .sk-kok .sk-kutu { border: none; background: none; box-shadow: none; }
.form-alani .icerik > input,
.form-alani .icerik > select,
.form-alani .icerik > textarea { width: 100%; border: none; background: none; outline: none;
    padding: 13px 12px; font-size: 15px; font-family: inherit; color: var(--metin); }
.form-alani .icerik > textarea { resize: vertical; min-height: 72px; }
.form-alani .kilit { align-self: center; color: var(--soluk); font-size: 18px; padding: 0 12px; }

/* Eksik alan bandı */
.eksik-uyari { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px;
    padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.4;
    background: rgba(239,108,0,.1); border: 1px solid rgba(239,108,0,.35); color: #e65100; }
.eksik-uyari .material-icons-round { font-size: 19px; flex: 0 0 auto; }


/* ── Masaüstü görünümü ──────────────────────────────────────────────────── */
/* Alt sekmeler de gövdeyle aynı genişlikte ortalansın. */
@media (min-width: 620px) {
    .alt-sekmeler { left: 50%; right: auto; transform: translateX(-50%);
        width: 560px; border-radius: 18px 18px 0 0;
        border-left: 1px solid rgba(0,0,0,.06); border-right: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 -4px 20px rgba(0,0,0,.07); }
    /* Geniş ekranda sayfanın kendisi de uygulama gibi dursun. */
    body { background: #e9edf3; }
    .kabuk { background: var(--zemin); max-width: 560px; margin: 0 auto;
        min-height: 100vh; box-shadow: 0 0 40px rgba(0,0,0,.08); }
}

/* textarea yazı tipini DEVRALMIYOR: verilmezse tarayıcı daktilo fontu
   kullanıyor ve alan forma yabancı duruyor. */
textarea { font-family: inherit; font-size: 15px; }

/* Diyalog düğmeleri: ikincil gerçekten ikincil görünsün. */
.onay-kutu .dugme-satir { margin-top: 14px; }
.onay-kutu textarea, .onay-kutu input {
    width: 100%; border: 1px solid var(--cizgi); border-radius: 12px;
    padding: 10px 12px; background: var(--kart); color: var(--metin); outline: none; }
.onay-kutu textarea:focus, .onay-kutu input:focus { border-color: #d32f2f; }
.onay-kutu p.not { margin: 0 0 10px; }

/* Boş durum: dar gövdede ikon orantısız büyük kalıyordu. */
.bos-durum.evrak-bos { padding: 40px 20px; }
.bos-durum.evrak-bos .material-icons-round { font-size: 60px; }

/* ── Miktar Gir tuş takımı (Android miktar_sor_screen.dart karşılığı) ──────── */
.tus-katman { position: fixed; inset: 0; z-index: 1300; background: #eceff1;
              display: flex; justify-content: center; }
.tus-ekran { width: 100%; max-width: 560px; display: flex; flex-direction: column;
             background: #eceff1; }
.tus-ust { background: #d32f2f; color: #fff; display: flex; align-items: center;
           gap: 8px; padding: 14px 10px; padding-top: calc(14px + env(safe-area-inset-top)); }
.tus-ust h2 { margin: 0 auto; font-size: 22px; font-weight: 600; padding-right: 44px; }
.tus-ust .geri { background: none; border: none; color: #fff; cursor: pointer;
                 width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.tus-ust .geri:hover { background: rgba(255,255,255,.15); }
.tus-govde { flex: 1; overflow: auto; padding: 14px 16px; }
.tus-kart { background: #fff; border-radius: 14px; padding: 18px 16px; text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tus-kart .ad { color: #607d8b; font-size: 17px; line-height: 1.3; }
.tus-kart .etiket { color: #90a4ae; font-size: 13px; letter-spacing: .5px; margin-top: 10px; }
.tus-kart .deger { color: #d32f2f; font-size: 44px; font-weight: 700; line-height: 1.1; }
.tus-kart .tutar { color: #2e7d32; font-size: 19px; font-weight: 500; margin-top: 4px; }
.tus-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.tus-izgara .tus { background: #fff; border: none; border-radius: 12px; cursor: pointer;
                   font-size: 30px; font-weight: 500; color: #263238; padding: 18px 0;
                   box-shadow: 0 1px 3px rgba(0,0,0,.08); display: grid; place-items: center; }
.tus-izgara .tus:active { background: #e3e7ea; }
.tus-izgara .tus:hover { background: #f5f7fa; }
.tus-izgara .tus.koyu { background: #546e7a; color: #fff; }
.tus-izgara .tus.koyu:hover { background: #455a64; }
.tus-izgara .tus .material-icons-round { font-size: 30px; }
.tus-alt { display: flex; gap: 12px; padding: 14px 16px;
           padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.tus-alt .temizle { flex: 0 0 38%; background: #fff; border: 1px solid #b0bec5; color: #37474f;
                    border-radius: 28px; padding: 15px 0; font-size: 16px; cursor: pointer; }
.tus-alt .temizle:hover { background: #f5f7fa; }
.tus-alt .onayla { flex: 1; background: #43a047; border: none; color: #fff; border-radius: 28px;
                   padding: 15px 0; font-size: 17px; font-weight: 700; cursor: pointer;
                   display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tus-alt .onayla:hover { background: #388e3c; }
/* "Elle gir" artık kutu değil, tuş takımını açan düğme. */
.elle-gir .tus-ac { width: 100%; background: #fff; border: 1px solid var(--cizgi);
                    border-radius: 12px; padding: 12px; cursor: pointer; color: #37474f;
                    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                    font-size: 15px; }
.elle-gir .tus-ac:hover { background: #f5f7fa; }

/* ── Transfer / sayım ekranları (Android urun_transfer + stok_sayim) ───────── */
/* Üst çubuk: beyaz, kalın başlık + ikincil satır, sağda Kaydet. */
.ekran-cubugu { display: flex; align-items: center; gap: 10px; background: #fff;
    border-radius: 16px; padding: 12px 14px; margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ekran-cubugu .yazi { flex: 1; min-width: 0; }
.ekran-cubugu .ad { font-weight: 700; color: #212121; font-size: 17px; }
.ekran-cubugu .alt { font-size: 12.5px; color: #78909c; margin-top: 2px;
    display: flex; align-items: center; gap: 6px; }
.ekran-cubugu .alt .ilave { background: #fff3e0; border: 1px solid #ffb74d; color: #e65100;
    border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 600; }
.ekran-cubugu .kaydet { display: inline-flex; align-items: center; gap: 6px; border: none;
    background: var(--ana); color: #fff; border-radius: 8px; padding: 9px 14px;
    font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.ekran-cubugu .kaydet:disabled { opacity: .6; cursor: default; }
.ekran-cubugu .kaydet .material-icons-round { font-size: 19px; }

/* Katlanabilir başlık paneli (depo/sürücü alanları). */
/* overflow:hidden açılır listeleri kırpıyordu; köşeler çocuklarda yuvarlanıyor. */
.baslik-kutu { background: #fff; border-radius: 16px; margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.baslik-kutu .baslik-ac { border-radius: 16px 16px 0 0; }
.baslik-ac { display: flex; align-items: center; gap: 10px; width: 100%; border: none;
    background: none; cursor: pointer; font-family: inherit; font-size: 15px;
    color: var(--metin); padding: 14px; }
.baslik-ac .ok { margin-left: auto; color: var(--soluk); }
.baslik-govde { padding: 14px 14px 4px; border-top: 1px solid var(--cizgi); }

/* Kalem kartı — Android'deki kartın birebir karşılığı. */
.kalem-liste { display: flex; flex-direction: column; gap: 10px; }
.kalem-kart { background: #fff; border-radius: 16px; padding: 16px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.kalem-kart .ust { display: flex; align-items: center; gap: 10px; }
.kalem-kart .kod { background: linear-gradient(90deg, var(--ana), rgba(183,28,28,.5));
    color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .5px;
    border-radius: 8px; padding: 6px 12px; }
.kalem-kart .miktar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 12px; padding: 8px 16px; }
.kalem-kart .miktar .material-icons-round { font-size: 16px; color: #2e7d32; }
.kalem-kart .miktar b { color: #2e7d32; font-size: 18px; }
.kalem-kart .miktar .birim { color: #388e3c; font-size: 12px; font-weight: 600; }
.kalem-kart .ad { font-size: 16px; font-weight: 600; line-height: 1.3; margin-top: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kalem-kart .alt { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kalem-kart .marka { background: #e3f2fd; color: #1565c0; font-size: 12px; font-weight: 500;
    border-radius: 6px; padding: 4px 8px; }
.kalem-kart .raf { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
    color: #546e7a; min-width: 0; }
.kalem-kart .raf.yok { color: #b0bec5; }
.kalem-kart .raf .material-icons-round { font-size: 14px; }
.kalem-kart .sil { margin-left: auto; background: none; border: none; cursor: pointer;
    color: #e53935; padding: 8px; border-radius: 50%; display: grid; place-items: center; }
.kalem-kart .sil:hover { background: #ffebee; }

/* Alt çubuk: iki eşit düğme (Ürün Ekle / Barkod Tara). */
.ekran-alt-cubuk { display: flex; gap: 12px; position: sticky; z-index: 15;
    bottom: calc(var(--alt-yuk) - var(--kenar) + 8px); margin-top: 12px;
    background: var(--kart); border-radius: 18px; padding: 10px;
    box-shadow: 0 -2px 14px rgba(0,0,0,.14); }
.ekran-alt-cubuk > button { flex: 1; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; border-radius: 14px; padding: 13px 0;
    font-size: 15px; font-weight: 600; }
.urun-sec .ekle-ok { color: var(--ana); font-size: 28px; flex: 0 0 auto; }

/* Seri A/B anahtarı — Android AppBar'ındaki Switch'in karşılığı. */
.seri-anahtar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    user-select: none; }
.seri-anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }
.seri-anahtar .seri { font-size: 12px; opacity: .92; white-space: nowrap; }
.seri-anahtar .kaydirak { position: relative; width: 40px; height: 22px; border-radius: 999px;
    background: rgba(255,255,255,.35); transition: background .15s; flex: 0 0 auto; }
.seri-anahtar .kaydirak::after { content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.seri-anahtar input:checked + .kaydirak { background: rgba(255,255,255,.75); }
.seri-anahtar input:checked + .kaydirak::after { transform: translateX(18px); }
/* Beyaz çubukta (transfer/sayım) aynı anahtar koyu zeminde durur. */
.seri-anahtar.koyu .seri { color: #546e7a; }
.seri-anahtar.koyu .kaydirak { background: #cfd8dc; }
.seri-anahtar.koyu input:checked + .kaydirak { background: var(--ana); }

/* ── Gelen Havale: dekont okuma kartı ──────────────────────────────────────── */
.dekont-durum { display: flex; align-items: center; gap: 8px; margin-top: 10px;
    border-radius: 10px; padding: 9px 11px; font-size: 13.5px; }
.dekont-durum .material-icons-round { font-size: 19px; }
.dekont-durum.iyi { background: #e8f5e9; color: #2e7d32; }
.dekont-durum.kotu { background: #fff3e0; color: #e65100; }
.dekont-satir { margin-top: 10px; font-size: 13.5px; color: var(--soluk); }
.tutar-cipleri { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tutar-cipleri .cip { border: 1px solid var(--cizgi); background: #fff; cursor: pointer;
    border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600;
    color: #2e7d32; font-family: inherit; }
.tutar-cipleri .cip:hover { background: #f5f7fa; }
.tutar-cipleri .cip.secili { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.ham-metin { background: #263238; color: #eceff1; border-radius: 10px; padding: 10px;
    font-size: 11.5px; line-height: 1.45; max-height: 240px; overflow: auto;
    white-space: pre-wrap; word-break: break-word; margin-top: 8px; }
.bolum-kart .ikincil.kucuk { margin-top: 10px; display: inline-flex; align-items: center;
    gap: 6px; padding: 8px 12px; font-size: 13.5px; }

/* Alan içinden pencere açan seçici (cari seçimi gibi). */
.secici-dugme { width: 100%; display: flex; align-items: center; gap: 10px; border: none;
    background: none; cursor: pointer; font-family: inherit; font-size: 15px;
    color: var(--metin); padding: 13px 12px; text-align: left; }
.secici-dugme .bos { color: var(--soluk); }
.secici-dugme .deger { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.secici-dugme .deger small { color: var(--soluk); font-size: 12px; margin-top: 2px; }
.secici-dugme .material-icons-round { margin-left: auto; font-size: 16px; color: var(--soluk); }
.secici-dugme:hover { background: #f5f7fa; }
.urun-sec.pasif { opacity: .45; cursor: not-allowed; }
.urun-sec .fiyat-kutu b.eksi { color: #c62828; }
.urun-sec .fiyat-kutu b.arti { color: #2e7d32; }

/* Bölüm kartındaki açıklama notu: FormAlani'nın üst etiketi taştığı için
   altındaki nota binmesin diye kendi boşluğunu taşıyor. */
.bolum-kart .alan-not { font-size: 12px; color: var(--soluk);
    margin: -8px 2px 14px; line-height: 1.4; }
.bolum-kart .levha-satir { display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 14px; }
.bolum-kart .levha-satir .alan-not { margin: 0; }
.bolum-kart label.onay { display: flex; align-items: center; gap: 8px; font-size: 14px;
    font-weight: 500; color: var(--metin); margin: 2px 0 14px; }
.bolum-kart label.onay input { width: auto; }

/* ── Ayarlar ekranı ────────────────────────────────────────────────────────── */
.ayar-satiri { display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 12px 2px; border-bottom: 1px solid var(--cizgi); user-select: none; }
.ayar-satiri:last-of-type { border-bottom: none; }
.ayar-satiri .yazi { flex: 1; min-width: 0; }
.ayar-satiri .ad { font-size: 15px; color: var(--metin); }
.ayar-satiri .alt { font-size: 12.5px; color: var(--soluk); margin-top: 3px; line-height: 1.4; }
.ayar-satiri input { position: absolute; opacity: 0; width: 0; height: 0; }
.ayar-satiri .kaydirak { position: relative; width: 44px; height: 24px; border-radius: 999px;
    background: #cfd8dc; transition: background .15s; flex: 0 0 auto; }
.ayar-satiri .kaydirak::after { content: ""; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ayar-satiri input:checked + .kaydirak { background: var(--ana); }
.ayar-satiri input:checked + .kaydirak::after { transform: translateX(20px); }
.uyari.yesil { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }

/* ── Stok Detay ────────────────────────────────────────────────────────────── */
.stok-ozet .ad { font-size: 18px; font-weight: 700; line-height: 1.3; }
.stok-ozet .rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stok-ozet .bakiye-serit { display: flex; gap: 12px; margin-top: 14px; }
.stok-ozet .bakiye-serit > div { flex: 1; background: #f5f7fa; border-radius: 12px;
    padding: 10px 12px; }
.stok-ozet .bakiye-serit .etiket { display: block; font-size: 12px; color: var(--soluk); }
.stok-ozet .bakiye-serit b { font-size: 18px; }
.stok-ozet .bakiye-serit b.arti { color: #2e7d32; }
.stok-ozet .bakiye-serit b.eksi { color: #c62828; }
.detay-satiri { display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid var(--cizgi); font-size: 14px; }
.detay-satiri:last-child { border-bottom: none; }
.detay-satiri span { color: var(--soluk); flex: 0 0 42%; }
.detay-satiri b { flex: 1; min-width: 0; word-break: break-word; }
.hareket-liste { display: flex; flex-direction: column; }
.hareket-satiri { display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--cizgi); }
.hareket-satiri:last-child { border-bottom: none; }
.hareket-satiri .sol { flex: 1; min-width: 0; }
.hareket-satiri .ust b { font-size: 14px; }
.hareket-satiri .alt { font-size: 12px; color: var(--soluk); margin-top: 2px; }
.hareket-satiri .sag { font-weight: 700; font-size: 15px; white-space: nowrap; }
.hareket-satiri .sag span { font-weight: 500; font-size: 11px; color: var(--soluk);
    margin-left: 3px; }
.hareket-satiri .sag.arti { color: #2e7d32; }
.hareket-satiri .sag.eksi { color: #c62828; }
.urun-kart.tiklanir { cursor: pointer; }
.urun-kart.tiklanir:hover { background: #f5f7fa; }

/* ── Tahsilat Hedefi ───────────────────────────────────────────────────────── */
.hedef-kart { display: flex; align-items: center; gap: 12px; background: var(--kart);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.hedef-kart:hover { background: #f5f7fa; }
.hedef-kart .sol { flex: 1; min-width: 0; }
.hedef-kart .ad { font-weight: 600; font-size: 15px; line-height: 1.3; }
.hedef-kart .rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hedef-kart .sag { text-align: right; white-space: nowrap; }
.hedef-kart .vadesi { font-weight: 700; font-size: 16px; }
.hedef-kart .vadesi.var { color: #c62828; }
.hedef-kart .vadesi.yok { color: var(--soluk); }
.hedef-kart .bakiye { font-size: 12px; color: var(--soluk); margin-top: 2px; }
.evrak-eylem { padding: 8px 12px 12px; border-top: 1px solid var(--cizgi); }

/* ── Evrak Durumu ──────────────────────────────────────────────────────────── */
.ozet-kart.tiklanir { cursor: pointer; }
.ozet-kart.tiklanir:hover { background: #f5f7fa; }
.ozet-kart.secili { outline: 2px solid var(--ana); outline-offset: -2px; }
.durum-satiri { display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid var(--cizgi); }
.durum-satiri:last-child { border-bottom: none; }
.durum-satiri .sol { flex: 1; min-width: 0; }
.durum-satiri .ad { font-size: 14px; font-weight: 600; }
.durum-satiri .alt { font-size: 12px; color: var(--soluk); margin-top: 2px; }
.durum-satiri .sag { text-align: right; white-space: nowrap; }
.durum-satiri .tutar { font-weight: 700; font-size: 15px; }
.durum-satiri .tarih { font-size: 11.5px; color: var(--soluk); margin-top: 2px; }
.evrak-kart .ad .ok { color: var(--soluk); margin: 0 4px; }

/* ── Sevkiyat ──────────────────────────────────────────────────────────────── */
.sevk-kart { background: var(--kart); border-radius: 16px; padding: 14px;
    margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border-left: 4px solid transparent; }
.sevk-kart.tamam  { border-left-color: #2e7d32; }
.sevk-kart.olmadi { border-left-color: #c62828; }
.sevk-kart .ust { display: flex; align-items: flex-start; gap: 12px; }
.sevk-kart .sol { flex: 1; min-width: 0; }
.sevk-kart .ad { font-weight: 600; font-size: 15px; line-height: 1.3; }
.sevk-kart .rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sevk-kart .sag { text-align: right; white-space: nowrap; }
.sevk-kart .sag .tutar { font-weight: 700; }
.sevk-kart .sag .tarih { font-size: 11.5px; color: var(--soluk); margin-top: 2px; }
.sevk-kart .adres { display: flex; align-items: center; gap: 6px; margin-top: 8px;
    font-size: 13px; color: var(--soluk); }
.sevk-kart .adres .material-icons-round { font-size: 16px; }
.sevk-kart .eylemler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sevk-kart .eylemler > * { display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 10px; font-size: 13.5px; text-decoration: none; }
.sevk-kart .eylemler .material-icons-round { font-size: 17px; }
.rozet.yesil { background: rgba(46,125,50,.14); color: #2e7d32; }

/* ── e-Belge önizleme ──────────────────────────────────────────────────────── */
.onizleme-kutu { background: #fff; border-radius: 16px; width: 100%; max-width: 900px;
    height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden; }
.onizleme-kutu .ust { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-bottom: 1px solid var(--cizgi); }
.onizleme-kutu .ust b { font-size: 15px; }
.onizleme-kutu .ust .ikon-dugme { margin-left: auto; }
.onizleme-cerceve { flex: 1; width: 100%; border: none; background: #fff; }
.onizleme-kutu .ham-metin { margin: 12px; }
.dugme-satir.kucuk { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.dugme-satir.kucuk button { padding: 7px 10px; font-size: 13px; }
.dugme-satir.kucuk .material-icons-round { font-size: 18px; }
.sablon-satiri { display: flex; align-items: center; gap: 10px; padding: 11px 0;
    border-bottom: 1px solid var(--cizgi); }
.sablon-satiri:last-of-type { border-bottom: none; }
.sablon-satiri .yazi { flex: 1; min-width: 0; }
.sablon-satiri .ad { font-size: 15px; }
.sablon-satiri .alt { font-size: 12.5px; color: var(--soluk); margin-top: 2px; }
.sablon-satiri label { position: relative; overflow: hidden; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    border-radius: 10px; font-size: 13.5px; border: 1px solid var(--cizgi);
    background: #fff; color: #546e7a; }
.sablon-satiri label:hover { background: #f5f7fa; }
.sablon-satiri label input[type=file] { position: absolute; inset: 0; opacity: 0;
    cursor: pointer; }
.evrak-satir .gorsel.tiklanir { cursor: pointer; }
.evrak-satir .gorsel.tiklanir:hover { background: rgba(0,0,0,.08); color: var(--ana); }
.evrak-eylem { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.evrak-eylem .ikincil.kucuk { display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; font-size: 13.5px; border-radius: 10px; text-decoration: none; }
.evrak-eylem .ikincil.kucuk .material-icons-round { font-size: 17px; }

/* ── Belge görünümü (yazdırılabilir) ───────────────────────────────────────── */
.belge-kagit { background: #fff; color: #000; border-radius: 12px; padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1); font-size: 13px; }
.belge-ust { display: flex; gap: 20px; border-bottom: 2px solid #000; padding-bottom: 12px; }
.belge-ust .firma { flex: 1; min-width: 0; }
.belge-ust .unvan { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.belge-ust .satir { font-size: 12px; line-height: 1.5; }
.belge-ust .kunye { flex: 0 0 auto; text-align: right; }
.belge-ust .kunye .tur { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.belge-ust .kunye table { font-size: 12px; border-collapse: collapse; margin-left: auto; }
.belge-ust .kunye td { padding: 1px 0 1px 10px; }
.belge-ust .kunye td:first-child { color: #555; text-align: right; }
.belge-ust .kunye .ettn { font-family: ui-monospace, monospace; font-size: 10.5px; }
.belge-alici { margin: 14px 0; }
.belge-alici .etiket { font-size: 11px; color: #555; letter-spacing: 1px; }
.belge-alici .unvan { font-weight: 700; font-size: 14px; }
.belge-alici .satir { font-size: 12px; line-height: 1.5; }
.belge-kalemler { width: 100%; border-collapse: collapse; font-size: 12px; }
.belge-kalemler th { background: #eceff1; text-align: left; padding: 6px 6px;
    border-bottom: 1px solid #90a4ae; white-space: nowrap; }
.belge-kalemler td { padding: 5px 6px; border-bottom: 1px solid #eceff1;
    vertical-align: top; }
.belge-kalemler .sira { width: 28px; color: #666; }
.belge-kalemler .sag { text-align: right; }
.belge-toplam { display: flex; justify-content: flex-end; margin-top: 12px; }
.belge-toplam table { font-size: 12.5px; border-collapse: collapse; min-width: 260px; }
.belge-toplam td { padding: 3px 0 3px 16px; }
.belge-toplam .sag { text-align: right; }
.belge-toplam .genel td { border-top: 2px solid #000; font-weight: 700; font-size: 14px;
    padding-top: 6px; }
.belge-yazi { margin-top: 10px; font-size: 12px; font-style: italic; }

/* Tahsilat makbuzunun imza alanı (mobil PDF'inde de var). */
.belge-imza { display: flex; gap: 40px; margin-top: 36px; }
.belge-imza > div { flex: 1; text-align: center; }
.belge-imza span { display: block; border-top: 1px solid #000; padding-top: 6px;
    font-size: 11.5px; color: #333; }

@media print {
    /* Kabuk, sekmeler ve düğmeler kâğıda basılmaz. */
    .yazdirma-gizle, .alt-sekmeler { display: none !important; }
    html, body { background: #fff !important; }
    .govde { max-width: none; padding: 0; }
    .kabuk { max-width: none; }
    .belge-kagit { box-shadow: none; border-radius: 0; padding: 0; }
    .belge-kalemler thead { display: table-header-group; }   /* sayfa başına başlık */
    .belge-kalemler tr { break-inside: avoid; }
}
.musteri-urun-suzgec { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px;
    font-size: 13.5px; color: var(--metin); cursor: pointer; }
.urun-sec .musteri-kod { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
    font-size: 12px; color: #6a1b9a; background: rgba(106,27,154,.08);
    border-radius: 6px; padding: 2px 6px; }
.urun-sec .musteri-kod .material-icons-round { font-size: 14px; }

/* ── Stok Listesi: sıkışık satır (ekrana en az 5 satır) ────────────────────── */
.liste.sik { gap: 6px; }
.stok-satir { display: flex; align-items: center; gap: 10px; cursor: pointer;
    background: var(--kart); border-radius: 10px; padding: 7px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.stok-satir:hover { background: #f5f7fa; }
.stok-satir.pasif { background: #fff1f3; }
.stok-satir .sol { flex: 1; min-width: 0; }
.stok-satir .ad { font-weight: 600; font-size: 13.5px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
.stok-satir .alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 2px; font-size: 11.5px; color: var(--soluk); line-height: 1.3; }
.stok-satir .alt .kod { font-weight: 600; color: #455a64; }
.stok-satir .alt .marka { color: #5e35b1; }
.stok-satir .alt .fiyat { font-weight: 700; color: var(--metin); margin-left: auto; }
.stok-satir .alt .kdv { color: var(--soluk); }
.stok-satir .alt .pasif-etiket { color: #c62828; font-weight: 600; }
.stok-satir .sag { text-align: right; white-space: nowrap; flex: 0 0 auto; }
.stok-satir .sag .bakiye { font-size: 14px; font-weight: 800; padding: 3px 8px;
    border-radius: 8px; }
.stok-satir .sag .birim { font-size: 10.5px; color: var(--soluk); margin-top: 1px; }
.ekstre-kart.tiklanir { cursor: pointer; }
.ekstre-kart.tiklanir:hover { background: #f5f7fa; }

/* ── Evrak Durumu: Android'deki "Genel Bakış" düzeni ───────────────────────── */
/* overflow-x: auto dikeyde de kırpıyor; rozete yer kalsın diye üstte boşluk. */
.donem-cipleri { display: flex; gap: 8px; overflow-x: auto; padding: 14px 8px 10px 2px;
    margin-top: -6px; -webkit-overflow-scrolling: touch; }
.donem-cipleri::-webkit-scrollbar { display: none; }
.donem-cip { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center;
    gap: 6px; background: #fff; border: 1px solid var(--cizgi); border-radius: 999px;
    padding: 10px 18px; font-size: 15px; font-family: inherit; color: #546e7a;
    cursor: pointer; white-space: nowrap; }
.donem-cip.secili { border-color: var(--ana); color: var(--ana); font-weight: 600; }
.donem-cip .material-icons-round { font-size: 18px; }
.donem-cip .rozet-sayi { position: absolute; top: -8px; right: -6px; min-width: 22px;
    height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ana); color: #fff;
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center;
    justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }

.durum-kartlari { display: flex; flex-direction: column; gap: 10px; }
.durum-kart { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer;
    background: var(--kart); border: none; border-radius: 16px; padding: 14px;
    font-family: inherit; text-align: left; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.durum-kart:hover { background: #f5f7fa; }
.durum-kart .ikon-kutu { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; font-size: 24px;
    color: var(--ton); background: color-mix(in srgb, var(--ton) 14%, #fff); }
.durum-kart .yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.durum-kart .yazi .ad { font-size: 16px; font-weight: 700; color: #263238; line-height: 1.25; }
.durum-kart .yazi .adet { font-size: 13px; color: var(--soluk); margin-top: 2px; }
.durum-kart .tutar { font-size: 16px; font-weight: 700; color: var(--ton); white-space: nowrap; }
.durum-kart .ok { color: #b0bec5; font-size: 20px; }
.durum-satiri.kart { background: var(--kart); border-radius: 12px; padding: 10px 12px;
    border-bottom: none; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.onay-kutu h2 { display: flex; align-items: center; gap: 8px; }
.onay-kutu h2 .material-icons-round { color: var(--ana); font-size: 22px; }

/* Ürün seçme penceresinde sıkışık satır: bir ekrana beş ürün sığsın. */
.urun-sec.sik { padding: 8px 10px; margin-bottom: 6px; gap: 8px; align-items: center; }
.urun-sec.sik .govde { display: flex; flex-direction: column; gap: 4px; }
.urun-sec.sik .aciklama { margin-top: 0; font-size: 13.5px; font-weight: 600;
    color: var(--metin); line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.urun-sec.sik .rozetler { margin-top: 0; gap: 4px; }
.urun-sec.sik .rozet { font-size: 10.5px; padding: 2px 6px; }
.urun-sec.sik .rozet .material-icons-round { font-size: 11px; }
.urun-sec.sik .ekle-ok { font-size: 24px; }

/* ── Stok Sayım Listesi (Android düzeni) ───────────────────────────────────── */
.sayim-kart { display: flex; align-items: center; gap: 12px; cursor: pointer;
    background: var(--kart); border-radius: 16px; padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.sayim-kart:hover { background: #f5f7fa; }
.sayim-kart.kilitli { opacity: .75; }
.sayim-kart .ikon-kutu { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; font-size: 24px;
    color: var(--ana); background: rgba(183,28,28,.1); }
.sayim-kart .govde-kart { flex: 1; min-width: 0; }
.sayim-kart .evrak { font-size: 16px; font-weight: 700; color: #263238; }
.sayim-kart .satir { display: flex; align-items: center; gap: 5px; font-size: 13px;
    color: var(--soluk); margin-top: 2px; }
.sayim-kart .satir .material-icons-round { font-size: 15px; }
.sayim-kart .durum { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
    border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600; }
.sayim-kart .durum .material-icons-round { font-size: 16px; }
.sayim-kart .durum.islendi { background: #e8f5e9; color: #2e7d32; }
.sayim-kart .durum.bekliyor { background: #fff3e0; color: #e65100; }
.sayim-kart .ok { color: #b0bec5; }

/* ── "Yeni …" yüzen düğmesi (Android'deki FAB) ─────────────────────────────── */
/* Katman telefon kabuğuyla aynı genişlikte ve ortalı; düğme sağ altta,
   alt sekme çubuğunun üstünde durur. Katman tıklamayı geçirir. */
.yeni-kat { position: fixed; left: 50%; transform: translateX(-50%);
    width: min(100%, 560px); bottom: calc(var(--alt-yuk) + 12px);
    display: flex; justify-content: flex-end; padding: 0 16px;
    pointer-events: none; z-index: 18; }
.yeni-dugme { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
    border: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600;
    color: var(--ana); background: #f7d9d6; border-radius: 999px; padding: 14px 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.yeni-dugme:hover { background: #f3c9c5; }
.yeni-dugme .material-icons-round { font-size: 22px; }
/* Yüzen düğme listenin son satırını kapatmasın. */
.yeni-kat-payi { height: 64px; }

/* Stok listesi: Android'deki renkli rozetler + turuncu fiyat hapı. */
.stok-satir .rozetler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.stok-satir .rozet { font-size: 10.5px; padding: 3px 7px; }
.stok-satir .rozet .material-icons-round { font-size: 12px; }
.rozet.mavi { background: rgba(21,101,192,.12); color: #1565c0; }
.rozet.yesil { background: rgba(46,125,50,.13); color: #2e7d32; }
.fiyat-hap { flex: 0 0 auto; text-align: center; background: linear-gradient(135deg,#fb8c00,#f9a825);
    color: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13px;
    box-shadow: 0 1px 4px rgba(251,140,0,.35); }
.fiyat-hap span { display: block; font-weight: 600; font-size: 9.5px; opacity: .92; }
.yeni-dugme.kirmizi { background: var(--ana); color: #fff; text-decoration: none; }
.yeni-dugme.kirmizi:hover { background: #991b1b; }

/* Evrak kaydedildi şeridi — ekranı kapatmadan, kalemlerin üstünde durur. */
.kaydedildi-serit { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px;
    padding: 12px 14px; border-radius: 14px; background: rgba(46,125,50,.09);
    border: 1px solid rgba(46,125,50,.25); }
.kaydedildi-serit > .material-icons-round { color: var(--arti); font-size: 22px; }
.kaydedildi-serit .metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kaydedildi-serit .metin b { font-size: 14px; }
.kaydedildi-serit .metin span { font-size: 12px; color: var(--soluk); }
.kaydedildi-serit .metin .not { font-size: 11.5px; opacity: .85; }
.kaydedildi-serit .dugme-satir { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.kaydedildi-serit .dugme-satir .dugme,
.kaydedildi-serit .dugme-satir .ikincil { font-size: 12px; padding: 7px 12px; white-space: nowrap; }
/* Evrak ekranında yazıcı durumu düğmelerin altında, kendi satırında. */
.evrak-alt .yazdir-kutu { margin-top: 8px; }
.evrak-alt .yazdir-not { margin: 0; font-size: 12px; line-height: 1.35; }