/* ============================================
           RESET CSS GLOBAL
           Menghapus semua margin, padding, dan border
           default browser agar styling kita sepenuhnya
           terkontrol dari nol
           ============================================ */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* Lebar & tinggi termasuk padding dan border */
        }

        /* ============================================
           CSS CUSTOM PROPERTIES (VARIABEL)
           Mendefinisikan seluruh palet warna tema
           Dark Gold di satu tempat agar mudah diedit
           ============================================ */
        :root {
            --bg-utama: #0a0a0e;            /* Latar belakang paling gelap */
            --bg-kedua: #111116;            /* Latar belakang kedua (card, sidebar) */
            --bg-kartu: #18181f;            /* Latar kartu produk */
            --bg-kartu-hover: #1f1f28;      /* Warna kartu saat disentuh kursor */
            --emas-utama: #c9a84c;          /* Warna emas primer - aksen utama */
            --emas-terang: #e8d5a3;         /* Emas terang untuk judul penting */
            --emas-gelap: #8a7030;          /* Emas gelap untuk gradient */
            --emas-glow: rgba(201,168,76,0.12); /* Efek cahaya emas transparan */
            --teks-utama: #ede4d4;          /* Warna teks utama - krem hangat */
            --teks-kedua: #a09483;          /* Teks sekunder - lebih redup */
            --teks-redup: #999999;          /* Teks paling redup */
            --garis: #26262e;               /* Warna garis pembatas */
            --garis-emas: rgba(201,168,76,0.18); /* Garis berwarna emas samar */
            --bayangan-emas: 0 4px 30px rgba(201,168,76,0.07); /* Efek bayangan emas */
            /* Variabel border radius untuk konsistensi keseluruhan halaman */
            --r-kecil: 10px;               /* Radius kecil untuk tombol */
            --r-sedang: 16px;              /* Radius sedang untuk kartu kecil */
            --r-besar: 22px;               /* Radius besar untuk modal */
            --r-sangat-besar: 30px;        /* Radius sangat besar untuk elemen premium */
            /* Transisi standar yang digunakan di seluruh halaman */
            --transisi: all 0.3s cubic-bezier(0.4,0,0.2,1);
        }

        /* ============================================
           STYLING BODY (TUBUH HALAMAN)
           Mengatur font, warna latar, dan perilaku
           scroll utama halaman
           ============================================ */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font sistem yang elegan */
            background-color: var(--bg-utama); /* Latar gelap utama */
            color: var(--teks-utama);         /* Warna teks default */
            line-height: 1.7;                 /* Jarak antar baris teks */
            overflow-x: hidden;               /* Cegah scroll horizontal */
            min-height: 100vh;                /* Minimal tinggi satu layar penuh */
        }

        /* ============================================
           HEADER (KEPALA HALAMAN)
           Posisi fixed agar tetap terlihat saat scroll.
           Berisi logo dan nama brand Siwaras Project Vault.
           Efek kaca buram (glassmorphism) untuk kesan premium.
           ============================================ */
        header {
            position: fixed;          /* Tetap di atas saat scroll */
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;           /* Selalu di atas elemen lain */
            background: rgba(10,10,14,0.82); /* Latar semi-transparan */
            backdrop-filter: blur(24px);       /* Efek blur kaca di belakang header */
            -webkit-backdrop-filter: blur(24px); /* Dukungan untuk browser Safari */
            border-bottom: 1px solid var(--garis-emas); /* Garis bawah emas samar */
            padding: 10px 20px;      /* Jarak dalam header */
            transition: var(--transisi);
        }

        /* Container dalam header: membatasi lebar maksimal dan menyusun elemen horizontal */
        .header-inner {
            max-width: 1200px;       /* Lebar maksimal konten */
            margin: 0 auto;          /* Posisi tengah horizontal */
            display: flex;           /* Flexbox: susun anak secara horizontal */
            align-items: center;     /* Posisi vertikal tengah */
            justify-content: space-between; /* Jarak antar elemen merata */
            gap: 12px;
        }

        /* Link brand (logo + teks), tanpa garis bawah */
        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;   /* Hilangkan garis bawah link */
        }

        /* Gambar logo profil di header */
        .brand img {
            width: 42px;             /* Lebar logo */
            height: 42px;            /* Tinggi logo */
            border-radius: var(--r-kecil); /* Sudut membulat elegan */
            object-fit: cover;       /* Gambar tidak terdistorsi meski kotak */
            border: 2px solid var(--emas-utama); /* Bingkai emas */
        }

        /* Teks nama brand utama */
        .brand-name {
            font-size: 1.15rem;
            font-weight: 700;        /* Tebal */
            color: var(--emas-terang);
            letter-spacing: 0.3px;   /* Sedikit renggang antar huruf */
          background: linear-gradient(90deg, #BF953F, 
      #FCF6BA, 
      #B38728, 
      #FBF5B7, 
      #AA771C);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
        }
       @keyframes shine {
    to {
      background-position: -200% center;
    }
       }

        /* Teks sub-brand kecil di bawah nama */
        .brand-sub {
            font-size: 0.65rem;
            color: var(--teks-redup);
            letter-spacing: 2.5px;   /* Huruf lebih renggang */
            text-transform: uppercase; /* Huruf kapital semua */
        }

        /* Tombol keranjang di header (untuk akses cepat di mobile) */
        .header-cart-btn {
            background: var(--bg-kartu);
            border: 1px solid var(--garis-emas);
            color: var(--emas-utama);
            width: 42px;
            height: 42px;
            border-radius: var(--r-kecil);
            cursor: pointer;          /* Kursor jadi telunjuk saat hover */
            font-size: 1.15rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;       /* Untuk posisi badge di atasnya */
            transition: var(--transisi);
        }

        /* Efek hover tombol keranjang header */
        .header-cart-btn:hover {
            background: var(--bg-kartu-hover);
            border-color: var(--emas-utama);
        }

        /* Badge bulat kecil menampilkan jumlah item di keranjang */
        .cart-badge {
            position: absolute;
            top: -6px;               /* Posisi sedikit di atas tombol */
            right: -6px;             /* Posisi sedikit di kanan */
            background: var(--emas-utama);
            color: var(--bg-utama);
            font-size: 0.6rem;
            font-weight: 800;
            width: 18px;
            height: 18px;
            border-radius: 50%;      /* Bentuk lingkaran sempurna */
            display: none;           /* Sembunyikan jika keranjang kosong */
            align-items: center;
            justify-content: center;
        }

        /* Tampilkan badge jika ada item (ditambahkan via JavaScript) */
        .cart-badge.show { display: flex; }

        /* ============================================
           MAIN (KONTEN UTAMA)
           Diberi padding-top agar konten tidak tertutup
           oleh header yang posisinya fixed
           ============================================ */
        main {
            padding-top: 76px;       /* Sesuai tinggi header */
        }

        /* ============================================
           HERO SECTION (BAGIAN SAMBUTAN UTAMA)
           Area pertama yang dilihat user. Menggunakan
           pendekatan psikologi bawah sadar (curiosity)
           untuk memicu rasa penasaran.
           ============================================ */
        .hero {
            min-height: 55vh;        /* Minimal tinggi 55% layar */
            display: flex;
            align-items: center;     /* Konten di tengah vertikal */
            justify-content: center; /* Konten di tengah horizontal */
            text-align: center;
            padding: 50px 20px;
            position: relative;
            overflow: hidden;        /* Sembunyikan elemen yang meluber */
        }

        /* Efek lingkaran cahaya emas dekoratif di belakang teks hero */
        .hero::before {
            content: '';             /* Pseudo-element kosong sebagai dekorasi */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* Posisi tepat di tengah */
            width: 480px;
            height: 480px;
            /* Gradient radial: emas di tengah, transparan di tepi */
            background: radial-gradient(circle, rgba(201,168,76,0.05) 0%, transparent 70%);
            border-radius: 50%;      /* Bentuk lingkaran */
            pointer-events: none;    /* Tidak bisa diklik */
        }

        /* Container teks hero agar bisa diatur lebar maksimalnya */
        .hero-content {
            max-width: 680px;
            position: relative;
            z-index: 1;              /* Di atas efek dekoratif */
        }

        /* Label kecil "EXCLUSIVE ACCESS" di atas judul hero */
    .hero-label {
    display: inline-block;
    font-weight: 700; /* Diperbaiki: tidak pakai px */
    font-size: 0.68rem; /* Diperbaiki: struktur property */
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--emas-utama);
    border: 1px solid var(--garis-emas);
    padding: 6px 22px;
    border-radius: 50px;     
    margin-bottom: 26px;
    background: var(--emas-glow);

    /* Efek Animasi Berdenyut Manja */
    animation: denyutManja 2s infinite ease-in-out;
}

