/*
  Indibems unified header system
  This file intentionally owns header layout and responsive behaviour.
*/

:root {
  --ib-red: #ef1744;
  --ib-ink: #071b34;
  --ib-header-line: rgba(255, 255, 255, .19);
}

html body .site-header {
  position: absolute !important;
  inset: 0 0 auto !important;
  z-index: 1000 !important;
  width: 100% !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color .24s ease, box-shadow .24s ease, color .24s ease !important;
}

html body .site-header *,
html body .site-header *::before,
html body .site-header *::after { box-sizing: border-box !important; }

html body .site-header .header-shell {
  display: flex !important;
  align-items: center !important;
  width: min(84%, 1600px) !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body .site-header .utility-bar {
  height: 44px !important;
  border-bottom: 1px solid var(--ib-header-line) !important;
  background: transparent !important;
}

html body .site-header .main-nav {
  height: 75px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

html body .site-header .audience-nav {
  display: flex !important;
  align-self: stretch !important;
  align-items: center !important;
  gap: 43px !important;
}

html body .site-header .audience-nav a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 100% !important;
  color: rgba(255, 255, 255, .72) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .18px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

html body .site-header .audience-nav a[aria-current="page"],
html body .site-header .audience-nav a:hover { color: #fff !important; }

html body .site-header .audience-nav a[aria-current="page"]::before {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  border-radius: 0 0 3px 3px !important;
  content: "" !important;
  background: var(--ib-red) !important;
}

html body .site-header .utility-actions {
  display: flex !important;
  align-items: center !important;
  gap: 27px !important;
  height: 100% !important;
  margin-left: auto !important;
}

html body .site-header .login-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #fff !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .16px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

html body .site-header .login-link svg { width: 17px !important; height: 17px !important; }

html body .site-header .language-switcher {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

html body .site-header .language {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #fff !important;
  background: transparent !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .14px !important;
  line-height: 1 !important;
}

html body .site-header .language[aria-pressed="true"] {
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .15) !important;
}

html body .site-header .language + .language {
  padding-left: 20px !important;
  border-left: 1px solid rgba(255, 255, 255, .32) !important;
}

html body .site-header .flag { width: 16px !important; height: 16px !important; }
html body .site-header .flag-en {
  background: url("/assets/images/logo/flag-united-kingdom.svg") center / cover no-repeat !important;
}
html body .site-header .flag-en::before,
html body .site-header .flag-en::after { display: none !important; content: none !important; }

html body .site-header .brand {
  display: flex !important;
  flex: 0 0 124px !important;
  align-items: center !important;
  width: 124px !important;
  height: 34px !important;
  margin: 0 40px 0 0 !important;
}

html body .site-header .brand-logo {
  position: absolute !important;
  width: 124px !important;
  max-width: 124px !important;
  max-height: 34px !important;
  height: auto !important;
  transform: none !important;
}

html body .site-header .brand-logo-white { display: block !important; }
html body .site-header .brand-logo-red { display: none !important; }

html body .site-header .primary-nav {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  gap: clamp(24px, 2.2vw, 40px) !important;
}

html body .site-header .nav-dropdown { display: flex !important; align-items: center !important; }

html body .site-header .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #fff !important;
  background: transparent !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .16px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

html body .site-header .nav-link:hover,
html body .site-header .nav-dropdown.is-open .nav-link { color: var(--ib-red) !important; }
html body .site-header .nav-link svg { width: 12px !important; height: 12px !important; }

html body .site-header .nav-tools {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  height: 100% !important;
  margin-left: auto !important;
}

html body .site-header .search {
  display: flex !important;
  align-items: center !important;
  width: 240px !important;
  height: 40px !important;
  padding: 0 14px 0 16px !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(14, 14, 18, .36) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}

html body .site-header .search svg { width: 24px !important; height: 24px !important; flex: none !important; }
html body .site-header .search input {
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 13px !important;
  padding: 0 !important;
  outline: 0 !important;
  border: 0 !important;
  color: #fff !important;
  background: transparent !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .12px !important;
}
html body .site-header .search input::placeholder { color: #fff !important; opacity: .9 !important; }

html body .site-header .support-menu {
  display: inline-flex !important;
  flex: 0 0 78px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 78px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(14, 14, 18, .20) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

html body .site-header .support-menu > svg:first-child { width: 20px !important; height: 20px !important; }
html body .site-header .support-menu .chevron { width: 10px !important; height: 10px !important; margin: 0 !important; }
html body .site-header .support-menu:hover,
html body .site-header .support-menu:focus-visible { border-color: var(--ib-red) !important; color: var(--ib-red) !important; }

html body .site-header .mobile-menu-toggle { display: none !important; }

/* Header after scrolling */
html body .site-header.is-scrolled {
  position: fixed !important;
  color: var(--ib-ink) !important;
  background: #fff !important;
  box-shadow: 0 5px 22px rgba(7, 27, 52, .10) !important;
}

html body .site-header.is-scrolled .utility-bar { border-color: #e5e7eb !important; background: #f7f7f8 !important; }
html body .site-header.is-scrolled .main-nav { border: 0 !important; background: #fff !important; }
html body .site-header.is-scrolled .audience-nav a { color: #738095 !important; }
html body .site-header.is-scrolled .audience-nav a[aria-current="page"],
html body .site-header.is-scrolled .audience-nav a:hover { color: var(--ib-red) !important; }
html body .site-header.is-scrolled .login-link,
html body .site-header.is-scrolled .language,
html body .site-header.is-scrolled .nav-link { color: var(--ib-ink) !important; }
html body .site-header.is-scrolled .language + .language { border-color: #d6dbe1 !important; }
html body .site-header.is-scrolled .language[aria-pressed="true"] { background: #e8ebee !important; }
html body .site-header.is-scrolled .brand-logo-white { display: none !important; }
html body .site-header.is-scrolled .brand-logo-red { display: block !important; }
html body .site-header.is-scrolled .search { border-color: #d9dfe6 !important; color: var(--ib-ink) !important; background: #f1f3f5 !important; backdrop-filter: none !important; }
html body .site-header.is-scrolled .search input,
html body .site-header.is-scrolled .search input::placeholder { color: var(--ib-ink) !important; }
html body .site-header.is-scrolled .support-menu { border-color: var(--ib-red) !important; color: var(--ib-red) !important; background: #fff !important; backdrop-filter: none !important; }

/* Compact desktops keep the complete navigation, with a denser rhythm. */
@media (min-width: 1200px) and (max-width: 1439px) {
  html body .site-header .header-shell { width: min(90%, 1260px) !important; }
  html body .site-header .utility-bar { height: 50px !important; }
  html body .site-header .main-nav { height: 78px !important; }
  html body .site-header .audience-nav { gap: 38px !important; }
  html body .site-header .audience-nav a,
  html body .site-header .login-link { font-size: 14px !important; }
  html body .site-header .brand { flex-basis: 114px !important; width: 114px !important; height: 34px !important; margin-right: 34px !important; }
  html body .site-header .brand-logo { width: 114px !important; max-width: 114px !important; max-height: 34px !important; }
  html body .site-header .primary-nav { gap: clamp(16px, 1.9vw, 28px) !important; }
  html body .site-header .nav-link { font-size: 13px !important; gap: 5px !important; }
  html body .site-header .nav-link svg { width: 11px !important; height: 11px !important; }
  html body .site-header .nav-tools { gap: 10px !important; }
  html body .site-header .search { width: 214px !important; height: 42px !important; padding-left: 14px !important; }
  html body .site-header .search svg { width: 23px !important; height: 23px !important; }
  html body .site-header .search input { margin-left: 11px !important; font-size: 13px !important; }
  html body .site-header .support-menu { flex-basis: 78px !important; width: 78px !important; height: 42px !important; gap: 7px !important; }
  html body .site-header .support-menu > svg:first-child { width: 19px !important; height: 19px !important; }
  html body .site-header .support-menu .chevron { width: 10px !important; height: 10px !important; }
  html body .site-header.is-scrolled .nav-tools .search { width: 214px !important; height: 42px !important; }
}

/* Tablets and narrower use the mobile menu rather than a crowded desktop row. */
@media (max-width: 1199px) {
  html body .site-header .header-shell { width: calc(100% - 48px) !important; }
  html body .site-header .utility-bar { height: 46px !important; }
  html body .site-header .main-nav { height: 74px !important; }
  html body .site-header .audience-nav { gap: 30px !important; }
  html body .site-header .audience-nav a { font-size: 13px !important; }
  html body .site-header .audience-nav a[aria-current="page"]::before { width: 56px !important; height: 3px !important; }
  html body .site-header .utility-actions { gap: 18px !important; }
  html body .site-header .login-link { font-size: 13px !important; }
  html body .site-header .language { font-size: 12px !important; }
  html body .site-header .brand { flex-basis: 124px !important; width: 124px !important; height: 35px !important; margin-right: 0 !important; }
  html body .site-header .brand-logo { width: 124px !important; max-width: 124px !important; max-height: 35px !important; }
  html body .site-header .primary-nav,
  html body .site-header .support-menu { display: none !important; }
  html body .site-header .nav-tools { gap: 12px !important; }
  html body .site-header .search { width: min(220px, 30vw) !important; height: 44px !important; }
  html body .site-header .search svg { width: 23px !important; height: 23px !important; }
  html body .site-header .search input { margin-left: 12px !important; font-size: 13px !important; }
  html body .site-header .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .76) !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: rgba(14, 14, 18, .22) !important;
  }
  html body .site-header .mobile-menu-toggle svg { width: 22px !important; height: 22px !important; }
  html body .site-header.is-scrolled .mobile-menu-toggle { border-color: #d6dce3 !important; color: var(--ib-ink) !important; background: #fff !important; }
  html body .site-header.is-scrolled .nav-tools .search { width: min(220px, 30vw) !important; height: 44px !important; }
}

@media (max-width: 767px) {
  html body .site-header .header-shell { width: calc(100% - 32px) !important; }
  html body .site-header .utility-bar { height: 42px !important; }
  html body .site-header .main-nav { height: 66px !important; }
  html body .site-header .audience-nav { gap: 21px !important; }
  html body .site-header .audience-nav a { font-size: 11px !important; }
  html body .site-header .audience-nav a[aria-current="page"]::before { width: 46px !important; height: 2px !important; }
  html body .site-header .utility-actions { gap: 0 !important; }
  html body .site-header .login-link { gap: 7px !important; font-size: 11px !important; }
  html body .site-header .login-link svg { width: 14px !important; height: 14px !important; }
  html body .site-header .language-switcher { display: none !important; }
  html body .site-header .brand { flex-basis: 112px !important; width: 112px !important; height: 32px !important; }
  html body .site-header .brand-logo { width: 112px !important; max-width: 112px !important; max-height: 32px !important; }
  html body .site-header .nav-tools { gap: 7px !important; }
  html body .site-header .search,
  html body .site-header .mobile-menu-toggle { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; }
  html body .site-header .search { justify-content: center !important; padding: 0 !important; border-color: rgba(255, 255, 255, .40) !important; }
  html body .site-header .search input { display: none !important; }
  html body .site-header .search svg { width: 21px !important; height: 21px !important; }
}

@media (max-width: 374px) {
  html body .site-header .header-shell { width: calc(100% - 24px) !important; }
  html body .site-header .brand { flex-basis: 100px !important; width: 100px !important; height: 30px !important; }
  html body .site-header .brand-logo { width: 100px !important; max-width: 100px !important; max-height: 30px !important; }
  html body .site-header .audience-nav { gap: 15px !important; }
}

/* Mobile navigation drawer */
html body .site-header .mobile-panel {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: 0 !important;
  max-height: calc(100vh - 108px) !important;
  overflow-y: auto !important;
  padding: 12px 24px 24px !important;
  border-top: 1px solid rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  background: rgba(8, 8, 12, .98) !important;
}
html body .site-header .mobile-panel.is-open { display: grid !important; }
html body .site-header .mobile-panel a {
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
  color: inherit !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .14px !important;
  text-decoration: none !important;
}
html body .site-header.is-scrolled .mobile-panel { border-color: #e6e9ed !important; color: var(--ib-ink) !important; background: #fff !important; }
html body .site-header.is-scrolled .mobile-panel a { border-color: #edf0f3 !important; }

@media (max-width: 767px) {
  html body .site-header .mobile-panel { padding-inline: 16px !important; }
}

/*
  V2 — Telkomsel-inspired responsive rhythm.
  Keep the full navigation through compact desktop, then switch to the
  lighter search-and-menu pattern used by the reference on tablets and phones.
*/
@media (min-width: 1024px) and (max-width: 1199px) {
  html body .site-header .header-shell { width: min(86%, 1120px) !important; }
  html body .site-header .utility-bar { height: 46px !important; }
  html body .site-header .main-nav { height: 70px !important; }
  html body .site-header .audience-nav { gap: 38px !important; }
  html body .site-header .audience-nav a,
  html body .site-header .login-link { font-size: 14px !important; }
  html body .site-header .brand { flex-basis: 108px !important; width: 108px !important; height: 32px !important; margin-right: 28px !important; }
  html body .site-header .brand-logo { width: 108px !important; max-width: 108px !important; max-height: 32px !important; }
  html body .site-header .primary-nav { display: flex !important; gap: clamp(12px, 1.5vw, 20px) !important; }
  html body .site-header .nav-link { font-size: 12px !important; gap: 4px !important; }
  html body .site-header .nav-link svg { width: 10px !important; height: 10px !important; }
  html body .site-header .support-menu { display: inline-flex !important; flex-basis: 70px !important; width: 70px !important; height: 40px !important; gap: 5px !important; }
  html body .site-header .support-menu > svg:first-child { width: 18px !important; height: 18px !important; }
  html body .site-header .support-menu .chevron { width: 9px !important; height: 9px !important; }
  html body .site-header .mobile-menu-toggle { display: none !important; }
  html body .site-header .nav-tools { gap: 9px !important; }
  html body .site-header .search { width: min(190px, 20vw) !important; height: 40px !important; padding: 0 13px !important; }
  html body .site-header .search svg { width: 21px !important; height: 21px !important; }
  html body .site-header .search input { margin-left: 9px !important; font-size: 12px !important; }
  html body .site-header.is-scrolled .nav-tools .search { width: min(190px, 20vw) !important; height: 40px !important; }
}

@media (max-width: 1023px) {
  html body .site-header .primary-nav,
  html body .site-header .support-menu { display: none !important; }
  html body .site-header .audience-nav a:not([aria-current="page"]),
  html body .site-header .language-switcher { display: none !important; }
  html body .site-header .audience-nav { gap: 0 !important; }
  html body .site-header .audience-nav a[aria-current="page"]::before { content: none !important; }
  html body .site-header .audience-nav a[aria-current="page"]::after {
    margin-left: 7px !important;
    content: "⌄" !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
  html body .site-header .mobile-menu-toggle {
    display: inline-flex !important;
    flex: 0 0 34px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
  }
  html body .site-header .mobile-menu-toggle svg { width: 23px !important; height: 23px !important; }
  html body .site-header.is-scrolled .mobile-menu-toggle { color: var(--ib-ink) !important; background: transparent !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  html body .site-header .header-shell { width: calc(100% - 48px) !important; }
  html body .site-header .utility-bar { height: 36px !important; }
  html body .site-header .main-nav { height: 72px !important; }
  html body .site-header .audience-nav a,
  html body .site-header .login-link { font-size: 12px !important; }
  html body .site-header .login-link { gap: 7px !important; }
  html body .site-header .login-link svg { width: 14px !important; height: 14px !important; }
  html body .site-header .brand { flex-basis: 112px !important; width: 112px !important; height: 32px !important; }
  html body .site-header .brand-logo { width: 112px !important; max-width: 112px !important; max-height: 32px !important; }
  html body .site-header .nav-tools { gap: 16px !important; }
  html body .site-header .search { width: 118px !important; height: 36px !important; padding: 0 11px !important; }
  html body .site-header .search svg { width: 20px !important; height: 20px !important; }
  html body .site-header .search input { display: block !important; margin-left: 8px !important; font-size: 12px !important; }
  html body .site-header.is-scrolled .nav-tools .search { width: 118px !important; height: 36px !important; }
}

/* Desktop search must occupy the exact attached surface used by every mega
   menu. This final rule intentionally follows legacy search styling. */
@media (min-width: 1024px) {
  html body .site-header .site-search-panel {
    top: var(--ib-header-height) !important;
    right: 0 !important;
    left: 0 !important;
    min-height: calc(100vh - var(--ib-header-height)) !important;
    padding: 0 0 32px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .site-header .site-search-panel-shell {
    width: min(92.1vw, 1768px) !important;
    min-height: 474px !important;
    margin: 0 auto !important;
    padding: 38px clamp(40px, 4.4vw, 84px) 34px !important;
    border: 0 !important;
    border-radius: 0 0 10px 10px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body .site-header .site-search-input-wrap {
    min-height: 70px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
  }
}

/* Search uses the same attached desktop card geometry as the mega menus.
   Keeping the outer surface transparent prevents the separate dark band that
   previously appeared between the navigation and the white panel. */
@media (min-width: 1024px) {
  html body .site-header .site-search-panel {
    top: var(--ib-header-height) !important;
    min-height: calc(100vh - var(--ib-header-height)) !important;
    padding: 0 0 32px !important;
    background: transparent !important;
  }
  html body .site-header .site-search-panel-shell {
    width: min(92.1vw, 1768px) !important;
    min-height: 474px !important;
    margin: 0 auto !important;
    padding: 38px clamp(40px, 4.4vw, 84px) 34px !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: none !important;
  }
}

/* Search is a trigger.  The actual field lives in a dedicated surface, like
   the reference site, and works consistently across all breakpoints. */
html body .site-header .search { cursor: pointer !important; }
html body .site-header .search span { margin-left: 11px !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; }
html body .site-header .site-search-panel {
  position: fixed !important;
  z-index: 990 !important;
  top: 119px !important;
  right: 0 !important;
  left: 0 !important;
  display: none !important;
  min-height: 360px !important;
  padding: 26px 7.7vw 32px !important;
  color: var(--ib-ink) !important;
  background: #fff !important;
  box-shadow: 0 14px 26px rgba(7, 27, 52, .16) !important;
}
html body .site-header.search-open { color: var(--ib-ink) !important; background: #fff !important; box-shadow: 0 5px 18px rgba(7,27,52,.10) !important; }
html body .site-header.search-open .utility-bar { border-color: #e5e7eb !important; background: #f7f7f8 !important; }
html body .site-header.search-open .main-nav { background: #fff !important; }
html body .site-header.search-open .brand-logo-white { display: none !important; }
html body .site-header.search-open .brand-logo-red { display: block !important; }
html body .site-header.search-open .audience-nav a,
html body .site-header.search-open .login-link,
html body .site-header.search-open .language { color: var(--ib-ink) !important; }
html body .site-header.search-open .nav-link { color: var(--ib-ink) !important; }
html body .site-header.search-open .search { border-color: var(--ib-red) !important; color: var(--ib-red) !important; background: #fff !important; }
html body .site-header.search-open .support-menu { border-color: var(--ib-red) !important; color: var(--ib-red) !important; background: #fff !important; }
html body .site-header.search-open .site-search-panel { display: block !important; }
html body .site-header.search-open .search span { font-size: 14px !important; }
html body .site-header.search-open .search::after { content: "×" !important; margin-left: auto !important; color: var(--ib-red) !important; font: 300 29px/1 Arial, sans-serif !important; }
html body .site-header .site-search-panel { background: rgba(4, 10, 16, .58) !important; box-shadow: none !important; }
html body .site-header .site-search-panel-shell { width: min(92.2vw, 1768px) !important; min-height: 430px !important; margin: 0 auto !important; padding: 26px 40px 30px !important; border-radius: 15px !important; background: #fff !important; box-shadow: 0 5px 18px rgba(7,27,52,.20) !important; }
html body .site-header .site-search-input-wrap { display: flex !important; align-items: center !important; min-height: 82px !important; padding: 0 24px !important; border-radius: 15px !important; background: #fff !important; box-shadow: 0 4px 14px rgba(7,27,52,.16) !important; }
html body .site-header .site-search-input-wrap svg { width: 24px !important; height: 24px !important; flex: 0 0 auto !important; color: #748196 !important; }
html body .site-header .site-search-input-wrap input { width: 100% !important; min-width: 0 !important; margin-left: 16px !important; padding: 12px 0 !important; border: 0 !important; outline: 0 !important; color: var(--ib-ink) !important; font: 500 17px "Poppins", sans-serif !important; background: transparent !important; }
html body .site-header .site-search-input-wrap input::placeholder { color: #9aa5b5 !important; opacity: 1 !important; }
html body .site-header .site-search-close { display: none !important; }
html body .site-header .site-search-suggestions { display: grid !important; grid-template-columns: 236px 236px minmax(0, 1fr) !important; gap: 20px !important; margin-top: 25px !important; }
html body .site-header .site-search-suggestions .search-column { display: grid !important; align-content: start !important; gap: 22px !important; min-height: 290px !important; padding-right: 20px !important; border-right: 1px solid #e7ebef !important; }
html body .site-header .site-search-suggestions .search-history { gap: 28px !important; }
html body .site-header .site-search-suggestions strong { font: 700 14px "Poppins", sans-serif !important; }
html body .site-header .site-search-suggestions a { color: #617087 !important; font: 400 13px "Poppins", sans-serif !important; text-decoration: none !important; }
html body .site-header .site-search-suggestions a:hover { color: var(--ib-red) !important; }
html body .site-header .search-recommendations { display: grid !important; align-content: start !important; gap: 14px !important; }
html body .site-header .search-recommendation-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
html body .site-header .search-recommendation-cards a { position: relative !important; display: grid !important; min-height: 118px !important; padding: 17px !important; overflow: hidden !important; border-radius: 12px !important; color: #fff !important; background: linear-gradient(135deg, #b8002e, #f0194e) !important; }
html body .site-header .search-recommendation-cards a:nth-child(2) { background: linear-gradient(135deg, #0a426d, #1773b5) !important; }
html body .site-header .search-recommendation-cards a:nth-child(3) { background: linear-gradient(135deg, #681624, #bd2d37) !important; }
html body .site-header .search-recommendation-cards small { position: relative !important; z-index: 1 !important; font: 500 10px "Poppins", sans-serif !important; opacity: .92 !important; }
html body .site-header .search-recommendation-cards b { position: relative !important; z-index: 1 !important; align-self: end !important; font: 700 16px/1.15 "Poppins", sans-serif !important; }
html body .site-header .search-recommendation-cards span { position: absolute !important; right: 16px !important; bottom: 14px !important; font-size: 22px !important; }
html body .site-header .search-category-title { margin-top: 5px !important; }
html body .site-header .search-category-links { display: grid !important; grid-template-columns: repeat(5, minmax(0, 100px)) !important; gap: 10px !important; }
html body .site-header .search-category-links a { display: grid !important; min-height: 72px !important; padding: 10px !important; place-items: center !important; border: 1px solid #dce3ea !important; border-radius: 12px !important; color: var(--ib-ink) !important; font: 600 11px "Poppins", sans-serif !important; text-align: center !important; }
@media (min-width: 1024px) {
  html body .site-header .site-search-panel { padding: 26px 0 32px !important; }
  html body .site-header .site-search-panel-shell {
    width: min(92.1vw, 1768px) !important;
    min-height: 474px !important;
    padding: 38px clamp(40px, 4.4vw, 84px) 34px !important;
    border-radius: 0 0 10px 10px !important;
  }
}
@media (max-width: 1023px) {
  html body .site-header .site-search-panel { top: var(--ib-mobile-menu-top) !important; min-height: calc(100vh - var(--ib-mobile-menu-top)) !important; padding: 22px 24px 30px !important; }
  html body .site-header.search-open .main-nav { box-shadow: 0 5px 12px rgba(15,28,43,.13) !important; }
  html body .site-header .site-search-input-wrap { min-height: 58px !important; padding: 0 16px !important; border-radius: 12px !important; }
  html body .site-header .site-search-panel-shell { width: calc(100% - 32px) !important; min-height: 360px !important; padding: 20px !important; }
  html body .site-header .site-search-input-wrap input { font-size: 14px !important; }
}
@media (max-width: 767px) {
  html body .site-header .search { flex: 0 0 116px !important; width: 116px !important; height: 34px !important; justify-content: center !important; padding: 0 9px !important; }
  html body .site-header .search span { margin-left: 7px !important; font-size: 11px !important; }
  html body .site-header .site-search-panel { top: var(--ib-mobile-menu-top) !important; padding: 18px 16px 24px !important; }
  html body .site-header .site-search-suggestions { grid-template-columns: 1fr !important; gap: 24px !important; }
  html body .site-header .site-search-suggestions .search-column { min-height: 0 !important; padding: 0 !important; border: 0 !important; }
  html body .site-header .search-recommendation-cards { grid-template-columns: 1fr !important; }
  html body .site-header .search-category-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
  html body .site-header .header-shell { width: calc(100% - 32px) !important; }
  html body .site-header .utility-bar { height: 30px !important; }
  html body .site-header .main-nav { height: 66px !important; }
  html body .site-header .audience-nav a,
  html body .site-header .login-link { font-size: 10px !important; }
  html body .site-header .audience-nav a[aria-current="page"]::after { margin-left: 5px !important; font-size: 11px !important; }
  html body .site-header .login-link { gap: 5px !important; }
  html body .site-header .login-link svg { width: 12px !important; height: 12px !important; }
  html body .site-header .brand { flex-basis: 110px !important; width: 110px !important; height: 31px !important; }
  html body .site-header .brand-logo { width: 110px !important; max-width: 110px !important; max-height: 31px !important; }
  html body .site-header .nav-tools { gap: 13px !important; }
  html body .site-header .search { flex: 0 0 116px !important; width: 116px !important; height: 36px !important; padding: 0 11px !important; border-radius: 999px !important; }
  html body .site-header .search svg { width: 20px !important; height: 20px !important; }
  html body .site-header .search input { display: block !important; margin-left: 8px !important; font-size: 12px !important; }
  html body .site-header .mobile-menu-toggle { flex-basis: 30px !important; width: 30px !important; height: 30px !important; }
  html body .site-header .mobile-menu-toggle svg { width: 22px !important; height: 22px !important; }
  html body .site-header.is-scrolled .nav-tools .search { width: 116px !important; height: 36px !important; }
  html body .site-header .mobile-panel { max-height: calc(100vh - 96px) !important; }
}

@media (max-width: 374px) {
  html body .site-header .header-shell { width: calc(100% - 24px) !important; }
  html body .site-header .brand { flex-basis: 100px !important; width: 100px !important; }
  html body .site-header .brand-logo { width: 100px !important; max-width: 100px !important; }
  html body .site-header .nav-tools { gap: 8px !important; }
  html body .site-header .search { flex-basis: 108px !important; width: 108px !important; }
  html body .site-header.is-scrolled .nav-tools .search { width: 108px !important; }
}

/* Compact desktop: match the shorter two-rail rhythm of the reference. */
@media (min-width: 1024px) and (max-width: 1439px) {
  html body .site-header .header-shell { width: min(86%, 1260px) !important; }
  html body .site-header .utility-bar { height: 42px !important; }
  html body .site-header .main-nav { height: 70px !important; }
  html body .site-header .audience-nav { gap: 42px !important; }
  html body .site-header .audience-nav a,
  html body .site-header .login-link { font-size: 14px !important; }
  html body .site-header .brand { flex-basis: 112px !important; width: 112px !important; height: 32px !important; margin-right: 32px !important; }
  html body .site-header .brand-logo { width: 112px !important; max-width: 112px !important; max-height: 32px !important; }
  html body .site-header .primary-nav { gap: clamp(15px, 1.8vw, 24px) !important; }
  html body .site-header .nav-link { font-size: 13px !important; }
  html body .site-header .search { width: 214px !important; height: 42px !important; }
  html body .site-header .support-menu { flex-basis: 78px !important; width: 78px !important; height: 42px !important; }
  html body .site-header.is-scrolled .nav-tools .search { width: 214px !important; height: 42px !important; }
}

@media (min-width: 1024px) {
  html body .site-header .audience-nav a[aria-current="page"]::before { width: 100% !important; }
  html body .site-header .brand-logo { transform: translateX(-4px) !important; }
}

/* Product-specific overrides must remain after the shared mega-menu rules. */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-service .mega-service-links.mega-product-links > a,
  html body .site-header .nav-panel-service .mega-service-links.mega-product-links > a:hover {
    min-height: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .site-header .nav-panel-service .mega-service-links.mega-product-links > a:hover strong {
    color: var(--ib-red) !important;
  }

  html body .site-header .nav-panel-service .mega-product-card::before {
    background: linear-gradient(180deg, rgba(5, 17, 30, .03), rgba(5, 17, 30, .48)) !important;
  }
}

/* Desktop mega menu — first applied to the WiFi installation choices. */
html body .site-header { --ib-header-height: 119px; }
@media (min-width: 1024px) and (max-width: 1439px) {
  html body .site-header { --ib-header-height: 112px; }
}
@media (min-width: 1024px) {
  html body .site-header .nav-panel-install {
    position: fixed !important;
    top: var(--ib-header-height) !important;
    right: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 330px)) !important;
    gap: 16px !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 246px !important;
    padding: 30px max(8%, calc((100vw - 1600px) / 2)) 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ib-ink) !important;
    background: #fff !important;
    box-shadow: 0 18px 30px rgba(7, 27, 52, .16) !important;
    transform: translateY(8px) !important;
  }
  html body .site-header .nav-dropdown.is-open .nav-panel-install { transform: translateY(0) !important; }
  html body .site-header .nav-panel-install .mega-install-intro {
    display: grid !important;
    grid-column: 1 / -1 !important;
    gap: 5px !important;
    margin: 0 0 4px !important;
  }
  html body .site-header .mega-install-intro span {
    color: var(--ib-red) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .35px !important;
    text-transform: uppercase !important;
  }
  html body .site-header .mega-install-intro strong {
    color: var(--ib-ink) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  html body .site-header .nav-panel-install .mega-install-option {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    min-height: 118px !important;
    padding: 20px 22px !important;
    border: 1px solid #e5e9ee !important;
    border-radius: 14px !important;
    color: var(--ib-ink) !important;
    background: #fff !important;
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }
  html body .site-header .nav-panel-install .mega-install-option:hover {
    border-color: rgba(239, 23, 68, .55) !important;
    color: var(--ib-ink) !important;
    background: #fff7f9 !important;
    box-shadow: 0 8px 18px rgba(239, 23, 68, .10) !important;
    transform: translateY(-2px) !important;
  }
  html body .site-header .nav-panel-install .mega-install-option strong {
    color: var(--ib-ink) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  html body .site-header .nav-panel-install .mega-install-option span {
    margin: 0 !important;
    color: #667085 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  html body .site-header .nav-panel-install .mega-install-option em {
    margin-top: 4px !important;
    color: var(--ib-red) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 600 !important;
  }
  html body .site-header .mega-install-option em b { margin-left: 5px !important; font-size: 16px !important; }
}

/* Visual mega menu — the left column remains useful as a clear link list,
   while the right column adds the richer promotional-card treatment. */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-install {
    grid-template-columns: minmax(330px, .78fr) minmax(560px, 1.22fr) !important;
    gap: clamp(32px, 4vw, 64px) !important;
    min-height: 370px !important;
    padding: 30px max(8%, calc((100vw - 1600px) / 2)) 32px !important;
    align-items: stretch !important;
  }

  html body .site-header .nav-panel-install .mega-install-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    column-gap: 28px !important;
    row-gap: 12px !important;
    padding-right: clamp(28px, 3vw, 52px) !important;
    border-right: 1px solid #e7e9ed !important;
  }

  html body .site-header .nav-panel-install .mega-install-intro {
    grid-column: 1 / -1 !important;
    margin: 0 0 12px !important;
  }

  html body .site-header .nav-panel-install .mega-install-option {
    min-height: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .site-header .nav-panel-install .mega-install-option:hover {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .site-header .nav-panel-install .mega-install-option strong {
    color: var(--ib-ink) !important;
    font-size: 16px !important;
  }

  html body .site-header .nav-panel-install .mega-install-option:hover strong,
  html body .site-header .nav-panel-install .mega-install-option:hover em {
    color: var(--ib-red) !important;
  }

  html body .site-header .nav-panel-install .mega-install-option em { display: none !important; }

  html body .site-header .nav-panel-install .mega-install-features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
  }

  html body .site-header .nav-panel-install .mega-install-card {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    min-height: 248px !important;
    padding: 23px !important;
    overflow: hidden !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    border-radius: 12px !important;
    color: #fff !important;
    background-color: #132238 !important;
    background-position: center !important;
    background-size: cover !important;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(13, 31, 54, .14) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
  }

  html body .site-header .nav-panel-install .mega-install-card::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    content: "" !important;
    background: linear-gradient(180deg, rgba(5, 17, 30, .12) 8%, rgba(5, 17, 30, .83) 100%) !important;
  }

  html body .site-header .nav-panel-install .mega-install-card-home {
    background-image: url("/assets/images/mega-menu/wifi-rumah.png") !important;
  }

  html body .site-header .nav-panel-install .mega-install-card-business {
    background-image: url("/assets/images/mega-menu/wifi-kantor-usaha.png") !important;
  }

  html body .site-header .nav-panel-install .mega-install-card:hover {
    color: #fff !important;
    box-shadow: 0 13px 28px rgba(13, 31, 54, .22) !important;
    transform: translateY(-3px) !important;
  }

  html body .site-header .nav-panel-install .mega-install-card span,
  html body .site-header .nav-panel-install .mega-install-card strong,
  html body .site-header .nav-panel-install .mega-install-card em { z-index: 1 !important; }

  html body .site-header .nav-panel-install .mega-install-card span {
    margin-bottom: 5px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .22px !important;
    opacity: .92 !important;
  }

  html body .site-header .nav-panel-install .mega-install-card strong {
    font-family: "Poppins", sans-serif !important;
    font-size: clamp(18px, 1.45vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
  }

  html body .site-header .nav-panel-install .mega-install-card em {
    margin-top: 10px !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  html body .site-header .nav-panel-install .mega-install-card em b {
    margin-left: 6px !important;
    font-size: 15px !important;
  }
}

/* Mega menu for provider services: the same contained panel rhythm as WiFi installation. */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-service {
    position: fixed !important;
    top: var(--ib-header-height) !important;
    left: 50% !important;
    width: min(92.1vw, 1768px) !important;
    min-height: 420px !important;
    padding: 38px clamp(40px, 4.4vw, 84px) 34px !important;
    display: grid !important;
    grid-template-columns: minmax(430px, .9fr) minmax(420px, 1.1fr) !important;
    gap: clamp(42px, 6vw, 100px) !important;
    border: 0 !important;
    border-radius: 0 0 10px 10px !important;
    color: var(--ib-ink) !important;
    background: #fff !important;
    box-shadow: 0 18px 30px rgba(7, 27, 52, .16) !important;
    transform: translate(-50%, 8px) !important;
  }

  html body .site-header .nav-dropdown.is-open .nav-panel-service { transform: translate(-50%, 0) !important; }

  html body .site-header .nav-panel-service .mega-service-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    column-gap: 34px !important;
    row-gap: 16px !important;
    padding-right: clamp(30px, 4vw, 70px) !important;
    border-right: 1px solid #e7e9ed !important;
  }

  html body .site-header .mega-service-intro {
    display: grid !important;
    grid-column: 1 / -1 !important;
    gap: 5px !important;
    margin: 0 0 12px !important;
  }

  html body .site-header .mega-service-intro span {
    color: var(--ib-red) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .35px !important;
    text-transform: uppercase !important;
  }

  html body .site-header .mega-service-intro strong {
    color: var(--ib-ink) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  html body .site-header .mega-service-provider-label {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    color: #667085 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }

  html body .site-header .nav-panel-service .mega-service-links > a {
    display: grid !important;
    gap: 0 !important;
    min-height: 62px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 10px !important;
    color: var(--ib-ink) !important;
    background: linear-gradient(135deg, #222d38, #111820) !important;
    box-shadow: 0 5px 12px rgba(8, 17, 29, .16) !important;
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  }

  html body .site-header .nav-panel-service .mega-service-links > a:hover {
    border-color: rgba(255, 255, 255, .40) !important;
    background: linear-gradient(135deg, #2b3744, #151e28) !important;
    box-shadow: 0 9px 18px rgba(8, 17, 29, .25) !important;
    transform: translateY(-2px) !important;
  }
  html body .site-header .nav-panel-service .mega-service-links > a strong { font-family: "Poppins", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; }
  html body .site-header .nav-panel-service .mega-service-links > a:hover strong { color: var(--ib-red) !important; }
  html body .site-header .nav-panel-service .mega-service-links > a span { margin: 0 !important; color: #667085 !important; font-family: "Poppins", sans-serif !important; font-size: 12px !important; line-height: 1.5 !important; }
  html body .site-header .nav-panel-service .mega-service-links > a .provider-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }
  html body .site-header .nav-panel-service .mega-service-links > a .provider-logo img {
    display: block !important;
    width: 112px !important;
    max-width: 112px !important;
    height: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  html body .site-header .nav-panel-service .mega-service-links > a:hover .provider-logo img { transform: translateX(2px) !important; }

  html body .site-header .mega-service-card {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    min-height: 270px !important;
    height: auto !important;
    align-self: stretch !important;
    padding: 28px !important;
    overflow: hidden !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: url("/assets/images/mega-menu/layanan-internet.png") center / cover no-repeat !important;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(13, 31, 54, .14) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
  }

  html body .site-header .mega-information-card {
    background-image: url("/assets/images/mega-menu/informasi-pelanggan-baru.png") !important;
  }

  html body .site-header .mega-product-card {
    background-image: url("/assets/images/mega-menu/produk-perangkat.png") !important;
  }

  html body .site-header .mega-product-links > a {
    min-height: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .site-header .mega-product-links > a:hover {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .site-header .mega-product-links > a:hover strong { color: var(--ib-red) !important; }

  html body .site-header .mega-product-card::before {
    background: linear-gradient(180deg, rgba(5, 17, 30, .03), rgba(5, 17, 30, .48)) !important;
  }

  html body .site-header .mega-service-card::before { position: absolute !important; z-index: -1 !important; inset: 0 !important; content: "" !important; background: linear-gradient(180deg, rgba(5, 17, 30, .12), rgba(5, 17, 30, .84)) !important; }
  html body .site-header .mega-service-card:hover { color: #fff !important; box-shadow: 0 13px 28px rgba(13, 31, 54, .22) !important; transform: translateY(-3px) !important; }
  html body .site-header .mega-service-card span,
  html body .site-header .mega-service-card strong,
  html body .site-header .mega-service-card em { position: relative !important; z-index: 1 !important; font-family: "Poppins", sans-serif !important; }
  html body .site-header .mega-service-card span { margin-bottom: 6px !important; font-size: 11px !important; font-weight: 600 !important; opacity: .92 !important; }
  html body .site-header .mega-service-card strong { font-size: clamp(19px, 1.65vw, 25px) !important; font-weight: 700 !important; line-height: 1.2 !important; }
  html body .site-header .mega-service-card em { margin-top: 12px !important; font-size: 12px !important; font-style: normal !important; font-weight: 500 !important; }
  html body .site-header .mega-service-card em b { margin-left: 6px !important; font-size: 15px !important; }
}

/* Opening a desktop mega menu uses the same light header state as a scrolled page. */
html body .site-header.has-open-dropdown {
  color: var(--ib-ink) !important;
  background: #fff !important;
  box-shadow: 0 5px 22px rgba(7, 27, 52, .10) !important;
}
html body .site-header.has-open-dropdown .utility-bar { border-color: #e5e7eb !important; background: #f7f7f8 !important; }
html body .site-header.has-open-dropdown .main-nav { border: 0 !important; background: #fff !important; }
html body .site-header.has-open-dropdown .audience-nav a { color: #738095 !important; }
html body .site-header.has-open-dropdown .audience-nav a[aria-current="page"],
html body .site-header.has-open-dropdown .audience-nav a:hover { color: var(--ib-red) !important; }
html body .site-header.has-open-dropdown .login-link,
html body .site-header.has-open-dropdown .language,
html body .site-header.has-open-dropdown .nav-link { color: var(--ib-ink) !important; }
html body .site-header.has-open-dropdown .nav-dropdown.is-open .nav-link { color: var(--ib-red) !important; }
html body .site-header.has-open-dropdown .language + .language { border-color: #d6dbe1 !important; }
html body .site-header.has-open-dropdown .language[aria-pressed="true"] { background: #e8ebee !important; }
html body .site-header.has-open-dropdown .brand-logo-white { display: none !important; }
html body .site-header.has-open-dropdown .brand-logo-red { display: block !important; }
html body .site-header.has-open-dropdown .search { border-color: #d9dfe6 !important; color: var(--ib-ink) !important; background: #f1f3f5 !important; backdrop-filter: none !important; }
html body .site-header.has-open-dropdown .search input,
html body .site-header.has-open-dropdown .search input::placeholder { color: var(--ib-ink) !important; }
html body .site-header.has-open-dropdown .support-menu { border-color: var(--ib-red) !important; color: var(--ib-red) !important; background: #fff !important; backdrop-filter: none !important; }

/* Compact navigation drawer for tablets and phones. */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel {
    max-height: calc(100vh - 96px) !important;
    padding: 10px 24px 28px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body .site-header .mobile-panel .mobile-menu-primary,
  html body .site-header .mobile-panel .mobile-menu-group > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    color: inherit !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .1px !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }

  html body .site-header .mobile-panel .mobile-menu-primary span,
  html body .site-header .mobile-panel .mobile-menu-group > summary span {
    font-size: 18px !important;
    font-weight: 400 !important;
    transition: transform .2s ease !important;
  }

  html body .site-header .mobile-panel .mobile-menu-group { margin: 0 !important; }
  html body .site-header .mobile-panel .mobile-menu-group > summary { list-style: none !important; }
  html body .site-header .mobile-panel .mobile-menu-group > summary::-webkit-details-marker { display: none !important; }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary { color: var(--ib-red) !important; border-bottom-color: transparent !important; }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary span { transform: rotate(180deg) !important; }

  html body .site-header .mobile-panel .mobile-menu-subitems {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px 18px !important;
    padding: 3px 0 13px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
  }

  html body .site-header .mobile-panel .mobile-menu-subitems a {
    min-height: 34px !important;
    padding: 5px 0 !important;
    border: 0 !important;
    color: inherit !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
  }

  html body .site-header .mobile-panel .mobile-menu-subitems a:hover { color: var(--ib-red) !important; }
  html body .site-header.is-scrolled .mobile-panel .mobile-menu-primary,
  html body .site-header.is-scrolled .mobile-panel .mobile-menu-group > summary,
  html body .site-header.is-scrolled .mobile-panel .mobile-menu-subitems { border-color: #e7ebef !important; }
}

@media (max-width: 640px) {
  html body .site-header .mobile-panel { padding: 6px 16px 24px !important; }
  html body .site-header .mobile-panel .mobile-menu-primary,
  html body .site-header .mobile-panel .mobile-menu-group > summary { min-height: 48px !important; font-size: 14px !important; }
  html body .site-header .mobile-panel .mobile-menu-subitems { grid-template-columns: 1fr !important; gap: 0 !important; padding-bottom: 10px !important; }
  html body .site-header .mobile-panel .mobile-menu-subitems a { min-height: 30px !important; font-size: 12px !important; }
}

/* Keep the desktop panel visually contained, like the reference mega menu. */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-install {
    right: auto !important;
    left: 50% !important;
    width: min(92.1vw, 1768px) !important;
    min-height: 474px !important;
    padding: 38px clamp(40px, 4.4vw, 84px) 34px !important;
    border-radius: 0 0 10px 10px !important;
    transform: translate(-50%, 8px) !important;
  }

  html body .site-header .nav-dropdown.is-open .nav-panel-install {
    transform: translate(-50%, 0) !important;
  }

  html body .site-header .nav-panel-install .mega-install-features {
    align-items: start !important;
  }

  html body .site-header .nav-panel-install .mega-install-card {
    min-height: 300px !important;
    height: 300px !important;
  }
}

/* Full light navigation surface after the hamburger is opened. */
@media (max-width: 1023px) {
  html body .site-header { --ib-mobile-menu-top: 108px; }
  html body .site-header.mobile-menu-open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 120 !important;
    color: var(--ib-ink) !important;
    background: #fff !important;
    box-shadow: 0 5px 22px rgba(7, 27, 52, .10) !important;
  }
  html body .site-header.mobile-menu-open .utility-bar { border-color: #e5e7eb !important; background: #f7f7f8 !important; }
  html body .site-header.mobile-menu-open .main-nav { background: #fff !important; }
  html body .site-header.mobile-menu-open .audience-nav a,
  html body .site-header.mobile-menu-open .login-link { color: #738095 !important; }
  html body .site-header.mobile-menu-open .audience-nav a[aria-current="page"] { color: var(--ib-red) !important; }
  html body .site-header.mobile-menu-open .brand-logo-white { display: none !important; }
  html body .site-header.mobile-menu-open .brand-logo-red { display: block !important; }
  html body .site-header.mobile-menu-open .search { display: none !important; }

  html body .site-header .mobile-menu-toggle { position: relative !important; }
  html body .site-header .mobile-menu-toggle > span {
    position: absolute !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }
  html body .site-header .mobile-menu-toggle > span:nth-child(1) { transform: translateY(-7px) !important; }
  html body .site-header .mobile-menu-toggle > span:nth-child(2) { transform: translateY(0) !important; }
  html body .site-header .mobile-menu-toggle > span:nth-child(3) { transform: translateY(7px) !important; }
  html body .site-header.mobile-menu-open .mobile-menu-toggle {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    color: var(--ib-ink) !important;
    background: transparent !important;
  }
  html body .site-header.mobile-menu-open .mobile-menu-toggle > span:nth-child(1) { transform: rotate(45deg) !important; }
  html body .site-header.mobile-menu-open .mobile-menu-toggle > span:nth-child(2) { opacity: 0 !important; }
  html body .site-header.mobile-menu-open .mobile-menu-toggle > span:nth-child(3) { transform: rotate(-45deg) !important; }

  html body .site-header .mobile-panel.is-open {
    position: fixed !important;
    top: var(--ib-mobile-menu-top) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    max-height: none !important;
    padding: 28px 24px 34px !important;
    overflow-y: auto !important;
    border: 0 !important;
    color: var(--ib-ink) !important;
    background: #fff !important;
  }
  html body .site-header .mobile-panel .mobile-menu-title {
    margin: 0 0 4px !important;
    padding: 0 0 18px !important;
    border-bottom: 2px solid var(--ib-red) !important;
    color: var(--ib-ink) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
  }
  html body .site-header .mobile-panel .mobile-menu-primary,
  html body .site-header .mobile-panel .mobile-menu-group > summary {
    min-height: 76px !important;
    padding: 12px 4px !important;
    border-bottom: 1px solid #e8ebef !important;
    color: var(--ib-ink) !important;
    background: transparent !important;
  }
  html body .site-header .mobile-panel .mobile-menu-copy { display: grid !important; gap: 3px !important; }
  html body .site-header .mobile-panel .mobile-menu-copy strong { color: var(--ib-ink) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; }
  html body .site-header .mobile-panel .mobile-menu-copy small { color: #7d8999 !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.35 !important; }
  html body .site-header .mobile-panel .mobile-menu-primary > i,
  html body .site-header .mobile-panel .mobile-menu-group > summary > i { color: var(--ib-ink) !important; font-size: 24px !important; font-style: normal !important; font-weight: 300 !important; }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary { color: var(--ib-red) !important; }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary > i { color: var(--ib-red) !important; transform: rotate(90deg) !important; }
  html body .site-header .mobile-panel .mobile-menu-subitems { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 18px !important; padding: 4px 4px 15px !important; border-bottom: 1px solid #e8ebef !important; }
  html body .site-header .mobile-panel .mobile-menu-subitems a { min-height: 32px !important; padding: 6px 0 !important; color: #64748b !important; font-size: 12px !important; }
}

@media (max-width: 767px) {
  html body .site-header { --ib-mobile-menu-top: 96px; }
  html body .site-header .mobile-panel.is-open { padding: 26px 20px 30px !important; }
  html body .site-header .mobile-panel .mobile-menu-title { font-size: 17px !important; }
  html body .site-header .mobile-panel .mobile-menu-subitems { grid-template-columns: 1fr !important; }
}

@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-panel-language {
    display: flex !important;
    width: max-content !important;
    margin: 26px auto 0 !important;
    padding: 5px !important;
    gap: 3px !important;
    border-radius: 999px !important;
    background: #f0f2f4 !important;
  }
  html body .site-header .mobile-panel .mobile-language {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 64px !important;
    height: 34px !important;
    gap: 7px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #64748b !important;
    background: transparent !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  html body .site-header .mobile-panel .mobile-language.is-active { color: var(--ib-ink) !important; background: #fff !important; box-shadow: 0 2px 8px rgba(19, 35, 54, .10) !important; }
  html body .site-header .mobile-panel .mobile-language .flag { width: 16px !important; height: 16px !important; }
}

/* A selected mobile category becomes its own in-panel screen, not a page navigation. */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-menu-group[open] {
    position: fixed !important;
    top: var(--ib-mobile-menu-top) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 125 !important;
    display: block !important;
    overflow-y: auto !important;
    padding: 26px 24px 34px !important;
    background: #fff !important;
  }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary {
    position: sticky !important;
    top: -26px !important;
    z-index: 2 !important;
    min-height: 58px !important;
    margin: -26px -24px 18px !important;
    padding: 16px 24px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-bottom: 0 !important;
    color: var(--ib-ink) !important;
    background: #fff !important;
  }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary::before {
    content: "‹" !important;
    color: var(--ib-ink) !important;
    font-size: 25px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
  }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary .mobile-menu-copy small,
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary > i { display: none !important; }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary .mobile-menu-copy strong {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }
  /* Preserve the submenu title: an earlier general rule rotates all spans
     in an open summary, while this span contains the actual menu text. */
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary .mobile-menu-copy {
    transform: none !important;
  }
  html body .site-header .mobile-panel .mobile-submenu-visual {
    position: relative !important;
    display: flex !important;
    min-height: 108px !important;
    margin: 0 0 20px !important;
    padding: 20px !important;
    overflow: hidden !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    border-radius: 12px !important;
    color: #fff !important;
    background-color: #192633 !important;
    background-position: center !important;
    background-size: cover !important;
  }
  html body .site-header .mobile-submenu-visual::before { position: absolute !important; inset: 0 !important; content: "" !important; background: linear-gradient(90deg, rgba(8, 17, 28, .78), rgba(8, 17, 28, .16)) !important; }
  html body .site-header .mobile-submenu-visual strong,
  html body .site-header .mobile-submenu-visual span { position: relative !important; z-index: 1 !important; font-family: "Poppins", sans-serif !important; }
  html body .site-header .mobile-submenu-visual strong { font-size: 16px !important; font-weight: 700 !important; }
  html body .site-header .mobile-submenu-visual span { margin-top: 4px !important; font-size: 11px !important; line-height: 1.35 !important; }
  html body .site-header .mobile-menu-service .mobile-submenu-visual { background-image: url("/assets/images/mega-menu/layanan-internet.png") !important; }
  html body .site-header .mobile-menu-information .mobile-submenu-visual { background-image: url("/assets/images/mega-menu/informasi-pelanggan-baru.png") !important; }
  html body .site-header .mobile-menu-product .mobile-submenu-visual { background-image: url("/assets/images/mega-menu/produk-perangkat.png") !important; }
  html body .site-header .mobile-panel .mobile-menu-group[open] .mobile-menu-subitems {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(239, 23, 68, .7) !important;
    border-bottom: 0 !important;
  }
  html body .site-header .mobile-panel .mobile-menu-group[open] .mobile-menu-subitems a {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    padding: 0 !important;
    border-bottom: 1px solid #edf0f3 !important;
    color: var(--ib-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  html body .site-header .mobile-panel .mobile-menu-group[open] .mobile-menu-subitems a::after { margin-left: auto !important; content: "›" !important; color: var(--ib-ink) !important; font-size: 22px !important; font-weight: 300 !important; }
}

@media (max-width: 767px) {
  html body .site-header .mobile-panel .mobile-menu-group[open] { padding: 24px 20px 30px !important; }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary { top: -24px !important; margin: -24px -20px 18px !important; padding: 16px 20px !important; }
}

/* Mobile root menu: align its visual density with the Telkomsel reference.
   Once a category is open, the category becomes the only screen title. */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel:has(.mobile-menu-group[open]) .mobile-menu-title {
    display: none !important;
  }

  html body .site-header .mobile-panel .mobile-menu-primary,
  html body .site-header .mobile-panel .mobile-menu-group > summary {
    gap: 12px !important;
    min-height: 68px !important;
    border-bottom: 0 !important;
  }

  html body .site-header .mobile-panel .mobile-menu-icon {
    display: inline-grid !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: var(--ib-red) !important;
    box-shadow: 0 7px 15px rgba(239, 23, 68, .18) !important;
    line-height: 1 !important;
  }
  html body .site-header .mobile-panel .mobile-menu-icon svg {
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  html body .site-header .mobile-panel .mobile-menu-copy { flex: 1 1 auto !important; }
  html body .site-header .mobile-panel .mobile-menu-copy strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }
  html body .site-header .mobile-panel .mobile-menu-copy small {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  html body .site-header .mobile-panel .mobile-menu-primary > i,
  html body .site-header .mobile-panel .mobile-menu-group > summary > i {
    font-size: 21px !important;
  }

  html body .site-header .mobile-panel .mobile-menu-group[open] > summary .mobile-menu-icon {
    display: none !important;
  }
  html body .site-header .mobile-panel .mobile-menu-group[open] .mobile-menu-subitems a {
    min-height: 50px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 767px) {
  html body .site-header .mobile-panel .mobile-menu-primary,
  html body .site-header .mobile-panel .mobile-menu-group > summary { min-height: 64px !important; }
  html body .site-header .mobile-panel .mobile-menu-icon { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
  html body .site-header .mobile-panel .mobile-menu-copy strong { font-size: 12.5px !important; }
  html body .site-header .mobile-panel .mobile-menu-copy small { font-size: 9.5px !important; }
}

/* The language control belongs to the bottom bar of the All Menu screen,
   not directly below the last row. */
@media (max-width: 1023px) {
  html body .site-header.mobile-menu-open .mobile-panel.is-open:not(:has(.mobile-menu-group[open])) .mobile-panel-language {
    position: fixed !important;
    z-index: 128 !important;
    bottom: 15px !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
  html body .site-header.mobile-menu-open .main-nav {
    position: relative !important;
    z-index: 126 !important;
    box-shadow: 0 5px 12px rgba(15, 28, 43, .13) !important;
  }
}

/* Mobile-only header density.  These selectors include the inner shell to
   prevent legacy responsive rules from increasing either navigation rail. */
@media (max-width: 767px) {
  html body .site-header .utility-bar,
  html body .site-header .utility-bar .header-shell {
    height: 32px !important;
    min-height: 32px !important;
  }
  html body .site-header .main-nav,
  html body .site-header .main-nav .header-shell {
    height: 60px !important;
    min-height: 60px !important;
  }
  html body .site-header { --ib-mobile-menu-top: 92px !important; }
  html body .site-header .audience-nav a,
  html body .site-header .utility-actions,
  html body .site-header .login-link { height: 32px !important; }
  html body .site-header .brand-logo { width: 106px !important; max-width: 106px !important; max-height: 30px !important; }
  html body .site-header .search { height: 34px !important; }
  html body .site-header .mobile-menu-toggle { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
  html body .site-header .audience-nav a[aria-current="page"]::after {
    width: 6px !important;
    height: 6px !important;
    margin: -3px 0 0 9px !important;
    border: solid currentColor !important;
    border-width: 0 1.35px 1.35px 0 !important;
    content: "" !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: rotate(45deg) !important;
  }
  html body .site-header .audience-nav a[aria-current="page"] {
    position: relative !important;
    top: -2px !important;
    transform: none !important;
  }
  html body .site-header .audience-nav a[aria-current="page"]::after {
    position: relative !important;
    top: -1px !important;
  }
  /* Keep only the lower navigation rail optically higher; the top bar is
     intentionally untouched. */
  html body .site-header .main-nav .brand,
  html body .site-header .main-nav .nav-tools {
    transform: none !important;
  }
  html body .site-header .main-nav .brand-logo { transform: translateX(-4px) !important; }
}

/* Tablet retains the hamburger navigation. Mirror the optical alignment from
   the finished phone header while preserving the larger tablet dimensions. */
@media (min-width: 768px) and (max-width: 1023px) {
  html body .site-header .utility-bar,
  html body .site-header .utility-bar .header-shell {
    height: 32px !important;
    min-height: 32px !important;
  }
  html body .site-header .audience-nav a,
  html body .site-header .utility-actions,
  html body .site-header .login-link { height: 32px !important; }
  html body .site-header .main-nav,
  html body .site-header .main-nav .header-shell {
    height: 64px !important;
    min-height: 64px !important;
  }
  html body .site-header { --ib-mobile-menu-top: 96px !important; }
  html body .site-header .audience-nav a[aria-current="page"] {
    position: relative !important;
    top: -2px !important;
    transform: none !important;
  }
  html body .site-header .audience-nav a[aria-current="page"]::after {
    position: relative !important;
    top: -1px !important;
    width: 7px !important;
    height: 7px !important;
    margin: -3px 0 0 9px !important;
    border: solid currentColor !important;
    border-width: 0 1.35px 1.35px 0 !important;
    content: "" !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: rotate(45deg) !important;
  }
  html body .site-header .main-nav .brand,
  html body .site-header .main-nav .nav-tools {
    transform: none !important;
  }
  html body .site-header .main-nav .brand-logo { transform: translateX(-4px) !important; }
  html body .site-header .mobile-panel .mobile-menu-primary,
  html body .site-header .mobile-panel .mobile-menu-group > summary {
    min-height: 70px !important;
  }
  html body .site-header .mobile-panel .mobile-menu-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }
}

/* Final desktop override: search shares the very same attached card plane as
   the desktop mega menus, with no intervening surface or surrounding halo. */
@media (min-width: 1024px) {
  html body .site-header .site-search-panel {
    top: var(--ib-header-height) !important;
    right: 0 !important;
    left: 0 !important;
    min-height: calc(100vh - var(--ib-header-height)) !important;
    padding: 0 0 32px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body .site-header .site-search-panel-shell {
    width: min(92.1vw, 1768px) !important;
    min-height: 474px !important;
    margin: 0 auto !important;
    padding: 38px clamp(40px, 4.4vw, 84px) 34px !important;
    border: 0 !important;
    border-radius: 0 0 10px 10px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Match the compact search field height used in the reference desktop card. */
@media (min-width: 1024px) {
  html body .site-header .site-search-panel-shell {
    padding-top: 26px !important;
  }
  html body .site-header .site-search-input-wrap {
    min-height: 70px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 0 16px rgba(7, 27, 52, .15) !important;
  }
}

/* Desktop help menu: it shares the single, contained card plane used by the
   other header dropdowns while retaining Indibems-specific content. */
@media (min-width: 1024px) {
  html body .site-header .support-dropdown { display: flex !important; align-items: center !important; }
  html body .site-header .nav-panel-help {
    position: fixed !important; top: var(--ib-header-height) !important; left: 50% !important; z-index: 100 !important;
    display: none !important; width: min(92.1vw, 1768px) !important; min-height: 420px !important;
    padding: 38px clamp(40px, 4.4vw, 84px) 34px !important;
    grid-template-columns: minmax(390px, .82fr) minmax(620px, 1.18fr) !important; gap: clamp(42px, 6vw, 100px) !important;
    border: 0 !important; border-radius: 0 0 10px 10px !important; color: var(--ib-ink) !important;
    background: #fff !important; box-shadow: 0 18px 30px rgba(7, 27, 52, .16) !important; transform: translate(-50%, 0) !important;
  }
  html body .site-header .support-dropdown.is-open .nav-panel-help { display: grid !important; }
  html body .site-header .mega-help-links {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-content: start !important;
    gap: 20px 34px !important; padding-right: clamp(30px, 4vw, 70px) !important; border-right: 1px solid #e7e9ed !important;
  }
  html body .site-header .mega-help-links a { display: grid !important; align-content: start !important; gap: 6px !important; min-height: 58px !important; color: var(--ib-ink) !important; text-decoration: none !important; }
  html body .site-header .mega-help-links strong { font: 600 16px "Poppins", sans-serif !important; }
  html body .site-header .mega-help-links span { color: #667085 !important; font: 400 12px/1.45 "Poppins", sans-serif !important; }
  html body .site-header .mega-help-links a:hover strong { color: var(--ib-red) !important; }
  html body .site-header .mega-help-features { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  html body .site-header .mega-help-card { position: relative !important; isolation: isolate !important; display: flex !important; min-height: 232px !important; padding: 24px !important; overflow: hidden !important; flex-direction: column !important; justify-content: flex-end !important; border-radius: 12px !important; color: #fff !important; background-position: center !important; background-size: cover !important; text-decoration: none !important; box-shadow: 0 8px 22px rgba(13, 31, 54, .12) !important; }
  html body .site-header .mega-help-card::before { position: absolute !important; z-index: -1 !important; inset: 0 !important; content: "" !important; background: linear-gradient(180deg, rgba(8, 17, 30, .06), rgba(8, 17, 30, .78)) !important; }
  html body .site-header .mega-help-card-guide { color: var(--ib-ink) !important; background: linear-gradient(135deg, #f5f6f8, #fbd2d8) !important; }
  html body .site-header .mega-help-card-guide::before { background: linear-gradient(120deg, rgba(255,255,255,.88), rgba(255,214,222,.16)) !important; }
  html body .site-header .mega-help-card-contact { background-image: url("/assets/images/mega-menu/informasi-pelanggan.png") !important; }
  html body .site-header .mega-help-card span { position: relative !important; z-index: 1 !important; margin-bottom: 5px !important; font: 600 11px "Poppins", sans-serif !important; opacity: .92 !important; }
  html body .site-header .mega-help-card strong { position: relative !important; z-index: 1 !important; font: 700 21px/1.14 "Poppins", sans-serif !important; }
  html body .site-header .mega-help-card em { position: relative !important; z-index: 1 !important; margin-top: 10px !important; font: 500 11px/1.35 "Poppins", sans-serif !important; font-style: normal !important; }
  html body .site-header .mega-help-card em b { margin-left: 6px !important; font-size: 15px !important; }
  html body .site-header.has-open-dropdown .support-dropdown.is-open .support-menu { border-color: var(--ib-red) !important; color: #fff !important; background: var(--ib-red) !important; }
  html body .site-header .support-dropdown.is-open .support-menu .chevron { transform: rotate(180deg) !important; }
  html body .site-header .support-dropdown.is-open .nav-panel-help {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1100 !important;
  }
}