/*
Theme Name: Dosen IKIP Siliwangi
Theme URI: https://dosen.ikipsiliwangi.ac.id
Description: Portal dosen IKIP Siliwangi. Bootstrap 5, data dari ACF.
Version: 2.0.0
Author: Bagian IT IKIP Siliwangi
Author URI: https://ikipsiliwangi.ac.id
*/

/* ============================================================
   0. Font Caladea (dipasang lokal)
   ============================================================ */
@font-face {
    font-family: 'Caladea';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/caladea-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Caladea';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/caladea-400i.woff2') format('woff2');
}
@font-face {
    font-family: 'Caladea';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/caladea-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Caladea';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/caladea-700i.woff2') format('woff2');
}

/* ============================================================
   1. Skala warna - satu keluarga dari #996600
   ============================================================ */
:root {
    --brand-50:  #fbf6ec;
    --brand-100: #f5e9d2;
    --brand-200: #e8d0a0;
    --brand-300: #d9b368;
    --brand-400: #c08f1f;
    --brand-500: #996600;
    --brand-600: #855800;
    --brand-700: #6b4700;
    --brand-800: #513600;
    --brand-900: #3a2700;
    --brand-950: #241800;

    /* Bootstrap dipetakan ke keluarga warna di atas */
    --bs-primary: var(--brand-500);
    --bs-primary-rgb: 153, 102, 0;
    --bs-link-color: var(--brand-600);
    --bs-link-color-rgb: 133, 88, 0;
    --bs-link-hover-color: var(--brand-800);
    --bs-border-color: var(--brand-100);
    --bs-body-color: #33291a;
    --bs-body-font-family: 'Caladea', Cambria, Georgia, 'Times New Roman', serif;
    --bs-border-radius: .625rem;
    --bs-border-radius-lg: .875rem;
    --bs-focus-ring-color: rgba(153, 102, 0, .3);
}

body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.navbar-brand-text, .btn {
    font-family: 'Caladea', Cambria, Georgia, 'Times New Roman', serif;
}

body {
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    background: var(--brand-900);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: .5rem;
}

/* ============================================================
   2. Komponen Bootstrap yang dicat ulang
   ============================================================ */
.btn-brand {
    --bs-btn-bg: var(--brand-500);
    --bs-btn-border-color: var(--brand-500);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-focus-shadow-rgb: 153, 102, 0;
    font-weight: 500;
}

.btn-brand-outline {
    --bs-btn-color: var(--brand-100);
    --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: var(--brand-800);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-color: var(--brand-900);
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
    font-weight: 500;
}

.btn-brand-soft {
    --bs-btn-bg: var(--brand-50);
    --bs-btn-border-color: var(--brand-200);
    --bs-btn-color: var(--brand-700);
    --bs-btn-hover-bg: var(--brand-500);
    --bs-btn-hover-border-color: var(--brand-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 153, 102, 0;
    font-weight: 500;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-300);
    box-shadow: 0 0 0 .25rem rgba(153, 102, 0, .18);
}

.text-brand { color: var(--brand-600) !important; }
.bg-brand-50 { background-color: var(--brand-50) !important; }

.page-link {
    --bs-pagination-color: var(--brand-700);
    --bs-pagination-hover-color: var(--brand-900);
    --bs-pagination-hover-bg: var(--brand-50);
    --bs-pagination-focus-color: var(--brand-900);
    --bs-pagination-focus-bg: var(--brand-50);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(153, 102, 0, .2);
    --bs-pagination-active-bg: var(--brand-500);
    --bs-pagination-active-border-color: var(--brand-500);
}

/* ============================================================
   3. Navbar
   ============================================================ */
.site-navbar {
    background: var(--brand-800);
    padding-block: .625rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 2px 12px rgba(58, 39, 0, .18);
}

.navbar-brand-text {
    color: #fff;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: .01em;
}

.navbar-logo { object-fit: contain; }

.site-navbar .nav-link {
    color: var(--brand-100);
    font-weight: 500;
    padding-inline: .875rem;
    border-radius: .5rem;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.site-navbar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
    padding: .375rem .625rem;
}

.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25); }

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
    .site-navbar .navbar-collapse {
        margin-top: .75rem;
        padding-top: .75rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }
    .site-navbar .nav-link { padding-block: .625rem; }
    .site-navbar .btn { width: 100%; margin-top: .5rem; }
}

/* ============================================================
   4. Hero
   ============================================================ */
.hero {
    background:
        radial-gradient(1200px 400px at 50% -120px, var(--brand-600), transparent 70%),
        linear-gradient(160deg, var(--brand-700) 0%, var(--brand-900) 100%);
    color: #fff;
    padding-block: clamp(3rem, 9vw, 6rem);
    text-align: center;
}

