/* =============================================================
   site.css — gaya kustom situs publik Alkitabku.
   Konsolidasi dari blok <style> inline di view (head/body).
   Dimuat di setiap halaman setelah tailwind.css.
   ============================================================= */

/* ===== Alpine.js: sembunyikan elemen sampai siap ===== */
[x-cloak]{display:none!important;}

/* ===== Proteksi gambar Cerita Alkitab Anak (Tingkat 1 + watermark) =====
   Catatan: proteksi sisi-klien hanya MENAIKKAN friksi (anti klik-kanan/seret/
   long-press) + menempelkan watermark agar tak bernilai bila di-screenshot.
   Tidak bisa mencegah screenshot/Network-tab — itu butuh signed-URL di server. */
.bs-protect{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; -o-user-drag:none;
  -webkit-touch-callout:none;
}
/* Lapisan watermark transparan di atas gambar (tidak menghalangi swipe/tombol). */
.bs-shield{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;                 /* biarkan swipe & klik tembus ke slider */
  background-repeat:repeat;
  background-position:center;
  background-size:300px 180px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22180%22%3E%3Ctext%20x%3D%228%22%20y%3D%22112%22%20transform%3D%22rotate%28-30%20150%2090%29%22%20font-family%3D%22Arial%2CHelvetica%2Csans-serif%22%20font-size%3D%2219%22%20font-weight%3D%22700%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.30%22%3Ealkitabku.com%3C%2Ftext%3E%3C%2Fsvg%3E");
}

