/* ==========================================================================
   Tampilan sisi pelanggan — Ayam Bawang Putih Abang Hugo
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Motif bawang putih TIDAK dipakai sebagai wallpaper seluruh layar — itu
   membuat mata lelah dan menutupi menu. Motifnya dipakai sebagai ornamen di
   dua tempat saja: sudut kepala halaman dan pembatas antar kategori. */

.motif {
  color: var(--fg);
  opacity: var(--motif-opacity);
  pointer-events: none;
  flex: none;
}

/* Ornamen sudut kepala halaman. Dipasang di lapisan paling belakang dan
   sebagian terpotong tepi, supaya terbaca sebagai hiasan — bukan gambar
   yang menghalangi tombol. Di layar sempit disembunyikan karena ruangnya
   memang sudah padat. */
.site-head__motif {
  display: none;
  position: absolute;
  z-index: 0;
  right: -30px;
  bottom: -46px;
  width: 118px;
  height: 118px;
  transform: rotate(-14deg);
}

@media (min-width: 560px) {
  .site-head__motif { display: block; }
}

/* Penutup pembatas kategori. Lebih tegas dari ornamen kepala halaman karena
   ini memang dimaksudkan terbaca sebagai tanda, bukan tekstur. */
.cat-title__motif {
  width: 22px; height: 22px;
  opacity: .32;
  color: var(--accent);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

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

/* --- Kepala halaman ----------------------------------------------------- */

.site-head {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: var(--sp-5) 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 0; text-decoration: none; color: inherit;
}

/* Lencana logo: wajah Abang Hugo dipotong bulat dari berkas logo asli. */
.brand__mark {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-pill);
  background: #FFF7EC;
  box-shadow: 0 0 0 2px var(--accent);
  object-fit: cover;
}

.brand__text { min-width: 0; }

.brand__name {
  display: block;
  font-family: var(--font-display);
  /* Ukurannya dipilih dari pengukuran di layar tersempit yang lazim dipakai
     (iPhone SE, 375px): pada 15px nama "Ayam Bawang Putih Abang Hugo" tidak
     muat dua baris dan ujungnya terpotong jadi "…ABANG…". Pada 14px muat utuh.
     Nama warung adalah identitasnya — lebih baik hurufnya sedikit lebih kecil
     daripada namanya tidak terbaca. */
  font-size: .875rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
  /* Batas baris dilonggarkan jadi 3 sebagai jaring pengaman: nama toko bisa
     diganti pemilik lewat Pengaturan, dan yang lebih panjang tetap harus
     terbaca utuh. Nama sekarang cukup dua baris, jadi tidak ada bedanya
     sampai memang dibutuhkan. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.brand__sub {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); font-size: var(--text-xs);
  margin-top: 3px; min-width: 0;
  /* Boleh turun baris: jam tutup adalah keterangan yang dicari pembeli, jadi
     lebih baik memakan satu baris lagi daripada terpotong "Tutup pukul …". */
  flex-wrap: wrap;
}

.brand__tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Di layar sempit, keterangan jam pindah ke barisnya sendiri supaya utuh. */
@media (max-width: 480px) {
  .brand__tagline { flex-basis: 100%; }
}

.head-link {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.head-link:hover { color: var(--fg); border-color: var(--fg); }

.head-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* Tombol gelap/terang */
.theme-toggle {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  display: grid; place-items: center;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-base) var(--spring);
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
.theme-toggle:active { transform: rotate(-24deg) scale(.92); }
.theme-toggle svg { width: 18px; height: 18px; }

/* Ikon matahari tampil saat gelap (ajakan menerangkan), bulan saat terang. */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme='light'] .theme-toggle .icon-sun  { display: none; }
:root[data-theme='light'] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme='dark']) .theme-toggle .icon-moon { display: block; }
}

.status-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .04em;
}
.status-pill--open  { background: var(--notice-ok-bg); color: var(--green); }
.status-pill--closed{ background: var(--notice-error-bg); color: var(--red); }

/* Titik penanda: hijau berdenyut saat buka, merah diam saat tutup. */
.status-dot {
  width: 7px; height: 7px; flex: none;
  border-radius: var(--r-pill);
  background: currentColor;
}
.status-pill--open .status-dot { animation: denyut 2.4s var(--ease) infinite; }