/* Keyframe Animasi Denyut */
@keyframes denyutManja {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); /* Sesuai warna emas */
    }
    50% {
        transform: scale(1.03); /* Membesar sedikit secara halus */
        box-shadow: 0 0 12px 6px rgba(212, 175, 55, 0); /* Pancaran glow memudar */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}


        /* Judul utama hero - ukuran responsif dengan clamp() */
        .hero h1 {
            font-size: clamp(1.7rem, 4.8vw, 2.8rem); /* Min 1.7rem, ideal 4.8vw, max 2.8rem */
            font-weight: 800;
            line-height: 1.25;
            color: var(--emas-terang);
            margin-bottom: 20px;
        }

        /* Paragraf deskripsi hero */
        .hero p {
            font-size: 1rem;
            color: var(--teks-kedua);
            max-width: 540px;
            margin: 0 auto 30px;     /* Tengah horizontal, jarak bawah */
        }

        /* Garis dekoratif emas tipis di bawah paragraf hero */
        .hero-line {
            width: 55px;
            height: 2px;
            /* Gradient dari transparan → emas → transparan */
            background: linear-gradient(90deg, transparent, var(--emas-utama), transparent);
            margin: 0 auto;
        }

        /* ============================================
           SECTION UMUM
           Styling dasar untuk setiap section konten
           ============================================ */
        .section {
            padding: 55px 20px 75px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Judul section (misal: "Koleksi Dalam Vault") */
        .section-title {
            text-align: center;
            font-size: clamp(1.35rem, 3.5vw, 1.9rem);
            font-weight: 800;
            color: var(--emas-terang);
            margin-bottom: 10px;
        }

        /* Sub-judul section (penjelasan singkat) */
        .section-subtitle {
            text-align: center;
            font-size: 0.88rem;
            color: var(--teks-redup);
            margin-bottom: 44px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        /* ============================================
           GRID ETALASE / KATALOG PRODUK
           Layout grid responsif: 2 kolom di desktop,
           1 kolom di mobile
           ============================================ */
        .catalog-grid {
            display: grid;
            /* auto-fit: otomatis sesuaikan jumlah kolom */
            /* minmax(300px, 1fr): kolom minimal 300px, maksimal fleksibel */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 26px;               /* Jarak antar kartu */
        }

        /* ============================================
           KARTU PRODUK
           Setiap kartu di etalase. CATATAN PENTING:
           Tidak menampilkan harga sama sekali di sini,
           hanya judul, kalimat pancingan, dan tombol detail.
           ============================================ */
        .product-card {
            background: var(--bg-kartu);
            border: 1px solid var(--garis);
            border-radius: var(--r-besar); /* Sudut membulat besar elegan */
            overflow: hidden;        /* Gambar tidak keluar dari sudut membulat */
            transition: var(--transisi);
            position: relative;
        }

        /* Efek hover kartu: naik sedikit, border emas, bayangan */
        .product-card:hover {
            border-color: var(--garis-emas);
            box-shadow: var(--bayangan-emas);
            transform: translateY(-5px); /* Kartu naik 5px */
        }

        /* Wrapper gambar produk di kartu */
        .product-card-img {
            width: 300px;
            height: 400px;
            overflow: hidden;        /* Potong gambar yang meluber */
            position: relative;
        }

        /* Gambar produk itu sendiri */
        .product-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;       /* Gambar menutupi area tanpa distorsi */
            transition: transform 0.5s ease; /* Animasi zoom halus */
        }

        /* Efek zoom gambar saat kartu di-hover */
        .product-card:hover .product-card-img img {
            transform: scale(1.06);  /* Perbesar 6% */
        }

        /* Badge "Digital Product" di pojok kiri atas gambar */
        .product-badge {
            position: absolute;
            top: 14px;
            left: 14px;
            background: rgba(10,10,14,0.78);
            backdrop-filter: blur(8px);
            color: var(--emas-utama);
            font-size: 0.63rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 50px;     /* Bentuk kapsul */
            border: 1px solid var(--garis-emas);
        }

        /* Area teks di bawah gambar dalam kartu */
        .product-card-body {
            padding: 22px;
        }

        /* Judul produk di kartu etalase */
        .product-card-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--emas-terang);
            margin-bottom: 10px;
            line-height: 1.35;
        }

        /* Kalimat pancingan (hook) - muncul di kartu, bukan harga */
        .product-card-hook {
            font-size: 0.85rem;
            color: var(--teks-kedua);
            margin-bottom: 20px;
            line-height: 1.6;
            font-style: italic;      /* Huruf miring untuk kesan quote */
        }

        /* ============================================
           TOMBOL "DETAIL PRODUK"
           Tombol outline emas di setiap kartu etalase
           ============================================ */
        .btn-detail {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent; /* Tanpa warna latar (outline style) */
            border: 1.5px solid var(--emas-utama);
            color: var(--emas-utama);
            padding: 10px 24px;
            border-radius: var(--r-kecil);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transisi);
            letter-spacing: 0.3px;
        }

        /* Hover: tombol terisi emas, teks jadi gelap */
        .btn-detail:hover {
            background: var(--emas-utama);
            color: var(--bg-utama);
        }

        /* Panah pada tombol detail, bergerak saat hover */
        .btn-detail .arrow { transition: transform 0.3s ease; }
        .btn-detail:hover .arrow { transform: translateX(4px); }

        /* ============================================
           MODAL DETAIL PRODUK (THE REVEAL)
           Popup overlay yang muncul saat tombol detail
           diklik. Di sinilah harga DITAMPILKAN untuk
           pertama kali, setelah deskripsi emosional.
           ============================================ */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.78); /* Latar gelap semi-transparan */
            backdrop-filter: blur(5px);
            z-index: 2000;           /* Di atas header */
            display: none;           /* Sembunyikan secara default */
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* Class aktif untuk menampilkan modal */
        .modal-overlay.active { display: flex; }

        /* Kotak modal itu sendiri */
        .modal {
            background: var(--bg-kedua);
            border: 1px solid var(--garis-emas);
            border-radius: var(--r-sangat-besar); /* Radius paling besar untuk kesan premium */
            max-width: 700px;
            width: 100%;
            max-height: 88vh;        /* Maksimal 88% tinggi layar */
            overflow-y: auto;        /* Scroll vertikal jika konten panjang */
            position: relative;
            animation: modalMasuk 0.35s ease; /* Animasi saat muncul */
        }

        /* Keyframe animasi modal: dari kecil & transparan ke ukuran normal */
        @keyframes modalMasuk {
            from { opacity: 0; transform: scale(0.93) translateY(16px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* Gambar produk di bagian atas modal */
        .modal-img {
            width: 300px;
            height: 400px;
object-fit:cover;

          /* Radius hanya di atas, agar menyatu dengan border bawah yang lurus */
            border-radius: var(--r-sangat-besar) var(--r-sangat-besar) 0 0;

        }

        /* Tombol tutup modal (silang X) di pojok kanan atas */
        .modal-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 38px;
            height: 38px;
            background: rgba(10,10,14,0.7);
            backdrop-filter: blur(8px);
            border: 1px solid var(--garis-emas);
            border-radius: 50%;
            color: var(--emas-terang);
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transisi);
            z-index: 10;
        }

        .modal-close:hover {
            background: var(--emas-utama);
            color: var(--bg-utama);
        }

        /* Area konten teks di dalam modal */
        .modal-body { padding: 28px; }

        /* Label kategori kecil di modal */
        .modal-category {
            display: inline-block;
            font-size: 0.63rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--emas-utama);
            border: 1px solid var(--garis-emas);
            padding: 4px 14px;
            border-radius: 50px;
            margin-bottom: 14px;
            background: var(--emas-glow);
          animation: denyutManja 2s infinite ease-in-out;
        }

        /* Judul produk di modal */
        .modal-title {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--emas-terang);
            margin-bottom: 18px;
            line-height: 1.3;
        }

        /* Deskripsi panjang persuasif di modal (mengaduk emosi) */
        .modal-desc {
            font-size: 0.92rem;
            color: var(--teks-kedua);
            line-height: 1.85;
            margin-bottom: 26px;
            text-align: justify;     /* Rata kanan-kiri */
            white-space: pre-line;   /* Hormati line break dari JavaScript */
        }

        /* ============================================
           AREA HARGA DI MODAL (THE REVEAL)
           Harga baru muncul di sini, setelah user
           membaca deskripsi panjang. Ini adalah
           strategi "price reveal" untuk meningkatkan
           perceived value.
           ============================================ */
        .modal-price-area {
            background: var(--bg-kartu);
            border: 1px solid var(--garis);
            border-radius: var(--r-sedang);
            padding: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;         /* Pindah baris di layar kecil */
            gap: 14px;
        }

        /* Label kecil "Harga Akses" */
        .modal-price-label {
            font-size: 0.72rem;
            color: var(--teks-redup);
            margin-bottom: 2px;
        }

        /* Angka harga besar berwarna emas */
        .modal-price {
            font-size: 1.55rem;
            font-weight: 800;
            color: var(--emas-utama);
        }


      /* Animasi denyut untuk badge hemat */
