/* ──────────────────────────────────────────────────────────────────────
   gameVgames-style overlay
   - Custom sticky 72px top header (logo + rounded glow search + actions)
   - Custom 64px-collapsed / 240px-hover sticky sidebar
   - Recent-games strip below header
   - Search suggestion panel
   - Hides the original header + .catbar
   ────────────────────────────────────────────────────────────────────── */

:root {
  --gv-bg-0: #0b0b0f;
  --gv-bg-1: #11131a;
  --gv-bg-2: #161922;
  --gv-bg-3: #1c2030;
  --gv-text: #ffffff;
  --gv-text-dim: #b3b3b3;
  --gv-text-mute: #6b7080;
  --gv-red: #e11d2a;
  --gv-red-2: #ff3344;
  --gv-red-soft: rgba(225, 29, 42, 0.18);
  --gv-red-glow: rgba(225, 29, 42, 0.45);
  --gv-border: rgba(255, 255, 255, 0.06);
  --gv-border-strong: rgba(255, 255, 255, 0.12);
  --gv-hover: rgba(255, 255, 255, 0.07);
  --gv-active: #1f2532;
  --gv-h: 72px;
  --gv-strip-h: 0px;
  --gv-sb-w: 64px;
  --gv-sb-w-open: 240px;
  --gv-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset original page paddings/colors */
html,
body {
  background: var(--gv-bg-0) !important;
}

/* Hide original UI */
.gv-hidden {
  display: none !important;
}

/* ── FOUC FIX ──────────────────────────────────────────────────────────
   React's native sticky header (2nd search bar + Home/Blog/Favorites +
   language flags) and the category bar (.catbar) are also hidden by
   sidebar.js (it adds .gv-hidden) — but that runs AFTER React renders, so
   they flash on every load. These STATIC rules match the same elements via
   their own Tailwind classes, so they're hidden from the first paint and
   never appear. The custom header + sidebar replace all of this. */
#root nav.sticky.top-0,
#root .catbar {
  display: none !important;
}

/* ── Push the React app below header + right of sidebar ──────────────── */
#root {
  padding-top: calc(var(--gv-h) + var(--gv-strip-h));
  padding-left: var(--gv-sb-w);
  min-height: 100vh;
  box-sizing: border-box;
}

/* Geçmiş şeridini bazı sayfalarda (oyun detay) gizle → içerik header'a yapışsın */
body.gv-no-strip .gv-strip { display: none !important; }
body.gv-no-strip #root,
body.gv-no-strip #hp-root {
  padding-top: var(--gv-h);
}

/* ════════════════════════════════════════════════════════════════════════
   TOP HEADER
   ══════════════════════════════════════════════════════════════════════ */
.gv-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gv-h);
  z-index: 100;
  /* Default state: solid neon-noir gradient (page is at top) */
  background:
    radial-gradient(ellipse at top left, rgba(225,29,42,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at top right, rgba(225,29,42,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #0b0b12 0%, #0a0a10 100%);
  border: 1px solid rgba(225, 29, 42, 0.35);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0 0 18px 18px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 18px;
  font-family: 'Nunito', 'Nunito-fallback', 'Inter', system-ui, sans-serif;
  color: var(--gv-text);
  box-shadow:
    0 0 0 1px rgba(225, 29, 42, 0.15) inset,
    0 6px 24px rgba(225, 29, 42, 0.25),
    0 0 60px rgba(225, 29, 42, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.6);
  /* Smoothly transition into frosted state on scroll */
  transition: background 0.25s ease, backdrop-filter 0.25s ease;
}
/* Scrolled state — frosted glass / ice effect */
.gv-header.gv-scrolled {
  background:
    radial-gradient(ellipse at top left, rgba(225,29,42,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at top right, rgba(225,29,42,0.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(11,11,18,0.45) 0%, rgba(10,10,16,0.45) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
/* Subtle animated neon trace running along the top of the header */
.gv-header::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 61, 107, 0.55) 50%,
    transparent 100%);
  opacity: 0;
  mask: linear-gradient(180deg, #000 0 1px, transparent 1px);
  -webkit-mask: linear-gradient(180deg, #000 0 1px, transparent 1px);
  animation: gv-neon-pulse 6s ease-in-out infinite;
}
@keyframes gv-neon-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

/* Logo */
.gv-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--gv-text);
  flex-shrink: 0;
  height: 100%;
  padding: 0 6px;
  gap: 10px;
}
.gv-logo img {
  height: 36px;
  width: auto;
  display: block;
}
/* Mobilde kompakt ikon-logo kullanılır (aşağıda ≤640 media'da değişir).
   Varsayılan (masaüstü): tam wordmark görünür, ikon gizli.
   NOT: ".gv-logo img" kuralı (özgüllük 11) bunu ezmesin diye ".gv-logo"
   ile özgüllüğü artırıyoruz (20 > 11). */
.gv-logo .gv-logo-icon { display: none; }
.gv-logo:hover {
  filter: brightness(1.1);
}

/* Search box (artık logonun yanında, sola yakın) */
.gv-search-wrap {
  flex: 0 0 auto;
  width: 320px;
  display: flex;
  justify-content: flex-start;
  position: relative;
  min-width: 0;
}
.gv-search {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 44px;
  background: rgba(20, 22, 30, 0.85);
  border: 1.5px solid var(--gv-red-soft);
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 18px 0 44px;
  transition: border-color 0.2s var(--gv-ease), box-shadow 0.2s var(--gv-ease),
    background 0.2s var(--gv-ease);
  box-shadow: 0 0 0 0 var(--gv-red-glow);
}
.gv-search:hover {
  border-color: rgba(225, 29, 42, 0.5);
}
.gv-search.gv-focus {
  border-color: var(--gv-red);
  background: rgba(15, 16, 22, 0.95);
  box-shadow: 0 0 0 4px rgba(225, 29, 42, 0.12), 0 0 24px 0 var(--gv-red-glow);
}
.gv-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gv-red-2);
  pointer-events: none;
  display: flex;
}
.gv-search input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--gv-text);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  min-width: 0;
}
.gv-search input::placeholder {
  color: var(--gv-text-mute);
  font-weight: 500;
}
.gv-search-clear {
  background: none;
  border: none;
  color: var(--gv-text-mute);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}