.hero-logo {
    width: clamp(64px, 12vw, 92px);
    height: auto;
    margin-bottom: 1.25rem;
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 700;
    margin-bottom: .5rem;
    line-height: 1.15;
}

.hero-lead {
    font-size: clamp(1rem, 2.4vw, 1.1875rem);
    color: var(--brand-100);
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: 2rem;
}

/* Kotak pencarian di hero */
.hero-search .form-control {
    border: 0;
    padding-block: .8125rem;
    font-size: 1rem;
}

.hero-search .form-control:focus { box-shadow: none; }

.hero-search .input-group {
    box-shadow: 0 8px 28px rgba(36, 24, 0, .3);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

.hero-search { max-width: 34rem; }

/* ============================================================
   5. Statistik - menyatu di dalam hero
   ============================================================ */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    max-width: 46rem;
    margin: 2.5rem auto 0;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

@media (min-width: 576px) {
    .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

.hero-stat {
    background: rgba(0, 0, 0, .18);
    padding: 1.125rem .75rem;
    text-align: center;
}

.hero-stat-number {
    display: block;
    font-size: clamp(1.375rem, 4vw, 1.875rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}

.hero-stat-label {
    display: block;
    font-size: .8125rem;
    color: var(--brand-200);
    margin-top: .125rem;
}

/* Pita berlatar krem untuk memecah halaman */
.band-brand {
    background: var(--brand-50);
    border-block: 1px solid var(--brand-100);
}

/* Kepala bagian dengan tombol di kanan */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

/* Kartu layanan */
.layanan-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--brand-100);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.layanan-card:hover,
.layanan-card:focus-visible {
    border-color: var(--brand-300);
    box-shadow: 0 10px 28px rgba(153, 102, 0, .14);
    transform: translateY(-3px);
    color: inherit;
}

.layanan-judul {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--brand-900);
    margin-bottom: .375rem;
}

.layanan-ket {
    font-size: .9375rem;
    color: #6f6250;
    flex-grow: 1;
    margin-bottom: .875rem;
}

/* Kartu berita */
.berita-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--brand-100);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.berita-isi {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.25rem 1.5rem 1.5rem;
}

.berita-judul { flex-grow: 1; }

/* Gambar sampul */
.berita-sampul {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brand-50);
    border-bottom: 1px solid var(--brand-100);
}

.berita-sampul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.berita-card:hover .berita-sampul img { transform: scale(1.04); }

/* Kartu tanpa sampul tetap punya jarak dalam */
.berita-card > .berita-tanggal { padding: 1.5rem 1.5rem 0; }
.berita-card > .berita-judul,
.berita-card > .fakultas-cta { padding-inline: 1.5rem; }
.berita-card > .fakultas-cta { padding-bottom: 1.5rem; }

.berita-card:hover {
    border-color: var(--brand-300);
    box-shadow: 0 10px 28px rgba(153, 102, 0, .14);
    transform: translateY(-3px);
}

.berita-tanggal {
    font-size: .8125rem;
    color: var(--brand-600);
    font-weight: 500;
    margin-bottom: .5rem;
}

.tulisan-penulis a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.tulisan-penulis a:hover { color: var(--brand-500); }

.berita-judul {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: .875rem;
}

.berita-judul a {
    color: var(--brand-900);
    text-decoration: none;
}

.berita-card:hover .berita-judul a { color: var(--brand-600); }

/* ============================================================
   6. Kartu fakultas & program studi
   ============================================================ */
.section-heading {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--brand-800);
}

.section-sub {
    color: var(--brand-700);
    opacity: .75;
    font-size: .9375rem;
}

.fakultas-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--brand-100);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.75rem 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.fakultas-card:hover,
.fakultas-card:focus-visible {
    border-color: var(--brand-300);
    box-shadow: 0 10px 28px rgba(153, 102, 0, .14);
    transform: translateY(-3px);
    color: inherit;
}

.fakultas-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    color: var(--brand-600);
    margin-bottom: 1rem;
}

.fakultas-card:hover .fakultas-icon {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

.fakultas-count {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-500);
    line-height: 1;
}

.fakultas-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-900);
    margin: .625rem 0 1rem;
    flex-grow: 1;
}

.fakultas-cta {
    font-size: .875rem;
    font-weight: 600;
    color: var(--brand-600);
}

.prodi-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    background: #fff;
    border: 1px solid var(--brand-100);
    border-radius: var(--bs-border-radius);
    padding: 1rem 1.125rem;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease, border-color .2s ease;
}

