/* =========================================================================
   Situs VIPA · gaya utama
   Token warna dan huruf dari vipa_workspace/vipa/merek/tokens.json.
   Tata letak dan gerak mengikuti prototipe situs v0.6.
   Tidak ada atribut style di HTML (diblokir Content-Security-Policy),
   jadi semua gaya ada di berkas ini.
   ========================================================================= */

/* ---------- Huruf (disimpan di repo, SIL OFL 1.1, lihat assets/fonts/OFL.txt) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/fraunces-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/fraunces-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2"); }

/* ---------- Token (nama sama dengan tokens.json) ---------- */
:root {
  --bintang: #F0C25E;
  --bara: #E07A4F;
  --langit: #6C9BF2;
  --giok: #3BA597;
  --bintang-teks: #8A6210;
  --bintang-teks-gelap: #F6D99A;
  --bara-teks: #A84A22;
  --bara-teks-gelap: #F3B69A;
  --langit-teks: #2F5FC4;
  --langit-teks-gelap: #AFC8FA;
  --giok-teks: #1E7468;
  --giok-teks-gelap: #8FD6C9;
  --malam: #0B0F2A;
  --senja: #11153A;
  --indigo: #23287A;
  --gading: #F7F4EE;
  --tinta: #15172B;
  --fajar: #F6D3A6;
  --surface: #FFFFFF;
  --surface-2: #EFEADF;
  --fg-gelap: #ECEEF8;
  --body: #3C3F55;
  --body-gelap: #C9CCE0;
  --muted: #565A70;
  --muted-gelap: #B9BDD6;
  --line: #E4DDCF;
  --line-pasir: #DDD6C8;
  --focus: #F0C25E;
  --app-preciyours: #0F2538;
  --app-follo: #0E2A5C;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-section: 48px;
  --radius-pill: 999px;
  --shadow-kartu: 0 40px 80px rgba(3, 8, 25, .35);
  --shadow-menu: 0 30px 80px rgba(8, 10, 28, .35);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --tinggi-bilah: 76px;
}

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--malam);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
main { display: block; background: var(--gading); outline: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 92px; }
.hal-tentang [id] { scroll-margin-top: 140px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 5px var(--tinta); }
main:focus-visible { box-shadow: none; outline: none; }

.lewati {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: var(--radius-pill);
  background: var(--bintang); color: var(--tinta); font-weight: 600; text-decoration: none;
}
.lewati:focus { top: 12px; }