.gv-search-clear:hover {
  background: var(--gv-hover);
  color: var(--gv-text);
}
.gv-search.gv-has-value .gv-search-clear {
  display: inline-flex;
}

/* ── Header içi recent games strip (eski alt strip'in yerine) ───────── */
.gv-header-recent {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  height: 56px;
  padding: 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  min-width: 0;
}
.gv-header-recent::-webkit-scrollbar { height: 4px; }
.gv-header-recent::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
.gv-header-recent::-webkit-scrollbar-track { background: transparent; }

.gv-hr-card {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  background: var(--gv-bg-2);
  border: 1px solid var(--gv-border);
  position: relative;
  transition: transform 0.18s var(--gv-ease), box-shadow 0.18s var(--gv-ease);
}
.gv-hr-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gv-hr-card:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 2px var(--gv-red);
  z-index: 1;
}
.gv-hr-history {
  background: linear-gradient(135deg, #cc1828 0%, #ff3344 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  gap: 1px;
  border-color: rgba(255,80,95,0.4);
}
.gv-hr-history svg { width: 18px; height: 18px; }

/* Eski alt strip'i tamamen gizle (artık header içinde) */
.gv-strip { display: none !important; }

/* Right action buttons */
.gv-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.gv-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 22, 30, 0.85);
  border: 1.5px solid var(--gv-red-soft);
  color: var(--gv-text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s var(--gv-ease), color 0.18s var(--gv-ease),
    background 0.18s var(--gv-ease), transform 0.18s var(--gv-ease),
    box-shadow 0.18s var(--gv-ease);
  position: relative;
  flex-shrink: 0;
}
.gv-icon-btn:hover {
  border-color: var(--gv-red);
  color: var(--gv-red-2);
  box-shadow: 0 0 16px 0 var(--gv-red-glow);
  transform: translateY(-1px);
}
.gv-icon-btn[hidden] {
  display: none !important;
}
.gv-icon-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--gv-bg-3);
  color: var(--gv-text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--gv-ease), transform 0.15s var(--gv-ease);
  border: 1px solid var(--gv-border);
}
.gv-icon-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile hamburger */
.gv-burger {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(20, 22, 30, 0.85);
  border: 1px solid var(--gv-border);
  color: var(--gv-text);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   SEARCH PANEL (suggestion popover)
   ══════════════════════════════════════════════════════════════════════ */
.gv-search-panel {
  position: fixed;
  top: var(--gv-h);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(calc(100vw - 32px), 720px);
  max-height: calc(100vh - var(--gv-h) - 24px);
  overflow-y: auto;
  background: var(--gv-bg-1);
  border: 1px solid var(--gv-border-strong);
  border-radius: 16px;
  padding: 20px;
  z-index: 99;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(225, 29, 42, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--gv-ease), transform 0.18s var(--gv-ease);
}
.gv-search-panel.gv-open {
  opacity: 1;
  transform: translateX(-50%) translateY(8px);
  pointer-events: auto;
}
.gv-sp-section + .gv-sp-section {
  margin-top: 22px;
}
.gv-sp-h {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-text-mute);
  margin: 0 0 10px;
}
.gv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gv-pill {
  background: var(--gv-bg-2);
  border: 1px solid var(--gv-border);
  color: var(--gv-text);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s var(--gv-ease), border-color 0.15s var(--gv-ease),
    color 0.15s var(--gv-ease);
}
.gv-pill:hover {
  background: var(--gv-red-soft);
  border-color: var(--gv-red);
  color: #fff;
}
.gv-pill-count {
  color: var(--gv-text-mute);
  font-weight: 600;
  font-size: 12px;
}
.gv-pill:hover .gv-pill-count {
  color: rgba(255, 255, 255, 0.75);
}

