@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=About+Love&family=Poppins:wght@300;400;600;700&display=swap');
:root {
    --color-cream: #F5F5DC;          /* Cream */
    --color-dark-brown: #4B3832;     /* Cokelat Gelap */
    --color-gold-accent: #B8860B;    /* Emas/Aksen */
    --color-light-accent: #EFEBD8;   /* Latar Belakang Lebih Terang */
    --font-primary: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-light-accent);
    color: var(--color-dark-brown);
    padding-top: 65px; /* Kompensasi fixed navbar */
}

.navbar {
    background-color: rgba(75, 56, 50, 0.9); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px); 
}

/* Terapkan font Poppins untuk semua link navigasi */
.nav-link { 
    color: var(--color-cream) !important;
    font-weight: 600;
}

/* Terapkan font About Love khusus untuk Navbar Brand */
.navbar-brand {
    font-family: var(--font-logo) !important; /* Menerapkan font 'About Love' */
    font-size: 1.8rem; /* Opsional: Ukuran font disesuaikan agar font script terlihat jelas */
    font-weight: normal; /* Font script biasanya tidak perlu bold */
    color: var(--color-cream) !important;
}

.navbar-brand:hover, .nav-link:hover {
    color: var(--color-gold-accent) !important;
}

/* Hapus .navbar-brand dari blok styling lama jika Anda memisahkannya: */
/* Blok lama:
.navbar-brand, .nav-link { 
    color: var(--color-cream) !important;
    font-weight: 600;
} 
*/

/* Tombol Futuristik */
.btn-futuristic {
    background-color: var(--color-dark-brown);
    color: var(--color-cream);
    border: 2px solid var(--color-gold-accent);
    transition: all 0.3s ease;
    border-radius: 10px;
}
.btn-futuristic:hover {
    background-color: var(--color-gold-accent);
    color: var(--color-dark-brown);
    border-color: var(--color-dark-brown);
    transform: translateY(-2px);
}

/* Section Hero */
.hero-content h1 {
    /* Menerapkan font script yang girly */
    font-family: 'Sacramento', cursive; 
    
    /* Perbesar ukuran font agar lebih menonjol */
    font-size: 6rem; /* Naikkan dari 4rem menjadi 6rem */
    line-height: 1; /* Pastikan tidak ada spasi vertikal yang canggung */
    
    color: var(--color-cream);
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.9); /* Tambah shadow agar lebih dramatis */
    
    /* Hapus class fw-bold di HTML, karena font script sudah memiliki ketebalan sendiri */
    font-weight: normal; 
    
    /* Opsional: Teks script biasanya tidak kapital semua */
    text-transform: none; 
}


/* Pastikan kode .hero-section juga tetap ada di style.css */
.hero-section {
    background: url('../img/gambar1.png') no-repeat center center; 
    background-size: cover;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4); 
    margin-top: -65px; 
    padding-top: 65px;
}


/* Card Produk */
.product-card {
    background-color: var(--color-cream);
    border: none;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.product-card:hover {
    transform: translateY(-5px);
}
.product-card img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 250px;
    object-fit: cover;
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Footer */
footer {
    background-color: var(--color-dark-brown); /* Ganti dengan warna footer Anda */
    color: var(--color-gold-accent);
}

footer a {
   color: var(--color-gold-accent);
    transition: color 0.3s ease;
}

footer a:hover {
   color: var(--color-gold-accent);
}

/* Styling Ikon Sosial */
.social-icons .social-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-gold-accent);
    border-radius: 50%;
    margin-right: 10px;
    font-size: 1.2rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-icons .social-icon:hover {
    background-color: var(--color-accent); /* Ganti dengan warna yang menonjol saat hover */
    transform: scale(1.1);
    color: var(--color-dark-brown);
}
/* Admin Specific Style */
.sidebar { 
    background-color: var(--color-dark-brown); 
    color: var(--color-cream); 
    height: 100vh; 
    min-width: 250px;
} 
.sidebar a { 
    color: var(--color-cream); 
    text-decoration: none; 
    padding: 10px 15px; 
    display: block; 
} 
.sidebar a.active {
    background-color: var(--color-gold-accent); 
    color: var(--color-dark-brown); 
    font-weight: bold;
}
/* Styling Wrapper Gambar Produk */
.product-image-wrapper {
    position: relative;
    overflow: hidden;
}

.product-image-wrapper img {
    /* Pastikan gambar mengisi ruang yang sama seperti sebelumnya */
    height: 250px; 
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
    cursor: pointer; /* Menunjukkan bahwa gambar dapat diklik */
}

/* Hover effect pada gambar */
.product-image-wrapper:hover img {
    transform: scale(1.05); /* Sedikit zoom saat dihover */
}

/* Tombol Mata (Zoom Button Overlay) */
.product-zoom-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Sembunyikan secara default */
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    font-weight: bold;
}

/* Tampilkan tombol saat wrapper dihover */
.product-image-wrapper:hover .product-zoom-btn {
    opacity: 1;
}

/* Optional: Tambahkan overlay gelap saat dihover */
.product-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}
.product-image-wrapper:hover::after {
    opacity: 1;
}

/* Pastikan Carousel Modal terlihat bagus */
.modal-body .carousel-item img {
    max-height: 80vh; /* Membatasi tinggi gambar di modal */
    object-fit: contain;
}
/* Styling Kategori Background */
.kategori-card-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 200px; /* Sesuaikan tinggi yang diinginkan */
    border: none !important;
    overflow: hidden;
    padding: 0 !important; /* Hapus padding bawaan untuk memberi ruang pada overlay */
}

/* Layer untuk efek blur pada background */
.kategori-card-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Terapkan blur */
    filter: blur(5px); 
    -webkit-filter: blur(5px);
    
    /* Warna overlay gelap (opacity 0.5) untuk kontras teks putih */
    background-color: rgba(0, 0, 0, 0.5); 
    
    /* Gunakan inherit background-image dari parent */
    background-image: inherit; 
    background-size: cover;
    background-position: center;
    z-index: 1; /* Di bawah konten, di atas background */
}

/* Konten (Ikon dan Teks) */
.kategori-content-overlay {
    position: relative;
    z-index: 2; /* Pastikan konten di atas blur layer */
    padding: 1rem; /* Tambahkan padding di sini agar teks tidak mepet */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Tambahkan bayangan teks agar lebih mudah dibaca */
}
/* --- Styling Navbar Glassmorphism --- */

/* Tampilan Awal: Transparan di bagian Hero */
.glass-navbar {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
    background-color: transparent !important; /* Awalnya transparan */
}

/* Mengubah warna link agar terlihat di latar belakang gelap */
.glass-navbar .navbar-brand,
.glass-navbar .nav-link {
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Bayangan teks agar terbaca */
}

/* Tampilan Saat Di-scroll (Efek Kaca) */
.glass-navbar.scrolled {
    /* Background buram */
    background-color: rgba(255, 255, 255, 0.15) !important; 
    
    /* Efek Kaca (PENTING!) */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); /* Untuk kompatibilitas browser lama */
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.18); /* Garis batas bawah */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Mengubah warna link saat di-scroll agar kontras */
.glass-navbar.scrolled .navbar-brand,
.glass-navbar.scrolled .nav-link {
    color: #1a1a1a !important; /* Warna gelap */
    text-shadow: none;
}