/* Hallmark · shape: product story · genre: editorial · theme: brand (LHP cream, green, gold; dark: deep green paper) · redesign: full, two languages and two themes · job: try · hero: Stage · nav: floating pill · footer: mast · imagery: the product, real app screenshots with fictitious patients, two YouTube videos · signature: six real result screens in a parameter switcher */
/* Critique: the old page spoke one language on one paper; this one keeps the same page and gives it a second voice (English under /en/) and a second paper (dark, from the brand's deep green), with the videos and the guide where a visitor looks for them. */
/* antislop: during. Dials ENERGY 2 / RHYTHM 2 / MOTION 2. Reasons: palette is the app's own (cream, sand, green, gold); Google Sans because the app ships it; dark paper is deep green rather than grey so both modes stay the same brand; motion is entrance and reveal only, transform and opacity, one reveal per element. */
:root {
  color-scheme: light dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 4.6vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-figure: clamp(4.5rem, 9vw, 9rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: light-dark(oklch(52% 0.19 27), oklch(78% 0.17 27)); --color-success: light-dark(oklch(50% 0.12 150), oklch(78% 0.14 150));
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Palet merek LHP (lhpv2/lib/app/theme/app_tokens.dart): cream #FBF5DD, sand #E7E1B1, green #306D29, deep green #0D530E, gold #FFD76A.
     Setiap token: light-dark(terang, gelap). Mode gelap memakai kertas hijau-gelap dari deep green, bukan abu-abu, agar tetap satu merek. */
  --color-paper: light-dark(oklch(98% 0.016 95), oklch(23% 0.028 150));
  --color-paper-2: light-dark(oklch(96.9% 0.032 95), oklch(27% 0.03 150));
  --color-paper-3: light-dark(oklch(92.6% 0.052 100), oklch(32% 0.035 148));
  --color-ink: light-dark(oklch(24% 0.032 142), oklch(96% 0.02 95));
  --color-ink-2: light-dark(oklch(36% 0.03 140), oklch(86% 0.025 100));
  --color-muted: light-dark(oklch(50% 0.03 125), oklch(75% 0.03 110));
  --color-rule: light-dark(oklch(87.5% 0.035 100), oklch(38% 0.03 148));
  --color-accent: light-dark(oklch(47.8% 0.119 142), oklch(78% 0.15 142));
  --color-accent-hover: light-dark(oklch(42% 0.12 143), oklch(84% 0.16 142));
  --color-accent-ink: light-dark(oklch(98% 0.016 95), oklch(16% 0.04 145));
  --color-focus: light-dark(oklch(50% 0.19 142), oklch(84% 0.17 140));
  --color-field: light-dark(oklch(38.6% 0.12 143), oklch(31% 0.08 145));
  --color-field-2: light-dark(oklch(33% 0.1 143), oklch(18% 0.03 150));
  --color-field-ink: light-dark(oklch(96.9% 0.032 95), oklch(95% 0.02 95));
  --color-field-muted: light-dark(oklch(86% 0.06 110), oklch(80% 0.05 110));
  --color-field-rule: light-dark(oklch(50% 0.09 142), oklch(40% 0.08 142));
  --color-seal: light-dark(oklch(89.2% 0.135 89), oklch(86% 0.14 89));
  --color-seal-ink: light-dark(oklch(30% 0.06 90), oklch(25% 0.06 90));
  --color-stage-glow: light-dark(oklch(89.2% 0.135 89), oklch(38% 0.07 89));
  --color-warn: light-dark(oklch(52% 0.13 55), oklch(84% 0.13 60));
  --color-warn-paper: light-dark(oklch(94% 0.04 70), oklch(33% 0.055 60));
  --color-ok: light-dark(oklch(47.8% 0.119 142), oklch(82% 0.14 142));
  --color-ok-paper: light-dark(oklch(94% 0.05 130), oklch(32% 0.065 142));
  --color-shadow: light-dark(oklch(25% 0.04 142 / 0.16), oklch(0% 0 0 / 0.6));
  --color-shadow-soft: light-dark(oklch(25% 0.04 142 / 0.08), oklch(0% 0 0 / 0.35));
  --color-scrim: light-dark(oklch(20% 0.03 142 / 0.55), oklch(0% 0 0 / 0.7));
  --color-video: oklch(16% 0.02 150);

  --font-display: "Google Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Google Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Metric Display", "Roboto", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --display-weight: 700;
  --tracking-display: -0.035em;

  --radius-shot: 28px; --radius-card: 20px; --radius-inner: 12px; --radius-pill: 999px;
  --rule-hair: 1px;
  --shadow-card: 0 1px 2px var(--color-shadow-soft);
  --shadow-shot: 0 30px 60px -24px var(--color-shadow), 0 0 0 1px light-dark(oklch(30% 0.03 142 / 0.08), oklch(100% 0 0 / 0.08));
  --nav-height: 64px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@font-face { font-family: "Google Sans"; src: url("/assets/fonts/GoogleSans-Regular-v69.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("/assets/fonts/GoogleSans-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("/assets/fonts/GoogleSans-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Metric Display"; src: url("/assets/fonts/MetricDisplay-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: calc(var(--nav-height) + var(--space-xl)); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); font-synthesis: none; }
::selection { background: color-mix(in oklab, var(--color-accent) 30%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.04; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); }
h2 { max-width: 30ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.015em; }
.lead { font-size: var(--text-lead); line-height: 1.5; max-width: 52ch; color: var(--color-ink-2); }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video, iframe { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a[href], button:not(:disabled), summary, label[for], [role="button"], [role="tab"] { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2), var(--color-paper-3)); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Pergantian tema: selama 360 ms semua warna meluncur, lalu kelas dilepas oleh skrip. */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color 360ms var(--ease-out), color 360ms var(--ease-out), border-color 360ms var(--ease-out), box-shadow 360ms var(--ease-out), fill 360ms var(--ease-out) !important; }

/* ---------- Utilitas ---------- */
.skip-link { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-tooltip); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip-link:focus { top: var(--space-md); }
.icon { width: 20px; height: 20px; flex: none; }
.figure { font-family: var(--font-outlier); font-weight: 900; letter-spacing: -0.01em; line-height: 0.9; }
.section { padding-block: var(--section-gap); }
.section-tight { padding-block: var(--space-2xl) var(--section-gap-s); }
.section-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); max-width: 60rem; }
.section-head-row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-lg); }
.section-lead { margin-top: var(--space-md); margin-bottom: var(--space-xl); }

/* ---------- Tombol dan tautan ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); border: 1px solid transparent; font-weight: 500; font-size: var(--text-md); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-small { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-quiet { color: var(--color-ink); border-color: var(--color-rule); background: var(--color-paper); }
.btn-quiet:hover { border-color: var(--color-ink-2); }
.btn-outline { color: var(--color-ink); border-color: var(--color-ink); background: transparent; }
.btn-outline:hover { background: var(--color-ink); color: var(--color-paper); }
.store-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.text-link { color: var(--color-accent); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.text-link:hover { text-decoration-color: currentColor; }
.text-link-light { color: var(--color-seal); }

/* ---------- Navigasi: pil mengambang ---------- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); padding-top: var(--space-sm); pointer-events: none; }
.nav { pointer-events: auto; display: flex; align-items: center; gap: var(--space-lg); height: var(--nav-height); padding: 0 var(--space-xs) 0 var(--space-md); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-paper) 92%, transparent); border: 1px solid var(--color-rule); backdrop-filter: blur(10px); transition: box-shadow var(--dur-long) var(--ease-out); }
.site-header.is-scrolled .nav { box-shadow: 0 10px 30px -18px var(--color-shadow); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; font-weight: 700; letter-spacing: -0.02em; font-size: 1.0625rem; margin-right: auto; }
.logo-tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-field); }
.logo-tile img { width: 26px; height: 26px; }
.site-menu { display: flex; align-items: center; gap: var(--space-2xs); }
.site-menu a:not(.btn) { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); text-decoration: none; color: var(--color-ink-2); font-weight: 500; font-size: var(--text-sm); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.site-menu a:not(.btn):hover { background: var(--color-paper-2); color: var(--color-ink); }
.site-menu a[aria-current="page"]:not(.btn) { color: var(--color-ink); background: var(--color-paper-3); }
.nav-download { margin-left: var(--space-xs); }
.menu-lang { display: none; }
.nav-tools { display: flex; align-items: center; gap: var(--space-xs); order: 2; }
.menu-toggle, .theme-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: var(--color-paper); align-items: center; justify-content: center; cursor: pointer; color: var(--color-ink-2); transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.menu-toggle:hover, .theme-toggle:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.js .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; }
.theme-toggle .icon { grid-area: 1 / 1; transition: opacity var(--dur-short) var(--ease-out), transform 480ms var(--ease-out); }
.js .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
:root[data-theme="dark"].js .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
:root[data-theme="dark"].js .theme-toggle .icon-moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).js .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
  :root:not([data-theme="light"]).js .theme-toggle .icon-moon { opacity: 1; transform: none; }
}
.lang-switch { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.lang-switch a { display: inline-grid; place-items: center; min-width: 36px; height: 32px; padding-inline: var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; text-decoration: none; color: var(--color-muted); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.lang-switch a[aria-current] { background: var(--color-ink); color: var(--color-paper); }
.lang-switch a:not([aria-current]):hover { color: var(--color-ink); }

/* ---------- Bingkai layar: slot membulat, tanpa bingkai perangkat ---------- */
.shot { margin: 0; aspect-ratio: 720 / 1458; border-radius: var(--radius-shot); box-shadow: var(--shadow-shot); background: var(--color-paper-2); }
.shot > img { object-position: top center; }

/* ---------- Hero: panggung ---------- */
.hero { padding-block: var(--space-2xl) var(--section-gap-s); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.hero-copy { display: grid; gap: var(--space-lg); justify-items: start; }
.hero-copy h1 { max-width: 13ch; }
.hero-copy .lead { max-width: 30ch; }
.hero-note { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }
.hero-note .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--color-accent); }
.hero-stage { position: relative; height: clamp(520px, calc(100svh - 170px), 680px); }
.stage-panel { position: absolute; inset: 6% calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2))) 0 12%; border-radius: var(--radius-shot) 0 0 var(--radius-shot); background: radial-gradient(120% 90% at 85% 10%, var(--color-stage-glow) 0%, color-mix(in oklab, var(--color-stage-glow) 0%, var(--color-paper-3)) 55%), var(--color-paper-3); }
.hero-stage .shot { position: absolute; height: 92%; width: auto; }
.shot-back { left: 18%; top: 0; transform: rotate(-4deg); opacity: 0.96; }
.shot-front { left: 46%; top: 8%; transform: rotate(3deg); }
.stage-tag { position: absolute; left: 6%; bottom: 10%; z-index: var(--z-raised); display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-field); color: var(--color-field-ink); font-weight: 500; font-size: var(--text-sm); box-shadow: 0 16px 30px -16px var(--color-shadow); }
.stage-tag .icon { width: 18px; height: 18px; color: var(--color-seal); }
.js .hero-copy > * { animation: fade-up 640ms var(--ease-out) backwards; }
.js .hero-copy > :nth-child(2) { animation-delay: 90ms; }
.js .hero-copy > :nth-child(3) { animation-delay: 180ms; }
.js .hero-copy > :nth-child(4) { animation-delay: 270ms; }
.js .hero-stage .shot-back { animation: rise-back var(--dur-long) var(--ease-out) 120ms both; }
.js .hero-stage .shot-front { animation: rise-front 640ms var(--ease-out) 220ms both; }
.js .stage-tag { animation: fade-up var(--dur-long) var(--ease-out) 520ms both; }
@keyframes rise-back { from { opacity: 0; transform: translateY(32px) rotate(-6deg); } to { opacity: 0.96; transform: rotate(-4deg); } }
@keyframes rise-front { from { opacity: 0; transform: translateY(48px) rotate(6deg); } to { opacity: 1; transform: rotate(3deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal tunggal dan reveal bertingkat ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-stagger]:not(.is-in) > * { opacity: 0; }
.js [data-stagger].is-in > * { animation: fade-up 600ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }

/* ---------- Signature: switcher parameter ---------- */
.switcher-section { padding-top: var(--section-gap-s); background: linear-gradient(var(--color-paper), var(--color-paper-2)); }
.switch-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-xl); }
.switch-tab { display: grid; gap: var(--space-2xs); justify-items: start; padding: var(--space-md); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.switch-tab:hover { border-color: var(--color-ink-2); }
.switch-tab[aria-selected="true"] { background: var(--color-field); border-color: var(--color-field); color: var(--color-field-ink); }
.switch-code { font-family: var(--font-outlier); font-weight: 900; font-size: clamp(1.75rem, 2.4vw, 2.5rem); line-height: 1; letter-spacing: -0.01em; }
.switch-tab[aria-selected="true"] .switch-code { color: var(--color-seal); }
.switch-name { font-size: var(--text-sm); color: var(--color-muted); }
.switch-tab[aria-selected="true"] .switch-name { color: var(--color-field-muted); }
.switch-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; padding: var(--space-xl); border-radius: calc(var(--radius-shot) + var(--space-md)); background: var(--color-paper); border: 1px solid var(--color-rule); }
.switch-panel:focus-visible { outline-offset: 6px; }
.switch-shot { width: 100%; max-width: 360px; justify-self: center; aspect-ratio: 720 / 1060; }
.switch-copy { display: grid; gap: var(--space-md); justify-items: start; align-content: center; }
.switch-reading { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.switch-reading .figure { font-size: var(--text-figure); color: var(--color-ink); }
.switch-unit { font-size: var(--text-xl); color: var(--color-muted); font-weight: 500; }
.status { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-sm); }
.status-ok { background: var(--color-ok-paper); color: var(--color-ok); }
.status-warn { background: var(--color-warn-paper); color: var(--color-warn); }
.switch-copy h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
.switch-copy > p:not([class]) { color: var(--color-ink-2); font-size: var(--text-lg); max-width: 40ch; }
.switch-sample { font-size: var(--text-sm); color: var(--color-muted); }
.js .switch-panel:not([hidden]) .switch-shot { animation: shot-in var(--dur-long) var(--ease-out) both; }
.js .switch-panel:not([hidden]) .switch-copy { animation: fade-up var(--dur-long) var(--ease-out) 60ms both; }
@keyframes shot-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Video: promosi di beranda, tutorial di panduan ---------- */
.video-section { background: var(--color-paper-2); }
.video-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: center; }
.video-grid .section-head { margin-bottom: 0; justify-items: start; }
.video-frame { margin: 0; aspect-ratio: 16 / 9; border-radius: var(--radius-shot); overflow: hidden; box-shadow: var(--shadow-shot); background: var(--color-video); }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.js .video-frame[data-reveal] { transform: translateY(24px) scale(0.97); }
.js .video-frame[data-reveal].is-in { transform: none; }