@keyframes denyut {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
/* Badge "Hemat X%" yang berdenyut */
.modal-save-badge {
    display: inline-block;
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    animation: denyut 1.5s ease-in-out infinite;
      }

      
        /* ============================================
           TOMBOL "MASUKKAN KE KERANJANG"
           Tombol solid emas di modal detail
           ============================================ */
  
  .btn-add-cart {
    /* Gradient emas untuk kesan premium */
    background: linear-gradient(135deg, var(--emas-utama), var(--emas-gelap));
    color: var(--bg-utama);
    border: none;
    padding: 13px 26px;
    border-radius: var(--r-kecil);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transisi);
    letter-spacing: 0.3px;

    /* WAJIB DITAMBAHKAN untuk efek kilau */
    position: relative;
    overflow: hidden; 
}

/* Lapisan Cahaya Kilau */
.btn-add-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Mulai dari luar tombol sebelah kiri */
    width: 50%;
    height: 100%;
    /* Gradient putih transparan berbentuk garis miring tajam */
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Memiringkan garis kilau agar estetik */
    
    /* Jalankan animasi kilau secara otomatis dan berulang */
    animation: kilauEmasPremium 3.5s infinite ease-in-out;
}

/* Keyframe Animasi Kilau */
@keyframes kilauEmasPremium {
    0% {
        left: -150%;
    }
    30% {
        left: 150%; /* Kilau bergerak cepat melintasi tombol */
    }
    100% {
        left: 150%; /* Memberikan jeda waktu diam sebelum kilau berikutnya muncul */
    }
}

