:root{
  --blue-900:#0a2f6b;
  --blue-800:#0b3f8a;
  --blue-700:#0d56b6;
  --line:#e6ebf4;
  --muted:#5b6474;
  --radius:16px;
  --sticky-offset:110px;

  --baduy-url:none;
}

.header{
  position:sticky;
  top:0;
  z-index:999;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand__logo{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--line);
}
.brand__text{min-width:0}
.brand__title{
  font-weight:900;
  letter-spacing:-.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__subtitle{
  margin-top:2px;
  font-size:12.5px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav__link{
  padding:10px 10px;
  border-radius:12px;
  font-weight:800;
  color: var(--blue-700);
}
.nav__link:hover{
  background: rgba(4,186,222,.10);
  color: var(--blue-800);
}

.nav__cta{
  background: rgba(4,186,222,.12);
  border:1px solid rgba(13,86,182,.18);
}

.nav__right{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:8px;
}

/* Hamburger */
.navToggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
}
.navToggle span{
  display:block;
  width:18px;
  height:2px;
  background:#132646;
  margin:4px auto;
  border-radius:999px;
}

/* LOGIN BUTTON: BADUY OVERLAY */
#siteHeader .headerLoginBtn{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:linear-gradient(180deg, var(--blue-700), var(--blue-800));
  color:#fff !important;
  border:1px solid transparent;
  border-radius:18px;
  padding:12px 18px;
  font-weight:900;
  box-shadow:0 12px 24px rgba(13,86,182,.20);
}

#siteHeader .headerLoginBtn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background-image:var(--baduy-url);
  background-repeat:repeat;
  background-size:160px auto;

  opacity:0.18;
  mix-blend-mode:screen;
  filter:contrast(1.05) saturate(0.9);
}

#siteHeader .headerLoginBtn > span{
  position:relative;
  z-index:1;
}

#siteHeader .headerLoginBtn:hover{
  filter:brightness(1.03);
}
#siteHeader .headerLoginBtn:hover::before{
  opacity:0.22;
}

/* Responsive */
@media (max-width:980px){
  :root{ --sticky-offset:96px; }

  .navToggle{display:inline-flex;align-items:center;justify-content:center;}

  .nav{
    position:fixed;
    inset:calc(var(--sticky-offset) + 6px) 16px auto 16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    box-shadow:0 14px 30px rgba(8,20,44,.12);
  }
  .nav.is-open{display:flex;}

  .nav__right{
    margin-left:0;
    justify-content:space-between;
  }
}

@media (max-width:520px){
  .header__inner{padding:10px 0;}
  .brand__title{max-width: 180px;}
  .brand__subtitle{max-width: 180px;}
}