/* Agen Lumecolors — warm night theme. Hairlines instead of shadows, plain text labels,
   one accent (ember) for "where Lume is", WhatsApp green only on buy buttons. */

:root {
  --bg: #0e0b09;
  --bg-2: #120e0b;
  --surface: #18130f;
  --surface-2: #201913;
  --line: rgba(240, 226, 208, 0.08);
  --line-2: rgba(240, 226, 208, 0.16);
  --fg: #f2eadf;
  --fg-2: #d9cdbf;
  --muted: #a6988a;
  --dim: #958779; /* >= 4.5:1 on bg, surface and the active suggestion row */
  --accent: #ff6a3d;
  --accent-2: #ff8a63;
  --accent-ink: #1c0c05;
  --sand: #d4b48c;
  --wa: #35c776;
  --wa-2: #48d687;
  --wa-ink: #04170b;
  --line-3: rgba(240, 226, 208, 0.26);
  --strong: #fff;
  --hover: rgba(255, 255, 255, 0.05);
  --nav-bg: rgba(14, 11, 9, 0.9);
  --announce-bg: #0a0807;
  --card-bg: rgba(18, 14, 11, 0.94);
  --ctl-bg: rgba(14, 11, 9, 0.8);
  --pop-bg: #1a1511;
  --tint: rgba(255, 106, 61, 0.035);
  --tint-2: rgba(255, 106, 61, 0.07);
  --sel: rgba(255, 106, 61, 0.35);
  --logo-filter: invert(1) brightness(1.35) sepia(0.12);

  --serif: 'Playfair Display', 'Playfair Display Fallback', Georgia, 'Times New Roman', serif; /* headings (owner, 1 Oct 2026) */
  --sans: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r: 14px;
  --r-sm: 9px;
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

/* Light: warm paper. data-theme is always set by the inline script in <head>
   (saved choice, else the system preference). Text tokens are tuned for >= 4.5:1 on --bg. */
:root[data-theme="light"] {
  --bg: #f6f1e9;
  --bg-2: #efe7db;
  --surface: #fffcf7;
  --surface-2: #ffffff;
  --line: rgba(52, 36, 22, 0.1);
  --line-2: rgba(52, 36, 22, 0.18);
  --line-3: rgba(52, 36, 22, 0.32);
  --fg: #1d1712;
  --fg-2: #3b3027;
  --muted: #65584b;
  --dim: #75665a;
  --accent: #c4401a;
  --accent-2: #a9360f;
  --accent-ink: #ffffff;
  --sand: #8b6a45;
  --wa: #15803d;
  --wa-2: #116a33;
  --wa-ink: #ffffff;
  --strong: #000;
  --hover: rgba(52, 36, 22, 0.05);
  --nav-bg: rgba(246, 241, 233, 0.9);
  --announce-bg: #ece3d6;
  --card-bg: rgba(255, 252, 247, 0.97);
  --ctl-bg: rgba(255, 252, 247, 0.92);
  --pop-bg: #fffcf7;
  --tint: rgba(196, 64, 26, 0.045);
  --tint-2: rgba(196, 64, 26, 0.06);
  --sel: rgba(196, 64, 26, 0.2);
  --logo-filter: brightness(0.55) sepia(0.2);
  color-scheme: light;
}
/* "Warna Lume" (owner, 5 Oct 2026, Admin → Tampilan web; palette of lume.co.id/skincare): the light theme in peach — background #f7e4d3,
   header #f1ceaa, brown text #403522, the red-orange buttons (#ed4324 there; #d93a1d here so white text keeps 4.6:1), rust accents.
   The server writes <html data-palette="lume">; the ☀/☾ button still switches to the dark theme, which keeps its own colours. */
:root[data-palette="lume"][data-theme="light"] {
  --bg: #f7e4d3;
  --bg-2: #f3dac4;
  --surface: #fbeee2;
  --surface-2: #fff8f1;
  --line: rgba(64, 53, 34, 0.12);
  --line-2: rgba(64, 53, 34, 0.2);
  --line-3: rgba(64, 53, 34, 0.34);
  --fg: #403522;
  --fg-2: #5a4632;
  --muted: #614b38;
  --dim: #6b5440;
  --accent: #b23c1e;
  --accent-2: #962f16;
  --accent-ink: #ffffff;
  --sand: #80472a;
  --strong: #2b2114;
  --hover: rgba(64, 53, 34, 0.06);
  --nav-bg: rgba(241, 206, 170, 0.94);
  --announce-bg: #f1ceaa;
  --card-bg: rgba(251, 238, 226, 0.97);
  --ctl-bg: rgba(251, 238, 226, 0.92);
  --pop-bg: #fbeee2;
  --tint: rgba(237, 67, 36, 0.06);
  --tint-2: rgba(237, 67, 36, 0.09);
  --sel: rgba(237, 67, 36, 0.22);
  --logo-filter: brightness(0.45) sepia(0.45);
}
:root[data-palette="lume"][data-theme="light"] .btn-accent { background: #d93a1d; color: #fff; }
:root[data-palette="lume"][data-theme="light"] .btn-accent:hover { background: #c2331a; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
em { font-style: italic; }
::selection { background: var(--sel); color: var(--strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.muted { color: var(--muted); }
.kicker, .label {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.kicker { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 14px/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 54px; padding: 0 26px; font-size: 15px; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-2); }
.btn-wa { background: var(--wa); color: var(--wa-ink); }
.btn-wa:hover { background: var(--wa-2); }
.btn-ghost { border-color: var(--line-2); color: var(--fg); background: transparent; }
.btn-ghost:hover { border-color: var(--fg-2); }

/* ---------- top ---------- */
.announce {
  background: var(--announce-bg);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 9px var(--gut);
  font-size: 12.5px;
  color: var(--muted);
}
.announce b { color: var(--accent); font-weight: 600; } /* same face as the sentence: the mono face spaced "harga sama" out */
:root[data-theme="light"] .announce b { color: var(--accent-2); } /* 5.1:1 on the light bar (accent is 4.0) */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex; align-items: center; gap: 28px;
  max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 12px var(--gut);
}
.brand img { height: 26px; width: auto; filter: var(--logo-filter); }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.theme-btn {
  flex: none; width: 34px; height: 34px; margin-left: -8px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; background: none; cursor: pointer; color: var(--fg-2);
  transition: border-color .15s, color .15s;
}
.theme-btn:hover { color: var(--strong); border-color: var(--line-3); }
.theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-btn .ic-moon { display: none; }
html:not([data-theme]) .theme-btn { display: none; } /* no JavaScript: the button could not do anything */
:root[data-theme="light"] .theme-btn .ic-sun { display: none; }
:root[data-theme="light"] .theme-btn .ic-moon { display: block; }
.nav-links a { font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--fg); }

/* ---------- header of the brand pages: in-page links, "Produk" menu, Jadi Stockist ----------
   (markup from scripts/build-pages.mjs, behaviour in js/menu.js) */
.lp-nav .nav-in { gap: 22px; }
.lp-nav .nav-links { gap: 22px; }
.nav-sp { margin-left: auto; }
.nav-join { font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s; white-space: nowrap; }
.nav-join:hover { color: var(--fg); }
.menu { position: static; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 2px;
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  font-size: 13.5px; color: var(--muted); transition: color .15s;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn:hover, .menu[open] .menu-btn { color: var(--fg); }
.menu-btn svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.menu-btn .ic-chev { width: 12px; height: 12px; stroke-width: 1.5; transition: transform .2s; }
.menu[open] .ic-chev { transform: rotate(180deg); }
.menu-btn .ic-burger { display: none; width: 20px; height: 20px; stroke-width: 1.6; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--pop-bg); border-bottom: 1px solid var(--line-2);
  max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow: auto; overscroll-behavior: contain;
}
.menu-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; /* 3 series + Parfum + Beli & gabung */
  max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 26px var(--gut) 30px;
}
.menu-h { margin: 0 0 12px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.menu-h a { color: var(--fg-2); text-decoration: none; }
.menu-h a span { color: var(--dim); }
.menu-h a:hover { color: var(--accent); }
.menu-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-col li a {
  display: block; padding: 6px 0; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.35;
  transition: color .15s;
}
.menu-col li a:hover { color: var(--fg); }
.menu a[aria-current="page"] { color: var(--accent); }
.menu-more { border-left: 1px solid var(--line); padding-left: 28px; }

/* ---------- hero + map ---------- */
.hero { padding-top: clamp(22px, 3.4vw, 46px); }
.hero-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px;
  margin-bottom: clamp(16px, 2.4vw, 28px);
}
.hero-copy .kicker { margin-bottom: 14px; }
.hero h1 {
  font: 400 clamp(38px, 4.6vw, 60px)/1 var(--serif);
  letter-spacing: -0.01em;
  max-width: 20ch;
  text-wrap: balance;
}
.hero h1 em, .finder h2 em, .pusat h2 em { color: var(--accent); }

.stats { display: flex; margin: 0 0 6px; }
/* Admin → Agen off: the hero offers ordering from Pusat instead of the agent counts (js/app.js pusatMode) */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: clamp(18px, 2.4vw, 28px); } /* under the map (no agents) */
.hero-actions svg { width: 17px; height: 17px; }
@media (max-width: 620px) { .hero-actions .btn { flex: 1 1 100%; justify-content: center; } }
.stats > div { padding: 0 0 0 22px; margin-left: 22px; border-left: 1px solid var(--line-2); }
.stats > div:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
.stats dt { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.stats dd { margin: 0; font: 400 40px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--fg); }

.map-shell {
  position: relative;
  max-width: 1720px; margin: 0 auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 45%, var(--tint), transparent 60%),
    var(--bg-2);
}
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 388;
  max-height: min(calc(100svh - 230px), 760px);
  min-height: 300px;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.map.dragging { cursor: grabbing; }
