/* =============================================
   ArangKelapa — theme.css
   Dark & Light Mode Override System
   ============================================= */

/* =============================================
   DARK MODE (default)
   ============================================= */
body.theme-dark {

    /* === LAYOUT & BACKGROUND === */
    --bg-body:          #0d0d0d;
    --bg-card:          #1a1a1a;
    --bg-card-alt:      #252525;
    --bg-input:         #252525;
    --bg-hover:         #2e2e2e;
    --bg-section-alt:   #111111;

    /* === TEXT === */
    --text-primary:     #f2e8d8;
    --text-secondary:   #b0a090;
    --text-muted:       #777777;
    --text-heading:     #f5e6d3;
    --text-on-dark:     #f2e8d8;

    /* === BORDERS & DIVIDERS === */
    --border-color:     #2e2e2e;
    --border-strong:    #3d3d3d;
    --divider:          #2a2a2a;

    /* === NAVBAR === */
    --navbar-bg:        #1a1a1a;
    --navbar-text:      #ffffff;
    --navbar-hover-bg:  #2e2e2e;
    --navbar-sub-bg:    #141414;
    --search-bg:        #252525;
    --search-border:    #2e2e2e;
    --search-text:      #ffffff;
    --search-placeholder: #666666;

    /* === TOPBAR === */
    --topbar-bg:        #0d0d0d;
    --topbar-text:      #cccccc;

    /* === NAVLINKS BAR === */
    --navlinks-bg:      #3d2b1f;
    --navlinks-text:    rgba(255,255,255,0.85);
    --navlinks-hover:   #c17f24;

    /* === MOBILE MENU === */
    --mobile-menu-bg:   #252525;
    --mobile-menu-text: #cccccc;
    --mobile-border:    #2e2e2e;

    /* === USER DROPDOWN === */
    --dropdown-bg:      #1a1a1a;
    --dropdown-border:  #2e2e2e;
    --dropdown-text:    #cccccc;
    --dropdown-hover:   #2e2e2e;

    /* === HERO === */
    --hero-bg-from:     #0d0d0d;
    --hero-bg-via:      #3d2b1f;
    --hero-bg-to:       #1a1a1a;
    --hero-text:        #ffffff;
    --hero-subtext:     rgba(255,255,255,0.7);
    --hero-stat-label:  rgba(255,255,255,0.5);

    /* === CARDS === */
    --card-bg:          #1a1a1a;
    --card-border:      rgba(255,255,255,0.06);
    --card-shadow:      0 4px 20px rgba(0,0,0,0.4);
    --card-shadow-hover:0 8px 40px rgba(0,0,0,0.6);

    /* === PRODUCT CARDS === */
    --product-bg:       #1a1a1a;
    --product-img-bg:   linear-gradient(135deg, #2a1f15, #1a1208);
    --product-name:     #f2e8d8;
    --product-action-bg:#1a1a1a;
    --product-action-text:#f2e8d8;

    /* === CATEGORY CARDS === */
    --cat-bg:           #252525;
    --cat-bg-hover:     #2e2e2e;
    --cat-name:         #f2e8d8;

    /* === SECTION BACKGROUNDS === */
    --section-categories-bg: #1a1a1a;
    --section-products-bg:   #111111;
    --section-why-bg:        #1a1a1a;
    --section-testi-bg:      #141414;

    /* === WHY US CARDS === */
    --why-card-hover-bg:#252525;
    --why-heading:      #f2e8d8;

    /* === TESTIMONIAL CARDS === */
    --testi-bg:         #1a1a1a;
    --testi-text:       #d0c0b0;

    /* === FORMS === */
    --input-bg:         #252525;
    --input-border:     #3d3d3d;
    --input-text:       #f2e8d8;
    --input-placeholder:#666666;
    --input-focus-glow: rgba(193,127,36,0.2);
    --label-color:      #d0c0b0;

    /* === PROFILE / SETTINGS === */
    --pg-sidebar-bg:    #1a1a1a;
    --pg-sidebar-border:#2e2e2e;
    --pg-sidebar-text:  #b0a090;
    --pg-sidebar-active-bg: rgba(193,127,36,0.12);
    --pg-sidebar-active-text: #c17f24;
    --pg-content-bg:    #1a1a1a;
    --pg-content-border:#2e2e2e;
    --pg-card-bg:       #252525;
    --pg-divider:       #2e2e2e;

    /* === THEME CARD (settings tampilan) === */
    --theme-card-bg:        #252525;
    --theme-card-border:    #2e2e2e;
    --theme-card-selected:  #c17f24;
    --theme-label-text:     #d0c0b0;

    /* === LANG CARD === */
    --lang-card-bg:         #252525;
    --lang-card-border:     #3d3d3d;
    --lang-card-selected-bg:#1a1208;
    --lang-card-text:       #f2e8d8;

    /* === CART === */
    --cart-bg:          #1a1a1a;
    --cart-summary-bg:  #1a1a1a;
    --cart-row-hover:   #252525;
    --cart-border:      #2e2e2e;

    /* === ORDERS === */
    --order-bg:         #1a1a1a;
    --order-header-bg:  #252525;
    --order-border:     #2e2e2e;

    /* === CHECKOUT === */
    --checkout-bg:      #1a1a1a;
    --checkout-border:  #2e2e2e;

    /* === PAGE HEADER === */
    --page-header-bg-from:#3d2b1f;
    --page-header-bg-to:  #1a1a1a;
    --page-header-text:   #ffffff;

    /* === BANNER SECTION === */
    --banner-bg-from:   #3d2b1f;
    --banner-bg-to:     #0d0d0d;
    --banner-text:      #ffffff;
    --banner-subtext:   rgba(255,255,255,0.7);
    --banner-item-text: rgba(255,255,255,0.85);

    /* === AUTH PAGES === */
    --auth-page-bg-from:#0d0d0d;
    --auth-page-bg-to:  #3d2b1f;
    --auth-card-bg:     #1a1a1a;
    --auth-card-shadow: 0 20px 60px rgba(0,0,0,0.6);
    --auth-heading:     #f2e8d8;
    --auth-divider-line:#2e2e2e;

    /* === FOOTER === */
    --footer-bg:        #0d0d0d;
    --footer-text:      rgba(255,255,255,0.65);
    --footer-heading:   #ffffff;
    --footer-link:      rgba(255,255,255,0.6);
    --footer-social-bg: #252525;
    --footer-bottom-border:#2e2e2e;
    --payment-icon-bg:  #252525;

    /* === BREADCRUMB === */
    --breadcrumb-text:  #999999;

    /* === PAGINATION === */
    --page-btn-border:  #3d3d3d;
    --page-btn-text:    #d0c0b0;

    /* === TOOLTIP / WA === */
    --tooltip-bg:       #252525;

    /* === SHADOWS === */
    --shadow-navbar:    0 2px 20px rgba(0,0,0,0.6);
    --shadow-dropdown:  0 4px 30px rgba(0,0,0,0.5);
}

/* =============================================
   LIGHT MODE
   ============================================= */
body.theme-light {

    /* === LAYOUT & BACKGROUND === */
    --bg-body:          #fdf8f2;
    --bg-card:          #ffffff;
    --bg-card-alt:      #f9f3eb;
    --bg-input:         #ffffff;
    --bg-hover:         #f0e8da;
    --bg-section-alt:   #f5ede0;

    /* === TEXT === */
    --text-primary:     #2c1d0e;
    --text-secondary:   #6b4c35;
    --text-muted:       #8a7060;
    --text-heading:     #1e1208;
    --text-on-dark:     #ffffff;

    /* === BORDERS & DIVIDERS === */
    --border-color:     #e2d5c5;
    --border-strong:    #c8b49a;
    --divider:          #ecdfc9;

    /* === NAVBAR === */
    --navbar-bg:        #ffffff;
    --navbar-text:      #2c1d0e;
    --navbar-hover-bg:  #f5ede0;
    --navbar-sub-bg:    #fdf8f2;
    --search-bg:        #f5ede0;
    --search-border:    #d4c0a8;
    --search-text:      #2c1d0e;
    --search-placeholder: #9a8070;

    /* === TOPBAR === */
    --topbar-bg:        #2c1d0e;
    --topbar-text:      #d4b896;

    /* === NAVLINKS BAR === */
    --navlinks-bg:      #f0e4d0;
    --navlinks-text:    #4a2f1a;
    --navlinks-hover:   #c17f24;

    /* === MOBILE MENU === */
    --mobile-menu-bg:   #ffffff;
    --mobile-menu-text: #2c1d0e;
    --mobile-border:    #e2d5c5;

    /* === USER DROPDOWN === */
    --dropdown-bg:      #ffffff;
    --dropdown-border:  #e2d5c5;
    --dropdown-text:    #2c1d0e;
    --dropdown-hover:   #f5ede0;

    /* === HERO === */
    --hero-bg-from:     #2c1d0e;
    --hero-bg-via:      #5c3520;
    --hero-bg-to:       #3d2515;
    --hero-text:        #ffffff;
    --hero-subtext:     rgba(255,255,255,0.82);
    --hero-stat-label:  rgba(255,255,255,0.65);

    /* === CARDS === */
    --card-bg:          #ffffff;
    --card-border:      rgba(0,0,0,0.07);
    --card-shadow:      0 4px 20px rgba(107,58,42,0.10);
    --card-shadow-hover:0 8px 40px rgba(107,58,42,0.18);

    /* === PRODUCT CARDS === */
    --product-bg:       #ffffff;
    --product-img-bg:   linear-gradient(135deg, #f5e6d3, #fdf6ee);
    --product-name:     #2c1d0e;
    --product-action-bg:#ffffff;
    --product-action-text:#2c1d0e;

    /* === CATEGORY CARDS === */
    --cat-bg:           #fdf6ee;
    --cat-bg-hover:     #ffffff;
    --cat-name:         #2c1d0e;

    /* === SECTION BACKGROUNDS === */
    --section-categories-bg: #ffffff;
    --section-products-bg:   #fdf8f2;
    --section-why-bg:        #ffffff;
    --section-testi-bg:      #f5ede0;

    /* === WHY US CARDS === */
    --why-card-hover-bg:#fdf6ee;
    --why-heading:      #2c1d0e;

    /* === TESTIMONIAL CARDS === */
    --testi-bg:         #ffffff;
    --testi-text:       #4a3525;

    /* === FORMS === */
    --input-bg:         #ffffff;
    --input-border:     #d4c0a8;
    --input-text:       #2c1d0e;
    --input-placeholder:#b0937a;
    --input-focus-glow: rgba(193,127,36,0.15);
    --label-color:      #3d2515;

    /* === PROFILE / SETTINGS === */
    --pg-sidebar-bg:    #ffffff;
    --pg-sidebar-border:#e2d5c5;
    --pg-sidebar-text:  #6b4c35;
    --pg-sidebar-active-bg:  #fdf0e0;
    --pg-sidebar-active-text:#b8721a;
    --pg-content-bg:    #ffffff;
    --pg-content-border:#e2d5c5;
    --pg-card-bg:       #fdf8f2;
    --pg-divider:       #e2d5c5;

    /* === THEME CARD (settings tampilan) === */
    --theme-card-bg:        #fdf6ee;
    --theme-card-border:    #ddd0bc;
    --theme-card-selected:  #c17f24;
    --theme-label-text:     #3d2515;

    /* === LANG CARD === */
    --lang-card-bg:         #fdf6ee;
    --lang-card-border:     #ddd0bc;
    --lang-card-selected-bg:#fff3e0;
    --lang-card-text:       #2c1d0e;

    /* === CART === */
    --cart-bg:          #ffffff;
    --cart-summary-bg:  #ffffff;
    --cart-row-hover:   #fdf6ee;
    --cart-border:      #e8ddd0;

    /* === ORDERS === */
    --order-bg:         #ffffff;
    --order-header-bg:  #fdf6ee;
    --order-border:     #e8ddd0;

    /* === CHECKOUT === */
    --checkout-bg:      #ffffff;
    --checkout-border:  #e2d5c5;

    /* === PAGE HEADER === */
    --page-header-bg-from:#5c3520;
    --page-header-bg-to:  #3d2515;
    --page-header-text:   #ffffff;

    /* === BANNER SECTION === */
    --banner-bg-from:   #5c3520;
    --banner-bg-to:     #2c1d0e;
    --banner-text:      #ffffff;
    --banner-subtext:   rgba(255,255,255,0.8);
    --banner-item-text: rgba(255,255,255,0.9);

    /* === AUTH PAGES === */
    --auth-page-bg-from:#f5ede0;
    --auth-page-bg-to:  #e8d8c0;
    --auth-card-bg:     #ffffff;
    --auth-card-shadow: 0 20px 60px rgba(107,58,42,0.15);
    --auth-heading:     #2c1d0e;
    --auth-divider-line:#e8ddd0;

    /* === FOOTER === */
    --footer-bg:        #1e1208;
    --footer-text:      rgba(255,255,255,0.65);
    --footer-heading:   #ffffff;
    --footer-link:      rgba(255,255,255,0.6);
    --footer-social-bg: #2e1e10;
    --footer-bottom-border:#2e1e10;
    --payment-icon-bg:  #2e1e10;

    /* === BREADCRUMB === */
    --breadcrumb-text:  #8a7060;

    /* === PAGINATION === */
    --page-btn-border:  #d4c0a8;
    --page-btn-text:    #3d2515;

    /* === TOOLTIP / WA === */
    --tooltip-bg:       #2c1d0e;

    /* === SHADOWS === */
    --shadow-navbar:    0 2px 20px rgba(107,58,42,0.15);
    --shadow-dropdown:  0 4px 30px rgba(107,58,42,0.12);
}


/* =============================================
   APPLYING VARIABLES — both themes share rules
   ============================================= */

/* --- Body & Base --- */
body.theme-dark,
body.theme-light {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* --- Headings --- */
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark h4, body.theme-dark h5,
body.theme-light h1, body.theme-light h2, body.theme-light h3,
body.theme-light h4, body.theme-light h5 {
    color: var(--text-heading);
}

/* --- Section Title --- */
body.theme-dark .section-title h2,
body.theme-light .section-title h2 {
    color: var(--text-heading);
}
body.theme-dark .section-title p,
body.theme-light .section-title p {
    color: var(--text-muted);
}

/* --- Topbar --- */
body.theme-dark .topbar,
body.theme-light .topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
}
body.theme-dark .topbar-left span,
body.theme-dark .topbar-right a,
body.theme-light .topbar-left span,
body.theme-light .topbar-right a {
    color: var(--topbar-text);
}

/* --- Navbar --- */
body.theme-dark .navbar,
body.theme-light .navbar {
    background: var(--navbar-bg);
    box-shadow: var(--shadow-navbar);
}
body.theme-dark .logo-name,
body.theme-light .logo-name {
    color: var(--navbar-text);
}
body.theme-dark .nav-btn,
body.theme-light .nav-btn {
    color: var(--navbar-text);
}
body.theme-dark .nav-btn:hover,
body.theme-light .nav-btn:hover {
    background: var(--navbar-hover-bg);
}
body.theme-light .nav-btn:hover {
    color: var(--text-secondary);
}

/* --- Search Bar --- */
body.theme-dark .search-form,
body.theme-light .search-form {
    background: var(--search-bg);
    border-color: var(--search-border);
}
body.theme-dark .search-form input,
body.theme-light .search-form input {
    color: var(--search-text);
}
body.theme-dark .search-form input::placeholder,
body.theme-light .search-form input::placeholder {
    color: var(--search-placeholder);
}

/* --- Nav Links Bar --- */
body.theme-dark .nav-links,
body.theme-light .nav-links {
    background: var(--navlinks-bg);
}
body.theme-dark .nav-links a,
body.theme-light .nav-links a {
    color: var(--navlinks-text);
}
body.theme-dark .nav-links a:hover,
body.theme-dark .nav-links a.active,
body.theme-light .nav-links a:hover,
body.theme-light .nav-links a.active {
    color: var(--navlinks-hover);
}

/* --- Mobile Menu --- */
body.theme-dark .mobile-menu,
body.theme-light .mobile-menu {
    background: var(--mobile-menu-bg);
}
body.theme-dark .mobile-menu a,
body.theme-light .mobile-menu a {
    color: var(--mobile-menu-text);
    border-bottom-color: var(--mobile-border);
}
body.theme-dark .hamburger,
body.theme-light .hamburger {
    color: var(--navbar-text);
}

/* --- User Dropdown --- */
body.theme-dark .user-dropdown,
body.theme-light .user-dropdown {
    background: var(--dropdown-bg);
    border-color: var(--dropdown-border);
    box-shadow: var(--shadow-dropdown);
}
body.theme-dark .user-dropdown a,
body.theme-light .user-dropdown a {
    color: var(--dropdown-text);
}
body.theme-dark .user-dropdown a:hover,
body.theme-light .user-dropdown a:hover {
    background: var(--dropdown-hover);
}
body.theme-dark .user-dropdown hr,
body.theme-light .user-dropdown hr {
    border-color: var(--border-color);
}

/* --- Hero Section --- */
body.theme-dark .hero,
body.theme-light .hero {
    background: linear-gradient(135deg,
        var(--hero-bg-from) 0%,
        var(--hero-bg-via) 50%,
        var(--hero-bg-to) 100%
    );
}
body.theme-dark .hero h1,
body.theme-light .hero h1 {
    color: var(--hero-text);
}
body.theme-dark .hero p,
body.theme-light .hero p {
    color: var(--hero-subtext);
}
body.theme-dark .hero-stat-label,
body.theme-light .hero-stat-label {
    color: var(--hero-stat-label);
}

/* --- Category Cards --- */
body.theme-dark .categories,
body.theme-light .categories {
    background: var(--section-categories-bg);
}
body.theme-dark .cat-card,
body.theme-light .cat-card {
    background: var(--cat-bg);
}
body.theme-dark .cat-card:hover,
body.theme-light .cat-card:hover {
    background: var(--cat-bg-hover);
}
body.theme-dark .cat-name,
body.theme-light .cat-name {
    color: var(--cat-name);
}
body.theme-dark .cat-count,
body.theme-light .cat-count {
    color: var(--text-muted);
}

/* --- Products Section --- */
body.theme-dark .products,
body.theme-light .products {
    background: var(--section-products-bg);
}
body.theme-dark .product-card,
body.theme-light .product-card {
    background: var(--product-bg);
    border-color: var(--card-border);
}
body.theme-dark .product-card:hover,
body.theme-light .product-card:hover {
    box-shadow: var(--card-shadow-hover);
}
body.theme-dark .product-img,
body.theme-light .product-img {
    background: var(--product-img-bg);
}
body.theme-dark .product-name,
body.theme-light .product-name {
    color: var(--product-name);
}
body.theme-dark .product-cat,
body.theme-light .product-cat {
    color: var(--text-secondary);
}
body.theme-dark .action-btn,
body.theme-light .action-btn {
    background: var(--product-action-bg);
    color: var(--product-action-text);
}
body.theme-dark .sold-count,
body.theme-light .sold-count {
    color: var(--text-muted);
}

/* --- Why Us --- */
body.theme-dark .why-us,
body.theme-light .why-us {
    background: var(--section-why-bg);
}
body.theme-dark .why-card:hover,
body.theme-light .why-card:hover {
    background: var(--why-card-hover-bg);
}
body.theme-dark .why-card h3,
body.theme-light .why-card h3 {
    color: var(--why-heading);
}
body.theme-dark .why-card p,
body.theme-light .why-card p {
    color: var(--text-muted);
}

/* --- Testimonials --- */
body.theme-dark .testimonials,
body.theme-light .testimonials {
    background: var(--section-testi-bg);
}
body.theme-dark .testi-card,
body.theme-light .testi-card {
    background: var(--testi-bg);
    border-color: var(--card-border);
}
body.theme-dark .testi-text,
body.theme-light .testi-text {
    color: var(--testi-text);
}
body.theme-dark .testi-role,
body.theme-light .testi-role {
    color: var(--text-muted);
}

/* --- Banner Section --- */
body.theme-dark .banner-section,
body.theme-light .banner-section {
    background: linear-gradient(135deg,
        var(--banner-bg-from),
        var(--banner-bg-to)
    );
}
body.theme-dark .banner-content h2,
body.theme-light .banner-content h2 {
    color: var(--banner-text);
}
body.theme-dark .banner-content p,
body.theme-light .banner-content p {
    color: var(--banner-subtext);
}
body.theme-dark .banner-features li,
body.theme-light .banner-features li {
    color: var(--banner-item-text);
}

/* --- Forms --- */
body.theme-dark .form-label,
body.theme-light .form-label {
    color: var(--label-color);
}
body.theme-dark .form-control,
body.theme-light .form-control {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}
body.theme-dark .form-control::placeholder,
body.theme-light .form-control::placeholder {
    color: var(--input-placeholder);
}
body.theme-dark .form-control:focus,
body.theme-light .form-control:focus {
    box-shadow: 0 0 0 3px var(--input-focus-glow);
}
body.theme-dark .form-hint,
body.theme-light .form-hint {
    color: var(--text-muted);
}
body.theme-dark .qty-input,
body.theme-light .qty-input {
    background: var(--input-bg);
    color: var(--input-text);
}
body.theme-dark .qty-btn,
body.theme-light .qty-btn {
    background: var(--bg-card-alt);
    color: var(--text-primary);
}
body.theme-dark .coupon-form input,
body.theme-light .coupon-form input {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

/* --- Page Header --- */
body.theme-dark .page-header,
body.theme-light .page-header {
    background: linear-gradient(135deg,
        var(--page-header-bg-from),
        var(--page-header-bg-to)
    );
}
body.theme-dark .page-header h1,
body.theme-light .page-header h1,
body.theme-dark .page-header p,
body.theme-light .page-header p {
    color: var(--page-header-text);
}

/* --- Breadcrumb --- */
body.theme-dark .breadcrumb-list li:last-child,
body.theme-light .breadcrumb-list li:last-child {
    color: var(--breadcrumb-text);
}
body.theme-dark .breadcrumb-list::after,
body.theme-light .breadcrumb-list::after {
    color: var(--text-muted);
}

/* --- Cart Page --- */
body.theme-dark .cart-table,
body.theme-light .cart-table {
    background: var(--cart-bg);
}
body.theme-dark .cart-table td,
body.theme-light .cart-table td {
    border-bottom-color: var(--cart-border);
    color: var(--text-primary);
}
body.theme-dark .cart-product-cat,
body.theme-light .cart-product-cat {
    color: var(--text-muted);
}
body.theme-dark .cart-summary,
body.theme-light .cart-summary {
    background: var(--cart-summary-bg);
}
body.theme-dark .cart-summary h3,
body.theme-light .cart-summary h3 {
    color: var(--text-heading);
    border-bottom-color: var(--border-color);
}
body.theme-dark .summary-row,
body.theme-light .summary-row {
    color: var(--text-primary);
}

/* --- Orders --- */
body.theme-dark .order-card,
body.theme-light .order-card {
    background: var(--order-bg);
    border-color: var(--order-border);
}
body.theme-dark .order-header,
body.theme-light .order-header {
    background: var(--order-header-bg);
    border-bottom-color: var(--order-border);
}
body.theme-dark .order-code,
body.theme-light .order-code {
    color: var(--text-heading);
}
body.theme-dark .order-date,
body.theme-light .order-date {
    color: var(--text-muted);
}
body.theme-dark .order-footer,
body.theme-light .order-footer {
    border-top-color: var(--order-border);
}

/* --- Auth Pages --- */
body.theme-dark .auth-page,
body.theme-light .auth-page {
    background: linear-gradient(135deg,
        var(--auth-page-bg-from),
        var(--auth-page-bg-to)
    );
}
body.theme-dark .auth-card,
body.theme-light .auth-card {
    background: var(--auth-card-bg);
    box-shadow: var(--auth-card-shadow);
}
body.theme-dark .auth-logo h2,
body.theme-light .auth-logo h2 {
    color: var(--auth-heading);
}
body.theme-dark .auth-divider::before,
body.theme-dark .auth-divider::after,
body.theme-light .auth-divider::before,
body.theme-light .auth-divider::after {
    background: var(--auth-divider-line);
}

/* --- Profile / Settings Pages --- */
body.theme-dark .pg-sidebar,
body.theme-light .pg-sidebar {
    background: var(--pg-sidebar-bg);
    border-color: var(--pg-sidebar-border);
}

/* Sidebar avatar area */
body.theme-dark .pg-sidebar .profile-email,
body.theme-light .pg-sidebar .profile-email {
    color: var(--text-muted);
}

/* Sidebar nav links */
body.theme-dark .pg-sidebar a,
body.theme-light .pg-sidebar a {
    color: var(--pg-sidebar-text);
    border-bottom-color: var(--pg-divider);
}
body.theme-dark .pg-sidebar a:hover,
body.theme-dark .pg-sidebar a.active,
body.theme-light .pg-sidebar a:hover,
body.theme-light .pg-sidebar a.active {
    color: var(--pg-sidebar-active-text);
    background: var(--pg-sidebar-active-bg);
}

/* Settings content area */
body.theme-dark .pg-content,
body.theme-light .pg-content {
    background: var(--pg-content-bg);
    border-color: var(--pg-content-border);
}
body.theme-dark .pg-content h2,
body.theme-dark .pg-content h3,
body.theme-dark .pg-content h4,
body.theme-light .pg-content h2,
body.theme-light .pg-content h3,
body.theme-light .pg-content h4 {
    color: var(--text-heading);
}
body.theme-dark .pg-content p,
body.theme-light .pg-content p {
    color: var(--text-secondary);
}
body.theme-dark .pg-divider,
body.theme-light .pg-divider {
    border-color: var(--pg-divider);
}
body.theme-dark .divider-line,
body.theme-light .divider-line {
    border-top-color: var(--border-color);
}

/* --- Theme Cards (di Settings Tampilan) --- */
body.theme-dark .theme-card,
body.theme-light .theme-card {
    background: var(--theme-card-bg);
    border-color: var(--theme-card-border);
}
body.theme-dark .theme-card.selected,
body.theme-light .theme-card.selected {
    border-color: var(--theme-card-selected);
    box-shadow: 0 0 0 2px var(--theme-card-selected);
}
body.theme-dark .theme-label,
body.theme-light .theme-label {
    color: var(--theme-label-text);
}

/* --- Lang Cards --- */
body.theme-dark .lang-card,
body.theme-light .lang-card {
    background: var(--lang-card-bg);
    border-color: var(--lang-card-border);
    color: var(--lang-card-text);
}
body.theme-dark .lang-card.selected,
body.theme-light .lang-card.selected {
    background: var(--lang-card-selected-bg);
    border-color: var(--theme-card-selected);
    box-shadow: 0 0 0 2px var(--theme-card-selected);
}

/* --- Detail Product Page --- */
body.theme-dark .main-img,
body.theme-light .main-img {
    background: var(--bg-card-alt);
    border-color: var(--border-color);
}
body.theme-dark .detail-price-box,
body.theme-light .detail-price-box {
    background: var(--bg-card-alt);
}
body.theme-dark .detail-info h1,
body.theme-light .detail-info h1 {
    color: var(--text-heading);
}
body.theme-dark .detail-meta,
body.theme-light .detail-meta {
    border-top-color: var(--border-color);
}
body.theme-dark .detail-meta-label,
body.theme-light .detail-meta-label {
    color: var(--text-muted);
}
body.theme-dark .detail-meta-value,
body.theme-light .detail-meta-value {
    color: var(--text-primary);
}

/* --- Profile Sidebar (profile.php / settings.php) --- */
body.theme-dark .profile-sidebar,
body.theme-light .profile-sidebar {
    background: var(--pg-sidebar-bg);
    box-shadow: var(--card-shadow);
}
body.theme-dark .profile-content,
body.theme-light .profile-content {
    background: var(--pg-content-bg);
    box-shadow: var(--card-shadow);
}
body.theme-dark .profile-name,
body.theme-light .profile-name {
    color: var(--text-heading);
}
body.theme-dark .profile-email,
body.theme-light .profile-email {
    color: var(--text-muted);
}
body.theme-dark .profile-menu,
body.theme-light .profile-menu {
    border-top-color: var(--border-color);
}
body.theme-dark .profile-menu a,
body.theme-light .profile-menu a {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}
body.theme-dark .profile-menu a:hover,
body.theme-dark .profile-menu a.active,
body.theme-light .profile-menu a:hover,
body.theme-light .profile-menu a.active {
    color: var(--pg-sidebar-active-text);
}

/* --- Pagination --- */
body.theme-dark .page-btn,
body.theme-light .page-btn {
    border-color: var(--page-btn-border);
    color: var(--page-btn-text);
    background: var(--bg-card);
}
body.theme-dark .page-btn:hover,
body.theme-light .page-btn:hover {
    border-color: var(--amber);
    color: var(--amber);
}

/* --- WA Float Tooltip --- */
body.theme-dark .wa-tooltip,
body.theme-light .wa-tooltip {
    background: var(--tooltip-bg);
}

/* --- Footer --- */
body.theme-dark .footer,
body.theme-light .footer {
    background: var(--footer-bg);
    color: var(--footer-text);
}
body.theme-dark .footer-logo,
body.theme-light .footer-logo,
body.theme-dark .footer-col h4,
body.theme-light .footer-col h4 {
    color: var(--footer-heading);
}
body.theme-dark .footer-col ul a,
body.theme-light .footer-col ul a {
    color: var(--footer-link);
}
body.theme-dark .footer-social a,
body.theme-light .footer-social a {
    background: var(--footer-social-bg);
    color: var(--footer-link);
}
body.theme-dark .footer-bottom,
body.theme-light .footer-bottom {
    border-top-color: var(--footer-bottom-border);
}
body.theme-dark .payment-icons span,
body.theme-light .payment-icons span {
    background: var(--payment-icon-bg);
}

/* --- Admin Sidebar stays dark in both themes --- */
body.theme-light .admin-sidebar { background: #1a1208; }
body.theme-light .sidebar-brand { background: #0d0a05; color: #ffffff; }
body.theme-light .sidebar-link  { color: rgba(255,255,255,0.6); }
body.theme-light .sidebar-link:hover,
body.theme-light .sidebar-link.active { background: rgba(193,127,36,0.12); color: #c17f24; }
body.theme-light .sidebar-section { color: #888; }

/* --- Admin Content Area (light mode) --- */
body.theme-light .admin-content    { background: #f8f3ec; }
body.theme-light .admin-topbar     { background: #ffffff; border-bottom-color: #e8ddd0; }
body.theme-light .admin-topbar h4  { color: #3d2515; }
body.theme-light .admin-card       { background: #ffffff; box-shadow: 0 2px 10px rgba(107,58,42,0.08); }
body.theme-light .admin-card h3    { color: #3d2515; border-bottom-color: #e8ddd0; }
body.theme-light .admin-table th   { background: #fdf6ee; color: #3d2515; border-bottom-color: #e8ddd0; }
body.theme-light .admin-table td   { border-bottom-color: #f5ede0; color: #2c1d0e; }
body.theme-light .admin-table tr:hover td { background: #fdf6ee; }

/* --- Empty State --- */
body.theme-dark .empty-state h3,
body.theme-light .empty-state h3 {
    color: var(--text-heading);
}
body.theme-dark .empty-state,
body.theme-light .empty-state {
    color: var(--text-muted);
}

/* --- Misc text helpers --- */
body.theme-dark .text-muted,
body.theme-light .text-muted {
    color: var(--text-muted) !important;
}

/* --- Rating count --- */
body.theme-dark .rating-count,
body.theme-light .rating-count {
    color: var(--text-muted);
}

/* --- Cart table header stays brown in both themes --- */
body.theme-light .cart-table th {
    background: #5c3520;
    color: #ffffff;
}

/* =============================================
   LIGHT MODE — CUSTOM SECTION FIXES
   Card-card yang pakai hardcoded dark colors
   ============================================= */

/* === HERO — fix teks kena browser highlight biru === */
body.theme-light .hero h1,
body.theme-light .hero h1 *,
body.theme-light .hero p,
body.theme-light .hero .hero-badge,
body.theme-light .hero .ak-hero__title,
body.theme-light .hero .ak-hero__sub,
body.theme-light .hero .ak-hero__eyebrow {
    color: #ffffff !important;
    background: transparent !important;
    -webkit-text-fill-color: #ffffff;
}
body.theme-light .hero em,
body.theme-light .hero .ak-hero__title em {
    color: #c17f24 !important;
    -webkit-text-fill-color: #c17f24;
}

/* === GROSIR PAGE — dark cards fix === */
body.theme-light .export-hero,
body.theme-light .export-section,
body.theme-light [class*="export-"],
body.theme-light [class*="grosir-"] {
    color: var(--text-primary);
}

/* Dark card universal override untuk light mode */
body.theme-light [style*="background: #1a"],
body.theme-light [style*="background:#1a"],
body.theme-light [style*="background: #2"],
body.theme-light [style*="background:#2"],
body.theme-light [style*="background: rgb(26"],
body.theme-light [style*="background: rgb(30"],
body.theme-light [style*="background: rgb(37"] {
    background: #ffffff !important;
    color: #2c1d0e !important;
}

/* === CARA ORDER PAGE === */
/* Payment method cards */
body.theme-light .payment-card,
body.theme-light .payment-method,
body.theme-light [class*="payment-card"],
body.theme-light [class*="method-card"] {
    background: #ffffff !important;
    border: 1px solid #e2d5c5 !important;
    color: #2c1d0e !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.10) !important;
}
body.theme-light .payment-card h3,
body.theme-light .payment-card h4,
body.theme-light .payment-method h3,
body.theme-light .payment-method h4,
body.theme-light [class*="payment-card"] h3,
body.theme-light [class*="payment-card"] h4 {
    color: #2c1d0e !important;
}
body.theme-light .payment-card p,
body.theme-light .payment-method p,
body.theme-light [class*="payment-card"] p {
    color: #6b4c35 !important;
}

/* Shipping/pengiriman cards */
body.theme-light .shipping-card,
body.theme-light [class*="shipping-"],
body.theme-light [class*="pengiriman-"],
body.theme-light .delivery-card {
    background: #ffffff !important;
    border: 1px solid #e2d5c5 !important;
    color: #2c1d0e !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.10) !important;
}
body.theme-light .shipping-card h3,
body.theme-light .shipping-card h4,
body.theme-light [class*="shipping-"] h3,
body.theme-light [class*="shipping-"] h4 {
    color: #2c1d0e !important;
}
body.theme-light .shipping-card p,
body.theme-light [class*="shipping-"] p {
    color: #6b4c35 !important;
}

/* Icon box di dalam card cara order */
body.theme-light .icon-box,
body.theme-light .method-icon,
body.theme-light [class*="-icon-box"] {
    background: linear-gradient(135deg, #c17f24, #8b4513) !important;
    color: #ffffff !important;
}

/* Bank info table di cara order */
body.theme-light .bank-info,
body.theme-light .bank-row,
body.theme-light [class*="bank-"] {
    background: #fdf6ee !important;
    border-color: #e2d5c5 !important;
    color: #2c1d0e !important;
}

/* === TESTIMONI PAGE === */
body.theme-light .testi-card,
body.theme-light [class*="testi-card"],
body.theme-light [class*="testimonial-card"],
body.theme-light [class*="review-card"] {
    background: #ffffff !important;
    border: 1px solid #e8ddd0 !important;
    color: #2c1d0e !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.10) !important;
}
body.theme-light .testi-card .testi-text,
body.theme-light [class*="testi-card"] p {
    color: #4a3525 !important;
}
body.theme-light .testi-card .testi-name,
body.theme-light [class*="testi-card"] strong {
    color: #2c1d0e !important;
}
body.theme-light .testi-card .testi-role {
    color: #8a7060 !important;
}
/* Volume badge di testimoni */
body.theme-light [class*="volume-badge"],
body.theme-light [class*="testi-badge"],
body.theme-light [class*="ton-badge"] {
    background: #fdf0d8 !important;
    color: #8b4513 !important;
    border-color: #d4a060 !important;
}

/* === GROSIR — negara tujuan cards === */
body.theme-light .country-card,
body.theme-light [class*="country-"],
body.theme-light [class*="negara-"],
body.theme-light [class*="dest-card"] {
    background: #fdf6ee !important;
    border: 1px solid #e2d5c5 !important;
    color: #2c1d0e !important;
}
body.theme-light .country-card:hover,
body.theme-light [class*="country-"]:hover {
    background: #f5ede0 !important;
    border-color: #c17f24 !important;
}

/* Section background override — semua section di light mode */
body.theme-light section,
body.theme-light .section {
    background-color: transparent;
}
body.theme-light section[style*="background"],
body.theme-light .section[style*="background"] {
    /* Don't override hero & banner inline backgrounds */
}

/* Generic dark-background section fix */
body.theme-light [class*="-section"]:not(.hero):not(.banner-section):not(.footer),
body.theme-light [class*="-hero"]:not(.ak-hero) {
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Dark card yang pakai class ak- (custom classes dari PHP) */
body.theme-light [class*="ak-card"],
body.theme-light [class*="ak-box"],
body.theme-light [class*="ak-panel"] {
    background: #ffffff !important;
    color: #2c1d0e !important;
    border-color: #e2d5c5 !important;
}

/* === MANIFESTO / SPEC SECTION === */
body.theme-light .ak-manifesto,
body.theme-light [class*="manifesto"] {
    background: #f5ede0;
    color: #2c1d0e;
}
body.theme-light .ak-manifesto__label { color: #a0733a !important; }
body.theme-light .ak-manifesto__headline { color: #1e1208 !important; }
body.theme-light .ak-manifesto__headline em { color: #a0733a !important; }
body.theme-light .ak-manifesto__body { color: #3d2515 !important; }
body.theme-light [class*="spec-key"],
body.theme-light [class*="spec-val"] {
    color: #2c1d0e !important;
}

/* === PILLARS SECTION === */
body.theme-light [class*="pillar"],
body.theme-light [class*="ak-pillar"] {
    color: var(--text-primary);
}
body.theme-light [class*="pillar__title"],
body.theme-light [class*="pillar-title"] {
    color: #2c1d0e !important;
}
body.theme-light [class*="pillar__desc"],
body.theme-light [class*="pillar-desc"] {
    color: #6b4c35 !important;
}

/* === CTA SECTION (Testimoni CTA, Grosir CTA) === */
body.theme-light [class*="cta-section"],
body.theme-light [class*="-cta"] {
    background: linear-gradient(135deg, #5c3520, #3d2515);
    color: #ffffff;
}
body.theme-light [class*="cta-section"] h2,
body.theme-light [class*="cta-section"] p,
body.theme-light [class*="-cta"] h2,
body.theme-light [class*="-cta"] p {
    color: #ffffff !important;
}

/* === FAQ ACCORDION === */
body.theme-light .faq-item,
body.theme-light [class*="faq-"],
body.theme-light [class*="accordion-"] {
    background: #ffffff !important;
    border-color: #e2d5c5 !important;
    color: #2c1d0e !important;
}
body.theme-light .faq-item summary,
body.theme-light [class*="faq-"] summary,
body.theme-light [class*="accordion-"] summary,
body.theme-light .faq-question,
body.theme-light .accordion-header {
    color: #2c1d0e !important;
    background: #ffffff !important;
}
body.theme-light .faq-answer,
body.theme-light .accordion-body {
    color: #4a3525 !important;
    background: #fdf8f2 !important;
}

/* === STEP / TIMELINE CARDS (cara order steps) === */
body.theme-light .step-card,
body.theme-light [class*="step-"],
body.theme-light [class*="timeline-"] {
    background: #ffffff !important;
    border-color: #e2d5c5 !important;
    color: #2c1d0e !important;
}
body.theme-light [class*="step-"] h3,
body.theme-light [class*="step-"] h4 {
    color: #2c1d0e !important;
}
body.theme-light [class*="step-"] p {
    color: #6b4c35 !important;
}
body.theme-light .step-num,
body.theme-light [class*="step-num"] {
    background: linear-gradient(135deg, #c17f24, #8b4513) !important;
    color: #ffffff !important;
}

/* === KONTAK PAGE === */
body.theme-light .contact-card,
body.theme-light [class*="contact-card"],
body.theme-light [class*="kontak-card"] {
    background: #ffffff !important;
    border-color: #e2d5c5 !important;
    color: #2c1d0e !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.10) !important;
}

/* === GENERAL: semua card/box yang masih gelap === */
/* Tangkap class apapun yang mengandung -card, -box, -wrap, -block di light mode */
body.theme-light [class$="-card"]:not([class*="admin"]):not([class*="sidebar"]):not(.hero):not([class*="status-"]),
body.theme-light [class$="-box"]:not([class*="admin"]):not([class*="sidebar"]),
body.theme-light [class$="-block"]:not([class*="admin"]):not([class*="sidebar"]) {
    background-color: #ffffff;
    color: #2c1d0e;
    border-color: #e2d5c5;
}

/* Semua h2, h3, h4, p di dalam section yang bukan hero/banner/footer */
body.theme-light main h1,
body.theme-light main h2,
body.theme-light main h3,
body.theme-light main h4 {
    color: var(--text-heading);
}
body.theme-light main p:not(.hero p):not(.banner-content p) {
    color: var(--text-secondary);
}

/* === FOOTER — pastikan tetap gelap di light mode === */
body.theme-light .footer {
    background: #1e1208 !important;
    color: rgba(255,255,255,0.65) !important;
}
body.theme-light .footer * {
    /* Reset agar tidak kena override dari generic rules di atas */
}
body.theme-light .footer h4,
body.theme-light .footer .footer-logo,
body.theme-light .footer .footer-logo span + span {
    color: #ffffff !important;
}
body.theme-light .footer p,
body.theme-light .footer-brand p {
    color: rgba(255,255,255,0.6) !important;
}
body.theme-light .footer a {
    color: rgba(255,255,255,0.6) !important;
}
body.theme-light .footer a:hover {
    color: #c17f24 !important;
}
body.theme-light .footer-bottom {
    border-top-color: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.4) !important;
}
body.theme-light .footer-social a {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.6) !important;
}
body.theme-light .footer-social a:hover {
    background: #c17f24 !important;
    color: #ffffff !important;
}
body.theme-light .payment-icons span {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.7) !important;
}

/* === LOGO sub-text di navbar light mode === */
body.theme-light .logo-sub {
    color: #8a7060 !important;
}
body.theme-light .logo-name {
    color: #2c1d0e !important;
}

/* === NAV LINKS bar light mode — active underline === */
body.theme-light .nav-links a.active::after {
    background: #c17f24;
}

/* === BACK TO TOP & WA FLOAT text fix === */
body.theme-light .wa-tooltip {
    color: #ffffff;
}

/* =============================================
   LIGHT MODE — gr- PREFIX (grosir.php)
   co- PREFIX (cara-order.php & testimoni.php)

   MASALAH: tiap halaman punya inline <style>:
     body { background: var(--coal) !important; }
   dan semua card: background: #231508 hardcoded.
   Fix dengan override spesifik per-class + !important.
   ============================================= */

/* ── BODY: paksa background tetap terang ── */
body.theme-light {
    background: #fdf8f2 !important;
    color: #2c1d0e !important;
}

/* ─────────────────────────────────────────
   gr- PREFIX — grosir.php
   ───────────────────────────────────────── */

body.theme-light .gr-header {
    background: #f0e4d0 !important;
    border-bottom-color: rgba(107,58,42,0.15) !important;
}
body.theme-light .gr-header__title { color: #1e1208 !important; }
body.theme-light .gr-header__title em { color: #a0733a !important; }
body.theme-light .gr-header__meta { color: #8a6040 !important; }
body.theme-light .gr-header__crumb,
body.theme-light .gr-header__crumb a { color: #8a7060 !important; }
body.theme-light .gr-header__crumb a:hover { color: #a0733a !important; }

body.theme-light .gr-ticker { border-color: rgba(107,58,42,0.15) !important; }
body.theme-light .gr-ticker__item { color: rgba(107,58,42,0.45) !important; }

body.theme-light .gr-section-label { color: #a0733a !important; }
body.theme-light .gr-section-title { color: #1e1208 !important; }
body.theme-light .gr-section-title em { color: #a0733a !important; }
body.theme-light .gr-section-sub { color: #8a7060 !important; }
body.theme-light .gr-divider { background: linear-gradient(90deg, #a0733a, transparent) !important; }

body.theme-light .gr-card {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.15) !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.08) !important;
}
body.theme-light .gr-card:hover {
    box-shadow: 0 12px 40px rgba(107,58,42,0.15) !important;
    border-color: rgba(160,115,58,0.4) !important;
}
body.theme-light .gr-card__title { color: #1e1208 !important; }
body.theme-light .gr-card__body { color: #6b4c35 !important; }

body.theme-light .gr-stat {
    background: #fdf6ee !important;
    border-color: rgba(160,115,58,0.2) !important;
}
body.theme-light .gr-stat__num { color: #a0733a !important; }
body.theme-light .gr-stat__label { color: #8a7060 !important; }

body.theme-light .gr-table-wrap {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.15) !important;
}
body.theme-light .gr-table-header {
    background: linear-gradient(135deg, #5c3a1e, #3d2410) !important;
}
body.theme-light .gr-table-header h3 { color: #f2e8d8 !important; }
body.theme-light .gr-table thead tr {
    background: #fdf6ee !important;
    border-bottom-color: rgba(107,58,42,0.15) !important;
}
body.theme-light .gr-table th { color: #8a7060 !important; }
body.theme-light .gr-table tbody tr { border-bottom-color: rgba(107,58,42,0.08) !important; }
body.theme-light .gr-table tbody tr:hover { background: #fdf6ee !important; }
body.theme-light .gr-table td { color: #2c1d0e !important; }
body.theme-light .gr-table td.price { color: #a0733a !important; }
body.theme-light .gr-table .badge-nego {
    background: rgba(160,115,58,0.1) !important;
    color: #a0733a !important;
    border-color: rgba(160,115,58,0.25) !important;
}

body.theme-light .gr-ekspor-box {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.15) !important;
}
body.theme-light .gr-check-item {
    color: #2c1d0e !important;
    border-bottom-color: rgba(107,58,42,0.08) !important;
}
body.theme-light .gr-check-item i { color: #a0733a !important; }
body.theme-light .gr-country-item {
    background: rgba(160,115,58,0.06) !important;
    border-color: rgba(107,58,42,0.12) !important;
    color: #2c1d0e !important;
}
body.theme-light .gr-country-item:hover {
    background: rgba(160,115,58,0.12) !important;
    border-color: rgba(160,115,58,0.3) !important;
}

body.theme-light .gr-step__title { color: #1e1208 !important; }
body.theme-light .gr-step__desc { color: #8a7060 !important; }

body.theme-light .gr-spec-item {
    background: rgba(160,115,58,0.05) !important;
    border-color: rgba(107,58,42,0.12) !important;
}
body.theme-light .gr-spec-item:hover { border-color: rgba(160,115,58,0.3) !important; }
body.theme-light .gr-spec-item__label { color: #8a7060 !important; }
body.theme-light .gr-spec-item__value { color: #2c1d0e !important; }
body.theme-light .gr-spec-item__note { color: #8a7060 !important; }

body.theme-light .gr-form-box {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.2) !important;
    box-shadow: 0 4px 20px rgba(107,58,42,0.08) !important;
}
body.theme-light .gr-form-input {
    background: #fdf8f2 !important;
    border-color: rgba(107,58,42,0.2) !important;
    color: #2c1d0e !important;
}
body.theme-light .gr-form-input::placeholder { color: #b0937a !important; }
body.theme-light .gr-form-input:focus { border-color: rgba(160,115,58,0.5) !important; }
body.theme-light .gr-form-input option { background: #ffffff !important; color: #2c1d0e !important; }
body.theme-light .gr-form-label { color: #8a7060 !important; }
body.theme-light .gr-form-label span { color: #a0733a !important; }

body.theme-light .gr-testi-card {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.12) !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.08) !important;
}
body.theme-light .gr-testi-card:hover {
    border-color: rgba(160,115,58,0.3) !important;
    box-shadow: 0 8px 30px rgba(107,58,42,0.15) !important;
}
body.theme-light .gr-testi-text { color: #4a3525 !important; }
body.theme-light .gr-testi-author { border-top-color: rgba(107,58,42,0.1) !important; }
body.theme-light .gr-testi-name { color: #1e1208 !important; }
body.theme-light .gr-testi-role { color: #8a7060 !important; }

body.theme-light .gr-cta {
    background: linear-gradient(135deg, #3d2410 0%, #1c1610 100%) !important;
}
body.theme-light .gr-cta__title { color: #faf6f0 !important; }
body.theme-light .gr-cta__title em { color: #c8a46e !important; }
body.theme-light .gr-cta__sub { color: rgba(200,164,110,0.6) !important; }

body.theme-light .gr-contact-item {
    background: rgba(160,115,58,0.06) !important;
    border-color: rgba(107,58,42,0.12) !important;
}
body.theme-light .gr-contact-item__label { color: #8a7060 !important; }
body.theme-light .gr-contact-item__value { color: #2c1d0e !important; }

body.theme-light .gr-badge {
    background: rgba(160,115,58,0.08) !important;
    border-color: rgba(160,115,58,0.2) !important;
    color: #a0733a !important;
}

/* ─────────────────────────────────────────
   co- PREFIX — cara-order.php & testimoni.php
   ───────────────────────────────────────── */

body.theme-light .co-header {
    background: #f0e4d0 !important;
    border-bottom-color: rgba(107,58,42,0.15) !important;
}
body.theme-light .co-header__title { color: #1e1208 !important; }
body.theme-light .co-header__title em { color: #a0733a !important; }
body.theme-light .co-header__meta { color: #8a6040 !important; }
body.theme-light .co-header__crumb,
body.theme-light .co-header__crumb a { color: #8a7060 !important; }
body.theme-light .co-header__crumb a:hover { color: #a0733a !important; }

body.theme-light .co-ticker { border-color: rgba(107,58,42,0.15) !important; }
body.theme-light .co-ticker__item { color: rgba(107,58,42,0.45) !important; }

body.theme-light .co-section-label { color: #a0733a !important; }
body.theme-light .co-section-title { color: #1e1208 !important; }
body.theme-light .co-section-title em { color: #a0733a !important; }
body.theme-light .co-section-sub { color: #8a7060 !important; }
body.theme-light .co-divider { background: linear-gradient(90deg, #a0733a, transparent) !important; }

body.theme-light .co-card {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.15) !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.08) !important;
}
body.theme-light .co-card:hover {
    box-shadow: 0 12px 40px rgba(107,58,42,0.15) !important;
    border-color: rgba(160,115,58,0.4) !important;
}
body.theme-light .co-card__title { color: #1e1208 !important; }
body.theme-light .co-card__body { color: #6b4c35 !important; }

body.theme-light .co-stat {
    background: #fdf6ee !important;
    border-color: rgba(160,115,58,0.2) !important;
}
body.theme-light .co-stat__num { color: #a0733a !important; }
body.theme-light .co-stat__label { color: #8a7060 !important; }

body.theme-light .co-step__content {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.15) !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.06) !important;
}
body.theme-light .co-step__content:hover {
    border-color: rgba(160,115,58,0.35) !important;
    box-shadow: 0 8px 30px rgba(107,58,42,0.15) !important;
}
body.theme-light .co-step__badge {
    background: rgba(160,115,58,0.1) !important;
    border-color: rgba(160,115,58,0.2) !important;
    color: #a0733a !important;
}
body.theme-light .co-step__title { color: #1e1208 !important; }
body.theme-light .co-step__desc { color: #6b4c35 !important; }
body.theme-light .co-step__tips {
    background: rgba(160,115,58,0.06) !important;
    border-left-color: #a0733a !important;
    color: #6b4c35 !important;
}
body.theme-light .co-step__tips strong { color: #a0733a !important; }
body.theme-light .co-step__connector {
    background: linear-gradient(to bottom, rgba(107,58,42,0.25), transparent) !important;
}

body.theme-light .co-pay-card {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.15) !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.08) !important;
}
body.theme-light .co-pay-card:hover {
    box-shadow: 0 12px 40px rgba(107,58,42,0.15) !important;
    border-color: rgba(160,115,58,0.4) !important;
}
body.theme-light .co-rekening-row { border-bottom-color: rgba(107,58,42,0.1) !important; }
body.theme-light .co-rekening-bank { color: #8a7060 !important; }
body.theme-light .co-rekening-no { color: #2c1d0e !important; }

body.theme-light .co-ship-card {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.15) !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.08) !important;
}
body.theme-light .co-ship-card:hover {
    box-shadow: 0 12px 40px rgba(107,58,42,0.15) !important;
    border-color: rgba(160,115,58,0.4) !important;
}
body.theme-light .co-ship-price {
    background: rgba(160,115,58,0.1) !important;
    border-color: rgba(160,115,58,0.2) !important;
    color: #a0733a !important;
}

body.theme-light .co-faq-item {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.12) !important;
}
body.theme-light .co-faq-item:hover { border-color: rgba(160,115,58,0.3) !important; }
body.theme-light .co-faq-btn { background: #ffffff !important; }
body.theme-light .co-faq-btn__q { color: #1e1208 !important; }
body.theme-light .co-faq-btn__q i { color: #a0733a !important; }
body.theme-light .co-faq-btn__icon { color: #a0733a !important; }
body.theme-light .co-faq-answer__inner {
    border-top-color: rgba(107,58,42,0.1) !important;
    color: #6b4c35 !important;
}

body.theme-light .co-rating-wrap {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.15) !important;
    box-shadow: 0 4px 20px rgba(107,58,42,0.08) !important;
}
body.theme-light .co-rating-big { border-right-color: rgba(107,58,42,0.1) !important; }
body.theme-light .co-rating-big__num { color: #a0733a !important; }
body.theme-light .co-rating-big__sub { color: #8a7060 !important; }
body.theme-light .co-rating-big__badge {
    background: rgba(160,115,58,0.1) !important;
    border-color: rgba(160,115,58,0.2) !important;
    color: #a0733a !important;
}
body.theme-light .co-rating-bar-label,
body.theme-light .co-rating-bar-count { color: #8a7060 !important; }
body.theme-light .co-rating-bar-track { background: rgba(107,58,42,0.1) !important; }

body.theme-light .co-featured {
    background: linear-gradient(135deg, #3d2410 0%, #1c1610 100%) !important;
    border-color: rgba(200,164,110,0.2) !important;
}
body.theme-light .co-featured__text { color: #f2e8d8 !important; }
body.theme-light .co-featured__name { color: #f2e8d8 !important; }
body.theme-light .co-featured__role { color: rgba(200,164,110,0.6) !important; }

body.theme-light .co-testi-card {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.12) !important;
    box-shadow: 0 4px 16px rgba(107,58,42,0.08) !important;
}
body.theme-light .co-testi-card:hover {
    box-shadow: 0 12px 40px rgba(107,58,42,0.15) !important;
    border-color: rgba(160,115,58,0.3) !important;
}
body.theme-light .co-testi-card__text { color: #4a3525 !important; }
body.theme-light .co-testi-card__vol {
    background: rgba(160,115,58,0.1) !important;
    border-color: rgba(160,115,58,0.2) !important;
    color: #a0733a !important;
}
body.theme-light .co-testi-card__author { border-top-color: rgba(107,58,42,0.1) !important; }
body.theme-light .co-testi-card__name { color: #1e1208 !important; }
body.theme-light .co-testi-card__role { color: #8a7060 !important; }

body.theme-light .co-ulasan-card {
    background: #ffffff !important;
    border-color: rgba(107,58,42,0.1) !important;
}
body.theme-light .co-ulasan-card:hover { border-color: rgba(160,115,58,0.25) !important; }
body.theme-light .co-ulasan-name { color: #1e1208 !important; }
body.theme-light .co-ulasan-produk { color: #8a7060 !important; }
body.theme-light .co-ulasan-produk a { color: #a0733a !important; }
body.theme-light .co-ulasan-date { color: #aaa090 !important; }
body.theme-light .co-ulasan-judul { color: #1e1208 !important; }
body.theme-light .co-ulasan-komentar { color: #6b4c35 !important; }

body.theme-light .co-negara-chip {
    background: rgba(160,115,58,0.07) !important;
    border-color: rgba(107,58,42,0.15) !important;
    color: #6b4c35 !important;
}
body.theme-light .co-negara-chip:hover {
    background: rgba(160,115,58,0.15) !important;
    border-color: rgba(160,115,58,0.3) !important;
    color: #a0733a !important;
}

body.theme-light .co-cta {
    background: linear-gradient(135deg, #3d2410 0%, #1c1610 100%) !important;
}
body.theme-light .co-cta__title { color: #faf6f0 !important; }
body.theme-light .co-cta__title em { color: #c8a46e !important; }
body.theme-light .co-cta__sub { color: rgba(200,164,110,0.6) !important; }

/* ── HERO teks — hapus browser highlight biru ── */
body.theme-light .hero h1,
body.theme-light .hero h1 *,
body.theme-light .hero .ak-hero__title,
body.theme-light .hero .ak-hero__title * {
    background: transparent !important;
    -webkit-text-fill-color: #ffffff;
}
body.theme-light .hero em,
body.theme-light .hero .ak-hero__title em {
    -webkit-text-fill-color: #c17f24 !important;
}


/* =============================================
   HERO TEKS FIX — light mode invisible text
   Teks keliatan pas di-blok = warna sama dgn bg
   ============================================= */

/* Force semua elemen di dalam hero jadi visible putih */
body.theme-light .hero *,
body.theme-light .ak-hero * {
    background-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Em/italic = amber */
body.theme-light .hero em,
body.theme-light .ak-hero em,
body.theme-light [class*="hero__title"] em {
    color: #c8a46e !important;
    -webkit-text-fill-color: #c8a46e !important;
}

/* Eyebrow */
body.theme-light [class*="hero__eyebrow"],
body.theme-light [class*="hero-eyebrow"] {
    color: rgba(255,255,255,0.6) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.6) !important;
}

/* Sub */
body.theme-light [class*="hero__sub"],
body.theme-light [class*="hero-sub"] {
    color: rgba(255,255,255,0.82) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.82) !important;
}

/* Stat */
body.theme-light [class*="stat__num"],
body.theme-light [class*="hero-stat-num"] {
    color: #c8a46e !important;
    -webkit-text-fill-color: #c8a46e !important;
}
body.theme-light [class*="stat__label"],
body.theme-light [class*="hero-stat-label"] {
    color: rgba(255,255,255,0.6) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.6) !important;
}

/* Tombol di hero — jangan kena override */
body.theme-light .hero [class*="btn"],
body.theme-light .ak-hero [class*="btn"] {
    color: inherit !important;
    -webkit-text-fill-color: unset !important;
}

/* =============================================
   INDEX.PHP HERO — FINAL FIX
   .ak-hero__title  → color: var(--earth-50)
   .ak-hero__sub    → color: rgba(242,232,216,.65)
   Keduanya hardcoded, tidak terbaca di light mode
   ============================================= */

body.theme-light .ak-hero__title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.theme-light .ak-hero__title em {
    color: #c8a46e !important;
    -webkit-text-fill-color: #c8a46e !important;
}
body.theme-light .ak-hero__sub {
    color: rgba(255,255,255,0.85) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}
body.theme-light .ak-hero__eyebrow {
    color: rgba(255,255,255,0.65) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
}

/* ak-reveal — force visible di light mode supaya tidak stuck opacity:0 */
body.theme-light .ak-reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}