/* washere — sistem desain "Belau & Jemuran". Warna hanya dari token di tokens.css. */
:root {
  --top-h: 64px;
  --tab-h: 0px;
  --m-ring: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><circle cx='11' cy='11' r='10' fill='none' stroke='black' stroke-width='1.5'/></svg>");
  --m-on: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><defs><mask id='k'><rect width='22' height='22' fill='white'/><path d='M6.6 11.3l3 3 5.9-6.1' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></mask></defs><circle cx='11' cy='11' r='11' mask='url(%23k)'/></svg>");
  --m-box: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><rect x='1.75' y='1.75' width='18.5' height='18.5' rx='3' fill='none' stroke='black' stroke-width='1.5'/></svg>");
  --m-box-on: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><defs><mask id='k'><rect width='22' height='22' fill='white'/><path d='M6.6 11.3l3 3 5.9-6.1' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/></mask></defs><rect x='1' y='1' width='20' height='20' rx='3.5' mask='url(%23k)'/></svg>");
  --m-alert: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 4.3 2.9 17.2A2 2 0 0 0 4.6 20.2h14.8a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/><path d='M12 9.5v4M12 16.75v.01'/></svg>");
  --m-ok: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.75'/><path d='m8.4 12.2 2.5 2.5 4.7-4.9'/></svg>");
  --m-info: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.75'/><path d='M12 11v5.25M12 7.75v.01'/></svg>");
  --m-chev: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9.5 6 6 6-6'/></svg>");
}

