/* ============================================================
   NoctPad — landing gotik futuristik (merah darah + hitam)
   Susunan mengikuti referensi: nav pil, judul raksasa di atas kepala,
   tombol bulat di tengah, kisi garis putus-putus, kartu bernomor.
   Komentar Indonesia, teks situs Inggris.
   ============================================================ */

:root {
  --side: clamp(16px, 3.2vw, 44px);       /* jarak tepi kiri/kanan */
  --col: calc((min(100vw, var(--max)) - var(--side) * 2) / 4); /* lebar 1 kolom kisi */
  --red: #ff3b3b;
  --red-deep: #8a0c14;
  --glass: rgba(20, 4, 6, 0.42);
  --glass-line: rgba(255, 255, 255, 0.32);
}
body.page-landing { background: var(--bg); }
.page-landing main, .page-landing section, .page-landing footer, .page-landing header { position: relative; }

/* ---------- garis kisi putus-putus di 25% dan 75% ---------- */
.guides { position: fixed; inset: 0; z-index: 3; pointer-events: none; max-width: var(--max); margin: 0 auto; padding: 0 var(--side); }
.guides i { position: absolute; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(255, 235, 235, 0.22) 0 4px, transparent 4px 9px); }
.guides i:nth-child(1) { left: calc(var(--side) + var(--col)); }
.guides i:nth-child(2) { right: calc(var(--side) + var(--col)); }

.eyebrow { margin: 0 0 18px; font: 500 12px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--red); box-shadow: 0 0 8px var(--red); }

