/*MENU CANVAS*/
/*off dropdown show all, membuat submenu auto expanded tanpa di klik DAN membuat background abu-abu di pilihan mesin pada menu canvas*/
      .t4-offcanvas .t4-off-canvas-body .navbar .dropdown-menu {
        display: block;
        background-color: #f5f5f5;}


/*MENU KANVAS, BIRU GELAP pada klik hover*/
    
        .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:hover, .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:focus, .t4-offcanvas .t4-off-canvas-body .navbar .nav-link:active,
        .t4-offcanvas .t4-off-canvas-body .navbar .separator:hover,
        .t4-offcanvas .t4-off-canvas-body .navbar .separator:focus,
        .t4-offcanvas .t4-off-canvas-body .navbar .separator:active {
          background-color: #00ffff;}


/*MENU KANVAS, BIRU TERANG pada aktif button*/
.t4-offcanvas .active, .btn:hover {
  background-color: #ccffff;}


/* MENU KANVAS, HIJAU GELAP pada klik hover*/
.t4-offcanvas .dropdown-menu a:hover {
  background-color: #00ff00;}

/* MENU CANVAS & DESKTOP. HIJAU TERANG pada aktif button. Style the active class (and buttons on mouse-over)*/
.dropdown-menu .active, .btn:hover {
  background-color: #ccffcc;}

/*membuat menu off canvas scrollable jika dalam mode phone horizontal*/
.t4-offcanvas {
	overflow: scroll;}


/*MENU DESKTOP*/

/*DROPDOWN DESKTOP MENU. HIJAU GELAP pada klik hover, sama kayak di canvas menu*/
.dropdown-menu .nav-item:hover {
    background: #00ff00;}


/*membuat dropdown menu utama desktop DILAPISI BACKGROUND ABU2*/
.dropdown-menu-inner {
    background-color: #f5f5f5;}



/*mengubah OFF CANVAS HAMBURGER MENU jadi DIAMOND MENU*/

#triggerButton {
    position: relative;
    width: 35px; /* Adjust size as needed */
    height: 35px;
    background-color: yellow; /* Adjust color as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg); /* Rotates the square to create a diamond */
}

#triggerButton .c-button__text {
    transform: rotate(-45deg); /* Rotates the icon back to its normal position */
}

#triggerButton .toggle-bars {
    font-size: 24px; /* Adjust size as needed */
    color: purple; /* Adjust icon color as needed */
}

/*END mengubah OFF CANVAS HAMBURGER MENU jadi DIAMOND MENU*/




/*make the HEADER sticky on mobile only BUT NOT IN DESKTOP (pastikan di layout setting HEADER STICKYNYA NONE*/

@media (max-width: 567px){
div#t4-header {
    position: fixed;
    width: 100%;
}

.not-at-top .t4-header {
    top: 0;
    width: 100%;
    z-index: 9999;
    background: #2e3d96;
}
}

/*END HEADER sticky di mobile, tapi di desktop tidak sticky*/