/* ============================================================
   SmartSaji, sistem desain
   Semua nilai di sini diambil langsung dari DESIGN.md.
   ATURAN: jangan tulis warna/ukuran/radius baru di luar file ini.
   ============================================================ */

/* Inter, satu keluarga font saja, disimpan lokal supaya tidak bergantung pada CDN.
   Variable weight 100-900 dalam satu berkas 48KB. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}

/* ---------- 1. Token ---------- */
:root {
  /* aksen, satu-satunya warna aksi */
  --primary:        #EA580C;
  --primary-hover:  #C2410C;
  --primary-soft:   #FFF7ED;
  --on-primary:     #FFFFFF;

  /* netral hangat */
  --bg:             #FAFAF9;
  --surface:        #FFFFFF;
  --surface-sunken: #F5F5F4;
  --border:         #E7E5E4;
  --text:           #1C1917;
  --text-muted:     #78716C;

  /* status, arti tetap, bukan hiasan */
  /* paket langganan: bukan warna status, khusus menandai kasta paket */
  --emas:           #A16207;
  --emas-lembut:    #FEF9C3;

  --success:        #16A34A;
  --success-soft:   #F0FDF4;
  --warning:        #D97706;
  --warning-soft:   #FFFBEB;
  --danger:         #DC2626;
  --danger-soft:    #FEF2F2;
  --info:           #0284C7;
  --info-soft:      #F0F9FF;

  /* jarak, kelipatan 4, tidak ada nilai lain */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px;

  /* radius */
  --r-card: 12px;
  --r-ctl:  10px;
  --r-pill: 999px;

  /* tipografi */
  --f-title:  24px;  /* judul halaman   700 */
  --f-head:   18px;  /* judul bagian    600 */
  --f-body:   15px;  /* teks isi        400 */
  --f-label:  13px;  /* label/ket       500 */
  --f-num:    22px;  /* angka penting   700 tabular */
  --f-num-lg: 28px;

  /* bayangan, hanya untuk yang benar-benar mengambang */
  --shadow-float: 0 8px 24px rgba(28, 25, 23, .12);
  --shadow-up:    0 -4px 20px rgba(28, 25, 23, .10);

  --tap: 44px;   /* area sentuh minimal */
  --tap-primary: 52px;
  --content: 672px;
}

/* mode gelap, setiap token punya pasangannya, tidak ada yang cuma ada di satu mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:        #FB923C;
    --primary-hover:  #FDBA74;
    --primary-soft:   #2B1710;
    --on-primary:     #1C1917;

    --bg:             #1C1917;
    --surface:        #262322;
    --surface-sunken: #322D2B;
    --border:         #44403C;
    --text:           #FAFAF9;
    --text-muted:     #A8A29E;

    --emas:        #FDE047;  --emas-lembut: #2A2410;

    --success:        #4ADE80;  --success-soft: #14261A;
    --warning:        #FBBF24;  --warning-soft: #2A2110;
    --danger:         #F87171;  --danger-soft:  #2B1615;
    --info:           #38BDF8;  --info-soft:    #10232E;

    --shadow-float: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-up:    0 -4px 20px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --primary: #FB923C; --primary-hover: #FDBA74; --primary-soft: #2B1710; --on-primary: #1C1917;
  --bg: #1C1917; --surface: #262322; --surface-sunken: #322D2B; --border: #44403C;
  --text: #FAFAF9; --text-muted: #A8A29E;
  --emas: #FDE047; --emas-lembut: #2A2410;
  --success: #4ADE80; --success-soft: #14261A;
  --warning: #FBBF24; --warning-soft: #2A2110;
  --danger:  #F87171; --danger-soft:  #2B1615;
  --info:    #38BDF8; --info-soft:    #10232E;
  --shadow-float: 0 8px 24px rgba(0,0,0,.5);
  --shadow-up:    0 -4px 20px rgba(0,0,0,.45);
}

/* ---------- 2. Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--f-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* teks Indonesia panjang, selalu boleh membungkus, tidak pernah dipotong "..." */
h1, h2, h3, p, span, a, button, label, li { overflow-wrap: break-word; }

h1, h2, h3 { margin: 0; line-height: 1.3; }
h1 { font-size: var(--f-title); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--f-head);  font-weight: 600; }
h3 { font-size: var(--f-body);  font-weight: 600; }
p  { margin: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* fokus keyboard wajib kelihatan */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-ctl);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 3. Tata letak ---------- */
.page {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--s4);            /* padding samping minimal 16px */
}
.page--with-nav { padding-bottom: calc(72px + var(--s6) + env(safe-area-inset-bottom, 0px)); }
.stack   > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }
.stack-6 > * + * { margin-top: var(--s6); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.grow { flex: 1; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--s3) 0;
  padding-top: calc(var(--s3) + env(safe-area-inset-top, 0px));
}
.topbar__inner { max-width: var(--content); margin: 0 auto; padding: 0 var(--s4); display: flex; align-items: center; gap: var(--s3); }

