:root{
  --bg:#0d0718; --bg2:#160c2a; --card:#1d1236; --card2:#25174a; --line:rgba(200,170,255,.14);
  --ink:#f3eeff; --mute:#a99cc8; --ungu:#aa6eff; --ungu2:#7c3aed; --emas:#ffc94a; --mint:#5affaa;
  --r:22px;
  --glow:radial-gradient(1200px 600px at 80% -10%,rgba(170,110,255,.18),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(124,58,237,.12),transparent 60%);
  --hdr:rgba(13,7,24,.82); --ring:rgba(170,110,255,.18); --hover:rgba(170,110,255,.15); --chip:#d6bdff;
  --emas-bg:rgba(255,201,74,.1); --emas-bd:rgba(255,201,74,.3); --em:linear-gradient(90deg,#d2b3ff,#aa6eff 60%,#8b5cf6);
  --mapbg:#0a0514; --land:#2a1a4d; --landline:#5b3d99; --dot:#ffc94a; --halo:#aa6eff; --on-aksen:#fff; --shadow:rgba(0,0,0,.5);
}
/* ===== TEMA ATLAS (terang: kertas atlas; gelap: navy malam) ===== */
html[data-tema=atlas]{
  --bg:#f6f1e7; --bg2:#efe7d6; --card:#fffdf8; --card2:#f3ecdd; --line:rgba(20,33,61,.13);
  --ink:#14213d; --mute:#5b6478; --ungu:#0f7c80; --emas:#b87800; --mint:#2e8b57;
  --glow:radial-gradient(1000px 500px at 85% -10%,rgba(15,124,128,.10),transparent 60%),radial-gradient(800px 500px at -10% 25%,rgba(224,154,0,.08),transparent 60%);
  --hdr:rgba(246,241,231,.86); --ring:rgba(15,124,128,.18); --hover:rgba(15,124,128,.10); --chip:#0b5f62;
  --emas-bg:rgba(224,154,0,.10); --emas-bd:rgba(184,120,0,.35); --em:linear-gradient(90deg,#0f7c80,#13a3a0);
  --mapbg:#dcebec; --angka-glow:none; --land:#fbf7ee; --landline:#8fb0b4; --dot:#c96f00; --halo:#e09a00; --on-aksen:#fff; --shadow:rgba(20,33,61,.18);
}
html[data-tema=atlas][data-mode=gelap]{
  --bg:#0e1a2b; --bg2:#122137; --card:#15243a; --card2:#1b2e48; --line:rgba(237,231,218,.12);
  --ink:#ede7da; --mute:#9aa7b8; --ungu:#3cc4c0; --emas:#ffc247; --mint:#5fd39a;
  --glow:radial-gradient(1000px 500px at 85% -10%,rgba(60,196,192,.12),transparent 60%),radial-gradient(800px 500px at -10% 25%,rgba(255,194,71,.06),transparent 60%);
  --hdr:rgba(14,26,43,.86); --ring:rgba(60,196,192,.2); --hover:rgba(60,196,192,.12); --chip:#9fe7e4;
  --emas-bg:rgba(255,194,71,.1); --emas-bd:rgba(255,194,71,.3); --em:linear-gradient(90deg,#7fe0dc,#3cc4c0);
  --mapbg:#0a1422; --land:#1c3048; --landline:#2f4c6b; --dot:#ffc247; --halo:#3cc4c0; --on-aksen:#06232a; --shadow:rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif;line-height:1.55;
  background-image:var(--glow);}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
/* header */
header{position:sticky;top:0;z-index:20;background:var(--hdr);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:10px}
.brand b{font-weight:800;font-size:20px;letter-spacing:-.3px}
.brand b span{background:linear-gradient(90deg,#c9a2ff,var(--ungu));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav nav{margin-left:auto;display:flex;gap:4px}
.nav nav a{text-decoration:none;color:var(--mute);font-weight:600;font-size:14px;padding:8px 12px;border-radius:999px}
.nav nav a:hover{color:var(--ink);background:var(--card)}
.btn-yt{background:var(--ungu)!important;color:var(--on-aksen)!important}
/* hero */
.hero{padding:56px 0 28px;text-align:center}
.pill{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:700;color:var(--emas);background:var(--emas-bg);border:1px solid var(--emas-bd);padding:6px 14px;border-radius:999px}
h1{font-size:clamp(34px,6.4vw,64px);line-height:1.05;letter-spacing:-1.5px;margin:18px 0 12px;font-weight:800}
h1 em{font-style:normal;background:var(--em);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mute);font-size:clamp(15px,2.2vw,18px);max-width:620px;margin:0 auto}
.search{position:relative;max-width:620px;margin:30px auto 0}
.search input{width:100%;height:64px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);
  font:600 19px "Plus Jakarta Sans",sans-serif;padding:0 150px 0 26px;outline:none;transition:.2s}
.search input:focus{border-color:var(--ungu);box-shadow:0 0 0 6px var(--ring)}
.search button{position:absolute;right:7px;top:7px;height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--ungu);color:var(--on-aksen);font:800 16px "Plus Jakarta Sans";cursor:pointer}
.search button:hover{filter:brightness(1.1)}
.saran{position:absolute;left:0;right:0;top:70px;background:var(--card2);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:none;z-index:5;text-align:left;box-shadow:0 20px 50px var(--shadow)}
.saran div{padding:12px 22px;cursor:pointer;display:flex;justify-content:space-between;font-weight:600}
.saran div:hover,.saran div.on{background:var(--hover)}
.saran small{color:var(--mute);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.chips button{background:transparent;border:1px solid var(--line);color:var(--mute);padding:7px 14px;border-radius:999px;font:600 14px "Plus Jakarta Sans";cursor:pointer}
.chips button:hover{border-color:var(--ungu);color:var(--ink)}
/* hasil */
#hasil{display:none;margin:34px auto 0;max-width:980px;text-align:left;scroll-margin-top:84px}
.card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:26px}
.skor{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
.angka{font-size:clamp(64px,12vw,120px);font-weight:800;line-height:.9;color:var(--emas);letter-spacing:-3px;text-shadow:var(--angka-glow,0 0 40px rgba(255,201,74,.25))}
.skor h2{font-size:clamp(20px,3vw,28px);line-height:1.2;margin-top:8px}
.skor p{color:var(--mute);margin-top:10px}
.ejaan{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.ejaan span{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--hover);color:var(--chip)}
.peta{background:var(--mapbg);border-radius:16px;border:1px solid var(--line);padding:8px}
.peta svg{width:100%;height:auto;display:block}
.peta small{display:block;color:var(--mute);font-size:11.5px;padding:6px 6px 2px}
.daftar{margin-top:22px;columns:2 320px;column-gap:22px}
.prov{break-inside:avoid;margin-bottom:14px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.prov h4{display:flex;justify-content:space-between;font-size:15px}
.prov h4 b{color:var(--emas)}
.prov ul{list-style:none;margin-top:6px}
.prov li{font-size:14px;color:var(--mute);padding:3px 0;border-top:1px dashed rgba(200,170,255,.08)}
.prov li b{color:var(--ink);font-weight:600}
.aksi{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.aksi button{background:var(--card2);border:1px solid var(--line);color:var(--ink);padding:10px 16px;border-radius:999px;font:700 14px "Plus Jakarta Sans";cursor:pointer}
.aksi button.utama{background:var(--ungu);border-color:var(--ungu);color:var(--on-aksen)}
.unik{text-align:center;padding:38px 20px}
.unik .angka{color:var(--mint);text-shadow:0 0 40px rgba(90,255,170,.25)}
/* fakta */
section{padding:64px 0}
.judul{font-size:clamp(24px,4vw,36px);letter-spacing:-.8px;line-height:1.15;margin-bottom:8px}
.sub{color:var(--mute);margin-bottom:26px}
.fakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.f{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.f b{display:block;font-size:40px;font-weight:800;color:var(--emas);letter-spacing:-1px;line-height:1.1}
.f span{color:var(--mute);font-size:14.5px}
.top10{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.top10 button{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);font:600 14.5px "Plus Jakarta Sans";cursor:pointer;text-align:left}
.top10 button:hover{border-color:var(--ungu)}
.top10 i{font-style:normal;color:var(--mute);font-size:12px;margin-right:8px}
.top10 b{color:var(--emas)}
/* video */
.vid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.v{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s}
.v:hover{transform:translateY(-3px);border-color:var(--ungu)}
.v .thumb{aspect-ratio:9/12;background:#000 center/cover no-repeat;position:relative}
.v .thumb span{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.7);font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
.v p{padding:12px 14px 14px;font-weight:700;font-size:14.5px;line-height:1.35}
.v small{display:block;color:var(--ungu);font-weight:700;margin-top:6px;font-size:12.5px}
/* alat lain */
.alat{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.a{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;position:relative}
.a .tag{position:absolute;top:18px;right:18px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(255,201,74,.12);color:var(--emas)}
.a .tag.on{background:rgba(90,255,170,.12);color:var(--mint)}
.a h3{font-size:19px;margin:6px 0 6px;padding-right:90px}
.a p{color:var(--mute);font-size:14.5px}
/* tentang */
.tentang{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.tentang img{width:140px;height:140px;border-radius:28px;box-shadow:0 20px 50px rgba(124,58,237,.35)}
.sosmed{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sosmed a{text-decoration:none;background:var(--card);border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px}
.sosmed a:hover{border-color:var(--ungu)}
footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--mute);font-size:13px}
footer p+p{margin-top:6px}
@media (max-width:760px){
  .skor{grid-template-columns:1fr}
  .nav nav a:not(.btn-yt){display:none}
  .search input{height:58px;font-size:17px;padding-right:120px}
  .search button{height:44px;padding:0 18px}
  .tentang{grid-template-columns:1fr;text-align:center}
  .tentang img{margin:0 auto}
  .sosmed{justify-content:center}
  .card{padding:20px}
}

/* ===== beranda: ubin alat (gaya galeri) ===== */
.ubin-wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.ubin{grid-column:span 2;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;padding:22px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);text-decoration:none;overflow:hidden;transition:transform .2s,border-color .2s}
.ubin:hover{transform:translateY(-3px);border-color:var(--ungu)}
.ubin.besar{grid-column:span 6;min-height:340px;padding:30px}
.ubin .ikon{position:absolute;inset:0;opacity:.95;pointer-events:none}
.ubin .ikon svg{width:100%;height:100%}
.ubin h3{position:relative;font-size:22px;line-height:1.2;letter-spacing:-.3px}
.ubin.besar h3{font-size:clamp(26px,4vw,40px);max-width:560px}
.ubin p{position:relative;color:var(--mute);font-size:14.5px;margin-top:6px;max-width:520px}
.ubin .tag{position:absolute;top:18px;left:18px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--emas-bg);color:var(--emas);border:1px solid var(--emas-bd)}
.ubin .tag.on{background:var(--hover);color:var(--ungu);border-color:transparent}
.ubin.redup{cursor:default}
.ubin.redup:hover{transform:none;border-color:var(--line)}
.mini{position:relative;display:flex;gap:8px;margin-top:16px;max-width:460px}
.mini input{flex:1;height:50px;border-radius:999px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:600 16px "Plus Jakarta Sans",sans-serif;padding:0 18px;outline:none}
.mini input:focus{border-color:var(--ungu)}
.mini button{height:50px;padding:0 20px;border:0;border-radius:999px;background:var(--ungu);color:var(--on-aksen);font:800 15px "Plus Jakarta Sans";cursor:pointer}
.heroB{padding:64px 0 34px}
.heroB h1{text-align:left;max-width:780px}
.heroB .lead{margin:0;text-align:left}
/* ===== sumber dan cara hitung ===== */
.sumber{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.sumber ol{margin:8px 0 0 20px;color:var(--mute)}
.sumber li{margin:8px 0}
.sumber li b{color:var(--ink)}
.sumber .catat{margin-top:16px;padding:12px 16px;border-radius:14px;background:var(--hover);color:var(--ink);font-size:14.5px}
.kembali{display:inline-flex;gap:6px;color:var(--mute);text-decoration:none;font-weight:600;font-size:14px;margin-top:18px}
.kembali:hover{color:var(--ink)}
@media (max-width:760px){
  .ubin,.ubin.besar{grid-column:span 6}
  .ubin{min-height:190px}
  .heroB{padding:40px 0 20px}
}
/* ubin: gambar di atas, teks di bawah (tidak bertumpuk) */
.ubin{min-height:300px}
.ubin .ikon{inset:0 0 auto 0;height:48%}
.ubin .tag{z-index:2}
.ubin.besar{min-height:360px}
.ubin.besar .ikon{inset:0 0 0 46%;height:100%}
.ubin.besar h3,.ubin.besar p,.ubin.besar .mini{max-width:46%}
@media (max-width:760px){
  .ubin{min-height:290px}
  .ubin.besar{padding-top:230px}
  .ubin.besar .ikon{inset:0 0 auto 0;height:220px}
  .ubin.besar h3,.ubin.besar p,.ubin.besar .mini{max-width:none}
}
/* ===== artikel ===== */
.artikel{max-width:720px;margin:0 auto;padding:40px 18px 20px}
.artikel .meta{color:var(--mute);font-size:14px;margin-top:6px}
.artikel h1{font-size:clamp(30px,5.4vw,46px);text-align:left;margin:14px 0 6px}
.artikel h2{font-size:clamp(21px,3.2vw,26px);letter-spacing:-.4px;line-height:1.25;margin:40px 0 12px}
.artikel p{font-size:17.5px;line-height:1.75;margin:14px 0}
.artikel p b, .artikel li b{color:var(--ink)}
.artikel ul{margin:10px 0 10px 22px;font-size:17px;line-height:1.7}
.artikel .angka-teks{color:var(--emas);font-weight:800}
.ringkas{margin:24px 0;padding:20px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);border-left:5px solid var(--ungu)}
.ringkas h3{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ungu);margin-bottom:8px}
.ringkas p{margin:6px 0;font-size:16.5px}
.video-sematan{display:flex;justify-content:center;margin:24px 0}
.video-sematan iframe{width:min(100%,340px);aspect-ratio:9/16;border:0;border-radius:20px;box-shadow:0 20px 50px var(--shadow)}
figure{margin:22px 0}
figure.dua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
figure img{width:100%;border-radius:16px;display:block;border:1px solid var(--line)}
figcaption{grid-column:1/-1;color:var(--mute);font-size:13.5px;margin-top:8px;text-align:center}
.tabel{width:100%;border-collapse:collapse;margin:16px 0;font-size:15.5px;background:var(--card);border-radius:14px;overflow:hidden}
.tabel th,.tabel td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
.tabel th{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--mute);background:var(--card2)}
.tabel td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.tabel tr.juara td{color:var(--emas);font-weight:800}
.baca-juga{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.baca-juga a{display:block;text-decoration:none;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.baca-juga a:hover{border-color:var(--ungu)}
.baca-juga small{display:block;color:var(--ungu);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.baca-juga b{font-size:15.5px;line-height:1.35}
@media (max-width:760px){ .artikel p{font-size:16.5px} figure.dua{grid-template-columns:1fr 1fr;gap:8px} .tabel{font-size:14px} .tabel th,.tabel td{padding:8px} }
/* kartu link YouTube di akhir artikel */
.yt-kartu{display:flex;gap:16px;align-items:center;margin:36px 0 8px;padding:14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-decoration:none}
.yt-kartu:hover{border-color:var(--ungu)}
.yt-kartu img{width:92px;height:122px;object-fit:cover;border-radius:12px;flex:none}
.yt-kartu small{display:block;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ungu)}
.yt-kartu b{display:block;font-size:16.5px;line-height:1.35;margin:4px 0}
.yt-kartu em{font-style:normal;font-size:13.5px;color:var(--mute)}