:root {
    --primary: #0c2d57;
    --primary-soft: #1d5b86;
    --accent: #f0b43a;
    --text-dark: #0f172a;
    --text-soft: #5b6475;
    --white: #ffffff;
    --bg-page: #eef2f7;
    --border: rgba(214, 223, 236, 0.9);
    --shadow: 0 20px 45px rgba(10, 25, 48, 0.14);
    --radius-md: 18px;
    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: var(--text-dark);
    background: var(--bg-page);
}

img,
video {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: min(var(--container), calc(100% - 40px));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    background: rgba(9, 33, 68, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(4, 18, 38, 0.12);
}

.navbar {
    position: relative;
    width: min(1480px, calc(100% - 40px));
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 38px);
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    color: var(--white);
}

.brand-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-title {
    font-size: clamp(0.9rem, 1.15vw, 1rem);
    font-weight: 750;
    white-space: nowrap;
}

.brand-subtitle {
    margin-top: 3px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
}

.nav-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(18px, 2vw, 30px);
}

.nav-menu {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.25vw, 20px);
}

.nav-menu a,
.nav-parent-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(0.78rem, 0.82vw, 0.91rem);
    font-weight: 650;
    white-space: nowrap;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.25s ease;
}

.nav-menu a::after,
.nav-parent-trigger::after {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
    content: "";
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible,
.nav-menu a.is-active,
.nav-parent-trigger:hover,
.nav-parent-trigger:focus-visible,
.nav-parent-trigger.is-active,
.nav-dynamic-item.is-open > .nav-parent-trigger {
    color: #ffd77c;
}

.nav-menu a:hover::after,
.nav-menu a:focus-visible::after,
.nav-menu a.is-active::after,
.nav-parent-trigger:hover::after,
.nav-parent-trigger:focus-visible::after,
.nav-parent-trigger.is-active::after,
.nav-dynamic-item.is-open > .nav-parent-trigger::after {
    opacity: 1;
    transform: scaleX(1);
}

.nav-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}


.nav-search {
    position: relative;
}

.nav-search-toggle,
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.nav-search-toggle {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
}

.nav-search-toggle svg,
.nav-toggle svg {
    width: 22px;
    height: 22px;
}

.nav-search-toggle:hover,
.nav-search-toggle:focus-visible,
.nav-search-toggle[aria-expanded="true"] {
    border-color: rgba(240, 180, 58, 0.75);
    color: #ffd77c;
    background: rgba(240, 180, 58, 0.14);
    transform: translateY(-1px);
}

.nav-search-panel {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: min(430px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(207, 222, 241, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(4, 18, 38, 0.28);
    color: #10213a;
    transform-origin: top right;
    animation: navSearchOpen 0.2s ease both;
}

.nav-search-panel[hidden] {
    display: none;
}

.nav-search-panel::before {
    position: absolute;
    top: -7px;
    right: 17px;
    width: 14px;
    height: 14px;
    border-top: 1px solid rgba(207, 222, 241, 0.92);
    border-left: 1px solid rgba(207, 222, 241, 0.92);
    background: #ffffff;
    content: "";
    transform: rotate(45deg);
}

.nav-search-form label {
    display: block;
    margin-bottom: 10px;
    color: #10213a;
    font-size: 0.85rem;
    font-weight: 800;
}

.nav-search-field {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 6px 6px 6px 13px;
    border: 1px solid #cfdaea;
    border-radius: 13px;
    background: #f7f9fc;
}

.nav-search-field:focus-within {
    border-color: #2f6fa4;
    box-shadow: 0 0 0 4px rgba(47, 111, 164, 0.12);
}

.nav-search-field svg {
    width: 20px;
    height: 20px;
    color: #6b7b91;
}

.nav-search-field input {
    min-width: 0;
    height: 38px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #10213a;
    font: inherit;
    font-size: 0.9rem;
}

.nav-search-field input::placeholder {
    color: #8793a5;
}

.nav-search-field button {
    min-height: 38px;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    background: #0c2d57;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.nav-search-status {
    min-height: 20px;
    margin: 10px 2px 0;
    color: #68778c;
    font-size: 0.78rem;
    line-height: 1.45;
}

.site-search-highlight {
    border-radius: 7px;
    outline: 4px solid rgba(240, 180, 58, 0.35);
    outline-offset: 5px;
    animation: siteSearchPulse 1.7s ease;
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 13px;
}

@keyframes navSearchOpen {
    from {
        opacity: 0;
        transform: translateY(-7px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes siteSearchPulse {
    0%, 100% { outline-color: rgba(240, 180, 58, 0.15); }
    35% { outline-color: rgba(240, 180, 58, 0.72); }
}

.hero-showcase {
    position: relative;
    overflow: hidden;
    min-height: 88vh;
    padding: 72px 0 96px;
    isolation: isolate;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -3;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(6, 23, 48, 0.9) 0%, rgba(9, 34, 66, 0.78) 46%, rgba(9, 34, 66, 0.38) 100%),
        linear-gradient(180deg, rgba(5, 17, 35, 0.25) 0%, rgba(5, 17, 35, 0.66) 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
    gap: 36px;
    align-items: center;
}

.hero-grid.hero-grid-single {
    grid-template-columns: minmax(0, 860px);
}

.hero-content {
    color: var(--white);
    padding: 20px 0;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-chip-outline {
    background: rgba(240, 180, 58, 0.18);
    border-color: rgba(240, 180, 58, 0.34);
    color: #ffe3a8;
}

.hero-kicker {
    margin: 0 0 16px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #b7d7ff;
}

.hero-title {
    margin: 0;
    max-width: 760px;
    font-size: clamp(2.65rem, 6vw, 5.3rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hero-description {
    max-width: 700px;
    margin: 24px 0 0;
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--accent);
    color: #1f2937;
    box-shadow: 0 14px 30px rgba(240, 180, 58, 0.32);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 42px;
}

.hero-point {
    padding: 18px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.hero-point strong {
    display: block;
    margin-bottom: 8px;
    font-size: 0.98rem;
    color: #ffffff;
}

.hero-point span {
    display: block;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.hero-carousel {
    padding: 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    color: var(--white);
}

.carousel-label {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b7d7ff;
}

.carousel-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.carousel-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    padding: 6px;
}

.carousel-track {
    position: relative;
    min-height: 520px;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(18px);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s ease;
}

.carousel-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.carousel-image-wrapper {
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px rgba(6, 20, 40, 0.22);
}

.carousel-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.carousel-content {
    margin-top: 18px;
    padding: 6px 2px 0;
    color: var(--white);
}

.carousel-tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(240, 180, 58, 0.18);
    color: #ffe3a8;
    font-size: 0.82rem;
    font-weight: 700;
}

.carousel-content h3 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    line-height: 1.35;
}

.carousel-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.75;
}

.carousel-link {
    display: inline-flex;
    margin-top: 20px;
    color: #ffffff;
    font-weight: 700;
    padding-bottom: 4px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.42);
}

.carousel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
}

.carousel-indicators {
    display: flex;
    align-items: center;
    gap: 10px;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.34);
    transition: 0.25s ease;
}

.carousel-indicator.is-active {
    width: 34px;
    border-radius: 999px;
    background: var(--accent);
}

.carousel-controls {
    display: flex;
    gap: 10px;
}

.carousel-control {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.25s ease;
}

.carousel-control:hover,
.carousel-control:focus-visible {
    background: rgba(255, 255, 255, 0.24);
}




/* =========================================================
   Footer utama
   ========================================================= */
.site-footer {
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
    background:
        radial-gradient(circle at 12% 18%, rgba(44, 119, 190, 0.2), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(240, 180, 58, 0.14), transparent 24%),
        linear-gradient(135deg, #06172f 0%, #0a2b52 52%, #0c3764 100%);
}

.footer-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 92%);
}

.footer-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(150px, 0.72fr) minmax(160px, 0.8fr) minmax(210px, 0.9fr);
    gap: 42px;
    padding-top: 64px;
    padding-bottom: 56px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
}

.footer-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 50%;
    padding: 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-brand strong {
    font-size: 1.02rem;
}

.footer-brand small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.83rem;
}

.footer-summary {
    max-width: 500px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.75;
}

.footer-contact-list {
    display: grid;
    gap: 11px;
    margin-top: 24px;
}

.footer-contact-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.65;
}

.footer-contact-label {
    display: block;
    margin-bottom: 2px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
}

.footer-contact-list a,
.footer-column a,
.footer-socials a {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.footer-contact-list a:hover,
.footer-contact-list a:focus-visible,
.footer-column a:hover,
.footer-column a:focus-visible {
    color: #ffd477;
}

.footer-column,
.footer-connect-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3,
.footer-connect-column h3 {
    position: relative;
    margin: 0 0 22px;
    padding-bottom: 11px;
    color: #ffffff;
    font-size: 1rem;
}

.footer-column h3::after,
.footer-connect-column h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: #f0b43a;
}

.footer-column a {
    display: inline-flex;
    margin-bottom: 13px;
    line-height: 1.5;
}

.footer-column a:hover,
.footer-column a:focus-visible {
    transform: translateX(3px);
}

.footer-connect-column > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.7;
}

.footer-socials {
    display: grid;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    font-weight: 700;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.footer-social-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 20px rgba(1, 13, 30, 0.22);
}

.footer-social-icon svg {
    width: 23px;
    height: 23px;
}

.footer-social-icon-instagram {
    background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%);
}

.footer-social-icon-whatsapp {
    background: #25d366;
}

.footer-social-icon-youtube {
    background: #ff0000;
}

.footer-social-icon-tiktok {
    background: linear-gradient(135deg, #111111 55%, #00edf0 100%);
}

.footer-social-icon-twitter {
    background: #111111;
}

.footer-social-icon-facebook {
    background: #1877f2;
}

.footer-social-icon-linkedin {
    background: #0a66c2;
}

.footer-social-icon-email {
    color: #092b4e;
    background: #ffc247;
}

.footer-social-icon-website {
    background: #2876a8;
}

.footer-bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(2, 15, 33, 0.34);
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 72px;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.88rem;
    line-height: 1.6;
}

.floating-actions {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.floating-pmb,
.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    box-shadow: 0 14px 32px rgba(10, 35, 67, 0.22);
    transition:
        width 0.25s ease,
        margin 0.25s ease,
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.floating-pmb {
    min-height: 50px;
    gap: 9px;
    padding: 0 18px;
    border-color: rgba(240, 180, 58, 0.88);
    border-radius: 999px;
    color: #16243a;
    background: linear-gradient(135deg, #ffd66f, #f0b43a);
    font-size: 0.88rem;
    font-weight: 850;
    white-space: nowrap;
}

.floating-pmb svg {
    width: 22px;
    height: 22px;
}

.floating-pmb:hover,
.floating-pmb:focus-visible {
    background: linear-gradient(135deg, #ffe08b, #f4bd4c);
    box-shadow: 0 18px 38px rgba(10, 35, 67, 0.28);
    transform: translateY(-3px);
}

.back-to-top {
    width: 0;
    height: 50px;
    margin-left: -10px;
    overflow: hidden;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #1e6fc1, #0c2d57);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.88);
}

.back-to-top svg {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
}

.back-to-top.is-visible {
    width: 50px;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.back-to-top.is-visible:hover,
.back-to-top.is-visible:focus-visible {
    background: linear-gradient(135deg, #287dce, #123d6c);
    box-shadow: 0 18px 38px rgba(10, 35, 67, 0.3);
    transform: translateY(-3px) scale(1);
}

/* =========================================================
   Ringkasan profil program di halaman beranda
   ========================================================= */
.program-profile-section {
    position: relative;
    overflow: hidden;
    padding: 88px 0 74px;
    color: var(--white);
    background:
        linear-gradient(135deg, #071b38 0%, #0c2d57 43%, #144f7f 100%);
    isolation: isolate;
}

.program-profile-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 94%);
}

.program-profile-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.program-profile-orb-one {
    top: -180px;
    right: -90px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(240, 180, 58, 0.34) 0%, rgba(240, 180, 58, 0) 70%);
}

.program-profile-orb-two {
    bottom: -220px;
    left: -100px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(73, 153, 223, 0.32) 0%, rgba(73, 153, 223, 0) 72%);
}

.program-profile-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 38px;
    align-items: center;
}

.program-profile-copy {
    max-width: 680px;
}

.program-profile-kicker {
    margin: 0 0 14px;
    color: #ffd77c;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.program-profile-title {
    margin: 0;
    max-width: 760px;
    color: var(--white);
    font-size: clamp(2.35rem, 4.4vw, 4.5rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.program-profile-subtitle {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 20px 0 0;
    padding: 0 15px;
    border: 1px solid rgba(255, 215, 124, 0.3);
    border-radius: 999px;
    background: rgba(240, 180, 58, 0.12);
    color: #ffe3a8;
    font-size: 0.9rem;
    font-weight: 800;
}

.program-profile-text {
    max-width: 650px;
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.03rem;
    line-height: 1.8;
}

.program-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.program-profile-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.program-profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
}

.program-profile-coming-soon:disabled {
    cursor: default;
    opacity: 1;
}

.program-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--white);
    font-weight: 800;
    transition: color 0.25s ease, transform 0.25s ease;
}

