/* CONFIGURATION & SOFT GRADIENT BACKGROUND */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    /* Gradasi putih ke biru ultra tipis di sisi kanan sesuai request */
    background: linear-gradient(120deg, #ffffff 55%, #e0f2fe 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

/* NAVBAR UTAMA (Isolated di atas, murni di luar banner) */
.main-navbar {
    position: relative;
    width: 100%;
    background: transparent;
    padding: 18px 5%;
    z-index: 1000;
    /* Transisi performa tinggi menggunakan easing cubic-bezier & hardware acceleration */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s ease, 
                background 0.5s ease, 
                padding 0.5s ease;
    will-change: transform, opacity, position;
}

.nav-container{
    max-width:1200px;
    margin:0 auto;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:20px;
}

.desktop-menu{
    display:flex;
    justify-content:center;
    gap:35px;
}
/* Logo Setup */
.logo-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-box img {
    height: 50px;
    width: auto;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.logo-text-sticky {
    font-weight: 800;
    font-size: 13px;
    color: #0369a1;
    letter-spacing: 1px;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Menu Nav links (Teks Gelap karena background atas putih solid) */
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
}

.nav-item {
    text-decoration: none;
    color: #475569;
    font-weight: 600;
    font-size: 15px;
    padding: 6px 0;
    position: relative;
    transition: color 0.3s ease;
}

.nav-item:hover, .nav-item.active {
    color: #0ea5e9;
}


/* FASE JEDA: Di-hide dulu sementara dan diposisikan siap meluncur dari kanan */
.main-navbar.hide-before-sticky {
    position: fixed;
    top: 20px;
    left: 50%;
    /* Bergeser ke kanan jauh luar layar + tidak terlihat */
    transform: translateX(100%) scale(0.95); 
    opacity: 0;
    pointer-events: none; /* Biar tidak memblokir interaksi klik saat ga keliatan */
}

/* FASE STICKY CAPSULE: Meluncur masuk dengan super smooth ke tengah atas */
.main-navbar.sticky-capsule {
    position: fixed;
    top: 20px;
    left: 50%;
    /* Meluncur masuk pas ke posisi tengah layar */
    transform: translateX(-50%) scale(0.98); 
    opacity: 1;
    pointer-events: auto;
    width: 90%;
    max-width: 1100px;
    border-radius: 100px; 
    padding: 10px 30px;
    /* Gradasi Biru-Putih Lembut Transparan */
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.9) 0%, rgba(255, 255, 255, 0.94) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.18);
}

/* Penyesuaian Komponen Dalam Kapsul Saat Sticky */
.main-navbar.sticky-capsule .logo-box img {
    height: 34px; 
}

.main-navbar.sticky-capsule .logo-text-sticky {
    opacity: 1;
    max-width: 200px;
    margin-right: 5px;
}

.main-navbar.sticky-capsule .nav-item {
    color: #334155;
}

.main-navbar.sticky-capsule .nav-item:hover,
.main-navbar.sticky-capsule .nav-item.active {
    color: #0284c7;
    font-weight: 700;
}


/* DROPDOWN LANGUAGE PICKER (Keren dengan Bendera) */
.custom-dropdown {
    position: relative;
    width: 145px;
    user-select: none;
}

.dropdown-selected {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 10px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s ease;
}

.dropdown-selected:hover {
    background: #e2e8f0;
}

.flag-img-element {
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    object-fit: cover;
}

/* Penyesuaian tombol bahasa di dalam kapsul sticky */
.main-navbar.sticky-capsule .dropdown-selected {
    background: #e0f2fe;
    color: #0369a1;
    border-color: rgba(3, 105, 161, 0.15);
}

.lang-text {
    flex-grow: 1;
}

.arrow-icon {
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* Options Box Container */
.dropdown-options {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 180px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
    padding: 8px;
    display: none;
    z-index: 1100;
}

.option-item {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.option-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.option-item.active {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
}

.custom-dropdown.open .dropdown-options {
    display: block;
    animation: fadeInSlide 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.custom-dropdown.open .arrow-icon {
    transform: rotate(180deg);
}

/* --- RESPONSIVE HAMBURGER & MOBILE NAV SYSTEMS --- */

/* Gaya Dasar Tombol Hamburger Menu */
.menu-toggle {
    display: none; /* Tersembunyi di desktop/monitor */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index:10000;
}

.menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: #475569; /* Senada dengan teks menu biasa */
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Biar warna garis hamburger berubah otomatis mengikuti warna sticky capsule */
.main-navbar.sticky-capsule .menu-toggle .bar {
    background-color: #334155;
}

/* Efek Animasi Hamburger berubah jadi tanda silang (X) saat di-klik */
.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


.mobile-sidebar{
    display:none;
}

.mobile-overlay{
    display:none;
}

.mobile-sidebar .dropdown-options{
    display:none;
    position:relative;
    width:100%;
    top:10px;
    right:auto;
    box-shadow:none;
}

.mobile-sidebar .custom-dropdown.open .dropdown-options{
    display:block;
}

@media(max-width:1100px){

    /* DESKTOP HIDE */
    .desktop-menu,
    .desktop-language{
        display:none !important;
    }

    /* MOBILE */
    .menu-toggle{
        display:flex;
        margin-left:auto;
        z-index:10000;
        position:relative;
    }

    .nav-container{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .logo-text-sticky{
        display:none !important;
    }

    /* SIDEBAR */
    .mobile-sidebar{
        display:flex;
        flex-direction:column;

        position:fixed;
        top:0;
        right:-500px;

        width:300px;
        height:100vh;

        background:#fff;
        box-shadow:-10px 0 40px rgba(0,0,0,.08);

        padding:90px 20px 30px;
        gap:10px;

        transition:.35s ease;
        z-index:9999;
    }

    .mobile-sidebar.active{
        right:0;
    }

    .mobile-sidebar .nav-item{
        padding:14px 16px;
        border-radius:14px;
        width:100%;
    }

    .mobile-sidebar .nav-item:hover,
    .mobile-sidebar .nav-item.active{
        background:#f1f5f9;
    }

    /* LANGUAGE */
    .mobile-sidebar .custom-dropdown{
        margin-top:20px;
        width:100%;
    }

    .mobile-sidebar .dropdown-selected{
        width:100%;
        justify-content:space-between;
    }

    .mobile-sidebar .dropdown-options{
        position:relative;
        width:100%;
        top:10px;
        right:auto;
    }

    /* OVERLAY */
    .mobile-overlay{
        display:block;

        position:fixed;
        inset:0;
        background:rgba(0,0,0,.35);

        opacity:0;
        visibility:hidden;
        transition:.3s;

        z-index:100;
    }

    .mobile-overlay.active{
        opacity:1;
        visibility:visible;
    }
}
@media (max-width: 768px) {

    /* HEADER */
    .main-navbar {
        padding: 14px 18px;
    }

    .nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .logo-box {
        z-index: 1300;
    }

    .logo-text-sticky {
        display: none !important;
    }

    .logo-box img {
        height: 42px;
    }

    /* LANGUAGE HIDE DI TOPBAR MOBILE */
    .nav-container > .custom-dropdown {
        display: none;
    }

    /* HAMBURGER */
    .menu-toggle {
        display: flex;
        z-index:10000;
        position:relative;
    }

    /* SIDEBAR */
    .nav-links {
        position: fixed !important;
        top: 0;
        right: -320px !important;
        width: 300px;
        height: 100vh;
        background: rgba(255,255,255,.97);

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

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

        padding: 90px 20px 30px;
        gap: 10px;

        z-index: 1250;
        transition: right .35s ease;

        border-left:
            1px solid rgba(226,232,240,.7);

        box-shadow:
            -10px 0 50px rgba(15,23,42,.08);
    }

    /* ACTIVE */
    .nav-links.mobile-active {
        right: 0 !important;
    }

    /* MENU ITEM */
    .nav-item {
        display: block;
        width: 100%;
        text-align: left;
        padding: 14px 16px;
        border-radius: 16px;
        font-size: 15px;
    }

    .nav-item:hover,
    .nav-item.active {
        background: rgba(14,165,233,.08);
    }

    /* LANGUAGE INSIDE SIDEBAR */
    .nav-links .custom-dropdown {
        width: 100%;
        margin-top: 25px;
    }

    .nav-links .dropdown-selected {
        width: 100%;
        justify-content: space-between;
        border-radius: 18px;
        padding: 14px 16px;
    }

    .nav-links .lang-text {
        display: block;
    }

    .nav-links .dropdown-options {
        position: relative;
        top: 10px;
        width: 100%;
        right: auto;
    }

    /* OVERLAY */
    .mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.45);

        opacity: 0;
        visibility: hidden;

        transition: .3s ease;
        z-index: 1200;
        z-index:100;
    }

    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}


/* EXTRA SMALL DEVICE */
@media (max-width: 480px) {

    .main-navbar {
        padding: 12px 14px;
    }

    .main-navbar.sticky-capsule {
        width: calc(100% - 14px);
        padding: 10px 14px;
    }

    .logo-box img {
        height: 38px;
    }

    .dropdown-selected {
        padding: 8px 10px;
    }

    .menu-toggle {
        width: 26px;
        height: 18px;
    }

    .menu-toggle .bar {
        height: 2.5px;
    }
}


/* HERO CONTAINER (Boxed Layout / Masuk Ke Dalam) */
.hero-container {
    width: 100%;
    max-width: 1320px; /* Batas lebar kontainer banner */
    margin: 10px auto 30px auto;
    padding: 0 25px; /* Memberi sela margin kiri-kanan agar tidak mentok */
}

/* BANNER SLIDER CORE WITH RADIUS */
.hero-slider {
    width: 100%;
    height: 490px;
    border-radius: 20px; /* Sudut melingkar estetik */
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.55) 100%);
    z-index: 1;
}

