/* Tampilan kasir Warlok. Token dan komponen diangkat dari mockup docs/mockup/kasir.html,
 * diubah dari kanvas tetap 1280×800 menjadi tata letak yang mengikuti layar: tablet mendatar lebih dulu,
 * ponsel tegak di bawah 700 px. Cetak 58 mm ada di bagian akhir.
 */

/* ===== Token ===== */
.app {
  --bg: #F4F2EC; --surface: #FFFFFF; --panel: #ECE8DF; --line: #D6D0C4; --ink: #18202A; --ink2: #4E5764;
  --nila: #2A3B8F; --on-nila: #FFFFFF; --nila-teks: #2A3B8F; --sel-bg: #18202A; --sel-fg: #FFFFFF;
  --ok: #1A6B43; --ok-bg: #E3F2E9; --tunggu: #8A5A00; --tunggu-bg: #FDF0D2; --off: #3F4A56; --off-bg: #E4E7EB;
  --galat: #B3261E; --galat-bg: #FCE4E2; --bahaya: #B3261E; --on-bahaya: #FFFFFF;
  --tirai: rgba(24, 32, 42, .45); --tirai-kuat: rgba(17, 21, 27, .6); --bayang: rgba(24, 32, 42, .14);
  --kam-bg: #11151B; --kam-fg: #ECEFF3; --kam-ok: #7BD4A0; --kam-ok-bg: #15301F; --kam-tunggu: #F0C05A; --kam-tombol: #1A2028;
  --kertas: #FFFFFF; --tinta: #18202A; --tinta2: #4E5764; --meja-kertas: #D9D5CC;
}
.app[data-mode="redup"] {
  --bg: #11151B; --surface: #1A2028; --panel: #212833; --line: #333C48; --ink: #ECEFF3; --ink2: #A7B0BC;
  --nila: #4C5FCB; --on-nila: #FFFFFF; --nila-teks: #9AA8F0; --sel-bg: #ECEFF3; --sel-fg: #11151B;
  --ok: #7BD4A0; --ok-bg: #15301F; --tunggu: #F0C05A; --tunggu-bg: #33270B; --off: #AEB8C4; --off-bg: #262D36;
  --galat: #FF8F85; --galat-bg: #3A1714; --bahaya: #C23A30; --on-bahaya: #FFFFFF;
  --tirai: rgba(0, 0, 0, .5); --tirai-kuat: rgba(0, 0, 0, .65); --bayang: rgba(0, 0, 0, .4); --meja-kertas: #0B0E12;
}

