/* Hallmark · genre: playful · macrostructure: Workbench · theme: custom (tuned from Hum)
 * vibe: "soft feminine cream rose jastip" · paper oklch(97.5% 0.010 20) · accent oklch(78% 0.135 355) rose
 * axes — paper: light · display: rounded-sans · accent: multi (rose · lilac · coral)
 * display: Plus Jakarta Sans · body: Plus Jakarta Sans · label: JetBrains Mono
 * nav: N10 floating-on-scroll morph · footer: Ft5 statement
 * proof: T2 logo wall, rebuilt as two counter-scrolling rails with a pause control
 * pages: index · pricelist (one shared token system — pages match, not differ)
 * hero: H2 split diptych (ratio 7/5, art right, divider negative space)
 * features: F3 tabular spec sheet (3 col, rule every row, tabular nums) — one per brand
 * cta: C4 sticky bottom bar (reveal after fold) · enrichment: none (Tier A CSS placeholder frames)
 * tone: soft feminine · audience: pembeli titipan luar negeri · use: buka chat WhatsApp
 * pre-emit critique: P5 H5 E5 S4 R5 V5
 */

@import url("tokens.css");

/* ==================================================================
   Base
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;              /* never `hidden` — clip keeps position:sticky alive */
  margin: 0;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-xl)); }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;            /* headers are roman. always. */
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }
img { max-width: 100%; display: block; }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-2-deep); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
  /* never transitioned — the ring must appear instantly */
}

::selection { background: var(--tint-rose-hi); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Body-copy voice — ink modified by opacity, not new hexes */
.lede  { font-size: var(--text-lg); color: oklch(from var(--color-ink) l c h / 0.86); max-width: 46ch; }
.muted { color: oklch(from var(--color-ink) l c h / 0.62); }

/* Emphasis highlighter — clipped background on the text, follows every wrapped line */
em, .hl {
  font-style: normal;
  color: inherit;
  background-image: linear-gradient(var(--hl, var(--tint-rose-hi)) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 0.34em;
  background-position: 0 84%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.02em;
}
.hl--lilac { --hl: var(--tint-lilac-hi); }
.hl--coral { --hl: var(--tint-coral-hi); }

.mono-label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(from var(--color-ink) l c h / 0.66);
}

.tnum { font-variant-numeric: tabular-nums; }

/* ==================================================================
   Shell — one width model, every section on the same edges
   ================================================================== */

.section {
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--section-gap) var(--page-gutter);
}
.section--band { max-width: none; padding-inline: 0; }
.section--band > * {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.section--rose  { background: var(--tint-rose); }
.section--lilac { background: var(--tint-lilac); }

/* Density rhythm — not every section breathes the same */
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--airy  { padding-block: clamp(4.5rem, 10vw, 8rem); }

/* Section head — vertical stack only, never tag-left / heading-right */
.head { max-width: 54ch; margin-bottom: var(--space-2xl); }
.head h2 { font-size: var(--text-3xl); }
.head p { margin-top: var(--space-md); }

/* Seam language for this build: a soft dashed rule */
.seam { border: 0; border-top: 1.5px dashed var(--color-rule-2); margin: 0; }

/* ==================================================================
   Buttons — one system, three variations. The press is the feedback.
   ================================================================== */

.btn {
  --btn-face: var(--color-accent);
  --btn-ink:  var(--color-ink);
  --btn-edge: var(--color-accent-deep);
  --btn-cast: var(--shadow-cast-rose);

  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.8rem 1.4rem;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  white-space: nowrap;           /* clickable text never wraps to two lines */
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--btn-ink);
  background: var(--btn-face);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  min-height: 44px;
  box-shadow: 0 4px 0 0 var(--btn-edge), 0 6px 12px -3px var(--btn-cast);
  transform: translateY(0);
  transition: transform var(--dur-short) var(--ease-press),
              box-shadow var(--dur-short) var(--ease-press),
              background-color 160ms var(--ease-out);
}
.btn:hover  { color: var(--btn-ink); transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-edge), 0 12px 22px -4px var(--btn-cast); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--btn-edge), 0 2px 6px -2px var(--btn-cast); transition-duration: 70ms; }
.btn:focus-visible { outline: 3px solid color-mix(in oklch, var(--btn-edge) 70%, var(--color-focus)); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: 0 4px 0 0 var(--btn-edge); }

.btn__arrow { transition: transform var(--dur-short) var(--ease-press); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* soft = flat lift, no colour edge */
.btn--soft {
  background: var(--color-paper);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
}
.btn--soft:hover  { background: var(--color-paper-2); box-shadow: var(--shadow-contact), var(--shadow-lift); }
.btn--soft:active { transform: translateY(1px); box-shadow: var(--shadow-contact); }

/* outline = hairline, accent fill sweeps up on hover */
.btn--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-accent-deep);
  overflow: hidden;
}
.btn--outline::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--tint-rose-hi);
  transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.btn--outline:hover::before { transform: translateY(0); }
