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

:root {
  --ib-brand: #002f78;
  --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-brand) !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-brand) !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 > .support-icon-customer { 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 .support-icon {
  display: block !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
html body .site-header .support-menu .support-icon-customer { filter: none !important; }
html body .site-header .support-menu .support-icon-chevron { filter: brightness(0) invert(1) !important; }
html body .site-header .support-menu:hover,
html body .site-header .support-menu:focus-visible { border-color: var(--ib-brand) !important; color: var(--ib-brand) !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-brand) !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-brand) !important; color: var(--ib-brand) !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 > .support-icon-customer { 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 > .support-icon-customer { 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-brand) !important; color: var(--ib-brand) !important; background: #fff !important; }
html body .site-header.search-open .support-menu { border-color: var(--ib-brand) !important; color: var(--ib-brand) !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-brand) !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-brand) !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, #00245c, #002f78) !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, #071b3b, #00449e) !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-brand) !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-brand) !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(0,47,120, .55) !important;
    color: var(--ib-ink) !important;
    background: #fff7f9 !important;
    box-shadow: 0 8px 18px rgba(0,47,120, .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-brand) !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-brand) !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/menu-pemasangan-rumah-desktop.webp") !important;
  }

  html body .site-header .nav-panel-install .mega-install-card-business {
    background-image: url("/assets/images/menu-pemasangan-bisnis-desktop.webp") !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-brand) !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-brand) !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-brand) !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-brand) !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-brand) !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-brand) !important; color: var(--ib-brand) !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-brand) !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-brand) !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-brand) !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-brand) !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-brand) !important; }
  html body .site-header .mobile-panel .mobile-menu-group[open] > summary > i { color: var(--ib-brand) !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(0,47,120, .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-brand) !important;
    box-shadow: 0 7px 15px rgba(0,47,120, .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-brand) !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-brand) !important; color: #fff !important; background: var(--ib-brand) !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;
  }
}


/* Telkomsel source PNGs for the desktop support button.
   Only icon rendering is changed; button geometry/interaction stays untouched. */
