/* ===========================================================================
   King Mahjong — sistem visual
   Aturan yang dipegang dari brand sheet:
   - Hitam adalah ruangannya, emas adalah listnya, ivory adalah halamannya.
   - Emas hanya untuk judul, garis, dan SATU tombol per layar. Tidak untuk teks
     isi, tidak untuk label form.
   - Burgundy berarti kelangkaan atau kesalahan. Sage berarti terkonfirmasi.
   - Apa pun yang dibaca atau diketik tamu duduk di atas ivory, bukan di hitam.
   - Fretwork hanya di belakang bidang gelap, 6-10% opasitas, tidak pernah di
     belakang teks.
   =========================================================================== */

:root {
  /* Palet */
  --lacquer: #0c0b09;
  --olive: #171c17;
  --felt: #131a14;
  --gold: #a9854b;
  --gold-hi: #d8b878;
  --gold-lo: #7d5f31;
  --burgundy: #6e2230;
  --burgundy-hi: #e08699;   /* burgundy versi terang, untuk teks di atas gelap */
  --sage: #93a48d;
  --sage-deep: #4a5a46;
  --ivory: #f5f0e5;
  --ivory-dim: #e6dfd0;

  /* Teks */
  --ink: #17150f;           /* teks di atas ivory  — 15.7:1 */
  --ink-soft: #5a5346;
  --paper: #f5f0e5;         /* teks di atas lacquer — 15.8:1 */
  --paper-soft: #a9a294;

  /* Bentuk */
  --r-tile: 10px;
  --r-panel: 14px;
  --r-pill: 999px;
  --hairline: 2px;

  /* Jarak */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 72px;

  --shell: 1120px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Fretwork: kisi dari medaliton logo. Dipakai sebagai latar bidang gelap. */
  --fretwork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23a9854b' stroke-width='2'%3E%3Crect x='6' y='6' width='24' height='24'/%3E%3Crect x='14' y='14' width='8' height='8'/%3E%3Crect x='36' y='6' width='24' height='24'/%3E%3Crect x='44' y='14' width='8' height='8'/%3E%3Crect x='66' y='6' width='24' height='24'/%3E%3Crect x='74' y='14' width='8' height='8'/%3E%3Crect x='6' y='36' width='24' height='24'/%3E%3Crect x='14' y='44' width='8' height='8'/%3E%3Crect x='36' y='36' width='24' height='24'/%3E%3Crect x='44' y='44' width='8' height='8'/%3E%3Crect x='66' y='36' width='24' height='24'/%3E%3Crect x='74' y='44' width='8' height='8'/%3E%3Crect x='6' y='66' width='24' height='24'/%3E%3Crect x='14' y='74' width='8' height='8'/%3E%3Crect x='36' y='66' width='24' height='24'/%3E%3Crect x='44' y='74' width='8' height='8'/%3E%3Crect x='66' y='66' width='24' height='24'/%3E%3Crect x='74' y='74' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Dasar --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--lacquer);
  color: var(--paper);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

::selection { background: var(--gold); color: var(--lacquer); }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Tipografi ----------------------------------------------------------- */

h1, h2, h3, h4, .serif {
  font-family: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.05; }
h2 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.15; }
h3 { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.25; }

/* Emas membawa judul. Gradien emas hanya aman di atas 32px — di bawah itu
   gradiennya pecah dan kontrasnya jatuh, jadi dipakai emas rata. */
.gold { color: var(--gold); }

.gold-plate {
  background: linear-gradient(170deg, var(--gold-hi) 0%, var(--gold) 42%, var(--gold-lo) 78%, var(--gold-hi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Kilau yang menyapu tulisan emas. Pita terangnya sempit dan geraknya lambat -
   ini cahaya lampu yang bergeser di atas lacquer, bukan kerlip mesin judi.
   Posisi latarnya digerakkan Motion; CSS hanya menyiapkan gradiennya. */
.gold-plate.sheen {
  background-image: linear-gradient(100deg,
    var(--gold-lo) 0%,
    var(--gold) 26%,
    var(--gold-hi) 40%,
    #f2e0b4 46%,
    var(--gold-hi) 52%,
    var(--gold) 66%,
    var(--gold-lo) 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 60% 0;
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 var(--gap-sm);
  font-weight: 500;
}

.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--paper); opacity: 0.88; max-width: 62ch; }

.muted { color: var(--paper-soft); }
.small { font-size: 14px; }

.label {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
}

.data { font-size: 15px; font-variant-numeric: tabular-nums; }

/* --- Tata letak ---------------------------------------------------------- */

.shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
}

section { position: relative; }

.section { padding-block: var(--gap-xl); }
.section--tight { padding-block: var(--gap-lg); }

/* Bidang gelap boleh memakai fretwork. Teks tidak pernah duduk langsung di atasnya. */
.fret::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--fretwork);
  background-size: 96px 96px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.fret > * { position: relative; z-index: 1; }

/* Garis rambut emas, 2px, gradien. */
.rule {
  height: var(--hairline);
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--gold-lo) 12%, var(--gold) 50%, var(--gold-lo) 88%, transparent);
}
.rule--short { width: 120px; background: linear-gradient(90deg, var(--gold), var(--gold-lo)); }

.grid { display: grid; gap: var(--gap-md); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.stack > * + * { margin-top: var(--gap); }
.row { display: flex; gap: var(--gap-sm); align-items: center; flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); }

/* --- Header -------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(12, 11, 9, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(169, 133, 75, 0.24);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: 14px;
}

.brandmark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brandmark__seal { width: 40px; height: 40px; flex: none; }
.brandmark__text { line-height: 1; }
/* Keduanya span di HTML, jadi display-nya harus dipaksa blok - kalau tidak,
   slogan mengalir inline di belakang nama dan membungkus di layar sempit. */
.brandmark__name {
  display: block;
  font-family: 'Marcellus', Georgia, serif;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}
.brandmark__sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 4px;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: var(--gap-sm); }
.nav a {
  text-decoration: none;
  font-size: 15px;
  color: var(--paper);
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav a:hover { background: rgba(169, 133, 75, 0.14); }
.nav a[aria-current='page'] { color: var(--gold); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  /* transform diserahkan ke Motion; CSS hanya mengurus warna dan bayangan. */
  transition: box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
  min-height: 48px;
}
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.42; cursor: not-allowed; }

