/* 1. RESET & FULL WIDTH LAYOUT */
    body {
        overflow-x: hidden !important;
    }

    nav.navbar {
        margin-bottom: 0 !important;
    }

    /* ==============================================================
   CSS HERO SLIDER (Mencegah Gambar Terpotong)
   ============================================================== */

.hero-slider-wrapper {
    width: 100%;
    overflow: hidden;
}

/* Memastikan item slider menyesuaikan tinggi konten (gambar) */
.hero-slide-item {
    width: 100%;
    display: block;
}

/* KUNCI UTAMA: Memaksa gambar tampil proporsional tanpa dipotong */
.hero-slide-item img {
    width: 100% !important;
    height: auto !important; /* Ini yang membuat rasio 16:9 tetap utuh */
    object-fit: contain !important; /* Mencegah gambar di-zoom/crop */
    display: block;
}

/* ==============================================================
   PENGATURAN DESKTOP VS MOBILE (Tampil/Sembunyi)
   ============================================================== */

/* Layar HP (Mobile) */
@media (max-width: 767px) {
    .img-desktop {
        display: none !important;
    }
    .img-mobile {
        display: block !important;
    }
}

/* Layar Laptop/PC (Desktop) */
@media (min-width: 768px) {
    .img-desktop {
        display: block !important;
    }
    .img-mobile {
        display: none !important;
    }
}

/* Pastikan wrapper slider memiliki position relative agar panah tidak keluar jalur */
.hero-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Tambahan dari solusi gambar terpotong sebelumnya */
}

/* Styling dasar tombol panah Kiri dan Kanan */
.custom-slick-prev,
.custom-slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Menarik tombol ke tengah secara vertikal */
    z-index: 10; /* Memastikan panah berada di atas gambar */
    
    background-color: rgba(255, 255, 255, 0.8); /* Warna putih transparan */
    color: #275db8; /* Warna biru sesuai tema website */
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Membuat tombol bulat sempurna */
    font-size: 18px;
    cursor: pointer;
    
    /* Memusatkan icon di dalam tombol */
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Bayangan lembut */
}

/* Efek saat tombol ditunjuk mouse */
.custom-slick-prev:hover,
.custom-slick-next:hover {
    background-color: #275db8;
    color: #ffffff;
}

/* Posisi spesifik panah kiri */
.custom-slick-prev {
    left: 20px;
}

/* Posisi spesifik panah kanan */
.custom-slick-next {
    right: 20px;
}

