/* ModalWallet — gaya "buku saku pemegang saham" */
:root{
  --krem:#fefce8; --tinta:#1c1917; --hijau:#166534; --hijau-tua:#14532d; --cokelat:#92400e;
  --panel:#f7f1d8; --garis:#e6dcb4; --garis-halus:#efe7c6; --redup:#57534e;
  --serif:"Young Serif",Georgia,"Times New Roman",serif; --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--krem);color:var(--tinta);font:17px/1.7 var(--sans);overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--hijau);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--cokelat)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.25;color:var(--tinta)}
h2{font-size:1.55rem;margin:2.2rem 0 .8rem}
h3{font-size:1.18rem;margin:1.6rem 0 .5rem}
p,ul,ol{margin:0 0 1rem}
.lompat{position:absolute;left:-999px;top:0;background:var(--hijau);color:#fff;padding:10px 14px;z-index:9}
.lompat:focus{left:12px}

/* sampul atas */
.sampul{background:var(--krem);border-bottom:3px double var(--hijau)}
.sampul-dalam{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.merek{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--tinta);font:1.35rem var(--serif)}
.merek b{font-weight:400;color:var(--hijau)}
.jalur{display:flex;gap:4px;flex-wrap:wrap}
.jalur a{display:inline-block;padding:9px 12px;border-radius:var(--r);text-decoration:none;color:var(--tinta);font-weight:500;font-size:.95rem}
.jalur a:hover,.jalur a[aria-current]{background:var(--panel);color:var(--hijau)}
.laci{display:none;position:relative}
.laci summary{list-style:none;cursor:pointer;padding:10px 14px;border:1px solid var(--hijau);border-radius:var(--r);color:var(--hijau);font-weight:700;min-height:44px}
.laci summary::-webkit-details-marker{display:none}
.laci nav{position:absolute;right:0;top:52px;width:250px;background:#fffef6;border:1px solid var(--garis);border-radius:var(--r);box-shadow:0 10px 30px rgba(28,25,23,.12);padding:6px;z-index:5}
.laci nav a{display:block;padding:11px 12px;text-decoration:none;color:var(--tinta);border-bottom:1px dashed var(--garis-halus)}

/* pita judul */
.pita{max-width:1180px;margin:0 auto;padding:22px 16px 8px}
.remah ol{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:.88rem;color:var(--redup)}
.remah li+li::before{content:"›";margin:0 6px 0 2px;color:var(--cokelat)}
.pita-baris{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}
.pita h1{font-size:clamp(1.7rem,4vw,2.55rem);margin:0 0 12px;max-width:860px}
.pembuka{font-size:1.08rem;color:#3f3a36;max-width:820px}
.cap{flex:none;margin:6px 0 0;border:2px solid var(--cokelat);color:var(--cokelat);border-radius:var(--r);padding:6px 10px;text-align:center;transform:rotate(-4deg);font-size:.8rem;line-height:1.3;text-transform:uppercase;letter-spacing:.06em;background:rgba(146,64,14,.04)}
.cap span{display:block;font-weight:700}
.cap time{font-family:var(--serif);text-transform:none;letter-spacing:0;font-size:.95rem}

/* buku: glosarium kiri + lembar */
.buku{max-width:1180px;margin:0 auto;padding:8px 16px 40px;display:grid;grid-template-columns:270px minmax(0,1fr);gap:36px;align-items:start}
.glosarium{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto;background:var(--panel);border:1px solid var(--garis);border-radius:var(--r);padding:16px 16px 10px;font-size:.93rem}
.glos-judul{font-size:1.05rem;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--hijau)}
.glosarium dl{margin:0}
.glosarium dt{font-weight:700;color:var(--hijau);margin-top:10px}
.glosarium dd{margin:2px 0 0;padding-bottom:8px;border-bottom:1px dashed var(--garis);line-height:1.55}
.glos-kaki{font-size:.85rem;color:var(--redup);margin:10px 0 0}
.lembar{min-width:0;max-width:760px}
.lembar>p:first-of-type{margin-top:0}
.foto{margin:0 0 1.6rem}
.foto img{border-radius:var(--r);border:1px solid var(--garis);background:var(--panel)}
.foto figcaption{font-size:.86rem;color:var(--redup);margin-top:6px;padding-left:10px;border-left:3px solid var(--cokelat)}

/* tabel buku bergaris */
.gulung{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--garis);border-radius:var(--r);background:#fffef6}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--garis-halus)}
thead th{background:var(--hijau);color:#fefce8;font-weight:500;font-size:.88rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:rgba(247,241,216,.55)}
td.angka,th.angka{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
caption{caption-side:bottom;text-align:left;font-size:.85rem;color:var(--redup);padding:8px 12px}

/* kotak */
.catatan{background:var(--panel);border-left:4px solid var(--cokelat);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;margin:1.4rem 0}
.catatan p:last-child{margin:0}
.risiko{border:2px dashed var(--cokelat);border-radius:var(--r);padding:14px 16px;margin:1.6rem 0;background:#fffaf0}
.risiko strong:first-child{color:var(--cokelat)}
.cek{list-style:none;padding:0}
.cek li{padding:8px 0 8px 34px;position:relative;border-bottom:1px dashed var(--garis)}
.cek li::before{content:"";position:absolute;left:4px;top:12px;width:16px;height:16px;border:2px solid var(--hijau);border-radius:4px}
.langkah{counter-reset:l;list-style:none;padding:0}
.langkah li{counter-increment:l;position:relative;padding:4px 0 12px 48px}
.langkah li::before{content:counter(l);position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:50%;background:var(--hijau);color:#fefce8;font:1rem/34px var(--serif);text-align:center}

/* kalkulator */
.hitung{background:#fffef6;border:1px solid var(--hijau);border-radius:var(--r);padding:16px;margin:1.6rem 0;box-shadow:4px 4px 0 var(--panel)}
.hitung h3{margin-top:0}
.hitung-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.hitung label{display:block;font-size:.9rem;font-weight:500}
.hitung input{display:block;width:100%;margin-top:4px;height:44px;padding:8px 10px;border:1px solid #bfb58a;border-radius:var(--r);background:#fff;font:1rem var(--sans);color:var(--tinta)}
.hitung input:focus{outline:2px solid var(--hijau);outline-offset:1px}
.hasil{margin:14px 0 0;padding:12px;background:var(--panel);border-radius:var(--r);font-size:.98rem}
.hasil output{font-family:var(--serif);font-size:1.2rem;color:var(--hijau)}
.hitung .kecil{font-size:.85rem;color:var(--redup);margin:8px 0 0}

/* tanya jawab */
.tanya{margin-top:2.4rem;border-top:3px double var(--hijau);padding-top:.4rem}
.tj{border-bottom:1px dashed var(--garis);padding-bottom:.4rem}
.tj h3{font-family:var(--sans);font-weight:700;font-size:1.02rem}

/* lanjut */
.lanjut ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.lanjut a{display:block;padding:12px 14px;border:1px solid var(--garis);border-radius:var(--r);background:#fffef6;text-decoration:none;color:var(--tinta);min-height:44px}
.lanjut a span{display:block;font-family:var(--serif);color:var(--hijau)}
.lanjut small{display:block;color:var(--redup);font-size:.85rem;line-height:1.45;margin-top:2px}
.lanjut a:hover{border-color:var(--hijau)}

/* legal */
.isi-legal .lembar-legal{max-width:820px;margin:0 auto;padding:6px 16px 44px}
.lakukan{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:1rem 0 1.4rem}
.lakukan div{background:#fffef6;border:1px solid var(--garis);border-radius:var(--r);padding:12px 14px}
.lakukan h2,.lakukan h3{margin-top:0;font-size:1.1rem}
.daftar-404 a{display:inline-block;padding:8px 0;min-height:32px}

/* ---- beranda ---- */
.halaman-depan{max-width:1180px;margin:0 auto;padding:0 16px 48px}
.sampul-buku{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding:30px 0 20px}
.label-buku{display:inline-block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cokelat);border:1px solid var(--cokelat);border-radius:var(--r);padding:3px 10px;margin-bottom:12px}
.sampul-buku h1{font-size:clamp(1.9rem,4.6vw,3rem);margin:0 0 14px}
.sampul-buku .foto{margin:0}
.identitas{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:18px 0 0;padding:12px 14px;border:1px solid var(--garis);border-radius:var(--r);background:#fffef6;font-size:.93rem}
.identitas dt{color:var(--redup)}
.identitas dd{margin:0;font-weight:500}
.bagian-depan{margin-top:34px}
.bagian-depan>h2{margin-top:0}
.pengantar-bagian{max-width:780px;color:#3f3a36}
.mutasi{border:1px solid var(--garis);border-radius:var(--r);background:#fffef6;overflow:hidden}
.mutasi-kepala,.mutasi-baris{display:grid;grid-template-columns:130px 1.1fr 1.6fr 110px;gap:0}
.mutasi-kepala{background:var(--hijau);color:#fefce8;font-size:.85rem;letter-spacing:.03em}
.mutasi-kepala span{padding:10px 12px}
.mutasi-baris{border-bottom:1px solid var(--garis-halus);background-image:linear-gradient(transparent 95%,rgba(22,101,52,.06) 95%);}
.mutasi-baris:nth-child(odd){background-color:rgba(247,241,216,.5)}
.mutasi-baris>*{padding:12px}
.stempel{align-self:center;justify-self:start;margin-left:10px;border:2px solid var(--cokelat);color:var(--cokelat);border-radius:var(--r);font-size:.8rem;font-weight:700;padding:3px 8px;transform:rotate(-3deg);text-transform:uppercase;letter-spacing:.04em;line-height:1.35;text-align:center}
.peristiwa{font-family:var(--serif);font-size:1.02rem}
.peristiwa a{display:inline-block;padding:2px 0}
.ket-mutasi{font-size:.95rem;color:#3f3a36}
.saldo{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--hijau)}
.saldo small{display:block;font-weight:400;color:var(--redup);font-size:.8rem}
.catatan-mutasi{font-size:.88rem;color:var(--redup);margin-top:8px}
.grid-aksi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kartu-aksi{background:#fffef6;border:1px solid var(--garis);border-top:5px solid var(--hijau);border-radius:var(--r);padding:16px}
.kartu-aksi:nth-child(3n+2){border-top-color:var(--cokelat)}
.kartu-aksi h3{margin:0 0 6px}
.kartu-aksi h3 a{text-decoration:none;color:var(--tinta);display:inline-block;padding:2px 0}
.kartu-aksi h3 a:hover{color:var(--hijau)}
.kartu-aksi .efek{font-size:.9rem;border-top:1px dashed var(--garis);padding-top:8px;margin:8px 0 0;color:var(--redup)}
.kartu-aksi .efek b{color:var(--cokelat);font-weight:700}
.neraca{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--garis);border-radius:var(--r);overflow:hidden;background:#fffef6}
.neraca>div{padding:16px 18px}
.neraca>div+div{border-left:2px solid var(--hijau)}
.neraca h3{margin-top:0}
.neraca ul{padding-left:20px}
.dua-kolom{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
.rak{list-style:none;padding:0;margin:0;counter-reset:rak}
.rak>li{border-bottom:1px solid var(--garis);padding:12px 0}
.rak h3{margin:0 0 6px;font-size:1.1rem}
.rak ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.rak ul a{display:inline-block;padding:7px 12px;border:1px solid var(--hijau);border-radius:var(--r);text-decoration:none;font-size:.93rem;min-height:36px}
.rak ul a:hover{background:var(--hijau);color:#fefce8}
.tombol{display:inline-block;background:var(--hijau);color:#fefce8;text-decoration:none;padding:11px 18px;border-radius:var(--r);font-weight:700;min-height:44px}
.tombol:hover{background:var(--hijau-tua);color:#fefce8}

/* kaki */
.kaki{background:var(--tinta);color:#e7e5e4;margin-top:20px}
.kaki-dalam{max-width:1180px;margin:0 auto;padding:30px 16px 10px;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:22px}
.kaki h2{font-size:1rem;color:#fefce8;margin:0 0 8px;font-family:var(--sans);font-weight:700;letter-spacing:.04em}
.kaki ul{list-style:none;padding:0;margin:0}
.kaki li a{display:inline-block;padding:5px 0;min-height:30px;color:#e7e5e4;text-decoration:none;font-size:.93rem}
.kaki li a:hover{color:#fde68a}
.kaki p{font-size:.92rem;line-height:1.6}
.kaki-merek a{color:#fde68a}
.kaki-nama{font:1.3rem var(--serif);color:#fefce8;margin-bottom:6px}
.kaki-catatan{max-width:1180px;margin:0 auto;padding:12px 16px 26px;border-top:1px solid #44403c;font-size:.86rem;color:#d6d3d1}

@media (max-width:980px){
  .buku{grid-template-columns:1fr}
  .glosarium{position:static;max-height:none;order:2}
  .lembar{order:1;max-width:none}
  .kaki-dalam{grid-template-columns:1fr 1fr}
  .kaki-merek{grid-column:1/-1}
  .grid-aksi{grid-template-columns:1fr 1fr}
  .dua-kolom{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .jalur{display:none}
  .laci{display:block}
  .pita-baris{flex-direction:column-reverse;gap:6px}
  .cap{transform:rotate(-2deg)}
  .sampul-buku{grid-template-columns:1fr;padding-top:18px}
  .mutasi-kepala{display:none}
  .mutasi-baris{grid-template-columns:1fr auto;padding:10px 0}
  .mutasi-baris>*{padding:4px 12px}
  .mutasi-baris .stempel{grid-column:1/-1;margin:0 12px 4px}
  .mutasi-baris .peristiwa{grid-column:1/2}
  .mutasi-baris .saldo{grid-column:2/3;grid-row:2}
  .mutasi-baris .ket-mutasi{grid-column:1/-1}
  .grid-aksi,.neraca,.lakukan{grid-template-columns:1fr}
  .neraca>div+div{border-left:0;border-top:2px solid var(--hijau)}
  .kaki-dalam{grid-template-columns:1fr}
  h2{font-size:1.35rem}
  th,td{padding:8px 9px}
}