/* ============================================================
   SahaX MAÇ EKRANI HUD TEMASI v2 (match-hud.css)
   style.css'ten SONRA yüklenir; yalnız maç içi HUD görsellerini
   hedefler. Boyut/konum/işlev DEĞİŞMEZ — salt görsel katman.
   Kaldırmak = index.html'deki <link>'i silmek.
   Tasarım dili: koyu lacivert cam + tekil aksan renkleri +
   1.5px ışık kenarı + yumuşak derinlik gölgesi.
   ============================================================ */

:root {
  --sx-glass: rgba(8, 13, 28, 0.58);
  --sx-glass-border: rgba(255, 255, 255, 0.16);
  --sx-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
  --sx-cyan: #38bdf8;
  --sx-magenta: #ff2bd6;
  --sx-amber: #fbbf24;
  --sx-violet: #a78bfa;
  --sx-emerald: #00ff87;
  --sx-gold: #ffd166;
}

/* ---------- 1. Skorboard: cam kapsül ---------- */
.match-bar {
  background: var(--sx-glass) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--sx-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--sx-glass-shadow), 0 0 18px rgba(0, 229, 255, 0.06) !important;
}

.score {
  border-radius: 10px !important;
  background: rgba(2, 6, 23, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.score.blue {
  color: var(--team-home-bright, #6cf7ff);
  box-shadow: inset 0 -2px 0 rgba(var(--team-home-rgb, 0,229,255), 0.55);
}

.score.red {
  color: var(--team-away-bright, #ff6fdb);
  box-shadow: inset 0 -2px 0 rgba(var(--team-away-rgb, 255,43,214), 0.55);
}

.match-clock {
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(255, 209, 102, 0.22) !important;
  border-radius: 10px !important;
  color: var(--sx-gold) !important;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.35);
}

/* Skorboard sağındaki ping + oda çipi: cam kapsül */
.match-meta {
  background: var(--sx-glass);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 5px 12px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

/* ---------- 2. Durum çipi ("Basliyor: 2" / durum metni) ---------- */
.hud {
  background: var(--sx-glass) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 3px solid var(--team-home, #00E5FF) !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32) !important;
}

/* ---------- 3. Gol anı efektleri ---------- */
.match-bar.goal-pulse {
  animation: sxGoalPulse 0.9s cubic-bezier(0.22, 1.4, 0.36, 1) 1;
}

@keyframes sxGoalPulse {
  0% { transform: scale(1); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38); }
  25% { transform: scale(1.1); box-shadow: 0 0 34px rgba(255, 209, 102, 0.55); }
  55% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

#gameCanvas.goal-shake {
  animation: sxGoalShake 0.45s linear 1;
}

@keyframes sxGoalShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 3px); }
  30% { transform: translate(5px, -4px); }
  45% { transform: translate(-4px, -3px); }
  60% { transform: translate(4px, 3px); }
  75% { transform: translate(-2px, 2px); }
  90% { transform: translate(2px, -1px); }
}

/* ---------- 4. Aksiyon butonları: profesyonel cam kit ---------- */
/* Ortak taban: koyu cam disk + ince ışık kenarı + aksan halkası */
.dribble-button,
.radial-emoji-button,
.voice-talk-button {
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.10), transparent 58%),
    var(--sx-glass) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1.5px solid var(--sx-glass-border) !important;
  color: #e8edf5 !important;
  box-shadow: var(--sx-glass-shadow) !important;
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease !important;
}

.dribble-button .action-btn-icon,
.radial-emoji-button .action-btn-icon,
.voice-talk-button .action-btn-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  /* Yeni ikonlar dolgulu (filled); style.css'in genel 2px konturunu kapat */
  stroke: none !important;
  stroke-width: 0 !important;
  fill: currentColor;
}

.dribble-button .action-btn-label,
.radial-emoji-button .action-btn-label,
.voice-talk-button .action-btn-label {
  font-weight: 800;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Aksan kimlikleri (ikon + kenar vurgusu) */
.dribble-button { color: #bae6fd !important; }
.dribble-button.ready {
  border-color: rgba(56, 189, 248, 0.65) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25), var(--sx-glass-shadow) !important;
}
.dribble-button.active {
  border-color: rgba(0, 255, 135, 0.9) !important;
  color: #bbf7d0 !important;
  box-shadow: 0 0 26px rgba(0, 255, 135, 0.5), var(--sx-glass-shadow) !important;
}
.dribble-button.cooldown { opacity: 0.8; }

.radial-emoji-button { color: #fde68a !important; }
.radial-emoji-button:active {
  border-color: rgba(251, 191, 36, 0.75) !important;
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.4), var(--sx-glass-shadow) !important;
}

.voice-talk-button { color: #ddd6fe !important; }
.voice-talk-button:active,
.voice-talk-button.talking,
.voice-talk-button.active {
  border-color: rgba(167, 139, 250, 0.85) !important;
  box-shadow: 0 0 26px rgba(167, 139, 250, 0.5), var(--sx-glass-shadow) !important;
}

.dribble-button:active:not(:disabled),
.radial-emoji-button:active,
.voice-talk-button:active {
  transform: scale(0.92) !important;
}

/* Hızlanma cooldown dolum halkası (--cd: 0 -> 1, JS set eder) */
.dribble-button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(var(--sx-gold) calc(var(--cd, 1) * 360deg), rgba(255, 255, 255, 0.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.dribble-button.cooldown::after { opacity: 1; }

/* Zoom butonu: aynı cam dil, zümrüt aksan */
.zoom-toggle-button {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.10), transparent 58%),
    var(--sx-glass) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
  border: 1.5px solid rgba(0, 255, 135, 0.5) !important;
  box-shadow: 0 0 12px rgba(0, 255, 135, 0.22), var(--sx-glass-shadow) !important;
}

.zoom-toggle-button:hover {
  border-color: rgba(0, 255, 135, 0.85) !important;
  box-shadow: 0 0 20px rgba(0, 255, 135, 0.45), var(--sx-glass-shadow) !important;
}

/* ---------- 5. Yan menü: cam panel + durum renkleri ---------- */
body[data-screen="game"] .mobile-nav-right {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    var(--sx-glass) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--sx-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--sx-glass-shadow) !important;
}

body[data-screen="game"] .mobile-nav-right button {
  color: #b6c2d4;
  transition: background 0.15s ease, color 0.15s ease;
}

body[data-screen="game"] .mobile-nav-right button:hover,
body[data-screen="game"] .mobile-nav-right button:active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: none;
}

