/* styles.css — Tokiva Grosir */

:root {
  --hijau: #0f6b4c;
  --hijau-tua: #0a4d37;
  --hijau-muda: #e6f4ee;
  --merah: #b3261e;
  --abu: #6b7280;
  --abu-muda: #f2f3f5;
  --garis: #e2e5e9;
  --teks: #1c1f23;
  --putih: #ffffff;
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--teks);
  background: var(--abu-muda);
}

img { max-width: 100%; display: block; height: auto; }

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0 0 12px; }
p { margin: 0 0 8px; line-height: 1.5; }

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; font-size: 16px; }

.minus { color: var(--merah); }

/* ---------- Tombol ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: none;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-utama { background: var(--hijau); color: var(--putih); }
.btn-utama:hover { background: var(--hijau-tua); }
.btn-alt { background: var(--hijau-muda); color: var(--hijau-tua); }
.btn-teks { background: transparent; color: var(--abu); }
.btn-bahaya { background: #fbe9e7; color: var(--merah); }
.btn-lebar { width: 100%; }
.btn-kecil { min-height: 36px; padding: 6px 12px; font-size: 13px; }

.btn-bulat {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%; border: 1px solid var(--garis);
  background: var(--putih); font-size: 18px; line-height: 1;
}

.btn-teks-hapus {
  background: none; border: none; color: var(--merah); font-size: 13px; padding: 4px;
}

/* ---------- Layar aktivasi ---------- */

.layar-aktivasi {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--hijau-tua), var(--hijau));
  padding: 24px 16px;
}

.ak-kotak {
  background: var(--putih);
  border-radius: 16px;
  padding: 28px 22px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.ak-logo { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 16px; }
.ak-tagline { color: var(--abu); margin-bottom: 20px; }

.ak-form { text-align: left; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ak-form label { font-size: 13px; font-weight: 600; color: var(--abu); }
.ak-form input {
  padding: 12px; border: 1px solid var(--garis); border-radius: var(--radius);
  text-transform: uppercase; letter-spacing: 0.5px;
}

.ak-pesan { min-height: 18px; font-size: 13px; }
.ak-pesan-gagal { color: var(--merah); }

.ak-pemisah { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--abu); font-size: 13px; }
.ak-pemisah::before, .ak-pemisah::after { content: ""; flex: 1; height: 1px; background: var(--garis); }

/* ---------- Header & navigasi ---------- */

.atas {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--hijau); color: var(--putih);
  padding: 12px 16px;
}
.atas-judul { font-weight: 700; font-size: 17px; }
.atas-pengaturan {
  background: none; border: none; color: var(--putih); font-size: 20px;
  min-width: 44px; min-height: 44px;
}

.konten { padding: 16px; padding-bottom: 90px; max-width: 640px; margin: 0 auto; }

.nav-bawah {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; background: var(--putih); border-top: 1px solid var(--garis);
  padding: 4px 0 max(4px, env(safe-area-inset-bottom));
}
.nav-tombol {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; color: var(--abu);
  font-size: 11px; min-height: 52px; padding: 6px 0;
}
.nav-tombol span { display: block; }
.nav-aktif { color: var(--hijau); font-weight: 700; }

/* ---------- Banner ---------- */

.banner {
  background: #fff4e5; color: #7a4b00; border: 1px solid #ffdca0;
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 13px;
}

/* ---------- Penuntun beranda ---------- */

