/* =========================================================
   STEI REDESIGN - MAX MEGA MENU FINAL
   Untuk Megatron + Max Mega Menu
   ========================================================= */

/* 
   UBAH ANGKA INI SAJA kalau dropdown terlalu naik/turun.
   88px = kira-kira tinggi header biru dari screenshot kamu.
*/
:root {
  --stei-mega-top: 120px;
  --stei-menu-height: 75px;
  --stei-blue: #005baa;
  --stei-dark-blue: #002f87;
  --stei-text: #101828;
  --stei-muted: #6b7280;
  --stei-soft: #f4f7ff;
}

/* =========================
   1. TOP MENU BAR
   ========================= */

#mega-menu-wrap-primary,
#mega-menu-wrap-primary #mega-menu-primary {
  background: transparent !important;
  min-height: var(--stei-menu-height) !important;
  height: var(--stei-menu-height) !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 9999 !important;
}

#mega-menu-wrap-primary #mega-menu-primary {
  gap: 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  height: var(--stei-menu-height) !important;
  display: flex !important;
  align-items: center !important;
  position: static !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  height: var(--stei-menu-height) !important;
  line-height: var(--stei-menu-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 13px !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-toggle-on > a.mega-menu-link {
  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-indicator {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 6px !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-indicator:after {
  color: #ffffff !important;
}


/* =========================
   2. PANEL MEGA MENU TENTANG
   ========================= */

/* dropdown dibuat FIXED supaya tidak mulai dari posisi menu Tentang */
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about > ul.mega-sub-menu {
  position: fixed !important;
  top: calc(var(--stei-mega-top) + var(--wp-admin--admin-bar--height, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: min(1420px, calc(100vw - 48px)) !important;
  max-width: 1420px !important;
  min-width: 0 !important;

  padding: 34px 36px 28px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 55, 166, 0.10) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 24px 60px rgba(0, 25, 80, 0.16) !important;

  z-index: 99999 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(100vh - var(--stei-mega-top) - 24px) !important;
}

/* reset bawaan widget/menu */
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about ul.mega-sub-menu *,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about ul.mega-sub-menu *::before,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about ul.mega-sub-menu *::after {
  box-sizing: border-box !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about .widget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about .widget_custom_html,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about .custom-html-widget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about .widget_text,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about .textwidget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about p {
  margin: 0 !important;
  padding: 0 !important;
}

/* hilangkan padding bawaan kolom Max Mega Menu */
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about li.mega-menu-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================
   3. KOLOM MEGA MENU
   ========================= */

.stei-mm-col {
  min-height: 430px !important;
  padding: 0 28px !important;
  border-right: 1px solid rgba(0, 45, 130, 0.13) !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about li.mega-menu-column:last-child .stei-mm-col {
  border-right: 0 !important;
}

.stei-mm-col h4 {
  margin: 0 0 26px !important;
  padding: 0 !important;
  color: var(--stei-dark-blue) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}


/* =========================
   4. LINK BIASA
   ========================= */

.stei-mm-link,
.stei-mm-col > a:not(.stei-mm-info):not(.stei-mm-feature):not(.stei-mm-service):not(.stei-mm-bottom) {
  display: grid !important;
  grid-template-columns: 34px 1fr !important;
  column-gap: 16px !important;
  align-items: center !important;

  min-height: 44px !important;
  margin: 0 0 15px !important;
  padding: 0 !important;

  color: var(--stei-text) !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
}

.stei-mm-link:hover,
.stei-mm-col > a:not(.stei-mm-info):not(.stei-mm-feature):not(.stei-mm-service):not(.stei-mm-bottom):hover {
  color: #0046d5 !important;
}

.stei-mm-link span,
.stei-mm-col > a:not(.stei-mm-info):not(.stei-mm-feature):not(.stei-mm-service):not(.stei-mm-bottom) > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;

  color: var(--stei-muted) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.stei-mm-link b,
.stei-mm-col > a:not(.stei-mm-info):not(.stei-mm-feature):not(.stei-mm-service):not(.stei-mm-bottom) > b {
  display: block !important;
  color: inherit !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* =========================
   5. ILUSTRASI KOLOM KIRI
   ========================= */

.stei-mm-illus {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;

  height: 145px !important;
  margin-top: 28px !important;
  padding: 18px !important;

  border-radius: 12px !important;
  background:
    linear-gradient(145deg, rgba(0,70,213,.055), rgba(0,70,213,.015)),
    repeating-linear-gradient(45deg, rgba(0,70,213,.08) 0 1px, transparent 1px 13px) !important;

  color: rgba(0,70,213,.55) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}


/* =========================
   6. CARD INFO
   ========================= */

.stei-mm-info,
.stei-mm-feature {
  display: block !important;
  margin: 28px 0 0 !important;
  padding: 24px !important;

  border-radius: 13px !important;
  background: linear-gradient(145deg, #f3f6ff, #ffffff) !important;
  color: #0b1b4d !important;
  text-decoration: none !important;
  border: 0 !important;

  transition: transform .2s ease, box-shadow .2s ease !important;
}

.stei-mm-feature {
  margin-top: 0 !important;
  margin-bottom: 26px !important;
}

.stei-mm-info:hover,
.stei-mm-feature:hover,
.stei-mm-bottom:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 32px rgba(0, 35, 110, 0.10) !important;
}

.stei-mm-info > span,
.stei-mm-feature > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  height: 44px !important;
  margin-bottom: 14px !important;

  color: #0046d5 !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

.stei-mm-info strong,
.stei-mm-feature strong {
  display: block !important;
  margin: 0 0 9px !important;

  color: var(--stei-dark-blue) !important;
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.stei-mm-info small,
.stei-mm-feature small {
  display: block !important;

  color: #17234f !important;
  font-size: 12.8px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.stei-mm-info em,
.stei-mm-feature em {
  display: block !important;
  margin-top: 16px !important;

  color: #0046d5 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-style: normal !important;
}


/* =========================
   7. SERVICE LIST KANAN
   ========================= */

.stei-mm-service {
  display: grid !important;
  grid-template-columns: 38px 1fr 18px !important;
  column-gap: 14px !important;
  align-items: center !important;

  min-height: 64px !important;
  margin: 0 !important;
  padding: 15px 0 !important;

  border-top: 1px solid rgba(0, 45, 130, 0.12) !important;
  background: transparent !important;
  color: #09143c !important;
  text-decoration: none !important;
}

.stei-mm-service span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: var(--stei-muted) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.stei-mm-service b {
  display: block !important;
  color: inherit !important;

  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.stei-mm-service em {
  display: block !important;
  color: #0046d5 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-style: normal !important;
}

.stei-mm-service:hover b {
  color: #0046d5 !important;
}


/* =========================
   8. BANNER BAWAH
   ========================= */

.stei-mm-bottom {
  display: grid !important;
  grid-template-columns: 52px 1fr auto !important;
  column-gap: 20px !important;
  align-items: center !important;

  width: 100% !important;
  margin: 28px 0 0 !important;
  padding: 22px 26px !important;

  border-radius: 14px !important;
  background: linear-gradient(90deg, #f2f7ff, #ffffff) !important;
  color: #09143c !important;
  text-decoration: none !important;
  border: 0 !important;
}

.stei-mm-bottom > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;

  background: rgba(0, 70, 213, 0.08) !important;
  color: #0046d5 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.stei-mm-bottom strong {
  display: block !important;
  margin: 0 0 6px !important;

  color: var(--stei-dark-blue) !important;
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.stei-mm-bottom small {
  display: block !important;

  color: #17234f !important;
  font-size: 12.8px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

.stei-mm-bottom b {
  color: #0046d5 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}


/* =========================
   9. RESPONSIVE
   ========================= */

@media (max-width: 991px) {
  #mega-menu-wrap-primary,
  #mega-menu-wrap-primary #mega-menu-primary {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    height: auto !important;
    display: block !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 18px !important;
  }

  #mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-about > ul.mega-sub-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 18px !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .stei-mm-col {
    min-height: auto !important;
    padding: 18px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0, 45, 130, 0.12) !important;
  }

  .stei-mm-bottom {
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }

  .stei-mm-bottom b {
    white-space: normal !important;
  }
}

/* Gambar ilustrasi di kolom Tentang STEI */
.stei-mm-illus-photo {
  align-items: center !important;
  justify-content: center !important;
  height: 145px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f5f8ff !important;
}

.stei-mm-illus-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* =========================================================
   STEI RESEARCH MEGA MENU - FINAL STABLE VERSION
   Pakai 1 Custom HTML 12/12
   ========================================================= */

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research > ul.mega-sub-menu {
  position: fixed !important;
  top: calc(var(--stei-mega-top) + var(--wp-admin--admin-bar--height, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: min(1420px, calc(100vw - 48px)) !important;
  max-width: 1420px !important;
  min-width: 0 !important;

  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 55, 166, 0.10) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 24px 60px rgba(0, 25, 80, 0.16) !important;

  z-index: 99999 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(100vh - var(--stei-mega-top) - 24px) !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research ul.mega-sub-menu *,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research ul.mega-sub-menu *::before,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research ul.mega-sub-menu *::after {
  box-sizing: border-box !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research .widget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research .widget_custom_html,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research .custom-html-widget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research p {
  margin: 0 !important;
  padding: 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research li.mega-menu-column {
  width: 100% !important;
  padding: 0 !important;
}

.stei-research-panel {
  display: grid !important;
  grid-template-columns: 1fr 1.05fr 1.1fr 1fr !important;
  gap: 0 !important;

  width: 100% !important;
  padding: 34px 36px 28px !important;

  background: #ffffff !important;
}

.stei-research-col {
  min-width: 0 !important;
  min-height: 560px !important;
  padding: 0 28px !important;
  border-right: 1px solid rgba(0, 45, 130, 0.13) !important;
}

.stei-research-col:nth-child(4) {
  border-right: 0 !important;
}

.stei-research-col h4 {
  margin: 0 0 24px !important;
  padding: 0 !important;

  color: var(--stei-dark-blue) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

/* Kolom Kelompok Keahlian */
.stei-research-kk-link {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  column-gap: 16px !important;
  align-items: center !important;

  min-height: 52px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(0,45,130,.12) !important;

  color: #101828 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.stei-research-kk-link span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  height: 38px !important;

  color: #64748b !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

.stei-research-kk-link b {
  display: block !important;
  color: inherit !important;
  font-size: 14.8px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

/* Button */
.stei-research-button,
.stei-research-more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  margin-top: 18px !important;
  padding: 12px 18px !important;

  border-radius: 9px !important;
  background: linear-gradient(145deg, #f3f7ff, #ffffff) !important;
  color: #0037a6 !important;

  font-size: 14.5px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Kolom Riset & Publikasi */
.stei-research-info-link,
.stei-research-event-link {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: start !important;

  padding: 18px 0 22px !important;
  border-bottom: 1px solid rgba(0,45,130,.12) !important;

  color: #101828 !important;
  text-decoration: none !important;
  background: transparent !important;
}

.stei-research-info-link > span,
.stei-research-event-link > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 52px !important;
  height: 52px !important;

  border-radius: 50% !important;
  background: #f3f7ff !important;
  color: #0046d5 !important;

  font-size: 24px !important;
  line-height: 1 !important;
}

.stei-research-info-link strong,
.stei-research-event-link strong {
  display: block !important;
  margin: 2px 0 7px !important;

  color: #101828 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.stei-research-info-link small,
.stei-research-event-link small {
  display: block !important;

  color: #17234f !important;
  font-size: 12.8px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

/* Kolom Feature Research */
.stei-research-feature-card {
  display: block !important;
  height: calc(100% - 46px) !important;

  padding: 26px 24px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #f3f7ff, #ffffff) !important;

  color: #0b1b4d !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.stei-research-visual {
  position: relative !important;
  height: 210px !important;
  margin-bottom: 24px !important;

  border-radius: 14px !important;
  background:
    linear-gradient(145deg, rgba(0,70,213,.06), rgba(255,255,255,.9)),
    repeating-linear-gradient(45deg, rgba(0,70,213,.065) 0 1px, transparent 1px 12px) !important;

  overflow: hidden !important;
}

.stei-research-visual span {
  position: absolute !important;
  color: rgba(0,70,213,.72) !important;
  line-height: 1 !important;
}

.stei-research-building {
  top: 20px !important;
  right: 28px !important;
  font-size: 78px !important;
  opacity: .35 !important;
}

.stei-research-monitor {
  left: 78px !important;
  top: 82px !important;
  font-size: 76px !important;
}

.stei-research-micro {
  left: 38px !important;
  top: 96px !important;
  font-size: 54px !important;
}

.stei-research-flask {
  right: 48px !important;
  bottom: 34px !important;
  font-size: 54px !important;
}

.stei-research-feature-card strong {
  display: block !important;
  margin: 0 0 12px !important;

  color: var(--stei-dark-blue) !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.stei-research-feature-card small {
  display: block !important;

  color: #17234f !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

.stei-research-feature-card em {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  margin-top: 28px !important;
  padding: 14px 16px !important;

  border-radius: 9px !important;
  background: #ffffff !important;
  color: #0037a6 !important;

  font-size: 13.5px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* Kolom Events */
.stei-research-event-link {
  padding: 21px 0 24px !important;
}

.stei-research-event-link > span {
  background: #f3f7ff !important;
}

/* Bottom Bar */
.stei-research-bottom {
  grid-column: 1 / -1 !important;

  display: grid !important;
  grid-template-columns: 1.4fr repeat(4, 1fr) !important;
  gap: 0 !important;

  margin-top: 30px !important;
  padding: 22px 24px !important;

  border-radius: 14px !important;
  background: linear-gradient(90deg, #f3f7ff, #ffffff) !important;
}

.stei-research-bottom-main,
.stei-research-bottom-link {
  display: grid !important;
  align-items: center !important;
  color: #0b1b4d !important;
  text-decoration: none !important;
}

.stei-research-bottom-main {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  padding-right: 28px !important;
}

.stei-research-bottom-link {
  grid-template-columns: 38px minmax(0, 1fr) 18px !important;
  column-gap: 14px !important;
  padding: 0 22px !important;
  border-left: 1px solid rgba(0,45,130,.12) !important;
}

.stei-research-bottom-main > span,
.stei-research-bottom-link > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 46px !important;
  height: 46px !important;

  border-radius: 50% !important;
  background: rgba(0,70,213,.08) !important;
  color: #0046d5 !important;

  font-size: 24px !important;
  line-height: 1 !important;
}

.stei-research-bottom-link > span {
  width: 34px !important;
  height: 34px !important;
  background: transparent !important;
  font-size: 22px !important;
}

.stei-research-bottom strong {
  display: block !important;
  margin: 0 0 5px !important;

  color: var(--stei-dark-blue) !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.stei-research-bottom small {
  display: block !important;

  color: #17234f !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

.stei-research-bottom em {
  color: #0046d5 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-style: normal !important;
}

/* Hover */
.stei-research-kk-link:hover b,
.stei-research-info-link:hover strong,
.stei-research-event-link:hover strong,
.stei-research-bottom-link:hover strong,
.stei-research-button:hover,
.stei-research-more:hover {
  color: #0046d5 !important;
}

/* Responsive */
@media (max-width: 991px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-research > ul.mega-sub-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;

    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .stei-research-panel {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  .stei-research-col {
    min-height: auto !important;
    padding: 18px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0,45,130,.12) !important;
  }

  .stei-research-bottom {
    grid-template-columns: 1fr !important;
  }

  .stei-research-bottom-main,
  .stei-research-bottom-link {
    border-left: 0 !important;
    border-bottom: 1px solid rgba(0,45,130,.12) !important;
    padding: 14px 0 !important;
  }
}

/* =========================================================
   STEI COMMUNITY MEGA MENU - STABLE VERSION
   Ikut pola CSS Riset: 1 Custom HTML 12/12
   ========================================================= */

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community > ul.mega-sub-menu {
  position: fixed !important;
  top: calc(var(--stei-mega-top) + var(--wp-admin--admin-bar--height, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: min(1420px, calc(100vw - 48px)) !important;
  max-width: 1420px !important;
  min-width: 0 !important;

  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 55, 166, 0.10) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 24px 60px rgba(0, 25, 80, 0.16) !important;

  z-index: 99999 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(100vh - var(--stei-mega-top) - 24px) !important;
}

/* Reset bawaan widget/menu */
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community ul.mega-sub-menu *,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community ul.mega-sub-menu *::before,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community ul.mega-sub-menu *::after {
  box-sizing: border-box !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community .widget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community .widget_custom_html,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community .custom-html-widget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community p {
  margin: 0 !important;
  padding: 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community li.mega-menu-column {
  width: 100% !important;
  padding: 0 !important;
}

/* =========================
   PANEL UTAMA
   ========================= */

.stei-community-panel {
  width: 100% !important;
  padding: 34px 36px 28px !important;
  background: #ffffff !important;
}

.stei-community-main {
  display: grid !important;
  grid-template-columns: 1.1fr 1.1fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
}

.stei-community-col,
.stei-community-side {
  min-width: 0 !important;
  min-height: 520px !important;
  padding: 0 28px !important;
  border-right: 1px solid rgba(0, 45, 130, 0.13) !important;
}

.stei-community-side {
  border-right: 0 !important;
}

.stei-community-col h4,
.stei-community-quick h4 {
  margin: 0 0 24px !important;
  padding: 0 !important;

  color: var(--stei-dark-blue) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

/* Garis kecil bawah heading, mirip mockup tapi tidak bikin kacau */
.stei-community-col h4::after,
.stei-community-quick h4::after {
  content: "" !important;
  display: block !important;
  width: 42px !important;
  height: 2px !important;
  margin-top: 16px !important;
  background: #0046d5 !important;
}

/* =========================
   LINK BESAR KIRI & TENGAH
   ========================= */

.stei-community-link {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) 22px !important;
  column-gap: 20px !important;
  align-items: center !important;

  min-height: 112px !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid rgba(0, 45, 130, 0.12) !important;

  color: #0b1b4d !important;
  text-decoration: none !important;
  background: transparent !important;
}

.stei-community-link > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 64px !important;
  height: 64px !important;
  border-radius: 10px !important;

  background: linear-gradient(145deg, #f3f6ff, #ffffff) !important;
  color: #0046d5 !important;

  font-size: 28px !important;
  line-height: 1 !important;
}

.stei-community-link div {
  min-width: 0 !important;
}

.stei-community-link strong {
  display: block !important;
  margin: 0 0 7px !important;

  color: #101828 !important;
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
}

.stei-community-link small {
  display: block !important;

  color: #17234f !important;
  font-size: 12.8px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
}

.stei-community-link em {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #0046d5 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-style: normal !important;
}

/* Tombol bawah kolom */
.stei-community-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  margin-top: 34px !important;
  padding: 15px 18px !important;

  border-radius: 10px !important;
  background: linear-gradient(145deg, #f3f7ff, #ffffff) !important;
  color: #0037a6 !important;

  font-size: 14.5px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* =========================
   KARTU FEATURE KANAN
   ========================= */

.stei-community-feature {
  display: block !important;
  padding: 26px 30px !important;

  border-radius: 16px !important;
  background: linear-gradient(145deg, #f3f7ff, #ffffff) !important;
  color: #0b1b4d !important;
  text-decoration: none !important;
}

.stei-community-illustration {
  position: relative !important;
  height: 165px !important;
  margin-bottom: 22px !important;

  border-radius: 14px !important;
  background:
    linear-gradient(145deg, rgba(0,70,213,.055), rgba(255,255,255,.9)),
    repeating-linear-gradient(45deg, rgba(0,70,213,.06) 0 1px, transparent 1px 12px) !important;
  overflow: hidden !important;
}

.stei-community-illustration span {
  position: absolute !important;
  color: rgba(0, 70, 213, 0.72) !important;
  line-height: 1 !important;
}

.comm-building {
  left: 50% !important;
  top: 42px !important;
  transform: translateX(-50%) !important;
  font-size: 80px !important;
  opacity: .72 !important;
}

.comm-people {
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;
  font-size: 30px !important;
  letter-spacing: 5px !important;
}

.comm-sun {
  top: 14px !important;
  right: 54px !important;
  font-size: 26px !important;
}

.comm-cloud-a {
  left: 18px !important;
  top: 58px !important;
  font-size: 26px !important;
}

.comm-cloud-b {
  right: 16px !important;
  top: 68px !important;
  font-size: 30px !important;
}

.stei-community-feature strong {
  display: block !important;
  margin: 0 0 10px !important;

  color: #0b1b4d !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.stei-community-feature small {
  display: block !important;
  margin-bottom: 22px !important;

  color: #17234f !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

.stei-community-feature b {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 14px 18px !important;
  border-radius: 8px !important;
  background: #0046d5 !important;
  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

/* =========================
   QUICK LINKS
   ========================= */

.stei-community-quick {
  margin-top: 26px !important;
}

.stei-community-quick h4 {
  margin-bottom: 14px !important;
}

.stei-community-quick a {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 20px !important;
  column-gap: 14px !important;
  align-items: center !important;

  min-height: 54px !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(0, 45, 130, 0.12) !important;

  color: #0b1b4d !important;
  text-decoration: none !important;
}

.stei-community-quick a > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: #f3f6ff !important;

  color: #0046d5 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.stei-community-quick strong {
  display: block !important;
  color: #101828 !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

.stei-community-quick em {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #101828 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-style: normal !important;
}

/* =========================
   BOTTOM BAR
   ========================= */

.stei-community-bottom {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;

  margin-top: 30px !important;
  padding: 22px 28px !important;

  border-radius: 14px !important;
  background: linear-gradient(90deg, #f3f7ff, #ffffff) !important;
}

.stei-community-bottom a {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  column-gap: 16px !important;
  align-items: center !important;

  padding: 0 22px !important;
  border-right: 1px solid rgba(0, 45, 130, 0.12) !important;

  color: #0b1b4d !important;
  text-decoration: none !important;
}

.stei-community-bottom a:last-child {
  border-right: 0 !important;
}

.stei-community-bottom span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;

  background: rgba(0, 70, 213, 0.08) !important;
  color: #0046d5 !important;

  font-size: 25px !important;
  line-height: 1 !important;
}

.stei-community-bottom strong {
  display: block !important;
  margin-bottom: 5px !important;

  color: var(--stei-dark-blue) !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.stei-community-bottom small {
  display: block !important;

  color: #17234f !important;
  font-size: 12.4px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

/* Hover */
.stei-community-link:hover strong,
.stei-community-quick a:hover strong,
.stei-community-bottom a:hover strong,
.stei-community-button:hover {
  color: #0046d5 !important;
}

.stei-community-feature:hover,
.stei-community-button:hover,
.stei-community-bottom a:hover {
  transform: translateY(-1px) !important;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 991px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-community > ul.mega-sub-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;

    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .stei-community-panel {
    padding: 18px !important;
  }

  .stei-community-main,
  .stei-community-bottom {
    grid-template-columns: 1fr !important;
  }

  .stei-community-col,
  .stei-community-side {
    min-height: auto !important;
    padding: 18px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0,45,130,.12) !important;
  }

  .stei-community-bottom a {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0,45,130,.12) !important;
    padding: 14px 0 !important;
  }

  .stei-community-bottom a:last-child {
    border-bottom: 0 !important;
  }
}

/* =========================================================
   STEI SERVICES MEGA MENU - STABLE VERSION
   Pola sama seperti Riset & Komunitas: 1 Custom HTML 12/12
   ========================================================= */

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services > ul.mega-sub-menu {
  position: fixed !important;
  top: calc(var(--stei-mega-top) + var(--wp-admin--admin-bar--height, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: min(1420px, calc(100vw - 48px)) !important;
  max-width: 1420px !important;
  min-width: 0 !important;

  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 55, 166, 0.10) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 24px 60px rgba(0, 25, 80, 0.16) !important;

  z-index: 99999 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(100vh - var(--stei-mega-top) - 24px) !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services ul.mega-sub-menu,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services ul.mega-sub-menu *,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services ul.mega-sub-menu *::before,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services ul.mega-sub-menu *::after {
  box-sizing: border-box !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services .widget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services .widget_custom_html,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services .custom-html-widget,
#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services p {
  margin: 0 !important;
  padding: 0 !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services li.mega-menu-column {
  width: 100% !important;
  padding: 0 !important;
}

/* Panel */
.stei-services-panel {
  width: 100% !important;
  padding: 34px 36px 28px !important;
  background: #ffffff !important;
}

.stei-services-main {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
}

.stei-services-col {
  min-width: 0 !important;
  min-height: 440px !important;
  padding: 0 28px !important;
  border-right: 1px solid rgba(0, 45, 130, 0.13) !important;
}

.stei-services-col:last-child {
  border-right: 0 !important;
}

.stei-services-col h4 {
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: var(--stei-dark-blue) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

.stei-services-col h4::after {
  content: "" !important;
  display: block !important;
  width: 42px !important;
  height: 2px !important;
  margin-top: 16px !important;
  background: #0046d5 !important;
}

/* Item link */
.stei-services-link {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) 22px !important;
  column-gap: 18px !important;
  align-items: center !important;

  min-height: 100px !important;
  padding: 18px 0 !important;

  color: #0b1b4d !important;
  text-decoration: none !important;
  background: transparent !important;
}

.stei-services-link > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 58px !important;
  height: 58px !important;
  border-radius: 9px !important;

  background: linear-gradient(145deg, #f3f6ff, #ffffff) !important;
  color: #0046d5 !important;

  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.stei-services-link div {
  min-width: 0 !important;
}

.stei-services-link strong {
  display: block !important;
  margin: 0 0 7px !important;
  color: #101828 !important;
  font-size: 14.6px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.stei-services-link small {
  display: block !important;
  color: #17234f !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.stei-services-link em {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0046d5 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-style: normal !important;
}

/* Bottom feature bar */
.stei-services-bottom {
  display: grid !important;
  grid-template-columns: 260px 280px repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: center !important;

  margin-top: 30px !important;
  padding: 24px 28px !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, #f3f7ff, #ffffff) !important;
}

.stei-services-bottom-visual {
  position: relative !important;
  height: 150px !important;
  margin-right: 28px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background:
    linear-gradient(145deg, rgba(0,70,213,.055), rgba(255,255,255,.9)),
    repeating-linear-gradient(45deg, rgba(0,70,213,.06) 0 1px, transparent 1px 12px) !important;
}

.stei-services-bottom-visual span {
  position: absolute !important;
  color: rgba(0, 70, 213, 0.72) !important;
  line-height: 1 !important;
}

.srv-monitor {
  left: 50% !important;
  top: 34px !important;
  transform: translateX(-50%) !important;
  font-size: 82px !important;
}

.srv-checklist {
  left: 50% !important;
  top: 61px !important;
  transform: translateX(-50%) !important;
  font-size: 32px !important;
}

.srv-plant {
  left: 18px !important;
  bottom: 19px !important;
  font-size: 42px !important;
}

.srv-cup {
  right: 22px !important;
  bottom: 22px !important;
  font-size: 34px !important;
}

.stei-services-bottom-text {
  min-width: 0 !important;
  padding-right: 34px !important;
  border-right: 1px solid rgba(0, 45, 130, 0.12) !important;
}

.stei-services-bottom-text strong {
  display: block !important;
  margin: 0 0 14px !important;
  color: #0b1b4d !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.stei-services-bottom-text small {
  display: block !important;
  color: #17234f !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

.stei-services-bottom-link {
  display: block !important;
  min-width: 0 !important;
  padding: 0 22px !important;
  border-right: 1px solid rgba(0, 45, 130, 0.12) !important;
  color: #0b1b4d !important;
  text-decoration: none !important;
}

.stei-services-bottom-link:last-child {
  border-right: 0 !important;
}

.stei-services-bottom-link > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  margin-bottom: 14px !important;
  color: #0046d5 !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

.stei-services-bottom-link strong {
  display: block !important;
  margin-bottom: 7px !important;
  color: #101828 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.stei-services-bottom-link small {
  display: block !important;
  color: #17234f !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

.stei-services-bottom-link em {
  display: block !important;
  margin-top: 12px !important;
  color: #0046d5 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-style: normal !important;
}

/* Note */
.stei-services-note {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding: 14px 20px !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #f3f7ff, #ffffff) !important;
  color: #17234f !important;
  text-align: center !important;
}

.stei-services-note span {
  color: #0b1b4d !important;
  font-size: 18px !important;
}

.stei-services-note small {
  color: #17234f !important;
  font-size: 12.8px !important;
  line-height: 1.45 !important;
}

/* Hover */
.stei-services-link:hover strong,
.stei-services-bottom-link:hover strong {
  color: #0046d5 !important;
}

/* Responsive */
@media (max-width: 991px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.stei-mega-services > ul.mega-sub-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .stei-services-panel {
    padding: 18px !important;
  }

  .stei-services-main,
  .stei-services-bottom {
    grid-template-columns: 1fr !important;
  }

  .stei-services-col {
    min-height: auto !important;
    padding: 18px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0,45,130,.12) !important;
  }

  .stei-services-bottom {
    gap: 18px !important;
  }

  .stei-services-bottom-visual {
    margin-right: 0 !important;
  }

  .stei-services-bottom-text {
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  .stei-services-bottom-link {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0,45,130,.12) !important;
    padding: 14px 0 !important;
  }

  .stei-services-bottom-link:last-child {
    border-bottom: 0 !important;
  }
}