/* Partitions Caption */
.slide-caption {
    position: absolute;
    z-index: 2;
    text-align: center;
    width: 85%;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.slide-subtitle {
    color: #38bdf8;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    transform: translateY(15px);
    opacity: 0;
    transition: all 0.6s ease 0.2s;
}

.slide-title {
    color: #ffffff;
    font-size: 3.2rem;
    font-weight: 800;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    line-height: 1.2;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.7s ease 0.4s;
}

.slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
    transition: all 0.3s ease;
    transform: translateY(15px);
    opacity: 0;
    transition: all 0.6s ease 0.6s;
}

.slide-btn:hover {
    background: #0ea5e9;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(14, 165, 233, 0.35);
}

.swiper-slide-active .slide-subtitle,
.swiper-slide-active .slide-title,
.swiper-slide-active .slide-btn {
    transform: translateY(0);
    opacity: 1;
}

/* UTILITIES CONTROLS */
.slide-nav-btn { color: rgba(255, 255, 255, 0.5) !important; transform: scale(0.6); transition: all 0.3s ease; }
.slide-nav-btn:hover { color: #ffffff !important; transform: scale(0.75); }
.swiper-pagination-bullet { background: rgba(255, 255, 255, 0.3) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: #38bdf8 !important; width: 24px !important; border-radius: 4px !important; transition: width 0.3s ease; }

/* ANIMATION KEYFRAMES */
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}






/* ABOUT */

/* ABOUT SECTION STYLES */
.about-section {
    width: 100%;
    max-width: 1320px;
    margin: 40px auto;
    padding: 0 25px;
}

.about-container {
    width: 100%;
    /* Gradasi Biru Premium Cerah sesuai request */
    background: linear-gradient(135deg, #4dabf7 0%, #228be6 100%);
    border-radius: 24px;
    padding: 60px 50px;
    display: flex;
    align-items: center;
    gap: 60px;
    box-shadow: 0 20px 40px rgba(34, 139, 230, 0.2);
    position: relative;
    overflow: hidden;
    
    /* Animasi muncul halus saat halaman dimuat/scroll */
    animation: fadeInUpAbout 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Dekorasi background lingkaran abstrak biar ga kaku */
.about-container::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

/* Sisi Kiri: Bagian Visual/Ikon */
.about-visual {
    flex: 1;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.icon-circle {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.museum-icon {
    font-size: 70px;
    color: #ffffff;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
    transition: all 0.4s ease;
}

/* Efek lingkaran bercahaya di belakang ikon */
.glow-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: rotateRing 20s linear infinite;
}

/* HOVER EFFECT SISI KIRI (Keren & Interaktif) */
.about-container:hover .icon-circle {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

.about-container:hover .museum-icon {
    transform: translateY(-5px);
    filter: drop-shadow(0 8px 20px rgba(255,255,255,0.4));
}


/* Sisi Kanan: Bagian Teks Konten */
.about-content {
    flex: 2;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about-section-tag {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e0f2fe;
    opacity: 0.9;
}

.about-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.about-desc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

/* Tombol Aksi Keren */
.about-action {
    margin-top: 10px;
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #228be6;
    background: #ffffff;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

.btn-read-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    background: #f8fafc;
    color: #1c7ed6;
}


/* KEYFRAMES RESPONSIF & ANIMASI */
@keyframes fadeInUpAbout {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsif Layar Tablet / HP */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        padding: 40px 30px;
        text-align: center;
        gap: 35px;
    }
    .about-visual {
        max-width: 100%;
    }
    .about-title {
        font-size: 2rem;
    }
    .btn-read-more {
        justify-content: center;
    }
}

.background-partisi{
    background-repeat : no-repeat;
    background-size : contain;
    background-position : center;
}


/* ==========================
   YOUTUBE VIDEO SECTION
========================== */

.video-section {
    width: 100%;
    max-width: 1320px;
    margin: 80px auto;
    padding: 0 24px;
}

.video-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e293b 100%
        );
    padding: 50px;
    box-shadow:
        0 25px 60px rgba(15, 23, 42, .12);
}

/* Glow Background */
.video-wrapper::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 280px;
    height: 280px;
    background: rgba(14, 165, 233, 0.12);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
}

/* Badge */
.video-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    color: #e2e8f0;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 30px;
}

.video-badge i {
    color: #ff0000;
    font-size: 18px;
}

/* Content */
.video-content {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.video-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(14,165,233,.15);
    border: 1px solid rgba(14,165,233,.25);
    color: #38bdf8;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

.video-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 18px;
}

.video-subtitle {
    color: #94a3b8;
    font-size: 16px;
    line-height: 1.8;
}

/* Youtube Frame */
.youtube-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 20px 40px rgba(0,0,0,.25);
}

/* Ratio 16:9 */
.youtube-frame::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.youtube-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Responsive */
@media (max-width: 992px) {
    .video-wrapper {
        padding: 35px;
        border-radius: 24px;
    }

    .video-title {
        font-size: 2.1rem;
    }
}

@media (max-width: 768px) {
    .video-section {
        margin: 60px auto;
        padding: 0 18px;
    }

    .video-wrapper {
        padding: 24px;
        border-radius: 22px;
    }

    .video-title {
        font-size: 1.6rem;
    }

    .video-subtitle {
        font-size: 14px;
    }

    .video-content {
        margin-bottom: 25px;
    }
}


/* ==========================
   YOUTUBE SHOWCASE SECTION
========================== */

.yt-showcase-section {
    position: relative;
    background: linear-gradient(
        135deg,
        #56aeff 0%,
        #2495ff 100%
    );
    padding: 90px 30px;
    overflow: hidden;
}

.yt-showcase-section::before {
    content: "";
    position: absolute;
    top: -180px;
    left: -120px;
    width: 420px;
    height: 420px;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    filter: blur(80px);
}

.yt-showcase-section::after {
    content: "";
    position: absolute;
    bottom: -150px;
    right: -100px;
    width: 350px;
    height: 350px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    filter: blur(90px);
}

.yt-showcase-container {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: auto;
}

/* Header */
.yt-showcase-header {
    text-align: center;
    max-width: 760px;
    margin: auto auto 45px;
}

.yt-showcase-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.25);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

.yt-showcase-tag i {
    font-size: 16px;
}

.yt-showcase-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 18px;
}

.yt-showcase-subtitle {
    color: rgba(255,255,255,0.88);
    font-size: 16px;
    line-height: 1.8;
}

/* Video Card */
.yt-showcase-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: #000;
    box-shadow:
        0 25px 60px rgba(0,0,0,0.20);
}

/* 16:9 ratio */
.yt-showcase-wrapper::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.yt-showcase-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .yt-showcase-section {
        padding: 70px 24px;
    }

    .yt-showcase-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .yt-showcase-section {
        padding: 55px 18px;
    }

    .yt-showcase-title {
        font-size: 1.7rem;
    }

    .yt-showcase-subtitle {
        font-size: 14px;
    }

    .yt-showcase-wrapper {
        border-radius: 20px;
    }
}

/* HALAMAN ABOUT US */


/* 1. ORNAMEN BACKGROUND CSS (Upgrade Visual Estetis) */
.bg-ornament {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
}
.orb-1 {
    width: 300px;
    height: 300px;
    background: rgba(14, 165, 233, 0.15); /* Biru Muda */
    top: 10%;
    right: -50px;
}
.orb-2 {
    width: 400px;
    height: 400px;
    background: rgba(56, 189, 248, 0.12);
    bottom: 20%;
    left: -100px;
}
.orb-3 {
    width: 250px;
    height: 250px;
    background: rgba(224, 242, 254, 0.8);
    top: 50%;
    right: 20%;
}

/* MAIN STRUCTURE BOXED */
.about-page-container {
    width: 100%;
    max-width: 1200px;
    margin-top : 80px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 90px;
}

/* 2. HISTORY BLOCK STYLE */
.history-block {
    text-align: center;
    max-width: 950px;
    margin: 0 auto;
}

.badge-blue {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.main-heading {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 15px;
    letter-spacing: -0.5px;
}

.heading-separator {
    width: 50px;
    height: 4px;
    background: #0ea5e9;
    margin: 15px auto 35px auto;
    border-radius: 10px;
}

.text-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 20px;
    text-align: justify;
}


/* 3. INTERACTIVE SVG CHART BLOCK (Ganti Total Dari Gambar Statis) */
/* --- SECTION 2: DATA VISITOR CHART CARD --- */
.visitor-card-gradient {
    width: 100%;
    background: linear-gradient(135deg, #4dabf7 0%, #228be6 100%);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 45px rgba(34, 139, 230, 0.2);
}

.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 15px;
}

.visitor-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-year-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 30px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sisa CSS Ornamen, History, dan Visi Misi yang kemarin tetep dipertahankan ya, vroo */
/* SVG Chart Engine Style */
.chart-container-svg {
    position: relative;
    width: 100%;
}

.interactive-svg-chart {
    width: 100%;
    height: auto;
}