/* Satu tombol emas per layar. */
.btn--gold {
  background: linear-gradient(168deg, var(--gold-hi), var(--gold) 46%, var(--gold-lo));
  color: #17140c;
  font-weight: 600;
  box-shadow: 0 10px 26px -14px rgba(169, 133, 75, 0.9);
}
.btn--gold:hover:not(:disabled) { box-shadow: 0 14px 32px -12px rgba(169, 133, 75, 0.95); }

/* Isian samar dan garis yang lebih tegas. Sebelumnya .btn--line memakai garis
   60% dan .btn--quiet 18% di atas lacquer hitam - keduanya nyaris tidak terbaca
   sebagai tombol, apalagi di layar kasir yang terang. */
.btn--line {
  background: rgba(169, 133, 75, 0.1);
  border-color: rgba(169, 133, 75, 0.85);
  color: var(--ivory);
}
.btn--line:hover:not(:disabled) { border-color: var(--gold-hi); background: rgba(169, 133, 75, 0.2); }

.btn--ink {
  background: var(--ink);
  color: var(--ivory);
}
.btn--ink:hover:not(:disabled) { background: #2a261d; }

.btn--quiet {
  background: rgba(245, 240, 229, 0.06);
  color: #d8d2c4;
  border-color: rgba(245, 240, 229, 0.38);
  padding: 10px 16px;
  min-height: 40px;
  font-size: 14px;
}
.btn--quiet:hover:not(:disabled) { color: var(--paper); background: rgba(245, 240, 229, 0.13); border-color: rgba(245, 240, 229, 0.6); }

.btn--wa {
  background: #1f7a4d;
  color: #fff;
  padding: 10px 18px;
  min-height: 42px;
  font-size: 15px;
}
.btn--wa:hover { background: #24905b; }

.btn--full { width: 100%; }

/* --- Permukaan ivory ----------------------------------------------------- */

/* Kartu ivory adalah kartunya. Bevel lembut di sisi atas, seperti ubin sungguhan. */
.sheet {
  background: linear-gradient(180deg, #fffdf7 0%, var(--ivory) 22%, var(--ivory-dim) 100%);
  color: var(--ink);
  border-radius: var(--r-panel);
  padding: var(--gap-md);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(23, 21, 15, 0.08),
    0 18px 40px -22px rgba(0, 0, 0, 0.9);
}
.sheet h1, .sheet h2, .sheet h3 { color: var(--ink); }
.sheet .label { color: var(--sage-deep); }
.sheet .muted { color: var(--ink-soft); }
/* Tautan TEKS di dalam lembar ivory - bukan tombol.
   Tanpa :not(.btn), aturan ini menang atas .btn--ink (0,2,0 lawan 0,1,0) dan
   mengecat teks tombol hitam itu dengan sage tua: 2,47:1 di atas latar nyaris
   hitam. Yang kena adalah "Buka di Google Maps" di setiap kartu tempat dan
   "Lihat jadwal kelas" di beranda - tombol ajakan yang justru paling ingin
   dilihat tamu. */
.sheet a:not(.btn) { color: var(--sage-deep); }

/* Panel gelap: bidang olive di atas lacquer, untuk pengelompokan bukan untuk membaca. */
.panel {
  background: var(--olive);
  border: 1px solid rgba(169, 133, 75, 0.2);
  border-radius: var(--r-panel);
  padding: var(--gap-md);
  position: relative;
  overflow: hidden;
}
.panel--felt { background: var(--felt); }

.divider { height: 1px; background: rgba(23, 21, 15, 0.14); border: 0; margin: var(--gap) 0; }
.divider--dark { background: rgba(169, 133, 75, 0.22); }

/* --- Ubin ---------------------------------------------------------------- */

/* Ubin mahjong: ivory, bevel atas, sudut membulat. Dipakai untuk slot jam,
   angka, dan motif. Jangan pernah jadi kotak abu-abu datar. */
.tile {
  background: linear-gradient(180deg, #fffef9 0%, var(--ivory) 30%, #e9e2d2 100%);
  color: var(--ink);
  border-radius: var(--r-tile);
  border: 1px solid rgba(23, 21, 15, 0.1);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(23, 21, 15, 0.1),
    0 4px 10px -6px rgba(0, 0, 0, 0.7);
}

.tile-motif {
  width: 74px;
  height: 100px;
  display: grid;
  place-items: center;
  font-family: 'Marcellus', serif;
  font-size: 40px;
}
.tile-motif--red { color: var(--burgundy); }
.tile-motif--green { color: #2f5a3a; }

/* Slot jam digambar sebagai ubin. */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--gap-sm);
  /* Seret mendatar dipakai untuk memilih rentang jam; gulir tegak tetap milik
     peramban supaya halaman masih bisa digulir dengan jempol. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  min-height: 78px;
  font: inherit;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(180deg, #fffef9 0%, var(--ivory) 30%, #e9e2d2 100%);
  color: var(--ink);
  border-radius: var(--r-tile);
  border: 1px solid rgba(23, 21, 15, 0.12);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(23, 21, 15, 0.1),
    0 4px 10px -6px rgba(0, 0, 0, 0.7);
  touch-action: pan-y;
}
.slot__time { font-family: 'Marcellus', serif; font-size: 19px; line-height: 1.1; }
.slot__meta { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.slot__strike { text-decoration: line-through; opacity: 0.55; margin-right: 4px; }

/* Pratinjau saat pointer diseret melintasi ubin. Digambar langsung tanpa render
   ulang grid — mencabut elemen di tengah gestur akan memutus pointer capture. */
.slot--preview {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 3px var(--sage),
    0 8px 18px -8px rgba(0, 0, 0, 0.9);
}
.slot--preview .slot__meta { color: var(--sage-deep); font-weight: 600; }

.slot[aria-pressed='true'] {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 3px var(--sage-deep),
    0 8px 18px -8px rgba(0, 0, 0, 0.9);
}
.slot[aria-pressed='true'] .slot__meta { color: var(--sage-deep); font-weight: 600; }

/* Kelangkaan memakai burgundy, dan hanya di atas ivory. */
.slot--last .slot__meta { color: var(--burgundy); font-weight: 600; }

.slot:disabled { cursor: not-allowed; }

.slot--past {
  background: #cfc9bb;
  color: #6d675b;
  box-shadow: none;
  border-color: rgba(23, 21, 15, 0.12);
}
.slot--past .slot__meta { color: #6d675b; }

/* Slot terpesan: ubin dicoret, bukan sekadar diredupkan. */
.slot--booked {
  background: #b9b3a5;
  color: #514c42;
  box-shadow: none;
}
.slot--booked .slot__meta { color: #514c42; }
.slot--booked::after {
  content: '';
  position: absolute;
  inset: 10px;
  background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(23, 21, 15, 0.45) 50%, transparent calc(50% + 1px));
}

/* --- Kartu meja ---------------------------------------------------------- */

.tables { display: grid; gap: var(--gap-sm); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.table-card {
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: var(--r-tile);
  background: var(--felt);
  border: 1px solid rgba(169, 133, 75, 0.28);
  color: var(--paper);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
  touch-action: manipulation;
}
.table-card:hover:not(:disabled) { border-color: var(--gold); }
.table-card[aria-pressed='true'] {
  background: rgba(169, 133, 75, 0.14);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.table-card__name { font-family: 'Marcellus', serif; font-size: 19px; color: var(--gold); }
.table-card__note { font-size: 13px; color: var(--paper-soft); }
.table-card__free { font-size: 13px; color: var(--sage); margin-top: 4px; }
.table-card--full { opacity: 0.45; cursor: not-allowed; }
.table-card--full .table-card__free { color: var(--paper-soft); }

/* --- Lencana ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  /* Pil yang teksnya membungkus berubah jadi lozenge setinggi empat baris dan
     meregangkan seluruh baris tabel. Kalau isinya tidak muat, tabelnya yang
     digulir - itu sudah disediakan - bukan barisnya yang menggelembung. */
  white-space: nowrap;
}
.badge--sage { color: var(--sage-deep); background: rgba(147, 164, 141, 0.18); }
.badge--gold { color: var(--gold-lo); background: rgba(169, 133, 75, 0.16); }
.badge--burgundy { color: var(--burgundy); background: rgba(110, 34, 48, 0.1); }
.badge--muted { color: var(--ink-soft); background: rgba(23, 21, 15, 0.06); }

/* Di atas hitam, lencana burgundy harus jadi isian, bukan teks. */
/* Dua bentuk, dan keduanya perlu: `on-dark` kadang dipasang di pembungkusnya,
   kadang di badge-nya sendiri. Selama hanya bentuk keturunan yang ditulis,
   badge yang membawa kelasnya sendiri diam-diam memakai warna mode terang -
   hijau tua di atas kartu hitam, praktis tidak terbaca. Itu terjadi pada chip
   jam buka di halaman pesan, dan tidak ada yang menyadarinya sampai ada yang
   memperbesar layarnya. */
.on-dark .badge--sage, .badge--sage.on-dark { color: var(--sage); background: rgba(147, 164, 141, 0.14); }
.on-dark .badge--gold, .badge--gold.on-dark { color: var(--gold); background: rgba(169, 133, 75, 0.12); }
.on-dark .badge--burgundy, .badge--burgundy.on-dark { color: var(--ivory); background: var(--burgundy); border-color: var(--burgundy); }
.on-dark .badge--muted, .badge--muted.on-dark { color: var(--paper-soft); background: rgba(245, 240, 229, 0.08); }

/* Dan bentuk ketiga: lencana yang duduk di dalam .panel.
   Dua bentuk di atas menuntut seseorang ingat memasang `on-dark`. Yang terjadi
   berulang kali adalah tidak ada yang ingat - chip "Hari kerja · Rp 100.000/jam"
   di halaman pesan meja terbaca 2,35:1, emas tua di atas olive gelap, dan tidak
   ada yang menyadarinya karena di layar pengembang chipnya memang terlihat.
   .panel TIDAK perlu diingat: ia memang definisi permukaan gelap di berkas ini,
   jadi lencana apa pun di dalamnya otomatis dapat warna mode gelap. */
.panel .badge--sage { color: var(--sage); background: rgba(147, 164, 141, 0.14); }
.panel .badge--gold { color: var(--gold-hi); background: rgba(169, 133, 75, 0.14); }
.panel .badge--burgundy { color: var(--ivory); background: var(--burgundy); border-color: var(--burgundy); }
.panel .badge--muted { color: var(--paper-soft); background: rgba(245, 240, 229, 0.08); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(169, 133, 75, 0.45);
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Form ---------------------------------------------------------------- */

/* Label tetap terlihat saat mengetik. Placeholder tidak pernah jadi satu-satunya label. */
.field { display: block; margin-bottom: var(--gap); }
.field > .field__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.field__hint { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.field__error { font-size: 13px; color: var(--burgundy); margin-top: 6px; font-weight: 600; }

/* Formulir yang duduk di panel gelap, bukan di lembar ivory.
   Bawaan kedua baris di atas adalah warna untuk kertas - itu memang kasus yang
   paling sering, tapi halaman Cek booking dan beberapa formulir dashboard
   memakai .panel, dan di sana keterangan kecilnya terbaca 2,27:1. Polanya sama
   dengan .sheet .muted di atas, cuma arahnya berlawanan. */
.panel .field__hint { color: var(--paper-soft); }
.panel .field__error { color: var(--burgundy-hi); }

.input, .select, .textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  border-radius: 8px;
  border: 1px solid rgba(23, 21, 15, 0.28);
  background: #fffdf6;
  color: var(--ink);
  min-height: 48px;
}
.input::placeholder, .textarea::placeholder { color: #9a9384; }
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--sage-deep);
  outline-offset: 0;
  border-color: var(--sage-deep);
}
.input[aria-invalid='true'] { border-color: var(--burgundy); }
.textarea { min-height: 96px; resize: vertical; }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.check input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--sage-deep);
  flex: none;
}

.inline-form { display: flex; gap: var(--gap-sm); flex-wrap: wrap; }
.inline-form .input { flex: 1 1 200px; width: auto; }

/* --- Langkah ------------------------------------------------------------- */

.stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.stepper__item { display: flex; align-items: center; gap: 8px; color: var(--paper-soft); }
.stepper__num {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(169, 133, 75, 0.5);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.stepper__item--now { color: var(--gold); }
.stepper__item--now .stepper__num { background: var(--gold); color: var(--lacquer); border-color: var(--gold); font-weight: 600; }
.stepper__item--done .stepper__num { border-color: var(--sage); color: var(--sage); }
.stepper__sep { width: 22px; height: 1px; background: rgba(169, 133, 75, 0.4); }

/* --- Kalender ------------------------------------------------------------ */

/* Kalender dibatasi lebarnya supaya kotak tanggal tidak melar jadi papan catur
   raksasa di layar lebar. */
/* Kalender dibatasi 400px supaya selnya tidak menggelembung jadi kotak 150px
   di layar lebar - tapi panel yang memuatnya selebar layar, jadi tanpa
   margin otomatis seluruh ruang sisanya menumpuk di kanan dan kalendernya
   terlihat seperti gagal dimuat. Dipusatkan supaya ruang kosongnya terbagi
   dua dan terbaca sebagai kesengajaan. */
.cal__head, .cal__grid { max-width: 400px; margin-inline: auto; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap); }
.cal__month { font-family: 'Marcellus', serif; font-size: 21px; color: var(--ink); }
.cal__nav {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(23, 21, 15, 0.25);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal__dow { text-align: center; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 6px; }
.cal__day {
  aspect-ratio: 1;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(23, 21, 15, 0.05);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal__day:hover:not(:disabled) { background: rgba(147, 164, 141, 0.28); }
.cal__day:disabled { color: #b3ac9d; background: transparent; cursor: not-allowed; }
.cal__day--empty { background: transparent; cursor: default; }
.cal__day[aria-pressed='true'] {
  background: var(--ink);
  color: var(--ivory);
  font-weight: 600;
}
.cal__day--today:not([aria-pressed='true']) { box-shadow: inset 0 0 0 1px var(--sage-deep); }

/* --- Bilah total melayang ------------------------------------------------ */

.tally {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: rgba(19, 26, 20, 0.96);
  backdrop-filter: blur(12px);
  border-top: var(--hairline) solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1;
  /* Posisi awal di luar layar. Motion yang menggeser masuk dan keluar, jadi
     tidak ada transisi CSS di sini agar keduanya tidak berebut transform. */
  transform: translateY(110%);
  padding-bottom: env(safe-area-inset-bottom);
}
.tally--on { transform: translateY(0); }
.tally__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: 14px;
}
.tally__count { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.tally__sum { font-family: 'Marcellus', serif; font-size: 24px; color: var(--gold); font-variant-numeric: tabular-nums; }

/* --- Keranjang meja ------------------------------------------------------ */

/* Baris keranjang bisa digeser ke kiri untuk dihapus. Yang bergerak adalah
   lapisan [data-swipe-track]; latar burgundy di belakangnya tersingkap makin
   pekat seiring jarak geseran (--swipe berjalan dari 0 ke 1). */
.cart-line {
  position: relative;
  padding: 12px 0;
  touch-action: pan-y;
  --swipe: 0;
}
.cart-line + .cart-line { border-top: 1px solid rgba(23, 21, 15, 0.12); }
/* Garis burgundy tumbuh dari tepi kanan seiring geseran - tidak ada lapisan
   buram yang menutupi kartu, jadi gradien ivory di baliknya tetap utuh. */
.cart-line::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -12px;
  width: 3px;
  border-radius: 2px;
  background: var(--burgundy);
  opacity: var(--swipe);
  transform: scaleY(var(--swipe));
  pointer-events: none;
}
.cart-line__track {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  align-items: flex-start;
}
.cart-line.is-swiping { cursor: grabbing; }
.cart-line__hint {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--burgundy);
  opacity: var(--swipe);
  white-space: nowrap;
}
.cart-line__title { font-family: 'Marcellus', serif; font-size: 18px; }
.cart-line__hours { font-size: 14px; color: var(--ink-soft); }
.cart-line__price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.link-btn {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 14px;
  color: var(--sage-deep); text-decoration: underline;
  cursor: pointer;
}
.link-btn--danger { color: var(--burgundy); }

/* Tautan tindakan di atas panel gelap.
   --sage-deep dan --burgundy dipilih untuk kertas ivory, dan di sana keduanya
   terbaca. Di atas .panel (--olive) mereka jatuh ke 2.3:1 dan 1.6:1 - "hapus"
   praktis tidak terlihat sampai kursornya lewat. Tab Tempat, Jadwal kelas,
   Member, dan Akun staf semuanya memakai panel gelap, jadi di sanalah seluruh
   kolom tindakan berada.
   Ini persis alasan yang sama dengan blok .on-dark untuk lencana di bawah;
   yang terlewat dulu cuma tautannya.
   Yang dipakai sebagai penanda adalah .panel, BUKAN .on-dark: di dashboard
   kelas on-dark menempel di <body>, jadi bentuk keturunannya akan ikut mewarnai
   tautan di dalam lembar ivory - dan di sana sage terang justru yang hilang. */
.panel .link-btn { color: var(--sage); }
.panel .link-btn--danger { color: var(--burgundy-hi); }
.panel .aksi-lain > summary { color: var(--sage); }

/* --- Ringkasan biaya ----------------------------------------------------- */

.sum-row { display: flex; justify-content: space-between; gap: var(--gap); padding: 7px 0; font-variant-numeric: tabular-nums; }
.sum-row--total {
  border-top: var(--hairline) solid;
  border-image: linear-gradient(90deg, var(--gold), var(--gold-lo)) 1;
  margin-top: 10px;
  padding-top: 14px;
  font-family: 'Marcellus', serif;
  font-size: 22px;
}
.sum-row--discount { color: var(--sage-deep); }

/* --- Pembayaran ---------------------------------------------------------- */

.countdown {
  font-family: 'Marcellus', serif;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.countdown--urgent { color: var(--burgundy); }

.qr-frame {
  background: #fff;
  border-radius: var(--r-tile);
  padding: 16px;
  width: min(280px, 100%);
  margin-inline: auto;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 12px 30px -18px rgba(0, 0, 0, 0.9);
}
.qr-frame img { width: 100%; height: auto; }

.qr-sim {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px;
  background:
    repeating-linear-gradient(90deg, #17150f 0 8px, transparent 8px 16px),
    repeating-linear-gradient(0deg, #17150f 0 8px, transparent 8px 16px);
  background-color: #fff;
  border-radius: 6px;
}
.qr-sim__card { background: var(--ivory); padding: 14px 16px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }

.va-number {
  font-family: 'Marcellus', serif;
  font-size: clamp(24px, 5vw, 32px);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.method-list { display: grid; gap: var(--gap-sm); }
.method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-tile);
  border: 1px solid rgba(23, 21, 15, 0.2);
  background: #fffdf6;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.method:hover { border-color: var(--sage-deep); }
.method[aria-pressed='true'] { border-color: var(--sage-deep); box-shadow: inset 0 0 0 2px var(--sage-deep); }
.method__name { font-weight: 600; }
.method__hint { font-size: 13px; color: var(--ink-soft); }

.steps-3 { display: grid; gap: var(--gap-sm); counter-reset: s; }
.steps-3 li { display: flex; gap: 12px; align-items: flex-start; list-style: none; }
.steps-3 li::before {
  counter-increment: s;
  content: counter(s);
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--ivory);
  font-size: 13px;
  font-weight: 600;
}

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(147, 164, 141, 0.35);
  border-top-color: var(--sage-deep);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Tabel admin --------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 780px; }
.data-table th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(169, 133, 75, 0.3);
  white-space: nowrap;
}
.data-table td { padding: 12px; border-bottom: 1px solid rgba(169, 133, 75, 0.14); vertical-align: top; }
.data-table tr:hover td { background: rgba(169, 133, 75, 0.05); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.stat-row { display: grid; gap: var(--gap-sm); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
  background: var(--felt);
  border: 1px solid rgba(169, 133, 75, 0.22);
  border-radius: var(--r-tile);
  padding: 14px 16px;
}
.stat__k { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.stat__v { font-family: 'Marcellus', serif; font-size: 26px; color: var(--paper); font-variant-numeric: tabular-nums; margin-top: 4px; }
.stat__v--gold { color: var(--gold); }

/* --- Dashboard: tab ------------------------------------------------------ */

/* Baris kelompok. Tingkat pertama dari dua - lihat catatan di admin.html. */
.grup-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.grup {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(245, 240, 229, 0.16);
  background: transparent;
  color: var(--paper-soft);
  cursor: pointer;
}
.grup:hover { border-color: rgba(169, 133, 75, 0.5); color: var(--gold); }
.grup--now {
  background: var(--gold);
  border-color: var(--gold);
  color: #14130f;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(169, 133, 75, 0.24);
  margin-bottom: var(--gap-md);
  padding-bottom: 2px;
}
/* Tab milik kelompok lain disembunyikan, bukan dihapus: izin per fitur sudah
   memakai .hidden untuk urusannya sendiri, dan dua mekanisme yang menulis
   kelas yang sama akan saling menimpa. */
.tab--luar { display: none; }
.tab {
  font: inherit;
  font-size: 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--paper-soft);
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--paper); }
.tab--now { color: var(--gold); border-bottom-color: var(--gold); }
/* Tab di dalam lembar ivory (dialog Walk-in: Tamu / Member). Warna di atas
   dibuat untuk latar gelap dashboard; di atas ivory tab yang aktif jadi krem di
   atas krem dan hilang sama sekali. Ditaruh SESUDAH .tab:hover supaya, pada
   kekhususan yang sama, arahan kursor tidak mengembalikannya ke krem. */
.sheet .tab { color: var(--ink-soft); }
.sheet .tab:hover { color: var(--ink); }
.sheet .tab--now, .sheet .tab--now:hover { color: var(--gold-lo); border-bottom-color: var(--gold-lo); }

/* --- Dashboard: papan lantai --------------------------------------------- */

.board-wrap { overflow-x: auto; }
.board { min-width: 640px; }
.board-row { display: flex; gap: 3px; margin-bottom: 3px; }
.board-th {
  flex: 1 1 0;
  min-width: 42px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sage);
  font-variant-numeric: tabular-nums;
  padding-bottom: 2px;
}
.board-row > .board-th:first-child,
.board-name { flex: 0 0 132px; }
.board-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 13px;
  color: var(--paper);
  padding-right: 8px;
}
.board-note { font-size: 11px; color: var(--paper-soft); }
.board-cell {
  flex: 1 1 0;
  min-width: 42px;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  padding: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: grid;
  place-items: center;
}
/* Sage berarti terkonfirmasi, emas berarti masih menunggu - sama seperti lencana
   di tabel pesanan, supaya tidak ada kosakata warna kedua yang harus dihafal. */
.board-cell--paid { background: var(--sage-deep); color: var(--ivory); }
.board-cell--pending { background: rgba(169, 133, 75, 0.55); color: var(--lacquer); font-weight: 600; }
.board-cell--block { background: var(--burgundy); color: var(--ivory); cursor: pointer; }
.board-cell--free { background: rgba(245, 240, 229, 0.07); cursor: pointer; }
.board-cell--free:hover { background: rgba(147, 164, 141, 0.28); }

.board-legend { gap: 18px; font-size: 13px; color: var(--paper-soft); }
.board-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw--paid { background: var(--sage-deep); }
.sw--pending { background: rgba(169, 133, 75, 0.55); }
.sw--block { background: var(--burgundy); }
.sw--free { background: rgba(245, 240, 229, 0.12); }

/* --- Dashboard: papan "Meja sekarang" ------------------------------------ */

.meja-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap-sm);
}
.meja-kartu {
  font: inherit;
  text-align: left;
  color: var(--paper);
  background: rgba(245, 240, 229, 0.04);
  border: 1px solid rgba(245, 240, 229, 0.12);
  /* Garis tebal di atas kartu: keadaannya terbaca dari seberang ruangan,
     sebelum satu angka pun sempat dibaca. */
  border-top: 3px solid var(--paper-soft);
  border-radius: var(--r-tile);
  padding: 14px 16px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.meja-kartu:hover { background: rgba(245, 240, 229, 0.08); }
.meja-kartu__nama { font-size: 20px; }
.meja-kartu__state {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-soft);
}
.meja-kartu__jam {
  font-family: 'Marcellus', serif;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  margin: 10px 0;
}
.meja-kartu__jam--kosong { color: var(--paper-soft); }

.meja-kartu--bermain { border-top-color: var(--sage); }
.meja-kartu--bermain .meja-kartu__state,
.meja-kartu--bermain .meja-kartu__jam { color: var(--sage); }

.meja-kartu--segera-habis { border-top-color: var(--gold); }
.meja-kartu--segera-habis .meja-kartu__state,
.meja-kartu--segera-habis .meja-kartu__jam { color: var(--gold-hi); }

.meja-kartu--overtime { border-top-color: var(--burgundy-hi); }
.meja-kartu--overtime .meja-kartu__state,
.meja-kartu--overtime .meja-kartu__jam { color: var(--burgundy-hi); }

.sw--kosong { background: rgba(245, 240, 229, 0.12); }
.sw--bermain { background: var(--sage); }
.sw--segera { background: var(--gold); }
.sw--overtime { background: var(--burgundy-hi); }

/* --- Dashboard: baris pesanan ringkas ------------------------------------ */

.row-click { cursor: pointer; }
.row-click:hover td { background: rgba(169, 133, 75, 0.08); }
.kode { font-family: 'Marcellus', serif; font-size: 15px; letter-spacing: 0.04em; }
/* Pesanan batal yang sempat sampai ke Midtrans: kemungkinan tamu sudah bayar
   dan webhook-nya nyangkut. Diberi garis burgundy supaya tidak tenggelam. */
.row-flag td:first-child { box-shadow: inset 3px 0 0 var(--burgundy); }

/* --- Dashboard: pemilih meja walk-in ------------------------------------- */

.freelist { display: grid; gap: 6px; }
.freerow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  font: inherit;
  text-align: left;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1px solid rgba(23, 21, 15, 0.18);
  background: #fffdf6;
  color: var(--ink);
  cursor: pointer;
}
.freerow:hover:not(.freerow--off) { border-color: var(--sage-deep); }
.freerow--on { border-color: var(--sage-deep); box-shadow: inset 0 0 0 2px var(--sage-deep); }
.freerow--off { opacity: 0.5; cursor: not-allowed; }
.freerow__when { color: var(--ink-soft); white-space: nowrap; }
.walkin-total { margin-top: 12px; }

