/* =========================================================
   Lentera Pustaka — Nature Theme (Forest · Savanna · Garden)
   Design tokens
   ========================================================= */
:root {
    /* === Palet alam === */
    --ink:        #0F2A1D;   /* deep forest */
    --ink-2:      #1B4332;   /* forest */
    --ink-3:      #2D6A4F;   /* moss */
    --parchment:  #FEFAE0;   /* savanna cream */
    --ivory:      #FBFCF4;   /* warm white / sun-bleached */
    --gold:       #DDA15E;   /* sunset / earthy amber */
    --gold-soft:  #E9C29A;   /* soft sand */
    --gold-deep:  #9B5D1F;   /* sun-baked clay */
    --burgundy:   #A8421C;   /* terracotta */
    --burgundy-2: #7A2E12;   /* deep terracotta */
    --emerald:    #40916C;   /* fresh moss */
    --leaf:       #95D5B2;   /* spring leaf */
    --sage:       #B7CFB1;   /* sage */
    --bark:       #5D4037;   /* bark brown */
    --sky:        #A8C8B5;   /* misty sky */

    --muted:      #6B7B6F;   /* mossy grey */
    --line:       #DCE3D2;   /* light moss line */
    --line-dark:  #1B4332;

    /* === Semantic === */
    --bg:         #F2EFD6;   /* savanna sand */
    --surface:    #FBFCF4;
    --surface-2:  var(--parchment);
    --text:       var(--ink);
    --text-soft:  #34463A;
    --text-muted: var(--muted);
    --primary:    var(--gold);
    --primary-fg: var(--ink);
    --accent:     var(--burgundy);
    --success:    #2D6A4F;
    --danger:     #A8421C;
    --warning:    #E5B847;

    /* === Radius & shadow === */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --shadow-sm:   0 1px 2px rgba(15,42,29,.06);
    --shadow:      0 10px 28px rgba(15,42,29,.10);
    --shadow-lg:   0 18px 42px rgba(15,42,29,.14);
    --shadow-gold: 0 10px 26px rgba(221,161,94,.28);

    /* === 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%;
}
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;
    /* Latar bertekstur alam: gradient sand + subtle leaf pattern */
    background-image:
        radial-gradient(circle at 12% 18%, rgba(149,213,178,.18) 0, transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(221,161,94,.12) 0, transparent 30%),
        linear-gradient(180deg, #F5F1DE 0%, #ECE9CC 100%);
    background-attachment: fixed;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

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

/* Word break utk konten panjang */
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 { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
code {
    background: var(--parchment);
    color: var(--ink-2);
    padding: 2px 6px; border-radius: 4px;
    font-size: .88em;
    font-family: 'Inter', monospace;
}

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, textarea, select, button {
    font-size: inherit;
    max-width: 100%;
    font-family: inherit;
}
input, textarea, select { font-size: 16px; }
@media (min-width: 600px) { input, textarea, select { font-size: .95rem; } }

p { margin: 0 0 1em; }

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

/* Scrollbar tipis bertema */
* { scrollbar-width: thin; scrollbar-color: var(--emerald) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--emerald); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
*::-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: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
    margin: 36px 0 28px;
    opacity: .6;
}
.serif { font-family: var(--font-serif); }
.ui-font { font-family: var(--font-ui); }

/* === Ornamen daun === */
.ornament {
    display: flex; align-items: center; gap: 12px; justify-content: center;
    color: var(--emerald); font-family: var(--font-serif);
}
.ornament::before,
.ornament::after {
    content: ''; flex: 1; max-width: 80px;
    border-top: 1px solid var(--emerald);
    height: 1px;
    opacity: .6;
}