/* ===================================
   DARK MODE - COLOR SCHEME
   =================================== */

body.dark-mode {
    /* Main Background */
    --bg-primary: #1a1a1a;
    --bg-secondary: #0f1419;
    --bg-tertiary: #2a2a2a;
    
    /* Gradient Backgrounds */
    --gradient-carousel: linear-gradient(70deg, #8B2E1F, #1a3a52);

    
    /* Text Colors */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #a0a0a0;
    --text-light: #888888;
    --text-muted: #666666;
    
    /* Button Colors */
    --btn-primary: #ffffff;
    --btn-primary-hover: #e0e0e0;
    --btn-secondary: #e0e0e0;
    --btn-secondary-hover: #b0b0b0;
    --btn-success: #25D366;
    --btn-success-hover: #1da857;
    --btn-accent: #7c5cff;
    
    /* Card Colors */
    --card-bg: rgba(255, 255, 255, 0.08);
    --card-bg-hover: rgba(255, 255, 255, 0.12);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: rgba(0, 0, 0, 0.5);
    
    /* Modal Colors */
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-overlay-dark: rgba(0, 0, 0, 0.85);
    --modal-overlay-darker: rgba(0, 0, 0, 0.95);
    --modal-bg: #2a2a2a;
    --modal-bg-transparent: #2a2a2ad0;
    --modal-content: rgba(255, 255, 255, 0.05);
    
    /* Border & Divider Colors */
    --border-primary: #444444;
    --border-secondary: #333333;
    --border-tertiary: #444444;
    --border-light: #555555;
    --border-lighter: #333333;
    
    /* Social Icon Colors */
    --social-tiktok: #ffffff;
    --social-instagram: #E1306C;
    --social-youtube: #FF0000;
    --social-facebook: #1877F2;
    
    /* Utility Colors */
    --color-transparent: transparent;
    --color-white: #fff;
    --color-black: #000;
    --color-gray-light: #333333;
    --color-gray-medium: #2a2a2a;
    --color-gray-dark: #1a1a1a;
    
    /* Image Container */
    --img-container-bg: rgba(255, 255, 255, 0.05);
}

/* ===================================
   DARK MODE - BACKGROUND STYLES
   =================================== */

body.dark-mode {
    background-color: var(--bg-primary);
    background-image: var(--gradient-produk);
    color: var(--text-primary);
}

body.dark-mode {
    background-attachment: fixed;
}

.dark-mode .carousel::before {
    background-image: var(--gradient-carousel);
}

.dark-mode .produk-container {
    background: transparent !important;
}

.dark-mode .produk-card {
    background: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: 0 10px 30px var(--card-shadow);
    color: var(--text-primary);
}

.dark-mode .produk-card:hover {
    background: var(--card-bg-hover);
}

/* ===================================
   DARK MODE - TEXT STYLES
   =================================== */

.dark-mode header nav a {
    color: var(--text-secondary);
}

.dark-mode header nav a:hover {
    color: var(--text-primary);
}

.dark-mode .carousel .list .item .introduce .des {
    color: var(--text-light);
}

.dark-mode .carousel .list .item .introduce .title {
    color: var(--text-primary);
}

.dark-mode .carousel .list .item .introduce .topic {
    color: var(--text-primary);
}

.dark-mode .carousel .list .item .introduce .seeMore {
    color: var(--text-secondary);
    border-bottom-color: var(--border-primary);
    background-color: var(--color-transparent);
    border-bottom: 1px solid var(--border-primary);
}

.dark-mode .carousel .list .item .introduce .seeMore:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dark-mode .produk-card h3 {
    color: var(--text-primary);
}

.dark-mode .produk-card .kategori {
    color: var(--text-light);
}

.dark-mode .produk-card .harga {
    color: #fff;
}

.dark-mode .modal-deskripsi {
    color: var(--text-secondary);
}

.dark-mode .spec-item span {
    color: var(--text-light);
}

.dark-mode .spec-item strong {
    color: var(--text-primary);
}

/* ===================================
   DARK MODE - BUTTON STYLES
   =================================== */

.dark-mode .produk-card button {
    background: #444444;
    color: var(--text-primary);
}

.dark-mode .produk-card button:hover {
    background: #555555;
    color: var(--text-primary);
}

.dark-mode .btn-beli-wa {
    background-color: var(--btn-success);
    color: var(--color-white);
}

.dark-mode .btn-beli-wa:hover {
    background-color: var(--btn-success-hover);
}

.dark-mode .carousel.showDetail .list .item:nth-child(2) .detail .title {
    color: var(--text-primary);
}

/* ===================================
   DARK MODE - MODAL STYLES
   =================================== */

.dark-mode .theme-modal {
    background-color: var(--modal-overlay);
}

.dark-mode .theme-content {
    background-color: var(--modal-bg);
    color: var(--text-primary);
}

.dark-mode .theme-content input,
.dark-mode .theme-content textarea {
    background-color: #333333;
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.dark-mode .kontak-overlay {
    background-color: var(--modal-overlay-dark);
}

.dark-mode .kontak-container {
    background: var(--modal-bg);
    color: var(--text-primary);
}

.dark-mode .kontak-container input,
.dark-mode .kontak-container textarea {
    background-color: #333333;
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.dark-mode .kontak-container input::placeholder,
.dark-mode .kontak-container textarea::placeholder {
    color: var(--text-light);
}

.dark-mode .kontak-header h2 {
    color: var(--text-primary);
}

.dark-mode .kontak-header p {
    color: var(--text-secondary);
}

.dark-mode .kontak-group label {
    color: var(--text-primary);
}

.dark-mode .kontak-close-btn {
    color: var(--text-secondary);
}

.dark-mode .kontak-close-btn:hover {
    color: var(--text-primary);
}

.dark-mode .kontak-submit {
    background-color: #555555;
    color: var(--text-primary);
}

.dark-mode .kontak-submit:hover {
    background-color: #666666;
}

.dark-mode .kontak-social p {
    color: var(--text-light);
}

.dark-mode .kontak-social-icons a {
    color: var(--text-secondary);
}

.dark-mode .kontak-social-icons a:hover {
    color: var(--text-primary);
}

.dark-mode .produk-modal {
    background-color: var(--modal-overlay-darker);
}

.dark-mode .produk-modal-content {
    background-color: var(--modal-bg-transparent);
    color: var(--text-primary);
}

.dark-mode .close-produk-modal {
    color: var(--text-light);
}

.dark-mode .close-produk-modal:hover {
    color: var(--text-primary);
}

.dark-mode .produk-img-container {
    background: rgba(255, 255, 255, 0.08);
}

/* ===================================
   DARK MODE - BORDER & DIVIDER
   =================================== */

.dark-mode .carousel.showDetail .list .item:nth-child(2) .detail .specifications {
    border-top: 1px solid var(--border-secondary);
}

.dark-mode .kontak-social {
    border-top: 1px solid var(--border-secondary);
}

.dark-mode .produk-pagination button {
    border-color: var(--border-primary);
    background: transparent;
    color: var(--text-secondary);
}

.dark-mode .produk-pagination button.active,
.dark-mode .produk-pagination button:hover {
    background: #555555;
    border-color: #555555;
    color: var(--text-primary);
}

.dark-mode .modal-specs {
    border-bottom-color: var(--border-secondary);
}

/* ===================================
   DARK MODE - SOCIAL ICONS
   =================================== */

.dark-mode .kontak-icon-tiktok:hover {
    color: var(--social-tiktok);
}

.dark-mode .kontak-icon-ig:hover {
    color: var(--social-instagram);
}

.dark-mode .kontak-icon-yt:hover {
    color: var(--social-youtube);
}

.dark-mode .kontak-icon-fb:hover {
    color: var(--social-facebook);
}

/* ===================================
   DARK MODE - SLIDER & LIGHTBOX
   =================================== */

.dark-mode .slider-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.dark-mode .slider-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

.dark-mode .fullscreen-icon {
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
}

.dark-mode .fullscreen-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.dark-mode .lightbox-modal {
    background-color: rgba(0, 0, 0, 0.95);
}

.dark-mode .close-lightbox {
    color: var(--color-white);
}

/* ===================================
   DARK MODE - PRODUK PAGE STYLES
   =================================== */

.dark-mode .produk-header {
    background: transparent;
    color: var(--text-primary);
}

.dark-mode .produk-header h2 {
    color: var(--text-primary);
}