:root{
  --primary:#ff0033;
  --primary-2:#cc0029;
  --bg-dark:#050505;
  --surface:#121212;
  --surface-2:#1a1a1a;
  --border:#2a2a2a;
  --text-main:#ffffff;
  --text-muted:#a0a0a0;
}

/* Light theme */
.theme-light{ --primary:#0066ff; --bg-dark:#ffffff; --surface:#ffffff; --surface-2:#f5f6f8; --border:#e6e9ee; --text-main:#111; --text-muted:#666 }

body{ background:var(--bg-dark); color:var(--text-main); font-family:'Outfit',sans-serif; overflow-x:hidden }
.navbar{ background:rgba(5,5,5,0.9); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); padding:12px 0 }
.navbar-brand{ font-weight:700; color:var(--text-main)!important; font-size:1.25rem; display:flex; align-items:center; gap:8px }
.navbar-brand i{ color:var(--primary); font-size:1.35rem }
.theme-toggle{ background:transparent; border:0; color:var(--text-main) }

/* Light-theme specific fixes to override Bootstrap utility classes that expect dark navbars */
.theme-light .navbar{ background:rgba(255,255,255,0.95); border-bottom:1px solid var(--border) }
.theme-light .navbar .navbar-brand{ color:var(--text-main)!important }
.theme-light .navbar .navbar-brand i{ color:var(--primary) }
.theme-light .btn-outline-light{ color:var(--text-main); border-color:var(--border); background:transparent }
.theme-light .btn-outline-light:hover{ background:var(--primary); color:#fff; border-color:var(--primary) }
.theme-light .sticky-telegram{ background:var(--primary) }

.player-wrapper{ position:relative; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 0 40px rgba(0,0,0,0.2); border:1px solid var(--border); margin-bottom:18px }
.ratio-16x9{ --bs-aspect-ratio:56.25% }

.server-controls{ background:var(--surface); padding:12px; border-radius:10px; border:1px solid var(--border); display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.btn-server{ background:transparent; border:1px solid var(--border); color:var(--text-muted); padding:8px 14px; border-radius:8px; font-size:.9rem; transition:all .18s; display:inline-flex; gap:8px; align-items:center }
.btn-server.active{ background:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.25) }

.info-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:18px }
.video-title{ font-size:1.3rem; font-weight:700; margin-bottom:10px; line-height:1.3; overflow-wrap:break-word }
.meta-tags{ display:flex; gap:10px; color:var(--text-muted); flex-wrap:wrap }
.meta-item{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.03); padding:5px 10px; border-radius:18px }

.btn-download-premium{ background:linear-gradient(135deg,var(--surface-2),var(--surface)); border:1px solid var(--border); color:var(--text-main); width:100%; padding:12px; border-radius:10px; display:flex; justify-content:space-between; align-items:center; text-decoration:none }
.btn-download-premium:hover{ border-color:var(--primary); transform:translateY(-2px) }

.section-title{ font-size:1.05rem; font-weight:700; margin-bottom:14px; border-left:4px solid var(--primary); padding-left:12px; display:flex; align-items:center }
.video-card{ background:var(--surface); border-radius:12px; overflow:hidden; display:block; border:1px solid transparent; transition:all .2s }
.video-card:hover{ transform:translateY(-6px); box-shadow:0 10px 30px rgba(0,0,0,0.45) }
.thumb-wrapper{ position:relative; padding-top:56.25% }
.thumb-wrapper img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s }
.video-card:hover .thumb-wrapper img{ transform:scale(1.05) }
.play-icon-overlay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); width:44px; height:44px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .18s }
.video-card:hover .play-icon-overlay{ transform:translate(-50%,-50%) scale(1) }
.card-body{ padding:12px }
.card-title{ font-size:.95rem; font-weight:600; color:var(--text-main); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card-meta{ color:var(--text-muted); font-size:.8rem }

.ad-spot{ background:#000; border:1px dashed #333; border-radius:8px; padding:10px; text-align:center; margin:16px 0; min-height:90px; display:flex; align-items:center; justify-content:center }
.sticky-telegram{ position:fixed; bottom:22px; right:22px; width:52px; height:52px; background:#0088cc; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 6px 18px rgba(0,136,204,0.3); z-index:999; text-decoration:none }

#iklan-popup-overlay{ position:fixed; inset:0; z-index:99999; display:none }

@media(max-width:576px){ .navbar-brand{ font-size:1rem } .video-title{ font-size:1.05rem } }