/* ==========================================
   GAMEVIA PREMIUM NAVBAR
========================================== */

.navbar{

    position:sticky;

    top:20px;

    z-index:1000;

    padding:20px 0;

}

.navbar-wrapper{

    display:grid;

    grid-template-columns:220px 1fr auto;

    align-items:center;

    gap:32px;

    height:88px;

    padding:0 28px;

    background:#fff;

    border:var(--border);

    border-radius:var(--radius-pill);

    box-shadow:var(--shadow);

}

/* ================= LOGO ================= */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo-image{

    width:48px;

    height:48px;

    object-fit:contain;

}

.logo-text{

    font-size:28px;

    font-weight:800;

    color:var(--primary);

}

/* ================= MENU ================= */

.nav-menu{

    display:flex;

    justify-content:center;

    gap:34px;

}

.nav-menu li{

    list-style:none;

}

.nav-menu a{

    font-weight:700;

    color:var(--dark);

    transition:var(--transition);

    position:relative;

    padding:8px 0;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    width:0;

    height:3px;

    background:var(--primary);

    border-radius:999px;

    transform:translateX(-50%);

    transition:var(--transition);

}

.nav-menu a:hover{

    color:var(--primary);

}

.nav-menu a:hover::after,

.nav-menu a.active::after{

    width:70%;

}

/* ================= ACTION ================= */

.nav-action{

    display:flex;

    align-items:center;

    gap:18px;

}

.search-box{

    display:flex;

    align-items:center;

    gap:12px;

    width:300px;

    height:54px;

    padding:0 18px;

    border:var(--border);

    border-radius:var(--radius-pill);

    background:#fff;

}

.search-box img{

    width:20px;

    height:20px;

}

.search-box input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:15px;

}

.login-btn{

    height:54px;

    padding:0 28px;

}