.penuntun {
  background: var(--hijau-muda); border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.penuntun ol { margin: 0; padding-left: 20px; }
.penuntun li { margin-bottom: 6px; }

/* ---------- Kartu ringkas (beranda & laporan) ---------- */

.br-ringkas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px;
}
.br-kartu {
  background: var(--putih); border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.br-kartu-label { font-size: 12px; color: var(--abu); }
.br-kartu-angka { font-size: 20px; font-weight: 700; }

.br-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.br-menu-tombol {
  background: var(--putih); border: none; border-radius: var(--radius);
  padding: 20px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; min-height: 90px;
}
.br-menu-ikon { font-size: 28px; }

/* ---------- Kasir ---------- */

.ks-cari-blok { position: relative; margin-bottom: 12px; }
#ks-cari {
  width: 100%; padding: 12px; border: 1px solid var(--garis); border-radius: var(--radius);
}
.ks-hasil {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius);
  max-height: 260px; overflow-y: auto; z-index: 4;
}
.ks-hasil-baris { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--garis); gap: 8px; }
.ks-hasil-baris:last-child { border-bottom: none; }
.ks-hasil-info { display: flex; flex-direction: column; min-width: 0; }
.ks-hasil-nama { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-hasil-stok { font-size: 12px; color: var(--abu); }
.ks-hasil-aksi { display: flex; gap: 6px; flex-shrink: 0; }

.ks-keranjang { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; min-height: 40px; }
.ks-kosong, .sk-kosong, .kb-kosong, .lp-kosong { color: var(--abu); font-size: 14px; padding: 10px 0; }

.ks-item {
  background: var(--putih); border-radius: var(--radius); padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ks-item-kiri { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ks-item-nama { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-item-ket { display: block; font-size: 12px; color: var(--abu); }
.ks-item-qty { display: flex; align-items: center; gap: 6px; }
.ks-item-kanan { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.ks-ringkas { background: var(--putih); border-radius: var(--radius); padding: 14px; }
.ks-ringkas-baris { display: flex; justify-content: space-between; font-size: 15px; padding: 6px 0; }
.ks-bayar-blok, .ks-kasbon-blok { margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.ks-bayar-blok label, .ks-kasbon-blok label { font-size: 13px; color: var(--abu); font-weight: 600; }
#ks-bayar, #ks-pelanggan-kasbon { padding: 10px; border: 1px solid var(--garis); border-radius: var(--radius); }
.ks-tombol-blok { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ks-tombol-blok .btn { flex: 1; }

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px;
}
.modal-isi { background: var(--putih); border-radius: 16px; padding: 20px; max-width: 380px; width: 100%; max-height: 85vh; overflow-y: auto; }
.ks-struk-pre {
  background: var(--abu-muda); padding: 12px; border-radius: 8px; font-size: 12px;
  white-space: pre-wrap; word-break: break-word;
}
.modal-tombol { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.modal-tombol .btn { flex: 1; }

/* ---------- Stok ---------- */

.sk-form { background: var(--putih); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.sk-form-judul { font-weight: 700; }
.sk-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--abu); font-weight: 600; }
.sk-form input { padding: 10px; border: 1px solid var(--garis); border-radius: var(--radius); }
.sk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-form fieldset { border: 1px solid var(--garis); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sk-form legend { font-size: 12px; color: var(--abu); padding: 0 4px; }
.sk-form-tombol { display: flex; gap: 8px; justify-content: flex-end; }

.sk-cari { width: 100%; padding: 10px 12px; border: 1px solid var(--garis); border-radius: var(--radius); margin-bottom: 10px; }
.sk-daftar { display: flex; flex-direction: column; gap: 8px; }
.sk-kartu { background: var(--putih); border-radius: var(--radius); padding: 12px; }
.sk-kartu-atas { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sk-kartu-nama { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-kartu-harga { display: flex; gap: 14px; font-size: 13px; color: var(--abu); margin-bottom: 8px; }
.sk-kartu-bawah { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sk-kartu-bawah > div { display: flex; gap: 6px; }

.lencana { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.lencana-menipis { background: #fdecea; color: var(--merah); }

/* ---------- Kasbon ---------- */

.kb-total-semua-blok { margin-bottom: 12px; }
.kb-tata-letak { display: flex; flex-direction: column; gap: 14px; }
.kb-form-pelanggan { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.kb-form-pelanggan input { flex: 1; min-width: 120px; padding: 10px; border: 1px solid var(--garis); border-radius: var(--radius); }
#kb-cari-pelanggan { width: 100%; padding: 10px; border: 1px solid var(--garis); border-radius: var(--radius); margin-bottom: 10px; }

.kb-daftar-pelanggan { display: flex; flex-direction: column; gap: 6px; }
.kb-baris {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 12px; width: 100%; text-align: left;
}
.kb-baris-aktif { border-color: var(--hijau); background: var(--hijau-muda); }
.kb-baris-nama { font-weight: 600; }
.kb-baris-jumlah { color: var(--abu); font-size: 13px; }
.kb-ada-utang { color: var(--merah); font-weight: 700; }

.kb-detail { background: var(--putih); border-radius: var(--radius); padding: 14px; min-height: 120px; }
.kb-sisa { font-weight: 700; margin-bottom: 10px; }
#kb-form-bayar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
#kb-form-bayar input { flex: 1; min-width: 100px; padding: 10px; border: 1px solid var(--garis); border-radius: var(--radius); }
.kb-riwayat { display: flex; flex-direction: column; gap: 6px; }
.kb-riwayat-baris { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--garis); }
.kb-riwayat-utang { color: var(--merah); }
.kb-riwayat-bayar { color: var(--hijau-tua); }

/* ---------- Laporan ---------- */

.lp-periode { width: 100%; padding: 10px; border: 1px solid var(--garis); border-radius: var(--radius); margin-bottom: 14px; }
.lp-daftar { background: var(--putih); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; }
.lp-terlaku-baris { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--garis); font-size: 14px; }
.lp-terlaku-baris:last-child { border-bottom: none; }

/* ---------- Pengaturan ---------- */

.pg-info-lisensi { background: var(--putih); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pg-info-lisensi p { margin: 0; font-size: 14px; }
.pg-info-lisensi .btn { margin-top: 8px; }

.pg-form-toko { background: var(--putih); border-radius: var(--radius); padding: 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.pg-form-toko label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--abu); font-weight: 600; }
.pg-form-toko input { padding: 10px; border: 1px solid var(--garis); border-radius: var(--radius); }

.pg-cadangan { background: var(--putih); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pg-label-impor { display: flex; align-items: center; justify-content: center; }

@media (min-width: 700px) {
  .kb-tata-letak { flex-direction: row; }
  .kb-kolom-kiri { flex: 1; min-width: 260px; }
  .kb-detail { flex: 1.4; }
}

/* ==========================================================
   TAMPILAN v3 — splash & aktivasi berfoto, Beranda kartu lembut,
   ikon berwarna, navigasi ikon, dan pilihan tema (Atur > Tampilan).
   Ditaruh sesudah gaya lama supaya menimpanya; id dan kelas yang
   dipakai JavaScript/uji tetap sama. Warna tema hanya mengganti
   variabel; atribut data-* dipasang di <html> oleh
   TI.app.terapkanTema(). Bawaan = hijau terang.
   Kontras (WCAG AA): teks putih di atas --hijau >= 5,1:1 untuk
   semua warna; --utama-teks di atas kartu gelap >= 6,9:1.
   ========================================================== */
:root{
  --latar:#F3F6F5;
  --kartu:#FFFFFF;
  --netral:#EDF1EF;
  --lembut:#5B6763;
  --judul:#0a4d37;
  --hijau-gelap:#073326;
  --utama-rgb:15,107,76;
  --gelap-rgb:7,51,38;
  --utama-teks:var(--hijau);
  --radius:16px;
  --radius-lg:24px;
  --bayang:0 2px 6px rgba(7,51,38,.05),0 8px 24px rgba(7,51,38,.07);
}
html[data-warna="biru"]{--hijau:#1F5FBF;--hijau-tua:#184C99;--hijau-gelap:#0F2A5C;--hijau-muda:#E6EEFB;--judul:#184C99;--utama-rgb:31,95,191;--gelap-rgb:12,31,68}
html[data-warna="ungu"]{--hijau:#6B3FD1;--hijau-tua:#5631AE;--hijau-gelap:#2E1A66;--hijau-muda:#EFE9FC;--judul:#5631AE;--utama-rgb:107,63,209;--gelap-rgb:34,19,76}
html[data-warna="marun"]{--hijau:#A62B48;--hijau-tua:#86213A;--hijau-gelap:#4A1022;--hijau-muda:#FBE8EE;--judul:#86213A;--utama-rgb:166,43,72;--gelap-rgb:56,12,26}
html[data-warna="oranye"]{--hijau:#B4500A;--hijau-tua:#8F3F07;--hijau-gelap:#4A2305;--hijau-muda:#FDEFE3;--judul:#8F3F07;--utama-rgb:180,80,10;--gelap-rgb:56,26,4}
html[data-warna="kopi"]{--hijau:#7A4E2D;--hijau-tua:#613D22;--hijau-gelap:#3A2414;--hijau-muda:#F5ECE4;--judul:#613D22;--utama-rgb:122,78,45;--gelap-rgb:44,27,15}

body{background:var(--latar)}
h2{color:var(--judul)}
.konten{padding:14px 16px calc(96px + env(safe-area-inset-bottom))}

/* ---------- Tombol ---------- */
.btn{border-radius:999px}
.btn-utama{background:linear-gradient(135deg,var(--hijau),var(--hijau-tua));box-shadow:0 6px 16px rgba(var(--utama-rgb),.25)}
.btn-utama:hover{background:var(--hijau-tua)}
.btn-utama:disabled{background:#B9C8C4;box-shadow:none}
.btn-alt{background:var(--hijau-muda);color:var(--hijau-tua)}
.btn-garis{background:var(--kartu);color:var(--hijau-tua);border:2px solid var(--garis)}
.btn-besar{min-height:52px;font-size:16px}
.btn-teks{color:var(--lembut)}

/* ---------- Splash ---------- */
.splash{
  position:fixed;inset:0;z-index:10000;background:#06291F;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;transition:opacity .3s ease;
}
.splash.pudar{opacity:0;pointer-events:none}
.splash-foto{position:absolute;left:0;right:0;top:0;width:100%;height:68%;max-width:none;object-fit:cover;object-position:center 22%}
.splash::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,41,31,0) 0%,rgba(6,41,31,0) 42%,rgba(6,41,31,.86) 60%,#06291F 68%,#06291F 100%);
}
.splash-isi{position:relative;z-index:1;padding:28px 26px calc(34px + env(safe-area-inset-bottom));max-width:460px;width:100%;margin:0 auto;color:#fff;text-align:center}
.splash-logo{width:64px;height:64px;margin:0 auto 10px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.splash-logo img{width:52px;height:52px;border-radius:12px}
.splash-merek{margin:0;font-size:2.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#fff}
.splash-merek span{color:#FFC94D}
.splash-slogan{margin:6px 0;font-size:1.1rem;font-weight:700;color:#fff}
.splash-sub{margin:0 auto 22px;font-size:.92rem;line-height:1.5;color:#D3E6DE;max-width:330px}
.splash .btn-utama{background:linear-gradient(135deg,#14855F,#0f6b4c);box-shadow:0 10px 26px rgba(15,107,76,.45)}
.splash-muat{width:120px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);margin:4px auto 0;overflow:hidden}
.splash-muat span{display:block;height:100%;width:40%;border-radius:99px;background:#FFC94D;animation:muat 1.1s ease-in-out infinite}
@keyframes muat{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* ---------- Aktivasi ---------- */
.layar-aktivasi{display:block;padding:0;background:var(--latar);min-height:100vh}
.aktivasi-foto{position:relative;width:100%;height:38vh;min-height:210px;max-height:340px;overflow:hidden}
.aktivasi-foto img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 18%}
.aktivasi-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,41,31,0) 55%,rgba(6,41,31,.35) 100%)}
.ak-kotak{
  position:relative;margin:-34px auto 0;border-radius:28px 28px 0 0;max-width:520px;text-align:left;
  padding:26px 22px calc(28px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(7,51,38,.10);background:var(--kartu);
}
.ak-merek{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:800;font-size:1.15rem;color:var(--judul)}
.ak-merek b{color:#B8860B}
.ak-logo{width:44px;height:44px;margin:0;border-radius:12px}
.ak-kotak h1{font-size:1.6rem;color:var(--judul);margin-bottom:6px}
.ak-tagline{font-size:.93rem;color:var(--lembut)}
.ak-form input{border-radius:14px;background:var(--latar);border-color:transparent;min-height:48px}
.ak-form input:focus{background:var(--kartu);outline:none;box-shadow:0 0 0 4px rgba(var(--utama-rgb),.16)}
.ak-pemisah{margin:18px 0 12px}
#ak-demo{min-height:48px}
#ak-beli{margin-top:6px}
@media (min-width:560px){
  .aktivasi-foto{max-width:520px;margin:24px auto 0;border-radius:28px 28px 0 0}
  .ak-kotak{margin-top:0;border-radius:0 0 28px 28px;margin-bottom:30px}
}

/* ---------- Bar atas ---------- */
.atas{
  gap:10px;padding:10px 12px 10px 16px;background:rgba(255,255,255,.95);color:var(--judul);
  box-shadow:0 1px 0 var(--garis);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.atas-kiri{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.atas-ikon{width:34px;height:34px;border-radius:10px;flex:none}
.atas-teks{min-width:0;display:flex;flex-direction:column}
.atas-judul{font-size:16px;color:var(--judul);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atas-teks small{font-size:12px;color:var(--lembut)}
.atas-demo{flex:none;font-size:.66rem;font-weight:800;letter-spacing:.03em;padding:4px 9px;border-radius:999px;background:#FFE7A3;color:#5C4200}
.atas-pengaturan{flex:none;color:var(--judul);border-radius:14px;display:grid;place-items:center;background:var(--netral)}
.atas-pengaturan svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Beranda ---------- */
.banner-demo{border-radius:var(--radius)}
.sapa{margin:2px 2px 14px}
.sapa small{display:block;font-size:.88rem;color:var(--lembut)}
.sapa h2{margin:0;font-size:1.45rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.banner-beranda{
  position:relative;overflow:hidden;min-height:196px;border-radius:var(--radius-lg);margin-bottom:14px;
  background:var(--hijau-gelap);box-shadow:0 12px 30px rgba(var(--gelap-rgb),.25);
}
.banner-foto{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center}
.banner-beranda::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--gelap-rgb),.96) 0%,rgba(var(--gelap-rgb),.86) 42%,rgba(var(--gelap-rgb),.25) 78%,rgba(var(--gelap-rgb),.05) 100%);
}
.banner-isi{position:relative;z-index:1;padding:18px;max-width:72%;color:#fff;display:flex;flex-direction:column;align-items:flex-start}
.banner-label{font-size:.82rem;color:#D3E6DE}
.banner-isi strong{font-size:1.9rem;margin:2px 0 6px;color:#fff;white-space:nowrap}
.banner-mini{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.84rem;color:#E4EFEA}
.btn-banner{margin-top:14px;min-height:44px;padding:9px 20px;background:#fff;color:var(--hijau-gelap);font-size:.92rem;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.btn-banner:hover{background:var(--hijau-muda)}

.kartu-kasbon{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
  background:#FFF4DC;border:0;border-radius:var(--radius);padding:14px 16px;margin-bottom:6px;box-shadow:var(--bayang);color:#6B4700;
}
.kartu-kasbon svg{width:22px;height:22px;flex:none;fill:none;stroke:#8A5B00;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kk-kiri{display:flex;flex-direction:column;gap:2px;min-width:0}
.kk-label{font-size:.8rem;font-weight:700}
.kk-nilai{font-size:1.25rem;font-weight:800;color:#5A3B00}
.kk-meta{font-size:.78rem}

.judul-seksi{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 2px 10px}
.judul-seksi h3{margin:0;font-size:1.05rem;color:var(--teks)}
.tautan-seksi{background:none;border:0;color:var(--utama-teks);font-weight:700;font-size:.86rem;min-height:44px;padding:0 4px}

.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.menu-ikon{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 2px 10px;min-width:0;
  background:var(--kartu);border:0;border-radius:var(--radius);box-shadow:var(--bayang);min-height:92px;transition:transform .12s;
}
.menu-ikon:active{transform:scale(.96)}
.mi{width:46px;height:46px;border-radius:15px;display:grid;place-items:center}
.mi svg,.stat-ikon svg,.nav-tombol svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mi svg{width:24px;height:24px}
.mi-label{font-size:.74rem;font-weight:700;color:var(--teks);line-height:1.2;text-align:center}
.mi-kasir{background:#E3F4EF;color:#0F7A64}
.mi-stok{background:#E8EEFF;color:#3355CC}
.mi-kasbon{background:#FDE8EC;color:#C0264A}
.mi-laporan{background:#EFE7FF;color:#6B3FD1}
.mi-tambah{background:#FFF1DE;color:#B45F06}
.mi-menipis{background:#FFF4D6;color:#8A5B00}
.mi-backup{background:#E1F3FB;color:#0B6E99}
.mi-atur{background:#EEF1F3;color:#46545A}

.grid-stat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{
  min-width:0;background:var(--kartu);border-radius:var(--radius);padding:14px;box-shadow:var(--bayang);
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;
}
.stat-ikon{grid-row:span 2;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.stat-ikon svg{width:20px;height:20px}
.stat small{font-size:.72rem;font-weight:700;color:var(--lembut);overflow-wrap:anywhere}
.stat b{font-size:1.1rem;color:var(--teks)}
.si-stok{background:#E8EEFF;color:#3355CC}
.si-menipis{background:#FDE8EC;color:#C0264A}
.si-pelanggan{background:#FFF1DE;color:#B45F06}
.si-struk{background:#EFE7FF;color:#6B3FD1}

.br-daftar{display:flex;flex-direction:column;gap:8px}
.br-kosong{color:var(--lembut);font-size:14px;background:var(--kartu);border-radius:var(--radius);padding:14px}
.br-trx{display:flex;align-items:center;gap:12px;background:var(--kartu);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--bayang)}
.br-trx-ikon{width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;font-weight:800;font-size:.8rem;background:var(--hijau-muda);color:var(--utama-teks)}
.br-trx-ikon.kasbon{background:#FDE8EC;color:#C0264A}
.br-trx-kiri{flex:1;min-width:0;display:flex;flex-direction:column}
.br-trx-kiri b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-trx-kiri small{font-size:.78rem;color:var(--lembut)}
.br-trx-nilai{font-weight:800;white-space:nowrap}

.kaki-pembuat{text-align:center;color:var(--lembut);font-size:12px;margin:26px 0 0}

/* ---------- Kartu layar lain ---------- */
.br-kartu,.ks-item,.ks-ringkas,.sk-form,.sk-kartu,.kb-detail,.lp-daftar,.pg-info-lisensi,.pg-form-toko,.pg-cadangan,.pg-tampilan,.penuntun{border-radius:var(--radius);box-shadow:var(--bayang)}
.kb-baris{border-radius:var(--radius)}
#ks-cari,.sk-cari,#kb-cari-pelanggan,.lp-periode{border-radius:14px;background:var(--kartu);min-height:46px}
.modal-isi{border-radius:24px}

/* ---------- Navigasi bawah ---------- */
.nav-bawah{border-top:0;border-radius:22px 22px 0 0;box-shadow:0 -6px 24px rgba(var(--gelap-rgb),.10);padding-left:6px;padding-right:6px}
.nav-tombol{gap:4px;font-size:11px;min-height:58px}
.nav-tombol svg{width:22px;height:22px;box-sizing:content-box;padding:0}
.nav-aktif{color:var(--utama-teks)}
.nav-aktif svg{background:var(--hijau-muda);border-radius:12px;padding:5px 14px;margin:-5px 0}

/* ---------- Pengaturan > Tampilan ---------- */
.pg-tampilan{background:var(--kartu);padding:14px;margin-bottom:16px}
.pg-ket{font-size:13px;color:var(--lembut)}
.tema-grup{margin-bottom:14px}
.tema-label{display:block;font-size:.83rem;font-weight:700;color:var(--judul);margin-bottom:8px}
.pilih-warna{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.swatch{
  display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;min-width:0;
  border:2px solid var(--garis);border-radius:14px;background:var(--kartu);color:var(--teks);font-weight:700;font-size:.88rem;text-align:left;
}
.swatch i{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.sw-hijau i{background:#0f6b4c}.sw-biru i{background:#1F5FBF}.sw-ungu i{background:#6B3FD1}
.sw-marun i{background:#A62B48}.sw-oranye i{background:#B4500A}.sw-kopi i{background:#7A4E2D}
.swatch[aria-checked="true"]{border-color:var(--utama-teks);box-shadow:0 0 0 3px rgba(var(--utama-rgb),.18)}
.segmen{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--netral)}
.segmen button{flex:1;min-width:0;min-height:44px;border:0;border-radius:999px;background:none;font-weight:700;font-size:.88rem;color:var(--lembut);padding:6px 8px}
.segmen button[aria-checked="true"]{background:var(--kartu);color:var(--utama-teks);box-shadow:var(--bayang)}
#btn-tema-bawaan{padding-left:0;min-height:44px}

/* ---------- Huruf besar ---------- */
html[data-huruf="besar"],html[data-huruf="besar"] body{font-size:18px}
html[data-huruf="besar"] .konten input,html[data-huruf="besar"] .konten select,html[data-huruf="besar"] .konten button,
html[data-huruf="besar"] .konten label,html[data-huruf="besar"] .konten p{font-size:1.06em}
html[data-huruf="besar"] .br-kartu-angka{font-size:22px}
html[data-huruf="besar"] .mi-label{font-size:.8rem}

/* ---------- Beranda tanpa foto ---------- */
html[data-banner="sembunyi"] .banner-foto,html[data-banner="sembunyi"] .banner-beranda::after{display:none}
html[data-banner="sembunyi"] .banner-beranda{background:linear-gradient(135deg,var(--hijau-gelap),var(--hijau));min-height:0}
html[data-banner="sembunyi"] .banner-isi{max-width:100%}

/* ---------- Mode gelap ---------- */
html[data-mode="gelap"]{
  color-scheme:dark;
  --latar:#0F1614;--kartu:#18221F;--netral:#222E2A;--putih:#18221F;--abu-muda:#0F1614;
  --teks:#E3ECE9;--lembut:#A6B7B2;--abu:#A6B7B2;--garis:#2C3B37;--judul:#EEF4F2;
  --hijau-muda:rgba(var(--utama-rgb),.24);
  --bayang:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.28);
  --utama-teks:#5CC7A3;
}
html[data-mode="gelap"][data-warna="biru"]{--utama-teks:#7FAEF2}
html[data-mode="gelap"][data-warna="ungu"]{--utama-teks:#B59BF5}
html[data-mode="gelap"][data-warna="marun"]{--utama-teks:#F29AB1}
html[data-mode="gelap"][data-warna="oranye"]{--utama-teks:#F7AE6E}
html[data-mode="gelap"][data-warna="kopi"]{--utama-teks:#D9A97F}
html[data-mode="gelap"] body{background:var(--latar);color:var(--teks)}
html[data-mode="gelap"] input,html[data-mode="gelap"] select{background:var(--netral);color:var(--teks);border-color:var(--garis)}
html[data-mode="gelap"] .atas{background:rgba(24,34,31,.95);box-shadow:0 1px 0 var(--garis)}
html[data-mode="gelap"] .btn-alt{color:var(--utama-teks)}
html[data-mode="gelap"] .btn-garis{background:var(--kartu);color:var(--judul);border-color:var(--garis)}
html[data-mode="gelap"] .btn-bahaya{background:#3A1A17;color:#FFB4A8}
html[data-mode="gelap"] .banner{background:#3A2C10;color:#F5C66B;border-color:#5A4518}
html[data-mode="gelap"] .kartu-kasbon{background:#3A2C10;color:#F5C66B}
html[data-mode="gelap"] .kk-nilai{color:#FFD98A}
html[data-mode="gelap"] .kartu-kasbon svg{stroke:#F5C66B}
html[data-mode="gelap"] .mi,html[data-mode="gelap"] .stat-ikon{filter:saturate(.9) brightness(.92)}
html[data-mode="gelap"] .br-trx-ikon.kasbon{background:#3A1A22;color:#F29AB1}
html[data-mode="gelap"] .lencana-menipis{background:#3A1A17;color:#FFB4A8}
html[data-mode="gelap"] .kb-baris{background:var(--kartu);color:var(--teks)}
html[data-mode="gelap"] .kb-riwayat-bayar{color:var(--utama-teks)}
html[data-mode="gelap"] .minus,html[data-mode="gelap"] .kb-ada-utang,html[data-mode="gelap"] .kb-riwayat-utang,
html[data-mode="gelap"] .ak-pesan-gagal,html[data-mode="gelap"] .btn-teks-hapus,html[data-mode="gelap"] .ks-ubin-habis{color:#FF9B8C}
html[data-mode="gelap"] .atas-pengaturan{background:var(--netral)}
html[data-mode="gelap"] .ak-merek b{color:#FFC94D}
html[data-mode="gelap"] .btn-bulat{background:var(--netral);color:var(--teks);border-color:var(--garis)}
html[data-mode="gelap"] .ks-struk-pre{background:var(--netral);color:var(--teks)}
html[data-mode="gelap"] .btn-utama{color:#fff}
html[data-mode="gelap"] .btn-utama:disabled{background:#33413D;color:#8FA19C}

/* ---------- Layar sempit & lebar ---------- */
@media (max-width:370px){
  .menu-grid{gap:8px}
  .mi{width:42px;height:42px}
  .mi-label{font-size:.7rem}
  .banner-isi{max-width:80%}
}
@media (min-width:700px) and (min-aspect-ratio:1/1){
  .splash{flex-direction:row;align-items:stretch;justify-content:flex-start}
  .splash-foto{position:relative;width:50%;height:100%;flex:none;object-position:center 30%}
  .splash::after{background:linear-gradient(90deg,rgba(6,41,31,0) 0%,rgba(6,41,31,0) 40%,#06291F 50%,#06291F 100%)}
  .splash-isi{align-self:center;width:50%;padding:40px}
}
@media (min-width:900px){.grid-stat{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Perbaikan lebar 360px ---------- */
/* fieldset punya min-width:min-content bawaan browser: dua kolom harga
   mendorong layar Stok selebar ±550px. */
.sk-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sk-form fieldset{min-width:0}
.sk-form input,.sk-form label{min-width:0;width:100%}
@media (max-width:420px){.sk-form-grid{grid-template-columns:minmax(0,1fr)}}
.kb-form-pelanggan input{flex:1 1 100%}
.kb-form-pelanggan .btn{flex:1 1 100%}
/* Tombol kasir: Bayar tunai paling besar di atas, dua pilihan lain di bawahnya. */
.ks-tombol-blok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#ks-btn-tunai{grid-column:1/-1;order:-1;min-height:52px;font-size:16px}
#ks-btn-kasbon{order:0}
#ks-btn-batal{order:1}
.modal-tombol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#ks-struk-tutup{grid-column:1/-1}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================
   v1.3.0 — TATA LETAK TABLET LANDSCAPE (>= 900px)
   HP tidak berubah: semua aturan di bawah hanya berlaku di
   layar lebar, kecuali kisi barang kasir yang di HP disembunyikan.
   Pola mengikuti Tokiva Cafe/LITE: menu kiri, panel keranjang kanan.
   Navigasi bawah berubah jadi rel menu di sisi kiri (gaya iPad).
   ========================================================== */
.ks-grid,.ks-panel-judul{display:none}
.kaki-pembuat a{color:inherit;font-weight:700;text-decoration:none}
.kaki-pembuat a:hover{color:var(--utama-teks)}

@media (min-width:900px){
  :root{--rel:96px;--tinggi-atas:64px}

  /* ---------- Rel navigasi kiri ---------- */
  .nav-bawah{
    top:0;bottom:0;right:auto;width:var(--rel);flex-direction:column;justify-content:flex-start;gap:6px;
    border-radius:0;padding:calc(var(--tinggi-atas) + 14px) 8px 16px;
    box-shadow:1px 0 0 var(--garis);background:var(--kartu);
  }
  .nav-tombol{flex:none;min-height:68px;border-radius:16px;font-size:12px;gap:6px}
  .nav-tombol:hover{background:var(--netral)}
  .nav-tombol:active{transform:scale(.96)}
  .nav-aktif svg{margin:0}
  .atas{margin-left:var(--rel);z-index:6}
  .konten{max-width:none;margin:0 0 0 var(--rel);padding:20px 28px 32px}
  .konten>.layar,.konten>.kaki-pembuat{max-width:1240px;margin-left:auto;margin-right:auto}

  /* ---------- Beranda ---------- */
  .menu-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .banner-beranda{min-height:220px}
  .banner-isi{max-width:55%;padding:24px}

  /* ---------- Kasir: dua panel ---------- */
  .ks-tata-letak{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
  .ks-hasil{display:none!important}
  .ks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:4px}
  .ks-grid-kosong{grid-column:1/-1;color:var(--lembut);background:var(--kartu);border-radius:var(--radius);padding:18px;box-shadow:var(--bayang)}
  .ks-ubin{position:relative;display:flex;flex-direction:column;background:var(--kartu);border-radius:var(--radius);box-shadow:var(--bayang);overflow:hidden}
  .ks-ubin-utama{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
    background:none;border:0;padding:14px 14px 12px;min-height:104px;color:var(--teks);
    transition:transform .1s ease-out,background-color .1s ease-out;
  }
  .ks-ubin-utama:active{transform:scale(.97);background:var(--hijau-muda)}
  .ks-ubin-nama{font-weight:700;font-size:.95rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:28px}
  .ks-ubin-harga{font-size:.88rem;font-weight:700;color:var(--utama-teks);font-variant-numeric:tabular-nums}
  .ks-ubin-stok{font-size:.76rem;color:var(--lembut)}
  .ks-ubin-habis{color:var(--merah);font-weight:700}
  .ks-ubin-qty{
    position:absolute;top:10px;right:10px;min-width:26px;height:26px;padding:0 7px;border-radius:999px;
    background:var(--hijau);color:#fff;font-size:.8rem;font-weight:800;display:grid;place-items:center;
    font-variant-numeric:tabular-nums;pointer-events:none;animation:ubin-masuk .22s ease-out;
  }
  @keyframes ubin-masuk{from{transform:scale(.6)}to{transform:scale(1)}}
  .ks-ubin-dus{
    border:0;border-top:1px solid var(--garis);background:var(--netral);color:var(--utama-teks);
    font-weight:700;font-size:.8rem;min-height:40px;padding:6px 10px;text-align:left;
  }
  .ks-ubin-dus:active{background:var(--hijau-muda)}

  .ks-panel-kanan{
    position:sticky;top:calc(var(--tinggi-atas) + 16px);
    max-height:calc(100vh - var(--tinggi-atas) - 36px);display:flex;flex-direction:column;
    background:var(--kartu);border-radius:var(--radius-lg);box-shadow:var(--bayang);overflow-y:auto;
  }
  .ks-panel-judul{display:flex;align-items:baseline;justify-content:space-between;padding:16px 16px 8px;font-weight:800;font-size:1.05rem;color:var(--judul)}
  .ks-jumlah-item{font-size:.82rem;font-weight:700;color:var(--lembut)}
  .ks-panel-kanan .ks-keranjang{flex:1 1 auto;min-height:80px;overflow-y:auto;margin:0;padding:0 12px 12px}
  .ks-panel-kanan .ks-item{box-shadow:none;background:var(--netral)}
  .ks-panel-kanan .ks-kosong{padding:10px 4px}
  .ks-panel-kanan .ks-ringkas{flex:none;border-radius:0;box-shadow:0 -1px 0 var(--garis);padding:12px 16px 16px}
  .ks-ringkas-baris:first-child{font-size:1.15rem;font-weight:800}

  /* ---------- Stok: form kiri, daftar kanan ---------- */
  #layar-stok{display:grid;grid-template-columns:400px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:20px;align-items:start}
  #layar-stok>h2{grid-column:1/-1}
  #layar-stok>.sk-form{grid-column:1;grid-row:2/span 2;position:sticky;top:calc(var(--tinggi-atas) + 16px)}
  #layar-stok>.sk-cari{grid-column:2;grid-row:2}
  #layar-stok>.sk-daftar{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .sk-form-grid{grid-template-columns:minmax(0,1fr)}

  /* ---------- Kasbon ---------- */
  .kb-kolom-kiri{flex:0 0 360px}

  /* ---------- Laporan: ringkasan 4 kolom, dua daftar berdampingan ---------- */
  #layar-laporan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start}
  #layar-laporan>h2,#layar-laporan>.br-ringkas{grid-column:1/-1}
  #layar-laporan>.lp-periode{grid-column:1;max-width:280px}
  #layar-laporan>.br-ringkas{grid-template-columns:repeat(4,minmax(0,1fr))}
  #layar-laporan>h3:nth-of-type(1){grid-column:1;grid-row:4}
  #layar-laporan>h3:nth-of-type(2){grid-column:2;grid-row:4}
  #lp-terlaku{grid-column:1;grid-row:5}
  #lp-menipis{grid-column:2;grid-row:5}

  /* ---------- Pengaturan: dua kolom kartu ---------- */
  /* Kolom koran (bukan grid) supaya kartu pendek tidak meninggalkan celah kosong. */
  #layar-pengaturan{columns:2;column-gap:20px}
  #layar-pengaturan>h2,#layar-pengaturan>.banner{column-span:all}
  #layar-pengaturan>div,#layar-pengaturan>form{break-inside:avoid;display:flex;margin-bottom:20px}
  #layar-pengaturan>.pg-tampilan{display:block}
  .pilih-warna{grid-template-columns:repeat(3,minmax(0,1fr))}

  .modal-isi{max-width:420px}
}
@media (min-width:1280px){
  .ks-tata-letak{grid-template-columns:minmax(0,1fr) 420px}
}