.prodi-card:hover,
.prodi-card:focus-visible {
    background: var(--brand-50);
    border-color: var(--brand-300);
    color: inherit;
}

.prodi-count {
    flex: 0 0 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    background: var(--brand-500);
    color: #fff;
    border-radius: .5rem;
    font-weight: 700;
    font-size: 1.125rem;
}

.prodi-name {
    flex-grow: 1;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--brand-900);
    line-height: 1.35;
}

.prodi-arrow {
    color: var(--brand-400);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.prodi-card:hover .prodi-arrow { color: var(--brand-600); }

/* ============================================================
   7. Kartu dosen
   ============================================================ */
.dosen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background: #fff;
    border: 1px solid var(--brand-100);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem 1.125rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dosen-card:hover,
.dosen-card:focus-visible {
    border-color: var(--brand-300);
    box-shadow: 0 10px 28px rgba(153, 102, 0, .14);
    transform: translateY(-3px);
    color: inherit;
}

.dosen-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-100);
    border: 3px solid var(--brand-100);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.dosen-avatar--initial {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .02em;
    border-color: var(--brand-200);
}

.dosen-avatar--lg {
    width: 150px;
    height: 150px;
}

.dosen-avatar--lg.dosen-avatar--initial { font-size: 2.875rem; }

.dosen-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-900);
    line-height: 1.35;
    margin-bottom: .375rem;
}

.dosen-meta {
    font-size: .8125rem;
    color: #6f6250;
    line-height: 1.5;
    margin: 0;
}

.dosen-badge {
    display: inline-block;
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    color: var(--brand-700);
    font-size: .75rem;
    font-weight: 500;
    padding: .1875rem .625rem;
    border-radius: 999px;
    margin-top: .625rem;
}

/* ============================================================
   8. Panel filter
   ============================================================ */
.filter-panel {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--brand-500);
    color: #fff;
    border-radius: 999px;
    padding: .375rem .5rem .375rem .875rem;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
}

.filter-chip:hover { background: var(--brand-700); color: #fff; }

.filter-chip .chip-x {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    font-size: .875rem;
    line-height: 1;
}

/* ============================================================
   9. Profil dosen
   ============================================================ */
.profile-header {
    background: linear-gradient(160deg, var(--brand-700) 0%, var(--brand-900) 100%);
    color: #fff;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.profile-header .dosen-avatar {
    border-color: rgba(255, 255, 255, .35);
    background: var(--brand-600);
}

.profile-header h1 {
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
    font-weight: 700;
    margin-bottom: .375rem;
}

.profile-prodi {
    color: var(--brand-200);
    font-size: 1rem;
    margin: 0;
}

.info-card {
    background: #fff;
    border: 1px solid var(--brand-100);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    height: 100%;
}

.info-card-head {
    background: var(--brand-50);
    border-bottom: 1px solid var(--brand-100);
    padding: .875rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-800);
    margin: 0;
}

.info-card-body { padding: .5rem 1.25rem 1.25rem; }

.info-item {
    display: grid;
    grid-template-columns: minmax(0, 10rem) 1fr;
    gap: .25rem 1rem;
    padding-block: .75rem;
    border-bottom: 1px solid var(--brand-50);
}

.info-item:last-child { border-bottom: 0; }

.info-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--brand-700);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.info-value {
    color: #33291a;
    word-break: break-word;
}

.info-value a { color: var(--brand-600); }

@media (max-width: 575.98px) {
    .info-item { grid-template-columns: 1fr; }
}

/* Daftar karya tridharma */
.karya-jumlah {
    background: var(--brand-500);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    padding: .125rem .625rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.karya-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.karya-item {
    padding-block: .75rem;
    border-bottom: 1px solid var(--brand-50);
}

.karya-item:last-child { border-bottom: 0; }

.karya-judul {
    display: block;
    color: var(--brand-800);
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
}

.karya-judul:hover { color: var(--brand-500); text-decoration: underline; }

.karya-tanggal {
    display: block;
    font-size: .8125rem;
    color: #8a7a63;
    margin-top: .1875rem;
}

/* ============================================================
   10. Konten tulisan
   ============================================================ */
.entry-content {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.entry-content > * + * { margin-top: 1.125rem; }

.entry-content h2,
.entry-content h3 {
    color: var(--brand-800);
    font-weight: 600;
    margin-top: 2rem;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius);
}

.entry-content a { color: var(--brand-600); }

.entry-content blockquote {
    border-left: 4px solid var(--brand-300);
    background: var(--brand-50);
    padding: 1rem 1.25rem;
    border-radius: 0 .5rem .5rem 0;
    margin-inline: 0;
}

.entry-content table {
    width: 100%;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    border: 1px solid var(--brand-100);
    padding: .625rem .875rem;
}

.entry-content th { background: var(--brand-50); }

/* ============================================================
   11. Animasi masuk
   ============================================================ */

/* Elemen disembunyikan hanya bila JavaScript aktif, supaya tanpa JS
   konten tetap terbaca. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
}

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.2, .7, .3, 1),
                transform .6s cubic-bezier(.2, .7, .3, 1);
}

/* Anak-anak di dalam grid muncul berurutan */
.js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
}