/* ---------- Langkah: layar menempel ---------- */
.steps-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); min-height: 46svh; align-content: center; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.step-num { font-size: var(--text-3xl); color: var(--color-rule); transition: color var(--dur-long) var(--ease-out); min-width: 1.4ch; }
.step.is-on .step-num { color: var(--color-accent); }
.step h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; margin-bottom: var(--space-sm); }
.step p { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 36ch; }
.step-shot { display: none; }
.steps-stage { position: relative; }
.steps-frame { position: sticky; top: calc(var(--nav-height) + var(--space-2xl)); height: min(76svh, 700px); aspect-ratio: 720 / 1458; margin-inline: auto; }
.frame { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.frame.is-on { opacity: 1; transform: none; }

/* ---------- Pita hijau: privasi dan bahasa ---------- */
.field-band { background: var(--color-field); color: var(--color-field-ink); padding-block: var(--section-gap); overflow: clip; }
.field-band-tight { padding-block: var(--section-gap-s); }
.field-band .lead { color: var(--color-field-muted); }
.field-band h2 { color: var(--color-field-ink); }
.field-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.field-copy { display: grid; gap: var(--space-lg); justify-items: start; }
.field-copy h2 { max-width: 14ch; }
.langs h3 { color: var(--color-field-muted); font-size: var(--text-lg); font-weight: 500; letter-spacing: 0; margin-bottom: var(--space-lg); }
.lang-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.lang { margin: 0; display: grid; gap: var(--space-sm); }
.lang:nth-child(2) { transform: translateY(var(--space-xl)); }
.lang-shot { box-shadow: 0 30px 60px -24px var(--color-scrim); }
.lang figcaption { font-weight: 500; color: var(--color-field-ink); }

/* ---------- Belajar: bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); align-items: stretch; }
.bento-cert { grid-column: 1 / span 6; grid-row: 1; margin: 0; padding: var(--space-xl); border-radius: calc(var(--radius-shot) + var(--space-xs)); background: var(--color-paper-3); display: grid; gap: var(--space-md); align-content: center; }
.cert-slot { aspect-ratio: 880 / 620; border-radius: var(--radius-inner); box-shadow: var(--shadow-shot); transform: rotate(-1.5deg); }
.bento-cert figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
.bento-facts { grid-column: 1 / span 6; grid-row: 2; margin: 0; display: grid; gap: 0; align-content: center; padding: var(--space-md) var(--space-xl); border-radius: calc(var(--radius-shot) + var(--space-xs)); border: 1px solid var(--color-rule); }
.bento-facts div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.bento-facts div:last-child { border-bottom: 0; }
.bento-facts dd { margin: 0; order: -1; font-size: clamp(3rem, 5vw, 4.5rem); color: var(--color-accent); min-width: 1.6ch; }
.bento-facts dt { font-size: var(--text-lg); color: var(--color-ink-2); }
.bento-shot { grid-row: 1 / span 2; align-self: center; }
.bento-shot-a { grid-column: 7 / span 3; transform: translateY(calc(-1 * var(--space-xl))); }
.bento-shot-b { grid-column: 10 / span 3; transform: translateY(var(--space-xl)); }

/* ---------- Rel artikel ---------- */
.articles-section { background: var(--color-paper-2); }
.rail-wrap { max-width: var(--container); margin-inline: auto; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: var(--space-lg); overflow-x: auto; padding: var(--space-2xs) var(--gutter) var(--space-lg); scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.rail .article-card { scroll-snap-align: start; }
.article-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-card); background: var(--color-paper); border: 1px solid var(--color-rule); overflow: hidden; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.article-card:hover { border-color: var(--color-ink-2); transform: translateY(-3px); box-shadow: 0 18px 36px -24px var(--color-shadow); }
.article-thumb { display: block; aspect-ratio: 16 / 9; }
.article-thumb img { transition: transform var(--dur-long) var(--ease-out); }
.article-card:hover .article-thumb img { transform: scale(1.03); }
.article-body-wrap { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-lg); }
.article-title { font-weight: 700; font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.015em; }
.article-excerpt { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); margin-top: auto; }
.article-meta span:first-child { color: var(--color-accent); font-weight: 500; }