.muted { color: var(--text-muted); }
.label-text { font-size: var(--f-label); font-weight: 500; color: var(--text-muted); }
.section-gap { margin-top: var(--s6); }

/* angka penting, selalu sejajar */
.num      { font-size: var(--f-num);    font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.num--lg  { font-size: var(--f-num-lg); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.num--sm  { font-size: var(--f-body);   font-weight: 700; font-variant-numeric: tabular-nums; }
.tabular  { font-variant-numeric: tabular-nums; }

/* ---------- 4. Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: var(--s2) var(--s4);
  border-radius: var(--r-ctl); border: 1px solid transparent;
  font: inherit; font-size: var(--f-body); font-weight: 600;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary   { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-sunken); }
.btn--ghost     { background: transparent; color: var(--text); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); }
.btn--danger    { background: var(--danger); color: #FFFFFF; }
.btn--danger:hover:not(:disabled) { filter: brightness(.93); }

/* aksi utama satu layar, tinggi 52px */
.btn--lg { min-height: var(--tap-primary); font-size: var(--f-body); padding: var(--s3) var(--s6); }
.btn--block { display: flex; width: 100%; }

/* tombol ikon, tetap 44px walau isinya kecil */
.btn--icon { width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; border-radius: var(--r-ctl); }

/* aksi utama menempel di bawah, dalam jangkauan jempol */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-up);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
}
.action-bar__inner { max-width: var(--content); margin: 0 auto; display: flex; align-items: center; gap: var(--s3); }

/* ---------- 5. Kartu & baris ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s4);
}
.card--flush { padding: 0; overflow: hidden; }

/* daftar pengaturan: baris bergaris, bukan tumpukan kartu */
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.list__row {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: 56px; padding: var(--s3) var(--s4);
  background: none; border: 0; border-top: 1px solid var(--border);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.list__row:first-child { border-top: 0; }
.list__row:hover { background: var(--surface-sunken); }

/* ---------- 6. Badge status (warna + teks, tidak pernah warna saja) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  font-size: var(--f-label); font-weight: 600; white-space: nowrap;
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.badge--info    { background: var(--info-soft);    color: var(--info); }
.badge--neutral { background: var(--surface-sunken); color: var(--text-muted); }
/* Paket premium sengaja beda dari warna status: ini penanda kasta, bukan keadaan. */
.badge--premium { background: var(--emas-lembut); color: var(--emas); }
.badge--standar { background: var(--surface-sunken); color: var(--text-muted); }
.badge__dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; flex: none; }

/* ---------- 7. Form ---------- */
.field > * + * { margin-top: var(--s2); }
.field label { display: block; font-size: var(--f-label); font-weight: 500; color: var(--text); }
.input, .select, .textarea {
  width: 100%; min-height: var(--tap); padding: var(--s3);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  font: inherit; font-size: var(--f-body);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.textarea { min-height: 96px; resize: vertical; }
.field__hint  { font-size: var(--f-label); color: var(--text-muted); }
.field__error { font-size: var(--f-label); font-weight: 500; color: var(--danger); }
.input--error { border-color: var(--danger); }

/* ---------- 8. Keadaan: memuat / kosong / error ---------- */
/* layar putih saat memuat = bug, bukan pilihan desain */
.skeleton {
  background: var(--surface-sunken);
  border-radius: var(--r-ctl);
  position: relative; overflow: hidden;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: sk 1.4s ease-in-out infinite;
}
@keyframes sk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-line { height: 13px; }
.sk-title { height: 18px; width: 60%; }

.state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s3); padding: var(--s12) var(--s4);
}
.state__icon {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--text-muted);
}
.state__title { font-size: var(--f-head); font-weight: 600; }
.state__text  { color: var(--text-muted); max-width: 32ch; }

.notice { border-radius: var(--r-card); padding: var(--s3) var(--s4); font-size: var(--f-body); }
.notice--danger  { background: var(--danger-soft);  color: var(--danger); }
.notice--success { background: var(--success-soft); color: var(--success); }
.notice--warning { background: var(--warning-soft); color: var(--warning); }
.notice--info    { background: var(--info-soft);    color: var(--info); }

