/* Situs panduan SIPOSKO: bahasa visual Zamrud, sama dengan aplikasi. */
:root {
    --malam: #08201d; --zamrud-900: #0b2f2b; --zamrud-800: #0f3d38; --zamrud-600: #0f766e; --zamrud-500: #14958a; --mint: #2dd4bf;
    --zamrud-50: #e8f5f2; --emas: #fbbf24; --emas-tua: #b7791f;
    --tinta: #15312d; --tinta-2: #4b625e; --tinta-3: #7a8e8a; --garis: #dfe8e5; --latar: #f6f8f7; --putih: #fff;
    --bayang: 0 1px 2px rgba(8, 32, 29, .06), 0 12px 32px -14px rgba(8, 32, 29, .22);
    --huruf: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--latar); color: var(--tinta); font: 17px/1.7 var(--huruf); }
a { color: var(--zamrud-600); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--emas); outline-offset: 2px; border-radius: 6px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { line-height: 1.22; letter-spacing: -.015em; color: var(--zamrud-900); }
.label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zamrud-600); }
.label-terang { color: var(--emas); }
.merek { display: block; line-height: 0; }
.merek img { height: 38px; width: auto; }

.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 11px; font-size: 14.5px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.tombol-garis { color: var(--zamrud-800); background: var(--putih); border: 1px solid var(--garis); }
.tombol-garis:hover { border-color: var(--zamrud-500); background: var(--zamrud-50); }
.tombol-emas { color: var(--malam); background: var(--emas); }
.tombol-emas:hover { transform: translateY(-1px); background: #fcd34d; }

/* ===== Pencarian ===== */
.cari { position: relative; display: flex; align-items: center; flex: 1; max-width: 540px; }
.cari > svg { position: absolute; left: 14px; color: var(--tinta-3); pointer-events: none; }
.cari input { width: 100%; height: 46px; padding: 0 16px 0 44px; font: inherit; font-size: 16px; color: var(--tinta); background: var(--putih); border: 1px solid var(--garis); border-radius: 12px; }
.cari input:focus { outline: none; border-color: var(--zamrud-500); box-shadow: 0 0 0 3px rgba(20, 149, 138, .16); }
.cari-hasil { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: min(62vh, 480px); overflow-y: auto; padding: 6px; background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; box-shadow: 0 24px 56px -18px rgba(8, 32, 29, .4); text-align: left; }
.cari-hasil a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--tinta); text-decoration: none; line-height: 1.4; }
.cari-hasil a:hover, .cari-hasil a.pilih { background: var(--zamrud-50); }
.cari-hasil small { display: block; font-size: 11.5px; font-weight: 650; color: var(--zamrud-600); }
.cari-hasil b { display: block; font-size: 15px; font-weight: 650; }
.cari-hasil span { display: block; margin-top: 2px; font-size: 13px; color: var(--tinta-2); }
.cari-hasil mark { background: rgba(251, 191, 36, .42); color: inherit; border-radius: 2px; }
.cari-kosong { padding: 16px 12px; font-size: 14px; color: var(--tinta-2); }