/* ── Dasar ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--tab-h);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--primary-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; }
h1, h2 { font-size: clamp(26px, 1.1vw + 21.7px, 34px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
h2 { font-weight: 680; letter-spacing: -.015em; }
h3 { font-size: clamp(19px, .28vw + 17.9px, 21px); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
h4 { font-size: 16px; font-weight: 650; }
.display { font-size: clamp(36px, 3.4vw + 23px, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; }
.over { display: block; font-size: 11.5px; font-weight: 650; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mute { color: var(--muted); }
.small { font-size: 14px; line-height: 1.45; }
.num { font-variant-numeric: tabular-nums; }
.code { font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r { text-align: right; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: -.24em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic.lg { width: 24px; height: 24px; }
.ic.xl { width: 40px; height: 40px; stroke-width: 1.4; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--primary-tint); color: var(--ink); }

/* ── Tata letak ────────────────────────────────────────── */
.wrap { padding-inline: 16px; }
main > .sec:last-child { padding-bottom: 0; }
main { flex: 1 0 auto; width: 100%; max-width: 1184px; margin: 0 auto; padding-block: 28px 64px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.row > * { flex: 1 1 260px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.sec { padding-block: var(--s7); border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 8px; align-content: start; margin-bottom: 28px; max-width: 620px; }
.sec-head p { color: var(--muted); }
.page-head { display: grid; gap: 8px; margin-bottom: 28px; max-width: 640px; }
.page-head p { color: var(--muted); margin: 0; }
@media (min-width: 900px) {
  .wrap { padding-inline: 32px; }
  main { padding-block: 40px 88px; }
  .sec { padding-block: var(--s8); }
}

/* ── Kepala & navigasi ─────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1184px; height: var(--top-h); margin: 0 auto; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 23px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.logo:hover { color: var(--ink); }
.top .logo, .foot .logo { min-height: 44px; }
.logo-mark { position: relative; width: 22px; height: 22px; flex: none; }
.logo-mark::before { content: ''; position: absolute; left: 3px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.logo-mark::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 1px; background: var(--primary); }
.logo.sm { font-size: 19px; }
.nav-main { display: flex; gap: 2px; margin-right: auto; }
.nav-main a, .nav-demo a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 550; }
.nav-main a:hover, .nav-demo a:hover { background: var(--surface-alt); color: var(--ink); }
.nav-main a[aria-current] { color: var(--primary); font-weight: 650; }
.nav-main a[aria-current]::after, .nav-demo a[aria-current]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: currentColor; }
.nav-demo { display: flex; align-items: center; gap: 2px; padding-left: 18px; border-left: 1px solid var(--line); }
.nav-demo .chip { margin-right: 6px; color: var(--muted); }
.nav-demo a { color: var(--muted); }
.nav-demo a[aria-current] { color: var(--ink); font-weight: 650; }

.tabbar { display: none; }
@media (max-width: 759px) {
  :root { --top-h: 56px; --tab-h: calc(64px + env(safe-area-inset-bottom)); }
  .top { position: static; }
  .top-in { gap: 12px; justify-content: space-between; }
  .nav-main { display: none; }
  .nav-demo { gap: 0; padding-left: 0; border: 0; margin-right: -8px; }
  .nav-demo a { min-width: 48px; justify-content: center; padding: 0 10px; font-size: 14px; }
  .nav-demo a[aria-current]::after { left: 10px; right: 10px; }
  .logo { font-size: 21px; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 64px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
  .tabbar a .ic { width: 24px; height: 24px; transition: transform .2s var(--e-out); }
  .tabbar a:active .ic { transform: scale(.9); transition-duration: .09s; }
  .tabbar a[aria-current] { color: var(--primary); }
  .tabbar a[aria-current]::before { content: ''; position: absolute; top: -1px; left: 50%; width: 32px; margin-left: -16px; height: 2px; border-radius: 0 0 2px 2px; background: var(--primary); }
  /* menu bawah mengikuti konteks: pelanggan vs halaman demo admin/owner */
  .tabbar .tb-d, body[data-page=admin] .tabbar .tb-c, body[data-page=owner] .tabbar .tb-c { display: none; }
  body[data-page=admin] .tabbar .tb-d, body[data-page=owner] .tabbar .tb-d { display: flex; }
  /* di halaman order, bar total menjadi satu-satunya bar bawah */
  body[data-page=order] { --tab-h: 0px; }
  body[data-page=order] .tabbar { display: none; }
}

/* ── Kaki: pita kawung ─────────────────────────────────── */
.foot { margin-top: auto; }
.foot-band, .foot-in { max-width: 1184px; margin: 0 auto; width: 100%; }
.foot-band > div { height: 36px; background-color: var(--surface); background-image: var(--kawung); background-position: center; border-block: 1px solid var(--line); border-radius: var(--r-xs); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px 32px; padding-block: 24px 32px; }
.foot-brand { display: grid; gap: 6px; max-width: 560px; }
.foot-brand .logo { justify-self: start; }
.foot-brand p { margin: 0; }
.foot-brand p a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.foot-act { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-act .link { min-height: 44px; font-size: 14px; }

/* ── Tombol ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1.5px solid var(--primary); border-radius: var(--r-sm);
  background: var(--primary); color: var(--on-primary);
  font-size: 16px; font-weight: 650; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  box-shadow: var(--shadow-card);
  transition: transform .2s var(--e-out), background-color .2s var(--e-out), border-color .2s var(--e-out), color .2s var(--e-out), box-shadow .2s var(--e-out);
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--on-primary); box-shadow: var(--shadow-lift); }
.btn:active { transform: scale(.98); transition-duration: .09s; }
.btn.ghost { background: var(--primary-tint); color: var(--primary); border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: color-mix(in srgb, var(--primary-tint) 82%, var(--primary)); border-color: transparent; color: var(--primary-dark); box-shadow: none; }
.btn.danger { background: transparent; color: var(--err); border-color: color-mix(in srgb, var(--err) 55%, transparent); box-shadow: none; }
.btn.danger:hover { background: var(--err-bg); color: var(--err); }
.btn.sm { min-height: 44px; padding: 0 14px; font-size: 14px; gap: 6px; }
.btn.lg { min-height: 52px; padding: 0 24px; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.link {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none;
  color: var(--primary); font-weight: 600; text-decoration: none; cursor: pointer; text-align: left;
}
.link:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: .2em; }
.link:active { opacity: .7; }
.link.arm { color: var(--err); }
.ib { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; transition: transform .2s var(--e-out), background-color .2s var(--e-out); }
.ib:hover { background: var(--surface-alt); color: var(--ink); }
.ib:active { transform: scale(.92); transition-duration: .09s; }

/* ── Isian ─────────────────────────────────────────────── */
label.f { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
label.f > .mute, label.f .opsi { font-weight: 400; }
input, select, textarea {
  min-height: 48px; max-width: 100%; min-width: 0; padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, var(--surface)); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  font-size: 16px; font-weight: 400; line-height: 1.3;
  transition: border-color .2s var(--e-out);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--err); }
input[aria-invalid=true]:focus { outline-color: var(--err); }
textarea { min-height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
label.f:has(> select)::after { content: ''; position: absolute; right: 14px; bottom: 15px; width: 18px; height: 18px; background: var(--muted); -webkit-mask: var(--m-chev) center / contain no-repeat; mask: var(--m-chev) center / contain no-repeat; pointer-events: none; }
input[type=number] { font-variant-numeric: tabular-nums; }
input[type=file] { padding: 11px 12px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
.ferr { display: flex; align-items: flex-start; gap: 6px; color: var(--err); font-size: 14px; font-weight: 550; line-height: 1.4; }
.ferr::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor; -webkit-mask: var(--m-alert) center / contain no-repeat; mask: var(--m-alert) center / contain no-repeat; }
.ferr[hidden] { display: none; }

/* .opt — baris pilihan; glyph centang muncul dengan pop */
.opt {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  border-radius: var(--r-md); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s var(--e-out), background-color .2s var(--e-out), box-shadow .2s var(--e-out);
}
.opt:hover { border-color: color-mix(in srgb, var(--line-strong) 45%, var(--surface)); box-shadow: var(--shadow-lift); }
.opt > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.opt > span:first-of-type { flex: 1; min-width: 0; }
.opt::after {
  content: ''; order: 9; flex: none; width: 22px; height: 22px;
  background: color-mix(in srgb, var(--line-strong) 65%, transparent);
  -webkit-mask: var(--m-ring) center / contain no-repeat; mask: var(--m-ring) center / contain no-repeat;
}
.opt:has(> input[type=checkbox])::after { -webkit-mask-image: var(--m-box); mask-image: var(--m-box); }
.opt:has(> input:checked) { border-color: var(--primary); background: var(--primary-tint); box-shadow: inset 0 0 0 .5px var(--primary); }
.opt:has(> input:checked)::after { background: var(--primary); -webkit-mask-image: var(--m-on); mask-image: var(--m-on); animation: centang .2s var(--e-out) both; }
.opt:has(> input[type=checkbox]:checked)::after { -webkit-mask-image: var(--m-box-on); mask-image: var(--m-box-on); }
.opt:has(> input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.opt:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
@keyframes centang { from { transform: scale(.6); opacity: 0; } }

/* ── Label perawatan (chip) ────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; flex: none;
  border: 1px solid transparent; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink);
  font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chip .ic { width: 14px; height: 14px; stroke-width: 2; }
.chip.solid { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.chip.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.chip.err { color: var(--err); background: var(--err-bg); border-color: transparent; }
.chip.info { color: var(--info); background: var(--info-bg); border-color: transparent; }
.chip.mute { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Tab, daftar, KPI ──────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 1 0 auto; min-height: 48px; margin-bottom: -1px; padding: 0 14px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted);
  font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .15s ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on, .tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--primary); }
.list { list-style: none; margin: 0; padding: 0; }
.list li > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  color: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease;
}
.list li > button:hover { background: color-mix(in srgb, var(--primary-tint) 70%, transparent); }
.list li > button:active { background: var(--primary-tint); }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi > * { min-width: 0; }
.kpi b { display: block; margin-top: 6px; font-size: clamp(28px, 1.1vw + 22px, 36px); font-weight: 750; line-height: 1.05; letter-spacing: -.012em; }

/* ── Permukaan ─────────────────────────────────────────── */
.card { min-width: 0; padding: 20px; background: var(--surface); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.mist { background: var(--surface-alt); border-color: transparent; }
.stitch { display: block; height: 1.5px; margin: 0; border: 0; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 0 11px); }
.dash { display: block; height: 0; margin: 14px 0; border: 0; border-top: 1px dashed var(--line-strong); }

/* Nota: tepi atas berlubang seperti kertas sobekan */
.nota {
  position: relative; min-width: 0; padding: 26px 20px 20px;
  background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm);
  -webkit-mask: radial-gradient(circle at 7px 0, #0000 4px, #000 4.5px) 0 0 / 14px 100% repeat-x;
  mask: radial-gradient(circle at 7px 0, #0000 4px, #000 4.5px) 0 0 / 14px 100% repeat-x;
}
.nota::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); opacity: .7; }
.nota-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: -26px -20px 16px; padding: 20px 20px 12px;
  background-image: var(--kawung); background-position: 0 0;
  border-bottom: 1px dashed var(--line-strong);
}
.nota-head .code { font-size: 13px; letter-spacing: .1em; }
.nota hr { height: 0; margin: 14px 0; border: 0; border-top: 1px dashed var(--line-strong); }
.nl { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 5px; font-variant-numeric: tabular-nums; }
.nl > span:first-child { min-width: 0; }
.nl small { display: block; color: var(--muted); font-size: 14px; }
.nl > :last-child { white-space: nowrap; font-weight: 600; }
.nl > .wv { white-space: normal; text-align: right; overflow-wrap: anywhere; }
.nota .total { margin-top: 10px; border-top: 1px dashed var(--line-strong); }
.fine { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ── Umpan balik ───────────────────────────────────────── */
.note {
  --tone: var(--info); position: relative; padding: 14px 16px 14px 46px;
  border-radius: var(--r-md); background: var(--surface-alt); color: var(--ink); font-size: 15px; line-height: 1.5;
}
.note::before { content: ''; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; background: var(--tone); -webkit-mask: var(--m-info) center / contain no-repeat; mask: var(--m-info) center / contain no-repeat; }
.note > b:first-child, .note > strong:first-child { color: var(--tone); }
.note.info { --tone: var(--info); background: var(--info-bg); }
.note.ok { --tone: var(--ok); background: var(--ok-bg); }
.note.ok::before { -webkit-mask-image: var(--m-ok); mask-image: var(--m-ok); }
.note.warn { --tone: var(--warn); background: var(--warn-bg); }
.note.err { --tone: var(--err); background: var(--err-bg); }
.note.warn::before, .note.err::before { -webkit-mask-image: var(--m-alert); mask-image: var(--m-alert); }
.note[hidden] { display: none; }
.note .acts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + 16px); z-index: 60;
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(460px, calc(100% - 32px));
  padding: 12px 16px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-overlay);
  font-size: 15px; font-weight: 500; line-height: 1.4;
  opacity: 0; pointer-events: none; transform: translate(-50%, 16px);
  transition: opacity .16s ease, transform 0s linear .16s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); transition: opacity .22s var(--e-out), transform .22s var(--e-out); }