/* ---------- 9. Navigasi bawah (maks 5 item, ikon + label selalu terlihat) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 64px; padding: var(--s2) var(--s1);
  color: var(--text-muted); font-size: var(--f-label); font-weight: 500;
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.bottom-nav__item:hover { text-decoration: none; color: var(--text); }
.bottom-nav__item[aria-current="page"] { color: var(--primary); }
.bottom-nav__item svg { width: 24px; height: 24px; }

/* ---------- 10. Bottom sheet & dialog ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(28, 25, 23, .45);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--surface);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: var(--shadow-float);
  padding: var(--s4);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  max-height: 85vh; overflow-y: auto;
}
.sheet__inner { max-width: var(--content); margin: 0 auto; }
.sheet__grip { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--border); margin: 0 auto var(--s4); }

/* ---------- 11. Kartu produk ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 560px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.product {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  overflow: hidden;
}
.product__media { aspect-ratio: 1 / 1; background: var(--surface-sunken); position: relative; }
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__media-empty { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text-muted); }
.product__body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.product__name { font-size: var(--f-body); font-weight: 600; }
/* Di HP 360px, satu kartu produk cuma selebar ~134px. Harga + stepper tidak
   muat sebaris, jadi stepper turun ke baris sendiri, sebelumnya tombol "+"
   terpotong keluar kartu. */
.product__foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); }
.product__foot .stepper-bungkus { align-items: flex-end; }
.product .stepper__val { min-width: 24px; }
@media (min-width: 560px) {
  .product__foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
.product__flag { position: absolute; top: var(--s2); left: var(--s2); }
.product--off .product__media { opacity: .45; }

/* stepper jumlah, tiap tombol tetap 44px */
.stepper { display: flex; align-items: center; gap: var(--s1); }
.stepper__btn {
  width: var(--tap); height: var(--tap); flex: none;
  display: grid; place-items: center;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  font: inherit; font-size: var(--f-head); font-weight: 700; cursor: pointer;
}
.stepper__btn:hover { background: var(--surface-sunken); }
.stepper__val { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper-bungkus { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
.stepper--sibuk .stepper__btn { opacity: .55; }
.stepper__pesan { font-size: var(--f-label); font-weight: 500; color: var(--danger); text-align: right; }

/* Form pembungkus tombol tidak boleh membentuk kotak sendiri. */
.tampil-kontan { display: contents; }
.tersembunyi { display: none !important; }
/* Atribut hidden bawaan HTML cuma menyetel display:none dengan kekuatan rendah,
   jadi kalah oleh kelas apa pun yang menyetel display (grid, flex, dsb).
   Tanpa baris ini, elemen ber-hidden tetap tampil. */
[hidden] { display: none !important; }

/* ---------- 12. Chip filter kategori ---------- */
.chips { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  min-height: var(--tap); display: inline-flex; align-items: center; white-space: nowrap;
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  font: inherit; font-size: var(--f-label); font-weight: 600; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Chip yang ingin tampil di tengah TAPI tetap bisa digeser kalau kepanjangan.
   "safe center" itu kuncinya: begitu isinya lebih lebar daripada wadahnya,
   perataannya otomatis balik ke kiri. Dengan "center" biasa, kelebihannya
   dibuang ke KEDUA sisi, jadi chip pertama terpotong dan tidak bisa digapai
   walau digeser. Baris flex-start di atasnya jadi cadangan untuk peramban lama
   yang belum mengenal kata "safe". */
.chips--tengah { justify-content: flex-start; }
.chips--tengah { justify-content: safe center; }
.chip__jumlah {
  margin-left: var(--s2); padding: 0 var(--s2); min-width: 20px;
  border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-muted);
  font-variant-numeric: tabular-nums; font-size: var(--f-label);
}
.chip[aria-pressed="true"] .chip__jumlah { background: rgba(255, 255, 255, .25); color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 13. Pesan singkat (toast) ---------- */
.toast {
  position: fixed; z-index: 50;
  left: var(--s4); right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  max-width: var(--content); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  background: var(--text); color: var(--bg);
  border-radius: var(--r-card); padding: var(--s3) var(--s4);
  box-shadow: var(--shadow-float);
}
.toast__tutup {
  margin-left: auto; flex: none;
  width: var(--tap); height: var(--tap); display: grid; place-items: center;
  background: none; border: 0; color: inherit; cursor: pointer; opacity: .7;
}
.toast__tutup:hover { opacity: 1; }

/* ---------- 14. Halaman masuk ---------- */
.auth {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s6) var(--s4);
  padding-top: calc(var(--s6) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px));
}
.auth__inner { width: 100%; max-width: 420px; margin: 0 auto; }
.auth__brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s6); }
.auth__mark {
  width: 48px; height: 48px; flex: none; border-radius: var(--r-card);
  display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary);
}
.auth__name { font-size: var(--f-head); font-weight: 700; letter-spacing: -.01em; }
.auth__demo { margin-top: var(--s6); }
.auth__demo summary {
  cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: var(--s2);
  font-size: var(--f-label); font-weight: 500; color: var(--text-muted);
}
.auth__akun {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  min-height: var(--tap); padding: var(--s2) var(--s3);
  background: none; border: 0; border-top: 1px solid var(--border);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.auth__akun:first-of-type { border-top: 0; }
.auth__akun:hover { background: var(--surface-sunken); }

/* ---------- 15. Batang keranjang (mengambang di atas nav bawah) ---------- */
.cart-bar {
  position: fixed; left: 0; right: 0; z-index: 29;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: var(--shadow-up);
  padding: var(--s3) var(--s4);
}
.cart-bar__inner { max-width: var(--content); margin: 0 auto; display: flex; align-items: center; gap: var(--s4); }
.cart-bar__info { min-width: 0; }
.page--with-nav  { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.page--with-cart { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
.page--with-aksi { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* Saat barang pertama masuk keranjang tanpa memuat ulang halaman, ruang bawah ikut menyesuaikan. */
body.ada-keranjang .page--with-nav { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }

/* ---------- 16. Kepala halaman & merek ---------- */
.brand-mark {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-ctl);
  display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary);
}
.brand-name { font-size: var(--f-body); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }

/* ---------- 17. Kartu kantin ---------- */
.kantin {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4); text-decoration: none; color: var(--text);
  border-top: 1px solid var(--border);
}
.kantin:first-child { border-top: 0; }
.kantin:hover { background: var(--surface-sunken); text-decoration: none; }
.kantin__logo {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-card);
  display: grid; place-items: center; overflow: hidden;
  background: var(--primary-soft); color: var(--primary);
  font-size: var(--f-head); font-weight: 700;
}
.kantin__logo img { width: 100%; height: 100%; object-fit: cover; }
.kantin__nama { font-size: var(--f-body); font-weight: 600; }
.kantin--tutup .kantin__logo { background: var(--surface-sunken); color: var(--text-muted); }

