:root {
    --brown-primary: #5d4037;
    --brown-dark: #3e2723;
    --brown-light: #bc9476;
}

body { font-family: 'Poppins', sans-serif; color: #333; }
h1, h2, .navbar-brand { font-family: 'Playfair Display', serif; }

.text-brown { color: var(--brown-primary); }
.text-brown-light { color: var(--brown-light) !important; }
.btn-brown { background-color: var(--brown-primary); color: white; border-radius: 30px; padding: 10px 25px; transition: 0.3s; }
.btn-brown:hover { background-color: var(--brown-dark); color: white; }

/* Carousel */
.carousel-item {
    height: 90vh;
    background-size: cover;
    background-position: center;
    position: relative;
}
.carousel-item::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45);
}
.carousel-caption { bottom: 30% !important; z-index: 2; }

/* WhatsApp Floating Left */
.wa-float {
    position: fixed; bottom: 30px; right: 30px; background: #25d366; color: white;
    padding: 12px 25px; border-radius: 50px; text-decoration: none; z-index: 9999;
    display: flex; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: 0.3s;
}
.wa-float:hover { background: #128c7e; color: white; transform: translateY(-5px); }
.wa-float i { font-size: 24px; margin-right: 10px; }

@media (max-width: 768px) {
    .wa-float span { display: none; }
    .wa-float { padding: 15px; left: 20px; }
}

.navbar-brand img {
    max-width: 180px; /* Sesuaikan lebar maksimal logo Anda */
    height: 40px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.05); /* Efek sedikit membesar saat kursor di atas logo */
}
.btn-outline-brown {
    border-color: var(--brown-primary);
    color: var(--brown-primary);
    border-radius: 20px;
}
.btn-outline-brown:hover, .btn-outline-brown.active {
    background-color: var(--brown-primary);
    color: white;
}

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.product-card img {
    height: 250px;
    object-fit: cover; /* Agar gambar tidak gepeng */
}
.bg-brown { background-color: var(--brown-primary) !important; }

/* Kategori List */
.category-list li a {
    color: #444;
    text-decoration: none;
    padding: 10px 0;
    display: block;
    border-bottom: 1px solid #eee;
    transition: 0.3s;
}
.category-list li a:hover, .category-list li a.active {
    color: var(--brown-primary);
    font-weight: 600;
    padding-left: 5px;
}
.category-list li a span {
    background: #f0f0f0;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    color: #888;
}

/* Gambar Produk di Katalog */
.product-card .card-img {
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.product-card:hover .card-img {
    transform: scale(1.1);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter-item {
    transition: all 0.5s ease-in-out;
}

/* Memastikan tombol kursor berubah */
.filter-btn {
    cursor: pointer;
}
.product-card {
    transition: all 0.3s ease;
}

.product-card img {
    height: 200px; /* Ukuran seragam */
    object-fit: cover; /* Gambar tidak gepeng */
    transition: transform 0.5s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

.product-card:hover img {
    transform: scale(1.1); /* Efek zoom tipis saat kursor masuk */
}

.section-title {
    font-family: 'Playfair Display', serif;
    position: relative;
    padding-bottom: 10px;
}

/* Pengaturan Grid Produk Berjejer */
.product-card {
    transition: all 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.product-card img {
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.product-card:hover img {
    transform: scale(1.1);
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

/* Background Header Page */
.bg-brown-light {
    background: #bc9476;
}

/* Responsif untuk HP */
@media (max-width: 576px) {
    .product-card img {
        height: 150px; /* Lebih kecil di HP agar pas 2 kolom */
    }
    .display-5 { font-size: 2rem; }
}
@media (max-width: 768px) {
    .carousel-caption h1 { font-size: 1.8rem; }
    .carousel-caption p.lead { font-size: 0.9rem; }
}
/* Update CSS WhatsApp Floating */
@media (max-width: 768px) {
    .wa-float {
        padding: 12px 15px; /* Memperkecil padding */
        bottom: 20px;       /* Sedikit naik agar tidak terlalu mepet bawah */
        right: 20px;        /* Tetap di kanan */
        border-radius: 50%; /* Membuatnya bulat sempurna di HP */
        width: 55px;        /* Ukuran lebar tetap */
        height: 55px;       /* Ukuran tinggi tetap */
        justify-content: center;
    }

    .wa-float span {
        display: none;      /* Menghilangkan tulisan "Chat Kami" di HP */
    }

    .wa-float i {
        margin-right: 0;    /* Menghilangkan jarak ikon karena teks sudah hilang */
        font-size: 28px;    /* Sedikit memperbesar ikon agar mudah ditekan */
    }
}