:root {
            --navy-dark: #0a192f;
            --navy-main: #0d233a;
            --navy-light: #172a45;
            --yellow-bright: #ffcc00;
            --yellow-hover: #e6b800;
        }

        /* Efek Transisi Body untuk Fade In / Fade Out */
        body {
            background-color: #f4f6f9;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            transition: opacity 0.4s ease-in-out;
        }

        body.page-loaded {
            opacity: 1;
        }

        body.page-fade-out {
            opacity: 0;
        }

        /* Animasi Konten Masuk (Fade In + Slide Up halus) */
        @keyframes fadeInSlide {
            from {
                opacity: 0;
                transform: translateY(15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in {
            animation: fadeInSlide 0.5s ease-out forwards;
        }

        .bg-navy { background-color: var(--navy-main) !important; }
        .bg-navy-dark { background-color: var(--navy-dark) !important; }
        .bg-yellow { background-color: var(--yellow-bright) !important; }
        
        .text-navy { color: var(--navy-main) !important; }
        .text-yellow { color: var(--yellow-bright) !important; }

        .navbar-navy {
            background-color: var(--navy-main);
            border-bottom: 3px solid var(--yellow-bright);
        }
        .navbar-navy .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            padding: 10px 14px !important;
            margin: 0 2px;
            border-radius: 6px;
            transition: background-color 0.2s, color 0.2s;
        }
        .navbar-navy .nav-link:hover, .navbar-navy .nav-link.active {
            color: var(--navy-dark) !important;
            background-color: var(--yellow-bright);
        }
        .map-footer { max-width: 280px; }
        .media-home-thumb { min-height: 190px; height: 190px; overflow: hidden; }
        .media-home-thumb img, .media-home-thumb video { width:100%; height:190px; object-fit:cover; display:block; }
        .media-fallback { height:190px; display:flex; align-items:center; justify-content:center; }

        .agenda-marquee {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            cursor: default;
        }
        .agenda-marquee marquee {
            width: 100%;
        }
        .archive-card { border:1px solid #e5e9ef; border-left:4px solid var(--yellow-bright); transition:transform .2s ease, box-shadow .2s ease; }
        .archive-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(10,25,47,.10); }
        .archive-icon { width:48px; height:48px; border-radius:10px; background:var(--navy-main); color:var(--yellow-bright); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .archive-meta { font-size:.78rem; color:#6c757d; }

        .btn-yellow {
            background-color: var(--yellow-bright);
            color: var(--navy-dark);
            font-weight: 700;
            border: none;
            transition: background-color 0.2s;
        }
        .btn-yellow:hover {
            background-color: var(--yellow-hover);
            color: var(--navy-dark);
        }

        .btn-navy {
            background-color: var(--navy-main);
            color: white;
            font-weight: 600;
            transition: background-color 0.2s;
        }
        .btn-navy:hover {
            background-color: var(--navy-dark);
            color: var(--yellow-bright);
        }

        .hero-section {
            background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-main) 100%);
            border-bottom: 4px solid var(--yellow-bright);
        }

        .card-custom {
            border: none;
            border-top: 4px solid var(--yellow-bright);
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-custom:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        /* Bagan Struktur Organisasi */
        .org-chart { position: relative; padding: 10px 5px 5px; }
        .org-level { position: relative; text-align: center; }
        .org-level-label { display:inline-block; background:var(--navy-main); color:var(--yellow-bright); font-size:.72rem; font-weight:800; letter-spacing:.08em; padding:5px 12px; border-radius:20px; margin-bottom:12px; }
        .org-card { position:relative; height:100%; min-height:170px; padding:24px 18px 18px; background:#fff; border:1px solid #e4e8ee; border-top:4px solid var(--yellow-bright); border-radius:12px; box-shadow:0 5px 18px rgba(10,25,47,.08); transition:transform .25s ease,box-shadow .25s ease; }
        .org-card:hover { transform:translateY(-4px); box-shadow:0 10px 25px rgba(10,25,47,.13); }
        .org-number { position:absolute; top:10px; right:12px; min-width:27px; height:27px; padding:2px 7px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--navy-main); color:var(--yellow-bright); font-size:.78rem; font-weight:800; }
        .org-icon { width:54px; height:54px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--navy-main); color:var(--yellow-bright); font-size:1.35rem; }
        .org-name { color:var(--navy-main); font-weight:800; font-size:1rem; text-transform:uppercase; }
        .org-position { color:#495057; font-weight:600; font-size:.9rem; margin-top:4px; }
        .org-rank,.org-unit { color:#6c757d; font-size:.78rem; margin-top:5px; }
        .org-connector { width:2px; height:28px; margin:0 auto; background:#adb5bd; position:relative; }
        .org-connector span { position:absolute; left:50%; bottom:0; width:9px; height:9px; transform:translate(-50%,50%) rotate(45deg); background:#adb5bd; }
        @media (max-width:576px) { .org-card{min-height:155px;padding:21px 12px 14px;} .org-name{font-size:.9rem;} .org-position{font-size:.82rem;} }

        .icon-circle {
            width: 60px;
            height: 60px;
            background-color: var(--yellow-bright);
            color: var(--navy-dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin: 0 auto 15px;
        }
		
		
	

/* Logo publik: kecil, transparan, sejajar dengan menu */
.navbar.navbar-expand-lg .navbar-brand {
    display:flex !important;
    align-items:center !important;
    height:70px;
    padding:2px 0 !important;
    margin-right:22px !important;
    background:transparent !important;
    box-shadow:none !important;
}

.navbar.navbar-expand-lg .navbar-brand img {
    width:235px !important;
    height:68px !important;
    max-width:235px !important;
    max-height:68px !important;
    object-fit:contain !important;
    object-position:left center !important;
    background:transparent !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin:0 !important;
}

/* Logo saja � tanpa nama instansi */
.navbar.navbar-expand-lg .navbar-brand > div,
.navbar.navbar-expand-lg .navbar-brand .brand-text,
.navbar.navbar-expand-lg .navbar-brand span {
    display:none !important;
}

.navbar.navbar-expand-lg .navbar-nav {
    align-items:center;
}

@media (max-width:991.98px) {
    .navbar.navbar-expand-lg .navbar-brand {
        height:58px;
        margin-right:10px !important;
    }
    .navbar.navbar-expand-lg .navbar-brand img {
        width:175px !important;
        height:52px !important;
        max-width:175px !important;
        max-height:52px !important;
    }
}



/* Logo di tengah Hero dihapus; logo hanya tampil di kiri navbar */
.hero-section .col-lg-5.mt-4.mt-lg-0.text-center {
    display: none !important;
}
.hero-section .col-lg-7 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}



/* =========================================================
   TYPOGRAPHY GLOBAL - COMPACT
   ========================================================= */
html { font-size: 15px; }
body { font-size: .875rem !important; line-height: 1.45; }
h1 { font-size: 1.80rem !important; }
h2 { font-size: 1.50rem !important; }
h3 { font-size: 1.25rem !important; }
h4 { font-size: 1.10rem !important; }
h5 { font-size: .95rem !important; }
h6 { font-size: .875rem !important; }
p, li, label, td, th, small, .small { font-size: .875rem; }
.btn { font-size: .80rem !important; }
.form-control, .form-select, .input-group-text { font-size: .82rem !important; }
.table { font-size: .82rem !important; }
.table th { font-size: .78rem !important; }
.navbar, .nav-link, .dropdown-menu, .dropdown-item { font-size: .82rem !important; }
.card-title { font-size: .98rem !important; }
.card-text { font-size: .82rem !important; }
.alert { font-size: .82rem !important; }
.breadcrumb { font-size: .78rem !important; }
footer { font-size: .78rem !important; }


/* =========================================================
   TEMA FINAL PROFESIONAL - BIRU GELAP + KUNING
   ========================================================= */
:root{
    --bk-navy:#06213d;
    --bk-navy-2:#0a3157;
    --bk-blue:#124f82;
    --bk-blue-soft:#eaf3fa;
    --bk-yellow:#f5c400;
    --bk-yellow-dark:#b48700;
    --bk-text:#18344f;
    --bk-muted:#5d7184;
    --bk-white:#ffffff;
}

/* Latar utama */
body{
    background:var(--bk-navy) !important;
    color:var(--bk-text) !important;
}

/* Navbar */
.navbar.navbar-expand-lg,
.navbar-navy{
    background:linear-gradient(90deg,var(--bk-navy),#0b3b68) !important;
    border-bottom:3px solid var(--bk-yellow) !important;
}
.navbar .nav-link{
    color:#fff !important;
    border-radius:7px;
    transition:all .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .nav-item.show > .nav-link{
    color:#111 !important;
    background:var(--bk-yellow) !important;
}
.navbar .dropdown-menu{
    background:#fff !important;
    border:1px solid #d7e1ea !important;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.navbar .dropdown-item{ color:var(--bk-text) !important; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active{
    color:#111 !important;
    background:var(--bk-yellow) !important;
}

/* Area konten */
.main-content{
    background:#fff !important;
    color:var(--bk-text) !important;
    border-top:1px solid rgba(6,33,61,.12);
    padding-top:2rem !important;
}

/* Judul halaman */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6{
    color:var(--bk-navy) !important;
    font-weight:700;
}
.main-content h1::after,
.main-content h2.section-title::after{
    content:"";
    display:block;
    width:58px;
    height:4px;
    margin-top:8px;
    border-radius:4px;
    background:var(--bk-yellow);
}
.main-content > .container > .text-center h1::after,
.main-content > .container > .text-center h2::after{
    margin-left:auto;
    margin-right:auto;
}

/* Paragraf dan teks */
.main-content,
.main-content p,
.main-content li,
.main-content label,
.main-content td,
.main-content th{
    color:var(--bk-text) !important;
}
.main-content .text-muted{
    color:var(--bk-muted) !important;
}
.main-content a:not(.btn):not(.nav-link){
    color:#a87800 !important;
    font-weight:600;
}
.main-content a:not(.btn):not(.nav-link):hover{
    color:#0b4d82 !important;
}

/* Card: putih bersih dengan aksen biru-kuning */
.main-content .card{
    background:#fff !important;
    color:var(--bk-text) !important;
    border:1px solid #dce7ef !important;
    border-top:4px solid var(--bk-blue) !important;
    border-radius:12px !important;
    box-shadow:0 7px 22px rgba(6,33,61,.09) !important;
    overflow:hidden;
}
.main-content .card .card-header{
    background:var(--bk-navy-2) !important;
    color:#fff !important;
    border-bottom:3px solid var(--bk-yellow) !important;
}
.main-content .card .card-header *,
.main-content .card .card-header h1,
.main-content .card .card-header h2,
.main-content .card .card-header h3,
.main-content .card .card-header h4,
.main-content .card .card-header h5,
.main-content .card .card-header h6{
    color:#fff !important;
}
.main-content .card h1,
.main-content .card h2,
.main-content .card h3,
.main-content .card h4,
.main-content .card h5,
.main-content .card h6{
    color:var(--bk-navy) !important;
}
.main-content .card p,
.main-content .card li,
.main-content .card label,
.main-content .card td,
.main-content .card th,
.main-content .card .text-dark,
.main-content .card .text-navy{
    color:var(--bk-text) !important;
}
.main-content .card .text-muted{
    color:var(--bk-muted) !important;
}

/* Highlight box / informasi penting */
.main-content .bg-navy-dark,
.main-content .bg-navy,
.main-content .bg-dark{
    background:var(--bk-navy-2) !important;
    color:#fff !important;
}
.main-content .bg-navy-dark *,
.main-content .bg-navy *,
.main-content .bg-dark *{
    color:#fff !important;
}
.main-content .bg-warning,
.main-content .bg-yellow{
    background:var(--bk-yellow) !important;
    color:#111 !important;
}

/* Tabel */
.main-content .table{
    background:#fff !important;
    color:var(--bk-text) !important;
    border-color:#d9e4ec !important;
}
.main-content .table thead th,
.main-content .table th{
    background:var(--bk-navy-2) !important;
    color:#fff !important;
    border-color:#28587f !important;
    font-weight:700;
}
.main-content .table tbody td{
    background:#fff !important;
    color:var(--bk-text) !important;
    border-color:#e0e8ee !important;
}
.main-content .table tbody tr:hover td{
    background:#fff9d9 !important;
}

/* Form */
.main-content .form-label{
    color:var(--bk-navy) !important;
    font-weight:600;
}
.main-content .form-control,
.main-content .form-select,
.main-content textarea{
    color:var(--bk-text) !important;
    background:#fff !important;
    border:1px solid #b9cad8 !important;
    border-radius:7px !important;
}
.main-content .form-control:focus,
.main-content .form-select:focus,
.main-content textarea:focus{
    border-color:var(--bk-blue) !important;
    box-shadow:0 0 0 .2rem rgba(18,79,130,.15) !important;
}
.main-content .form-control::placeholder,
.main-content textarea::placeholder{
    color:#718394 !important;
    opacity:1 !important;
}

/* Tombol */
.main-content .btn-navy,
.main-content .btn-primary{
    background:var(--bk-navy-2) !important;
    border-color:var(--bk-navy-2) !important;
    color:#fff !important;
}
.main-content .btn-navy:hover,
.main-content .btn-primary:hover{
    background:#0e4778 !important;
    border-color:#0e4778 !important;
}
.main-content .btn-yellow,
.main-content .btn-warning{
    background:var(--bk-yellow) !important;
    border-color:var(--bk-yellow) !important;
    color:#111 !important;
    font-weight:700;
}
.main-content .btn-yellow:hover,
.main-content .btn-warning:hover{
    background:#ffd83d !important;
    border-color:#ffd83d !important;
    color:#111 !important;
}

/* Badge */
.main-content .badge.bg-warning,
.main-content .badge.text-bg-warning{
    background:var(--bk-yellow) !important;
    color:#111 !important;
}

/* Alert */
.main-content .alert{
    color:var(--bk-text) !important;
    background:#f7fafc !important;
    border:1px solid #d6e3ec !important;
    border-left:5px solid var(--bk-yellow) !important;
}
.main-content .alert-primary{
    border-left-color:var(--bk-blue) !important;
}

/* Breadcrumb */
.main-content .breadcrumb{
    background:var(--bk-blue-soft) !important;
    border-radius:7px;
}
.main-content .breadcrumb-item,
.main-content .breadcrumb-item a{
    color:var(--bk-navy) !important;
}

/* Footer */
footer{
    background:linear-gradient(90deg,#041a31,var(--bk-navy-2)) !important;
    color:#dce9f4 !important;
    border-top:4px solid var(--bk-yellow) !important;
}
footer a{
    color:var(--bk-yellow) !important;
}
footer a:hover{
    color:#fff !important;
}

/* Garis pemisah */
.main-content hr{
    border-color:#dce5ec !important;
    opacity:1;
}

/* Mobile */
@media(max-width:767.98px){
    .main-content{ padding-top:1.25rem !important; }
    .main-content .card{ border-radius:9px !important; }
}



/* Hilangkan celah putih di atas Hero pada halaman Beranda.
   Halaman lain tetap memiliki jarak atas yang nyaman. */
.main-content:has(.hero-section){
    padding-top:0 !important;
    margin-top:0 !important;
    border-top:0 !important;
}
.main-content:has(.hero-section) > .container:first-child{
    margin-top:0 !important;
    padding-top:0 !important;
}
.main-content:has(.hero-section) .hero-section{
    margin-top:0 !important;
}


/* =========================================================
   BACKGROUND ARTISTIK BKPSDMD - BIRU GELAP
   File: background-bkpsdmd.png
   ========================================================= */
body {
    background: #061a30 !important;
}

/* Hero utama menggunakan foto gedung dengan nuansa biru gelap */
.hero-section {
    position: relative;
    min-height: 560px;
    background-image:
        linear-gradient(90deg, rgba(3, 18, 35, .84) 0%, rgba(6, 31, 55, .74) 48%, rgba(2, 16, 31, .86) 100%),
        url('../../background-bkpsdmd.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 90, 145, .12), transparent 42%, rgba(0, 25, 55, .28));
    pointer-events: none;
}

.hero-section > .container {
    position: relative;
    z-index: 2;
}

/* Pada perangkat kecil tetap nyaman dan tidak terlalu gelap */
@media (max-width: 767.98px) {
    .hero-section {
        min-height: 520px;
        background-position: center center !important;
        background-image:
            linear-gradient(rgba(3, 18, 35, .80), rgba(3, 18, 35, .88)),
            url('../../background-bkpsdmd.png') !important;
    }
}


/* Running text agenda dinonaktifkan; menu dan bagian lain tetap tampil. */
body > .bg-navy-dark.text-white.border-bottom.border-warning,
.agenda-marquee,
.agenda-running-text,
.agenda-ticker {
    display: none !important;
}



/* Bar atas hanya menampilkan akses Admin Login; telepon/email sudah dihapus. */
.topbar-admin-only .container { min-height: 32px; }
.topbar-admin-only .btn { white-space: nowrap; }


/* Preview PDF: tinggi terukur agar modal stabil dan tidak memicu layout berlebihan. */
.modal .pdf-preview-frame {
    display: block;
    width: 100%;
    height: 72vh;
    min-height: 360px;
    border: 0;
    background: #e9eef3;
}
.modal .modal-body.pdf-preview-body {
    height: 72vh;
    overflow: hidden;
}
@media (min-width: 768px) {
    .modal .pdf-preview-frame,
    .modal .modal-body.pdf-preview-body {
        height: 78vh;
    }
    .modal .pdf-preview-frame {
        min-height: 480px;
    }
}
@media (max-width: 767.98px) {
    .modal .pdf-preview-frame,
    .modal .modal-body.pdf-preview-body {
        height: 65vh;
    }
    .modal .pdf-preview-frame {
        min-height: 320px;
    }
}

.social-media,
.social-icons {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.social-media a,
.social-icons a,
footer .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;
    padding: 0;
    margin: 0;

    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
}

.social-media a i,
.social-icons a i,
footer .social-links a i {
    font-size: 30px;
    line-height: 1;
    color: #ffffff !important;
    background: transparent !important;
}

/* Hover: aksen kuning */
.social-media a:hover,
.social-icons a:hover,
footer .social-links a:hover {
    color: #ffcc00 !important;
    background: transparent !important;
    transform: translateY(-3px);
}

.social-media a:hover i,
.social-icons a:hover i,
footer .social-links a:hover i {
    color: #ffcc00 !important;
}

/* Tampilan HP */
@media (max-width: 576px) {
    .social-media,
    .social-icons {
        gap: 18px;
    }

    .social-media a i,
    .social-icons a i,
    footer .social-links a i {
        font-size: 26px;
    }
}