:root{--bg:#fff;--teks:#0a0a0a;--redup:#6b6b6b;--garis:#e6e6e6;--panel:#f6f6f6;--aksen:var(--teks);--aksen-teks:var(--bg);--skrol:#c4c4c4;color-scheme:light;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

:root[data-theme="dark"]{--bg:#000;--teks:#f5f5f5;--redup:#a3a3a3;--garis:#262626;--panel:#111;--skrol:#5a5a5a;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{scrollbar-width:none;-webkit-tap-highlight-color:transparent}
*::-webkit-scrollbar{display:none;width:0;height:0}
a{color:inherit}
.burger{position:relative}
.burger span{position:absolute;left:10px;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s,opacity .2s,top .3s}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:18px}
.burger span:nth-child(3){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:18px;transform:rotate(-45deg)}
.skrol{display:none;width:4px;z-index:45}
.skrol.jendela{position:fixed;right:2px;top:calc(env(safe-area-inset-top,0px) + 4px);bottom:calc(env(safe-area-inset-bottom,0px) + 4px)}
.skrol.dalam{position:absolute;right:3px;z-index:3}
.skrol-jempol{width:100%;border-radius:999px;background:var(--skrol);touch-action:none;cursor:grab}
.saran{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:35;background:var(--bg);border:1px solid var(--garis);border-radius:18px;padding:6px;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.saran.buka{display:block}
.cari-bar .saran{left:16px;right:16px;top:calc(100% + 4px)}
.saran-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--redup);font-size:.97rem;text-align:left;cursor:pointer}
.saran-item:hover,.saran-item.aktif{background:var(--panel)}
.saran-item svg.i{width:18px;height:18px;flex:none}
.saran-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saran mark{background:transparent;color:var(--teks);font-weight:600}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--teks);font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;transition:background .25s,color .25s}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px}
.halaman{display:none}.halaman.aktif{display:block}
.tombol-ikon{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--garis);background:transparent;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.tombol-ikon:hover{background:var(--panel);border-color:var(--aksen)}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ikon-bulan{display:none}
[data-theme="dark"] .ikon-bulan{display:block}
[data-theme="dark"] .ikon-matahari{display:none}
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--bg);border-bottom:1px solid var(--garis)}
.merek{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.merek-logo{width:38px;height:38px;border-radius:50%;background:var(--panel);border:1px solid var(--garis);display:block;flex:none;overflow:hidden}
.merek-logo img{width:100%;height:100%;object-fit:cover}
.merek-teks{font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.aksi{display:flex;align-items:center;gap:6px}

.laci{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none;transition:visibility 0s .3s}
.laci.buka{visibility:visible;pointer-events:auto;transition-delay:0s}
.laci-latar{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.laci-panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,360px);background:var(--bg);border-left:1px solid var(--garis);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px);transform:translateX(100%);transition:transform .3s}
.laci.buka .laci-latar{opacity:1}
.laci.buka .laci-panel{transform:none}
.laci-atas{padding:8px 16px;border-bottom:1px solid var(--garis);text-align:center}
.laci-judul{text-align:center;font-weight:600;font-size:.88rem;line-height:1.2}
.laci-isi{flex:1;overflow-y:auto;padding:6px 16px 20px;display:flex;flex-direction:column;gap:8px}
.baris{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 14px;border:1px solid var(--garis);border-radius:12px;background:var(--panel);cursor:pointer;text-align:left;font-size:.95rem;transition:border-color .2s}
.baris:hover{border-color:var(--aksen)}
.baris svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sw{margin-left:auto;width:46px;height:26px;border-radius:999px;background:var(--garis);position:relative;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px var(--garis);transition:transform .2s,background .2s}
[data-theme="dark"] .sw{background:var(--aksen)}
[data-theme="dark"] .sw::after{transform:translateX(20px);background:var(--aksen-teks)}
.warna-baris{display:flex;align-items:center;gap:12px;padding:0}
.warna-baris>span{flex:none;width:54px;color:var(--redup);font-size:.85rem;line-height:1.2}
.warna{display:flex;gap:10px;overflow-x:auto;padding:4px 6px 2px}
.warna-kolom{flex:1;min-width:0;position:relative;padding-bottom:10px}
.skrol-h{position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:999px;background:var(--garis)}
.skrol-h-jempol{height:100%;border-radius:999px;background:var(--skrol)}
.warna button{flex:none;width:38px;height:28px;border-radius:9px;border:0;cursor:pointer;background:var(--c)}
.warna button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--teks)}
.laci-kaki{margin-top:auto;padding-top:16px;border-top:1px dashed var(--garis);text-align:center;color:var(--redup);font-size:.85rem}
@media (prefers-reduced-motion:reduce){.laci-panel,.laci-latar{transition:none}}

