/* ============================================================
   SahaX UI Premium Theme (FIFA Mobile / eFootball tarzı)
   Salt görsel katman — style.css'ten SONRA yüklenir.
   ------------------------------------------------------------
   YASAK BÖLGE (oynanış-kritik, ASLA hedeflenmez):
   .mobile-joystick, --joystick-*, --left-joystick-*, --right-joystick-*,
   .score, .match-clock, .canvas-score-overlay, .canvas-wrap, .field-card,
   maç içi aksiyon butonları, <main class="app"> oyun sahnesi.
   Genel kurallar #flow (menü akışı) altına scope'lanmıştır.
   ============================================================ */

/* ---------- 1. Tema değişkenleri ---------- */
:root {
  --ui-bg: #0a0f1e;
  --ui-neon: #00ff87;
  --ui-neon-dark: #00c968;
  --ui-gold: #ffd700;
  --ui-gold-dark: #b8860b;
  --ui-royal: #1a0b2e;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 20px;
  --glass-border-focus: rgba(0, 255, 135, 0.4);
  --accent-emerald: #00ff87;
}

/* ---------- 2. Arka planlar ---------- */
/* Ana menü akışı: gece stadyumu + koyu overlay.
   Kullanıcının özel arka planı inline !important ile geldiğinden otomatik öncelikli kalır. */
#flow {
  background:
    linear-gradient(rgba(8, 17, 31, 0.75), rgba(8, 17, 31, 0.85)),
    url("assets/stadium-night.jpg") center / cover no-repeat;
  background-attachment: fixed;
}

/* Menülerde yavaş gezinen renk ışıltısı (animated gradient katmanı) */
#flow::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(120deg,
    rgba(0, 255, 135, 0.07),
    rgba(0, 240, 255, 0.05),
    rgba(255, 215, 0, 0.05),
    rgba(0, 255, 135, 0.07));
  background-size: 300% 300%;
  animation: uiGradientShift 18s ease-in-out infinite;
}

/* Takım lobisi: çim dokusu + koyu gradient overlay */
.team-lobby-overlay {
  background:
    linear-gradient(rgba(6, 12, 24, 0.86), rgba(6, 12, 24, 0.94)),
    url("assets/grass-pitch.jpg") center / cover no-repeat !important;
}

/* ---------- 3. Tipografi ---------- */
#flow h1,
#flow h2,
#flow h3,
#flow .menu-hero-btn,
#flow .mode-card h3,
#flow button,
#flow .tab-button,
#flow .play-choice,
.team-lobby-overlay h2,
.team-lobby-overlay h3,
.team-lobby-overlay button {
  font-family: "Rajdhani", var(--font-outfit, "Outfit"), sans-serif !important;
  letter-spacing: 0.4px;
}

/* Ekran başlıkları: neon yeşil → beyaz gradient yazı */
#flow .flow-card > h2,
#flow .mode-card-body h3 {
  background: linear-gradient(90deg, #00ff87 0%, #ffffff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-shadow: none;
}

/* ---------- 4. Kartlar (glassmorphism) ---------- */
#flow .flow-card {
  border-radius: 16px !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 255, 135, 0.05) !important;
}

#flow .mode-card {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#flow .quick-play-grid {
  gap: 16px !important;
}

#flow .mode-card:hover {
  border-color: rgba(0, 255, 135, 0.45) !important;
  box-shadow: 0 0 28px rgba(0, 255, 135, 0.25), 0 14px 36px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-3px) !important;
}

#flow .mode-card .mode-card-glow {
  background: radial-gradient(circle at 30% 0%, rgba(0, 255, 135, 0.18), transparent 60%);
  opacity: 0.7;
}

#flow .ranked-mode-card:hover {
  border-color: rgba(255, 215, 0, 0.5) !important;
  box-shadow: 0 0 28px rgba(255, 215, 0, 0.25), 0 14px 36px rgba(0, 0, 0, 0.5) !important;
}

