:root {
    --bg: #ffffff;
    --surface: #f5f8f7;
    --surface-2: #edf3f1;
    --text: #122a2c;
    --muted: #637778;
    --line: #dbe6e2;
    --primary: #006b7e;
    --primary-2: #188c88;
    --dark: #062f33;
    --darker: #03272b;
    --cyan: #61dceb;
    --yellow: #ffda14;
    --amber: #ffad0a;
    --lime: #b7de00;
    --shadow: 0 20px 60px rgba(3, 50, 54, .12);
    --radius: 28px;
    --container: 1180px
}

html[data-theme="dark"] {
    --bg: #071e21;
    --surface: #0c292d;
    --surface-2: #123438;
    --text: #edfafa;
    --muted: #abc2c1;
    --line: #23464a;
    --dark: #031719;
    --darker: #020f11;
    --shadow: 0 20px 60px rgba(0, 0, 0, .35)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
    line-height: 1.65;
    overflow-x: hidden
}

a {
    color: inherit;
    text-decoration: none
}

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

button,
input,
textarea,
select {
    font: inherit
}

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

.section {
    padding: 100px 0
}

.section-pad {
    padding: 70px 0 90px
}

.section-soft {
    background: var(--surface)
}

.section-dark {
    background: var(--dark);
    color: #fff
}

.skip-link {
    position: fixed;
    top: -60px;
    left: 20px;
    z-index: 999;
    background: #fff;
    padding: 12px 18px
}

.skip-link:focus {
    top: 20px
}

.topbar {
    background: var(--dark);
    color: #cde2df;
    font-size: 12px
}

.topbar-inner {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.topbar-links {
    display: flex;
    gap: 24px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: .3s
}

.site-header.scrolled {
    border-color: var(--line);
    box-shadow: 0 8px 30px rgba(2, 40, 44, .08)
}

.site-header.hide {
    transform: translateY(-100%)
}

.nav-shell {
    height: 84px;
    display: flex;
    align-items: center;
    gap: 32px
}

.brand {
    width: 270px;
    flex: none
}

.brand img {
    width: 100%;
    max-height: 54px;
    object-fit: contain;
    object-position: left center
}

html[data-theme="dark"] .brand {
    background: #fff;
    padding: 6px 10px;
    border-radius: 14px
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 700
}

.desktop-nav>a,
.nav-dropdown>a {
    padding: 30px 0;
    position: relative
}

.desktop-nav a.is-active:after,
.desktop-nav>a:hover:after,
.nav-dropdown>a:hover:after {
    content: "";
    height: 3px;
    background: var(--primary-2);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 19px;
    border-radius: 5px
}

.nav-dropdown {
    position: relative
}

.mega-menu {
    position: absolute;
    top: 72px;
    right: -250px;
    width: 720px;
    padding: 28px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .2s
}

.nav-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: none
}

.mega-menu>div {
    display: flex;
    flex-direction: column
}

.mega-menu a {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--muted)
}

.mega-menu a:hover {
    background: var(--surface);
    color: var(--primary)
}

.mega-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--primary);
    font-weight: 800;
    margin: 0 0 6px
}

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

.icon-button,
.mobile-toggle {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-weight: 800
}

.theme-toggle .moon {
    display: none
}

html[data-theme="dark"] .theme-toggle .sun {
    display: none
}

html[data-theme="dark"] .theme-toggle .moon {
    display: block
}

.language-switcher {
    position: relative
}

.language-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px;
    min-width: 140px;
    box-shadow: var(--shadow);
    display: none
}

.language-menu.open {
    display: block
}

.language-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px
}

.language-menu a:hover {
    background: var(--surface)
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary);
    color: #fff;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    border: 1px solid var(--primary);
    transition: .25s;
    cursor: pointer
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 107, 126, .25)
}

.button-small {
    padding: 10px 17px
}

.button-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line)
}

.button-light {
    background: #fff;
    color: var(--dark);
    border-color: #fff
}

.button-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .4)
}

.button.full {
    width: 100%
}

.mobile-toggle,
.mobile-panel {
    display: none
}

.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 15% 20%, rgba(97, 220, 235, .15), transparent 32%), linear-gradient(180deg, var(--bg), var(--surface))
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .25;
    background-image: repeating-radial-gradient(circle at 85% 20%, transparent 0 14px, rgba(0, 107, 126, .13) 15px 16px);
    mask-image: linear-gradient(90deg, transparent 40%, #000)
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 60px;
    min-height: 590px
}

.hero-copy h1 {
    font-size: clamp(43px, 5.2vw, 74px);
    line-height: 1.07;
    letter-spacing: -.045em;
    margin: 18px 0 24px;
    max-width: 720px
}

.hero-copy>p {
    font-size: 17px;
    color: var(--muted);
    max-width: 650px
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-2)
}

.eyebrow span {
    width: 30px;
    height: 2px;
    background: var(--lime)
}

.light-eyebrow {
    color: #d6eeee
}

.button-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 38px
}

.mini-emblem {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    padding: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1)
}

.hero-trust strong,
.hero-trust span {
    display: block
}

.hero-trust span {
    font-size: 12px;
    color: var(--muted)
}

.hero-visual {
    position: relative
}

.hero-card {
    position: relative;
    background: linear-gradient(145deg, #e8f2ed, #fff);
    border-radius: 42px 42px 16px 42px;
    min-height: 480px;
    padding: 40px 20px 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(0, 107, 126, .12)
}

html[data-theme="dark"] .hero-card {
    background: linear-gradient(145deg, #123b3c, #09292c)
}

.hero-card img {
    width: 110%;
    max-width: none;
    margin-left: -5%;
    filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .15))
}

.hero-tag {
    position: absolute;
    top: 22px;
    right: 22px;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 800
}

.hero-card-caption {
    position: absolute;
    left: 24px;
    bottom: 22px;
    background: rgba(3, 39, 43, .88);
    color: white;
    padding: 13px 17px;
    border-radius: 15px;
    backdrop-filter: blur(10px)
}

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

.hero-card-caption span {
    font-size: 12px;
    opacity: .75
}

.floating-card {
    position: absolute;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 18px;
    padding: 13px 18px
}

.floating-card strong,
.floating-card span {
    display: block
}

.floating-card strong {
    font-size: 24px;
    color: var(--primary)
}

.floating-card span {
    font-size: 11px;
    color: var(--muted)
}

.fc-one {
    left: -30px;
    top: 90px
}

.fc-two {
    right: -30px;
    bottom: 100px
}

.hero-orbit {
    position: absolute;
    border: 1px solid rgba(0, 107, 126, .17);
    border-radius: 50%
}

.orbit-one {
    width: 280px;
    height: 280px;
    right: -100px;
    top: 100px
}

.orbit-two {
    width: 420px;
    height: 420px;
    right: -160px;
    top: 30px
}

.stats-bar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 24px
}

.stats-bar div {
    padding: 8px 30px;
    border-right: 1px solid var(--line)
}

[dir="rtl"] .stats-bar div {
    border-right: 0;
    border-left: 1px solid var(--line)
}

.stats-bar div:last-child {
    border: 0
}

.stats-bar strong,
.stats-bar span {
    display: block
}

.stats-bar strong {
    font-size: 30px;
    color: var(--primary)
}

.stats-bar span {
    font-size: 12px;
    color: var(--muted)
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 46px
}

.section-head h2 {
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.1;
    letter-spacing: -.035em;
    margin: 12px 0 0
}

.section-head>p {
    max-width: 530px;
    color: var(--muted)
}

.section-head.light p {
    color: #bad0ce
}

.category-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.category-panel {
    position: relative;
    min-height: 520px;
    padding: 44px;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.category-formal {
    background: linear-gradient(145deg, #006b7e, #06464f);
    color: #fff
}

.category-nonformal {
    background: linear-gradient(145deg, #eff7df, #fff);
    border: 1px solid var(--line)
}

html[data-theme="dark"] .category-nonformal {
    background: linear-gradient(145deg, #173d34, #0f2c2d)
}

.category-panel:after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 70px solid rgba(255, 255, 255, .06);
    right: -120px;
    top: -120px
}

.category-number {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2em;
    opacity: .65
}

.category-kicker {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .15em;
    font-weight: 800;
    color: var(--lime)
}

.category-nonformal .category-kicker {
    color: var(--primary)
}

.category-panel h3 {
    font-size: 31px;
    line-height: 1.2;
    max-width: 480px;
    margin: 12px 0
}

.category-panel p {
    max-width: 520px;
    opacity: .82
}

.category-panel a {
    font-weight: 800
}

.unit-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px
}

.unit-pills span {
    font-size: 11px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px
}

.category-nonformal .unit-pills span {
    border-color: var(--line);
    background: var(--bg)
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.program-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px;
    background: var(--bg);
    position: relative;
    transition: .25s
}

.program-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
    border-color: rgba(0, 107, 126, .35)
}

.program-no {
    position: absolute;
    right: 26px;
    top: 20px;
    color: var(--line);
    font-size: 42px;
    font-weight: 800
}

.program-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--surface);
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 24px
}

.program-card h3 {
    font-size: 24px;
    margin: 26px 0 10px
}

.program-card p {
    color: var(--muted);
    min-height: 58px
}

.program-card a,
.text-link {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary)
}

.facilities-preview {
    overflow: hidden
}

.facility-marquee {
    display: flex;
    gap: 18px;
    overflow: auto;
    padding-bottom: 14px;
    scrollbar-width: thin
}

.facility-marquee article {
    flex: 0 0 280px;
    min-height: 270px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    padding: 28px;
    background: rgba(255, 255, 255, .04)
}

.facility-marquee article>span {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: var(--primary-2);
    display: grid;
    place-items: center;
    font-weight: 800
}

.facility-marquee h3 {
    font-size: 21px;
    margin: 28px 0 12px
}

.facility-marquee p {
    font-size: 13px;
    color: #b7cdcb
}

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

.news-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    transition: .25s
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow)
}

.news-image {
    display: block;
    aspect-ratio: 16/10;
    background: var(--surface);
    overflow: hidden
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s
}

.news-card:hover .news-image img {
    transform: scale(1.04)
}

.news-body {
    padding: 24px
}

.news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em
}

.news-meta span {
    color: var(--primary);
    font-weight: 800
}

.news-card h3,
.news-card h2 {
    font-size: 21px;
    line-height: 1.35;
    margin: 15px 0 10px
}

.news-card p {
    font-size: 13px;
    color: var(--muted)
}

.center {
    text-align: center;
    margin-top: 38px
}

.cta-section {
    padding: 0 0 100px
}

.cta-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(130deg, var(--primary), var(--primary-2));
    color: #fff;
    border-radius: 34px;
    padding: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px
}

.cta-card:after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border: 70px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    right: -160px;
    top: -170px
}

.cta-card h2 {
    font-size: clamp(32px, 4vw, 50px);
    max-width: 720px;
    line-height: 1.13;
    margin: 12px 0
}

.cta-card p {
    max-width: 680px;
    color: #d8eeee
}

.site-footer {

    position:relative;

    background:
    linear-gradient(
        135deg,
        #0b7778,
        #06454a
    );

    color:#e4f4f2;

    width:calc(100% - 60px);

    margin:0 auto;

    border-radius:32px 32px 0 0;

    padding:70px 0 25px;

    overflow:hidden;

}

.footer-pattern {
    position:absolute;
    inset:0;
    opacity:.08;
    background:
    radial-gradient(circle at 20% 20%, #61dceb 0, transparent 25%),
    radial-gradient(circle at 80% 80%, #61dceb 0, transparent 25%);
}

.footer-grid {

    position:relative;

    display:grid;

    grid-template-columns:
    1.5fr 1fr 1fr 1.1fr;

    gap:55px;

}

.footer-grid h3{

    color:#ffffff;

    font-size:15px;

    font-weight:900;

    letter-spacing:.12em;

    margin-bottom:22px;

    position:relative;

}


.footer-grid h3::after{

    content:"";

    display:block;

    width:35px;

    height:3px;

    background:#e8c400;

    margin-top:10px;

    border-radius:20px;

}

.footer-grid>div:not(.footer-brand){
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:13px;
}

.footer-grid a {
    color:#b9cfcd;
    transition:.2s;
}

.footer-grid a:hover {
    color:#61dceb;
    transform:translateX(3px);
}

.footer-logo-box{

    background:white;

    padding:18px 22px;

    width:max-content;

    border-radius:22px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

    margin-bottom:25px;

}


.footer-logo-box img{

    width:250px;

    display:block;

}

.footer-brand p{

    max-width:360px;

    color:#d5eeee;

    font-size:14px;

    line-height:1.8;

    letter-spacing:.02em;

}

.social-row{

    display:flex;

    gap:12px;

    margin-top:25px;

}


.social-row a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:17px;

    transition:.3s;

}


.social-row a:hover{

    background:#e8c400;

    color:#06383d;

    transform:translateY(-5px);

}

.map-card {
    margin-top:45px;
    position:relative;
}

.map-card iframe {
    width:100%;
    height:220px;
    border:0;
    border-radius:20px;
    filter:saturate(.8);
}

.footer-bottom {
    position:relative;
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:35px;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:#799694;
    font-size:11px;
}

.wa-float {
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:90;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25d366;
    color:white;
    display:grid;
    place-items:center;
    font-weight:900;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    transition:.25s;
}

.wa-float:hover {
    transform:scale(1.08);
}

.page-hero {
    background: linear-gradient(180deg, var(--surface), var(--bg));
    padding: 90px 0 80px;
    position: relative;
    overflow: hidden
}

.page-hero:after {
    content: "";
    position: absolute;
    right: -120px;
    top: -160px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    border: 70px solid rgba(0, 107, 126, .05)
}

.page-hero h1 {
    font-size: clamp(48px, 7vw, 86px);
    letter-spacing: -.05em;
    line-height: 1;
    margin: 20px 0
}

.page-hero p {
    font-size: 17px;
    color: var(--muted);
    max-width: 720px
}

.page-hero-visual>.container {
    display: grid;
    grid-template-columns: 1fr .8fr;
    align-items: center;
    gap: 50px
}

.page-hero-visual img {
    max-height: 330px;
    object-fit: contain
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 35px;
    flex-wrap: wrap
}

.filter-pill {
    padding: 10px 17px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 800
}

.filter-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary)
}

.filter-row input {
    margin-left: auto;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    border-radius: 999px;
    padding: 11px 18px;
    min-width: 240px
}

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

.institution-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px;
    background: var(--bg);
    min-height: 390px;
    display: flex;
    flex-direction: column;
    transition: .25s
}

.institution-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.institution-card-top {
    display: flex;
    justify-content: space-between
}

.institution-index {
    font-size: 28px;
    color: var(--line);
    font-weight: 800
}

.institution-type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--primary);
    font-weight: 800
}

.institution-mark {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--surface);
    padding: 7px;
    margin: 25px 0 15px
}

.institution-card h2 {
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 12px
}

.institution-card p {
    font-size: 13px;
    color: var(--muted)
}

.institution-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary)
}

.wa-mini {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center
}

.extra-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px
}

.extra-grid>div {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px
}

.extra-grid span {
    color: var(--primary)
}

.institution-hero {
    background: linear-gradient(130deg, var(--primary), #06454e);
    color: #fff;
    padding: 75px 0
}

.institution-hero-grid {
    display: grid;
    grid-template-columns: 1fr .9fr;
    align-items: center;
    gap: 60px
}

.institution-hero h1 {
    font-size: clamp(42px, 6vw, 74px);
    line-height: 1.08;
    letter-spacing: -.045em;
    margin: 18px 0
}

.institution-hero p {
    color: #d6e9e7;
    font-size: 17px
}

.institution-hero-image {
    position: relative;
    background: #eef4ef;
    border-radius: 30px;
    padding: 20px;
    overflow: hidden
}

.institution-hero-image img {
    height: 330px;
    width: 100%;
    object-fit: contain
}

.institution-hero-image span {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    background: rgba(3, 39, 43, .86);
    padding: 12px 15px;
    border-radius: 12px;
    font-size: 12px
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px
}

.detail-main {
    display: flex;
    flex-direction: column;
    gap: 22px
}

.content-card {
    border: 1px solid var(--line);
    background: var(--bg);
    border-radius: 24px;
    padding: 34px
}

.content-card h2 {
    font-size: 28px;
    margin: 8px 0 18px
}

.content-card p {
    color: var(--muted)
}

.content-label {
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 800
}

.leader-block {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 24px 0
}

.leader-block img {
    width: 92px;
    height: 92px;
    border-radius: 22px;
    object-fit: cover;
    background: var(--surface)
}

.leader-block h2 {
    margin: 0;
    font-size: 22px
}

.muted {
    color: var(--muted);
    font-size: 12px
}

.two-col-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.check-list {
    padding: 0;
    margin: 20px 0;
    list-style: none;
    display: grid;
    gap: 10px
}

.check-list li {
    position: relative;
    padding-left: 27px
}

.check-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 800
}

.achievement-list {
    display: grid;
    gap: 10px;
    margin-top: 20px
}

.achievement-list div {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border-radius: 14px
}

.achievement-list span {
    color: var(--amber)
}

.sidebar-card {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 24px;
    padding: 28px
}

.sticky {
    position: sticky;
    top: 120px
}

.side-logo {
    width: 72px;
    margin-bottom: 20px
}

.sidebar-card p {
    font-size: 13px;
    color: var(--muted)
}

.sidebar-card hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 24px 0
}

.sidebar-card h4 {
    font-size: 13px
}

.side-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px
}

.facility-grid-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.facility-card-large {
    border: 1px solid var(--line);
    border-radius: 25px;
    overflow: hidden;
    background: var(--bg)
}

.facility-photo {
    position: relative;
    background: var(--surface);
    height: 260px
}

.facility-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.facility-photo span {
    position: absolute;
    top: 18px;
    left: 18px;
    background: var(--primary);
    color: #fff;
    padding: 8px 11px;
    border-radius: 10px;
    font-weight: 800
}

.facility-card-large>div:last-child {
    padding: 28px
}

.facility-card-large h2 {
    margin: 0;
    font-size: 24px
}

.facility-card-large p {
    color: var(--muted);
    font-size: 14px
}

.facility-card-large a {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary)
}

.profile-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 70px
}

.profile-nav {
    position: sticky;
    top: 120px;
    height: max-content;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line)
}

.profile-nav a {
    padding: 12px 18px;
    color: var(--muted);
    font-size: 13px
}

.profile-nav a:hover {
    color: var(--primary);
    border-left: 2px solid var(--primary)
}

.profile-content {
    display: flex;
    flex-direction: column;
    gap: 70px
}

.profile-section>span {
    font-size: 56px;
    color: var(--line);
    font-weight: 800
}

.profile-section h2 {
    font-size: 38px;
    margin: 0 0 20px
}

.profile-section>p {
    color: var(--muted);
    font-size: 16px
}

.vision-box {
    background: var(--dark);
    color: #fff;
    padding: 30px;
    border-radius: 22px;
    margin-bottom: 20px
}

.vision-box p {
    margin-bottom: 0;
    color: #cbe0dd
}

.mission-grid,
.org-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.mission-grid div,
.org-grid div,
.legal-list div {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px
}

.org-grid strong,
.org-grid small,
.legal-list strong,
.legal-list span {
    display: block
}

.org-grid small,
.legal-list span {
    color: var(--muted);
    margin-top: 6px
}

.legal-list {
    display: grid;
    gap: 12px
}

.program-detail-list {
    background: var(--surface)
}

.program-detail {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 65px;
    align-items: center;
    padding: 75px 0;
    border-bottom: 1px solid var(--line)
}

.program-detail:nth-child(even) .program-visual {
    order: 2
}

.program-visual {
    position: relative;
    background: linear-gradient(145deg, var(--primary), var(--primary-2));
    border-radius: 32px;
    min-height: 430px;
    display: grid;
    place-items: center;
    overflow: hidden
}

.program-visual>span {
    position: absolute;
    top: 20px;
    left: 25px;
    font-size: 70px;
    color: rgba(255, 255, 255, .15);
    font-weight: 800
}

.program-visual img {
    width: 80%;
    max-height: 340px
}

.program-copy h2 {
    font-size: 45px;
    line-height: 1.15;
    margin: 14px 0
}

.program-copy h3 {
    font-size: 19px;
    color: var(--primary)
}

.program-copy p {
    color: var(--muted)
}

.article-header {
    background: linear-gradient(180deg, var(--surface), var(--bg));
    padding: 65px 0 100px
}

.article-header-inner {
    max-width: 900px
}

.back-link {
    display: inline-block;
    font-size: 12px;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 38px
}

.article-header h1 {
    font-size: clamp(40px, 6vw, 70px);
    line-height: 1.08;
    letter-spacing: -.04em;
    margin: 24px 0
}

.article-header p {
    font-size: 18px;
    color: var(--muted);
    max-width: 760px
}

.article-body-wrap {
    margin-top: -55px;
    position: relative
}

.article-cover {
    height: min(55vw, 600px);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--surface)
}

.article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.article-body {
    display: grid;
    grid-template-columns: minmax(0, 760px) 220px;
    justify-content: center;
    gap: 70px;
    padding: 65px 0 100px
}

.article-content {
    font-size: 17px;
    line-height: 1.9
}

.share-card {
    position: sticky;
    top: 120px;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px
}

.share-card button,
.share-card a {
    padding: 9px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    border-radius: 10px;
    text-align: center
}

.empty-state {
    padding: 50px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 20px
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: .7s ease
}

.reveal.visible {
    opacity: 1;
    transform: none
}

.delay-1 {
    transition-delay: .12s
}

.delay-2 {
    transition-delay: .22s
}

@media(max-width:1050px) {

    .desktop-nav,
    .desktop-cta {
        display: none
    }

    .mobile-toggle {
        display: grid
    }

    .nav-shell {
        height: 76px
    }

    .brand {
        width: 230px
    }

    .mobile-panel {
        display: block;
        max-height: 0;
        overflow: hidden;
        background: var(--bg);
        border-top: 1px solid var(--line);
        transition: .3s
    }

    .mobile-panel.open {
        max-height: 650px
    }

    .mobile-panel-inner {
        padding: 18px 0 26px;
        display: flex;
        flex-direction: column
    }

    .mobile-panel a,
    .mobile-panel summary {
        padding: 11px 0;
        font-weight: 700;
        cursor: pointer
    }

    .mobile-panel details a {
        padding-left: 18px;
        display: block;
        color: var(--muted)
    }

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

    .hero-copy {
        padding-top: 25px
    }

    .hero-visual {
        max-width: 720px;
        margin: auto;
        width: 100%
    }

    .stats-bar {
        margin-top: 40px
    }

    .category-showcase,
    .institution-hero-grid {
        grid-template-columns: 1fr
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr
    }

    .footer-contact {
        grid-column: 1/-1
    }

    .institution-grid {
        grid-template-columns: 1fr 1fr
    }

    .extra-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .profile-layout {
        grid-template-columns: 1fr
    }

    .profile-nav {
        position: static;
        flex-direction: row;
        overflow: auto;
        border: 0
    }

    .profile-nav a {
        white-space: nowrap;
        border-bottom: 1px solid var(--line)
    }

    .program-detail {
        gap: 35px
    }

    .article-body {
        grid-template-columns: minmax(0, 760px)
    }

    .article-body aside {
        display: none
    }
}

@media(max-width:760px) {
    .container {
        width: min(calc(100% - 28px), var(--container))
    }

    .topbar {
        display: none
    }

    .section {
        padding: 70px 0
    }

    .section-pad {
        padding: 35px 0 70px
    }

    .brand {
        width: 185px
    }

    .nav-shell {
        gap: 8px
    }

    .nav-actions {
        margin-left: auto
    }

    .hero-grid {
        min-height: auto
    }

    .hero-copy h1 {
        font-size: 43px
    }

    .hero-copy>p {
        font-size: 15px
    }

    .hero-card {
        min-height: 340px;
        padding-top: 40px
    }

    .hero-card img {
        width: 125%;
        margin-left: -12.5%
    }

    .hero-card-caption {
        left: 12px;
        right: 12px
    }

    .floating-card {
        display: none
    }

    .stats-bar {
        grid-template-columns: 1fr 1fr;
        padding: 12px
    }

    .stats-bar div {
        padding: 16px;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .stats-bar div:nth-child(odd) {
        border-right: 1px solid var(--line)
    }

    .stats-bar div:nth-last-child(-n+2) {
        border-bottom: 0
    }

    .section-head {
        display: block;
        margin-bottom: 30px
    }

    .section-head h2 {
        font-size: 37px
    }

    .section-head>p {
        font-size: 14px
    }

    .category-panel {
        padding: 28px;
        min-height: 450px
    }

    .category-panel h3 {
        font-size: 27px
    }

    .program-grid,
    .news-grid,
    .institution-grid,
    .facility-grid-page {
        grid-template-columns: 1fr
    }

    .cta-card {
        padding: 35px 25px;
        display: block
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px
    }

    .footer-brand,
    .footer-contact {
        grid-column: 1/-1
    }

    .footer-bottom {
        display: block
    }

    .page-hero {
        padding: 65px 0
    }

    .page-hero h1 {
        font-size: 48px
    }

    .page-hero-visual>.container {
        grid-template-columns: 1fr
    }

    .page-hero-visual img {
        margin-top: 25px
    }

    .filter-row input {
        width: 100%;
        margin: 10px 0 0
    }

    .extra-grid {
        grid-template-columns: 1fr 1fr
    }

    .detail-grid {
        grid-template-columns: 1fr
    }

    .two-col-cards,
    .mission-grid,
    .org-grid {
        grid-template-columns: 1fr
    }

    .detail-sidebar {
        order: -1
    }

    .sticky {
        position: static
    }

    .institution-hero {
        padding: 55px 0
    }

    .institution-hero h1 {
        font-size: 43px
    }

    .institution-hero-image img {
        height: 230px
    }

    .program-detail {
        grid-template-columns: 1fr;
        padding: 55px 0
    }

    .program-detail:nth-child(even) .program-visual {
        order: 0
    }

    .program-visual {
        min-height: 300px
    }

    .program-copy h2 {
        font-size: 37px
    }

    .article-header {
        padding: 50px 0 80px
    }

    .article-header h1 {
        font-size: 40px
    }

    .article-body {
        padding-top: 40px
    }

    .article-cover {
        border-radius: 18px
    }

    .wa-float {
        width: 50px;
        height: 50px;
        right: 14px;
        bottom: 14px
    }
}



/* =========================================================
   HEADER PREMIUM YPP DARUL MA'ARIF
   ========================================================= */

.header-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =========================================================
   HEADER MENGAMBANG DENGAN SOFT BACKDROP
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 300;

    padding: 12px 0 14px;

    background: transparent !important;

    border: 0;
    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transform: none;

    /*
     * Isolation diperlukan agar lapisan halo
     * tetap berada di belakang kartu header.
     */
    isolation: isolate;

    transition:
        padding 0.25s ease;
}

/*
 * Halo hanya berada di sekitar kartu,
 * bukan menjadi background penuh satu layar.
 */
.site-header::before {
    content: "";

    position: absolute;

    top: 3px;
    bottom: 3px;

    left: 50%;

    width: min(calc(100% - 18px), 1825px);

    transform: translateX(-50%);

    z-index: -1;

    pointer-events: none;

    border-radius: 28px;

    /*
     * Warna mengikuti mode terang dan gelap.
     */
    background: var(--bg);

    /*
     * Blur membuat lapisan tidak tampak seperti balok.
     */
    filter: blur(18px);

    opacity: 0;

    transition:
        opacity 0.25s ease,
        filter 0.25s ease;
}

/*
 * Halo baru aktif setelah halaman mulai digulir.
 */
.site-header.scrolled {
    padding: 7px 0 9px;

    background: transparent !important;

    border: 0;
    box-shadow: none;
}

.site-header.scrolled::before {
    opacity: 0.98;
}

/*
 * Header tetap terlihat dan tidak bergeser ke atas.
 */
.site-header.hide {
    transform: none;
}

/*
 * Kartu selalu berada di atas lapisan halo.
 */
.site-header .header-frame {
    position: relative;
    z-index: 1;
}

.header-frame {
    overflow: visible;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0, 30, 38, 0.22);
}

/* Topbar */

/* =========================================================
   TOPBAR HEADER ATAS
   Warna hijau-kuning elegan selaras dengan tombol
   ========================================================= */

.topbar {
    display: block;

    color: #184834;
    font-size: 11px;

    border-radius: 18px 18px 0 0;

    background:
        linear-gradient(90deg,
            #e5f3ec 0%,
            #edf6dc 28%,
            #f4efc9 58%,
            #f7e5ba 82%,
            #f6dcc0 100%);

    box-shadow:
        inset 0 -1px 0 rgba(18, 85, 56, 0.08);
}

.topbar-inner {
    min-height: 33px;
    height: auto;
    padding: 4px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.header-email {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #1a4f3a;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.header-email svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: currentColor;
}

.header-email span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-email:hover {
    color: #0d6f43;
}

/* =========================================================
   LOGO MEDIA SOSIAL FULL COLOR DALAM KONDISI NORMAL
   Tempel paling bawah style.css
   ========================================================= */

.site-header .header-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Tampilan dasar semua ikon.
 */
.site-header .header-socials a {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    flex: none;

    color: #ffffff !important;

    border: 0;
    border-radius: 9px;

    box-shadow:
        0 4px 10px rgba(20, 55, 40, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transform: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

/*
 * Ikon selalu putih karena background sudah
 * menggunakan warna asli media sosial.
 */
.site-header .header-socials svg {
    width: 12px;
    height: 12px;

    fill: #ffffff !important;

    transition: transform 0.2s ease;
}

/* =========================================================
   FACEBOOK
   ========================================================= */

.site-header .header-socials a[aria-label="Facebook"] {
    background: #1877f2 !important;

    /*
     * Facebook dibuat berbentuk lingkaran.
     */
    border-radius: 50%;
}

/* =========================================================
   INSTAGRAM
   ========================================================= */

.site-header .header-socials a[aria-label="Instagram"] {
    /*
     * Gradasi khas Instagram langsung tampil
     * meskipun belum di-hover.
     */
    background:
        radial-gradient(circle at 30% 107%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 42%,
            #d6249f 62%,
            #285aeb 90%) !important;

    border-radius: 9px;
}

/* =========================================================
   YOUTUBE
   ========================================================= */

.site-header .header-socials a[aria-label="YouTube"] {
    width: 25px;

    background: #ff0000 !important;

    /*
     * Bentuk YouTube dibuat sedikit memanjang.
     */
    border-radius: 8px;
}

/* =========================================================
   WHATSAPP
   ========================================================= */

.site-header .header-socials a[aria-label="WhatsApp"] {
    background: #25d366 !important;

    border-radius: 50%;
}

/* =========================================================
   HOVER
   Warna tidak berubah, hanya diberi animasi ringan
   ========================================================= */

.site-header .header-socials a:hover {
    color: #ffffff !important;

    transform:
        translateY(-2px) scale(1.08);

    filter: saturate(1.08);

    box-shadow:
        0 8px 16px rgba(20, 55, 40, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.site-header .header-socials a:hover svg {
    fill: #ffffff !important;
    transform: scale(1.04);
}

/* =========================================================
   MODE GELAP
   Tetap mempertahankan warna asli media sosial
   ========================================================= */

html[data-theme="dark"] .site-header .header-socials a[aria-label="Facebook"] {
    color: #ffffff !important;
    background: #1877f2 !important;
}

html[data-theme="dark"] .site-header .header-socials a[aria-label="Instagram"] {
    color: #ffffff !important;

    background:
        radial-gradient(circle at 30% 107%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 42%,
            #d6249f 62%,
            #285aeb 90%) !important;
}

html[data-theme="dark"] .site-header .header-socials a[aria-label="YouTube"] {
    color: #ffffff !important;
    background: #ff0000 !important;
}

html[data-theme="dark"] .site-header .header-socials a[aria-label="WhatsApp"] {
    color: #ffffff !important;
    background: #25d366 !important;
}

/* =========================================================
   RESPONSIVE HP
   ========================================================= */

@media (max-width: 760px) {

    .site-header .header-socials {
        gap: 3px;
    }

    .site-header .header-socials a {
        width: 17px;
        height: 17px;

        border-radius: 8px;
    }

    .site-header .header-socials a[aria-label="Facebook"],
    .site-header .header-socials a[aria-label="WhatsApp"] {
        border-radius: 50%;
    }

    .site-header .header-socials a[aria-label="YouTube"] {
        width: 23px;
        border-radius: 7px;
    }

    .site-header .header-socials svg {
        width: 10px;
        height: 10px;
    }
}

/* =========================================================
   TOPBAR MODE GELAP
   ========================================================= */

html[data-theme="dark"] .topbar {
    color: #eef8f1;

    background:
        linear-gradient(90deg,
            #14372a 0%,
            #1c4b35 28%,
            #3f4c20 60%,
            #5a4a1b 82%,
            #4e3520 100%);

    box-shadow:
        inset 0 -1px 0 rgba(255, 218, 20, 0.10);
}

html[data-theme="dark"] .header-email {
    color: #eef8f1;
}

html[data-theme="dark"] .header-email:hover {
    color: #ffdd4a;
}

html[data-theme="dark"] .header-socials a {
    color: #d4f0db;
}

html[data-theme="dark"] .header-socials a:hover {
    color: #153622;

    background:
        linear-gradient(145deg,
            #ffd21b,
            #ffb800);

    box-shadow:
        0 6px 14px rgba(255, 190, 0, 0.24);
}

/* Navigasi putih */

.nav-shell {
    height: 78px;
    padding: 0 16px;

    display: flex;
    align-items: center;
    gap: 18px;

    background: var(--bg);
    border-radius: 0 0 18px 18px;
}

.brand {
    width: auto;
    min-width: 235px;
    flex: none;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 0;
}

.brand img {
    width: auto;
    object-fit: contain;
    object-position: center;
}

.brand .brand-logo {
    width: 52px;
    height: 52px;
    max-height: none;
    flex: none;
}

.brand .brand-wordmark {
    width: 172px;
    max-width: 172px;
    height: 44px;
    max-height: 44px;
    object-position: left center;
}

html[data-theme="dark"] .brand {
    padding: 0;
    background: transparent;
}

/* Menu desktop */

/* =========================================================
   MENU NAVIGASI DESKTOP MODEL PILL
   ========================================================= */

.site-header .desktop-nav {
    /*
     * Mengisi ruang di antara logo dan tombol kanan,
     * kemudian semua menu diletakkan di tengah.
     */
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-inline: 18px;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;
}

/*
 * Menghilangkan garis aktif model lama.
 */
.site-header .desktop-nav a::after {
    display: none !important;
}

/*
 * Tampilan dasar setiap tombol navigasi.
 */
.site-header .desktop-nav .nav-pill {
    min-height: 52px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    position: relative;

    color: #465367;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 999px;

    line-height: 1;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

/*
 * Ikon menu.
 */
.site-header .desktop-nav .nav-pill-icon {
    width: 22px;
    height: 22px;

    flex: none;

    fill: #138557;

    transition:
        fill 0.22s ease,
        transform 0.22s ease;
}

/*
 * Hover seperti tombol Profil pada gambar contoh.
 */
.site-header .desktop-nav .nav-pill:hover,
.site-header .desktop-nav .nav-pill:focus-visible {
    color: #128553;

    background: #eaf5f0;

    border-color: #e1f0e9;

    transform: translateY(-1px);
}

/*
 * Ikon sedikit membesar saat disentuh mouse.
 */
.site-header .desktop-nav .nav-pill:hover .nav-pill-icon,
.site-header .desktop-nav .nav-pill:focus-visible .nav-pill-icon {
    fill: #0d7d4c;
    transform: scale(1.06);
}

/*
 * Menu halaman yang sedang aktif.
 */
.site-header .desktop-nav .nav-pill.is-active {
    color: #ffffff;

    background:
        linear-gradient(135deg,
            #16804f 0%,
            #08683f 100%);

    border-color: #0e7547;

    box-shadow:
        0 12px 25px rgba(8, 104, 63, 0.25);

    transform: none;
}

/*
 * Ikon halaman aktif menjadi kuning.
 */
.site-header .desktop-nav .nav-pill.is-active .nav-pill-icon {
    fill: #ffd51b;
    transform: none;
}

/*
 * Garis aksen kuning-hijau di bawah tombol aktif.
 */
.site-header .desktop-nav .nav-pill.is-active::before {
    content: "";

    position: absolute;

    left: 24%;
    right: 24%;
    bottom: -7px;

    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            #15915d 0%,
            #15915d 55%,
            #ffd51b 55%,
            #ffd51b 100%);
}

/*
 * Dropdown lembaga.
 */
.site-header .desktop-nav .nav-dropdown {
    position: relative;

    display: flex;
    align-items: center;
}

/*
 * Panah dropdown.
 */
.site-header .desktop-nav .nav-arrow {
    margin-top: -3px;

    color: currentColor;

    font-size: 14px;
    line-height: 1;
}

/*
 * Posisi dropdown mengikuti tombol model baru.
 */
.site-header .desktop-nav .mega-menu {
    top: calc(100% + 12px);
}

/*
 * Jembatan transparan agar dropdown tidak tertutup
 * ketika mouse bergerak dari tombol ke mega menu.
 */
.site-header .desktop-nav .mega-menu::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: -14px;

    height: 14px;
}

/* =========================================================
   PENYESUAIAN LAPTOP
   ========================================================= */

@media (max-width: 1550px) {

    .site-header .desktop-nav {
        gap: 6px;
        margin-inline: 10px;

        font-size: 12px;
    }

    .site-header .desktop-nav .nav-pill {
        min-height: 46px;

        padding-inline: 11px;

        gap: 6px;
    }

    .site-header .desktop-nav .nav-pill-icon {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 1320px) {

    .site-header .desktop-nav {
        gap: 3px;
        margin-inline: 6px;

        font-size: 11px;
    }

    .site-header .desktop-nav .nav-pill {
        min-height: 43px;

        padding-inline: 8px;
    }

    .site-header .desktop-nav .nav-pill-icon {
        width: 16px;
        height: 16px;
    }
}

/* =========================================================
   MENU NAVIGASI MODE GELAP
   ========================================================= */

html[data-theme="dark"] .site-header .desktop-nav .nav-pill {
    color: #dcebea;
}

html[data-theme="dark"] .site-header .desktop-nav .nav-pill:hover,
html[data-theme="dark"] .site-header .desktop-nav .nav-pill:focus-visible {
    color: #72e0ad;

    background: rgba(26, 137, 88, 0.17);

    border-color: rgba(82, 196, 139, 0.20);
}

html[data-theme="dark"] .site-header .desktop-nav .nav-pill-icon {
    fill: #61c994;
}

html[data-theme="dark"] .site-header .desktop-nav .nav-pill.is-active {
    color: #ffffff;

    background:
        linear-gradient(135deg,
            #168652,
            #075f3a);

    border-color: #1c9660;
}

html[data-theme="dark"] .site-header .desktop-nav .nav-pill.is-active .nav-pill-icon {
    fill: #ffda14;
}

/* Dropdown lembaga */

.mega-menu {
    top: 69px;
    right: auto;
    inset-inline-end: -235px;

    width: min(720px, calc(100vw - 40px));
    padding: 25px;

    border: 1px solid var(--line);
    border-radius: 18px;

    background: var(--bg);
    box-shadow: 0 24px 65px rgba(2, 42, 48, 0.18);
}

/* Tombol kanan */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-inline-start: 2px;
}

.icon-button,
.mobile-toggle {
    width: 40px;
    height: 40px;
    flex: none;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--surface);
    color: var(--text);

    box-shadow: none;
    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.icon-button:hover,
.mobile-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* Pilihan bahasa */

.language-switcher {
    position: relative;
}

.language-button {
    width: auto;
    min-width: 68px;
    padding: 0 9px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    font-size: 11px;
    letter-spacing: 0.05em;
}

.action-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.language-chevron {
    margin-top: -3px;
}

.language-menu {
    position: absolute;
    top: 48px;
    right: auto;
    inset-inline-end: 0;
    z-index: 400;

    min-width: 166px;
    padding: 8px;

    display: none;

    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.language-menu.open {
    display: block;
}

.language-menu a {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13px;
}

.language-menu a:hover,
.language-menu a.active {
    color: var(--primary);
    background: var(--surface);
}

.language-menu a span {
    width: 29px;
    height: 25px;

    display: grid;
    place-items: center;

    color: var(--primary);
    background: var(--surface);
    border-radius: 7px;

    font-size: 10px;
    font-weight: 900;
}

/* Mode gelap */

.theme-toggle .moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle .sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .moon {
    display: block;
}

/* Tombol PSB */

.psb-button {
    min-height: 42px;
    padding: 0 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #15333a;
    border-radius: 12px;

    background:
        linear-gradient(135deg,
            #ffb000,
            #ffda14);

    box-shadow: 0 9px 20px rgba(255, 174, 0, 0.22);

    font-size: 12px;
    font-weight: 900;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.psb-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 27px rgba(255, 174, 0, 0.32);
}

/* Tombol garis tiga */

.mobile-toggle {
    display: none;
    padding: 9px;
}

.mobile-toggle span {
    width: 20px;
    height: 2px;
    display: block;
    margin: 2.5px auto;

    background: currentColor;
    border-radius: 4px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-panel {
    display: none;
}

/* Header mode gelap */

html[data-theme="dark"] .topbar {
    color: #e9f9f7;

    background:
        linear-gradient(90deg,
            #123a3e,
            #173f3b 50%,
            #403b1e 100%);
}

html[data-theme="dark"] .header-email {
    color: #e9f9f7;
}

html[data-theme="dark"] .header-socials a {
    color: #c4efea;
}

/* Tablet dan menu mobile */

@media (max-width: 1120px) {

    .desktop-nav,
    .desktop-cta {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .nav-shell {
        height: 70px;
    }

    .nav-actions {
        margin-inline-start: auto;
    }

    .brand {
        min-width: 0;
    }

    .mobile-panel {
        display: block;
        max-height: 0;
        overflow: hidden;

        background: var(--bg);
        border-top: 1px solid var(--line);
        border-radius: 0 0 18px 18px;

        transition: max-height 0.35s ease;
    }

    .mobile-panel.open {
        max-height: min(72vh, 680px);
        overflow-y: auto;
    }

    .mobile-panel-inner {
        padding: 12px 18px 20px;

        display: flex;
        flex-direction: column;
    }

    .mobile-panel-inner>a,
    .mobile-panel summary {
        padding: 12px 3px;

        color: var(--text);
        border-bottom: 1px solid var(--line);

        font-weight: 800;
        cursor: pointer;
        list-style: none;
    }

    .mobile-panel summary::-webkit-details-marker {
        display: none;
    }

    .mobile-panel summary::after {
        content: "+";
        float: inline-end;

        color: var(--primary);
        font-size: 18px;
    }

    .mobile-panel details[open] summary::after {
        content: "−";
    }

    .mobile-panel details a {
        display: block;
        padding: 9px 13px;

        color: var(--muted);
        font-size: 13px;
    }

    .mobile-panel details a:hover {
        color: var(--primary);
    }

    .mobile-panel .mobile-psb {
        margin-top: 14px;
        padding: 12px 16px;

        color: #15333a;
        text-align: center;

        border: 0;
        border-radius: 12px;

        background:
            linear-gradient(135deg,
                #ffb000,
                #ffda14);
    }
}

/* Tampilan HP */

@media (max-width: 760px) {

    .site-header {
        padding: 7px 0 9px;
        background: transparent !important;
    }

    .site-header.scrolled {
        padding: 5px 0 7px;
        background: transparent !important;
    }

    /*
     * Halo pada HP dibuat lebih kecil agar
     * tidak terlihat seperti background penuh.
     */
    .site-header::before {
        top: 2px;
        bottom: 2px;

        width: calc(100% - 6px);

        border-radius: 20px;

        filter: blur(12px);
    }

    .site-header.scrolled::before {
        opacity: 0.98;
    }

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

    /* Topbar tetap terlihat pada HP */
    .topbar {
        display: block;
    }

    .topbar-inner {
        min-height: 31px;
        padding: 3px 10px;
        gap: 8px;
    }

    .header-email {
        max-width: calc(100% - 122px);
        gap: 5px;
        font-size: 10px;
    }

    .header-email svg {
        width: 13px;
        height: 13px;
    }

    .header-socials {
        gap: 3px;
    }

    .header-socials a {
        width: 25px;
        height: 25px;
    }

    .header-socials svg {
        width: 13px;
        height: 13px;
    }

    .nav-shell {
        height: 62px;
        padding: 0 9px;
        gap: 6px;
    }

    .brand {
        min-width: 0;
        gap: 0;
    }

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

    /* Tulisan Arab dan nama yayasan disembunyikan pada HP */
    .brand .brand-wordmark {
        display: none;
    }

    .nav-actions {
        gap: 5px;
    }

    .icon-button,
    .mobile-toggle {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .language-button {
        width: 52px;
        min-width: 52px;
        padding: 0 6px;
        gap: 3px;
    }

    .language-button .action-icon {
        display: none;
    }

    .language-menu {
        top: 45px;
        min-width: 155px;
    }

    .mobile-toggle {
        padding: 8px;
    }

    .mobile-panel-inner {
        padding-inline: 14px;
    }
}

@media (max-width: 380px) {

    .header-email {
        max-width: calc(100% - 108px);
    }

    .header-socials a {
        width: 22px;
        height: 22px;
    }

    .nav-actions {
        gap: 3px;
    }

    .icon-button,
    .mobile-toggle {
        width: 36px;
        height: 36px;
    }

    .language-button {
        width: 48px;
        min-width: 48px;
    }
}

/* =========================================================
   FINAL HEADER YPP DARUL MA'ARIF
   Kartu mengambang dan isi halaman tidak tembus saat scroll
   ========================================================= */

/* =========================================================
   HEADER UTAMA
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 300;

    padding: 12px 0 14px;

    /*
     * Ketika masih di posisi paling atas,
     * background luar kartu tetap transparan.
     */
    background: transparent !important;

    border: 0;
    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transform: none;

    transition:
        padding 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

/*
 * Setelah halaman digulir, bagian belakang header menjadi
 * solid sehingga konten halaman tidak terlihat di belakangnya.
 */
.site-header.scrolled {
    padding: 7px 0 9px;

    background: var(--bg) !important;

    border: 0;

    box-shadow:
        0 8px 25px rgba(0, 38, 45, 0.10);
}

/*
 * Header tidak menghilang ketika halaman digulir.
 */
.site-header.hide {
    transform: none;
}

/* Mode gelap ketika header telah di-scroll */

html[data-theme="dark"] .site-header.scrolled {
    background: var(--bg) !important;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   KARTU HEADER
   ========================================================= */

.site-header .header-frame {
    width: min(calc(100% - 40px), 1800px);
    max-width: 1800px;

    margin-inline: auto;

    overflow: visible;

    border-radius: 18px;

    box-shadow:
        0 18px 45px rgba(0, 30, 38, 0.18),
        0 4px 12px rgba(0, 30, 38, 0.08);
}

/*
 * Topbar dan navigasi membentuk satu kartu utuh.
 */
.site-header .topbar {
    border-radius: 18px 18px 0 0;
}

.site-header .nav-shell {
    height: 110px;
    min-height: 110px;

    padding-inline: 20px;

    display: flex;
    align-items: center;

    gap: 16px;

    border-radius: 0 0 18px 18px;
}

/* =========================================================
   LOGO DAN TULISAN YAYASAN DESKTOP
   ========================================================= */

.site-header .brand {
    width: auto;

    /*
     * Lebar diperbesar agar logo dan wordmark 700px
     * tidak bertabrakan atau keluar dari area brand.
     */
    min-width: 800px;
    max-width: 800px;

    height: 110px;

    display: flex;
    align-items: center;

    /*
     * Jarak dasar antara logo dan tulisan.
     */
    gap: 10px;

    padding: 0;

    flex: none;
    overflow: visible;

    border-radius: 16px;

    transition:
        background-color 0.25s ease,
        padding 0.25s ease,
        box-shadow 0.25s ease;
}

/* Logo utama */

.site-header .brand .brand-logo {
    width: 65px;
    height: 65px;

    max-width: none;
    max-height: none;

    flex: none;

    object-fit: contain;
    object-position: center;
}

/* Gambar tulisan Arab dan nama yayasan */

.site-header .brand .brand-wordmark {
    display: block !important;

    width: 700px;
    max-width: 700px;

    height: 105px;
    max-height: 105px;

    flex: none;

    object-fit: contain;
    object-position: left center;

    /*
     * Tidak lagi memakai margin negatif karena membuat
     * gambar tulisan berbenturan dengan logo.
     */
    margin: 0;

    /*
     * Menggeser tulisan sedikit ke kanan.
     * Perbesar nilainya jika ingin lebih jauh.
     */
    transform: translateX(8px);

    padding: 0;
}

/* =========================================================
   BACKGROUND PUTIH KHUSUS WORDMARK PADA MODE GELAP
   ========================================================= */

/*
 * Area brand tetap transparan.
 */
.site-header .brand {
    position: relative;
    isolation: isolate;
}

/*
 * Logo dan tulisan tetap berada di lapisan teratas.
 */
.site-header .brand .brand-logo,
.site-header .brand .brand-wordmark {
    position: relative;
    z-index: 2;
}

/* =========================================================
   EFEK PUTIH KHUSUS TULISAN PADA MODE GELAP
   Tidak menghasilkan kotak putih berlebihan
   ========================================================= */

/*
 * Area brand tetap transparan.
 */
.site-header .brand {
    position: relative;
    isolation: isolate;
}

/*
 * Logo dan wordmark tetap berada di lapisan teratas.
 */
.site-header .brand .brand-logo,
.site-header .brand .brand-wordmark {
    position: relative;
    z-index: 2;
}

/* =========================================================
   MODE GELAP
   ========================================================= */

/*
 * Seluruh area brand tetap transparan.
 */
html[data-theme="dark"] .site-header .brand {
    padding: 0;

    background: transparent;
    border: 0;
    box-shadow: none;
}

/*
 * Logo tidak diberi background atau efek putih.
 */
html[data-theme="dark"] .site-header .brand .brand-logo {
    padding: 0;
    margin: 0;

    background: transparent;
    border: 0;
    box-shadow: none;

    filter: none;
    opacity: 1;
}

/*
 * Putih hanya mengikuti bentuk tulisan pada PNG.
 * Tidak ada kotak putih yang melebar.
 */
html[data-theme="dark"] .site-header .brand .brand-wordmark {
    display: block !important;

    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    /*
     * Efek putih mengikuti bagian gambar yang tidak transparan.
     */
    filter:
        drop-shadow(1px 0 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(0 -1px 0 #ffffff) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px rgba(255, 255, 255, 0.95));

    opacity: 1;

    /*
     * Mengatur jarak tulisan dari logo.
     */
    margin-inline-start: 6px;

    transition:
        filter 0.25s ease,
        transform 0.25s ease;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

    html[data-theme="dark"] .site-header .brand .brand-wordmark {
        margin-inline-start: 5px;

        filter:
            drop-shadow(1px 0 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(0 -1px 0 #ffffff) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 3px rgba(255, 255, 255, 0.95));
    }
}

/* =========================================================
   HP
   ========================================================= */

@media (max-width: 760px) {

    html[data-theme="dark"] .site-header .brand .brand-wordmark {
        margin-inline-start: 3px;

        filter:
            drop-shadow(1px 0 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(0 -1px 0 #ffffff) drop-shadow(0 0 2px rgba(255, 255, 255, 0.95));
    }
}

/* =========================================================
   HP KECIL
   ========================================================= */

@media (max-width: 390px) {

    html[data-theme="dark"] .site-header .brand .brand-wordmark {
        margin-inline-start: 2px;

        filter:
            drop-shadow(1px 0 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(0 -1px 0 #ffffff);
    }
}

/* =========================================================
   MENU DESKTOP
   ========================================================= */

.site-header .desktop-nav>a,
.site-header .nav-dropdown>a {
    min-height: 110px;
}

/*
 * Posisi garis menu aktif.
 */
.site-header .desktop-nav a.is-active::after,
.site-header .desktop-nav>a:hover::after,
.site-header .nav-dropdown>a:hover::after {
    bottom: 17px;
}

/*
 * Dropdown lembaga mengikuti tinggi navigasi.
 */
.site-header .mega-menu {
    top: 98px;
}

/* =========================================================
   LAPTOP DAN DESKTOP UKURAN MENENGAH
   ========================================================= */

@media (max-width: 1450px) {

    .site-header .header-frame {
        width: min(calc(100% - 32px), 1360px);
    }

    .site-header .nav-shell {
        height: 90px;
        min-height: 90px;

        padding-inline: 16px;

        gap: 13px;
    }

    .site-header .brand {
        min-width: 405px;
        max-width: 405px;

        height: 90px;

        gap: 0;
    }

    .site-header .brand .brand-logo {
        width: 55px;
        height: 55px;
    }

    .site-header .brand .brand-wordmark {
        width: 355px;
        max-width: 355px;

        height: 82px;
        max-height: 82px;

        margin-inline-start: -1px;
    }

    .site-header .desktop-nav {
        gap: 12px;

        font-size: 12px;
    }

    .site-header .desktop-nav>a,
    .site-header .nav-dropdown>a {
        min-height: 90px;
    }

    .site-header .desktop-nav a.is-active::after,
    .site-header .desktop-nav>a:hover::after,
    .site-header .nav-dropdown>a:hover::after {
        bottom: 13px;
    }

    .site-header .mega-menu {
        top: 79px;
    }

    .site-header .psb-button {
        padding-inline: 13px;
    }
}

/* =========================================================
   TABLET DAN MENU GARIS TIGA
   ========================================================= */

@media (max-width: 1120px) {

    .site-header .header-frame {
        width: min(calc(100% - 24px), 1040px);
    }

    .site-header .nav-shell {
        height: 78px;
        min-height: 78px;

        padding-inline: 13px;
    }

    .site-header .brand {
        min-width: 0;
        max-width: none;

        height: 78px;

        flex: 1;

        gap: 0;

        overflow: hidden;
    }

    .site-header .brand .brand-logo {
        width: 53px;
        height: 53px;
    }

    /*
     * Tulisan tetap ditampilkan pada tablet.
     */
    .site-header .brand .brand-wordmark {
        display: block !important;

        width: 270px;
        max-width: 270px;

        height: 66px;
        max-height: 66px;

        margin-inline-start: -7px;
    }

    .site-header .nav-actions {
        flex: none;

        margin-inline-start: auto;
    }
}

/* =========================================================
   TAMPILAN HP
   ========================================================= */

@media (max-width: 760px) {

    /*
     * Saat berada di bagian atas, background tetap transparan.
     */
    .site-header {
        padding: 7px 0 9px;

        background: transparent !important;
    }

    /*
     * Setelah di-scroll, background menjadi solid.
     * Isi halaman tidak terlihat di belakang header.
     */
    .site-header.scrolled {
        padding: 5px 0 7px;

        background: var(--bg) !important;

        box-shadow:
            0 7px 22px rgba(0, 38, 45, 0.12);
    }

    .site-header .header-frame {
        width: calc(100% - 16px);
        max-width: none;

        margin-inline: auto;

        border-radius: 15px;

        box-shadow:
            0 12px 30px rgba(0, 30, 38, 0.17),
            0 3px 8px rgba(0, 30, 38, 0.07);
    }

    .site-header .topbar {
        display: block;

        border-radius: 15px 15px 0 0;
    }

    .site-header .nav-shell {
        height: 68px;
        min-height: 68px;

        padding: 0 8px;

        gap: 3px;

        border-radius: 0 0 15px 15px;
    }

    /*
     * Area logo memakai sisa ruang yang tersedia.
     */
    .site-header .brand {
        min-width: 0;
        max-width: none;

        height: 68px;

        display: flex;
        align-items: center;

        flex: 1;

        gap: 0;

        overflow: hidden;
    }

    .site-header .brand .brand-logo {
        width: 42px;
        height: 42px;

        flex: none;
    }

    /*
     * Tulisan Arab dan nama yayasan tetap tampil di HP.
     */
    .site-header .brand .brand-wordmark {
        display: block !important;

        width: 145px;
        max-width: 145px;

        height: 49px;
        max-height: 49px;

        flex: none;

        object-fit: contain;
        object-position: left center;

        margin-inline-start: -5px;
    }

    .site-header .nav-actions {
        margin-inline-start: auto;

        flex: none;

        gap: 3px;
    }

    .site-header .icon-button,
    .site-header .mobile-toggle {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }

    .site-header .language-button {
        width: 47px;
        min-width: 47px;

        padding-inline: 4px;

        gap: 2px;
    }

    /*
     * Ikon globe dan tanda panah disembunyikan
     * agar tombol bahasa tidak terlalu lebar.
     */
    .site-header .language-button .action-icon {
        display: none;
    }

    .site-header .language-chevron {
        display: none;
    }

    .site-header .mobile-panel {
        border-radius: 0 0 15px 15px;
    }
}

/* =========================================================
   HP UKURAN KECIL
   ========================================================= */

@media (max-width: 390px) {

    .site-header .nav-shell {
        padding-inline: 6px;
    }

    .site-header .brand {
        gap: 0;
    }

    .site-header .brand .brand-logo {
        width: 38px;
        height: 38px;
    }

    .site-header .brand .brand-wordmark {
        display: block !important;

        width: 110px;
        max-width: 110px;

        height: 40px;
        max-height: 40px;

        margin-inline-start: -4px;
    }

    .site-header .nav-actions {
        gap: 2px;
    }

    .site-header .icon-button,
    .site-header .mobile-toggle {
        width: 34px;
        height: 34px;
    }

    .site-header .language-button {
        width: 42px;
        min-width: 42px;

        padding-inline: 2px;
    }
}

/* =========================================================
   FINAL OVERRIDE NAVIGASI HEADER
   Bubble modern, responsif, tanpa garis aktif
   LETAKKAN PALING BAWAH style.css
   ========================================================= */

/* =========================================================
   NAVIGASI DESKTOP
   ========================================================= */

.site-header .desktop-nav {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(5px, 0.55vw, 12px);

    margin-inline: clamp(8px, 1vw, 20px);

    font-size: clamp(12px, 0.72vw, 14px);
    font-weight: 800;

    white-space: nowrap;
}

/*
 * Menghapus seluruh garis hijau-kuning
 * dan garis aktif dari aturan sebelumnya.
 */
.site-header .desktop-nav .nav-pill::before,
.site-header .desktop-nav .nav-pill::after {
    content: none !important;
    display: none !important;
}

/*
 * Bentuk dasar tombol navigasi.
 */
.site-header .desktop-nav .nav-pill {
    min-height: 48px;

    padding: 0 clamp(11px, 0.8vw, 17px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    position: relative;

    color: #435064;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 18px;

    line-height: 1;

    box-shadow: none;

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

/*
 * Ikon menu.
 */
.site-header .desktop-nav .nav-pill-icon {
    width: 20px;
    height: 20px;

    flex: none;

    fill: #138557;

    transition:
        fill 0.22s ease,
        transform 0.22s ease;
}

/*
 * Efek hover bubble lembut.
 */
.site-header .desktop-nav .nav-pill:hover,
.site-header .desktop-nav .nav-pill:focus-visible {
    color: #087c4a;

    background:
        linear-gradient(145deg,
            rgba(230, 247, 239, 0.95),
            rgba(244, 251, 247, 0.82));

    border-color: rgba(16, 135, 82, 0.13);

    box-shadow:
        0 8px 20px rgba(8, 101, 62, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    transform: translateY(-1px);
}

.site-header .desktop-nav .nav-pill:hover .nav-pill-icon,
.site-header .desktop-nav .nav-pill:focus-visible .nav-pill-icon {
    fill: #087c4a;
    transform: scale(1.05);
}

/*
 * Menu aktif bergaya bubble iOS:
 * membulat, memiliki highlight halus dan bayangan.
 */
.site-header .desktop-nav .nav-pill.is-active {
    color: #ffffff;

    background:
        linear-gradient(145deg,
            #168653 0%,
            #0d7548 52%,
            #08633d 100%);

    border-color: rgba(255, 255, 255, 0.20);

    border-radius: 20px;

    box-shadow:
        0 12px 26px rgba(7, 100, 60, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10);

    transform: translateY(-1px);
}

.site-header .desktop-nav .nav-pill.is-active .nav-pill-icon {
    fill: #ffda14;
    transform: none;
}

/*
 * Saat tombol aktif disentuh mouse.
 */
.site-header .desktop-nav .nav-pill.is-active:hover {
    color: #ffffff;

    background:
        linear-gradient(145deg,
            #198d59 0%,
            #0f794b 52%,
            #08653e 100%);

    box-shadow:
        0 14px 30px rgba(7, 100, 60, 0.29),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}

/* =========================================================
   DROPDOWN LEMBAGA
   ========================================================= */

.site-header .desktop-nav .nav-dropdown {
    position: relative;

    display: flex;
    align-items: center;

    flex: none;
}

.site-header .desktop-nav .nav-arrow {
    margin-top: -3px;

    color: currentColor;

    font-size: 13px;
    line-height: 1;
}

.site-header .desktop-nav .mega-menu {
    top: calc(100% + 14px);
}

/*
 * Area transparan agar dropdown tidak tertutup
 * ketika kursor bergerak dari tombol ke menu.
 */
.site-header .desktop-nav .mega-menu::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: -16px;

    height: 16px;
}

/* =========================================================
   TOMBOL KANAN HEADER
   ========================================================= */

.site-header .nav-actions {
    display: flex;
    align-items: center;

    flex: 0 0 auto;
    flex-wrap: nowrap;

    gap: 8px;

    margin-inline-start: 0;
}

/*
 * Bahasa dan tema mengikuti gaya bubble modern.
 */
.site-header .nav-actions .icon-button {
    min-height: 48px;
    height: 48px;

    border-radius: 16px;

    background:
        linear-gradient(145deg,
            var(--surface),
            var(--bg));

    border: 1px solid var(--line);

    box-shadow:
        0 5px 14px rgba(0, 54, 62, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

.site-header .nav-actions .icon-button:hover {
    color: var(--primary);

    background: var(--surface);

    border-color: rgba(0, 107, 126, 0.35);

    box-shadow:
        0 8px 18px rgba(0, 77, 88, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/*
 * Tombol Info PSB selalu satu baris.
 */
.site-header .psb-button.desktop-cta {
    width: max-content;
    min-width: 116px;
    min-height: 48px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    gap: 8px;

    white-space: nowrap;
    word-break: normal;

    line-height: 1;

    border-radius: 17px;

    background:
        linear-gradient(145deg,
            #ffb900,
            #ffd51a);

    box-shadow:
        0 10px 22px rgba(255, 178, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.site-header .psb-button.desktop-cta:hover {
    transform: translateY(-1px);

    box-shadow:
        0 13px 27px rgba(255, 178, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* =========================================================
   DESKTOP DAN LAPTOP MENENGAH
   ========================================================= */

@media (max-width: 1550px) {

    .site-header .desktop-nav {
        gap: 4px;

        margin-inline: 8px;

        font-size: 12px;
    }

    .site-header .desktop-nav .nav-pill {
        min-height: 44px;

        padding-inline: 10px;

        gap: 6px;

        border-radius: 16px;
    }

    .site-header .desktop-nav .nav-pill.is-active {
        border-radius: 18px;
    }

    .site-header .desktop-nav .nav-pill-icon {
        width: 18px;
        height: 18px;
    }

    .site-header .nav-actions {
        gap: 6px;
    }

    .site-header .nav-actions .icon-button {
        min-height: 44px;
        height: 44px;
    }

    .site-header .psb-button.desktop-cta {
        min-width: 108px;
        min-height: 44px;

        padding-inline: 14px;

        font-size: 11px;
    }
}

@media (max-width: 1320px) {

    .site-header .desktop-nav {
        gap: 2px;

        margin-inline: 5px;

        font-size: 11px;
    }

    .site-header .desktop-nav .nav-pill {
        min-height: 42px;

        padding-inline: 8px;

        gap: 5px;
    }

    .site-header .desktop-nav .nav-pill-icon {
        width: 16px;
        height: 16px;
    }

    .site-header .nav-actions {
        gap: 4px;
    }

    .site-header .psb-button.desktop-cta {
        min-width: 102px;

        padding-inline: 11px;
    }
}

/* =========================================================
   MODE GELAP
   ========================================================= */

html[data-theme="dark"] .site-header .desktop-nav .nav-pill {
    color: #dce9e8;

    background: transparent;

    border-color: transparent;
}

html[data-theme="dark"] .site-header .desktop-nav .nav-pill:hover,
html[data-theme="dark"] .site-header .desktop-nav .nav-pill:focus-visible {
    color: #83e7b5;

    background:
        linear-gradient(145deg,
            rgba(20, 111, 73, 0.30),
            rgba(13, 71, 54, 0.20));

    border-color: rgba(102, 221, 161, 0.17);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .site-header .desktop-nav .nav-pill-icon {
    fill: #62ca94;
}

html[data-theme="dark"] .site-header .desktop-nav .nav-pill.is-active {
    color: #ffffff;

    background:
        linear-gradient(145deg,
            #198a56 0%,
            #0e7146 55%,
            #075d39 100%);

    border-color: rgba(115, 229, 169, 0.18);

    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .site-header .desktop-nav .nav-pill.is-active .nav-pill-icon {
    fill: #ffda14;
}

/* =========================================================
   TABLET DAN HP
   Memperbaiki menu desktop yang sebelumnya tetap muncul
   ========================================================= */

@media (max-width: 1120px) {

    /*
     * !important diperlukan karena selector desktop
     * sebelumnya memiliki specificity lebih tinggi.
     */
    .site-header .desktop-nav,
    .site-header .desktop-cta {
        display: none !important;
    }

    .site-header .mobile-toggle {
        width: 40px;
        height: 40px;

        display: grid !important;
        place-items: center;

        flex: 0 0 auto;

        border-radius: 13px;
    }

    .site-header .nav-actions {
        margin-inline-start: auto;

        flex: 0 0 auto;
        flex-wrap: nowrap;

        gap: 6px;
    }

    .site-header .nav-actions .icon-button {
        min-height: 40px;
        height: 40px;

        border-radius: 13px;
    }

    .site-header .language-button {
        min-width: 62px;
        width: auto;

        padding-inline: 8px;

        white-space: nowrap;
    }

    .site-header .mobile-panel {
        display: block;
    }
}

/* =========================================================
   TAMPILAN HP
   ========================================================= */

@media (max-width: 760px) {

    .site-header .header-frame {
        width: calc(100% - 16px);
        max-width: none;

        overflow: visible;
    }

    .site-header .nav-shell {
        min-height: 68px;
        height: 68px;

        padding-inline: 8px;

        display: flex;
        align-items: center;

        gap: 5px;
    }

    /*
     * Logo dan tulisan menggunakan sisa ruang di sebelah kiri.
     */
    .site-header .brand {
        min-width: 0;
        max-width: none;

        height: 68px;

        display: flex;
        align-items: center;

        flex: 1 1 auto;

        gap: 0;

        overflow: hidden;
    }

    .site-header .brand .brand-logo {
        width: 40px;
        height: 40px;

        flex: 0 0 auto;
    }

    /*
     * Tulisan Arab tetap terlihat di HP.
     */
    .site-header .brand .brand-wordmark {
        display: block !important;

        width: clamp(92px, 30vw, 145px);
        max-width: clamp(92px, 30vw, 145px);

        height: 46px;
        max-height: 46px;

        flex: 0 1 auto;

        margin-inline-start: -3px;

        object-fit: contain;
        object-position: left center;
    }

    .site-header .nav-actions {
        margin-inline-start: auto;

        flex: 0 0 auto;

        gap: 3px;
    }

    .site-header .nav-actions .icon-button,
    .site-header .mobile-toggle {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;

        padding: 0;

        border-radius: 11px;
    }

    .site-header .language-button {
        width: 47px;
        min-width: 47px;

        padding-inline: 4px;

        gap: 2px;
    }

    .site-header .language-button .action-icon,
    .site-header .language-chevron {
        display: none;
    }

    /*
     * Mobile panel berada tepat di bawah navigasi.
     */
    .site-header .mobile-panel {
        width: 100%;

        border-radius: 0 0 15px 15px;
    }

    .site-header .mobile-panel-inner {
        padding: 12px 14px 18px;
    }
}

/* =========================================================
   HP KECIL
   ========================================================= */

@media (max-width: 390px) {

    .site-header .nav-shell {
        padding-inline: 6px;

        gap: 3px;
    }

    .site-header .brand .brand-logo {
        width: 36px;
        height: 36px;
    }

    .site-header .brand .brand-wordmark {
        display: block !important;

        width: 92px;
        max-width: 92px;

        height: 38px;
        max-height: 38px;

        margin-inline-start: -2px;
    }

    .site-header .nav-actions {
        gap: 2px;
    }

    .site-header .nav-actions .icon-button,
    .site-header .mobile-toggle {
        width: 34px;
        min-width: 34px;

        height: 34px;
        min-height: 34px;
    }

    .site-header .language-button {
        width: 42px;
        min-width: 42px;

        padding-inline: 2px;
    }
}

/* =========================================================
   FINAL KOREKSI HEADER MOBILE
   Wordmark lebih besar dan hamburger lebih proporsional
   TEMPEL PALING BAWAH style.css
   ========================================================= */

@media (max-width: 760px) {

    /* Area logo dan tulisan memakai ruang yang tersedia */
    .site-header .brand {
        min-width: 0;
        max-width: none;

        height: 68px;

        display: flex;
        align-items: center;

        flex: 1 1 auto;

        gap: 4px;

        overflow: hidden;
    }

    /* Ukuran logo tetap proporsional */
    .site-header .brand .brand-logo {
        width: 41px;
        height: 41px;

        min-width: 41px;
        max-width: 41px;

        flex: 0 0 41px;

        object-fit: contain;
    }

    /*
     * Tulisan Arab/YPP diperbesar pada HP.
     * Ukuran desktop tidak terpengaruh.
     */
    .site-header .brand .brand-wordmark {
        display: block !important;

        width: clamp(135px, 37vw, 185px) !important;
        max-width: clamp(135px, 37vw, 185px) !important;

        height: 58px !important;
        max-height: 58px !important;

        flex: 0 1 auto;

        margin: 0 !important;

        /*
         * Menggeser sedikit ke kanan tanpa
         * bertabrakan dengan logo.
         */
        transform: translateX(2px);

        object-fit: contain;
        object-position: left center;
    }

    /* Tombol di sebelah kanan dibuat lebih rapat */
    .site-header .nav-actions {
        margin-inline-start: auto;

        display: flex;
        align-items: center;

        flex: 0 0 auto;

        gap: 3px;
    }

    /*
     * Ukuran tombol hamburger diperkecil.
     */
    .site-header .mobile-toggle {
        width: 34px !important;
        min-width: 34px !important;

        height: 34px !important;
        min-height: 34px !important;

        padding: 0 !important;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 3px;

        border-radius: 10px;
    }

    /*
     * Ukuran dan jarak ketiga garis hamburger.
     */
    .site-header .mobile-toggle span {
        width: 17px;
        height: 2px;

        display: block;

        margin: 0;

        flex: none;

        background: currentColor;
        border-radius: 999px;

        transform-origin: center;

        transition:
            transform 0.24s ease,
            opacity 0.18s ease;
    }

    /*
     * Animasi menjadi tanda silang saat menu terbuka.
     */
    .site-header .mobile-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .site-header .mobile-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .site-header .mobile-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }
}

/* =========================================================
   HP BERUKURAN KECIL
   ========================================================= */

@media (max-width: 390px) {

    .site-header .brand {
        gap: 1px;
    }

    .site-header .brand .brand-logo {
        width: 37px;
        height: 37px;

        min-width: 37px;
        max-width: 37px;

        flex-basis: 37px;
    }

    .site-header .brand .brand-wordmark {
        display: block !important;

        width: 125px !important;
        max-width: 125px !important;

        height: 47px !important;
        max-height: 47px !important;

        transform: translateX(1px);
    }

    .site-header .mobile-toggle {
        width: 32px !important;
        min-width: 32px !important;

        height: 32px !important;
        min-height: 32px !important;

        gap: 3px;
    }

    .site-header .mobile-toggle span {
        width: 16px;
        height: 2px;
    }
}

/* =========================================================
   FINAL OVERRIDE — HERO LANDING PAGE YPP DARUL MA'ARIF
   Tempelkan di PALING BAWAH style.css
========================================================= */

/* =========================================================
   1. FRAME UTAMA — PRESISI DENGAN HEADER
========================================================= */

.dm-hero {
    --dm-dark: #053947;
    --dm-dark-2: #064b5b;
    --dm-primary: #075f70;
    --dm-primary-light: #07879a;
    --dm-cyan: #2dd0d2;
    --dm-yellow: #ffcc21;
    --dm-yellow-light: #ffe787;
    --dm-white: #ffffff;
    --dm-ink: #082f38;

    position: relative;
    isolation: isolate;

    width: min(calc(100% - 40px), var(--container));
    height: 535px;

    margin: 8px auto 0;
    padding: 38px 0 0;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;

    background:
        radial-gradient(ellipse at 50% 112%,
            rgba(71, 224, 221, 0.73) 0%,
            rgba(25, 169, 177, 0.3) 31%,
            transparent 63%),
        radial-gradient(circle at 8% 8%,
            rgba(255, 204, 33, 0.14),
            transparent 27%),
        linear-gradient(135deg,
            #086b7b 0%,
            #07566b 52%,
            #064459 100%);

    box-shadow:
        0 22px 55px rgba(0, 42, 53, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dm-hero *,
.dm-hero *::before,
.dm-hero *::after {
    box-sizing: border-box;
}

.dm-hero-container {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: none;
    height: 100%;

    margin: 0;
    padding: 0 42px;

    display: flex;
    flex-direction: column;
}

/* =========================================================
   2. BACKGROUND MINIMALIS
========================================================= */

.dm-hero-grid-pattern {
    position: absolute;
    z-index: -5;
    inset: 0;

    opacity: 0.08;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.12) 1px,
            transparent 1px);

    background-size: 58px 58px;

    -webkit-mask-image:
        linear-gradient(to bottom,
            #000 0%,
            rgba(0, 0, 0, 0.45) 52%,
            transparent 92%);

    mask-image:
        linear-gradient(to bottom,
            #000 0%,
            rgba(0, 0, 0, 0.45) 52%,
            transparent 92%);
}

.dm-hero::before {
    content: "";

    position: absolute;
    z-index: -4;

    right: -180px;
    bottom: -220px;

    width: 600px;
    height: 600px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    box-shadow:
        0 0 0 55px rgba(255, 255, 255, 0.025),
        0 0 0 110px rgba(255, 255, 255, 0.018);

    pointer-events: none;
}

.dm-hero::after {
    content: "";

    position: absolute;
    z-index: -4;

    bottom: -165px;
    left: -190px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(45, 208, 210, 0.24),
            transparent 68%);

    pointer-events: none;
}

.dm-hero-light {
    display: none;
}

/* =========================================================
   3. TULISAN UTAMA
========================================================= */

.dm-hero-copy {
    position: relative;
    z-index: 10;

    width: min(100%, 760px);
    max-width: 760px;

    margin: 0 auto;

    text-align: center;

    animation: dmFinalHeroEnter 0.65s ease both;
}

.dm-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin: 0 0 12px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.dm-hero-eyebrow span {
    width: 21px;
    height: 2px;

    border-radius: 99px;
    background: var(--dm-yellow);
}

.dm-hero h1 {
    max-width: 760px;

    margin: 0 auto;

    color: #ffffff;

    font-size: clamp(42px, 4.6vw, 58px);
    font-weight: 800;
    line-height: 0.99;
    letter-spacing: -0.052em;

    text-wrap: balance;
}

.dm-hero h1 span {
    display: block;

    color: var(--dm-yellow-light);
}

.dm-hero-description {
    max-width: 575px;

    margin: 13px auto 0;

    color: rgba(255, 255, 255, 0.73);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;

    text-wrap: balance;
}

/* =========================================================
   4. TOMBOL
========================================================= */

.dm-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 14px;
}

.dm-button {
    min-height: 41px;
    padding: 4px 5px 4px 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    color: #ffffff;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.dm-button b {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-size: 11px;

    transition: transform 0.22s ease;
}

.dm-button-primary {
    color: #10353c;
    background: var(--dm-yellow);

    box-shadow: 0 12px 28px rgba(255, 204, 33, 0.24);
}

.dm-button-primary b {
    color: #ffffff;
    background: #083843;
}

.dm-button-outline {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(10px);
}

.dm-button-outline b {
    color: #073943;
    background: #ffffff;
}

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

.dm-button-primary:hover {
    color: #10353c;

    box-shadow: 0 15px 33px rgba(255, 204, 33, 0.31);
}

.dm-button-outline:hover {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.43);
    background: rgba(255, 255, 255, 0.14);
}

.dm-button:hover b {
    transform: rotate(8deg);
}

/* =========================================================
   5. PANGGUNG GAPURA DAN CAROUSEL
========================================================= */

.dm-institution-stage {
    position: relative;

    flex: 1;
    min-height: 250px;

    margin-top: 1px;
}

/* Cahaya di belakang gapura */

.dm-gate-glow {
    position: absolute;
    z-index: 0;

    bottom: -150px;
    left: 50%;

    width: 900px;
    height: 360px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(ellipse,
            rgba(224, 255, 253, 0.68) 0%,
            rgba(82, 220, 217, 0.27) 41%,
            transparent 72%);

    filter: blur(8px);
    pointer-events: none;
}

/* Gapura dibuat jauh lebih terlihat */

.dm-gate-image {
    position: absolute;
    z-index: 1;

    bottom: -75px;
    left: 50%;

    width: min(720px, 70vw);
    max-width: none;

    transform: translateX(-50%);

    opacity: 0.58;

    pointer-events: none;
    user-select: none;

    filter:
        saturate(0.9) contrast(1.03) brightness(1.06) drop-shadow(0 18px 27px rgba(0, 43, 51, 0.23));
}

/* =========================================================
   6. CAROUSEL MODEL PANEL MELENGKUNG
========================================================= */

.dm-institution-carousel {
    position: absolute;
    z-index: 5;

    right: -42px;
    bottom: 13px;
    left: -42px;

    overflow: hidden;
}

.dm-institution-track {
    display: flex;
    align-items: flex-end;
    gap: 9px;

    width: 100%;
    height: 205px;

    padding: 19px 52px 12px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    cursor: grab;

    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.dm-institution-track:active {
    cursor: grabbing;
}

.dm-institution-track::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   7. KARTU LEMBAGA
========================================================= */

.dm-institution-card {
    --dm-card-rotate: 0deg;
    --dm-card-y: 0px;

    position: relative;

    flex: 0 0 132px;
    width: 132px;
    height: 150px;

    padding: 11px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    color: #0a3942;

    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 13px;

    scroll-snap-align: center;

    text-decoration: none;

    box-shadow:
        0 13px 28px rgba(0, 40, 48, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.64);

    transform:
        translateY(var(--dm-card-y)) rotate(var(--dm-card-rotate));

    transform-origin: center bottom;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* Hilangkan ornamen lingkaran besar lama */

.dm-institution-card::after {
    display: none;
}

/*
   Lengkungan dibuat mengikuti referensi:
   kartu tengah paling tinggi,
   sisi kiri dan kanan semakin turun.
*/

.dm-institution-card:nth-child(7n + 1) {
    --dm-card-rotate: -6deg;
    --dm-card-y: 23px;

    flex-basis: 122px;
    width: 122px;
    height: 128px;
}

.dm-institution-card:nth-child(7n + 2) {
    --dm-card-rotate: -4deg;
    --dm-card-y: 11px;

    flex-basis: 128px;
    width: 128px;
    height: 146px;
}

.dm-institution-card:nth-child(7n + 3) {
    --dm-card-rotate: -2deg;
    --dm-card-y: 1px;

    flex-basis: 136px;
    width: 136px;
    height: 164px;
}

.dm-institution-card:nth-child(7n + 4) {
    --dm-card-rotate: 0deg;
    --dm-card-y: -5px;

    flex-basis: 145px;
    width: 145px;
    height: 177px;
}

.dm-institution-card:nth-child(7n + 5) {
    --dm-card-rotate: 2deg;
    --dm-card-y: 1px;

    flex-basis: 136px;
    width: 136px;
    height: 164px;
}

.dm-institution-card:nth-child(7n + 6) {
    --dm-card-rotate: 4deg;
    --dm-card-y: 11px;

    flex-basis: 128px;
    width: 128px;
    height: 146px;
}

.dm-institution-card:nth-child(7n + 7) {
    --dm-card-rotate: 6deg;
    --dm-card-y: 23px;

    flex-basis: 122px;
    width: 122px;
    height: 128px;
}

/* Warna kartu — tegas seperti header */

.dm-card-tone-0 {
    color: #083b45;

    background:
        linear-gradient(145deg,
            #ffffff 0%,
            #eaf8f7 100%);
}

.dm-card-tone-1 {
    color: #15383e;

    background:
        linear-gradient(145deg,
            #ffe881 0%,
            #ffcc21 100%);

    border-color: rgba(255, 238, 158, 0.9);
}

.dm-card-tone-2 {
    color: #ffffff;

    background:
        linear-gradient(145deg,
            #052f3a 0%,
            #064b59 100%);

    border-color: rgba(255, 255, 255, 0.17);
}

.dm-card-tone-3 {
    color: #073d46;

    background:
        linear-gradient(145deg,
            #7fe3df 0%,
            #36c3c2 100%);

    border-color: rgba(203, 255, 251, 0.72);
}

/* Hover kartu */

.dm-institution-card:hover {
    z-index: 20;

    transform:
        translateY(calc(var(--dm-card-y) - 10px)) rotate(0deg) scale(1.045);

    border-color: var(--dm-yellow);

    box-shadow:
        0 21px 42px rgba(0, 34, 43, 0.29),
        inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

/* =========================================================
   8. ISI KARTU
========================================================= */

.dm-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dm-card-category {
    min-height: 18px;
    padding: 4px 6px;

    display: inline-flex;
    align-items: center;

    color: inherit;
    background: rgba(255, 255, 255, 0.34);

    border-radius: 999px;

    font-size: 6px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dm-card-tone-2 .dm-card-category {
    color: var(--dm-yellow-light);
    background: rgba(255, 255, 255, 0.08);
}

.dm-card-number {
    color: inherit;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.1em;

    opacity: 0.45;
}

.dm-card-logo {
    position: relative;
    z-index: 2;

    width: 30px;
    height: 30px;

    margin-top: 9px;
    padding: 5px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.42);
}

.dm-card-tone-2 .dm-card-logo {
    background: rgba(255, 255, 255, 0.09);
}

.dm-card-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.dm-card-content {
    position: relative;
    z-index: 2;

    margin-top: auto;
}

.dm-card-content h2 {
    margin: 0;

    color: inherit;

    font-size: 10px;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.02em;

    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dm-card-link {
    margin-top: 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;

    color: inherit;

    font-size: 5px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    opacity: 0.72;
}

.dm-card-link b {
    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: #073d47;

    border-radius: 50%;

    font-size: 7px;
}

.dm-card-tone-2 .dm-card-link b {
    color: #12363c;
    background: var(--dm-yellow);
}

/* =========================================================
   9. TOMBOL CAROUSEL DI SISI KIRI DAN KANAN
========================================================= */

.dm-carousel-footer {
    position: absolute;
    z-index: 20;

    top: 50%;
    right: 11px;
    bottom: auto;
    left: 11px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    transform: translateY(-50%);

    pointer-events: none;
}

.dm-carousel-caption {
    display: none;
}

.dm-carousel-controls {
    width: 100%;

    display: flex;
    justify-content: space-between;
}

.dm-carousel-control {
    width: 34px;
    height: 34px;

    padding: 0;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: rgba(5, 49, 60, 0.68);

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;

    box-shadow: 0 8px 20px rgba(0, 35, 44, 0.18);

    backdrop-filter: blur(9px);

    pointer-events: auto;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.dm-carousel-control:hover:not(:disabled) {
    color: #12353c;
    background: var(--dm-yellow);

    border-color: var(--dm-yellow);

    transform: scale(1.06);
}

.dm-carousel-control:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 1050px) {

    .dm-hero {
        height: 545px;
    }

    .dm-hero-container {
        padding-right: 30px;
        padding-left: 30px;
    }

    .dm-hero h1 {
        font-size: clamp(40px, 6vw, 54px);
    }

    .dm-gate-image {
        width: 660px;
    }

    .dm-institution-carousel {
        right: -30px;
        left: -30px;
    }

    .dm-institution-track {
        padding-right: 40px;
        padding-left: 40px;
    }

}

/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 760px) {

    .dm-hero {
        width: min(calc(100% - 16px), var(--container));
        height: 535px;

        margin-top: 5px;
        padding-top: 30px;

        border-radius: 18px;
    }

    .dm-hero-container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .dm-hero-eyebrow {
        gap: 6px;

        margin-bottom: 10px;

        font-size: 6px;
        letter-spacing: 0.12em;
    }

    .dm-hero-eyebrow span {
        width: 16px;
    }

    .dm-hero h1 {
        max-width: 360px;

        font-size: clamp(32px, 9.5vw, 39px);
        line-height: 1.01;
        letter-spacing: -0.044em;
    }

    .dm-hero-description {
        max-width: 325px;

        margin-top: 11px;

        font-size: 9px;
        line-height: 1.5;
    }

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

    .dm-button {
        min-height: 38px;
        padding-left: 13px;

        font-size: 8px;
    }

    .dm-button b {
        width: 28px;
        height: 28px;

        font-size: 10px;
    }

    .dm-institution-stage {
        min-height: 245px;

        margin-top: 0;
    }

    .dm-gate-image {
        bottom: -24px;

        width: 550px;

        opacity: 0.42;
    }

    .dm-gate-glow {
        bottom: -115px;

        width: 570px;
        height: 280px;
    }

    .dm-institution-carousel {
        right: -14px;
        bottom: 10px;
        left: -14px;
    }

    .dm-institution-track {
        height: 186px;
        gap: 7px;

        padding: 16px 20px 11px;
    }

    .dm-institution-card {
        flex-basis: 108px;
        width: 108px;
        height: 130px;

        padding: 9px;

        border-radius: 11px;
    }

    .dm-institution-card:nth-child(7n + 1) {
        --dm-card-rotate: -5deg;
        --dm-card-y: 18px;

        flex-basis: 100px;
        width: 100px;
        height: 112px;
    }

    .dm-institution-card:nth-child(7n + 2) {
        --dm-card-rotate: -3deg;
        --dm-card-y: 9px;

        flex-basis: 105px;
        width: 105px;
        height: 126px;
    }

    .dm-institution-card:nth-child(7n + 3) {
        --dm-card-rotate: -1deg;
        --dm-card-y: 1px;

        flex-basis: 110px;
        width: 110px;
        height: 141px;
    }

    .dm-institution-card:nth-child(7n + 4) {
        --dm-card-rotate: 0deg;
        --dm-card-y: -3px;

        flex-basis: 116px;
        width: 116px;
        height: 150px;
    }

    .dm-institution-card:nth-child(7n + 5) {
        --dm-card-rotate: 1deg;
        --dm-card-y: 1px;

        flex-basis: 110px;
        width: 110px;
        height: 141px;
    }

    .dm-institution-card:nth-child(7n + 6) {
        --dm-card-rotate: 3deg;
        --dm-card-y: 9px;

        flex-basis: 105px;
        width: 105px;
        height: 126px;
    }

    .dm-institution-card:nth-child(7n + 7) {
        --dm-card-rotate: 5deg;
        --dm-card-y: 18px;

        flex-basis: 100px;
        width: 100px;
        height: 112px;
    }

    .dm-card-category {
        min-height: 15px;
        padding: 3px 5px;

        font-size: 5px;
    }

    .dm-card-number {
        font-size: 6px;
    }

    .dm-card-logo {
        width: 25px;
        height: 25px;

        margin-top: 7px;
        padding: 4px;

        border-radius: 7px;
    }

    .dm-card-content h2 {
        font-size: 8px;
        line-height: 1.2;
    }

    .dm-card-link {
        margin-top: 5px;

        font-size: 4px;
    }

    .dm-card-link b {
        width: 15px;
        height: 15px;

        font-size: 6px;
    }

    .dm-carousel-footer {
        right: 4px;
        left: 4px;
    }

    .dm-carousel-control {
        width: 29px;
        height: 29px;

        font-size: 10px;
    }

}

/* =========================================================
   12. MOBILE KECIL
========================================================= */

@media (max-width: 390px) {

    .dm-hero {
        height: 520px;
    }

    .dm-hero h1 {
        font-size: 31px;
    }

    .dm-hero-description {
        max-width: 290px;
    }

    .dm-button {
        min-height: 36px;
    }

    .dm-button b {
        width: 26px;
        height: 26px;
    }

    .dm-institution-track {
        padding-right: 16px;
        padding-left: 16px;
    }

}

/* =========================================================
   13. REDUCED MOTION
========================================================= */

@keyframes dmFinalHeroEnter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .dm-hero-copy {
        animation: none;
    }

    .dm-institution-track {
        scroll-behavior: auto;
    }

    .dm-button,
    .dm-institution-card,
    .dm-carousel-control {
        transition: none;
    }

}

/* =========================================================
   KOREKSI SEMENTARA HERO
   - Presisi dengan lebar header
   - Bubble glass tipis
   - Aksen oranye seperti tombol Info PSB
========================================================= */

/* Satu ukuran frame untuk header dan hero */
:root {
    --dm-page-frame:
        min(calc(100% - 64px), 1600px);
}

/* =========================================================
   FRAME HEADER DAN HERO
========================================================= */

.header-frame,
.dm-hero {
    width: var(--dm-page-frame);
    max-width: none;

    margin-right: auto;
    margin-left: auto;
}

/* Hero dibuat presisi mengikuti header */
.dm-hero {
    --dm-gold: #ffb000;
    --dm-gold-deep: #f39800;
    --dm-gold-light: #ffda14;
    --dm-gold-pale: #ffe980;

    /*
     * Warna dasar hijau-biru tetap dipertahankan.
     * Hanya diberi cahaya glass yang sangat tipis.
     */
    background:
        radial-gradient(circle at 8% 4%,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.06) 17%,
            transparent 35%),
        radial-gradient(circle at 84% 22%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%),
        radial-gradient(ellipse at 50% 115%,
            rgba(71, 219, 205, 0.4) 0%,
            rgba(21, 158, 151, 0.18) 34%,
            transparent 65%),
        linear-gradient(132deg,
            #178075 0%,
            #0a6d6c 43%,
            #075568 72%,
            #06475d 100%);

    border: 1px solid rgba(255, 255, 255, 0.32);

    box-shadow:
        0 28px 65px rgba(3, 49, 52, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

/* =========================================================
   BUBBLE GLASS TIPIS
========================================================= */

/* Bubble kiri atas */
.dm-hero::before {
    content: "";

    position: absolute;
    z-index: -2;

    top: -190px;
    left: -165px;

    width: 470px;
    height: 470px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.018));

    box-shadow:
        inset 18px 18px 50px rgba(255, 255, 255, 0.055),
        inset -20px -20px 50px rgba(2, 67, 73, 0.08);

    pointer-events: none;
}

/* Bubble kanan */
.dm-hero::after {
    content: "";

    position: absolute;
    z-index: -2;

    top: 75px;
    right: -185px;

    width: 570px;
    height: 570px;

    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 50%;

    background:
        radial-gradient(circle at 33% 28%,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.018) 45%,
            transparent 72%);

    box-shadow:
        0 0 0 67px rgba(255, 255, 255, 0.018),
        0 0 0 134px rgba(255, 255, 255, 0.01),
        inset 20px 20px 70px rgba(255, 255, 255, 0.035);

    pointer-events: none;
}

/* Pola kotak diperkecil supaya bubble glass lebih bersih */
.dm-hero-grid-pattern {
    opacity: 0.045;
}

/* =========================================================
   WARNA ORANYE JUDUL
========================================================= */

.dm-hero h1 span {
    color: var(--dm-gold-light);

    background:
        linear-gradient(110deg,
            #ffad00 0%,
            #ffc400 45%,
            #ffdf3f 100%);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: none;
}

/* Garis kecil di atas judul */
.dm-hero-eyebrow span {
    background:
        linear-gradient(90deg,
            #ff9d00,
            #ffda14);

    box-shadow:
        0 0 13px rgba(255, 176, 0, 0.35);
}

/* =========================================================
   TOMBOL ORANYE SEPERTI INFO PSB
========================================================= */

.dm-button-primary {
    color: #15383c;

    background:
        linear-gradient(135deg,
            #ffb000 0%,
            #ffc400 52%,
            #ffda14 100%);

    border-color: rgba(255, 215, 72, 0.8);

    box-shadow:
        0 13px 30px rgba(255, 176, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dm-button-primary:hover {
    color: #15383c;

    background:
        linear-gradient(135deg,
            #ffa200 0%,
            #ffbc00 48%,
            #ffd313 100%);

    box-shadow:
        0 17px 38px rgba(255, 166, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.dm-button-primary b {
    color: #ffffff;
    background: #07424a;
}

/* =========================================================
   KARTU ORANYE
========================================================= */

.dm-card-tone-1 {
    color: #15393c;

    background:
        linear-gradient(145deg,
            #ffda3f 0%,
            #ffbd00 52%,
            #f5a000 100%);

    border-color: rgba(255, 222, 102, 0.92);

    box-shadow:
        0 18px 38px rgba(127, 79, 0, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

/* Label emas pada kartu gelap */
.dm-card-tone-2 .dm-card-category,
.dm-card-tone-2 .dm-card-logo {
    color: #ffc21a;
}

/* Tombol kecil kartu gelap */
.dm-card-tone-2 .dm-card-link b {
    color: #14393c;

    background:
        linear-gradient(135deg,
            #ffad00,
            #ffd817);
}

/* Garis pemanis di atas gapura */
.dm-institution-stage::after {
    background:
        linear-gradient(90deg,
            transparent,
            #ffb000,
            #ffda14,
            transparent);

    box-shadow: 0 0 14px rgba(255, 176, 0, 0.34);
}

/* Hover kartu */
.dm-institution-card:hover {
    border-color: #ffbd00;
}

/* Hover tombol carousel */
.dm-carousel-control:hover:not(:disabled) {
    color: #14393c;

    background:
        linear-gradient(135deg,
            #ffad00,
            #ffd817);

    border-color: #ffda14;
}

/* Fokus keyboard */
.dm-button:focus-visible,
.dm-institution-card:focus-visible,
.dm-carousel-control:focus-visible,
.dm-institution-track:focus-visible {
    outline-color: #ffbd00;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1120px) {

    :root {
        --dm-page-frame:
            min(calc(100% - 30px), 1600px);
    }

}

/* =========================================================
   MOBILE — SAMA DENGAN FRAME HEADER
========================================================= */

@media (max-width: 760px) {

    :root {
        --dm-page-frame:
            min(calc(100% - 16px), var(--container));
    }

    .header-frame,
    .dm-hero {
        width: var(--dm-page-frame);
    }

    .dm-hero::before {
        top: -125px;
        left: -175px;

        width: 360px;
        height: 360px;

        opacity: 0.75;
    }

    .dm-hero::after {
        top: 235px;
        right: -270px;

        width: 520px;
        height: 520px;

        opacity: 0.7;
    }

}

/* =========================================================
   FINAL PALET WARNA HEADER
   Selaras dengan landing page teal dan kuning emas
   TEMPEL PALING BAWAH style.css
   ========================================================= */

:root {
    --header-teal-dark: #064f5b;
    --header-teal: #08777a;
    --header-teal-light: #15998f;

    --header-mint: #e9f6f2;
    --header-mint-strong: #d8eee8;

    --header-gold: #ffb900;
    --header-gold-light: #ffd42a;

    --header-ink: #153a3e;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.site-header .topbar {
    color: #ffffff;

    background:
        linear-gradient(105deg,
            #075966 0%,
            #08777a 46%,
            #0a7e78 70%,
            #08636b 100%);

    border-radius: 18px 18px 0 0;

    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

/*
 * Aksen emas tipis di bagian bawah topbar.
 */
.site-header .topbar::after {
    content: "";

    display: block;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 185, 0, 0.20) 20%,
            #ffbd00 50%,
            rgba(255, 185, 0, 0.20) 80%,
            transparent 100%);
}

.site-header .header-email {
    color: #ffffff;

    font-weight: 800;
}

.site-header .header-email:hover {
    color: #ffdc4c;
}

/*
 * Warna sosial media tidak diubah.
 * Aturan Facebook, Instagram, YouTube, dan WhatsApp
 * yang sudah dibuat sebelumnya tetap berlaku.
 */

/* =========================================================
   NAVIGASI UTAMA
   ========================================================= */

.site-header .nav-shell {
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fbfefd 100%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/*
 * Warna dasar menu.
 */
.site-header .desktop-nav .nav-pill {
    color: #365056;

    background: transparent;

    border-color: transparent;
}

/*
 * Ikon menu menggunakan warna teal landing page.
 */
.site-header .desktop-nav .nav-pill-icon {
    fill: #0a837b;
}

/* =========================================================
   HOVER MENU
   ========================================================= */

.site-header .desktop-nav .nav-pill:hover,
.site-header .desktop-nav .nav-pill:focus-visible {
    color: #076f70;

    background:
        linear-gradient(145deg,
            rgba(224, 244, 238, 0.96),
            rgba(242, 250, 247, 0.88));

    border-color: rgba(8, 119, 122, 0.14);

    box-shadow:
        0 8px 20px rgba(6, 99, 104, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.site-header .desktop-nav .nav-pill:hover .nav-pill-icon,
.site-header .desktop-nav .nav-pill:focus-visible .nav-pill-icon {
    fill: #08777a;
}

/* =========================================================
   MENU AKTIF
   ========================================================= */

.site-header .desktop-nav .nav-pill.is-active {
    color: #ffffff;

    background:
        linear-gradient(145deg,
            #14958b 0%,
            #08777a 52%,
            #075b68 100%);

    border-color: rgba(255, 255, 255, 0.22);

    box-shadow:
        0 13px 27px rgba(5, 94, 101, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 47, 53, 0.12);
}

/*
 * Ikon aktif menggunakan warna kuning emas.
 */
.site-header .desktop-nav .nav-pill.is-active .nav-pill-icon {
    fill: #ffcb12;
}

.site-header .desktop-nav .nav-pill.is-active:hover {
    color: #ffffff;

    background:
        linear-gradient(145deg,
            #18a095 0%,
            #09817f 52%,
            #075e6c 100%);

    box-shadow:
        0 15px 30px rgba(5, 94, 101, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/*
 * Pastikan garis aktif lama tetap tidak muncul.
 */
.site-header .desktop-nav .nav-pill::before,
.site-header .desktop-nav .nav-pill::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   TOMBOL BAHASA DAN MODE TEMA
   ========================================================= */

.site-header .nav-actions .icon-button {
    color: #16474d;

    background:
        linear-gradient(145deg,
            rgba(238, 248, 245, 0.96),
            rgba(255, 255, 255, 0.92));

    border: 1px solid rgba(8, 119, 122, 0.18);

    box-shadow:
        0 7px 18px rgba(5, 82, 89, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.site-header .nav-actions .icon-button:hover {
    color: #ffffff;

    background:
        linear-gradient(145deg,
            #14958b,
            #087079);

    border-color: #08777a;

    box-shadow:
        0 10px 22px rgba(5, 92, 98, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/*
 * Ikon globe mengikuti warna tombol.
 */
.site-header .nav-actions .action-icon {
    fill: currentColor;
}

/* =========================================================
   TOMBOL INFO PSB
   ========================================================= */

.site-header .psb-button.desktop-cta {
    color: #133c41;

    background:
        linear-gradient(145deg,
            #ffaf00 0%,
            #ffc516 52%,
            #ffd52c 100%);

    border: 1px solid rgba(255, 197, 22, 0.65);

    box-shadow:
        0 11px 24px rgba(255, 177, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.60);

    font-weight: 900;
}

.site-header .psb-button.desktop-cta:hover {
    color: #12393e;

    background:
        linear-gradient(145deg,
            #ffbc00 0%,
            #ffd01d 52%,
            #ffe05b 100%);

    box-shadow:
        0 14px 28px rgba(255, 177, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

/* =========================================================
   DROPDOWN LEMBAGA
   ========================================================= */

.site-header .mega-menu {
    background:
        linear-gradient(160deg,
            #ffffff 0%,
            #f4fbf8 100%);

    border-color: rgba(8, 119, 122, 0.14);

    box-shadow:
        0 24px 60px rgba(4, 69, 75, 0.17);
}

.site-header .mega-label {
    color: #08777a;
}

.site-header .mega-menu a:hover {
    color: #086c6f;

    background: #e7f4ef;
}

/* =========================================================
   MENU MOBILE
   ========================================================= */

@media (max-width: 1120px) {

    .site-header .mobile-toggle {
        color: #16474d;

        background:
            linear-gradient(145deg,
                #edf7f4,
                #ffffff);

        border-color: rgba(8, 119, 122, 0.20);

        box-shadow:
            0 7px 17px rgba(5, 82, 89, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .site-header .mobile-toggle:hover {
        color: #ffffff;

        background:
            linear-gradient(145deg,
                #14958b,
                #087079);

        border-color: #08777a;
    }

    .site-header .mobile-panel {
        background:
            linear-gradient(180deg,
                #ffffff 0%,
                #f1faf7 100%);

        border-top-color: rgba(8, 119, 122, 0.13);
    }

    .site-header .mobile-panel summary::after {
        color: #08777a;
    }

    .site-header .mobile-panel details a:hover,
    .site-header .mobile-panel-inner>a:hover {
        color: #08777a;
    }

    .site-header .mobile-panel .mobile-psb {
        color: #153d41;

        background:
            linear-gradient(145deg,
                #ffb000,
                #ffd52a);

        box-shadow:
            0 8px 18px rgba(255, 177, 0, 0.21);
    }
}

/* =========================================================
   MODE GELAP
   ========================================================= */

html[data-theme="dark"] .site-header .topbar {
    background:
        linear-gradient(105deg,
            #063a43 0%,
            #07535c 48%,
            #075f5d 72%,
            #3a451e 100%);
}

html[data-theme="dark"] .site-header .nav-shell {
    background:
        linear-gradient(180deg,
            #08272b 0%,
            #061f23 100%);
}

html[data-theme="dark"] .site-header .nav-actions .icon-button {
    color: #dff3ef;

    background:
        linear-gradient(145deg,
            #123b3e,
            #0a292d);

    border-color: rgba(61, 170, 162, 0.24);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .site-header .nav-actions .icon-button:hover {
    color: #ffffff;

    background:
        linear-gradient(145deg,
            #14958b,
            #075f68);
}

/* =========================================================
   MENAMBAH TINGGI HERO DESKTOP
========================================================= */

@media (min-width: 1051px) {

    .dm-hero {
        height: 580px;
    }

    .dm-institution-carousel {
        bottom: -10px;
    }

    .dm-gate-image {
        bottom: -60px;
    }

}

/* =====================================
   PROGRAM UNGGULAN FINAL PREMIUM
===================================== */


.dm-program-section {
    margin-top: -10px;
    padding: 45px 0 90px;
}


/* mengikuti lebar landing page */

.dm-program-section .container {

    width: 100%;

    max-width: none;

    padding-left: clamp(18px, 2vw, 38px);

    padding-right: clamp(18px, 2vw, 38px);

}



/* TITLE */

.dm-program-head {

    margin-top: 30px;

    margin-bottom: 32px;

}


.dm-program-head h2 {

    margin: 0;

    display: flex;

    align-items: center;

    gap: 15px;


    color: #087c79;

    font-size: 1rem;

    font-weight: 900;

    letter-spacing: .22em;

    text-transform: uppercase;

}


.dm-program-head h2:before {

    content: "";

    width: 38px;

    height: 3px;

    border-radius: 50px;

    background: #ffc400;

}



/* GRID */

.dm-program-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    width: 100%;

}



/* CARD */

.dm-program-card {

    position: relative;


    display: flex;

    align-items: center;


    gap: 20px;


    min-height: 108px;


    padding: 18px 22px;


    border-radius: 26px;


    overflow: hidden;


    border:

        1px solid rgba(8, 130, 125, .15);


    background:

        linear-gradient(135deg,

            rgba(255, 255, 255, .96),

            rgba(239, 248, 247, .78));


    box-shadow:


        0 18px 40px rgba(8, 70, 70, .08),


        inset 0 1px 0 rgba(255, 255, 255, .9);


    text-decoration: none;


    transition: .3s ease;

}



.dm-program-card:hover {

    transform: translateY(-5px);


    box-shadow:

        0 30px 60px rgba(8, 70, 70, .14);

}



/* glass bubble */

.dm-program-card:after {

    content: "";

    position: absolute;


    right: -60px;

    top: -60px;


    width: 170px;

    height: 170px;


    border-radius: 50%;


    background:

        rgba(8, 130, 125, .08);

}



/* NUMBER */

.dm-program-number {

    position: relative;

    z-index: 2;


    flex: none;


    width: 58px;

    height: 58px;


    display: grid;

    place-items: center;


    border-radius: 20px;


    color: #d8ad00;


    font-size: .95rem;

    font-weight: 900;


    background:

        linear-gradient(145deg,

            rgba(255, 255, 255, .9),

            rgba(220, 240, 238, .5));


    border:

        1px solid rgba(255, 255, 255, .95);


    box-shadow:


        0 12px 30px rgba(8, 120, 115, .14),


        inset 0 2px 8px white;

}



/* CONTENT */


.dm-program-info {

    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;

}



.dm-program-info h3 {

    margin: 0 0 6px;


    color: #10383b;


    font-size: 1.2rem;


    font-weight: 900;


    letter-spacing: -.03em;

}



.dm-program-info p {

    margin: 0;


    color: #71878a;


    font-size: .84rem;


    line-height: 1.45;

}



/* ARROW */


.dm-program-arrow {

    position: relative;

    z-index: 2;


    flex: none;


    width: 38px;

    height: 38px;


    display: grid;

    place-items: center;


    border-radius: 50%;


    color: #087c79;


    background:

        rgba(8, 124, 121, .08);


    transition: .3s ease;

}


.dm-program-card:hover .dm-program-arrow {

    color: white;

    background: #087c79;

}




/* ==========================
   TABLET
========================== */

@media(max-width:1100px) {


    .dm-program-section .container {

        padding-left: 30px;

        padding-right: 30px;

    }


    .dm-program-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .dm-program-card {

        min-height: 105px;

    }



}



/* ==========================
   MOBILE
========================== */


@media(max-width:600px) {


    .dm-program-section {

        margin-top: -35px;

        padding: 35px 0 60px;

    }



    .dm-program-section .container {

        padding-left: 10px;

        padding-right: 10px;

    }



    .dm-program-head {

        display: flex;

        justify-content: center;

        align-items: center;

        position: relative;

        margin-top: 15px;

        margin-bottom: 10px;

    }



    /* garis kiri */

    .dm-program-head:before {

        content: "";

        width: 28px;

        height: 3px;

        border-radius: 50px;

        background: #ffc400;

    }



    /* garis kanan */

    .dm-program-head:after {

        content: "";

        width: 28px;

        height: 3px;

        border-radius: 50px;

        background: #ffc400;

    }



    .dm-program-head h2 {

        justify-content: center;

        gap: 12px;

        margin: 0 14px;

        font-size: .72rem;

        letter-spacing: .25em;

        text-align: center;

    }



    /* hapus garis bawaan desktop */

    .dm-program-head h2:before {

        display: none;

    }



    .dm-program-grid {

        gap: 12px;

    }



    .dm-program-card {

        min-height: 82px;


        padding: 14px 16px;


        gap: 14px;


        border-radius: 22px;

    }



    .dm-program-number {

        width: 48px;

        height: 48px;


        border-radius: 16px;


        font-size: .78rem;

    }



    .dm-program-info h3 {

        font-size: .95rem;

        margin-bottom: 5px;

    }



    .dm-program-info p {

        font-size: .72rem;

    }



    .dm-program-arrow {

        width: 30px;

        height: 30px;

        font-size: .75rem;

    }


}



/* ==========================
   MOBILE KECIL
========================== */

@media(max-width:380px) {


    .dm-program-section .container {

        padding-left: 12px;

        padding-right: 12px;

    }


    .dm-program-card {

        padding-left: 12px;

        padding-right: 12px;

    }


}

/* =====================================
   PREMIUM ADMISSION CTA
===================================== */


.dm-admission-section {

    padding: 80px 0;

}



.dm-admission-box {


    position: relative;

    overflow: hidden;


    border-radius: 38px;


    padding: 70px 40px;


    text-align: center;


    background:


        linear-gradient(135deg,

            #087c79,

            #064d55);


    box-shadow:


        0 35px 80px rgba(8, 70, 70, .25);


}



.dm-admission-glow {


    position: absolute;


    width: 400px;

    height: 400px;


    right: -150px;

    top: -180px;


    border-radius: 50%;


    background:

        rgba(255, 196, 0, .18);


}



.dm-admission-content {


    position: relative;

    z-index: 2;


    max-width: 800px;


    margin: auto;


}



.dm-admission-label {


    display: flex;


    justify-content: center;

    align-items: center;


    gap: 12px;


    margin-bottom: 25px;


    color: #ffc400;


    font-size: .8rem;


    font-weight: 900;


    letter-spacing: .25em;


}



.dm-admission-content h2 {


    margin: 0 auto 18px;


    color: white;


    font-size:

        clamp(2rem, 4vw, 3.5rem);


    line-height: 1;


    letter-spacing: -.05em;


    font-weight: 900;


}



.dm-admission-content p {


    max-width: 620px;


    margin:

        0 auto 35px;


    color:

        rgba(255, 255, 255, .75);


    line-height: 1.7;


}




.dm-admission-buttons {


    display: flex;


    justify-content: center;


    gap: 14px;


}




.dm-admission-primary,


.dm-admission-secondary {


    padding:

        15px 28px;


    border-radius: 50px;


    text-decoration: none;


    font-weight: 800;


    transition: .3s;


}



.dm-admission-primary {


    background: #ffc400;


    color: #10383b;


}



.dm-admission-secondary {


    color: white;


    border:

        1px solid rgba(255, 255, 255, .35);


}



.dm-admission-primary:hover,
.dm-admission-secondary:hover {


    transform: translateY(-3px);


}




@media(max-width:600px) {


    .dm-admission-section {


        padding: 50px 0;

    }



    .dm-admission-box {


        padding: 45px 22px;

        border-radius: 28px;


    }



    .dm-admission-content h2 {


        font-size: 2rem;


    }



    .dm-admission-buttons {


        flex-direction: column;


    }



    .dm-admission-primary,
    .dm-admission-secondary {


        width: 100%;


    }



}

/* =====================================
   PREMIUM NEWS SECTION
===================================== */


.dm-news-section {

    padding: 80px 0 90px;

}

.dm-news-section .container {

    max-width: 1400px;

    margin: 0 auto;

    padding-left: 40px;

    padding-right: 40px;

}


/* HEADER */

.dm-news-head {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 40px;

    margin-bottom: 35px;

}


.dm-news-head h2 {

    margin: 10px 0 0;

    color: #10383b;

    font-size: clamp(2rem, 3vw, 3rem);

    font-weight: 900;

    letter-spacing: -.04em;

}



.dm-eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #087c79;

    font-size: .8rem;

    font-weight: 900;

    letter-spacing: .22em;

}


.dm-eyebrow span {

    width: 35px;

    height: 3px;

    background: #ffc400;

    border-radius: 50px;

}



.dm-news-head p {

    max-width: 430px;

    color: #71878a;

}




/* FEATURE */
.dm-news-main {

    height: 430px;

    position: relative;

    overflow: hidden;

    border-radius: 32px;

    display: block;

}



.dm-news-main img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.dm-news-overlay {

    position: absolute;

    inset: auto 0 0;

    padding: 35px;

    color: white;

    background:

        linear-gradient(transparent,

            rgba(0, 30, 35, .9));

}



.dm-news-overlay span,
.dm-news-small span,
.dm-news-bottom span {

    color: #ffc400;

    font-size: .7rem;

    font-weight: 900;

    letter-spacing: .15em;

    text-transform: uppercase;

}



.dm-news-overlay h3 {

    font-size: 2rem;

    line-height: 1.15;

    margin: 10px 0;

}





/* SIDE */

/* =================================
   PRESTASI TERBARU - COMPACT VERSION
================================= */

.dm-news-side {

    background: white;

    border-radius: 28px;

    padding: 15px 35px 35px;

    border: 1px solid #e3eeee;

    height: fit-content;

}


.dm-news-side h3 {

    margin-bottom: 20px;

    font-size: 28px;

    color: #102d31;

}



/* ITEM */

.dm-side-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 28px;

}


/* IMAGE */

.dm-side-item img {

    width: 85px;

    height: 85px;

    border-radius: 18px;

    object-fit: cover;

    flex-shrink: 0;

}



/* TEXT */

.dm-side-item span {

    font-size: 13px;

    color: #0b7d7c;

    font-weight: 800;

    display: block;

    margin-bottom: 6px;

}


.dm-side-item h4 {

    font-size: 18px;

    line-height: 1.35;

    margin: 0 0 10px;

    color: #102d31;

    font-weight: 800;

}


.dm-side-item small {

    color: #899;

    font-size: 14px;

}

.dm-news-side {
    max-height: 562px;
    overflow: hidden;
}

.dm-news-side h3,
.dm-side-item {

    transform: translateY(-32px);

}


/* MOBILE */

@media(max-width:600px) {


    .dm-news-section {

        padding: 55px 0;

    }


    .dm-news-head {

        display: block;

    }


    .dm-news-feature {

        grid-template-columns: 1fr;

    }


    .dm-news-main {

        height: 300px;

    }


    .dm-news-overlay {

        padding: 20px;

    }



    .dm-news-overlay h3 {

        font-size: 1.3rem;

    }



    .dm-news-bottom {

        grid-template-columns: 1fr;

    }



}

/* =================================
   PREMIUM NEWS SECTION FINAL
================================= */

.dm-news-section {
    padding: 20px 0 90px;
}


.dm-news-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 35px;
    padding-right: 35px;
}


/* ===============================
   HEADER
================================ */

.dm-news-head {

    margin-top: -40px;

    margin-bottom: 35px;

}

.dm-kicker {

    display: inline-flex;

    align-items: center;

    gap: 28px;

    font-size: 1.05rem;

    letter-spacing: .35em;

    font-weight: 900;

    color: #0b7d7c;

}


.dm-kicker:before {

    content: "";

    width: 45px;

    height: 4px;

    background: #f4c400;

    border-radius: 20px;

}

@media(max-width:768px) {

    .dm-news-section .container {

        padding-left: 20px;
        padding-right: 20px;

    }

}

/* ===============================
   MAIN GRID
================================ */

.dm-news-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr) minmax(320px, .8fr);

    gap: 28px;

    align-items: start;

}



/* ===============================
   HERO SLIDER
================================ */

.dm-news-slider {

    position: relative;

    height: 560px;

}


.dm-slider-wrapper {

    position: relative;

    height: 560px;

    overflow: hidden;

    border-radius: 32px;

    background: #ddd;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .12);

}



.dm-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    transform: scale(1.05);

    transition:
        opacity .7s ease,
        transform .9s ease;

}


.dm-slide.active {

    opacity: 1;

    transform: scale(1);

}



.dm-slide-image {

    width: 100%;
    height: 100%;

}



.dm-slide-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

}




/* OVERLAY */

.dm-slide-overlay {

    position: absolute;

    inset: auto 0 0;

    padding: 45px;

    color: white;

    background:

        linear-gradient(0deg,
            rgba(0, 0, 0, .80),
            rgba(0, 0, 0, .35) 45%,
            transparent);

}



.dm-slide-overlay span {

    display: inline-block;

    background: #0b7d7c;

    padding: 8px 18px;

    border-radius: 50px;

    font-size: .72rem;

    font-weight: 700;

}



.dm-slide-overlay h3 {

    max-width: 850px;

    margin: 18px 0 12px;

    font-size: clamp(1.5rem, 3vw, 2.4rem);

    line-height: 1.25;

    font-weight: 850;

}



.dm-slide-overlay p {

    max-width: 850px;

    color: #f1f1f1;

    line-height: 1.7;

    font-size: 1rem;

}





/* =================================
   PREMIUM SLIDER FINAL
================================= */


/* SLIDER AREA */

.dm-slider-wrapper {

    position: relative;

    overflow: hidden;

    border-radius: 32px;

}



/* ===============================
   HIDE SLIDER CONTROL
================================ */


/* tombol panah */

.dm-slider-control {

    display: none;

}



/* titik slider */

.dm-dots {

    display: none;

}



/* ===============================
   SLIDE IMAGE
================================ */


.dm-slide-image {

    width: 100%;

    height: 100%;

}


.dm-slide-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



/* ===============================
   PREMIUM TEXT OVERLAY
================================ */


.dm-slide-overlay {

    position: absolute;

    left: 1px;

    right: 1px;

    bottom: 1px;

    padding: 25px 30px;

    color: white;

    border-radius: 22px;

    overflow: hidden;

    z-index: 5;

}



/* blur background */

.dm-slide-overlay::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .35),
            rgba(11, 125, 124, .18));

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-radius: 22px;

    border: 1px solid rgba(255, 255, 255, .35);

    box-shadow:

        inset 0 0 30px rgba(255, 255, 255, .15),
        0 15px 40px rgba(11, 125, 124, .15);

    z-index: -1;

}



/* kategori */

.dm-slide-overlay span {

    display: inline-block;

    background: #0b7d7c;

    padding: 7px 16px;

    border-radius: 30px;

    font-size: .7rem;

    font-weight: 800;

    margin-bottom: 12px;

}



/* judul */

.dm-slide-overlay h3 {

    font-size: clamp(1.4rem, 2.5vw, 2rem);

    line-height: 1.25;

    margin: 8px 0 12px;

    font-weight: 800;

    color: white;

}



/* deskripsi */

.dm-slide-overlay p {

    max-width: 900px;

    color: #f1f1f1;

    font-size: .95rem;

    line-height: 1.6;

    margin: 0;

}



/* ===============================
   MOBILE
================================= */


@media(max-width:768px) {


    .dm-slide-overlay {

        left: 1px;

        right: 1px;

        bottom: 1px;

        padding: 18px 20px;

        border-radius: 18px;

    }



    .dm-slide-overlay h3 {

        font-size: 1.25rem;

        line-height: 1.3;

    }



    .dm-slide-overlay p {

        font-size: .85rem;

        line-height: 1.5;

    }



    .dm-slide-overlay span {

        font-size: .65rem;

        padding: 6px 13px;

    }



}


/* ===============================
   KICKER MOBILE
================================= */


@media(max-width:768px) {


    .dm-kicker {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 12px;

        width: 100%;

        white-space: nowrap;

        font-size: .75rem;

        letter-spacing: .22em;

    }



    .dm-kicker:before,
    .dm-kicker:after {

        content: "";

        width: 35px;

        height: 3px;

        background: #e8c400;

        border-radius: 20px;

    }


}



/* ===============================
   PRESTASI SIDE
================================ */


.dm-news-side {

    background: white;

    border-radius: 30px;

    padding: 30px;

    border: 1px solid #e4eeee;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .04);

}


.dm-news-side h3 {

    margin-bottom: 30px;

    color: #102d31;

    font-size: 1.4rem;

}



.dm-side-item {

    display: flex;

    gap: 18px;

    margin-bottom: 28px;

    transition: .3s;

}



.dm-side-item:hover {

    transform: translateX(6px);

}



.dm-side-item img {

    width: 90px;

    height: 90px;

    flex-shrink: 0;

    border-radius: 18px;

    object-fit: cover;

}



.dm-side-item span {

    font-size: .7rem;

    color: #0b7d7c;

    font-weight: 800;

}



.dm-side-item h4 {

    margin: 6px 0;

    font-size: .95rem;

    line-height: 1.45;

    color: #102d31;

}



.dm-side-item small {

    color: #899;

}





/* ===============================
   NEWS HORIZONTAL SCROLL
================================ */


.dm-news-scroll {

    margin-top: 45px;

    display: flex;

    gap: 24px;

    overflow-x: auto;

    scroll-behavior: smooth;

    padding-bottom: 15px;

}


.dm-news-scroll::-webkit-scrollbar {

    height: 7px;

}


.dm-news-scroll::-webkit-scrollbar-thumb {

    background: #0b7d7c;

    border-radius: 20px;

}




.dm-news-card {

    flex:

        0 0 330px;

    background: white;

    border-radius: 28px;

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    border: 1px solid #e5eeee;

    transition: .35s;

}



.dm-news-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .1);

}



.dm-news-card img {

    width: 100%;

    height: 210px;

    object-fit: cover;

}



.dm-news-card div {

    padding: 24px;

}



.dm-news-card span {

    color: #0b7d7c;

    font-size: .72rem;

    font-weight: 800;

}



.dm-news-card h4 {

    margin: 12px 0;

    font-size: 1.05rem;

    line-height: 1.45;

    color: #102d31;

}



.dm-news-card p {

    color: #718;

    font-size: .9rem;

    line-height: 1.7;

}





/* ===============================
   RESPONSIVE
================================ */


@media(max-width:992px) {

    .dm-news-layout {

        grid-template-columns: 1fr;

    }


    .dm-news-slider,
    .dm-slider-wrapper {

        height: 460px;

    }


    .dm-news-side {

        margin-top: 20px;

    }


}



@media(max-width:600px) {


    .dm-news-section {

        padding: 15px 0;

    }


    .dm-slider-wrapper {

        height: 420px;

        border-radius: 22px;

    }


    .dm-slide-overlay {

        padding: 25px;

    }


    .dm-slide-overlay h3 {

        font-size: 1.35rem;

    }


    .dm-slide-overlay p {

        font-size: .85rem;

    }


    .dm-slider-control {

        right: 20px;

        bottom: 20px;

    }



    .dm-side-item img {

        width: 75px;

        height: 75px;

    }



    .dm-news-card {

        flex-basis: 280px;

    }



}

.dm-slide {
    display: block;
    text-decoration: none;
    color: inherit;
}

.dm-side-item {
    text-decoration: none;
    color: inherit;
}

.dm-side-item:hover h4 {
    color: #0b7d7c;
}

/* =====================================
   FINAL POSITION FIX ONLY
   TIDAK MENGUBAH STYLE
===================================== */


/* ===============================
   SAMAKAN POSISI DENGAN SECTION ATAS
================================ */

.dm-news-section .container {

    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 35px;
    padding-right: 35px;

}



/* ===============================
   KABAR DARUL MA'ARIF HEADER
   SAMAKAN DENGAN PROGRAM UNGGULAN
================================ */


.dm-news-head {

    margin-top: -20px;

    margin-bottom: 35px;

}


.dm-kicker {

    margin-left: 0;

    display: flex;

    align-items: center;

    gap: 12px;

}


/* garis kiri */

.dm-kicker:before {

    width: 45px;

    height: 4px;

}


/* garis kanan hanya mobile */

.dm-kicker:after {

    display: none;

}



/* ===============================
   LAYOUT BERITA
   SUPAYA TIDAK MELEBAR KE PINGGIR
================================ */


.dm-news-layout {

    width: 100%;

    margin: 0 auto;

}



/* slider dan side sejajar */

.dm-news-slider {

    width: 100%;

}



/* ===============================
   BERITA BAWAH
================================ */


.dm-news-scroll {

    width: 100%;

    margin-left: 0;

}



/* ===============================
   MOBILE HEADER KABAR
================================ */


@media(max-width:768px) {


    .dm-news-section .container {

        padding-left: 20px;
        padding-right: 20px;

    }


    .dm-kicker {

        justify-content: center;

        width: 100%;

        font-size: .75rem;

        letter-spacing: .22em;

    }


    .dm-kicker:before,
    .dm-kicker:after {

        content: "";

        display: block;

        width: 35px;

        height: 3px;

        background: #ffc400;

        border-radius: 50px;

    }


    .dm-kicker:after {

        display: block;

    }


}

/* FINAL FIX POSITION NEWS ONLY */
/* =====================================
   NEWS ALIGNMENT FINAL
===================================== */

.dm-news-section .container {
    max-width: 1600px;
    width: 100%;
    padding-left: 33px;
    padding-right: 33px;
}


.dm-news-head {
    margin-left: 0;
}


.dm-news-layout {
    width: 100%;
    margin-left: 0;
}


.dm-news-slider {
    width: 100%;
}


.dm-slider-wrapper {
    width: 100%;
}


.dm-news-scroll {
    width: 100%;
    margin-left: 0;
}



@media(max-width:768px) {

    .dm-news-section .container {
        padding-left: 12px;
        padding-right: 12px;
    }

}

/* =====================================
   PREMIUM ADMISSION SECTION
===================================== */


.dm-admission-box {

    max-width: 1450px;

    margin: 0 auto;

    min-height: 360px;

    padding: 70px 80px;

    border-radius: 42px;

    background:

        linear-gradient(135deg,
            #087d7b,
            #07545b);

    color: white;

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}



/* dekorasi bubble */

.dm-admission-box::before {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    right: -130px;

    top: -160px;

    background:

        rgba(255, 255, 255, .12);

    border-radius: 50%;

}



.dm-admission-box::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    left: -90px;

    bottom: -100px;

    background:

        rgba(232, 196, 0, .12);

    border-radius: 50%;

}




/* label */

.dm-admission-label {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 15px;

    color: #e8c400;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .35em;

}



/* garis kecil kiri kanan */

.dm-admission-label::before,
.dm-admission-label::after {

    content: "";

    width: 45px;

    height: 3px;

    background: #e8c400;

    border-radius: 20px;

}





.dm-admission-box h2 {

    position: relative;

    z-index: 2;

    font-size:

        clamp(2rem, 4vw, 3.6rem);

    line-height: 1.1;

    max-width: 900px;

    margin: 25px auto 15px;

    font-weight: 900;

}




.dm-admission-box p {

    position: relative;

    z-index: 2;

    max-width: 700px;

    margin: auto;

    color: #d9eeee;

    font-size: 18px;

    line-height: 1.7;

}




.dm-admission-btn {

    position: relative;

    z-index: 2;

    margin-top: 35px;

    display: flex;

    gap: 18px;

}




.dm-admission-btn a {

    padding: 14px 34px;

    border-radius: 40px;

    font-weight: 800;

    transition: .3s;

}



.dm-admission-btn a:first-child {

    background: #e8c400;

    color: #102d31;

}



.dm-admission-btn a:last-child {

    border: 1px solid rgba(255, 255, 255, .4);

    color: white;

}



.dm-admission-btn a:hover {

    transform: translateY(-3px);

}



/* =========================
 MOBILE
========================= */


@media(max-width:768px) {


    .dm-admission-box {


        min-height: 430px;

        padding: 45px 25px;

        border-radius: 32px;


    }



    .dm-admission-label {

        font-size: 11px;

        letter-spacing: .25em;

    }



    .dm-admission-label::before,
    .dm-admission-label::after {

        width: 25px;

    }



    .dm-admission-box h2 {

        font-size: 32px;

        line-height: 1.2;

    }



    .dm-admission-box p {

        font-size: 15px;

    }



    .dm-admission-btn {

        flex-direction: column;

        width: 100%;

    }



    .dm-admission-btn a {

        width: 100%;

        text-align: center;

    }



}

/* =====================================
   ADMISSION CENTER COMPACT PREMIUM
===================================== */


.dm-admission-section {

    padding: 55px 0 70px;

}



.dm-admission-box {

    position: relative;

    overflow: hidden;

    border-radius: 38px;

    padding: 45px 40px;

    text-align: center;

    background:

        linear-gradient(135deg,
            #087c79,
            #064d55);

    box-shadow:

        0 30px 70px rgba(8, 70, 70, .22);

}



/* bubble kanan atas */

.dm-admission-glow {

    position: absolute;

    width: 360px;

    height: 360px;

    right: -140px;

    top: -160px;

    border-radius: 50%;

    background:

        rgba(255, 255, 255, .10);

}



/* isi */

.dm-admission-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: auto;

}



.dm-admission-label {

    margin-bottom: 18px;

}



.dm-admission-content h2 {

    margin-bottom: 15px;

    font-size:

        clamp(2rem, 3.5vw, 3rem);

}



.dm-admission-content p {

    margin-bottom: 25px;

}



.dm-admission-buttons {

    margin-top: 10px;

}




@media(max-width:600px) {


    .dm-admission-section {

        padding: 35px 0 45px;

    }



    .dm-admission-box {

        padding: 40px 22px;

        border-radius: 30px;

    }



    .dm-admission-content h2 {

        font-size: 1.9rem;

    }



}

/* =========================================
   ADMISSION CENTER - FINAL ADJUSTMENT
   Lebih lebar + lebih gepeng + responsive
========================================= */


/* Lebarkan area banner */
.dm-admission-section .container {
    max-width: 1500px;
    width: calc(100% - 60px);
}


/* Bentuk banner lebih gepeng */
.dm-admission-box {

    padding: 45px 50px !important;

}


/* Kurangi jarak atas bawah section */
.dm-admission-section {

    padding: 40px 0 !important;

}


/* Isi tetap center */
.dm-admission-content {

    max-width: 900px;
    margin: auto;

}



/* =========================================
   MOBILE
========================================= */

@media(max-width:768px) {

    .dm-admission-section .container {

        width: calc(100% - 30px);

    }


    .dm-admission-box {

        padding: 40px 22px !important;

    }


    .dm-admission-section {

        padding: 25px 0 !important;

    }


}

.footer-modern{
    align-items:start;
}


.footer-map-wrap{
    max-width:1200px;
    margin:45px auto 0;
}


.footer-map-wrap iframe{

    width:100%;

    height:230px;

    border-radius:28px;

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
    0 20px 45px rgba(0,0,0,.18);

}


@media(max-width:900px){

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

}


@media(max-width:600px){

    .site-footer{
        padding-top:50px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-map-wrap iframe{
        height:200px;
    }

}

/* FOOTER PREMIUM DECORATION */

.site-footer::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    right:-180px;

    top:-180px;

}


.site-footer::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(232,196,0,.10);

    left:-150px;

    bottom:-150px;

}


/* mengikuti lebar section atas */

.site-footer .container{

    max-width:1450px;

    margin:auto;

    padding-left:30px;

    padding-right:30px;

}

@media(max-width:768px){

    .site-footer{

        width:100%;

        border-radius:28px 28px 0 0;

    }


    .footer-grid{

        grid-template-columns:1fr;

        gap:30px;

    }


    .site-footer .container{

        padding-left:20px;

        padding-right:20px;

    }

}

.footer-grid{

    align-items:start;

}


.footer-grid>div{

    min-height:220px;

}


.footer-contact p{

    color:#d5eeee;

    line-height:1.8;

}


.footer-grid a{

    text-decoration:none;

}

/* =================================
   FOOTER CONTENT POSITION FIX
================================= */

.footer-grid{

    transform:translateY(-35px);

}


.footer-grid h3{

    margin-top:0;

}


.footer-grid > div{

    padding-top:0;

}


.footer-brand{

    transform:translateY(-5px);

}

/* =================================
   FOOTER CONTACT ALIGNMENT FIX
================================= */

.footer-contact{

    transform:translateY(-5px);

}


.footer-contact p{

    margin-bottom:22px;

}


/* samakan jarak antar kolom */

.footer-grid{

    align-items:flex-start;

}

/* =====================================
   FOOTER CONTACT ALIGN FIX
===================================== */

.footer-contact{
    margin-top:0;
}


.footer-contact p{
    margin-top:0;
    margin-bottom:0;
}

/* ===================================
   FOOTER SOCIAL ICON
   MENGIKUTI STYLE HEADER
=================================== */

.footer-social{

    display:flex;
    gap:12px;
    margin-top:28px;

}


.footer-social a{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.25);

    transition:.3s ease;

}


.footer-social svg{

    width:20px;
    height:20px;

    fill:white;

}


/* FACEBOOK */

.footer-social a[aria-label="Facebook"]{

    background:#1877f2;

}


/* INSTAGRAM */

.footer-social a[aria-label="Instagram"]{

    background:
    radial-gradient(
        circle at 30% 110%,
        #fdf497,
        #fd5949 45%,
        #d6249f 70%,
        #285aeb
    );

}


/* YOUTUBE */

.footer-social a[aria-label="YouTube"]{

    background:#ff0000;

}


/* HOVER */

.footer-social a:hover{

    transform:
    translateY(-4px)
    scale(1.08);

}

/* =====================================================
   FINAL PROFILE PAGE
   WARNA SELARAS DENGAN HALAMAN BERANDA
===================================================== */

:root {
    --profile-teal-1: #178075;
    --profile-teal-2: #0a6d6c;
    --profile-teal-3: #075568;
    --profile-teal-4: #06475d;

    --profile-dark: #073c43;
    --profile-ink: #15383c;

    --profile-gold-1: #ffad00;
    --profile-gold-2: #ffc400;
    --profile-gold-3: #ffda14;
    --profile-gold-soft: #fff3b2;

    --profile-aqua: #66d4d3;
    --profile-aqua-soft: #d8f3ef;

    --profile-soft: #f3f8f6;
    --profile-line: #dcebe7;
}


/* =====================================================
   HERO PROFIL
===================================================== */

.profile-premium-hero {
    position: relative;
    isolation: isolate;

    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    margin: 8px auto 0;
    padding: 72px 0 84px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.06) 17%,
            transparent 35%
        ),
        radial-gradient(
            circle at 84% 22%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%
        ),
        radial-gradient(
            ellipse at 50% 115%,
            rgba(71, 219, 205, 0.40) 0%,
            rgba(21, 158, 151, 0.18) 34%,
            transparent 65%
        ),
        linear-gradient(
            132deg,
            var(--profile-teal-1) 0%,
            var(--profile-teal-2) 43%,
            var(--profile-teal-3) 72%,
            var(--profile-teal-4) 100%
        );

    box-shadow:
        0 28px 65px rgba(3, 49, 52, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}


/* Bubble kiri */

.profile-premium-hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -190px;
    left: -165px;

    width: 470px;
    height: 470px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        inset 18px 18px 50px rgba(255, 255, 255, 0.055),
        inset -20px -20px 50px rgba(2, 67, 73, 0.08);

    pointer-events: none;
}


/* Bubble kanan */

.profile-premium-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: 40px;
    right: -185px;

    width: 570px;
    height: 570px;

    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 33% 28%,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.018) 45%,
            transparent 72%
        );

    box-shadow:
        0 0 0 67px rgba(255, 255, 255, 0.018),
        0 0 0 134px rgba(255, 255, 255, 0.01),
        inset 20px 20px 70px rgba(255, 255, 255, 0.035);

    pointer-events: none;
}


.profile-premium-hero > .container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 96px), 1320px);
    max-width: none;

    margin: 0 auto;
}


.profile-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.03fr)
        minmax(360px, 0.97fr);

    align-items: center;

    gap: 64px;
}


/* Label profil */

.profile-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


.profile-label span {
    width: 38px;
    height: 3px;

    flex-shrink: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--profile-gold-1),
            var(--profile-gold-3)
        );

    box-shadow:
        0 0 13px rgba(255, 176, 0, 0.35);
}


/* Judul */

.profile-hero-text h1 {
    margin: 0 0 24px;

    color: #ffffff;

    font-size: clamp(52px, 5.2vw, 82px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.055em;
}


.profile-hero-text h1 span,
.profile-hero-text h1 strong {
    display: block;
}


.profile-hero-text h1 strong {
    font-weight: inherit;

    background:
        linear-gradient(
            110deg,
            var(--profile-gold-1) 0%,
            var(--profile-gold-2) 45%,
            var(--profile-gold-3) 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


.profile-hero-text p {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 17px;
    font-weight: 500;
    line-height: 1.85;
}


/* =====================================================
   GAMBAR HERO
===================================================== */

.profile-hero-image {
    display: flex;
    justify-content: center;
}


.profile-premium-hero .image-frame {
    position: relative;

    width: 100%;
    max-width: 535px;

    padding: 12px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.10)
        );

    box-shadow:
        0 28px 55px rgba(2, 42, 48, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.profile-premium-hero .image-frame::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: 28px;
    right: 30px;
    left: 30px;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--profile-gold-1),
            var(--profile-gold-3),
            transparent
        );

    opacity: 0.85;
}


.profile-premium-hero .image-frame img {
    width: 100%;
    height: 390px;

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

    border-radius: 25px;
}


/* =====================================================
   STATISTIK
===================================================== */

.profile-stat-section {
    position: relative;
    z-index: 5;

    margin-top: -50px;
    padding-bottom: 28px;
}


.profile-stat-section > .container {
    width: min(calc(100% - 120px), 1280px);
    max-width: none;
}


.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    padding: 30px 22px;

    overflow: hidden;

    border: 1px solid rgba(7, 85, 104, 0.08);
    border-radius: 28px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 25px 60px rgba(3, 49, 52, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);

    backdrop-filter: blur(12px);
}


.profile-stat-grid > div {
    position: relative;

    padding: 6px 20px;

    text-align: center;

    border-right: 1px solid var(--profile-line);
}


.profile-stat-grid > div:last-child {
    border-right: 0;
}


.profile-stat-grid > div::before {
    content: "";

    display: block;

    width: 30px;
    height: 3px;

    margin: 0 auto 13px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--profile-gold-1),
            var(--profile-gold-3)
        );
}


.profile-stat-grid strong {
    display: block;

    color: var(--profile-teal-2);

    font-size: clamp(30px, 3vw, 46px);
    font-weight: 900;
    line-height: 1;
}


.profile-stat-grid span {
    display: block;

    margin-top: 10px;

    color: #667b7e;

    font-size: 13px;
    font-weight: 700;
}


/* =====================================================
   JUDUL SETIAP BAGIAN
===================================================== */

.section-heading-premium {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 46px;
}


.section-heading-premium > span {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--profile-ink);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--profile-gold-1),
            var(--profile-gold-3)
        );

    box-shadow:
        0 13px 27px rgba(255, 176, 0, 0.22);

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
}


.section-heading-premium h2 {
    margin: 0;

    color: var(--profile-dark);

    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.035em;
}


/* =====================================================
   SEJARAH
===================================================== */

.profile-section-modern {
    position: relative;

    padding: 92px 0 105px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(102, 212, 211, 0.17),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--profile-soft) 100%
        );
}


.profile-section-modern > .container {
    width: min(calc(100% - 40px), 1220px);
    max-width: none;
}


.timeline {
    position: relative;

    max-width: 980px;

    margin: 0 auto;
}


.timeline::before {
    content: "";

    position: absolute;

    top: 5px;
    bottom: 5px;
    left: 22px;

    width: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--profile-gold-1),
            var(--profile-gold-3),
            var(--profile-aqua)
        );
}


.timeline-item {
    position: relative;

    margin-bottom: 28px;
    padding-left: 78px;
}


.timeline-item:last-child {
    margin-bottom: 0;
}


.timeline-dot {
    position: absolute;

    top: 27px;
    left: 8px;

    width: 31px;
    height: 31px;

    border: 7px solid #ffffff;
    border-radius: 50%;

    background: var(--profile-teal-2);

    box-shadow:
        0 0 0 3px var(--profile-gold-2),
        0 8px 18px rgba(7, 85, 104, 0.18);
}


.timeline-content {
    position: relative;

    padding: 28px 32px;

    overflow: hidden;

    border: 1px solid var(--profile-line);
    border-left: 5px solid var(--profile-gold-2);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 18px 42px rgba(3, 49, 52, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.timeline-item:nth-child(even) .timeline-content {
    border-left-color: var(--profile-aqua);
}


.timeline-content:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 50px rgba(3, 49, 52, 0.12);
}


.timeline-content h3 {
    margin: 0 0 8px;

    color: var(--profile-dark);

    font-size: 21px;
    font-weight: 900;
}


.timeline-content p {
    margin: 0;

    color: #667b7e;

    line-height: 1.8;
}


/* =====================================================
   VISI DAN MISI
===================================================== */

.vision-premium {
    padding: 92px 0;

    background: #edf7f4;
}


.vision-premium > .container {
    width: min(calc(100% - 40px), 1320px);
    max-width: none;
}


.vision-wrapper {
    position: relative;
    isolation: isolate;

    padding: 64px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 34px;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(255, 255, 255, 0.16),
            transparent 30%
        ),
        radial-gradient(
            ellipse at 88% 110%,
            rgba(102, 212, 211, 0.25),
            transparent 45%
        ),
        linear-gradient(
            132deg,
            var(--profile-teal-1) 0%,
            var(--profile-teal-2) 43%,
            var(--profile-teal-3) 72%,
            var(--profile-teal-4) 100%
        );

    box-shadow:
        0 28px 65px rgba(3, 49, 52, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}


.vision-wrapper::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -210px;
    right: -190px;

    width: 470px;
    height: 470px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    box-shadow:
        0 0 0 60px rgba(255, 255, 255, 0.018),
        0 0 0 120px rgba(255, 255, 255, 0.01);
}


.vision-main span {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--profile-gold-3);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.28em;
}


.vision-main span::before {
    content: "";

    width: 35px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--profile-gold-1),
            var(--profile-gold-3)
        );
}


.vision-main h2 {
    max-width: 1000px;

    margin: 20px 0 0;

    color: #ffffff;

    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.025em;
}


.mission-area {
    margin-top: 48px;
    padding-top: 38px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
}


.mission-area h3 {
    margin: 0 0 22px;

    color: var(--profile-gold-3);

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.25em;
}


.mission-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


.mission-items > div {
    min-height: 92px;

    display: flex;
    align-items: center;

    padding: 22px 24px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 19px;

    background: rgba(255, 255, 255, 0.09);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;

    backdrop-filter: blur(10px);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


.mission-items > div:nth-child(2),
.mission-items > div:nth-child(4) {
    color: var(--profile-ink);

    border-color: rgba(255, 225, 95, 0.85);

    background:
        linear-gradient(
            135deg,
            var(--profile-gold-1),
            var(--profile-gold-3)
        );
}


.mission-items > div:nth-child(3) {
    color: var(--profile-ink);

    border-color: rgba(171, 246, 239, 0.65);

    background:
        linear-gradient(
            135deg,
            #78ded9,
            var(--profile-aqua)
        );
}


.mission-items > div:hover {
    transform: translateY(-5px);
}


/* =====================================================
   STRUKTUR ORGANISASI
===================================================== */

.organization-section {
    padding: 96px 0 105px;

    background: #ffffff;
}


.organization-section > .container {
    width: min(calc(100% - 40px), 1220px);
    max-width: none;
}


.organization-chart {
    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}


.org-main {
    min-width: 290px;

    display: inline-flex;
    flex-direction: column;

    padding: 25px 48px;

    border: 1px solid rgba(255, 218, 20, 0.75);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--profile-gold-1),
            var(--profile-gold-3)
        );

    box-shadow:
        0 20px 44px rgba(255, 176, 0, 0.19);
}


.organization-chart > .org-line + .org-main {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.20);

    background:
        linear-gradient(
            135deg,
            var(--profile-teal-1),
            var(--profile-teal-3)
        );

    box-shadow:
        0 20px 44px rgba(3, 49, 52, 0.18);
}


.org-main strong {
    color: var(--profile-ink);

    font-size: 17px;
    font-weight: 900;
}


.org-main span {
    margin-top: 5px;

    color: rgba(21, 56, 60, 0.75);

    font-size: 13px;
    font-weight: 700;
}


.organization-chart > .org-line + .org-main strong {
    color: #ffffff;
}


.organization-chart > .org-line + .org-main span {
    color: rgba(255, 255, 255, 0.76);
}


.org-line {
    width: 3px;
    height: 42px;

    margin: 0 auto;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--profile-gold-1),
            var(--profile-teal-2)
        );
}


.org-children {
    position: relative;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-top: 44px;
}


.org-children::before {
    content: "";

    position: absolute;

    top: -23px;
    left: 16.67%;
    right: 16.67%;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--profile-gold-1),
            var(--profile-aqua),
            var(--profile-teal-2)
        );
}


.org-children > div {
    position: relative;

    min-height: 125px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 24px;

    border: 1px solid var(--profile-line);
    border-radius: 21px;

    background: #ffffff;

    box-shadow:
        0 17px 38px rgba(3, 49, 52, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.org-children > div::before {
    content: "";

    position: absolute;

    top: -25px;
    left: 50%;

    width: 3px;
    height: 25px;

    background: var(--profile-aqua);

    transform: translateX(-50%);
}


.org-children > div:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #e2f8f4,
            var(--profile-aqua-soft)
        );
}


.org-children > div:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #fff9d9,
            var(--profile-gold-soft)
        );
}


.org-children > div:hover {
    transform: translateY(-6px);

    box-shadow:
        0 24px 48px rgba(3, 49, 52, 0.12);
}


.org-children strong {
    color: var(--profile-dark);

    font-size: 16px;
    font-weight: 900;
}


.org-children span {
    margin-top: 6px;

    color: #718385;

    font-size: 13px;
}


/* =====================================================
   LEGALITAS
===================================================== */

.legality-section {
    position: relative;

    padding: 96px 0 115px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(255, 196, 0, 0.12),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            var(--profile-soft) 0%,
            #ffffff 100%
        );
}


.legality-section > .container {
    width: min(calc(100% - 40px), 1320px);
    max-width: none;
}


.legal-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
}


.legal-modern-grid > div {
    position: relative;

    min-height: 210px;

    padding: 72px 28px 28px;

    overflow: hidden;

    border: 1px solid var(--profile-line);
    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 18px 42px rgba(3, 49, 52, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.legal-modern-grid > div::before {
    position: absolute;

    top: 22px;
    left: 25px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--profile-teal-1),
            var(--profile-teal-3)
        );

    font-size: 11px;
    font-weight: 900;
}


.legal-modern-grid > div:nth-child(1)::before {
    content: "01";
}


.legal-modern-grid > div:nth-child(2)::before {
    content: "02";
}


.legal-modern-grid > div:nth-child(3)::before {
    content: "03";
}


.legal-modern-grid > div:nth-child(4)::before {
    content: "04";
}


.legal-modern-grid > div:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #e1f8f4,
            var(--profile-aqua-soft)
        );
}


.legal-modern-grid > div:nth-child(3) {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.18);

    background:
        linear-gradient(
            135deg,
            var(--profile-teal-1),
            var(--profile-teal-3)
        );
}


.legal-modern-grid > div:nth-child(4) {
    background:
        linear-gradient(
            145deg,
            #fff8d1,
            var(--profile-gold-soft)
        );
}


.legal-modern-grid > div:nth-child(4)::before {
    color: var(--profile-ink);

    background:
        linear-gradient(
            135deg,
            var(--profile-gold-1),
            var(--profile-gold-3)
        );
}


.legal-modern-grid > div:hover {
    transform: translateY(-7px);

    box-shadow:
        0 27px 53px rgba(3, 49, 52, 0.13);
}


.legal-modern-grid h3 {
    margin: 0 0 10px;

    color: var(--profile-dark);

    font-size: 19px;
    font-weight: 900;
}


.legal-modern-grid p {
    margin: 0;

    color: #6e8082;

    font-size: 14px;
    line-height: 1.75;
}


.legal-modern-grid > div:nth-child(3) h3 {
    color: #ffffff;
}


.legal-modern-grid > div:nth-child(3) p {
    color: rgba(255, 255, 255, 0.75);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .profile-premium-hero {
        padding: 60px 0 72px;
    }


    .profile-premium-hero > .container {
        width: min(calc(100% - 60px), 1180px);
    }


    .profile-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.9fr);

        gap: 38px;
    }


    .profile-hero-text h1 {
        font-size: clamp(46px, 6vw, 66px);
    }


    .profile-premium-hero .image-frame img {
        height: 345px;
    }


    .legal-modern-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   HP DAN TABLET KECIL
===================================================== */

@media (max-width: 800px) {

    .profile-premium-hero {
        padding: 42px 0 64px;
    }


    .profile-premium-hero::before {
        top: -150px;
        left: -210px;

        width: 390px;
        height: 390px;
    }


    .profile-premium-hero::after {
        top: 310px;
        right: -320px;

        width: 520px;
        height: 520px;
    }


    .profile-premium-hero > .container {
        width: calc(100% - 38px);
    }


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

        gap: 32px;
    }


    .profile-hero-text {
        text-align: center;
    }


    .profile-label {
        justify-content: center;

        margin-bottom: 18px;
    }


    .profile-hero-text h1 {
        font-size: clamp(42px, 11vw, 58px);
    }


    .profile-hero-text p {
        max-width: 570px;

        margin: 0 auto;

        font-size: 15px;
        line-height: 1.75;
    }


    .profile-premium-hero .image-frame {
        max-width: 580px;

        margin: 0 auto;
    }


    .profile-premium-hero .image-frame img {
        height: 300px;
    }


    /* Statistik menjadi 2 x 2 */

    .profile-stat-section {
        margin-top: -38px;
    }


    .profile-stat-section > .container {
        width: calc(100% - 38px);
    }


    .profile-stat-grid {
        grid-template-columns: repeat(2, 1fr);

        padding: 18px;
    }


    .profile-stat-grid > div {
        padding: 20px 10px;
    }


    .profile-stat-grid > div:nth-child(2) {
        border-right: 0;
    }


    .profile-stat-grid > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--profile-line);
    }


    .profile-stat-grid strong {
        font-size: 34px;
    }


    .profile-stat-grid span {
        font-size: 12px;
    }


    .profile-section-modern,
    .vision-premium,
    .organization-section,
    .legality-section {
        padding-top: 70px;
        padding-bottom: 75px;
    }


    .vision-wrapper {
        padding: 42px 30px;
        border-radius: 27px;
    }


    .mission-items {
        grid-template-columns: 1fr;
    }


    .org-children {
        grid-template-columns: 1fr;

        max-width: 550px;

        margin-right: auto;
        margin-left: auto;

        gap: 18px;
    }


    .org-children::before {
        display: none;
    }


    .org-children > div::before {
        display: none;
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 520px) {

    .profile-premium-hero {
        width: var(
            --dm-page-frame,
            calc(100% - 16px)
        );

        margin-top: 5px;
        padding: 32px 0 48px;

        border-radius: 18px;
    }


    .profile-premium-hero > .container {
        width: calc(100% - 28px);
    }


    .profile-label {
        gap: 9px;

        font-size: 9px;
        letter-spacing: 0.18em;
    }


    .profile-label span {
        width: 26px;
        height: 2px;
    }


    .profile-hero-text h1 {
        margin-bottom: 18px;

        font-size: clamp(34px, 12vw, 47px);
        line-height: 1;
    }


    .profile-hero-text p {
        font-size: 13px;
        line-height: 1.7;
    }


    .profile-premium-hero .image-frame {
        padding: 7px;

        border-radius: 23px;
    }


    .profile-premium-hero .image-frame::before {
        top: 18px;
        right: 22px;
        left: 22px;

        height: 2px;
    }


    .profile-premium-hero .image-frame img {
        height: 220px;

        border-radius: 17px;
    }


    .profile-stat-section {
        margin-top: -27px;
        padding-bottom: 14px;
    }


    .profile-stat-section > .container {
        width: calc(100% - 28px);
    }


    .profile-stat-grid {
        padding: 10px;

        border-radius: 22px;
    }


    .profile-stat-grid > div {
        padding: 17px 6px;
    }


    .profile-stat-grid > div::before {
        width: 22px;

        margin-bottom: 10px;
    }


    .profile-stat-grid strong {
        font-size: 27px;
    }


    .profile-stat-grid span {
        max-width: 105px;

        margin: 7px auto 0;

        font-size: 10px;
        line-height: 1.35;
    }


    .profile-section-modern,
    .vision-premium,
    .organization-section,
    .legality-section {
        padding-top: 56px;
        padding-bottom: 60px;
    }


    .profile-section-modern > .container,
    .vision-premium > .container,
    .organization-section > .container,
    .legality-section > .container {
        width: calc(100% - 28px);
    }


    .section-heading-premium {
        gap: 13px;

        margin-bottom: 30px;
    }


    .section-heading-premium > span {
        width: 43px;
        height: 43px;

        border-radius: 13px;

        font-size: 11px;
    }


    .section-heading-premium h2 {
        font-size: 29px;
    }


    .timeline::before {
        left: 15px;
    }


    .timeline-item {
        margin-bottom: 20px;
        padding-left: 52px;
    }


    .timeline-dot {
        top: 23px;
        left: 3px;

        width: 27px;
        height: 27px;

        border-width: 6px;
    }


    .timeline-content {
        padding: 22px 20px;

        border-radius: 18px;
    }


    .timeline-content h3 {
        font-size: 18px;
    }


    .timeline-content p {
        font-size: 13px;
        line-height: 1.7;
    }


    .vision-wrapper {
        padding: 36px 20px;

        border-radius: 23px;
    }


    .vision-main h2 {
        margin-top: 16px;

        font-size: 26px;
        line-height: 1.42;
    }


    .mission-area {
        margin-top: 32px;
        padding-top: 28px;
    }


    .mission-items > div {
        min-height: auto;

        padding: 18px;

        border-radius: 16px;

        font-size: 13px;
    }


    .org-main {
        width: 100%;
        min-width: 0;

        padding: 22px 18px;
    }


    .org-children {
        margin-top: 34px;
    }


    .org-children > div {
        min-height: 105px;

        padding: 20px;
    }


    .legal-modern-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .legal-modern-grid > div {
        min-height: 175px;

        padding: 65px 22px 24px;

        border-radius: 19px;
    }

}


/* =====================================================
   BAHASA ARAB
===================================================== */

html[dir="rtl"] .profile-label {
    flex-direction: row-reverse;
}


html[dir="rtl"] .timeline::before {
    right: 22px;
    left: auto;
}


html[dir="rtl"] .timeline-item {
    padding-right: 78px;
    padding-left: 0;
}


html[dir="rtl"] .timeline-dot {
    right: 8px;
    left: auto;
}


html[dir="rtl"] .timeline-content {
    border-right: 5px solid var(--profile-gold-2);
    border-left: 1px solid var(--profile-line);
}


@media (max-width: 520px) {

    html[dir="rtl"] .timeline::before {
        right: 15px;
    }


    html[dir="rtl"] .timeline-item {
        padding-right: 52px;
    }


    html[dir="rtl"] .timeline-dot {
        right: 3px;
    }

}


/* =====================================================
   DARK MODE
===================================================== */

html[data-theme="dark"] .profile-stat-grid,
html[data-theme="dark"] .timeline-content,
html[data-theme="dark"] .org-children > div,
html[data-theme="dark"] .legal-modern-grid > div {
    border-color: #25494b;

    background: #0c292d;
}


html[data-theme="dark"] .profile-section-modern,
html[data-theme="dark"] .organization-section,
html[data-theme="dark"] .legality-section {
    background: #071e21;
}


html[data-theme="dark"] .vision-premium {
    background: #0a2529;
}


html[data-theme="dark"] .section-heading-premium h2,
html[data-theme="dark"] .timeline-content h3,
html[data-theme="dark"] .org-children strong,
html[data-theme="dark"] .legal-modern-grid h3 {
    color: #efffff;
}


html[data-theme="dark"] .profile-stat-grid span,
html[data-theme="dark"] .timeline-content p,
html[data-theme="dark"] .org-children span,
html[data-theme="dark"] .legal-modern-grid p {
    color: #aac3c1;
}


html[data-theme="dark"] .timeline-dot {
    border-color: #071e21;
}

/* =====================================================
   FINAL PREMIUM INSTITUTIONS PAGE
   YPP DARUL MA'ARIF
===================================================== */

:root {
    --institution-teal-1: #17857b;
    --institution-teal-2: #08716f;
    --institution-teal-3: #07586a;
    --institution-teal-4: #05475d;

    --institution-dark: #073f48;
    --institution-ink: #123a40;

    --institution-gold-1: #ffad00;
    --institution-gold-2: #ffc400;
    --institution-gold-3: #ffda18;

    --institution-aqua: #66d8d3;
    --institution-aqua-soft: #dcf7f3;

    --institution-soft: #f1f8f6;
    --institution-line: #dcebe7;
}


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

.institutions-premium-hero {
    position: relative;
    isolation: isolate;

    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    margin: 8px auto 0;
    padding: 76px 0 62px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 5% 3%,
            rgba(255, 255, 255, 0.18),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 58% 110%,
            rgba(65, 220, 205, 0.28),
            transparent 57%
        ),
        linear-gradient(
            130deg,
            var(--institution-teal-1) 0%,
            var(--institution-teal-2) 40%,
            var(--institution-teal-3) 70%,
            var(--institution-teal-4) 100%
        );

    box-shadow:
        0 28px 65px rgba(3, 48, 54, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}


.institutions-premium-hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -210px;
    left: -175px;

    width: 520px;
    height: 520px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;

    box-shadow:
        0 0 0 75px rgba(255, 255, 255, 0.022),
        0 0 0 150px rgba(255, 255, 255, 0.012);

    pointer-events: none;
}


.institutions-premium-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: -245px;
    bottom: -310px;

    width: 650px;
    height: 650px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.08),
            transparent 62%
        );

    pointer-events: none;
}


.institutions-hero-layout {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 96px), 1390px);
    max-width: none;

    display: grid;
    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(420px, 0.98fr);

    align-items: center;

    gap: 76px;
}


/* Teks hero */

.institutions-hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.23em;
    text-transform: uppercase;
}


.institutions-hero-eyebrow > span {
    width: 40px;
    height: 3px;

    flex-shrink: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--institution-gold-1),
            var(--institution-gold-3)
        );
}


.institutions-hero-content h1 {
    margin: 0 0 25px;

    font-size: clamp(54px, 5.3vw, 82px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.055em;
}


.institutions-hero-content h1 span,
.institutions-hero-content h1 strong {
    display: block;
}


.institutions-hero-content h1 strong {
    font-weight: inherit;

    background:
        linear-gradient(
            110deg,
            var(--institution-gold-1),
            var(--institution-gold-2),
            var(--institution-gold-3)
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


.institutions-hero-content > p {
    max-width: 680px;

    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 16px;
    font-weight: 500;
    line-height: 1.85;
}


/* Tombol hero */

.institutions-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 31px;
}


.institutions-primary-button,
.institutions-secondary-button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    padding: 6px 7px 6px 22px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 900;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}


.institutions-primary-button {
    color: var(--institution-ink);

    border: 1px solid var(--institution-gold-3);

    background:
        linear-gradient(
            135deg,
            var(--institution-gold-1),
            var(--institution-gold-3)
        );

    box-shadow:
        0 15px 34px rgba(255, 176, 0, 0.25);
}


.institutions-secondary-button {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.28);

    background: rgba(255, 255, 255, 0.09);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.institutions-primary-button b,
.institutions-secondary-button b {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 15px;
}


.institutions-primary-button b {
    color: #ffffff;

    background: var(--institution-dark);
}


.institutions-secondary-button b {
    color: var(--institution-dark);

    background: #ffffff;
}


.institutions-primary-button:hover,
.institutions-secondary-button:hover {
    transform: translateY(-4px);
}


/* Statistik hero */

.institutions-hero-statistics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

    margin-top: 40px;
}


.institutions-hero-statistics > div {
    min-height: 91px;

    padding: 17px 18px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.075);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.institutions-hero-statistics strong {
    display: block;

    color: var(--institution-gold-3);

    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}


.institutions-hero-statistics span {
    display: block;

    margin-top: 9px;

    color: rgba(255, 255, 255, 0.73);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
}


/* =====================================================
   VISUAL HERO
===================================================== */

.institutions-hero-visual {
    display: flex;
    justify-content: center;
}


.institutions-visual-panel {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 570px;
    min-height: 510px;

    padding: 27px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.19),
            rgba(255, 255, 255, 0.07)
        );

    box-shadow:
        0 30px 65px rgba(2, 39, 46, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


.institutions-visual-panel::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 90px;
    left: 50%;

    width: 340px;
    height: 340px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 196, 0, 0.20),
            rgba(102, 216, 211, 0.12) 42%,
            transparent 72%
        );

    transform: translateX(-50%);
}


.institutions-visual-top {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 13px;
}


.institutions-visual-logo {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    padding: 5px;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.14);
}


.institutions-visual-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.institutions-visual-top span,
.institutions-visual-top strong {
    display: block;
}


.institutions-visual-top span {
    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
}


.institutions-visual-top strong {
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.63);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.institutions-visual-center {
    position: relative;
    z-index: 4;

    max-width: 270px;

    margin: 56px auto 0;

    text-align: center;
}


.institutions-visual-center > span {
    color: var(--institution-gold-3);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


.institutions-visual-center > strong {
    display: block;

    margin-top: 7px;

    color: #ffffff;

    font-size: 78px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.07em;
}


.institutions-visual-center p {
    margin: 6px 0 0;

    color: rgba(255, 255, 255, 0.70);

    font-size: 12px;
    font-weight: 700;
}


.institutions-gate-image {
    position: absolute;
    z-index: 2;

    right: -12%;
    bottom: -8px;
    left: -12%;

    width: 124%;
    max-width: none;

    opacity: 0.50;

    filter:
        saturate(0.72)
        brightness(0.88);
}


.institutions-visual-badge {
    position: absolute;
    z-index: 6;

    min-width: 118px;

    padding: 14px 17px;

    border-radius: 17px;

    box-shadow:
        0 15px 32px rgba(2, 39, 46, 0.22);
}


.institutions-visual-badge span,
.institutions-visual-badge strong {
    display: block;
}


.institutions-visual-badge span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.institutions-visual-badge strong {
    margin-top: 4px;

    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}


.institutions-visual-badge-formal {
    right: 24px;
    bottom: 108px;

    color: var(--institution-ink);

    background:
        linear-gradient(
            135deg,
            var(--institution-gold-1),
            var(--institution-gold-3)
        );
}


.institutions-visual-badge-nonformal {
    bottom: 42px;
    left: 24px;

    color: var(--institution-ink);

    background:
        linear-gradient(
            135deg,
            #8be8e1,
            var(--institution-aqua)
        );
}


/* =====================================================
   DAFTAR LEMBAGA
===================================================== */

.institutions-directory {
    position: relative;

    padding: 100px 0 110px;

    background:
        radial-gradient(
            circle at 100% 2%,
            rgba(102, 216, 211, 0.13),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--institution-soft) 100%
        );
}


.institutions-directory > .container {
    width: min(calc(100% - 40px), 1320px);
    max-width: none;
}


.institutions-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 44px;
}


.institutions-section-heading > div {
    max-width: 720px;
}


.institutions-section-eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    color: var(--institution-teal-2);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.21em;
    text-transform: uppercase;
}


.institutions-section-eyebrow span {
    width: 37px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--institution-gold-1),
            var(--institution-gold-3)
        );
}


.institutions-section-heading h2 {
    margin: 15px 0 0;

    color: var(--institution-dark);

    font-size: clamp(38px, 4vw, 56px);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -0.045em;
}


.institutions-section-heading > p {
    max-width: 470px;

    margin: 0;

    color: #657d7f;

    font-size: 14px;
    line-height: 1.8;
}


/* Toolbar */

.institutions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 33px;
    padding: 13px;

    border: 1px solid var(--institution-line);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow:
        0 16px 38px rgba(4, 54, 59, 0.07);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.institutions-filter-list {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.institutions-filter-pill {
    min-height: 44px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 6px 8px 6px 17px;

    color: #587174;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;

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


.institutions-filter-pill small {
    min-width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    padding: 0 7px;

    border-radius: 999px;

    background: var(--institution-soft);

    font-size: 10px;
}


.institutions-filter-pill:hover {
    background: var(--institution-soft);

    transform: translateY(-2px);
}


.institutions-filter-pill.active {
    color: #ffffff;

    border-color: var(--institution-teal-2);

    background:
        linear-gradient(
            135deg,
            var(--institution-teal-1),
            var(--institution-teal-3)
        );

    box-shadow:
        0 11px 25px rgba(6, 101, 104, 0.20);
}


.institutions-filter-pill.active small {
    color: var(--institution-ink);

    background:
        linear-gradient(
            135deg,
            var(--institution-gold-1),
            var(--institution-gold-3)
        );
}


/* Pencarian */

.institutions-search-box {
    min-width: 280px;
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 17px;

    border: 1px solid var(--institution-line);
    border-radius: 999px;

    background: var(--institution-soft);
}


.institutions-search-box svg {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    fill: none;
    stroke: var(--institution-teal-2);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}


.institutions-search-box input {
    width: 100%;

    padding: 0;

    color: var(--institution-ink);

    border: 0;
    outline: 0;

    background: transparent;

    font-size: 12px;
    font-weight: 700;
}


.institutions-search-box input::placeholder {
    color: #8aa09f;
}


/* =====================================================
   KARTU LEMBAGA
===================================================== */

.institutions-premium-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px;
}


.institution-card-premium {
    --card-accent: var(--institution-gold-2);
    --card-soft: #fff8d6;

    position: relative;
    isolation: isolate;

    min-height: 405px;

    padding: 27px;

    overflow: hidden;

    color: var(--institution-ink);

    border: 1px solid var(--institution-line);
    border-radius: 25px;

    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #ffffff 73%,
            var(--card-soft) 100%
        );

    box-shadow:
        0 18px 42px rgba(3, 49, 52, 0.07);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}


.institution-card--nonformal {
    --card-accent: var(--institution-aqua);
    --card-soft: var(--institution-aqua-soft);
}


.institution-card-premium::after {
    content: "";

    position: absolute;
    z-index: -2;

    top: 0;
    right: 0;
    left: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--card-accent),
            transparent
        );
}


.institution-card-decoration {
    position: absolute;
    z-index: -1;

    top: -105px;
    right: -95px;

    width: 245px;
    height: 245px;

    border: 1px solid color-mix(
        in srgb,
        var(--card-accent) 30%,
        transparent
    );

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            color-mix(
                in srgb,
                var(--card-accent) 14%,
                transparent
            ),
            transparent 69%
        );
}


.institution-card-premium:hover {
    border-color:
        color-mix(
            in srgb,
            var(--card-accent) 55%,
            var(--institution-line)
        );

    transform: translateY(-8px);

    box-shadow:
        0 29px 57px rgba(3, 49, 52, 0.14);
}


.institution-card-premium .institution-card-top {
    position: relative;
    z-index: 2;

    align-items: center;
}


.institution-card-premium .institution-index {
    color: rgba(7, 63, 72, 0.14);

    font-size: 31px;
    font-weight: 900;
    line-height: 1;
}


.institution-card-premium .institution-type {
    display: inline-flex;
    align-items: center;

    min-height: 30px;

    padding: 0 12px;

    color: var(--institution-ink);

    border: 1px solid
        color-mix(
            in srgb,
            var(--card-accent) 45%,
            transparent
        );

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--card-accent) 22%,
            #ffffff
        );

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.1em;
}


.institution-card-logo {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    margin: 29px 0 22px;
    padding: 7px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--card-accent) 42%,
            transparent
        );

    border-radius: 20px;

    background:
        color-mix(
            in srgb,
            var(--card-accent) 20%,
            #ffffff
        );

    box-shadow:
        0 12px 25px
        color-mix(
            in srgb,
            var(--card-accent) 16%,
            transparent
        );
}


.institution-card-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.institution-card-content {
    position: relative;
    z-index: 2;
}


.institution-card-premium h2 {
    margin: 0 0 13px;

    color: var(--institution-dark);

    font-size: 22px;
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.025em;
}


.institution-card-premium p {
    margin: 0;

    color: #667d7f;

    font-size: 13px;
    line-height: 1.75;
}


.institution-card-premium .institution-card-actions {
    position: relative;
    z-index: 3;

    margin-top: auto;
    padding-top: 25px;

    color: inherit;
}


.institution-detail-link {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    color: var(--institution-teal-2);

    font-size: 11px;
    font-weight: 900;
}


.institution-detail-link b {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--institution-teal-1),
            var(--institution-teal-3)
        );

    transition: transform 0.2s ease;
}


.institution-detail-link:hover b {
    transform: rotate(45deg);
}


.institution-whatsapp-link {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border-radius: 50%;

    background: #25d366;

    box-shadow:
        0 10px 23px rgba(37, 211, 102, 0.25);

    font-size: 10px;
    font-weight: 900;

    transition: transform 0.2s ease;
}


.institution-whatsapp-link:hover {
    transform: scale(1.08);
}


/* =====================================================
   EKSTRAKURIKULER
===================================================== */

.institutions-extra-section {
    padding: 0 0 110px;

    background:
        linear-gradient(
            180deg,
            var(--institution-soft),
            #ffffff
        );
}


.institutions-extra-section > .container {
    width: min(calc(100% - 40px), 1420px);
    max-width: none;
}


.institutions-extra-shell {
    position: relative;
    isolation: isolate;

    padding: 72px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 34px;

    background:
        radial-gradient(
            circle at 7% 0%,
            rgba(255, 255, 255, 0.17),
            transparent 30%
        ),
        radial-gradient(
            circle at 94% 93%,
            rgba(102, 216, 211, 0.24),
            transparent 34%
        ),
        linear-gradient(
            130deg,
            var(--institution-teal-1),
            var(--institution-teal-3) 65%,
            var(--institution-teal-4)
        );

    box-shadow:
        0 30px 70px rgba(3, 49, 52, 0.18);
}


.institutions-extra-shell::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -270px;
    right: -250px;

    width: 590px;
    height: 590px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    box-shadow:
        0 0 0 75px rgba(255, 255, 255, 0.018),
        0 0 0 150px rgba(255, 255, 255, 0.01);
}


.institutions-extra-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 46px;
}


.institutions-extra-heading > div {
    max-width: 760px;
}


.institutions-extra-eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    color: var(--institution-gold-3);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.23em;
    text-transform: uppercase;
}


.institutions-extra-eyebrow span {
    width: 38px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--institution-gold-1),
            var(--institution-gold-3)
        );
}


.institutions-extra-heading h2 {
    margin: 16px 0 0;

    color: #ffffff;

    font-size: clamp(37px, 4vw, 55px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.045em;
}


.institutions-extra-heading > p {
    max-width: 450px;

    margin: 0;

    color: rgba(255, 255, 255, 0.70);

    font-size: 14px;
    line-height: 1.8;
}


.institutions-extra-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 14px;
}


.institutions-extra-card {
    min-height: 225px;

    display: flex;
    flex-direction: column;

    padding: 23px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 21px;

    background: rgba(255, 255, 255, 0.085);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}


.institutions-extra-card:nth-child(2),
.institutions-extra-card:nth-child(5) {
    color: var(--institution-ink);

    border-color: rgba(255, 226, 91, 0.72);

    background:
        linear-gradient(
            135deg,
            var(--institution-gold-1),
            var(--institution-gold-3)
        );
}


.institutions-extra-card:nth-child(4) {
    color: var(--institution-ink);

    border-color: rgba(167, 244, 237, 0.65);

    background:
        linear-gradient(
            135deg,
            #87e8e1,
            var(--institution-aqua)
        );
}


.institutions-extra-card:hover {
    transform: translateY(-7px);

    background-color: rgba(255, 255, 255, 0.14);
}


.institutions-extra-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.institutions-extra-number {
    color: rgba(255, 255, 255, 0.45);

    font-size: 11px;
    font-weight: 900;
}


.institutions-extra-symbol {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.10);

    font-size: 12px;
}


.institutions-extra-card:nth-child(2)
.institutions-extra-number,
.institutions-extra-card:nth-child(4)
.institutions-extra-number,
.institutions-extra-card:nth-child(5)
.institutions-extra-number {
    color: rgba(18, 58, 64, 0.50);
}


.institutions-extra-card:nth-child(2)
.institutions-extra-symbol,
.institutions-extra-card:nth-child(4)
.institutions-extra-symbol,
.institutions-extra-card:nth-child(5)
.institutions-extra-symbol {
    border-color: rgba(18, 58, 64, 0.15);

    background: rgba(255, 255, 255, 0.28);
}


.institutions-extra-card h3 {
    margin: auto 0 11px;

    color: inherit;

    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}


.institutions-extra-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.67);

    font-size: 11px;
    line-height: 1.7;
}


.institutions-extra-card:nth-child(2) p,
.institutions-extra-card:nth-child(4) p,
.institutions-extra-card:nth-child(5) p {
    color: rgba(18, 58, 64, 0.72);
}


/* =====================================================
   CTA PSB
===================================================== */

.institutions-admission-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 48px;
    padding-top: 42px;

    border-top: 1px solid rgba(255, 255, 255, 0.14);
}


.institutions-admission-cta > div:first-child {
    max-width: 710px;
}


.institutions-admission-cta > div:first-child > span {
    color: var(--institution-gold-3);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.21em;
    text-transform: uppercase;
}


.institutions-admission-cta h3 {
    margin: 11px 0 8px;

    color: #ffffff;

    font-size: clamp(25px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
}


.institutions-admission-cta p {
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 13px;
}


.institutions-admission-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    flex-shrink: 0;
}


.institutions-admission-primary,
.institutions-admission-whatsapp {
    min-height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 0 21px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;

    transition: transform 0.2s ease;
}


.institutions-admission-primary {
    color: var(--institution-ink);

    background:
        linear-gradient(
            135deg,
            var(--institution-gold-1),
            var(--institution-gold-3)
        );
}


.institutions-admission-whatsapp {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.20);

    background: rgba(255, 255, 255, 0.10);
}


.institutions-admission-primary:hover,
.institutions-admission-whatsapp:hover {
    transform: translateY(-3px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1120px) {

    .institutions-hero-layout {
        width: min(calc(100% - 60px), 1250px);

        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.9fr);

        gap: 40px;
    }


    .institutions-hero-content h1 {
        font-size: clamp(48px, 6vw, 66px);
    }


    .institutions-visual-panel {
        min-height: 470px;
    }


    .institutions-extra-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .institutions-extra-card:nth-child(4),
    .institutions-extra-card:nth-child(5) {
        min-height: 190px;
    }

}


@media (max-width: 900px) {

    .institutions-premium-hero {
        padding: 58px 0 65px;
    }


    .institutions-hero-layout {
        grid-template-columns: 1fr;

        gap: 48px;
    }


    .institutions-hero-content {
        max-width: 700px;

        margin: 0 auto;

        text-align: center;
    }


    .institutions-hero-eyebrow {
        justify-content: center;
    }


    .institutions-hero-content > p {
        margin-inline: auto;
    }


    .institutions-hero-actions {
        justify-content: center;
    }


    .institutions-hero-statistics {
        max-width: 620px;

        margin-right: auto;
        margin-left: auto;
    }


    .institutions-hero-visual {
        max-width: 650px;

        margin: 0 auto;
    }


    .institutions-section-heading,
    .institutions-extra-heading {
        display: block;
    }


    .institutions-section-heading > p,
    .institutions-extra-heading > p {
        max-width: 650px;

        margin-top: 18px;
    }


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


    .institutions-toolbar {
        align-items: stretch;
        flex-direction: column;
    }


    .institutions-search-box {
        width: 100%;
        min-width: 0;
    }


    .institutions-extra-shell {
        padding: 54px 38px;
    }


    .institutions-admission-cta {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 760px) {

    .institutions-premium-hero {
        width: var(
            --dm-page-frame,
            calc(100% - 16px)
        );

        margin-top: 5px;
        padding: 43px 0 53px;

        border-radius: 18px;
    }


    .institutions-hero-layout {
        width: calc(100% - 30px);

        gap: 34px;
    }


    .institutions-hero-eyebrow {
        gap: 9px;

        margin-bottom: 17px;

        font-size: 9px;
        letter-spacing: 0.16em;
    }


    .institutions-hero-eyebrow > span {
        width: 27px;
        height: 2px;
    }


    .institutions-hero-content h1 {
        margin-bottom: 19px;

        font-size: clamp(38px, 11.5vw, 52px);
        line-height: 1;
    }


    .institutions-hero-content > p {
        font-size: 13px;
        line-height: 1.72;
    }


    .institutions-hero-actions {
        gap: 9px;

        margin-top: 25px;
    }


    .institutions-primary-button,
    .institutions-secondary-button {
        min-height: 48px;

        padding-left: 17px;

        font-size: 10px;
    }


    .institutions-primary-button b,
    .institutions-secondary-button b {
        width: 36px;
        height: 36px;
    }


    .institutions-hero-statistics {
        gap: 7px;

        margin-top: 29px;
    }


    .institutions-hero-statistics > div {
        min-height: 81px;

        padding: 14px 8px;

        border-radius: 14px;
    }


    .institutions-hero-statistics strong {
        font-size: 22px;
    }


    .institutions-hero-statistics span {
        font-size: 8px;
    }


    .institutions-visual-panel {
        min-height: 390px;

        padding: 20px;

        border-radius: 25px;
    }


    .institutions-visual-logo {
        width: 44px;
        height: 44px;

        border-radius: 13px;
    }


    .institutions-visual-top span {
        font-size: 12px;
    }


    .institutions-visual-top strong {
        font-size: 7px;
    }


    .institutions-visual-center {
        margin-top: 37px;
    }


    .institutions-visual-center > strong {
        font-size: 63px;
    }


    .institutions-visual-badge {
        min-width: 103px;

        padding: 11px 13px;

        border-radius: 14px;
    }


    .institutions-visual-badge-formal {
        right: 16px;
        bottom: 86px;
    }


    .institutions-visual-badge-nonformal {
        bottom: 25px;
        left: 16px;
    }


    .institutions-directory {
        padding: 72px 0 78px;
    }


    .institutions-directory > .container,
    .institutions-extra-section > .container {
        width: calc(100% - 28px);
    }


    .institutions-section-heading {
        margin-bottom: 30px;
    }


    .institutions-section-eyebrow {
        font-size: 9px;
    }


    .institutions-section-heading h2 {
        margin-top: 12px;

        font-size: 34px;
    }


    .institutions-section-heading > p {
        font-size: 13px;
    }


    .institutions-toolbar {
        padding: 10px;

        border-radius: 18px;
    }


    .institutions-filter-list {
        display: grid;
        grid-template-columns: 1fr 1fr;

        width: 100%;
    }


    .institutions-filter-pill {
        width: 100%;

        justify-content: space-between;

        padding-left: 13px;
    }


    .institutions-filter-pill:first-child {
        grid-column: 1 / -1;
    }


    .institutions-premium-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    .institution-card-premium {
        min-height: 370px;

        padding: 23px;

        border-radius: 21px;
    }


    .institution-card-logo {
        width: 61px;
        height: 61px;

        margin: 24px 0 19px;
    }


    .institution-card-premium h2 {
        font-size: 21px;
    }


    .institutions-extra-section {
        padding-bottom: 75px;
    }


    .institutions-extra-shell {
        padding: 43px 20px;

        border-radius: 24px;
    }


    .institutions-extra-heading {
        margin-bottom: 30px;
    }


    .institutions-extra-heading h2 {
        font-size: 33px;
    }


    .institutions-extra-heading > p {
        font-size: 13px;
    }


    .institutions-extra-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .institutions-extra-card,
    .institutions-extra-card:nth-child(4),
    .institutions-extra-card:nth-child(5) {
        min-height: 180px;
    }


    .institutions-admission-cta {
        gap: 25px;

        margin-top: 35px;
        padding-top: 32px;
    }


    .institutions-admission-cta h3 {
        font-size: 27px;
    }


    .institutions-admission-actions {
        width: 100%;
    }


    .institutions-admission-primary,
    .institutions-admission-whatsapp {
        width: 100%;
    }

}


/* =====================================================
   LAYAR HP KECIL
===================================================== */

@media (max-width: 390px) {

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


    .institutions-hero-statistics > div {
        min-height: auto;
    }


    .institutions-filter-list {
        grid-template-columns: 1fr;
    }


    .institutions-filter-pill:first-child {
        grid-column: auto;
    }


    .institutions-visual-panel {
        min-height: 355px;
    }

}


/* =====================================================
   RTL / BAHASA ARAB
===================================================== */

html[dir="rtl"] .institutions-hero-eyebrow,
html[dir="rtl"] .institutions-section-eyebrow,
html[dir="rtl"] .institutions-extra-eyebrow {
    flex-direction: row-reverse;
}


html[dir="rtl"] .institutions-filter-pill {
    padding-right: 17px;
    padding-left: 8px;
}


html[dir="rtl"] .institution-card-decoration {
    right: auto;
    left: -95px;
}


/* =====================================================
   DARK MODE
===================================================== */

html[data-theme="dark"] .institutions-directory {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(102, 216, 211, 0.08),
            transparent 26%
        ),
        #071f23;
}


html[data-theme="dark"] .institutions-toolbar,
html[data-theme="dark"] .institution-card-premium:not(:nth-child(3n)) {
    border-color: #24494b;

    background: #0d2a2e;
}


html[data-theme="dark"] .institutions-section-heading h2,
html[data-theme="dark"] .institution-card-premium:not(:nth-child(3n)) h2 {
    color: #f1ffff;
}


html[data-theme="dark"] .institutions-section-heading > p,
html[data-theme="dark"] .institution-card-premium:not(:nth-child(3n)) p {
    color: #adc4c2;
}


html[data-theme="dark"] .institutions-search-box {
    border-color: #294d4e;

    background: #102f33;
}


html[data-theme="dark"] .institutions-search-box input {
    color: #ffffff;
}


html[data-theme="dark"] .institutions-extra-section {
    background: #071f23;
}

/* =====================================================
   FINAL FIX HERO LEMBAGA
   COMPACT DESKTOP + PROFESSIONAL MOBILE
===================================================== */


/* =====================================================
   DESKTOP
===================================================== */

.institutions-premium-hero {
    box-sizing: border-box;

    /* Menyamakan jarak dengan hero Beranda dan Profil */
    margin-top: 8px;

    /* Memendekkan hero bagian atas dan bawah */
    padding-top: 42px;
    padding-bottom: 55px;

    /* Menghapus kemungkinan tinggi minimum bawaan */
    min-height: auto;
}


.institutions-hero-layout {
    width: min(calc(100% - 82px), 1320px);

    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.88fr);

    align-items: center;

    /* Merapatkan teks dengan visual */
    gap: 46px;
}


/* Label kecil hero */

.institutions-hero-eyebrow {
    margin-bottom: 15px;

    font-size: 10px;
    letter-spacing: 0.20em;
}


/* Judul hero */

.institutions-hero-content h1 {
    margin-bottom: 18px;

    /* Sebelumnya terlalu besar */
    font-size: clamp(43px, 4.3vw, 65px);

    line-height: 0.98;
    letter-spacing: -0.045em;
}


/* Deskripsi hero */

.institutions-hero-content > p {
    max-width: 610px;

    font-size: 14px;
    line-height: 1.72;
}


/* Tombol hero */

.institutions-hero-actions {
    margin-top: 23px;
}


.institutions-primary-button,
.institutions-secondary-button {
    min-height: 48px;

    gap: 12px;

    padding-top: 5px;
    padding-right: 6px;
    padding-bottom: 5px;
    padding-left: 18px;
}


.institutions-primary-button b,
.institutions-secondary-button b {
    width: 37px;
    height: 37px;
}


/* Statistik hero */

.institutions-hero-statistics {
    gap: 10px;

    margin-top: 27px;
}


.institutions-hero-statistics > div {
    min-height: 72px;

    padding: 13px 15px;

    border-radius: 15px;
}


.institutions-hero-statistics strong {
    font-size: 23px;
}


.institutions-hero-statistics span {
    margin-top: 6px;

    font-size: 9px;
    line-height: 1.3;
}


/* =====================================================
   VISUAL KANAN
===================================================== */

.institutions-visual-panel {
    max-width: 515px;

    /* Sebelumnya sekitar 510px dan membuat hero terlalu panjang */
    min-height: 385px;

    padding: 22px;

    border-radius: 28px;
}


.institutions-visual-logo {
    width: 47px;
    height: 47px;

    border-radius: 14px;
}


.institutions-visual-top span {
    font-size: 13px;
}


.institutions-visual-center {
    margin-top: 34px;
}


.institutions-visual-center > strong {
    font-size: 61px;
}


.institutions-visual-center p {
    font-size: 10px;
}


.institutions-gate-image {
    right: -7%;
    bottom: -24px;
    left: -7%;

    width: 114%;
}


.institutions-visual-badge {
    min-width: 102px;

    padding: 11px 14px;

    border-radius: 14px;
}


.institutions-visual-badge strong {
    font-size: 21px;
}


.institutions-visual-badge-formal {
    right: 19px;
    bottom: 84px;
}


.institutions-visual-badge-nonformal {
    bottom: 24px;
    left: 19px;
}


/* =====================================================
   LAPTOP KECIL DAN TABLET LANDSCAPE
===================================================== */

@media (max-width: 1100px) {

    .institutions-premium-hero {
        padding-top: 38px;
        padding-bottom: 40px;
    }


    .institutions-hero-layout {
        width: min(calc(100% - 54px), 1180px);

        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, 0.82fr);

        gap: 32px;
    }


    .institutions-hero-content h1 {
        font-size: clamp(40px, 5vw, 57px);
    }


    .institutions-hero-content > p {
        font-size: 13px;
    }


    .institutions-visual-panel {
        min-height: 350px;
    }


    .institutions-visual-center {
        margin-top: 28px;
    }


    .institutions-visual-center > strong {
        font-size: 54px;
    }

}


/* =====================================================
   TABLET DAN HP
===================================================== */

@media (max-width: 820px) {

    .institutions-premium-hero {
        width: var(
            --dm-page-frame,
            calc(100% - 16px)
        );

        margin-top: 5px;

        padding-top: 31px;
        padding-bottom: 34px;

        border-radius: 18px;
    }


    .institutions-hero-layout {
        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        gap: 25px;
    }


    /* Teks dibuat lebih rapi di tengah */

    .institutions-hero-content {
        width: 100%;

        margin: 0 auto;

        text-align: center;
    }


    .institutions-hero-eyebrow {
        justify-content: center;

        margin-bottom: 13px;

        font-size: 8px;
        letter-spacing: 0.15em;
    }


    .institutions-hero-eyebrow > span {
        width: 25px;
        height: 2px;
    }


    .institutions-hero-content h1 {
        max-width: 620px;

        margin-right: auto;
        margin-bottom: 15px;
        margin-left: auto;

        font-size: clamp(35px, 9vw, 49px);
        line-height: 1;
        letter-spacing: -0.04em;
    }


    .institutions-hero-content > p {
        max-width: 570px;

        margin-right: auto;
        margin-left: auto;

        font-size: 13px;
        line-height: 1.65;
    }


    /* Tombol dibuat simetris */

    .institutions-hero-actions {
        justify-content: center;

        gap: 9px;

        margin-top: 20px;
    }


    .institutions-primary-button,
    .institutions-secondary-button {
        min-height: 45px;

        padding-left: 15px;

        font-size: 9px;
    }


    .institutions-primary-button b,
    .institutions-secondary-button b {
        width: 34px;
        height: 34px;
    }


    /* Statistik tetap 3 kolom tetapi lebih ringkas */

    .institutions-hero-statistics {
        max-width: 560px;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 7px;

        margin: 22px auto 0;
    }


    .institutions-hero-statistics > div {
        min-width: 0;
        min-height: 67px;

        padding: 11px 6px;

        border-radius: 13px;
    }


    .institutions-hero-statistics strong {
        font-size: 20px;
    }


    .institutions-hero-statistics span {
        font-size: 7px;
        line-height: 1.3;
    }


    /* Visual diperkecil agar tidak memanjang */

    .institutions-hero-visual {
        width: 100%;
        max-width: 570px;

        margin: 0 auto;
    }


    .institutions-visual-panel {
        width: 100%;
        max-width: 570px;
        min-height: 300px;

        padding: 18px;

        border-radius: 22px;
    }


    .institutions-visual-logo {
        width: 40px;
        height: 40px;

        border-radius: 12px;
    }


    .institutions-visual-top {
        gap: 10px;
    }


    .institutions-visual-top span {
        font-size: 11px;
    }


    .institutions-visual-top strong {
        font-size: 6px;
        letter-spacing: 0.10em;
    }


    .institutions-visual-center {
        margin-top: 22px;
    }


    .institutions-visual-center > span {
        font-size: 7px;
    }


    .institutions-visual-center > strong {
        font-size: 48px;
    }


    .institutions-visual-center p {
        font-size: 8px;
    }


    .institutions-gate-image {
        right: -4%;
        bottom: -29px;
        left: -4%;

        width: 108%;
    }


    .institutions-visual-badge {
        min-width: 88px;

        padding: 9px 11px;

        border-radius: 12px;
    }


    .institutions-visual-badge span {
        font-size: 7px;
    }


    .institutions-visual-badge strong {
        font-size: 18px;
    }


    .institutions-visual-badge-formal {
        right: 14px;
        bottom: 63px;
    }


    .institutions-visual-badge-nonformal {
        bottom: 17px;
        left: 14px;
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 520px) {

    .institutions-premium-hero {
        padding-top: 26px;
        padding-bottom: 28px;
    }


    .institutions-hero-layout {
        width: calc(100% - 24px);

        gap: 20px;
    }


    .institutions-hero-content h1 {
        margin-bottom: 13px;

        font-size: clamp(31px, 10.5vw, 43px);
        line-height: 1.02;
    }


    .institutions-hero-content > p {
        font-size: 12px;
        line-height: 1.6;
    }


    /* Tombol tersusun vertikal dan memenuhi lebar */

    .institutions-hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;

        gap: 8px;
    }


    .institutions-primary-button,
    .institutions-secondary-button {
        width: 100%;
        min-height: 45px;

        justify-content: space-between;
    }


    /* Statistik tidak terlalu sempit */

    .institutions-hero-statistics {
        gap: 5px;

        margin-top: 18px;
    }


    .institutions-hero-statistics > div {
        min-height: 64px;

        padding: 10px 4px;
    }


    .institutions-hero-statistics strong {
        font-size: 19px;
    }


    .institutions-hero-statistics span {
        max-width: 85px;

        margin-right: auto;
        margin-left: auto;

        font-size: 6.5px;
    }


    /* Visual khusus HP */

    .institutions-visual-panel {
        min-height: 255px;

        padding: 14px;

        border-radius: 19px;
    }


    .institutions-visual-top {
        gap: 8px;
    }


    .institutions-visual-logo {
        width: 35px;
        height: 35px;

        padding: 4px;

        border-radius: 10px;
    }


    .institutions-visual-top span {
        font-size: 9px;
    }


    .institutions-visual-top strong {
        display: none;
    }


    .institutions-visual-center {
        margin-top: 17px;
    }


    .institutions-visual-center > strong {
        font-size: 40px;
    }


    .institutions-visual-center p {
        font-size: 7px;
    }


    .institutions-gate-image {
        bottom: -21px;

        width: 110%;
    }


    .institutions-visual-badge {
        min-width: 72px;

        padding: 7px 9px;

        border-radius: 10px;
    }


    .institutions-visual-badge span {
        font-size: 6px;
    }


    .institutions-visual-badge strong {
        font-size: 15px;
    }


    .institutions-visual-badge-formal {
        right: 9px;
        bottom: 50px;
    }


    .institutions-visual-badge-nonformal {
        bottom: 10px;
        left: 9px;
    }

}


/* =====================================================
   HP SANGAT KECIL
===================================================== */

@media (max-width: 370px) {

    .institutions-hero-content h1 {
        font-size: 30px;
    }


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


    .institutions-hero-statistics > div {
        min-height: auto;
    }


    .institutions-hero-statistics span {
        max-width: none;
    }


    .institutions-visual-panel {
        min-height: 235px;
    }

}

/* =====================================================
   FINAL WARNA KARTU LEMBAGA
   FORMAL = KUNING
   NONFORMAL = AQUA
===================================================== */


/* =====================================================
   DASAR SEMUA KARTU
===================================================== */

.institution-card-premium {
    position: relative;

    color: #123f45;

    border: 1px solid #d8e9e5;

    box-shadow:
        0 18px 42px rgba(3, 49, 52, 0.08);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}


.institution-card-premium:hover {
    transform: translateY(-7px);

    box-shadow:
        0 28px 58px rgba(3, 49, 52, 0.14);
}


/* Garis berwarna di atas kartu */

.institution-card-premium::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 5px;

    border-radius: 25px 25px 0 0;

    background:
        linear-gradient(
            90deg,
            var(--card-accent),
            transparent
        );
}


/* Semua judul tetap gelap */

.institution-card-premium h2,
.institution-card-premium:nth-child(3n) h2 {
    color: #073f48;
}


/* Semua deskripsi tetap abu-abu */

.institution-card-premium p,
.institution-card-premium:nth-child(3n) p {
    color: #6b8083;
}


/* Nomor kartu */

.institution-card-premium .institution-index,
.institution-card-premium:nth-child(3n) .institution-index {
    color: rgba(7, 63, 72, 0.13);
}


/* =====================================================
   KARTU LEMBAGA FORMAL
===================================================== */

.institution-card-premium.institution-card--formal,
.institution-card-premium.institution-card--formal:nth-child(3n) {
    --card-accent: #ffc51b;
    --card-soft: #fff8d7;

    color: #123f45;

    border-color: #d8e9e5;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(255, 204, 32, 0.15),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 72%,
            #fff9df 100%
        );
}


/* Lingkaran dekorasi kanan atas formal */

.institution-card-premium.institution-card--formal
.institution-card-decoration {
    border-color: rgba(255, 196, 0, 0.48);

    background:
        radial-gradient(
            circle,
            rgba(255, 204, 32, 0.12),
            transparent 68%
        );
}


/* Label lembaga formal */

.institution-card-premium.institution-card--formal
.institution-type {
    color: #173f43;

    border-color: #ffd45c;

    background:
        linear-gradient(
            135deg,
            #fff8d9,
            #fff1b7
        );
}


/* Kotak logo formal */

.institution-card-premium.institution-card--formal
.institution-card-logo {
    border-color: #ffd35a;

    background:
        linear-gradient(
            145deg,
            #fffdf1,
            #fff4c7
        );

    box-shadow:
        0 13px 28px rgba(255, 190, 0, 0.16);
}


/* =====================================================
   KARTU LEMBAGA NONFORMAL
===================================================== */

.institution-card-premium.institution-card--nonformal,
.institution-card-premium.institution-card--nonformal:nth-child(3n) {
    --card-accent: #69d8d2;
    --card-soft: #ddf7f4;

    color: #123f45;

    border-color: #cfeae6;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(101, 216, 210, 0.16),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #ffffff 0%,
            #ffffff 72%,
            #e9faf8 100%
        );
}


/* Lingkaran dekorasi kanan atas nonformal */

.institution-card-premium.institution-card--nonformal
.institution-card-decoration {
    border-color: rgba(101, 216, 210, 0.52);

    background:
        radial-gradient(
            circle,
            rgba(101, 216, 210, 0.13),
            transparent 68%
        );
}


/* Label lembaga nonformal */

.institution-card-premium.institution-card--nonformal
.institution-type {
    color: #173f43;

    border-color: #82ded9;

    background:
        linear-gradient(
            135deg,
            #e8faf8,
            #d4f3f0
        );
}


/* Kotak logo nonformal */

.institution-card-premium.institution-card--nonformal
.institution-card-logo {
    border-color: #8ce1dc;

    background:
        linear-gradient(
            145deg,
            #f2fffd,
            #dff7f4
        );

    box-shadow:
        0 13px 28px rgba(64, 194, 185, 0.15);
}


/* =====================================================
   TOMBOL SELENGKAPNYA
===================================================== */

.institution-card-premium .institution-detail-link,
.institution-card-premium:nth-child(3n)
.institution-detail-link {
    color: #08716f;
}


.institution-card-premium .institution-detail-link b,
.institution-card-premium:nth-child(3n)
.institution-detail-link b {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #12877f,
            #076475
        );

    box-shadow:
        0 10px 22px rgba(7, 100, 117, 0.20);
}


/* =====================================================
   TOMBOL WHATSAPP
===================================================== */

.institution-whatsapp-link {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    padding: 0;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;

    background: #25d366;

    box-shadow:
        0 12px 27px rgba(37, 211, 102, 0.28);

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}


.institution-whatsapp-link:hover {
    color: #ffffff;

    background: #1ebe5d;

    transform: translateY(-3px) scale(1.05);

    box-shadow:
        0 17px 32px rgba(37, 211, 102, 0.37);
}


.institution-whatsapp-link svg {
    width: 27px;
    height: 27px;

    display: block;

    fill: currentColor;
}


/* =====================================================
   RESPONSIVE HP
===================================================== */

@media (max-width: 760px) {

    .institution-whatsapp-link {
        width: 47px;
        height: 47px;
    }


    .institution-whatsapp-link svg {
        width: 24px;
        height: 24px;
    }

}

/* =====================================================
   FINAL COMPACT EKSTRAKURIKULER
   PRESISI DENGAN HEADER + LEBIH RINGKAS
===================================================== */


/* =====================================================
   AREA UTAMA
===================================================== */

.institutions-extra-section {
    /* Mengurangi ruang kosong bawah section */
    padding: 0 0 72px;

    background:
        linear-gradient(
            180deg,
            var(--institution-soft),
            #ffffff
        );
}


/* Lebar dibuat sejajar dengan header dan hero */
.institutions-extra-section > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
    margin-inline: auto;
}


/* Kotak besar ekstrakurikuler */
.institutions-extra-shell {
    /* Sebelumnya 72px, sekarang lebih ringkas */
    padding: 48px 54px 46px;

    border-radius: 22px;

    box-shadow:
        0 24px 55px rgba(3, 49, 52, 0.16);
}


/* Mengecilkan dekorasi lingkaran */
.institutions-extra-shell::before {
    top: -300px;
    right: -285px;

    width: 540px;
    height: 540px;
}


/* =====================================================
   JUDUL DAN DESKRIPSI
===================================================== */

.institutions-extra-heading {
    align-items: flex-end;

    gap: 42px;

    /* Sebelumnya terlalu jauh dari kartu */
    margin-bottom: 31px;
}


.institutions-extra-heading > div {
    max-width: 710px;
}


.institutions-extra-eyebrow {
    gap: 10px;

    font-size: 9px;
    letter-spacing: 0.21em;
}


.institutions-extra-eyebrow span {
    width: 34px;
    height: 2px;
}


.institutions-extra-heading h2 {
    max-width: 760px;

    margin-top: 12px;

    /* Mengecilkan judul */
    font-size: clamp(34px, 3.3vw, 47px);
    line-height: 1.06;
}


.institutions-extra-heading > p {
    max-width: 430px;

    font-size: 13px;
    line-height: 1.65;
}


/* =====================================================
   KARTU EKSTRAKURIKULER
===================================================== */

.institutions-extra-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));

    /* Memperkecil jarak antarkartu */
    gap: 12px;
}


.institutions-extra-card,
.institutions-extra-card:nth-child(4),
.institutions-extra-card:nth-child(5) {
    /* Sebelumnya 225px */
    min-height: 174px;

    padding: 18px;

    border-radius: 17px;
}


.institutions-extra-card-top {
    min-height: 31px;
}


.institutions-extra-number {
    font-size: 9px;
}


.institutions-extra-symbol {
    width: 31px;
    height: 31px;

    font-size: 10px;
}


.institutions-extra-card h3 {
    margin: auto 0 8px;

    font-size: 16px;
    line-height: 1.15;
}


.institutions-extra-card p {
    font-size: 10px;
    line-height: 1.58;
}


/* Hover tidak terlalu tinggi */
.institutions-extra-card:hover {
    transform: translateY(-4px);
}


/* =====================================================
   CTA PENERIMAAN PESERTA DIDIK
===================================================== */

.institutions-admission-cta {
    gap: 32px;

    /* Mengurangi ruang kosong antara kartu dan CTA */
    margin-top: 32px;
    padding-top: 30px;
}


.institutions-admission-cta > div:first-child {
    max-width: 670px;
}


.institutions-admission-cta > div:first-child > span {
    font-size: 9px;
    letter-spacing: 0.19em;
}


.institutions-admission-cta h3 {
    margin: 8px 0 6px;

    font-size: clamp(23px, 2.4vw, 33px);
    line-height: 1.12;
}


.institutions-admission-cta p {
    font-size: 12px;
    line-height: 1.6;
}


.institutions-admission-primary,
.institutions-admission-whatsapp {
    min-height: 44px;

    padding: 0 18px;

    font-size: 10px;
}


/* =====================================================
   LAPTOP DAN TABLET
===================================================== */

@media (max-width: 1100px) {

    .institutions-extra-section > .container {
        width: var(
            --dm-page-frame,
            min(calc(100% - 32px), 1600px)
        );
    }


    .institutions-extra-shell {
        padding: 42px 36px 40px;
    }


    .institutions-extra-heading {
        gap: 30px;
    }


    .institutions-extra-heading h2 {
        font-size: clamp(32px, 4vw, 43px);
    }


    .institutions-extra-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .institutions-extra-card,
    .institutions-extra-card:nth-child(4),
    .institutions-extra-card:nth-child(5) {
        min-height: 165px;
    }


    .institutions-extra-card:nth-child(4),
    .institutions-extra-card:nth-child(5) {
        grid-column: span 1;
    }

}


/* =====================================================
   TABLET KECIL
===================================================== */

@media (max-width: 800px) {

    .institutions-extra-section {
        padding-bottom: 55px;
    }


    .institutions-extra-section > .container {
        width: var(
            --dm-page-frame,
            calc(100% - 16px)
        );
    }


    .institutions-extra-shell {
        padding: 35px 24px 34px;

        border-radius: 18px;
    }


    .institutions-extra-heading {
        display: block;

        margin-bottom: 25px;
    }


    .institutions-extra-heading > p {
        max-width: 600px;

        margin-top: 13px;

        font-size: 12px;
    }


    .institutions-extra-heading h2 {
        max-width: 600px;

        font-size: 34px;
    }


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

        gap: 10px;
    }


    .institutions-extra-card,
    .institutions-extra-card:nth-child(4),
    .institutions-extra-card:nth-child(5) {
        min-height: 155px;

        padding: 16px;
    }


    /* Kartu terakhir memenuhi satu baris */
    .institutions-extra-card:last-child {
        grid-column: 1 / -1;
    }


    .institutions-admission-cta {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;

        margin-top: 27px;
        padding-top: 25px;
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 520px) {

    .institutions-extra-section {
        padding-bottom: 42px;
    }


    .institutions-extra-shell {
        padding: 29px 14px 28px;

        border-radius: 17px;
    }


    .institutions-extra-eyebrow {
        font-size: 7px;
        letter-spacing: 0.15em;
    }


    .institutions-extra-eyebrow span {
        width: 25px;
    }


    .institutions-extra-heading {
        margin-bottom: 20px;
    }


    .institutions-extra-heading h2 {
        margin-top: 9px;

        font-size: 27px;
        line-height: 1.08;
    }


    .institutions-extra-heading > p {
        margin-top: 11px;

        font-size: 11px;
        line-height: 1.55;
    }


    /* Di HP satu kartu per baris agar tetap terbaca */
    .institutions-extra-grid {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    .institutions-extra-card,
    .institutions-extra-card:nth-child(4),
    .institutions-extra-card:nth-child(5),
    .institutions-extra-card:last-child {
        min-height: 128px;

        padding: 15px;

        border-radius: 15px;

        grid-column: auto;
    }


    .institutions-extra-card-top {
        min-height: 27px;
    }


    .institutions-extra-number {
        font-size: 8px;
    }


    .institutions-extra-symbol {
        width: 27px;
        height: 27px;
    }


    .institutions-extra-card h3 {
        margin-top: 20px;
        margin-bottom: 6px;

        font-size: 15px;
    }


    .institutions-extra-card p {
        font-size: 10px;
        line-height: 1.5;
    }


    .institutions-admission-cta {
        gap: 17px;

        margin-top: 23px;
        padding-top: 22px;
    }


    .institutions-admission-cta h3 {
        font-size: 23px;
    }


    .institutions-admission-cta p {
        font-size: 11px;
    }


    .institutions-admission-actions {
        width: 100%;
    }


    .institutions-admission-primary,
    .institutions-admission-whatsapp {
        width: 100%;
        min-height: 43px;
    }

}

/* =====================================================
   FINAL DETAIL LEMBAGA
   Berlaku untuk seluruh halaman lembaga-detail.php
===================================================== */

.unit-detail--formal {
    --unit-accent: #ffc51b;
    --unit-accent-strong: #ffad00;
    --unit-accent-soft: #fff5c7;
    --unit-accent-rgb: 255, 197, 27;
}

.unit-detail--nonformal {
    --unit-accent: #6bd8d2;
    --unit-accent-strong: #35beb7;
    --unit-accent-soft: #ddf7f4;
    --unit-accent-rgb: 107, 216, 210;
}


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

.unit-detail-hero {
    position: relative;
    isolation: isolate;

    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    margin: 8px auto 0;
    padding: 42px 0 48px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 4% 5%,
            rgba(255, 255, 255, 0.18),
            transparent 30%
        ),
        radial-gradient(
            ellipse at 58% 115%,
            rgba(var(--unit-accent-rgb), 0.22),
            transparent 56%
        ),
        linear-gradient(
            132deg,
            #17867b 0%,
            #08716f 42%,
            #07586a 72%,
            #05475d 100%
        );

    box-shadow:
        0 27px 62px rgba(3, 49, 54, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.31);
}

.unit-detail-hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -250px;
    left: -210px;

    width: 530px;
    height: 530px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 75px rgba(255, 255, 255, 0.018),
        0 0 0 150px rgba(255, 255, 255, 0.01);

    pointer-events: none;
}

.unit-detail-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: -260px;
    bottom: -360px;

    width: 700px;
    height: 700px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.07),
            transparent 62%
        );

    pointer-events: none;
}

.unit-detail-hero-inner {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 84px), 1320px);
    max-width: none;
}

.unit-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 28px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 10px;
    font-weight: 800;
}

.unit-detail-breadcrumb a {
    color: rgba(255, 255, 255, 0.76);
}

.unit-detail-breadcrumb a:hover {
    color: var(--unit-accent);
}

.unit-detail-breadcrumb strong {
    max-width: 420px;

    overflow: hidden;

    color: var(--unit-accent);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.unit-detail-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.86fr);

    align-items: center;

    gap: 54px;
}

.unit-detail-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 16px;
}

.unit-detail-number {
    color: rgba(255, 255, 255, 0.32);

    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.unit-detail-category {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding: 0 14px;

    color: #113a40;

    border: 1px solid rgba(var(--unit-accent-rgb), 0.8);
    border-radius: 999px;

    background: var(--unit-accent);

    box-shadow:
        0 10px 24px rgba(var(--unit-accent-rgb), 0.18);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.unit-detail-hero-copy h1 {
    max-width: 760px;

    margin: 0 0 18px;

    color: #ffffff;

    font-size: clamp(44px, 4.8vw, 70px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.052em;
}

.unit-detail-hero-copy > p {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;
}

.unit-detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 25px;
}

.unit-detail-primary-button,
.unit-detail-secondary-button {
    min-height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 5px 6px 5px 18px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease;
}

.unit-detail-primary-button {
    color: #113a40;

    border: 1px solid var(--unit-accent);

    background: var(--unit-accent);

    box-shadow:
        0 14px 30px rgba(var(--unit-accent-rgb), 0.23);
}

.unit-detail-secondary-button {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.23);

    background: rgba(255, 255, 255, 0.085);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.unit-detail-primary-button svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.unit-detail-primary-button b,
.unit-detail-secondary-button b {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 13px;
}

.unit-detail-primary-button b {
    color: #ffffff;
    background: #073f48;
}

.unit-detail-secondary-button b {
    color: #073f48;
    background: #ffffff;
}

.unit-detail-primary-button:hover,
.unit-detail-secondary-button:hover {
    transform: translateY(-3px);
}

.unit-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 9px;

    max-width: 590px;

    margin-top: 28px;
}

.unit-detail-metrics > div {
    min-height: 72px;

    padding: 13px 14px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.unit-detail-metrics strong,
.unit-detail-metrics span {
    display: block;
}

.unit-detail-metrics strong {
    color: var(--unit-accent);

    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.unit-detail-metrics span {
    margin-top: 7px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 8px;
    font-weight: 800;
    line-height: 1.35;
}


/* =====================================================
   VISUAL HERO
===================================================== */

.unit-detail-hero-visual {
    display: flex;
    justify-content: center;
}

.unit-detail-visual-card {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 520px;
    min-height: 390px;

    padding: 21px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.065)
        );

    box-shadow:
        0 28px 60px rgba(2, 39, 46, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.unit-detail-visual-card::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 82px;
    left: 50%;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--unit-accent-rgb), 0.23),
            rgba(107, 216, 210, 0.08) 45%,
            transparent 72%
        );

    transform: translateX(-50%);
}

.unit-detail-visual-brand {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 11px;
}

.unit-detail-visual-logo {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    padding: 5px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.14);
}

.unit-detail-visual-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.unit-detail-visual-brand strong,
.unit-detail-visual-brand span {
    display: block;
}

.unit-detail-visual-brand strong {
    color: #ffffff;

    font-size: 12px;
    font-weight: 900;
}

.unit-detail-visual-brand span {
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.unit-detail-visual-image {
    position: absolute;
    z-index: 2;

    right: -8%;
    bottom: -20px;
    left: -8%;

    height: 275px;
}

.unit-detail-visual-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(5, 71, 93, 0.13) 48%,
            rgba(5, 71, 93, 0.52) 100%
        );
}

.unit-detail-visual-image img {
    width: 100%;
    height: 100%;

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

    opacity: 0.62;

    filter:
        saturate(0.75)
        contrast(0.95);
}

.unit-detail-visual-caption {
    position: absolute;
    z-index: 6;

    right: 21px;
    bottom: 22px;
    left: 21px;

    padding: 15px 17px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;

    background: rgba(4, 52, 60, 0.74);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.unit-detail-visual-caption span,
.unit-detail-visual-caption strong {
    display: block;
}

.unit-detail-visual-caption span {
    color: var(--unit-accent);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.unit-detail-visual-caption strong {
    max-width: 330px;

    margin-top: 5px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

.unit-detail-visual-badge {
    position: absolute;
    z-index: 7;

    top: 85px;
    right: 20px;

    min-width: 92px;

    padding: 11px 13px;

    color: #113a40;

    border-radius: 14px;

    background: var(--unit-accent);

    box-shadow:
        0 14px 27px rgba(var(--unit-accent-rgb), 0.24);
}

.unit-detail-visual-badge span,
.unit-detail-visual-badge strong {
    display: block;
}

.unit-detail-visual-badge span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.unit-detail-visual-badge strong {
    margin-top: 4px;

    font-size: 21px;
    font-weight: 900;
    line-height: 1;
}


/* =====================================================
   KONTEN UTAMA
===================================================== */

.unit-detail-content {
    position: relative;

    padding: 82px 0 88px;

    background:
        radial-gradient(
            circle at 100% 2%,
            rgba(var(--unit-accent-rgb), 0.11),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f3f8f6 100%
        );
}

.unit-detail-layout {
    width: min(calc(100% - 40px), 1240px);
    max-width: none;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 325px;

    align-items: start;

    gap: 24px;
}

.unit-detail-main {
    display: flex;
    flex-direction: column;

    gap: 20px;
}

.unit-detail-card {
    position: relative;

    padding: 31px;

    overflow: hidden;

    border: 1px solid #dcebe7;
    border-radius: 23px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 17px 40px rgba(3, 49, 52, 0.065);
}

.unit-detail-card::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--unit-accent),
            transparent 70%
        );
}

.unit-detail-section-label {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #08716f;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.unit-detail-section-label > span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #113a40;

    border-radius: 10px;

    background: var(--unit-accent);

    font-size: 8px;
}


/* Sambutan */

.unit-detail-leader {
    display: flex;
    align-items: center;

    gap: 17px;

    margin: 25px 0 22px;
}

.unit-detail-leader-photo {
    width: 78px;
    height: 78px;

    flex-shrink: 0;

    padding: 5px;

    border: 1px solid rgba(var(--unit-accent-rgb), 0.58);
    border-radius: 20px;

    background: var(--unit-accent-soft);
}

.unit-detail-leader-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 14px;
}

.unit-detail-leader span {
    display: block;

    color: #829496;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.unit-detail-leader h2 {
    margin: 6px 0 0;

    color: #073f48;

    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
}

.unit-detail-welcome-card blockquote {
    position: relative;

    margin: 0;
    padding: 23px 24px 23px 58px;

    border: 1px solid #e0ece9;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #f7fbfa,
            var(--unit-accent-soft)
        );
}

.unit-detail-welcome-card blockquote > span {
    position: absolute;

    top: 8px;
    left: 19px;

    color: var(--unit-accent-strong);

    font-size: 46px;
    font-family: Georgia, serif;
    line-height: 1;
}

.unit-detail-welcome-card blockquote p {
    margin: 0;

    color: #617a7d;

    font-size: 13px;
    line-height: 1.8;
}


/* Profil */

.unit-detail-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px;

    align-items: center;

    gap: 30px;

    margin-top: 22px;
}

.unit-detail-profile-grid h2 {
    margin: 0 0 12px;

    color: #073f48;

    font-size: clamp(27px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.unit-detail-profile-grid p {
    margin: 0;

    color: #667e80;

    font-size: 13px;
    line-height: 1.82;
}

.unit-detail-profile-mark {
    width: 132px;
    height: 132px;

    display: grid;
    place-items: center;

    padding: 20px;

    border: 1px solid rgba(var(--unit-accent-rgb), 0.55);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            var(--unit-accent-soft) 100%
        );

    box-shadow:
        0 15px 32px rgba(var(--unit-accent-rgb), 0.13);
}

.unit-detail-profile-mark img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* Program dan ekstrakurikuler */

.unit-detail-program-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.unit-detail-list-card h2 {
    margin: 21px 0 20px;

    color: #073f48;

    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.unit-detail-list-card ul {
    display: grid;

    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.unit-detail-list-card li {
    min-height: 49px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 9px 11px;

    border: 1px solid #e2ece9;
    border-radius: 14px;

    background: #f7fbfa;
}

.unit-detail-list-card li span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: #113a40;

    border-radius: 10px;

    background: var(--unit-accent);

    font-size: 8px;
    font-weight: 900;
}

.unit-detail-list-card li strong {
    color: #244d52;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}


/* Prestasi */

.unit-detail-achievement-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-top: 22px;
}

.unit-detail-achievement-heading > div {
    max-width: 650px;
}

.unit-detail-achievement-heading h2 {
    margin: 0;

    color: #073f48;

    font-size: clamp(27px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.unit-detail-achievement-heading p {
    margin: 11px 0 0;

    color: #687f81;

    font-size: 12px;
    line-height: 1.72;
}

.unit-detail-achievement-heading > strong {
    color: rgba(var(--unit-accent-rgb), 0.75);

    font-size: 58px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.06em;
}

.unit-detail-achievement-list {
    display: grid;

    gap: 9px;

    margin-top: 23px;
}

.unit-detail-achievement-list > div {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;

    align-items: center;

    gap: 12px;

    min-height: 56px;

    padding: 10px 13px;

    border: 1px solid #e0ece9;
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5faf8
        );
}

.unit-detail-achievement-list > div > span {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    color: #113a40;

    border-radius: 11px;

    background: var(--unit-accent);
}

.unit-detail-achievement-list strong {
    color: #234c51;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.unit-detail-achievement-list small {
    color: #afbfbd;

    font-size: 10px;
    font-weight: 900;
}


/* =====================================================
   SIDEBAR
===================================================== */

.unit-detail-sidebar {
    position: relative;
}

.unit-detail-contact-card {
    position: sticky;
    top: 118px;

    padding: 27px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--unit-accent-rgb), 0.25),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #0b7773,
            #07566a 66%,
            #05475d
        );

    box-shadow:
        0 23px 50px rgba(3, 49, 52, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.21);
}

.unit-detail-contact-logo {
    width: 67px;
    height: 67px;

    display: grid;
    place-items: center;

    padding: 7px;

    border: 1px solid rgba(255, 255, 255, 0.21);
    border-radius: 19px;

    background: rgba(255, 255, 255, 0.13);
}

.unit-detail-contact-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.unit-detail-contact-category {
    display: inline-flex;

    margin-top: 21px;
    padding: 7px 10px;

    color: #113a40;

    border-radius: 999px;

    background: var(--unit-accent);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.unit-detail-contact-card h2 {
    margin: 13px 0 10px;

    color: #ffffff;

    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.unit-detail-contact-card > p {
    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 11px;
    line-height: 1.72;
}

.unit-detail-contact-primary,
.unit-detail-contact-secondary {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;

    transition: transform 0.2s ease;
}

.unit-detail-contact-primary {
    margin-top: 22px;

    color: #ffffff;

    background: #25d366;

    box-shadow:
        0 13px 28px rgba(37, 211, 102, 0.25);
}

.unit-detail-contact-primary svg {
    width: 18px;
    height: 18px;

    fill: currentColor;
}

.unit-detail-contact-secondary {
    margin-top: 9px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(255, 255, 255, 0.075);
}

.unit-detail-contact-primary:hover,
.unit-detail-contact-secondary:hover {
    transform: translateY(-2px);
}

.unit-detail-contact-divider {
    height: 1px;

    margin: 22px 0 17px;

    background: rgba(255, 255, 255, 0.13);
}

.unit-detail-contact-title {
    display: block;

    color: var(--unit-accent);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.unit-detail-socials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 12px;
}

.unit-detail-socials a {
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.075);

    font-size: 8px;
    font-weight: 800;
}

.unit-detail-socials svg {
    width: 14px;
    height: 14px;

    fill: currentColor;
}


/* =====================================================
   CTA PENDAFTARAN
===================================================== */

.unit-detail-admission {
    padding: 0 0 78px;

    background: #f3f8f6;
}

.unit-detail-admission > .container {
    width: min(calc(100% - 40px), 1240px);
    max-width: none;
}

.unit-detail-admission-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 38px;

    padding: 43px 48px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 25px;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(255, 255, 255, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 100%,
            rgba(var(--unit-accent-rgb), 0.24),
            transparent 36%
        ),
        linear-gradient(
            132deg,
            #17867b,
            #07586a 68%,
            #05475d
        );

    box-shadow:
        0 25px 56px rgba(3, 49, 52, 0.16);
}

.unit-detail-admission-shell > div {
    max-width: 760px;
}

.unit-detail-admission-shell > div > span {
    color: var(--unit-accent);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.unit-detail-admission-shell h2 {
    margin: 10px 0 8px;

    color: #ffffff;

    font-size: clamp(27px, 3.2vw, 41px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.037em;
}

.unit-detail-admission-shell p {
    margin: 0;

    color: rgba(255, 255, 255, 0.67);

    font-size: 12px;
    line-height: 1.7;
}

.unit-detail-admission-shell > a {
    min-width: 210px;
    min-height: 51px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    flex-shrink: 0;

    padding: 5px 6px 5px 18px;

    color: #113a40;

    border-radius: 999px;

    background: var(--unit-accent);

    box-shadow:
        0 15px 31px rgba(var(--unit-accent-rgb), 0.23);

    font-size: 9px;
    font-weight: 900;

    transition: transform 0.2s ease;
}

.unit-detail-admission-shell > a:hover {
    transform: translateY(-3px);
}

.unit-detail-admission-shell > a svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.unit-detail-admission-shell > a b {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    margin-left: auto;

    color: #ffffff;

    border-radius: 50%;

    background: #073f48;
}


/* =====================================================
   LEMBAGA TERKAIT
===================================================== */

.unit-detail-related {
    padding: 80px 0 94px;

    background: #ffffff;
}

.unit-detail-related > .container {
    width: min(calc(100% - 40px), 1240px);
    max-width: none;
}

.unit-detail-related-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}

.unit-detail-related-heading > div > span {
    color: #08716f;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.unit-detail-related-heading h2 {
    margin: 10px 0 0;

    color: #073f48;

    font-size: clamp(31px, 3.7vw, 46px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.unit-detail-related-heading > a {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #08716f;

    font-size: 9px;
    font-weight: 900;
}

.unit-detail-related-heading > a b {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    color: #113a40;

    border-radius: 50%;

    background: var(--unit-accent);
}

.unit-detail-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 17px;
}

.unit-detail-related-card {
    position: relative;

    min-height: 310px;

    display: flex;
    flex-direction: column;

    padding: 23px;

    overflow: hidden;

    border: 1px solid #dcebe7;
    border-radius: 21px;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--unit-accent-rgb), 0.14),
            transparent 36%
        ),
        #ffffff;

    box-shadow:
        0 16px 37px rgba(3, 49, 52, 0.065);

    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease;
}

.unit-detail-related-card::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--unit-accent),
            transparent 72%
        );
}

.unit-detail-related-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 24px 48px rgba(3, 49, 52, 0.12);
}

.unit-detail-related-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.unit-detail-related-top > span {
    color: rgba(7, 63, 72, 0.14);

    font-size: 24px;
    font-weight: 900;
}

.unit-detail-related-top small {
    padding: 7px 10px;

    color: #113a40;

    border-radius: 999px;

    background: var(--unit-accent-soft);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.unit-detail-related-logo {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin: 22px 0 17px;
    padding: 7px;

    border: 1px solid rgba(var(--unit-accent-rgb), 0.52);
    border-radius: 17px;

    background: var(--unit-accent-soft);
}

.unit-detail-related-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.unit-detail-related-card h3 {
    margin: 0 0 9px;

    color: #073f48;

    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

.unit-detail-related-card p {
    margin: 0;

    color: #687f81;

    font-size: 11px;
    line-height: 1.68;
}

.unit-detail-related-card > a {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-top: auto;
    padding-top: 20px;

    color: #08716f;

    font-size: 9px;
    font-weight: 900;
}

.unit-detail-related-card > a b {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #12877f,
            #07586a
        );
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .unit-detail-hero-inner {
        width: min(calc(100% - 56px), 1180px);
    }

    .unit-detail-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, 0.8fr);

        gap: 34px;
    }

    .unit-detail-hero-copy h1 {
        font-size: clamp(40px, 5vw, 58px);
    }

    .unit-detail-visual-card {
        min-height: 350px;
    }

    .unit-detail-visual-image {
        height: 245px;
    }

    .unit-detail-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

}


/* =====================================================
   TABLET KECIL
===================================================== */

@media (max-width: 850px) {

    .unit-detail-hero {
        width: var(
            --dm-page-frame,
            calc(100% - 16px)
        );

        margin-top: 5px;
        padding: 31px 0 35px;
    }

    .unit-detail-hero-inner {
        width: calc(100% - 30px);
    }

    .unit-detail-breadcrumb {
        justify-content: center;

        margin-bottom: 22px;
    }

    .unit-detail-breadcrumb strong {
        max-width: 230px;
    }

    .unit-detail-hero-grid {
        grid-template-columns: 1fr;

        gap: 27px;
    }

    .unit-detail-hero-copy {
        max-width: 680px;

        margin: 0 auto;

        text-align: center;
    }

    .unit-detail-eyebrow,
    .unit-detail-actions {
        justify-content: center;
    }

    .unit-detail-hero-copy h1 {
        max-width: 650px;

        margin-right: auto;
        margin-left: auto;

        font-size: clamp(36px, 8vw, 50px);
    }

    .unit-detail-hero-copy > p {
        max-width: 600px;

        margin: 0 auto;

        font-size: 13px;
    }

    .unit-detail-metrics {
        max-width: 560px;

        margin-right: auto;
        margin-left: auto;
    }

    .unit-detail-hero-visual {
        max-width: 580px;

        margin: 0 auto;
    }

    .unit-detail-visual-card {
        min-height: 305px;

        border-radius: 23px;
    }

    .unit-detail-visual-image {
        height: 215px;
    }

    .unit-detail-content {
        padding: 62px 0 68px;
    }

    .unit-detail-layout {
        grid-template-columns: 1fr;
    }

    .unit-detail-sidebar {
        order: -1;
    }

    .unit-detail-contact-card {
        position: static;
    }

    .unit-detail-admission-shell {
        align-items: flex-start;
        flex-direction: column;

        padding: 37px 34px;
    }

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

    .unit-detail-related-card:last-child {
        grid-column: 1 / -1;
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 560px) {

    .unit-detail-hero {
        padding: 25px 0 28px;
    }

    .unit-detail-hero-inner {
        width: calc(100% - 24px);
    }

    .unit-detail-breadcrumb {
        gap: 6px;

        margin-bottom: 17px;

        font-size: 8px;
    }

    .unit-detail-breadcrumb strong {
        max-width: 150px;
    }

    .unit-detail-number {
        font-size: 20px;
    }

    .unit-detail-category {
        min-height: 28px;

        padding: 0 11px;

        font-size: 7px;
    }

    .unit-detail-hero-copy h1 {
        margin-bottom: 13px;

        font-size: clamp(31px, 10vw, 42px);
        line-height: 1.02;
    }

    .unit-detail-hero-copy > p {
        font-size: 11px;
        line-height: 1.62;
    }

    .unit-detail-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;

        gap: 8px;

        margin-top: 19px;
    }

    .unit-detail-primary-button,
    .unit-detail-secondary-button {
        width: 100%;
        min-height: 44px;

        justify-content: space-between;
    }

    .unit-detail-primary-button b,
    .unit-detail-secondary-button b {
        width: 34px;
        height: 34px;
    }

    .unit-detail-metrics {
        gap: 5px;

        margin-top: 17px;
    }

    .unit-detail-metrics > div {
        min-height: 61px;

        padding: 10px 5px;
    }

    .unit-detail-metrics strong {
        font-size: 18px;
    }

    .unit-detail-metrics span {
        font-size: 6px;
    }

    .unit-detail-visual-card {
        min-height: 245px;

        padding: 14px;

        border-radius: 19px;
    }

    .unit-detail-visual-logo {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }

    .unit-detail-visual-brand strong {
        font-size: 9px;
    }

    .unit-detail-visual-brand span {
        display: none;
    }

    .unit-detail-visual-image {
        right: -12%;
        left: -12%;

        height: 173px;
    }

    .unit-detail-visual-caption {
        right: 12px;
        bottom: 12px;
        left: 12px;

        padding: 11px 12px;

        border-radius: 12px;
    }

    .unit-detail-visual-caption strong {
        max-width: 220px;

        font-size: 11px;
    }

    .unit-detail-visual-badge {
        top: 56px;
        right: 12px;

        min-width: 72px;

        padding: 8px 10px;

        border-radius: 10px;
    }

    .unit-detail-visual-badge span {
        font-size: 5px;
    }

    .unit-detail-visual-badge strong {
        font-size: 16px;
    }

    .unit-detail-content {
        padding: 49px 0 55px;
    }

    .unit-detail-layout,
    .unit-detail-admission > .container,
    .unit-detail-related > .container {
        width: calc(100% - 28px);
    }

    .unit-detail-main {
        gap: 14px;
    }

    .unit-detail-card {
        padding: 22px 18px;

        border-radius: 18px;
    }

    .unit-detail-contact-card {
        padding: 22px 18px;

        border-radius: 19px;
    }

    .unit-detail-contact-logo {
        width: 58px;
        height: 58px;
    }

    .unit-detail-contact-card h2 {
        font-size: 21px;
    }

    .unit-detail-contact-primary,
    .unit-detail-contact-secondary {
        width: 100%;
    }

    .unit-detail-leader {
        align-items: flex-start;
    }

    .unit-detail-leader-photo {
        width: 66px;
        height: 66px;

        border-radius: 16px;
    }

    .unit-detail-leader h2 {
        font-size: 18px;
    }

    .unit-detail-welcome-card blockquote {
        padding: 19px 17px 19px 45px;

        border-radius: 15px;
    }

    .unit-detail-welcome-card blockquote > span {
        top: 8px;
        left: 14px;

        font-size: 36px;
    }

    .unit-detail-welcome-card blockquote p {
        font-size: 11px;
        line-height: 1.7;
    }

    .unit-detail-profile-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .unit-detail-profile-grid h2,
    .unit-detail-achievement-heading h2 {
        font-size: 27px;
    }

    .unit-detail-profile-grid p {
        font-size: 11px;
        line-height: 1.72;
    }

    .unit-detail-profile-mark {
        width: 95px;
        height: 95px;

        padding: 14px;
    }

    .unit-detail-program-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .unit-detail-list-card h2 {
        font-size: 20px;
    }

    .unit-detail-achievement-heading {
        display: block;
    }

    .unit-detail-achievement-heading > strong {
        display: block;

        margin-top: 17px;

        font-size: 43px;
    }

    .unit-detail-achievement-list > div {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .unit-detail-achievement-list small {
        display: none;
    }

    .unit-detail-admission {
        padding-bottom: 56px;
    }

    .unit-detail-admission-shell {
        padding: 29px 20px;

        border-radius: 19px;
    }

    .unit-detail-admission-shell h2 {
        font-size: 26px;
    }

    .unit-detail-admission-shell p {
        font-size: 10px;
    }

    .unit-detail-admission-shell > a {
        width: 100%;
        min-width: 0;
    }

    .unit-detail-related {
        padding: 58px 0 68px;
    }

    .unit-detail-related-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }

    .unit-detail-related-heading h2 {
        font-size: 30px;
    }

    .unit-detail-related-grid {
        grid-template-columns: 1fr;
    }

    .unit-detail-related-card,
    .unit-detail-related-card:last-child {
        min-height: 280px;

        grid-column: auto;
    }

}


/* =====================================================
   DARK MODE
===================================================== */

html[data-theme="dark"] .unit-detail-content {
    background:
        radial-gradient(
            circle at 100% 2%,
            rgba(var(--unit-accent-rgb), 0.07),
            transparent 25%
        ),
        #071f23;
}

html[data-theme="dark"] .unit-detail-card,
html[data-theme="dark"] .unit-detail-related-card {
    border-color: #24494b;
    background: #0c292d;
}

html[data-theme="dark"] .unit-detail-profile-grid h2,
html[data-theme="dark"] .unit-detail-leader h2,
html[data-theme="dark"] .unit-detail-list-card h2,
html[data-theme="dark"] .unit-detail-achievement-heading h2,
html[data-theme="dark"] .unit-detail-related-heading h2,
html[data-theme="dark"] .unit-detail-related-card h3 {
    color: #efffff;
}

html[data-theme="dark"] .unit-detail-profile-grid p,
html[data-theme="dark"] .unit-detail-welcome-card blockquote p,
html[data-theme="dark"] .unit-detail-achievement-heading p,
html[data-theme="dark"] .unit-detail-related-card p {
    color: #aac3c1;
}

html[data-theme="dark"] .unit-detail-welcome-card blockquote,
html[data-theme="dark"] .unit-detail-list-card li,
html[data-theme="dark"] .unit-detail-achievement-list > div {
    border-color: #294d4e;
    background: #102f33;
}

html[data-theme="dark"] .unit-detail-admission {
    background: #071f23;
}

html[data-theme="dark"] .unit-detail-related {
    background: #091f23;
}

/* =====================================================
   FINAL WIDTH FIX DETAIL LEMBAGA
   Menyamakan lebar konten dengan header dan hero
===================================================== */


/* =====================================================
   DESKTOP
===================================================== */

/* Konten utama: sambutan, profil, program, dan prestasi */
.unit-detail-layout {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
    margin-inline: auto;

    /* Sidebar tetap proporsional setelah konten dilebarkan */
    grid-template-columns:
        minmax(0, 1fr)
        350px;

    gap: 26px;
}


/* Memastikan kolom utama memenuhi ruang yang tersedia */
.unit-detail-main {
    width: 100%;
    min-width: 0;
}


/* Semua kartu utama memenuhi kolom */
.unit-detail-card {
    width: 100%;
    box-sizing: border-box;
}


/* CTA pendaftaran disamakan dengan lebar header */
.unit-detail-admission > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
    margin-inline: auto;
}


/* Bagian lembaga terkait disamakan dengan header */
.unit-detail-related > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
    margin-inline: auto;
}


/* Melebarkan isi hero tanpa mengubah frame luarnya */
.unit-detail-hero-inner {
    width: min(calc(100% - 84px), 1480px);
    max-width: none;
}


/* CTA memenuhi lebar container */
.unit-detail-admission-shell {
    width: 100%;
    box-sizing: border-box;
}


/* Grid lembaga terkait memenuhi lebar */
.unit-detail-related-grid {
    width: 100%;
}


/* =====================================================
   LAYAR DESKTOP BESAR
===================================================== */

@media (min-width: 1400px) {

    .unit-detail-layout {
        grid-template-columns:
            minmax(0, 1fr)
            370px;

        gap: 30px;
    }


    .unit-detail-card {
        padding-right: 36px;
        padding-left: 36px;
    }


    .unit-detail-contact-card {
        padding: 30px;
    }

}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1100px) {

    .unit-detail-layout,
    .unit-detail-admission > .container,
    .unit-detail-related > .container {
        width: var(
            --dm-page-frame,
            min(calc(100% - 32px), 1600px)
        );
    }


    .unit-detail-layout {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 20px;
    }


    .unit-detail-hero-inner {
        width: calc(100% - 56px);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 850px) {

    .unit-detail-layout,
    .unit-detail-admission > .container,
    .unit-detail-related > .container {
        width: var(
            --dm-page-frame,
            calc(100% - 16px)
        );
    }


    .unit-detail-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .unit-detail-hero-inner {
        width: calc(100% - 30px);
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 560px) {

    .unit-detail-layout,
    .unit-detail-admission > .container,
    .unit-detail-related > .container {
        width: calc(100% - 16px);
    }


    .unit-detail-hero-inner {
        width: calc(100% - 24px);
    }


    .unit-detail-card,
    .unit-detail-contact-card {
        width: 100%;
    }

}

/* =====================================================
   FINAL PREMIUM PROGRAM PAGE
   YPP DARUL MA'ARIF
===================================================== */

:root {
    --program-teal-1: #17867b;
    --program-teal-2: #08716f;
    --program-teal-3: #07586a;
    --program-teal-4: #05475d;

    --program-dark: #073f48;
    --program-ink: #153d42;

    --program-gold-1: #ffad00;
    --program-gold-2: #ffc51b;
    --program-gold-3: #ffda25;

    --program-aqua-1: #83e2dc;
    --program-aqua-2: #62d4cf;
    --program-aqua-soft: #ddf7f4;

    --program-soft: #f2f8f6;
    --program-line: #dcebe7;
}


/* =====================================================
   HERO PROGRAM
===================================================== */

.program-page-hero {
    position: relative;
    isolation: isolate;

    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    margin: 8px auto 0;
    padding: 46px 0 49px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 5% 3%,
            rgba(255, 255, 255, 0.18),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 56% 115%,
            rgba(83, 224, 209, 0.27),
            transparent 57%
        ),
        linear-gradient(
            132deg,
            var(--program-teal-1) 0%,
            var(--program-teal-2) 42%,
            var(--program-teal-3) 72%,
            var(--program-teal-4) 100%
        );

    box-shadow:
        0 28px 65px rgba(3, 49, 54, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.33);
}


.program-page-hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -235px;
    left: -205px;

    width: 530px;
    height: 530px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 75px rgba(255, 255, 255, 0.018),
        0 0 0 150px rgba(255, 255, 255, 0.01);

    pointer-events: none;
}


.program-page-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: -290px;
    bottom: -400px;

    width: 720px;
    height: 720px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.08),
            transparent 62%
        );

    pointer-events: none;
}


.program-hero-layout {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 84px), 1460px);
    max-width: none;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.84fr);

    align-items: center;

    gap: 52px;
}


/* Teks hero */

.program-hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color: rgba(255, 255, 255, 0.77);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.21em;
    text-transform: uppercase;
}


.program-hero-eyebrow > span {
    width: 38px;
    height: 3px;

    flex-shrink: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--program-gold-1),
            var(--program-gold-3)
        );
}


.program-hero-content h1 {
    max-width: 770px;

    margin: 0 0 19px;

    color: #ffffff;

    font-size: clamp(45px, 4.6vw, 70px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.052em;
}


.program-hero-content h1 span,
.program-hero-content h1 strong {
    display: block;
}


.program-hero-content h1 strong {
    font-weight: inherit;

    background:
        linear-gradient(
            110deg,
            var(--program-gold-1),
            var(--program-gold-2),
            var(--program-gold-3)
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


.program-hero-content > p {
    max-width: 670px;

    margin: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
}


/* Tombol hero */

.program-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 25px;
}


.program-primary-button,
.program-secondary-button {
    min-height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 5px 6px 5px 18px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.program-primary-button {
    color: var(--program-ink);

    border: 1px solid var(--program-gold-3);

    background:
        linear-gradient(
            135deg,
            var(--program-gold-1),
            var(--program-gold-3)
        );

    box-shadow:
        0 14px 31px rgba(255, 177, 0, 0.24);
}


.program-secondary-button {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.23);

    background: rgba(255, 255, 255, 0.085);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.program-secondary-button svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


.program-primary-button b,
.program-secondary-button b {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 13px;
}


.program-primary-button b {
    color: #ffffff;
    background: var(--program-dark);
}


.program-secondary-button b {
    color: var(--program-dark);
    background: #ffffff;
}


.program-primary-button:hover,
.program-secondary-button:hover {
    transform: translateY(-3px);
}


/* Statistik hero */

.program-hero-statistics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 9px;

    max-width: 610px;

    margin-top: 28px;
}


.program-hero-statistics > div {
    min-height: 72px;

    padding: 13px 14px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}


.program-hero-statistics strong,
.program-hero-statistics span {
    display: block;
}


.program-hero-statistics strong {
    color: var(--program-gold-3);

    font-size: 23px;
    font-weight: 900;
    line-height: 1;
}


.program-hero-statistics span {
    margin-top: 7px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 8px;
    font-weight: 800;
    line-height: 1.35;
}


/* =====================================================
   VISUAL HERO
===================================================== */

.program-hero-visual {
    display: flex;
    justify-content: center;
}


.program-hero-panel {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 520px;
    min-height: 390px;

    padding: 21px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.065)
        );

    box-shadow:
        0 28px 60px rgba(2, 39, 46, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


.program-hero-panel::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 65px;
    left: 50%;

    width: 290px;
    height: 290px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 197, 27, 0.20),
            rgba(98, 212, 207, 0.10) 46%,
            transparent 72%
        );

    box-shadow:
        0 0 0 42px rgba(255, 255, 255, 0.018),
        0 0 0 84px rgba(255, 255, 255, 0.01);

    transform: translateX(-50%);
}


.program-panel-brand {
    position: relative;
    z-index: 6;

    display: flex;
    align-items: center;

    gap: 11px;
}


.program-panel-brand > div {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    padding: 5px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.14);
}


.program-panel-brand img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.program-panel-brand span,
.program-panel-brand strong,
.program-panel-brand small {
    display: block;
}


.program-panel-brand strong {
    color: #ffffff;

    font-size: 12px;
    font-weight: 900;
}


.program-panel-brand small {
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.60);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.program-panel-center {
    position: relative;
    z-index: 5;

    max-width: 260px;

    margin: 57px auto 0;

    text-align: center;
}


.program-panel-center > span {
    color: var(--program-gold-3);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.program-panel-center > strong {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}


.program-panel-center p {
    margin: 6px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
}


.program-panel-orbit {
    position: absolute;
    z-index: 7;

    min-width: 106px;

    padding: 11px 13px;

    border-radius: 14px;

    box-shadow:
        0 14px 29px rgba(2, 39, 46, 0.20);
}


.program-panel-orbit span,
.program-panel-orbit strong {
    display: block;
}


.program-panel-orbit span {
    font-size: 7px;
    font-weight: 900;
    opacity: 0.55;
}


.program-panel-orbit strong {
    margin-top: 3px;

    font-size: 11px;
    font-weight: 900;
}


.program-panel-orbit--one {
    right: 22px;
    bottom: 105px;

    color: var(--program-ink);

    background:
        linear-gradient(
            135deg,
            var(--program-gold-1),
            var(--program-gold-3)
        );
}


.program-panel-orbit--two {
    bottom: 35px;
    left: 22px;

    color: var(--program-ink);

    background:
        linear-gradient(
            135deg,
            var(--program-aqua-1),
            var(--program-aqua-2)
        );
}


.program-panel-orbit--three {
    right: 44px;
    bottom: 25px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(4, 59, 68, 0.86);

    backdrop-filter: blur(10px);
}


.program-panel-gate {
    position: absolute;
    z-index: 2;

    right: -8%;
    bottom: -30px;
    left: -8%;

    width: 116%;

    opacity: 0.35;

    filter:
        saturate(0.70)
        brightness(0.86);
}


/* =====================================================
   NAVIGASI PROGRAM
===================================================== */

.program-navigation {
    position: relative;
    z-index: 5;

    margin-top: -25px;
}


.program-navigation > .container {
    width: min(calc(100% - 96px), 1340px);
    max-width: none;
}


.program-navigation-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding: 13px 15px 13px 21px;

    border: 1px solid var(--program-line);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 20px 45px rgba(3, 49, 52, 0.11);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.program-navigation-inner > span {
    flex-shrink: 0;

    color: #718789;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.program-navigation nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 8px;
}


.program-navigation nav a {
    min-height: 42px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 5px 14px 5px 6px;

    color: var(--program-ink);

    border: 1px solid var(--program-line);
    border-radius: 999px;

    background: var(--program-soft);

    font-size: 9px;
    font-weight: 900;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.program-navigation nav a small {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--program-ink);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--program-gold-1),
            var(--program-gold-3)
        );

    font-size: 8px;
    font-weight: 900;
}


.program-navigation nav a:hover {
    border-color: var(--program-aqua-2);

    background: #ffffff;

    transform: translateY(-2px);
}


/* =====================================================
   DAFTAR PROGRAM
===================================================== */

.program-showcase-section {
    padding: 95px 0 105px;

    background:
        radial-gradient(
            circle at 100% 3%,
            rgba(98, 212, 207, 0.13),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--program-soft) 100%
        );
}


.program-showcase-section > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
}


.program-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 48px;

    width: min(calc(100% - 70px), 1340px);

    margin: 0 auto 40px;
}


.program-section-heading > div {
    max-width: 760px;
}


.program-section-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--program-teal-2);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.program-section-eyebrow span {
    width: 35px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--program-gold-1),
            var(--program-gold-3)
        );
}


.program-section-heading h2 {
    margin: 13px 0 0;

    color: var(--program-dark);

    font-size: clamp(35px, 3.8vw, 52px);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -0.043em;
}


.program-section-heading > p {
    max-width: 460px;

    margin: 0;

    color: #667e80;

    font-size: 13px;
    line-height: 1.75;
}


.program-showcase-list {
    display: grid;

    gap: 24px;
}


.program-showcase-card {
    --showcase-accent: var(--program-gold-2);
    --showcase-accent-strong: var(--program-gold-1);
    --showcase-accent-soft: #fff5c7;
    --showcase-rgb: 255, 197, 27;

    display: grid;
    grid-template-columns:
        minmax(360px, 0.86fr)
        minmax(0, 1.14fr);

    align-items: stretch;

    gap: 0;

    width: 100%;

    overflow: hidden;

    scroll-margin-top: 125px;

    border: 1px solid var(--program-line);
    border-radius: 27px;

    background: #ffffff;

    box-shadow:
        0 21px 50px rgba(3, 49, 52, 0.08);
}


.program-showcase--aqua {
    --showcase-accent: var(--program-aqua-2);
    --showcase-accent-strong: #35beb7;
    --showcase-accent-soft: var(--program-aqua-soft);
    --showcase-rgb: 98, 212, 207;
}


.program-showcase--teal {
    --showcase-accent: #16877f;
    --showcase-accent-strong: #08716f;
    --showcase-accent-soft: #dcefeb;
    --showcase-rgb: 8, 113, 111;
}


.program-showcase-card:nth-child(even)
.program-showcase-visual {
    order: 2;
}


.program-showcase-visual {
    position: relative;
    isolation: isolate;

    min-height: 455px;

    padding: 27px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(255, 255, 255, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 88%,
            rgba(var(--showcase-rgb), 0.32),
            transparent 38%
        ),
        linear-gradient(
            138deg,
            var(--program-teal-1),
            var(--program-teal-3) 68%,
            var(--program-teal-4)
        );
}


.program-showcase-visual::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 55%;
    left: 50%;

    width: 290px;
    height: 290px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 55px rgba(255, 255, 255, 0.018),
        0 0 0 110px rgba(255, 255, 255, 0.01);

    transform: translate(-50%, -50%);
}


.program-showcase-visual::after {
    content: "";

    position: absolute;
    z-index: 0;

    right: -100px;
    bottom: -120px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--showcase-rgb), 0.30),
            transparent 68%
        );
}


.program-visual-top {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.program-visual-top span {
    color: rgba(255, 255, 255, 0.67);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.program-visual-top strong {
    color: rgba(255, 255, 255, 0.20);

    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}


.program-visual-icon {
    position: relative;
    z-index: 4;

    width: 120px;
    height: 120px;

    display: grid;
    place-items: center;

    margin: 72px auto 0;

    color: var(--program-ink);

    border: 1px solid rgba(var(--showcase-rgb), 0.75);
    border-radius: 35px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            var(--showcase-accent-soft)
        );

    box-shadow:
        0 21px 45px rgba(2, 39, 46, 0.23);
}


.program-visual-icon svg {
    width: 62px;
    height: 62px;

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}


.program-visual-title {
    position: relative;
    z-index: 5;

    max-width: 330px;

    margin: 30px auto 0;

    text-align: center;
}


.program-visual-title span,
.program-visual-title strong {
    display: block;
}


.program-visual-title span {
    color: var(--showcase-accent);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.program-visual-title strong {
    margin-top: 7px;

    color: #ffffff;

    font-size: 21px;
    font-weight: 900;
    line-height: 1.2;
}


.program-floating-chip {
    position: absolute;
    z-index: 6;

    max-width: 170px;

    padding: 10px 13px;

    color: var(--program-ink);

    border-radius: 13px;

    background: var(--showcase-accent);

    box-shadow:
        0 13px 28px rgba(2, 39, 46, 0.20);

    font-size: 8px;
    font-weight: 900;
    line-height: 1.35;
}


.program-floating-chip--one {
    right: 20px;
    bottom: 92px;
}


.program-floating-chip--two {
    bottom: 28px;
    left: 20px;

    background: #ffffff;
}


/* Copy program */

.program-showcase-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: 48px 52px;
}


.program-copy-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--program-teal-2);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.program-copy-eyebrow span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--program-ink);

    border-radius: 10px;

    background: var(--showcase-accent);

    font-size: 8px;
}


.program-showcase-copy h2 {
    margin: 20px 0 9px;

    color: var(--program-dark);

    font-size: clamp(33px, 3.5vw, 48px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.043em;
}


.program-showcase-copy h3 {
    margin: 0;

    color: var(--showcase-accent-strong);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
}


.program-showcase-copy > p {
    max-width: 720px;

    margin: 16px 0 0;

    color: #667e80;

    font-size: 13px;
    line-height: 1.78;
}


.program-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-top: 24px;
}


.program-feature-grid > div {
    min-height: 55px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px 12px;

    border: 1px solid var(--program-line);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--showcase-accent-soft)
        );
}


.program-feature-grid span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--program-ink);

    border-radius: 9px;

    background: var(--showcase-accent);

    font-size: 8px;
    font-weight: 900;
}


.program-feature-grid strong {
    color: #31585c;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
}


.program-copy-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}


.program-copy-primary,
.program-copy-next {
    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.program-copy-primary {
    padding: 5px 6px 5px 17px;

    color: var(--program-ink);

    background: var(--showcase-accent);

    box-shadow:
        0 13px 28px rgba(var(--showcase-rgb), 0.19);
}


.program-copy-primary svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


.program-copy-primary b {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    margin-left: 4px;

    color: #ffffff;

    border-radius: 50%;

    background: var(--program-dark);
}


.program-copy-next {
    padding: 0 17px;

    color: var(--program-teal-2);

    border: 1px solid var(--program-line);

    background: #ffffff;
}


.program-copy-next b {
    font-size: 13px;
}


.program-copy-primary:hover,
.program-copy-next:hover {
    transform: translateY(-3px);
}


/* =====================================================
   METODE PEMBELAJARAN
===================================================== */

.program-method-section {
    padding: 0 0 92px;

    background:
        linear-gradient(
            180deg,
            var(--program-soft),
            #ffffff
        );
}


.program-method-section > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
}


.program-method-shell {
    padding: 54px 58px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 27px;

    background:
        radial-gradient(
            circle at 6% 0%,
            rgba(255, 255, 255, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 94% 100%,
            rgba(98, 212, 207, 0.23),
            transparent 35%
        ),
        linear-gradient(
            132deg,
            var(--program-teal-1),
            var(--program-teal-3) 68%,
            var(--program-teal-4)
        );

    box-shadow:
        0 27px 62px rgba(3, 49, 52, 0.17);
}


.program-method-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 45px;

    margin-bottom: 34px;
}


.program-method-heading > div {
    max-width: 750px;
}


.program-method-heading > div > span {
    color: var(--program-gold-3);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.program-method-heading h2 {
    margin: 11px 0 0;

    color: #ffffff;

    font-size: clamp(33px, 3.7vw, 49px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.042em;
}


.program-method-heading > p {
    max-width: 460px;

    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 12px;
    line-height: 1.72;
}


.program-method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 11px;
}


.program-method-grid article {
    min-height: 190px;

    display: flex;
    flex-direction: column;

    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.075);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.22s ease,
        background-color 0.22s ease;
}


.program-method-grid article:nth-child(2) {
    color: var(--program-ink);

    border-color: rgba(255, 218, 37, 0.72);

    background:
        linear-gradient(
            135deg,
            var(--program-gold-1),
            var(--program-gold-3)
        );
}


.program-method-grid article:nth-child(3) {
    color: var(--program-ink);

    border-color: rgba(131, 226, 220, 0.72);

    background:
        linear-gradient(
            135deg,
            var(--program-aqua-1),
            var(--program-aqua-2)
        );
}


.program-method-grid article:hover {
    transform: translateY(-5px);
}


.program-method-grid article > span {
    color: rgba(255, 255, 255, 0.44);

    font-size: 10px;
    font-weight: 900;
}


.program-method-grid article:nth-child(2) > span,
.program-method-grid article:nth-child(3) > span {
    color: rgba(21, 61, 66, 0.48);
}


.program-method-grid h3 {
    margin: auto 0 8px;

    color: inherit;

    font-size: 17px;
    font-weight: 900;
}


.program-method-grid p {
    margin: 0;

    color: rgba(255, 255, 255, 0.67);

    font-size: 10px;
    line-height: 1.65;
}


.program-method-grid article:nth-child(2) p,
.program-method-grid article:nth-child(3) p {
    color: rgba(21, 61, 66, 0.72);
}


/* =====================================================
   CTA PROGRAM
===================================================== */

.program-admission-section {
    padding: 0 0 90px;

    background: #ffffff;
}


.program-admission-section > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
}


.program-admission-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 43px 48px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 25px;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(255, 255, 255, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 100%,
            rgba(255, 197, 27, 0.20),
            transparent 36%
        ),
        linear-gradient(
            132deg,
            var(--program-teal-1),
            var(--program-teal-3) 68%,
            var(--program-teal-4)
        );

    box-shadow:
        0 25px 56px rgba(3, 49, 52, 0.16);
}


.program-admission-shell > div {
    max-width: 820px;
}


.program-admission-shell > div > span {
    color: var(--program-gold-3);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}


.program-admission-shell h2 {
    margin: 10px 0 8px;

    color: #ffffff;

    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 900;
    line-height: 1.11;
    letter-spacing: -0.038em;
}


.program-admission-shell p {
    margin: 0;

    color: rgba(255, 255, 255, 0.67);

    font-size: 12px;
    line-height: 1.7;
}


.program-admission-shell > a {
    min-width: 220px;
    min-height: 51px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    flex-shrink: 0;

    padding: 5px 6px 5px 18px;

    color: var(--program-ink);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--program-gold-1),
            var(--program-gold-3)
        );

    box-shadow:
        0 15px 31px rgba(255, 197, 27, 0.23);

    font-size: 9px;
    font-weight: 900;

    transition: transform 0.2s ease;
}


.program-admission-shell > a:hover {
    transform: translateY(-3px);
}


.program-admission-shell > a svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


.program-admission-shell > a b {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    margin-left: auto;

    color: #ffffff;

    border-radius: 50%;

    background: var(--program-dark);
}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1120px) {

    .program-hero-layout {
        width: min(calc(100% - 56px), 1250px);

        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, 0.78fr);

        gap: 34px;
    }


    .program-hero-content h1 {
        font-size: clamp(41px, 5vw, 58px);
    }


    .program-hero-panel {
        min-height: 350px;
    }


    .program-showcase-card {
        grid-template-columns:
            minmax(320px, 0.82fr)
            minmax(0, 1.18fr);
    }


    .program-showcase-copy {
        padding: 40px;
    }


    .program-method-shell {
        padding: 46px 38px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 880px) {

    .program-page-hero {
        width: var(
            --dm-page-frame,
            calc(100% - 16px)
        );

        margin-top: 5px;
        padding: 32px 0 36px;
    }


    .program-hero-layout {
        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        gap: 28px;
    }


    .program-hero-content {
        max-width: 700px;

        margin: 0 auto;

        text-align: center;
    }


    .program-hero-eyebrow,
    .program-hero-actions {
        justify-content: center;
    }


    .program-hero-content h1 {
        max-width: 650px;

        margin-right: auto;
        margin-left: auto;

        font-size: clamp(37px, 8vw, 51px);
    }


    .program-hero-content > p {
        max-width: 610px;

        margin: 0 auto;

        font-size: 13px;
    }


    .program-hero-statistics {
        max-width: 570px;

        margin-right: auto;
        margin-left: auto;
    }


    .program-hero-visual {
        max-width: 580px;

        margin: 0 auto;
    }


    .program-hero-panel {
        min-height: 305px;

        border-radius: 23px;
    }


    .program-panel-center {
        margin-top: 32px;
    }


    .program-navigation {
        margin-top: -18px;
    }


    .program-navigation > .container {
        width: calc(100% - 38px);
    }


    .program-navigation-inner {
        align-items: stretch;
        flex-direction: column;

        padding: 13px;
    }


    .program-navigation-inner > span {
        text-align: center;
    }


    .program-navigation nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        width: 100%;
    }


    .program-navigation nav a {
        justify-content: flex-start;

        min-width: 0;
        padding-right: 10px;
    }


    .program-navigation nav a strong {
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .program-showcase-section {
        padding: 75px 0 82px;
    }


    .program-section-heading {
        display: block;

        width: calc(100% - 32px);

        margin-bottom: 30px;
    }


    .program-section-heading > p {
        max-width: 650px;

        margin-top: 16px;
    }


    .program-showcase-card {
        grid-template-columns: 1fr;
    }


    .program-showcase-card:nth-child(even)
    .program-showcase-visual,
    .program-showcase-visual {
        order: 0;
    }


    .program-showcase-copy {
        order: 1;
    }


    .program-showcase-visual {
        min-height: 340px;
    }


    .program-visual-icon {
        margin-top: 38px;
    }


    .program-showcase-copy {
        padding: 35px 31px;
    }


    .program-method-heading {
        display: block;
    }


    .program-method-heading > p {
        max-width: 650px;

        margin-top: 15px;
    }


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


    .program-admission-shell {
        align-items: flex-start;
        flex-direction: column;

        padding: 37px 34px;
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 560px) {

    .program-page-hero {
        padding: 26px 0 29px;
    }


    .program-hero-layout {
        width: calc(100% - 24px);

        gap: 21px;
    }


    .program-hero-eyebrow {
        gap: 8px;

        margin-bottom: 13px;

        font-size: 7px;
        letter-spacing: 0.15em;
    }


    .program-hero-eyebrow > span {
        width: 25px;
        height: 2px;
    }


    .program-hero-content h1 {
        margin-bottom: 13px;

        font-size: clamp(31px, 10.5vw, 43px);
        line-height: 1.01;
    }


    .program-hero-content > p {
        font-size: 11px;
        line-height: 1.62;
    }


    .program-hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 19px;
    }


    .program-primary-button,
    .program-secondary-button {
        width: 100%;
        min-height: 44px;

        justify-content: space-between;
    }


    .program-primary-button b,
    .program-secondary-button b {
        width: 34px;
        height: 34px;
    }


    .program-hero-statistics {
        gap: 5px;

        margin-top: 18px;
    }


    .program-hero-statistics > div {
        min-height: 62px;

        padding: 10px 4px;
    }


    .program-hero-statistics strong {
        font-size: 18px;
    }


    .program-hero-statistics span {
        font-size: 6px;
    }


    .program-hero-panel {
        min-height: 250px;

        padding: 14px;

        border-radius: 19px;
    }


    .program-panel-brand > div {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    .program-panel-brand strong {
        font-size: 9px;
    }


    .program-panel-brand small {
        display: none;
    }


    .program-panel-center {
        margin-top: 20px;
    }


    .program-panel-center > strong {
        font-size: 43px;
    }


    .program-panel-center p {
        max-width: 180px;

        margin-right: auto;
        margin-left: auto;

        font-size: 7px;
    }


    .program-panel-orbit {
        min-width: 76px;

        padding: 7px 9px;

        border-radius: 10px;
    }


    .program-panel-orbit strong {
        font-size: 8px;
    }


    .program-panel-orbit--one {
        right: 10px;
        bottom: 58px;
    }


    .program-panel-orbit--two {
        bottom: 11px;
        left: 10px;
    }


    .program-panel-orbit--three {
        right: 15px;
        bottom: 9px;
    }


    .program-navigation > .container {
        width: calc(100% - 28px);
    }


    .program-navigation nav {
        grid-template-columns: 1fr;
    }


    .program-navigation nav a {
        width: 100%;
    }


    .program-showcase-section {
        padding: 62px 0 67px;
    }


    .program-showcase-section > .container,
    .program-method-section > .container,
    .program-admission-section > .container {
        width: calc(100% - 16px);
    }


    .program-section-heading {
        width: calc(100% - 20px);

        margin-bottom: 24px;
    }


    .program-section-eyebrow {
        font-size: 7px;
    }


    .program-section-eyebrow span {
        width: 25px;
        height: 2px;
    }


    .program-section-heading h2 {
        margin-top: 10px;

        font-size: 29px;
    }


    .program-section-heading > p {
        font-size: 11px;
        line-height: 1.6;
    }


    .program-showcase-list {
        gap: 16px;
    }


    .program-showcase-card {
        border-radius: 20px;

        scroll-margin-top: 95px;
    }


    .program-showcase-visual {
        min-height: 265px;

        padding: 17px;
    }


    .program-visual-top span {
        font-size: 6px;
    }


    .program-visual-top strong {
        font-size: 26px;
    }


    .program-visual-icon {
        width: 85px;
        height: 85px;

        margin-top: 29px;

        border-radius: 25px;
    }


    .program-visual-icon svg {
        width: 45px;
        height: 45px;
    }


    .program-visual-title {
        margin-top: 20px;
    }


    .program-visual-title strong {
        font-size: 16px;
    }


    .program-floating-chip {
        max-width: 128px;

        padding: 7px 9px;

        border-radius: 10px;

        font-size: 6px;
    }


    .program-floating-chip--one {
        right: 10px;
        bottom: 48px;
    }


    .program-floating-chip--two {
        bottom: 10px;
        left: 10px;
    }


    .program-showcase-copy {
        padding: 27px 18px;
    }


    .program-copy-eyebrow {
        font-size: 7px;
    }


    .program-showcase-copy h2 {
        margin-top: 16px;

        font-size: 29px;
    }


    .program-showcase-copy h3 {
        font-size: 13px;
    }


    .program-showcase-copy > p {
        margin-top: 12px;

        font-size: 11px;
        line-height: 1.65;
    }


    .program-feature-grid {
        grid-template-columns: 1fr;

        gap: 7px;

        margin-top: 18px;
    }


    .program-feature-grid > div {
        min-height: 49px;
    }


    .program-copy-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;

        margin-top: 19px;
    }


    .program-copy-primary,
    .program-copy-next {
        width: 100%;
    }


    .program-copy-primary {
        justify-content: space-between;
    }


    .program-method-section {
        padding-bottom: 60px;
    }


    .program-method-shell {
        padding: 30px 16px;

        border-radius: 20px;
    }


    .program-method-heading {
        margin-bottom: 23px;
    }


    .program-method-heading h2 {
        font-size: 28px;
    }


    .program-method-heading > p {
        font-size: 10px;
    }


    .program-method-grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .program-method-grid article {
        min-height: 135px;

        padding: 16px;

        border-radius: 15px;
    }


    .program-method-grid h3 {
        font-size: 15px;
    }


    .program-method-grid p {
        font-size: 9px;
    }


    .program-admission-section {
        padding-bottom: 62px;
    }


    .program-admission-shell {
        padding: 29px 19px;

        border-radius: 19px;
    }


    .program-admission-shell h2 {
        font-size: 26px;
    }


    .program-admission-shell p {
        font-size: 10px;
    }


    .program-admission-shell > a {
        width: 100%;
        min-width: 0;
    }

}


/* =====================================================
   RTL / BAHASA ARAB
===================================================== */

html[dir="rtl"] .program-hero-eyebrow,
html[dir="rtl"] .program-section-eyebrow {
    flex-direction: row-reverse;
}


html[dir="rtl"] .program-copy-primary {
    padding-right: 17px;
    padding-left: 6px;
}


html[dir="rtl"] .program-copy-primary b,
html[dir="rtl"] .program-admission-shell > a b {
    margin-right: auto;
    margin-left: 0;
}


/* =====================================================
   DARK MODE
===================================================== */

html[data-theme="dark"] .program-navigation-inner,
html[data-theme="dark"] .program-showcase-card {
    border-color: #24494b;

    background: #0c292d;
}


html[data-theme="dark"] .program-showcase-section {
    background:
        radial-gradient(
            circle at 100% 3%,
            rgba(98, 212, 207, 0.07),
            transparent 25%
        ),
        #071f23;
}


html[data-theme="dark"] .program-section-heading h2,
html[data-theme="dark"] .program-showcase-copy h2 {
    color: #efffff;
}


html[data-theme="dark"] .program-section-heading > p,
html[data-theme="dark"] .program-showcase-copy > p {
    color: #aac3c1;
}


html[data-theme="dark"] .program-feature-grid > div {
    border-color: #294d4e;

    background: #102f33;
}


html[data-theme="dark"] .program-feature-grid strong {
    color: #d1e6e3;
}


html[data-theme="dark"] .program-navigation nav a {
    border-color: #294d4e;

    background: #102f33;

    color: #efffff;
}


html[data-theme="dark"] .program-method-section,
html[data-theme="dark"] .program-admission-section {
    background: #071f23;
}

/* =====================================================
   FINAL PREMIUM FACILITIES PAGE
   YPP DARUL MA'ARIF
===================================================== */

:root {
    --facility-teal-1: #17867b;
    --facility-teal-2: #08716f;
    --facility-teal-3: #07586a;
    --facility-teal-4: #05475d;

    --facility-dark: #073f48;
    --facility-ink: #153d42;

    --facility-gold-1: #ffad00;
    --facility-gold-2: #ffc51b;
    --facility-gold-3: #ffda25;
    --facility-gold-soft: #fff6cc;

    --facility-aqua-1: #85e3dd;
    --facility-aqua-2: #62d4cf;
    --facility-aqua-soft: #ddf7f4;

    --facility-soft: #f2f8f6;
    --facility-line: #dcebe7;
}


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

.facilities-page-hero {
    position: relative;
    isolation: isolate;

    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    margin: 8px auto 0;
    padding: 44px 0 48px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 5% 3%,
            rgba(255, 255, 255, 0.18),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 56% 115%,
            rgba(83, 224, 209, 0.27),
            transparent 57%
        ),
        linear-gradient(
            132deg,
            var(--facility-teal-1) 0%,
            var(--facility-teal-2) 42%,
            var(--facility-teal-3) 72%,
            var(--facility-teal-4) 100%
        );

    box-shadow:
        0 28px 65px rgba(3, 49, 54, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.33);
}


.facilities-page-hero::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -235px;
    left: -205px;

    width: 530px;
    height: 530px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 75px rgba(255, 255, 255, 0.018),
        0 0 0 150px rgba(255, 255, 255, 0.01);

    pointer-events: none;
}


.facilities-page-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    right: -290px;
    bottom: -410px;

    width: 730px;
    height: 730px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.08),
            transparent 62%
        );

    pointer-events: none;
}


.facilities-hero-layout {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 84px), 1460px);
    max-width: none;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.84fr);

    align-items: center;

    gap: 52px;
}


/* Teks hero */

.facilities-hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color: rgba(255, 255, 255, 0.77);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.21em;
    text-transform: uppercase;
}


.facilities-hero-eyebrow > span {
    width: 38px;
    height: 3px;

    flex-shrink: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--facility-gold-1),
            var(--facility-gold-3)
        );
}


.facilities-hero-content h1 {
    max-width: 770px;

    margin: 0 0 19px;

    color: #ffffff;

    font-size: clamp(45px, 4.6vw, 70px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.052em;
}


.facilities-hero-content h1 span,
.facilities-hero-content h1 strong {
    display: block;
}


.facilities-hero-content h1 strong {
    font-weight: inherit;

    background:
        linear-gradient(
            110deg,
            var(--facility-gold-1),
            var(--facility-gold-2),
            var(--facility-gold-3)
        );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;
}


.facilities-hero-content > p {
    max-width: 680px;

    margin: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 14px;
    line-height: 1.75;
}


/* Tombol hero */

.facilities-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 25px;
}


.facilities-primary-button,
.facilities-secondary-button {
    min-height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 5px 6px 5px 18px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.facilities-primary-button {
    color: var(--facility-ink);

    border: 1px solid var(--facility-gold-3);

    background:
        linear-gradient(
            135deg,
            var(--facility-gold-1),
            var(--facility-gold-3)
        );

    box-shadow:
        0 14px 31px rgba(255, 177, 0, 0.24);
}


.facilities-secondary-button {
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.23);

    background: rgba(255, 255, 255, 0.085);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.facilities-secondary-button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}


.facilities-primary-button b,
.facilities-secondary-button b {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    font-size: 13px;
}


.facilities-primary-button b {
    color: #ffffff;
    background: var(--facility-dark);
}


.facilities-secondary-button b {
    color: var(--facility-dark);
    background: #ffffff;
}


.facilities-primary-button:hover,
.facilities-secondary-button:hover {
    transform: translateY(-3px);
}


/* Statistik */

.facilities-hero-statistics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 9px;

    max-width: 610px;

    margin-top: 28px;
}


.facilities-hero-statistics > div {
    min-height: 72px;

    padding: 13px 14px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}


.facilities-hero-statistics strong,
.facilities-hero-statistics span {
    display: block;
}


.facilities-hero-statistics strong {
    color: var(--facility-gold-3);

    font-size: 23px;
    font-weight: 900;
    line-height: 1;
}


.facilities-hero-statistics span {
    margin-top: 7px;

    color: rgba(255, 255, 255, 0.68);

    font-size: 8px;
    font-weight: 800;
    line-height: 1.35;
}


/* =====================================================
   VISUAL HERO
===================================================== */

.facilities-hero-visual {
    display: flex;
    justify-content: center;
}


.facilities-visual-panel {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: 520px;
    min-height: 390px;

    padding: 21px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.065)
        );

    box-shadow:
        0 28px 60px rgba(2, 39, 46, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


.facilities-visual-panel::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 65px;
    left: 50%;

    width: 290px;
    height: 290px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 197, 27, 0.20),
            rgba(98, 212, 207, 0.10) 46%,
            transparent 72%
        );

    box-shadow:
        0 0 0 42px rgba(255, 255, 255, 0.018),
        0 0 0 84px rgba(255, 255, 255, 0.01);

    transform: translateX(-50%);
}


.facilities-visual-brand {
    position: relative;
    z-index: 6;

    display: flex;
    align-items: center;

    gap: 11px;
}


.facilities-visual-brand > div {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    padding: 5px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.14);
}


.facilities-visual-brand img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.facilities-visual-brand span,
.facilities-visual-brand strong,
.facilities-visual-brand small {
    display: block;
}


.facilities-visual-brand strong {
    color: #ffffff;

    font-size: 12px;
    font-weight: 900;
}


.facilities-visual-brand small {
    margin-top: 3px;

    color: rgba(255, 255, 255, 0.60);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


.facilities-visual-center {
    position: relative;
    z-index: 5;

    max-width: 270px;

    margin: 52px auto 0;

    text-align: center;
}


.facilities-visual-center > span {
    color: var(--facility-gold-3);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.facilities-visual-center > strong {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 70px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
}


.facilities-visual-center p {
    max-width: 220px;

    margin: 6px auto 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
}


.facilities-visual-gate {
    position: absolute;
    z-index: 2;

    right: -8%;
    bottom: -30px;
    left: -8%;

    width: 116%;

    opacity: 0.36;

    filter:
        saturate(0.70)
        brightness(0.86);
}


.facilities-floating-card {
    position: absolute;
    z-index: 7;

    min-width: 105px;

    padding: 11px 13px;

    border-radius: 14px;

    box-shadow:
        0 14px 29px rgba(2, 39, 46, 0.20);
}


.facilities-floating-card span,
.facilities-floating-card strong {
    display: block;
}


.facilities-floating-card span {
    font-size: 7px;
    font-weight: 900;
    opacity: 0.55;
}


.facilities-floating-card strong {
    margin-top: 3px;

    font-size: 11px;
    font-weight: 900;
}


.facilities-floating-card--learning {
    right: 22px;
    bottom: 105px;

    color: var(--facility-ink);

    background:
        linear-gradient(
            135deg,
            var(--facility-gold-1),
            var(--facility-gold-3)
        );
}


.facilities-floating-card--worship {
    bottom: 34px;
    left: 22px;

    color: var(--facility-ink);

    background:
        linear-gradient(
            135deg,
            var(--facility-aqua-1),
            var(--facility-aqua-2)
        );
}


.facilities-floating-card--skill {
    right: 42px;
    bottom: 24px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(4, 59, 68, 0.86);

    backdrop-filter: blur(10px);
}


/* =====================================================
   NAVIGASI CEPAT
===================================================== */

.facilities-quick-navigation {
    position: relative;
    z-index: 5;

    margin-top: -25px;
}


.facilities-quick-navigation > .container {
    width: min(calc(100% - 96px), 1450px);
    max-width: none;
}


.facilities-quick-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding: 13px 15px 13px 21px;

    border: 1px solid var(--facility-line);
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 20px 45px rgba(3, 49, 52, 0.11);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.facilities-quick-inner > span {
    flex-shrink: 0;

    color: #718789;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.facilities-quick-inner nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 7px;
}


.facilities-quick-inner nav a {
    min-height: 40px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 4px 12px 4px 5px;

    color: var(--facility-ink);

    border: 1px solid var(--facility-line);
    border-radius: 999px;

    background: var(--facility-soft);

    font-size: 8px;
    font-weight: 900;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.facilities-quick-inner nav a small {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--facility-ink);

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--facility-gold-1),
            var(--facility-gold-3)
        );

    font-size: 7px;
    font-weight: 900;
}


.facilities-quick-inner nav a:hover {
    border-color: var(--facility-aqua-2);

    background: #ffffff;

    transform: translateY(-2px);
}


/* =====================================================
   DAFTAR FASILITAS
===================================================== */

.facilities-directory {
    position: relative;

    padding: 96px 0 105px;

    background:
        radial-gradient(
            circle at 100% 3%,
            rgba(98, 212, 207, 0.13),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--facility-soft) 100%
        );
}


.facilities-directory > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
}


.facilities-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 48px;

    width: min(calc(100% - 70px), 1400px);

    margin: 0 auto 40px;
}


.facilities-section-heading > div {
    max-width: 790px;
}


.facilities-section-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--facility-teal-2);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.facilities-section-eyebrow span {
    width: 35px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--facility-gold-1),
            var(--facility-gold-3)
        );
}


.facilities-section-heading h2 {
    margin: 13px 0 0;

    color: var(--facility-dark);

    font-size: clamp(35px, 3.8vw, 52px);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -0.043em;
}


.facilities-section-heading > p {
    max-width: 470px;

    margin: 0;

    color: #667e80;

    font-size: 13px;
    line-height: 1.75;
}


/* Grid kartu */

.facilities-premium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.facility-premium-card {
    --facility-card-accent: var(--facility-gold-2);
    --facility-card-soft: var(--facility-gold-soft);
    --facility-card-rgb: 255, 197, 27;

    position: relative;
    isolation: isolate;

    min-height: 345px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    overflow: hidden;

    scroll-margin-top: 125px;

    border: 1px solid var(--facility-line);
    border-radius: 23px;

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--facility-card-rgb), 0.15),
            transparent 37%
        ),
        linear-gradient(
            150deg,
            #ffffff 0%,
            #ffffff 74%,
            var(--facility-card-soft) 100%
        );

    box-shadow:
        0 18px 43px rgba(3, 49, 52, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.facility-premium-card::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -105px;
    right: -95px;

    width: 245px;
    height: 245px;

    border: 1px solid rgba(var(--facility-card-rgb), 0.38);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--facility-card-rgb), 0.12),
            transparent 69%
        );
}


.facility-premium-card::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--facility-card-accent),
            transparent 72%
        );
}


.facility-premium-card--aqua {
    --facility-card-accent: var(--facility-aqua-2);
    --facility-card-soft: var(--facility-aqua-soft);
    --facility-card-rgb: 98, 212, 207;
}


.facility-premium-card--teal {
    --facility-card-accent: #16877f;
    --facility-card-soft: #e0f0ed;
    --facility-card-rgb: 22, 135, 127;
}


.facility-premium-card:hover {
    border-color: rgba(var(--facility-card-rgb), 0.55);

    transform: translateY(-7px);

    box-shadow:
        0 28px 56px rgba(3, 49, 52, 0.13);
}


.facility-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.facility-card-number {
    color: rgba(7, 63, 72, 0.13);

    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}


.facility-card-category {
    min-height: 29px;

    display: inline-flex;
    align-items: center;

    padding: 0 11px;

    color: var(--facility-ink);

    border: 1px solid rgba(var(--facility-card-rgb), 0.45);
    border-radius: 999px;

    background: var(--facility-card-soft);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.facility-card-icon {
    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    margin: 29px 0 22px;

    color: var(--facility-ink);

    border: 1px solid rgba(var(--facility-card-rgb), 0.58);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--facility-card-soft)
        );

    box-shadow:
        0 14px 30px rgba(var(--facility-card-rgb), 0.14);
}


.facility-card-icon svg {
    width: 45px;
    height: 45px;

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.6;
}


.facility-card-content h3 {
    margin: 0 0 11px;

    color: var(--facility-dark);

    font-size: 21px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.025em;
}


.facility-card-content p {
    margin: 0;

    color: #687f81;

    font-size: 12px;
    line-height: 1.72;
}


.facility-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: auto;
    padding-top: 24px;
}


.facility-card-footer > a {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--facility-teal-2);

    font-size: 9px;
    font-weight: 900;
}


.facility-card-footer > a b {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--facility-teal-1),
            var(--facility-teal-3)
        );

    transition: transform 0.2s ease;
}


.facility-card-footer > a:hover b {
    transform: rotate(45deg);
}


.facility-card-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #819493;

    font-size: 7px;
    font-weight: 800;
}


.facility-card-status i {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--facility-card-accent);

    box-shadow:
        0 0 0 4px rgba(var(--facility-card-rgb), 0.12);
}


/* Kartu terakhir dibuat lebih lebar */

.facility-premium-card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;

    min-height: 275px;
}


.facility-premium-card:last-child:nth-child(3n + 1)
.facility-card-icon {
    margin-top: 21px;
}


/* =====================================================
   STANDAR PENGELOLAAN
===================================================== */

.facilities-standard-section {
    padding: 0 0 92px;

    background:
        linear-gradient(
            180deg,
            var(--facility-soft),
            #ffffff
        );
}


.facilities-standard-section > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
}


.facilities-standard-shell {
    padding: 52px 56px;

    overflow: hidden;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 27px;

    background:
        radial-gradient(
            circle at 6% 0%,
            rgba(255, 255, 255, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 94% 100%,
            rgba(98, 212, 207, 0.23),
            transparent 35%
        ),
        linear-gradient(
            132deg,
            var(--facility-teal-1),
            var(--facility-teal-3) 68%,
            var(--facility-teal-4)
        );

    box-shadow:
        0 27px 62px rgba(3, 49, 52, 0.17);
}


.facilities-standard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 45px;

    margin-bottom: 33px;
}


.facilities-standard-heading > div {
    max-width: 790px;
}


.facilities-standard-heading > div > span {
    color: var(--facility-gold-3);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.facilities-standard-heading h2 {
    margin: 11px 0 0;

    color: #ffffff;

    font-size: clamp(33px, 3.7vw, 49px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.042em;
}


.facilities-standard-heading > p {
    max-width: 470px;

    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 12px;
    line-height: 1.72;
}


.facilities-standard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 11px;
}


.facilities-standard-grid article {
    min-height: 208px;

    display: flex;
    flex-direction: column;

    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.075);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform 0.22s ease,
        background-color 0.22s ease;
}


.facilities-standard-grid article:nth-child(2) {
    color: var(--facility-ink);

    border-color: rgba(255, 218, 37, 0.72);

    background:
        linear-gradient(
            135deg,
            var(--facility-gold-1),
            var(--facility-gold-3)
        );
}


.facilities-standard-grid article:nth-child(3) {
    color: var(--facility-ink);

    border-color: rgba(131, 226, 220, 0.72);

    background:
        linear-gradient(
            135deg,
            var(--facility-aqua-1),
            var(--facility-aqua-2)
        );
}


.facilities-standard-grid article:hover {
    transform: translateY(-5px);
}


.facilities-standard-grid article > span {
    color: rgba(255, 255, 255, 0.43);

    font-size: 9px;
    font-weight: 900;
}


.facilities-standard-grid article:nth-child(2) > span,
.facilities-standard-grid article:nth-child(3) > span {
    color: rgba(21, 61, 66, 0.47);
}


.facilities-standard-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    margin-top: 22px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;

    background: rgba(255, 255, 255, 0.10);
}


.facilities-standard-grid article:nth-child(2)
.facilities-standard-icon,
.facilities-standard-grid article:nth-child(3)
.facilities-standard-icon {
    border-color: rgba(21, 61, 66, 0.15);

    background: rgba(255, 255, 255, 0.27);
}


.facilities-standard-icon svg {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}


.facilities-standard-grid h3 {
    margin: auto 0 8px;

    color: inherit;

    font-size: 17px;
    font-weight: 900;
}


.facilities-standard-grid p {
    margin: 0;

    color: rgba(255, 255, 255, 0.67);

    font-size: 10px;
    line-height: 1.65;
}


.facilities-standard-grid article:nth-child(2) p,
.facilities-standard-grid article:nth-child(3) p {
    color: rgba(21, 61, 66, 0.72);
}


/* =====================================================
   LOKASI
===================================================== */

.facilities-location-section {
    padding: 0 0 95px;

    background: #ffffff;
}


.facilities-location-section > .container {
    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    max-width: none;
}


.facilities-location-shell {
    display: grid;
    grid-template-columns:
        minmax(390px, 0.93fr)
        minmax(0, 1.07fr);

    align-items: stretch;

    overflow: hidden;

    border: 1px solid var(--facility-line);
    border-radius: 27px;

    background: #ffffff;

    box-shadow:
        0 22px 54px rgba(3, 49, 52, 0.09);
}


.facilities-map {
    position: relative;

    min-height: 470px;

    overflow: hidden;

    background: var(--facility-soft);
}


.facilities-map iframe {
    width: 100%;
    height: 100%;
    min-height: 470px;

    display: block;

    border: 0;

    filter:
        saturate(0.75)
        contrast(0.96);
}


.facilities-map-badge {
    position: absolute;

    right: 22px;
    bottom: 22px;
    left: 22px;

    padding: 15px 17px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;

    background: rgba(4, 59, 68, 0.82);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.facilities-map-badge span,
.facilities-map-badge strong {
    display: block;
}


.facilities-map-badge span {
    color: var(--facility-gold-3);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.facilities-map-badge strong {
    margin-top: 4px;

    font-size: 15px;
    font-weight: 900;
}


.facilities-location-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 52px 58px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(98, 212, 207, 0.13),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f7fbfa
        );
}


.facilities-location-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--facility-teal-2);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.facilities-location-eyebrow span {
    width: 34px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--facility-gold-1),
            var(--facility-gold-3)
        );
}


.facilities-location-content h2 {
    max-width: 720px;

    margin: 14px 0 14px;

    color: var(--facility-dark);

    font-size: clamp(34px, 3.8vw, 51px);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -0.043em;
}


.facilities-location-content > p {
    max-width: 700px;

    margin: 0;

    color: #687f81;

    font-size: 13px;
    line-height: 1.78;
}


.facilities-location-address {
    display: flex;
    align-items: center;

    gap: 13px;

    max-width: 620px;

    margin-top: 25px;
    padding: 13px 15px;

    border: 1px solid var(--facility-line);
    border-radius: 16px;

    background: #ffffff;
}


.facilities-location-address > div {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--facility-ink);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--facility-gold-1),
            var(--facility-gold-3)
        );
}


.facilities-location-address svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}


.facilities-location-address span,
.facilities-location-address small,
.facilities-location-address strong {
    display: block;
}


.facilities-location-address small {
    color: #8a9c9d;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.facilities-location-address strong {
    margin-top: 3px;

    color: var(--facility-dark);

    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}


.facilities-location-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}


.facilities-location-primary,
.facilities-location-secondary {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.facilities-location-primary {
    padding: 5px 6px 5px 17px;

    color: #ffffff;

    background: #25d366;

    box-shadow:
        0 13px 28px rgba(37, 211, 102, 0.23);
}


.facilities-location-primary svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


.facilities-location-primary b {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    margin-left: 3px;

    color: #ffffff;

    border-radius: 50%;

    background: var(--facility-dark);
}


.facilities-location-secondary {
    padding: 0 17px;

    color: var(--facility-teal-2);

    border: 1px solid var(--facility-line);

    background: #ffffff;
}


.facilities-location-primary:hover,
.facilities-location-secondary:hover {
    transform: translateY(-3px);
}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1120px) {

    .facilities-hero-layout {
        width: min(calc(100% - 56px), 1250px);

        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, 0.78fr);

        gap: 34px;
    }


    .facilities-hero-content h1 {
        font-size: clamp(41px, 5vw, 58px);
    }


    .facilities-visual-panel {
        min-height: 350px;
    }


    .facilities-quick-inner {
        align-items: stretch;
        flex-direction: column;
    }


    .facilities-quick-inner > span {
        text-align: center;
    }


    .facilities-quick-inner nav {
        justify-content: center;
    }


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


    .facility-premium-card:last-child:nth-child(3n + 1) {
        grid-column: auto;
        min-height: 345px;
    }


    .facility-premium-card:last-child:nth-child(2n + 1) {
        grid-column: 1 / -1;
        min-height: 275px;
    }


    .facilities-standard-shell {
        padding: 46px 38px;
    }


    .facilities-location-content {
        padding: 44px 38px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 880px) {

    .facilities-page-hero {
        width: var(
            --dm-page-frame,
            calc(100% - 16px)
        );

        margin-top: 5px;
        padding: 32px 0 36px;
    }


    .facilities-hero-layout {
        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        gap: 28px;
    }


    .facilities-hero-content {
        max-width: 700px;

        margin: 0 auto;

        text-align: center;
    }


    .facilities-hero-eyebrow,
    .facilities-hero-actions {
        justify-content: center;
    }


    .facilities-hero-content h1 {
        max-width: 650px;

        margin-right: auto;
        margin-left: auto;

        font-size: clamp(37px, 8vw, 51px);
    }


    .facilities-hero-content > p {
        max-width: 610px;

        margin: 0 auto;

        font-size: 13px;
    }


    .facilities-hero-statistics {
        max-width: 570px;

        margin-right: auto;
        margin-left: auto;
    }


    .facilities-hero-visual {
        max-width: 580px;

        margin: 0 auto;
    }


    .facilities-visual-panel {
        min-height: 305px;

        border-radius: 23px;
    }


    .facilities-visual-center {
        margin-top: 30px;
    }


    .facilities-quick-navigation {
        margin-top: -18px;
    }


    .facilities-quick-navigation > .container {
        width: calc(100% - 38px);
    }


    .facilities-quick-inner nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        width: 100%;
    }


    .facilities-quick-inner nav a {
        width: 100%;
        min-width: 0;
    }


    .facilities-quick-inner nav a strong {
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .facilities-directory {
        padding: 75px 0 82px;
    }


    .facilities-section-heading {
        display: block;

        width: calc(100% - 32px);

        margin-bottom: 30px;
    }


    .facilities-section-heading > p {
        max-width: 650px;

        margin-top: 16px;
    }


    .facilities-standard-heading {
        display: block;
    }


    .facilities-standard-heading > p {
        max-width: 650px;

        margin-top: 15px;
    }


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


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


    .facilities-map,
    .facilities-map iframe {
        min-height: 360px;
    }

}


/* =====================================================
   HP
===================================================== */

@media (max-width: 560px) {

    .facilities-page-hero {
        padding: 26px 0 29px;
    }


    .facilities-hero-layout {
        width: calc(100% - 24px);

        gap: 21px;
    }


    .facilities-hero-eyebrow {
        gap: 8px;

        margin-bottom: 13px;

        font-size: 7px;
        letter-spacing: 0.15em;
    }


    .facilities-hero-eyebrow > span {
        width: 25px;
        height: 2px;
    }


    .facilities-hero-content h1 {
        margin-bottom: 13px;

        font-size: clamp(31px, 10.5vw, 43px);
        line-height: 1.01;
    }


    .facilities-hero-content > p {
        font-size: 11px;
        line-height: 1.62;
    }


    .facilities-hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 19px;
    }


    .facilities-primary-button,
    .facilities-secondary-button {
        width: 100%;
        min-height: 44px;

        justify-content: space-between;
    }


    .facilities-primary-button b,
    .facilities-secondary-button b {
        width: 34px;
        height: 34px;
    }


    .facilities-hero-statistics {
        gap: 5px;

        margin-top: 18px;
    }


    .facilities-hero-statistics > div {
        min-height: 62px;

        padding: 10px 4px;
    }


    .facilities-hero-statistics strong {
        font-size: 18px;
    }


    .facilities-hero-statistics span {
        font-size: 6px;
    }


    .facilities-visual-panel {
        min-height: 250px;

        padding: 14px;

        border-radius: 19px;
    }


    .facilities-visual-brand > div {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    .facilities-visual-brand strong {
        font-size: 9px;
    }


    .facilities-visual-brand small {
        display: none;
    }


    .facilities-visual-center {
        margin-top: 19px;
    }


    .facilities-visual-center > strong {
        font-size: 43px;
    }


    .facilities-visual-center p {
        max-width: 180px;

        font-size: 7px;
    }


    .facilities-floating-card {
        min-width: 76px;

        padding: 7px 9px;

        border-radius: 10px;
    }


    .facilities-floating-card strong {
        font-size: 8px;
    }


    .facilities-floating-card--learning {
        right: 10px;
        bottom: 58px;
    }


    .facilities-floating-card--worship {
        bottom: 11px;
        left: 10px;
    }


    .facilities-floating-card--skill {
        right: 15px;
        bottom: 9px;
    }


    .facilities-quick-navigation > .container {
        width: calc(100% - 28px);
    }


    .facilities-quick-inner {
        padding: 11px;
    }


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


    .facilities-directory > .container,
    .facilities-standard-section > .container,
    .facilities-location-section > .container {
        width: calc(100% - 16px);
    }


    .facilities-section-heading {
        width: calc(100% - 20px);

        margin-bottom: 24px;
    }


    .facilities-section-eyebrow {
        font-size: 7px;
    }


    .facilities-section-eyebrow span {
        width: 25px;
        height: 2px;
    }


    .facilities-section-heading h2 {
        margin-top: 10px;

        font-size: 29px;
    }


    .facilities-section-heading > p {
        font-size: 11px;
        line-height: 1.6;
    }


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

        gap: 14px;
    }


    .facility-premium-card,
    .facility-premium-card:last-child:nth-child(2n + 1),
    .facility-premium-card:last-child:nth-child(3n + 1) {
        min-height: 305px;

        padding: 20px;

        grid-column: auto;

        border-radius: 19px;
    }


    .facility-card-number {
        font-size: 25px;
    }


    .facility-card-category {
        max-width: 160px;

        font-size: 6px;
    }


    .facility-card-icon {
        width: 67px;
        height: 67px;

        margin: 23px 0 18px;

        border-radius: 19px;
    }


    .facility-card-icon svg {
        width: 39px;
        height: 39px;
    }


    .facility-card-content h3 {
        font-size: 19px;
    }


    .facility-card-content p {
        font-size: 11px;
    }


    .facility-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }


    .facilities-standard-section {
        padding-bottom: 60px;
    }


    .facilities-standard-shell {
        padding: 30px 16px;

        border-radius: 20px;
    }


    .facilities-standard-heading {
        margin-bottom: 23px;
    }


    .facilities-standard-heading h2 {
        font-size: 28px;
    }


    .facilities-standard-heading > p {
        font-size: 10px;
    }


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

        gap: 8px;
    }


    .facilities-standard-grid article {
        min-height: 160px;

        padding: 16px;

        border-radius: 15px;
    }


    .facilities-standard-icon {
        margin-top: 15px;
    }


    .facilities-standard-grid h3 {
        font-size: 15px;
    }


    .facilities-standard-grid p {
        font-size: 9px;
    }


    .facilities-location-section {
        padding-bottom: 62px;
    }


    .facilities-location-shell {
        border-radius: 20px;
    }


    .facilities-map,
    .facilities-map iframe {
        min-height: 280px;
    }


    .facilities-map-badge {
        right: 12px;
        bottom: 12px;
        left: 12px;

        padding: 11px 12px;

        border-radius: 12px;
    }


    .facilities-location-content {
        padding: 29px 18px;
    }


    .facilities-location-eyebrow {
        font-size: 7px;
    }


    .facilities-location-content h2 {
        font-size: 28px;
    }


    .facilities-location-content > p {
        font-size: 11px;
        line-height: 1.65;
    }


    .facilities-location-address {
        align-items: flex-start;
    }


    .facilities-location-actions {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
    }


    .facilities-location-primary,
    .facilities-location-secondary {
        width: 100%;
    }


    .facilities-location-primary {
        justify-content: space-between;
    }

}


/* =====================================================
   RTL / BAHASA ARAB
===================================================== */

html[dir="rtl"] .facilities-hero-eyebrow,
html[dir="rtl"] .facilities-section-eyebrow,
html[dir="rtl"] .facilities-location-eyebrow {
    flex-direction: row-reverse;
}


html[dir="rtl"] .facility-premium-card::before {
    right: auto;
    left: -95px;
}


html[dir="rtl"] .facilities-location-primary b {
    margin-right: 3px;
    margin-left: 0;
}


/* =====================================================
   DARK MODE
===================================================== */

html[data-theme="dark"] .facilities-quick-inner,
html[data-theme="dark"] .facility-premium-card,
html[data-theme="dark"] .facilities-location-shell {
    border-color: #24494b;

    background: #0c292d;
}


html[data-theme="dark"] .facilities-directory {
    background:
        radial-gradient(
            circle at 100% 3%,
            rgba(98, 212, 207, 0.07),
            transparent 25%
        ),
        #071f23;
}


html[data-theme="dark"] .facilities-section-heading h2,
html[data-theme="dark"] .facility-card-content h3,
html[data-theme="dark"] .facilities-location-content h2 {
    color: #efffff;
}


html[data-theme="dark"] .facilities-section-heading > p,
html[data-theme="dark"] .facility-card-content p,
html[data-theme="dark"] .facilities-location-content > p {
    color: #aac3c1;
}


html[data-theme="dark"] .facilities-quick-inner nav a,
html[data-theme="dark"] .facilities-location-address,
html[data-theme="dark"] .facilities-location-secondary {
    color: #efffff;

    border-color: #294d4e;

    background: #102f33;
}


html[data-theme="dark"] .facilities-location-content {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(98, 212, 207, 0.07),
            transparent 34%
        ),
        #0c292d;
}


html[data-theme="dark"] .facilities-location-address strong {
    color: #efffff;
}


html[data-theme="dark"] .facilities-standard-section,
html[data-theme="dark"] .facilities-location-section {
    background: #071f23;
}

/* =========================================================
   HALAMAN BERITA — FINAL
   Tempelkan blok ini di PALING BAWAH assets/css/style.css
   setelah menghapus CSS berita versi sebelumnya.
========================================================= */

.news-page-hero,
.news-page-archive {
    --news-frame: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );
    --news-deep: #06475d;
    --news-navy: #075568;
    --news-teal: #0a6d6c;
    --news-green: #178075;
    --news-mint: #eaf5f2;
    --news-mint-2: #f5faf8;
    --news-ink: #153a3e;
    --news-muted: #6d8182;
    --news-line: #d9e8e3;
    --news-gold: #ffb000;
    --news-yellow: #ffda14;
    --news-shadow: 0 24px 65px rgba(3, 49, 52, 0.14);

    width: var(--news-frame);
    max-width: none;
    margin-inline: auto;
}

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

.news-page-hero {
    position: relative;
    isolation: isolate;
    min-height: 570px;
    margin-top: 8px;
    overflow: hidden;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.055) 17%,
            transparent 35%
        ),
        radial-gradient(
            circle at 83% 18%,
            rgba(255, 218, 20, 0.08),
            transparent 26%
        ),
        radial-gradient(
            ellipse at 51% 118%,
            rgba(71, 219, 205, 0.40) 0%,
            rgba(21, 158, 151, 0.18) 34%,
            transparent 65%
        ),
        linear-gradient(
            132deg,
            var(--news-green) 0%,
            var(--news-teal) 43%,
            var(--news-navy) 72%,
            var(--news-deep) 100%
        );
    box-shadow:
        0 28px 65px rgba(3, 49, 52, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.news-page-hero::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: -205px;
    left: -170px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.018)
    );
    box-shadow:
        0 0 0 68px rgba(255, 255, 255, 0.016),
        inset 18px 18px 50px rgba(255, 255, 255, 0.055),
        inset -20px -20px 50px rgba(2, 67, 73, 0.08);
    pointer-events: none;
}

.news-page-hero::after {
    content: "";
    position: absolute;
    z-index: -2;
    right: -250px;
    bottom: -410px;
    width: 680px;
    height: 680px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    background: radial-gradient(
        circle at 33% 28%,
        rgba(255, 255, 255, 0.085),
        rgba(255, 255, 255, 0.015) 45%,
        transparent 72%
    );
    box-shadow:
        0 0 0 72px rgba(255, 255, 255, 0.014),
        inset 20px 20px 70px rgba(255, 255, 255, 0.035);
    pointer-events: none;
}

.news-page-hero__grid {
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    width: 47%;
    opacity: 0.045;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.7) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(90deg, transparent, #000 26%);
    pointer-events: none;
}

.news-page-hero__orb {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.news-page-hero__orb--one {
    top: 74px;
    left: 47%;
    width: 15px;
    height: 15px;
    background: linear-gradient(135deg, var(--news-gold), var(--news-yellow));
    box-shadow: 0 0 0 12px rgba(255, 218, 20, 0.10);
}

.news-page-hero__orb--two {
    right: 42%;
    bottom: 54px;
    width: 9px;
    height: 9px;
    background: #8ce1dc;
    box-shadow: 0 0 0 10px rgba(140, 225, 220, 0.09);
}

.news-page-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.86fr);
    align-items: center;
    gap: clamp(42px, 5vw, 82px);
    min-height: 570px;
    padding: 44px clamp(38px, 4.2vw, 68px);
}

.news-page-hero__content {
    max-width: 650px;
}

.news-page-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.news-page-eyebrow > span {
    width: 40px;
    height: 3px;
    flex: none;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--news-gold), var(--news-yellow));
    box-shadow: 0 0 13px rgba(255, 176, 0, 0.34);
}

.news-page-hero__content h1 {
    max-width: 650px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(54px, 5.2vw, 76px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.news-page-hero__content h1 span,
.news-page-hero__content h1 strong {
    display: block;
}

.news-page-hero__content h1 strong {
    color: var(--news-yellow);
    background: linear-gradient(110deg, #ffad00 0%, #ffc400 45%, #ffdf3f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.news-page-hero__content > p {
    max-width: 610px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.75;
}

.news-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.news-page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 50px;
    padding: 6px 7px 6px 21px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.025em;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.news-page-button--primary {
    color: #15383c;
    border-color: rgba(255, 215, 72, 0.78);
    background: linear-gradient(135deg, #ffb000 0%, #ffc400 52%, #ffda14 100%);
    box-shadow:
        0 13px 30px rgba(255, 176, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.news-page-button--primary b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    color: #ffffff;
    border-radius: 50%;
    background: #07424a;
    font-size: 14px;
}

.news-page-button--secondary {
    padding-inline: 22px;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(12px);
}

.news-page-button:hover {
    transform: translateY(-2px);
}

.news-page-button--primary:hover {
    box-shadow:
        0 17px 38px rgba(255, 166, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.news-page-button--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

.news-page-hero__stats {
    display: flex;
    align-items: stretch;
    margin-top: 34px;
}

.news-page-hero__stats > div {
    min-width: 122px;
    padding: 0 27px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}

.news-page-hero__stats > div:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.news-page-hero__stats strong,
.news-page-hero__stats span {
    display: block;
}

.news-page-hero__stats strong {
    color: #ffffff;
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
}

.news-page-hero__stats span {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.news-page-hero__visual {
    width: min(100%, 545px);
    justify-self: end;
}

.news-page-featured {
    position: relative;
    display: block;
    height: 438px;
    overflow: hidden;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 28px;
    background: #0a5c65;
    box-shadow:
        0 24px 55px rgba(0, 38, 44, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: rotate(0.45deg);
    transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.news-page-featured::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 21px;
    pointer-events: none;
}

.news-page-featured:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow:
        0 31px 68px rgba(0, 38, 44, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.news-page-featured__image,
.news-page-featured__shade {
    position: absolute;
    inset: 0;
}

.news-page-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}

.news-page-featured:hover .news-page-featured__image img {
    transform: scale(1.045);
}

.news-page-featured__shade {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(3, 28, 31, 0.03) 12%, rgba(3, 28, 31, 0.28) 50%, rgba(2, 24, 28, 0.93) 100%),
        linear-gradient(90deg, rgba(4, 44, 48, 0.06), rgba(4, 44, 48, 0.18));
}

.news-page-featured__label {
    position: absolute;
    z-index: 4;
    top: 24px;
    inset-inline-start: 24px;
    padding: 9px 14px;
    color: #15383c;
    border: 1px solid rgba(255, 236, 144, 0.72);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffc400, #ffe45b);
    box-shadow: 0 9px 24px rgba(92, 58, 0, 0.18);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.news-page-featured__content {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    padding: 32px;
}

.news-page-featured__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.news-page-featured__meta span {
    color: #ffdc45;
}

.news-page-featured__content h2 {
    display: -webkit-box;
    max-width: 480px;
    margin: 13px 0 18px;
    overflow: hidden;
    color: #ffffff;
    font-size: clamp(26px, 2.25vw, 34px);
    font-weight: 900;
    line-height: 1.11;
    letter-spacing: -0.035em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.news-page-featured__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.news-page-featured__link b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    color: #0b5159;
    border-radius: 50%;
    background: #ffffff;
    font-size: 14px;
}

.news-page-featured__note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 17px;
    padding-inline: 8px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    line-height: 1.5;
}

.news-page-featured__note > span {
    width: 34px;
    height: 1px;
    flex: none;
    background: linear-gradient(90deg, var(--news-gold), transparent);
}

.news-page-featured--empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 18px;
    padding: 40px;
    transform: none;
}

.news-page-featured--empty img {
    width: 145px;
}

.news-page-featured--empty p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   ARSIP / DAFTAR BERITA
========================================================= */

.news-page-archive {
    margin-top: 30px;
    margin-bottom: 80px;
    overflow: hidden;
    border: 1px solid var(--news-line);
    border-radius: 30px;
    background:
        radial-gradient(circle at 100% 0%, rgba(23, 128, 117, 0.08), transparent 27%),
        linear-gradient(180deg, #f8fcfa 0%, #eef7f4 100%);
    box-shadow: 0 22px 60px rgba(3, 49, 52, 0.09);
}

.news-page-archive__inner {
    width: 100%;
    padding: 68px clamp(34px, 3.7vw, 58px) 84px;
}

.news-page-archive__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
    align-items: end;
    gap: 44px;
}

.news-page-section-label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 13px;
    color: var(--news-teal);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.news-page-section-label span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--news-green), var(--news-deep));
    box-shadow: 0 8px 20px rgba(6, 79, 91, 0.18);
    font-size: 9px;
    letter-spacing: 0;
}

.news-page-archive__heading h2 {
    max-width: 760px;
    margin: 0;
    color: var(--news-ink);
    font-size: clamp(34px, 3.15vw, 50px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.news-page-archive__heading > p {
    margin: 0 0 3px;
    color: var(--news-muted);
    font-size: 14px;
    line-height: 1.75;
}

.news-page-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 34px;
    padding: 8px;
    border: 1px solid var(--news-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 30px rgba(3, 49, 52, 0.055);
}

.news-page-filter__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 43px;
    padding: 8px 15px;
    color: #506b6c;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.news-page-filter__item strong {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding-inline: 6px;
    color: #678081;
    border-radius: 999px;
    background: #eaf3f0;
    font-size: 9px;
    font-weight: 900;
}

.news-page-filter__item:hover {
    color: var(--news-teal);
    border-color: #d9e8e3;
    background: #f4faf8;
    transform: translateY(-1px);
}

.news-page-filter__item.is-active {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.20);
    background: linear-gradient(135deg, var(--news-green), var(--news-deep));
    box-shadow: 0 10px 23px rgba(6, 79, 91, 0.20);
}

.news-page-filter__item.is-active strong {
    color: #14393c;
    background: linear-gradient(135deg, #ffc400, #ffdf43);
}

.news-page-result-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 32px 0 24px;
    color: #6c8182;
    font-size: 11px;
}

.news-page-result-bar strong {
    color: var(--news-ink);
    font-weight: 900;
}

.news-page-result-bar i {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, var(--news-line), rgba(217, 232, 227, 0.20));
}

.news-page-result-bar small {
    color: #819394;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.news-page-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
}

.news-page-card,
.news-page-card:first-child {
    position: relative;
    display: flex;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    color: var(--news-ink);
    border: 1px solid #dce9e5;
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(3, 49, 52, 0.075);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
    flex-direction: column;
    grid-column: auto;
}

.news-page-card::after {
    content: "";
    position: absolute;
    inset: auto 22px 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--news-gold), var(--news-yellow));
    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: left;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.news-page-card:hover {
    border-color: #c8dfd8;
    transform: translateY(-7px);
    box-shadow: 0 23px 52px rgba(3, 49, 52, 0.13);
}

.news-page-card:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.news-page-card__image,
.news-page-card:first-child .news-page-card__image {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 0;
    background: #dcebe7;
}

.news-page-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 60%, rgba(3, 36, 40, 0.22) 100%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.10), transparent 38%);
    pointer-events: none;
}

.news-page-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(.2, .7, .2, 1);
}

.news-page-card:hover .news-page-card__image img {
    transform: scale(1.055);
}

.news-page-card__number {
    position: absolute;
    z-index: 2;
    top: 15px;
    inset-inline-start: 15px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 50%;
    background: rgba(6, 71, 93, 0.82);
    box-shadow: 0 8px 22px rgba(0, 34, 41, 0.20);
    backdrop-filter: blur(10px);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.03em;
}

.news-page-card__body,
.news-page-card:first-child .news-page-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 22px 23px;
}

.news-page-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
    color: #819394;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.news-page-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--news-teal);
}

.news-page-card__meta span::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--news-gold), var(--news-yellow));
    box-shadow: 0 0 0 4px rgba(255, 190, 0, 0.10);
}

.news-page-card h3,
.news-page-card:first-child h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--news-ink);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.025em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news-page-card h3 a {
    transition: color 0.2s ease;
}

.news-page-card h3 a:hover {
    color: var(--news-teal);
}

.news-page-card__body > p,
.news-page-card:first-child .news-page-card__body > p {
    display: -webkit-box;
    margin: 13px 0 18px;
    overflow: hidden;
    color: #718485;
    font-size: 12px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.news-page-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 15px;
    color: var(--news-teal);
    border-top: 1px solid #e4eeeb;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.news-page-card__link b {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    color: #ffffff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--news-green), var(--news-deep));
    font-size: 11px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.news-page-card__link:hover b {
    transform: translate(2px, -2px);
    background: linear-gradient(135deg, #f6a900, #ffd51a);
    color: #15383c;
}

.news-page-empty,
.news-page-single-note {
    margin-top: 26px;
    padding: 46px;
    color: var(--news-muted);
    text-align: center;
    border: 1px solid var(--news-line);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.84);
}

.news-page-empty__icon {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}

.news-page-empty__icon span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--news-teal);
}

.news-page-empty__icon span:nth-child(2) {
    background: var(--news-gold);
}

.news-page-empty h3 {
    margin: 0 0 8px;
    color: var(--news-ink);
    font-size: 26px;
}

.news-page-empty p {
    max-width: 560px;
    margin: 0 auto;
}

.news-page-empty > a {
    display: inline-flex;
    margin-top: 20px;
    padding: 11px 18px;
    color: #ffffff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--news-green), var(--news-deep));
    font-size: 11px;
    font-weight: 800;
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .news-page-archive {
    --news-ink: #efffff;
    --news-muted: #aac3c1;
    --news-line: #294d4e;
    background:
        radial-gradient(circle at 100% 0%, rgba(98, 212, 207, 0.07), transparent 30%),
        #071f23;
    border-color: #24484a;
}

html[data-theme="dark"] .news-page-filter,
html[data-theme="dark"] .news-page-card,
html[data-theme="dark"] .news-page-empty,
html[data-theme="dark"] .news-page-single-note {
    background: #0c292d;
    border-color: #294d4e;
}

html[data-theme="dark"] .news-page-filter__item {
    color: #b6cbca;
}

html[data-theme="dark"] .news-page-filter__item:hover {
    background: #123438;
    border-color: #35595b;
}

html[data-theme="dark"] .news-page-filter__item strong {
    color: #c9dcda;
    background: #173a3e;
}

html[data-theme="dark"] .news-page-card__body > p,
html[data-theme="dark"] .news-page-card:first-child .news-page-card__body > p,
html[data-theme="dark"] .news-page-card__meta,
html[data-theme="dark"] .news-page-result-bar,
html[data-theme="dark"] .news-page-result-bar small {
    color: #aac3c1;
}

html[data-theme="dark"] .news-page-card__link {
    border-color: #294d4e;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1320px) {
    .news-page-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .news-page-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 0.80fr);
        gap: 38px;
    }

    .news-page-hero__visual {
        width: min(100%, 485px);
    }

    .news-page-featured {
        height: 410px;
    }
}

@media (max-width: 1080px) {
    .news-page-hero,
    .news-page-archive {
        --news-frame: min(calc(100% - 30px), 1600px);
    }

    .news-page-hero {
        min-height: auto;
    }

    .news-page-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.72fr);
        min-height: 535px;
        padding: 38px 34px;
    }

    .news-page-hero__content h1 {
        font-size: clamp(48px, 5.6vw, 62px);
    }

    .news-page-hero__content > p {
        font-size: 13px;
    }

    .news-page-hero__stats > div {
        min-width: 98px;
        padding-inline: 18px;
    }

    .news-page-hero__visual {
        width: 100%;
    }

    .news-page-featured {
        height: 385px;
    }

    .news-page-featured__content {
        padding: 25px;
    }

    .news-page-featured__content h2 {
        font-size: 25px;
    }

    .news-page-archive__inner {
        padding-inline: 34px;
    }
}

@media (max-width: 900px) {
    .news-page-hero {
        min-height: auto;
    }

    .news-page-hero__inner {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 52px 38px 42px;
    }

    .news-page-hero__content {
        max-width: 720px;
    }

    .news-page-hero__visual {
        width: 100%;
        max-width: 720px;
        justify-self: stretch;
    }

    .news-page-featured {
        height: 420px;
        transform: none;
    }

    .news-page-featured:hover {
        transform: translateY(-4px);
    }

    .news-page-archive__heading {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .news-page-archive__heading > p {
        max-width: 650px;
    }

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

@media (max-width: 640px) {
    .news-page-hero,
    .news-page-archive {
        --news-frame: calc(100% - 16px);
    }

    .news-page-hero {
        margin-top: 12px;
        border-radius: 22px;
    }

    .news-page-hero__inner {
        gap: 34px;
        padding: 38px 20px 28px;
    }

    .news-page-eyebrow {
        gap: 10px;
        margin-bottom: 14px;
        font-size: 8px;
        letter-spacing: 0.14em;
    }

    .news-page-eyebrow > span {
        width: 28px;
        height: 2px;
    }

    .news-page-hero__content h1 {
        font-size: clamp(42px, 13vw, 54px);
    }

    .news-page-hero__content > p {
        margin-top: 18px;
        font-size: 12px;
        line-height: 1.68;
    }

    .news-page-hero__actions {
        margin-top: 22px;
    }

    .news-page-button {
        min-height: 46px;
        font-size: 10px;
    }

    .news-page-button--primary b {
        width: 34px;
        height: 34px;
    }

    .news-page-hero__stats {
        margin-top: 28px;
    }

    .news-page-hero__stats > div {
        min-width: 0;
        flex: 1;
        padding-inline: 12px;
    }

    .news-page-hero__stats strong {
        font-size: 22px;
    }

    .news-page-hero__stats span {
        font-size: 7px;
    }

    .news-page-featured {
        height: 360px;
        border-radius: 22px;
    }

    .news-page-featured::before {
        inset: 8px;
        border-radius: 16px;
    }

    .news-page-featured__label {
        top: 18px;
        inset-inline-start: 18px;
    }

    .news-page-featured__content {
        padding: 22px;
    }

    .news-page-featured__content h2 {
        font-size: 23px;
        -webkit-line-clamp: 3;
    }

    .news-page-featured__note {
        display: none;
    }

    .news-page-archive {
        margin-top: 18px;
        margin-bottom: 48px;
        border-radius: 22px;
    }

    .news-page-archive__inner {
        padding: 46px 16px 58px;
    }

    .news-page-archive__heading h2 {
        font-size: 35px;
    }

    .news-page-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 7px;
        scrollbar-width: none;
    }

    .news-page-filter::-webkit-scrollbar {
        display: none;
    }

    .news-page-result-bar {
        gap: 10px;
        margin-block: 25px 19px;
    }

    .news-page-result-bar small {
        display: none;
    }

    .news-page-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .news-page-card__image,
    .news-page-card:first-child .news-page-card__image {
        aspect-ratio: 16 / 10;
    }

    .news-page-card__body,
    .news-page-card:first-child .news-page-card__body {
        padding: 21px;
    }

    .news-page-card h3,
    .news-page-card:first-child h3 {
        font-size: 21px;
    }
}

html[dir="rtl"] .news-page-card::after {
    transform-origin: right;
}

@media (prefers-reduced-motion: reduce) {
    .news-page-button,
    .news-page-featured,
    .news-page-featured__image img,
    .news-page-filter__item,
    .news-page-card,
    .news-page-card::after,
    .news-page-card__image img,
    .news-page-card__link b {
        transition: none;
    }
}

/* =========================================================
   DETAIL BERITA — FINAL
   CSS khusus berita-detail.php
   Tempelkan blok ini di PALING BAWAH assets/css/style.css
========================================================= */

.article-page {
    --article-frame: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );
    --article-inner: 1180px;
    --article-deep: #06475d;
    --article-navy: #075568;
    --article-teal: #0a6d6c;
    --article-green: #178075;
    --article-ink: #153a3e;
    --article-muted: #6d8182;
    --article-line: #d9e8e3;
    --article-soft: #f3f9f7;
    --article-gold: #ffb000;
    --article-yellow: #ffda14;
    --article-shadow: 0 24px 65px rgba(3, 49, 52, 0.14);

    position: relative;
    isolation: isolate;
    padding: 8px 0 82px;
    background:
        radial-gradient(circle at 5% 36%, rgba(23, 128, 117, 0.06), transparent 22%),
        radial-gradient(circle at 96% 70%, rgba(255, 176, 0, 0.055), transparent 19%),
        linear-gradient(180deg, var(--bg) 0%, #f6faf8 48%, var(--bg) 100%);
}

/* =========================================================
   HERO / JUDUL ARTIKEL
========================================================= */

.article-page .article-header {
    position: relative;
    isolation: isolate;
    width: var(--article-frame);
    max-width: none;
    min-height: 470px;
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 28px;
    background:
        radial-gradient(circle at 8% 2%, rgba(255, 255, 255, 0.17), transparent 31%),
        radial-gradient(circle at 87% 12%, rgba(255, 218, 20, 0.10), transparent 25%),
        radial-gradient(ellipse at 55% 125%, rgba(71, 219, 205, 0.35), transparent 62%),
        linear-gradient(132deg,
            var(--article-green) 0%,
            var(--article-teal) 43%,
            var(--article-navy) 72%,
            var(--article-deep) 100%);
    box-shadow:
        0 26px 68px rgba(3, 49, 52, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.article-page .article-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.34;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: linear-gradient(90deg, transparent 4%, #000 48%, #000 100%);
}

.article-page .article-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    top: -210px;
    left: -105px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 95px rgba(255, 255, 255, 0.028),
        0 0 0 190px rgba(255, 255, 255, 0.018);
}

.article-page .article-header-inner {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 72px), var(--article-inner));
    max-width: var(--article-inner);
    min-height: 470px;
    margin-inline: auto;
    padding: 54px 0 126px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.article-page .back-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0 0 28px;
    padding: 9px 15px;
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.article-page .back-link:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(-3px);
}

.article-page .article-header .news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.article-page .article-header .news-meta span,
.article-page .article-header .news-meta time {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 999px;
}

.article-page .article-header .news-meta span {
    color: #15383c;
    border: 1px solid rgba(255, 235, 125, 0.74);
    background: linear-gradient(135deg, var(--article-gold), var(--article-yellow));
    box-shadow: 0 8px 22px rgba(82, 52, 0, 0.16);
}

.article-page .article-header .news-meta time {
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.075);
}

.article-page .article-header h1 {
    max-width: 1050px;
    margin: 22px 0 18px;
    color: #ffffff;
    font-size: clamp(42px, 4.4vw, 66px);
    font-weight: 900;
    line-height: 1.055;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.article-page .article-header p {
    max-width: 800px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.75;
}

/* =========================================================
   COVER BERITA
========================================================= */

.article-page .article-body-wrap {
    position: relative;
    z-index: 4;
    width: var(--article-frame);
    max-width: none;
    margin: -82px auto 0;
    padding-inline: clamp(20px, 3vw, 48px);
}

.article-page .article-cover {
    position: relative;
    width: min(100%, 1220px);
    height: clamp(470px, 41vw, 640px);
    margin-inline: auto;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.12), transparent 28%),
        radial-gradient(circle at 84% 80%, rgba(255, 218, 20, 0.10), transparent 26%),
        linear-gradient(135deg, #0a6d6c 0%, #075568 58%, #06475d 100%);
    box-shadow:
        0 28px 65px rgba(3, 49, 52, 0.22),
        0 8px 22px rgba(3, 49, 52, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.article-page .article-cover::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 19px;
    pointer-events: none;
}

.article-page .article-cover::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.06), transparent 34%),
        repeating-linear-gradient(90deg, transparent 0 89px, rgba(255, 255, 255, 0.025) 90px);
}

.article-page .article-cover img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 18px;
    filter: drop-shadow(0 18px 26px rgba(0, 25, 31, 0.24));
}

/* =========================================================
   ISI ARTIKEL DAN BAGIKAN
========================================================= */

.article-page .article-body {
    width: min(100%, var(--article-inner));
    margin-inline: auto;
    padding: 54px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: start;
    gap: 42px;
}

.article-page .article-content {
    position: relative;
    min-width: 0;
    padding: clamp(36px, 4vw, 54px);
    overflow: hidden;
    color: #344e50;
    border: 1px solid var(--article-line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(23, 128, 117, 0.055), transparent 26%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(3, 49, 52, 0.085);
    font-size: 17px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.article-page .article-content::before {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-bottom: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--article-gold), var(--article-yellow));
    box-shadow: 0 5px 14px rgba(255, 176, 0, 0.20);
}

.article-page .article-content::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -92px;
    bottom: -105px;
    border: 1px solid rgba(10, 109, 108, 0.08);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(10, 109, 108, 0.025);
    pointer-events: none;
}

.article-page .article-content br {
    content: "";
}

.article-page .article-content a {
    color: var(--article-teal);
    font-weight: 750;
    text-decoration: underline;
    text-decoration-color: rgba(10, 109, 108, 0.30);
    text-underline-offset: 3px;
}

.article-page .article-body aside {
    display: block;
    min-width: 0;
}

.article-page .share-card {
    position: sticky;
    top: 150px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    overflow: hidden;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 218, 20, 0.13), transparent 34%),
        linear-gradient(145deg, var(--article-teal), var(--article-deep));
    box-shadow: 0 18px 42px rgba(3, 49, 52, 0.18);
}

.article-page .share-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -63px;
    bottom: -63px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.025);
    pointer-events: none;
}

.article-page .share-card strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 7px;
    padding-bottom: 15px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.article-page .share-card button,
.article-page .share-card a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 45px;
    width: 100%;
    padding: 10px 12px 10px 14px;
    color: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.09);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.article-page .share-card button::after,
.article-page .share-card a::after {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: none;
    color: var(--article-deep);
    border-radius: 50%;
    background: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.article-page .share-card button::after {
    content: "⧉";
}

.article-page .share-card a::after {
    content: "↗";
}

.article-page .share-card button:hover,
.article-page .share-card a:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .article-page {
    --article-ink: #efffff;
    --article-muted: #aac3c1;
    --article-line: #294d4e;
    background:
        radial-gradient(circle at 5% 36%, rgba(98, 212, 207, 0.05), transparent 22%),
        radial-gradient(circle at 96% 70%, rgba(255, 176, 0, 0.035), transparent 19%),
        #071f23;
}

html[data-theme="dark"] .article-page .article-content {
    color: #c9dcda;
    border-color: #294d4e;
    background:
        radial-gradient(circle at 100% 0%, rgba(98, 212, 207, 0.055), transparent 28%),
        #0c292d;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .article-page .article-cover {
    border-color: rgba(255, 255, 255, 0.10);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {
    .article-page {
        --article-frame: min(calc(100% - 30px), 1600px);
    }

    .article-page .article-header-inner {
        width: min(calc(100% - 56px), var(--article-inner));
    }

    .article-page .article-body {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 28px;
    }
}

@media (max-width: 900px) {
    .article-page .article-header,
    .article-page .article-header-inner {
        min-height: 430px;
    }

    .article-page .article-header-inner {
        padding-bottom: 112px;
    }

    .article-page .article-header h1 {
        font-size: clamp(40px, 7vw, 56px);
    }

    .article-page .article-cover {
        height: clamp(450px, 63vw, 590px);
    }

    .article-page .article-body {
        grid-template-columns: 1fr;
    }

    .article-page .article-body aside {
        display: block !important;
    }

    .article-page .share-card {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-page .share-card strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .article-page {
        --article-frame: calc(100% - 16px);
        padding-top: 5px;
        padding-bottom: 48px;
    }

    .article-page .article-header {
        min-height: 390px;
        border-radius: 22px;
    }

    .article-page .article-header-inner {
        width: calc(100% - 36px);
        min-height: 390px;
        padding: 34px 0 92px;
    }

    .article-page .back-link {
        min-height: 36px;
        margin-bottom: 21px;
        padding: 7px 12px;
        font-size: 8px;
    }

    .article-page .article-header .news-meta {
        gap: 7px;
        font-size: 7px;
    }

    .article-page .article-header .news-meta span,
    .article-page .article-header .news-meta time {
        min-height: 28px;
        padding: 6px 10px;
    }

    .article-page .article-header h1 {
        margin: 17px 0 14px;
        font-size: clamp(34px, 10.8vw, 46px);
        line-height: 1.08;
    }

    .article-page .article-header p {
        font-size: 12px;
        line-height: 1.65;
    }

    .article-page .article-body-wrap {
        margin-top: -58px;
        padding-inline: 12px;
    }

    .article-page .article-cover {
        height: min(118vw, 530px);
        padding: 10px;
        border-radius: 21px;
    }

    .article-page .article-cover::before {
        inset: 10px;
        border-radius: 14px;
    }

    .article-page .article-cover img {
        border-radius: 13px;
    }

    .article-page .article-body {
        padding-top: 28px;
        gap: 18px;
    }

    .article-page .article-content {
        padding: 28px 22px 32px;
        border-radius: 20px;
        font-size: 15px;
        line-height: 1.85;
    }

    .article-page .article-content::before {
        width: 58px;
        height: 3px;
        margin-bottom: 21px;
    }

    .article-page .share-card {
        grid-template-columns: 1fr;
        padding: 18px;
        border-radius: 19px;
    }

    .article-page .share-card strong {
        grid-column: auto;
    }
}

html[dir="rtl"] .article-page .back-link:hover {
    transform: translateX(3px);
}

html[dir="rtl"] .article-page .share-card button,
html[dir="rtl"] .article-page .share-card a {
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .article-page .back-link,
    .article-page .share-card button,
    .article-page .share-card a {
        transition: none;
    }
}

/* =========================================================
   DETAIL BERITA — FINAL EDITORIAL
   YPP DARUL MA'ARIF
========================================================= */

.editorial-news-detail {
    --editorial-ink: var(--text);
    --editorial-muted: var(--muted);
    --editorial-line: var(--line);
    --editorial-primary: var(--primary);
    --editorial-primary-2: var(--primary-2);
    --editorial-dark: var(--dark);
    --editorial-yellow: var(--yellow);
    --editorial-paper: var(--bg);
    --editorial-soft: var(--surface);

    --editorial-serif:
        Georgia,
        "Times New Roman",
        Times,
        serif;

    padding: 0 0 96px;

    background:
        var(--editorial-paper);
}

.editorial-news-shell {
    position: relative;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.editorial-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    min-height: 44px;

    margin-top: 8px;
    padding: 0 2px;

    border-bottom:
        1px solid
        var(--editorial-line);

    color:
        var(--editorial-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.editorial-breadcrumb a {
    transition:
        color 0.2s ease;
}

.editorial-breadcrumb a:hover {
    color:
        var(--editorial-primary);
}

.editorial-breadcrumb
> span[aria-hidden="true"] {
    color:
        color-mix(
            in srgb,
            var(--editorial-muted) 45%,
            transparent
        );
}


/* =========================================================
   HEADER ARTIKEL
========================================================= */

.editorial-article-header {
    position: relative;

    padding:
        clamp(38px, 5vw, 68px)
        0
        clamp(34px, 4vw, 54px);

    border-bottom:
        1px solid
        var(--editorial-line);
}

.editorial-article-header::before {
    content: "";

    position: absolute;

    inset-inline-start: 0;
    top: 0;

    width: 74px;
    height: 4px;

    border-radius:
        0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            var(--editorial-primary),
            var(--editorial-primary-2)
        );
}

.editorial-article-header::after {
    content: "";

    position: absolute;

    inset-inline-start: 82px;
    top: 0;

    width: 18px;
    height: 4px;

    border-radius:
        0 0 999px 999px;

    background:
        var(--editorial-yellow);
}

.editorial-article-heading {
    max-width: 1010px;
}


/* KATEGORI DAN TANGGAL */

.editorial-article-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 18px;

    color:
        var(--editorial-muted);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.editorial-article-kicker span {
    color:
        var(--editorial-primary);
}

.editorial-article-kicker time {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.editorial-article-kicker time::before {
    content: "";

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--editorial-yellow);
}


/* JUDUL */

.editorial-article-header h1 {
    max-width: 1000px;

    margin: 0;

    color:
        var(--editorial-ink);

    font-size:
        clamp(38px, 5.15vw, 64px);

    line-height: 1.08;
    letter-spacing: -0.045em;
    text-wrap: balance;
}


/* RINGKASAN */

.editorial-article-deck {
    max-width: 820px;

    margin: 22px 0 0;

    color:
        color-mix(
            in srgb,
            var(--editorial-ink) 72%,
            var(--editorial-muted)
        );

    font-family:
        var(--editorial-serif);

    font-size:
        clamp(18px, 1.75vw, 22px);

    line-height: 1.65;
}


/* PENULIS */

.editorial-byline {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;
}

.editorial-byline img {
    width: 42px;
    height: 42px;

    padding: 7px;

    border:
        1px solid
        var(--editorial-line);

    border-radius: 50%;

    background: #ffffff;

    object-fit: contain;
}

.editorial-byline > div {
    display: grid;
    gap: 2px;
}

.editorial-byline strong {
    color:
        var(--editorial-ink);

    font-size: 12px;
    font-weight: 800;
}

.editorial-byline span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    color:
        var(--editorial-muted);

    font-size: 11px;
    font-weight: 650;
}

.editorial-byline i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--editorial-muted) 55%,
            transparent
        );
}


/* =========================================================
   GAMBAR UTAMA
========================================================= */

.editorial-article-cover {
    margin: 20px 0 0;
}

.editorial-cover-stage {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    width: 100%;

    min-height: 360px;
    max-height: 650px;

    border:
        1px solid
        var(--editorial-line);

    border-radius: 18px;

    background:
        var(--editorial-soft);
}

.editorial-cover-stage img {
    display: block;

    width: 100%;
    height: 100%;

    max-height: 650px;

    object-fit: cover;
}


/* GAMBAR POSTER VERTIKAL */

.editorial-article-cover.is-portrait
.editorial-cover-stage {
    height:
        min(72vw, 650px);

    padding: 24px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--editorial-primary) 8%,
                var(--editorial-soft)
            ),
            var(--editorial-soft)
        );
}

.editorial-article-cover.is-portrait
.editorial-cover-stage img {
    width: auto;
    max-width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:
        0 18px 48px
        rgba(3, 50, 54, 0.14);
}


/* GAMBAR PERSEGI */

.editorial-article-cover.is-square
.editorial-cover-stage {
    height:
        min(64vw, 620px);

    padding: 18px;
}

.editorial-article-cover.is-square
.editorial-cover-stage img {
    width: auto;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   LAYOUT UTAMA
========================================================= */

.editorial-article-layout {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 700px)
        minmax(250px, 300px);

    justify-content: center;
    align-items: start;

    gap: 38px;

    margin-top: 48px;
}


/* =========================================================
   TOMBOL BAGIKAN
========================================================= */

.editorial-share-rail {
    position: sticky;
    top: 118px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

.editorial-share-rail > span {
    margin-bottom: 3px;

    color:
        var(--editorial-muted);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    writing-mode: vertical-rl;

    transform:
        rotate(180deg);
}

.editorial-share-rail a,
.editorial-share-rail button {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border:
        1px solid
        var(--editorial-line);

    border-radius: 50%;

    background:
        var(--editorial-paper);

    color:
        var(--editorial-dark);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.editorial-share-rail svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.editorial-share-rail a:hover,
.editorial-share-rail button:hover,
.editorial-share-rail button.is-copied {
    transform:
        translateY(-2px);

    border-color:
        var(--editorial-primary);

    background:
        var(--editorial-primary);

    color: #ffffff;
}


/* =========================================================
   ISI ARTIKEL
========================================================= */

.editorial-article-main {
    min-width: 0;
}

.editorial-article-content {
    color:
        color-mix(
            in srgb,
            var(--editorial-ink) 92%,
            var(--editorial-muted)
        );

    font-family:
        var(--editorial-serif);

    font-size: 18px;
    line-height: 1.95;
}

.editorial-article-content p {
    margin:
        0 0 1.55em;
}

.editorial-article-content
p:first-child {
    font-size: 1.075em;
    line-height: 1.9;
}

.editorial-article-content strong,
.editorial-article-content b {
    color:
        var(--editorial-ink);
}

.editorial-article-content a {
    color:
        var(--editorial-primary);

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* PENANDA AKHIR ARTIKEL */

.editorial-article-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 42px 0 30px;
}

.editorial-article-end span {
    width: 34px;
    height: 1px;

    background:
        var(--editorial-line);
}

.editorial-article-end b {
    width: 7px;
    height: 7px;

    border-radius: 2px;

    background:
        var(--editorial-yellow);

    transform:
        rotate(45deg);
}


/* =========================================================
   INFORMASI PENERBIT
========================================================= */

.editorial-publisher-card {
    display: grid;

    grid-template-columns:
        58px minmax(0, 1fr);

    gap: 16px;

    padding: 22px 0;

    border-top:
        1px solid
        var(--editorial-line);

    border-bottom:
        1px solid
        var(--editorial-line);
}

.editorial-publisher-card > img {
    width: 58px;
    height: 58px;

    padding: 9px;

    border:
        1px solid
        var(--editorial-line);

    border-radius: 14px;

    background: #ffffff;

    object-fit: contain;
}

.editorial-publisher-card > div {
    min-width: 0;
}

.editorial-publisher-card small {
    display: block;

    margin-bottom: 2px;

    color:
        var(--editorial-primary);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.editorial-publisher-card strong {
    color:
        var(--editorial-ink);

    font-size: 14px;
}

.editorial-publisher-card p {
    max-width: 570px;

    margin: 6px 0 0;

    color:
        var(--editorial-muted);

    font-size: 12px;
    line-height: 1.65;
}


/* KEMBALI KE BERITA */

.editorial-back-news {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 24px;

    color:
        var(--editorial-dark);

    font-size: 12px;
    font-weight: 800;

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

.editorial-back-news:hover {
    gap: 14px;

    color:
        var(--editorial-primary);
}


/* =========================================================
   SIDEBAR BERITA TERKAIT
========================================================= */

.editorial-related-sidebar {
    position: sticky;
    top: 118px;

    min-width: 0;
}

.editorial-related-head {
    display: flex;
    align-items: center;
    gap: 10px;

    padding-bottom: 13px;

    border-bottom:
        2px solid
        var(--editorial-dark);
}

.editorial-related-head > span {
    width: 7px;
    height: 20px;

    border-radius: 99px;

    background:
        var(--editorial-yellow);
}

.editorial-related-head h2 {
    margin: 0;

    color:
        var(--editorial-ink);

    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.editorial-related-list {
    display: grid;
}

.editorial-related-item {
    display: block;

    padding: 17px 0;

    border-bottom:
        1px solid
        var(--editorial-line);
}

.editorial-related-item > img {
    width: 100%;

    aspect-ratio:
        16 / 9;

    margin-bottom: 12px;

    border-radius: 10px;

    background:
        var(--editorial-soft);

    object-fit: cover;
}

.editorial-related-item small {
    display: block;

    margin-bottom: 5px;

    color:
        var(--editorial-primary);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.editorial-related-item h3 {
    display: -webkit-box;

    overflow: hidden;

    margin: 0 0 7px;

    color:
        var(--editorial-ink);

    font-family:
        var(--editorial-serif);

    font-size: 15px;
    line-height: 1.42;
    letter-spacing: -0.012em;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    transition:
        color 0.2s ease;
}

.editorial-related-item:hover h3 {
    color:
        var(--editorial-primary);
}

.editorial-related-item time {
    color:
        var(--editorial-muted);

    font-size: 9px;
    font-weight: 650;
}

.editorial-all-news {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding-top: 15px;

    color:
        var(--editorial-dark);

    font-size: 11px;
    font-weight: 850;
}

.editorial-all-news span {
    transition:
        transform 0.2s ease;
}

.editorial-all-news:hover {
    color:
        var(--editorial-primary);
}

.editorial-all-news:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"]
.editorial-byline img,

html[data-theme="dark"]
.editorial-publisher-card > img {
    background: #ffffff;
}

html[data-theme="dark"]
.editorial-share-rail a,

html[data-theme="dark"]
.editorial-share-rail button {
    background:
        var(--surface);

    color:
        var(--text);
}

html[data-theme="dark"]
.editorial-share-rail a:hover,

html[data-theme="dark"]
.editorial-share-rail button:hover,

html[data-theme="dark"]
.editorial-share-rail button.is-copied {
    background:
        var(--primary);

    color: #ffffff;
}


/* =========================================================
   BAHASA ARAB / RTL
========================================================= */

html[dir="rtl"]
.editorial-article-header h1,

html[dir="rtl"]
.editorial-article-deck,

html[dir="rtl"]
.editorial-article-content,

html[dir="rtl"]
.editorial-related-item h3 {
    letter-spacing: 0;
}

html[dir="rtl"]
.editorial-back-news span,

html[dir="rtl"]
.editorial-all-news span {
    transform:
        scaleX(-1);
}

html[dir="rtl"]
.editorial-all-news:hover span {
    transform:
        scaleX(-1)
        translateX(4px);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1080px) {

    .editorial-article-layout {
        grid-template-columns:
            48px
            minmax(0, 680px)
            250px;

        gap: 28px;
    }

    .editorial-article-content {
        font-size: 17px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 920px) {

    .editorial-article-layout {
        grid-template-columns:
            48px
            minmax(0, 1fr);
    }

    .editorial-related-sidebar {
        position: static;

        grid-column: 2;

        display: grid;

        grid-template-columns: 1fr;

        margin-top: 8px;
    }

    .editorial-related-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        column-gap: 24px;
    }

    .editorial-related-item:first-child {
        grid-row: span 2;
    }

}


/* =========================================================
   HP
========================================================= */

@media (max-width: 700px) {

    .editorial-news-detail {
        padding-bottom: 70px;
    }

    .editorial-breadcrumb {
        min-height: 38px;

        margin-top: 6px;

        font-size: 10px;
    }

    .editorial-article-header {
        padding:
            34px 0 32px;
    }

    .editorial-article-header::before {
        width: 58px;
    }

    .editorial-article-header::after {
        inset-inline-start: 65px;

        width: 15px;
    }

    .editorial-article-kicker {
        margin-bottom: 14px;

        font-size: 10px;
    }

    .editorial-article-header h1 {
        font-size:
            clamp(
                34px,
                10vw,
                48px
            );

        line-height: 1.1;
        letter-spacing: -0.038em;
    }

    .editorial-article-deck {
        margin-top: 17px;

        font-size: 17px;
        line-height: 1.6;
    }

    .editorial-byline {
        margin-top: 23px;
    }

    .editorial-cover-stage,

    .editorial-article-cover.is-portrait
    .editorial-cover-stage,

    .editorial-article-cover.is-square
    .editorial-cover-stage {
        min-height: 250px;

        height:
            min(82vw, 460px);

        max-height: 460px;

        border-radius: 14px;
    }

    .editorial-article-cover.is-portrait
    .editorial-cover-stage {
        padding: 14px;
    }

    .editorial-article-layout {
        display: flex;
        flex-direction: column;

        gap: 28px;

        margin-top: 32px;
    }

    .editorial-share-rail {
        position: static;

        order: 1;

        flex-direction: row;
        align-items: center;

        width: 100%;

        padding-bottom: 18px;

        border-bottom:
            1px solid
            var(--editorial-line);
    }

    .editorial-share-rail > span {
        width: auto;

        margin:
            0 5px 0 0;

        writing-mode: initial;

        transform: none;
    }

    .editorial-share-rail a,
    .editorial-share-rail button {
        width: 38px;
        height: 38px;
    }

    .editorial-article-main {
        order: 2;

        width: 100%;
    }

    .editorial-related-sidebar {
        order: 3;

        width: 100%;

        margin-top: 10px;
    }

    .editorial-related-list {
        grid-template-columns: 1fr;
    }

    .editorial-related-item:first-child {
        grid-row: auto;
    }

    .editorial-article-content {
        font-size: 17px;
        line-height: 1.9;
    }

}


/* =========================================================
   HP KECIL
========================================================= */

@media (max-width: 480px) {

    .editorial-article-header h1 {
        font-size:
            clamp(
                31px,
                9.8vw,
                41px
            );
    }

    .editorial-article-deck {
        font-size: 16px;
    }

    .editorial-cover-stage,

    .editorial-article-cover.is-portrait
    .editorial-cover-stage,

    .editorial-article-cover.is-square
    .editorial-cover-stage {
        min-height: 225px;

        height:
            min(88vw, 390px);

        max-height: 390px;
    }

    .editorial-article-content {
        font-size: 16.5px;
    }

    .editorial-publisher-card {
        grid-template-columns:
            50px
            minmax(0, 1fr);

        gap: 13px;
    }

    .editorial-publisher-card > img {
        width: 50px;
        height: 50px;
    }

}

/* =========================================================
   FIX POSISI HEADER DETAIL BERITA
========================================================= */

.editorial-breadcrumb {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    min-height: 42px !important;
    padding: 0 4px !important;
}

.editorial-article-header {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 34px 0 32px !important;

    align-items: initial !important;
    justify-content: initial !important;

    overflow: visible !important;
}

.editorial-article-heading {
    display: block !important;

    width: 100% !important;
    max-width: 1010px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.editorial-article-header::before {
    top: 0 !important;
    inset-block-start: 0 !important;

    width: 74px !important;
    height: 4px !important;
}

.editorial-article-header::after {
    top: 0 !important;
    inset-block-start: 0 !important;

    width: 18px !important;
    height: 4px !important;
}

.editorial-article-kicker {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    transform: none !important;
}

.editorial-article-header h1 {
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.editorial-article-deck {
    margin-top: 20px !important;
}

.editorial-byline {
    margin-top: 25px !important;
}


/* TABLET DAN HP */

@media (max-width: 700px) {

    .editorial-breadcrumb {
        min-height: 38px !important;
        margin-top: 6px !important;
    }

    .editorial-article-header {
        padding: 29px 0 28px !important;
    }

    .editorial-article-kicker {
        margin-bottom: 14px !important;
    }

}

/* =========================================================
   FINAL WARNA ADMISSION CENTER
   Diselaraskan dengan hero utama halaman beranda
========================================================= */

.dm-admission-box {
    background:
        radial-gradient(
            circle at 8% 4%,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.06) 17%,
            transparent 35%
        ),
        radial-gradient(
            circle at 84% 22%,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 30%
        ),
        radial-gradient(
            ellipse at 50% 115%,
            rgba(71, 219, 205, 0.40) 0%,
            rgba(21, 158, 151, 0.18) 34%,
            transparent 65%
        ),
        linear-gradient(
            132deg,
            #178075 0%,
            #0a6d6c 43%,
            #075568 72%,
            #06475d 100%
        ) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    box-shadow:
        0 28px 65px rgba(3, 49, 52, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}


/* Lingkaran kanan atas */

.dm-admission-box::before {
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.04) 52%,
            transparent 74%
        ) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 65px rgba(255, 255, 255, 0.025);
}


/* Lingkaran kiri bawah */

.dm-admission-box::after {
    background:
        rgba(71, 219, 205, 0.16) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);
}


/* Dekorasi tambahan */

.dm-admission-glow {
    background:
        rgba(255, 255, 255, 0.055) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);
}


/* Label Admission Center */

.dm-admission-label {
    color: #ffda14 !important;
}

.dm-admission-label::before,
.dm-admission-label::after {
    background:
        linear-gradient(
            90deg,
            #ffad00,
            #ffda14
        ) !important;

    box-shadow:
        0 0 12px
        rgba(255, 196, 0, 0.26);
}


/* Warna teks */

.dm-admission-content h2,
.dm-admission-box h2 {
    color: #ffffff !important;
}

.dm-admission-content p,
.dm-admission-box p {
    color: #d9eeee !important;
}


/* Tombol utama */

.dm-admission-primary {
    background:
        linear-gradient(
            135deg,
            #ffad00 0%,
            #ffc400 52%,
            #ffda14 100%
        ) !important;

    color: #12383b !important;

    box-shadow:
        0 14px 30px
        rgba(255, 174, 0, 0.20);
}


/* Tombol kedua */

.dm-admission-secondary {
    background:
        rgba(255, 255, 255, 0.025) !important;

    border-color:
        rgba(255, 255, 255, 0.32) !important;

    color: #ffffff !important;
}

.dm-admission-secondary:hover {
    background:
        rgba(255, 255, 255, 0.10) !important;

    border-color:
        rgba(255, 255, 255, 0.55) !important;
}

/* =========================================================
   FOOTER FINAL — PREMIUM MODERN
   YPP DARUL MA'ARIF
========================================================= */

.dm-site-footer {
    position: relative;

    width: 100%;

    margin-top: 48px;
}


/* FRAME UTAMA — SAMA DENGAN HEADER */

.dm-footer-frame {
    position: relative;
    isolation: isolate;

    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    margin-inline: auto;

    padding:
        36px
        clamp(26px, 4vw, 54px)
        20px;

    overflow: hidden;

    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius:
        32px 32px 0 0;

    background:
        radial-gradient(
            circle at 7% 5%,
            rgba(255, 255, 255, 0.16),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 10%,
            rgba(255, 255, 255, 0.08),
            transparent 28%
        ),
        linear-gradient(
            132deg,
            #178075 0%,
            #0a6d6c 43%,
            #075568 72%,
            #06475d 100%
        );

    box-shadow:
        0 -8px 40px
        rgba(3, 49, 52, 0.08),
        inset 0 1px 0
        rgba(255, 255, 255, 0.22);
}


/* DEKORASI */

.dm-footer-orb {
    position: absolute;
    z-index: -1;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}

.dm-footer-orb-one {
    width: 420px;
    height: 420px;

    inset-inline-end: -190px;
    top: -220px;

    border:
        62px solid
        rgba(255, 255, 255, 0.055);

    background:
        rgba(255, 255, 255, 0.035);
}

.dm-footer-orb-two {
    width: 250px;
    height: 250px;

    inset-inline-start: -125px;
    bottom: -140px;

    background:
        rgba(65, 211, 190, 0.15);
}


/* =========================================================
   CTA ATAS
========================================================= */

.dm-footer-cta {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding:
        clamp(26px, 3.5vw, 42px);

    border:
        1px solid
        rgba(255, 255, 255, 0.17);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.18);

    backdrop-filter:
        blur(8px);
}

.dm-footer-cta-copy {
    max-width: 770px;
}

.dm-footer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;

    color: #ffda14;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.dm-footer-eyebrow::before {
    content: "";

    width: 34px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ffad00,
            #ffda14
        );
}

.dm-footer-cta h2 {
    max-width: 720px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(27px, 3vw, 42px);

    line-height: 1.16;
    letter-spacing: -0.035em;
}

.dm-footer-cta p {
    max-width: 680px;

    margin: 12px 0 0;

    color:
        rgba(227, 246, 244, 0.86);

    font-size: 14px;
    line-height: 1.75;
}


/* TOMBOL CTA */

.dm-footer-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    flex-shrink: 0;
}

.dm-footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;

    padding: 11px 18px;

    border-radius: 14px;

    font-size: 12px;
    font-weight: 850;

    white-space: nowrap;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;
}

.dm-footer-button-primary {
    border:
        1px solid
        rgba(255, 218, 20, 0.7);

    background:
        linear-gradient(
            135deg,
            #ffad00,
            #ffda14
        );

    color: #15383b;

    box-shadow:
        0 13px 26px
        rgba(255, 174, 0, 0.18);
}

.dm-footer-button-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 30px
        rgba(255, 174, 0, 0.24);
}

.dm-footer-button-outline {
    border:
        1px solid
        rgba(255, 255, 255, 0.3);

    background:
        rgba(255, 255, 255, 0.035);

    color: #ffffff;
}

.dm-footer-button-outline:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, 0.55);

    background:
        rgba(255, 255, 255, 0.1);
}


/* GARIS PEMBATAS */

.dm-footer-divider {
    position: relative;
    z-index: 2;

    height: 1px;

    margin: 34px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.19),
            transparent
        );
}


/* =========================================================
   GRID INFORMASI
========================================================= */

.dm-footer-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(280px, 1.4fr)
        minmax(140px, 0.65fr)
        minmax(160px, 0.75fr)
        minmax(260px, 1fr);

    align-items: start;
    gap:
        clamp(30px, 4vw, 60px);
}


/* BRAND */

.dm-footer-logo {
    display: inline-flex;

    max-width: 280px;

    padding: 14px 18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.8);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 15px 35px
        rgba(2, 39, 43, 0.18);
}

.dm-footer-logo img {
    width: 100%;
    max-height: 68px;

    object-fit: contain;
}

.dm-footer-brand > p {
    max-width: 365px;

    margin: 20px 0 0;

    color:
        rgba(223, 244, 242, 0.84);

    font-size: 13px;
    line-height: 1.8;
}


/* JUDUL KOLOM */

.dm-footer-column h3,
.dm-footer-contact h3 {
    position: relative;

    margin:
        4px 0 22px;

    padding-bottom: 12px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.dm-footer-column h3::after,
.dm-footer-contact h3::after {
    content: "";

    position: absolute;

    inset-inline-start: 0;
    bottom: 0;

    width: 34px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ffad00,
            #ffda14
        );
}


/* LINK KOLOM */

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

.dm-footer-column > a {
    position: relative;

    margin-bottom: 11px;
    padding-inline-start: 15px;

    color:
        rgba(225, 245, 243, 0.78);

    font-size: 12px;
    font-weight: 650;

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

.dm-footer-column > a::before {
    content: "";

    position: absolute;

    inset-inline-start: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255, 218, 20, 0.85);

    transform:
        translateY(-50%);
}

.dm-footer-column > a:hover {
    color: #ffffff;

    transform:
        translateX(4px);
}


/* =========================================================
   KONTAK
========================================================= */

.dm-footer-contact {
    min-width: 0;
}

.dm-footer-contact-item {
    display: grid;

    grid-template-columns:
        38px minmax(0, 1fr);

    align-items: center;
    gap: 12px;

    margin-bottom: 13px;

    color:
        rgba(225, 245, 243, 0.82);

    font-size: 12px;
    line-height: 1.55;

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

.dm-footer-contact-item:hover {
    color: #ffffff;

    transform:
        translateX(3px);
}

.dm-footer-contact-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.07);

    color: #ffda14;
}

.dm-footer-contact-icon svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


/* =========================================================
   MEDIA SOSIAL
========================================================= */

.dm-footer-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 24px;
}

.dm-footer-social a {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.08);

    color: #ffffff;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;
}

.dm-footer-social svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.dm-footer-social a:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(255, 218, 20, 0.75);

    background:
        rgba(255, 218, 20, 0.18);

    color: #ffda14;
}


/* =========================================================
   LOKASI DAN MAPS
========================================================= */

.dm-footer-location {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(230px, 0.65fr)
        minmax(0, 1.35fr);

    align-items: stretch;

    margin-top: 34px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 22px;

    background:
        rgba(255, 255, 255, 0.055);
}

.dm-footer-location-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(24px, 3vw, 36px);
}

.dm-footer-location-copy > span {
    margin-bottom: 6px;

    color: #ffda14;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dm-footer-location-copy h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(20px, 2vw, 28px);

    line-height: 1.25;
}

.dm-footer-location-copy p {
    max-width: 360px;

    margin: 10px 0 17px;

    color:
        rgba(222, 244, 241, 0.78);

    font-size: 12px;
    line-height: 1.7;
}

.dm-footer-location-copy a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: max-content;

    color: #ffffff;

    font-size: 11px;
    font-weight: 850;
}

.dm-footer-location-copy a span {
    color: #ffda14;

    transition:
        transform 0.2s ease;
}

.dm-footer-location-copy a:hover span {
    transform:
        translate(3px, -3px);
}

.dm-footer-map {
    min-height: 210px;
}

.dm-footer-map iframe {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 210px;

    border: 0;

    filter:
        saturate(0.8)
        contrast(0.95);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.dm-footer-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 22px;
    padding-top: 18px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.12);

    color:
        rgba(211, 237, 234, 0.58);

    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.02em;
}


/* =========================================================
   RTL
========================================================= */

html[dir="rtl"]
.dm-footer-column > a:hover,

html[dir="rtl"]
.dm-footer-contact-item:hover {
    transform:
        translateX(-4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .dm-footer-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .dm-footer-grid {
        grid-template-columns:
            minmax(280px, 1.2fr)
            minmax(150px, 0.7fr)
            minmax(230px, 1fr);
    }

    .dm-footer-contact {
        grid-column: 3;
    }

}


/* =========================================================
   TABLET KECIL
========================================================= */

@media (max-width: 780px) {

    .dm-site-footer {
        margin-top: 36px;
    }

    .dm-footer-frame {
        width: var(
            --dm-page-frame,
            min(calc(100% - 16px), 1180px)
        );

        padding:
            24px 20px 18px;

        border-radius:
            25px 25px 0 0;
    }

    .dm-footer-cta {
        padding: 27px 23px;

        border-radius: 19px;
    }

    .dm-footer-cta-actions {
        width: 100%;
    }

    .dm-footer-button {
        flex: 1;
    }

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

        gap: 34px 26px;
    }

    .dm-footer-brand {
        grid-column:
            1 / -1;
    }

    .dm-footer-contact {
        grid-column:
            1 / -1;
    }

    .dm-footer-location {
        grid-template-columns: 1fr;
    }

    .dm-footer-map {
        min-height: 190px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    .dm-footer-frame {
        padding:
            18px 16px 16px;
    }

    .dm-footer-cta {
        padding: 24px 19px;
    }

    .dm-footer-cta h2 {
        font-size: 27px;
    }

    .dm-footer-cta-actions {
        flex-direction: column;
    }

    .dm-footer-button {
        width: 100%;
    }

    .dm-footer-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .dm-footer-brand,
    .dm-footer-contact {
        grid-column: auto;
    }

    .dm-footer-logo {
        max-width: 245px;
    }

    .dm-footer-location-copy {
        padding: 24px 20px;
    }

    .dm-footer-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }

}

/* =========================================================
   HEADER FINAL
   Hilangkan background luar, pertahankan kotak header
========================================================= */

/* Hilangkan background putih penuh di belakang header */
.site-header,
.site-header.scrolled,
html[data-theme="dark"] .site-header.scrolled {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* Hilangkan lapisan putih/halo ketika halaman di-scroll */
.site-header::before,
.site-header.scrolled::before {
    content: none !important;
    display: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
}


/* Kotak utama header tetap dipertahankan */
.site-header .header-frame {
    position: relative;
    z-index: 1;

    overflow: visible !important;

    border-radius: 18px !important;

    box-shadow:
        0 18px 45px rgba(0, 30, 38, 0.18),
        0 4px 12px rgba(0, 30, 38, 0.08) !important;
}


/* Topbar tetap menjadi bagian atas kotak header */
.site-header .topbar {
    border-radius:
        18px 18px 0 0 !important;
}


/* Bagian putih logo dan navigasi tetap ada */
.site-header .nav-shell {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfefd 100%
        ) !important;

    border-radius:
        0 0 18px 18px !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.95) !important;
}


/* Saat scroll, ukuran header boleh mengecil tanpa background luar */
.site-header.scrolled {
    padding:
        7px 0 9px !important;
}


/* Tampilan HP */
@media (max-width: 760px) {

    .site-header,
    .site-header.scrolled {
        background:
            transparent !important;

        box-shadow:
            none !important;
    }

    .site-header .header-frame {
        border-radius:
            15px !important;

        box-shadow:
            0 12px 30px
            rgba(0, 30, 38, 0.17),
            0 3px 8px
            rgba(0, 30, 38, 0.07) !important;
    }

    .site-header .topbar {
        border-radius:
            15px 15px 0 0 !important;
    }

    .site-header .nav-shell {
        border-radius:
            0 0 15px 15px !important;
    }

}

/* =========================================================
   FIX HEADER BOCOR SAAT SCROLL
   Menutup celah di atas tanpa mengubah kotak header
========================================================= */

.site-header,
.site-header.scrolled {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;

    isolation: isolate;

    /* Jarak kotak header dari bagian atas */
    padding-top: 14px !important;

    background: transparent !important;
}


/* Lapisan penutup khusus celah paling atas */
.site-header::before,
.site-header.scrolled::before {
    content: "" !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    z-index: 0 !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 18px !important;

    background: var(--bg, #f5f7f6) !important;

    pointer-events: none;
}


/* Kotak header harus berada di atas lapisan penutup */
.site-header .header-frame {
    position: relative !important;
    z-index: 1 !important;
}


/* Dark mode */
html[data-theme="dark"] .site-header::before,
html[data-theme="dark"] .site-header.scrolled::before {
    background: var(--bg, #071f24) !important;
}


/* HP */
@media (max-width: 760px) {

    .site-header,
    .site-header.scrolled {
        padding-top: 10px !important;
    }

    .site-header::before,
    .site-header.scrolled::before {
        height: 14px !important;
    }

}

/* =========================================================
   MOBILE NAVIGATION DRAWER — FINAL PREMIUM
========================================================= */

body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}


/* DRAWER DAN BACKDROP DISEMBUNYIKAN PADA DESKTOP */

.mobile-backdrop,
.site-header .mobile-panel {
    display: none;
}


@media (max-width: 1120px) {

    /* BACKDROP */

    .mobile-backdrop {
        position: fixed;
        z-index: 99998;

        inset: 0;

        display: block;

        background:
            rgba(3, 31, 36, 0.58);

        opacity: 0;
        visibility: hidden;

        backdrop-filter:
            blur(5px);

        -webkit-backdrop-filter:
            blur(5px);

        transition:
            opacity 0.32s ease,
            visibility 0.32s ease;

        cursor: pointer;
    }

    .mobile-backdrop.open {
        opacity: 1;
        visibility: visible;
    }


    /* DRAWER UTAMA */

    .site-header .mobile-panel {
        position: fixed !important;
        z-index: 99999 !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        display: flex !important;
        flex-direction: column;

        width:
            min(89vw, 410px) !important;

        height:
            100vh !important;

        height:
            100dvh !important;

        max-height:
            none !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        border: 0 !important;
        border-radius:
            28px 0 0 28px !important;

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f4faf8 100%
            ) !important;

        box-shadow:
            -24px 0 70px
            rgba(1, 34, 39, 0.28) !important;

        transform:
            translateX(105%);

        visibility: hidden;

        transition:
            transform 0.42s
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            ),
            visibility 0.42s;

        overscroll-behavior:
            contain;
    }

    .site-header
    .mobile-panel.open {
        max-height:
            none !important;

        transform:
            translateX(0);

        visibility: visible;
    }


    /* HEADER DRAWER */

    .mobile-drawer-head {
        position: relative;
        flex: 0 0 auto;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;

        min-height: 104px;

        padding:
            23px 22px;

        color: #ffffff;

        background:
            radial-gradient(
                circle at 88% 5%,
                rgba(255, 255, 255, 0.18),
                transparent 31%
            ),
            linear-gradient(
                135deg,
                #12887e 0%,
                #08747a 50%,
                #07586b 100%
            );

        overflow: hidden;
    }

    .mobile-drawer-head::after {
        content: "";

        position: absolute;

        width: 150px;
        height: 150px;

        top: -88px;
        right: -62px;

        border:
            25px solid
            rgba(255, 255, 255, 0.07);

        border-radius: 50%;

        pointer-events: none;
    }


    /* BRAND DRAWER */

    .mobile-drawer-brand {
        position: relative;
        z-index: 1;

        display: flex;
        align-items: center;
        gap: 11px;

        min-width: 0;
    }

    .mobile-drawer-logo {
        display: grid;
        place-items: center;

        width: 51px;
        height: 51px;

        flex: 0 0 51px;

        padding: 7px;

        border:
            1px solid
            rgba(255, 255, 255, 0.72);

        border-radius: 15px;

        background: #ffffff;

        box-shadow:
            0 10px 24px
            rgba(0, 43, 49, 0.16);
    }

    .mobile-drawer-logo img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
    }

    .mobile-drawer-brand-text {
        display: grid;
        gap: 3px;

        min-width: 0;
    }

    .mobile-drawer-brand-text strong {
        color: #ffffff;

        font-size: 14px;
        line-height: 1.2;
    }

    .mobile-drawer-brand-text small {
        overflow: hidden;

        color:
            rgba(229, 248, 245, 0.76);

        font-size: 9px;
        font-weight: 650;
        letter-spacing: 0.03em;

        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /* TOMBOL TUTUP */

    .mobile-drawer-close {
        position: relative;
        z-index: 2;

        width: 43px;
        height: 43px;

        flex: 0 0 43px;

        border:
            1px solid
            rgba(255, 255, 255, 0.28);

        border-radius: 14px;

        background:
            rgba(255, 255, 255, 0.10);

        color: #ffffff;

        cursor: pointer;

        transition:
            transform 0.2s ease,
            background 0.2s ease,
            border-color 0.2s ease;
    }

    .mobile-drawer-close:hover {
        transform:
            rotate(4deg);

        border-color:
            rgba(255, 255, 255, 0.5);

        background:
            rgba(255, 255, 255, 0.18);
    }

    .mobile-drawer-close span {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 19px;
        height: 2px;

        border-radius: 999px;

        background: currentColor;
    }

    .mobile-drawer-close
    span:first-child {
        transform:
            translate(-50%, -50%)
            rotate(45deg);
    }

    .mobile-drawer-close
    span:last-child {
        transform:
            translate(-50%, -50%)
            rotate(-45deg);
    }


    /* PENGANTAR */

    .mobile-drawer-intro {
        flex: 0 0 auto;

        padding:
            24px 22px 17px;

        border-bottom:
            1px solid
            rgba(7, 103, 111, 0.10);
    }

    .mobile-drawer-intro > span {
        display: block;

        margin-bottom: 5px;

        color: #0b8180;

        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mobile-drawer-intro strong {
        display: block;

        color: #10373b;

        font-size: 22px;
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    .mobile-drawer-intro p {
        margin:
            7px 0 0;

        color: #718688;

        font-size: 11px;
        line-height: 1.65;
    }


    /* DAFTAR MENU */

    .site-header
    .mobile-panel-inner {
        display: grid !important;
        flex: 1 0 auto;

        gap: 8px;

        width: 100%;

        padding:
            16px 16px 22px !important;
    }

    .mobile-nav-item,
    .mobile-nav-group {
        overflow: hidden;

        margin: 0 !important;

        border:
            1px solid
            rgba(8, 111, 116, 0.10);

        border-radius: 17px;

        background:
            rgba(255, 255, 255, 0.76);

        box-shadow:
            0 8px 24px
            rgba(4, 68, 73, 0.045);

        transition:
            border-color 0.2s ease,
            background 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.2s ease;
    }

    .mobile-nav-item {
        display: grid !important;

        grid-template-columns:
            43px
            minmax(0, 1fr)
            24px;

        align-items: center;
        gap: 12px;

        min-height: 72px;

        padding:
            12px 14px !important;

        color: #15383c !important;

        border-bottom:
            1px solid
            rgba(8, 111, 116, 0.10) !important;
    }

    .mobile-nav-item:hover,
    .mobile-nav-group:hover {
        transform:
            translateY(-2px);

        border-color:
            rgba(8, 126, 126, 0.22);

        box-shadow:
            0 13px 30px
            rgba(4, 68, 73, 0.08);
    }


    /* ITEM AKTIF */

    .mobile-nav-item.is-active,
    .mobile-nav-group.is-active {
        border-color:
            rgba(6, 121, 123, 0.23);

        background:
            linear-gradient(
                135deg,
                rgba(14, 148, 139, 0.13),
                rgba(6, 112, 126, 0.06)
            );

        box-shadow:
            inset 4px 0 0
            #0a8580,
            0 10px 26px
            rgba(4, 74, 78, 0.07);
    }


    /* IKON MENU */

    .mobile-nav-icon {
        display: grid;
        place-items: center;

        width: 43px;
        height: 43px;

        border:
            1px solid
            rgba(7, 116, 120, 0.12);

        border-radius: 13px;

        background:
            linear-gradient(
                145deg,
                #eef8f5,
                #ffffff
            );

        color: #087c7b;

        box-shadow:
            inset 0 1px 0
            rgba(255, 255, 255, 0.9);
    }

    .mobile-nav-icon svg {
        width: 18px;
        height: 18px;

        fill: currentColor;
    }

    .is-active
    .mobile-nav-icon {
        border-color:
            rgba(8, 130, 127, 0.18);

        background:
            linear-gradient(
                145deg,
                #0f9188,
                #08727d
            );

        color: #ffffff;

        box-shadow:
            0 8px 17px
            rgba(6, 111, 117, 0.18);
    }


    /* COPY MENU */

    .mobile-nav-copy {
        display: grid;
        gap: 3px;

        min-width: 0;
    }

    .mobile-nav-copy strong {
        color: #14363a;

        font-size: 14px;
        font-weight: 850;
        line-height: 1.25;
    }

    .mobile-nav-copy small {
        color: #819193;

        font-size: 9px;
        font-weight: 600;
        line-height: 1.4;
    }

    .mobile-nav-arrow {
        display: grid;
        place-items: center;

        color: #0a7c7b;

        font-size: 17px;
        font-weight: 850;

        transition:
            transform 0.2s ease;
    }

    .mobile-nav-item:hover
    .mobile-nav-arrow {
        transform:
            translateX(3px);
    }


    /* ACCORDION */

    .mobile-nav-group > summary {
        display: grid !important;

        grid-template-columns:
            43px
            minmax(0, 1fr)
            25px;

        align-items: center;
        gap: 12px;

        min-height: 72px;

        padding:
            12px 14px !important;

        color: #15383c !important;

        border: 0 !important;

        cursor: pointer;
        list-style: none;
    }

    .mobile-nav-group
    > summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav-group
    > summary::after {
        content: none !important;
        display: none !important;
    }

    .mobile-group-arrow {
        position: relative;

        width: 25px;
        height: 25px;

        border-radius: 8px;

        background:
            rgba(8, 125, 124, 0.07);
    }

    .mobile-group-arrow::before,
    .mobile-group-arrow::after {
        content: "";

        position: absolute;

        top: 50%;
        left: 50%;

        width: 10px;
        height: 2px;

        border-radius: 999px;

        background: #0a7d7c;

        transition:
            transform 0.25s ease;
    }

    .mobile-group-arrow::before {
        transform:
            translate(-50%, -50%);
    }

    .mobile-group-arrow::after {
        transform:
            translate(-50%, -50%)
            rotate(90deg);
    }

    .mobile-nav-group[open]
    .mobile-group-arrow::after {
        transform:
            translate(-50%, -50%)
            rotate(0);
    }


    /* SUBMENU */

    .mobile-submenu {
        display: grid;

        padding:
            0 14px 13px 69px;

        animation:
            mobileSubmenuReveal
            0.25s ease;
    }

    @keyframes mobileSubmenuReveal {
        from {
            opacity: 0;
            transform:
                translateY(-5px);
        }

        to {
            opacity: 1;
            transform:
                translateY(0);
        }
    }

    .site-header
    .mobile-submenu a {
        position: relative;

        display: flex !important;
        align-items: center;
        gap: 9px;

        min-height: 36px;

        padding:
            7px 9px !important;

        color: #5f7678 !important;

        border: 0 !important;
        border-radius: 9px;

        font-size: 11px;
        font-weight: 700;

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

    .mobile-submenu a > span {
        width: 5px;
        height: 5px;

        flex: 0 0 5px;

        border-radius: 50%;

        background: #ffbd00;
    }

    .site-header
    .mobile-submenu a:hover {
        color: #087a79 !important;

        background:
            rgba(8, 132, 127, 0.07);

        transform:
            translateX(2px);
    }


    /* FOOTER DRAWER */

    .mobile-drawer-footer {
        flex: 0 0 auto;

        padding:
            0 16px 22px;
    }

    .site-header
    .mobile-drawer-footer
    .mobile-psb {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 16px;

        min-height: 58px;

        margin: 0 !important;
        padding:
            13px 18px !important;

        color: #14383b !important;

        border:
            1px solid
            rgba(255, 192, 0, 0.72) !important;

        border-radius: 17px !important;

        background:
            linear-gradient(
                135deg,
                #ffaf00,
                #ffd421
            ) !important;

        box-shadow:
            0 13px 27px
            rgba(255, 177, 0, 0.20) !important;

        font-size: 13px;
        font-weight: 900;
    }

    .mobile-drawer-footer
    .mobile-psb strong {
        display: grid;
        place-items: center;

        width: 31px;
        height: 31px;

        border-radius: 10px;

        background:
            rgba(8, 72, 76, 0.10);
    }

    .mobile-drawer-footer > small {
        display: block;

        margin-top: 17px;

        color: #9aa8a9;

        font-size: 9px;
        font-weight: 650;
        text-align: center;
    }


    /* MODE GELAP */

    html[data-theme="dark"]
    .site-header
    .mobile-panel {
        background:
            linear-gradient(
                180deg,
                #09282d,
                #071f23
            ) !important;
    }

    html[data-theme="dark"]
    .mobile-drawer-intro {
        border-color:
            rgba(142, 211, 207, 0.12);
    }

    html[data-theme="dark"]
    .mobile-drawer-intro strong,
    html[data-theme="dark"]
    .mobile-nav-copy strong {
        color: #effafa;
    }

    html[data-theme="dark"]
    .mobile-drawer-intro p,
    html[data-theme="dark"]
    .mobile-nav-copy small {
        color: #9eb5b5;
    }

    html[data-theme="dark"]
    .mobile-nav-item,
    html[data-theme="dark"]
    .mobile-nav-group {
        border-color:
            rgba(130, 205, 200, 0.12);

        background:
            rgba(255, 255, 255, 0.035);
    }

    html[data-theme="dark"]
    .mobile-nav-icon {
        border-color:
            rgba(123, 199, 194, 0.13);

        background:
            rgba(255, 255, 255, 0.05);
    }

    html[data-theme="dark"]
    .mobile-submenu a {
        color: #a9bebe !important;
    }

}


/* RTL: drawer masuk dari kiri */

@media (max-width: 1120px) {

    html[dir="rtl"]
    .site-header
    .mobile-panel {
        right: auto !important;
        left: 0 !important;

        border-radius:
            0 28px 28px 0 !important;

        transform:
            translateX(-105%);
    }

    html[dir="rtl"]
    .site-header
    .mobile-panel.open {
        transform:
            translateX(0);
    }

    html[dir="rtl"]
    .mobile-nav-item.is-active,
    html[dir="rtl"]
    .mobile-nav-group.is-active {
        box-shadow:
            inset -4px 0 0
            #0a8580,
            0 10px 26px
            rgba(4, 74, 78, 0.07);
    }

    html[dir="rtl"]
    .mobile-nav-item:hover
    .mobile-nav-arrow {
        transform:
            translateX(-3px);
    }

}


/* HP KECIL */

@media (max-width: 430px) {

    .site-header .mobile-panel {
        width:
            min(92vw, 385px) !important;

        border-radius:
            23px 0 0 23px !important;
    }

    .mobile-drawer-head {
        min-height: 96px;

        padding:
            20px 18px;
    }

    .mobile-drawer-intro {
        padding:
            21px 18px 15px;
    }

    .site-header
    .mobile-panel-inner {
        padding:
            14px 13px 20px !important;
    }

    .mobile-nav-item,
    .mobile-nav-group > summary {
        min-height: 67px;
    }

    .mobile-drawer-footer {
        padding:
            0 13px 18px;
    }

}

/* =========================================================
   TOMBOL WHATSAPP GLOBAL
========================================================= */

.wa-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9990;

    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #2ee36f,
            #16b954
        );

    color: #ffffff;

    box-shadow:
        0 14px 32px rgba(18, 173, 80, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.wa-float svg {
    display: block;

    width: 30px;
    height: 30px;

    fill: currentColor;
}

.wa-float:hover {
    transform:
        translateY(-4px)
        scale(1.05);

    background:
        linear-gradient(
            145deg,
            #34ec78,
            #11a94a
        );

    box-shadow:
        0 18px 38px rgba(18, 173, 80, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.wa-float:focus-visible {
    outline: 3px solid rgba(255, 196, 0, 0.75);
    outline-offset: 4px;
}

@media (max-width: 640px) {
    .wa-float {
        right: 16px;
        bottom: 17px;

        width: 52px;
        height: 52px;
    }

    .wa-float svg {
        width: 27px;
        height: 27px;
    }
}

/* =========================================================
   PROFILE PAGE FINAL — PREMIUM MODERN
   YPP DARUL MA'ARIF
========================================================= */

.pp-page {
    --pp-teal: #087c78;
    --pp-teal-light: #21978e;
    --pp-blue: #07586a;
    --pp-blue-dark: #06485d;
    --pp-dark: #0c363a;
    --pp-text: #17383b;
    --pp-muted: #6e8283;
    --pp-yellow: #ffc400;
    --pp-yellow-light: #ffda1a;
    --pp-surface: #f2f8f6;
    --pp-border: rgba(7, 103, 108, 0.13);

    padding-bottom: 30px;
}


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

.pp-hero {
    position: relative;
    isolation: isolate;

    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    min-height: 570px;

    margin: 8px auto 0;
    padding:
        clamp(48px, 5vw, 76px)
        clamp(32px, 5vw, 74px);

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 7% 8%,
            rgba(255, 255, 255, 0.18),
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 10%,
            rgba(255, 255, 255, 0.08),
            transparent 27%
        ),
        linear-gradient(
            132deg,
            #178075 0%,
            #0a706d 42%,
            #07596a 73%,
            #06485d 100%
        );

    box-shadow:
        0 25px 65px
        rgba(3, 49, 52, 0.18),
        inset 0 1px 0
        rgba(255, 255, 255, 0.34);
}

.pp-hero-decoration {
    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;
}

.pp-hero-decoration-one {
    width: 470px;
    height: 470px;

    top: -260px;
    left: -210px;

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    box-shadow:
        0 0 0 80px
        rgba(255, 255, 255, 0.025);
}

.pp-hero-decoration-two {
    width: 530px;
    height: 530px;

    right: -330px;
    bottom: -310px;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    background:
        rgba(90, 218, 199, 0.07);

    box-shadow:
        0 0 0 90px
        rgba(255, 255, 255, 0.018);
}

.pp-hero-inner {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.93fr)
        minmax(420px, 1.07fr);

    align-items: center;
    gap:
        clamp(42px, 5vw, 82px);

    width: 100%;
    max-width: 1390px;

    margin-inline: auto;
}


/* HERO COPY */

.pp-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 20px;

    color:
        rgba(238, 255, 252, 0.82);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.pp-eyebrow > span {
    width: 38px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ffad00,
            var(--pp-yellow-light)
        );
}

.pp-hero-content h1 {
    max-width: 700px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(44px, 4.9vw, 72px);

    line-height: 1.04;
    letter-spacing: -0.048em;
    text-wrap: balance;
}

.pp-hero-content h1 strong {
    display: block;

    margin-top: 4px;

    color: var(--pp-yellow);
}

.pp-hero-description {
    max-width: 650px;

    margin: 23px 0 0;

    color:
        rgba(229, 248, 245, 0.82);

    font-size:
        clamp(15px, 1.3vw, 18px);

    line-height: 1.8;
}


/* HERO BUTTON */

.pp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 29px;
}

.pp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 50px;

    padding: 12px 20px;

    border-radius: 15px;

    font-size: 12px;
    font-weight: 850;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.pp-button-primary {
    border:
        1px solid
        rgba(255, 218, 26, 0.76);

    background:
        linear-gradient(
            135deg,
            #ffad00,
            var(--pp-yellow-light)
        );

    color: #133a3d;

    box-shadow:
        0 14px 30px
        rgba(255, 174, 0, 0.19);
}

.pp-button-secondary {
    border:
        1px solid
        rgba(255, 255, 255, 0.26);

    background:
        rgba(255, 255, 255, 0.05);

    color: #ffffff;
}

.pp-button:hover {
    transform: translateY(-3px);
}

.pp-button-primary:hover {
    box-shadow:
        0 18px 36px
        rgba(255, 174, 0, 0.27);
}

.pp-button-secondary:hover {
    background:
        rgba(255, 255, 255, 0.13);
}


/* LOCATION */

.pp-hero-location {
    display: flex;
    align-items: center;
    gap: 12px;

    width: max-content;
    max-width: 100%;

    margin-top: 30px;
}

.pp-location-icon {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.08);

    color: var(--pp-yellow);
}

.pp-location-icon svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.pp-hero-location > div {
    display: grid;
    gap: 2px;
}

.pp-hero-location small {
    color:
        rgba(224, 245, 242, 0.62);

    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pp-hero-location strong {
    color: #ffffff;

    font-size: 12px;
}


/* =========================================================
   FOTO GAPURA
========================================================= */

.pp-hero-visual {
    margin: 0;
}

.pp-photo-frame {
    position: relative;

    padding: 12px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 29px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.07)
        );

    box-shadow:
        0 27px 58px
        rgba(2, 42, 48, 0.25),
        inset 0 1px 0
        rgba(255, 255, 255, 0.28);

    backdrop-filter: blur(10px);
}

.pp-photo-label {
    position: absolute;
    z-index: 3;

    top: 27px;
    left: 27px;

    padding: 8px 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.68);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.89);

    color: #0d5559;

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    box-shadow:
        0 8px 20px
        rgba(3, 49, 52, 0.10);
}

.pp-photo-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    min-height: 340px;

    padding: 45px 18px 0;

    overflow: hidden;

    border-radius: 21px 21px 9px 9px;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(255, 255, 255, 0.23),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #77cbc4 0%,
            #31938e 54%,
            #126d75 100%
        );
}

.pp-photo-stage img {
    display: block;

    width: 110%;
    max-width: none;

    margin-bottom: -2px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 19px 22px
            rgba(3, 45, 49, 0.24)
        );
}

.pp-photo-frame figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 72px;

    padding: 14px 10px 4px 12px;

    color: #ffffff;
}

.pp-photo-frame figcaption > div {
    display: grid;
    gap: 3px;
}

.pp-photo-frame figcaption small {
    color:
        rgba(222, 244, 241, 0.62);

    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pp-photo-frame figcaption strong {
    font-size: 13px;
}

.pp-photo-frame figcaption > span {
    display: grid;
    place-items: center;

    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    border-radius: 50%;

    background: var(--pp-yellow);

    color: #12383b;

    font-size: 16px;
    font-weight: 900;
}


/* =========================================================
   STATISTIK
========================================================= */

.pp-statistics {
    position: relative;
    z-index: 4;

    width: var(
        --dm-page-frame,
        min(calc(100% - 64px), 1600px)
    );

    margin: 18px auto 0;
}

.pp-statistics-inner {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    overflow: hidden;

    border:
        1px solid var(--pp-border);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 18px 42px
        rgba(3, 49, 52, 0.09);
}

.pp-statistics article {
    position: relative;

    display: grid;
    place-items: center;
    gap: 4px;

    min-height: 112px;

    padding: 20px;

    text-align: center;

    border-inline-end:
        1px solid var(--pp-border);
}

.pp-statistics article:last-child {
    border-inline-end: 0;
}

.pp-statistics article::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 42px;
    height: 3px;

    border-radius:
        0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            #ffad00,
            var(--pp-yellow-light)
        );

    transform:
        translateX(-50%);
}

.pp-statistics strong {
    color: var(--pp-teal);

    font-size:
        clamp(29px, 3vw, 42px);

    line-height: 1;
}

.pp-statistics span {
    color: #6f8183;

    font-size: 11px;
    font-weight: 750;
}


/* =========================================================
   SECTION GENERAL
========================================================= */

.pp-section {
    padding:
        clamp(72px, 8vw, 110px)
        0;
}

.pp-section-inner,
.pp-vision-inner {
    width: min(
        calc(100% - 48px),
        1320px
    );

    margin-inline: auto;
}

.pp-section-heading {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 42px;
}

.pp-section-number {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #0d8a83,
            #076172
        );

    color: #ffffff;

    font-size: 11px;
    font-weight: 900;

    box-shadow:
        0 11px 25px
        rgba(5, 103, 109, 0.17);
}

.pp-section-number-light {
    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    background:
        rgba(255, 255, 255, 0.10);

    box-shadow: none;
}

.pp-section-heading > div:last-child {
    display: grid;
    gap: 4px;
}

.pp-section-heading span {
    color: var(--pp-teal);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pp-section-heading h2 {
    margin: 0;

    color: var(--pp-dark);

    font-size:
        clamp(29px, 3vw, 42px);

    line-height: 1.15;
    letter-spacing: -0.035em;
}


/* =========================================================
   SEJARAH
========================================================= */

.pp-history {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f9f7 100%
        );
}

.pp-history-layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(0, 1.2fr);

    align-items: start;
    gap:
        clamp(35px, 5vw, 72px);
}

.pp-history-intro {
    position: sticky;
    top: 135px;

    padding: 34px;

    border:
        1px solid var(--pp-border);

    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 18px 44px
        rgba(3, 49, 52, 0.07);
}

.pp-history-mark {
    display: block;

    height: 39px;

    color: var(--pp-yellow);

    font-family:
        Georgia,
        serif;

    font-size: 65px;
    line-height: 0.8;
}

.pp-history-intro h3 {
    margin: 14px 0 16px;

    color: var(--pp-dark);

    font-size:
        clamp(24px, 2.4vw, 35px);

    line-height: 1.3;
    letter-spacing: -0.025em;
}

.pp-history-intro p {
    margin: 0;

    color: var(--pp-muted);

    font-size: 14px;
    line-height: 1.85;
}

.pp-history-list {
    position: relative;

    display: grid;
    gap: 16px;
}

.pp-history-list::before {
    content: "";

    position: absolute;

    top: 36px;
    bottom: 36px;
    left: 27px;

    width: 2px;

    background:
        linear-gradient(
            var(--pp-yellow),
            #56c9bd,
            var(--pp-teal)
        );
}

.pp-history-item {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        55px minmax(0, 1fr);

    gap: 19px;

    padding: 25px;

    border:
        1px solid var(--pp-border);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 13px 32px
        rgba(3, 49, 52, 0.05);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.pp-history-item:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 40px
        rgba(3, 49, 52, 0.09);
}

.pp-history-item > span {
    display: grid;
    place-items: center;

    width: 55px;
    height: 55px;

    border:
        5px solid #ffffff;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #ffad00,
            var(--pp-yellow-light)
        );

    color: #17383b;

    font-size: 11px;
    font-weight: 900;

    box-shadow:
        0 9px 20px
        rgba(255, 177, 0, 0.20);
}

.pp-history-item small {
    color: var(--pp-teal);

    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pp-history-item h3 {
    margin: 5px 0 8px;

    color: var(--pp-dark);

    font-size: 19px;
}

.pp-history-item p {
    margin: 0;

    color: var(--pp-muted);

    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   VISI MISI
========================================================= */

.pp-vision {
    padding:
        clamp(72px, 8vw, 105px)
        0;
}

.pp-vision-inner {
    position: relative;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    gap:
        clamp(42px, 6vw, 84px);

    padding:
        clamp(35px, 5vw, 68px);

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    border-radius: 27px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(255, 255, 255, 0.13),
            transparent 30%
        ),
        linear-gradient(
            132deg,
            #168078 0%,
            #096d6d 45%,
            #07556a 100%
        );

    box-shadow:
        0 25px 58px
        rgba(3, 49, 52, 0.17);
}

.pp-vision-inner::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -205px;
    bottom: -225px;

    border:
        55px solid
        rgba(255, 255, 255, 0.04);

    border-radius: 50%;
}

.pp-vision-main,
.pp-mission {
    position: relative;
    z-index: 2;
}

.pp-vision-label {
    display: block;

    margin: 20px 0 14px;

    color: var(--pp-yellow);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.pp-vision-main h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(29px, 3.4vw, 48px);

    line-height: 1.32;
    letter-spacing: -0.03em;
}

.pp-mission-heading {
    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.14);
}

.pp-mission-heading > span {
    color: var(--pp-yellow);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pp-mission-heading p {
    max-width: 550px;

    margin: 9px 0 0;

    color:
        rgba(225, 246, 243, 0.72);

    font-size: 12px;
    line-height: 1.7;
}

.pp-mission-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;

    margin-top: 18px;
}

.pp-mission-grid article {
    min-height: 130px;

    padding: 19px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.07);

    transition:
        transform 0.22s ease,
        background 0.22s ease;
}

.pp-mission-grid article:hover {
    transform: translateY(-4px);

    background:
        rgba(255, 255, 255, 0.12);
}

.pp-mission-grid article > span {
    display: inline-flex;

    margin-bottom: 12px;

    color: var(--pp-yellow);

    font-size: 10px;
    font-weight: 900;
}

.pp-mission-grid p {
    margin: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
}


/* =========================================================
   ORGANISASI
========================================================= */

.pp-organization {
    background: #ffffff;
}

.pp-org-chart {
    max-width: 1080px;

    margin-inline: auto;

    text-align: center;
}

.pp-org-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 125px;

    padding: 24px;

    border:
        1px solid var(--pp-border);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 17px 39px
        rgba(3, 49, 52, 0.07);
}

.pp-org-card-main,
.pp-org-card-chair {
    width: min(100%, 360px);

    margin-inline: auto;
}

.pp-org-card-main {
    border-color:
        rgba(255, 196, 0, 0.48);

    background:
        linear-gradient(
            145deg,
            #fff9d9,
            #fff2aa
        );
}

.pp-org-card-chair {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.16);

    background:
        linear-gradient(
            135deg,
            #168078,
            #07586a
        );

    box-shadow:
        0 19px 42px
        rgba(3, 64, 69, 0.17);
}

.pp-org-card small {
    color: var(--pp-teal);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.pp-org-card strong {
    margin-top: 8px;

    color: var(--pp-dark);

    font-size: 18px;
}

.pp-org-card-chair small {
    color: var(--pp-yellow);
}

.pp-org-card-chair strong {
    color: #ffffff;
}

.pp-org-connector {
    width: 2px;
    height: 39px;

    margin-inline: auto;

    background:
        linear-gradient(
            var(--pp-yellow),
            var(--pp-teal)
        );
}

.pp-org-grid {
    position: relative;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    margin-top: 48px;
}

.pp-org-grid::before {
    content: "";

    position: absolute;

    top: -25px;
    left: 16.66%;
    right: 16.66%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--pp-yellow),
            #54c9bd,
            var(--pp-teal)
        );
}

.pp-org-grid .pp-org-card::before {
    content: "";

    position: absolute;

    top: -25px;
    left: 50%;

    width: 2px;
    height: 25px;

    background: #54c9bd;

    transform: translateX(-50%);
}

.pp-org-grid .pp-org-card > span {
    position: absolute;

    top: 15px;
    right: 16px;

    color:
        rgba(8, 124, 120, 0.45);

    font-size: 9px;
    font-weight: 900;
}


/* =========================================================
   LEGALITAS
========================================================= */

.pp-legality {
    background:
        linear-gradient(
            180deg,
            #f3f8f6,
            #ffffff
        );
}

.pp-legal-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.pp-legal-grid article {
    position: relative;

    min-height: 210px;

    padding: 64px 23px 23px;

    overflow: hidden;

    border:
        1px solid var(--pp-border);

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 15px 35px
        rgba(3, 49, 52, 0.06);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.pp-legal-grid article:hover {
    transform: translateY(-6px);

    box-shadow:
        0 23px 45px
        rgba(3, 49, 52, 0.11);
}

.pp-legal-grid article > span {
    position: absolute;

    top: 20px;
    left: 22px;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 11px;

    background:
        linear-gradient(
            145deg,
            #168078,
            #07586a
        );

    color: #ffffff;

    font-size: 9px;
    font-weight: 900;
}

.pp-legal-grid h3 {
    margin: 0 0 9px;

    color: var(--pp-dark);

    font-size: 17px;
}

.pp-legal-grid p {
    margin: 0;

    color: var(--pp-muted);

    font-size: 12px;
    line-height: 1.75;
}

.pp-legal-grid article:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            #e8faf7,
            #d8f2ed
        );
}

.pp-legal-grid article:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            #fff9dc,
            #fff2ad
        );
}

.pp-legal-grid article:nth-child(4) {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.15);

    background:
        linear-gradient(
            135deg,
            #168078,
            #07586a
        );
}

.pp-legal-grid article:nth-child(4) h3 {
    color: #ffffff;
}

.pp-legal-grid article:nth-child(4) p {
    color:
        rgba(226, 246, 243, 0.73);
}

.pp-legal-grid article:nth-child(4) > span {
    background:
        linear-gradient(
            145deg,
            #ffad00,
            var(--pp-yellow-light)
        );

    color: #16383b;
}


/* =========================================================
   DARK MODE
========================================================= */

html[data-theme="dark"] .pp-page {
    --pp-text: #e7f4f3;
    --pp-dark: #edfafa;
    --pp-muted: #9fb6b6;
    --pp-border:
        rgba(145, 207, 203, 0.13);
}

html[data-theme="dark"] .pp-statistics-inner,
html[data-theme="dark"] .pp-history,
html[data-theme="dark"] .pp-organization {
    background: #082428;
}

html[data-theme="dark"] .pp-history {
    background:
        linear-gradient(
            180deg,
            #071e22,
            #092a2e
        );
}

html[data-theme="dark"] .pp-history-intro,
html[data-theme="dark"] .pp-history-item,
html[data-theme="dark"] .pp-org-card,
html[data-theme="dark"] .pp-legal-grid article {
    border-color: var(--pp-border);
    background: #0a292d;
}

html[data-theme="dark"] .pp-statistics strong,
html[data-theme="dark"] .pp-section-heading span,
html[data-theme="dark"] .pp-history-item small,
html[data-theme="dark"] .pp-org-card small {
    color: #62d6cd;
}

html[data-theme="dark"] .pp-statistics span,
html[data-theme="dark"] .pp-history-intro p,
html[data-theme="dark"] .pp-history-item p,
html[data-theme="dark"] .pp-legal-grid p {
    color: #9eb4b4;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .pp-hero {
        min-height: auto;
    }

    .pp-hero-inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, 0.95fr);

        gap: 40px;
    }

    .pp-photo-stage {
        min-height: 300px;
    }

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

}


@media (max-width: 820px) {

    .pp-hero {
        width:
            min(calc(100% - 24px), 1600px);

        padding:
            42px 25px 34px;

        border-radius: 20px;
    }

    .pp-hero-inner {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .pp-hero-content {
        text-align: center;
    }

    .pp-eyebrow,
    .pp-hero-actions,
    .pp-hero-location {
        justify-content: center;

        margin-inline: auto;
    }

    .pp-hero-content h1,
    .pp-hero-description {
        margin-inline: auto;
    }

    .pp-photo-frame {
        max-width: 660px;

        margin-inline: auto;
    }

    .pp-statistics {
        width:
            min(calc(100% - 24px), 1600px);
    }

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

    .pp-statistics article:nth-child(2) {
        border-inline-end: 0;
    }

    .pp-statistics article:nth-child(-n + 2) {
        border-bottom:
            1px solid var(--pp-border);
    }

    .pp-history-layout,
    .pp-vision-inner {
        grid-template-columns: 1fr;
    }

    .pp-history-intro {
        position: static;
    }

    .pp-org-grid {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 31px;
    }

    .pp-org-grid::before,
    .pp-org-grid .pp-org-card::before {
        display: none;
    }

}


@media (max-width: 560px) {

    .pp-hero {
        width:
            min(calc(100% - 16px), 1600px);

        margin-top: 6px;
        padding:
            34px 18px 21px;

        border-radius: 18px;
    }

    .pp-hero-content h1 {
        font-size:
            clamp(35px, 10.5vw, 47px);
    }

    .pp-hero-description {
        font-size: 14px;
    }

    .pp-hero-actions {
        flex-direction: column;
    }

    .pp-button {
        width: 100%;
    }

    .pp-photo-frame {
        padding: 8px;

        border-radius: 21px;
    }

    .pp-photo-stage {
        min-height: 230px;

        padding:
            47px 5px 0;
    }

    .pp-photo-label {
        top: 19px;
        left: 19px;

        font-size: 8px;
    }

    .pp-photo-frame figcaption {
        min-height: 63px;
    }

    .pp-statistics {
        width:
            min(calc(100% - 16px), 1600px);
    }

    .pp-statistics article {
        min-height: 96px;

        padding: 16px 8px;
    }

    .pp-statistics span {
        font-size: 9px;
    }

    .pp-section {
        padding: 67px 0;
    }

    .pp-section-inner,
    .pp-vision-inner {
        width:
            calc(100% - 28px);
    }

    .pp-section-heading {
        margin-bottom: 30px;
    }

    .pp-section-number {
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }

    .pp-history-intro {
        padding: 25px;
    }

    .pp-history-list::before {
        display: none;
    }

    .pp-history-item {
        grid-template-columns:
            47px minmax(0, 1fr);

        gap: 14px;

        padding: 19px;
    }

    .pp-history-item > span {
        width: 47px;
        height: 47px;
    }

    .pp-vision-inner {
        padding: 28px 21px;

        border-radius: 21px;
    }

    .pp-mission-grid {
        grid-template-columns: 1fr;
    }

    .pp-mission-grid article {
        min-height: auto;
    }

    .pp-legal-grid {
        grid-template-columns: 1fr;
    }

    .pp-legal-grid article {
        min-height: 180px;
    }

}

/* =========================================================
   FIX FINAL — TINGGI HERO PROFIL
========================================================= */

.pp-hero {
    min-height: 490px !important;

    padding:
        38px
        clamp(34px, 4vw, 62px)
        34px !important;
}

.pp-hero-inner {
    gap:
        clamp(34px, 4vw, 60px) !important;
}


/* Label profil */

.pp-eyebrow {
    margin-bottom: 15px !important;
}


/* Judul dibuat lebih proporsional */

.pp-hero-content h1 {
    font-size:
        clamp(42px, 4.25vw, 62px) !important;

    line-height: 1.02 !important;
}

.pp-hero-content h1 strong {
    margin-top: 1px !important;
}


/* Deskripsi lebih rapat */

.pp-hero-description {
    margin-top: 17px !important;

    font-size:
        clamp(14px, 1.15vw, 17px) !important;

    line-height: 1.65 !important;
}


/* Tombol */

.pp-hero-actions {
    margin-top: 22px !important;
}

.pp-button {
    min-height: 46px !important;

    padding:
        10px 18px !important;
}


/* Lokasi */

.pp-hero-location {
    margin-top: 20px !important;
}


/* Bingkai foto dipendekkan */

.pp-photo-frame {
    padding: 10px !important;

    border-radius: 25px !important;
}

.pp-photo-stage {
    min-height: 275px !important;
    height: 275px !important;

    padding:
        38px 12px 0 !important;
}

.pp-photo-stage img {
    width: 104% !important;

    max-height: 100% !important;
}


/* Informasi bawah foto */

.pp-photo-frame figcaption {
    min-height: 58px !important;

    padding:
        10px 8px 2px 10px !important;
}

.pp-photo-frame figcaption > span {
    width: 34px !important;
    height: 34px !important;
}


/* Label foto */

.pp-photo-label {
    top: 22px !important;
    left: 22px !important;

    padding:
        7px 11px !important;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1050px) {

    .pp-hero {
        min-height: auto !important;

        padding:
            34px 32px 30px !important;
    }

    .pp-photo-stage {
        min-height: 255px !important;
        height: 255px !important;
    }

}


/* =========================================================
   TABLET DAN HP
========================================================= */

@media (max-width: 820px) {

    .pp-hero {
        padding:
            35px 24px 26px !important;
    }

    .pp-hero-inner {
        gap: 28px !important;
    }

    .pp-photo-stage {
        min-height: 260px !important;
        height: 260px !important;
    }

}


@media (max-width: 560px) {

    .pp-hero {
        padding:
            30px 18px 18px !important;
    }

    .pp-hero-content h1 {
        font-size:
            clamp(34px, 10vw, 45px) !important;
    }

    .pp-photo-stage {
        min-height: 215px !important;
        height: 215px !important;

        padding-top: 40px !important;
    }

    .pp-photo-frame figcaption {
        min-height: 54px !important;
    }

}

/* =========================================================
   HEADER BRAND FINAL
   Desktop lebih proporsional, mobile lebih jelas
========================================================= */

/* Dasar brand */
.site-header .brand {
    display: flex !important;
    align-items: center !important;

    gap: 0 !important;
    padding: 0 !important;

    min-width: 0 !important;

    overflow: visible !important;
}

.site-header .brand-logo,
.site-header .brand-wordmark {
    display: block !important;

    object-fit: contain !important;

    padding: 0 !important;
}


/* =========================================================
   LAPTOP DAN DESKTOP — UKURAN PROPORSIONAL
========================================================= */

@media (min-width: 1121px) {

    .site-header .brand {
        display: flex !important;
        align-items: center !important;

        width: 288px !important;
        min-width: 288px !important;
        max-width: 288px !important;

        height: 75px !important;

        gap: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    /* Lambang yayasan */
    .site-header .brand-logo {
        display: block !important;

        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;

        height: 56px !important;
        max-height: 56px !important;

        flex: 0 0 56px !important;

        object-fit: contain !important;
    }

    /* Tulisan Arab dan nama yayasan */
    .site-header .brand-wordmark {
        display: block !important;

        width: 225px !important;
        min-width: 225px !important;
        max-width: 225px !important;

        height: 67px !important;
        max-height: 67px !important;

        flex: 0 0 225px !important;

        object-fit: contain !important;
        object-position: left center !important;

        /* Mendekatkan tulisan ke lambang */
        margin-inline-start: -7px !important;

        transform: scale(1.08) !important;
        transform-origin: left center !important;
    }

}

/* =========================================================
   TABLET
========================================================= */

@media (min-width: 761px) and (max-width: 1120px) {

    .site-header .brand {
        width: 240px !important;
        min-width: 220px !important;
        max-width: 240px !important;

        height: 66px !important;
    }

    .site-header .brand-logo {
        width: 49px !important;
        min-width: 49px !important;
        max-width: 49px !important;

        height: 49px !important;

        flex: 0 0 49px !important;
    }

    .site-header .brand-wordmark {
        width: 183px !important;
        min-width: 0 !important;
        max-width: 183px !important;

        height: 56px !important;
        max-height: 56px !important;

        flex: 0 1 183px !important;

        margin-inline-start: -4px !important;

        transform: scale(1.08) !important;
        transform-origin: left center !important;
    }

}


/* =========================================================
   HP
========================================================= */

@media (max-width: 760px) {

    .site-header .brand {
        width: min(57vw, 225px) !important;
        min-width: 0 !important;
        max-width: 225px !important;

        height: 62px !important;

        flex-shrink: 1 !important;
    }

    /* Lambang diperbesar agar tidak terlalu kecil */
    .site-header .brand-logo {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 46px !important;
        max-height: 46px !important;

        flex: 0 0 46px !important;
    }

    /* Wordmark HP dibuat lebih besar dan mudah dibaca */
    .site-header .brand-wordmark {
        display: block !important;

        width: min(43vw, 172px) !important;
        min-width: 0 !important;
        max-width: 172px !important;

        height: 53px !important;
        max-height: 53px !important;

        flex: 0 1 172px !important;

        margin-inline-start: -5px !important;

        transform: scale(1.11) !important;
        transform-origin: left center !important;
    }

}


/* =========================================================
   HP KECIL
========================================================= */

@media (max-width: 430px) {

    .site-header .brand {
        width: min(55vw, 195px) !important;
        max-width: 195px !important;

        height: 57px !important;
    }

    .site-header .brand-logo {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;
        max-height: 42px !important;

        flex-basis: 42px !important;
    }

    .site-header .brand-wordmark {
        width: min(40vw, 148px) !important;
        max-width: 148px !important;

        height: 48px !important;
        max-height: 48px !important;

        flex-basis: 148px !important;

        margin-inline-start: -4px !important;

        transform: scale(1.11) !important;
    }

}


/* =========================================================
   HP SANGAT KECIL
========================================================= */

@media (max-width: 360px) {

    .site-header .brand {
        width: 170px !important;
        max-width: 170px !important;
    }

    .site-header .brand-logo {
        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;

        height: 39px !important;

        flex-basis: 39px !important;
    }

    .site-header .brand-wordmark {
        width: 132px !important;
        max-width: 132px !important;

        height: 45px !important;

        flex-basis: 132px !important;

        margin-inline-start: -3px !important;
    }

}

/* =========================================================
   SATU FRAME GLOBAL
   Header dan seluruh halaman memakai lebar yang sama
========================================================= */

:root {
    --dm-page-frame: min(calc(100% - 40px), 1800px);
}


/* =========================================================
   LAPTOP MENENGAH
========================================================= */

@media (max-width: 1450px) {
    :root {
        --dm-page-frame: min(calc(100% - 32px), 1360px);
    }
}


/* =========================================================
   TABLET DAN LAPTOP KECIL
========================================================= */

@media (max-width: 1120px) {
    :root {
        --dm-page-frame: min(calc(100% - 24px), 1040px);
    }
}


/* =========================================================
   HP
========================================================= */

@media (max-width: 760px) {
    :root {
        --dm-page-frame: calc(100% - 16px);
    }
}


/* =========================================================
   PAKSA SEMUA FRAME MENGIKUTI HEADER
========================================================= */

.site-header .header-frame,

/* Beranda */
.dm-hero,
.dm-program-section > .container,
.dm-news-section > .container,
.dm-admission-section > .container,

/* Profil */
.pp-hero,
.pp-statistics,
.pp-section-inner,
.pp-vision-inner,

/* Lembaga */
.institutions-premium-hero,
.institutions-directory > .container,
.institutions-extra-section > .container,

/* Detail lembaga */
.unit-detail-hero,
.unit-detail-layout,
.unit-detail-admission > .container,
.unit-detail-related > .container,

/* Program */
.program-page-hero,
.program-navigation > .container,
.program-showcase-section > .container,
.program-method-section > .container,
.program-admission-section > .container,

/* Sarana prasarana */
.facilities-page-hero,
.facilities-quick-navigation > .container,
.facilities-directory > .container,
.facilities-standard-section > .container,
.facilities-location-section > .container,

/* Berita */
.news-page-hero,
.news-page-archive,

/* Detail berita */
.page-hero > .container,
.editorial-news-detail > .editorial-news-shell,

/* Footer */
.dm-footer-frame {
    width: var(--dm-page-frame) !important;
    max-width: none !important;

    margin-right: auto !important;
    margin-left: auto !important;

    box-sizing: border-box !important;
}

/* =========================================================
   FINAL GLOBAL FRAME
   Semua bagian utama mengikuti lebar header
========================================================= */

:root {
    --ypp-global-frame:
        min(calc(100% - 40px), 1800px);

    --dm-page-frame:
        var(--ypp-global-frame);
}


/* Laptop ukuran menengah */
@media (max-width: 1450px) {
    :root {
        --ypp-global-frame:
            min(calc(100% - 32px), 1360px);

        --dm-page-frame:
            var(--ypp-global-frame);
    }
}


/* Tablet dan laptop kecil */
@media (max-width: 1120px) {
    :root {
        --ypp-global-frame:
            min(calc(100% - 24px), 1040px);

        --dm-page-frame:
            var(--ypp-global-frame);
    }
}


/* HP */
@media (max-width: 760px) {
    :root {
        --ypp-global-frame:
            calc(100% - 16px);

        --dm-page-frame:
            var(--ypp-global-frame);
    }
}


/* =========================================================
   HEADER
========================================================= */

.site-header .header-frame,


/* =========================================================
   BERANDA
========================================================= */

.dm-hero,
.dm-program-section > .container,
.dm-news-section > .container,
.dm-admission-section > .container,


/* =========================================================
   PROFIL
========================================================= */

.pp-hero,
.pp-statistics,
.pp-section-inner,
.pp-vision-inner,


/* =========================================================
   LEMBAGA
========================================================= */

.institutions-premium-hero,
.institutions-directory > .container,
.institutions-extra-section > .container,


/* =========================================================
   DETAIL LEMBAGA
========================================================= */

.unit-detail-hero,
.unit-detail-layout,
.unit-detail-admission > .container,
.unit-detail-related > .container,


/* =========================================================
   PROGRAM
========================================================= */

.program-page-hero,
.program-navigation > .container,
.program-showcase-section > .container,
.program-method-section > .container,
.program-admission-section > .container,


/* =========================================================
   SARANA PRASARANA
========================================================= */

.facilities-page-hero,
.facilities-quick-navigation > .container,
.facilities-directory > .container,
.facilities-standard-section > .container,
.facilities-location-section > .container,


/* =========================================================
   BERITA
========================================================= */

.news-page-hero,
.news-page-archive,


/* =========================================================
   DETAIL BERITA DAN HERO UMUM
========================================================= */

.page-hero > .container,
.editorial-news-detail > .editorial-news-shell,


/* =========================================================
   FOOTER
========================================================= */

.dm-footer-frame {
    width:
        var(--ypp-global-frame) !important;

    max-width:
        none !important;

    margin-right:
        auto !important;

    margin-left:
        auto !important;

    box-sizing:
        border-box !important;
}

/* Tombol bahasa sementara dinonaktifkan */
.language-switcher-disabled {
    cursor: not-allowed !important;
    opacity: 0.65;
    user-select: none;
}

.language-switcher-disabled:hover,
.language-switcher-disabled:focus,
.language-switcher-disabled:active {
    transform: none !important;
    box-shadow: none !important;
}

/* =========================================================
   FITUR BAHASA DINONAKTIFKAN SEMENTARA
========================================================= */

.site-header .language-button-disabled,
.site-header .language-button-disabled:disabled {
    cursor: not-allowed !important;
    opacity: 0.65 !important;
    transform: none !important;
    box-shadow: none !important;
}

.site-header .language-button-disabled:hover,
.site-header .language-button-disabled:focus,
.site-header .language-button-disabled:active {
    transform: none !important;
    box-shadow: none !important;
}

/* =========================================================
   DARK MODE FINAL — SELURUH WEBSITE PUBLIK
   YPP DARUL MA'ARIF

   Letakkan PALING BAWAH assets/css/style.css
========================================================= */


/* =========================================================
   1. VARIABEL WARNA UTAMA
========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #031316;
    --surface: #082126;
    --surface-2: #0c2a30;

    --text: #edfafa;
    --muted: #9db6b6;
    --line: rgba(137, 213, 207, 0.16);

    --primary: #20b9af;
    --primary-2: #48d5ca;

    --dark: #031317;
    --darker: #020b0e;

    --shadow:
        0 24px 70px rgba(0, 0, 0, 0.38);

    --ypp-dark-bg: #031316;
    --ypp-dark-section: #061b20;
    --ypp-dark-panel: #09252a;
    --ypp-dark-panel-2: #0d2d33;
    --ypp-dark-panel-hover: #12373d;

    --ypp-dark-text: #effbfa;
    --ypp-dark-muted: #9fb7b7;
    --ypp-dark-border: rgba(122, 205, 199, 0.16);

    --ypp-dark-teal: #25c3b8;
    --ypp-dark-yellow: #ffca18;
}


/* =========================================================
   2. BODY DAN DASAR HALAMAN
========================================================= */

html[data-theme="dark"] body {
    color: var(--ypp-dark-text);

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(32, 185, 175, 0.09),
            transparent 28%
        ),
        radial-gradient(
            circle at 94% 35%,
            rgba(255, 190, 0, 0.045),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #031316 0%,
            #04191d 48%,
            #031216 100%
        );

    background-attachment: fixed;
}

html[data-theme="dark"] main {
    background: transparent;
}

html[data-theme="dark"] ::selection {
    color: #062b2e;
    background: #5be1d5;
}


/* Scrollbar */

html[data-theme="dark"] {
    scrollbar-color: #1f7f7a #061a1e;
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #061a1e;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    border: 3px solid #061a1e;
    border-radius: 999px;
    background: #1f7f7a;
}


/* =========================================================
   3. INPUT, TEXTAREA, DAN SELECT
========================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color: var(--ypp-dark-text) !important;

    border-color:
        var(--ypp-dark-border) !important;

    background:
        #0b292e !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #718d8d !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color:
        rgba(72, 213, 202, 0.55) !important;

    outline:
        3px solid rgba(72, 213, 202, 0.10);

    box-shadow:
        0 0 0 1px rgba(72, 213, 202, 0.15);
}


/* =========================================================
   4. HEADER
========================================================= */

html[data-theme="dark"] .site-header {
    background:
        rgba(3, 19, 22, 0.88) !important;

    border-color:
        rgba(122, 205, 199, 0.11) !important;

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);
}

html[data-theme="dark"] .site-header.scrolled {
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] .site-header .header-frame {
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .site-header .topbar {
    background:
        linear-gradient(
            105deg,
            #06333b 0%,
            #07525a 48%,
            #08655f 72%,
            #4a4816 100%
        ) !important;
}

html[data-theme="dark"] .site-header .nav-shell {
    border:
        1px solid rgba(122, 205, 199, 0.10);

    border-top: 0;

    background:
        linear-gradient(
            180deg,
            rgba(10, 40, 45, 0.98),
            rgba(5, 25, 29, 0.99)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}


/* Logo tetap menggunakan panel terang agar terbaca */

html[data-theme="dark"] .site-header .brand {
    border:
        1px solid rgba(255, 255, 255, 0.10);

    background:
        rgba(248, 252, 251, 0.97) !important;

    box-shadow:
        0 9px 24px rgba(0, 0, 0, 0.18);
}


/* Menu desktop */

html[data-theme="dark"]
.site-header .desktop-nav .nav-pill {
    color: #c0d5d3 !important;
}

html[data-theme="dark"]
.site-header .desktop-nav .nav-pill-icon {
    fill: #57cfc6 !important;
}

html[data-theme="dark"]
.site-header .desktop-nav .nav-pill:hover,

html[data-theme="dark"]
.site-header .desktop-nav .nav-pill:focus-visible {
    color: #ffffff !important;

    border-color:
        rgba(72, 213, 202, 0.18) !important;

    background:
        linear-gradient(
            145deg,
            #123a3f,
            #0b2b30
        ) !important;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"]
.site-header .desktop-nav .nav-pill.is-active {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #1bb0a6,
            #08767a 55%,
            #06505c
        ) !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.30),
        0 0 28px rgba(30, 183, 173, 0.12) !important;
}

html[data-theme="dark"]
.site-header .desktop-nav .nav-pill.is-active
.nav-pill-icon {
    fill: var(--ypp-dark-yellow) !important;
}


/* Tombol tema dan bahasa */

html[data-theme="dark"]
.site-header .nav-actions .icon-button {
    color: #d9efed !important;

    border-color:
        rgba(72, 213, 202, 0.17) !important;

    background:
        linear-gradient(
            145deg,
            #12373c,
            #09262b
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 8px 20px rgba(0, 0, 0, 0.20) !important;
}

html[data-theme="dark"]
.site-header .nav-actions .icon-button:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            #1bb0a6,
            #08666f
        ) !important;
}

html[data-theme="dark"]
.site-header .language-button-disabled {
    opacity: 0.55 !important;
}


/* Dropdown lembaga */

html[data-theme="dark"]
.site-header .mega-menu {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        linear-gradient(
            155deg,
            #0d3035,
            #071f24
        ) !important;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.48) !important;
}

html[data-theme="dark"]
.site-header .mega-menu a {
    color: #b8cfcd;
}

html[data-theme="dark"]
.site-header .mega-menu a:hover {
    color: #ffffff !important;

    background:
        #12383d !important;
}


/* Menu mobile */

@media (max-width: 1120px) {

    html[data-theme="dark"]
    .site-header .mobile-toggle {
        color: #d7ecea !important;

        border-color:
            var(--ypp-dark-border) !important;

        background:
            #0d2d32 !important;
    }

    html[data-theme="dark"]
    .site-header .mobile-panel {
        color: var(--ypp-dark-text);

        border-top-color:
            var(--ypp-dark-border) !important;

        background:
            linear-gradient(
                180deg,
                #09272c,
                #05191d
            ) !important;

        box-shadow:
            0 24px 50px rgba(0, 0, 0, 0.42);
    }

    html[data-theme="dark"]
    .site-header .mobile-panel a,

    html[data-theme="dark"]
    .site-header .mobile-panel summary {
        color: #c5d9d7;
    }

}


/* =========================================================
   5. BERANDA
========================================================= */

html[data-theme="dark"] .dm-program-section,
html[data-theme="dark"] .dm-news-section {
    background: transparent !important;
}

html[data-theme="dark"] .dm-program-head h2,
html[data-theme="dark"] .dm-news-head h2,
html[data-theme="dark"] .dm-news-side h3 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .dm-news-head p {
    color: var(--ypp-dark-muted) !important;
}


/* Kartu program beranda */

html[data-theme="dark"] .dm-program-card {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(72, 213, 202, 0.09),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #0d3035,
            #071f24
        ) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html[data-theme="dark"] .dm-program-card:hover {
    border-color:
        rgba(72, 213, 202, 0.30) !important;

    background:
        linear-gradient(
            145deg,
            #123b40,
            #09282d
        ) !important;

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.38),
        0 0 30px rgba(32, 185, 175, 0.07) !important;
}

html[data-theme="dark"] .dm-program-info h3,
html[data-theme="dark"] .dm-program-card h3 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .dm-program-info p,
html[data-theme="dark"] .dm-program-card p {
    color: var(--ypp-dark-muted) !important;
}

html[data-theme="dark"] .dm-program-number {
    color: var(--ypp-dark-yellow);

    border-color:
        rgba(72, 213, 202, 0.18) !important;

    background:
        #12343a !important;
}


/* Berita di beranda */

html[data-theme="dark"] .dm-news-side,
html[data-theme="dark"] .dm-news-card {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        linear-gradient(
            145deg,
            #0d2e33,
            #071f24
        ) !important;

    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.27) !important;
}

html[data-theme="dark"] .dm-side-item {
    border-color:
        rgba(122, 205, 199, 0.11) !important;
}

html[data-theme="dark"] .dm-side-item h4,
html[data-theme="dark"] .dm-news-card h4 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .dm-side-item small,
html[data-theme="dark"] .dm-news-card p {
    color: var(--ypp-dark-muted) !important;
}


/* Banner penerimaan */

html[data-theme="dark"] .dm-admission-box {
    border:
        1px solid rgba(72, 213, 202, 0.19);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 202, 24, 0.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0b7774,
            #06444e 58%,
            #032b35
        ) !important;

    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.38) !important;
}


/* =========================================================
   6. HALAMAN PROFIL
========================================================= */

html[data-theme="dark"] .pp-page {
    color: var(--ypp-dark-text);

    background: transparent !important;
}

html[data-theme="dark"] .pp-statistics-inner,
html[data-theme="dark"] .pp-history,
html[data-theme="dark"] .pp-mission,
html[data-theme="dark"] .pp-organization,
html[data-theme="dark"] .pp-legality {
    border-color:
        var(--ypp-dark-border) !important;

    background:
        linear-gradient(
            180deg,
            rgba(8, 34, 39, 0.96),
            rgba(5, 24, 28, 0.98)
        ) !important;
}

html[data-theme="dark"] .pp-history-intro,
html[data-theme="dark"] .pp-history-item,
html[data-theme="dark"] .pp-org-card,
html[data-theme="dark"] .pp-legal-grid article,
html[data-theme="dark"] .pp-mission-grid article {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(72, 213, 202, 0.065),
            transparent 38%
        ),
        var(--ypp-dark-panel) !important;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.20);
}

html[data-theme="dark"] .pp-vision {
    border-color:
        rgba(72, 213, 202, 0.16) !important;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(72, 213, 202, 0.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0a5558,
            #07333d
        ) !important;
}

html[data-theme="dark"] .pp-section-heading h2,
html[data-theme="dark"] .pp-history-intro h2,
html[data-theme="dark"] .pp-history-item h3,
html[data-theme="dark"] .pp-org-card strong,
html[data-theme="dark"] .pp-legal-grid h3 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .pp-history-intro p,
html[data-theme="dark"] .pp-history-item p,
html[data-theme="dark"] .pp-org-card span,
html[data-theme="dark"] .pp-legal-grid p {
    color: var(--ypp-dark-muted) !important;
}


/* =========================================================
   7. HALAMAN LEMBAGA
========================================================= */

html[data-theme="dark"] .institutions-directory,
html[data-theme="dark"] .institutions-extra-section {
    background: transparent !important;
}

html[data-theme="dark"] .institutions-toolbar,
html[data-theme="dark"] .institution-card-premium,
html[data-theme="dark"] .institutions-extra-card {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(72, 213, 202, 0.075),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0d2e33,
            #071f24
        ) !important;

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .institution-card-premium:hover,
html[data-theme="dark"] .institutions-extra-card:hover {
    border-color:
        rgba(72, 213, 202, 0.32) !important;

    background:
        linear-gradient(
            145deg,
            #123a40,
            #09272c
        ) !important;

    box-shadow:
        0 27px 60px rgba(0, 0, 0, 0.36) !important;
}

html[data-theme="dark"] .institutions-section-heading h2,
html[data-theme="dark"] .institution-card-premium h2,
html[data-theme="dark"] .institutions-extra-card h3 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .institutions-section-heading p,
html[data-theme="dark"] .institution-card-premium p,
html[data-theme="dark"] .institutions-extra-card p {
    color: var(--ypp-dark-muted) !important;
}

html[data-theme="dark"] .institutions-search-box {
    border-color:
        var(--ypp-dark-border) !important;

    background:
        #0b292e !important;
}

html[data-theme="dark"] .institutions-filter-pill {
    color: #bfd4d2;

    border-color:
        var(--ypp-dark-border) !important;

    background:
        #0b292e !important;
}

html[data-theme="dark"] .institutions-filter-pill:hover,
html[data-theme="dark"] .institutions-filter-pill.active {
    color: #ffffff !important;

    border-color:
        rgba(72, 213, 202, 0.35) !important;

    background:
        #12625f !important;
}


/* Logo lembaga tetap terang */

html[data-theme="dark"] .institution-card-logo,
html[data-theme="dark"] .institutions-visual-logo {
    background:
        rgba(248, 252, 251, 0.96) !important;
}


/* =========================================================
   8. DETAIL LEMBAGA
========================================================= */

html[data-theme="dark"] .unit-detail-content,
html[data-theme="dark"] .unit-detail-related,
html[data-theme="dark"] .unit-detail-admission {
    background: transparent !important;
}

html[data-theme="dark"] .unit-detail-card,
html[data-theme="dark"] .unit-detail-related-card,
html[data-theme="dark"] .unit-detail-contact-card {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(72, 213, 202, 0.065),
            transparent 38%
        ),
        var(--ypp-dark-panel) !important;

    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .unit-detail-welcome-card blockquote,
html[data-theme="dark"] .unit-detail-list-card li,
html[data-theme="dark"] .unit-detail-achievement-list > div,
html[data-theme="dark"] .unit-detail-profile-grid > div {
    color: #c6d8d7;

    border-color:
        var(--ypp-dark-border) !important;

    background:
        var(--ypp-dark-panel-2) !important;
}

html[data-theme="dark"] .unit-detail-card h2,
html[data-theme="dark"] .unit-detail-card h3,
html[data-theme="dark"] .unit-detail-related-card h3,
html[data-theme="dark"] .unit-detail-contact-title {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .unit-detail-card p,
html[data-theme="dark"] .unit-detail-related-card p {
    color: var(--ypp-dark-muted) !important;
}

html[data-theme="dark"] .unit-detail-related-logo,
html[data-theme="dark"] .unit-detail-contact-logo,
html[data-theme="dark"] .unit-detail-visual-logo {
    background:
        rgba(248, 252, 251, 0.96) !important;
}


/* =========================================================
   9. HALAMAN PROGRAM
========================================================= */

html[data-theme="dark"] .program-showcase-section,
html[data-theme="dark"] .program-method-section,
html[data-theme="dark"] .program-admission-section {
    background: transparent !important;
}

html[data-theme="dark"] .program-navigation-inner,
html[data-theme="dark"] .program-showcase-card,
html[data-theme="dark"] .program-method-shell,
html[data-theme="dark"] .program-admission-shell {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(72, 213, 202, 0.075),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0d2e33,
            #071f24
        ) !important;

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.27) !important;
}

html[data-theme="dark"] .program-feature-grid > div,
html[data-theme="dark"] .program-method-grid > article,
html[data-theme="dark"] .program-navigation nav a {
    color: #c9dcda;

    border-color:
        var(--ypp-dark-border) !important;

    background:
        var(--ypp-dark-panel-2) !important;
}

html[data-theme="dark"] .program-navigation nav a:hover {
    color: #ffffff;

    border-color:
        rgba(72, 213, 202, 0.35) !important;

    background:
        var(--ypp-dark-panel-hover) !important;
}

html[data-theme="dark"] .program-section-heading h2,
html[data-theme="dark"] .program-showcase-copy h2,
html[data-theme="dark"] .program-method-heading h2 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .program-section-heading p,
html[data-theme="dark"] .program-showcase-copy p,
html[data-theme="dark"] .program-method-heading p {
    color: var(--ypp-dark-muted) !important;
}


/* =========================================================
   10. SARANA PRASARANA
========================================================= */

html[data-theme="dark"] .facilities-directory,
html[data-theme="dark"] .facilities-standard-section,
html[data-theme="dark"] .facilities-location-section {
    background: transparent !important;
}

html[data-theme="dark"] .facilities-quick-inner,
html[data-theme="dark"] .facility-premium-card,
html[data-theme="dark"] .facilities-standard-shell,
html[data-theme="dark"] .facilities-location-shell {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(72, 213, 202, 0.07),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0d2e33,
            #071f24
        ) !important;

    box-shadow:
        0 21px 50px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .facility-premium-card:hover {
    border-color:
        rgba(72, 213, 202, 0.32) !important;

    background:
        linear-gradient(
            145deg,
            #123a40,
            #09272c
        ) !important;
}

html[data-theme="dark"] .facilities-quick-inner nav a,
html[data-theme="dark"] .facilities-location-address,
html[data-theme="dark"] .facilities-location-secondary,
html[data-theme="dark"] .facilities-standard-grid > article {
    color: #c8dcda;

    border-color:
        var(--ypp-dark-border) !important;

    background:
        var(--ypp-dark-panel-2) !important;
}

html[data-theme="dark"] .facilities-section-heading h2,
html[data-theme="dark"] .facility-card-content h3,
html[data-theme="dark"] .facilities-standard-heading h2,
html[data-theme="dark"] .facilities-location-content h2 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .facilities-section-heading p,
html[data-theme="dark"] .facility-card-content p,
html[data-theme="dark"] .facilities-location-content p {
    color: var(--ypp-dark-muted) !important;
}


/* =========================================================
   11. HALAMAN BERITA
========================================================= */

html[data-theme="dark"] .news-page-archive {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(72, 213, 202, 0.065),
            transparent 30%
        ),
        var(--ypp-dark-section) !important;
}

html[data-theme="dark"] .news-page-filter,
html[data-theme="dark"] .news-page-card,
html[data-theme="dark"] .news-page-empty,
html[data-theme="dark"] .news-page-single-note {
    color: var(--ypp-dark-text);

    border-color:
        var(--ypp-dark-border) !important;

    background:
        linear-gradient(
            145deg,
            #0d2e33,
            #071f24
        ) !important;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .news-page-filter__item {
    color: #bdd1cf !important;
}

html[data-theme="dark"] .news-page-filter__item:hover,
html[data-theme="dark"] .news-page-filter__item.is-active {
    color: #ffffff !important;

    border-color:
        rgba(72, 213, 202, 0.30) !important;

    background:
        var(--ypp-dark-panel-hover) !important;
}

html[data-theme="dark"] .news-page-card h2,
html[data-theme="dark"] .news-page-card h3,
html[data-theme="dark"] .news-page-archive__heading h2 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .news-page-card p,
html[data-theme="dark"] .news-page-card__meta,
html[data-theme="dark"] .news-page-result-bar {
    color: var(--ypp-dark-muted) !important;
}


/* =========================================================
   12. DETAIL BERITA
========================================================= */

html[data-theme="dark"] .editorial-news-detail {
    color: var(--ypp-dark-text);

    background: transparent !important;
}

html[data-theme="dark"] .editorial-news-shell,
html[data-theme="dark"] .editorial-article-main,
html[data-theme="dark"] .editorial-publisher-card,
html[data-theme="dark"] .editorial-related-sidebar {
    border-color:
        var(--ypp-dark-border) !important;

    background:
        linear-gradient(
            145deg,
            #0d2e33,
            #071f24
        ) !important;

    box-shadow:
        0 21px 52px rgba(0, 0, 0, 0.26) !important;
}

html[data-theme="dark"] .editorial-article-heading,
html[data-theme="dark"] .editorial-article-content h2,
html[data-theme="dark"] .editorial-article-content h3,
html[data-theme="dark"] .editorial-related-head h2,
html[data-theme="dark"] .editorial-related-item h3 {
    color: var(--ypp-dark-text) !important;
}

html[data-theme="dark"] .editorial-article-deck,
html[data-theme="dark"] .editorial-article-content,
html[data-theme="dark"] .editorial-article-content p,
html[data-theme="dark"] .editorial-article-content li,
html[data-theme="dark"] .editorial-related-item time {
    color: #b7ccca !important;
}

html[data-theme="dark"] .editorial-article-content blockquote {
    color: #d8e9e7;

    border-color:
        var(--ypp-dark-teal) !important;

    background:
        var(--ypp-dark-panel-2) !important;
}

html[data-theme="dark"] .editorial-related-item {
    border-color:
        var(--ypp-dark-border) !important;
}

html[data-theme="dark"] .editorial-share-rail a,
html[data-theme="dark"] .editorial-share-rail button {
    color: #d9ecea !important;

    border-color:
        var(--ypp-dark-border) !important;

    background:
        var(--ypp-dark-panel-2) !important;
}


/* =========================================================
   13. HALAMAN 404 DAN HERO UMUM
========================================================= */

html[data-theme="dark"] .page-hero {
    color: var(--ypp-dark-text);

    background: transparent;
}

html[data-theme="dark"] .page-hero .container {
    border-color:
        var(--ypp-dark-border);

    background:
        linear-gradient(
            145deg,
            #0d3035,
            #071f24
        );
}


/* =========================================================
   14. FOOTER
========================================================= */

html[data-theme="dark"] .dm-site-footer {
    background: transparent;
}

html[data-theme="dark"] .dm-footer-frame {
    border:
        1px solid rgba(92, 190, 183, 0.12);

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(72, 213, 202, 0.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 95% 18%,
            rgba(255, 202, 24, 0.075),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #052329,
            #03171b 58%,
            #020f13
        ) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .dm-footer-cta,
html[data-theme="dark"] .dm-footer-location {
    border-color:
        rgba(122, 205, 199, 0.14) !important;

    background:
        rgba(255, 255, 255, 0.035) !important;
}

html[data-theme="dark"] .dm-footer-social a,
html[data-theme="dark"] .dm-footer-contact-icon {
    border-color:
        rgba(122, 205, 199, 0.16) !important;

    background:
        rgba(72, 213, 202, 0.055) !important;
}


/* =========================================================
   15. TRANSISI PERGANTIAN TEMA
========================================================= */

@media (prefers-reduced-motion: no-preference) {

    body,
    .site-header,
    .site-header .nav-shell,
    .dm-program-card,
    .dm-news-side,
    .pp-history-item,
    .pp-org-card,
    .institution-card-premium,
    .unit-detail-card,
    .program-showcase-card,
    .facility-premium-card,
    .news-page-card,
    .editorial-article-main,
    .dm-footer-frame {
        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;
    }

}

/* Logo yayasan pada seluruh kartu lembaga di landing page */
.dm-card-logo {
    width: 36px;
    height: 36px;
    padding: 4px;

    background: rgba(255, 255, 255, 0.9) !important;
}

.dm-card-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}