/*
 * Theme Name: Abadi Nylon
 * Description: Tema WordPress untuk landing page jualan terpal dan plastik
 * Version: 1.0
 * Author: Abadi Nylon
 * Text Domain: abadi-nylon
 *
 * ================================================================
 * DAFTAR ISI
 * ================================================================
 *  1.  Variabel CSS & Reset Global
 *  2.  Navbar (Navigasi Utama)
 *  3.  Hero Slideshow
 *      3a. Container & Slide
 *      3b. Navigasi Titik (Dots)
 *      3c. Navigasi Panah (Arrows)
 *      3d. Responsif Hero
 *  4.  Quality Section (Jaminan Kualitas)
 *  5.  Why Choose Us Section (Kenapa Pilih Kami)
 *      5a. Dekorasi Latar & Header
 *      5b. Value Cards (Kartu Nilai)
 *      5c. CTA Box & Tombol
 *      5d. Responsif Why Choose Us
 *  6.  Produk Unggulan (#produk)
 *      6a. Header Section Produk
 *      6b. Product Card Featured (Kartu Produk Utama)
 *      6c. Badge, Label Kategori & Animasi
 *      6d. Harga & Hover Effect
 *      6e. Badge Tambahan (Opsional)
 *      6f. Color Scheme Alternatif
 *      6g. Animasi Loading Gambar
 *  7.  Product Card (Kartu Produk Biasa)
 *  8.  Catalog Section
 *  9.  Online Order Section
 * 10.  Features Section (Fitur Unggulan)
 *      10a. Feature Box Base
 *      10b. Responsif Features (5 Breakpoint)
 * 11.  Ministry & Certification Section
 * 12.  Promo Section
 * 13.  Footer
 *      13a. Company Header & Tagline
 *      13b. Kontak & Tombol WhatsApp Footer
 *      13c. Peta (Map)
 *      13d. Footer Bottom & Ikon Sosial Media
 *      13e. Responsif Footer
 * 14.  Halaman Produk Tunggal (Single Product)
 * 15.  Template Halaman Full Width
 * 16.  Responsif Global
 * 17.  Product Featured — Responsif Mobile
 * 18.  Artikel Section (#artikel)
 * 19.  Sidebar Sticky
 * 20.  WhatsApp Floating Button (Khusus Mobile)
 * ================================================================
 */


/* ================================================================
   1. VARIABEL CSS & RESET GLOBAL
   ================================================================
   Mendefinisikan warna utama brand dan mereset margin/padding
   bawaan browser agar tampilan konsisten di semua perangkat.
   box-sizing: border-box memastikan padding & border tidak
   menambah lebar elemen di luar yang sudah ditentukan.
   ================================================================ */

:root {
    --primary-blue: #0055a5;   /* Warna biru utama brand */
    --secondary-blue: #0066cc; /* Warna biru sekunder — dipakai untuk hover & gradient */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Lebar elemen sudah termasuk padding & border */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden; /* Mencegah scroll horizontal yang tidak diinginkan */
}


/* ================================================================
   2. NAVBAR (NAVIGASI UTAMA)
   ================================================================
   Bar navigasi di bagian paling atas halaman.
   Menggunakan warna biru utama brand dengan teks putih.
   Tombol login diberi latar putih agar kontras dengan navbar.
   ================================================================ */

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
    background: var(--primary-blue) !important;
    padding: 1rem 0;
}
.navbar-brand {
    font-weight: 700;
    color: white !important;
    text-transform: uppercase;
}
.navbar-nav .nav-link {
    color: white !important;
    font-weight: 500;
    margin: 0 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
}
.navbar-nav .nav-link:hover {
    opacity: 0.8;
}

/* ================================================================
   NAVBAR BRAND
   ================================================================ */
.navbar-logo {
    height: 45px;
    width: auto;
    flex-shrink: 0;
}
.navbar-brand-text {
    display: flex;
    flex-direction: column;
}
.navbar-site-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    white-space: nowrap;
}

/* ================================================================
   OVERLAY
   default: transparan + pointer-events:none (tidak mengganggu klik)
   aktif: gelap + pointer-events:auto (bisa diklik untuk tutup)
   ================================================================ */
.navbar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9990;
    pointer-events: none;        /* TIDAK menutupi elemen lain */
    transition: background 0.3s ease;
}
#nav-toggle:checked ~ .navbar-overlay {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;        /* Aktif hanya saat drawer terbuka */
}

/* ================================================================
   MOBILE DRAWER — elemen terpisah dari Bootstrap
   ================================================================ */
#mobileDrawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 320px;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;               /* Di atas overlay */
    padding: 20px 0;
    transition: right 0.3s ease;
    box-shadow: -4px 0 15px rgba(0,0,0,0.15);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
#nav-toggle:checked ~ #mobileDrawer {
    right: 0;
}

/* Tombol × */
.navbar-close-btn {
    display: flex;
    justify-content: flex-end;
    padding: 0 15px 15px;
}
.navbar-close-btn label {
    background: #f0f0f0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar-close-btn label:hover {
    background: #e0e0e0;
}

/* Menu di dalam drawer */
.drawer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.drawer-nav li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
}
.drawer-nav li a {
    display: block;
    padding: 18px 20px;
    color: #333;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
}
.drawer-nav li a:hover {
    background: #f8f8f8;
    color: var(--primary-blue);
}

/* Desktop: sembunyikan drawer & hamburger label */
@media (min-width: 992px) {
    #mobileDrawer {
        display: none !important;
    }
    .navbar-overlay {
        display: none !important;
    }
}

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width: 991px) {
    .navbar > .container {
        flex-wrap: nowrap;
        align-items: center;
    }
    .navbar-brand {
        flex: 1;
        min-width: 0;
        max-width: calc(100% - 55px);
    }
    .navbar-brand-text {
        min-width: 0;
        flex: 1;
    }
    .navbar-site-title {
        font-size: 0.82rem;
        white-space: normal;
        line-height: 1.35;
        display: block;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .navbar-logo {
        height: 36px;
        flex-shrink: 0;
    }
    /* Sembunyikan Bootstrap collapse di mobile */
    .navbar-collapse {
        display: none !important;
    }
    .navbar-toggler {
        flex-shrink: 0;
        margin-left: 8px;
    }
}

@media (max-width: 400px) {
    .navbar-site-title {
        font-size: 0.8rem;
        max-width: 160px;
    }
    .navbar-logo {
        height: 32px;
    }
}

/* ================================================================
   3a. HERO SLIDESHOW — CONTAINER & SLIDE
   ================================================================
   Slideshow gambar fullwidth di bawah navbar.
   Setiap slide ditumpuk secara absolut; hanya slide ".active"
   yang terlihat. Tinggi container ditentukan oleh .hero-slide-spacer
   agar tidak kolaps saat semua slide bersifat absolute.
   Transisi opacity 1 detik memberikan efek fade halus antar slide.
   ================================================================ */

.hero-slideshow-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.hero-slideshow-container {
    position: relative;
    width: 100%;
    /* Tinggi diatur oleh JavaScript berdasarkan gambar yang sedang aktif */
}

/* Semua slide ditumpuk secara absolut; tersembunyi secara default */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out; /* Efek fade antar slide */
    z-index: 1;
}

/* Slide yang sedang aktif — ditampilkan di atas yang lain */
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Spacer: elemen tak terlihat yang menentukan tinggi container slideshow.
   Gambar di dalam spacer bersifat invisible namun tetap memiliki dimensi. */
.hero-slide-spacer {
    display: block;
    width: 100%;
    visibility: hidden;   /* Tak terlihat tapi tetap memakan ruang */
    pointer-events: none; /* Tidak bisa diklik */
}

