/* 1. Kontainer Utama Menu Full 100% */
#menu {
    float: none !important;
    width: 100% !important;
}

/* 2. Jadikan Menu Utama Flexbox agar membagi lebar rata Kanan-Kiri */
#menu > ul.menu-dropdown {
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 3. Setiap kotak menu mendapat porsi lebar yang sama persis (Balance) */
#menu > ul.menu-dropdown > li.level1 {
    flex: 1 1 0 !important; 
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important; 
}

/* 4. FIX SHADOW & HOVER: Area klik memenuhi 100% kotak sampai menyentuh garis */
#menu > ul.menu-dropdown > li.level1 > a.level1,
#menu > ul.menu-dropdown > li.level1 > span.level1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;      /* Teks center secara vertikal */
    justify-content: center !important;  /* Teks center secara horizontal */
    width: 100% !important;
    height: 100% !important;
    min-height: 52px !important;         /* Mengikuti tinggi asli header menu */
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* 5. FIX TEKS CENTER: Memastikan judul & sub-judul rata tengah */
#menu > ul.menu-dropdown > li.level1 > a.level1 > span,
#menu > ul.menu-dropdown > li.level1 > span.level1 > span {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
}

/* 6. Penyesuaian Ukuran Font agar rapi */
#menu .menu-dropdown .level1 .level1 span.title {
    font-size: 12px !important;
    line-height: 1.2 !important;
    display: block !important;
}

#menu .menu-dropdown .level1 .level1 span.subtitle {
    font-size: 9px !important;
    line-height: 1.2 !important;
    display: block !important;
    margin-top: 2px !important;
}

/* 7. PENYELAMAT DROPDOWN: Mencegah efek Flexbox merusak submenu */
#menu > ul.menu-dropdown > li.level1 .dropdown {
    text-align: left !important;
}

#menu > ul.menu-dropdown > li.level1 .dropdown ul {
    display: block !important;
    width: 100% !important;
}

#menu > ul.menu-dropdown > li.level1 .dropdown li.level2 {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
}

#menu > ul.menu-dropdown > li.level1 .dropdown a.level2,
#menu > ul.menu-dropdown > li.level1 .dropdown span.level2 {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 5px 10px !important; /* Mengembalikan jarak spasi normal di dalam dropdown */
    text-align: left !important;
}