/* ===============================
   BIDANG HEADER
================================= */

.bidang-header {
    position: relative;

    padding: 90px 0 70px;

    overflow: hidden;

    background: linear-gradient(135deg, #f8f3ff 0%, #ffffff 45%, #fffaf1 100%);
}

/* glow background */
.bidang-header::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -120px;
    right: -120px;

    border-radius: 50%;

    background: rgba(94, 25, 146, 0.08);

    filter: blur(10px);
}

.bidang-header::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    bottom: -120px;
    left: -120px;

    border-radius: 50%;

    background: rgba(239, 167, 53, 0.08);

    filter: blur(10px);
}

/* wrapper */
.bidang-header-box {
    position: relative;
    z-index: 2;

    max-width: 860px;
    margin: 0 auto;
}

/* label */
.bidang-label {
    display: inline-block;

    padding: 7px 18px;

    border-radius: 30px;

    background: rgba(94, 25, 146, 0.08);

    color: #5e1992;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.5px;
}

/* title */
.bidang-title {
    margin-top: 22px;

    font-size: 3rem;
    font-weight: 800;

    line-height: 1.2;

    color: #3d105f;
}

/* subtitle */
.bidang-subtitle {
    max-width: 700px;

    margin: 20px auto 0;

    color: #666;

    line-height: 1.9;

    font-size: 1rem;
}

/* mini info */
.bidang-mini-info {
    display: flex;
    justify-content: center;
    gap: 18px;

    margin-top: 34px;

    flex-wrap: wrap;
}

