@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --maroon: #800000;
    --dark-maroon: #4a0000;
    --gold: #D4AF37;
    --gold-light: #F1D36E;
    --gold-dark: #B8860B;
    --soft-white: #FBFBFB;
    --text-dark: #1A1A1A;
    --nav-height: 80px;
    --gold: #D4AF37;
    --gold-light: #F1D36E;
    --gold-dark: #B8860B;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #ffffff;
    color: var(--text-dark);
    /* Hapus padding-top jika hero section menggunakan margin-top negatif */
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    width: 100%;
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    min-height: 650px;
    background: 
        linear-gradient(135deg, rgba(74, 0, 0, 0.95) 0%, rgba(20, 0, 0, 0.8) 100%), 
        url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bWFyaW9ufGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 0 0 80px 80px;
    display: flex;
    align-items: center;
    /* Menarik Hero ke atas tepat di bawah navbar transparan */
    margin-top: calc(-1 * var(--nav-height));
    padding-top: var(--nav-height);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('https://www.transparenttextures.com/patterns/batik-fractal.png');
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* FIX CSS DIAGNOSTIC: background-clip */
.text-gold {
    background: linear-gradient(to right, var(--gold-light), var(--gold));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* SEARCH BAR */
.search-container {
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.15); /* Dibuat agak transparan agar estetik */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Pastikan teks input default adalah putih */
.search-container .form-control {
    color: white !important;
}

/* Mengatur warna placeholder agar putih transparan */
.search-container .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* SAAT DIKLIK / FOKUS */
.search-container:focus-within {
    background: rgba(255, 255, 255, 0.98); /* Background jadi putih */
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* Saat kontainer putih, teks harus berubah jadi hitam agar terbaca */
.search-container:focus-within .form-control {
    color: var(--text-dark) !important;
}

/* Saat kontainer putih, placeholder berubah jadi abu-abu */
.search-container:focus-within .form-control::placeholder {
    color: #6c757d !important;
}

/* Saat kontainer putih, ikon search berubah jadi gelap */
.search-container:focus-within .bi-search {
    color: var(--maroon) !important;
}

.btn-search {
    background: linear-gradient(135deg, var(--maroon), var(--dark-maroon));
    color: white;
    border-radius: 100px !important;
    padding: 12px 35px !important;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.btn-search:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* --- CATEGORY SECTION REVISION --- */
.category-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Memberikan kesan kontainer menyatu tapi tetap bersih */
}

.category-card {
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover {
    background: #fdfdfd;
    transform: translateY(-5px);
}

.cat-icon-box {
    width: 65px;
    height: 65px;
    background: #F8F9FA; /* Abu-abu sangat muda sesuai referensi */
    border-radius: 18px;
    color: var(--maroon);
    font-size: 1.6rem;
    transition: all 0.3s ease;
}

/* Hover Effect: Icon berubah warna & sedikit berputar */
.category-card:hover .cat-icon-box {
    background: var(--maroon);
    color: var(--gold-light);
    transform: rotate(-8deg);
    box-shadow: 0 8px 20px rgba(128, 0, 0, 0.15);
}

/* Fix Hero Header Jarak */
.hero-section {
    margin-top: calc(-1 * var(--nav-height));
    padding-top: var(--nav-height);
}

.img-zoom {
    transition: 1.5s;
    height: 240px;
    object-fit: cover;
}

.btn-maroon-gradient {
    background: linear-gradient(135deg, var(--maroon), var(--dark-maroon));
    border: none;
    color: white !important;
}

/* --- ADAT PEDIA BANNER --- */
.pedia-banner {
    background: linear-gradient(135deg, #2a0000 0%, #b92d2d 100%);
    border-radius: 30px !important; /* Ukuran lebih pas sesuai gambar */
}

.btn-gold-gradient {
    background: #D4AF37; /* Warna padat lebih mewah */
    color: #000 !important;
    font-weight: 700;
    transition: 0.3s;
}

.btn-gold-gradient:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
}

/* Icon Book Opacity */
.bi-book-half {
    opacity: 0.55 !important;
}

/* Badge Gold Mewah */
.bg-gold-gradient {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    color: #3D080D !important; /* Warna teks burgundy gelap agar kontras dan mewah */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Border tipis untuk efek kedalaman */
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
}

/* Opsional: Tambahkan efek sedikit bercahaya */
.bg-gold-gradient i {
    color: #3D080D;
}