.btn--outline:hover  { box-shadow: inset 0 0 0 1.5px var(--color-accent-deep); transform: translateY(-2px); }
.btn--outline:active { transform: translateY(1px); }

.btn--lilac { --btn-face: var(--color-accent-2); --btn-edge: var(--color-accent-2-deep); --btn-cast: var(--shadow-cast-lilac); }
.btn--coral { --btn-face: var(--color-accent-3); --btn-edge: var(--color-accent-3-deep); --btn-cast: var(--shadow-cast-coral); --btn-ink: var(--color-ink); }
.btn--sm { padding: 0.55rem 1rem; font-size: var(--text-sm); }
.btn--lg { padding: 1rem 1.9rem; font-size: var(--text-lg); }

/* ==================================================================
   N10 · Floating-on-scroll morph
   One DOM, two visual modes, one class toggle, one timing curve.
   Law 1 — total height constant (60px in both states, see tokens).
   Law 2 — the visible drop is transform only, never padding/margin.
   Law 3 — every shared visual is cross-faded, none left stale.
   Law 4 — all ten properties on --dur-morph + --ease-morph.
   ================================================================== */

.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  padding-block: 0;
  padding-inline: var(--page-gutter);
  background-color: oklch(from var(--color-paper) l c h / 0.9);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  backdrop-filter: saturate(150%) blur(10px);
  transition:
    padding-block   var(--dur-morph) var(--ease-morph),
    background-color var(--dur-morph) var(--ease-morph),
    border-block-end-color var(--dur-morph) var(--ease-morph),
    backdrop-filter var(--dur-morph) var(--ease-morph);
}
.nav.is-floating {
  padding-block: var(--nav-pad-fl);
  background-color: oklch(from var(--color-paper) l c h / 0);
  border-block-end-color: oklch(from var(--color-rule) l c h / 0);
  backdrop-filter: saturate(100%) blur(0px);   /* blur(0), not none — none snaps */
}

.nav__inner {
  max-width: var(--shell);
  min-height: var(--nav-inner-h);
  margin-inline: auto;
  padding-inline: 0;
  border-radius: 0;
  background-color: oklch(from var(--color-paper) l c h / 0);
  backdrop-filter: blur(0px);
  box-shadow: 0 0 0 0 transparent;
  transform: translateY(0);
  display: flex; align-items: center; gap: var(--space-lg);
  transition:
    max-width       var(--dur-morph) var(--ease-morph),
    min-height      var(--dur-morph) var(--ease-morph),
    padding-inline  var(--dur-morph) var(--ease-morph),
    border-radius   var(--dur-morph) var(--ease-morph),
    background-color var(--dur-morph) var(--ease-morph),
    backdrop-filter var(--dur-morph) var(--ease-morph),
    box-shadow      var(--dur-morph) var(--ease-morph),
    transform       var(--dur-morph) var(--ease-morph);
}
.nav.is-floating .nav__inner {
  max-width: var(--nav-pill-max);
  min-height: var(--nav-inner-h-fl);
  padding-inline: var(--space-md);
  border-radius: var(--radius-pill);
  background-color: oklch(from var(--color-paper) l c h / 0.86);
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: var(--shadow-contact), var(--shadow-ambient), inset 0 0 0 1px var(--color-rule);
  transform: translateY(var(--nav-float-drop));
}

.nav__brand {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  letter-spacing: -0.03em; color: var(--color-ink); text-decoration: none;
  white-space: nowrap;
}
.nav__links {
  display: flex; align-items: center; gap: var(--space-lg);
  margin-inline-start: auto;
}
.nav__links a {
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  color: oklch(from var(--color-ink) l c h / 0.78);
  text-decoration: none; padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav__links a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.nav__links a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.nav__cta { margin-inline-start: var(--space-md); }
.nav__links-cta { display: none; }   /* mobile-panel duplicate of the CTA */

/* Menu disclosure — only below the layout breakpoint */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  margin-inline-start: auto;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius-pill);
  color: var(--color-ink); cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.nav__toggle:hover { background: var(--tint-rose); }
.nav__toggle-bars { display: grid; gap: 4px; width: 18px; }
.nav__toggle-bars span {
  display: block; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 60rem) {
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }

  .nav__links {
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0; right: 0;
    margin-inline-start: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-xs);
    background: var(--color-paper);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-contact), var(--shadow-lift), inset 0 0 0 1px var(--color-rule);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    /* visibility is discrete — delay it to the END on close so the fade-out
       is seen, and apply it instantly on open so the fade-in is seen. */
    transition: opacity var(--dur-mid) var(--ease-out),
                transform var(--dur-mid) var(--ease-out),
                visibility 0s linear var(--dur-mid);
  }
  .nav__links.is-open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity var(--dur-mid) var(--ease-out),
                transform var(--dur-mid) var(--ease-out),
                visibility 0s linear 0s;
  }
  .nav__links a:not(.btn) {
    padding: var(--space-sm) var(--space-md);
    min-height: 44px; display: flex; align-items: center;
    border-bottom: 0; border-radius: var(--radius-input);
    font-size: var(--text-md);
  }
  .nav__links a:not(.btn):hover,
  .nav__links a:not(.btn)[aria-current="page"] { background: var(--tint-rose); }
  .nav__links .nav__links-cta { display: inline-flex; margin-top: var(--space-xs); }
}

/* the pill needs a positioning context for the mobile panel */
.nav__inner { position: relative; }

/* The character mark — one small reacting dot, rose by default */
.mark {
  width: 0.62em; height: 0.62em; border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 0 0 var(--tint-rose-hi);
  animation: mark-pulse 4s var(--ease-in-out) infinite;
  flex: none;
}
@keyframes mark-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 var(--tint-rose-hi); }
  50%      { transform: scale(1.14); box-shadow: 0 0 0 6px var(--tint-rose-0); }
}
.nav__brand:hover .mark { background: var(--color-accent-3); }

/* ==================================================================
   Hero — H2 split diptych, 7/5, art right, off-centre
   ================================================================== */

.hero {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__title {
  font-size: var(--text-display);
  max-width: 14ch;
}
.hero__lede { margin-top: var(--space-lg); }
.hero__actions {
  margin-top: var(--space-xl);
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
}
.hero__note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
}

/* the artefact bleeds past the right gutter — the off-grid moment */
.hero__art {
  position: relative;
  margin-right: calc(var(--page-gutter) * -1);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.hero__art .frame:nth-child(1) { transform: rotate(-1.5deg); }
.hero__art .frame:nth-child(2) { transform: translateY(var(--space-2xl)) rotate(1.2deg); }
.hero__art .frame:nth-child(3) { transform: translateY(calc(var(--space-md) * -1)) rotate(0.8deg); }

@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__art { margin-right: 0; }
  .hero__art .frame { transform: none !important; }
  .hero__art .frame:nth-child(3) { display: none; }
}

/* ==================================================================
   Frames — the Workbench spine. A frame is a placeholder until a real
   photo is dropped in; it is never a fake browser / phone chrome.
   ================================================================== */

.frame {
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: var(--color-paper-2);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
  transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid) var(--ease-out);
}
.frame > img { width: 100%; height: 100%; object-fit: cover; }

/* Tier-A placeholder surface — soft rose/lilac wash + a labelled slot.
   Replace the whole .frame__slot with <img> when real photos exist. */
.frame__slot {
  aspect-ratio: var(--slot-ratio, 4 / 3);
  display: grid; place-content: center; gap: var(--space-2xs);
  text-align: center;
  padding: var(--space-md);
  background:
    radial-gradient(120% 90% at 20% 10%, var(--tint-rose-hi), transparent 60%),
    radial-gradient(110% 80% at 90% 90%, var(--tint-lilac-hi), transparent 62%),
    var(--color-paper-2);
}
.frame__slot span { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: oklch(from var(--color-ink) l c h / 0.5); }

figure.frame { margin: 0; }
.frame figcaption {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  background: var(--color-paper);
  font-size: var(--text-sm);
  color: oklch(from var(--color-ink) l c h / 0.8);
}
.frame figcaption b { font-weight: 600; color: var(--color-ink); }

/* ==================================================================
   Brand marquee — two counter-scrolling rails of brand marks.
   WCAG 2.2.2: motion runs > 5s, so it ships with a real pause control,
   pauses on hover / focus, and stops entirely under reduced-motion.
   ================================================================== */

.brands { position: relative; }
.brands__rails { display: grid; gap: var(--space-md); }

.brands__rail {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--color-ink) 8%, var(--color-ink) 92%, transparent);
}
.brands__track {
  display: flex; flex: none; gap: var(--space-md);
  list-style: none; margin: 0;
  padding-inline: 0 var(--space-md);
  animation: brand-scroll var(--rail-dur, 44s) linear infinite;
  will-change: transform;
  /* Safety net: a track shorter than its rail would leave a visible hole
     mid-loop. Floor it at the rail width and spread the marks instead —
     so the loop stays seamless no matter how many brands you list. */
  min-width: 100%;
  justify-content: space-around;
}
.brands__rail--rev .brands__track { animation-direction: reverse; }

@keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.brands__rail:hover .brands__track,
.brands__rail:focus-within .brands__track,
.brands.is-paused .brands__track { animation-play-state: paused; }

.brandmark {
  flex: none;
  display: grid; place-items: center;
  min-width: 12.5rem; min-height: 6.25rem;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-contact), inset 0 0 0 1px var(--color-rule);
  transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid) var(--ease-out), background-color var(--dur-mid) var(--ease-out);
}
.brandmark:hover { transform: translateY(-3px); box-shadow: var(--shadow-contact), var(--shadow-lift); background: var(--tint-rose); }
/* Dua batas sekaligus supaya logo lebar dan logo kotak sama-sama terlihat
   seimbang: yang memanjang mentok di lebar, yang kotak mentok di tinggi.
   Tanpa max-width, logo memanjang meluber keluar kotaknya. */