/* Efek Tambahan Saat Tombol Ditekan/Hover (Opsional & Sangat Disarankan) */
.btn-add-cart:hover {
    filter: brightness(1.1); /* Membuat emas sedikit lebih cerah saat disentuh */
    box-shadow: 0 4px 15px var(--emas-glow); /* Memberikan pendaran di bawah tombol */
}


        /* ============================================
           CART OVERLAY (LATAR GELAP KERANJANG)
           Latar gelap yang muncul saat sidebar keranjang
           terbuka. Klik di sini untuk menutup keranjang.
           ============================================ */
        .cart-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.55);
            z-index: 3000;
            display: none;           /* Sembunyikan secara default */
        }
        .cart-overlay.active { display: block; }

        /* ============================================
           CART SIDEBAR (PANEL KERANJANG)
           Drawer yang muncul dari sisi kanan layar.
           Menampilkan daftar item, kuantitas, dan
           ringkasan perhitungan harga.
           ============================================ */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: -420px;           /* Posisi awal: tersembunyi di luar layar kanan */
            width: 400px;
            max-width: 92vw;         /* Di mobile, maksimal 92% lebar layar */
            height: 100dvh;           /* Penuh dari atas ke bawah */
            background: var(--bg-kedua);
            border-left: 1px solid var(--garis-emas);
            z-index: 3001;           /* Di atas overlay */
            /* Animasi geser masuk dengan kurva halus */
            transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
            display: flex;
            flex-direction: column;  /* Susun anak secara vertikal */
        }

        /* Posisi saat sidebar terbuka: masuk ke dalam layar */
        .cart-sidebar.active { right: 0; }

        /* Header sidebar keranjang (judul + tombol tutup) */
        .cart-header {
            padding: 18px 22px;
            border-bottom: 1px solid var(--garis);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;         /* Jangan mengecil saat ruang sempit */
        }

        .cart-header h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--emas-terang);
        }

        /* Tombol tutup sidebar (X) */
        .cart-close {
            background: var(--bg-kartu);
            border: 1px solid var(--garis);
            color: var(--teks-kedua);
            width: 34px;
            height: 34px;
            border-radius: var(--r-kecil);
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transisi);
        }
        .cart-close:hover { color: var(--emas-utama); border-color: var(--emas-utama); }

        /* Area daftar item keranjang (bisa di-scroll) */
        .cart-items {
            flex: 1;                /* Mengisi sisa ruang yang tersedia */
            overflow-y: auto;        /* Scroll vertikal jika item banyak */
            padding: 14px 22px;
        }

        /* Pesan "keranjang kosong" */
        .cart-empty {
            text-align: center;
            padding: 44px 14px;
            color: var(--teks-redup);
        }
        .cart-empty-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.35; }
        .cart-empty p { font-size: 0.88rem; }

        /* ============================================
           ITEM INDIVIDUAL DI KERANJANG
           Setiap baris produk: gambar mini, info, qty, hapus
           ============================================ */
        .cart-item {
            display: flex;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid var(--garis);
            align-items: flex-start;
        }

        /* Gambar mini produk di keranjang */
        .cart-item-img {
            width: 60px;
            height: 60px;
            border-radius: var(--r-kecil);
            object-fit: cover;
            flex-shrink: 0;         /* Jangan mengecil */
            border: 1px solid var(--garis);
        }

        /* Area info (nama + harga + kontrol qty) */
        .cart-item-info { flex: 1; min-width: 0; }

        /* Nama produk di keranjang */
        .cart-item-name {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--emas-terang);
            margin-bottom: 3px;
            line-height: 1.35;
            /* Potong teks panjang dengan ellipsis (...) */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;  /* Maksimal 2 baris */
            -webkit-box-orient: vertical;
        }

        /* Harga item (sudah dikali kuantitas) */
        .cart-item-price {
            font-size: 0.78rem;
            color: var(--emas-utama);
            font-weight: 600;
            margin-bottom: 9px;
        }

        /* ============================================
           KONTROL KUANTITAS (+ dan -)
           Tombol untuk menambah dan mengurangi jumlah
           ============================================ */
        .qty-control {
            display: flex;
            align-items: center;
            border: 1px solid var(--garis);
            border-radius: var(--r-kecil);
            overflow: hidden;
            width: fit-content;     /* Lebar sesuai isi */
        }

        /* Tombol minus (-) dan plus (+) */
        .qty-btn {
            width: 30px;
            height: 30px;
            background: var(--bg-kartu);
            border: none;
            color: var(--teks-kedua);
            cursor: pointer;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transisi);
        }
        .qty-btn:hover { background: var(--emas-utama); color: var(--bg-utama); }

        /* Angka kuantitas di antara tombol + dan - */
        .qty-value {
            width: 34px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--teks-utama);
            background: var(--bg-utama);
        }

        /* Tombol "Hapus" item dari keranjang */
        .cart-item-remove {
            background: none;
            border: none;
            color: var(--teks-redup);
            cursor: pointer;
            font-size: 0.7rem;
            padding: 4px 8px;
            border-radius: var(--r-kecil);
            transition: var(--transisi);
            flex-shrink: 0;
            align-self: center;
        }
        .cart-item-remove:hover { color: #e05555; background: rgba(224,85,85,0.1); }

        /* ============================================
           RINGKASAN PERHITUNGAN HARGA
           Area di bawah daftar item yang menampilkan:
           Subtotal → Ongkir (FREE) → PPN 12% → Total
           Sesuai regulasi UU HPP Indonesia
           ============================================ */
        .cart-summary {
            border-top: 1px solid var(--garis);
            padding: 18px 22px;
            flex-shrink: 0;         /* Tidak mengecil */
            background: var(--bg-kartu);
        }

        /* Setiap baris perhitungan */
        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            font-size: 0.83rem;
        }
        .summary-row .label { color: var(--teks-kedua); }
        .summary-row .value { color: var(--teks-utama); font-weight: 500; }

        /* Baris total akhir: lebih menonjol dengan garis atas emas */
        .summary-row.total {
            border-top: 1px solid var(--garis-emas);
            margin-top: 10px;
            padding-top: 12px;
        }
        .summary-row.total .label { font-size: 0.92rem; font-weight: 700; color: var(--emas-terang); }
        .summary-row.total .value { font-size: 1.12rem; font-weight: 800; color: var(--emas-utama); }

        /* ============================================
           TOMBOL "BUY VIA WHATSAPP"
           Tombol hijau WhatsApp di bawah ringkasan
           ============================================ */
  .btn-wa
    { display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: 14px;
      padding: 14px;
      background: #25d366;     /* Warna resmi WhatsApp */
      color: #fff;
      border: none;
      border-radius: var(--r-kecil);
      font-size: 0.98rem;
      font-weight: 900;
            cursor: pointer;
            transition: var(--transisi);
      animation: denyutManja 2s infinite ease-in-out;
          
        }
    .btn-wa:hover { background: #1ebe57; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,0.28); 
                  }

        /* Tombol WA dalam keadaan dinonaktifkan (keranjang kosong) */
        .btn-wa:disabled {
            background: #1e2e22;     /* Hijau sangat gelap */
            color: #4a6b50;
            cursor: not-allowed;     /* Kursor dilarang */
            transform: none;
            box-shadow: none;
        }

        /* ============================================
           FLOATING ACTION BUTTONS (FAB)
           Tombol mengambang di pojok kanan bawah:
           1. Keranjang belanja
           2. Scroll ke atas
           ============================================ */
        .floating-btns {
            position: fixed;
            bottom: 26px;
            right: 26px;
            z-index: 900;            /* Di bawah modal tapi di atas konten */
            display: flex;
            flex-direction: column;  /* Susun vertikal */
            gap: 11px;
        }

        /* Styling dasar FAB */
        .fab {
            width: 52px;
            height: 52px;
            border-radius: var(--r-sedang);
            border: 1.5px solid var(--garis-emas);
            background: rgba(24,24,31,0.88);
            backdrop-filter: blur(10px);
            color: var(--emas-utama);
            font-size: 1.25rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transisi);
            position: relative;
            box-shadow: 0 4px 18px rgba(0,0,0,0.35);
        }
        .fab:hover { background: var(--emas-utama); color: var(--bg-utama); transform: scale(1.08); }

        /* Badge jumlah item di FAB keranjang */
        .fab .fab-badge {
            position: absolute;
            top: -5px; right: -5px;
            background: var(--emas-utama);
            color: var(--bg-utama);
            font-size: 0.58rem;
            font-weight: 800;
            min-width: 19px;
            height: 19px;
            border-radius: 10px;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
        }
        .fab .fab-badge.show { display: flex; }

        /* FAB scroll ke atas: tersembunyi secara default */
        .fab-scroll { opacity: 0; pointer-events: none; transform: translateY(8px); }

        /* FAB scroll muncul saat class 'show' ditambahkan */
        .fab-scroll.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

        /* ============================================
           SCARCITY POPUP (POPUP KELANGKAAN)
           Muncul dari bawah saat user diam terlalu lama
           dengan barang di keranjang. Memicu rasa
           urgensi untuk segera checkout.
           ============================================ */
        .scarcity-popup {
            position: fixed;
            bottom: -220px;          /* Posisi awal: tersembunyi di bawah layar */
            left: 50%;
            transform: translateX(-50%); /* Posisi tengah horizontal */
            z-index: 4000;           /* Di atas semua elemen */
            background: var(--bg-kedua);
            border: 1px solid var(--emas-utama);
            border-radius: var(--r-besar);
            padding: 20px 26px;
            max-width: 460px;
            width: 92%;
            box-shadow: 0 8px 36px rgba(201,168,76,0.14);
            /* Animasi naik dari bawah */
            transition: bottom 0.5s cubic-bezier(0.4,0,0.2,1);
            text-align: center;
        }

        /* Posisi saat popup scarcity muncul */
        .scarcity-popup.show { bottom: 96px; }

        .scarcity-popup p {
            font-size: 0.88rem;
            color: var(--emas-terang);
            line-height: 1.6;
            margin-bottom: 14px;
        }

        /* Tombol "Baik, Saya Checkout" di popup scarcity */
        .btn-scarcity-close {
            background: var(--emas-utama);
            color: var(--bg-utama);
            border: none;
            padding: 9px 24px;
            border-radius: var(--r-kecil);
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transisi);
        }
        .btn-scarcity-close:hover { opacity: 0.85; }

        /* ============================================
           THANK YOU POPUP (POPUP TERIMA KASIH)
           Muncul setelah user klik "Buy via WhatsApp".
           Berisi pesan retensi yang mengarahkan user
           ke blog Siwaras Project.
           ============================================ */
        .thankyou-popup {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.82);
            backdrop-filter: blur(8px);
            z-index: 5000;           /* Paling atas dari semua */
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .thankyou-popup.active { display: flex; }

        /* Kotak konten popup terima kasih */
        .thankyou-box {
            background: var(--bg-kedua);
            border: 1px solid var(--emas-utama);
            border-radius: var(--r-sangat-besar);
            padding: 38px 30px;
            max-width: 500px;
            width: 100%;
            text-align: center;
            animation: modalMasuk 0.4s ease; /* Gunakan animasi yang sama dengan modal */
        }

        .thankyou-icon { font-size: 2.8rem; margin-bottom: 14px; }

        .thankyou-box h3 {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--emas-terang);
            margin-bottom: 14px;
        }

        .thankyou-box p {
            font-size: 0.86rem;
            color: var(--teks-kedua);
            line-height: 1.75;
            margin-bottom: 22px;
        }

        /* Link ke blog di dalam pesan terima kasih */
        .thankyou-box a {
            color: var(--emas-utama);
            text-decoration: underline;
            text-underline-offset: 3px; /* Jarak garis bawah dari teks */
        }
        .thankyou-box a:hover { color: var(--emas-terang); }

        /* Tombol tutup popup terima kasih */
        .btn-thankyou-close {
            background: var(--emas-utama);
            color: var(--bg-utama);
            border: none;
            padding: 11px 30px;
            border-radius: var(--r-kecil);
            font-size: 0.86rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transisi);
        }
        .btn-thankyou-close:hover { opacity: 0.85; transform: translateY(-2px); }

        /* ============================================
           FOOTER (KAKI HALAMAN)
           Bagian paling bawah dengan informasi brand
           dan link ke blog
           ============================================ */
        footer {
            background: var(--bg-kedua);
            border-top: 1px solid var(--garis);
            padding: 36px 20px;
            text-align: center;
        }

        .footer-brand {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--emas-terang);
            margin-bottom: 8px;
        }

        .footer-text {
            font-size: 0.78rem;
            color: var(--teks-redup);
            line-height: 1.65;
        }
        .footer-text a { color: var(--emas-utama); text-decoration: none; }
        .footer-text a:hover { text-decoration: underline; }

        /* ============================================
           CUSTOM SCROLLBAR
           Mengubah tampilan scrollbar agar sesuai tema
           dark gold (hanya di browser berbasis WebKit)
           ============================================ */
        ::-webkit-scrollbar { width: 5px; }              /* Lebar scrollbar tipis */
        ::-webkit-scrollbar-track { background: var(--bg-utama); } /* Latar scrollbar */
        ::-webkit-scrollbar-thumb { background: var(--emas-gelap); border-radius: 3px; } /* Pegangan scrollbar */
        ::-webkit-scrollbar-thumb:hover { background: var(--emas-utama); }

        /* ============================================
           ANIMASI FADE-IN SAAT SCROLL
           Elemen dengan class 'fade-in' akan muncul
           perlahan saat masuk viewport (area terlihat)
           ============================================ */
        .fade-in {
            opacity: 0;               /* Awalnya transparan */
            transform: translateY(22px); /* Awalnya bergeser ke bawah */
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        /* Class 'visible' ditambahkan oleh JavaScript saat elemen terlihat */
        .fade-in.visible { opacity: 1; transform: translateY(0); }

        /* ============================================
           MEDIA QUERY RESPONSIF MOBILE
           Penyesuaian tampilan untuk layar kecil (≤640px)
           ============================================ */
        @media (max-width: 640px) {
            /* Kurangi padding dan tinggi hero di mobile */
            .hero { min-height: 48vh; padding: 36px 16px; }
            .section { padding: 36px 16px 55px; }

            /* Grid jadi 1 kolom penuh di mobile */
            .catalog-grid { grid-template-columns: 1fr; }

            /* Sesuaikan modal untuk layar kecil */
            .modal-img { height: 390px; }
            .modal-body { padding: 18px; }
            .modal-title { font-size: 1.2rem; }

            /* Harga dan tombol add to cart jadi vertikal di mobile */
            .modal-price-area { flex-direction: column; align-items: flex-start; }
            .btn-add-cart { width: 100%; text-align: center; justify-content: center; }

            /* Floating buttons lebih kecil di mobile */
            .floating-btns { bottom: 18px; right: 14px; }
            .fab { width: 40px; height: 40px; font-size: 1.1rem; }

            /* Posisi scarcity popup disesuaikan agar tidak tertutup FAB */
            .scarcity-popup.show { bottom: 82px; }
        }

        /* ============================================
           SELEKSI TEKS (HIGHLIGHT)
           Warna saat user menyeleksi/menandai teks
           ============================================ */
        ::selection { background: var(--emas-utama); color: var(--bg-utama); }

/* ====================================================================
   KUSTOMISASI TAMBAHAN: AI CONSULTANT & CS BOX (SIWARAS PROJECT)
   Didesain mewah dengan efek Glassmorphism bernuansa Dark Gold 
   ==================================================================== */

/* Kontainer Utama AI Box */
.ai-consultant-container {
    animation: fadeIn 0.8s ease-out forwards;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Area Kotak Pesan Obrolan */
.ai-chat-messages {
    scrollbar-width: thin;
    scrollbar-color: var(--emas-utama) rgba(0, 0, 0, 0.3);
}

/* Mengatur Scrollbar khusus Browser berbasis Chrome/Safari */
.ai-chat-messages::-webkit-scrollbar {
    width: 5px;
}
.ai-chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}
.ai-chat-messages::-webkit-scrollbar-thumb {
    background: var(--emas-utama);
    border-radius: 4px;
}

/* Balon Obrolan Bot (Jagad69 / Konsultan) */
.ai-msg.bot {
    align-self: flex-start;
    animation: slideInLeft 0.3s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Balon Obrolan User */
.ai-msg.user {
    align-self: flex-end;
    animation: slideInRight 0.3s ease-out;
    box-shadow: 0 4px 15px var(--emas-glow);
}

/* Elemen Input Area Chat */
.ai-chat-input-area input:focus {
    outline: none;
    border-color: var(--emas-terang) !important;
    box-shadow: 0 0 10px var(--emas-glow);
}

/* Tombol Kirim / Konsultasi */
.ai-chat-input-area button:hover {
    background: var(--emas-terang) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 168, 76, 0.4);
}
.ai-chat-input-area button:active {
    transform: translateY(0);
}

/* Tautan Rekomendasi Link di Dalam Chat AI */
.ai-msg.bot a {
    color: var(--emas-utama);
    text-decoration: none;
    border-bottom: 1px dashed var(--emas-utama);
    transition: color 0.2s ease;
}
.ai-msg.bot a:hover {
    color: var(--emas-terang);
}

/* ====================================================================
   ANIMASI KEYFRAMES KHUSUS CHAT BOX
   ==================================================================== */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(15px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Penyesuaian Responsif Layar HP untuk AI Box */
@media (max-width: 640px) {
    .ai-consultant-container {
        padding: 15px !important;
        margin-bottom: 2rem !important;
    }
    .ai-chat-messages {
        height: 220px !important;
    }
    .ai-chat-input-area {
        flex-direction: column;
    }
    .ai-chat-input-area button {
        width: 100%;
        padding: 12px 0 !important;
    }
}

  /* SOCIAL GRID */
  .social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 280px; margin: 0 auto 22px; }
  
  .social-item { display: flex; align-items: center; justify-content: center; background: #151b2a; height: 48px; border-radius: 12px; text-decoration: none; color: #0ff; font-size: 18px; transition: all 0.3s; border: 1px solid #232e48;
  animation: shine 3s infinite;
    
  }
  
   .social-item:hover { color: white; transform: translateY(-3px); border-color: #4cafef; box-shadow: 0 5px 15px rgba(76,175,239,0.2); }
  
  .social-item.wa-item { grid-column: span 4; background: linear-gradient(135deg, #128c7e, #075e54); color: white; font-size: 14px; font-weight: 600; gap: 8px; border: none; box-shadow: 0 4px 12px rgba(18,140,126,0.3); animation: shine 3s infinite;}
  
  .social-item.wa-item:hover { background: linear-gradient(135deg, #149c8c, #096f63); box-shadow: 0 6px 18px rgba(18,140,126,0.4); }