/* PT Rasi Geo Raya v4 — one continuous scene, technical chrome, editorial type. Tokens, chrome, then one block per act. */
:root {
  --canvas: #070b12; --surface: #0d1420; --ink: #ece9dc; --ink-soft: #97a0ae;
  --accent: #e8a85c; --accent-ink: #120c05; --shadow-tint: 5 8 14;
  --font-display: 'Geist', system-ui, -apple-system, sans-serif; --font-text: 'Geist', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --garis: color-mix(in oklab, var(--ink) 9%, transparent); --garis-kuat: color-mix(in oklab, var(--ink) 16%, transparent);
  --nav-h: 64px; --radius: 12px; --rel: clamp(16px, 4vw, 64px);
}
html { background: var(--canvas); }
body { font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; }
h1 em, h2 em, h3 em, .kata em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent); }
h2 { font-size: var(--t-2xl); line-height: 1.04; }
h3 { font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.02em; }
.lede { color: var(--ink-soft); font-size: var(--t-lg); line-height: 1.5; max-width: 52ch; text-wrap: pretty; }
.label { color: color-mix(in oklab, var(--ink) 70%, var(--ink-soft)); font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.label .nomor { color: var(--accent); }
.nomor { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { position: relative; }
.rincian { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: 10px; color: color-mix(in oklab, var(--ink) 72%, var(--ink-soft)); font-size: var(--t-sm); font-family: var(--font-mono); letter-spacing: .02em; }
.rincian li { position: relative; padding-left: 18px; }
.rincian li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 1px; background: var(--accent); }

/* letters scatter as a beat leaves: each letter carries its own vector, driven by the cue variable */
[data-huruf] .h { display: inline-block; will-change: transform, opacity; transform: translate3d(calc(var(--dx) * (1 - var(--cue, 1)) * 1px), calc(var(--dy) * (1 - var(--cue, 1)) * 1px), 0) rotate(calc(var(--r) * (1 - var(--cue, 1)) * 1deg)); opacity: var(--cue, 1); }
[data-huruf] .w { display: inline-block; white-space: nowrap; }
.cine-reduced [data-huruf] .h { transform: none; }

/* ---------- technical chrome ---------- */
.grid-teknis { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.grid-teknis i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--garis); }
.grid-teknis i:nth-child(1) { left: var(--rel); } .grid-teknis i:nth-child(2) { left: calc(var(--rel) + (100% - 2 * var(--rel)) / 3); } .grid-teknis i:nth-child(3) { left: calc(var(--rel) + (100% - 2 * var(--rel)) * 2 / 3); } .grid-teknis i:nth-child(4) { right: var(--rel); }
.grid-teknis i::before, .grid-teknis i::after { content: ""; position: absolute; left: -6px; width: 13px; height: 1px; background: var(--garis-kuat); }
.grid-teknis i::before { top: 33.3vh; } .grid-teknis i::after { top: 66.6vh; }
@media (max-width: 860px) { .grid-teknis i:nth-child(2), .grid-teknis i:nth-child(3) { display: none; } }
.progres-tegak { position: fixed; right: 6px; top: 50%; height: 34vh; width: 2px; transform: translateY(-50%); background: var(--garis); z-index: 41; pointer-events: none; border-radius: 2px; }
.progres-tegak b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ink); transform-origin: top; transform: scaleY(var(--scroll, 0)); border-radius: 2px; }
.muat { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--canvas); color: var(--accent); transition: opacity .6s var(--ease-out), visibility 0s linear .6s; }
.muat.selesai { opacity: 0; visibility: hidden; }
.muat-angka { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; color: var(--ink-soft); }
html:not(.cine-js) .muat { display: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 4px; font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; transition: transform .25s var(--ease-out), background-color .2s, border-color .2s, color .2s; will-change: transform; font-family: var(--font-mono); }
.btn--primer { background: var(--ink); color: var(--canvas); }
.btn--primer:hover { background: var(--accent); color: var(--accent-ink); }
.btn--halus { color: var(--ink); border-color: var(--garis-kuat); background: color-mix(in oklab, var(--canvas) 35%, transparent); backdrop-filter: blur(8px); }
.btn--halus:hover { border-color: color-mix(in oklab, var(--ink) 40%, transparent); }
.btn--kecil { min-height: 38px; padding: 0 14px; font-size: 12px; }
.btn:active { transform: scale(.98); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--rel); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.nav.is-scrolled { border-color: var(--garis); background: color-mix(in oklab, var(--canvas) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 500; letter-spacing: -0.01em; font-size: 15px; min-height: 44px; }
.brand-mark { color: var(--accent); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--garis-kuat); border-radius: 3px; background: color-mix(in oklab, var(--canvas) 62%, transparent); backdrop-filter: blur(8px); transition: color .2s, border-color .2s; }
.nav-links a:hover { color: var(--ink); border-color: var(--garis-kuat); }
@media (max-width: 860px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- the scene ---------- */
.adegan { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity .8s var(--ease-out); }
.adegan canvas, .adegan-poster img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.adegan canvas { opacity: 0; transition: opacity 1s var(--ease-out); }
.adegan.siap canvas { opacity: 1; }
/* the poster stays under the canvas: on a slow GPU a late frame shows the picture, never black */
.adegan.redup { opacity: 0; }
main, .kaki { position: relative; z-index: 2; } /* the nav keeps its own fixed stacking (z 40) above every act */

/* ---------- the film (hero act) ---------- */
.film .cine-stage { display: grid; }
.film-scrim { position: absolute; inset: 0; background: radial-gradient(70% 70% at 10% 90%, rgb(var(--shadow-tint) / .78), transparent 70%), linear-gradient(180deg, rgb(var(--shadow-tint) / .45), transparent 22%, transparent 55%, rgb(var(--shadow-tint) / .8)); pointer-events: none; }
.beat { position: absolute; z-index: 2; }
.beat--judul { left: var(--rel); right: var(--rel); bottom: 14vh; max-width: 760px; }
.beat .label { color: var(--ink); text-shadow: 0 1px 14px rgb(var(--shadow-tint) / .9); }
.film h1 { font-size: clamp(2.7rem, 6.2vw, 6rem); line-height: .98; letter-spacing: -0.04em; margin-top: var(--s-5); text-shadow: 0 2px 30px rgb(var(--shadow-tint) / .7); text-transform: uppercase; }
.film h1 em { text-transform: none; font-size: 1.04em; }
.beat--judul .lede { margin-top: var(--s-6); max-width: 46ch; color: color-mix(in oklab, var(--ink) 82%, var(--ink-soft)); }
.aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-7); }
.beat--awan { left: var(--rel); right: var(--rel); top: 50%; transform: translateY(-50%); text-align: center; }
.beat--awan h2 { font-size: clamp(2rem, 4.6vw, 4.4rem); max-width: 22ch; margin-inline: auto; text-transform: uppercase; letter-spacing: -0.03em; text-shadow: 0 2px 30px rgb(var(--shadow-tint) / .8); }
.beat--awan h2 em { text-transform: none; }
.beat--sapu { right: var(--rel); bottom: 16vh; width: min(100% - 2 * var(--rel), 30rem); text-align: right; }
.beat--sapu h2 { margin-top: var(--s-4); font-size: clamp(1.7rem, 3.2vw, 3rem); }
.beat--sapu p:not(.label) { margin-top: var(--s-4); color: var(--ink-soft); text-wrap: pretty; }
.beat--sapu .label { justify-content: flex-end; }
.beat--strip { left: 0; right: 0; bottom: 0; list-style: none; padding: 0 var(--rel); margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--garis-kuat); background: linear-gradient(180deg, transparent, rgb(var(--shadow-tint) / .7)); }
.beat--strip li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 22px var(--s-4) 30px; border-right: 1px solid var(--garis); }
.beat--strip li:last-child { border-right: 0; }
.beat--strip .nomor { grid-row: 1 / span 2; color: var(--accent); padding-top: 3px; }
.beat--strip b { font-weight: 500; font-size: var(--t-md); letter-spacing: -0.01em; }
.beat--strip span:not(.nomor) { color: var(--ink-soft); font-size: 12px; font-family: var(--font-mono); letter-spacing: .02em; margin-top: 4px; }
.petunjuk { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); z-index: 2; }
.petunjuk::after { content: ""; display: block; width: 1px; height: 28px; margin: 8px auto 0; background: linear-gradient(180deg, var(--accent), transparent); }
@media (max-width: 700px) {
  .film h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .beat--judul { bottom: 12vh; }
  .beat--awan h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .beat--sapu { left: var(--rel); width: auto; text-align: left; bottom: 12vh; } .beat--sapu .label { justify-content: flex-start; }
  .beat--strip { grid-template-columns: 1fr; } .beat--strip li { border-right: 0; border-top: 1px solid var(--garis); padding: 12px var(--s-2); } .beat--strip li:nth-child(n+2) { display: none; }
  .petunjuk { display: none; }
}

