body {
      background-color: #003b70; /* biru tua background atas */
    }

    section{
        padding: 0 !important;
    }

    /* Breadcrumb bar */
    .breadcrumb-bar {
      background-color: var(--color-biru-muda);
      color: #fff;
      font-size: 0.95rem;
    }

    .breadcrumb-bar .breadcrumb {
      margin-bottom: 0;
      padding: .75rem 0;
      --bs-breadcrumb-divider: '›';
    }

    .breadcrumb a {
      color: #ffffff;
      text-decoration: none;
    }

    .breadcrumb a:hover {
      text-decoration: underline;
    }

    /* HERO SECTION */
    .hero-wrapper {
      position: relative;
      background-color: #005596;
      color: #fff;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 3rem 0 3rem;
    }

    .hero-title {
      font-size: 2.8rem;
      font-weight: 700;
    }

    .hero-subtitle {
      font-size: 1.05rem;
      max-width: 520px;
    }

    /* .hero-tabs {
      margin-top: -1px; 
    } */

    .hero-tabs {
        display: flex;
        flex-wrap: wrap;          /* bisa jadi 2 baris */
        justify-content: flex-end;
        align-items: stretch;     /* samakan tinggi antar tab dalam baris */
        gap: 0;
    }

    .hero-tabs .nav-item {
        flex: 0 0 auto;           /* width mengikuti konten */
        display: flex;            /* agar .nav-link bisa ikut stretch */
    }

    .hero-tabs .nav-link {
        display: flex;            /* biar isi rapi dan bisa full height */
        align-items: center;      /* teks vertikal center */
        justify-content: center;  /* teks horizontal center */

        height: 100%;             /* samakan tinggi dengan tab paling tinggi */
        border-radius: 0;
        border: none;
        /* padding: 1rem 2rem; */
        font-weight: 500;
        width: 220px;
    }


    .hero-tabs .nav-link.active {
      background-color: #ffffff;
      color: #000000;
    }

    .hero-tabs .nav-link:not(.active) {
      background-color: #003b70;
      color: #ffffff;
    }

    .hero-tabs .nav-link:not(.active):hover {
      background-color: var(--color-biru-muda);
    }

    .switch-wrapper .switch-label {
        color: #ffffff;
        font-weight: 500;
        letter-spacing: 0.5px;
        font-size: 14px;
    }

    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 45px;
        height: 22px;
    }

    .toggle-switch input {
        display: none;
    }

    .toggle-switch .slider {
        position: absolute;
        cursor: pointer;
        background-color: #ffffff;
        border-radius: 30px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: .3s;
    }

    .toggle-switch .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        top: 3px;
        background-color: #003b70;  /* biru tua seperti gambar */
        border-radius: 50%;
        transition: .3s;
    }

    /* Ketika toggle ON */
    .toggle-switch input:checked + .slider:before {
        transform: translateX(23px);
    }

    /* Biar sidebar kiri ngikut scroll tapi tetap di dalam kolom */
    .sidebar-sticky {
    position: sticky;
    top: 120px;        /* jarak dari atas, sesuaikan tinggi navbar-mu */
    }

    /* Styling kecil tambahan */
    .sidebar-sticky .nav-link {
    color: var(--color-biru-tua) !important; 
    background: transparent;
    }

    .sidebar-sticky .nav-link.active {
    font-weight: 500;
    /* text-decoration: underline; */
    background: transparent;
    }

    #sidebarMenu .nav-link {
    color: var(--color-biru-tua) !important;           
    transition: color 0.2s;
    border-radius: 0 !important;
    }

    #sidebarMenu .nav-link.active {
    color:  var(--color-biru-muda) !important;  
    font-weight: 700;
    text-decoration: none;     
    border-bottom: 2px solid var(--color-biru-muda);
    border-radius: 0 !important;
    }

    /* #sidebarMenu .nav-link.active {
        background-color: var(--color-kuning);
        border-radius: 4px;
        color: #fff !important;
    } */

     .content-block table {
        border-collapse: collapse;
        width: 100%;
    }

    .content-block table,
    .content-block th,
    .content-block td {
        border: 1px solid #ddd;
    }

    .content-block th,
    .content-block td {
        padding: 8px;
    }

   /* default: dropdown hidden */
.mobile-tab-dropdown {
    display: none;
    position: relative;   /* wajib */
    margin: 0 16px 16px;
    z-index: 2;        /* naikkan wrapper */
}

/* MOBILE */
@media (max-width: 767px) {
    .hero-tabs {
        display: none !important;
    }

    .mobile-tab-dropdown {
        display: block;
    }

    .mobile-tab-dropdown button {
        width: 100%;
        background: var(--color-biru-tua);
        color: #fff;
        border: none;
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
    }

    /* 🔥 FIX UTAMA DI SINI */
    .mobile-tab-dropdown .dropdown-menu {
        display: none;
        position: absolute;      /* wajib */
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        z-index: 2;          /* lebih tinggi dari wrapper */
        list-style: none;
        padding: 0;
        margin: 0;
        background: #0d3b66;
        overflow: visible;       /* jangan hidden */
        box-shadow: 0 10px 24px rgba(0,0,0,.25);
    }

    .mobile-tab-dropdown .dropdown-menu li a {
        display: block;
        padding: 12px 16px;
        color: #fff;
        text-decoration: none;
    }

    .mobile-tab-dropdown .dropdown-menu li a:hover {
        background: var(--color-biru-tua);
    }

    section {
        overflow: visible !important;
    }
}

/* default */
.mobile-sidebar-dropdown {
    display: none;
    position: relative;
    margin: 0 0 16px;
    z-index: 1;
}

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

    /* sembunyikan sidebar lama */
    .sidebar-sticky {
        display: none !important;
    }

    .mobile-sidebar-dropdown {
        display: block;
    }

    .mobile-sidebar-dropdown button {
        width: 100%;
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
        color: var(--color-biru-tua);
        border: none;
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
    }

    .mobile-sidebar-dropdown .dropdown-menu {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;
        z-index: 1;
        list-style: none;
        margin: 0;
        padding: 0;
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.25);
    }

    .mobile-sidebar-dropdown .dropdown-menu a {
        display: block;
        padding: 12px 16px;
        color: var(--color-biru-tua);
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }

    .mobile-sidebar-dropdown .dropdown-menu a:hover {
        background: var(--color-biru-tua) !important;
        color: #fff;
    }
}