.chart-grid-lines line {
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.chart-area-fill {
    fill: url(#chart-glow);
}

.chart-stroke-line {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* Animasi Titik Koordinat Pengunjung */
.node-group {
    cursor: pointer;
}

.main-node {
    fill: #ffffff;
    stroke: #3b82f6;
    stroke-width: 3;
    transition: all 0.3s ease;
}

.pulse-node {
    fill: rgba(255, 255, 255, 0.4);
    transform-origin: center;
    opacity: 0;
    transition: all 0.3s ease;
}

/* Hover State Titik Grafik Berpendar */
.node-group:hover .main-node {
    fill: #38bdf8;
    transform: scale(1.3);
}

.node-group:hover .pulse-node {
    opacity: 1;
    animation: nodePing 1.5s infinite ease-out;
}

.chart-labels-x text {
    fill: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 600;
}

/* Tooltip UI Card */
.chart-tooltip {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.chart-tooltip.visible {
    background: #0f172a;
    border-color: #38bdf8;
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.25);
}


/* 4. VISION & MISSION SYSTEM UPGRADE (Sangat Rapi & Simetris) */
.vimi-block {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
}

.vimi-icon-glow {
    width: 48px;
    height: 48px;
    background: #e0f2fe;
    color: #0284c7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    box-shadow: 0 8px 16px rgba(2, 132, 199, 0.1);
}

.vimi-heading-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 12px;
}

.vimi-line-dec {
    width: 35px;
    height: 3px;
    background: #0ea5e9;
    margin-top: 8px;
    border-radius: 2px;
}

/* Kotak Visi Premium */
.vision-container-premium {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
}

.vision-quote-text {
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    color: #0369a1;
    line-height: 1.6;
    margin-top: 20px;
    max-width: 700px;
}

/* Struktur Kotak Misi Master */
.mission-master-box {
    width: 100%;
}

.mission-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 35px;
}

/* Grid Kartu Misi Seimbang */
.mission-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.mission-card-premium {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-top-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.m-num {
    font-size: 32px;
    font-weight: 800;
    color: rgba(14, 165, 233, 0.15);
    line-height: 1;
    transition: color 0.3s ease;
}

.m-icon-box {
    font-size: 22px;
    color: #0284c7;
    transition: transform 0.3s ease;
}

.mission-card-premium h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.3s ease;
}

.mission-card-premium p {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    transition: color 0.3s ease;
}

/* Hover State Misi Menakjubkan (Dark Neon Effect) */
.mission-card-premium:hover {
    transform: translateY(-8px);
    background: #0f172a;
    border-color: #0f172a;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.15);
}

.mission-card-premium:hover .m-num { color: #38bdf8; }
.mission-card-premium:hover .m-icon-box { transform: scale(1.1); color: #38bdf8; }
.mission-card-premium:hover h3 { color: #ffffff; }
.mission-card-premium:hover p { color: #cbd5e1; }


/* 5. ANIMASI TIMING FADE IN LOAD */
.fade-in-element {
    opacity: 0;
    transform: translateY(25px);
    animation: fadeInUpDoc 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Staggered Delay */
.history-block { animation-delay: 0.1s; }
.visitor-block { animation-delay: 0.3s; }
.vimi-block { animation-delay: 0.5s; }


/* KEYFRAMES CORE ENGINE */
@keyframes fadeInUpDoc {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nodePing {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2); opacity: 0; }
}

/* RESPONSIVE VIEWPORTS */
@media (max-width: 992px) {
    .mission-grid-premium { grid-template-columns: 1fr; gap: 20px; }
    .main-heading { font-size: 2.2rem; }
    .visitor-card-gradient { padding: 25px 20px; }
}

/* --- SECTION 2: DATA VISITOR CHART CARD --- */
.visitor-card-gradient {
    width: 100%;
    /* Gradasi Biru Mewah mengikuti warna mockup andalanmu */
    background: linear-gradient(135deg, #4dabf7 0%, #228be6 100%);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 45px rgba(34, 139, 230, 0.2);
    position: relative;
    overflow: hidden;
}

.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 15px;
}

.visitor-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-year-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 30px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* WADAH UTAMA RENDERING REAL AMCHARTS 5 (Wajib Diatur Height-nya) */
#chartdiv {
    width: 100%;
    height: 380px; /* Ukuran tinggi grafik yang pas & ideal */
    position: relative;
}

/* Hilangkan logo watermark credit bawaan amcharts gratisan biar clean rapi */
g[aria-labelledby$="-title"] {
    display: none !important;
}



/* GALLERY */

/* --- GALLERY ARTEFAK SECTION STYLES --- */

.gallery-section {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 80px auto;
    padding: 0 24px;
}

.gallery-header {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-main-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 10px;
}

.title-line {
    width: 50px;
    height: 4px;
    background: #0ea5e9;
    margin: 12px auto 0 auto;
    border-radius: 10px;
}

/* SLIDER LAYOUT WRAPPER */
.gallery-slider-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* KONTANER UTAMA YANG BISA DI-SCROLL */
/* KONTANER UTAMA GALLERY (Scrollbar Tersembunyi) */
.gallery-scroll-container {
    width: 100%;
    display: flex;
    gap: 24px;
    overflow-x: auto; /* Tetap aktifkan fungsionalitas scroll secara sistem */
    scroll-behavior: smooth;
    padding: 15px 5px 25px 5px;
    
    /* 1. Sembunyikan Scrollbar untuk Firefox */
    scrollbar-width: none; 
}

/* 2. Sembunyikan Scrollbar untuk Chrome, Safari, Opera, dan Edge Modern */
.gallery-scroll-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.gallery-scroll-container::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
}

.gallery-scroll-container::-webkit-scrollbar-thumb {
    background: #4dabf7;
    border-radius: 10px;
    transition: background 0.3s ease;
}

.gallery-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #0ea5e9;
}

/* KARTU ARTEFAK */
.gallery-card {
    flex: 0 0 calc(25% - 18px); /* Menampilkan tepat 4 kartu sejajar di layar monitor */
    min-width: 250px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    cursor : pointer;
}

/* Kunci Ukuran Gambar Sama Rata Menggunakan Background Image Cover */
.card-img-cover {
    width: 100%;
    height: 320px; /* Tinggi seragam untuk semua gambar sesuai request */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Memotong gambar proporsional tanpa distorsi stretch */
    position: relative;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-overlay-gradient {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 60%, rgba(15, 23, 42, 0.4) 100%);
    opacity: 0.8;
}

.card-info-box {
    padding: 20px;
    text-align: center;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.card-info-box h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.3s ease;
}

/* HOVER INTERAKTIF LUAR BIASA */
.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    border-color: #4dabf7;
}

.gallery-card:hover .card-img-cover {
    transform: scale(1.04); /* Efek zoom-in gambar di dalam frame melingkar */
}

.gallery-card:hover .card-info-box h3 {
    color: #0ea5e9; /* Teks nama arca berubah warna biru terang */
}

/* TOMBOL NAVIGASI PANAH MELAYANG (Glassmorphism Minimalis) */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(14, 165, 233, 0.2);
    color: #0284c7;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    z-index: 10;
    transition: all 0.3s ease;
}

.arrow-left { left: -24px; }
.arrow-right { right: -24px; }

.nav-arrow:hover {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0ea5e9;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
}

/* RESPONSIVE BREAKPOINT TABLET & HP */
@media (max-width: 992px) {
    .gallery-card {
        flex: 0 0 calc(50% - 12px); /* Tampil 2 kartu sejajar di tablet */
    }
    .nav-arrow { display: none; } /* Di HP/Tablet cukup di-swipe/geser jari langsung */
}

@media (max-width: 576px) {
    .gallery-card {
        flex: 0 0 85%; /* Tampil 1 kartu dominan di HP layar kecil */
    }
}

/* --- PREMIUM GALLERY MODAL SYSTEM STYLES --- */
.gallery-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6); /* Backdrop gelap transparan */
    backdrop-filter: blur(12px); /* Efek Glassmorphism di latar belakang */
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000; /* Pastikan melayang di atas navbar capsule */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* State Aktif saat Modal Dibuka */
.gallery-modal-overlay.modal-open {
    opacity: 1;
    pointer-events: auto;
}

.modal-card-box {
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    height: 500px;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.gallery-modal-overlay.modal-open .modal-card-box {
    transform: translateY(0) scale(1); /* Animasi memantul masuk yang halus */
}

.gallery-skeleton-wrapper{

    display:none;
    gap:24px;
    overflow:hidden;
}

.gallery-skeleton-card{

    min-width:320px;
}

.gallery-skeleton-image{

    height:420px;
    border-radius:28px;
}

.gallery-skeleton-title{

    width:70%;
    height:24px;

    margin-top:18px;

    border-radius:999px;
}

.shimmer{

    background:
    linear-gradient(
        90deg,
        #ececec 25%,
        #f7f7f7 50%,
        #ececec 75%
    );

    background-size:
        200% 100%;

    animation:
        shimmerMove
        1.2s linear infinite;
}

@keyframes shimmerMove{

    from{
        background-position:
        200% 0;
    }

    to{
        background-position:
        -200% 0;
    }
}

.gallery-no-data{

    width:100%;
    min-height:300px;

    display:none;
    justify-content:center;
    align-items:center;
}

/* Tombol Close Silang */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(15, 23, 42, 0.1);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #0f172a;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: all 0.3s ease;
}
.modal-close-btn:hover {
    background: #f43f5e;
    color: #ffffff;
    transform: rotate(90deg);
}

/* Tata Letak Pembagian 2 Kolom Modal */
.modal-layout-split {
    display: flex;
    width: 100%;
    height: 100%;
}

.modal-view-image {
    flex: 1;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Setelan cover agar gambar tetap proporsional */
}

.modal-view-details {
    flex: 1.2;
    padding: 45px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #ffffff;
}

.modal-badge {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    align-self: flex-start;
    margin-bottom: 15px;
}

.modal-view-details h2 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.modal-separator {
    width: 40px;
    height: 4px;
    background: #0ea5e9;
    margin: 15px 0 20px 0;
    border-radius: 5px;
}

.modal-scroll-desc {
    flex-grow: 1;
    overflow-y: auto; /* Mengizinkan teks deskripsi panjang di-scroll internal jika penuh */
    padding-right: 10px;
}

.modal-scroll-desc p {
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    text-align: justify;
}