.hero-slide-spacer img {
    width: 100%;
    height: auto;
    display: block;
}

/* Pembungkus tautan di setiap slide — fullwidth tanpa gap bawah */
.hero-slide-link {
    display: block;
    width: 100%;
    line-height: 0; /* Menghilangkan celah putih bawah gambar */
    cursor: pointer;
    text-decoration: none;
}

/* Gambar di dalam slide — responsif penuh */
.hero-slide-link img {
    width: 100%;
    height: auto;
    display: block;
}


/* ================================================================
   3b. HERO SLIDESHOW — NAVIGASI TITIK (DOTS)
   ================================================================
   Titik-titik indikator di bagian bawah tengah slideshow.
   Titik aktif lebih besar & berwarna putih solid.
   ================================================================ */

/* Container titik navigasi — posisi absolute di tengah bawah */
.hero-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%); /* Tengahkan secara horizontal */
    display: flex;
    gap: 12px;
    z-index: 10;
}

/* Setiap titik navigasi */
.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5); /* Putih transparan saat tidak aktif */
    border: 2px solid white;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover: lebih terang & sedikit membesar */
.hero-dot:hover {
    background: rgba(255,255,255,0.8);
    transform: scale(1.2);
}

/* Titik aktif: putih solid & sedikit lebih besar */
.hero-dot.active {
    background: white;
    width: 14px;
    height: 14px;
}


/* ================================================================
   3c. HERO SLIDESHOW — NAVIGASI PANAH (ARROWS)
   ================================================================
   Tombol panah kiri/kanan untuk berpindah slide secara manual.
   Berbentuk lingkaran semi-transparan dengan ikon teks putih.
   ================================================================ */

/* Gaya dasar tombol panah */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Vertikal tengah */
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.3);
    border: 2px solid white;
    border-radius: 50%; /* Bentuk bulat */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    color: white;
}

/* Hover: lebih terang & sedikit membesar */
.hero-arrow:hover {
    background: rgba(255,255,255,0.5);
    transform: translateY(-50%) scale(1.1);
}

/* Posisi panah kiri dan kanan */
.hero-arrow-prev { left: 20px; }
.hero-arrow-next { right: 20px; }


/* ================================================================
   3d. HERO SLIDESHOW — RESPONSIF
   ================================================================ */

/* Tablet: panah lebih kecil & lebih dekat ke tepi */
@media (max-width: 991px) {
    .hero-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .hero-arrow-prev { left: 10px; }
    .hero-arrow-next { right: 10px; }
}

/* Mobile: panah disembunyikan, dots & titik aktif lebih kecil */
@media (max-width: 576px) {
    .hero-arrow { display: none; } /* Panah disembunyikan di layar kecil */
    .hero-dots { bottom: 10px; }
    .hero-dot { width: 10px; height: 10px; }
    .hero-dot.active { width: 12px; height: 12px; }
}


/* ================================================================
   4. QUALITY SECTION (JAMINAN KUALITAS)
   ================================================================
   Section yang menampilkan badge/foto bulat sebagai simbol
   jaminan kualitas produk, disandingkan dengan teks penjelasan.
   ================================================================ */

.quality-section {
    padding: 80px 0;
    background: white;
}

/* Badge foto bulat dengan shadow biru */
.quality-badge {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,85,165,0.2);
    position: relative;
}

/* Lingkaran dekoratif blur di belakang badge */
.quality-badge::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    background: linear-gradient(135deg, rgba(0,150,255,0.1), rgba(0,200,255,0.2));
    border-radius: 50%;
    top: -10%;
    left: -10%;
    z-index: -1;
}

/* Gambar di dalam badge — menutupi seluruh area */
.quality-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder jika belum ada gambar — latar gradient biru */
.quality-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0055a5, #0099ff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Judul section umum yang dipakai di beberapa section */
.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

/* Garis bawah dekoratif di bawah judul section */
.title-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
    border-radius: 2px;
    margin-top: 10px;
}

/* ---- Galeri Thumbnail Produk (di dalam Quality Section) ---- */

/* Container galeri thumbnail */
.product-gallery {
    margin-top: 20px;
}

/* Setiap thumbnail gambar/video di galeri */
.gallery-thumb {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100px;
    width: 100%;
    position: relative;
    background: #f8f9fa;
}

/* Thumbnail aktif atau saat hover: border biru & sedikit membesar */
.gallery-thumb:hover,
.gallery-thumb.active {
    border-color: var(--primary-blue);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,85,165,0.3);
}

/* Gambar & video di dalam thumbnail */
.gallery-thumb img,
.gallery-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay gelap di atas thumbnail saat hover (untuk efek visual) */
.thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;          /* Tersembunyi secara default */
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Overlay muncul saat hover */
.gallery-thumb:hover .thumb-overlay {
    opacity: 1;
}

/* Thumbnail aktif: overlay sangat tipis agar tidak menghalangi gambar */
.gallery-thumb.active .thumb-overlay {
    opacity: 0.2;
}

/* Ikon play/zoom di tengah overlay */
.thumb-overlay i {
    font-size: 2.5rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Area tampilan gambar/video utama */
.product-main-display {
    position: relative;
    min-height: 400px;
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
}

/* Gambar & video utama yang ditampilkan besar */
#mainImage,
#mainVideo {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain; /* Menampilkan gambar penuh tanpa crop */
    transition: opacity 0.3s ease;
    display: block;
    background: #fff;
}

/* Kustomisasi tampilan kontrol video bawaan browser (webkit) */
video::-webkit-media-controls-panel {
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
}

/* Tombol play video — bulat berwarna biru brand */
video::-webkit-media-controls-play-button {
    background-color: var(--primary-blue);
    border-radius: 50%;
}

/* Penyesuaian grid agar thumbnail rapi & tidak ada gap berlebih */
.product-gallery .row {
    margin: 0 -5px;
}

.product-gallery .col-3 {
    padding: 0 5px;
    margin-bottom: 10px;
}

/* ================================================================
   TRUSTED BRANDS SECTION
   ================================================================ */

.trusted-brands-section {
    padding: 40px 0;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
}

/* Gambar "Kualitas Terjamin" di kolom kiri */
.quality-image {
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Setiap kotak logo brand — tinggi seragam */
.brand-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;          /* Tinggi tetap agar semua seragam */
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.brand-logo-item:hover {
    box-shadow: 0 5px 20px rgba(0, 85, 165, 0.15);
    border-color: rgba(0, 85, 165, 0.2);
    transform: translateY(-3px);
}

/* Gambar logo — tidak terpotong, proporsional */
.brand-logo-item img {
    max-height: 80px;       /* Batas tinggi gambar */
    max-width: 100%;
    width: auto;
    object-fit: contain;    /* Gambar tidak terpotong */
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.brand-logo-item:hover img {
    filter: grayscale(0%);  /* Full color saat hover */
}

/* Placeholder teks jika belum ada logo */
.brand-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

/* ---- Responsif ---- */
@media (max-width: 991px) {
    .trusted-brands-section {
        padding: 30px 0;
    }
    .brand-logo-item {
        height: 100px;
    }
    .brand-logo-item img {
        max-height: 65px;
    }
}

@media (max-width: 576px) {
    .trusted-brands-section {
        padding: 25px 0;
    }
    .quality-image {
        max-width: 200px;
        margin-bottom: 20px;
    }
    .brand-logo-item {
        height: 85px;
        padding: 10px;
    }
    .brand-logo-item img {
        max-height: 55px;
    }
}

/* ================================================================
   5a. WHY CHOOSE US SECTION — DEKORASI LATAR & HEADER
   ================================================================
   Section "Kenapa Pilih Kami" dengan latar gradient putih ke abu.
   Memiliki elemen dekoratif radial gradient di pojok kanan atas
   dan kiri bawah sebagai aksen visual tanpa mengganggu konten.
   ================================================================ */

.why-choose-us-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

/* Lingkaran dekoratif pojok kanan atas */
.why-choose-us-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0,85,165,0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

/* Lingkaran dekoratif pojok kiri bawah */
.why-choose-us-section::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,153,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

/* Konten section berada di atas elemen dekoratif */
.why-choose-us-section .container {
    position: relative;
    z-index: 1;
}

/* Label kecil di atas judul section — berbentuk pil dengan border */
.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(0,85,165,0.1) 0%, rgba(0,153,255,0.1) 100%);
    color: var(--primary-blue);
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 2px solid rgba(0,85,165,0.2);
}