.gv-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 540px) {
  .gv-game-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gv-game-card {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gv-bg-2);
  text-decoration: none;
  aspect-ratio: 4 / 3;
  transition: transform 0.18s var(--gv-ease), box-shadow 0.18s var(--gv-ease);
}
.gv-game-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--gv-red);
  z-index: 1;
}
.gv-game-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gv-game-card-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 8px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gv-empty {
  padding: 16px;
  text-align: center;
  color: var(--gv-text-mute);
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════════
   LEFT SIDEBAR
   ══════════════════════════════════════════════════════════════════════ */
.gv-sb {
  position: fixed;
  /* Floating sidebar — offset from edges, gameVgames style */
  top: calc(var(--gv-h) + 20px);
  left: 10px;
  bottom: 10px;
  width: var(--gv-sb-w);
  /* Frosted-glass / ice effect — translucent dark with neon red bleed.
     The blur reveals the page content behind, giving it that icy look. */
  background:
    radial-gradient(ellipse at top, rgba(225,29,42,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(225,29,42,0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(11,11,18,0.55) 0%, rgba(10,10,16,0.55) 100%);
  border: 1px solid rgba(225, 29, 42, 0.35);
  border-radius: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  font-family: 'Nunito', 'Nunito-fallback', 'Inter', system-ui, sans-serif;
  color: var(--gv-text);
  transition: width 0.22s var(--gv-ease), box-shadow 0.22s var(--gv-ease);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 20px rgba(225, 29, 42, 0.22),
    0 0 50px rgba(225, 29, 42, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.5);
  /* Heavy blur for the frosted look */
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
/* Intensify the glow on hover/pin so the open state feels alive */
.gv-sb:hover,
.gv-sb.gv-pin {
  box-shadow:
    0 0 0 1px rgba(225, 29, 42, 0.25) inset,
    0 0 30px rgba(225, 29, 42, 0.35),
    0 0 80px rgba(225, 29, 42, 0.18),
    0 16px 48px rgba(0, 0, 0, 0.7);
}
.gv-sb:hover,
.gv-sb.gv-pin {
  width: var(--gv-sb-w-open);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.4);
}

.gv-sb-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  /* Symmetric padding — icons MUST be centered when sidebar is collapsed */
  padding: 10px 6px 16px;
  /* Hide scrollbar so it doesn't steal width and break icon centering */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gv-sb-scroll::-webkit-scrollbar {
  width: 0;
  display: none;
}
.gv-sb-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.gv-sb-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.gv-sb-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--gv-text-dim);
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s var(--gv-ease), color 0.15s var(--gv-ease);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  position: relative;
}
.gv-sb-item:hover {
  background: linear-gradient(90deg, rgba(225,29,42,0.18) 0%, rgba(225,29,42,0.04) 100%);
  color: var(--gv-red-2);
  box-shadow: 0 0 0 1px rgba(225, 29, 42, 0.25) inset;
}
.gv-sb-item:hover .gv-sb-icon {
  color: var(--gv-red-2);
  filter: drop-shadow(0 0 6px rgba(225, 29, 42, 0.7));
}
.gv-sb-item.gv-active {
  background: linear-gradient(90deg, rgba(225,29,42,0.25) 0%, rgba(225,29,42,0.05) 100%);
  color: #fff;
}
.gv-sb-item.gv-active .gv-sb-icon {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(225, 29, 42, 0.9))
          drop-shadow(0 0 16px rgba(225, 29, 42, 0.45));
}
.gv-sb-item.gv-active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--gv-red);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px var(--gv-red), 0 0 24px rgba(225, 29, 42, 0.6);
}

