/* =====================================================================
   Header — Steam / Epic profesyonel katman
   Sade koyu yüzey, ince çizgiler, soft hover; neon/glow yok.
   ===================================================================== */

:root {
  --uo-st-bg: #152238;
  --uo-st-bg-2: #1b2d4a;
  --uo-st-line: rgba(130, 180, 230, 0.14);
  --uo-st-line-2: rgba(102, 192, 244, 0.35);
  --uo-st-text: #d4e2f0;
  --uo-st-text-strong: #f5f9fc;
  --uo-st-muted: #8fa8c4;
  --uo-st-accent: #66c0f4;
  --uo-st-accent-2: #1a9fff;
}

/* ---- Kabuk — slider gibi mavimsi atmosfer ---- */
.header {
  background:
    radial-gradient(120% 90% at 12% -20%, rgba(0, 140, 255, 0.28), transparent 55%),
    radial-gradient(90% 80% at 88% 0%, rgba(120, 70, 220, 0.18), transparent 50%),
    linear-gradient(180deg, #1a2a44 0%, #152238 48%, #121c30 100%) !important;
  border-bottom: 1px solid var(--uo-st-line) !important;
  box-shadow: 0 12px 40px rgba(8, 20, 40, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header .header__wrap--top {
  border-bottom: 1px solid rgba(130, 180, 230, 0.12) !important;
  background: linear-gradient(180deg, rgba(40, 90, 150, 0.12), transparent) !important;
}

.header .header__wrap--nav,
.header__wrap--nav#uoHdrNavDrawer {
  border-top: 1px solid rgba(130, 180, 230, 0.12) !important;
  background:
    linear-gradient(90deg, rgba(0, 140, 255, 0.06), transparent 30%, transparent 70%, rgba(120, 70, 220, 0.06)),
    rgba(10, 24, 48, 0.35) !important;
}

@media (max-width: 991.98px) {
  .header.header--menu .header__wrap--nav,
  body.uo-nav-open .header__wrap--nav,
  .header.header--menu #uoHdrNavDrawer,
  body.uo-nav-open #uoHdrNavDrawer {
    background: #0e1626 !important;
    background-image: none !important;
    border-top: 0 !important;
  }
}

/* ---- Logo ---- */
.uo-hdr .header__logo {
  gap: 12px !important;
}

.uo-hdr .header__logo-img {
  width: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.header__logo-word {
  font-family: "Outfit", "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: 0.4px !important;
  text-transform: none;
}

.header__logo-word__ucz {
  color: #6fd4de !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
}

.header__logo-word__oyuncun {
  color: #d14c92 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
  font-weight: 700 !important;
}

/* ---- Üst satır ---- */
.uo-hdr {
  min-height: 64px !important;
  gap: 16px !important;
  padding: 8px 0 !important;
}

.uo-hdr__search-box {
  height: 42px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(130, 180, 230, 0.22) !important;
  background: rgba(8, 28, 55, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.uo-hdr__search-box:focus-within {
  border-color: rgba(102, 192, 244, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(102, 192, 244, 0.12) !important;
}

.uo-hdr__search-input {
  font-family: "Outfit", "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: var(--uo-st-text-strong) !important;
}

.uo-hdr__search-input::placeholder {
  color: var(--uo-st-muted) !important;
  font-weight: 450 !important;
}

.uo-hdr__search-submit {
  color: var(--uo-st-muted) !important;
  border-radius: 4px !important;
}

.uo-hdr__search-submit:hover {
  color: var(--uo-st-accent) !important;
  background: rgba(102, 192, 244, 0.08) !important;
}

.uo-hdr__actions {
  gap: 10px !important;
}

.uo-hdr__auth,
.uo-hdr__cart {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(130, 180, 230, 0.2) !important;
  background: rgba(30, 70, 120, 0.25) !important;
  color: var(--uo-st-text-strong) !important;
  font-family: "Outfit", "Segoe UI", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px;
}

.uo-hdr__auth:hover,
.uo-hdr__cart:hover {
  background: rgba(102, 192, 244, 0.1) !important;
  border-color: rgba(102, 192, 244, 0.35) !important;
  color: #fff !important;
}

.uo-hdr__icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(130, 180, 230, 0.2) !important;
  background: rgba(30, 70, 120, 0.25) !important;
}

.uo-hdr__icon-btn:hover {
  background: rgba(102, 192, 244, 0.1) !important;
  border-color: rgba(102, 192, 244, 0.35) !important;
}

.uo-hdr__sep {
  height: 20px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.uo-hdr__badge {
  top: -5px !important;
  right: -5px !important;
  background: linear-gradient(135deg, #66c0f4, #1a9fff) !important;
  color: #041018 !important;
  box-shadow: 0 0 0 2px #121820 !important;
  font-family: "Outfit", sans-serif !important;
}

/* ---- Alt nav — Steam/Epic chip satırı ---- */
.uo-hdr-nav {
  min-height: 58px !important;
  padding: 10px 0 14px !important;
}

.header__nav--icons {
  gap: 6px !important;
  justify-content: flex-start !important;
}

.header__nav--icons > .header__nav-item {
  flex: 0 1 auto !important;
  min-width: 0;
}

.header__nav--icons > .header__nav-item + .header__nav-item::before {
  display: none !important;
}

.header__nav--icons .header__nav-link {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--uo-st-text) !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}

.header__nav--icons .header__nav-link:hover,
.header__nav--icons .header__nav-item--has-dropdown.is-open > .header__nav-link {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  transform: none !important;
}

.header__nav--icons .header__nav-tile {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Tone renkleri — soft, glow yok */
.header__nav--icons .header__nav-tile--navy,
.header__nav--icons .header__nav-tile--cyan,
.header__nav--icons .header__nav-tile--blue,
.header__nav--icons .header__nav-tile--olive,
.header__nav--icons .header__nav-tile--yellow,
.header__nav--icons .header__nav-tile--brown,
.header__nav--icons .header__nav-tile--orange,
.header__nav--icons .header__nav-tile--pink,
.header__nav--icons .header__nav-tile--red,
.header__nav--icons .header__nav-tile--purple,
.header__nav--icons .header__nav-tile--gold {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

.header__nav--icons .header__nav-tile--cyan {
  background: rgba(102, 192, 244, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(102, 192, 244, 0.28) !important;
}

.header__nav--icons .header__nav-ico {
  width: 15px !important;
  height: 15px !important;
}

.header__nav--icons img.header__nav-ico {
  width: 16px !important;
  height: 16px !important;
  filter: saturate(0.95) brightness(1.05);
}

.header__nav--icons .header__nav-label {
  font-family: "Outfit", "Segoe UI", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.45px !important;
  text-transform: uppercase !important;
  color: inherit !important;
}

.header__nav--icons .header__nav-chev {
  width: 13px !important;
  height: 13px !important;
  opacity: 0.55 !important;
}

/* Öne çıkan — soft altın çizgi, halo yok */
.header__nav--icons .header__nav-item--featured .header__nav-link,
.header__nav--icons .header__nav-link--firsat {
  background: rgba(201, 153, 60, 0.1) !important;
  border-color: rgba(201, 153, 60, 0.35) !important;
  color: #f0d9a0 !important;
  overflow: visible !important;
}

.header__nav--icons .header__nav-item--featured .header__nav-link::before,
.header__nav--icons .header__nav-link--firsat::before {
  display: none !important;
}

.header__nav--icons .header__nav-item--featured .header__nav-tile,
.header__nav--icons .header__nav-tile--gold {
  background: rgba(201, 153, 60, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(240, 193, 75, 0.35) !important;
}

.header__nav--icons .header__nav-item--featured .header__nav-tile {
  width: 26px !important;
  height: 26px !important;
}

.header__nav--icons .header__nav-item--featured .header__nav-ico,
.header__nav--icons .header__nav-item--featured img.header__nav-ico {
  width: 15px !important;
  height: 15px !important;
}

/* ---- Mega paneller ---- */
.header .header__nav-dropdown,
.header__nav-dropdown--catmega,
.uo-catmega {
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, #1a2330 0%, #121820 100%) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55) !important;
}

.uo-catmega__top {
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--uo-st-line) !important;
}

.uo-catmega__top-title,
.uo-mega__grp-t,
.uo-catmega__grp-t {
  font-family: "Outfit", "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
}

.uo-mega__lnk,
.uo-catmega__grp .uo-mega__lnk {
  border-radius: 6px !important;
  padding: 10px 10px !important;
}

.uo-mega__lnk:hover {
  background: rgba(102, 192, 244, 0.1) !important;
  transform: none !important;
}

.uo-mega__lnk-ic {
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.25) !important;
}

/* ---- Üst şerit (topnav) — sakin ---- */
.uo-topnav {
  background:
    linear-gradient(90deg, rgba(0, 120, 220, 0.16), transparent 28%, transparent 72%, rgba(120, 60, 200, 0.12)),
    #0f1a2c !important;
  border-bottom: 1px solid rgba(130, 180, 230, 0.12) !important;
  font-family: "Outfit", "Segoe UI", sans-serif;
}

.uo-topnav__social-link {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.uo-topnav__social-link:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}

.uo-topnav__hot {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}

@media (max-width: 1199px) {
  .header__nav--icons .header__nav-label {
    font-size: 10.5px !important;
  }
  .header__nav--icons .header__nav-link {
    padding: 0 9px !important;
  }
}

@media (max-width: 991.98px) {
  .header.header--menu #uoHdrNavDrawer .header__nav--icons .header__nav-link,
  body.uo-nav-open #uoHdrNavDrawer .header__nav--icons .header__nav-link {
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: #162338 !important;
    border-radius: 12px !important;
  }

  .header.header--menu #uoHdrNavDrawer .uo-nav-drawer__head,
  body.uo-nav-open #uoHdrNavDrawer .uo-nav-drawer__head {
    background: #0e1626 !important;
    backdrop-filter: none !important;
  }

  /* Mobil header: taşma yok — overflow .header’da olmasın (fixed modal bozulur) */
  .header.header,
  .header {
    max-width: 100vw !important;
    overflow: visible !important;
  }

  .header .header__wrap--top,
  .header .header__wrap--top .container,
  .header .header__wrap--top .row,
  .header .header__wrap--top .col-12 {
    max-width: 100% !important;
    overflow-x: clip;
  }

  .header .header__wrap--top .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .header .uo-hdr,
  .uo-hdr {
    gap: 6px !important;
    min-height: 52px !important;
    padding: 6px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    flex-wrap: nowrap !important;
  }

  .uo-hdr .header__menu,
  .header .uo-hdr .header__menu {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .uo-hdr .header__logo,
  .header .uo-hdr .header__logo,
  .header .header__logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    gap: 6px !important;
    overflow: hidden;
  }

  .uo-hdr .header__logo-img,
  .header .uo-hdr .header__logo-img,
  .header .header__logo-img {
    width: 34px !important;
    height: 34px !important;
    max-height: 34px !important;
    max-width: 34px !important;
  }

  .header__logo-word {
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .uo-hdr__actions,
  .header .uo-hdr__actions {
    flex: 0 0 auto !important;
    gap: 5px !important;
    margin-left: 0 !important;
    max-width: none;
  }

  .uo-hdr__auth-label,
  .uo-hdr__cart-label,
  .uo-hdr__sep {
    display: none !important;
  }

  .uo-hdr__auth,
  .uo-hdr__cart,
  .header .uo-hdr__auth,
  .header .uo-hdr__cart {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .uo-hdr__icon-btn,
  .uo-hdr__search-mobile,
  .header .uo-hdr__icon-btn,
  .header .uo-hdr__search-mobile {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
  }

  .uo-hdr__logout {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .header__logo-word {
    display: inline-flex !important;
    font-size: 13px !important;
    max-width: 100%;
  }

  .uo-hdr .header__logo,
  .header .uo-hdr .header__logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .header .header__wrap--top .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}