/* ═══════════════════════════════════════════════════════════
   DUNIA BIDAN — "Sunshine Editorial"
   kuning matahari × tinta hangat × krem kertas
   Fraunces (display) + Plus Jakarta Sans (badan, karya Tokotype ID)
   Mobile-first — mayoritas Bunda mengakses dari HP.
   ═══════════════════════════════════════════════════════════ */

:root {
  --sun: #FFC20E;
  --sun-deep: #E0A40B;
  --sun-soft: #FFE9A8;
  --ink: #211C18;
  --ink-2: #3A332C;
  --cream: #FBF3E2;
  --cream-2: #F3E7CB;
  --paper: #FFFDF6;
  --clay: #C4502E;
  --teal: #2F7A6B;
  --rose: #BC4579;
  --muted: #7A6F60;

  --f-disp: "Fraunces", Georgia, serif;
  --f-body: "Plus Jakarta Sans", system-ui, sans-serif;

  --shadow-pop: 4px 4px 0 var(--ink);
  --ease-spring: cubic-bezier(.22, 1.2, .36, 1);
  --ease-smooth: cubic-bezier(.65, 0, .35, 1);
  --wrap: min(1120px, 92vw);
}

/* ── dasar ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}
body.noscroll { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
.wrap { width: var(--wrap); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--sun-deep); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sun); color: var(--ink); }

h1, h2, h3 { font-family: var(--f-disp); font-weight: 620; line-height: 1.04; letter-spacing: -.015em; }
h2 { font-size: clamp(2rem, 7vw, 3.3rem); }
h2 em { font-style: italic; color: var(--sun-deep); }

.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-weight: 800; font-size: .76rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-2);
}
.kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sun); border: 1.5px solid var(--ink); }
.sec { padding: clamp(64px, 11vw, 110px) 0; position: relative; }
.sec-head { max-width: 60ch; margin-bottom: clamp(28px, 5vw, 48px); }
.sec-head h2 { margin-top: .35em; }
.sec-sub { margin-top: .9em; color: var(--muted); font-size: 1.02rem; max-width: 46ch; }

/* ── tombol ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; font-size: .98rem; line-height: 1;
  padding: 1em 1.55em; border-radius: 999px;
  border: 1.5px solid var(--ink);
  transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-spring), background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-sm { padding: .72em 1.15em; font-size: .88rem; }
.btn-sun { background: var(--sun); color: var(--ink); box-shadow: var(--shadow-pop); }
.btn-ink { background: var(--ink); color: var(--cream); box-shadow: 3px 3px 0 rgba(33,28,24,.25); }
.btn-line { background: var(--paper); color: var(--ink); }
.btn-line-ink { background: transparent; color: var(--ink); }
.btn-glass { background: rgba(251,243,226,.1); color: var(--cream); border-color: rgba(251,243,226,.5); backdrop-filter: blur(6px); }
@media (hover:hover) {
  .btn:hover { transform: translate(-2px, -2px); }
  .btn-sun:hover { box-shadow: 7px 7px 0 var(--ink); }
  .btn-ink:hover { background: var(--ink-2); }
  .btn-glass:hover { background: rgba(251,243,226,.2); }
  .btn-line:hover { background: var(--sun-soft); }
  .btn-line-ink:hover { background: rgba(33,28,24,.08); }
}
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

/* ═══ INTRO — logo terbit, titik "i" jadi matahari ═══════ */
.intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  display: grid; place-items: center;
  transition: transform .72s var(--ease-smooth);
}
.intro.s4 { transform: translateY(-101%); }
.intro.done, .intro.skip { display: none; }
.intro-stage { position: relative; width: min(76vw, 430px); }
.intro-logo { position: relative; z-index: 2; width: 100%; height: auto; overflow: visible; }
.intro-logo .L, .intro-logo .smile { fill: var(--cream); transition: fill .3s ease .12s; }
.intro.inked .intro-logo .L, .intro.inked .intro-logo .smile { fill: var(--ink); }

