@charset "UTF-8";
/* ==========================================================================
   Perpustakaan INSYNTIVE — /perpustakaan/ (dimuat SETELAH app.css)
   --------------------------------------------------------------------------
   Ruang baca bernuansa kertas: rak dengan punggung buku berwarna per topik,
   buku yang "diambil" lalu terbuka jadi dua halaman (EX LIBRIS + detail),
   kartu topik berilustrasi, peta data, dan grid sampul buatan sendiri.
   Judul buku memakai serif Newsreader (OFL, di-host sendiri di
   /assets/fonts — tampilan sama di semua OS); UI tetap Plus Jakarta Sans.
   Hanya mode terang (sama seperti situs publik lain).

   CONTENTS
   01  Token & dasar halaman
   02  Hero: dinding rak, judul, pencarian, saran
   03  Statistik & lanjutkan membaca
   04  Bilah kontrol: koleksi, tampilan, chip topik, status
   05  Rak & punggung buku
   06  Sampul & grid
   07  Kartu topik & halaman topik
   08  Peta (grafik)
   09  Buku terbuka (dialog)
   10  Keadaan kosong, tooltip, catatan hak cipta
   11  Motion & reduced motion
   ========================================================================== */

/* 01 ── Token & dasar ─────────────────────────────────────────────────── */
/* Newsreader 5.3.0 (subset Latin) — lisensi di /assets/fonts/Newsreader-OFL.txt. 400 memakai berkas 500 (hanya 3 berkas). */
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-Medium.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-SemiBold.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-MediumItalic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
html { scrollbar-gutter: stable; }
html.lb-locked { overflow: hidden; }
.lib-page { background: #F7F4EC; }
.lib {
  --lb-paper: #F7F4EC;
  --lb-paper-2: #EEE8DB;
  --lb-sheet: #FFFDF8;
  --lb-line: #E5DDCC;
  --lb-line-2: #D2C6AE;
  --lb-text: #0E1620;
  --lb-text-2: #39434F;
  --lb-text-3: #5B6470;
  --lb-teal: #00718A;
  --lb-gold: #E9D29A;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, "Times New Roman", serif;
  position: relative;
  background: var(--lb-paper);
  color: var(--lb-text);
  overflow-x: clip;
}
.lb-dlg, .lb-tip { --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, "Times New Roman", serif; --lb-paper: #F7F4EC; --lb-sheet: #FFFDF8; --lb-line: #E5DDCC; --lb-line-2: #D2C6AE; --lb-text: #0E1620; --lb-text-2: #39434F; --lb-text-3: #5B6470; --lb-teal: #00718A; }
.lb-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -.012em; line-height: 1.1; }
.lb-h3 { font-family: var(--serif); font-weight: 600; font-size: 1.375rem; letter-spacing: -.01em; line-height: 1.2; }
.lib :focus-visible { outline-color: var(--cyan); }
.lb-n { font-weight: 600; color: var(--lb-text-3); font-variant-numeric: tabular-nums; }
.lb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .02em; line-height: 1.5; white-space: nowrap; }
.lb-badge--read { background: #E3F5E0; color: #1D5E2C; box-shadow: inset 0 0 0 1px #BFE3B9; }
.lb-badge--read::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2E8B47; }
.lb-badge--own { background: #FBEBD5; color: #7A4510; }
.lb-badge--soon { background: #EEF3E1; color: #3F5A1F; box-shadow: inset 0 0 0 1px #D3E2B8; }
kbd { font-family: var(--mono); }

/* 02 ── Hero ──────────────────────────────────────────────────────────── */
.lb-hero { position: relative; text-align: center; background: radial-gradient(ellipse 70% 60% at 50% 45%, #FFFDF8 0%, rgba(255, 253, 248, 0) 70%), var(--lb-paper); }
.lb-wall { position: relative; height: 132px; overflow: hidden; pointer-events: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.lb-wall--bottom { height: 118px; }
/* HP: hero lebih pendek supaya rak tidak terdorong jauh ke bawah — satu dinding rak saja. */
@media (max-width: 599.98px) { .lb-wall--bottom { display: none; } .lb-wall { height: 112px; } }
.lb-wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: linear-gradient(180deg, #E4DAC6, #D2C3A7); box-shadow: 0 -1px 0 rgba(255, 255, 255, .6) inset; }
.lb-wall__row { position: absolute; left: 50%; bottom: 7px; display: flex; align-items: flex-end; gap: 2px; transform: translateX(-50%); width: max-content; }
.lb-wall .sp { cursor: pointer; }
.lb-wall:not(.is-filled)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 96px; opacity: .55;
  background: repeating-linear-gradient(90deg, #D8CEBB 0 22px, transparent 22px 25px, #CFC3AD 25px 52px, transparent 52px 55px, #E0D7C5 55px 74px, transparent 74px 77px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%);
}
/* fill "backwards" (bukan "both"): setelah selesai animasinya lepas — animasi transform yang tertahan membuat ratusan punggung
   tetap jadi layer komposit dan memperberat setiap frame gulir di HP. */
.lb-wall.is-filled .sp { animation: shelve .6s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 1ms); }
.lb-hero__inner { display: grid; justify-items: center; gap: 14px; padding: clamp(26px, 4.6vw, 52px) 0 clamp(26px, 4vw, 44px); }
.lb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lb-teal); }
.lb-display { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.25rem); letter-spacing: -.025em; line-height: .98; color: var(--lb-text); text-wrap: balance; }
.lb-display em { font-style: italic; font-weight: 500; padding-right: .06em; background: linear-gradient(100deg, #0398B8 0%, #2F76D9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-hero__lead { max-width: 60ch; font-size: var(--fs-md); color: var(--lb-text-2); line-height: 1.6; }
.lb-hero__lead [data-stat-line] { font-weight: 700; color: var(--lb-text); }

.lb-ask { position: relative; z-index: 15; width: min(660px, 100%); margin-top: 6px; }
.lb-ask__box {
  display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 6px 7px 6px 20px; text-align: left;
  background: #fff; border: 1.5px solid var(--lb-line-2); border-radius: 999px;
  box-shadow: 0 1px 0 #fff inset, 0 22px 44px -28px rgba(40, 30, 10, .45), 0 2px 6px -2px rgba(40, 30, 10, .08);
  transition: border-color .2s, box-shadow .2s;
}
.lb-ask__box:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(2, 160, 193, .16), 0 22px 44px -28px rgba(40, 30, 10, .45); }
.lb-ask__ic { width: 20px; height: 20px; color: var(--lb-text-3); fill: none; stroke: currentColor; stroke-width: 2; }
.lb-ask__input { flex: 1; min-width: 0; min-height: 46px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--lb-text); -webkit-appearance: none; appearance: none; }
.lb-ask__input::placeholder { color: #7D8590; font-weight: 500; }
.lb-ask__input::-webkit-search-decoration { -webkit-appearance: none; }
.lb-kbd { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border: 1px solid var(--lb-line-2); border-radius: 7px; font-size: .75rem; font-weight: 700; color: var(--lb-text-3); background: var(--lb-paper); }
@media (hover: none) { .lb-kbd { display: none; } }
.lb-ask__go { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--ink-800); color: #fff; transition: transform .2s var(--ease), background-color .2s; }
.lb-ask__go:hover { background: var(--ink-600); transform: translateX(2px); }
.lb-ask__go .i, .lb-hero .i, .lb-lib .i, .lb-note .i, .lb-dlg .i { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.lb-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; display: grid; gap: 2px; margin: 0; padding: 8px; list-style: none; text-align: left;
  max-height: min(62vh, 470px); overflow: auto; background: #fff; border: 1px solid var(--lb-line); border-radius: 22px;
  box-shadow: 0 28px 60px -26px rgba(30, 22, 8, .45), 0 4px 10px -4px rgba(30, 22, 8, .12);
}
.lb-sg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 10px; border-radius: 14px; cursor: pointer; }
.lb-sg[aria-selected="true"], .lb-sg:hover { background: var(--lb-paper); }
.lb-sg .sp { --gap: 0; padding: 0; pointer-events: none; }
.lb-sg .sp > * { display: none; }
.lb-sg__txt { display: grid; min-width: 0; }
.lb-sg__t { font-family: var(--serif); font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--lb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sg__m { font-size: .8125rem; color: var(--lb-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sg--all { grid-template-columns: auto 1fr auto; min-height: 46px; margin-top: 4px; border-top: 1px solid var(--lb-line); border-radius: 0 0 14px 14px; font-weight: 700; font-size: .875rem; color: var(--lb-teal); }
.lb-sg--all .i { width: 16px; height: 16px; }
.lb-sg--none { display: block; cursor: default; color: var(--lb-text-2); font-size: .9375rem; }
.lb-sg--none:hover { background: none; }

.lb-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; }
.lb-idea { min-height: 40px; padding: 7px 15px; border: 1px solid var(--lb-line); border-radius: 999px; background: rgba(255, 255, 255, .55); color: var(--lb-text-2); font-size: .875rem; font-weight: 600; transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
.lb-idea:hover { background: #fff; border-color: var(--lb-line-2); transform: translateY(-1px); }
.lb-hero__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.lb-btn { min-height: 48px; padding-inline: 22px; }
.lb-btn .i { width: 18px; height: 18px; }
.btn--outline.lb-btn { --btn-bg: rgba(255, 255, 255, .7); }
.lb-hero__fine { max-width: 58ch; font-size: .8125rem; line-height: 1.55; color: var(--lb-text-3); }

/* 03 ── Statistik & lanjutkan membaca ────────────────────────────────── */
.lb-stats { margin-top: clamp(22px, 3.4vw, 36px); }
.lb-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.lb-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-height: 86px; padding: 14px 16px; border: 1px solid var(--lb-line); border-radius: 18px; background: var(--lb-sheet); }
.lb-stat dt { font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lb-text-3); }
.lb-stat dd { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--lb-text); }
.lb-stat--hl { grid-column: 1 / -1; background: var(--ink-800); border-color: var(--ink-800); background-image: radial-gradient(circle at 92% 0%, rgba(214, 253, 145, .18), transparent 55%); }
.lb-stat--hl dt { color: var(--lime); }
.lb-stat--hl dd { color: #fff; }
@media (min-width: 720px) { .lb-stats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lb-stat--hl { grid-column: auto; } }
/* HP: angka jadi satu baris ringkas (seperti "764 dokumen · 28 topik · …") supaya rak tidak terdorong 2 layar ke bawah. */
@media (max-width: 599.98px) {
  .lb-stats { margin-top: 14px; }
  .lb-stats__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
  .lb-stat, .lb-stat--hl { flex-direction: row-reverse; align-items: baseline; gap: 5px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .lb-stat + .lb-stat::before { content: "·"; order: 3; margin: 0 8px; color: var(--lb-text-3); }
  .lb-stat dt, .lb-stat--hl dt { font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: lowercase; color: var(--lb-text-3); }
  .lb-stat dd, .lb-stat--hl dd { font-size: .9375rem; font-weight: 800; letter-spacing: -.01em; color: var(--lb-text); }
  .lb-stat--hl dd { color: #1D5E2C; }
  .lb-stat--hl dt { color: #1D5E2C; }
}

.lb-continue { margin-top: 26px; display: grid; gap: 12px; }
.lb-continue__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lb-cont { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--lb-line); border-radius: 16px; background: var(--lb-sheet); color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.lb-cont:hover { border-color: var(--lb-line-2); box-shadow: 0 12px 26px -18px rgba(30, 22, 8, .45); }
.lb-cont__cv .cv { width: 46px; border-radius: 2px 5px 5px 2px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, .16), 0 6px 12px -8px rgba(0, 0, 0, .5); }
.lb-cont__cv .cv__in { display: none; }
.lb-cont__txt { display: grid; gap: 4px; min-width: 0; }
.lb-cont__t { font-family: var(--serif); font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cont__m { font-size: .75rem; color: var(--lb-text-3); }

/* 04 ── Bilah kontrol ─────────────────────────────────────────────────── */
.lb-lib { padding: clamp(40px, 5.4vw, 72px) 0 clamp(40px, 5vw, 64px); scroll-margin-top: var(--header-h); outline: none; }
.lb-libhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 8px; }
.lb-libhead__sub { font-size: .9375rem; color: var(--lb-text-3); }
.lb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 10px 0; }
@media (min-width: 900px) {
  .lb-bar { position: sticky; top: var(--header-h); z-index: 20; background: rgba(247, 244, 236, .92); box-shadow: 0 0 0 100vmax rgba(247, 244, 236, .92); clip-path: inset(0 -100vmax); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.lb-seg, .lb-views { display: flex; gap: 2px; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--lb-paper-2); overflow-x: auto; scrollbar-width: none; }
.lb-seg::-webkit-scrollbar, .lb-views::-webkit-scrollbar, .lb-topics::-webkit-scrollbar { display: none; }
.lb-seg__s { display: none; }
@media (max-width: 599.98px) {
  /* HP: keempat koleksi tampil semua (2 × 2, label pendek + jumlah) — tidak ada pilihan yang tersembunyi di balik geser. */
  .lb-seg__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* tetap dibaca pembaca layar */
  .lb-seg__s { display: inline; }
  .lb-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border-radius: 22px; overflow: visible; }
  .lb-seg__btn { justify-content: center; }
}
.lb-seg__btn, .lb-views__btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--lb-text-2); font-size: .875rem; font-weight: 700; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s;
}
.lb-seg__btn:hover, .lb-views__btn:hover { color: var(--lb-text); background: rgba(255, 255, 255, .5); }
.lb-seg__btn[aria-pressed="true"] { background: #fff; color: var(--lb-text); box-shadow: 0 1px 2px rgba(30, 22, 8, .12), 0 0 0 1px rgba(30, 22, 8, .04); }
.lb-views__btn[aria-selected="true"] { background: var(--ink-800); color: #fff; }
.lb-views__btn .i { width: 16px; height: 16px; }
.lb-views__btn[aria-selected="true"] .i { color: var(--lime); }
@media (max-width: 599.98px) {
  .lb-bar { flex-direction: column; align-items: stretch; }
  .lb-views { justify-content: space-between; }
  .lb-views__btn { flex: 1; justify-content: center; padding-inline: 8px; }
}

.lb-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
@media (max-width: 899.98px) {
  .lb-topics { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); }
}
.lb-tchip {
  --tc: var(--ink-800); --tt: #fff;
  display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 38px; padding: 4px 12px 4px 5px; border: 1px solid var(--lb-line); border-radius: 999px;
  background: var(--lb-sheet); color: var(--lb-text-2); font-size: .8125rem; font-weight: 700; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.lb-tchip--all { padding-left: 14px; }
.lb-tchip__g { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tt); color: var(--tc); }
.lb-tchip__g svg { width: 15px; height: 15px; }
.lb-tchip:hover { border-color: var(--lb-line-2); background: #fff; }
.lb-tchip[aria-pressed="true"] { background: var(--tc); border-color: var(--tc); color: #fff; }
.lb-tchip[aria-pressed="true"] .lb-n { color: rgba(255, 255, 255, .78); }
.lb-tchip[aria-pressed="true"] .lb-tchip__g { background: rgba(255, 255, 255, .16); color: #fff; }
.lb-tchip[data-empty]:not([aria-pressed="true"]) { opacity: .5; }
.lb-more { flex: none; min-height: 38px; padding: 4px 14px; border: 1px dashed var(--lb-line-2); border-radius: 999px; background: transparent; font-size: .8125rem; font-weight: 700; color: var(--lb-teal); white-space: nowrap; }
.lb-more:hover { background: #fff; border-style: solid; }
@media (min-width: 900px) { .lb-tchip.is-more { display: none; } }
@media (max-width: 899.98px) { .lb-more { display: none; } }

.lb-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; margin: 6px 0 14px; }
.lb-status__txt { font-size: .9375rem; color: var(--lb-text-2); }
.lb-status__txt b { color: var(--lb-text); }
.lb-clear { margin-left: 6px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--lb-line-2); border-radius: 999px; background: transparent; font-size: .8125rem; font-weight: 700; color: var(--lb-text); }
.lb-clear:hover { background: #fff; }
.lb-arrange { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--lb-paper-2); }
.lb-arrange__lbl { padding: 0 8px 0 10px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lb-text-3); }
.lb-arrange button { min-height: 34px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; font-size: .8125rem; font-weight: 700; color: var(--lb-text-2); }
.lb-arrange button[aria-pressed="true"] { background: #fff; color: var(--lb-text); box-shadow: 0 1px 2px rgba(30, 22, 8, .12); }
.lb-panel { min-height: 50vh; }
.lb-hint { margin-top: 18px; text-align: center; font-size: .8125rem; color: var(--lb-text-3); }
@media (hover: none) { .lb-hint { display: none; } }
.lb-noscript { padding: 24px; border-radius: 16px; background: var(--lb-sheet); border: 1px solid var(--lb-line); }

.lb-skel { display: grid; gap: 34px; padding-top: 8px; }
.lb-skel span { display: block; height: 190px; border-radius: 6px; background:
  linear-gradient(180deg, transparent 0 calc(100% - 12px), #E2D8C4 calc(100% - 12px)),
  repeating-linear-gradient(90deg, #E9E2D4 0 26px, transparent 26px 29px, #E3DBCB 29px 62px, transparent 62px 65px, #ECE6DA 65px 86px, transparent 86px 89px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); animation: skel 1.6s ease-in-out infinite; }

/* 05 ── Rak & punggung buku ──────────────────────────────────────────── */
.shelves { display: grid; gap: clamp(40px, 4.6vw, 60px); }
/* Rak di luar layar dilewati browser (tata letak & paint); tinggi intrinsiknya diisi library-shelf.js → tanpa lompatan. */
.shelf { --tc: var(--ink-800); content-visibility: auto; contain-intrinsic-size: auto 320px; padding-bottom: 14px; } /* padding: papan rak baris terakhir (bottom −13px) tidak terpotong containment */
/* Rak yang belum diisi: motif punggung buku + papan rak (bukan ruang kosong saat digulir cepat). */
.shelf__rows[data-pending]:empty { border-radius: 4px; background:
  repeating-linear-gradient(180deg, transparent 0 calc(var(--rowh, 190px) - 12px), #DDD2BC calc(var(--rowh, 190px) - 12px) var(--rowh, 190px), transparent var(--rowh, 190px) calc(var(--rowh, 190px) + 34px)),
  repeating-linear-gradient(90deg, #E9E2D4 0 26px, transparent 26px 29px, #E3DBCB 29px 62px, transparent 62px 65px, #ECE6DA 65px 86px, transparent 86px 89px); }
.shelf__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 16px; }
.shelf__title { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing: -.01em; line-height: 1.15; }
.shelf__g { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tc); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.shelf__g svg { width: 18px; height: 18px; }
.shelf__meta { font-size: .8125rem; font-weight: 600; color: var(--lb-text-3); }
.shelf__more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: auto; padding: 6px 14px; border: 1px solid var(--lb-line); border-radius: 999px; background: var(--lb-sheet); font-size: .8125rem; font-weight: 700; color: var(--lb-text); transition: border-color .2s, background-color .2s; }
.shelf__more:hover { border-color: var(--lb-line-2); background: #fff; }
.shelf__more .i { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.shelf__more:hover .i { transform: translateX(2px); }
.shelf__rows { display: grid; gap: 34px; }
.shelf__row { position: relative; display: flex; align-items: flex-end; gap: 3px; min-height: var(--rh); padding: 0 12px; }
.shelf__row::after {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: -13px; height: 13px; border-radius: 3px 3px 5px 5px; pointer-events: none;
  background: linear-gradient(180deg, #F3ECDD 0, #E7DDCA 30%, #D9CCB2 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 16px -12px rgba(70, 50, 15, .55), 0 3px 4px -3px rgba(70, 50, 15, .35);
}

.sp {
  --w: 30px; --h: 180px; --bg: #3A4655; --fg: #FBF8F1; --band: #E9D29A; --lab: #F3ECDD; --labfg: #0E1620; --fs: 12px;
  position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: var(--w); height: var(--h); margin: 0; padding: 9px 0 8px; border: 0; border-radius: 3px 3px 1px 1px;
  /* Bayangan tepi punggung = satu gradien di atas warna dasar (lebih murah di-paint daripada 4 inset box-shadow × ribuan buku). */
  --edge: linear-gradient(90deg, rgba(255, 255, 255, .1) 0 3px, transparent 3px calc(100% - 4px), rgba(0, 0, 0, .18) calc(100% - 4px)), linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px);
  background: var(--edge), var(--bg); color: var(--fg); font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .2s;
}
.sp::before, .sp::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-top: 1px solid var(--band); border-bottom: 1px solid var(--band); opacity: .85; pointer-events: none; }
.sp::before { top: 4px; }
.sp::after { bottom: 5px; }
.sp__g { flex: none; display: block; width: 13px; height: 13px; margin-top: 3px; opacity: .92; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.sp__t {
  flex: 0 1 auto; min-height: 0; max-width: calc(var(--w) - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  writing-mode: vertical-rl; font-family: var(--serif); font-size: var(--fs); font-weight: 600; line-height: 1.12; letter-spacing: .01em;
}
.sp__a { flex: none; margin-top: auto; max-width: calc(var(--w) - 4px); overflow: hidden; white-space: nowrap; font-size: 9px; font-weight: 800; letter-spacing: .03em; line-height: 1; opacity: .92; }
.sp__rib { position: absolute; top: -3px; right: 4px; width: 7px; height: 26px; background: var(--lime); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.sp__own { position: absolute; top: 18px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; background: var(--lb-gold, #E9D29A); clip-path: polygon(50% 0, 61% 38%, 100% 38%, 69% 61%, 80% 100%, 50% 76%, 20% 100%, 31% 61%, 0 38%, 39% 38%); }
/* variasi */
.sp[data-k="label"] .sp__t { padding: 7px 2px; border-radius: 1px; background: var(--lab); color: var(--labfg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); max-width: calc(var(--w) - 8px); }
.sp[data-k="light"] .sp__t { font-style: italic; font-weight: 500; }
.sp[data-k="light"]::before, .sp[data-k="light"]::after { height: 6px; border: 0; background: var(--band); opacity: 1; }
.sp[data-k="dots"] { background: var(--edge), radial-gradient(rgba(255, 255, 255, .16) .9px, transparent 1.3px) 0 0 / 5px 5px, var(--bg); }
.sp[data-k="dots"] .sp__t { font-family: var(--font); font-weight: 800; font-size: calc(var(--fs) - 2px); letter-spacing: .06em; text-transform: uppercase; }
.sp[data-k="foil"] .sp__t { font-family: var(--font); font-weight: 800; font-size: calc(var(--fs) - 2.5px); letter-spacing: .12em; text-transform: uppercase; }
.sp[data-k="foil"]::before, .sp[data-k="foil"]::after { height: 6px; border-width: 1.5px; opacity: 1; }
/* interaksi */
@media (hover: hover) { .shelf .sp:hover, .lb-wall .sp:hover, .bkx__relrow .sp:hover { transform: translateY(-12px); box-shadow: 0 16px 18px -12px rgba(40, 28, 8, .55); } }
.sp:focus-visible { transform: translateY(-12px); outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.sp.is-lift { transform: translateY(-34px) rotate(-2deg) !important; transition-duration: .16s; }
.sp.is-out { visibility: hidden; }
.sp.is-settle { animation: settle .6s var(--ease) both; }
.lb-wall .sp { --fs: 10px; }

/* dekorasi ujung rak */
.deco { position: relative; z-index: 1; flex: none; margin-left: auto; margin-right: 6px; }
.deco--end { width: 20px; height: 74px; border-radius: 10px 10px 2px 2px; background: linear-gradient(90deg, #9AA3AD, #7C8792 60%, #6B7580); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .25); }
.deco--stack { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.deco--stack i { display: block; height: 10px; border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.deco--stack i:nth-child(1) { width: 62px; background: var(--c); margin-right: 4px; }
.deco--stack i:nth-child(2) { width: 74px; background: var(--b); }
.deco--stack i:nth-child(3) { width: 68px; background: var(--a); margin-right: 2px; }
.deco--plant { width: 46px; height: 64px; }
.deco--plant b { position: absolute; left: 9px; bottom: 0; width: 28px; height: 26px; border-radius: 3px 3px 8px 8px; background: linear-gradient(90deg, #C9805C, #B56A48); box-shadow: inset 0 4px 0 #D9946F; }
.deco--plant i { position: absolute; bottom: 22px; left: 50%; width: 13px; height: 30px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: linear-gradient(90deg, #4F8A5B, #3D7349); transform-origin: 50% 100%; }
.deco--plant i:nth-child(1) { margin-left: -6.5px; height: 36px; }
.deco--plant i:nth-child(2) { margin-left: -6.5px; transform: rotate(-34deg); background: linear-gradient(90deg, #5E9A69, #477E52); }
.deco--plant i:nth-child(3) { margin-left: -6.5px; transform: rotate(32deg); height: 27px; }

/* 06 ── Sampul & grid ────────────────────────────────────────────────── */
.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 30px 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .covers { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 34px 24px; } }
.cvw { display: grid; gap: 9px; align-content: start; }
.cvw__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .75rem; color: var(--lb-text-3); }
.cv {
  --bg: #3A4655; --fg: #FBF8F1; --band: #E9D29A; --cream: #F3ECDD;
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; margin: 0; padding: 0; border: 0; overflow: hidden; container-type: inline-size;
  border-radius: 3px 9px 9px 3px; background: var(--bg); color: var(--fg); font: inherit; text-align: center; cursor: pointer;
  box-shadow: inset 7px 0 0 rgba(0, 0, 0, .16), inset 8px 0 0 rgba(255, 255, 255, .09), 0 1px 1px rgba(30, 22, 8, .1), 0 16px 28px -18px rgba(30, 22, 8, .7);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cv[data-k="dots"] { background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px); background-size: 7px 7px; }
.cv[data-k="foil"]::after { content: ""; position: absolute; inset: 5% 6% 4% 9%; border: 1.5px solid var(--band); border-radius: 2px; pointer-events: none; opacity: .75; }
.cv__in { position: absolute; inset: 8% 9% 6% 13%; display: flex; flex-direction: column; align-items: center; gap: 3cqw; overflow: hidden; }
.cv__art { display: grid; place-items: center; flex: none; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--cream); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 3px var(--bg), 0 0 0 4px var(--band); }
.cv[data-f="arch"] .cv__art { width: 86%; aspect-ratio: 1 / 1; border-radius: 999px 999px 3px 3px; }
.cv[data-f="medal"] .cv__art { width: 74%; aspect-ratio: 1 / 1; border-radius: 50%; }
.cv[data-f="medal"] .cv__art img, .cv[data-f="arch"] .cv__art img { width: 128%; max-width: none; }
.cv__art img { width: 96%; height: auto; transform: translate(var(--tx, 0), var(--ty, 0)) scale(calc(var(--sc, 1) * var(--fx, 1)), var(--sc, 1)); }
/* Variasi "type": huruf awal judul besar + garis hias (tanpa ilustrasi). */
.cv__ini { position: relative; display: grid; place-items: center; flex: none; width: 100%; aspect-ratio: 4 / 3; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 46cqw; line-height: 1; color: var(--band); }
.cv__ini::before, .cv__ini::after { content: ""; position: absolute; left: 14%; right: 14%; height: 0; border-top: 1px solid var(--band); opacity: .7; }
.cv__ini::before { top: 6%; } .cv__ini::after { bottom: 4%; box-shadow: 0 3px 0 -2px var(--band); }
/* Variasi "emb": lambang topik di medali bergaris ganda. */
.cv__emb { display: grid; place-items: center; flex: none; width: 62%; aspect-ratio: 1 / 1; margin: 2cqw 0; border-radius: 50%; color: var(--band); box-shadow: inset 0 0 0 1.5px var(--band), inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--band); }
.cv__emb-g { width: 52%; height: 52%; stroke-width: 1.4; }
.cv--long .cv__ini { aspect-ratio: 16 / 10; font-size: 36cqw; }
.cv--long .cv__emb { width: 46%; }
.cv__kick { margin-top: 4cqw; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(8.5px, 5.2cqw); font-weight: 800; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; color: var(--kick, var(--band)); }
.cv__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; flex: none; max-width: 100%; font-family: var(--serif); font-size: max(12px, 9.4cqw); font-weight: 600; line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; }
.cv__kick, .cv__mark { flex: none; }
.cv--mid .cv__t { font-size: max(11.5px, 8.4cqw); }
.cv--mid[data-f="arch"] .cv__art { width: 74%; }
.cv--mid[data-f="medal"] .cv__art { width: 62%; }
.cv--long .cv__t { font-size: max(11px, 7.4cqw); -webkit-line-clamp: 4; }
.cv--long .cv__art { width: 80%; }
.cv--long[data-f] .cv__art { aspect-ratio: 16 / 10; border-radius: 2px; }
.cv__a { flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-family: var(--serif); font-style: italic; font-size: max(10px, 6.6cqw); line-height: 1.25; opacity: .9; }
.cv__mark { margin-top: auto; font-size: max(8px, 4.4cqw); font-weight: 800; letter-spacing: .34em; opacity: .66; }
/* Sampul kecil (HP, buku terkait, lanjutkan membaca): tanda INSYNTIVE hanya jadi noise → disembunyikan. */
@container (max-width: 170px) { .cv__mark { display: none; } }
.cv__rib { position: absolute; top: 0; right: 13%; width: 9%; height: 15%; background: var(--lime); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
@media (hover: hover) { .covers .cv:hover { transform: translateY(-5px) rotate(-.8deg); box-shadow: inset 7px 0 0 rgba(0, 0, 0, .16), inset 8px 0 0 rgba(255, 255, 255, .09), 0 26px 34px -20px rgba(30, 22, 8, .7); } }
.cv:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.cv.is-lift { transform: translateY(-14px) scale(1.03) rotate(-1.5deg) !important; transition-duration: .16s; }
.cv.is-out { visibility: hidden; }
.cv.is-settle { animation: settle-cv .6s var(--ease) both; }
.covers__more { display: flex; justify-content: center; margin-top: 30px; }

/* 07 ── Kartu topik & halaman topik ─────────────────────────────────── */
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.tcard {
  display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--lb-line); border-radius: 22px;
  background: var(--lb-sheet); color: var(--lb-text); font: inherit; text-align: left; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.tcard:hover { transform: translateY(-4px); border-color: var(--lb-line-2); box-shadow: 0 30px 50px -32px rgba(30, 22, 8, .55); }
.tcard__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tt);
  background-image: radial-gradient(color-mix(in srgb, var(--tc) 16%, transparent) 1px, transparent 1.3px); background-size: 11px 11px; border-bottom: 1px solid color-mix(in srgb, var(--tc) 14%, transparent); }
.tcard__art img { width: 84%; transition: transform .7s var(--ease); }
.tcard:hover .tcard__art img { transform: scale(1.05) rotate(-.6deg); }
.tcard__body { display: grid; gap: 7px; padding: 14px 16px 16px; }
.tcard__name { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.3125rem; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.tcard__g { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tc); color: #fff; }
.tcard__g svg { width: 16px; height: 16px; }
.tcard__meta { font-size: .8125rem; font-weight: 600; color: var(--lb-text-3); }
.tcard__meta b { color: #1D5E2C; }
.tbars { display: flex; align-items: flex-end; gap: 2px; height: 54px; margin-top: 6px; padding: 0 2px; border-bottom: 1.5px solid var(--lb-line-2); }
.tbars__b { flex: 1 1 0; max-width: 24px; height: var(--bh); border-radius: 4px 4px 0 0; background: var(--bc); transition: filter .2s; }
.tbars__b:hover { filter: brightness(1.15); }

.tpage { display: grid; gap: 22px; align-items: center; margin: 4px 0 34px; }
@media (min-width: 860px) { .tpage { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; } }
.tpage__txt { display: grid; gap: 12px; justify-items: start; }
.tpage__back { margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px 6px 10px; border: 1px solid var(--lb-line); border-radius: 999px; background: var(--lb-sheet); font-size: .8125rem; font-weight: 700; color: var(--lb-text); }
.tpage__back:hover { background: #fff; border-color: var(--lb-line-2); }
.tpage__title { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem); letter-spacing: -.02em; line-height: 1.02; outline: none; }
.tpage__g { display: grid; place-items: center; flex: none; width: clamp(44px, 4vw, 56px); height: clamp(44px, 4vw, 56px); border-radius: 50%; background: var(--tc); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.tpage__g svg { width: 52%; height: 52%; }
.tpage__desc { max-width: 54ch; font-family: var(--serif); font-size: 1.125rem; line-height: 1.55; color: var(--lb-text-2); }
.tpage__meta { font-size: .875rem; font-weight: 600; color: var(--lb-text-3); }
.tpage__subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lb-subchip { min-height: 36px; padding: 5px 12px; border: 1px solid var(--lb-line); border-radius: 999px; background: var(--lb-sheet); font-size: .8125rem; font-weight: 600; color: var(--lb-text-2); text-align: left; }
.lb-subchip:hover { border-color: var(--lb-line-2); background: #fff; }
.lb-subchip[aria-pressed="true"] { background: var(--tc); border-color: var(--tc); color: #fff; }
.lb-subchip[aria-pressed="true"] .lb-n { color: rgba(255, 255, 255, .8); }
.tpage__art { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 26px; background: var(--tt);
  background-image: radial-gradient(color-mix(in srgb, var(--tc) 16%, transparent) 1px, transparent 1.3px); background-size: 12px 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 14%, transparent); }
.tpage__art img { width: 88%; }
@media (max-width: 859.98px) { .tpage__art { order: -1; max-height: 220px; aspect-ratio: auto; height: 200px; } .tpage__art img { width: auto; height: 92%; } }

/* 08 ── Peta (grafik) ────────────────────────────────────────────────── */
.mapv { display: grid; gap: 20px; }
.mapv__duo { display: grid; gap: 20px; }
@media (min-width: 1000px) { .mapv__duo { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; } }
.chart-card { display: grid; gap: 16px; min-width: 0; padding: clamp(16px, 2.4vw, 26px); border: 1px solid var(--lb-line); border-radius: 22px; background: #FFFEFB; }
.chart-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; }
.chart-card__t { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.chart-card__s { margin-top: 4px; max-width: 60ch; font-size: .875rem; color: var(--lb-text-3); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .8125rem; color: var(--lb-text-2); }
.legend__t { font-weight: 700; color: var(--lb-text); }
.legend__i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend__i i { width: 11px; height: 11px; border-radius: 3px; }
.tm-wrap { width: 100%; min-height: 200px; }
.tm { display: block; width: 100%; height: auto; font-family: var(--font); }
.tm__tile { cursor: pointer; outline: none; }
.tm__tile rect { transition: filter .2s; }
.tm__tile:hover rect, .tm__tile:focus-visible rect { filter: brightness(1.08) saturate(1.1); }
.tm__tile:focus-visible rect { stroke: var(--ink-900); stroke-width: 3; }
g.tm__tile { cursor: default; }
.sb { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sb__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: center; }
@media (min-width: 600px) { .sb__row { grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 12px; } }
.sb__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; font-weight: 600; color: var(--lb-text-2); }
.sb__bar { display: flex; align-items: center; gap: 2px; min-height: 20px; }
.sb__seg { flex: none; min-width: 3px; height: 14px; }
.sb__seg:nth-last-child(2) { border-radius: 0 4px 4px 0; }
.sb__val { flex: none; margin-left: 8px; font-size: .8125rem; font-weight: 700; color: var(--lb-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb__x { font-weight: 600; color: var(--lb-text-3); }
.lb-table summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: .8125rem; font-weight: 700; color: var(--lb-teal); list-style: none; }
.lb-table summary::-webkit-details-marker { display: none; }
.lb-table[open] summary { margin-bottom: 8px; }
.lb-table .table-wrap { max-height: 360px; overflow: auto; }
.lb-table .table { font-size: .8125rem; }
.lb-table .table th, .lb-table .table td { padding: 8px 12px; }
.lb-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* 09 ── Buku terbuka (dialog) ────────────────────────────────────────── */
.lb-dlg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain; background: transparent; color: var(--lb-text); }
.lb-dlg::backdrop { background: transparent; }
.bkx__scrim { position: fixed; inset: 0; background: rgba(236, 231, 219, .8); -webkit-backdrop-filter: blur(7px) saturate(115%); backdrop-filter: blur(7px) saturate(115%); }
.bkx__stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 100%; padding: max(24px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom)); }
.bk { --c: #3A4655; --cd: #232C38; --ct: #EEF0F2; --cs: #C7CCD2; position: relative; width: min(920px, 100%); perspective: 2400px; }
.bk__pages { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; }
.bk__l, .bk__r { position: relative; min-width: 0; border: 8px solid var(--cd); }
.bk__l {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px 24px; border-right: 0; border-radius: 14px 0 0 14px;
  background-color: var(--ct); background-image: radial-gradient(color-mix(in srgb, var(--c) 30%, transparent) 1.1px, transparent 1.5px); background-size: 13px 13px;
  box-shadow: inset -22px 0 26px -22px rgba(0, 0, 0, .45), 0 40px 60px -36px rgba(30, 22, 8, .6), 0 8px 18px -12px rgba(30, 22, 8, .3);
}
.bk__r { display: flex; flex-direction: column; gap: 9px; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 32px) 18px; border-left: 0; border-radius: 0 14px 14px 0; background: #FFFEFA;
  box-shadow: inset 22px 0 26px -22px rgba(0, 0, 0, .3), 0 40px 60px -36px rgba(30, 22, 8, .6), 0 8px 18px -12px rgba(30, 22, 8, .3); }
.bk__r::before { content: ""; position: absolute; top: 4px; bottom: 4px; right: -3px; width: 3px; border-radius: 0 2px 2px 0; background: repeating-linear-gradient(180deg, #F4EFE3 0 2px, #E3DCCB 2px 3px); }
.bk.is-closed .bk__l { opacity: 0; }
.bk.is-closed.is-wide { transform: translateX(-25%); }

.plate { position: relative; width: min(100%, 296px); padding: 22px 22px 18px; text-align: center; background: #FFFDF6; border: 1px solid #E3D8C1; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 16px 26px -16px rgba(40, 28, 8, .55); transform: rotate(-1.4deg); }
.plate::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--c, #3A4655); opacity: .32; pointer-events: none; }
.plate::after { content: ""; position: absolute; inset: 10px; border: .5px solid var(--c, #3A4655); opacity: .18; pointer-events: none; }
.plate__ex { font-size: .6875rem; font-weight: 800; letter-spacing: .42em; text-transform: uppercase; color: var(--lb-text-2); padding-left: .42em; }
.plate__art { width: 82%; margin: 10px auto 6px; }
.plate__owner { font-family: var(--serif); font-style: italic; font-size: 1.375rem; font-weight: 500; line-height: 1.15; color: var(--lb-text); }
.plate__no { margin-top: 8px; font-size: .75rem; color: var(--lb-text-3); font-variant-numeric: tabular-nums; }
.plate__stamp { position: absolute; top: -16px; right: -18px; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 2px solid #1D5E2C; outline: 1px solid #1D5E2C; outline-offset: -6px;
  background: rgba(214, 253, 145, .92); color: #1D5E2C; font-size: .625rem; font-weight: 800; letter-spacing: .12em; line-height: 1.15; text-transform: uppercase; transform: rotate(14deg); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .4); }
.plate__stamp--ref { font-size: .5rem; letter-spacing: .06em; border-color: #4A4FA8; outline-color: #4A4FA8; color: #3B3F8F; background: rgba(226, 228, 250, .95); }
.plate__stamp--soon { border-color: #4F6B22; outline-color: #4F6B22; color: #3F5A1F; background: rgba(238, 243, 225, .96); }
.plate.is-in .plate__stamp { animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) both .08s; }
.bk__peek { display: grid; gap: 6px; justify-items: center; margin: 0; transform: rotate(1.6deg); }
.bk__peek img { width: 128px; max-height: 170px; object-fit: cover; object-position: top; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 18px -10px rgba(0, 0, 0, .5); }
.bk__peek figcaption { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lb-text-3); }

.bk__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .8125rem; font-weight: 600; color: var(--lb-text-3); }
.bk__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--ct); color: var(--lb-text); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.bk__chip svg { width: 15px; height: 15px; color: var(--c); }
.bk__title { margin-top: 4px; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: anywhere; outline: none; }
.bk__sub { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.4; color: var(--lb-text-2); }
.bk__by { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; color: var(--lb-text-2); }
.bk__facts { font-size: .8125rem; color: var(--lb-text-3); }
.bk__orn { display: block; width: 16px; height: 16px; margin: 2px 0; color: var(--c); opacity: .7; }
.bk__orn svg { width: 16px; height: 16px; }
.bk__sum { font-family: var(--serif); font-size: 1.03rem; line-height: 1.55; color: var(--lb-text-2); }
.bk__sum.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.bk__more { justify-self: start; align-self: flex-start; min-height: 32px; margin-top: -4px; padding: 2px 0; border: 0; background: none; font-size: .8125rem; font-weight: 700; color: var(--lb-teal); text-decoration: underline; text-underline-offset: 3px; }
.bkx__x { position: fixed; z-index: 8; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lb-line-2); border-radius: 50%; background: rgba(255, 254, 250, .94); color: var(--lb-text); box-shadow: 0 8px 18px -10px rgba(30, 22, 8, .45); transition: background-color .2s, transform .2s var(--ease); }
.bkx__x:hover { background: #fff; transform: rotate(90deg); }
.bkx__x .i { width: 20px; height: 20px; }
.bk__act { display: grid; gap: 8px; }
.bk__note:empty { display: none; }
.bk__sum--load { display: grid; gap: 9px; padding: 4px 0; }
.bk__sum--load span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EFE9DC 0%, #F8F4EA 40%, #EFE9DC 80%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.bk__sum--load span:last-child { width: 62%; }
.bk__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.bk__tags li { padding: 2px 9px; border-radius: 999px; background: var(--lb-paper); border: 1px solid var(--lb-line); font-size: .75rem; font-weight: 600; color: var(--lb-text-2); }
.bk__state { display: grid; gap: 6px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--lb-line); font-size: .8125rem; font-weight: 600; color: var(--lb-text-3); }
p.bk__state { display: flex; align-items: center; gap: 8px; }
.bk__dot { width: 8px; height: 8px; border-radius: 50%; background: #2E8B47; box-shadow: 0 0 0 3px #E3F5E0; }
.bk__dot--ref { background: #6A6FD0; box-shadow: 0 0 0 3px #E7E8FA; }
.bk__dot--soon { background: #A9C26B; box-shadow: 0 0 0 3px #EEF3E1; }
.bk__prog { display: block; height: 6px; border-radius: 999px; background: var(--lb-paper-2, #EEE8DB); overflow: hidden; }
.bk__prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #02A0C1, #3581E1); }
.bk__cta { display: grid; gap: 8px; margin-top: 4px; }
.bk__go { min-height: 52px; }
.bk__go .i { width: 18px; height: 18px; }
.bk__go--soon { cursor: default; background: var(--lb-paper-2, #EEE8DB); color: var(--lb-text-2); border: 1px dashed var(--lb-line-2); }
.bk__alt { font-size: .8125rem; color: var(--lb-text-2); text-align: center; }
.bk__alt a { color: var(--lb-teal); font-weight: 700; }
.bk__refnote { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #F3F1FB; border: 1px solid #DEDCF3; font-size: .8125rem; line-height: 1.5; color: var(--lb-text-2); }
.bk__refnote .i { margin-top: 2px; color: #4A4FA8; }
.bk__refnote b { color: var(--lb-text); }
.bk__lic { font-size: .75rem; line-height: 1.5; color: var(--lb-text-3); overflow-wrap: anywhere; }
.bk__lic a { color: var(--lb-teal); font-weight: 700; }
.bk__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.bk__src { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: .8125rem; font-weight: 600; color: var(--lb-text-2); text-decoration: none; }
.bk__src:hover { color: var(--lb-text); text-decoration: underline; }
.bk__return { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px 4px 12px; border: 0; border-radius: 999px; background: transparent; font-size: .8125rem; font-weight: 700; color: var(--lb-text-2); }
.bk__return:hover { background: var(--lb-paper); color: var(--lb-text); }
.bk__return kbd { padding: 1px 6px; border: 1px solid var(--lb-line-2); border-radius: 6px; font-size: .6875rem; color: var(--lb-text-3); background: #fff; }
@media (hover: none) { .bk__return kbd { display: none; } }

.bk__cover { position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; right: 0; transform-origin: 0 50%; transform-style: preserve-3d; pointer-events: none; }
.bk__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 3px 14px 14px 3px; }
.bk__front .cv { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 3px 14px 14px 3px; cursor: default; box-shadow: inset 9px 0 0 rgba(0, 0, 0, .18), inset 10px 0 0 rgba(255, 255, 255, .08), 0 20px 34px -20px rgba(30, 22, 8, .7); }
.bk__front .cv__in { inset: 10% 12% 7% 16%; }
.bk__inside { transform: rotateY(180deg); border-radius: 14px 3px 3px 14px; background-color: var(--ct); background-image: radial-gradient(color-mix(in srgb, var(--c) 30%, transparent) 1.1px, transparent 1.5px); background-size: 13px 13px; box-shadow: inset 0 0 0 8px var(--cd); }

.bkx__rel { display: grid; justify-items: center; gap: 12px; width: min(920px, 100%); }
.bkx__rel:empty { display: none; }
.bkx__relh { font-size: .6875rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--lb-text-3); }
.bkx__relrow { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 14px 24px 0; }
.bkx__relrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; border-radius: 3px; background: linear-gradient(180deg, #EFE7D6, #D9CCB2); box-shadow: 0 8px 12px -8px rgba(70, 50, 15, .5); }

@media (max-width: 719.98px) {
  .bkx__stage { justify-content: flex-start; padding-top: 14px; }
  .bk__pages { grid-template-columns: 1fr; min-height: 0; }
  .bk__l, .bk__r { border-width: 6px; }
  .bk__l { flex-direction: row; gap: 14px; padding: 18px 16px 22px; border-right: 6px solid var(--cd); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: inset 0 -18px 22px -20px rgba(0, 0, 0, .4); }
  .plate { width: min(100%, 250px); padding: 14px 14px 12px; }
  .plate__art { width: 64%; margin: 6px auto 2px; }
  .plate__owner { font-size: 1.125rem; }
  .plate__stamp { width: 62px; height: 62px; top: -12px; right: -10px; font-size: .5625rem; }
  .bk__peek { display: none; }
  .bk__r { border-left: 6px solid var(--cd); border-top: 0; border-radius: 0 0 12px 12px; padding: 22px 18px 16px; box-shadow: inset 0 18px 22px -22px rgba(0, 0, 0, .3), 0 30px 50px -30px rgba(30, 22, 8, .55); }
  .bk__r::before { display: none; }
  .bk__cover { left: 0; right: 0; bottom: auto; height: min(100%, 540px); }
  .bk__face, .bk__front .cv { border-radius: 3px 12px 12px 3px; }
  /* Tombol utama selalu terlihat: menempel di bawah layar selama halaman kanan digulir. */
  .bk__act { position: sticky; bottom: 0; z-index: 2; margin: 4px -18px 0; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 254, 250, .9), #FFFEFA 28%); box-shadow: 0 -10px 18px -14px rgba(30, 22, 8, .35); }
  .bk__act .bk__state { margin-top: 0; padding-top: 0; border-top: 0; }
  .bk__act .bk__go { min-height: 48px; }
  .bkx__x { width: 40px; height: 40px; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
}

/* 10 ── Keadaan kosong, tooltip, catatan hak cipta ───────────────────── */
.lb-empty { display: grid; justify-items: center; gap: 12px; max-width: 560px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0; text-align: center; color: var(--lb-text-2); }
.lb-empty__ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--lb-paper-2); color: var(--lb-text-2); }
.lb-empty__ic svg { width: 26px; height: 26px; }
.lb-empty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.lb-empty--own .plate { --c: #7A4510; margin-bottom: 14px; transform: rotate(-2deg); }
.lb-empty--own .plate__stamp { border-color: #7A4510; outline-color: #7A4510; color: #7A4510; background: rgba(251, 235, 213, .95); }

.lb-tip { position: fixed; z-index: 70; top: 0; left: 0; max-width: 270px; padding: 9px 12px; border-radius: 12px; background: var(--ink-900); color: #fff; font-size: .8125rem; line-height: 1.35; pointer-events: none; box-shadow: 0 14px 30px -12px rgba(6, 11, 17, .6); }
.lb-tip b { display: block; font-family: var(--serif); font-size: .9375rem; font-weight: 600; line-height: 1.25; }
.lb-tip small { display: block; margin-top: 3px; font-size: .75rem; color: var(--on-ink-2); }
.lb-tip__ok { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; color: var(--lime); }
.lb-tip__ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.lb-tip__soon { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; color: var(--on-ink-2); }
.lb-tip__soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--lime); }

.lb-note { display: flex; gap: 14px; align-items: flex-start; margin-bottom: clamp(48px, 6vw, 80px); padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--lb-line); border-radius: 22px; background: var(--lb-sheet); color: var(--lb-text-2); font-size: .9375rem; line-height: 1.65; }
.lb-note__ic { flex: none; width: 26px; height: 26px; margin-top: 2px; color: var(--lb-text-3); }
.lb-note__body { display: grid; gap: 10px; min-width: 0; }
.lb-note h2 { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; color: var(--lb-text); }
.lb-note b { color: var(--lb-text); }
.lb-note__acts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lb-note__link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 700; color: var(--lb-teal); text-decoration: none; overflow-wrap: anywhere; }
.lb-note__link:hover { text-decoration: underline; }

/* 11 ── Motion ───────────────────────────────────────────────────────── */
@keyframes shelve { from { transform: translateY(100%); } to { transform: none; } }
@keyframes settle { 0% { transform: translateY(-30px); } 60% { transform: translateY(2px); } 100% { transform: none; } }
@keyframes settle-cv { 0% { transform: translateY(-12px) scale(1.02); } 60% { transform: translateY(1px); } 100% { transform: none; } }
@keyframes stamp { 0% { opacity: 0; transform: rotate(30deg) scale(1.9); } 100% { opacity: 1; transform: rotate(14deg) scale(1); } }
@keyframes skel { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .sp, .cv, .tcard, .tcard__art img, .lb-idea, .lb-ask__go { transition: none !important; }
  .lb-wall.is-filled .sp, .sp.is-settle, .cv.is-settle, .plate.is-in .plate__stamp, .lb-skel span { animation: none !important; }
  .shelf .sp:hover, .sp:focus-visible, .covers .cv:hover, .tcard:hover { transform: none !important; }
}
@media print {
  .lb-wall, .lb-ask, .lb-hero__chips, .lb-hero__acts, .lb-bar, .lb-topics, .lb-dlg, .lb-tip { display: none !important; }
}