/* =====================================================
   JOURNAL — "DUO WHITE" PUBLIC PAGES
   Selaras admin: border tegas 2px, sudut bulat besar,
   tombol chunky ber-"bibir" 3D, Nunito untuk aksen.
   Audio player bergaya Spotify: play dari list, equalizer
   animasi, dan now-playing bar melayang di bawah.
   ===================================================== */

:root {
    --jr-accent: #1cb0f6;          /* biru macaw, senada admin */
    --jr-accent-dark: #1899d6;     /* bibir bawah tombol aktif */
    --jr-accent-light: #ddf4ff;
    --jr-accent-border: #84d8ff;
    --jr-border: #e5e5e5;
    --jr-border-soft: #f0f0f0;
    --jr-lip: #e8e8e8;             /* bibir 3D kartu */
    --jr-am: #ffb020;              /* pagi */
    --jr-pm: #818cf8;              /* malam */
}

/* ── Eyebrow kecil di atas judul (pola halaman Projects) ── */
.journal-eyebrow {
    font-family: 'Nunito', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--jr-accent);
    margin-bottom: 8px;
}

/* ── Stagger entrance (kartu muncul berurutan) ── */
@keyframes jrFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.jr-stagger { animation: jrFadeUp .5s ease both; animation-delay: calc(var(--i, 0) * 70ms); }

/* ── Header: anak-anaknya muncul cascade (eyebrow → judul → subjudul) ── */
.jr-head > * { opacity: 0; animation: jrFadeUp .55s ease both; }
.jr-head > *:nth-child(1) { animation-delay: .05s; }
.jr-head > *:nth-child(2) { animation-delay: .15s; }
.jr-head > *:nth-child(3) { animation-delay: .25s; }

/* =====================================================
   SERIES CARD — kartu berbentuk BUKU 📖
   ===================================================== */
.series-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    background: #ffffff;
    border: 2px solid var(--jr-border);
    border-radius: 20px;
    box-shadow: 0 4px 0 var(--jr-lip);
    padding: 20px 22px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.series-card:hover {
    transform: translateY(-3px);
    border-color: var(--jr-accent-border);
    box-shadow: 0 7px 0 var(--jr-accent-light);
}
.series-card:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--jr-lip);
}

/* Buku: cover + punggung + lembaran halaman kanan */
.series-book {
    position: relative;
    flex: none;
    width: 104px;
    height: 138px;
    border-radius: 6px 14px 14px 6px;
    background: linear-gradient(150deg, #34bdff 0%, var(--jr-accent) 45%, #1287c2 100%);
    box-shadow: 0 6px 14px rgba(28, 176, 246, .35);
    transition: transform .3s ease;
}
.series-card:hover .series-book {
    transform: perspective(700px) rotateY(-16deg) translateY(-2px);
}
/* Punggung buku (kiri, lebih gelap + garis highlight) */
.series-book::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 12px;
    border-radius: 6px 0 0 6px;
    background: rgba(2, 6, 23, .22);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .35);
}
/* Lembaran halaman (kanan) */
.series-book::after {
    content: '';
    position: absolute;
    right: -5px; top: 7px; bottom: 7px;
    width: 6px;
    border-radius: 0 3px 3px 0;
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #cfe8fa 2px 3px);
    box-shadow: 1px 1px 2px rgba(2, 6, 23, .2);
}
/* Varian cover per Series — rak terlihat seperti koleksi beneran.
   Amber = Reflections (buku kuning), default biru = Thoughts. */
