/* =====================================================================
   WARUNGKU — gaya antarmuka
   Dirancang untuk dipakai satu tangan sambil melayani pembeli:
   target sentuh besar, kontras tinggi, angka mudah dibaca sambil berdiri.
   ===================================================================== */

:root{
  --tinta:#14202B;
  --tinta-2:#24323F;
  --tinta-3:#3A4A59;
  --terpal:#FFC93C;      /* kuning terpal warung — warna aksen utama */
  --terpal-tua:#E0A800;
  --daun:#17805A;
  --daun-muda:#E4F3EC;
  --cabai:#D63B3B;
  --cabai-muda:#FBE9E9;
  --kertas:#F1F0EB;
  --putih:#FFFFFF;
  --garis:#DEDACF;
  --abu:#6E7681;

  --r:14px;
  --r-kecil:10px;
  --bayang:0 1px 0 rgba(20,32,43,.06), 0 6px 18px -10px rgba(20,32,43,.35);
  --sentuh:52px;

  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono","SF Mono","DejaVu Sans Mono","Courier New",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--kertas);
  color:var(--tinta);
  font-size:15px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--terpal);outline-offset:2px;border-radius:4px}

/* ---------- Tipografi ---------- */
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.15}
h1{font-size:1.5rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
.eyebrow{
  font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--abu);
}
.uang{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.redup{color:var(--abu)}

/* ---------- Kerangka halaman ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--tinta);color:#fff;
  border-bottom:3px solid var(--terpal);
}
.topbar-isi{
  max-width:1180px;margin:auto;padding:10px 16px;
  display:flex;align-items:center;gap:12px;
}
.merek{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em}
.merek .titik{
  width:11px;height:11px;background:var(--terpal);
  border-radius:2px;transform:rotate(45deg);flex:none;
}
.topbar .siapa{margin-left:auto;text-align:right;font-size:.78rem;line-height:1.25;color:#B8C2CC}
.topbar .siapa b{display:block;color:#fff;font-size:.86rem}
.keluar{
  color:#B8C2CC;border:1px solid #3A4A59;border-radius:8px;
  padding:7px 11px;font-size:.78rem;font-weight:700;
}
.keluar:hover{background:#3A4A59;color:#fff}

.wadah{max-width:1180px;margin:auto;padding:18px 16px 96px}

/* ---------- Navigasi ---------- */
.nav-atas{display:none;gap:4px;overflow-x:auto}
.nav-atas a{
  padding:8px 13px;border-radius:9px;font-size:.85rem;font-weight:700;
  color:#B8C2CC;white-space:nowrap;
}
.nav-atas a:hover{background:var(--tinta-2);color:#fff}
.nav-atas a.aktif{background:var(--terpal);color:var(--tinta)}

.nav-bawah{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--tinta);display:flex;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  border-top:1px solid #24323F;
}
.nav-bawah a{
  flex:1;text-align:center;padding:7px 2px;border-radius:10px;
  color:#93A1AD;font-size:.62rem;font-weight:700;letter-spacing:.02em;
}
.nav-bawah a svg{display:block;margin:0 auto 3px;width:21px;height:21px}
.nav-bawah a.aktif{color:var(--terpal)}

@media(min-width:860px){
  .nav-atas{display:flex}
  .nav-bawah{display:none}
  .wadah{padding-bottom:32px}
}

/* ---------- Kartu ---------- */
.kartu{
  background:var(--putih);border:1px solid var(--garis);
  border-radius:var(--r);box-shadow:var(--bayang);
}
.kartu-isi{padding:16px}
.kartu-kepala{
  padding:13px 16px;border-bottom:1px solid var(--garis);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.kartu-kepala h2{margin-right:auto}

.baris{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rentang{margin-left:auto}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

/* ---------- Kartu angka ringkas ---------- */
.angka-kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);
  padding:15px 16px;position:relative;overflow:hidden;
}
.angka-kartu::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--terpal);
}
.angka-kartu.hijau::before{background:var(--daun)}
.angka-kartu.merah::before{background:var(--cabai)}
.angka-kartu .nilai{
  font-size:1.7rem;font-weight:800;letter-spacing:-.03em;margin-top:5px;
  font-variant-numeric:tabular-nums;
}
.angka-kartu .kaki{font-size:.76rem;color:var(--abu);margin-top:3px}

