/* =========================================================
   Lentera Pustaka — Klasik Akademik Theme Tokens
   ========================================================= */
:root {
    /* Palet utama */
    --ink:        #0B1B2B;   /* deep navy - primary dark */
    --ink-2:      #13283D;
    --ink-3:      #1F4068;
    --parchment:  #F5EFE0;   /* krem hangat */
    --ivory:      #FBF9F3;
    --gold:       #C9A227;
    --gold-soft:  #E6C76A;
    --gold-deep:  #8E6F12;
    --burgundy:   #7A1F2B;
    --burgundy-2: #5A1620;
    --emerald:    #1F6B4F;
    --muted:      #6B7280;
    --line:       #D9CFB6;
    --line-dark:  #294A6B;

    /* Semantic */
    --bg:         var(--ivory);
    --surface:    #ffffff;
    --surface-2:  var(--parchment);
    --text:       var(--ink);
    --text-soft:  #3a4757;
    --text-muted: var(--muted);
    --primary:    var(--gold);
    --primary-fg: var(--ink);
    --accent:     var(--burgundy);
    --success:    #2E7D5B;
    --danger:     #B23A48;
    --warning:    #C99216;

    /* Radius & shadow */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;
    --r-xl: 22px;
    --shadow-sm: 0 1px 2px rgba(11,27,43,.08);
    --shadow:    0 6px 20px rgba(11,27,43,.10);
    --shadow-lg: 0 24px 60px rgba(11,27,43,.18);
    --shadow-gold: 0 8px 30px rgba(201,162,39,.25);

    /* Type */
    --font-serif: 'Playfair Display', 'Lora', Georgia, serif;
    --font-body:  'Lora', Georgia, 'Times New Roman', serif;
    --font-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Layout */
    --topbar-h: 76px;
    --container: 1200px;
}

/* Reset ringan */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.65;
    min-height: 100vh;
    /* Tekstur kertas halus */
    background-image:
      radial-gradient(circle at 10% 0%, rgba(201,162,39,.06), transparent 40%),
      radial-gradient(circle at 90% 100%, rgba(31,64,104,.06), transparent 40%);
    background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: var(--ink-3); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold-deep); }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

h1,h2,h3,h4,h5 {
    font-family: var(--font-serif);
    color: var(--ink);
    line-height: 1.25;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-ui); }

p { margin: 0 0 1em; }

::selection { background: var(--gold-soft); color: var(--ink); }

/* Scrollbar tipis */
* { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Util */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.flex { display: flex; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.hidden { display: none !important; }
.full { width: 100%; }
.divider-gold {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 24px 0;
}
.serif { font-family: var(--font-serif); }
.ui-font { font-family: var(--font-ui); }

/* Ornament (garis emas berlapis) */
.ornament {
    display: flex; align-items: center; gap: 12px; justify-content: center;
    color: var(--gold); font-family: var(--font-serif);
}
.ornament::before,
.ornament::after {
    content: ''; flex: 1; max-width: 80px;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    height: 4px;
}