#flow .mode-card-badge {
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 135, 0.35);
  color: var(--ui-neon);
  background: rgba(0, 255, 135, 0.08);
  font-weight: 700;
}

#flow .mode-card-badge.ranked {
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--ui-gold);
  background: rgba(255, 215, 0, 0.08);
}

#flow .mode-card-icon {
  filter: drop-shadow(0 0 8px rgba(0, 255, 135, 0.55));
}

#flow .ranked-mode-card .mode-card-icon {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

/* ---------- 5. Butonlar (yalnız menü kapsamı) ---------- */
/* Ana aksiyon butonları: dokunmatik dostu boyut */
#flow .menu-hero-btn,
#flow #dynamicMenuContainer button,
#flow .blue-btn,
#flow .quick-play-actions button,
#flow .flow-back-btn,
#flow .auth-provider-btn {
  min-height: 52px;
  border-radius: 12px !important;
}

/* Primary: neon yeşil gradient + glow (mevcut sarı/özel renkli olanlar hariç) */
#flow .blue-btn,
#flow #dynamicMenuContainer .menu-hero-btn:not(.resume-match):not([style*="background"]) {
  background: linear-gradient(135deg, #00ff87 0%, #00b35c 100%) !important;
  color: #04150c !important;
  border: 1px solid rgba(0, 255, 135, 0.55) !important;
  box-shadow: 0 0 18px rgba(0, 255, 135, 0.3), 0 8px 22px rgba(0, 0, 0, 0.35) !important;
  font-weight: 800;
  text-shadow: none !important;
}

#flow .blue-btn:hover,
#flow #dynamicMenuContainer .menu-hero-btn:not(.resume-match):hover {
  filter: brightness(1.12);
  box-shadow: 0 0 28px rgba(0, 255, 135, 0.5), 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}

/* Secondary: şeffaf + neon kenarlık, hover'da dolar */
#flow .flow-back-btn,
#flow .quick-play-actions button,
#flow .auth-tabs button:not(.active) {
  background: rgba(0, 255, 135, 0.04) !important;
  border: 1px solid rgba(0, 255, 135, 0.35) !important;
  color: #d9ffe9 !important;
}

#flow .flow-back-btn:hover,
#flow .quick-play-actions button:hover {
  background: rgba(0, 255, 135, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(0, 255, 135, 0.35) !important;
}

/* VIP: altın gradient, siyah yazı, altın glow */
#flow #menuVipLevelCard,
#flow .menu-vip-btn {
  background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%) !important;
  color: #1a1102 !important;
  border: 1px solid rgba(255, 215, 0, 0.6) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35) !important;
  font-weight: 800;
}

#flow #menuVipLevelCard:hover,
#flow .menu-vip-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 26px rgba(255, 215, 0, 0.55) !important;
}

#flow #menuVipLevelCard span,
#flow .menu-vip-btn span {
  color: #1a1102 !important;
}

/* VIP Ayrıcalıkları butonu: animasyonlu SVG taç + parlama süpürmesi */
#flow .menu-vip-btn {
  min-height: 50px;
  padding: 10px 16px !important;
  position: relative;
  overflow: hidden;
}

/* Özel arka plan modundaki koyu buton kuralını da ezmek için id'li kural */
#flow #menuVipPrivilegesButton {
  background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%) !important;
  border: 1px solid rgba(255, 215, 0, 0.7) !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.4) !important;
}

#flow .menu-vip-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  left: -55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: vipSheen 3.4s ease-in-out infinite;
  pointer-events: none;
}

#flow .menu-vip-btn .vip-btn-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  width: 100%;
}

#flow .menu-vip-btn .vip-btn-text {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px;
  color: #1a1102 !important;
}

#flow .menu-vip-btn .vip-crown {
  width: 27px;
  height: 27px;
  flex: none;
  filter: drop-shadow(0 1px 3px rgba(120, 53, 15, 0.55));
  animation: vipCrownBob 2.6s ease-in-out infinite;
  transform-origin: 50% 80%;
}

