/* Font & Basic Settings */
body { font-family: 'Inter', sans-serif; }
.hide { display: none !important; }
.fade-in { animation: fadeIn 0.3s ease-in-out; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }

.logo-slider {
    height: 150px;       /* Tinggi area slider */
    margin: auto;
    overflow: hidden;    /* Menyembunyikan logo yang keluar dari kotak */
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background: white;   /* Pastikan background putih agar rapi */
}

/* Efek Blur/Pudar di Kiri dan Kanan (Opsional tapi Estetik) */
.logo-slider::before,
.logo-slider::after {
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 150px;
    position: absolute;
    width: 100px;        /* Lebar area pudar */
    z-index: 2;
}

.logo-slider::before {
    left: 0;
    top: 0;
}

.logo-slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

/* Jalur/Track Logo Berjalan */
.logo-slide-track {
    display: flex;
    /* RUMUS LEBAR: 250px x Total Jumlah Slide (termasuk duplikat) */
    /* Kita punya 3 logo x 3 set = 9 logo total. 250 * 9 = 2250px */
    width: calc(250px * 9); 
    animation: scroll 20s linear infinite; /* Angka 20s adalah kecepatan (makin kecil makin cepat) */
}

/* Kotak Pembungkus Tiap Logo */
.slide {
    height: 100px;
    width: 250px;        /* Lebar area per logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;     /* Jarak antar logo */
}

/* Styling Gambar Logo */
.slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Filter Grayscale: Logo jadi hitam putih (Hapus baris di bawah ini jika ingin berwarna terus) */
    filter: grayscale(100%); 
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Efek saat Logo Disorot Mouse */
.slide img:hover {
    filter: grayscale(0%); /* Kembali berwarna */
    opacity: 1;
    transform: scale(1.1); /* Sedikit membesar */
}

/* Keyframes Animasi Berjalan */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* RUMUS GERAK: -250px x Jumlah Logo Asli (Unik) */
        /* Kita punya 3 logo unik. Jadi 250 * 3 = 750px */
        transform: translateX(calc(-250px * 3)); 
    }
}