.map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pins { position: absolute; inset: 0; pointer-events: none; }

.pin {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  display: block; width: 0; height: 0; padding: 0;
  border: 0; background: none; cursor: pointer;
  opacity: 0; transition: opacity .5s ease;
}
.pin.on { opacity: 1; }
.pin.pusat { z-index: 1; }
.pin.city, .pin.cluster { z-index: 2; }
.pin.sel { z-index: 3; }
.pin::before { /* hit area centred on the marker */
  content: ''; position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%;
}
.pin-label {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  font: 500 12.5px/1 var(--sans);
  color: var(--fg-2);
  transition: color .15s;
  pointer-events: auto;
}
.pin-label b { font: 500 11px/1 var(--mono); color: var(--accent); margin-left: 5px; }
:root[data-theme="light"] .pin-label b { color: #8f2c0b; } /* 11px count over the map: ~6.9:1 (accent is 4.2) */
.pin:hover .pin-label, .pin:focus-visible .pin-label, .pin.sel .pin-label { color: var(--strong); }
.pin:focus-visible { outline: none; }
.pin:focus-visible::before { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin.pusat .pin-label { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.pin.place .pin-label { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
.pin.cluster .pin-label b { color: var(--fg-2); }
/* names on a pill with a border, readable over the dots and routes, in both themes (owner, 1 Oct 2026: "nama kota dan pusat
   lume dibuat border … biar kliatan jelas", "sama yg gelap juga"); the province name on hover (.map-tip) too */
.pin-label, .map-tip {
  padding: 4px 8px; border: 1px solid rgba(240, 226, 208, .32); border-radius: 6px;
  background: rgba(14, 11, 9, .9); color: #efe6da;
}
.map-tip { padding: 6px 9px; }
.pin.pusat .pin-label { border: 1.5px solid #efe6da; color: #fff7ee; font-weight: 600; }
.pin.sel .pin-label, .pin:hover .pin-label { border-color: var(--accent); }
:root[data-theme="light"] .pin-label, :root[data-theme="light"] .map-tip {
  border-color: rgba(52, 36, 22, .3); background: rgba(250, 246, 239, .94); color: #2a2018;
}
:root[data-theme="light"] .pin.pusat .pin-label { border: 1.5px solid #1d1712; color: #1d1712; font-weight: 600; }
:root[data-theme="light"] .pin.sel .pin-label, :root[data-theme="light"] .pin:hover .pin-label { border-color: #c4401a; }
:root[data-theme="light"] .map-tip { padding: 6px 9px; }
:root[data-theme="light"] .map-tip small { color: #5c4d40; }
/* the announce bar in "Warna Lume" (owner, 5 Oct 2026: "ganti backgroundnya warna merah dong biar kliatan"): the buttons' red,
   white text (4.6:1), the code / percent / time in bold white; also while a promo runs (html.has-promo) */
:root[data-palette="lume"][data-theme="light"] .announce { background: #d93a1d; border-bottom-color: #b8301a; color: #fff; }
:root[data-palette="lume"][data-theme="light"] .announce b { color: #fff; font-weight: 700; }
:root[data-palette="lume"][data-theme="light"] .announce .promo-prev { border-color: rgba(255, 255, 255, .6); }
/* the map pills in "Warna Lume": cream pills, brown ink, rust when picked */
:root[data-palette="lume"][data-theme="light"] .pin-label, :root[data-palette="lume"][data-theme="light"] .map-tip { border-color: rgba(64, 53, 34, .3); background: rgba(255, 248, 241, .95); color: #403522; }
:root[data-palette="lume"][data-theme="light"] .pin.pusat .pin-label { border-color: #403522; color: #403522; }
:root[data-palette="lume"][data-theme="light"] .pin.sel .pin-label, :root[data-palette="lume"][data-theme="light"] .pin:hover .pin-label { border-color: #b23c1e; }
:root[data-palette="lume"][data-theme="light"] .pin-label b { color: #962f16; }
:root[data-palette="lume"][data-theme="light"] .map-tip small { color: #614b38; }

.map-tip {
  position: absolute; left: 0; top: 0; pointer-events: none;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap;
}
.map-tip small { display: block; color: var(--dim); letter-spacing: .06em; margin-top: 3px; font-size: 10px; }
.map-msg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 12px var(--mono); color: var(--dim); letter-spacing: .08em; text-transform: uppercase;
}

.map-ui {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 var(--gut) 16px; pointer-events: none;
}
.legend { display: flex; gap: 18px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lg-pusat::before { border-radius: 1px; transform: rotate(45deg); background: var(--fg); width: 6px; height: 6px; }
.lg-hint { color: var(--dim); padding-left: 18px; border-left: 1px solid var(--line-2); }
.zoom { flex: none; display: flex; pointer-events: auto; border: 1px solid var(--line-2); border-radius: 999px; background: var(--ctl-bg); overflow: hidden; }
.zoom button {
  height: 32px; min-width: 34px; padding: 0 10px; border: 0; background: none; cursor: pointer;
  font: 500 15px/1 var(--mono); color: var(--fg-2);
}
.zoom button + button { border-left: 1px solid var(--line); }
.zoom button:hover { color: var(--strong); background: var(--hover); }
.zoom .zoom-reset { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.zoom button:focus-visible { outline-offset: -3px; border-radius: 999px; } /* .zoom clips outside rings */

/* selection card on the map */
.city-card {
  position: absolute; top: 18px; right: var(--gut); z-index: 5;
  width: min(360px, calc(100% - 2 * var(--gut)));
  max-height: calc(100% - 84px); overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 16px 16px 12px;
  animation: card-in .35s cubic-bezier(.2, .7, .2, 1);
  overscroll-behavior: contain;
}
@keyframes card-in { from { opacity: 0; transform: translateY(-6px); } }
.cc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cc-kicker { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.cc-title { font: 400 30px/1.05 var(--serif); margin-top: 6px; }
.cc-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.cc-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); background: none; cursor: pointer; color: var(--muted);
  font: 400 16px/1 var(--sans);
}
.cc-close:hover { color: var(--fg); border-color: var(--fg-2); }
.cc-list { list-style: none; margin: 14px 0 0; padding: 0; }
.cc-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.cc-row-main { min-width: 0; flex: 1; }
.cc-name { font-weight: 600; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.cc-meta { font: 400 11px/1.4 var(--mono); color: var(--dim); letter-spacing: .04em; margin-top: 3px; text-transform: uppercase; }
.cc-meta .km { color: var(--accent); }
.cc-row .btn { height: 32px; padding: 0 13px; font-size: 12.5px; }
.cc-row button.cc-city { all: unset; cursor: pointer; display: block; }
.cc-row button.cc-city:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.cc-title:focus { outline: none; }
.cc-row button.cc-city:hover .cc-name { color: var(--strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.cc-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; background: none; border: 0; padding: 6px 0; cursor: pointer;
}
.cc-more:hover { color: var(--fg); }
.cc-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* ---------- finder ---------- */
.finder { padding-top: clamp(56px, 8vw, 96px); }
.finder-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.finder h2, .section-head h2, .pusat h2 {
  font: 400 clamp(30px, 3.6vw, 46px)/1.04 var(--serif);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.perks li {
  padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); line-height: 1.45;
}
.perks li:nth-child(odd) { border-right: 1px solid var(--line); }
.perks li:nth-child(even) { padding-left: 16px; }
.perks b { color: var(--fg); font-weight: 600; }
.perk-n { display: block; font: 500 10.5px/1 var(--mono); color: var(--accent); letter-spacing: .1em; margin-bottom: 8px; }

.search { margin-top: 40px; }
.search .label { display: block; margin-bottom: 12px; }
.search-row { display: flex; gap: 12px; }
.combo { position: relative; flex: 1; min-width: 0; }
.combo-ic { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--dim); stroke-width: 1.6; pointer-events: none; }
.combo input {
  width: 100%; height: 54px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--fg);
  font: 500 16px/1 var(--sans);
  transition: border-color .15s, background-color .15s;
}
.combo input::placeholder { color: var(--dim); font-weight: 400; }
.combo input:hover { border-color: var(--line-3); }
.combo input:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
.combo input:focus + .suggest:not([hidden]) { border-color: var(--accent); }

.suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  list-style: none; margin: 0; padding: 6px;
  background: var(--pop-bg); border: 1px solid var(--line-2); border-radius: var(--r);
  max-height: 360px; overflow: auto;
}
.suggest li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer;
}
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--hover); }
.sg-label { font-weight: 600; font-size: 14.5px; }
.sg-label mark { background: none; color: var(--accent); }
.sg-sub { color: var(--dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.sg-tag { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.sg-tag.has { color: var(--accent); }
.suggest .sg-empty { cursor: default; color: var(--muted); font-size: 13.5px; }
.suggest .sg-empty:hover { background: none; }

.geo {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 0;
  border: 0; background: none; cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.geo svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.geo:hover { color: var(--fg); }
.geo[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- results + agent cards ---------- */
.results:empty { display: none; }
.results { margin-top: 36px; }
.res-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.res-title { font: 400 26px/1.15 var(--serif); min-width: 0; }
.res-title .km { font: 500 13px var(--mono); color: var(--accent); }
.res-meta { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.res-clear { border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 8px 0; margin: -8px 0; white-space: nowrap; }
.res-clear:hover { color: var(--fg); }
.res-note { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 70ch; }
.res-note a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--line-2); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 18px; }
.agent {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 18px 16px;
  transition: border-color .2s;
}
.agent:hover { border-color: var(--line-2); }
.agent.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { border-color: var(--accent); } }
.ag-top { display: flex; justify-content: space-between; gap: 10px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ag-top .km { color: var(--accent); white-space: nowrap; }
.agent h3 { font: 600 17px/1.3 var(--sans); margin-top: 10px; letter-spacing: -0.005em; }
.ag-addr { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
.ag-svc { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--fg-2); }
.ag-svc li { display: inline-flex; align-items: center; gap: 6px; }
.ag-svc li::before { content: ''; width: 8px; height: 4px; border: solid var(--wa); border-width: 0 0 1.5px 1.5px; transform: translateY(-2px) rotate(-45deg); }
.ag-stores { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; }
.ag-stores a { color: var(--muted); text-decoration: none; }
.ag-stores a:hover { color: var(--fg); }
.ag-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.ag-wa { font: 400 12.5px var(--mono); color: var(--fg-2); letter-spacing: .01em; }
.ag-wa small { display: block; font-size: 10px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; margin-bottom: 3px; }
.agent .btn { height: 40px; }
.agent.libur { background: var(--bg-2); border-style: dashed; }
.ag-libur { color: var(--accent); }

/* ---------- directory ---------- */
.directory { padding-top: clamp(64px, 9vw, 110px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.section-head p { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.dir { border-top: 1px solid var(--line-2); }
.prov { border-bottom: 1px solid var(--line); }
.prov > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 20px;
  padding: 18px 2px;
}
.prov > summary::-webkit-details-marker { display: none; }
.prov-name { font: 400 26px/1.1 var(--serif); transition: color .15s; }
.prov > summary:hover .prov-name { color: var(--strong); }
.prov-cities { color: var(--dim); font-size: 13px; margin-top: 4px; font-family: var(--sans); }
.prov-count { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.prov-count b { color: var(--accent); font-weight: 500; }
.chev { width: 9px; height: 9px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s; justify-self: end; }
.prov[open] .chev { transform: translateY(2px) rotate(-135deg); }
.prov-body { padding: 4px 0 28px; }
.city-block + .city-block { margin-top: 26px; }
.city-head { display: flex; align-items: baseline; gap: 14px; }
.city-head h3 { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.city-head .map-link { border: 0; background: none; padding: 8px 0; margin: -8px 0; cursor: pointer; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.city-head .map-link:hover { color: var(--accent); }
.city-block .cards { margin-top: 12px; }

/* ---------- pusat ---------- */
.pusat { padding-top: clamp(64px, 9vw, 110px); padding-bottom: clamp(56px, 8vw, 96px); }
.pusat-box {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center;
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + 6px);
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(80% 140% at 100% 0%, var(--tint-2), transparent 60%),
    var(--surface);
}
.pusat-copy .kicker { margin-bottom: 14px; }
.pusat-copy .muted { margin-top: 14px; max-width: 46ch; }
.pusat-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; justify-self: end; }
.market { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.market a { color: var(--fg-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.market a:hover { color: var(--strong); }

/* ---------- welcome popup with the offer (js/welcome.js) ---------- */
.welcome {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto;
  border: 1px solid var(--line-2); border-radius: calc(var(--r) + 8px); color: var(--fg);
  background: radial-gradient(90% 110% at 100% 0%, var(--tint-2), transparent 60%), var(--pop-bg);
}
.welcome::backdrop { background: rgba(8, 6, 5, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.welcome[open] { animation: welcome-in .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes welcome-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
html:has(dialog.welcome[open]:not(.od-inline):not(.sf-inline)) { overflow: hidden; } /* not the order form inside /live/ (js/order.js mountInline) nor the shade finder on /shade/ (js/shade.js) */
.welcome-in { padding: 30px 28px 26px; }
.welcome-num { margin-top: 14px; font: 400 96px/0.82 var(--serif); letter-spacing: -0.04em; color: var(--accent); }
.welcome-num span { font-size: .5em; letter-spacing: 0; }
.welcome h2 { margin-top: 12px; font: 400 34px/1.05 var(--serif); letter-spacing: -0.005em; }
.welcome-text { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.welcome-text b { color: var(--fg); font-weight: 600; }
.welcome-actions { display: grid; gap: 10px; margin-top: 24px; }
.welcome-actions .btn { width: 100%; height: 50px; }
/* lumé run discount code (js/gamecode.js): the announce bar links to the game, the code dialog */
.announce a { color: inherit; text-decoration: none; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* a bar that links somewhere looks like a button (owner, 6 Oct 2026: "ga clickable … tambahin icon dan animasi … biar eye catching"):
   an icon in front that wiggles now and then, a pill "Main sekarang →" / "Lihat promo →" with a pulsing ring, a light sweeping
   across the bar. CSS only, so the static bar of every page gets it before js/gamecode.js redraws it; still for reduced motion. */
.announce:has(a) { position: relative; overflow: hidden; }
.announce:has(a)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .09) 50%, transparent 65%); animation: ann-shine 5s ease-in-out 1s infinite;
}
.announce a[href="/game/"]::before, .announce a[href="/#promo"]::before {
  content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; background: var(--ann-ic, var(--accent));
  -webkit-mask: var(--ann-icon) center / contain no-repeat; mask: var(--ann-icon) center / contain no-repeat; animation: ann-wiggle 3.2s ease-in-out infinite;
}
.announce a[href="/game/"] { --ann-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10a5 5 0 0 1 4.6 7l-1 2.3a2.4 2.4 0 0 1-4 .6L15 16H9l-1.6 1.9a2.4 2.4 0 0 1-4-.6l-1-2.3A5 5 0 0 1 7 8Z'/%3E%3Cpath d='M8 11v3M6.5 12.5h3M16 12h.01M18 13.5h.01'/%3E%3C/svg%3E"); --ann-cta: 'Main sekarang \2192'; }
.announce a[href="/#promo"] { --ann-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8L3 12Z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.4'/%3E%3C/svg%3E"); --ann-cta: 'Lihat promo \2192'; }
.announce a[href="/game/"]::after, .announce a[href="/#promo"]::after {
  content: var(--ann-cta); display: inline-block; margin-left: 10px; padding: 2px 11px; border-radius: 999px; vertical-align: 1px;
  background: var(--ann-pill, var(--accent)); color: var(--ann-pill-ink, var(--accent-ink)); font: 600 11.5px/1.55 var(--sans); white-space: nowrap;
  animation: ann-pulse 2.4s ease-out infinite;
}
.announce a:hover::after { filter: brightness(1.08); }
:root[data-palette="lume"][data-theme="light"] .announce a { --ann-ic: #fff; --ann-pill: #fff; --ann-pill-ink: #c4321a; --ann-ring: rgba(255, 255, 255, .7); }
@keyframes ann-pulse { 0% { box-shadow: 0 0 0 0 var(--ann-ring, rgba(255, 106, 61, .55)); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 106, 61, 0); } }
@keyframes ann-wiggle { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 92% { transform: rotate(-8deg); } 96% { transform: rotate(4deg); } }
@keyframes ann-shine { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .announce a::before, .announce a::after, .announce:has(a)::after { animation: none; } }
.gc h2 em { font-style: italic; color: var(--accent); }
.gc-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px;
  padding: 14px 14px 14px 18px; border: 1px dashed var(--line-3); border-radius: var(--r-sm); }
.gc-code .mono { font: 500 24px/1 var(--mono); letter-spacing: .06em; color: var(--fg); }
.gc-rules { font-size: 14px; }
/* codes last a few hours: the deadline and the time left, ticking (js/gamecode.js countdown()) */
.gc-time { margin-top: 12px; font-size: 14px; color: var(--fg-2); }
.gc-time b { color: var(--fg); font-weight: 600; }
.gc-time .gc-left { color: var(--accent); }
:root[data-theme="light"] .gc-time .gc-left { color: var(--accent-2); }
.gc-left { font-variant-numeric: tabular-nums; white-space: nowrap; }
.welcome .mono { font-family: var(--mono); letter-spacing: .04em; }
.welcome-x {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: none; color: var(--muted); font: 400 20px/1 var(--sans);
}
.welcome-x:hover { color: var(--fg); border-color: var(--line-3); }
@media (max-width: 560px) {
  /* phones: a sheet at the bottom, within thumb reach */
  .welcome { width: calc(100vw - 20px); margin: auto auto max(10px, env(safe-area-inset-bottom)); }
  .welcome-in { padding: 26px 22px 22px; }
  .welcome-num { font-size: 84px; }
  .welcome h2 { font-size: 30px; }
}

/* ---------- order form before WhatsApp (js/order.js): a .welcome dialog ---------- */
.od { width: min(520px, calc(100vw - 32px)); }
.od-in { padding: 26px 26px 22px; }
.od .kicker { margin-right: 44px; }
.od h2 { margin-top: 10px; font-size: 30px; }
.od-cart { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.od-line { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 38px 10px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.od-line img, .od-pick img, .od-sug img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; background: var(--hover); }
.od-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.od-line select { margin-top: 6px; width: 100%; max-width: 230px; height: 34px; padding: 0 8px; font: 500 13px var(--sans); color: var(--fg);
  background: var(--pop-bg); border: 1px solid var(--line-2); border-radius: 7px; }
.od-line-end { display: grid; justify-items: end; gap: 6px; }
.od-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; }
.od-qty button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--fg); font-size: 17px; cursor: pointer; }
.od-qty button:hover:not(:disabled) { background: var(--hover); }
.od-qty button:disabled { opacity: .35; cursor: default; }
.od-qty span { min-width: 22px; text-align: center; font: 500 13px var(--mono); }
.od-line-price { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-rm { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.od-rm:hover { color: var(--fg); background: var(--hover); }
.od-empty { padding: 6px 0; color: var(--muted); font-size: 14px; }
.od-bundle { align-items: start; }
.od-contains { margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.od-save { margin-top: 3px; color: var(--accent); font-size: 12px; font-weight: 600; }
:root[data-theme="light"] .od-save { color: var(--accent-2); }
.od-pick-in { width: 100%; height: 36px; margin-top: 8px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--pop-bg);
  color: var(--fg); font: 400 16px var(--sans); } /* 16px: no zoom-in on iPhone */
.od-pick-in:focus { border-color: var(--accent); outline: none; }
.od-pick-sub { display: block; margin-top: 3px; color: var(--muted); font: 400 12px/1.4 var(--sans); white-space: normal; }
.od-add { width: 100%; height: 44px; margin-top: 10px; border: 1px dashed var(--line-3); border-radius: var(--r-sm); background: none; color: var(--fg);
  font: 600 14px var(--sans); cursor: pointer; }
.od-add:hover { border-color: var(--fg-2); }
.od-picker { margin-top: 10px; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.od-pick-list { max-height: 320px; margin-top: 6px; overflow: auto; overscroll-behavior: contain; }
.od-pick-g, .od-up-lbl { margin: 12px 4px 6px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.od-pick { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 8px 6px; border: 0;
  border-radius: 8px; background: none; color: var(--fg); font: 500 14px var(--sans); text-align: left; cursor: pointer; }
.od-pick:hover, .od-pick:focus-visible { background: var(--hover); }
.od-pick img, .od-sug img { width: 40px; height: 40px; }
.od-pick > small { align-self: start; padding-top: 3px; color: var(--muted); font: 500 12px var(--mono); white-space: nowrap; }
.od-upsell { margin-top: 16px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--tint-2); }
.od-up-t, .od-up-ok { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.od-up-t b, .od-up-ok b { color: var(--fg); }
.od-up-ok small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); } /* the coupon's terms: percent, minimum */
.od-up-t b:first-child { color: var(--accent); }
:root[data-theme="light"] .od-up-t b:first-child { color: var(--accent-2); }
.od-up-t + .od-sugs, .od-up-ok + .od-sugs { margin-top: 10px; }
.od-up-lbl { margin: 12px 0 0; }
.od-sugs { display: grid; gap: 8px; margin-top: 8px; }
.od-sug { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px 6px 6px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--pop-bg); color: var(--fg); font: 600 13.5px/1.3 var(--sans); text-align: left; cursor: pointer; }
.od-sug:hover { border-color: var(--line-3); }
.od-sug small { display: block; margin-top: 2px; color: var(--muted); font: 500 12px var(--mono); }
.od-sug-add { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 18px; }
.od-sum { display: grid; gap: 6px; margin: 16px 0 0; font-size: 14px; }
.od-sum div { display: flex; justify-content: space-between; gap: 12px; }
.od-sum dt { color: var(--muted); }
.od-sum dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.od-disc dd { color: var(--accent); }
:root[data-theme="light"] .od-disc dd { color: var(--accent-2); }
.od-total { padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 16px; }
.od-total dt, .od-total dd { color: var(--fg); font-weight: 600; }
.od-fine { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.od-fine .gc-left { color: var(--accent); }
.od-next:disabled { opacity: .45; cursor: default; }
.od-skip { justify-self: center; color: var(--fg-2); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.od-back { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--fg-2); font: 600 13px var(--sans); cursor: pointer; }
.od-mini { margin-top: 6px; color: var(--muted); font-size: 13.5px; }
.od-form { display: grid; gap: 14px; margin-top: 16px; }
/* Optional checkout unlock: catalog photography, existing light/dark theme tokens. */
.od-unlock-card { padding: 16px; border: 1px solid var(--sand); border-radius: var(--r); background: var(--tint-2); color: var(--fg); }
.od-unlock-card h3 { margin: 6px 0 10px; font: 400 26px/1.15 var(--serif); color: var(--strong); }
.od-unlock-card > p { font-size: 12px; line-height: 1.6; }
.od-unlock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.od-unlock-choice { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; background: var(--card-bg); border: 1px solid var(--line-3); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.od-unlock-choice.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.od-unlock-choice img { width: 100%; height: 112px; object-fit: contain; border-radius: 6px; }
.od-unlock-choice h4 { font: 600 13px/1.4 var(--sans); margin: 0; }
.od-unlock-choice label { display: grid; gap: 4px; min-width: 0; font-size: 12px; }
.od-unlock-choice select { width: 100%; min-width: 0; min-height: 44px; color: var(--strong); background: var(--card-bg); border: 1px solid var(--line-3); border-radius: 6px; font: inherit; }
.od-unlock-choice s, .od-unlock-choice small { font-size: 11px; line-height: 1.5; color: var(--muted); }
.od-unlock-choice strong { color: var(--strong); font: 500 clamp(18px, 5vw, 25px)/1.2 var(--serif); }
.od-unlock-choice .od-save { font-size: 11px; margin: 0; }
.od-unlock-choice .btn { margin-top: auto; min-height: 44px; padding: 8px 6px; font-size: 12px; white-space: normal; }
.od-unlock-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 12px 0 0 16px; margin: 12px 0; font: 500 10px/1.6 var(--sans); }
.od-unlock-cancel { min-height: 44px; color: var(--fg); text-decoration: underline; background: transparent; border: 0; font: inherit; }
.od-unlock-note { padding: 10px; border-left: 3px solid var(--accent); font-size: 12px; line-height: 1.6; color: var(--fg); }
.od-unlock button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 390px) { .od-unlock-card { padding: 10px; } .od-unlock-grid { gap: 8px; } .od-unlock-choice { padding: 8px; } }
/* EXCLUSIVE UNLOCK polish (4 Oct 2026, owner's creative: big special price, a "Hemat" pill, an accent edge) */
.od-unlock-card { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 45%, var(--line-3)); }
.od-unlock-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); }
.od-unlock-card h3 { font-size: clamp(26px, 7vw, 32px); letter-spacing: -.01em; }
.od-unlock-choice { transition: border-color .15s; }
.od-unlock-choice:hover { border-color: var(--accent); }
.od-unlock-choice strong { color: var(--accent); font: 600 clamp(22px, 6vw, 28px)/1.1 var(--serif); }
.od-unlock-choice .od-save { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 10.5px/1.5 var(--mono); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .od-unlock-choice { transition: none; } }
/* banner mode: the owner's picture, then one button per package (4 Oct 2026) */
.od-unlock-card.is-banner { padding: 0; }
.od-unlock-card.is-banner::before { display: none; }
.od-unlock-banner { display: block; width: 100%; height: auto; }
.od-unlock-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 12px; }
/* a package button: solid accent so it reads as a button (owner: "warna biar clickable"); the chosen one turns into an outlined "Terpilih ✓" */
.od-unlock-pick { display: grid; gap: 3px; justify-items: center; min-height: 58px; padding: 11px 10px; border: 2px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: inherit; text-align: center; cursor: pointer; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform .12s, filter .15s, background-color .15s, color .15s; }
.od-unlock-pick:hover { filter: brightness(1.06); transform: translateY(-1px); }
.od-unlock-pick:active { transform: translateY(0); }
.od-unlock-pick b { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.od-unlock-pick small { color: inherit; font-size: 11.5px; opacity: .9; }
.od-unlock-pick.is-selected { background: var(--tint-2); color: var(--accent); box-shadow: none; }
.od-unlock-pick.is-selected small { font-weight: 700; opacity: 1; }
.od-unlock-pick:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.od-unlock-card.is-banner .od-unlock-cancel { display: block; margin: 0 auto 10px; }
@media (prefers-reduced-motion: reduce) { .od-unlock-pick { transition: none; } }
.od-field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; }
.od-field small { color: var(--muted); font-weight: 400; }
.od-input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--pop-bg);
  color: var(--fg); font: 400 16px var(--sans); } /* 16px: no zoom-in on iPhone */
textarea.od-input { height: auto; padding: 10px 12px; resize: vertical; }
.od-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--sel); }
.od-err { color: var(--accent-2); font-size: 12.5px; font-style: normal; font-weight: 500; }
:root[data-theme="light"] .od-err { color: var(--accent-2); }
.od-err:empty { display: none; }
.od-city-list { display: grid; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--pop-bg); }
.od-city-list button { padding: 11px 12px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--fg); font: 400 14px var(--sans); text-align: left; cursor: pointer; }
.od-city-list button:first-child { border-top: 0; }
.od-city-list button:hover, .od-city-list button:focus-visible { background: var(--hover); }
.od-check { display: flex; gap: 10px; align-items: flex-start; color: var(--fg-2); font-size: 14px; }
.od-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.od-privacy { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.od-privacy a { color: var(--fg-2); }
.od-send { width: 100%; }
@media (max-width: 560px) {
  .od { width: calc(100vw - 20px); }
  .od-in { padding: 22px 16px 18px; }
  .od h2 { font-size: 27px; }
  .od-line { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .od-line img { width: 44px; height: 44px; }
}

/* ---------- cart: header button, "masuk keranjang" toast, the add sheet (js/cart.js) ---------- */
.nav-cart { position: relative; gap: 7px; }
.nav-cart svg { width: 17px; height: 17px; }
.cart-n { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--fg); color: var(--bg, #0e0b09); font: 700 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.btn-ghost .cart-n { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 560px) { .nav-cart-l { display: none; } }
.cart-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px;
  width: min(520px, calc(100vw - 24px)); padding: 10px 10px 10px 16px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--pop-bg); color: var(--fg);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; }
.cart-toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cart-toast-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--fg-2); }
.cart-toast-t b { color: var(--fg); font-weight: 600; }
.cart-toast .btn { flex: none; white-space: nowrap; }
.cart-toast-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
body:has(.lp-sticky:not([hidden])) .cart-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .cart-toast { transition: none; } }
.as { width: min(460px, calc(100vw - 32px)); }
.as-in { display: grid; grid-template-columns: minmax(0, 1fr); padding: 26px 24px 22px; }
.as .kicker { margin-right: 44px; }
.as h2 { margin-top: 8px; font-size: 28px; }
.as-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 14px; }
.as-head img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--hover); }
.as-head h2 { margin-top: 4px; font-size: 26px; }
.as-name { font-weight: 600; font-size: 16px; }
.as-price { margin-top: 4px; font: 500 15px var(--mono); }
.as-price s { margin-left: 6px; color: var(--muted); font-size: 13px; }
.as-sub { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.as-lbl { display: block; margin-top: 18px; font-size: 13.5px; font-weight: 600; }
.as-lbl small { color: var(--muted); font-weight: 400; }
label.as-lbl + .od-input { margin-top: 8px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.as-chip { min-height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--fg);
  font: 500 13.5px var(--sans); cursor: pointer; }
.as-chip:hover { border-color: var(--line-3); }
.as-chip[aria-checked="true"] { border-color: var(--accent); background: var(--tint-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); }
.as-choices { display: grid; gap: 8px; margin-top: 14px; }
.as-choice { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px;
  border: 1px solid var(--line-2); border-radius: 12px; background: none; color: var(--fg); text-align: left; cursor: pointer; }
.as-choice img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.as-choice b { display: block; font: 600 14px/1.3 var(--sans); }
.as-choice small { display: block; margin-top: 2px; color: var(--muted); font: 400 12px/1.4 var(--sans); }
.as-choice em { font: 500 13px var(--mono); font-style: normal; white-space: nowrap; align-self: start; padding-top: 2px; }
.as-choice[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--tint-2); }
.as-choices + .as-head { padding-top: 14px; border-top: 1px solid var(--line); }
.as-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.as-row .btn { flex: 1; min-width: 0; height: 50px; padding: 0 14px; }
.as-row .od-qty { flex: none; }
.as-hint { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); } /* Cek shade under the shade chips (js/shade.js) */
.as-hint b { color: var(--fg); font-weight: 600; }
.as-link { padding: 0; border: 0; background: none; color: var(--accent); font: 600 13px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
:root[data-theme="light"] .as-link { color: var(--accent-2); }
.as-err { margin-top: 10px; color: var(--accent-2); font-size: 13px; font-weight: 500; }
.as-err:empty { display: none; }
@media (max-width: 560px) {
  .as { width: calc(100vw - 20px); }
  .as-in { padding: 22px 16px 18px; }
  .as-add-l { display: none; }
}
.od-checkout .btn-lg { width: 100%; }
.od-agent.is-off { opacity: .45; pointer-events: none; }
.od-pusat:disabled { opacity: .45; cursor: default; }
.od-where { text-align: center; }
.cart-hint { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--tint-2);
  color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.cart-hint b { color: var(--fg); }
/* out of stock (Admin → Produk) */
a.is-soldout { opacity: .6; }
.btn.is-soldout { background: var(--surface-2); border-color: var(--line-2); color: var(--muted); }
.as-chip.is-out, .as-choice.is-out, .od-pick.is-out { opacity: .45; cursor: not-allowed; }
.as-chip.is-out { text-decoration: line-through; }
.as-chip small { font-size: 11px; text-decoration: none; }
.od-line.od-out { border-color: var(--accent-2); }
.od-out-t, .od-out-warn { margin-top: 6px; color: var(--accent-2); font-size: 12.5px; font-weight: 600; }
.od-out-warn { margin-top: 12px; font-size: 13.5px; }

/* ---------- purchase notification ---------- */
.proof {
  position: fixed; left: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; width: min(400px, calc(100vw - 40px));
  background: #fff; color: #716961; border: 1px solid #e9e1db; border-radius: 18px;
  box-shadow: 0 10px 32px #33231a1a; opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.proof.in { opacity: 1; transform: none; }
.proof-main {
  flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center;
  padding: 13px 0 13px 12px; text-align: left; text-decoration: none; color: inherit;
}
.proof-image { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: 12px; background: #f4eeeb; }
.proof-body { min-width: 0; overflow-wrap: anywhere; }
.proof-text { display: block; font: 400 12.5px/1.45 var(--sans); }
.proof-text b { color: #302a26; font-weight: 600; }
.proof-product { display: block; margin-top: 2px; color: #b14f2d; font: 600 12.5px/1.4 var(--sans); }
.proof-meta { display: block; margin-top: 4px; color: #7d746c; font: 400 11px/1.4 var(--sans); }
.proof-close { flex: none; width: 40px; height: 44px; border: 0; background: none; cursor: pointer;
  color: #887e76; font: 400 21px/1 var(--sans); border-radius: 12px; margin: 0 2px; }
.proof-close:hover { color: #302a26; background: #f7f2ee; }
.proof a:focus-visible, .proof-close:focus-visible { outline: 2px solid #b14f2d; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .proof { transition: none; transform: none; } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 22px 0 28px; font-size: 12.5px; color: var(--dim); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.foot-links { display: flex; gap: 18px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--fg); }
.data-note { margin-left: auto; font: 400 11px var(--mono); letter-spacing: .04em; }

/* ---------- misc ---------- */
.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;
}
.linkish {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--fg);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .finder-head { grid-template-columns: 1fr; gap: 28px; }
  .pusat-box { grid-template-columns: 1fr; }
  .pusat-actions { justify-self: start; }
}
/* up to tablet width the selection card sits under the map instead of covering it
   (matches wideMQ in js/app.js) */
@media (max-width: 1024px) {
  .map-ui { position: static; padding: 12px var(--gut) 14px; border-top: 1px solid var(--line); }
  .city-card {
    position: relative; top: auto; right: auto;
    width: auto; max-height: none; margin: 0 var(--gut) 14px;
  }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-in { justify-content: space-between; gap: 12px; }
  .theme-btn { margin-left: auto; }
  .hero-head { grid-template-columns: 1fr; gap: 26px; }
  .stats dd { font-size: 34px; }
  .stats > div { flex: 1; }
  .map { aspect-ratio: auto; height: clamp(320px, 88vw, 460px); max-height: none; }
  .legend { gap: 8px 14px; flex-wrap: wrap; }
  .lg-hint { display: none; }
  .search-row { flex-direction: column; }
  .search-row .btn { width: 100%; }
  .perks li { font-size: 13px; padding-top: 12px; padding-bottom: 12px; }
  .cards { grid-template-columns: 1fr; }
  .prov-name { font-size: 22px; }
  .prov > summary { gap: 12px; }
  .section-head { flex-direction: column; gap: 8px; }
  .data-note { margin-left: 0; }
}
@media (max-width: 420px) {
  .ag-foot { flex-direction: column; align-items: stretch; }
  .agent .btn { width: 100%; }
}
@media (max-width: 560px) {
  .proof { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* the header: the menu turns into a full-width panel behind a burger button */
@media (max-width: 900px) {
  .lp-nav .nav-links, .nav-join { display: none; }
  .nav-sp { display: none; }
  .lp-nav .theme-btn { margin-left: auto; }
  .menu { order: 3; }
  .menu-btn { width: 38px; height: 38px; justify-content: center; border: 1px solid var(--line-2); border-radius: 50%; padding: 0; color: var(--fg-2); }
  .menu-btn .menu-lbl, .menu-btn .ic-chev { display: none; }
  .menu-btn .ic-burger { display: block; width: 18px; height: 18px; }
  .menu[open] .menu-btn { border-color: var(--line-3); }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; padding-top: 18px; padding-bottom: 24px; }
  .menu-more { border-left: 0; padding-left: 0; }
  .menu-col li a { padding: 8px 0; font-size: 15px; }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 760px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
}
/* agent page: logo, theme, "Pesan sekarang" and the menu button share a phone-wide bar */
@media (max-width: 440px) {
  .agent-nav .nav-in { gap: 8px; }
  .agent-nav .brand img { height: 21px; }
}
@media (max-width: 380px) {
  .agent-nav .nav-long { display: none; }
}
@media (max-width: 380px) {
  /* logo, theme, Beli and the menu button must fit a 320 px screen */
  .lp-nav .nav-in { gap: 8px; }
  .lp-nav .brand img { height: 21px; }
  .lp-nav .theme-btn { margin-left: auto; }
}

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

/* Admin → Agen off (html.no-agents, js/gamecode.js): the site is for buyers only, no "Jadi Stockist" links */
.no-agents a[href="/join/"], .no-agents li:has(> a[href="/join/"]) { display: none !important; }

/* ---------- product index on the agent page (lp:shop, owner 30 Sep 2026) ---------- */
.shop { padding-top: clamp(56px, 8vw, 100px); }
.shop-head { max-width: 640px; margin-bottom: clamp(26px, 3.4vw, 40px); }
.shop-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -0.01em; margin: 10px 0 12px; color: var(--strong); }
.shop-head h2 em { color: var(--accent); }
.shop-sub { color: var(--muted); margin: 0; max-width: 520px; }
.shop-g + .shop-g { margin-top: clamp(34px, 4.4vw, 52px); }
.shop-g-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.shop-g-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.8vw, 32px); line-height: 1.1; margin: 0; color: var(--strong); }
.shop-g-head h3 span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-left: 8px; vertical-align: 0.35em; }
.shop-all { color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.shop-all:hover { color: var(--accent-2); }
.shop-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 4.3); /* the next card peeks in: the row scrolls */ gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.sp { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .2s; }
.sp:hover { border-color: var(--line-2); }
.sp[hidden] { display: none; }
.sp-img { display: block; aspect-ratio: 5 / 4; background: var(--surface-2); overflow: hidden; }
.sp-img picture, .sp-img img { display: block; width: 100%; height: 100%; }
.sp-img img { object-fit: cover; transition: transform .5s ease; }
.sp:hover .sp-img img { transform: scale(1.04); }
.sp-body { display: flex; flex-direction: column; gap: 5px; padding: 14px 14px 16px; flex: 1; }
.sp-name { font-size: 15.5px; font-weight: 600; line-height: 1.3; margin: 0; }
.sp-name a { color: var(--fg); text-decoration: none; }
.sp-name a:hover { color: var(--accent); }
.sp-tag { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0; flex: 1; }
.sp-price { font-family: var(--mono); font-size: 14px; color: var(--fg); margin: 6px 0 10px; }
.sp-add { align-self: stretch; justify-content: center; }
div.sp-img img { object-fit: cover; } /* cards of products added in Admin (no page yet) */
@media (prefers-reduced-motion: reduce) { .sp-img img { transition: none; } .sp:hover .sp-img img { transform: none; } }
@media (max-width: 980px) { .shop-row { grid-auto-columns: 38%; } }
@media (max-width: 620px) { .shop-row { grid-auto-columns: 64%; } }

/* ---------- checkout to Pusat: kecamatan, courier, payment, bill (js/order.js, owner 30 Sep 2026) ---------- */
fieldset.od-field { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.od-field legend { padding: 0; margin-bottom: 6px; }
select.od-input { appearance: auto; padding-right: 8px; }
.od-opts { display: grid; gap: 6px; }
.od-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--pop-bg); font-weight: 400; cursor: pointer; }
.od-opt:has(input:checked) { border-color: var(--accent); background: var(--tint-2); }
.od-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.od-opt b { display: block; font-weight: 600; color: var(--fg); font-size: 14px; }
.od-opt small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.od-opt em { font-style: normal; font-family: var(--mono); font-size: 13.5px; color: var(--fg); white-space: nowrap; }
.od-bill { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--tint); }
.od-bill .od-sum { margin: 0; }
.od-bill .od-total small { font-family: var(--sans); font-weight: 400; color: var(--muted); }
.od-more { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--accent); font: 600 13.5px var(--sans); cursor: pointer; }
.od-bill-note { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.od-city-list small { color: var(--muted); font-size: 12.5px; }
.od-area-none { margin: 0; padding: 10px 12px; }

/* ---------- twin-date promo (js/promo.js, owner 1 Oct 2026): home banner, prices, bars ---------- */
.promo-hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 120% at 85% 10%, var(--tint-2), transparent 65%), var(--bg-2); }
.ph-glow { position: absolute; z-index: -1; inset: auto -10% -60% 30%; height: 120%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 61, .22), transparent); filter: blur(10px); pointer-events: none; }
:root[data-theme="light"] .ph-glow { background: radial-gradient(closest-side, rgba(196, 64, 26, .13), transparent); }
.ph-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding-top: clamp(30px, 4.4vw, 60px); padding-bottom: clamp(30px, 4.4vw, 60px); }
.ph-twin { margin: 8px 0 0; font: italic 400 clamp(96px, 15vw, 188px)/.86 var(--serif); letter-spacing: -0.045em; white-space: nowrap;
  background: linear-gradient(100deg, var(--accent) 10%, var(--sand) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-title { margin: 14px 0 0; font: 400 clamp(30px, 3.8vw, 46px)/1.06 var(--serif); letter-spacing: -0.01em; color: var(--strong); }
.ph-sub { margin: 10px 0 0; color: var(--fg-2); font-size: 16px; line-height: 1.55; max-width: 520px; }
.ph-deal { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; max-width: 540px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.ph-deal b { color: var(--fg); font-weight: 600; }
.ph-pct { flex: none; padding: 8px 12px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font: 600 22px/1 var(--mono); letter-spacing: -0.02em; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ph-clock { justify-self: end; width: min(100%, 420px); padding: 22px 22px 18px; border: 1px solid var(--line-2); border-radius: calc(var(--r) + 6px); background: var(--card-bg); }
.ph-clock-l { margin: 0; font: 500 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ph-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.ph-units div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.ph-units b { font: 500 clamp(28px, 3.2vw, 38px)/1 var(--mono); color: var(--strong); font-variant-numeric: tabular-nums; }
.ph-units span { font-size: 11.5px; color: var(--muted); }
.ph-end { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.promo-hero.is-over .ph-units b { color: var(--muted); }
@media (max-width: 760px) {
  .ph-in { grid-template-columns: 1fr; }
  .ph-clock { justify-self: stretch; width: 100%; padding: 16px 14px 14px; }
  .ph-actions .btn { flex: 1 1 160px; }
  .ph-deal { align-items: flex-start; }
}
/* the promo's own products (scope items) under the banner */
.ph-items { padding-bottom: clamp(30px, 4vw, 52px); }
.ph-items[hidden] { display: none; }
.ph-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; margin-top: 14px; overflow-x: auto;
  overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.ph-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 0 14px; background: var(--card-bg);
  border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.ph-img { position: relative; aspect-ratio: 1; background: var(--surface-2); }
.ph-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-badge { position: absolute; top: 9px; left: 9px; padding: 5px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 12px/1 var(--mono); }
.ph-name { margin: 6px 12px 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.ph-name small { display: block; margin-top: 2px; font-weight: 500; font-size: 12px; color: var(--muted); }
.ph-price { margin: 0 12px; font: 400 13px/1.4 var(--mono); color: var(--muted); }
.ph-price b { color: var(--accent); font-weight: 600; font-size: 14.5px; }
:root[data-theme="light"] .ph-price b { color: var(--accent-2); }
.ph-price s { margin-left: 4px; font-size: 12px; }
.ph-add { margin: auto 12px 0; align-self: stretch; justify-content: center; }
@media (max-width: 980px) { .ph-row { grid-auto-columns: 30%; } }
@media (max-width: 760px) { .ph-row { grid-auto-columns: 46%; } }
/* the shop (js/cart.js renderShop): promo price, struck price, badge */
.sp-img { position: relative; }
.sp-badge { position: absolute; top: 10px; left: 10px; padding: 5px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 12px/1 var(--mono); letter-spacing: .01em; }
.sp-badge[hidden] { display: none; }
.sp-price .sp-now { color: var(--accent); font-weight: 600; }
:root[data-theme="light"] .sp-price .sp-now { color: var(--accent-2); }
.sp-price s { margin-left: 4px; color: var(--muted); font-size: 12.5px; }
.shop-promo { margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--sel); border-radius: var(--r-sm); background: var(--tint-2); color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.shop-promo b { color: var(--accent); font-weight: 600; }
:root[data-theme="light"] .shop-promo b { color: var(--accent-2); }
.as-promo { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--tint-2); color: var(--accent); font: 600 11.5px/1.3 var(--sans); vertical-align: 1px; }
:root[data-theme="light"] .as-promo { color: var(--accent-2); }
/* popup and bars */
.welcome-twin { font-style: italic; letter-spacing: -0.045em; }
.promo-prev { font-style: normal; padding: 1px 6px; border: 1px solid var(--line-3); border-radius: 999px; font-size: 11px; }
html.has-promo .announce { background: linear-gradient(90deg, var(--tint-2), var(--announce-bg) 30%, var(--announce-bg) 70%, var(--tint-2)); color: var(--fg-2); }

/* order form: promo prices (js/order.js linePrice, fromPrice) */
.od-line-price s { display: block; color: var(--muted); font-size: .9em; }
.od-pick small s, .od-sug small s { color: var(--muted); font-size: .9em; }
.od-promo-p { color: var(--accent); font-weight: 600; }
:root[data-theme="light"] .od-promo-p { color: var(--accent-2); }

/* Simpan keranjang popup (js/cart-save.js) */
.cs-in { text-align: left; }
.cs-in .welcome-num, .cs-in .kicker, .cs-in h2 { text-align: center; }
.cs-field { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--fg-2); }
.cs-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); cursor: pointer; }
.cs-consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.cs-consent a { color: inherit; }
.cs-err { min-height: 1.3em; margin: 10px 0 0; color: var(--accent-2, var(--accent)); font-size: 13px; }

/* "LIVE sekarang" bar on every shop page while Lume Live is on air (js/live-bar.js) */
.live-bar a { display: flex; align-items: center; justify-content: center; gap: 8px 10px; flex-wrap: wrap; padding: 8px var(--gut); background: #e5322d; color: #fff;
  font-size: 13.5px; line-height: 1.35; text-decoration: none; text-align: center; }
.live-bar a:hover .live-bar-go { text-decoration: underline; }
.live-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: live-bar-blink 1.2s ease-in-out infinite; }
@keyframes live-bar-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-bar-dot { animation: none; } }
.live-bar b { font-weight: 700; letter-spacing: .04em; }
.live-bar-t { opacity: .92; }
.live-bar-go { font-weight: 600; }
@media (max-width: 560px) { .live-bar-t { display: none; } }

/* the order form inside /live/ (js/order.js mountInline): in the page, not a pop-up */
.od.od-inline { position: static; inset: auto; display: block; width: 100%; max-width: none; max-height: none; margin: 0; overflow: visible; animation: none; z-index: auto; }
.od.od-inline .od-in { padding: 20px 18px 18px; }
.od.od-inline h2 { font-size: 26px; }

/* floating Lume Live player on every shop page while on air (js/live-bar.js); × leaves the bar above instead */
.live-mini { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; width: min(340px, calc(100vw - 32px));
  border-radius: 14px; overflow: hidden; background: #0e0b09; color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); animation: live-mini-in .35s ease-out; }
@keyframes live-mini-in { from { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-mini { animation: none; } }
.live-mini-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; background: #e5322d; }
.live-mini-t { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: #fff; text-decoration: none; font-size: 13px; }
.live-mini-t b { letter-spacing: .06em; }
.live-mini-t span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.live-mini-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .18); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.live-mini-x:hover { background: rgba(0, 0, 0, .32); }
.live-mini-v { position: relative; aspect-ratio: 16 / 9; background: #000; }
.live-mini-v iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-mini-go { position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 12.5px; font-weight: 600; text-decoration: none; }
.live-mini-go:hover { background: #e5322d; }
@media (max-width: 640px) { .live-mini { width: 62vw; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); } .live-mini-go { font-size: 11.5px; padding: 5px 8px; } }