/* ==========================================================================
   Pesanin — sistem visual

   Arahnya: minimalis modern. Permukaan hampir putih netral, teks berkontras
   tinggi, satu warna aksen, dan pemisahan antar bagian dikerjakan oleh ruang
   kosong serta bayangan halus — bukan oleh kotak bergaris.

   Perubahan dari versi sebelumnya, dan alasannya:

   1. TIPOGRAFI. Dulu memakai font sistem tanpa webfont, dengan alasan
      kecepatan. Alasannya benar tapi kesimpulannya salah: font variable
      Plus Jakarta Sans yang dipangkas ke Latin hanya 27 KB, di-host sendiri
      (tanpa permintaan ke domain pihak ketiga), dipreload, dan memakai
      font-display: swap sehingga teks tampil seketika dengan font sistem
      lalu bertukar. Biayanya jauh lebih kecil daripada yang aku perkirakan,
      dan pengaruhnya ke kesan "produk sungguhan" jauh lebih besar.

      Plus Jakarta Sans dirancang Tokotype untuk identitas kota Jakarta.
      Dipilih karena cocok konteksnya, bukan karena sedang tren.

   2. GARIS PUTUS-PUTUS. Dulu dipakai untuk hampir semua pembatas: baris
      tabel, kartu, judul kategori. Terlalu banyak, dan garis putus-putus
      membaca sebagai panel admin lama. Sekarang hanya dipakai di komponen
      nota — satu-satunya tempat motif itu punya arti, karena memang meniru
      sobekan kertas struk.

   3. WARNA AKSEN. Dulu magenta #C2185B, yaitu warna bawaan Material Design
      2014. Sekarang biru pekat yang tidak bertabrakan dengan hijau (lunas),
      kuning (menunggu), dan merah (bahaya), sehingga status tetap terbaca
      jelas. Tetap bisa ditimpa per tenant.

   4. RUANG DAN SUDUT. Bidang bernapas lebih lega, sudut lebih besar dan
      konsisten, bayangan tipis menggantikan garis tepi pada kartu.

   Yang TIDAK berubah: angka tabular untuk seluruh kolom uang. Di aplikasi
   keuangan itu bukan hiasan — kolom angka yang tidak lurus membuat orang
   salah baca nominal.
   ========================================================================== */

/* Satu berkas variable mencakup seluruh ketebalan 200-800. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/statis/fonts/plus-jakarta-sans.woff2') format('woff2');
}

:root {
  /* Permukaan: netral, bukan gading. Warm palette membaca sebagai vintage. */
  --kertas:      #FAFAFB;   /* latar halaman */
  --kertas-2:    #F4F4F6;   /* isian lembut, hover */
  --kertas-3:    #EAEAEE;   /* pembatas kuat, bilah kosong */
  --putih:       #FFFFFF;   /* permukaan kartu */

  --tinta:       #101014;   /* teks utama */
  --redup:       #61616B;   /* teks pendukung */
  --samar:       #9A9AA3;   /* teks paling lemah, placeholder */
  --garis:       #E6E6EA;   /* garis tepi */
  --garis-tipis: #F0F0F3;   /* pembatas baris tabel */

  --karbon:      #155EEF;   /* aksen; ditimpa warna tenant */
  --karbon-lembut: #EBF1FE;
  --lunas:       #0F7B55;
  --lunas-lembut:#E7F6EF;
  --tunggu:      #A35B00;
  --tunggu-lembut:#FCF3E4;
  --bahaya:      #C42B1C;
  --bahaya-lembut:#FDEDEC;

  --r:    14px;   /* kartu */
  --r-sm: 10px;   /* kontrol */
  --r-xs: 8px;
  --r-penuh: 999px;

  /* Bayangan menggantikan garis tepi pada kartu: lebih ringan secara visual
     dan tidak membuat halaman tampak seperti kumpulan kotak. */
  --bayang:    0 1px 2px rgba(16, 16, 20, .04), 0 1px 3px rgba(16, 16, 20, .05);
  --bayang-mid: 0 2px 4px rgba(16, 16, 20, .04), 0 6px 16px rgba(16, 16, 20, .07);
  --bayang-atas: 0 -1px 0 rgba(16, 16, 20, .06), 0 -8px 28px rgba(16, 16, 20, .12);

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Atribut `hidden` harus selalu menang.
   Nilai bawaannya cuma `display: none` dengan kekhususan paling rendah, jadi
   satu aturan seperti `.qty button { display: flex }` sudah cukup untuk
   membatalkannya -- dan elemen yang disembunyikan JavaScript tetap terlihat.
   Itu pernah terjadi di sini: tombol "Add" tetap tampil di samping pengatur
   jumlah setelah item masuk keranjang. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--kertas);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.55;
  /* TANPA letter-spacing negatif untuk teks badan.
     Letter-spacing negatif ikut memampatkan karakter spasi, sehingga jarak
     antar kata menyempit dan kalimat terbaca menyatu. Rapatkan hanya pada
     judul berukuran besar, tempat jarak bawaannya memang terasa longgar.

     Spasi bawaan Plus Jakarta Sans terukur 0.20 em, tepat di batas bawah
     rentang nyaman (0.20-0.32 em). Ditambah sedikit ke ~0.24 em: bahasa
     Indonesia banyak kata panjang, dan jarak antar kata yang sempit membuat
     kalimat terbaca menyatu. */
  word-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { letter-spacing: -.022em; font-weight: 700; }

