/* Clarity, "Blok Clarity": the logo's sky blues in a pixel/voxel Minecraft world.
   Blue = brand, gold = action, red = discount/urgency, emerald = savings/stock, ink = text.
   Pixel corners come from box-shadow edges (buttons, cards) or stepped clip-paths (panels).
   Motion only touches transform/translate/scale/rotate/opacity/filter; all of it stops under reduced motion. */

@view-transition { navigation: auto; }

:root {
  --sky: #31A3D4;
  --ocean: #1191C8;
  --deep: #0B6FA0;
  --night: #08466D;
  --ink: #0B3550;
  --ink-2: #3F6177;
  --paper: #F3F9FC;
  --tint: #E4F3FA;
  --line: #C6E2F0;
  --line-2: #D9EDF7;
  --edge-strong: #6B8DA3;
  --gold: #FFC93C;
  --gold-2: #D9961A;
  --gold-tint: #FFF3CC;
  --star: #B57300;
  --red: #B01C2E;
  --red-text: #B3261E;
  --emerald: #0A6B3B;
  --emerald-tint: #DCF5E6;
  --emerald-pop: #3DDB85;
  --grass: #5DB83A;
  --focus: var(--deep);

  --font-display: "Tiny5", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* layar lebar ikut terisi (maks 1440px), layar biasa tetap 1120px */
  --wrap: clamp(1120px, 78vw, 1440px);
  --gutter: clamp(16px, 4vw, 32px);
  --header-top: 10px;
  --header-h: 56px;
  --lane: 74px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --notch: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  --mc-shadow: .05em .06em 0 rgb(4 30 48 / .45);
  --notch-2: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  color-scheme: light;
  /* Tiny5 has one weight; never fake a bold (it smears the pixels) */
  font-synthesis: none;
}
@media (min-width: 900px) {
  :root { --header-h: 64px; --lane: 84px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
/* scroll halus Lenis (app.js): scroll bawaan browser yang "smooth" dimatikan supaya tidak bertabrakan */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* latar halaman: cahaya biru & emas lembut di sisi layar + pola pixel tipis, semuanya "fixed" (menempel ke layar)
   supaya bagian lain yang harus berwarna halaman (tanah di bawah garis rumput) bisa memakai latar yang sama persis */
:root {
  --page-bg:
    radial-gradient(42vw 55vh at 0% 30%, rgb(49 163 212 / .22), rgb(49 163 212 / 0) 70%) fixed,
    radial-gradient(38vw 50vh at 100% 72%, rgb(255 201 60 / .16), rgb(255 201 60 / 0) 70%) fixed,
    radial-gradient(30vw 40vh at 100% 8%, rgb(61 219 133 / .1), rgb(61 219 133 / 0) 70%) fixed,
    url(/assets/bg-pixels.svg) 0 0 / 120px 120px fixed,
    var(--paper);
}
/* layar sentuh (iOS tidak mendukung latar fixed): pola pixel saja, tanpa cahaya, supaya tetap menyambung */
@media (hover: none) { :root { --page-bg: url(/assets/bg-pixels.svg) 0 0 / 120px 120px, var(--paper); } }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font: 400 1rem/1.6 var(--font-body);
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--deep); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--ink); }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { line-height: 1.12; text-wrap: balance; }
/* Judul memakai font isi yang tebal; font pixel (--font-display) hanya untuk aksen kecil: badge, hitung mundur, label flash sale, nomor langkah */
h1, h2 { font-family: var(--font-body); font-weight: 800; letter-spacing: -.015em; }
ul[class], ol[class] { list-style: none; padding: 0; }
strong { font-weight: 700; }
code { font-family: var(--font-mono); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--ink); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; font-weight: 700; color: var(--ink); background: var(--gold);
  translate: 0 -200%; transition: translate .2s var(--ease-out);
}
.skip:focus { translate: 0 0; color: var(--ink); }