/* Collapsed (default narrow) sidebar — center icons in their item rows.
   When sidebar expands (hover or pinned) labels appear and item goes back
   to left-aligned flex layout. */
.gv-sb:not(:hover):not(.gv-pin):not(.gv-sb-mobile-open) .gv-sb-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
/* Take label OUT of the flex layout when collapsed — otherwise the gap
   between icon and zero-width label would still push the icon off-center.
   NOT for the mobile drawer: there the sidebar opens full-width and must
   show labels (icons-only was the mobile bug). */
.gv-sb:not(:hover):not(.gv-pin):not(.gv-sb-mobile-open) .gv-sb-label,
.gv-sb:not(:hover):not(.gv-pin):not(.gv-sb-mobile-open) .gv-sb-chev {
  display: none;
}
.gv-sb:not(:hover):not(.gv-pin) .gv-sb-item.gv-active::before {
  left: -1px;
}

.gv-sb-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gv-text-dim);
}
.gv-sb-item:hover .gv-sb-icon,
.gv-sb-item.gv-active .gv-sb-icon {
  color: #fff;
}
.gv-sb-icon svg {
  width: 22px;
  height: 22px;
}

.gv-sb-label {
  flex: 1 1 auto;
  opacity: 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  transition: opacity 0.18s var(--gv-ease), max-width 0.22s var(--gv-ease);
  font-weight: 600;
  letter-spacing: 0.2px;
  overflow: hidden;
  white-space: nowrap;
}
.gv-sb:hover .gv-sb-label,
.gv-sb.gv-pin .gv-sb-label,
.gv-sb-mobile-open .gv-sb-label {
  opacity: 1;
  max-width: 200px;
}

.gv-sb-chev {
  margin-left: auto;
  opacity: 0;
  width: 0;
  max-width: 0;
  overflow: hidden;
  color: var(--gv-text-mute);
  transition: opacity 0.18s var(--gv-ease), transform 0.2s var(--gv-ease), max-width 0.22s var(--gv-ease);
}
.gv-sb:hover .gv-sb-chev,
.gv-sb.gv-pin .gv-sb-chev {
  opacity: 1;
  max-width: 20px;
}
.gv-sb-item.gv-open .gv-sb-chev {
  transform: rotate(90deg);
  color: var(--gv-red-2);
}

.gv-sb-sep {
  height: 1px;
  background: var(--gv-border);
  margin: 10px 4px;
}

.gv-sb-h {
  padding: 14px 14px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gv-text-mute);
  opacity: 0;
  transition: opacity 0.18s var(--gv-ease);
  white-space: nowrap;
}
.gv-sb:hover .gv-sb-h,
.gv-sb.gv-pin .gv-sb-h {
  opacity: 1;
}

/* Language nested list */
.gv-sb-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s var(--gv-ease);
}
.gv-sb-sub.gv-open {
  max-height: 600px;
}
.gv-sb-sub .gv-sb-item {
  padding-left: 50px;
  font-size: 13px;
  font-weight: 600;
}
.gv-sb-sub .gv-sb-item.gv-active {
  color: var(--gv-red-2);
  background: transparent;
}
.gv-sb-sub .gv-sb-item.gv-active::before {
  display: none;
}

/* External link rows show small ↗ */
.gv-sb-ext .gv-sb-icon {
  color: var(--gv-text-mute);
}

/* ── Mobile drawer behavior ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .gv-burger {
    display: inline-flex;
  }
  /* Mobil header: padding/gap küçült + arama çubuğunu ESNEK yap. Önceden
     .gv-search-wrap sabit 320px'di → dar ekranda taşıp sağdan kesiliyordu.
     Artık kalan alanı doldurur, kesilmez. */
  .gv-header {
    padding: 0 12px;
    gap: 10px;
  }
  .gv-search-wrap {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  /* Header'daki "recent games" şeridi mobilde gizli — arama çubuğuyla flex
     alanı için yarışıp onu daraltıyordu. Geçmiş zaten alttaki .gv-strip'te. */
  .gv-header-recent { display: none; }
  #root {
    padding-left: 0;
    padding-top: calc(var(--gv-h) + var(--gv-strip-h));
  }
  .gv-sb {
    /* Kapalıyken TAMAMEN ekran dışı. translateX(-100%) tek başına yetmiyordu:
       sidebar left:10px'ten başlıyor + box-shadow kırmızı glow ~50px taşıyor →
       sol kenarda ince kırmızı "uç" görünüyordu. Genişlik + 80px kadar it ki
       gövde de glow da ekran dışına çıksın. */
    transform: translateX(calc(-100% - 80px));
    transition: transform 0.25s var(--gv-ease);
    width: var(--gv-sb-w-open);
  }
  .gv-sb.gv-sb-mobile-open {
    transform: translateX(0);
  }
  .gv-sb .gv-sb-label,
  .gv-sb .gv-sb-h,
  .gv-sb .gv-sb-chev {
    opacity: 1;
  }
  .gv-strip {
    left: 0 !important;
  }
  .gv-search {
    max-width: none;
  }
  .gv-logo span {
    display: none;
  }
}