/* --- Dashboard: batang jam laku ------------------------------------------ */

.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar__fill {
  background: linear-gradient(180deg, var(--gold), var(--gold-lo));
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}
.bar__k {
  text-align: center;
  font-size: 10px;
  color: var(--paper-soft);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* --- Dashboard: dialog --------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 5, 0.72);
  display: grid;
  place-items: start center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.modal__box {
  width: min(100%, 620px);
  max-height: 90vh;
  overflow-y: auto;
}

/* --- Dashboard: editor baris --------------------------------------------- */

.repeat-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 10px 0;
}
.repeat-row + .repeat-row { border-top: 1px solid rgba(23, 21, 15, 0.12); }
.repeat-cell { flex: 1 1 140px; min-width: 0; }
.repeat-cell__k {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.repeat-cell input[type='checkbox'] { width: 22px; height: 22px; accent-color: var(--sage-deep); }
.repeat-del { align-self: flex-end; margin-bottom: 13px; }

/* --- Dashboard: pemilih jam --------------------------------------------- */

.hourrow { display: flex; flex-wrap: wrap; gap: 5px; }
.hourchip {
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  padding: 7px 0;
  text-align: center;
  border-radius: 7px;
  border: 1px solid rgba(23, 21, 15, 0.2);
  background: #fffdf6;
  color: var(--ink);
  cursor: pointer;
}
.hourchip:hover:not(:disabled) { border-color: var(--sage-deep); }
.hourchip--on {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: var(--ivory);
  font-weight: 600;
}
.hourchip--off {
  background: #cfc9bb;
  color: #7a746a;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Tindakan per baris tabel, dibungkus supaya tidak melebarkan kolom. */
/* min-width, bukan cuma max-width. Tanpa batas bawah, kolom tindakan boleh
   mengempis sampai selebar satu kata - dan sembilan tautan aksi jatuh
   masing-masing ke barisnya sendiri, membuat tinggi baris tabel meledak jadi
   dua ratus piksel lebih. Dengan batas bawah, mereka membungkus rapi jadi
   dua-tiga baris. */
.actions { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 172px; max-width: 190px; }
.actions .link-btn { font-size: 13px; }

/* Lipatan "lainnya" di kolom tindakan. Tanpa ini, sembilan tautan sejajar
   membuat tiap baris tabel setinggi dua kali lipat. */
.aksi-lain { width: 100%; }
.aksi-lain > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--sage);
  list-style: none;
  padding: 2px 0;
}
.aksi-lain > summary::-webkit-details-marker { display: none; }
.aksi-lain > summary::after { content: ' ▾'; }
.aksi-lain[open] > summary::after { content: ' ▴'; }
.aksi-lain > summary:hover { color: var(--gold); }
/* display HANYA saat terbuka. Memberi display:flex tanpa syarat menimpa
   penyembunyian bawaan <details>, jadi lipatannya terlihat tertutup di
   summary-nya tapi isinya tetap tampil - persis kebalikan dari tujuannya. */
