/* =========================================================
   Portofolio Muhammad Aldaniar
   Palet & gaya mengikuti desain: merah, kuning, hitam,
   kartu tebal dengan bayangan keras warna marun.
   ========================================================= */
:root {
  --red: #f10000;
  --red-deep: #8f0000;
  --yellow: #ffca36;
  --maroon: #ad1b45;
  --orange: #f75216;
  --orange-deep: #d50b1c;
  --ink: #000;
  --display: "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow: .55rem .55rem 0 var(--maroon);
  --pad: clamp(16px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--red); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; height: 100vh; height: 100svh; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

.display { font-family: var(--display); font-weight: 400; line-height: .9; text-transform: uppercase; letter-spacing: .01em; }
.wrap { position: relative; z-index: 2; width: min(100% - 2 * var(--pad), 900px); margin-inline: auto; }
.px { will-change: translate; }

/* ---------- tombol & kartu ---------- */
.card {
  position: relative; background: var(--yellow);
  border: .22rem solid var(--maroon); box-shadow: var(--shadow);
}
.btn {
  font-family: var(--display); font-size: clamp(20px, 5vw, 28px); letter-spacing: .03em;
  padding: .55em 1.2em; border: .2rem solid var(--maroon);
  box-shadow: .4rem .4rem 0 var(--maroon);
  transition: transform .12s, box-shadow .12s;
}
.btn:active { transform: translate(.3rem, .3rem); box-shadow: .1rem .1rem 0 var(--maroon); }
.btn--yellow { background: var(--yellow); }
.btn--ghost { background: transparent; border-color: #000; box-shadow: .4rem .4rem 0 #000; }
.btn--ghost:active { box-shadow: .1rem .1rem 0 #000; }

/* ---------- tooltip kecil ---------- */
[data-tip], .tool, .tech { position: relative; }
[data-tip]::after, .tool::after, .tech::after {
  content: attr(data-tip); position: absolute; z-index: 20; pointer-events: none;
  background: #000; color: var(--yellow);
  font: 700 12px/1 var(--body); padding: 6px 8px; white-space: nowrap;
  opacity: 0; transition: opacity .15s, translate .15s;
}
.tool::after { content: attr(data-name); right: calc(100% + 12px); top: 50%; translate: 6px -50%; }
.tech::after { content: attr(data-name); bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; }
.hud [data-tip]::after { top: calc(100% + 8px); right: 0; translate: 0 -4px; }
.dots [data-tip]::after { right: calc(100% + 12px); top: 50%; translate: 4px -50%; }
.tool:hover::after, .tool:focus-visible::after, .tech:hover::after, .tech:focus-visible::after,
.hud [data-tip]:hover::after, .dots [data-tip]:hover::after { opacity: 1; translate: 0 0; }
.tool:hover::after, .tool:focus-visible::after { translate: 0 -50%; }
.tech:hover::after, .tech:focus-visible::after { translate: -50% 0; }
.dots [data-tip]:hover::after { translate: 0 -50%; }

/* =========================================================
   GATE
   ========================================================= */
.gate {
  position: fixed; inset: 0; z-index: 100; background: var(--red);
  display: grid; place-items: center; text-align: center; padding: var(--pad);
  transition: transform 1s cubic-bezier(.7, 0, .2, 1);
}
.gate.is-open { transform: translateY(-108%); }
.gate__web { position: absolute; top: 0; left: 0; width: min(76vw, 560px); pointer-events: none; }
.gate__inner { position: relative; display: grid; gap: clamp(16px, 3vw, 26px); justify-items: center; }
.gate__title { font-size: clamp(64px, 22vw, 220px); }
.gate__load { display: grid; gap: 8px; justify-items: center; width: min(78vw, 360px); }
.gate__bar { width: 100%; height: 22px; background: var(--yellow); border: .2rem solid var(--maroon); box-shadow: .35rem .35rem 0 var(--maroon); }
.gate__bar span { display: block; height: 100%; width: 100%; background: #000; transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.gate__load p { font-size: 28px; }
.gate__btns { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.gate__hint { font-size: 14px; font-weight: 500; max-width: 34ch; }
.gate__cloud {
  position: absolute; left: 0; right: 0; top: 100%; height: 75px; pointer-events: none;
  background: url(../assets/img/cloud.svg) repeat-x 0 0 / auto 75px; transform: scaleY(-1);
}

/* =========================================================
   HUD & NAV
   ========================================================= */
.hud { position: fixed; top: 12px; right: 12px; z-index: 60; display: flex; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .6s .9s; }
body.is-entered .hud { opacity: 1; pointer-events: auto; }
.hud__btn {
  position: relative; width: 50px; height: 50px; display: grid; place-items: center; overflow: visible;
  background: var(--yellow); border: .18rem solid var(--maroon); box-shadow: .3rem .3rem 0 var(--maroon);
  padding: 0; transition: transform .12s, box-shadow .12s;
}
.hud__btn:active { transform: translate(.2rem, .2rem); box-shadow: .1rem .1rem 0 var(--maroon); }
.hud__btn svg { width: 24px; height: 24px; fill: #000; }
.hud__vinyl { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); animation: spin 3s linear infinite; animation-play-state: paused; }
.hud__btn--music .hud__icon { position: absolute; width: 22px; height: 22px; padding: 3px; background: var(--yellow); border-radius: 50%; box-sizing: content-box; }
.ico-pause { display: none; }
body.is-music-on .ico-play { display: none; }
body.is-music-on .ico-pause { display: block; }
body.is-music-on .hud__vinyl { animation-play-state: running; }
.sfx-off { display: none; }
#hud-sfx[aria-pressed="false"] .sfx-wave { display: none; }
#hud-sfx[aria-pressed="false"] .sfx-off { display: block; }
#hud-sfx svg { fill: #000; }

.dots { position: fixed; z-index: 55; right: 14px; top: 50%; translate: 0 -50%; display: grid; gap: 14px; opacity: 0; transition: opacity .6s 1.1s; }
body.is-entered .dots { opacity: 1; }
.dots__a { position: relative; width: 12px; height: 12px; background: #000; border: 2px solid var(--yellow); box-shadow: 2px 2px 0 var(--maroon); transition: transform .2s, background .2s; }
.dots__a.is-active { background: var(--yellow); border-color: #000; transform: scale(1.35) rotate(45deg); }
.dots__a::before { content: ""; position: absolute; inset: -10px; }
@media (max-width: 720px) { .dots { display: none; } }

/* =========================================================
   Latar bersama: halftone & jaring pojok
   ========================================================= */
.halftone {
  position: absolute; inset: -30% 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 0, 0, .17) 0 2px, transparent 2.6px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 75%); mask-image: linear-gradient(180deg, #000 0, transparent 75%);
}
.corner-web { position: absolute; width: min(48vw, 420px); pointer-events: none; opacity: .4; z-index: 1; }
.corner-web--tr { top: 0; right: 0; transform: scaleX(-1); }
.corner-web--tl { top: 0; left: 0; }
.corner-web--bl { bottom: 0; left: 0; transform: scaleY(-1); opacity: .28; }

/* =========================================================
   Awan pemisah antar bagian (multi layer)
   ========================================================= */
.band { position: relative; height: 150px; margin: -75px 0; z-index: 5; pointer-events: none; overflow-x: clip; }
.band__layer { position: absolute; left: -12%; width: 124%; height: 75px; background-repeat: repeat-x; background-size: auto 75px; }
.band__layer--top { top: 0; background-image: url(../assets/img/cloud.svg); }
.band__layer--bot { bottom: 0; background-image: url(../assets/img/cloud.svg); transform: scaleY(-1); }
.band__layer--back-top { top: -22px; background-image: url(../assets/img/cloud-back.svg); background-position: 40px 0; }
.band__layer--back-bot { bottom: -22px; background-image: url(../assets/img/cloud-back.svg); background-position: 40px 0; transform: scaleY(-1); }

/* =========================================================
   1. HERO
   ========================================================= */
.hero { position: relative; height: max(100vh, 640px); height: max(100svh, 640px); overflow: hidden; background: var(--red); }

/* latar page 1: kota senja keliatan dari jendela */


.name {
  position: absolute; left: 0; right: 0; top: 11%; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--display); font-weight: 400; font-size: min(25vw, 33vh); font-size: min(25vw, 33svh);
  line-height: .86; text-align: center; pointer-events: none;
}
.name__line { display: block; white-space: nowrap; }
.ch {
  display: inline-block; opacity: 0; pointer-events: auto; cursor: default;
  transition: transform .3s cubic-bezier(.3, 1.7, .5, 1), color .2s, text-shadow .2s;
}
.ch:hover { transform: translateY(-5%) rotate(-4deg) scale(1.04); color: var(--yellow); text-shadow: .04em .04em 0 var(--maroon); }
body.is-entered .ch { animation: letter-in .9s cubic-bezier(.2, 1.1, .3, 1) both; animation-delay: calc(.7s + var(--i, 0) * 45ms); }
@keyframes letter-in { from { opacity: 0; translate: 0 -140%; rotate: -14deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

.hero__model { position: absolute; left: 0; right: 0; margin-inline: auto; top: 14%; width: min(94vw, 600px); height: 64%; z-index: 3; }
.hero__model-inner { position: absolute; inset: 0; transform-origin: 50% 90%; opacity: 0; scale: .85; cursor: pointer; }
body.is-entered .hero__model-inner { opacity: 1; scale: 1; transition: opacity .8s .9s, scale 1s .9s cubic-bezier(.2, 1.2, .3, 1); }
.hero__model-inner.is-jump { animation: jump .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes jump { 0% { transform: none; } 30% { transform: translateY(-7%) scale(.96, 1.05); } 60% { transform: translateY(0) scale(1.05, .94); } 100% { transform: none; } }
model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; outline: none; }
.mv-loader { position: absolute; left: 22%; right: 22%; top: 50%; height: 16px; background: var(--yellow); border: 3px solid #000; opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.mv-loader.hide { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.mv-loader__bar { display: block; height: 100%; background: #000; transform-origin: left; transform: scaleX(0); }
.mv-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; font-weight: 700; }
.mv-fallback img { width: min(80%, 380px); }
.hero__hint { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; opacity: 0; transition: opacity .6s 2.4s; }
body.is-entered .hero__hint { opacity: .75; }

/* laba-laba bergelantung */
.hang { --hang-w: min(76vw, 640px); --u: calc(var(--hang-w) / 736); --len: 40; position: absolute; top: 0; left: 0; width: var(--hang-w); z-index: 6; pointer-events: none; }
.hang__web { width: 100%; height: auto; }
.hang__swing { position: absolute; left: 0; top: calc(var(--u) * 468); width: 100%; transform-origin: calc(var(--u) * 90.5) 0; animation: sway 5.5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
.hang__thread { position: absolute; left: calc(var(--u) * 89); top: 0; width: max(1.6px, calc(var(--u) * 3.6)); height: calc(var(--u) * var(--len)); background: #0b0b0b; }
.hang__bug { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * var(--len)); width: calc(var(--u) * 179); padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; transition: rotate .3s; }
.hang__bug:hover { rotate: 6deg; }
.hang__bug img { width: 100%; height: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }

.roles {
  position: absolute; left: 0; right: 0; bottom: 96px; z-index: 4; padding-inline: 4vw;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .1em 1.1em;
  font-family: var(--display); font-size: clamp(22px, 5.4vw, 46px); line-height: 1.1;
}
.roles li { opacity: 0; translate: 0 40px; transition: opacity .7s, translate .7s cubic-bezier(.2, 1.2, .3, 1), background .2s, color .2s, box-shadow .2s; padding: 0 .25em; }
body.is-entered .roles li { opacity: 1; translate: 0 0; }
body.is-entered .roles li:nth-child(1) { transition-delay: 1.5s, 1.5s, 0s, 0s, 0s; }
body.is-entered .roles li:nth-child(2) { transition-delay: 1.65s, 1.65s, 0s, 0s, 0s; }
body.is-entered .roles li:nth-child(3) { transition-delay: 1.8s, 1.8s, 0s, 0s, 0s; }
.roles li:hover { background: var(--yellow); box-shadow: .12em .12em 0 var(--maroon); }

/* =========================================================
   2. ABOUT
   ========================================================= */
.about { position: relative; overflow: hidden; background: var(--red); padding: 110px 0 120px; }
.about__peek { position: relative; overflow: hidden; width: min(100%, 540px); margin-inline: auto; }
.about__peek img { width: 100%; }
.about__title { text-align: center; font-size: clamp(64px, 17vw, 150px); margin: clamp(8px, 2vw, 16px) 0 clamp(14px, 3vw, 26px); }

.reveal { opacity: 0; translate: 0 34px; rotate: -1.2deg; scale: .96; transition: opacity .5s var(--d, 0s), translate .7s cubic-bezier(.2, 1.3, .35, 1) var(--d, 0s), rotate .7s cubic-bezier(.2, 1.3, .35, 1) var(--d, 0s), scale .7s cubic-bezier(.2, 1.3, .35, 1) var(--d, 0s); }
.reveal.in { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }

.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 3.4vw, 26px); }
.bento__top { display: grid; grid-template-columns: minmax(0, 1fr) clamp(76px, 15vw, 132px); gap: inherit; }
.bento__bottom { display: grid; grid-template-columns: 4fr 6fr; gap: inherit; }
.bio { padding: clamp(16px, 4vw, 34px); display: flex; align-items: center; }
.bio p { font-size: clamp(15px, 1.4vw + 9px, 20px); line-height: 1.55; font-weight: 500; overflow-wrap: anywhere; }
.tools { padding: clamp(8px, 2vw, 14px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(6px, 1.4vw, 10px); }
.tool { display: block; aspect-ratio: 1; border-radius: 22%; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.tool img { width: 100%; height: 100%; object-fit: cover; border-radius: 22%; }
.tool:hover, .tool:focus-visible { transform: translateY(-4px) rotate(-7deg) scale(1.1); }

.stack { padding: clamp(10px, 2.4vw, 20px); display: flex; justify-content: space-between; align-items: center; gap: clamp(4px, 1.2vw, 12px); }
.tech { flex: 1 1 0; display: grid; place-items: center; min-width: 0; cursor: pointer; transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.tech img { width: min(100%, 64px); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .22)); }
.tech b { font: 700 clamp(8px, 2.2vw, 12px)/1 var(--body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech:hover, .tech:focus-visible { transform: translateY(-6px) rotate(-6deg) scale(1.12); }

.age { container-type: inline-size; display: grid; place-content: center; text-align: center; aspect-ratio: 1; cursor: pointer; }
.age__num { font-family: var(--display); font-size: 74cqw; line-height: .85; }
.age__label { font-size: 26cqw; }
.age:active .age__num { animation: wob .4s; }
@keyframes wob { 30% { transform: rotate(-6deg) scale(1.1); } 60% { transform: rotate(4deg) scale(.96); } }
.loc { container-type: inline-size; display: flex; align-items: center; padding: 6cqw; }
.loc p { font-size: 16.5cqw; line-height: 1.02; }

/* =========================================================
   3. MUSIC
   ========================================================= */
.music { position: relative; overflow: hidden; padding: 90px 0; background: #2b1709; }
.music__ambient { position: absolute; inset: -40px; background: url(../assets/img/tv.webp) center / cover; filter: blur(22px) brightness(.7) saturate(1.1); }
.vinyl-float { position: absolute; z-index: 1; width: clamp(120px, 15vw, 220px); opacity: .55; pointer-events: none; filter: blur(1.5px); animation: spin 14s linear infinite; }
.vinyl-float--l { left: 6%; top: 12%; }
.vinyl-float--r { right: 5%; bottom: 14%; width: clamp(160px, 20vw, 300px); opacity: .35; filter: blur(4px); animation-duration: 22s; animation-direction: reverse; }
@media (max-width: 900px) { .vinyl-float { display: none; } }
@keyframes spin { to { rotate: 360deg; } }

.stage {
  position: relative; z-index: 2; margin-inline: auto; aspect-ratio: 9 / 16; container-type: inline-size;
  width: min(100%, calc(105vh * .5625)); width: min(100%, calc(105svh * .5625));
}
.stage__tv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.screen { position: absolute; z-index: 1; left: 22.2%; top: 24.6%; width: 58.3%; height: 25%; background: #050505; overflow: hidden; transform-origin: 50% 50%; }
.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen__noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; transition: opacity .2s; }
.screen.is-static .screen__noise, .screen.is-flash .screen__noise { opacity: 1; }
.screen__label { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #fff; font-size: 7.5cqw; background: #000; padding: .25em .6em; letter-spacing: .06em; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.screen.is-static .screen__label, .screen.is-paused .screen__label { opacity: 1; }
.screen__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); mix-blend-mode: multiply; }
.screen.is-on { animation: crt-on .7s cubic-bezier(.2, .8, .3, 1); }
@keyframes crt-on { 0% { scale: 1 .005; filter: brightness(5); } 45% { scale: 1 .05; filter: brightness(3); } 100% { scale: 1 1; filter: none; } }
.tvhit { position: absolute; z-index: 4; left: 22.2%; top: 24.6%; width: 58.3%; height: 25%; background: none; border: 0; cursor: pointer; }

.record { position: absolute; z-index: 4; left: 4.3%; top: 5.6%; width: 31.5%; aspect-ratio: 1; }
.record img { position: absolute; inset: 0; width: 100%; height: 100%; }
.record__vinyl { translate: 38% 0; transition: translate .9s cubic-bezier(.3, 1.3, .5, 1); animation: spin 3s linear infinite; animation-play-state: paused; }
.record__album { box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, .5); object-fit: cover; }
body.is-music-on .record__vinyl { translate: 46% 0; animation-play-state: running; }
.track { position: absolute; z-index: 4; left: 53%; top: 7.6%; color: #fff; font-size: 9cqw; line-height: 1.08; display: flex; flex-direction: column; text-shadow: 0 .6cqw 2cqw rgba(0, 0, 0, .5); }
.track span:last-child { font-size: 7.6cqw; }

.player { position: absolute; z-index: 4; left: 8%; right: 8%; top: 63%; padding: 4cqw; }
.player__eq { display: block; width: 100%; height: 9cqw; margin-bottom: 3cqw; }
.player__row { display: flex; align-items: center; gap: 4cqw; }
.playbtn { flex: none; width: 15cqw; height: 15cqw; display: grid; place-items: center; background: #000; border: 0; padding: 0; box-shadow: 1cqw 1cqw 0 var(--maroon); transition: transform .12s, box-shadow .12s; }
.playbtn:active { transform: translate(.8cqw, .8cqw); box-shadow: .2cqw .2cqw 0 var(--maroon); }
.playbtn svg { width: 55%; height: 55%; fill: var(--yellow); }
.player__seek { flex: 1; min-width: 0; }
.player__time { display: flex; justify-content: space-between; margin-top: 1.4cqw; font-size: clamp(11px, 3.4cqw, 15px); font-weight: 700; }
#seek { -webkit-appearance: none; appearance: none; width: 100%; height: 5cqw; background: transparent; cursor: pointer; margin: 0; }
#seek::-webkit-slider-runnable-track { height: 1.8cqw; background: #000; }
#seek::-moz-range-track { height: 1.8cqw; background: #000; }
#seek::-webkit-slider-thumb { -webkit-appearance: none; width: 4.4cqw; height: 4.4cqw; margin-top: -1.3cqw; background: var(--yellow); border: .5cqw solid var(--maroon); border-radius: 0; }
#seek::-moz-range-thumb { width: 4.4cqw; height: 4.4cqw; background: var(--yellow); border: .5cqw solid var(--maroon); border-radius: 0; }

/* =========================================================
   4. PROJECTS
   ========================================================= */
.projects { position: relative; overflow: hidden; background: var(--red); padding: 110px 0 120px; }
.projects__title { text-align: center; font-size: clamp(48px, 12vw, 110px); }
.deck { margin-top: clamp(28px, 6vw, 56px); }
.deck__label { font-size: clamp(44px, 9vw, 84px); }
.deck__row { display: grid; grid-template-columns: minmax(54px, 1fr) minmax(0, 3.3fr) minmax(54px, 1fr); gap: clamp(10px, 3vw, 26px); align-items: center; margin-top: clamp(10px, 2vw, 18px); }
@media (min-width: 720px) { .deck__row { grid-template-columns: 1fr 1.8fr 1fr; } }
.arrow {
  aspect-ratio: 175 / 270; display: grid; place-items: center; padding: 0;
  background: var(--orange); border: .2rem solid var(--orange-deep); box-shadow: .55rem .55rem 0 var(--orange-deep);
  transition: transform .12s, box-shadow .12s;
}
.arrow svg { width: 62%; overflow: visible; }
.arrow svg polygon { fill: var(--yellow); }
.arrow svg .arrow__shadow { fill: var(--orange-deep); }
.arrow--next svg { transform: scaleX(-1); }
.arrow:active { transform: translate(.4rem, .4rem); box-shadow: .1rem .1rem 0 var(--orange-deep); }
.arrow:hover svg { animation: nudge .5s; }
@keyframes nudge { 40% { translate: -6px 0; } }
.arrow--next:hover svg { animation-name: nudge-r; }
@keyframes nudge-r { 40% { translate: 6px 0; } }

.deck__stage { position: relative; aspect-ratio: 4 / 5; touch-action: pan-y; container-type: inline-size; outline-offset: 8px; }
.slide { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--yellow); border: .22rem solid var(--maroon); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; }
.slide.is-active { display: flex; }
.slide--poster { padding: 2.5cqw; align-items: center; justify-content: center; }
.slide--poster img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.slide__tag { position: absolute; left: 3cqw; bottom: 3cqw; background: #000; color: var(--yellow); font-family: var(--display); font-size: 5cqw; padding: .3em .6em; letter-spacing: .04em; transition: translate .2s; }
.slide--poster:hover .slide__tag { translate: 0 -4px; }
.slide--poster:hover img { transform: scale(1.02) rotate(-.6deg); }
.slide--poster img { transition: transform .3s; }

.slide__chrome { flex: none; display: flex; align-items: center; gap: 1.6cqw; background: #000; color: var(--yellow); padding: 1.8cqw 2.6cqw; font: 700 3.3cqw/1 var(--body); white-space: nowrap; overflow: hidden; }
.slide__chrome i { flex: none; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--yellow); }
.slide__chrome i:nth-child(2) { background: var(--orange); }
.slide__chrome i:nth-child(3) { background: var(--maroon); }
.slide__chrome span { margin-left: 1.4cqw; overflow: hidden; text-overflow: ellipsis; }
.slide__cover { flex: 1 1 auto; min-height: 14cqw; display: grid; place-items: center; overflow: hidden; position: relative;
  background: var(--red) radial-gradient(circle, rgba(0, 0, 0, .28) 0 .5cqw, transparent .7cqw) 0 0 / 3cqw 3cqw; }
.slide__cover--b { background-color: var(--orange); }
.slide__cover--c { background-color: var(--maroon); }
.slide__cover b { font-family: var(--display); font-weight: 400; font-size: 26cqw; line-height: 1; color: var(--yellow); text-shadow: 1.6cqw 1.6cqw 0 #000; }
.slide__body { flex: none; padding: 3.4cqw 4cqw 4cqw; display: grid; gap: 2.2cqw; }
.slide__body h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 10.5cqw; line-height: .95; }
.slide__body p { font-size: clamp(11px, 3.7cqw, 17px); line-height: 1.35; font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.tags li { border: .5cqw solid #000; padding: .6cqw 2cqw; font: 700 clamp(10px, 3cqw, 14px)/1.2 var(--body); }
.cta { display: block; text-align: center; text-decoration: none; background: #000; color: var(--yellow); font-family: var(--display); font-size: clamp(14px, 5.4cqw, 22px); letter-spacing: .04em; padding: .5em; box-shadow: 1cqw 1cqw 0 var(--maroon); transition: transform .12s, box-shadow .12s; }
.cta:hover { transform: translate(-2px, -2px); box-shadow: 1.5cqw 1.5cqw 0 var(--maroon); }
.cta:active { transform: translate(1cqw, 1cqw); box-shadow: 0 0 0 var(--maroon); }

.deck__dots { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.deck__dot { width: 14px; height: 14px; padding: 0; background: transparent; border: 3px solid #000; transition: background .2s, transform .2s; }
.deck__dot[aria-current="true"] { background: #000; transform: rotate(45deg) scale(1.15); }

/* =========================================================
   5. CONTACT
   ========================================================= */
.contact { position: relative; overflow: hidden; background: var(--red); padding: 0; }
.fig { position: relative; z-index: 2; margin-inline: auto; aspect-ratio: 9 / 16; container-type: inline-size; width: min(100%, calc(min(100vh, 900px) * .5625)); width: min(100%, calc(min(100svh, 900px) * .5625)); }
.fig__swing { position: absolute; left: 0; width: 100%; top: -15.7%; height: 100%; z-index: 2; transform-origin: 50% 0; pointer-events: none; }
.fig__img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 0; animation: sway 7s ease-in-out infinite alternate; }
.fig__thanks { position: absolute; z-index: 1; left: 0; right: 0; top: 34.6%; text-align: center; color: var(--yellow); font-size: 10.6cqw; }
.fig__find { position: absolute; z-index: 3; left: 0; right: 0; bottom: 2.4%; text-align: center; }
.fig__find h3 { font-size: 8.8cqw; color: var(--yellow); margin-bottom: 2.4cqw; }
.socials { display: flex; justify-content: center; gap: 4.4cqw; }
.social { display: grid; place-items: center; width: 14.6cqw; height: 14.6cqw; background: var(--yellow); border: .7cqw solid var(--maroon); box-shadow: 1.6cqw 1.6cqw 0 var(--maroon); transition: transform .12s, box-shadow .12s; }
.social img { width: 62%; height: 62%; object-fit: contain; transition: transform .25s cubic-bezier(.3, 1.7, .5, 1); }
.social:hover img, .social:focus-visible img { transform: scale(1.14) rotate(-8deg); }
.social:active { transform: translate(1.2cqw, 1.2cqw); box-shadow: .3cqw .3cqw 0 var(--maroon); }
.foot { position: relative; z-index: 6; background: #000; color: var(--yellow); text-align: center; padding: 16px; font-size: 13px; font-weight: 500; }

/* =========================================================
   Efek kata komik (THWIP!) saat klik
   ========================================================= */
.burst {
  position: fixed; z-index: 90; translate: -50% -50%; rotate: var(--rot, 0deg); pointer-events: none;
  font-family: var(--display); font-size: clamp(38px, 9vw, 72px); color: var(--yellow);
  -webkit-text-stroke: .07em #000; paint-order: stroke fill; text-shadow: .06em .06em 0 var(--maroon);
  animation: burst .75s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
@keyframes burst { 0% { scale: .2; opacity: 0; } 25% { scale: 1.15; opacity: 1; } 75% { scale: 1; opacity: 1; } 100% { scale: 1.1; opacity: 0; translate: -50% -110%; } }

/* =========================================================
   Gerak dikurangi
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .ch, .roles li, .reveal, .hero__model-inner { opacity: 1 !important; translate: none !important; scale: 1 !important; rotate: none !important; }
  .hero__hint { opacity: .75; }
}
/* ================= DISABLE TEXT SELECT ================= */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Khusus input range & audio tetep bisa dioperasiin */
input[type="range"],
input[type="text"],
input[type="email"],
textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}