.main-menu {
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  background-color: var(--secondary-1);
  position: fixed;
  z-index: 110;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  top: calc(55px + var(--ribbon-height-mobile));
}
@media (min-width: 1023.5px) {
  .main-menu {
    overflow: visible;
  }
}
.main-menu::-webkit-scrollbar {
  display: none;
}
@media (min-width: 767.5px) {
  .main-menu {
    top: calc(56px + var(--ribbon-height-tablet));
  }
}
@media (min-width: 1023.5px) {
  .main-menu {
    top: calc(72px + var(--ribbon-height-desktop));
  }
}
.main-menu .main-menu-content {
  display: flex;
  align-items: center;
  font-size: 12px;
  box-sizing: border-box;
  max-width: 1360px;
  width: 100%;
  font-weight: bold;
  line-height: 18px;
  height: 50px;
}
@media (min-width: 1023.5px) {
  .main-menu .main-menu-content {
    font-size: 14px;
    height: 56px;
  }
}
.main-menu .main-menu-content a,
.main-menu .main-menu-content div[id^="menu-item-"] {
  color: var(--primary-9);
  text-transform: uppercase;
  display: flex;
  white-space: nowrap;
  text-decoration: unset;
  cursor: pointer;
}
.main-menu .main-menu-content a:not(:first-child),
.main-menu .main-menu-content div[id^="menu-item-"]:not(:first-child) {
  margin-left: var(--spacing-16);
}
@media (min-width: 1023.5px) {
  .main-menu .main-menu-content a:not(:first-child),
  .main-menu .main-menu-content div[id^="menu-item-"]:not(:first-child) {
    margin-left: var(--spacing-24);
  }
}
.main-menu .main-menu-content a:last-child,
.main-menu .main-menu-content div[id^="menu-item-"]:last-child {
  padding-right: var(--spacing-16);
  margin-right: var(--spacing-16);
}
@media (min-width: 1023.5px) {
  .main-menu .main-menu-content a:last-child,
  .main-menu .main-menu-content div[id^="menu-item-"]:last-child {
    padding-right: var(--spacing-24);
    margin-right: var(--spacing-24);
  }
}
.main-menu .main-menu-content a:hover,
.main-menu .main-menu-content a:active,
.main-menu .main-menu-content div[id^="menu-item-"]:hover,
.main-menu .main-menu-content div[id^="menu-item-"]:active {
  text-decoration: none;
  color: var(--secondary-3);
}
.main-menu .main-menu-content a .img-content,
.main-menu .main-menu-content div[id^="menu-item-"] .img-content {
  position: relative;
  z-index: 100;
  height: 24px;
}
.main-menu .main-menu-content a .tag,
.main-menu .main-menu-content div[id^="menu-item-"] .tag {
  margin-left: 4px;
}
.main-menu .main-menu-content a.selected,
.main-menu .main-menu-content div[id^="menu-item-"].selected {
  color: var(--secondary-3);
}

/* ===== Override: agar main-menu bekerja di luar .header ===== */
.main-menu {
  position: relative !important;
  top: 0 !important;
  z-index: 109;
  background-color: #1a202c !important; /* Force dark background */
  display: flex !important;
  min-height: 50px;
}

.main-menu .main-menu-content a {
  color: #ffffff !important; /* Force white text */
}

.main-menu .main-menu-content a:hover {
  color: var(--secondary-3) !important;
}