/* ============================================
   BASE COLORS
   ============================================ */
:root {
    --neo-base: #de9600;           /* normal background */
    --neo-text: #212529;           /* normal font */
    --neo-hover-bg: #e6b53f;       /* hover background */
    --neo-hover-text: #212529;     /* hover font */
    --neo-active-bg: #212529;      /* active background */
    --neo-active-text: #fff;       /* active font */

    --neo-shadow-dark: rgba(33, 37, 41, 0.18);
    --neo-shadow-light: rgba(255, 255, 255, 0.12);
}

/* ============================================
   PAGINATION WRAPPER
   ============================================ */
.pagination {
    display: flex;
    flex-wrap: wrap; /* responsive */
    align-items: center;
    gap: 6px;
}

/* ============================================
   PAGE INFO ("Halaman")
   ============================================ */
.page-info {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 12px;
    min-height: 40px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--neo-text);

    background: var(--neo-base);
    border-radius: 8px;
    user-select: none;

    box-shadow:
        1px 1px 3px var(--neo-shadow-dark),
        -1px -1px 3px var(--neo-shadow-light);
}

/* ============================================
   PAGE ITEM
   ============================================ */
.page-item {
    display: flex;
    transition: 0.2s ease;
}

/* ============================================
   PAGE LINK
   ============================================ */
.page-link {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px 12px;
    min-height: 40px;
    min-width: 40px;
    font-weight: 500;
    font-size: 0.92rem;

    color: var(--neo-text);
    background: var(--neo-base);
    border: none;
    border-radius: 8px;

    box-shadow:
        1px 1px 3px var(--neo-shadow-dark),
        -1px -1px 3px var(--neo-shadow-light);

    transition: 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* ============================================
   HOVER
   ============================================ */
.page-link:hover {
    background: var(--neo-hover-bg);
    color: var(--neo-hover-text);

    box-shadow:
        1.5px 1.5px 4px var(--neo-shadow-dark),
        -1.5px -1.5px 4px var(--neo-shadow-light);
}

/* ============================================
   ACTIVE
   ============================================ */
.page-item.active .page-link {
    color: var(--neo-active-text);
    background: var(--neo-active-bg);

    box-shadow:
        inset 1px 1px 3px rgba(33, 37, 41, 0.28),
        inset -1px -1px 3px rgba(255, 255, 255, 0.1);
}

/* ============================================
   DISABLED
   ============================================ */
.page-item.disabled .page-link {
    opacity: 0.35;
    pointer-events: none;

    box-shadow:
        inset 1px 1px 2px var(--neo-shadow-dark),
        inset -1px -1px 2px var(--neo-shadow-light);
}

/* ============================================
   FOCUS
   ============================================ */
.page-link:focus {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(33, 37, 41, 0.18),
        1px 1px 3px var(--neo-shadow-dark),
        -1px -1px 3px var(--neo-shadow-light);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .page-link,
    .page-info {
        padding: 6px 10px;
        font-size: 0.85rem;
        min-width: 32px;
        min-height: 36px;
    }

    .pagination {
        gap: 4px;
    }
}