/* small pixel icons drawn with masks so CSS can colour them */
.ico {
  display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.ico-star { --m: url(/assets/px-star.svg); color: var(--gold); }
.ico-check { --m: url(/assets/px-check.svg); color: var(--emerald-pop); }
.ico-chat { --m: url(/assets/px-chat.svg); width: 1.15em; height: .9em; }
.ico-discord { --m: url(/assets/px-discord.svg); width: 1.26em; height: 1em; }

/* ---------- buttons: chunky game keys with a hard drop that press down ---------- */
.btn {
  --face: var(--gold);
  --text: var(--ink);
  --edge: var(--ink);
  --drop: #062538;
  --glow: rgb(255 201 60 / .6);
  --e: 3px;
  --lift: 5px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px;
  margin: var(--e) var(--e) calc(var(--e) + var(--lift));
  padding: .7rem 1.2rem .75rem;
  font: 800 1rem/1.1 var(--font-body);
  letter-spacing: .005em;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  background: var(--face);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 -4px 0 rgb(0 0 0 / .16),
    inset 0 3px 0 rgb(255 255 255 / .4),
    0 calc(var(--e) * -1) 0 var(--edge),
    calc(var(--e) * -1) 0 0 var(--edge),
    var(--e) 0 0 var(--edge),
    0 var(--e) 0 var(--edge),
    0 calc(var(--e) + var(--lift)) 0 var(--drop);
  transition: transform .2s var(--ease-back), filter .25s ease;
}
.btn:hover { color: var(--text); transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 0 12px var(--glow)); }
.btn:active {
  transform: translateY(var(--lift));
  transition-duration: .05s;
  box-shadow:
    inset 0 -4px 0 rgb(0 0 0 / .16),
    inset 0 3px 0 rgb(255 255 255 / .4),
    0 calc(var(--e) * -1) 0 var(--edge),
    calc(var(--e) * -1) 0 0 var(--edge),
    var(--e) 0 0 var(--edge),
    0 var(--e) 0 var(--edge);
}
.btn:focus-visible { outline-offset: 7px; }
.btn-blue { --face: var(--deep); --text: #fff; --glow: rgb(49 163 212 / .65); }
.btn-ghost { --face: #fff; --text: var(--ink); --edge: var(--edge-strong); --drop: var(--edge-strong); --glow: rgb(49 163 212 / .45); }
.btn-green { --face: var(--emerald-pop); --text: var(--ink); --glow: rgb(61 219 133 / .6); }
.btn-glass { --face: rgb(255 255 255 / .14); --text: #fff; --edge: rgb(255 255 255 / .5); --drop: rgb(4 30 48 / .45); --glow: rgb(255 255 255 / .35); }
.btn-sm { --lift: 4px; min-height: 42px; padding: .5rem .95rem .55rem; font-size: .9375rem; }
.btn-xs { --lift: 3px; --e: 2px; min-height: 34px; padding: .3rem .7rem .35rem; font-size: .8125rem; }
.btn-lg { --lift: 6px; min-height: 56px; padding: .85rem 1.6rem .9rem; font-size: 1.125rem; }
.btn-block { display: flex; width: calc(100% - 2 * var(--e)); }
.btn.is-copied { --face: var(--emerald-pop); --edge: var(--emerald); --drop: var(--emerald); }

/* ---------- header: floating glass bar ---------- */
.site-header { position: fixed; inset: var(--header-top) 0 auto; z-index: 50; pointer-events: none; }
.bar {
  --focus: var(--gold);
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 4px;
  width: min(100% - 20px, var(--wrap) + 28px);
  height: var(--header-h);
  margin-inline: auto;
  padding: 0 8px 0 10px;
  color: #fff;
  pointer-events: auto;
  transition: transform .35s var(--ease-out);
}
.bar::before, .bar::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--notch-2); }
.bar::before {
  background: rgb(6 52 80 / .38);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .16);
}
.bar::after { background: rgb(6 52 80 / .8); box-shadow: inset 0 -3px 0 rgb(255 201 60 / .55); opacity: 0; transition: opacity .35s ease; }
.is-scrolled .bar { transform: translateY(-4px) scale(.985); }
.is-scrolled .bar::after { opacity: 1; }
.brand { display: flex; align-items: center; margin-right: auto; padding: 6px; }
.brand img { width: auto; height: 30px; transition: transform .3s var(--ease-back); }
.brand:hover img { transform: rotate(-3deg) scale(1.05); }
.nav { display: flex; align-items: center; }
.nav a { position: relative; padding: 10px 8px; font-size: .875rem; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav a::before {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 3px;
  background: rgb(255 255 255 / .55); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.nav a:hover::before { transform: scaleX(1); }
.nav a[aria-current="page"]::before { display: none; }
.nav-pip {
  position: absolute; left: 8px; right: 8px; bottom: 3px; height: 4px;
  background: var(--gold); box-shadow: 0 2px 0 var(--gold-2);
  view-transition-name: nav-pip;
  animation: pip-in .45s var(--ease-back) both;
}
@keyframes pip-in { from { transform: scaleX(0); } }
.nav-home, .header-cta { display: none; }
.header-cta { margin-left: 10px; }
@media (min-width: 640px) {
  .nav-home { display: block; }
  .nav a { padding: 10px 12px; font-size: .9375rem; }
  .nav a::before, .nav-pip { left: 12px; right: 12px; }
  .brand img { height: 34px; }
}
@media (min-width: 820px) { .header-cta { display: inline-flex; } }

/* ---------- sky: clouds + sparkles in a lane between header and content ---------- */
.sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* lapisan parallax (app.js mengisi transform); transisi pendek membuat gerak ikut kursor terasa lembut */
[data-parallax] { transition: transform .35s var(--ease-out); will-change: transform; }
.cloud {
  position: absolute; left: 0; top: calc(var(--lane) + var(--y));
  width: var(--w); aspect-ratio: 4; opacity: var(--o, .92);
  background: url(/assets/cloud.svg) center / 100% 100% no-repeat;
  translate: var(--x) 0;
  animation: drift var(--t) linear var(--delay) infinite;
}
.c1 { --x: 8vw; --y: 2px; --w: 128px; --t: 95s; --delay: -20s; }
.c2 { --x: 46vw; --y: 22px; --w: 84px; --o: .65; --t: 70s; --delay: -52s; }
.c3 { --x: 70vw; --y: 0px; --w: 156px; --t: 120s; --delay: -86s; }
.c4 { --x: 26vw; --y: 26px; --w: 100px; --o: .5; --t: 82s; --delay: -6s; }
@keyframes drift { from { translate: -200px 0; } to { translate: calc(100vw + 40px) 0; } }
@media (max-width: 899px) { .cloud { --w: 96px; } .c2, .c4 { --w: 64px; } }

.spark {
  position: absolute; width: var(--s, 16px); aspect-ratio: 1; background: #fff;
  -webkit-mask: url(/assets/px-sparkle.svg) center / contain no-repeat; mask: url(/assets/px-sparkle.svg) center / contain no-repeat;
  animation: twinkle var(--t, 2.8s) ease-in-out var(--d, 0s) infinite;
}
.spark.gold { background: var(--gold); }
@keyframes twinkle { 0%, 100% { opacity: .15; scale: .35; } 50% { opacity: 1; scale: 1; } }
.k1 { left: 62%; top: calc(var(--lane) + 6px); --s: 14px; --d: -.6s; }
.k2 { left: 88%; top: calc(var(--lane) + 30px); --s: 18px; --t: 3.4s; --d: -1.8s; }
.k3 { left: 34%; top: calc(var(--lane) + 16px); --s: 10px; --t: 2.4s; --d: -1s; }

/* stepped grass horizon at the bottom of sky bands. The band itself is cut to the stepped shape (mask), so below the
   grass the real page background shows through with no seam. The grass layer is the same profile shifted 4px left
   and right, so the green also covers each step's side and the outline stays one continuous line. */
.terrain {
  position: relative; isolation: isolate;
  /* bagian atas sengaja tumpang tindih 2px dengan pita tangga supaya tidak ada garis celah 1px di layar mana pun */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 30px) no-repeat, url(/assets/edge-sky.svg) left bottom / 192px 32px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 30px) no-repeat, url(/assets/edge-sky.svg) left bottom / 192px 32px repeat-x;
}
.terrain::before, .terrain::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 32px; pointer-events: none;
  -webkit-mask: url(/assets/edge-grass.svg) left bottom / 192px 32px repeat-x;
  mask: url(/assets/edge-grass.svg) left bottom / 192px 32px repeat-x;
}
.terrain::before {
  background: var(--grass);
  -webkit-mask: url(/assets/edge-grass.svg) -4px bottom / 192px 32px repeat-x, url(/assets/edge-grass.svg) 4px bottom / 192px 32px repeat-x;
  mask: url(/assets/edge-grass.svg) -4px bottom / 192px 32px repeat-x, url(/assets/edge-grass.svg) 4px bottom / 192px 32px repeat-x;
}
.terrain::after { content: none; }

