/* ============================================================
   TASC MRSM JELI — NAVBAR (kemas, responsif, interaktif)
   Skop: .navbar  (atasi tasc.css lama)
   ============================================================ */

.navbar{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:3px solid var(--gold,#c8972b);
  position:sticky;top:0;z-index:1000;
  box-shadow:0 2px 12px rgba(10,42,94,.08);
  transition:box-shadow .3s ease,padding .3s ease,background .3s ease;
}
.navbar.nav-scrolled{
  box-shadow:0 6px 24px rgba(10,42,94,.16);
  background:rgba(255,255,255,.98);
}
.navbar .container{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;width:100%;margin:0 auto;padding:0 24px;
  height:66px;gap:10px;flex-wrap:nowrap;transition:height .3s ease;
}
.navbar.nav-scrolled .container{height:58px}

/* ---------- LOGO ---------- */
.logo-area{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  flex-shrink:1;min-width:0;overflow:hidden;
}
.logo-img{height:42px;width:auto;object-fit:contain;flex-shrink:0;transition:transform .35s ease,height .3s ease}
.navbar.nav-scrolled .logo-img{height:36px}
.logo-area:hover .logo-img{transform:scale(1.06) rotate(-2deg)}
.logo-area:hover .logo-img:last-of-type{transform:scale(1.06) rotate(2deg)}
.logo-text{
  min-width:0;overflow:hidden;
  border-left:2px solid var(--h-border,#e7e2d6);padding-left:13px;margin-left:3px;
}
.logo-text p{
  font-size:15px;font-weight:800;color:var(--navy,#0a2a5e);line-height:1.2;
  margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;letter-spacing:-.01em;
}
.logo-text p b{color:var(--gold,#c8972b);font-weight:800}
.logo-text small{
  font-size:11px;color:var(--muted,#6b7280);font-weight:500;letter-spacing:.02em;line-height:1.2;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;
}

/* ---------- NAV LINKS (desktop) ---------- */
.nav-links{display:flex;gap:3px;align-items:center;flex-wrap:nowrap;height:66px;flex-shrink:0}
.nav-links a{
  position:relative;font-size:13px;font-weight:600;color:var(--navy-soft,#33446b);
  padding:9px 15px;display:inline-flex;align-items:center;gap:6px;border-radius:10px;
  text-decoration:none;white-space:nowrap;transition:color .25s ease,background .25s ease;
}
/* garis bawah animasi */
.nav-links a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:2px;
  background:linear-gradient(90deg,var(--gold,#c8972b),var(--gold-light,#e8b84b));
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.nav-links a:hover{color:var(--navy,#0a2a5e);background:rgba(10,42,94,.04)}
.nav-links a:hover::after{transform:scaleX(1)}
.navbar .nav-links a.active{color:var(--navy,#0a2a5e);font-weight:700;background:transparent !important;box-shadow:none !important}
.navbar .nav-links a.active:hover{background:rgba(10,42,94,.04) !important;color:var(--navy,#0a2a5e) !important}
.nav-links a.active::after{transform:scaleX(1)}

/* ---------- BUTANG CTA (Portal Ahli / Log Keluar) ---------- */
.nav-cta{
  background:linear-gradient(135deg,var(--gold-light,#e8b84b),var(--gold,#c8972b)) !important;
  color:var(--navy,#0a2a5e) !important;font-weight:700 !important;
  display:inline-flex !important;align-items:center;gap:6px;
  border-radius:50px;padding:9px 18px !important;margin-left:6px;
  white-space:nowrap;flex-shrink:0;
  box-shadow:0 4px 14px rgba(200,151,43,.30);transition:transform .25s ease,box-shadow .25s ease;
}
.nav-cta::after{display:none !important}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(200,151,43,.45)}

/* ---------- HAMBURGER ---------- */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  font-size:26px;color:var(--navy,#0a2a5e);padding:6px;flex-shrink:0;
  border-radius:10px;transition:background .25s ease,transform .3s ease;
  line-height:0;
}
.hamburger:hover{background:rgba(10,42,94,.06)}
.hamburger:active{transform:scale(.9)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .nav-links{
    display:none;position:fixed;top:66px;left:0;right:0;
    flex-direction:column;align-items:stretch;height:auto;gap:0;
    background:#fff;padding:8px 0 14px;
    border-bottom:3px solid var(--gold,#c8972b);
    box-shadow:0 12px 28px rgba(10,42,94,.18);
    max-height:calc(100vh - 66px);overflow-y:auto;z-index:999;
  }
  /* keadaan buka + animasi turun */
  .nav-links.nav-open{display:flex;animation:navDrop .35s cubic-bezier(.65,0,.35,1)}
  @keyframes navDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
  /* animasi setiap pautan masuk berperingkat */
  .nav-links.nav-open a{animation:navItem .4s ease backwards}
  .nav-links.nav-open a:nth-child(1){animation-delay:.04s}
  .nav-links.nav-open a:nth-child(2){animation-delay:.08s}
  .nav-links.nav-open a:nth-child(3){animation-delay:.12s}
  .nav-links.nav-open a:nth-child(4){animation-delay:.16s}
  .nav-links.nav-open a:nth-child(5){animation-delay:.20s}
  .nav-links.nav-open a:nth-child(6){animation-delay:.24s}
  .nav-links.nav-open a:nth-child(7){animation-delay:.28s}
  @keyframes navItem{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}

  .nav-links a{
    padding:14px 24px;border-radius:0;font-size:15px;width:100%;
    justify-content:flex-start;border-bottom:1px solid #eee;
  }
  .nav-links a::after{display:none}
  .nav-links a:hover{background:#f7f4ec}
  .nav-links a.active{background:#f7f4ec;border-left:4px solid var(--gold,#c8972b);padding-left:20px}
  .nav-cta{margin:14px 24px 4px !important;justify-content:center;border-radius:12px;padding:13px 18px !important}
}

@media (max-width:600px){
  .navbar .container{padding:0 14px;height:60px}
  .nav-links{top:60px;max-height:calc(100vh - 60px)}
  .logo-img{height:36px}
  .navbar.nav-scrolled .logo-img{height:32px}
  .logo-text p{font-size:12.5px}
  .logo-text small{display:none}
}

@media (max-width:380px){
  .logo-text p{font-size:11.5px}
  .logo-img{height:32px}
  .logo-area{gap:7px}
}