/* ═══════════════════════════════════════════════════════════
   ILMU SEJARAH VOC — IVH BATAVIA 1926
   style.css — Colonial Paper Aesthetic
   ═══════════════════════════════════════════════════════════ */

:root {
  --paper: #e8dcc8;
  --paper-dark: #d4c4a0;
  --paper-light: #f0e8d4;
  --ink: #1c0f08;
  --ink-fade: #3d2812;
  --gold: #8B6914;
  --gold-light: #c8a84b;
  --gold-dark: #5a430e;
  --red-colonial: #7a1f1f;
  --sepia-mid: #6b4c2a;
  --diary-bg: #ddd0b4;
  --diary-border: #8B6914;
  --box-bg: #e2d5bc;
  --tabel-head: #8B6914;
  --tabel-alt: #e8dcc8cc;
  --font-display: 'IM Fell English', 'Palatino Linotype', Georgia, serif;
  --font-fraktur: 'UnifrakturMaguntia', 'Old English Text MT', serif;
  --font-body: 'IM Fell Double Pica', 'Palatino Linotype', Georgia, serif;
  --font-alt: 'Playfair Display', Georgia, serif;
  --shadow-page: 0 8px 40px rgba(28,15,8,0.55), 0 2px 8px rgba(28,15,8,0.3);
  --transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
  background: #2a1a0a;
  background-image:
    radial-gradient(ellipse at 20% 30%, #3d2408 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, #1a0d04 0%, transparent 60%);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
}

/* ── GRAIN OVERLAY ── */
#grain-overlay {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

#vignette-overlay {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(10,5,2,0.35) 70%,
    rgba(5,2,1,0.65) 100%);
}

/* ── TOPBAR ── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 52px;
  background: linear-gradient(180deg, #1a0d04 0%, #2a1505 100%);
  border-bottom: 2px solid var(--gold-dark);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
}

.tb-left {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

.ivh-logo-svg { flex-shrink: 0; }

.tb-title-block { display: flex; flex-direction: column; }
.tb-book-title {
  font-family: var(--font-display); font-size: 0.85rem;
  color: var(--gold-light); font-style: italic; line-height: 1.1;
}
.tb-sub {
  font-family: var(--font-body); font-size: 0.65rem;
  color: var(--gold-dark); letter-spacing: 0.05em;
}

.tb-center {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0;
}

.progress-track {
  width: 100%; max-width: 320px; height: 4px;
  background: rgba(139,105,20,0.3); border-radius: 2px; overflow: hidden;
}
#progress-fill {
  height: 100%; width: 3.33%; /* 1/30 */
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 2px; transition: width 0.4s ease;
}
#page-counter {
  font-family: var(--font-body); font-size: 0.7rem; color: var(--gold);
}

.tb-right {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

.tb-btn {
  font-family: var(--font-body); font-size: 0.72rem;
  background: rgba(139,105,20,0.15); color: var(--gold);
  border: 1px solid rgba(139,105,20,0.4); border-radius: 3px;
  padding: 4px 9px; cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
.tb-btn:hover {
  background: rgba(139,105,20,0.35); color: var(--gold-light);
  border-color: var(--gold);
}

.part-nav { display: flex; gap: 3px; margin-left: 6px; }
.part-link {
  font-family: var(--font-display); font-size: 0.7rem;
  background: rgba(139,105,20,0.1); color: var(--gold-dark);
  border: 1px solid rgba(139,105,20,0.3); border-radius: 2px;
  padding: 3px 7px; text-decoration: none; transition: var(--transition);
}
.part-link:hover, .part-link.active {
  background: rgba(139,105,20,0.4); color: var(--gold-light);
  border-color: var(--gold);
}

/* ── BOOK WRAP ── */
#book-wrap {
  position: fixed; inset: 0; top: 52px;
  display: flex; align-items: center; justify-content: center;
  gap: 0; overflow: hidden;
}

/* ── NAV BUTTONS ── */
.nav-btn {
  position: relative; z-index: 100;
  width: 48px; height: 80px; flex-shrink: 0;
  background: rgba(139,105,20,0.15);
  border: 1px solid rgba(139,105,20,0.3);
  color: var(--gold); font-size: 2rem;
  cursor: pointer; transition: var(--transition);
  border-radius: 3px; display: flex; align-items: center; justify-content: center;
}
.nav-btn:hover {
  background: rgba(139,105,20,0.35); color: var(--gold-light);
  border-color: var(--gold);
}
.nav-btn:disabled { opacity: 0.25; cursor: default; }

/* ── BOOK STAGE ── */
#book-stage {
  position: relative;
  width: min(720px, calc(100vw - 120px));
  height: min(960px, calc(100vh - 80px));
  perspective: 1200px;
}

