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

.custom-navbar {
    position: sticky;
    top: 0;
    z-index: 9999;

    padding: 14px 0;

    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255, 255, 255, .4);

    box-shadow:
        0 10px 35px rgba(15, 23, 42, .05);
}

/* BRAND */

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 14px;

    text-decoration: none;
}

.brand-logo {
    width: 52px;
    height: 52px;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            #2563eb,
            #0f172a);

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-size: 20px;

    box-shadow:
        0 10px 25px rgba(37, 99, 235, .25);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-title {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: .5px;
}

.brand-sub {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 2px;
}

/* MENU */

.navbar-nav {
    gap: 8px;
}

.nav-link {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 18px !important;

    border-radius: 14px;

    color: #334155 !important;

    font-size: 14px;
    font-weight: 600;

    transition: .3s ease;
}

.nav-link i {
    font-size: 13px;
}

.nav-link:hover,
.nav-link.active {

    background:
        linear-gradient(135deg,
            rgba(37, 99, 235, .08),
            rgba(59, 130, 246, .08));

    color: #2563eb !important;

    transform: translateY(-2px);
}

/* BUTTON */

.btn-login-nav {

    padding: 12px 24px;

    border-radius: 14px;

    background:
        linear-gradient(135deg,
            #2563eb,
            #1d4ed8);

    color: white;

    font-size: 14px;
    font-weight: 700;

    border: none;

    box-shadow:
        0 12px 30px rgba(37, 99, 235, .25);

    transition: .3s;
}

.btn-login-nav:hover {

    transform: translateY(-3px);

    color: white;

    box-shadow:
        0 18px 40px rgba(37, 99, 235, .35);
}

.btn-wa {

    width: 48px;
    height: 48px;

    border-radius: 14px;

    background: #22c55e;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;

    box-shadow:
        0 10px 25px rgba(34, 197, 94, .25);

    transition: .3s;
}

.btn-wa:hover {

    color: white;

    transform: translateY(-3px);
}

/* TOGGLER */

.navbar-toggler {
    padding: 8px 12px;
    border-radius: 12px;
    background: #f8fafc;
}

/* MOBILE */

@media(max-width:991px) {

    .custom-navbar {
        padding: 12px 0;
    }

    .navbar-collapse {

        margin-top: 20px;

        background: white;

        border-radius: 24px;

        padding: 20px;

        box-shadow:
            0 20px 40px rgba(0, 0, 0, .08);
    }

    .navbar-nav {
        gap: 5px;
    }

    .nav-link {
        padding: 14px 16px !important;
    }

    .btn-login-nav {
        width: 100%;
        text-align: center;
    }

    .d-flex.gap-2 {
        margin-top: 20px;
        flex-direction: column;
    }

    .btn-wa {
        width: 100%;
        height: 50px;
    }

}