#flow .menu-vip-btn .vip-spark {
  width: 13px;
  height: 13px;
  flex: none;
  color: #fffbeb;
  animation: vipTwinkle 1.9s ease-in-out infinite;
}

#flow .menu-vip-btn .vip-spark.s2 {
  width: 10px;
  height: 10px;
  animation-delay: 0.95s;
}

#flow .menu-vip-btn:hover .vip-crown {
  animation-duration: 0.9s;
}

@keyframes vipSheen {
  0% { left: -55%; }
  55%, 100% { left: 125%; }
}

@keyframes vipCrownBob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-2px) rotate(5deg); }
}

@keyframes vipTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(22deg); }
}

/* ---------- 6. Ana menü ---------- */
#flow .main-menu-accountbar {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 12px;
  gap: 10px;
}

#flow .main-menu-avatar {
  border: 2px solid rgba(0, 255, 135, 0.5);
  box-shadow: 0 0 14px rgba(0, 255, 135, 0.25);
}

#flow .main-menu-player-name {
  background: linear-gradient(90deg, #00ff87, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* Cüzdan çipleri: büyük, ikonlu, neon/altın vurgulu */
#flow .wallet-chip {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  min-height: 48px;
}

#flow .wallet-chip strong {
  font-family: "Orbitron", sans-serif !important;
  font-size: 1.02rem;
  color: var(--ui-gold);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

#flow #menuDiamondsChip strong {
  color: #7dd3fc;
  text-shadow: 0 0 10px rgba(125, 211, 252, 0.4);
}

/* Enerji barı: dolum shimmer efekti */
#flow #menuEnergySegments {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

#flow #menuEnergySegments::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
  left: -50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: uiEnergyShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* Ana menü istatistik çipleri */
#flow .menu-stats-info-chip {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 255, 135, 0.25) !important;
  background: rgba(0, 255, 135, 0.05) !important;
  min-height: 48px;
}

/* "Hemen Oyna" (dinamik menünün ilk butonu) sürekli hafif pulse */
#flow #dynamicMenuContainer > button:first-child:not(.resume-match) {
  animation: uiHeroPulse 2.6s ease-in-out infinite;
}

/* ---------- 6.5 İkon iyileştirmeleri (SVG rozet + renk kodu + glow) ---------- */
/* Ana menü grid butonları: ikon, renkli cam rozet içinde.
   style.css'te id'li + !important boyut kuralları olduğundan aynı güçte ezilir. */
#flow .menu-icon-btn .menu-icon {
  --icon-c: #00ff87;
}

#flow #screenMainMenu .menu-icon-btn .menu-icon,
#flow .menu-icon-btn .menu-icon {
  width: 38px !important;
  height: 38px !important;
  padding: 8px !important;
  box-sizing: border-box;
  border-radius: 12px;
  color: var(--icon-c);
  background: color-mix(in srgb, var(--icon-c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--icon-c) 28%, transparent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--icon-c) 55%, transparent));
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

#flow .menu-icon-btn:hover .menu-icon {
  transform: scale(1.12);
  background: color-mix(in srgb, var(--icon-c) 18%, transparent);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--icon-c) 80%, transparent));
}

/* İkon başına renk kodu */
#flow .menu-icon[data-icon="private-room"] { --icon-c: #f59e0b; }
#flow .menu-icon[data-icon="team"]         { --icon-c: #fb7185; }
#flow .menu-icon[data-icon="leaderboard"]  { --icon-c: #ffd700; }
#flow .menu-icon[data-icon="inventory"]    { --icon-c: #fb923c; }
#flow .menu-icon[data-icon="market"]       { --icon-c: #00ff87; }
#flow .menu-icon[data-icon="friends"]      { --icon-c: #f472b6; }
#flow .menu-icon[data-icon="settings"]     { --icon-c: #94a3b8; }
#flow .menu-icon[data-icon="profile"]      { --icon-c: #60a5fa; }
#flow .menu-icon[data-icon="chat"]         { --icon-c: #a78bfa; }
#flow .menu-icon[data-icon="mail"]         { --icon-c: #38bdf8; }
#flow .menu-icon[data-icon="play"]         { --icon-c: #00ff87; }