/* ── PAGE ── */
.page {
  position: absolute; inset: 0;
  background: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='multiply'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--paper-light) 0%, var(--paper) 50%, var(--paper-dark) 100%);
  border: 1px solid rgba(139,105,20,0.4);
  box-shadow: var(--shadow-page);
  overflow: hidden; overflow-y: auto;
  opacity: 0; pointer-events: none;
  transform: translateX(60px) scale(0.97);
  transition: opacity var(--transition), transform var(--transition);
  scrollbar-width: thin; scrollbar-color: var(--gold-dark) transparent;
}
.page::-webkit-scrollbar { width: 5px; }
.page::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

.page.active {
  opacity: 1; pointer-events: auto;
  transform: translateX(0) scale(1);
}
.page.exit-left {
  opacity: 0; transform: translateX(-60px) scale(0.97);
}

/* ── PAGE INNER ── */
.page-inner {
  padding: 40px 44px 60px;
  min-height: 100%;
}

/* ── PAGE NUMBER ── */
.page-num {
  position: sticky; bottom: 0;
  text-align: right; padding: 6px 44px 10px;
  font-family: var(--font-display); font-size: 0.78rem;
  color: var(--gold-dark); font-style: italic;
  background: linear-gradient(0deg, var(--paper) 60%, transparent);
  pointer-events: none;
}

/* ── ORNAMENTS ── */
.orn-rule { display: inline-block; width: 80px; height: 1px; background: var(--gold); vertical-align: middle; }
.orn-rule-long { display: inline-block; width: 140px; height: 1px; background: var(--gold); vertical-align: middle; }
.orn-rule-med { display: inline-block; width: 100px; height: 1px; background: var(--gold); vertical-align: middle; }
.orn-diamond { color: var(--gold); font-size: 0.9rem; margin: 0 8px; vertical-align: middle; }

/* ═══ COVER PAGE ═══ */
.cover-page {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 28px 44px 20px; min-height: 100%;
  text-align: center; gap: 10px;
}
.cover-ornament-top, .cover-ornament-bot {
  display: flex; align-items: center; gap: 0; width: 100%;
  justify-content: center;
}
.cover-ivh-seal { margin: 4px 0; }
.cover-series-label {
  font-family: var(--font-body); font-size: 0.65rem;
  color: var(--sepia-mid); letter-spacing: 0.18em; text-transform: uppercase;
}
.cover-rule { display: flex; align-items: center; justify-content: center; width: 100%; }
.cover-main-title {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 400;
  color: var(--ink); line-height: 1; font-style: italic;
}
.cover-voc-title {
  font-family: var(--font-fraktur); font-size: 3rem;
  color: var(--gold-dark); line-height: 1;
}
.cover-subtitle {
  font-family: var(--font-body); font-size: 0.88rem;
  color: var(--sepia-mid); font-style: italic; line-height: 1.5;
}
.cover-phase {
  font-family: var(--font-body); font-size: 0.75rem;
  color: var(--sepia-mid); letter-spacing: 0.05em;
}
.cover-author {
  font-family: var(--font-display); font-size: 0.8rem;
  color: var(--ink-fade); font-style: italic;
}
.cover-edition {
  font-family: var(--font-body); font-size: 0.72rem; color: var(--sepia-mid);
}
.cover-painting {
  width: 100%; max-height: 200px; overflow: hidden;
  border: 2px solid var(--gold-dark); margin-top: 4px;
  position: relative;
}
.cover-painting img {
  width: 100%; height: 200px; object-fit: cover;
  filter: sepia(60%) contrast(1.1) brightness(0.85);
  display: block;
}
.painting-caption {
  font-family: var(--font-body); font-size: 0.6rem; font-style: italic;
  color: var(--sepia-mid); text-align: center; padding: 4px;
  background: rgba(212,196,160,0.7);
}