/* ===== Halaman depan ===== */
.hero { position: relative; color: #dcebe7; background: radial-gradient(90% 130% at 82% -10%, #17564e 0%, transparent 62%), linear-gradient(160deg, var(--zamrud-800), var(--malam) 78%); padding-bottom: 104px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 100%); mask-image: linear-gradient(115deg, transparent 30%, #000 100%); }
.hero-atas, .hero-isi { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.hero-atas { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 26px; }
.tautan-demo { color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 11px; white-space: nowrap; }
.tautan-demo:hover { border-color: var(--emas); color: var(--emas); }
.hero-isi { position: relative; z-index: 2; padding-top: 76px; }
.hero h1 { margin: 14px 0 16px; max-width: 800px; font-size: clamp(34px, 5.6vw, 58px); line-height: 1.08; letter-spacing: -.028em; font-weight: 750; color: #fff; }
.hero h1 em { font-style: normal; color: var(--emas); }
.hero p { margin: 0 0 30px; max-width: 580px; font-size: 19px; color: #b9d2cc; }
.hero .cari input { height: 54px; border: 0; }
.depan-isi { position: relative; z-index: 1; max-width: 1120px; margin: -64px auto 0; padding: 0 24px 56px; }
.kartu-kartu { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.kartu { display: flex; flex-direction: column; position: relative; padding: 26px; background: var(--putih); border: 1px solid var(--garis); border-radius: 20px; box-shadow: var(--bayang); transition: transform .18s, border-color .18s; }
.kartu:hover { transform: translateY(-3px); border-color: var(--zamrud-500); }
.kartu-utama { background: linear-gradient(150deg, #fff 45%, #e5f5f0); border-color: #bfe0d8; }
.kartu-atas { display: flex; justify-content: space-between; align-items: center; }
.nomor { font-size: 14px; font-weight: 700; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.tanda { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; color: var(--zamrud-600); background: var(--zamrud-50); }
.kartu-utama .tanda { color: var(--malam); background: var(--emas); }
.kartu h2 { margin: 42px 0 2px; font-size: 25px; }
.kartu h2 a { color: inherit; text-decoration: none; }
.kartu h2 a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.kartu-untuk { font-size: 14px; font-weight: 650; color: var(--zamrud-600); }
.kartu p { margin: 12px 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--tinta-2); }
.kartu-bawah { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--garis); font-size: 13.5px; color: var(--tinta-2); }
.unduh { position: relative; z-index: 1; font-weight: 700; padding: 3px 4px; }
.rute { display: grid; grid-template-columns: 280px 1fr; gap: 32px; margin-top: 64px; align-items: start; }
.rute h2 { margin: 8px 0 0; font-size: 28px; }
.rute ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 28px; margin: 0; padding: 0; list-style: none; }
.rute a { display: flex; align-items: center; gap: 14px; padding: 13px 0; color: var(--tinta); font-weight: 600; font-size: 16px; line-height: 1.35; text-decoration: none; border-bottom: 1px solid var(--garis); }
.rute a:hover { color: var(--zamrud-600); }
.rute span { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; font-size: 15px; font-weight: 750; color: var(--mint); background: var(--zamrud-900); }
.ajak { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 64px; padding: 34px 38px; border-radius: 20px; color: #c6dcd7; background: linear-gradient(120deg, var(--zamrud-900), #145048); }
.ajak h2 { margin: 0 0 6px; font-size: 25px; color: #fff; }
.ajak p { margin: 0; max-width: 620px; font-size: 16px; }
.kaki { display: flex; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 8px 24px 34px; font-size: 13.5px; color: var(--tinta-3); }

/* ===== Halaman buku ===== */
.progres { position: fixed; inset: 0 0 auto 0; z-index: 80; height: 3px; }
.progres i { display: block; height: 100%; width: 0; background: var(--emas); }
.samping { position: fixed; inset: 0 auto 0 0; z-index: 70; display: flex; flex-direction: column; width: 300px; padding: 22px 16px 16px; color: #b9d2cc; background: linear-gradient(180deg, var(--zamrud-900), var(--malam)); }
.samping .merek { padding: 0 8px; }
.ganti-buku { display: flex; flex-direction: column; gap: 2px; margin: 22px 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ganti-buku a { padding: 7px 10px; border-radius: 9px; color: #b9d2cc; font-size: 14px; text-decoration: none; line-height: 1.3; }
.ganti-buku a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ganti-buku a[aria-current] { color: #fff; font-weight: 650; background: rgba(255, 255, 255, .1); }
.toc { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.toc-judul { padding: 0 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7fa39b; }
.toc a { display: block; text-decoration: none; line-height: 1.32; }
.toc-utama { position: relative; padding: 8px 10px; border-radius: 9px; color: #d6e6e2; font-size: 14.5px; font-weight: 550; }
.toc-utama:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.toc-bab.aktif > .toc-utama { color: #fff; background: rgba(255, 255, 255, .08); }
.toc-bab.aktif > .toc-utama::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--emas); }
.toc-sub { display: none; margin: 2px 0 8px 12px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .12); }
.toc-bab.aktif .toc-sub { display: block; }
.toc-anak { padding: 5px 8px; border-radius: 7px; color: #9dbcb5; font-size: 13.5px; }
.toc-anak:hover, .toc-anak.aktif { color: #fff; }
.toc-anak.aktif { font-weight: 600; }
.kanan { margin-left: 300px; min-width: 0; }
.atas { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 4vw, 44px); background: rgba(246, 248, 247, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis); }
.menu { display: none; place-items: center; width: 44px; height: 44px; flex: none; color: var(--zamrud-800); background: var(--putih); border: 1px solid var(--garis); border-radius: 11px; cursor: pointer; }
.atas .tombol { margin-left: auto; height: 46px; }
main { display: block; }
.kanan main { max-width: 820px; margin: 0 auto; padding: 44px clamp(16px, 4vw, 44px) 40px; }
.judul-buku { padding-bottom: 26px; margin-bottom: 8px; border-bottom: 1px solid var(--garis); }
.judul-buku h1 { margin: 8px 0 12px; font-size: clamp(30px, 4.4vw, 42px); letter-spacing: -.025em; }
.judul-buku p { margin: 0; font-size: 18.5px; color: var(--tinta-2); }
.naskah h2 { margin: 54px 0 12px; font-size: 29px; }
.naskah h3 { margin: 36px 0 8px; font-size: 21px; }
.naskah p { margin: 0 0 16px; }
.naskah strong { color: var(--zamrud-900); font-weight: 650; }
.naskah ul, .naskah ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.naskah li { position: relative; padding-left: 34px; margin-bottom: 9px; }
.naskah ul > li::before { content: ""; position: absolute; left: 11px; top: .68em; width: 7px; height: 7px; border-radius: 2px; background: var(--zamrud-500); transform: rotate(45deg); }
.naskah ol { counter-reset: n; }
.naskah ol > li { counter-increment: n; }
.naskah ol > li::before { content: counter(n); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--zamrud-600); background: var(--zamrud-50); }
.naskah li ul, .naskah li ol { margin: 8px 0 0; }
.tabel { margin: 4px 0 22px; overflow-x: auto; background: var(--putih); border: 1px solid var(--garis); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
th { padding: 11px 14px; text-align: left; font-size: 12.5px; letter-spacing: .03em; color: var(--zamrud-800); background: var(--zamrud-50); white-space: nowrap; }
td { padding: 11px 14px; border-top: 1px solid var(--garis); vertical-align: top; min-width: 110px; }
figure { margin: 22px 0 26px; }
.foto { display: block; width: 100%; padding: 0; border: 1px solid var(--garis); border-radius: 13px; overflow: hidden; background: var(--putih); box-shadow: var(--bayang); cursor: zoom-in; }
.foto img { display: block; width: 100%; height: auto; }
figcaption { margin-top: 9px; padding: 0 2px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.tj { margin-bottom: 10px; background: var(--putih); border: 1px solid var(--garis); border-radius: 13px; }
.tj[open] { border-color: #bfe0d8; }
.tj summary { position: relative; padding: 15px 46px 15px 18px; font-weight: 650; line-height: 1.4; color: var(--zamrud-900); cursor: pointer; list-style: none; }
.tj summary::-webkit-details-marker { display: none; }
.tj summary::after { content: ""; position: absolute; right: 19px; top: 21px; width: 9px; height: 9px; border-right: 2px solid var(--zamrud-500); border-bottom: 2px solid var(--zamrud-500); transform: rotate(45deg); transition: transform .15s; }
.tj[open] summary::after { top: 25px; transform: rotate(-135deg); }
.tj-isi { padding: 0 18px 4px; }
.tj figure { margin-top: 6px; }
.tj.sorot { animation: sorot 1.6s ease-out; }
@keyframes sorot { from { box-shadow: 0 0 0 4px rgba(251, 191, 36, .55); } to { box-shadow: 0 0 0 4px transparent; } }
.kaki-buku { display: flex; justify-content: space-between; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--garis); font-size: 14px; color: var(--tinta-3); }
.redup { position: fixed; inset: 0; z-index: 65; background: rgba(4, 18, 16, .55); }
.kaca { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: rgba(4, 18, 16, .93); }
.kaca[open] { display: grid; place-items: center; }
.kaca::backdrop { background: transparent; }
.kaca img { max-width: 100%; max-height: calc(100vh - 32px); border-radius: 10px; }
.kaca button { position: fixed; top: 12px; right: 12px; width: 46px; height: 46px; font-size: 28px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); border: 0; border-radius: 12px; cursor: pointer; }

@media (max-width: 980px) {
    .kartu-kartu { grid-template-columns: 1fr; }
    .kartu h2 { margin-top: 20px; }
    .rute { grid-template-columns: 1fr; gap: 16px; }
    .ajak { flex-direction: column; align-items: flex-start; }
    .samping { transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 44px rgba(0, 0, 0, .3); }
    .samping.buka { transform: none; }
    .kanan { margin-left: 0; }
    .menu { display: grid; }
}
@media (max-width: 640px) {
    body { font-size: 16.5px; }
    .hero { padding-bottom: 92px; }
    .hero-isi { padding-top: 48px; }
    .hero p { font-size: 17px; }
    .tautan-demo { font-size: 13px; padding: 8px 11px; }
    .merek img { height: 32px; }
    .depan-isi { padding-left: 16px; padding-right: 16px; }
    .hero-atas, .hero-isi { padding-left: 16px; padding-right: 16px; }
    .rute ol { grid-template-columns: 1fr; }
    .ajak { padding: 26px 22px; }
    .atas .tombol { width: 46px; padding: 0; }
    .atas .tombol span { display: none; }
    .kanan main { padding-top: 28px; }
    .naskah h2 { margin-top: 42px; font-size: 25px; }
    .kaki { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ===== PDF ===== */
@page { size: A4; margin: 17mm 16mm 18mm; @bottom-center { content: counter(page); font: 10pt -apple-system, "Segoe UI", Arial, sans-serif; color: #7a8e8a; } }
@page :first { margin: 0; @bottom-center { content: none; } }
body.cetak { background: #fff; font-size: 11pt; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sampul { display: flex; flex-direction: column; justify-content: space-between; height: 296.5mm; padding: 26mm 22mm 20mm; color: #dcebe7; background: linear-gradient(155deg, #0f3d38, #08201d 80%); break-after: page; }
.sampul h1 { margin: 10px 0 16px; font-size: 38pt; line-height: 1.1; color: #fff; }
.sampul p { margin: 0; font-size: 14pt; color: #b9d2cc; }
.daftar-cetak { break-after: page; }
.daftar-cetak h2 { margin: 0 0 14px; font-size: 22pt; }
.daftar-cetak ol { margin: 0; padding-left: 22px; font-size: 13pt; line-height: 2; }
.cetak .naskah h2 { margin: 0 0 10px; font-size: 21pt; break-before: page; break-after: avoid; }
.cetak .bab:first-child h2 { break-before: auto; }
.cetak .naskah h3 { margin: 18px 0 6px; font-size: 14pt; break-after: avoid; }
.cetak figure { margin: 10px 0 14px; break-inside: avoid; }
.cetak .foto { box-shadow: none; }
.cetak figcaption { font-size: 9.5pt; margin-top: 5px; }
.cetak .tabel { overflow: visible; background: none; border: 0; border-radius: 0; }
.cetak table { font-size: 9.5pt; }
.cetak tr { break-inside: avoid; }
.cetak .naskah li { padding-left: 28px; }
.cetak .tj { break-inside: avoid; border: 0; border-bottom: 1px solid var(--garis); border-radius: 0; margin: 0 0 6px; }
.cetak .tj summary { padding: 8px 0 2px; }
.cetak .tj summary::after { display: none; }
.cetak .tj-isi { padding: 0; }