@keyframes denyut {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: .55; }
}

/* --- Pita keterangan takeaway ------------------------------------------- */

.mode-strip {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  text-align: center;
}
.mode-strip__now { font-weight: 700; }
.mode-strip__soon {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--muted);
}
.mode-strip__tag {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-3); color: var(--muted);
  padding: 2px 7px; border-radius: var(--r-chip);
}

/* --- Papan jam operasional ---------------------------------------------- */

.hours-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.hours-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: var(--sp-3);
}
.hours-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--text-sm);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row__day { color: var(--muted); }
.hours-row__time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-row__time--closed { color: var(--muted-dim); font-weight: 400; }

/* --- Tab kategori ------------------------------------------------------- */

.cat-bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-blur);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.cat-scroll {
  display: flex; gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--sp-3) var(--sp-4);
  max-width: var(--max-w);
  margin: 0 auto;
  scroll-snap-type: x proximity;
}
.cat-scroll::-webkit-scrollbar { display: none; }

.cat-tab {
  flex: none;
  scroll-snap-align: start;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}
.cat-tab:hover { color: var(--fg); }
.cat-tab[aria-current='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* --- Pencarian ---------------------------------------------------------- */

.search {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4);
}
.search:focus-within { border-color: var(--accent); }
.search__icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.search:focus-within .search__icon { color: var(--accent); }
.search input {
  flex: 1; background: none; border: 0; outline: none; min-width: 0;
}
.search input::placeholder { color: var(--muted-dim); }

/* --- Kategori & kartu menu ---------------------------------------------- */

.cat-section { padding-top: var(--sp-5); scroll-margin-top: 74px; }

.cat-title {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--text-lg);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.cat-title__rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent 92%);
}

.menu-grid {
  display: grid;
  /* Jumlah kolom ditentukan lebar kartu yang masih nyaman dibaca (320px),
     bukan titik henti tetap. Dengan cara ini kartu tidak pernah menyempit
     sampai nama menunya pecah jadi empat baris. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-3);
}

.item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast) var(--ease);
}
.item:hover { border-color: var(--line-strong); }
.item--out { opacity: .5; }

.item__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--surface-2);
}
.item__media img { width: 100%; height: 100%; object-fit: cover; }

.item__badge {
  position: absolute; top: var(--sp-1); left: var(--sp-1);
  /* Amber asli logo — kontrasnya cukup di kedua suasana */
  background: var(--brand-amber); color: var(--on-accent);
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--r-chip);
}

.item__body { display: flex; flex-direction: column; min-width: 0; }
.item__name { font-weight: 800; font-size: var(--text-base); line-height: 1.3; }
.item__desc {
  color: var(--muted); font-size: var(--text-sm);
  margin-top: 2px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.item__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3);
}
.item__foot > * { min-width: 0; }
.item__price {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--price);
}
.item__out-label {
  font-size: var(--text-xs); font-weight: 700; color: var(--red);
  text-transform: uppercase; letter-spacing: .04em;
}

/* --- Pengatur jumlah ---------------------------------------------------- */

.stepper { display: flex; align-items: center; gap: var(--sp-2); }

.stepper__btn {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: transform var(--t-fast) var(--spring),
              background var(--t-fast) var(--ease);
}
.stepper__btn:hover:not(:disabled) { background: var(--surface-3); }
.stepper__btn:active:not(:disabled) { transform: scale(.86); }
.stepper__btn:disabled { opacity: .35; cursor: not-allowed; }

.stepper__btn--add {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.stepper__btn--add:hover:not(:disabled) { background: var(--accent-hover); }

.stepper__qty {
  min-width: 22px; text-align: center;
  font-weight: 800; font-variant-numeric: tabular-nums;
}

/* --- Batang keranjang mengambang ---------------------------------------- */

.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-float);
  transform: translateY(110%);
  transition: transform var(--t-base) var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.cart-bar.is-visible { transform: translateY(0); }

.cart-bar__inner {
  max-width: var(--max-w); margin: 0 auto;
  min-height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: none; border: 0; width: 100%; text-align: left;
  color: inherit;
}
.cart-bar__count { font-size: var(--text-sm); font-weight: 700; opacity: .8; }
.cart-bar__total { font-family: var(--font-display); font-size: var(--text-lg); }
.cart-bar__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 800; white-space: nowrap;
}