#toast.on.has-act, #toast.has-act.on { pointer-events: auto; }
#toast > span { min-width: 0; }
.toast-undo {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: -8px -8px -8px 0; padding: 0 12px; flex: none;
  border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: var(--r-xs); background: none;
  color: var(--bg); font-weight: 650; cursor: pointer;
}
.toast-undo:hover { background: color-mix(in srgb, var(--bg) 12%, transparent); }
.toast-undo:focus-visible { outline-color: var(--bg); }
@media (max-width: 959px) { body:has(.obar.on) #toast { bottom: calc(var(--tab-h) + 84px + env(safe-area-inset-bottom)); } }

/* ── Tabel & status ────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-strong); vertical-align: bottom; }
tbody th { font-weight: 600; }
th.r, td.r { text-align: right; }
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st0, .st1, .st2, .st3, .st4, .st5, .stx { font-weight: 600; }
.st0 { color: var(--warn); }
.st1, .st2, .st3 { color: var(--primary); }
.st4 { color: var(--ok); }
.st5 { color: var(--muted); }
.stx { color: var(--err); }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ink); }
.total > span { font-weight: 600; }
.total b { font-size: clamp(28px, 1.1vw + 22px, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.012em; white-space: nowrap; }
.price { font-size: 20px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.price small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* ── Linimasa "jahitan" ────────────────────────────────── */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; min-height: 56px; padding-bottom: 18px; }
.tl li:last-child { min-height: 0; padding-bottom: 0; }
.tl li::before { content: ''; position: absolute; left: 15.25px; top: 36px; bottom: 4px; width: 1.5px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 0 9px); }
.tl li:last-child::before, .tl li:last-child::after { display: none; }
.tl li.done::after { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--primary); transform-origin: top; animation: jahit .36s var(--e-io) calc(var(--i, 0) * 90ms) both; }
.tl-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--muted); }
.tl-dot .ic { width: 18px; height: 18px; stroke-width: 1.9; }
.tl-t { padding-top: 5px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.tl-t small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
.tl time { padding-top: 6px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.tl li.done .tl-dot { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tl li.done .tl-t { color: var(--ink); }
.tl li.now .tl-dot { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.tl li.now .tl-t { color: var(--ink); font-weight: 650; }
.tl li.now time { color: var(--ink); }
.tl li.now .tl-dot::after { content: ''; position: absolute; inset: -1.5px; border: 1.5px solid var(--primary); border-radius: 50%; opacity: 0; animation: riak 1.6s var(--e-out) calc(var(--i, 0) * 90ms + 360ms) 3; }
.tl li.bad .tl-dot { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.tl li.bad .tl-t { color: var(--err); font-weight: 650; }
.drum-on .drum-arc { transform-box: view-box; transform-origin: 12px 13.5px; animation: putar 2.4s linear infinite; }
@keyframes jahit { from { transform: scaleY(0); } }
@keyframes riak { from { transform: scale(1); opacity: .4; } to { transform: scale(2); opacity: 0; } }
@keyframes putar { to { transform: rotate(360deg); } }

/* ── Foto & pelat nomor mesin ──────────────────────────── */
.foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--surface-alt); filter: saturate(.9) contrast(1.02); }
.foto.sm { aspect-ratio: 16 / 10; }
:root[data-theme="dark"] .foto { filter: saturate(.85) contrast(1.02) brightness(.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .foto { filter: saturate(.85) contrast(1.02) brightness(.88); } }
.ph { display: flex; align-items: flex-end; min-height: 320px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-alt); color: var(--muted); font-size: 14px; }
.plate {
  position: relative; display: inline-flex; flex-direction: column; gap: 3px; padding: 7px 14px 8px;
  border: 1.5px solid var(--ink); border-radius: var(--r-xs); background: var(--surface); color: var(--ink); line-height: 1;
}
.plate::before, .plate::after { content: ''; position: absolute; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--line-strong); }
.plate::before { left: 4px; }
.plate::after { right: 4px; }
.plate b { font-size: 17px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.plate span { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pic { position: relative; margin: 0; }
.pic .plate { position: absolute; left: 12px; bottom: 12px; }

/* ── Beranda ───────────────────────────────────────────── */
.demo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 28px; padding: 8px 10px 8px 16px;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-card); font-size: 14px;
}
.demo-t { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.demo ol { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.demo a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 6px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 550; }
.demo a:hover { background: var(--surface-alt); color: var(--ink); }
.demo a b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo a .ic { width: 16px; height: 16px; color: var(--muted); }
/* ponsel: hero dulu, kotak demo turun ke bawah hero dalam grid 2×2 */
@media (max-width: 759px) {
  #app:has(> .hero) { display: flex; flex-direction: column; }
  #app:has(> .hero) > .demo { order: 1; margin-bottom: var(--s7); }
  #app:has(> .hero) > .sec { order: 2; }
  .demo { display: grid; gap: 4px; padding: 14px 8px 8px; }
  .demo-t { padding-left: 8px; }
  .demo ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px; }
  .demo a { padding-left: 8px; }
}

.hero { display: grid; gap: 32px; align-items: center; padding-bottom: var(--s7); }
.hero-txt { display: grid; gap: 18px; justify-items: start; }
.hero .display .hl { color: var(--primary); }
.lead { max-width: 36ch; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.5; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; width: 100%; }
@media (max-width: 599px) { .cta .btn { flex: 1 1 auto; padding-inline: 16px; } }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 8px 0 0; width: 100%; max-width: 520px; border-top: 1px solid var(--line); }
.facts div { padding: 12px 12px 0 0; }
.facts dt { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
/* jemuran: foto digantung di tali dengan dua jepit kayu */
.jemur { position: relative; margin: 0; padding-top: 18px; }
.jemur::before { content: ''; position: absolute; top: 9px; left: -16px; right: -16px; height: 1.5px; background: var(--line-strong); border-radius: 1px; }
.jepit { position: absolute; top: 0; z-index: 2; width: 9px; height: 30px; border: 1.5px solid var(--ink); border-radius: 2px 2px 3px 3px; background: var(--accent); }
.jepit::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 9px; width: 1.5px; margin-left: -.75px; background: var(--ink); opacity: .55; }
.jepit:first-of-type { left: 14%; transform: rotate(-4deg); }
.jepit:last-of-type { right: 14%; transform: rotate(3deg); }
.jemur .plate { position: absolute; right: 14px; bottom: 14px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; padding: 16px 0 72px; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jemur::before { left: -24px; right: -32px; }
}

/* daftar harga bergaya nota/label perawatan */
.harga { display: grid; gap: 4px; }
.harga .nota { padding-bottom: 8px; }
.h-list { list-style: none; margin: 0 -8px; padding: 0; }
.h-list li + li { border-top: 1px dashed color-mix(in srgb, var(--line-strong) 60%, transparent); }
.h-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 8px; border-radius: var(--r-xs); color: var(--ink); text-decoration: none;
  transition: background-color .15s ease;
}
.h-row:hover { background: var(--primary-tint); color: var(--ink); }
.h-row:active { background: color-mix(in srgb, var(--primary-tint) 60%, var(--primary) 8%); }
.h-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface-alt); color: var(--primary); }
.h-ic .ic { width: 24px; height: 24px; }
.h-nama { display: grid; gap: 3px; min-width: 0; font-weight: 600; }
.h-nama small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.h-nama small .ic { width: 16px; height: 16px; stroke-width: 2; }
.h-row .price { text-align: right; }
.h-row > .ic { color: var(--muted); transition: transform .2s var(--e-out); }
.h-row:hover > .ic { color: var(--primary); transform: translateX(3px); }
@media (max-width: 559px) {
  .h-row { grid-template-columns: 36px minmax(0, 1fr) auto 16px; gap: 10px; }
  .h-ic { width: 36px; height: 36px; }
  .h-ic .ic { width: 22px; height: 22px; }
  .h-row .price { display: grid; justify-items: end; font-size: 18px; }
  .h-row .price small { font-size: 12px; }
  .h-row > .ic { width: 16px; height: 16px; }
}
@media (min-width: 900px) {
  .harga { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
  .harga .sec-head { position: sticky; top: calc(var(--top-h) + 32px); }
}

/* cara order */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: ''; position: absolute; left: 23.25px; top: 52px; bottom: 4px; width: 1.5px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 0 9px); }
.steps li:last-child::before { display: none; }
.s-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
.s-ic .ic { width: 26px; height: 26px; stroke-width: 1.6; }
.s-no { display: block; margin: 2px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.steps h3 { font-size: 18px; margin-bottom: 4px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .steps li { grid-template-columns: 1fr; row-gap: 14px; padding: 0; }
  .steps li::before { left: 60px; right: -16px; top: 23.25px; bottom: auto; width: auto; height: 1.5px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 0 11px); }
}