body[data-screen="game"] .mobile-nav-right button.nav-exit {
  color: #fda4af;
}

body[data-screen="game"] .mobile-nav-right button.nav-exit:hover,
body[data-screen="game"] .mobile-nav-right button.nav-exit:active {
  background: rgba(244, 63, 94, 0.14);
  color: #fecdd3;
}

/* Maç oynanırken ince ikon şeridi (JS .nav-slim ekler) */
.mobile-nav-right { transition: opacity 0.2s ease; }
.mobile-nav-right.nav-slim { opacity: 0.82; }
.mobile-nav-right.nav-slim:hover { opacity: 1; }

.mobile-nav-right.nav-slim button {
  font-size: 0 !important;
  line-height: 0 !important;
  gap: 0 !important;
  letter-spacing: 0 !important;
}

.mobile-nav-right.nav-slim button .nav-icon { margin: 0 auto; }

/* ============ Katlanır ☰ menü — maç menüsü (eski katlanır buton) ============
   Maçta menü tek ☰ butonuna iner; ☰'ye dokununca dikey ikon+etiket şeridi açılır.
   Menü/lobide (nav-slim yok) tüm butonlar eskisi gibi görünür; ☰ gizli. */
.mobile-nav-right .nav-toggle { display: none; }
/* ☰ slim-değilken (lobi/menü) HER ZAMAN gizli — oyun ekranındaki genel buton kuralını da ez. */
.mobile-nav-right:not(.nav-slim) .nav-toggle { display: none !important; }
.mobile-nav-right .nav-drawer-body { display: contents; } /* sarmalayıcı düzeni bozmaz — butonlar kolona akar */

/* Maçta: nav OPAK koyu (saha yeşili sızıp ton bozmasın), dikey kolon korunur */
body[data-screen="game"] .mobile-nav-right.nav-slim {
  background: rgba(9, 14, 26, 0.95) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5) !important;
}

/* ☰ toggle butonu (şeridin üstünde) */
body[data-screen="game"] .mobile-nav-right.nav-slim .nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: calc(var(--game-nav-width) - 8px) !important; height: 34px !important; min-height: 0 !important;
  padding: 2px !important; border-radius: 10px;
}
body[data-screen="game"] .mobile-nav-right.nav-slim .nav-toggle .nav-icon {
  width: 22px !important; height: 22px !important;
}
/* Toggle göstergesi: KAPALIYKEN ☰ (menüyü aç), AÇIKKEN ▴ kapat-oku → "2 menü" görüntüsü biter */
.nav-toggle-chevron { display: none; }
.nav-toggle-chevron {
  width: 11px; height: 11px; box-sizing: border-box;
  border-right: 2.5px solid #cbd5e1; border-bottom: 2.5px solid #cbd5e1;
  transform: rotate(-135deg); margin-top: 4px; /* yukarı ok = kapat */
}
body[data-screen="game"] .mobile-nav-right.nav-slim:not(.nav-collapsed) .nav-toggle .nav-icon { display: none !important; }
body[data-screen="game"] .mobile-nav-right.nav-slim:not(.nav-collapsed) .nav-toggle .nav-toggle-chevron { display: inline-block; }

/* Katlıyken sadece ☰ görünür (aksiyon butonları gizli) */
body[data-screen="game"] .mobile-nav-right.nav-slim.nav-collapsed .nav-drawer-body { display: none !important; }

/* Açık şerit butonları: BÜYÜK ikon + ALTINDA etiket (isim) */
body[data-screen="game"] .mobile-nav-right.nav-slim .nav-drawer-body button {
  font-size: 9.5px !important; line-height: 1.05 !important;
  font-weight: 700 !important; letter-spacing: 0.2px !important;
  gap: 3px !important;
  height: auto !important; min-height: 44px !important;
  padding: 6px 2px !important;
}
body[data-screen="game"] .mobile-nav-right.nav-slim .nav-drawer-body button .nav-icon {
  width: 22px !important; height: 22px !important;
}

/* ---------- 6. Joystickler: cam halka + neon topuz ----------
   Boyut/konum/opaklık kullanıcı ayarlarından (CSS var) gelir, DOKUNULMAZ.
   Yalnız doku: çift halka görünümü + derinlik + topuz degrade/glow. */
.mobile-joystick {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.14), rgba(2, 6, 23, 0.30) 62%),
    radial-gradient(circle at center, transparent 64%, rgba(255, 255, 255, 0.07) 66%, transparent 70%),
    rgba(4, 9, 22, 0.34);
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.38);
}

.joystick-knob {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.4), transparent 46%),
    linear-gradient(160deg, #3b82f6, #1d4ed8) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 0 16px rgba(59, 130, 246, 0.55),
    0 8px 20px rgba(2, 6, 23, 0.45) !important;
}

.mobile-joystick.active .joystick-knob {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.45), transparent 46%),
    linear-gradient(160deg, #60a5fa, #2563eb) !important;
  box-shadow:
    0 0 22px rgba(96, 165, 250, 0.7),
    0 8px 20px rgba(2, 6, 23, 0.45) !important;
}

/* ============================================================
   7. MENÜ EKRANLARI — yerleşim düzeltmeleri
   (maç HUD'ı değil; bu dosya en son yüklendiği için burada toplandı)
   ============================================================ */

