/* =============================================================
   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;}

/* 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;}

/* =============================================================
   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;}