/* ---------- proses: four stages, giant word, exploded sensor ---------- */
.proses .cine-stage { background: var(--canvas); }
.proses-isi { height: 100%; display: grid; grid-template-columns: 26% 1fr 22%; grid-template-rows: 1fr auto; padding-top: calc(var(--nav-h) + 3vh); }
.proses-kiri { grid-column: 1; grid-row: 1; align-self: start; padding-top: 6vh; }
.proses-nav { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-6); display: flex; gap: 14px; }
.proses-nav li { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--ink-soft); padding-bottom: 6px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.proses-nav li.is-on { color: var(--ink); border-color: var(--accent); }
.proses-teks { position: relative; min-height: 9em; }
.proses-teks p { position: absolute; inset: 0 auto auto 0; max-width: 30ch; color: var(--ink-soft); font-size: var(--t-md); opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); text-wrap: pretty; }
.proses-teks p.is-on { opacity: 1; transform: none; }
.proses-gambar { grid-column: 2; grid-row: 1 / span 2; position: relative; align-self: stretch; }
.proses-gambar img { position: absolute; left: 50%; top: 46%; width: min(100%, 72vh); height: auto; transform: translate(-50%, -50%) scale(1.02); opacity: 0; transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); }
.proses-gambar img.is-on { opacity: 1; transform: translate(-50%, calc(-50% + (0.5 - var(--lokal, 0.5)) * 70px)) scale(calc(1.04 - var(--lokal, 0.5) * 0.06)); }
.proses-teks p.is-on { transform: translate3d(0, calc((0.5 - var(--lokal, 0.5)) * 18px), 0); }
.proses-kanan { grid-column: 3; grid-row: 1; justify-content: flex-end; align-self: start; padding-top: 6vh; }
.proses-kata { grid-column: 1 / -1; grid-row: 2; position: relative; height: clamp(5rem, 14vw, 13rem); display: block; text-align: right; }
.proses-kata > span { position: absolute; right: 0; bottom: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(3.6rem, 12vw, 11.5rem); line-height: .9; letter-spacing: -0.045em; text-transform: uppercase; color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .5s; }
.proses-kata > span.is-on { opacity: 1; translate: calc((var(--lokal, 0.5) - 0.5) * -60px) 0; }
.proses-kata [data-huruf] .h { transform: translate3d(calc(var(--dx) * var(--sebar, 0) * 1px), calc(var(--dy) * var(--sebar, 0) * 1px), 0); opacity: calc(1 - var(--sebar, 0)); }
@media (max-width: 860px) {
  .proses-isi { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding-top: calc(var(--nav-h) + 2vh); }
  .proses-kiri { grid-column: 1; grid-row: 1; padding-top: 0; } .proses-teks { min-height: 8em; } .proses-teks p { max-width: none; font-size: var(--t-sm); }
  .proses-gambar { grid-column: 1; grid-row: 2; } .proses-gambar img { width: min(100%, 48vh); top: 50%; }
  .proses-kanan { display: none; }
  .proses-kata { grid-row: 3; height: clamp(3.2rem, 14vw, 5rem); padding-bottom: 3vh; } .proses-kata > span { font-size: clamp(2.4rem, 12vw, 4.4rem); } .proses-kata > span.is-on { translate: 0 0; } /* no sideways drift on phones: the word already spans the width */
}

