/* CSS global tema. Nilai runtime diatur oleh assets/js/theme.js. */
:root {
    --tc: #00d4ff;
    --tc-lo: rgba(0,212,255,.2);
    --tc-sh: rgba(0,212,255,.35);
    --gold: #ffd700;
    --bg: #0a0a0a;
    --bg-soft: #1a1a1a;
    --green: #00ff66;
    --green-lo: rgba(0,255,102,.18);
    --danger: #ff3333;
    --border: 1px solid var(--tc);
    --border-soft: 1px solid var(--tc-lo);
    --border-green: 1px solid var(--green);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-full: 999px;
    --panel-radius: 14px;
    --blur: 8px;
    --content-width: 640px;
    --fast: .15s ease;
    --normal: .25s ease;
    --slow: .35s ease;
    --glow-sm: 0 0 8px var(--tc-sh);
    --glow-lg: 0 0 8px var(--tc-sh), 0 0 16px var(--tc-sh);
    --running-bg: #000;
    --running-color: var(--tc);
    --z-overlay: 10;
    --z-header: 1000;
    --z-admin: 1010;
    --z-marquee: 3000;
    --z-music: 4000;
    --z-bottom: 5000;
    --z-panel-chapter: 6000;
    --z-panel-theme: 6010;
    --z-panel-otak: 6020;
    --z-panel-comment: 6030;
    --z-loading: 9998;
    --z-modal: 9999;
    --z-toast: 10000;
    --hh: 55px;
    --bb: 62px;
    --fh: 53px;
    --mt: 20px;
    --mb: 120px;
    --fs: 11px;
    --panel-op: .85;
    --chapter-width: 280px;
    --chapter-top: 0px;
    --comment-height: 88px;
    --text-align: justify;
}
/* ==========================================================
   1. VARIABEL UTAMA
   ========================================================== */

/* ==========================================================
   2. RESET & DASAR HALAMAN
   ========================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { background: var(--bg); }
body {
    font-family: 'Segoe UI', Georgia, 'Lora', serif;
    font-size: var(--fs); color: #f1f1f1;
    overflow-x: hidden; min-height: 100vh;
    padding-top: var(--safe-top);
    padding-bottom: 0;
    line-height: 1.6;
    text-align: var(--text-align, justify);
}
:focus-visible { outline:2px solid var(--tc); outline-offset:2px; border-radius:var(--radius-sm); }

/* ==========================================================
   3. OVERLAY & RUNNING TEXT
   ========================================================== */
#ov { position:fixed; inset:0; pointer-events:none; z-index:var(--z-overlay); opacity:0; background:rgba(0,0,0,.85); transition:opacity var(--slow); }
#ov.show { opacity: var(--panel-op); pointer-events: auto; }

