/* =========================================================
   WARNA & GRADIENT UTAMA
========================================================= */
.navbar-gradient {
    background: linear-gradient(160deg,#812982,#4c1864);
}

/* =========================================================
   HERO STATIS – HOME
========================================================= */
.hero-static {
    margin-top: 5px; /* offset navbar fixed */
}
.hero-static-bg {
    height: auto;                 /* ikut tinggi gambar */
    min-height: 420px;             /* batas aman */
    background-size: contain;      /* tampilkan gambar UTUH */
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    
}

.hero-content {
    position: relative;
    max-width: 560px;
}

@media (max-width: 576px) {
    .hero-static-bg {
        height: 300px;
    }
}

/* =========================================================
   HERO TEXT
========================================================= */

/* H1: GRADIENT */
.hero-content h1 {
    background: linear-gradient(160deg,#812982,#4c1864);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

/* P: HITAM */
.hero-content p {
    color: #000 !important;
    opacity: .9;
}




/* =========================================================
   CARD PRESTASI (UMUM)
========================================================= */
.card {
    border-radius: 0.375rem;
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
}


/* =========================================================
   ISI CARD
========================================================= */
.card-body {
    padding: 1rem;
}

.card-title {
    font-size: 1rem;
    min-height: 48px;
}

.card p {
    font-size: 0.9rem;
    margin-bottom: .25rem;
}

/* =========================================================
   BADGE TINGKAT
========================================================= */
.badge-tingkat {
    font-size: 0.7rem;
    padding: 6px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}

/* Lokal / Wilayah */
.badge-lokalwilayah {
    background: #e9ecef;
    color: #495057;
}

/* Nasional */
.badge-nasional {
    background: #0d6efd;
    color: #fff;
}

/* Internasional */
.badge-internasional {
    background: #812982;
    color: #fff;
}

/* =========================================================
   STATISTIK CARD
========================================================= */
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px 16px;
}

.stat-card h2 {
    color: #812982;
    font-size: 2rem;
}

.stat-card p {
    font-size: 0.9rem;
    color: #555;
}

/* =========================================================
   FOOTER
========================================================= */
.footer-public {
    background: linear-gradient(160deg,#812982,#4c1864);
}

.footer-public h5 {
    font-size: 1.1rem;
}

.footer-public p {
    opacity: 0.9;
}

/* =========================================================
   TABLE
========================================================= */
.table th {
    background: #f8f9fa;
    width: 200px;
}

/* =========================================================
   PAGINATION
========================================================= */
/* =========================================================
   PAGINATION (BOOTSTRAP CUSTOM)
========================================================= */

.pagination {
    --bs-pagination-color: #812982;
    --bs-pagination-hover-color: #ffffff;
    --bs-pagination-hover-bg: #6f2470;
    --bs-pagination-hover-border-color: #6f2470;

    --bs-pagination-active-color: #ffffff;
    --bs-pagination-active-bg: #812982;
    --bs-pagination-active-border-color: #812982;

    --bs-pagination-disabled-color: #b7a0bf;
}

/* Link normal */
.pagination .page-link {
    color: #812982;
    background-color: #ffffff;
    border: 1px solid #e0d4e6;
    font-weight: 500;
}

/* Hover */
.pagination .page-link:hover {
    color: #ffffff;
    background-color: #6f2470;
    border-color: #6f2470;
}

/* Active */
.pagination .page-item.active .page-link {
    color: #ffffff;
    background-color: #812982;
    border-color: #812982;
    font-weight: 600;
}

/* Disabled */
.pagination .page-item.disabled .page-link {
    color: #b7a0bf;
    background-color: #f8f5fa;
    border-color: #e0d4e6;
}

/* Fokus (aksesibilitas) */
.pagination .page-link:focus {
    box-shadow: 0 0 0 0.15rem rgba(129, 41, 130, 0.25);
}


/* =========================================================
   RESPONSIVE (MOBILE)
========================================================= */
@media (max-width: 576px) {
    .card-title,
    .fw-bold {
        font-size: .95rem;
    }

    .card p {
        font-size: .85rem;
    }
}

/* =========================================================
   THUMBNAIL PRESTASI – FIX SERAGAM 147px (FINAL)
========================================================= */
.card-img-top {
    width: 100% !important;
    height: 147px !important;   /* KUNCI KERAS */
    max-height: 147px !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block;
    overflow: hidden;           /* POTONG KELEBIHAN */
    background: #e9ecef;
}