/* ---------- Open source ---------- */
.oss-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.oss-grid .section-head { margin-bottom: 0; justify-items: start; }
.oss-list { display: grid; border-top: 1px solid var(--color-ink); }
.repo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon main go" "icon tags go"; column-gap: var(--space-lg); row-gap: var(--space-sm); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); text-decoration: none; }
.repo-row .repo-icon { grid-area: icon; }
.repo-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-inner); background: var(--color-paper-3); color: var(--color-accent); }
.repo-main { grid-area: main; display: grid; gap: var(--space-2xs); }
.repo-name { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.repo-summary { color: var(--color-ink-2); }
.repo-row .repo-tags { grid-area: tags; }
.repo-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.tag { display: inline-flex; padding: 2px var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); border: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-ink-2); }
.tag-public { background: var(--color-ok-paper); color: var(--color-ok); border-color: transparent; }
.repo-go { grid-area: go; align-self: center; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.repo-row:hover .repo-go { color: var(--color-accent); transform: translate(2px, -2px); }
.repo-row:hover .repo-name { color: var(--color-accent); }
.team-row { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-xl); text-decoration: none; }
.avatars { display: flex; flex: none; }
.avatars img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-paper); margin-left: -12px; background: var(--color-paper-3); }
.avatars img:first-child { margin-left: 0; }
.team-text { color: var(--color-ink-2); }
.team-link { color: var(--color-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Penutup: unduh ---------- */
.close-band { background: var(--color-paper-3); padding-top: var(--section-gap); overflow: clip; }
.close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
.close-copy { display: grid; gap: var(--space-lg); justify-items: start; padding-bottom: var(--section-gap-s); }
.close-copy .close-note { margin-top: var(--space-md); }
.close-copy h2 { font-size: var(--text-display-s); max-width: 16ch; }
.qr { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm); padding-right: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper); }
.qr img { width: 96px; height: 96px; border-radius: var(--radius-inner); }
.qr p { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 22ch; }
.close-stage { align-self: end; display: flex; justify-content: center; }
.close-shot { width: min(100%, 380px); margin-bottom: -42%; transform: rotate(-2deg); }
.close-note { padding-top: var(--space-lg); border-top: 1px solid color-mix(in oklab, var(--color-ink) 18%, transparent); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 52ch; }
.close-note a { color: var(--color-ink); font-weight: 500; }

