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

    /* Semantic */
    --bg:         #F7F4EC;
    --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: 8px;
    --r-xl: 10px;
    --shadow-sm: 0 1px 2px rgba(11,27,43,.05);
    --shadow:    0 10px 28px rgba(11,27,43,.08);
    --shadow-lg: 0 18px 42px rgba(11,27,43,.12);
    --shadow-gold: 0 10px 26px rgba(201,162,39,.18);

    /* 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: 1180px;
    --content-pad: clamp(16px, 4vw, 28px);
}

/* Reset ringan */
*,*::before,*::after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    max-width: 100%;
    width: 100%;
}
/* overflow-x hanya di html — body tetap normal agar position:sticky topbar tetap berfungsi */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.65;
    min-height: 100vh;
    min-width: 320px;
    background-image: linear-gradient(180deg, #FAF8F2 0%, #F4EFE3 100%);
    background-attachment: fixed;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Media responsive global */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; display: block; }
img { height: auto; }

/* Word break utk URL panjang, username tanpa spasi, dsb */
p, li, td, th, dd, blockquote, .bubble, .post-content, .comment .bubble,
.card, .book-info .title, .book-info .author, .chat-thread .last {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Pre/code jangan overflow parent */
pre, code { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }

/* Tabel tanpa wrapper tetap tidak overflow parent */
table { max-width: 100%; }

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;
    overflow-wrap: break-word;
}
h1 { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 2.6vw, 2rem); font-weight: 700; }
h3 { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 600; font-family: var(--font-ui); }

/* Input jangan zoom in iOS saat focus (min 16px), dan jangan overflow parent */
input, textarea, select, button {
    font-size: inherit;
    max-width: 100%;
}
input, textarea, select { font-size: 16px; } /* iOS zoom fix */
@media (min-width: 600px) { input, textarea, select { font-size: .95rem; } }

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 { width: min(100%, var(--container)); margin: 0 auto; padding: 0 var(--content-pad); }
.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: 1px;
    background: var(--line);
    margin: 36px 0 28px;
}
.serif { font-family: var(--font-serif); }
.ui-font { font-family: var(--font-ui); }

/* Ornament (garis emas berlapis) */
.ornament {
    display: none; 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;
}