/* =========================================
   1. RESET & VARIABEL UTAMA
   ========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f5f5f5;
  overflow-x: hidden; /* Mencegah scroll samping pada body utama */
}

:root {
  --dark-bg: #1a1e23;       /* Header Hitam */
  --top-bar-bg: #131619;    /* Top Bar Gelap */
  --accent-orange: #ff6600; /* Aksen Oranye */
  --text-white: #ffffff;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Utilities */
.mt-20 { margin-top: 20px; }
.section-title {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 700;
  color: #333;
}
a { text-decoration: none; }

/* =========================================
   2. HEADER & TOP BAR
   ========================================= */

/* Top Bar (Baris paling atas) */
.top-bar {
  background-color: var(--top-bar-bg);
  color: #aaa;
  padding: 8px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  border-bottom: 1px solid #333;
  position: relative;
  z-index: 1001;
}

.top-links a { color: #aaa; margin-right: 10px; }
.top-links span { margin-right: 10px; }

/* Dark Mode Switch */
.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: 0.4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-orange); }
input:checked + .slider:before { transform: translateX(16px); }

/* --- HEADER UTAMA (STICKY) --- */
.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: var(--dark-bg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.main-header {
  padding: 15px 0;
  width: 100%;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.logo img {
  height: 50px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* Search Bar */
.search-container {
  flex-grow: 1;
  max-width: 600px;
  position: relative; /* Untuk dropdown live search */
}
.search-container form { display: flex; width: 100%; }
.search-container input {
  width: 100%;
  padding: 12px 20px;
  border-radius: 50px 0 0 50px;
  border: none;
  outline: none;
}
.search-container button {
  border-radius: 0 50px 50px 0;
  padding: 0 25px;
  background: white;
  border-left: 1px solid #eee;
  cursor: pointer;
}

/* Header Icons */
.header-icons {
  display: flex;
  gap: 15px;
  flex-shrink: 0;
  align-items: center;
}
.icon-link {
  color: white;
  font-size: 20px;
  transition: 0.3s;
}
.icon-link:hover { color: var(--accent-orange); }

/* Live Search Dropdown */
.search-dropdown {
  position: absolute;
  top: 100%; left: 0; width: 100%;
  background: white;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  display: none;
  overflow: hidden;
}
.search-item {
  display: flex; align-items: center; padding: 10px 15px;
  border-bottom: 1px solid #f5f5f5; color: #333; transition: 0.2s;
}
.search-item:hover { background-color: #f9f9f9; }
.search-item img { width: 40px; height: 40px; object-fit: contain; margin-right: 15px; }
.search-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.search-price { font-size: 12px; color: #ff6600; font-weight: bold; }
.search-view-all {
  display: block; padding: 12px; text-align: center;
  background: #fcfcfc; color: #333; font-size: 13px;
}
.search-view-all:hover { background: #ff6600; color: white; }

/* =========================================
   3. HERO SLIDER (BANNER UTAMA)
   ========================================= */
.hero-section {
  padding-top: 20px;
  padding-bottom: 30px;
}
.slider-container {
  position: relative;
  max-width: 100%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.slide { display: none; }
.slide.active { display: block; animation: fade 1.5s; }
.slide img {
  width: 100%;
  height: 400px; /* Tinggi Desktop */
  object-fit: cover;
  object-position: center;
  display: block;
}
@keyframes fade { from { opacity: 0.8; } to { opacity: 1; } }

/* Tombol Navigasi Slider */
.prev-btn, .next-btn {
  cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%);
  width: 45px; height: 45px;
  display: flex; justify-content: center; align-items: center;
  border-radius: 50%; border: none;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 5; font-weight: bold; transition: 0.3s;
}
.next-btn { right: 20px; }
.prev-btn { left: 20px; }
.prev-btn:hover, .next-btn:hover { background: white; transform: translateY(-50%) scale(1.1); }

/* Dots Slider */
.dots-container { position: absolute; bottom: 15px; width: 100%; text-align: center; }
.dot {
  cursor: pointer; height: 8px; width: 8px; margin: 0 4px;
  background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; display: inline-block;
}
.dot.active, .dot:hover { background-color: #ff6600; transform: scale(1.2); }

/* =========================================
   4. KATEGORI (RATA KIRI)
   ========================================= */
.categories-section {
  background-color: #1a1e23;
  padding: 40px 0;
  text-align: left;
}
.categories-section .section-title { color: white; margin-bottom: 30px; }
.category-grid {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.cat-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 15px;
  background: rgba(255, 255, 255, 0.05);
  padding: 15px 25px; border-radius: 12px;
  color: #bbb; font-size: 14px; font-weight: 500;
  min-width: 200px; transition: 0.3s;
}
.cat-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; transform: translateX(5px); }
.cat-icon {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; flex-shrink: 0;
}
.cat-item:hover .cat-icon { border-color: #d9531e; background: #d9531e; }

/* =========================================
   5. PROMO SECTION (HORIZONTAL SCROLL)
   ========================================= */
.promo-section {
  background-color: #1a1e23;
  padding: 40px 0;
}
.promo-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  scrollbar-width: none; /* Firefox */
}
.promo-grid::-webkit-scrollbar { display: none; } /* Chrome */

.promo-banner {
  min-width: 500px; /* Lebar Desktop */
  border-radius: 15px; overflow: hidden;
  flex-shrink: 0; position: relative; transition: transform 0.3s;
}
.promo-banner:hover { transform: translateY(-5px); }
.promo-banner img { width: 100%; height: auto; display: block; }

/* Tombol Promo Desktop */
.promo-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: white; width: 45px; height: 45px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); cursor: pointer; border: none;
}
.promo-nav:hover { background: #ff6600; color: white; }
.promo-nav.left { left: -20px; }
.promo-nav.right { right: -20px; }

/* =========================================
   6. BRANDS SECTION (JENAMA)
   ========================================= */
.brands-section {
  background-color: #d9531e;
  padding: 20px 0 30px 0;
}
.brand-wrapper { position: relative; display: flex; align-items: center; }
.brand-grid {
  display: flex; gap: 20px; width: 100%;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  padding: 10px 0;
}
.brand-grid::-webkit-scrollbar { display: none; }
.brand-card {
  background: white; min-width: 130px; height: 80px;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); flex-shrink: 0; padding: 10px;
}
.brand-card img { max-width: 80%; max-height: 80%; object-fit: contain; }

/* Navigasi Brand (Tombol Panah) */
.nav-arrow {
  background: white; border: none; border-radius: 50%; width: 40px; height: 40px;
  color: #d9531e; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 2; transition: 0.3s;
}
.nav-arrow:hover { background: #f0f0f0; transform: scale(1.1); }
/* Di desktop tombol ini biasanya diatur manual posisinya via HTML atau disembunyikan jika tidak perlu */

/* =========================================
   7. PRODUCT GRID & REKOMENDASI
   ========================================= */
.products-section { padding: 40px 0; }
.section-header-flex {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px;
}
.custom-tabs { display: flex; gap: 5px; }
.tab-item {
  background: #333; color: white; border: none; padding: 8px 15px;
  border-radius: 5px 5px 0 0; font-size: 12px; cursor: pointer;
}
.tab-item.active {
  background: white; color: #333; border: 1px solid #ddd; border-bottom: none; font-weight: bold;
}
.btn-orange {
  background-color: #d9531e; color: white; padding: 8px 15px; border-radius: 5px; font-size: 12px;
}

/* Grid Produk Desktop (4 Kolom) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.product-card {
  background: white; border-radius: 12px; padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); position: relative;
  border: 1px solid #eee; transition: transform 0.2s;
  display: flex; flex-direction: column; height: 100%;
}
.product-card:hover { transform: translateY(-5px); }

.prod-img {
  height: 200px; width: 100%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; overflow: hidden;
}
.prod-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.prod-info { display: flex; flex-direction: column; flex-grow: 1; }
.prod-info h4 {
  font-size: 14px; margin-bottom: 5px; color: #333; line-height: 1.4em;
  height: 2.8em; overflow: hidden; /* Batasi 2 baris */
}
.prod-info .tags {
  font-size: 10px; color: #888; background: #f0f0f0;
  padding: 2px 5px; border-radius: 4px; margin-bottom: 5px; width: fit-content;
}
.prod-info .price { font-weight: bold; font-size: 16px; color: #111; margin-top: auto; }
.cart-btn {
  position: absolute; bottom: 15px; right: 15px; background: none; border: none;
  color: #999; font-size: 18px; cursor: pointer;
}
.cart-btn:hover { color: #d9531e; }

/* Tombol Nav Produk (Hanya Muncul di Mobile) */
.prod-nav { display: none; }

/* =========================================
   8. TESTIMONIALS
   ========================================= */
.testimonials-section { background-color: #f5f5f5; padding: 50px 0; }
.testi-wrapper { position: relative; display: flex; align-items: center; justify-content: center; }
.testi-grid {
  display: flex; gap: 20px; width: 100%;
  overflow-x: auto; scrollbar-width: none; padding: 10px 5px;
}
.testi-grid::-webkit-scrollbar { display: none; }

.testi-card {
  background: white; padding: 25px; border-radius: 15px;
  border: 1px solid #ffdecb; box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  min-width: 300px; width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: space-between; min-height: 200px;
}
.testi-card h4 { color: #333; margin-bottom: 10px; font-size: 16px; }
.review-text { font-size: 13px; color: #666; line-height: 1.6; font-style: italic; margin-bottom: 20px; }
.reviewer-name strong { display: block; color: #333; font-size: 14px; }
.reviewer-name .line { display: block; width: 50px; height: 2px; background: #ccc; margin-top: 5px; }

/* =========================================
   9. FOOTER
   ========================================= */
.main-footer {
  background-color: #131619; color: #aaa; padding: 60px 0 20px 0; font-size: 14px;
}
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px; gap: 30px; }
.footer-col { flex: 1; min-width: 200px; }
.info-col { flex: 2; padding-right: 50px; }

.footer-logo { display: flex; align-items: center; gap: 10px; color: white; font-weight: bold; font-size: 18px; margin-bottom: 15px; }
.logo-icon-small { background: white; color: #131619; width: 30px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; }

.contact-info h5, .footer-col h5 { color: white; margin-bottom: 15px; font-size: 16px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #aaa; transition: 0.3s; }
.footer-col ul li a:hover { color: #d9531e; }

.footer-line { border: 0; border-top: 1px solid #333; margin: 20px 0; }

.social-icons { display: flex; gap: 10px; flex-wrap: wrap; }
.so-icon {
  width: 40px; height: 40px; background: #222; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: white; transition: 0.3s;
}
.so-icon:hover { background: #d9531e; } /* Default hover */

/* Pembayaran Footer */
.pay-icons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pay-logo {
  height: 35px; width: auto; background: white; padding: 3px 8px;
  border-radius: 4px; object-fit: contain; border: 1px solid #ddd; transition: transform 0.3s;
}
.pay-logo:hover { transform: scale(1.05); }

.copyright { text-align: center; font-size: 12px; color: #666; margin-top: 30px; }

/* =========================================
   10. HALAMAN LAIN (FAQ / DETAIL)
   ========================================= */
/* FAQ */
.faq-layout { display: flex; gap: 40px; margin-top: 20px; }
.faq-sidebar { flex: 1; max-width: 250px; background: white; padding: 20px; border-radius: 12px; height: fit-content; }
.faq-content { flex: 3; background: white; padding: 40px; border-radius: 12px; }
.faq-item { border: 1px solid #eee; border-radius: 8px; margin-bottom: 15px; overflow: hidden; }
.faq-summary { background: #fff; padding: 15px 20px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; }
.faq-answer { padding: 20px; color: #555; border-top: 1px solid #f9f9f9; }

/* Qty Box (Halaman Detail) */
.qty-box { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.qty-box > span:first-child { font-weight: 600; font-size: 14px; min-width: 70px; }
.qty-input { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 5px; }
.qty-box > span:last-child { width: 100%; font-size: 12px; color: #888; margin-top: -5px; display: block; }

/* =======================================================
   11. RESPONSIVE MOBILE (MAX-WIDTH: 768px)
   ======================================================= */
@media (max-width: 768px) {
  
  /* --- HEADER MOBILE --- */
  .header-content { flex-wrap: nowrap; gap: 10px; padding: 0 10px; }
  
  .logo { flex-shrink: 1; min-width: 0; margin-right: 5px; }
  .logo img { height: 35px; max-width: 150px; } /* Logo mengecil */
  
  .search-container {
    flex-grow: 1; width: auto; margin: 0;
    position: static; /* Dropdown menyesuaikan */
  }
  .search-container input { padding: 8px 15px; font-size: 13px; }
  .search-container button { padding: 0 15px; }
  
  .header-icons { gap: 8px; }
  .icon-link { font-size: 18px; }

  /* --- HERO BANNER MOBILE --- */
  .slide img { height: 200px; }
  .prev-btn, .next-btn { width: 35px; height: 35px; font-size: 14px; }

  /* --- KATEGORI MOBILE --- */
  .category-grid { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; gap: 15px; }
  .category-grid::-webkit-scrollbar { display: none; }
  .cat-item { min-width: 160px; padding: 12px 15px; font-size: 13px; }
  .cat-icon { width: 35px; height: 35px; font-size: 16px; }

  /* --- PROMO SECTION (1 GAMBAR FULL + SNAP) --- */
  .promo-grid {
    flex-direction: row; gap: 0;
    scroll-snap-type: x mandatory; /* Efek Magnet */
  }
  .promo-banner {
    min-width: 100%; width: 100%; margin: 0;
    scroll-snap-align: center; /* Magnet ke tengah */
    padding: 0 5px; /* Jarak aman kiri kanan */
  }
  .promo-nav {
    width: 30px; height: 30px; font-size: 12px;
    background: rgba(255, 255, 255, 0.8);
  }
  .promo-nav.left { left: 5px; }
  .promo-nav.right { right: 5px; }

  /* --- BRAND / JENAMA MOBILE --- */
  .brand-grid { display: flex; overflow-x: auto; padding: 10px 0; gap: 15px; }
  .brand-wrapper .nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 30px; height: 30px; font-size: 12px;
    background: rgba(255, 255, 255, 0.9);
  }
  .brand-wrapper .nav-arrow.left { left: -10px; }
  .brand-wrapper .nav-arrow.right { right: -10px; }

  /* --- PRODUCT GRID MOBILE (HORIZONTAL SLIDER) --- */
  .product-grid {
    display: flex; /* Ubah dari Grid ke Flex Horizontal */
    overflow-x: auto;
    gap: 15px;
    padding: 10px 5px;
    grid-template-columns: none;
    scrollbar-width: none;
  }
  .product-grid::-webkit-scrollbar { display: none; }
  
  .product-card {
    min-width: 200px; max-width: 200px; flex-shrink: 0;
  }
  
  /* Munculkan Tombol Panah Produk di HP */
  .relative-wrapper { position: relative; } /* Tambahkan class ini di HTML parent product-grid jika belum ada */
  
  .prod-nav {
    display: flex; /* Munculkan */
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 35px; height: 35px; background: rgba(255, 255, 255, 0.9);
    border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    align-items: center; justify-content: center; color: #ff6600;
  }
  .prod-nav.left { left: -10px; }
  .prod-nav.right { right: -10px; }

  /* --- TESTIMONI MOBILE --- */
  .testi-grid { flex-direction: row; overflow-x: auto; gap: 15px; align-items: stretch; }
  .testi-card { min-width: 280px; width: 280px; margin-bottom: 0; }
  .testi-wrapper .nav-arrow {
    position: absolute; width: 35px; height: 35px;
    background: rgba(255, 255, 255, 0.9);
  }
  .testi-wrapper .nav-arrow.left { left: -15px; }
  .testi-wrapper .nav-arrow.right { right: -15px; }

  /* --- FOOTER & FAQ MOBILE --- */
  .footer-top { flex-direction: column; gap: 30px; }
  .info-col { padding-right: 0; }
  .faq-layout { flex-direction: column; }
  .faq-sidebar { order: 2; max-width: 100%; }
  .faq-content { order: 1; padding: 25px; }
  
  .section-header-flex { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- UPDATE PERBAIKAN REVISI --- */

/* 1. Judul Section (Jenama & Promo) jadi Putih */
.section-title.white-text {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Biar makin jelas */
}

/* 2. Merk HP (Brand) di dalam Card jadi Hitam Tegas */
.prod-info small {
    color: #000000 !important; /* Hitam pekat */
    font-weight: 700 !important; /* Tebal */
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 1 !important;
}

/* 3. Tombol Navigasi Promo (Kiri Kanan) */
.promo-section .relative-wrapper {
    position: relative;
}

.promo-nav {
    display: flex !important; /* Paksa muncul */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 45px; 
    height: 45px;
    background: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    border: none;
    color: #333;
    transition: 0.3s;
}
.promo-nav:hover {
    background: #ff6600;
    color: white;
}
.promo-nav.left { left: -20px; }
.promo-nav.right { right: -20px; }

/* 4. Penyesuaian Card di Halaman Detail (Agar sama persis dgn Index) */
.rel-scroll-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 5px;
    scroll-behavior: smooth;
    align-items: stretch; /* Tinggi kartu sama */
}
/* Sembunyikan scrollbar */
.rel-scroll-container::-webkit-scrollbar { display: none; }

/* Paksa product-card di dalam detail.php agar ukurannya pas */
.rel-scroll-container .product-card {
    min-width: 220px; /* Lebar tetap agar tidak gepeng */
    max-width: 220px;
    flex-shrink: 0;   /* Jangan mengecil */
    margin-bottom: 0;
}

/* Responsif Mobile untuk tombol Promo */
@media (max-width: 768px) {
    .promo-nav {
        width: 35px; height: 35px; font-size: 14px;
        background: rgba(255,255,255,0.8);
    }
    .promo-nav.left { left: 5px; }
    .promo-nav.right { right: 5px; }
    
    .rel-scroll-container .product-card {
        min-width: 180px;
        max-width: 180px;
    }
}

/* =========================================
   FITUR DARK MODE (PREMIUM BLACK)
   ========================================= */

/* Warna Variabel Dark Mode */
body.dark-mode {
  background-color: #121212 !important; /* Hitam Pekat */
  color: #e0e0e0;
}

/* 1. Ubah Kartu Produk & Testimoni jadi Gelap */
body.dark-mode .product-card,
body.dark-mode .testi-card,
body.dark-mode .brand-card,
body.dark-mode .faq-item,
body.dark-mode .faq-content,
body.dark-mode .faq-sidebar,
body.dark-mode .content-card,
body.dark-mode .order-card,
body.dark-mode .form-section,
body.dark-mode .cart-item,
body.dark-mode .cart-summary,
body.dark-mode .desc-box,
body.dark-mode .product-wrapper,
body.dark-mode .related-wrapper,
body.dark-mode .cat-tab-item {
  background-color: #1e1e1e !important; /* Abu Gelap Elegan */
  border-color: #333 !important;
  color: #e0e0e0 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Bayangan lebih dalam */
}

/* 2. Ubah Teks Judul & Paragraf */
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5,
body.dark-mode .section-title.dark-text,
body.dark-mode .prod-link,
body.dark-mode strong,
body.dark-mode .faq-summary,
body.dark-mode .cat-item {
  color: #ffffff !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode .review-text,
body.dark-mode .prod-info small {
  color: #b0b0b0 !important;
}

/* 3. Input & Form */
body.dark-mode input, 
body.dark-mode textarea,
body.dark-mode select {
  background-color: #2c2c2c !important;
  border-color: #444 !important;
  color: #fff !important;
}

/* 4. Fitur Spesifik */
body.dark-mode .nav-btn.default {
  background-color: #2c2c2c !important;
  color: #ccc !important;
}

body.dark-mode .qty-btn {
  background-color: #333 !important;
  color: #fff !important;
  border-color: #444 !important;
}

body.dark-mode .search-dropdown {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}
body.dark-mode .search-item {
    border-bottom-color: #333 !important;
    color: #fff !important;
}
body.dark-mode .search-item:hover {
    background-color: #252525 !important;
}

/* 5. Aksen Tetap Oranye (Biar Brand Tetap Kelihatan) */
body.dark-mode .price,
body.dark-mode .current-price,
body.dark-mode .search-price {
  color: #ff8533 !important; /* Oranye sedikit lebih terang biar kontras */
}

/* 6. Tombol Navigasi Slider (Putih jadi Gelap) */
body.dark-mode .prev-btn, 
body.dark-mode .next-btn,
body.dark-mode .nav-arrow,
body.dark-mode .promo-nav,
body.dark-mode .prod-nav {
    background-color: #333 !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(255,255,255,0.1);
}
body.dark-mode .prev-btn:hover, 
body.dark-mode .next-btn:hover,
body.dark-mode .nav-arrow:hover,
body.dark-mode .promo-nav:hover,
body.dark-mode .prod-nav:hover {
    background-color: #ff6600 !important;
}

/* =========================================
   STYLE CARD HALAMAN (About, FAQ, dll)
   ========================================= */
.content-card {
  background-color: #ffffff;      /* Latar putih */
  padding: 50px;                  /* Memberikan ruang lega di dalam (Padding Luas) */
  border-radius: 15px;            /* Sudut membulat */
  box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Efek bayangan timbul halus */
  border: 1px solid #eee;         /* Garis tepi tipis */
  margin-bottom: 50px;            /* Jarak ke footer */
  width: 100%;                    /* Memenuhi container */
  position: relative;
  overflow: hidden;               /* Agar sudut membulat rapi */
}

/* Biar teks di dalamnya lebih enak dibaca */
.content-card p, 
.content-card li {
    line-height: 1.8;             /* Jarak antar baris teks */
    font-size: 15px;
    color: #555;
}

/* Responsif Mobile (HP) */
@media (max-width: 768px) {
  .content-card {
    padding: 25px 20px; /* Di HP padding dikurangi biar tidak sempit */
    border-radius: 12px;
  }
}/* =========================================
   STYLE CARD HALAMAN (About, FAQ, dll)
   ========================================= */
.content-card {
  background-color: #ffffff;      /* Latar putih */
  padding: 50px;                  /* Memberikan ruang lega di dalam (Padding Luas) */
  border-radius: 15px;            /* Sudut membulat */
  box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Efek bayangan timbul halus */
  border: 1px solid #eee;         /* Garis tepi tipis */
  margin-bottom: 50px;            /* Jarak ke footer */
  width: 100%;                    /* Memenuhi container */
  position: relative;
  overflow: hidden;               /* Agar sudut membulat rapi */
}

/* Biar teks di dalamnya lebih enak dibaca */
.content-card p, 
.content-card li {
    line-height: 1.8;             /* Jarak antar baris teks */
    font-size: 15px;
    color: #555;
}

/* Responsif Mobile (HP) */
@media (max-width: 768px) {
  .content-card {
    padding: 25px 20px; /* Di HP padding dikurangi biar tidak sempit */
    border-radius: 12px;
  }
}

/* --- FIX DARK MODE KHUSUS HALAMAN FAQ --- */
body.dark-mode .faq-item {
    background-color: #1e1e1e !important; /* Ubah kartu jadi gelap */
    border-color: #333 !important;
}

body.dark-mode .faq-summary {
    background-color: #1e1e1e !important; /* PENTING: Timpa background putih */
    color: #fff !important;               /* Teks pertanyaan jadi putih */
}

body.dark-mode .faq-summary:hover {
    color: #ff6600 !important;            /* Hover tetap oranye */
}

body.dark-mode .faq-answer {
    background-color: #1e1e1e !important; /* Background jawaban gelap */
    color: #b0b0b0 !important;            /* Teks jawaban abu terang */
    border-top-color: #333 !important;    /* Garis pemisah gelap */
}

/* Ubah warna panah kecil di kanan jadi terang */
body.dark-mode .faq-summary::after {
    color: #888; 
}
body.dark-mode .faq-item[open] .faq-summary::after {
    color: #ff6600;
}

/* --- FIX DARK MODE TESTIMONIALS SECTION --- */
body.dark-mode .testimonials-section {
    background-color: #121212 !important; /* Menyamakan dengan background body utama */
    color: #fff !important;
}

/* Opsional: Jika ingin judul sectionnya juga dipastikan putih */
body.dark-mode .testimonials-section .section-title {
    color: #ffffff !important;
}

/* --- FIX DARK MODE DETAIL PRODUK --- */

/* 1. Deskripsi Singkat, Label Spesifikasi, dan Merk jadi Putih */
body.dark-mode .short-desc, 
body.dark-mode .spec-label, 
body.dark-mode .p-brand {
    color: #ffffff !important;
    border-color: #333 !important; /* Ubah garis pemisah jadi gelap juga */
}

/* 2. Fix Stok Tersedia (Target div ke-2 di dalam action-area) */
body.dark-mode .action-area > div:nth-of-type(2) {
    color: #ffffff !important; /* Override warna abu-abu bawaan */
}

/* 3. Pastikan tabel spesifikasi teks isinya (sebelah kanan) agak terang */
body.dark-mode .spec-table td {
    color: #b0b0b0 !important;
    border-bottom-color: #333 !important;
}

/* --- FIX DARK MODE CHECKOUT FORM --- */
body.dark-mode .form-label {
    color: #ffffff !important;
}

/* Tambahan: Memastikan judul 'Maklumat Pembeli' & 'Ringkasan Pesanan' juga putih */
body.dark-mode .form-section h2,
body.dark-mode .order-card h3 {
    color: #ffffff !important;
    border-bottom-color: #333 !important; /* Garis bawah judul jadi gelap */
}

/* Tambahan: Memastikan nama produk di ringkasan pesanan terlihat jelas */
body.dark-mode .item-info h4 {
    color: #ffffff !important;
}

/* --- FIX DARK MODE CART SUMMARY --- */

/* 1. Membuat teks label (Subtotal, Penghantaran, Total) jadi Putih */
body.dark-mode .summary-row,
body.dark-mode .summary-row.total {
    color: #ffffff !important;
}

/* 2. Mengubah warna garis pemisah di atas 'Total' agar tidak terlalu terang */
body.dark-mode .summary-row.total {
    border-top-color: #333 !important;
}

/* 3. Memastikan harga Total tetap Oranye (Opsional, biar kontras) */
body.dark-mode .summary-row.total span:last-child {
    color: #ff8533 !important; 
}

/* --- FIX DARK MODE CART ITEM --- */

/* 1. Gelapkan Background Kartu Item & Area Kosong */
body.dark-mode .cart-item, 
body.dark-mode .empty-cart {
    background-color: #1e1e1e !important; /* Abu gelap (Surface) */
    border-color: #333 !important;         /* Garis tepi gelap */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Bayangan halus */
}

/* 2. Ubah Warna Nama Produk jadi Putih */
body.dark-mode .item-name {
    color: #ffffff !important;
}

/* 3. Perbaiki Tombol Quantity (+ dan -) */
body.dark-mode .qty-btn {
    background-color: #333 !important; /* Background tombol */
    color: #ffffff !important;         /* Simbol +/- putih */
    border: 1px solid #444;
}

/* 4. Perbaiki Input Angka Quantity */
body.dark-mode .qty-input {
    background-color: #2c2c2c !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/* 5. Perbaiki Tombol Hapus (Sampah) */
body.dark-mode .btn-delete {
    color: #bbb !important;
}
body.dark-mode .btn-delete:hover {
    color: #ff4d4d !important; /* Merah terang pas dihover */
}

/* --- FIX DARK MODE SIDEBAR FILTER --- */

/* 1. Gelapkan Wadah Sidebar */
body.dark-mode .sidebar-filter {
    background-color: #1e1e1e !important; /* Abu Gelap */
    border-color: #333 !important;         /* Garis tepi gelap */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Bayangan */
    color: #e0e0e0 !important;             /* Teks dasar jadi terang */
}

/* 2. Ubah Judul Filter (ex: Promosi, Urutan, Jenama) jadi Putih */
body.dark-mode .filter-group h3 {
    color: #ffffff !important;
    border-bottom-color: #333 !important; /* Garis bawah judul gelap */
}

/* 3. Ubah Warna Teks List Filter */
body.dark-mode .filter-list li {
    color: #b0b0b0 !important;
}

/* 4. Ubah Tombol "Terapkan Filter" */
body.dark-mode .btn-filter {
    background-color: #333 !important; /* Abu tua */
    color: #fff !important;
    border: 1px solid #444;
}
body.dark-mode .btn-filter:hover {
    background-color: #ff6600 !important; /* Hover tetap oranye */
    border-color: #ff6600 !important;
}

/* 5. Ubah Link Reset Filter */
body.dark-mode .sidebar-filter a[href="all_products.php"] {
    color: #888 !important;
}
body.dark-mode .sidebar-filter a[href="all_products.php"]:hover {
    color: #ff6600 !important;
}
/* =========================================
   FIX GAMBAR PRODUK (FINAL SAKTI)
   ========================================= */

/* 1. Kotak Wadah Utama */
.prod-img {
    width: 100%;
    height: 180px;           /* Tinggi tetap kotak */
    background-color: #fff;  /* Latar putih */
    padding: 10px;           /* Jarak napas */
    border-radius: 8px;
    overflow: hidden;        /* Cegah isi tumpah */
    
    /* Flexbox untuk menengahkan Link <a> */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Link Pembungkus (INI YANG KEMARIN LUPA DIATUR) */
/* Kita paksa link <a> supaya ukurannya SAMA PERSIS dengan kotak .prod-img */
.prod-img a {
    display: flex;           /* Ubah jadi flex container */
    width: 100%;             /* Lebar penuh */
    height: 100%;            /* Tinggi penuh */
    align-items: center;     /* Tengahkan gambar vertikal */
    justify-content: center; /* Tengahkan gambar horizontal */
}

/* 3. Gambarnya Sendiri */
.prod-img img {
    width: 100%;             /* Ikuti lebar Link */
    height: 100%;            /* Ikuti tinggi Link */
    object-fit: contain;     /* KUNCI: Gambar menyusut agar muat UTUH */
    transition: transform 0.3s ease;
}

/* Efek Hover: Zoom halus */
.product-card:hover .prod-img img {
    transform: scale(1.05);
}

/* Responsif Mobile (HP) */
@media (max-width: 768px) {
    .prod-img {
        height: 150px;       /* Di HP tingginya dikurangi sedikit */
    }
}
/* 3. GAMBAR UTAMA DI HALAMAN DETAIL (detail.php) */
.product-gallery .main-img {
    height: 400px;          /* Tinggi area gambar besar */
    width: 100%;
    object-fit: contain;    /* Gambar utuh di tengah */
    background-color: #fff; /* Latar putih */
    border: 1px solid #eee; 
    border-radius: 12px;
    padding: 20px;          /* Jarak gambar ke tepi border */
}

/* 4. MODE GELAP (DARK MODE) */
body.dark-mode .prod-img,
body.dark-mode .product-gallery .main-img {
    background-color: #2c2c2c !important; /* Latar gambar jadi abu gelap */
    border-color: #444 !important;
}

/* Responsive Mobile (HP) */
@media (max-width: 768px) {
    .prod-img {
        height: 150px;      /* Di HP gambar sedikit lebih kecil */
    }
    
    .product-gallery .main-img {
        height: 300px;      /* Di HP gambar detail tidak terlalu tinggi */
    }
}
/* =========================================
   FIX TOMBOL NAVIGASI PRODUK (DETAIL.PHP)
   ========================================= */

/* 1. Pastikan container relatif agar tombol mengapung di dalamnya */
.related-wrapper .relative-wrapper,
.products-section .relative-wrapper {
    position: relative !important;
}

/* 2. Aktifkan Posisi Absolute untuk tombol Navigasi Produk */
.prod-nav {
    display: flex !important;     /* Paksa muncul di semua layar */
    position: absolute !important; /* KUNCI: Agar tombol melayang di kiri/kanan */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    width: 45px; 
    height: 45px;
    background: #ffffff;
    color: #333;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

/* 3. Atur Posisi Kiri dan Kanan */
.prod-nav.left {
    left: -25px; /* Geser keluar sedikit biar cantik */
}

.prod-nav.right {
    right: -25px;
}

/* 4. Efek Hover (Warna Oranye) */
.prod-nav:hover {
    background-color: #ff6600 !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.1); /* Efek membesar dikit */
}

/* 5. Support Dark Mode */
body.dark-mode .prod-nav {
    background-color: #333 !important; /* Tombol jadi gelap */
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
body.dark-mode .prod-nav:hover {
    background-color: #ff6600 !important; /* Hover tetap oranye */
}

/* 6. Penyesuaian Mobile (Agar tidak keluar layar HP) */
@media (max-width: 768px) {
    .prod-nav {
        width: 35px; height: 35px; font-size: 14px;
    }
    .prod-nav.left { left: -10px; }
    .prod-nav.right { right: -10px; }
}
/* --- FIX DARK MODE SEARCH VIEW ALL (Lihat Selengkapnya) --- */

/* 1. Tampilan Default di Dark Mode (Sebelum Hover) */
body.dark-mode .search-view-all {
    background-color: #2c2c2c !important; /* Latar abu gelap (sedikit lebih terang dari dropdown) */
    color: #ffffff !important;            /* Teks jadi PUTIH agar terbaca */
    border-top-color: #333 !important;    /* Garis pemisah atas jadi gelap */
}

/* 2. Tampilan Saat Hover di Dark Mode */
body.dark-mode .search-view-all:hover {
    background-color: #ff6600 !important; /* Background jadi Oranye */
    color: #ffffff !important;            /* Teks tetap Putih */
}

/* 3. Warna Teks Keyword yang di-bold (strong) */
body.dark-mode .search-view-all strong {
    color: #ff8533 !important; /* Warna keyword oranye terang */
}

/* 4. Warna Teks Keyword Saat Hover */
body.dark-mode .search-view-all:hover strong {
    color: #ffffff !important; /* Ikut jadi putih saat hover */
}
/* =========================================
   FIX UKURAN GAMBAR PROMO (SERAGAM)
   ========================================= */

.promo-banner {
    /* 1. KUNCI UKURAN KARTU */
    min-width: 500px;        /* Lebar tetap Desktop */
    height: 250px;           /* Tinggi tetap (Bisa kamu ubah jadi 300px jika perlu) */
    
    /* Style Dasar */
    border-radius: 15px;
    overflow: hidden;        /* Agar gambar yang berlebih dipotong */
    flex-shrink: 0;
    position: relative;
    background-color: #eee;  /* Warna loading sementara */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.promo-banner img {
    /* 2. PAKSA GAMBAR ISI PENUH KOTAK */
    width: 100%;
    height: 100%;
    
    /* KUNCI AGAR TIDAK GEPENG */
    object-fit: cover;       /* Gambar akan di-crop tengah (Zoom-in) agar penuh */
    /* object-fit: contain;  <-- Gunakan ini jika ingin gambar utuh tapi ada sisa kosong */
    
    display: block;
    transition: transform 0.5s ease;
}

/* Efek Hover: Zoom halus */
.promo-banner:hover img {
    transform: scale(1.05);
}

/* --- RESPONSIF MOBILE (HP) --- */
@media (max-width: 768px) {
    .promo-banner {
        /* Di HP lebar full layar, tinggi dikecilkan */
        min-width: 100%;
        width: 100%;
        height: 180px;       /* Tinggi banner di HP */
    }
}

/* =========================================
   PAGINATION (HALAMAN)
   ========================================= */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #555;
    font-weight: 600;
    transition: 0.3s;
    background: #fff;
}

.page-link:hover, 
.page-link.active {
    background-color: #ff6600; /* Warna Orange Khas */
    color: white;
    border-color: #ff6600;
}

/* Dark Mode Support */
body.dark-mode .page-link {
    background-color: #2c2c2c;
    border-color: #444;
    color: #fff;
}
body.dark-mode .page-link:hover, 
body.dark-mode .page-link.active {
    background-color: #ff6600;
}

/* =========================================
   MOBILE FILTER UI (STYLE ALA APLIKASI)
   ========================================= */

/* 1. Tombol Pemicu di HP */
.mobile-filter-trigger {
    display: none; /* Sembunyi di Desktop */
    margin-bottom: 20px;
}
.mobile-filter-trigger button {
    width: 100%;
    padding: 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. Style Dasar "Chips" (Tombol Pilihan) - Berlaku Desktop & Mobile */
.chip-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-item {
    cursor: pointer;
    user-select: none;
}

/* Sembunyikan Checkbox/Radio Asli */
.chip-item input[type="checkbox"],
.chip-item input[type="radio"] {
    display: none;
}

/* Desain Tombol Chip (Belum Dipilih) */
.chip-item span {
    display: inline-block;
    padding: 8px 16px;
    background-color: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 50px; /* Bentuk Lonjong */
    font-size: 13px;
    color: #666;
    transition: all 0.2s ease;
}

/* Desain Tombol Chip (SAAT DIPILIH/CHECKED) */
.chip-item input:checked + span {
    background-color: #ff6600; /* Warna Oranye Utama */
    color: white;
    border-color: #ff6600;
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3);
    font-weight: 500;
}

/* 3. Overlay Gelap (Background) */
.filter-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1040;
    display: none; opacity: 0; transition: opacity 0.3s;
}
.filter-overlay.active { display: block; opacity: 1; }

/* Header Filter di Mobile (Judul & Close) */
.filter-header-mobile { display: none; }

/* Tombol Aksi Bawah (Apply/Reset) */
.filter-actions {
    margin-top: 20px;
    display: flex; gap: 10px;
    align-items: center;
}
.btn-apply {
    flex: 1; background: #ff6600; color: white; border: none;
    padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer;
}
.btn-reset {
    color: #888; text-decoration: none; font-size: 14px; padding: 0 10px;
}

/* =========================================
   RESPONSIVE MOBILE (MAX 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* Tampilkan Tombol Filter di Luar */
    .mobile-filter-trigger { display: block; }

    /* Ubah Sidebar Jadi Bottom Sheet (Pop-up Bawah) */
    .sidebar-filter {
        position: fixed;
        bottom: 0; left: 0; width: 100%;
        height: 85vh; /* Tinggi 85% layar */
        background: white;
        z-index: 1050;
        border-radius: 20px 20px 0 0; /* Lengkung atas */
        padding: 0; /* Reset padding container */
        transform: translateY(110%); /* Sembunyi ke bawah */
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Animasi smooth */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
        display: flex; flex-direction: column;
    }

    .sidebar-filter.active {
        transform: translateY(0); /* Muncul ke atas */
    }

    /* Header Filter Mobile */
    .filter-header-mobile {
        display: flex; justify-content: space-between; align-items: center;
        padding: 20px; border-bottom: 1px solid #eee;
    }
    .filter-header-mobile h3 { margin: 0; font-size: 18px; }
    .close-filter { font-size: 28px; cursor: pointer; line-height: 20px; }

    /* Konten Scrollable */
    .filter-form-content {
        padding: 20px;
        overflow-y: auto; /* Bisa discroll isinya */
        flex-grow: 1;     /* Menuhin sisa ruang */
        padding-bottom: 80px; /* Ruang untuk tombol bawah */
    }

    /* Sticky Button di Bawah */
    .filter-actions {
        position: absolute; bottom: 0; left: 0; width: 100%;
        background: white; padding: 15px 20px;
        border-top: 1px solid #eee; margin: 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }

    /* Perbaikan Tampilan Chips di Mobile */
    .chip-item span {
        padding: 10px 20px; /* Lebih besar dikit biar enak dipencet */
        font-size: 14px;
    }
    
    /* Sembunyikan sidebar asli di layout utama biar gak numpuk */
    .main-layout { flex-direction: column; }
    .sidebar-filter { width: 100%; border: none; }
}

/* Support Dark Mode untuk Filter Mobile */
body.dark-mode .mobile-filter-trigger button {
    background: #1e1e1e; border-color: #333; color: #fff;
}
body.dark-mode .sidebar-filter {
    background: #1e1e1e;
}
body.dark-mode .filter-header-mobile,
body.dark-mode .filter-actions {
    border-color: #333; background: #1e1e1e;
}
body.dark-mode .chip-item span {
    background: #2c2c2c; border-color: #444; color: #ccc;
}
body.dark-mode .chip-item input:checked + span {
    background: #ff6600; color: white; border-color: #ff6600;
}