/* Opsional: Sembunyikan panah di layar HP agar tidak menutupi area gambar yang sempit */
@media (max-width: 767px) {
    .custom-slick-prev,
    .custom-slick-next {
        display: none !important;
    }
}

    /* Pembungkus utama menembus batas container */
    .hero-slider-wrapper {
        position: relative;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        overflow: hidden;
        background: #fff;
        margin-top: 0;
        padding: 0;
        display: block;
    }

    .home-hero-slider {
        margin: 0 !important;
        padding: 0 !important;
        display: block;
    }

    .home-hero-slider .slick-list,
    .home-hero-slider .slick-track,
    .home-hero-slider .slick-slide,
    .home-hero-slider .hero-slide-item {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        outline: none !important;
        border: none !important;
    }

    /* Setup gambar agar tajam dan menutupi area slider */
    .home-hero-slider .hero-slide-item img {
        width: 100vw !important;
        display: block;
        margin: 0;
        padding: 0;
        border-radius: 0 !important;
        object-fit: cover;
        object-position: center;
    }

    /* 2. LOGIC TAMPILAN GAMBAR (PENTING) */
    .img-desktop {
        display: block !important;
    }

    .img-mobile {
        display: none !important;
    }

    /* Pengaturan Tinggi Desktop */
    @media (min-width: 992px) {
        .home-hero-slider .hero-slide-item img {
            height: 480px;
        }
    }

    /* Pengaturan Tablet */
    @media (min-width: 768px) and (max-width: 991px) {
        .home-hero-slider .hero-slide-item img {
            height: 350px;
        }
    }

    /* Pengaturan Mobile (HP) */
    @media (max-width: 767px) {

        /* Tukar tampilan gambar: Sembunyikan desktop, Munculkan mobile */
        .img-desktop {
            display: none !important;
        }

        .img-mobile {
            display: block !important;
        }

        .home-hero-slider .hero-slide-item img {
            height: auto;
            min-height: 280px;
            /* Slider HP dibuat lebih tinggi agar hampir kotak */
        }
    }

    /* 3. STYLING INDIKATOR (TITIK SLIDER) */
    .home-hero-slider .slick-dots {
        position: absolute;
        bottom: 20px;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        width: 100%;
        z-index: 15;
    }

    .home-hero-slider .slick-dots li {
        position: relative;
        display: inline-block;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
        width: auto;
        height: auto;
    }

    .home-hero-slider .slick-dots li button {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 12px;
        height: 12px;
        padding: 0;
        cursor: pointer;
        color: transparent;
        border: none;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .home-hero-slider .slick-dots li button:before {
        display: none !important;
        content: '' !important;
    }

    .home-hero-slider .slick-dots li.slick-active button {
        background: #007bff;
        transform: scale(1.3);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    /* ==============================================================
   SECTION KEUNTUNGAN BELANJA (DENGAN WATERMARK ABSTRAK)
   ============================================================== */

/* Spasi luar section */
.benefits-section {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Latar Belakang Biru seukuran Container */
.benefits-wrapper {
    background-color: #275db8; /* Warna biru utama */
    border-radius: 16px; /* Sudut membulat */
    padding: 50px 40px; /* Ruang bernapas dalam kotak */
    box-shadow: 0 10px 25px rgba(39, 93, 184, 0.2); /* Bayangan halus */
    position: relative; /* Wajib untuk penempatan watermark */
    overflow: hidden; /* Mencegah watermark keluar dari kotak */
}

/* Watermark Abstrak via Pseudo-element (SVG Data URI) */
.benefits-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 3 Lapis Watermark: Lingkaran, Garis Diagonal, Poligon */
    background-image: 
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23ffffff' fill-opacity='0.05' /%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L400 400 M-10 10 L390 410 M10 -10 L410 390' stroke='%23ffffff' stroke-width='2' stroke-opacity='0.03' /%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75 0 L150 50 L125 125 L25 125 L0 50 Z' fill='%23ffffff' fill-opacity='0.04' /%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    
    /* Posisi watermark (Kiri Atas, Kanan Bawah, Tengah Atas) */
    background-position: 
        -50px -50px, 
        calc(100% + 100px) calc(100% + 50px),
        50% -20px;
        
    /* Ukuran watermark */
    background-size: 200px 200px, 400px 400px, 150px 150px;
    
    z-index: 1; /* Posisi di atas background biru, di bawah teks */
    pointer-events: none; /* Aman, tidak menghalangi klik */
}

/* Pastikan Teks dan Grid berada di atas lapisan Watermark */
.benefits-title,
.benefits-grid {
    position: relative;
    z-index: 2; 
}

/* Styling Judul */
.benefits-title {
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 40px;
    letter-spacing: 1px;
    line-height: 1.4;
}

/* Grid Layout: Default Desktop (4 Kolom) */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 20px; 
}

/* Styling Isi Item */
.benefit-item {
    text-align: center;
    color: #ffffff;
    padding: 10px;
    transition: transform 0.3s ease;
}

/* Efek Hover (Ikon & Teks Sedikit Terangkat) */
.benefit-item:hover {
    transform: translateY(-5px);
}

/* Styling Ikon */
.benefit-icon {
    font-size: 45px;
    margin-bottom: 15px;
    color: #ffffff;
}

/* Styling Teks Utama */
.benefit-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Styling Sub Teks (S&K Berlaku) */
.benefit-subtext {
    font-size: 11px;
    display: block;
    margin-top: 5px;
    opacity: 0.8;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* ==============================================================
   RESPONSIVE LAYOUT UNTUK TABLET & MOBILE
   ============================================================== */

/* Tablet Portrait & Laptop Kecil (Max 991px) */
@media (max-width: 991px) {
    .benefits-wrapper {
        padding: 40px 30px;
    }
    .benefits-title {
        font-size: 22px;
        margin-bottom: 30px;
    }
    .benefit-icon {
        font-size: 40px;
    }
    .benefit-text {
        font-size: 14px;
    }
}

/* Handphone / Mobile (Max 767px) */
@media (max-width: 767px) {
    .benefits-wrapper {
        padding: 30px 20px;
        border-radius: 12px;
    }
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr); /* Berubah jadi 2 Kolom */
        gap: 25px 10px;
    }
    .benefits-title {
        font-size: 18px;
        margin-bottom: 25px;
        padding: 0;
    }
    .benefit-icon {
        font-size: 35px;
        margin-bottom: 10px;
    }
    .benefit-text {
        font-size: 13px;
    }
    .benefit-subtext {
        font-size: 9px;
    }
}

    /* 4. STYLING BENEFIT / KEUNGGULAN TOKO */
    .benefit-section {
        background-color: #ffffff;
        padding: 30px 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .benefit-item {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    .benefit-icon {
        font-size: 38px;
        color: #dc3545;
        /* Warna merah menyesuaikan tema gambar */
        margin-right: 18px;
    }

    .benefit-text {
        text-align: left;
    }

    .benefit-text h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        margin: 0 0 4px 0 !important;
        color: #222222 !important;
        /* Warna judul benefit gelap */
    }

    .benefit-text p {
        font-size: 13px !important;
        color: #666666 !important;
        /* Warna deskripsi abu-abu gelap */
        margin: 0 !important;
        line-height: 1.3 !important;
    }

    /* Penyesuaian jarak saat di tampilan HP (bertumpuk) */
    @media (max-width: 767px) {
        .benefit-section {
            padding: 20px 0;
        }

        .benefit-item {
            padding: 12px 10px;
            /* Opsional: Tambahkan garis bawah sebagai pemisah di mobile */
            border-bottom: 1px solid #f9f9f9;
        }

        /* Hilangkan garis pada elemen terakhir */
        .benefit-col:last-child .benefit-item {
            border-bottom: none;
        }
    }

    /* 5. STYLING SECTION TITLE (SIMPLE & ELEGANT) */
    .sec-title {
        text-align: left !important;
        margin-bottom: 30px !important;
        position: relative !important;
        display: block !important;
        /* Memastikan kotak judul tampil penuh */
        width: 100% !important;
    }

    .sec-title h2 {
        /* Gaya Teks */
        font-family: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #222222 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;

        /* Layout & Spasi */
        position: relative !important;
        padding-bottom: 12px !important;
        margin: 0 !important;

        /* ===== KODE FIX UNTUK MEMUNCULKAN TEKS YANG HILANG ===== */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-indent: 0px !important;
        /* Menggagalkan trik hide-text template bawaan */
        line-height: 1.2 !important;
        background: transparent !important;
        -webkit-text-fill-color: #222222 !important;
        /* Memaksa warna muncul di browser Chrome/Safari */
        z-index: 10 !important;
    }

    /* Aksen garis pendek elegan di bawah teks */
    .sec-title h2::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 3px;
        background-color: #17a2b8 !important;
        /* Warna aksen biru/merah */
        border-radius: 2px;
    }

    /* 6. STYLING PANAH SLIDER (PORTRAIT PROMO) */
    .portrait-promo-slider .slick-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: #ffffff;
        border: 1px solid #ddd;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #555;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    .portrait-promo-slider .slick-arrow:hover {
        background: #dc3545;
        /* Merah saat di-hover */
        color: #ffffff;
        border-color: #dc3545;
    }

    .portrait-promo-slider .slick-prev {
        left: -20px;
    }

    .portrait-promo-slider .slick-next {
        right: -20px;
    }

    /* ==============================================================
       7. STYLING KATEGORI SLIDER (GAMBAR FULL 1:1 & TEKS DI BAWAH)
       ============================================================== */
       /* Pastikan section utamanya relative agar efek gradasi tetap di dalam batas section */