.brandmark img {
  max-height: 3.75rem;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brandmark span {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(from var(--color-ink) l c h / 0.62);
  text-align: center;
}

.brands__control {
  margin-top: var(--space-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
}
.pausebtn {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 36px; padding: 0.35rem 0.9rem;
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(from var(--color-ink) l c h / 0.75);
  background: transparent; cursor: pointer;
  border: 0; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-rule-2);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.pausebtn:hover { background: var(--tint-rose); color: var(--color-ink); }

@media (max-width: 40rem) {
  .brandmark { min-width: 8.5rem; min-height: 4.5rem; padding: var(--space-sm) var(--space-md); }
}

/* ==================================================================
   Page header — for the inner pages (Product, Pricelist)
   ================================================================== */

.pagehead {
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 3.5rem));
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.pagehead h1 { font-size: var(--text-4xl); max-width: 16ch; }
.pagehead .lede { margin-top: var(--space-lg); }

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
  margin-bottom: var(--space-lg);
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(from var(--color-ink) l c h / 0.6);
}
.crumb a { color: inherit; text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--color-rule-2); }
.crumb a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.crumb span { white-space: nowrap; }

/* Brand-grouped sections on the inner pages */
.brandgroup + .brandgroup { margin-top: var(--space-3xl); }
.brandgroup__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: 1.5px dashed var(--color-rule-2);
}
.brandgroup__head h2 { font-size: var(--text-2xl); }
.brandgroup__head p { font-size: var(--text-sm); color: oklch(from var(--color-ink) l c h / 0.7); }

/* ==================================================================
   Profile — 2/3 · 1/3 asymmetric, with a signed aside (the designed exception)
   ================================================================== */

.profile { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.profile__body h2 { font-size: var(--text-3xl); }
.profile__body p + p { margin-top: var(--space-md); }
.profile__lede { margin-top: var(--space-lg); }

.profile__aside {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
  transform: rotate(-0.8deg);   /* one tilted off-grid card */
}
.profile__aside p { font-size: var(--text-sm); }
.profile__sign { margin-top: var(--space-md); font-weight: 600; }

.steps { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; gap: 0; }
.steps li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1.5px dashed var(--color-rule-2);
  align-items: baseline;
}
.steps li:last-child { border-bottom: 1.5px dashed var(--color-rule-2); }
.steps__n {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); letter-spacing: -0.03em;
  color: var(--color-accent-deep);
}
.steps h3 { font-size: var(--text-lg); }
.steps p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: oklch(from var(--color-ink) l c h / 0.78); }

@media (max-width: 60rem) {
  .profile { grid-template-columns: minmax(0, 1fr); }
  .profile__aside { transform: none; }
}

/* ==================================================================
   Kartu brand — kotak yang dipencet untuk membuka harga
   ================================================================== */

.brandcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (max-width: 60rem) { .brandcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .brandcards { grid-template-columns: minmax(0, 1fr); } }

.brandcard {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 11rem;
  padding: var(--space-lg);
  font: inherit;
  color: inherit;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
  cursor: pointer;
  transition: transform var(--dur-mid) var(--ease-spring),
              box-shadow var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out);
}
.brandcard:hover  { transform: translateY(-4px); box-shadow: var(--shadow-contact), var(--shadow-lift); }
.brandcard:active { transform: translateY(-1px); box-shadow: var(--shadow-contact); transition-duration: 90ms; }
.brandcard:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* tiap kartu memegang aksennya sendiri — makin pekat saat disentuh */
.brandcard--rose  { background: var(--tint-rose); }
.brandcard--rose:hover  { background: var(--tint-rose-hi); }
.brandcard--lilac { background: var(--tint-lilac); }
.brandcard--lilac:hover { background: var(--tint-lilac-hi); }
.brandcard--gold  { background: var(--tint-gold); }
.brandcard--mint  { background: var(--tint-mint); }
.brandcard--coral { background: var(--tint-coral); }
.brandcard--coral:hover { background: var(--tint-coral-hi); }

/* Kartu depan memuat gambar saja — nama brand hidup di dalam dialog.
   Dua batas sekaligus supaya gambar memanjang dan gambar kotak
   sama-sama terlihat seimbang. */
.brandcard__gambar {
  max-height: 6.5rem;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

/* cadangan waktu gambarnya belum diunggah — kartu tidak boleh kosong melompong */
.brandcard__nama {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

/* ==================================================================
   Dialog harga — <dialog> bawaan browser: Escape, jebakan fokus,
   dan pembacaan layar sudah ditangani peramban, bukan tambalan JS.
   ================================================================== */

.pricedialog {
  width: min(46rem, 92vw);
  max-height: 86vh;
  max-height: 86dvh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-frame);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-contact), var(--shadow-lift);
  overflow: hidden;
}
.pricedialog::backdrop {
  background: var(--backdrop-tint);
  backdrop-filter: blur(3px);
}

