:root {
    --bidang-primary: #0d6efd;
    --bidang-primary-dark: #0a4fb3;
    --bidang-secondary: #eaf3ff;
    --bidang-text: #17324d;
    --bidang-muted: #6d8095;
    --bidang-surface: #ffffff;
    --bidang-border: rgba(13, 110, 253, 0.14);
    --bidang-shadow: 0 18px 45px rgba(13, 55, 115, 0.12);
}

.bidang-page {
    color: var(--bidang-text);
    background:
        radial-gradient(circle at top left, rgba(124, 196, 255, 0.22), transparent 34%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 42%, #f5f9ff 100%);
}

.bidang-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 80px;
    background: linear-gradient(135deg, #0a58ca 0%, #0f7bf4 58%, #d9ebff 100%);
}

.bidang-hero::before,
.bidang-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.bidang-hero::before {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -70px;
}

.bidang-hero::after {
    width: 220px;
    height: 220px;
    bottom: -90px;
    left: -40px;
}

.bidang-hero__content,
.bidang-hero__visual {
    position: relative;
    z-index: 1;
}

.bidang-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.bidang-hero h1 {
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.12;
}

.bidang-hero p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    line-height: 1.8;
    max-width: 650px;
}

.bidang-breadcrumb {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bidang-breadcrumb li,
.bidang-breadcrumb a {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
}

.bidang-hero__card {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(12px);
    border-radius: 28px;
    padding: 28px;
    box-shadow: var(--bidang-shadow);
}

.bidang-hero__card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 22px;
}

.bidang-hero__meta {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bidang-meta-box {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 16px 18px;
    color: #fff;
}

.bidang-meta-box strong {
    display: block;
    font-size: 1.35rem;
}

.bidang-section {
    padding: 80px 0;
}

.bidang-section--tight {
    padding-top: 40px;
}

.bidang-heading {
    max-width: 720px;
    margin-bottom: 38px;
}

.bidang-heading span {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bidang-primary);
}

.bidang-heading h2 {
    margin-bottom: 12px;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    color: var(--bidang-text);
}

.bidang-heading p,
.gallery-card__body p,
.facility-card__body p,
.story-card__body p,
.timeline-card p {
    margin: 0;
    color: var(--bidang-muted);
    line-height: 1.75;
}

.bidang-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bidang-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--bidang-border);
    box-shadow: 0 10px 30px rgba(13, 55, 115, 0.08);
    color: var(--bidang-text);
    font-weight: 600;
}

.bidang-panel,
.bidang-card,
.timeline-card,
.facility-card,
.story-card,
.gallery-card {
    background: var(--bidang-surface);
    border: 1px solid var(--bidang-border);
    border-radius: 26px;
    box-shadow: var(--bidang-shadow);
}

.bidang-accordion .accordion-item {
    margin-bottom: 18px;
    border: 1px solid var(--bidang-border);
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 30px rgba(13, 55, 115, 0.08);
}

.bidang-accordion .accordion-button {
    background: transparent;
    color: var(--bidang-text);
    font-weight: 800;
    padding: 24px 26px;
    box-shadow: none;
}

.bidang-accordion .accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, rgba(13, 110, 253, 0.08), rgba(13, 110, 253, 0.02));
    color: var(--bidang-primary-dark);
}

.bidang-accordion .accordion-body {
    padding: 0 26px 26px;
}

.program-grid,
.facility-grid,
.gallery-grid,
.story-grid {
    display: grid;
    gap: 24px;
}

.program-grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
}

.program-media img,
.facility-card img,
.story-card img,
.gallery-card img,
.bidang-card img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.program-media img {
    height: 290px;
    border-radius: 22px;
}

.program-list {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.program-list article {
    padding: 16px 18px;
    background: var(--bidang-secondary);
    border-radius: 18px;
}

.program-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.program-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--bidang-primary), #6db6ff);
    color: #fff;
    font-size: 20px;
}

.calendar-list {
    display: grid;
    gap: 18px;
}

.calendar-list article {
    padding: 22px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--bidang-border);
}

.calendar-list span,
.story-meta span,
.timeline-step {
    color: var(--bidang-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.slider-shell {
    position: relative;
}

.slider-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 20px;
}

.slider-btn {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--bidang-primary);
    box-shadow: 0 12px 24px rgba(13, 55, 115, 0.12);
    transition: transform 0.25s ease, background 0.25s ease;
}

.slider-btn:hover {
    transform: translateY(-2px);
    background: var(--bidang-secondary);
}

.slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.bidang-card,
.facility-card,
.story-card,
.gallery-card {
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bidang-card:hover,
.facility-card:hover,
.story-card:hover,
.gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(13, 55, 115, 0.16);
}

.bidang-card img,
.story-card img {
    height: 220px;
}

.bidang-card__body,
.facility-card__body,
.story-card__body,
.gallery-card__body {
    padding: 24px;
}

.entry-list,
.story-points {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.entry-list li,
.story-points li {
    color: var(--bidang-muted);
}

.entry-list li i,
.story-points li i {
    color: var(--bidang-primary);
    margin-right: 8px;
}

.gallery-grid,
.facility-grid,
.story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-card img {
    height: 240px;
}

.facility-card img {
    height: 230px;
}

.facility-meta,
.story-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.facility-meta span,
.story-meta span {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bidang-secondary);
}

.timeline-wrap {
    position: relative;
    display: grid;
    gap: 22px;
}

.timeline-wrap::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(180deg, var(--bidang-primary), rgba(13, 110, 253, 0.08));
}

.timeline-card {
    position: relative;
    margin-left: 56px;
    padding: 22px 24px;
}

.timeline-card::before {
    content: "";
    position: absolute;
    left: -46px;
    top: 26px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: var(--bidang-primary);
    box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.14);
}

.bidang-cta {
    padding: 34px;
    border-radius: 30px;
    background: linear-gradient(135deg, #0b5ed7, #57a6ff);
    color: #fff;
}

.bidang-cta h3,
.bidang-cta p {
    color: #fff;
}

.bidang-cta .theme-btn,
.bidang-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 700;
}

.bidang-outline-btn {
    border: 1px solid var(--bidang-border);
    color: var(--bidang-primary);
    background: #fff;
}

@media (max-width: 991.98px) {
    .bidang-hero {
        padding-top: 90px;
    }

    .program-grid,
    .gallery-grid,
    .facility-grid,
    .story-grid {
        grid-template-columns: 1fr;
    }

    .bidang-hero__meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .bidang-hero {
        padding: 80px 0 60px;
    }

    .bidang-section {
        padding: 60px 0;
    }

    .bidang-hero__card {
        padding: 18px;
    }

    .bidang-hero__card img,
    .program-media img,
    .bidang-card img,
    .story-card img,
    .facility-card img,
    .gallery-card img {
        height: 220px;
    }

    .bidang-hero__meta {
        grid-template-columns: 1fr;
    }

    .timeline-card {
        margin-left: 42px;
    }

    .timeline-card::before {
        left: -33px;
    }

    .timeline-wrap::before {
        left: 14px;
    }
}

body.drak-mode .bidang-page {
    background:
        radial-gradient(circle at top left, rgba(87, 166, 255, 0.12), transparent 34%),
        linear-gradient(180deg, #101826 0%, #0c121d 42%, #121c2b 100%);
}

body.drak-mode .bidang-hero {
    background: linear-gradient(135deg, #0b1730 0%, #12345b 58%, #1d4f85 100%);
}

body.drak-mode .bidang-card,
body.drak-mode .facility-card,
body.drak-mode .story-card,
body.drak-mode .gallery-card,
body.drak-mode .timeline-card,
body.drak-mode .calendar-list article,
body.drak-mode .bidang-chip,
body.drak-mode .bidang-accordion .accordion-item {
    background: #141c28;
    border-color: #29384c;
}

body.drak-mode .program-list article,
body.drak-mode .facility-meta span,
body.drak-mode .story-meta span,
body.drak-mode .slider-btn,
body.drak-mode .bidang-outline-btn {
    background: #1a2534;
    border-color: #31455f;
}

body.drak-mode .bidang-heading h2,
body.drak-mode .program-list h4,
body.drak-mode .facility-card h3,
body.drak-mode .story-card h3,
body.drak-mode .timeline-card h4,
body.drak-mode .gallery-card h4,
body.drak-mode .accordion-button,
body.drak-mode .bidang-chip,
body.drak-mode .bidang-outline-btn {
    color: #f3f7ff;
}

body.drak-mode .bidang-heading p,
body.drak-mode .facility-card__body p,
body.drak-mode .story-card__body p,
body.drak-mode .gallery-card__body p,
body.drak-mode .timeline-card p,
body.drak-mode .entry-list li,
body.drak-mode .story-points li,
body.drak-mode .text-muted {
    color: #b4c2d3 !important;
}