.intro-logo .L {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: db-rise .62s var(--ease-spring) forwards;
  animation-delay: calc(.15s + var(--i) * .055s);
}
.intro-logo .dot { animation-name: db-rise-dot; }
@keyframes db-rise {
  from { opacity: 0; transform: translateY(30px) scale(.9) rotate(3deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes db-rise-dot {
  0%   { opacity: 0; transform: translateY(-46px) scale(.4); }
  62%  { opacity: 1; transform: translateY(5px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
.intro-logo .smile {
  opacity: 0;
  transform-box: fill-box; transform-origin: 50% 15%;
  transform: scale(.45);
}
.intro.s2 .intro-logo .smile { animation: db-smile .55s cubic-bezier(.3, 1.6, .45, 1) forwards; }
@keyframes db-smile {
  from { opacity: 0; transform: scale(.45); }
  to   { opacity: 1; transform: scale(1); }
}

.intro-sun {
  position: absolute; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sun);
  left: 35.7%; top: 10.9%;
  translate: -50% -50%;
  transform: scale(0);
  transition: transform .8s var(--ease-smooth);
}
.intro.s3 .intro-sun { transform: scale(var(--burst, 90)); }

.intro-skip {
  position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0;
  color: rgba(251,243,226,.55); font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(251,243,226,.2);
  opacity: 0; animation: db-fade .5s ease .9s forwards;
  transition: color .2s, border-color .2s;
}
.intro-skip:hover { color: var(--cream); border-color: rgba(251,243,226,.5); }
.intro.s3 .intro-skip { color: rgba(33,28,24,.6); border-color: rgba(33,28,24,.25); }
@keyframes db-fade { to { opacity: 1; } }

/* ═══ HEADER ═════════════════════════════════════════════ */
.header {
  position: fixed; inset: 0 0 auto; z-index: 70;
  padding: 14px 0;
  transition: background .3s, padding .3s, box-shadow .3s;
}
.header-in { width: var(--wrap); margin-inline: auto; display: flex; align-items: center; gap: 18px; }
.brand { margin-right: auto; }
.brand img { height: 28px; width: auto; }
.brand-b { display: none; }
.nav { display: none; }
.header-cta { display: none; }

.burger {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(251,243,226,.45);
  display: grid; place-items: center;
  transition: background .25s, border-color .25s;
}
.burger span {
  grid-area: 1 / 1;
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--cream);
  translate: 0 -3.5px;
  transition: translate .3s var(--ease-spring), rotate .3s var(--ease-spring), background .25s;
}
.burger span:last-child { translate: 0 3.5px; }
.header.scrolled {
  background: rgba(251,243,226,.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  padding: 9px 0;
  box-shadow: 0 1.5px 0 var(--ink);
}
.header.scrolled .brand-w { display: none; }
.header.scrolled .brand-b { display: block; }
.header.scrolled .burger { border-color: rgba(33,28,24,.4); }
.header.scrolled .burger span { background: var(--ink); }
.header.menu-open .brand-b { display: none !important; }
.header.menu-open .brand-w { display: block !important; }
.header.menu-open .burger { border-color: rgba(251,243,226,.45); }
.header.menu-open .burger span { background: var(--cream); }
.header.menu-open .burger span:first-child { translate: 0 0; rotate: 45deg; }
.header.menu-open .burger span:last-child { translate: 0 0; rotate: -45deg; }

/* menu mobile */
.mmenu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink); color: var(--cream);
  padding: 110px 7vw max(36px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; translate: 0 -12px;
  transition: opacity .35s ease, translate .35s ease, visibility 0s .35s;
  overflow: hidden;
}
.mmenu.open { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .35s ease, translate .35s ease; }
.mmenu-smile { position: absolute; right: -36px; bottom: -30px; width: 290px; color: var(--sun); opacity: .16; rotate: -10deg; pointer-events: none; }
.mmenu-nav { display: flex; flex-direction: column; gap: 4px; }
.mmenu-nav a {
  font-family: var(--f-disp); font-size: clamp(2rem, 8.5vw, 2.7rem); font-weight: 600;
  padding: .32em 0; border-bottom: 1px solid rgba(251,243,226,.14);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  opacity: 0; translate: 0 14px;
  transition: opacity .4s ease calc(.08s + var(--i) * .06s), translate .4s ease calc(.08s + var(--i) * .06s), color .2s;
}
.mmenu.open .mmenu-nav a { opacity: 1; translate: 0 0; }
.mmenu-nav a:hover { color: var(--sun); }
.mmenu-nav a span { font-family: var(--f-body); font-size: .78rem; font-weight: 500; color: rgba(251,243,226,.5); letter-spacing: .02em; text-align: right; }
.mnew {
  display: inline-block; margin-right: 7px;
  background: var(--sun); color: var(--ink);
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
  padding: .3em .7em; border-radius: 999px;
}
.mmenu-foot { margin-top: auto; display: flex; gap: 10px; padding-top: 28px; }
.chip-link {
  font-weight: 700; font-size: .88rem; padding: .7em 1.2em;
  border: 1.5px solid rgba(251,243,226,.35); border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s;
}
.chip-link:hover { background: var(--sun); color: var(--ink); border-color: var(--sun); }

/* ═══ HERO ═══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  color: var(--cream);
  display: flex; align-items: flex-end;
  overflow: hidden;
  padding: 120px 0 clamp(72px, 12vh, 120px);
}
.hero-bg { position: absolute; inset: 0; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 30%;
  opacity: .34;
  filter: saturate(1.15) contrast(1.04) brightness(.82);
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(33,28,24,.72) 0%, rgba(33,28,24,.25) 38%, rgba(33,28,24,.55) 70%, rgba(33,28,24,.94) 100%),
    radial-gradient(120% 90% at 85% 10%, transparent 40%, rgba(33,28,24,.5) 100%);
}
.hero-glow {
  position: absolute; left: -18%; bottom: -6%;
  width: 80vmin; height: 80vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,194,14,.32) 0%, transparent 62%);
  pointer-events: none;
}
.hero::after { /* butiran film */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-in { position: relative; z-index: 3; width: var(--wrap); margin-inline: auto; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  color: var(--sun-soft);
  background: rgba(251,243,226,.07);
  border: 1px solid rgba(255,194,14,.4); border-radius: 999px;
  padding: .62em 1.05em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); animation: db-pulse 2.2s ease-out infinite; }
@keyframes db-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,194,14,.55); }
  70% { box-shadow: 0 0 0 11px rgba(255,194,14,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,194,14,0); }
}