/* Hero buton ikonları: beyaz cam rozet + glow */
#flow .menu-hero-btn .hero-icon {
  width: 32px;
  height: 32px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45));
  transition: transform 0.2s ease;
}

#flow .menu-hero-btn:hover .hero-icon {
  transform: scale(1.1) rotate(-4deg);
}

/* Cüzdan / enerji ikonları */
#flow .wallet-icon {
  width: 18px;
  height: 18px;
}

#flow .wallet-chip [data-icon="coin"]    { color: #ffd700; filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)); }
#flow .wallet-chip [data-icon="diamond"] { color: #7dd3fc; filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.6)); }
#flow .main-menu-energy [data-icon="energy"] { color: #00ff87; filter: drop-shadow(0 0 6px rgba(0, 255, 135, 0.6)); }

/* Mod kartı ikonları: renkli cam rozet */
#flow .mode-card .mode-card-icon {
  width: 46px;
  height: 46px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 13px;
  background: rgba(0, 255, 135, 0.1);
  border: 1px solid rgba(0, 255, 135, 0.25);
  color: #00ff87;
  transition: transform 0.25s ease;
}

#flow .pvp-mode-card .mode-card-icon {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.25);
  color: #22d3ee;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.55));
}

#flow .ranked-mode-card .mode-card-icon {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.25);
  color: #ffd700;
}

#flow .mode-card:hover .mode-card-icon {
  transform: scale(1.12) rotate(-5deg);
}

/* Sosyal sekme ve bölüm başlığı ikonları */
#flow .social-hub-tab .nav-icon {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 5px rgba(0, 255, 135, 0.45));
}

#flow .play-section-title .section-title-icon {
  color: #00ff87;
  filter: drop-shadow(0 0 6px rgba(0, 255, 135, 0.5));
}

/* Alt istatistik çipleri ikonları */
#flow .menu-stats-info-chip .btn-icon,
#flow .menu-stats-info-chip svg {
  filter: drop-shadow(0 0 5px rgba(0, 255, 135, 0.4));
}

/* Geri butonu ikonu: hover'da sola kayma mikro-animasyonu */
#flow .flow-back-btn .btn-icon {
  transition: transform 0.2s ease;
}

#flow .flow-back-btn:hover .btn-icon {
  transform: translateX(-4px);
}

/* VIP taç emojisi parıltısı */
#flow .menu-vip-btn span,
#flow #menuVipLevelCard span {
  text-shadow: 0 0 10px rgba(120, 70, 0, 0.45);
}

/* Lobi aksiyon butonu ikonları (oyun sahnesine dokunmadan, sadece lobi) */
.team-lobby-overlay .team-lobby-actions .btn-icon {
  filter: drop-shadow(0 0 6px rgba(0, 255, 135, 0.4));
}

/* ---------- 7. Profil ---------- */
#flow .profile-screen h2 {
  font-size: 1.5rem;
}

#flow .profile-screen .main-menu-player-name,
#flow #publicProfileScreenBody h2 {
  background: linear-gradient(90deg, #00ff87, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 8. Market & VIP paneli ---------- */
#flow .market-item {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#flow .market-item:hover {
  border-color: rgba(0, 255, 135, 0.4) !important;
  box-shadow: 0 0 22px rgba(0, 255, 135, 0.18), 0 10px 26px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-3px) !important;
}

#flow .market-item .market-item-title {
  font-family: "Rajdhani", sans-serif !important;
  font-weight: 700 !important;
}