/* ---------- Footer: mast ---------- */
.site-footer { background: var(--color-field-2); color: var(--color-field-ink); padding-block: var(--space-3xl) var(--space-xl); }
.footer-mast { display: grid; gap: var(--space-lg); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-field-rule); }
.footer-wordmark { display: flex; align-items: center; gap: var(--space-lg); text-decoration: none; font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; font-size: clamp(2.75rem, 7.6vw, 7.5rem); }
.footer-wordmark img { width: clamp(56px, 7vw, 104px); height: auto; }
.footer-line { color: var(--color-field-muted); max-width: 48ch; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-2xl); }
.footer-links h2 { font-size: var(--text-md); letter-spacing: 0; color: var(--color-seal); margin-bottom: var(--space-md); }
.footer-links a, .footer-institution { display: block; width: fit-content; padding-block: var(--space-2xs); color: var(--color-field-ink); text-decoration: none; overflow-wrap: anywhere; }
.footer-links a:hover { text-decoration: underline; }
.footer-institution { color: var(--color-field-muted); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); font-size: var(--text-xs); color: var(--color-field-muted); }

/* ---------- Kepala halaman dalam ---------- */
.page-head { padding-block: var(--space-3xl) var(--space-xl); }
.page-head .container { display: grid; gap: var(--space-lg); justify-items: start; }
.page-head h1 { font-size: var(--text-display-s); max-width: 22ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.updated { font-size: var(--text-sm); color: var(--color-muted); }
.page-note { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.js .page-head .container > * { animation: fade-up 640ms var(--ease-out) backwards; }
.js .page-head .container > :nth-child(2) { animation-delay: 90ms; }
.js .page-head .container > :nth-child(3) { animation-delay: 180ms; }

/* ---------- Indeks artikel ---------- */
.article-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); }
.search { display: flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding-inline: var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: var(--color-paper); width: min(100%, 360px); }
.search:focus-within { border-color: var(--color-accent); }
.search input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; }
.search .icon { color: var(--color-muted); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.filter { min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-pill); border: 1px solid var(--color-rule); background: var(--color-paper); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.filter:hover { border-color: var(--color-ink-2); }
.filter.active { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.empty-results { grid-column: 1 / -1; padding: var(--space-xl); border-radius: var(--radius-card); border: 1px dashed var(--color-rule); color: var(--color-ink-2); }

/* ---------- Detail artikel ---------- */
.read-head { display: grid; gap: var(--space-lg); justify-items: start; padding-top: var(--space-3xl); max-width: calc(52rem + 2 * var(--gutter)); }
.read-head h1 { font-size: var(--text-display-s); }
.back-link { font-size: var(--text-sm); color: var(--color-ink-2); }
.article-meta-detail { font-size: var(--text-sm); }
.read-banner { aspect-ratio: 16 / 9; max-height: 560px; width: 100%; border-radius: var(--radius-shot); margin-block: var(--space-2xl); }
.read-grid { display: grid; grid-template-columns: minmax(0, 52rem) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; padding-bottom: var(--section-gap-s); }
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--text-2xl); letter-spacing: -0.025em; margin-top: var(--space-2xl); line-height: 1.15; }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-lg); letter-spacing: -0.01em; }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2xs); }
.prose li::marker { color: var(--color-accent); }
.prose a { color: var(--color-accent); }
.prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--color-paper-2); }
.source-box { position: sticky; top: calc(var(--nav-height) + var(--space-xl)); display: grid; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.source-box h2 { font-size: var(--text-md); letter-spacing: 0; color: var(--color-ink); }
.source-ids { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.related { background: var(--color-paper-2); }
.related h2 { margin-bottom: var(--space-xl); font-size: var(--text-2xl); }

/* ---------- Tentang ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: center; }
.about-mark { aspect-ratio: 1; border-radius: var(--radius-shot); background: var(--color-paper-3); display: grid; place-items: center; padding: var(--space-2xl); }
.about-copy { display: grid; gap: var(--space-md); }
.about-copy h2 { margin-bottom: var(--space-xs); }
.about-copy p { font-size: var(--text-lg); color: var(--color-ink-2); }
.team-section { background: var(--color-paper-2); }
.team-section > .container > h2 { margin-bottom: var(--space-2xl); }
.team-group + .team-group { margin-top: var(--space-2xl); }
.team-group h3 { font-size: var(--text-lg); padding-bottom: var(--space-md); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); max-width: none; }
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.person { display: grid; gap: var(--space-2xs); }
.person-photo { display: block; aspect-ratio: 1; border-radius: var(--radius-card); margin-bottom: var(--space-sm); max-width: 280px; }
.person-name { font-weight: 700; line-height: 1.3; }
.person-role { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- Open source (halaman) ---------- */
.repo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.repo-card { display: grid; gap: var(--space-lg); align-content: start; padding: var(--space-xl); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper); }
.repo-card-head { display: flex; gap: var(--space-md); align-items: flex-start; }
.repo-card h3 { font-size: var(--text-xl); }
.repo-card code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.repo-card > p:not([class]) { color: var(--color-ink-2); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.check-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); color: var(--color-ink-2); }
.check-list .icon { color: var(--color-accent); width: 18px; height: 18px; margin-top: 3px; }
.repo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.boundary-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.boundary-grid > div { display: grid; gap: var(--space-lg); justify-items: start; }
.boundary-list { margin: 0; display: grid; }
.boundary-list div { padding-block: var(--space-lg); border-top: 1px solid var(--color-field-rule); }
.boundary-list dt { font-weight: 700; color: var(--color-seal); margin-bottom: var(--space-2xs); }
.boundary-list dd { margin: 0; color: var(--color-field-muted); }
.contribute { list-style: none; margin: 0 0 var(--space-2xl); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.contribute li { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.contribute .step-num { color: var(--color-accent); font-size: var(--text-3xl); }
.contribute h3 { font-size: var(--text-lg); }
.contribute p { color: var(--color-ink-2); font-size: var(--text-sm); }
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-warn-paper); }
.callout > .icon { width: 28px; height: 28px; color: var(--color-warn); }
.callout h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }

/* ---------- Legal ---------- */
.legal-grid { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 46rem); gap: var(--space-3xl); align-items: start; }
.toc { position: sticky; top: calc(var(--nav-height) + var(--space-xl)); max-height: calc(100svh - var(--nav-height) - 4rem); overflow: auto; padding-right: var(--space-xs); }
.toc h2 { font-size: var(--text-sm); letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-sm); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-inner); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; line-height: 1.4; }
.toc a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.legal-copy section { padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.legal-copy section:first-child { border-top: 0; padding-top: 0; }
.legal-copy section > * + * { margin-top: var(--space-md); }
.legal-copy section > h2 { margin-top: 0; font-size: var(--text-xl); max-width: none; }
.legal-copy ul { padding-left: 1.25em; }
.legal-callout, .warning-box { padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-warn-paper); border-left: 4px solid var(--color-warn); }
.warning-box p { margin-top: var(--space-xs); }

/* ---------- Unduh (halaman) ---------- */
.install-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); }
.offer { display: grid; gap: var(--space-md); align-content: start; justify-items: start; padding: var(--space-xl); border-radius: var(--radius-card); border: 1px solid var(--color-rule); grid-column: span 4; }
.offer h2 { font-size: var(--text-2xl); }
.offer > p { color: var(--color-ink-2); }
.offer-main { background: var(--color-paper-3); border-color: transparent; }
.offer-note { background: var(--color-paper-2); border-color: transparent; }
.offer-guide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.offer-guide h2 { grid-column: 1 / -1; }
.qr-inline { margin-top: var(--space-sm); }