/* Angka uang harus lurus satu sama lain. Ini alasan utama kelas ini ada. */
.num, .uang, td.num, th.num, input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Label mikro bergaya cap nota */
/* Label mikro. Jarak hurufnya dikurangi dari .1em: dengan font yang punya
   karakter sendiri, letterspacing berlebih justru terbaca berisik. */
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--samar);
}

/* Garis sobekan — motif tanda tangan produk ini */
/* Pembatas biasa: garis rambut lurus, bukan putus-putus.
   Garis putus-putus disisakan HANYA untuk komponen .nota, satu-satunya tempat
   motif itu punya arti karena memang meniru sobekan kertas struk. */
.perforasi {
  height: 1px;
  border: 0;
  border-top: 1px solid var(--garis);
  margin: 20px 0;
}
.nota .perforasi { border-top: 1px dashed var(--garis); }

a { color: var(--karbon); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 1.5px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--karbon);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------- Kerangka ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.wrap-sempit { max-width: 660px; margin: 0 auto; padding: 0 16px; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 250, 251, .86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--garis);
}
.topbar-in {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; max-width: 1080px; margin: 0 auto;
}
.topbar h1 { font-size: 15px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.topbar .sub { font-size: 11px; color: var(--redup); }

/* Lebar diatur di sini, bukan lewat gaya inline di HTML.
   Gaya inline mengalahkan media query, dan itu pernah membuat navigasi tetap
   terhimpit di layar HP walaupun aturan responsifnya sudah benar. */
.topbar-judul {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.topbar-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--garis);
  background: var(--putih);
}

.topbar-keluar {
  flex: 0 0 auto;
}

