@font-face {
    font-family: 'Dhino Regular'; 
    src: url('../fonts/Dhino-Regular.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal;
    font-display: swap; 
}

.social-icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.social-icons-container .nav-link {
    color: black; /* This will make the icon black */
    /* You might want to remove the 'mx-1' or adjust margins on the <a> or <li> for spacing */
}

/* If you want to be more specific, you can target the <i> tag directly */
.social-icons-container .nav-link i {
    color: black;
}

.ppid {
    padding-left: 1.5cap;
    /* width: 50cap; */
}

/* Custom CSS for Category Cards */

.category-card {
    border-radius: 8px; /* Match border-radius of the h2 title */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    background-color: #fff; /* Ensure background is white for cards without images */
}

.category-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* Stronger shadow on hover */
}

.category-card .category-image {
    height: 120px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures image covers the area without distortion */
    filter: brightness(0.7); /* Slightly darken image for better text contrast */
    transition: filter 0.3s ease; /* Smooth darkening/lightening on hover */
}

.category-card:hover .category-image {
    filter: brightness(0.5); /* Darken more on hover */
}

.category-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); /* Gradient from bottom for text readability */
    opacity: 1; /* Always visible */
    transition: background 0.3s ease; /* Smooth transition for background on hover */
    border-radius: 8px; /* Match card border-radius */
}

/* Optional: If you want the text to fade in/out or move on hover */
.category-overlay h5 {
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* transform: translateY(0); */ /* Start position */
}

.category-card:hover .category-overlay h5 {
    /* transform: translateY(-5px); */ /* Example: Slight lift on hover */
}

.text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Add text shadow for better readability on images */
}

.badgecara {
    background-color: #75010f;
}
/* Pastikan .search-form-uiverse mengambil lebar penuh dari kolom parentnya */
.search-form-uiverse {
    width: 100%;
}

/* Pastikan kontainer form mengambil seluruh lebar yang tersedia dari parent-nya */
.search-form-uiverse {
    width: 100%;
}

/* --- CSS untuk Ikon Layanan (Service Icons) dengan Layout Horizontal --- */

/* Container untuk grup ikon layanan (parent dari service-icon-item-horizontal) */
.service-icons-group-container {
    display: flex; /* Memastikan flexbox aktif */
    flex-wrap: wrap; /* Izinkan item untuk turun baris jika tidak cukup ruang */
    justify-content: center; /* Pusatkan item secara horizontal */
    gap: 20px; /* Jarak antar item ikon. Sesuaikan nilai ini. */
    padding: 10px 0; /* Sedikit padding vertikal */
}

/* Individual service icon item */
.service-icon-item-horizontal {
    flex-shrink: 0; /* Mencegah item menyusut */
    flex-grow: 0; /* Mencegah item membesar */
    /* Mengatur lebar dasar untuk 4 item per baris di desktop */
    flex-basis: calc(25% - 20px); /* 4 item per baris dengan gap 20px */
    max-width: calc(25% - 20px);
    min-width: 150px; /* Lebar minimum agar tidak terlalu kecil di layar sempit */
    height: 60px; /* Tinggi tetap untuk setiap item, sesuaikan jika perlu */
    padding: 0;
}

/* Link pembungkus agar seluruh area bisa diklik */
.service-icon-link-horizontal {
    text-decoration: none; /* Hapus underline default */
    display: block; /* Agar link mengambil seluruh area gambar */
    width: 100%; /* Pastikan link mengambil lebar penuh itemnya */
    height: 100%; /* Pastikan link mengambil tinggi penuh itemnya */
    border: none; /* Hapus border */
    border-radius: 0; /* Hapus border-radius */
    background-color: transparent; /* Pastikan background transparan */
    transition: transform 0.2s ease; /* Efek hover */
    display: flex; /* Untuk memusatkan gambar di dalamnya */
    justify-content: center;
    align-items: center;
}