/* ===== Dasar ===== */
html, body { margin: 0; height: 100%; background: #F4F2EC; }
/* Mode malam juga untuk latar halaman, gulir, dan isian bawaan peramban (data-mode di <html> diatur app.js) */
html[data-mode="redup"], html[data-mode="redup"] body { background: #11151B; color-scheme: dark; }
#app { min-height: 100%; }
.app { min-height: 100vh; font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--ink); background: var(--bg); font-variant-numeric: tabular-nums; line-height: 1.3; -webkit-font-smoothing: antialiased; text-align: left; }
:where(.app) *, :where(.app) *::before, :where(.app) *::after { box-sizing: border-box; }
:where(.app) :where(h1, h2, p, ul, ol, dl, dd) { margin: 0; }
:where(.app) :where(h1, h2) { font-size: inherit; }
:where(.app) :where(ul, ol) { padding: 0; list-style: none; }
:where(.app) :where(button, input, output, select) { font: inherit; color: inherit; }
:where(.app) button { cursor: pointer; }
:where(.app) a { color: inherit; text-decoration: none; }
:where(.app) svg { flex: none; }
.app :focus-visible { outline: 3px solid var(--nila-teks); outline-offset: 2px; }
.app ::placeholder { color: var(--ink2); opacity: 1; }

/* ===== Struktur layar ===== */
.layar { width: 100%; height: 100vh; height: 100dvh; position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); --atas: 56px; --tinggi: calc(100dvh - var(--atas)); }
.layar.ada-banner { --atas: 100px; }
.isi { display: flex; height: var(--tinggi); flex: none; min-height: 0; }
.kiri { flex: 1 1 0; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; }
.kanan { width: clamp(360px, 40%, 520px); flex: none; padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 16px; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; overflow-y: auto; }
.penuh-layar { height: var(--tinggi); flex: none; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.penuh-layar.sempit { padding: 48px clamp(24px, 10vw, 160px); gap: 24px; }
.baris-z4 { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
/* Panel lunas yang panjang (printer gagal, laci, pelanggan, Kode Warlok): tombol Bill baru menempel di dasar panel (observasi 26 Okt) */
.kanan.lunas > .baris-z4 { position: sticky; bottom: -16px; padding: 12px 0 16px; background: var(--panel); border-top: 1px solid var(--line); }
/* Absen di layar kunci (1.4): tombol yang biasanya dipakai diberi garis tebal */
.baris-z4.dengan-absen { flex-wrap: wrap; }
.absen-kunci { margin-right: auto; }
.absen-kunci .tombol.utama2 { border-width: 2px; border-color: var(--nila); }
.banner { height: 44px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); }
.banner .tombol { height: 36px; flex: none; }

/* Bilah atas */
.bilah { height: 56px; flex: none; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.bilah-kiri, .bilah-kanan { min-width: 0; }
.jam-bilah { padding: 0 8px; }
.operator { height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 8px; border: 0; border-radius: 24px; background: var(--panel); font-size: 15px; font-weight: 600; }
.ava { width: 32px; height: 32px; border-radius: 16px; background: var(--sel-bg); color: var(--sel-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex: none; }
.ava.besar { width: 48px; height: 48px; border-radius: 24px; font-size: 20px; }
.ava.lembut { background: var(--panel); color: var(--ink); }
.dipilih .ava { background: var(--sel-fg); color: var(--sel-bg); }
.hitung { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--sel-bg); color: var(--sel-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.status { height: 48px; padding: 0 14px; border: 0; border-radius: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.status.polos { height: 40px; background: transparent; color: var(--ink2); font-weight: 500; padding: 0 12px; }
/* Bilah atas tidak pernah meluber: bila ruang habis (misalnya printer terputus dan offline sekaligus), teks status
 * yang menyusut dengan elipsis. Teks lengkapnya ada di aria-label dan di layar yang dibuka saat status diketuk. */
.bilah-kiri:has(> .tombol) { flex-shrink: 0; }
.bilah-kanan > * { flex-shrink: 0; }
.bilah-kanan > .status { flex-shrink: 1; min-width: 0; }
.teks-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-shift { display: flex; align-items: center; gap: 6px; padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--line); }
.menu-shift button { height: 48px; display: inline-flex; align-items: center; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 15px; font-weight: 600; white-space: nowrap; }

/* Tombol */
.tombol { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.tombol.h56 { height: 56px; font-size: 16px; padding: 0 18px; border-radius: 12px; }
.tombol.h64 { height: 64px; font-size: 17px; border-radius: 12px; }
.tombol.kotak56 { width: 56px; height: 56px; border-radius: 12px; font-size: 24px; padding: 0; }
.tombol.kotak48 { width: 48px; height: 48px; border-radius: 10px; font-size: 22px; padding: 0; }
.tombol.kotak-112 { width: 112px; height: 72px; flex-direction: column; gap: 4px; border-radius: 12px; white-space: normal; text-align: center; padding: 0 6px; }
.tombol.penuh { width: 100%; justify-content: flex-start; }
.tombol.garis-bahaya { border-color: var(--galat); color: var(--galat); }
.tombol.kecil { height: 34px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 6px; }
/* Di kolom yang isinya melebihi tinggi layar, tombol tidak ikut menyusut; kolomnya yang digulir */
:is(.col, .kiri, .kanan, .penuh-layar) > :is(.tombol, .z4) { flex-shrink: 0; }
.tombol-kecil { height: 40px !important; }
.dipilih { background: var(--sel-bg) !important; color: var(--sel-fg) !important; border: 2px solid var(--sel-bg) !important; }
/* Tombol mati abu datar tanpa garis putus-putus (rekomendasi butir 13): garis putus-putus dipakai kotak kelompok wajib, chip mode coba, dan
 * tempat QR, jadi artinya bercampur. Abu tembus pandang terbaca di tema terang maupun gelap. */
.mati { background: rgba(128, 128, 128, .16) !important; border: 1px solid transparent !important; color: var(--ink2) !important; cursor: not-allowed !important; }
.z4 { width: 240px; height: 72px; flex: none; border: 0; border-radius: 12px; background: var(--nila); color: var(--on-nila); font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.z4.bahaya { background: var(--bahaya); color: var(--on-bahaya); }
.z4.garis { background: transparent; border: 2px solid var(--nila-teks); color: var(--nila-teks); }
.z4.dua { flex-direction: column; gap: 2px; }
.z4.pojok { position: absolute; right: 20px; bottom: 16px; }
.tutup { width: 48px; height: 48px; flex: none; border: 0; border-radius: 24px; background: var(--panel); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.kembali { height: 48px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 8px; border-radius: 8px; border: 1px solid var(--line); background: transparent; font-size: 16px; font-weight: 600; flex: none; }
.tautan { border: 0; background: transparent; padding: 0; text-decoration: underline; color: var(--nila-teks); font-weight: 600; cursor: pointer; }

/* Kartu, kotak pesan, chip */
.kartu { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.kartu-krem { background: var(--bg); border-radius: 12px; }
.rinci { display: flex; flex-direction: column; gap: 6px; }
.rinci > div { display: flex; justify-content: space-between; gap: 12px; }
.kotak { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.kotak.garis { border: 1px dashed var(--ink2); background: transparent; color: var(--ink); font-weight: 400; }
.chip { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 14px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.chip.besar { height: 36px; padding: 0 12px; border-radius: 18px; font-size: 15px; }
.chip.netral { border: 1px solid var(--ink2); background: var(--surface); color: var(--ink); }
.chip.putih { background: var(--surface); color: var(--ink2); }
.poin-titik { flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--ink); }

/* Katalog */
.katalog { flex: 1 1 0; min-width: 0; height: var(--tinggi); padding: 16px; display: flex; flex-direction: column; gap: 16px; position: relative; background: var(--bg); overflow: hidden; }
/* Kategori tegak di kiri menu, semua terlihat tanpa gulir mendatar; menu bergulir sendiri dan kategori tetap di tempat */
.katalog-badan { flex: 1; min-height: 0; display: flex; gap: 12px; }
.kategori { flex: none; width: 160px; display: flex; flex-direction: column; gap: 8px; overflow-x: hidden; overflow-y: auto; }
.kategori .tombol { flex: none; width: 100%; height: auto; min-height: 56px; padding: 8px 16px; border-radius: 12px; font-size: 16px; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.25; }
.katalog-menu { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
.katalog-atas .cari { flex: 1; width: auto; min-width: 0; }
.cari { flex: none; width: 240px; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink2); }
.cari.lebar { width: auto; flex: 1; min-width: 200px; height: 48px; border-radius: 10px; }
/* Di lembar bersusun tegak (Menu habis), flex 1 memendekkan tinggi, bukan melebarkan: kolom cari tetap 48 px */
.lembar-isi.col > .cari.lebar { flex: none; }
.cari input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: var(--ink); outline: none; }
.grid-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding-bottom: 32px; }
.tile { height: 112px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; text-align: left; position: relative; }
.tile.ada { border: 2px solid var(--ink); }
.tile .nama { font-size: 18px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile.ada .nama { padding-right: 32px; }
.tile.kecil { height: 96px; padding: 12px; }
.tile.kecil .nama { font-size: 17px; }
.stok-tile { padding: 1px 6px; border-radius: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tile .row.sb > span:last-child { min-width: 0; }
.tanda-paket { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--ink2); color: var(--ink2); font-size: 12px; font-weight: 700; }
.lencana { position: absolute; top: 10px; right: 10px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--sel-bg); color: var(--sel-fg); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.kosong-cari { padding: 8px 4px; }
/* Katalog berfoto (1.4): foto di atas, nama dan harga di bawahnya; item tanpa foto memakai huruf awalnya */
/* Tinggi minimum, bukan tetap: nama dua baris tetap berjarak dari harga di bawahnya */
.grid-menu.berfoto .tile { height: auto; min-height: 188px; padding: 0 0 12px; justify-content: flex-start; overflow: hidden; }
.grid-menu.berfoto .tile > .nama { padding: 10px 12px 0; }
.grid-menu.berfoto .tile > .row { padding: 8px 12px 0; margin-top: auto; }
.grid-menu.berfoto .tile.ada .nama { padding-right: 12px; }
.grid-menu.berfoto .tile.kecil { min-height: 168px; }
.foto-tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100px; flex: none; background: var(--panel); color: var(--ink2); font-size: 34px; font-weight: 700; }
.foto-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-menu.berfoto .tile.manual .foto-tile { background: transparent; }
.tile.mati .foto-tile img { filter: grayscale(1); opacity: .6; }
.grid-menu.berfoto .lencana { top: 8px; right: 8px; }
.foto-kelola { width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: var(--panel); color: var(--ink2); display: flex; align-items: center; justify-content: center; flex: none; }
.foto-kelola img { width: 100%; height: 100%; object-fit: cover; }
.pilih-berkas { cursor: pointer; position: relative; }
.antrean-chip { margin-left: 8px; vertical-align: middle; }
.antrean-lunas { padding: 4px 14px; border-radius: 12px; background: var(--panel); }
/* Pelanggan dan poin (1.4): sejajar dengan isi panel bill lain, berjarak dari baris tombol di bawahnya */
.tombol-pelanggan { height: 48px; margin: 0 20px 12px; padding: 0 14px; flex: none; }
.lebar-poin { width: 160px; }
.daftar-pelanggan { max-height: 360px; overflow-y: auto; }
.daftar-pelanggan .tombol { width: 100%; }
/* Reservasi meja (1.4) */
.kartu-reservasi.redup { opacity: .6; }
.snackbar { position: absolute; left: 16px; bottom: 36px; z-index: 35; min-height: 56px; max-width: min(700px, calc(100% - 32px)); display: flex; align-items: center; gap: 20px; padding: 0 4px 0 18px; border-radius: 12px; background: var(--sel-bg); color: var(--sel-fg); font-size: 16px; box-shadow: 0 6px 18px var(--bayang); }
/* Tanpa tombol aksi, teks butuh jarak kanan sendiri */
.snackbar:not(:has(button)) { padding-right: 18px; }
.layar:has(.pisah) .snackbar, .layar:has(.status-pisah) .snackbar { bottom: 104px; }
/* Lembar terbuka di tablet: snack tidak menimpa kaki lembar (harga, tombol simpan) (observasi 26 Okt) */
@media (min-width: 1000px) { .layar:has(.lembar) .snackbar { max-width: calc(100% - min(760px, 100%) - 32px); } }
.snackbar button { height: 48px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; flex: none; }

/* Panel bill */
.panel-bill { width: clamp(380px, 40%, 520px); height: var(--tinggi); flex: none; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); }
.panel-kosong-isi { flex: 1; padding: 28px; }
.kepala-bill { padding: 14px 20px 10px; }
/* Sumber pesanan cepat: pilihan bill berikutnya di panel kosong, tombol di kepala bill, baris di lembar Sumber pesanan */
.sumber-berikut { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.tombol-pilih-sumber { padding: 0 10px; white-space: normal; line-height: 1.2; text-align: center; }
.tombol-sumber { height: 44px; max-width: 100%; padding: 0 10px 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tombol-sumber .potong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tombol-sumber.lebar { width: calc(100% - 24px); height: 48px; margin: 12px 12px 0; justify-content: space-between; }
.kepala-bill .tombol { height: 44px; }
.jumlah-orang { height: 44px; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
/* align-self: .row (align-items: center) ditulis sesudah ini dan membuat tombol hanya setinggi teksnya (31 px) */
.tombol-orang { width: 44px; flex: none; align-self: stretch; border: 0; background: transparent; color: var(--ink); font-size: 22px; font-weight: 600; }
.tombol-orang[aria-disabled="true"] { color: var(--ink2); opacity: .4; cursor: not-allowed; }
.angka-orang { min-width: 72px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.baris-sumber { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 16px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; }
.chip-bill { padding: 0 20px 10px; }
.info-bayar { margin: 0 20px 12px; }
.alat { display: flex; gap: 8px; padding: 0 20px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.alat .tombol { padding: 0 10px; }
.alasan-kunci { margin: 10px 20px 0; padding: 10px 14px !important; }
.tombol-rinci { margin: 10px 20px 0; border-radius: 10px; }
.daftar-pembayar { margin-top: 8px; padding: 0 20px; }
.daftar-bill { flex: 1; min-height: 0; overflow-y: auto; }
.baris-bill { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.baris-bill .utama { width: 100%; display: flex; gap: 12px; font-size: 18px; font-weight: 600; }
.baris-bill .sub { width: 100%; display: flex; gap: 12px; font-size: 15px; color: var(--ink2); }
.tanda-dapur { margin-left: 8px; padding: 2px 6px; border-radius: 6px; background: var(--surface); color: var(--ink2); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.qty { width: 20px; flex: none; } .nm { flex: 1; min-width: 0; }
.kosong-bill { padding: 20px; }
.total-bill { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px 0; border-top: 1px solid var(--line); }
.total-besar { padding-top: 6px; }
.aksi-bill { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 16px; }
/* Kode Warlok dan Simpan selebar tetap; Bayar mengisi sisanya sampai 240 px dan teksnya boleh dua baris, jadi ketiganya tetap di
 * dalam panel di tablet tegak (sebelumnya Kode Warlok terpotong di 768 dan 800 px) */
.aksi-bill .kotak-112 { flex: none; }
.aksi-bill .z4 { width: auto; flex: 0 1 240px; min-width: 0; }
@media (max-width: 1100px) { .aksi-bill .kotak-112 { width: 84px; } }
.pembayar { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pembayar .chip { width: 72px; justify-content: center; }

/* Keypad dan isian */
.keypad { width: 280px; flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.keypad button { height: 72px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 28px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.keypad.pendek button { height: 64px; }
.keypad .k000 { font-size: 24px; } .keypad .khapus { background: var(--panel); } .keypad .kosong { visibility: hidden; }
.isian-pin { height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--surface); font-size: 15px; color: var(--ink2); }
.isian-pin.salah { border-color: var(--galat); }
.isian-otp { height: 64px; font-size: 30px; letter-spacing: .3em; color: var(--ink); font-weight: 700; }
.titik { width: 16px; height: 16px; border-radius: 8px; background: var(--ink); flex: none; }
.isian-uang { display: flex; flex-direction: column; gap: 2px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); }
.isian-uang.waspada { border-color: var(--tunggu); }
.isian-uang > span { font-size: 15px; font-weight: 600; color: var(--ink2); }
.nilai-uang { display: block; min-height: 48px; font-size: 40px; font-weight: 700; line-height: 48px; color: var(--ink); font-variant-numeric: tabular-nums; }
.nilai-uang .redam { font-size: 20px; }
.isian { width: 100%; height: 56px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 16px; color: var(--ink); }
.isian.kecil { height: 34px; width: auto; font-size: 13px; padding: 0 8px; border-radius: 8px; }
.isian-kecil { height: 40px !important; width: 84px !important; padding: 0 8px !important; border-radius: 8px !important; }
.lebar-auto { width: auto; }
.isian-kode { width: 100%; height: 72px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); color: var(--ink); font: 600 34px "IBM Plex Mono", Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; }
.angka-qty { min-width: 40px; } .lebar72 { width: 72px; }

/* Lembar, panel PIN, modal */
.tirai-kiri, .tirai-pin, .tirai-penuh { position: absolute; left: 0; right: 0; top: var(--atas); height: var(--tinggi); border: 0; z-index: 20; }
.tirai-kiri { background: var(--tirai); }
.tirai-pin, .tirai-penuh { background: var(--tirai-kuat); }
.tirai-bening { position: absolute; inset: 0; background: transparent; z-index: 20; }
.lembar { position: absolute; right: 0; top: var(--atas); width: min(760px, 100%); height: var(--tinggi); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px var(--bayang); z-index: 21; }
.lembar.pin { width: min(640px, 100%); z-index: 23; }
.tirai-pin { z-index: 22; }
.lembar-kepala { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); flex: none; }
.lembar-isi { flex: 1; min-height: 0; padding: 20px 24px; display: flex; gap: 32px; overflow-y: auto; }
.lembar-isi.col { flex-direction: column; gap: 24px; }
.lembar-kaki { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 20px 16px 24px; border-top: 1px solid var(--line); flex: none; }
.pita { height: 64px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; }
.pita.gelap { background: var(--sel-bg); color: var(--sel-fg); }
.pita.terang { background: var(--panel); border-bottom: 1px solid var(--line); }
.isi-pin { overflow-y: auto; min-height: 0; }
.grup-wajib { padding: 16px; border: 2px dashed var(--tunggu); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.grup-wajib.terisi { border: 1px solid var(--line); }
.grup-wajib.sorot { border-color: var(--galat); background: var(--galat-bg); }
.modal { position: absolute; left: 50%; transform: translateX(-50%); top: 88px; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 104px); overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 16px 40px var(--bayang); z-index: 24; }
.kamera { height: 288px; flex: none; position: relative; overflow: hidden; border-radius: 12px; background: var(--kam-bg); color: var(--kam-fg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 40px; }
.video-kamera { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sudut { position: absolute; width: 40px; height: 40px; border: 0 solid var(--kam-fg); z-index: 1; }
.sudut.a { left: calc(50% - 120px); top: 40px; border-left-width: 4px; border-top-width: 4px; border-radius: 6px 0 0 0; }
.sudut.b { right: calc(50% - 120px); top: 40px; border-right-width: 4px; border-top-width: 4px; border-radius: 0 6px 0 0; }
.sudut.c { left: calc(50% - 120px); bottom: 40px; border-left-width: 4px; border-bottom-width: 4px; border-radius: 0 0 0 6px; }
.sudut.d { right: calc(50% - 120px); bottom: 40px; border-right-width: 4px; border-bottom-width: 4px; border-radius: 0 0 6px 0; }
.centang-besar { width: 88px; height: 88px; border-radius: 44px; background: var(--kam-ok-bg); color: var(--kam-ok); display: flex; align-items: center; justify-content: center; }
.centang-besar.tolak { background: var(--tunggu-bg); color: var(--tunggu); }
.teks-kam-tunggu { color: var(--kam-tunggu); }
.garis-atas { padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.menu-pop { position: absolute; right: 20px; top: 166px; width: 320px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px var(--bayang); display: flex; flex-direction: column; z-index: 25; }
.menu-pop button { width: 100%; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; font-size: 16px; font-weight: 600; }
.menu-pop button[aria-disabled="true"] { color: var(--ink2); cursor: not-allowed; }
.menu-pop button span { font-size: 14px; font-weight: 400; color: var(--ink2); }
.pratinjau { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--atas) + 16px); width: min(480px, calc(100% - 32px)); height: calc(var(--tinggi) - 32px); display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); box-shadow: 0 16px 40px var(--bayang); overflow: hidden; z-index: 26; }
.pratinjau-kepala { padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.kertas-gulir { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 0; background: var(--meja-kertas); display: flex; justify-content: center; align-items: flex-start; }
.kertas-gulir .struk { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }

/* Kartu khusus */
.ganti-staf { display: none; }
.staf { height: 96px; padding: 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); display: flex; align-items: center; gap: 14px; text-align: left; }
.grid-staf { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kartu-bill { min-height: 172px; padding: 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); align-items: stretch; }
.grid-bill { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; padding-bottom: 96px; }
/* Bila ada bagian "Di tablet lain" di bawahnya, daftar bill tidak digulir sendiri (kartunya terpotong); seluruh layar yang digulir */
.grid-bill:has(~ section) { flex: none; overflow: visible; padding-bottom: 8px; }
/* Kartu bill di tablet lain lebih lebar supaya nama, jumlah, dan keterangannya tidak berimpitan */
.grid-bill.grid-lain { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.kolom-pisah { display: flex; flex-direction: column; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; min-height: 0; }
.kolom-pisah.aktif { border: 2px solid var(--ink); }
.kolom-pisah > header { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.kolom-pisah-wadah { min-height: 0; }
.baris-pisah { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.status-pisah { min-height: 72px; flex: none; }
.dorong-kanan { margin-left: auto; }
.bulat44 { width: 44px; height: 44px; border-radius: 22px; background: var(--panel); display: flex; align-items: center; justify-content: center; flex: none; }
.bulat40 { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.bulat44.ok-isi, .bulat40.ok-isi { background: var(--ok-bg); color: var(--ok); }
.kaki-kolom { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px; background: var(--bg); font-size: 16px; }
.total-kolom { padding-top: 4px; }
.qr-tempat { width: 340px; height: 340px; flex: none; border: 2px dashed var(--ink2); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink2); text-align: center; padding: 24px; }
.qr-tempat.qr-asli { border: 1px solid var(--line); background: #FFFFFF; color: #4E5764; padding: 20px; }
.qr-tempat.qr-asli .qr-svg { width: 260px; }
.qr-tempat.garis-padat { border-style: solid; }
.qr-svg { display: inline-block; line-height: 0; }
.qr-svg svg { width: 100%; height: auto; display: block; }
.qris-penuh { position: fixed; inset: 0; z-index: 60; background: #FFFFFF; color: #11151B; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; }
.qris-penuh .qr-svg { width: min(62vh, 80vw); }
.langkah { width: 28px; height: 28px; border-radius: 14px; background: var(--sel-bg); color: var(--sel-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex: none; }
.baris-refund { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.baris-refund.dipilih-baris { background: var(--bg); box-shadow: inset 4px 0 0 var(--ink); }
.kartu-refund { overflow: hidden; flex: none; }
.kepala-refund { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.daftar-refund { max-height: 320px; }
.angka-refund { min-width: 56px; }
.kartu-metode { padding: 12px 14px; border: 0; }
.pilihan-awal { min-height: 132px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); display: flex; align-items: center; gap: 18px; text-align: left; }
.pilihan-awal.utama { border: 2px solid var(--ink); }
.ikon-bulat { width: 56px; height: 56px; border-radius: 28px; background: var(--panel); display: flex; align-items: center; justify-content: center; flex: none; }
.daftar-antre li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.kartu-kembali { padding: 16px 18px; }
.kartu-kode { padding: 12px 14px; border: 1px solid var(--line); }
.kartu-cocok { overflow: hidden; flex: none; }
.rinci-cocok { padding: 14px 18px; gap: 8px; }
.rinci-cocok.latar { padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg); }
.baris-selisih { padding: 14px 18px; border-top: 1px solid var(--line); }
.kanan-tutup { padding-top: 20px; }
.rinci-rekap { gap: 5px; }
.pecahan label { padding: 4px 0; }
.tab-metode { display: grid; }
/* Tujuh metode (dengan QRIS dinamis) tidak muat satu baris per tombol: label boleh dua baris */
.tab-metode .tombol { padding: 0 8px; white-space: normal; text-align: center; line-height: 1.2; }
.nominal { justify-content: flex-start; padding: 0 18px; }
.preset { padding: 0 12px; white-space: normal; text-align: left; gap: 8px; }
.lunas { padding-top: 20px; }
.diskon-ada { padding: 6px 6px 6px 12px; }
.laci-bawah { padding-top: 14px; border-top: 1px solid var(--line); }
.kotak-bagian { padding: 20px 24px; }

/* Daftar transaksi */
.daftar-tr { border-top: 1px solid var(--line); padding-bottom: 32px; }
.baris-tr { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 10px 4px 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
button.baris-tr:active { background: var(--panel); }
.jam-tr { width: 48px; flex: none; }
.judul-tr { overflow-wrap: anywhere; }
.nilai-tr { white-space: nowrap; }
.tr-batal .nilai-tr { text-decoration: line-through; color: var(--ink2); }
.panah-tr { width: 18px; flex: none; color: var(--ink2); display: flex; }
.pilihan-tr { height: auto; min-height: 56px; padding: 8px 14px; border-radius: 12px; text-align: left; }

/* Item manual, favorit, kelola menu, denah meja, riwayat shift, printer */
.tile.manual { border: 2px dashed var(--ink2); background: transparent; color: var(--ink); }
.tanda-manual { margin-left: 8px; padding: 1px 6px; border-radius: 6px; border: 1px dashed var(--ink2); color: var(--ink2); font-size: 12px; font-weight: 700; vertical-align: 2px; }
.hitung-lembut { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--panel); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.dipilih .hitung-lembut { background: var(--sel-fg); color: var(--sel-bg); }
.daftar-kelola { border-top: 1px solid var(--line); padding-bottom: 24px; }
.baris-kelola { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.baris-dipilih { background: var(--surface) !important; box-shadow: inset 4px 0 0 var(--ink); }
.kanan-kelola { padding-top: 20px; }
.form-kelola, .form-printer { min-height: 100%; }
/* Tombol simpan isian menempel di bawah panel supaya tidak perlu digulir */
.kaki-kelola, .kaki-printer { position: sticky; bottom: -16px; z-index: 2; margin: 0 -20px -16px; padding: 12px 20px 28px; background: var(--panel); border-top: 1px solid var(--line); }
.form-kelola .tombol .t13 { margin-left: 6px; opacity: .85; }
.isian-rp { display: flex; align-items: center; gap: 8px; padding-left: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.isian-rp .isian { border: 0; background: transparent; padding-left: 0; }
.isian-rp.kecil { width: 150px; flex: none; }
.isian-rp.kecil .isian, .baris-pilihan > .isian { height: 48px; }
.sakelar-baris { width: 100%; height: auto !important; min-height: 64px; padding: 8px 14px !important; justify-content: space-between !important; text-align: left; white-space: normal; }
.sakelar { width: 44px; height: 26px; flex: none; border-radius: 13px; background: var(--line); position: relative; }
.sakelar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: var(--surface); box-shadow: 0 1px 3px var(--bayang); }
.sakelar.nyala { background: var(--ok); }
.sakelar.nyala::after { left: 21px; }
/* Sakelar kecil dengan teks di baris refund (Tahap 2: sudah dibuat atau belum) */
.sakelar-teks { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0; margin-top: 4px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; align-self: flex-start; text-align: left; }
.segmen { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--panel); }
.segmen .tombol { height: 44px; border-color: transparent; background: transparent; }
.kategori { scrollbar-width: thin; }
.denah { padding-bottom: 96px; }
.grid-meja { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kartu-meja { min-height: 132px; padding: 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; border: 2px dashed var(--line); border-radius: 12px; background: transparent; color: var(--ink); align-items: stretch; }
.kartu-meja.terisi { border: 2px solid var(--ink); background: var(--surface); }
.kartu-meja.terisi-lain { border: 2px dashed var(--ink2); background: var(--surface); }
.tombol-meja { position: relative; }
.tombol-meja.terisi::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 4px; background: var(--tunggu); }
.titik-meja { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: var(--tunggu); }
.hari-rs { padding: 14px 4px 6px; border-bottom: 1px solid var(--line); }
.kartu-printer.redup { opacity: .72; }

/* Kertas: struk, tiket dapur, slip refund, rekap shift */
.struk { width: 360px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--kertas); color: var(--tinta); font-family: "IBM Plex Mono", Consolas, "Courier New", monospace; font-size: 15px; }
.struk pre { margin: 0; font: inherit; line-height: 20px; white-space: pre; }
/* Logo struk (1.4): gambar hitam putih di atas kepala struk dan tagihan */
.logo-struk { display: flex; justify-content: center; width: 100%; }
.logo-struk img { max-width: 100%; max-height: 96px; }
/* Label stiker (Fase C): satu kartu per item, dipisah per halaman saat dicetak */
.label-stiker { padding: 16px 20px; }
.label-stiker + .label-stiker { margin-top: 12px; }
.qr-klaim { width: 150px; height: 150px; flex: none; display: flex; align-items: center; justify-content: center; }
.qr-klaim svg { width: 100%; height: 100%; }

/* Ponsel */
.ponsel { width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); position: relative; overflow: hidden; --atas: 0px; --tinggi: 100dvh; }
.ponsel-atas { height: 56px; flex: none; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ponsel-atas .status { height: 44px; padding: 0 12px; }
/* Banner ponsel: teks di samping ikon, tombol aksinya di bawah teks (Daftar sekarang, Cara memperbaiki, Lihat antrean) */
.banner-ponsel { height: auto; padding: 8px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: start; }
.banner-ponsel .tombol { grid-column: 2; justify-self: start; height: 44px; }
.tab-ponsel { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border-bottom: 1px solid var(--line); }
.tab-ponsel button { height: 52px; border: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--ink); }
.tab-ponsel button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--ink); }
.ponsel-isi { flex: 1; min-height: 0; overflow-y: auto; }
.ponsel .katalog { height: auto; padding: 12px; overflow: visible; }
.ponsel .katalog-badan, .ponsel .katalog-menu { flex: none; overflow: visible; }
.ponsel .kategori .tombol { height: 48px; border-radius: 10px; }
.ponsel .grid-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bill-ponsel { min-height: 100%; background: var(--panel); }
/* Tab Bill memakai isi bill yang sama dengan panel tablet (komponen isi-bill); di ponsel tepinya 16 px */
.bill-ponsel .kepala-bill { padding: 12px 16px; }
.bill-ponsel .tombol-pelanggan { margin: 0 16px 12px; }
.bill-ponsel .chip-bill { padding: 0 16px 10px; }
.bill-ponsel .info-bayar { margin: 0 16px 12px; }
.bill-ponsel .alasan-kunci, .bill-ponsel .tombol-rinci { margin: 10px 16px 0; }
.bill-ponsel .daftar-pembayar { padding: 0 16px; }
/* Bilah alat tiga kolom: Diskon dan Kirim tiket (dua kolom) di baris pertama, Pisah, Bagi rata, Lainnya di baris kedua */
.bill-ponsel .alat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px 12px; }
.bill-ponsel .alat > :nth-child(2) { grid-column: span 2; }
.bill-ponsel .daftar-bill { flex: none; overflow: visible; }
.bill-ponsel .baris-bill { padding: 10px 16px; }
.bill-ponsel .total-bill { padding: 12px 16px; }
.aksi-ponsel { padding: 0 16px 16px; }
.ponsel-bawah { flex: none; min-height: 88px; padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; background: var(--surface); border-top: 1px solid var(--line); }
.ringkas-ponsel { height: 56px; border: 0; background: transparent; justify-content: center; padding: 0 4px; color: var(--ink); }
.menu-ponsel { top: 60px; right: 12px; width: min(320px, calc(100% - 24px)); }
.ponsel .snackbar { left: 12px; right: 12px; bottom: 100px; max-width: none; }

/* Alat uji (hanya data contoh) */
.chip-contoh { position: fixed; left: 6px; bottom: 6px; z-index: 40; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid currentColor; border-radius: 12px; background: var(--tunggu-bg); color: var(--tunggu); font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .9; }
.chip-contoh.beda { background: var(--galat-bg); color: var(--galat); }
.tirai-alat { position: fixed; z-index: 44; }
.panel-alat { position: fixed; left: 6px; bottom: 36px; z-index: 45; width: min(440px, calc(100vw - 12px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 16px 40px var(--bayang); }
.panel-alat section { padding-top: 10px; border-top: 1px solid var(--line); }
.panel-alat .tutup { width: 40px; height: 40px; }
.kotak-token .qr-svg { width: 168px; padding: 8px; background: #FFFFFF; border-radius: 8px; }
.token { word-break: break-all; font-family: "IBM Plex Mono", Consolas, monospace; }
.mono { font-family: "IBM Plex Mono", Consolas, monospace; letter-spacing: .1em; }

/* Utilitas: ditulis terakhir supaya mengalahkan bawaan komponen */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; }
.sb { justify-content: space-between; } .je { justify-content: flex-end; } .jc { justify-content: center; }
.ai-s { align-items: flex-start; } .ai-e { align-items: flex-end; } .ai-b { align-items: baseline; } .ai-st { align-items: stretch; } .ai-mulai { align-self: flex-start; }
.wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .none { flex: none; }
.g2 { gap: 2px; } .g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g14 { gap: 14px; }
.g16 { gap: 16px; } .g18 { gap: 18px; } .g20 { gap: 20px; } .g24 { gap: 24px; } .g32 { gap: 32px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.t13 { font-size: 13px; } .t14 { font-size: 14px; } .t15 { font-size: 15px; } .t16 { font-size: 16px; } .t17 { font-size: 17px; } .t18 { font-size: 18px; }
.t19 { font-size: 19px; } .t20 { font-size: 20px; } .t22 { font-size: 22px; } .t26 { font-size: 26px; } .t28 { font-size: 28px; }
.t32 { font-size: 32px; line-height: 1.15; } .t40 { font-size: 40px; line-height: 1.2; } .t64 { font-size: 64px; line-height: 1.2; }
.b4 { font-weight: 400; } .b5 { font-weight: 500; } .b6 { font-weight: 600; } .b7 { font-weight: 700; }
.redam { color: var(--ink2); } .tinta { color: var(--ink); } .lh { line-height: 1.45; } .tengah { text-align: center; } .kanan-teks { text-align: right; } .nowrap { white-space: nowrap; }
.mt-auto { margin-top: auto; } .p24 { padding: 24px; } .p32 { padding: 32px; } .pk { padding: 14px 16px; } .w280 { width: 280px; flex: none; } .scroll { overflow-y: auto; min-height: 0; }
.tengah-v { margin: auto 0; } .lebar-penuh { width: 100% !important; } .tanpa-garis { border: 0; } .garis-tinta { border-color: var(--ink) !important; } .garis-galat { border-color: var(--galat) !important; } .c-ok { color: var(--ok); }
.maks600 { max-width: 600px; } .maks640 { max-width: 640px; } .maks720 { max-width: 720px; } .maks760 { max-width: 760px; } .maks820 { max-width: 820px; }
.ok { background: var(--ok-bg); color: var(--ok); } .tunggu { background: var(--tunggu-bg); color: var(--tunggu); }
.off { background: var(--off-bg); color: var(--off); } .galat { background: var(--galat-bg); color: var(--galat); }

/* ===== Layar sempit: tablet tegak dan laptop kecil ===== */
/* Status printer yang normal cukup ikonnya; teksnya tetap dibacakan lewat aria-label dan tetap bisa diketuk.
 * Printer terputus tetap tampil dengan teks (status galat, bukan polos). */
@media (max-width: 1180px) {
  .status.polos { font-size: 0; gap: 0; }
}
@media (max-width: 1100px) {
  .menu-shift button { padding: 0 8px; }
  .status { padding: 0 10px; }
  .bilah { gap: 8px; }
  .bilah-kiri .tombol { padding: 0 10px; }
  .lembar-isi { gap: 20px; }
  /* Panel kanan sekitar 410 px di layar 1024: label tombol boleh dua baris daripada menembus tepi tombolnya */
  :is(.kiri, .kanan) .tombol { white-space: normal; text-align: center; line-height: 1.2; }
  .kanan .grid4 .tombol { padding: 0 6px; font-size: 14px; }
}
/* Tombol utama 240 px boleh menyempit bila berbagi baris dengan tombol lain di panel kanan (misalnya layar QRIS) */
@media (min-width: 700px) and (max-width: 1100px) {
  .kanan .baris-z4 > .z4 { width: auto; flex: 0 1 240px; min-width: 0; padding: 0 12px; }
}
/* Bilah atas memuat status sinkron yang bisa panjang ("Offline sejak 21 Okt 08.18"): makin sempit, makin banyak yang diringkas */
@media (max-width: 980px) {
  .bilah-kiri .tombol:last-child { display: none; }
}
/* Status printer tetap ada di tablet tegak (sebagai ikon, aturan 1180 px): itu satu-satunya jalan ke pengaturan printer di tablet
 * (observasi ponsel 26 Okt); chip sinkron yang menyusut memberi tempat */
@media (max-width: 900px) {
  .cari { width: 160px; }
}
@media (min-width: 700px) and (max-width: 820px) {
  .bilah-kiri .operator { padding: 0 10px 0 8px; }
  .bilah-kiri .operator > span:not(.ava) { display: none; }
  .menu-shift { padding-left: 6px; margin-left: 0; }
  .menu-shift button { padding: 0 6px; }
}
@media (max-width: 820px) {
  /* Tablet tegak dan ponsel: katalog terlalu sempit untuk kategori di samping, jadi kategori satu baris di atas menu */
  .katalog-badan { flex-direction: column; }
  .kategori { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .kategori .tombol { width: auto; height: 56px; min-height: 0; padding: 0 18px; white-space: nowrap; }
}

/* ===== Ponsel tegak ===== */
@media (max-width: 699px) {
  .layar { height: auto; min-height: 100dvh; overflow: visible; --tinggi: auto; }
  .layar.ada-banner { --atas: 56px; }
  .bilah { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 12px; }
  .bilah-kiri, .bilah-kanan { flex-wrap: wrap; }
  .bilah-kiri .tombol, .status.polos, .menu-shift { display: none; }
  .app:has(.ponsel) .chip-contoh { display: none; }
  /* Di layar lain chip ikut aliran halaman di paling bawah, tidak melayang di atas tombol Hapus, Bill baru, atau keypad */
  .chip-contoh { position: static; margin: 8px 12px 24px; }
  .banner { height: auto; padding: 8px 12px; flex-wrap: wrap; }
  .isi { flex-direction: column; height: auto; }
  .kiri, .kanan, .katalog, .panel-bill { width: 100%; height: auto; overflow: visible; flex: none; }
  .kanan { border-left: 0; border-top: 1px solid var(--line); }
  .p32, .p24 { padding: 20px 16px; }
  .penuh-layar, .penuh-layar.sempit { height: auto; padding: 20px 16px; }
  /* top dan bottom, bukan 100dvh saja: peramban tanpa dvh (Chrome < 108, Samsung Internet < 21) membuang tinggi itu */
  .lembar, .lembar.pin { position: fixed; top: 0; bottom: 0; width: 100%; height: auto; }
  .tirai-kiri, .tirai-pin, .tirai-penuh { position: fixed; top: 0; bottom: 0; height: auto; }
  .lembar-isi { flex-direction: column; gap: 20px; padding: 16px; }
  /* Isian yang tumbuh di baris yang boleh pindah baris (nomor struk Refund, Catatan di lembar item, nominal tunai) tidak terjepit
   * tombol di sebelahnya: di bawah lebar ini tombolnya turun ke baris berikutnya */
  .wrap > .grow { min-width: min(100%, 14rem); }
  .lembar-kepala { padding: 12px 16px; }
  .lembar-kaki { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .keypad, .w280 { width: 100%; }
  .modal { position: fixed; top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 16px; }
  .pratinjau { position: fixed; top: 16px; bottom: 16px; height: auto; }
  .z4 { width: auto; min-width: 160px; height: 60px; font-size: 18px; padding: 0 16px; }
  .z4.pojok { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .baris-z4 { margin-top: 16px; flex-wrap: wrap; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qr-tempat { width: 100%; height: auto; aspect-ratio: 1; }
  .t64 { font-size: 44px; } .t40 { font-size: 32px; } .t32 { font-size: 26px; }
  .kolom-pisah-wadah { grid-template-columns: 1fr; }
  .isi-pin { flex-direction: column; padding: 16px; gap: 16px; }
  .pilihan-awal { min-height: 0; padding: 16px; }
  .kamera { height: 240px; padding: 0 16px; }
  .snackbar { position: fixed; bottom: 36px; }
  .tab-metode { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tab-metode .tombol { height: 52px; font-size: 15px; padding: 0 6px; white-space: normal; }
  .kartu-bill { min-height: 140px; }
  /* Bayar dan lunas di ponsel: ringkasan tagihan dan kartu lunas di atas keypad dan katalog, tombol Terima menempel di bawah
   * layar, jadi jumlah, kembalian, dan tombolnya terlihat tanpa menggulir (observasi 26 Okt) */
  .isi-bayar > .kanan, .isi-lunas > .kanan { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .isi-bayar { padding-bottom: 88px; }
  /* z-index di bawah tirai (20): panel PIN, persetujuan manajer, dan pratinjau cetak harus menutupi bilah ini, bukan sebaliknya */
  .isi-bayar > .kanan .baris-z4 { position: fixed; left: 0; right: 0; bottom: 0; min-height: 88px; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); z-index: 10; }
  .app:has(.isi-bayar) .snackbar { bottom: 100px; }
  /* Di atas bilah yang menempel di bawah: Simpan di Kelola dan Printer, tombol Bill baru yang mengambang */
  .app:has(.kaki-kelola, .kaki-printer) .snackbar { bottom: 112px; }
  .app:has(.z4.pojok) .snackbar { bottom: 92px; }
  /* Selama lembar atau panel terbuka: snack beraksi milik layar di bawahnya tidak tampil, snack lain pindah ke bawah kepala lembar
   * supaya tidak menutupi keypad dan kaki lembar (observasi ponsel 26 Okt) */
  .app:has(.lembar) .snackbar { top: 76px; bottom: auto; }
  .app:has(.lembar) .snackbar:has(button) { display: none; }
  /* Panel persetujuan dan PIN: judul permintaan harus terbaca, pesan PIN salah sudah tampil di dalam panel */
  .app:has(.lembar.pin) .snackbar { display: none; }
  /* Transaksi di ponsel: ringkasan dan pilihan di atas daftar */
  .isi-tr .kanan { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .jam-tr { width: 42px; }
  /* Kelola menu di ponsel: daftar atau isian, bergantian */
  .isi-kelola.ada-pilih > .kiri, .isi-kelola:not(.ada-pilih) > .kanan { display: none; }
  .isi-kelola .kanan { border-top: 0; }
  .isian-rp.kecil { width: 120px; }
  .grid-meja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-ponsel { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
  /* Tombol utama layar penuh (Buka shift, Lanjutkan shift, Lunas, Refund, Tutup shift, Sinkron) menempel di bawah layar seperti
   * bilah Terima, di bawah tirai supaya lembar dan panel tetap menutupinya (observasi ponsel 26 Okt) */
  .layar .baris-z4.aksi-tetap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; min-height: 88px; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); flex-wrap: nowrap; }
  .layar .baris-z4.aksi-tetap > span { display: none; }
  .layar .baris-z4.aksi-tetap > .z4 { flex: 1 1 auto; }
  .layar .baris-z4.aksi-tetap > .tombol { flex: none; white-space: nowrap; }
  .isi:has(.aksi-tetap) { padding-bottom: 96px; }
  .app:has(.aksi-tetap) .snackbar { bottom: 100px; }
  /* Layar kunci: sesudah nama dipilih, bagian PIN naik ke atas dan daftar staf turun; Ganti mengembalikan pilihan */
  .ganti-staf { display: inline-flex; height: 44px; }
  .isi:has(> .kiri.ada-staf) > .kanan { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .staf { height: auto; min-height: 72px; padding: 10px 12px; gap: 10px; }
  .staf .ava.besar { width: 40px; height: 40px; }
  .keypad button { height: 64px; }
  /* Cari menu dan pindai kamera di tab Menu */
  .ponsel .katalog-atas { margin-bottom: 12px; gap: 8px; }
  .ponsel .katalog-atas .cari { height: 48px; }
  .ponsel .katalog-atas .kotak56 { width: 48px; height: 48px; }
  /* Empat tombol sebaris (struk, WhatsApp, email di layar lunas) jadi 2x2 */
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Kas awal biasa di atas keypad Buka shift, satu ketukan tanpa menggulir */
  .kas-biasa { order: -1; flex-direction: row; align-items: center; gap: 12px; }
  /* Lembar uang (Item manual, Kas, Diskon): keypad tepat di bawah angka, keterangan lain di bawah keypad */
  .lembar-isi > .isi-uang { display: contents; }
  .lembar-isi > .isi-uang > * { order: 3; }
  .lembar-isi .urut-awal { order: 1; }
  .lembar-isi > .keypad, .lembar-isi > .isi-uang > .keypad { order: 2; }
  .lembar-isi .urut-akhir { order: 4; }
  /* Tombol pilihan di lembar item: nama di atas harga, boleh dua baris, tidak meluber */
  .lembar .grid3 .tombol.sb { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; height: auto; min-height: 64px; padding: 8px 14px; white-space: normal; text-align: left; }
  /* Item manual jadi bar tipis selebar katalog */
  .ponsel .grid-menu .tile.manual { grid-column: 1 / -1; height: auto; min-height: 56px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; }
  .ponsel .grid-menu .tile.manual > .nama, .ponsel .grid-menu .tile.manual > .row { padding: 0; margin: 0; }
  .ponsel .grid-menu .tile.manual .foto-tile { display: none; }
  /* Layar Bayar: kepala di atas ringkasan; untuk QRIS kode QR sebelum langkah-langkah; nominal cepat 2x2 */
  .kepala-bayar { order: -2; padding: 16px 16px 0; }
  .isi-bayar.metode-qr > .kanan { order: 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .nominal-cepat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nominal-cepat > span { display: none; }
  /* Pratinjau struk: kertas mengikuti lebar pratinjau */
  .kertas-gulir .struk { width: auto; }
  /* Bilah atas layar selain kasir satu baris: keterangan tempat, jam, dan tombol tema disembunyikan (tema ada di menu ☰ kasir dan
   * di layar kunci); nama operator terpotong rapi */
  .bilah-kiri > .redam, .bilah .jam-bilah, .bilah .tukar-tema { display: none; }
  .bilah-kiri { min-width: 0; flex: 0 1 auto; }
  .bilah .operator { min-width: 0; }
  .bilah .operator > span:not(.ava) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Kepala kasir ponsel: nama operator boleh menyusut, chip dan tombol di kanan tidak */
  .ponsel-atas .operator { min-width: 0; flex: 0 1 auto; }
  .ponsel-atas > .row { flex: none; }
  .nama-opr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tombol-menu { position: relative; }
  .titik-menu { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 5px; background: var(--galat); }
  /* Chip langkah Tutup shift juga tombol (kembali ke langkah sebelumnya): 44 px di ponsel */
  ol[aria-label="Langkah"] .chip.besar { height: 44px; border-radius: 22px; }
}

/* ===== Ponsel mendatar (Ricky 26 Okt: "bisa mendatar bisa potrait"): tinggi 500 px ke bawah =====
 * Mode tata letak tetap ditentukan lebar (ponsel di bawah 700 px). Aturan bersama: angka dan keypad diperkecil, keypad PIN di
 * samping nama supaya PIN dan Masuk terlihat tanpa menggulir, dan isi bill (baris lalu total) didahulukan sebelum sumber
 * pesanan, pelanggan, dan alat bill. */
@media (max-height: 500px) and (orientation: landscape) {
  .t32 { font-size: 24px; } .t40 { font-size: 30px; } .t64 { font-size: 40px; } .t28, .t26 { font-size: 22px; }
  .keypad { width: 240px; gap: 6px; }
  .keypad button, .keypad.pendek button { height: 48px; font-size: 24px; }
  .isian-uang { padding: 6px 14px; }
  .nilai-uang { min-height: 36px; font-size: 30px; line-height: 36px; }
  .lembar-kepala { padding: 8px 16px; }
  .lembar-isi { padding: 12px 16px; gap: 16px; }
  .lembar-isi.col { gap: 14px; }
  .isi-pin { padding: 12px 16px; gap: 16px; }
  .kembali { height: 44px; }
  /* Layar kunci: sesudah nama dipilih, daftar staf disembunyikan (Ganti mengembalikannya); PIN di kiri, keypad di kanan */
  .ganti-staf { display: inline-flex; height: 44px; }
  .isi:has(> .kiri.ada-staf) > .kiri { display: none; }
  .isi:has(> .kiri.ada-staf) > .kanan { width: auto; flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: auto auto auto 1fr; column-gap: 32px; row-gap: 12px; align-content: start; padding: 16px 24px; border: 0; }
  .isi:has(> .kiri.ada-staf) > .kanan > * { grid-column: 1; }
  .isi:has(> .kiri.ada-staf) > .kanan > .row.jc { grid-column: 2; grid-row: 1 / -1; }
  .isi:has(> .kiri.ada-staf) > .kanan > .baris-z4 { grid-row: 4; align-self: end; position: static; margin: 0; padding: 0; border: 0; background: none; flex-wrap: wrap; }
  /* Masuk sebaris dengan Absen masuk dan Absen pulang bila muat (boleh menyempit), turun ke baris sendiri bila tidak */
  .isi:has(> .kiri.ada-staf) > .kanan > .baris-z4 > .z4 { width: auto; flex: 1 1 120px; min-width: 112px; }
  .isi:has(> .kiri.ada-staf) > .kanan > .baris-z4 .tombol { padding: 0 14px; white-space: nowrap; }
  /* Isi bill: judul, baris, total, lalu sumber, pelanggan, dan alat bill */
  :is(.panel-bill, .bill-ponsel) .kepala-bill { display: contents; }
  :is(.panel-bill, .bill-ponsel) .kepala-bill > * { order: 3; margin: 0 16px 10px; }
  :is(.panel-bill, .bill-ponsel) .kepala-bill > :first-child { order: 0; margin: 10px 16px 4px; }
  :is(.panel-bill, .bill-ponsel) :is(.tombol-rinci, .daftar-pembayar, .daftar-bill) { order: 1; }
  :is(.panel-bill, .bill-ponsel) .total-bill { order: 2; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
  :is(.panel-bill, .bill-ponsel) :is(.tombol-pelanggan, .chip-bill, .info-bayar, .alat, .alasan-kunci) { order: 3; }
  :is(.panel-bill, .bill-ponsel) .alat { border-bottom: 0; }
  :is(.panel-bill, .bill-ponsel) .baris-bill { padding: 10px 16px; }
  .aksi-bill, .aksi-ponsel { order: 4; }
  /* Buka shift: Kas awal biasa di samping isian kas awal, keypad di bawahnya */
  .kiri:has(> .laci-kas) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-content: start; }
  .kiri:has(> .laci-kas) > * { grid-column: 1 / -1; }
  .kiri:has(> .laci-kas) > .isian-uang { grid-column: 1; }
  .kiri:has(> .laci-kas) > .row.wrap { display: contents; }
  .kiri:has(> .laci-kas) .kas-biasa { grid-column: 2; grid-row: 3; align-self: end; order: 0; flex-direction: column; align-items: stretch; gap: 4px; }
  .kiri:has(> .laci-kas) .keypad { grid-column: 1 / -1; }
  .laci-kas { padding: 8px 14px; }
  .laci-kas .tombol.h48 { height: 44px; }
}

/* Dua kolom pendek (lebar 700 ke atas): tiap panel menggulir sendiri dan aksi utama menempel di bawah panelnya */
@media (min-width: 700px) and (max-height: 500px) {
  .kiri, .kanan, .kiri.p32, .kanan.p32, .kiri.p24, .kanan.p24 { padding: 12px 16px; gap: 10px; }
  /* Ruang di bawah keypad terakhir: chip DATA CONTOH di pojok kiri bawah tidak menutupinya */
  .kiri, .kiri.p32, .kiri.p24 { padding-bottom: 36px; }
  .z4 { height: 56px; font-size: 18px; }
  .tombol.h64 { height: 48px; font-size: 16px; }
  .tombol.h56 { height: 48px; }
  .tab-metode .tombol.h64, .nominal-cepat .tombol.h64 { height: 44px; font-size: 15px; }
  .nominal-cepat { gap: 6px; }
  .nominal-cepat > span { display: none; }
  .nominal-cepat .nominal { text-align: left; }
  .kanan > .baris-z4, .kanan.lunas > .baris-z4 { position: sticky; bottom: -12px; z-index: 2; margin: auto -16px -12px; padding: 10px 16px 12px; background: var(--panel); border-top: 1px solid var(--line); }
  .baris-z4 > .tombol { flex: none; white-space: nowrap; }
  /* Panel bill menggulir utuh; Bayar menempel di bawahnya, Kode Warlok dan Simpan menyempit tanpa ikon supaya ketiganya muat */
  .panel-bill { width: clamp(380px, 46%, 520px); overflow-y: auto; }
  .panel-bill > * { flex: none; }
  .panel-bill .daftar-bill { overflow: visible; }
  .aksi-bill { position: sticky; bottom: 0; z-index: 2; margin-top: auto; padding: 8px 16px; background: var(--panel); border-top: 1px solid var(--line); }
  .aksi-bill .kotak-112 { width: 80px; height: 56px; flex: none; font-size: 14px; }
  .aksi-bill .kotak-112 > svg { display: none; }
  .aksi-bill .z4 { width: auto; flex: 1 1 auto; min-width: 0; }
  /* Katalog: kategori tetap tegak di samping menu, tile berfoto lebih pendek, Item manual jadi bar tipis */
  .katalog { padding: 10px 12px; gap: 10px; }
  .katalog-atas .cari { height: 44px; }
  .katalog-atas .kotak56 { width: 44px; height: 44px; }
  .katalog-badan { flex-direction: row; gap: 10px; }
  .kategori { width: 120px; flex-direction: column; gap: 6px; overflow-x: hidden; overflow-y: auto; }
  .kategori .tombol { width: 100%; height: auto; min-height: 44px; padding: 6px 12px; font-size: 15px; white-space: normal; border-radius: 10px; }
  .grid-menu { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; padding-bottom: 16px; }
  .tile { height: 96px; padding: 12px; }
  .tile .nama { font-size: 16px; }
  .grid-menu.berfoto .tile { min-height: 132px; padding-bottom: 10px; }
  .grid-menu.berfoto .foto-tile { height: 64px; font-size: 26px; }
  .grid-menu.berfoto .tile > .nama { padding: 8px 10px 0; }
  .grid-menu.berfoto .tile > .row { padding: 6px 10px 0; font-size: 15px; }
  .katalog .grid-menu .tile.manual { grid-column: 1 / -1; height: auto; min-height: 44px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 14px; }
  .katalog .grid-menu .tile.manual > .nama, .katalog .grid-menu .tile.manual > .row { padding: 0; margin: 0; }
  .katalog .grid-menu .tile.manual .foto-tile { display: none; }
  /* Layar kunci: jarak bawah untuk chip DATA CONTOH di pojok kiri bawah; dua kolom staf yang ringkas, nama dan peran tidak meluber */
  .isi:has(> .kiri.ada-staf) > .kanan { padding-bottom: 40px; }
  .grid-staf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staf { height: auto; min-height: 64px; padding: 8px 12px; gap: 10px; }
  .staf .ava.besar { width: 40px; height: 40px; font-size: 17px; }
  .lembar-kaki { padding: 8px 16px; }
}

/* Ponsel mendatar (lebar di bawah 700): tab Menu dan Bill pindah ke kepala, sumber pesanan hanya di tab Bill, cari dan kategori
 * sebaris, bilah bawah dan tombol yang menempel lebih tipis */
@media (max-width: 699px) and (max-height: 500px) and (orientation: landscape) {
  .z4 { height: 52px; }
  .p32, .p24 { padding: 12px 16px; }
  .layar .baris-z4.aksi-tetap, .isi-bayar > .kanan .baris-z4 { min-height: 68px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .isi:has(.aksi-tetap), .isi-bayar { padding-bottom: 76px; }
  .app:has(.aksi-tetap) .snackbar, .app:has(.isi-bayar) .snackbar { bottom: 80px; }
  .isi:has(> .kiri.ada-staf) > .kanan { padding: 12px 16px; column-gap: 24px; }
  .staf { min-height: 60px; }
  .lembar-kaki { padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .ponsel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .ponsel::before { content: ''; grid-column: 1 / -1; grid-row: 1; background: var(--surface); border-bottom: 1px solid var(--line); }
  .ponsel-atas { display: contents; }
  .ponsel-atas > :first-child { grid-column: 1; grid-row: 1; align-self: center; max-width: 180px; margin-left: 12px; }
  .ponsel-atas > .row { grid-column: 3; grid-row: 1; align-self: center; padding-right: 12px; }
  .tab-ponsel { grid-column: 2; grid-row: 1; margin: 0 8px; border-bottom: 0; background: transparent; }
  .tab-ponsel button { height: 56px; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .banner-ponsel { grid-column: 1 / -1; grid-row: 2; }
  .ponsel-isi { grid-column: 1 / -1; grid-row: 3; }
  .ponsel-bawah { grid-column: 1 / -1; grid-row: 4; min-height: 64px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .ringkas-ponsel, .bayar-ponsel { height: 48px; }
  .ponsel .snackbar { bottom: 76px; }
  .menu-ponsel { top: 56px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
  .ponsel-isi > .tombol-sumber.lebar { display: none; }
  .ponsel .katalog { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(0, 3fr); gap: 8px 10px; padding: 8px 12px; }
  .ponsel .katalog-badan { display: contents; }
  .ponsel .katalog-atas { grid-column: 1; margin-bottom: 0; }
  .ponsel .kategori { grid-column: 2; }
  .ponsel .katalog-menu { grid-column: 1 / -1; }
  .ponsel .katalog-atas .cari, .ponsel .kategori .tombol { height: 44px; }
  .ponsel .katalog-atas .kotak56 { width: 44px; height: 44px; }
  .ponsel .grid-menu { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .ponsel .grid-menu .tile.manual { min-height: 44px; padding: 6px 14px; }
  .ponsel .grid-menu.berfoto .tile.kecil:not(.manual) { min-height: 128px; }
  .ponsel .grid-menu.berfoto .foto-tile { height: 64px; font-size: 26px; }
  /* Tombol yang digulir ke pandangan (fokus, scrollIntoView) berhenti di atas bilah yang menempel di bawah */
  html:has(.aksi-tetap), html:has(.isi-bayar) { scroll-padding-bottom: 80px; }
}

/* ===== Cetak 58 mm ===== */
#area-cetak { display: none; }
@media print {
  @page { margin: 0; }
  html, body { background: #FFFFFF !important; height: auto; }
  body > *:not(#area-cetak) { display: none !important; }
  #area-cetak { display: block !important; width: 58mm; }
  #area-cetak .struk { width: 58mm; padding: 3mm 2mm 6mm; gap: 2mm; background: #FFFFFF; color: #000000; font-size: 2.6mm; box-shadow: none; }
  #area-cetak .struk pre { line-height: 1.25; }
  #area-cetak .qr-klaim { width: 30mm; height: 30mm; }
  #area-cetak .logo-struk img { max-width: 48mm; max-height: 18mm; }
  #area-cetak .label-stiker { padding: 2mm; margin: 0; break-after: page; }
  #area-cetak .label-stiker:last-child { break-after: auto; }
}

/* Tanya keluar saat tombol Kembali ditekan di layar utama (Ricky 26 Okt); berlaku di tablet dan ponsel */
.keluar-tirai { position: fixed; inset: 0; z-index: 60; background: var(--tirai); }
.keluar-tanya { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 61; width: min(440px, calc(100% - 32px)); padding: 24px; display: flex; flex-direction: column; gap: 16px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 16px 40px var(--bayang); }