.aksi-lain__isi { display: none; }
.aksi-lain[open] .aksi-lain__isi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 0 2px;
}

/* Lipatan daftar panjang di halaman akun member. Riwayat dan pesanan
   dikirim server sampai lima puluh baris; menampilkan semuanya sekaligus
   membuat halaman sepanjang enam ribu piksel, dan saldo - satu-satunya hal
   yang benar-benar dicari orang - terdorong jauh ke atas layar. */
.lipat { margin-top: 10px; }
.lipat > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--sage-deep);
  list-style: none;
  padding: 4px 0;
}
.lipat > summary::-webkit-details-marker { display: none; }
.lipat > summary::after { content: ' ▾'; }
.lipat[open] > summary::after { content: ' ▴'; }
.lipat > summary:hover { color: var(--gold-lo); }

/* Tombol di atas bidang terang ------------------------------------------- */

/* .btn--line dan .btn--quiet dirancang untuk latar gelap: warna tulisannya
   ivory dan hampir putih. Di dalam modal - yang bidangnya .sheet, krem terang -
   keduanya jadi nyaris tak terbaca. Itulah kenapa baris tombol "Ubah pesanan"
   di dialog pesanan terlihat seperti tombol kosong.

   Diperbaiki di sini, bukan dengan mengganti kelas di tiap pemanggilan: dialog
   apa pun yang lahir nanti akan ikut benar tanpa perlu diingat. */