/* 7a. Sıralama Seçimi: kartlar panelin TAM genişliğine yayılsın */
#screenRankedChoice:not(.hidden) .quick-play-grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: stretch !important;
  align-content: center !important;
  grid-auto-columns: minmax(0, 1fr) !important;
}

#screenRankedChoice:not(.hidden) .mode-card,
#screenQuickPlay:not(.hidden) .mode-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* 7b. Takım ekranı: üç kart dikeyde ortalansın (yalnız ana kart görünümünde) */
#screenTeam:not(.hidden) #teamBody:has(#teamCreateCard) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#screenTeam:not(.hidden) #teamBody:has(#teamCreateCard) .quick-play-grid {
  width: min(100%, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-content: center !important;
}

/* ============================================================
   8. MENÜ TEMASI — "SİNEMATİK DİLİM" (kart mantığı terk edildi)
   Hedef: Sıralama Seçimi, Özel Oda, Takım.
   Fikir: kutu kart yok — eğik kesilmiş, tam-kanama fotoğraf dilimleri;
   dev kontur numaralar, tipografi ağırlıklı, keskin köşeler.
   Fotoğraflar: assets/menu/*.jpg (yoksa koyu zemin kalır).
   ============================================================ */

#screenRankedChoice .quick-play-grid,
#screenMultiplayer .quick-play-grid,
#screenQuickPlay .quick-play-grid,
#screenTeam .team-home-grid {
  gap: 16px !important;
  padding: 0 6px !important;
}

/* --- Dilim gövdesi --- */
#screenRankedChoice .mode-card,
#screenMultiplayer .mode-card,
#screenQuickPlay .mode-card,
#screenTeam .team-home-grid .mode-card {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #060b16 !important;
  padding: clamp(14px, 3dvh, 22px) clamp(16px, 2vw, 26px) !important;
  transform: skewX(-4deg) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55) !important;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease !important;
}

/* İçerik dik dursun (gövdenin eğimini geri al) */
#screenRankedChoice .mode-card > *,
#screenMultiplayer .mode-card > *,
#screenQuickPlay .mode-card > *,
#screenTeam .team-home-grid .mode-card > * {
  position: relative;
  z-index: 2;
  transform: skewX(4deg);
}

/* Fotoğraf: eğimi telafi eden geniş kadraj */
#screenRankedChoice .mode-card::before,
#screenMultiplayer .mode-card::before,
#screenQuickPlay .mode-card::before,
#screenTeam .team-home-grid .mode-card::before {
  content: "";
  position: absolute;
  inset: -6% -12%;
  z-index: 0;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  transform: skewX(4deg) scale(1.04);
  transform-origin: center;
  opacity: 0.62;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  pointer-events: none;
}

/* Perde: alttan yukarı koyu, üstte hafif renk yıkaması */
#screenRankedChoice .mode-card::after,
#screenMultiplayer .mode-card::after,
#screenQuickPlay .mode-card::after,
#screenTeam .team-home-grid .mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 8, 18, 0.10) 0%, rgba(4, 8, 18, 0.62) 46%, rgba(4, 8, 18, 0.96) 100%),
    linear-gradient(120deg, var(--accWash, rgba(56, 189, 248, 0.14)) 0%, transparent 46%);
  pointer-events: none;
}

#screenRankedChoice .mode-card:hover,
#screenMultiplayer .mode-card:hover,
#screenQuickPlay .mode-card:hover,
#screenTeam .team-home-grid .mode-card:hover {
  transform: skewX(-4deg) translateY(-6px) !important;
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.62), 0 0 0 1px var(--acc, #38bdf8) !important;
}

#screenRankedChoice .mode-card:hover::before,
#screenMultiplayer .mode-card:hover::before,
#screenQuickPlay .mode-card:hover::before,
#screenTeam .team-home-grid .mode-card:hover::before {
  transform: skewX(4deg) scale(1.13);
  opacity: 0.78;
}

#screenRankedChoice .mode-card:active,
#screenMultiplayer .mode-card:active,
#screenQuickPlay .mode-card:active,
#screenTeam .team-home-grid .mode-card:active {
  transform: skewX(-4deg) translateY(-2px) scale(0.99) !important;
}

/* Alt kenarda aksan şeridi */
#screenRankedChoice .mode-card > .mode-card-footer::after,
#screenMultiplayer .mode-card > .mode-card-footer::after,
#screenQuickPlay .mode-card > .mode-card-footer::after,
#screenTeam .team-home-grid .mode-card > .mode-card-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * clamp(14px, 3dvh, 22px));
  height: 4px;
  background: var(--acc, #38bdf8);
  opacity: 0.9;
}

/* Eski süs katmanları ve uzun metinler dışarıda */
#screenRankedChoice .mode-card-glow,
#screenMultiplayer .mode-card-glow,
#screenQuickPlay .mode-card-glow,
#screenTeam .team-home-grid .mode-card-glow,
#screenRankedChoice .mode-card-desc,
#screenMultiplayer .mode-card-desc,
#screenQuickPlay .mode-card-desc,
#screenTeam .team-home-grid .mode-card-desc,
#screenRankedChoice .mode-card-icon,
#screenMultiplayer .mode-card-icon,
#screenQuickPlay .mode-card-icon,
#screenTeam .team-home-grid .mode-card-icon {
  display: none !important;
}

/* --- Üst satır: dev kontur numara + durum etiketi --- */
#screenRankedChoice .mode-card-header,
#screenMultiplayer .mode-card-header,
#screenQuickPlay .mode-card-header,
#screenTeam .team-home-grid .mode-card-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Numara kaldırıldı; üst satırda yalnız durum etiketi sağda durur */
#screenRankedChoice .mode-card-header,
#screenMultiplayer .mode-card-header,
#screenQuickPlay .mode-card-header,
#screenTeam .team-home-grid .mode-card-header {
  justify-content: flex-end !important;
}