/* ---------- kemampuan: horizontal gallery ---------- */
.kemampuan .cine-stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; background: var(--surface); }
.kemampuan .cine-stage > * { grid-area: auto; }
.kemampuan-kepala { grid-row: 1; padding-top: calc(var(--nav-h) + 4vh); }
.kemampuan-kepala h2 { margin-top: var(--s-4); }
.progres-datar { position: relative; height: 1px; background: var(--garis-kuat); margin-top: var(--s-6); }
.progres-datar b { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--pd, 0)); }
html:not(.cine-js) .progres-datar b { transform: none; }
.galeri { grid-row: 2; min-width: 0; width: 100%; list-style: none; padding: 0 var(--rel); margin: 0; display: flex; gap: clamp(16px, 2.4vw, 36px); align-self: center; will-change: transform; }
.kartu { flex: 0 0 min(64vw, 520px); }
.bingkai { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--garis-kuat); background: var(--canvas); isolation: isolate; aspect-ratio: 4 / 3; }
.bingkai::before, .bingkai::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--accent); z-index: 2; pointer-events: none; opacity: .9; }
.bingkai::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; } .bingkai::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.bingkai img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .kartu:hover .bingkai img { transform: scale(1.04); } }
.kartu h3 { margin-top: var(--s-4); font-size: var(--t-lg); }
.kartu p:not(.label) { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--t-sm); max-width: 40ch; text-wrap: pretty; }
.kartu--spek { flex-basis: min(80vw, 560px); padding: 20px; border: 1px solid var(--garis-kuat); border-radius: var(--radius); background: color-mix(in oklab, var(--canvas) 70%, transparent); align-self: stretch; }
.spek { margin: var(--s-4) 0 0; display: grid; }
.spek div { display: grid; grid-template-columns: 10ch 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--garis); font-size: 13px; }
.spek dt { color: var(--accent); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; padding-top: 2px; }
.spek dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 860px) {
  .kemampuan { height: auto !important; } .kemampuan .cine-stage { position: static; height: auto; display: block; overflow: visible; padding-bottom: var(--section); }
  .kemampuan-kepala { padding-top: var(--section); } .progres-datar { display: none; }
  .galeri { flex-direction: column; gap: var(--s-8); transform: none !important; margin-top: var(--s-8); } .kartu, .kartu--spek { flex-basis: auto; }
}