.service-icon-link-horizontal:hover {
    transform: scale(1.05); /* Sedikit zoom saat hover */
}

/* Gambar PNG ikon */
.service-icon-img-horizontal {
    /* Ukuran default untuk desktop */
    width: 100%; /* Gambar mengisi penuh lebar item */
    height: 100%; /* Gambar mengisi penuh tinggi item */
    object-fit: contain; /* Memastikan gambar pas tanpa terpotong, menjaga rasio aspek */
    display: block; /* Penting agar width/height berfungsi dengan baik */
    border: none; /* Pastikan tidak ada border pada gambar */
    padding: 0;
    margin: 0;
}

/* --- CSS untuk Search Bar (Uiverse Style) --- */
/* Pastikan .search-form-uiverse mengambil lebar penuh dari kolom parentnya */
.search-form-uiverse {
    width: 100%;
}

/* Ini adalah kontainer utama yang membungkus input dan tombol */
.search {
    display: flex;
    width: 100%;
    max-width: 450px; /* Sesuaikan nilai ini untuk mengatur lebar total search bar */
    margin-left: auto; /* Untuk meratakan ke tengah jika parent justify-content-center */
    margin-right: auto; /* Untuk meratakan ke tengah jika parent justify-content-center */
}

/* Input field pencarian */
.search__input {
    flex-grow: 1;
    padding: 10px 15px;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Tombol pencarian */
.search__button {
    width: 50px;
    min-width: 50px;
    height: auto;
    border: 1px solid #0d6efd;
    background-color: #0d6efd;
    color: white;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search__button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.search input:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* --- CSS Responsif --- */

@media (max-width: 767.98px) { /* Untuk ukuran layar di bawah md (tablet dan mobile) */
    .service-icons-group-container {
        justify-content: center !important; /* Memastikan ikon layanan rata tengah di mobile */
        gap: 15px; /* Jarak antar ikon lebih kecil di mobile */
    }
    .service-icon-item-horizontal {
        /* Mengatur lebar dasar untuk 2 item per baris di mobile */
        flex-basis: calc(50% - 15px); /* 2 item per baris dengan gap 15px */
        max-width: calc(50% - 15px);
        height: 50px; /* Tinggi lebih kecil di mobile */
    }
    .service-icon-img-horizontal {
        /* Gambar akan mengisi 100% dari itemnya yang sudah disesuaikan ukurannya di atas */
    }
    .search {
        max-width: 90%; /* Batasi lebar search bar di mobile */
    }
}


/* Responsif untuk Mobile: ikon di tengah dan wrap */
@media (max-width: 767.98px) { /* Untuk ukuran layar di bawah md (tablet dan mobile) */
    .social-icons-container {
        justify-content: center !important; /* Memastikan rata tengah di mobile */
        flex-wrap: wrap; /* Agar ikon bisa pecah baris jika terlalu banyak */
    }
    .service-icon-item {
        margin-right: 10px; /* Jarak antar item lebih kecil di mobile */
        margin-left: 10px;
        margin-bottom: 15px; /* Jika ikon pecah baris, berikan margin bawah */
    }
}

/* Ini adalah kontainer utama yang membungkus input dan tombol */
.search {
    display: flex; /* Menggunakan Flexbox untuk menempatkan input dan tombol sejajar */
    width: 100%; /* Penting: Pastikan kontainer ini mengambil lebar penuh */
    max-width: 450px; /* <--- SESUAIKAN NILAI INI untuk mengatur lebar total search bar */
    /* Misalnya, Anda bisa mencoba 400px, 450px, atau 500px */
    /* Jika ingin lebih panjang lagi, hapus 'max-width' */
}

/* Ini adalah input field pencarian Anda */
.search__input {
    flex-grow: 1; /* Ini yang membuat input field melebar mengisi ruang yang tersedia */
    padding: 10px 15px; /* Sesuaikan padding agar teks di dalamnya nyaman */
    font-size: 1rem; /* Sesuaikan ukuran font jika perlu */
    border-top-right-radius: 0; /* Menghilangkan sudut agar menyatu dengan tombol */
    border-bottom-right-radius: 0;
    border: 1px solid #ced4da; /* Pastikan ada border yang terlihat */
}

/* Ini adalah tombol pencarian */
.search__button {
    width: 50px; /* <--- SESUAIKAN NILAI INI jika Anda ingin tombolnya sendiri lebih lebar/sempit */
    min-width: 50px; /* Memastikan lebar minimum tombol */
    height: auto; /* Biarkan tinggi menyesuaikan dengan input */
    border-top-left-radius: 0; /* Menghilangkan sudut agar menyatu dengan input */
    border-bottom-left-radius: 0;
    background-color: #0d6efd; /* Contoh warna biru untuk tombol */
    color: white; /* Warna ikon SVG */
    display: flex; /* Menggunakan Flexbox untuk memusatkan ikon */
    align-items: center; /* Pusatkan ikon secara vertikal */
    justify-content: center; /* Pusatkan ikon secara horizontal */
    border: 1px solid #0d6efd; /* Sesuaikan border agar seragam dengan background tombol */
}

.search__button svg {
    fill: currentColor; /* Memastikan ikon SVG menggunakan warna teks */
}
  
  /* Responsiveness untuk mobile (opsional, tapi disarankan) */
  @media (max-width: 767.98px) { /* Untuk ukuran layar di bawah md (tablet dan mobile) */
      .search {
          width: 100%; /* Pastikan search bar mengambil lebar penuh di mobile */
          justify-content: center; /* Tengahkan di mobile */
      }
      .search__input {
          width: calc(100% - 40px); /* Sesuaikan lebar input agar tombol tetap terlihat */
          margin-right: 0; /* Hapus margin negatif */
      }
      .search__button {
          margin-left: -35px; /* Geser tombol ke kiri agar menempel input */
      }
  }
  


/* Ensure the container of the row aligns properly, if not already handled by Bootstrap */
.category-content-section .container {
    max-width: 1200px; /* Adjust as needed */
    padding-left: 15px;
    padding-right: 15px;
}
/* ..................................... */
 .navbar-nav .nav-link {
    color: #ffffff;
    position: static;
  }



  .humasicon {
    height: 30px;
    transition: filter 0.3s ease;
}

.humasicon:hover {
    filter: brightness(0);
    -webkit-filter: brightness(0);
}

.logoadmin {
    max-width: 100%;
  height: 208px;
}


/* ------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Roboto');

* {
	margin: 0;
	padding: 0;
}
i {
	margin-right: 10px;
}
/* Styling yang sudah ada: */
.navbarmenu:hover {
    color: rgb(252, 255, 255); /* Ini mungkin tidak cocok untuk div keseluruhan, biasanya untuk link */
}

.hero {
    background-image: url('../img/banner.gif');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-attachment: scroll;
    box-sizing: border-box;
    width: 100%;
    /* padding-top: 60px;  */
    height: auto;
    aspect-ratio: 1920 / 201;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    overflow: hidden;
}

/* ---------- START: Penambahan/Penyesuaian untuk Mobile (Media Queries) ---------- */

/* Aturan ini akan diterapkan ketika lebar layar KURANG DARI atau SAMA DENGAN 991.98px (breakpoint Bootstrap 'lg') */
@media (max-width: 991.98px) {
    /* Umum: Agar item menu di mobile memenuhi lebar penuh dan ada pemisah */
    .navbar-nav .nav-item {
        width: 100%; /* Agar setiap item menu mengambil seluruh lebar */
        text-align: left;
        /* Anda bisa tambahkan border-bottom jika ingin pemisah antar menu utama */
        /* border-bottom: 1px solid rgba(255, 255, 255, 0.966); */
    }
    .navbar-nav .nav-item:last-child {
        border-bottom: none; /* Hapus garis pemisah di item terakhir */
    }

    /* Penyesuaian untuk dropdown-menu di dalam navbar yang sudah di-collapse */
    .navbar-nav .dropdown-menu {
        position: static !important; /* SANGAT PENTING: Agar dropdown tidak melayang, tapi masuk dalam aliran dokumen */
        float: none !important; /* Pastikan tidak ada float */
        width: 100%; /* Memenuhi lebar parent */
        margin-top: 0;
        border: none; /* Hapus border bawaan dropdown jika tidak cocok */
        box-shadow: none; /* Hapus shadow bawaan dropdown */
        background-color: rgba(68, 68, 68, 0.9); /* Sesuaikan warna background untuk sub-menu agar kontras */
        padding-left: 0; /* Pastikan tidak ada padding kiri yang aneh */
        border-radius: 0; /* Hapus border-radius jika tidak cocok untuk mobile menu */
    }

    .navbar-nav .dropdown-menu .dropdown-item {
        color: white; /* Sesuaikan warna teks item sub-menu */
        padding: 10px 20px; /* Sesuaikan padding */
        text-align: left; /* Opsional: Pusatkan teks item dropdown */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Pemisah antar item dropdown */
    }
    .navbar-nav .dropdown-menu .dropdown-item:last-child {
        border-bottom: none;
    }

    .navbar-nav .dropdown-menu .dropdown-item:hover {
        background-color: #666; /* Warna hover untuk item sub-menu */
    }

    /* Untuk dropdown-submenu (nested dropdown) */
    .navbar-nav .dropdown-submenu .dropdown-menu {
        padding-left: 20px; /* Indentasi lebih dalam untuk nested sub-menu */
        background-color: rgba(85, 85, 85, 0.9); /* Warna background untuk nested sub-menu */
    }

    /* Pastikan panah dropdown (::after) terlihat dan posisinya benar di mobile */
    .navbar-nav .nav-item .dropdown-toggle::after {
        display: inline-block; /* Pastikan panah terlihat */
        margin-left: 0.255em; /* Jarak dari teks */
        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;
        float: right; /* Posisikan panah ke kanan */
        margin-top: 0.5em; /* Sesuaikan posisi vertikal panah */
    }
}

/* ---------- END: Penambahan/Penyesuaian untuk Mobile (Media Queries) ---------- */

/* Styling yang sudah ada: */
.navbarmenu .nav-item .nav-link {
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.navbarmenu .nav-item .nav-link:hover {
    color: #007bff;
}

.navbarmenu .nav-item .nav-link.active,
.navbarmenu .nav-item .nav-link:active {
    color: #02daf7;
}

.navbarmenu .btn-dark {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.navbarmenu .btn-dark:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.navbarmenu .btn-dark:active,
.navbarmenu .btn-dark:focus {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #fff;
}

/* ----------------------------------- */
.square-card {
    aspect-ratio: 1 / 1; 
    overflow: hidden;
}
.square-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.large-carousel-card {
    max-height: 400px;
    overflow: hidden;
}

.large-carousel-card img {
    height: 103px;
    object-fit: cover;
}

.large-carousel-card .card-body {
    padding: 10px;
}


.ssatas {
    padding-top: 4dvh;
    
}

.square-card2 {
    height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.square-card2 img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.square-card2 .card-body {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.square-card2 .card-title {
    font-size: 16px;
    line-height: 1.2em;
    max-height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------- */
.breaking-news-footer {
    display: flex;
    align-items: center;
    background: #0a0a5a;
    /* border-radius: 8px; */ /* Opsional: Hapus border-radius jika ingin full-width di bagian bawah */
    overflow: hidden;
    width: 100%;
    /* max-width: 100%; */ /* Ini redundan jika width: 100% dan position: fixed */
    box-shadow: 0 4px 10px rgba(91, 91, 179, 0.7);

    /* PROPERTI BARU UNTUK FIXED POSITIONING */
    position: fixed; /* Membuat elemen menempel pada viewport */
    bottom: 0;       /* Menempelkannya ke bagian bawah viewport */
    left: 0;         /* Menempelkannya ke sisi kiri viewport */
    z-index: 1000;   /* Memastikan elemen ini berada di atas konten lain */
    border-radius: 0; /* Umumnya, footer yang fixed tidak memiliki sudut membulat */
}

.breaking-label {
    flex: 0 0 auto;
    background: #75010f;
    padding: 10px 20px;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 1.2rem;
    text-transform: uppercase;
    user-select: none;
    color: white;
    white-space: nowrap;
}

.news-ticker {
    overflow: hidden;
    position: relative;
    flex: 1 1 auto;
    height: 40px;
}

.ticker-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: scroll-left 10s linear infinite;
    font-weight: bold;
    font-size: 1.1rem;
    color: white;
    user-select: none;
    -webkit-animation: scroll-left 10s linear infinite;
}

.ticker-content span {
    margin: 0 15px;
    display: inline-block;
}

.separator {
    color: #75010f;
    font-weight: 900;
    user-select: none;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media (max-width: 600px) {
    .breaking-label {
        font-size: 1rem;
        padding: 8px 12px;
    }
    .ticker-content {
        font-size: 1rem;
        padding-left: 80%;
    }
}

/* ---------------------------------------------------------- */


.contenthome {
    padding: 60px 0;
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-top: -50px;
    position: relative;
    z-index: 2;
}

.contenthome h2 {
    font-size: 2.2em;
    color: var(--heading-color);
    margin-bottom: 30px;
    font-weight: 600;
    border-bottom: 3px solid var(--primary-blue);
    padding-bottom: 10px;
    display: inline-block;
    text-align: left;
    width: 100%;
}

.contenthome p {
    font-size: 1.05em;
    text-align: justify;
    margin-bottom: 1.5em;
    color: var(--text-color);
}

.bgnavbar {
    background-color: #0C0950;
}

.berita {
    -webkit-text-stroke: 1px white; 
    font-weight: bold;
}


body {
    overflow-x: hidden;
    margin: 0;
    /* padding: 0; */
    padding-bottom: 70px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e74c3c, #c0392b); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff6b6b, #d63031); 
}

/* Untuk Firefox */
* {
    scrollbar-width: thin; 
    scrollbar-color: #75010f #f1f1f1; 

  }
/* -------------------------------- */
.navbar-nav .dropdown-menu {
    background-color: #000000; 
    border: none; 
    animation: fadeIn 0.3s ease-out; 
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); } /* Mulai dari tidak terlihat dan sedikit di atas */
    to { opacity: 1; transform: translateY(0); } /* Berakhir di posisi normal dan terlihat penuh */
}
  
  .navbar-nav .dropdown-menu .dropdown-item {
    color: #ffffff; 
  }
  
  .navbar-nav .dropdown-menu .dropdown-item:hover,
  .navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #333333; 
    color: #ffffff;
  }

  .postberita {
    margin-bottom: 10vh;
  }
  
  footer {
    background-color: #333; 
    color: #fff; 
    padding: 20px 0; 
    text-align: center; 
    font-size: 0.9em; 
    
    width: 100%; 
    box-sizing: border-box; 
}

footer .container {
    max-width: 960px; 
    margin: 0 auto; 
    padding: 0 15px; 
}

footer p {
    margin-bottom: 5px;
    line-height: 1.5;
}

footer p:last-child {
    margin-bottom: 0; 
}

   .breaking-news-footer {
    width: 100%;
    padding-left: 0;   
    padding-right: 0;  
    margin-left: 0;    
    margin-right: 0;  
    max-width: none;
    box-sizing: border-box; 
    overflow: hidden; 
}

.news-ticker {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    box-sizing: border-box;
}

.breaking-label {
    background-color: #75010f;
    padding: 0 15px;
    font-weight: bold;
    white-space: nowrap;
}

.ticker-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: ticker-scroll 25s linear infinite;
}

.ticker-content span {
    margin: 0 15px;
}

.separator {
    color: #ffc107;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
 /* .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    alig
    }
    
.divflag { grid-area: 1 / 1 / 5 / 3; }
.div2 { grid-area: 1 / 3 / 5 / 6; } */
    
/* ----------------------------- */
.video-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px;
    white-space: nowrap;
}

.video-scroll-container a {
    display: inline-block;
    min-width: 300px;
    height: 170px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.video-scroll-container a:hover {
    transform: scale(1.03);
}

.video-scroll-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- CSS untuk Backdrop (Overlay) di Mobile --- */
.navbar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Warna hitam transparan */
    z-index: 1029; /* Harus lebih rendah dari navbar (z-index 1030) tapi lebih tinggi dari konten lain */
    display: none; /* Sembunyikan secara default */
}

/* --- CSS untuk Navbar di Mobile (Revisi & Tambahan) --- */
@media (max-width: 991.98px) { /* Ini breakpoint Bootstrap 'lg' */
    /* Menampilkan backdrop saat navbar terbuka */
    .navbar-collapse.show + .navbar-backdrop {
        display: block;
    }

    /* Memastikan navbar-collapse berada di atas backdrop */
    .navbar-collapse {
        background-color: #0c0950; /* Pastikan background sesuai navbar */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        position: absolute; /* INI KUNCI! */
        top: 100%; /* INI KUNCI! */
        left: 0;
        width: 100%;
        z-index: 1000;
        padding-bottom: 15px;
    }

    /* MODIFIKASI INI untuk menghilangkan border putih saat klik/fokus */
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler:hover { /* Opsional: jika ingin menghilangkan border juga saat hover */
        outline: none !important; /* Menghilangkan outline default browser */
        box-shadow: none !important; /* Menghilangkan box-shadow yang mungkin ditambahkan Bootstrap */
        border-color: transparent !important; /* Memastikan tidak ada border yang muncul */
    }

    /* Pastikan juga aturan untuk ikon hamburger tetap ada seperti sebelumnya */
    .navbar-toggler .fas.fa-bars {
        color: #fff !important;
        font-size: 1.1rem; /* Sesuaikan ukuran ikon */
    }

    /* Dan aturan untuk ukuran tombol toggler itu sendiri */
    .navbar-toggler {
        padding: 0.25rem;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        /* Anda mungkin juga ingin menambahkan ini jika ada border default yang ingin dihilangkan */
        border: none; /* Pastikan tidak ada border standar */
    }

    /* Warna background untuk dropdown menu (PROFIL, INFORMASI PUBLIK, dst.) saat terbuka di mobile */
    .navbar-nav .dropdown-menu {
        background-color: #000000; /* Contoh: hitam gelap (sesuaikan dengan keinginan Anda) */
        color: white; /* Warna teks di dropdown */
        border: none; /* Hapus border bawaan */
        box-shadow: none; /* Hapus shadow bawaan */
    }

    /* Warna teks dan hover di dropdown item mobile */
    .navbar-nav .dropdown-item {
        color: #f8f9fa; /* Warna teks item dropdown */
        padding-left: 1.5rem; /* Tambah indentasi */
    }

    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus {
        background-color: #495057; /* Warna hover untuk item dropdown */
        color: white;
    }

    /* Warna background untuk sub-dropdown menu (Profil Kapolda Riau) */
    .navbar-nav .dropdown-submenu .dropdown-menu {
        background-color: #212529; /* Lebih gelap lagi untuk sub-dropdown */
        padding-left: 2rem; /* Tambah indentasi untuk sub-sub-menu */
    }

    /* Warna ikon dan teks menu utama di mobile (PROFIL, INFORMASI PUBLIK, dll) */
    .navbar-nav .nav-link {
        color: #ffffff; 
    }



    
}