#screenRankedChoice .mode-card-badge,
#screenMultiplayer .mode-card-badge,
#screenQuickPlay .mode-card-badge,
#screenTeam .team-home-grid .mode-card-badge {
  background: transparent !important;
  border: 0 !important;
  border-top: 2px solid var(--acc, #38bdf8) !important;
  border-radius: 0 !important;
  padding: 7px 0 0 0 !important;
  color: var(--acc, #38bdf8) !important;
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Başlık bloğu --- */
#screenRankedChoice .mode-card-body,
#screenMultiplayer .mode-card-body,
#screenQuickPlay .mode-card-body,
#screenTeam .team-home-grid .mode-card-body {
  margin-top: auto !important;
}

#screenRankedChoice .mode-card-body h3,
#screenMultiplayer .mode-card-body h3,
#screenQuickPlay .mode-card-body h3,
#screenTeam .team-home-grid .mode-card-body h3 {
  font-family: "Orbitron", sans-serif !important;
  font-size: clamp(1.05rem, 4.6dvh, 1.85rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75);
}

#screenRankedChoice .mode-card-subtitle,
#screenMultiplayer .mode-card-subtitle,
#screenQuickPlay .mode-card-subtitle,
#screenTeam .team-home-grid .mode-card-subtitle {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  color: #93a4bd !important;
  margin: 0 !important;
}

/* --- Alt satır: aksiyon + nokta ayraçlı meta --- */
#screenRankedChoice .mode-card-footer,
#screenMultiplayer .mode-card-footer,
#screenQuickPlay .mode-card-footer,
#screenTeam .team-home-grid .mode-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: clamp(10px, 2.4dvh, 18px) !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

#screenRankedChoice .mode-card-footer > span:first-child,
#screenMultiplayer .mode-card-footer > span:first-child,
#screenQuickPlay .mode-card-footer > span:first-child,
#screenTeam .team-home-grid .mode-card-footer > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase;
  transition: transform 0.22s ease, color 0.22s ease;
}

#screenRankedChoice .mode-card:hover .mode-card-footer > span:first-child,
#screenMultiplayer .mode-card:hover .mode-card-footer > span:first-child,
#screenQuickPlay .mode-card:hover .mode-card-footer > span:first-child,
#screenTeam .team-home-grid .mode-card:hover .mode-card-footer > span:first-child {
  transform: translateX(6px);
  color: var(--acc, #38bdf8) !important;
}

#screenRankedChoice .mode-card-tags,
#screenMultiplayer .mode-card-tags,
#screenQuickPlay .mode-card-tags,
#screenTeam .team-home-grid .mode-card-tags {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

#screenRankedChoice .mode-card-tags span,
#screenMultiplayer .mode-card-tags span,
#screenQuickPlay .mode-card-tags span,
#screenTeam .team-home-grid .mode-card-tags span {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #7c8ca6 !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  white-space: nowrap;
}

#screenRankedChoice .mode-card-tags span + span::before,
#screenMultiplayer .mode-card-tags span + span::before,
#screenQuickPlay .mode-card-tags span + span::before,
#screenTeam .team-home-grid .mode-card-tags span + span::before {
  content: "/";
  margin: 0 8px;
  color: var(--acc, #38bdf8);
  opacity: 0.6;
}

/* --- Ekran başlıkları: ince, geniş harf aralıklı --- */
#screenRankedChoice > h2,
#screenMultiplayer > h2 {
  font-family: "Orbitron", sans-serif !important;
  letter-spacing: 5px !important;
  text-transform: uppercase;
}

/* --- Dilim kimlikleri: numara + aksan + fotoğraf --- */
#screenRankedChoice .ranked-mode-card {
  --num: "01"; --acc: #ffd166; --accWash: rgba(255, 209, 102, 0.16);
  --img: url("assets/menu/ranked-solo.jpg");
}

#screenRankedChoice .pvp-mode-card {
  --num: "02"; --acc: #22d3ee; --accWash: rgba(34, 211, 238, 0.16);
  --img: url("assets/menu/ranked-cup.jpg");
}

#screenMultiplayer .ai-mode-card {
  --num: "01"; --acc: #34d399; --accWash: rgba(52, 211, 153, 0.16);
  --img: url("assets/menu/room-join.jpg");
}

#screenMultiplayer .pvp-mode-card {
  --num: "02"; --acc: #a78bfa; --accWash: rgba(167, 139, 250, 0.16);
  --img: url("assets/menu/room-create.jpg");
}

#screenTeam #teamCreateCard {
  --num: "01"; --acc: #fb923c; --accWash: rgba(251, 146, 60, 0.16);
  --img: url("assets/menu/team-create.jpg");
}

#screenTeam #teamMineCard {
  --num: "02"; --acc: #34d399; --accWash: rgba(52, 211, 153, 0.16);
  --img: url("assets/menu/team-mine.jpg");
}

#screenTeam #teamListCard {
  --num: "03"; --acc: #ffd166; --accWash: rgba(255, 209, 102, 0.16);
  --img: url("assets/menu/team-list.jpg");
}

/* Hemen Oyna dilimleri */
#screenQuickPlay #quickAiTrainingButton {
  --acc: #34d399; --accWash: rgba(52, 211, 153, 0.16);
  --img: url("assets/menu/play-ai.jpg");
}

#screenQuickPlay #quickClassicButton {
  --acc: #22d3ee; --accWash: rgba(34, 211, 238, 0.16);
  --img: url("assets/menu/play-classic.jpg");
}

#screenQuickPlay #quickRankedButton {
  --acc: #ffd166; --accWash: rgba(255, 209, 102, 0.16);
  --img: url("assets/menu/play-ranked.jpg");
}

/* ------------------------------------------------------------
   8b. Yerleşim isteği: dilimler içeriğe göre yükselsin (panel
   yüksekliğine yayılmasın), Sıralama'da sola yaslı ve dar dursun.
   NOT: style.css'teki yatay-ekran kuralları `:not(.hidden)` taşıdığı
   için özgüllükte öndeydi; burada aynı özgüllükle geri alınıyor.
   ------------------------------------------------------------ */

