/* ============================================================
   BACA NOVEL — stylesheet modul (mobile-first, ringan)
   Prinsip: 1 kolom, rapih, tanpa animasi berat.
   Tema: FLUID colorful ringan (keputusan Maulana 2026-10-04) —
   gradient statis saja, TANPA animasi & TANPA backdrop-filter
   berat agar tetap instan di HP kentang.
   ============================================================ */

:root {
    --bn-brand: #7C5CBF;
    --bn-brand-dark: #6A4CAD;
    --bn-brand2: #A855F7;
    --bn-brand3: #EC4899;
    --bn-bg: #FDFCF9;
    --bn-card: #FFFFFF;
    --bn-ink: #1E1B2E;
    --bn-muted: #6B6584;
    --bn-line: #E8E4F0;
    --bn-gold: #D9A441;
    --bn-radius: 14px;
    --bn-grad: linear-gradient(135deg, #7C5CBF 0%, #A855F7 55%, #EC4899 100%);
}

/* --- Kerangka mobile-first: konten max 480px di tengah (desktop) --- */
.bn-shell {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bn-bg);
    position: relative;
}
/* Semburat fluid statis di latar (ringan: 1 layer, tanpa animasi) */
.bn-shell::before {
    content: "";
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: 240px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(20rem 12rem at 15% 0%, rgba(168, 85, 247, 0.14), transparent 65%),
        radial-gradient(20rem 12rem at 85% 10%, rgba(236, 72, 153, 0.10), transparent 65%);
}
.bn-main, .bn-header, .bn-bottomnav { position: relative; z-index: 1; }
@media (min-width: 520px) {
    body.bn-body { background: #ECE8F2; }
    .bn-shell {
        border-left: 1px solid var(--bn-line);
        border-right: 1px solid var(--bn-line);
        box-shadow: 0 0 32px rgba(30, 27, 46, .08);
    }
}

/* --- Header --- */
.bn-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bn-grad);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 18px -6px rgba(124, 92, 191, 0.45);
}
.bn-header .bn-logo {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
}
.bn-header .bn-search-btn {
    color: #fff;
    padding: 8px;
    border-radius: 10px;
    display: inline-flex;
}

/* --- Bottom nav --- */
.bn-bottomnav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 40;
    background: var(--bn-card);
    border-top: 1px solid var(--bn-line);
    display: flex;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bn-bottomnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--bn-muted);
    text-decoration: none;
}
.bn-bottomnav a.active {
    color: var(--bn-brand);
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.12), transparent);
    border-radius: 10px 10px 0 0;
}
.bn-bottomnav svg { width: 22px; height: 22px; }
.bn-main { padding-bottom: 76px; }

/* --- Section ala Grogol --- */
.bn-section { padding: 16px 16px 4px; }
.bn-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.bn-section-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bn-ink);
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, #7C5CBF, #EC4899) 1;
    padding-left: 8px;
}
.bn-section-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--bn-brand);
    text-decoration: none;
}

/* --- Item list vertikal: cover kecil + judul + meta --- */
.bn-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bn-line);
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}
.bn-row:last-child { border-bottom: none; }
.bn-cover {
    width: 52px;
    height: 78px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bn-line);
}
.bn-row-body { flex: 1; min-width: 0; }
.bn-row-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bn-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bn-row-meta {
    font-size: 12px;
    color: var(--bn-muted);
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
}
.bn-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #EDE7FA, #F5E6F7);
    color: var(--bn-brand-dark);
    border: 1px solid #E3D9F5;
    white-space: nowrap;
}
.bn-badge.tamat { background: linear-gradient(135deg, #DFF3E8, #E6F7EF); color: #2E7D5B; border-color: #C4E8D4; }
.bn-stars { color: var(--bn-gold); font-size: 12px; letter-spacing: 1px; }

/* --- Kartu & tombol --- */
.bn-card {
    background: var(--bn-card);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-radius);
    padding: 16px;
    box-shadow: 0 6px 20px -10px rgba(124, 92, 191, 0.18);
}
.bn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bn-grad);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(168, 85, 247, 0.5);
}
.bn-btn:active { filter: brightness(0.94); }
.bn-btn-ghost {
    background: transparent;
    color: var(--bn-brand);
    border: 1.5px solid var(--bn-brand);
}
.bn-input, .bn-textarea {
    width: 100%;
    border: 1.5px solid var(--bn-line);
    border-radius: 10px;
    padding: 12px;
    font-size: 15px;
    background: #fff;
    color: var(--bn-ink);
}
.bn-input:focus, .bn-textarea:focus {
    outline: none;
    border-color: var(--bn-brand);
}
.bn-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; display: block; color: var(--bn-ink); }