/* ---------- 18. Baris produk (hasil pencarian & keranjang) ---------- */
.p-baris { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--border); }
.p-baris:first-child { border-top: 0; }
.p-baris__media {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-ctl); overflow: hidden;
  background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-muted);
}
.p-baris__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 19. Linimasa status pesanan ---------- */
.linimasa { display: grid; gap: 0; }
.linimasa__baris { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); }
.linimasa__rel { display: flex; flex-direction: column; align-items: center; }
.linimasa__titik {
  width: 16px; height: 16px; border-radius: var(--r-pill); margin-top: 4px;
  border: 2px solid var(--border); background: var(--surface); flex: none;
}
.linimasa__titik--lewat { border-color: var(--success); background: var(--success); }
.linimasa__titik--kini  { border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.linimasa__garis { width: 2px; flex: 1; min-height: 20px; background: var(--border); }
.linimasa__garis--lewat { background: var(--success); }
.linimasa__isi { padding-bottom: var(--s4); }
.linimasa__baris:last-child .linimasa__isi { padding-bottom: 0; }

/* ---------- 20. Kode QR ---------- */
.qr-kotak {
  background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--r-card);
  padding: var(--s4); display: grid; place-items: center;
}
.qr-kotak svg { width: 100%; max-width: 240px; height: auto; display: block; }
.qr-kode {
  font-size: var(--f-num); font-weight: 700; letter-spacing: .18em;
  font-variant-numeric: tabular-nums; text-align: center;
}

