/* ===================================
   BRIGHT MODE - COLOR SCHEME
   =================================== */

body.bright-mode {
    /* Main Background */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-tertiary: #ffffff;

    /* Gradient Backgrounds */
    --gradient-carousel: linear-gradient(70deg, #DC422A, blue);


    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-tertiary: #666666;
    --text-light: #888888;
    --text-muted: #5559;

    /* Button Colors */
    --btn-primary: #000000;
    --btn-primary-hover: #333333;
    --btn-secondary: #2d3436;
    --btn-secondary-hover: #636e72;
    --btn-success: #25D366;
    --btn-success-hover: #128C7E;
    --btn-accent: #693EFF;

    /* Card Colors */
    --card-bg: rgba(255, 255, 255, 0.212);
    --card-bg-hover: rgba(238, 235, 235, 0.584);
    --card-border: rgba(81, 120, 133, 0.211);
    --card-shadow: rgba(43, 35, 35, 0.347);

    /* Modal Colors */
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-overlay-dark: rgba(0, 0, 0, 0.6);
    --modal-overlay-darker: rgba(0, 0, 0, 0.9);
    --modal-bg: #ffffff;
    --modal-bg-transparent: #ffffffc8;
    --modal-content: rgba(255, 255, 255, 0.126);

    /* Border & Divider Colors */
    --border-primary: #555555;
    --border-secondary: #5553;
    --border-tertiary: #5555;
    --border-light: #ddd;
    --border-lighter: #eee;

    /* Social Icon Colors */
    --social-tiktok: #000000;
    --social-instagram: #E1306C;
    --social-youtube: #FF0000;
    --social-facebook: #1877F2;

    /* Utility Colors */
    --color-transparent: transparent;
    --color-white: #fff;
    --color-black: #000;
    --color-gray-light: #eee;
    --color-gray-medium: #f4f4f4;
    --color-gray-dark: #444;

    /* Image Container */
    --img-container-bg: #ffffff7e;
}

/* ===================================
   BRIGHT MODE - BACKGROUND STYLES
   =================================== */

body.bright-mode {
    background-color: var(--bg-primary);
    background-image: none;
    transition: background-image 0.5s ease-in-out;
}

.bright-mode .top-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bright-mode #mainContent {
    background: transparent;
}

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

.bright-mode .produk-container {
    background-image: var(--gradient-produk) !important;
}

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

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

/* ===================================
   BRIGHT MODE - TEXT STYLES
   =================================== */

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

.bright-mode #post-title {
    color: #000000 !important;
}

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

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

.bright-mode .carousel .list .item .introduce .seeMore:hover {
    background: var(--bg-secondary);
}

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

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

.bright-mode .produk-card .harga {
    color: var(--btn-primary);
}

/* ===================================
   BRIGHT MODE - BUTTON STYLES
   =================================== */

.bright-mode .produk-card button {
    background: var(--btn-secondary);
    color: var(--color-white);
}

.bright-mode .produk-card button:hover {
    background: var(--btn-secondary-hover);
}

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

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

.bright-mode .carousel .carousel.showDetail .list .item:nth-child(2) .checkout button:nth-child(2) {
    background-color: var(--btn-accent);
    color: var(--btn-primary);
}

/* ===================================
   BRIGHT MODE - MODAL STYLES
   =================================== */

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

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

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

.bright-mode .kontak-container {
    background: var(--modal-bg);
}

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

.bright-mode .kontak-header p {
    color: var(--text-tertiary);
}

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

.bright-mode .kontak-submit {
    background-color: var(--btn-primary);
    color: var(--color-white);
}

.bright-mode .kontak-submit:hover {
    background-color: var(--btn-primary-hover);
}

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

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

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

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

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

.bright-mode .produk-pagination button {
    border-color: var(--border-light);
    background: var(--modal-bg);
}

.bright-mode .produk-pagination button.active,
.bright-mode .produk-pagination button:hover {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: var(--color-white);
}

/* ===================================
   BRIGHT MODE - SOCIAL ICONS
   =================================== */

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

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

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

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

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

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

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

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

.bright-mode .slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--color-white);
}

.bright-mode .fullscreen-icon {
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-primary);
}

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

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

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

/* ===================================
   BRIGHT MODE - FOOTER STYLES
   =================================== */

.bright-mode .footer-col h3 {
    color: #444444;
}

.bright-mode .footer-col p {
    color: #777777;
}

.bright-mode .social-link {
    background: rgba(0, 0, 0, 0.05);
    color: #555555;
    border-color: rgba(0, 0, 0, 0.1);
}

.bright-mode .social-link:hover {
    background: #5b61ff;
    color: #fff;
    border-color: #5b61ff;
}

.bright-mode .footer-bottom {
    border-top-color: rgba(0, 0, 0, 0.08);
    color: #999999;
}

.bright-mode .site-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* ===================================
   BRIGHT MODE - PAGE-SPECIFIC BG
   =================================== */

body.bright-mode.page-view,
body.bright-mode.page-downloads {
    background-color: #e7e7e7 !important;
    background-image: none !important;
}

body.bright-mode.page-view .top-nav,
body.bright-mode.page-downloads .top-nav {
    background: rgba(231, 231, 231, 0.9) !important;
    backdrop-filter: blur(10px);
}