/* ═══ FORMAL PAGE ═══ */
.formal-page { text-align: center; }
.formal-header, .formal-footer {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin: 12px 0;
}
.diary-stamp {
  font-family: var(--font-body); font-size: 0.7rem; font-style: italic;
  color: var(--sepia-mid); margin: 8px 0;
}

/* ═══ CHAPTER LABEL ═══ */
.chapter-label {
  font-family: var(--font-body); font-size: 0.68rem;
  color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--gold-dark); padding-bottom: 4px;
  margin-bottom: 10px;
}

/* ═══ SECTION HEADING ═══ */
.section-heading {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
  color: var(--ink); line-height: 1.2; margin-bottom: 14px;
  font-style: italic;
}

/* ═══ PULLQUOTE ═══ */
.pullquote {
  border-left: 3px solid var(--gold); padding: 10px 16px;
  margin: 12px 0; background: rgba(139,105,20,0.06);
  font-family: var(--font-display); font-size: 1rem; font-style: italic;
  color: var(--ink-fade); line-height: 1.5;
}
.pq-trans {
  display: block; font-size: 0.75rem; color: var(--sepia-mid);
  font-style: normal; margin-top: 4px;
}

/* ═══ BODY TEXT ═══ */
.body-text p {
  font-family: var(--font-body); font-size: 0.9rem; line-height: 1.7;
  color: var(--ink); margin-bottom: 10px; text-align: justify;
}
.body-text h4 {
  font-family: var(--font-alt); font-size: 0.88rem; font-weight: 600;
  color: var(--ink); margin: 12px 0 6px; font-variant: small-caps;
}

/* ═══ DIARY ENTRY ═══ */
.diary-entry {
  background: var(--diary-bg);
  border: 1px solid var(--diary-border);
  border-left: 4px solid var(--gold);
  padding: 10px 14px; margin-bottom: 14px;
  position: relative;
}
.diary-entry::before {
  content: "📜";
  position: absolute; top: -8px; left: 10px;
  font-size: 0.85rem;
}
.diary-header {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin-bottom: 6px;
}
.diary-date {
  font-family: var(--font-alt); font-size: 0.75rem; font-weight: 600;
  color: var(--gold-dark); font-style: italic;
}
.diary-loc {
  font-family: var(--font-body); font-size: 0.68rem;
  color: var(--sepia-mid); font-style: italic;
}
.diary-body {
  font-family: var(--font-body); font-size: 0.85rem; line-height: 1.65;
  color: var(--ink); font-style: italic; margin-bottom: 4px;
}
.diary-body + .diary-body { margin-top: 6px; }
.diary-sig-block {
  font-family: var(--font-display); font-size: 0.72rem;
  color: var(--gold-dark); text-align: right; margin-top: 4px;
}

/* ═══ DECREE BOX ═══ */
.decree-box {
  border: 1px solid var(--gold-dark); padding: 12px;
  margin: 12px 0; background: rgba(212,196,160,0.4);
}
.decree-title {
  font-family: var(--font-alt); font-size: 0.8rem; font-weight: 600;
  color: var(--gold-dark); margin-bottom: 8px; text-align: center;
  font-variant: small-caps; letter-spacing: 0.08em;
}
.decree-item {
  display: flex; gap: 10px; margin-bottom: 6px; align-items: flex-start;
  font-family: var(--font-body); font-size: 0.82rem; line-height: 1.5; color: var(--ink);
}
.decree-num {
  font-family: var(--font-alt); font-weight: 700; color: var(--red-colonial);
  font-size: 0.78rem; flex-shrink: 0; min-width: 28px;
}

/* ═══ KATALOG BOX ═══ */
.katalog-box {
  border: 1px dashed var(--gold-dark); padding: 10px;
  margin: 12px 0; font-family: var(--font-body); font-size: 0.78rem;
  line-height: 1.7; color: var(--ink); background: rgba(240,232,212,0.5);
}