/* Utility line-clamp (jaga-jaga bila tidak ter-compile di tailwind.css) */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Animasi masuk modal (mis. modal laporkan konten) */
@keyframes ak-modal-pop{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
.ak-modal-pop{animation:ak-modal-pop .16s ease both;}

/* ===== Verifikasi manusia: slider "geser untuk verifikasi" ===== */
#modalHumanVerify .hv-track{position:relative;height:48px;border-radius:12px;background:#f1f5f9;border:1px solid #e2e8f0;overflow:hidden;user-select:none;touch-action:none;}
#modalHumanVerify .hv-fill{position:absolute;left:0;top:0;bottom:0;width:48px;background:rgba(0,153,218,.16);transition:none;}
#modalHumanVerify .hv-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#94a3b8;pointer-events:none;white-space:nowrap;}
#modalHumanVerify .hv-handle{position:absolute;left:0;top:0;height:48px;width:48px;border-radius:11px;background:#0099DA;color:#fff;display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:2;}
#modalHumanVerify .hv-handle:active{cursor:grabbing;}
#modalHumanVerify .hv-track.verified{background:#dcfce7;border-color:#86efac;}
#modalHumanVerify .hv-track.verified .hv-fill{background:rgba(22,163,74,.18);}
#modalHumanVerify .hv-track.verified .hv-handle{background:#16a34a;cursor:default;}
#modalHumanVerify .hv-track.verified .hv-label{color:#16a34a;}

/* Modal laporkan konten — warna eksplisit (kelas merah Tailwind belum tentu ter-compile) */
#modalReport .report-ico{background:#fee2e2;color:#ef4444;}
#btnReportConfirm{background:#dc2626;color:#fff;}
#btnReportConfirm:hover{background:#b91c1c;}
.link-report{color:#94a3b8;}
.link-report:hover{color:#dc2626;}

/* Tombol & ikon semantik (kelas warna merah/amber/sky Tailwind belum tentu ter-compile) */
.btn-danger{background:#dc2626;color:#fff;}
.btn-danger:hover{background:#b91c1c;}
.ico-danger{background:#fee2e2;color:#ef4444;}
.ico-warn{background:#fef3c7;color:#d97706;}
.ico-info{background:#e0f2fe;color:#0284c7;}
.link-danger{color:#cbd5e1;}
.link-danger:hover{color:#dc2626;background:#fef2f2;}

/* Tanda input belum valid (border merah) */
.field-invalid{border-color:#ef4444 !important;box-shadow:0 0 0 2px rgba(239,68,68,.15) !important;}

/* ===== Kotak pencarian cantik (dipakai Bible Verse Art, Kamus Alkitab, dll) ===== */
.ak-search{position:relative;}
.ak-search input{
  width:100%;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:9999px;
  padding:.9rem 3rem .9rem 3rem;
  font-size:1rem;
  line-height:1.2;
  color:#1e293b;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ak-search input::placeholder{color:#94a3b8;}
.ak-search input:hover{border-color:#cbd5e1;}
.ak-search input:focus{
  outline:none;
  border-color:#0099DA;
  box-shadow:0 0 0 4px rgba(0,153,218,.15), 0 1px 2px rgba(15,23,42,.06);
  background:#fff;
}
.ak-search .ak-search-ico{
  position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);
  color:#94a3b8;font-size:1rem;pointer-events:none;transition:color .18s ease;
}
.ak-search input:focus ~ .ak-search-ico{color:#0099DA;}
.ak-search .ak-search-clear{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  width:2rem;height:2rem;border-radius:9999px;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:#94a3b8;cursor:pointer;transition:background .15s ease, color .15s ease;
}
.ak-search .ak-search-clear:hover{background:#f1f5f9;color:#475569;}
html.reader-dark .ak-search input{background:#1e293b;border-color:#334155;color:#e2e8f0;}
html.reader-dark .ak-search .ak-search-clear:hover{background:#0b1220;color:#cbd5e1;}

/* ===== Select2 disamakan dengan kotak keyword (#search_text) di halaman Alkitab =====
   CATATAN: CSS Select2 dari CDN dimuat SETELAH site.css, jadi selektor di bawah
   diberi awalan "html " agar spesifisitasnya menang dan border filter select
   benar-benar memakai slate-300 (#cbd5e1) yang sama dengan textbox keyword. */
html .select2-container--default .select2-selection--single{
  height:42px;                       /* sejajar dengan input py-2.5 text-sm */
  background-color:#fff;
  border:1px solid #cbd5e1;          /* slate-300, sama dengan #search_text */
  border-radius:.75rem;              /* rounded-xl */
  display:flex;align-items:center;
  transition:border-color .18s ease, box-shadow .18s ease;
}
html .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#334155;                     /* slate-700 */
  font-size:.875rem;                 /* text-sm */
  font-weight:500;
  line-height:1.2;
  padding-left:.75rem;padding-right:2rem;
}
html .select2-container--default .select2-selection--single .select2-selection__arrow{height:40px;right:6px;}
html .select2-container--default .select2-selection--single .select2-selection__placeholder{color:#94a3b8;}
html .select2-container--default .select2-selection--single:hover{border-color:#94a3b8;}
/* fokus / dropdown terbuka -> samakan dengan focus textbox (brand) */
html .select2-container--default.select2-container--focus .select2-selection--single,
html .select2-container--default.select2-container--open  .select2-selection--single{
  border-color:#0099DA;
  box-shadow:0 0 0 3px rgba(0,153,218,.20);
  outline:none;
}
/* panel dropdown */
html .select2-container--default .select2-dropdown{
  border-color:#cbd5e1;border-radius:.75rem;overflow:hidden;
  box-shadow:0 8px 24px rgba(15,23,42,.10);
}
html .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#0099DA;}
html .select2-container--default .select2-search--dropdown .select2-search__field{
  border:1px solid #cbd5e1;border-radius:.5rem;padding:.4rem .6rem;outline:none;
}
/* Mode gelap (reader-dark) */
html.reader-dark .select2-container--default .select2-selection--single{background-color:#1e293b;border-color:#334155;}
html.reader-dark .select2-container--default .select2-selection--single .select2-selection__rendered{color:#e2e8f0;}
html.reader-dark .select2-container--default .select2-dropdown{background-color:#1e293b;border-color:#334155;}
html.reader-dark .select2-container--default .select2-results__option{color:#e2e8f0;}
html.reader-dark .select2-container--default .select2-search--dropdown .select2-search__field{background:#0b1220;border-color:#334155;color:#e2e8f0;}

/* ===== Fallback utilitas arbitrary-value yang BELUM ter-compile di tailwind.css =====
   (tanpa ini, modal tidak punya tinggi maksimum sehingga tombol close & scroll
   konten panjang—mis. Kamus Alkitab "baal"—tidak berfungsi). */
.max-h-\[94vh\]{max-height:94vh;}
.max-h-\[92vh\]{max-height:92vh;}
.max-h-\[90vh\]{max-height:90vh;}
.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem;}
.z-\[9999\]{z-index:9999;}
.z-\[10000\]{z-index:10000;}
.min-h-\[200px\]{min-height:200px;}
.min-h-\[140px\]{min-height:140px;}

/* Tautan di dalam definisi Kamus Alkitab (key:/strong:/lid:/http) -> biru & bisa diklik */
.dict-content a{color:#0099DA;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.dict-content a:hover{color:#007cb1;}

/* ===== Sorotan kata cocok pada saran "mungkin maksud Anda" ===== */
.ak-hl{background:#fef9c3;color:inherit;border-radius:.2rem;padding:0 .12em;font-weight:600;}
html.reader-dark .ak-hl{background:#854d0e;color:#fde68a;}

/* ===== Toggle "Aktifkan Kamus Alkitab" di halaman Alkitab ===== */
.ak-toggle{position:relative;display:inline-block;width:42px;height:24px;border-radius:9999px;background:#cbd5e1;transition:background .2s ease;flex:none;}
.ak-toggle .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:9999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease;}
.ak-toggle.on{background:#0099DA;}
.ak-toggle.on .knob{transform:translateX(18px);}

/* ===== TTS "Bacakan untukku" (halaman Alkitab) ===== */
.tts-btn.tts-on{background:#0099DA;border-color:#0099DA;color:#fff;}
.tts-btn.tts-on:hover{background:#0086c0;}
.audio-btn.audio-on{background:#0099DA;border-color:#0099DA;color:#fff;}
.audio-btn.audio-on:hover{background:#0086c0;}
#bibleContent li.tts-reading{background:rgba(0,153,218,.10);box-shadow:inset 3px 0 0 #0099DA;border-radius:.4rem;padding-left:.6rem;transition:background .2s ease;}
html.reader-dark #bibleContent li.tts-reading{background:rgba(0,153,218,.20);}
/* (blok Select2 kedua dihapus — sudah digabung ke blok ber-awalan "html" di atas;
   hanya menyisakan lebar minimum container.) */
html .select2-container{min-width:8rem;}

/* ===== Perikop (judul bagian) + referensi paralel di halaman Alkitab ===== */
#bibleContent .pericope-item{list-style:none;margin:1.5rem 0 .35rem;padding:0;}
#bibleContent .pericope-item:first-child{margin-top:0;}
/* Judul perikop: rata tengah, tebal */
#bibleContent .pericope-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.05rem;line-height:1.4;color:#1e293b;margin:0;text-align:center;}
/* Referensi paralel: 1 baris, dipisah separator, biru + garis bawah, bisa diklik */
#bibleContent .pericope-parallels{margin-top:.3rem;font-size:.8rem;line-height:1.7;text-align:center;}
#bibleContent .pericope-parallels .pp{color:#0099DA;border-bottom:1px solid #0099DA;cursor:pointer;text-decoration:none;white-space:nowrap;}
#bibleContent .pericope-parallels .pp:hover{color:#007cb1;border-bottom-color:#007cb1;}
#bibleContent .pericope-parallels .pp-sep{color:#cbd5e1;margin:0 .2rem;}
html.reader-dark #bibleContent .pericope-title{color:#e2e8f0;}
html.reader-dark #bibleContent .pericope-parallels .pp{color:#7dd3fc;border-bottom-color:#7dd3fc;}

/* Kata yang ada di kamus: garis bawah putus-putus, bisa diklik.
   Selektor span.kw lebih spesifik daripada ".verse-item span" (gaya nomor ayat),
   supaya UKURAN/warna/posisi huruf kata TIDAK ikut berubah. */
#bibleContent .verse-item span.kw{
  display:inline;
  margin:0;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  vertical-align:baseline;
  white-space:normal;
  border-bottom:1px dotted #0099DA;
  cursor:pointer;
}
#bibleContent .verse-item span.kw:hover{background:rgba(0,153,218,.10);}
html.reader-dark #bibleContent .verse-item span.kw:hover{background:rgba(0,153,218,.22);}

/* =============================================================
   Halaman Alkitab (bible/index)
   ============================================================= */
/* form controls */
.reader-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;background-size:1.1rem;padding-right:2.1rem;}
/* verse list (injected via AJAX -> styled by CSS, not utilities) */
#bibleContent{list-style:none;margin:0;padding:0;}
#bibleContent .verse-item{padding:.55rem 0;border-bottom:1px solid #f1f5f9;line-height:1.95;font-family:'Lora',Georgia,serif;font-size:1.075rem;color:#1e293b;}
#bibleContent .verse-item:last-child{border-bottom:0;}
#bibleContent .verse-item span{display:inline-block;margin-right:.4rem;font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:600;color:#0099DA;vertical-align:.35em;white-space:nowrap;}
#bibleContent .verse-item{cursor:pointer;transition:background .12s;border-radius:.4rem;}
#bibleContent .verse-item:hover{background:#f8fafc;}
html.reader-dark #bibleContent .verse-item:hover{background:#0b1220;}
/* pager (server-generated <ul class="pager"> ... reused via AJAX) */
#pager .pager{display:flex;align-items:center;justify-content:space-between;list-style:none;margin:1.5rem 0 0;padding:0;}
#pager .pager li{display:inline-flex;}
#pager .pager li a{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:#007cb1;background:#e6f6fc;border:1px solid #cceefa;border-radius:.7rem;padding:.55rem 1.1rem;transition:.15s;text-decoration:none;}
#pager .pager li a:hover{background:#0099DA;color:#fff;border-color:#0099DA;}
#pager .pager li:not(:has(a)){color:#cbd5e1;font-size:.85rem;font-weight:600;padding:.55rem 1.1rem;}

/* =============================================================
   Komentar (rh/index + komponen includes/comments)
   ============================================================= */
/* Comments list (markup from Comments::get, injected via AJAX) */
#commentsWrap .comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;}
#commentsWrap .comment-item{padding:1.1rem 1.25rem;border:1px solid #eef2f6;border-radius:1rem;background:#fff;}
#commentsWrap .comment-head{display:flex;align-items:center;gap:.75rem;}
#commentsWrap .comment-avatar{width:44px;height:44px;border-radius:9999px;object-fit:cover;flex:none;border:2px solid #f1f5f9;}
#commentsWrap .comment-name{font-weight:600;color:#1e293b;font-size:.9rem;line-height:1.2;}
#commentsWrap .comment-meta{font-size:.72rem;color:#94a3b8;margin-top:.15rem;}
#commentsWrap .comment-meta .fa{color:#0099DA;margin-right:.15rem;}
#commentsWrap .comment-body{margin-top:.65rem;color:#475569;line-height:1.65;font-size:.92rem;word-break:break-word;}
#commentsWrap .comment-body p{margin:0 0 .5rem;}
#commentsWrap .comment-actions{margin-top:.7rem;display:flex;gap:.4rem;flex-wrap:wrap;}
#commentsWrap .comment-actions a{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;color:#64748b;cursor:pointer;padding:.32rem .75rem;border-radius:9999px;background:#f8fafc;transition:.15s;}
#commentsWrap .comment-actions a:hover{background:#eef2f6;}
#commentsWrap .comment-actions .linkLike:hover{color:#16a34a;}
#commentsWrap .comment-actions .linkDislike:hover{color:#dc2626;}
#commentsWrap .comment-actions .linkReply:hover{color:#0099DA;}
/* nested replies */
#commentsWrap .comment-replies{margin-top:1rem;margin-left:1.25rem;padding-left:1rem;border-left:2px solid #e2e8f0;display:flex;flex-direction:column;gap:.85rem;}
#commentsWrap .comment-reply{padding:.85rem 1rem;background:#f8fafc;border-color:#e2e8f0;}
#commentsWrap .comment-reply .comment-avatar{width:36px;height:36px;}
/* inline reply form (built in JS) */
#commentsWrap .reply-form{margin-top:.85rem;}
#commentsWrap .reply-form textarea{width:100%;border:1px solid #cbd5e1;border-radius:.6rem;padding:.55rem .75rem;font-size:.85rem;outline:none;}
#commentsWrap .reply-form textarea:focus{border-color:#0099DA;box-shadow:0 0 0 3px rgba(0,153,218,.15);}
#commentsWrap .reply-form button{margin-top:.55rem;display:inline-flex;align-items:center;gap:.4rem;background:#0099DA;color:#fff;font-size:.8rem;font-weight:600;border:none;border-radius:.6rem;padding:.45rem 1rem;cursor:pointer;transition:.15s;}
#commentsWrap .reply-form button:hover{background:#007cb1;}
/* empty state */
#commentsWrap .comment-empty{text-align:center;color:#94a3b8;font-size:.9rem;padding:1.75rem 0;}
#commentsWrap .comment-empty .fa{color:#cbd5e1;margin-right:.35rem;}
/* Avatar inisial (fallback ketika foto komentar kosong / error / 404) */
.comment-avatar-initial{width:44px;height:44px;border-radius:9999px;border:2px solid #f1f5f9;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#0099DA;color:#fff;font-weight:600;font-size:.95rem;text-transform:uppercase;line-height:1;letter-spacing:.02em;}
.comment-reply .comment-avatar-initial{width:36px;height:36px;font-size:.8rem;}
/* Modal sign-in: kontrol tampil/sembunyi tidak bergantung utility Tailwind */
#modalSignIn{display:none;}
#modalSignIn.is-open{display:flex;}

/* =============================================================
   Pengaturan pembaca (includes/reader_settings)
   ============================================================= */
/* ===== Ukuran teks ===== (md = default) */
html.reader-fs-sm [data-reader-text], html.reader-fs-sm [data-reader-text] .verse-item{font-size:.95rem !important;}
html.reader-fs-lg [data-reader-text], html.reader-fs-lg [data-reader-text] .verse-item{font-size:1.22rem !important; line-height:1.9 !important;}
html.reader-fs-xl [data-reader-text], html.reader-fs-xl [data-reader-text] .verse-item{font-size:1.42rem !important; line-height:1.95 !important;}
/* ===== Lebar baca ===== (normal = default) */
html.reader-w-narrow [data-reader-content]{max-width:38rem !important;}
html.reader-w-wide  [data-reader-content]{max-width:62rem !important;}

/* =============================================================
   Halaman lagu (song_page/view)
   ============================================================= */
midi-player{width:100%;}
midi-player::part(control-panel){border-radius:.75rem;background:#f1f5f9;border:1px solid #e2e8f0;}
.song-lyric p{margin:0 0 .85rem;}
.song-lyric p:last-child{margin-bottom:0;}
.song-lyric ul,.song-lyric ol{margin:.5rem 0 .85rem 1.25rem;}
.song-lyric strong,.song-lyric b{font-weight:600;}

/* =============================================================
   Bible Verse Art studio (bva_page/index)
   ============================================================= */
#bvaStage{position:relative; width:100%; user-select:none; touch-action:none; background:#0f172a; overflow:hidden; border-radius:.75rem;}
#bvaStage img.bg{display:block; width:100%; height:auto; pointer-events:none;}
#bvaOverlay{position:absolute; inset:0; background:#000; pointer-events:none;}
#bvaText{position:absolute; box-sizing:border-box; padding:.25rem; cursor:move; outline:2px dashed rgba(255,255,255,.85); white-space:pre-wrap; word-break:break-word; overflow:hidden;}
#bvaText .h{position:absolute; width:14px; height:14px; background:#fff; border:2px solid #0099DA; border-radius:3px;}
#bvaText .h.nw{left:-7px; top:-7px; cursor:nwse-resize;}
#bvaText .h.ne{right:-7px; top:-7px; cursor:nesw-resize;}
#bvaText .h.sw{left:-7px; bottom:-7px; cursor:nesw-resize;}
#bvaText .h.se{right:-7px; bottom:-7px; cursor:nwse-resize;}
.bva-thumb{aspect-ratio:4/3; object-fit:cover;}

/* =============================================================
   Cerita Alkitab (bible_stories_page)
   ============================================================= */
.book-cover{aspect-ratio:3/4;object-fit:cover;}
/* slider / fullscreen (bible_stories_page/view) */
#bsSlider{transition:height .3s ease;}
#bsTrack .bs-slide{align-self:flex-start;}
#bsStage:fullscreen{background:#0f172a;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:1rem;overflow:auto;}
#bsStage:fullscreen #bsSlider{width:100%;max-width:1200px;height:auto;background:transparent;border-color:transparent;box-shadow:none;}
#bsStage:fullscreen .bs-slide img{max-height:78vh;}
#bsStage:fullscreen #bsPrev, #bsStage:fullscreen #bsNext{z-index:20;}
#bsStage:fullscreen #bsDesc{background:transparent!important;box-shadow:none!important;border-color:transparent!important;margin:1.25rem auto 0!important;max-width:48rem;width:100%;}
#bsStage:fullscreen .bs-desc{color:#e5e7eb;text-align:center;font-size:1.05rem;line-height:1.75;}
#bsStage:fullscreen .bs-text{color:#cbd5e1;text-align:center;}
#bsStage:fullscreen #bsCount{color:#cbd5e1;}
#bsStage:-webkit-full-screen{background:#0f172a;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:1rem;overflow:auto;}
#bsStage:-webkit-full-screen #bsSlider{width:100%;max-width:1200px;height:auto;background:transparent;border-color:transparent;box-shadow:none;}
#bsStage:-webkit-full-screen .bs-slide img{max-height:78vh;}
#bsStage:-webkit-full-screen #bsPrev, #bsStage:-webkit-full-screen #bsNext{z-index:20;}
#bsStage:-webkit-full-screen #bsDesc{background:transparent!important;box-shadow:none!important;border-color:transparent!important;margin:1.25rem auto 0!important;max-width:48rem;width:100%;}
#bsStage:-webkit-full-screen .bs-desc{color:#e5e7eb;text-align:center;font-size:1.05rem;line-height:1.75;}
#bsStage:-webkit-full-screen .bs-text{color:#cbd5e1;text-align:center;}
#bsStage:-webkit-full-screen #bsCount{color:#cbd5e1;}

/* =============================================================
   Halaman legal (home/privacy_policy)
   ============================================================= */
.legal-content{color:#475569;line-height:1.8;}
.legal-content p{margin:0 0 1rem;}
.legal-content h3{font-family:'Poppins',sans-serif;font-weight:700;color:#1e293b;font-size:1.15rem;margin:2rem 0 .75rem;padding-top:.5rem;}
.legal-content ul{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.legal-content ul li{position:relative;padding-left:1.6rem;}
.legal-content ul li:before{content:"\2713";position:absolute;left:0;top:.05rem;color:#0099DA;font-weight:700;}
.legal-content a{color:#007cb1;text-decoration:underline;}
.legal-content a:hover{color:#005e86;}

/* =============================================================
   Mode malam (global) — includes/theme_dark
   ============================================================= */
html.reader-dark body{background:#0f172a !important; color:#cbd5e1;}
html.reader-dark .bg-slate-50{background:#0f172a !important;}
html.reader-dark .bg-slate-100{background:#1e293b !important;}
/* hover state agar kontras di tema gelap */
html.reader-dark .hover\:bg-slate-50:hover, html.reader-dark .hover\:bg-slate-100:hover, html.reader-dark .hover\:bg-slate-200:hover{background-color:#334155 !important;}
html.reader-dark .hover\:bg-brand-50:hover{background-color:#0b3a4f !important;}
html.reader-dark .bg-white, html.reader-dark .bg-white\/95{background:#1e293b !important;}
html.reader-dark .border-slate-200, html.reader-dark .border-slate-100{border-color:#334155 !important;}
html.reader-dark .text-slate-900, html.reader-dark .text-slate-800, html.reader-dark .text-slate-700{color:#e2e8f0 !important;}
html.reader-dark .text-slate-600, html.reader-dark .text-slate-500, html.reader-dark .text-slate-400{color:#94a3b8 !important;}
html.reader-dark .bg-brand-50{background:#0b3a4f !important;}
html.reader-dark .border-brand-100{border-color:#155e75 !important;}
html.reader-dark .text-brand-700{color:#7dd3fc !important;}
html.reader-dark .bg-amber-50{background:#3b2f0b !important;}
html.reader-dark .text-amber-700, html.reader-dark .text-amber-600{color:#fcd34d !important;}
html.reader-dark blockquote.bg-slate-50, html.reader-dark .rounded-r-xl.bg-slate-50{background:#0b1220 !important;}
html.reader-dark input[type=text], html.reader-dark input[type=email], html.reader-dark input[type=password], html.reader-dark textarea, html.reader-dark select, html.reader-dark .reader-select{background:#1e293b !important; border-color:#334155 !important; color:#e2e8f0 !important;}
html.reader-dark #bibleContent .verse-item{color:#e2e8f0; border-color:#334155;}
html.reader-dark #bibleContent .verse-item:hover{background:#0b1220;}
html.reader-dark #commentsWrap .comment-item{background:#1e293b !important; border-color:#334155 !important;}
html.reader-dark #commentsWrap .comment-reply{background:#0f172a !important;}
html.reader-dark #commentsWrap .comment-name{color:#e2e8f0 !important;}
html.reader-dark #commentsWrap .comment-body, html.reader-dark #commentsWrap .comment-actions a{color:#cbd5e1 !important;}