:root {
    --primary-color: #ff5100;
    --dark-bg: #121212;
    --light-dark-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --text-muted-color: #888;
}

/* Light theme overrides */
.theme-light {
    --primary-color: #007bff;
    --dark-bg: #ffffff;
    --light-dark-bg: #f8f9fa;
    --text-color: #111;
    --text-muted-color: #666;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    font-family: 'Nunito', sans-serif;
}

.navbar {
    background-color: var(--light-dark-bg);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.theme-toggle {
    border: none;
    background: transparent;
    color: var(--text-color);
}

.search-container { margin-top: 4rem; margin-bottom: 2rem; }
.search-box { position: relative; }
.search-input { background-color: var(--light-dark-bg); border: 1px solid #444; color: var(--text-color); border-radius: 50px; padding: 0.75rem 1.5rem 0.75rem 3rem; transition: all 0.18s ease; }
.search-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(255,81,0,0.08); outline: none; }
.search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted-color); pointer-events: none; }

.popular-tags { margin-top: 12px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.popular-tag-item { background-color: var(--light-dark-bg); border:1px solid rgba(0,0,0,0.06); color: var(--text-muted-color); padding:6px 12px; border-radius:18px; font-size:0.86rem; text-decoration:none; }
.popular-tag-item:hover{ color:var(--primary-color); border-color:var(--primary-color); background:rgba(255,81,0,0.04); }
.popular-label{ width:100%; text-align:center; font-size:0.82rem; color:var(--text-muted-color); margin-bottom:6px; }

.result-summary{ color:var(--text-muted-color); margin-bottom:1.25rem; }
.result-summary strong{ color:var(--primary-color); }
.alert-recommendation{ background: rgba(255,81,0,0.06); border:1px solid var(--primary-color); color:var(--text-color); border-radius:10px; padding:12px; margin-bottom:18px; text-align:center; }

.video-card{ background:var(--light-dark-bg); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; height:100%; border:1px solid transparent; }
.video-card:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,0.25); }
.video-thumbnail{ position:relative; width:100%; padding-bottom:56.25%; background:#333 }
.video-thumbnail img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover }
.video-info{ padding:12px; display:flex; flex-direction:column; flex:1 }
.video-title{ font-size:0.98rem; font-weight:600; margin-bottom:6px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.video-meta{ font-size:0.8rem; color:var(--text-muted-color); margin-top:auto }
.video-actions{ padding:10px; display:flex; gap:6px }
.btn-action{ display:flex; align-items:center; justify-content:center; gap:6px; font-weight:600; flex:1 }
.btn-play{ background:var(--primary-color); border-color:var(--primary-color); color:#fff }
.btn-play:hover{ filter:brightness(.95) }

.placeholder-message{ min-height:40vh; display:flex; align-items:center; justify-content:center; text-align:center }
.placeholder-message h2{ color:var(--text-muted-color); font-weight:600 }
.placeholder-message i{ font-size:3.5rem; margin-bottom:10px; color:#444 }

.pagination .page-link{ background:var(--light-dark-bg); border-color:#ddd; color:var(--text-color); margin:0 4px }
.pagination .page-item.active .page-link{ background:var(--primary-color); border-color:var(--primary-color); color:#fff }
.pagination .page-item.disabled .page-link{ opacity:.6 }

.footer{ background:var(--light-dark-bg); padding:2rem 0; margin-top:3.5rem; font-size:0.9rem; border-top:1px solid rgba(0,0,0,0.06) }
.footer .menu a{ color:var(--text-muted-color); text-decoration:none; margin:0 0.75rem }

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

@media (max-width:576px){ .pagination .page-link{ padding:0.375rem 0.5rem; font-size:0.875rem } }