/* Titik kecil yang "terbang" ke keranjang saat item ditambahkan */
.fly-dot {
  position: fixed; z-index: 60; width: 14px; height: 14px;
  border-radius: var(--r-pill); background: var(--price);
  pointer-events: none;
}

/* --- Lembar keranjang & dialog ------------------------------------------ */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.is-open { transform: translateY(0); }

.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.sheet__title { font-size: var(--text-lg); text-transform: uppercase; }
.sheet__body { overflow-y: auto; padding: var(--sp-4); flex: 1; }
.sheet__foot { padding: var(--sp-4); border-top: 1px solid var(--line); }

.icon-btn {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--fg);
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
}
.icon-btn:hover { background: var(--surface-3); }

.line-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.line-item:last-of-type { border-bottom: 0; }
.line-item__name { font-weight: 700; }
.line-item__price { color: var(--muted); font-size: var(--text-sm); }
.line-item__total {
  font-family: var(--font-display); color: var(--price);
  text-align: right; white-space: nowrap;
}
.line-item__note {
  grid-column: 1 / -1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  outline: none; width: 100%;
}
.line-item__note:focus { border-color: var(--accent); }

.totals {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--sp-3) 0;
  border-top: 1px dashed var(--line-strong);
  margin-top: var(--sp-3);
}
.totals__label { font-size: var(--text-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.totals__value { font-family: var(--font-display); font-size: var(--text-xl); color: var(--price); }

/* --- Formulir ----------------------------------------------------------- */

.field { margin-bottom: var(--sp-4); }
.field__label {
  display: block; font-size: var(--text-sm); font-weight: 700;
  margin-bottom: var(--sp-2);
}
.field__hint { color: var(--muted); font-weight: 400; }

.input, .textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  padding: var(--sp-3) var(--sp-4);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.input:focus, .textarea:focus { border-color: var(--accent); }
.input::placeholder, .textarea::placeholder { color: var(--muted-dim); }
.textarea { resize: vertical; min-height: 76px; }

.pay-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.pay-option {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  background: var(--surface-2);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.pay-option__name { font-family: var(--font-display); font-size: var(--text-md); }
.pay-option__desc { color: var(--muted); font-size: var(--text-xs); margin-top: 2px; }
.pay-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--t-fast) var(--spring), background var(--t-fast) var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--lg { padding: var(--sp-4) var(--sp-5); font-size: var(--text-md); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn--wa { background: var(--wa); color: var(--wa-ink); }
.btn--wa:hover { filter: brightness(.93); }

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); }

/* --- Kotak pesan -------------------------------------------------------- */

.notice {
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  /* Jarak atas ikut diberi, bukan hanya bawah. Pemberitahuan sering disisipkan
     JavaScript sebagai elemen paling atas halaman — tanpa jarak atas ia
     menempel ke bar kategori di atasnya. Margin yang bersebelahan akan menyatu
     sendiri, jadi ini tidak membuat jaraknya jadi dobel. */
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-4);
  border: 1px solid;
}
.notice--error { background: var(--notice-error-bg); border-color: var(--notice-error-bd); color: var(--notice-error-fg); }
.notice--info  { background: var(--notice-info-bg); border-color: var(--notice-info-bd); color: var(--notice-info-fg); }
.notice--ok    { background: var(--notice-ok-bg); border-color: var(--notice-ok-bd); color: var(--notice-ok-fg); }

.empty {
  text-align: center; color: var(--muted);
  padding: var(--sp-7) var(--sp-4);
}

/* --- Skeleton loading --------------------------------------------------- */

.skeleton {
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: var(--r-img);
}
@keyframes shimmer { to { background-position: -220% 0; } }

.sk-line { height: 12px; margin-bottom: var(--sp-2); }
.sk-line--short { width: 45%; }
.sk-line--mid { width: 70%; }

/* --- Kaki halaman ------------------------------------------------------- */

.site-foot {
  position: relative; z-index: 1;
  margin-top: var(--sp-7);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--text-sm);
}

/* Ruang untuk bar keranjang melayang hanya disisakan di halaman yang memang
   punya bar itu. Sebelumnya disisakan di semua halaman, dan di halaman pesanan
   maupun akun jadi terlihat seperti pita kosong menggantung di kaki halaman. */
