/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero · tone: utilitarian, percaya diri
 * theme: custom (vibe: "biru merek, kertas dingin, tegas tanpa hiasan")
 * paper oklch(98.6% 0.004 266) · accent oklch(47.1% 0.243 266) = #1E3FE0 · Bricolage Grotesque + Geist
 * theme_axes: light / display-heavy (Bricolage 700) / cool
 * nav: N9 edge-aligned (logo kiri, 3 tautan kanan, frost saat gulir) · footer: Ft5 Statement (kontak + kaki menyatu, latar tinta)
 * enrichment: none — tipografi + satu foto pendiri · gerak: line-reveal (muat) · hover-slide (baris) · jam WIB
 * pre-emit critique: P5 H5 E4 S4 R5 V4
 */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-lg)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--color-accent); color: var(--color-ink-inverse); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.end :focus-visible { outline-color: var(--color-accent-bright); }

.sprite { position: absolute; }
.icon { width: 1.125rem; height: 1.125rem; flex: none; }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: max(var(--page-gutter), env(safe-area-inset-left)) max(var(--page-gutter), env(safe-area-inset-right)); }
.skip {
  position: absolute; left: var(--space-sm); top: var(--space-2xs); z-index: calc(var(--z-nav) + 1);
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm);
  background: var(--color-ink); color: var(--color-ink-inverse); font-size: var(--text-sm); text-decoration: none;
  transform: translateY(-250%);
}
.skip:focus-visible { transform: none; }

/* logo = mask, supaya warnanya ikut token (biru di terang, putih di bagian gelap) */
.logo {
  display: block; width: 6.5rem; aspect-ratio: 822 / 180; background: var(--color-accent);
  -webkit-mask: url("logo.png") center / contain no-repeat; mask: url("logo.png") center / contain no-repeat;
}
.logo--inverse { background: var(--color-ink-inverse); }

/* ---------- nav · N9 ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav); padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav.is-scrolled {
  background: color-mix(in oklch, var(--color-paper) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--color-rule);
}
.nav__inner { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.nav__logo { display: inline-flex; align-items: center; min-height: 2.75rem; }
.nav__links { display: flex; align-items: center; gap: var(--space-3xs); }
.nav__link {
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 var(--space-xs); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); background: var(--color-paper-2); }
.nav__link:active { background: var(--color-rule); }
.nav__link--box { margin-left: var(--space-2xs); padding-inline: var(--space-sm); border: 1px solid var(--color-rule-strong); color: var(--color-ink); }
.nav__link--box:hover { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-ink-inverse); }
.nav__link--wide { display: none; }
@media (min-width: 30rem) { .nav__link--wide { display: inline-flex; } }

/* ---------- hero · Marquee ---------- */
.hero { padding-block: clamp(3rem, 9vw, 7.5rem) clamp(3rem, 7vw, 6rem); }
.hero__title { font-size: var(--text-display); font-weight: 700; line-height: 0.96; letter-spacing: -0.035em; font-variation-settings: "opsz" 96; }
.hero__title b { font-weight: inherit; color: var(--color-accent); }
/* tiap baris judul naik dari balik tepi bawahnya, sekali saat halaman dimuat */
.line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.line > span { display: block; transform: translateY(108%); animation: line-up var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
@keyframes line-up { to { transform: none; } }
.rise { opacity: 0; transform: translateY(12px); animation: rise 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: clamp(2rem, 5vw, 4rem); padding-top: var(--space-md); border-top: 1px solid var(--color-ink); }
.hero__lede { max-width: 34rem; font-size: var(--text-xl); line-height: 1.5; color: var(--color-muted); }
.hero__next {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2.75rem; justify-self: start;
  font-weight: 500; white-space: nowrap; text-decoration: none;
}
.hero__next .icon { transition: transform var(--dur-short) var(--ease-out); }
.hero__next:hover { color: var(--color-accent); }
.hero__next:hover .icon { transform: translateY(3px); }
.hero__next:active .icon { transform: translateY(5px); }
@media (min-width: 56rem) {
  .hero__row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .hero__next { justify-self: end; }
}

/* ---------- produk: baris indeks, bukan kartu ---------- */
.products__title { font-size: var(--text-sm); font-weight: 500; font-family: var(--font-body); letter-spacing: 0; color: var(--color-muted); padding-bottom: var(--space-sm); }
.plist { border-top: 1px solid var(--color-rule-strong); }
.prow {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs);
  padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-strong); text-decoration: none;
}
/* garis biru tumbuh dari kiri saat disorot */
.prow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out);
}
.prow:hover::after, .prow:focus-visible::after { transform: scaleX(1); }
.prow__name { font: 700 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.04em; transition: color var(--dur-short) var(--ease-out), transform 420ms var(--ease-out); }
.prow:hover .prow__name { color: var(--color-accent); transform: translateX(var(--space-xs)); }
.prow__what { max-width: 36rem; font-size: var(--text-md); line-height: 1.6; color: var(--color-muted); }
.prow__what b { display: block; font-weight: 600; color: var(--color-ink); }
.prow__go { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.prow__go .icon { transition: transform var(--dur-short) var(--ease-out); }
.prow:hover .prow__go .icon { transform: translate(3px, -3px); }
.prow:active .prow__name { transform: translateX(var(--space-2xs)); }
@media (min-width: 56rem) {
  .prow { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 8.5rem; align-items: center; gap: var(--space-xl); padding-block: var(--space-xl); }
  .prow__go { justify-self: end; }
}

/* ---------- tentang ---------- */
.about { padding-top: var(--section-gap); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.about__photo { max-width: 26rem; border-radius: var(--radius-photo); overflow: hidden; background: var(--color-paper-2); }
.about__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.about__text h2 { font-size: var(--text-3xl); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.about__text p { max-width: 58ch; margin-top: var(--space-md); color: var(--color-muted); }
.about__text h2 + p { margin-top: var(--space-lg); font-size: var(--text-xl); line-height: 1.5; color: var(--color-ink); }
.about__sign { display: grid; gap: 0; margin-top: var(--space-lg) !important; color: var(--color-ink) !important; }
.about__sign b { font: 700 var(--text-xl)/1.3 var(--font-display); letter-spacing: -0.02em; }
.about__sign span { font-size: var(--text-sm); color: var(--color-muted); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.facts div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); font-size: var(--text-md); }
.facts dt { color: var(--color-muted); }
.facts dd { font-weight: 500; }
@media (min-width: 56rem) {
  .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
  .about__photo { max-width: none; position: sticky; top: calc(var(--nav-h) + var(--space-md)); }
  .about__text { padding-top: var(--space-sm); }
}

/* ---------- prinsip ---------- */
.beliefs { padding-block: var(--section-gap); }
.beliefs__lead { max-width: 20ch; font: 700 var(--text-3xl)/1.05 var(--font-display); letter-spacing: -0.04em; text-wrap: balance; }
.beliefs__lead span { color: var(--color-neutral); }
.beliefs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
.beliefs__side h2 { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; max-width: 16ch; }
.beliefs__side p { max-width: 34ch; margin-top: var(--space-sm); font-size: var(--text-md); color: var(--color-muted); }
.beliefs__list { border-top: 1px solid var(--color-ink); }
.beliefs__list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-strong); }
.beliefs__list h3 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.beliefs__list p { max-width: 54ch; font-size: var(--text-md); color: var(--color-muted); }
@media (min-width: 56rem) {
  .beliefs__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
  .beliefs__side { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); align-self: start; }
  .beliefs__list li { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xl); align-items: start; }
}