/* Judul utama section — ukuran besar & tebal */
.section-title-main {
    font-size: 2.8rem;
    font-weight: 900;
    color: #1a1a1a;
    margin-bottom: 15px;
    letter-spacing: -1px; /* Sedikit rapat agar terlihat modern */
}

/* Subjudul/deskripsi di bawah judul utama */
.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}


/* ================================================================
   5b. WHY CHOOSE US — VALUE CARDS (KARTU NILAI)
   ================================================================
   Kartu yang menampilkan poin-poin keunggulan toko.
   Saat hover: kartu naik ke atas, garis biru muncul di atas kartu,
   dan ikon berputar sedikit untuk efek interaktif.
   ================================================================ */

.value-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animasi dengan efek "bouncy" */
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Garis gradien biru di bagian atas kartu (tersembunyi secara default) */
.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
    transform: scaleX(0);        /* Mulai dari lebar nol */
    transform-origin: left;      /* Animasi mulai dari kiri */
    transition: transform 0.4s ease;
}

/* Garis biru muncul penuh saat hover */
.value-card:hover::before {
    transform: scaleX(1);
}

/* Efek hover kartu: naik & shadow lebih kuat */
.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,85,165,0.2);
    border-color: rgba(0,85,165,0.1);
}

/* Wrapper ikon — memberi jarak bawah dari ikon ke judul */
.value-icon-wrapper {
    margin-bottom: 25px;
}

/* Kotak ikon berbentuk rounded square dengan gradient biru */
.value-icon-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0,85,165,0.3);
    transition: all 0.4s ease;
    position: relative;
}

/* Kilap/highlight di sudut atas kiri ikon */
.value-icon-circle::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    border-radius: 20px;
    top: 0;
    left: 0;
}

/* Ikon sedikit miring & membesar saat hover kartu */
.value-card:hover .value-icon-circle {
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 12px 35px rgba(0,85,165,0.4);
}

/* Ikon Font Awesome di dalam kotak */
.value-icon-circle i {
    font-size: 2.2rem;
    color: white;
    z-index: 1;
}

/* Judul kartu */
.value-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Deskripsi kartu — mengisi sisa ruang (flex-grow) */
.value-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1; /* Mendorong daftar ke bawah kartu */
}

/* Daftar poin di bagian bawah kartu */
.value-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Setiap baris daftar */
.value-list li {
    font-size: 0.9rem;
    color: #555;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #f0f0f0; /* Garis pemisah tipis */
    transition: all 0.3s ease;
}

/* Baris terakhir tanpa garis bawah */
.value-list li:last-child {
    border-bottom: none;
}

/* Ikon centang/bintang di awal setiap baris daftar */
.value-list li i {
    color: var(--primary-blue);
    font-size: 1rem;
    flex-shrink: 0; /* Tidak mengecil meskipun teks panjang */
}

/* Saat hover kartu, setiap baris daftar bergeser sedikit ke kanan */
.value-card:hover .value-list li {
    padding-left: 5px;
}


/* ================================================================
   5c. WHY CHOOSE US — CTA BOX & TOMBOL
   ================================================================
   Kotak ajakan bertindak (Call to Action) di bawah kartu-kartu.
   Latar gradient biru dengan elemen lingkaran transparan dekoratif.
   Dua tombol: tombol putih (primer) & tombol transparan (sekunder).
   ================================================================ */

/* Kotak CTA — gradient biru dengan shadow */
.cta-box {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    padding: 50px 40px;
    border-radius: 25px;
    box-shadow: 0 15px 50px rgba(0,85,165,0.3);
    position: relative;
    overflow: hidden;
}

/* Lingkaran dekoratif pojok kanan atas CTA */
.cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

/* Lingkaran dekoratif pojok kiri bawah CTA */
.cta-box::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -30%;
    width: 80%;
    height: 150%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
}

/* Judul CTA — teks putih tebal */
.cta-title {
    font-size: 2rem;
    font-weight: 900;
    color: white;
    margin-bottom: 15px;
    position: relative;
    z-index: 1; /* Di atas elemen dekoratif */
}

/* Teks deskripsi CTA */
.cta-text {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

/* Container tombol-tombol CTA — baris fleksibel & wrap di mobile */
.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Gaya dasar kedua tombol CTA */
.btn-cta-primary,
.btn-cta-secondary {
    padding: 14px 35px;
    border-radius: 50px; /* Bentuk pil */
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

/* Tombol primer — latar putih, teks biru */
.btn-cta-primary {
    background: white;
    color: var(--primary-blue) !important;
    box-shadow: 0 5px 20px rgba(255,255,255,0.3);
}

/* Hover tombol primer: sedikit ke atas & shadow lebih kuat */
.btn-cta-primary:hover {
    background: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255,255,255,0.5);
}

/* Tombol sekunder — transparan dengan border putih */
.btn-cta-secondary {
    background: transparent;
    color: white !important;
    border-color: rgba(255,255,255,0.5);
}

/* Hover tombol sekunder: latar sedikit putih & border solid */
.btn-cta-secondary:hover {
    background: rgba(255,255,255,0.15);
    border-color: white;
    transform: translateY(-3px);
}


/* ================================================================
   5d. WHY CHOOSE US — RESPONSIF
   ================================================================ */

/* Tablet (≤991px): padding berkurang, elemen sedikit mengecil */
@media (max-width: 991px) {
    .why-choose-us-section { padding: 70px 0; }
    .section-title-main { font-size: 2.2rem; }
    .section-subtitle { font-size: 1rem; }
    .value-card { padding: 35px 25px; }
    .value-icon-circle { width: 70px; height: 70px; }
    .value-icon-circle i { font-size: 1.8rem; }
    .value-title { font-size: 1.25rem; }
}

/* Mobile (≤576px): lebih compact, tombol CTA penuh lebar */
@media (max-width: 576px) {
    .why-choose-us-section { padding: 50px 0; }
    .section-title-main { font-size: 1.8rem; }
    .section-badge { font-size: 0.7rem; padding: 6px 18px; }
    .value-card { padding: 30px 20px; margin-bottom: 20px; }
    .value-icon-circle { width: 60px; height: 60px; }
    .value-icon-circle i { font-size: 1.5rem; }
    .cta-box { padding: 40px 25px; }
    .cta-title { font-size: 1.6rem; }
    .cta-text { font-size: 0.95rem; }
    .cta-buttons { flex-direction: column; } /* Tombol ditumpuk vertikal */
    .btn-cta-primary,
    .btn-cta-secondary { width: 100%; justify-content: center; }
}


/* ================================================================
   6a. PRODUK UNGGULAN (#produk) — HEADER SECTION
   ================================================================
   Section produk unggulan dengan latar gradient abu ke putih.
   Pseudo-element ::before menambahkan lapisan warna transparan
   di bagian atas untuk kedalaman visual. Judul section lebih
   besar dan tebal dibanding .section-title global.
   ================================================================ */

/* Latar section dengan gradient vertikal */
#produk {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* Lapisan warna biru sangat transparan di atas section */
#produk::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(135deg, rgba(0,85,165,0.05) 0%, rgba(0,153,255,0.05) 100%);
    z-index: 0;
}

/* Konten berada di atas lapisan dekoratif */
#produk .container {
    position: relative;
    z-index: 1;
}

/* Judul section produk — lebih besar dari .section-title global */
#produk .section-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #0055a5;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
}

/* Garis bawah judul produk — lebih lebar & punya shadow */
#produk .title-underline {
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, #0055a5 0%, #0099ff 100%);
    border-radius: 3px;
    margin: 0 auto 3rem;
    box-shadow: 0 3px 10px rgba(0,85,165,0.3);
}


/* ================================================================
   6b. PRODUCT CARD FEATURED — KARTU PRODUK UTAMA
   ================================================================
   Kartu produk unggulan dengan desain yang lebih premium.
   Saat hover: kartu naik & membesar, garis biru muncul di atas,
   gambar membesar & sedikit miring untuk efek 3D.
   ================================================================ */

/* Struktur dasar kartu produk featured */
.product-card-featured {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column; /* Konten disusun vertikal */
    border: 1px solid rgba(0,85,165,0.1);
    position: relative;
}

/* Garis biru tipis di atas kartu (tersembunyi secara default) */
.product-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0055a5, #0099ff);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Garis biru muncul saat hover */
.product-card-featured:hover::before {
    opacity: 1;
}

/* Efek hover: naik, sedikit membesar, shadow lebih kuat */
.product-card-featured:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,85,165,0.2);
    border-color: rgba(0,85,165,0.2);
}

/* Area gambar produk — tinggi tetap dengan latar abu muda */
.product-image-featured {
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    border-bottom: 2px solid #f0f0f0;
}

/* Tautan yang membungkus gambar produk */
.product-image-featured a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Gambar produk — contain agar tidak terpotong, dengan padding & shadow */
.product-image-featured img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.4s ease;
    padding: 15px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}

/* Saat hover: gambar membesar & sedikit miring */
.product-card-featured:hover .product-image-featured img {
    transform: scale(1.08) rotate(2deg);
    filter: drop-shadow(0 8px 20px rgba(0,85,165,0.2));
}

/* Area info teks di bawah gambar */
.product-info-featured {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Mengisi sisa tinggi kartu */
    background: white;
}


/* ================================================================
   6c. PRODUCT CARD FEATURED — BADGE, LABEL & ANIMASI
   ================================================================ */

/* Badge nama brand di pojok kiri atas gambar */
.product-brand-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #0055a5 0%, #0077cc 100%);
    color: white;
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    z-index: 10;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,85,165,0.4);
    transition: all 0.3s ease;
}

/* Badge brand membesar saat hover kartu */
.product-card-featured:hover .product-brand-badge {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,85,165,0.5);
}

/* Label kategori produk — pil biru dengan efek kilap saat hover */
.product-category-label {
    color: white !important;
    font-size: 0.7rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    background: linear-gradient(135deg, #0055a5 0%, #0099ff 100%) !important;
    padding: 7px 16px !important;
    border-radius: 25px !important;
    width: fit-content;
    box-shadow: 0 3px 12px rgba(0,85,165,0.35);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; /* Diperlukan agar efek kilap tidak meluber */
}

/* Efek kilap yang bergerak dari kiri ke kanan saat hover kartu */
.product-category-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Dimulai di luar kiri */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

/* Kilap bergerak ke kanan saat hover kartu */
.product-card-featured:hover .product-category-label::before {
    left: 100%;
}

/* Ikon kecil di dalam label kategori — animasi naik-turun */
.product-category-label i {
    font-size: 0.65rem;
    margin-right: 4px;
    animation: iconBounce 2s infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); } /* Naik 3px di tengah siklus */
}

/* Judul produk — max 2 baris dengan ellipsis jika melebihi */
.product-title-featured {
    font-size: 1.15rem;
    font-weight: 800 !important;
    color: #1a1a1a;
    margin-bottom: 16px;
    min-height: 56px; /* Memastikan tinggi konsisten meski teks pendek */
    display: -webkit-box;
    -webkit-line-clamp: 2;           /* Maksimal 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Tautan di dalam judul produk */
.product-title-featured a {
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

/* Garis bawah animasi pada tautan judul (mulai dari lebar nol) */
.product-title-featured a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #0055a5, #0099ff);
    transition: width 0.3s ease;
}

/* Tautan berubah biru saat hover */
.product-title-featured a:hover {
    color: #0055a5;
}

/* Garis bawah melebar saat hover tautan */
.product-title-featured a:hover::after {
    width: 100%;
}


/* ================================================================
   6d. PRODUCT CARD FEATURED — HARGA & HOVER EFFECT
   ================================================================ */

/* Harga produk — teks gradient biru (teknik clip gradient) */
.product-price-featured {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #0055a5 0%, #0099ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Teks menjadi transparan agar gradient terlihat */
    background-clip: text;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    position: relative;
    padding: 12px 0;
    display: inline-block;
}

/* Label kategori & harga sedikit membesar saat hover kartu */
.product-card-featured:hover .product-category-label {
    transform: scale(1.05);
    box-shadow: 0 5px 18px rgba(0,85,165,0.45);
}

.product-card-featured:hover .product-price-featured {
    transform: scale(1.05);
}


/* ================================================================
   6e. BADGE TAMBAHAN (OPSIONAL)
   ================================================================
   Badge-badge ini bersifat opsional dan bisa ditambahkan
   ke kartu produk sesuai kebutuhan: diskon, stok, rating, dll.
   ================================================================ */

/* Badge info tambahan — latar kuning emas */
.product-info-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1a1a1a;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(255,165,0,0.3);
}

/* Badge diskon — pojok kanan atas gambar, merah dengan animasi pulse */
.discount-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: white;
    padding: 8px 14px;
    border-radius: 25px;
    font-size: 0.75rem;
    font-weight: 900;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(255,107,107,0.4);
    animation: discountPulse 2s infinite;
}

/* Animasi berkedip/pulse untuk badge diskon */
@keyframes discountPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Badge status stok — teks hijau dengan titik berkedip */
.stock-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #10b981; /* Hijau — stok tersedia */
}

/* Titik indikator stok yang berkedip */
.stock-badge i {
    font-size: 0.6rem;
    margin-right: 4px;
    animation: stockBlink 2s infinite;
}

@keyframes stockBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; } /* Redup di tengah siklus */
}

/* Varian badge stok habis — teks merah */
.stock-badge.out-of-stock {
    color: #ef4444;
}

/* Rating bintang produk */
.product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

/* Bintang berwarna kuning emas */
.product-rating i {
    color: #FFD700;
    font-size: 0.85rem;
}

/* Jumlah review di samping bintang */
.product-rating .rating-count {
    font-size: 0.75rem;
    color: #666;
    margin-left: 6px;
}

/* Badge gratis ongkir — latar hijau */
.free-shipping-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(16,185,129,0.3);
}

.free-shipping-badge i {
    font-size: 0.7rem;
    margin-right: 5px;
}


/* ================================================================
   6f. COLOR SCHEME ALTERNATIF UNTUK KARTU PRODUK
   ================================================================
   Tambahkan class color-scheme-* ke kartu produk untuk mengubah
   warna label kategori & teks harga tanpa mengubah elemen lain.
   Skema 1 (Blue) adalah default.
   ================================================================ */

