/*
 * INDIBEMS — GLOBAL RESPONSIVE HEADER SYSTEM V1
 *
 * One header geometry for desktop, tablet and mobile.
 * The same centered shell is used at every breakpoint; only the
 * navigation density changes. This file is intentionally the LAST
 * header stylesheet so it becomes the single responsive source of truth.
 */

.site-header .header-shell{
  box-sizing:border-box;
  margin-inline:auto;
}

/* =========================
   DESKTOP — 1351px+
   ========================= */
@media (min-width:1351px){
  .site-header .header-shell{
    width:84%;
    max-width:1654px;
    padding-inline:0;
  }

  .site-header .utility-bar,
  .site-header .utility-bar .header-shell{height:44px;}

  .site-header .main-nav,
  .site-header .main-nav .header-shell{height:70px;}

  .site-header .audience-nav,
  .site-header .audience-nav a,
  .site-header .utility-actions,
  .site-header .language-switcher,
  .site-header .language,
  .site-header .login-link{height:44px;}

  .site-header .audience-nav{gap:42px;}
  .site-header .audience-nav a{font-size:14px;font-weight:500;}
  .site-header .audience-nav a[aria-current="page"]::before{width:58px;height:3px;}
  .site-header .utility-actions{gap:24px;}
  .site-header .login-link{font-size:14px;font-weight:700;gap:9px;}
  .site-header .language-switcher{gap:18px;}
  .site-header .language{font-size:12px;font-weight:700;gap:7px;}
  .site-header .language + .language{padding-left:22px;}
  .site-header .flag{width:18px;height:18px;}

  .site-header .brand{width:118px;height:34px;margin-right:38px;}
  .site-header .brand-logo{width:118px;max-width:118px;max-height:34px;}
  .site-header .primary-nav{gap:33px;}
  .site-header .nav-link{font-size:13.5px;font-weight:600;gap:5px;}
  .site-header .nav-link svg{width:11px;height:11px;}
  .site-header .nav-tools{gap:12px;margin-left:auto;}
  .site-header .search{width:246px;height:42px;padding-inline:14px 12px;border-radius:22px;}
  .site-header .search svg{width:21px;height:21px;}
  .site-header .search input{margin-left:12px;font-size:12.5px;}
  .site-header .support-menu{width:76px;height:42px;gap:7px;border-radius:22px;}
  .site-header .support-menu svg{width:18px;height:18px;}
  .site-header .support-menu .chevron{width:9px;height:9px;}
}

/* =========================
   COMPACT DESKTOP — 1171–1350px
   ========================= */
@media (min-width:1171px) and (max-width:1350px){
  .site-header .header-shell{
    width:88%;
    max-width:1120px;
    padding-inline:0;
  }

  .site-header .utility-bar,
  .site-header .utility-bar .header-shell{height:49px;}
  .site-header .main-nav,
  .site-header .main-nav .header-shell{height:69px;}
  .site-header .audience-nav,
  .site-header .audience-nav a,
  .site-header .utility-actions,
  .site-header .language-switcher,
  .site-header .language,
  .site-header .login-link{height:49px;}
  .site-header .audience-nav{gap:30px;}
  .site-header .audience-nav a{font-size:13px;}
  .site-header .audience-nav a[aria-current="page"]::before{width:54px;height:3px;}
  .site-header .utility-actions{gap:16px;}
  .site-header .login-link{font-size:13px;gap:8px;}
  .site-header .language-switcher{gap:14px;}
  .site-header .language{font-size:11px;gap:6px;}
  .site-header .language + .language{padding-left:16px;}
  .site-header .flag{width:17px;height:17px;}

  .site-header .brand{width:116px;height:34px;margin-right:28px;}
  .site-header .brand-logo{width:116px;max-width:116px;max-height:34px;}
  .site-header .primary-nav{gap:22px;}
  .site-header .nav-link{font-size:13px;gap:5px;}
  .site-header .nav-link svg{width:11px;height:11px;}
  .site-header .nav-tools{gap:10px;}
  .site-header .search{width:205px;height:40px;border-radius:21px;}
  .site-header .search input{font-size:12px;}
  .site-header .support-menu{width:74px;height:40px;border-radius:21px;gap:6px;}
  .site-header .support-menu svg{width:17px;height:17px;}
  .site-header .support-menu .chevron{width:8px;height:8px;}
}

/* =========================
   TABLET — 641–1170px
   ========================= */
