nav{
    position:sticky;
    width:100%;
    top:0;
    z-index: 1000;
    background-color: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    min-height: 40px;
    display:flex; 
    justify-content:space-between; 
    align-items:center;
    padding:3px 30px;
    box-sizing: border-box; 
}

.navMenu {
    display: flex;
}

.hamburger-button {
    display: none;
}

.nav-btn:hover {
    background-color: #38a1ee;
    color: white;
}
    
.nav-btn {
    padding: 10px 20px;
    background-color: white;
    color: #38A1EE;
    text-decoration: none;
    border-radius: 5px;
    font-weight:600;
    font-size:15px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.nav-profile{
    padding: 0px 20px; 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    cursor: pointer;
}

.nav-profile-dropdown-menu{
    display: none; 
    position: absolute; 
    right: 0; top: 50px; 
    background: white; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    min-width: 180px; 
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2); 
    z-index: 10;
}

.nav-profile-menu{
    font-size:15px; 
    display: block; 
    padding: 10px; 
    color: black; 
    text-decoration: none;
}

.logout-button{
    font-size:15px; 
    width: 100%; 
    text-align: left; 
    padding: 10px; 
    background: none; 
    border: none; 
    color: black; 
    cursor: pointer;
}

.web-info{
    display:flex; 
    flex-direction:row; 
    color:#000000; 
    text-decoration: none;
}

.web-info img{
    max-width:52px; 
    max-height:52px;
}
    

@media (max-width: 768px){
    .hamburger-button {
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
        width: 24px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }
    
    .hamburger-button-line {
        display: block;
        width: 24px;
        height: 2px;
        background-color: #000;
        transition: all 0.3s ease;
    }
    
    /* Animasi ketika aktif */
    .hamburger-button.active .hamburger-button-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .hamburger-button.active .hamburger-button-line:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger-button.active .hamburger-button-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .navMenu {
        display: none;
    } 

    nav {
        padding: 3px 20px;
    }

    .nav-btn {
        padding: 12px 15px;
    }
    
    /* Style untuk menu ketika aktif */
    .navMenu.active {
        display: block;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background-color: white;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }
    
    .navMenu.active ul {
        flex-direction: column;
        width: 100%;
    }
    
    .navMenu.active li {
        margin-bottom: 15px;
    }
    
    .navMenu.active .nav-btn {
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Style untuk dropdown profile di mobile */
    .navMenu.active #profileDropdownMenu {
        position: relative;
        top: 0;
        right: auto;
        width: 100%;
        box-shadow: none;
        border: none;
        transition: all 1s ease;
        transform: translateY(-10px);
    }
    
    .profileDropdownMenu.show {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}