.top-navbar{ position: sticky; top: 0; z-index: 1000; width: 100%; background: #0f172a; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
/* ========================= CONTAINER ========================= */
.nav-container{
    max-width: 1300px;
    margin: auto;
    height: 70px;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
/* ========================= LOGO ========================= */
.logo{
    display: flex;
    flex:1;
}
.logo a{ color: white; text-decoration: none; font-size: 24px; font-weight: 700; letter-spacing: 1px; }
/* ========================= MENU ========================= */
.menu{ display: flex; align-items: center; gap: 8px; list-style: none; }
.menu li{ position: relative; }
.menu li a{ display: flex; align-items: center; gap: 6px; color: white; text-decoration: none; font-size: 15px; font-weight: 500; padding: 12px 16px; border-radius: 8px; transition: background 0.25s ease, transform 0.2s ease; } /* HOVER */
.menu li a:hover{ background: rgba(255,255,255,0.08); transform: translateY(-1px); } /* ACTIVE LINK */
.menu li a.active{ background: #1e293b; }
/* ========================= DROPDOWN ARROW ========================= */
.arrow{ font-size: 11px; transition: transform 0.3s ease; }
/* Rotate on mobile open */
.has-dropdown.show .arrow{ transform: rotate(180deg); }
/* ========================= DROPDOWN ========================= */
.dropdown{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: calc(100% + 10px);
    left: 0; min-width: 230px;
    padding: 8px;
    background: white;
    border-radius: 12px;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; }
/* DROPDOWN LINKS */
.dropdown li a{ color: #111827; border-radius: 8px; padding: 6px 7px; }
/* DROPDOWN HOVER */
.dropdown li a:hover{ background: #f1f5f9; }
/* DESKTOP DROPDOWN */
@media(min-width: 993px){
    .has-dropdown:hover .dropdown{ opacity: 1; visibility: visible; transform: translateY(0);
    }
}
/* ========================= MOBILE BUTTON ========================= */
.mobile-btn{
    display: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease;
    margin-left:auto;
}
.mobile-btn.active{ transform: rotate(90deg); }
/* ========================= MOBILE ========================= */
@media(max-width: 992px){
    /* SHOW MOBILE BUTTON */
    .mobile-btn{ display: block;}
    /* MOBILE MENU */
    .menu{ position: absolute; top: 70px; left: 0; width: 100%; background: #0f172a; flex-direction: column; align-items: stretch; padding: 0 20px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease; }
    .menu.active{ max-height: 1000px; opacity: 1; visibility: visible; padding: 20px; }
    .menu li{ width: 100%; }
    .menu li a{ width: 100%; justify-content: space-between; }
    /* MOBILE DROPDOWN */
    .dropdown{ position: relative; top: 0; width: 100%; min-width: 100%; background: #1e293b; margin-top: 6px; padding: 6px; border-radius: 10px; box-shadow: none; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transform: none; transition: max-height 0.35s ease, opacity 0.3s ease; }
    .has-dropdown.show .dropdown{ max-height: 500px; opacity: 1; visibility: visible; } /* MOBILE DROPDOWN LINKS */
    .dropdown li a{ color: white; }
    .dropdown li a:hover{ background: rgba(255,255,255,0.08); }
}