/* ============================================
   COC Komputer Custom Dark Theme Override
   ============================================ */

/* Force dark mode colors globally */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --vr-color-white: #ffffff;
    --vr-gray-50: #1a2332;
    --vr-gray-100: #151c26;
    --vr-gray-150: rgba(255,255,255,0.06);
    --vr-gray-200: #1a2332;
    --vr-gray-300: #5a6b82;
    --vr-gray-400: #8b9ab5;
    --vr-gray-500: #e2e8f0;
    --vr-gray-600: #e2e8f0;
    --vr-gray-700: #e2e8f0;
    --vr-gray-800: #151c26;
    --vr-gray-900: #e2e8f0;
    --vr-gray-950: #0a0e14;
    
    /* Mag accents */
    --mag-accent: #FF6B35;
    --mag-bg: #0a0e14;
    --mag-surface: #111820;
}

body {
    background-color: var(--mag-bg) !important;
    color: var(--vr-gray-900) !important;
}

/* Header & Top Bar */
.top-bar {
    background: linear-gradient(90deg, var(--mag-accent), #e04e1a) !important;
    color: #fff !important;
}

.top-bar .top-menu li a {
    color: #fff !important;
}

.header {
    background-color: var(--mag-surface) !important;
    border-bottom: 1px solid var(--vr-gray-150) !important;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--vr-gray-500) !important;
    font-weight: 600;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--mag-accent) !important;
}

/* Post Cards */
.post-item {
    background-color: var(--vr-gray-100) !important;
    border: 1px solid var(--vr-gray-150) !important;
    border-radius: 10px !important;
}

.post-item:hover {
    background-color: var(--vr-gray-200) !important;
}

.post-item .title a {
    color: var(--vr-gray-900) !important;
}

.post-item .title a:hover {
    color: var(--mag-accent) !important;
}

.post-item .post-meta a {
    color: var(--vr-gray-400) !important;
}

.category-label {
    background-color: var(--mag-accent) !important;
    color: #fff !important;
}

/* Sidebar Widgets */
.widget {
    background-color: var(--vr-gray-100) !important;
    border: 1px solid var(--vr-gray-150) !important;
    border-radius: 10px !important;
}

.widget-title {
    color: var(--vr-gray-900) !important;
    border-bottom: 2px solid var(--mag-accent) !important;
}

/* Footer */
footer {
    background-color: var(--mag-surface) !important;
    border-top: 1px solid var(--vr-gray-150) !important;
}

footer .footer-widget-title {
    color: #fff !important;
}

footer .footer-links a {
    color: var(--vr-gray-400) !important;
}

footer .footer-links a:hover {
    color: var(--mag-accent) !important;
}

/* Specific Article Overrides */
.post-content h1, .post-content h2, .post-content h3 {
    color: #fff !important;
}

.post-text {
    color: var(--vr-gray-500) !important;
}

.btn-primary, .btn-custom {
    background-color: var(--mag-accent) !important;
    border-color: var(--mag-accent) !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-custom:hover {
    background-color: #e04e1a !important;
    border-color: #e04e1a !important;
}

/* Typography for Article Content */
.post-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    color: var(--vr-gray-700) !important;
}

/* Hide or style featured sliders */
.section-newsticker {
    background: linear-gradient(90deg, var(--mag-accent), #e04e1a) !important;
    color: #fff !important;
}
.section-newsticker .newsticker-title {
    background: rgba(0,0,0,0.25) !important;
    color: #fff !important;
}
.section-newsticker a {
    color: #fff !important;
}

.section-featured .featured-post {
    border-radius: var(--vr-border-radius-lg) !important;
    overflow: hidden !important;
}

/* Author Box */
.about-author {
    background-color: var(--vr-gray-100) !important;
    border: 1px solid var(--vr-gray-150) !important;
    border-radius: var(--vr-border-radius-lg) !important;
}
.about-author .author-name {
    color: #fff !important;
}

/* Related Posts */
.related-posts .post-item {
    background-color: var(--vr-gray-100) !important;
    border: none !important;
}