.program-profile-link:hover,
.program-profile-link:focus-visible {
    color: #ffd77c;
    transform: translateX(3px);
}

.program-profile-visual {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 32px;
    box-shadow: 0 28px 70px rgba(2, 12, 28, 0.38);
}

.program-profile-media-carousel {
    position: relative;
    min-width: 0;
    min-height: 420px;
    align-self: stretch;
}

.program-profile-media-track {
    position: relative;
    height: 100%;
    min-height: inherit;
}

.program-profile-media-track .program-profile-visual {
    height: 100%;
    min-height: inherit;
    animation: program-media-reveal .32s ease both;
}

.program-profile-media-track .program-profile-visual[hidden] {
    display: none;
}

@keyframes program-media-reveal {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.program-profile-media-arrow {
    position: absolute;
    z-index: 10;
    top: 50%;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: #fff;
    background: rgba(7, 34, 66, .72);
    box-shadow: 0 10px 24px rgba(3, 25, 50, .24);
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
}

.program-profile-media-arrow:hover,
.program-profile-media-arrow:focus-visible {
    color: #0d2e56;
    background: #ffc64f;
}

.program-profile-media-arrow.is-prev { left: 18px; }
.program-profile-media-arrow.is-next { right: 18px; }

.program-profile-media-dots {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 16px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.program-profile-media-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 999px;
    background: rgba(255, 255, 255, .48);
    cursor: pointer;
    pointer-events: auto;
    transition: width .2s ease, background-color .2s ease;
}

.program-profile-media-dots button.is-active {
    width: 28px;
    border-color: #ffc64f;
    background: #ffc64f;
}

.program-profile-media-carousel:has(.program-profile-media-dots) .program-profile-caption {
    bottom: 48px;
}

.program-profile-primary-link {
    text-decoration: none;
}

.program-profile-visual.has-video {
    cursor: pointer;
}

.program-profile-play {
    position: absolute;
    z-index: 5;
    inset: 50% auto auto 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transform: translate(-50%, -50%);
    padding: 12px 17px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(8, 42, 79, .84);
    color: #fff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .25);
    backdrop-filter: blur(8px);
}

.program-profile-play span {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #ffc64f;
}

.program-profile-play:hover,
.program-profile-play:focus-visible {
    background: #0b3768;
    transform: translate(-50%, -50%) scale(1.04);
}

.program-profile-video-frame {
    position: absolute;
    z-index: 8;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.program-profile-image {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

.program-profile-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 19, 41, 0.02) 30%, rgba(5, 19, 41, 0.9) 100%),
        linear-gradient(90deg, rgba(5, 19, 41, 0.12), transparent 60%);
}

.program-profile-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #10294a;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(4, 16, 34, 0.2);
    backdrop-filter: blur(12px);
}

.program-profile-caption {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
}

.program-profile-caption span {
    display: block;
    margin-bottom: 8px;
    color: #ffd77c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.program-profile-caption strong {
    display: block;
    max-width: 430px;
    color: var(--white);
    font-size: 1.45rem;
    line-height: 1.35;
}

.program-profile-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
}

.program-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 104px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.065));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(14px);
}

.program-stat-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 72px;
    border-radius: 0 0 0 72px;
    background: rgba(240, 180, 58, 0.12);
}

.program-stat-label {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.program-stat-card strong {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--white);
    font-size: 1.08rem;
    line-height: 1.35;
}





/* =========================================================
   Fasilitas pendukung pembelajaran
   ========================================================= */
.facilities-section {
    position: relative;
    overflow: hidden;
    padding: 86px 0 76px;
    background:
        linear-gradient(180deg, #f8fbff 0%, #eef4fa 54%, #f7f9fc 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.facilities-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(12, 45, 87, 0.045) 1px, transparent 1px),
        linear-gradient(rgba(12, 45, 87, 0.045) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), transparent 94%);
}

.facilities-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.facilities-decoration-one {
    top: -210px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(29, 91, 134, 0.18) 0%, rgba(29, 91, 134, 0) 72%);
}

.facilities-decoration-two {
    bottom: -230px;
    left: -150px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(240, 180, 58, 0.16) 0%, rgba(240, 180, 58, 0) 72%);
}

.facilities-wrap {
    position: relative;
    z-index: 1;
}

.facilities-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    margin-bottom: 34px;
}

.facilities-heading-copy {
    max-width: none;
}

.facilities-kicker {
    margin: 0 0 12px;
    color: #5f7190;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.facilities-title {
    margin: 0;
    color: #10294a;
    font-size: clamp(2.15rem, 4vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.facilities-description {
    max-width: 720px;
    margin: 16px 0 0;
    color: #66758a;
    font-size: 1rem;
    line-height: 1.8;
}

.facilities-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: #0c2d57;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(12, 45, 87, 0.18);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.facilities-view-all:hover,
.facilities-view-all:focus-visible {
    transform: translateY(-2px);
    background: #174f82;
    box-shadow: 0 18px 34px rgba(12, 45, 87, 0.24);
}

.facilities-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(350px, 0.88fr);
    grid-template-rows: repeat(2, minmax(230px, 1fr));
    gap: 22px;
}

.facility-card {
    display: grid;
    grid-template-columns: minmax(160px, 0.88fr) minmax(0, 1.12fr);
    min-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(204, 216, 230, 0.94);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 40px rgba(16, 41, 74, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.facility-card:hover {
    transform: translateY(-5px);
    border-color: rgba(159, 183, 211, 0.95);
    box-shadow: 0 24px 48px rgba(16, 41, 74, 0.14);
}

.facility-card-featured {
    grid-row: 1 / 3;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(350px, 1.1fr) auto;
}

.facility-media {
    position: relative;
    display: block;
    min-height: 100%;
    overflow: hidden;
    background: #dce7f2;
}

.facility-image {
    width: 100%;
    height: 100%;
    min-height: 230px;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.facility-card-featured .facility-image {
    min-height: 350px;
}

.facility-image-1 {
    object-position: center 48%;
}

.facility-image-2 {
    object-position: center 50%;
}

.facility-image-3 {
    object-position: center 42%;
}

.facility-card:hover .facility-image {
    transform: scale(1.045);
}

.facility-media-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 26, 52, 0.02) 45%, rgba(6, 26, 52, 0.5) 100%);
    pointer-events: none;
}

.facility-number {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #0f2444;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 24px rgba(12, 25, 49, 0.12);
    backdrop-filter: blur(10px);
}

.facility-content {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.facility-card-featured .facility-content {
    padding: 28px;
}

.facility-label {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.facility-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.32;
}

.facility-card-featured .facility-title {
    font-size: clamp(1.7rem, 2.5vw, 2.3rem);
}

.facility-title a {
    color: #10294a;
    transition: color 0.25s ease;
}

.facility-title a:hover,
.facility-title a:focus-visible {
    color: #1d5b86;
}

.facility-text {
    display: -webkit-box;
    overflow: hidden;
    margin: 13px 0 0;
    color: #66758a;
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.facility-card-featured .facility-text {
    max-width: 720px;
    font-size: 1rem;
}

.facility-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    color: #0f4f86;
    font-size: 0.9rem;
    font-weight: 800;
    transition: color 0.25s ease, transform 0.25s ease;
}

.facility-link:hover,
.facility-link:focus-visible {
    color: #0c2d57;
    transform: translateX(3px);
}


/* =========================================================
   Publikasi, kompetensi, dan prospek kerja
   ========================================================= */
.outcomes-section {
    position: relative;
    overflow: hidden;
    padding: 84px 0 78px;
    background: linear-gradient(180deg, #f7f9fc 0%, #edf3f9 55%, #f8fbff 100%);
}

.outcomes-section::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(rgba(16, 41, 74, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 41, 74, 0.028) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 96%);
}

.outcomes-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(6px);
}

.outcomes-glow-one {
    top: -160px;
    right: -140px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(73, 153, 223, 0.18) 0%, rgba(73, 153, 223, 0) 72%);
}

.outcomes-glow-two {
    bottom: -180px;
    left: -120px;
    width: 430px;
    height: 430px;
    background: radial-gradient(circle, rgba(240, 180, 58, 0.15) 0%, rgba(240, 180, 58, 0) 72%);
}

.outcomes-wrap {
    position: relative;
    z-index: 1;
}

.outcomes-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0;
    margin-bottom: 34px;
}

.outcomes-heading-copy {
    max-width: none;
}

.outcomes-kicker {
    margin: 0 0 14px;
    color: #2b679c;
    font-size: 0.84rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.outcomes-title {
    margin: 0;
    color: #10294a;
    font-size: clamp(2.1rem, 3.75vw, 3.55rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.outcomes-description {
    margin: 0;
    padding-left: 24px;
    border-left: 3px solid var(--accent);
    color: #617084;
    font-size: 1.01rem;
    line-height: 1.8;
}

.outcomes-grid {
    display: grid;
    grid-template-columns: minmax(330px, 0.84fr) minmax(0, 1.16fr);
    gap: 22px;
    align-items: stretch;
}

.outcome-card {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: 30px;
    border: 1px solid rgba(203, 214, 229, 0.92);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 18px 40px rgba(15, 36, 68, 0.08);
    backdrop-filter: blur(12px);
}

.outcome-card::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 0 120px 0 0;
    background: rgba(240, 180, 58, 0.07);
    content: "";
    pointer-events: none;
}

.outcome-card-topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.outcome-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #8d6514;
    background: rgba(240, 180, 58, 0.18);
}

.outcome-card-icon-blue {
    color: #1f639f;
    background: rgba(46, 122, 199, 0.13);
}

.outcome-card-icon svg {
    width: 27px;
    height: 27px;
}

.outcome-card-number {
    color: rgba(16, 41, 74, 0.22);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.outcome-card-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #bb8422;
    font-size: 0.79rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.outcome-card-competency .outcome-card-kicker {
    color: #2b679c;
}

.outcome-card-title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #10294a;
    font-size: clamp(1.55rem, 2.1vw, 2.12rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.outcome-card-text {
    position: relative;
    z-index: 1;
    margin: 16px 0 0;
    color: #617084;
    line-height: 1.78;
}

.outcome-card-publication {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 249, 235, 0.92) 100%);
}

.publication-preview {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    padding: 22px;
    border: 1px solid #e5dcc8;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
}

.publication-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: #7a5718;
    background: rgba(240, 180, 58, 0.16);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.publication-preview strong {
    display: block;
    margin-top: 14px;
    color: #10294a;
    font-size: 1.13rem;
    line-height: 1.48;
}

.publication-preview p {
    margin: 12px 0 0;
    color: #66768c;
    line-height: 1.7;
}

.outcome-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 24px;
}

.outcome-read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    color: #ffffff;
    background: #0c2d57;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(12, 45, 87, 0.18);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.outcome-read-more:hover,
.outcome-read-more:focus-visible {
    background: #164f82;
    box-shadow: 0 16px 30px rgba(12, 45, 87, 0.24);
    transform: translateY(-2px);
}