#rtt {
    position:fixed; top:0; left:0; width:100%;
    background: var(--running-bg);
    border-bottom: 2px solid var(--tc);
    padding: 7px 0; z-index: var(--z-marquee);
    display:none; overflow:hidden; white-space:nowrap; pointer-events:none;
}
#rtt.show { display:block; }
#rtt .marquee-track {
    display:inline-block; padding-left:100%;
    color: var(--running-color); font-weight:bold; font-size:11px; text-shadow:var(--glow-sm);
    animation: marq 15s linear infinite;
}
@keyframes marq { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

/* ==========================================================
   4. HEADER + NAV
   ========================================================== */
header {
    position:fixed; top:0; left:0; width:100%; height:var(--hh);
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border-bottom: var(--border-soft);
    display:flex; align-items:center; padding:0 12px; gap:10px; z-index:var(--z-header);
}
.nbtn { color:var(--tc); border:var(--border); padding:6px 12px; border-radius:var(--radius-sm); font-size:13px; background:none; text-decoration:none; font-weight:bold; cursor:pointer; white-space:nowrap; transition:var(--fast); }
.nbtn:active { background:var(--tc-lo); transform:scale(.97); }
.mqw { flex:1; overflow:hidden; }
nav { max-width:700px; height:100%; margin:0 auto; display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; padding:0 12px; }
nav a { color:#aaa; text-decoration:none; font-size:11px; font-weight:bold; transition:var(--fast); }
nav a:hover, nav a.active { color:var(--tc); text-shadow:var(--glow-sm); }

/* ==========================================================
   5. BOTTOM NAV
   ========================================================== */
.bbar { position:fixed; bottom:0; left:0; width:100%; height:var(--bb); background:#000; border-top:var(--border); display:flex; justify-content:space-around; align-items:center; z-index:var(--z-bottom); padding:0 6px; }
.ibtn { background:none; border:2px solid var(--tc); color:var(--tc); padding:6px 2px; cursor:pointer; border-radius:var(--radius-sm); min-width:52px; min-height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; font-weight:bold; transition:var(--fast); text-decoration:none; font-family:inherit; }
.ibtn:active { background:var(--tc); color:#000; transform:scale(.95); }
.ibtn i { font-size:15px; pointer-events:none; }
.ibtn span { font-size:9px; pointer-events:none; }
#btn-otak { display:none; border-color:var(--green); color:var(--green); }
#btn-otak.show { display:flex; }

/* ==========================================================
   6. SEMUA PANEL
   ========================================================== */
#chapter-panel {
    position: fixed;
    top: calc(var(--hh) + var(--chapter-top));
    right: calc(var(--chapter-width) * -1.1);
    width: var(--chapter-width);
    height: calc(100% - var(--hh) - var(--chapter-top));
    background: var(--panel-bg);
    border-left: var(--border);
    z-index: var(--z-panel-chapter);
    transition: right var(--slow);
    overflow-y: auto;
    padding: 12px;
    pointer-events: none;
    border-radius: var(--panel-radius) 0 0 var(--panel-radius);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
}
#chapter-panel.open { right: 0; pointer-events: auto; }

#theme-panel {
    position:fixed; bottom:-200%; left:0; width:100%; max-height:65%;
    background:var(--panel-bg); border-top:3px solid var(--tc);
    z-index:var(--z-panel-theme); transition:bottom var(--slow);
    overflow-y:auto; padding:14px 16px calc(var(--bb) + 20px);
    pointer-events:none; border-radius:var(--panel-radius) var(--panel-radius) 0 0;
    backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
}
#theme-panel.open { bottom: var(--bb); pointer-events: auto; }

#panel-otak {
    position:fixed; bottom:-200%; left:0; width:100%; max-height:75%;
    background:var(--panel-bg); border-top:3px solid var(--green);
    z-index:var(--z-panel-otak); transition:bottom var(--slow);
    overflow-y:auto; padding:14px 16px calc(var(--bb) + 20px);
    pointer-events:none; border-radius:var(--panel-radius) var(--panel-radius) 0 0;
    backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
}
#panel-otak.open { bottom: var(--bb); pointer-events: auto; }

#comment-panel {
    position:fixed; bottom:-200%; left:0; width:100%;
    height: calc(var(--comment-height) * 1vh - var(--bb));
    background:var(--panel-bg); border-top:2px solid var(--tc);
    z-index:var(--z-panel-comment); transition:bottom var(--slow);
    display:flex; flex-direction:column; pointer-events:none;
    border-radius:var(--panel-radius) var(--panel-radius) 0 0;
    backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
}
#comment-panel.open { bottom: var(--bb); pointer-events: auto; }

#theme-panel::-webkit-scrollbar,
#panel-otak::-webkit-scrollbar,
#comment-panel .p-body::-webkit-scrollbar,
#chapter-panel::-webkit-scrollbar { width:6px; }
#theme-panel::-webkit-scrollbar-thumb,
#panel-otak::-webkit-scrollbar-thumb,
#comment-panel .p-body::-webkit-scrollbar-thumb,
#chapter-panel::-webkit-scrollbar-thumb { background:var(--tc-lo); border-radius:var(--radius-full); }

/* ==========================================================
   7. ISI PANEL
   ========================================================== */
.panel-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; margin-bottom:10px; border-bottom:2px solid var(--tc); }
.panel-title { color:var(--tc); font-size:15px; text-shadow:var(--glow-lg); }
#panel-otak .panel-title { color:var(--green); text-shadow:0 0 8px var(--green-lo), 0 0 16px var(--green-lo); }
.cls-btn { cursor:pointer; font-size:22px; color:var(--tc); padding:0 6px; user-select:none; transition:var(--fast); }
.cls-btn:hover { transform:scale(1.15); text-shadow:var(--glow-sm); }
#panel-otak .cls-btn { color:var(--green); }