.kategori-section {
    position: relative;
    overflow: hidden; 
}

/* Membuat efek gradasi hitam dari bawah */
.kategori-section::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px; /* Sesuaikan tinggi gradasi sesuai selera (misal 100px - 150px) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    pointer-events: none; /* SANGAT PENTING: Agar gradasi tidak menghalangi klik/swipe pada slider */
    z-index: 1;
}

/* Pastikan konten (slider dan judul) berada di atas efek gradasi */
.kategori-section .container {
    position: relative;
    z-index: 2;
}
    .kategori-section {
        background-color: var(--primary-blue, #275db8);
        background-image: linear-gradient(135deg, var(--primary-blue, #275db8) 0%, #1e4b9c 100%);
    }

    /* Paksa Warna Judul Kategori Jadi Putih */
    .kategori-section .sec-title h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* Wrapper per item slider */
    .kategori-slide-item {
        padding: 0 10px;
        outline: none;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    /* Efek melayang saat di-hover */
    .kategori-slide-item:hover {
        transform: translateY(-5px);
    }

    /* Pengaturan Gambar Full 1:1 */
    .kategori-img {
        width: 100%;
        display: block;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        aspect-ratio: 1 / 1;
        /* Kunci bentuk agar selalu kotak 1:1 */
        object-fit: cover;
        /* Penuhi area card, gambar dipotong proporsional jika perlu */
        background-color: #ffffff;
        /* Jika icon transparan, background-nya putih */
        transition: box-shadow 0.3s ease;
    }

    .kategori-slide-item:hover .kategori-img {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }

    /* Pengaturan Teks Nama Kategori */
    .kategori-name-wrap {
        text-align: center;
        margin-top: 15px;
    }

    .kategori-name-text {
        color: #ffffff;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 15px;
        margin: 0;
        white-space: nowrap;
        /* Mencegah teks turun ke baris baru */
        overflow: hidden;
        text-overflow: ellipsis;
        /* Tambahkan '...' jika teks terlalu panjang */
        display: block;
    }

    /* ==============================================================
       8. GLOBAL BUTTON STYLES (OVERRIDE TEMA BAWAAN)
       Menyelaraskan semua tombol dengan tema Biru & Hijau Aksen
       ============================================================== */

    /* Tombol Utama (Primary) - Biru Tema */
    .btn-primary,
    button.btn-primary,
    a.btn-primary {
        background-color: var(--primary-blue, #275db8) !important;
        background-image: linear-gradient(135deg, #275db8 0%, #1e4b9c 100%) !important;
        border: none !important;
        color: #ffffff !important;
        border-radius: 50px !important;
        /* Bentuk melingkar (pill) yang modern */
        padding: 10px 28px !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 10px rgba(39, 93, 184, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    /* Efek Hover Tombol Primary */
    .btn-primary:hover,
    button.btn-primary:hover,
    a.btn-primary:hover {
        background-color: #1e4b9c !important;
        background-image: linear-gradient(135deg, #1e4b9c 0%, #153a7a 100%) !important;
        transform: translateY(-3px) !important;
        /* Efek melayang */
        box-shadow: 0 6px 15px rgba(39, 93, 184, 0.4) !important;
        color: #ffffff !important;
    }

    /* Tombol Sukses (Success/WhatsApp) - Hijau Aksen Tema */
    .btn-success,
    button.btn-success,
    a.btn-success {
        background-color: var(--accent-green, #66c2b1) !important;
        background-image: linear-gradient(135deg, #66c2b1 0%, #4da896 100%) !important;
        border: none !important;
        color: #ffffff !important;
        border-radius: 50px !important;
        padding: 10px 28px !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 10px rgba(102, 194, 177, 0.3) !important;
        transition: all 0.3s ease !important;
    }

    /* Efek Hover Tombol Sukses */
    .btn-success:hover,
    button.btn-success:hover,
    a.btn-success:hover {
        background-color: #4da896 !important;
        background-image: linear-gradient(135deg, #4da896 0%, #3a8a7a 100%) !important;
        transform: translateY(-3px) !important;
        /* Efek melayang */
        box-shadow: 0 6px 15px rgba(102, 194, 177, 0.4) !important;
        color: #ffffff !important;
    }

    /* Tombol Outline (Jika ada tombol transparan dengan garis pinggir) */
    .btn-outline-primary {
        background: transparent !important;
        border: 2px solid #275db8 !important;
        color: #275db8 !important;
        border-radius: 50px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        padding: 8px 26px !important;
    }

    .btn-outline-primary:hover {
        background-color: #275db8 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(39, 93, 184, 0.3) !important;
        transform: translateY(-2px) !important;
    }

    /* ==============================================================
       9. STYLING BRAND SLIDER (TEMA SAMA DENGAN KATEGORI, RATIO 1:1)
       ============================================================== */
       /* Pastikan section utamanya relative agar efek gradasi tetap di dalam batas section */
.brand-section {
    position: relative;
    overflow: hidden; 
}

/* Membuat efek gradasi hitam dari bawah */
.brand-section::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px; /* Sesuaikan tinggi gradasi (misal: 100px atau 150px) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    pointer-events: none; /* SANGAT PENTING: Agar gradasi tidak menghalangi klik/swipe pada slider */
    z-index: 1;
}

/* Pastikan konten (slider dan judul) berada di atas efek gradasi */
.brand-section .container {
    position: relative;
    z-index: 2;
}
    .brand-section {
        background-color: var(--primary-blue, #275db8);
        background-image: linear-gradient(135deg, var(--primary-blue, #275db8) 0%, #1e4b9c 100%);
    }
    .brand-section .sec-title h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important; 
    }
    .brand-slide-item {
        padding: 0 10px;
        outline: none;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    .brand-slide-item:hover {
        transform: translateY(-5px);
    }
    .brand-img {
        width: 100%;
        display: block;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        aspect-ratio: 2 / 1; /* Ratio 1:1 Presisi */
        padding: 10px;
        background-color: #ffffff;
        transition: box-shadow 0.3s ease;
    }
    .brand-slide-item:hover .brand-img {
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }
    .brand-name-wrap {
        text-align: center;
        margin-top: 15px;
    }
    .brand-name-text {
        color: #ffffff;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 15px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }