:root { --primary-gold: #b8860b; }
body {
background-color: #f4f4f4;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding-top: 55px; /* Supaya konten tidak tertutup navbar fixed */
}

/* NAVBAR STYLES */
.container.py-4 {
    padding-top: 10px !important; /* Mengecilkan jarak padding atas container */
}

.container.py-5 {
    padding-top: 5px !important; /* Mengecilkan jarak padding atas container */

}
.container.py-6 {
    margin-top: 25px !important; /* Mengecilkan jarak padding atas container */
    margin-bottom: 25px !important; /* Mengecilkan jarak padding atas container */

}
/* Pastikan isi dropdown tersusun ke bawah, bukan ke samping */
/* --- NAVIGASI GLOBAL --- */
.nav-item.dropdown { position: relative; }

/* Dropdown Dasar */
.dropdown-menu {
    min-width: 200px;
    background-color: #ffffff;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 0;
    padding: 10px 0;

}

/* --- TAMPILAN DESKTOP (992px ke atas) --- */
@media (min-width: 992px) {
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
    }

    .dropdown-submenu { position: relative; }

    /* Posisikan Grand Menu di sebelah kanan */
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -10px;
        display: none;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block !important;
    }
}



       /* SLIDER SETTINGS */
        #mainSlider .carousel-item { background-color: #000; height: 300px; }
        #mainSlider img { width: 100%; height: 100%; object-fit: cover; }
        /* Styling khusus untuk caption slider */
.custom-cap {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); /* Overlay gelap di bawah teks */
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 10% 40px; /* Jarak aman dari bawah */
    text-align: left; /* Teks rata kiri, bisa diubah ke center jika mau */
}

.custom-cap h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: #b8860b; /* Warna gold agar senada dengan tema */
}