/* Dilimler dikeyde paneli doldursun — aşağıya doğru büyürler */
#screenRankedChoice:not(.hidden) .quick-play-grid,
#screenMultiplayer:not(.hidden) .quick-play-grid,
#screenQuickPlay:not(.hidden) .quick-play-grid {
  align-items: stretch !important;
  align-content: stretch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#screenRankedChoice:not(.hidden) .mode-card,
#screenQuickPlay:not(.hidden) .mode-card,
#screenMultiplayer:not(.hidden) .mode-card,
#screenQuickPlay:not(.hidden) .mode-card {
  height: 100% !important;
  align-self: stretch !important;
  justify-content: space-between !important;
}

/* Özel Oda paneli dikey akışa geçsin ki ızgara boş alanı yesin */
#screenMultiplayer:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
}

/* Her üç ekranda ızgara yatayda TAM genişlik + ortalı.
   NOT: style.css'te `.quick-play-grid { max-width: 740px }` kelepçesi var ve
   ekran boyutuna göre farklı ızgara tanımları devreye giriyor; burada grid
   yerine esnek satır düzenine geçilip dilimler eşit paylaştırılıyor. */
#screenRankedChoice:not(.hidden) .quick-play-grid,
#screenMultiplayer:not(.hidden) .quick-play-grid,
#screenQuickPlay:not(.hidden) .quick-play-grid,
#screenTeam:not(.hidden) .team-home-grid {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  justify-content: center !important;
  overflow: visible !important;
  padding-left: clamp(8px, 2vw, 34px) !important;
  padding-right: clamp(8px, 2vw, 34px) !important;
  box-sizing: border-box !important;
}

#screenRankedChoice:not(.hidden) .quick-play-grid > .mode-card,
#screenMultiplayer:not(.hidden) .quick-play-grid > .mode-card,
#screenQuickPlay:not(.hidden) .quick-play-grid > .mode-card,
#screenTeam:not(.hidden) .team-home-grid > .mode-card {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Panel içeriği de ortalı: başlık ve ızgara aynı eksende */
#screenRankedChoice:not(.hidden),
#screenMultiplayer:not(.hidden) {
  align-items: stretch !important;
}

/* Sıralama ekranında tema tekrar üste alınıyor */
#screenRankedChoice:not(.hidden) .mode-card-desc,
#screenQuickPlay:not(.hidden) .mode-card-desc,
#screenRankedChoice:not(.hidden) .mode-card-icon,
#screenQuickPlay:not(.hidden) .mode-card-icon {
  display: none !important;
}

#screenRankedChoice:not(.hidden) .mode-card-header,
#screenQuickPlay:not(.hidden) .mode-card-header {
  justify-content: flex-end !important;
  min-height: 0 !important;
}

#screenRankedChoice:not(.hidden) .mode-card-body h3,
#screenQuickPlay:not(.hidden) .mode-card-body h3 {
  font-family: "Orbitron", sans-serif !important;
  font-size: clamp(1.05rem, 4.6dvh, 1.75rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 6px 0 !important;
}

#screenRankedChoice:not(.hidden) .mode-card-subtitle,
#screenQuickPlay:not(.hidden) .mode-card-subtitle {
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  margin: 0 !important;
}

#screenRankedChoice:not(.hidden) .mode-card-footer,
#screenQuickPlay:not(.hidden) .mode-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-size: 0.74rem !important;
}

#screenRankedChoice:not(.hidden) .mode-card-tags span,
#screenQuickPlay:not(.hidden) .mode-card-tags span {
  padding: 0 !important;
  font-size: 0.58rem !important;
}

/* ============================================================
   9. ALT EKRAN ARKA PLANLARI — her bölüm kendi menü görselini taşır
   Ana menüdeki kutunun görseli, o kutuya girilen ekranın arka planı
   olur (hafif karartılmış). Görseller: assets/menu-*-hero.png
   ============================================================ */

#screenMultiplayer:not(.hidden),
#screenSpectator:not(.hidden),
#screenTeam:not(.hidden),
#screenRankedChoice:not(.hidden),
#screenRankedSoloHub:not(.hidden),
#screenRankedTeamHub:not(.hidden),
#screenLeaderboard:not(.hidden),
#screenFriends:not(.hidden),
#screenSocialHub:not(.hidden),
#screenMarket:not(.hidden),
#screenInventory:not(.hidden),
#screenQuickPlay:not(.hidden),
#screenPlaySetup:not(.hidden) {
  position: relative;
  isolation: isolate;
}

/* Arka plan GERÇEK background olarak veriliyor (pseudo katman değil):
   Liderlik/Arkadaşlar gibi kendi içinde kayan ekranlarda mutlak konumlu
   katman içerikle birlikte kayıyordu. `background-attachment: scroll`
   ile arka plan elemanın kutusuna sabitlenir, içerik üstünde kayar. */
#screenMultiplayer:not(.hidden),
#screenSpectator:not(.hidden),
#screenTeam:not(.hidden),
#screenRankedChoice:not(.hidden),
#screenRankedSoloHub:not(.hidden),
#screenRankedTeamHub:not(.hidden),
#screenLeaderboard:not(.hidden),
#screenFriends:not(.hidden),
#screenSocialHub:not(.hidden),
#screenLiveOps:not(.hidden),
#screenMarket:not(.hidden),
#screenInventory:not(.hidden),
#screenQuickPlay:not(.hidden),
#screenPlaySetup:not(.hidden),
#onlinePlayersModal:not(.hidden) .online-players-card {
  background-image:
    linear-gradient(180deg, rgba(4, 9, 20, 0.70) 0%, rgba(4, 9, 20, 0.82) 100%),
    var(--screen-art, none) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll, scroll !important;
}