html body .site-header .support-menu:hover .support-icon,
html body .site-header .support-menu:focus-visible .support-icon,
html body .site-header.is-scrolled .support-menu .support-icon,
html body .site-header.search-open .support-menu .support-icon,
html body .site-header.has-open-dropdown .support-menu .support-icon {
  filter: brightness(0) saturate(100%) invert(15%) sepia(96%) saturate(2050%) hue-rotate(204deg) brightness(87%) contrast(110%) !important;
}
html body .site-header.has-open-dropdown .support-dropdown.is-open .support-menu .support-icon,
html body .site-header.search-open .support-menu:hover .support-icon,
html body .site-header.search-open .support-menu:focus-visible .support-icon,
html body .site-header.has-open-dropdown .support-menu:hover .support-icon,
html body .site-header.has-open-dropdown .support-menu:focus-visible .support-icon {
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
   V72 — DESKTOP PRIMARY NAV HOVER + CHEVRON INTERACTION
   Match the reference interaction without changing geometry:
   - text and chevron turn red together on hover/focus
   - an opened dropdown chevron turns upward
   - while any dropdown is open, other menu items still turn red on hover
   ========================================================= */
@media (min-width: 1200px) {
  html body .site-header .primary-nav .nav-link {
    transition: color .18s ease !important;
  }

  html body .site-header .primary-nav .nav-trigger svg {
    transform: rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform .22s ease, color .18s ease !important;
  }

  html body .site-header .primary-nav .nav-link:hover,
  html body .site-header .primary-nav .nav-link:focus-visible,
  html body .site-header .primary-nav .nav-dropdown.is-open > .nav-trigger,
  html body .site-header.has-open-dropdown .primary-nav .nav-link:hover,
  html body .site-header.has-open-dropdown .primary-nav .nav-link:focus-visible,
  html body .site-header.has-open-dropdown .primary-nav .nav-dropdown.is-open > .nav-trigger {
    color: var(--ib-brand) !important;
  }

  html body .site-header .primary-nav .nav-trigger[aria-expanded="true"] svg,
  html body .site-header .primary-nav .nav-dropdown.is-open > .nav-trigger svg {
    transform: rotate(180deg) !important;
  }
}

/* =========================================================
   V73 — DESKTOP MEGA-MENU BACKDROP
   Match the reference: while a desktop dropdown is open,
   dim only the page area behind the white dropdown panel.
   No geometry/content changes.
   ========================================================= */
@media (min-width: 1200px) {
  html body .site-header .header-menu-backdrop {
    position: fixed !important;
    top: var(--ib-header-height) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 20 !important;
    display: block !important;
    background: rgba(0, 0, 0, .30) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .18s ease, visibility .18s ease !important;
  }

  html body .site-header.has-open-dropdown .header-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* =========================================================
   V74 — DESKTOP SEARCH BACKDROP
   Keep the page behind the desktop search surface dimmed with
   the same backdrop used by the other header dropdowns.
   No geometry/content changes.
   ========================================================= */
@media (min-width: 1200px) {
  html body .site-header.search-open .header-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* =========================================================
   V75 — DESKTOP SUPPORT ICON WHITE ON HOVER
   Visual-only correction requested from the 2026-09-03 screen recording.
   Keep the existing button geometry/background/interaction untouched;
   only force the customer + chevron PNGs to white while the support
   control is hovered/focused, matching the reference behavior.
   ========================================================= */
@media (min-width: 1351px) {
  html body .site-header .support-menu:hover .support-icon,
  html body .site-header .support-menu:focus-visible .support-icon,
  html body .site-header.is-scrolled .support-menu:hover .support-icon,
  html body .site-header.is-scrolled .support-menu:focus-visible .support-icon,
  html body .site-header.search-open .support-menu:hover .support-icon,
  html body .site-header.search-open .support-menu:focus-visible .support-icon,
  html body .site-header.has-open-dropdown .support-menu:hover .support-icon,
  html body .site-header.has-open-dropdown .support-menu:focus-visible .support-icon {
    filter: brightness(0) invert(1) !important;
  }
}

/* =========================================================
   V76 — MOBILE SUBMENU CLEAN SCREEN
   When a mobile category is opened, show only that selected
   category screen. Hide the root-menu rows behind it so the
   previous "Pemasangan WiFi" row cannot remain visible.
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel:has(> .mobile-menu-group[open]) > .mobile-menu-primary,
  html body .site-header .mobile-panel:has(> .mobile-menu-group[open]) > .mobile-menu-group:not([open]),
  html body .site-header .mobile-panel:has(> .mobile-menu-group[open]) > .mobile-panel-language {
    display: none !important;
  }
}

/* =========================================================
   V77 — MOBILE SUBMENU TOP ALIGNMENT
   The selected category screen must begin directly below the
   mobile header, matching the reference instead of receiving
   the mobile-header offset a second time inside .mobile-panel.
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-menu-group[open] {
    position: absolute !important;
    top: 0 !important;
  }
}

/* =========================================================
   V78 — MOBILE BANTUAN AS IN-MENU SUBSCREEN
   Match the reference interaction: Bantuan opens inside the
   mobile navigation instead of leaving the menu for a page.
   This styling is scoped only to the Bantuan mobile submenu.
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-menu-help[open] {
    background: #fff !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] > summary {
    margin-bottom: 16px !important;
  }

  html body .site-header .mobile-panel .mobile-help-feature {
    position: relative !important;
    display: none !important;
    min-height: 128px !important;
    margin: 0 0 10px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(255,247,249,.98) 0%, rgba(255,235,241,.92) 50%, rgba(255,235,241,.35) 100%),
      url("/assets/images/mega-menu/informasi-pelanggan.png") right 31% center / 62% auto no-repeat !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature {
    display: flex !important;
    align-items: center !important;
    padding: 20px 46% 20px 18px !important;
  }

  html body .site-header .mobile-panel .mobile-help-feature-copy {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    gap: 7px !important;
  }

  html body .site-header .mobile-panel .mobile-help-feature-copy strong {
    color: var(--ib-ink) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  html body .site-header .mobile-panel .mobile-help-feature-copy span {
    color: #566273 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  html body .site-header .mobile-panel .mobile-help-dots {
    display: none !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-dots {
    display: flex !important;
    width: max-content !important;
    margin: 0 auto 10px !important;
    padding: 3px 5px !important;
    gap: 3px !important;
    border: 1px solid #aeb6c0 !important;
    border-radius: 999px !important;
  }

  html body .site-header .mobile-panel .mobile-help-dots span {
    width: 13px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #cfd4da !important;
  }

  html body .site-header .mobile-panel .mobile-help-dots span:first-child {
    background: #8d96a1 !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-links {
    border-top: 1px solid #77818d !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-links a {
    min-height: 64px !important;
    padding: 9px 0 !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-links a > span {
    display: grid !important;
    gap: 2px !important;
    transform: none !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-links strong {
    color: var(--ib-ink) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-links small {
    color: #6f7b89 !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }
}


/* =========================================================
   V79 — MOBILE ROOT ITEMS OPEN AS SUBSCREENS + HELP VISUAL
   Reference behavior: primary mobile navigation categories do
   not leave the menu immediately. Pemasangan WiFi and Berita
   now use the same in-menu detail screen pattern as the other
   categories. Bantuan uses the same full-image treatment as
   the desktop support card instead of the washed-out variant.
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-menu-install .mobile-submenu-visual {
    background-image: url("/assets/images/mega-menu/wifi-rumah.png") !important;
    background-position: center 43% !important;
  }

  html body .site-header .mobile-menu-news .mobile-submenu-visual {
    background-image: url("/assets/images/section-informasi-provider.webp") !important;
    background-position: center !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature {
    isolation: isolate !important;
    min-height: 128px !important;
    padding: 20px 45% 20px 18px !important;
    background: url("/assets/images/mega-menu/informasi-pelanggan.png") center / cover no-repeat !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature::before {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    content: "" !important;
    background: linear-gradient(90deg, rgba(8,17,30,.86) 0%, rgba(8,17,30,.66) 46%, rgba(8,17,30,.16) 100%) !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy {
    z-index: 1 !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy strong,
  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy span {
    color: #fff !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy span {
    opacity: .94 !important;
  }
}

/* =========================================================
   V80 — MOBILE MENU FULL-VIEWPORT SURFACE
   Keep the homepage completely out of view while the mobile
   navigation (root or any submenu) is open, matching the
   reference full-page menu behavior. This is mobile-only and
   does not alter the existing menu content/geometry.
   ========================================================= */
@media (max-width: 1023px) {
  html.mobile-menu-active,
  html body.mobile-menu-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* Opaque viewport layer behind the header/menu prevents any homepage
     content from bleeding through during open/close or submenu switches. */
  html body.mobile-menu-active::before {
    position: fixed !important;
    z-index: 119 !important;
    inset: 0 !important;
    content: "" !important;
    background: #fff !important;
    pointer-events: none !important;
  }

  html body .site-header.mobile-menu-open {
    height: 100dvh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html body .site-header.mobile-menu-open .mobile-panel.is-open {
    position: fixed !important;
    top: var(--ib-mobile-menu-top) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--ib-mobile-menu-top)) !important;
    min-height: calc(100vh - var(--ib-mobile-menu-top)) !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    opacity: 1 !important;
    background: #fff !important;
    isolation: isolate !important;
  }

  /* Selected categories are likewise an opaque full menu screen. */
  html body .site-header.mobile-menu-open .mobile-panel .mobile-menu-group[open] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    opacity: 1 !important;
    background: #fff !important;
    isolation: isolate !important;
  }
}

/* =========================================================
   V81 — MOBILE BERITA + BANTUAN IMAGE CROP REFINEMENT
   Screen-recording correction only: keep every menu geometry,
   copy, link and interaction unchanged; refine only the crop of
   the two requested submenu images so the focal subject sits in
   the banner cleanly, consistent with the other mobile cards.
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-menu-news .mobile-submenu-visual {
    background-position: center 74% !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature {
    background-position: center 38% !important;
  }
}

/* =========================================================
   V82 — MOBILE BANTUAN BANNER REFERENCE MATCH
   Screen-recording correction only: keep menu structure,
   spacing, links and interactions untouched. Refine only the
   Bantuan feature artwork to the bright pink support-card
   treatment seen in the mobile reference navigation.
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature {
    min-height: 118px !important;
    padding: 18px 47% 18px 18px !important;
    background: url("/assets/images/mega-menu/bantuan-mobile.png") center / cover no-repeat !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature::before {
    background: linear-gradient(90deg, rgba(0,47,120,.34) 0%, rgba(0,47,120,.12) 45%, rgba(0,47,120,0) 72%) !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy strong,
  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy span {
    color: #fff !important;
  }
}

/* =========================================================
   V83 — MOBILE BANTUAN VISUAL BORDER MATCH
   Requested correction only: match the Bantuan banner corner
   treatment to the existing mobile submenu visual cards.
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature {
    border-radius: 12px !important;
  }
}

/* =========================================================
   V84 — MOBILE BANTUAN VISUAL BORDER COLOR MATCH
   Requested correction only: match the separator/border color
   directly below the Bantuan visual to the red separator used
   by the reference mobile submenu cards (e.g. Informasi).
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-links {
    border-top-color: rgba(0,47,120, .7) !important;
  }
}

/* =========================================================
   V85 — SUPPORT VISUAL EDGE / BORDER RENDERING FIX
   Requested correction only. Keep card size, position, copy,
   colors and interaction unchanged; make the rounded visual
   edge clip cleanly on desktop Pusat Informasi and on the
   mobile/tablet Hubungi Indibems banner.
   ========================================================= */
@media (min-width: 1024px) {
  html body .site-header .mega-help-card-guide {
    overflow: hidden !important;
    border-radius: 12px !important;
    background-clip: padding-box !important;
    clip-path: inset(0 round 12px) !important;
  }

  html body .site-header .mega-help-card-guide::before {
    border-radius: inherit !important;
  }
}

@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature {
    overflow: hidden !important;
    border-radius: 12px !important;
    background-clip: padding-box !important;
    clip-path: inset(0 round 12px) !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature::before {
    border-radius: inherit !important;
  }
}

/* =========================================================
   V82 — MOBILE/TABLET SEARCH SURFACE MATCHING TELKOMSEL
   Search becomes a dedicated full-height white screen beneath the two
   header rails.  The underlying homepage is frozen/covered, the search
   trigger disappears after activation, and the menu control becomes the
   single close X used by the reference mobile header.
   ========================================================= */
@media (max-width: 1023px) {
  html.search-panel-active,
  html.search-panel-active body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html body .site-header.search-open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: var(--ib-mobile-menu-top) !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgba(7, 27, 52, .10) !important;
  }

  html body .site-header.search-open .utility-bar {
    background: #fff !important;
    border-color: #eceff2 !important;
  }

  html body .site-header.search-open .main-nav {
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(7, 27, 52, .08) !important;
  }

  html body .site-header.search-open .search {
    display: none !important;
  }

  html body .site-header.search-open .mobile-menu-toggle {
    display: inline-flex !important;
    position: relative !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ib-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .site-header.search-open .mobile-menu-toggle > span {
    position: absolute !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    transition: none !important;
  }

  html body .site-header.search-open .mobile-menu-toggle > span:nth-child(1) {
    transform: rotate(45deg) !important;
  }
  html body .site-header.search-open .mobile-menu-toggle > span:nth-child(2) {
    opacity: 0 !important;
  }
  html body .site-header.search-open .mobile-menu-toggle > span:nth-child(3) {
    transform: rotate(-45deg) !important;
  }

  html body .site-header.search-open .site-search-panel {
    position: fixed !important;
    z-index: 995 !important;
    top: var(--ib-mobile-menu-top) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    color: var(--ib-ink) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html body .site-header .site-search-panel-shell {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 18px 16px 38px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html body .site-header .site-search-input-wrap {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid #d9dee5 !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html body .site-header .site-search-input-wrap svg {
    width: 15px !important;
    height: 15px !important;
    color: #818b99 !important;
  }

  html body .site-header .site-search-input-wrap input {
    margin-left: 8px !important;
    padding: 0 !important;
    font: 400 11px/1.2 "Poppins", sans-serif !important;
  }

  html body .site-header .site-search-input-wrap input::placeholder {
    color: #9ca4af !important;
  }

  html body .site-header .site-search-suggestions {
    display: block !important;
    margin-top: 22px !important;
  }

  html body .site-header .site-search-suggestions .search-column {
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body .site-header .site-search-suggestions .search-column strong,
  html body .site-header .search-recommendations > strong {
    display: block !important;
    margin: 0 0 12px !important;
    color: #111827 !important;
    font: 600 11px/1.35 "Poppins", sans-serif !important;
  }

  html body .site-header .site-search-suggestions .search-column a {
    display: block !important;
    margin: 0 0 10px !important;
    color: #6b7280 !important;
    font: 400 10.5px/1.45 "Poppins", sans-serif !important;
  }

  html body .site-header .search-recommendations {
    display: block !important;
  }

  html body .site-header .search-recommendation-cards {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc((100% - 10px) / 2) !important;
    gap: 10px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }
  html body .site-header .search-recommendation-cards::-webkit-scrollbar { display: none !important; }

  html body .site-header .search-recommendation-cards a {
    min-height: 72px !important;
    padding: 10px 11px !important;
    border-radius: 9px !important;
    scroll-snap-align: start !important;
  }

  html body .site-header .search-recommendation-cards small {
    font-size: 7.5px !important;
  }

  html body .site-header .search-recommendation-cards b {
    padding-right: 14px !important;
    font-size: 13px !important;
  }

  html body .site-header .search-recommendation-cards span {
    right: 10px !important;
    bottom: 9px !important;
    font-size: 16px !important;
  }

  html body .site-header .search-category-title {
    margin: 0 0 12px !important;
  }

  html body .site-header .search-category-links {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 74px !important;
    gap: 8px !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  html body .site-header .search-category-links::-webkit-scrollbar { display: none !important; }

  html body .site-header .search-category-links a {
    min-height: 58px !important;
    padding: 8px 6px !important;
    border-color: #e3e7ec !important;
    border-radius: 10px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  html body .site-header.search-open .header-shell {
    width: calc(100% - 28px) !important;
  }
}

/* =========================================================
   V87 — MOBILE BANTUAN CAROUSEL MATCH
   Requested correction only: the Bantuan submenu now uses the
   same compact red support-carousel behavior as the mobile
   reference, with animated slides, tappable dots and swipe.
   ========================================================= */
@media (max-width: 1023px) {
  html body .site-header .mobile-panel .mobile-help-carousel {
    display: none !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-carousel {
    display: block !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-viewport {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    clip-path: inset(0 round 8px) !important;
    background: #002f78 !important;
    touch-action: pan-y !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-track {
    display: flex !important;
    width: 100% !important;
    transform: translate3d(0,0,0);
    transition: transform .38s cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-slide {
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 15px 47% 15px 14px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-sizing: border-box !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-slide-contact {
    background-image: url("/assets/images/mega-menu/bantuan-mobile.png") !important;
    background-position: center !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-slide-center {
    background-image: url("/assets/images/mega-menu/informasi-pelanggan-baru.png") !important;
    background-position: 62% 43% !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-slide-guide {
    background-image: url("/assets/images/mega-menu/informasi-pelanggan.png") !important;
    background-position: 61% 44% !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-slide::before {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    content: "" !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(0,47,120,.98) 0%, rgba(0,47,120,.95) 42%, rgba(0,47,120,.60) 61%, rgba(0,47,120,.12) 100%) !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy strong {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-feature-copy span {
    color: rgba(255,255,255,.96) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 1.38 !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-width: 38px !important;
    height: 12px !important;
    margin: 7px auto 8px !important;
    padding: 2px 5px !important;
    gap: 3px !important;
    border: 1px solid #aeb5bd !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  html body .site-header .mobile-panel .mobile-help-dots button {
    display: block !important;
    width: 5px !important;
    height: 4px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #cbd0d6 !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: width .24s ease, background-color .24s ease !important;
  }

  html body .site-header .mobile-panel .mobile-help-dots button.is-active {
    width: 15px !important;
    background: #8c959f !important;
  }

  html body .site-header .mobile-panel .mobile-menu-help[open] .mobile-help-links {
    border-top: 1px solid #cfd4d9 !important;
  }
}

/* V90 — desktop Bantuan / headset dropdown visual assets supplied by user.
   Only the two visual-card backgrounds are replaced. */
@media (min-width: 1024px) {
  html body .site-header .mega-help-card-guide {
    background-image: url("/assets/images/menu-bantuan-desktop.webp") !important;
    background-position: 72% center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  html body .site-header .mega-help-card-contact {
    background-image: url("/assets/images/menu-bantuan1-desktop.webp") !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

/* =========================================================
   V91 — DESKTOP BANTUAN MEGA MENU PROPORTIONS
   Requested correction only: make the headset/help dropdown follow
   the compact Telkomsel desktop composition while keeping Indibems
   labels, links and the supplied visual assets.
   ========================================================= */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-help {
    min-height: 296px !important;
    padding: 24px clamp(40px, 4.4vw, 84px) 20px !important;
    grid-template-columns: minmax(350px, 385px) minmax(0, 1fr) !important;
    grid-template-rows: auto 44px !important;
    column-gap: clamp(42px, 4vw, 64px) !important;
    row-gap: 14px !important;
    align-items: start !important;
  }

  html body .site-header .mega-help-links {
    position: relative !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(52px, auto) !important;
    align-content: start !important;
    gap: 14px 30px !important;
    min-height: 176px !important;
    padding: 0 34px 0 0 !important;
    border-right: 1px solid #e4e7eb !important;
    background: linear-gradient(#e4e7eb,#e4e7eb) 50% 0 / 1px 100% no-repeat !important;
  }

  html body .site-header .mega-help-links a {
    min-height: 52px !important;
    gap: 4px !important;
  }

  html body .site-header .mega-help-links strong {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  html body .site-header .mega-help-links span {
    font-size: 10px !important;
    line-height: 1.42 !important;
  }

  html body .site-header .mega-help-features {
    align-self: start !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 10px 12px !important;
    min-width: 0 !important;
  }

  html body .site-header .mega-help-popular-title {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    color: var(--ib-ink) !important;
    font: 600 12px/1.2 "Poppins", sans-serif !important;
  }

  html body .site-header .mega-help-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    padding: clamp(14px, 1.25vw, 20px) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  /* Red/laptop visual: keep the supplied artwork vivid and place text
     in the same upper-left hierarchy as the reference card. */
  html body .site-header .mega-help-card-guide {
    color: #fff !important;
    background-position: center center !important;
  }
  html body .site-header .mega-help-card-guide::before {
    background: linear-gradient(90deg, rgba(0,47,120,.30) 0%, rgba(0,47,120,.12) 48%, rgba(0,47,120,0) 72%) !important;
  }
  html body .site-header .mega-help-card-guide span,
  html body .site-header .mega-help-card-guide strong,
  html body .site-header .mega-help-card-guide em {
    color: #fff !important;
  }

  /* Light/woman visual: remove the dark desktop overlay that previously
     made the supplied pale artwork look grey/black. */
  html body .site-header .mega-help-card-contact {
    color: var(--ib-ink) !important;
    background-position: center center !important;
  }
  html body .site-header .mega-help-card-contact::before {
    background: linear-gradient(90deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.58) 36%, rgba(255,255,255,0) 64%) !important;
  }
  html body .site-header .mega-help-card-contact span,
  html body .site-header .mega-help-card-contact strong,
  html body .site-header .mega-help-card-contact em {
    color: var(--ib-ink) !important;
  }

  html body .site-header .mega-help-card span {
    margin: 0 0 4px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  html body .site-header .mega-help-card strong {
    max-width: 72% !important;
    font-size: clamp(15px, 1.25vw, 19px) !important;
    line-height: 1.16 !important;
  }
  html body .site-header .mega-help-card em {
    max-width: 70% !important;
    margin-top: 7px !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  html body .site-header .mega-help-utility {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f6f7f8 !important;
    box-sizing: border-box !important;
  }

  html body .site-header .mega-help-utility-mark {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 5px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    flex-shrink: 0;
  }

  html body .site-header .mega-help-utility-copy {
    color: #6b7280 !important;
    font: 400 10px/1.3 "Poppins", sans-serif !important;
  }

  html body .site-header .mega-help-utility-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 70px !important;
    height: 28px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: var(--ib-brand) !important;
    font: 600 10px/1 "Poppins", sans-serif !important;
  }
}

/* =========================================================
   V92 — DESKTOP BANTUAN DROPDOWN CONTENT MATCH
   Requested correction only: align the internal help-dropdown
   composition with the desktop Telkomsel reference while keeping
   Indibems wording, links and supplied artwork unchanged.
   ========================================================= */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-help {
    min-height: 0 !important;
    padding: 24px 35px 26px !important;
    grid-template-columns: 41.1% minmax(0, 1fr) !important;
    grid-template-rows: auto 60px !important;
    column-gap: 34px !important;
    row-gap: 26px !important;
    align-items: start !important;
  }

  html body .site-header .mega-help-links {
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 52px 52px !important;
    grid-auto-rows: 52px !important;
    align-content: start !important;
    gap: 14px 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-right: 1px solid #e2e4e7 !important;
    background: linear-gradient(#e2e4e7,#e2e4e7) 50% 0 / 1px 100% no-repeat !important;
    box-sizing: border-box !important;
  }

  html body .site-header .mega-help-links a {
    min-height: 0 !important;
    height: 52px !important;
    padding: 5px 18px 0 42px !important;
    gap: 5px !important;
    align-content: start !important;
    box-sizing: border-box !important;
  }

  html body .site-header .mega-help-links strong {
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
  }

  html body .site-header .mega-help-links span {
    max-width: 190px !important;
    font-size: 11px !important;
    line-height: 1.42 !important;
  }

  html body .site-header .mega-help-features {
    align-self: start !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    column-gap: 17px !important;
    row-gap: 20px !important;
    min-width: 0 !important;
  }

  html body .site-header .mega-help-popular-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    color: var(--ib-ink) !important;
    font: 600 12px/1.2 "Poppins", sans-serif !important;
  }

  html body .site-header .mega-help-card {
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    padding: 20px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  /* Match the reference card order: light/person visual first,
     red/laptop visual second. */
  html body .site-header .mega-help-card-contact {
    grid-column: 1 !important;
  }
  html body .site-header .mega-help-card-guide {
    grid-column: 2 !important;
  }

  /* The supplied images already contain the final visual treatment;
     keep them un-tinted so their colors match the reference. */
  html body .site-header .mega-help-card-guide::before,
  html body .site-header .mega-help-card-contact::before {
    background: transparent !important;
  }

  html body .site-header .mega-help-card > span {
    display: none !important;
  }

  html body .site-header .mega-help-card strong {
    max-width: 62% !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
  }

  html body .site-header .mega-help-card em {
    max-width: 57% !important;
    margin-top: 10px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
  }

  html body .site-header .mega-help-card em b {
    position: absolute !important;
    top: 15px !important;
    right: 17px !important;
    margin: 0 !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  html body .site-header .mega-help-card-contact,
  html body .site-header .mega-help-card-contact strong,
  html body .site-header .mega-help-card-contact em {
    color: #111820 !important;
  }

  html body .site-header .mega-help-card-guide,
  html body .site-header .mega-help-card-guide strong,
  html body .site-header .mega-help-card-guide em {
    color: #fff !important;
  }

  html body .site-header .mega-help-utility {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
    height: 60px !important;
    padding: 0 21px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #f5f5f5 !important;
    box-sizing: border-box !important;
  }

  html body .site-header .mega-help-utility-mark {
    width: 26px !important;
    height: 26px !important;
    border-radius: 5px !important;
    font-size: 10px !important;
  }

  html body .site-header .mega-help-utility-copy {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  html body .site-header .mega-help-utility-action {
    min-width: 99px !important;
    height: 35px !important;
    padding: 0 18px !important;
    font-size: 11px !important;
  }
}

/* 2026-09-03 — Desktop Pemasangan WiFi mega-menu proportions aligned to the reference. */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-install {
    min-height: 352px !important;
    padding-top: 24px !important;
    padding-bottom: 22px !important;
    grid-template-columns: minmax(360px, .86fr) minmax(560px, 1.14fr) !important;
    gap: clamp(32px, 4vw, 60px) !important;
    align-items: start !important;
  }

  html body .site-header .nav-panel-install .mega-install-links {
    align-content: start !important;
    column-gap: 0 !important;
    row-gap: 8px !important;
    padding-right: clamp(28px, 3vw, 46px) !important;
  }

  html body .site-header .nav-panel-install .mega-install-intro {
    margin-bottom: 8px !important;
  }

  html body .site-header .nav-panel-install .mega-install-option {
    padding: 7px 22px 7px 0 !important;
  }

  html body .site-header .nav-panel-install .mega-install-option + .mega-install-option {
    padding-left: 28px !important;
    border-left: 1px solid #e7e9ed !important;
  }

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

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

  html body .site-header .nav-panel-install .mega-install-card strong {
    font-size: clamp(17px, 1.2vw, 20px) !important;
  }

  html body .site-header .nav-panel-install .mega-install-card em {
    margin-top: 7px !important;
  }
}


/* =========================================================
   2026-09-03 15:40 — Desktop Pemasangan WiFi dropdown
   Match the reference mega-menu content rhythm only.
   ========================================================= */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-install {
    min-height: 352px !important;
    padding: 24px 36px 22px clamp(40px, 4.4vw, 84px) !important;
    grid-template-columns: 560px minmax(0, 1fr) !important;
    grid-template-rows: 246px 60px !important;
    column-gap: 32px !important;
    row-gap: 20px !important;
    align-items: start !important;
  }

  html body .site-header .nav-panel-install .mega-install-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, 1fr) !important;
    grid-auto-flow: column !important;
    align-content: stretch !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    min-width: 0 !important;
    height: 246px !important;
    padding: 0 32px 0 0 !important;
    border-right: 1px solid #e7e9ed !important;
    background: linear-gradient(#e7e9ed,#e7e9ed) calc(50% - 20px) 0 / 1px 100% no-repeat !important;
    box-sizing: border-box !important;
  }

  html body .site-header .nav-panel-install .mega-install-option,
  html body .site-header .nav-panel-install .mega-install-option + .mega-install-option {
    display: grid !important;
    align-content: center !important;
    gap: 2px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2px 18px 2px 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:nth-child(n+5) {
    padding-left: 4px !important;
  }

  html body .site-header .nav-panel-install .mega-install-option strong {
    color: var(--ib-ink) !important;
    font: 600 14px/1.25 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-install .mega-install-option span {
    margin: 0 !important;
    color: #4b5563 !important;
    font: 400 10px/1.35 "Poppins", sans-serif !important;
  }

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

  html body .site-header .nav-panel-install .mega-install-features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 22px 200px !important;
    align-items: start !important;
    gap: 20px 16px !important;
    min-width: 0 !important;
    height: 246px !important;
  }

  html body .site-header .mega-install-popular-title {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    color: var(--ib-ink) !important;
    font: 600 13px/1.2 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-install .mega-install-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 200px !important;
    padding: 20px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    background-position: center !important;
    background-size: cover !important;
    box-sizing: border-box !important;
  }

  html body .site-header .nav-panel-install .mega-install-card::before {
    background: linear-gradient(90deg, rgba(3,14,29,.26) 0%, rgba(3,14,29,.08) 45%, rgba(3,14,29,0) 72%) !important;
  }

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

  html body .site-header .nav-panel-install .mega-install-card strong {
    max-width: 72% !important;
    font: 700 18px/1.16 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-install .mega-install-card em {
    max-width: 70% !important;
    margin-top: 9px !important;
    font: 500 10px/1.35 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-install .mega-install-card em b {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  html body .site-header .mega-install-utility {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: calc(100% + 36px) !important;
    height: 60px !important;
    margin-left: -36px !important;
    padding: 0 21px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #f5f5f5 !important;
    box-sizing: border-box !important;
  }

  html body .site-header .mega-install-utility-mark {
    display: inline-grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 5px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    object-fit: contain;
    flex-shrink: 0;
  }

  html body .site-header .mega-install-utility-copy {
    color: #6b7280 !important;
    font: 400 11px/1.3 "Poppins", sans-serif !important;
  }

  html body .site-header .mega-install-utility-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 112px !important;
    height: 35px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: var(--ib-brand) !important;
    font: 600 11px/1 "Poppins", sans-serif !important;
  }
}

/* =========================================================
   2026-09-03 22:40 — Desktop Pemasangan WiFi dropdown
   Fine-tune only the inner mega-menu proportions to match
   the supplied Telkomsel desktop reference more closely.
   ========================================================= */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-install {
    min-height: 354px !important;
    grid-template-rows: 230px 54px !important;
    row-gap: 16px !important;
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }

  html body .site-header .nav-panel-install .mega-install-links {
    height: 230px !important;
  }

  html body .site-header .nav-panel-install .mega-install-features {
    grid-template-rows: 20px 186px !important;
    gap: 16px !important;
    height: 230px !important;
    margin-left: -42px !important;
    width: calc(100% + 42px) !important;
  }

  html body .site-header .nav-panel-install .mega-install-popular-title {
    margin-left: 30px !important;
  }

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

  html body .site-header .nav-panel-install .mega-install-utility {
    height: 54px !important;
  }
}

/* =========================================================
   2026-09-03 22:55 — Desktop Pemasangan WiFi dropdown
   Final reference alignment for the inner dropdown only.
   Keep the outer dropdown/header/hero and all other menus untouched.
   ========================================================= */
@media (min-width: 1024px) {
  /* Match the two text columns and their divider positions to the reference,
     while preserving the existing card position on the right. */
  html body .site-header .nav-panel-install .mega-install-links {
    width: 513px !important;
    max-width: 513px !important;
    margin-left: 6px !important;
    grid-template-columns: 236px 237px !important;
    column-gap: 40px !important;
    padding-right: 0 !important;
    background: linear-gradient(#e7e9ed,#e7e9ed) 236px 0 / 1px 100% no-repeat !important;
    border-right: 1px solid #e7e9ed !important;
    box-sizing: border-box !important;
  }

  /* The reference title begins on the same vertical axis as the first card. */
  html body .site-header .nav-panel-install .mega-install-features {
    margin-left: -41px !important;
    width: calc(100% + 41px) !important;
    grid-template-rows: 20px 186px !important;
    gap: 18px 16px !important;
  }

  html body .site-header .nav-panel-install .mega-install-popular-title {
    margin-left: 0 !important;
  }

  /* Match the lower utility strip's vertical rhythm without changing the
     overall dropdown height. */
  html body .site-header .nav-panel-install {
    row-gap: 20px !important;
    padding-bottom: 24px !important;
  }

  html body .site-header .nav-panel-install .mega-install-utility {
    height: 56px !important;
    padding-right: 18px !important;
  }

  html body .site-header .mega-install-utility-mark {
    width: 24px !important;
    height: 24px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
  }

  html body .site-header .mega-install-utility-action {
    width: 93px !important;
    min-width: 93px !important;
    height: 32px !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   2026-09-03 23:45 — Desktop Informasi dropdown
   Match the supplied Telkomsel Promo & Benefit mega-menu pattern:
   two text columns, three popular visual cards, and the lower CTA strip.
   Scoped only to the desktop Informasi dropdown.
   ========================================================= */
@media (min-width: 1024px) {
  html body .site-header .nav-panel-information-reference {
    min-height: 406px !important;
    padding: 24px 36px 24px clamp(40px, 4.4vw, 84px) !important;
    grid-template-columns: 560px minmax(0, 1fr) !important;
    grid-template-rows: 286px 56px !important;
    column-gap: 32px !important;
    row-gap: 16px !important;
    align-items: start !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-links {
    width: 513px !important;
    max-width: 513px !important;
    height: 286px !important;
    margin-left: 6px !important;
    display: grid !important;
    grid-template-columns: 236px 237px !important;
    grid-template-rows: repeat(4, 1fr) !important;
    grid-auto-flow: column !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    padding: 0 !important;
    border-right: 1px solid #e7e9ed !important;
    background: linear-gradient(#e7e9ed,#e7e9ed) 236px 0 / 1px 100% no-repeat !important;
    box-sizing: border-box !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-links .mega-install-option,
  html body .site-header .nav-panel-information-reference .mega-information-links .mega-install-option + .mega-install-option {
    display: grid !important;
    align-content: center !important;
    gap: 2px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2px 18px 2px 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-information-reference .mega-information-links .mega-install-option:nth-child(n+5) {
    padding-left: 4px !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-links .mega-install-option strong {
    color: var(--ib-ink) !important;
    font: 600 14px/1.25 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-links .mega-install-option span {
    margin: 0 !important;
    color: #4b5563 !important;
    font: 400 10px/1.35 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-links .mega-install-option:hover strong {
    color: var(--ib-brand) !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 20px 248px !important;
    gap: 18px 16px !important;
    width: calc(100% + 41px) !important;
    height: 286px !important;
    margin-left: -41px !important;
    min-width: 0 !important;
    align-items: start !important;
  }

  html body .site-header .nav-panel-information-reference .mega-install-popular-title {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    color: var(--ib-ink) !important;
    font: 600 13px/1.2 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-popular-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 248px !important;
    height: 248px !important;
    padding: 18px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    border-radius: 7px !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-popular-card-1 {
    background-image: url("/assets/images/menu-informasi-1-desktop.webp") !important;
  }
  html body .site-header .nav-panel-information-reference .mega-information-popular-card-2 {
    background-image: url("/assets/images/menu-informasi-2-desktop.webp") !important;
  }
  html body .site-header .nav-panel-information-reference .mega-information-popular-card-3 {
    background-image: url("/assets/images/menu-informasi-3-desktop.webp") !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-popular-card::before {
    background: linear-gradient(90deg, rgba(24,14,14,.28) 0%, rgba(24,14,14,.08) 50%, rgba(24,14,14,0) 76%) !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-popular-card span {
    display: none !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-popular-card strong {
    max-width: 88% !important;
    color: #fff !important;
    font: 700 16px/1.18 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-popular-card em {
    max-width: 88% !important;
    margin-top: 9px !important;
    color: #fff !important;
    font: 500 10px/1.35 "Poppins", sans-serif !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-popular-card em b {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  html body .site-header .nav-panel-information-reference .mega-information-utility {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: calc(100% + 36px) !important;
    height: 56px !important;
    margin-left: -36px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #f5f5f5 !important;
    box-sizing: border-box !important;
  }

  html body .site-header .nav-panel-information-reference .mega-install-utility-mark {
    width: 24px !important;
    height: 24px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
  }

  html body .site-header .nav-panel-information-reference .mega-install-utility-action {
    width: 102px !important;
    min-width: 102px !important;
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }
}

/* 2026-09-04 — Desktop search recommendation artwork supplied by user.
   Keep the existing search structure/behavior unchanged; only replace the
   three recommendation-card visuals on desktop with the supplied artwork. */
@media (min-width: 1024px) {
  html body .site-header .search-recommendation-cards a {
    min-height: 0 !important;
    aspect-ratio: 230 / 129 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
  }
  html body .site-header .search-recommendation-cards a:nth-child(1) {
    background-image: url('/assets/images/menu-pencarian-1-desktop.webp') !important;
  }
  html body .site-header .search-recommendation-cards a:nth-child(2) {
    background-image: url('/assets/images/menu-pencarian-2-desktop.webp') !important;
  }
  html body .site-header .search-recommendation-cards a:nth-child(3) {
    background-image: url('/assets/images/menu-pencarian-3-desktop.webp') !important;
  }
  html body .site-header .search-recommendation-cards a > small,
  html body .site-header .search-recommendation-cards a > b,
  html body .site-header .search-recommendation-cards a > span {
    display: none !important;
  }
}


/* 2026-09-04 — Final desktop search layout alignment to reference.
   Scope: desktop search panel only. */
@media (min-width: 1024px) {
  html body .site-header .site-search-panel-shell {
    width: min(92.1vw, 1768px) !important;
    min-height: 414px !important;
    padding: 24px clamp(40px, 4.4vw, 84px) 24px !important;
    border-radius: 0 0 10px 10px !important;
  }

  html body .site-header .site-search-input-wrap {
    min-height: 72px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 14px rgba(7,27,52,.15) !important;
  }

  html body .site-header .site-search-suggestions {
    grid-template-columns: 202px 202px minmax(0, 1fr) !important;
    gap: 19px !important;
    margin-top: 20px !important;
  }

  html body .site-header .site-search-suggestions .search-column {
    gap: 24px !important;
    min-height: 268px !important;
    padding-right: 18px !important;
    border-right: 1px solid #e7ebef !important;
  }

  html body .site-header .site-search-suggestions .search-history {
    gap: 24px !important;
  }

  html body .site-header .site-search-suggestions strong {
    color: var(--ib-ink) !important;
    font: 700 13px/1.3 "Poppins", sans-serif !important;
  }

  html body .site-header .site-search-suggestions a,
  html body .site-header .search-history-empty {
    color: #374151 !important;
    font: 400 13px/1.35 "Poppins", sans-serif !important;
  }

  html body .site-header .search-history-empty {
    color: #99a3b3 !important;
  }

  html body .site-header .search-recommendations {
    width: 595px !important;
    max-width: 100% !important;
    gap: 12px !important;
    justify-self: start !important;
  }

  html body .site-header .search-recommendation-cards {
    grid-template-columns: repeat(3, 190px) !important;
    gap: 12px !important;
    width: 594px !important;
    max-width: 100% !important;
  }

  html body .site-header .search-recommendation-cards a {
    width: 190px !important;
    height: 107px !important;
    min-height: 107px !important;
    aspect-ratio: auto !important;
    border-radius: 11px !important;
    background-size: cover !important;
    background-position: center !important;
  }

  html body .site-header .search-category-title {
    margin-top: 2px !important;
  }

  html body .site-header .search-category-links {
    grid-template-columns: repeat(5, 86px) !important;
    gap: 10px !important;
    width: max-content !important;
  }

  html body .site-header .search-category-links a {
    position: relative !important;
    display: flex !important;
    width: 86px !important;
    height: 86px !important;
    min-height: 86px !important;
    padding: 46px 8px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 12px !important;
    color: #2f3948 !important;
    font: 600 10px/1.2 "Poppins", sans-serif !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  html body .site-header .search-category-links a::before {
    position: absolute !important;
    top: 15px !important;
    left: 50% !important;
    width: 25px !important;
    height: 25px !important;
    color: var(--ib-brand) !important;
    content: "" !important;
    transform: translateX(-50%) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }

  html body .site-header .search-category-links a:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v10H4z'/%3E%3Cpath d='M8 4h8v3H8z'/%3E%3Cpath d='M8 12h8M12 9v6'/%3E%3C/svg%3E") !important;
  }
  html body .site-header .search-category-links a:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4-8 4-8-4 8-4z'/%3E%3Cpath d='m4 12 8 4 8-4M4 17l8 4 8-4'/%3E%3C/svg%3E") !important;
  }
  html body .site-header .search-category-links a:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M10 5h4M11 18h2'/%3E%3C/svg%3E") !important;
  }
  html body .site-header .search-category-links a:nth-child(4)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1-4.4-4.3 6.1-.9L12 3z'/%3E%3C/svg%3E") !important;
  }
  html body .site-header .search-category-links a:nth-child(5)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002f78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v12H9l-4 4v-4H4z'/%3E%3Cpath d='M8 9h.01M12 9h.01M16 9h.01'/%3E%3C/svg%3E") !important;
  }
}

/* 2026-09-07 — Desktop search panel proportional match to Telkomsel reference.
   Scope intentionally limited to the opened desktop search surface only. */
@media (min-width: 1024px) {
  html body .site-header .site-search-panel-shell {
    min-height: 386px !important;
    padding: 22px clamp(40px, 4.2vw, 80px) 24px !important;
  }

  html body .site-header .site-search-input-wrap {
    min-height: 68px !important;
  }

  html body .site-header .site-search-suggestions {
    grid-template-columns: 189px 189px minmax(0, 1fr) !important;
    gap: 16px !important;
    margin-top: 17px !important;
  }

  html body .site-header .site-search-suggestions .search-column {
    min-width: 0 !important;
    min-height: 252px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  html body .site-header .search-recommendations {
    width: 553px !important;
    max-width: 100% !important;
    gap: 11px !important;
  }

  html body .site-header .search-recommendation-cards {
    grid-template-columns: repeat(3, 177px) !important;
    gap: 11px !important;
    width: 553px !important;
    max-width: 100% !important;
  }

  html body .site-header .search-recommendation-cards a {
    width: 177px !important;
    height: 99px !important;
    min-height: 99px !important;
    border-radius: 10px !important;
  }

  html body .site-header .search-category-links {
    grid-template-columns: repeat(5, 80px) !important;
    gap: 16px !important;
  }

  html body .site-header .search-category-links a {
    width: 80px !important;
    height: 80px !important;
    min-height: 80px !important;
    padding: 42px 7px 7px !important;
    border-radius: 11px !important;
  }

  html body .site-header .search-category-links a::before {
    top: 13px !important;
    width: 23px !important;
    height: 23px !important;
  }
}