.sheet .btn--line {
  color: var(--ink);
  background: rgba(169, 133, 75, 0.14);
  border-color: rgba(169, 133, 75, 0.9);
}
.sheet .btn--line:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(169, 133, 75, 0.26);
  border-color: var(--gold-lo);
}
.sheet .btn--quiet {
  color: var(--ink-soft);
  background: rgba(23, 21, 15, 0.05);
  border-color: rgba(23, 21, 15, 0.28);
}
.sheet .btn--quiet:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(23, 21, 15, 0.1);
  border-color: rgba(23, 21, 15, 0.5);
}

/* --- Panduan dalam dashboard --------------------------------------------- */

/* Tombol tanya didorong ke ujung kanan baris kelompok, terpisah dari kelompok
   tab supaya tidak terbaca sebagai salah satu dari mereka. */
.grup--tanya {
  margin-left: auto;
  border-style: dashed;
}

.panduan { font-size: 15px; line-height: 1.65; }
.panduan__untuk { margin: 0 0 16px; font-size: 16px; }
.panduan__label { margin: 22px 0 8px; }

/* Bidang gambar. Diagramnya lebih lebar daripada modal di layar sempit, jadi
   ia digulir mendatar sendiri alih-alih memaksa seluruh modal ikut melebar. */
.panduan__gambar {
  overflow-x: auto;
  padding: 14px 2px;
  border-radius: var(--r-tile);
  background: rgba(169, 133, 75, 0.06);
  border: 1px solid rgba(169, 133, 75, 0.2);
}
.panduan__svg { display: block; width: 100%; min-width: 460px; height: auto; }