/* ---------- prinsip: three nodes joined on the grid ---------- */
.prinsip { padding: var(--section) 0; }
.kepala { display: grid; gap: var(--s-4); margin-bottom: clamp(40px, 6vw, 80px); padding-bottom: var(--s-6); border-bottom: 1px solid var(--garis-kuat); max-width: 40ch; }
.simpul { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-6); min-height: 420px; }
.simpul-garis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.simpul-garis path { fill: none; stroke: var(--garis-kuat); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .3s; }
.simpul.is-in .simpul-garis path, html:not(.cine-js) .simpul-garis path { stroke-dashoffset: 0; }
.node { position: relative; padding: 22px 22px 24px; border: 1px solid var(--garis-kuat); border-radius: var(--radius); background: color-mix(in oklab, var(--surface) 85%, transparent); backdrop-filter: blur(10px); align-self: start; }
.node::before { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 16%, transparent); }
.node--b { margin-top: 160px; }
.node h3 { margin-top: var(--s-3); font-size: var(--t-xl); }
.node p { margin-top: var(--s-3); color: var(--ink-soft); font-size: var(--t-sm); text-wrap: pretty; }
@media (max-width: 860px) { .simpul { grid-template-columns: 1fr; min-height: 0; } .simpul-garis { display: none; } .node--b { margin-top: 0; } }