.beranda{display:flex;flex-direction:column;align-items:center;gap:16px;padding:12px 20px 48px;text-align:center}
.beranda-gambar{width:min(360px,90vw);aspect-ratio:16/9;border-radius:18px;background:var(--panel);border:1px dashed var(--garis);display:grid;place-items:center;color:var(--redup);font-size:.85rem;position:relative;overflow:hidden}
.beranda-gambar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beranda-judul{margin:0;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.beranda-sub{margin:0;color:var(--redup);max-width:none;white-space:nowrap;font-size:clamp(.7rem,3.2vw,1rem)}
.beranda-cari{position:relative;width:min(560px,100%);display:flex;align-items:center;gap:10px;padding:0 8px 0 20px;height:58px;border-radius:999px;border:1.5px solid var(--garis);background:var(--bg);transition:border-color .2s}
.beranda-cari:hover,.beranda-cari:focus-within{border-color:var(--aksen)}
.beranda-cari input{flex:1;min-width:0;border:0;background:transparent;outline:0;height:100%}
.beranda-cari input::placeholder{color:var(--redup)}
.beranda-kirim{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:var(--aksen);color:var(--aksen-teks);display:grid;place-items:center;cursor:pointer}
.yt-baris{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.yt-ikon{width:30px;height:30px;flex:none}
.yt-teks{font-weight:600;font-size:.95rem}
.yt-tombol{display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border-radius:999px;background:var(--aksen);color:var(--aksen-teks);font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap}
.yt-tombol:active{transform:scale(.94)}
.yt-tombol svg.i{width:14px;height:14px;stroke-width:2.5}
.koleksi{width:min(560px,100%);text-align:left}
.koleksi-judul{margin:0 0 10px;font-size:1rem;font-weight:600}
.koleksi-daftar{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.koleksi-item{flex:none;display:block;width:112px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--garis);background:var(--panel)}
.koleksi-item img{width:100%;height:100%;object-fit:cover;display:block}
.koleksi-item:active{transform:scale(.96)}
.koleksi-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.koleksi-judul{margin:0;font-size:1rem;font-weight:600}
.koleksi-semua{display:inline-flex;align-items:center;gap:2px;color:var(--redup);font-size:.85rem;text-decoration:none;white-space:nowrap}
.koleksi-semua:hover{color:var(--teks)}
.koleksi-semua svg.i{width:14px;height:14px}
.koleksi-jml{display:inline-block;min-width:22px;padding:1px 8px;margin-left:6px;border-radius:999px;background:var(--panel);border:1px solid var(--garis);color:var(--redup);font-size:.75rem;font-weight:600;text-align:center;vertical-align:middle}
.koleksi-kolom{position:relative;padding-bottom:12px}
.koleksi-daftar{padding-bottom:0}
.koleksi-bar{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:999px;background:var(--garis);display:none}
.koleksi-bar-jempol{height:100%;border-radius:999px;background:var(--aksen)}
.bt{width:min(560px,100%);display:flex;flex-direction:column;text-align:left;margin-top:8px}
.bt-kepala{display:flex;align-items:center;gap:14px}
.bt-logo{width:64px;height:64px;flex:none;border-radius:50%;background:var(--panel);border:1px solid var(--garis);overflow:hidden}
.bt-logo img{width:100%;height:100%;object-fit:cover;display:block}
.bt-nama{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.bt-label{color:var(--redup);font-size:.95rem}
.bt-isi{margin:20px 0 24px;font-size:1.02rem;line-height:1.75;text-align:justify;text-align-last:left}

.bt-kartu2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.bt-kartu{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px;background:var(--panel);border:1px solid var(--garis);border-radius:24px}
.bt-lebar{margin-bottom:12px}
.bt-k-judul{font-size:.95rem;font-weight:600}
.bt-k-isi{font-size:1.1rem;font-weight:700;line-height:1.25; text-align:center}
.bt-k-desc{color:var(--redup);font-size:.88rem;line-height:1.5}

.bt-baris-judul{display:flex;align-items:center;justify-content:space-between}
.bt-baris-judul svg.i{width:18px;height:18px;color:var(--redup)}
.bt-pendiri{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:10px}
.bt-foto{width:60px;height:68px;flex:none;object-fit:cover;border-radius:10px}
.bt-tanggal{justify-content:space-between}
.bt-tanggal .bt-k-judul{text-align:center}
.bt-tahun{font-size:2.2rem;font-weight:700;line-height:1;margin:auto 0;text-align:center}

.bt-yt{flex-direction:row;align-items:center;gap:12px}
.bt-yt-ikon{width:36px;height:36px;flex:none}
.bt-yt-teks{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bt-yt .bt-k-judul{font-size:.9rem}
.bt-yt .bt-k-desc{font-size:.78rem;line-height:1.35}
.bt-yt .yt-tombol{flex:none}

.bt-kontak{align-items:center;text-align:center}
.bt-btn{align-self:center;margin-top:4px}
.bt-email{gap:8px;max-width:100%}
.bt-email svg.i{width:18px;height:18px;flex:none}
.bt-email span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bt-hak{margin-top:12px;text-align:center;color:var(--redup);font-size:.8rem}
.bt-link{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-size:.88rem}
.bt-link a{color:var(--redup);text-decoration:none;font-weight:600}
.bt-link a:hover{color:var(--teks)}
.bt-link span{color:var(--garis)}

.ik-kotak{width:min(560px,100%);margin:32px 0 8px;text-align:center}
.ik-judul{margin-bottom:6px;color:var(--redup);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.ik-slot{width:320px;max-width:100%;min-height:50px;margin:0 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:12px;background:var(--panel);border:1px dashed var(--garis)}
.ik-slot.ik-baca{min-height:100px}
.baca-isi .ik-kotak{width:100%;margin:8px 0 24px}
.jl{width:min(560px,100%);text-align:left;margin-top:8px}
.jl-judul{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-align:center}
.jl-sub{margin:4px 0 0;color:var(--redup);font-size:.9rem;text-align:center}
.jl-kat{margin-top:24px;scroll-margin-top:90px}


.jl-banner{position:relative;left:50%;width:100vw;margin-left:-50vw;min-height:260px;border-radius:0;overflow:hidden;background:linear-gradient(160deg,#0b1020,#1b1f3a);color:#fff}
.jl-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jl-banner-grad{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.jl-banner-isi{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:260px;padding:24px 20px 32px;text-align:center}
.jl-banner .jl-judul{color:#fff;text-align:center;font-size:clamp(1.1rem,5vw,1.4rem);line-height:1.2}
.jl-banner .jl-sub{margin:8px auto 0;max-width:80%;color:rgba(255,255,255,.88);text-align:center;font-size:.78rem;line-height:1.6}
.jl-banner-btn{display:flex;gap:10px}
.jl-btn{display:inline-flex;align-items:center;gap:4px;padding:9px 16px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#0a0a0a;font-size:.85rem;font-weight:700;cursor:pointer}
.jl-btn:active{transform:scale(.95)}
.jl-btn svg.i{width:14px;height:14px;stroke-width:2.8}
.jl-kat-judul{margin:0 0 10px;font-size:1.05rem;font-weight:700}
.jl-daftar{gap:12px}
.jl-kartu{position:relative;flex:none;width:148px;height:200px;padding:0;border:1px solid var(--garis);border-radius:22px;overflow:hidden;background:#10131c;cursor:pointer;text-align:left;color:#fff;font:inherit}
.jl-kartu:active{transform:scale(.97)}
.jl-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jl-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.15) 55%,transparent 100%)}
.jl-bawah{position:absolute;left:0;right:0;bottom:0;padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.jl-nama{display:block;font-size:1rem;font-weight:700;line-height:1.2;text-align:center}
.jl-tombol{display:inline-flex;align-items:center;gap:3px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#0a0a0a;font-size:.68rem;font-weight:700}
.jl-tombol svg.i{width:12px;height:12px;stroke-width:2.8}
.jl-info{display:flex;flex-direction:column;justify-content:space-between;padding:14px;background:var(--panel);color:var(--teks);border-style:dashed}
.jl-info-ikon{width:34px;height:34px;border-radius:50%;border:1px solid var(--garis);background:var(--bg);display:grid;place-items:center}
.jl-info-bawah{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.jl-info-j{font-size:.95rem;font-weight:700;line-height:1.3}
.jl-info .jl-tombol{background:var(--aksen);color:var(--aksen-teks)}

.jl-ov{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.jl-ov.buka{display:flex}
.jl-ov-kartu{display:flex;flex-direction:column;width:100%;max-width:360px;max-height:86dvh;padding:22px 18px;background:var(--bg);color:var(--teks);border:1px solid var(--garis);border-radius:20px}
.jl-ov-judul{text-align:center;font-weight:700;font-size:1rem}
.jl-ov-isi{overflow-y:auto;overscroll-behavior:contain;margin:12px 0 14px;font-size:.92rem;line-height:1.8}
.jl-ov-isi b{color:var(--teks)}

.ts{
  box-sizing:border-box;width:100vw;margin:20px calc(50% - 50vw);
  padding:24px 20px;background:#000;color:#fff;text-align:center;
  border:solid rgba(255,255,255,.14);border-width:1px 0;
}
.ts-judul,.ts-isi,.ts-form{width:min(560px,100%);margin-left:auto;margin-right:auto}
.ts-judul{margin-top:0;margin-bottom:8px;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.ts-isi{margin-top:0;margin-bottom:16px;font-size:.9rem;color:rgba(255,255,255,.7);line-height:1.5}
.ts-form{position:relative;text-align:left}
.ts-form textarea{
  width:100%;box-sizing:border-box;resize:none;min-height:64px;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.2);background:#111;
  color:#fff;font:inherit;font-size:.95rem;outline:none;
}
.ts-form textarea::placeholder{color:rgba(255,255,255,.45)}
.ts-form textarea:focus{border-color:#fff}
.ts-bawah{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:12px}
.ts-hitung{font-size:.8rem;color:rgba(255,255,255,.5)}
.ts-form button{
  padding:9px 20px;border:0;border-radius:999px;cursor:pointer;
  background:#fff;color:#000;font:inherit;font-size:.9rem;font-weight:700;
}
.ts-form button:disabled{opacity:.6;cursor:not-allowed}
.ts-status{min-height:0;margin:8px 0 0;font-size:.85rem;text-align:center}
.ts-status:empty{display:none}
.ts-catatan{margin:8px 0 0;font-size:.7rem;color:rgba(255,255,255,.45);text-align:center}

.cari-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--garis)}
.cari-kolom{flex:1;min-width:0;display:flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--garis);transition:border-color .2s}
.cari-kolom:focus-within{border-color:var(--aksen)}
.cari-kolom input{flex:1;min-width:0;border:0;background:transparent;outline:0;height:100%}
.cari-info{max-width:720px;margin:0 auto;padding:14px 20px 0;color:var(--redup);font-size:.88rem;text-align:center}
.hasil-daftar{max-width:720px;margin:0 auto;padding:0 20px 56px;list-style:none}
.hasil{padding:18px 0;border-bottom:1px solid var(--garis)}
.hasil-situs{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--redup)}
.hasil-ikon{width:22px;height:22px;border-radius:50%;background:var(--teks);flex:none}
.hasil-ikon{background:var(--teks) url(/iconcari.png) center/cover}
.hasil-lanjut{margin-left:auto;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--garis);background:transparent;color:var(--teks);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.hasil-lanjut:hover{background:var(--panel);border-color:var(--aksen)}
.hasil-lanjut svg.i{width:16px;height:16px}
.hasil-judul{display:block;margin:6px 0 4px;font-size:1.2rem;font-weight:600;line-height:1.3;color:var(--teks);text-decoration:none}
.hasil-judul:hover{text-decoration:underline}
.hasil p{margin:0;color:var(--redup)}
.hasil mark{background:transparent;color:var(--teks);font-weight:600}
.hasil-kosong{padding:48px 0;text-align:center;color:var(--redup)}

.baca{max-width:720px;margin:0 auto;padding:24px 20px 64px}
.baca-kat{display:inline-block;padding:4px 12px;border:1px solid var(--garis);border-radius:999px;font-size:.8rem;color:var(--redup);background:var(--panel)}
.baca-judul{margin:14px 0 20px;font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.2;font-weight:700;letter-spacing:-.02em}
.baca-isi p{margin:0 0 1.1em;font-size:1.05rem;line-height:1.75}
.baca-isi p{text-align:justify;text-align-last:center}
.baca-terkait h2{margin:32px 0 10px;font-size:1rem;font-weight:600;color:var(--redup);text-align:center}
.terkait-item{display:block;width:100%;text-align:center;padding:14px 16px;margin-bottom:8px;border:1px solid var(--garis);border-radius:12px;background:var(--panel);cursor:pointer;transition:border-color .2s}
.terkait-item:hover{border-color:var(--aksen)}
.baca-judul{text-align:center}
.cari-bar{height:69px;padding-top:0;padding-bottom:0;align-items:center}
.cari-bar>*{align-self:center;margin:0}
.cari-bar .saran{position:absolute}
.cari-judul{flex:1;min-width:0;text-align:center;font-weight:600;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baca-gambar{display:block;width:100%;max-height:380px;object-fit:cover;border-radius:20px;margin:0 0 18px;background:var(--panel)}
.baca-lead{font-weight:600;color:var(--redup)}
.baca-media{max-width:420px;margin:0 auto 1.1em}
.baca-media img,.baca-media video{display:block;width:100%;border-radius:16px}
.baca-media img{aspect-ratio:1/1;object-fit:cover}
.baca-kutip{margin:0 0 22px;padding:16px 18px;border-left:3px solid var(--aksen);border-radius:0 16px 16px 0;background:var(--panel);color:var(--redup);font-style:italic;line-height:1.7}
.baca-label{margin:0 0 12px;color:var(--redup);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.baca-kotak{margin:8px 0 14px;padding:20px;border:1px solid var(--garis);border-radius:20px;background:var(--panel)}
.baca-kotak ul{margin:0;padding-left:18px}
.baca-kotak li{text-align:justify;text-align-last:center}
.baca-kotak li:last-child{margin-bottom:0}
.baca-kotak li strong{color:var(--aksen)}

/* hero detail: gambar lebar penuh, teks di dalam gambar */
.baca{padding:0 0 64px}
.baca-badan{padding:24px 20px 0}
.baca-hero{position:relative;width:100%;aspect-ratio:6/7;background:#10131c;overflow:hidden}
.baca-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.baca-hero-grad{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.baca-hero-teks{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 20px}
.baca .baca-hero .baca-judul{margin:0 0 10px;color:#fff;text-align:left;font-size:clamp(2rem,9vw,3rem);line-height:1.1}
.baca-ringkas{margin:0;max-width:85%;color:rgba(255,255,255,.95);font-size:1.05rem;line-height:1.7}

/* artikel tanpa gambar */
.baca-hero.tanpa-gambar{aspect-ratio:auto;max-height:none;background:none;overflow:visible;padding:28px 20px 0}
.baca-hero.tanpa-gambar img,.baca-hero.tanpa-gambar .baca-hero-grad{display:none}
.baca-hero.tanpa-gambar .baca-hero-teks{position:static;transform:none;padding:0}
.baca-hero.tanpa-gambar .baca-ringkas{max-width:none;margin:0 auto}
.baca-ringkas:empty{display:none}
.baca .baca-hero.tanpa-gambar .baca-judul{color:var(--teks);text-align:center;font-size:clamp(1.5rem,6.5vw,2.2rem);line-height:1.25;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
.baca-hero.tanpa-gambar .baca-ringkas{color:var(--redup);text-align:center}

.bln,#estOverlay{--text-main:var(--teks);--text-muted:var(--redup);--bg-primary:var(--panel);--bg-surface:var(--bg);--border-color:var(--garis);--radius-sm:8px;--radius-md:12px;--radius-lg:20px}
.bln{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;background:var(--bg);color:var(--teks)}
.bln.buka{display:flex}
#moonInfoFullscreen,#moonMonthFullscreen,#moonPhaseInfoFullscreen{z-index:75}
.bln-head{flex:none;position:relative;display:flex;align-items:center;height:calc(69px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;border-bottom:1px solid var(--garis);background:var(--bg)}
.bln-jdl{position:absolute;left:50%;bottom:0;height:69px;display:flex;align-items:center;transform:translateX(-50%);font-weight:600;white-space:nowrap}
.bln-isi{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px max(20px,calc((100% - 560px)/2)) calc(40px + env(safe-area-inset-bottom,0px))}

/* bulan besar */
.moon-visual-wrap{display:flex;justify-content:center;padding:0 0 16px}
.moon-visual{position:relative;width:140px;height:140px;border-radius:50%;overflow:hidden;background:#10131c;box-shadow:0 0 0 1px var(--garis)}
[data-theme="dark"] .moon-visual{box-shadow:0 0 0 1px var(--garis),0 0 40px rgba(255,245,200,.22)}
.moon-tex-light{background:radial-gradient(ellipse 18px 14px at 25% 22%,rgba(120,110,90,.18),transparent 70%),radial-gradient(ellipse 24px 20px at 60% 38%,rgba(120,110,90,.16),transparent 70%),radial-gradient(ellipse 30px 24px at 68% 65%,rgba(120,110,90,.14),transparent 70%),radial-gradient(ellipse 14px 12px at 30% 55%,rgba(120,110,90,.15),transparent 70%),radial-gradient(circle at 38% 32%,#fffdf3,#e8e2c8 65%,#cdc5a4 100%)}
.moon-tex-dark{background:#10131c}
.moon-lit{position:absolute;top:0;width:70px;height:140px}
.moon-term{position:absolute;top:0;height:140px;border-radius:50%;transition:left .4s,width .4s}

/* teks + statistik */
.bln-info{text-align:center}
.moon-phase-name{font-size:1.3rem;font-weight:700;margin-bottom:4px}
.moon-phase-name::first-letter{text-transform:uppercase}
.moon-date{color:var(--redup);font-size:.85rem;margin-bottom:12px}
.moon-stats{display:flex;justify-content:center;gap:30px}
.moon-stat{display:flex;flex-direction:column;gap:4px}
.moon-stat-label{font-size:.75rem;color:var(--redup);text-transform:uppercase;letter-spacing:.03em}
.moon-stat-value{font-size:1.1rem;font-weight:700;color:var(--aksen)}
.moon-path{margin:6px 0 4px}
.moon-path svg{width:100%;max-width:220px;display:block;margin:0 auto}
.moon-path-status{font-size:.8rem;font-weight:700;margin:2px 0 8px}
.moon-path-grid{display:grid;grid-template-columns:1fr .8fr 1fr;gap:4px}
.moon-path-grid div{display:flex;flex-direction:column;gap:2px}
.moon-path-grid span{color:var(--redup);font-size:.5rem;text-transform:uppercase;white-space:nowrap}
.moon-path-grid b{font-size:.74rem;white-space:nowrap}
.moon-path-count{color:var(--redup);font-size:.72rem;margin-top:8px}
.mm-next{margin-top:16px;color:var(--redup);font-size:.74rem;line-height:1.6}
.mm-next b{color:var(--teks)}
.bln-btns{margin-top:14px;display:flex;justify-content:center;gap:5px;flex-wrap:nowrap}
.bln-btns .est-btn{padding:7px 9px;font-size:.58rem;gap:3px;min-width:0}
.bln-btns .est-btn svg{width:10px!important;height:10px!important;flex:none}
.est-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border:0;border-radius:999px;background:var(--aksen);color:var(--aksen-teks);font-size:.62rem;font-weight:700;white-space:nowrap;cursor:pointer}
.est-btn:active{transform:scale(.94)}

/* 7 hari */
.moon-week{padding:10px 0 20px}
.moon-week-title{color:var(--redup);font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:14px}
.moon-week-list{display:flex;justify-content:space-between;gap:6px}
.moon-week-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.moon-week-day{color:var(--redup);font-size:.7rem}
.moon-mini{position:relative;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--garis)}
.moon-diksi{color:var(--redup);font-size:.75rem;line-height:1.7;text-align:justify;text-align-last:center}
.moon-week-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.moon-week-head .moon-week-title{margin-bottom:0}

/* halaman tentang bulan */
.mi-box{background:var(--panel);border:1px solid var(--garis);border-radius:20px;padding:16px;margin-bottom:14px}
.mi-title{font-size:.85rem;font-weight:700;text-align:center;margin-bottom:10px}
.mi-text{font-size:.82rem;line-height:1.8;text-align:justify;text-align-last:center}
.mi-text b{color:var(--teks)!important}
.mi-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--garis);font-size:.78rem;color:var(--redup)}
.mi-row:last-child{border-bottom:0}
.mi-row b{color:var(--teks);text-align:right}
.mi-now-name{font-size:1.05rem;font-weight:700;text-align:center;margin-bottom:4px}

/* 30 hari */
#moonMonthContent{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.mm-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 8px;background:var(--panel);border:1px solid var(--garis);border-radius:12px;min-width:0}
.mm-row.today{border-color:var(--aksen);grid-column:1/-1}
.mm-date{font-size:.78rem;font-weight:700}
.mm-day{color:var(--redup);font-size:.66rem;margin-top:2px}
.mm-phase-name{font-size:.72rem;font-weight:700}
.mm-phase-ill{color:var(--redup);font-size:.64rem;margin-top:2px}
.mm-badge{width:fit-content;margin:6px auto 0;padding:2px 10px;border-radius:99px;border:1px solid var(--aksen);color:var(--aksen);font-size:.6rem;font-weight:700}

/* info 8 fase */
.pi-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--garis);border-radius:20px;padding:14px;margin-bottom:12px}
.pi-visual{flex:0 0 64px}
.pi-text{flex:1;min-width:0}
.pi-name{font-size:.82rem;font-weight:700;text-align:center}
.pi-ill{color:var(--redup);font-size:.62rem;margin:1px 0 6px;text-align:center}
.pi-desc{font-size:.72rem;line-height:1.65;text-align:justify}

/* popup nama purnama */
#estOverlay{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#estOverlay.buka{display:flex}
.est-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:340px;max-height:88dvh;padding:22px 18px;background:var(--bg);color:var(--teks);border:1px solid var(--garis);border-radius:20px}
.est-judul{text-align:center;font-weight:600;font-size:.95rem}
.est-body{overflow-y:auto;overscroll-behavior:contain;margin:10px 0 14px;padding-right:14px}
.est-ok{width:100%;justify-content:center;padding:12px;font-size:.85rem}
.est-note{font-size:.74rem;line-height:1.75;color:var(--redup);text-align:center;margin:10px 0 4px}
.info-schedule-row{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;background:var(--panel);margin-bottom:6px;font-size:.78rem}
.info-section-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--redup);font-weight:700;margin-bottom:8px}
.info-section-title.center{text-align:center}

.tentang{max-width:560px;margin:0 auto;padding:24px 20px 64px}
.tt-kepala{display:flex;align-items:center;gap:14px}
.tt-logo{width:64px;height:64px;flex:none;border-radius:50%;background:var(--panel);border:1px solid var(--garis);overflow:hidden}
.tt-logo img{width:100%;height:100%;object-fit:cover;display:block}
.tt-nama{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.tt-label{color:var(--redup);font-size:.95rem}
.tt-teks{margin:0 0 20px;font-size:1.02rem;line-height:1.75}
.tt-isi{margin:20px 0 24px;text-align:justify;text-align-last:left}

.tt-kartu2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.tt-kartu{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px;background:var(--panel);border:1px solid var(--garis);border-radius:24px}
.tt-lebar{margin-bottom:12px}
.tt-k-judul{font-size:.95rem;font-weight:600}
.tt-k-isi{font-size:1.25rem;font-weight:700;line-height:1.25}
.tt-k-desc{color:var(--redup);font-size:.88rem;line-height:1.5}
.tt-btn{align-self:flex-start;margin-top:4px}

.tt-baris-judul{display:flex;align-items:center;justify-content:space-between}
.tt-baris-judul svg.i{width:18px;height:18px;color:var(--redup)}
.tt-pendiri{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:10px}
.tt-pendiri .tt-k-isi{font-size:1.1rem}
.tt-foto{width:60px;height:68px;flex:none;object-fit:cover;border-radius:10px}
.tt-tanggal{justify-content:space-between}
.tt-tahun{font-size:2.2rem;font-weight:700;line-height:1;margin:auto 0;text-align:center}
.tt-tanggal .tt-k-judul{text-align:center}

.tt-tags{display:flex;flex-wrap:wrap;gap:8px}
.tt-tags span{padding:5px 12px;border:1px solid var(--garis);border-radius:999px;background:var(--bg);font-size:.8rem;color:var(--redup)}

.footer-link{margin-top:8px;font-size:.85rem}
.footer-link a{color:var(--redup);text-decoration:none}
.footer-link a:hover{color:var(--teks)}
.tt-yt{flex-direction:row;align-items:center;gap:12px}
.tt-yt-ikon{width:36px;height:36px;flex:none}
.tt-yt-teks{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tt-yt .tt-k-judul{font-size:.9rem}
.tt-yt .tt-k-desc{font-size:.78rem;line-height:1.35}
.tt-yt .yt-tombol{flex:none}
.tt-tags{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px}
.tt-tags span{flex:none;white-space:nowrap;padding:5px 11px}
.tt-fokus .tt-k-judul{text-align:center}

.tt-email{gap:8px;max-width:100%}
.tt-email svg.i{width:18px;height:18px;flex:none}
.tt-email span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-kontak{align-items:center;text-align:center}
.tt-kontak .tt-k-judul,.tt-kontak .tt-k-desc{text-align:center}
.tt-kontak .tt-btn{align-self:center}
.tt-hak{margin-top:20px;text-align:center;color:var(--redup);font-size:.8rem}

.kp{max-width:560px;margin:0 auto;padding:24px 20px 64px;text-align:center}
.kp h1{margin:0 0 6px;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.kp-tgl{margin-bottom:24px;color:var(--redup);font-size:.85rem}
.kp h2{margin:28px 0 8px;font-size:1.05rem;font-weight:700}
.kp p{margin:0 0 10px;font-size:1rem;line-height:1.7}
.kp ul{margin:0 0 10px;padding:0;list-style:none}
.kp li{margin:0 0 8px;padding:12px 16px;background:var(--panel);border:1px solid var(--garis);border-radius:16px;font-size:.95rem;line-height:1.6}
.kp a{color:var(--aksen);font-weight:600}
.kp-hak{margin-top:32px;text-align:center;color:var(--redup);font-size:.8rem}

.fq{max-width:560px;margin:0 auto;padding:24px 20px 64px}
.fq-judul{margin:0 0 20px;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-align:center}
.fq-item{margin-bottom:10px;background:var(--panel);border:1px solid var(--garis);border-radius:20px;overflow:hidden}
.fq-item summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-weight:600;cursor:pointer;list-style:none}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--redup);border-bottom:2px solid var(--redup);transform:rotate(45deg);transition:transform .2s}
.fq-item[open] summary::after{transform:rotate(-135deg)}
.fq-jawab{padding:0 18px 16px;color:var(--redup);font-size:.95rem;line-height:1.7;text-align:justify;text-align-last:left}
.fq-hak{margin-top:28px;text-align:center;color:var(--redup);font-size:.8rem}

.tp{max-width:560px;margin:0 auto;padding:20px 14px 64px}
.tp-merek{display:flex;align-items:center;justify-content:center;gap:12px}
.tp-logo{width:48px;height:48px;flex:none;border-radius:50%;background:var(--panel);border:1px solid var(--garis);overflow:hidden}
.tp-logo img{width:100%;height:100%;object-fit:cover;display:block}
.tp-merek-teks{text-align:center}
.tp-merek-nama{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.tp-merek-sub{padding-left:.14em;color:var(--redup);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tp-cari{display:flex;align-items:center;gap:10px;height:48px;margin-top:18px;padding:0 18px;border-radius:999px;border:1.5px solid var(--garis);transition:border-color .2s}
.tp-cari:focus-within{border-color:var(--aksen)}
.tp-cari svg.i{width:18px;height:18px;flex:none;color:var(--redup)}
.tp-cari input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0}
.tp-cari input::placeholder{color:var(--redup)}
.tp-judul{margin:22px 0 10px;text-align:center;color:var(--aksen);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* teori pilihan (berputar) */
.tp-hero{position:relative;overflow:hidden;padding:24px;border-radius:24px;background:var(--aksen);color:var(--aksen-teks);cursor:pointer;text-align:center;transition:transform .1s}
.tp-hero:active{transform:scale(.97)}
.tp-blob1,.tp-blob2{position:absolute;border-radius:50%;background:var(--aksen-teks);opacity:.1}
.tp-blob1{top:-40px;right:-40px;width:128px;height:128px;filter:blur(24px)}
.tp-blob2{bottom:-32px;left:-32px;width:96px;height:96px;filter:blur(16px)}
.tp-hero-isi{position:relative;display:flex;flex-direction:column;align-items:center;transition:opacity .25s,transform .25s}
.tp-hbadge{display:inline-block;margin-bottom:12px;padding:4px 10px;border:1px solid currentColor;border-radius:8px;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tp-hjudul{margin:0 0 8px;padding:0 16px;font-size:1rem;font-weight:800;line-height:1.25}
.tp-hdesk{margin:0 0 12px;padding:0 8px;font-size:.75rem;line-height:1.65;opacity:.85}
.tp-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-hmeta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.tp-hinisial{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%;font-size:.6rem;font-weight:700}
.tp-hpenulis{font-size:.65rem;opacity:.85}
/* chip kategori */
.tp-chips{display:flex;gap:8px;overflow-x:auto;margin:16px -14px 0;padding:0 14px 8px;scrollbar-width:none}
.tp-chips::-webkit-scrollbar{display:none}
.tp-chip{flex:none;padding:8px 16px;border:1px solid var(--garis);border-radius:999px;background:transparent;color:inherit;font-size:.75rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .2s}
.tp-chip.aktif{background:var(--aksen);border-color:var(--aksen);color:var(--aksen-teks);font-weight:600}
/* daftar teori */
.tp-lh{display:flex;flex-direction:column;align-items:center;margin:18px 0 14px}
.tp-lh-judul{margin-bottom:4px;color:var(--redup);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tp-jml{padding:2px 10px;border:1px solid var(--garis);border-radius:999px;background:var(--panel);color:var(--redup);font-size:.68rem;font-weight:600}
@keyframes tpMasuk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tp-kartu{display:flex;flex-direction:column;align-items:center;margin-bottom:16px;padding:20px;border:1px solid var(--garis);border-radius:20px;background:var(--panel);text-align:center;animation:tpMasuk .35s ease-out}
.tp-ikon{width:48px;height:48px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--bg);color:var(--aksen);font-size:.875rem;font-weight:700;box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}
.tp-ic-matematika { background-color: #d1fae5; color: #047857; }
.tp-ic-fisika { background-color: #dbeafe; color: #1d4ed8; }
.tp-ic-biologi { background-color: #dcfce3; color: #15803d; }
.tp-ic-psikologi { background-color: #f3e8ff; color: #7e22ce; }
.tp-ic-ekonomi { background-color: #ffedd5; color: #c2410c; }
.tp-ic-filosofi { background-color: #fef3c7; color: #b45309; }
.tp-ic-kosmologi { background-color: #e8eaf6; color: #1a237e; }
.tp-ic-geologi { background-color: #efebe9; color: #4e342e; }
.tp-ic-sosiologi { background-color: #ffebee; color: #c62828; }
.tp-ic-politik { background-color: #fff8e1; color: #f9a825; }
.tp-ic-linguistik { background-color: #e3f2fd; color: #0d47a1; }
.tp-ic-seni { background-color: #fce4ec; color: #ad1457; }
.tp-ic-teknologi { background-color: #e8f5e9; color: #1b5e20; }
.tp-ic-filsafat { background-color: #fff3e0; color: #e65100; }
.tp-kat{display:inline-block;margin-bottom:6px;padding:2px 10px;border:1px solid var(--garis);border-radius:6px;background:var(--bg);color:var(--redup);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tp-nama{margin:0 0 4px;font-size:.875rem;font-weight:800;line-height:1.375}
.tp-tipe{margin:0 0 8px;color:var(--redup);font-size:.65rem}
.tp-desk{margin:0 0 14px;padding:0 4px;color:var(--redup);font-size:.75rem;line-height:1.65;text-align:justify;text-align-last:center}
.tp-more{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border:0;border-radius:999px;background:var(--aksen);color:var(--aksen-teks);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:transform .1s}
.tp-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.tp-more:active{transform:scale(.95)}
.tp-kosong{padding:40px 0;text-align:center;color:var(--redup);font-size:.9rem}
/* halaman detail teori */
.tp-d{display:flex;flex-direction:column;align-items:center;padding:0 4px}
.tp-quote{width:100%;margin-bottom:24px;padding:20px;border:1px solid var(--garis);border-radius:16px;background:var(--panel);color:var(--aksen);font-size:.875rem;font-weight:600;font-style:italic;line-height:1.625;text-align:center}
.tp-meta{display:flex;gap:8px;width:100%;margin-bottom:24px}
.tp-meta>div{flex:1;min-width:0;padding:8px;border:1px solid var(--garis);border-radius:12px;background:var(--panel);text-align:center}
.tp-meta span{display:block;margin-bottom:4px;color:var(--redup);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase}
.tp-meta b{display:block;font-size:.75rem;font-weight:700}
.tp-blok{width:100%;margin-bottom:24px}
.tp-judul-s{margin-bottom:8px;color:var(--aksen);font-size:.75rem;font-weight:700;letter-spacing:.05em;text-align:center;text-transform:uppercase}
.tp-teks{color:var(--redup);font-size:.875rem;line-height:1.7;text-align:justify;text-align-last:center}
.tp-ide{display:flex;flex-direction:column;gap:12px}
.tp-ide-k{padding:16px;border:1px solid var(--garis);border-radius:12px;background:var(--panel)}
.tp-ide-j{margin-bottom:4px;font-size:.75rem;font-weight:800;text-align:center}
.tp-ide-t{color:var(--redup);font-size:.75rem;line-height:1.65;text-align:justify;text-align-last:center}
.tp-rumus{padding:20px;border-radius:12px;background:#171717;text-align:center}
.tp-rumus-m{color:#fff;font-family:monospace;font-size:1.25rem;font-weight:700;letter-spacing:.05em}
.tp-rumus-d{margin-top:8px;color:#a3a3a3;font-size:.65rem;line-height:1.55}
.tp-fakta{width:100%;padding:16px;border:1px solid var(--garis);border-radius:12px;background:var(--panel)}
.tp-fakta-l{margin-bottom:8px;color:var(--aksen);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-align:center;text-transform:uppercase}
.tp-fakta-t{font-size:.8rem;line-height:1.65;text-align:justify;text-align-last:center}

/* panduan */
.pn{max-width:560px;margin:0 auto;padding:24px 20px 64px}
.pn-merek{text-align:center}
.pn-merek-nama{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pn-merek-sub{margin-top:2px;padding-left:.18em;color:var(--redup);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pn-cari{display:flex;align-items:center;gap:10px;height:48px;margin-top:20px;padding:0 18px;border-radius:999px;border:1.5px solid var(--garis);transition:border-color .2s}
.pn-cari:focus-within{border-color:var(--aksen)}
.pn-cari svg.i{width:18px;height:18px;flex:none;color:var(--redup)}
.pn-cari input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0}
.pn-cari input::placeholder{color:var(--redup)}
.pn-chips{display:flex;gap:8px;overflow-x:auto;margin:16px -20px 0;padding:0 20px 6px}
.pn-chip{flex:none;padding:7px 16px;border:1px solid var(--garis);border-radius:999px;background:transparent;font-size:.75rem;font-weight:500;white-space:nowrap;cursor:pointer}
.pn-chip.aktif{background:var(--aksen);border-color:var(--aksen);color:var(--aksen-teks);font-weight:600}
.pn-jml{margin:14px 0 6px;text-align:center;color:var(--redup);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.pn-kartu{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:20px 2px;border-bottom:1px solid var(--garis);cursor:pointer}
.pn-no{padding-top:3px;color:var(--redup);font-size:.75rem;font-weight:600;letter-spacing:.08em}
.pn-kat{color:var(--redup);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pn-nama{margin:4px 0 6px;font-size:1.05rem;font-weight:700;line-height:1.35}
.pn-desk{margin:0 0 10px;color:var(--redup);font-size:.85rem;line-height:1.65}
.pn-baca{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700}
.pn-baca svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pn-kosong{padding:40px 0;text-align:center;color:var(--redup);font-size:.9rem}
/* detail panduan */
.pn-d{display:flex;flex-direction:column;gap:28px}
.pn-ring{border:1px solid var(--garis);border-radius:16px;overflow:hidden}
.pn-ring-j{padding:12px 16px;border-bottom:1px solid var(--garis);background:var(--panel);color:var(--redup);font-size:.65rem;font-weight:700;letter-spacing:.14em;text-align:center;text-transform:uppercase}
.pn-row{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;border-bottom:1px dashed var(--garis);font-size:.82rem}
.pn-row:last-child{border-bottom:0}
.pn-row span{color:var(--redup)}
.pn-row b{text-align:right}
.pn-b h3{margin:0 0 10px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-align:center;text-transform:uppercase}
.pn-b h3::after{content:"";display:block;width:28px;height:2px;margin:10px auto 0;background:var(--aksen)}
.pn-t{font-size:.95rem;line-height:1.8;text-align:justify;text-align-last:center}
.pn-l{margin:0;padding:0;list-style:none}
.pn-l li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--garis);font-size:.9rem;line-height:1.7}
.pn-l li:last-child{border-bottom:0}
.pn-l li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:1.5px;background:var(--aksen)}
.pn-cat{padding:16px 18px;border-left:3px solid var(--aksen);border-radius:0 14px 14px 0;background:var(--panel);color:var(--redup);font-size:.85rem;line-height:1.75}

.pd{max-width:560px;margin:0 auto;padding:20px 14px 64px}
.pd-merek{display:flex;align-items:center;justify-content:center;gap:12px}
.pd-logo{width:48px;height:48px;flex:none;border-radius:50%;background:var(--panel);border:1px solid var(--garis);overflow:hidden}
.pd-logo img{width:100%;height:100%;object-fit:cover;display:block}
.pd-merek-teks{text-align:center}
.pd-merek-sub{padding-left:.14em}
.pd-merek-nama{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pd-merek-sub{color:var(--redup);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pd-cari{display:flex;align-items:center;gap:10px;height:48px;margin-top:18px;padding:0 18px;border-radius:999px;border:1.5px solid var(--garis);transition:border-color .2s}
.pd-cari:focus-within{border-color:var(--aksen)}
.pd-cari svg.i{width:18px;height:18px;flex:none;color:var(--redup)}
.pd-cari input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0}
.pd-cari input::placeholder{color:var(--redup)}
.pd-jml{margin:10px 0 0;text-align:center;color:var(--redup);font-size:.78rem;font-weight:600}
.pd-bagian{display:flex;align-items:center;gap:12px;margin:28px 0 14px;color:var(--redup);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.pd-bagian::before,.pd-bagian::after{content:"";flex:1;height:1px;background:var(--garis)}
.pd-kartu{margin-bottom:12px;padding:22px 20px;border:1px solid var(--garis);border-radius:24px;background:var(--panel);text-align:center}
.pd-nama{font-size:1.15rem;font-weight:700;line-height:1.25}
.pd-tipe{margin-top:4px;color:var(--redup);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pd-desk{margin:14px 0 18px;color:var(--redup);font-size:.9rem;line-height:1.7;text-align:justify;text-align-last:left}
.pd-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:11px;border:0;border-radius:999px;background:var(--aksen);color:var(--aksen-teks);font-size:.85rem;font-weight:700;cursor:pointer;transition:opacity .2s}
.pd-btn:hover{opacity:.88}
.pd-btn:active{transform:scale(.97)}
.pd-btn svg.i{width:15px;height:15px;stroke-width:2.5}
.pd-kosong{padding:40px 0;text-align:center;color:var(--redup);font-size:.9rem}

.pt{box-sizing:border-box;width:100vw;margin:28px calc(50% - 50vw);padding:18px 0;border:solid rgba(255,255,255,.14);border-width:1px 0;border-radius:0;background:#000;color:#fff;overflow:hidden}
.pt-kepala{display:flex;align-items:center;gap:10px;padding:0 18px}
.pt-logo{width:48px;height:48px;flex:none;overflow:hidden}
.pt-logo img{width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.6)}
.pt-nama{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.pt-label{margin:14px 0 10px;padding-right:18px;color:rgba(255,255,255,.65);font-size:.8rem}
.pt-baris{min-width:0;display:flex;gap:8px;overflow-x:auto;padding:0 18px 2px;scrollbar-width:none}
.pt-baris::-webkit-scrollbar{display:none}
.pt-tombol{flex:none;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:0;border-radius:999px;background:#fff;color:#000;font-size:.85rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:transform .1s}
.pt-tombol:active{transform:scale(.96)}
.pt-tombol svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* artikel pilihan (beranda) */
.ap{width:min(560px,100%);text-align:left;margin-top:-18px}
.ap-judul{margin:0 0 10px;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;text-align:center;scroll-margin-top:84px}
.ap-kartu{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--garis);cursor:pointer}
.ap-gambar{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:var(--panel);border:1px solid var(--garis)}
.ap-j{margin:14px 0 6px;font-size:1.2rem;font-weight:700;line-height:1.3;text-align:justify;text-align-last:left}
.ap-r{margin:0 0 14px;color:var(--redup);font-size:.95rem;line-height:1.6;text-align:justify;text-align-last:left}
.ap-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:fit-content;margin:0 auto;padding:10px 20px;border:0;border-radius:999px;background:var(--aksen);color:var(--aksen-teks);font-size:.9rem;font-weight:700;cursor:pointer}
.ap-btn svg.i{width:14px;height:14px;stroke-width:2.5}
.ap-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--redup);font-size:.78rem;text-transform:uppercase}
.ap-meta span{display:inline-flex;align-items:center;gap:6px}
.ap-meta svg.i{width:16px;height:16px}
.ap-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.ap-nb{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:10px 8px;border:0;border-radius:12px;background:var(--aksen);color:var(--aksen-teks);font-size:.78rem;font-weight:700;line-height:1.2;text-align:center;cursor:pointer}
.ap-nb svg.i{width:14px;height:14px;stroke-width:2.5;flex:none}
.ap-nb:active{transform:scale(.95)}
.ap-hal{color:var(--redup);font-size:.78rem;font-weight:600}

/* halaman detail khusus artikel pilihan: gambar 16:9 di atas, teks di bawah */
.baca-hero.ap-hero{aspect-ratio:auto;background:none;overflow:visible}
.baca-hero.ap-hero img{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.baca-hero.ap-hero .baca-hero-grad{display:none}
.baca-hero.ap-hero .baca-hero-teks{position:static;transform:none;padding:20px 20px 0}
.baca .baca-hero.ap-hero .baca-judul{color:var(--teks);text-align:center;text-align-last:center;font-size:clamp(1.5rem,6.5vw,2rem);line-height:1.25;margin:0 0 10px}
.baca-hero.ap-hero .baca-ringkas{max-width:none;color:var(--redup);text-align:justify;text-align-last:left}
.baca-hero.ap-hero.tanpa-gambar img{display:none}

.k-bulan{--w:#7c3aed}.k-mata{--w:#d97706}.k-alat{--w:#0d9488}.k-info{--w:#6b7280}
.ka-intro{margin:0 0 14px;text-align:center;color:var(--redup);font-size:.8rem}

.ka-item{margin-bottom:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--garis);border-left:4px solid var(--w);border-radius:16px;text-align:center}
.ka-atas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ka-tgl{display:flex;align-items:baseline;gap:6px}
.ka-tgl b{font-size:1.5rem;line-height:1;font-weight:700}
.ka-tgl span{color:var(--redup);font-size:.7rem;font-weight:600;text-transform:uppercase}
.ka-chip{padding:2px 10px;border:1px solid var(--w);border-radius:999px;color:var(--w);font-size:.62rem;font-weight:700;white-space:nowrap}
.ka-judul{font-size:.95rem;font-weight:600;line-height:1.35}
.ka-rel{margin-top:4px;color:var(--w);font-size:.7rem;font-weight:700}
.ka-more{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:5px 12px;border:1px solid var(--garis);border-radius:999px;background:var(--bg);color:var(--redup);font-size:.7rem;font-weight:600;cursor:pointer}
.ka-more svg.i{width:14px;height:14px;transition:transform .2s}
.ka-item.buka .ka-more svg.i{transform:rotate(180deg)}
.ka-cat{display:none;margin-top:10px;color:var(--redup);font-size:.8rem;line-height:1.65}
.ka-item.buka .ka-cat{display:block}
.ka-item.ini{border-top-color:var(--aksen);border-right-color:var(--aksen);border-bottom-color:var(--aksen)}
.ka-item.ini .ka-tgl b{color:var(--aksen)}
.ka-item.lewat{opacity:.5}
.ka-kosong{padding:40px 0;text-align:center;color:var(--redup);font-size:.85rem}

.ka-foot{flex:none;background:var(--bg);border-top:1px solid var(--garis);padding:0 max(20px,calc((100% - 560px)/2)) env(safe-area-inset-bottom,0px)}
.ka-foot-head{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 0;border:0;background:none;font-size:.8rem;font-weight:700;cursor:pointer}
.ka-foot-head svg.i{width:16px;height:16px;transition:transform .2s}
.ka-foot.tutup .ka-foot-head svg.i{transform:rotate(180deg)}
.ka-foot-isi{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding-bottom:12px}
.ka-foot.tutup .ka-foot-isi{display:none}
.ka-leg{display:flex;align-items:flex-start;gap:8px;min-width:0}
.ka-leg b{display:block;font-size:.72rem}
.ka-leg span{display:block;color:var(--redup);font-size:.62rem;line-height:1.35}
.ka-dot{flex:none;width:10px;height:10px;margin-top:3px;border-radius:3px;background:var(--w)}
/* artikel tersimpan */
.simpan-btn[aria-pressed="true"]{border-color:var(--aksen)}
.simpan-btn[aria-pressed="true"] svg{fill:currentColor}
.sv{max-width:560px;margin:0 auto;padding:20px 20px 64px}
.sv-info{margin-bottom:14px;text-align:center;color:var(--redup);font-size:.8rem}
.sv-kosong{padding:48px 12px;text-align:center;color:var(--redup);font-size:.9rem;line-height:1.7}
.sv-item{margin-bottom:12px;padding:18px;border:1px solid var(--garis);border-radius:20px;background:var(--panel);text-align:center}
.sv-kat{color:var(--redup);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sv-j{margin:6px 0;font-size:1rem;font-weight:700;line-height:1.35}
.sv-r{margin:0 0 14px;color:var(--redup);font-size:.85rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv-aksi{display:flex;justify-content:center;gap:8px;margin-top:12px}
.sv-baca,.sv-hapus{padding:9px 20px;border-radius:999px;font-size:.82rem;font-weight:700;cursor:pointer}
.sv-baca{border:0;background:var(--aksen);color:var(--aksen-teks)}
.sv-hapus{border:1px solid var(--garis);background:transparent;color:var(--redup)}
.sv-baca:active,.sv-hapus:active{transform:scale(.95)}

/* dialog konfirmasi */
.kf{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kf.buka{display:flex}
.kf-kartu{width:100%;max-width:320px;padding:22px 18px 18px;background:var(--bg);color:var(--teks);border:1px solid var(--garis);border-radius:20px;text-align:center}
.kf-judul{font-weight:700;font-size:1rem}
.kf-isi{margin:8px 0 18px;color:var(--redup);font-size:.88rem;line-height:1.6}
.kf-aksi{display:flex;gap:8px}
.kf-aksi button{flex:1;padding:11px;border-radius:999px;font-size:.88rem;font-weight:700;cursor:pointer}
.kf-aksi button:active{transform:scale(.95)}
.kf-batal{border:1px solid var(--garis);background:transparent;color:var(--teks)}
.kf-ya{border:0;background:var(--aksen);color:var(--aksen-teks)}

.ak-isi{padding:24px 22px 40px}
.ak-card{margin-bottom:44px}
.ak-samping img{flex:none;aspect-ratio:8/9;max-height:none;object-fit:cover}
.ak-teks{padding:14px 18px 0 2px;font-size:.78rem;line-height:1.7;text-align:justify;text-align-last:left;white-space:pre-line}
.ak-card>.ak-teks:first-child{padding-top:0}
.ak-samping{display:flex;align-items:center;gap:8px}
.ak-samping img{flex:none}
.ak-samping .ak-teks{flex:1;min-width:0;padding:0;text-align:left}
.ak-q{padding:0 28px;font-style:italic;font-size:1.1rem;line-height:1.7;text-align:justify;text-align-last:center;white-space:pre-line}
/* Perbaikan layout agar tidak terjepit 760px */
.st-main { max-width: 100%; padding: 0; }