/* sama seperti laci keranjang: flex hanya saat terbuka */
.pricedialog[open] { display: flex; flex-direction: column; }

.pricedialog__head {
  flex: none;
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  border-bottom: 1.5px dashed var(--color-rule-2);
}
.pricedialog__head h3 { font-size: var(--text-2xl); }
.pricedialog__head p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: oklch(from var(--color-ink) l c h / 0.72); }
.pricedialog__logo { height: 2rem; width: auto; object-fit: contain; margin-bottom: var(--space-xs); }

.pricedialog__x {
  flex: none;
  margin-inline-start: auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1;
  color: var(--color-ink);
  background: transparent;
  border: 0; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.pricedialog__x:hover { background: var(--tint-rose-hi); }
.pricedialog__x:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.pricedialog__body {
  padding: var(--space-md) var(--space-xl) var(--space-xl);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pricedialog__body .pricetable { min-width: 0; }
.pricedialog__body caption { padding-bottom: var(--space-sm); }

@media (max-width: 40rem) {
  .pricedialog { width: 96vw; max-height: 90vh; }
  .pricedialog__head { padding: var(--space-lg) var(--space-lg) var(--space-md); }
  .pricedialog__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
}

/* ==================================================================
   F3 · Pricelist — tabular spec sheet
   ================================================================== */

.pricetable-wrap { overflow-x: auto; }
.pricetable {
  width: 100%; min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.pricetable caption {
  text-align: left; padding-bottom: var(--space-md);
  font-size: var(--text-sm); color: oklch(from var(--color-ink) l c h / 0.62);
}
.pricetable th, .pricetable td { padding: var(--space-md) var(--space-md) var(--space-md) 0; vertical-align: baseline; }
.pricetable thead th {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  color: oklch(from var(--color-ink) l c h / 0.6);
  border-bottom: 2px solid var(--color-rule-2);
}
.pricetable tbody tr { border-bottom: 1.5px dashed var(--color-rule); }
.pricetable tbody tr:hover { background: var(--tint-rose); }
.pricetable tbody th { font-weight: 600; font-size: var(--text-md); }
.pricetable td:last-child { padding-right: 0; }
.price { font-family: var(--font-label); font-weight: 500; white-space: nowrap; }
.price--todo { color: oklch(from var(--color-ink) l c h / 0.62); }

.pricenote {
  margin-top: var(--space-lg);
  display: grid; gap: var(--space-xs);
  font-size: var(--text-sm); color: oklch(from var(--color-ink) l c h / 0.72);
}

/* ==================================================================
   Gallery — colour-shift card grid, irregular spans (the off-grid moment)
   ================================================================== */

.gallery-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.counter {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-counter); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--color-accent-3);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.counter.is-done { animation: counter-pop 420ms var(--ease-spring); }
@keyframes counter-pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}
.gallery li { list-style: none; }
.gallery li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery li:nth-child(6) { grid-column: span 2; }
.gallery .tile {
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-paper-2);
  box-shadow: var(--shadow-contact);
  transition: transform var(--dur-mid) var(--ease-spring), box-shadow var(--dur-mid) var(--ease-out), background-color var(--dur-mid) var(--ease-out);
  display: block;
}
.gallery .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-contact), var(--shadow-lift); }

/* each tile owns its own accent tint — deepens on hover, never competes */
.tile--rose  { background: var(--tint-rose); }
.tile--rose:hover  { background: var(--tint-rose-hi); }
.tile--lilac { background: var(--tint-lilac); }
.tile--lilac:hover { background: var(--tint-lilac-hi); }
.tile--coral { background: var(--tint-coral); }
.tile--coral:hover { background: var(--tint-coral-hi); }
.tile--mint  { background: var(--tint-mint); }
.tile--gold  { background: var(--tint-gold); }

.gallery .frame__slot { height: 100%; background: transparent; aspect-ratio: auto; min-height: 9rem; }
.gallery li { min-height: 9rem; }
.gallery .tile > img { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; display: block; }
.gallery li:nth-child(1) .tile > img { min-height: 19rem; }
.gallery li:nth-child(1) .frame__slot { min-height: 19rem; }

@media (max-width: 60rem) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery li:nth-child(1) { grid-column: span 2; grid-row: auto; }
  .gallery li:nth-child(6) { grid-column: span 2; }
  .gallery li:nth-child(1) .frame__slot { min-height: 13rem; }
}

/* ==================================================================
   Contact
   ================================================================== */

