/* =========================================================
   v21.css — V2.1: hero premium, mega menu beranimasi,
   CTA magnetik, scroll reveal, progress scroll
   Semua efek gerak dinonaktifkan oleh prefers-reduced-motion
   (aturan global di theme.css) dan hanya aktif di pointer halus.
   ========================================================= */

/* ---------- Progress scroll ---------- */
.scrollprog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.scrollprog i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); }

/* ---------- Hero premium ---------- */
.hero__media { will-change: transform; }
.hero__img { transform-origin: 62% 42%; animation: kenburns 28s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.11) translate(-1.2%, .8%); } }

.hero__overlay::after { inset: -28px; translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 10px); }
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(420px circle at var(--gx, 70%) var(--gy, 30%), rgba(108, 189, 68, .22), transparent 62%);
  mix-blend-mode: screen;
}
.hero:hover .hero__glow { opacity: 1; }
.fcards { translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -4px); }
.hero__eyebrow::before { transform-origin: left center; animation: draw .9s var(--ease) .35s both; }
@keyframes draw { from { transform: scaleX(0); } }
.hero__content { will-change: transform, opacity; }

/* ---------- Pemisah kata (judul hero, judul bagian) ---------- */
.reveal.is-split { animation: none; opacity: 1; }
.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.is-split .wi { display: inline-block; transform: translateY(112%); transition: transform .95s var(--ease); transition-delay: calc(var(--wi, 0) * 75ms + var(--wd, 0ms)); }
.is-split.is-in .wi { transform: none; }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .95s var(--ease); transition-delay: calc(var(--rv-i, 0) * 85ms); }
.rv[data-rv="scale"] { transform: scale(.955); }
.rv.is-in { opacity: 1; transform: none; }

/* ---------- Pill navigasi geser ---------- */
.nav__pill {
  position: absolute; left: 0; top: 50%; height: 38px; z-index: 0; width: 0; border-radius: 12px; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--nav-fg) 12%, transparent);
  transform: translate3d(var(--pl, 0px), -50%, 0);
  transition: transform .4s var(--ease), width .4s var(--ease), opacity .2s ease, background-color .3s;
}
.nav__pill.on { opacity: 1; }

/* ---------- Mega menu: masuk sesuai arah, takik, stagger, scrim ---------- */
.mega { transform: translate3d(var(--dx, 0px), 12px, 0); }
.mega::after {
  content: ""; position: absolute; top: -7px; left: calc(var(--notch-x, 50%) - 7px); width: 13px; height: 13px;
  background: var(--surface); border: 1px solid var(--border); border-right: 0; border-bottom: 0; border-top-left-radius: 4px; transform: rotate(45deg);
}
.mega .mega__intro, .mega .mega__links li, .mega .pcards > li, .mega .mega__foot { opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .3s var(--ease); }
.mega.is-open .mega__intro, .mega.is-open .mega__links li, .mega.is-open .pcards > li, .mega.is-open .mega__foot {
  opacity: 1; transform: none;
  transition: opacity .5s ease calc(var(--s, 0) * 60ms + 90ms), transform .65s var(--ease) calc(var(--s, 0) * 60ms + 90ms);
}
.mega .mega__intro { --s: 0; }
.mega .mega__links li:nth-child(1), .mega .pcards > li:nth-child(1) { --s: 1; }
.mega .mega__links li:nth-child(2), .mega .pcards > li:nth-child(2) { --s: 2; }
.mega .mega__links li:nth-child(3), .mega .pcards > li:nth-child(3) { --s: 3; }
.mega .mega__links li:nth-child(4) { --s: 4; }
.mega .mega__foot { --s: 4; }

.mega-scrim { position: fixed; inset: 0; z-index: 99; background: rgba(10, 40, 15, .3); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
body.mega-open .mega-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

.pcard { background: radial-gradient(260px circle at var(--mx, -400px) var(--my, -400px), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--background); }
.pcard__icon { transition: transform .4s var(--ease); }
.pcard:hover .pcard__icon { transform: rotate(-7deg) scale(1.08); }
.mega__links a { transition: background-color .2s, border-color .2s, transform .3s var(--ease); }
.mega__links a:hover { transform: translateX(3px); }

/* ---------- CTA magnetik + kilau ---------- */
[data-magnetic] { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s var(--ease), background-color .25s, border-color .25s; }
[data-magnetic].is-mag { transition: transform .16s ease-out, box-shadow .25s var(--ease), background-color .25s, border-color .25s; }
.btn--accent[data-magnetic]:hover { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0); }
[data-magnetic] .btn__arrow { translate: calc(var(--mx, 0px) * .45) calc(var(--my, 0px) * .3); }

.btn--accent { position: relative; overflow: hidden; isolation: isolate; }
.btn--accent::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .8s var(--ease);
}
.btn--accent:not(:disabled):hover::after { transform: translateX(130%); }

@media (prefers-reduced-motion: reduce) {
  .hero__img { animation: none; }
  .rv { opacity: 1; transform: none; }
}