/* Skema 1 — Biru (default, tidak perlu class tambahan) */
.color-scheme-blue .product-category-label {
    background: linear-gradient(135deg, #0055a5 0%, #0099ff 100%) !important;
}

/* Skema 2 — Ungu */
.color-scheme-purple .product-category-label {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
.color-scheme-purple .product-price-featured {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Skema 3 — Oranye */
.color-scheme-orange .product-category-label {
    background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%) !important;
}
.color-scheme-orange .product-price-featured {
    background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Skema 4 — Hijau */
.color-scheme-green .product-category-label {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}
.color-scheme-green .product-price-featured {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Skema 5 — Merah */
.color-scheme-red .product-category-label {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%) !important;
}
.color-scheme-red .product-price-featured {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Badge "POPULER" di pojok kanan atas gambar — oranye dengan pulse */
.popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(255,107,53,0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}


/* ================================================================
   6g. ANIMASI LOADING GAMBAR PRODUK FEATURED
   ================================================================
   Gambar dengan src kosong disembunyikan sepenuhnya.
   Saat gambar sudah dimuat, tampil dengan efek fade-in & scale.
   ================================================================ */

/* Sembunyikan gambar yang belum punya src */
.product-image-featured img[src=""] {
    opacity: 0;
}

/* Animasi fade-in + sedikit zoom saat gambar dimuat */
.product-image-featured img {
    animation: fadeInImage 0.6s ease-in;
}

@keyframes fadeInImage {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Perspektif 3D pada baris kartu untuk mendukung efek hover yang lebih dalam */
#produk .row {
    perspective: 1000px;
}


/* ================================================================
   7. PRODUCT CARD (KARTU PRODUK BIASA)
   ================================================================
   Kartu produk sederhana yang digunakan di section lain
   (bukan section produk unggulan). Desain lebih minimalis.
   ================================================================ */

.product-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
}

/* Hover: naik ke atas dengan shadow lebih kuat */
.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,85,165,0.2);
}

/* Area gambar produk biasa — tinggi tetap */
.product-image {
    height: 250px;
    overflow: hidden;
    background: #f8f9fa;
    position: relative;
}

.product-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Gambar zoom saat hover kartu */
.product-card:hover .product-image img {
    transform: scale(1.1);
}

/* Label brand di pojok kiri atas — lebih sederhana dari featured */
.product-brand {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-blue);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.8rem;
    z-index: 2;
}

/* Area konten teks produk */
.product-content {
    padding: 20px;
}

/* Judul produk biasa — max 2 baris */
.product-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.2rem;
    min-height: auto;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.product-title a:hover {
    color: var(--primary-blue);
}

/* Harga produk biasa — biru brand, tanpa efek gradient */
.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

/* Tombol "Beli/Hubungi" di kartu produk biasa */
.btn-product {
    background: var(--primary-blue);
    color: white !important;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
}

/* Hover: lebih gelap & naik sedikit */
.btn-product:hover {
    background: #003d7a;
    transform: translateY(-2px);
}

/* Placeholder gambar saat belum ada foto produk */
.product-placeholder {
    width: 100%;
    height: 250px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0;
}

.product-placeholder-small {
    width: 100%;
    height: 250px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================================================================
   8. CATALOG SECTION
   ================================================================
   Grid katalog produk dengan overlay teks di bagian bawah gambar.
   Setiap item memiliki tinggi tetap dengan efek zoom saat hover.
   ================================================================ */

/* Item katalog — posisi relatif untuk overlay absolut */
.catalog-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 200px;
    transition: all 0.3s ease;
}

/* Hover: naik sedikit dengan shadow */
.catalog-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.catalog-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Gambar zoom saat hover */
.catalog-item:hover img {
    transform: scale(1.1);
}

/* Overlay gradient gelap di bagian bawah untuk teks judul */
.catalog-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 20px;
    color: white;
}

.catalog-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
}

.catalog-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================================================================
   9. ONLINE ORDER SECTION
   ================================================================
   Section ajakan pemesanan online dengan latar biru brand.
   ================================================================ */

.online-order-section {
    background: linear-gradient(135deg, #0055a5 0%, #0077cc 100%);
    padding: 80px 0;
    color: white;
}

/* Area gambar di dalam section dengan padding besar */
.online-order-image {
    padding: 60px;
}


/* ================================================================
   10a. FEATURES SECTION — FEATURE BOX BASE
   ================================================================
   Kotak-kotak fitur unggulan (ikon besar + judul + deskripsi).
   Ikon membesar & berputar sedikit saat hover untuk efek dinamis.
   ================================================================ */

/* Kotak fitur dasar — rata tengah dengan latar putih */
.feature-box {
    text-align: center;
    padding: 40px 30px;
    background: white;
    border-radius: 15px;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 2px solid transparent;
}

/* Hover: kotak naik sedikit dengan shadow & border biru tipis */
.feature-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,85,165,0.15);
    border-color: rgba(0,85,165,0.1);
}

/* Ikon fitur — ukuran besar berwarna biru brand */
.feature-icon {
    font-size: 4.5rem;
    color: var(--primary-blue);
    margin-bottom: 20px;
    display: block;
    transition: all 0.4s ease;
}

/* Ikon membesar & berputar 5 derajat saat hover */
.feature-box:hover .feature-icon {
    transform: scale(1.15) rotate(5deg);
    color: var(--secondary-blue); /* Warna berubah ke biru sekunder */
}

/* Judul fitur */
.feature-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: #1a1a1a;
    transition: color 0.3s ease;
}

/* Judul berubah warna biru saat hover */
.feature-box:hover .feature-title {
    color: var(--primary-blue);
}

/* Teks deskripsi fitur */
.feature-box .text-muted.small {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
}


/* ================================================================
   10b. FEATURES SECTION — RESPONSIF (5 BREAKPOINT)
   ================================================================
   Ukuran ikon & padding disesuaikan per breakpoint agar tampilan
   tetap proporsional dari layar besar hingga layar kecil.
   ================================================================ */

/* Desktop besar (≥1200px): ikon & padding paling besar */
@media (min-width: 1200px) {
    .feature-icon { font-size: 5rem; }
    .feature-box { padding: 50px 35px; }
}

/* Desktop standar (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .feature-icon { font-size: 4rem; }
    .feature-box { padding: 40px 25px; }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .feature-icon { font-size: 3.5rem; }
    .feature-box { padding: 35px 20px; }
    .feature-title { font-size: 1.1rem; }
}

/* Mobile besar (577px - 767px) */
@media (min-width: 577px) and (max-width: 767px) {
    .feature-icon { font-size: 3rem; }
    .feature-box { padding: 30px 20px; }
    .feature-title { font-size: 1rem; }
    .feature-box .text-muted.small { font-size: 0.85rem; }
}

/* Mobile kecil (≤576px) — tampil 2 kolom, semua elemen compact */
@media (max-width: 576px) {
    .feature-box { padding: 25px 15px; text-align: center; }
    .feature-icon { font-size: 2.8rem !important; margin-bottom: 12px; }
    .feature-title { font-size: 0.95rem !important; margin-bottom: 8px; line-height: 1.3; }
    .feature-box .text-muted.small { font-size: 0.75rem !important; line-height: 1.4; }
    .feature-box:hover { transform: translateY(-5px); } /* Efek hover lebih halus */
    .feature-box:hover .feature-icon { transform: scale(1.08); }
}

/* Mobile sangat kecil (≤380px): semua lebih compact lagi */
@media (max-width: 380px) {
    .feature-box { padding: 20px 10px; }
    .feature-icon { font-size: 2.5rem !important; }
    .feature-title { font-size: 0.85rem !important; }
    .feature-box .text-muted.small { font-size: 0.7rem !important; }
}