.contact { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact h2 { font-size: var(--text-3xl); max-width: 16ch; }
.contact__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.contact__list { list-style: none; margin: 0; padding: 0; display: grid; }
.contact__list li {
  list-style: none;
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: 1.5px dashed var(--color-rule-2);
  align-items: baseline;
}
.contact__list li:last-child { border-bottom: 1.5px dashed var(--color-rule-2); }
.contact__list dt, .contact__k { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: oklch(from var(--color-ink) l c h / 0.6); }
.contact__v { font-weight: 500; }
.contact__v a { text-decoration: none; }
.contact__v a:hover { text-decoration: underline; }

@media (max-width: 60rem) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact__list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

/* ==================================================================
   C4 · Sticky bottom bar — appears after the fold
   ================================================================== */

.cta-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) var(--page-gutter);
  background: oklch(from var(--color-paper) l c h / 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-top: var(--rule-hair) solid var(--color-rule);
  transform: translateY(110%);
  transition: transform 320ms var(--ease-out);
}
.cta-sticky.is-shown { transform: translateY(0); }
.cta-sticky__text { font-size: var(--text-sm); color: oklch(from var(--color-ink) l c h / 0.8); }
@media (max-width: 40rem) {
  .cta-sticky__text { display: none; }
  .cta-sticky { justify-content: stretch; }
  .cta-sticky .btn { flex: 1; }
}

/* ==================================================================
   Ft5 · Statement footer — one closing sentence, then quiet meta.
   (The kinetic moment on this site belongs to the brand rails.)
   ================================================================== */

.foot { border-top: 2px solid var(--color-ink); background: var(--color-paper); }
.foot__statement {
  max-width: var(--shell); margin-inline: auto;
  padding: var(--space-3xl) var(--page-gutter) var(--space-2xl);
}
.foot__statement p {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.03em;
  max-width: 20ch;
  overflow-wrap: anywhere;
}
.foot__statement .btn { margin-top: var(--space-xl); }

.foot__meta {
  max-width: var(--shell); margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter) var(--space-2xl);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  align-items: center; justify-content: space-between;
  border-top: 1.5px dashed var(--color-rule);
  font-size: var(--text-sm);
  color: oklch(from var(--color-ink) l c h / 0.7);
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot__links a { color: inherit; text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; }
.foot__links a:hover { color: var(--color-ink); border-bottom-color: var(--color-accent); }

/* ==================================================================
   Tombol keranjang di nav
   ================================================================== */

.navcart {
  position: relative;
  margin-inline-start: var(--space-sm);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-pill);
  color: var(--color-ink); cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.navcart:hover { background: var(--tint-rose-hi); }
.navcart:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* keranjang digambar dengan CSS — bukan emoji, bukan ikon dari pustaka lain */
.navcart__ikon {
  width: 17px; height: 14px;
  border: 2px solid currentColor;
  border-top-width: 0;
  border-radius: 0 0 5px 5px;
  position: relative;
}
.navcart__ikon::before {
  content: ""; position: absolute;
  left: 50%; top: -8px; transform: translateX(-50%);
  width: 11px; height: 11px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.navcart__badge {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  font-family: var(--font-label); font-size: 10px; font-weight: 500;
  line-height: 1;
  color: var(--color-paper);
  background: var(--color-accent-3);
  border-radius: var(--radius-pill);
}

/* ==================================================================
   Laci keranjang
   ================================================================== */

.keranjang {
  width: min(30rem, 94vw);
  /* dvh, bukan vh: di HP, vh mengabaikan bilah alamat browser sehingga
     laci jadi lebih tinggi dari layar dan tombol Checkout terdorong keluar */
  max-height: 88vh;
  max-height: 88dvh;
  margin-inline-start: auto;      /* menepi ke kanan, bukan di tengah */
  margin-block: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-frame);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-contact), var(--shadow-lift);
  overflow: hidden;
}

/* Hanya saat terbuka — kalau display diatur tanpa [open], gaya bawaan
   peramban yang menyembunyikan dialog tertutup ikut tertimpa dan
   lacinya tampil terus. */
.keranjang[open] {
  display: flex;
  flex-direction: column;
}
.keranjang__head, .keranjang__aksi, .keranjang__kosong { flex: none; }
.keranjang::backdrop { background: var(--backdrop-tint); backdrop-filter: blur(3px); }