/* ═══ SIGNATURE ═══ */
.signature-block {
  text-align: right; margin-top: 16px;
  font-family: var(--font-display); font-size: 0.82rem;
  line-height: 1.7; color: var(--ink-fade); font-style: italic;
}
.sig-line {
  border-top: 1px solid var(--gold-dark); width: 180px;
  margin: 10px 0 6px auto;
}

/* ═══ GUIDE BOX ═══ */
.guidebox {
  border: 2px solid var(--gold-dark); padding: 14px;
  margin: 12px 0; background: rgba(212,196,160,0.3);
}
.guidebox-title {
  font-family: var(--font-alt); font-size: 0.82rem; font-weight: 600;
  color: var(--gold-dark); margin-bottom: 10px; font-variant: small-caps;
}
.guide-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.guide-item {
  display: flex; gap: 8px; align-items: flex-start;
  font-family: var(--font-body); font-size: 0.78rem; line-height: 1.5; color: var(--ink);
}
.guide-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ═══ STYLED LISTS ═══ */
.styled-ol, .styled-ul {
  font-family: var(--font-body); font-size: 0.85rem; line-height: 1.65;
  color: var(--ink); padding-left: 20px; margin: 8px 0;
}
.styled-ol li, .styled-ul li { margin-bottom: 5px; }

/* ═══ TOC ═══ */
.toc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
.toc-section { margin-bottom: 16px; }
.toc-head {
  font-family: var(--font-alt); font-size: 0.8rem; font-weight: 700;
  color: var(--gold-dark); margin-bottom: 6px; border-bottom: 1px solid var(--gold-dark);
  padding-bottom: 3px; font-variant: small-caps;
}
.toc-item {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-body); font-size: 0.75rem; color: var(--ink);
  padding: 2px 0; border-bottom: 1px dotted rgba(139,105,20,0.3);
  gap: 8px;
}
.toc-item span:last-child { flex-shrink: 0; color: var(--gold-dark); }

/* ═══ DIMENSI GRID ═══ */
.dimensi-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px;
}
.dim-card {
  border: 1px solid var(--gold-dark); padding: 10px;
  background: rgba(212,196,160,0.25);
}
.dim-num {
  font-family: var(--font-fraktur); font-size: 1.4rem; color: var(--gold);
  line-height: 1; margin-bottom: 4px;
}
.dim-title {
  font-family: var(--font-alt); font-size: 0.78rem; font-weight: 600;
  color: var(--ink); margin-bottom: 5px; font-variant: small-caps;
}
.dim-body {
  font-family: var(--font-body); font-size: 0.75rem; line-height: 1.55;
  color: var(--ink-fade);
}

/* ═══ TABLES ═══ */
.table-wrap {
  width: 100%; overflow-x: auto; margin: 14px 0;
}
.data-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body); font-size: 0.78rem;
}
.data-table caption {
  font-family: var(--font-body); font-size: 0.68rem; font-style: italic;
  color: var(--sepia-mid); margin-bottom: 6px; text-align: left;
  caption-side: top;
}
.data-table th {
  background: var(--tabel-head); color: var(--paper-light);
  padding: 6px 8px; text-align: left; font-weight: 600;
  font-variant: small-caps; letter-spacing: 0.04em;
}
.data-table td {
  padding: 5px 8px; border-bottom: 1px solid rgba(139,105,20,0.2);
  color: var(--ink); line-height: 1.4;
}
.data-table tr:nth-child(even) td { background: var(--tabel-alt); }
.data-table tr:hover td { background: rgba(139,105,20,0.12); }
.data-table .total-row td { font-weight: 700; background: rgba(139,105,20,0.15) !important; }
.data-table .danger-row td { background: rgba(122,31,31,0.12) !important; color: var(--red-colonial); }

/* ═══ FACT SIDEBAR ═══ */
.fact-sidebar {
  border: 1px solid var(--gold-dark); padding: 10px;
  background: rgba(212,196,160,0.3); margin: 0 0 10px;
}
.fs-title {
  font-family: var(--font-alt); font-size: 0.72rem; font-weight: 700;
  color: var(--gold-dark); margin-bottom: 6px; letter-spacing: 0.1em;
  text-transform: uppercase; border-bottom: 1px solid var(--gold-dark); padding-bottom: 3px;
}
.fs-item {
  display: flex; justify-content: space-between; gap: 6px;
  font-family: var(--font-body); font-size: 0.75rem;
  color: var(--ink); padding: 2px 0; border-bottom: 1px dotted rgba(139,105,20,0.2);
}
.fs-item span { color: var(--sepia-mid); }
.fs-item strong { color: var(--ink); text-align: right; }

/* ═══ BOXES ═══ */
.tahukah-box {
  border-left: 4px solid var(--gold); background: rgba(200,168,75,0.1);
  padding: 10px 14px; margin: 12px 0;
}
.tk-title {
  font-family: var(--font-alt); font-size: 0.78rem; font-weight: 700;
  color: var(--gold-dark); margin-bottom: 6px;
}
.tahukah-box p {
  font-family: var(--font-body); font-size: 0.82rem; line-height: 1.6;
  color: var(--ink);
}

.refleksi-box {
  border-left: 4px solid var(--red-colonial);
  background: rgba(122,31,31,0.07); padding: 10px 14px; margin: 12px 0;
}
.refleksi-title {
  font-family: var(--font-alt); font-size: 0.78rem; font-weight: 700;
  color: var(--red-colonial); margin-bottom: 6px;
}
.refleksi-box p {
  font-family: var(--font-body); font-size: 0.82rem; line-height: 1.6;
  color: var(--ink); font-style: italic;
}

/* ═══ TWO COL ═══ */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start; margin-top: 8px;
}

/* ═══ BAB COVER ═══ */
.bab-cover {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 8px;
  padding: 36px 44px 40px;
  background: linear-gradient(160deg, var(--paper-light) 0%, var(--paper) 60%, var(--paper-dark) 100%) !important;
}
.bab-ornament {
  color: var(--gold); font-size: 1.2rem; letter-spacing: 0.3em;
}
.bab-num {
  font-family: var(--font-body); font-size: 0.75rem;
  color: var(--sepia-mid); letter-spacing: 0.3em; text-transform: uppercase;
}
.bab-roman {
  font-family: var(--font-fraktur); font-size: 4.5rem;
  color: var(--gold-dark); line-height: 1;
}
.bab-rule {
  display: flex; align-items: center; justify-content: center; width: 100%;
  gap: 4px; font-size: 1rem; color: var(--gold);
}
.bab-title {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 400;
  color: var(--ink); letter-spacing: 0.06em; font-style: normal;
  text-transform: uppercase;
}
.bab-sub {
  font-family: var(--font-body); font-size: 0.9rem; color: var(--sepia-mid);
}
.bab-years {
  font-family: var(--font-alt); font-size: 1rem; font-weight: 600;
  color: var(--gold-dark); letter-spacing: 0.2em;
}
.bab-painting {
  width: 100%; max-height: 180px; overflow: hidden;
  border: 2px solid var(--gold-dark); margin: 4px 0;
}
.bab-painting img {
  width: 100%; height: 180px; object-fit: cover;
  filter: sepia(50%) contrast(1.1) brightness(0.85); display: block;
}
.bab-goals {
  border: 1px solid var(--gold-dark); padding: 10px 16px;
  background: rgba(212,196,160,0.3); text-align: left; width: 100%;
}
.bab-goals-title {
  font-family: var(--font-alt); font-size: 0.78rem; font-weight: 600;
  color: var(--gold-dark); margin-bottom: 6px; font-variant: small-caps;
}
.bab-goals ol {
  padding-left: 18px; font-family: var(--font-body); font-size: 0.78rem;
  line-height: 1.6; color: var(--ink);
}
.bab-quote {
  font-family: var(--font-display); font-size: 0.85rem; font-style: italic;
  color: var(--ink-fade); border-top: 1px solid var(--gold-dark);
  padding-top: 8px; line-height: 1.5;
}
.bab-quote span {
  display: block; font-size: 0.68rem; color: var(--sepia-mid);
  font-style: normal; margin-top: 3px;
}