.hero-title {
  font-size: clamp(2.95rem, 13.5vw, 6rem);
  font-weight: 600; line-height: .98;
  margin: .42em 0 .3em;
}
.hero-title em { font-style: italic; font-weight: 500; color: var(--sun); }
.smiled { position: relative; display: inline-block; }
.smiled svg {
  position: absolute; left: 2%; right: 2%; width: 96%; height: .26em;
  bottom: -.22em; color: var(--sun); overflow: visible;
}
.smiled svg path { stroke-dasharray: 320; stroke-dashoffset: 320; }
body.ready .smiled svg path { animation: db-draw 1s var(--ease-smooth) 1.05s forwards; }
@keyframes db-draw { to { stroke-dashoffset: 0; } }

.hero-sub { max-width: 36ch; font-size: clamp(1rem, 4vw, 1.13rem); color: rgba(251,243,226,.82); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-ticks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; }
.hero-ticks li { font-size: .82rem; font-weight: 600; color: rgba(251,243,226,.66); display: flex; align-items: center; gap: .5em; }
.hero-ticks li::before { content: "✓"; color: var(--sun); font-weight: 800; }

/* foto mengambang */
.hero-pic {
  position: absolute; z-index: 2; pointer-events: none;
  border: 2px solid var(--cream); border-radius: 16px;
  background: var(--cream);
  box-shadow: 6px 8px 0 rgba(33,28,24,.55);
  overflow: hidden;
  animation: db-float 7s ease-in-out infinite;
}
.hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.hero-pic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; color: var(--ink);
  background: rgba(251,243,226,.92); padding: 4px 9px;
}
.hero-pic-1 { width: clamp(118px, 31vw, 220px); aspect-ratio: 5/6; right: 5vw; top: 13vh; rotate: 5deg; }
.hero-pic-2 { display: none; width: 200px; aspect-ratio: 6/5; right: 16vw; bottom: 17vh; rotate: -5deg; animation-delay: -3.4s; }
@keyframes db-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -13px; }
}

