nav {
    border-radius: 16px;
    box-shadow:
        -99px 0px 99px 0px rgba(0, 0, 0, 0.09),
        -223px 0px 134px 0px rgba(0, 231, 85, 0.05);
}

.contact-btn{
    background-color: #F6F7F4;
    border-radius: 8px;
}

.menu-btn{
    background-color: black;
    border-radius: 8px;
    color: #F0F0F0;
    cursor: pointer;
}


.nav-pop-up {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    padding-top: 120px;
    justify-content: start;
    align-items: start;
    background-color: rgba(255, 255, 255, 0.8);
    flex-direction: column;
    z-index: 11000;

    /* trik transisi */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-200px);   /* geser sedikit ke atas */
    transition: all 0.5s ease;
}
.nav-pop-up-container{
    background-color: black;
    border-radius: 16px;
}

.nav-pop-up.show {
    display: flex;       /* tetap flex */
    visibility: visible; /* kelihatan */
    opacity: 1;
    transform: translateY(0); /* balik normal (slide turun) */
}
    
@media (max-width: 576px) {
    .menu-btn div{
        font-size: 12px !important;
      }

    .contact-btn{
        display: none !important;
    }

    .navbar-brand img{
        width: 100%;
        height: 18px;
    }

    .menu-text{
        font-size: 10px !important;
    }

    .menu-btn img{
        width: 100%;
        height: 15px;
    }

    .nav-pop-up-img {
        width: 40px;
        height: 15px;
    }

    .nav-pop-up-text{
        font-size: 6px;
    }

    /* Mobile: align images in one column and texts in the other */
    .nav-pop-up-container{
        display: grid !important;
        grid-template-columns: 1fr; 
        align-items: center;
        gap: 8px 16px;
    }
    .nav-pop-up-container > a{
        display: flex; 
        align-items: center; 
        justify-content: flex-start; 
        gap: 16px; 
        width: 100%;
    }
    
    .nav-pop-up-container > a > div{
        display: flex;
        align-items: center;
        padding: 20px;
    }

    .nav-pop-up-img{
        justify-self: center;
    }
    .nav-pop-up-text{
        justify-self: start;
    }

    .nav-pop-up-text{
        font-size: 16px;
    }

    .nav-pop-up-img{
        width: 120px !important;
        height: 56px !important;
    }

    .nav-pop-up .nav-pop-up-container{
        width: auto !important;            
        box-sizing: border-box;   
        margin:0 auto;         
    }
}


    /* Tablet */
    @media (min-width: 768px) and (max-width: 1024px){
        .contact-btn{
            display: none !important;
        }

        .navbar-brand img{
            width: 100%;
            height: 50px;
        }

        .nav-pop-up-container > a > div{
            display: flex;
            align-items: center;
            padding:0 20px;
        }

    }

    /* Desktop (≥992px) */
    @media (min-width: 992px) {
        nav {
          height: 88px;
          /* width: 1240px; */
          margin: 0 auto;
        }
  
        .navbar-brand{
          height: 56px;
          width: 223px;
        }
  
        .contact-btn{
          width: 182px;
          height: 52px;
        }
  
        .menu-btn{
          width: 139px;
          height: 52px;
        }
      }