/* Çevrim içi oyuncular penceresi de kendi görselini taşısın */
#onlinePlayersModal .online-players-card { --screen-art: url("assets/menu-stat-online.png"); }

/* Bölüm → menü görseli eşleşmesi */
#screenMultiplayer { --screen-art: url("assets/menu-room-hero.png"); }
#screenSpectator { --screen-art: url("assets/menu-room-hero.png"); }
#screenTeam { --screen-art: url("assets/menu-team-hero.png"); }
#screenRankedChoice { --screen-art: url("assets/menu-leaderboard-hero.png"); }
#screenRankedSoloHub { --screen-art: url("assets/menu-leaderboard-hero.png"); }
#screenRankedTeamHub { --screen-art: url("assets/menu-team-hero.png"); }
#screenLeaderboard { --screen-art: url("assets/menu-leaderboard-hero.png"); }
#screenFriends { --screen-art: url("assets/menu-friends-hero.png"); }
/* Sohbet butonu Sosyal Hub'ı açar → sohbet görseli (arkadaşlar değil) */
#screenSocialHub { --screen-art: url("assets/menu-stat-chat.png"); }
/* Günlük hediye butonu LiveOps ekranını açar → hediye görseli */
#screenLiveOps { --screen-art: url("assets/menu-stat-gift.png"); }
#screenMarket { --screen-art: url("assets/menu-market-hero.png"); }
#screenInventory { --screen-art: url("assets/menu-inventory-hero.png"); }
#screenQuickPlay { --screen-art: url("assets/menu-stadium-hero.png"); }

/* Hemen Oyna kartlarina girilince: o kartin kendi gorseli arka plan olur.
   Kurulum ekrani hem AI hem Klasik icin ayni ekran oldugundan mod, JS'te
   `data-play-art` olarak yaziliyor (openPlaySetup). */
#screenPlaySetup[data-play-art="ai"] { --screen-art: url("assets/menu/play-ai.jpg"); }
#screenPlaySetup[data-play-art="classic"] { --screen-art: url("assets/menu/play-classic.jpg"); }
#screenPlaySetup[data-play-art="ranked"] { --screen-art: url("assets/menu/play-ranked.jpg"); }
#screenPlaySetup[data-play-art="room"] { --screen-art: url("assets/menu-room-hero.png"); }

/* Sıralama Seçimi'ne Hemen Oyna'daki karttan girildiyse o kartin gorseli */
#screenRankedChoice[data-entry-art="quick-ranked"] { --screen-art: url("assets/menu/play-ranked.jpg"); }
#screenPlaySetup { --screen-art: url("assets/menu-stadium-hero.png"); }

/* ============================================================
   10. TAKIM YÖNETİMİ — sıfırdan "hub karo" teması
   Kart/dilim mantığı yok: her işlev, üretilmiş SVG görseli olan
   kare bir karo. Üstte durum rozeti, altta başlık, köşede ok.
   Görseller: assets/team/*.svg
   ============================================================ */

/* Izgara panelin boş alanını yesin ki karolar büyüsün */
#screenTeam:not(.hidden) #teamBody:has(.team-tile-grid) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.team-tile-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  /* `1fr` tek başına auto-yükseklikte satırları içeriğe büzüyordu → rozet ile
     başlık üst üste biniyordu. Taban yükseklik + kalan alanı paylaştırma. */
  grid-auto-rows: minmax(clamp(122px, 19dvh, 190px), 1fr) !important;
  gap: clamp(8px, 1.4vw, 14px) !important;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 12px 0 6px !important;
  box-sizing: border-box !important;
}

.team-tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  min-height: clamp(96px, 17dvh, 150px) !important;
  height: 100% !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  background: #0b1526 !important;
  overflow: hidden !important;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.team-tile:hover,
.team-tile:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(125, 211, 252, 0.55);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}

.team-tile:active {
  transform: translateY(-1px) scale(0.985);
}

/* Fotoğraf: karonun tamamını kaplar, alt kısım perdeyle koyulaşır */
.team-tile-art {
  position: absolute;
  inset: 0;
  background-image: var(--tile-art, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.85;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.team-tile:hover .team-tile-art {
  transform: scale(1.07);
}

/* Fotoğraftan başlığa yumuşak geçiş */
.team-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 24, 0.18) 0%, rgba(6, 12, 24, 0.55) 45%, rgba(6, 12, 24, 0.92) 100%);
  pointer-events: none;
}

.team-tile-meta {
  position: absolute;
  top: 9px;
  right: 9px;
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(6, 12, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  color: #e2e8f0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-tile-title {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 34px 14px 16px;
  color: #ffffff;
  font-family: "Rajdhani", "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0.4px;
  /* Uzun başlıklar kırpılmasın, gerekirse alt satıra dökülsün */
  white-space: normal;
  overflow-wrap: break-word;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.team-tile-go {
  position: absolute;
  right: 10px;
  bottom: 12px;
  z-index: 2;
  color: #7dd3fc;
  font-size: 0.9rem;
  font-weight: 900;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.team-tile:hover .team-tile-go {
  opacity: 1;
  transform: translateX(0);
}

/* Karo → görsel eşleşmesi */
.team-tile[data-art="management"] { --tile-art: url("assets/team/management.jpg"); }
.team-tile[data-art="members"] { --tile-art: url("assets/team/members.jpg"); }
.team-tile[data-art="training"] { --tile-art: url("assets/team/training.jpg"); }
.team-tile[data-art="chat"] { --tile-art: url("assets/team/chat.jpg"); }
.team-tile[data-art="tournaments"] { --tile-art: url("assets/team/tournaments.jpg"); }
.team-tile[data-art="treasury"] { --tile-art: url("assets/team/treasury.jpg"); }
.team-tile[data-art="market"] { --tile-art: url("assets/team/market.jpg"); }
.team-tile[data-art="matches"] { --tile-art: url("assets/team/matches.jpg"); }
.team-tile[data-art="leaderboard"] { --tile-art: url("assets/team/leaderboard.jpg"); }

/* ============================================================
   11. TAKIM YÖNETİMİ — yatay mobil için sekmeli tek ekran
   Uzun dikey akış yerine: solda sekme rayı, sağda tek panel.
   Yetkiler onay kutusu değil, dokunmatik dostu çipler.
   ============================================================ */

/* Panelin dikey alanı: ekran → gövde → sarmalayıcı zinciri esnek olmalı */
#screenTeam:not(.hidden):has(.tm-wrap) {
  display: flex !important;
  flex-direction: column !important;
}

#screenTeam:not(.hidden) #teamBody:has(.tm-wrap) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.tm-wrap {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}


/* Sol sekme rayı */
.tm-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 clamp(104px, 15vw, 150px);
  min-width: 0;
}

.tm-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(10, 17, 32, 0.72) !important;
  color: #93a4bd !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  text-align: left;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.tm-tabs button:hover {
  background: rgba(18, 28, 48, 0.9) !important;
  color: #e2e8f0 !important;
}