.hero-play {
  position: absolute; z-index: 4; right: 4vw; bottom: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(251,243,226,.4); color: rgba(251,243,226,.85);
  display: grid; place-items: center;
  background: rgba(33,28,24,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-play .ic-play { display: none; }
.hero-play[data-state="pause"] .ic-pause { display: none; }
.hero-play[data-state="pause"] .ic-play { display: block; }

/* munculnya isi hero */
[data-h] { opacity: 0; translate: 0 26px; transition: opacity .75s ease var(--d, 0s), translate .75s var(--ease-spring) var(--d, 0s); }
body.ready [data-h] { opacity: 1; translate: 0 0; }

/* ═══ MARQUEE ════════════════════════════════════════════ */
.mq {
  position: relative; z-index: 5;
  background: var(--sun); color: var(--ink);
  border-block: 2px solid var(--ink);
  rotate: -1.3deg; scale: 1.02 1;
  margin-top: -26px;
  overflow: hidden;
}
.mq-track {
  display: flex; align-items: center; gap: 2.2rem;
  width: max-content; padding: 13px 0;
  animation: db-mq 26s linear infinite;
}
.mq-track span { font-weight: 800; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.mq-track i { font-style: normal; font-size: 1.05rem; }
@keyframes db-mq { to { translate: -50% 0; } }

/* ═══ AGENDA ═════════════════════════════════════════════ */
.sec-agenda { background: var(--cream); overflow: hidden; }
.ev-rail {
  display: flex; gap: 14px;
  margin-inline: calc(50% - 50vw); padding-inline: max(4vw, calc(50vw - var(--wrap)/2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(4vw, calc(50vw - var(--wrap)/2));
  padding-block: 8px 18px;
  scrollbar-width: none;
}
.ev-rail::-webkit-scrollbar { display: none; }
.ev {
  --tag: var(--clay);
  position: relative; flex: 0 0 min(82%, 330px);
  scroll-snap-align: start;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 20px 20px 58px 20px;
  padding: 20px 20px 22px;
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
}
@media (hover:hover) {
  .ev:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
}
.t-yoga { --tag: var(--clay); }
.t-napas { --tag: var(--teal); }
.t-mom { --tag: var(--rose); }
.t-kom { --tag: var(--ink-2); }

.ev-date { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ev-date strong { font-family: var(--f-disp); font-size: 3.1rem; font-weight: 650; line-height: .9; color: var(--tag); letter-spacing: -.02em; }
.ev-date span { font-size: .78rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ev-tag {
  position: absolute; top: 18px; right: 18px;
  font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tag); border: 1.5px solid var(--tag); border-radius: 999px;
  padding: .45em .85em;
}
.ev h3 { font-size: 1.42rem; font-weight: 600; margin-bottom: 12px; padding-right: 8px; }
.ev-meta { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.ev-meta li { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 500; color: var(--ink-2); }
.ev-meta svg { width: 16px; height: 16px; flex: none; color: var(--tag); }
.ev-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ev-price { font-weight: 800; font-size: 1.06rem; letter-spacing: -.01em; }
.ev-price small { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.ev-price small.hot { color: var(--clay); }
.ev-hint { text-align: right; font-size: .82rem; font-style: italic; color: var(--muted); }

/* ═══ PROGRAM ════════════════════════════════════════════ */
.sec-kelas { background: var(--paper); }
.sec-kelas::before {
  content: ""; position: absolute; inset: -2px 0 auto; height: 2px; background: var(--ink);
}
.prog { position: relative; display: grid; gap: 20px; padding-block: clamp(26px, 5vw, 56px); }
.prog + .prog { border-top: 1.5px dashed rgba(33,28,24,.22); }
.prog-no {
  position: absolute; top: 10px; right: 0; z-index: 0;
  font-family: var(--f-disp); font-style: italic; font-weight: 700;
  font-size: clamp(4.6rem, 16vw, 8rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(33,28,24,.18);
  pointer-events: none;
}
.prog-pic { position: relative; z-index: 1; }
.prog-pic img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 22px 22px 88px 22px;
  transition: rotate .3s var(--ease-spring);
}
.prog-flip .prog-pic img { border-radius: 22px 22px 22px 88px; }
@media (hover:hover) { .prog:hover .prog-pic img { rotate: -1.1deg; } }
.prog-txt { position: relative; z-index: 1; }
.prog-txt h3 { font-size: clamp(1.7rem, 6vw, 2.3rem); margin-bottom: .4em; }
.prog-txt > p { color: var(--ink-2); max-width: 44ch; }
.ticks { margin: 18px 0 22px; display: flex; flex-direction: column; gap: 9px; }
.ticks li { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: .94rem; }
.ticks li::before {
  content: "✓"; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--sun); border: 1.5px solid var(--ink);
  display: inline-grid; place-items: center;
  font-size: .7rem; font-weight: 800;
}
.arrow-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 800; font-size: .95rem;
  border-bottom: 2.5px solid var(--sun);
  padding-bottom: 3px;
}
.arrow-link i { font-style: normal; transition: translate .25s var(--ease-spring); }
.arrow-link:hover i { translate: 5px 0; }

/* ═══ VIDEO (gelap) ══════════════════════════════════════ */
.sec-video { background: var(--ink); color: var(--cream); }
.sec-video .kicker { color: var(--sun-soft); }
.sec-video h2 em { color: var(--sun); }
.sec-video .sec-sub { color: rgba(251,243,226,.6); }
.sec-video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sec-video .wrap { position: relative; z-index: 1; }

.yt {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16/9; border-radius: 18px; overflow: hidden;
  border: 1.5px solid rgba(251,243,226,.22);
  background: var(--ink-2);
  text-align: left;
  transition: border-color .25s, transform .25s var(--ease-spring);
}
.yt img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; scale: 1.02;
  transition: scale .4s var(--ease-spring), opacity .3s;
}
.yt::after {
  content: ""; position: absolute; inset: 40% 0 0;
  background: linear-gradient(180deg, transparent, rgba(13,10,8,.88));
}
.yt-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sun); color: var(--ink);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transition: scale .25s var(--ease-spring);
}
.yt-play svg { margin-left: 3px; }
.yt-info { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; }
.yt-info b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.yt-info small { font-size: .73rem; color: rgba(251,243,226,.62); font-weight: 500; }
@media (hover:hover) {
  .yt:hover { border-color: rgba(255,194,14,.65); }
  .yt:hover img { scale: 1.08; }
  .yt:hover .yt-play { scale: 1.12; }
}
.vid-feat .yt-big { border-radius: 24px; }
.vid-feat .yt-big .yt-play { width: 72px; height: 72px; }
.vid-feat .yt-big .yt-info b { font-size: 1.25rem; font-family: var(--f-disp); font-weight: 600; }
.vid-grid { display: grid; gap: 13px; margin-top: 13px; }
.yt-frame { aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 1.5px solid rgba(255,194,14,.5); }
.yt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid-cta { display: flex; justify-content: center; margin-top: 34px; }

/* ═══ MERCH ══════════════════════════════════════════════ */
.sec-merch { background: var(--cream); }
.mer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.mer {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 18px 18px 44px 18px;
  padding: 11px 11px 16px;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
}
@media (hover:hover) {
  .mer:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
  .mer:hover .mer-pic img { scale: 1.06; }
}
.mer-pic { border-radius: 11px 11px 30px 11px; overflow: hidden; aspect-ratio: 1; }
.mer-pic img, .mer-pic svg { width: 100%; height: 100%; object-fit: cover; transition: scale .4s var(--ease-spring); }
.mer h3 { font-family: var(--f-body); font-weight: 700; font-size: .92rem; letter-spacing: -.01em; margin: 12px 2px 1px; }
.mer-price { font-family: var(--f-disp); font-weight: 650; font-size: 1.18rem; margin: 0 2px 12px; }
.mer .btn { margin-top: auto; }
.mer-note { text-align: center; margin-top: 28px; font-weight: 700; font-size: .85rem; color: var(--muted); letter-spacing: .03em; }

/* ═══ TENTANG ════════════════════════════════════════════ */
.sec-tentang { background: var(--cream-2); border-block: 2px solid var(--ink); }
.ten-grid { display: grid; gap: 30px; }
.ten-pic { position: relative; max-width: 480px; }
.ten-pic img { border: 2px solid var(--ink); border-radius: 24px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.ten-sticker {
  position: absolute; top: -16px; right: 12px; rotate: 6deg;
  background: var(--sun); border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 9px 14px;
  font-weight: 800; font-size: .76rem; line-height: 1.3; letter-spacing: .03em; text-align: center;
}
.ten-txt h2 { margin: .3em 0 .5em; }
.ten-txt > p { color: var(--ink-2); max-width: 52ch; }
.ten-stats { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 24px 0 30px; }
.ten-stats strong { display: block; font-family: var(--f-disp); font-weight: 650; font-size: 2rem; line-height: 1; }
.ten-stats span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.ten-quotes { display: grid; gap: 12px; }
.ten-quotes blockquote {
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 16px 16px 16px 42px;
  padding: 16px 18px 14px;
}
.ten-quotes p { font-family: var(--f-disp); font-style: italic; font-weight: 500; font-size: 1.04rem; line-height: 1.45; }
.ten-quotes cite { display: flex; align-items: center; gap: 10px; font-style: normal; font-weight: 700; font-size: .8rem; margin-top: 11px; color: var(--ink-2); }
.av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: .8rem;
  border: 1.5px solid var(--ink);
}
.av-1 { background: var(--sun); }
.av-2 { background: var(--teal); color: var(--cream); }
.av-3 { background: var(--rose); color: var(--cream); }

/* ═══ CTA BAND ═══════════════════════════════════════════ */
.cta-band {
  background: var(--sun); color: var(--ink);
  padding: clamp(70px, 12vw, 120px) 0;
  position: relative; overflow: hidden;
  text-align: center;
}
.cta-band::before { /* lengkung senyum raksasa */
  content: ""; position: absolute; left: 50%; bottom: -42vmin; translate: -50% 0;
  width: 120vmin; height: 120vmin; border-radius: 50%;
  border: 3px solid rgba(33,28,24,.16);
  pointer-events: none;
}
.cta-band::after {
  content: ""; position: absolute; left: 50%; bottom: -34vmin; translate: -50% 0;
  width: 90vmin; height: 90vmin; border-radius: 50%;
  border: 3px solid rgba(33,28,24,.12);
  pointer-events: none;
}
.cta-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta-pic {
  width: clamp(150px, 38vw, 210px); aspect-ratio: 4/3; rotate: -4deg;
  border: 2px solid var(--ink); border-radius: 16px; overflow: hidden;
  box-shadow: 5px 6px 0 rgba(33,28,24,.8);
  margin-bottom: 26px;
  background: var(--cream);
}
.cta-pic img { width: 100%; height: 100%; object-fit: cover; }
.cta-band h2 { font-size: clamp(2.1rem, 8.4vw, 3.8rem); }
.smiled-ink svg { color: var(--ink); }
.cta-band p { margin: 16px auto 28px; max-width: 38ch; font-weight: 500; color: rgba(33,28,24,.78); }
.cta-btns { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 360px; }
.cta-btns .btn { width: 100%; }

/* ═══ FOOTER ═════════════════════════════════════════════ */
.footer { background: var(--ink); color: var(--cream); padding-top: clamp(54px, 9vw, 84px); }
.foot-grid { display: grid; gap: 36px; padding-bottom: 44px; }
.foot-brand img { height: 34px; width: auto; }
.foot-brand p { margin-top: 16px; color: rgba(251,243,226,.6); font-size: .92rem; max-width: 30ch; }
.foot-soc { display: flex; gap: 10px; margin-top: 20px; }
.foot-soc a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(251,243,226,.3);
  display: grid; place-items: center;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-spring);
}
.foot-soc a:hover { background: var(--sun); color: var(--ink); border-color: var(--sun); transform: translateY(-3px); }
.foot-nav, .foot-contact { display: flex; flex-direction: column; gap: 8px; }
.foot-nav strong, .foot-contact strong {
  font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 6px;
}
.foot-nav a { color: rgba(251,243,226,.85); font-size: .95rem; padding: 3px 0; width: fit-content; }
.foot-nav a:hover { color: var(--sun); }
.foot-contact p { color: rgba(251,243,226,.7); font-size: .92rem; }
.foot-mini { font-size: .76rem !important; color: rgba(251,243,226,.4) !important; }
.foot-mini a { text-decoration: underline; }
.foot-base { border-top: 1px solid rgba(251,243,226,.14); padding: 20px 0 max(22px, env(safe-area-inset-bottom)); }
.foot-base p { text-align: center; font-size: .8rem; color: rgba(251,243,226,.5); }
.sun-ic { color: var(--sun); }

/* WA mengambang */
.wa-fab {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: #1FAF57; color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(33,28,24,.85);
  display: grid; place-items: center;
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.wa-fab:hover { transform: translate(-2px, -2px) scale(1.04); box-shadow: 6px 7px 0 rgba(33,28,24,.85); }

/* ═══ REVEAL SAAT SCROLL ═════════════════════════════════ */
[data-r] { opacity: 0; translate: 0 28px; transition: opacity .75s ease var(--rd, 0s), translate .75s var(--ease-spring) var(--rd, 0s); }
[data-r].in { opacity: 1; translate: 0 0; }

/* ═══ DESKTOP ════════════════════════════════════════════ */
@media (min-width: 760px) {
  .brand img { height: 32px; }
  .nav { display: flex; gap: 26px; }
  .nav a { font-weight: 600; font-size: .92rem; color: rgba(251,243,226,.88); transition: color .2s; position: relative; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2.5px; background: var(--sun); transition: right .25s var(--ease-smooth); }
  .nav a:hover::after { right: 0; }
  .header.scrolled .nav a { color: var(--ink); }
  .header-cta { display: inline-flex; }
  .burger { display: none; }
  .mmenu { display: none; }

  .cta-btns { flex-direction: row; width: auto; }
  .cta-btns .btn { width: auto; }

  .vid-grid { grid-template-columns: repeat(2, 1fr); }
  .mer-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .mer h3 { font-size: 1rem; }
}

@media (min-width: 900px) {
  .hero { align-items: center; }
  .hero-pic-1 { right: 9vw; top: 17vh; width: 215px; }
  .hero-pic-2 { display: block; }
  .hero-video { object-position: 70% 25%; }

  .ev-rail {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-inline: 0; padding-inline: 0; overflow: visible;
  }
  .ev { flex: none; }
  .ev-hint { display: none; }

  .prog { grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
  .prog-flip .prog-pic { order: 2; }
  .prog-no { right: auto; left: 44%; top: 0; }
  .prog-flip .prog-no { left: auto; right: 44%; }

  .vid-grid { grid-template-columns: repeat(3, 1fr); }

  .ten-grid { grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 72px); align-items: start; }
  .ten-quotes { grid-template-columns: 1fr 1fr; }
  .ten-quotes blockquote:last-child { grid-column: span 2; }

  .cta-pic { position: absolute; right: 2vw; top: 50%; translate: 0 -52%; rotate: 5deg; margin: 0; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
}

@media (min-width: 1200px) {
  .hero-pic-1 { right: 12vw; }
  .hero-pic-2 { right: 24vw; }
}

/* ═══ KONSULTASI ONLINE — proses mengikuti scroll ════════
   .kanim (di-set JS bila gerak diizinkan) mengaktifkan mode
   sticky + scroll-driven; tanpa .kanim semuanya statis. */
.sec-konsul {
  background: var(--cream-2);
  background-image: radial-gradient(rgba(33,28,24,.05) 1.3px, transparent 1.4px);
  background-size: 24px 24px;
  border-top: 2px solid var(--ink);
  scroll-margin-top: 54px;
  overflow: visible;
}
.ktopics { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 4px; }
.ktopics li {
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  padding: .5em .95em; border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--paper); box-shadow: 2px 2px 0 var(--ink);
}
.ktopics li:nth-child(odd) { rotate: -.7deg; }
.ktopics li:nth-child(even) { rotate: .7deg; background: var(--sun-soft); }
.khint { margin-top: 16px; font-size: .86rem; font-style: italic; color: var(--muted); }

/* panggung sticky */
.ktrack { position: relative; margin-top: 8px; }
.kanim .ktrack { height: 330svh; }
.kstage { position: relative; padding: 10px 0; }
.kanim .kstage { position: sticky; top: 0; height: 100svh; padding: 0; overflow: hidden; }
.kgrid { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kanim .kgrid { height: 100%; justify-content: center; padding-top: 60px; }

/* ── ponsel ── */
.kphone { position: relative; order: 1; }
.kside { order: 2; width: 100%; max-width: 380px; }
.ksticker {
  position: absolute; z-index: 6; top: -12px; right: -10px; rotate: 7deg;
  background: var(--sun); border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 7px 11px; font-weight: 800; font-size: .66rem; letter-spacing: .03em;
}
.kscreen {
  position: relative; display: flex; flex-direction: column;
  height: clamp(360px, 53svh, 500px); aspect-ratio: 9 / 18.4;
  background: var(--cream);
  border: 8px solid var(--ink); border-radius: 34px;
  box-shadow: 9px 11px 0 rgba(33,28,24,.16);
  overflow: hidden;
}
.kscreen::before { /* pulau dinamis */
  content: ""; position: absolute; top: 7px; left: 50%; translate: -50% 0;
  width: 56px; height: 14px; border-radius: 999px; background: var(--ink); z-index: 5;
}
.kstat { display: flex; justify-content: space-between; align-items: center; padding: 8px 15px 3px; font-size: .58rem; font-weight: 800; }
.ksig { display: flex; align-items: flex-end; gap: 2px; }
.ksig i { width: 3px; background: var(--ink); border-radius: 1px; }
.ksig i:nth-child(1) { height: 4px; } .ksig i:nth-child(2) { height: 6px; } .ksig i:nth-child(3) { height: 8px; }
.ksig em { width: 16px; height: 8px; border: 1.5px solid var(--ink); border-radius: 3px; margin-left: 4px; position: relative; }
.ksig em::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: var(--teal); border-radius: 1px; }

.ktop {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px 9px; background: var(--sun);
  border-bottom: 2px solid var(--ink);
  position: relative; z-index: 4;
}
.kava { width: 33px; height: 33px; flex: none; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.kwho { min-width: 0; }
.kwho b { display: block; font-size: .73rem; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwho small { display: flex; align-items: center; gap: 4px; font-size: .6rem; font-weight: 700; color: rgba(33,28,24,.6); white-space: nowrap; }
.kwho small i { width: 6px; height: 6px; border-radius: 50%; background: #1FAF57; border: 1px solid var(--ink); }
.kact { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }

/* percakapan — selalu menempel di bawah seperti chat sungguhan */
.kchat {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6px 10px 8px;
  overflow: hidden;
  background-image: radial-gradient(rgba(33,28,24,.06) 1px, transparent 1.1px);
  background-size: 15px 15px;
}
.kmi { display: flex; min-height: 0; padding-top: 7px; }
.kme .kmi { justify-content: flex-end; }
.kmid .kmi { justify-content: center; }
/* keadaan animasi: pesan terlipat (0fr) lalu tumbuh saat .show */
.kanim .kmsg { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-smooth); }
.kanim .kmsg .kmi { overflow: hidden; opacity: 0; translate: 0 14px; transition: opacity .4s ease, translate .5s var(--ease-spring); }
.kanim .kmsg.show { grid-template-rows: 1fr; }
.kanim .kmsg.show .kmi { opacity: 1; translate: 0 0; }

.kb {
  position: relative; max-width: 84%;
  font-size: .73rem; line-height: 1.45; font-weight: 500;
  padding: 7px 10px 5px;
  border: 1.5px solid var(--ink); border-radius: 13px;
  background: var(--paper);
}
.kb time { display: block; text-align: right; font-size: .55rem; font-weight: 700; color: var(--muted); margin-top: 2px; }
.kb time b { color: var(--teal); letter-spacing: -.1em; }
.kme .kb { background: var(--sun-soft); border-bottom-right-radius: 4px; }
.kthem .kb { border-bottom-left-radius: 4px; }
.kday {
  font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(33,28,24,.09); padding: .4em 1em; border-radius: 999px; color: var(--ink-2);
}
.kb-typing { display: flex; gap: 4px; padding: 10px 12px; }
.kb-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(33,28,24,.45); animation: kdot 1s ease-in-out infinite; }
.kb-typing i:nth-child(2) { animation-delay: .15s; }
.kb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes kdot { 0%, 100% { translate: 0 0; opacity: .4; } 50% { translate: 0 -3px; opacity: 1; } }

.kcard b { display: block; font-size: .73rem; font-weight: 800; }
.kcard span { display: block; font-size: .63rem; color: var(--ink-2); margin-top: 1px; }
.kcard i { display: inline-block; font-style: normal; font-size: .58rem; font-weight: 800; color: var(--teal); border: 1.5px solid var(--teal); border-radius: 999px; padding: .3em .8em; margin-top: 6px; }

.kcall {
  display: flex; align-items: center; gap: 10px; width: 96%;
  padding: 9px 11px; background: var(--ink); color: var(--cream);
  border-radius: 14px; box-shadow: 3px 3px 0 rgba(33,28,24,.25);
}
.kring { position: relative; width: 33px; height: 33px; flex: none; }
.kring svg { width: 100%; height: 100%; border-radius: 50%; }
.kring::before, .kring::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid rgba(255,194,14,.8);
  animation: kring 1.8s ease-out infinite;
}
.kring::after { animation-delay: .9s; }
@keyframes kring { from { transform: scale(.82); opacity: 1; } to { transform: scale(1.55); opacity: 0; } }
.kcall-t { min-width: 0; }
.kcall-t b { display: block; font-size: .7rem; font-weight: 800; }
.kcall-t small { font-size: .6rem; color: rgba(251,243,226,.65); }

.kvoice { display: flex; align-items: center; gap: 8px; min-width: 64%; }
.kplay { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--sun); border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: .5rem; font-style: normal; padding-left: 2px; }
.kwave { display: flex; align-items: center; gap: 2.5px; flex: 1; height: 18px; }
.kwave i { width: 2.5px; border-radius: 2px; background: var(--ink-2); height: 30%; }
.kwave i:nth-child(odd) { height: 60%; }
.kwave i:nth-child(3n) { height: 90%; }
.kwave i:nth-child(4n) { height: 40%; }
.kmsg.show .kwave i { animation: kwv 1s ease-in-out infinite alternate; }
.kwave i:nth-child(2n) { animation-delay: .18s; }
.kwave i:nth-child(3n) { animation-delay: .32s; }
@keyframes kwv { from { transform: scaleY(.6); } to { transform: scaleY(1.25); } }
.kvoice small { font-size: .55rem; font-weight: 700; color: var(--muted); flex: none; }

.kdoc { display: flex; align-items: center; gap: 9px; }
.kdoc i { font-style: normal; font-size: 1rem; width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--sun); border: 1.5px solid var(--ink); border-radius: 9px; }
.kdoc b { display: block; font-size: .67rem; font-weight: 800; line-height: 1.25; }
.kdoc small { font-size: .57rem; color: var(--muted); font-weight: 600; }