body.ada-bar-keranjang .site-foot { padding-bottom: calc(var(--bar-h) + var(--sp-6)); }

.site-foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.site-foot__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--fg);
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
.site-foot__line { margin: 0 0 var(--sp-2); }
.site-foot__wa { color: var(--price); font-weight: 700; }
/* Diberi jarak sendiri: tanpa ini ia menempel pada keterangan lokasi di
   atasnya dan keduanya terbaca seperti satu paragraf yang sama. */
.site-foot__note { margin-top: var(--sp-4); color: var(--muted-dim); }

@media (min-width: 720px) {
  .site-foot__grid { grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); }
}

/* --- Layar lebih besar -------------------------------------------------- */

@media (min-width: 480px) {
  .brand__mark { width: 46px; height: 46px; font-size: 1.2rem; }
  /* Batas 2 baris, bukan 1. Memaksa satu baris di sini justru memotong nama
     tepat di sekitar 480px, karena hurufnya sudah membesar tapi ruangnya belum
     cukup. Dibiarkan dua baris, nama tetap utuh — dan begitu layarnya benar
     benar lebar ia jatuh ke satu baris dengan sendirinya. */
  .brand__name { font-size: var(--text-md); -webkit-line-clamp: 2; }
}

@media (min-width: 640px) {
  .menu-grid { gap: var(--sp-4); }
  .item { grid-template-columns: 112px 1fr; }
  .sheet { left: auto; right: 0; top: 0; bottom: 0; width: min(440px, 100%); max-height: none; border-radius: 0; transform: translateX(100%); }
  .sheet.is-open { transform: translateX(0); }
}

@media (min-width: 1024px) {
  .cat-title { font-size: var(--text-xl); }
}

/* ==========================================================================
   Halaman pesanan
   ========================================================================== */

/* Jarak atas diatur di sini, bukan lewat margin kartu pertama. Kalau tiap
   kartu mengurus jaraknya sendiri, kedua kolom jadi tidak rata di layar lebar
   dan kartu teratas menempel ke bar jam buka di atasnya. */
.order-page { padding-top: var(--sp-5); padding-bottom: var(--sp-6); }
.order-page > section,
.order-page > .notice { margin-top: var(--sp-4); }

/* --- Nomor antrian ------------------------------------------------------ */

.queue-card {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.queue-card__label {
  margin: 0; font-size: var(--text-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
}
.queue-card__number {
  margin: var(--sp-1) 0;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 18vw, 5rem);
  line-height: 1;
  color: var(--accent);
}
.queue-card__code { margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* --- Garis kemajuan ----------------------------------------------------- */

.track {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.track__head { margin-bottom: var(--sp-4); }
.track__status {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.track__detail { font-size: var(--text-sm); color: var(--muted); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--text-xs);
  color: var(--muted-dim);
  text-align: center;
}
.step { position: relative; }
/* Garis penghubung antar tahap */
.step + .step::before {
  content: ''; position: absolute;
  top: 6px; right: 50%; left: -50%;
  height: 2px; background: var(--line-strong);
}
.step.is-done + .step::before,
.step.is-current + .step::before { background: var(--accent); }

.step__dot {
  position: relative; z-index: 1;
  display: block; width: 14px; height: 14px;
  margin: 0 auto var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--line-strong);
}
.step.is-done .step__dot,
.step.is-current .step__dot {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.step.is-done, .step.is-current { color: var(--fg); font-weight: 700; }

/* --- Wajan mengepul + hitung mundur ------------------------------------- */

.cook {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-card);
}
.cook__pan { position: relative; width: 64px; height: 52px; flex: none; color: var(--muted); }
.cook.is-cooking .cook__pan { color: var(--accent); }
.cook__wok { position: absolute; bottom: 0; width: 64px; height: 44px; }

.cook__steam {
  position: absolute; bottom: 30px;
  width: 5px; height: 14px;
  border-radius: var(--r-pill);
  background: currentColor;
  opacity: 0;
}
.cook__steam:nth-child(1) { left: 18px; }
.cook__steam:nth-child(2) { left: 30px; }
.cook__steam:nth-child(3) { left: 42px; }

/* Uap hanya bergerak saat benar-benar sedang dimasak */
.cook.is-cooking .cook__steam { animation: mengepul 2.2s ease-in-out infinite; }
.cook.is-cooking .cook__steam:nth-child(2) { animation-delay: .5s; }
.cook.is-cooking .cook__steam:nth-child(3) { animation-delay: 1s; }

@keyframes mengepul {
  0%   { opacity: 0; transform: translateY(0) scaleY(.6); }
  30%  { opacity: .55; }
  100% { opacity: 0; transform: translateY(-22px) scaleY(1.5); }
}

.cook__count {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  color: var(--price);
}
.cook__note { margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* --- Kartu pembayaran --------------------------------------------------- */

.pay-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-card);
}
.pay-card__title {
  font-size: var(--text-lg); text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.pay-card__hint { margin: 0 0 var(--sp-4); color: var(--muted); font-size: var(--text-sm); }
.pay-card__note { margin: var(--sp-4) 0 0; color: var(--muted); font-size: var(--text-sm); }

.qr-frame {
  display: grid; place-items: center;
  padding: var(--sp-4);
  margin: 0 auto;
  width: fit-content;
  background: #FFFFFF;      /* QR wajib gelap di atas terang agar terbaca */
  border-radius: var(--r-img);
}

/* Penanda "sedang mengubah pesanan". Sengaja mencolok dan menempel di atas:
   pembeli harus selalu sadar ia sedang mengubah pesanan yang sudah ada, bukan
   membuat pesanan baru. */
.ubah-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--notice-info-bg);
  color: var(--notice-info-fg);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  text-align: center;
}
.ubah-bar__batal {
  color: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  flex: none;
}