/* ---------- 21. Ringkasan angka ---------- */
.angka-baris { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.angka-baris + .angka-baris { margin-top: var(--s2); }
.pisah { border: 0; border-top: 1px solid var(--border); margin: var(--s3) 0; }


/* ============================================================
   Sisi penjaga kantin
   ============================================================ */

/* Ukuran huruf bisa diperbesar penjaga kantin (deepseek.md §C.5 & §K.3).
   Ini pengecualian sah terhadap skala tetap di DESIGN.md §3: fungsinya
   keterbacaan, dan seluruh halaman ikut membesar proporsional. */
.teks-besar {
  --f-title: 28px; --f-head: 20px; --f-body: 17px; --f-label: 15px;
  --f-num: 26px; --f-num-lg: 32px;
}
.teks-sangat_besar {
  --f-title: 32px; --f-head: 23px; --f-body: 19px; --f-label: 16px;
  --f-num: 30px; --f-num-lg: 38px;
}

/* Kartu pesanan, nomor antrean harus terbaca dari jarak sejangkauan tangan. */
.pesanan-kartu { display: flex; gap: var(--s4); align-items: flex-start; }
.antrean {
  flex: none; min-width: 56px; padding: var(--s2) var(--s3);
  border-radius: var(--r-card); text-align: center;
  background: var(--surface-sunken); color: var(--text);
}
.antrean--tunggu { background: var(--warning-soft); color: var(--warning); }
.antrean--siap   { background: var(--success-soft); color: var(--success); }
.antrean__label { font-size: var(--f-label); font-weight: 500; display: block; line-height: 1.2; }
.antrean__angka { font-size: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }

.pesanan-item { display: flex; gap: var(--s3); }
/* Kaki kartu pesanan: di layar sempit tombol aksinya turun ke baris sendiri
   supaya tidak terpotong. */
.kartu-kaki { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.kartu-kaki > form, .kartu-kaki > .row { margin-left: auto; }
.pesanan-item__jml { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 28px; }

/* Kotak centang untuk penandaan borongan, tetap 44px walau kotaknya kecil. */
.pilih {
  display: flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: none; cursor: pointer;
}
.pilih input { width: 24px; height: 24px; accent-color: var(--primary); }

.grup { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.grup__jumlah {
  min-width: 28px; height: 28px; padding: 0 var(--s2); border-radius: var(--r-pill);
  display: inline-grid; place-items: center;
  background: var(--primary); color: var(--on-primary);
  font-size: var(--f-label); font-weight: 700; font-variant-numeric: tabular-nums;
}
.grup__jumlah--sepi { background: var(--surface-sunken); color: var(--text-muted); }

/* Pemberitahuan "ada pesanan baru", muncul di atas, tidak menggeser isi layar. */
.kabar {
  position: sticky; top: 64px; z-index: 19;
  margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s3);
  background: var(--primary); color: var(--on-primary);
  border-radius: var(--r-card); padding: var(--s3) var(--s4);
  box-shadow: var(--shadow-float);
}
.kabar .btn { background: var(--on-primary); color: var(--primary); border-color: transparent; }

/* Batang ringkas angka penting di layar keuangan */
.angka-petak { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.angka-petak .card { padding: var(--s3) var(--s4); }
.angka-petak__label { font-size: var(--f-label); color: var(--text-muted); display: block; }

/* Batang perbandingan sederhana (produk terlaris, penjualan per jam) */
.bar-baris { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: baseline; }
/* Batang perbandingan: satu seri, satu warna, warna TIDAK menyandikan peringkat.
   Ujung data dibulatkan 4px dan menempel ke garis dasar kiri; nilainya selalu
   ditulis sebagai teks (bukan tooltip) karena layarnya layar sentuh. */
.bar-rel { height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; margin-top: var(--s1); }
.bar-isi { height: 100%; background: var(--primary); border-radius: 4px; min-width: 4px; }
.bar-daftar > * + * { margin-top: var(--s3); }

/* Catatan pembeli di layar penjaga kantin.
   Harus langsung tertangkap mata: ini permintaan tambahan yang wajib dipenuhi.
   "Beda"-nya lewat ukuran, tebal, kotak, dan garis aksen, bukan keluarga font
   baru, karena DESIGN.md §3 mengunci satu font saja. */
.catatan {
  margin-top: var(--s3);
  border-radius: var(--r-ctl);
  border-left: 4px solid var(--warning);
  background: var(--warning-soft);
  padding: var(--s3) var(--s4);
}
.catatan__label {
  display: flex; align-items: center; gap: var(--s1);
  font-size: var(--f-label); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--warning);
}
.catatan__isi {
  margin-top: var(--s1);
  font-size: var(--f-head); font-weight: 600; line-height: 1.4;
  color: var(--text);
}

/* ---------- Pemindai QR kasir ---------- */
.pemindai__bingkai {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--surface-sunken);
  display: grid; place-items: center;
}
.pemindai__video { width: 100%; height: 100%; object-fit: cover; }
.pemindai__kosong { display: grid; place-items: center; gap: var(--s2); text-align: center; }

/* Saat hasil pencarian sedang diambil dari server, halus saja, jangan berkedip. */
.sedang-cari { opacity: .55; transition: opacity .15s ease; }

/* ---------- Perkiraan kepadatan kantin (premium) ----------
   Satu seri, satu warna, warna tidak menyandikan peringkat, dan labelnya
   selalu ditulis supaya tidak bergantung pada warna saja.
   Jarak 2px antar ruas mengikuti aturan pemisah antar isian data. */
.padat { display: inline-flex; align-items: center; gap: var(--s2); }
.padat__batang { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.padat__seg { width: 4px; border-radius: 2px; background: var(--border); }
.padat__seg--isi { background: var(--primary); }
.padat__label { font-size: var(--f-label); font-weight: 600; color: var(--text-muted); }

/* ---------- Keterangan ringkas: tanda tanya kecil ----------
   Menggantikan teks penjelas yang panjang. Tanda tanyanya mengalir MENYAMPING
   mengikuti teks judulnya (bukan turun ke baris sendiri), dan panelnya
   mengambang di atas halaman supaya tata letak tidak melompat saat dibuka. */

/* Pembungkus judul + tanda tanya. Sengaja aliran teks biasa, bukan flex:
   dengan flex, judul yang panjang mendorong tanda tanyanya turun ke baris baru. */
.baris-bantu { display: block; margin-bottom: var(--s2); }
.baris-bantu > *:not(.bantu) { display: inline; }

.bantu { position: relative; display: inline-block; vertical-align: middle; margin-left: var(--s1); }

.bantu__tombol {
  position: relative;
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  cursor: pointer; list-style: none;
}
.bantu__tombol::-webkit-details-marker { display: none; }
.bantu__tombol::marker { content: ""; }
/* Area sentuh 44px tanpa menggeser tata letak sekitarnya. */
.bantu__tombol::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: var(--tap); height: var(--tap);
}

.bantu__tanda {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border); color: var(--text-muted);
  font-size: var(--f-label); font-weight: 700; line-height: 1;
}
.bantu__tombol:hover .bantu__tanda { border-color: var(--primary); color: var(--primary); }
.bantu[open] .bantu__tanda { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.bantu__isi {
  /* fixed, BUKAN absolute: elemen absolute ikut menambah tinggi gulir halaman,
     dan saat halaman sedang digulir mentok bawah, penambahan itu membuat
     Chrome menggeser posisi gulir (scroll anchoring). Itu yang bikin layar
     terasa melompat waktu tanda tanya dibuka. */
  position: fixed; z-index: 35;
  overflow-anchor: none;
  width: min(280px, calc(100vw - var(--s8)));
  overflow-y: auto;   /* tinggi maksimalnya dihitung saat dibuka */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  padding: var(--s3);
  font-size: var(--f-label);
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
  text-align: left;
  white-space: normal;
}
/* Seluruh posisinya dihitung smartsaji.js dalam koordinat layar. */

.bantu__judul { font-weight: 600; margin-bottom: var(--s1); }
.bantu__isi > * + * { margin-top: var(--s2); }

/* ============================================================
   Jendela & pilihan buatan sendiri

   Kotak bawaan peramban (window.confirm dan daftar <select>) tidak bisa
   ditata sama sekali dan tampilannya beda-beda tiap HP. Karena aplikasi ini
   nanti juga dibungkus jadi aplikasi, semuanya dibuat sendiri supaya satu rasa.
   ============================================================ */

.tirai {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(28, 25, 23, .5);
  animation: tirai-masuk .15s ease;
}
@keyframes tirai-masuk { from { opacity: 0; } to { opacity: 1; } }

/* ---- Jendela konfirmasi ---- */
.jendela {
  position: fixed; z-index: 61;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - var(--s8)));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  padding: var(--s6) var(--s4) var(--s4);
  animation: jendela-masuk .18s ease;
}
@keyframes jendela-masuk {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.jendela__ikon {
  width: 48px; height: 48px; border-radius: var(--r-pill);
  display: grid; place-items: center; margin: 0 auto var(--s4);
  background: var(--danger-soft); color: var(--danger);
}
.jendela__judul { font-size: var(--f-head); font-weight: 600; text-align: center; }
.jendela__teks { color: var(--text-muted); text-align: center; margin-top: var(--s2); }
.jendela__aksi { display: flex; gap: var(--s3); margin-top: var(--s6); }
.jendela__aksi > * { flex: 1; }

/* ---- Daftar pilihan (pengganti dropdown bawaan) ---- */
.pilih__tombol {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  min-height: var(--tap); padding: var(--s3);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  font: inherit; font-size: var(--f-body); text-align: left; cursor: pointer;
}
.pilih__tombol:hover { border-color: var(--text-muted); }
.pilih__tombol[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pilih__nilai { flex: 1; min-width: 0; }
.pilih__tombol svg { flex: none; color: var(--text-muted); transition: transform .15s ease; }
.pilih__tombol[aria-expanded="true"] svg { transform: rotate(90deg); }
.pilih__tombol:disabled { opacity: .5; cursor: not-allowed; }

.lembar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--surface);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: var(--shadow-up);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  max-height: 72vh; overflow-y: auto;
  animation: lembar-masuk .2s ease;
}
@keyframes lembar-masuk { from { transform: translateY(100%); } to { transform: translateY(0); } }
.lembar__dalam { max-width: var(--content); margin: 0 auto; }
.lembar__pegangan { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--border); margin: 0 auto var(--s4); }
.lembar__judul { font-size: var(--f-head); font-weight: 600; margin-bottom: var(--s3); }