/* ---------- sky bands ---------- */
.hero, .page-top {
  --focus: var(--gold);
  color: #fff;
  background: linear-gradient(180deg, var(--night) 0%, #0A5E8D 42%, var(--deep) 72%, var(--ocean) 92%, var(--sky) 100%);
}
.page-top { padding: calc(var(--lane) + 48px) 0 76px; }
.page-top-inner { position: relative; z-index: 2; }
.page-top h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem); text-shadow: var(--mc-shadow); }
.page-top .lead { max-width: 52ch; margin-top: 10px; font-size: 1.0625rem; }
.page-top a:not(.btn) { color: #fff; }

/* ---------- home hero ---------- */
.hero { padding: calc(var(--lane) + 52px) 0 56px; }
.hero-grid { position: relative; z-index: 2; display: grid; gap: 8px; align-items: center; }
.hero h1 { max-width: 16ch; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); line-height: 1.08; text-shadow: var(--mc-shadow); }
.hero .lead { max-width: 44ch; margin-top: 16px; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.hero-actions { margin-top: 26px; }
.hero-copy > * { animation: rise .7s var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  font-size: .875rem; color: #fff;
  background: rgb(4 36 56 / .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  clip-path: var(--notch);
}
.chip .ico { font-size: 1rem; }
@media (max-width: 400px) { .chips { gap: 8px; } .chip { gap: 6px; padding: 6px 9px; font-size: .8125rem; } }
.hero.terrain::before, .hero.terrain::after { animation: terrain-in .8s var(--ease-out) .05s both; }
@keyframes terrain-in { from { translate: 0 34px; } }

/* partikel tsParticles (app.js) di belakang isi langit; kosong & tak terlihat tanpa JS */
.particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.particles canvas { display: block; }

/* hero showcase: logo Clarity besar + tiga kartu produk pixel art yang melayang berlapis */
.showcase { position: relative; height: 320px; margin-top: 8px; pointer-events: none; }
@media (min-width: 900px) {
  .hero { padding-bottom: 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; min-height: 470px; }
  .showcase { height: 470px; margin-top: 0; }
}
.showcase-glow {
  position: absolute; left: 50%; top: 58%; width: min(520px, 110%); aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(127 211 242 / .55), rgb(255 201 60 / .14) 60%, rgb(127 211 242 / 0));
  animation: glow 6s ease-in-out infinite;
}
@keyframes glow { 50% { opacity: .6; scale: .92; } }
.showcase-logo {
  position: absolute; left: 50%; top: 0; z-index: 3; width: min(78%, 360px); translate: -50% 0;
  filter: drop-shadow(0 6px 0 rgb(4 30 48 / .35));
  animation: logo-in .9s var(--ease-back) .15s both, logo-float 6s ease-in-out 1.1s infinite;
}
@keyframes logo-in { from { opacity: 0; scale: .6; translate: -50% 20px; } }
@keyframes logo-float { 50% { translate: -50% -8px; } }
.showcase-cards { position: absolute; left: 50%; bottom: 6px; width: min(100%, 470px); height: 66%; translate: -50% 0; }
.sc {
  position: absolute; bottom: 0; width: 46%; height: auto; aspect-ratio: 1; object-fit: cover;
  background: var(--tint);
  box-shadow: 0 -4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 12px 0 rgb(4 30 48 / .35);
  rotate: var(--r); translate: 0 0;
  animation: card-in .7s var(--ease-back) var(--in) both, card-float var(--t) ease-in-out var(--d) infinite;
}
.sc-1 { left: 0; --r: -9deg; --in: .45s; --t: 6.4s; --d: -1s; z-index: 1; }
.sc-2 { left: 27%; bottom: 14%; width: 50%; --r: 2deg; --in: .3s; --t: 5.6s; --d: -3s; z-index: 2; }
.sc-3 { right: 0; --r: 10deg; --in: .6s; --t: 7s; --d: -2s; z-index: 1; }
@keyframes card-in { from { opacity: 0; translate: 0 60px; scale: .7; } }
@keyframes card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.s1 { left: 6%; top: 20%; --s: 14px; --d: -.4s; }
.s2 { left: 88%; top: 30%; --s: 20px; --t: 3.6s; --d: -2s; }
.s3 { left: 14%; top: 62%; --s: 12px; --t: 2.4s; --d: -1.2s; }
.s4 { left: 92%; top: 74%; --s: 14px; --t: 3s; --d: -.8s; }

/* strip kepercayaan menempel di tepi bawah hero */
.trust { position: relative; z-index: 3; margin-top: -26px; }
.trust-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  background: var(--line); box-shadow: 0 -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 9px 0 rgb(4 30 48 / .18);
}
@media (min-width: 760px) { .trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-item { display: grid; gap: 2px; padding: 14px 16px; background: #fff; }
.trust-item strong { font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: var(--deep); font-variant-numeric: tabular-nums; }
.trust-item span { font-size: .875rem; color: var(--ink-2); }

/* kenapa beli di Clarity */
.perks { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.perk { position: relative; padding: 22px 20px 20px; background: #fff; box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line); transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.perk:hover { transform: translateY(-4px); box-shadow: 0 -3px 0 var(--sky), -3px 0 0 var(--sky), 3px 0 0 var(--sky), 0 3px 0 var(--sky), 0 12px 24px rgb(17 145 200 / .18); }
.perk img, .perk-icon { display: block; width: 44px; height: 44px; margin-bottom: 12px; image-rendering: pixelated; }
.perk-icon { background: var(--deep); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.perk-fast { --m: url(/assets/px-qr.svg); }
.perk-shield { --m: url(/assets/px-check.svg); background: var(--emerald); }
.perk-chat { --m: url(/assets/px-chat.svg); }
.perk h3 { font-size: 1.0625rem; font-weight: 800; }
.perk p { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); }

/* review berjalan: dua baris (Tokopedia & Discord), berhenti saat disentuh/diarahkan */
.reviews-section { overflow: hidden; }
.review-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 18px; }
.review-top .section-title { margin-bottom: 0; }
.rv-summary { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line); }
.rv-score { display: flex; align-items: baseline; gap: 2px; color: var(--ink); }
.rv-score strong { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.rv-score span { font-weight: 700; color: var(--ink-2); }
.rv-summary p { font-size: .875rem; color: var(--ink-2); }
/* review: satu baris yang digeser (swipe / drag / panah), kartu pertama sejajar dengan judul */
.review-lead { margin-top: 6px; color: var(--ink-2); }
.rv-slider { --pad: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
/* .rv-slider di depan: kalau tidak, reset ul[class] { padding: 0 } menang dan kartu menempel ke tepi layar */
.rv-slider .rv-track {
  display: flex; gap: 18px; margin: 0; padding: 12px var(--pad) 18px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none; cursor: grab;
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rv-track:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.rv-controls { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-bottom: 12px; }
.rv-progress { position: relative; flex: 1; height: 6px; overflow: hidden; background: var(--line); }
.rv-progress i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w, .3) * 100%); background: var(--ocean); translate: calc(var(--p, 0) * (100% / var(--w, .3) - 100%)) 0; transition: translate .2s ease; }
.rv-btn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 0; color: var(--ink); background: #fff; cursor: pointer;
  box-shadow: 0 -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 6px 0 rgb(4 30 48 / .25);
  transition: transform .2s var(--ease-back), opacity .2s ease, color .2s ease;
}
.rv-btn::before { content: ""; width: 8px; height: 12px; background: currentColor; clip-path: polygon(50% 0, 100% 0, 100% 25%, 75% 25%, 75% 50%, 100% 50%, 100% 75%, 100% 100%, 50% 100%, 50% 75%, 25% 75%, 25% 50%, 0 50%, 0 25%, 25% 25%, 50% 25%); }
.rv-next::before { scale: -1 1; }
.rv-btn:hover { transform: translateY(-2px); color: var(--ocean); }
.rv-btn:disabled { opacity: .35; pointer-events: none; }
.rv {
  position: relative; flex: none; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px;
  width: min(330px, 80vw); padding: 18px 20px 16px; background: #fff;
  box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line), 0 8px 0 rgb(11 53 80 / .06);
}
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.rv-verified { font-size: .75rem; font-weight: 700; color: #03753C; }
.rv-source { padding: 3px 8px; font-size: .6875rem; font-weight: 800; color: #fff; background: #4E5AC8; }
.rv-tokopedia .rv-source { background: #03753C; }
.rv blockquote { flex: 1; font-size: .9375rem; line-height: 1.55; color: var(--ink); }
.rv blockquote p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv-by { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 2px dashed var(--line); font-size: .8125rem; color: var(--ink-2); }
.rv-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; font: 400 1rem/1 var(--font-display); color: #fff; background: #4E5AC8; clip-path: var(--notch); }
.rv-tokopedia .rv-avatar { background: #03753C; }
.rv-who { display: flex; flex-direction: column; min-width: 0; }
.rv-who strong { color: var(--ink); }
.rv-who span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* FAQ singkat + kartu tanya admin */
.faq-home { display: grid; gap: 28px; align-items: start; padding-bottom: 72px; }
@media (min-width: 900px) { .faq-home { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; } }
.faq-more { margin-top: 14px; font-weight: 700; }
.cta-card { padding: 24px 22px; color: #fff; background: linear-gradient(160deg, var(--deep), var(--night)); box-shadow: 0 -4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 12px 0 rgb(4 30 48 / .25); }
.cta-card img { image-rendering: pixelated; }
.cta-card h3 { margin-top: 10px; font-size: 1.25rem; font-weight: 800; }
.cta-card p { margin-top: 6px; color: rgb(255 255 255 / .88); }
.cta-card .contact-links { margin-top: 14px; }

/* harga coret dengan keterangan (harga resmi / normal / satuan) */
.price-was-row { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
/* nominal tidak pernah terpecah ("Rp" / "598.000") di kartu sempit */
.price-was, .price-now, .price-note, .save, .flash-what s, .flash-what strong { white-space: nowrap; }
.price-note { font-size: .6875rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.product-top .price-note, .page-top .price-note { color: rgb(255 255 255 / .8); }
.product-trust { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .875rem; color: rgb(255 255 255 / .9); }
.related { padding-bottom: 72px; }

/* ---------- sections ---------- */
.section { padding-top: 56px; }
.section-title { margin-bottom: 20px; font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem); color: var(--ink); text-shadow: .05em .06em 0 var(--line); }
.empty { padding: 24px; background: #fff; clip-path: var(--notch); }
.band { position: relative; margin-top: 88px; padding: 36px 0 64px; background: var(--tint); }
.band::before {
  /* tangga ukuran asli 1:1 (tanpa garis sambungan); kotaknya setinggi gambar dan masuk 2px ke bawah supaya tidak ada celah */
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); height: 32px; background: var(--tint);
  -webkit-mask: url(/assets/edge-grass.svg) left bottom / 192px 32px repeat-x; mask: url(/assets/edge-grass.svg) left bottom / 192px 32px repeat-x;
  transform: scaleX(-1);
}
/* tepi bawah: tangga yang sama dibalik, supaya band tidak terpotong lurus (kecuali menempel ke footer) */
.band:not(:last-child)::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 32px; background: var(--tint);
  -webkit-mask: url(/assets/edge-grass.svg) left bottom / 192px 32px repeat-x; mask: url(/assets/edge-grass.svg) left bottom / 192px 32px repeat-x;
  transform: scaleY(-1);
}

/* ---------- flash sale ---------- */
.flash { margin-top: 36px; }
.flash-panel {
  --focus: var(--gold);
  position: relative; display: grid; gap: 22px; align-items: center;
  margin: 4px 4px 14px;
  padding: 22px 18px;
  color: #fff;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / .035) 0 14px, transparent 14px 28px),
    radial-gradient(120% 140% at 0% 0%, #10507A 0%, var(--ink) 60%);
  box-shadow: 0 -4px 0 var(--gold), -4px 0 0 var(--gold), 4px 0 0 var(--gold), 0 4px 0 var(--gold), 0 10px 0 var(--gold-2);
}
.flash-panel > .particles { z-index: 0; }
.flash-panel > :not(.particles) { position: relative; z-index: 1; }
.flash-pct {
  margin-left: 14px; padding: 4px 10px 3px; font-size: .8em; color: var(--ink); background: var(--gold);
  box-shadow: inset 0 -4px 0 var(--gold-2); clip-path: var(--notch); rotate: -4deg;
}
.flash-what s { color: #CFE4F0; }
.flash h2 { display: flex; flex-wrap: wrap; align-items: center; font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); color: var(--gold); }
.flash-what { margin-top: 6px; font-size: 1.0625rem; }
.flash-ends { margin-top: 18px; margin-bottom: 8px; font-size: .9375rem; font-weight: 600; color: #CFE4F0; }
.flash .countdown { color: #fff; }
.live-dot { position: relative; flex: none; width: 12px; height: 12px; margin-right: 14px; background: #FF5468; }
.live-dot::after { content: ""; position: absolute; inset: 0; background: #FF5468; animation: ping 1.6s var(--ease-out) infinite; }
@keyframes ping { from { opacity: .85; scale: 1; } to { opacity: 0; scale: 2.8; } }
@media (min-width: 640px) { .flash-panel { padding: 28px 30px; } .flash .card-wide { max-width: 560px; } }
@media (min-width: 900px) {
  .flash-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 36px; padding: 32px 36px; }
}

/* countdown digits in inventory-slot tiles */
.countdown { display: inline-flex; align-items: center; font: 400 1.75rem/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.cd { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cd-days { margin-right: 8px; font-size: .85em; }
.cd-days[hidden] { display: none; }
.cd-digit {
  display: inline-grid; place-items: center; width: 1.1em; height: 1.45em;
  color: var(--gold); background: #062538;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .4), inset 0 3px 0 rgb(255 255 255 / .07), 0 -2px 0 #2A5876, -2px 0 0 #2A5876, 2px 0 0 #2A5876, 0 2px 0 #2A5876;
  overflow: hidden;
}
.cd-digit > span { display: block; }
.cd-sep { padding: 0 2px; }
.countdown-lg { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem); }
.flash-copy { min-width: 0; }
.countdown.is-over .cd-digit { color: #9AB0BE; }

/* ---------- hotbar (category tabs) ---------- */
.hotbar {
  display: flex; gap: 10px; margin: 0 -8px 22px; padding: 6px 8px 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity;
}
.hotbar::-webkit-scrollbar { display: none; }
html:not(.js) .hotbar { display: none; }
.slot {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; margin: 3px; padding: 8px 14px 8px 10px;
  font: 700 .9375rem/1 var(--font-body); color: var(--ink);
  background: #fff; border: 0; border-radius: 0; cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line), inset 0 -3px 0 var(--line-2);
  transition: transform .2s var(--ease-back);
}
.slot img { width: 24px; height: 24px; image-rendering: pixelated; transition: transform .3s var(--ease-back); }
.slot:hover { transform: translateY(-2px); }
.slot:focus-visible { outline-offset: 7px; }
.slot:hover img { transform: rotate(-8deg) scale(1.15); }
.slot[aria-pressed="true"] {
  color: #fff; background: var(--ink);
  box-shadow: 0 -3px 0 var(--gold), -3px 0 0 var(--gold), 3px 0 0 var(--gold), 0 3px 0 var(--gold), 0 7px 0 var(--gold-2);
  animation: slot-pop .35s var(--ease-back);
}
@keyframes slot-pop { 40% { scale: 1.08; } }

/* ---------- product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.card {
  --lift: 0px; --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  margin: 3px 3px 9px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line), 0 9px 0 var(--line-2);
  transform: translateY(var(--lift));
  transition: transform .45s var(--ease-out), filter .35s ease;
}
.card[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card { transform: perspective(900px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)); }
}
.card:hover, .card:focus-within { --lift: -6px; filter: drop-shadow(0 14px 16px rgb(17 145 200 / .3)); }
.card.is-tilting { transition: transform .12s linear, filter .35s ease; }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .38), rgb(255 255 255 / 0) 45%);
  opacity: 0; transition: opacity .3s ease;
}
.card.is-tilting::after { opacity: 1; }
.card-art { position: relative; margin: 8px 8px 0; aspect-ratio: 1; overflow: hidden; clip-path: var(--notch); }
.card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 12px 14px; }
.card-title { font: 800 1.0625rem/1.25 var(--font-body); }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: -3px -3px -9px; z-index: 3; }
.card-link:hover { color: inherit; }
@supports selector(:has(a)) {
  .card-link:focus-visible { outline: none; }
  .card:has(.card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 7px; }
}
.card-tagline { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.card-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.card-rating .ico { color: var(--star); }
.card-cta { margin-top: auto; align-self: stretch; transition: transform .2s var(--ease-back), filter .25s ease; }
.card .card-cta { margin-top: auto; }
.card:hover .card-cta { transform: translateY(-2px); filter: drop-shadow(0 0 10px var(--glow)); }
.card:active .card-cta { transform: translateY(var(--lift)); }
.card.is-out { filter: none; }
.card.is-out .art, .card.is-out .art-photo { filter: grayscale(1); opacity: .6; }
.card.is-out .price-now { color: var(--ink-2); }
.card.is-out .card-cta { --face: #E3EBF0; --text: #4A6272; --edge: #B9CAD4; --drop: #B9CAD4; --glow: transparent; }

/* product art: pixel icon over a sky panel with a stepped ground strip */
.art {
  --ground: #8ACB6A;
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    linear-gradient(rgb(255 255 255 / .32) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgb(255 255 255 / .32) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, var(--art-top, #BDE5F7) 0%, #DDF1FA 70%, #EEF8FC 100%);
}
.art-v1 { --art-top: #CCD6FA; --tilt: -7deg; }
.art-v2 { --art-top: #C4EEDC; --tilt: 6deg; }
.art-v3 { --art-top: #FBE3C6; --tilt: -3deg; }
.art::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: var(--ground);
  -webkit-mask: url(/assets/edge-steps.svg) left bottom / 64px 100% repeat-x; mask: url(/assets/edge-steps.svg) left bottom / 64px 100% repeat-x;
}
.art-giftcode { --ground: #FFD978; }
.art-rank { --ground: #C9A6F2; }
.art-cape { --ground: #F5A3AE; }
.art-bundle { --ground: #D9A066; }
.art-lainnya { --ground: #9FE9EE; }
.art-icon {
  position: relative; width: 56%;
  rotate: var(--tilt, 0deg);
  image-rendering: pixelated;
  filter: drop-shadow(0 7px 0 rgb(11 53 80 / .16));
  transition: transform .5s var(--ease-back);
}
.art-photo { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.card:hover .art-icon { transform: translateY(-6px) rotate(-5deg) scale(1.1); }
.card:hover .art-photo { transform: scale(1.06); }

/* discount badge with a shine sweep (peak still >= 4.6:1 for the white text) */
.badge {
  position: absolute; top: 8px; left: 8px; z-index: 1; overflow: hidden;
  padding: 5px 8px 4px;
  font: 400 1.0625rem/1 var(--font-display); color: #fff;
  background: var(--red);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22);
  clip-path: var(--notch);
}
.badge::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / .22) 50%, rgb(255 255 255 / 0) 70%);
  transform: translateX(-130%);
  animation: shine 3.8s var(--ease-out) 1.2s infinite;
}
@keyframes shine { 0%, 50% { transform: translateX(-130%); } 80%, 100% { transform: translateX(130%); } }
.badge-lg { top: 12px; left: 12px; padding: 7px 10px 6px; font-size: 1.25rem; }
.badge-flash { top: auto; bottom: 8px; color: var(--ink); background: var(--gold); box-shadow: inset 0 -3px 0 var(--gold-2); }

/* prices */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.price-was { font-size: .8125rem; color: var(--ink-2); }
.price-now { font: 800 clamp(1.125rem, 1rem + .45vw, 1.25rem)/1.15 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); }
.save {
  display: inline-block; padding: 3px 7px 2px;
  font-size: .75rem; font-weight: 800; line-height: 1.3; color: var(--emerald);
  background: var(--emerald-tint);
  box-shadow: inset 0 -2px 0 rgb(10 107 59 / .14);
}
.price-lg .price-now { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); color: #fff; }
.price-lg .price-was { font-size: .9375rem; color: #DCEFF8; }
.price-lg .save { font-size: .875rem; }

/* stock */
.stock { display: flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.stock-dot { position: relative; flex: none; width: 8px; height: 8px; background: #2FBF62; }
.stock.is-low { font-weight: 800; color: var(--red-text); }
.stock.is-low .stock-dot { background: #E5394F; }
.stock.is-low .stock-dot::after { content: ""; position: absolute; inset: 0; background: #E5394F; animation: ping 1.4s var(--ease-out) infinite; }
.stock.is-out .stock-dot { background: #9AB0BE; }
.stock.is-pre .stock-dot { background: var(--gold-2); }
.product-head .stock { margin-top: 12px; font-size: .9375rem; color: #fff; }
.product-head .stock.is-low { color: #fff; }

/* wide card (flash sale) */
.card-wide { flex-direction: row; align-items: stretch; }
/* gambar persegi utuh (tidak terpotong) di tengah tinggi kartu; harga tidak keluar dari kartu */
.card-wide .card-art { flex: none; width: 46%; height: auto; align-self: center; aspect-ratio: 1; margin: 8px 0 8px 8px; }
.card-wide .art-photo, .card-wide .art { position: absolute; inset: 0; }
/* kilau yang menyapu gambar produk flash sale */
.card-wide .card-art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / .38) 50%, rgb(255 255 255 / 0) 65%);
  transform: translateX(-130%); animation: shine 4.2s var(--ease-out) .8s infinite;
}
.card-wide .card-body { min-width: 0; padding: 12px 14px 14px; }

/* ---------- bintang rating ---------- */
.stars { display: inline-flex; gap: 3px; }
.stars i {
  width: 14px; height: 14px; background: var(--star);
  -webkit-mask: url(/assets/px-star.svg) center / contain no-repeat; mask: url(/assets/px-star.svg) center / contain no-repeat;
}
.stars i.off { background: #C3D3DD; }

/* ---------- steps ---------- */
.steps { display: grid; gap: 22px; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.step {
  position: relative; counter-increment: step;
  margin: 3px; padding: 22px 20px 20px;
  background: #fff;
  box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line), 0 9px 0 var(--line-2);
}
.step::before {
  content: counter(step);
  position: absolute; top: -12px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px;
  font: 400 1.5rem/1 var(--font-display); color: var(--ink); background: var(--gold);
  box-shadow: 0 -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 6px 0 #062538;
}
@media (min-width: 760px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 46px; left: calc(100% + 6px); width: 22px; height: 4px;
    background: repeating-linear-gradient(90deg, var(--deep) 0 4px, transparent 4px 8px);
  }
}
.step-icon { display: block; width: 48px; height: 48px; margin-bottom: 14px; image-rendering: pixelated; }
.step-qr, .step-spark { background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.step-qr { --m: url(/assets/px-qr.svg); }
.step-spark { --m: url(/assets/px-sparkle.svg); background: var(--gold-2); }
.step h3 { font: 800 1.1875rem/1.2 var(--font-body); }
.step p { margin-top: 6px; color: var(--ink-2); }

/* ---------- product page ---------- */
.product-top { padding-bottom: 84px; }
.product-hero { position: relative; z-index: 2; display: grid; gap: 18px 40px; align-items: center; }
.back-link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.back-link::before { content: ""; width: 8px; height: 12px; background: currentColor; clip-path: polygon(50% 0, 100% 0, 100% 25%, 75% 25%, 75% 50%, 100% 50%, 100% 75%, 100% 100%, 50% 100%, 50% 75%, 25% 75%, 25% 50%, 0 50%, 0 25%, 25% 25%, 50% 25%); }
.back-link:hover { text-decoration: underline; }
.product-art {
  position: relative; width: 100%; max-height: 230px; aspect-ratio: 16 / 10;
  overflow: hidden; clip-path: var(--notch-2);
  view-transition-name: product-art;
}
.product-art .art-icon { width: auto; height: 62%; animation: float 5s ease-in-out infinite; --r: -4deg; }
.product-art .spark { --s: 18px; }
.p1 { left: 16%; top: 18%; }
.p2 { right: 14%; top: 30%; --s: 22px; --t: 3.4s; --d: -1.4s; }
.product-head h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); text-shadow: var(--mc-shadow); }
.subtitle { margin-top: 8px; font-size: 1rem; color: #E6F4FB; }
.product-head .price { margin-top: 16px; }
@media (min-width: 760px) {
  .product-hero { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .product-art { max-height: none; aspect-ratio: 1; }
  .back-link { grid-column: 1 / -1; }
  .product-art .art-icon { width: 58%; height: auto; }
}
.product-layout { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 900px) {
  .product-layout { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "details checkout"; align-items: start; gap: 40px; }
  .checkout { grid-area: checkout; position: sticky; top: 96px; }
  .product-details { grid-area: details; }
}
.panel, .checkout {
  margin: 3px 3px 9px; padding: 22px 20px 24px; background: #fff;
  box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line), 0 9px 0 var(--line-2);
}
.checkout { box-shadow: 0 -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 10px 0 var(--sky); }
.product-details { display: grid; gap: 22px; align-content: start; }
.panel h2, .checkout h2 { font-size: 1.5rem; margin-bottom: 14px; }
.panel h3 { margin-top: 20px; font: 800 1rem/1.3 var(--font-body); }
.desc { max-width: 65ch; }
.points { display: grid; gap: 10px; margin-top: 14px; }
.points li { position: relative; padding-left: 24px; }
.points li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; background: var(--emerald-pop); box-shadow: 2px 2px 0 var(--emerald); }
.bundle-items { display: grid; gap: 8px; margin-top: 10px; }
.bundle-items li { padding: 10px 12px; font-weight: 700; background: var(--tint); box-shadow: inset 3px 0 0 var(--sky); }
.note { margin-top: 18px; padding: 12px 14px; font-size: .9375rem; background: var(--gold-tint); box-shadow: inset 3px 0 0 var(--gold-2); }
.mini-steps { display: grid; gap: 10px; counter-reset: mini; }
.mini-steps li { position: relative; padding-left: 38px; counter-increment: mini; min-height: 26px; }
.mini-steps li::before {
  content: counter(mini); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px;
  font: 400 1.0625rem/1 var(--font-display); color: #fff; background: var(--deep); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .25);
}

/* ---------- forms ---------- */
.form label { display: block; margin: 18px 0 8px; font-weight: 700; }
.form label:first-child { margin-top: 0; }
.form input {
  display: block; width: calc(100% - 6px); min-height: 52px; margin: 3px;
  padding: 12px 14px;
  font: 600 1.0625rem/1.3 var(--font-body); color: var(--ink);
  background: #fff; border: 0; border-radius: 0;
  box-shadow: 0 -3px 0 var(--edge-strong), -3px 0 0 var(--edge-strong), 3px 0 0 var(--edge-strong), 0 3px 0 var(--edge-strong), inset 0 3px 0 #E6F1F7;
  transition: box-shadow .15s ease;
}
.form input::placeholder { color: #6E8A9C; opacity: 1; }
.form input:focus-visible { outline-offset: 7px; box-shadow: 0 -3px 0 var(--deep), -3px 0 0 var(--deep), 3px 0 0 var(--deep), 0 3px 0 var(--deep), inset 0 3px 0 #E6F1F7; }
.help { margin-top: 8px; font-size: .875rem; color: var(--ink-2); }
.form input + .btn { margin-top: 26px; }
.total { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 14px; padding-top: 16px; border-top: 3px dashed var(--line); font-weight: 700; }
.total strong { font: 800 1.75rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.fineprint { margin-top: 6px; font-size: .8125rem; color: var(--ink-2); }
.alert {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px;
  font-weight: 600; color: #8E1B26; background: #FDECEE; box-shadow: inset 4px 0 0 var(--red);
}
.alert::before { content: "!"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; font: 400 1.125rem/1 var(--font-display); color: #fff; background: var(--red); }
.notice { padding: 14px 16px; background: var(--gold-tint); box-shadow: inset 4px 0 0 var(--gold-2); }
.notice p + p, .notice .contact-links { margin-top: 12px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; }
.contact-links .ico-chat { font-size: 1rem; }

/* ---------- order page ---------- */
.order-top .page-top-inner { display: grid; gap: 12px; }
.order-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 1.0625rem; }
.order-line strong { font: 800 1.5rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--gold); }
.order-id-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9375rem; }
.order-id { padding: 5px 9px; font-size: .9375rem; font-weight: 600; letter-spacing: .02em; background: rgb(4 36 56 / .45); clip-path: var(--notch); }
.order-body { display: grid; gap: 32px; margin-top: 28px; }
.pay { display: grid; gap: 26px; }
@media (min-width: 820px) { .pay { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 52px; align-items: start; } }
/* kartu QR dinamis: QR besar dengan sudut bidik, nama toko, dan total; selebar layar di HP */
.qr-wrap { position: relative; justify-self: center; width: min(100%, 420px); }
.qr-card {
  display: block; padding: 16px 16px 14px; color: var(--ink); text-decoration: none; background: #fff;
  box-shadow: 0 -4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 12px 0 rgb(4 30 48 / .2);
}
.qr-card:hover { color: var(--ink); }
.qr-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }
.qr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qr-badge { padding: 5px 10px 4px; font: 800 .8125rem/1 var(--font-body); letter-spacing: .12em; color: #fff; background: var(--red); clip-path: var(--notch); }
.qr-merchant { font: 400 1.125rem/1 var(--font-display); color: var(--ocean); }
/* QR dengan empat sudut bidik */
.qr-code {
  display: block; padding: 12px;
  --c: var(--ocean); --l: 34px; --t: 5px;
  background:
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--t), linear-gradient(var(--c) 0 0) top left / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--t), linear-gradient(var(--c) 0 0) top right / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--t), linear-gradient(var(--c) 0 0) bottom left / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--t), linear-gradient(var(--c) 0 0) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
}
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 3px dashed var(--line); font-weight: 700; color: var(--ink-2); }
.qr-total strong { font: 800 1.5rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); }
.qr-note { margin-top: 14px; font-size: .875rem; text-align: center; color: var(--ink-2); }
.pay-info { display: grid; gap: 14px; justify-items: start; }
.pay-amount { display: grid; gap: 4px; }
.pay-amount span { font-weight: 700; color: var(--ink-2); }
.pay-amount strong { font: 800 clamp(2rem, 1.7rem + 1.4vw, 2.75rem)/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }
.pay-sub { color: var(--ink-2); }
.deadline { display: grid; gap: 8px; justify-items: start; padding: 14px 16px; background: #fff; box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line); margin: 3px; }
.deadline > p:first-child { font-weight: 700; }
.tip { width: 100%; padding: 16px; background: var(--tint); box-shadow: inset 4px 0 0 var(--sky); }
.tip h2 { margin-bottom: 12px; font-size: 1.25rem; }
.checking { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--deep); }
.loader { display: inline-flex; gap: 4px; }
.loader i { width: 8px; height: 8px; background: var(--ocean); animation: hop 1.1s var(--ease-out) infinite; }
.loader i:nth-child(2) { background: var(--sky); animation-delay: .15s; }
.loader i:nth-child(3) { background: var(--gold); animation-delay: .3s; }
@keyframes hop { 0%, 55%, 100% { translate: 0 0; } 25% { translate: 0 -8px; } }
.state-card {
  display: grid; gap: 16px; align-items: start; margin: 3px; padding: 22px 20px; background: #fff;
  box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line), 0 9px 0 var(--line-2);
}
@media (min-width: 640px) { .state-card { grid-template-columns: 64px minmax(0, 1fr); gap: 22px; padding: 26px; } }
.state-card p { max-width: 62ch; }
.state-card .checking { margin-top: 16px; }
.state-actions { margin-top: 18px; }
.state-icon { display: block; width: 56px; height: 56px; background: var(--deep); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.state-qr { --m: url(/assets/px-qr.svg); }
.state-ok { --m: url(/assets/px-check.svg); background: #18A957; }
.state-x { --m: url(/assets/px-x.svg); background: #9AB0BE; }
.state-spark { --m: url(/assets/px-sparkle.svg); background: var(--gold-2); animation: twinkle 2.6s ease-in-out infinite; }
.done { display: grid; gap: 22px; }
.done-head { display: flex; align-items: center; gap: 16px; padding: 16px 18px; font-weight: 600; background: var(--emerald-tint); box-shadow: inset 4px 0 0 #18A957; }
.done-head .state-icon { flex: none; width: 40px; height: 40px; }
.account {
  margin: 3px 3px 9px; padding: 20px 18px; background: #fff;
  box-shadow: 0 -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 10px 0 var(--gold);
}
.account h2 { font-size: 1.5rem; margin-bottom: 8px; }
.field { display: grid; gap: 6px; padding: 12px 0; border-top: 3px dashed var(--line); }
.field:first-child { border-top: 0; }
.field dt { font-size: .8125rem; font-weight: 800; color: var(--ink-2); }
.field dd { display: flex; align-items: center; gap: 10px; }
.field code {
  flex: 1; min-width: 0; padding: 10px 12px;
  font-size: .9375rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
  color: var(--ink); background: var(--tint); box-shadow: inset 0 0 0 2px var(--line);
  -webkit-user-select: all; user-select: all;
}
.guide { margin-top: 12px; }
.guide summary, .faq summary {
  position: relative; display: block; padding: 14px 44px 14px 0; font-weight: 800; cursor: pointer; list-style: none;
}
.guide summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.guide summary::after, .faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--deep);
  clip-path: polygon(36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%);
  transition: rotate .3s var(--ease-back);
}
details[open] > summary::after { rotate: 45deg; }
.guide-body { padding: 4px 0 4px; }
.guide-body h3 { margin: 14px 0 6px; font: 800 1.0625rem/1.25 var(--font-body); }
.guide-body ol { display: grid; gap: 6px; padding-left: 1.4em; }
.guide-body ol li::marker { font-weight: 800; color: var(--deep); }
.guide-body p { margin-top: 10px; }
.keep-link {
  display: grid; gap: 12px; align-items: center; padding: 16px 18px;
  background: var(--tint); box-shadow: inset 4px 0 0 var(--deep);
}
@media (min-width: 640px) { .keep-link { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- check & help ---------- */
.split { display: grid; gap: 32px; margin-top: 28px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; } }
.faq h2, .help h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-bottom: 16px; }
.faq details {
  margin: 3px 3px 14px; padding: 0 16px; background: #fff;
  box-shadow: 0 -3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line), 0 3px 0 var(--line);
}
.faq details p { padding-bottom: 16px; max-width: 62ch; }
.help { display: grid; gap: 52px; max-width: 860px; margin-top: 36px; }
.help > section > p { max-width: 65ch; }
.help-note { margin-top: 18px; font-weight: 600; color: var(--ink-2); }

/* ---------- error page ---------- */
.error-top { min-height: min(760px, 100svh); display: grid; align-items: center; }
.error-inner { position: relative; z-index: 2; display: grid; gap: 20px; align-items: center; }
@media (min-width: 760px) { .error-inner { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; } }
.error-art { position: relative; display: grid; place-items: center; height: 220px; }
.error-logo { position: relative; width: min(70%, 260px); filter: drop-shadow(0 6px 0 rgb(4 30 48 / .35)); animation: bob-y 6s ease-in-out infinite; }
@keyframes bob-y { 50% { translate: 0 -8px; } }
.error-code { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(8rem, 40vw, 11rem)/1 var(--font-display); color: rgb(255 255 255 / .2); letter-spacing: .04em; }
.error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.link-light { font-weight: 700; color: #fff; }

/* ---------- footer ---------- */
.site-footer {
  --focus: var(--gold);
  position: relative; margin-top: 64px; padding: 56px 0 calc(96px + env(safe-area-inset-bottom));
  color: #fff; background: var(--ink);
}
.band + .site-footer, main:has(> .band:last-child) + .site-footer { margin-top: 0; }
.site-footer::before {
  /* tangga ukuran asli 1:1 (tanpa garis sambungan); kotaknya setinggi gambar dan masuk 2px ke bawah supaya tidak ada celah */
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); height: 32px; background: var(--ink);
  -webkit-mask: url(/assets/edge-grass.svg) left bottom / 192px 32px repeat-x; mask: url(/assets/edge-grass.svg) left bottom / 192px 32px repeat-x;
}
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } .site-footer { padding-bottom: 48px; } }
.footer-brand img { width: auto; height: 40px; }
.footer-brand p { max-width: 42ch; margin-top: 14px; color: #CFE4F0; }
.footer-col h2 { margin-bottom: 12px; font: 800 1rem/1.2 var(--font-body); color: var(--gold); }
.footer-col ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.footer-col a { color: #fff; font-weight: 600; text-decoration: none; }
.footer-col a:hover { color: var(--gold); text-decoration: underline; }
.footer-legal { margin-top: 36px; padding-top: 18px; border-top: 2px dashed rgb(255 255 255 / .16); font-size: .8125rem; color: #A9C7D9; }

/* floating "Gabung Discord" + "Tanya admin" bertumpuk di kanan bawah */
.float-actions {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 22px;
}
.chat-admin {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 14px;
  font: 700 .9375rem/1 var(--font-body); color: var(--ink); text-decoration: none;
  background: var(--emerald-pop);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .15), 0 -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 7px 0 #062538;
  animation: item-in .5s var(--ease-back) 1.4s both;
  transition: transform .2s var(--ease-back), filter .25s ease;
}
.chat-admin:hover { color: var(--ink); transform: translateY(-3px); filter: drop-shadow(0 0 12px rgb(61 219 133 / .6)); }
.chat-admin:active { transform: translateY(3px); }
.chat-admin:focus-visible { outline-offset: 7px; }
.chat-discord { position: relative; color: #fff; background: #5865F2; animation-delay: 1.25s; }
/* badge jumlah yang online di pojok tombol Discord */
.chat-count {
  position: absolute; top: -12px; right: -10px;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px;
  font: 800 .75rem/1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums;
  background: #fff; box-shadow: 0 0 0 2px var(--ink);
}
.online-dot { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--emerald-pop); box-shadow: 0 0 0 2px rgb(61 219 133 / .35); animation: online 2s ease-in-out infinite; }
@keyframes online { 50% { box-shadow: 0 0 0 5px rgb(61 219 133 / 0); } }
.chat-discord:hover { color: #fff; filter: drop-shadow(0 0 12px rgb(88 101 242 / .7)); }

/* ajakan gabung Discord di beranda */
.btn-discord { --face: #5865F2; --text: #fff; --glow: rgb(88 101 242 / .6); }
.dc-card {
  --focus: #fff;
  display: grid; gap: 18px; align-items: center;
  padding: 22px 20px; color: #fff;
  background: linear-gradient(135deg, #4752C4, #5865F2 60%, #6B78F5);
  box-shadow: 0 -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 9px 0 #062538;
}
.dc-logo { display: grid; place-items: center; width: 64px; height: 64px; background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .3); }
.dc-logo .ico { font-size: 2rem; }
.dc-copy h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); color: #fff; }
.dc-copy p { max-width: 52ch; margin-top: 6px; color: rgb(255 255 255 / .88); }
.dc-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-weight: 600; }
.dc-stats li { display: inline-flex; align-items: center; gap: 8px; }
.dc-stats strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.dc-card .btn-discord { --face: #fff; --text: #4752C4; --glow: rgb(255 255 255 / .5); justify-self: start; }
@media (min-width: 760px) { .dc-card { grid-template-columns: auto minmax(0, 1fr) auto; padding: 26px 28px; } }

/* ---------- scroll reveal (only when app.js runs; content is visible without JS) ---------- */
.js-reveal .reveal:not(.is-in) { opacity: 0; }
.reveal.is-shown { animation: rise .7s var(--ease-out) var(--d, 0ms) backwards; }

/* celebration burst (order completed) */
.burst { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.burst i {
  position: absolute; width: var(--s); height: var(--s); background: var(--c);
  -webkit-mask: url(/assets/px-sparkle.svg) center / contain no-repeat; mask: url(/assets/px-sparkle.svg) center / contain no-repeat;
}

/* pause decorative loops while their section is off screen (app.js toggles .is-paused) */
.is-paused, .is-paused *, .is-paused::before, .is-paused::after { animation-play-state: paused !important; }

/* page transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(product-art) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-group(nav-pip) { animation-duration: .45s; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- HP ---------- */
@media (max-width: 599px) {
  /* hero lebih ringkas: panggung logo + kartu lebih pendek, chip lebih rapat */
  .hero { padding-bottom: 44px; }
  .showcase { height: 290px; }
  .showcase-logo { width: min(60%, 230px); }
  .showcase-cards { width: min(100%, 330px); height: 56%; }
  .sc { width: 40%; }
  .sc-2 { left: 28%; bottom: 6%; width: 44%; }
  .chips { gap: 8px; margin-top: 16px; }
  /* tombol Discord & "Tanya admin" jadi ikon kecil supaya tidak menutupi isi halaman */
  .chat-admin { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .chat-admin .ico { font-size: 1.4rem; }
  .chat-admin .chat-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* kartu produk 2 kolom: judul sedikit lebih kecil, tagline maks 2 baris supaya tinggi kartu seragam */
  .card-title { font-size: .9375rem; }
  .card-tagline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card-body { padding: 10px 10px 12px; }
  /* kartu flash sale bertumpuk: gambar persegi penuh di atas, detail di bawah */
  .card-wide { flex-direction: column; }
  .card-wide .card-art { width: auto; min-width: 0; max-width: none; align-self: stretch; margin: 8px 8px 0; }
  /* halaman produk: gambar persegi utuh (tidak terpotong), di tengah */
  .product-art { width: min(100%, 300px); max-height: none; aspect-ratio: 1; justify-self: center; }
  /* footer: menu & kontak dua kolom */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-reveal .reveal:not(.is-in) { opacity: 1; }
  @view-transition { navigation: none; }
  .particles { display: none; }
}