/* ================================================================
   11. MINISTRY & CERTIFICATION SECTION
   ================================================================
   Section sertifikasi/legalitas produk dari kementerian.
   Badge bulat menampilkan logo/foto instansi terkait.
   ================================================================ */

/* Section kementerian — latar abu muda */
.ministry-section {
    padding: 80px 0;
    background: #f8f9fa;
}

/* Badge foto bulat dengan border putih & shadow */
.ministry-badge {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.ministry-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder jika belum ada foto instansi */
.ministry-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0055a5, #0099ff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Section sertifikasi — latar merah (sesuai warna sertifikat SNI) */
.cert-section {
    background: linear-gradient(135deg, #c62828 0%, #e53935 100%);
    padding: 80px 0;
    color: white;
}

/* Badge sertifikat — bulat berlatar putih di tengah */
.cert-badge {
    width: 200px;
    height: 200px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}


/* ================================================================
   12. PROMO SECTION
   ================================================================
   Section promosi dengan latar biru dan kotak kaca (glassmorphism).
   ================================================================ */

.promo-section {
    background: linear-gradient(135deg, #0055a5 0%, #0077cc 100%);
    padding: 60px 0;
    color: white;
}

.promo-image {
    padding: 40px;
}

/* Kotak promo bergaya kaca (glassmorphism) — latar transparan + blur */
.promo-badge {
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 60px;
    backdrop-filter: blur(10px); /* Efek blur kaca */
    border: 3px solid rgba(255,255,255,0.3);
}


/* ================================================================
   13. FOOTER
   ================================================================
   Footer gelap dengan gradient hitam. Garis biru tipis di bagian
   atas footer sebagai aksen visual yang menghubungkan dengan brand.
   ================================================================ */

/* Latar footer — gradient gelap */
footer {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

/* Garis gradien biru tipis di bagian paling atas footer */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
}


/* ================================================================
   13a. FOOTER — COMPANY HEADER & TAGLINE
   ================================================================ */

/* Header perusahaan di footer — dipisahkan dengan garis bawah */
.footer-company-header {
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    margin-bottom: 30px;
}

/* Nama perusahaan — besar, tebal, huruf kapital */
.footer-company-name {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* Tagline perusahaan — miring & ukuran normal */
.footer-tagline {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
}


/* ================================================================
   13b. FOOTER — KONTAK & TOMBOL WHATSAPP
   ================================================================
   Item kontak (alamat, telepon, email) disusun secara fleksibel.
   Tombol WhatsApp berwarna hijau dengan deklarasi !important
   untuk memastikan gaya tidak tertimpa oleh tema WordPress.
   ================================================================ */

/* Baris item kontak */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    font-size: 0.95rem;
}

.footer-contact-item h5 {
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

/* Ikon di dalam item kontak — tidak mengecil */
.footer-contact-item i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.footer-contact-item a {
    transition: all 0.3s ease;
}

.footer-contact-item a:hover {
    color: white !important;
    text-decoration: underline !important;
}

/*
 * Tombol WhatsApp di footer
 * Menggunakan banyak selector untuk memastikan styling tidak
 * tertimpa oleh CSS bawaan WordPress atau Bootstrap.
 */
.btn-whatsapp-footer,
a.btn-whatsapp-footer,
a.btn-whatsapp-footer:link,
a.btn-whatsapp-footer:visited {
    background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%) !important;
    color: white !important;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    border: none !important;
    box-shadow: 0 6px 20px rgba(37,211,102,0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
}

/* State hover, focus, dan active tombol WhatsApp footer */
.btn-whatsapp-footer:hover,
a.btn-whatsapp-footer:hover,
.btn-whatsapp-footer:focus,
a.btn-whatsapp-footer:focus,
.btn-whatsapp-footer:active,
a.btn-whatsapp-footer:active {
    background: linear-gradient(135deg, #20BA5A 0%, #1ea952 100%) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37,211,102,0.5);
    color: white !important;
    text-decoration: none !important;
}

/* Ikon WhatsApp di dalam tombol footer */
.btn-whatsapp-footer i,
a.btn-whatsapp-footer i {
    font-size: 1.3rem;
    color: white !important;
}


/* ================================================================
   13c. FOOTER — PETA (MAP)
   ================================================================
   Peta Google Maps yang disematkan dengan efek grayscale ringan.
   Saat hover, warna peta kembali normal (full color).
   ================================================================ */

.footer-map-wrapper {
    position: relative;
}

.footer-map-header h5 {
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
}

/* Container peta dengan border-radius & shadow gelap */
.footer-map-container {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border: 3px solid rgba(255,255,255,0.1);
}

/* Peta sedikit grayscale dan redup secara default agar serasi dengan footer gelap */
.footer-map-container iframe {
    display: block;
    filter: grayscale(20%) brightness(0.95);
    transition: all 0.3s ease;
}

/* Hover: peta kembali penuh warna & kecerahan normal */
.footer-map-container:hover iframe {
    filter: grayscale(0%) brightness(1);
}


/* ================================================================
   13d. FOOTER — FOOTER BOTTOM & IKON SOSIAL MEDIA
   ================================================================ */

/* Bar copyright di bagian paling bawah footer */
.footer-bottom {
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 40px;
}

/* Kumpulan ikon sosial media — default rata tengah */
.footer-social {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Di tablet ke atas: ikon sosial media rata kanan */
@media (min-width: 768px) {
    .footer-social {
        justify-content: flex-end;
    }
}

/* Setiap ikon sosial media — bulat transparan */
.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

/* Hover: latar biru brand, naik sedikit */
.social-icon:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,85,165,0.4);
}


/* ================================================================
   13e. FOOTER — RESPONSIF
   ================================================================ */

/* Tablet (≤991px): nama perusahaan & tinggi peta dikurangi */
@media (max-width: 991px) {
    .footer-company-name { font-size: 1.6rem; }
    .footer-map-container iframe { height: 350px; }
}

/* Mobile (≤576px): layout terpusat, item kontak vertikal */
@media (max-width: 576px) {
    .footer-company-header { text-align: center; }
    .footer-company-name { font-size: 1.4rem; }

    /* Item kontak disusun vertikal & rata tengah */
    .footer-contact-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .footer-contact-item h5 { justify-content: center; }
    .footer-contact-item i { margin-right: 0; margin-bottom: 5px; }

    /* Tombol WhatsApp penuh lebar */
    .btn-whatsapp-footer { width: 100%; justify-content: center; padding: 12px 25px; }

    .footer-map-container iframe { height: 300px; }
    .footer-bottom p { font-size: 0.8rem !important; }
}


/* ================================================================
   14. HALAMAN PRODUK TUNGGAL (SINGLE PRODUCT PAGE)
   ================================================================
   Gaya untuk halaman detail produk individual dengan
   breadcrumb, galeri gambar, info harga, dan tab deskripsi.
   ================================================================ */

/* Breadcrumb navigasi di atas halaman produk */
.breadcrumb-section {
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.breadcrumb-item a {
    color: var(--primary-blue);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.product-detail {
    background: white;
}

.product-image-wrapper {
    position: relative;
}

/* Gambar utama produk — responsif dengan tinggi maksimal */
.product-main-image img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    border-radius: 10px;
}

/* Placeholder gambar besar saat foto belum tersedia */
.product-placeholder-large {
    width: 100%;
    height: 500px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* Label brand besar di halaman detail produk */
.brand-badge-large {
    background: var(--primary-blue);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    display: inline-block;
    margin-top: 15px;
}

.product-category .badge {
    font-size: 0.875rem;
    padding: 8px 15px;
    margin-right: 5px;
}

/* Judul produk di halaman detail — lebih besar dari kartu */
.product-info .product-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
    min-height: auto;
}

/* Kotak harga dengan aksen border kiri biru */
.product-price-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--primary-blue);
}

.price-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Harga utama di halaman detail produk */
.price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-blue);
    margin: 5px 0;
}

/* Kontrol pemilihan jumlah produk */
.quantity-selector .input-group {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.quantity-selector .form-control {
    border: none;
    font-weight: 600;
}

.quantity-selector .btn {
    border: none;
}

/* Tombol order via WhatsApp di halaman produk */
.product-actions .btn-success {
    background: #25D366 !important;
    border: none;
    padding: 15px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.product-actions .btn-success:hover {
    background: #20BA5A !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(37,211,102,0.3);
}

/* Daftar fitur produk — tiap item punya latar abu */
.product-features ul li {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Tab deskripsi produk — border bawah biru brand */
.product-description .nav-tabs {
    border-bottom: 2px solid var(--primary-blue);
}

.product-description .nav-link {
    color: #666;
    font-weight: 600;
    border: none;
    padding: 15px 25px;
}

/* Tab yang sedang aktif — teks & garis bawah biru */
.product-description .nav-link.active {
    color: var(--primary-blue);
    background: transparent;
    border-bottom: 3px solid var(--primary-blue);
}

/* Kotak konten deskripsi produk */
.content-box {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.content-box table {
    margin-top: 20px;
}

/* Header tabel spesifikasi produk */
.content-box table th {
    background: #f8f9fa;
    font-weight: 600;
}

/* Gambar jaminan kualitas di halaman produk — rounded dengan shadow */
.quality-image {
    max-width: 420px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}


/* ================================================================
   15. TEMPLATE HALAMAN FULL WIDTH
   ================================================================
   Template khusus untuk halaman yang membutuhkan kontrol penuh
   terhadap layout tanpa padding/margin default WordPress.
   Digunakan untuk halaman landing yang dibuat manual dengan HTML.
   ================================================================ */

/* Halaman full-width: reset semua margin & padding */
.full-width-page {
    margin: 0;
    padding: 0;
}

.page-content-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

/*
 * Reset margin & padding elemen teks bawaan WordPress
 * agar layout yang dibuat manual tidak terdistorsi.
 */
.full-width-page .page-content-wrapper p,
.full-width-page .page-content-wrapper h1,
.full-width-page .page-content-wrapper h2,
.full-width-page .page-content-wrapper h3,
.full-width-page .page-content-wrapper h4,
.full-width-page .page-content-wrapper h5,
.full-width-page .page-content-wrapper h6 {
    margin: 0;
    padding: 0;
}

/* Gambar tetap responsif di dalam halaman full-width */
.full-width-page .page-content-wrapper img {
    max-width: 100%;
    height: auto;
}

/* Container custom untuk elemen yang membutuhkan batas lebar */
.full-width-page .container-custom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Kelas pembantu untuk padding section — 3 ukuran tersedia */
.section-padding    { padding: 80px 0; }   /* Normal */
.section-padding-sm { padding: 40px 0; }   /* Kecil */
.section-padding-lg { padding: 120px 0; }  /* Besar */


/* ================================================================
   16. RESPONSIF GLOBAL
   ================================================================
   Penyesuaian global untuk berbagai elemen di breakpoint umum.
   ================================================================ */

/* Tablet (≤992px): tinggi gambar kartu featured dikurangi */
@media (max-width: 992px) {
    .product-image-featured { height: 240px; }
    #produk .section-title { font-size: 2.2rem; }
}

/* Mobile (≤768px): ukuran teks & elemen umum dikurangi */
@media (max-width: 768px) {
    .hero-section { min-height: auto; padding: 60px 0; }
    .hero-section h1 { font-size: 2rem; }
    .hero-section p { font-size: 1rem; }
    .section-title { font-size: 1.8rem; }
    .product-info .product-title { font-size: 1.5rem; }
    .price-value { font-size: 1.5rem; }
    .btn-hero { padding: 10px 25px; font-size: 0.85rem; margin-bottom: 10px; }
    .quality-badge,
    .ministry-badge { width: 200px; height: 200px; }


/* ================================================================
   17. PRODUCT FEATURED — RESPONSIF MOBILE
   ================================================================
   Override khusus untuk kartu produk featured di berbagai ukuran
   layar. Ditempatkan di dalam media query ≤768px sebagai bagian
   dari responsif global, namun mencakup sub-breakpoint sendiri.
   ================================================================ */

/* -- Base: berlaku untuk semua ukuran sebagai fallback -- */

/* Reset kartu produk featured ke gaya yang lebih bersih */
.product-card-featured {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-info-featured {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Tombol WhatsApp di kartu produk featured — hijau penuh */
.btn-whatsapp-featured {
    background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%) !important;
    color: white !important;
    border: none;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    margin-top: auto; /* Selalu berada di bagian bawah kartu */
}

.btn-whatsapp-featured:hover {
    background: linear-gradient(135deg, #20BA5A 0%, #1ea952 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37,211,102,0.4);
    color: white !important;
}

/* -- Mobile (≤576px): layout compact untuk layar kecil -- */
@media (max-width: 576px) {

    /* Kartu dengan margin bawah agar tidak menempel */
    .product-card-featured {
        margin-bottom: 20px;
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }

    /* Area gambar sedikit lebih tinggi di mobile agar produk terlihat jelas */
    .product-image-featured {
        height: 220px !important;
        position: relative;
    }

    /* Gambar mengisi seluruh area (cover) di mobile */
    .product-image-featured img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Badge brand lebih kecil agar tidak memenuhi gambar */
    .product-brand-badge {
        padding: 5px 12px !important;
        font-size: 0.65rem !important;
        top: 12px !important;
        left: 12px !important;
    }

    /* Badge populer lebih kecil */
    .popular-badge {
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
        top: 12px !important;
        right: 12px !important;
    }

    /* Padding info produk lebih kecil agar muat di layar sempit */
    .product-info-featured {
        padding: 18px !important;
    }

    /* Label kategori lebih compact */
    .product-category-label {
        font-size: 0.65rem !important;
        padding: 5px 12px !important;
        margin-bottom: 10px !important;
        display: inline-block;
    }

    .product-category-label i {
        font-size: 0.6rem !important;
    }

    /* Judul produk max 2 baris di mobile */
    .product-title-featured {
        font-size: 1rem !important;
        font-weight: 800 !important;
        color: #1a1a1a;
        margin-bottom: 8px !important;
        min-height: 44px !important;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-title-featured a {
        color: #1a1a1a;
        text-decoration: none;
    }

    /* Harga produk di mobile — pakai warna solid (bukan gradient clip) */
    .product-price-featured {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        color: #0061af;
        margin-bottom: 8px !important;
        display: block;
    }

    /* Garis bawah dekoratif di bawah harga */
    .product-price-featured::after {
        content: "";
        display: block;
        width: 50px;
        height: 3px;
        background: #0061af;
        margin-top: 8px;
        margin-bottom: 12px;
    }

    /* Tombol WhatsApp penuh lebar di mobile */
    .btn-whatsapp-featured {
        width: 100% !important;
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        font-weight: 700;
        background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%) !important;
        color: white !important;
        border: none;
        border-radius: 8px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-whatsapp-featured i { font-size: 1.1rem; }

    .btn-whatsapp-featured:hover {
        background: linear-gradient(135deg, #20BA5A 0%, #1ea952 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(37,211,102,0.4);
    }

    /* Judul section produk lebih kecil di mobile */
    #produk .section-title {
        font-size: 1.8rem !important;
        margin-bottom: 10px;
    }

    #produk .title-underline {
        width: 60px;
        height: 4px;
        margin-bottom: 15px;
    }

    /* Tombol "Lihat Semua" penuh lebar di mobile */
    #produk .btn-primary {
        width: 100%;
        padding: 12px 25px !important;
        font-size: 0.9rem !important;
    }
}

/* -- Mobile sangat kecil (≤380px): semua lebih compact lagi -- */
@media (max-width: 380px) {
    .product-image-featured { height: 180px !important; }
    .product-info-featured { padding: 15px !important; }
    .product-title-featured { font-size: 0.95rem !important; min-height: 40px !important; }
    .product-price-featured { font-size: 1.2rem !important; }
    .btn-whatsapp-featured { padding: 9px 15px !important; font-size: 0.8rem !important; }
}

/* -- Tablet portrait (577px - 767px) -- */
@media (min-width: 577px) and (max-width: 767px) {
    .product-image-featured { height: 240px !important; }
    .product-info-featured { padding: 20px !important; }
    .product-title-featured { font-size: 1.05rem !important; }
    .product-price-featured { font-size: 1.35rem !important; }
}

/* -- Tablet landscape (768px - 991px) -- */
@media (min-width: 768px) and (max-width: 991px) {
    .product-image-featured { height: 200px !important; }
    .product-title-featured { font-size: 1rem !important; min-height: 48px !important; }
    .product-price-featured { font-size: 1.3rem !important; }
    /* Tombol WhatsApp lebih kecil agar muat di kartu tablet */
    .btn-whatsapp-featured { font-size: 0.8rem !important; padding: 10px 15px !important; }
}


/* ================================================================
   18. ARTIKEL SECTION (#artikel)
   ================================================================
   Kartu artikel/blog dengan efek hover naik & zoom gambar.
   Tombol "Baca Selengkapnya" menggunakan warna biru brand.
   ================================================================ */

/* Kartu artikel — rounded dengan overflow untuk zoom gambar */
#artikel .card {
    transition: all 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
}

/* Hover kartu artikel: naik & shadow biru */
#artikel .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,85,165,0.2) !important;
}

/* Gambar thumbnail artikel — tinggi tetap dengan object-fit cover */
#artikel .card-img-top {
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Gambar artikel zoom saat hover kartu */
#artikel .card:hover .card-img-top {
    transform: scale(1.1);
}

/* Judul artikel — berubah biru saat hover */
#artikel .card-title a {
    font-weight: 500;
    transition: color 0.3s;
}

#artikel .card-title a:hover {
    color: var(--primary-blue) !important;
}

/* Tombol "Baca Selengkapnya" */
#artikel .btn-primary {
    background: var(--primary-blue);
    border: none;
    padding: 10px 30px;
    font-weight: 600;
}

#artikel .btn-primary:hover {
    background: #003d7a;
    transform: translateY(-2px);
}