.panduan__langkah { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.panduan__langkah li { padding-left: 2px; }

/* Kotak peringatan. Satu per tab, sengaja hanya satu: daftar peringatan yang
   panjang dibaca sebagai hiasan, satu kalimat merah dibaca sebagai peringatan. */
.panduan__awas {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-tile);
  background: rgba(110, 34, 48, 0.09);
  border-left: 3px solid var(--burgundy);
}

.panduan__istilah { margin: 0; display: grid; gap: 10px; }
.panduan__istilah dt { font-weight: 600; }
.panduan__istilah dd { margin: 2px 0 0; color: var(--ink-soft); font-size: 14px; }

/* --- Pesan --------------------------------------------------------------- */

.notice {
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  border-left: 3px solid;
}
.notice--error { background: rgba(110, 34, 48, 0.14); border-color: var(--burgundy); color: var(--ivory); }
.notice--ok { background: rgba(147, 164, 141, 0.14); border-color: var(--sage); color: var(--ivory); }
.notice--info { background: rgba(169, 133, 75, 0.12); border-color: var(--gold); color: var(--ivory); }
.sheet .notice--error { color: var(--ink); }
.sheet .notice--ok { color: var(--ink); }
.sheet .notice--info { color: var(--ink); }

.skeleton {
  background: linear-gradient(90deg, rgba(245,240,229,.06) 25%, rgba(245,240,229,.12) 37%, rgba(245,240,229,.06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: 8px;
  height: 78px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --- Blok beranda -------------------------------------------------------- */

/* Bagian-bagian beranda sengaja tidak seragam lebarnya. Kalau semuanya kotak
   sama besar, halaman terasa dicetak dari template, bukan disusun. */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--gap-lg);
  align-items: center;
}
.hero__mark { display: grid; place-items: center; }
.hero__mark img {
  width: min(340px, 100%);
  height: auto;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.85));
}

/* Alamat adalah informasi paling dicari di situs satu lokasi, jadi ia dapat
   kartu sendiri yang lebar, bukan satu baris kecil di footer. */
.venue {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: var(--gap-lg);
  align-items: start;
}
.venue__facts { display: grid; gap: 2px; }
.fact {
  padding: 14px 0;
  border-top: 1px solid rgba(23, 21, 15, 0.14);
}
.fact:first-child { border-top: 0; padding-top: 0; }
.fact__k {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.fact__v {
  font-family: 'Marcellus', serif;
  font-size: 26px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.fact__n { font-size: 13px; color: var(--ink-soft); }

.how {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--gap-lg);
  align-items: start;
}
.how__steps { gap: var(--gap); }
.how__steps li { color: var(--paper); }

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--gap-md);
  align-items: start;
}
.pair .btn { margin-top: 6px; }

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-md) var(--gap-lg);
}
.faq h3 { font-size: 19px; margin: 0 0 6px; color: var(--paper); }
.faq p { margin: 0; }

@media (max-width: 900px) {
  .hero__grid, .venue, .how, .pair { grid-template-columns: 1fr; }
  .hero__mark { display: none; }
  .venue__facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap); }
  .fact { border-top: 0; padding: 0; }
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  border-top: 1px solid rgba(169, 133, 75, 0.22);
  padding-block: var(--gap-lg);
  font-size: 14px;
  color: var(--paper-soft);
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--gold); }
.footer__cols { display: grid; gap: var(--gap-md); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer__title { font-family: 'Marcellus', serif; color: var(--gold); font-size: 16px; margin-bottom: 10px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }

/* --- Utilitas ------------------------------------------------------------ */

.hidden { display: none !important; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flow-lg > * + * { margin-top: var(--gap-md); }

.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;
}

.skip {
  position: absolute; left: 12px; top: -60px;
  background: var(--gold); color: var(--lacquer);
  padding: 10px 16px; border-radius: 6px; z-index: 100;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

/* "Akun member" adalah tautan terpanjang di header, dan ia dilepas lebih dulu
   daripada yang lain.
   Barisan tautan ini sudah sesak di bawah kira-kira 960 piksel bahkan tanpa
   dia: brandmark ditambah nav butuh sekitar 910 piksel, sementara shell-nya
   hanya selebar layar dikurangi 40. Yang terjadi bukan penyesuaian melainkan
   pemotongan - tombol WhatsApp terdorong melewati tepi dan tidak ada yang bisa
   digulir untuk menemukannya. Keadaan itu sudah ada sebelum halaman member ada
   dan tidak diperbaiki di sini; yang dijaga baris ini cuma satu: tautan
   terpanjang di nav tidak boleh memperburuknya. Tempatnya yang lain - footer
   beranda - ada di setiap halaman. */
@media (max-width: 960px) {
  .nav a[href$='member.html'] { display: none; }
}

/* Slogan di bawah nama adalah yang pertama dikorbankan saat header menyempit. */
@media (max-width: 860px) {
  .brandmark__sub { display: none; }
}

@media (max-width: 720px) {
  :root { --gap-xl: 52px; --gap-lg: 32px; }
  .shell { width: min(100% - 28px, var(--shell)); }
  .nav a { padding: 8px 10px; font-size: 14px; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); }
  .sheet, .panel { padding: 18px; }
}

/* Di layar ponsel, header hanya muat untuk segel dan dua tautan. Nama merek
   dilepas - segelnya sudah cukup mengenali. Tautan kelas pemula dan Tentang
   juga dilepas dari header: keduanya sudah punya tempat sendiri di beranda dan
   di footer, sementara "Pesan meja" dan "Cek booking" adalah dua hal yang
   benar-benar dicari orang dari halaman mana pun. */
@media (max-width: 600px) {
  .brandmark__text { display: none; }
  .masthead__inner { gap: 8px; padding-block: 10px; }
  .nav { gap: 2px; }
  .nav a { padding: 8px 7px; font-size: 13px; }
  .nav a[href$='beginner-class.html'], .nav a[href$='about.html'] { display: none; }
  .btn--wa { padding: 8px 12px; min-height: 38px; font-size: 13px; }

  /* Judul dan lencana berdampingan sampai layar sesempit ini; setelahnya
     lencana turun ke barisnya sendiri daripada terpotong di tepi layar. */
  .between { flex-wrap: wrap; }
  .badge { white-space: normal; }
  /* Kecuali yang di dalam tabel. Tabelnya sudah bisa digulir mendatar, jadi
     lencana yang membungkus di sana tidak menyelamatkan apa pun - ia cuma
     berubah jadi pil setinggi empat baris yang meregangkan seluruh barisnya.
     Baris member sempat setinggi 261 piksel karena ini. */
  .data-table .badge { white-space: nowrap; }
}

/* Sesi terbuka yang masih berjalan. Berdenyut pelan supaya mata staf
   menangkapnya di antara puluhan baris pesanan biasa. */
.badge--jalan {
  color: #0c0b09;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: var(--gold-hi);
  font-weight: 700;
}
@keyframes km-denyut { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
.badge--jalan { animation: km-denyut 2.4s ease-in-out infinite; }

.jalan-panel {
  border: 1px solid var(--gold);
  background: rgba(169, 133, 75, 0.12);
  border-radius: var(--r-tile);
  padding: 14px 16px;
  margin-bottom: var(--gap);
}
.jalan-panel__jam { font-family: 'Marcellus', serif; font-size: 26px; color: var(--gold-hi); }

/* Contoh isian di bawah petunjuk kolom formulir. */
.field__contoh {
  display: block;
  font-size: 13px;
  margin-top: 4px;
  color: var(--sage-deep);
  font-style: italic;
}

/* --- Peta beranda ---------------------------------------------------------
   Denah kasar halaman depan, dipakai di tab Teks beranda dan Banner. Menjawab
   satu pertanyaan yang tidak terjawab oleh nama kolom mana pun: "kalau saya
   mengubah ini, bagian mana yang berubah di mata tamu?" */
.peta {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(169, 133, 75, 0.28);
  border-radius: var(--r-panel);
  background: var(--lacquer);
}
.peta__blok {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid rgba(169, 133, 75, 0.3);
  border-radius: 6px;
  background: rgba(245, 240, 229, 0.04);
  color: var(--paper-soft);
  font-size: 11px;
  line-height: 1.25;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.peta__blok--nyala {
  background: rgba(169, 133, 75, 0.4);
  border-color: var(--gold-hi);
  color: var(--ivory);
  font-weight: 600;
}
.peta__blok--mati { opacity: 0.4; }

.peta-bungkus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--gap-md);
  align-items: start;
}
@media (max-width: 900px) { .peta-bungkus { grid-template-columns: 1fr; } }

/* Batang pemilih venue di dashboard. Hanya tampil kalau tempatnya lebih dari
   satu - dengan satu venue, memilih di antara satu pilihan cuma menambah
   pekerjaan mata tanpa memberi informasi. */
.venue-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  margin-bottom: var(--gap);
  padding: var(--gap-sm) 0;
  border-bottom: 1px solid rgba(169, 133, 75, 0.22);
  /* Menempel di atas layar saat digulir.
     Tab Harga, Meja, dan Biaya tambahan semuanya lebih panjang dari satu layar,
     dan begitu batang ini tergulir hilang, tidak ada satu pun kata di layar
     yang menyebut cabang mana yang sedang disunting. Mengubah tarif cabang
     yang salah tinggal satu gulir jauhnya, dan salahnya baru ketahuan saat
     tamu protes. Membuatnya menempel lebih murah daripada menambah langkah
     "pilih venue dulu" yang harus dilewati tiap kali. */
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ink, #14130f);
}
.venue-bar__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 600;
}