/* ═══ ORG CHART ═══ */
.org-chart {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 12px 0;
}
.org-row { display: flex; justify-content: center; gap: 8px; }
.three-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; width: 100%; }
.org-box {
  border: 1px solid var(--gold-dark); padding: 6px 12px;
  font-family: var(--font-body); font-size: 0.72rem; text-align: center;
  background: rgba(212,196,160,0.4); color: var(--ink); line-height: 1.4;
}
.top-box { background: rgba(139,105,20,0.2); font-weight: 700; }
.sm-box { font-size: 0.65rem; padding: 5px 6px; }
.org-arrow { font-size: 0.85rem; color: var(--gold-dark); }

/* ═══ TOKOH LAYOUT ═══ */
.tokoh-layout {
  display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  align-items: start; margin: 12px 0;
}
.tokoh-portrait img {
  width: 130px; height: 160px; object-fit: cover;
  filter: sepia(70%) contrast(1.1) brightness(0.85);
  border: 2px solid var(--gold-dark); display: block;
}
.portrait-fallback {
  width: 130px; height: 160px; background: var(--diary-bg);
  border: 2px solid var(--gold-dark); display: flex; align-items: center;
  justify-content: center; text-align: center; font-family: var(--font-display);
  font-size: 0.85rem; color: var(--gold-dark); font-style: italic;
}
.portrait-caption {
  font-family: var(--font-body); font-size: 0.65rem; font-style: italic;
  color: var(--sepia-mid); text-align: center; margin-top: 4px; line-height: 1.4;
}
.tokoh-bio { display: flex; flex-direction: column; gap: 6px; }
.bio-row {
  display: flex; gap: 8px; font-family: var(--font-body); font-size: 0.8rem;
  line-height: 1.4; color: var(--ink);
}
.bio-label { font-weight: 700; color: var(--gold-dark); min-width: 70px; flex-shrink: 0; }