/* judul dua baris: baris pertama tipis, baris kedua tebal kapital (gaya "WE'RE NOT JUST / A MODELING AGENCY") */
.h-split { margin: 0; font: 600 clamp(36px, 4.8vw, 68px)/0.98 var(--display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.h-split span { display: block; font-weight: 200; }

/* ---------- tombol pil ---------- */
.pill-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 22px;
  border-radius: 999px; text-decoration: none; white-space: nowrap; cursor: pointer;
  font: 600 13px/1 var(--ui); letter-spacing: 0.02em; color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.pill-btn:not(:has(.pb-ico)) { padding: 0 22px; }
.pill-btn.solid { background: #f4ecec; color: #1a0507; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }
.pill-btn.solid:hover { background: #fff; box-shadow: 0 0 0 1px #fff, 0 0 30px rgba(255, 59, 59, 0.45); }
.pill-btn.ghost { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--glass-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pill-btn.ghost:hover { background: rgba(255, 255, 255, 0.14); }
.pill-btn:active { transform: translateY(1px); }
.pill-btn.sm { height: 36px; font-size: 12px; }
.pill-btn .pb-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1a0507; color: #fff; transition: transform 0.3s var(--ease), background 0.3s; }
.pill-btn .pb-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill-btn:hover .pb-ico { transform: rotate(45deg); background: var(--red); }
.pill-btn.is-soon, .pill-btn[aria-disabled="true"] { cursor: not-allowed; color: #cdb5b5; background: rgba(40, 10, 12, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); display: inline-block; animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: 0.35; } }

/* ============================================================
   NAV (bentuk lengkung ada di fx.css; di sini hanya tombol kanan & menu HP)
   ============================================================ */
.nav { position: fixed; z-index: 50; inset: 0 0 auto 0; height: 0; pointer-events: none; }
.nav-right { position: fixed; top: 18px; right: var(--side); display: flex; gap: 8px; pointer-events: auto; }
.nav-menu { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: max(720px, 100svh); overflow: hidden; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -3; transform: scale(1.04); animation: heroIn 2.4s var(--ease) both; transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* ---------- visor menyala (lapisan SVG yang menempel tepat di garis merah gambar) ---------- */
.visor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; overflow: visible; }
.v-line { fill: none; stroke: #ff4636; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: vDraw 1.5s cubic-bezier(0.6, 0, 0.2, 1) 1.2s forwards, vBreath 3.8s ease-in-out 2.7s infinite; }
@keyframes vDraw { to { stroke-dashoffset: 0; } }
@keyframes vBreath { 0%, 100% { opacity: 0.5; stroke-width: 4; } 50% { opacity: 1; stroke-width: 7; } }
.v-pulse { fill: none; stroke: #fff1ec; stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 0.09 1.3; stroke-dashoffset: 0.09; opacity: 0;
  animation: vPulse 4.6s cubic-bezier(0.5, 0, 0.25, 1) 3s infinite; }
@keyframes vPulse { 0% { stroke-dashoffset: 0.09; opacity: 0; } 5% { opacity: 1; } 52% { stroke-dashoffset: -1; opacity: 1; } 56%, 100% { stroke-dashoffset: -1; opacity: 0; } }
.v-fill { opacity: 0; animation: vFill 3.8s ease-in-out 2.7s infinite; }
@keyframes vFill { 50% { opacity: 1; } }
.v-apex { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: vApex 4.6s ease-out 3s infinite; }
@keyframes vApex { 0% { opacity: 0; transform: scale(0.4); } 4% { opacity: 1; transform: scale(1.6); } 16%, 100% { opacity: 0; transform: scale(0.6); } }
@keyframes heroIn { from { transform: scale(1.12); filter: brightness(0.4); } }
.hero-shade { position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to bottom, rgba(11, 3, 4, 0.45), transparent 22%, transparent 58%, rgba(11, 3, 4, 0.85) 86%, var(--bg)),
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(11, 3, 4, 0.65)); }
/* garis pindai tipis yang menyapu turun sesekali */
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 70, 70, 0.07) 48%, rgba(255, 120, 110, 0.14) 50%, rgba(255, 70, 70, 0.07) 52%, transparent);
  animation: scan 9s cubic-bezier(0.45, 0, 0.55, 1) infinite 2s; opacity: 0; }
@keyframes scan { 0% { transform: translateY(-200px); opacity: 0; } 10%, 75% { opacity: 1; } 100% { transform: translateY(110vh); opacity: 0; } }
/* bara merah melayang naik */
.embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 8px #ff3b3b, 0 0 16px rgba(255, 59, 59, 0.6); opacity: 0; animation: ember 11s linear infinite; }
.embers i:nth-child(1) { left: 8%; animation-delay: 0s; }
.embers i:nth-child(2) { left: 17%; animation-delay: 3.4s; animation-duration: 13s; }
.embers i:nth-child(3) { left: 29%; animation-delay: 6.1s; }
.embers i:nth-child(4) { left: 38%; animation-delay: 1.8s; animation-duration: 14s; width: 2px; height: 2px; }
.embers i:nth-child(5) { left: 47%; animation-delay: 8.2s; }
.embers i:nth-child(6) { left: 56%; animation-delay: 4.6s; animation-duration: 12s; }
.embers i:nth-child(7) { left: 64%; animation-delay: 0.9s; width: 2px; height: 2px; }
.embers i:nth-child(8) { left: 72%; animation-delay: 7s; animation-duration: 15s; }
.embers i:nth-child(9) { left: 81%; animation-delay: 2.7s; }
.embers i:nth-child(10) { left: 88%; animation-delay: 5.5s; animation-duration: 13s; }
.embers i:nth-child(11) { left: 93%; animation-delay: 9.3s; width: 2px; height: 2px; }
.embers i:nth-child(12) { left: 24%; animation-delay: 10s; animation-duration: 16s; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 0.9; } 60% { transform: translate(18px, -55vh); opacity: 0.6; } 100% { transform: translate(-10px, -100vh); opacity: 0; } }

.hero-in { position: relative; z-index: 4; max-width: var(--max); margin: 0 auto; padding: 0 var(--side); min-height: max(720px, 100svh); }

/* huruf awal besar ala referensi ("W here creativity ...") */
.cap { float: left; font: 600 2.1em/0.8 var(--display); margin: 0.06em 0.08em 0 0; color: #fff; }
.tagline { position: absolute; left: var(--side); top: max(22vh, 158px); width: calc(var(--col) - 60px); max-width: 230px; margin: 0; font: 600 13px/1.75 var(--ui); color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }

/* wordmark raksasa di atas kepala */
.wordmark { position: absolute; left: 50%; top: max(21vh, 150px); width: min(calc(var(--col) * 2 + 110px), 54vw); margin: 0; transform: translateX(-50%); line-height: 0; }
.wordmark svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(255, 70, 70, 0.25)); }
.wm { stroke: #fff; }
.wm .dot { fill: #fff; stroke: none; }
/* animasi menulis garis saat halaman dibuka */
.js .wordmark .wm path { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) forwards; }
.js .wordmark .wm g:nth-child(2) path { animation-delay: 0.08s; } .js .wordmark .wm g:nth-child(3) path { animation-delay: 0.16s; }
.js .wordmark .wm g:nth-child(4) path { animation-delay: 0.24s; } .js .wordmark .wm g:nth-child(5) path { animation-delay: 0.32s; }
.js .wordmark .wm g:nth-child(6) path { animation-delay: 0.4s; } .js .wordmark .wm g:nth-child(7) path { animation-delay: 0.48s; }
.js .wordmark .wm .dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dotIn 0.6s var(--ease) 1.3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dotIn { from { opacity: 0; transform: scale(0); fill: var(--red); } 60% { fill: var(--red); } to { opacity: 1; transform: scale(1); } }

/* tombol bulat tengah = segel sentinel */
.summon { position: absolute; left: 50%; top: max(63vh, 450px); width: 190px; margin-left: -95px; display: grid; justify-items: center; gap: 4px; text-decoration: none; color: #fff; transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sm-svg { width: 190px; height: 190px; overflow: visible; }
.sm-ticks circle { fill: none; stroke: rgba(255, 230, 225, 0.55); stroke-width: 7; }
.sm-ticks .maj { stroke: #ff4a3f; stroke-width: 12; }
.sm-ticks { transform-origin: 120px 120px; animation: spin 40s linear infinite; }
.sm-txt { transform-origin: 120px 120px; animation: spin 26s linear infinite reverse; }
.sm-txt text { font: 600 10.5px "Inter Tight", sans-serif; letter-spacing: 0.3em; fill: rgba(255, 235, 230, 0.8); }
.sm-rose { fill: none; stroke: rgba(255, 70, 60, 0.38); stroke-width: 0.8; transform-origin: 120px 120px; animation: spin 60s linear infinite; transition: stroke 0.4s; }
.sm-halo { fill: rgba(40, 6, 9, 0.55); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.sm-core { fill: url(#smCore); stroke: rgba(255, 90, 80, 0.55); stroke-width: 1.2; }
.sm-charge { fill: none; stroke: #ff3b3b; stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 120px 120px; filter: drop-shadow(0 0 6px #ff3b3b); transition: stroke-dashoffset 0.9s cubic-bezier(0.6, 0, 0.2, 1); }
.sm-crown { fill: #d9c9c9; opacity: 0.85; }
.sm-visor { fill: url(#smVisor); transform-origin: 120px 118px; animation: smBreath 3.2s ease-in-out infinite; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes smBreath { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.sm-label { padding: 7px 14px; border-radius: 999px; background: rgba(20, 4, 6, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 11px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.3s, color 0.3s; }
.summon:hover .sm-charge { stroke-dashoffset: 0; }
.summon:hover .sm-visor { transform: scale(1.12); animation-duration: 0.9s; }
.summon:hover .sm-rose { stroke: rgba(255, 90, 80, 0.8); }
.summon:hover .sm-label { background: #f4ecec; color: #1a0507; }

.socials { position: absolute; left: var(--side); top: max(66vh, 470px); margin: 60px 0 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 18px; }
.socials a { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; opacity: 0.85; transition: opacity 0.2s, color 0.2s; }
.socials a:hover { opacity: 1; color: var(--red); }
.socials svg { width: 15px; height: 15px; fill: currentColor; }
.soc-chain { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); color: var(--ink-2); }
.soc-chain b { font-weight: 500; color: #fff; }

/* kartu alamat kontrak = plakat relikui bersegel */
.relic { position: absolute; right: var(--side); top: max(34vh, 270px); width: min(300px, calc(var(--col) - 12px)); padding: 46px 18px 16px; text-align: center;
  border-radius: 150px 150px 18px 18px / 64px 64px 18px 18px;
  background: repeating-linear-gradient(to bottom, rgba(255, 90, 80, 0.5) 0 1px, transparent 1px 8px) 7px 70px / 5px calc(100% - 100px) no-repeat,
              linear-gradient(180deg, rgba(46, 8, 11, 0.86), rgba(10, 2, 3, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 120, 110, 0.35), 0 40px 70px -24px rgba(0, 0, 0, 0.85), 0 0 60px rgba(138, 12, 20, 0.25);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.relic::before { content: ""; position: absolute; inset: 6px; border-radius: 146px 146px 13px 13px / 60px 60px 13px 13px; box-shadow: inset 0 0 0 1px rgba(255, 90, 80, 0.22); pointer-events: none; }
.relic-seal { position: absolute; left: 50%; top: -38px; width: 76px; height: 76px; margin-left: -38px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 16px rgba(255, 59, 59, 0.45)); animation: sealFloat 5s ease-in-out infinite; }
@keyframes sealFloat { 50% { transform: translateY(-4px) rotate(-3deg); } }
.relic.live .relic-seal { opacity: 0.35; filter: grayscale(0.3) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7)); animation: none; transform: translateY(-6px) rotate(-18deg); }
.rc { position: absolute; width: 10px; height: 10px; border-color: rgba(255, 90, 80, 0.8); border-style: solid; border-width: 0; }
.rc.tl { left: 12px; top: 58px; border-left-width: 1px; border-top-width: 1px; }
.rc.tr { right: 12px; top: 58px; border-right-width: 1px; border-top-width: 1px; }
.rc.bl { left: 12px; bottom: 12px; border-left-width: 1px; border-bottom-width: 1px; }
.rc.br { right: 12px; bottom: 12px; border-right-width: 1px; border-bottom-width: 1px; }
.relic-top { display: grid; justify-items: center; gap: 8px; margin-bottom: 14px; }
.relic-tick { font: 700 20px/1 "Syncopate", var(--ui); letter-spacing: 0.04em; }
.relic-state { display: inline-flex; align-items: center; gap: 7px; font: 600 9.5px/1 var(--ui); letter-spacing: 0.3em; text-transform: uppercase; color: #ffb3aa; }
.relic-state::before, .relic-state::after { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, transparent, #ff3b3b); }
.relic-state::after { transform: scaleX(-1); }
.relic.live .relic-state { color: #7ff0b0; }
.relic-lbl { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* sandi brankas: 0x + 10 kotak berisi 4 karakter */
.ca-addr { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 4px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); font: 500 11px/1 var(--mono); color: #ffd9d4; text-align: center; }
.ca-addr b { grid-row: span 2; align-self: center; padding: 0 3px; font-weight: 500; color: #ff6a5a; }
.ca-addr span { padding: 6px 0; border-radius: 5px; background: rgba(255, 59, 59, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 90, 80, 0.16); }
.relic.live .ca-addr span { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #fff; }
.ca-copy { width: 24px; height: 24px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; }
.ca-copy svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.5; }
.ca-copy.done { background: rgba(90, 230, 150, 0.25); }
.ca-when { margin: 10px 0 0; font: 500 11.5px/1.3 var(--mono); color: #fff; }
.ca-hint { margin: 10px 0 12px; font: 500 10.5px/1.4 var(--ui); letter-spacing: 0.04em; color: var(--muted); }
.relic-acts { display: grid; grid-template-columns: 1fr 42px; gap: 6px; }
.relic-buy { position: relative; overflow: hidden; display: grid; place-items: center; height: 42px; border-radius: 12px; background: linear-gradient(180deg, #ff4a3f, #b3141f); color: #fff; font: 700 12px/1 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 30px -10px rgba(255, 59, 59, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); cursor: pointer; }
.relic-buy::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: buyShine 3.4s ease-in-out infinite; }
@keyframes buyShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.relic-buy.is-soon { background: linear-gradient(180deg, #3a0d11, #220609); color: #d8b9b9; box-shadow: inset 0 0 0 1px rgba(255, 90, 80, 0.35); }
.relic-chart { display: grid; place-items: center; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.relic-chart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.relic-chart.is-soon { opacity: 0.5; }

.scroll-cue { position: absolute; right: var(--side); top: max(66vh, 470px); margin-top: 64px; display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--ui); color: #fff; text-decoration: none; }
.scroll-cue svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* ============================================================
   INTRO 3 KOLOM (menempel di bawah hero seperti referensi)
   ============================================================ */
.intro { z-index: 4; max-width: var(--max); margin: -120px auto 0; padding: 0 var(--side) clamp(90px, 12vw, 150px); display: grid; grid-template-columns: 1fr 2fr 1fr; }
.intro > * { padding: 0 clamp(14px, 2vw, 28px); }
.intro > :first-child { padding-left: 0; }
.intro > :last-child { padding-right: 0; }
.intro-q { margin: 0; font: 400 clamp(32px, 3.4vw, 50px)/1 var(--display); letter-spacing: -0.01em; }
.intro-p { margin: 0; font: 400 clamp(16px, 1.35vw, 19px)/1.7 var(--sans); color: #f1e4e4; max-width: 34em; }
.intro-p .cap { font-size: 3em; font-weight: 400; margin-top: 0.02em; }
.intro-cta h3 { margin: 0 0 18px; font: 300 clamp(24px, 2.2vw, 32px)/1.08 var(--display); }
.combo { display: inline-flex; align-items: center; }
.combo .pill-btn { background: #140405; color: #fff; box-shadow: 0 0 0 2px #fff; }
.combo .pill-btn:hover { background: var(--red); }
.combo-ico { width: 36px; height: 36px; margin-left: -4px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #140405; box-shadow: 0 0 0 2px #fff; }
.combo-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   HITUNG MUNDUR
   ============================================================ */
.cd { z-index: 4; max-width: 980px; margin: 0 auto clamp(80px, 10vw, 130px); padding: clamp(28px, 4vw, 48px) var(--side); text-align: center; border-radius: 28px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(138, 12, 20, 0.35), transparent 70%), rgba(20, 5, 6, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.cd-kicker { margin: 0; display: inline-flex; gap: 10px; align-items: center; font: 600 11px/1 var(--ui); letter-spacing: 0.22em; text-transform: uppercase; color: #ffb3aa; }
.cd-title { margin: 14px 0 22px; font: 300 clamp(28px, 3.4vw, 44px)/1 var(--display); }
.cd-clock { display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 2vw, 22px); }
.cd-clock div { display: grid; gap: 8px; min-width: clamp(58px, 9vw, 110px); }
.cd-clock b { font: 200 clamp(44px, 7vw, 96px)/1 var(--display); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 30px rgba(255, 59, 59, 0.5); }
.cd-clock i { font: 600 10px/1 var(--ui); font-style: normal; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.cd-clock > span { font: 200 clamp(36px, 5vw, 70px)/1 var(--display); color: var(--red); opacity: 0.7; }
.cd-meter { height: 2px; margin: 26px auto 14px; max-width: 420px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; overflow: hidden; }
.cd-meter i { display: block; height: 100%; width: 0; background: var(--red); box-shadow: 0 0 10px var(--red); transition: width 1s linear; }
.cd-when { margin: 0; font-size: 13px; color: var(--ink-2); }
.cd.done .cd-clock b { color: var(--red); }

/* ============================================================
   KARTU 01–03: tirai terbuka + judul naik per baris + parallax
   (pengganti kartu sticky bertumpuk yang dinilai user "ga enak")
   ============================================================ */
.stack { z-index: 4; max-width: 1180px; margin: 0 auto; padding: 0 var(--side) clamp(90px, 10vw, 140px); display: grid; gap: clamp(60px, 8vw, 110px); }
.slab { position: relative; display: grid; grid-template-columns: 1.08fr 1fr; min-height: min(600px, 76vh); border-radius: 6px; overflow: hidden;
  background: #1a1414; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.slab:nth-child(2) { grid-template-columns: 1fr 1.08fr; }
.slab:nth-child(2) .slab-art { order: -1; }
.slab:nth-child(2) .slab-art::after { background: linear-gradient(-90deg, rgba(26, 20, 20, 0.5), transparent 30%); }
.slab-copy { position: relative; padding: clamp(28px, 4.5vw, 64px) clamp(24px, 4vw, 56px) 96px; display: flex; flex-direction: column; }
.slab h2 { margin: 0; font: 500 clamp(34px, 4.4vw, 62px)/0.98 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.slab h2 .ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.slab h2 .ln i { display: block; font-style: normal; }
.slab h2 .ln:first-child i { font-weight: 200; }
.slab-body { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-top: 26px; }
.slab-body .rule { display: block; width: clamp(60px, 9vw, 120px); height: 2px; margin-top: 10px; background: var(--red); box-shadow: 0 0 10px rgba(255, 59, 59, 0.7); transform-origin: left; }
.slab-body p { margin: 0; max-width: 34ch; font: 400 14px/1.75 var(--sans); color: var(--ink-2); }
.slab-n { position: absolute; left: clamp(24px, 4vw, 56px); bottom: 32px; font: 600 20px/1 var(--ui); }
.slab-n::after { content: " / 03"; font-weight: 400; color: var(--muted); font-size: 13px; }
.slab-art { margin: 0; position: relative; min-height: 100%; background: #000; overflow: hidden; }
.slab-art .pz { position: absolute; left: 0; right: 0; top: -7%; bottom: -7%; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
.slab-art img { width: 100%; height: 100%; object-fit: cover; }
.slab-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26, 20, 20, 0.5), transparent 30%); pointer-events: none; }
/* garis pindai merah yang menyapu sekali saat tirai terbuka */
.slab-art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: #ff5a4a; box-shadow: 0 0 18px 4px rgba(255, 59, 59, 0.7); opacity: 0; pointer-events: none; }

/* keadaan awal (hanya kalau JS jalan) → .in saat kartu terlihat */
.js .slab-art { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s cubic-bezier(0.77, 0, 0.18, 1); }
.js .slab-art img { transform: scale(1.22); transition: transform 1.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .slab h2 .ln i { transform: translateY(110%); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .slab h2 .ln:nth-child(2) i { transition-delay: 0.12s; }
.js .slab-body .rule { transform: scaleX(0); transition: transform 0.9s var(--ease) 0.35s; }
.js .slab-body p, .js .slab .pg-in, .js .slab-n { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease 0.5s, transform 0.9s var(--ease) 0.5s; }
.js .slab-n { transition-delay: 0.7s; }
.js .slab.in .slab-art { clip-path: inset(0 0 0 0); }
.js .slab.in .slab-art img { transform: scale(1.04); }
.js .slab.in .slab-art::before { animation: sweepDown 1.25s cubic-bezier(0.77, 0, 0.18, 1) forwards; }
@keyframes sweepDown { 0% { top: 100%; opacity: 1; } 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }
.js .slab.in h2 .ln i { transform: none; }
.js .slab.in .slab-body .rule { transform: scaleX(1); }
.js .slab.in .slab-body p, .js .slab.in .pg-in, .js .slab.in .slab-n { opacity: 1; transform: none; }

/* kartu 03 = playground */
.pg-in { margin-top: 26px; }
.pg-in label { display: flex; justify-content: space-between; margin-bottom: 8px; font: 500 11px/1 var(--mono); color: var(--muted); }
.pg-in label span:first-child { color: #ff8a7a; }
.pg-in textarea { width: 100%; resize: vertical; min-height: 110px; padding: 14px 16px; border: 0; border-radius: 14px; background: rgba(0, 0, 0, 0.5); color: #fff; font: 400 15px/1.6 var(--sans); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); outline: none; transition: box-shadow 0.25s; }
.pg-in textarea:focus { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.7), 0 0 30px rgba(255, 59, 59, 0.15); }
.pg-ex { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pg-ex button { height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font: 500 12px/1 var(--ui); color: var(--ink-2); transition: background 0.2s, color 0.2s; }
.pg-ex button:hover { background: rgba(255, 59, 59, 0.16); color: #fff; }
.slab-play { min-height: 0; }
.pg-out { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 4vw, 52px);
  background: radial-gradient(80% 70% at 70% 20%, rgba(138, 12, 20, 0.55), transparent 70%), linear-gradient(180deg, #120304, #070102); }
.pg-out::after { display: none; }
.po-head { display: flex; justify-content: space-between; align-items: center; font: 600 11px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.po-rows { display: grid; gap: 8px; }
.po-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); font-size: 14px; }
.po-row span { color: var(--muted); font: 500 12px/1.4 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; }
.po-row b { font-weight: 500; text-align: right; }
.po-row em { font-style: normal; color: var(--faint); }
.po-row.ok { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.35); }
.po-coin { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 16px; border-radius: 16px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: box-shadow 0.3s; }
.po-coin.ready { box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.6), 0 0 40px rgba(255, 59, 59, 0.2); }
.po-coin b { display: block; font: 600 17px/1.2 var(--ui); }
.po-coin span { font: 400 12px/1.4 var(--mono); color: var(--muted); }
.po-cta { align-self: flex-start; }

/* ============================================================
   FILM "THE RITE" — bingkai sinematik 2.39:1 + segel putar + garis babak
   ============================================================ */
.film { z-index: 4; padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 8vw, 110px); }
.cine { position: relative; max-width: 1240px; margin: 0 auto; aspect-ratio: 1920 / 804; border-radius: 10px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 90, 80, 0.3), 0 50px 120px -40px rgba(0, 0, 0, 0.95), 0 0 120px -30px rgba(200, 20, 30, 0.5); }
@media (max-width: 1320px) { .cine { margin: 0 var(--side); } }
.cine video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc { position: absolute; z-index: 3; width: 22px; height: 22px; border: 0 solid rgba(255, 90, 80, 0.9); pointer-events: none; }
.cc.tl { left: 14px; top: 14px; border-left-width: 1.5px; border-top-width: 1.5px; } .cc.tr { right: 14px; top: 14px; border-right-width: 1.5px; border-top-width: 1.5px; }
.cc.bl { left: 14px; bottom: 14px; border-left-width: 1.5px; border-bottom-width: 1.5px; } .cc.br { right: 14px; bottom: 14px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.cine-hud { position: absolute; z-index: 3; left: 44px; bottom: 26px; display: flex; gap: 16px; align-items: center; font: 500 12px/1 var(--mono); color: rgba(255, 235, 230, 0.85); pointer-events: none; }
.cine-hud .rec { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 "Syncopate", var(--ui); letter-spacing: 0.2em; }
.cine-hud .rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: livePulse 1.4s ease-in-out infinite; }
.cine-play { position: absolute; z-index: 4; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity 0.4s, transform 0.4s var(--ease); }
.cine-play svg { width: 100%; height: 100%; overflow: visible; }
.cp-ticks { fill: none; stroke: rgba(255, 230, 225, 0.6); stroke-width: 7; transform-origin: 100px 100px; animation: spin 40s linear infinite; }
.cp-txt { transform-origin: 100px 100px; animation: spin 22s linear infinite reverse; }
.cp-txt text { font: 600 11px "Inter Tight", sans-serif; letter-spacing: 0.3em; fill: #fff; }
.cp-core { fill: rgba(20, 3, 5, 0.72); stroke: rgba(255, 90, 80, 0.8); stroke-width: 1.2; transition: fill 0.3s; }
.cp-tri { fill: #fff; transition: fill 0.3s; }
.cine-play:hover { transform: scale(1.06); }
.cine-play:hover .cp-core { fill: #ff3b3b; }
.cine.playing-sound .cine-play { opacity: 0; pointer-events: none; transform: scale(0.9); }
.cine-sound { position: absolute; z-index: 4; right: 40px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(20, 4, 6, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); color: #fff; font: 600 12px/1 var(--ui); cursor: pointer; }
.cine-sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cine-sound .wave { display: none; } .cine-sound[aria-pressed="true"] .wave { display: block; } .cine-sound[aria-pressed="true"] .mute { display: none; }
.cine-sound:hover { background: #ff3b3b; }
/* garis babak di bawah film */
.acts { position: relative; max-width: 1240px; margin: 26px auto 0; height: 64px; }
@media (max-width: 1320px) { .acts { margin: 26px var(--side) 0; } }
.acts-line { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
.acts-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; }
.acts button { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; transition: color 0.3s; }
.acts button::before { content: ""; width: 12px; height: 12px; transform: rotate(45deg); background: #0b0304; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); transition: background 0.3s, box-shadow 0.3s; }
.acts button b { font: 300 18px/1 var(--display); }
.acts button span { font: 600 10px/1 var(--ui); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.acts button:hover, .acts button.on { color: #fff; }
.acts button.on::before { background: #ff3b3b; box-shadow: 0 0 12px #ff3b3b; }
@media (max-width: 760px) {
  .acts button span { display: none; }
  .cine-play { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  .cine-hud { left: 20px; bottom: 14px; } .cine-sound { right: 16px; bottom: 10px; height: 30px; }
}

/* ============================================================
   BAGIAN UMUM
   ============================================================ */
.sec-top { max-width: var(--max); margin: 0 auto clamp(40px, 5vw, 64px); padding: 0 var(--side); }
.sec-top.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.sec-top.center { text-align: center; }
.sec-note { margin: 0; max-width: 34ch; color: var(--ink-2); font-size: 15px; }

/* ---------- empat ritus ---------- */
.rites { z-index: 4; padding: clamp(70px, 9vw, 120px) 0; }
.rite-list { list-style: none; margin: 0 auto; padding: 0 var(--side); max-width: var(--max); display: grid; grid-template-columns: repeat(4, 1fr); }
.rite { position: relative; padding: 26px clamp(16px, 2vw, 28px) 34px; border-top: 1px solid rgba(255, 255, 255, 0.14); transition: background 0.4s; }
.rite:hover { background: linear-gradient(180deg, rgba(138, 12, 20, 0.2), transparent); }
.rite::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--red); box-shadow: 0 0 10px var(--red); transition: width 0.6s var(--ease); }
.rite:hover::before { width: 100%; }
.rn { display: block; margin-bottom: 26px; font: 200 clamp(56px, 6vw, 88px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(255, 90, 80, 0.85); }
.rite { overflow: hidden; }
.rite-ic { position: absolute; right: clamp(8px, 1.5vw, 20px); top: 18px; width: clamp(78px, 7.5vw, 110px); height: auto; filter: drop-shadow(0 0 22px rgba(255, 59, 59, 0.28)); transition: transform 0.6s var(--ease), filter 0.4s; }
.rite:hover .rite-ic { transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 0 30px rgba(255, 59, 59, 0.55)); }
.rite h3 { margin-top: 6px; }
.rite h3 { margin: 0 0 10px; font: 600 19px/1.2 var(--ui); }
.rite p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }

/* ---------- galeri vonis ---------- */
.verdicts { z-index: 4; padding: clamp(60px, 8vw, 110px) 0; }
.vd-grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vd { position: relative; padding: 24px 22px 20px; border-radius: 18px; background: #140607; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 16px; transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.vd:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.4), 0 20px 50px -20px rgba(138, 12, 20, 0.6); }
.vd p { margin: 0; font: 400 16px/1.6 var(--sans); color: #f2e6e6; flex: 1; }
.vd footer { font: 500 12px/1.4 var(--mono); color: var(--muted); padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, 0.12); }
.vd-stamp { align-self: flex-start; font: 700 10.5px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; }
.vd.ok .vd-stamp { color: #7ff0b0; box-shadow: inset 0 0 0 1px rgba(90, 230, 150, 0.4); }
.vd.no .vd-stamp { color: #ff8a7a; box-shadow: inset 0 0 0 1px rgba(255, 59, 59, 0.45); }
.vd.hold .vd-stamp { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(240, 180, 90, 0.4); }
.vd.no p { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 59, 59, 0.5); }

/* ---------- sang pengawas (mata) ---------- */
.watcher { z-index: 4; padding: clamp(70px, 9vw, 130px) 0; overflow: hidden; }
.watcher::before { content: ""; position: absolute; left: 50%; top: 55%; width: 90vmin; height: 90vmin; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(138, 12, 20, 0.45), transparent); pointer-events: none; }
.wt-grid { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: 1fr minmax(300px, 1.3fr) 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; }
.wt-side { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3.5vw, 48px); }
.wt-side li { position: relative; }
.wt-side b { display: block; margin-bottom: 8px; font: 500 12px/1 var(--mono); color: var(--red); }
.wt-side h3 { margin: 0 0 6px; font: 600 18px/1.25 var(--ui); }
.wt-side p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.wt-side.right { text-align: left; }
.wt-side.left { text-align: right; }
/* garis penghubung ke mata */
.wt-side li::after { content: ""; position: absolute; top: 5px; width: clamp(10px, 2.4vw, 34px); height: 1px; background: linear-gradient(90deg, rgba(255, 59, 59, 0.9), transparent); }
.wt-side.left li::after { right: calc(-1 * clamp(14px, 2.8vw, 38px)); transform: scaleX(-1); }
.wt-side.right li::after { left: calc(-1 * clamp(14px, 2.8vw, 38px)); }

.eye-wrap { position: relative; aspect-ratio: 1; }
.eye-hud { position: absolute; inset: -7%; width: 114%; height: 114%; overflow: visible; pointer-events: none; }
.eye-hud circle, .eye-hud path { fill: none; }
.eh-ticks { stroke: rgba(255, 220, 215, 0.35); stroke-width: 6; transform-origin: 200px 200px; animation: spin 90s linear infinite; }
.eh-maj { stroke: #ff4a3f; stroke-width: 10; transform-origin: 200px 200px; animation: spin 90s linear infinite; }
.eh-arc { stroke: #ff3b3b; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff3b3b); transform-origin: 200px 200px; animation: spin 7s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
.eh-arc2 { stroke: rgba(255, 240, 235, 0.8); stroke-width: 2; stroke-linecap: round; transform-origin: 200px 200px; animation: spin 11s linear infinite reverse; }
.eh-cross { stroke: rgba(255, 90, 80, 0.8); stroke-width: 1.5; }
.eye { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.eye-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* rongga iris: iris bergerak sedikit mengikuti kursor */
.eye-socket { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: #050000; }
.eye-iris { position: absolute; inset: -4%; border-radius: 50%; background: url(/assets/eye.webp) center / 210.4% 210.4% no-repeat; transform: translate(var(--ex, 0px), var(--ey, 0px)) scale(var(--es, 1)); transition: transform 0.25s ease-out; filter: saturate(1.1); }
.eye-iris::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 60%, rgba(0, 0, 0, 0.55)); }
/* kelopak mesin yang berkedip */
.eye-lids { position: absolute; inset: 0; clip-path: ellipse(49% 31% at 50% 50%); pointer-events: none; z-index: 3; }
/* kelopak krom: panel logam gelap dengan garis tepi merah menyala */
.lid { position: absolute; left: 0; right: 0; height: 51%; transform: scaleY(0);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 38px), linear-gradient(to bottom, #050101, #241012 70%, #3a1518); }
.lid.top { top: 0; transform-origin: top; border-bottom: 3px solid #ff3b3b; box-shadow: 0 4px 22px rgba(255, 59, 59, 0.9); }
.lid.bot { bottom: 0; transform-origin: bottom; border-top: 3px solid #ff3b3b; box-shadow: 0 -4px 22px rgba(255, 59, 59, 0.9); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 38px), linear-gradient(to top, #050101, #241012 70%, #3a1518); }
/* kedip: turun cepat, tertutup rapat sebentar, naik pelan */
.eye.blink .lid { animation: blink 0.62s cubic-bezier(0.55, 0, 0.3, 1); }
.eye.blink2 .lid { animation: blink2 1.05s cubic-bezier(0.55, 0, 0.3, 1); }
@keyframes blink { 0% { transform: scaleY(0); } 26% { transform: scaleY(1); } 48% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes blink2 { 0% { transform: scaleY(0); } 15% { transform: scaleY(1); } 26% { transform: scaleY(1); } 42% { transform: scaleY(0.05); } 56% { transform: scaleY(1); } 68% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
/* mata meredup saat terpejam lalu iris menyala sesaat setelah terbuka */
.eye-base, .eye-socket { transition: filter 0.2s; }
.eye.blink .eye-base, .eye.blink2 .eye-base { animation: eyeDim 0.62s ease; }
.eye.blink .eye-iris, .eye.blink2 .eye-iris { animation: irisFlare 1.1s ease-out; }
.eye.blink .eye-socket, .eye.blink2 .eye-socket { animation: eyeDim 0.62s ease; }
@keyframes eyeDim { 20%, 50% { filter: brightness(0.35); } }
@keyframes irisFlare { 0%, 45% { filter: brightness(1) saturate(1.1); } 62% { filter: brightness(1.9) saturate(1.5) drop-shadow(0 0 30px #ff3b3b); } 100% { filter: brightness(1) saturate(1.1); } }
.eye-scan { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 80%, rgba(255, 59, 59, 0.18) 95%, transparent); animation: spin 7s linear infinite; mix-blend-mode: screen; }

/* ---------- fee ---------- */
.fees { z-index: 4; max-width: var(--max); margin: 0 auto; padding: clamp(70px, 9vw, 120px) var(--side); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.fee-orb { position: relative; aspect-ratio: 1; max-width: 480px; width: 100%; justify-self: center; display: grid; place-items: center; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px #ff4a3f, 0 0 30px rgba(255, 59, 59, 0.8), inset 0 0 30px rgba(255, 59, 59, 0.6);
  background: radial-gradient(circle at 50% 70%, #ffb057, #ff4a2a 30%, #b3141f 58%, #3a0508 78%, #120203); }
.orb-ring::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 90, 80, 0.35); animation: ripple 3.4s ease-out infinite; }
.orb-core { position: relative; text-align: center; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.orb-core b { display: block; font: 200 clamp(110px, 14vw, 200px)/0.85 var(--display); letter-spacing: -0.04em; }
.orb-core b i { font-style: normal; font-size: 0.4em; vertical-align: top; margin-left: 4px; }
.orb-core small { font: 600 12px/1 var(--ui); letter-spacing: 0.26em; text-transform: uppercase; }
.fee-lead { margin: 22px 0 28px; max-width: 46ch; color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.fee-list { margin: 0; display: grid; }
.fee-list div { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.fee-list div:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.fee-list dt { font: 600 15px/1.3 var(--ui); }
.fee-list dd { margin: 0; grid-column: 1; font-size: 13px; color: var(--muted); }
.fee-list b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 300 26px/1 var(--display); color: #ff8a7a; }

/* ---------- FAQ ---------- */
.faq { z-index: 4; max-width: var(--max); margin: 0 auto; padding: clamp(70px, 9vw, 120px) var(--side); display: grid; grid-template-columns: 1fr 2fr; gap: 30px clamp(24px, 4vw, 60px); }
.faq-list { display: grid; }
.faq details { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 500 clamp(16px, 1.4vw, 19px)/1.35 var(--ui); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  background: linear-gradient(#fff, #fff) center / 11px 1.5px no-repeat, linear-gradient(#fff, #fff) center / 1.5px 11px no-repeat; transition: transform 0.35s var(--ease), background-color 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--red); }
.faq details p { margin: 0 0 22px; max-width: 62ch; color: var(--ink-2); line-height: 1.75; }

/* ---------- penutup ---------- */
.finale { z-index: 4; min-height: min(86vh, 820px); display: flex; align-items: center; overflow: hidden; }
.finale-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; z-index: -1; }
.finale::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, var(--bg), transparent 20%, transparent 70%, var(--bg)), linear-gradient(90deg, transparent 35%, rgba(11, 3, 4, 0.55)); }
.finale-in { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; justify-items: end; text-align: right; }
.finale-in .h-split { font-size: clamp(44px, 6.4vw, 96px); }
.finale-in p { margin: 22px 0 28px; max-width: 38ch; color: #f1e4e4; font-size: 17px; }
.finale-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- bekerja dengan ---------- */
.works { z-index: 4; max-width: var(--max); margin: 0 auto; padding: 56px var(--side) 30px; text-align: center; }
.works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.works li { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1 var(--ui); color: var(--muted); transition: color 0.25s; }
.works li:hover { color: #fff; }
.works img { width: 22px; height: 22px; border-radius: 6px; filter: grayscale(1) brightness(1.3); opacity: 0.75; transition: filter 0.25s, opacity 0.25s; }
.works li:hover img { filter: none; opacity: 1; }

/* ---------- footer ---------- */
.foot { z-index: 4; max-width: var(--max); margin: 0 auto; padding: 40px var(--side) 30px; }
.foot-mark { padding: 30px 0 56px; }
.foot-mark svg { width: 100%; height: auto; overflow: visible; }
.foot-mark text { font: 700 128px/1 "Syncopate", "Inter Tight", sans-serif; }
.fm-fill { fill: url(#fmFill); opacity: 0; filter: drop-shadow(0 0 24px rgba(255, 59, 59, 0.55)); }
.fm-line { fill: none; stroke: #ff4a3f; stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(255, 59, 59, 0.9)); stroke-dasharray: 1500; stroke-dashoffset: 1500; }
.fm-sweep { fill: none; stroke: url(#fmSweep); stroke-width: 2.2; opacity: 0; }
/* satu putaran 9 detik, diulang terus; hanya berjalan saat footer terlihat (.run) */
.foot-mark .fm-line { animation: fmLine 9s cubic-bezier(0.65, 0, 0.35, 1) infinite paused; }
.foot-mark .fm-fill { animation: fmFill 9s ease-in-out infinite paused; }
.foot-mark .fm-sweep { animation: fmSweepOn 9s ease-in-out infinite paused; }
.foot-mark.run .fm-line, .foot-mark.run .fm-fill, .foot-mark.run .fm-sweep { animation-play-state: running; }
@keyframes fmLine { 0% { stroke-dashoffset: 1500; } 32% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1500; } }
@keyframes fmFill { 0%, 28% { opacity: 0; } 42% { opacity: 1; } 46% { opacity: 0.75; } 50%, 70% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes fmSweepOn { 0%, 40% { opacity: 0; } 48%, 72% { opacity: 1; } 80%, 100% { opacity: 0; } }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; padding: 34px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.foot-about p { margin: 16px 0 0; max-width: 40ch; color: var(--muted); font-size: 14px; }
.foot h4 { margin: 0 0 14px; font: 600 11px/1 var(--ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { color: var(--ink-2); text-decoration: none; font-size: 14px; cursor: pointer; }
.foot ul a:hover { color: #fff; }
.disclaimer { margin: 0; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; line-height: 1.7; color: var(--faint); }
.foot-row { display: flex; justify-content: space-between; gap: 20px; font: 500 12px/1 var(--mono); color: var(--faint); }

/* ============================================================
   LAYAR SEDANG & HP
   ============================================================ */
@media (max-width: 1100px) {
  .nav-buy { display: none; }
  .slab, .slab:nth-child(2) { grid-template-columns: 1fr 1fr; }
  .wt-grid { grid-template-columns: 1fr 1fr; }
  .eye-wrap { grid-column: 1 / -1; grid-row: 1; width: min(420px, 74vw); justify-self: center; margin: 30px 0; }
  .wt-side.left { text-align: left; }
  .wt-side li::after { display: none; }
}
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: 26px; margin-top: -60px; }
  .intro > * { padding: 0; }
  .rite-list { grid-template-columns: 1fr 1fr; }
  .vd-grid { grid-template-columns: 1fr 1fr; }
  .fees { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .guides i:nth-child(1) { left: 7px; }
  .guides i:nth-child(2) { right: 7px; }
  .nav-right .pill-btn.solid span { display: none; }
  .nav-right .pill-btn.solid { padding: 0 7px; }
  .hero, .hero-in { min-height: 0; }
  .hero-in { display: flex; flex-direction: column; align-items: center; padding-top: 108px; padding-bottom: 150px; }
  .hero-img img { object-position: 50% 12%; }
  .tagline, .wordmark, .summon, .socials, .relic, .scroll-cue { position: relative; left: auto; right: auto; top: auto; margin: 0; transform: none; }
  .tagline { order: 2; width: auto; max-width: 30ch; text-align: left; align-self: flex-start; margin-top: 26px; }
  .wordmark { order: 1; width: 100%; margin-top: 2vh; }
  .summon { order: 3; margin: 26vh 0 54px; }
  .sm-svg { width: 160px; height: 160px; }
  .relic { order: 4; width: 100%; max-width: 360px; }
  .socials { order: 5; margin-top: 22px; }
  .scroll-cue { display: none; }
  .intro { margin-top: -80px; }
  .slab, .slab:nth-child(2) { grid-template-columns: 1fr; min-height: 0; }
  .slab-art, .slab:nth-child(2) .slab-art { min-height: 380px; order: -1; }
  .slab-art::after { background: linear-gradient(to top, rgba(26, 20, 20, 0.7), transparent 40%); }
  .slab-play .slab-art { order: 1; min-height: 0; }
  .rite-list, .vd-grid { grid-template-columns: 1fr; }
  .wt-grid { grid-template-columns: 1fr; }
  .finale-in { justify-items: start; text-align: left; }
  .finale-btns { justify-content: flex-start; }
  .finale-img img { object-position: 22% 50%; }
  .foot-row { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art, .scanline, .embers i, .sm-ticks, .sm-txt, .sm-rose, .sm-visor, .relic-seal, .relic-buy::after, .eye-scan, .eye-hud *, .orb-ring::after, .live-dot, .scroll-cue svg, .v-pulse, .v-apex, .v-fill { animation: none !important; }
  .v-line { animation: none !important; stroke-dashoffset: 0; opacity: 0.8; }
  .js .wordmark .wm path { stroke-dashoffset: 0; animation: none; transition: none; }
  .foot-mark .fm-line, .foot-mark .fm-fill, .foot-mark .fm-sweep { animation: none !important; }
  .fm-line { stroke-dashoffset: 0; } .fm-fill { opacity: 1; }
  .js .wordmark .wm .dot { opacity: 1; animation: none; }
  .js .slab-art { clip-path: none; transition: none; }
  .js .slab-art img, .js .slab h2 .ln i, .js .slab-body .rule, .js .slab-body p, .js .slab .pg-in, .js .slab-n { transform: none; opacity: 1; transition: none; }
  .slab-art .pz { transform: none; }
}