.lembar__opsi {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  min-height: 52px; padding: var(--s3) var(--s2);
  background: none; border: 0; border-top: 1px solid var(--border);
  font: inherit; font-size: var(--f-body); color: var(--text); text-align: left; cursor: pointer;
}
.lembar__opsi:first-of-type { border-top: 0; }
.lembar__opsi:hover { background: var(--surface-sunken); }
.lembar__opsi[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.lembar__opsi svg { flex: none; margin-left: auto; color: var(--primary); }
.lembar__opsi:disabled { opacity: .45; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .tirai, .jendela, .lembar { animation: none; }
}

/* ============================================================
   Situs profil SmartSaji

   Beda konteks dengan aplikasinya: ini dibaca kepala sekolah sambil duduk
   di laptop, bukan dipakai sambil berdiri dan buru-buru. Jadi boleh lebih
   lebar dan boleh punya bagian gelap.

   Prinsip desainnya: TUNJUKKAN produknya, jangan cuma diceritakan.
   Layar aplikasi sungguhan digambar ulang di dalam bingkai HP memakai
   kelas yang sama persis dengan aplikasinya, jadi yang dilihat calon
   sekolah memang tampilan yang akan mereka pakai.
   ============================================================ */
:root { --lebar-situs: 1120px; }

.situs { max-width: var(--lebar-situs); margin: 0 auto; padding: 0 var(--s4); }

/* ---------- Kepala ---------- */
.snav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: var(--s3) 0;
  padding-top: calc(var(--s3) + env(safe-area-inset-top, 0px));
}
.snav__dalam { max-width: var(--lebar-situs); margin: 0 auto; padding: 0 var(--s4); display: flex; align-items: center; gap: var(--s4); }
.snav__menu { display: none; gap: var(--s6); margin-left: auto; }
.snav__menu a { color: var(--text-muted); font-size: var(--f-label); font-weight: 600; }
.snav__menu a:hover { color: var(--text); text-decoration: none; }
@media (min-width: 820px) { .snav__menu { display: flex; } }