.js [data-reveal-stagger].is-revealed > * {
    opacity: 1;
    transform: none;
    transition: opacity .5s cubic-bezier(.2, .7, .3, 1),
                transform .5s cubic-bezier(.2, .7, .3, 1);
}

.js [data-reveal-stagger].is-revealed > *:nth-child(1)  { transition-delay: .00s; }
.js [data-reveal-stagger].is-revealed > *:nth-child(2)  { transition-delay: .06s; }
.js [data-reveal-stagger].is-revealed > *:nth-child(3)  { transition-delay: .12s; }
.js [data-reveal-stagger].is-revealed > *:nth-child(4)  { transition-delay: .18s; }
.js [data-reveal-stagger].is-revealed > *:nth-child(5)  { transition-delay: .24s; }
.js [data-reveal-stagger].is-revealed > *:nth-child(6)  { transition-delay: .30s; }
.js [data-reveal-stagger].is-revealed > *:nth-child(7)  { transition-delay: .36s; }
.js [data-reveal-stagger].is-revealed > *:nth-child(8)  { transition-delay: .42s; }
.js [data-reveal-stagger].is-revealed > *:nth-child(n+9) { transition-delay: .48s; }

/* Hero tampil begitu halaman dimuat */
.js .hero-logo   { animation: dosenMasuk .7s cubic-bezier(.2,.7,.3,1) both; }
.js .hero h1     { animation: dosenMasuk .7s cubic-bezier(.2,.7,.3,1) .08s both; }
.js .hero-lead   { animation: dosenMasuk .7s cubic-bezier(.2,.7,.3,1) .16s both; }
.js .hero-search { animation: dosenMasuk .7s cubic-bezier(.2,.7,.3,1) .24s both; }
.js .hero-stats  { animation: dosenMasuk .7s cubic-bezier(.2,.7,.3,1) .32s both; }

@keyframes dosenMasuk {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* Hormati preferensi gerak minimal */
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .js [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .js .hero-logo, .js .hero h1, .js .hero-lead,
    .js .hero-search, .js .hero-stats {
        animation: none !important;
    }
    .dosen-card, .fakultas-card, .prodi-card,
    .layanan-card, .berita-card, .stat-card {
        transition: none !important;
    }
}

/* ============================================================
   12. Panel saran pencarian
   ============================================================ */
.saran-panel {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--brand-200);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 16px 40px rgba(36, 24, 0, .22);
    overflow: hidden;
    text-align: left;
}

.saran-butir {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--brand-50);
}

.saran-butir:last-child { border-bottom: 0; }

.saran-butir:hover,
.saran-butir.is-aktif {
    background: var(--brand-50);
    color: inherit;
}

.saran-foto {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--brand-100);
    flex-shrink: 0;
}

.saran-foto--inisial {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
}

.saran-teks {
    min-width: 0;
    line-height: 1.35;
}

.saran-nama {
    display: block;
    font-weight: 600;
    color: var(--brand-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saran-ket {
    display: block;
    font-size: .8125rem;
    color: #6f6250;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saran-kosong {
    margin: 0;
    padding: 1rem;
    font-size: .9375rem;
    color: #6f6250;
}

/* ============================================================
   13. Footer - keluarga warna yang sama
   ============================================================ */
.site-footer {
    /* Sama dengan navbar (--brand-800) agar header dan footer satu warna,
       dengan garis aksen #996600 di atasnya. */
    background: var(--brand-800);
    border-top: 4px solid var(--brand-500);
    color: var(--brand-100);
    margin-top: 4rem;
}

.site-footer h2,
.site-footer .footer-heading {
    color: #fff;
    font-weight: 600;
    margin-bottom: .875rem;
}

.footer-text {
    color: var(--brand-200);
    font-size: .9375rem;
    line-height: 1.7;
}

.footer-links li { margin-bottom: .5rem; }

.footer-links a {
    color: var(--brand-200);
    text-decoration: none;
    font-size: .9375rem;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: var(--brand-300);
}