/* ---------- kontak + kaki · Ft5 ---------- */
.end { background: var(--color-night); color: var(--color-ink-inverse); padding-top: var(--section-gap); padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); }
.end__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.end__head h2 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; max-width: 14ch; }
.end__head p { max-width: 36ch; margin-top: var(--space-md); color: var(--color-night-muted); }
.clist { border-top: 1px solid var(--color-night-rule); }
.crow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3xs) var(--space-sm);
  min-height: 4.25rem; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-night-rule); text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out);
}
.crow__k { grid-column: 1; font-size: var(--text-sm); color: var(--color-night-muted); }
.crow__v { grid-column: 1; font: 600 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; transition: color var(--dur-short) var(--ease-out); }
.crow .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--color-night-muted); transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.crow:hover { border-bottom-color: var(--color-accent-bright); }
.crow:hover .crow__v, .crow:hover .icon { color: var(--color-accent-bright); }
.crow:hover .icon { transform: translate(3px, -3px); }
.crow:active .icon { transform: translate(5px, -5px); }
@media (min-width: 40rem) {
  .crow { grid-template-columns: 8rem minmax(0, 1fr) auto; }
  .crow__v { grid-column: 2; }
  .crow .icon { grid-column: 3; grid-row: auto; }
}
@media (min-width: 64rem) { .end__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); } }

.end__foot {
  display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--section-gap); padding-top: var(--space-md);
  border-top: 1px solid var(--color-night-rule); font-size: var(--text-sm); color: var(--color-night-muted);
}
.end__foot .logo { width: 5.5rem; margin-bottom: var(--space-2xs); }
.end__clock { font-variant-numeric: tabular-nums; }
.end__clock::before { content: "· "; }
.end__links { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-md); }
.end__links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-ink-inverse); font-weight: 500; white-space: nowrap; text-underline-offset: 4px; text-decoration-color: var(--color-night-rule); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.end__links a:hover { text-decoration-color: var(--color-accent-bright); }
@media (min-width: 56rem) {
  .end__foot { flex-direction: row; align-items: center; gap: var(--space-lg); white-space: nowrap; }
  .end__foot .logo { margin-bottom: 0; }
  .end__links { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-delay: 0ms !important; transition-duration: 150ms !important; }
  .line > span, .rise { transform: none; }
  .line > span { animation-name: fade-in; opacity: 0; }
}
@keyframes fade-in { to { opacity: 1; } }