/* ============================================================
   mosu.coffee v3 · gaya "peluncuran produk" (terinspirasi oryzo.ai)
   Tema mengikuti perangkat (prefers-color-scheme), keduanya dalam palet resmi Mosu:
   terang = latar krem #FBF7EB, tinta hitam, aksen hijau tua #028340
   gelap  = latar hitam, tinta krem, aksen lime #B1E57A
   Hijau #1BB454 (clover), forest #164A3E, lime #B1E57A sebagai bidang & tombol di kedua tema.
   Dimuat SETELAH style.css & polish.css; hanya menimpa yang perlu.
   ============================================================ */
:root.v3 {
  /* ---- tema terang (bawaan) ---- */
  --paper: #FBF7EB; --alt: #FFFFFF; --ink: #0B0F0D; --fg: #0B0F0D; --muted: #4E5C57; --line: #D8D1BE;
  --green: #1BB454; --green-ink: #027a3c;   /* sedikit lebih gelap dari #028340: kontras teks >= 4.5 (WCAG AA) juga di kartu krem #F2EDDD */ --forest: #164A3E; --forest-2: #1E5A4C;
  --on-forest: #FBF7EB; --on-forest-mute: #D9E4DC; --sun: #B1E57A; --on-sun: #000000;
  --accent: #028340;        /* teks berwarna (judul kedua, status buka, tautan) */
  --focus: #028340; --err: #B3261E;
  --step: #F2EDDD;          /* satu langkah nada dari latar */
  --step-2: #EAE3CE;
  --step-3: #DED5BB;
  --cream: #FBF7EB;
  --intro-bg: radial-gradient(120% 90% at 0% 100%, rgba(27, 180, 84, .22), transparent 62%), radial-gradient(70% 60% at 100% 0%, rgba(177, 229, 122, .45), transparent 60%), #FBF7EB;
  --bp-guide: rgba(22, 74, 62, .3); --bp-inner: rgba(2, 131, 64, .5); --bp-handle: #028340;
  --scan-line: rgba(22, 74, 62, .12); --lens: rgba(2, 131, 64, .8); --lens-glow: rgba(27, 180, 84, .3);
  --wrap: 1320px;
  --sec: clamp(88px, 10vw, 160px);
  --t-display: clamp(36px, 7.4vw, 112px);
  --t-h2: clamp(34px, 5.4vw, 80px);
  --t-big: clamp(56px, 10vw, 152px);
  --t-statement: clamp(22px, 2.5vw, 34px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --expo: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root.v3 {
    /* ---- tema gelap ---- */
    --paper: #000000; --alt: #0B110E; --ink: #FBF7EB; --fg: #FBF7EB; --muted: #C7C7C7; --line: #24332C;
    --green-ink: #1BB454; --accent: #B1E57A; --focus: #B1E57A; --err: #FF8A73;
    --step: #0F1613; --step-2: #17211C; --step-3: #26342D;
    --intro-bg: radial-gradient(120% 90% at 0% 100%, rgba(22, 74, 62, .9), transparent 62%), radial-gradient(70% 60% at 100% 0%, rgba(27, 180, 84, .12), transparent 60%), #040706;
    --bp-guide: rgba(177, 229, 122, .3); --bp-inner: rgba(177, 229, 122, .5); --bp-handle: #B1E57A;
    --scan-line: rgba(177, 229, 122, .1); --lens: rgba(177, 229, 122, .7); --lens-glow: rgba(177, 229, 122, .28);
    color-scheme: dark;
  }
}
.v3 body, body.v3 { background: var(--paper); color: var(--ink); font-size: 17px; }
.v3 .wrap { max-width: var(--wrap); padding-left: max(20px, var(--gut-l)); padding-right: max(20px, var(--gut-r)); }
.v3 ::selection { background: var(--sun); color: #000; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tombol & tautan ---------- */
.v3 .btn { min-height: 54px; padding: 0 28px; border-radius: 999px; font: 700 16px/1 var(--f-body); }
.v3 .btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.v3 .btn-sun { background: var(--sun); color: #000; }
.v3 .btn-sun:hover { background: #c6f093; }
.v3 .btn-sun:active { transform: translateY(0) scale(.98); }
.v3 .btn-line, .btn-line-ink { background: transparent; border: 2px solid var(--fg); color: var(--fg); }
.v3 .btn-line:hover, .btn-line-ink:hover { background: var(--fg); color: var(--paper); }
.x-link { display: inline-block; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 6px; text-decoration-color: var(--accent); transition: text-underline-offset .2s var(--ease), color .2s; }
.x-link:hover { text-underline-offset: 9px; color: var(--accent); }

/* ---------- Navigasi: polos, menyatu dengan latar ---------- */
.v3 .nav { background: transparent; border-bottom: 0; transition: background-color .3s ease; }
.v3 .nav.is-scrolled, .v3 .pg-menu .nav, .v3 body:not(.pg-home) .nav { background: var(--paper); }
.v3 .nav-in { min-height: 72px; max-width: var(--wrap); }
.v3 .wordmark { background: var(--green); height: 30px; }
.v3 .nav-links a { color: var(--fg); font-weight: 600; }
.v3 .nav-links a:hover, .v3 .nav-links a.is-on { color: var(--accent); }
.v3 .nav-order { background: var(--sun); color: #000; padding: 11px 22px; transition: transform .18s var(--ease); }
.v3 .nav-order:hover { transform: translateY(-2px); }
.v3 .nav-toggle span { background: var(--fg); }
.v3 body::before { background: var(--paper); }
.v3 body { position: relative; }
.v3 .demo-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 60; }

/* ---------- 1 · HERO ---------- */   /* bayangan botol yang "berdiri" */ /* taste-skill-ignore: botol berdiri di atas objek 3D */

/* ---------- Section umum ---------- */
.x-sec { padding-block: var(--sec); }
.x-sec h2 { font: 800 var(--t-h2)/.95 var(--f-display); letter-spacing: -0.035em; max-width: 16ch; }
.x-body { font-size: 18px; line-height: 1.6; max-width: 34em; margin-top: 24px; color: var(--fg); }
.x-statement { font: 500 var(--t-statement)/1.3 var(--f-body); letter-spacing: -0.01em; max-width: 26em; margin-top: 36px; }
.x-statement sup { font-size: .55em; color: var(--green); }
.x-foot { margin-top: 20px; font-size: 16px; }

/* ---------- 2 · INTRO / anatomi botol: bidang lime ---------- */
.x-anatomy { position: relative; margin: 0; min-height: clamp(560px, 52vw, 720px); }
.x-anatomy-bottle { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); aspect-ratio: 288 / 900; }
.x-notes li { width: calc(50% - 130px); }
.x-anatomy-bottle img, .x-anatomy-bottle picture { width: 100%; height: 100%; object-fit: contain; }
.x-notes li { position: absolute; display: grid; gap: 4px; max-width: 15em; font-size: 16px; line-height: 1.45; }
.x-notes strong { font: 700 22px/1.1 var(--f-display); letter-spacing: -0.02em; }
.x-notes li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #000; margin-bottom: 6px; }
.n-cap { left: 0; top: 2%; }
.n-label { right: 0; top: 40%; }
.n-vol { left: 0; top: 56%; }
.n-exp { right: 0; bottom: 4%; }

/* ---------- 3 · MODEL KESEGARAN ---------- */
.x-params { margin-top: 40px; border-collapse: collapse; font-size: 16px; min-width: min(100%, 380px); }
.x-params th, .x-params td { text-align: left; padding: 12px 0; border-top: 1px solid var(--line); }
.x-params th { font-weight: 600; color: var(--muted); padding-right: 32px; }
.x-meter { background: var(--step-2); padding: clamp(24px, 4vw, 48px); border-radius: 28px; display: grid; gap: 22px; --tone: var(--sun); }
.x-meter[data-state="last"] { --tone: #F2A33A; }
.x-meter[data-state="out"] { --tone: #FF7A5C; }
.x-meter input[type="range"] { width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.x-meter input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: #2B3A33; }
.x-meter input[type="range"]::-moz-range-track { height: 10px; border-radius: 99px; background: #2B3A33; }
.x-meter input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: var(--tone); border: 0; }
.x-meter input[type="range"]::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--tone); border: 0; }

/* ---------- 4 · UPTIME: bidang forest ---------- */
.x-up { display: grid; gap: 10px; align-content: start; }
.x-up h3 { font: 700 24px/1.1 var(--f-display); letter-spacing: -0.02em; }
.x-up.is-open .x-up-state { color: var(--accent); font-weight: 700; }
.x-up.is-closed .x-up-state { color: #F2C57A; font-weight: 700; }
.x-up-photo { margin: clamp(56px, 7vw, 96px) 0 0; }
.x-up-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ---------- 5 · PILIH MODEL ---------- */
.x-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 16px; }
.x-table th[scope="col"] { padding: 0 12px 28px; vertical-align: bottom; text-align: left; width: 28%; }
.x-table tbody th { text-align: left; font-weight: 600; color: var(--muted); padding: 18px 12px 18px 0; white-space: nowrap; vertical-align: top; }
.x-table tbody td { padding: 18px 12px; vertical-align: top; border-top: 1px solid var(--line); }
.x-table tbody th { border-top: 1px solid var(--line); }
.x-table tbody tr:last-child td, .x-table tbody tr:last-child th { border-top: 0; padding-top: 28px; }
.x-table td strong { font: 700 20px/1.2 var(--f-display); }

/* ---------- 6 · BUKTI: bidang krem ---------- */
.x-scores { display: grid; gap: 28px; margin: 48px 0 40px; }
.x-scores li { display: flex; align-items: center; gap: 22px; font-size: 16px; }
.x-score { font: 800 clamp(64px, 7vw, 104px)/.9 var(--f-display); letter-spacing: -0.05em; color: #028340; }
.x-quotes { display: grid; gap: 40px; }
.x-quotes blockquote { margin: 0; font: 500 clamp(20px, 2vw, 26px)/1.4 var(--f-body); letter-spacing: -0.01em; }
.x-by { margin-top: 12px; font-size: 15px; font-weight: 600; color: #304840; }

/* ---------- 7 · LAPORAN TEKNIS ---------- */
.x-cite { background: var(--step-2); border-radius: 24px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 20px; justify-items: start; }
.x-cite pre { margin: 0; max-width: 100%; overflow-x: auto; font: 500 15px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--fg); }

/* ---------- Mosu Club (beranda): bidang lime ---------- */
.v3 .member-band-home { background: var(--sun); color: #000; padding-block: var(--sec); }
.v3 .member-band-home h2 { font: 800 var(--t-h2)/.95 var(--f-display); letter-spacing: -0.035em; color: #000; }
.v3 .member-band-home .member-lede, .v3 .member-band-home .perks li { color: #000; }
.v3 .member-band-home .btn-sun { background: #000; color: var(--cream); }
.v3 .member-band-home .btn-sun:hover { background: #164A3E; }
.v3 .member-band-home .btn-line { border-color: #000; color: #000; }
.v3 .member-band-home .btn-line:hover { background: #000; color: var(--cream); }
.v3 .member-band-home figcaption, .v3 .member-band-home .cta-hi { color: #000; }
.v3 .member-band-home :focus-visible { outline-color: #000; }
.v3 .member-band-home .lcard, .v3 .member-band-home .lc-tier { box-shadow: none; } /* taste-skill-ignore: menghapus bayangan */
.v3 .member-band-home figcaption { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; }

/* ---------- Halaman lain: judul besar, tanpa bayangan/garis tipis ---------- */
.v3 .section { padding-block: clamp(120px, 12vw, 180px) var(--sec); }
.v3 .section-alt { background: var(--paper); }
.v3 .head h2 { font: 800 clamp(48px, 9vw, 136px)/.9 var(--f-display); letter-spacing: -0.045em; }
.v3 .head-note { color: var(--fg); font-size: 18px; }
.v3 .shot { box-shadow: none; border-radius: 0; } /* taste-skill-ignore: menghapus bayangan */
.v3 .shot:hover, .v3 .shot:focus-visible { box-shadow: none; } /* taste-skill-ignore: menghapus bayangan */
.v3 .menu-tabs { border-bottom: 0; background: var(--step); border-radius: 999px; padding: 6px; }
.v3 .mtab { border-radius: 999px; color: var(--fg); }
.v3 .mtab.is-on { background: var(--sun); color: #000; }
.v3 .mtab.is-on span { color: #000; }
.v3 .dish-desc, .v3 .sig-desc { color: var(--muted); }
.v3 .outlet { border-color: var(--line); }
.v3 .btn-green { background: var(--sun); color: #000; }

/* ---------- Footer ---------- */
.x-footer { background: var(--paper); padding-block: clamp(96px, 10vw, 160px); }
.x-foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 48px; }
.x-foot-title { font: 800 clamp(34px, 4vw, 56px)/.95 var(--f-display); letter-spacing: -0.035em; }
.x-foot-outlets { display: grid; gap: 22px; }
.x-foot-outlets li { display: grid; gap: 2px; font-size: 16px; }
.x-foot-outlets strong { font: 700 20px/1.2 var(--f-display); }
.x-foot-outlets a, .x-foot-links a { color: var(--fg); text-decoration: none; font-weight: 600; }
.x-foot-outlets a { color: var(--accent); }
.x-foot-links { display: grid; gap: 10px; font-size: 16px; }
.x-foot-links a:hover, .x-foot-outlets a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Animasi masuk (hanya bila skrip jalan) ---------- */
.xr-on .xr:not(.xr-in) { opacity: 0; transform: translateY(28px); }
.xr-on .xr { transition: opacity .6s var(--expo) var(--d, 0ms), transform .6s var(--expo) var(--d, 0ms); }
/* Hero: tiba sekali saat halaman dibuka, selesai < 1 detik */
@keyframes x-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes x-rise { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .xr-on .xr:not(.xr-in) { opacity: 1; transform: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .x-foot-grid { grid-template-columns: 1fr 1fr; }
}
/* ---------- Ponsel: komposisi sendiri ---------- */
@media (max-width: 640px) {
  .v3 body { font-size: 16px; }
  .x-anatomy { min-height: 0; display: grid; gap: 28px; }
  .x-anatomy-bottle { position: relative; left: auto; transform: none; height: 460px; margin: 0 auto; }
  .x-notes li { width: auto; }
  .x-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .x-notes li { position: static; max-width: none; }
  .x-notes strong { font-size: 19px; }
  .x-up-photo img { aspect-ratio: 4 / 3; }
  .x-table, .x-table thead, .x-table tbody { display: block; min-width: 0; }
  .x-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
  .x-table th[scope="col"] { width: auto; padding: 0 0 20px; }
  .x-table tbody th { grid-column: 1 / -1; padding: 16px 0 6px; border-top: 1px solid var(--line); }
  .x-table tbody td { border-top: 0; padding: 0 0 12px; font-size: 15px; }
  .x-table td strong { font-size: 17px; }
  .x-table .btn-sm { padding: 0 10px; width: 100%; font-size: 13px; min-height: 44px; }
  .x-foot-grid { grid-template-columns: 1fr; }
  .x-body { font-size: 17px; }
  .x-cite pre { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
}

/* Judul halaman: satu warna (tanpa teks gradasi dari polish.css) */
.v3 .head h2 { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: var(--fg); }

/* ============================================================
   v4 · BERANDA SATU HALAMAN (clover menetap, section = menu atas)
   ============================================================ */
.pg-home main { position: relative; z-index: 1; }
.pg-home .x-footer { position: relative; z-index: 2; }
.w-world { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0; pointer-events: none; opacity: calc(1 - var(--dim, 0) * .72); }
.w-canvas { width: 100%; height: 100%; display: block; }
.w-dish { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; transition: opacity .3s; }
.w-dish-item { position: absolute; left: 0; bottom: 0; height: var(--h, 300px); aspect-ratio: 1; transform: translateX(-50%) translateY(10%) scale(.94); opacity: 0; transform-origin: 50% 100%;
  transition: opacity .45s var(--ease), transform .6s var(--expo); }
.w-dish-item.is-bottle { aspect-ratio: 1 / 1.5; height: min(calc(var(--h, 300px) * 1.4), calc((var(--ay, 600px) - 104px) / .94)); }   /* puncak botol selalu di bawah navigasi */
.w-dish-item:not(.is-on) { visibility: hidden; transition: opacity .45s var(--ease), transform .6s var(--expo), visibility 0s linear .45s; }
.w-dish-item.is-on { opacity: 1; transform: translateX(-50%) translateY(6%); }
.w-dish-item picture, .w-dish-item img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.w-dish-item img { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); } /* taste-skill-ignore: produk berdiri di atas tatakan 3D */
.no-3d .w-dish { display: none; }

.w-sec { position: relative; }
.w-sec h2 { font: 800 var(--t-h2)/.95 var(--f-display); letter-spacing: -0.035em; }
.w-sub { font-size: 18px; line-height: 1.6; max-width: 32em; margin-top: 20px; }

/* Hero */
.w-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

/* Discover: meja putar, section ditahan */
.w-discover { height: calc(var(--n) * 45vh + 100vh); }
.w-pin { position: sticky; top: 72px; height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; overflow: hidden; }
.w-disc-in { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
.w-disc-copy, .w-disc-detail { grid-column: 1; }
.w-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; max-width: 560px; }
.w-chap { font: 600 16px/1 var(--f-body); color: var(--fg); background: var(--step-2); border: 0; border-radius: 999px; padding: 12px 16px; cursor: pointer;
  transition: background-color .2s, color .2s, transform .15s; }
.w-chap span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.w-chap:hover { background: var(--step-3); }
.w-chap:active { transform: scale(.97); }
.w-chap.is-on { background: var(--sun); color: #000; }
.w-chap.is-on span { color: #000; }
.w-disc-detail { margin-top: 40px; min-height: 230px; }
.w-dish-text { display: grid; gap: 10px; justify-items: start; }
.w-dish-text.is-on { animation: x-arrive .5s var(--expo) both; }
.w-dish-cat { font-size: 16px; font-weight: 700; color: var(--accent); }
.w-dish-name { font: 800 clamp(36px, 4.4vw, 64px)/1 var(--f-display); letter-spacing: -0.035em; }
.w-dish-desc { font-size: 18px; max-width: 28em; }
.w-dish-price { font: 700 24px/1 var(--f-display); }

/* Experience: galeri bergeser */

/* Find Us & About: clover di sisi kosong */
.w-find, .w-say, .w-about { padding-block: var(--sec); }
.w-split-body { max-width: 50%; }
.w-split-r .w-split-body { margin-left: auto; }
.w-outlets { display: grid; gap: 40px; margin-top: 48px; }
.w-outlets li { display: grid; grid-template-columns: clamp(150px, 13vw, 200px) minmax(0, 1fr); gap: 24px; align-items: start; }
.w-out-num { font: 800 clamp(44px, 4.6vw, 72px)/1 var(--f-display); letter-spacing: -0.04em; }
.is-soon .w-out-num { color: var(--accent); font-size: clamp(30px, 3vw, 44px); padding-top: 8px; }
.w-out-info { display: grid; gap: 6px; font-size: 16px; justify-items: start; }
.w-out-info h3 { font: 700 26px/1.1 var(--f-display); letter-spacing: -0.02em; }
.w-out-addr { color: var(--muted); }
.is-open .x-up-state { color: var(--accent); font-weight: 700; }
.is-closed .x-up-state { color: #F2C57A; font-weight: 700; }

.w-say-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; margin-top: 56px; align-items: start; }
.w-say .x-scores { margin: 0; }
.w-say .x-score { color: var(--accent); }
.w-say .x-by { color: var(--muted); }
.w-say .x-quotes blockquote { font-size: clamp(19px, 1.8vw, 24px); }

.w-socials { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 36px 0; }
.w-socials a { display: flex; gap: 14px; align-items: baseline; text-decoration: none; padding: 10px 0; color: var(--fg); }
.w-socials strong { font: 700 clamp(24px, 2.4vw, 34px)/1 var(--f-display); letter-spacing: -0.02em; transition: color .2s; }
.w-socials span { color: var(--muted); font-size: 16px; }
.w-socials a:hover strong { color: var(--accent); }
.pg-home .member-band-home { position: relative; z-index: 1; }
@media (max-width: 1000px) {
  .w-split-body { max-width: 62%; }
  .w-say-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 759px) {
  .w-discover { height: calc(var(--n) * 45vh + 100vh); }
  .w-pin { align-items: end; padding-bottom: 28px; }
  .w-disc-in { grid-template-columns: 1fr; }
  .w-disc-copy h2 { font-size: 40px; }
  .w-disc-copy .w-sub { display: none; }
  .w-chapters { margin-top: 14px; gap: 6px; }
  .w-chap { font-size: 14px; padding: 10px 12px; }
  .w-disc-detail { margin-top: 18px; min-height: 0; }
  .w-dish-name { font-size: 34px; }
  .w-dish-desc { font-size: 16px; }
  .w-split-body { max-width: none; }
  .w-outlets li { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .w-out-num { font-size: 34px; }
  .w-outlets li.is-soon { grid-template-columns: 1fr; }
  .is-soon .w-out-num { display: none; }
  .w-out-info h3 { font-size: 22px; }
}

/* ============================================================
   PEMBUKA · cetak biru clover + lensa pemindai produk (gaya oryzo.ai, permintaan klien)
   ============================================================ */
@font-face { font-family: "Caveat"; src: url("fonts/Caveat-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
.w-world { opacity: calc(var(--op, 1) * (1 - var(--dim, 0) * .72)); }
.w-intro { position: relative; z-index: 1; height: 220vh; --ip: 0; }
.w-intro-stage { position: sticky; top: 72px; height: calc(100vh - 72px); overflow: hidden; cursor: crosshair; }
/* latar pembuka di belakang clover 3D, memudar saat digulir */
.w-intro-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; pointer-events: none; opacity: clamp(0, calc(1 - var(--ip, 0) * 1.6), 1);
  background: var(--intro-bg); }

/* sketsa samar di latar */
.w-sketch { position: absolute; width: 24vmin; color: var(--green); opacity: calc(.22 * (1 - var(--ip) * 2)); }
.w-sketch use { stroke-width: 2.5; }
.w-sketch-a { left: 16%; top: 22%; transform: perspective(700px) rotateX(64deg) rotateZ(-24deg) translateY(calc(var(--ip) * -60px)); }
.w-sketch-b { right: 15%; top: 58%; transform: perspective(700px) rotateX(70deg) rotateZ(28deg) translateY(calc(var(--ip) * 60px)); }
.w-sketch-c { left: 30%; top: 62%; width: 14vmin; transform: perspective(700px) rotateY(70deg); }

/* cetak biru di tengah */
.w-bp { position: absolute; left: 50%; top: 50%; width: min(58vh, 62vw); aspect-ratio: 1; color: var(--green);
  transform: translate(-50%, -50%) scale(calc(1 + var(--ip) * .12)); opacity: clamp(0, calc(1 - var(--ip) * 2.4), 1); }
.w-bp-svg { width: 100%; height: 100%; overflow: visible; }
.bp-guides line { stroke: var(--bp-guide); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.bp-shape > * { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-dasharray: 7 7; vector-effect: non-scaling-stroke; }
.bp-shape .bp-inner { stroke: var(--bp-inner); stroke-dasharray: 2 6; }
.bp-handles rect { fill: var(--bp-handle); }
.bp-handles circle { fill: var(--green); }
.bp-note { position: absolute; font: 600 clamp(17px, 1.7vw, 26px)/1.15 "Caveat", "Segoe Print", cursive; color: var(--accent); white-space: nowrap; transform: rotate(-5deg); }
.bp-note.n1 { right: 104%; top: 12%; }
.bp-note.n2 { left: 102%; top: 30%; transform: rotate(-3deg); }
.bp-note.n3 { left: 96%; top: 74%; transform: rotate(-7deg); }
.bp-note.n4 { right: 98%; top: 80%; transform: rotate(4deg); }
/* gambar muncul seperti digambar */
@keyframes bp-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bp-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.bp-guides { animation: bp-in 1s var(--expo) both; }
.bp-shape { animation: bp-in 1.1s var(--expo) .15s both; transform-origin: 250px 250px; }
.bp-handles { animation: bp-in .8s var(--expo) .5s both; transform-origin: 250px 250px; }
.bp-note { animation: bp-write .9s var(--ease) both; }
.bp-note.n1 { animation-delay: .7s; } .bp-note.n2 { animation-delay: .9s; } .bp-note.n3 { animation-delay: 1.1s; } .bp-note.n4 { animation-delay: 1.3s; }

/* lensa pemindai: produk Mosu tersembunyi di latar, hanya terlihat di dalam lensa */
.w-scan { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; --mx: 30%; --my: 40%; --r: clamp(110px, 13vw, 190px);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 72%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 72%, transparent 100%);
  opacity: clamp(0, calc(1 - var(--ip) * 4), 1); }
.w-scan::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scan-line) 0, var(--scan-line) 1px, transparent 1px, transparent 4px); }
.w-scan-item { position: absolute; width: var(--w); margin: 0; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; }
.w-scan-item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  filter: grayscale(1) sepia(1) hue-rotate(58deg) saturate(2.4) brightness(.92) contrast(1.15); }
.w-scan-item.is-bottle img { aspect-ratio: 288 / 900; height: calc(var(--w) * 1.5); width: auto; }
.w-scan-item figcaption { font: 600 clamp(15px, 1.4vw, 20px)/1 "Caveat", cursive; color: var(--accent); white-space: nowrap; }
.w-lens { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); aspect-ratio: 1; --r: clamp(110px, 13vw, 190px);
  transform: translate(calc(var(--lx, 30vw) - 50%), calc(var(--ly, 40vh) - 50%)); pointer-events: none; border-radius: 50%;
  border: 1.5px dashed var(--lens); opacity: clamp(0, calc(1 - var(--ip) * 4), 1); overflow: hidden; }
.w-lens::before, .w-lens::after { content: ""; position: absolute; background: var(--bp-handle); }
.w-lens::before { left: 50%; top: -1px; width: 2px; height: 14px; transform: translateX(-50%); box-shadow: 0 calc(var(--r) * 2 - 12px) 0 var(--bp-handle); } /* taste-skill-ignore: tanda bidik lensa */
.w-lens::after { top: 50%; left: -1px; height: 2px; width: 14px; transform: translateY(-50%); box-shadow: calc(var(--r) * 2 - 12px) 0 0 var(--bp-handle); } /* taste-skill-ignore: tanda bidik lensa */
.w-lens i { position: absolute; left: 0; right: 0; height: 30%; top: -30%;
  background: linear-gradient(180deg, transparent, var(--lens-glow) 85%, var(--lens)); animation: lens-scan 1.8s linear infinite; }
@keyframes lens-scan { to { transform: translateY(433%); } }

.w-intro-hint { position: absolute; left: max(20px, var(--gut-l)); bottom: 28px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted);
  opacity: clamp(0, calc(1 - var(--ip) * 5), 1); }
.w-intro-hint span { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 50% { transform: translateY(6px); } }

/* hero muncul setelah pembuka */

@media (prefers-reduced-motion: reduce) {
  .bp-guides, .bp-shape, .bp-handles, .bp-note, .w-lens i, .w-intro-hint span { animation: none; }
}
@media (max-width: 759px) {
  .w-intro { height: 190vh; }
  .w-bp { width: min(78vw, 52vh); top: 46%; }
  .bp-note { font-size: 16px; }
  .bp-note.n1 { right: auto; left: 0; top: -14%; }
  .bp-note.n2 { left: auto; right: 0; top: -14%; }
  .bp-note.n3 { left: auto; right: 0; top: 104%; }
  .bp-note.n4 { right: auto; left: 0; top: 104%; }
  .w-sketch-c { display: none; }
  .w-scan { --r: 96px; }
  .w-lens { --r: 96px; }
}

/* ============================================================
   Fasilitas utama (Experience) & Mosu Club (ajakan bergabung)
   ============================================================ */ /* taste-skill-ignore: pemisah antar fasilitas di dalam pita */

.v3 .member-band-home { background: var(--sun); color: #000; padding-block: var(--sec); overflow: hidden; }
.club { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 64px; align-items: center; }
.club-copy h2 { font: 800 clamp(52px, 7.4vw, 116px)/.9 var(--f-display); letter-spacing: -0.045em; color: #000; }
.club-lede { font: 500 clamp(19px, 1.8vw, 25px)/1.4 var(--f-body); margin-top: 28px; max-width: 26em; }
.club .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.club-join { background: #000; color: var(--cream); min-height: 64px; padding: 0 34px; font-size: 18px; }
.club-join:hover { background: #164A3E; }
.club-join:active { transform: scale(.98); }
.v3 .member-band-home .club-login { color: #000; text-decoration-color: #000; }
.v3 .member-band-home .club-login:hover { color: #164A3E; }
.club .cta-hi { font-weight: 700; margin-top: 24px; }
.club-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.club-perks li { display: grid; gap: 6px; align-content: start; }
.club-perks strong { font: 800 clamp(20px, 1.8vw, 26px)/1.05 var(--f-display); letter-spacing: -0.02em; }
.club-perks span { font-size: 15px; color: #164A3E; font-weight: 500; }

.club-visual { position: relative; display: grid; gap: 28px; justify-items: center; }
.club-stamps { width: min(100%, 400px); background: #164A3E; color: var(--cream); border-radius: 28px; padding: 24px 26px; display: grid; gap: 16px; justify-self: center; position: relative; margin-top: 12px; }
.club-stamps-title { font: 700 20px/1.1 var(--f-display); }
.club-dots { display: flex; gap: 16px; }
.club-dots span { width: 84px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.club-dots .is-on { background: var(--sun); }
.club-dots .is-on svg { width: 62%; height: auto; fill: #164A3E; }
.club-dots .is-free { border: 3px dashed var(--sun); color: var(--sun); font: 800 16px/1 var(--f-display); animation: club-pulse 1.8s var(--ease) infinite; }
@keyframes club-pulse { 50% { transform: scale(1.08); } }
.club-stamps-note { font-size: 15px; color: #D9E4DC; }
.club-visual .tier-stack { width: min(100%, 460px); }
.club-visual .ts figcaption { display: none; }
@media (prefers-reduced-motion: reduce) { .club-dots .is-free { animation: none; } }
@media (max-width: 1000px) {
  .club { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .club-perks { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  .club-join { width: 100%; }
  .club-dots span { width: 68px; }
}

/* ============================================================
   Nav transparan di semua perangkat + tinggi layar yang benar di ponsel (svh)
   ============================================================ */
.v3 .nav, .v3 .nav.is-scrolled, .v3 .pg-menu .nav, .v3 body:not(.pg-home) .nav {
  position: fixed; top: 0; left: 0; right: 0; background: transparent; border: 0; box-shadow: none; }
.v3 body::before { background: transparent; }
.v3 main { padding-top: 72px; }                 /* halaman lain: konten mulai di bawah nav */
.v3 .pg-home main { padding-top: 0; }           /* beranda: pembuka penuh layar, nav melayang di atasnya */
.w-intro-stage { top: 0; height: 100vh; height: 100svh; }
.w-pin { top: 0; height: 100vh; height: 100svh; padding-top: 72px; box-sizing: border-box; }
.w-intro { height: 220vh; height: 220svh; }

@media (max-width: 759px) {
  .w-intro { height: 190vh; height: 190svh; }
  .w-bp { top: 50%; width: min(80vw, 46svh); }

  /* Discover: daftar menu di kiri, clover + minuman di kanan */
  .w-pin { align-items: start; padding-top: 84px; padding-bottom: 20px; }
  .w-disc-in { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); column-gap: 12px; }
  .w-disc-copy { grid-column: 1; }
  .w-disc-copy h2 { font-size: 38px; }
  .w-chapters { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 6px; margin-top: 14px; }
  .w-chap { font-size: 13.5px; padding: 9px 12px; }
  .w-disc-detail { grid-column: 1 / -1; margin-top: 18px; }
  .w-dish-name { font-size: 30px; }
  .w-dish-desc { font-size: 15px; }
  .w-chap { white-space: nowrap; font-size: 13px; }
  /* Experience di ponsel tidak ditahan: tinggi mengikuti isi */
}

/* ============================================================
   PONSEL (≤ 759px): nav menyatu dengan latar, Discover satu kolom, fasilitas berupa kartu
   ============================================================ */

/* 1 · Nav (semua perangkat): tanpa kaca/blur/bayangan; warnanya sama dengan latar situs. Di layar pembuka disembunyikan. */
.v3 .nav, .v3 .nav.is-scrolled, .v3 .pg-menu .nav, .v3 body:not(.pg-home) .nav {
  background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .4s var(--expo), opacity .25s ease; }
.v3 .nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none;
  background: linear-gradient(var(--paper), transparent); }   /* konten memudar masuk di bawah nav, tanpa garis tepi */
.v3 .nav.nav-intro { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.v3 .nav.nav-intro::after { display: none; }
.w-intro-stage { top: 0; }

@media (max-width: 759px) {

  /* 3 · Discover: judul → strip kategori (geser) → produk di tengah → teks produk di bawah */
  .w-pin { align-items: stretch; padding: 84px 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
  .w-disc-in { height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 0; }
  .w-disc-copy, .w-disc-detail { grid-column: 1; min-width: 0; }
  .w-disc-copy h2 { font-size: 34px; }
  .w-chapters { position: relative; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; max-width: none;
    margin: 14px -20px 0; padding: 2px 20px 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); }
  .w-chapters::-webkit-scrollbar { display: none; }
  .w-chapters li { flex: none; }
  .w-chap { font-size: 14px; padding: 11px 15px; white-space: nowrap; }
  .w-disc-detail { align-self: end; margin: 0; min-height: 0; text-align: center; }
  .w-dish-text { justify-items: center; gap: 8px; }
  .w-dish-cat { font-size: 15px; }
  .w-dish-name { font-size: clamp(28px, 8.4vw, 36px); }
  .w-dish-desc { font-size: 15px; line-height: 1.5; max-width: 22em; margin-inline: auto; }
  .w-dish-text .x-link { margin-top: 6px; font-size: 16px; }
  .w-dish-item.is-bottle { height: calc(var(--h, 300px) * 1.02); }   /* botol tinggi: jangan menabrak strip kategori */

  /* 2 · Fasilitas: kartu terpisah (2 kolom), tinggi sebaris sama, kartu terakhir selebar layar */   /* tanpa deskripsi: judul di tengah kartu */
}

/* ============================================================
   Layar pembuka di ponsel/tablet: latar & garis blueprint harus menjangkau sampai bawah toolbar browser
   (Safari iOS: toolbar mengambang di bawah; tinggi tampak = svh, tinggi penuh = lvh). Tanpa ini, gradien terpotong lalu hitam.
   ============================================================ */
@media (max-width: 1000px) {
  .w-intro-bg { bottom: auto; height: calc(100vh + 160px); height: calc(100lvh + 160px); }
  .w-intro-stage { height: calc(100vh + 160px); height: calc(100lvh + 160px); }
  .w-scan { bottom: auto; height: 100vh; height: 100svh; }                 /* produk tersembunyi tetap tersebar di area terlihat */
  .w-bp { top: 50vh; top: 50svh; }                                   /* cetak biru tetap di tengah area terlihat */
  .w-intro-hint { bottom: 188px; }
  @supports (height: 100lvh) { .w-intro-hint { bottom: calc(188px + 100lvh - 100svh); } }
}

/* ============================================================
   GERAKAN HERO -> DISCOVER (scroll-linked, gaya oryzo.ai)
   --dp (0..1) di #discover: teks Discover muncul setelah produk tiba. --hp (1..0) di #hero: teks hero memudar naik.
   Nilainya dihitung di assets/v3.js dari posisi gulir, jadi gerakannya mengikuti jari/roda mouse, bukan animasi sekali putar.
   ============================================================ */
.w-disc-copy, .w-disc-detail { opacity: var(--dp, 1); transform: translate3d(0, calc((1 - var(--dp, 1)) * 40px), 0); }
.w-disc-copy h2 { transform: translate3d(0, calc((1 - var(--dp, 1)) * 18px), 0); }
.w-hero-in { opacity: var(--hp, 1); transform: scale(calc(.96 + var(--hp, 1) * .04)); }   /* memudar di tempat (tidak ikut tergulir naik) */
@media (prefers-reduced-motion: reduce) {
  .w-disc-copy, .w-disc-detail, .w-disc-copy h2 { opacity: 1; transform: none; }
}

/* Tablet (760-1099px): tatakan & produk di kanan, jadi kolom teks dibatasi agar tidak pernah tertimpa produk */
@media (min-width: 760px) and (max-width: 1099px) {
  .w-split-body { max-width: 52%; }
  .w-disc-in { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); column-gap: 24px; }
  .w-chapters { max-width: none; }
  .w-dish-name { font-size: clamp(34px, 5vw, 48px); }
}

/* ============================================================
   v5 · Hero gaya oryzo "Powered by AI*" + cahaya tepi warna Mosu + layar judul Discover ("it's wearable")
   Hero: judul raksasa di atas, produk 3D berdiri di kotak #heroSpot (ukuran dihitung world3d.js dari kotak ini),
   petunjuk geser kiri-bawah, ajakan + catatan kaki (*) kanan-bawah.
   ============================================================ */
.w-hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; padding: 0; display: block; touch-action: pan-y; }
.w-hero-in { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; max-width: var(--wrap); margin: 0 auto; box-sizing: border-box;
  padding: 92px max(clamp(20px, 4vw, 56px), var(--gut-r)) 28px max(clamp(20px, 4vw, 56px), var(--gut-l));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "title title" "spot spot" "hint say" "hint note"; column-gap: 32px; }
.w-hero-title { grid-area: title; display: grid; justify-content: center; margin: 0; font: 800 clamp(64px, 11.2vw, 184px)/.86 var(--f-display); letter-spacing: -0.055em; text-align: center; }
.w-ht-main { display: block; white-space: nowrap; }
.w-ht-main sup { font-size: .42em; vertical-align: top; position: relative; top: .12em; margin-left: .04em; color: var(--accent); letter-spacing: 0; }
.w-ht-tag { justify-self: end; margin-top: clamp(14px, 2.4vw, 42px); font: 700 clamp(17px, 1.7vw, 26px)/1 var(--f-display); letter-spacing: -0.01em; color: var(--accent); }
.w-hero-spot { grid-area: spot; position: relative; min-height: 0; cursor: grab; }
.w-hero-spot:active { cursor: grabbing; }
.w-spot-fb { display: none; }
html:not(.has-3d) .w-spot-fb { display: block; position: absolute; top: 4%; right: 0; bottom: 4%; left: 0; inset: 4% 0; }
.w-spot-fb picture, .w-spot-fb img { width: 100%; height: 100%; object-fit: contain; }
.w-hero-hint { grid-area: hint; align-self: end; display: flex; align-items: center; gap: 12px; margin: 0; font: 600 14px/1.2 var(--f-body); color: var(--muted); }
.w-hero-hint::after { content: ""; width: clamp(40px, 6vw, 96px); border-top: 1.5px dashed currentColor; opacity: .6; }
.w-hint-ic { width: 30px; height: 30px; flex: none; color: var(--accent); animation: hint-swipe 2.6s var(--ease) infinite; }
@keyframes hint-swipe { 0%, 100% { transform: translateX(-4px) rotate(-6deg); } 50% { transform: translateX(6px) rotate(6deg); } }
html:not(.has-3d) .w-hero-hint { visibility: hidden; }
.w-hero-say { grid-area: say; justify-self: end; display: grid; justify-items: end; gap: 18px; text-align: right; }
.w-hero-copy { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; color: var(--fg); }
.w-hero-say .w-cta { margin: 0; justify-content: flex-end; max-width: none; }
.w-hero-note { grid-area: note; justify-self: end; display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font: 600 13px/1.3 var(--f-body); color: var(--muted); }
.w-hero-note::before { content: ""; width: clamp(40px, 6vw, 96px); border-top: 1.5px dashed currentColor; opacity: .6; }
.w-hero-note span { color: var(--accent); font-weight: 800; }
/* datang setelah pembuka: berurutan */
.w-hero .w-ht-main, .w-hero .w-ht-tag, .w-hero-say, .w-hero-note, .w-hero-hint { animation: x-arrive .8s var(--expo) both; }
.w-hero .w-ht-tag { animation-delay: .1s; } .w-hero-say { animation-delay: .18s; } .w-hero-note, .w-hero-hint { animation-delay: .26s; }
.w-intro ~ .w-hero .w-ht-main, .w-intro ~ .w-hero .w-ht-tag, .w-intro ~ .w-hero .w-hero-say, .w-intro ~ .w-hero .w-hero-note, .w-intro ~ .w-hero .w-hero-hint { animation: none; }

@media (max-width: 1099px) and (min-width: 760px) {
  .w-hero { min-height: 640px; }
  .w-hero-in { padding-top: 96px; }
  .w-hero-title { font-size: clamp(64px, 12.6vw, 136px); }
}
@media (max-width: 759px) {
  /* HP: judul rata kiri dua baris, produk di tengah, ajakan di bawah */
  .w-hero { min-height: 560px; }
  .w-hero-in { padding: 84px 20px calc(18px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "title title" "spot spot" "say say" "note note"; column-gap: 12px; }
  .w-hero-title { justify-content: stretch; text-align: left; font-size: clamp(54px, 17.5vw, 84px); line-height: .86; }
  .w-ht-main { white-space: normal; }
  .w-ht-tag { margin-top: 14px; font-size: 17px; }
  .w-hero-say { justify-self: stretch; justify-items: start; text-align: left; gap: 14px; }
  .w-hero-copy { font-size: 15px; }
  .w-hero-say .w-cta { justify-content: flex-start; gap: 12px 20px; }
  .w-hero-hint, .w-hero-note { margin-top: 16px; font-size: 12px; gap: 8px; white-space: nowrap; }
  .w-hero-hint { grid-area: spot; align-self: end; justify-self: start; margin: 0 0 4px; position: relative; z-index: 1; }
  .w-hero-note { justify-self: start; }
  .w-hero-hint::after { display: none; }
  .w-hero-note::before { display: none; }
  .w-hint-ic { width: 24px; height: 24px; }
}
@media (max-width: 759px) and (max-height: 640px) { .w-hero-copy { display: none; } }
@media (min-width: 760px) and (max-height: 720px) { .w-hero-title { font-size: clamp(56px, 15vh, 140px); } }

/* ---- Cahaya tepi layar: warna identitas Mosu, berputar pelan, hanya di hero ---- */
.w-glow { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; visibility: hidden; opacity: 0;
  -webkit-mask: radial-gradient(ellipse 72% 66% at 50% 50%, transparent 58%, #000 100%); mask: radial-gradient(ellipse 72% 66% at 50% 50%, transparent 58%, #000 100%); }
/* Warna "hidup": putaran gradien digerakkan gulir (v3.js, --ga), titik terang lime mengikuti kursor (--gx/--gy),
   dan makin terang saat digulir cepat (--gv 0..1). Tanpa JS/animasi dikurangi: gradien diam. */
.glow-on .w-glow { visibility: visible; opacity: calc(var(--glow, 0) * (.7 + var(--gv, 0) * .3)); }
.w-glow i { position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, #1BB454, #B1E57A 18%, #FBF7EB 26%, #028340 40%, #164A3E 52%, #1BB454 64%, #B1E57A 80%, #1BB454);
  transform: rotate(var(--ga, 0deg)); will-change: transform; }
.w-glow b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 85%), rgba(177, 229, 122, 1), rgba(27, 180, 84, .7) 20%, rgba(2, 131, 64, 0) 48%); }
@keyframes glow-spin { to { transform: rotate(1turn); } }
@media (prefers-color-scheme: dark) { .glow-on .w-glow { opacity: calc(var(--glow, 0) * (.85 + var(--gv, 0) * .15)); } }
@media (max-width: 759px) {
  .w-glow { -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 62%, #000 100%); mask: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 62%, #000 100%); }
}

/* ---- Discover: layar judul ("Discover" raksasa, produk dalam bingkai seleksi) lalu daftar menu ---- */
.w-discover { height: calc(var(--n) * 45vh + 220vh); }   /* 120vh layar judul + 45vh per kategori */
.w-disc-title { position: absolute; top: 72px; right: 0; bottom: 0; left: 0; inset: 72px 0 0; display: grid; place-content: center; justify-items: start; pointer-events: none;
  transition: opacity .5s var(--ease), transform .7s var(--expo); }
.w-dt-label { position: absolute; z-index: 1; left: max(clamp(20px, 4vw, 56px), var(--gut-l)); top: calc(50% - clamp(84px, 20.5vw, 340px) * .5);
  transform: translateY(-100%); margin: 0; font: 800 clamp(18px, 2vw, 32px)/1.1 var(--f-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--accent); }
.w-dt-word { position: absolute; left: 0; top: 50%; margin: 0; font: 800 clamp(84px, 20.5vw, 340px)/.8 var(--f-display); letter-spacing: -0.065em; color: var(--fg); white-space: nowrap;
  transform: translate3d(var(--wx, 30vw), -50%, 0); will-change: transform; }
/* Hidup seperti oryzo: kata melintas mengikuti gulir (--wx dari v3.js), cincin bingkai berputar (--tp), cahaya latar bergeser */
.w-disc-title::before { content: ""; position: absolute; top: -72px; right: 0; bottom: 0; left: 0; inset: -72px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 65% at calc(4% + var(--tp, 0) * 26%) 100%, rgba(27, 180, 84, .22), transparent 70%),
              radial-gradient(45% 55% at calc(100% - var(--tp, 0) * 20%) 0%, rgba(177, 229, 122, .28), transparent 70%); }
@media (prefers-color-scheme: dark) {
  .w-disc-title::before { background: radial-gradient(55% 65% at calc(4% + var(--tp, 0) * 26%) 100%, rgba(27, 180, 84, .38), transparent 70%),
                                      radial-gradient(45% 55% at calc(100% - var(--tp, 0) * 20%) 0%, rgba(22, 74, 62, .7), transparent 70%); }
}
.w-dt-ring { transform: rotate(calc(var(--tp, 0) * 140deg)); }
.w-dt-ring b { position: absolute; background: var(--accent); opacity: .8; }
.w-dt-ring .k1, .w-dt-ring .k3 { left: 50%; width: 1.5px; height: 14px; margin-left: -.75px; }
.w-dt-ring .k2, .w-dt-ring .k4 { top: 50%; height: 1.5px; width: 14px; margin-top: -.75px; }
.w-dt-ring .k1 { top: 8px; } .w-dt-ring .k3 { bottom: 8px; } .w-dt-ring .k2 { right: 8px; } .w-dt-ring .k4 { left: 8px; }
.w-dt-frame { position: absolute; left: 50%; top: 50%; width: min(48vh, 64vw); aspect-ratio: 1; transform: translate(-50%, -46%); border: 1.5px dashed var(--accent); }
.w-dt-ring { position: absolute; top: 9%; right: 9%; bottom: 9%; left: 9%; inset: 9%; border-radius: 50%; border: 1px dashed var(--line); }
.w-dt-dot { position: absolute; top: 9%; right: 9%; bottom: 9%; left: 9%; inset: 9%; border-radius: 50%; animation: glow-spin 10s linear infinite; }
.w-dt-dot::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); }
.w-dt-t { position: absolute; width: 10px; height: 10px; background: var(--paper); border: 1.5px solid var(--accent); }
.w-dt-frame::after { content: ""; position: absolute; right: 16px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); }
.w-dt-t.t1 { left: -6px; top: -6px; } .w-dt-t.t2 { right: -6px; top: -6px; } .w-dt-t.t3 { left: -6px; bottom: -6px; } .w-dt-t.t4 { right: -6px; bottom: -6px; }
.w-dt-scroll { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; margin: 0;
  font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.w-dt-chev { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); animation: hint-bob 1.6s var(--ease) infinite; }
.w-disc-in { transition: opacity .45s var(--ease), visibility 0s; }
.w-discover[data-stage="title"] .w-disc-in { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.w-discover:not([data-stage="title"]) .w-disc-title { opacity: 0; transform: scale(.94); }
/* selama layar judul di tengah: lapisan 3D di depan kata besar, cahaya tidak menutupi */
.disc-title .w-world { z-index: 2; }
@media (max-width: 759px) {
  .w-disc-title { top: 64px; right: 0; bottom: 0; left: 0; inset: 64px 0 0; justify-items: start; }
  .w-dt-word { font-size: 21vw; }
  .w-dt-label { font-size: 15px; }
  .w-dt-frame { width: min(42vh, 68vw); }
  .w-dt-label { left: 20px; top: calc(50% - min(42vh, 68vw) * .46 - 18px); }
}
@media (prefers-reduced-motion: reduce) {
  .w-glow i, .w-glow b, .w-dt-dot, .w-dt-chev, .w-hint-ic { animation: none !important; }
  .w-hero .w-ht-main, .w-hero .w-ht-tag, .w-hero-say, .w-hero-note, .w-hero-hint { animation: none; }
}

/* ---- Experience (gaya oryzo "so portable, it's wearable") ----
   --xh 0..1 dari v3.js: 0 = kalimat raksasa melintang di belakang bingkai (buram di balik foto), 1 = kecil di kiri.
   Foto ditempatkan v3.js relatif terhadap bingkai #expFrame; ukuran bingkai diatur di sini per layar. */
.w-xp { height: calc(var(--n) * 55vh + 100vh); --xh: 0; }
.w-xp-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.w-xp-head { position: absolute; left: max(clamp(20px, 4vw, 56px), var(--gut-l)); right: 0; top: 52%; z-index: 1; pointer-events: none;
  transform: translate3d(0, calc(-50% - var(--xh) * 14vh), 0); }
.w-xp-head h2 { display: grid; justify-items: start; margin: 0; font: inherit; }
.w-xp-kick { font: 800 clamp(20px, 2.1vw, 32px)/1 var(--f-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--muted); margin-bottom: .3em; }
.w-xp-big { display: block; font: 800 clamp(72px, 12.4vw, 220px)/.86 var(--f-display); letter-spacing: -0.055em; color: var(--fg); white-space: nowrap;
  transform-origin: 0 0; transform: scale(calc(1 - var(--xh) * .7)); }
.w-xp-br { display: none; }
.w-xp-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 2; pointer-events: none; }
.w-xp-frame { position: absolute; left: 57%; top: calc(50% + 30px); height: min(72svh, 760px); aspect-ratio: .68; border-radius: 6.5% / 4.4%; transform: translate(-50%, -50%); border: 1.5px dashed var(--fg); opacity: .9; }
.w-xp-frame .w-dt-t { border-color: var(--fg); }
/* kartu foto: sudut tumpul seperti kartu remi; depan = foto, belakang = kartu As keriting Mosu */
.w-xp-shot { position: absolute; margin: 0; transform-origin: 50% 50%; will-change: transform, opacity; perspective: 1400px; }
.w-xp-card { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: block; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; }
.w-xp-front, .w-xp-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; display: block; border-radius: var(--r, 18px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45); }
.w-xp-front { object-fit: cover; background: var(--step-2); }
/* kartu aktif: pip keriting kiri-atas ditutup, digantikan clover 3D yang mendarat di titik itu (satu clover, menyatu dengan kartu) */
.w-xp-pip { position: absolute; right: 4.5%; top: 9.2%; width: 13.5%; height: 8.4%; background: #000; transform: rotateY(180deg) translateZ(.5px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; transition: opacity .3s; }
.has-3d .w-xp-shot.is-on .w-xp-pip { opacity: 1; }
.w-xp-back { transform: rotateY(180deg); object-fit: fill; background: #000;
  /* kartu yang belum terbuka: garis & cahaya hijau Mosu agar tetap terlihat, terutama di mode gelap */
  box-shadow: 0 0 0 2px #1BB454, 0 0 22px 2px rgba(27, 180, 84, .45), 0 18px 40px -18px rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) {
  .w-xp-back { box-shadow: 0 0 0 2px #1BB454, 0 0 30px 4px rgba(177, 229, 122, .32), 0 0 60px 6px rgba(27, 180, 84, .22); }
}
.w-xp-scroll { z-index: 3; }
.exp-on .w-world { z-index: 2; }
@media (min-width: 760px) and (max-width: 1099px) {
  .w-xp-frame { left: 50%; top: 58%; height: min(56svh, 74vw); }
  .w-xp-head { top: 46%; transform: translate3d(0, calc(-50% - var(--xh) * 26vh), 0); }
  .w-xp-big { font-size: clamp(72px, 13vw, 150px); transform: scale(calc(1 - var(--xh) * .62)); }
}
@media (max-width: 759px) {
  .w-xp { height: calc(var(--n) * 50vh + 100vh); }
  .w-xp-head { left: 20px; top: 48%; transform: translate3d(0, calc(-50% - var(--xh) * 21svh), 0); }
  .w-xp-kick { font-size: 17px; }
  .w-xp-big { font-size: 23vw; line-height: .84; transform: scale(calc(1 - var(--xh) * .55)); }
  .w-xp-br { display: inline; }
  .w-xp-frame { left: 50%; top: 55%; height: auto; width: min(62vw, 40svh); }
}
@media (max-width: 759px) and (max-height: 640px) { .w-xp-frame { width: min(56vw, 36svh); } }

/* ---- Fasilitas: kartu ber-ikon (desain versi HP dipakai di semua layar) ---- */
.w-fac { padding-block: clamp(56px, 7vw, 112px) clamp(40px, 5vw, 80px); position: relative; z-index: 1; }
.w-fac-title { font: 800 clamp(30px, 3.4vw, 48px)/1 var(--f-display); letter-spacing: -0.03em; margin: 0 0 clamp(20px, 2.4vw, 32px); }
.w-fac-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.w-fac-list li { display: grid; align-content: space-between; gap: 22px; min-height: 172px; padding: 20px 20px 22px; background: var(--sun); color: #000; border-radius: 24px;
  transition: transform .25s var(--ease); }
.w-fac-list li:hover { transform: translateY(-4px); }
.w-fac-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #000; color: var(--sun); }
.w-fac-ic svg { width: 22px; height: 22px; }
.w-fac-list strong { font: 800 clamp(19px, 1.6vw, 24px)/1.08 var(--f-display); letter-spacing: -0.02em; }
@media (max-width: 1099px) {
  .w-fac-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .w-fac-list li { grid-column: span 2; min-height: 150px; }
  .w-fac-list li:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 759px) {
  .w-fac { padding-block: 48px 24px; }
  .w-fac-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .w-fac-list li, .w-fac-list li:nth-child(n+4) { grid-column: auto; min-height: 0; gap: 14px; padding: 16px 16px 18px; border-radius: 22px; }
  .w-fac-ic { width: 38px; height: 38px; } .w-fac-ic svg { width: 20px; height: 20px; }
  .w-fac-list strong { font-size: 18px; }
  .w-fac-list li:last-child { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .w-fac-list li { transition: none; } }


/* ============================================================
   v5.1 · Peralihan Hero -> Our Menu TANPA gerak gulir ke bawah (seperti oryzo.ai):
   hero ditahan (sticky) selama 1 layar gulir sambil memudar di tempat; section Our Menu ditarik naik 1 layar (margin negatif)
   sehingga isinya sudah tertahan di tempat yang sama saat hero habis. Judul Our Menu muncul di tempat, kata besar
   meluncur dari kanan lalu berhenti rata kiri di bawah label (gaya "So portable, it's wearable").
   ============================================================ */
.w-hero { height: 200vh; height: 200svh; min-height: 0; }
.w-hero-in { position: sticky; top: auto; right: auto; bottom: auto; left: auto; inset: auto; top: 0; height: 100vh; height: 100svh; min-height: 560px; }
.w-discover { margin-top: -100vh; margin-top: -100svh; pointer-events: none; scroll-margin-top: -55vh; }
.w-discover .w-disc-in { pointer-events: auto; }
.w-discover[data-stage="title"] .w-disc-in { pointer-events: none; }
/* isi layar judul hanya tampil saat section sudah tertahan (--dtv dari v3.js) */
.w-discover[data-stage="title"] .w-disc-title { opacity: var(--dtv, 0); }
.w-dt-frame { opacity: var(--dtv, 0); transform: translate(-50%, -46%) scale(calc(.92 + var(--dtv, 0) * .08)); }
.w-dt-label { opacity: var(--dtv, 0); }
@media (prefers-color-scheme: dark) { .w-dt-word { text-shadow: 0 0 42px rgba(177, 229, 122, .28), 0 0 12px rgba(251, 247, 235, .25); } }

/* ---- Cahaya tepi gaya oryzo: pita tipis di sekeliling layar (bukan bayangan lebar), warna Mosu, mengikuti kursor ---- */
.w-glow { --gb: clamp(46px, 6vw, 96px);
  -webkit-mask: linear-gradient(90deg, #000, transparent var(--gb), transparent calc(100% - var(--gb)), #000),
                linear-gradient(180deg, #000, transparent var(--gb), transparent calc(100% - var(--gb)), #000);
          mask: linear-gradient(90deg, #000, transparent var(--gb), transparent calc(100% - var(--gb)), #000),
                linear-gradient(180deg, #000, transparent var(--gb), transparent calc(100% - var(--gb)), #000); }
.glow-on .w-glow { opacity: calc(var(--glow, 0) * (.85 + var(--gv, 0) * .15)); }
@media (prefers-color-scheme: dark) { .glow-on .w-glow { opacity: var(--glow, 0); } }
.w-glow i { background: conic-gradient(from 0deg, #1BB454, #D4F59A 14%, #FBF7EB 22%, #B1E57A 32%, #028340 46%, #164A3E 56%, #1BB454 66%, #E3F7A8 80%, #1BB454); filter: saturate(1.25); }
.w-glow b { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 85%), #F2FFD6, rgba(177, 229, 122, .9) 9%, rgba(27, 180, 84, .5) 22%, rgba(2, 131, 64, 0) 42%); }
@media (max-width: 759px) {
  .w-glow { --gb: 34px;
    -webkit-mask: linear-gradient(90deg, #000, transparent var(--gb), transparent calc(100% - var(--gb)), #000),
                  linear-gradient(180deg, #000, transparent var(--gb), transparent calc(100% - var(--gb)), #000);
            mask: linear-gradient(90deg, #000, transparent var(--gb), transparent calc(100% - var(--gb)), #000),
                  linear-gradient(180deg, #000, transparent var(--gb), transparent calc(100% - var(--gb)), #000); }
}

/* ============================================================
   v5.2 · Peralihan ke Mosu Club: kartu stempel ditahan, stempel clover dicap satu per satu mengikuti gulir,
   stempel ketiga menyebarkan lime memenuhi layar (lingkaran membesar dari stempel itu), lalu section Join (lime) menyambung.
   ============================================================ */
.w-st { position: relative; z-index: 1; height: 250vh; height: 250svh; }
.w-st-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.w-st-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 84px 20px 40px; text-align: center; }
.w-st-kick { margin: 0; font: 800 clamp(16px, 1.5vw, 22px)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--accent); }
.w-st-head { margin: 0 0 clamp(12px, 2vw, 28px); font: 800 clamp(34px, 5.2vw, 80px)/.95 var(--f-display); letter-spacing: -0.04em; color: var(--fg); }
.w-st-card { width: min(700px, 88vw); padding: clamp(20px, 3vw, 34px); border-radius: 28px; background: #164A3E; color: #FBF7EB;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); transform-origin: 50% 60%; }
.w-st-card.thump { animation: st-thump .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes st-thump { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(6px) scale(.985); } 100% { transform: none; } }
.w-st-title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 clamp(16px, 2.4vw, 26px); font: 700 clamp(15px, 1.3vw, 18px)/1.2 var(--f-body); }
.w-st-title b { font: 800 clamp(18px, 1.8vw, 26px)/1 var(--f-display); color: #B1E57A; }
.w-st-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; }
.w-st-slot { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(251, 247, 235, .45); display: grid; place-items: center; }
.w-st-num { font: 800 clamp(22px, 3vw, 40px)/1 var(--f-display); color: rgba(251, 247, 235, .35); transition: opacity .2s; }
.w-st-mark { position: absolute; top: 6%; right: 6%; bottom: 6%; left: 6%; inset: 6%; display: grid; place-items: center; border-radius: 50%; background: #B1E57A; color: #164A3E;
  opacity: 0; transform: scale(1.9) rotate(-14deg); }
.w-st-mark svg { width: 64%; height: 64%; fill: currentColor; }
.w-st-slot.is-on { border-color: transparent; }
.w-st-slot.is-on .w-st-num { opacity: 0; }
.w-st-slot.is-on .w-st-mark { animation: st-stamp .46s cubic-bezier(.2, 1.5, .35, 1) forwards; }
@keyframes st-stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-14deg); } 55% { opacity: 1; transform: scale(.92) rotate(3deg); } 100% { opacity: 1; transform: none; } }
.w-st-note { margin: clamp(16px, 2.4vw, 26px) 0 0; font: 600 clamp(14px, 1.2vw, 16px)/1.3 var(--f-body); color: #D9E4DC; }
.w-st-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 2; background: var(--sun); pointer-events: none;
  clip-path: circle(var(--fr, 0px) at var(--fx, 50%) var(--fy, 60%)); }
@media (prefers-reduced-motion: reduce) {
  .w-st-slot.is-on .w-st-mark { animation: none; opacity: 1; transform: none; }
  .w-st-card.thump { animation: none; }
}


/* ---- v5.3 · Layar judul Our Menu menyambung ke daftar menu (--m dari v3.js) ----
   Kata raksasa diposisikan JS (transform) dan berakhir tepat di posisi judul daftar; saat berganti tahap, judul daftar
   langsung tampil di tempat yang sama (tanpa pudar) sehingga terlihat sebagai satu elemen yang sama. */
.w-dt-word { transform-origin: 0 0; }
.w-dt-label { opacity: calc(var(--dtv, 0) * (1 - var(--m, 0))); }
.w-dt-frame { opacity: calc(var(--dtv, 0) * (1 - var(--m, 0) * 1.4)); }
.w-dt-scroll { opacity: calc(1 - var(--m, 0) * 2); }
.w-disc-title::before { opacity: calc(1 - var(--m, 0)); }
@media (prefers-color-scheme: dark) { .w-dt-word { text-shadow: 0 0 calc(42px * (1 - var(--m, 0))) rgba(177, 229, 122, calc(.28 * (1 - var(--m, 0)))); } }
.w-discover:not([data-stage="title"]) .w-disc-title { opacity: 0; transform: none; transition: none; }
.w-discover .w-disc-in, .w-discover[data-stage="title"] .w-disc-in { transition: none; }
.w-discover:not([data-stage="title"]) .w-disc-copy .w-sub,
.w-discover:not([data-stage="title"]) .w-chapters,
.w-discover:not([data-stage="title"]) .w-disc-detail { animation: x-arrive .55s var(--expo) both; }
@media (prefers-reduced-motion: reduce) {
  .w-discover:not([data-stage="title"]) .w-disc-copy .w-sub, .w-discover:not([data-stage="title"]) .w-chapters,
  .w-discover:not([data-stage="title"]) .w-disc-detail { animation: none; }
}

.st-on .w-world { z-index: 4; }   /* clover 3D di depan kartu stempel saat mendarat */

/* ---- v5.4 · Cap stempel (alat stempel) menekan tiap lingkaran; peralihan ke Join yang halus ----
   Lapisan transisi berada DI ATAS section Join (yang ditarik naik 1 layar); setelah lime penuh, lapisan memudar
   sehingga Join the Mosu Club muncul di tempat, tanpa blok lime kosong yang naik dari bawah. */
.w-st { z-index: 3; pointer-events: none; }
.w-st-pin { opacity: var(--sto, 1); background: var(--paper); }   /* menutup section Join yang ada di bawahnya sampai lime penuh */
.w-st-card { position: relative; }
.w-st-tool { position: absolute; left: var(--tx, 50%); top: var(--ty, 0px); width: var(--tw, 70px); z-index: 3; pointer-events: none;
  transform: translate(-50%, -100%) translateY(-8px); transition: left .45s var(--expo), opacity .3s; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.w-st-tool svg { display: block; width: 100%; height: auto; fill: #FBF7EB; }
.w-st-tool .pad { fill: #B1E57A; }
.w-st-tool.idle { animation: st-hover 1.8s ease-in-out infinite; }
.w-st-tool.press { animation: st-press .5s cubic-bezier(.3, 0, .2, 1); }
.w-st-tool.done { opacity: 0; transform: translate(-50%, -100%) translateY(-60px) rotate(12deg); transition: opacity .4s, transform .5s var(--expo); }
@keyframes st-hover { 50% { transform: translate(-50%, -100%) translateY(-16px) rotate(-4deg); } }
@keyframes st-press { 0% { transform: translate(-50%, -100%) translateY(-8px); } 40% { transform: translate(-50%, -100%) translateY(var(--drop, 40px)) scaleY(.94); }
  100% { transform: translate(-50%, -100%) translateY(-8px); } }
.pg-home .w-st + .member-band-home { margin-top: -100vh; margin-top: -100svh; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .w-st-tool { animation: none !important; } }

/* ---- v5.5 · Stempel pelan, seluruhnya mengikuti gulir (tanpa animasi berwaktu) ---- */
.w-st { height: 420vh; height: 420svh; }
.w-st-mark { opacity: var(--sp, 0); transform: scale(calc(1.9 - .9 * var(--sp, 0))) rotate(calc(-14deg * (1 - var(--sp, 0)))); }
.w-st-slot.is-on .w-st-mark { animation: none; }
.w-st-num { opacity: calc(1 - var(--sp, 0)); }
.w-st-card { transform: translateY(calc(var(--cd, 0) * 5px)) scale(calc(1 - var(--cd, 0) * .012)); animation: none !important; }
.w-st-tool, .w-st-tool.idle, .w-st-tool.press { animation: none; transition: left .5s var(--expo), opacity .2s; }

/* ---- Halaman Order: versi mobile ringkas ----
   Desktop: semua outlet tampil berjajar seperti biasa (pemilih disembunyikan).
   Mobile: tombol Pogung / Lempong Sari di atas, satu kartu outlet, 3 platform dalam satu baris. */
.o-pick { display: none; }
@media (max-width: 720px) {
  .o-pick:not([hidden]) {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
    padding: 6px; margin-bottom: 18px; border-radius: 999px;
    background: var(--step); border: 1px solid var(--line);
  }
  .o-pick-btn {
    min-height: 48px; border: 0; border-radius: 999px; cursor: pointer;
    font: 700 16px/1 var(--f-display, inherit); letter-spacing: -0.01em;
    background: transparent; color: var(--muted);
    transition: background-color .2s ease, color .2s ease;
  }
  .o-pick-btn[aria-selected="true"] { background: var(--sun); color: var(--on-sun); }
  .o-pick-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

  .order-outlets.is-picking { border-top: 0; }
  .order-outlets.is-picking > .outlet { display: none; }
  .order-outlets.is-picking > .outlet.is-picked { display: grid; }
  .order-outlets > .outlet { margin-inline: 0; padding: 20px 18px; gap: 8px; border: 1px solid var(--line); background: var(--step); }
  .order-outlets > .outlet::after { display: none; }
  .order-outlets > .outlet:hover { transform: none; box-shadow: none; }
  .order-outlets > .outlet + .outlet { margin-top: 12px; }
  .order-outlets .outlet-name h3 { font-size: 30px; }
  .order-outlets .outlet-addr { font-size: 15px; }

  .order-outlets .pf-cta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  /* hanya logo, tanpa tulisan (nama tetap dibacakan pembaca layar) */
  .order-outlets .pf-cta .pf-btn { min-height: 76px; padding: 10px; border-radius: 20px; justify-content: center; }
  .order-outlets .pf-cta .pf-ico { width: 48px; height: 48px; border-radius: 0; }
  .order-outlets .pf-cta .pf-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .order-outlets .pf-cta .pf-arrow { display: none; }
  .order-outlets .pf-cta .muted, .order-outlets .pf-cta .link { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .order-outlets > .outlet { padding-inline: 14px; }
  .order-outlets .pf-cta { gap: 6px; }
  .order-outlets .pf-cta .pf-btn { min-height: 68px; }
  .order-outlets .pf-cta .pf-ico { width: 42px; height: 42px; }
}

/* Logo platform di tombol Order (semua ukuran layar) */
.pf-btn { display: inline-flex; align-items: center; gap: 10px; }
.pf-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.pf-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v3 .pf-btn { padding-left: 12px; padding-right: 22px; }

/* ---- Pembuka: pecahan clover menjadi logo mosu (assets/clover-break.js) ---- */
.w-break { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100vw; height: 100vh; z-index: 3; pointer-events: none; overflow: visible; display: none; }
.w-break path { fill: var(--green); stroke: none; }
.w-break.is-on { display: block; }
.w-break-logo { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; aspect-ratio: 4.1096; display: none; opacity: 0;
  background: var(--green); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; will-change: transform; }
.w-break-logo.is-on { display: block; }
.w-ht-mosu { display: inline-block; }
.w-ht-rest { display: inline-block; }

/* Judul hero: kata "Mosu" ditulis dengan logo mosu (pecahan clover mendarat di sini), lalu "Silahkan".
   Teks "Mosu" tetap ada untuk pembaca layar & mesin pencari. Garis dasar huruf m logo = garis dasar teks. */
.w-ht-mosu { display: inline-block; width: 3.15em; height: calc(3.15em / 4.1096); aspect-ratio: 4.1096; margin-right: .06em;   /* tinggi eksplisit: browser lama tanpa aspect-ratio */
  vertical-align: calc(-3.15em / 4.1096 * (79 / 292));
  background: var(--green); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Pembuka lebih panjang: pecahan clover -> logo mosu bergerak pelan (lini masa di clover-break.js) */
.has-break .w-intro { height: 340vh; height: 340svh; }
.has-break .w-bp { opacity: clamp(0, calc(1 - var(--ip) * 4.6), 1); }
@media (max-width: 759px) { .has-break .w-intro { height: 300vh; height: 300svh; } }

/* ---- Cahaya tepi hero gaya Siri (menggantikan pita tebal): garis tipis yang menyala + kabut lembut ke dalam,
   mengikuti sudut layar yang membulat. Warna Mosu (clover, lime, krem, forest) berputar pelan (--ga dari v3.js). ---- */
.w-glow { -webkit-mask: none; mask: none; --gr: 26px; }
.w-glow .gl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.w-glow .gl-ring { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; border-radius: var(--gr); padding: var(--gw);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor;
          mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000); }
.w-glow .gl-line { --gw: 2.5px; filter: blur(.6px) saturate(1.3); }
.w-glow .gl-mid  { --gw: 9px;  filter: blur(9px) saturate(1.4); opacity: .9; }
.w-glow .gl-haze { --gw: 34px; filter: blur(38px) saturate(1.5); opacity: .8; }
/* warna terang & jenuh (tanpa hijau tua) supaya cahayanya hidup seperti Siri, tetap palet Mosu */
.w-glow i { background: conic-gradient(from 0deg, #1BB454, #C6F57A 10%, #FFFBEA 16%, #B1E57A 22%, #2BD46A 34%, #8BF0B0 44%, #1BB454 54%, #E3F7A8 64%, #FFFBEA 70%, #6FDC5A 80%, #B1E57A 90%, #1BB454); filter: none; }
.w-glow b { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 85%), #FFFBEA, rgba(198, 245, 122, .9) 8%, rgba(27, 180, 84, 0) 30%); }
@media (prefers-color-scheme: dark) { .w-glow .gl { mix-blend-mode: screen; } .glow-on .w-glow { opacity: var(--glow, 0); } }
/* tema terang: latar krem menelan warna terang, jadi garis sedikit lebih tebal & hijau lebih pekat */
@media (prefers-color-scheme: light) {
  .w-glow .gl-line { --gw: 3.5px; }
  .w-glow .gl-line i, .w-glow .gl-mid i { background: conic-gradient(from 0deg, #1BB454, #7BD94A 14%, #B1E57A 24%, #028340 36%, #1BB454 50%, #9BE86A 64%, #028340 78%, #1BB454); }
}
@media (max-width: 759px) { .w-glow { --gr: 44px; } .w-glow .gl-haze { --gw: 22px; filter: blur(26px) saturate(1.5); } }

/* ---- What They Say (gaya "custom reviews" oryzo): clover 3D di tengah, ulasan aktif menyala ---- */
.w-rvs { padding-block: clamp(96px, 12vh, 140px) clamp(64px, 10vh, 120px); }
.w-rv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-bottom: 14px;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--fg) 45%, transparent);
  font: 800 13px/1.2 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.w-rv-sum { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.w-rv-r { justify-self: end; }
.w-rv-stars { display: inline-flex; gap: 3px; vertical-align: -2px; }
.w-rv-stars i { width: 16px; height: 16px; display: block;
  background: linear-gradient(90deg, var(--accent) var(--f), color-mix(in srgb, var(--fg) 22%, transparent) var(--f));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.w-rv-list { list-style: none; margin: 0; padding: 0; }
.w-rv { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) minmax(0, 24%); gap: 24px; min-height: 52vh;
  padding-block: 22px; border-bottom: 1.5px dashed color-mix(in srgb, var(--fg) 30%, transparent);
  opacity: .32; transition: opacity .5s var(--expo); }
.w-rv.is-active { opacity: 1; }
.w-rv-body { grid-column: 1; display: flex; flex-direction: column; gap: 14px; }
.w-rv-rate { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--f-display); color: var(--muted); }
.w-rv-q { margin: 0; font: 700 clamp(18px, 1.55vw, 24px)/1.32 var(--f-display); letter-spacing: -0.01em; color: var(--fg); }
.w-rv-q p { margin: 0; }
.w-rv-q mark { background: none; color: inherit; transition: color .5s var(--expo); }
.w-rv.is-active .w-rv-q mark { color: var(--accent); }
.w-rv-by { margin: auto 0 0; padding-top: 18px; display: grid; gap: 4px; font: 800 13px/1.25 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.w-rv-by span { font-weight: 600; color: var(--muted); text-transform: none; font-family: var(--f-body); }
.w-rv-pic { grid-column: 3; margin: 0; align-self: start; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--step-2); }
.w-rv-pic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.35); transition: filter .6s var(--expo), transform 1.2s var(--expo); transform: scale(1.04); }
.w-rv.is-active .w-rv-pic img { filter: none; transform: none; }
.w-rv-more { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 36px 0 0; }
@media (max-width: 1099px) {
  .w-rv { grid-template-columns: minmax(0, 46%) minmax(0, 1fr) minmax(0, 30%); min-height: 46vh; }
}
@media (max-width: 759px) {
  .w-rv-head { grid-template-columns: 1fr; gap: 8px; }
  .w-rv-r { display: none; }
  .w-rv { grid-template-columns: 1fr; min-height: 0; gap: 16px; padding-block: 26px; opacity: .4; }
  .w-rv-pic { grid-column: 1; aspect-ratio: 16 / 9; }
  .w-rv-q { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .w-rv, .w-rv-q mark, .w-rv-pic img { transition: none; } }
/* foto ulasan lebih dari satu: berjajar potret, keterangan kredit di bawah */
.w-rv-pic.is-multi { aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-rv-pic.is-multi img { aspect-ratio: 3 / 4; height: auto; border-radius: 6px; }
.w-rv-pic figcaption { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
@media (max-width: 759px) { .w-rv-pic.is-multi { aspect-ratio: auto; } }
/* satu foto milik pengulas: potret utuh + kredit di bawahnya */
.w-rv-pic.is-credit:not(.is-multi) { aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; display: grid; gap: 8px; }
.w-rv-pic.is-credit:not(.is-multi) img { aspect-ratio: 4 / 5; height: auto; border-radius: 6px; }
@media (max-width: 759px) { .w-rv-pic.is-credit:not(.is-multi) img { aspect-ratio: 4 / 3; } }

/* ---- Halaman menu: arahkan kursor ke produk -> foto membesar ke arah kursor (lihat detail makanan/minuman) ---- */
.plate img { transition: transform .45s var(--expo), filter .45s var(--expo); transform-origin: var(--zx, 50%) var(--zy, 50%); will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .dish:hover .plate { transform: none; }
  .dish:hover .plate img { transform: scale(1.32); filter: drop-shadow(0 22px 26px rgba(15, 30, 20, .28)); }
  .dish .plate { cursor: zoom-in; }
}
/* layar sentuh: tekan & tahan foto untuk memperbesar */
@media (hover: none) { .dish .plate:active img { transform: scale(1.22); } }
.dish { position: relative; z-index: 0; }
.dish:hover { z-index: 2; }   /* foto yang membesar tidak tertutup kartu sebelahnya */
@media (prefers-reduced-motion: reduce) { .dish:hover .plate img, .dish .plate:active img { transform: scale(1.12); transition: none; } }


/* ============================================================
   PERBAIKAN Nov 2026: perangkat lama/lemah/panas, pecahan logo, Experience ponsel
   ============================================================ */
/* Produk di atas tatakan hanya ada bila clover 3D benar-benar jalan (modul gagal dimuat di browser lama = tidak nyangkut di pojok) */
html:not(.has-3d) .w-dish { display: none; }
/* Tanpa 3D: gambar produk statis hero menunggu sampai logo "mosu" mendarat di judul (tidak menimpa huruf yang melayang) */
.w-spot-fb { transition: opacity .35s var(--ease, ease); }
.break-on .w-spot-fb { opacity: 0; }

/* ---- Mode ringan (assets/perf.js): HP/tablet lemah, browser lama, hemat data, atau perangkat yang mulai tersendat/panas ----
   Tampilan & isi tetap sama; yang dimatikan hanya efek yang terus-menerus memakai GPU/CPU. */
/* cahaya tepi: tetap ada sebagai bingkai diam, tanpa lapisan kabut blur 38px & tanpa putaran */
.perf-lite .w-glow .gl-haze { display: none; }
.perf-lite .w-glow i, .perf-lite .w-glow b { animation: none !important; }
.perf-lite .w-glow .gl-mid { filter: blur(6px); }
/* kaca buram (backdrop-filter) diganti latar hampir pekat */
.perf-lite .nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--paper); }
.perf-lite [class*="glass"], .perf-lite .lb { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* animasi hias tanpa henti dihentikan (indikator memuat & status tetap berjalan) */
.perf-lite .hero::before, .perf-lite .hero::after, .perf-lite .marquee-track, .perf-lite .foot-mark, .perf-lite .lcard-demo,
.perf-lite .member-band::after, .perf-lite .hero-in::before, .perf-lite .member-copy::before, .perf-lite .ts,
.perf-lite .w-lens i, .perf-lite .w-intro-hint span, .perf-lite .club-dots .is-free, .perf-lite .w-hint-ic,
.perf-lite .w-dt-dot, .perf-lite .w-dt-chev, .perf-lite .w-st-tool.idle, .perf-lite .dot { animation: none !important; }
/* semua hiasan pada ::before/::after (clover mengambang ber-mask) dijeda di posisi diamnya */
.perf-lite *::before, .perf-lite *::after { animation-play-state: paused !important; }
.perf-lite .lcard-demo { filter: none; }
.perf-lite .w-dish-item img { filter: none; }

/* ---- Experience di ponsel: jarak lega antara judul "stay all day" dan bingkai foto ----
   Sebelumnya judul (setelah mengecil) berhenti ~10px di atas bingkai, sementara bawah layar kosong.
   Sekarang judul naik lebih jauh & lebih kecil, bingkai sedikit lebih kecil: jarak judul-foto ±55-65px di semua tinggi layar. */
@media (max-width: 759px) {
  .w-xp-head { top: 46%; transform: translate3d(0, calc(-50% - var(--xh) * 23svh), 0); }
  .w-xp-big { transform: scale(calc(1 - var(--xh) * .58)); }
  .w-xp-frame { top: 53.5%; width: min(58vw, 36svh); }
}
@media (max-width: 759px) and (max-height: 640px) {   /* ponsel pendek: judul tidak boleh naik ke balik navigasi */
  .w-xp-head { transform: translate3d(0, calc(-50% - var(--xh) * 17svh), 0); }
  .w-xp-frame { top: 60%; width: min(52vw, 32svh); }
}

/* ---- Browser lama (Chrome < 111, iOS < 16.2): color-mix() belum dikenal -> warna transparan/hilang (latar navigasi bening,
   bintang ulasan kosong). Cadangan warna setara. ---- */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --glass: rgba(251, 247, 235, .9); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(0, 0, 0, .86); } }
  :root[data-theme="dark"] { --glass: rgba(0, 0, 0, .86); }
  .lede { color: rgba(251, 247, 235, .82); }
  .dot { box-shadow: 0 0 0 4px rgba(27, 180, 84, .3); }
  .dish:hover { border-color: rgba(27, 180, 84, .55); }
  .outlet:not(.is-soon):hover { background: rgba(27, 180, 84, .09); }
  .pg-menu main, .pg-suasana main, .pg-outlet main, .pg-ulasan main, .pg-order main { background: var(--paper); }
  .field input::placeholder, .cp-row input::placeholder { color: rgba(199, 199, 199, .7); }
  .v-warn { background: rgba(177, 229, 122, .45); }
  .mtab.is-on span { opacity: .72; color: inherit; }
  .w-rv-head { border-bottom-color: rgba(128, 128, 128, .45); }
  .w-rv { border-bottom-color: rgba(128, 128, 128, .3); }
  .w-rv-stars i { background: linear-gradient(90deg, var(--accent) var(--f), rgba(128, 128, 128, .28) var(--f)); }
}

/* ============================================================
   Halaman legal (/privacy, /terms), 404, banner cookie, baris legal di footer
   ============================================================ */
.legal { padding-block: clamp(120px, 16vh, 168px) clamp(64px, 10vh, 112px); }
.legal .wrap.legal-wrap { max-width: 760px; margin-inline: auto; }
.legal-kick { margin: 0 0 12px; font: 800 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.legal-head h1 { margin: 0; font: 800 clamp(40px, 6vw, 72px)/.95 var(--f-display); letter-spacing: -0.04em; color: var(--fg); }
.legal-meta { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.legal-toc { margin: 36px 0 8px; padding: 20px 24px; border: 1.5px dashed var(--line); border-radius: 18px; }
.legal-toc ol { margin: 0; padding-left: 1.3em; columns: 2 220px; column-gap: 32px; font-size: 15px; line-height: 1.9; }
.legal-toc a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.legal-body { font-size: 17px; line-height: 1.7; color: var(--fg); }
.legal-body section { padding-top: 32px; scroll-margin-top: 96px; }
.legal-body h2 { margin: 0 0 10px; font: 800 clamp(22px, 2.4vw, 28px)/1.15 var(--f-display); letter-spacing: -0.02em; }
.legal-body h3 { margin: 20px 0 6px; font: 700 17px/1.3 var(--f-display); }
.legal-body p, .legal-body ul { margin: 0 0 12px; }
.legal-body ul { padding-left: 1.2em; list-style: disc; }
.legal-toc ol { list-style: decimal; }
.legal-body li { margin-bottom: 6px; }
.legal-body a, .legal-link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.legal-body code { font-size: .88em; padding: 1px 5px; border-radius: 6px; background: var(--alt); border: 1px solid var(--line); word-break: break-word; }
.legal-table { overflow-x: auto; margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 14px; }
.legal-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legal-table table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th { font: 800 13px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* 404 */
.nf { padding-block: clamp(130px, 18vh, 190px) clamp(72px, 12vh, 130px); text-align: center; }
.nf-wrap { display: grid; justify-items: center; }
.nf-clover { width: 92px; height: 92px; color: var(--green); transform: rotate(-12deg); }
.nf-code { margin: 18px 0 4px; font: 800 15px/1 var(--f-display); letter-spacing: .3em; color: var(--accent); }
.nf h1 { margin: 0; font: 800 clamp(38px, 6vw, 72px)/.95 var(--f-display); letter-spacing: -0.04em; color: var(--fg); }
.nf-lede { margin: 18px 0 0; max-width: 30em; font-size: 18px; line-height: 1.55; color: var(--muted); }
.nf-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; margin-top: 32px; }
.nf-link { font-weight: 800; color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.nf-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 40px 0 0; padding: 0; font-size: 15px; }
.nf-links a { color: var(--muted); }

/* baris legal di footer */
.x-foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.x-foot-legal a, .x-foot-legal .legal-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.x-foot-legal span { margin-right: auto; }

/* banner cookie: kartu kecil kiri-bawah (desktop) / selebar layar bawah (HP); tidak menutup tombol Order di navigasi */
.ck { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; justify-content: flex-start; pointer-events: none; }
.ck-box { pointer-events: auto; width: 100%; max-width: 420px; padding: 20px 20px 18px; border-radius: 20px; background: var(--paper); color: var(--fg);
  border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); transform: translateY(16px); opacity: 0; transition: transform .3s var(--expo, ease), opacity .3s; }
.ck.is-in .ck-box { transform: none; opacity: 1; }
.ck-title { margin: 0 0 6px; font: 800 18px/1.2 var(--f-display); }
.ck-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg); }
.ck-text a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ck-btn { min-height: 46px; padding: 0 14px; border-radius: 999px; font: 700 15px/1 var(--f-body); cursor: pointer;
  background: transparent; color: var(--fg); border: 1.5px solid var(--fg); }
.ck-btn[data-consent="accept"] { background: var(--fg); color: var(--paper); }
.ck-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ck-box { transition: none; } }

/* <picture> (WebP + cadangan JPG) tidak boleh mengubah tata letak foto kartu, galeri, & ulasan */
.w-rv-pic picture, .shot picture { display: contents; }
/* Sisi kartu yang terlihat dipilih v3.js (data-face), jadi benar di semua browser walau 3D-nya diratakan */
.w-xp-card[data-face="back"] .w-xp-front, .w-xp-card[data-face="back"] picture { visibility: hidden; }
.w-xp-card[data-face="front"] .w-xp-back { visibility: hidden; }
/* Kartu Experience: <picture> harus ikut ruang 3D kartu. display: contents di sini membuat Safari/WebKit salah membalik kartu
   (yang tampil sisi belakang, bukan foto), jadi dibuat kotak penuh yang meneruskan preserve-3d. */
.w-xp-card picture { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

/* Honeypot anti-bot: tidak terlihat & tidak bisa difokus oleh manusia (bukan display:none, agar bot tetap mengisinya) */
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   TANPA 3D (perangkat ringan / browser lama / WebGL mati): clover 3D diganti gambar hasil render 3D yang sama
   (assets/img/clover/). Komposisi & posisi meniru pose 3D di world3d.js. Hanya CSS lama (%, vh, calc, padding):
   tidak ada clamp/aspect-ratio, jadi tampil sama di Chrome 60+ / iOS 12+.
   ============================================================ */
/* Kotak "produk di atas tatakan": lebar B, tinggi 1,3B (padding). Produk persegi setinggi B berdiri di titik pusat
   tatakan (22,8% dari bawah kotak); tatakan selebar 0,95B, titik pusatnya 45,7% dari kiri gambar. */
.w-fb-box { position: relative; display: block; width: 100%; height: 0; padding-bottom: 130%; }
.w-fb-dish { position: absolute; left: 6.6%; bottom: 0; width: 95%; height: auto; }
.w-fb-prod { position: absolute; left: 0; right: 0; bottom: 22.8%; height: 76.9%; }
.w-fb-prod picture, .w-fb-prod img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.w-fb-prod img { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
.w-fb-box.is-bottle .w-fb-prod { left: -20%; right: -20%; height: 100%; }   /* botol 500 mL lebih tinggi, tetap berdiri di tatakan */
.w-fb { display: none; }
html:not(.has-3d) .w-fb { display: block; pointer-events: none; }
.w-fb-item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; transition: opacity .35s ease, transform .5s ease; transform: translateY(4%); }
.w-fb-item.is-on { opacity: 1; transform: none; }

/* Hero: produk + tatakan di tengah area spot */
html:not(.has-3d) .w-spot-fb { display: block; position: absolute; left: 0; right: 0; top: 2%; bottom: 0; }
.w-spot-fb .w-fb-box { position: absolute; left: 50%; bottom: 0; width: 74%; max-width: 34vh; padding-bottom: 0; height: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.w-spot-fb .w-fb-box::before { content: ""; display: block; padding-bottom: 130%; }   /* padding % dihitung dari lebar kotak ini sendiri */

@media (max-width: 759px) { .w-spot-fb .w-fb-box { max-width: 52vh; } }   /* ponsel: produk mengisi area spot seperti di 3D */
/* Ujung hero: di mode 3D produk tetap terlihat (melayang ke Our Menu) sementara teks memudar. Tanpa 3D: teks saja yang
   memudar, produk + tatakan tetap di tempat, jadi tidak ada layar kosong. */
html:not(.has-3d) .w-hero-in { opacity: 1; }
html:not(.has-3d) .w-hero-in > :not(.w-hero-spot) { opacity: var(--hp, 1); }
/* begitu layar judul Discover di tengah, produk hero "pindah" ke bingkai (di 3D satu produk yang sama bergerak): sembunyikan yang di hero */
html:not(.has-3d) .w-spot-fb { transition: opacity .35s ease; }
html.disc-title:not(.has-3d) .w-spot-fb, html:not(.has-3d) .w-discover[data-stage="list"] ~ * .w-spot-fb { opacity: 0; }

/* Discover, layar judul: di dalam bingkai persegi (spotPose 0,8) */
.w-fb-title { position: absolute; left: 17.2%; width: 65.6%; top: 10%; height: 85%; }
.w-fb-title .w-fb-item { bottom: auto; }
.w-discover[data-stage="list"] .w-fb-title { opacity: 0; transition: opacity .3s; }

/* Discover, daftar menu: posisi pose "discover" (desktop kanan, tablet kanan, ponsel tengah) */
.w-disc-fb { position: absolute; z-index: 0; width: 50vh; left: 72%; margin-left: -25vh; top: 66%; margin-top: -50vh; }
.w-disc-fb .w-fb-item { bottom: auto; }
.w-discover[data-stage="title"] .w-disc-fb { opacity: 0; }
.w-disc-fb { transition: opacity .35s ease; }
.w-disc-in { position: relative; z-index: 1; }
@media (min-width: 760px) and (max-width: 1099px) { .w-disc-fb { width: 34vh; left: 70%; margin-left: -17vh; top: 65%; margin-top: -34vh; } }
@media (max-width: 759px) { .w-disc-fb { width: 31vh; left: 50%; margin-left: -15.5vh; top: 56%; margin-top: -31vh; } }

/* Find Us, ulasan, About: clover tegak sebagai logo (desktop besar di sisi kosong; ponsel kecil redup kanan-atas) */
html:not(.has-3d) #findus, html:not(.has-3d) #about, html:not(.has-3d) .w-rvs { position: relative; }
html:not(.has-3d) #findus::before, html:not(.has-3d) #about::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; top: 50%; width: 38vh; height: 39.4vh; margin-top: -19.7vh;
  background: url("img/clover/clover-logo.png") center / contain no-repeat; }
html:not(.has-3d) #findus::before { left: 6%; }
html:not(.has-3d) #about::before { right: 8%; }
html:not(.has-3d) #findus > *, html:not(.has-3d) #about > * { position: relative; z-index: 1; }
@media (max-width: 1099px) {
  html:not(.has-3d) #findus::before, html:not(.has-3d) #about::before { top: 48px; right: 4%; left: auto; width: 22vh; height: 22.8vh; margin-top: 0; opacity: .28; }
}

/* Browser lama (Chrome < 72): gradien "#000 0 0" untuk masker cahaya tepi belum dikenal -> lapisan cahaya menutup layar.
   Ganti dengan bingkai cahaya statis yang tampilannya sama (garis hijau + pendar di tepi layar). */
.perf-old .w-glow .gl { display: none; }
.perf-old .glow-on .w-glow, .perf-old.glow-on .w-glow { border-radius: 26px;
  box-shadow: inset 0 0 0 2.5px #2BD46A, inset 0 0 18px 4px rgba(177, 229, 122, .75), inset 0 0 70px 14px rgba(27, 180, 84, .35); }