/* =========================================================
   Asia Spirit Consulting — Navbar v2 (compact & modern)
   Loaded AFTER style.css. Overrides header/nav only.
   ========================================================= */

/* anchor offset supaya judul tidak tertutup sticky header */
html{scroll-padding-top:84px}

/* ---------- top bar (lebih tipis) ---------- */
.topbar{font-size:12.5px;letter-spacing:.01em}
.topbar .wrap{padding-top:6px;padding-bottom:6px;gap:8px}
.topbar span{margin-right:14px;opacity:.92}
.topbar .social a{font-weight:600}

/* ---------- header ---------- */
header{
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 var(--line);
  transition:box-shadow .25s ease,background .25s ease;
}
header.is-scrolled{box-shadow:0 6px 24px rgba(10,37,64,.09);background:rgba(255,255,255,.96)}
header .wrap{height:64px;gap:18px}

/* brand */
header .brand{display:flex;align-items:center;flex:0 0 auto}
header .brand img{height:32px;width:auto;transition:height .2s ease}
header.is-scrolled .brand img{height:30px}

/* ---------- nav desktop ---------- */
header nav{position:static;display:block;box-shadow:none;background:none;margin-left:auto}
header nav>ul{display:flex;align-items:center;gap:2px;list-style:none}
header nav>ul>li{position:relative}
header nav>ul>li>a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 11px;border-radius:8px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--navy);
  transition:background .18s ease,color .18s ease;
}
header nav>ul>li>a:hover{background:var(--cream);color:var(--navy)}
header nav>ul>li>a::after{
  content:"";width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.45;margin-top:2px;
}
header nav>ul>li:not(.has-dd)>a::after{display:none}
header nav>ul>li.has-dd>a{color:var(--navy)}
header nav>ul>li.is-open>a,
header nav>ul>li:hover>a{color:var(--navy)}

/* dropdown */
header nav .dd{
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:290px;max-width:min(360px,86vw);
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:12px;box-shadow:0 18px 44px rgba(10,37,64,.14);
  padding:7px;display:block;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:60;
}
header nav li.has-dd:hover>.dd,
header nav li.has-dd:focus-within>.dd,
header nav li.has-dd.is-open>.dd{opacity:1;visibility:visible;transform:translateY(0)}
header nav .dd a{
  display:block;padding:9px 12px;border-radius:8px;
  font-size:13.5px;line-height:1.4;color:var(--ink);
  transition:background .15s ease,color .15s ease;
}
header nav .dd a:hover{background:var(--cream);color:var(--navy)}
/* panah kecil di dropdown */
header nav .dd::before{
  content:"";position:absolute;top:-7px;left:22px;width:11px;height:11px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);border-radius:2px 0 0 0;
}

/* ---------- tombol kanan ---------- */
header .hdr-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
header .hdr-cta{
  padding:9px 17px;border-radius:999px;
  font-size:13.5px;font-weight:700;line-height:1;
  box-shadow:0 6px 16px rgba(10,37,64,.14);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
header .hdr-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(10,37,64,.2)}

/* ---------- hamburger ---------- */
header .menu-btn{
  display:none;position:relative;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  transition:background .18s ease,border-color .18s ease;
}
header .menu-btn:hover{background:var(--cream)}
header .menu-btn span{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--navy);
  transition:transform .22s ease,opacity .18s ease;
}
header.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.menu-open .menu-btn span:nth-child(2){opacity:0}
header.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* tombol submenu (mobile only) */
.dd-toggle{display:none}

/* ---------- subnav halaman dalam ---------- */
.subnav{top:64px}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:1100px){
  header .hdr-cta{display:none}
}
@media (max-width:1024px){
  header nav>ul>li>a{padding:8px 9px;font-size:13px}
}
@media (max-width:980px){
  header .wrap{height:60px}
  header .brand img{height:29px}
  header .menu-btn{display:flex}
  .subnav{top:60px}

  header nav{
    position:absolute;top:60px;left:0;right:0;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 24px 48px rgba(10,37,64,.16);
    padding:10px 16px 18px;
    max-height:calc(100vh - 60px);overflow-y:auto;overscroll-behavior:contain;
    display:none;
  }
  header.menu-open nav{display:block}
  header nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  header nav>ul>li{position:static}
  header nav>ul>li>a{
    padding:12px 8px;border-radius:8px;font-size:15px;
    justify-content:flex-start;
  }
  header nav>ul>li>a::after{display:none}

  /* caret button di kanan */
  .dd-toggle{
    display:flex;position:absolute;right:6px;top:6px;
    width:36px;height:36px;align-items:center;justify-content:center;
    border:0;background:var(--cream);border-radius:8px;cursor:pointer;
  }
  .dd-toggle::before{
    content:"";width:7px;height:7px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
    transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease;
  }
  li.has-dd.is-open .dd-toggle::before{transform:rotate(-135deg) translate(-1px,-1px)}
  header nav>ul>li.has-dd{position:relative}

  /* dropdown jadi accordion */
  header nav .dd{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;border-left:2px solid var(--line);border-radius:0;
    box-shadow:none;padding:2px 0 6px 10px;margin:0 0 4px 8px;
    min-width:0;max-width:none;
    display:none;
  }
  header nav li.has-dd.is-open>.dd{display:block}
  header nav .dd::before{display:none}
  header nav .dd a{padding:10px 10px;font-size:14px;color:var(--muted)}
  header nav .dd a:hover{background:var(--cream);color:var(--navy)}

  /* CTA di dalam menu */
  .nav-cta-mobile{display:block;margin-top:10px}
  .nav-cta-mobile a{
    display:flex!important;justify-content:center;
    background:var(--gold)!important;color:var(--navy-2)!important;
    border-radius:999px!important;padding:13px 18px!important;font-weight:700;
  }
}
@media (min-width:981px){
  .nav-cta-mobile{display:none}
}
@media (max-width:560px){
  header .wrap{height:56px}
  header nav{top:56px;max-height:calc(100vh - 56px)}
  .subnav{top:56px}
  .topbar{font-size:12px}
  .topbar span{margin-right:10px}
}