.outcome-read-more-secondary {
    color: #182235;
    background: #f0b43a;
    box-shadow: 0 12px 26px rgba(240, 180, 58, 0.2);
}

.outcome-read-more-secondary:hover,
.outcome-read-more-secondary:focus-visible {
    color: #182235;
    background: #ffc64d;
    box-shadow: 0 16px 30px rgba(240, 180, 58, 0.26);
}

.outcome-card-competency {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 247, 253, 0.96) 100%);
}

.outcome-competency-head {
    position: relative;
    z-index: 1;
    max-width: 790px;
}

.outcome-competency-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.outcome-competency-block {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    padding: 22px;
    border: 1px solid #dce7f2;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
}

.outcome-competency-block::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 82px;
    border-radius: 0 0 0 82px;
    background: rgba(73, 153, 223, 0.09);
    content: "";
}

.outcome-competency-block-career::before {
    background: rgba(240, 180, 58, 0.11);
}

.outcome-competency-block h4 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #10294a;
    font-size: 1.1rem;
}

.outcome-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 11px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.outcome-list li {
    position: relative;
    padding-left: 18px;
    color: #617084;
    line-height: 1.67;
}

.outcome-list li::before {
    position: absolute;
    top: 10px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2e7ac7;
    box-shadow: 0 0 0 4px rgba(46, 122, 199, 0.12);
    content: "";
}

.outcome-list-career li::before {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(240, 180, 58, 0.14);
}

/* =========================================================
   Informasi & kegiatan terbaru
   ========================================================= */
.news-section {
    position: relative;
    overflow: hidden;
    padding: 84px 0 74px;
    background:
        linear-gradient(180deg, #fffaf0 0%, #f7f9fc 42%, #eef4fa 100%);
    border-top: 1px solid rgba(218, 226, 237, 0.8);
}

.news-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 14% 18%, rgba(240, 180, 58, 0.12), transparent 22%),
        radial-gradient(circle at 88% 76%, rgba(29, 91, 134, 0.12), transparent 24%);
}

.news-section-accent {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.news-section-accent-one {
    top: -170px;
    left: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(240, 180, 58, 0.16), transparent 70%);
}

.news-section-accent-two {
    right: -130px;
    bottom: -190px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(29, 91, 134, 0.16), transparent 72%);
}

.news-section-wrap {
    position: relative;
    z-index: 1;
}

.news-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
}

.news-heading-copy {
    max-width: 820px;
}

.news-kicker {
    margin: 0 0 12px;
    color: #6d7890;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.news-title {
    margin: 0;
    color: #10294a;
    font-size: clamp(2.15rem, 4vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.news-description {
    max-width: 720px;
    margin: 16px 0 0;
    color: #66758a;
    font-size: 1rem;
    line-height: 1.8;
}

.news-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: #0c2d57;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(12, 45, 87, 0.18);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.news-view-all:hover,
.news-view-all:focus-visible {
    transform: translateY(-2px);
    background: #174f82;
    box-shadow: 0 18px 34px rgba(12, 45, 87, 0.24);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.news-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(205, 216, 230, 0.95);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 40px rgba(16, 41, 74, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.news-card:hover {
    transform: translateY(-6px);
    border-color: rgba(160, 184, 212, 0.95);
    box-shadow: 0 24px 48px rgba(16, 41, 74, 0.14);
}

.news-card-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #dbe5f1;
}

.news-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.news-card-image[src*="260428"] {
    object-position: center 18%;
    background: #ffffff;
}

.news-card:hover .news-card-image {
    transform: scale(1.045);
}

.news-category {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #0f2444;
    font-size: 0.76rem;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(12, 25, 49, 0.12);
    backdrop-filter: blur(10px);
}

.news-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.news-date {
    display: block;
    margin-bottom: 12px;
    color: #738199;
    font-size: 0.8rem;
    font-weight: 700;
}

.news-card-title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.35;
}

.news-card-title a {
    color: #10294a;
    transition: color 0.25s ease;
}

.news-card-title a:hover,
.news-card-title a:focus-visible {
    color: #1d5b86;
}

.news-card-text {
    display: -webkit-box;
    overflow: hidden;
    margin: 14px 0 0;
    color: #66758a;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    color: #0f4f86;
    font-size: 0.92rem;
    font-weight: 800;
    transition: color 0.25s ease, transform 0.25s ease;
}

.news-read-more:hover,
.news-read-more:focus-visible {
    color: #0c2d57;
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   Testimoni alumni - ditempatkan sebelum footer
   ========================================================= */
.alumni-testimonials-section {
    position: relative;
    overflow: hidden;
    padding: 82px 0 86px;
    border-top: 1px solid rgba(207, 220, 235, 0.75);
    background:
        linear-gradient(180deg, #f8fafc 0%, #eef4fa 100%);
    isolation: isolate;
}

.alumni-testimonials-section::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
    opacity: 0.6;
    background-image:
        linear-gradient(rgba(12, 45, 87, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12, 45, 87, 0.025) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.82), transparent 96%);
}

.alumni-testimonials-orb {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
}

.alumni-testimonials-orb-one {
    top: -190px;
    right: -130px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(29, 91, 134, 0.16), rgba(29, 91, 134, 0) 72%);
}

.alumni-testimonials-orb-two {
    bottom: -210px;
    left: -150px;
    width: 430px;
    height: 430px;
    background: radial-gradient(circle, rgba(240, 180, 58, 0.16), rgba(240, 180, 58, 0) 72%);
}

.alumni-testimonials-wrap {
    position: relative;
    z-index: 1;
}

.alumni-testimonials-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 30px;
}

.alumni-testimonials-copy {
    max-width: 800px;
}

.alumni-testimonials-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    color: #2b679c;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.alumni-testimonials-kicker::after {
    width: 64px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
    content: "";
}

.alumni-testimonials-title {
    margin: 0;
    color: #10294a;
    font-size: clamp(2.05rem, 3.5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.alumni-testimonials-description {
    max-width: 760px;
    margin: 16px 0 0;
    color: #647489;
    font-size: 1rem;
    line-height: 1.75;
}

.alumni-testimonials-controls {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.alumni-testimonial-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(25, 76, 123, 0.18);
    border-radius: 14px;
    color: #164f82;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 24px rgba(14, 45, 79, 0.08);
    cursor: pointer;
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.alumni-testimonial-control svg {
    width: 22px;
    height: 22px;
}

.alumni-testimonial-control:hover,
.alumni-testimonial-control:focus-visible {
    color: #ffffff;
    background: #164f82;
    box-shadow: 0 14px 28px rgba(14, 45, 79, 0.18);
    transform: translateY(-2px);
}

.alumni-testimonials-window {
    position: relative;
    overflow: hidden;
    min-height: 332px;
    border: 1px solid rgba(199, 214, 231, 0.92);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 55px rgba(13, 40, 74, 0.1);
    cursor: grab;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

.alumni-testimonials-window.is-dragging {
    cursor: grabbing;
}

.alumni-testimonials-window.is-dragging .alumni-testimonial-slide.is-active {
    animation: none;
    transform: translateX(var(--testimonial-drag-x, 0));
    transition: none;
}

.alumni-testimonials-window img {
    -webkit-user-drag: none;
    user-select: none;
}

.alumni-testimonial-slide {
    display: none;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    min-height: 332px;
    animation: alumniTestimonialIn 0.32s ease both;
}

.alumni-testimonial-slide.is-active {
    display: grid;
}

.alumni-testimonial-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 38px;
    border-right: 1px solid rgba(205, 217, 232, 0.86);
    background:
        linear-gradient(145deg, rgba(12, 45, 87, 0.97), rgba(25, 83, 128, 0.94));
    color: #ffffff;
}

.alumni-testimonial-avatar {
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    object-fit: cover;
    object-position: center 18%;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 16px 32px rgba(1, 16, 35, 0.25);
}

.alumni-testimonial-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #173a60;
    background: linear-gradient(135deg, #fff4cd, #f0b43a);
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.alumni-testimonial-person {
    min-width: 0;
}

.alumni-testimonial-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #ffe39e;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.alumni-testimonial-person h3 {
    margin: 16px 0 0;
    color: #ffffff;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.22;
}

.alumni-testimonial-person p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
}

.alumni-testimonial-person small {
    display: block;
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.56);
    line-height: 1.5;
}

.alumni-testimonial-quote {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 42px clamp(34px, 5vw, 68px);
}

.alumni-testimonial-quote-icon {
    width: 42px;
    height: 42px;
    color: #f0b43a;
}

.alumni-testimonial-quote blockquote {
    margin: 14px 0 0;
    color: #22354f;
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    font-weight: 650;
    line-height: 1.58;
    letter-spacing: -0.018em;
}

.alumni-testimonial-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.alumni-testimonial-note span {
    flex: 0 0 auto;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: #2b679c;
}

.alumni-testimonial-note p {
    margin: 0;
    color: #748398;
    font-size: 0.85rem;
    line-height: 1.55;
}

.alumni-testimonials-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
}

.alumni-testimonials-footer > p {
    margin: 0;
    color: #7a8798;
    font-size: 0.84rem;
}

.alumni-testimonials-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alumni-testimonial-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c8d4e2;
    cursor: pointer;
    transition: width 0.22s ease, background 0.22s ease;
}

.alumni-testimonial-dot.is-active {
    width: 30px;
    background: #1e6fc1;
}