/* RESPONSIVE LAYOUT MODAL DI TABLET / HP */
@media (max-width: 768px) {
    .modal-card-box {
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal-layout-split {
        flex-direction: column;
    }
    .modal-view-image {
        height: 220px;
        width: 100%;
    }
    .modal-view-details {
        padding: 30px 25px;
    }
}


/* ==========================================================================
   NEWS SECTION - FULL STYLES
   ========================================================================== */

/* Container Utama */
#news-container {
    position: relative;
    min-height: 400px;
    width: 100%;
}

#news-grid, #skeleton-wrapper {
    transition: opacity 0.4s ease-in-out;
    width: 100%;
}

/* Page Wrapper */
.news-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.news-section { width: 100%; }

.news-section-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Elements */
.badge-blue {
    background: #e0f2fe; color: #0284c7; font-size: 11px; font-weight: 700;
    padding: 6px 16px; border-radius: 50px; text-transform: uppercase;
    letter-spacing: 1.5px; display: inline-flex; align-items: center; gap: 6px;
}

.section-main-title {
    font-size: 2.2rem; font-weight: 800; color: #0f172a;
    margin-top: 10px; letter-spacing: -0.5px;
}

.title-line {
    width: 50px; height: 4px; background: #0ea5e9;
    margin: 12px auto 0 auto; border-radius: 10px;
}

/* ================= RESPONSIVE MASONRY GRID ================= */
.news-masonry-grid, #skeleton-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Mobile */
    gap: 24px;
}

