/* CloudID Studio · site.css · "Langit Malam" v4 · aturan: docs/design-system/cloudid-studio/MASTER.md */

/* ---------- dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--malam-900);color:var(--krem);font:400 var(--f-teks)/1.65 var(--font-teks);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit}
p{text-wrap:pretty}
main:focus{outline:none}
::selection{background:var(--langit);color:var(--malam-900)}

a{color:var(--tautan);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px}

.wadah{max-width:var(--wadah);margin-inline:auto;padding-inline:var(--gutter)}
.bagian{padding-block:var(--jarak-section);scroll-margin-top:var(--tinggi-kepala)}
.bagian--rapat{padding-top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none !important}
.terkunci{overflow:hidden}

.ikon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- tipografi ---------- */
.h1{font:600 var(--f-h1)/.98 var(--font-display);letter-spacing:-.015em;color:var(--teks)}
.h2{font:600 var(--f-h2)/1.02 var(--font-display);letter-spacing:-.01em;text-wrap:balance;color:var(--teks)}
h3{font:600 var(--f-h3)/1.25 var(--font-display);letter-spacing:.005em;color:var(--teks)}
.lead{font-size:var(--f-lead);line-height:1.6;color:var(--teks-2);max-width:46ch}

/* label: meniru "— STUDIO —" di logo */
.label{display:inline-flex;align-items:center;gap:12px;font:700 var(--f-label)/1.2 var(--font-teks);letter-spacing:.24em;text-transform:uppercase;color:var(--aksen)}
.label::before,.label::after{content:"";width:26px;height:4px;flex:none;border-radius:4px;background:currentColor}
.label::after{margin-left:-.24em}
@media (max-width:480px){.label{letter-spacing:.14em;gap:10px}.label::after{display:none}}

/* ---------- tombol ---------- */
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border:2px solid transparent;border-radius:var(--r-tombol);background:var(--tombol-bg);color:var(--tombol-teks);font:700 1rem/1.2 var(--font-teks);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--cepat) ease-out,border-color var(--cepat) ease-out,translate var(--cepat) ease-out,scale var(--cepat) ease-out}
.tombol:hover{background:var(--tombol-bg-hover);translate:0 -1px}
.tombol:active{scale:.97;translate:0 0}
.tombol--garis{background:transparent;border-color:var(--tombol2-garis);color:var(--tombol2-teks)}
.tombol--garis:hover{background:var(--tombol2-hover)}
.tombol--kecil{min-height:44px;padding:10px 18px;font-size:.9375rem}
.tombol .ikon{width:20px;height:20px}
.aksi{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ---------- lewati ---------- */
.lewati{position:absolute;left:var(--s-4);top:-200px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--langit);color:var(--malam-900);font-weight:700}
.lewati:focus{top:var(--s-3)}

/* ---------- header ---------- */
.kepala{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--garis)}
.kepala-isi{position:relative;display:flex;align-items:center;gap:var(--s-4);min-height:var(--tinggi-kepala)}
.merek{display:inline-flex;align-items:center;gap:10px;margin-right:auto;min-height:44px;color:var(--teks);text-decoration:none}
.merek-maskot{display:block;width:56px;height:auto}
.merek-nama{font:600 1.375rem/1 var(--font-display);letter-spacing:.01em;white-space:nowrap}
.merek-id{color:var(--langit)}
.merek-studio{font-weight:500;color:var(--krem-2)}
.merek:hover .merek-nama{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.nav-lebar{display:none}
.nav-lebar ul{display:flex;gap:var(--s-1)}
.nav-lebar a,.menu a{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;border-radius:var(--r-tombol);color:var(--teks);font-weight:600;font-size:.9375rem;text-decoration:none;transition:background-color var(--cepat) ease-out,color var(--cepat) ease-out}
.nav-lebar a:hover{background:rgba(86,183,247,.12);color:var(--langit-terang)}
.nav-lebar a[aria-current="true"]{color:var(--langit);background:rgba(86,183,247,.12)}
.kepala-cta{display:none}
.bahasa{display:none;padding:3px;border:1px solid var(--garis-kuat);border-radius:var(--r-tombol)}
.bahasa a{display:inline-grid;place-items:center;min-width:44px;min-height:40px;padding:0 10px;border-radius:var(--r-tombol);color:var(--teks);font:700 .8125rem/1 var(--font-teks);letter-spacing:.06em;text-decoration:none;transition:background-color var(--cepat) ease-out,color var(--cepat) ease-out}
.bahasa a[aria-current="page"]{background:var(--langit);color:var(--malam-900)}
.bahasa a:not([aria-current]):hover{background:rgba(86,183,247,.12);color:var(--langit-terang)}
.menu-bahasa{display:flex;gap:var(--s-2);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--garis)}
.menu-bahasa a{width:auto;flex:1;justify-content:center;padding-inline:10px;border:1px solid var(--garis-kuat);font-size:.9375rem;white-space:nowrap}
.menu-bahasa a[aria-current="page"]{background:var(--langit);color:var(--malam-900);border-color:var(--langit)}

.menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--garis-kuat);border-radius:var(--r-tombol);color:var(--teks);font-weight:700;font-size:.9375rem;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary .ikon{width:20px;height:20px}
.menu[open] summary{background:var(--langit);color:var(--malam-900);border-color:var(--langit)}
.menu nav{position:absolute;left:0;right:0;top:calc(100% + 1px);padding:var(--s-2) var(--gutter) var(--s-5);background:var(--malam-900);border-bottom:1px solid var(--garis)}
.menu ul{display:grid;gap:2px}
.menu a{width:100%;font-size:1.0625rem;border-radius:14px}
.menu a:hover{background:rgba(86,183,247,.12)}

@media (min-width:880px){
  .nav-lebar{display:block}
  .bahasa{display:inline-flex}
  .kepala-cta{display:inline-flex}
  .menu{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:clip;padding-top:clamp(2.5rem,1.5rem + 4vw,5rem)}
.hero-langit{position:absolute;inset:0;pointer-events:none}
.bintang{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--krem);opacity:.55}
.bintang:nth-child(1){left:6%;top:14%}
.bintang:nth-child(2){left:18%;top:72%;width:2px;height:2px;opacity:.4}
.bintang:nth-child(3){left:44%;top:9%;width:4px;height:4px;opacity:.35}
.bintang:nth-child(4){left:57%;top:84%;width:2px;height:2px}
.bintang:nth-child(5){left:71%;top:12%}
.bintang:nth-child(6){left:88%;top:30%;width:2px;height:2px;opacity:.45}
.bintang:nth-child(7){left:93%;top:78%;width:4px;height:4px;opacity:.3}
.bintang:nth-child(8){left:34%;top:48%;width:2px;height:2px;opacity:.3}
.hero-grid{position:relative;display:grid;gap:var(--s-7);align-items:center}
.hero-teks .h1{margin-top:var(--s-5)}
.hero-teks .lead{margin-top:var(--s-5)}
.hero-teks .aksi{margin-top:var(--s-6)}
.hero-logo{justify-self:center;width:min(100%,560px);order:-1}
@media (max-width:959px){.hero-logo{width:min(86vw,400px)}}
@media (max-width:519px){.hero .aksi{flex-direction:column}.hero .aksi .tombol{width:100%}}
@media (min-width:960px){
  .hero{min-height:min(880px,calc(100svh - var(--tinggi-kepala)));display:grid;align-items:center}
  .hero-grid{grid-template-columns:1.2fr .8fr;column-gap:var(--s-8)}
  .hero-logo{order:0}
}

/* judul yang "mengembang" di dekat kursor (huruf dipecah oleh JS) */
.h1 .baris{display:block}
.h1 .kata{display:inline-block;white-space:nowrap}
.h1 .huruf{display:inline-block;font-variation-settings:"wdth" var(--w,100);font-weight:var(--b,600);transform:translateY(var(--y,0))}