/* VIP paneli: kraliyet teması (koyu mor + altın) */
#vipPrivilegesModal .confirm-card,
#vipPrivilegesModal > div {
  background: linear-gradient(160deg, #1a0b2e 0%, #120820 60%, #1c1030 100%) !important;
  border: 1px solid rgba(255, 215, 0, 0.4) !important;
  box-shadow: 0 0 34px rgba(255, 215, 0, 0.18), 0 18px 48px rgba(0, 0, 0, 0.6) !important;
  border-radius: 18px !important;
}

#vipPrivilegesModal h2,
#vipPrivilegesModal h3 {
  background: linear-gradient(90deg, #ffd700, #fff4c2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ui-gold-flash {
  animation: uiGoldPulse 1.6s ease-in-out 2;
}

/* ---------- 9. Sosyal / lobi kartları ---------- */
.team-lobby-card,
.team-lobby-popup-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#flow .social-hub-screen,
#flow .friends-screen,
#flow .leaderboard-screen {
  border-radius: 16px !important;
}

/* ---------- 10. Ripple (dokunma geri bildirimi) ---------- */
.ui-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 255, 135, 0.35);
  transform: scale(0);
  animation: uiRipple 0.55s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

/* ---------- 11. Mobil dokunmatik ---------- */
#flow,
#flow .flow-card,
.team-lobby-popup-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#flow .flow-card {
  overflow-x: hidden;
  max-width: 100%;
}

#flow .social-hub-tab,
#flow .auth-tabs button,
#flow .menu-stats-social-btn {
  min-height: 48px;
}

/* ---------- 12. Animasyonlar ---------- */
/* Ekran açılış stagger'ı (ui-theme.js ekler/kaldırır) */
.ui-screen-enter > * {
  animation: uiCardIn 0.45s ease-out backwards;
}
.ui-screen-enter > *:nth-child(1) { animation-delay: 0.04s; }
.ui-screen-enter > *:nth-child(2) { animation-delay: 0.14s; }
.ui-screen-enter > *:nth-child(3) { animation-delay: 0.24s; }
.ui-screen-enter > *:nth-child(4) { animation-delay: 0.34s; }
.ui-screen-enter > *:nth-child(5) { animation-delay: 0.44s; }
.ui-screen-enter > *:nth-child(6) { animation-delay: 0.54s; }
.ui-screen-enter > *:nth-child(n+7) { animation-delay: 0.6s; }

@keyframes uiCardIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes uiGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes uiGoldPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 215, 0, 0.25); }
  50% { box-shadow: 0 0 44px rgba(255, 215, 0, 0.65); }
}

@keyframes uiHeroPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(0, 255, 135, 0.25); transform: scale(1); }
  50% { box-shadow: 0 0 30px rgba(0, 255, 135, 0.5); transform: scale(1.015); }
}

@keyframes uiRipple {
  to { transform: scale(3.2); opacity: 0; }
}

@keyframes uiEnergyShimmer {
  0% { left: -50%; }
  60%, 100% { left: 110%; }
}

/* ---------- 13. Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  #flow::before,
  #flow #dynamicMenuContainer > button:first-child,
  #flow #menuEnergySegments::after,
  .ui-screen-enter > *,
  #flow .menu-vip-btn::before,
  #flow .menu-vip-btn .vip-crown,
  #flow .menu-vip-btn .vip-spark,
  .ui-gold-flash,
  .ui-ripple {
    animation: none !important;
  }
}

/* ---------- 14. Modallar ve Arka Plan Opaklık Özelleştirmeleri ---------- */
/* Fullscreen modal backdrop overlay: Arkadaki parlaklığı azaltmak için koyulaştır ve bulanıklaştır */
.confirm-modal {
  background: rgba(2, 6, 23, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Modal kartları: Arkadaki yoğun ışıltının yazıları ezmesini engellemek için daha koyu ve opak yüzey */
.confirm-card:not(#vipPrivilegesModal .confirm-card) {
  background: rgba(9, 15, 29, 0.78) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 240, 255, 0.15) !important;
}