/* =========================================================
   Rumah Novel — tema kustom v2
   Warna utama: Koral (#FB6A4C), Biru langit (#82AAF2),
   Peach lembut (#F8DCD3)
   Font: "Fraunces" untuk judul, "Inter" untuk isi
   ========================================================= */

:root {
    --primer: #FB6A4C;
    --primer-tua: color-mix(in srgb, var(--primer) 78%, black);
    --primer-muda: color-mix(in srgb, var(--primer) 80%, white);
    --sekunder: #82AAF2;
    --sekunder-tua: color-mix(in srgb, var(--sekunder) 72%, black);
    --sekunder-muda: color-mix(in srgb, var(--sekunder) 65%, white);
    --lembut: #F8DCD3;
    --lembut-tua: color-mix(in srgb, var(--lembut) 75%, var(--primer));
    --kertas: color-mix(in srgb, var(--lembut) 6%, #FFFFFF);
    --kertas-tua: color-mix(in srgb, var(--lembut) 55%, #FFFFFF);
    --arang: #322722;
    --abu: color-mix(in srgb, var(--arang) 55%, #FFFFFF);
    --garis: color-mix(in srgb, var(--lembut) 65%, #FFFFFF);
    --merah: #D6483A;
    --hijau: #2F8F5B;

    /* Token efek kaca (glassmorphism) */
    --kaca-bg: rgba(255, 255, 255, 0.55);
    --kaca-bg-kuat: rgba(255, 255, 255, 0.72);
    --kaca-bg-sidebar: rgba(255, 255, 255, 0.42);
    --kaca-border: rgba(255, 255, 255, 0.6);
    --kaca-blur: 18px;
    --kaca-bayang: 0 8px 32px rgba(50, 39, 34, 0.14);
    --lebar-sidebar: 240px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: linear-gradient(135deg, #BEEFFB 0%, #8FB8FA 35%, #A99BF5 70%, #E6B9F2 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--arang);
    font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.6;
}

h1, h2, h3, h4, .brand {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
}
/* Tombol tetap sans-serif (sesuai kaidah tipografi editorial: serif hanya
   untuk judul besar, judul buku, kutipan, dan nama brand — bukan tombol,
   navigasi, metadata, atau elemen antarmuka teknis lainnya). */
.btn {
    font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
}

a { color: var(--sekunder-tua); text-decoration: none; }
a:hover { color: var(--primer); }

img { max-width: 100%; display: block; }

/* Pengaman global: setiap ikon SVG inline di seluruh situs (dibuat lewat
   fungsi icon_*() di functions.php) selalu dibatasi ukurannya di sini,
   supaya ikon baru yang ditambahkan nanti tidak pernah tampil raksasa
   walau lupa diberi aturan ukuran khusus. */
svg { width: 1em; height: 1em; }
.btn svg, .btn-outline svg {
    width: 15px; height: 15px; flex-shrink: 0; vertical-align: -2px; margin-right: 3px;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-sempit {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Navigasi ---------- */
.navbar {
    background: linear-gradient(120deg, var(--primer) 0%, var(--primer-tua) 100%);
    border-bottom: 4px solid var(--sekunder);
}
.navbar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.brand {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.brand span { color: var(--lembut); }
.nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav-links a { color: #FFEDE7; font-size: 0.95rem; }
.nav-links a:hover { color: #fff; }
.nav-links .btn { padding: 7px 16px; font-size: 0.9rem; }
.btn-tulis { background: var(--sekunder); color: #fff !important; }
.btn-tulis:hover { background: var(--sekunder-tua); color: #fff !important; }

/* ---------- Tombol ---------- */
.btn {
    display: inline-block;
    background: var(--primer);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
}
.btn:hover { background: var(--primer-tua); color: #fff; }
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--primer);
    color: var(--primer-tua);
}
.btn-outline:hover { background: var(--primer); color: #fff; }
.btn-kecil { padding: 6px 14px; font-size: 0.85rem; }
.btn-bahaya { background: var(--merah); color: #fff; }
.btn-bahaya:hover { background: #a5342a; color: #fff; }
.btn-blok { width: 100%; text-align: center; }
.btn-sekunder { background: var(--sekunder); color: #fff; }
.btn-sekunder:hover { background: var(--sekunder-tua); color: #fff; }

/* ---------- Hero ---------- */
.hero {
    padding: 56px 0 40px;
    background: linear-gradient(180deg, var(--lembut) 0%, var(--kertas) 100%);
    border-bottom: 1px solid var(--garis);
}
.hero h1 {
    font-size: 2.4rem;
    margin: 0 0 10px;
    max-width: 650px;
    color: var(--primer-tua);
}
.hero p { color: var(--abu); max-width: 560px; margin: 0; font-size: 1.05rem; }
.hero input[type=text] {
    border: 1.5px solid var(--lembut-tua);
    background: #fff;
}
.hero input[type=text]:focus { outline: none; border-color: var(--sekunder); }

.form-filter-cari { margin-top: 22px; max-width: 720px; }
.baris-cari { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--lembut-tua); border-radius: 8px; padding: 4px 4px 4px 14px; }
.ikon-cari-input { display: flex; color: var(--abu); flex-shrink: 0; }
.ikon-cari-input svg { width: 18px; height: 18px; }
.baris-cari input[type=text] { border: none; padding: 8px 4px; flex: 1; }
.baris-cari input[type=text]:focus { outline: none; box-shadow: none; }
.baris-cari .btn { flex-shrink: 0; }
.baris-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.baris-filter select { width: auto; flex: 1; min-width: 140px; font-size: 0.86rem; padding: 7px 10px; background: #fff; }

/* ---------- Tab kategori ---------- */
.tab-kategori { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 6px; }
.tab-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid var(--sekunder);
    color: var(--sekunder-tua);
    font-size: 0.86rem;
    font-weight: 600;
    background: #fff;
}
.tab-item:hover { background: var(--lembut); color: var(--primer-tua); }
.tab-item.aktif { background: var(--sekunder); color: #fff; border-color: var(--sekunder); }

/* ---------- Baris "Jelajahi Karya" di beranda: kartu ikon kaca-neumorphism ---------- */
.kolom-karya-beranda .tab-kategori { gap: 14px; margin: 6px 0 26px; }
.kolom-karya-beranda .tab-item {
    flex-direction: column; gap: 6px; padding: 16px 20px; border: none;
    background: rgba(255,255,255,0.55);
    box-shadow: 5px 5px 12px rgba(31,38,135,0.08), -5px -5px 12px rgba(255,255,255,0.65);
    color: var(--arang); font-weight: 600; min-width: 84px; border-radius: 18px;
}
.kolom-karya-beranda .tab-item-ikon { font-size: 1.5rem; line-height: 1; }
.kolom-karya-beranda .tab-item-label { font-size: 0.8rem; }
.kolom-karya-beranda .tab-item:hover {
    background: rgba(255,255,255,0.75); color: var(--primer-tua); transform: translateY(-2px);
}
.kolom-karya-beranda .tab-item.aktif {
    background: linear-gradient(135deg, var(--primer), var(--primer-tua)); color: #fff;
    box-shadow: inset 3px 3px 8px rgba(0,0,0,0.15), inset -2px -2px 6px rgba(255,255,255,0.2);
}
@media (max-width: 640px) {
    .kolom-karya-beranda .tab-kategori { gap: 8px; }
    .kolom-karya-beranda .tab-item { min-width: 68px; padding: 12px 10px; }
}

/* ---------- Grid novel ---------- */
.grid-novel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 26px;
    padding: 30px 0 60px;
}
.kartu-novel {
    display: block;
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 10px;
    padding: 10px;
    transition: box-shadow 0.15s, transform 0.15s;
}
.kartu-novel:hover { box-shadow: 0 8px 24px rgba(251, 106, 76, 0.18); transform: translateY(-2px); }
.sampul-wrap {
    aspect-ratio: 2 / 3;
    background: var(--kertas-tua);
    border: 1px solid var(--garis);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}
.sampul-wrap img { width: 100%; height: 100%; object-fit: cover; }
.sampul-kosong {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primer-tua); font-family: 'Fraunces', serif; font-size: 0.9rem;
    text-align: center; padding: 10px;
    background: linear-gradient(150deg, var(--lembut) 0%, var(--kertas-tua) 100%);
}
.kartu-novel h3 {
    font-size: 1rem; margin: 0 0 4px; color: var(--arang); font-weight: 600;
}
.kartu-novel .penulis { font-size: 0.85rem; color: var(--abu); margin: 0; }
.meta-kecil { font-size: 0.8rem; color: var(--abu); margin-top: 4px; }

.kosong {
    padding: 60px 20px;
    text-align: center;
    color: var(--abu);
}

/* ---------- Badge kategori ---------- */
.badge-kategori {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.badge-kategori-novel   { background: #E7EFFD; color: var(--sekunder-tua); border: 1px solid var(--sekunder); }
.badge-kategori-cerpen  { background: #FDE7E1; color: var(--primer-tua); border: 1px solid var(--primer); }
.badge-kategori-puisi   { background: #FBEEE9; color: #A5573A; border: 1px solid var(--lembut-tua); }
.badge-kategori-artikel { background: #EAF1FE; color: #34589C; border: 1px solid var(--sekunder-tua); }
.badge-kategori-opini   { background: #FFF1EC; color: var(--merah); border: 1px solid var(--primer-tua); }

/* ---------- Tagar (hashtag) ---------- */
.tagar-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip-tagar {
    display: inline-block;
    background: var(--lembut);
    color: var(--primer-tua);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
}
.chip-tagar:hover { background: var(--primer); color: #fff; }
.help-tagar { color: var(--abu); font-size: 0.82rem; margin-top: 4px; }

/* ---------- Halaman detail karya ---------- */
.detail-novel { padding: 40px 0; display: grid; grid-template-columns: 220px 1fr; gap: 36px; }
.detail-novel .sampul-wrap { margin-bottom: 16px; }
.detail-info h1 { font-size: 1.9rem; margin: 0 0 6px; }
.detail-info .oleh { color: var(--abu); margin-bottom: 16px; }
.detail-info .oleh a { color: var(--sekunder-tua); font-weight: 600; }
.tag { display: inline-block; background: var(--kertas-tua); border: 1px solid var(--garis); border-radius: 20px; padding: 3px 12px; font-size: 0.8rem; color: var(--primer-tua); margin-right: 6px; }
.aksi-row { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; align-items: center; }
.btn-like { background: var(--kertas-tua); border: 1.5px solid var(--primer); color: var(--primer-tua); }
.btn-like.aktif { background: var(--primer); color: #fff; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-row a {
    border: 1px solid var(--garis); padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; color: var(--sekunder-tua);
}
.share-row a:hover { border-color: var(--sekunder); background: var(--sekunder); color: #fff; }

.daftar-bab { list-style: none; padding: 0; margin: 16px 0; border-top: 1px solid var(--garis); }
.daftar-bab li { border-bottom: 1px solid var(--garis); }
.daftar-bab a { display: flex; justify-content: space-between; padding: 12px 8px; color: var(--arang); border-radius: 6px; }
.daftar-bab a:hover { color: var(--primer-tua); background: var(--kertas-tua); }
.daftar-bab .no-bab { color: var(--abu); font-size: 0.85rem; margin-right: 8px; }

/* ---------- Konten karya tunggal (puisi/artikel/opini) ---------- */
.konten-tunggal {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--garis);
    font-size: 1.08rem;
    line-height: 1.9;
}
.konten-tunggal p, .reader-content p { margin: 0 0 1.1em; }
.konten-tunggal h1, .reader-content h1 { font-family: 'Fraunces', serif; font-size: 1.5em; color: var(--primer-tua); margin: 1.2em 0 0.5em; }
.konten-tunggal h2, .reader-content h2 { font-family: 'Fraunces', serif; font-size: 1.3em; color: var(--primer-tua); margin: 1.2em 0 0.5em; }
.konten-tunggal h3, .reader-content h3 { font-family: 'Fraunces', serif; font-size: 1.12em; margin: 1.2em 0 0.5em; }
.konten-tunggal ul, .reader-content ul, .konten-tunggal ol, .reader-content ol { margin: 0 0 1.1em; padding-left: 1.6em; }
.konten-tunggal blockquote, .reader-content blockquote {
    border-left: 3px solid var(--primer); background: var(--kertas-tua);
    padding: 10px 18px; margin: 14px 0; font-style: italic; border-radius: 0 6px 6px 0;
}
.konten-tunggal hr, .reader-content hr { border: none; border-top: 2px dashed var(--garis); margin: 24px 0; }
.konten-tunggal img, .reader-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.konten-tunggal table, .reader-content table { border-collapse: collapse; width: 100%; margin: 14px 0; }
.konten-tunggal table td, .konten-tunggal table th, .reader-content table td, .reader-content table th {
    border: 1px solid var(--garis); padding: 8px 10px;
}
.konten-tunggal .ql-dropcap, .reader-content .ql-dropcap {
    float: left; font-family: 'Fraunces', serif; font-size: 3.4em; line-height: 0.82;
    font-weight: 700; padding: 4px 8px 0 0; color: var(--primer-tua);
}
.konten-tunggal .ql-footnote-ref, .reader-content .ql-footnote-ref {
    font-size: 0.72em; vertical-align: super; font-weight: 700; color: var(--sekunder-tua); text-decoration: none;
}
.konten-tunggal p.ql-caption, .reader-content p.ql-caption {
    color: var(--abu); font-size: 0.85em; border-top: 1px solid var(--garis); padding-top: 6px; margin-top: -0.6em;
}

/* ---------- Ulasan / komentar ---------- */
.ulasan-box { margin-top: 30px; border-top: 2px solid var(--garis); padding-top: 24px; }
.komentar-item { border-bottom: 1px solid var(--garis); padding: 14px 0; }
.komentar-item .nama { font-weight: 600; margin-right: 8px; color: var(--primer-tua); }
.komentar-item .waktu { color: var(--abu); font-size: 0.8rem; }
.komentar-item p { margin: 6px 0 0; }

/* ---------- Form ---------- */
.form-box {
    background: #fff;
    border: 1px solid var(--garis);
    padding: 32px;
    border-radius: 10px;
    max-width: 460px;
    margin: 48px auto;
    box-shadow: 0 4px 20px rgba(251, 106, 76, 0.06);
}
.form-box.lebar { max-width: 720px; }
.form-box h2 { margin-top: 0; color: var(--primer-tua); }
label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: 0.92rem; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #E9D5CB; border-radius: 6px;
    font-family: inherit; font-size: 1rem; background: #fff; color: var(--arang);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sekunder); box-shadow: 0 0 0 3px rgba(130,170,242,0.18); }
textarea { resize: vertical; }
textarea.editor-bab { min-height: 380px; font-size: 1.05rem; line-height: 1.8; }
.help-text { color: var(--abu); font-size: 0.82rem; margin-top: 4px; }
.pesan { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 0.92rem; }
.pesan-success { background: #E7F1E4; color: #2F5D34; border: 1px solid #B9D8B4; }
.pesan-error { background: #FBE7E4; color: #8A3129; border: 1px solid #EAB9B2; }

fieldset.grup-kategori { border: 1.5px dashed var(--sekunder-muda); border-radius: 8px; padding: 16px; margin-top: 10px; }
fieldset.grup-kategori legend { color: var(--sekunder-tua); font-weight: 700; font-size: 0.85rem; padding: 0 6px; }
.grup-field { transition: opacity 0.1s; }

/* ---------- Pilihan kategori bergambar (kartu radio) ---------- */
.pilih-kategori { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.pilih-kategori label {
    margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 1.5px solid var(--garis); border-radius: 8px; padding: 14px 8px; cursor: pointer;
    font-weight: 600; font-size: 0.86rem; color: var(--abu); text-align: center; background: #fff;
}
.pilih-kategori input { width: auto; }
.pilih-kategori label.aktif {
    border-color: var(--primer); background: var(--kertas-tua); color: var(--primer-tua);
}
.pilih-kategori .ikon { font-size: 1.5rem; }

/* ---------- Reader / baca bab ---------- */
.reader { max-width: 680px; margin: 0 auto; padding: 40px 20px 80px; }
.reader .judul-novel { color: var(--abu); font-size: 0.9rem; }
.reader h1 { font-size: 1.7rem; margin: 4px 0 30px; color: var(--primer-tua); }
.reader-content { font-size: 1.12rem; line-height: 1.9; }
.nav-bab { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--garis); gap: 10px; }
.nav-bab a, .nav-bab span { flex: 1; text-align: center; padding: 12px; border: 1px solid var(--garis); border-radius: 6px; }
.nav-bab a:hover { border-color: var(--primer); color: var(--primer-tua); }
.nav-bab .disabled { color: var(--garis); }

/* ---------- Panel (admin & user) ---------- */
.panel-layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 64px); }
.panel-sidebar { background: linear-gradient(180deg, var(--primer-tua) 0%, #B93A22 100%); color: #FFEDE7; padding: 24px 0; }
.panel-sidebar a {
    display: block; color: #FBDACE; padding: 10px 24px; font-size: 0.92rem;
}
.panel-sidebar a:hover, .panel-sidebar a.aktif { background: rgba(255,255,255,0.14); color: #fff; border-left: 3px solid var(--sekunder); }
.panel-sidebar .grup-label { padding: 18px 24px 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--lembut); }
.panel-main { padding: 32px; }
.panel-main h1 { margin-top: 0; font-size: 1.5rem; color: var(--primer-tua); }

.kartu-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 20px 0 36px; }
.kartu-stat { background: #fff; border: 1px solid var(--garis); padding: 18px; border-radius: 10px; border-top: 3px solid var(--sekunder); }
.kartu-stat .angka { font-family: 'Fraunces', serif; font-size: 1.9rem; color: var(--primer-tua); }
.kartu-stat .label { color: var(--abu); font-size: 0.85rem; }

table.tabel { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
table.tabel th, table.tabel td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--garis); font-size: 0.92rem; }
table.tabel th { background: var(--kertas-tua); font-weight: 600; color: var(--primer-tua); }
table.tabel tr:hover td { background: #FFF8F5; }
.badge { padding: 2px 9px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.badge-tayang { background: #E7F1E4; color: #2F5D34; }
.badge-draft { background: #F0E9D8; color: var(--abu); }
.badge-selesai { background: #E4EEF3; color: var(--sekunder-tua); }
.badge-admin { background: #F3E4D8; color: var(--primer-tua); }
.badge-penulis { background: #E4E9F3; color: var(--sekunder-tua); }
.aksi-tabel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aksi-tabel a, .aksi-tabel button { font-size: 0.82rem; }

.toolbar-panel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }

/* ---------- Profil penulis publik (interaktif) ---------- */
.profil-wrap {
    --pw-aksen: var(--primer);
    --pw-aksen-tua: var(--primer-tua);
    --pw-latar: var(--lembut);
    padding-bottom: 60px;
}
.profil-wrap.tema-biru     { --pw-aksen: #82AAF2; --pw-aksen-tua: #5686D9; --pw-latar: #E7EFFD; }
.profil-wrap.tema-peach    { --pw-aksen: #F0BFAF; --pw-aksen-tua: #C77A5E; --pw-latar: #FBEFE9; }
.profil-wrap.tema-senja    { --pw-aksen: #E0703F; --pw-aksen-tua: #B85631; --pw-latar: #FDE3D0; }
.profil-wrap.tema-lautan   { --pw-aksen: #2E8FA6; --pw-aksen-tua: #1F6B7C; --pw-latar: #DCF1F4; }
.profil-wrap.tema-monokrom { --pw-aksen: #4A4038; --pw-aksen-tua: #2E2622; --pw-latar: #EDEAE6; }

.profil-banner-wrap {
    position: relative;
    margin-bottom: 74px; /* ruang untuk avatar yang menumpuk di bawah banner */
}
.profil-banner {
    height: 220px;
    background: linear-gradient(135deg, var(--pw-latar) 0%, var(--kertas) 100%);
    overflow: hidden;
    border-radius: 0 0 18px 18px;
}
.profil-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar-besar {
    width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
    border: 5px solid #fff; outline: 3px solid var(--pw-aksen); background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18); display: block;
}
.avatar-besar-wrap {
    position: absolute; left: 28px; bottom: -58px; z-index: 5;
    display: inline-block; line-height: 0;
}
.avatar-kosong-besar {
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', serif; font-size: 2.6rem; color: var(--pw-aksen-tua); background: #fff;
}

.profil-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-left: 172px; min-height: 40px; }
.profil-namabox { flex: 1; min-width: 220px; }
.profil-namabaris { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profil-namabaris h1 { margin: 0; font-size: 1.6rem; color: var(--arang); }
.profil-namabox .bio { color: var(--abu); max-width: 560px; margin: 10px 0 0; }
.instagram-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.9rem; font-weight: 600;
    color: var(--pw-aksen-tua);
}
.instagram-link:hover { color: var(--pw-aksen); }
.instagram-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.stat-row { display: flex; align-items: center; gap: 22px; margin: 26px 0 6px; flex-wrap: wrap; }
.stat-item { display: flex; align-items: center; gap: 7px; font-size: 0.95rem; }
.stat-icon { display: flex; color: var(--pw-aksen-tua); }
.stat-icon svg { width: 18px; height: 18px; }
.stat-angka { font-weight: 700; font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--arang); }
.stat-label { color: var(--abu); font-size: 0.85rem; }
.stat-pemisah { width: 1px; height: 22px; background: var(--garis); }

.pemisah-utama { border: none; border-top: 2px solid var(--garis); margin: 28px 0 0; }

.tab-profil { display: flex; gap: 6px; margin: 22px 0 4px; border-bottom: 2px solid var(--garis); }
.tab-profil-item {
    background: none; border: none; cursor: pointer; padding: 10px 18px; font-size: 0.95rem;
    font-weight: 600; color: var(--abu); border-bottom: 3px solid transparent; margin-bottom: -2px;
    font-family: 'Fraunces', serif; display: inline-flex; align-items: center; gap: 7px;
}
.tab-profil-item svg { width: 16px; height: 16px; }
.tab-profil-item:hover { color: var(--pw-aksen-tua); }
.tab-profil-item.aktif { color: var(--pw-aksen-tua); border-bottom-color: var(--pw-aksen); }
.tab-konten { padding-top: 26px; }

.kartu-novel { position: relative; }
.kartu-novel-link { display: block; color: inherit; }
.kartu-novel-link:hover { color: inherit; }
.btn-simpan-kartu-wrap { position: absolute; top: 16px; right: 16px; z-index: 2; }
.btn-simpan-kartu-wrap .btn-simpan {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.92); box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    font-size: 1rem; text-decoration: none; color: var(--primer-tua);
}
.btn-simpan-kartu-wrap .btn-simpan.aktif { background: var(--primer); color: #fff; }
.btn-simpan-kartu-wrap .btn-simpan:hover { background: var(--primer); color: #fff; }
.btn.btn-simpan.aktif { background: var(--primer); border-color: var(--primer); color: #fff; }

.daftar-blog { display: flex; flex-direction: column; gap: 14px; }
.kartu-blog {
    display: block; background: #fff; border: 1px solid var(--garis); border-radius: 10px;
    padding: 18px 20px; color: inherit;
}
.kartu-blog:hover { border-color: var(--pw-aksen); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.kartu-blog h3 { margin: 4px 0 8px; font-size: 1.1rem; color: var(--arang); }
.kartu-blog .cuplikan { color: var(--abu); margin: 0 0 8px; font-size: 0.92rem; }

/* ---------- Pesan / obrolan privat ---------- */
.badge-notif {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px;
    background: var(--primer); color: #fff; font-size: 0.7rem; font-weight: 700; margin-left: 4px;
}
.daftar-percakapan { display: flex; flex-direction: column; gap: 2px; }
.item-percakapan {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 8px; color: inherit;
}
.item-percakapan:hover { background: var(--kertas-tua); }
.item-percakapan.belum-dibaca strong { color: var(--primer-tua); }
.item-percakapan .cuplikan { margin: 3px 0 0; color: var(--abu); font-size: 0.88rem; }

.ruang-obrolan { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 20px; max-height: 520px; overflow-y: auto; }
.bubel-baris { display: flex; }
.bubel-baris.kanan { justify-content: flex-end; }
.bubel-baris.kiri { justify-content: flex-start; }
.bubel {
    max-width: 78%; background: var(--kertas-tua); border: 1px solid var(--garis);
    border-radius: 12px; padding: 10px 14px;
}
.bubel-baris.kanan .bubel { background: var(--primer); color: #fff; border-color: var(--primer); }
.bubel-baris.kanan .bubel-meta a, .bubel-baris.kanan .bubel-meta .tautan-hapus { color: #FFE3DB; }
.bubel p { margin: 0; white-space: pre-wrap; }
.bubel-meta { font-size: 0.72rem; color: var(--abu); margin-top: 6px; }
.bubel-baris.kanan .bubel-meta { color: rgba(255,255,255,0.8); }
.bubel-balasan {
    font-size: 0.78rem; border-left: 3px solid var(--sekunder); padding: 3px 8px; margin-bottom: 6px;
    color: var(--abu); background: rgba(0,0,0,0.03); border-radius: 4px;
}
.tautan-hapus { background: none; border: none; padding: 0; font-size: inherit; color: var(--merah); text-decoration: underline; cursor: pointer; }
.form-kirim-pesan { margin-top: 14px; border-top: 1px solid var(--garis); padding-top: 16px; }

/* ---------- Avatar kecil (kartu karya, daftar pesan, bubble chat) ---------- */
.avatar-kecil {
    border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-block; vertical-align: middle;
}
.avatar-kecil-kosong {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--lembut); color: var(--primer-tua); font-family: 'Fraunces', serif; font-weight: 700;
}
.penulis-baris { display: flex; align-items: center; gap: 6px; margin: 0; }
.penulis-baris span { color: var(--abu); font-size: 0.85rem; }

/* Update baris daftar percakapan supaya ada avatar di kiri */
.item-percakapan { align-items: center; }
.item-percakapan .isi-percakapan { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.item-percakapan .teks-percakapan { min-width: 0; }
.item-percakapan .teks-percakapan strong { display: block; }
.item-percakapan .cuplikan { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Header nama lawan bicara + avatar di halaman chat */
.chat-judul { display: flex; align-items: center; gap: 10px; }

/* ---------- Stiker & lampiran di dalam bubble ---------- */
.bubel-stiker { background: transparent !important; border: none !important; padding: 0 !important; }
.gambar-stiker { width: 110px; height: 110px; object-fit: contain; display: block; }
.lampiran-file {
    display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;
    background: rgba(0,0,0,0.04); border-radius: 8px; padding: 8px 10px;
}
.bubel-baris.kanan .lampiran-file { background: rgba(255,255,255,0.18); }
.lampiran-file svg { width: 22px; height: 22px; flex-shrink: 0; }
.lampiran-file span { display: flex; flex-direction: column; font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.lampiran-file small { font-weight: 400; opacity: 0.8; font-size: 0.75rem; }

/* ---------- Toolbar komposer: emoji, stiker, lampiran ---------- */
.toolbar-komposer { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; position: relative; }
.tombol-alat-pesan {
    background: none; border: 1px solid var(--garis); border-radius: 6px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--abu);
}
.tombol-alat-pesan:hover { border-color: var(--sekunder); color: var(--sekunder-tua); }
.tombol-alat-pesan svg { width: 18px; height: 18px; }
.panel-alat-pesan {
    position: absolute; bottom: 42px; left: 0; z-index: 20; background: #fff; border: 1px solid var(--garis);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 12px; width: 280px; max-height: 260px; overflow-y: auto;
}
.grid-emoji { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.grid-emoji button {
    background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: 4px; border-radius: 6px;
}
.grid-emoji button:hover { background: var(--kertas-tua); }
.grid-stiker-kirim { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid-stiker-kirim button {
    background: none; border: 1px solid var(--garis); border-radius: 8px; padding: 4px; cursor: pointer;
}
.grid-stiker-kirim button:hover { border-color: var(--primer); }
.grid-stiker-kirim img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pratinjau-lampiran {
    display: flex; align-items: center; gap: 10px; background: var(--kertas-tua); border: 1px solid var(--garis);
    border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; font-size: 0.85rem;
}
.pratinjau-lampiran button { margin-left: auto; background: none; border: none; color: var(--merah); cursor: pointer; font-size: 1rem; }
.baris-kirim-pesan { display: flex; gap: 8px; align-items: flex-end; }
.baris-kirim-pesan textarea { flex: 1; }
.indikator-mengetik { font-size: 0.8rem; color: var(--abu); font-style: italic; height: 18px; }

/* ---------- Admin: kelola stiker ---------- */
.grid-stiker-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; margin-top: 12px; }
.kartu-stiker-admin { background: #fff; border: 1px solid var(--garis); border-radius: 10px; padding: 10px; text-align: center; }
.kartu-stiker-admin img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 6px; }
.kartu-stiker-admin p { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; }
.kartu-stiker-admin.nonaktif { opacity: 0.45; }

/* ---------- Notifikasi (lonceng di navbar) ---------- */
.wadah-lonceng { position: relative; }
.tombol-lonceng {
    background: none; border: none; cursor: pointer; color: #FFEDE7; position: relative;
    display: flex; align-items: center; padding: 4px;
}
.tombol-lonceng svg { width: 20px; height: 20px; }
.tombol-lonceng .badge-notif { position: absolute; top: -4px; right: -4px; margin: 0; }
.dropdown-notif {
    display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; width: 320px;
    background: rgba(255,255,255,0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.7); border-radius: 18px; box-shadow: 0 14px 34px rgba(31,38,135,0.16);
    max-height: 400px; overflow-y: auto; color: var(--arang);
}
.dropdown-notif.terbuka { display: block; }
.dropdown-notif-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--garis); }
.dropdown-notif-header strong { font-family: 'Fraunces', serif; color: var(--primer-tua); }
.dropdown-notif-header button { background: none; border: none; color: var(--sekunder-tua); font-size: 0.78rem; cursor: pointer; }
.item-notif { display: block; padding: 12px 16px; border-bottom: 1px solid var(--garis); color: inherit; }
.item-notif:hover { background: var(--kertas-tua); }
.item-notif.belum-dibaca { background: #FFF8F5; }
.item-notif .judul-notif { font-weight: 600; font-size: 0.88rem; margin: 0 0 3px; }
.item-notif .isi-notif { font-size: 0.82rem; color: var(--abu); margin: 0; }
.item-notif .waktu-notif { font-size: 0.72rem; color: var(--abu); margin-top: 4px; display: block; }
.btn-aktifkan-notif {
    display: block; width: 100%; background: var(--kertas-tua); border: none; border-top: 1px solid var(--garis);
    color: var(--primer-tua); font-size: 0.8rem; font-weight: 600; padding: 10px; cursor: pointer; text-align: center;
}
.btn-aktifkan-notif:hover { background: var(--lembut); }
.btn-aktifkan-notif.sudah-aktif { color: #2F5D34; background: #E7F1E4; cursor: default; }
.btn-aktifkan-notif.diblokir { color: var(--merah); background: #FBE7E4; }
.daftar-notifikasi { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.item-notifikasi {
    display: block; background: #fff; border: 1px solid var(--garis); border-radius: 10px;
    padding: 14px 18px; color: inherit;
}
.item-notifikasi:hover { border-color: var(--sekunder); }
.item-notifikasi strong { display: block; margin-bottom: 4px; color: var(--arang); }
.item-notifikasi p { margin: 0 0 6px; color: var(--abu); font-size: 0.9rem; }
.notif-kosong { padding: 24px 16px; text-align: center; color: var(--abu); font-size: 0.85rem; }

/* ---------- Pita izin notifikasi browser ---------- */
.pita-izin-notif {
    background: var(--sekunder); color: #fff; padding: 10px 20px; font-size: 0.88rem;
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center;
}
.pita-izin-notif button {
    background: #fff; color: var(--sekunder-tua); border: none; padding: 5px 14px; border-radius: 6px;
    font-weight: 600; cursor: pointer; font-size: 0.82rem;
}
.pita-izin-notif .tautan-tutup { background: none; color: #fff; text-decoration: underline; font-weight: 400; }

/* ---------- Beranda: 3/4 karya + 1/4 blog tayang ---------- */
.beranda-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 34px; align-items: start; }
.kolom-blog-beranda {
    background: #fff; border: 1px solid var(--garis); border-radius: 12px; padding: 20px; position: sticky; top: 20px;
}
.kolom-blog-beranda h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--primer-tua); display: flex; align-items: center; gap: 8px; }
.kolom-blog-beranda h3 svg { width: 18px; height: 18px; }
.kolom-blog-beranda .sub { color: var(--abu); font-size: 0.8rem; margin: 0 0 16px; }
.daftar-blog-mini { display: flex; flex-direction: column; gap: 14px; }
.kartu-blog-mini { display: block; color: inherit; padding-bottom: 14px; border-bottom: 1px solid var(--garis); }
.kartu-blog-mini:last-child { border-bottom: none; padding-bottom: 0; }
.kartu-blog-mini h4 { margin: 0 0 4px; font-size: 0.92rem; color: var(--arang); line-height: 1.35; }
.kartu-blog-mini:hover h4 { color: var(--primer-tua); }
.kartu-blog-mini .penulis-blog-mini { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.kartu-blog-mini .penulis-blog-mini span { font-size: 0.78rem; color: var(--abu); }
.kartu-blog-mini .waktu-blog-mini { font-size: 0.74rem; color: var(--abu); margin: 0; }

@media (max-width: 900px) {
    .beranda-grid { grid-template-columns: 1fr; }
    .kolom-blog-beranda { position: static; }
}

/* ---------- Pemilihan tema warna profil (di halaman Edit Profil) ---------- */
.pilih-tema { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 8px; }
.kotak-tema {
    margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
    border: 1.5px solid var(--garis); border-radius: 8px; padding: 12px 8px; cursor: pointer;
    font-weight: 600; font-size: 0.82rem; color: var(--abu); text-align: center; background: #fff;
}
.kotak-tema input { display: none; }
.kotak-tema:hover { border-color: var(--sekunder); }
.kotak-tema.aktif { border-color: var(--primer); background: var(--kertas-tua); color: var(--primer-tua); }
.contoh-tema { width: 100%; height: 28px; border-radius: 5px; }
.tema-koral .contoh-tema    { background: linear-gradient(90deg, #FB6A4C, #F8DCD3); }
.tema-biru .contoh-tema     { background: linear-gradient(90deg, #82AAF2, #E7EFFD); }
.tema-peach .contoh-tema    { background: linear-gradient(90deg, #F0BFAF, #FBEFE9); }
.tema-senja .contoh-tema    { background: linear-gradient(90deg, #E0703F, #FDE3D0); }
.tema-lautan .contoh-tema   { background: linear-gradient(90deg, #2E8FA6, #DCF1F4); }
.tema-monokrom .contoh-tema { background: linear-gradient(90deg, #4A4038, #EDEAE6); }

footer {
    text-align: center; padding: 30px 20px; color: var(--abu); font-size: 0.85rem;
    border-top: 1px solid var(--garis); margin-top: 40px;
    background: var(--kertas-tua);
}

@media (max-width: 720px) {
    .detail-novel { grid-template-columns: 1fr; }
    .detail-novel .sampul-wrap { max-width: 220px; }
    .panel-layout { grid-template-columns: 1fr; }
    .panel-sidebar { display: flex; overflow-x: auto; padding: 10px; }
    .panel-sidebar .grup-label { display: none; }
    .panel-sidebar a { white-space: nowrap; padding: 8px 14px; }

    .profil-banner-wrap { margin-bottom: 64px; }
    .avatar-besar { width: 96px; height: 96px; }
    .avatar-besar-wrap { left: 20px; bottom: -48px; }
    .profil-atas { padding-left: 20px; padding-top: 58px; }
}

/* ---------- Sistem Poin, Lencana V1, View & Trending ---------- */
.lencana-view {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,0.62); color: #fff; font-size: 0.72rem; font-weight: 600;
    padding: 3px 8px; border-radius: 20px; line-height: 1;
}
.lencana-view svg { width: 13px; height: 13px; }

.lencana-v1 {
    display: inline-block; background: linear-gradient(135deg, #CD8A4A, #A9662B);
    color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3px;
    padding: 1px 6px; border-radius: 8px; vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* Varian lencana yang menempel di pojok kanan-atas foto profil. */
.lencana-v1-avatar {
    position: absolute; right: -2px; bottom: 6px; z-index: 6;
    border: 2px solid #fff; border-radius: 50%; line-height: 0; background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.lencana-v1-avatar .lencana-v1 { position: static; border-radius: 12px; }
.lencana-badge {
    display: inline-block; width: 20px; height: 20px; object-fit: contain;
    vertical-align: middle; border-radius: 6px;
}
.lencana-v1-avatar .lencana-badge { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

.daftar-trending { display: flex; flex-direction: column; gap: 14px; padding: 24px 0 60px; }
.baris-trending {
    display: flex; align-items: flex-start; gap: 16px; background: #fff;
    border: 1px solid var(--garis); border-radius: 10px; padding: 14px; color: inherit;
}
.baris-trending:hover { border-color: var(--sekunder); }
.baris-trending.baris-peringkat-user { align-items: center; }
.peringkat-trending {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--kertas-tua);
    color: var(--primer-tua); font-family: 'Fraunces', serif; font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.sampul-trending { flex-shrink: 0; width: 64px; height: 96px; border-radius: 6px; overflow: hidden; border: 1px solid var(--garis); }
.sampul-trending img { width: 100%; height: 100%; object-fit: cover; }
.info-trending { flex: 1; min-width: 0; }
.info-trending h3 { margin: 4px 0 6px; font-size: 1.02rem; }
.stat-trending { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 0.82rem; color: var(--abu); }
.stat-trending svg { width: 14px; height: 14px; vertical-align: -2px; }
.avatar-peringkat { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--garis); }
.baris-trending .btn-simpan {
    align-self: center; background: none; border: 1.5px solid var(--garis); border-radius: 50%;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.baris-trending .btn-simpan.aktif { background: var(--primer); border-color: var(--primer); color: #fff; }

/* ---------- Panel Poin (admin) ---------- */
.baris-form-poin { display: none; }
.baris-form-poin.tampil { display: table-row; }
.form-sesuaikan-poin { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 0; }
.form-sesuaikan-poin select, .form-sesuaikan-poin input { width: auto; padding: 7px 10px; font-size: 0.88rem; }
.tautan-tombol { background: none; border: none; color: var(--sekunder-tua); text-decoration: underline; cursor: pointer; font-size: 0.82rem; padding: 0; }
.tautan-tombol:hover { color: var(--primer); }
.badge-sekunder { background: #E4E9F3; color: var(--sekunder-tua); }

.item-percakapan-pin { border: 1.5px solid #D9A25C; background: #FFF8EE; }
.item-percakapan-pin:hover { border-color: #C6862F; }

/* =========================================================
   GLASSMORPHISM — App Shell, Sidebar Kaca, & Panel Kaca
   Menggantikan navbar atas lama dengan sidebar kiri tetap,
   dengan latar & warna yang bisa diatur admin lewat
   admin/pengaturan.php (lihat blok_gaya_tema_situs()).
   ========================================================= */

body {
    background-color: var(--lembut);
    background-image:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,0.55), transparent 45%),
        linear-gradient(135deg, var(--lembut) 0%, var(--sekunder) 55%, var(--primer) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}
/* Saat admin mengunggah gambar latar, blok_gaya_tema_situs() menyisipkan
   <style>body{background-image:url(...)}</style> SETELAH file ini, jadi
   otomatis menang di urutan cascade dan menimpa gradasi bawaan di atas. */

.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

.tombol-menu-mobile {
    display: none; border: none; cursor: pointer;
    background: rgba(255,255,255,0.75); backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--primer-tua);
    align-items: center; justify-content: center;
}
.tombol-menu-mobile svg { width: 22px; height: 22px; }

.sidebar-glass {
    width: 254px; flex-shrink: 0; min-height: 100vh;
    position: sticky; top: 0; align-self: flex-start; overflow-y: auto;
    background: rgba(255,255,255,0.42);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border-right: 1px solid rgba(255,255,255,0.65);
    box-shadow: 6px 0 32px rgba(31,38,135,0.10);
    padding: 22px 14px 30px;
    display: flex; flex-direction: column; gap: 4px;
    z-index: 40;
}

.akun-aktif-sidebar {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px 18px;
    margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.55);
    color: inherit; text-decoration: none;
}
.akun-aktif-teks { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.akun-aktif-teks strong { font-size: 0.9rem; color: var(--arang); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.akun-aktif-teks small { font-size: 0.72rem; color: var(--abu); }
.brand-sidebar { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; color: var(--primer-tua); }
.brand-sidebar span { color: var(--sekunder-tua); }

.nav-sidebar { display: flex; flex-direction: column; gap: 3px; }
.nav-sidebar a, .nav-sidebar button.tombol-lonceng-sidebar {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px;
    color: var(--arang); font-size: 0.9rem; font-weight: 500; text-decoration: none;
    background: transparent; border: none; cursor: pointer; width: 100%; text-align: left;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.nav-sidebar a svg, .nav-sidebar button.tombol-lonceng-sidebar svg { width: 19px; height: 19px; flex-shrink: 0; }
.nav-sidebar a:hover, .nav-sidebar button.tombol-lonceng-sidebar:hover {
    background: rgba(255,255,255,0.55); box-shadow: 0 3px 12px rgba(31,38,135,0.10);
}
.nav-sidebar a.aktif {
    background: rgba(255,255,255,0.78); color: var(--primer-tua); font-weight: 700;
    box-shadow: 0 4px 14px rgba(31,38,135,0.14);
}
.tombol-nav-menonjol {
    background: linear-gradient(135deg, var(--primer), var(--primer-tua)) !important;
    color: #fff !important; box-shadow: 0 6px 18px rgba(251,106,76,0.35) !important;
    font-weight: 700 !important; margin: 8px 0 4px;
}
.tombol-nav-menonjol:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(251,106,76,0.42) !important; }

.pemisah-nav-sidebar { height: 1px; background: rgba(255,255,255,0.55); margin: 10px 6px; }

.badge-notif-nav {
    margin-left: auto; background: var(--primer); color: #fff; font-size: 0.66rem; font-weight: 700;
    padding: 1px 7px; border-radius: 10px; line-height: 1.5;
}

/* ---------- Panel kaca (glassmorphism): dua panel beranda & sejenisnya ---------- */
.kaca, .kolom-karya-beranda, .kolom-blog-beranda {
    background: rgba(255,255,255,0.52);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 22px;
    box-shadow: 0 10px 36px rgba(31,38,135,0.12);
}
.kolom-karya-beranda { padding: 24px; }
.kolom-blog-beranda { padding: 24px; position: sticky; top: 20px; }
.kartu-novel, .kartu-blog, .kartu-stiker-admin, .form-box, .panel-main table.tabel,
.kartu-stat, table.tabel, .baris-trending, .item-percakapan, .item-notifikasi,
.detail-novel, .komentar-item, .form-box {
    background: rgba(255,255,255,0.62) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.sampul-wrap, .avatar-besar, .avatar-kosong-besar, .profil-banner { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 900px) {
    .tombol-menu-mobile { display: flex; }
    .sidebar-glass {
        position: fixed; top: 0; left: 0; height: 100vh;
        transform: translateX(-100%); transition: transform 0.22s ease;
        box-shadow: 6px 0 40px rgba(0,0,0,0.25);
    }
    .sidebar-glass.terbuka { transform: translateX(0); }
    .app-shell::before {
        content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.35);
        opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 39;
    }
    .app-shell.menu-terbuka::before { opacity: 1; pointer-events: auto; }
    .konten-utama { padding-top: 60px; }
}

/* ---------- Submenu admin berkelompok dengan animasi buka/tutup ---------- */
.grup-menu-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
    color: #FBDACE; padding: 10px 24px; font-size: 0.92rem; font-family: inherit;
}
.grup-menu-toggle:hover { color: #fff; }
.ikon-chevron { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.2s ease; }
.grup-menu-toggle.terbuka .ikon-chevron { transform: rotate(180deg); }

.submenu-panel {
    max-height: 0; overflow: hidden;
    transition: max-height 0.28s ease;
}
.submenu-panel.terbuka { max-height: 260px; }
.submenu-panel a {
    display: flex !important; align-items: center; padding-left: 40px !important;
    font-size: 0.86rem !important; opacity: 0.92;
}
.submenu-panel a:hover, .submenu-panel a.aktif { opacity: 1; }

/* ---------- Tur pengenalan fitur (login pertama kali) ---------- */
.tur-kartu { padding: 40px 36px; text-align: center; }
.tur-progres { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
.tur-progres .titik {
    width: 9px; height: 9px; border-radius: 50%; background: rgba(50,39,34,0.18); cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.tur-progres .titik.aktif { background: var(--primer); transform: scale(1.25); }
.tur-langkah { display: none; animation: turMasuk 0.25s ease; }
.tur-langkah.aktif { display: block; }
@keyframes turMasuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tur-ikon { font-size: 2.6rem; margin-bottom: 6px; }
.tur-ikon svg { width: 40px; height: 40px; margin: 0 auto; color: var(--primer-tua); }
.tur-kartu h2 { margin: 0 0 14px; color: var(--primer-tua); font-size: 1.4rem; }
.tur-kartu p { text-align: left; line-height: 1.7; color: var(--arang); }
.tur-daftar { text-align: left; list-style: none; padding: 0; margin: 14px 0; }
.tur-daftar li { padding: 8px 14px; background: rgba(255,255,255,0.55); border-radius: 10px; margin-bottom: 6px; }
.tur-aksi { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(50,39,34,0.12); }
@media (max-width: 560px) {
    .tur-kartu { padding: 30px 20px; }
    .tur-aksi { flex-direction: column; gap: 14px; }
}

/* ---------- Album Foto (tingkat lencana 3 / 3000 poin) ---------- */
.grid-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kartu-album {
    position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--garis); display: block;
}
.kartu-album img { width: 100%; height: 100%; object-fit: cover; }
.kartu-album .lencana-privat {
    position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.55); color: #fff;
    font-size: 0.75rem; padding: 2px 7px; border-radius: 20px;
}
.kartu-album .overlay-album {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
    color: #fff; font-size: 0.76rem; opacity: 0; transition: opacity 0.15s ease;
}
.kartu-album:hover .overlay-album { opacity: 1; }

/* ---------- Daftar tingkat lencana di halaman tur pengenalan ---------- */
.tur-daftar-tingkat { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.tur-baris-tingkat {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: rgba(255,255,255,0.6); border-radius: 12px; border: 1px solid rgba(255,255,255,0.7);
}
.tur-baris-tingkat.segera { opacity: 0.55; }
.tur-baris-tingkat .lencana-v1, .tur-baris-tingkat .lencana-badge { position: static; flex-shrink: 0; }
.tur-ambang { font-weight: 700; color: var(--primer-tua); font-size: 0.82rem; flex-shrink: 0; min-width: 78px; }
.tur-ket { font-size: 0.85rem; color: var(--arang); text-align: left; }
.tur-baris-tingkat.segera .tur-ket em { color: var(--abu); font-style: italic; }

/* ---------- Kotak info sistem poin di halaman pendaftaran ---------- */
.kotak-info-poin {
    background: rgba(130,170,242,0.12); border: 1px solid rgba(130,170,242,0.35);
    border-radius: 10px; padding: 12px 16px; font-size: 0.86rem; line-height: 1.6;
    color: var(--arang); margin-bottom: 18px;
}

/* ---------- Kelola Ikon Menu (admin) ---------- */
.grid-kelola-ikon { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 20px; }
.kartu-kelola-ikon {
    background: rgba(255,255,255,0.65); border: 1px solid var(--garis); border-radius: 16px;
    padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pratinjau-ikon-kelola {
    width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: var(--kertas-tua); margin-bottom: 4px; color: var(--primer-tua);
}
.pratinjau-ikon-kelola img { max-width: 32px; max-height: 32px; object-fit: contain; }
.pratinjau-ikon-kelola svg, .ikon-bawaan-pratinjau svg { width: 26px; height: 26px; }
.form-ikon-kelola { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 6px; }
.form-ikon-kelola input[type=file] { font-size: 0.76rem; padding: 4px; }
.ikon-kustom { width: 19px; height: 19px; object-fit: contain; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.nav-sidebar .ikon-kustom { width: 19px; height: 19px; }
.tombol-menu-mobile .ikon-kustom { width: 22px; height: 22px; }

/* =========================================================
   Sentuhan Soft Neumorphism di atas panel kaca yang sudah ada —
   permukaan terasa sedikit timbul (tombol, kartu) atau sedikit
   cekung (kolom input), dengan bayangan ganda yang lembut
   (highlight terang + bayangan gelap tipis), tanpa shadow gelap
   yang tajam. Dipadukan dengan glassmorphism yang sudah ada.
   ========================================================= */
.btn, .kartu-novel, .kartu-blog, .kartu-stat, .kaca, .kolom-karya-beranda,
.kolom-blog-beranda, .kartu-kelola-ikon, .kartu-stiker-admin {
    box-shadow:
        6px 6px 14px rgba(31, 38, 135, 0.08),
        -6px -6px 14px rgba(255, 255, 255, 0.65);
}
.btn:active { box-shadow: inset 3px 3px 8px rgba(0,0,0,0.15), inset -3px -3px 8px rgba(255,255,255,0.25); transform: translateY(1px); }
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=file], select, textarea {
    box-shadow: inset 2px 2px 6px rgba(31,38,135,0.06), inset -2px -2px 6px rgba(255,255,255,0.6);
}
.kartu-novel, .kartu-blog, .form-box, .kaca, .kolom-karya-beranda, .kolom-blog-beranda,
.kartu-stat, .baris-trending, .tur-kartu {
    border-radius: 24px;
}
.btn, .badge-kategori, .chip-tagar, .tab-item, .tag { border-radius: 20px; }

/* ---------- Hero beranda: dua kolom + kartu kutipan mengambang ---------- */
.hero { position: relative; overflow: hidden; }
.hero-isi { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-teks { flex: 1; min-width: 280px; max-width: 620px; }
.hero-kutipan {
    width: 230px; flex-shrink: 0; margin-top: 30px;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 20px; padding: 20px 18px;
    box-shadow: 6px 6px 16px rgba(31,38,135,0.08), -6px -6px 16px rgba(255,255,255,0.6);
}
.hero-kutipan-tanda { font-family: 'Fraunces', serif; font-size: 2rem; color: var(--primer); line-height: 1; display: block; }
.hero-kutipan p { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--arang); margin: 4px 0 10px; }
.hero-kutipan-sumber { font-size: 0.8rem; color: var(--abu); }
@media (max-width: 720px) {
    .hero-kutipan { width: 100%; margin-top: 20px; }
}

/* =========================================================
   NAVBAR ATAS — menggantikan sidebar kiri, gaya kaca mengambang
   + neumorphism lembut, mengikuti referensi majalah sastra.
   ========================================================= */
.navbar-top-wrap { position: sticky; top: 0; z-index: 50; padding: 14px 20px 0; }
.navbar-top {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; gap: 20px; flex-wrap: nowrap;
    padding: 10px 18px 10px 14px;
    background: rgba(255,255,255,0.58);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 26px;
    box-shadow: 8px 8px 22px rgba(31,38,135,0.10), -8px -8px 22px rgba(255,255,255,0.55);
}

.brand-navbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: inherit; }
.brand-navbar img { height: 38px; width: auto; border-radius: 10px; display: block; }
.brand-navbar-ikon { font-size: 1.6rem; line-height: 1; }
.brand-navbar-teks { display: flex; flex-direction: column; line-height: 1.2; }
.brand-navbar-teks strong { font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--primer-tua); font-weight: 700; white-space: nowrap; }
.brand-navbar-teks small { font-size: 0.68rem; color: var(--abu); white-space: nowrap; }

.nav-links-top { display: flex; align-items: center; gap: 6px; margin: 0 auto; flex-wrap: wrap; }
.nav-links-top a {
    display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 18px;
    color: var(--arang); font-size: 0.9rem; font-weight: 600; text-decoration: none;
    position: relative; transition: background 0.15s ease, color 0.15s ease;
}
.nav-links-top a svg, .nav-links-top a .ikon-kustom { width: 17px; height: 17px; }
.nav-links-top a:hover { background: rgba(255,255,255,0.6); color: var(--primer-tua); }
.nav-links-top a.aktif { color: var(--primer-tua); }
.nav-links-top a.aktif::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 1px; height: 2.5px;
    background: var(--primer); border-radius: 2px;
}

.navbar-aksi { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.tombol-bulat-navbar {
    position: relative; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,0.55); color: var(--arang); display: flex; align-items: center; justify-content: center;
    box-shadow: 3px 3px 8px rgba(31,38,135,0.08), -3px -3px 8px rgba(255,255,255,0.6);
    flex-shrink: 0;
}
.tombol-bulat-navbar svg, .tombol-bulat-navbar .ikon-kustom { width: 18px; height: 18px; }
.tombol-bulat-navbar:hover { background: rgba(255,255,255,0.85); color: var(--primer-tua); }
.tombol-bulat-navbar .badge-notif { position: absolute; top: -3px; right: -3px; margin: 0; }

.tombol-nav-menonjol-navbar { padding: 10px 18px !important; border-radius: 18px !important; white-space: nowrap; }
.tombol-nav-menonjol-navbar svg, .tombol-nav-menonjol-navbar .ikon-kustom { width: 16px; height: 16px; }

.btn-navbar-outline, .btn-navbar-isi {
    display: flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 18px;
    font-size: 0.88rem; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.btn-navbar-outline svg, .btn-navbar-isi svg, .btn-navbar-outline .ikon-kustom, .btn-navbar-isi .ikon-kustom { width: 16px; height: 16px; }
.btn-navbar-outline {
    background: rgba(255,255,255,0.55); color: var(--arang);
    box-shadow: 3px 3px 8px rgba(31,38,135,0.08), -3px -3px 8px rgba(255,255,255,0.6);
}
.btn-navbar-outline:hover { color: var(--primer-tua); background: rgba(255,255,255,0.8); }
.btn-navbar-isi {
    background: linear-gradient(135deg, var(--primer), var(--primer-tua)); color: #fff;
    box-shadow: 0 6px 16px rgba(251,106,76,0.35);
}
.btn-navbar-isi:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(251,106,76,0.42); }

/* Dropdown akun (avatar di kanan navbar) */
.dropdown-akun-wrap { position: relative; }
.tombol-akun-navbar { background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; line-height: 0; }
.tombol-akun-navbar img, .tombol-akun-navbar .avatar-kecil { box-shadow: 3px 3px 8px rgba(31,38,135,0.1), -3px -3px 8px rgba(255,255,255,0.6); }
.dropdown-akun {
    display: none; position: absolute; right: 0; top: calc(100% + 12px); z-index: 30; width: 220px;
    background: rgba(255,255,255,0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.7); border-radius: 18px;
    box-shadow: 0 14px 34px rgba(31,38,135,0.16);
    padding: 8px; color: var(--arang);
}
.dropdown-akun.terbuka { display: block; }
.dropdown-akun-header { padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(50,39,34,0.1); display: flex; flex-direction: column; }
.dropdown-akun-header strong { font-family: 'Fraunces', serif; color: var(--primer-tua); font-size: 0.95rem; }
.dropdown-akun-header small { color: var(--abu); font-size: 0.75rem; }
.dropdown-akun a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
    color: var(--arang); font-size: 0.86rem; font-weight: 500; text-decoration: none;
}
.dropdown-akun a svg, .dropdown-akun a .ikon-kustom { width: 17px; height: 17px; }
.dropdown-akun a:hover, .dropdown-akun a.aktif { background: rgba(255,255,255,0.7); color: var(--primer-tua); }
.dropdown-akun .pemisah-nav-sidebar { background: rgba(50,39,34,0.1); margin: 6px 8px; }

/* Panel pencarian yang bisa dibuka/tutup dari tombol kaca bulat */
.panel-cari-navbar {
    display: none; max-width: 1240px; margin: 10px auto 0; padding: 0 4px;
}
.panel-cari-navbar.terbuka { display: flex; gap: 10px; align-items: center; }
.panel-cari-navbar {
    background: rgba(255,255,255,0.65); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255,255,255,0.7); border-radius: 20px; padding: 6px 6px 6px 16px;
    box-shadow: 5px 5px 14px rgba(31,38,135,0.08), -5px -5px 14px rgba(255,255,255,0.6);
}
.panel-cari-navbar input[type=text] { border: none; background: none; flex: 1; box-shadow: none; }
.panel-cari-navbar input[type=text]:focus { box-shadow: none; }

/* Panel menu mobile (dropdown di bawah navbar saat hamburger diklik) */
.menu-mobile-panel {
    display: none; max-width: 1240px; margin: 10px auto 0; padding: 10px;
    background: rgba(255,255,255,0.75); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.7); border-radius: 22px;
    box-shadow: 6px 6px 18px rgba(31,38,135,0.1), -6px -6px 18px rgba(255,255,255,0.6);
    flex-direction: column; gap: 3px;
}
.menu-mobile-panel.terbuka { display: flex; }
.menu-mobile-panel a {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px;
    color: var(--arang); font-size: 0.9rem; font-weight: 600; text-decoration: none; position: relative;
}
.menu-mobile-panel a svg, .menu-mobile-panel a .ikon-kustom { width: 19px; height: 19px; }
.menu-mobile-panel a:hover, .menu-mobile-panel a.aktif { background: rgba(255,255,255,0.7); color: var(--primer-tua); }
.menu-mobile-panel .badge-notif-nav { margin-left: auto; }
.menu-mobile-panel .pemisah-nav-sidebar { background: rgba(50,39,34,0.12); }

.tombol-menu-mobile { display: none; }

.konten-utama-atas { display: block; min-height: 60vh; }

@media (max-width: 900px) {
    .nav-links-top { display: none; }
    .navbar-aksi .tombol-nav-menonjol-navbar span,
    .navbar-aksi .btn-navbar-outline span,
    .navbar-aksi .btn-navbar-isi span { display: none; }
    .navbar-aksi .tombol-nav-menonjol-navbar,
    .navbar-aksi .btn-navbar-outline,
    .navbar-aksi .btn-navbar-isi { width: 40px; height: 40px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
    .tombol-menu-mobile {
        display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
        border: none; cursor: pointer; background: rgba(255,255,255,0.55); color: var(--arang);
        box-shadow: 3px 3px 8px rgba(31,38,135,0.08), -3px -3px 8px rgba(255,255,255,0.6); flex-shrink: 0;
    }
    .tombol-menu-mobile svg, .tombol-menu-mobile .ikon-kustom { width: 18px; height: 18px; }
    .brand-navbar-teks small { display: none; }
}
@media (max-width: 560px) {
    .navbar-top-wrap { padding: 10px 10px 0; }
    .navbar-top { border-radius: 20px; padding: 8px 10px; gap: 8px; }
    .dropdown-notif { position: fixed; left: 12px; right: 12px; width: auto; top: 84px; }
}

/* ---------- Footer kaca berkolom & lencana sambutan hero (mengikuti referensi) ---------- */
.hero-lencana-sambutan {
    display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 20px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primer-tua);
    background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.75);
    box-shadow: 3px 3px 8px rgba(31,38,135,0.07), -3px -3px 8px rgba(255,255,255,0.6);
}
footer.footer-kaca {
    max-width: 1240px; margin: 40px auto 24px; padding: 28px 30px 18px; text-align: left;
    background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.7); border-top: 1px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
    border-radius: 28px; color: var(--arang); font-size: 0.88rem;
    box-shadow: 8px 8px 22px rgba(31,38,135,0.09), -8px -8px 22px rgba(255,255,255,0.6);
}
.footer-kaca-isi { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; gap: 28px; }
.footer-kolom { display: flex; flex-direction: column; gap: 8px; }
.footer-kolom h4 { margin: 0 0 4px; font-size: 0.92rem; color: var(--arang); }
.footer-kolom a { color: var(--abu); font-size: 0.84rem; }
.footer-kolom a:hover { color: var(--primer-tua); }
.footer-brand-baris { display: flex; align-items: center; gap: 10px; }
.footer-brand-baris img { height: 34px; width: auto; border-radius: 8px; }
.footer-brand-baris strong { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--primer-tua); }
.footer-brand small { color: var(--abu); }
.footer-brand p { margin: 4px 0 0; color: var(--abu); font-size: 0.8rem; line-height: 1.6; }
.footer-kutipan {
    align-self: start; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.7); box-shadow: inset 2px 2px 6px rgba(31,38,135,0.05), inset -2px -2px 6px rgba(255,255,255,0.6);
}
.footer-kutipan p { margin: 0 0 6px; font-family: 'Fraunces', serif; font-style: italic; font-size: 0.98rem; line-height: 1.5; }
.footer-kutipan small { color: var(--abu); }
.footer-kaca-bawah {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px;
    border-top: 1px solid rgba(50,39,34,0.1); font-size: 0.78rem; color: var(--abu);
}
@media (max-width: 900px) { .footer-kaca-isi { grid-template-columns: 1fr 1fr; } .footer-brand, .footer-kutipan { grid-column: 1 / -1; } }
@media (max-width: 560px) { footer.footer-kaca { margin: 30px 10px 16px; padding: 22px 18px 14px; } }


/* ---------- Lencana mini yang menempel di tepi foto profil kecil ---------- */
.avatar-lencana-wrap { position: relative; display: inline-block; flex-shrink: 0; vertical-align: middle; line-height: 0; }
.avatar-lencana-wrap > .avatar-kecil { display: block; }
.lencana-mini {
    position: absolute; right: -3px; bottom: -3px; z-index: 3;
    border-radius: 50%; border: 2px solid #fff; box-sizing: content-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.lencana-mini-logo { object-fit: contain; background: #fff; }
.lencana-mini-teks {
    display: inline-block; text-align: center; color: #fff; font-weight: 800;
    background: linear-gradient(135deg, #CD8A4A, #A9662B);
}


/* =========================================================
   Pesan Cepat — tombol & panel pesan yang melayang di semua halaman (update 21)
   ========================================================= */
.pc-widget {
    position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 950; font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif; font-size: 0.9rem; line-height: 1.45;
}
.pc-widget [hidden] { display: none !important; }
.pc-fab {
    position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center; margin-left: auto;
    background: var(--primer); color: #fff; box-shadow: 0 6px 20px rgba(50, 39, 34, 0.28);
    transition: transform .15s ease, background .15s ease;
}
.pc-fab:hover { transform: translateY(-2px); background: var(--primer-tua); }
.pc-fab.terbuka { background: var(--sekunder-tua); }
.pc-fab svg { width: 26px; height: 26px; }
.pc-fab:focus-visible, .pc-widget button:focus-visible, .pc-widget input:focus-visible,
.pc-widget textarea:focus-visible, .pc-widget select:focus-visible { outline: 3px solid var(--sekunder); outline-offset: 2px; }
.pc-badge {
    position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center; border-radius: 11px;
    background: var(--merah); color: #fff; font-size: 0.72rem; font-weight: 700; border: 2px solid #fff;
}

.pc-panel {
    position: absolute; right: 0; bottom: 68px; width: 372px; max-width: calc(100vw - 24px);
    max-height: min(680px, calc(100vh - 110px)); display: flex; flex-direction: column;
    background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(var(--kaca-blur)); -webkit-backdrop-filter: blur(var(--kaca-blur));
    border: 1px solid var(--kaca-border); border-radius: 18px; box-shadow: var(--kaca-bayang), 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden; color: var(--arang);
}
.pc-kepala {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
    background: linear-gradient(135deg, var(--primer), var(--primer-tua)); color: #fff;
}
.pc-kepala strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; }
.pc-ikon-tombol {
    width: 28px; height: 28px; border-radius: 8px; border: 0; cursor: pointer; font-size: 1.2rem; line-height: 1;
    background: rgba(255,255,255,0.22); color: #fff;
}
.pc-ikon-tombol:hover { background: rgba(255,255,255,0.36); }

.pc-tab { display: flex; border-bottom: 1px solid var(--garis); background: var(--kertas); }
.pc-tab-item {
    flex: 1; padding: 10px 8px; border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600;
    color: var(--abu); border-bottom: 3px solid transparent;
}
.pc-tab-item.aktif { color: var(--primer-tua); border-bottom-color: var(--primer); }
.pc-tab-item span { font-weight: 500; }

.pc-badan { padding: 14px; overflow-y: auto; overscroll-behavior: contain; }
.pc-label { font-weight: 600; font-size: 0.8rem; color: var(--abu); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.pc-bantu { color: var(--abu); font-size: 0.8rem; margin: 6px 0 0; display: block; }
.pc-segmen { display: flex; gap: 4px; padding: 4px; background: var(--kertas-tua); border-radius: 12px; margin-bottom: 12px; }
.pc-segmen button {
    flex: 1; padding: 7px 4px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
    font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--abu);
}
.pc-segmen button.aktif { background: #fff; color: var(--primer-tua); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.pc-segmen button:disabled { opacity: .45; cursor: not-allowed; }

.pc-widget input[type=text], .pc-widget input[type=datetime-local], .pc-widget select, .pc-widget textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--garis); border-radius: 10px; background: #fff;
    font: inherit; color: var(--arang);
}
.pc-widget textarea { resize: vertical; min-height: 84px; max-height: 220px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pc-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 16px;
    background: var(--lembut); color: var(--primer-tua); font-size: 0.82rem; font-weight: 600;
}
.pc-chip button { width: 20px; height: 20px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(0,0,0,0.1); color: inherit; line-height: 1; }
.pc-judul-hasil { font-size: 0.75rem; font-weight: 600; color: var(--abu); margin: 8px 0 4px; }
.pc-hasil { max-height: 168px; overflow-y: auto; border-radius: 10px; }
.pc-item {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px;
    background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.pc-item:hover { background: var(--kertas-tua); }
.pc-item.mati { opacity: .5; cursor: not-allowed; }
.pc-item-avatar { line-height: 0; flex-shrink: 0; }
.pc-item-nama { font-weight: 600; }
.pc-item-nama small { font-weight: 400; color: var(--abu); }
.pc-hitung { text-align: right; font-size: 0.74rem; color: var(--abu); margin: 3px 0 10px; }

.pc-pilihan-waktu { display: flex; gap: 16px; margin-bottom: 8px; }
.pc-pilihan-waktu label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pc-preset { display: flex; gap: 6px; margin-top: 6px; }
.pc-preset button {
    padding: 4px 10px; border: 1px solid var(--garis); border-radius: 14px; background: #fff; cursor: pointer;
    font: inherit; font-size: 0.78rem; color: var(--primer-tua);
}
.pc-preset button:hover { background: var(--lembut); }

.pc-status { min-height: 20px; margin: 10px 0 6px; font-size: 0.85rem; font-weight: 500; }
.pc-status.sukses { color: var(--hijau); }
.pc-status.galat { color: var(--merah); }
.pc-kirim { width: 100%; justify-content: center; }
.pc-kirim:disabled { opacity: .5; cursor: not-allowed; }
.pc-tautan-semua { display: block; text-align: center; margin-top: 10px; font-size: 0.82rem; }

.pc-jadwal { padding: 10px 12px; border: 1px solid var(--garis); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.pc-jadwal p { margin: 2px 0 4px; color: var(--arang); overflow-wrap: anywhere; }
.pc-jadwal small { color: var(--abu); }
.pc-lencana-status { padding: 1px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; background: var(--kertas-tua); color: var(--abu); }
.pc-lencana-status.menunggu, .pc-lencana-status.memproses { background: #FFF1C9; color: #8A6100; }
.pc-lencana-status.terkirim { background: #D8F1E3; color: var(--hijau); }
.pc-lencana-status.sebagian, .pc-lencana-status.gagal { background: #FBDAD5; color: var(--merah); }
.pc-galat-kecil { display: block; color: var(--merah); margin-top: 2px; }
.pc-batal {
    margin-top: 6px; padding: 4px 12px; border: 1px solid var(--merah); border-radius: 14px; background: #fff; cursor: pointer;
    font: inherit; font-size: 0.78rem; color: var(--merah);
}
.pc-batal:hover { background: var(--merah); color: #fff; }
.pc-batal:disabled { opacity: .5; cursor: wait; }

/* HP: panel memenuhi lebar layar di atas tombol */
@media (max-width: 560px) {
    .pc-widget { right: 12px; }
    .pc-panel { position: fixed; left: 10px; right: 10px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 130px); }
}
@media (prefers-reduced-motion: reduce) { .pc-fab { transition: none; } }


/* =========================================================
   Jendela modal (Pesan Baru di halaman Pesan, Syarat & Ketentuan di halaman Daftar)
   Sebelumnya kelas-kelas ini tidak punya gaya sama sekali, sehingga modal
   terbuka tetapi tampil polos di dasar halaman dan tidak terlihat.
   Tampil/sembunyi diatur lewat style.display dari JavaScript halaman.
   ========================================================= */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000; padding: 16px;
    align-items: center; justify-content: center; overflow-y: auto;
    background: rgba(50, 39, 34, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal-box {
    position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: rgba(255, 255, 255, 0.97); color: var(--arang); border-radius: 18px; padding: 20px 22px;
    border: 1px solid var(--kaca-border); box-shadow: var(--kaca-bayang), 0 2px 10px rgba(0, 0, 0, 0.1);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-header h3 { margin: 0; font-size: 1.15rem; }
.modal-header button {
    flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--kertas-tua); color: var(--arang); font-size: 0.95rem; line-height: 1;
}
.modal-header button:hover { background: var(--lembut); color: var(--primer-tua); }
.modal-box input[type=text] {
    width: 100%; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; font: inherit; color: var(--arang);
}
.daftar-pilih-user { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.baris-pilih-user {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--arang);
}
.baris-pilih-user:hover { background: var(--kertas-tua); color: var(--arang); }
.baris-pilih-user span { font-weight: 600; line-height: 1.3; }
.baris-pilih-user small { display: block; font-weight: 400; color: var(--abu); }
@media (max-width: 560px) { .modal-box { padding: 16px; border-radius: 16px; } }


/* =========================================================
   Update 22 — Tampilan baca karya yang rapi
   Sebelumnya: teks langsung menempel di latar tanpa bantalan, perataan/indentasi
   dari editor (kelas ql-align-*, ql-indent-*, ql-font-*) TIDAK ada gayanya di halaman
   baca sehingga hasil terbit berbeda dari yang terlihat di editor, dan paragraf kosong
   menggelembungkan jarak.
   ========================================================= */
.reader { max-width: 800px; padding: 32px 16px 80px; }
.reader-content {
    padding: 38px 48px;
    background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px; box-shadow: var(--kaca-bayang);
}
.reader-content, .konten-tunggal {
    text-align: justify; text-justify: inter-word;          /* rata kiri & kanan */
    -webkit-hyphens: auto; hyphens: auto;
    overflow-wrap: break-word; word-wrap: break-word;       /* kata/tautan panjang tidak menjebol layar */
}
.konten-tunggal { padding-left: 6px; padding-right: 6px; }
.reader-content p, .konten-tunggal p { margin: 0 0 0.9em; }
.reader-content p.jeda-karya, .konten-tunggal p.jeda-karya { margin: 0; height: 0.5em; }
.reader-content a, .konten-tunggal a { overflow-wrap: anywhere; }

/* Perataan dari editor: mengalahkan "rata kiri-kanan" bawaan bila penulis memilihnya. */
.reader-content .ql-align-center, .konten-tunggal .ql-align-center { text-align: center; }
.reader-content .ql-align-right, .konten-tunggal .ql-align-right { text-align: right; }
.reader-content .ql-align-justify, .konten-tunggal .ql-align-justify { text-align: justify; }

/* Indentasi dari editor (tingkat 1–8). Daftar: geser seluruh butirnya. */
.reader-content .ql-indent-1, .konten-tunggal .ql-indent-1 { padding-left: 3em; }
.reader-content .ql-indent-2, .konten-tunggal .ql-indent-2 { padding-left: 6em; }
.reader-content .ql-indent-3, .konten-tunggal .ql-indent-3 { padding-left: 9em; }
.reader-content .ql-indent-4, .konten-tunggal .ql-indent-4 { padding-left: 12em; }
.reader-content .ql-indent-5, .konten-tunggal .ql-indent-5 { padding-left: 15em; }
.reader-content .ql-indent-6, .konten-tunggal .ql-indent-6 { padding-left: 18em; }
.reader-content .ql-indent-7, .konten-tunggal .ql-indent-7 { padding-left: 21em; }
.reader-content .ql-indent-8, .konten-tunggal .ql-indent-8 { padding-left: 24em; }
.reader-content li[class*="ql-indent-"], .konten-tunggal li[class*="ql-indent-"] { padding-left: 0; }
.reader-content li.ql-indent-1, .konten-tunggal li.ql-indent-1 { margin-left: 3em; }
.reader-content li.ql-indent-2, .konten-tunggal li.ql-indent-2 { margin-left: 6em; }
.reader-content li.ql-indent-3, .konten-tunggal li.ql-indent-3 { margin-left: 9em; }
.reader-content li.ql-indent-4, .konten-tunggal li.ql-indent-4 { margin-left: 12em; }

/* Font pilihan penulis. */
.reader-content .ql-font-serif, .konten-tunggal .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.reader-content .ql-font-monospace, .konten-tunggal .ql-font-monospace { font-family: 'Courier New', monospace; }
.reader-content .ql-font-sans, .konten-tunggal .ql-font-sans { font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif; }

/* Puisi: baris tetap rata kiri (tidak direnggangkan), jarak antarbaris rapat, jeda antarbait lega. */
.reader-content.konten-puisi, .konten-tunggal.konten-puisi { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.konten-puisi p { margin-bottom: 0.2em; }
.konten-puisi p.jeda-karya { height: 1em; }

@media (max-width: 640px) {
    .reader { padding: 22px 10px 70px; }
    .reader-content { padding: 22px 20px; border-radius: 18px; }
    .reader-content .ql-indent-3, .konten-tunggal .ql-indent-3, .reader-content .ql-indent-4, .konten-tunggal .ql-indent-4,
    .reader-content .ql-indent-5, .konten-tunggal .ql-indent-5, .reader-content .ql-indent-6, .konten-tunggal .ql-indent-6,
    .reader-content .ql-indent-7, .konten-tunggal .ql-indent-7, .reader-content .ql-indent-8, .konten-tunggal .ql-indent-8 { padding-left: 6em; }
}

/* =========================================================
   Update 22 — Input Genre & Kata Kunci bergaya # (hashtag)
   ========================================================= */
.input-hashtag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.input-hashtag-chips:empty { display: none; }
.chip-hashtag {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 16px;
    background: var(--lembut); color: var(--primer-tua); font-size: 0.85rem; font-weight: 600;
}
.chip-hashtag button {
    width: 20px; height: 20px; border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
    background: rgba(0, 0, 0, 0.1); color: inherit;
}
.chip-hashtag button:hover { background: rgba(0, 0, 0, 0.2); }
.input-hashtag-info { display: block; color: var(--abu); font-size: 0.76rem; margin-bottom: 4px; }
.input-hashtag-info:empty { display: none; }
.input-hashtag-info.penuh { color: var(--merah); }

/* =========================================================
   Update 22 — Blog Tayang di beranda: kolom lebih lebar + cuplikan 20 kata
   ========================================================= */
.beranda-grid { grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); }
.kartu-blog-mini h4 a { color: inherit; }
.kartu-blog-mini h4 a:hover { color: var(--primer-tua); }
.kartu-blog-mini .cuplikan-blog-mini {
    margin: 8px 0 10px; font-size: 0.88rem; line-height: 1.6; color: var(--arang); overflow-wrap: anywhere;
}
.kartu-blog-mini .tombol-lihat-blog {
    display: inline-flex; align-items: center; gap: 4px; padding: 5px 13px; border-radius: 16px;
    border: 1px solid var(--primer); background: rgba(255, 255, 255, 0.6);
    color: var(--primer-tua); font-size: 0.78rem; font-weight: 600;
}
.kartu-blog-mini .tombol-lihat-blog:hover { background: var(--primer); color: #fff; }
/* Aturan susun 1 kolom harus ditulis ULANG di sini (aturan di atas lebih akhir daripada yang lama). */
@media (max-width: 1100px) { .beranda-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
@media (max-width: 900px) {
    .beranda-grid { grid-template-columns: 1fr; }
    .kolom-blog-beranda { position: static; }
}


/* =========================================================
   Update 23 — Formulir pendaftaran dinamis (kelas dasar isian)
   ========================================================= */
.field-form { margin-bottom: 14px; }
.tanda-wajib { color: var(--merah); font-weight: 700; }
.tanda-opsional { color: var(--abu); font-weight: 400; font-size: 0.82em; }
.label-grup { display: block; font-weight: 600; margin-bottom: 6px; }
.opsi-daftar { display: flex; flex-direction: column; gap: 8px; }
.opsi-pilih { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.opsi-pilih input[type=checkbox], .opsi-pilih input[type=radio] { width: auto; margin: 0; flex-shrink: 0; }
#pesanForm[hidden], #areaFormulir[hidden], #areaSukses[hidden] { display: none !important; }
.help-text.galat { color: var(--merah); font-weight: 600; }

/* ---------- Formulir bertahap ---------- */
.daftar-langkah-bar { display: none; list-style: none; padding: 0; margin: 4px 0 18px; gap: 6px; }
.daftar-langkah-bar.tampil { display: flex; }
.daftar-langkah-bar li {
    flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
    background: var(--kertas-tua); color: var(--abu); font-size: 0.82rem; font-weight: 600;
}
.daftar-langkah-bar li span {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--abu); font-size: 0.8rem;
}
.daftar-langkah-bar li.aktif { background: var(--lembut); color: var(--primer-tua); }
.daftar-langkah-bar li.aktif span { background: var(--primer); color: #fff; }
.daftar-langkah-bar li.selesai span { background: var(--hijau); color: #fff; }
.daftar-langkah-bar li.selesai span::before { content: '✓'; }
.daftar-langkah-bar li.selesai span { font-size: 0; }
.daftar-langkah-bar li.selesai span::before { font-size: 0.8rem; }
@media (max-width: 480px) { .daftar-langkah-bar li { font-size: 0.72rem; padding: 6px; gap: 4px; } }

.langkah[data-butuh-js] { display: none; }
.tombol-js { display: none; }
.wizard .tombol-js { display: inline-block; }
.wizard .langkah { display: none; }
.wizard .langkah.aktif { display: block; }
.judul-langkah { margin: 0 0 12px; font-size: 1.1rem; outline: none; }

.kotak-ingat {
    padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 0.88rem; line-height: 1.55;
    background: #FFF6D6; border: 1px solid #F2D577; color: #5B4500;
}
.kotak-ingat-penting { background: #FDE3DE; border-color: #F2A99B; color: #6B1F12; }

.kartu-akun { border: 2px dashed var(--primer); border-radius: 16px; padding: 8px 16px; background: rgba(255, 255, 255, 0.7); margin-bottom: 14px; }
.baris-akun { display: flex; align-items: center; gap: 10px; padding: 12px 0; flex-wrap: wrap; }
.baris-akun + .baris-akun { border-top: 1px solid var(--garis); }
.label-akun { flex: 0 0 88px; font-size: 0.8rem; font-weight: 600; color: var(--abu); text-transform: uppercase; letter-spacing: .4px; }
.nilai-akun {
    flex: 1; min-width: 120px; margin: 0; padding: 6px 8px; border: 0 !important; background: transparent !important;
    font: 700 1.15rem 'Courier New', monospace; color: var(--arang); overflow-wrap: anywhere; box-shadow: none !important;
}
.tombol-salin {
    padding: 5px 12px; border: 1px solid var(--primer); border-radius: 14px; background: #fff; color: var(--primer-tua);
    font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.tombol-salin:hover { background: var(--primer); color: #fff; }
.aksi-catat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.opsi-sudah-catat { margin: 16px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--lembut); align-items: flex-start; }
.opsi-sudah-catat input { margin-top: 4px; }
.baris-tombol-langkah { display: flex; gap: 10px; justify-content: space-between; margin-top: 22px; }
.baris-tombol-langkah .btn { flex: 1; }
.baris-tombol-langkah .btn:disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================
   Update 23 — Admin: pengelola form pendaftaran
   ========================================================= */
.judul-kecil { font-size: 0.95rem; margin: 18px 0 8px; color: var(--primer-tua); }
.daftar-field { display: flex; flex-direction: column; gap: 8px; }
.baris-field {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.75); border: 1px solid var(--garis); border-radius: 14px;
}
.baris-field.nonaktif { opacity: .6; background: var(--kertas-tua); }
.baris-tetap { background: var(--kertas-tua); }
.ikon-kunci { font-size: 1.1rem; }
.urut-tombol { display: flex; flex-direction: column; gap: 2px; }
.urut-tombol form { margin: 0; }
.urut-tombol button {
    width: 26px; height: 20px; border: 1px solid var(--garis); border-radius: 6px; background: #fff; cursor: pointer;
    font-size: 0.65rem; line-height: 1; color: var(--abu);
}
.urut-tombol button:hover:not(:disabled) { background: var(--lembut); color: var(--primer-tua); }
.urut-tombol button:disabled { opacity: .35; cursor: default; }
.info-field { flex: 1; min-width: 200px; }
.ket-field { font-size: 0.8rem; color: var(--abu); margin-top: 3px; }
.badge-mini { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; background: var(--kertas-tua); color: var(--abu); margin-left: 4px; }
.badge-tetap { background: #E3EAFB; color: #2B4C9B; }
.badge-tambahan { background: #D8F1E3; color: var(--hijau); }
.badge-nonaktif { background: #FBDAD5; color: var(--merah); }
.aksi-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aksi-field form { margin: 0; }
.tombol-toggle {
    padding: 4px 12px; border-radius: 14px; border: 1px solid var(--garis); background: var(--kertas-tua); color: var(--abu);
    font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer;
}
.tombol-toggle.hidup { background: var(--lembut); border-color: var(--primer); color: var(--primer-tua); }

/* =========================================================
   Update 23 — Admin: rekap data anggota
   ========================================================= */
.rekap-ringkas { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.rekap-kotak {
    display: flex; flex-direction: column; min-width: 96px; padding: 10px 14px; border-radius: 14px; color: var(--arang);
    background: rgba(255, 255, 255, 0.75); border: 1px solid var(--garis);
}
.rekap-kotak strong { font-size: 1.3rem; line-height: 1.2; }
.rekap-kotak span { font-size: 0.76rem; color: var(--abu); }
.rekap-kotak.aktif { background: var(--lembut); border-color: var(--primer); }
.filter-rekap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.filter-rekap input[type=search] { flex: 1; min-width: 220px; margin: 0; }
.tabel-gulir { overflow-x: auto; border-radius: 14px; }
.tabel-rekap { min-width: 900px; font-size: 0.86rem; }
.tabel-rekap th { white-space: nowrap; position: sticky; top: 0; }
.tabel-rekap td { vertical-align: top; }
.sel-nowrap { white-space: nowrap; }
.sel-kecil { font-size: 0.76rem; color: var(--abu); max-width: 220px; }
.kolom-nonaktif { opacity: .55; font-style: italic; }
.kosong-sel { color: var(--abu); }
.ikon-publik { margin-left: 4px; font-size: 0.8rem; }
.badge-status { padding: 2px 9px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; background: var(--kertas-tua); color: var(--abu); }
.badge-status-aktif { background: #D8F1E3; color: var(--hijau); }
.badge-status-menunggu { background: #FFF1C9; color: #8A6100; }
.badge-status-ditolak, .badge-status-nonaktif { background: #FBDAD5; color: var(--merah); }
.paginasi { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; color: var(--abu); font-size: 0.85rem; }
@media print {
    .tanpa-cetak, .panel-sidebar, .navbar-top-wrap, .pc-widget, footer { display: none !important; }
    .panel-layout { display: block !important; }
    .panel-main { padding: 0 !important; width: 100% !important; }
    .tabel-gulir { overflow: visible; }
    .tabel-rekap { min-width: 0; font-size: 9px; }
    .tabel-rekap th { position: static; }
}

/* =========================================================
   Update 23 — Data diri & privasi di profil dan Edit Profil
   ========================================================= */
.blok-data-diri { margin-bottom: 6px; }
.opsi-privasi {
    display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 5px 12px; border-radius: 14px;
    background: var(--kertas-tua); font-size: 0.82rem; font-weight: 500; color: var(--arang); cursor: pointer;
}
.opsi-privasi input { width: auto; margin: 0; }
.daftar-data-diri { margin: 16px 0 0; padding: 0; }
.baris-data-diri { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--garis); flex-wrap: wrap; }
.baris-data-diri dt { flex: 0 0 180px; font-weight: 600; color: var(--abu); font-size: 0.88rem; }
.baris-data-diri dd { flex: 1; margin: 0; min-width: 180px; overflow-wrap: anywhere; }
.badge-privasi { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }
.badge-privasi.publik { background: #D8F1E3; color: var(--hijau); }
.badge-privasi.privat { background: var(--kertas-tua); color: var(--abu); }


/* =========================================================
   Update 24 — Admin: Email Notifikasi
   ========================================================= */
.status-email {
    display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700;
    background: var(--kertas-tua); color: var(--abu); margin-right: 4px;
}
.status-email.menunggu, .status-email.memproses { background: #FFF1C9; color: #8A6100; }
.status-email.terkirim { background: #D8F1E3; color: var(--hijau); }
.status-email.gagal { background: #FBDAD5; color: var(--merah); }
.langkah-email { padding-left: 1.4em; line-height: 1.7; }
.langkah-email li { margin-bottom: 8px; }
.langkah-email code { background: var(--kertas-tua); padding: 1px 6px; border-radius: 6px; font-size: 0.88em; word-break: break-all; }


/* =========================================================
   Update 25 — Role Akun, lencana role, penilaian, pengaturan akun
   ========================================================= */

/* ---------- Lencana role: persegi berkilau (F1 / P / G) ---------- */
.lencana-role {
    --u: 56px;
    --warna-role: #7C3AED;
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--u); height: var(--u); border-radius: calc(var(--u) * 0.22); overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.24) 100%), var(--warna-role);
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.55);
    color: #fff; font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); user-select: none; vertical-align: middle;
}
.lencana-role-teks { position: relative; z-index: 1; line-height: 1; font-size: calc(var(--u) * 0.52); }
.lencana-role.teks-panjang-2 .lencana-role-teks { font-size: calc(var(--u) * 0.42); }
.lencana-role.teks-panjang-3 .lencana-role-teks { font-size: calc(var(--u) * 0.33); }
.lencana-role.teks-panjang-4 .lencana-role-teks { font-size: calc(var(--u) * 0.26); }
/* Kilau: pita cahaya miring yang menyapu lencana, lalu jeda sejenak. */
.lencana-role::after {
    content: ''; position: absolute; z-index: 2; top: -60%; left: -90%; width: 52%; height: 220%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(18deg); animation: kilau-role 3.4s ease-in-out infinite;
}
@keyframes kilau-role { 0% { left: -90%; } 42% { left: 150%; } 100% { left: 150%; } }
/* Pojok kanan-bawah banner (latar) profil. */
.lencana-role-banner { --u: 66px; position: absolute; right: 20px; bottom: 16px; z-index: 6; }
.lencana-role-inline { --u: 30px; border-width: 1px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin-right: 6px; }
@media (max-width: 560px) { .lencana-role-banner { --u: 52px; right: 12px; bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .lencana-role::after { animation: none; display: none; } }

.chip-role {
    display: inline-block; padding: 3px 12px; border-radius: 14px; font-size: 0.8rem; font-weight: 700;
    background: var(--pw-latar, var(--lembut)); color: var(--pw-aksen-tua, var(--primer-tua));
}

/* ---------- Pilihan role di formulir (pendaftaran & admin) ---------- */
.baris-akun[hidden] { display: none; }
.blok-role {
    min-width: 0; margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--garis); border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
}
.blok-role legend { padding: 0 8px; font-weight: 700; }
.blok-role select, .blok-role input[type=number], .blok-role input[type=text] {
    width: 100%; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; font: inherit; color: var(--arang);
}
.pilihan-role { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.kartu-pilih-role { position: relative; display: block; cursor: pointer; }
.kartu-pilih-role input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.isi-kartu-role {
    display: block; height: 100%; padding: 11px 13px; border: 2px solid var(--garis); border-radius: 12px; background: #fff;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.isi-kartu-role strong { display: block; }
.isi-kartu-role small { display: block; margin-top: 3px; font-size: 0.76rem; line-height: 1.35; font-weight: 400; color: var(--abu); }
.kartu-pilih-role:hover .isi-kartu-role { border-color: var(--primer-muda); }
.kartu-pilih-role input:checked + .isi-kartu-role { border-color: var(--primer); background: var(--lembut); box-shadow: 0 0 0 3px var(--primer-muda); }
.kartu-pilih-role input:focus-visible + .isi-kartu-role { outline: 3px solid var(--sekunder); outline-offset: 2px; }
.nilai-role { font-weight: 700; }

/* ---------- Penilaian karya (Pembina / Guru) ---------- */
.blok-penilaian {
    margin: 22px 0 6px; padding: 18px 20px; border: 1px solid var(--garis); border-radius: 16px;
    background: rgba(255, 255, 255, 0.62);
}
.blok-penilaian h4 { margin: 0 0 10px; }
.rating-ringkas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.rating-bintang { color: #F5A623; font-size: 1.5rem; line-height: 1; }
.rating-angka { font-family: 'Fraunces', Georgia, serif; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.rating-dari { color: var(--abu); font-weight: 600; }
.rating-ringkas small { margin-left: 6px; color: var(--abu); }
.form-penilaian { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--garis); }
.label-kecil { display: block; margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--abu); }
.pilih-nilai-baris { display: flex; flex-wrap: wrap; gap: 6px; }
.pilih-nilai { position: relative; cursor: pointer; }
.pilih-nilai input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pilih-nilai span {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--garis); background: #fff; font-weight: 700; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pilih-nilai:hover span { border-color: var(--primer); }
.pilih-nilai input:checked + span { background: var(--primer); border-color: var(--primer-tua); color: #fff; }
.pilih-nilai input:focus-visible + span { outline: 3px solid var(--sekunder); outline-offset: 2px; }
.form-penilaian textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; font: inherit; color: var(--arang); resize: vertical;
}
.daftar-penilaian { display: flex; flex-direction: column; gap: 12px; }
.kartu-penilaian { padding: 14px 16px; border: 1px solid var(--garis); border-radius: 14px; background: #fff; }
.kartu-penilaian-atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nilai-pil {
    display: inline-flex; align-items: baseline; gap: 2px; padding: 3px 12px; border-radius: 14px; white-space: nowrap;
    background: var(--lembut); color: var(--primer-tua); font-weight: 800;
}
.nilai-pil small { font-weight: 600; opacity: 0.75; }
.komentar-privat {
    margin: 6px 0 0; padding: 10px 12px; border-left: 4px solid var(--primer); border-radius: 6px;
    background: var(--kertas); color: var(--arang); overflow-wrap: anywhere;
}

/* ---------- Pengaturan akun (nonaktif sementara & hapus akun) ---------- */
.form-box.zona-bahaya { border: 2px solid var(--merah); }
.zona-bahaya h3 { color: var(--merah); }
.daftar-hapus { margin: 8px 0 12px; padding-left: 20px; }
.daftar-hapus li { margin: 4px 0; }
.daftar-hapus li.peringatan { color: var(--merah); font-weight: 600; }

/* ---------- Admin: pengaturan role & status jeda ---------- */
.kartu-role-admin { scroll-margin-top: 90px; }
.kepala-role-admin { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.baris-dua-role { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr; gap: 14px; margin-bottom: 6px; }
@media (max-width: 760px) { .baris-dua-role { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .baris-dua-role { grid-template-columns: 1fr; } }
.badge-status-jeda { background: #E0E7FF; color: #3730A3; }
.btn-tautan { font: inherit; }