/* Seçili sekme: net yeşil — hangi bölümde olduğun ilk bakışta belli olsun.
   NOT: style.css'teki `#flow button { background ... !important }` kuralı
   (1,0,1) özgüllükte; buradaki seçici en az onun kadar spesifik olmalı. */
#flow .tm-tabs button.active,
#screenTeam .tm-tabs button.active {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  border: 1px solid #6ee7b7 !important;
  color: #04201a !important;
  box-shadow: inset 4px 0 0 #a7f3d0, 0 0 18px rgba(52, 211, 153, 0.45) !important;
}

#flow .tm-tabs button.active .tm-count,
#screenTeam .tm-tabs button.active .tm-count {
  background: rgba(4, 32, 26, 0.35) !important;
  color: #04201a !important;
}

#flow .tm-tabs button.tm-tab-danger.active,
#screenTeam .tm-tabs button.tm-tab-danger.active {
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%) !important;
  border: 1px solid #fda4af !important;
  color: #2b0410 !important;
  box-shadow: inset 4px 0 0 #fecdd3, 0 0 18px rgba(244, 63, 94, 0.42) !important;
}

.tm-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.22);
  color: #7dd3fc;
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
}

/* Sağ panel alanı — yalnız burası kayar */
.tm-panels {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.tm-panels > [data-tm-panel] { display: none; }
.tm-panels > [data-tm-panel].active { display: block; }

/* Kart bloğu */
.tm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.tm-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(10, 17, 32, 0.78);
}

.tm-card-wide { grid-column: span 2; }

.tm-card h4 {
  margin: 0;
  color: #ffffff;
  font-family: "Rajdhani", "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.tm-card p {
  margin: 0;
  color: #93a4bd;
  font-size: 0.78rem;
  line-height: 1.45;
}

.tm-card-danger {
  border-color: rgba(244, 63, 94, 0.35);
  background: rgba(30, 12, 20, 0.72);
}