.kstars { text-align: center; }
.kstars span { display: inline-block; font-size: 1.1rem; color: var(--sun); -webkit-text-stroke: .9px var(--ink); margin: 0 1px; }
.kanim .kstars span { scale: 0; transition: scale .45s var(--ease-spring); }
.kanim .kmsg.show .kstars span { scale: 1; }
.kstars span:nth-child(2) { transition-delay: .07s; }
.kstars span:nth-child(3) { transition-delay: .14s; }
.kstars span:nth-child(4) { transition-delay: .21s; }
.kstars span:nth-child(5) { transition-delay: .28s; }
.kstars small { display: block; font-size: .57rem; font-weight: 700; color: var(--muted); margin-top: 2px; }

.kfield { display: flex; align-items: center; gap: 8px; padding: 7px 9px 9px; background: var(--cream-2); border-top: 2px solid var(--ink); }
.kfield span { flex: 1; font-size: .67rem; color: var(--muted); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; padding: .55em 1em; }
.ksend { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--sun); border: 1.5px solid var(--ink); display: grid; place-items: center; color: var(--ink); }

/* ── langkah ── */
.kprog { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.kprog-t { font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.kprog-t b { color: var(--sun-deep); }
.kprog-t i { font-style: normal; color: var(--muted); }
.kbar { flex: 1; height: 9px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--paper); overflow: hidden; }
.kbar i { display: block; height: 100%; width: calc(var(--kp, 0) * 100%); background: var(--sun); }

.ksteps { position: relative; display: flex; flex-direction: column; gap: 14px; }
.krail { display: none; }
.kstep { display: grid; grid-template-columns: 40px 1fr; gap: 11px; align-items: start; }
.kno {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--sun);
  display: grid; place-items: center;
  font-weight: 800; font-size: .92rem;
  position: relative; z-index: 1;
  transition: background .3s, color .3s;
}
.kstep.done .kno { background: var(--sun); color: var(--ink); border: 1.5px solid var(--ink); }
.kstep.done .kno b { display: none; }
.kstep.done .kno::after { content: "✓"; }
.ktxt h3 { font-size: 1.18rem; line-height: 1.12; }
.ktxt p { font-size: .8rem; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.ktxt small { display: inline-block; font-size: .66rem; font-weight: 700; color: var(--muted); margin-top: 5px; }

/* mobile: hanya langkah aktif yang tampil (kartu bertukar) */
.kanim .ksteps { height: 118px; }
.kanim .kstep { position: absolute; inset: 0; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .4s ease, translate .45s var(--ease-spring); }
.kanim .kstep.on { opacity: 1; translate: 0 0; pointer-events: auto; }

.kmore { display: none; }
.kanim .kmore {
  display: block; position: absolute; left: 50%; bottom: 12px; translate: -50% 0;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); opacity: calc(1.05 - var(--kp, 0) * 1.45);
  animation: kmoreb 2s ease-in-out infinite;
}
@keyframes kmoreb { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: -5px; } }