/* ================================================================
   19. SIDEBAR STICKY
   ================================================================
   Sidebar yang mengikuti scroll halaman (sticky positioning).
   Berhenti sebelum melewati batas bawah viewport.
   max-height + overflow-y memastikan sidebar bisa discroll
   sendiri jika kontennya lebih panjang dari tinggi layar.
   ================================================================ */

.sidebar-sticky-wrapper {
    position: sticky;
    top: 100px;                        /* Jarak dari bagian atas viewport */
    max-height: calc(100vh - 120px);   /* Batas bawah otomatis sesuai viewport */
    overflow-y: auto;                  /* Scroll sendiri jika konten terlalu panjang */
}


/* ================================================================
   20. WHATSAPP FLOATING BUTTON (KHUSUS MOBILE)
   ================================================================
   Tombol WhatsApp mengambang di pojok kanan bawah layar.
   Disembunyikan di desktop dan hanya muncul di tablet/mobile (≤1024px).
   Menggunakan SVG inline sebagai ikon agar tidak bergantung
   pada library ikon eksternal.
   Animasi pulse berjalan hanya di mobile untuk menghemat performa.
   ================================================================ */

/* Tombol mengambang — posisi fixed di pojok kanan bawah */
.floating_button {
    position: fixed !important;
    width: 55px !important;
    height: 55px !important;
    bottom: 20px !important;
    right: 20px !important;
    background-color: #25D366 !important; /* Hijau WhatsApp */
    color: #ffffff !important;
    border-radius: 50% !important;        /* Bentuk bulat sempurna */
    display: none !important;             /* Tersembunyi secara default di desktop */
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 25px -5px rgba(37, 211, 102, 0.4) !important;
    z-index: 9999999 !important;          /* Di atas semua elemen lain */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Sembunyikan pseudo-element ::before bawaan plugin/tema
 * yang mungkin menambahkan konten tidak diinginkan.
 */
.floating_button:before {
    display: none !important;
    content: none !important;
}

/* Ikon WhatsApp menggunakan SVG inline sebagai background-image */
.floating_button_icon {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30px" height="30px"><path fill="%23fff" d="M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 01-13.754 2.299l-5.814.735a.392.392 0 01-.438-.44l.748-5.788A12.002 12.002 0 013.517 3.517zm3.61 17.043l.3.158a9.846 9.846 0 0011.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 00-1.747 11.554l.16.303-.51 3.942a.196.196 0 00.219.22l3.961-.501zm6.534-7.003l-.933 1.164a9.843 9.843 0 01-3.497-3.495l1.166-.933a.792.792 0 00.23-.94L9.561 6.96a.793.793 0 00-.924-.445 1291.6 1291.6 0 00-2.023.524.797.797 0 00-.588.88 11.754 11.754 0 0010.005 10.005.797.797 0 00.88-.587l.525-2.023a.793.793 0 00-.445-.923L14.6 13.327a.792.792 0 00-.94.23z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Label teks di samping ikon — disembunyikan di semua ukuran */
.label-container {
    display: none !important;
}

/* Tampilkan tombol di tablet dan mobile (≤1024px) */
@media only screen and (max-width: 1024px) {
    .floating_button {
        display: flex !important;
    }
}

/* Mobile (≤768px): tombol sedikit lebih kecil */
@media only screen and (max-width: 768px) {
    .floating_button {
        display: flex !important;
        width: 50px !important;
        height: 50px !important;
        bottom: 15px !important;
        right: 15px !important;
    }

    .floating_button_icon {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Mobile kecil (≤480px): ukuran sama dengan ≤768px */
@media only screen and (max-width: 480px) {
    .floating_button {
        display: flex !important;
        width: 50px !important;
        height: 50px !important;
        bottom: 15px !important;
        right: 15px !important;
    }

    .floating_button_icon {
        width: 26px !important;
        height: 26px !important;
    }
}

/*
 * Efek sentuh pada perangkat touch (tanpa hover fisik).
 * Tombol sedikit mengecil saat ditekan sebagai feedback visual.
 */
@media (hover: none) and (pointer: coarse) {
    .floating_button:active {
        transform: scale(0.95) !important;
        background-color: #20BA5A !important;
    }
}

/*
 * Animasi pulse hijau hanya berjalan di mobile (≤768px)
 * untuk menarik perhatian pengguna tanpa mengganggu di desktop.
 */
@media only screen and (max-width: 768px) {
    @keyframes pulse-mobile {
        0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
        70%  { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
        100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
    }

    /* Animasi pulse aktif secara terus-menerus */
    .floating_button {
        animation: pulse-mobile 2s infinite !important;
    }

    /* Animasi berhenti saat tombol ditekan agar tidak terasa janggal */
    .floating_button:active {
        animation: none !important;
    }
}