/* Styling untuk container pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 16px; /* Ganti sesuai kebutuhan */
}

/* Styling untuk elemen pagination (ul) */
.pagination {
    display: inline-flex;
    padding: 0;
    list-style-type: none;
}

/* Styling untuk setiap item pagination (li) */
.pagination li {
    margin: 0; /* Menghapus margin default */
}

/* Styling untuk link pagination */
.pagination-link {
    padding: 8px 12px; /* Ukuran padding */
    font-size: 14px; /* Ukuran font */
    font-weight: 500; /* Berat font */
    color: #6b7280; /* Warna teks default */
    background-color: #fff; /* Warna latar belakang */
    border: 1px solid #d1d5db; /* Border */
    border-radius: 4px; /* Sudut melengkung */
    transition: background-color 0.3s, color 0.3s; /* Transisi */
    text-decoration: none; /* Menghilangkan garis bawah */
}

/* Warna saat hover di atas link */
.pagination-link:hover {
    background-color: #f3f4f6; /* Warna saat hover */
}

/* Warna untuk link yang aktif */
.pagination-link.active {
    color: #1e3a8a; /* Warna teks aktif */
    background-color: #bfdbfe; /* Warna latar belakang aktif */
    border-color: #60a5fa; /* Warna border aktif */
}

/* Styling khusus untuk tombol previous dan next */
.pagination-link.previous, .pagination-link.next {
    border-radius: 4px; /* Sudut melengkung pada tombol previous/next */
}

/* Styling untuk elemen disabled */
.pagination-link.disabled {
    color: #ccc; /* Warna untuk elemen non-aktif */
    pointer-events: none; /* Nonaktifkan klik */
}

/* Styling untuk ellipsis (tanda ...) */
.pagination-link.disabled {
    color: #999;
    cursor: not-allowed;
    background-color: #f3f4f6;
}

/* Media Query untuk layar lebih kecil dari 700px */
@media (max-width: 700px) {
    .pagination-link {
        padding: 5px 9px; /* Mengurangi padding */
        font-size: 11px; /* Mengurangi ukuran font */
    }
}