.navbar .navbar-nav{
    margin: auto;
    font-size: 15pt;
}

.navbar-nav-2 .nav-link-search img{
    height: 25px;
    width: 25px;
}

.navbar-nav-2 .nav-link-shopping img{
    height: 45px;
    width: 45px;
}

.navbar-nav-2 {
    display: flex;
    align-items: center;
    gap: 15px; /* jarak antar item */
}

.navbar-brand img{
    width: 200px;
}

#header{
    border: none ;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.25);
}

#populer .card {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 105, 180, 0.4); /* garis pinggir pink transparan */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  /* bayangan lebih halus */
    background: rgba(255, 105, 180, 0.3);       /* pink transparan */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
}

.card-body {
    text-align: center;

}

.card {
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}


footer{
    background-color: black;
    padding: 20px
}

footer a{
    text-decoration: none;
    color: deeppink;
    font-size: 15pt;
    padding-bottom: 20px;
    transition: color 0.3s ease, transform 0.3s ease;
}

footer h1{
    color: White;
    font-size: 25px;
    padding-top: 10px;
    text-decoration: underline;
}

.scroll-wrapper {
    position: relative;
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px;
    scrollbar-width: none; /* untuk Firefox */
    -ms-overflow-style: none;  /* untuk IE/Edge lama */
    border-radius: 25px;

}

footer a:hover {
    color: #ff69b4; /* Warna teks berubah menjadi pink cerah saat hover */
    transform: translateY(-5px); /* Efek gerakan ringan saat hover untuk kesan dinamis */
}

/* --- MODERN IMAGE SCROLLER / GALLERY --- */

/* Wrapper utama untuk galeri, posisinya relatif untuk menampung gradien */
.scroll-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Sembunyikan semua yang keluar dari wrapper */
}

/* Container untuk gambar-gambar */
.scroll-container {
    display: flex; /* Membuat gambar berjajar horizontal */
    width: fit-content; /* Lebar container menyesuaikan total lebar gambar */
    white-space: nowrap; /* Mencegah gambar turun ke baris baru */

    /* Menerapkan animasi scroll yang kita buat di @keyframes */
    animation: infinite-scroll 30s linear infinite;
}

/* Berhentikan animasi saat kursor berada di atas galeri */
.scroll-wrapper:hover .scroll-container {
    animation-play-state: paused;
}

/* Styling untuk setiap gambar di dalam galeri */
.scroll-container img {
    height: 220px; /* Sedikit lebih tinggi untuk dampak visual */
    width: auto;   /* Lebar otomatis menyesuaikan tinggi */
    margin: 0;     /* Menghilangkan jarak antar gambar */
    transition: transform 0.3s ease; /* Transisi halus untuk hover */
}

/* Efek zoom kecil saat kursor diarahkan ke satu gambar */
.scroll-container img:hover {
    transform: scale(1.05);
    z-index: 10;
    position: relative;
}

/* Keyframes untuk animasi scroll tak terbatas (infinite) */
@keyframes infinite-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Geser ke kiri sejauh setengah dari total lebar container */
        transform: translateX(-50%);
    }
}

/* Gradien FADE di sisi KIRI */
.scroll-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px; /* Lebar gradien */
    height: 100%;
    background: linear-gradient(to right, deeppink, transparent);
    z-index: 2; /* Pastikan gradien di atas gambar */
    pointer-events: none; /* Agar gradien tidak bisa di-klik */
}

/* Gradien FADE di sisi KANAN (sebelumnya sudah ada, ini versi update) */
.scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px; /* Lebar gradien */
    height: 100%;
    background: linear-gradient(to left, deeppink, transparent);
    z-index: 2; /* Pastikan gradien di atas gambar */
    pointer-events: none; /* Agar gradien tidak bisa di-klik */
}

/* --- ANIMASI UNTUK GAMBAR LELE DI SEKSI DESKRIPSI --- */

/* 1. Keyframes untuk animasi MENGAMBANG (naik-turun) */
@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Jarak gambar naik */
    }
    100% {
        transform: translateY(0);
    }
}

/* 2. Keyframes untuk animasi MUNCUL (dari bawah ke atas + fade in) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.animated-lele {

    animation: fadeInUp 1.2s ease-out forwards,
    floatAnimation 5s ease-in-out 1.2s infinite;
}