/* Sucuk Takip - Mal Kabul: dokunmatik ekran için büyük hedefli, sade kurumsal arayüz */
:root {
  --ana: #8b1f2f;          /* sucuk kırmızısı */
  --ana-koyu: #6d1825;
  --zemin: #f2f0ed;
  --kart: #ffffff;
  --metin: #2b2b2b;
  --soluk: #767676;
  --cizgi: #ddd8d2;
  --yesil: #1e7c3a;
  --sari: #b98300;
  --kirmizi: #b3261e;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--zemin);
  color: var(--metin);
  font-size: 17px;
}

/* ---------- üst çubuk: 2 satır (1. başlık+kullanıcı, 2. sayfa butonları) ---------- */
.ust {
  background: var(--ana);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 16px 12px;
}
.ust-satir { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ust-sag { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.logo { font-size: 20px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; display: flex; align-items: center; gap: 10px; }
/* logo şeffaf zeminli ve kırmızı kurdeleli: kırmızı başlıkta kaybolmasın diye beyaz yuvarlak zemin üzerinde */
.logo-img { width: 46px; height: 46px; background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 1px 5px rgba(0,0,0,.3); flex-shrink: 0; }
.logo span { font-weight: 400; opacity: .85; font-size: 15px; margin-left: 6px; }
/* butonlar tek satırda kalır; dar ekranda alt alta düşmek yerine yatay kaydırılır */
.sekmeler { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.sekme {
  background: rgba(255,255,255,.12);
  color: #fff; border: none; border-radius: 10px;
  padding: 12px 20px; font-size: 16px; cursor: pointer;
  white-space: nowrap; flex: 1;
}
.sekme.aktif { background: #fff; color: var(--ana); font-weight: 700; }
.durum-ozet { font-size: 13px; opacity: .9; text-align: right; }

.uyari-bandi {
  background: #fff3cd; color: #7a5b00; border-bottom: 1px solid #e6d29a;
  padding: 10px 16px; font-size: 15px;
}
/* mobil saha: bağlantı durumu bandı (kopunca sarı-turuncu, gelince yeşil ve kendiliğinden kapanır) */
.baglanti-bandi {
  position: sticky; top: 0; z-index: 150;
  padding: 10px 16px; font-size: 15px; font-weight: 700; text-align: center;
}
.baglanti-bandi.kopuk { background: #ffe0b2; color: #8a4b00; border-bottom: 2px solid #f0a040; }
.baglanti-bandi.geri  { background: #d7f2de; color: var(--yesil); border-bottom: 2px solid #8fd1a2; }

/* ---------- genel ---------- */
main { padding: 14px; max-width: 1180px; margin: 0 auto; }
.sayfa.gizli, .gizli { display: none !important; }
.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px;
}
.kart-baslik { font-weight: 700; margin-bottom: 10px; color: var(--ana-koyu); font-size: 15px; letter-spacing: .3px; }
.kart-baslik-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-btn {
  font-size: 14px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cizgi); background: #fff; color: var(--ana); font-weight: 600;
}
.mini-btn:disabled { opacity: .5; }
.satir-grup { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--soluk); min-width: 130px; }
label.genis { flex: 1; min-width: 220px; }
label.onay { flex-direction: row; align-items: center; gap: 8px; color: var(--metin); padding-bottom: 12px; }
input, select {
  font-size: 18px; padding: 12px 12px; border: 1px solid var(--cizgi);
  border-radius: 10px; background: #fff; color: var(--metin); width: 100%;
}
input[type=checkbox] { width: 24px; height: 24px; }
input:focus, select:focus { outline: 2px solid var(--ana); border-color: var(--ana); }
.zorunlu { color: var(--kirmizi); }
.ipucu { color: var(--soluk); font-size: 14px; margin-top: 8px; }

.btn {
  font-size: 17px; padding: 13px 20px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--cizgi); background: #fff; color: var(--metin);
  min-height: 50px;
}
.btn.birincil { background: var(--ana); border-color: var(--ana); color: #fff; font-weight: 600; }
.btn.birincil:active { background: var(--ana-koyu); }
.btn.tehlike { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.btn.buyuk { font-size: 19px; padding: 15px 28px; }
.btn.kapat { min-height: auto; padding: 6px 12px; font-size: 18px; }
.butonlar { display: flex; gap: 12px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }

/* ---------- tablolar ---------- */
.tablo { width: 100%; border-collapse: collapse; font-size: 16px; }
.tablo th {
  text-align: left; padding: 10px 8px; background: #f7f4f1;
  border-bottom: 2px solid var(--cizgi); font-size: 13px; color: var(--soluk); text-transform: uppercase;
}
.tablo td { padding: 12px 8px; border-bottom: 1px solid var(--cizgi); }
.tablo tbody tr { cursor: pointer; }
.tablo tbody tr:active { background: #f3ece9; }
.sag, .tablo th.sag { text-align: right; }
.kalin { font-weight: 700; }
.rozet { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.rozet.bugun { background: #e2f3e7; color: var(--yesil); }
.rozet.eski { background: #f0f0f0; color: var(--soluk); }
.sil-btn {
  background: #fdeceb; color: var(--kirmizi); border: none; border-radius: 8px;
  font-size: 18px; padding: 8px 14px; cursor: pointer;
}

/* ---------- ürün arama açılır listesi ---------- */
.urun-sec { position: relative; }
.acilir-liste {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--cizgi); border-radius: 0 0 12px 12px;
  max-height: 320px; overflow-y: auto; box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.acilir-liste .oge { padding: 13px 14px; border-bottom: 1px solid #f0ece8; cursor: pointer; color: var(--metin); }
.acilir-liste .oge small { color: var(--soluk); }
.acilir-liste .oge:active, .acilir-liste .oge:hover { background: #f7efe9; }
.acilir-liste .oge.pasif { opacity: .55; cursor: not-allowed; background: #f6f4f2; }
.acilir-liste .oge.pasif:hover { background: #f6f4f2; }

/* ---------- modal ---------- */
/* Pencereler mobil klavyeye dayanıklı: yükseklik GÖRÜNÜR alana (--vv-h, klavye hariç) eşitlenir,
   taşan içerik kaydırılır; odaklanan alan app.js'de görünür alanın ortasına getirilir. */
.modal-arka {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  top: var(--vv-top, 0); bottom: auto; height: var(--vv-h, 100%); overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center; z-index: 100; padding: 12px;
}
.modal {
  background: var(--zemin); border-radius: 16px; width: 100%; max-width: 860px; margin: auto;
  max-height: calc(var(--vv-h, 100vh) - 24px); display: flex; flex-direction: column;
}
.modal-baslik {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: var(--ana); color: #fff;
  border-radius: 16px 16px 0 0; font-weight: 700; font-size: 18px;
}
.modal-icerik { padding: 14px 18px; overflow-y: auto; }
.modal-icerik .tablo { background: #fff; border-radius: 10px; }
.modal-alt {
  display: flex; gap: 12px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--cizgi); flex-wrap: wrap;
}
.kod-panel {
  background: #fff8e6; border: 1px solid #eadaa2; border-radius: 12px;
  padding: 14px; margin-bottom: 12px; font-size: 15px;
}
.kod-panel .satir-grup { margin-top: 10px; }
.kod-panel input { max-width: 140px; font-size: 24px; letter-spacing: 6px; text-align: center; }

/* ---------- sağlık listesi ---------- */
.saglik-satir { display: flex; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--cizgi); align-items: baseline; }
.saglik-satir .d-OK { color: var(--yesil); font-weight: 700; }
.saglik-satir .d-UYARI { color: var(--sari); font-weight: 700; }
.saglik-satir .d-HATA { color: var(--kirmizi); font-weight: 700; }
.saglik-satir .alan { min-width: 260px; font-weight: 600; }
.saglik-satir .mesaj { color: var(--soluk); font-size: 14px; }

/* ---------- bildirim ---------- */
.bildirim {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #2b2b2b; color: #fff; padding: 14px 26px; border-radius: 12px;
  font-size: 17px; z-index: 200; max-width: 90%; text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.bildirim.hata { background: var(--kirmizi); }
.bildirim.basari { background: var(--yesil); }

.parola-modal { max-width: 420px; }
.onay-arka { z-index: 160; }               /* fiş penceresinin üzerinde açılır */
.onay-modal { max-width: 470px; }
.onay-mesaj { font-size: 17px; line-height: 1.5; padding: 6px 2px; white-space: pre-line; }

/* belirsiz ilerleme çubuğu (mail gönderimi vb.) */
.progress { height: 7px; background: #eee2e2; border-radius: 5px; overflow: hidden; margin-top: 12px; }
.progress div { height: 100%; width: 35%; background: var(--ana); border-radius: 5px; animation: prg-kaydir 1.1s infinite ease-in-out; }
@keyframes prg-kaydir { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.durum-basari { color: var(--yesil); font-weight: 700; font-size: 16px; }
.durum-hata { color: var(--kirmizi); font-weight: 700; font-size: 16px; }

/* miktar alanının sağında ürün birimi (Kg/Adet) */
.miktar-sargi { position: relative; display: block; }
.miktar-sargi input { padding-right: 62px; }
.birim-eki {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ana-koyu); font-weight: 700; font-size: 16px; pointer-events: none;
}

/* ayarlar alt sekmeleri */
.alt-sekmeler { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.alt-sekme {
  background: #fff; border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 12px 22px; font-size: 16px; cursor: pointer; color: var(--metin);
}
.alt-sekme.aktif { background: var(--ana); border-color: var(--ana); color: #fff; font-weight: 700; }
.ipucu-satir { font-weight: 400; color: var(--soluk); font-size: 12px; }

/* üretim önizlemesi: personelin kullanacağı miktar baskın görünür */
.kullanilacak { font-size: 19px; font-weight: 800; color: var(--ana-koyu); white-space: nowrap; }
.soluk-kucuk { color: var(--soluk); font-size: 13px; white-space: nowrap; }

/* üretim ürün seçim butonları */
.uretim-secim { display: flex; gap: 14px; flex-wrap: wrap; }
.uretim-btn {
  flex: 1; min-width: 220px; padding: 22px 10px; font-size: 21px; font-weight: 800;
  border-radius: 14px; border: 2px solid var(--cizgi); background: #fff; color: var(--soluk);
  cursor: pointer; letter-spacing: .5px;
}

/* araç seçimi: geniş ekranda tek satırda 4 araç, daralan ekranda 2'li/tekli düzen */
.arac-secim { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.arac-secim .uretim-btn { min-width: 0; padding: 14px 8px; font-size: 17px; }
@media (max-width: 980px) { .arac-secim { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .arac-secim { grid-template-columns: 1fr; } }

/* ---------- Araç Yükle: yön teması (yükleme = yeşil, iade = kırmızı) ----------
   Personel hangi işlemde olduğunu sayfanın renginden anında fark etsin diye tüm sayfa
   arka planı, kart çerçeveleri ve birincil butonlar yön rengine bürünür. */
body.tema-yukleme { --tema: #1e7c3a; --tema-koyu: #155d2b; --tema-zemin: #dff1e4; --tema-cizgi: #b7dfc3; }
body.tema-iade    { --tema: #c62828; --tema-koyu: #9b1c1c; --tema-zemin: #fbe3e0; --tema-cizgi: #f0c2bd; }
body.tema-yukleme, body.tema-iade { background: var(--tema-zemin); transition: background .25s; }
body.tema-yukleme #sayfa-sevk .kart,
body.tema-iade #sayfa-sevk .kart { border: 1px solid var(--tema-cizgi); border-top: 5px solid var(--tema); }
body.tema-yukleme #sayfa-sevk .kart-baslik,
body.tema-iade #sayfa-sevk .kart-baslik { color: var(--tema-koyu); }
body.tema-yukleme #sayfa-sevk .btn.birincil,
body.tema-iade #sayfa-sevk .btn.birincil { background: var(--tema); border-color: var(--tema); }
body.tema-yukleme #sayfa-sevk .btn.birincil:active,
body.tema-iade #sayfa-sevk .btn.birincil:active { background: var(--tema-koyu); }
body.tema-yukleme #sayfa-sevk .uretim-btn.aktif,
body.tema-iade #sayfa-sevk .uretim-btn.aktif { background: var(--tema); border-color: var(--tema-koyu); color: #fff; }
body.tema-yukleme #sayfa-sevk .mini-btn,
body.tema-iade #sayfa-sevk .mini-btn { color: var(--tema); }
body.tema-yukleme #sayfa-sevk input:focus,
body.tema-iade #sayfa-sevk input:focus { outline-color: var(--tema); border-color: var(--tema); }
/* yön düğmeleri kendi renklerini her iki temada da korur (pasif olan da rengini ipucu olarak taşır) */
.svk-yon[data-yon="yukleme"] { color: #1e7c3a; border-color: #b7dfc3; }
.svk-yon[data-yon="iade"]    { color: #c62828; border-color: #f0c2bd; }
#sayfa-sevk .svk-yon[data-yon="yukleme"].aktif { background: #1e7c3a; border-color: #155d2b; color: #fff; }
#sayfa-sevk .svk-yon[data-yon="iade"].aktif    { background: #c62828; border-color: #9b1c1c; color: #fff; }
/* sayfa üstündeki büyük durum şeridi */
.svk-serit {
  border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
  color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .5px; text-align: center;
  background: var(--tema, var(--ana));
}

/* üretim butonlarındaki mevcut stok rozeti (hedef depodaki bakiye) */
.stok-rozet {
  display: block; width: fit-content; margin: 9px auto 0; padding: 4px 13px;
  border-radius: 20px; font-size: 14px; font-weight: 700; letter-spacing: 0;
  background: #e2f3e7; color: var(--yesil); border: 1px solid #b7dfc3;
}
.stok-rozet.eksi { background: #fdecea; color: var(--kirmizi); border-color: #f0c2bd; }
.uretim-btn.aktif .stok-rozet { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.45); }

/* ---------- Satış ekranı (telefon öncelikli) ---------- */
.sts-serit {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ana-koyu); color: #fff; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
  font-weight: 800; font-size: 18px;
}
.sts-serit #stsSeritOzet { font-size: 13px; font-weight: 600; opacity: .9; }
.sts-cari { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f6f4f1; border: 1px solid var(--cizgi); }
.sts-cari .bakiye { font-size: 20px; font-weight: 800; margin-top: 4px; }
.bakiye.borclu { color: var(--kirmizi); }
.bakiye.alacakli { color: var(--yesil); }
.sts-urunler { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sts-urun {
  text-align: left; padding: 14px; border-radius: 12px; border: 2px solid var(--cizgi); background: #fff;
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 92px;
}
.sts-urun b { font-size: 18px; color: var(--metin); }
.sts-urun .stok { font-size: 14px; font-weight: 700; color: var(--yesil); }
.sts-urun .stok.yok { color: var(--kirmizi); }
.sts-urun .fiyat { font-size: 14px; color: var(--soluk); }
.sts-urun .fiyat.ozel { color: var(--ana); font-weight: 700; }
.sts-urun.aktif { border-color: var(--ana); background: #fbeff0; }
.sts-urun:disabled { opacity: .45; cursor: not-allowed; }
.sts-giris { margin-top: 14px; padding: 14px; border-radius: 12px; background: #fbeff0; border: 1px solid #ecc9cd; }
.sts-giris-baslik { font-weight: 800; color: var(--ana-koyu); margin-bottom: 10px; font-size: 17px; }
.sts-giris-alanlar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.sts-giris-alanlar label { flex: 1; min-width: 140px; }
.sts-satir-tutar { display: flex; flex-direction: column; min-width: 120px; padding-bottom: 10px; }
.sts-satir-tutar b { font-size: 20px; color: var(--ana-koyu); }
.sts-tutar-input { max-width: 120px; text-align: right; font-weight: 700; padding: 8px 10px; font-size: 16px; }
.sts-toplam {
  display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px;
  border-radius: 10px; background: var(--ana); color: #fff; font-size: 20px;
}
.sts-toplam b { font-size: 24px; }
.sts-odemeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.ay-sts-bankalar { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow-y: auto; font-size: 14px; }
.sts-alan-baslik { font-weight: 700; color: var(--ana-koyu); margin-bottom: 8px; font-size: 15px; }
.sts-hesaplar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.sts-hesap {
  text-align: left; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--cizgi);
  background: #fff; font-size: 15px; cursor: pointer; color: var(--metin);
}
.sts-hesap.aktif { border-color: #5b3fa0; background: #f1ecfa; font-weight: 700; }
.sts-cek { margin-top: 12px; padding: 14px; border-radius: 12px; background: #f6f4f1; border: 1px solid var(--cizgi); }
.sts-cek-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sts-cek-alanlar .sts-genis { grid-column: span 2; }
.sts-cek-alanlar label { min-width: 0; }
.sts-odeme {
  padding: 16px 8px; border-radius: 12px; border: 2px solid var(--cizgi); background: #fff;
  font-size: 17px; font-weight: 800; color: var(--soluk); cursor: pointer;
}
.sts-odeme.aktif { color: #fff; }
.sts-odeme[data-kod="veresiye"].aktif { background: #9a6a00; border-color: #7a5400; }
.sts-odeme[data-kod="nakit"].aktif { background: var(--yesil); border-color: #155d2b; }
.sts-odeme[data-kod="kredi"].aktif { background: #1f5fa8; border-color: #174a84; }
.sts-odeme[data-kod="havale"].aktif { background: #5b3fa0; border-color: #45307a; }
.sts-odeme[data-kod="cek"].aktif { background: #0e7a7a; border-color: #0a5c5c; }
.sts-odeme[data-kod="senet"].aktif { background: #6b4f2a; border-color: #4f3a1f; }
.sts-son-bakiye { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #f6f4f1; font-size: 15px; }
.sts-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.sts-ozet div { background: #f6f4f1; border-radius: 10px; padding: 10px 12px; }
.sts-ozet small { display: block; color: var(--soluk); font-size: 12px; }
.sts-ozet b { font-size: 17px; }
.sts-mdl-ozet { margin-top: 12px; display: grid; gap: 6px; font-size: 16px; }
.odeme-rozet { display: inline-block; padding: 3px 10px; border-radius: 14px; font-size: 13px; font-weight: 700; color: #fff; }
.odeme-rozet.veresiye { background: #9a6a00; } .odeme-rozet.nakit { background: var(--yesil); }
.odeme-rozet.kredi { background: #1f5fa8; } .odeme-rozet.havale { background: #5b3fa0; }
.odeme-rozet.cek { background: #0e7a7a; } .odeme-rozet.senet { background: #6b4f2a; }
.sts-rozetler { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* çoklu ödeme: satış tutarı / alınan / kalan özeti, eklenen ödemeler, giriş paneli */
.sts-tahsilat-ozet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sts-tahsilat-ozet div { background: #f6f4f1; border-radius: 10px; padding: 10px 12px; border: 2px solid transparent; min-width: 0; }
.sts-tahsilat-ozet small { display: block; color: var(--soluk); font-size: 12px; }
.sts-tahsilat-ozet b { font-size: 19px; white-space: nowrap; }
#stsOzKalanKutu.eksik { border-color: var(--kirmizi); background: #fdecea; } #stsOzKalanKutu.eksik b { color: var(--kirmizi); }
#stsOzKalanKutu.tamam { border-color: var(--yesil); background: #e8f5ec; } #stsOzKalanKutu.tamam b { color: var(--yesil); }
#stsOzKalanKutu.veresiye { border-color: #9a6a00; background: #fbf3e0; } #stsOzKalanKutu.veresiye b { color: #7a5400; }
#stsOzKalanKutu.fazla { border-color: #1f5fa8; background: #e8f0fa; } #stsOzKalanKutu.fazla b { color: #1f5fa8; }
.sts-odeme-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sts-odeme-liste:empty { display: none; }
.sts-odeme-satir { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; }
.sts-odeme-satir .detay { flex: 1; min-width: 0; font-size: 13px; color: var(--soluk); overflow-wrap: anywhere; }
.sts-odeme-satir > b { font-size: 17px; white-space: nowrap; }
.sts-odeme-giris { margin-top: 12px; padding: 14px; border-radius: 12px; background: #f6f4f1; border: 1px solid var(--cizgi); }
.sts-odeme-giris .sts-cek { background: #fff; }
.sts-odeme:disabled { opacity: .45; cursor: not-allowed; }
/* satışsız tahsilat: uyarı bandı, bakiye kutuları, listede 'Tahsilat' etiketi */
.sts-tahsilat-uyari { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: #fff4e0; border: 2px solid #e0a020; color: #7a5400; font-size: 15px; }
.sts-tahsilat-ozet b small { display: block; font-size: 12px; font-weight: 700; color: inherit; opacity: .8; }
#stsOzKalanKutu.tahsilat { border-color: #455a64; background: #eef1f3; }
.odeme-rozet.tahsilat { background: #455a64; vertical-align: middle; }
.sts-tahsilat-not { margin-top: 10px; font-size: 15px; font-weight: 600; }
.sts-tahsilat-not.eksik { color: var(--kirmizi); } .sts-tahsilat-not.tamam { color: var(--yesil); }
.sts-tahsilat-not.veresiye { color: #7a5400; } .sts-tahsilat-not.fazla { color: #1f5fa8; }
@media (max-width: 700px) {
  .sts-urunler { grid-template-columns: 1fr 1fr; }
  .sts-odemeler { grid-template-columns: 1fr 1fr 1fr; }
  .sts-odeme { padding: 14px 4px; font-size: 15px; }
  .sts-cek-alanlar .sts-genis { grid-column: auto; }
  .sts-giris-alanlar { flex-direction: column; align-items: stretch; }
  .sts-tahsilat-ozet div { padding: 8px; }
  .sts-tahsilat-ozet b { font-size: 15px; }
}

/* seçim butonlarının altındaki stok bilgisi satırı */
.btn-alt {
  display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; color: var(--soluk); white-space: normal; line-height: 1.35;
}
.uretim-btn.aktif .btn-alt { color: rgba(255,255,255,.88); }
.uretim-btn.aktif { background: var(--ana); border-color: var(--ana-koyu); color: #fff; }

/* bağlantı/işlem hatası kutusu + yeniden dene */
.hata-kutu {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px 18px; margin: 8px 0;
  background: #fdf0ef; border: 1px solid #eac5c1; border-radius: 12px;
  color: var(--kirmizi); font-size: 16px; font-weight: 600; text-align: center; line-height: 1.5;
}

/* dönen yükleme göstergesi */
.yukleniyor { display: flex; align-items: center; gap: 12px; color: var(--soluk); padding: 18px 6px; font-size: 16px; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 4px solid #e8dede; border-top-color: var(--ana);
  animation: spin-don 0.8s linear infinite;
}
@keyframes spin-don { to { transform: rotate(360deg); } }
.spinner-kucuk {
  width: 17px; height: 17px; border-width: 3px;
  display: inline-block; vertical-align: -3px; margin-right: 8px;
  border-color: rgba(255,255,255,.35); border-top-color: #fff;
}
/* beyaz zeminli (normal/mini) butonlar için koyu spinner */
.spinner-kucuk.koyu { border-color: rgba(0,0,0,.14); border-top-color: var(--ana); }

/* sayı alanlarında ok/spinner kapalı: değer yalnız klavyeden girilir */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Kiosk: metin seçimi ve uzun basış balonları kapalı (giriş alanları hariç) */
body { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* ---------- giriş ekranı (Netsim kimliği) ---------- */
/* Klavye açılınca kutu görünür alanda kalır: yükseklik görünür alana eşitlenir, kutu otomatik
   kenar boşluklarıyla ortalanır, yer kalmazsa ortalama yerine yukarı yaslanıp kaydırılabilir olur. */
.giris-arka {
  position: fixed; inset: 0; z-index: 200;
  top: var(--vv-top, 0); bottom: auto; height: var(--vv-h, 100%); overflow-y: auto;
  background: linear-gradient(145deg, var(--ana) 0%, var(--ana-koyu) 100%);   /* görsel yüklenene kadar */
  display: flex; flex-direction: column; align-items: center; padding: 16px;
}
/* Marka görseli tüm ekranı kaplar. Ayrı sabit katmandadır: klavye açılınca giriş katmanı küçülse de
   görsel yeniden ölçeklenip zıplamaz. Hafif koyu katman, beyaz kutu ve alt bilgi yazısını okunur tutar. */
.giris-arka::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: -1;
  height: 100vh; height: 100lvh;
  background:
    linear-gradient(rgba(40, 6, 10, .30), rgba(40, 6, 10, .55)),
    url("images/efendiogluback.jpg") center / cover no-repeat;
}
.giris-kutu {
  background: var(--kart); border-radius: 18px; padding: 28px 30px 30px; margin-top: auto;
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); flex-shrink: 0;
}
.giris-kutu .btn { width: 100%; }
.giris-logo-img { width: 118px; height: 118px; margin: 0 auto -6px; display: block; }
.giris-logo { font-size: 26px; font-weight: 800; color: var(--ana); text-align: center; letter-spacing: .5px; }
.giris-alt-bilgi {
  margin: 16px 0 auto; color: rgba(255,255,255,.92); font-size: 13px; text-align: center; flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);   /* hareketli görsel üzerinde okunurluk */
}

/* sayfa alt bilgisi */
.alt-bilgi { text-align: center; color: var(--soluk); font-size: 13px; padding: 10px 16px 22px; }
.giris-aciklama { color: var(--soluk); font-size: 15px; text-align: center; line-height: 1.5; }
.giris-durum { color: var(--kirmizi); font-weight: 600; font-size: 15px; text-align: center; min-height: 20px; }

/* başlıkta oturum rozeti + çıkış */
.oturum-kutu {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  background: rgba(255,255,255,.14); border-radius: 18px; padding: 5px 7px 5px 14px;
}
.oturum-kutu button {
  background: rgba(255,255,255,.22); color: #fff; border: none; border-radius: 13px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; font-weight: 600;
}
.oturum-kutu .guncelle-btn { background: #fff; color: var(--kirmizi); white-space: nowrap; }
#oturumAd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Ayarlar > Mesajlar (mail / WhatsApp şablonları) */
textarea {
  font-size: 16px; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff;
  color: var(--metin); width: 100%; font-family: inherit; line-height: 1.45; resize: vertical;
}
textarea:focus { outline: 2px solid var(--ana); border-color: var(--ana); }
.sb-kart label { margin-bottom: 10px; }
.sb-alanlar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--soluk); margin: 2px 0 14px; }
.sb-alan {
  border: 1px solid #ecc9cd; background: #fbeff0; color: var(--ana-koyu); border-radius: 14px;
  padding: 5px 10px; font-size: 13px; font-family: Consolas, monospace; cursor: pointer;
}
.sb-oniz { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: start; }
.sb-oniz-baslik { grid-column: 1 / -1; font-weight: 700; color: var(--soluk); font-size: 13px; }
.sb-mail { border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px; background: #fafafa; font-size: 14px;
           display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.sb-govde { white-space: pre-wrap; border-top: 1px dashed var(--cizgi); padding-top: 8px; margin-top: 2px; }
.sb-wa { background: #dcf8c6; border-radius: 12px 12px 2px 12px; padding: 8px 12px 10px; font-size: 14px; white-space: pre-wrap;
         box-shadow: 0 1px 1px rgba(0,0,0,.12); overflow-wrap: anywhere; }
.sb-wa small { display: block; color: #3b7a3b; font-weight: 700; margin-bottom: 4px; }
.sb-hata { background: #fdecea; color: var(--kirmizi); border-radius: 3px; }
@media (max-width: 700px) { .sb-oniz { grid-template-columns: 1fr; } }

/* Fire fişi */
.mini-btn.fire-btn { color: var(--kirmizi); border-color: #f0c2bd; }
.fr-asim { color: var(--kirmizi); font-weight: 700; }

/* Ayarlar: alım / satış cari tipi seçimi */
.cari-tipleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; margin-bottom: 6px; }
.cari-tipleri label.onay { min-width: 0; padding: 5px 0; }
.cari-tipleri input[type=checkbox] { width: 20px; height: 20px; flex: none; }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .satir-grup { flex-direction: column; align-items: stretch; }
  label { min-width: 0; }
  .durum-ozet { display: none; }
  .sekme { padding: 10px 12px; font-size: 14px; }
  .logo { font-size: 17px; }
  .logo span { display: none; }            /* alt başlık gizlenir: başlık + kullanıcı tek satıra sığar */
  .logo-img { width: 36px; height: 36px; }
  .giris-kutu { padding: 22px 20px 24px; gap: 13px; }
  .giris-logo-img { width: 88px; height: 88px; }
  .ust-satir { flex-wrap: nowrap; }
  .oturum-kutu { padding: 4px 6px 4px 10px; font-size: 12px; }
  .guncelle-yazi { display: none; }         /* dar ekranda yalnız 🔄 simgesi */
  .oturum-kutu .guncelle-btn { padding: 5px 9px; font-size: 14px; }
  #oturumAd { max-width: 92px; }
}

/* Oturumun ekran yetkileri gelene kadar sekmeler ve sayfa gösterilmez
   (satış yetkilisi açılışta bir an bile Fiş Girişi'ni görmesin / dokunamasın) */
body.yetki-bekliyor .sekmeler, body.yetki-bekliyor main, body.yetki-bekliyor .durum-ozet { visibility: hidden; }

/* ---------- Cari Sorgulama (hesap ekstresi) ---------- */
.crs-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.crs-cari { font-size: 18px; font-weight: 800; color: var(--ana-koyu); }
.crs-islemler { display: flex; gap: 8px; flex-wrap: wrap; }
.crs-mail { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; padding: 12px; border-radius: 10px; background: #f6f4f1; }
.crs-mail .genis { flex: 1; min-width: 220px; }
.crs-ozet b { font-size: 16px; }
.crs-tablo-sargi { overflow-x: auto; }
.crs-tablo td, .crs-tablo th { white-space: nowrap; }
.crs-tablo tbody tr { cursor: default; }   /* salt okunur: satırlar tıklanmaz */
.crs-tablo td:nth-child(4) { white-space: normal; min-width: 180px; }
.crs-tablo .crs-devir td { font-style: italic; background: #f6f4f1; }
.crs-tablo .crs-toplam td { font-weight: 800; border-top: 2px solid var(--cizgi); background: #f6f4f1; }
.crs-bakiye.borclu { color: var(--kirmizi); }
.crs-bakiye.alacakli { color: var(--yesil); }
.crs-yazdir-baslik { display: none; }
.btn.crs-wa { border-color: #1da851; color: #128c3e; }
.btn.birincil.crs-wa { background: #1da851; border-color: #128c3e; color: #fff; }
.crs-telefonlar { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.crs-telefonlar:empty { display: none; }

/* Yazdır: yalnız ekstre basılır (menü, form, butonlar ve diğer sayfalar gizli) */
@media print {
  @page { size: A4; margin: 12mm; }
  body.yazdir-cari { background: #fff !important; }
  body.yazdir-cari header.ust, body.yazdir-cari nav.sekmeler, body.yazdir-cari footer.alt-bilgi,
  body.yazdir-cari #baglantiBandi, body.yazdir-cari #bildirim, body.yazdir-cari .crs-form,
  body.yazdir-cari .crs-ust, body.yazdir-cari .crs-mail, body.yazdir-cari #crsDurum,
  body.yazdir-cari .sayfa:not(#sayfa-cari), body.yazdir-cari .modal-arka { display: none !important; }
  body.yazdir-cari main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  body.yazdir-cari #crsSonuc { box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; }
  body.yazdir-cari .crs-yazdir-baslik { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #999; }
  body.yazdir-cari .crs-yazdir-baslik img { width: 48px; height: 48px; }
  body.yazdir-cari .crs-yazdir-baslik b { display: block; font-size: 18px; }
  body.yazdir-cari .crs-yazdir-baslik span { font-size: 11px; color: #444; }
  body.yazdir-cari .crs-ozet { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  body.yazdir-cari .crs-ozet div { border: 1px solid #ccc; background: #fff !important; padding: 4px 8px; }
  body.yazdir-cari .crs-ozet b { font-size: 12px; }
  body.yazdir-cari .crs-tablo-sargi { overflow: visible !important; }
  body.yazdir-cari .crs-tablo { font-size: 9.5pt; width: 100%; }
  body.yazdir-cari .crs-tablo th, body.yazdir-cari .crs-tablo td { padding: 3px 5px !important; }
  body.yazdir-cari .crs-tablo thead { display: table-header-group; }
  body.yazdir-cari .crs-tablo tr { page-break-inside: avoid; }
  body.yazdir-cari .crs-bakiye.borclu, body.yazdir-cari .crs-bakiye.alacakli { color: #000; }
  body.yazdir-cari, body.yazdir-cari * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Cari Sorgulama: detaylı görünüm + hareket detayı ---------- */
.crs-tablo tbody tr[data-no] { cursor: pointer; }
.crs-tablo tbody tr.crs-hareket:hover td { background: #faf6f2; }
.crs-tablo .crs-detay td { padding-top: 2px; padding-bottom: 6px; font-size: 13px; color: var(--soluk); border-bottom: none; }
.crs-tablo .crs-detay td:nth-child(2) { padding-left: 18px; white-space: normal; }
.crs-mdl-alanlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.crs-mdl-alanlar div { background: #f6f4f1; border-radius: 8px; padding: 8px 10px; min-width: 0; }
.crs-mdl-alanlar small, .crs-mdl-not small { display: block; color: var(--soluk); font-size: 12px; }
.crs-mdl-alanlar b { font-size: 15px; overflow-wrap: anywhere; }
.crs-mdl-not { background: #f6f4f1; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- Teslim tutanağı + dokunmatik imza ---------- */
.tsl-modal { max-width: 720px; }
.tsl-firma { margin-bottom: 8px; } .tsl-firma small, .tsl-odeme small { display: block; color: var(--soluk); font-size: 12px; }
.tsl-firma b { font-size: 17px; }
.tsl-odeme { margin: 10px 0; padding: 8px 10px; border-radius: 8px; background: #f6f4f1; font-size: 15px; }
.tsl-beyan { margin: 12px 0; font-style: italic; color: var(--ana-koyu); }
.tsl-imza-alan { min-height: 150px; border: 2px dashed var(--cizgi); border-radius: 12px; background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--soluk); padding: 8px; }
.tsl-imza-alan:active, .tsl-imza-alan:focus { border-color: var(--ana); outline: none; }
.tsl-imza-alan img { max-width: 100%; max-height: 180px; }
.tsl-kayit { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: #fbfaf8; display: grid; gap: 6px; }
.tsl-kayit-imza img { max-height: 120px; max-width: 100%; border: 1px solid var(--cizgi); border-radius: 6px; background: #fff; }
.imza-arka { position: fixed; inset: 0; z-index: 190;   /* pencerelerin üstünde, bildirimlerin (200) altında */ background: #fff; display: flex; flex-direction: column;
  height: var(--vv-h, 100dvh); }
.imza-ust { padding: 12px 16px; background: var(--ana); color: #fff; font-size: 18px; display: flex; gap: 6px; align-items: center; }
#imzaTuval { flex: 1; width: 100%; min-height: 0; touch-action: none; display: block; background: #fff;
  border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); cursor: crosshair; }
.imza-alt { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; flex-wrap: wrap; }
.imza-alt .btn { min-width: 110px; }
body.imza-acik { overflow: hidden; }

/* ---------- paylaşım (teslim tutanağı: mail / WhatsApp / PDF) ---------- */
.tsl-dugmeler { flex-wrap: wrap; }
.tsl-kayit-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.pyl-bilgi { margin-bottom: 10px; padding: 8px 10px; border-radius: 8px; background: #f6f4f1; }
.pyl-bolum { padding: 10px; border-radius: 12px; border: 2px solid transparent; margin-bottom: 8px; }
.pyl-bolum.vurgu { border-color: var(--ana); background: #fdf6f6; }