.tm-card-danger h4 { color: #fda4af; }

/* Form alanları */
.tm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tm-field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tm-field-row .tm-field { flex: 1 1 130px; }

.tm-field label {
  color: #8b9bb4;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tm-input {
  width: 100%;
  min-height: 38px !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9px !important;
  background: rgba(4, 9, 20, 0.78) !important;
  color: #e2e8f0 !important;
  font-size: 0.82rem !important;
  font-weight: 600;
}

/* Butonlar */
.tm-btn {
  min-height: 40px !important;
  padding: 9px 16px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.18s ease;
}

.tm-btn:active { transform: scale(0.97); }
.tm-btn-sm { min-height: 34px !important; padding: 6px 12px !important; font-size: 0.72rem !important; }

.tm-btn-primary {
  background: linear-gradient(135deg, #22d3ee, #0ea5e9) !important;
  color: #04121f !important;
  align-self: flex-start;
}

.tm-btn-gold {
  background: linear-gradient(135deg, #fbbf24, #d4af37) !important;
  color: #1a1204 !important;
}

.tm-btn-ghost {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #cbd5e1 !important;
}

.tm-btn-danger {
  background: linear-gradient(135deg, #f43f5e, #b91c3c) !important;
  color: #ffffff !important;
  align-self: flex-start;
}

/* Üye kartı */
.tm-member {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(10, 17, 32, 0.78);
}

.tm-member-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tm-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #34d399) center / cover;
  display: grid;
  place-items: center;
  color: #04121f;
  font-weight: 900;
  font-size: 1rem;
}

.tm-member-id { display: flex; flex-direction: column; gap: 2px; flex: 1 1 120px; min-width: 0; }
.tm-member-id strong { color: #fff; font-size: 0.92rem; font-weight: 800; }

.tm-role {
  color: #8b9bb4;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.tm-role.is-assistant { color: #7dd3fc; }

.tm-role-select { width: auto !important; min-width: 130px; flex: 0 0 auto; }

/* Yetki çipleri */
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.tm-chip { position: relative; display: inline-flex; cursor: pointer; }
.tm-chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.tm-chip span {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #8b9bb4;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tm-chip input:checked + span {
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.6);
  color: #6ee7b7;
}

.tm-chip input:focus-visible + span { outline: 2px solid #38bdf8; outline-offset: 2px; }

.tm-member-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Dar ekranda sekme rayı üstte yatay şeride döner */
@media (max-width: 640px) {
  .tm-wrap { flex-direction: column; }
  .tm-tabs { flex-direction: row; flex: 0 0 auto; overflow-x: auto; }
  .tm-tabs button { min-height: 38px !important; }
  .tm-card-wide { grid-column: auto; }
}

/* 7c. Çıkış onayı: "Evet" tam genişlik ve daha büyük
   (Hayır butonu üstteki ✕'e taşındığı için tek buton ortada kalmalı) */
#exitConfirmModal .row {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

#exitConfirmModal #exitConfirmYes {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 560px !important;
  min-height: 62px !important;
  font-size: 1.16rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  border-radius: 12px !important;
}


/* ============================================================
   8. KOZMETIK DENEME PANELI (market "Ürünü Dene")
   Sadece room.cosmeticTrial odasinda gorunur.
   Konum: EKRANA sabit ve ORTALANMIS (position: fixed). Daha once
   #canvasWrap icinde `right: 8px` idi; canvas gorunur alandan tastigi
   icin panel ekranin disinda kaliyor ve sagi kesiliyordu.
   Katlaninca yukari, ince bir cubuga donusur; saha acilir.
   ============================================================ */
.trial-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: none;
  /* GECIS YOK: CSS basamaginda transition'lar satir ici !important'i bile ezer.
     Katlanma konumu JS'ten satir ici veriliyor; burada gecis olursa panel eski
     konumunda takili kaliyor. */
}
.trial-panel.hidden { display: none !important; }

/* Katlanmis: ekranin ustunde ince cubuk, saha tamamen gorunur. */
.trial-panel.collapsed {
  top: 6px;
  transform: translate(-50%, 0);
}
.trial-panel.collapsed .trial-panel-tabs,
.trial-panel.collapsed .trial-panel-items,
.trial-panel.collapsed .trial-panel-foot { display: none; }
.trial-panel.collapsed .trial-panel-body {
  max-height: none;
  width: auto;
  min-width: 190px;
}

.trial-panel-body {
  pointer-events: auto;
  width: min(340px, 92vw);
  max-height: min(76vh, 440px);
  display: flex;
  flex-direction: column;
  background: rgba(7, 15, 29, 0.95);
  border: 1.5px solid rgba(0, 255, 135, 0.5);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

/* Ac/kapat sekmesi artik baslikta; ayri yuzen buton yok. */
.trial-panel-toggle { display: none !important; }

.trial-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(0, 255, 135, 0.2);
  cursor: pointer;
  flex: 0 0 auto;
}
.trial-panel-title {
  font-family: "Orbitron", "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #00ff87;
  white-space: nowrap;
}
.trial-panel-close {
  background: rgba(0, 255, 135, 0.12);
  border: 1px solid rgba(0, 255, 135, 0.45);
  color: #00ff87;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.trial-panel-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex: 0 0 auto;
}
.trial-tab {
  padding: 7px 0;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.trial-tab.active {
  border-color: #00ff87;
  background: rgba(0, 255, 135, 0.16);
}

/* Asil kaydirilan alan. */
.trial-panel-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trial-panel-items::-webkit-scrollbar { width: 8px; }
.trial-panel-items::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 135, 0.35);
  border-radius: 4px;
}

.trial-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: left;
  width: 100%;
  flex: 0 0 auto;
}
.trial-item.active {
  border-color: #00ff87;
  background: rgba(0, 255, 135, 0.14);
}
.trial-item-thumb {
  flex: 0 0 52px;
  width: 52px;
  height: 34px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.35);
}
/* Market kart gorseli 82px yuksekliginde tasarlandi; kucuk kutuya sigdir. */
.trial-item-thumb .market-visual {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 82px;
  transform: translate(-50%, -50%) scale(0.42);
  transform-origin: center;
  border-radius: 0 !important;
}
.trial-item-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trial-item-owned {
  flex: 0 0 auto;
  font-size: 10px;
  color: #00ff87;
}

.trial-panel-foot {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex: 0 0 auto;
}
.trial-buy-btn,
.trial-exit-btn {
  flex: 1 1 0;
  padding: 9px 0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.trial-buy-btn {
  border: 1.5px solid #ffd54a;
  background: rgba(255, 213, 74, 0.14);
  color: #ffd54a;
}
.trial-buy-btn:disabled { opacity: 0.45; cursor: default; }
.trial-exit-btn {
  border: 1.5px solid #ff416c;
  background: rgba(255, 65, 108, 0.12);
  color: #ff416c;
}

/* Alcak yatay ekranlarda (telefon) daha derli toplu. */
@media (max-height: 460px) {
  .trial-panel-body { width: min(320px, 90vw); max-height: 88vh; }
  .trial-item-thumb { flex-basis: 44px; width: 44px; height: 28px; }
  .trial-item-name { font-size: 10.5px; }
  .trial-panel-items { padding: 6px; gap: 5px; }
}

/* Baslik sag tarafi: kaydirma tutamagi + katlama butonu */
.trial-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
/* Basili tutup sagalsola kaydirma tutamagi.
   touch-action:none SART: yoksa dokunmatikte tarayici hareketi kendi kaydirmasi
   sanip pointermove olaylarini kesiyor. */
.trial-panel-drag {
  touch-action: none;
  cursor: grab;
  background: rgba(0, 255, 135, 0.12);
  border: 1px solid rgba(0, 255, 135, 0.45);
  color: #00ff87;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.trial-panel-drag:active,
.trial-panel.dragging .trial-panel-drag {
  cursor: grabbing;
  background: rgba(0, 255, 135, 0.28);
}
/* Suruklerken metin secilmesin, panel de "tutuluyor" gibi dursun. */
.trial-panel.dragging { user-select: none; -webkit-user-select: none; }
.trial-panel.dragging .trial-panel-body { border-color: #00ff87; }

/* Deneme paneli — sadece isim gosterilen kategoriler (top izi / hizlanma / gol
   efekti). Bu efektler 52x34 kutuda anlasilmiyordu; gercek onizleme sahanin
   kendisi. Yan fayda: bu kategorilerde onizleme tuvali hic olusmuyor — WebView'de
   her tuval cizimi sahayi ~15 ms duraklatiyordu (olculen: 5 FPS → 111 FPS). */
#trialPanelItems.trial-name-only .trial-item {
  justify-content: center;
  padding: 9px 10px;
  gap: 0;
}

#trialPanelItems.trial-name-only .trial-item-name {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  font-size: 11px;
}