/* ---------- Susunan dua kolom yang berselang ---------- */
.duet { display: grid; gap: var(--s8); align-items: center; }
@media (min-width: 900px) {
  .duet { grid-template-columns: 1fr 1fr; gap: var(--s12); }
  .duet--balik > *:first-child { order: 2; }
}

/* ---------- Bagian ---------- */
.sbag { padding: var(--s12) 0; }
@media (min-width: 900px) { .sbag { padding: 88px 0; } }
.sbag--terang { background: var(--surface); border-block: 1px solid var(--border); }
.sbag--gelap {
  background: #1C1917; color: #FAFAF9;
  --text: #FAFAF9; --text-muted: #A8A29E; --border: #44403C; --surface: #262322;
}
.sbag--gelap .sjudul, .sbag--gelap p { color: inherit; }

.slabel { font-size: var(--f-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.sjudul { font-size: 26px; font-weight: 700; letter-spacing: -.022em; line-height: 1.22; margin-top: var(--s3); }
@media (min-width: 900px) { .sjudul { font-size: 36px; } }
.steks { color: var(--text-muted); margin-top: var(--s4); font-size: 16px; line-height: 1.6; }
.sbag__kepala { max-width: 46ch; }
.sbag__kepala--tengah { max-width: 46ch; margin: 0 auto; text-align: center; }

/* ---------- Hero ---------- */
.hero { padding: var(--s8) 0 var(--s12); }
@media (min-width: 900px) { .hero { padding: 72px 0 88px; } }
.hero__judul { font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
@media (min-width: 900px) { .hero__judul { font-size: 52px; } }
.hero__judul em { font-style: normal; color: var(--primary); }
.hero__aksi { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }

/* ---------- Bingkai HP berisi layar aplikasi sungguhan ---------- */
.telepon {
  width: 264px; margin: 0 auto; flex: none;
  border-radius: 34px; padding: 10px;
  background: #1C1917;
  box-shadow: 0 24px 60px rgba(28, 25, 23, .28), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.telepon__layar {
  background: var(--bg); border-radius: 26px; overflow: hidden;
  height: 460px; display: flex; flex-direction: column;
  /* Skala huruf dikecilkan supaya satu layar penuh muat dalam bingkai. */
  --f-title: 17px; --f-head: 14px; --f-body: 12px; --f-label: 10px;
  --f-num: 17px; --f-num-lg: 21px;
  --s4: 12px; --s6: 16px; --s3: 9px;
  font-size: var(--f-body);
}
.telepon__atas {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.telepon__isi { padding: 12px; overflow: hidden; flex: 1; }
.telepon__isi > * + * { margin-top: 9px; }
.telepon__bawah { display: flex; border-top: 1px solid var(--border); background: var(--surface); }
.telepon__nav { flex: 1; display: grid; place-items: center; gap: 2px; padding: 8px 0; color: var(--text-muted); }
.telepon__nav span { font-size: 9px; font-weight: 500; }
.telepon__nav--aktif { color: var(--primary); }
.telepon-duo { display: flex; gap: var(--s4); justify-content: center; }
.telepon-duo .telepon:nth-child(2) { display: none; }
@media (min-width: 1040px) { .telepon-duo .telepon:nth-child(2) { display: block; transform: translateY(var(--s8)); } }

/* ---------- Tab peran ---------- */
.tab-peran {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2); padding-bottom: var(--s2);
}
.tab-peran__btn {
  min-height: var(--tap); padding: var(--s2) var(--s4); white-space: nowrap;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--f-label); font-weight: 600; cursor: pointer;
}
.tab-peran__btn[aria-selected="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* ---------- Angka fakta ---------- */
.fakta { display: grid; gap: var(--s6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .fakta { grid-template-columns: repeat(4, 1fr); } }
.fakta__angka { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--primary); }
.fakta__teks { color: var(--text-muted); font-size: var(--f-label); margin-top: var(--s2); line-height: 1.5; }

/* ---------- Harga ---------- */
.harga-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .harga-grid { grid-template-columns: repeat(2, 1fr); } }
.harga-kartu { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); padding: var(--s6); }
.harga-kartu--unggulan { border-color: var(--emas); box-shadow: 0 0 0 3px var(--emas-lembut); }
.harga-kartu__nama { font-size: var(--f-head); font-weight: 700; }
.harga-kartu__angka { font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: var(--s3); }
.harga-kartu__satuan { font-size: var(--f-label); color: var(--text-muted); font-weight: 500; }
.daftar-centang { margin-top: var(--s4); }
.daftar-centang > * + * { margin-top: var(--s3); }
.daftar-centang div { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--f-label); }
.daftar-centang svg { flex: none; margin-top: 1px; color: var(--success); }
.daftar-centang .silang { color: var(--text-muted); }

/* ---------- Tanya jawab ---------- */
.faq { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.faq__butir { border-top: 1px solid var(--border); }
.faq__butir:first-child { border-top: 0; }
.faq__tanya { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); min-height: 56px; cursor: pointer; font-weight: 600; list-style: none; }
.faq__tanya::-webkit-details-marker { display: none; }
.faq__tanya::marker { content: ""; }
.faq__tanya svg { margin-left: auto; flex: none; color: var(--text-muted); transition: transform .15s ease; }
.faq__butir[open] .faq__tanya svg { transform: rotate(90deg); }
.faq__jawab { padding: 0 var(--s4) var(--s4); color: var(--text-muted); line-height: 1.6; }

/* ---------- Kaki ---------- */
.kaki { border-top: 1px solid var(--border); padding: var(--s8) 0; color: var(--text-muted); font-size: var(--f-label); }
.kaki__dalam { max-width: var(--lebar-situs); margin: 0 auto; padding: 0 var(--s4); }
.kaki a { color: var(--text-muted); }

.pita { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); font-size: var(--f-label); font-weight: 600; }
.sbag--gelap .pita { background: rgba(234, 88, 12, .18); color: #FB923C; }

/* Pilihan cara bayar: yang terpilih diberi bingkai, sisanya tenang.
   Ditandai lewat :has supaya tetap benar saat pembeli berpindah pilihan,
   tanpa perlu JavaScript sama sekali. */
.pilih-bayar {
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  transition: border-color .15s ease, background-color .15s ease;
}
.pilih-bayar:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

/* ---------- Halaman tidak ditemukan (wajah situs profil) ---------- */

.hilang { text-align: center; padding-block: var(--s12) var(--s12); }

/* Angkanya besar tapi tenang: penanda, bukan teriakan. Dibuat transparan
   supaya tidak bersaing dengan judul yang justru perlu dibaca. */
.hilang__kode {
  font-size: clamp(88px, 22vw, 168px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--primary);
  opacity: .16;
  margin-bottom: calc(var(--s6) * -1);
  user-select: none;
}
.hilang__judul {
  font-size: 30px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.15; margin-top: var(--s6);
}
@media (min-width: 900px) { .hilang__judul { font-size: 40px; } }
.hilang__teks { max-width: 46ch; margin: var(--s4) auto 0; }
.hilang__aksi {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: center; margin-top: var(--s8);
}
.hilang__tautan { margin-top: var(--s12); }
/* Daerah gesernya dilebarkan sampai tepi layar supaya chip terakhir tidak
   terlihat "tersangkut" di pinggir, tapi isinya tetap punya jarak aman. */
.hilang__tautan .chips {
  margin-inline: calc(var(--s4) * -1);
  padding-inline: var(--s4);
  scroll-padding-inline: var(--s4);
}

@media (max-width: 520px) {
  /* Di layar sempit, dua tombol berdampingan jadi terlalu sempit untuk dibaca. */
  .hilang__aksi { flex-direction: column; align-items: stretch; }
}