/* ---------- Tombol ---------- */
.tombol{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:0 16px;border-radius:var(--r-kecil);
  border:1px solid var(--garis);background:var(--putih);
  font-weight:700;font-size:.9rem;cursor:pointer;
  transition:transform .06s ease, background .12s ease;
}
.tombol:active{transform:translateY(1px)}
.tombol:hover{background:#FAF9F6}
.tombol-utama{background:var(--terpal);border-color:var(--terpal-tua);color:var(--tinta)}
.tombol-utama:hover{background:#FFD65E}
.tombol-gelap{background:var(--tinta);border-color:var(--tinta);color:#fff}
.tombol-gelap:hover{background:var(--tinta-2)}
.tombol-hijau{background:var(--daun);border-color:var(--daun);color:#fff}
.tombol-hijau:hover{background:#1B9468}
.tombol-bahaya{background:var(--cabai-muda);border-color:#EFC9C9;color:var(--cabai)}
.tombol-kecil{min-height:36px;padding:0 11px;font-size:.8rem}
.tombol-lebar{width:100%}
.tombol-besar{min-height:58px;font-size:1.02rem}
.tombol:disabled{opacity:.45;cursor:not-allowed}

/* ---------- Formulir ---------- */
.medan{display:block;margin-bottom:13px}
.medan > span{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--abu);margin-bottom:5px;
}
.isian{
  width:100%;min-height:var(--sentuh);padding:10px 13px;
  border:1.5px solid var(--garis);border-radius:var(--r-kecil);
  background:var(--putih);
}
.isian:focus{border-color:var(--tinta);outline:none;box-shadow:0 0 0 3px rgba(255,201,60,.35)}
textarea.isian{min-height:78px;resize:vertical}
.isian.uang-isian{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Tabel ---------- */
.gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}
table.data th{
  text-align:left;padding:10px 12px;background:#FAF9F6;
  border-bottom:1.5px solid var(--garis);
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--abu);
  white-space:nowrap;
}
table.data td{padding:11px 12px;border-bottom:1px solid #EDEBE4;vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:#FCFBF8}
.ka{text-align:right}
.tg{text-align:center}

/* ---------- Label kecil ---------- */
.label{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;
  background:#EDEBE4;color:var(--tinta-3);white-space:nowrap;
}
.label.hijau{background:var(--daun-muda);color:var(--daun)}
.label.merah{background:var(--cabai-muda);color:var(--cabai)}
.label.kuning{background:#FFF3D0;color:#8A6800}

/* ---------- Pemberitahuan ---------- */
.notif{
  padding:12px 15px;border-radius:var(--r-kecil);margin-bottom:15px;
  font-size:.88rem;font-weight:600;border:1px solid transparent;
}
.notif.sukses{background:var(--daun-muda);border-color:#BFE3D3;color:#0E5E42}
.notif.gagal{background:var(--cabai-muda);border-color:#EFC9C9;color:#9A2222}
.notif.info{background:#FFF3D0;border-color:#F2DFA6;color:#8A6800}

.kosong{text-align:center;padding:44px 20px;color:var(--abu)}
.kosong b{display:block;color:var(--tinta);font-size:1rem;margin-bottom:5px}

/* =====================================================================
   KASIR — layar utama
   ===================================================================== */
.kasir{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:960px){
  .kasir{grid-template-columns:1fr 372px;align-items:start}
  .kasir .keranjang-kolom{position:sticky;top:78px}
}

.cari-bar{display:flex;gap:8px;margin-bottom:12px}
.cari-bar .isian{font-size:1rem}

/* Ubin produk — meniru kartu harga yang digantung di gerai */
.ubin-produk{
  display:grid;gap:9px;
  grid-template-columns:repeat(auto-fill,minmax(136px,1fr));
}
.ubin{
  position:relative;text-align:left;cursor:pointer;
  background:var(--putih);border:1.5px solid var(--garis);
  border-radius:var(--r-kecil);padding:11px 11px 10px;
  min-height:96px;display:flex;flex-direction:column;
  transition:border-color .12s, transform .06s;
}
.ubin:hover{border-color:var(--tinta)}
.ubin:active{transform:scale(.975)}
.ubin .pita{
  position:absolute;left:0;top:11px;width:4px;height:20px;
  border-radius:0 3px 3px 0;background:var(--terpal);
}
.ubin .nm{
  font-weight:700;font-size:.85rem;line-height:1.3;padding-left:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ubin .hg{
  margin-top:auto;padding-left:8px;font-weight:800;font-size:1.02rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.ubin .sisa{padding-left:8px;font-size:.7rem;color:var(--abu);margin-top:1px}
.ubin.habis{opacity:.45;cursor:not-allowed}
.ubin.habis .sisa{color:var(--cabai);font-weight:700}

/* ---------- Panel struk: kertas thermal sungguhan ---------- */
.struk-panel{
  background:var(--putih);
  border:1px solid var(--garis);
  border-radius:var(--r) var(--r) 0 0;
  box-shadow:var(--bayang);
  overflow:hidden;
}
.struk-kepala{
  background:var(--tinta);color:#fff;padding:11px 15px;
  display:flex;align-items:center;gap:9px;
}
.struk-kepala .eyebrow{color:var(--terpal)}
.struk-kepala .jml{
  margin-left:auto;background:var(--terpal);color:var(--tinta);
  border-radius:999px;padding:2px 10px;font-weight:800;font-size:.78rem;
}
.struk-kertas{
  font-family:var(--mono);font-size:.8rem;
  padding:13px 15px;max-height:44vh;overflow-y:auto;
  background:
    repeating-linear-gradient(0deg,transparent 0 27px,#F6F5F1 27px 28px);
}
.item{padding:6px 0;border-bottom:1px dashed #D9D5CA}
.item:last-child{border-bottom:0}
.item-atas{display:flex;gap:8px;align-items:baseline}
.item-nm{font-weight:700;flex:1;font-family:var(--sans);font-size:.86rem}
.item-sub{font-weight:800;font-variant-numeric:tabular-nums}
.item-bawah{display:flex;align-items:center;gap:7px;margin-top:5px;color:var(--abu);font-size:.74rem}
.stepper{display:flex;align-items:center;gap:0;margin-left:auto}
.stepper button{
  width:32px;height:32px;border:1px solid var(--garis);background:var(--putih);
  font-weight:800;font-size:1rem;cursor:pointer;line-height:1;
}
.stepper button:first-child{border-radius:8px 0 0 8px}
.stepper button:last-child{border-radius:0 8px 8px 0}
.stepper input{
  width:46px;height:32px;text-align:center;border:1px solid var(--garis);
  border-left:0;border-right:0;font-weight:800;font-variant-numeric:tabular-nums;
}
.buang{
  border:0;background:none;color:var(--cabai);cursor:pointer;
  font-size:.74rem;font-weight:700;padding:4px 6px;
}

/* Tepi sobek kertas struk */
.sobek{
  height:11px;
  background:var(--putih);
  -webkit-mask:repeating-linear-gradient(135deg,#000 0 7px,transparent 7px 14px);
  mask:repeating-linear-gradient(135deg,#000 0 7px,transparent 7px 14px);
  filter:drop-shadow(0 1px 0 var(--garis));
}

.total-kotak{padding:13px 15px;border-top:2px solid var(--tinta)}
.total-baris{display:flex;justify-content:space-between;font-size:.85rem;padding:3px 0}
.total-baris.besar{
  font-size:1.45rem;font-weight:800;letter-spacing:-.03em;
  padding-top:9px;margin-top:7px;border-top:1px dashed var(--garis);
}
.total-baris .uang{font-variant-numeric:tabular-nums}
.kembali-kotak{
  background:var(--daun-muda);border:1px solid #BFE3D3;color:#0E5E42;
  border-radius:var(--r-kecil);padding:9px 12px;margin-top:10px;
  display:flex;justify-content:space-between;font-weight:800;
}

/* Tombol uang pas */
.uang-cepat{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.uang-cepat button{
  flex:1;min-width:74px;min-height:38px;border:1px solid var(--garis);
  background:var(--putih);border-radius:9px;font-weight:700;font-size:.8rem;cursor:pointer;
}
.uang-cepat button:hover{background:var(--terpal);border-color:var(--terpal-tua)}

/* ---------- Status printer ---------- */
.printer-bar{
  display:flex;align-items:center;gap:9px;padding:9px 15px;
  background:#FAF9F6;border-top:1px solid var(--garis);font-size:.78rem;
}
.lampu{width:9px;height:9px;border-radius:50%;background:var(--abu);flex:none}
.lampu.nyala{background:var(--daun);box-shadow:0 0 0 3px rgba(23,128,90,.18)}
.lampu.mati{background:var(--cabai)}

/* ---------- Tirai / modal ---------- */
.tirai{
  position:fixed;inset:0;z-index:100;background:rgba(20,32,43,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
}
.tirai[hidden]{display:none}
.lembar{
  background:var(--putih);width:100%;max-width:460px;
  border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:92vh;overflow-y:auto;
  animation:naik .2s ease-out;
}
@keyframes naik{from{transform:translateY(22px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:640px){
  .tirai{align-items:center;padding:20px}
  .lembar{border-radius:var(--r);padding-bottom:18px}
  @keyframes naik{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
}

/* ---------- Struk cetak (versi kertas / PDF) ---------- */
.struk-cetak{
  width:58mm;margin:0 auto;padding:4mm 3mm;
  font-family:var(--mono);font-size:11px;line-height:1.42;color:#000;background:#fff;
}
.struk-cetak.k80{width:80mm}
.struk-cetak .tengah{text-align:center}
.struk-cetak .toko{font-size:14px;font-weight:800;letter-spacing:.06em}
.struk-cetak hr{border:0;border-top:1px dashed #000;margin:5px 0}
.struk-cetak table{width:100%;border-collapse:collapse;font-size:11px}
.struk-cetak td{padding:1px 0;vertical-align:top}
.struk-cetak .tebal{font-weight:800}

@media print{
  .tanpa-cetak{display:none !important}
  body{background:#fff}
  .wadah{padding:0;max-width:none}
  @page{margin:0}
}

/* ---------- Halaman masuk ---------- */
.masuk-layar{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:22px;background:var(--tinta);
}
.masuk-kotak{
  width:100%;max-width:372px;background:var(--putih);
  border-radius:var(--r);padding:26px;box-shadow:0 24px 60px -22px rgba(0,0,0,.6);
}
.masuk-kotak .merek{color:var(--tinta);font-size:1.35rem;margin-bottom:3px}