.keranjang__head {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1.5px dashed var(--color-rule-2);
}
.keranjang__head h2 { font-size: var(--text-xl); }
.keranjang__x {
  margin-inline-start: auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1;
  color: var(--color-ink);
  background: transparent; border: 0; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.keranjang__x:hover { background: var(--tint-rose-hi); }
.keranjang__x:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.keranjang__daftar {
  padding: var(--space-xs) var(--space-xl);
  /* daftar yang menyusut, bukan tombol Checkout. min-height:0 wajib —
     tanpa itu flex item menolak mengecil di bawah tinggi isinya. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* scroll mentok tidak merembet ke halaman */
}
.keranjang__item {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: 1.5px dashed var(--color-rule);
}
.keranjang__item:last-child { border-bottom: 0; }
.keranjang__info { flex: 1; min-width: 0; }
.keranjang__nama { font-weight: 600; overflow-wrap: anywhere; }
.keranjang__brand {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(from var(--color-ink) l c h / 0.62);
  margin-top: 2px;
}
.keranjang__harga { font-size: var(--text-sm); color: oklch(from var(--color-ink) l c h / 0.72); margin-top: var(--space-2xs); }
.keranjang__kanan { flex: none; display: grid; justify-items: end; gap: var(--space-xs); }
.keranjang__subtotal { font-family: var(--font-label); font-weight: 500; }
.keranjang__buang {
  font: inherit; font-size: var(--text-xs);
  color: oklch(from var(--color-ink) l c h / 0.62);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.keranjang__buang:hover { color: var(--color-accent-3-deep); }
.keranjang__buang:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.qty { display: inline-flex; align-items: center; gap: 2px; }
.qty__tombol {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font: inherit; font-size: var(--text-md); line-height: 1;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 0; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.qty__tombol:hover { background: var(--tint-rose-hi); }
.qty__tombol:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.qty__nilai {
  min-width: 2.25rem; text-align: center;
  font-family: var(--font-label); font-variant-numeric: tabular-nums;
}

.keranjang__kosong {
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  display: grid; gap: var(--space-lg); justify-items: center;
}
.keranjang__aksi {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  border-top: 1.5px dashed var(--color-rule-2);
  display: grid; gap: var(--space-md);
}
.keranjang__total { display: flex; align-items: baseline; justify-content: space-between; }
.keranjang__total-nilai { font-family: var(--font-label); font-size: var(--text-lg); }
.keranjang__checkout { width: 100%; }

@media (max-width: 40rem) {
  .keranjang__head, .keranjang__aksi { padding-inline: var(--space-lg); }
  .keranjang__daftar { padding-inline: var(--space-lg); }

  /* Di layar kecil kepala dan kaki laci merampas hampir semua ruang daftar.
     Rapatkan keduanya dan naikkan langit-langitnya — semua tambahan
     langsung jadi ruang baca untuk item. */
  .keranjang { max-height: 93dvh; }
  .keranjang__head { padding-block: var(--space-md); }
  .keranjang__aksi { padding-block: var(--space-md) var(--space-lg); gap: var(--space-sm); }

  /* Kolom kanan yang menumpuk membuat tiap item setinggi ~190px — cuma
     satu yang muat sekali lihat. Dibaringkan jadi satu baris di bawah
     nama produk, tingginya turun hampir separuh. */
  .keranjang__item { flex-direction: column; gap: var(--space-sm); }
  .keranjang__kanan {
    display: flex; flex-direction: row;
    align-items: center; justify-content: space-between;
    width: 100%;
    gap: var(--space-md);
  }
  .keranjang__subtotal { margin-inline-start: auto; }
}

/* Sasaran sentuh minimal 44×44 di layar sentuh — jari bukan kursor.
   Berlaku ke bawah 48rem supaya tablet ikut kebagian. */
@media (max-width: 48rem), (pointer: coarse) {
  .qty__tombol { width: 44px; height: 44px; }
  .qty__nilai { min-width: 2.75rem; }
  .tambah { min-height: 44px; padding-inline: 1rem; }
  .keranjang__buang, .tautan-teks {
    min-height: 44px;
    display: inline-flex; align-items: center;
    padding-block: 10px; padding-inline: 6px;
    margin-inline-end: -6px;   /* teksnya tetap rata kanan, area sentuhnya saja yang melebar */
  }
}

/* ==================================================================
   Tombol tambah di tabel harga
   ================================================================== */

.pricetable__aksi { text-align: right; white-space: nowrap; }
.tambah {
  display: inline-flex; align-items: center; gap: 0.25em;
  min-height: 36px; padding: 0.4rem 0.85rem;
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap;
  color: var(--color-ink);
  background: var(--color-accent);
  border: 0; border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 3px 0 0 var(--color-accent-deep);
  transform: translateY(0);
  transition: transform var(--dur-short) var(--ease-press),
              box-shadow var(--dur-short) var(--ease-press),
              background-color var(--dur-short) var(--ease-out);
}
.tambah:hover  { transform: translateY(-2px); box-shadow: 0 5px 0 0 var(--color-accent-deep); }
.tambah:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--color-accent-deep); transition-duration: 70ms; }
.tambah:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tambah.is-masuk { background: var(--color-mint); box-shadow: 0 3px 0 0 var(--color-accent-2-deep); }
.tambah--kosong { font-size: var(--text-xs); white-space: nowrap; }

/* ==================================================================
   Tahapan pemesanan
   ================================================================== */

.langkah {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  list-style: none; margin: 0 0 var(--space-lg); padding: 0;
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(from var(--color-ink) l c h / 0.55);
}
.langkah li { display: flex; align-items: center; gap: var(--space-sm); }
.langkah li + li::before { content: "»"; color: oklch(from var(--color-ink) l c h / 0.4); }
.langkah a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-rule-2); }
.langkah a:hover { color: var(--color-ink); }
.langkah [aria-current="step"] { color: var(--color-accent-2-deep); font-weight: 500; }