.series-book--amber {
    background: linear-gradient(150deg, #ffc74d 0%, var(--jr-am) 45%, #e08600 100%);
    box-shadow: 0 6px 14px rgba(255, 176, 32, .35);
}
.series-book--amber::after {
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #fae3b8 2px 3px);
}
.series-book--amber .series-book-dots i:first-child { background: #ffffff; }
.series-book--amber .series-book-dots i:last-child { background: #ffe7b3; }

/* Blue */
.series-book--blue {
    background: linear-gradient(150deg, #34bdff 0%, var(--jr-accent) 45%, #1287c2 100%);
    box-shadow: 0 6px 14px rgba(28, 176, 246, .35);
}
.series-book--blue::after {
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #cfe8fa 2px 3px);
}
.series-book--blue .series-book-dots i:first-child { background: #ffffff; }
.series-book--blue .series-book-dots i:last-child { background: #cfe8fa; }

/* Rose */
.series-book--rose {
    background: linear-gradient(150deg, #ff8fab 0%, #f43f5e 45%, #be123c 100%);
    box-shadow: 0 6px 14px rgba(244, 63, 94, .35);
}
.series-book--rose::after {
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #ffd9e0 2px 3px);
}
.series-book--rose .series-book-dots i:first-child { background: #ffffff; }
.series-book--rose .series-book-dots i:last-child { background: #ffd9e0; }

/* Violet */
.series-book--violet {
    background: linear-gradient(150deg, #a78bfa 0%, #8b5cf6 45%, #6d28d9 100%);
    box-shadow: 0 6px 14px rgba(139, 92, 246, .35);
}
.series-book--violet::after {
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #e7e0ff 2px 3px);
}
.series-book--violet .series-book-dots i:first-child { background: #ffffff; }
.series-book--violet .series-book-dots i:last-child { background: #e7e0ff; }

/* Emerald */
.series-book--emerald {
    background: linear-gradient(150deg, #34d399 0%, #10b981 45%, #047857 100%);
    box-shadow: 0 6px 14px rgba(16, 185, 129, .33);
}
.series-book--emerald::after {
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #c8f4e2 2px 3px);
}
.series-book--emerald .series-book-dots i:first-child { background: #ffffff; }
.series-book--emerald .series-book-dots i:last-child { background: #c8f4e2; }

/* Slate */
.series-book--slate {
    background: linear-gradient(150deg, #94a3b8 0%, #64748b 45%, #334155 100%);
    box-shadow: 0 6px 14px rgba(51, 65, 85, .32);
}
.series-book--slate::after {
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #e2e8f0 2px 3px);
}
.series-book--slate .series-book-dots i:first-child { background: #ffffff; }
.series-book--slate .series-book-dots i:last-child { background: #e2e8f0; }

/* Indigo lembut — Risalah Rindu */
.series-book--indigo {
    background: linear-gradient(150deg, #a5b4fc 0%, #6366f1 45%, #4f46e5 100%);
    box-shadow: 0 6px 14px rgba(99, 102, 241, .35);
}
.series-book--indigo::after {
    background: repeating-linear-gradient(to bottom, #e9e7ff 0 2px, #c7c2f0 2px 3px);
}
.series-book--indigo .series-book-dots i:first-child { background: #e9e7ff; }
.series-book--indigo .series-book-dots i:last-child { background: #a5b4fc; }

/* Custom image cover — gambar upload jadi sampul; judul di bawah + scrim mulus */
/* Kulit — rupa buku Risalah Rindu yang sebenarnya, dikecilkan jadi buku
   rak. Bahan, tebal papan, dan judul cetak-dalamnya memakai variabel
   --rk-* yang SAMA dengan bukunya, jadi sekali kulitnya disetel ulang,
   rak ikut berubah sendiri.
   Ukuran butir teksturnya diperkecil ±24% mengikuti perbandingan buku
   mini (104px) terhadap buku aslinya (440px), supaya butirannya terbaca
   sebagai kulit yang sama dilihat dari jauh — bukan tekstur lain. */
.series-book--leather {
    background-color: var(--rk-leather-2);
    background-image:
        var(--rk-pebble), var(--rk-leather), var(--rk-mottle),
        radial-gradient(120% 60% at 50% -8%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 46%),
        linear-gradient(160deg, var(--rk-leather-1), var(--rk-leather-3));
    background-size: 20px 20px, 56px 56px, 140px 140px, auto, auto;
    background-blend-mode: overlay, soft-light, soft-light, normal, normal;
    box-shadow:
        1px 1px 0 #241811, 2px 2px 0 #3f2f25,
        0 1px 0 #241811, 0 2px 0 #3f2f25,
        inset 0 1px 0 rgba(255, 255, 255, .09),
        inset 0 -1.5px 0 rgba(0, 0, 0, .45),
        inset 0 0 26px rgba(0, 0, 0, .32),
        0 8px 18px rgba(40, 26, 14, .40);
}
/* Punggung: kulit yang sama, hanya lebih teduh + garis lipatan */
.series-book--leather::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .10) 60%, rgba(0, 0, 0, 0) 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .10);
}
/* Tepi kertas: krem seperti kertas bukunya, bukan putih */
.series-book--leather::after {
    background: repeating-linear-gradient(to bottom,
        var(--rk-cream) 0 2px, #d9cdb2 2px 3px);
    box-shadow: 1px 1px 2px rgba(40, 26, 14, .35);
}
/* Bingkai cetak-dalam di sampul — tetap ada walau tulisannya disembunyikan */
.series-book--leather .series-book-inner {
    inset: 9px 8px 9px 16px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .28);
    gap: 5px;
}
.series-book--leather .series-book-dots { display: none; }
/* Bulan sabit & garis pemisah — dua penanda yang ada di sampul buku
   aslinya. Digambar lewat pseudo-element supaya markup kartunya tetap
   sama untuk semua preset warna. Ukurannya tidak diskalakan apa adanya
   dari buku besar (2rem → 7px, tak terbaca), tapi dipilih seukuran yang
   masih terlihat pada buku setinggi 138px. */
.series-book--leather .series-book-inner::before {
    content: '\263E';
    font-size: 11px;
    line-height: 1;
    color: #6b5340;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .16), 0 -1px 2px rgba(0, 0, 0, .55);
}
.series-book--leather .series-book-title::after {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    margin: 7px auto 1px;
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}
.series-book--leather .series-book-title {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: lowercase;
    color: #6f5642;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .18), 0 -1px 3px rgba(0, 0, 0, .6);
}
/* Subjudul ("Letters") tidak dipakai di sampul kulit — sampul bukunya
   hanya membawa bulan, judul, dan garis. Hanya disembunyikan di varian
   ini; preset warna lain tetap menampilkan subjudulnya. */
.series-book--leather .series-book-sub { display: none; }

/* Sampul polos — sampulnya tampil apa adanya, tanpa tulisan.
   Yang disembunyikan hanya teksnya; .series-book-inner tetap hidup
   supaya bingkai emboss pada sampul kulit tidak ikut hilang. */
.series-book--bare .series-book-title,
.series-book--bare .series-book-sub,
.series-book--bare .series-book-dots,
.series-book--bare .series-book-inner::before { display: none; }
.series-book--bare.series-book--image .series-book-inner { background: none; }

.series-book--image {
    background-size: cover;
    background-position: center;
    box-shadow: 0 6px 16px rgba(2, 6, 23, .32);
}
/* Punggung: bayangan gradient sangat halus (bukan strip gelap solid) */
.series-book--image::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .05) 55%, rgba(0, 0, 0, 0) 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .18);
}
.series-book--image::after {
    background: repeating-linear-gradient(to bottom, #ffffff 0 2px, #e2e8f0 2px 3px);
}
/* Scrim judul: PERSIS mengikuti bentuk buku (inset 0 + radius sama) → tidak
   bengkok / selaras dengan sampul. Hitamnya tipis saja, hanya di dasar. */
.series-book--image .series-book-inner {
    inset: 0;
    justify-content: flex-end;
    align-items: center;
    gap: 1px;
    padding: 0 12px 12px 16px;
    border-radius: 6px 14px 14px 6px;
    background: linear-gradient(to top,
        rgba(2, 6, 23, .5) 0%,
        rgba(2, 6, 23, .22) 16%,
        rgba(2, 6, 23, 0) 38%);
}
.series-book--image .series-book-dots { display: none; }
.series-book--image .series-book-title {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.series-book--image .series-book-sub {
    color: rgba(255, 255, 255, .8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.series-book-inner {
    position: absolute;
    inset: 0 6px 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 10px;
}
.series-book-dots { display: flex; gap: 5px; }
.series-book-dots i {
    width: 7px; height: 7px; border-radius: 999px; display: block;
}
.series-book-dots i:first-child { background: var(--jr-am); }
.series-book-dots i:last-child  { background: #e0e7ff; }
.series-book-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 15px;
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(2, 6, 23, .25);
}
.series-book-sub {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 8.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

/* Info di kanan buku */
.series-info { min-width: 0; }
.series-info h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -.01em;
    color: #0f172a;
    transition: color .15s;
}
.series-card:hover .series-info h2 { color: var(--jr-accent); }
.series-info h2 svg { transition: transform .15s; }
.series-card:hover .series-info h2 svg { transform: translateX(4px); }
.series-info p {
    margin-top: 6px;
    color: #64748b;
    line-height: 1.65;
    font-size: .95rem;
}
.series-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.meta-chip {
    font-family: 'Nunito', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    background: #ffffff;
    border: 2px solid var(--jr-border-soft);
    border-radius: 999px;
    padding: 4px 12px;
}
.meta-chip--accent {
    color: var(--jr-accent-dark);
    border-color: var(--jr-accent-light);
    background: #f4fbff;
}

/* Placeholder series berikutnya */
.series-soon {
    border: 2px dashed var(--jr-border);
    border-radius: 20px;
    padding: 22px;
    text-align: center;
    color: #afafaf;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .9rem;
}

/* =====================================================
   EPISODE LIST — daftar reflections ala podcast Spotify
   ===================================================== */
.episode-list { display: flex; flex-direction: column; gap: 12px; }

.episode-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 2px solid var(--jr-border-soft);
    border-radius: 18px;
    box-shadow: 0 3px 0 var(--jr-border-soft);
    padding: 14px 18px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.episode-card:hover {
    transform: translateY(-2px);
    border-color: var(--jr-accent-border);
    box-shadow: 0 5px 0 var(--jr-accent-light);
}
.episode-card.is-playing {
    border-color: var(--jr-accent-border);
    box-shadow: 0 3px 0 var(--jr-accent-light);
}

/* Seluruh kartu klik ke detail; tombol play berada di atasnya */
.episode-cover-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* Tile tanggal — proporsi ikon kalender: bulan kecil di atas, angka besar di bawah */
.episode-date-tile {
    flex: none;
    width: 56px; height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    background: #fafafa;
    border: 2px solid var(--jr-border-soft);
    border-radius: 14px;
}
.episode-date-tile .d {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
    color: #3c3c3c;
}
.episode-date-tile .m {
    order: -1; /* bulan tampil di ATAS angka (gaya ikon kalender) */
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 8.5px;
    line-height: 1;
    letter-spacing: .14em;
    text-indent: .14em; /* kompensasi letter-spacing agar benar-benar center */
    text-transform: uppercase;
    color: #afafaf;
}
.episode-card.is-playing .episode-date-tile {
    background: var(--jr-accent-light);
    border-color: var(--jr-accent-border);
}
.episode-card.is-playing .episode-date-tile .d { color: var(--jr-accent-dark); }
.episode-card.is-playing .episode-date-tile .m { color: var(--jr-accent-dark); }

/* Judul + hari */
.episode-info { min-width: 0; flex: 1; }
.episode-info h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.02rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s;
}
.episode-card:hover .episode-info h3 { color: var(--jr-accent); }
.episode-info p {
    font-size: .78rem;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-top: 3px;
}

/* Tombol play AM/PM di kanan — sejajar satu garis dengan tile & judul */
.episode-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.dot { width: 6px; height: 6px; border-radius: 999px; display: inline-block; flex: none; }
.dot--am { background: var(--jr-am); }
.dot--pm { background: var(--jr-pm); }

/* Tombol play chunky (bibir 3D khas duo) */
.jp-play {
    width: 44px; height: 44px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid var(--jr-border);
    box-shadow: 0 3px 0 var(--jr-lip);
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease,
                background .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.jp-play:hover {
    border-color: var(--jr-accent-border);
    color: var(--jr-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--jr-accent-light);
}
.jp-play:active { transform: translateY(3px); box-shadow: 0 0 0 var(--jr-lip); }
.jp-play svg { width: 17px; height: 17px; }
.jp-play .ic-play { margin-left: 2px; }   /* pusatkan segitiga secara optik */
.jp-play .ic-pause { display: none; }
.jp-play.is-playing {
    background: var(--jr-accent);
    border-color: var(--jr-accent-dark);
    box-shadow: 0 3px 0 var(--jr-accent-dark);
    color: #ffffff;
}
.jp-play.is-playing:active { box-shadow: 0 0 0 var(--jr-accent-dark); }
.jp-play.is-playing .ic-play { display: none; }
.jp-play.is-playing .ic-pause { display: block; }

/* Varian pil: [▶ · AM] — label menyatu di dalam tombol, rapi & sejajar */
.jp-play--pill {
    width: auto;
    height: 36px;
    border-radius: 12px;
    padding: 0 14px 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.jp-play--pill svg { width: 13px; height: 13px; }
.jp-play--pill .ic-play { margin-left: 0; }
.pill-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .12em;
}

/* =====================================================
   EQUALIZER — batang menari ala Spotify
   ===================================================== */
@keyframes jrEq {
    0%, 100% { height: 4px; }
    50%      { height: 100%; }
}
.eq {
    display: none;
    align-items: flex-end;
    gap: 2.5px;
    height: 14px;
    flex: none;
}
.eq span {
    width: 3px;
    height: 4px;
    border-radius: 2px;
    background: var(--jr-accent);
    animation: jrEq 1s ease-in-out infinite;
}
.eq span:nth-child(2) { animation-delay: .25s; }
.eq span:nth-child(3) { animation-delay: .5s; }
.eq span:nth-child(4) { animation-delay: .12s; }
.is-playing .eq,
.episode-card.is-playing .title-eq { display: inline-flex; }

/* =====================================================
   NOW PLAYING BAR — melayang di bawah, ala Spotify
   ===================================================== */
/* Sticky: menempel di dasar layar saat scroll, tapi otomatis BERHENTI
   di atas footer ketika footer masuk viewport (tidak pernah menutupinya). */
.journal-player {
    position: sticky;
    bottom: 14px;
    z-index: 40;
    margin-top: auto;   /* konten pendek: tetap terdorong ke dasar main */
    padding-top: 28px;  /* jarak minimum dari konten di atasnya */
    pointer-events: none;
    transform: translateY(150%);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.15);
}
/* Halaman ber-player (journal): main jadi flex kolom supaya player bisa
   didorong ke dasar (margin-top auto), dan padding bawah dipangkas agar
   posisi "parkir" selalu rapat sedikit di atas garis footer —
   konsisten di desktop maupun mobile, konten pendek maupun panjang. */
main:has(.journal-player) {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.25rem;
}
/* Di flex kolom, anak ber-margin auto (mx-auto) berhenti stretch dan
   menyusut seukuran isinya — paksa lebar penuh; max-width tetap bekerja. */
main:has(.journal-player) > * { width: 100%; }
.journal-player.is-open { transform: none; }
.journal-player[hidden] { display: none; }

.jp-inner {
    pointer-events: auto;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 2px solid var(--jr-border);
    border-radius: 18px;
    box-shadow: 0 4px 0 var(--jr-lip), 0 -10px 34px rgba(2, 6, 23, .1);
    padding: 12px 16px;
}
.jp-info { flex: 1; min-width: 0; }
.jp-info strong {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .92rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jp-info span {
    font-size: .72rem;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.jp-play--bar { width: 40px; height: 40px; flex: none; }
.jp-close {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid var(--jr-border);
    box-shadow: 0 2px 0 var(--jr-lip);
    color: #94a3b8;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.jp-close svg { width: 12px; height: 12px; }
.jp-close:hover { border-color: #ffdfe0; color: #ff4b4b; }
.jp-close:active { transform: translateY(2px); box-shadow: none; }
.jp-progress {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.jp-progress input[type="range"] {
    flex: 1;
    height: 4px;
    accent-color: var(--jr-accent);
    cursor: pointer;
}
.jp-progress .jp-time {
    font-size: .7rem;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    min-width: 34px;
    text-align: center;
}

/* =====================================================
   DETAIL — track voice ala baris Spotify + kartu tulisan
   ===================================================== */
.jp-track-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 44px; }
.jp-track-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: #1e293b;
}
.jp-track-hint {
    font-size: .74rem;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-top: 2px;
}

/* Ikon matahari/bulan pengganti tile tanggal di detail */
.voice-icon {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 2px solid;
}
.voice-icon svg { width: 20px; height: 20px; }
.voice-icon--am { background: #fff8e8; border-color: #ffe7b3; color: #f59e0b; }
.voice-icon--pm { background: #eef0ff; border-color: #dbdfff; color: #6d75f6; }

/* Durasi audio di samping tombol play (diisi JS) */
.jp-duration {
    font-size: .72rem;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    min-width: 34px;
    text-align: right;
}

/* Voice of the day — SATU BARIS: dua tombol pill kecil.
   Saat diputar: pill biru + equalizer + denyut glow (pulse). */
.voice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.voice-pill {
    width: auto;
    height: 38px;
    padding: 0 15px 0 13px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .84rem;
    color: #334155;
}
.voice-pill svg { width: 12px; height: 12px; }
.voice-pill .voice-pill-ic { width: 14px; height: 14px; }
.voice-pill .ic-am { color: #f59e0b; }
.voice-pill .ic-pm { color: #6d75f6; }
.voice-pill .ic-play { margin-left: 0; }
.voice-pill .jp-duration {
    min-width: 0;
    text-align: left;
    font-weight: 400;
}

/* Sedang diputar: biru + isi putih + denyut glow */
@keyframes jrPulse {
    0%, 100% { box-shadow: 0 3px 0 var(--jr-accent-dark), 0 0 0 0 rgba(28, 176, 246, .38); }
    50%      { box-shadow: 0 3px 0 var(--jr-accent-dark), 0 0 0 8px rgba(28, 176, 246, 0); }
}
.voice-pill.is-playing {
    animation: jrPulse 1.8s ease-out infinite;
    color: #ffffff;
}
.voice-pill.is-playing .ic-am,
.voice-pill.is-playing .ic-pm { color: #ffffff; }
.voice-pill.is-playing .jp-duration { color: rgba(255, 255, 255, .85); }
.voice-pill.is-playing .eq span { background: #ffffff; }

/* Kartu tulisan (docs) */
.reflection-writing {
    background: #ffffff;
    border: 2px solid var(--jr-border-soft);
    border-radius: 20px;
    box-shadow: 0 3px 0 var(--jr-border-soft);
    padding: 20px 24px 24px;
}
.writing-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #afafaf;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid #f7f7f7;
}
.writing-head svg { width: 14px; height: 14px; }
.reflection-content { color: #334155; font-size: 1.05rem; line-height: 1.9; }
.reflection-content > * + * { margin-top: 1.1em; }
.reflection-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    border: 2px solid var(--jr-border-soft);
    margin: 1.4rem 0;
}
.reflection-content h1,
.reflection-content h2,
.reflection-content h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: #0f172a;
    margin-top: 1.6em;
}
.reflection-content h1 { font-size: 1.5em; }
.reflection-content h2 { font-size: 1.28em; }
.reflection-content h3 { font-size: 1.12em; }
.reflection-content ul { list-style: disc; padding-left: 1.5rem; }
.reflection-content ol { list-style: decimal; padding-left: 1.5rem; }
.reflection-content a { color: var(--jr-accent-dark); text-decoration: underline; }
.reflection-content .rf-signoff { margin-top: 1.6em; }

.reflection-content blockquote {
    border-left: 3px solid var(--jr-accent-border);
    background: #f4fbff;
    border-radius: 0 12px 12px 0;
    padding: 12px 16px;
    font-style: italic;
}
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* =====================================================
   TRANSCRIPTS — teks voice memo (buka/tutup)
   ===================================================== */
.transcripts { margin: 22px 0 6px; display: flex; flex-direction: column; gap: 12px; }
.transcript {
    background: #ffffff;
    border: 2px solid var(--jr-border-soft);
    border-radius: 16px;
    box-shadow: 0 2px 0 var(--jr-border-soft);
    overflow: hidden;
}
.transcript > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .02em;
    color: #334155;
    user-select: none;
}
.transcript > summary::-webkit-details-marker { display: none; }
.transcript > summary svg { width: 15px; height: 15px; flex-shrink: 0; }
.transcript--am > summary .ic-am { color: var(--jr-am); }
.transcript--pm > summary .ic-pm { color: var(--jr-pm); }
.transcript > summary span { flex: 1; min-width: 0; }
.transcript-chev { color: #cbd5e1; transition: transform .25s ease; }
.transcript[open] > summary .transcript-chev { transform: rotate(180deg); }
.transcript > summary:hover { background: #fbfbfa; }
.transcript-body {
    padding: 4px 18px 18px;
    color: #475569;
    font-size: .92rem;
    line-height: 1.75;
    white-space: pre-line;      /* hormati baris/paragraf transkrip */
    border-top: 1px solid #f4f4f4;
    margin-top: 2px;
}

.dark .transcript {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 2px 0 rgba(2, 6, 23, .6);
}
.dark .transcript > summary { color: #e2e8f0; }
.dark .transcript > summary:hover { background: #131f38; }
.dark .transcript-body { color: #cbd5e1; border-top-color: #1e293b; }

/* =====================================================
   DARK MODE — ikuti toggle situs (html.dark)
   ===================================================== */
.dark .series-card,
.dark .episode-card,
.dark .reflection-writing {
    background: rgba(30, 41, 59, .5);
    border-color: #1e293b;
    box-shadow: 0 4px 0 rgba(2, 6, 23, .55);
}
.dark .series-card:hover,
.dark .episode-card:hover {
    border-color: #334e68;
    box-shadow: 0 6px 0 rgba(28, 176, 246, .12);
}
.dark .episode-card.is-playing { border-color: rgba(28, 176, 246, .45); }
.dark .series-info h2 { color: #f1f5f9; }
.dark .series-info p { color: #94a3b8; }
.dark .meta-chip { background: transparent; border-color: #1e293b; color: #94a3b8; }
.dark .meta-chip--accent {
    background: rgba(28, 176, 246, .08);
    border-color: rgba(28, 176, 246, .3);
    color: #7cd0fb;
}
.dark .series-soon { border-color: #1e293b; color: #64748b; }
.dark .episode-date-tile { background: rgba(15, 23, 42, .6); border-color: #1e293b; }
.dark .episode-date-tile .d { color: #e2e8f0; }
.dark .episode-card.is-playing .episode-date-tile {
    background: rgba(28, 176, 246, .12);
    border-color: rgba(28, 176, 246, .4);
}
.dark .episode-card.is-playing .episode-date-tile .d,
.dark .episode-card.is-playing .episode-date-tile .m { color: #7cd0fb; }
.dark .episode-info h3 { color: #e2e8f0; }
.dark .jp-play {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 3px 0 rgba(2, 6, 23, .6);
    color: #94a3b8;
}
.dark .jp-play:hover { border-color: rgba(28, 176, 246, .5); color: #7cd0fb; }
.dark .jp-play.is-playing {
    background: var(--jr-accent);
    border-color: var(--jr-accent-dark);
    box-shadow: 0 3px 0 var(--jr-accent-dark);
    color: #fff;
}
.dark .jp-inner {
    background: rgba(15, 23, 42, .88);
    border-color: #1e293b;
    box-shadow: 0 4px 0 rgba(2, 6, 23, .6), 0 -10px 34px rgba(0, 0, 0, .45);
}
.dark .jp-close {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 2px 0 rgba(2, 6, 23, .6);
    color: #94a3b8;
}
.dark .jp-close:hover { border-color: rgba(255, 75, 75, .45); color: #ff6b6b; }
.dark .jp-info strong { color: #e2e8f0; }
.dark .reflection-content { color: #cbd5e1; }
.dark .reflection-content h1,
.dark .reflection-content h2,
.dark .reflection-content h3 { color: #f1f5f9; }
.dark .reflection-content a { color: #7cd0fb; }
.dark .reflection-content blockquote {
    background: rgba(28, 176, 246, .07);
    border-left-color: rgba(28, 176, 246, .4);
}
.dark .reflection-content img { border-color: #1e293b; }
.dark .jp-track-label { color: #e2e8f0; }
.dark .voice-icon--am {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .28);
    color: #fbbf24;
}
.dark .voice-icon--pm {
    background: rgba(109, 117, 246, .1);
    border-color: rgba(109, 117, 246, .32);
    color: #a5b4fc;
}
.dark .writing-head { color: #64748b; border-bottom-color: #1e293b; }
.dark .voice-pill { color: #cbd5e1; }
.dark .voice-pill.is-playing { color: #ffffff; }
.dark .voice-pill.is-playing .eq span { background: #ffffff; }

/* ── Mobile ── */
@media (max-width: 520px) {
    /* Kartu buku di mobile: buku & teks tetap menyamping,
       tapi chips meta pindah ke BAWAH — satu baris penuh */
    .series-card {
        display: grid;
        grid-template-columns: 82px 1fr;
        gap: 2px 16px;
        align-items: center;
        padding: 18px 16px;
    }
    .series-info { display: contents; } /* h2/p/meta jadi item grid langsung */
    .series-book { grid-row: 1 / span 2; width: 82px; height: 110px; }
    .series-info h2 { grid-column: 2; align-self: end; font-size: 1.08rem; }
    .series-info p { grid-column: 2; align-self: start; font-size: .87rem; line-height: 1.55; }
    .series-meta { grid-column: 1 / -1; margin-top: 14px; }
    .series-book-title { font-size: 12px; }
    .series-book-sub { font-size: 7.5px; }
    .series-book-dots i { width: 6px; height: 6px; }
    .meta-chip { font-size: .64rem; padding: 3px 9px; }

    /* Kartu episode: baris 1 = tile + judul SEJAJAR,
       baris 2 = tombol AM/PM melebar rata. */
    .episode-card { flex-wrap: wrap; row-gap: 12px; padding: 14px 16px; }
    .episode-date-tile { width: 48px; height: 48px; border-radius: 12px; }
    .episode-date-tile .d { font-size: 17px; }
    .episode-info { flex: 1 1 0; min-width: 0; flex-basis: 0; }
    .episode-actions { flex-basis: 100%; margin-left: 0; gap: 8px; }
    .episode-actions .jp-play--pill { flex: 1; justify-content: center; }

    .voice-row { gap: 8px; }
    .voice-pill { flex: 1; justify-content: center; }
    .jp-inner { padding: 10px 12px; gap: 6px 10px; }
    .writing-head { margin-bottom: 16px; }
    .reflection-writing { padding: 20px 18px 22px; }
}

/* =====================================================
   THOUGHTS — Series artikel (aksen biru, senada situs;
   kuning kini identitas Reflections)
   ===================================================== */

/* ── List: kartu artikel chunky ── */
.thought-list { display: flex; flex-direction: column; gap: 12px; }
.thought-card {
    position: relative;
    display: block;
    background: #ffffff;
    border: 2px solid var(--jr-border-soft);
    border-radius: 18px;
    box-shadow: 0 3px 0 var(--jr-border-soft);
    padding: 20px 22px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.thought-card:hover {
    transform: translateY(-2px);
    border-color: var(--jr-accent-border);
    box-shadow: 0 5px 0 var(--jr-accent-light);
}
.thought-cover-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.thought-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    color: #94a3b8;
    margin-bottom: 8px;
}
.thought-meta::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--jr-accent);
    flex: none;
}
.thought-meta-dot { width: 3px; height: 3px; border-radius: 999px; background: #cbd5e1; }
.thought-card h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.35;
    color: #1e293b;
    transition: color .15s;
}
.thought-card:hover h2 { color: var(--jr-accent-dark); }
.thought-excerpt {
    margin-top: 6px;
    color: #64748b;
    font-size: .95rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.thought-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--jr-accent-dark);
}
.thought-read svg { width: 13px; height: 13px; transition: transform .15s; }
.thought-card:hover .thought-read svg { transform: translateX(3px); }

/* ── Detail: tipografi artikel ── */
.thought-content { color: #334155; font-size: 1.05rem; line-height: 1.9; }
.thought-content > * + * { margin-top: 1.1em; }
.thought-content h1,
.thought-content h2,
.thought-content h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: #0f172a;
    margin-top: 1.6em;
    line-height: 1.35;
}
.thought-content h1 { font-size: 1.5em; }
.thought-content h2 { font-size: 1.28em; }
.thought-content h3 { font-size: 1.12em; }
.thought-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    border: 2px solid var(--jr-border-soft);
    margin: 1.5rem 0;
}
.thought-content a { color: var(--jr-accent-dark); text-decoration: underline; }
.thought-content ul { list-style: disc; padding-left: 1.5rem; }
.thought-content ol { list-style: decimal; padding-left: 1.5rem; }
.thought-content blockquote {
    border-left: 3px solid var(--jr-accent-border);
    background: #f4fbff;
    border-radius: 0 12px 12px 0;
    padding: 12px 16px;
    font-style: italic;
}
.thought-content pre,
.thought-content pre.ql-syntax {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85em;
    line-height: 1.7;
}
.thought-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Navigasi older/newer ── */
.thought-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 40px;
}
.thought-nav a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    background: #ffffff;
    border: 2px solid var(--jr-border-soft);
    border-radius: 16px;
    box-shadow: 0 3px 0 var(--jr-border-soft);
    padding: 14px 18px;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.thought-nav a:hover {
    transform: translateY(-2px);
    border-color: var(--jr-accent-border);
    box-shadow: 0 5px 0 var(--jr-accent-light);
}
.thought-nav a.is-newer { text-align: right; align-items: flex-end; }
.thought-nav-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #afafaf;
}
.thought-nav-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .9rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.thought-nav a:hover .thought-nav-title { color: var(--jr-accent-dark); }

/* ── CTA follow ── */
.thought-cta {
    margin-top: 16px;
    background: #ffffff;
    border: 2px solid var(--jr-border-soft);
    border-radius: 20px;
    box-shadow: 0 3px 0 var(--jr-border-soft);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.thought-cta h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: #1e293b;
}
.thought-cta p { font-size: .85rem; color: #94a3b8; margin-top: 2px; }
.thought-cta-btn {
    background: #ffffff;
    border: 2px solid var(--jr-border);
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--jr-lip);
    padding: 9px 16px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .85rem;
    color: #3c3c3c;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.thought-cta-btn:hover { border-color: var(--jr-accent-border); color: var(--jr-accent-dark); box-shadow: 0 4px 0 var(--jr-accent-light); }
.thought-cta-btn:active { transform: translateY(3px); box-shadow: none; }

/* ── Dark mode ── */
.dark .thought-card,
.dark .thought-nav a,
.dark .thought-cta {
    background: rgba(30, 41, 59, .5);
    border-color: #1e293b;
    box-shadow: 0 4px 0 rgba(2, 6, 23, .55);
}
.dark .thought-card:hover,
.dark .thought-nav a:hover {
    border-color: rgba(28, 176, 246, .45);
    box-shadow: 0 5px 0 rgba(28, 176, 246, .08);
}
.dark .thought-card h2,
.dark .thought-nav-title,
.dark .thought-cta h3 { color: #e2e8f0; }
.dark .thought-card:hover h2,
.dark .thought-nav a:hover .thought-nav-title { color: #7cd0fb; }
.dark .thought-excerpt { color: #94a3b8; }
.dark .thought-read { color: #7cd0fb; }
.dark .thought-content { color: #cbd5e1; }
.dark .thought-content h1,
.dark .thought-content h2,
.dark .thought-content h3 { color: #f1f5f9; }
.dark .thought-content a { color: #7cd0fb; }
.dark .thought-content img { border-color: #1e293b; }
.dark .thought-content blockquote {
    background: rgba(28, 176, 246, .06);
    border-left-color: rgba(28, 176, 246, .4);
}
.dark .thought-cta-btn {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 3px 0 rgba(2, 6, 23, .6);
    color: #cbd5e1;
}
.dark .thought-cta-btn:hover { border-color: rgba(28, 176, 246, .45); color: #7cd0fb; }

/* ── Mobile ── */
@media (max-width: 520px) {
    .thought-card { padding: 16px 18px; }
    .thought-nav { grid-template-columns: 1fr; }
    .thought-nav a.is-newer { text-align: left; align-items: flex-start; }
    .thought-cta { padding: 18px 20px; }
}

/* =====================================================
   COMMENTS — dukungan pengunjung (Reflections & Thoughts)
   Bersih dominan putih: tanpa panel/kartu berwarna, item
   dipisah garis rambut, aksen hanya di tombol kirim.
   ===================================================== */
.comments {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--jr-border-soft);
}
.comments-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    color: #0f172a;
    margin-bottom: 4px;
}
.comments-head svg { width: 17px; height: 17px; color: #94a3b8; }
.comments-count {
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #f1f5f9;
}

/* ── Daftar komentar: putih polos, dipisah garis rambut ── */
.comment-list { display: flex; flex-direction: column; }
.comment-item {
    display: flex;
    gap: 12px;
    padding: 16px 2px;
    border-bottom: 1px solid #f1f5f9;
}
.comment-item:last-child { border-bottom: none; }
.comment-item.is-new { animation: jrFadeUp .45s ease both; }
.comment-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .9rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}
.comment-body { min-width: 0; flex: 1; }
.comment-byline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    margin-bottom: 3px;
}
.comment-name {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: #0f172a;
}
.comment-dot { color: #cbd5e1; }
.comment-date { color: #94a3b8; }
.comment-text {
    color: #334155;
    font-size: .95rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.comment-empty {
    color: #94a3b8;
    font-size: .92rem;
    padding: 14px 2px 4px;
}

/* ── Form: langsung di atas putih halaman, tanpa panel ── */
.comment-form { margin-top: 18px; }
.comment-form-row { margin-bottom: 10px; }
.comment-input {
    width: 100%;
    font-family: inherit;
    font-size: .95rem;
    color: #0f172a;
    background: #ffffff;
    border: 2px solid #eef2f7;
    border-radius: 12px;
    padding: 10px 12px;
    transition: border-color .18s, box-shadow .18s;
}
.comment-input::placeholder { color: #a1a9b3; }
.comment-input:focus {
    outline: none;
    border-color: var(--jr-accent-border);
    box-shadow: 0 0 0 3px var(--jr-accent-light);
}
.comment-textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
.comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.comment-hint { font-size: .76rem; color: #94a3b8; }
.comment-hint.is-error { color: #ef4444; font-weight: 700; }
.comment-submit {
    flex-shrink: 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .86rem;
    color: #fff;
    background: var(--jr-accent);
    border: 2px solid var(--jr-accent-dark);
    border-radius: 12px;
    padding: 9px 18px;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--jr-accent-dark);
    transition: transform .12s, box-shadow .12s, background .12s;
}
.comment-submit:hover { background: #2bb7f7; }
.comment-submit:active { transform: translateY(2px); box-shadow: 0 0 0 var(--jr-accent-dark); }
.comment-submit:disabled { opacity: .6; cursor: not-allowed; box-shadow: 0 2px 0 var(--jr-accent-dark); transform: none; }

/* ── Dark mode ── */
.dark .comments { border-top-color: #1e293b; }
.dark .comments-head { color: #f1f5f9; }
.dark .comments-head svg { color: #64748b; }
.dark .comments-count {
    background: transparent;
    border-color: #1e293b;
    color: #94a3b8;
}
.dark .comment-item { border-bottom-color: #1e293b; }
.dark .comment-avatar {
    background: rgba(15, 23, 42, .6);
    border-color: #1e293b;
    color: #94a3b8;
}
.dark .comment-name { color: #e2e8f0; }
.dark .comment-dot { color: #475569; }
.dark .comment-date { color: #64748b; }
.dark .comment-text { color: #cbd5e1; }
.dark .comment-empty { color: #64748b; }
.dark .comment-input {
    background: #0b1220;
    border-color: #1e293b;
    color: #e2e8f0;
}
.dark .comment-input::placeholder { color: #64748b; }
.dark .comment-input:focus {
    border-color: rgba(28, 176, 246, .5);
    box-shadow: 0 0 0 3px rgba(28, 176, 246, .15);
}
.dark .comment-hint { color: #64748b; }

@media (max-width: 520px) {
    .comment-form-foot { flex-direction: column; align-items: stretch; }
    .comment-submit { width: 100%; }
}

/* =====================================================================
   RISALAH RINDU — "Hikayat Patah Hati"
   Identitas malam: kartu gelap indigo, tipografi serif miring, lapang.
   ===================================================================== */

/* ---- Header daftar ---- */
.risalah-eyebrow {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 10px;
}
.risalah-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #1e1b4b;
    margin-bottom: 14px;
}
.risalah-lede {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #64748b;
    max-width: 34rem;
}
.dark .risalah-title { color: #e0e7ff; }
.dark .risalah-lede { color: #94a3b8; }

/* ---- Daftar surat ---- */
.risalah-list { display: flex; flex-direction: column; gap: 10px; }
.risalah-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 2px solid #eceafd;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 3px 0 #eceafd;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.risalah-item:hover {
    transform: translateY(-2px);
    border-color: #c7c2f0;
    box-shadow: 0 5px 0 #d8d4f7;
}
.risalah-item-no {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(150deg, #818cf8, #6366f1);
    color: #ffffff;
    font-family: Georgia, serif;
    font-size: 1rem;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .35);
}
.risalah-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.risalah-item-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.08rem;
    color: #1e1b4b;
}
.risalah-item-date {
    font-size: .82rem;
    color: #94a3b8;
    font-family: 'Nunito', sans-serif;
}
.risalah-item-arrow { flex: none; width: 18px; height: 18px; color: #a5b4fc; margin-left: auto; }
.dark .risalah-item { background: #0b1020; border-color: #1e293b; box-shadow: 0 3px 0 #1e293b; }
.dark .risalah-item:hover { border-color: #4338ca; box-shadow: 0 5px 0 #312e81; }
.dark .risalah-item-title { color: #e0e7ff; }

/* ---- Kartu surat (halaman baca — dominan putih, indigo hanya aksen) ---- */
.risalah-letter {
    position: relative;
    border-radius: 22px;
    padding: 44px 42px 34px;
    background: #ffffff;
    border: 2px solid #eceafd;
    box-shadow: 0 4px 0 #eceafd;
    overflow: hidden;
}
/* Garis aksen indigo tipis di tepi kiri (pita surat) */
.risalah-letter::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #818cf8, #4f46e5);
    opacity: .55;
}
.risalah-letter-top { position: relative; margin-bottom: 22px; text-align: center; }
/* Bulan sabit kecil — motif "malam" tanpa gelap */
.risalah-letter-top::before {
    content: "☾";
    display: block;
    font-size: 1.35rem;
    line-height: 1;
    color: #6366f1;
    margin-bottom: 12px;
}
.risalah-letter-eyebrow {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6366f1;
}
.risalah-letter-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.2;
    color: #1e1b4b;
    margin-top: 8px;
}
.risalah-body {
    position: relative;
    white-space: pre-line;                 /* pertahankan baris & jeda puisi */
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.14rem;
    line-height: 1.95;
    color: #3f4657;
    letter-spacing: .005em;
}
.risalah-sign {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid #f0eefc;
    text-align: right;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: .92rem;
    color: #8b90c9;
}
/* Dark mode: tetap syahdu tapi mengikuti tema gelap situs */
.dark .risalah-letter { background: #0b1020; border-color: #1e293b; box-shadow: 0 4px 0 #1e293b; }
.dark .risalah-letter-title { color: #e0e7ff; }
.dark .risalah-body { color: #cbd5e1; }
.dark .risalah-sign { color: #a5b4fc; border-top-color: #1e293b; }

/* ---- Navigasi sebelumnya / selanjutnya ---- */
.risalah-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 22px;
}
.risalah-nav a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border: 2px solid #eceafd;
    border-radius: 14px;
    background: #ffffff;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}
.risalah-nav a:hover { border-color: #c7c2f0; transform: translateY(-2px); }
.risalah-nav a.is-next { text-align: right; }
.risalah-nav-label { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #6366f1; }
.risalah-nav-title { font-family: Georgia, serif; font-size: .95rem; color: #334155; }
.dark .risalah-nav a { background: #0b1020; border-color: #1e293b; }
.dark .risalah-nav a:hover { border-color: #4338ca; }
.dark .risalah-nav-title { color: #cbd5e1; }

@media (max-width: 560px) {
    .risalah-letter { padding: 32px 22px 28px; border-radius: 18px; }
    .risalah-body { font-size: 1.06rem; line-height: 1.85; }
    .risalah-title { font-size: 1.7rem; }
    .risalah-nav { grid-template-columns: 1fr; }
    .risalah-nav a.is-next { text-align: left; }
}

/* =====================================================================
   RISALAH RINDU — buku catatan kraft + spiral (turn.js)
   ===================================================================== */
:root{
    --rk-kraft-1:#cdab7a; --rk-kraft-2:#c09a63; --rk-kraft-3:#a97f4c;
    --rk-cream:#f6efe0; --rk-rule:#e4d5b6;
    --rk-ink:#463d31; --rk-ink-soft:#8a7c63; --rk-accent:#a06a44;
    --rk-hand:#6f5d43;
    --rk-leather-1:#4a3529; --rk-leather-2:#3a2820; --rk-leather-3:#271a13;
    --rk-leather-emb:#31221a; --rk-leather-emb2:#5c4636;
    --rk-leather: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27l%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.7%200.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23l%29%27%20opacity%3D%270.5%27%2F%3E%3C%2Fsvg%3E");
    /* Kulit tidak rata: --rk-leather (butir sangat halus) sendirian bikin
       permukaan terlihat seperti cat datar. --rk-pebble memberi butiran
       sebesar ±5px seperti kulit ber-emboss, --rk-mottle memberi gelombang
       terang-gelap yang lebar supaya cahayanya tidak rata sempurna. */
    --rk-pebble: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.22%27%20numOctaves%3D%273%27%20seed%3D%275%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E");
    --rk-mottle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.02%27%20numOctaves%3D%272%27%20seed%3D%279%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%20opacity%3D%270.34%27%2F%3E%3C%2Fsvg%3E");
    --rk-wire:#1d1b18; --rk-wire-hi:#7d766a;
    --rk-shadow:rgba(60,45,25,.22);
    --rk-ctrl-bg:#fbf7ef; --rk-ctrl-bd:#d9cbb0;
    --rk-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27p%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%20opacity%3D%270.30%27%2F%3E%3C%2Fsvg%3E");
    --rk-kraft-tex: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27k%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.55%200.8%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23k%29%27%20opacity%3D%270.40%27%2F%3E%3C%2Fsvg%3E");
}
.dark{
    --rk-kraft-1:#a8875a; --rk-kraft-2:#8f6f45; --rk-kraft-3:#6f5433;
    --rk-cream:#efe6d3; --rk-rule:#d9c8a6;
    --rk-ink:#463d31; --rk-ink-soft:#8a7c63; --rk-accent:#a06a44;
    --rk-hand:#7a684b;
    --rk-wire:#000; --rk-wire-hi:#5b554b;
    --rk-shadow:rgba(0,0,0,.5);
    --rk-ctrl-bg:#2a2318; --rk-ctrl-bd:#463a26;
}

/* Header */
.risalah-book-head{ text-align:center; margin-bottom:22px; }
.risalah-book-eyebrow{ font-family:'Nunito',sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rk-accent); margin-bottom:8px; }
.risalah-book-title{ font-family:'Caveat',cursive; font-weight:700; font-size:2.4rem; line-height:1; color:var(--rk-ink); }
.dark .risalah-book-title{ color:#e9dcc4; }
.risalah-book-lede{ margin-top:8px; font-family:'Nunito',sans-serif; font-weight:600; font-size:.86rem; color:var(--rk-ink-soft); }

/* Panggung buku. --rk-s = faktor skala (di-set JS); semua metrik ikut mengecil. */
.risalah-stage{ position:relative; margin:0 auto; max-width:100%; --rk-s:1; }
/* ── Konstruksi buku (seperti buku asli) ─────────────────────────────
   #risalah-book   : wadah transparan (BUKAN sampul)
   .rk-cover-back  : SATU lembar sampul di belakang kertas
   .rk-cover-front : sampul depan, LEBIH BESAR dari kertas, berayun
   .rk-pages       : kertas krem di antaranya                          */
#risalah-book{
    position:absolute; top:0; left:0; opacity:0;
    /* Perspektif SENGAJA lemah. Sampul depan berputar pada punggung, jadi
       tepi bebasnya maju ke arah penonton sampai z=+lebar sampul. Dengan
       perspective:5200px pembesarannya 5200/(5200-440)=1,092 — sampul jadi
       648px → 708px dan menjulur ±30px di ATAS & BAWAH garis buku, tidak
       lagi sejajar dengan sampul belakang. Yang terlihat: kulit hitam
       (plus bayangannya) menyembul di luar siluet buku, paling kentara di
       sudut kanan-bawah saat buku menggeser membuka.
       30000px → pembesaran tinggal 1,015; julur maksimum ±4,8px (0,7%
       dari tinggi buku) sehingga terbaca sebagai tebal sampul, bukan
       lapisan kedua. Bentuk trapesium putarannya tetap ada. */
    perspective:30000px; perspective-origin:50% 50%;
    transition:left 0.95s cubic-bezier(.45,.06,.2,1),
               transform .45s cubic-bezier(.33,.5,.24,1),
               opacity .4s ease;
}
.rk-cover{
    position:absolute;
    background-color:var(--rk-leather-2);
    background-image:
        var(--rk-pebble),
        var(--rk-leather),
        var(--rk-mottle),
        radial-gradient(120% 60% at 50% -8%, rgba(255,255,255,.10), rgba(255,255,255,0) 46%),
        linear-gradient(160deg, var(--rk-leather-1), var(--rk-leather-3));
    background-size:74px 74px, 220px 220px, 560px 560px, auto, auto;
    background-blend-mode:overlay, soft-light, soft-light, normal, normal;
    /* --rk-board: tebal papan sampul. Tiga lapis box-shadow tanpa blur —
       gelap, secercah inti papan yang lebih terang, gelap lagi — jadi
       tepinya terbaca sebagai papan berlapis kulit, bukan garis. Sama
       seperti tumpukan kertas, dipakai box-shadow supaya mengikuti
       border-radius dan sudutnya tidak jadi lancip.
       Tiga lapis pertama miring ke sisi luar (memberi tebal di tepi
       samping), tiga berikutnya lurus ke bawah. Yang lurus itu perlu:
       tanpa dia, papan kiri menebal ke kiri-bawah dan papan kanan ke
       kanan-bawah, jadi di punggung keduanya menyimpang dan menyisakan
       takik-V kecil tempat latar tembus. */
    box-shadow:
        calc(1px*var(--rk-s,1))   calc(1px*var(--rk-s,1))   0 #241811,
        calc(2.5px*var(--rk-s,1)) calc(2.5px*var(--rk-s,1)) 0 #3f2f25,
        calc(3.5px*var(--rk-s,1)) calc(3.5px*var(--rk-s,1)) 0 #1d130e,
        0 calc(1px*var(--rk-s,1))   0 #241811,
        0 calc(2.5px*var(--rk-s,1)) 0 #3f2f25,
        0 calc(3.5px*var(--rk-s,1)) 0 #1d130e,
        0 16px 34px rgba(40,26,14,.34), inset 0 0 46px rgba(0,0,0,.34);
    transition:box-shadow .95s cubic-bezier(.45,.06,.2,1);
}
.rk-cover-back{ z-index:1; border-radius:0 calc(18px*var(--rk-s,1)) calc(18px*var(--rk-s,1)) 0;
    /* Jeda SATU ARAH. Kembali ke siku harus seketika (0s): itu terjadi di
       detik sampul depan mendarat, dan telat sedikit saja takiknya
       terlihat. Sebaliknya lihat aturan berikutnya. */
    transition:border-radius 0s 0s; }
/* Sudut sisi punggung sampul BELAKANG — pasangan dari aturan serupa pada
   muka luar sampul depan di bawah. Waktu buku tertutup keduanya bertumpuk
   di kotak yang sama; kalau hanya muka depannya yang dibulatkan, sudut
   siku sampul belakang menyembul lewat lengkungan itu dan sudut bukunya
   tetap terlihat tajam. Waktu terbuka ia harus siku lagi: di situ kedua
   papan beradu di punggung, dan lengkungan akan menyisakan takik-V.
   Syaratnya = jendela yang sama dengan .is-lifted (tertutup + sepanjang
   buka/tutup), tapi ditulis lewat kelas panggung karena .rk-cover-back
   adalah SAUDARA .rk-cover-front, bukan turunannya. */
.risalah-stage.is-closed .rk-cover-back,
.risalah-stage.rk-anim .rk-cover-back{
    border-radius:calc(12px*var(--rk-s,1)) calc(18px*var(--rk-s,1))
                  calc(18px*var(--rk-s,1)) calc(12px*var(--rk-s,1));
    /* Membulatnya DITUNDA 0,12s. Waktu menutup, kelas ini menyala di frame
       pertama padahal kedua papan masih beradu — tanpa jeda, takik-V-nya
       berkedip sekejap. Terukur: 0,12s cukup untuk menunggu sampul depan
       menyingkir dari punggung. */
    transition:border-radius 0s .12s; }
.rk-cover-front{
    z-index:2; transform-style:preserve-3d;
    border-radius:calc(18px*var(--rk-s,1)) 0 0 calc(18px*var(--rk-s,1));
    background:none; box-shadow:none;
    transition:transform 0.95s cubic-bezier(.45,.06,.2,1);
}
.rk-cover-front.is-lifted{ z-index:9; }
/* dua sisi sampul depan */
.rk-cover-front > .rk-face{
    position:absolute; inset:0; backface-visibility:hidden;
    border-radius:inherit;
    background-color:var(--rk-leather-2);
    background-image:
        var(--rk-pebble),
        var(--rk-leather),
        var(--rk-mottle),
        radial-gradient(120% 60% at 50% -8%, rgba(255,255,255,.10), rgba(255,255,255,0) 46%),
        linear-gradient(160deg, var(--rk-leather-1), var(--rk-leather-3));
    background-size:74px 74px, 220px 220px, 560px 560px, auto, auto;
    background-blend-mode:overlay, soft-light, soft-light, normal, normal;
    /* --rk-board = tebal papan; arah x-nya di-set per muka, di bawah.
       Bevel: tepi atas kena cahaya, tepi bawah masuk bayangan — papan
       terbaca punya ketebalan walau dilihat lurus dari depan.
       Lewat variabel supaya aturan :hover di bawah bisa memperdalam
       bayangannya TANPA ikut menghapus papannya. */
    box-shadow:
        var(--rk-board),
        inset 0 calc(1.5px*var(--rk-s,1)) 0 rgba(255,255,255,.09),
        inset 0 calc(-2px*var(--rk-s,1)) 0 rgba(0,0,0,.45),
        0 14px 30px rgba(40,26,14,.34), inset 0 0 44px rgba(0,0,0,.32);
    display:grid; place-items:center;
    transition:box-shadow .6s cubic-bezier(.45,.06,.2,1);
}
/* Arah tebal papan berlawanan di tiap muka. Muka luar dirotasi 2x (wadah
   + muka) jadi ia tercermin: dengan +x ia muncul di KANAN waktu buku
   tertutup, sementara muka dalam dengan -x muncul di KIRI waktu buku
   terbuka. Dua-duanya benar sendirinya, tanpa perlu diatur JS. */
.rk-cover-front > .rk-front{ transform:rotateY(0deg);        /* sisi dalam (kiri) */
    --rk-board:
        calc(-1px*var(--rk-s,1))   calc(1px*var(--rk-s,1))   0 #241811,
        calc(-2.5px*var(--rk-s,1)) calc(2.5px*var(--rk-s,1)) 0 #3f2f25,
        calc(-3.5px*var(--rk-s,1)) calc(3.5px*var(--rk-s,1)) 0 #1d130e,
        0 calc(1px*var(--rk-s,1))   0 #241811,
        0 calc(2.5px*var(--rk-s,1)) 0 #3f2f25,
        0 calc(3.5px*var(--rk-s,1)) 0 #1d130e; }
/* Sudut sisi punggung: SIKU waktu buku terbuka — di situ kedua papan
   beradu, kalau dibulatkan muncul takik-V di punggung atas & bawah.
   Tapi waktu tertutup sisi itu jadi tepi luar buku, dan siku 0px bikin
   sudutnya terlihat terlalu tajam. Karena itu pembulatannya diikatkan ke
   .is-lifted — kelas yang menyala saat buku tertutup dan sepanjang
   buka/tutup, lalu padam persis ketika kedua papan bertemu. Muka luar
   ini juga tak terlihat lagi saat terbuka, jadi pergantiannya tidak
   pernah tertangkap mata. */
.rk-cover-front.is-lifted > .rk-back{
    border-radius:calc(12px*var(--rk-s,1)) calc(18px*var(--rk-s,1))
                  calc(18px*var(--rk-s,1)) calc(12px*var(--rk-s,1)); }
.rk-cover-front > .rk-back{ transform:rotateY(180deg);
    --rk-board:
        calc(1px*var(--rk-s,1))   calc(1px*var(--rk-s,1))   0 #241811,
        calc(2.5px*var(--rk-s,1)) calc(2.5px*var(--rk-s,1)) 0 #3f2f25,
        calc(3.5px*var(--rk-s,1)) calc(3.5px*var(--rk-s,1)) 0 #1d130e,
        0 calc(1px*var(--rk-s,1))   0 #241811,
        0 calc(2.5px*var(--rk-s,1)) 0 #3f2f25,
        0 calc(3.5px*var(--rk-s,1)) 0 #1d130e;
    /* dirotasi 2x (wadah + sisi) → radius harus dicerminkan supaya saat
       buku TERTUTUP sisi luar yang membulat, bukan punggungnya. */
    border-radius:0 calc(18px*var(--rk-s,1)) calc(18px*var(--rk-s,1)) 0; }
/* Pelapis dalam sampul = endpaper krem, ditempatkan PERSIS di area halaman
   kiri (menyisakan tonjolan sampul di kiri/atas/bawah, rapat di punggung). */
.rk-cover-lining{ position:absolute;
    left:var(--rk-over,10px); top:var(--rk-over,10px);
    right:0; bottom:var(--rk-over,10px); }
.rk-cover-lining > .page{ position:absolute; inset:0;
    border-radius:calc(13px*var(--rk-s,1)) 0 0 calc(13px*var(--rk-s,1)) !important; }
/* Separuh KIRI bayangan punggung, dijahitkan ke endpaper sampul.
   Selama sampul berayun, endpaper ini berada di ATAS .rk-crease sehingga
   separuh kiri crease tertutup — yang terlihat cuma separuh kanan dengan
   tepi keras di punggung, lalu separuh kirinya muncul sekaligus begitu
   sampul turun ke bawah lapisan kertas di akhir animasi.
   Nilainya SAMA PERSIS dengan separuh kiri .rk-crease (0 → .26 di 34%
   → .4 di punggung), jadi saat lapisan bertukar tidak ada yang berubah.
   Ikut berayun bersama sampul — memang begitu seharusnya: bayangan ini
   jatuh di atas kertas yang menempel di sampul. */
.rk-cover-lining::after{ content:""; position:absolute; z-index:2; pointer-events:none;
    top:0; right:0; bottom:0; width:calc(15px*var(--rk-s,1)); opacity:0;
    background:linear-gradient(90deg, rgba(60,45,25,0), rgba(48,34,18,.26) 68%, rgba(38,26,13,.4)); }
.is-opening .rk-cover-lining::after{ animation:rkCreaseOpen 0.95s linear both; }
.is-closing .rk-cover-lining::after{ animation:rkCreaseClose 0.95s linear both; }
.rk-cover-front > .rk-back .rk-cover-in{ text-align:center; }
.rk-cover-front > .rk-back::before{ content:""; position:absolute; inset:calc(15px*var(--rk-s,1));
    border:1px solid rgba(255,255,255,.13); border-radius:calc(5px*var(--rk-s,1)); pointer-events:none;
    box-shadow:inset 0 1px 0 rgba(0,0,0,.28); }
.rk-cover-front > .rk-back::after{ content:""; position:absolute; inset:0; border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(120% 90% at 50% 30%, rgba(255,255,255,.06), rgba(0,0,0,.22) 78%); }

/* Kertas: saat tertutup MEMUDAR halus (bukan hilang mendadak) */
.rk-pages{ position:absolute; z-index:3;
    /* perspective (BUKAN preserve-3d): anak tetap diurut menurut z-index,
       sehingga lembar yang berputar tak pernah tenggelam ke belakang.
       Nilainya dilemahkan dari 2800px. Lembar yang berputar maju ke arah
       penonton sampai z=+lebar halaman, jadi 2800px membesarkannya
       2800/(2800-430)=1,181 — tinggi 628px → 735px. Teksnya ikut memuai
       lalu MENYUSUT lagi saat lembar mendarat: pada 30% terakhir animasi
       baris teks masih merayap 3,2px, terasa seperti tersendat.
       12000px → pembesaran 1,037; rayapan ekor tinggal ±0,7px. */
    perspective:12000px; perspective-origin:50% 50%; }
/* Kertas tetap TERLIHAT selama sampul bergerak — ia tertutup sampul secara
   fisik, bukan disembunyikan. Baru disembunyikan setelah gerakan selesai,
   saat sampul sudah benar-benar menutupinya. */
.risalah-stage.is-closed:not(.rk-anim) .rk-pages{ opacity:0; pointer-events:none; }
/* Membuka/menutup: panggung melebar & buku bergeser (tetap terpusat) */
.risalah-stage{ transition:width 0.95s cubic-bezier(.45,.06,.2,1); }
/* Penekan transisi sesaat (init & resize) supaya tidak ikut beranimasi */
.risalah-stage.rk-no-anim, .risalah-stage.rk-no-anim #risalah-book,
.risalah-stage.rk-no-anim .rk-cover-front{ transition:none !important; }
.rk-base, .rk-flip, .rk-crease{ position:absolute; top:0; }
.rk-base{ z-index:2; }
.rk-base > .page, .rk-face > .page{ position:absolute; inset:0; }
.rk-crease{ left:50%; width:calc(30px*var(--rk-s,1)); height:100%; margin-left:calc(-15px*var(--rk-s,1));
    z-index:7; pointer-events:none; opacity:1; transition:filter .3s ease;
    background:linear-gradient(90deg, rgba(60,45,25,0), rgba(48,34,18,.26) 34%, rgba(38,26,13,.4) 50%, rgba(48,34,18,.26) 66%, rgba(60,45,25,0)); }
.risalah-stage:not(.is-spread) .rk-crease{ display:none; }
/* Bayangan punggung baru sah kalau ada DUA halaman yang mengapitnya.
   Crease ini duduk di TENGAH punggung: separuh badannya berada di sisi
   halaman kiri. Selama sampul berayun halaman kiri belum ada (JS
   menyembunyikan .rk-base-l), jadi separuh kiri itu jatuh ke LATAR —
   sebuah batang gelap ±15px DI LUAR tepi buku yang ikut menggeser
   bersama buku (terukur: menggelapkan latar sampai 60 tingkat, dari
   awal animasi sampai ±35%).
   Solusinya bukan memangkas separuhnya — itu meninggalkan tepi keras di
   punggung. Crease-nya yang tidak digambar sampai spread benar-benar
   terbentuk, lalu menguat halus. Ambang waktunya dipilih dari
   pengukuran: sisi kiri baru betul-betul tampak di ±57% saat membuka,
   dan berhenti tampak di ±21% saat menutup.
   Selama animasi crease ini hanya menyumbang separuh KANAN; separuh
   kirinya dipasok .rk-cover-lining::after — lihat catatan di sana. */
.is-opening .rk-crease{ animation:rkCreaseOpen 0.95s linear both; }
.is-closing .rk-crease{ animation:rkCreaseClose 0.95s linear both; }
@keyframes rkCreaseOpen{  0%,58%{ opacity:0; }  88%,100%{ opacity:1; } }
@keyframes rkCreaseClose{ 0%,8%{  opacity:1; }  30%,100%{ opacity:0; } }
.rk-flip{ z-index:6; display:none; transform-style:preserve-3d;
    transition:transform 0.72s cubic-bezier(.33,.5,.24,1); }
.rk-flip-r{ transform-origin:left center; }
.rk-flip-l{ transform-origin:right center; }
.rk-flip.rk-instant{ transition:none !important; }
/* Pelarutan saat lembar diserahkan ke halaman dasar — lihat catatan
   settle() di risalah_book.js. Opacity ditaruh di MUKA-nya, bukan di
   .rk-flip, supaya konteks 3D (preserve-3d + backface-visibility)
   tidak ikut diratakan. */
.rk-flip.rk-settle > .rk-face{ transition:opacity .26s linear; opacity:0; }
.rk-flip > .rk-face{ position:absolute; inset:0; backface-visibility:hidden; }
.rk-flip > .rk-front{ transform:rotateY(0deg); }
.rk-flip > .rk-back{ transform:rotateY(180deg); }
.rk-shade{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
    background:linear-gradient(to right, rgba(45,32,15,.4), rgba(45,32,15,0) 62%); }
.rk-flip.go .rk-shade{ animation:rkSweep 0.72s cubic-bezier(.33,.5,.24,1) both; }
@keyframes rkSweep{ 0%{opacity:0;} 48%{opacity:.5;} 100%{opacity:0;} }

/* ── Isyarat fisik tiap gerakan ───────────────────────────────────── */
/* 1. Lembar terangkat & menangkap cahaya selama berputar */
.rk-flip.go > .rk-face{ animation:rkLift 0.72s cubic-bezier(.33,.5,.24,1) both; }
@keyframes rkLift{
    0%   { box-shadow:0 0 0 rgba(40,26,14,0); }
    45%  { box-shadow:calc(-14px*var(--rk-s,1)) calc(10px*var(--rk-s,1)) calc(26px*var(--rk-s,1)) rgba(40,26,14,.34); }
    100% { box-shadow:0 0 0 rgba(40,26,14,0); }
}
.rk-flip > .rk-face::after{
    content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
    background:linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 70%); }
.rk-flip.go > .rk-face::after{ animation:rkSheen 0.72s cubic-bezier(.33,.5,.24,1) both; }
@keyframes rkSheen{ 0%{opacity:0;} 40%{opacity:.5;} 100%{opacity:0;} }

/* 2. Bayangan lembar jatuh ke halaman tujuan.
      Dua hal yang dulu salah:
      (a) Kepekatannya melompat ke .5 hanya dalam 14% linimasa (±100ms)
          padahal lembarnya belum menaungi halaman tujuan sama sekali —
          baru mulai menutupi di ±22%, penuh di ±75%.
      (b) Bidangnya dipaku di punggung, sementara bagian halaman yang
          sudah ternaungi justru TERTUTUP lembar itu sendiri (z-index 6
          di atas 5). Jadi begitu lembar benar-benar datang, bayangannya
          hilang dari pandangan — terukur nol dari t=30% ke atas.
      Yang benar: yang terlihat adalah penumbra tepat DI DEPAN tepi
      lembar. Jadi bidangnya menciut mengikuti tepi itu (scaleX, poros di
      sisi LUAR halaman) sehingga ujung gelapnya selalu menempel di tepi
      lembar dan menyapu dari punggung ke arah luar, memudar habis saat
      lembar mendarat rata. Timing linear — bentuknya ada di keyframe. */
.rk-cast{ position:absolute; top:0; height:100%; z-index:5; opacity:0; pointer-events:none; }
.rk-cast-l{ left:0; transform-origin:left center;     /* poros = tepi luar */
    background:linear-gradient(90deg, rgba(38,26,13,0) 38%, rgba(38,26,13,.5)); }
.rk-cast-r{ transform-origin:right center;            /* poros = tepi luar */
    background:linear-gradient(270deg, rgba(38,26,13,0) 38%, rgba(38,26,13,.5)); }
.is-turn-fwd .rk-cast-l{ animation:rkCast 0.72s linear both; }
.is-turn-bwd .rk-cast-r{ animation:rkCast 0.72s linear both; }
/* scaleX = sisa halaman yang BELUM ternaungi (diukur: 22%→0% ternaungi,
   30%→37%, 35%→62%, 40%→78%, 45%→87%, 50%→93%, 60%→98%, 75%→100%). */
@keyframes rkCast{
    0%,8%    { opacity:0;   transform:scaleX(1);   }
    16%      { opacity:.14; transform:scaleX(1);   }
    24%      { opacity:.33; transform:scaleX(.94); }
    30%      { opacity:.45; transform:scaleX(.68); }
    35%      { opacity:.50; transform:scaleX(.43); }
    40%      { opacity:.48; transform:scaleX(.27); }
    46%      { opacity:.40; transform:scaleX(.18); }
    54%      { opacity:.27; transform:scaleX(.12); }
    64%      { opacity:.12; transform:scaleX(.07); }
    76%,100% { opacity:0;   transform:scaleX(0);   }
}

/* 3. Punggung menegang saat lembar/sampul melewatinya */
.is-turn-fwd .rk-crease, .is-turn-bwd .rk-crease, .rk-anim .rk-crease{ filter:brightness(.82); }

/* 4. Bayangan yang DIJATUHKAN SAMPUL ke kertas di bawahnya.
      Bayangan HARUS tetap berada di bawah sampul yang menjatuhkannya.
      Dulu ia cuma memudar menurut waktu, padahal sampul sudah melepas
      kertas jauh lebih awal (terukur: ±38% linimasa) — akibatnya sebuah
      batang gelap selebar satu halaman muncul mendadak di sisi kiri
      halaman 1 dan menumpuk dengan bayangan punggung (.rk-crease +
      gradien .p-inner). Kini lebarnya MENYUSUT ke punggung mengikuti
      tepi sampul, jadi tidak pernah terlihat sebagai bayangan kedua.
      Timing linear: bentuk gerak ditulis di keyframe, bukan di easing. */
.rk-cover-cast{ position:absolute; top:0; height:100%; z-index:8; opacity:0;
    pointer-events:none; transform-origin:left center;   /* poros = punggung */
    background:linear-gradient(90deg, rgba(38,26,13,.5), rgba(38,26,13,.16) 46%, rgba(38,26,13,0) 72%); }
.is-opening .rk-cover-cast{ animation:rkCoverCastOut 0.95s linear both; }
.is-closing .rk-cover-cast{ animation:rkCoverCastIn 0.95s linear both; }
/* Angka scaleX mengikuti lebar sampul yang masih menaungi halaman kanan:
   15%→100%, 25%→85%, 30%→55%, 35%→10%, 38%→0%. */
@keyframes rkCoverCastOut{
    0%,15%   { opacity:.9;  transform:scaleX(1);   }
    25%      { opacity:.8;  transform:scaleX(.88); }
    30%      { opacity:.6;  transform:scaleX(.58); }
    35%      { opacity:.32; transform:scaleX(.18); }
    42%      { opacity:.12; transform:scaleX(.07); }
    52%,100% { opacity:0;   transform:scaleX(0);   }
}
/* Menutup: sampul baru menyentuh kertas di ±37% dan menutupinya penuh di
   ±62%, jadi bayangan tetap nol sampai ia benar-benar ternaungi. */
@keyframes rkCoverCastIn{
    0%,48%   { opacity:0;   transform:scaleX(0);   }
    58%      { opacity:.12; transform:scaleX(.07); }
    65%      { opacity:.32; transform:scaleX(.18); }
    70%      { opacity:.6;  transform:scaleX(.58); }
    75%      { opacity:.8;  transform:scaleX(.88); }
    85%,100% { opacity:.9;  transform:scaleX(1);   }
}

/* 5. Saat tertutup: sampul mengundang untuk dibuka */
.risalah-stage.is-closed{ cursor:pointer; }
.risalah-stage.is-closed:hover #risalah-book{ transform:translateY(-6px); }
.risalah-stage.is-closed:hover .rk-cover-front > .rk-face{
    box-shadow:var(--rk-board),
        inset 0 calc(1.5px*var(--rk-s,1)) 0 rgba(255,255,255,.09),
        inset 0 calc(-2px*var(--rk-s,1)) 0 rgba(0,0,0,.45),
        0 26px 48px rgba(40,26,14,.44), inset 0 0 44px rgba(0,0,0,.32); }
.risalah-stage.is-closed:hover .rk-cover-front > .rk-back::before{ border-color:rgba(255,255,255,.2); }

@media (prefers-reduced-motion:reduce){
    .rk-flip.go > .rk-face, .rk-flip.go > .rk-face::after,
    .is-turn-fwd .rk-cast-l, .is-turn-bwd .rk-cast-r,
    .rk-anim .rk-cover-back, .rk-anim .rk-cover-front > .rk-face{ transition:none !important; }
    .risalah-stage.is-closed:hover #risalah-book{ transform:none; }
}

/* Sudut kertas: membulat di sisi LUAR, siku di sisi punggung.
   Radius sengaja ditambah dari 10px — sudut yang terlalu tajam bikin
   kertas terlihat seperti potongan kaku, bukan lembaran. */
.is-spread .rk-base-r .page, .is-spread .rk-flip-r .rk-front .page,
.is-spread .rk-flip-l .rk-back .page{
    border-radius:0 calc(13px*var(--rk-s,1)) calc(13px*var(--rk-s,1)) 0 !important; }
.is-spread .rk-base-l .page, .is-spread .rk-flip-l .rk-front .page,
.is-spread .rk-flip-r .rk-back .page{
    border-radius:calc(13px*var(--rk-s,1)) 0 0 calc(13px*var(--rk-s,1)) !important; }

/* ── Tebal blok kertas ───────────────────────────────────────────────
   Halaman dasar bukan selembar, tapi puncak dari setumpuk lembar. Yang
   menggambarkan tumpukan itu box-shadow bertingkat tanpa blur: tiap
   pasang (garis gelap + badan krem) = satu lembar di bawahnya, digeser
   ke sisi LUAR dan ke bawah, lalu ditutup satu bayangan lembut yang
   menjatuhkan blok itu ke atas sampul. Bayangan mengikuti border-radius,
   jadi tumpukannya melengkung ikut sudut — tidak ada ujung lancip.

   Ditaruh di .rk-base, BUKAN di .page di dalamnya. .page diganti isinya
   tiap kali halaman berpindah, jadi elemennya selalu baru dan transisi
   tidak pernah jalan — tumpukannya akan melompat. .rk-base tetap hidup
   sepanjang umur buku, jadi perubahan tebalnya bisa dilarutkan.
   Karena .page menutupi .rk-base persis, yang terlihat hanya bagian yang
   menyembul keluar — itulah tumpukannya.

   TEBALNYA IKUT ISI BUKU. data-stack di-set JS (lihat stackDepth()):
   sisi kiri setebal lembar yang SUDAH dibalik, sisi kanan setebal lembar
   yang masih tersisa — sisi kanan tidak pernah turun ke nol, buku selalu
   punya tebal. Offset dibatasi 6px, di bawah tonjolan sampul (10px),
   supaya bingkai kulitnya tetap kelihatan dan tidak ada yang keluar dari
   siluet buku. Yang sedang DIBALIK memang satu lembar, jadi .rk-flip
   tidak ikut. */
.rk-base{
    --k1:0px; --k2:0px; --k3:0px; --k4:0px; --k5:0px; --k6:0px;
    --kd:calc(2px*var(--rk-s,1));
    transition:box-shadow .45s cubic-bezier(.33,.5,.24,1);
}
.rk-base[data-stack="1"]{
    --k1:calc(1px*var(--rk-s,1)); --k2:calc(2px*var(--rk-s,1));
    --kd:calc(3px*var(--rk-s,1)); }
.rk-base[data-stack="2"]{
    --k1:calc(1px*var(--rk-s,1)); --k2:calc(2px*var(--rk-s,1));
    --k3:calc(3px*var(--rk-s,1)); --k4:calc(4px*var(--rk-s,1));
    --kd:calc(4px*var(--rk-s,1)); }
.rk-base[data-stack="3"]{
    --k1:calc(1px*var(--rk-s,1)); --k2:calc(2px*var(--rk-s,1));
    --k3:calc(3px*var(--rk-s,1)); --k4:calc(4px*var(--rk-s,1));
    --k5:calc(5px*var(--rk-s,1)); --k6:calc(6px*var(--rk-s,1));
    --kd:calc(5px*var(--rk-s,1)); }
/* Sudutnya disamakan dengan .page supaya tumpukannya melengkung sama */
.is-spread .rk-base-r{ border-radius:0 calc(13px*var(--rk-s,1)) calc(13px*var(--rk-s,1)) 0; }
.is-spread .rk-base-l{ border-radius:calc(13px*var(--rk-s,1)) 0 0 calc(13px*var(--rk-s,1)); }
.risalah-stage:not(.is-spread) .rk-base-r{
    border-radius:calc(5px*var(--rk-s,1)) calc(16px*var(--rk-s,1))
                  calc(16px*var(--rk-s,1)) calc(5px*var(--rk-s,1)); }
.rk-base-r{
    box-shadow:
        var(--k1) var(--k1) 0 rgba(150,128,88,.42),
        var(--k2) var(--k2) 0 #ece2cc,
        var(--k3) var(--k3) 0 rgba(150,128,88,.34),
        var(--k4) var(--k4) 0 #e6dbc2,
        var(--k5) var(--k5) 0 rgba(145,124,85,.30),
        var(--k6) var(--k6) 0 #e2d7bd,
        var(--kd) var(--kd) calc(5px*var(--rk-s,1)) rgba(45,32,15,.32);
}
.rk-base-l{
    box-shadow:
        calc(-1*var(--k1)) var(--k1) 0 rgba(150,128,88,.42),
        calc(-1*var(--k2)) var(--k2) 0 #ece2cc,
        calc(-1*var(--k3)) var(--k3) 0 rgba(150,128,88,.34),
        calc(-1*var(--k4)) var(--k4) 0 #e6dbc2,
        calc(-1*var(--k5)) var(--k5) 0 rgba(145,124,85,.30),
        calc(-1*var(--k6)) var(--k6) 0 #e2d7bd,
        calc(-1*var(--kd)) var(--kd) calc(5px*var(--rk-s,1)) rgba(45,32,15,.32);
}

/* Sampul dalam & halaman kosong */
/* Endpaper: kertas pelapis krem di balik sampul (seperti buku sungguhan) */
.rk-endpaper .p-inner{ display:grid; place-items:center;
    background:var(--rk-grain) repeat, linear-gradient(150deg, #efe6d2, #e6dbc4) !important;
    box-shadow:inset 0 0 40px rgba(120,95,55,.18); }
.rk-endpaper .p-inner::after{ opacity:.45; }
.rk-endpaper .rk-cover-moon{ color:#b09a72; text-shadow:none; }
.rk-endpaper .rk-cover-title{ color:#a8916a; text-shadow:none; font-size:calc(1.15rem*var(--rk-s,1)); }
.rk-endpaper .rk-cover-rule{ background:rgba(150,125,85,.4); box-shadow:none; }
.rk-endpaper .rk-cover-sub{ color:#bba98a; text-shadow:none; }
/* Halaman kosong dulu dibikin polos total. Sekarang ia memakai gradien
   punggung yang sama seperti halaman lain supaya terbaca sebagai kertas
   buku yang sama — yang membedakan hanya belum ada tulisannya. */
.rk-cover-in{ text-align:center; padding:0 10%; }
.rk-cover-moon{ font-size:calc(1.5rem*var(--rk-s,1)); color:#6b5340;
    text-shadow:0 1px 0 rgba(255,255,255,.16), 0 -1px 2px rgba(0,0,0,.55); }
.rk-cover-title{ margin-top:calc(18px*var(--rk-s,1)); font-family:'Lora',Georgia,serif;
    font-size:calc(2rem*var(--rk-s,1)); letter-spacing:.2em; color:#6f5642;
    text-shadow:0 1px 0 rgba(255,255,255,.18), 0 -1px 3px rgba(0,0,0,.6); }
.rk-cover-rule{ width:calc(38px*var(--rk-s,1)); height:1px; margin:calc(20px*var(--rk-s,1)) auto;
    background:rgba(255,255,255,.2); box-shadow:0 1px 0 rgba(0,0,0,.45); }
.rk-cover-sub{ font-family:'Nunito',sans-serif; font-size:calc(.64rem*var(--rk-s,1)); font-weight:800;
    letter-spacing:.34em; text-transform:uppercase; color:#8a7057;
    text-shadow:0 1px 0 rgba(255,255,255,.12), 0 -1px 1px rgba(0,0,0,.5); }

/* Panggung buku keluar dari kolom sempit induk.
   Pemusatan pakai MARGIN, bukan transform — transform akan ditimpa
   animasi .animate-fade-in-up (fadeInUpSoft memakai translateY). */
.risalah-bleed{ --rw:min(1040px, calc(100vw - 40px));
    width:var(--rw); margin-left:calc(50% - var(--rw) / 2); margin-right:0; }

#risalah-book .page{ background:var(--rk-grain) repeat, radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.4), rgba(255,255,255,0) 42%), var(--rk-cream); box-shadow:inset 0 0 34px rgba(70,55,30,.06); border-radius:calc(5px*var(--rk-s,1)) calc(16px*var(--rk-s,1)) calc(16px*var(--rk-s,1)) calc(5px*var(--rk-s,1)); }
#risalah-book .p-inner{
    position:relative;
    height:100%; box-sizing:border-box;
    padding:calc(30px*var(--rk-s,1)) calc(32px*var(--rk-s,1)) calc(20px*var(--rk-s,1)) calc(52px*var(--rk-s,1));
    display:flex; flex-direction:column; overflow:auto;
    border-radius:inherit;
    background:linear-gradient(90deg, rgba(60,45,25,.10), rgba(60,45,25,0) 8%);
}
/* Grain di ATAS isi → tinta/tulisan ikut bertekstur (bukan cuma latar) */
#risalah-book .p-inner::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:var(--rk-grain); background-size:170px 170px;
    mix-blend-mode:multiply; opacity:.9;
    border-radius:inherit;
}
.risalah-stage .p-top{ margin-bottom:calc(8px*var(--rk-s,1)); }
.risalah-stage .p-label{ font-family:'Caveat',cursive; font-weight:700; font-size:calc(1.5rem*var(--rk-s,1)); color:var(--rk-accent); line-height:1; }
/* Tempat & tanggal = baris pertama blok penutup surat, sebaris di atas
   tanda tangan dan rata kanan bersamanya. Ditulis tangan seperti isi
   suratnya, bukan huruf cetak kapital seperti waktu masih jadi kepala
   halaman. margin-top:auto ada di sini, bukan di .p-sign, supaya yang
   terdorong ke dasar halaman adalah SELURUH blok penutup. */
.risalah-stage .p-date{ margin-top:auto; padding-top:calc(10px*var(--rk-s,1));
    text-align:right; font-family:'Caveat',cursive; line-height:1.25;
    font-size:calc(1rem*var(--rk-s,1)); color:var(--rk-ink-soft); }
/* Garis buku digambar DI belakang tulisan → mulai tepat di baris pertama,
   dan jarak antar-paragraf = 1 garis (26px) supaya semua baris jatuh di garis. */
.risalah-stage .p-body{
    /* --rk-line mengunci TIGA hal jadi satu angka: jarak antar-baris,
       jarak antar-garis buku, dan jarak antar-paragraf. Kalau salah satu
       diubah sendiri, tulisan berhenti mendarat tepat di garis.
       Dikecilkan dari 1,2rem/26px: dengan ukuran lama surat terpanjang
       meluber 105px dari 628px ruang halaman (perlu di-scroll). Tempat &
       tanggal yang pindah ke blok penutup memakan ±40px lagi, jadi
       ukurannya diturunkan tipis ke 1rem — cukup untuk membuat satu baris
       prolog berhenti melipat, dan sisa ruang halaman tersempit melompat
       dari 10px jadi 32px.
       flex:1 0 auto — badan teks memenuhi sisa halaman supaya GARISNYA
       turun sampai bawah, bukan berhenti di baris terakhir. Tumbuh saja
       (grow 1, shrink 0): kalau suatu saat isinya kelewat panjang ia
       tidak boleh dikempiskan, biar .p-inner yang bergulir. Titik awal
       gradiennya tetap di tepi atas badan teks, jadi tulisan tetap
       mendarat pas di garis. */
    --rk-line:calc(22px*var(--rk-s,1));
    flex:1 0 auto;
    font-family:'Caveat',cursive; font-style:normal; font-weight:500;
    font-size:calc(1rem*var(--rk-s,1)); line-height:var(--rk-line);
    color:var(--rk-hand);
    background-image:repeating-linear-gradient(to bottom,
        transparent 0 calc(var(--rk-line) - 1px),
        var(--rk-rule) calc(var(--rk-line) - 1px) var(--rk-line));
}
.risalah-stage .p-body p{ margin:0 0 var(--rk-line); }
.risalah-stage .p-body p:last-child{ margin-bottom:0; }
.risalah-stage .p-sign{ text-align:right; font-family:'Caveat',cursive; line-height:1.25; font-size:calc(1rem*var(--rk-s,1)); color:var(--rk-ink-soft); }
.risalah-stage .p-num{ text-align:center; margin-top:calc(6px*var(--rk-s,1)); font-family:'Nunito',sans-serif; font-size:calc(.64rem*var(--rk-s,1)); font-weight:700; color:var(--rk-ink-soft); }

/* Sampul kraft */
/* Detail editorial halaman */
.risalah-stage .pg-mark{ position:absolute; top:calc(15px*var(--rk-s,1)); left:calc(58px*var(--rk-s,1)); font-family:'Nunito',sans-serif; font-size:calc(.6rem*var(--rk-s,1)); font-weight:800; letter-spacing:.14em; color:var(--rk-ink-soft); }
.risalah-stage .pg-mark span{ font-size:.66em; vertical-align:super; }
.risalah-stage .pg-side{ position:absolute; top:50%; writing-mode:vertical-rl; font-family:'Nunito',sans-serif; font-size:calc(.54rem*var(--rk-s,1)); font-weight:800; letter-spacing:.34em; text-transform:uppercase; color:var(--rk-ink-soft); opacity:.5; white-space:nowrap; }

.risalah-stage .pg-side-r{ top:calc(38px*var(--rk-s,1)); right:calc(13px*var(--rk-s,1)); transform:none;
    font-size:calc(.58rem*var(--rk-s,1)); letter-spacing:.3em; opacity:.75; font-variant-numeric:tabular-nums; }

/* Kontrol */
.risalah-book-controls{ margin-top:26px; display:flex; align-items:center; justify-content:center; gap:16px; }
.r-nav{ width:46px; height:46px; border-radius:50%; border:1px solid var(--rk-ctrl-bd); background:var(--rk-ctrl-bg); color:var(--rk-accent); display:grid; place-items:center; cursor:pointer; box-shadow:0 3px 0 var(--rk-ctrl-bd); transition:transform .15s, box-shadow .15s, opacity .15s; }
.r-nav:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 5px 0 var(--rk-ctrl-bd); }
.r-nav:active:not(:disabled){ transform:translateY(1px); box-shadow:0 1px 0 var(--rk-ctrl-bd); }
.r-nav:disabled{ opacity:.35; cursor:default; }
.r-nav svg{ width:20px; height:20px; }
.r-counter{ min-width:70px; text-align:center; font-family:'Nunito',sans-serif; font-weight:800; font-size:.9rem; color:var(--rk-ink); font-variant-numeric:tabular-nums; }
.dark .r-counter{ color:#e9dcc4; }
.r-counter small{ display:block; font-weight:700; font-size:.64rem; color:var(--rk-ink-soft); letter-spacing:.14em; text-transform:uppercase; }

/* --- Fallback tanpa JS: halaman jadi kartu krem yang tetap terbaca --- */
.risalah-stage:not(.book-on){ width:auto !important; height:auto !important; }
.risalah-stage:not(.book-on) #risalah-book{ position:static; opacity:1; display:flex; flex-direction:column; gap:16px; }
.risalah-stage:not(.book-on) .page{ position:relative !important; width:auto !important; height:auto !important; border-radius:16px; box-shadow:0 3px 0 var(--rk-ctrl-bd); overflow:hidden; }
.risalah-stage:not(.book-on) .p-inner{ height:auto; overflow:visible; }
.risalah-stage:not(.book-on) ~ .risalah-book-controls{ display:none; }

@media (prefers-reduced-motion:reduce){ #risalah-book *{ transition:none !important; } }

/* Responsif: seluruh isi buku sudah diskalakan via --rk-s (lihat JS).
   Judul di luar buku, jadi dikecilkan terpisah di layar sempit. */
@media (max-width:560px){
    .risalah-book-title{ font-size:1.95rem; }
}

/* Halaman KIRI: padding & penanda dicerminkan (punggung di sisi kanan) */
.is-spread .rk-base-l .p-inner,
.is-spread .rk-flip-l .rk-front .p-inner,
.is-spread .rk-flip-r .rk-back .p-inner{
    padding:calc(30px*var(--rk-s,1)) calc(52px*var(--rk-s,1)) calc(20px*var(--rk-s,1)) calc(32px*var(--rk-s,1));
    background:linear-gradient(270deg, rgba(60,45,25,.10), rgba(60,45,25,0) 8%);
}
.is-spread .rk-base-l .pg-mark,
.is-spread .rk-flip-l .rk-front .pg-mark,
.is-spread .rk-flip-r .rk-back .pg-mark{ left:calc(32px*var(--rk-s,1)); }
.is-spread .rk-base-l .pg-side-r,
.is-spread .rk-flip-l .rk-front .pg-side-r,
.is-spread .rk-flip-r .rk-back .pg-side-r{ right:calc(34px*var(--rk-s,1)); }

/* Layar sempit: satu halaman, sudut & padding normal */