/* --- Rating interaktif --- */
.bn-rate-stars { display: flex; gap: 4px; }
.bn-rate-stars button {
    background: none;
    border: none;
    font-size: 34px;
    line-height: 1;
    color: #D8D3E8;
    cursor: pointer;
    padding: 2px;
}
.bn-rate-stars button.on { color: var(--bn-gold); }

/* --- Komentar --- */
.bn-comment { padding: 12px 0; border-bottom: 1px solid var(--bn-line); }
.bn-comment:last-child { border-bottom: none; }
.bn-comment-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.bn-comment-name { font-size: 13px; font-weight: 700; color: var(--bn-ink); }
.bn-comment-time { font-size: 11px; color: var(--bn-muted); }
.bn-comment-body { font-size: 14px; line-height: 1.6; color: var(--bn-ink); white-space: pre-wrap; word-wrap: break-word; }
.bn-comment-actions { margin-top: 6px; display: flex; gap: 12px; }
.bn-comment-actions button {
    background: none; border: none; font-size: 12px; font-weight: 600;
    color: var(--bn-muted); cursor: pointer; padding: 0;
}
.bn-comment-reply { margin-left: 16px; padding-left: 12px; border-left: 2px solid var(--bn-line); }

/* --- Halaman baca --- */
.bn-read-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bn-card);
    border-bottom: 1px solid var(--bn-line);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bn-read-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bn-tool-btn {
    border: 1.5px solid var(--bn-line);
    background: var(--bn-card);
    border-radius: 10px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    color: var(--bn-ink);
    padding: 0 10px;
}
.bn-tool-btn.active { border-color: var(--bn-brand); color: var(--bn-brand); }
.bn-read-body {
    padding: 24px 20px 16px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.9;
    color: var(--bn-ink);
    word-wrap: break-word;
    text-align: justify;
}
.bn-read-body.font-s { font-size: 16px; }
.bn-read-body.font-l { font-size: 21px; }
.bn-read-body p { margin: 0 0 1.1em; }
.bn-read-body h2, .bn-read-body h3 { font-family: inherit; font-weight: 700; margin: 1.4em 0 .7em; line-height: 1.4; }
.bn-read-body blockquote {
    border-left: 3px solid var(--bn-brand);
    margin: 1.2em 0;
    padding: .4em 0 .4em 1em;
    color: var(--bn-muted);
    font-style: italic;
}
.bn-read-body hr { border: none; border-top: 1px solid var(--bn-line); margin: 2em auto; width: 40%; }
.bn-read-nav {
    display: flex;
    gap: 10px;
    padding: 8px 16px 20px;
}
.bn-read-nav .bn-btn { font-size: 16px; padding: 16px 12px; }
.bn-read-nav .bn-btn.disabled { opacity: .4; pointer-events: none; }

/* --- Mode malam (halaman baca) --- */
[data-bn-theme="dark"] {
    --bn-bg: #14121F;
    --bn-card: #1E1B2E;
    --bn-ink: #EDEBF5;
    --bn-muted: #A9A4C0;
    --bn-line: #2E2A44;
}
[data-bn-theme="dark"] .bn-input,
[data-bn-theme="dark"] .bn-textarea { background: #1E1B2E; color: #EDEBF5; }
[data-bn-theme="dark"] .bn-cover { background: #2E2A44; }
@media (min-width: 520px) {
    [data-bn-theme="dark"] body.bn-body { background: #0C0A14; }
}

/* --- Util --- */
.bn-center { text-align: center; }
.bn-mt { margin-top: 16px; }
.bn-muted { color: var(--bn-muted); font-size: 13px; }
.bn-empty { text-align: center; padding: 40px 20px; color: var(--bn-muted); }
.bn-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--bn-line);
    color: var(--bn-muted);
    text-decoration: none;
    margin: 0 6px 8px 0;
}
.bn-chip.active { border-color: var(--bn-brand); color: var(--bn-brand); background: #EDE7FA; }
.bn-searchbar { display: flex; gap: 8px; }
.bn-searchbar .bn-input { flex: 1; }
.bn-searchbar .bn-btn { width: auto; padding: 12px 18px; }
.bn-toast {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    background: #1E1B2E;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    z-index: 60;
    max-width: 90%;
    text-align: center;
}