<style>
.perpus-wrapper { 
    padding: 20px; 
    max-width: 100%; /* Mengikuti lebar kontainer tema */
    margin: 0 auto; 
}

.perpus-grid {
    display: grid;
    /* auto-fit: memaksa kolom melebar mengisi sisa ruang kosong */
    /* 160px: ukuran minimal agar di HP bisa muat 2 kolom */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap: 20px;
    width: 100%;
}

/* Penyesuaian khusus untuk layar sangat kecil (HP Jadul) */
@media (max-width: 380px) {
    .perpus-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
    }
}

.book-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .25s ease;
}

.book-cover { 
    aspect-ratio: 3/4; 
    position: relative;
    background: #eaeaea;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay hanya untuk Desktop */
@media (hover: hover) {
    .book-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
        opacity: 0;
        display: flex;
        align-items: flex-end;
        padding: 15px;
        transition: opacity .25s ease;
    }
    .book-card:hover .book-overlay { opacity: 1; }
    .book-card:hover { transform: translateY(-5px); }
}

.book-info { padding: 12px; flex-grow: 1; }

.book-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    height: 2.6em; /* Maksimal 2 baris */
    overflow: hidden;
    color: #1f2937;
    margin-bottom: 4px;
}

.book-meta {
    font-size: 10px;
    color: #6b7280;
}

.mobile-action { padding: 0 10px 15px; }

.btn-read, .btn-login {
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* Form Pencarian & Filter – Dibuat STICKY */
.baca-filter-wrapper {
    background: #ffffff; /* Ubah ke putih solid agar tidak transparan saat menumpuk */
    padding: 15px 25px;
    border-radius: 15px;
    margin-bottom: 40px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: center;

    /* Logic Sticky */
    position: -webkit-sticky; /* Dukungan Safari */
    position: sticky;
    top: 20px; /* Jarak dari batas atas layar saat scroll */
    z-index: 999; /* Agar berada di atas tumpukan cover buku */
    border: 1px solid #e2e8f0;
}

/* Tambahan: Pastikan input tidak terlalu besar saat sticky di mobile */
@media (max-width: 480px) {
    .baca-filter-wrapper {
        top: 10px;
        padding: 15px;
    }
}





















.btn-read { background: #2563eb; color: #fff; }
.btn-login { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
</style><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9be3b72a39ec8104',t:'MTc2ODQ2MjcyNg=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>