/* ═══ DUTCH TOOLTIP ═══ */
.nl {
  color: var(--gold-dark); cursor: help;
  border-bottom: 1px dashed var(--gold-dark);
  font-style: italic;
}
#tooltip-box {
  position: fixed; z-index: 9999;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-body); font-size: 0.72rem;
  padding: 5px 10px; border-radius: 2px; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
  max-width: 220px; line-height: 1.4;
  border: 1px solid var(--gold-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
#tooltip-box.show { opacity: 1; }

/* ═══ UJI KOMPETENSI ═══ */
.uji-header {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 2px solid var(--gold-dark); padding-bottom: 10px;
  margin-bottom: 14px;
}
.uji-icon { font-size: 2rem; }
.uji-label {
  font-family: var(--font-body); font-size: 0.68rem; color: var(--sepia-mid);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.uji-title {
  font-family: var(--font-display); font-size: 1.2rem; font-style: italic;
  color: var(--ink);
}
.uas-notice {
  background: rgba(139,105,20,0.12); border: 1px solid var(--gold);
  padding: 8px 12px; margin-bottom: 12px;
  font-family: var(--font-body); font-size: 0.78rem; line-height: 1.5; color: var(--ink);
}

.uji-body h4 {
  font-family: var(--font-alt); font-size: 0.82rem; font-weight: 700;
  color: var(--gold-dark); margin: 10px 0 6px; font-variant: small-caps;
}

.soal-item { margin-bottom: 14px; }
.soal-q {
  font-family: var(--font-body); font-size: 0.83rem; font-weight: 600;
  color: var(--ink); margin-bottom: 6px; line-height: 1.5;
}
.soal-opts { display: flex; flex-direction: column; gap: 4px; }
.opt {
  font-family: var(--font-body); font-size: 0.8rem; line-height: 1.5;
  color: var(--ink); padding: 5px 10px; cursor: pointer;
  border: 1px solid rgba(139,105,20,0.25);
  background: rgba(240,232,212,0.5); transition: background 0.2s;
}
.opt:hover { background: rgba(139,105,20,0.12); }
.opt.selected-correct { background: rgba(0,100,0,0.12); border-color: #006400; color: #004400; }
.opt.selected-wrong { background: rgba(122,31,31,0.12); border-color: var(--red-colonial); color: var(--red-colonial); }
.soal-explanation {
  margin-top: 6px; padding: 6px 10px;
  background: rgba(200,168,75,0.15); border-left: 3px solid var(--gold);
  font-family: var(--font-body); font-size: 0.78rem; line-height: 1.5;
  color: var(--ink-fade);
}
.soal-explanation.hidden { display: none; }

.esai-soal {
  border: 1px solid rgba(139,105,20,0.3); padding: 10px 12px;
  margin: 8px 0; background: rgba(240,232,212,0.4);
  font-family: var(--font-body); font-size: 0.82rem; line-height: 1.6; color: var(--ink);
}
.esai-kunci-toggle { margin-top: 8px; }
.esai-kunci {
  margin-top: 6px; padding: 8px 10px;
  background: rgba(200,168,75,0.12); border-left: 3px solid var(--gold);
  font-family: var(--font-body); font-size: 0.78rem; line-height: 1.6;
  color: var(--ink-fade);
}
.esai-kunci.hidden { display: none; }

/* ═══ GAMES ═══ */
.game-score-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; background: rgba(139,105,20,0.1);
  border: 1px solid rgba(139,105,20,0.3); margin-bottom: 10px;
  font-family: var(--font-body); font-size: 0.8rem; color: var(--ink);
}
.game-btn {
  font-family: var(--font-body); font-size: 0.78rem;
  background: rgba(139,105,20,0.15); color: var(--gold-dark);
  border: 1px solid var(--gold-dark); padding: 5px 12px;
  cursor: pointer; transition: var(--transition); border-radius: 2px;
}
.game-btn:hover {
  background: rgba(139,105,20,0.35); color: var(--ink);
}

/* Tebak Tokoh */
.tbt-card {
  border: 1px solid var(--gold-dark); padding: 14px;
  background: rgba(212,196,160,0.3); min-height: 200px;
}
.tbt-clues { margin-bottom: 12px; }
.clue-item {
  font-family: var(--font-body); font-size: 0.85rem; line-height: 1.6;
  color: var(--ink); padding: 4px 0; border-bottom: 1px dotted rgba(139,105,20,0.3);
}
.clue-num { color: var(--gold-dark); font-weight: 700; margin-right: 6px; }
.tbt-reveal-btn-row { margin-bottom: 10px; }
.tbt-options {
  display: flex; flex-direction: column; gap: 6px;
}
.tbt-option {
  font-family: var(--font-body); font-size: 0.82rem; padding: 6px 12px;
  border: 1px solid rgba(139,105,20,0.3); cursor: pointer;
  background: rgba(240,232,212,0.6); transition: background 0.2s;
}
.tbt-option:hover { background: rgba(139,105,20,0.15); }
.tbt-option.correct { background: rgba(0,100,0,0.12); border-color: #006400; color: #004400; }
.tbt-option.wrong { background: rgba(122,31,31,0.12); border-color: var(--red-colonial); }
.tbt-feedback {
  margin-top: 10px; padding: 8px 12px;
  font-family: var(--font-body); font-size: 0.82rem; line-height: 1.5;
  border-left: 3px solid var(--gold);
}
.tbt-feedback.hidden { display: none; }
.tbt-final {
  text-align: center; padding: 20px;
  border: 1px solid var(--gold-dark); background: rgba(212,196,160,0.3);
  font-family: var(--font-body); font-size: 0.85rem; color: var(--ink);
}
.tbt-final.hidden { display: none; }
.final-title {
  font-family: var(--font-display); font-size: 1.3rem; font-style: italic;
  margin-bottom: 10px; color: var(--gold-dark);
}
.final-grade { font-size: 1rem; color: var(--red-colonial); margin: 8px 0; font-style: italic; }

/* Sidang */
.sidang-card {
  border: 1px solid var(--gold-dark); padding: 14px;
  background: rgba(212,196,160,0.3); min-height: 240px;
}
.sidang-case-title {
  font-family: var(--font-alt); font-size: 0.9rem; font-weight: 700;
  color: var(--red-colonial); margin-bottom: 8px; font-variant: small-caps;
}
.sidang-desc {
  font-family: var(--font-body); font-size: 0.83rem; line-height: 1.65;
  color: var(--ink); font-style: italic; margin-bottom: 14px;
}
.sidang-choices { display: flex; flex-direction: column; gap: 8px; }
.sidang-choice {
  padding: 8px 12px; border: 1px solid rgba(139,105,20,0.3);
  background: rgba(240,232,212,0.6); cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; transition: background 0.2s;
}
.sidang-choice:hover { background: rgba(139,105,20,0.12); }
.sidang-choice.just { background: rgba(0,100,0,0.1); border-color: #006400; }
.sidang-choice.unjust { background: rgba(122,31,31,0.1); border-color: var(--red-colonial); }
.sidang-outcome {
  margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--gold);
  background: rgba(200,168,75,0.1); font-family: var(--font-body);
  font-size: 0.78rem; line-height: 1.5; color: var(--ink);
}
#sidang-verdict {
  font-family: var(--font-body); font-size: 0.88rem; line-height: 1.7;
  color: var(--ink); margin: 10px 0;
}

/* ═══ EXPORT OVERLAY ═══ */
#export-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10,5,2,0.8);
  display: flex; align-items: center; justify-content: center;
}
#export-overlay.hidden { display: none; }
.export-modal {
  background: var(--paper); border: 2px solid var(--gold-dark);
  padding: 30px 40px; text-align: center; max-width: 360px;
  font-family: var(--font-body); color: var(--ink);
}
.export-title {
  font-family: var(--font-display); font-size: 1.1rem; font-style: italic;
  color: var(--gold-dark); margin-bottom: 12px;
}
.export-modal p { font-size: 0.85rem; margin-bottom: 10px; }
#export-progress { font-size: 0.8rem; color: var(--sepia-mid); margin: 8px 0; }

/* ═══ HIDDEN ═══ */
.hidden { display: none !important; }

/* ═══ FILTER TOGGLE ═══ */
body.filter-off #grain-overlay,
body.filter-off #vignette-overlay { opacity: 0; }

body.filter-off .page {
  filter: none;
}

/* ═══ RESPONSIVE — supports all devices ═══ */
@media (max-width: 800px) {
  #topbar { height: 48px; padding: 0 8px; }
  .tb-book-title { font-size: 0.75rem; }
  .tb-sub { display: none; }
  .tb-btn { font-size: 0.65rem; padding: 3px 6px; }
  #book-wrap { top: 48px; gap: 0; }
  .nav-btn { width: 36px; height: 60px; font-size: 1.5rem; }
  #book-stage {
    width: calc(100vw - 80px);
    height: calc(100vh - 64px);
  }
  .page-inner { padding: 24px 20px 50px; }
  .dimensi-grid { grid-template-columns: 1fr 1fr; }
  .toc-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .three-cols { grid-template-columns: 1fr; }
  .section-heading { font-size: 1.15rem; }
}

@media (max-width: 500px) {
  #book-stage {
    width: calc(100vw - 60px);
  }
  .nav-btn { width: 28px; }
  .dimensi-grid { grid-template-columns: 1fr; }
  .tokoh-layout { grid-template-columns: 1fr; }
  .bab-roman { font-size: 3rem; }
  .cover-main-title { font-size: 1.8rem; }
  .cover-voc-title { font-size: 2.2rem; }
}

@media (max-width: 380px) {
  .part-nav { display: none; }
  .tb-btn:not(#btn-fs) { display: none; }
}

/* ═══ SWIPE HINT ═══ */
#swipe-hint {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(28,15,8,0.75); color: var(--gold);
  font-family: var(--font-body); font-size: 0.7rem; padding: 5px 14px;
  border-radius: 20px; pointer-events: none; z-index: 300;
  opacity: 0; transition: opacity 0.5s;
  border: 1px solid rgba(139,105,20,0.4);
}
#swipe-hint.show { opacity: 1; }

/* ═══ SEPIA FILTER for images on pages ═══ */
.page img:not(.cover-painting img):not(.bab-painting img) {
  filter: sepia(40%) contrast(1.05);
}