/*
|--------------------------------------------------------------------------
| STYLING KHUSUS UNTUK HALAMAN KATEGORI (buku-karakter.html)
|--------------------------------------------------------------------------
| Tujuan: 
| 1. Mengatur padding atas section Koleksi (Judul) menjadi 30px (Nyaman).
| 2. Menerapkan horizontal scroll untuk barisan buku.
| 3. FIXED: COVER BUKU FULL DAN MERATA (Menggunakan object-fit: cover) 
|    dan MENGHILANGKAN SPACE PUTIH.
|--------------------------------------------------------------------------
*/

/* 1. PENYESUAIAN POSISI JUDUL */
/* Padding atas 30px untuk memberikan jarak yang nyaman antara navbar (fixed-top) dan judul utama. */
#koleksi-buku-karakter {
    padding-top: 30px !important; 
    padding-bottom: 5rem;
}

/* 2. IMPLEMENTASI HORIZONTAL SCROLL */

/* Container Utama Horizontal Scroll */
.horizontal-scroll-row {
    overflow-x: scroll; /* Mengaktifkan scroll horizontal */
    overflow-y: hidden;
    white-space: nowrap; /* Mencegah item turun ke baris baru */
    padding-bottom: 20px; /* Ruang untuk scrollbar di bagian bawah */
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch; /* Meningkatkan performa scroll di iOS */
}

/* Kustomisasi Scrollbar (Chrome, Safari, Edge) */
.horizontal-scroll-row::-webkit-scrollbar {
    height: 8px; /* Tinggi scrollbar */
}

.horizontal-scroll-row::-webkit-scrollbar-thumb {
    background: #bbb; /* Warna thumb scrollbar */
    border-radius: 4px;
}

/* Item Buku di dalam Scroll */
.horizontal-scroll-row .col {
    display: inline-block; /* Membuat item berbaris horizontal */
    float: none;
    width: 250px; /* Lebar tetap untuk setiap kartu buku (Ideal untuk desktop) */
    margin-right: 15px; /* Jarak antar kartu */
    padding: 0; /* Menghilangkan padding horizontal bawaan Bootstrap */
}

/* Memastikan item terakhir tidak memiliki margin kanan */
.horizontal-scroll-row .col:last-child {
    margin-right: 0;
}

/* Styling Card Buku */
.buku-item {
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    border-radius: 12px;
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    white-space: normal; /* Mengaktifkan wrap teks di dalam card */
}

.buku-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* 3. STYLING COVER BUKU: FULL DAN MERATA */
.buku-item .img-cover {
    height: 350px; /* NILAI DITINGKATKAN untuk mengurangi pemotongan vertikal */
    /* KUNCI PERBAIKAN: Menggunakan 'cover' agar gambar mengisi seluruh area 
       dan menghilangkan space putih. */
    object-fit: cover; 
    object-position: top; /* Posisikan bagian atas cover */
    width: 100%;
    /* PENTING: Menghilangkan padding agar gambar benar-benar menyentuh tepi. */
    padding: 0; 
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.buku-item .card-body {
    text-align: center;
    padding: 15px;
}


/* Responsive: Mengatur lebar kartu agar lebih kecil di mobile */
@media (max-width: 575.98px) {
    
    #koleksi-buku-karakter {
        padding-top: 30px !important; 
    }
    
    .horizontal-scroll-row .col {
        width: 180px; /* Ukuran lebih kecil untuk layar ponsel */
    }
    
    .buku-item .img-cover {
        height: 280px; /* DITINGKATKAN untuk mobile */
        padding: 0;
    }
}