/* Styling Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    /* Pusatkan pagination secara horizontal */
    margin-top: auto;
    /* Dorong pagination ke bagian bawah container flex */
    padding: 20px 0;
}

.pagination {
    list-style: none;
    /* Hapus bullet point default */
    padding: 0;
    margin: 0;
    display: flex;
    /* Buat item-item sejajar */
    flex-wrap: wrap;
    /* Izinkan item untuk wrap ke baris berikutnya jika layar kecil */
    gap: 8px;
    /* Jarak antar item pagination */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 10px;
}

.page-item {
    display: flex;
    /* Untuk memastikan link mengisi item */
}

.page-link {
    display: block;
    /* Buat link mengisi seluruh area item */
    padding: 5px;
    /* Padding di dalam tombol */
    text-decoration: none;
    /* Hapus garis bawah link */
    color: #3498db;
    /* Warna teks link */
    border: 1px solid #e0e0e0;
    /* Border tipis */
    border-radius: 8px;
    /* Sudut membulat */
    background-color: #f9f9f9;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    min-width: 40px;
    /* Lebar minimum untuk tombol */
    text-align: center;
}

/* Efek Hover */
.page-link:hover:not(.disabled .page-link) {
    /* Hindari hover pada link yang disabled */
    background-color: #eaf5ff;
    border-color: #aed6f1;
    color: #217dbb;
}

/* Status Aktif (Halaman Saat Ini) */
.page-item.active .page-link {
    background-color: #3498db;
    /* Warna latar belakang aktif */
    color: white;
    /* Warna teks aktif */
    border-color: #3498db;
    /* Warna border aktif */
    cursor: default;
    /* Kursor default, tidak bisa diklik ulang */
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
    /* Sedikit bayangan untuk menonjol */
}

/* Status Disabled (Previous/Next di ujung) */
.page-item.disabled .page-link {
    background-color: #ececec;
    /* Warna latar belakang disabled */
    color: #b0b0b0;
    /* Warna teks disabled */
    border-color: #e0e0e0;
    cursor: not-allowed;
    /* Kursor 'tidak diizinkan' */
    pointer-events: none;
    /* Mencegah event klik */
}

.page-item.disabled span {
    display: none;
}

/* Responsifitas untuk layar kecil */
@media (max-width: 600px) {
    .pagination {
        padding: 8px;
        gap: 6px;
    }

    .page-link {
        padding: 8px 12px;
        font-size: 0.9em;
        min-width: 35px;
    }
}