@media (min-width: 768px) { .news-masonry-grid, #skeleton-wrapper { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-masonry-grid, #skeleton-wrapper { grid-template-columns: repeat(3, 1fr); } }

/* Cards */
.news-card-mini {
    background: #ffffff; border-radius: 16px; overflow: hidden;
    border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; cursor: pointer;
}

.news-thumb {
    width: 100%; height: 200px; background-position: center;
    background-size: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-mini-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.news-date { font-size: 12px; font-weight: 700; color: #94a3b8; }
.news-mini-body h3 { font-size: 15px; font-weight: 700; color: #1e293b; line-height: 1.5; }

.news-card-mini:hover { transform: translateY(-5px); border-color: #38bdf8; box-shadow: 0 15px 30px rgba(14, 165, 233, 0.08); }
.news-card-mini:hover .news-thumb { transform: scale(1.03); }
.news-card-mini:hover .news-mini-body h3 { color: #0ea5e9; }

/* Controls & Pagination */
.news-controls { margin-top: 20px; text-align: center; }
.search-input { padding: 10px 20px; border-radius: 25px; border: 1px solid #ddd; width: 300px; max-width: 90%; }
.pagination-container { margin-top: 40px; display: flex; justify-content: center; gap: 10px; }
.page-btn { padding: 8px 16px; cursor: pointer; border: 1px solid #ddd; border-radius: 5px; }
.page-btn.active { background: #0ea5e9; color: white; border-color: #0ea5e9; }
.page-btn:disabled { cursor: not-allowed; opacity: 0.6; }

/* ================= SKELETON LOADERS ================= */
.skeleton { animation: skeleton-pulse 1.5s infinite ease-in-out; }
@keyframes skeleton-pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

.skeleton .skeleton-thumb { background: #e2e8f0; height: 200px; width: 100%; }
.skeleton .skeleton-date { background: #e2e8f0; height: 10px; width: 30%; border-radius: 4px; margin-bottom: 10px; }
.skeleton .skeleton-title { background: #e2e8f0; height: 18px; width: 90%; border-radius: 4px; margin-bottom: 8px; }

#skeleton-wrapper { position: absolute; top: 0; left: 0; display: none; }
/* =========================
   MODAL NEWS PREMIUM V2
========================= */

:root{
    --modal-primary: #2563eb;
    --modal-dark: #0f172a;
    --modal-text: #334155;
    --modal-border: rgba(255,255,255,.2);
}

/* Overlay */
.modalNews-overlay{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 24px;

    background: rgba(15,23,42,.72);
    backdrop-filter: blur(14px);

    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
}

.modalNews-overlay.is-visible{
    opacity: 1;
    visibility: visible;
}

/* Wrapper */
.modalNews-wrapper{
    width: 100%;
    max-width: 920px;
    max-height: 92vh;
    overflow: hidden;

    border-radius: 30px;

    background-color : #ffffff;

    backdrop-filter: blur(20px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.7);

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

    transform: scale(.92) translateY(30px);
    opacity: 0;
    transition: .45s cubic-bezier(.22,1,.36,1);
}

.modalNews-overlay.is-visible .modalNews-wrapper{
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Scroll Body */
.modalNews-scroll{
    overflow-y: auto;
    max-height: 92vh;
}

/* Scrollbar */
.modalNews-scroll::-webkit-scrollbar{
    width: 8px;
}
.modalNews-scroll::-webkit-scrollbar-track{
    background: transparent;
}
.modalNews-scroll::-webkit-scrollbar-thumb{
    background: #d1d5db;
    border-radius: 999px;
}
.modalNews-scroll::-webkit-scrollbar-thumb:hover{
    background: #94a3b8;
}

/* Banner */
.modalNews-thumb{
    position: relative;
    width: 100%;
    height: 360px;
    background-size: cover;
    background-position: center;
}

.modalNews-thumb::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(15,23,42,.85),
            rgba(15,23,42,.2),
            transparent
        );
}

/* Floating Date */
.modalNews-date{
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 3;

    background: rgba(255,255,255,.15);
    backdrop-filter: blur(12px);

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

    color: #fff;
    font-size: .85rem;
    font-weight: 600;

    padding: 10px 16px;
    border-radius: 999px;

    display: flex;
    align-items: center;
    gap: 8px;
}

/* Content */
.modalNews-content-wrapper{
    padding: 34px;
}

/* Title */
.modalNews-title{
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 800;
    color: var(--modal-dark);
    margin-bottom: 12px;
}

/* Meta */
.modalNews-meta{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    color: #64748b;
    font-size: .92rem;
}

.modalNews-badge{
    background: #eff6ff;
    color: var(--modal-primary);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
}

/* Content Styling */
.modalNews-content{
    color: var(--modal-text);
    font-size: 1.02rem;
    line-height: 1.9;
}

.modalNews-content p{
    margin-bottom: 1.4rem;
}

.modalNews-content img{
    max-width: 100%;
    border-radius: 22px;
    margin: 28px 0;
}

.modalNews-content h1,
.modalNews-content h2,
.modalNews-content h3{
    color: var(--modal-dark);
    margin-bottom: 16px;
    margin-top: 28px;
}

.modalNews-content ul,
.modalNews-content ol{
    margin-left: 20px;
    margin-bottom: 20px;
}

/* Close Button */
.modalNews-close{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 99;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.15);
    backdrop-filter: blur(12px);

    color: #fff;
    font-size: 22px;
    cursor: pointer;

    transition: .25s ease;
}

.modalNews-close:hover{
    transform: rotate(90deg) scale(1.08);
    background: rgba(255,255,255,.25);
}

/* Skeleton */
.modal-skeleton{
    padding: 30px;
}

.modal-skeleton-img{
    height: 340px;
    border-radius: 20px;
    margin-bottom: 25px;

    background:
        linear-gradient(
            90deg,
            #e2e8f0 25%,
            #f1f5f9 50%,
            #e2e8f0 75%
        );
    background-size: 300% 100%;
    animation: shimmer 1.6s infinite linear;
}

.modal-skeleton-text{
    height: 18px;
    border-radius: 999px;
    margin-bottom: 14px;

    background:
        linear-gradient(
            90deg,
            #e2e8f0 25%,
            #f1f5f9 50%,
            #e2e8f0 75%
        );
    background-size: 300% 100%;
    animation: shimmer 1.6s infinite linear;
}

@keyframes shimmer{
    from{
        background-position: 100% 0;
    }
    to{
        background-position: -100% 0;
    }
}

/* Mobile */
@media(max-width:768px){

    .modalNews-overlay{
        padding: 10px;
        align-items: flex-end;
    }

    .modalNews-wrapper{
        border-radius: 28px 28px 0 0;
        max-height: 96vh;
    }

    .modalNews-thumb{
        height: 240px;
    }

    .modalNews-content-wrapper{
        padding: 24px;
    }

    .modalNews-title{
        font-size: 1.45rem;
    }

    .modalNews-close{
        width: 45px;
        height: 45px;
        top: 14px;
        right: 14px;
    }
}

/* ================= ROW 2: UPCOMING EVENT SLIDER BANNER ================= */
.upcoming-event-banner {
    width: 100%;
    background: linear-gradient(135deg, #4dabf7 0%, #228be6 100%);
    border-radius: 24px;
    padding: 10px;
    box-shadow: 0 20px 40px rgba(34, 139, 230, 0.15);
    overflow: hidden;
}

.event-banner-container {
    width: 100%;
}

.event-slide-inner {
    width: 100%;
    height: 340px;
    background-position: center;
    background-size: cover;
    border-radius: 16px;
    display: flex;
    align-items: flex-end;
    padding: 40px;
}

.event-slide-content {
    color: #ffffff;
    max-width: 600px;
}

.event-badge-tag {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 15px;
    backdrop-filter: blur(4px);
}

.event-slide-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.event-slide-content p {
    font-size: 15px;
    color: #e0f2fe;
    line-height: 1.6;
}

/* ================= INSTAGRAM FEED ================= */
/* ================= SKELETON LOADER ================= */

.skeleton-card {
    overflow: hidden;
    pointer-events: none;
}

.skeleton-image {
    height: 320px;
    background: #e2e8f0;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e2e8f0;
    flex-shrink: 0;
}

.skeleton-profile {
    flex: 1;
}

.skeleton-caption {
    margin-top: 20px;
}

.skeleton-line {
    height: 12px;
    border-radius: 999px;
    background: #e2e8f0;
    margin-bottom: 10px;
    width: 100%;
}

.skeleton-line.short {
    width: 120px;
}

.skeleton-line.medium {
    width: 70%;
}

.skeleton-line.tiny {
    width: 80px;
    height: 10px;
}

/* shimmer animation */

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;

    width: 120%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    animation:
        shimmerMove 1.3s infinite linear;
}

@keyframes shimmerMove {
    100% {
        left: 150%;
    }
}
.instagram-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ig-card {
    position: relative;
    display: block;
    text-decoration: none;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 28px;
    overflow: hidden;
    backdrop-filter: blur(16px);
    transition: .45s cubic-bezier(.2,.8,.2,1);
    box-shadow:
        0 10px 30px rgba(15,23,42,.05),
        0 2px 10px rgba(15,23,42,.03);
}

.ig-card:hover {
    transform: translateY(-10px);
    box-shadow:
        0 25px 50px rgba(15,23,42,.12);
}

.ig-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 320px;
}

.ig-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.ig-card:hover .ig-image-wrapper img {
    transform: scale(1.08);
}

.ig-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(15,23,42,.9),
            rgba(15,23,42,.2)
        );

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

    color: white;
    gap: 10px;

    opacity: 0;
    transition: .35s ease;
}

.ig-overlay i {
    font-size: 32px;
}

.ig-overlay span {
    font-size: 14px;
    font-weight: 700;
}

.ig-card:hover .ig-overlay {
    opacity: 1;
}

.ig-content {
    padding: 22px;
}

.ig-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ig-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #f9ce34,
            #ee2a7b,
            #6228d7
        );

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

    color: white;
    font-size: 22px;
}

.ig-profile h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.ig-profile span {
    font-size: 12px;
    color: #64748b;
}

.ig-caption {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: #64748b;
    min-height: 65px;
}

.ig-footer {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}

.ig-footer span {
    color: #e1306c;
    font-size: 13px;
    font-weight: 700;
}

/* Floating glow */
.ig-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 140%;
    height: 140%;
    background:
        radial-gradient(
            circle,
            rgba(225,48,108,.08),
            transparent 70%
        );
    pointer-events: none;
}

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

@media (max-width: 1200px) {
    .instagram-feed-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .instagram-feed-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ig-image-wrapper {
        height: 280px;
    }
}

@media (max-width: 576px) {
    .instagram-feed-grid {
        grid-template-columns: 1fr;
    }

    .ig-image-wrapper {
        height: 320px;
    }

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

.feed-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-btn {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: none;
    cursor: pointer;

    background: #fff;
    color: #334155;
    font-weight: 700;

    box-shadow:
        0 5px 20px rgba(15,23,42,.06);

    transition: .3s ease;
}

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

.page-btn.active {
    background:
        linear-gradient(
            135deg,
            #ee2a7b,
            #6228d7
        );

    color: white;
}
/* ================= REVISI: SWIPER BANNER MODIFICATION ================= */
.upcoming-event-swiper-section {
    width: 100%;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.12);
}

.myEventSwiper {
    width: 100%;
    height: 360px;
}

.event-slide-inner {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding: 50px;
    box-sizing: border-box;
}

/* Modifikasi Warna Dot Bullet Swiper agar Senada Biru Kapsul */
.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.5;
    width: 10px;
    height: 10px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: #0ea5e9 !important; /* Warna biru capsule indicator */
    opacity: 1 !important;
    width: 30px; /* Membuat bentuk pil memanjang kustom yang estetik */
    border-radius: 5px;
}


/* ================= REVISI: UNIVERSAL PORTAL MODAL COMPONENT ================= */
.news-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(12px); /* Efek Glassmorphism Premium */
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999; /* Di atas seluruh elemen web */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* State Aktif Modal Pop-up */
.news-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content-box {
    background: #ffffff;
    width: 100%;
    max-width: 850px;
    height: 480px;
    border-radius: 24px;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    transform: translateY(30px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.12);
}

.news-modal-overlay.active .modal-content-box {
    transform: translateY(0) scale(1);
}

/* Tombol Silang Close */
.modal-close-btn {
    position: absolute;
    top: 15px; right: 20px;
    width: 36px; height: 36px;
    background: rgba(15, 23, 42, 0.08);
    border: none; border-radius: 50%;
    color: #0f172a; font-size: 22px; font-weight: 700;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    z-index: 10; transition: all 0.3s ease;
}
.modal-close-btn:hover {
    background: #f43f5e; color: #ffffff; transform: rotate(90deg);
}

/* Split Column Layout Internals */
.modal-split-layout {
    display: flex;
    width: 100%; height: 100%;
}

.modal-img-side {
    flex: 1; height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.modal-info-side {
    flex: 1.2; padding: 45px 40px;
    display: flex; flex-direction: column;
}

.modal-type-badge {
    background: #e0f2fe; color: #0284c7;
    font-size: 11px; font-weight: 700;
    padding: 5px 14px; border-radius: 30px;
    align-self: flex-start; margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: 0.5px;
}

.modal-date-text {
    font-size: 12px; color: #94a3b8;
    font-weight: 600; margin-bottom: 8px;
}

.modal-info-side h2 {
    font-size: 24px; font-weight: 800;
    color: #0f172a; line-height: 1.3;
}

.modal-bar-separator {
    width: 40px; height: 4px;
    background: #0ea5e9; margin: 15px 0 20px 0;
    border-radius: 5px;
}

.modal-scroll-paragraph {
    flex-grow: 1; overflow-y: auto;
    padding-right: 8px;
}

.modal-scroll-paragraph p {
    font-size: 14px; line-height: 1.7;
    color: #475569; text-align: justify;
}

/* RESPONSIVE LAYOUT MODAL DI TABLET / HP */
@media (max-width: 768px) {
    .modal-content-box { height: auto; max-height: 85vh; overflow-y: auto; }
    .modal-split-layout { flex-direction: column; }
    .modal-img-side { height: 180px; width: 100%; }
    .modal-info-side { padding: 30px 20px; }
}



/* VISIT */

/* PAGE ROOT CONTAINER */
.visit-page-container {
    width: 100%; max-width: 1200px; margin: 40px auto;
    padding: 0 24px; display: flex; flex-direction: column; gap: 70px;
}

/* UNIVERSAL ROW STYLING ELEMENTS */
.visit-section { width: 100%; }
.badge-blue {
    background: #e0f2fe; color: #0284c7; font-size: 11px; font-weight: 700;
    padding: 6px 16px; border-radius: 50px; text-transform: uppercase;
    letter-spacing: 1.5px; display: inline-flex; align-items: center; gap: 6px;
}
.visit-row-title { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-top: 10px; letter-spacing: -0.5px; }
.visit-line-dec { width: 45px; height: 4px; background: #0ea5e9; margin-top: 12px; border-radius: 10px; }


/* ========================================== */
/* ROW 1: OPENING HOURS SPECIFIC             */
/* ========================================== */
.hours-card-split {
    width: 100%; background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 24px; padding: 45px; display: flex; align-items: center; gap: 40px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.01);
}
.hours-text-info { flex: 1.5; }
.hours-list { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.hours-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 12px; border-bottom: 1px dashed #e2e8f0;
}
.day-label { font-size: 16px; font-weight: 700; color: #1e293b; }
.time-label { font-size: 15px; font-weight: 600; color: #0ea5e9; background: #f0f9ff; padding: 4px 14px; border-radius: 30px; }
.holiday-time-label { font-size: 15px; font-weight: 600; color: #e90e0e; background: #fff0f0; padding: 4px 14px; border-radius: 30px; }
.hours-note-box { margin-top: 25px; display: flex; flex-direction: column; gap: 8px; }
.hours-note-box p { font-size: 13px; line-height: 1.5; color: #64748b; font-weight: 500; }

/* Glowing Pill / Circle Free Entry Bagian Kanan */
.hours-badge-side { flex: 1; display: flex; justify-content: center; align-items: center; }
.glowing-free-badge {
    position: relative; width: 170px; height: 170px; display: flex; justify-content: center; align-items: center;
}
.badge-inner-circle {
    width: 150px; height: 150px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%; z-index: 3; display: flex; flex-direction: column; justify-content: center;
    align-items: center; color: #ffffff; box-shadow: 0 10px 25px rgba(29, 78, 216, 0.25);
}
.badge-inner-circle span:nth-child(1) { font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.badge-inner-circle span:nth-child(2) { font-size: 14px; font-weight: 700; opacity: 0.9; letter-spacing: 2px; }
.pulse-ring-badge {
    position: absolute; width: 150px; height: 150px; border: 2px solid #38bdf8;
    border-radius: 50%; z-index: 1; animation: badgeGlowPulse 2.5s infinite ease-out;
}
@keyframes badgeGlowPulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { opacity: 0.4; }
    100% { transform: scale(1.3); opacity: 0; }
}


/* ========================================== */
/* ROW 2: VISITOR INFORMATIONS & RULES       */
/* ========================================== */
.split-grid-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.guide-card {
    border-radius: 24px; padding: 40px; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Pemisahan Gradasi Biru Lembut Sesuai Jenis Konten */
.info-card-theme { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); border: 1px solid rgba(14, 165, 233, 0.15); }
.rules-card-theme { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 1px solid rgba(14, 165, 233, 0.1); }

.card-header-icon { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.card-header-icon i { font-size: 28px; color: #0284c7; }
.card-header-icon h3 { font-size: 20px; font-weight: 800; color: #0f172a; }

.guide-list-items { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.guide-list-items li { display: flex; align-items: flex-start; gap: 15px; }
.list-num {
    background: #ffffff; color: #0284c7; font-weight: 800; font-size: 13px;
    min-width: 26px; height: 26px; border-radius: 50%; display: flex;
    justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
.guide-list-items p { font-size: 14.5px; line-height: 1.6; color: #334155; font-weight: 500; }
.guide-card:hover { transform: translateY(-5px); }


/* ========================================== */
/* ROW 3: GAMELAN ROOM USAGE POLICY          */
/* ========================================== */
.gamelan-card-container {
    width: 100%; background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 24px; padding: 45px; display: flex; align-items: center; gap: 50px;
}
/* Style Custom QR Laser Scanner Box */
.qr-scanner-side {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 15px;
}
.qr-box-frame {
    position: relative; padding: 15px; background: #ffffff;
    border: 1px solid #cbd5e1; border-radius: 16px; overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
}
.qr-box-frame img { display: block; width: 160px; height: 200px; }
.scanner-laser-line {
    position: absolute; left: 0; width: 100%; height: 3px;
    background: #0ea5e9; box-shadow: 0 0 12px #0ea5e9;
    animation: laserScanMove 3s infinite ease-in-out;
}
@keyframes laserScanMove {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}
.qr-caption-text { font-size: 12px; font-weight: 700; color: #94a3b8; text-align: center; }

/* Aturan Kebijakan Teks Kanan */
.gamelan-text-side { flex: 2; }
.gamelan-policy-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.gamelan-policy-list li { display: flex; align-items: flex-start; gap: 14px; }
.p-dot { min-width: 8px; height: 8px; background: #0ea5e9; border-radius: 50%; margin-top: 7px; }
.gamelan-policy-list p { font-size: 14.5px; line-height: 1.6; color: #475569; text-align: justify; }


/* HARDWARE-ACCELERATED LOAD ANIMATION */
.fade-in-element {
    opacity: 0; transform: translateY(20px);
    animation: fadeInUpVisit 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hours-block { animation-delay: 0.1s; }
.info-guidelines-block { animation-delay: 0.3s; }
.gamelan-block { animation-delay: 0.5s; }

@keyframes fadeInUpVisit { to { opacity: 1; transform: translateY(0); } }


/* ========================================== */
/* RESPONSIVE LAYOUT BREAKPOINTS             */
/* ========================================== */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .nav-links {
        position: absolute; top: 100%; left: 0; width: 100%; background: #ffffff;
        padding: 20px; flex-direction: column; gap: 15px; text-align: center;
        opacity: 0; transform: translateY(-15px); pointer-events: none;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); border-bottom: 1px solid #e2e8f0;
    }
    .nav-links.mobile-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
    
    .hours-card-split, .gamelan-card-container { flex-direction: column; padding: 30px 20px; gap: 35px; }
    .split-grid-cards { grid-template-columns: 1fr; gap: 20px; }
    .hours-list li { flex-direction: column; gap: 8px; text-align: center; }
    .guide-card { padding: 30px 20px; }
}


/* CONTACT */

/* PAGE ROOT MAIN GRID STRUCTURE */
.contact-page-container {
    width: 100%; max-width: 1200px; margin: 40px auto;
    padding: 0 24px; display: flex; flex-direction: column; gap: 80px;
}

.contact-section { width: 100%; }
.badge-blue {
    background: #e0f2fe; color: #0284c7; font-size: 11px; font-weight: 700;
    padding: 6px 16px; border-radius: 50px; text-transform: uppercase;
    letter-spacing: 1.5px; display: inline-flex; align-items: center; gap: 6px;
}
.contact-row-title { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-top: 10px; letter-spacing: -0.5px; }
.contact-line-dec { width: 45px; height: 4px; background: #0ea5e9; margin-top: 12px; border-radius: 10px; }


/* ========================================== */
/* ROW 1: LOCATION & CONTACT INFO STRUCTURE   */
/* ========================================== */
.info-grid-container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.location-side-card, .contact-side-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 24px; padding: 40px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.01);
}
.address-paragraph { font-size: 15px; line-height: 1.6; color: #475569; margin: 20px 0; font-weight: 500; }

/* Google Maps Iframe Container */
.maps-wrapper-frame {
    width: 100%; height: 240px; border-radius: 16px; overflow: hidden;
    border: 1px solid #cbd5e1; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.03);
}

/* Contact Channels List */
.contact-channels-list { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 24px; }
.contact-channels-list li { display: flex; align-items: center; gap: 20px; }
.channel-icon-box {
    min-width: 48px; height: 48px; background: #f0f9ff; color: #0ea5e9;
    border-radius: 14px; display: flex; justify-content: center; align-items: center; font-size: 18px;
}
.channel-detail span { display: block; font-size: 12px; color: #94a3b8; font-weight: 700; text-transform: uppercase; }
.channel-detail p { font-size: 15px; color: #1e293b; font-weight: 600; margin-top: 2px; }


/* ========================================== */
/* ROW 2: SHARE YOUR EXPERIENCE CODES         */
/* ========================================== */
.form-experience-block {
    width: 100%; background: linear-gradient(135deg, #4dabf7 0%, #228be6 100%);
    border-radius: 24px; padding: 50px 45px; box-shadow: 0 20px 45px rgba(34, 139, 230, 0.2);
}
.form-heading-center { text-align: center; margin-bottom: 45px; color: #ffffff; }
.form-main-title { font-size: 2.2rem; font-weight: 800; margin-top: 12px; }
.form-subtitle { font-size: 15px; color: #e0f2fe; margin-top: 10px; opacity: 0.95; }

/* Floating Label Inputs Matrix */
.experience-inputs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.input-floating-group { position: relative; width: 100%; }
.textarea-full-width { grid-column: span 3; } /* Textarea memanjang full lebar kolom */

.input-floating-group input, 
.input-floating-group select, 
.input-floating-group textarea {
    width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px;
    color: #ffffff; font-size: 15px; outline: none; font-weight: 500;
    transition: all 0.3s ease;
}
.input-floating-group select option { color: #334155; }

/* Label Animatif Mengambang */
.input-floating-group label {
    position: absolute; left: 16px; top: 15px; color: rgba(255, 255, 255, 0.75);
    font-size: 15px; pointer-events: none; transition: all 0.3s ease; font-weight: 500;
}
.input-floating-group textarea ~ label { top: 15px; }

/* Fokus & Validasi Animasi Naik Label */
.input-floating-group input:focus ~ label,
.input-floating-group input:not(:placeholder-shown) ~ label,
.input-floating-group select:focus ~ label,
.input-floating-group select:valid ~ label,
.input-floating-group textarea:focus ~ label,
.input-floating-group textarea:not(:placeholder-shown) ~ label {
    top: -10px; left: 12px; font-size: 12px; padding: 0 6px;
    background: #3b82f6; border-radius: 4px; color: #ffffff; font-weight: 700;
}

/* Glowing Focus Underline Target */
.input-focus-line {
    position: absolute; bottom: 0; left: 50%; width: 0; height: 3px;
    background: #ffffff; border-radius: 10px; transition: all 0.3s ease;
}
.input-floating-group input:focus ~ .input-focus-line,
.input-floating-group select:focus ~ .input-focus-line,
.input-floating-group textarea:focus ~ .input-focus-line {
    width: 100%; left: 0;
}

/* Tombol Submit */
.form-submit-container { grid-column: span 3; display: flex; justify-content: center; margin-top: 10px; }
.btn-submit-experience {
    background: #ffffff; color: #228be6; font-weight: 700; font-size: 14px;
    padding: 14px 35px; border: none; border-radius: 50px; cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06); display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease;
}
.btn-submit-experience:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.15); background: #f8fafc; }


/* ========================================== */
/* ROW 3: INTERACTIVE FAQ ACCORDION           */
/* ========================================== */
.faq-header-center { text-align: center; }
.faq-main-title { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-top: 10px; }

.faq-accordion-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-accordion-item {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01); transition: border 0.3s ease;
}
.faq-accordion-trigger {
    width: 100%; padding: 22px 28px; background: transparent; border: none;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    text-align: left; color: #1e293b; font-size: 16px; font-weight: 700;
}
.faq-arrow { color: #94a3b8; font-size: 14px; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }

/* Konten Tersembunyi */
.faq-accordion-content {
    max-height: 0; overflow: hidden; padding: 0 28px;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), padding 0.4s ease;
}
.faq-accordion-content p { font-size: 14.5px; line-height: 1.7; color: #64748b; text-align: justify; padding-bottom: 22px; }

/* STATE AKTIF ACCORDION (Kunci Animasi Meluncur via JS) */
.faq-accordion-item.faq-active { border-color: #38bdf8; }
.faq-accordion-item.faq-active .faq-arrow { transform: rotate(180deg); color: #0ea5e9; }
.faq-accordion-item.faq-active .faq-accordion-content { max-height: 300px; }


/* ACCELERATED HARDWARE PAGE FADE IN LOAD */
.fade-in-element {
    opacity: 0; transform: translateY(20px);
    animation: fadeInUpContact 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.split-info-block { animation-delay: 0.1s; }
.form-experience-block { animation-delay: 0.3s; }
.faq-block { animation-delay: 0.5s; }

@keyframes fadeInUpContact { to { opacity: 1; transform: translateY(0); } }

/* ========================================== */
/* RESPONSIVE LAYOUT BREAKPOINTS MEDIA QUERY  */
/* ========================================== */

/* TABLET */
@media (max-width: 992px) {

    .contact-page-container {
        gap: 50px;
        padding: 0 20px;
        margin: 30px auto;
    }

    .info-grid-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .experience-inputs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .textarea-full-width,
    .form-submit-container {
        grid-column: span 1;
    }

    .location-side-card,
    .contact-side-card,
    .form-experience-block {
        padding: 30px;
    }

    .contact-row-title,
    .form-main-title,
    .faq-main-title {
        font-size: 1.9rem;
    }

    .maps-wrapper-frame {
        height: 260px;
    }
}


/* MOBILE */
@media (max-width: 768px) {

    /* Container */
    .contact-page-container {
        margin: 24px auto 40px;
        padding: 0 16px;
        gap: 40px;
    }

    .contact-section {
        width: 100%;
    }

    /* Card */
    .location-side-card,
    .contact-side-card,
    .form-experience-block {
        padding: 24px 18px;
        border-radius: 20px;
    }

    /* Heading */
    .contact-row-title,
    .form-main-title,
    .faq-main-title {
        font-size: 1.7rem;
        line-height: 1.3;
    }

    .form-subtitle {
        font-size: 14px;
        line-height: 1.7;
        padding: 0 5px;
    }

    .badge-blue {
        font-size: 10px;
        padding: 6px 14px;
        letter-spacing: 1px;
    }

    /* Maps */
    .maps-wrapper-frame {
        height: 220px;
        border-radius: 14px;
    }

    .address-paragraph {
        font-size: 14px;
        margin: 16px 0 20px;
        line-height: 1.7;
    }

    /* Contact list */
    .contact-channels-list {
        gap: 18px;
        margin-top: 24px;
    }

    .contact-channels-list li {
        align-items: flex-start;
        gap: 14px;
    }

    .channel-icon-box {
        min-width: 44px;
        height: 44px;
        font-size: 16px;
        border-radius: 12px;
    }

    .channel-detail span {
        font-size: 11px;
    }

    .channel-detail p {
        font-size: 14px;
        line-height: 1.6;
        word-break: break-word;
    }

    /* Form */
    .experience-inputs-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .input-floating-group input,
    .input-floating-group select,
    .input-floating-group textarea {
        font-size: 14px;
        padding: 14px;
        border-radius: 12px;
    }

    .input-floating-group label {
        font-size: 14px;
        left: 14px;
    }

    .input-floating-group input:focus ~ label,
    .input-floating-group input:not(:placeholder-shown) ~ label,
    .input-floating-group select:focus ~ label,
    .input-floating-group select:valid ~ label,
    .input-floating-group textarea:focus ~ label,
    .input-floating-group textarea:not(:placeholder-shown) ~ label {
        top: -10px;
        left: 10px;
        font-size: 11px;
    }

    .textarea-full-width,
    .form-submit-container {
        grid-column: span 1;
    }

    .form-submit-container {
        margin-top: 8px;
    }

    .btn-submit-experience {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 14px;
        border-radius: 16px;
    }

    /* FAQ */
    .faq-accordion-container {
        gap: 12px;
    }

    .faq-accordion-item {
        border-radius: 14px;
    }

    .faq-accordion-trigger {
        padding: 18px;
        gap: 16px;
        align-items: flex-start;
        font-size: 14px;
        line-height: 1.6;
    }

    .faq-accordion-trigger span {
        flex: 1;
    }

    .faq-arrow {
        margin-top: 4px;
        flex-shrink: 0;
    }

    .faq-accordion-content {
        padding: 0 18px;
    }

    .faq-accordion-content p {
        font-size: 13.5px;
        line-height: 1.8;
        text-align: left;
        padding-bottom: 18px;
    }

    .faq-accordion-item.faq-active .faq-accordion-content {
        max-height: 500px;
    }
}


/* SMALL MOBILE */
@media (max-width: 480px) {

    .contact-page-container {
        padding: 0 14px;
    }

    .location-side-card,
    .contact-side-card,
    .form-experience-block {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .contact-row-title,
    .form-main-title,
    .faq-main-title {
        font-size: 1.45rem;
    }

    .badge-blue {
        font-size: 9px;
        padding: 5px 12px;
    }

    .maps-wrapper-frame {
        height: 200px;
    }

    .btn-submit-experience {
        font-size: 13px;
        padding: 13px 18px;
    }

    .faq-accordion-trigger {
        font-size: 13.5px;
        padding: 16px;
    }

    .faq-accordion-content p {
        font-size: 13px;
    }
}



/* =========================
   NO DATA PAGE
========================= */

.no-data-page{
    width: 100%;
    min-height: 420px;

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

    padding: 50px 20px;
}

.no-data-wrapper{
    text-align: center;
    max-width: 500px;
    animation: fadeNoData .5s ease;
}

.no-data-image{
    width: 220px;
    max-width: 100%;
    margin-bottom: 28px;

    user-select: none;
    pointer-events: none;

    opacity: .95;
}

.no-data-title{
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 14px;
}

.no-data-description{
    font-size: 1rem;
    line-height: 1.8;
    color: #64748b;
    max-width: 430px;
    margin: auto;
}

/* Animation */
@keyframes fadeNoData{
    from{
        opacity: 0;
        transform: translateY(20px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile */
@media(max-width:768px){

    .no-data-page{
        min-height: 350px;
        padding: 40px 20px;
    }

    .no-data-image{
        width: 170px;
    }

    .no-data-title{
        font-size: 1.55rem;
    }

    .no-data-description{
        font-size: .95rem;
    }
}



/* KEGIATAN */
/* Container & Grid */
.activity-section { padding: 60px 20px; max-width: 1200px; margin: auto; }
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }

/* Card Styling */
.activity-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: 0.4s; cursor: pointer; }
.activity-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.activity-img { height: 220px; background-size: cover; background-position: center; }
.activity-info { padding: 25px; text-align: center; }
.activity-info h3 { margin: 0; font-size: 1.2rem; color: #2d3436; }

/* Skeleton */
.activity-skeleton { animation: pulse 1.5s infinite; }
.activity-img-skeleton { height: 220px; background: #f0f0f0; }
.activity-text-skeleton { height: 20px; background: #f0f0f0; margin: 20px; border-radius: 4px; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* Pagination */
.activity-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.activity-pagination button { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; background: #f8f9fa; transition: 0.3s; }
.activity-pagination button.active { background: #009EF7; color: #fff; }

/* Modal */
/* ==========================
   ACTIVITY MODAL
========================== */

.activity-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

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

    padding: 20px;
    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
}

.activity-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.activity-modal-box {
    background: #fff;
    width: 100%;
    max-width: 920px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;

    box-shadow:
        0 25px 80px rgba(0,0,0,.18);

    transform: translateY(30px) scale(.96);
    transition: .35s ease;

    max-height: 92vh;
    overflow-y: auto;
}

.activity-modal-overlay.is-visible .activity-modal-box {
    transform: translateY(0) scale(1);
}

.activity-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);

    font-size: 22px;
    cursor: pointer;
    z-index: 10;

    transition: .25s ease;
}

.activity-close:hover {
    transform: rotate(90deg);
}

/* ==========================
   HEADER IMAGE
========================== */

.activity-modal-cover {
    position: relative;
    height: 380px;
    overflow: hidden;
}

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

.activity-modal-cover::after {
    content: '';
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.65),
            rgba(0,0,0,.15),
            transparent
        );
}

.activity-content {
    padding: 35px;
}

.activity-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: #eff6ff;
    color: #2563eb;

    padding: 10px 18px;
    border-radius: 999px;

    font-size: .9rem;
    font-weight: 600;

    margin-bottom: 18px;
}

.activity-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
    margin-bottom: 20px;
}

.activity-description {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.9;
}

/* ==========================
   LOADER
========================== */

.activity-loader {
    padding: 30px;
}

.activity-loader-image {
    height: 320px;
    border-radius: 24px;
    margin-bottom: 20px;
}

.activity-loader-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.line {
    height: 16px;
    border-radius: 100px;
}

.w-90 { width: 90%; }
.w-70 { width: 70%; }
.w-40 { width: 40%; }

.shimmer {
    background:
        linear-gradient(
            90deg,
            #ececec 25%,
            #f8f8f8 50%,
            #ececec 75%
        );

    background-size: 200% 100%;

    animation: shimmer 1.4s infinite linear;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px) {

    .activity-modal-box {
        border-radius: 24px;
    }

    .activity-modal-cover {
        height: 250px;
    }

    .activity-content {
        padding: 24px;
    }

    .activity-title {
        font-size: 1.45rem;
    }
}


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

.museum-agenda-section {
    background: #f9fafb;
    padding: 90px 0;
    overflow: hidden;
}

/* ==========================
   HEADING
========================== */

.museum-agenda-heading {
    text-align: center;
    margin-bottom: 45px;
}

.museum-agenda-subtitle {
    display: inline-block;

    color: #2563eb;
    font-weight: 600;
    font-size: .95rem;

    margin-bottom: 12px;
}

.museum-agenda-title {
    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight: 750;
    color: #111827;
    margin: 0;
}

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

.museum-agenda-card {
    width: 78%;
    height: 480px;

    margin: auto;

    background: white;
    border-radius: 34px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(0,0,0,.05);

    transition: .5s ease;
}

.swiper-slide:not(.swiper-slide-active)
.museum-agenda-card {
    transform: scale(.94);
    opacity: .5;
}

.museum-agenda-image {
    height: 260px;
    overflow: hidden;
}

.museum-agenda-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 1.4s ease;
}

.swiper-slide-active
.museum-agenda-image img {
    transform: scale(1.05);
}

/* ==========================
   CONTENT
========================== */

.museum-agenda-content {
    padding: 28px;
}

.museum-agenda-label {
    display: inline-flex;
    align-items: center;

    background: #eff6ff;
    color: #2563eb;

    padding: 10px 18px;
    border-radius: 999px;

    font-size: .85rem;
    font-weight: 600;

    margin-bottom: 14px;
}

.museum-agenda-date {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #6b7280;
    font-size: .9rem;

    margin-bottom: 16px;
}

.museum-agenda-date span {
    width: 20px;
    height: 1px;
    background: #d1d5db;
}

.museum-agenda-name {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.35;
    color: #111827;

    margin-bottom: 24px;
}

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

.museum-agenda-btn {
    border: none;
    height: 52px;
    padding: 0 22px;

    border-radius: 999px;

    background: #111827;
    color: white;

    font-size: .92rem;
    font-weight: 600;

    cursor: pointer;
    transition: .3s ease;
}

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

/* ==========================
   PAGINATION
========================== */

.museum-agenda-pagination {
    margin-top: 35px;
    text-align: center;
}

.museum-agenda-pagination
.swiper-pagination-bullet {
    width: 36px;
    height: 4px;
    border-radius: 999px;

    background: #d1d5db;
    opacity: 1;
}

.museum-agenda-pagination
.swiper-pagination-bullet-active {
    background: #2563eb;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .museum-agenda-section {
        padding: 65px 0;
    }

    .museum-agenda-card {
        width: 92%;
        height: auto;
        border-radius: 26px;
    }

    .museum-agenda-image {
        height: 220px;
    }

    .museum-agenda-content {
        padding: 22px;
    }

    .museum-agenda-name {
        font-size: 1.25rem;
    }
}

/* ==========================
   SKELETON
========================== */

.agenda-skeleton-container{
    display:none;
    justify-content:center;
    align-items:center;
    width:100%;
}

.agenda-skeleton-card{

    width:78%;
    height:480px;

    border-radius:34px;
    overflow:hidden;

    background:white;

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.05);
}

.agenda-skeleton-image{
    width:100%;
    height:260px;
}

.agenda-skeleton-content{
    padding:28px;
}

.agenda-skeleton-badge{
    width:160px;
    height:40px;
    border-radius:999px;
    margin-bottom:20px;
}

.agenda-skeleton-date{
    width:220px;
    height:16px;
    border-radius:999px;
    margin-bottom:20px;
}

.agenda-skeleton-title{
    width:70%;
    height:24px;
    border-radius:12px;
    margin-bottom:14px;
}

.agenda-skeleton-title.short{
    width:45%;
}

.agenda-skeleton-button{
    width:170px;
    height:52px;
    border-radius:999px;
    margin-top:30px;
}

/* shimmer effect */

.shimmer{

    background:
    linear-gradient(
        90deg,
        #ececec 25%,
        #f8f8f8 50%,
        #ececec 75%
    );

    background-size:
        200% 100%;

    animation:
        shimmerMove
        1.2s linear infinite;
}

@keyframes shimmerMove{

    0%{
        background-position:
            200% 0;
    }

    100%{
        background-position:
            -200% 0;
    }
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .agenda-skeleton-card{
        width:92%;
        height:430px;
        border-radius:26px;
    }

    .agenda-skeleton-image{
        height:220px;
    }

    .agenda-skeleton-content{
        padding:22px;
    }
}


/* Modal */
/* ==========================
   AGENDA MODAL
========================== */

.agenda-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

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

    padding: 20px;
    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
}

.agenda-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.agenda-modal-box {
    background: #fff;
    width: 100%;
    max-width: 920px;
    border-radius: 28px;
    overflow: hidden;
    position: relative;

    box-shadow:
        0 25px 80px rgba(0,0,0,.18);

    transform: translateY(30px) scale(.96);
    transition: .35s ease;

    max-height: 92vh;
    overflow-y: auto;
}

.agenda-modal-overlay.is-visible .agenda-modal-box {
    transform: translateY(0) scale(1);
}

.agenda-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);

    font-size: 22px;
    cursor: pointer;
    z-index: 10;

    transition: .25s ease;
}

.agenda-close:hover {
    transform: rotate(90deg);
}

/* ==========================
   HEADER IMAGE
========================== */

.agenda-modal-cover {
    position: relative;
    height: 380px;
    overflow: hidden;
}

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

.agenda-modal-cover::after {
    content: '';
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.65),
            rgba(0,0,0,.15),
            transparent
        );
}

.agenda-content {
    padding: 35px;
}

.agenda-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: #eff6ff;
    color: #2563eb;

    padding: 10px 18px;
    border-radius: 999px;

    font-size: .9rem;
    font-weight: 600;

    margin-bottom: 18px;
}

.agenda-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    color: #111827;
    margin-bottom: 20px;
}

.agenda-description {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.9;
}

/* ==========================
   LOADER
========================== */

.agenda-loader {
    padding: 30px;
}

.agenda-loader-image {
    height: 320px;
    border-radius: 24px;
    margin-bottom: 20px;
}

.agenda-loader-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.line {
    height: 16px;
    border-radius: 100px;
}

.w-90 { width: 90%; }
.w-70 { width: 70%; }
.w-40 { width: 40%; }

.shimmer {
    background:
        linear-gradient(
            90deg,
            #ececec 25%,
            #f8f8f8 50%,
            #ececec 75%
        );

    background-size: 200% 100%;

    animation: shimmer 1.4s infinite linear;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px) {

    .agenda-modal-box {
        border-radius: 24px;
    }

    .agenda-modal-cover {
        height: 250px;
    }

    .agenda-content {
        padding: 24px;
    }

    .agenda-title {
        font-size: 1.45rem;
    }
}


/* ==========================
   OVERLAY
========================== */

.gallery-modal-overlay{

    position:fixed;
    inset:0;

    background:
        rgba(15,23,42,.78);

    backdrop-filter:
        blur(14px);

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

    padding:28px;

    z-index:999999;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    pointer-events:none;
}

.gallery-modal-overlay.is-visible{

    opacity:1;
    visibility:visible;

    pointer-events:auto;
}

/* ==========================
   BOX
========================== */

.gallery-modal-container{

    position:relative;

    width:100%;
    max-width:1180px;

    background:#fff;

    border-radius:34px;

    overflow:hidden;

    box-shadow:
        0 40px 90px
        rgba(0,0,0,.25);

    transform:
        translateY(24px)
        scale(.96);

    transition:.35s ease;

    max-height:88vh;
}

.gallery-modal-overlay.is-visible
.gallery-modal-container{

    transform:
        translateY(0)
        scale(1);
}

/* ==========================
   CLOSE
========================== */

.gallery-modal-close{

    position:absolute;

    top:20px;
    right:20px;

    width:54px;
    height:54px;

    border:none;
    border-radius:50%;

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

    cursor:pointer;

    z-index:1000;

    font-size:1.15rem;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.1);

    transition:.25s ease;
}

.gallery-modal-close:hover{

    transform:
        rotate(90deg)
        scale(1.08);
}

/* ==========================
   BODY LAYOUT
========================== */

.gallery-modal-layout{

    display:grid;
    grid-template-columns:
        48% 52%;

    min-height:650px;
}

/* ==========================
   IMAGE SIDE
========================== */

.gallery-modal-cover{

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #f8fafc
        );

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

    padding:50px;

    position:relative;
}

.gallery-modal-cover::before{

    content:'';

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
        rgba(59,130,246,.08);

    filter:blur(60px);
}

.gallery-modal-cover img{

    position:relative;
    z-index:2;

    width:100%;
    max-width:520px;

    max-height:520px;

    object-fit:contain;
}

/* ==========================
   CONTENT SIDE
========================== */

.gallery-content{

    overflow-y:auto;
    max-height:88vh;

    padding:70px 55px 50px;
}

.gallery-content::-webkit-scrollbar{
    width:6px;
}

.gallery-content::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:999px;
}

.gallery-badge{

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

    padding:12px 18px;

    border-radius:999px;

    background:#eff6ff;
    color:#2563eb;

    font-weight:600;

    margin-bottom:22px;
}

.gallery-title{

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

    line-height:1.25;

    color:#111827;

    margin-bottom:28px;
}

.gallery-description{

    color:#4b5563;

    line-height:2;

    text-align:justify;
}

/* ==========================
   SKELETON
========================== */

.gallery-loader-layout{

    display:grid;
    grid-template-columns:
        48% 52%;
}

.gallery-loader-image{

    height:650px;
}

.gallery-loader-content{

    padding:80px 55px;

    display:flex;
    flex-direction:column;
    gap:16px;
}

.line{
    height:18px;
    border-radius:999px;
}

.w-90{width:90%;}
.w-70{width:70%;}
.w-40{width:40%;}

/* ==========================
   SHIMMER
========================== */

.shimmer{

    background:
        linear-gradient(
            90deg,
            #ececec 25%,
            #f8f8f8 50%,
            #ececec 75%
        );

    background-size:
        200% 100%;

    animation:
        shimmer 1.2s linear infinite;
}

@keyframes shimmer{

    from{
        background-position:
            200% 0;
    }

    to{
        background-position:
            -200% 0;
    }
}

/* ==========================
   MOBILE
========================== */

@media(max-width:900px){

    /* overlay boleh scroll */
    .gallery-modal-overlay{

        align-items:flex-start;

        overflow-y:auto;

        padding:16px;

        -webkit-overflow-scrolling:
            touch;
    }

    /* modal lebih natural */
    .gallery-modal-container{

        margin:auto 0;

        width:100%;

        max-height:none;

        overflow:visible;

        border-radius:26px;
    }

    /* layout vertical */
    .gallery-modal-layout{

        display:flex;
        flex-direction:column;
    }

    /* image top */
    .gallery-modal-cover{

        min-height:280px;

        padding:28px;
    }

    .gallery-modal-cover img{

        max-height:260px;
        width:100%;
    }

    /* content normal */
    .gallery-content{

        overflow:visible;

        max-height:none;

        padding:28px;
    }

    .gallery-title{

        font-size:1.65rem;
    }

    /* skeleton */
    .gallery-loader-layout{

        display:flex;
        flex-direction:column;
    }

    .gallery-loader-image{

        height:260px;
    }

    .gallery-loader-content{

        padding:28px;
    }

    /* close btn */
    .gallery-modal-close{

        position:fixed;

        top:20px;
        right:20px;

        width:48px;
        height:48px;

        z-index:999999;
    }
}