.ch-sec { color:var(--tc); font-size:11px; font-weight:bold; margin:12px 0 6px; opacity:.8; text-transform:uppercase; letter-spacing:.5px; }
.clist { display:flex; flex-direction:column; gap:6px; }
.ci { display:block; padding:9px 10px; background:rgba(0,0,0,.7); border:var(--border); color:var(--tc); text-decoration:none; border-radius:var(--radius-sm); font-size:12px; text-align:center; transition:var(--fast); }
.ci:active, .ci.active { background:var(--tc); color:#000; font-weight:bold; transform:scale(.98); }
.ci.cs { opacity:.4; cursor:not-allowed; }
.ci.cs::after { content:" [Coming Soon]"; font-size:9px; }

.tgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:10px 0; }
.tdot { width:44px; height:44px; border-radius:50%; border:3px solid #fff; cursor:pointer; margin:0 auto; transition:var(--normal); }
.tdot:active, .tdot.active { transform:scale(1.15); border-width:4px; box-shadow:var(--glow-sm); }

label { color:var(--tc); display:block; margin-top:12px; font-weight:bold; font-size:12px; }
.olab { color:var(--green); display:block; margin-top:12px; font-weight:bold; font-size:12px; }
.vd { color:var(--green); text-align:center; font-size:16px; font-weight:bold; margin:6px 0; font-variant-numeric:tabular-nums; }
input[type=range] { width:100%; height:26px; margin:6px 0; cursor:pointer; accent-color:var(--tc); }
input[type=text], input[type=number], input[type=password], select, textarea { width:100%; padding:8px 10px; background:var(--bg-soft); border:var(--border); color:#fff; margin:6px 0; border-radius:var(--radius-md); font-size:12px; font-family:inherit; transition:var(--fast); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--tc); box-shadow:0 0 0 2px var(--tc-lo); }
textarea { resize:vertical; min-height:60px; }

.pbtn { width:100%; padding:12px; border:none; font-weight:bold; font-size:13px; cursor:pointer; margin-top:8px; border-radius:var(--radius-md); transition:var(--fast); font-family:inherit; }
.pbtn:active { transform:scale(.97); }
.pb-tc { background:var(--tc); color:#000; }
.pb-g  { background:var(--green); color:#000; }
.pb-r  { background:var(--danger); color:#fff; }

/* ==========================================================
   8. KOMPONEN KOMENTAR
   ========================================================== */
.p-hdr { padding:12px 15px; border-bottom:var(--border); display:flex; justify-content:space-between; align-items:center; color:var(--tc); flex-shrink:0; font-weight:bold; }
.p-body { flex:1; overflow-y:auto; padding:12px; }
.ki { border:var(--border-soft); padding:10px; margin-bottom:8px; background:rgba(0,0,0,.75); border-radius:var(--radius-md); }
.kh { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; gap:8px; }
.kn { color:var(--tc); font-size:10px; font-weight:bold; }
.kw { font-size:8px; color:#666; white-space:nowrap; }
.kt { font-size:11px; color:#e5e5e5; opacity:.9; margin:4px 0; word-wrap:break-word; }
.ka { display:flex; gap:12px; align-items:center; margin-top:7px; flex-wrap:wrap; }
.blk { background:none; border:none; color:var(--tc); opacity:.5; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:4px; padding:0; transition:var(--fast); font-family:inherit; }
.blk.active { opacity:1; transform:scale(1.1); color:var(--gold); }
.rbtn { background:none; border:1px solid rgba(255,255,255,.15); color:var(--tc); opacity:.7; font-size:9px; padding:3px 8px; border-radius:var(--radius-sm); cursor:pointer; text-transform:uppercase; transition:var(--fast); font-family:inherit; }
.rbtn:hover { opacity:1; border-color:var(--tc); }
.ri { margin:7px 0 0 13px; border-left:2px solid var(--tc); padding:6px 8px; background:rgba(0,0,0,.45); font-size:10px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.ri b { color:var(--tc); }
.cf { padding:12px; border-top:var(--border); background:rgba(0,0,0,.95); flex-shrink:0; }
.cf input, .cf textarea { width:100%; background:rgba(0,0,0,.8); color:#fff; border:var(--border); padding:9px 10px; margin-bottom:6px; font-size:11px; border-radius:var(--radius-sm); font-family:inherit; }
.cf textarea { resize:none; height:56px; }
.sbtn { width:100%; background:var(--tc); color:#000; border:none; padding:11px; font-weight:bold; font-size:12px; cursor:pointer; border-radius:var(--radius-sm); transition:var(--fast); font-family:inherit; }
.sbtn:active { transform:scale(.98); }

/* ==========================================================
   9. MUSIC BOX
   ========================================================== */
.music-box { 
    background:rgba(0,0,0,.85); 
    border:var(--border-soft); 
    padding:12px 16px; 
    border-radius:var(--panel-radius); 
    text-align:center; 
    width:240px; 
    z-index:var(--z-music); 
}
.music-box:not(.mpos-static) { 
    position:fixed; 
    bottom:calc(var(--bb) + 12px); 
    left:50%; 
    transform:translateX(-50%); 
}
.music-box.mpos-static { 
    position:static; 
    transform:none; 
    margin:18px auto 0; 
}
.music-box.mpos-left:not(.mpos-static)  { left:14px;  right:auto; transform:none; }
.music-box.mpos-right:not(.mpos-static) { right:14px; left:auto;  transform:none; }
.music-box.mpos-center:not(.mpos-static){ left:50%;  right:auto; transform:translateX(-50%); }
.music-box.mpos-left.mpos-static  { margin-left:18px;  margin-right:auto; }
.music-box.mpos-right.mpos-static { margin-left:auto;  margin-right:18px; }
.music-box.mpos-center.mpos-static{ margin-left:auto;  margin-right:auto; }
.music-box h3 { font-size:14px; color:#fff; margin-bottom:2px; }
.music-box p  { font-size:11px; opacity:.6; margin:0 0 8px; color:#ddd; }
.controls { display:flex; justify-content:center; align-items:center; gap:4px; }
.controls button { background:none; border:none; color:var(--tc); font-size:20px; margin:0 4px; cursor:pointer; padding:4px 8px; border-radius:var(--radius-full); transition:var(--fast); }
.controls button:hover { background:var(--tc-lo); }

/* ==========================================================
   10. FOOTER — DALAM KOTAK RAPI
   ========================================================== */
.site-footer {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 10px 120px 10px;
}

.footer-box {
    max-width: 92%;
    margin: 0 auto;
    border: 1px solid var(--tc);
    border-radius: 8px;
    padding: 20px 15px;
    background: rgba(0, 0, 0, 0.4);
}

.visitor-tag {
    display: block;
    font-size: 11px;
    color: #aaaaaa;
    margin-bottom: 15px;
    text-align: center;
}

.footer-social-mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 12px;
    column-gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 auto 20px auto;
}

.footer-social-mini a {
    color: var(--tc);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    display: block;
    white-space: nowrap;
    transition: color 0.2s;
}
.footer-social-mini a:hover {
    color: var(--gold);
}

.footer-social-mini li:nth-child(odd) {
    text-align: left;
    padding-left: 5px;
}
.footer-social-mini li:nth-child(even) {
    text-align: right;
    padding-right: 5px;
}

.donation-mini {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}
.donation-mini .donate {
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    color: #ffffff !important;
}
.donation-mini .donate.saweria {
    background-color: #f39c12;
}
.donation-mini .donate.trakteer {
    background-color: #be1e2d;
}

.footer-clock {
    margin: 2px auto 14px;
    text-align: center;
    color: var(--tc);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
}

.cp-mini {
    text-align: center;
    border-top: 1px solid #333333;
    padding-top: 12px;
}
.cp-mini .copyright {
    color: #bbbbbb !important;
    font-size: 10px;
    margin: 0;
}
.cp-mini .slogan {
    margin: 5px 0 2px 0;
    font-style: italic;
    color: #888888;
    font-size: 11px;
}
.cp-mini .brand-name {
    margin: 0;
    font-size: 18px;
    color: var(--gold);
    font-weight: bold;
}

@media (max-width: 360px) {
    .footer-box {
        max-width: 96%;
        padding: 15px 10px;
    }
    .footer-social-mini a {
        font-size: 10px;
    }
}

/* ==========================================================
   11. ANIMASI & BANNER ADMIN
   ========================================================== */
.dpulse { display:inline-block; width:8px; height:8px; background:#50FFB1; border-radius:50%; animation:dp 2s infinite; }
@keyframes dp { 0%,100%{opacity:1} 50%{opacity:.35} }
.liked-active { animation:starPop .4s ease-out forwards; color:var(--gold)!important; }
@keyframes starPop { 0%{transform:scale(1)} 50%{transform:scale(1.5);filter:drop-shadow(0 0 10px var(--gold))} 100%{transform:scale(1.15)} }
.reveal { opacity:0; transform:translateY(14px); animation:fadeUp .5s ease forwards; }
@keyframes fadeUp { to{opacity:1; transform:translateY(0)} }

#admin-banner {
    display:none;
    position:fixed; top:0; left:0; width:100%;
    height:32px; box-sizing:border-box;
    background:#041a04; border-bottom:var(--border-green);
    padding:5px 12px; color:var(--green);
    font-size:10px; font-weight:bold; z-index:var(--z-admin);
    text-align:center; letter-spacing:.5px;
}
#admin-banner.show { display:block; }

/* ==========================================================
   12. HELPER UMUM
   ========================================================== */
.wrap, #main-wrap, main {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-bottom: 10px;
}
.clearfix::after { content:""; display:table; clear:both; }
.hidden, [hidden] { display:none !important; }

/* ==========================================================
   13. SOCIAL PANEL HALAMAN UTAMA
   ========================================================== */
.social-panel{
    max-width:var(--content-width);
    margin:25px auto;
    padding:15px;
}
.social-header{
    text-align:center;
    margin-bottom:18px;
}
.social-header h2{
    color:var(--tc);
    font-size:18px;
    margin-bottom:6px;
    text-shadow:var(--glow-sm);
}
.social-header p{
    color:#aaa;
    font-size:12px;
}
.social-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}
.social-card{
    display:flex;
    align-items:center;
    gap:15px;
    padding:14px;
    text-decoration:none;
    background:rgba(0,0,0,.65);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    transition:.25s;
}
.social-card:hover{
    transform:translateY(-2px);
    border-color:var(--tc);
    box-shadow:0 0 12px var(--tc-lo);
}
.social-card .icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    flex-shrink:0;
    font-size:24px;
    color:#fff;
}
.social-card .info{
    flex:1;
}
.social-card .info h3{
    font-size:14px;
    color:#fff;
    margin-bottom:3px;
}
.social-card .info span{
    font-size:11px;
    color:#aaa;
}

.facebook .icon  { background:#1877F2; }
.youtube .icon   { background:#FF0000; }
.instagram .icon {
    background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);
}
.tiktok .icon    { background:#000; border:2px solid #25F4EE; }

@media (min-width:700px){
    .social-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================
   14. PAGE BANNER (digabung dari banner.php)
   ========================================================== */
.page-banner{
    position:relative;
    width:100%;
    height:260px;
    overflow:hidden;
    border-bottom:2px solid var(--gold,#D4AF37);
}
.banner-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transform:scale(1.08);
}
.banner-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(5,10,18,.35),
        rgba(5,10,18,.85)
    );
}
.banner-content{
    position:relative;
    z-index:5;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
}
.banner-line{
    width:120px;
    height:2px;
    background:#D4AF37;
    margin:10px 0;
    box-shadow:0 0 10px #D4AF37;
}
.banner-content h1{
    margin:0;
    font-size:34px;
    color:#D4AF37;
    text-shadow:0 0 15px rgba(212,175,55,.6);
}
.banner-content h2{
    margin:8px 0;
    color:white;
    font-size:18px;
}
.banner-content p{
    max-width:650px;
    color:#ddd;
    line-height:1.7;
    font-size:14px;
}
@media(max-width:700px){
    .page-banner{
        height:220px;
    }
    .banner-content h1{
        font-size:26px;
    }
    .banner-content h2{
        font-size:15px;
    }
    .banner-content p{
        font-size:13px;
    }
}