.nav { display: flex; flex: 1; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 7px 12px; font-size: 13.5px; font-weight: 500;
  color: var(--redup); text-decoration: none; border-radius: var(--r-penuh);
  white-space: nowrap; transition: background .14s ease, color .14s ease;
}
.nav a:hover { background: var(--kertas-2); color: var(--tinta); }
.nav a.aktif { background: var(--tinta); color: #fff; font-weight: 600; }

/* Di layar HP navigasi turun ke barisnya sendiri, selebar layar.
   Sebelumnya ia terhimpit antara nama usaha dan tombol Keluar, dan hanya
   menyisakan ruang untuk dua menu -- Rekap, Laporan, dan Pengaturan praktis
   tidak bisa dijangkau pemilik dari HP. Menu yang ada tapi tidak terlihat sama
   buruknya dengan menu yang tidak ada.

   Aturan ini HARUS ditulis SETELAH blok .nav di atas. Keduanya sama kuat, jadi
   yang menang adalah yang ditulis terakhir; kalau dipindah ke atas, flex: 1
   akan menimpanya dan navigasi kembali terhimpit. */
@media (max-width: 720px) {
  .topbar-in { flex-wrap: wrap; gap: 7px 12px; padding: 9px 12px; }
  .topbar-judul { flex: 1 1 auto; }
  .nav { order: 3; flex: 0 0 100%; width: 100%; gap: 1px; }
  .nav a { padding: 6px 10px; font-size: 12.5px; }
}

main { padding: 26px 0 110px; }

.judul-hal {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.judul-hal h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.judul-hal p { margin: 4px 0 0; color: var(--redup); font-size: 13.5px; }

/* ---------- Kartu ---------- */
.kartu {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--bayang);
}
.kartu-rapat { padding: 14px; }
.kartu h3 { margin: 0 0 12px; font-size: 15px; letter-spacing: -.02em; }

.grid { display: grid; gap: 14px; }

/* min-width: 0 pada anak grid.
   Tanpa ini, anak grid menolak menyusut lebih kecil dari lebar minimum isinya
   (nilai bawaan min-width untuk anak grid adalah auto, bukan 0). Satu tabel
   dengan kolom nowrap di dalamnya cukup untuk mendorong SELURUH halaman
   melebar: halaman Pengaturan pernah jadi 578px di layar 360px karena tabel
   daftar pengguna, padahal tabelnya sendiri sudah dibungkus .tabel-bungkus
   yang bisa digulung mendatar.
   Ini bug yang sama sekali tidak terlihat di layar lebar. */
.grid > * { min-width: 0; }
/* Kolom yang isinya beda tinggi tidak perlu diregangkan sama panjang --
   kartu "tutup kasir" akan punya ruang kosong menganga di bawahnya. */
.grid-atas { align-items: start; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }

/* Di layar HP, kartu statistik tetap dua kolom -- bukan satu.
   Empat kartu bertumpuk vertikal memakan seluruh layar, sehingga kasir harus
   menggulung jauh sebelum melihat pesanan pertama. Padahal angka-angka itu
   cuma sekilas dilihat; yang dikerjakan ada di bawahnya. */
@media (max-width: 520px) {
  .g2, .g3 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { padding: 10px 11px; }
  .stat .nilai { font-size: 17px; letter-spacing: -.02em; }
  .stat .label { font-size: 9px; letter-spacing: .07em; }
  .stat .ket { font-size: 10px; }
}

/* ---------- Statistik ---------- */
.stat {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r); padding: 16px 17px; box-shadow: var(--bayang);
}
.stat .nilai {
  font-size: 24px; font-weight: 700; letter-spacing: -.035em;
  margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat .ket { font-size: 12px; color: var(--samar); margin-top: 4px; }
.stat.utama { background: var(--tinta); border-color: var(--tinta); box-shadow: var(--bayang-mid); }
.stat.utama .label { color: rgba(255,255,255,.58); }
.stat.utama .nilai { color: #fff; }
.stat.utama .ket { color: rgba(255,255,255,.5); }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid var(--garis);
  background: var(--putih); color: var(--tinta); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; text-decoration: none;
  min-height: 42px; box-shadow: var(--bayang);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.btn:hover { background: var(--kertas-2); }
/* Tanpa translateY saat ditekan: pergeseran itu membuat antarmuka terasa
   murah, dan di layar sentuh tidak pernah terlihat karena tertutup jari. */
.btn:active { box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-utama { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn-utama:hover { background: #26262E; }
.btn-karbon { background: var(--karbon); border-color: var(--karbon); color: #fff; }
.btn-karbon:hover { background: var(--karbon); filter: brightness(1.07); }
.btn-lunas { background: var(--lunas); border-color: var(--lunas); color: #fff; }
.btn-lunas:hover { background: var(--lunas); filter: brightness(1.07); }
.btn-kecil { padding: 6px 12px; font-size: 13px; min-height: 34px; border-radius: var(--r-xs); }
.btn-blok { width: 100%; }
.btn-bahaya { color: var(--bahaya); border-color: var(--garis); }
.btn-bahaya:hover { background: var(--bahaya-lembut); border-color: #F0CFCB; }

/* ---------- Form ---------- */
label.f { display: block; margin-bottom: 12px; }
/* Label form pakai huruf biasa, bukan kapital berjarak.
   Kapital berjarak untuk setiap label membuat form terbaca seperti borang
   pemerintah; disisakan hanya untuk label statistik yang memang sangat kecil. */
label.f > span {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: -.005em;
  color: var(--tinta); margin-bottom: 6px;
}
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=tel], input[type=search], input[type=month],
select, textarea {
  width: 100%; padding: 10px 13px; font: inherit; font-size: 15px;
  border: 1px solid var(--garis); border-radius: var(--r-sm);
  background: var(--putih); color: var(--tinta); min-height: 44px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover { border-color: #D6D6DC; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--karbon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--karbon) 14%, transparent);
}
::placeholder { color: var(--samar); }

/* Kolom berkas dan warna punya lebar bawaan dari browser yang tidak mau
   menyusut, dan itu cukup untuk mendorong seluruh halaman melebar di HP --
   halaman Pengaturan pernah meluber sampai 578px di layar 360px karena ini.
   Selalu sertakan setiap jenis input baru di sini. */
input[type=file], input[type=color] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
input[type=file] {
  padding: 8px 9px; font: inherit; font-size: 13px;
  border: 1px solid var(--garis); border-radius: var(--r-sm);
  background: #fff; color: var(--tinta);
}
input[type=file]::file-selector-button {
  font: inherit; font-size: 12.5px; margin-right: 9px;
  padding: 5px 9px; border: 1px solid var(--garis);
  border-radius: var(--r-sm); background: var(--kertas-2);
  color: var(--tinta); cursor: pointer;
}
input[type=color] { height: 42px; padding: 4px; border: 1px solid var(--garis); border-radius: var(--r-sm); }

/* Jaring pengaman: tidak ada satu pun elemen yang boleh mendorong halaman
   melebar dari layar. Tabel dikecualikan karena sengaja digulung mendatar di
   dalam .tabel-bungkus. */
img, video, canvas, iframe, pre { max-width: 100%; }
body { overflow-wrap: break-word; }
textarea { min-height: 68px; resize: vertical; }
input:disabled, select:disabled { background: var(--kertas-2); color: var(--samar); }
.bantuan { font-size: 12.5px; color: var(--redup); margin-top: 6px; line-height: 1.5; }

/* ---------- Lencana status ---------- */
.lencana {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-penuh); font-size: 11.5px;
  font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
.l-lunas  { background: var(--lunas-lembut);  color: var(--lunas); }
.l-tunggu { background: var(--tunggu-lembut); color: var(--tunggu); }
.l-karbon { background: var(--karbon-lembut); color: var(--karbon); }
.l-netral { background: var(--kertas-3);      color: var(--redup); }

/* ---------- Tabel ---------- */
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  color: var(--samar);
  padding: 0 12px 9px; border-bottom: 1px solid var(--garis); white-space: nowrap;
}
table.data td {
  padding: 12px; border-bottom: 1px solid var(--garis-tipis); vertical-align: middle;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--kertas); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { text-align: right; }

/* ---------- Halaman menu (pembeli) ---------- */
.menu-kepala { padding: 30px 0 20px; text-align: center; }
.menu-logo {
  width: 66px; height: 66px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--garis); margin: 0 auto 10px; display: block; background: #fff;
}
.menu-kepala h1 { margin: 0; font-size: 28px; letter-spacing: -.035em; line-height: 1.12; }
.menu-kepala .tagline { color: var(--redup); font-size: 13.5px; margin-top: 4px; }

.menu-tagline-footer {
  text-align: center;
  color: var(--redup);
  font-size: 13px;
  margin: 28px 0 20px;
  padding: 0 20px;
}

.status-buka {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 3px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 700;
}
.status-buka.buka  { background: var(--lunas-lembut); color: var(--lunas); }
.status-buka.tutup { background: var(--kertas-3);     color: var(--redup); }
.titik { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Judul kategori: teks tebal berukuran nyata, tanpa garis penyambung.
   Garis putus-putus di setiap judul membuat halaman menu terasa seperti daftar
   inventaris, bukan menu yang mengundang. */
.kategori-judul {
  margin: 30px 0 6px; font-size: 17px; font-weight: 700;
  letter-spacing: -.02em; color: var(--tinta);
}

.item {
  display: flex; gap: 14px; padding: 16px 0;
  border-bottom: 1px solid var(--garis-tipis);
}
.item:last-child { border-bottom: 0; }
.item-foto {
  width: 82px; height: 82px; border-radius: 12px; object-fit: cover;
  background: var(--kertas-2); flex: 0 0 82px;
}
.item-foto.kosong {
  display: flex; align-items: center; justify-content: center;
  color: var(--samar); font-size: 10px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--garis);
}
.item-isi { flex: 1; min-width: 0; }
.item-nama { font-weight: 600; font-size: 15.5px; letter-spacing: -.015em; }
.item-desk {
  font-size: 12.5px; color: var(--redup); margin-top: 2px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-harga { font-weight: 700; margin-top: 7px; font-variant-numeric: tabular-nums; font-size: 15px; }
.item.habis { opacity: .5; }
.item.habis .item-foto { filter: grayscale(1); }

.qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qty-grup { display: flex; align-items: center; gap: 8px; }
.qty button {
  width: 38px; height: 38px; border-radius: var(--r-penuh);
  border: 1px solid var(--garis); background: var(--putih); font-size: 19px;
  line-height: 1; cursor: pointer; color: var(--tinta); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--bayang); transition: background .14s ease;
}
.qty button:hover:not(:disabled) { background: var(--kertas-2); }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty .nilai {
  min-width: 26px; text-align: center; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.qty .tambah-awal { width: auto; padding: 0 18px; font-size: 13.5px; font-weight: 600; }

.bar-keranjang {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--tinta); color: #fff;
  padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
  display: none; box-shadow: var(--bayang-atas);
}
.bar-keranjang.tampil { display: block; }
.bar-keranjang-in {
  max-width: 660px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bar-keranjang .ringkas { font-size: 12px; color: rgba(255,255,255,.65); }
.bar-keranjang .total { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Nota (elemen tanda tangan) ---------- */
.nota {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r); padding: 20px; position: relative;
  box-shadow: var(--bayang);
}
.nota-baris {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: 14px;
}
.nota-baris .kiri { flex: 1; min-width: 0; }
.nota-baris .kanan { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.nota-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 13px; margin-top: 8px; border-top: 1px solid var(--tinta);
  font-weight: 700;
}
.nota-total .angka { font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* ---------- Antrean kasir ---------- */
.order-kartu {
  border: 1px solid var(--garis); border-radius: var(--r);
  background: var(--putih); padding: 16px; margin-bottom: 12px;
  border-left: 3px solid var(--garis); box-shadow: var(--bayang);
}
.order-kartu.baru { border-left-color: var(--tunggu); }
.order-kartu.lunas { border-left-color: var(--lunas); }
.order-kartu.batal { opacity: .55; border-left-color: var(--samar); }
.order-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.order-no { font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.order-meta { font-size: 12px; color: var(--redup); margin-top: 1px; }
.order-total { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.order-item-list { font-size: 13px; color: var(--redup); margin: 8px 0 0; line-height: 1.55; }
.order-aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@keyframes denyut {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 24, 91, .28); }
  50%      { box-shadow: 0 0 0 6px rgba(194, 24, 91, 0); }
}
.order-kartu.tandai-baru { animation: denyut 1.6s ease-out 2; }
@media (prefers-reduced-motion: reduce) {
  .order-kartu.tandai-baru { animation: none; border-left-color: var(--karbon); }
  * { transition: none !important; }
}

/* ---------- Bilah kepatuhan ---------- */
.bar-luar { height: 8px; background: var(--kertas-3); border-radius: var(--r-penuh); overflow: hidden; }
.bar-dalam { height: 100%; background: var(--lunas); border-radius: var(--r-penuh); transition: width .3s ease; }
.bar-dalam.kurang { background: var(--tunggu); }

/* ---------- Pencocokan bukti ---------- */
.cocok-baris {
  display: flex; gap: 13px; align-items: flex-start; padding: 14px 0;
  border-bottom: 1px solid var(--garis-tipis);
}
.cocok-thumb {
  width: 66px; height: 66px; object-fit: cover; border-radius: 12px;
  background: var(--kertas-2); border: 1px solid var(--garis); flex: 0 0 66px; cursor: zoom-in;
}
.cocok-isi { flex: 1; min-width: 0; }
.cocok-nama { font-size: 12px; color: var(--redup); word-break: break-all; }

/* Garis putus-putus dipertahankan di sini karena punya arti: menandakan
   area yang bisa dijatuhi berkas, konvensi yang sudah dikenal orang. */
.dropzone {
  border: 1.5px dashed var(--garis); border-radius: var(--r);
  padding: 34px 20px; text-align: center; background: var(--putih);
  cursor: pointer; transition: border-color .14s ease, background .14s ease;
}
.dropzone:hover, .dropzone.aktif { border-color: var(--karbon); background: var(--karbon-lembut); }
.dropzone .besar { font-weight: 700; font-size: 15px; }

/* ---------- Pesan ---------- */
.pesan { padding: 12px 15px; border-radius: var(--r-sm); font-size: 13.5px; margin-bottom: 16px; line-height: 1.5; }
.pesan-ok    { background: var(--lunas-lembut);  color: var(--lunas);  border: 1px solid #CBE8DA; }
.pesan-salah { background: var(--bahaya-lembut); color: var(--bahaya); border: 1px solid #F2D5D1; }
.pesan-info  { background: var(--tunggu-lembut); color: var(--tunggu); border: 1px solid #F0E2C8; }

.kosong { text-align: center; padding: 48px 20px; color: var(--redup); }
.kosong .besar { font-weight: 600; font-size: 16px; color: var(--tinta); margin-bottom: 6px; letter-spacing: -.02em; }

/* ---------- Modal ---------- */
.lapis {
  position: fixed; inset: 0; background: rgba(16,16,20,.42); z-index: 100;
  display: none; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.lapis.tampil { display: flex; }
@media (min-width: 640px) { .lapis { align-items: center; } }
.modal {
  background: var(--kertas); border-radius: 20px 20px 0 0;
  padding: 22px; width: 100%; max-width: 470px;
  max-height: 92vh; overflow-y: auto;
}
@media (min-width: 640px) { .modal { border-radius: 18px; } }
.modal h3 { margin: 0 0 5px; font-size: 19px; letter-spacing: -.03em; }

.baris-tombol { display: flex; gap: 9px; margin-top: 20px; }
.baris-tombol .btn { flex: 1; }

.pilih-metode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.pilih-metode input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-metode label {
  border: 1px solid var(--garis); border-radius: var(--r-sm); padding: 13px 5px;
  text-align: center; cursor: pointer; font-weight: 600; font-size: 13.5px;
  background: var(--putih); transition: background .14s ease, border-color .14s ease;
}
.pilih-metode label:hover { background: var(--kertas-2); }
.pilih-metode input:checked + label { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.pilih-metode input:focus-visible + label { outline: 2px solid var(--karbon); outline-offset: 2px; }

/* Catatan khusus dari pembeli: harus menonjol tapi tidak seperti tautan. */
.catatan-pesanan { margin-top: 7px; color: var(--tunggu); font-weight: 500; }

/* Kartu yang ditonjolkan: dinaikkan lewat bayangan dan latar, bukan garis tepi
   berwarna. Garis tepi berwarna terbaca sebagai peringatan galat. */
.kartu-tonjol {
  background: linear-gradient(var(--karbon-lembut), var(--putih) 70%);
  border-color: color-mix(in srgb, var(--karbon) 22%, var(--garis));
  box-shadow: var(--bayang-mid);
}

.mono { font-family: var(--mono); font-size: 12.5px; }
.redup { color: var(--redup); }
.kecil { font-size: 12px; }
.tebal { font-weight: 700; }
.kanan { text-align: right; }
.rata { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rata > * { min-width: 0; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mb0 { margin-bottom: 0; }


/* ---------- Layar pesanan: menu + panel ringkasan ----------
   Panel ringkasan selalu ada, tidak menunggu tombol lanjut. Sebelumnya
   ringkasan baru muncul setelah ditekan "Continue", dan itu satu ketukan
   tambahan pada setiap pesanan -- di jam ramai terjadi puluhan kali.

   Lebar >= 900px : dua kolom, panel menempel di kanan.
   Lebar <  900px : panel jadi lembar bawah. Ringkasan dan tombol kirim selalu
                    terlihat; sisanya terbuka saat pegangan diketuk, sehingga
                    pesanan cepat tanpa nama dan catatan tetap nol ketukan
                    tambahan. */
.pesan-layar { display: block; }
.pesan-menu { min-width: 0; }

.pesan-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--kertas);
  border-top: 1px solid var(--garis);
  box-shadow: var(--bayang-atas);
  border-radius: 18px 18px 0 0;
  max-height: 86vh; display: flex; flex-direction: column;
  transform: translateY(calc(100% - 62px));
  transition: transform .22s ease;
}
.pesan-panel.ada-isi { transform: translateY(calc(100% - 62px)); }
.pesan-panel.terbuka { transform: translateY(0); }
.pesan-panel:not(.ada-isi) { transform: translateY(100%); }

.panel-pegangan-baris {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 0; flex: 0 0 auto;
}
.panel-pegangan {
  border: 0; background: transparent; flex: 1; min-width: 0; cursor: pointer;
  padding: 9px 0 8px 16px; font: inherit; color: inherit; text-align: left;
}
.pegangan-kirim { flex: 0 0 auto; }
.pegangan-garis {
  display: block; width: 38px; height: 4px; border-radius: 99px;
  background: var(--kertas-3); margin: 0 auto 8px;
}
.pegangan-teks {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: 14px;
}
.pegangan-teks .tebal { font-size: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.panel-isi {
  overflow-y: auto;
  padding: 4px 16px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  scroll-padding-bottom: 96px;   /* kolom yang difokus tidak tertutup tombol */
}
.panel-judul { display: none; }
.panel-kosong { color: var(--samar); font-size: 13.5px; padding: 10px 0 4px; }

/* Daftar item digulung SENDIRI, bukan ikut menggulung seluruh panel.
   Pesanan rombongan bisa belasan jenis; kalau daftarnya mendorong seluruh isi
   panel ke bawah, tombol kirim keluar dari layar dan kasir harus menggulung
   dulu setiap kali -- terukur di y=1163 pada layar setinggi 1000.
   Sekarang daftarnya punya jendela sendiri, dan bagian yang dipakai untuk
   menyelesaikan pesanan tetap di tempat. */
.panel-daftar {
  margin-bottom: 4px;
  max-height: 34vh; overflow-y: auto;
  overscroll-behavior: contain;   /* gulungan tidak merembet ke halaman */
  scrollbar-width: thin;
  /* flex-shrink: 0 wajib.
     Panel induknya memakai flex-direction: column, dan anak flex boleh
     menyusut di bawah tinggi isinya secara bawaan. Tanpa ini, daftar item
     tergencet sampai nol tinggi di layar HP -- yang tampak hanya "12 items"
     lalu langsung Total, tanpa satu pun barisnya terlihat. */
  flex: 0 0 auto;
}
/* Petunjuk bahwa daftarnya masih berlanjut: bayangan tipis di tepi bawah. */
.panel-daftar {
  background:
    linear-gradient(var(--kertas), transparent) top / 100% 12px no-repeat,
    linear-gradient(transparent, var(--kertas)) bottom / 100% 12px no-repeat;
  background-attachment: local, local;
}
.panel-baris {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; border-bottom: 1px solid var(--garis-tipis);
}
.panel-baris .nama { flex: 1; min-width: 0; font-size: 13.5px; }
.panel-baris .harga {
  font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.panel-baris .qty-mini { display: flex; align-items: center; gap: 5px; }
.panel-baris .qty-mini button {
  width: 26px; height: 26px; border-radius: 99px; border: 1px solid var(--garis);
  background: var(--putih); cursor: pointer; font-size: 14px; line-height: 1;
  color: var(--tinta); display: flex; align-items: center; justify-content: center;
}
.panel-baris .qty-mini .n {
  min-width: 16px; text-align: center; font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.panel-total-baris {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--tinta);
  font-weight: 700;
}
.panel-total-baris .angka {
  font-size: 20px; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
/* Tombol kirim menempel di dasar panel, selalu terjangkau berapa pun panjang
   formulirnya. Latarnya solid supaya isi yang lewat di baliknya tidak
   menembus. */
/* Isi panel diberi ruang di bawah supaya baris terakhir tidak tertutup
   tombol yang menempel. Tanpa ini, keterangan di bawah pilihan pembayaran
   terpotong separuh -- dan justru keterangan itu yang menjelaskan cara
   menyimpan pesanan tanpa membayar. */
.panel-isi > :last-child { margin-bottom: 0; }
.panel-kirim-tetap {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--kertas);
  margin: 12px -16px calc(-18px - env(safe-area-inset-bottom));
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--garis);
}
@media (min-width: 900px) {
  .panel-kirim-tetap {
    background: var(--putih);
    margin: 12px -18px -18px;
    padding: 14px 18px 18px;
    border-radius: 0 0 var(--r) var(--r);
  }
}

.f-label {
  display: block; font-size: 13px; font-weight: 600;
  letter-spacing: -.005em; color: var(--tinta); margin-bottom: 6px;
}

@media (min-width: 900px) {
  .pesan-layar {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px; align-items: start;
  }
  .pesan-panel {
    position: sticky; top: 78px; bottom: auto; left: auto; right: auto;
    z-index: 1; transform: none !important;
    background: var(--putih); border: 1px solid var(--garis);
    border-radius: var(--r); box-shadow: var(--bayang);
    max-height: calc(100vh - 100px);
  }
  .pesan-panel:not(.ada-isi) { transform: none; }
  .panel-pegangan-baris { display: none; }
  .panel-judul {
    display: block; font-size: 15px; font-weight: 700;
    letter-spacing: -.02em; margin-bottom: 10px;
  }
  .panel-isi { padding: 18px; }
  .panel-daftar {
    max-height: 30vh;
    background:
      linear-gradient(var(--putih), transparent) top / 100% 12px no-repeat,
      linear-gradient(transparent, var(--putih)) bottom / 100% 12px no-repeat;
    background-attachment: local, local;
  }
}

/* Tautan kecil di dalam formulir: melepas pilihan, membuka bantuan.
   Dibuat sebagai <button>, bukan <a>, karena tidak menuju ke mana pun --
   pembaca layar akan salah mengumumkannya sebagai tautan. */
.tautan-kecil {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--karbon); text-decoration: underline; text-underline-offset: 2px;
}
.tautan-kecil:hover { text-decoration-thickness: 1.5px; }

/* ---------- Pintasan kategori ----------
   Digulung mendatar, bukan dibungkus ke banyak baris: deretan yang membungkus
   membuat tinggi halaman berubah-ubah setiap kali disaring, dan daftar menu di
   bawahnya ikut melompat. */
.chip-baris {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 0 10px; margin-bottom: 2px;
}
.chip-baris::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--garis); background: var(--putih);
  color: var(--redup); border-radius: var(--r-penuh);
  padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.chip:hover { background: var(--kertas-2); color: var(--tinta); }
.chip.aktif { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip-n { opacity: .55; font-weight: 500; margin-left: 2px; }
.chip.aktif .chip-n { opacity: .6; }

/* ---------- Kotak pencarian ---------- */
.cari-bungkus { position: relative; margin-bottom: 6px; }
.cari-input { padding-right: 38px; }
.cari-hapus {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 99px;
  background: var(--kertas-2); color: var(--redup); cursor: pointer;
  font-size: 18px; line-height: 1; display: flex;
  align-items: center; justify-content: center;
}
.cari-hapus:hover { background: var(--kertas-3); color: var(--tinta); }

/* ---------- Struk cetak ----------
   Ditampilkan sebagai HTML, bukan PDF tertanam: PDF di dalam <embed> tidak
   tampil di banyak browser HP, dan kasir justru paling butuh melihatnya di HP.
   Lebar 58 mm dikunci lewat @page saat dicetak. */
.struk-bungkus { display: flex; justify-content: center; }
.struk {
  width: 58mm; max-width: 100%;
  background: var(--putih); color: #000;
  border: 1px solid var(--garis); border-radius: var(--r);
  padding: 10px 12px; box-shadow: var(--bayang);
  font-size: 11px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.struk-nama { text-align: center; font-weight: 700; font-size: 13px; letter-spacing: -.01em; }
.struk-alamat { text-align: center; font-size: 9.5px; color: var(--redup); margin-top: 2px; }
.struk-garis { border-top: 1px dashed #B9B9C2; margin: 7px 0; }
.struk-baris { display: flex; justify-content: space-between; gap: 8px; }
.struk-baris > span:first-child { flex: 1; min-width: 0; }
/* Nomor order dan waktu ditumpuk, bukan disandingkan.
   Di lebar 58 mm keduanya tidak muat dalam satu baris, dan nomor order yang
   terpotong jadi dua penggalan justru bagian yang paling sering dibacakan
   ulang saat ada pertanyaan. */
.struk-kepala { margin-bottom: 2px; }
.struk-kepala .no { font-weight: 700; font-size: 11.5px; word-break: break-all; }
.struk-kepala .waktu { font-size: 9.5px; color: var(--redup); }
.struk-info { font-size: 10px; margin-top: 2px; }
.struk-catatan { font-size: 9.5px; font-style: italic; color: var(--redup); padding-left: 10px; }
.struk-total { font-weight: 700; font-size: 13px; margin: 2px 0; }
.struk-kecil { font-size: 10px; color: var(--redup); }
.struk-lunas { text-align: center; font-weight: 700; color: var(--lunas); margin-top: 6px; }
.struk-kaki { text-align: center; font-size: 9.5px; color: var(--redup); }

@media print {
  /* Kertas gulungan 58 mm; tingginya mengikuti isi. */
  @page { size: 58mm auto; margin: 2mm; }
  .struk {
    width: auto; border: 0; border-radius: 0;
    box-shadow: none; padding: 0; font-size: 10px;
  }
  .struk-bungkus { display: block; }
  main { padding: 0 !important; }
  .wrap-sempit { padding: 0 !important; max-width: none !important; }
}

@media print {
  .topbar, .bar-keranjang, .order-aksi, .btn, .no-print { display: none !important; }
  body { background: #fff; }
  .kartu, .nota { border: 0; padding: 0; }
}

/* Logo usaha di topbar */
.topbar-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--garis);
  background: var(--putih);
}

@media (max-width: 720px) {
  .topbar-logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 9px;
  }
}