@keyframes alumniTestimonialIn {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@media (max-width: 1080px) {
    .outcomes-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .outcomes-description {
        max-width: 780px;
    }

    .outcomes-grid {
        grid-template-columns: 1fr;
    }

    .outcome-card-publication,
    .outcome-card-competency {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .outcomes-section {
        padding: 64px 0 58px;
    }

    .outcomes-description {
        padding-left: 18px;
    }

    .outcome-competency-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .navbar {
        width: min(var(--container), calc(100% - 32px));
        min-height: 76px;
        justify-content: space-between;
        gap: 18px;
    }

    .nav-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .nav-toggle[aria-expanded="true"] {
        border-color: rgba(240, 180, 58, 0.7);
        color: #ffd77c;
        background: rgba(240, 180, 58, 0.14);
    }

    .nav-content {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top: 0;
        border-radius: 0 0 20px 20px;
        background: rgba(8, 31, 64, 0.985);
        box-shadow: 0 24px 45px rgba(3, 15, 32, 0.28);
    }

    .nav-content.is-open {
        display: flex;
        animation: navSearchOpen 0.2s ease both;
    }

    .nav-menu {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .nav-menu a,
    .nav-parent-trigger {
        justify-content: center;
        min-height: 44px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 0.88rem;
    }

    .nav-menu a::after,
    .nav-parent-trigger::after {
        display: none;
    }

    .nav-menu a:hover,
    .nav-menu a:focus-visible,
    .nav-menu a.is-active,
    .nav-parent-trigger:hover,
    .nav-parent-trigger:focus-visible,
    .nav-parent-trigger.is-active,
    .nav-dynamic-item.is-open > .nav-parent-trigger {
        background: rgba(240, 180, 58, 0.12);
    }

    .nav-actions {
        justify-content: flex-end;
        padding-top: 13px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-search-panel {
        position: fixed;
        top: 92px;
        right: 16px;
    }
}

/* Navigasi dan halaman dinamis */
.nav-dynamic-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-parent-trigger {
    gap: 6px;
}

.nav-parent-chevron {
    display: block;
    color: currentColor;
    font-size: .78rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.nav-dynamic-item.is-open > .nav-parent-trigger .nav-parent-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: 30;
    display: none;
    width: max-content;
    min-width: 235px;
    max-width: 310px;
    padding: 8px;
    border: 1px solid #dfe7f0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 20px 45px rgba(5, 24, 49, 0.2);
}

.nav-dynamic-item.is-open > .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu.is-nested {
    top: -8px;
    left: calc(100% - 1px);
}

.nav-dropdown-menu .nav-dynamic-item {
    display: flex;
    width: 100%;
    border-radius: 9px;
}

.nav-dropdown-menu .nav-dynamic-item > a,
.nav-dropdown-menu .nav-dynamic-item > .nav-parent-trigger {
    min-height: 41px;
    flex: 1;
    padding: 8px 12px;
    color: #233650;
    font-size: 0.84rem;
    line-height: 1.3;
    white-space: normal;
    border-radius: 8px;
}

.nav-dropdown-menu .nav-dynamic-item > a::after,
.nav-dropdown-menu .nav-dynamic-item > .nav-parent-trigger::after {
    display: none;
}

.nav-dropdown-menu .nav-dynamic-item > a:hover,
.nav-dropdown-menu .nav-dynamic-item > a:focus-visible,
.nav-dropdown-menu .nav-dynamic-item > a.is-active,
.nav-dropdown-menu .nav-dynamic-item > .nav-parent-trigger:hover,
.nav-dropdown-menu .nav-dynamic-item > .nav-parent-trigger:focus-visible,
.nav-dropdown-menu .nav-dynamic-item > .nav-parent-trigger.is-active,
.nav-dropdown-menu .nav-dynamic-item.is-open > .nav-parent-trigger {
    color: #104b91;
    background: #edf5ff;
}

.nav-dropdown-menu .nav-parent-trigger {
    width: 100%;
    justify-content: space-between;
    color: #58708c;
}

@media (min-width: 1181px) {
    .nav-dynamic-item:hover > .nav-dropdown-menu,
    .nav-dynamic-item:focus-within > .nav-dropdown-menu {
        display: block;
    }
}

.dynamic-public-page {
    background: #f7f9fc;
}

.dynamic-public-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 0 76px;
    color: #fff;
    background:
        radial-gradient(circle at 83% 20%, rgba(240, 180, 58, 0.2) 0 110px, transparent 111px),
        linear-gradient(135deg, #082a54, #104b91);
}

.dynamic-public-hero::after {
    position: absolute;
    right: -100px;
    bottom: -190px;
    width: 410px;
    height: 410px;
    content: "";
    border: 62px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.dynamic-public-hero .container {
    position: relative;
    z-index: 1;
}

.dynamic-public-hero nav {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.84rem;
}

.dynamic-public-hero nav a {
    color: #ffd575;
}

.dynamic-public-kicker {
    color: #f0b43a;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.dynamic-public-hero h1 {
    max-width: 850px;
    margin: 13px 0 12px;
    font-size: clamp(2.25rem, 5vw, 4.2rem);
    line-height: 1.04;
}

.dynamic-public-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.03rem;
}

.dynamic-public-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    align-items: start;
    gap: 32px;
    padding-top: 65px;
    padding-bottom: 75px;
}

.dynamic-public-content {
    min-width: 0;
    overflow: hidden;
    padding: clamp(25px, 5vw, 54px);
    color: #33445b;
    border: 1px solid #e1e8f1;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(12, 45, 87, 0.07);
}

.dynamic-public-content :where(div, section, article, figure, picture) {
    max-width: 100% !important;
    box-sizing: border-box;
}

.dynamic-public-content > :first-child {
    margin-top: 0;
}

.dynamic-public-content > :last-child {
    margin-bottom: 0;
}

.dynamic-public-content h1,
.dynamic-public-content h2,
.dynamic-public-content h3,
.dynamic-public-content h4,
.dynamic-public-content h5,
.dynamic-public-content h6 {
    color: #0c2d57;
    line-height: 1.2;
}

.dynamic-public-content h1 {
    margin: 0 0 20px;
    font-size: clamp(1.85rem, 4vw, 2.6rem);
}

.dynamic-public-content h2 {
    margin: 40px 0 16px;
    font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.dynamic-public-content h3 {
    margin: 30px 0 13px;
    font-size: 1.35rem;
}

.dynamic-public-content h4 {
    margin: 24px 0 12px;
    font-size: 1.15rem;
}

.dynamic-public-content h5,
.dynamic-public-content h6 {
    margin: 10px 0;
    font-size: 1rem;
    line-height: 1.6;
}

.dynamic-public-content p,
.dynamic-public-content li {
    font-size: 1rem;
    line-height: 1.8;
}

.dynamic-public-content ul,
.dynamic-public-content ol,
.dynamic-public-content dl {
    margin: 18px 0;
}

.dynamic-public-content pre {
    max-width: 100%;
    margin: 24px 0;
    overflow-x: auto;
    padding: 18px;
    border-radius: 12px;
    background: #eef3f9;
    white-space: pre-wrap;
}

.dynamic-public-content mark {
    padding: 0 0.16em;
    background: #fff1ad;
}

.dynamic-public-content a {
    color: #145bb0;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dynamic-public-content blockquote {
    margin: 28px 0;
    padding: 18px 22px;
    color: #405671;
    border-left: 4px solid #f0b43a;
    background: #fff8e8;
}

.dynamic-public-content table {
    display: block;
    width: 100%;
    margin: 26px 0;
    overflow-x: auto;
    border-spacing: 0;
    border-collapse: collapse;
}

.dynamic-public-content th,
.dynamic-public-content td {
    min-width: 120px;
    padding: 12px 14px;
    text-align: left;
    border: 1px solid #dce5ef;
}

.dynamic-public-content th {
    color: #fff;
    background: #0c3b72;
}

.dynamic-public-content tr:nth-child(even) td {
    background: #f6f9fd;
}

.dynamic-public-content figure {
    margin: 30px auto !important;
    text-align: center;
}

.dynamic-public-content img {
    display: block;
    height: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain;
}

.dynamic-public-content figure img,
.dynamic-public-content > img {
    max-height: 680px;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 14px 35px rgba(9, 38, 77, 0.12);
}

.dynamic-public-content figcaption {
    margin-top: 10px;
    color: #768398;
    font-size: 0.82rem;
}

.dynamic-public-sidebar {
    position: sticky;
    top: 108px;
    overflow: hidden;
    border: 1px solid #dfe7f0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(12, 45, 87, 0.07);
}

.dynamic-related-heading {
    padding: 25px;
}

.dynamic-public-side-icon {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 17px;
    place-items: center;
    color: #fff;
    font-weight: 900;
    border-radius: 10px;
    background: #1557a5;
}

.dynamic-related-heading h2 {
    margin: 0;
    color: #0c3b72;
    font-size: 1.22rem;
}

.dynamic-related-heading p {
    margin: 0 0 6px;
    color: #1557a5;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dynamic-related-links {
    display: grid;
    gap: 9px;
    padding: 0 18px 20px;
}

.dynamic-related-links a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 68px;
    padding: 11px 13px;
    border: 1px solid #dce7f4;
    border-radius: 13px;
    background: #f7faff;
    color: #0c3b72;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dynamic-related-links a:hover,
.dynamic-related-links a:focus-visible {
    border-color: #9ebee5;
    box-shadow: 0 9px 22px rgba(11, 55, 105, 0.09);
    transform: translateY(-2px);
}

.dynamic-related-type {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #dcecff;
    color: #1557a5;
    font-size: 0.75rem;
    font-weight: 900;
}

.dynamic-related-links a > span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.dynamic-related-links strong {
    overflow-wrap: anywhere;
    font-size: 0.91rem;
}

.dynamic-related-links small {
    color: #7a8799;
    font-size: 0.73rem;
}

.dynamic-related-links b {
    color: #1557a5;
}

.dynamic-related-empty {
    margin: 0 18px 20px;
    padding: 16px;
    border: 1px dashed #c8d8ea;
    border-radius: 12px;
    background: #f8fbff;
    color: #7a8799;
    font-size: 0.84rem;
    line-height: 1.55;
}

.dynamic-related-updated {
    display: grid;
    gap: 4px;
    padding: 15px 25px;
    font-weight: 800;
    border-top: 1px solid #e7ecf2;
    background: #f4f8fd;
}

.dynamic-related-updated span {
    color: #7a8799;
    font-size: 0.73rem;
    font-weight: 500;
}

.dynamic-related-updated strong {
    color: #0c3b72;
    font-size: 0.82rem;
}

.dynamic-public-attachments {
    padding: 65px 0 75px;
    background: #edf3fa;
}

.dynamic-public-attachments h2 {
    margin: 9px 0 8px;
    color: #0c2d57;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
}

.dynamic-attachment-intro {
    max-width: 680px;
    margin: 0 0 25px;
    color: #65758b;
    line-height: 1.65;
}

.dynamic-attachment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.dynamic-attachment-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(118px, auto);
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 16px 17px;
    color: #263a54;
    border: 1px solid #dce5ef;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11, 44, 82, .04);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.dynamic-attachment-card:hover,
.dynamic-attachment-card:focus-visible {
    border-color: #9fc0e3;
    box-shadow: 0 13px 30px rgba(11, 44, 82, .1);
    transform: translateY(-2px);
    outline: none;
}

.dynamic-attachment-type {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    color: #1557a5;
    font-size: 0.7rem;
    font-weight: 900;
    border-radius: 10px;
    background: #e9f2fd;
}

.dynamic-attachment-card.is-download .dynamic-attachment-type {
    color: #765000;
    background: #fff1c9;
}

.dynamic-attachment-card > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.dynamic-attachment-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dynamic-attachment-card small {
    color: #778498;
}

.dynamic-attachment-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: #1557a5;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}

.dynamic-attachment-card.is-download .dynamic-attachment-action {
    color: #765000;
}

.dynamic-attachment-action b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: #edf5ff;
}

.dynamic-attachment-card.is-download .dynamic-attachment-action b {
    background: #fff3d5;
}

@media (max-width: 1180px) {
    .nav-dynamic-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .nav-dynamic-item > a,
    .nav-dynamic-item > .nav-parent-trigger {
        width: 100%;
    }

    .nav-dynamic-item > .nav-parent-trigger {
        grid-column: 1 / -1;
        justify-content: space-between;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.06);
    }

    .nav-dropdown-menu,
    .nav-dropdown-menu.is-nested {
        position: static;
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        margin-top: 5px;
        padding: 5px 5px 5px 14px;
        border: 0;
        border-left: 2px solid rgba(240, 180, 58, 0.42);
        border-radius: 0;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
    }

    .nav-dropdown-menu .nav-dynamic-item > a,
    .nav-dropdown-menu .nav-dynamic-item > .nav-parent-trigger {
        justify-content: flex-start;
        color: rgba(255, 255, 255, 0.82);
        background: transparent;
    }

    .nav-dropdown-menu .nav-parent-trigger {
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.06);
    }
}

@media (max-width: 860px) {
    .dynamic-public-layout {
        grid-template-columns: 1fr;
    }

    .dynamic-public-sidebar {
        position: static;
    }
}

@media (max-width: 700px) {
    .nav-menu {
        grid-template-columns: 1fr !important;
    }

    .dynamic-public-hero {
        padding: 48px 0 54px;
    }

    .dynamic-public-layout {
        width: min(100% - 24px, var(--container));
        padding-top: 35px;
        padding-bottom: 45px;
    }

    .dynamic-public-content {
        padding: 23px 18px;
        border-radius: 15px;
    }

    .dynamic-attachment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .dynamic-attachment-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dynamic-attachment-action {
        grid-column: 2;
        justify-content: flex-start;
    }
}

@media (max-width: 1080px) {
    .alumni-testimonial-slide {
        grid-template-columns: 1fr;
    }

    .alumni-testimonials-window,
    .alumni-testimonial-slide {
        min-height: 0;
    }

    .alumni-testimonial-profile {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 1080px) {
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-points {
        grid-template-columns: 1fr;
    }

    .program-profile-wrap {
        grid-template-columns: 1fr;
    }

    .program-profile-copy {
        max-width: 760px;
    }

    .program-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .facilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .facility-card,
    .facility-card-featured {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .facility-card-featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .facility-card-featured .facility-media,
    .facility-card-featured .facility-image {
        min-height: 330px;
    }

    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .alumni-testimonials-section {
        padding: 68px 0 72px;
    }

    .alumni-testimonials-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .alumni-testimonial-profile {
        padding: 30px;
    }

    .alumni-testimonial-quote {
        padding: 34px 30px 38px;
    }

    .program-profile-section {
        padding: 72px 0 62px;
    }

    .program-profile-visual,
    .program-profile-image,
    .program-profile-media-carousel {
        min-height: 360px;
    }

    .facilities-section {
        padding: 72px 0 62px;
    }

    .facilities-heading-row {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 28px;
    }

    .facilities-grid {
        grid-template-columns: 1fr;
    }

    .facility-card-featured {
        grid-column: auto;
    }

    .news-section {
        padding: 72px 0 62px;
    }

    .news-heading-row {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 28px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-card:last-child {
        grid-column: auto;
    }

    .hero-showcase {
        padding: 56px 0 72px;
    }

    .hero-title {
        font-size: clamp(2.3rem, 9vw, 4rem);
    }

    .hero-description {
        font-size: 1rem;
    }

    .carousel-track {
        min-height: 500px;
    }
}

@media (max-width: 640px) {
    .alumni-testimonials-section {
        padding: 58px 0 64px;
    }

    .alumni-testimonials-title {
        font-size: clamp(2rem, 10vw, 2.7rem);
    }

    .alumni-testimonials-controls {
        width: 100%;
        justify-content: flex-end;
    }

    .alumni-testimonial-control {
        width: 44px;
        height: 44px;
    }

    .alumni-testimonials-window {
        border-radius: 20px;
    }

    .alumni-testimonial-profile {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 24px;
    }

    .alumni-testimonial-avatar {
        width: 88px;
        height: 88px;
    }

    .alumni-testimonial-quote {
        padding: 28px 24px 32px;
    }

    .alumni-testimonial-quote blockquote {
        font-size: 1.15rem;
        line-height: 1.62;
    }

    .alumni-testimonial-note {
        align-items: flex-start;
    }

    .alumni-testimonial-note span {
        margin-top: 8px;
    }

    .alumni-testimonials-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 46px;
        padding-bottom: 42px;
    }

    .footer-bottom-inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 18px 0;
    }

    .floating-actions {
        right: 14px;
        bottom: 14px;
        gap: 8px;
    }

    .floating-pmb {
        min-height: 46px;
        padding: 0 14px;
        font-size: 0.8rem;
    }

    .floating-pmb svg {
        width: 20px;
        height: 20px;
    }

    .back-to-top {
        height: 46px;
    }

    .back-to-top.is-visible {
        width: 46px;
    }

    .container {
        width: min(var(--container), calc(100% - 24px));
    }


    .navbar {
        width: calc(100% - 24px);
        min-height: 70px;
    }

    .brand {
        gap: 9px;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
    }

    .brand-title {
        max-width: 175px;
        overflow: hidden;
        font-size: 0.86rem;
        text-overflow: ellipsis;
    }

    .brand-subtitle {
        font-size: 0.74rem;
    }

    .nav-toggle {
        width: 42px;
        height: 42px;
    }

    .nav-content {
        padding: 14px;
        border-radius: 0 0 16px 16px;
    }

    .nav-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-actions {
        display: flex;
        justify-content: flex-end;
    }

    .nav-search-toggle {
        width: 44px;
        height: 44px;
    }

    .nav-search-panel {
        top: 78px;
        right: 12px;
        left: 12px;
        width: auto;
        padding: 14px;
    }

    .nav-search-panel::before {
        display: none;
    }

    .nav-search-field {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .nav-search-field button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hero-actions,
    .carousel-footer,
    .footer-content,
    .program-profile-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
    }

    .program-profile-section {
        padding: 62px 0 54px;
    }

    .program-profile-title {
        font-size: clamp(2.15rem, 11vw, 3.25rem);
    }

    .program-profile-text {
        font-size: 0.96rem;
    }

    .program-profile-link {
        justify-content: center;
        min-height: 48px;
    }

    .program-profile-visual,
    .program-profile-image,
    .program-profile-media-carousel {
        min-height: 310px;
    }

    .program-profile-visual {
        border-radius: 24px;
    }

    .program-profile-caption {
        right: 18px;
        bottom: 18px;
        left: 18px;
    }

    .program-profile-caption strong {
        font-size: 1.15rem;
    }

    .program-profile-media-arrow {
        width: 40px;
        height: 40px;
    }

    .program-profile-media-arrow.is-prev { left: 12px; }
    .program-profile-media-arrow.is-next { right: 12px; }

    .program-profile-stats {
        gap: 10px;
    }

    .program-stat-card {
        min-height: 96px;
        padding: 16px;
        border-radius: 17px;
    }

    .program-stat-card strong {
        font-size: 0.98rem;
    }

    .facilities-section {
        padding: 62px 0 54px;
    }

    .facility-card,
    .facility-card-featured {
        border-radius: 22px;
    }

    .facility-card .facility-media,
    .facility-card .facility-image,
    .facility-card-featured .facility-media,
    .facility-card-featured .facility-image {
        min-height: 245px;
    }

    .facility-content,
    .facility-card-featured .facility-content {
        padding: 22px;
    }

    .facilities-view-all {
        width: 100%;
    }

    .facilities-description,
    .facility-text {
        font-size: 0.95rem;
    }

    .outcome-card,
    .outcome-competency-block {
        padding: 22px;
        border-radius: 22px;
    }

    .outcome-feature-media,
    .outcome-feature-image {
        min-height: 240px;
    }

    .outcomes-description,
    .outcome-card-text,
    .outcome-profile-meta span,
    .outcome-list li,
    .publication-preview p {
        font-size: 0.95rem;
    }

    .outcome-read-more {
        width: 100%;
    }

    .news-view-all {
        width: 100%;
    }

    .news-card {
        border-radius: 22px;
    }

    .news-card-body {
        padding: 22px;
    }

    .news-card-title {
        font-size: 1.2rem;
    }

    .news-description,
    .news-card-text {
        font-size: 0.95rem;
    }

    .carousel-controls {
        justify-content: center;
    }

    .carousel-track {
        min-height: 540px;
    }
}

/* =========================================================
   Desktop hero: seluruh area header/carousel tampil dalam
   satu viewport ketika halaman pertama kali dibuka.
   ========================================================= */
@media (min-width: 1081px) {
    .hero-showcase {
        display: flex;
        align-items: center;
        height: calc(100svh - 82px);
        min-height: 650px;
        max-height: 820px;
        padding: clamp(24px, 4vh, 42px) 0;
    }

    .hero-grid {
        height: 100%;
        gap: 32px;
        align-items: center;
    }

    .hero-content {
        padding: 0;
    }

    .hero-chips {
        gap: 10px;
        margin-bottom: 14px;
    }

    .hero-chip {
        min-height: 34px;
        padding: 0 14px;
        font-size: 0.82rem;
    }

    .hero-kicker {
        margin-bottom: 10px;
        font-size: 0.82rem;
    }

    .hero-title {
        max-width: 680px;
        font-size: clamp(2.9rem, 4.1vw, 4rem);
        line-height: 1.02;
    }

    .hero-description {
        max-width: 640px;
        margin-top: 16px;
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-actions {
        gap: 12px;
        margin-top: 22px;
    }

    .btn {
        min-height: 46px;
        padding: 0 20px;
    }

    .hero-points {
        gap: 10px;
        margin-top: 24px;
    }

    .hero-point {
        min-height: 76px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .hero-point strong {
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .hero-point span {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .hero-carousel {
        max-height: 100%;
        padding: 18px;
        border-radius: 24px;
    }

    .carousel-header {
        margin-bottom: 12px;
    }

    .carousel-label {
        margin-bottom: 5px;
        font-size: 0.72rem;
    }

    .carousel-header h2 {
        font-size: 1.2rem;
    }

    .carousel-logo {
        width: 48px;
        height: 48px;
        padding: 5px;
    }

    .carousel-track {
        min-height: 405px;
    }

    .carousel-image-wrapper {
        border-radius: 18px;
    }

    .carousel-image {
        height: 205px;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .carousel-content {
        margin-top: 12px;
        padding-top: 2px;
    }

    .carousel-tag {
        min-height: 28px;
        padding: 0 11px;
        margin-bottom: 10px;
        font-size: 0.74rem;
    }

    .carousel-content h3 {
        margin-bottom: 8px;
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .carousel-content p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.9rem;
        line-height: 1.55;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .carousel-link {
        margin-top: 12px;
        font-size: 0.9rem;
    }

    .carousel-footer {
        margin-top: 12px;
    }

    .carousel-control {
        width: 38px;
        height: 38px;
    }
}

/* Penyesuaian tambahan untuk laptop dengan tinggi layar pendek. */
@media (min-width: 1081px) and (max-height: 740px) {
    .hero-showcase {
        min-height: calc(100svh - 82px);
        padding: 14px 0;
    }

    .hero-chips {
        margin-bottom: 9px;
    }

    .hero-kicker {
        margin-bottom: 7px;
    }

    .hero-title {
        font-size: clamp(2.55rem, 3.6vw, 3.35rem);
    }

    .hero-description {
        display: -webkit-box;
        overflow: hidden;
        margin-top: 10px;
        font-size: 0.92rem;
        line-height: 1.5;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .hero-actions {
        margin-top: 14px;
    }

    .hero-points {
        display: none;
    }

    .hero-carousel {
        padding: 14px;
    }

    .carousel-header {
        margin-bottom: 8px;
    }

    .carousel-track {
        min-height: 348px;
    }

    .carousel-image {
        height: 165px;
    }

    .carousel-content {
        margin-top: 8px;
    }

    .carousel-tag {
        margin-bottom: 7px;
    }

    .carousel-content h3 {
        font-size: 1.02rem;
        line-height: 1.25;
    }

    .carousel-content p {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .carousel-link,
    .carousel-footer {
        margin-top: 8px;
    }
}

/* =========================================================
   Halaman dosen
   ========================================================= */
.lecturer-page {
    background: #f6f8fb;
}

.lecturer-hero {
    position: relative;
    min-height: 410px;
    overflow: hidden;
    color: #ffffff;
    background: #09264b;
}

.lecturer-hero-media,
.lecturer-hero-overlay {
    position: absolute;
    inset: 0;
}

.lecturer-hero-media {
    background: url("../images/gambar_kampus2.jpg") center 45% / cover no-repeat;
    transform: scale(1.025);
}

.lecturer-hero-overlay {
    background:
        linear-gradient(90deg, rgba(4, 24, 50, 0.96) 0%, rgba(7, 37, 73, 0.9) 44%, rgba(7, 37, 73, 0.45) 100%),
        linear-gradient(180deg, rgba(7, 30, 60, 0.12), rgba(7, 30, 60, 0.78));
}

.lecturer-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(290px, 0.7fr);
    align-items: center;
    gap: 70px;
    min-height: 410px;
    padding-top: 56px;
    padding-bottom: 56px;
}

.lecturer-hero-copy {
    max-width: 760px;
}

.lecturer-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 20px;
}

.lecturer-hero-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.78rem;
    font-weight: 750;
}

.lecturer-hero-chips span:last-child {
    border-color: rgba(240, 180, 58, 0.5);
    color: #ffe09a;
    background: rgba(240, 180, 58, 0.12);
}

.lecturer-hero-kicker {
    margin: 0 0 12px;
    color: #f7c85e;
    font-size: 0.84rem;
    font-weight: 850;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.lecturer-hero h1 {
    max-width: 720px;
    margin: 0;
    font-size: clamp(2.6rem, 5vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.lecturer-hero h1 span {
    display: block;
    color: #ffcf62;
}

.lecturer-hero-copy > p:last-child {
    max-width: 690px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.02rem;
    line-height: 1.75;
}

.lecturer-hero-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 12, 32, 0.24);
    backdrop-filter: blur(13px);
}

.lecturer-hero-card img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.lecturer-hero-card span,
.lecturer-hero-card strong {
    display: block;
}

.lecturer-hero-card span {
    margin-bottom: 8px;
    color: #f7c85e;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lecturer-hero-card strong {
    font-size: 1.05rem;
    line-height: 1.45;
}

.lecturer-breadcrumb {
    border-bottom: 1px solid #e2e8f1;
    background: #ffffff;
}

.lecturer-breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    color: #7a8494;
    font-size: 0.9rem;
}

.lecturer-breadcrumb a {
    color: #1c629d;
    font-weight: 750;
}

.lecturer-breadcrumb a:hover,
.lecturer-breadcrumb a:focus-visible {
    color: #0c2d57;
}

.lecturer-directory {
    padding: 78px 0 96px;
}

.lecturer-directory-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 410px);
    align-items: end;
    gap: 56px;
}

.lecturer-directory .section-kicker {
    margin: 0 0 10px;
    color: #b27704;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lecturer-directory h2 {
    margin: 0;
    color: #102640;
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.lecturer-directory-head > div > p:last-child {
    max-width: 640px;
    margin: 16px 0 0;
    color: #697487;
    line-height: 1.7;
}

.lecturer-search {
    display: grid;
    gap: 9px;
    color: #263a54;
    font-size: 0.82rem;
    font-weight: 800;
}

.lecturer-search-field {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    padding: 0 17px;
    border: 1px solid #d2dce9;
    border-radius: 15px;
    color: #778398;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(19, 43, 72, 0.045);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lecturer-search-field:focus-within {
    border-color: #2e78b9;
    box-shadow: 0 0 0 4px rgba(46, 120, 185, 0.12);
}

.lecturer-search-field svg {
    width: 20px;
    height: 20px;
}

.lecturer-search-field input {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 0 0 10px;
    border: 0;
    outline: 0;
    color: #142a45;
    background: transparent;
    font: inherit;
    font-weight: 500;
}

.lecturer-search-field input::placeholder {
    color: #98a3b3;
}

.lecturer-result-status {
    margin: 34px 0 17px;
    color: #6b7688;
    font-size: 0.88rem;
    font-weight: 700;
}

.lecturer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.lecturer-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 23px;
    min-height: 300px;
    padding: 19px;
    border: 1px solid rgba(213, 222, 234, 0.94);
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(17, 42, 72, 0.07);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lecturer-card:hover {
    border-color: rgba(38, 104, 166, 0.34);
    box-shadow: 0 22px 46px rgba(17, 42, 72, 0.12);
    transform: translateY(-4px);
}

.lecturer-card[hidden] {
    display: none;
}

.lecturer-avatar {
    position: relative;
    display: flex;
    min-height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #ffffff;
    isolation: isolate;
}

.lecturer-avatar::before,
.lecturer-avatar::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.lecturer-avatar::before {
    top: -30px;
    right: -38px;
    width: 115px;
    height: 115px;
    border: 24px solid rgba(255, 255, 255, 0.1);
}

.lecturer-avatar::after {
    bottom: -42px;
    left: -44px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lecturer-avatar-navy {
    background: linear-gradient(145deg, #0a274c, #1d5f91);
}

.lecturer-avatar-gold {
    background: linear-gradient(145deg, #805a0d, #d49a28);
}

.lecturer-avatar-teal {
    background: linear-gradient(145deg, #0b4f5a, #258894);
}

.lecturer-avatar-blue {
    background: linear-gradient(145deg, #164c80, #2985c4);
}

.lecturer-avatar > span {
    position: relative;
    z-index: 1;
    font-size: 2.2rem;
    font-weight: 850;
    letter-spacing: -0.06em;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}

.lecturer-avatar img {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 1;
    width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    opacity: 0.8;
}

.lecturer-avatar img.lecturer-photo {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: inherit;
    object-fit: cover;
    object-position: center top;
    background: #e9f0f7;
    opacity: 1;
}

.lecturer-avatar img.lecturer-watermark {
    z-index: 3;
    box-sizing: border-box;
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(5, 31, 62, 0.24);
}

.lecturer-card-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px 4px 3px 0;
}

.lecturer-position {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    color: #0b5594;
    background: #eaf4ff;
    font-size: 0.7rem;
    font-weight: 850;
}

.lecturer-card:nth-child(3n + 2) .lecturer-position {
    color: #8a5b00;
    background: #fff3d6;
}

.lecturer-card h3 {
    margin: 13px 0 8px;
    color: #142943;
    font-size: 1.08rem;
    line-height: 1.35;
}

.lecturer-email {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    color: #657287;
    font-size: 0.79rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.lecturer-email:hover,
.lecturer-email:focus-visible {
    color: #1263a6;
}

.lecturer-email svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

.lecturer-expertise {
    margin-top: 15px;
}

.lecturer-expertise span {
    display: block;
    margin-bottom: 5px;
    color: #334a65;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.lecturer-expertise p {
    margin: 0;
    color: #667489;
    font-size: 0.82rem;
    line-height: 1.55;
}

.lecturer-research-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    padding-top: 18px;
}

.lecturer-research-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid #d8e5f3;
    border-radius: 999px;
    color: #145c98;
    background: #f6faff;
    font-size: 0.7rem;
    font-weight: 850;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lecturer-research-links a:hover,
.lecturer-research-links a:focus-visible {
    border-color: #1d689f;
    color: #ffffff;
    background: #155a91;
    transform: translateY(-1px);
}

.lecturer-empty {
    padding: 54px 24px;
    border: 1px dashed #bdc9d8;
    border-radius: 22px;
    text-align: center;
    background: #ffffff;
}

.lecturer-empty strong {
    display: block;
    color: #17304e;
    font-size: 1.2rem;
}

.lecturer-empty p {
    margin: 8px 0 0;
    color: #6e7b8d;
}

@media (max-width: 1040px) {
    .lecturer-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.48fr);
        gap: 35px;
    }

    .lecturer-card {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 18px;
    }
}

@media (max-width: 840px) {
    .lecturer-hero-inner {
        grid-template-columns: 1fr;
        min-height: 390px;
    }

    .lecturer-hero-card {
        display: none;
    }

    .lecturer-directory-head {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .lecturer-grid {
        grid-template-columns: 1fr;
    }

    .lecturer-card {
        grid-template-columns: 132px minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .lecturer-hero,
    .lecturer-hero-inner {
        min-height: 365px;
    }

    .lecturer-hero-inner {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .lecturer-hero h1 {
        font-size: clamp(2.45rem, 12vw, 3.4rem);
    }

    .lecturer-hero-copy > p:last-child {
        font-size: 0.93rem;
        line-height: 1.65;
    }

    .lecturer-breadcrumb .container {
        min-height: 56px;
    }

    .lecturer-directory {
        padding: 58px 0 70px;
    }

    .lecturer-card {
        grid-template-columns: 1fr;
        gap: 17px;
        padding: 15px;
    }

    .lecturer-avatar {
        min-height: 152px;
    }

    .lecturer-card-body {
        padding: 2px 3px 4px;
    }

    .lecturer-research-links {
        margin-top: 18px;
        padding-top: 0;
    }
}
/* =========================================================
   Daftar dan detail berita
   ========================================================= */
.news-public-page,
.news-detail-page {
    background: #f4f7fb;
}

.news-public-hero,
.news-detail-hero {
    padding: 72px 0;
    background:
        radial-gradient(circle at 82% 18%, rgba(83, 145, 207, 0.28), transparent 24%),
        linear-gradient(135deg, #092b52 0%, #145a9c 100%);
    color: #fff;
}

.news-public-hero nav,
.news-detail-hero nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    color: #cadbef;
    font-size: 0.86rem;
}

.news-public-hero nav a,
.news-detail-hero nav a {
    color: inherit;
}

.news-public-hero > .container > span,
.news-detail-category {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f7bf3d;
    color: #17345a;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.news-public-hero h1,
.news-detail-hero h1 {
    max-width: 980px;
    margin: 18px 0 12px;
    color: #fff;
    font-size: clamp(2.25rem, 5vw, 4.4rem);
    line-height: 1.08;
}

.news-public-hero p,
.news-detail-hero p {
    max-width: 820px;
    margin: 0;
    color: #d7e5f5;
    font-size: 1.05rem;
    line-height: 1.75;
}

.news-public-content {
    padding-top: 56px;
    padding-bottom: 84px;
}

.news-discovery-panel {
    display: grid;
    grid-template-columns: minmax(270px, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(24px, 4vw, 58px);
    margin-bottom: 50px;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid #cddbea;
    border-radius: 26px;
    background:
        radial-gradient(circle at 6% 8%, rgba(247, 191, 61, 0.2), transparent 27%),
        linear-gradient(135deg, #f9fbfe 0%, #eef4fc 100%);
    box-shadow: 0 18px 46px rgba(16, 44, 79, 0.09);
}

.news-discovery-intro {
    align-self: center;
}

.news-discovery-intro > span {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: #dfeaf9;
    color: #2360aa;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.news-discovery-intro h2 {
    margin: 16px 0 10px;
    color: #102d50;
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    line-height: 1.15;
}

.news-discovery-intro p {
    margin: 0;
    color: #667a94;
    line-height: 1.7;
}

.news-public-search {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.news-public-search label {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.news-public-search label > span {
    color: #415873;
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.news-public-keyword {
    grid-column: 1 / -1;
}

.news-public-keyword > div {
    position: relative;
}

.news-public-keyword i {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 16px;
    height: 16px;
    transform: translateY(-55%);
    border: 2px solid #7189a4;
    border-radius: 50%;
}

.news-public-keyword i::after {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 7px;
    height: 2px;
    content: "";
    transform: rotate(45deg);
    border-radius: 2px;
    background: #7189a4;
}

.news-public-keyword input {
    padding-left: 52px !important;
}

.news-public-search input,
.news-public-search select {
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid #c9d8e8;
    border-radius: 13px;
    outline: none;
    background: rgba(255, 255, 255, 0.95);
    color: #183450;
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-public-search input:focus,
.news-public-search select:focus {
    border-color: #2670b6;
    box-shadow: 0 0 0 4px rgba(38, 112, 182, 0.12);
}

.news-public-search-actions {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.news-public-search-actions button,
.news-public-search-actions a {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    font-weight: 850;
    text-decoration: none;
}

.news-public-search-actions button {
    gap: 12px;
    cursor: pointer;
    background: linear-gradient(135deg, #0f4f91, #1b6eb5);
    color: #fff;
    box-shadow: 0 12px 25px rgba(18, 89, 153, 0.2);
}

.news-public-search-actions a {
    border: 1px solid #cbd8e7;
    background: #fff;
    color: #315677;
}

.news-category-chips {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 22px;
    border-top: 1px solid #d3dfec;
}

.news-category-chips a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border: 1px solid #cbd9e8;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #315576;
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.news-category-chips a small {
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #e6eef8;
    color: #356594;
    font-size: 0.68rem;
}

.news-category-chips a.is-active {
    border-color: #145c9f;
    background: #145c9f;
    color: #fff;
}

.news-category-chips a.is-active small {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Legacy compact search rules retained for detail variants. */
.news-public-search.is-compact {
    grid-template-columns: 1fr auto auto;
    margin-bottom: 46px;
    padding: 14px;
    border: 1px solid #d5e0ec;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(16, 44, 79, 0.07);
}

.news-public-search.is-compact input {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid #d1ddea;
    border-radius: 12px;
    color: #183450;
    font: inherit;
}

.news-public-search.is-compact button,
.news-public-search.is-compact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: #155ea5;
    color: #fff;
    font-weight: 800;
}

.news-public-search.is-compact a {
    background: #edf3f9;
    color: #164a7b;
}

.news-public-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.news-public-heading span {
    color: #efac17;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.news-public-heading h2 {
    margin: 5px 0 0;
    color: #102b4d;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.news-public-heading p,
.news-public-heading > a {
    margin: 0;
    color: #687992;
    font-weight: 700;
}

.news-public-grid {
    row-gap: 28px;
}

.news-public-empty {
    padding: 72px 24px;
    border: 1px dashed #bfd0e3;
    border-radius: 22px;
    background: #fff;
    text-align: center;
}

.news-public-empty > span {
    display: grid;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 15px;
    background: #e7f1fc;
    color: #145ea5;
    font-size: 1.35rem;
    font-weight: 900;
}

.news-detail-hero {
    padding-bottom: 92px;
}

.news-detail-hero > .container > div {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    color: #c8daef;
    font-weight: 700;
}

.news-detail-article {
    position: relative;
    z-index: 1;
    margin-top: -44px;
    padding-bottom: 76px;
}

.news-detail-thumbnail {
    overflow: hidden;
    margin: 0 0 28px;
    aspect-ratio: 16 / 8;
    border: 8px solid #fff;
    border-radius: 26px;
    background: #dce7f2;
    box-shadow: 0 24px 55px rgba(13, 43, 78, 0.15);
}

.news-detail-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-detail-body {
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: clamp(24px, 5vw, 58px);
}

.news-detail-body img,
.news-detail-body figure {
    max-width: 100% !important;
}

.news-detail-attachments {
    border-top: 1px solid #d7e2ee;
}

.news-related-section {
    padding-top: 72px;
    padding-bottom: 86px;
}

@media (max-width: 840px) {
    .news-discovery-panel {
        grid-template-columns: 1fr;
    }

    .news-public-search {
        grid-template-columns: 1fr;
    }

    .news-public-keyword,
    .news-public-search-actions {
        grid-column: auto;
    }

    .news-public-search-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .news-public-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .news-detail-thumbnail {
        aspect-ratio: 4 / 3;
        border-width: 5px;
    }
}
/* Facility management public pages and reusable carousels */
.facility-image-carousel{position:absolute;inset:0;display:block;overflow:hidden}
.facility-image-carousel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.facility-image-carousel>img.is-active{opacity:1}
.facility-carousel-count{position:absolute;right:14px;bottom:14px;z-index:3;padding:5px 9px;border-radius:999px;background:rgba(5,31,67,.76);color:#fff;font-size:.72rem;font-weight:800;line-height:1}
.facility-public-page,.facility-detail-page{background:#f4f8fd;color:#0b2b54}
.facility-public-hero,.facility-detail-hero{padding:88px 0;background:linear-gradient(125deg,#092c57,#1d65ad);color:#fff;position:relative;overflow:hidden}
.facility-public-hero:after,.facility-detail-hero:after{content:"";position:absolute;width:430px;height:430px;border:70px solid rgba(255,255,255,.07);border-radius:50%;right:-90px;top:-170px}
.facility-public-hero .container,.facility-detail-hero .container{position:relative;z-index:1}
.facility-public-hero p,.facility-detail-hero>div>p,.facility-public-results header p,.facility-detail-attachments header p,.facility-related header p{margin:0 0 14px;color:#f7b72b;font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem}
.facility-public-hero h1{max-width:980px;margin:0 0 20px;font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.03}
.facility-public-hero span{font-size:1.08rem;color:#ccddf1}
.facility-public-search{margin-top:-34px;position:relative;z-index:2}
.facility-public-search form{display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(150px,.7fr) minmax(150px,.6fr) minmax(150px,.6fr) auto;gap:14px;align-items:end;padding:24px;background:#fff;border:1px solid #d9e4f1;border-radius:24px;box-shadow:0 18px 45px rgba(17,53,94,.12)}
.facility-public-search label{display:grid;gap:8px;color:#536b88;font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}
.facility-public-search input,.facility-public-search select{width:100%;min-height:54px;border:1px solid #cedceb;border-radius:14px;padding:0 16px;background:#fff;color:#17345a;font:inherit}
.facility-public-search form>div{display:flex;gap:8px}
.facility-public-search button,.facility-public-search a{min-height:54px;padding:0 22px;border:0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#1766ad;color:#fff;font-weight:900;text-decoration:none;cursor:pointer;white-space:nowrap}
.facility-public-search a{background:#eef4fb;color:#1c588e}
.facility-public-results{padding:72px 0 110px}
.facility-public-results>header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.facility-public-results h2,.facility-detail-copy h2,.facility-detail-attachments h2,.facility-related h2{margin:0;font-size:clamp(2rem,4vw,3.4rem);line-height:1.08}
.facility-public-results>header>strong{color:#607893}
.facility-public-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.facility-public-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #d2dfed;border-radius:26px;background:#fff;box-shadow:0 16px 35px rgba(11,43,84,.08);transition:transform .2s ease,box-shadow .2s ease}
.facility-public-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(11,43,84,.14)}
.facility-public-media{display:block;position:relative;aspect-ratio:16/10;background:#dbe8f5;overflow:hidden}
.facility-public-media>img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.facility-public-card:hover .facility-public-media>img{transform:scale(1.03)}
.facility-public-card-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:26px}
.facility-public-card-copy>span{color:#e79a00;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem}
.facility-public-card-copy h3{margin:12px 0;font-size:1.45rem;line-height:1.18}
.facility-public-card-copy p{margin:0 0 24px;color:#647992;line-height:1.7}
.facility-public-card-copy a{margin-top:auto;color:#0b5aa2;font-weight:900;text-decoration:none}
.facility-public-empty{padding:70px 20px;text-align:center;border:1px dashed #bdcfe2;border-radius:24px;background:#fff}
.facility-public-empty span{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:18px;background:#e8f2fd;color:#1766ad;font-weight:900}
.facility-detail-hero nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:42px;color:#bfd3e9;font-size:.9rem}
.facility-detail-hero nav a{color:#fff;text-decoration:none}
.facility-detail-hero h1{max-width:960px;margin:0 0 18px;font-size:clamp(2.5rem,5.6vw,5rem);line-height:1}
.facility-detail-hero .container>span{color:#cbdcef}
.facility-detail-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:34px;padding-top:64px;padding-bottom:72px}
.facility-detail-gallery,.facility-detail-copy{min-width:0}
.facility-detail-stage{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:28px;background:#d9e6f3;box-shadow:0 22px 52px rgba(11,43,84,.12)}
.facility-detail-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.facility-detail-stage>img.is-active{opacity:1}
.facility-detail-stage button{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:50px;height:50px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(7,40,77,.72);color:#fff;font-size:2rem;cursor:pointer}
.facility-detail-stage button:first-of-type{left:18px}.facility-detail-stage button:nth-of-type(2){right:18px}
.facility-detail-stage>span{position:absolute;right:18px;bottom:18px;z-index:3;padding:8px 12px;border-radius:999px;background:rgba(7,40,77,.75);color:#fff;font-weight:800}
.facility-detail-thumbs{display:flex;gap:12px;overflow:auto;padding:14px 2px 2px}
.facility-detail-thumbs button{flex:0 0 92px;height:62px;padding:0;border:3px solid transparent;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer}
.facility-detail-thumbs button.is-active{border-color:#1e6bb4}
.facility-detail-thumbs img{width:100%;height:100%;object-fit:cover}
.facility-detail-copy{align-self:start;padding:34px;border:1px solid #d4e0ed;border-radius:26px;background:#fff}
.facility-detail-copy>span{display:inline-block;padding:8px 12px;border-radius:999px;background:#fff1ca;color:#9b6800;font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.facility-detail-copy h2{font-size:2rem;margin:18px 0}
.facility-detail-copy p{color:#526b87;line-height:1.8}
.facility-detail-copy small{display:block;margin-top:28px;padding-top:18px;border-top:1px solid #e1e9f2;color:#7f90a5}
.facility-detail-attachments{padding:72px 0;background:#eaf2fb}
.facility-detail-attachments header{margin-bottom:24px}
.facility-detail-attachments .container>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.facility-detail-attachments a{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px;border:1px solid #d2dfed;border-radius:18px;background:#fff;color:#15365f;text-decoration:none}
.facility-detail-attachments a>span{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#e5f1fd;color:#0b5ea7;font-weight:900;font-size:.76rem}
.facility-detail-attachments a div{min-width:0}.facility-detail-attachments a strong,.facility-detail-attachments a small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.facility-detail-attachments a small{margin-top:5px;color:#72859c}
.facility-related{padding-top:72px;padding-bottom:110px}.facility-related header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.facility-related header a{color:#0b5ea7;font-weight:900;text-decoration:none}.facility-related>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.facility-related>div>a{overflow:hidden;border:1px solid #d2dfed;border-radius:20px;background:#fff;color:#15365f;text-decoration:none}.facility-related img{width:100%;height:180px;object-fit:cover}.facility-related a span{display:block;padding:18px}.facility-related a strong,.facility-related a small{display:block}.facility-related a small{margin-top:8px;color:#70849c;line-height:1.5}
@media(max-width:1020px){.facility-public-search form{grid-template-columns:1fr 1fr}.facility-public-query{grid-column:1/-1}.facility-public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.facility-detail-main{grid-template-columns:1fr}.facility-detail-attachments .container>div{grid-template-columns:1fr}}
@media(max-width:680px){.facility-public-hero,.facility-detail-hero{padding:62px 0}.facility-public-search form{grid-template-columns:1fr;padding:18px}.facility-public-query{grid-column:auto}.facility-public-search form>div{flex-wrap:wrap}.facility-public-search button{flex:1}.facility-public-results{padding-top:52px}.facility-public-results>header,.facility-related header{align-items:flex-start;flex-direction:column}.facility-public-grid,.facility-related>div{grid-template-columns:1fr}.facility-public-card-copy{padding:22px}.facility-detail-main{padding-top:34px}.facility-detail-stage{border-radius:20px;aspect-ratio:4/3}.facility-detail-stage button{width:42px;height:42px}.facility-detail-copy{padding:24px}.facility-detail-attachments{padding:52px 0}.facility-detail-attachments a{grid-template-columns:auto minmax(0,1fr) auto;padding:14px}.facility-related{padding-top:52px}}
/* Publications public directory */
.publication-public-page{background:#f4f7fb;color:#102f58}.publication-public-hero{padding:88px 0;background:linear-gradient(125deg,#f7faff 0%,#eaf2fd 62%,#fff8e8 100%);border-bottom:1px solid #dce6f1}.publication-public-hero>.container{display:flex;align-items:center;justify-content:space-between;gap:50px}.publication-public-hero p,.publication-public-results header p{margin:0 0 14px;color:#1563aa;font-size:.82rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.publication-public-hero h1{max-width:900px;margin:0;font-size:clamp(2.3rem,5vw,4.8rem);line-height:1.04}.publication-public-hero span{display:block;max-width:760px;margin-top:22px;color:#647b96;font-size:1.1rem;line-height:1.7}.publication-hero-document{flex:0 0 270px;min-height:340px;padding:34px;border:1px solid #c9d9eb;border-radius:18px;background:#fff;box-shadow:0 22px 55px rgba(17,53,94,.13);transform:rotate(2deg)}.publication-hero-document span,.publication-hero-document b{display:block}.publication-hero-document span{margin-bottom:30px;color:#b77b00;font-size:.74rem;font-weight:900;letter-spacing:.12em}.publication-hero-document b{margin-top:42px;color:#1b5f9b}.publication-hero-document i{display:block;width:100%;height:8px;margin:12px 0;border-radius:99px;background:#dfe7f0}.publication-hero-document i:nth-of-type(2){width:83%}.publication-hero-document i:nth-of-type(3){width:62%}
.publication-public-tools{padding-top:48px}.publication-public-tools form{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.25fr) minmax(160px,.25fr) auto;gap:14px;align-items:end;padding:24px;border:1px solid #d5e1ee;border-radius:24px;background:#fff;box-shadow:0 14px 35px rgba(15,48,86,.07)}.publication-public-tools label{display:grid;gap:8px}.publication-public-tools label>span{font-size:.75rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#5e7691}.publication-public-tools input,.publication-public-tools select{width:100%;height:56px;padding:0 16px;border:1px solid #cbd9e8;border-radius:14px;background:#fff;color:#17385f;font:inherit}.publication-public-tools form>div{display:flex;gap:8px}.publication-public-tools button,.publication-public-tools a{min-height:56px;padding:0 20px;border:0;border-radius:14px;background:#1767af;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;text-decoration:none;cursor:pointer}.publication-public-tools a{background:#eaf3fc;color:#155f9f}
.publication-public-results{padding-top:70px;padding-bottom:110px}.publication-public-results>header{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.publication-public-results h2{margin:0;font-size:clamp(2rem,4vw,3.5rem)}.publication-public-results header strong{color:#627b97}.publication-public-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}.publication-public-card{overflow:hidden;border:1px solid #d3deea;border-radius:24px;background:#fff;box-shadow:0 18px 46px rgba(15,48,86,.08)}.publication-card-paper{min-height:300px;padding:50px max(32px,12%);background:linear-gradient(145deg,#eff5fb,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.publication-card-paper small{color:#b77900;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.publication-card-paper strong{max-width:480px;margin:22px 0 12px;font-family:Georgia,serif;font-size:1.5rem;line-height:1.3}.publication-card-paper span{color:#667d95}.publication-card-paper i{display:block;width:72%;height:6px;margin:7px auto;border-radius:99px;background:#dce5ee}.publication-card-paper i:nth-of-type(2){width:88%}.publication-card-paper i:nth-of-type(3){width:65%}.publication-card-paper i:nth-of-type(4){width:79%}.publication-card-paper i:nth-of-type(5){width:54%}.publication-card-body{padding:30px}.publication-card-meta{display:flex;align-items:center;justify-content:space-between;gap:15px}.publication-card-meta span{padding:7px 11px;border-radius:999px;background:#fff2ce;color:#8a5b00;font-size:.75rem;font-weight:900}.publication-card-meta b{color:#617994}.publication-card-body h3{margin:18px 0 12px;font-size:1.55rem;line-height:1.25}.publication-card-authors{margin:0;color:#375b80;font-weight:800}.publication-card-journal{margin:8px 0 20px;color:#75899f;font-weight:700}.publication-card-abstract p{margin:0;color:#647b94;line-height:1.75}.publication-card-abstract [data-publication-full]{white-space:normal}.publication-card-abstract button{margin-top:18px;padding:10px 15px;border:1px solid #bfd4e9;border-radius:999px;background:#fff;color:#0f5da2;font-weight:900;cursor:pointer}.publication-card-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.publication-card-links a{padding:10px 15px;border:1px solid #c8dbed;border-radius:999px;color:#0f5da2;font-weight:900;text-decoration:none}.publication-public-empty{padding:70px;text-align:center;border:1px dashed #bfd0e2;border-radius:24px;background:#fff}.publication-public-empty>span{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 15px;border-radius:18px;background:#e3effc;color:#1765ab;font-weight:900}.publication-public-empty h3{margin:0 0 8px}.publication-public-empty p{margin:0;color:#71869c}
@media(max-width:900px){.publication-public-hero>.container{align-items:flex-start}.publication-hero-document{display:none}.publication-public-tools form{grid-template-columns:1fr 1fr}.publication-public-tools label:first-child{grid-column:1/-1}.publication-public-tools form>div{grid-column:1/-1}.publication-public-grid{grid-template-columns:1fr}}
@media(max-width:600px){.publication-public-hero{padding:58px 0}.publication-public-tools{padding-top:24px}.publication-public-tools form{grid-template-columns:1fr;padding:18px}.publication-public-tools label:first-child,.publication-public-tools form>div{grid-column:auto}.publication-public-tools form>div>*{flex:1}.publication-public-results{padding-top:48px}.publication-public-results>header{align-items:flex-start;flex-direction:column}.publication-card-paper{min-height:220px;padding:35px 24px}.publication-card-body{padding:22px}}

/* Optional publication cover */
.publication-preview.has-thumbnail{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center}
.publication-preview-image{overflow:hidden;align-self:stretch;min-height:150px;border:1px solid #d7e1eb;border-radius:15px;background:#fff}
.publication-preview-image img{display:block;width:100%;height:100%;object-fit:contain}
.publication-preview-copy{min-width:0}
.publication-card-cover{display:grid;place-items:center;min-height:300px;padding:28px;background:linear-gradient(145deg,#edf4fb,#fff)}
.publication-card-cover img{display:block;width:100%;height:100%;max-height:430px;object-fit:contain}
.publication-public-card.without-thumbnail .publication-card-body{padding-top:34px}
@media(max-width:600px){
    .publication-preview.has-thumbnail{grid-template-columns:88px minmax(0,1fr);gap:14px}
    .publication-preview-image{min-height:124px}
    .publication-card-cover{min-height:220px;padding:20px}
}

/* =========================================================
   Search Results Page
   ========================================================= */
.search-page {
    background: #f4f7fb;
}

.search-hero {
    padding: 72px 0;
    background:
        radial-gradient(circle at 82% 18%, rgba(83, 145, 207, 0.28), transparent 24%),
        linear-gradient(135deg, #092b52 0%, #145a9c 100%);
    color: #fff;
}

.search-hero nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    color: #cadbef;
    font-size: 0.86rem;
}

.search-hero nav a {
    color: inherit;
}

.search-hero > .container > span {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f7bf3d;
    color: #17345a;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.search-hero h1 {
    max-width: 980px;
    margin: 18px 0 12px;
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    line-height: 1.12;
}

.search-hero h1 em {
    font-style: normal;
    color: #f7bf3d;
}

.search-hero p {
    max-width: 820px;
    margin: 0;
    color: #d7e5f5;
    font-size: 1.05rem;
    line-height: 1.75;
}

.search-content {
    padding-top: 56px;
    padding-bottom: 84px;
}

/* Panel Pencarian Lanjutan (referensi gambar 1) */
.search-discovery-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(24px, 4vw, 56px);
    margin: -36px auto 36px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid #cddbea;
    border-radius: 26px;
    background:
        radial-gradient(circle at 6% 8%, rgba(247, 191, 61, 0.2), transparent 27%),
        linear-gradient(135deg, #f9fbfe 0%, #eef4fc 100%);
    box-shadow: 0 18px 46px rgba(16, 44, 79, 0.09);
    position: relative;
    z-index: 5;
}

.search-discovery-intro {
    align-self: center;
}

.search-discovery-badge {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    background: #dfeaf9;
    color: #2360aa;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.search-discovery-intro h2 {
    margin: 16px 0 10px;
    color: #102d50;
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    line-height: 1.15;
}

.search-discovery-intro p {
    margin: 0;
    color: #667a94;
    font-size: 0.98rem;
    line-height: 1.7;
}

.search-discovery-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
}

.search-discovery-keyword-row {
    display: flex;
    gap: 12px;
}

.search-discovery-keyword-row input[type="search"] {
    flex: 1;
    min-height: 52px;
    padding: 0 20px;
    border: 1px solid #c8d7e8;
    border-radius: 14px;
    background: #fff;
    color: #123156;
    font-size: 1rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-discovery-keyword-row input[type="search"]:focus {
    border-color: #2b70c9;
    box-shadow: 0 0 0 4px rgba(43, 112, 201, 0.12);
}

.search-discovery-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    min-height: 52px;
    padding: 0 26px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #fbbd18 0%, #f7a800 100%);
    color: #17345a;
    font-size: 0.98rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(247, 168, 0, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.search-discovery-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(247, 168, 0, 0.38);
}

.search-discovery-filters-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.search-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-filter-group label {
    color: #536982;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.search-filter-group select {
    width: 100%;
    min-height: 44px;
    padding: 0 34px 0 14px;
    border: 1px solid #c8d7e8;
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536982' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 16px;
    appearance: none;
    color: #123156;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-filter-group select:focus {
    border-color: #2b70c9;
    box-shadow: 0 0 0 3px rgba(43, 112, 201, 0.12);
}

/* Type filter chips */
.search-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid #d7e2ee;
}

.search-type-chips a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid #cbd9e8;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #315576;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.18s ease;
}

.search-type-chips a:hover {
    border-color: #9fb7d0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 44, 79, 0.06);
}

.search-type-chips a svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.search-type-chips a small {
    display: grid;
    min-width: 26px;
    height: 26px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #e6eef8;
    color: #356594;
    font-size: 0.7rem;
    font-weight: 900;
}

.search-type-chips a.is-active {
    border-color: #145c9f;
    background: #145c9f;
    color: #fff;
}

.search-type-chips a.is-active svg {
    color: rgba(255, 255, 255, 0.8);
}

.search-type-chips a.is-active small {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Results heading */
.search-results-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.search-results-heading span {
    color: #efac17;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.search-results-heading h2 {
    margin: 5px 0 0;
    color: #102b4d;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

.search-results-heading p {
    margin: 0;
    color: #687992;
    font-weight: 700;
    white-space: nowrap;
}

/* Result cards */
.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-result-card {
    display: grid;
    grid-template-columns: clamp(160px, 18vw, 260px) minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid #d5e0ec;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(16, 44, 79, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(16, 44, 79, 0.1);
}

/* Result media */
.search-result-media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: auto;
    min-height: 180px;
}

.search-result-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.search-result-card:hover .search-result-image {
    transform: scale(1.04);
}

.search-result-type {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 1;
}

.search-result-type-berita {
    background: #f7bf3d;
    color: #17345a;
}

.search-result-type-fasilitas {
    background: #2670b6;
    color: #fff;
}

.search-result-type-publikasi {
    background: #0d8f7f;
    color: #fff;
}

/* Result body */
.search-result-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(18px, 3vw, 30px);
}

.search-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.search-result-badge {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.search-result-badge-berita {
    background: #fff5dd;
    color: #8a6a0a;
}

.search-result-badge-fasilitas {
    background: #dfeaf9;
    color: #1a5294;
}

.search-result-badge-publikasi {
    background: #d8f3ef;
    color: #0a6b5e;
}

.search-result-meta time {
    color: #8a9bb2;
    font-size: 0.82rem;
    font-weight: 600;
}

.search-result-title {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.4;
}

.search-result-title a {
    color: #102d50;
    text-decoration: none;
    transition: color 0.15s ease;
}

.search-result-title a:hover {
    color: #1b6eb5;
}

.search-result-excerpt {
    margin: 0;
    color: #5e7490;
    font-size: 0.92rem;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: #1764a5;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    transition: gap 0.15s ease;
}

.search-result-link:hover {
    gap: 10px;
}

/* Empty state */
.search-empty {
    padding: 72px 24px;
    border: 1px dashed #bfd0e3;
    border-radius: 22px;
    background: #fff;
    text-align: center;
}

.search-empty > span {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    place-items: center;
    border-radius: 18px;
    background: #e7f1fc;
    color: #145ea5;
}

.search-empty > span svg {
    width: 28px;
    height: 28px;
}

.search-empty h2 {
    margin: 0 0 8px;
    color: #102b4d;
    font-size: 1.5rem;
}

.search-empty p {
    margin: 0;
    color: #6c849f;
    line-height: 1.7;
}

/* Bagian Bawah: Data per halaman dan Pagination (referensi gambar 2) */
.search-bottom-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid #d9e4f0;
}

.search-perpage-bottom-form label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #536982;
    font-size: 0.9rem;
    font-weight: 700;
}

.search-perpage-bottom-form select {
    min-height: 38px;
    padding: 0 30px 0 14px;
    border: 1px solid #c8d7e8;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536982' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 14px;
    appearance: none;
    color: #123156;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    outline: none;
}

/* Pagination */
.search-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.search-page-btn,
.search-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d0deee;
    border-radius: 999px;
    background: #fff;
    color: #145c9f;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s ease;
}

.search-page-num {
    min-width: 40px;
    padding: 0 12px;
}

.search-page-btn:hover,
.search-page-num:hover {
    border-color: #2360aa;
    background: #f2f7fd;
    color: #0b3460;
}

.search-page-num.is-active {
    border-color: #145c9f;
    background: #145c9f;
    color: #fff;
    box-shadow: 0 6px 16px rgba(20, 92, 159, 0.28);
}

/* Responsive */
@media (max-width: 840px) {
    .search-discovery-panel {
        grid-template-columns: 1fr;
        margin-top: -24px;
        gap: 24px;
    }

    .search-discovery-filters-row {
        grid-template-columns: 1fr;
    }

    .search-result-card {
        grid-template-columns: 1fr;
    }

    .search-result-media {
        min-height: 200px;
        aspect-ratio: 16 / 9;
    }

    .search-results-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-type-chips {
        gap: 7px;
    }
}

@media (max-width: 480px) {
    .search-hero {
        padding: 52px 0;
    }

    .search-hero h1 {
        font-size: 1.7rem;
    }

    .search-discovery-keyword-row {
        flex-direction: column;
    }

    .search-discovery-btn {
        width: 100%;
    }

    .search-type-chips a {
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.8rem;
    }

    .search-pagination {
        gap: 4px;
    }

    .search-page-btn,
    .search-page-num {
        min-width: 38px;
        min-height: 38px;
        border-radius: 10px;
        font-size: 0.84rem;
    }
}