/* Menyimpan QRIS sebagai gambar, untuk pembeli yang membayar dari HP yang
   sama — layar tidak bisa memindai dirinya sendiri. */
.qris-simpan { margin-top: var(--sp-4); }
.qris-simpan .pay-card__note { margin-top: var(--sp-2); }
.qris-simpan .pay-card__note.is-ok    { color: var(--green); }
.qris-simpan .pay-card__note.is-galat { color: var(--red); }
.qr-frame svg, .qr-frame img { width: min(280px, 70vw); height: auto; display: block; }

.pay-card__amount {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--text-sm); color: var(--muted);
}
.pay-card__amount strong {
  font-family: var(--font-display); font-size: var(--text-xl); color: var(--price);
}

.cash-amount { text-align: center; margin: var(--sp-4) 0; }
.cash-amount__label {
  display: block; font-size: var(--text-sm); color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.cash-amount__value {
  display: block; margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 3rem);
  color: var(--price);
}

/* --- Rincian ------------------------------------------------------------ */

.detail-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.detail-card__title {
  font-size: var(--text-md); text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.detail-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.detail-row:last-of-type { border-bottom: 0; }
.detail-row__qty { color: var(--accent); font-weight: 800; }
.detail-row__name { font-weight: 600; }
.detail-row__note {
  display: block; font-size: var(--text-xs); color: var(--muted);
  margin-top: 2px;
}
.detail-row__price { white-space: nowrap; color: var(--price); font-weight: 700; }
.detail-card__notes {
  margin: var(--sp-3) 0 0; font-size: var(--text-sm); color: var(--muted);
}

/* --- Tombol & ajakan daftar --------------------------------------------- */

.order-actions {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.join-card {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.join-card__title { font-size: var(--text-md); text-transform: uppercase; margin-bottom: var(--sp-2); }
.join-card__body { margin: 0 0 var(--sp-4); font-size: var(--text-sm); color: var(--muted); }

.ready-banner { animation: masukHalus var(--t-slow) var(--spring); }
@keyframes masukHalus {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Jam nyata & lokasi perangkat --------------------------------------- */

.hours-card__title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.hours-card__now {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.hours-card__now [data-clock] {
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  font-weight: 700;
}

/* Muncul hanya bila zona waktu perangkat berbeda dari outlet */
.tz-note {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--notice-info-bg);
  border: 1px solid var(--notice-info-bd);
  border-radius: var(--r-chip);
  color: var(--notice-info-fg);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* Tombol lokasi dan tautan peta berdampingan: keduanya jawaban atas pertanyaan
   yang sama ("outletnya di mana"), jadi tidak perlu dua baris penuh. */
.lokasi {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
}
.lokasi__hasil {
  flex-basis: 100%;
  margin: 0; font-size: var(--text-xs); color: var(--muted); line-height: 1.5;
}
.lokasi__peta { font-size: var(--text-xs); color: var(--price); font-weight: 700; }

/* ==========================================================================
   Halaman akun
   ========================================================================== */

.akun-page { padding-bottom: var(--sp-6); }
.akun-page > section { margin-top: var(--sp-5); }

/* --- Masuk / daftar ----------------------------------------------------- */

.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-card);
  max-width: 420px;
}
.auth-card__title { font-size: var(--text-xl); text-transform: uppercase; }
.auth-card__sub { margin: var(--sp-2) 0 var(--sp-5); color: var(--muted); font-size: var(--text-sm); }
.auth-card__ganti { margin: var(--sp-4) 0 0; font-size: var(--text-sm); color: var(--muted); text-align: center; }
.auth-card__ganti a { color: var(--accent); font-weight: 700; }

.untung-card {
  max-width: 420px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.untung-card__title { font-size: var(--text-md); text-transform: uppercase; margin-bottom: var(--sp-3); }
.untung-list { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: var(--text-sm); }
.untung-list li { margin-bottom: var(--sp-2); }
.untung-list li::marker { color: var(--accent); }

/* --- Kartu profil ------------------------------------------------------- */

.profil-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tier, var(--accent));
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-card);
}
.profil-card__atas {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.profil-card__nama { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); }
.profil-card__hp { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); }

