/* PT Rasi Geo Raya — public site theme. Light corporate blue from the logo (mark #0e63b4 / #003048, wordmark deep
   green #0b2a24, tan fold #b8906a). Display: Barlow Condensed (echoes the condensed wordmark). Text: Manrope. */
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url('/font/manrope-400.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url('/font/manrope-500.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url('/font/manrope-600.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url('/font/manrope-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url('/font/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('/font/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('/font/barlow-condensed-700.woff2') format('woff2'); }

:root {
  --canvas: #f3f8fc; --canvas-2: #e6f0f8; --surface: #ffffff; --isian: #f7fafc; --ink: #0b2a3a; --ink-soft: #3f5a6c; --judul: #003048; --label: #0b4f92; --bar: 243 248 252;
  --accent: #0e63b4; --accent-ink: #ffffff; --accent-2: #8a6a44; --navy: #003048; --hijau: #0b2a24; --bingkai: #dbe8f3;
  --line: rgb(11 42 58 / .12); --edge: rgb(255 255 255 / .7); --shadow-tint: 11 42 58;
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --font-text: 'Manrope', system-ui, sans-serif;
  --track-tight: -.01em; --radius: 6px; --measure: 64ch;
  --t-3xl: clamp(2.6rem, 6vw, 5.6rem); --t-4xl: clamp(3.2rem, 9vw, 8.5rem);
  --e1: 0 1px 2px rgb(var(--shadow-tint) / .08); --e2: 0 10px 30px -12px rgb(var(--shadow-tint) / .22); --e3: 0 30px 70px -20px rgb(var(--shadow-tint) / .32);
  color-scheme: light dark;
}
/* The site has one, light, appearance. Declaring dark support with the same tokens stops Samsung Internet and Chrome
   from forcing an inverted dark theme over it (the only way to opt out on those browsers). */
@media (prefers-color-scheme: dark) {
  :root { --canvas: #f3f8fc; --canvas-2: #e6f0f8; --surface: #ffffff; --isian: #f7fafc; --ink: #0b2a3a; --ink-soft: #3f5a6c; --judul: #003048; --label: #0b4f92; --bar: 243 248 252; --accent: #0e63b4; --accent-2: #8a6a44; --bingkai: #dbe8f3; --line: rgb(11 42 58 / .12); --edge: rgb(255 255 255 / .7); --shadow-tint: 11 42 58; }
}
html { scroll-padding-top: 90px; }
@media (max-width: 1060px) { html { scroll-padding-top: 70px; } }
body { background: var(--canvas); color: var(--ink); line-height: 1.7; }
h1, h2, h3, .display { font-weight: 700; letter-spacing: 0; line-height: .98; color: var(--judul); text-transform: none; }
h2 { font-size: clamp(2rem, 4.2vw, 3.9rem); }
h2.besar { font-size: clamp(2.2rem, 4.8vw, 4.4rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.05; }
p { color: var(--ink-soft); }
p + p { margin-top: 1em; }
.besar-teks { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.label { font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--label); margin-bottom: 14px; }
.soft { color: var(--ink-soft); }
a { color: var(--accent); }
::selection { background: var(--accent); color: #fff; }
.lompat { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff; padding: 8px 14px; z-index: 100; border-radius: 4px; }
.lompat:focus { left: 8px; }
.nomor { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--accent-2); letter-spacing: 0; display: block; margin-bottom: 6px; }
.cine-grain { opacity: calc(.025 + var(--vel) * .03); mix-blend-mode: multiply; }
.progres { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; pointer-events: none; }
.progres b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), #35a0ff); transform-origin: left; transform: scaleX(var(--scroll)); }

/* ---------- buttons, chips, frames ---------- */
.btn { padding: 15px 30px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: var(--e2); transition: transform .25s var(--ease-out), box-shadow .25s, background .25s; clip-path: none; position: relative; overflow: hidden; }
.btn--primer { background: linear-gradient(135deg, #1273cc, #0b4f92); }
.btn--kecil { padding: 11px 20px; font-size: .92rem; }
.btn--ghost { background: transparent; color: var(--judul); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost.btn--terang { color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); box-shadow: var(--e3); background: linear-gradient(135deg, #1a82df, #0d5aa6); } .btn--ghost:hover { background: rgb(14 99 180 / .08); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); } .btn--ghost.btn--terang:hover { background: rgb(255 255 255 / .12); color: #fff; } }
.chip { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); gap: 8px; }
.chip::before { content: none; } .chip::after { content: '→'; color: var(--accent); opacity: 1; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .chip:hover::after { transform: translateX(6px); } .chip:hover { text-shadow: none; } }
.bingkai { position: relative; overflow: hidden; border-radius: 14px; background: var(--bingkai); box-shadow: var(--e3); }
.bingkai img, .bingkai video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.bingkai figcaption { position: absolute; left: 16px; bottom: 12px; color: #fff; margin: 0; font-size: .75rem; text-shadow: 0 1px 8px rgb(0 0 0 / .5); }
@media (hover: hover) and (pointer: fine) { .bingkai:hover img { transform: scale(1.035); } }
/* the scan: a thin light beam sweeps across a frame the first time it enters, the radar signature carried into the page */
.scan::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgb(190 230 255 / .55) 50%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.is-in .scan::after, .is-on .scan::after { animation: sapu 1.4s var(--ease-out) .15s 1 both; }
@keyframes sapu { to { transform: translateX(120%); } }
.panel { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e2); border-radius: 16px; }
.cine-stage { background: transparent; }
html.cine-js [data-cine-spotlight] { position: relative; }
[data-cine-spotlight]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgb(14 99 180 / .10), transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { [data-cine-spotlight]:hover::before { opacity: 1; } }

/* ---------- header ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgb(var(--bar) / .9); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); transition: box-shadow .35s; }
.nav-dalam { display: flex; align-items: center; gap: 18px; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; height: 84px; transition: height .35s var(--ease-out); }
.nav.padat { background: rgb(var(--bar) / .94); box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgb(var(--shadow-tint) / .25); }
.nav.padat .nav-dalam { height: 66px; }
/* the header is the same white bar on every page and from the first paint; `terang` is kept only as a hook */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--judul); margin-right: auto; min-height: 44px; padding: 2px 0; }
.brand-mark { width: 40px; height: auto; filter: drop-shadow(0 2px 6px rgb(0 48 72 / .25)); }
.brand-nama { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hijau); }
.brand-nama small { font-weight: 600; font-size: .62rem; letter-spacing: .3em; color: #0b4f92; margin-bottom: 3px; order: -1; }
.nav-tautan { display: flex; gap: 4px; }
.nav-tautan a, .menu-hp a { font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 999px; transition: background .2s, color .2s; white-space: nowrap; }
.nav-tautan a[aria-current="page"] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .nav-tautan a:hover { background: rgb(14 99 180 / .1); color: var(--accent); } }
.nav-aksi { display: flex; align-items: center; gap: 10px; }
.nav-bahasa { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; font-size: .9rem; text-decoration: none; color: var(--ink); padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 999px; min-width: 44px; text-align: center; }
.nav-anggota { font-weight: 600; font-size: .9rem; color: var(--ink); text-decoration: none; padding: 8px 6px; }
.nav-buka { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 50%; }
.nav-buka i { width: 22px; height: 2px; background: var(--judul); transition: transform .3s, opacity .3s; display: block; }
.nav-buka[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-buka[aria-expanded="true"] i:nth-child(2) { opacity: 0; } .nav-buka[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-hp { display: none; }
@media (max-width: 1060px) {
  .nav-dalam { height: 64px; } .nav.padat .nav-dalam { height: 58px; } .brand-mark { width: 34px; } .brand-nama { font-size: 1.1rem; }
  .nav-tautan, .nav-anggota { display: none; } .nav-buka { display: flex; } .nav-aksi .btn { display: none; }
  .menu-hp { display: flex; flex-direction: column; padding: 8px var(--gutter) 24px; background: rgb(var(--bar) / .97); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -20px rgb(var(--shadow-tint) / .4); }
  .menu-hp[hidden] { display: none; } .menu-hp a { font-size: 1.2rem; padding: 14px 6px; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--navy); }
  .menu-hp { background: rgb(var(--bar) / .98); }
}

/* ---------- hero ---------- */
.hero { height: 190vh; background: #9fc6e8; }
.hero .cine-stage { background: #9fc6e8; }
.hero-lapisan { position: absolute; inset: 0; overflow: hidden; }
.hero-lapisan .lapis { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; max-width: none; }
.hero.siap .hero-lapisan { opacity: 0; transition: opacity .6s; }
#hero-depth, #sinyal { position: absolute; inset: 0; width: 100%; height: 100%; }
#sinyal { mix-blend-mode: multiply; opacity: .8; }
/* a bright photograph: the copy sits on a light wash from the left, not on a dark veil */
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(243 248 252 / .9) 0%, rgb(243 248 252 / .72) 34%, rgb(243 248 252 / .25) 58%, transparent 75%), linear-gradient(180deg, transparent 55%, rgb(243 248 252 / .6) 100%); }
.hero-isi { position: relative; z-index: 2; align-self: end; padding-bottom: 7vh; display: grid; gap: 28px; }
.hero-copy { max-width: 920px; }
.hero-label { color: var(--label); margin-bottom: 18px; }
.hero-judul { font-size: clamp(2.6rem, 5.6vw, 6rem); color: var(--judul); font-weight: 700; line-height: .95; letter-spacing: -.005em; text-wrap: balance; }
.hero-judul .baris { display: block; overflow: hidden; white-space: nowrap; }
.hero-judul .baris > span { display: block; transform: translateY(110%); opacity: 0; animation: naik 1.1s var(--ease-out) forwards; animation-delay: .25s; }
.hero-judul .baris:nth-child(2) > span { animation-delay: .4s; color: var(--accent); } .hero-judul .baris:nth-child(3) > span { animation-delay: .55s; } .hero-judul .baris:nth-child(4) > span { animation-delay: .7s; color: var(--accent); }
@keyframes naik { to { transform: none; opacity: 1; } }
html.cine-reduced .hero-judul .baris > span { animation: none; transform: none; opacity: 1; }
.hero-teks { margin-top: 24px; max-width: 60ch; color: var(--ink); font-size: clamp(1rem, 1.25vw, 1.2rem); animation: naik 1s var(--ease-out) .85s both; }
.hero-aksi { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; animation: naik 1s var(--ease-out) 1s both; }
.hero-kaki { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid rgb(11 42 58 / .14); padding-top: 18px; }
.hero-kaki li { font-family: var(--font-display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; color: var(--judul); display: flex; align-items: center; gap: 10px; }
.hero-kaki li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgb(14 99 180 / .6); }
@media (max-width: 700px) {
  .hero { height: auto; } .hero .cine-stage { position: relative; height: auto; min-height: 100svh; overflow: clip; }
  .hero-isi { align-self: start; padding: 84px 0 28px; gap: 18px; }
  .hero-copy, .hero-kaki, .hero-kaki > li { --cue: 1 !important; opacity: 1 !important; transform: none !important; }
  .hero-label { font-size: .72rem; letter-spacing: .14em; margin-bottom: 12px; } .hero-label .tag { display: none; }
  .hero-judul .baris:nth-child(2) > span, .hero-judul .baris:nth-child(4) > span { color: var(--accent); }
  .hero-judul { font-size: clamp(2.2rem, 11vw, 3.2rem); } .hero-judul .baris { overflow: visible; white-space: normal; } .hero-judul .baris > span { transform: translateY(28px); }
  .hero-teks { margin-top: 16px; font-size: .95rem; line-height: 1.55; } .hero-aksi { margin-top: 20px; gap: 10px; } .hero-aksi .btn { width: 100%; justify-content: center; }
  .hero-kaki { padding-top: 14px; gap: 6px 14px; } .hero-kaki li { font-size: .7rem; }
  .hero-scrim { background: linear-gradient(180deg, rgb(243 248 252 / .62) 0%, rgb(243 248 252 / .66) 45%, rgb(243 248 252 / .9) 100%); }
  .hero-lapisan .lapis { animation: hero-nafas 18s ease-in-out infinite alternate; transform-origin: 60% 45%; }
  .hero.siap .hero-lapisan .lapis { animation: none; }
  .cara-garis { display: none; } .hero-isi { padding-bottom: 5vh; } .hero-kaki { gap: 8px 18px; } .hero-kaki li { font-size: .75rem; } }

/* ---------- statement ---------- */
.pernyataan-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.pernyataan-foto { aspect-ratio: 4 / 5; }
.pernyataan-teks p { margin-top: 1em; }
.pernyataan-teks .chip { margin-top: 22px; }
@media (max-width: 900px) { .pernyataan-grid { grid-template-columns: 1fr; } .pernyataan-foto { aspect-ratio: 16 / 11; } }

/* ---------- lines of business: a pinned act with four beats ---------- */
.bidang { height: 400vh; background: linear-gradient(180deg, var(--canvas), var(--canvas-2)); }
.bidang .cine-stage { grid-template-rows: auto 1fr; align-content: start; }
/* cine.css puts every stage child in cell 1/1; the pinned acts with a header row place their parts explicitly */
.bidang-kepala { grid-area: 1 / 1; padding-top: 110px; max-width: 760px; }
.bidang-kepala p { margin-top: 14px; }
.bidang-beats { grid-area: 2 / 1; position: relative; align-self: stretch; min-height: 0; }
.beat { position: absolute; inset: 0; display: grid; z-index: 1; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 72px); align-items: center; padding-bottom: 8vh; }
.beat-media { aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; box-shadow: var(--e3); background: var(--bingkai); transform: translateY(calc((1 - var(--cue)) * 40px)) scale(calc(.94 + var(--cue) * .06)); transition: transform .1s linear; }
.beat-media video, .beat-media img { width: 100%; height: 100%; object-fit: cover; }
.beat-isi h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: 14px; }
.beat-isi .chip { margin-top: 20px; }
.bidang-indeks { grid-area: 2 / 1; align-self: end; justify-self: end; position: relative; right: 22px; bottom: 28px; margin: 0; list-style: none; padding: 0; display: flex; gap: 14px; font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); opacity: .6; }
@media (max-width: 900px) { .bidang { height: 420vh; } .bidang-kepala { padding-top: 72px; } .bidang-kepala h2 { font-size: 1.9rem; } .bidang-kepala p { font-size: .92rem; margin-top: 8px; } .beat { grid-template-columns: 1fr; align-content: start; align-items: start; gap: 12px; padding: 6px 0 0; } .beat-media { aspect-ratio: 16 / 9; max-height: 24vh; transform: none; } .beat-isi .nomor { font-size: 1.8rem; margin: 0 0 2px; } .beat-isi h3 { font-size: 1.55rem; margin-bottom: 8px; } .beat-isi p { font-size: .9rem; line-height: 1.5; } .beat-isi .chip { margin-top: 8px; } .bidang-indeks { display: none; } }

/* ---------- how we work: pinned, line draws, footage behind ---------- */
.cara { height: 240vh; padding: 0; background: #052233; }
.cara-stage { background: #052233; color: #fff; }
.cara-latar { position: absolute; inset: 0; }
.cara-video { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.8); }
.cara-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 34 51 / .96) 0 38%, rgb(5 34 51 / .55) 70%, rgb(5 34 51 / .35)); }
.cara-isi { position: relative; z-index: 2; align-self: center; display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; }
.cara-isi h2 { color: #fff; }
.cara-isi .label { color: #9fd3ff; }
.cara-langkah { list-style: none; padding: 0 0 0 40px; margin: 0; display: grid; gap: 22px; position: relative; }
.cara-langkah li h3 { color: #fff; margin-bottom: 6px; }
.cara-langkah li p { color: rgb(230 242 255 / .78); max-width: 54ch; }
.cara-nomor { font-family: var(--font-display); font-weight: 700; color: #d9b48a; font-size: 1.1rem; letter-spacing: .12em; display: block; margin-bottom: 4px; }
.cara-garis { position: absolute; left: calc(50% - 4px); top: 0; height: 100%; width: 4px; }
.cara-garis path { stroke: #35a0ff; stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pd)); filter: drop-shadow(0 0 6px #35a0ff); }
@media (max-width: 900px) {
  /* phones: not pinned; the whole chapter reads top to bottom with the footage behind it */
  /* overflow: clip, not hidden: hidden would make the stage a scroll container and the view() timelines would measure against it */
  .cara { height: auto; } .cara .cine-stage, .cara-stage { position: relative; height: auto; min-height: 0; display: block; overflow: clip; }
  .cara-latar { position: absolute; inset: 0; } .cara-video { height: 100%; }
  .cara-isi { position: relative; display: grid; grid-template-columns: 1fr; gap: 20px; padding: 72px 0 56px; }
  .cara-isi [data-cine-cue], .cara-langkah li { --cue: 1; }
  .cara-garis { display: none; } .cara-langkah { padding-left: 26px; gap: 22px; position: relative; } .cara-langkah li p { font-size: .92rem; }
  .cara-langkah li { position: relative; }
  .cara-langkah li::before { content: ''; position: absolute; left: -26px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #35a0ff; box-shadow: 0 0 14px #35a0ff; }
  .cara-langkah::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, #35a0ff, rgb(53 160 255 / .15)); transform-origin: top; }
  .cara-scrim { background: linear-gradient(180deg, rgb(5 34 51 / .86), rgb(5 34 51 / .92)); }
}
/* phones: the cinematic devices are driven by each element's own travel through the viewport (CSS scroll-driven
   animations), so nothing depends on a pinned stage and nothing can be clipped or left dim */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cara-isi > div:first-child { animation: tampil-naik linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .cara-langkah li { animation: tampil-geser linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .cara-langkah li::before { animation: nyala linear both; animation-timeline: view(); animation-range: entry 30% entry 80%; }
    .cara-langkah::before { animation: garis-tumbuh linear both; animation-timeline: view(); animation-range: entry 25% exit 70%; }
    .cara-latar { animation: nafas-latar linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .teknologi-kepala { animation: tampil-naik linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .rel { animation: tampil-naik linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .kartu-tek { animation: kartu-masuk linear both; animation-timeline: view(inline); animation-range: entry 0% entry 85%; }
    .pernyataan-foto, .kerja-foto .bingkai, .dua-kolom .bingkai, .kartu-berita, .nilai, .lini-kartu, .tata-daftar li, .langkah-datar li { animation: tampil-naik linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .pernyataan-teks > *, .kerja-teks > *, .kolom-teks > * { animation: tampil-naik linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    [data-cine-in] > * { opacity: 1; transform: none; transition: none; }
  }
}
@keyframes tampil-naik { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes tampil-geser { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes nyala { from { transform: scale(.3); opacity: .2; } to { transform: scale(1); opacity: 1; } }
@keyframes garis-tumbuh { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nafas-latar { from { transform: scale(1.14) translateY(-3%); } to { transform: scale(1) translateY(3%); } }
@keyframes kartu-masuk { from { opacity: .35; transform: scale(.92) translateX(40px); } to { opacity: 1; transform: none; } }
/* phone rail: the dots under it follow the card in view */
.rel-titik { display: none; }
@media (max-width: 900px) { .rel-titik { display: flex; justify-content: center; gap: 8px; padding: 2px 0 22px; } .rel-titik i { width: 8px; height: 8px; border-radius: 50%; background: rgb(14 99 180 / .22); transition: transform .3s, background .3s; } .rel-titik i.on { background: var(--accent); transform: scale(1.3); } }

/* ---------- technology rail: horizontal pan driven by scroll ---------- */
.teknologi { height: 300vh; background: var(--canvas); }
.teknologi .cine-stage { grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 100%); align-content: start; }   /* the rail's max-content width must not widen the column */
.teknologi-kepala { grid-area: 1 / 1; padding-top: 100px; max-width: 760px; }
.teknologi-kepala p { margin-top: 12px; }
.rel { grid-area: 2 / 1; display: flex; gap: 28px; padding: 32px var(--gutter) 40px; align-self: center; justify-self: start; will-change: transform; width: max-content; }
.kartu-tek { width: clamp(280px, 34vw, 460px); flex: none; scroll-snap-align: start; background: var(--surface); border-radius: 18px; padding: 16px 16px 24px; box-shadow: var(--e2); border: 1px solid var(--line); }
.kartu-tek .bingkai { aspect-ratio: 16 / 10; border-radius: 12px; box-shadow: none; margin-bottom: 18px; }
.kartu-tek h3 { margin-bottom: 8px; }
.kartu-tek p { font-size: .95rem; }
@media (max-width: 900px) { .teknologi { height: auto; } .teknologi .cine-stage { position: static; height: auto; display: block !important; overflow: visible; } .teknologi-kepala { padding-top: 72px; --cue: 1 !important; opacity: 1 !important; transform: none !important; } .rel { display: flex; width: 100% !important; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; transform: none !important; justify-self: stretch; } .kartu-tek { width: 84vw; scroll-snap-align: start; } }

/* ---------- partnerships ---------- */
.kerja-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.kerja-foto { position: relative; }
.kerja-foto .bingkai:first-child { aspect-ratio: 4 / 5; }
.kerja-foto-2 { position: absolute; right: -8%; bottom: -10%; width: 58%; aspect-ratio: 16 / 11; border: 6px solid var(--canvas); }
.kerja-untuk { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 28px; }
.kerja-untuk dt { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--judul); margin-bottom: 4px; }
.kerja-untuk dd { font-size: .95rem; margin: 0; color: var(--ink-soft); }
.kerja-teks .chip { margin-top: 26px; }
@media (max-width: 900px) { .kerja-grid { grid-template-columns: 1fr; } .kerja-foto-2 { position: relative; right: auto; bottom: auto; width: 62%; margin: -14% 0 0 auto; } .kerja-untuk { grid-template-columns: 1fr; } }

/* ---------- governance ---------- */
.tata { background: linear-gradient(180deg, var(--canvas), var(--canvas-2)); }
.tata-daftar { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 0; }
.tata-daftar li { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); align-items: start; }
.tata-daftar li:last-child { border-bottom: 1px solid var(--line); }
.tata-nomor { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--accent-2); line-height: 1; }
.tata-daftar h3 { margin-bottom: 6px; }
.tata-daftar--besar li { padding: 40px 0; }
@media (max-width: 700px) { .tata-daftar li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- news ---------- */
.berita-kepala { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.berita-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kartu-berita { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--e1); transition: transform .35s var(--ease-out), box-shadow .35s; }
.kartu-berita a { display: block; text-decoration: none; color: inherit; padding: 0 0 20px; }
.kartu-berita .bingkai { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; margin-bottom: 14px; }
.kartu-berita time, .kartu-berita h3, .kartu-berita p, .kartu-berita .chip { margin-left: 18px; margin-right: 18px; }
.kartu-berita h3 { margin-top: 2px; margin-bottom: 8px; font-size: 1.4rem; }
.kartu-berita p { font-size: .95rem; }
.kartu-berita .chip { margin-top: 12px; }
@media (hover: hover) and (pointer: fine) { .kartu-berita:hover { transform: translateY(-4px); box-shadow: var(--e3); } }
@media (max-width: 900px) { .berita-grid { grid-template-columns: 1fr; } }
.kosong { padding: 28px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; max-width: none; }

/* ---------- closing ---------- */
.penutup { height: 140vh; background: #041c2c; }
.penutup .cine-stage { background: #041c2c; }
.penutup-latar { position: absolute; inset: 0; }
.penutup-video { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.penutup-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 28 44 / .55), rgb(4 28 44 / .85)); }
.penutup-isi { position: relative; z-index: 2; align-self: center; text-align: center; display: grid; justify-items: center; gap: 16px; }
.penutup-isi h2 { color: #fff; font-size: clamp(2.4rem, 5.5vw, 5rem); max-width: 18ch; }
.penutup-isi p { color: rgb(235 245 255 / .85); max-width: 52ch; font-size: 1.1rem; }
.penutup-isi .hero-aksi { justify-content: center; animation: none; }
.ajakan { background: linear-gradient(135deg, #0b4f92, #0e63b4 60%, #1a82df); color: #fff; }
.ajakan-dalam { display: grid; gap: 14px; justify-items: start; }
.ajakan h2 { color: #fff; max-width: 20ch; } .ajakan p { color: rgb(255 255 255 / .85); max-width: 56ch; }
.ajakan .btn--primer { background: #fff; color: var(--accent); }

/* ---------- footer ---------- */
.kaki { background: var(--navy); color: #cfe3f1; position: relative; overflow: hidden; padding-top: 72px; }
.kaki a { color: #e6f3ff; text-decoration: none; }
.kaki-atas { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; position: relative; z-index: 1; }
.kaki-logo { width: 150px; height: auto; background: #fff; border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; }
.kaki-merek p { color: #b8d1e3; font-size: .95rem; }
.kaki-kontak { margin-top: 14px; }
.kaki-kolom { display: grid; gap: 10px; align-content: start; }
.kaki-kolom h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; color: #8fd0ff; margin-bottom: 6px; }
.kaki-kolom a { font-size: .95rem; color: #d6e8f5; }
@media (hover: hover) and (pointer: fine) { .kaki-kolom a:hover { color: #fff; text-decoration: underline; } }
.kaki-bawah { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 36px 0 28px; margin-top: 56px; border-top: 1px solid rgb(255 255 255 / .12); font-size: .85rem; color: #9fbdd2; position: relative; z-index: 1; }
.kaki-wordmark { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 17vw, 16rem); line-height: .8; letter-spacing: .02em; color: rgb(255 255 255 / .04); text-align: center; white-space: nowrap; margin-top: -10px; pointer-events: none; user-select: none; }
@media (max-width: 900px) { .kaki-atas { grid-template-columns: 1fr 1fr; } .kaki-merek { grid-column: 1 / -1; } }

/* ---------- inner pages ---------- */
.hal-kepala { height: 120vh; }
.hal-kepala .cine-stage { background: var(--navy); }
.hal-foto { position: absolute; inset: 0; margin: 0; }
.hal-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.02 + var(--pd) * .08)); }
.hal-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 24 40 / .45), rgb(0 24 40 / .25) 40%, rgb(0 28 46 / .9)); }
.hal-isi { position: relative; z-index: 2; align-self: end; padding-bottom: 9vh; max-width: 900px; }
.hal-isi .label { color: #9fd3ff; } .hal-isi h1 { color: #fff; font-size: clamp(2.6rem, 6.5vw, 6rem); }
.hal-sub { margin-top: 18px; color: rgb(235 245 255 / .88); font-size: clamp(1rem, 1.3vw, 1.25rem); max-width: 60ch; }
.artikel .hal-sub { color: var(--ink-soft); }
.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.dua-kolom .bingkai { aspect-ratio: 4 / 3; }
.dua-kolom .bingkai video { width: 100%; height: 100%; object-fit: cover; }
.lini--balik .dua-kolom { direction: rtl; } .lini--balik .dua-kolom > * { direction: ltr; }
.kolom-teks h2 { margin-bottom: 18px; } .kolom-teks .chip, .kolom-teks .btn { margin-top: 26px; }
@media (max-width: 900px) { .dua-kolom { grid-template-columns: 1fr; } .lini--balik .dua-kolom { direction: ltr; } }
.visi { background: linear-gradient(180deg, var(--canvas-2), var(--canvas)); }
.visi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.visi-kartu { background: var(--surface); border-radius: 18px; padding: 36px; box-shadow: var(--e2); border: 1px solid var(--line); }
.visi-kartu h2 { font-size: 2.2rem; margin-bottom: 14px; }
.misi { padding-left: 1.2em; display: grid; gap: 12px; } .misi li { color: var(--ink); }
@media (max-width: 900px) { .visi-grid { grid-template-columns: 1fr; } }
.nilai-grid, .lini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 28px; }
.nilai, .lini-kartu { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--e1); text-decoration: none; color: inherit; display: block; transition: transform .35s var(--ease-out), box-shadow .35s; }
.nilai h3, .lini-kartu h3 { margin: 10px 0 8px; } .nilai p, .lini-kartu p { font-size: .95rem; }
@media (hover: hover) and (pointer: fine) { .lini-kartu:hover, .nilai:hover { transform: translateY(-4px); box-shadow: var(--e3); } }
.langkah-datar { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.langkah-datar li { border-top: 2px solid var(--accent); padding-top: 16px; } .langkah-datar h3 { margin: 8px 0; } .langkah-datar p { font-size: .95rem; }
.poin { padding-left: 1.1em; display: grid; gap: 10px; margin-top: 12px; } .poin li { color: var(--ink-soft); } .poin b { color: var(--judul); }
.artikel { padding-top: 140px; }
.artikel-kepala { display: grid; gap: 14px; justify-items: start; max-width: 860px; }
.artikel-kepala h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.artikel-sampul { margin: 40px auto; aspect-ratio: 16 / 9; }
.artikel-isi { max-width: 760px; padding: 32px 0 72px; }
.prosa p, .prosa li { color: var(--ink); font-size: 1.08rem; line-height: 1.8; } .prosa p + p { margin-top: 1.2em; } .prosa h2 { font-size: 1.9rem; margin: 1.6em 0 .5em; } .prosa h3 { margin: 1.4em 0 .4em; } .prosa ul { padding-left: 1.2em; margin: 1em 0; } .prosa .btn { margin-top: 20px; }
.catatan { font-size: .9rem; color: var(--accent-2); }
.kontak-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.kontak-form { padding: 32px; display: grid; gap: 18px; }
.isian { display: grid; gap: 6px; } .isian-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.isian label { font-weight: 600; font-size: .9rem; color: var(--judul); }
.isian input, .isian select, .isian textarea { font: inherit; color: var(--ink); background: var(--isian); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; min-height: 48px; transition: border-color .2s, box-shadow .2s; }
.isian input:focus, .isian select:focus, .isian textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(14 99 180 / .12); }
.isian-hp { position: absolute; left: -9999px; }
.form-pesan { min-height: 1.4em; font-weight: 600; max-width: none; } .form-pesan.ok { color: #0d7a4a; } .form-pesan.salah { color: #b4232c; }
.kontak-kartu { display: grid; gap: 26px; } .kontak-kartu h3 { margin-bottom: 4px; } .kontak-kartu .besar-teks { text-decoration: none; }
.kontak-kartu .bingkai { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .kontak-grid { grid-template-columns: 1fr; } .isian-2 { grid-template-columns: 1fr; } .kontak-form { padding: 22px; } }
.hal-404 { padding-top: 180px; min-height: 70vh; display: grid; align-items: center; } .hal-404 .btn { margin-top: 20px; }
.section { padding-block: clamp(56px, 9vw, 140px); }
.section + .section { padding-top: 0; }
/* the pinned process chapter carries its own stage: no section padding around it (that padding showed as a bare band) */
.cara.section { padding-block: 0; }

/* ---------- motion guards ---------- */
html.cine-reduced .scan::after, html.cine-reduced .hero-judul .baris > span { animation: none; }
@media (prefers-reduced-motion: reduce) { .beat-media { transform: none; } .hal-foto img { transform: none; } .cara-garis path { stroke-dashoffset: 0; } }
@media (max-width: 700px) { :root { --gutter: 16px; } .label { font-size: .78rem; } .btn { padding: 13px 22px; font-size: .95rem; } }

/* ---------- header from the first paint: light over dark openings, with a hairline ---------- */
.nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(255 255 255 / .6); pointer-events: none; }

/* ---------- the opening: seven seconds of satellite, globe and the mark, once per visit ---------- */
.intro { display: none; position: fixed; inset: 0; z-index: 95; background: radial-gradient(900px 600px at 70% 40%, #0b3a5e, #03182a 70%); color: #fff; overflow: hidden; }
html.intro-on .intro { display: block; }
html.intro-on { overflow: hidden; }
html.intro-on .hero-judul .baris > span, html.intro-on .hero-teks, html.intro-on .hero-aksi { animation-play-state: paused; }
html.intro-selesai .hero-judul .baris > span, html.intro-selesai .hero-teks, html.intro-selesai .hero-aksi { animation-play-state: running; }
.intro.selesai { opacity: 0; transform: scale(1.03); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); pointer-events: none; }
.intro-kanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-tengah { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 14px; width: min(92vw, 720px); text-align: center; pointer-events: none; }
.intro-mark { width: clamp(84px, 14vw, 150px); height: auto; opacity: 0; filter: blur(18px) drop-shadow(0 0 0 rgb(53 160 255 / 0)); transform: scale(.6) rotate(-8deg); }
.intro.tahap-logo .intro-mark { animation: intro-mark 1.6s var(--ease-out) forwards; }
@keyframes intro-mark { 60% { filter: blur(0) drop-shadow(0 0 34px rgb(53 160 255 / .9)); } 100% { opacity: 1; filter: blur(0) drop-shadow(0 6px 26px rgb(53 160 255 / .55)); transform: none; } }
.intro-nama { display: flex; gap: .02em; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 6.2vw, 4.4rem); letter-spacing: .08em; color: #fff; line-height: 1; }
.intro-spasi { width: .45em; }
.intro-huruf { display: inline-block; opacity: 0; transform: translateY(.6em) rotateX(70deg); transform-origin: 50% 100%; }
.intro.tahap-nama .intro-huruf { animation: intro-huruf .7s var(--ease-out) forwards; }
.intro.tahap-nama .intro-huruf.h1 { animation-delay: .05s; } .intro.tahap-nama .intro-huruf.h2 { animation-delay: .1s; } .intro.tahap-nama .intro-huruf.h3 { animation-delay: .15s; } .intro.tahap-nama .intro-huruf.h5 { animation-delay: .22s; } .intro.tahap-nama .intro-huruf.h6 { animation-delay: .27s; } .intro.tahap-nama .intro-huruf.h7 { animation-delay: .32s; } .intro.tahap-nama .intro-huruf.h9 { animation-delay: .4s; } .intro.tahap-nama .intro-huruf.h10 { animation-delay: .45s; } .intro.tahap-nama .intro-huruf.h11 { animation-delay: .5s; } .intro.tahap-nama .intro-huruf.h12 { animation-delay: .55s; }
@keyframes intro-huruf { to { opacity: 1; transform: none; } }
.intro-tag { opacity: 0; color: #bfe3ff; font-size: clamp(.8rem, 1.3vw, 1rem); letter-spacing: .04em; max-width: 44ch; }
.intro.tahap-tag .intro-tag { animation: naik .9s var(--ease-out) forwards; }
.intro-bar { position: absolute; left: 8vw; right: 8vw; bottom: 9vh; height: 2px; background: rgb(255 255 255 / .16); }
.intro-bar b { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #35a0ff, #bfe3ff); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px #35a0ff; }
.intro-lewati { position: absolute; right: 8vw; bottom: calc(9vh + 14px); font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: #bfe3ff; padding: 10px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .3); opacity: 0; transition: opacity .4s; }
.intro.boleh-lewati .intro-lewati { opacity: 1; }
.intro-lewati:hover { background: rgb(255 255 255 / .1); color: #fff; }
.intro.sederhana .intro-kanvas { display: none; }
@media (max-width: 700px) { .intro-tengah { top: 46%; } .intro-nama { font-size: clamp(1.6rem, 9vw, 2.6rem); letter-spacing: .06em; } }

/* ---------- phone fallback breath for the hero layers (no WebGL) ---------- */
@keyframes hero-nafas { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }
html.cine-reduced .hero-lapisan .lapis { animation: none !important; }
/* ---------- the opening: status line and percentage ---------- */
.intro-status { position: absolute; left: 8vw; right: 8vw; bottom: calc(9vh + 16px); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--font-display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: #bfe3ff; }
.intro-persen { font-size: 1.4rem; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; }
.intro-teks { opacity: .85; transition: opacity .3s; } .intro-teks.ganti { opacity: 0; }
.intro-lewati { display: none; }
.intro-bintang { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }