/* ============================================
   DARK MODE CSS - FILE TERPISAH
   Dominasi: #000 (primary), #222 (secondary)
   Versi 1.1: Fix Konflik custom-background
   ============================================ */

/* ============================================
   BASE DARK MODE (FIX KONFLIK)
   ============================================ */
body.dark-mode,
body.dark-mode.custom-background {
    background-color: #000000 !important;
    color: #ffffff;
}

html body.dark-mode {
    background-color: #000000 !important;
}

body.dark-mode.custom-background {
    background-image: none !important;
}

/* ============================================
   HEADER - DARK MODE
   ============================================ */
body.dark-mode .site-header {
    background-color: #000000;
}

body.dark-mode .header-top {
    background-color: #000000;
}

body.dark-mode .header-nav {
    background-color: #000000;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

body.dark-mode .site-title-text {
    color: #d90000;
}

body.dark-mode .logo-tagline {
    color: #999999;
}

body.dark-mode .search-input {
    background-color: #222222;
    border-color: #444444;
    color: #ffffff;
}

body.dark-mode .search-input:focus {
    border-color: #d90000;
    background-color: #333333;
}

body.dark-mode .search-button {
    color: #d90000;
}

body.dark-mode .icon-btn {
    color: #d90000;
}

body.dark-mode .icon-btn svg {
    stroke: #d90000;
}

body.dark-mode .icon-label {
    color: #ffffff;
}

/* ✅ Dark Mode Button di Header */
body.dark-mode .dark-mode-btn {
    color: #d90000;
}

body.dark-mode .dark-mode-btn svg {
    stroke: #d90000;
}

body.dark-mode .dark-mode-btn:hover {
    opacity: 0.7;
}

/* ============================================
   MENU - DARK MODE
   ============================================ */
body.dark-mode .menu-item a {
    color: #ffffff;
}

body.dark-mode .menu-item a:hover {
    color: #d90000;
    background-color: #222222;
}

body.dark-mode .menu-item.current-menu-item a {
    color: #d90000;
    background-color: #222222;
}

body.dark-mode .nav-dropdown-btn {
    color: #d90000;
}

body.dark-mode .nav-dropdown-btn svg {
    stroke: #d90000;
}

body.dark-mode .nav-dropdown-btn:hover {
    background-color: #222222;
}

body.dark-mode .nav-dropdown-menu {
    background-color: #222222;
    border-color: #444444;
}

body.dark-mode .nav-dropdown-menu li a {
    color: #ffffff;
}

body.dark-mode .nav-dropdown-menu li a:hover {
    background-color: #333333;
    color: #d90000;
}

/* ============================================
   SIDE MENU - DARK MODE
   ============================================ */
body.dark-mode .side-menu {
    background-color: #000000;
}

body.dark-mode .side-menu-header {
    border-bottom-color: #333333;
}

body.dark-mode .side-menu-logo .site-title-text {
    color: #d90000;
}

body.dark-mode .side-menu-tagline {
    color: #999999;
}

body.dark-mode .side-menu-close {
    color: #d90000;
}

body.dark-mode .side-menu-close svg {
    stroke: #d90000;
}

body.dark-mode .side-menu-section-title {
    color: #999999;
    border-bottom-color: #333333;
}

body.dark-mode .kanal-item {
    color: #ffffff;
}

body.dark-mode .kanal-item:hover {
    background-color: #222222;
}

body.dark-mode .kanal-icon {
    background-color: #222222;
    color: #d90000;
}

body.dark-mode .portal-list a {
    color: #ffffff;
}

body.dark-mode .portal-list a:hover {
    background-color: #222222;
    color: #d90000;
}

body.dark-mode .side-menu-action-btn {
    background-color: #222222;
    color: #ffffff;
}

body.dark-mode .side-menu-action-btn:hover {
    background-color: #d90000;
    color: #ffffff;
}

body.dark-mode .side-menu-action-btn svg {
    stroke: #d90000;
}

/* ============================================
   MOBILE SEARCH - DARK MODE
   ============================================ */
body.dark-mode .mobile-search-container {
    background-color: #000000;
}

body.dark-mode .mobile-search-input {
    background-color: #222222;
    border-color: #444444;
    color: #ffffff;
}

body.dark-mode .mobile-search-submit,
body.dark-mode .mobile-search-close {
    color: #d90000;
}

body.dark-mode .mobile-search-submit svg,
body.dark-mode .mobile-search-close svg {
    stroke: #d90000;
}

/* ============================================
   INDEX PAGE - DARK MODE
   ============================================ */
body.dark-mode .container,
body.dark-mode .main-layout,
body.dark-mode .sidebar-home,
body.dark-mode .sidebar-right,
body.dark-mode .single-layout,
body.dark-mode .single-content-area,
body.dark-mode .single-sidebar {
    background-color: #000000 !important;
}

body.dark-mode .headline-slider-container {
    background-color: #222222;
}

body.dark-mode .headline-title-modern a {
    color: #ffffff;
}

body.dark-mode .headline-card-item {
    background-color: #222222;
}

body.dark-mode .card-image-wrapper {
    border-color: #444444;
    background-color: #333333;
}

body.dark-mode .card-title {
    color: #ffffff;
}

body.dark-mode .card-title a {
    color: #ffffff;
}

body.dark-mode .card-title a:hover {
    color: #d90000;
}

body.dark-mode .section-title,
body.dark-mode .tag-berita-title,
body.dark-mode .kategori-berita-title,
body.dark-mode .latest-news-title {
    color: #ffffff;
}

body.dark-mode .section-icon i,
body.dark-mode .latest-news-icon i,
body.dark-mode .kategori-berita-icon i,
body.dark-mode .tag-berita-icon i {
    color: #d90000;
}

body.dark-mode .section-see-all,
body.dark-mode .tag-see-all,
body.dark-mode .kategori-see-all {
    background-color: #d90000;
    color: #ffffff;
}

body.dark-mode .section-see-all:hover,
body.dark-mode .tag-see-all:hover,
body.dark-mode .kategori-see-all:hover {
    background-color: #ff3333;
}

body.dark-mode .pilihan-title {
    color: #ffffff;
}

body.dark-mode .pilihan-title a {
    color: #ffffff;
}

body.dark-mode .pilihan-title a:hover {
    color: #d90000;
}

body.dark-mode .tag-berita-headline {
    color: #ffffff;
}

body.dark-mode .tag-berita-headline a {
    color: #ffffff;
}

body.dark-mode .tag-berita-headline a:hover {
    color: #d90000;
}

body.dark-mode .tag-berita-label {
    color: #d90000;
}

body.dark-mode .kategori-berita-headline {
    color: #ffffff;
}

body.dark-mode .kategori-berita-headline a {
    color: #ffffff;
}

body.dark-mode .kategori-berita-headline a:hover {
    color: #d90000;
}

body.dark-mode .kategori-berita-label {
    color: #d90000;
}

body.dark-mode .latest-news-headline {
    color: #ffffff;
}

body.dark-mode .latest-news-headline a {
    color: #ffffff;
}

body.dark-mode .latest-news-headline a:hover {
    color: #d90000;
}

body.dark-mode .latest-news-category {
    color: #d90000;
}

body.dark-mode .latest-news-time {
    color: #999999;
}

/* ============================================
   SINGLE PAGE - DARK MODE
   ============================================ */
body.dark-mode .single-post {
    color: #ffffff;
}

body.dark-mode .single-breadcrumb {
    color: #999999;
}

body.dark-mode .single-breadcrumb a {
    color: #cccccc;
}

body.dark-mode .single-breadcrumb a:hover {
    color: #d90000;
}

body.dark-mode .single-title {
    color: #ffffff;
}

body.dark-mode .single-ringkasan {
    color: #cccccc;
}

body.dark-mode .meta-author-name {
    color: #ffffff;
}

body.dark-mode .meta-author-date {
    color: #999999;
}

body.dark-mode .share-label {
    color: #ffffff;
}

body.dark-mode .share-icon {
    color: #ffffff;
}

body.dark-mode .share-icon:hover {
    color: #d90000;
}

body.dark-mode .single-content {
    color: #cccccc;
}

body.dark-mode .single-content h2,
body.dark-mode .single-content h3,
body.dark-mode .single-content h4 {
    color: #ffffff;
}

body.dark-mode .single-content a {
    color: #d90000;
}

body.dark-mode .single-content blockquote {
    background-color: #222222;
    border-left-color: #d90000;
    color: #cccccc;
}

body.dark-mode .single-content strong,
body.dark-mode .single-content b {
    color: #ffffff;
}

body.dark-mode .single-tags a {
    background-color: #222222;
    color: #ffffff;
}

body.dark-mode .single-tags a:hover {
    background-color: #d90000;
    color: #ffffff;
}

body.dark-mode .related-news-section,
body.dark-mode .single-latest-section {
    background-color: transparent;
}

body.dark-mode .related-news-title,
body.dark-mode .single-latest-title {
    color: #ffffff;
}

body.dark-mode .related-news-icon,
body.dark-mode .single-latest-icon {
    color: #ffffff;
}

body.dark-mode .related-news-headline {
    color: #ffffff;
}

body.dark-mode .related-news-headline a {
    color: #ffffff;
}

body.dark-mode .related-news-headline a:hover {
    color: #d90000;
}

body.dark-mode .single-latest-headline {
    color: #ffffff;
}

body.dark-mode .single-latest-headline a {
    color: #ffffff;
}

body.dark-mode .single-latest-headline a:hover {
    color: #d90000;
}

body.dark-mode .comments-title {
    color: #ffffff;
    border-bottom-color: #d90000;
}

body.dark-mode .comment-item {
    border-bottom-color: #333333;
}

body.dark-mode .comment-author-name {
    color: #ffffff;
}

body.dark-mode .comment-date {
    color: #999999;
}

body.dark-mode .comment-content {
    color: #cccccc;
}

body.dark-mode .comment-reply a {
    color: #d90000;
}

/* ============================================
   WIDGETS - DARK MODE
   ============================================ */
body.dark-mode .widget {
    color: #ffffff;
}

body.dark-mode .widget-title {
    color: #ffffff;
    border-bottom-color: #d90000;
}

body.dark-mode .widget a {
    color: #ffffff;
}

body.dark-mode .widget a:hover {
    color: #d90000;
}

body.dark-mode .widget li {
    border-bottom-color: #333333;
}

body.dark-mode .widget_tema_berita_kategori_widget {
    background-color: #222222;
}

body.dark-mode .kategori-widget-title {
    color: #ffffff;
}

body.dark-mode .kategori-widget-header {
    border-bottom-color: #444444;
}

body.dark-mode .kategori-featured-title,
body.dark-mode .kategori-featured-title a,
body.dark-mode .kategori-list-title,
body.dark-mode .kategori-list-title a {
    color: #ffffff;
}

body.dark-mode .kategori-featured-title a:hover,
body.dark-mode .kategori-list-title a:hover {
    color: #d90000;
}

body.dark-mode .kategori-list-post {
    border-bottom-color: #444444;
}

body.dark-mode .opini-widget-title {
    color: #ffffff;
    border-bottom-color: #d90000;
}

body.dark-mode .opini-title {
    color: #ffffff;
}

body.dark-mode .opini-title a {
    color: #ffffff;
}

body.dark-mode .opini-title a:hover {
    color: #d90000;
}

body.dark-mode .opini-author {
    color: #d90000;
}

body.dark-mode .opini-post {
    border-bottom-color: #333333;
}

body.dark-mode .footer-column-title {
    color: #ffffff;
    border-bottom-color: #d90000;
}

body.dark-mode .footer-menu a {
    color: #cccccc;
}

body.dark-mode .footer-menu a:hover {
    color: #ffffff;
}

body.dark-mode .footer-menu li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   MOBILE WIDGET SLOT - DARK MODE
   ============================================ */
body.dark-mode .mobile-widget-slot .widget-title {
    color: #ffffff !important;
    border-bottom-color: #d90000 !important;
}

body.dark-mode .mobile-widget-slot .widget_tema_berita_kategori_widget {
    background-color: #222222 !important;
}

body.dark-mode .mobile-widget-slot .widget_tema_berita_kategori_widget .kategori-widget-title {
    color: #ffffff !important;
}

body.dark-mode .mobile-widget-slot .widget_tema_berita_kategori_widget .kategori-featured-title,
body.dark-mode .mobile-widget-slot .widget_tema_berita_kategori_widget .kategori-featured-title a,
body.dark-mode .mobile-widget-slot .widget_tema_berita_kategori_widget .kategori-list-title,
body.dark-mode .mobile-widget-slot .widget_tema_berita_kategori_widget .kategori-list-title a {
    color: #ffffff !important;
}

body.dark-mode .mobile-widget-slot .opini-widget-title {
    color: #ffffff !important;
}

body.dark-mode .mobile-widget-slot .opini-title,
body.dark-mode .mobile-widget-slot .opini-title a {
    color: #ffffff !important;
}

body.dark-mode .mobile-widget-slot .opini-author {
    color: #d90000 !important;
}

/* ============================================
   SCROLLBAR & SELECTION - DARK MODE
   ============================================ */
body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #222222;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #444444;
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

body.dark-mode ::selection {
    background-color: #d90000;
    color: #ffffff;
}