.custom-cap p {
    font-size: 0.85rem;
    font-weight: 300;
    margin-bottom: 0;
    line-height: 1.4;
    color: #fff;
    opacity: 0.9;
    /* Limit ke 2 baris jika teks terlalu panjang */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Penyesuaian untuk layar HP */
@media (max-width: 768px) {
    .custom-cap {
        padding: 10px 15px 25px;
    }
    .custom-cap h5 {
        font-size: 0.9rem;
    }
    .custom-cap p {
        font-size: 0.75rem;
    }
}
        @media (min-width: 992px) {
            #mainSlider .carousel-item { height: 500px; }
            #mainSlider img { object-fit: contain; }
        }


        /* CARD UPDATES */
        .card-post {
            background: #fff; border-radius: 8px; overflow: hidden;
            cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: 0.3s; height: 100%;
        }
        .card-post:hover { transform: translateY(-5px); }
        .img-wrapper { position: relative; aspect-ratio: 1/1; background: #eee; }
        .img-wrapper img { width: 100%; height: 100%; object-fit: cover; }

        .play-badge {
            position: absolute; top: 10px; right: 10px;
            background: rgba(0,0,0,0.6); color: #fff;
            padding: 2px 8px; border-radius: 4px; font-size: 0.7rem;
        }

        .post-info { padding: 12px; }
        .post-caption-preview {
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; font-size: 0.8rem; color: #444; line-height: 1.4; height: 2.3em;
        }

        /* FOOTER STYLES */
        footer { background-color: #1a1a1a; color: #ffffff; padding: 60px 0 0; font-size: 0.85rem; }
        footer h5 { font-size: 1rem; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; color: #fff; border-bottom: 2px solid #333; padding-bottom: 10px; display: inline-block; }
        footer h6 { font-size: 1rem; font-weight: bold; text-transform: uppercase; margin-bottom: 1px; margin-top: 20px; color: #fff; border-bottom: 2px solid #333; padding-bottom: 1px; display: inline-block; }
        footer p, footer li { color: #bbb; line-height: 1.6; }
        footer ul { list-style: none; padding: 0; }
        footer .category-list li { border-bottom: 1px dashed #333; padding: 5px 0; }
        footer .category-list a { color: #bbb; text-decoration: none; }
        footer .category-list a:hover { color: #fff; }

        footer .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 15px; }
        footer .photo-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid #333; }

        /* BOTTOM BAR FIX */
        .bottom-bar { background-color: #111; padding: 25px 0; margin-top: 50px; width: 100%; border-top: 1px solid #222; }
        .bottom-bar-flex { display: flex; justify-content: space-between; align-items: center; }
        .copyright-text { color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
        .bottom-nav { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; }
        .bottom-nav a { color: #666; text-decoration: none; font-size: 11px; font-weight: bold; }
        .bottom-nav a:hover { color: #fff; }

        /* RESPONSIVE MOBILE */
        @media (max-width: 768px) {
            .bottom-bar-flex { flex-direction: column-reverse; gap: 20px; text-align: center; }
            .bottom-nav { flex-wrap: wrap; justify-content: center; gap: 10px; }
            .bottom-nav li { width: 100%; border-bottom: 1px solid #222; padding-bottom: 5px; }
        }

        /* MODAL STYLES */
        #modalMediaContent img.zoomed { transform: scale(1.5); cursor: zoom-out; }
        .modal-caption-full { max-height: 150px; overflow-y: auto; padding: 15px; font-size: 0.9rem; }


/* VISI MISI */
/* Container Utama Visi Misi */
.visi-misi-section {
    position: relative;
    background-color: #ffffff;
    /* Jarak atas 0 agar mepet slider, jarak bawah 100px agar menjauh dari Archived Updates */
    padding: 0 0 100px 0;
    color: #2c2c2c;
    overflow: hidden;
    /* Menarik paksa section ke atas agar menempel sempurna dengan slider */
    margin-top: 5px;
    margin-bottom: 30px;
    z-index: 10;
}

/* Layer Background dengan Opacity 20% */
.visi-misi-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/image/back_hs.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 1;
}

.visi-misi-section .container {
    position: relative;
    z-index: 2;
}

/* Judul dengan Underline Gold */
.title-gold {
    color: #b8860b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 4px;
    font-size: 1.8rem;
    margin-top: 15px;
    margin-bottom: 5px;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px; /* Ruang untuk garis */
}

/* Garis Underline Gold */
.title-gold::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 25%; /* Garis berada di tengah */
    width: 50%; /* Panjang garis 50% dari lebar judul */
    height: 3px;
    background-color: #b8860b;
}

.label-mini {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: #888;
    font-weight: 600;
    display: block;
    margin-top: 10px; /* Jarak dari batas atas slider */
    margin-bottom: 15px;
}
.label-mini-visi {
    text-transform: uppercase;
    font-size: 1.0rem;
    letter-spacing: 4px;
    color: #000;
    font-weight: 600;
    display: block;
    margin-top: 5px; /* Jarak dari batas atas slider */
    margin-bottom: 5px;
}
.text-mini {
    text-transform: uppercase;
    font-size: 0.7rem;
    color: #888;
    font-style: italic
}

.text-pendiri {
    font-size: 1.4rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    color: #333;
    max-width: 1050px;
    margin: 20px auto 40px auto;
}
.text-visi-misi {
    font-size: 1.4rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    color: #333;
    max-width: 1050px;
    margin: 20px auto 40px auto;
}
.text-sejarah {
    font-size: 1.4rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    color: #333;
    max-width: 1050px;
    margin: 20px auto 40px auto;
}
.text-satelit {
    font-size: 1.4rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    color: #333;
    max-width: 1050px;
    margin: 20px auto 40px auto;
}

.text-visi {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.3;
    color: #333;
    max-width: 850px;
    margin: 0 auto 0px auto;
}
.text-visi-i {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.6;
    color: #333;
    max-width: 850px;
    margin: 0 auto 15px auto;
    font-style: italic
}

/* Menghilangkan margin bawah pada slider agar tidak ada celah */
.carousel {
    margin-bottom: 0 !important;
}


/* Styling Ikon Sosial Media Footer */
.social-link {
    color: #ffffff; /* Warna putih awal */
    font-size: 1.8rem; /* Ukuran ikon */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.social-link:hover {
    color: #b8860b; /* Berubah jadi warna Gold saat di-hover */
    transform: translateY(-3px); /* Efek sedikit naik saat di-hover */
}

/* Warna spesifik saat hover jika ingin lebih berwarna BAGIAN POST.PHP */
.social-link .bi-instagram:hover { color: #E1306C; }
.social-link .bi-facebook:hover { color: #1877F2; }
.social-link .bi-youtube:hover { color: #FF0000; }


.pagination .page-link {
    color: #333;
    border: none;
    margin: 0 3px;
    border-radius: 5px;
}

.pagination .page-item.active .page-link {
    background-color: #b8860b !important; /* Warna Gold */
    border-color: #b8860b !important;
    color: white;
}

.pagination .page-link:hover {
    background-color: #eee;
}

/* BAGIAN IMAGE GALLERY */
/* Kontainer pembungkus foto cover */
.img-wrapper {
    width: 100%;
    height: 220px;     /* Atur tinggi kotak agar semua album seragam */
    overflow: hidden;  /* Memastikan foto yang lebih besar tidak keluar kotak */
    display: block;
}

/* Pengaturan gambar agar memenuhi kotak */
.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* KUNCI: Foto akan dipotong otomatis agar memenuhi kotak */
    object-position: center; /* Memastikan bagian tengah foto tetap terlihat */
    transition: transform 0.6s ease; /* Untuk efek hover zoom sebelumnya */
}
/* Styling dasar Card */
.card-album {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transisi halus */
    cursor: pointer;
    border: none;
    background: #fff;
}

/* Efek saat Mouse Hover di Card */
.card-album:hover {
    transform: translateY(-10px); /* Card naik sedikit ke atas */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important; /* Bayangan lebih tegas */
}

/* Efek Zoom pada Gambar Cover */
.img-wrapper {
    overflow: hidden; /* Penting agar gambar tidak keluar kotak saat zoom */
    border-radius: 15px 15px 0 0; /* Menyesuaikan rounding atas card */
}

.img-wrapper img {
    transition: transform 0.6s ease; /* Transisi zoom gambar */
}

.card-album:hover .img-wrapper img {
    transform: scale(1.1); /* Gambar membesar sedikit */
}

/* Efek pada Teks dan Icon */
.card-album .btn-link {
    transition: color 0.3s ease;
    text-decoration: none;
    color: #6c757d;
}

.card-album:hover .btn-link {
    color: #b08d57; /* Ubah ke warna gold/dark sesuai tema JKI */
}

.card-album:hover h6 {
    color: #b08d57;
}

/* ===== FIX NAVBAR MOBILE CLEAN (VERSI RAPI) ===== */
@media (max-width: 991px) {
    .navbar-collapse {
        max-height: 85vh;
        overflow-y: auto;
    }

    /* Reset Dropdown untuk Mobile */
    .dropdown-menu {
        display: none;
        width: 100%;
        position: static;
        float: none;
        border-left: 3px solid #b8860b;
        background-color: #fafafa !important;
        box-shadow: none;
        margin: 0;
        padding: 5px 0;
    }

    /* Tampilkan jika ada class .show dari Bootstrap atau JS */
    .dropdown-menu.show {
        display: block !important;
    }

    /* Styling Submenu (Child Menu) */
    .dropdown-submenu .dropdown-menu {
        margin-left: 1.5rem !important;
        margin-right: 1rem !important;
        border-left: 2px solid #b8860b !important;
        background-color: #fcfcfc !important;
    }

    .dropdown-item {
        padding: 10px 20px;
        white-space: normal;
    }

    /* Indikator Panah Submenu */
    .dropdown-submenu > .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.5em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
        transform: rotate(-90deg);
        transition: transform 0.3s;
    }

    /* Putar panah saat submenu terbuka */
    .dropdown-submenu > .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(0deg);
    }
}