/* Tombol saringan kecil - dipakai memilih jenis meja di halaman pemesanan. */
.chip {
  font: 600 14px/1 'Instrument Sans', sans-serif;
  color: var(--paper-soft);
  background: rgba(245, 240, 229, 0.06);
  border: 1px solid rgba(245, 240, 229, 0.28);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { color: var(--paper); border-color: rgba(245, 240, 229, 0.5); }
.chip--on {
  color: var(--lacquer);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: var(--gold-hi);
}

/* Meja yang jam bukanya lebih sempit dari jam tempat. Sengaja dibedakan dari
   .slot--booked: yang ini tidak akan pernah terbuka hari itu, sementara yang
   sudah dipesan orang masih mungkin batal. */
.slot--closed {
  background: repeating-linear-gradient(135deg, rgba(23, 21, 15, 0.05) 0 6px, transparent 6px 12px);
  border-style: dashed;
  opacity: 0.5;
  cursor: not-allowed;
}
.slot--closed .slot__meta { color: var(--ink-soft); }

/* --- Banner beranda -------------------------------------------------------
   Satu slot lebar yang isinya diatur dari dashboard, jadi foto apa pun yang
   dipasang pemilik masuk lewat bingkai yang sama: garis emas tipis, alas felt,
   sudut yang sama dengan panel lain. Tanpa bingkai ini, satu foto ponsel bisa
   memutus seluruh irama halaman. */
.promo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(169, 133, 75, 0.35);
  border-radius: var(--r-panel);
  background: var(--felt);
}
/* Banner yang hanya berisi gambar, dan banner yang gambarnya gagal dimuat. */
.promo--polos, .promo--tanpa-gambar { grid-template-columns: 1fr; }

.promo__media { margin: 0; min-height: 200px; background: var(--olive); }
.promo__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.promo__body {
  padding: clamp(22px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.promo__title {
  font-family: 'Marcellus', serif;
  color: var(--gold);
  font-size: clamp(22px, 3vw, 30px);
  margin: 0;
  line-height: 1.15;
}
.promo__sub { color: var(--paper-soft); margin: 0; max-width: 46ch; }
.promo__cta { align-self: flex-start; margin-top: 6px; }

/* Hanya tampil di pratinjau dashboard: gambarnya belum ada di server. */
.promo__gagal {
  padding: 20px;
  font-size: 13px;
  color: var(--paper-soft);
  background: repeating-linear-gradient(45deg, rgba(169, 133, 75, 0.06) 0 10px, transparent 10px 20px);
}

@media (max-width: 760px) {
  .promo { grid-template-columns: 1fr; }
  .promo__media { min-height: 170px; max-height: 240px; }
}

/* Kotak centang tetap sebaris dengan labelnya; .field biasa menumpuk ke bawah. */
.field--check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--gap-sm);
  cursor: pointer;
}
.field--check input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--gold);
}
.field--check .field__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.field--check .field__hint { margin-top: 2px; display: block; }
.field--check input:disabled { opacity: 0.5; }
.field--check:has(input:disabled) { cursor: not-allowed; opacity: 0.65; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}