/* ---------- Panduan (halaman) ---------- */
.guide-viewer { aspect-ratio: 4 / 5; max-height: 85svh; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-rule); background: var(--color-paper-2); box-shadow: var(--shadow-card); }
.guide-viewer iframe { width: 100%; height: 100%; border: 0; }
.guide-fallback, .guide-note { font-size: var(--text-sm); color: var(--color-muted); }
.guide-fallback { margin-top: var(--space-md); }
.guide-note { margin-bottom: var(--space-md); }
.guide-fallback a { color: var(--color-accent); }
.guide-pending { display: grid; gap: var(--space-md); justify-items: start; padding: var(--space-2xl); border-radius: var(--radius-card); border: 1px dashed var(--color-rule); background: var(--color-paper-2); }
.guide-pending h2 { font-size: var(--text-xl); max-width: none; }
.guide-pending p { color: var(--color-ink-2); max-width: 56ch; }

/* ---------- Responsif ---------- */
@media (max-width: 75rem) {
  .switch-panel { gap: var(--space-2xl); }
}

@media (max-width: 60rem) {
  .menu-toggle { display: inline-flex; }
  .lang-switch { display: none; }
  .menu-lang { display: block; }
  .site-menu { position: absolute; top: calc(100% + var(--space-xs)); left: var(--gutter); right: var(--gutter); display: grid; gap: var(--space-2xs); padding: var(--space-sm); border-radius: var(--radius-card); background: var(--color-paper); border: 1px solid var(--color-rule); box-shadow: 0 24px 40px -20px var(--color-shadow); opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
  .site-menu.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .site-menu a:not(.btn) { padding: var(--space-sm) var(--space-md); font-size: var(--text-md); }
  .nav-download { margin: var(--space-2xs) 0 0; }
  .nav-shell { position: relative; }

  .hero-grid, .field-grid, .oss-grid, .close-grid, .about-grid, .boundary-grid, .steps-grid, .video-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: var(--space-xl); }
  .hero-stage { height: 560px; margin-top: var(--space-lg); }
  .stage-panel { inset: 6% calc(-1 * var(--gutter)) 0 calc(-1 * var(--gutter)); border-radius: 0; }
  .shot-back { left: 6%; }
  .shot-front { left: auto; right: 6%; }

  .switch-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .switch-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); padding: var(--space-lg); gap: var(--space-xl); }

  .steps-stage { display: none; }
  .step { min-height: 0; grid-template-columns: auto minmax(0, 1fr); }
  .step-shot { display: block; grid-column: 2; width: min(100%, 300px); margin-top: var(--space-lg); }
  .step .step-num { color: var(--color-accent); }

  .lang:nth-child(2) { transform: none; }
  .bento-cert, .bento-facts { grid-column: 1 / -1; grid-row: auto; }
  .bento-shot, .bento-shot-a, .bento-shot-b { grid-row: auto; grid-column: span 6; transform: none; }

  .close-shot { width: min(72%, 340px); margin-bottom: -40%; }
  .close-copy { padding-bottom: var(--space-xl); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .read-grid, .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .source-box, .toc { position: static; max-height: none; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contribute { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer { grid-column: span 6; }
  .offer-note, .offer-guide { grid-column: 1 / -1; }
  .install-grid-play .offer-main, .install-grid-play .offer-note { grid-column: 1 / -1; }
  .guide-viewer { aspect-ratio: 3 / 4; }
}

@media (max-width: 40rem) {
  .nav { padding-left: var(--space-sm); gap: var(--space-sm); }
  .wordmark { font-size: 1rem; }
  .hero-stage { height: 440px; }
  .hero-stage .shot { height: 88%; }
  .shot-back { left: 2%; }
  .shot-front { right: 2%; top: 10%; }
  .stage-tag { left: 0; bottom: 4%; }
  .btn { min-height: 50px; }
  .store-actions { width: 100%; }
  .store-actions .btn { flex: 1 1 100%; }

  .switch-tabs { gap: var(--space-2xs); }
  .switch-tab { padding: var(--space-sm); }
  .switch-name { font-size: var(--text-xs); }
  .switch-panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg) var(--space-md); }
  .switch-shot { max-width: 240px; }
  .switch-reading .figure { font-size: clamp(3.5rem, 18vw, 4.5rem); }

  .step { gap: var(--space-md); padding-block: var(--space-lg); }
  .step-shot { width: min(100%, 240px); }

  .lang-row { grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: var(--space-sm); }
  .lang { scroll-snap-align: start; }

  .bento-cert { padding: var(--space-md); }
  .bento-facts { padding: var(--space-xs) var(--space-lg); }
  .section-head-row { grid-template-columns: minmax(0, 1fr); }
  .section-head-row .btn { justify-self: start; }
  .rail { grid-auto-columns: 78%; }
  .video-frame { border-radius: var(--radius-card); }

  .repo-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon main" "icon tags"; }
  .repo-go { display: none; }
  .team-row { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .qr { width: 100%; }
  .close-shot { width: min(80%, 300px); }

  .footer-links { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .article-grid, .contribute { grid-template-columns: minmax(0, 1fr); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer { grid-column: 1 / -1; }
  .offer-guide { grid-template-columns: minmax(0, 1fr); }
  .callout { grid-template-columns: minmax(0, 1fr); }
  .guide-pending { padding: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-stagger]:not(.is-in) > * { opacity: 1; transform: none; }
  .frame { transform: none; }
}

/* Tanpa JavaScript: semua panel parameter tampil berurutan, kontrol yang butuh skrip disembunyikan. */
html:not(.js) .switch-tabs, html:not(.js) .article-toolbar { display: none; }
html:not(.js) .switch-panel + .switch-panel { margin-top: var(--space-lg); }