/* Telefon (≤640): tam wordmark logo (221px) arama çubuğunu sıfıra çökertiyordu.
   Kompakt ikon-logo'ya geç → arama çubuğuna ~180px yer açılır. */
@media (max-width: 640px) {
  .gv-logo .gv-logo-full { display: none; }
  .gv-logo .gv-logo-icon { display: block; height: 34px; width: auto; }
  .gv-logo { padding: 0 2px; }
}

/* Backdrop for mobile drawer */
.gv-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 89;
}
.gv-backdrop.gv-open {
  display: block;
}

/* ════════════════════════════════════════════════════════════════════════
   QUICK ACCESS STRIP (recent games)
   ══════════════════════════════════════════════════════════════════════ */
.gv-strip {
  position: fixed;
  top: var(--gv-h);
  left: var(--gv-sb-w);
  right: 0;
  height: var(--gv-strip-h);
  background: var(--gv-bg-1);
  border-bottom: 1px solid var(--gv-border);
  z-index: 85;
  padding: 12px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.gv-strip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  padding-bottom: 6px;
  width: 100%;
}
.gv-strip-row::-webkit-scrollbar {
  height: 5px;
}
.gv-strip-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.gv-strip-card {
  width: 70px;
  height: 70px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--gv-bg-2);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s var(--gv-ease), box-shadow 0.18s var(--gv-ease);
  border: 1px solid var(--gv-border);
}
.gv-strip-card:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--gv-red);
  z-index: 1;
}
.gv-strip-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gv-strip-history {
  background: linear-gradient(135deg, #cc1828 0%, #ff3344 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  gap: 3px;
  border-color: rgba(255, 80, 95, 0.4);
}
.gv-strip-history svg {
  width: 24px;
  height: 24px;
}

/* ──────────────────────────────────────────────────────────────────────
   Category pill row (/games, /category/*)
   - Classes are added at runtime by category-neon.js because the bundle
     minifies React className strings.
   - Wrapper gets overflow:visible + a little top breathing room so the
     decorative top stripe on Featured/Trending isn't clipped.
   - Each pill gets a red-neon hover + active glow.
   ────────────────────────────────────────────────────────────────────── */
.gv-cat-row-wrap,
.gv-cat-row,
.gv-cat-row-wrap *,
.gv-cat-row * {
  overflow: visible !important;
}
.gv-cat-row {
  padding: 18px 4px 12px !important;
}
.gv-cat-btn {
  position: relative;
  transition:
    transform 0.18s var(--gv-ease),
    box-shadow 0.22s var(--gv-ease) !important;
  /* Default: every pill is permanently lit with red neon ring + outer glow */
  box-shadow:
    0 0 0 1.5px rgba(225, 29, 42, 0.7),
    0 0 14px rgba(225, 29, 42, 0.5),
    0 0 28px rgba(225, 29, 42, 0.22) !important;
  border-color: rgba(225, 29, 42, 0.7) !important;
}
.gv-cat-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(255, 51, 68, 0.95),
    0 0 22px rgba(225, 29, 42, 0.85),
    0 0 44px rgba(225, 29, 42, 0.45) !important;
  border-color: rgba(255, 51, 68, 0.95) !important;
  z-index: 2;
}
/* Selected/active state — React adds aria-pressed / data-state / its own ring */
.gv-cat-btn[aria-pressed="true"],
.gv-cat-btn[data-state="active"],
.gv-cat-btn[data-active="true"],
.gv-cat-btn.is-active {
  box-shadow:
    0 0 0 2.5px rgba(255, 51, 68, 1),
    0 0 26px rgba(225, 29, 42, 0.95),
    0 0 50px rgba(225, 29, 42, 0.55) !important;
  border-color: rgba(255, 51, 68, 1) !important;
  z-index: 2;
}