/* ---------- panggung logo (21 lapisan, posisi di logo.css) ---------- */
.logo-bingkai{position:relative}
.logo-bulan{position:absolute;left:14%;top:-2%;width:72%;aspect-ratio:1;border-radius:50%;background:var(--malam-800)}
.logo-bulan::after{content:"";position:absolute;inset:-9%;border-radius:50%;border:1px dashed rgba(141,208,251,.22)}
.logo-panggung{position:relative;width:100%}
.lapis,.lapis-isi{position:absolute;inset:0}
.lapis{translate:calc(var(--px,0) * var(--dalam,0) * 1px) calc(var(--py,0) * var(--dalam,0) * 1px);transition:translate 700ms var(--ease-keluar)}
.lapis--cincin{--dalam:10}
.lapis--awan{--dalam:6}
.lapis--piksel{--dalam:18}
.lapis--nama{--dalam:3}
.lapis--studio{--dalam:2}
.lapis--awan .lapis-isi{transform-origin:50% 60%}
.lapis--cincin .lapis-isi{transform-origin:50% 45%}
.ly{position:absolute;display:block;height:auto;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.logo-sapa{position:absolute;left:12%;top:2%;width:76%;height:58%;padding:0;border:0;border-radius:45%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.logo-sapa:focus-visible{outline-offset:6px}

/* intro: urutannya sama dengan intro "CloudID Studio mempersembahkan" di game */
.putar .ly-piksel-1{animation:pop 420ms var(--ease-pantul) .15s both}
.putar .ly-piksel-2{animation:pop 420ms var(--ease-pantul) .25s both}
.putar .ly-piksel-3{animation:pop 420ms var(--ease-pantul) .35s both}
.putar .ly-piksel-4{animation:pop 420ms var(--ease-pantul) .45s both}
.putar .ly-awan{animation:letup 640ms var(--ease-pantul) .5s both;transform-origin:50% 85%}
.putar .ly-cincin{animation:sapu 620ms var(--ease-keluar) .85s both}
.putar .ly-nama-1{animation:jatuh 520ms var(--ease-pantul) 1.10s both,kilau 700ms ease-out 2.45s}
.putar .ly-nama-2{animation:jatuh 520ms var(--ease-pantul) 1.17s both,kilau 700ms ease-out 2.50s}
.putar .ly-nama-3{animation:jatuh 520ms var(--ease-pantul) 1.24s both,kilau 700ms ease-out 2.55s}
.putar .ly-nama-4{animation:jatuh 520ms var(--ease-pantul) 1.31s both,kilau 700ms ease-out 2.60s}
.putar .ly-nama-5{animation:jatuh 520ms var(--ease-pantul) 1.38s both,kilau 700ms ease-out 2.65s}
.putar .ly-nama-6{animation:jatuh 520ms var(--ease-pantul) 1.45s both,kilau 700ms ease-out 2.70s}
.putar .ly-nama-7{animation:jatuh 520ms var(--ease-pantul) 1.52s both,kilau 700ms ease-out 2.75s}
.putar .ly-studio-garis-kiri{animation:garis 440ms var(--ease-keluar) 1.75s both;transform-origin:100% 50%}
.putar .ly-studio-garis-kanan{animation:garis 440ms var(--ease-keluar) 1.75s both;transform-origin:0 50%}
.putar .ly-studio-1{animation:naik 380ms var(--ease-keluar) 1.80s both}
.putar .ly-studio-2{animation:naik 380ms var(--ease-keluar) 1.85s both}
.putar .ly-studio-3{animation:naik 380ms var(--ease-keluar) 1.90s both}
.putar .ly-studio-4{animation:naik 380ms var(--ease-keluar) 1.95s both}
.putar .ly-studio-5{animation:naik 380ms var(--ease-keluar) 2.00s both}
.putar .ly-studio-6{animation:naik 380ms var(--ease-keluar) 2.05s both}
/* setelah intro: melayang pelan, 4 kali bolak-balik lalu berhenti */
.putar .lapis--cincin,.putar .lapis--awan{animation:melayang 5s ease-in-out 3.2s 4 alternate both}
.putar .lapis--piksel{animation:melayang-jauh 5s ease-in-out 3.4s 4 alternate both}

/* sapa: awan memantul, cincin bergoyang, piksel melompat */
.boop .lapis--awan .lapis-isi{animation:boop 560ms var(--ease-pantul)}
.boop .lapis--cincin .lapis-isi{animation:boop-cincin 560ms var(--ease-pantul)}
.boop .lapis--piksel .lapis-isi{animation:boop-piksel 620ms var(--ease-pantul)}

@keyframes pop{from{opacity:0;transform:scale(0) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes letup{0%{opacity:0;transform:scale(.35) translateY(12%)}55%{opacity:1}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes sapu{0%{opacity:0;clip-path:inset(0 50% 0 50%)}20%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes jatuh{from{opacity:0;transform:translateY(-70%)}to{opacity:1;transform:translateY(0)}}
@keyframes naik{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:translateY(0)}}
@keyframes garis{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kilau{0%,100%{filter:brightness(1)}40%{filter:brightness(1.7)}}
@keyframes melayang{from{transform:translateY(0)}to{transform:translateY(-2.2%)}}
@keyframes melayang-jauh{from{transform:translateY(0)}to{transform:translateY(-3.6%)}}
@keyframes boop{0%{transform:scale(1)}20%{transform:scale(1.08,.9)}45%{transform:scale(.95,1.07)}70%{transform:scale(1.02,.98)}100%{transform:scale(1)}}
@keyframes boop-cincin{0%{transform:none}30%{transform:rotate(-4deg) scale(1.03)}65%{transform:rotate(2deg)}100%{transform:none}}
@keyframes boop-piksel{0%{transform:none}35%{transform:translate(2%,-6%)}100%{transform:none}}

/* ---------- tentang ---------- */
.tentang-grid{display:grid;gap:var(--s-5)}
.tentang-kepala .h2{margin-top:var(--s-4)}
.tentang-isi p + p{margin-top:var(--s-4)}
.tentang-isi p:not(.lead){color:var(--teks-2);max-width:var(--baris)}
.nilai{display:grid;gap:var(--s-4);margin-top:var(--s-8)}
.kartu{height:100%;padding:28px;border:1px solid var(--kartu-garis);border-radius:var(--r-kartu);background:var(--kartu);transition:translate var(--sedang) var(--ease-keluar),border-color var(--sedang) ease-out}
.kartu h3{margin-top:var(--s-5)}
.kartu p{margin-top:var(--s-2);color:var(--teks-2)}
.kartu-ikon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--ikon-bg);color:var(--ikon)}
@media (hover:hover){.kartu:hover{translate:0 -4px;border-color:var(--garis-kuat)}}
@media (min-width:768px){.nilai{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.tentang-grid{grid-template-columns:1fr 1fr;column-gap:var(--s-8);align-items:end}}

/* ---------- game: Cuma Umbi ---------- */
.game-kepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5)}
.game-status{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--r-tombol);background:rgba(86,183,247,.12);color:var(--langit);font:700 .875rem/1.2 var(--font-teks)}
.titik-status{width:8px;height:8px;flex:none;border-radius:50%;background:var(--langit)}
.pameran{position:relative;margin:var(--s-5) 0 clamp(56px,7vw,96px)}
.pameran-gambar{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;border-radius:var(--r-besar);background:var(--malam-700)}
.pameran-judul{position:absolute;left:clamp(16px,3vw,44px);bottom:clamp(-72px,-5vw,-32px);width:min(360px,46%);margin:0;line-height:0}
.pameran-judul img{display:block;width:100%;height:auto}
@media (min-width:768px){.pameran-gambar{aspect-ratio:2 / 1;object-position:50% 58%}}
.game-isi{display:grid;gap:var(--s-7)}
.game-cerita p + p{margin-top:var(--s-4)}
.game-cerita p:not(.lead){color:var(--teks-2);max-width:var(--baris)}
.game-cerita .lead{color:var(--teks);max-width:none}
.fakta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6)}
.fakta li{padding:8px 14px;border:1px solid var(--garis);border-radius:var(--r-tombol);background:rgba(86,183,247,.06);font:600 .875rem/1.3 var(--font-teks);color:var(--teks)}
.fitur{display:grid;gap:var(--s-3);align-content:start}
.fitur li{padding:22px 24px;border:1px solid var(--kartu-garis);border-radius:var(--r-kartu);background:var(--kartu)}
.fitur h3{font-size:1.125rem}
.fitur p{margin-top:var(--s-2);font-size:.9375rem;line-height:1.6;color:var(--teks-2)}
.galeri-kepala{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-5);margin-top:var(--s-8)}
.galeri{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.galeri-item{display:block;overflow:hidden;border:1px solid var(--garis);border-radius:16px;background:var(--malam-900);cursor:zoom-in}
.galeri-item img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;transition:scale var(--lambat) var(--ease-keluar)}
@media (hover:hover){.galeri-item:hover img{scale:1.045}}
@media (min-width:640px){.fitur{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .game-isi{grid-template-columns:5fr 7fr;column-gap:var(--s-8)}
  .galeri{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
}

/* lightbox galeri (dibuat JS; tanpa JS, tiap gambar tetap tautan biasa) */
.lihat{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:var(--s-8) var(--gutter) var(--s-6);border:0;background:rgba(5,14,34,.95);color:var(--krem)}
.lihat[open]{display:grid;place-items:center}
.lihat::backdrop{background:transparent}
.lihat-isi{display:grid;justify-items:center;gap:var(--s-3);margin:0;max-width:min(1280px,100%)}
.lihat-gambar{display:block;max-width:100%;max-height:calc(100svh - 200px);width:auto;height:auto;border-radius:16px;background:var(--malam-800)}
.lihat-keterangan{max-width:70ch;text-align:center;color:var(--krem-2);font-size:.9375rem;line-height:1.5}
.lihat-posisi{font:700 var(--f-label)/1 var(--font-teks);letter-spacing:.16em;text-transform:uppercase;color:var(--langit)}
.lihat-tombol{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(141,208,251,.35);border-radius:50%;background:rgba(7,20,48,.8);color:var(--krem);cursor:pointer;transition:background-color var(--cepat) ease-out,border-color var(--cepat) ease-out}
.lihat-tombol:hover{background:var(--malam-600);border-color:var(--langit)}
.lihat-tutup{top:var(--s-4);right:var(--s-4)}
.lihat-sebelum{left:var(--s-4);top:50%;translate:0 -50%}
.lihat-sesudah{right:var(--s-4);top:50%;translate:0 -50%}
@media (max-width:639px){.lihat-sebelum,.lihat-sesudah{top:auto;bottom:var(--s-4);translate:none}}
@media (prefers-reduced-motion:no-preference){.lihat[open] .lihat-isi{animation:lihat-masuk 220ms var(--ease-keluar)}}
@keyframes lihat-masuk{from{opacity:0;scale:.96}to{opacity:1;scale:1}}

/* ---------- kontak ---------- */
.kontak-satu{max-width:calc(820px + 2 * var(--gutter))}
.kontak-satu .h2{margin-top:var(--s-4)}
.kontak-satu .lead{margin-top:var(--s-5)}
.surel-baris{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5);margin-top:var(--s-6)}
.surel{font:600 clamp(1.6rem,1.1rem + 2.4vw,3rem)/1.15 var(--font-display);color:var(--teks);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;overflow-wrap:anywhere}
.surel:hover{text-decoration-thickness:5px}

/* ---------- footer ---------- */
.kaki{padding-block:var(--s-8) var(--s-7);border-top:1px solid var(--garis);background:var(--malam-950);font-size:var(--f-kecil)}
.kaki-isi{display:grid;gap:var(--s-6)}
.kaki-merek{display:inline-flex;align-items:center;gap:10px;justify-self:start;min-height:44px;color:var(--teks);text-decoration:none}
.kaki-merek img{width:56px;height:auto}
.kaki-merek:hover .merek-nama{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.kaki-nav ul{display:flex;flex-wrap:wrap;gap:0 var(--s-2)}
.kaki-nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;color:var(--teks-2);text-decoration:none}
.kaki-nav a:hover{color:var(--langit);text-decoration:underline}
.kaki-legal{color:var(--teks-2);padding-top:var(--s-5);border-top:1px solid var(--garis)}
.kaki-legal p + p{margin-top:var(--s-1)}
@media (min-width:1024px){
  .kaki-isi{grid-template-columns:1fr auto;align-items:center}
  .kaki-legal{grid-column:1 / -1}
}

/* ---------- 404 ---------- */
.hilang{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:clip;padding:var(--s-8) var(--gutter);text-align:center}
.hilang-isi{position:relative;display:grid;justify-items:center;gap:var(--s-4);max-width:36rem}
.hilang-maskot{width:min(320px,70vw);height:auto;margin-bottom:var(--s-4)}
.hilang .lead{margin-inline:auto}
.hilang .tombol{margin-top:var(--s-4)}
@media (prefers-reduced-motion:no-preference){.hilang-maskot{animation:melayang-jauh 4s ease-in-out 6 alternate both}}

/* ---------- muncul saat digulir (kelas .gerak dipasang JS bila gerak diizinkan) ---------- */
.gerak [data-muncul]{opacity:0;translate:0 24px;transition:opacity var(--lambat) var(--ease-keluar),translate var(--lambat) var(--ease-pantul);transition-delay:calc(var(--urut,0) * 70ms)}
.gerak [data-muncul].muncul{opacity:1;translate:0 0}
.tentang-isi,.nilai li:nth-child(2),.fitur li:nth-child(2),.galeri li:nth-child(2){--urut:1}
.nilai li:nth-child(3),.fitur li:nth-child(3),.galeri li:nth-child(3){--urut:2}
.fitur li:nth-child(4),.galeri li:nth-child(4){--urut:3}
.galeri li:nth-child(5){--urut:4}
.galeri li:nth-child(6){--urut:5}

/* ---------- placeholder & blok tertunda (hanya terlihat di dev) ---------- */
.dev [data-todo]{outline:2px dashed #FF7A90;outline-offset:4px}

/* ---------- gerak dikurangi ---------- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
}

/* ---------- kontras paksa ---------- */
@media (forced-colors:active){
  .kartu,.fitur li,.galeri-item,.fakta li,.tombol,.menu summary,.bahasa,.lihat-tombol{border:1px solid CanvasText}
  .logo-bulan{display:none}
}

/* ---------- cetak ---------- */
@media print{
  .kepala,.lewati,.hero-langit,.logo-sapa,.salin{display:none !important}
  [data-permukaan]{background:#fff !important;color:#000 !important}
}