/* cabang */
.c-grid { display: grid; gap: 40px; }
.cabang { position: relative; display: grid; gap: 14px; align-content: start; }
.cabang .pic { isolation: isolate; }
.cabang.kawung .pic::before { content: ''; position: absolute; z-index: -1; top: -10px; right: -10px; width: 96px; height: 96px; background-image: var(--kawung); border-radius: var(--r-xs); }
.c-t { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.cabang p { margin: 0; color: var(--muted); font-size: 15px; }
.cabang p b { color: var(--ink); font-weight: 550; }
.c-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 4px; }
.c-act .link { min-height: 44px; }
@media (min-width: 760px) { .c-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
/* ponsel: cabang jadi baris geser; kartu 85% supaya kartu berikutnya mengintip */
@media (max-width: 639px) {
  .c-grid {
    grid-auto-flow: column; grid-auto-columns: 85%; gap: 16px;
    margin-inline: -16px; padding: 12px 16px 8px; scroll-padding-inline: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .c-grid::-webkit-scrollbar { display: none; }
  .cabang { gap: 10px; scroll-snap-align: start; }
  .cabang .foto.sm { aspect-ratio: 2 / 1; }
  .cabang .plate { padding: 5px 10px 6px; }
  .cabang .plate b { font-size: 14px; }
  .cabang h3 { font-size: 18px; }
  .cabang p { font-size: 14px; }
  .c-act { gap: 4px 16px; margin-top: 0; }
  .c-act .btn { min-height: 44px; padding-inline: 16px; font-size: 15px; }
  .sec-head:has(#h-cab) { margin-bottom: 16px; }
}

/* tanya jawab */
.faq-wrap { display: grid; gap: 8px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }
.tanda { position: relative; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--line-strong); border-radius: 50%; transition: transform .24s var(--e-out), border-color .15s ease; }
.tanda::before, .tanda::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; margin: -.875px 0 0 -6px; border-radius: 1px; background: currentColor; transition: transform .24s var(--e-out); }
.tanda::after { transform: rotate(90deg); }
.faq details[open] .tanda { transform: rotate(180deg); border-color: var(--primary); color: var(--primary); }
.faq details[open] .tanda::after { transform: rotate(0deg); }
.faq details p { max-width: 64ch; margin: 0; padding: 0 44px 20px 0; color: var(--muted); }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }

/* ── Order ─────────────────────────────────────────────── */
.order { display: grid; gap: 32px; align-items: start; }
.o-main { display: grid; gap: 28px; min-width: 0; }
.o-sec { display: grid; gap: 14px; }
.o-sec > legend { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 18px; font-weight: 680; letter-spacing: -.01em; }
.o-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.o-sec > legend .mute { font-weight: 400; font-size: 15px; }
.tiles { display: grid; gap: 10px; }
.tile { align-items: center; }
.tile .t-in { display: grid; gap: 2px; }
@media (max-width: 639px) {
  .tile:not(.svc) { min-height: 64px; padding-block: 10px; }
  .tile:not(.svc) .t-in { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; }
  .tile:not(.svc) .t-in .small { grid-column: 1 / -1; }
}
.tile .t-name { font-weight: 650; }
.plat { font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--muted); }
.opt:has(> input:checked) .plat { color: var(--primary); }
.svc .t-in { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
.svc .t-ic { display: block; line-height: 0; color: var(--primary); }
.svc .t-tx { display: grid; gap: 2px; min-width: 0; }
.rawat { display: flex; gap: 6px; margin-top: 4px; color: var(--muted); }
.rawat .ic { width: 16px; height: 16px; stroke-width: 2; }
.svc .price { font-size: 17px; }
@media (min-width: 640px) {
  .tiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles.c3 .tile { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .tiles.c3 .tile::after { position: absolute; top: 12px; right: 12px; }
  .tiles.c3 .tile > span:first-of-type { width: 100%; }
  .tiles.c3 .svc .t-in { grid-template-columns: 1fr; row-gap: 10px; }
}
/* pengiriman: dua pilihan per baris, glyph centang di pojok */
.o-sub { display: grid; gap: 8px; }
.tiles.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kirim { flex-direction: column; align-items: stretch; gap: 0; padding: 12px; }
.kirim::after { position: absolute; top: 12px; right: 12px; }
.kirim .t-in { display: grid; gap: 4px; padding-right: 26px; }
.kirim .t-ic { display: block; margin-bottom: 4px; line-height: 0; color: var(--muted); }
.kirim .t-name { font-weight: 650; line-height: 1.3; }
.kirim .t-fee { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.kirim:has(> input:checked) .t-ic, .kirim:has(> input:checked) .t-fee { color: var(--primary); }
.kirim:active { transform: scale(.99); transition: transform .09s ease-out; }
.o-alamat[hidden] { display: none; }
.o-alamat { animation: naik .22s var(--e-out) both; }
.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.steppers > :first-child { grid-column: 1 / -1; }
/* ponsel: item satuan jadi baris penuh — label & harga kiri, stepper ringkas kanan */
@media (max-width: 639px) {
  .steppers { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steppers > :first-child { padding-bottom: 8px; }
  .st-f.sat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l s" "h s"; align-items: center; column-gap: 12px; row-gap: 0; padding-block: 14px; border-bottom: 1px solid var(--line); }
  .st-f.sat .st-l { grid-area: l; align-self: end; font-size: 16px; }
  .st-f.sat .st-h { grid-area: h; align-self: start; }
  .st-f.sat .stepper { grid-area: s; grid-template-columns: 44px 60px 44px; height: 48px; }
  .st-f.sat .st-v { flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; }
  .st-f.sat .st-v input { height: auto; text-align: center; font-size: 18px; line-height: 1.1; }
  .st-f.sat .st-v span { font-size: 11px; line-height: 1; }
  .st-f.sat .ferr { grid-column: 1 / -1; }
}
@media (min-width: 640px) { .steppers { grid-template-columns: 1.2fr 1fr 1fr; } .steppers > :first-child { grid-column: auto; } }
.st-f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.st-l { font-size: 14px; font-weight: 600; }
.stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: stretch; height: 52px; border: 1px solid color-mix(in srgb, var(--line-strong) 70%, var(--surface)); border-radius: var(--r-sm); background: var(--surface); }
.stepper:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.stepper:has(input[aria-invalid=true]) { border-color: var(--err); }
.st-b { display: grid; place-items: center; border: 0; background: none; color: var(--primary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--e-out), background-color .2s var(--e-out); }
.st-b:first-child { border-right: 1px solid var(--line); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.st-b:last-child { border-left: 1px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.st-b:hover { background: var(--primary-tint); }
.st-b:active { transform: scale(.92); transition-duration: .09s; }
.st-b:disabled { color: var(--line-strong); cursor: not-allowed; background: none; transform: none; }
.st-b .ic { width: 20px; height: 20px; stroke-width: 2; }
.st-v { display: flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 0; padding: 0 4px; cursor: text; }
.st-v input { width: 4ch; field-sizing: content; min-width: 1.4ch; max-width: 6ch; min-height: 0; height: 50px; padding: 0; border: 0; background: none; text-align: right; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-v input:focus { outline: 0; }
.st-v span { flex: none; color: var(--muted); font-size: 14px; }
.st-h { font-size: 13px; color: var(--muted); line-height: 1.4; }
.st-h.warn { color: var(--warn); font-weight: 550; }
.st-f:has(> .ferr:not([hidden])) .st-h { display: none; }
.tog { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 48px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tog > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tog .chip { height: 40px; padding: 0 14px 0 12px; font-size: 12px; color: var(--ink); background: var(--surface); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); transition: background-color .2s var(--e-out), color .2s var(--e-out), transform .2s var(--e-out); }
.tog .chip .ic { width: 16px; height: 16px; }
.tog:active .chip { transform: scale(.98); transition-duration: .09s; }
.tog:has(> input:checked) .chip { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tog:has(> input:checked) .chip .ic { animation: centang .2s var(--e-out) both; }
.tog:has(> input:focus-visible) .chip { outline: 2px solid var(--primary); outline-offset: 2px; }
.tog .small { color: var(--muted); }
.grid2 { display: grid; gap: 14px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.rek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 16px; border-radius: var(--r-md); background: var(--surface-alt); }
.rek > .ic { width: 28px; height: 28px; color: var(--primary); stroke-width: 1.6; }
.rek-t { display: grid; gap: 2px; min-width: 0; }
.rek-no { font-size: 22px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.drop { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); transition: border-color .2s var(--e-out), background-color .2s var(--e-out); }
.drop:hover, .drop.over { border-color: var(--primary); background: var(--primary-tint); }
.drop.bad { border-color: var(--err); }
.drop:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.drop-in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 14px; min-height: 84px; padding: 16px; cursor: pointer; }
.drop-in > .ic { width: 28px; height: 28px; margin-top: 2px; color: var(--primary); stroke-width: 1.6; }
.drop-in b { display: block; font-weight: 650; }
.drop-in .small { color: var(--muted); }
.drop-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; }
.drop-file > .ic { width: 28px; height: 28px; color: var(--ok); stroke-width: 1.6; }
.drop-file b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.drop:has(.drop-file:not([hidden])) { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-bg); box-shadow: none; }
.drop:has(.drop-file:not([hidden])) .drop-in { display: none; }
.drop-file[hidden] { display: none; }
.o-side { min-width: 0; }
.o-side .nota { display: grid; gap: 4px; }
.o-rinc { min-height: 64px; }
.o-rinc .kosong-k { padding: 10px 0; color: var(--muted); font-size: 14px; }
.o-side .total { margin-top: 8px; }
.o-side .btn { margin-top: 12px; }
.o-side .note { margin-top: 10px; }
.obar {
  position: fixed; left: 0; right: 0; bottom: var(--tab-h); z-index: 25;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-overlay);
  opacity: 0; transform: translateY(100%); pointer-events: none; visibility: hidden;
  transition: opacity .2s var(--e-out), transform .24s var(--e-out), visibility 0s linear .24s;
}
.obar.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s var(--e-out), transform .24s var(--e-out); }
.obar button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.obar-t { display: grid; min-width: 0; line-height: 1.2; }
.obar-t .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.obar-t b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.obar-r { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 48px; padding: 0 14px 0 18px; border-radius: var(--r-sm); box-shadow: var(--shadow-card); background: var(--primary); color: var(--on-primary); font-weight: 650; font-size: 15px; }
@media (min-width: 960px) {
  .order { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
  .o-side { position: sticky; top: calc(var(--top-h) + 24px); }
  .obar { display: none; }
}

/* ── Status ────────────────────────────────────────────── */
.cek { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 10px; max-width: 560px; margin-bottom: 32px; }
.cek .ferr { grid-column: 1 / -1; }
.cek-in { position: relative; display: block; }
.cek-in > .ic { position: absolute; left: 14px; top: 50%; margin-top: -10px; color: var(--muted); pointer-events: none; }
.cek-in input { width: 100%; height: 52px; padding-left: 44px; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cek-in input::placeholder { text-transform: none; letter-spacing: .02em; font-weight: 400; }
.cek .btn { min-height: 52px; padding-inline: 24px; }
.hasil { display: grid; gap: 20px; align-items: start; }
.hasil-a, .hasil-n, .hasil-t { display: grid; gap: 16px; min-width: 0; }
.kode { font-size: clamp(28px, 2vw + 20px, 40px); font-weight: 700; letter-spacing: .01em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-head { display: grid; gap: 10px; }
.r-head .over { color: var(--muted); }
.badge {
  --tone: var(--info); display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  min-height: 34px; padding: 0 14px 0 10px; border-radius: var(--r-lg); background: var(--info-bg); color: var(--tone);
  font-size: 14px; font-weight: 650;
}
.badge.st0 { --tone: var(--warn); background: var(--warn-bg); }
.badge.stx { --tone: var(--err); background: var(--err-bg); }
.badge.st4 { --tone: var(--ok); background: var(--ok-bg); }
.badge.st5 { --tone: var(--muted); background: var(--surface-alt); }
.tl-sec { display: grid; gap: 18px; padding: 20px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.tl-sec > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tl-sec h2 { font-size: 20px; font-weight: 650; }
.contoh { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contoh a { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.contoh a:hover { background: var(--primary-tint); color: var(--ink); }
.contoh a .code { color: var(--primary); }
.contoh a > .ic { color: var(--muted); }
.cek-bawah { display: grid; gap: 14px; max-width: 560px; }
.kosong { display: grid; justify-items: start; gap: 12px; max-width: 560px; }
.kosong-art { display: grid; place-items: center; width: 96px; height: 96px; border-radius: var(--r-lg); background-color: var(--surface); background-image: var(--kawung); box-shadow: var(--shadow-card); color: var(--primary); }
.kosong p { margin: 0; color: var(--muted); }
.ulang { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 900px) {
  .hasil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 40px; }
  .hasil-a { grid-column: 1; grid-row: 1 / span 2; }
  .hasil-n { grid-column: 2; grid-row: 1; margin-bottom: 16px; }
  .hasil-t { grid-column: 2; grid-row: 2; }
}

/* sukses: kaos dilipat, lalu nota naik & nomor dicap */
.sukses { display: grid; gap: 20px; justify-items: center; max-width: 520px; margin: 0 auto; text-align: center; }
.sukses .lead { max-width: 42ch; font-size: 17px; }
.lipat { width: 100px; height: 104px; color: var(--primary); }
.lipat svg { width: 100%; height: 100%; overflow: visible; }
.lipat path { fill: var(--primary-tint); stroke: currentColor; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.lipat .lk, .lipat .ln { transform-box: view-box; }
.lipat .lk { transform-origin: 40px 0; animation: lengan .26s var(--e-io) .15s both; }
.lipat .ln { transform-origin: 80px 0; animation: lengan .26s var(--e-io) .22s both; }
.lipat .bw { transform-box: view-box; transform-origin: 0 64px; animation: badan .32s var(--e-io) .44s both; }
.lipat .lp { opacity: 0; animation: muncul .12s ease-out .72s both; }
.lipat .kaos { animation: turun .32s var(--e-io) .44s both; }
@keyframes turun { to { transform: translateY(16px); } }
@keyframes lengan { to { transform: scaleX(-1); } }
@keyframes badan { to { transform: scaleY(-1); } }
@keyframes muncul { to { opacity: 1; } }
.struk { width: 100%; text-align: left; animation: naik .24s var(--e-out) .8s both; }
.cap { display: grid; justify-items: center; gap: 6px; margin: 6px 0 14px; }
.cap .kode { display: inline-block; padding: 10px 16px 9px; border: 2px solid var(--primary); border-radius: var(--r-xs); color: var(--primary); transform: rotate(-2deg); animation: cap .18s var(--e-out) 1s both; }
.cap .over { color: var(--muted); }
.s-act { display: grid; gap: 10px; width: 100%; animation: naik .24s var(--e-out) .9s both; }
@media (min-width: 520px) { .s-act { grid-template-columns: 1fr 1fr; } }
@keyframes naik { from { opacity: 0; transform: translateY(16px); } }
@keyframes cap { from { opacity: 0; transform: rotate(-2deg) scale(1.12); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }

/* ── Gerak yang dikurangi ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  #toast, #toast.on { transform: translate(-50%, 0); transition: opacity .2s ease !important; }
  .obar, .obar.on { transform: none; }
}