/* ---------- penutup: matte with depth layers ---------- */
.penutup { position: relative; min-height: 92vh; display: grid; align-items: center; overflow: clip; border-top: 1px solid var(--garis); }
.penutup-latar { position: absolute; inset: -8% 0; z-index: 0; }
.penutup-latar .lapis { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.penutup-latar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--canvas) 0%, rgb(var(--shadow-tint) / .35) 30%, rgb(var(--shadow-tint) / .45) 70%, var(--canvas) 100%); }
.penutup-isi { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: var(--s-5); padding: var(--section) 0; }
.penutup h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); max-width: 14ch; text-shadow: 0 2px 30px rgb(var(--shadow-tint) / .8); }

/* ---------- kontak ---------- */
.kontak { padding: var(--section) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; }
.kontak-teks h2 { margin-top: var(--s-4); max-width: 14ch; }
.form { display: grid; gap: var(--s-5); padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); background: color-mix(in oklab, var(--surface) 82%, transparent); border: 1px solid var(--garis-kuat); backdrop-filter: blur(14px); }
.form label { display: grid; gap: 8px; }
.form label > span { font-size: 13px; color: color-mix(in oklab, var(--ink) 72%, var(--ink-soft)); }
.form input, .form textarea { width: 100%; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--garis-kuat); padding: 10px 0 12px; font: inherit; font-size: 16px; border-radius: 0; transition: border-color .2s; }
.form input:focus-visible, .form textarea:focus-visible { outline: 0; border-bottom-color: var(--accent); }
.form textarea { resize: vertical; min-height: 120px; }
.form .web { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-kaki { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-2); }
.form-status { color: var(--ink-soft); font-size: var(--t-sm); min-height: 1.5em; }
.form-status.ok { color: var(--accent); } .form-status.salah { color: #f0a8a8; }
.form.terkirim label, .form.terkirim .form-kaki .btn { display: none; }
@media (max-width: 860px) { .kontak { grid-template-columns: 1fr; gap: var(--s-7); } }

/* ---------- footer ---------- */
.kaki { border-top: 1px solid var(--garis); padding: var(--s-7) 0 calc(var(--s-8) + env(safe-area-inset-bottom)); background: var(--canvas); overflow: clip; }
.kaki-besar { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.045em; font-size: clamp(3rem, 11.5vw, 11rem); line-height: .9; color: color-mix(in oklab, var(--ink) 10%, transparent); margin: 0 0 var(--s-7) -0.04em; white-space: nowrap; text-transform: uppercase; }
.kaki-baris { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6) var(--s-8); align-items: center; padding-top: var(--s-6); border-top: 1px solid var(--garis); }
.kaki-merek { display: flex; align-items: center; gap: 14px; color: var(--ink); } .kaki-merek svg { color: var(--accent); } .kaki-merek div { display: grid; } .kaki-merek span { color: var(--ink-soft); font-size: var(--t-sm); }
.kaki-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kaki-nav a { color: var(--ink-soft); text-decoration: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; }
.kaki-nav a:hover { color: var(--ink); }
.kaki-hak { grid-column: 1 / -1; color: var(--ink-soft); font-size: 13px; }
@media (max-width: 700px) { .kaki-baris { grid-template-columns: 1fr; } }

/* ---------- global ---------- */
.wrap { width: min(100% - 2 * var(--rel), 1400px); margin-inline: auto; }
.cine-js .kepala { border-bottom-color: transparent; position: relative; }
.cine-js .kepala::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--garis-kuat); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) .2s; }
.cine-js .kepala.is-in::after { transform: scaleX(1); }
.cine-stage { overflow: clip; }