/* ====== NAVBAR UTAMA ====== */
.menu {
    margin: 0;
    padding: 0 15px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: linear-gradient(
        to right,
        #6e5400,
        #b89600,
        #f1d25a,
        #b89600
    );
    border-bottom: 3px solid #5c4500;
    font-family: Arial, sans-serif;
}

/* ITEM MENU */
.menu > li {
    position: relative;
}

/* LINK MENU */
.menu > li > a {
    display: block;
    padding: 12px 16px;
    color: #2b1e00;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* HOVER MENU */
.menu > li > a:hover {
    background: rgba(255,255,255,0.25);
    color: #000;
}

/* ====== DROPDOWN ====== */
.menu li div {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    z-index: 999;
}

/* LIST DROPDOWN */
.menu li div ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

/* ITEM DROPDOWN */
.menu li div ul li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.25s;
}

/* HOVER DROPDOWN */
.menu li div ul li a:hover {
    background: #f1d25a;
    color: #000;
}

/* SHOW DROPDOWN */
.menu li:hover > div {
    display: block;
}

/* ====== LOGOUT ====== */
.menu li.last a {
    background: #5c4500;
    color: #fff !important;
    border-radius: 4px;
}

.menu li.last a:hover {
    background: #3e2d00;
}

@media (max-width: 1024px) {
    .menu {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu > li {
        width: 100%;
    }

    .menu > li > a {
        width: 100%;
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    .menu li div {
        position: relative;
        box-shadow: none;
    }
}

.login-info {
    padding: 8px 15px;
    font-size: 13px;
    color: #2b1e00;
    background: #f5f1d6;
    border-bottom: 1px solid #e0d59a;
}
