/* ======================
   NAVBAR - FINAL PRODUCTION VERSION
====================== */

.topbar{
  background:rgba(255,255,255,0.95);
  border-bottom:1px solid #e2e8f0;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:10px 30px;

  position:sticky;
  top:0;
  z-index:999;

  backdrop-filter:blur(12px);

  min-height:60px;
  gap:20px;
}

/* LOGO */
.nav-left{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.nav-logo{
  height:44px;
  width:auto;
  object-fit:contain;
}

/* LINKS */
.top-links{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:22px;

  flex:1;

  white-space:nowrap;
}

.top-links a{
  text-decoration:none;
  color:#334155;
  font-weight:600;
  font-size:15px;

  transition:0.2s;
  white-space:nowrap;
}

.top-links a:hover{
  color:#2563eb;
}

/* LOGIN BUTTON */
.login-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  height:40px;

  padding:0 18px;

  background:linear-gradient(135deg,#2563eb,#14b8a6);
  color:#fff;

  border-radius:10px;

  font-weight:700;
  font-size:14px;

  text-decoration:none;

  white-space:nowrap;

  flex-shrink:0;

  line-height:1;

  transition:0.2s;
}

.login-btn:hover{
  transform:translateY(-1px);
}

/* ======================
   MOBILE FIX
====================== */

/* ======================
   MOBILE
====================== */
@media (max-width:768px){

  .topbar{
    padding:12px 15px;
    min-height:auto;
    gap:12px;
  }

  .nav-left{
    flex:1;
  }

  .nav-logo{
    height:38px;
  }

  .top-links{
    width:100%;
    order:3;

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:10px 16px;

    padding-top:5px;
  }

  .top-links a{
    font-size:13px;
  }

  .login-btn{
    height:36px;
    padding:0 14px;
    font-size:13px;
  }
}

@media (max-width:480px){

  .topbar{
    padding:10px 12px;
  }

  .nav-logo{
    height:34px;
  }

  .top-links{
    gap:8px 12px;
  }

  .top-links a{
    font-size:12px;
  }

  .login-btn{
    height:34px;
    padding:0 12px;
    font-size:12px;
  }
}