.badge-tier {
  flex: none;
  background: var(--tier, var(--accent));
  color: #FFF8F0;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
}

.profil-card__catatan { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--text-sm); }

.angka-baris {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.angka__nilai {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--price);
  line-height: 1.2;
}
.angka__label {
  display: block; margin-top: 2px;
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}

.progres__bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progres__bar span {
  display: block; height: 100%;
  background: var(--tier, var(--accent));
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease);
}
.progres__teks { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--muted); }

.profil-card__tunai {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3);
  border-radius: var(--r-chip);
  background: var(--notice-info-bg);
  border: 1px solid var(--notice-info-bd);
  color: var(--notice-info-fg);
  font-size: var(--text-sm);
}
.profil-card__tunai--aktif {
  background: var(--notice-ok-bg);
  border-color: var(--notice-ok-bd);
  color: var(--notice-ok-fg);
}

/* --- Riwayat ------------------------------------------------------------ */

.riwayat-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-card);
}
.riwayat-item__tanggal { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.riwayat-item__kode { margin: 2px 0; font-weight: 800; }
.riwayat-item__isi { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.riwayat-item__kanan { text-align: right; }
.riwayat-item__total {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--price);
}
.riwayat-item__aksi {
  grid-column: 1 / -1;
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.riwayat-item__aksi .btn { flex: 1; padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); }

.tanda {
  display: inline-block; margin-top: var(--sp-2);
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px var(--sp-2);
  border-radius: var(--r-chip);
}
.tanda--menunggu { background: var(--notice-error-bg); color: var(--red); }
.tanda--proses   { background: var(--notice-info-bg);  color: var(--notice-info-fg); }
.tanda--siap     { background: var(--notice-ok-bg);    color: var(--green); }
.tanda--selesai  { background: var(--surface-3);       color: var(--muted); }
.tanda--batal    { background: var(--surface-2);       color: var(--muted-dim); }

.keluar-form { margin-top: var(--sp-6); max-width: 420px; }

/* ==========================================================================
   Tata letak layar lebar

   Isi yang dirancang untuk HP tidak boleh sekadar direnggangkan sampai
   1120px — kartunya jadi melompong dan matanya harus menyapu jauh untuk
   membaca satu baris. Di layar lebar, isinya dipecah jadi dua kolom yang
   masing-masing tetap senyaman lebar HP.
   ========================================================================== */

/* --- Halaman pesanan ---------------------------------------------------- */

.order-col > section,
.order-col > .notice,
.order-col > .order-actions { margin-top: var(--sp-4); }

/* Yang paling atas halaman tidak perlu margin: jaraknya sudah dari
   padding-top .order-page. Di layar sempit kedua kolom bertumpuk, jadi kartu
   pertama kolom kedua tetap butuh jarak — karena itu hanya kolom pertama
   yang dinolkan di sini. */
.order-page > .order-col:first-child > *:first-child { margin-top: 0; }

@media (min-width: 900px) {
  .order-page {
    max-width: 980px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--sp-5);
    align-items: start;
  }
  .order-col > *:first-child { margin-top: 0; }

  /* Rincian dan tombol ikut tergulir bersama kolom kiri yang lebih panjang */
  .order-col--samping { position: sticky; top: var(--sp-5); }
}