/* ==================================================================
   Checkout
   ================================================================== */

.checkout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 60rem) { .checkout { grid-template-columns: minmax(0, 1fr); } }

.checkout__form { display: grid; gap: var(--space-xl); }

.isian {
  border: 0; margin: 0; padding: 0;
  display: grid; gap: var(--space-md);
}
.isian legend {
  padding: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}
.isian__catatan {
  font-size: var(--text-sm);
  color: oklch(from var(--color-ink) l c h / 0.68);
  margin-top: calc(var(--space-xs) * -1);
}
.isian__baris { display: grid; gap: var(--space-2xs); }
.isian__label { font-size: var(--text-sm); font-weight: 500; }

.isian input[type="text"],
.isian input[type="tel"] {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.9rem;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1.5px solid var(--color-rule-2);
  border-radius: var(--radius-input);
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.isian input::placeholder { color: oklch(from var(--color-ink) l c h / 0.42); }
.isian input:hover { border-color: var(--color-accent-deep); }
.isian input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-accent-deep);
}
.isian input:user-invalid {
  border-color: var(--color-accent-3-deep);
  box-shadow: 0 0 0 3px var(--tint-coral);
}

.centang {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}
.centang input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--color-accent-deep);
  cursor: pointer;
}
.centang input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.kabar {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-input);
  background: var(--tint-mint);
  font-size: var(--text-sm);
}

/* ---- ringkasan ---- */
.checkout__ringkasan {
  position: sticky; top: calc(var(--nav-h) + var(--space-lg));
  padding: var(--space-xl);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
}
@media (max-width: 60rem) { .checkout__ringkasan { position: static; } }
.checkout__ringkasan h2 { font-size: var(--text-xl); margin-bottom: var(--space-lg); }

.ringkasan { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; text-align: left; }
.ringkasan thead th {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  color: oklch(from var(--color-ink) l c h / 0.6);
  border-bottom: 2px solid var(--color-rule-2);
  padding-bottom: var(--space-xs);
}
.ringkasan tbody tr { border-bottom: 1.5px dashed var(--color-rule); }
.ringkasan th, .ringkasan td { padding: var(--space-md) var(--space-sm) var(--space-md) 0; vertical-align: baseline; }
.ringkasan td:last-child, .ringkasan th:last-child { padding-right: 0; text-align: right; }
.ringkasan tbody th { font-weight: 600; overflow-wrap: anywhere; }
.ringkasan__brand {
  display: block; margin-top: 2px;
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(from var(--color-ink) l c h / 0.62);
}
.ringkasan__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 2px solid var(--color-rule-2);
  font-family: var(--font-label);
}
.ringkasan__total strong { font-size: var(--text-lg); }

.tautan-teks {
  margin-top: var(--space-lg);
  font: inherit; font-size: var(--text-sm);
  color: oklch(from var(--color-ink) l c h / 0.65);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.tautan-teks:hover { color: var(--color-accent-3-deep); }
.tautan-teks:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---- konfirmasi ---- */
.pesan-pratinjau {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  max-width: 46rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-contact), inset 0 0 0 1px var(--color-rule);
}

.kosong-besar {
  display: grid; gap: var(--space-lg); justify-items: start;
  max-width: 44ch;
}
.kosong-besar h2 { font-size: var(--text-3xl); }

/* ==================================================================
   Reveal — one orchestrated entrance, section heads only
   ================================================================== */

/* Hanya disembunyikan kalau JS memang hidup (site.js menanam .js di <html>).
   Tanpa ini, kegagalan JS atau IntersectionObserver membuat judul hilang total. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}

/* ==================================================================
   Reduced motion — restraint, not breakage
   ================================================================== */

@media print {
  .js .reveal { opacity: 1; transform: none; }
  .nav, .cta-sticky, .brands__control { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mark { animation: none; }
  .brands__track { animation: none; }
  .brands__rail { overflow-x: auto; }   /* still reachable — just not moving on its own */
  .counter.is-done { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition: opacity 150ms linear; }
  .frame, .gallery .tile, .btn {
    transition: opacity 150ms linear, background-color 150ms linear, box-shadow 150ms linear;
  }
  .frame:hover, .gallery .tile:hover,
  .btn:hover, .btn:active { transform: none; }
  .hero__art .frame { transform: none !important; }
  .profile__aside { transform: none; }
  /* the nav still morphs — it carries meaning — but without the long glide */
  .nav, .nav__inner { transition-duration: 150ms; }
  .nav__links { transition-duration: 100ms; }
  .nav__toggle-bars span { transition: none; }
  .brandmark { transition: background-color 150ms linear, box-shadow 150ms linear; }
  .brandmark:hover { transform: none; }
}