/* ── harga + CTA ── */
.kfoot { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: clamp(28px, 5vw, 46px); text-align: center; }
.kprice {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 16px 16px 42px 16px; box-shadow: var(--shadow-pop);
  padding: 14px 24px;
}
.kprice strong { font-family: var(--f-disp); font-size: 2rem; font-weight: 650; letter-spacing: -.02em; line-height: 1; }
.kprice span { text-align: left; font-size: .73rem; font-weight: 600; color: var(--muted); line-height: 1.5; }
.kdisclaim { max-width: 54ch; font-size: .72rem; color: var(--muted); }

@media (max-height: 620px) {
  .kscreen { height: 46svh; min-height: 290px; }
  .kanim .kgrid { padding-top: 54px; gap: 10px; }
  .kanim .ksteps { height: 104px; }
}

@media (min-width: 900px) {
  .kanim .ktrack { height: 360vh; }
  .kgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(48px, 7vw, 110px); align-items: center; }
  .kanim .kgrid { padding-top: 76px; }
  .kphone { order: 2; margin-right: clamp(0px, 2vw, 28px); }
  .kside { order: 1; max-width: 540px; justify-self: end; width: 100%; }
  .kscreen { height: min(64vh, 560px); }
  .kprog { display: none; }

  /* daftar langkah penuh + rel kemajuan */
  .kanim .ksteps { height: auto; }
  .kanim .kstep { position: static; opacity: .42; translate: 0 0; pointer-events: auto; }
  .ksteps { gap: 10px; }
  .krail { display: block; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 2.5px; background: rgba(33,28,24,.15); border-radius: 2px; z-index: 0; }
  .krail i { display: block; width: 100%; height: 100%; background: var(--sun-deep); transform-origin: top; transform: scaleY(var(--kp, 0)); }
  .kstep { border: 1.5px solid transparent; border-radius: 16px 16px 38px 16px; padding: 13px 16px; transition: opacity .35s, transform .35s var(--ease-spring), background .3s, box-shadow .3s, border-color .3s; }
  .kanim .kstep.done { opacity: .62; }
  .kanim .kstep.on {
    opacity: 1; background: var(--paper);
    border-color: var(--ink); box-shadow: var(--shadow-pop);
    transform: translate(-2px, -2px);
  }
  .ktxt h3 { font-size: 1.32rem; }
  .ktxt p { max-width: 44ch; }

  .kfoot { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 22px 30px; text-align: left; }
  .kdisclaim { flex-basis: 100%; text-align: center; }
}

/* ═══ GERAK DIKURANGI ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; }
  [data-h], [data-r] { opacity: 1; translate: 0 0; transition: none; }
  .smiled svg path { stroke-dashoffset: 0 !important; animation: none; }
  .hero-pic, .pulse { animation: none; }
  .mq-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .hero-video { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}