.wadah { max-width: 1200px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.wadah--py { max-width: 1120px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 480px) { .wadah, .wadah--py { padding-left: 20px; padding-right: 20px; } }

.serif { font-family: var(--serif); font-weight: 400; }
.serif em, .judul-hero em, .judul-l em, .judul-m em { font-style: italic; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; }
.eyebrow--emas { color: var(--bintang); }
.eyebrow--emas-teks { color: var(--bintang-teks); }
.eyebrow--redup { color: var(--muted-gelap); }
.eyebrow--muted { color: var(--muted); }
.eyebrow--giok { color: var(--giok-teks-gelap); }
.eyebrow--bara { color: var(--bara-teks-gelap); }
.eyebrow--langit-teks { color: var(--langit-teks); }
.eyebrow--bara-teks { color: var(--bara-teks); }
.eyebrow--giok-teks { color: var(--giok-teks); }

.emas-teks { color: var(--bintang-teks); }
.emas-muda { color: var(--bintang-teks-gelap); }
.tebal { font-weight: 600; }
.teks-isi { color: var(--body); }
.teks-gelap-1 { color: #E4E6F3; }
.teks-gelap-2 { color: var(--body-gelap); }
.lebar-520 { max-width: 520px; }
.lebar-560 { max-width: 560px; }
.lebar-580 { max-width: 580px; }
.lebar-620 { max-width: 620px; }
.lebar-640 { max-width: 640px; }

.judul-hero { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -0.02em; }
.judul-hero em { font-weight: 300; color: var(--bintang-teks-gelap); }
.judul-hero--t { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.01em; }
.judul-hero--t em { font-weight: 400; }
.judul-hero--k { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.05; letter-spacing: 0; }
.judul-hero--k em { font-weight: 400; }
.judul-l { font-size: clamp(36px, 5vw, 60px); line-height: 1.08; }
.judul-m { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; }
.judul-s-besar { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.22; }
.judul-langkah { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }

/* Tautan bergaris saat diarahkan */
.lnk {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease);
}
.lnk:hover { background-size: 100% 1px; }
.lnk--indigo { color: var(--indigo); font-weight: 600; padding: 12px 6px; display: inline-flex; align-items: center; min-height: 44px; background-position: 6px 80%; }

/* Tombol kapsul */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; border: 1px solid transparent;
  transition: transform .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.tbl:hover { transform: translateY(-2px); }
.tbl .panah { display: inline-block; transition: transform .4s var(--ease); }
.tbl:hover .panah { transform: translateX(5px); }
.tbl--emas { background: var(--bintang); color: var(--tinta); }
.tbl--garis { border-color: rgba(255, 255, 255, .5); color: #FFFFFF; }
.tbl--indigo { background: var(--indigo); color: #FFFFFF; }
.tbl--plum { background: #2A1E2E; color: #FBEFE6; }
.tbl--garis-plum { border-color: rgba(42, 30, 46, .45); color: #2A1E2E; }
.tbl--diam { cursor: default; }
.tbl--diam:hover { transform: none; }
.baris-tombol { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.baris-tombol--tengah { justify-content: center; }

/* Titik warna dan legenda */
.titik { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.titik--bintang { background: var(--bintang); }
.titik--langit { background: var(--langit); }
.titik--bara { background: var(--bara); }
.titik--giok { background: var(--giok); }
.titik--gading { background: var(--fg-gelap); }
.titik--tinta { background: var(--tinta); }
.legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; font-size: 14px; }
.legenda li { display: flex; gap: 10px; align-items: baseline; }
.legenda--gelap { color: var(--body-gelap); }
.legenda--gelap strong { color: #FFFFFF; }
.legenda--terang { font-size: 15px; color: var(--body); gap: 10px 24px; max-width: 520px; margin-top: 4px; }
.legenda--terang strong { color: var(--tinta); }
@media (max-width: 420px) { .legenda { grid-template-columns: minmax(0, 1fr); } }

/* Bagian terang yang naik menindih bagian gelap di atasnya */
.tindih { position: relative; z-index: 4; margin-top: calc(var(--radius-section) * -1); border-radius: var(--radius-section) var(--radius-section) 0 0; }
.tindih--56 { margin-top: -56px; border-radius: 56px 56px 0 0; }

/* Topeng organik untuk foto */
.topeng { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 58% 42% 52% 48% / 46% 58% 42% 54%; }
.topeng img { width: 100%; height: 100%; object-fit: cover; }
.topeng--b { border-radius: 52% 48% 60% 40% / 42% 52% 48% 58%; }
.topeng--lebar { aspect-ratio: 16 / 11; box-shadow: 0 40px 80px rgba(5, 5, 20, .45); }
.topeng--lebar img { object-position: 40% center; }
.topeng__lapis { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(42, 36, 86, 0) 45%, rgba(11, 15, 42, .5) 100%); }

/* ---------- Gerak ---------- */
@keyframes fadeup { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { from { opacity: .15; } to { opacity: .9; } }
@keyframes ignite { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes morph { 0% { border-radius: 58% 42% 52% 48% / 46% 58% 42% 54%; } 50% { border-radius: 44% 56% 40% 60% / 58% 42% 58% 42%; } 100% { border-radius: 52% 48% 60% 40% / 42% 52% 48% 58%; } }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes shrink { 0%, 18% { transform: scaleX(1); } 52%, 84% { transform: scaleX(.36); } 100% { transform: scaleX(1); } }

.fadeup { opacity: 0; animation: fadeup 1.1s var(--ease) forwards; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .35s; }
.d5 { animation-delay: .5s; } .d7 { animation-delay: .75s; } .d9 { animation-delay: .9s; } .d11 { animation-delay: 1.1s; }
.morph { animation: morph 18s ease-in-out infinite alternate; }
.floaty { animation: floaty 8s ease-in-out infinite alternate; }
.floaty2 { animation: floaty 6s ease-in-out -2s infinite alternate; }
.spin, .spin-r { transform-box: view-box; }
.spin { animation: spin 48s linear infinite; }
.spin-r { animation: spin 70s linear infinite reverse; }
.ignite { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ignite 1.6s var(--ease) 1.6s forwards; }
.breathe { transform-box: view-box; animation: breathe 9s ease-in-out infinite alternate; }
.shrink { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #0E79C2, #2EC4C6); transform-origin: left center; animation: shrink 7s var(--ease) infinite; }
.putar-60 { transform-origin: 60px 60px; }
.o-260-30 { transform-origin: 260px 30px; }
.o-260-110 { transform-origin: 260px 110px; }
.o-150-150 { transform-origin: 150px 150px; }
.o-206-64 { transform-origin: 206px 64px; }
.campur-layar { mix-blend-mode: screen; }

/* Muncul saat digulir: hanya aktif bila JavaScript jalan dan gerak tidak dikurangi */
.gerak [data-r] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.gerak [data-r="mask"] { transform: scale(.94); }
.gerak [data-r].masuk { opacity: 1; transform: none; }
.gerak [data-r]:nth-child(2) { transition-delay: 90ms; }
.gerak [data-r]:nth-child(3) { transition-delay: 160ms; }
.gerak [data-r]:nth-child(4) { transition-delay: 220ms; }
.gerak [data-r]:nth-child(5) { transition-delay: 280ms; }
.gerak [data-r]:nth-child(6) { transition-delay: 340ms; }
.gerak [data-r]:nth-child(n+7) { transition-delay: 400ms; }

/* =========================================================================
   Bilah atas
   ========================================================================= */
.bilah { position: sticky; top: 0; z-index: 60; font-family: var(--sans); }
.bilah--gelap { --b-fg: #ECEEF8; --b-sub: #B9BDD6; --b-bg: rgba(11, 15, 42, .74); --b-line: rgba(255, 255, 255, .08); --b-line2: rgba(255, 255, 255, .3); --b-btn-bg: var(--bintang); --b-btn-fg: var(--tinta); }
.bilah--terang { --b-fg: #15172B; --b-sub: #565A70; --b-bg: rgba(247, 244, 238, .86); --b-line: rgba(21, 23, 43, .08); --b-line2: rgba(21, 23, 43, .25); --b-btn-bg: var(--indigo); --b-btn-fg: #FFFFFF; }
.bilah::before {
  content: ""; position: absolute; inset: 0;
  background: var(--b-bg); border-bottom: 1px solid var(--b-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.bilah { color: var(--b-fg); }
.bilah__isi { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 28px; height: var(--tinggi-bilah); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (max-width: 480px) { .bilah__isi { padding: 0 20px; } }
.bilah__logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo-vipa { height: 34px; width: auto; }

.bilah__menu { display: flex; align-items: center; gap: 2px; }
.nl {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 12px 14px; background: none; border: 0; cursor: pointer;
  color: var(--b-fg); font-size: 15px; font-weight: 500; text-decoration: none; line-height: 1.2;
}
.nl::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px; background: var(--bintang); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nl:hover::after, .nl.on::after { transform: scaleX(1); }
.bilah--terang .nl::after { background: var(--indigo); }
.tbl--bilah { margin-left: 10px; min-height: 44px; padding: 0 18px; font-size: 14px; background: var(--b-btn-bg); color: var(--b-btn-fg); }

/* Menu turun Tentang Kami */
.turun { position: relative; }
.turun__panah { transition: transform .4s var(--ease); }
.turun__panel {
  position: absolute; top: 100%; right: -120px; width: 700px; padding-top: 12px; z-index: 3;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .35s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.turun__redup {
  position: fixed; left: 0; right: 0; top: var(--tinggi-bilah); bottom: 0; z-index: 2;
  background: rgba(8, 10, 28, .42); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.turun:hover .turun__panel, .turun:focus-within .turun__panel, .turun.buka .turun__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.turun:hover .turun__redup, .turun:focus-within .turun__redup, .turun.buka .turun__redup { opacity: 1; }
.turun:hover .turun__panah, .turun:focus-within .turun__panah, .turun.buka .turun__panah { transform: rotate(180deg); }
/* Escape menutup panel walau fokus masih di dalam */
.turun.tutup .turun__panel { opacity: 0 !important; visibility: hidden !important; transform: translateY(-12px) !important; }
.turun.tutup .turun__redup { opacity: 0 !important; }
.turun.tutup .turun__panah { transform: none !important; }

.turun__kartu { display: flex; border-radius: var(--radius-lg); overflow: hidden; background: #FFFFFF; box-shadow: var(--shadow-menu); }
.turun__sampul {
  flex: 0 0 230px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(120% 90% at 70% 0%, #2A2456 0%, #11153A 60%, #0B0F2A 100%); color: var(--fg-gelap);
}
.turun__sosok { width: 58px; }
.turun__sosok .sosok { overflow: visible; }
.turun__judul { font-family: var(--serif); font-size: 24px; line-height: 1.15; }
.turun__ket { font-size: 14px; line-height: 1.5; color: var(--body-gelap); }
.turun__buka { margin-top: auto; padding: 10px 0; color: var(--bintang-teks-gelap); font-size: 14px; font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.turun__buka:hover { text-decoration: underline; text-underline-offset: 4px; }
.turun__daftar { flex: 1 1 auto; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-content: start; }
.ddl { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--tinta); transition: background-color .25s var(--ease); }
.ddl:hover { background: var(--surface-2); }
.ddl:focus-visible { box-shadow: none; outline-color: var(--indigo); outline-offset: -2px; }
.ddl__isi { display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.turun:hover .ddl__isi, .turun:focus-within .ddl__isi, .turun.buka .ddl__isi { opacity: 1; transform: none; }
.turun__daftar li:nth-child(1) .ddl__isi { transition-delay: 40ms; }
.turun__daftar li:nth-child(2) .ddl__isi { transition-delay: 75ms; }
.turun__daftar li:nth-child(3) .ddl__isi { transition-delay: 110ms; }
.turun__daftar li:nth-child(4) .ddl__isi { transition-delay: 145ms; }
.turun__daftar li:nth-child(5) .ddl__isi { transition-delay: 180ms; }
.turun__daftar li:nth-child(6) .ddl__isi { transition-delay: 215ms; }
.ddl__judul { font-weight: 600; font-size: 15px; }
.ddl__panah { display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ddl:hover .ddl__panah, .ddl:focus-visible .ddl__panah { opacity: 1; transform: none; }
.ddl__ket { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* Menu ponsel */
.bilah__tombol-ponsel {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--b-line2); background: none;
  color: var(--b-fg); font-size: 14px; font-weight: 600; cursor: pointer;
}
.bilah__tombol-ponsel .ikon-tutup { display: none; }
.bilah__tombol-ponsel[aria-expanded="true"] .ikon-menu { display: none; }
.bilah__tombol-ponsel[aria-expanded="true"] .ikon-tutup { display: inline; }
.ponsel {
  position: absolute; left: 0; right: 0; top: var(--tinggi-bilah);
  display: flex; flex-direction: column; padding: 12px 20px 24px;
  max-height: calc(100vh - var(--tinggi-bilah)); overflow-y: auto;
  background: #FFFFFF; color: var(--tinta); box-shadow: 0 30px 60px rgba(8, 10, 28, .3);
  animation: mpIn .45s var(--ease);
}
@keyframes mpIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.ponsel > a, .ponsel > button {
  display: flex; justify-content: space-between; align-items: center; min-height: 52px;
  padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--tinta); font-weight: 600; text-decoration: none; text-align: left; cursor: pointer;
}
.ponsel__sub { display: flex; flex-direction: column; padding: 4px 0 8px 12px; border-bottom: 1px solid var(--line); animation: mpIn .45s var(--ease); }
.ponsel__sub a { padding: 11px 4px; min-height: 44px; display: flex; align-items: center; color: var(--body); text-decoration: none; }
.ponsel > a.ponsel__ajakan { margin-top: 18px; justify-content: center; min-height: 48px; border: 0; border-radius: var(--radius-pill); color: #FFFFFF; }
.ponsel :focus-visible { outline-color: var(--indigo); box-shadow: none; outline-offset: -2px; }

@media (max-width: 960px) {
  .bilah__menu { display: none; }
  .bilah__tombol-ponsel { display: inline-flex; }
}
@media (min-width: 961px) { .ponsel { display: none !important; } }

/* =========================================================================
   Kaki halaman
   ========================================================================= */
.kaki { background: var(--malam); color: var(--muted-gelap); font-size: 15px; line-height: 1.6; }
.kaki__isi { max-width: 1200px; margin: 0 auto; padding: 64px 28px 32px; display: flex; flex-direction: column; gap: 44px; }
@media (max-width: 480px) { .kaki__isi { padding-left: 20px; padding-right: 20px; } }
.kaki__kolom-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 36px 32px; }
.kaki__identitas { display: flex; flex-direction: column; gap: 10px; }
.kaki__logo { display: flex; align-items: center; min-height: 44px; align-self: flex-start; }
.kaki__tagline { font-size: 22px; color: #FFFFFF; }
.kaki__tagline em { color: var(--bintang-teks-gelap); }
.kaki__kolom { display: flex; flex-direction: column; }
.kaki__judul { margin-bottom: 4px; color: #FFFFFF; font-weight: 600; }
.kaki .lnk { color: #DDE0F0; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; background-position: 0 75%; }
.kaki__teks { color: #DDE0F0; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.kaki__status { font-size: 13px; color: #9DA2BF; }
.kaki__bawah { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: #9DA2BF; }
.kaki__bawah .lnk { color: var(--body-gelap); }

/* =========================================================================
   Beranda
   ========================================================================= */
.pembuka {
  position: relative; min-height: 820px; overflow: hidden; isolation: isolate; color: var(--fg-gelap);
  background: radial-gradient(120% 80% at 78% 108%, #5A3A5E 0%, #2A2456 32%, #11153A 60%, #0B0F2A 100%);
}
.hal-beranda .pembuka { margin-top: calc(var(--tinggi-bilah) * -1); padding-top: var(--tinggi-bilah); }
.pembuka__bintang { position: absolute; inset: 0; z-index: 0; transform: translate3d(0, calc(var(--sy, 0px) * .3), 0); }
.bintang { width: 100%; height: 100%; }
.bintang circle { fill: #FFFFFF; animation: twinkle 4s ease-in-out infinite alternate; }
.bintang .b0 { animation-duration: 3.4s; animation-delay: .2s; }
.bintang .b1 { animation-duration: 5.1s; animation-delay: 1.4s; }
.bintang .b2 { animation-duration: 4.2s; animation-delay: 2.6s; }
.bintang .b3 { animation-duration: 6.3s; animation-delay: .9s; }
.bintang .b4 { animation-duration: 3.8s; animation-delay: 3.3s; }
.bintang .b5 { animation-duration: 5.7s; animation-delay: 1.9s; }
.pembuka__cahaya { position: absolute; right: -10%; bottom: -30%; width: 900px; height: 600px; border-radius: 50%; z-index: 0; background: radial-gradient(closest-side, rgba(240, 194, 94, .3), rgba(240, 166, 90, .1) 55%, rgba(240, 166, 90, 0) 100%); }
.pembuka__isi { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 120px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px 40px; }
.pembuka__teks { flex: 999 1 500px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pembuka__lead { max-width: 580px; font-size: 19px; line-height: 1.6; color: var(--body-gelap); }
.pembuka__chip { display: flex; flex-wrap: wrap; gap: 12px; }
.chipapp {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #FFFFFF; text-decoration: none;
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.chipapp:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .1); }
.chipapp__ikon { width: 44px; height: 44px; border-radius: 12px; }
.chipapp__teks { display: flex; flex-direction: column; line-height: 1.3; }
.chipapp__nama { font-weight: 600; }
.chipapp__ket { font-size: 13px; color: var(--muted-gelap); }
.kapsul-follo { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: #0B2350; border: 1px solid rgba(150, 210, 55, .55); }
.kapsul-follo img { width: auto; }
.kapsul-follo--chip { width: 84px; height: 44px; border-color: rgba(150, 210, 55, .45); }
.kapsul-follo--chip img { height: 15px; }
.kapsul-follo--kecil { width: 76px; height: 40px; border: 0; }
.kapsul-follo--kecil img { height: 14px; }

.pembuka__visual { flex: 1 1 400px; position: relative; min-height: 560px; transform: translate3d(0, calc(var(--sy, 0px) * .08), 0); }
.pembuka__foto { position: absolute; left: 0; top: 40px; width: 58%; max-width: 320px; }
.pembuka__foto .topeng { box-shadow: 0 40px 80px rgba(5, 5, 20, .45); }
.pembuka__bintang-emas { position: absolute; right: -34px; top: -34px; width: 96px; overflow: visible; }
.pembuka__ponsel { position: absolute; right: 8%; top: 20px; }
.ponsel-mock { width: 232px; height: 480px; border-radius: 38px; background: #160F1E; padding: 11px; box-shadow: 0 40px 80px rgba(5, 5, 20, .55); }
.ponsel-mock__layar { width: 100%; height: 100%; border-radius: 28px; background: #F2F7FC; overflow: hidden; display: flex; flex-direction: column; color: #0E2336; }
.ponsel-mock__atas { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; font-weight: 700; font-size: 13px; }
.ponsel-mock__atas img { width: 22px; height: 22px; border-radius: 6px; }
.ponsel-mock__foto { margin: 0 12px; height: 230px; border-radius: 18px; overflow: hidden; }
.ponsel-mock__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ponsel-mock__info { padding: 14px; display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }
.ponsel-mock__judul { font-weight: 700; font-size: 13px; }
.ponsel-mock__ket { font-size: 11px; color: #4C6072; }
.ponsel-mock__bar { display: block; height: 7px; border-radius: 99px; background: #D5E3EF; overflow: hidden; }
.pembuka__follo { position: absolute; left: 4%; bottom: 24px; }
.kartu-follo { width: 250px; padding: 16px 18px; border-radius: 20px; background: #0B2350; border: 1px solid rgba(150, 210, 55, .35); box-shadow: 0 30px 60px rgba(5, 5, 20, .5); color: #FFFFFF; display: flex; flex-direction: column; gap: 10px; line-height: 1.4; }
.kartu-follo > img { height: 16px; width: auto; align-self: flex-start; }
.kartu-follo__judul { font-size: 14px; font-weight: 600; }
.kartu-follo__daftar { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #C8D4E6; }
.kartu-follo__daftar > span { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.hijau { color: #B8E07A; }
@media (max-width: 560px) {
  .pembuka { min-height: 0; }
  .pembuka__isi { padding-top: 48px; padding-bottom: 96px; }
  .pembuka__visual { min-height: 470px; zoom: .82; }
  .pembuka__ponsel { right: 0; }
  .pembuka__follo { left: 0; bottom: -12px; }
}

/* Ekosistem dan etalase */
.eko { position: relative; overflow: hidden; isolation: isolate; color: var(--fg-gelap); }
.eko__latar { position: absolute; inset: 0; z-index: -1; transition: opacity 1.1s var(--ease); }
.eko__latar--dasar { background: radial-gradient(120% 90% at 80% 10%, #1E2560 0%, #11153A 55%, #0B0F2A 100%); }
.eko__latar--py { opacity: 0; background: linear-gradient(rgba(6, 16, 36, .2), rgba(6, 16, 36, .2)), radial-gradient(110% 85% at 78% 18%, #0F78B8 0%, #0A4F82 38%, #061827 100%); }
.eko__latar--follo { opacity: 0; background: linear-gradient(rgba(6, 16, 36, .2), rgba(6, 16, 36, .2)), radial-gradient(60% 50% at 88% 90%, rgba(150, 210, 55, .22), rgba(150, 210, 55, 0) 70%), radial-gradient(110% 85% at 78% 18%, #1862DC 0%, #12408F 40%, #0B2350 100%); }
.eko[data-app="py"] .eko__latar--py, .eko[data-app="follo"] .eko__latar--follo { opacity: 1; }
.eko__isi { padding-top: 120px; padding-bottom: 130px; display: flex; flex-direction: column; gap: 48px; }
.eko__kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 56px; }
.eko__intro { flex: 1 1 520px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Teks di atas gradien aplikasi dibuat lebih terang supaya tetap 4,5 : 1 di titik paling terang */
.eko__intro .teks-gelap-2 { max-width: 600px; color: #E4E6F3; }
.eko .legenda--gelap { color: #E4E6F3; }
.eko__kepala .legenda { flex: 1 1 380px; }
.eko__badan { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.eko__peta-wrap { flex: 1 1 440px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.eko__peta { position: relative; width: 100%; max-width: 540px; aspect-ratio: 520 / 610; }
.eko__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eko__ket { font-size: 14px; color: #E4E6F3; text-align: center; max-width: 520px; }
.appbtn {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px; background: none; border: 0; color: #FFFFFF; cursor: pointer; border-radius: 16px;
}
.appbtn--py { left: 50%; top: 31%; }
.appbtn--follo { left: 63.5%; top: 53%; }
.appbtn__nama { font-size: 13px; font-weight: 600; line-height: 1.2; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(6, 12, 32, .72); }
.mark { display: block; transition: transform .5s var(--ease), opacity .5s var(--ease), box-shadow .5s var(--ease); opacity: .62; }
.appbtn:hover .mark { opacity: 1; }
.appbtn[aria-pressed="true"] .mark { opacity: 1; transform: scale(1.08); }
.mark--py { width: 68px; height: 68px; border-radius: 18px; overflow: hidden; }
.mark--py img { width: 68px; height: 68px; }
/* .mark ditulis sesudah .kapsul-follo dan menimpa display: flex menjadi block, sehingga logo Follo
   menempel di kiri atas kapsul. Pemusatan ditegaskan lagi di sini. */
.mark--follo { width: 124px; height: 48px; display: flex; align-items: center; justify-content: center; }
.mark--follo img { height: 18px; }
.appbtn--py[aria-pressed="true"] .mark { box-shadow: 0 0 0 3px #FFFFFF, 0 0 40px 6px rgba(47, 163, 204, .7); }
.appbtn--follo[aria-pressed="true"] .mark { box-shadow: 0 0 0 3px #FFFFFF, 0 0 40px 6px rgba(150, 210, 55, .55); }
@media (max-width: 420px) { .mark--follo { width: 104px; height: 42px; } .mark--py, .mark--py img { width: 58px; height: 58px; } }

.eko__etalase { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tab-app { display: flex; gap: 8px; }
.tab {
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #FFFFFF; font-size: 14px; font-weight: 600;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.tab[aria-pressed="true"] { background: #FFFFFF; color: var(--malam); border-color: #FFFFFF; }
.etalase { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-kartu); border: 1px solid var(--k-line); background: var(--k-card); transition: background-color 1s var(--ease), border-color 1s var(--ease); }
.eko[data-app="py"] .etalase { --k-card: var(--app-preciyours); --k-line: rgba(124, 200, 255, .22); }
.eko[data-app="follo"] .etalase { --k-card: var(--app-follo); --k-line: rgba(150, 210, 55, .28); }
.kartu-app { display: flex; flex-direction: column; transition: opacity .28s var(--ease), transform .28s var(--ease); }
.kartu-app.keluar { opacity: 0; transform: translateY(10px); }
.kartu-app--py { --k-accent: #7CC8FF; --k-muted: #9FC3E2; --k-btn-bg: #FFFFFF; --k-btn-fg: #0A4F82; --k-line: rgba(124, 200, 255, .22); --k-grad: rgba(15, 37, 56, .9); }
.kartu-app--follo { --k-accent: #B8E07A; --k-muted: #AFC4E6; --k-btn-bg: #96D237; --k-btn-fg: #0B2350; --k-line: rgba(150, 210, 55, .28); --k-grad: rgba(14, 42, 92, .9); }
.kartu-app__foto { position: relative; height: 190px; overflow: hidden; }
.kartu-app__foto img { width: 100%; height: 100%; object-fit: cover; }
.kartu-app--py .kartu-app__foto img { object-position: center 55%; }
.kartu-app__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, var(--k-grad) 100%); }
.kartu-app__isi { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 480px) { .kartu-app__isi { padding: 22px 20px 26px; } }
.kartu-app__atas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.kartu-app__logo-py { height: 28px; width: auto; }
.kartu-app__logo-follo { height: 22px; width: auto; }
.kartu-app__status { padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); font-size: 12px; line-height: 1.4; color: #E6EDF7; }
.kartu-app__dim { color: var(--k-accent); }
.kartu-app__tagline { font-size: 30px; line-height: 1.15; color: #FFFFFF; }
.kartu-app__desk { color: #DCE5F0; font-size: 16px; }
.kartu-app__dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 24px; padding: 16px 0; border-top: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); font-size: 15px; color: #E6EDF7; }
.kartu-app__dua > div { display: flex; flex-direction: column; gap: 4px; }
.kartu-app__label { font-size: 11px; color: var(--k-muted); }
.centang { display: flex; flex-direction: column; gap: 9px; font-size: 15px; color: #E6EDF7; }
.centang li { position: relative; padding-left: 28px; }
.centang li::before {
  content: ""; position: absolute; left: 3px; top: 7px; width: 12px; height: 7px;
  border-left: 1.8px solid var(--k-accent); border-bottom: 1.8px solid var(--k-accent); transform: rotate(-45deg);
}
.kartu-app__tbl { align-self: flex-start; margin-top: 6px; min-height: 50px; padding: 0 22px; background: var(--k-btn-bg); color: var(--k-btn-fg); }
.kartu-app__catatan { margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--k-muted); }
.titik-kecil { width: 8px; height: 8px; border-radius: 50%; background: var(--k-accent); }

/* Filosofi singkat */
.filosofi { background: var(--gading); }
.filosofi__isi { padding-top: 120px; padding-bottom: 140px; display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.filosofi__teks { flex: 999 1 480px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.filosofi__teks .baris-tombol { margin-top: 10px; }
.filosofi__visual { flex: 1 1 400px; display: flex; justify-content: center; }
.filosofi__bingkai { position: relative; width: 100%; max-width: 440px; padding: 0 0 60px 40px; }
.filosofi__sosok { position: absolute; left: 0; bottom: 0; width: 190px; padding: 16px 16px 12px; border-radius: 24px; background: radial-gradient(120% 90% at 70% 0%, #2A2456 0%, #11153A 60%, #0B0F2A 100%); box-shadow: 0 30px 60px rgba(11, 15, 42, .35); }
.sosok { width: 100%; height: auto; overflow: visible; }
@media (max-width: 480px) { .filosofi__sosok { width: 150px; } .filosofi__bingkai { padding-left: 24px; } }

/* Ajakan penutup */
.ajakan { position: relative; overflow: hidden; color: #FFFFFF; background: #2A2456; }
.ajakan__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.ajakan__lapis { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 42, .78) 0%, rgba(11, 15, 42, .5) 45%, rgba(11, 15, 42, .05) 80%); }
.ajakan__isi { position: relative; padding-top: 150px; padding-bottom: 160px; display: flex; flex-direction: column; gap: 20px; }
.ajakan__isi em { color: var(--bintang-teks-gelap); }
.ajakan__teks { color: #E4E6F3; }
.ajakan__isi .baris-tombol { margin-top: 8px; }
.ajakan__tagline { margin-top: 28px; font-size: 22px; font-style: italic; color: var(--bintang-teks-gelap); }
@media (max-width: 720px) {
  .ajakan__lapis { background: linear-gradient(180deg, rgba(11, 15, 42, .82) 0%, rgba(11, 15, 42, .72) 100%); }
  .ajakan__isi { padding-top: 110px; padding-bottom: 120px; }
}

/* =========================================================================
   Tentang Kami
   ========================================================================= */
.subnav { position: sticky; top: var(--tinggi-bilah); z-index: 55; background: rgba(11, 15, 42, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.subnav__baris { max-width: 1200px; margin: 0 auto; padding: 0 14px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.subnav__baris::-webkit-scrollbar { display: none; }
.sn { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 12px 14px; color: var(--muted-gelap); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .3s var(--ease); }
.sn::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1.5px; background: var(--bintang); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.sn:hover, .sn.on { color: #FFFFFF; }
.sn.on::after { transform: scaleX(1); }
.sn:focus-visible { outline-offset: -3px; box-shadow: none; }
.subnav__jalur { height: 2px; background: rgba(255, 255, 255, .06); }
.subnav__kemajuan { height: 100%; background: linear-gradient(90deg, #E07A4F, #6C9BF2, #3BA597, #F0C25E); transform-origin: left center; transform: scaleX(var(--p, 0)); }

.t-tentang { position: relative; overflow: hidden; color: var(--fg-gelap); background: radial-gradient(120% 80% at 80% 0%, #2A2456 0%, #11153A 55%, #0B0F2A 100%); }
.t-tentang__isi { padding-top: 96px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 64px; }
.t-tentang__atas { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 56px; }
.t-tentang__teks { flex: 999 1 520px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.t-tentang__foto { flex: 1 1 340px; display: flex; justify-content: center; }
.t-tentang__foto .topeng { max-width: 460px; }
.data-pt { display: flex; flex-wrap: wrap; column-gap: 24px; border-top: 1px solid rgba(255, 255, 255, .14); }
.data-pt > div { flex: 1 1 160px; padding: 22px 24px 0 0; }
.data-pt > div:last-child { flex-basis: auto; }
.data-pt dt { font-size: 13px; color: #9DA2BF; }
.data-pt dd { margin-top: 4px; font-weight: 600; color: #FFFFFF; overflow-wrap: break-word; }

.t-visi { background: var(--malam); color: var(--fg-gelap); }
.t-visi__isi { padding-top: 96px; padding-bottom: 176px; display: flex; flex-wrap: wrap; gap: 56px 72px; }
.t-visi__kiri { flex: 1 1 520px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.t-visi__kanan { flex: 1 1 420px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t-visi__visi { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.2; }
.t-visi__visi em { color: var(--bintang-teks-gelap); }
.t-visi__misi-h { margin-bottom: 10px; }
.misi li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .12); color: #DCDFEE; }
.misi li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.misi__no { font-size: 28px; font-style: italic; line-height: 1; min-width: 16px; }
.misi__no--bara { color: var(--bara-teks-gelap); }
.misi__no--langit { color: var(--langit-teks-gelap); }
.misi__no--giok { color: var(--giok-teks-gelap); }
.misi__no--bintang { color: var(--bintang-teks-gelap); }

.t-insan { background: var(--gading); }
.t-insan__isi { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 72px; }
.t-kepala { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.t-kepala--lebar { max-width: 820px; }
.t-kepala--bawah { margin-bottom: 56px; }
.t-insan .judul-l { letter-spacing: -0.01em; }
.tiga-kata { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 48px; border-top: 1px solid var(--line-pasir); padding-top: 48px; }
.tiga-kata > div { display: flex; flex-direction: column; gap: 10px; }
.tiga-kata__kata { font-size: 64px; line-height: 1; font-weight: 300; }
.t-insan__baris { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.t-insan__teks { flex: 999 1 480px; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.t-insan__foto { flex: 1 1 340px; display: flex; justify-content: center; }
.t-insan__foto .topeng { max-width: 420px; }
.t-insan__fondasi { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; border-top: 1px solid var(--line-pasir); padding-top: 56px; }
.t-insan__bangunan { flex: 1 1 300px; display: flex; justify-content: center; }
.t-insan__bangunan svg { width: 340px; overflow: visible; }
.t-insan__fondasi-teks { flex: 999 1 460px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.t-insan__fondasi-teks .judul-s-besar { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; }
.tingkat { margin-top: 6px; }
.tingkat li { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-pasir); color: var(--body); }
.tingkat li:last-child { border-bottom: 1px solid var(--line-pasir); }
.tingkat strong { color: var(--tinta); }
.tingkat__no { font-size: 24px; font-style: italic; line-height: 1.1; min-width: 20px; color: var(--tinta); }
.tingkat__no--langit { color: var(--langit-teks); }
.tingkat__no--emas { color: var(--bintang-teks); }
.sumber { font-size: 14px; color: var(--muted); max-width: 560px; }
.sumber--gelap { color: #A4A9C6; }

.t-anchor { position: relative; color: var(--fg-gelap); background: linear-gradient(#F7F4EE 0, #1A1E46 120px, #11153A 100%); }
.t-anchor__isi { padding-top: 200px; padding-bottom: 176px; display: flex; flex-direction: column; gap: 56px; }
.t-anchor__baris { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.t-anchor__lingkar { flex: 1 1 320px; display: flex; justify-content: center; }
.t-anchor__lingkar svg { width: 340px; }
.cincin { cursor: pointer; transition: fill-opacity .7s var(--ease); }
.cincin--materi { fill-opacity: .12; }
.cincin--diri, .cincin--sesama { fill-opacity: .14; }
.cincin--kebajikan { fill-opacity: .55; }
.t-anchor[data-anchor-pilih="materi"] .cincin--materi { fill-opacity: .5; }
.t-anchor[data-anchor-pilih="diri"] .cincin--diri { fill-opacity: .6; }
.t-anchor[data-anchor-pilih="sesama"] .cincin--sesama { fill-opacity: .6; }
.t-anchor[data-anchor-pilih="kebajikan"] .cincin--kebajikan { fill-opacity: 1; }
.cincin:hover { fill-opacity: .4; }
.t-anchor__pilih { flex: 999 1 480px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.anchor-tombol { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.chip {
  text-align: left; min-height: 64px; padding: 14px 18px; border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); color: var(--fg-gelap); font-size: 15px;
  display: flex; flex-direction: column; gap: 2px; line-height: 1.45;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--bintang); color: var(--tinta); border-color: var(--bintang); }
.chip__label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.anchor-isi { padding: 26px 28px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.anchor-isi__grup { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 28px; color: #E4E6F3; }
.anchor-isi__grup > div { display: flex; flex-direction: column; gap: 6px; }
.t-anchor__bawah { display: flex; flex-wrap: wrap; gap: 32px 56px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .12); }
.t-anchor__bawah > div { flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.t-anchor__kutip { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; }
.t-anchor .judul-m { line-height: 1.12; }
.t-anchor .judul-m em { color: var(--bintang-teks-gelap); }

.t-kapasitas { background: linear-gradient(#F7F4EE, #EFEADF); }
.t-kapasitas__isi { padding-top: 120px; padding-bottom: 120px; }
.t-kapasitas__baris { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.t-kapasitas__lengket { flex: 1 1 380px; position: sticky; top: 150px; }
.t-kapasitas__langkah { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; }
.kartu-sosok { position: relative; border-radius: 32px; overflow: hidden; padding: 28px; color: var(--fg-gelap); background: radial-gradient(120% 90% at 70% 0%, #2A2456 0%, #11153A 55%, #0B0F2A 100%); }
.kartu-sosok svg { width: 100%; height: auto; max-height: 520px; overflow: visible; }
.node { transition: opacity .7s var(--ease); }
.kartu-sosok[data-dim="0"] .node:not(.node--intel),
.kartu-sosok[data-dim="1"] .node:not(.node--skill),
.kartu-sosok[data-dim="2"] .node:not(.node--prof),
.kartu-sosok[data-dim="3"] .node:not(.node--makna) { opacity: .22; }
.kartu-sosok__label { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.kartu-sosok__judul { font-size: 26px; font-style: italic; }
.kartu-sosok__dim { color: var(--bintang-teks-gelap); }
.kartu-sosok[data-dim="0"] .kartu-sosok__dim { color: var(--langit-teks-gelap); }
.kartu-sosok[data-dim="1"] .kartu-sosok__dim { color: var(--bara-teks-gelap); }
.kartu-sosok[data-dim="2"] .kartu-sosok__dim { color: var(--giok-teks-gelap); }
.langkah { min-height: 440px; display: flex; flex-direction: column; justify-content: center; gap: 14px; border-top: 1px solid var(--line-pasir); padding: 32px 0; }
.langkah--akhir { min-height: 400px; gap: 18px; }
.langkah__kata { font-size: 15px; color: var(--muted); }
.langkah em { font-style: italic; }
@media (max-width: 900px) {
  .t-kapasitas__lengket { position: relative; top: auto; }
  .langkah, .langkah--akhir { min-height: 0; padding: 40px 0; }
}

.t-manifesto { position: relative; overflow: hidden; color: #2A1E2E; background: linear-gradient(#EFEADF 0, #F6D3A6 300px, #F7F4EE 100%); }
.matahari { position: absolute; left: 50%; top: 80px; width: 560px; height: 560px; margin-left: -280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 246, 221, .95), rgba(255, 226, 176, .55) 45%, rgba(255, 226, 176, 0) 100%); }
.gerak .matahari { transform: translateY(40%); transition: transform 2.4s var(--ease); }
.gerak .matahari.masuk { transform: none; }
.t-manifesto__isi { position: relative; max-width: 960px; margin: 0 auto; padding: 180px 28px 100px; display: flex; flex-direction: column; gap: 22px; text-align: center; align-items: center; }
.t-manifesto__eyebrow { margin-bottom: 18px; color: #6B3B48; }
.t-manifesto__judul { font-size: clamp(30px, 4vw, 48px); line-height: 1.25; }
.t-manifesto__baris { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; }
.t-manifesto__miring { font-size: clamp(24px, 2.9vw, 34px); line-height: 1.4; font-style: italic; max-width: 760px; }
.t-manifesto__tiga { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; font-size: 18px; color: #4A3446; }
.t-manifesto__tiga .tebal { color: #6B3B48; }
.t-manifesto__tagline { margin-top: 48px; font-size: clamp(48px, 7vw, 88px); line-height: 1; letter-spacing: -0.02em; }
.t-manifesto__tagline em { font-style: italic; }
.t-manifesto .baris-tombol { margin-top: 24px; }
.t-manifesto__foto { position: relative; height: clamp(280px, 34vw, 500px); margin-top: -40px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%); mask-image: linear-gradient(to bottom, transparent 0, #000 38%); }
.t-manifesto__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }

/* =========================================================================
   PreciYours (warna aksen aplikasi, bilah dan kaki tetap VIPA)
   ========================================================================= */
body.hal-aplikasi { background: #F2F7FC; }
.hal-aplikasi main { background: #FFFFFF; color: #12151A; font-size: 16px; line-height: 1.6; }
.hal-aplikasi main a:not(.py-dok):not(.tbl) { color: #0B6DB4; }
.py-judul, .py-siapa__judul, .py-janji h2, .py-dokumen__judul { font-family: var(--serif); font-weight: 500; }
.py-pembuka { background: #F2F7FC; border-bottom: 1px solid #D5E3EF; }
.py-pembuka__isi { padding-top: 24px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 56px; }
.remah { font-size: 14px; color: #4C6072; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hal-aplikasi .remah a { color: #4C6072; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.py-pembuka__baris { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.py-pembuka__teks { flex: 999 1 480px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.py-pembuka__nama { display: flex; align-items: center; gap: 16px; }
.py-pembuka__ikon { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.py-judul { font-size: 48px; line-height: 1.1; color: #0C3F4B; }
.py-pembuka__lead { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.35; max-width: 620px; color: #0E2336; }
.py-pembuka__ket { font-size: 17px; color: #4C6072; max-width: 600px; }
.py-pembuka__unduh { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.py-status { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); background: #DCEBF7; color: #0A4F82; font-size: 15px; font-weight: 600; }
.py-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0B6DB4; }
.hal-aplikasi main a.tbl--py { background: #0A4F82; color: #FFFFFF; }
.py-pembuka__android { font-size: 14px; color: #4C6072; }
.py-pembuka__ponsel { flex: 1 1 260px; display: flex; justify-content: center; }
.py-ponsel { width: 262px; height: 548px; border-radius: 38px; border: 11px solid #0E2336; background: #F2F7FC; overflow: hidden; box-shadow: 0 40px 80px rgba(14, 35, 54, .25); }
.py-ponsel img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.py-siapa { position: relative; overflow: hidden; background: #1E1424; color: #FBEFE6; }
.py-siapa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.py-siapa__lapis { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 20, 36, 0) 25%, rgba(30, 20, 36, .7) 58%, rgba(30, 20, 36, .9) 100%); }
.py-siapa__isi { position: relative; padding-top: 110px; padding-bottom: 110px; display: flex; justify-content: flex-end; }
.py-siapa__teks { max-width: 460px; display: flex; flex-direction: column; gap: 16px; color: #F3DCCF; }
.py-siapa__judul { font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; color: #FBEFE6; }
.py-siapa__judul em { font-style: italic; color: #FFE2B0; }
@media (max-width: 720px) {
  .py-siapa__lapis { background: linear-gradient(180deg, rgba(30, 20, 36, .35) 0%, rgba(30, 20, 36, .85) 55%, rgba(30, 20, 36, .95) 100%); }
  .py-siapa__isi { padding-top: 220px; padding-bottom: 72px; }
}

.py-janji { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.py-janji__kartu { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius-md); background: #FFFFFF; border: 1px solid #D5E3EF; }
.py-janji h2 { font-size: 20px; line-height: 1.3; }
.py-janji p { color: #4C6072; }
.py-dokumen { border-top: 1px solid #E3E6EB; }
.py-dokumen__isi { padding-top: 64px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 24px; }
.py-dokumen__judul { font-size: 28px; line-height: 1.2; }
.py-dokumen__daftar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.py-dok { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: 14px; border: 1px solid #D5E3EF; background: #F2F7FC; text-decoration: none; color: #0E2336; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.py-dok:hover { border-color: #0B6DB4; transform: translateY(-2px); }
.py-dok__judul { font-weight: 700; }
.py-dok--dua { gap: 0; padding-top: 12px; padding-bottom: 12px; }
.py-dok--dua:hover { transform: none; border-color: #D5E3EF; }
.hal-aplikasi main .py-dok__tautan { color: #0E2336; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; text-decoration: none; }
.hal-aplikasi main .py-dok__tautan:hover { text-decoration: underline; text-underline-offset: 4px; }
.hal-aplikasi main .py-dok__en { font-size: 14px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.py-dok__ket { font-size: 14px; color: #4C6072; overflow-wrap: anywhere; }
.hal-aplikasi :focus-visible { outline-color: #0B6DB4; box-shadow: none; }
.hal-aplikasi .bilah :focus-visible { outline-color: var(--indigo); }
.hal-aplikasi .kaki :focus-visible { outline-color: var(--focus); }

/* =========================================================================
   Halaman kebijakan PreciYours (bilah dan kaki VIPA, isi beraksen PreciYours)
   ========================================================================= */
.kb { background: #FFFFFF; }
.kb__wadah { padding-top: 20px; padding-bottom: 96px; }
.kb__atas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding-bottom: 20px; border-bottom: 1px solid #E3E6EB; }
.hal-aplikasi main .kb__kembali { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; text-decoration: none; }
.hal-aplikasi main .kb__kembali:hover { text-decoration: underline; text-underline-offset: 4px; }
.kb__bahasa { display: flex; border: 1px solid #C9D6E2; border-radius: var(--radius-sm); overflow: hidden; font-size: 15px; font-weight: 600; }
.hal-aplikasi main .kb__bahasa a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; text-decoration: none; color: #0E2336; background: #FFFFFF; }
.hal-aplikasi main .kb__bahasa a + a { border-left: 1px solid #C9D6E2; }
.hal-aplikasi main .kb__bahasa a[aria-current="page"] { background: #0B6DB4; color: #FFFFFF; }
.hal-aplikasi main .kb__bahasa a:not([aria-current]):hover { background: #F2F7FC; }
.hal-aplikasi main .kb__bahasa a:focus-visible { outline-offset: -4px; outline-color: #0E2336; }
.kb__badan { display: flex; flex-wrap: wrap; gap: 32px 56px; margin-top: 36px; align-items: flex-start; }
.kb__samping { flex: 1 1 240px; position: sticky; top: calc(var(--tinggi-bilah) + 20px); max-height: calc(100vh - var(--tinggi-bilah) - 40px); overflow-y: auto; }
.kb-daftar { padding: 14px 18px; border-radius: 14px; background: #F5F6F8; font-size: 15px; line-height: 1.4; }
.kb-daftar summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4C6072; }
.kb-daftar summary::-webkit-details-marker { display: none; }
.kb-daftar summary::after { content: "+"; font-size: 20px; font-weight: 500; letter-spacing: 0; color: #0B6DB4; }
.kb-daftar[open] summary::after { content: "\2212"; }
.kb-daftar ul { margin: 0; padding: 0; list-style: none; }
.hal-aplikasi main .kb-daftar a { min-height: 44px; display: flex; align-items: center; padding: 4px 0; text-decoration: none; }
.hal-aplikasi main .kb-daftar a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kb__isi { flex: 999 1 560px; min-width: 0; max-width: 72ch; font-size: 17px; line-height: 1.7; color: #12151A; }
.kb__isi h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 44px); line-height: 1.15; color: #0C3F4B; margin: 0 0 14px; }
.kb__isi h1 + p { color: #4C6072; }
.kb__isi h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.3; color: #0E2336; margin: 44px 0 12px; scroll-margin-top: calc(var(--tinggi-bilah) + 16px); }
.kb__isi p { margin: 0 0 14px; }
.kb__isi ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.kb__isi ol { margin: 0 0 14px; padding-left: 24px; list-style: decimal; }
.kb__isi li { margin-bottom: 8px; padding-left: 2px; }
.kb__isi strong { font-weight: 600; }
/* Alamat web panjang (misalnya tautan bantuan Google Play) boleh patah di mana saja agar halaman tidak melebar di ponsel. */
.kb__isi a { overflow-wrap: anywhere; }
.kb__isi code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.kb__isi #ringkasnya + ul, .kb__isi #in-short + ul { padding: 20px 24px 12px 44px; border-radius: var(--radius-md); background: #F2F7FC; border: 1px solid #D5E3EF; }
.tabel-gulir { overflow-x: auto; margin: 0 0 18px; border: 1px solid #E3E6EB; border-radius: 12px; -webkit-overflow-scrolling: touch; }
.hal-aplikasi .tabel-gulir:focus-visible { outline: 2px solid #0B6DB4; outline-offset: 2px; }
.kb__isi table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 520px; }
.kb__isi table:has(th:nth-child(4)) { min-width: 780px; }
.kb__isi th { text-align: left; font-weight: 600; background: #F2F7FC; padding: 10px 12px; border-bottom: 1px solid #D5E3EF; vertical-align: top; }
.kb__isi td { padding: 10px 12px; border-bottom: 1px solid #E3E6EB; vertical-align: top; }
.kb__isi tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) {
  .kb__samping { position: static; max-height: none; flex-basis: 100%; }
  .kb__badan { margin-top: 24px; }
}

/* =========================================================================
   Kontak dan 404
   ========================================================================= */
.k-pembuka { color: var(--fg-gelap); background: radial-gradient(120% 90% at 80% 0%, #2A2456 0%, #11153A 55%, #0B0F2A 100%); }
.k-pembuka__isi { padding-top: 88px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 18px; }
.hilang .k-pembuka__isi { padding-bottom: 140px; min-height: 60vh; justify-content: center; }
.hilang .baris-tombol { margin-top: 12px; }
.k-isi { background: var(--gading); }
.k-jalur { padding-top: 72px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.k-kartu { padding: 32px; border-radius: var(--radius-xl); background: #FFFFFF; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 480px) { .k-kartu { padding: 26px 22px; } }
.k-kartu .tbl { align-self: flex-start; min-height: 50px; padding: 0 22px; max-width: 100%; overflow-wrap: anywhere; }
.k-kartu--gelap { background: var(--senja); color: var(--fg-gelap); border-color: var(--senja); }
.k-kartu__judul { font-size: 30px; line-height: 1.2; }
.k-kartu__kecil { font-size: 15px; color: var(--muted); }
.k-kartu__sertakan { margin-top: 6px; padding-top: 16px; border-top: 1px solid #EDE6D8; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--body); }
.k-kartu__sertakan .tebal { color: var(--tinta); }
.k-kartu__sertakan .redup { color: var(--muted); }
.k-kartu__data { margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.k-kartu__data dt { color: #9DA2BF; font-size: 13px; }
.k-kartu__data dd { margin-top: 2px; color: #FFFFFF; font-weight: 600; }
.k-aplikasi { padding-bottom: 110px; display: flex; flex-direction: column; gap: 20px; }
.k-aplikasi__judul { font-size: 30px; }
.k-aplikasi__daftar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.k-app { padding: 24px 26px; border-radius: var(--radius-lg); background: #FFFFFF; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--body); }
.k-app__kepala { display: flex; align-items: center; gap: 12px; }
.k-app__kepala h3 { font-size: 19px; color: var(--tinta); }
.k-app__ikon { width: 40px; height: 40px; border-radius: 11px; }
.k-app__tautan { display: flex; flex-wrap: wrap; gap: 0 18px; color: #0A4F82; font-weight: 600; }
.k-app__tautan .lnk { min-height: 44px; display: inline-flex; align-items: center; background-position: 0 75%; }

/* =========================================================================
   Kurangi gerak: semua animasi, transisi, dan gulir halus dimatikan
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fadeup, .ignite { opacity: 1; }
  .gerak [data-r], .gerak .matahari { opacity: 1 !important; transform: none !important; }
  .pembuka__bintang, .pembuka__visual { transform: none !important; }
  .tbl:hover, .tbl:hover .panah, .chipapp:hover, .chip:hover, .py-dok:hover { transform: none; }
}