/* ============================================================
   TOPBAR v2 — modern compact horizontal navbar
   Replaces the old stacked logo-on-top layout.
   ============================================================ */

/* === Fix: body transform context broke position:fixed (side-index bug) === */
body,
body.theme-tox,
body[data-page="home"] {
  animation: none !important;
  transform: none !important;
}

/* === Header reset to compact horizontal === */
.header-banner {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: linear-gradient(180deg, rgba(5, 3, 8, 0.85), rgba(5, 3, 8, 0.6));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.15);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.header-banner.scrolled,
body[data-scrolled="1"] .header-banner {
  background: rgba(5, 3, 8, 0.92);
  border-bottom-color: rgba(var(--theme-primary-rgb), 0.3);
}

.header-overlay,
.grid-overlay,
.bubbles-container { display: none !important; }

.oy-header {
  padding: 0 !important;
  position: relative;
  z-index: 1;
}
.oy-header > .container {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 72px;
  max-width: 1440px;
  padding: 0 28px;
  gap: 2rem;
  display: flex !important;
}

/* Top auth row — flatten into right side */
.header-topbar {
  position: static !important;
  order: 3;
  margin: 0 !important;
  flex-shrink: 0;
}
.header-auth-row {
  gap: 0.5rem !important;
  align-items: center;
}

/* Logo row — left aligned, smaller, NO animation */
.header-logo-row {
  padding: 0 !important;
  order: 1;
  text-align: left !important;
  flex-shrink: 0;
}
.header-logo-row .header-logo,
.header-logo-row .logo-container .header-logo {
  height: 38px !important;
  width: auto !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  transition: filter 0.3s ease !important;
}
.header-logo-row .header-logo:hover {
  filter: drop-shadow(0 4px 18px rgba(var(--theme-primary-rgb), 0.45));
}
.logo-shine { display: none !important; }
.logo-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

/* Nav — center, horizontal */
.header-nav {
  order: 2;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  gap: 0.25rem !important;
  flex: 1;
  justify-content: center !important;
}
.nav-link-mini {
  padding: 0.5rem 1rem !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  transition: all 0.25s ease !important;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
/* Kill ALL legacy underline pseudo-elements from older stylesheets */
.nav-link-mini::before,
.nav-link-mini::after {
  display: none !important;
  content: none !important;
}
.nav-link-mini:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.nav-link-mini.active {
  color: #0a0805 !important;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px -6px rgba(var(--theme-primary-rgb), 0.55);
}

/* Auth buttons — transparent default, golden glass on hover */
.auth-btn.glass-mini,
.auth-btn.glass-mini.register {
  padding: 0.5rem 0.95rem !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.08em !important;
  height: 38px;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}
.auth-btn.glass-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.25), rgba(var(--theme-accent-rgb), 0.12));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.auth-btn.glass-mini:hover {
  border-color: rgba(var(--theme-primary-rgb), 0.55) !important;
  color: #fff !important;
  background: rgba(var(--theme-primary-rgb), 0.04) !important;
  box-shadow: 0 6px 20px -8px rgba(var(--theme-primary-rgb), 0.45) !important;
  transform: translateY(-1px);
}
.auth-btn.glass-mini:hover::before { opacity: 1; }
.auth-btn.glass-mini > *:not(.icon-btn__badge) { position: relative; z-index: 1; }

/* register variant: subtle gold-tinted border by default */
.auth-btn.glass-mini.register {
  border-color: rgba(var(--theme-primary-rgb), 0.45) !important;
  color: var(--theme-primary) !important;
}
.auth-btn.glass-mini.register:hover {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)) !important;
  border-color: transparent !important;
  color: #0a0805 !important;
  box-shadow: 0 10px 26px -6px rgba(var(--theme-primary-rgb), 0.55) !important;
}
.auth-btn.glass-mini.register:hover::before { opacity: 0; }
.auth-btn.glass-mini.register:hover svg,
.auth-btn.glass-mini.register:hover span { color: #0a0805 !important; }
.auth-btn.glass-mini.register svg,
.auth-btn.glass-mini.register span { color: inherit !important; }

.auth-btn.glass-mini svg { width: 14px; height: 14px; }

/* Round icon-only buttons (cart, notif) */
.auth-btn.glass-mini.icon-btn,
.icon-btn {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  font-size: 1.05rem !important;
  flex-shrink: 0;
  overflow: visible !important; /* badge'in dışarı taşmasına izin ver */
}
/* Disable glass-mini's hover ::before gradient on round icon buttons — badge'i kapatmasın */
.auth-btn.glass-mini.icon-btn::before { display: none !important; content: none !important; }
.icon-btn i { line-height: 1; font-size: inherit; }
.icon-btn:hover i { color: var(--theme-primary); }

.icon-btn__badge,
.auth-btn.glass-mini > .icon-btn__badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 18px !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  border: 2px solid #050308 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.icon-btn__badge--cart  {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #050308, 0 2px 10px rgba(16, 185, 129, 0.65), 0 0 14px rgba(52, 211, 153, 0.55) !important;
  border: 0 !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 0.7rem !important;
  top: -4px !important;
  right: -4px !important;
  animation: cartBadgePulse 2.4s ease-in-out infinite;
}
@keyframes cartBadgePulse {
  0%, 100% { box-shadow: 0 0 0 2px #050308, 0 2px 10px rgba(16, 185, 129, 0.65), 0 0 14px rgba(52, 211, 153, 0.55); }
  50%      { box-shadow: 0 0 0 2px #050308, 0 2px 14px rgba(16, 185, 129, 0.9),  0 0 22px rgba(52, 211, 153, 0.85); }
}
.icon-btn__badge--notif {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)) !important;
  color: #0a0805 !important;
  box-shadow: 0 0 0 2px #050308, 0 2px 10px rgba(var(--theme-primary-rgb), 0.65) !important;
  border: 0 !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 0.7rem !important;
  top: -4px !important;
  right: -4px !important;
}
.icon-btn__badge[hidden],
.auth-btn.glass-mini > .icon-btn__badge[hidden] { display: none !important; }