/* --- Halaman akun ------------------------------------------------------- */

/* Jarak atasnya diberikan di sini, bukan hanya di layar lebar. Sebelumnya
   padding-top cuma dipasang mulai 820px, sehingga di HP kartu "Masuk" menempel
   langsung ke bar jam buka di atasnya. */
.masuk-grid { display: grid; gap: var(--sp-5); padding-top: var(--sp-5); }
.masuk-grid > * { margin-top: 0 !important; }

@media (min-width: 820px) {
  .akun-page { max-width: 980px; }
  .masuk-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    padding-top: var(--sp-5);
  }
  .auth-card, .untung-card { max-width: none; }
}

.akun-grid { display: grid; gap: var(--sp-5); }
.akun-grid > *, .akun-grid__samping > * { margin-top: 0; }
.akun-grid__samping { display: grid; gap: var(--sp-4); align-content: start; }
.akun-grid .keluar-form { margin-top: 0; max-width: none; }

@media (min-width: 900px) {
  .akun-grid {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: start;
    padding-top: var(--sp-5);
  }
  /* Kartu profil menempel saat riwayat digulir — tingkatan dan poin tetap
     terlihat sambil menelusuri pesanan lama. */
  .akun-grid__samping { position: sticky; top: var(--sp-5); }
  .riwayat .cat-title { margin-top: 0; }
}

/* --- Menu: manfaatkan layar sangat lebar -------------------------------- */

/* Layar sangat lebar: yang dilebarkan wadahnya, bukan kartunya dipersempit.
   Kolom bertambah sendiri karena lebar minimum kartu tetap dijaga. */
@media (min-width: 1500px) {
  .wrap { max-width: 1360px; }
}

/* --- Halaman galat berkolom tunggal ------------------------------------- */

.wrap--sempit { max-width: 620px; }

/* --- Layar sangat sempit (HP lawas 320px) ------------------------------- */

@media (max-width: 360px) {
  .angka__nilai { font-size: var(--text-base); }
  .angka__label { font-size: 9px; }
  .queue-card__number { font-size: 4rem; }
  .riwayat-item__aksi { flex-direction: column; }
  .riwayat-item__aksi .btn { flex: none; width: 100%; }
  .cat-tab { padding: var(--sp-2) var(--sp-3); }
  .item { grid-template-columns: 84px 1fr; gap: var(--sp-3); }

  /* Di HP selebar 320px, nama warung hanya kebagian sekitar 120px dan tetap
     terpotong. Ruangnya diambil dari lencana logo dan tombol di kanan —
     keduanya masih nyaman disentuh pada ukuran ini, sedangkan nama yang
     terpotong tidak bisa ditawar. */
  .brand__mark   { width: 38px; height: 38px; }
  .brand         { gap: var(--sp-2); }
  .head-actions  { gap: var(--sp-1); }
  .theme-toggle  { width: 32px; height: 32px; }
  .head-link     { padding: var(--sp-2) var(--sp-3); }
}

.bukti-unggah { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--line); }
.bukti-unggah label.btn { cursor: pointer; }
.bukti-pratinjau { max-width: 220px; border-radius: var(--r-img); margin-top: var(--sp-3); }

/* --- Tanda sisa stok ---------------------------------------------------- */

.stok {
  /* align-self perlu karena kartunya flex kolom — tanpa ini tandanya
     melar selebar kartu dan terlihat seperti spanduk, bukan label. */
  align-self: flex-start;
  margin-top: var(--sp-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: var(--r-chip);
  background: var(--surface-3);
  color: var(--muted);
}
/* Stok menipis dibuat mencolok dan berdenyut pelan — inilah saat pembeli
   perlu segera memutuskan, bukan saat stoknya masih banyak. */
.stok--menipis {
  background: var(--notice-error-bg);
  color: var(--red);
  animation: denyut-stok 2.6s var(--ease) infinite;
}
@keyframes denyut-stok {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}