.mini-box {
    min-width: 120px;

    padding: 16px 20px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid rgba(94, 25, 146, 0.08);

    backdrop-filter: blur(10px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.mini-box strong {
    display: block;

    font-size: 1.4rem;
    font-weight: 800;

    color: #5e1992;
}

.mini-box span {
    font-size: 0.82rem;
    color: #777;
}

@media (max-width: 768px) {
    .bidang-header {
        padding: 70px 0 55px;
    }

    .bidang-title {
        font-size: 2rem;
        line-height: 1.3;
    }

    .bidang-subtitle {
        font-size: 0.92rem;
        line-height: 1.8;

        padding: 0 10px;
    }

    .bidang-mini-info {
        gap: 12px;
    }

    .mini-box {
        min-width: 95px;

        padding: 14px 16px;
    }

    .mini-box strong {
        font-size: 1.15rem;
    }
}

/* ===============================
   FADE UP
================================= */

.fade-up {
    opacity: 0;
    transform: translateY(30px);

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

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* mini box smooth */
.mini-box {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ===============================
   AGENDA SECTION
================================= */

.agenda-section {
    background: #fff;
}

/* ===============================
   CARD
================================= */

.agenda-card {
    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid rgba(94, 25, 146, 0.08);

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

.agenda-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
}

/* image */
.agenda-image-wrap {
    position: relative;
    overflow: hidden;
}

.agenda-image {
    width: 100%;
    height: 240px;

    object-fit: cover;

    transition: 0.4s ease;
}

.agenda-card:hover .agenda-image {
    transform: scale(1.05);
}

/* date */
.agenda-date {
    position: absolute;

    top: 16px;
    left: 16px;

    width: 68px;
    height: 68px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(8px);

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

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.agenda-day {
    font-size: 1.3rem;
    font-weight: 800;

    color: #5e1992;

    line-height: 1;
}

.agenda-month {
    font-size: 0.72rem;
    font-weight: 700;

    color: #777;

    margin-top: 4px;
}

/* content */
.agenda-content {
    padding: 24px;
}

.agenda-title {
    font-size: 1.05rem;
    font-weight: 700;

    color: #3d105f;

    line-height: 1.5;
}

.agenda-desc {
    margin-top: 12px;

    color: #666;

    line-height: 1.7;

    font-size: 0.92rem;
}

/* button */
.agenda-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 18px;

    padding: 10px 18px;

    border-radius: 12px;

    background: #5e1992;
    color: white;

    text-decoration: none;

    font-size: 0.85rem;
    font-weight: 600;

    transition: 0.25s ease;
}

.agenda-btn:hover {
    background: #491172;
    color: white;
}

/* empty */

@media (max-width: 768px) {
    .agenda-count-box {
        width: 100%;
    }

    .agenda-image {
        height: 220px;
    }

    .agenda-content {
        padding: 20px;
    }
}

/* ===============================
   ARTIKEL SECTION
================================= */

.artikel-section {
    background: #fff;
}

/* count */
.artikel-count-box {
    min-width: 150px;

    padding: 18px 22px;

    border-radius: 18px;

    background: linear-gradient(135deg, #3d105f, #6f2ea8);

    color: white;

    text-align: center;

    box-shadow: 0 10px 24px rgba(61, 16, 95, 0.2);
}

.artikel-count-box strong {
    display: block;

    font-size: 1.7rem;
    font-weight: 800;
}

.artikel-count-box span {
    font-size: 0.82rem;
    opacity: 0.92;
}

/* ===============================
   CARD
================================= */

.artikel-card {
    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid rgba(94, 25, 146, 0.08);

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

.artikel-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
}

/* image */
.artikel-image-wrap {
    overflow: hidden;
}

.artikel-image {
    width: 100%;
    height: 250px;

    object-fit: cover;

    transition: 0.45s ease;
}

.artikel-card:hover .artikel-image {
    transform: scale(1.06);
}

/* content */
.artikel-content {
    padding: 26px;
}

/* meta */
.artikel-meta {
    margin-bottom: 12px;

    font-size: 0.75rem;
    font-weight: 700;

    color: #8b6ca6;

    letter-spacing: 0.5px;
}

/* title */
.artikel-title {
    font-size: 1.08rem;
    font-weight: 700;

    color: #3d105f;

    line-height: 1.6;
}

/* desc */
.artikel-desc {
    margin-top: 14px;

    color: #666;

    line-height: 1.8;

    font-size: 0.92rem;
}

/* button */
.artikel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 20px;

    padding: 10px 18px;

    border-radius: 12px;

    background: #3d105f;
    color: white;

    text-decoration: none;

    font-size: 0.85rem;
    font-weight: 600;

    transition: 0.25s ease;
}

.artikel-btn:hover {
    background: #2b0a45;
    color: white;
}

/* empty */

@media (max-width: 768px) {
    .artikel-count-box {
        width: 100%;
    }

    .artikel-image {
        height: 220px;
    }

    .artikel-content {
        padding: 20px;
    }
}

/* ===============================
   NEWS SECTION
================================= */

.news-section {
    background: linear-gradient(180deg, #faf8ff 0%, #ffffff 100%);
}

/* ===============================
   HEADLINE
================================= */

.headline-news {
    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid rgba(94, 25, 146, 0.08);

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

.headline-news:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
}

/* image */
.headline-image-wrap {
    position: relative;
    overflow: hidden;
}

.headline-image {
    width: 100%;
    height: 280px;

    object-fit: cover;

    transition: 0.45s ease;
}

.headline-news:hover .headline-image {
    transform: scale(1.05);
}

/* overlay */
.headline-overlay {
    position: absolute;
    inset: 0;

    padding: 24px;

    display: flex;
    align-items: start;
    justify-content: start;
}

.headline-badge {
    padding: 7px 16px;

    border-radius: 30px;

    background: rgba(255, 255, 255, 0.92);

    color: #d88f1b;

    font-size: 0.78rem;
    font-weight: 700;
}

/* content */
.headline-content {
    padding: 24px;
}

.headline-date {
    font-size: 0.82rem;
    font-weight: 700;

    color: #8b6ca6;
}

.headline-title {
    margin-top: 12px;

    font-size: 1.35rem;
    font-weight: 800;

    color: #3d105f;

    line-height: 1.5;
}

.headline-desc {
    margin-top: 14px;

    color: #666;

    line-height: 1.8;

    font-size: 0.92rem;
}

/* button */
.headline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 22px;

    padding: 12px 20px;

    border-radius: 14px;

    background: #efa735;
    color: white;

    text-decoration: none;

    font-size: 0.88rem;
    font-weight: 600;

    transition: 0.25s;
}

.headline-btn:hover {
    background: #d88f1b;
    color: white;
}

/* ===============================
   SIDE NEWS
================================= */

.side-news-item {
    display: flex;
    gap: 14px;

    background: white;

    padding: 14px;

    border-radius: 18px;

    border: 1px solid rgba(94, 25, 146, 0.08);

    transition: 0.25s ease;
}

.side-news-title {
    margin-top: 8px;

    font-size: 0.95rem;
    font-weight: 700;

    line-height: 1.5;

    color: #3d105f;
}

/* image */
.side-news-image-wrap {
    width: 140px;
    height: 120px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 16px;
}

.side-news-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.4s ease;
}

.side-news-item:hover .side-news-image {
    transform: scale(1.05);
}

/* content */
.side-news-date {
    font-size: 0.75rem;
    font-weight: 700;

    color: #8b6ca6;
}

.side-news-title {
    margin-top: 10px;

    font-size: 1rem;
    font-weight: 700;

    line-height: 1.5;

    color: #3d105f;
}

.side-news-link {
    display: inline-block;

    margin-top: 10px;

    color: #efa735;

    font-size: 0.85rem;
    font-weight: 700;

    text-decoration: none;
}

/* empty */

.news-count-box {
    min-width: 150px;

    padding: 18px 22px;

    border-radius: 18px;

    background: linear-gradient(135deg, #efa735, #ffbf57);

    color: white;

    text-align: center;

    box-shadow: 0 10px 24px rgba(239, 167, 53, 0.18);
}

.news-count-box strong {
    display: block;

    font-size: 1.6rem;
    font-weight: 800;
}

.news-count-box span {
    font-size: 0.82rem;
}

@media (max-width: 768px) {
    .news-count-box {
        width: 100%;
    }

    .headline-image {
        height: 220px;
    }

    .headline-content {
        padding: 20px;
    }

    .headline-title {
        font-size: 1.15rem;
    }

    .side-news-item {
        flex-direction: column;
    }

    .side-news-image-wrap {
        width: 100%;
        height: 200px;
    }
}

.section-header {
    margin-bottom: 3rem;
}

.section-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.08);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.section-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1d1d1d;
}

.section-subtitle {
    color: #6c757d;
    max-width: 650px;
    line-height: 1.7;
}

.section-label.agenda {
    background: rgba(94, 25, 146, 0.08);
    color: #5e1992;
}

.section-label.news {
    background: rgba(239, 167, 53, 0.12);
    color: #d88f1b;
}

.section-label.artikel {
    background: rgba(61, 16, 95, 0.08);
    color: #3d105f;
}

.base-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(94, 25, 146, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.base-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
}

.container {
    max-width: 1200px;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===============================
   EMPTY STATE
================================= */

.section-empty {
    padding: 50px;

    border-radius: 24px;

    background: white;

    border: 1px dashed rgba(94, 25, 146, 0.15);

    text-align: center;
}

.section-empty h5 {
    font-size: 1.1rem;
    font-weight: 700;

    color: #3d105f;

    margin-bottom: 10px;
}

.section-empty p {
    color: #777;

    margin-bottom: 0;
}

/* ===============================
   GLOBAL RESPONSIVE
================================= */

@media (max-width: 768px) {
    /* section */
    .section-header {
        margin-bottom: 2rem;
    }

    .section-heading {
        font-size: 1.5rem;
        line-height: 1.4;
    }

    .section-subtitle {
        font-size: 0.92rem;
        line-height: 1.8;
    }

    /* empty state */
    .section-empty {
        padding: 35px 20px;
        border-radius: 20px;
    }

    .section-empty h5 {
        font-size: 1rem;
    }

    .section-empty p {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    /* cards */
    .agenda-card,
    .artikel-card,
    .headline-news {
        border-radius: 20px;
    }

    /* image */
    .agenda-image,
    .artikel-image,
    .headline-image {
        height: 220px;
    }

    /* content */
    .agenda-content,
    .artikel-content,
    .headline-content {
        padding: 20px;
    }

    /* title */
    .agenda-title,
    .artikel-title,
    .headline-title {
        line-height: 1.5;
    }

    /* button */
    .agenda-btn,
    .artikel-btn,
    .headline-btn {
        width: 100%;
    }

    /* side news */
    .side-news-item {
        flex-direction: column;
    }

    .side-news-image-wrap {
        width: 100%;
        height: 200px;
    }
}

/* =========================================================
   THEME SYSTEM
========================================================= */

/* =========================================================
   1. PARIWISATA
========================================================= */

.theme-pariwisata {
    --primary: #5e1992;
    --primary-dark: #491172;

    --secondary: #efa735;
    --secondary-dark: #d88f1b;

    --soft: rgba(94, 25, 146, 0.08);

    --title: #3d105f;

    --bg-gradient: linear-gradient(
        135deg,
        #f8f3ff 0%,
        #ffffff 45%,
        #fffaf1 100%
    );

    --glow-1: rgba(94, 25, 146, 0.08);
    --glow-2: rgba(239, 167, 53, 0.08);
}

/* =========================================================
   2. KEPEMUDAAN
========================================================= */

.theme-kepemudaan {
    --primary: #0d6efd;
    --primary-dark: #0b57ca;

    --secondary: #4ea8ff;
    --secondary-dark: #2684e8;

    --soft: rgba(13, 110, 253, 0.08);

    --title: #0a3d91;

    --bg-gradient: linear-gradient(
        135deg,
        #f2f7ff 0%,
        #ffffff 50%,
        #eef6ff 100%
    );

    --glow-1: rgba(13, 110, 253, 0.08);
    --glow-2: rgba(78, 168, 255, 0.08);
}

/* =========================================================
   3. OLAHRAGA
========================================================= */

.theme-olahraga {
    --primary: #198754;
    --primary-dark: #146c43;

    --secondary: #3ac47d;
    --secondary-dark: #28a864;

    --soft: rgba(25, 135, 84, 0.08);

    --title: #145c39;

    --bg-gradient: linear-gradient(
        135deg,
        #f3fff8 0%,
        #ffffff 50%,
        #f1fff7 100%
    );

    --glow-1: rgba(25, 135, 84, 0.08);
    --glow-2: rgba(58, 196, 125, 0.08);
}

/* =========================================================
   4. KEBUDAYAAN
========================================================= */

.theme-kebudayaan {
    --primary: #8b1e3f;
    --primary-dark: #6f1832;

    --secondary: #c97b63;
    --secondary-dark: #a65f49;

    --soft: rgba(139, 30, 63, 0.08);

    --title: #5f142b;

    --bg-gradient: linear-gradient(
        135deg,
        #fff7f8 0%,
        #ffffff 50%,
        #fff5f2 100%
    );

    --glow-1: rgba(139, 30, 63, 0.08);
    --glow-2: rgba(201, 123, 99, 0.08);
}

/* =========================================================
   GLOBAL
========================================================= */

.section-label {
    background: var(--soft);
    color: var(--primary);
}

.section-heading {
    color: var(--title);
}

.bidang-header {
    background: var(--bg-gradient);
}

.bidang-header::before {
    background: var(--glow-1);
}

.bidang-header::after {
    background: var(--glow-2);
}

.bidang-title {
    color: var(--title);
}

.bidang-label {
    background: var(--soft);
    color: var(--primary);
}

.mini-box strong {
    color: var(--primary);
}

/* =========================================================
   BUTTON
========================================================= */

.agenda-btn,
.artikel-btn,
.headline-btn {
    background: var(--primary);
    color: white;
}

.agenda-btn:hover,
.artikel-btn:hover,
.headline-btn:hover {
    background: var(--primary-dark);
    color: white;
}

/* =========================================================
   CARD TITLE
========================================================= */

.agenda-title,
.artikel-title,
.headline-title,
.side-news-title {
    color: var(--title);
}

/* =========================================================
   CARD BORDER
========================================================= */

.agenda-card,
.artikel-card,
.headline-news,
.side-news-item {
    border: 1px solid var(--soft);
}

/* =========================================================
   DATE
========================================================= */

.agenda-day,
.headline-date,
.side-news-date,
.artikel-meta {
    color: var(--primary);
}

.theme-kebudayaan {
    overflow-x: hidden;
}