:root {
    --brand-yellow: #FFC800;
    --brand-blue: #4C5FD5;
    --brand-blue-light: #7C93F4;
    --brand-blue-dark: #333F9E;
    --brand-navy: #1E2540;
    --brand-light: #F5F6FC;
}
body { font-family: 'Inter', sans-serif; color: #2b2b2b; }
h1, h2, h3, h4, h5, .navbar-brand strong { font-family: 'Poppins', sans-serif; }

.brand-badge {
    width: 46px; height: 46px; border-radius: 10px; padding: 6px;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08);
    display: flex; align-items: center; justify-content: center;
}
.brand-badge img { width: 100%; height: 100%; }

.navbar .nav-link { font-weight: 500; color: #2b2b2b; }
.navbar .nav-link:hover { color: var(--brand-blue); }

.announcement-bar { background: var(--brand-navy); color: #fff; }

.footer-link { color: rgba(255,255,255,.65); text-decoration: none; }
.footer-link:hover { color: #fff; }

/* Hero */
.hero-slide {
    position: relative; min-height: 520px; display: flex; align-items: center;
    background-size: cover; background-position: center;
}
.hero-slide::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(30,37,64,.90) 0%, rgba(76,95,213,.65) 55%, rgba(76,95,213,.30) 100%);
}
.hero-slide .hero-content { position: relative; z-index: 2; color: #fff; max-width: 640px; }

/* Cards */
.card-soft { border: none; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; }
.card-soft:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.10); }

.quick-access-card {
    border-radius: 14px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.06);
    padding: 1.75rem 1rem; text-align: center; text-decoration: none; color: #2b2b2b;
    transition: all .2s ease; display: block;
}
.quick-access-card:hover { background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue)); color: #fff; transform: translateY(-4px); }
.quick-access-card i { font-size: 1.75rem; margin-bottom: .5rem; color: var(--brand-blue); }
.quick-access-card:hover i { color: #fff; }

.stat-card { text-align: center; padding: 1.5rem; }
.stat-card .stat-value { font-size: 2.25rem; font-weight: 800; color: var(--brand-blue); font-family: 'Poppins', sans-serif; }

.section-title { font-weight: 700; color: var(--brand-navy); }
.section-title span { color: var(--brand-blue); }

.badge-level-internasional { background: #8b1e3f; }
.badge-level-nasional { background: var(--brand-blue); }
.badge-level-regional { background: var(--brand-yellow); color: #4a3900; }
.badge-level-universitas { background: #555; }

.btn-brand { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.btn-brand:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }

.cta-pmb { background: linear-gradient(135deg, var(--brand-blue-light), var(--brand-blue) 55%, var(--brand-navy)); color: #fff; border-radius: 18px; }

/* --- Reskin Bootstrap's built-in "success" utilities to the new blue/yellow brand,
       since the CDN bootstrap.min.css ships pre-compiled green success colors. --- */
.btn-success { background-color: var(--brand-blue); border-color: var(--brand-blue); }
.btn-success:hover, .btn-success:focus { background-color: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.btn-outline-success { color: var(--brand-blue); border-color: var(--brand-blue); }
.btn-outline-success:hover { background-color: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.text-success { color: var(--brand-blue) !important; }
.bg-success { background-color: var(--brand-blue) !important; }
.bg-success-subtle { background-color: #EAEDFB !important; }
.text-bg-success { background-color: var(--brand-blue) !important; color: #fff !important; }
.border-success { border-color: var(--brand-blue) !important; }
.form-check-input:checked { background-color: var(--brand-blue); border-color: var(--brand-blue); }
.page-link { color: var(--brand-blue); }
.page-item.active .page-link { background-color: var(--brand-blue); border-color: var(--brand-blue); }
.accordion-button:not(.collapsed) { color: var(--brand-blue-dark); background-color: #EAEDFB; }
.accordion-button:focus { border-color: var(--brand-blue-light); box-shadow: 0 0 0 .25rem rgba(76,95,213,.25); }