:root { --primary: #0f4c4d; --secondary: #f8931f; }
body { font-family: 'Josefin Sans', sans-serif; background: #fff; overflow-x: hidden; }
.library-section { padding: 40px 0; }

/* Desktop Style */
.swiper { width: 100%; padding: 20px 20px; /* Padding kiri kanan ditambahkan disini sebagai pengganti wrapper */ }

/* PENTING: Style untuk Slide/Kolom */
.swiper-slide { 
    width: auto; /* Agar lebar menyesuaikan konten (tidak full width) */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Jarak vertikal antar gambar dalam 1 kolom */
    margin-right: 10px; /* Jarak antar kolom (pengganti gap wrapper) */
}

/* Hapus margin kanan untuk slide terakhir agar rapi */
.swiper-slide:last-child { margin-right: 0; }

.library-item {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #eee;
    width: 200px; /* Lebar default kolom */
    display: block;
    cursor: zoom-in;
}

.h-full { height: 410px; }
.h-half { height: 200px; }
.w-large { width: 350px; } /* Lebar khusus kolom besar */

.library-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}

/* OVERLAY BARU (IKON) */
.library-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 76, 77, 0.6);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.3s ease; 
    color: #fff; z-index: 2;
}

.library-overlay i {
    font-size: 3rem;
    transform: scale(0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.library-item:hover .library-overlay { opacity: 1; }
.library-item:hover .library-overlay i { transform: scale(1); }
.library-item:hover img { transform: scale(1.1); }

.swiper-button-next, .swiper-button-prev {
    color: #fff !important; background: rgba(0,0,0,0.3);
    width: 40px; height: 80px; border-radius: 4px;
    top: 50%; transform: translateY(-50%);
}

/* --- RESPONSIVE STYLE --- */
@media (max-width: 991px) {
    /* Reset Layout untuk Mobile */
    .swiper { padding: 0 15px; }
    .swiper-wrapper { display: flex !important; flex-direction: column !important; gap: 15px; transform: none !important; }
    .swiper-slide { width: 100% !important; margin-right: 0 !important; }
    
    .library-item { width: 100% !important; }
    .h-full { height: 280px; }
    .h-half { height: 180px; }
    .w-large { width: 100% !important; }
    
    .swiper-button-next, .swiper-button-prev { display: none !important; }
}