@media (min-width:641px) and (max-width:1170px){
  .site-header .header-shell{
    width:90%;
    max-width:980px;
    padding-inline:0;
  }

  .site-header .utility-bar,
  .site-header .utility-bar .header-shell{height:40px;min-height:40px;}
  .site-header .main-nav,
  .site-header .main-nav .header-shell{height:70px;}

  .site-header .audience-nav,
  .site-header .audience-nav a,
  .site-header .utility-actions,
  .site-header .language-switcher,
  .site-header .language,
  .site-header .login-link{height:40px;}
  .site-header .audience-nav{gap:30px;}
  .site-header .audience-nav a{font-size:12px;font-weight:500;}
  .site-header .audience-nav a[aria-current="page"]::before{width:50px;height:2px;}
  .site-header .utility-actions{gap:20px;}
  .site-header .login-link{font-size:12px;font-weight:650;gap:7px;}
  .site-header .login-link svg{width:14px;height:14px;}
  .site-header .language-switcher{gap:14px;}
  .site-header .language{font-size:10.5px;gap:5px;}
  .site-header .language + .language{padding-left:14px;}
  .site-header .flag{width:15px;height:15px;}

  .site-header .primary-nav,
  .site-header .support-menu{display:none !important;}
  .site-header .brand{width:122px;height:34px;margin-right:0;}
  .site-header .brand-logo{width:122px;max-width:122px;max-height:34px;}
  .site-header .nav-tools{gap:12px;}
  .site-header .search{width:220px;height:44px;}
  .site-header .search input{font-size:13px;}
  .site-header .mobile-menu-toggle{display:inline-flex !important;width:46px;height:44px;border-radius:23px;}
  .site-header .mobile-menu-toggle svg{width:22px;height:22px;}
}

/* =========================
   MOBILE — <=640px
   ========================= */
@media (max-width:640px){
  /* One fluid shell for 320 / 375 / 425 and real Android devices. */
  .site-header .header-shell{
    width:calc(100% - 32px);
    max-width:none;
    padding-inline:0;
    margin-inline:auto;
  }

  .site-header .utility-bar,
  .site-header .utility-bar .header-shell{height:38px;min-height:38px;}
  .site-header .main-nav,
  .site-header .main-nav .header-shell{height:62px;}

  .site-header .audience-nav,
  .site-header .audience-nav a,
  .site-header .utility-actions,
  .site-header .login-link{height:38px;}
  .site-header .audience-nav{gap:20px;}
  .site-header .audience-nav a{font-size:11px;font-weight:500;line-height:1;}
  .site-header .audience-nav a[aria-current="page"]::before{width:48px;height:2px;}
  .site-header .utility-actions{gap:0;margin-left:auto;}

  /* Reference mobile topbar: keep only Personal / Tentang Kami / Masuk. */
  .site-header .language-switcher{display:none !important;}
  .site-header .login-link{font-size:11px;font-weight:700;gap:8px;line-height:1;}
  .site-header .login-link span{display:inline !important;}
  .site-header .login-link svg{width:14px;height:14px;}

  .site-header .primary-nav,
  .site-header .support-menu{display:none !important;}
  .site-header .brand{width:110px;height:32px;margin-right:0;}
  .site-header .brand-logo{width:110px;max-width:110px;max-height:32px;}
  .site-header .nav-tools{gap:6px;margin-left:auto;}
  .site-header .search,
  .site-header .mobile-menu-toggle{width:42px;height:42px;flex:0 0 42px;border-radius:50%;}
  .site-header .search{padding:0;justify-content:center;border-color:rgba(255,255,255,.08);background:rgba(15,15,18,.58);}
  .site-header .search input{display:none;}
  .site-header .search svg{width:21px;height:21px;}
  .site-header .mobile-menu-toggle{display:inline-flex !important;}
  .site-header .mobile-menu-toggle svg{width:20px;height:20px;}

  /* The mobile menu follows the same 16px content rail. */
  .site-header .mobile-panel{padding-inline:16px;}
}

/* Real Android devices and DevTools now use exactly the same mobile
   geometry. Do not add device-specific offsets here. */
@media (max-width:640px){
  .site-header .utility-bar .header-shell{padding-left:0 !important;padding-right:0 !important;}
}

/* Keep the approved hero/header background treatment. */
.site-header:not(.is-scrolled) .utility-bar{
  background:#000 !important;
  border-bottom-color:rgba(255,255,255,.14) !important;
}
.site-header:not(.is-scrolled) .main-nav{
  background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.76) 42%,rgba(0,0,0,.38) 76%,rgba(0,0,0,0) 100%) !important;
}
.site-header:not(.is-scrolled){background:transparent !important;}

@media (prefers-reduced-motion:reduce){
  .site-header,.site-header *{transition-duration:0.01ms !important;}
}