/* =====================================================================
   buku.css — halaman statis per buku (Landing Page/buku/<id>.html)
   Dipakai bersama style.css (token warna, tombol, footer). Tanpa JavaScript.
   ===================================================================== */
.bk{--ink-2:#565879;--warna:var(--indigo)}  /* teks sekunder sedikit lebih gelap: kontras ≥ 4,5:1 di atas --bg */

/* ------------------------------ navigasi ------------------------------ */
.bk-nav{position:sticky;top:0;z-index:50;background:rgba(241,242,248,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.bk-nav__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.bk-nav__menu{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px clamp(14px,2.4vw,30px)}
.bk-nav__menu a{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:6px 0;transition:color .3s}
.bk-nav__menu a:hover{color:var(--ink)}

/* ------------------------------ remah roti ------------------------------ */
.bk-jejak{margin:26px 0 22px}
.bk-jejak ol{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--ink-2)}
.bk-jejak li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.bk-jejak li+li::before{content:"/";color:var(--ink-3)}
.bk-jejak a{text-decoration:underline;text-decoration-color:rgba(42,42,160,.25);text-underline-offset:3px}
.bk-jejak a:hover{color:var(--indigo)}
.bk-jejak [aria-current]{color:var(--ink);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}

/* ------------------------------ kepala buku ------------------------------ */
.bk-kepala{display:grid;grid-template-columns:minmax(200px,320px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;background:var(--card);border-radius:var(--radius-lg);padding:clamp(22px,4vw,48px);box-shadow:var(--shadow-sm)}
.bk-sampul{margin:0;display:grid;place-items:center;padding:clamp(22px,3vw,34px);border-radius:var(--radius);background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 60%),linear-gradient(160deg,var(--warna),#0d0d24)}
.bk-sampul__img{width:100%;max-width:250px;height:auto;aspect-ratio:720/1018;object-fit:cover;border-radius:4px 8px 8px 4px;box-shadow:0 26px 40px -18px rgba(0,0,0,.7),inset 3px 0 0 rgba(255,255,255,.18)}
.bk-sampul__ganti{display:flex;flex-direction:column;gap:8px;width:100%;max-width:250px;aspect-ratio:720/1018;padding:14% 12%;border-radius:4px 8px 8px 4px;background:linear-gradient(160deg,var(--warna),#101030);color:#fff;box-shadow:0 26px 40px -18px rgba(0,0,0,.7)}
.bk-sampul__ganti small{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.bk-sampul__ganti b{font-family:Poppins,Inter,sans-serif;font-size:clamp(20px,2.4vw,26px);line-height:1.1;margin-top:10%}
.bk-sampul__ganti em{font-style:normal;font-size:12.5px;opacity:.85;line-height:1.4}
.bk-sampul__ganti span{margin-top:auto;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}

.bk-seri{margin-bottom:12px}
.bk-judul{font-size:clamp(32px,5vw,58px);letter-spacing:-.04em;line-height:1.02}
.bk-sub{margin-top:14px;font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:var(--ink-2)}
.bk-oleh{margin-top:14px;font-size:14px;color:var(--ink-2)}
.bk-oleh a{color:var(--indigo);font-weight:600;text-decoration:underline;text-decoration-color:rgba(42,42,160,.3);text-underline-offset:3px}

.bk-lencana{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.bk-lencana li{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;line-height:1.3;background:var(--bg);border-radius:100px;padding:5px 12px}
.bk-lencana__garis{background:transparent!important;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.bk-lencana__status{--st:var(--indigo);background:color-mix(in srgb,var(--st) 14%,var(--card))!important}
.bk-lencana__status i{width:7px;height:7px;border-radius:50%;background:var(--st)}
.bk-lencana__status[data-status="terbit"]{--st:#1f9d6a}
.bk-lencana__status[data-status="siap-terbit"]{--st:var(--indigo)}
.bk-lencana__status[data-status="penyuntingan"]{--st:#c27c05}
.bk-lencana__status[data-status="menulis"]{--st:var(--violet)}
.bk-lencana__status[data-status="riset"],.bk-lencana__status[data-status="ide"]{--st:#6e7093}

.bk-progres{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:baseline;max-width:420px;margin-top:22px}
.bk-progres__label{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.bk-progres__nilai{font-family:Poppins,Inter,sans-serif;font-size:14px;font-weight:700}
.bk-progres__jalur{grid-column:1/-1;display:block;height:6px;border-radius:100px;background:var(--bg-soft);overflow:hidden}
.bk-progres__jalur span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--indigo),var(--pink))}

.bk-aksi{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.bk-luar{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--indigo);border-bottom:1.5px solid rgba(42,42,160,.25);padding-bottom:3px}
.bk-luar:hover{border-color:var(--indigo)}
.bk-luar svg{width:16px;height:16px}

/* ------------------------------ isi ------------------------------ */
.bk-isi{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);margin-top:clamp(28px,4vw,48px);align-items:start}
.bk-blok+.bk-blok{margin-top:34px}
.bk-blok h2,.bk-kartu h2{font-family:Inter,sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo);margin-bottom:12px}
.bk-blok p{font-size:16px;line-height:1.75;color:var(--ink-2)}
.bk-blok .bk-ringkasan{font-size:clamp(17px,1.5vw,19px);line-height:1.7;color:var(--ink)}
.bk-kosong{padding:16px 18px;border:1.5px dashed rgba(42,42,160,.2);border-radius:14px}

.bk-blok .bk-bab__ringkas{font-size:13.5px;margin-bottom:12px}
.bk-bab__ringkas b{font-family:Poppins,Inter,sans-serif;font-size:15px;color:var(--ink)}
.bk-bab{display:grid;gap:6px;counter-reset:none}
.bk-bab__baris{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:11px 14px;box-shadow:0 1px 0 rgba(30,30,90,.05)}
.bk-bab__no{font-family:Poppins,Inter,sans-serif;font-size:12px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bk-bab__judul{font-size:14.5px;font-weight:500;line-height:1.45}
.bk-bab__status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--ink-2)}
.bk-bab__status svg{width:16px;height:16px}
.bk-bab__baris[data-status="selesai"] .bk-bab__status{color:#1a7f56}
.bk-bab__baris[data-status="disunting"] .bk-bab__status{color:#9a6204}
.bk-bab__baris[data-status="ditulis"] .bk-bab__status{color:var(--violet)}

.bk-jurnal{display:grid;gap:10px}
.bk-jurnal li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;background:var(--card);border-radius:14px;padding:14px 16px}
.bk-jurnal time{font-size:12.5px;font-weight:600;color:var(--ink)}
.bk-blok .bk-jurnal p{font-size:14.5px;line-height:1.6}

/* ------------------------------ samping ------------------------------ */
.bk-samping{display:grid;gap:14px;position:sticky;top:86px}
.bk-kartu{background:var(--card);border-radius:var(--radius);padding:22px 22px 24px;box-shadow:var(--shadow-sm)}
.bk-meta{display:grid;gap:10px;margin:0}
.bk-meta div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.bk-meta div:last-child{border-bottom:0;padding-bottom:0}
.bk-meta dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:2px}
.bk-meta dd{margin:0;font-size:14px;font-weight:500;line-height:1.45}
.bk-tag{display:flex;flex-wrap:wrap;gap:6px}
.bk-tag li{font-size:12.5px;font-weight:500;background:var(--bg);border-radius:100px;padding:5px 12px}
.bk-penulis__atas{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.bk-penulis__atas img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:none}
.bk-penulis__atas p{display:grid;gap:2px;font-size:14px;line-height:1.35}
.bk-penulis__atas span{font-size:12px;color:var(--ink-2)}
.bk-penulis>p{font-size:14px;line-height:1.65;color:var(--ink-2);margin-bottom:16px}

/* ------------------------------ buku lain ------------------------------ */
.bk-lain{margin:clamp(48px,7vw,88px) 0 clamp(56px,8vw,96px)}
.bk-lain h2{font-size:clamp(24px,3.2vw,36px);margin-bottom:22px}
.bk-lain__daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px}
.bk-lain__kartu{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;align-items:center;height:100%;background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bk-lain__kartu:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bk-lain__sampul .bk-sampul__img,.bk-lain__sampul .bk-sampul__ganti{width:78px;max-width:none;box-shadow:0 12px 20px -12px rgba(0,0,0,.55)}
.bk-lain__sampul .bk-sampul__ganti{padding:10px 8px;gap:4px}
.bk-lain__sampul .bk-sampul__ganti b{font-size:11px;margin-top:4px}
.bk-lain__sampul .bk-sampul__ganti small,.bk-lain__sampul .bk-sampul__ganti em,.bk-lain__sampul .bk-sampul__ganti span{display:none}
.bk-lain__teks{display:grid;gap:4px;min-width:0}
.bk-lain__teks small{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.bk-lain__teks b{font-family:Poppins,Inter,sans-serif;font-size:15px;line-height:1.25}
.bk-lain__teks span{font-size:12px;color:var(--ink-2)}
.bk-lain__semua{margin-top:26px}

.bk-footer__nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.bk-footer__nav a{font-size:12.5px;color:rgba(255,255,255,.78)}
.bk-footer__nav a:hover{color:#fff}
.bk .footer__credit{color:rgba(255,255,255,.62)}
.bk .footer__by{color:rgba(255,255,255,.72)}

/* ------------------------------ responsif ------------------------------ */
@media (max-width:900px){
  .bk-kepala{grid-template-columns:1fr;text-align:left}
  .bk-sampul{max-width:340px;width:100%;margin-inline:auto}
  .bk-isi{grid-template-columns:1fr}
  .bk-samping{position:static}
}
@media (max-width:560px){
  .bk-nav__bar{padding-block:12px}
  .bk-nav .brand__name{display:none}
  .bk-nav__menu{gap:4px 14px}
  .bk-nav__menu a{font-size:10px;letter-spacing:.1em}
  .bk-kepala{padding:18px;border-radius:var(--radius)}
  .bk-sampul__img,.bk-sampul__ganti{max-width:200px}
  .bk-bab__baris{grid-template-columns:26px minmax(0,1fr);row-gap:4px}
  .bk-bab__status{grid-column:2}
  .bk-jurnal li{grid-template-columns:1fr;gap:4px}
  .bk-meta div{grid-template-columns:1fr;gap:2px}
  .bk-aksi .btn-solid{width:100%;justify-content:center}
}
@media print{
  .bk-nav,.bk-aksi,.footer{display:none}
  .bk-samping{position:static}
}