/* Guest mode: hide notif bell with !important (beats .icon-btn display rule) */
#notifBell[hidden],
#notifBell.guest-hidden,
.auth-btn.glass-mini.icon-btn[hidden] { display: none !important; }

/* Cart button: round */
#navCartCount {
  font-family: var(--font-mono) !important;
}

/* ===== User chip: pill that contains MC head + username ===== */
.auth-btn.glass-mini.user-chip {
  padding: 4px 14px 4px 4px !important;
  height: 38px;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.user-chip__avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  image-rendering: pixelated; /* Minecraft head net görünsün */
  image-rendering: -moz-crisp-edges;
  box-shadow: 0 0 0 1px rgba(var(--theme-primary-rgb), 0.35);
  background: rgba(255, 255, 255, 0.04);
}
/* src yokken broken image ikonunu gizle, placeholder bg göster */
.user-chip__avatar:not([src]),
.user-chip__avatar[src=""] { color: transparent; }
.mobile-user__avatar:not([src]),
.mobile-user__avatar[src=""] { color: transparent; }
.mobile-user__avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  margin-right: 8px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.04);
}

/* Mobile-user/guest default — JS yüklenmeden flicker'ı önle */
.mobile-user { display: none; }
.mobile-guest { display: flex; }

/* Mobile hamburger appears */
@media (max-width: 880px) {
  .oy-header > .container { padding: 0 16px; height: 64px; }
  .header-nav { display: none !important; }
  .menu-toggle.d-mobile-only,
  #mobileToggle.d-mobile-only,
  .d-mobile-only {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 1.05rem !important;
  }
  .header-logo-row .header-logo,
  .header-logo-row .logo-container .header-logo { height: 32px !important; }
  /* Mobile'da auth butonları (Giriş/Kayıt/Profilim) tamamen hamburger'a taşınsın */
  .header-auth-row .auth-buttons-guest,
  .header-auth-row .auth-buttons-user { display: none !important; }
  .header-auth-row { gap: 6px !important; }
  body { overflow-x: hidden; }
}

/* Push page content below fixed topbar */
body {
  padding-top: 0;
}
body[data-page="home"] .apex-hero { padding-top: 130px; }
body:not([data-page="home"]) main {
  padding-top: 72px;
}
@media (max-width: 880px) {
  body:not([data-page="home"]) main { padding-top: 64px; }
  body[data-page="home"] .apex-hero { padding-top: 100px; }
}

/* === Side-index always visible (z-index lift) === */
.apex-side-index {
  z-index: 1100 !important;
}

/* Hide the old "spawn dot row" if any leftover */
.bubble { display: none !important; }

/* ============================================================
   AUTH-AWARE GİZLEME — giriş yapanlardan kayıt CTA'larını gizle
   - html.is-authed: bootstrap.js'in EN BAŞINDA set ettiği fast check
     (localStorage v2 veya craftUser varsa)
   - body.is-authed: initAuthState/showUser tarafından set edilir
   Her ikisi de aynı kuralı tetikler — FOUC yok.
   ============================================================ */
html.is-authed .cta-bar,
html.is-authed .cta-section,
html.is-authed .apex-footer__join,
html.is-authed [data-auth="guest-only"],
html.is-authed a[href$="register.html"]:not([data-keep]),
html.is-authed a[href="/register.html"]:not([data-keep]),
body.is-authed .cta-bar,
body.is-authed .cta-section,
body.is-authed .apex-footer__join,
body.is-authed [data-auth="guest-only"],
body.is-authed a[href$="register.html"]:not([data-keep]),
body.is-authed a[href="/register.html"]:not([data-keep]) {
  display: none !important;
}
/* Login ve register sayfalarındaki guest yönlendirme linkleri korunsun */
body[data-page="login"] a[href$="register.html"],
body[data-page="register"] a[href$="login.html"] {
  display: inline-flex !important;
}