/* =====================================================================
   ODAKLA — SİNEMATİK TASARIM KATMANI (Mockup Faz)
   Bu dosya mevcut index.html'in stillerini genişletir/override eder.
   index.html'de <style>...</style> bloğunun HEMEN SONRASINA
   <link rel="stylesheet" href="odakla-cinematic.css"> olarak eklenir.
   Hiçbir mevcut JS mantığı bozulmadan sadece görsel dilimini yeniler.
===================================================================== */

/* ========== 1. ARKAPLAN (Ana Sayfa & tüm normal sayfalar) ==========
   Düz simsiyah zemin — menekşe aurora daireleri kaldırıldı (kullanıcı kararı).
   Asıl "background" rengi aşağıdaki "FAZ 8 — PREMIUM REFINEMENT" bölümündeki
   body:not(.centered-auth) kuralında (satır ~2830, !important'lı). */

/* Yıldız arkaplanı — sadece dark mode, ayrı bir fixed element ile */
.cinematic-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 8%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 27% 14%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 44% 6%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 63% 12%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 78% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 91% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 8% 22%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 35% 26%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 24%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 82% 28%, rgba(255,255,255,0.4), transparent);
  animation: cinematicTwinkle 6s ease-in-out infinite;
}
@keyframes cinematicTwinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.75; }
}

/* Kale silueti — Menekşe redesign'ında Aurora Mesh'e bırakıldı, kaldırıldı */
.castle-silhouette {
  display: none !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
}
.castle-silhouette svg { width: 100%; height: 100%; display: block; }

/* Lantern glow noktaları — kale ile birlikte kaldırıldı */
.lantern-container {
  display: none !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 68px;
  height: 200px;
  z-index: 1;
  pointer-events: none;
}
.lantern {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb040;
  box-shadow:
    0 0 6px 2px rgba(255,180,80,0.9),
    0 0 14px 5px rgba(255,140,40,0.5),
    0 0 26px 9px rgba(255,100,20,0.2);
  animation: cinematicFlicker 3s ease-in-out infinite;
}
.lantern:nth-child(1) { left: 15%; top: 42%; animation-delay: 0s; }
.lantern:nth-child(2) { left: 32%; top: 58%; animation-delay: 0.7s; }
.lantern:nth-child(3) { left: 48%; top: 46%; animation-delay: 1.4s; }
.lantern:nth-child(4) { left: 68%; top: 52%; animation-delay: 0.4s; }
.lantern:nth-child(5) { left: 84%; top: 44%; animation-delay: 1.1s; }
.lantern:nth-child(6) { left: 92%; top: 62%; animation-delay: 1.9s; }
@keyframes cinematicFlicker {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.55; }
  70% { opacity: 0.85; }
}

/* Light mode'da sinematik ambiyansı kapa — krem tema kendi karakterini korusun */
[data-theme="light"] .cinematic-stars,
[data-theme="light"] .castle-silhouette,
[data-theme="light"] .lantern-container { display: none; }
[data-theme="light"] body:not(.centered-auth) {
  background: var(--bg);
}

/* İçerik sinematik katmanların üstünde kalsın */
.wrap { position: relative; z-index: 2; }

/* ========== 2. HEADER — SADELEŞMİŞ ========== */
/* Mockup'ta üstte sadece taç + Odakla + bildirim var.
   Eski 4 ikon (tema/admin/geri bildirim/profil) → Ayarlar sekmesine taşındı.
   Level ve Coin bilgisi → Ana Sayfa'nın hero bölgesine taşındı. */
#app-header-row { margin-bottom: 20px; }
body:not(.centered-auth) #app-header-row h1 { font-size: 20px; letter-spacing: -0.4px; }
body:not(.centered-auth) #auth-tagline { display: none !important; }

/* Header'daki eski ikonları/badge'leri gizle (Ayarlar sekmesine gitti) */
body:not(.centered-auth) #header-level-badge,
body:not(.centered-auth) #header-coin-badge,
body:not(.centered-auth) #theme-toggle-btn,
body:not(.centered-auth) #admin-toggle-btn,
body:not(.centered-auth) #feedback-toggle-btn,
body:not(.centered-auth) #profile-toggle-btn { display: none !important; }

/* Yeni: sadece bildirim/duyuru butonu (announcement varsa parlar) */
#cinematic-bell-btn {
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 220ms var(--ease), background-color 220ms var(--ease);
}
[data-theme="light"] #cinematic-bell-btn {
  background: rgba(36,31,20,0.04);
  border-color: rgba(36,31,20,0.1);
  color: var(--text-secondary);
}
#cinematic-bell-btn:hover { background: rgba(255,229,0,0.1); transform: translateY(-1px); }
#cinematic-bell-btn svg { width: 18px; height: 18px; }
#cinematic-bell-btn.has-announcement::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--study);
  box-shadow: 0 0 8px var(--study);
  animation: bellPulse 1.8s ease-in-out infinite;
}
@keyframes bellPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ========== 3. HERO — LEVEL BAR + 3 STAT (Ana Sayfa üstü) ========== */
/* Mockup'ta ana sayfa: Level 12 progress bar, altında 3 stat card,
   sonra büyük halka. Rings kartı (3 iç içe halka) mockup'ta yok, gizlendi. */

.hero-level-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 240ms var(--ease), transform 200ms var(--ease);
}
.hero-level-card:hover {
  border-color: rgba(255,229,0,0.2);
  transform: translateY(-1px);
}
.hero-level-card:active { transform: scale(0.98); }
.hero-level-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 1.2px;
  flex-shrink: 0;
}
.hero-level-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
[data-theme="light"] .hero-level-track { background: rgba(36,31,20,0.08); }
.hero-level-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFA500, #FFD93D, var(--study));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255,229,0,0.5);
  transition: width 700ms cubic-bezier(.22,1,.36,1);
  position: relative;
}
.hero-level-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: heroLevelShimmer 2.5s infinite;
}
@keyframes heroLevelShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.hero-level-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
}

/* 3 stat card */
.hero-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.hero-stat-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 240ms var(--ease), transform 200ms var(--ease);
}
.hero-stat-card:hover {
  border-color: rgba(255,229,0,0.18);
  transform: translateY(-1px);
}
.hero-stat-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.hero-stat-icon svg { width: 18px; height: 18px; }
.hero-stat-icon.flame { color: #FF6B35; filter: drop-shadow(0 0 6px rgba(255,107,53,0.6)); }
.hero-stat-icon.bolt { color: var(--study); filter: drop-shadow(0 0 6px rgba(255,229,0,0.6)); }
.hero-stat-icon.gem { color: #6EC5FF; filter: drop-shadow(0 0 6px rgba(110,197,255,0.6)); }
.hero-stat-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.hero-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ========== 4. TIMER CARD — Sinematik Yenileme ========== */
/* Mevcut card-hero (timer) — büyük yuvarlak halka, glow, mockup gibi */
#page-home .card-hero:has(#timer-main) {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,229,0,0.14);
  padding: 24px 20px 20px;
  position: relative;
  overflow: hidden;
}
#page-home .card-hero:has(#timer-main)::before {
  content: '';
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,229,0,0.12), transparent 60%);
  pointer-events: none;
}

/* Timer'ın çevresine büyük halka animasyonu ekle */
.hero-timer-ring-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 20px;
}
.hero-timer-ring-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hero-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 8;
}
[data-theme="light"] .hero-ring-bg { stroke: rgba(36,31,20,0.1); }
.hero-ring-fg {
  fill: none;
  stroke: url(#heroRingGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 690;
  stroke-dashoffset: 214;
  filter: drop-shadow(0 0 10px rgba(255,229,0,0.6));
  transition: stroke-dashoffset 900ms cubic-bezier(.22,1,.36,1);
}
.hero-timer-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.hero-timer-ring-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ODAKLA: kullanıcı kararı — bu temel .timer kuralı artık #page-home #timer-main'in
   "modern" birim-kutu tasarımıyla (satır ~7123) tamamen geçersiz kılınıyor; sarı
   text-shadow'u (eski, "sarı ışık" temizliğinden önce kalmıştı) o yüzden kaldırıldı. */
#page-home .timer {
  font-weight: 300 !important;
  letter-spacing: -1px !important;
  color: var(--text-primary);
  line-height: 1;
}

/* Başlat butonu — büyük menekşe gradient pill (Menekşe redesign) */
#page-home #start-btn {
  background: var(--cta);
  color: var(--cta-ink);
  border: none;
  border-radius: 12px;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
#page-home #start-btn:hover {
  background: var(--cta-hover);
}

/* Alıntı — sinematik italik */
.hero-quote {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin: 14px 0 0;
  padding: 0 20px;
}

/* ========== 5. BOTTOM NAV — 6 SEKME ========== */
#bottom-nav { gap: 2px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
.nav-item {
  max-width: none !important;
  padding: 6px 2px !important;
  gap: 2px !important;
}
.nav-item svg { width: 18px !important; height: 18px !important; }
.nav-item span { font-size: 9.5px !important; }
.nav-item.active {
  color: var(--text-primary) !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.nav-item.active svg { filter: none; }

/* ========== 6. ODAK MODU — TAM EKRAN OVERLAY ========== */
/* Sayaç başlayınca body.focus-mode class'ı eklenir.
   Normal UI gizlenir, sinematik dağ görünümü açılır. */
body.focus-mode { overflow: hidden; }
body.focus-mode > .wrap,
body.focus-mode #bottom-nav,
body.focus-mode .castle-silhouette,
body.focus-mode .lantern-container,
body.focus-mode .cinematic-stars {
  display: none !important;
}
body.focus-mode #focus-mode-view { display: flex !important; }
body.focus-mode { background: none !important; }

#focus-mode-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px 32px;
  background: radial-gradient(circle at 50% 45%, #14103a, #08070f 70%);
  overflow: hidden;
}
[data-theme="light"] #focus-mode-view {
  background: linear-gradient(180deg, #FBF6EA, #F3EAD3 60%, #E8DCC0);
}

/* ODAKLA: "Yörünge" sahnesi — eski dağ/fener + yıldız katmanının yerine.
   Odaklanmayı, merkeze doğru daralan üç yavaş dönen halka + nefes alan bir
   menekşe ışık olarak görselleştiriyor. Lig rütbe rozetlerindeki halka
   motifiyle aynı aile — bkz. _leagueBadgeSvg (odakla-features.js). */
.focus-orbit-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[data-theme="light"] .focus-orbit-bg { opacity: 0.14; }
.focus-orbit-glow {
  position: absolute; top: 50%; left: 50%; width: 420px; height: 420px;
  margin: -210px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(106,92,255,0.35), transparent 70%);
  animation: focusOrbitBreathe 5s ease-in-out infinite;
}
.focus-orbit-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid rgba(154,140,255,0.18); transform: translate(-50%, -50%);
}
.focus-orbit-ring.o1 { width: 320px; height: 320px; animation: focusOrbitSpin 26s linear infinite; }
.focus-orbit-ring.o2 { width: 500px; height: 500px; animation: focusOrbitSpin 40s linear infinite reverse; border-color: rgba(154,140,255,0.12); }
.focus-orbit-ring.o3 { width: 700px; height: 700px; animation: focusOrbitSpin 60s linear infinite; border-color: rgba(154,140,255,0.07); }
.focus-orbit-dot {
  position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--violet-400, #9A8CFF); box-shadow: 0 0 10px var(--violet-400, #9A8CFF);
}
@keyframes focusOrbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes focusOrbitBreathe { 0%, 100% { opacity: 0.7; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .focus-orbit-ring, .focus-orbit-glow { animation: none; }
}

/* İçerik yörüngenin üstünde */
#focus-mode-view > * { position: relative; z-index: 2; }

/* "Odaklanıyorsun" badge (üstte) */
.focus-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,229,0,0.12);
  border: 1px solid rgba(255,229,0,0.3);
  color: var(--study);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 20px rgba(255,229,0,0.2);
}
.focus-mode-badge svg { width: 14px; height: 14px; }
.focus-mode-badge.on-break {
  background: rgba(255,146,36,0.12);
  border-color: rgba(255,146,36,0.35);
  color: var(--break);
  box-shadow: 0 0 20px rgba(255,146,36,0.2);
}

/* Ana halka — mockup'taki dev sarı halka */
.focus-mode-ring-wrap {
  position: relative;
  width: min(300px, 78vw);
  height: min(300px, 78vw);
  margin: 20px auto;
}
.focus-mode-ring-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.focus-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 10;
}
[data-theme="light"] .focus-ring-bg { stroke: rgba(36,31,20,0.1); }
.focus-ring-fg {
  fill: none;
  stroke: url(#focusModeRingGradient);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 810;
  stroke-dashoffset: 810;
  filter: drop-shadow(0 0 14px rgba(255,229,0,0.7));
  transition: stroke-dashoffset 1000ms linear;
}
.focus-mode-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.focus-mode-ring-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}
.focus-mode-ring-time {
  font-family: var(--font-mono);
  font-size: clamp(44px, 14vw, 62px);
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: -2px;
  line-height: 1;
  text-shadow: 0 0 30px rgba(255,229,0,0.4);
}
.focus-mode-ring-course {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,229,0,0.12);
  border: 1px solid rgba(255,229,0,0.3);
  color: var(--study);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ambient card (Deep Focus + Lo-fi Rain tarzında) */
.focus-mode-ambient-card {
  width: 100%;
  max-width: 340px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
}
[data-theme="light"] .focus-mode-ambient-card {
  background: rgba(36,31,20,0.05);
  border-color: rgba(36,31,20,0.1);
}
.focus-mode-ambient-thumb {
  width: 44px; height: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,180,80,0.5), transparent),
    linear-gradient(135deg, #2a1a48, #4a2a5a);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--study);
}
.focus-mode-ambient-info { flex: 1; min-width: 0; }
.focus-mode-ambient-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus-mode-ambient-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.focus-mode-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--study);
}
.focus-mode-waveform span {
  display: block;
  width: 3px;
  background: currentColor;
  border-radius: 2px;
  animation: focusModeWave 1.2s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(255,229,0,0.6);
}
.focus-mode-waveform span:nth-child(1) { height: 10px; animation-delay: 0s; }
.focus-mode-waveform span:nth-child(2) { height: 16px; animation-delay: 0.15s; }
.focus-mode-waveform span:nth-child(3) { height: 22px; animation-delay: 0.3s; }
.focus-mode-waveform span:nth-child(4) { height: 14px; animation-delay: 0.45s; }
.focus-mode-waveform span:nth-child(5) { height: 18px; animation-delay: 0.6s; }
@keyframes focusModeWave {
  0%, 100% { transform: scaleY(0.6); }
  50% { transform: scaleY(1); }
}
.focus-mode-waveform.paused span { animation-play-state: paused; opacity: 0.4; }

/* Kontroller (bitir / duraklat / ayarlar) */
.focus-mode-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}
.focus-ctrl {
  width: 56px; height: 56px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 220ms var(--ease), background-color 220ms var(--ease);
}
[data-theme="light"] .focus-ctrl {
  background: rgba(36,31,20,0.06);
  border-color: rgba(36,31,20,0.15);
  color: var(--text-secondary);
}
.focus-ctrl:hover { background: rgba(255,229,0,0.12); transform: translateY(-1px); }
.focus-ctrl:active { transform: scale(0.92); }
.focus-ctrl svg { width: 22px; height: 22px; }
.focus-ctrl-main {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #FFE500, #FFC107);
  color: #1a1000;
  border: none;
  box-shadow:
    0 10px 30px rgba(255,193,7,0.4),
    0 0 50px rgba(255,229,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.focus-ctrl-main svg { width: 26px; height: 26px; }
.focus-ctrl-main:hover { background: linear-gradient(135deg, #FFE500, #FFC107); transform: translateY(-2px); }
.focus-ctrl-danger { color: rgba(255,120,120,0.9); border-color: rgba(255,120,120,0.25); }
.focus-ctrl-danger:hover { background: rgba(255,120,120,0.12); }

/* ========== 7. AYARLAR SAYFASI (page-settings) ========== */
#page-settings .settings-profile-header {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,229,0,0.14);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#page-settings .settings-profile-header::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,229,0,0.15), transparent 60%);
  pointer-events: none;
}
#page-settings .settings-avatar-wrap {
  position: relative;
  width: 88px; height: 88px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--study);
  box-shadow: 0 0 32px rgba(255,229,0,0.25);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
#page-settings .settings-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
#page-settings .settings-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}
#page-settings .settings-title {
  font-size: 12px;
  color: var(--study);
  font-weight: 600;
  margin: 0 0 14px;
}
#page-settings .settings-level-bar {
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 0 auto;
  max-width: 320px;
}
#page-settings .settings-level-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
#page-settings .settings-level-num {
  font-weight: 800; font-size: 13px; color: var(--text-primary);
}
#page-settings .settings-level-xp {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
}
#page-settings .settings-level-track {
  height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden;
}
#page-settings .settings-level-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFA500, var(--study));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,229,0,0.5);
  transition: width 700ms cubic-bezier(.22,1,.36,1);
}

#page-settings .settings-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  position: relative;
}
#page-settings .settings-mini-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 4px;
  text-align: center;
}
#page-settings .settings-mini-stat-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}
#page-settings .settings-mini-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* Ayarlar linkleri — Discord/iOS tarzı liste */
#page-settings .settings-group {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 8px;
  margin-bottom: 12px;
}
#page-settings .settings-group-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 10px 4px;
}
#page-settings .settings-link {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-primary);
  text-align: left;
  transition: background-color 200ms var(--ease);
}
#page-settings .settings-link:hover {
  background: rgba(255,255,255,0.04);
  border-color: transparent;
  transform: none;
}
#page-settings .settings-link-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(255,229,0,0.08);
  color: var(--study);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#page-settings .settings-link-icon svg { width: 17px; height: 17px; }
#page-settings .settings-link-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
}
#page-settings .settings-link-value {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 4px;
}
#page-settings .settings-link-chevron {
  width: 14px; height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ========== 8. MARKET SAYFASI (page-market) — sekme olarak ========== */
#page-market .market-coin-hero {
  background: linear-gradient(155deg, rgba(255,229,0,0.16), rgba(255,229,0,0.04));
  border: 1px solid rgba(255,229,0,0.25);
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}
#page-market .market-coin-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,229,0,0.2), transparent 60%);
  pointer-events: none;
}
#page-market .market-coin-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
#page-market .market-coin-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--study);
  text-shadow: 0 0 20px rgba(255,229,0,0.4);
}
#page-market .market-coin-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,229,0,0.15);
  border: 1px solid rgba(255,229,0,0.3);
  color: var(--study);
  display: flex; align-items: center; justify-content: center;
}

/* ========== 9. AUTH KISMI — düz simsiyah zemin + camsı kart + kenar ışık huzmesi ========== */
body.centered-auth {
  background: #000000 !important;
}
[data-theme="light"] body.centered-auth {
  background: var(--bg) !important;
}

/* Camsı giriş kartı */
#auth-card {
  position: relative;
  background: rgba(10,10,14,0.55) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  overflow: hidden;
  animation: authCardGlow 4s ease-in-out infinite;
}
@keyframes authCardGlow {
  0%, 100% { box-shadow: 0 0 16px 2px rgba(154,140,255,0.08); }
  50% { box-shadow: 0 0 28px 6px rgba(154,140,255,0.16); }
}
[data-theme="light"] #auth-card {
  background: var(--surface) !important;
  backdrop-filter: none;
  animation: none;
  box-shadow: none;
}

/* Kenarda dolaşan menekşe ışık huzmesi — 4 dekoratif şerit, aria-hidden, saf görsel */
.auth-beam { position: absolute; pointer-events: none; z-index: 2; }
.auth-beam-top { top: 0; left: -50%; height: 2px; width: 45%; background: linear-gradient(90deg, transparent, rgba(154,140,255,0.9), transparent); animation: authBeamTop 3.2s ease-in-out infinite; }
.auth-beam-right { top: -50%; right: 0; width: 2px; height: 45%; background: linear-gradient(180deg, transparent, rgba(154,140,255,0.9), transparent); animation: authBeamRight 3.2s ease-in-out infinite; animation-delay: .8s; }
.auth-beam-bottom { bottom: 0; right: -50%; height: 2px; width: 45%; background: linear-gradient(90deg, transparent, rgba(154,140,255,0.9), transparent); animation: authBeamBottom 3.2s ease-in-out infinite; animation-delay: 1.6s; }
.auth-beam-left { bottom: -50%; left: 0; width: 2px; height: 45%; background: linear-gradient(180deg, transparent, rgba(154,140,255,0.9), transparent); animation: authBeamLeft 3.2s ease-in-out infinite; animation-delay: 2.4s; }
@keyframes authBeamTop { 0% { left: -50%; } 100% { left: 110%; } }
@keyframes authBeamRight { 0% { top: -50%; } 100% { top: 110%; } }
@keyframes authBeamBottom { 0% { right: -50%; } 100% { right: 110%; } }
@keyframes authBeamLeft { 0% { bottom: -50%; } 100% { bottom: 110%; } }
[data-theme="light"] .auth-beam { display: none; }

/* Giriş formu input ikonları (sol taraf, saf CSS background — DOM'a yeni sarmalayıcı eklemeden) */
#auth-form-wrap input[type="email"],
#auth-form-wrap input[type="password"],
#auth-form-wrap input[type="text"] {
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 15px 15px;
  padding-left: 40px !important;
}
#auth-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E") !important;
}
#auth-password, #auth-password-confirm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}
#auth-name {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

/* Şifre alanı — göz ikonlu göster/gizle */
#auth-password { padding-right: 40px !important; }
.pw-field { position: relative; }
.pw-field #auth-password { width: 100%; }
.pw-eye-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none !important; border: none !important; padding: 0 !important;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4); cursor: pointer; box-shadow: none !important;
}
.pw-eye-btn:hover, .pw-eye-btn:active { color: #fff; background: none !important; transform: translateY(-50%) !important; }
.pw-eye-btn svg { width: 16px; height: 16px; }

/* Giriş öncesi uzun paragraf kaldırıldı — kullanıcı kararı, sinematik başlık + canlı sayaç yerini aldı */
body.centered-auth #marketing-blurb { display: none !important; }

/* Sinematik "Odakla" wordmark — üzerinden geçen menekşe shine + nefes alan glow */
@keyframes wordmarkGlow {
  0%, 100% { text-shadow: 0 0 24px rgba(106,92,255,.35), 0 0 50px rgba(106,92,255,.15); }
  50% { text-shadow: 0 0 34px rgba(106,92,255,.55), 0 0 70px rgba(106,92,255,.28); }
}
@keyframes wordmarkShine {
  0% { background-position: -120% 0; }
  60%, 100% { background-position: 220% 0; }
}
body.centered-auth #app-header-row h1 {
  animation: wordmarkGlow 4s ease-in-out infinite;
}
body.centered-auth #app-header-row h1 .wordmark-shine {
  background: linear-gradient(100deg, #fff 30%, #C9BBFF 45%, #fff 55%, #fff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wordmarkShine 4.5s ease-in-out infinite;
}
[data-theme="light"] body.centered-auth #app-header-row h1 { animation: none; text-shadow: none; }
[data-theme="light"] body.centered-auth #app-header-row h1 .wordmark-shine { animation: none; background: none; -webkit-text-fill-color: initial; color: var(--text-primary); }

/* Canlı sayaç rozeti — giriş öncesi, wordmark'ın altında */
@keyframes authLivePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.3); } }
@keyframes authLiveRing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
#auth-live-badge {
  align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 999px; margin-top: 16px;
  background: rgba(92,232,122,.08); border: 1px solid rgba(92,232,122,.25);
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.75);
}
.auth-live-dot-wrap { position: relative; width: 8px; height: 8px; flex-shrink: 0; display: inline-block; margin-right: 2px; }
.auth-live-dot { position: absolute; inset: 0; border-radius: 50%; background: #5CE87A; box-shadow: 0 0 8px #5CE87A; animation: authLivePulse 1.8s ease-in-out infinite; }
.auth-live-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #5CE87A; animation: authLiveRing 1.8s ease-out infinite; }
#auth-live-badge b { color: #fff; font-family: var(--font-mono); font-weight: 800; }

/* ========== 10. Utility ========== */
/* Sayfa geçişlerinde smooth fade */
#page-settings, #page-market {
  animation: pageFadeIn 320ms var(--ease);
}

/* Odak Modu overlay dışında normal görünümü etkilemesin */
body:not(.focus-mode) #focus-mode-view { display: none !important; }

/* Ambient chip'lerin buton olarak ana sayfada gösterilmesi — Odak Modu içinde de var */
#focus-mode-view .focus-mode-ambient-thumb svg { width: 20px; height: 20px; }

/* ========== 11. MASAÜSTÜ UYUMU (>720px ekran) ========== */
@media (min-width: 720px) {
  /* Alt nav ekranın ortasında dar bir sütun olsun, mobile-first bozulmasın */
  #bottom-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    max-width: 720px;
    width: 100%;
    border-radius: 20px 20px 0 0;
  }
  .nav-item {
    max-width: 110px !important;
  }

}

/* ========== 12. Timer halkası merkez düzeltmesi ========== */
/* Timer içeriği (phase badge + timer text) halkanın tam ortasında dursun */
.hero-timer-ring-wrap .phase-badge {
  margin: 0 auto 4px !important;
  transform: none !important;
}
.hero-timer-ring-wrap .timer {
  font-size: 44px !important;
  letter-spacing: -1px !important;
  margin: 0 !important;
}
/* Halka içindeki "Odak Zamanı" küçük etiket */
.hero-timer-ring-wrap .hero-timer-ring-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

/* Halka container'ının card-hero içindeki kenar boşlukları */
#page-home .card-hero .timer-row {
  padding: 8px 0 16px !important;
}

/* ========== 13. KRİTİK DÜZELTMELER (kullanıcı geri bildirimi) ========== */

/* 13a) Kale silueti sona kadar uzasın — SVG'ye width:100% gerekli */
.castle-silhouette {
  width: 100% !important;
  min-width: 100vw;
}

/* 13b) Masaüstünde halkayı büyüt — mockup'a daha yakın hissiyat */
@media (min-width: 720px) {
  .hero-timer-ring-wrap {
    width: 320px !important;
    height: 320px !important;
  }
  #page-home .timer {
    font-size: 54px !important;
  }
  .hero-timer-ring-wrap .hero-timer-ring-label {
    font-size: 13px;
    margin-bottom: 4px;
  }
}

/* 13c) Timer'ın etrafındaki halka çemberinin kalınlığını artır — daha görünür */
.hero-ring-bg { stroke-width: 10 !important; }
.hero-ring-fg { stroke-width: 10 !important; }

/* 13d) Görev sekmesi (page-tasks) — glue script'in dokunmadığı bir edge case için
       display'i force et (mevcut kod bazen inline style ile gizli bırakabiliyor) */
#page-tasks:not([style*="display: none"]):not([style*="display:none"]) {
  display: block !important;
}
#page-market:not([style*="display: none"]):not([style*="display:none"]),
#page-settings:not([style*="display: none"]):not([style*="display:none"]) {
  display: block !important;
}

/* 13e) Halka içindeki phase-badge daha küçük olsun, timer'ı bastırmasın */
.hero-timer-ring-wrap .phase-badge {
  font-size: 11px !important;
  padding: 3px 10px !important;
  margin: 2px auto 6px !important;
}

/* ========== 14. ODAK MODU LAYOUT DÜZELTMESİ (masaüstü + tablet + mobil) ========== */

/* Ana konteynerin flex davranışı — masaüstünde ortada, mobilde ekrana yayılsın */
#focus-mode-view {
  justify-content: center !important;
  gap: 20px !important;
  padding: 40px 20px !important;
}

/* Masaüstünde içerik ortada dar bir sütun halinde dursun */
@media (min-width: 720px) {
  #focus-mode-view {
    padding: 60px 20px !important;
    gap: 28px !important;
  }
  #focus-mode-view > *:not(.focus-orbit-bg):not(::before) {
    max-width: 440px;
    width: 100%;
  }
  .focus-mode-ring-wrap {
    width: 340px !important;
    height: 340px !important;
    margin: 0 auto !important;
  }
  .focus-mode-ring-time {
    font-size: 68px !important;
  }
}

/* Tablet (480–720px) — orta boy halka */
@media (min-width: 480px) and (max-width: 719px) {
  .focus-mode-ring-wrap {
    width: 300px !important;
    height: 300px !important;
  }
  .focus-mode-ring-time {
    font-size: 54px !important;
  }
}

/* Mobil (< 480px) — halka viewport'a orantılı, kontroller sıkışmasın */
@media (max-width: 479px) {
  #focus-mode-view {
    padding: 24px 16px !important;
    gap: 16px !important;
    justify-content: space-between !important;
  }
  .focus-mode-ring-wrap {
    width: min(280px, 78vw) !important;
    height: min(280px, 78vw) !important;
  }
  .focus-mode-ring-time {
    font-size: clamp(40px, 13vw, 54px) !important;
  }
  .focus-mode-ambient-card {
    max-width: 100% !important;
  }
  .focus-mode-controls {
    gap: 16px !important;
    margin-top: 8px !important;
  }
  .focus-ctrl { width: 50px !important; height: 50px !important; }
  .focus-ctrl-main { width: 64px !important; height: 64px !important; }
}

/* Halka daha canlı gözüksün — glow'u güçlendir */
.focus-ring-fg {
  filter: drop-shadow(0 0 18px rgba(255,229,0,0.85)) !important;
}

/* ========== 15. ANA SAYFA & TÜM SAYFALAR — TABLET/MOBİL UYUMU ========== */
/* Tablet (480–720px) — kart genişliği tam ekran, halka orta boy */
@media (min-width: 480px) and (max-width: 719px) {
  .hero-timer-ring-wrap {
    width: 280px !important;
    height: 280px !important;
  }
  #page-home .timer {
    font-size: 48px !important;
  }
}

/* Mobil (< 480px) — kompakt */
@media (max-width: 479px) {
  .hero-timer-ring-wrap {
    width: min(240px, 68vw) !important;
    height: min(240px, 68vw) !important;
  }
  #page-home .timer {
    font-size: clamp(36px, 10vw, 44px) !important;
  }
  .hero-stat-value { font-size: 14px !important; }
  .hero-stat-label { font-size: 9px !important; }
  .hero-stats-grid { gap: 6px !important; }
  .hero-stat-card { padding: 10px 6px !important; }

  /* Kale silueti mobilde daha kısa olsun */
  .castle-silhouette { height: 180px !important; }
  .lantern-container { bottom: 60px !important; height: 130px !important; }
}

/* Küçük telefon (< 380px) — sıkışmayı önle */
@media (max-width: 379px) {
  .hero-level-label { font-size: 9.5px !important; }
  .hero-level-pct { font-size: 10px !important; min-width: 30px !important; }
  .hero-stat-value { font-size: 13px !important; }
  .nav-item span { font-size: 8.5px !important; }
  .nav-item svg { width: 16px !important; height: 16px !important; }
}

/* Geniş masaüstü (> 1200px) — içerik ortada 720px'e sabit, geniş boşluklar sinematik */
@media (min-width: 1200px) {
  body:not(.centered-auth) {
    background-attachment: fixed;
  }
  .wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ========== 16. KRİTİK DÜZELTMELER (kullanıcı geri bildirimi round 3) ========== */

/* 16a) Ana Sayfa halkası tam sarı çember olsun — progress ring artefaktı yok
       (stroke-linecap: round nedeniyle üstte bir 'orphan dot' oluşuyordu, artık yok) */
.hero-ring-fg {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  stroke-linecap: butt !important;
  filter: drop-shadow(0 0 12px rgba(255,229,0,0.55)) !important;
}

/* 16b) Odak Modu halkası — sayaç başladıktan sonra progress göstersin,
       başlangıçta boş olsun (round cap düz uçlu, artefakt yok) */
.focus-ring-fg {
  stroke-linecap: round !important;
  stroke-dasharray: 810 !important;
  stroke-dashoffset: 810 !important; /* başlangıçta hiç dolu değil */
}

/* 16c) Beyaz tema devre dışı — sadece koyu tema kullanılabilir.
       Ayarlar > Görünüm grubu tamamen gizli (glue script destekliyor). */
[data-theme="light"] {
  /* CSS ile light tema override'ları etkisiz kalsın — daha güçlü seçicilerle
     override etmiyoruz, çünkü zaten kullanıcı erişemeyecek. Ama emniyet olarak
     light tema'da body arkaplanı yine sinematik kalsın. */
}

/* 16d) SERİ ROZETİ YENİDEN — Sinematik cam kart, glow'lu alev, büyük sayı
   FAZ 33c bento redesign: background/border !important buradan kaldırıldı —
   kart artık .hb-cell/.hb-cell-goal class'larından düz bento arkaplanı
   (var(--surf-1) + var(--hairline)) alıyor, kardeş .hb-cell-small hücreleriyle
   eşleşsin diye. position/overflow aşağıdaki ::before glow için korunuyor. */
#streak-goal-card {
  position: relative;
  overflow: hidden;
}
#streak-goal-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,120,50,0.18), transparent 65%);
  pointer-events: none;
  animation: streakFlicker 4s ease-in-out infinite;
}
@keyframes streakFlicker {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
#streak-goal-card > * { position: relative; z-index: 1; }

/* Alev ikonu büyük ve glow'lu */
#streak-flame-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px;
  background: rgba(255,120,50,0.15);
  border: 1px solid rgba(255,120,50,0.35);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 8px !important;
  vertical-align: middle !important;
}
#streak-flame-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #FF8040 !important;
  stroke: #FF8040 !important;
  filter: drop-shadow(0 0 8px rgba(255,120,50,0.75));
}

/* Streak count büyük ve parlak
   FAZ 33c: font-size !important kaldırıldı — inline stildeki (index.html)
   font-size:13px kardeş bento hücreleriyle uyumlu boyutu belirliyor.
   display/align-items kaldı; alev ikonu + sayı span'ini yatay hizalamak için
   hâlâ gerekli, bento redesign'la çakışmıyor. */
#streak-goal-card p:first-of-type {
  display: flex !important;
  align-items: center !important;
}
#streak-count {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono);
  margin-right: 4px;
  text-shadow: 0 0 12px rgba(255,120,50,0.4);
}

/* Paylaş butonu
   FAZ 33c: eski beyaz-pill görünümü (background/border-color/color/
   border-radius/padding !important) kaldırıldı — buton artık index.html'de
   uygulanan .hn-action class'ından (menekşe pill, 8px radius) stilini alıyor,
   yanındaki Düzenle butonuyla aynı görünsün diye. Eski :hover da (sarı/
   --study tonlarında) aynı sebeple kaldırıldı — Düzenle butonunun da özel bir
   :hover kuralı yok, tutarlılık için Paylaş da varsayılan .hn-action
   davranışına bırakıldı. */
#streak-share-btn {
  transition: all 220ms var(--ease);
}

/* Haftalık hedef progress bar — daha kalın, glow */
#streak-goal-card .track {
  height: 10px !important;
  background: rgba(0,0,0,0.35) !important;
  border-radius: 999px;
  overflow: hidden;
}
#goal-fill {
  background: linear-gradient(90deg, #FF8040, #FFD93D, var(--study)) !important;
  box-shadow: 0 0 12px rgba(255,180,60,0.6);
  height: 100%;
  border-radius: 999px;
  position: relative;
}
#goal-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: heroLevelShimmer 2.5s infinite;
}

/* 16e) Odak Modu — daha güçlü !important layering, layout kesin ortalasın */
body.focus-mode #focus-mode-view {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.focus-mode #focus-mode-view > .focus-mode-badge,
body.focus-mode #focus-mode-view > .focus-mode-ring-wrap,
body.focus-mode #focus-mode-view > .focus-mode-ambient-card,
body.focus-mode #focus-mode-view > .focus-mode-controls {
  margin-left: auto !important;
  margin-right: auto !important;
  flex-shrink: 0;
}

@media (min-width: 720px) {
  body.focus-mode #focus-mode-view {
    gap: 24px !important;
    padding: 40px 20px !important;
  }
}

/* ========== 17. FINAL FIXES (kullanıcı geri bildirimi round 4) ========== */

/* 17a) Alev rozeti — yukarıdaki hero-stat-card'daki gibi sade+glow'lu olsun
       (turuncu kutu kaldırıldı, sadece parlak alev SVG) */
#streak-flame-icon {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin-right: 4px !important;
  vertical-align: -3px !important;
}
#streak-flame-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #FF6B35 !important;
  stroke: #FF6B35 !important;
  filter: drop-shadow(0 0 8px rgba(255,107,53,0.7)) drop-shadow(0 0 14px rgba(255,107,53,0.35)) !important;
}

/* 17b) ODAK MODU — pencere her zaman tam ekranı kaplasın. */
#focus-mode-view {
  position: fixed !important;
  inset: 0 !important;
}

/* Odak Modu içeriği yörüngenin önünde ortada durmalı */
body.focus-mode #focus-mode-view > .focus-mode-badge,
body.focus-mode #focus-mode-view > .focus-mode-ring-wrap,
body.focus-mode #focus-mode-view > .focus-mode-ambient-card,
body.focus-mode #focus-mode-view > .focus-mode-controls {
  position: relative !important;
  z-index: 3 !important;
}

/* 17c) Odak Modu'nda halka progress göstergesi güncellemesini destekleyen
       JS class'ları. Sayaç akarken JS focus-mode-ring'in stroke-dashoffset'ini
       değiştirir. Şimdilik statik olarak yarı-dolu göster (dekoratif). */
.focus-ring-fg {
  stroke-dasharray: 810 !important;
  stroke-dashoffset: 810 !important; /* JS güncelleyecek */
  transition: stroke-dashoffset 1000ms linear;
}
body.focus-mode.focus-progress .focus-ring-fg {
  stroke-dashoffset: 400 !important; /* örnek: yarı dolu */
}

/* ========== 18. STREAK ALEV — TEK KATMAN, DOLU (yukarıdaki hero-stat gibi) ========== */
#streak-flame-icon {
  display: inline-flex !important;
  align-items: center !important;
  width: 22px !important;
  height: 22px !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
#streak-flame-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #FF6B35 !important;
  fill: currentColor !important;
  stroke: none !important;
  filter: drop-shadow(0 0 8px rgba(255,107,53,0.65)) !important;
}

/* ========== 19. AMBIENT SESLER — SİNEMATİK CHİP'LER + SARI SLIDER ========== */

/* Row container — yatay kayar, sinematik scrollbar */
#ambient-chip-row {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 4px 2px 8px !important;
  margin-bottom: 14px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,229,0,0.3) transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
#ambient-chip-row::-webkit-scrollbar { height: 4px; }
#ambient-chip-row::-webkit-scrollbar-track { background: transparent; }
#ambient-chip-row::-webkit-scrollbar-thumb {
  background: rgba(255,229,0,0.25);
  border-radius: 2px;
}
#ambient-chip-row::-webkit-scrollbar-thumb:hover { background: rgba(255,229,0,0.5); }

/* Her bir chip — cam kart, tam border, glow */
.ambient-chip,
#ambient-chip-row > button,
#ambient-chip-row > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all 220ms var(--ease) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  outline: none !important;
  box-shadow: none !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important; /* üst kenar kesin görünsün */
}

.ambient-chip:hover,
#ambient-chip-row > button:hover,
#ambient-chip-row > div:hover {
  background: rgba(255,229,0,0.08) !important;
  border-color: rgba(255,229,0,0.28) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px);
}

/* Chip içindeki SVG (küçük ambient ikonu) */
.ambient-chip svg,
#ambient-chip-row svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

/* Aktif seçili chip — sarı border + sarı text + glow */
.ambient-chip.active,
.ambient-chip.selected,
.ambient-chip[data-active="true"],
.ambient-chip[aria-pressed="true"],
#ambient-chip-row > button.active,
#ambient-chip-row > div.active {
  background: rgba(255,229,0,0.12) !important;
  border-color: rgba(255,229,0,0.5) !important;
  color: var(--study) !important;
  box-shadow: 0 0 16px rgba(255,229,0,0.25), inset 0 0 0 1px rgba(255,229,0,0.15) !important;
}
.ambient-chip.active svg,
.ambient-chip.selected svg,
#ambient-chip-row > button.active svg,
#ambient-chip-row > div.active svg {
  filter: drop-shadow(0 0 4px rgba(255,229,0,0.6));
}

/* ========== 20. SES SEVİYESİ SLIDER — SİNEMATİK SARI ========== */
#ambient-volume-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    var(--study) 0%,
    var(--study) var(--vol-pct, 35%),
    rgba(255,255,255,0.08) var(--vol-pct, 35%),
    rgba(255,255,255,0.08) 100%) !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  transition: box-shadow 200ms var(--ease);
}
#ambient-volume-slider:hover {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 12px rgba(255,229,0,0.2);
}

/* Slider thumb — sarı yuvarlak topuz, glow'lu */
#ambient-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE500, #FFC107);
  border: 2px solid rgba(255,255,255,0.9);
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.4),
    0 0 12px rgba(255,229,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 180ms var(--ease);
}
#ambient-volume-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
#ambient-volume-slider::-webkit-slider-thumb:active { transform: scale(0.95); }

#ambient-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE500, #FFC107);
  border: 2px solid rgba(255,255,255,0.9);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 12px rgba(255,229,0,0.5);
}
#ambient-volume-slider::-moz-range-track {
  background: rgba(255,255,255,0.08);
  height: 6px;
  border-radius: 999px;
}
#ambient-volume-slider::-moz-range-progress {
  background: linear-gradient(90deg, #FFA500, var(--study));
  height: 6px;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255,229,0,0.4);
}

/* "Arka plan sesi" başlığı — sinematik */
#ambient-sound-row .sync-sub {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  margin-bottom: 10px !important;
  text-transform: uppercase;
  font-size: 10.5px !important;
}

/* Volume ikonu (hoparlör) yanında */
#ambient-sound-row > div:last-child svg {
  color: var(--study) !important;
  filter: drop-shadow(0 0 4px rgba(255,229,0,0.4));
}

/* =====================================================================
   FAZ 2 — DİĞER SAYFALAR SİNEMATİK REVİZE
   (Görevler + İstatistik)
   ================================================================= */

/* ========== 21. TABS (Görevler + İstatistik ortak) — sinematik pill'ler ========== */
#tasks-subtabs,
#breakdown-tabs {
  display: flex !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 14px !important;
}
#tasks-subtabs .tab,
#breakdown-tabs .tab {
  flex: 1 !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 220ms var(--ease) !important;
  text-align: center !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}
#tasks-subtabs .tab:hover,
#breakdown-tabs .tab:hover {
  color: var(--text-primary) !important;
  background: rgba(255,255,255,0.04) !important;
}
#tasks-subtabs .tab.active,
#breakdown-tabs .tab.active {
  background: rgba(255,229,0,0.12) !important;
  color: var(--study) !important;
  border-color: rgba(255,229,0,0.35) !important;
  box-shadow: 0 0 14px rgba(255,229,0,0.18), inset 0 0 0 1px rgba(255,229,0,0.1) !important;
}

/* ========== 22. GÖREVLER SAYFASI ========== */

/* Görev ekleme kutusu — sinematik cam kart */
.task-add-box {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin-bottom: 14px !important;
  backdrop-filter: blur(10px);
}
.task-add-box input[type="text"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  padding: 8px 4px 10px !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
  color: var(--text-primary);
}
.task-add-box input[type="text"]:focus {
  border-bottom-color: var(--study) !important;
  box-shadow: 0 1px 0 var(--study);
}
.task-add-controls {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap;
}
.task-add-controls select {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  flex: 1;
  min-width: 120px;
}

.task-pomo-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surf-1, rgba(255,255,255,0.04));
  border: 1px solid var(--hairline, rgba(255,255,255,0.1));
  border-radius: 10px;
  padding: 4px 6px;
}
.task-pomo-stepper span {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
}
.stepper-btn {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: var(--surf-1, rgba(255,255,255,0.05)) !important;
  border: 1px solid var(--hairline, rgba(255,255,255,0.12)) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.stepper-btn:hover {
  background: var(--surf-2, rgba(255,255,255,0.09)) !important;
  transform: none !important;
}

/* Görev listesi item'ları — sinematik cam kart, ilerleme çubuğu, XP/Coin rozetleri */
#task-list > * ,
#daily-quest-list > * {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  transition: all 220ms var(--ease) !important;
  position: relative;
  overflow: hidden;
}
#task-list > *:hover,
#daily-quest-list > *:hover {
  border-color: rgba(255,229,0,0.2) !important;
  background: rgba(255,229,0,0.03) !important;
}

/* Tamamlanan görev — yeşil tonlu */
#task-list > .completed,
#task-list > [data-completed="true"],
#daily-quest-list > .completed {
  background: rgba(111,232,111,0.05) !important;
  border-color: rgba(111,232,111,0.2) !important;
  opacity: 0.9;
}
#task-list > .completed::before,
#daily-quest-list > .completed::before {
  content: '✓';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6FE86F;
  color: #0a0c14;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(111,232,111,0.5);
}

/* Empty state — sinematik */
.empty-state {
  text-align: center;
  padding: 40px 20px !important;
  border: 1px dashed rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.02) !important;
}
.empty-state-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  background: rgba(255,229,0,0.08) !important;
  border: 1px solid rgba(255,229,0,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--study) !important;
}
.empty-state-icon svg { width: 26px; height: 26px; }
.empty-state-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  margin: 0 0 6px !important;
}
.empty-state-sub {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

/* Günlük görevler swap info badge */
#daily-quest-swap-info {
  background: rgba(255,229,0,0.1) !important;
  border: 1px solid rgba(255,229,0,0.3) !important;
  color: var(--study) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 0 10px rgba(255,229,0,0.15);
}

/* ========== 23. İSTATİSTİK SAYFASI ========== */

/* Hero: Bu haftanın dağılımı — büyük mor+sarı gradient */
#page-stats > .card-compact:first-of-type {
  background:
    radial-gradient(ellipse 400px 200px at 20% 20%, rgba(255,229,0,0.1), transparent 60%),
    linear-gradient(155deg, rgba(120,80,180,0.08), rgba(255,229,0,0.04)) !important;
  border: 1px solid rgba(255,229,0,0.18) !important;
  padding: 20px !important;
  position: relative;
  overflow: hidden;
}
#page-stats > .card-compact:first-of-type::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,229,0,0.15), transparent 65%);
  pointer-events: none;
}
#page-stats > .card-compact:first-of-type > * { position: relative; z-index: 1; }

#weekly-chart .wc-bar,
/* Weekly chart hover — bar üstünde değer tooltip'i */
/* Section label — sinematik micro-title */
#page-stats .section-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

/* Breakdown listesi — kurs/görev başına parlak sarı bar'lar */
#breakdown-list > * {
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: all 200ms;
}
#breakdown-list > *:hover {
  border-color: rgba(255,229,0,0.15) !important;
  background: rgba(255,229,0,0.03) !important;
}

/* Course bars — kurs bazlı progress bar'lar */
#course-bars > * {
  margin-bottom: 12px !important;
}
#course-bars .track,
#course-bars [class*="track"] {
  height: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
#course-bars .fill,
#course-bars [class*="fill"] {
  height: 100%;
  border-radius: 999px;
}

/* Goal calendar — 30 günlük ısı haritası */
#goal-calendar {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}
#goal-calendar > * {
  aspect-ratio: 1 !important;
  border-radius: 4px !important;
  transition: all 200ms;
}
#goal-calendar > *:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(255,229,0,0.5);
}
/* Yoğunluk sınıfları — mevcut kod bunları kullanıyor olabilir */
#goal-calendar .lvl-0 { background: rgba(255,255,255,0.04); }
#goal-calendar .lvl-1 { background: rgba(255,229,0,0.2); }
#goal-calendar .lvl-2 { background: rgba(255,229,0,0.4); }
#goal-calendar .lvl-3 { background: rgba(255,229,0,0.65); box-shadow: 0 0 6px rgba(255,229,0,0.3); }
#goal-calendar .lvl-4 { background: var(--study); box-shadow: 0 0 10px rgba(255,229,0,0.5); }

#goal-calendar-summary {
  margin-top: 10px !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  text-align: center;
}

/* Activity feed */
#activity-feed-list > * {
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Geçmiş oturumlar */
#history > * {
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  transition: all 200ms;
}
#history > *:hover {
  border-color: rgba(255,229,0,0.15) !important;
  background: rgba(255,229,0,0.03) !important;
}

/* Footer note */
.footer-note {
  text-align: center;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 16px !important;
  padding: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Export CSV button */
#export-csv-btn-2,
#export-csv-btn {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 200ms;
}
#export-csv-btn-2:hover,
#export-csv-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  transform: translateY(-1px);
}


/* ========== 26. FİX: Weekly chart mevcut yapıya sadık (sadece renk override) ========== */
#weekly-chart .wc-bar,
#weekly-chart .wc-bar-fill,
#weekly-chart [class*="wc-bar"],
#weekly-chart [class*="bar-fill"] {
  background: linear-gradient(180deg, var(--study), #FFA500) !important;
  box-shadow: 0 0 8px rgba(255,229,0,0.35) !important;
  border-radius: 4px 4px 2px 2px !important;
}
#weekly-chart .wc-label,
#weekly-chart [class*="label"] {
  color: var(--text-muted) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}
#weekly-chart .wc-val,
#weekly-chart [class*="val"] {
  color: var(--study) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(255,229,0,0.4);
}

/* ========== 27. FİX: Volume slider sadeleştir (taşma sorunu için) ========== */
#ambient-volume-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  outline: none !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important;
  padding: 0 !important;
  margin: 0 !important;
}
#ambient-volume-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border-radius: 999px;
}
#ambient-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -5px;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FFE500, #FFC107) !important;
  border: 2px solid rgba(255,255,255,0.85) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 0 8px rgba(255,229,0,0.4) !important;
  transition: transform 180ms var(--ease);
}
#ambient-volume-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
#ambient-volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE500, #FFC107);
  border: 2px solid rgba(255,255,255,0.85);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 0 8px rgba(255,229,0,0.4);
}
#ambient-volume-slider::-moz-range-track {
  background: rgba(255,255,255,0.08);
  height: 6px;
  border-radius: 999px;
}
#ambient-volume-slider::-moz-range-progress {
  background: linear-gradient(90deg, #FFA500, var(--study));
  height: 6px;
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(255,229,0,0.3);
}

/* =====================================================================
   FAZ 3 — MARKET + ARKADAŞLAR SAYFALARI
   ================================================================= */

/* ========== 28. MARKET SAYFASI ========== */

/* Coin hero card — büyük parlak coin sunumu */
#page-market .market-coin-hero {
  background:
    radial-gradient(ellipse 300px 180px at 15% 25%, rgba(255,229,0,0.2), transparent 60%),
    linear-gradient(155deg, rgba(255,229,0,0.14), rgba(255,140,50,0.05)) !important;
  border: 1px solid rgba(255,229,0,0.3) !important;
  padding: 18px 22px !important;
  margin-bottom: 16px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  position: relative !important;
}
#page-market .market-coin-hero::before {
  content: '';
  position: absolute;
  top: -45%; right: -18%;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255,229,0,0.2), transparent 65%);
  pointer-events: none;
  animation: marketGlow 5s ease-in-out infinite;
}
@keyframes marketGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
#page-market .market-coin-hero > * { position: relative; z-index: 1; }

#page-market .market-coin-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
#page-market .market-coin-value {
  font-family: var(--font-mono) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--study) !important;
  text-shadow: 0 0 20px rgba(255,229,0,0.5) !important;
  line-height: 1 !important;
}
#page-market .market-coin-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(255,229,0,0.18) !important;
  border: 1px solid rgba(255,229,0,0.35) !important;
  color: var(--study) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 20px rgba(255,229,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  animation: coinTilt 3s ease-in-out infinite;
}
@keyframes coinTilt {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* Market cards (Vurgu Rengi + Ambiyans Sesleri) — sinematik cam kart */
#page-market .card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#page-market .section-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* Grid layout for shop items (mockup'a uygun 3 sütun) */
#market-colors-page,
#market-sounds-page,
#market-colors,
#market-sounds {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important;
  gap: 10px !important;
}

/* Shop item card — mockup'taki dikey tema kartı */
#market-colors-page > *,
#market-sounds-page > *,
#market-colors > *,
#market-sounds > * {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 240ms var(--ease) !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  min-height: 110px !important;
}
#market-colors-page > *:hover,
#market-sounds-page > *:hover,
#market-colors > *:hover,
#market-sounds > *:hover {
  border-color: rgba(255,229,0,0.35) !important;
  background: rgba(255,229,0,0.05) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4), 0 0 20px rgba(255,229,0,0.1);
}

/* Sahip olunan / kullanımda item — yeşil vurgu */
#market-colors-page > .owned,
#market-sounds-page > .owned,
#market-colors > .owned,
#market-sounds > .owned {
  border-color: rgba(111,232,111,0.35) !important;
  background: rgba(111,232,111,0.05) !important;
}
#market-colors-page > .active,
#market-sounds-page > .active,
#market-colors > .active,
#market-sounds > .active {
  border-color: rgba(255,229,0,0.5) !important;
  background: rgba(255,229,0,0.08) !important;
  box-shadow: 0 0 20px rgba(255,229,0,0.2);
}
#market-colors-page > .active::after,
#market-sounds-page > .active::after,
#market-colors > .active::after,
#market-sounds > .active::after {
  content: 'Kullanımda';
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #6FE86F;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Renk swatch — büyük yuvarlak renk önizlemesi */
#market-colors > * > *:first-child,
#market-colors-page > * > *:first-child {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.1);
}

/* Ses ikonu wrapper */
#market-sounds > *,
#market-sounds-page > * {
  padding-top: 14px !important;
}
#market-sounds svg,
#market-sounds-page svg {
  color: var(--text-primary) !important;
  filter: none;
}

/* Fiyat / durum text */
#market-colors > * span,
#market-sounds > * span,
#market-colors-page > * span,
#market-sounds-page > * span {
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

/* Satın al butonu */
#market-colors button,
#market-sounds button,
#market-colors-page button,
#market-sounds-page button {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #0A0A0C !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  margin-top: 2px;
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), background-color 200ms ease !important;
}
#market-colors button:hover,
#market-sounds button:hover,
#market-colors-page button:hover,
#market-sounds-page button:hover {
  background: #EDEDED !important;
  transform: translateY(-1px);
}
#market-colors button:disabled,
#market-sounds button:disabled,
#market-colors-page button:disabled,
#market-sounds-page button:disabled {
  background: var(--surf-2, rgba(255,255,255,0.07)) !important;
  border-color: var(--hairline, rgba(255,255,255,0.1)) !important;
  color: var(--text-secondary) !important;
  cursor: default;
  transform: none !important;
}

/* ========== 29. ARKADAŞLAR SAYFASI ========== */

/* Odak kodu kutusu — sinematik parlak */
.friend-code-box {
  background: linear-gradient(135deg, rgba(255,229,0,0.1), rgba(255,229,0,0.03)) !important;
  border: 1px solid rgba(255,229,0,0.3) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 20px rgba(255,229,0,0.1);
}
.friend-code-box .code-text {
  font-family: var(--font-mono) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--study) !important;
  letter-spacing: 4px !important;
  text-shadow: 0 0 14px rgba(255,229,0,0.5);
}
#friend-code-copy-btn {
  background: rgba(255,229,0,0.15) !important;
  border: 1px solid rgba(255,229,0,0.35) !important;
  color: var(--study) !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  transition: all 220ms var(--ease);
}
#friend-code-copy-btn:hover {
  background: rgba(255,229,0,0.25) !important;
  transform: translateY(-1px);
}

/* Arkadaş ekle input */
#friend-add-input {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  color: var(--text-primary) !important;
}
#friend-add-input:focus {
  border-color: var(--study) !important;
  box-shadow: 0 0 0 2px rgba(255,229,0,0.15) !important;
}
#friend-add-btn {
  background: linear-gradient(135deg, #FFE500, #FFC107) !important;
  color: #1a1000 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(255,193,7,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all 220ms var(--ease);
}
#friend-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,193,7,0.4);
}

/* Bekleyen istekler kartı */
#friend-requests-section {
  background: rgba(255,229,0,0.05) !important;
  border-color: rgba(255,229,0,0.2) !important;
}
#friend-requests-list > * {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Sen (kullanıcı) rank'ı sarı vurgu (mockup gibi) */
/* Rank sayısı (1, 2, 3, ...) — büyük mono */
/* İlk 3 için taç ikonu (mockup'ta ilk 3 rütbede taç var) */
/* Avatar dairesi */
/* İsim */
/* Süre / XP — sağ tarafta sarı chip */
/* Boş liste durumu */
#friends-ranking-list:empty::after,
#friends-ranking-list .empty::after {
  content: 'Henüz sıralaman yok — bir arkadaş ekle ve haftaya yarışın!';
  display: block;
  padding: 30px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* Hedef banner (mockup #7'de altta "Bu hafta ilk 3'e gir!" gibi) */
.friends-goal-banner,
#page-friends .goal-banner {
  background: linear-gradient(135deg, rgba(255,229,0,0.14), rgba(255,140,50,0.05)) !important;
  border: 1px solid rgba(255,229,0,0.3) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  margin-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 0 16px rgba(255,229,0,0.12);
}

/* =====================================================================
   FAZ 4 — YENİ ÖZELLİKLER (features.js modülü için)
   ================================================================= */

/* ========== 30. ODAK MODU KISAYOL GÖSTERGESİ ========== */
#focus-shortcuts-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  padding: 6px 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10.5px;
  color: rgba(255,255,255,0.6);
  z-index: 4;
  pointer-events: none;
}
#focus-shortcuts-hint span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#focus-shortcuts-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--study);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
}
@media (max-width: 479px) {
  #focus-shortcuts-hint { display: none; }
}

/* ========== 31. HAFTALIK RAPOR MODAL — Menekşe temaya geçiş (Ortak Odak modalıyla aynı dil) ========== */
#weekly-report-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background:
    radial-gradient(ellipse 700px 560px at 50% 20%, var(--violet-glow), transparent 60%),
    rgba(6,7,10,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
}
.wr-content {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--violet-500) 8%), var(--bg)) !important;
  border: 1px solid rgba(106,92,255,0.28);
  border-radius: 22px;
  /* ODAKLA: .wr-card artık kendi arka planı/padding'ini taşıyor (bkz. aşağıda —
     html2canvas #wr-card'ı yakaladığında ebeveynin (bu kuralın) arka planı görüntüye
     hiç dahil olmuyordu, üretilen PNG şeffaf çıkıyordu). Çift padding oluşmasın diye
     bu kabuğun kendi padding'i küçültüldü; asıl görsel ağırlığı artık kart taşıyor. */
  padding: 16px 14px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,0.65), 0 0 60px var(--violet-glow), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: wrPop 380ms cubic-bezier(.22,1,.36,1);
}
@keyframes wrPop {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.wr-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* ODAKLA: html2canvas sadece #wr-card'ın kendi arka planını yakalıyor, .wr-content'in
     (ebeveyn) arka planını değil — bu yüzden paylaşılan PNG şeffaf ve dolgusuz çıkıyordu.
     Kartın kendi opak arka planı/padding/köşe yuvarlaklığı burada, .wr-content ile aynı
     görsel dile (menekşe tonlu üstten alta geçiş) ama DEĞİŞİK bir teknikle tanımlanıyor:
     .wr-content'teki color-mix() burada kullanılamıyor — Chrome onu getComputedStyle'da
     html2canvas'ın (vendored, güncel olmayan) renk ayrıştırıcısının desteklemediği
     color(srgb-linear ...) sözdizimine çeviriyor ve yakalama "unsupported color function"
     hatasıyla tamamen çöküyor (gerçek html2canvas çağrısıyla doğrulandı). Onun yerine düz
     rgba() ton katmanı + var(--surface-2)/var(--bg) arası düz gradient kullanılıyor — aynı
     temaya-duyarlı görünüm, html2canvas-güvenli. */
  background:
    linear-gradient(180deg, rgba(106,92,255,0.10), rgba(106,92,255,0) 55%),
    linear-gradient(180deg, var(--surface-2), var(--bg));
  padding: 22px 20px;
  border-radius: 18px;
}
.wr-card-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.wr-card-ring {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--violet-400);
  border-right-color: transparent;
  transform: rotate(45deg);
  display: inline-block;
}
.wr-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.wr-empty {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
  padding: 30px 10px;
}
.wr-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 200ms;
}
.wr-close:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); }
.wr-close svg { width: 14px; height: 14px; }

.wr-header { text-align: center; margin-bottom: 20px; }
.wr-emoji { font-size: 40px; margin-bottom: 6px; filter: drop-shadow(0 0 14px var(--violet-glow-strong)); }
.wr-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.wr-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Hero — büyük streak sayısı */
.wr-hero {
  background: linear-gradient(135deg, rgba(106,92,255,0.20), rgba(154,140,255,0.08));
  border: 1px solid rgba(106,92,255,0.32);
  border-radius: 18px;
  padding: 24px 20px;
  margin-bottom: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wr-hero::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%; transform: translateX(-50%);
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--violet-glow-strong), transparent 65%);
  pointer-events: none;
  animation: streakFlicker 4s ease-in-out infinite;
}
.wr-hero-num {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 900;
  color: var(--violet-ink);
  text-shadow: 0 0 24px var(--violet-glow-strong);
  line-height: 1;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.wr-hero-label {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--violet-400);
  letter-spacing: 1px;
  text-shadow: 0 0 8px var(--violet-glow);
  position: relative;
}

/* Alev — seri uzadıkça büyüyen/parlayan nabız efekti, motive mesajıyla aynı eşikler (3/7/14/30) */
.wr-flame {
  display: inline-block;
  font-size: 15px;
  filter: drop-shadow(0 0 4px rgba(255,140,60,0.5));
  animation: wrFlameFlicker 2.2s ease-in-out infinite;
  transform-origin: bottom center;
  vertical-align: -1px;
}
@keyframes wrFlameFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.07) rotate(-3deg); }
  50% { transform: scale(0.96) rotate(2deg); }
  75% { transform: scale(1.05) rotate(-1deg); }
}
.wr-flame[data-tier="1"] { font-size: 16px; }
.wr-flame[data-tier="2"] {
  font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(255,140,60,0.6));
  animation-duration: 1.8s;
}
.wr-flame[data-tier="3"] {
  font-size: 20px;
  filter: drop-shadow(0 0 11px rgba(255,120,60,0.7));
  animation-duration: 1.5s;
}
.wr-flame[data-tier="4"] {
  font-size: 23px;
  filter: drop-shadow(0 0 10px rgba(200,140,255,0.75)) drop-shadow(0 0 14px rgba(255,140,60,0.55));
  animation-duration: 1.15s;
}
@media (prefers-reduced-motion: reduce) {
  .wr-flame { animation: none; }
}

/* Tek cümlelik içgörü — 7 günlük grafiğin yerine geçti, veri yoksa JS ile gizlenir */
.wr-insight {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(106,92,255,0.07);
  border: 1px solid rgba(106,92,255,0.18);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--violet-ink);
  line-height: 1.4;
  animation: wrInsightIn 420ms ease-out 120ms backwards;
}
@keyframes wrInsightIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3'lü stat grid */
.wr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.wr-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.wr-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.wr-stat-val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Level ilerleme halkası — sonraki seviyeye kalan yüzdeyi dairesel gösterir */
.wr-level-ring {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 3px auto 0;
}
.wr-level-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.wr-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4; }
.wr-ring-fill {
  fill: none;
  stroke: var(--violet-400);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 113.1;
  filter: drop-shadow(0 0 4px var(--violet-glow));
  transition: stroke-dashoffset 900ms cubic-bezier(.22,1,.36,1);
}
.wr-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Actions */
.wr-actions {
  display: flex;
  gap: 10px;
  /* .wr-card artık kendi kutusu (arka plan+padding) olduğu için altına biraz boşluk
     gerekiyor — önceden bu boşluğa gerek yoktu (kart görünmez sınırlıydı). */
  margin-top: 16px;
}
.wr-share {
  flex: 1;
  padding: 12px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
}
.wr-share:hover { background: rgba(255,255,255,0.1) !important; }
.wr-primary {
  flex: 1;
  padding: 12px !important;
  background: var(--cta) !important;
  color: var(--cta-ink, #fff) !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--violet-glow), inset 0 1px 0 rgba(255,255,255,0.16);
}
.wr-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--violet-glow-strong); }

/* ========== 31b. YÖNETİCİ PANELİ — Menekşe temaya geçiş (Ortak Odak modalıyla aynı dil,
   bkz. .rm-panel). Önceden nötr gri .card kullanıyordu, marka rengiyle bağlantısızdı. */
#admin-modal-overlay,
#feedback-modal-overlay,
#market-overlay,
#privacy-modal-overlay,
#onboarding-modal-overlay {
  background:
    radial-gradient(ellipse 700px 560px at 50% 20%, var(--violet-glow), transparent 60%),
    rgba(6,7,10,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.admin-panel-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--violet-500) 8%), var(--bg));
  border: 1px solid rgba(106,92,255,0.24);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 60px var(--violet-glow), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: wrPop 380ms cubic-bezier(.22,1,.36,1);
  position: relative;
}
.admin-panel-header { display: flex; align-items: center; gap: 10px; }
.admin-panel-icon {
  width: 34px; height: 34px; min-width: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(106,92,255,0.14);
  border: 1px solid rgba(106,92,255,0.3);
  font-size: 16px;
  filter: drop-shadow(0 0 8px var(--violet-glow));
  animation: adminIconPulse 2.6s ease-in-out infinite;
}
@keyframes adminIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(106,92,255,0.35); }
  50% { box-shadow: 0 0 0 6px rgba(106,92,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .admin-panel-icon { animation: none; }
}

/* Geri Bildirim gönderim onayı — 💬 ikonu ✓ olur, tek seferlik yeşil burst (bkz. feedback-submit-btn
   onclick, index.html). .admin-panel-icon.success-burst iki class'la daha spesifik olduğu için
   sürekli menekşe pulse'ı (adminIconPulse) geçici olarak ezer. */
.admin-panel-icon.success-burst {
  background: rgba(111,232,111,0.18) !important;
  border-color: rgba(111,232,111,0.5) !important;
  color: #6FE86F;
  animation: feedbackSuccessBurst 650ms cubic-bezier(.22,1,.36,1);
}
@keyframes feedbackSuccessBurst {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(111,232,111,0.5); }
  40% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(111,232,111,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(111,232,111,0); }
}

/* Textarea/input odak halkası — oda modalındaki .rm-input:focus ile aynı dil */
.wr-focus-input:focus {
  outline: none;
  border-color: rgba(154,140,255,0.5) !important;
  box-shadow: 0 0 0 3px var(--violet-glow);
}
#feedback-submit-btn:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none !important;
}

/* Kategori satırları — her kategori kendi vurgu rengini alır (uygulamanın sayfa-bazlı
   accent renk sistemiyle aynı aile: --accent-friends/tasks/stats/market, bkz. FAZ 8 RENK SİSTEMİ),
   hover'da hafif kalkma + parlama + ok rengi değişimi olur. Sadece admin panelini kapsar,
   Ayarlar sayfasındaki .settings-cat-row'u etkilemez. */
#admin-category-list .settings-cat-row {
  --cat-color: var(--violet-400);
  position: relative;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
  animation: wrRowIn 360ms ease-out backwards;
}
#admin-category-list .settings-cat-row:nth-child(1) { animation-delay: 40ms; }
#admin-category-list .settings-cat-row:nth-child(2) { animation-delay: 90ms; }
#admin-category-list .settings-cat-row:nth-child(3) { animation-delay: 140ms; }
#admin-category-list .settings-cat-row:nth-child(4) { animation-delay: 190ms; }
@keyframes wrRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
#admin-category-list .settings-cat-row[data-tab="users"] { --cat-color: #7FA9FF; }
#admin-category-list .settings-cat-row[data-tab="maintenance"] { --cat-color: #E8B93D; }
#admin-category-list .settings-cat-row[data-tab="announcement"] { --cat-color: #43D9FF; }
#admin-category-list .settings-cat-row[data-tab="feedback"] { --cat-color: #B98CFF; }
#admin-category-list .settings-cat-icon {
  background: color-mix(in srgb, var(--cat-color) 16%, transparent) !important;
  color: var(--cat-color) !important;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
#admin-category-list .settings-cat-row:hover {
  background: color-mix(in srgb, var(--cat-color) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--cat-color) 35%, transparent) !important;
  transform: translateX(3px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--cat-color) 18%, transparent);
}
#admin-category-list .settings-cat-row:hover .settings-cat-icon {
  transform: scale(1.1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--cat-color) 50%, transparent);
}
#admin-category-list .settings-cat-chevron {
  transition: color 220ms var(--ease), transform 220ms var(--ease);
}
#admin-category-list .settings-cat-row:hover .settings-cat-chevron {
  color: var(--cat-color) !important;
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  #admin-category-list .settings-cat-row { animation: none; }
}

/* ========== 32. GÖREV MODU TOGGLE ========== */
#task-mode-toggle {
  background: rgba(255,229,0,0.08) !important;
  border: 1px solid rgba(255,229,0,0.28) !important;
  color: var(--study) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 200ms;
  letter-spacing: 0.3px;
  margin-left: 4px;
}
#task-mode-toggle:hover {
  background: rgba(255,229,0,0.18) !important;
  transform: translateY(-1px);
}

/* =====================================================================
   FAZ 5 — HALKA PROGRESS + SİNEMATİK AURA
   ================================================================= */

/* ========== 33. Hero halka artık features.js kontrolünde ==========
   Önceki !important dashoffset:0 (tam dolu) davranışını iptal et.
   features.js sayaç akarken dashoffset'i günceller. */
.hero-ring-fg {
  stroke-dasharray: 691.15 !important;
  stroke-dashoffset: 691.15 !important; /* başlangıçta boş */
  stroke-linecap: butt !important;
  filter: drop-shadow(0 0 12px rgba(255,229,0,0.55)) !important;
  opacity: 0.35;
  transition: stroke-dashoffset 900ms linear, opacity 400ms ease;
}

/* ========== 34. Halka etrafında sinematik pulse aura ==========
   Sayaç akarken halkanın çevresinde yumuşak bir "nefes alma" glow'u. */
.hero-timer-ring-wrap {
  position: relative;
}
.hero-timer-ring-wrap::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  /* ODAKLA: kullanıcı kararı — sayaç akarken çıkan sarı aura menekşeye çevrildi */
  background: radial-gradient(circle, var(--violet-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 500ms ease;
  animation: heroAuraPulse 3.5s ease-in-out infinite;
}
/* Sayaç akarken aura görünsün — .running class'ını body'ye ekleyeceğiz JS'ten */
body.timer-active .hero-timer-ring-wrap::before {
  opacity: 1;
}
@keyframes heroAuraPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* ODAKLA: kullanıcı kararı — eski "nefes alma" text-shadow animasyonu (sarı) artık
   #timer-main'in modern birim-kutu tasarımıyla (body.timer-active .tmu-unit,
   satır ~7195) geçersiz — kaldırıldı. */

/* Halka gradient ring — daha canlı sarı */
.hero-ring-bg {
  stroke: rgba(255,255,255,0.06) !important;
  stroke-width: 10 !important;
}

/* =====================================================================
   FAZ 6 — ODAK MODU HALKA PROGRESS FIX
   ================================================================= */

/* focus-mode-ring artık features.js kontrolünde — statik dashoffset'i override et */
.focus-ring-fg {
  stroke-dasharray: 810.53 !important;
  stroke-dashoffset: 810.53 !important; /* başlangıçta boş — JS güncelleyecek */
  stroke-linecap: round !important;
  filter: drop-shadow(0 0 18px rgba(255,229,0,0.85)) !important;
  opacity: 0.35;
  transition: stroke-dashoffset 900ms linear, opacity 400ms ease;
}

/* Odak Modu halkası etrafında da pulse aura */
.focus-mode-ring-wrap {
  position: relative;
}
.focus-mode-ring-wrap::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,229,0,0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 500ms ease;
  animation: heroAuraPulse 3.5s ease-in-out infinite;
}
body.timer-active .focus-mode-ring-wrap::before {
  opacity: 1;
}

/* Odak Modu sayaç text'i akarken breath */
body.timer-active .focus-mode-ring-time {
  animation: focusModeTimerBreath 2s ease-in-out infinite;
}
@keyframes focusModeTimerBreath {
  0%, 100% { text-shadow: 0 0 30px rgba(255,229,0,0.4); }
  50% { text-shadow: 0 0 40px rgba(255,229,0,0.85), 0 0 70px rgba(255,229,0,0.35); }
}

/* =====================================================================
   FAZ 7 — ARKADAŞ PROFİL DETAY MODAL
   ================================================================= */

#friend-profile-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background:
    radial-gradient(ellipse 620px 520px at 50% 25%, rgba(255,229,0,0.1), transparent 65%),
    rgba(8,9,10,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
}

.fpm-content {
  width: 100%;
  max-width: 420px;
  background:
    radial-gradient(ellipse 300px 200px at 20% 20%, rgba(255,229,0,0.1), transparent 60%),
    linear-gradient(155deg, rgba(120,80,180,0.08), rgba(255,229,0,0.03));
  border: 1px solid rgba(255,229,0,0.25);
  border-radius: 22px;
  padding: 26px 24px 22px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px rgba(255,229,0,0.12);
  animation: fpmPop 380ms cubic-bezier(.22,1,.36,1);
}
@keyframes fpmPop {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.fpm-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 200ms;
}
.fpm-close:hover { background: rgba(255,255,255,0.12); color: var(--text-primary); transform: rotate(90deg); }
.fpm-close svg { width: 14px; height: 14px; }

/* Header — avatar + isim + title */
.fpm-header { text-align: center; margin-bottom: 20px; }
.fpm-avatar {
  width: 84px; height: 84px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,229,0,0.25), rgba(120,80,180,0.15));
  border: 2px solid rgba(255,229,0,0.4);
  box-shadow: 0 0 32px rgba(255,229,0,0.25), inset 0 0 0 3px rgba(0,0,0,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: var(--study);
  text-shadow: 0 0 12px rgba(255,229,0,0.5);
  overflow: hidden;
}
.fpm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fpm-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.fpm-title {
  font-size: 12px;
  color: var(--study);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Friend row hover (mevcut) — pointer'ı belirginleştir */
#friends-ranking-list .friend-row {
  cursor: pointer;
  transition: all 220ms var(--ease);
}
#friends-ranking-list .friend-row:hover {
  border-color: rgba(255,229,0,0.3) !important;
  background: rgba(255,229,0,0.05) !important;
  transform: translateX(3px);
}

/* =====================================================================
   FAZ 8 — PREMIUM REFINEMENT
   "Discord + Riot Client + Linear" — asil, sofistike, sayfa-bazlı
   ================================================================= */

/* ========== 35. RENK SİSTEMİ — Sayfa bazlı vurgu renkler ========== */
:root {
  /* Primary asil sarı (CTA'lar için — Başlat, primary butonlar) */
  --gold: #E8B93D;
  --gold-soft: rgba(232, 185, 61, 0.14);
  --gold-line: rgba(232, 185, 61, 0.28);

  /* Sayfa vurgu renkleri (accent) */
  --accent-home: #E8B93D;     /* warm amber — çalışma zamanı */
  --accent-tasks: #6FE86F;    /* emerald green — tamamlama */
  --accent-market: #B98CFF;   /* violet — premium */
  --accent-friends: #7FA9FF;  /* sky blue — sosyal */
  --accent-stats: #43D9FF;    /* cyan — data */
  --accent-settings: #8B96A6; /* neutral silver */

  /* Elevation surface'ları */
  --surf-0: rgba(255,255,255,0.02);  /* deepest */
  --surf-1: rgba(255,255,255,0.04);  /* base card */
  --surf-2: rgba(255,255,255,0.06);  /* raised card */
  --surf-3: rgba(255,255,255,0.09);  /* floating card */

  /* Subtle borders (border yerine tercih) */
  --hairline: rgba(255,255,255,0.06);
  --hairline-strong: rgba(255,255,255,0.1);
}

/* Düz simsiyah zemin — menekşe aurora daireleri kaldırıldı (kullanıcı kararı).
   CSS içinde en son tanım + !important olduğu için JS henüz çalışmadan önceki
   ilk anlık boyamada (flash) da doğru görünür. */
body:not(.centered-auth) {
  background: #000000 !important;
}

/* ========== 36. INPUT ALANLARI — Discord tarzı iç yüzey ========== */
body:not(.centered-auth) input[type="text"],
body:not(.centered-auth) input[type="email"],
body:not(.centered-auth) input[type="password"],
body:not(.centered-auth) input[type="number"],
body:not(.centered-auth) input[type="date"],
body:not(.centered-auth) select,
body:not(.centered-auth) textarea {
  background: var(--surf-1) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  transition: background 200ms var(--ease), box-shadow 200ms var(--ease) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
body:not(.centered-auth) input:focus,
body:not(.centered-auth) select:focus,
body:not(.centered-auth) textarea:focus {
  background: var(--surf-2) !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 3px rgba(232,185,61,0.12) !important;
}
body:not(.centered-auth) input::placeholder,
body:not(.centered-auth) textarea::placeholder {
  color: rgba(255,255,255,0.28) !important;
}

/* Ekle butonu (input yanındaki) — Discord tarzı yumuşak vurgu */
body:not(.centered-auth) .add-row #add-course-btn,
body:not(.centered-auth) #friend-add-btn {
  background: linear-gradient(180deg, var(--gold), #C89A2E) !important;
  color: #14100A !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(200,154,46,0.3), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* ========== 37. CARD ELEVATION HİYERARŞİSİ ========== */
/* Border kaldır, elevation kullan */
body:not(.centered-auth) .card {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 8px 24px rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
body:not(.centered-auth) .card-hero {
  background: var(--surf-2) !important;
  border-color: var(--hairline-strong) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 16px 40px rgba(0,0,0,0.4),
    0 4px 12px rgba(0,0,0,0.2) !important;
}
body:not(.centered-auth) .card-compact {
  background: var(--surf-1) !important;
  border-color: var(--hairline) !important;
}

/* ========== 38. LEVEL BAR + STAT CARDS — sadeleştir ========== */
.hero-level-card {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
.hero-level-fill {
  background: linear-gradient(90deg, #C89A2E, var(--gold)) !important;
  box-shadow: 0 0 8px rgba(232,185,61,0.35) !important;
}

.hero-stat-card {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}
.hero-stat-card:hover {
  background: var(--surf-2) !important;
  border-color: var(--hairline-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25) !important;
}
.hero-stat-icon.flame { color: #FF7E4A !important; filter: drop-shadow(0 0 4px rgba(255,126,74,0.4)) !important; }
.hero-stat-icon.bolt { color: var(--gold) !important; filter: drop-shadow(0 0 4px rgba(232,185,61,0.4)) !important; }
.hero-stat-icon.gem { color: var(--accent-friends) !important; filter: drop-shadow(0 0 4px rgba(127,169,255,0.4)) !important; }

/* ========== 40. SAYFA-BAZLI VURGU RENKLERİ ========== */
/* Nav item aktif — sayfa rengiyle */
#bottom-nav .nav-item[data-page="home"].active {
  color: var(--accent-home) !important;
  background: rgba(232,185,61,0.09) !important;
  border-color: rgba(232,185,61,0.22) !important;
}
#bottom-nav .nav-item[data-page="tasks"].active {
  color: var(--accent-tasks) !important;
  background: rgba(111,232,111,0.09) !important;
  border-color: rgba(111,232,111,0.22) !important;
}
#bottom-nav .nav-item[data-page="market"].active {
  color: var(--accent-market) !important;
  background: rgba(185,140,255,0.09) !important;
  border-color: rgba(185,140,255,0.22) !important;
}
#bottom-nav .nav-item[data-page="friends"].active {
  color: var(--accent-friends) !important;
  background: rgba(127,169,255,0.09) !important;
  border-color: rgba(127,169,255,0.22) !important;
}
#bottom-nav .nav-item[data-page="stats"].active {
  color: var(--accent-stats) !important;
  background: rgba(67,217,255,0.09) !important;
  border-color: rgba(67,217,255,0.22) !important;
}
#bottom-nav .nav-item[data-page="settings"].active {
  color: var(--accent-settings) !important;
  background: rgba(139,150,166,0.09) !important;
  border-color: rgba(139,150,166,0.22) !important;
}

/* Sayfa scope — subtle tinted background */
#page-tasks::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 800px 400px at 50% -100px, rgba(111,232,111,0.04), transparent 70%);
  pointer-events: none;
}
#page-market::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 800px 400px at 50% -100px, rgba(185,140,255,0.05), transparent 70%);
  pointer-events: none;
}
#page-friends::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 800px 400px at 50% -100px, rgba(127,169,255,0.05), transparent 70%);
  pointer-events: none;
}
#page-stats::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 800px 400px at 50% -100px, rgba(67,217,255,0.04), transparent 70%);
  pointer-events: none;
}

/* Görevler sayfası — tab active yeşil */
#tasks-subtabs .tab.active {
  background: rgba(111,232,111,0.12) !important;
  color: var(--accent-tasks) !important;
  border-color: rgba(111,232,111,0.28) !important;
  box-shadow: 0 0 12px rgba(111,232,111,0.15) !important;
}

/* İstatistik sayfası — tab active cyan */
#breakdown-tabs .tab.active {
  background: rgba(67,217,255,0.12) !important;
  color: var(--accent-stats) !important;
  border-color: rgba(67,217,255,0.28) !important;
  box-shadow: 0 0 12px rgba(67,217,255,0.15) !important;
}

/* Market coin hero — mor (violet accent) */
#page-market .market-coin-hero {
  background:
    linear-gradient(155deg, rgba(185,140,255,0.14), rgba(185,140,255,0.03)) !important;
  border-color: rgba(185,140,255,0.28) !important;
}
#page-market .market-coin-value {
  color: var(--accent-market) !important;
  text-shadow: 0 0 16px rgba(185,140,255,0.4) !important;
}
#page-market .market-coin-icon {
  background: rgba(185,140,255,0.15) !important;
  border-color: rgba(185,140,255,0.32) !important;
  color: var(--accent-market) !important;
}

/* ========== 41. SARI BORDER'LARI SUSTUR ========== */
/* Hero halka etrafındaki agresif sarı border → yumuşat */
#page-home .card-hero:has(#timer-main) {
  border: 1px solid var(--hairline) !important;
  background: var(--surf-2) !important;
}
#page-home .card-hero:has(#timer-main)::before {
  background: radial-gradient(circle, rgba(232,185,61,0.06), transparent 60%) !important;
}
/* ODAKLA: kullanıcı kararı — Odak Zamanı kartının arkasındaki backdrop-filter
   blur (satır ~277, var(--glass-blur)) kartın arkasını bulanık gösteriyordu,
   kaldırıldı; kalan hafif sarı radial glow da menekşeye çevrildi. */
#page-home .card-hero:has(#timer-main) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#page-home .card-hero:has(#timer-main)::before {
  background: radial-gradient(circle, var(--violet-glow), transparent 60%) !important;
}
/* ODAKLA: kartın içindeki "Şu an X kişi odaklanıyor" rozeti de .pomodoro-cycle-badge
   class'ından (--study, parlak sarı #FFE500) sarı renk alıyordu — sadece bu rozet
   (id ile) menekşeye çevrildi, pomodoro ayarlarındaki aynı class'lı tur etiketine dokunulmadı. */
#live-count-badge {
  color: var(--violet-ink) !important;
  background: rgba(106,92,255,0.12) !important;
}
/* ...ve şimdi ertelenen kısım da tamamlandı: "Tamamlanan tur" rozeti de menekşeye geçti. */
#pomodoro-cycle-label {
  color: var(--violet-ink) !important;
  background: rgba(106,92,255,0.12) !important;
  box-shadow: 0 0 12px var(--violet-glow);
}

/* Pomodoro Çalışma/Mola stepper'ları — cam panel + değer değişince pop (bkz. otp-pop),
   .stepper-btn'in global gri stilini (odakla-cinematic.css ~1677) bu alanda menekşeye çeviriyor. */
.pomo-stepper-group {
  background: rgba(106,92,255,0.05);
  border: 1px solid rgba(106,92,255,0.16);
  border-radius: 14px;
  padding: 10px 16px;
}
.pomo-stepper-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  text-align: center;
}
.pomo-stepper-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.pomo-stepper-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--violet-ink);
  min-width: 26px;
  display: inline-block;
  text-align: center;
  text-shadow: 0 0 8px var(--violet-glow);
}
.pomo-stepper-value.stepper-pop { animation: otp-pop 0.22s cubic-bezier(.34,1.56,.64,1); }
#pomodoro-settings-row .stepper-btn:hover {
  background: rgba(106,92,255,0.16) !important;
  border-color: rgba(106,92,255,0.4) !important;
  color: var(--violet-ink) !important;
}
#pomodoro-settings-row .stepper-btn:active {
  transform: scale(0.88) !important;
}
.pomodoro-icon {
  background: rgba(106,92,255,0.12) !important;
}

/* Ambient card yumuşat */
.focus-mode-ambient-card {
  background: var(--surf-1) !important;
  border-color: var(--hairline) !important;
}
.focus-mode-badge {
  background: rgba(232,185,61,0.10) !important;
  border-color: rgba(232,185,61,0.22) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 16px rgba(232,185,61,0.12) !important;
}

/* Streak-goal-card yumuşat — FAZ 33c bento redesign: bu kural kaldırıldı.
   Bu, dosyada daha önce (satır ~1256) #streak-goal-card için tanımlanmış
   background/border !important kuralını üstüne yazan İKİNCİ bir override'dı
   (aynı specificity, dosyada daha sonra geldiği için cascade'i o kazanıyordu).
   İkisi de kaldırıldığına göre kart artık .hb-cell/.hb-cell-goal class'ından
   düz bento arkaplanını (var(--surf-1) + var(--hairline)) alıyor. */

/* Level path overlay hero cinsinden */
#level-hero-card {
  background: linear-gradient(155deg, rgba(232,185,61,0.08), rgba(232,185,61,0.01)) !important;
  border: 1px solid rgba(232,185,61,0.2) !important;
}

/* Başlat butonu — Menekşe redesign: evrensel menekşe gradient CTA pill */
#page-home #start-btn {
  position: relative !important;
  overflow: hidden !important;
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 2px 4px rgba(0,0,0,0.35),
    0 14px 32px -10px var(--cta-glow) !important;
  transition: transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms ease, background-color 200ms ease !important;
}
#page-home #start-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  transition: left 600ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
#page-home #start-btn:hover {
  background: var(--cta-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 4px 8px rgba(0,0,0,0.4),
    0 20px 40px -10px var(--cta-glow-strong) !important;
}
#page-home #start-btn:hover::after { left: 125%; }
#page-home #start-btn:active {
  transform: translateY(-1px) scale(0.98) !important;
  background: var(--cta-active) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 2px 4px rgba(0,0,0,0.4) !important;
}

/* ========== 42. TYPOGRAPHY — sayısal öğeler ========== */
.hero-stat-value,
.settings-mini-stat-val,
.wr-hero-num,
.wr-stat-val,
.friend-row-xp,
#streak-count,
#home-level-num,
#home-streak-num,
#home-xp-num,
#home-coin-num {
  font-family: var(--font-mono) !important;
  font-feature-settings: "tnum" 1;
}

/* Section label typography */
.section-label,
#page-settings .settings-group-title,
#page-stats .section-label,
#page-market .section-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
}

/* ========== 43. AMBIENT CHIP'LERİ YUMUŞAT ========== */
.ambient-chip,
#ambient-chip-row > button,
#ambient-chip-row > div {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
}
.ambient-chip.active,
.ambient-chip.selected {
  background: rgba(232,185,61,0.10) !important;
  border-color: rgba(232,185,61,0.28) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 12px rgba(232,185,61,0.15) !important;
}

/* ========== 44. LEVEL/COİN BADGE'LARINI YUMUŞAT ========== */
.hero-level-card {
  border: 1px solid var(--hairline) !important;
  background: var(--surf-1) !important;
}
.hero-level-label {
  color: rgba(255,255,255,0.55) !important;
  font-weight: 700 !important;
}
.hero-level-pct {
  color: rgba(255,255,255,0.4) !important;
  font-family: var(--font-mono) !important;
}


/* =====================================================================
   FAZ 9 — ARKADAŞLAR SAYFASI KOMPLE YENİDEN
   Riot Client + Linear tarzı — floating cards, taç badge, XP progress
   ================================================================= */

/* ========== 45. ARKADAŞLAR — Kod paylaşım kutusu ========== */
.friend-code-box {
  background: linear-gradient(135deg, rgba(127,169,255,0.10), rgba(127,169,255,0.02)) !important;
  border: 1px solid rgba(127,169,255,0.22) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(127,169,255,0.1) !important;
}
.friend-code-box .code-text {
  font-family: var(--font-mono) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--accent-friends) !important;
  letter-spacing: 5px !important;
  text-shadow: 0 0 14px rgba(127,169,255,0.35) !important;
}
#friend-code-copy-btn {
  background: rgba(127,169,255,0.15) !important;
  border: 1px solid rgba(127,169,255,0.32) !important;
  color: var(--accent-friends) !important;
}
#friend-code-copy-btn:hover {
  background: rgba(127,169,255,0.25) !important;
  transform: translateY(-1px);
}

/* Section label — bu hafta arkadaşların arasında */
#page-friends .section-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  margin: 4px 4px 12px !important;
}

/* ========== 46. LEADERBOARD LİSTESİ ========== */

/* Container temizle */
#friends-ranking-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Her satır — DÜZ 3-parçalı: [avatar+rank] [isim+meta] [XP] */
#friends-ranking-list > * {
  all: unset;
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 260ms var(--ease) !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  min-height: 68px !important;
  box-sizing: border-box !important;
}
/* Rank numarası — kaldırıldı, avatar+badge kombinasyonu göstereceğiz */
#friends-ranking-list .friend-rank-num {
  all: unset !important;
  position: absolute !important;
  top: -6px !important;
  left: 42px !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: var(--surf-3) !important;
  border: 1px solid var(--hairline-strong) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 0 6px !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

/* AVATAR (sol) — 48px daire */
#friends-ranking-list .friend-row-name::before {
  content: attr(data-initial);
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(127,169,255,0.2), rgba(127,169,255,0.06)) !important;
  border: 1px solid rgba(127,169,255,0.25) !important;
  display: none !important; /* JS ile ekleyeceğiz, şimdi devre dışı */
}

/* Sol grid hücresi — avatar için, JS ile inject */
#friends-ranking-list > * > *:first-child {
  /* Bu ilk element rank-num, biz kendi avatar circle'ımızı ekliyoruz */
}

/* İSİM + META (orta grid col) */
#friends-ranking-list .friend-row-name {
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
#friends-ranking-list .friend-row-name > * {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Sadece isim node'una hedefli */
#friends-ranking-list .friend-row-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
}
#friends-ranking-list .friend-row-name .sync-sub {
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.4) !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* XP (sağ) — mono font, ikonlu */
#friends-ranking-list .friend-row-xp {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#friends-ranking-list .friend-row-xp::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L4 14h6l-1 8l9-12h-6z'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L4 14h6l-1 8l9-12h-6z'/></svg>") center/contain no-repeat;
  opacity: 0.8;
}

/* ========== 47. 1. SIRA — ALTIN FLOATING CARD ========== */
#friends-ranking-list > *:first-child {
  background:
    linear-gradient(135deg, rgba(232,185,61,0.12), rgba(232,185,61,0.02)) !important;
  border-color: rgba(232,185,61,0.32) !important;
  box-shadow:
    0 12px 36px rgba(0,0,0,0.35),
    0 0 40px rgba(232,185,61,0.08),
    inset 0 1px 0 rgba(232,185,61,0.18) !important;
  padding: 16px 18px !important;
}
#friends-ranking-list > *:first-child .friend-rank-num {
  background: linear-gradient(135deg, var(--gold), #C89A2E) !important;
  border-color: rgba(232,185,61,0.5) !important;
  color: #14100A !important;
  box-shadow: 0 4px 12px rgba(200,154,46,0.35) !important;
}
#friends-ranking-list > *:first-child .friend-row-xp {
  color: var(--gold) !important;
  font-size: 16px !important;
}
/* Taç ikonu — kart sağ üstünde tepede */
#friends-ranking-list > *:first-child::after {
  content: '';
  position: absolute !important;
  top: -10px !important;
  right: 14px !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--gold);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z'/></svg>") center/contain no-repeat;
  filter: drop-shadow(0 2px 6px rgba(232,185,61,0.7));
  z-index: 3;
}

/* ========== 48. 2. SIRA — GÜMÜŞ ========== */
#friends-ranking-list > *:nth-child(2):not(.is-me) {
  background:
    linear-gradient(135deg, rgba(192,198,208,0.08), rgba(192,198,208,0.01)) !important;
  border-color: rgba(192,198,208,0.2) !important;
}
#friends-ranking-list > *:nth-child(2):not(.is-me) .friend-rank-num {
  background: linear-gradient(135deg, #E5E9F0, #9AA3B0) !important;
  border-color: rgba(192,198,208,0.4) !important;
  color: #14100A !important;
}

/* ========== 49. 3. SIRA — BRONZ ========== */
#friends-ranking-list > *:nth-child(3):not(.is-me) {
  background:
    linear-gradient(135deg, rgba(205,127,50,0.08), rgba(205,127,50,0.01)) !important;
  border-color: rgba(205,127,50,0.2) !important;
}
#friends-ranking-list > *:nth-child(3):not(.is-me) .friend-rank-num {
  background: linear-gradient(135deg, #E89960, #A66830) !important;
  border-color: rgba(205,127,50,0.4) !important;
  color: #FFF !important;
}

/* ========== 50. "SEN" (is-me) SATIRI ========== */
#friends-ranking-list > .is-me {
  background:
    linear-gradient(135deg, rgba(127,169,255,0.12), rgba(127,169,255,0.02)) !important;
  border-color: rgba(127,169,255,0.32) !important;
  box-shadow:
    0 8px 26px rgba(0,0,0,0.25),
    0 0 30px rgba(127,169,255,0.08),
    inset 0 1px 0 rgba(127,169,255,0.15) !important;
}
#friends-ranking-list > .is-me .friend-rank-num {
  background: rgba(127,169,255,0.2) !important;
  border-color: rgba(127,169,255,0.4) !important;
  color: var(--accent-friends) !important;
}
#friends-ranking-list > .is-me .friend-row-xp {
  color: var(--accent-friends) !important;
}
/* "SEN" etiketi */
#friends-ranking-list > .is-me::before {
  content: 'SEN';
  position: absolute !important;
  top: 8px !important;
  right: 14px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: var(--accent-friends) !important;
  background: rgba(127,169,255,0.18) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  letter-spacing: 1px !important;
  border: 1px solid rgba(127,169,255,0.3) !important;
  z-index: 3 !important;
}

/* Boş liste */
#friends-ranking-list .empty-state,
#friends-ranking-list:empty::before {
  padding: 40px 20px !important;
  text-align: center !important;
}

/* =====================================================================
   FAZ 10 — ARKADAŞLAR SAYFASI GRID LAYOUT + SAĞ PANEL + CHIP'LER
   ================================================================= */

/* ========== 51. HEADER — Başlık + Chip'ler ========== */
#page-friends .friends-header {
  margin: 0 0 20px !important;
  padding: 0 4px !important;
}
.friends-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.5px !important;
  color: var(--text-primary);
}
.friends-subtitle {
  font-size: 13px !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 0 0 14px !important;
  font-weight: 500 !important;
}
.friends-chips {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.friends-chip {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
  padding: 7px 14px 7px 12px !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 200ms ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.friends-chip:hover {
  background: var(--surf-2) !important;
  border-color: var(--hairline-strong) !important;
}
.friends-chip svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.75;
}
.friends-chip b {
  font-family: var(--font-mono) !important;
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}
/* Chip renkleri */
.friends-chip:nth-child(1) svg { color: var(--accent-friends); }
.friends-chip:nth-child(1) b { color: var(--accent-friends); }
.friends-chip:nth-child(2) svg { color: var(--gold); }
.friends-chip:nth-child(2) b { color: var(--gold); }
.friends-chip:nth-child(3) svg { color: var(--accent-tasks); }
.friends-chip:nth-child(3) b { color: var(--accent-tasks); }

/* ========== 52. GRID LAYOUT ========== */
#page-friends .friends-layout {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 20px !important;
  align-items: flex-start !important;
}
#page-friends .friends-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
#page-friends .friends-sidebar {
  position: sticky !important;
  top: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
/* Mobil ve tablet: tek sütun */
@media (max-width: 900px) {
  #page-friends .friends-layout {
    grid-template-columns: 1fr !important;
  }
  #page-friends .friends-sidebar {
    position: static !important;
  }
}

/* ========== 53. SAĞ PANEL — Aktif arkadaşlar + İstekler ========== */
.fs-block {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.fs-block-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.fs-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6FE86F;
  box-shadow: 0 0 8px rgba(111,232,111,0.6);
  animation: liveDotPulse 1.6s ease-in-out infinite;
}
@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}
.fs-active-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fs-active-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(111,232,111,0.05);
  border: 1px solid rgba(111,232,111,0.15);
  border-radius: 10px;
  font-size: 13px;
}
.fs-empty {
  padding: 20px 8px;
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  font-style: italic;
}

/* Ortak Oturum butonu */
.fs-group-btn {
  background: linear-gradient(135deg, rgba(185,140,255,0.10), rgba(185,140,255,0.02)) !important;
  border: 1px dashed rgba(185,140,255,0.35) !important;
  color: var(--accent-market) !important;
  padding: 14px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 240ms var(--ease) !important;
  position: relative;
}
.fs-group-btn:hover {
  background: rgba(185,140,255,0.15) !important;
  border-color: rgba(185,140,255,0.5) !important;
  transform: translateY(-1px);
}
.fs-group-btn svg { width: 16px; height: 16px; }
.fs-soon-badge {
  position: absolute;
  top: -8px;
  right: 8px;
  background: var(--accent-market);
  color: #14100A;
  font-size: 8.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.6px;
}

/* İstekler listesi (sağ panelde) */
.fs-requests-list > * {
  background: rgba(232,185,61,0.06) !important;
  border: 1px solid rgba(232,185,61,0.15) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.fs-req-count {
  margin-left: auto;
  background: var(--gold);
  color: #14100A;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
}

/* ========== 54. ODAK KODU KARTI — Premium ========== */
#page-friends .friend-code-box {
  background:
    radial-gradient(ellipse 400px 200px at 15% 30%, rgba(127,169,255,0.14), transparent 60%),
    linear-gradient(135deg, rgba(127,169,255,0.06), rgba(127,169,255,0.02)) !important;
  border: 1px solid rgba(127,169,255,0.22) !important;
  padding: 20px !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
#page-friends .friend-code-box > * {
  flex: none !important;
  width: 100% !important;
}

/* ========== 55. LEADERBOARD 1. SIRA — BÜYÜK ALTIN KART ========== */
/* Birinci sıra kartını özelleştirmek için mevcut Faz 9 kurallarını override */
#friends-ranking-list > *:first-child {
  padding: 20px !important;
  min-height: 100px !important;
  background:
    radial-gradient(ellipse 400px 200px at 20% 30%, rgba(232,185,61,0.16), transparent 60%),
    linear-gradient(135deg, rgba(232,185,61,0.14), rgba(232,185,61,0.02)) !important;
  border: 1px solid rgba(232,185,61,0.35) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.35),
    0 0 50px rgba(232,185,61,0.12),
    inset 0 1px 0 rgba(232,185,61,0.2) !important;
}
#friends-ranking-list > *:first-child .friend-row-name {
  font-size: 17px !important;
}
#friends-ranking-list > *:first-child .friend-row-name .sync-sub {
  font-size: 12.5px !important;
  color: rgba(255,255,255,0.55) !important;
}
#friends-ranking-list > *:first-child .friend-row-xp {
  font-size: 20px !important;
  color: var(--gold) !important;
}
/* 1. sıra rank badge - LV baloncuğu */
#friends-ranking-list > *:first-child .friend-rank-num {
  padding: 0 10px !important;
  height: 26px !important;
  font-size: 12px !important;
}

/* ========== 56. TABLET/MOBILE UYUMU ========== */
@media (max-width: 640px) {
  .friends-title { font-size: 22px !important; }
  .friends-subtitle { font-size: 12px !important; }
  .friends-chip { padding: 5px 12px 5px 10px !important; font-size: 11.5px !important; }
  #friends-ranking-list > *:first-child { padding: 16px !important; min-height: 88px !important; }
  #friends-ranking-list > *:first-child .friend-row-name { font-size: 15px !important; }
  #friends-ranking-list > *:first-child .friend-row-xp { font-size: 16px !important; }
}

/* =====================================================================
   FAZ 11 — HAFTALIK CHALLENGE + LEADERBOARD AVATAR/PROGRESS
              + GÖREV COMPOSER + QUEST KART
   ================================================================= */

/* ========== 57. HAFTALIK MEYDAN OKUMA BANNER ========== */
.weekly-challenge-banner {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px 20px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(ellipse 500px 200px at 15% 30%, rgba(232,185,61,0.18), transparent 70%),
    linear-gradient(135deg, rgba(232,185,61,0.12), rgba(120,80,180,0.08)) !important;
  border: 1px solid rgba(232,185,61,0.35) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.35),
    0 0 40px rgba(232,185,61,0.12),
    inset 0 1px 0 rgba(232,185,61,0.2) !important;
  margin-bottom: 16px;
  overflow: hidden;
  animation: wcbGlow 4s ease-in-out infinite;
}
@keyframes wcbGlow {
  0%, 100% { box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 40px rgba(232,185,61,0.12), inset 0 1px 0 rgba(232,185,61,0.2); }
  50% { box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 60px rgba(232,185,61,0.2), inset 0 1px 0 rgba(232,185,61,0.28); }
}
.wcb-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), #C89A2E);
  color: #14100A;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(200,154,46,0.4);
  flex-shrink: 0;
}
.wcb-icon svg { width: 26px; height: 26px; }
.wcb-content { min-width: 0; }
.wcb-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(232,185,61,0.18);
  border: 1px solid rgba(232,185,61,0.35);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.wcb-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}
.wcb-title b { color: var(--gold); }
.wcb-progress {
  margin-bottom: 6px;
}
.wcb-track {
  height: 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.wcb-fill {
  height: 100%;
  background: linear-gradient(90deg, #C89A2E, var(--gold));
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(232,185,61,0.5);
  transition: width 800ms cubic-bezier(.22,1,.36,1);
  position: relative;
}
.wcb-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: heroLevelShimmer 2.5s infinite;
}
.wcb-progress-text {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  font-family: var(--font-mono);
}
.wcb-progress-text b { color: var(--gold); }
.wcb-reward {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}
.wcb-reward b { color: var(--text-primary); font-weight: 700; }

@media (max-width: 640px) {
  .weekly-challenge-banner { grid-template-columns: 1fr !important; padding: 14px !important; }
  .wcb-icon { width: 40px; height: 40px; }
  .wcb-icon svg { width: 20px; height: 20px; }
}

/* ========== 58. LEADERBOARD — Avatar + XP progress bar ========== */
.friend-avatar {
  position: absolute !important;
  top: 12px;
  left: 12px;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(127,169,255,0.28), rgba(127,169,255,0.08)) !important;
  border: 2px solid rgba(127,169,255,0.32) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--accent-friends) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 2;
}

/* Row layout güncelle - avatar için sol boşluk */
#friends-ranking-list > * {
  padding-left: 72px !important;
  position: relative !important;
}
/* Rank badge, avatar'ın üst-sağ köşesine gitsin */
#friends-ranking-list .friend-rank-num {
  top: 4px !important;
  left: 44px !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 10.5px !important;
}

/* XP progress bar - kart alt kenarında */
.friend-progress {
  position: absolute;
  left: 72px;
  right: 18px;
  bottom: 10px;
  height: 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
}
.friend-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(127,169,255,0.6), var(--accent-friends));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(127,169,255,0.35);
  transition: width 700ms cubic-bezier(.22,1,.36,1);
}

/* 1. sıra — altın avatar + altın progress */
#friends-ranking-list > *:first-child .friend-avatar {
  background: linear-gradient(135deg, rgba(232,185,61,0.35), rgba(232,185,61,0.1)) !important;
  border-color: rgba(232,185,61,0.5) !important;
  color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(232,185,61,0.35), 0 0 20px rgba(232,185,61,0.2);
}
#friends-ranking-list > *:first-child .friend-progress-fill {
  background: linear-gradient(90deg, #C89A2E, var(--gold));
  box-shadow: 0 0 10px rgba(232,185,61,0.5);
}
#friends-ranking-list > *:first-child {
  padding-bottom: 20px !important;
  min-height: 110px !important;
}
#friends-ranking-list > *:first-child .friend-avatar {
  width: 52px !important;
  height: 52px !important;
  font-size: 22px !important;
  top: 16px;
  left: 16px;
}
#friends-ranking-list > *:first-child {
  padding-left: 82px !important;
}
#friends-ranking-list > *:first-child .friend-progress {
  left: 82px;
}

/* 2. sıra — gümüş avatar */
#friends-ranking-list > *:nth-child(2):not(.is-me) .friend-avatar {
  background: linear-gradient(135deg, rgba(192,198,208,0.3), rgba(192,198,208,0.08)) !important;
  border-color: rgba(192,198,208,0.4) !important;
  color: #E5E9F0 !important;
}
/* 3. sıra — bronz avatar */
#friends-ranking-list > *:nth-child(3):not(.is-me) .friend-avatar {
  background: linear-gradient(135deg, rgba(205,127,50,0.3), rgba(205,127,50,0.08)) !important;
  border-color: rgba(205,127,50,0.4) !important;
  color: #E89960 !important;
}
/* Sen — mavi avatar */
#friends-ranking-list > .is-me .friend-avatar {
  background: linear-gradient(135deg, rgba(127,169,255,0.35), rgba(127,169,255,0.1)) !important;
  border-color: rgba(127,169,255,0.5) !important;
  color: var(--accent-friends) !important;
}

/* ========== 59. TASK COMPOSER (Yeni görev ekleme) ========== */
#page-tasks .task-add-box {
  background:
    radial-gradient(ellipse 400px 200px at 15% 20%, rgba(232,185,61,0.06), transparent 70%),
    var(--surf-2) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.task-composer-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.task-composer-title svg {
  width: 14px;
  height: 14px;
  padding: 3px;
  background: rgba(232,185,61,0.15);
  border-radius: 6px;
  color: var(--gold);
}

/* Composer input (görev adı) daha büyük */
#page-tasks .task-add-box input#task-new-text {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: 10px 4px 14px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
}
#page-tasks .task-add-box input#task-new-text:focus {
  border-bottom-color: var(--gold) !important;
  box-shadow: 0 1px 0 var(--gold) !important;
  background: transparent !important;
}
#page-tasks .task-add-box input#task-new-text::placeholder {
  color: rgba(255,255,255,0.25) !important;
  font-weight: 500 !important;
}

/* ========== 60. KATEGORİ CHIP'LERİ ========== */
.task-cat-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--hairline) !important;
  width: 100% !important;
}
.task-cat-chip {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  white-space: nowrap !important;
}
.task-cat-chip:hover {
  background: var(--surf-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--hairline-strong) !important;
}
.task-cat-chip.active {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
  box-shadow: none;
}

/* ========== 61. GÖREV KARTLARI — Quest Card ========== */
#task-list > * {
  position: relative !important;
  padding-bottom: 20px !important;
  min-height: 68px !important;
  overflow: hidden !important;
  transition: all 220ms cubic-bezier(.22,1,.36,1) !important;
}
#task-list > *:hover {
  transform: translateY(-2px) !important;
  border-color: var(--hairline-strong) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important;
}

/* Quest progress bar - kart altı */
.quest-progress-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 3px;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  overflow: hidden;
}
.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #C89A2E, var(--gold));
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(232,185,61,0.35);
  transition: width 700ms cubic-bezier(.22,1,.36,1);
}

/* XP rozeti - kart sağ üstü */
.quest-reward-badge {
  position: absolute;
  top: 8px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(232,185,61,0.12);
  border: 1px solid rgba(232,185,61,0.32);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}
.quest-reward-badge svg { opacity: 0.85; }

/* Tamamlanan görev — yeşil glow + strikethrough */
#task-list > *.completed,
#task-list > *[data-completed="true"] {
  background: rgba(111,232,111,0.05) !important;
  border-color: rgba(111,232,111,0.28) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 0 20px rgba(111,232,111,0.08) !important;
  opacity: 0.85;
}
#task-list > *.completed::before,
#task-list > *[data-completed="true"]::before {
  background: linear-gradient(180deg, #6FE86F, #3FA83F) !important;
  opacity: 0.8 !important;
}
#task-list > *.completed .quest-progress-fill,
#task-list > *[data-completed="true"] .quest-progress-fill {
  background: linear-gradient(90deg, #3FA83F, #6FE86F) !important;
  box-shadow: 0 0 6px rgba(111,232,111,0.4) !important;
}
#task-list > *.completed .quest-reward-badge,
#task-list > *[data-completed="true"] .quest-reward-badge {
  background: rgba(111,232,111,0.12) !important;
  border-color: rgba(111,232,111,0.32) !important;
  color: #6FE86F !important;
}
/* Task text strikethrough */
#task-list > *.completed .task-row-main,
#task-list > *[data-completed="true"] .task-row-main,
#task-list > *.completed [class*="task-row-name"],
#task-list > *[data-completed="true"] [class*="task-row-name"] {
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: rgba(111,232,111,0.7) !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ========== 62. TÜM KART HOVER'LARINDA STANDART 200MS ========== */
.card, .hero-stat-card, .hero-level-card,
.friend-code-box, #friends-ranking-list > *,
#task-list > *, #daily-quest-list > *,
.fs-block, .weekly-challenge-banner,
.settings-link, .friends-chip {
  transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}


/* =====================================================================
   FAZ 12 — DESKTOP WIDE LAYOUT + DISCORD TARZI 3-COLUMN ARKADAŞLAR
   ================================================================= */

/* ========== 63. WRAP GENİŞLET — Masaüstünde daha ferah kullan ========== */
@media (min-width: 1024px) {
  body:not(.centered-auth) .wrap {
    max-width: 1240px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (min-width: 1440px) {
  body:not(.centered-auth) .wrap {
    max-width: 1360px !important;
  }
}

/* ========== 64. ARKADAŞLAR — 3-COLUMN LAYOUT (Discord tarzı) ========== */
@media (min-width: 1024px) {
  #page-friends .friends-layout {
    grid-template-columns: 220px 1fr 300px !important;
    gap: 20px !important;
  }
}
/* Küçük desktop / tablet için 2-col (sol filter gizle) */
@media (min-width: 640px) and (max-width: 1023px) {
  #page-friends .friends-layout {
    grid-template-columns: 1fr 300px !important;
  }
  #page-friends .friends-filter {
    display: none !important;
  }
}
/* Mobil için tek sütun */
@media (max-width: 639px) {
  #page-friends .friends-layout {
    grid-template-columns: 1fr !important;
  }
  #page-friends .friends-filter {
    display: none !important;
  }
}

/* ========== 65. SOL FİLTER PANEL ========== */
#page-friends .friends-filter {
  position: sticky !important;
  top: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 12px 10px !important;
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: fit-content;
}

/* Arama input'u */
.ff-search {
  position: relative;
  margin-bottom: 8px;
}
.ff-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}
.ff-search input {
  width: 100% !important;
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 8px 12px 8px 34px !important;
  font-size: 12.5px !important;
  color: var(--text-primary) !important;
  transition: all 200ms ease !important;
  box-shadow: none !important;
}
.ff-search input:focus {
  background: rgba(0,0,0,0.35) !important;
  box-shadow: 0 0 0 2px rgba(127,169,255,0.2) !important;
}

/* Section title */
.ff-section-title {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 10px 6px;
}

/* Filter item butonları */
.ff-item {
  all: unset;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.ff-item svg {
  width: 15px !important;
  height: 15px !important;
  opacity: 0.75;
  flex-shrink: 0;
}
.ff-item > span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-item:hover {
  background: var(--surf-2) !important;
  color: var(--text-primary) !important;
}
.ff-item.active {
  background: rgba(127,169,255,0.12) !important;
  color: var(--accent-friends) !important;
}
.ff-item.active svg { opacity: 1; }

/* Badge (sayaç) */
.ff-badge {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.ff-item.active .ff-badge {
  background: rgba(127,169,255,0.28);
  color: var(--accent-friends);
}
.ff-badge-alert {
  background: rgba(255,110,90,0.2) !important;
  color: #FF8060 !important;
}
.ff-badge:empty {
  display: none;
}

/* "Arkadaş Ekle" özel buton */
.ff-item-add {
  margin-top: 10px !important;
  background: linear-gradient(135deg, rgba(232,185,61,0.10), rgba(232,185,61,0.02)) !important;
  border: 1px solid rgba(232,185,61,0.25) !important;
  color: var(--gold) !important;
}
.ff-item-add:hover {
  background: rgba(232,185,61,0.15) !important;
  border-color: rgba(232,185,61,0.4) !important;
  transform: translateY(-1px);
}
.ff-item-add.active {
  background: rgba(232,185,61,0.15) !important;
  color: var(--gold) !important;
  border-color: rgba(232,185,61,0.4) !important;
}

/* ========== 66. MASAÜSTÜNDE HEADER'A NEFES ========== */
@media (min-width: 1024px) {
  #page-friends .friends-header {
    padding: 0 4px !important;
    margin-bottom: 24px !important;
  }
  .friends-title {
    font-size: 34px !important;
  }
  .friends-subtitle {
    font-size: 14px !important;
  }
}


/* Filter empty state */
.friends-filter-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--surf-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: 14px;
  color: rgba(255,255,255,0.5);
}
.ffe-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.55; }
.ffe-title { font-size: 13px; font-weight: 600; }

/* =====================================================================
   FAZ 13 — STEAM TARZI ARKADAŞLAR SAYFASI (sol menü + view geçişi)
   ================================================================= */

/* ========== 67. ANA CONTAINER (Steam layout) ========== */
#page-friends {
  padding: 0 !important;
}
.friends-steam {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  min-height: calc(100vh - 200px);
  align-items: flex-start;
}
@media (max-width: 900px) {
  .friends-steam {
    grid-template-columns: 1fr;
  }
}

/* ========== 68. SOL MENÜ ========== */
.fsteam-menu {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.fsm-title {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.28);
  letter-spacing: 1.2px;
  padding: 4px 10px;
  margin-bottom: 4px;
}

/* Avatar strip (üst kısım — kullanıcı bilgisi) */
.fsm-avatar-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-bottom: 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
}
.fsm-avatar {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), #C89A2E);
  color: #14100A;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(200,154,46,0.3);
}
.fsm-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.fsm-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.fsm-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6FE86F;
  box-shadow: 0 0 6px rgba(111,232,111,0.6);
}

/* ODAKLA: kullanıcı kararı — "Seri" kartı sinematikleştirildi: kompakt tek-satır
   header (alev+başlık+mini istatistikler), sayma animasyonu (bkz. _animateStreakNum/
   _animateStatNum), seri seviyesine göre alev rengi/parıltısı (_streakTier), takvim
   hücrelerinin sırayla belirmesi, açılışta bir kere geçen ışık huzmesi. Hem arkadaş
   modalı (.fpm-streak-card) hem kendi arkadaşlar menüsündeki kart aynı yapıyı paylaşır. */
.fsm-streak-card {
  position: relative;
  padding: 12px 13px 11px;
  margin-bottom: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
}
.fsm-streak-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.14) 45%, transparent 60%);
  background-size: 250% 100%;
  background-position: 150% 0;
  pointer-events: none;
}
.fsm-streak-card.fsm-sweep::before { animation: fsmCardSweep 1.1s ease-out 1; }
@keyframes fsmCardSweep { from{ background-position: 150% 0; } to{ background-position: -50% 0; } }

.fsm-row1 { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.fsm-flame-wrap { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fsm-flame-svg { width: 15px; height: 15px; position: relative; z-index: 2; }
.fsm-flame-wrap::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--flame-glow, rgba(255,112,64,0.5)), transparent 70%);
  filter: blur(2px);
  animation: fsmFlameGlow 2.1s ease-in-out infinite;
}
@keyframes fsmFlameGlow { 0%,100%{ opacity: .6; transform: scale(.92); } 50%{ opacity: 1; transform: scale(1.08); } }

.fsm-head-txt { min-width: 0; }
.fsm-streak-head { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #FF9060; text-transform: uppercase; line-height: 1.2; }
.fsm-tier-label { font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,0.35); margin-top: 1px; }
.fsm-spacer { flex: 1; }
.fsm-ministat-row { display: flex; gap: 12px; flex-shrink: 0; }
.fsm-ministat { text-align: right; }
.fsm-ministat .l { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .3px; color: rgba(255,255,255,0.35); text-transform: uppercase; }
.fsm-ministat .v { display: block; font-family: var(--font-mono); font-size: 12.5px; font-weight: 800; color: var(--text-primary); margin-top: 1px; }

.fsm-row2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fsm-streak-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}
.fsm-streak-num span {
  font-family: var(--font-sans, inherit);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  margin-left: 4px;
}
.fsm-fav-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(106,92,255,0.14);
  border: 1px solid rgba(106,92,255,0.3);
  color: #C9BBFF;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fsm-fav-chip svg { width: 12px; height: 12px; flex-shrink: 0; }

.fsm-mini-cal {
  display: flex;
  gap: 4px;
}
.fsm-mini-cal-cell {
  flex: 1;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  position: relative;
  transform: scaleY(0.3);
  opacity: 0;
  transform-origin: bottom;
  animation: fsmCellRise .42s cubic-bezier(.2,1.4,.4,1) forwards;
}
.fsm-mini-cal-cell.is-active {
  background: linear-gradient(180deg, rgba(154,140,255,0.55), rgba(106,92,255,0.32));
  border-color: rgba(154,140,255,0.55);
  box-shadow: 0 0 10px rgba(106,92,255,0.35);
}
.fsm-mini-cal-cell.is-today { border-color: rgba(255,255,255,0.55); }
.fsm-mini-cal-cell.is-today::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.5);
  animation: fsmTodayPulse 1.8s ease-in-out infinite;
}
@keyframes fsmTodayPulse { 0%,100%{ opacity: .5; transform: scale(1); } 50%{ opacity: 1; transform: scale(1.05); } }
@keyframes fsmCellRise { to{ transform: scaleY(1); opacity: 1; } }

/* Grup label (ARKADAŞLAR, ODAKLA gibi) */
.fsm-group-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1.2px;
  padding: 12px 10px 6px;
}

/* Menü öğesi butonu */
.fsm-item {
  all: unset;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.fsm-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0;
}
.fsm-item > span:first-of-type {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fsm-item:hover {
  background: var(--surf-2);
  color: var(--text-primary);
  transform: translateX(2px);
}
.fsm-item:hover svg { opacity: 1; }

.fsm-item.active {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}
.fsm-item.active svg { opacity: 1; }

/* Badge (menü sağı sayaç) */
.fsm-badge {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.fsm-item.active .fsm-badge {
  background: rgba(255,255,255,0.16);
  color: var(--text-primary);
}
.fsm-badge:empty { display: none; }
.fsm-badge-alert:not(:empty) {
  background: rgba(255,110,90,0.22) !important;
  color: #FF8060 !important;
}
.fsm-badge-live:not(:empty) {
  background: rgba(111,232,111,0.2) !important;
  color: #6FE86F !important;
}

/* ========== 69. ANA VIEW ALANI ========== */
.fsteam-main {
  position: relative;
  min-height: 400px;
}

/* View — mutlak konumlu, sadece active olan görünür */
.fsteam-view {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  animation: fsteamViewIn 320ms cubic-bezier(.22,1,.36,1) forwards;
}
.fsteam-view.active {
  display: block;
}
@keyframes fsteamViewIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* View header (başlık + tools) */
.fsv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 4px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.fsv-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fsv-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

/* View tools (sağda arama vb) */
.fsv-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.fsv-search {
  position: relative;
  min-width: 260px;
}
.fsv-search > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}
.fsv-tools .fsv-search input[type="text"] {
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 9px 14px 9px 36px !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  width: 100% !important;
  transition: all 200ms ease !important;
}
.fsv-tools .fsv-search input[type="text"]:focus {
  background: rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15) !important;
}

/* View body */
.fsv-body {
  padding: 0 4px;
}
.fsv-section-label {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fsv-dot-online {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6FE86F;
  box-shadow: 0 0 6px rgba(111,232,111,0.5);
}

/* ========== 70. FRIEND CARDS (grid) ========== */
.fsv-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.fsv-friend-card {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.fsv-friend-card:hover {
  background: var(--surf-2);
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.fsv-fc-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(127,169,255,0.28), rgba(127,169,255,0.08));
  border: 2px solid rgba(127,169,255,0.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-friends);
}
.fsv-fc-info { min-width: 0; }
.fsv-fc-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fsv-fc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.fsv-fc-name-row .title-badge {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
}
.fsv-fc-meta {
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}
.fsv-fc-xp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
}
.fsv-fc-xp svg {
  width: 12px;
  height: 12px;
  opacity: 0.75;
}

/* Empty states */
.fsv-empty {
  padding: 30px 20px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  font-style: italic;
  background: var(--surf-0);
  border: 1px dashed var(--hairline);
  border-radius: 12px;
}
.fsv-empty-lg {
  padding: 60px 20px;
  text-align: center;
  background: var(--surf-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: 16px;
}
.fsv-empty-emoji {
  font-size: 44px;
  margin-bottom: 12px;
  opacity: 0.7;
}
.fsv-empty-lg h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}
.fsv-empty-lg p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}

/* ========== 71. RANK VIEW ÖZEL — Banner + Leaderboard büyük ========== */
#fsv-rank-body #friends-ranking-list {
  gap: 12px !important;
}
#fsv-rank-body #friends-ranking-list > * {
  min-height: 76px !important;
  padding: 14px 18px 14px 76px !important;
}
#fsv-rank-body #friends-ranking-list > *:first-child {
  min-height: 120px !important;
  padding: 20px 24px 20px 88px !important;
}

/* ========== 72. RESPONSIVE ========== */
@media (max-width: 900px) {
  .fsteam-menu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding: 12px;
  }
  .fsm-avatar-strip { display: none; }
  /* ODAKLA: sadece sol menüdeki (sidebar) Seri kartı gizlensin — aynı class arkadaş
     profili modalinde de kullanılıyor (.fpm-streak-card), o her genişlikte görünmeli. */
  .fsteam-menu .fsm-streak-card { display: none; }
  .fsm-group-label { display: none; }
  .fsm-title { display: none; }
  .fsm-item {
    flex-direction: column;
    text-align: center;
    padding: 8px 12px;
    min-width: 88px;
    gap: 4px;
  }
  .fsm-item > span:first-of-type { font-size: 11px; }
  .fsm-badge { position: absolute; top: 4px; right: 4px; }
  .fsv-header { flex-direction: column; }
  .fsv-search { min-width: 100% !important; }
}
@media (max-width: 640px) {
  .fsv-title { font-size: 22px !important; }
  .fsv-sub { font-size: 12px !important; }
  #fsv-rank-body #friends-ranking-list > *:first-child {
    min-height: 100px !important;
    padding: 16px 16px 16px 76px !important;
  }
}


/* =====================================================================
   FAZ 14 — INPUT FIX + ADD VIEW UI + HAFTALIK SIRALAMA YENİLE + ÇEREZ
   ================================================================= */

/* ========== 73. INPUT AUTO-FILL / BROWSER STYLING FIX ========== */
.fsv-search input,
#fsv-add-code-input {
  color-scheme: dark;
}
.fsv-search input:-webkit-autofill,
.fsv-search input:-webkit-autofill:hover,
.fsv-search input:-webkit-autofill:focus,
#fsv-add-code-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px rgba(0,0,0,0.3) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--text-primary);
}

/* ========== 74. ADD VIEW — ARKADAŞ EKLE SAYFASI ========== */
.fsv-add-container {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fsv-add-panel {
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: all 240ms var(--ease);
}
.fsv-add-panel:hover {
  border-color: var(--hairline-strong);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

.fsv-add-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fsv-add-label svg {
  width: 14px; height: 14px;
  padding: 4px;
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-radius: 6px;
  box-sizing: content-box;
}

/* Kod kartı (kodu göster + kopyala) */
.fsv-code-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.fsv-code-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 6px;
  word-break: break-all;
  min-width: 0;
}
.fsv-code-copy {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
  flex-shrink: 0;
}
.fsv-code-copy:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}
.fsv-code-copy svg { width: 14px; height: 14px; }
.fsv-code-hint {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* Arkadaş ekle input satırı */
.fsv-add-input-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
#fsv-add-code-input {
  flex: 1;
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  color: var(--text-primary) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  transition: all 200ms ease !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important;
}
#fsv-add-code-input:focus {
  background: rgba(0,0,0,0.36) !important;
  border-color: var(--hairline-strong) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.3),
    0 0 0 3px rgba(255,255,255,0.1) !important;
}
#fsv-add-code-input::placeholder {
  color: rgba(255,255,255,0.28) !important;
  letter-spacing: 1px;
}
.fsv-add-submit {
  all: unset;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px;
  background: var(--cta);
  color: var(--cta-ink);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px -8px var(--cta-glow);
}
.fsv-add-submit::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 550ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.fsv-add-submit:hover {
  background: var(--cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 6px rgba(0,0,0,0.4), 0 14px 28px -8px var(--cta-glow-strong);
}
.fsv-add-submit:hover::after { left: 125%; }
.fsv-add-submit:active { background: var(--cta-active); transform: translateY(0) scale(0.97); }
.fsv-add-submit svg { width: 16px; height: 16px; }

/* Info box (ipucu) */
.fsv-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(127,169,255,0.06);
  border: 1px solid rgba(127,169,255,0.2);
  border-radius: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
}
.fsv-info-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: -2px;
}
.fsv-info-text b { color: var(--accent-friends); font-weight: 700; }

@media (max-width: 640px) {
  .fsv-code-value { font-size: 22px !important; letter-spacing: 3px !important; }
  .fsv-add-input-row { flex-direction: column; }
  .fsv-add-submit { padding: 12px 22px; justify-content: center; }
}

/* ========== 75. HAFTALIK SIRALAMA — 1. sıra dev kart, diğerleri kompakt ========== */

/* Rank view container ferahsın */
#fsv-rank-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#fsv-rank-body #friends-ranking-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 6px !important;
}
#fsv-rank-body .section-label { display: none !important; }

/* 1. SIRA — Dev hero card */
#fsv-rank-body #friends-ranking-list > *:first-child {
  display: grid !important;
  grid-template-columns: auto 72px 1fr auto !important;
  grid-template-rows: auto auto !important;
  gap: 4px 18px !important;
  padding: 24px 26px !important;
  min-height: 120px !important;
  margin-top: 24px !important;
  background:
    radial-gradient(ellipse 500px 200px at 20% 30%, rgba(232,185,61,0.20), transparent 60%),
    linear-gradient(135deg, rgba(232,185,61,0.14), rgba(232,185,61,0.02)) !important;
  border: 1px solid rgba(232,185,61,0.4) !important;
  border-radius: 20px !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.4),
    0 0 60px rgba(232,185,61,0.15),
    inset 0 1px 0 rgba(232,185,61,0.28) !important;
  position: relative !important;
  overflow: visible !important;
  animation: heroCardGlow 4s ease-in-out infinite !important;
}
@keyframes heroCardGlow {
  0%, 100% { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 60px rgba(232,185,61,0.15), inset 0 1px 0 rgba(232,185,61,0.28); }
  50% { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 90px rgba(232,185,61,0.22), inset 0 1px 0 rgba(232,185,61,0.35); }
}
/* Rank number 1 (sol üstte küçük) */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-rank-num {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  position: static !important;
  align-self: center !important;
  padding: 4px 10px !important;
  height: 26px !important;
  min-width: 30px !important;
  font-size: 12.5px !important;
}
/* Avatar (60px dev) */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-avatar {
  grid-row: 1 / span 2 !important;
  grid-column: 2 !important;
  position: static !important;
  width: 60px !important;
  height: 60px !important;
  font-size: 26px !important;
  align-self: center !important;
}
/* İsim + meta */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-row-name {
  grid-row: 1 !important;
  grid-column: 3 !important;
  font-size: 18px !important;
  align-self: end !important;
  padding: 0 !important;
}
#fsv-rank-body #friends-ranking-list > *:first-child .friend-row-name .sync-sub {
  font-size: 13px !important;
  margin-top: 4px !important;
}
/* XP sağda dev */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-row-xp {
  grid-row: 1 !important;
  grid-column: 4 !important;
  font-size: 24px !important;
  color: var(--gold) !important;
  align-self: end !important;
}
/* Progress bar — 2. satırda tam genişlik */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-progress {
  position: static !important;
  grid-row: 2 !important;
  grid-column: 3 / span 2 !important;
  height: 8px !important;
  margin-top: 8px !important;
  align-self: start !important;
}
#fsv-rank-body #friends-ranking-list > *:first-child .friend-progress-fill {
  background: linear-gradient(90deg, #C89A2E, var(--gold)) !important;
  box-shadow: 0 0 12px rgba(232,185,61,0.6) !important;
}
/* Taç ikonu — kartın üstünde ortada */
#fsv-rank-body #friends-ranking-list > *:first-child::after {
  content: '';
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--gold);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z'/></svg>") center/contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(232,185,61,0.8));
  z-index: 5;
  animation: crownFloat 3s ease-in-out infinite;
}
@keyframes crownFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* 2, 3, 4+ sıralar — kompakt yatay satırlar */
#fsv-rank-body #friends-ranking-list > *:not(:first-child) {
  display: grid !important;
  grid-template-columns: 32px 40px 1fr auto 100px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  min-height: 60px !important;
  border-radius: 12px !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-rank-num {
  position: static !important;
  grid-column: 1 !important;
  align-self: center !important;
  padding: 3px 8px !important;
  min-width: 24px !important;
  height: 22px !important;
  font-size: 11px !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-avatar {
  position: static !important;
  grid-column: 2 !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
  align-self: center !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-row-name {
  grid-column: 3 !important;
  padding: 0 !important;
  min-width: 0 !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-row-xp {
  grid-column: 4 !important;
  font-size: 14px !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-progress {
  position: static !important;
  grid-column: 5 !important;
  width: 100% !important;
  height: 5px !important;
  align-self: center !important;
}

@media (max-width: 640px) {
  #fsv-rank-body #friends-ranking-list > *:first-child {
    grid-template-columns: 60px 1fr !important;
    grid-template-rows: auto auto auto !important;
    padding: 20px !important;
  }
  #fsv-rank-body #friends-ranking-list > *:first-child .friend-rank-num {
    grid-row: 1 !important; grid-column: 1 / span 2 !important;
    justify-self: start !important;
  }
  #fsv-rank-body #friends-ranking-list > *:first-child .friend-avatar {
    grid-row: 2 !important; grid-column: 1 !important;
  }
  #fsv-rank-body #friends-ranking-list > *:first-child .friend-row-name {
    grid-row: 2 !important; grid-column: 2 !important;
  }
  #fsv-rank-body #friends-ranking-list > *:first-child .friend-row-xp {
    grid-row: 3 !important; grid-column: 1 / span 2 !important;
    font-size: 20px !important; align-self: start !important;
  }
  #fsv-rank-body #friends-ranking-list > *:first-child .friend-progress {
    grid-row: 4 !important; grid-column: 1 / span 2 !important;
  }
  #fsv-rank-body #friends-ranking-list > *:not(:first-child) {
    grid-template-columns: 28px 36px 1fr auto !important;
  }
  #fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-progress {
    display: none !important;
  }
}

/* ========== 76. ÇEREZ / ONAY BANNER'I ========== */
.odakla-cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 4000;
  max-width: 720px;
  width: calc(100% - 32px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background:
    radial-gradient(ellipse 400px 150px at 15% 30%, rgba(232,185,61,0.08), transparent 65%),
    rgba(20,22,28,0.96);
  border: 1px solid rgba(232,185,61,0.28);
  border-radius: 18px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 0 40px rgba(232,185,61,0.1),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 480ms cubic-bezier(.22,1,.36,1);
}
.odakla-cookie-banner.ocb-visible {
  transform: translateX(-50%) translateY(0);
}
.odakla-cookie-banner.ocb-hiding {
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
}

.ocb-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(232,185,61,0.4));
}

.ocb-content { flex: 1; min-width: 0; }
.ocb-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.ocb-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.ocb-text b { color: var(--text-primary); }

.ocb-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.ocb-btn {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ocb-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.1);
}
.ocb-btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.ocb-btn-primary {
  background: linear-gradient(180deg, var(--gold), #C89A2E);
  color: #14100A;
  border: none;
  box-shadow: 0 4px 14px rgba(200,154,46,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.ocb-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(200,154,46,0.42);
}

@media (max-width: 640px) {
  .odakla-cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    bottom: 12px;
  }
  .ocb-actions { width: 100%; }
  .ocb-btn { flex: 1; }
}

/* =====================================================================
   FAZ 15 — HAFTALIK SIRALAMA KOMPLE SIFIRDAN (SADECE RANK VIEW)
   grid-template-areas ile net layout
   ================================================================= */

/* Meydan Okuma kartı — mor + altın karışım daha belirgin */
#fsv-rank-body .weekly-challenge-banner {
  background:
    radial-gradient(ellipse 500px 200px at 15% 30%, rgba(232,185,61,0.20), transparent 70%),
    radial-gradient(ellipse 400px 220px at 85% 70%, rgba(139,92,246,0.16), transparent 70%),
    linear-gradient(135deg, rgba(232,185,61,0.10) 0%, rgba(139,92,246,0.06) 100%) !important;
  border: 1px solid rgba(232,185,61,0.32) !important;
  margin-bottom: 24px !important;
}

/* Liderlik listesi container temizle */
#fsv-rank-body #friends-ranking-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-top: 6px !important;
}
#fsv-rank-body #friends-ranking-list > * {
  all: revert;
  position: relative !important;
  cursor: pointer !important;
}

/* ========== 1. SIRA — ALTIN DEV HERO KART ========== */
#fsv-rank-body #friends-ranking-list > *:first-child {
  display: grid !important;
  grid-template-columns: 42px 76px 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "rank avatar info xp"
    "rank avatar prog prog" !important;
  gap: 6px 20px !important;
  padding: 26px 28px !important;
  margin-top: 26px !important;
  min-height: 130px !important;
  background:
    radial-gradient(ellipse 500px 200px at 20% 30%, rgba(232,185,61,0.22), transparent 60%),
    linear-gradient(135deg, rgba(232,185,61,0.15), rgba(232,185,61,0.02)) !important;
  border: 1px solid rgba(232,185,61,0.42) !important;
  border-radius: 20px !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.4),
    0 0 60px rgba(232,185,61,0.18),
    inset 0 1px 0 rgba(232,185,61,0.28) !important;
  transition: all 240ms var(--ease) !important;
  animation: heroCardGlow 4s ease-in-out infinite !important;
}
#fsv-rank-body #friends-ranking-list > *:first-child:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(232,185,61,0.55) !important;
}

/* Rank #1 badge */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-rank-num {
  grid-area: rank !important;
  position: static !important;
  align-self: center !important;
  justify-self: center !important;
  padding: 5px 10px !important;
  height: 28px !important;
  min-width: 34px !important;
  font-size: 13px !important;
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--gold), #C89A2E) !important;
  color: #14100A !important;
  border-radius: 999px !important;
  border: 1px solid rgba(232,185,61,0.6) !important;
  box-shadow: 0 4px 12px rgba(200,154,46,0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Avatar 1. sıra 64px */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-avatar {
  grid-area: avatar !important;
  position: static !important;
  width: 64px !important;
  height: 64px !important;
  font-size: 26px !important;
  align-self: center !important;
  justify-self: center !important;
  background: linear-gradient(135deg, rgba(232,185,61,0.35), rgba(232,185,61,0.1)) !important;
  border: 2px solid rgba(232,185,61,0.5) !important;
  color: var(--gold) !important;
  box-shadow: 0 4px 18px rgba(232,185,61,0.4), 0 0 20px rgba(232,185,61,0.2) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
}

/* İsim + meta */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-row-name {
  grid-area: info !important;
  position: static !important;
  align-self: center !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  min-width: 0 !important;
}
#fsv-rank-body #friends-ranking-list > *:first-child .friend-row-name .sync-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 5px !important;
  font-weight: 500 !important;
}

/* XP dev sarı */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-row-xp {
  grid-area: xp !important;
  position: static !important;
  align-self: center !important;
  font-family: var(--font-mono) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--gold) !important;
  text-shadow: 0 0 12px rgba(232,185,61,0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#fsv-rank-body #friends-ranking-list > *:first-child .friend-row-xp::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L4 14h6l-1 8l9-12h-6z'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L4 14h6l-1 8l9-12h-6z'/></svg>") center/contain no-repeat;
  opacity: 0.9;
}

/* Progress bar 1. sıra — tam genişlik altın shimmer */
#fsv-rank-body #friends-ranking-list > *:first-child .friend-progress {
  grid-area: prog !important;
  position: static !important;
  width: 100% !important;
  height: 8px !important;
  align-self: center !important;
  margin-top: 8px !important;
  background: rgba(0,0,0,0.35) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5) !important;
}
#fsv-rank-body #friends-ranking-list > *:first-child .friend-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #C89A2E, var(--gold)) !important;
  box-shadow: 0 0 12px rgba(232,185,61,0.6) !important;
  border-radius: 999px !important;
}

/* Uçan taç */
#fsv-rank-body #friends-ranking-list > *:first-child::after {
  content: '' !important;
  position: absolute !important;
  top: -22px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 42px !important;
  height: 42px !important;
  background: var(--gold) !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z'/></svg>") center/contain no-repeat !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z'/></svg>") center/contain no-repeat !important;
  filter: drop-shadow(0 4px 12px rgba(232,185,61,0.85)) !important;
  z-index: 5 !important;
  animation: crownFloat 3s ease-in-out infinite !important;
}

/* ========== 2, 3, 4+ SIRALAR — Kompakt yatay tek satır ========== */
#fsv-rank-body #friends-ranking-list > *:not(:first-child) {
  display: grid !important;
  grid-template-columns: 40px 48px 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "rank avatar info xp"
    "rank avatar prog prog" !important;
  gap: 4px 16px !important;
  padding: 14px 18px !important;
  min-height: 76px !important;
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 14px !important;
  transition: all 220ms var(--ease) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  align-items: center !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child):hover {
  border-color: rgba(255,255,255,0.22) !important;
  background: var(--surf-2) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
}

/* Rank badge 2+ */
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-rank-num {
  grid-area: rank !important;
  position: static !important;
  align-self: center !important;
  justify-self: center !important;
  padding: 3px 8px !important;
  height: 24px !important;
  min-width: 28px !important;
  font-size: 11.5px !important;
  font-family: var(--font-mono) !important;
  font-weight: 800 !important;
  background: var(--surf-3) !important;
  color: rgba(255,255,255,0.7) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}
/* 2. sıra rank — gümüş */
#fsv-rank-body #friends-ranking-list > *:nth-child(2):not(.is-me) .friend-rank-num {
  background: linear-gradient(135deg, #E5E9F0, #9AA3B0) !important;
  color: #14100A !important;
  border-color: rgba(192,198,208,0.5) !important;
}
/* 3. sıra rank — bronz */
#fsv-rank-body #friends-ranking-list > *:nth-child(3):not(.is-me) .friend-rank-num {
  background: linear-gradient(135deg, #E89960, #A66830) !important;
  color: #FFF !important;
  border-color: rgba(205,127,50,0.5) !important;
}

/* Avatar 2+ */
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-avatar {
  grid-area: avatar !important;
  position: static !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 20px !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.65) !important;
}
/* Gümüş avatar */
#fsv-rank-body #friends-ranking-list > *:nth-child(2):not(.is-me) .friend-avatar {
  background: linear-gradient(135deg, rgba(192,198,208,0.28), rgba(192,198,208,0.08)) !important;
  border-color: rgba(192,198,208,0.4) !important;
  color: #E5E9F0 !important;
}
/* Bronz avatar */
#fsv-rank-body #friends-ranking-list > *:nth-child(3):not(.is-me) .friend-avatar {
  background: linear-gradient(135deg, rgba(205,127,50,0.28), rgba(205,127,50,0.08)) !important;
  border-color: rgba(205,127,50,0.4) !important;
  color: #E89960 !important;
}

/* İsim + meta */
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-row-name {
  grid-area: info !important;
  position: static !important;
  align-self: center !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-row-name .sync-sub {
  font-size: 12px !important;
  color: rgba(255,255,255,0.45) !important;
  margin-top: 3px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* XP 2+ */
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-row-xp {
  grid-area: xp !important;
  position: static !important;
  align-self: center !important;
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.6) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-row-xp::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L4 14h6l-1 8l9-12h-6z'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L4 14h6l-1 8l9-12h-6z'/></svg>") center/contain no-repeat;
  opacity: 0.8;
}

/* Progress bar 2+ */
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-progress {
  grid-area: prog !important;
  position: static !important;
  width: 100% !important;
  height: 4px !important;
  align-self: center !important;
  margin-top: 4px !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
#fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-progress-fill {
  height: 100% !important;
  background: rgba(255,255,255,0.25) !important;
  border-radius: 999px !important;
}

/* ========== "SEN" satırı (is-me) — MAVİ TEMA ========== */
#fsv-rank-body #friends-ranking-list > .is-me:not(:first-child) {
  background:
    linear-gradient(135deg, rgba(127,169,255,0.14), rgba(127,169,255,0.02)) !important;
  border-color: rgba(127,169,255,0.38) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.25),
    0 0 30px rgba(127,169,255,0.16),
    inset 0 1px 0 rgba(127,169,255,0.18) !important;
}
#fsv-rank-body #friends-ranking-list > .is-me:not(:first-child):hover {
  border-color: rgba(127,169,255,0.55) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.3),
    0 0 40px rgba(127,169,255,0.25) !important;
}
#fsv-rank-body #friends-ranking-list > .is-me .friend-rank-num {
  background: rgba(127,169,255,0.22) !important;
  color: var(--accent-friends) !important;
  border-color: rgba(127,169,255,0.4) !important;
}
#fsv-rank-body #friends-ranking-list > .is-me .friend-avatar {
  background: linear-gradient(135deg, rgba(127,169,255,0.32), rgba(127,169,255,0.08)) !important;
  border-color: rgba(127,169,255,0.5) !important;
  color: var(--accent-friends) !important;
}
#fsv-rank-body #friends-ranking-list > .is-me .friend-row-xp {
  color: var(--accent-friends) !important;
}
#fsv-rank-body #friends-ranking-list > .is-me .friend-progress-fill {
  background: linear-gradient(90deg, rgba(127,169,255,0.4), var(--accent-friends)) !important;
  box-shadow: 0 0 8px rgba(127,169,255,0.4) !important;
}
/* SEN pill sağ üstte */
#fsv-rank-body #friends-ranking-list > .is-me::before {
  content: 'SEN' !important;
  position: absolute !important;
  top: 10px !important;
  right: 14px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: var(--accent-friends) !important;
  background: rgba(127,169,255,0.22) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  letter-spacing: 1.2px !important;
  border: 1px solid rgba(127,169,255,0.4) !important;
  z-index: 3 !important;
  font-family: var(--font-mono) !important;
}

/* ========== MOBIL — 640px altında ========== */
@media (max-width: 640px) {
  #fsv-rank-body #friends-ranking-list > *:first-child {
    grid-template-columns: 60px 1fr !important;
    grid-template-areas:
      "avatar info"
      "avatar xp"
      "prog prog" !important;
    padding: 22px 18px !important;
  }
  #fsv-rank-body #friends-ranking-list > *:first-child .friend-rank-num {
    display: none !important;
  }
  #fsv-rank-body #friends-ranking-list > *:first-child .friend-avatar {
    width: 60px !important;
    height: 60px !important;
    font-size: 22px !important;
  }
  #fsv-rank-body #friends-ranking-list > *:first-child .friend-row-xp {
    font-size: 22px !important;
    justify-self: start !important;
  }
  #fsv-rank-body #friends-ranking-list > *:not(:first-child) {
    grid-template-columns: 34px 42px 1fr auto !important;
    padding: 12px 14px !important;
  }
  #fsv-rank-body #friends-ranking-list > *:not(:first-child) .friend-avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
  }
}


/* =====================================================================
   FAZ 16 — AYARLAR SAYFASI (Discord tarzı sol menü + sağ view)
   ================================================================= */

#page-settings { padding: 0 !important; }

.settings-steam {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  min-height: calc(100vh - 200px);
  align-items: flex-start;
}
@media (max-width: 900px) {
  .settings-steam { grid-template-columns: 1fr; gap: 16px; }
}

/* ========== SOL MENÜ ========== */
.ssteam-menu {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* Profil mini header */
.ssm-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 200ms ease;
}
.ssm-profile:hover {
  background: rgba(0,0,0,0.35);
}
.ssm-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #C89A2E);
  color: #14100A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(200,154,46,0.3);
}
.ssm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ssm-profile-info { min-width: 0; flex: 1; }
.ssm-profile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ssm-profile-edit {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

/* Arama input */
.ssm-search {
  position: relative;
  margin-bottom: 10px;
}
.ssm-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
}
.ssteam-menu .ssm-search input[type="text"] {
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 8px 12px 8px 34px !important;
  font-size: 12.5px !important;
  color: var(--text-primary) !important;
  width: 100% !important;
  transition: all 200ms ease !important;
  color-scheme: dark;
}
.ssteam-menu .ssm-search input[type="text"]:focus {
  background: rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12) !important;
}

/* Grup label */
.ssm-group-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1.3px;
  padding: 10px 10px 4px;
}

/* Menü öğeleri */
.ssm-item {
  all: unset;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.ssm-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
}
.ssm-item-icon svg { width: 16px; height: 16px; }
.ssm-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ssm-item-chev {
  width: 12px;
  height: 12px;
  opacity: 0.35;
  flex-shrink: 0;
}
.ssm-item:hover {
  background: var(--surf-2);
  color: var(--text-primary);
  transform: translateX(2px);
}
.ssm-item:hover .ssm-item-icon { opacity: 1; }
.ssm-item.active {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}
.ssm-item.active .ssm-item-icon { opacity: 1; }

/* Ayırıcı */
.ssm-divider {
  height: 1px;
  background: var(--hairline);
  margin: 10px 6px;
}

/* Çıkış Yap özel */
.ssm-logout {
  color: rgba(255,120,110,0.75) !important;
}
.ssm-logout:hover {
  background: rgba(255,120,110,0.1) !important;
  color: #FF7060 !important;
}
.ssm-logout .ssm-item-chev { display: none; }

/* ========== ANA VIEW ========== */
.ssteam-main {
  position: relative;
  min-height: 400px;
}

.ssv-view {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  animation: fsteamViewIn 320ms cubic-bezier(.22,1,.36,1) forwards;
}
.ssv-view.active { display: block; }

/* View header */
.ssv-header {
  padding: 6px 4px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.ssv-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

/* İlk view'daki profil header'ı düzenle */
.ssv-view:first-child .settings-profile-header {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* Settings group içindeki linkleri Discord tarzına çek */
.ssv-view .settings-group {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.ssv-view .settings-link {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  text-align: left;
}
.ssv-view .settings-group .settings-link:last-child {
  border-bottom: none !important;
}
.ssv-view .settings-link:hover {
  background: var(--surf-2) !important;
  border-radius: 10px !important;
}
.ssv-view .settings-link-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
}
.ssv-view .settings-link-icon svg { width: 16px; height: 16px; }
.ssv-view .settings-link-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.ssv-view .settings-link-value {
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  margin-right: 4px;
}
.ssv-view .settings-link-chevron {
  width: 14px;
  height: 14px;
  opacity: 0.4;
}

/* ========== MOBIL ========== */
@media (max-width: 900px) {
  .ssteam-menu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
    max-height: none;
  }
  .ssm-profile { display: none; }
  .ssm-search { display: none; }
  .ssm-group-label { display: none; }
  .ssm-divider { display: none; }
  .ssm-item {
    flex-direction: column;
    text-align: center;
    padding: 8px 10px;
    min-width: 82px;
    gap: 4px;
    white-space: nowrap;
  }
  .ssm-item-label { font-size: 10.5px; }
  .ssm-item-chev { display: none; }
}


/* =====================================================================
   FAZ 17 — AYARLAR SIFIRDAN İÇERİK (Discord tarzı row, panel, toggle)
   ================================================================= */

/* View body */
.ssv-body {
  padding: 0 4px;
  max-width: 820px;
}

/* Section başlığı */
.ssv-section-title {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin: 22px 4px 10px;
}
.ssv-section-title:first-child { margin-top: 0; }

/* Panel (grup) */
.ssv-panel {
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.ssv-panel-danger {
  background: rgba(255,110,90,0.04) !important;
  border-color: rgba(255,110,90,0.2) !important;
}

/* Row */
.ssv-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline);
  transition: background 180ms ease;
}
.ssv-row:last-child { border-bottom: none; }
.ssv-row:hover { background: rgba(255,255,255,0.02); }
.ssv-row-info { flex: 1; min-width: 0; }
.ssv-row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.ssv-row-value {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono);
}
.ssv-row-value .ssv-code-value-inline {
  color: var(--gold) !important;
  letter-spacing: 3px;
  font-weight: 800;
  font-size: 15px;
}
.ssv-row-hint {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  margin-top: 3px;
  font-weight: 500;
}
.ssv-row-btn {
  all: unset;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline-strong);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
  flex-shrink: 0;
  text-align: center;
}
.ssv-row-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.ssv-panel-danger .ssv-row-btn {
  background: rgba(255,110,90,0.12);
  border-color: rgba(255,110,90,0.35);
  color: #FF7060;
}
.ssv-panel-danger .ssv-row-btn:hover {
  background: rgba(255,110,90,0.22);
}

/* Toggle switch */
.ssv-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.ssv-toggle input { opacity: 0; width: 0; height: 0; }
.ssv-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  transition: all 220ms ease;
}
.ssv-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: all 220ms cubic-bezier(.22,1,.36,1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.ssv-toggle input:checked + .ssv-toggle-slider {
  background: var(--cta);
}
.ssv-toggle input:checked + .ssv-toggle-slider::before {
  transform: translateX(18px);
}

/* Hero card (Hesap view'in üstü) */
.ssv-hero-card {
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.ssv-hero-banner {
  height: 90px;
  background: var(--surf-2);
}
.ssv-hero-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px 20px;
  margin-top: -30px;
  position: relative;
}
.ssv-hero-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #C89A2E);
  color: #14100A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 30px;
  border: 4px solid var(--surf-1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.ssv-hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ssv-hero-info { flex: 1; min-width: 0; margin-top: 30px; }
.ssv-hero-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}
.ssv-hero-title {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.ssv-hero-btn {
  all: unset;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--gold), #C89A2E);
  color: #14100A;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 30px;
  box-shadow: 0 4px 14px rgba(200,154,46,0.35);
  transition: transform 180ms ease;
  flex-shrink: 0;
}
.ssv-hero-btn:hover { transform: translateY(-2px); }

/* Status card */
.ssv-status-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(111,232,111,0.06);
  border: 1px solid rgba(111,232,111,0.22);
  border-radius: 14px;
}
.ssv-status-icon { font-size: 22px; flex-shrink: 0; }
.ssv-status-title {
  font-size: 14px;
  font-weight: 700;
  color: #6FE86F;
  margin-bottom: 4px;
}
.ssv-status-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}

/* Theme picker */
.ssv-theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.ssv-theme-card {
  background: var(--surf-1);
  border: 2px solid var(--hairline);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ssv-theme-card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
}
.ssv-theme-card.active {
  border-color: var(--hairline-strong);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.ssv-theme-card.ssv-theme-locked { opacity: 0.55; cursor: not-allowed; }
.ssv-theme-preview {
  height: 78px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.ssv-theme-dark {
  background:
    radial-gradient(ellipse 60% 40% at 30% 40%, rgba(232,185,61,0.18), transparent 65%),
    linear-gradient(135deg, #0d1017, #12131a);
}
.ssv-theme-dark::before {
  content: '';
  position: absolute;
  bottom: 8px; left: 8px;
  right: 8px; height: 20px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}
.ssv-theme-light {
  background: linear-gradient(135deg, #F7F8FC, #E8ECF2);
}
.ssv-theme-cinematic {
  background:
    radial-gradient(ellipse 60% 60% at 30% 40%, rgba(232,185,61,0.4), transparent 60%),
    radial-gradient(ellipse 60% 60% at 70% 60%, rgba(139,92,246,0.35), transparent 60%),
    #0a0c14;
}
.ssv-theme-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ssv-badge-default {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.ssv-badge-soon {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(139,92,246,0.15);
  color: var(--accent-market);
  border-radius: 999px;
  letter-spacing: 0.5px;
}

/* Kbd (keyboard shortcut) */
.ssv-kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--text-primary);
  min-width: 32px;
  text-align: center;
  flex-shrink: 0;
}

/* Odakla Hakkında - about hero */
.ssv-about-hero {
  text-align: center;
  padding: 30px 20px 24px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  margin-bottom: 20px;
}
.ssv-about-logo {
  font-size: 48px;
  margin-bottom: 8px;
}
.ssv-about-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.ssv-about-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}
.ssv-about-version {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
}

/* Mobil */
@media (max-width: 640px) {
  .ssv-hero-content { flex-direction: column; align-items: flex-start; text-align: left; }
  .ssv-hero-btn { margin-top: 12px; }
  .ssv-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ssv-row-btn, .ssv-toggle, .ssv-kbd { align-self: flex-end; }
}


/* =====================================================================
   FAZ 18 — HESAP VIEW INLINE FORMLAR (modal açmadan)
   ================================================================= */

/* Row block (inline form içeren) */
.ssv-row-block {
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline);
}
.ssv-row-block:last-child { border-bottom: none; }
.ssv-row-block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

/* Verify badge */
.ssv-verify-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(111,232,111,0.14);
  border: 1px solid rgba(111,232,111,0.32);
  color: #6FE86F;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ssv-verify-badge.ssv-verify-badge-pending {
  background: rgba(255,180,90,0.14);
  border-color: rgba(255,180,90,0.32);
  color: #FFB45A;
}

/* Inline form (input + button yan yana) */
.ssv-inline-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ssv-inline-form input {
  flex: 1;
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  color: var(--text-primary) !important;
  transition: all 200ms ease !important;
  color-scheme: dark;
}
.ssv-inline-form input:focus {
  background: rgba(0,0,0,0.38) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12) !important;
}
.ssv-inline-form input::placeholder {
  color: rgba(255,255,255,0.3) !important;
}
.ssv-inline-btn {
  all: unset;
  position: relative;
  overflow: hidden;
  padding: 0 20px;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px -8px var(--cta-glow);
  flex-shrink: 0;
}
.ssv-inline-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 550ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.ssv-inline-btn:hover { background: var(--cta-hover); transform: translateY(-1px); }
.ssv-inline-btn:hover::after { left: 125%; }
.ssv-inline-btn:active { background: var(--cta-active); transform: translateY(0) scale(0.97); }

/* Inline mesaj (success/error) */
.ssv-inline-msg {
  min-height: 18px;
  font-size: 12px;
  margin-top: 8px;
  padding: 0 4px;
  font-weight: 600;
}
.ssv-inline-msg-success { color: #6FE86F; }
.ssv-inline-msg-error { color: #FF7060; }
.ssv-inline-msg-info { color: rgba(255,255,255,0.55); }

/* Kod inline (sağda) */
.ssv-code-inline {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 3px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
}

/* Çıkış Yap butonu (büyük) */
.ssv-signout-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  margin-top: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
}
.ssv-signout-btn:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

/* Tehlikeli buton */
.ssv-danger-btn {
  all: unset;
  padding: 10px 20px;
  background: linear-gradient(180deg, #FF7060, #D64530);
  color: #FFF;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 180ms ease;
  box-shadow: 0 4px 14px rgba(214,69,48,0.35);
  flex-shrink: 0;
}
.ssv-danger-btn:hover { transform: translateY(-1px); }

/* Hero card - profil düzenle butonu YOK, ID küçük yazı */
.ssv-hero-id {
  font-size: 11px;
  color: rgba(255,255,255,0.32);
  font-family: var(--font-mono);
  margin-top: 6px;
}

/* KESİN: Eski hesap modal'ı bir daha açılırsa gizli tut */
#profile-modal-overlay[data-locked-by-odakla-settings="1"] {
  display: none !important;
}

/* =====================================================================
   FAZ 19 — STEPPER + BODY CLASS TOGGLE'LARI
   ================================================================= */

/* Stepper — Discord tarzı (- 25 dk +) */
.ssv-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
}
.ssv-stepper button {
  all: unset;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 160ms ease;
}
.ssv-stepper button:hover {
  background: rgba(255,255,255,0.14);
  color: var(--text-primary);
  transform: scale(1.05);
}
.ssv-stepper button:active { transform: scale(0.95); }
.ssv-stepper-val {
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  min-width: 62px;
  text-align: center;
}
.ssv-stepper-val span:first-child { color: var(--text-primary); }

/* Sabit değer (Uzun mola) */
.ssv-stepper-static {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
.ssv-badge-fixed {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  border-radius: 999px;
  letter-spacing: 0.5px;
}

/* Arka plan toggle'ları */
body.no-city-silhouette .castle-silhouette,
body.no-city-silhouette .focus-orbit-bg {
  display: none !important;
}
body.no-cinematic-stars .cinematic-stars,
body.no-cinematic-stars .lantern-container {
  display: none !important;
}


/* =====================================================================
   FAZ 20 — ANA SAYFA DASHBOARD (selamlama + chip'ler + mod picker)
   ================================================================= */

/* ========== HEADER — Selamlama + tarih + chip'ler ========== */
.home-hero {
  margin: 0 0 20px !important;
  padding: 0 4px !important;
  position: relative;
}
.hh-greeting-wrap {
  margin-bottom: 16px;
}
.hh-greeting {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hh-name {
  background: linear-gradient(135deg, var(--gold) 0%, #E8B93D 60%, #FFF 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hhNameShimmer 4s ease-in-out infinite;
}
@keyframes hhNameShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hh-date {
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
  font-weight: 500;
}
.hh-motivate {
  color: rgba(255,255,255,0.6);
  font-style: italic;
}

/* Chip'ler — Discord tarzı */
.hh-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.hh-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 12px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  transition: all 220ms var(--ease);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.hh-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100px 40px at 20% 50%, currentColor, transparent 65%);
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.hh-chip:hover {
  background: var(--surf-2);
  transform: translateY(-2px);
  border-color: currentColor;
}
.hh-chip:hover::before { opacity: 0.08; }
.hh-chip svg {
  width: 14px;
  height: 14px;
  opacity: 0.9;
}
.hh-chip b {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 800;
}

/* Renk bazlı chip'ler */
.hh-chip-streak { color: #FF7E4A; }
.hh-chip-streak b { color: #FF7E4A; }
.hh-chip-level  { color: var(--gold); }
.hh-chip-level b { color: var(--gold); }
.hh-chip-coin   { color: var(--accent-market); }
.hh-chip-coin b { color: var(--accent-market); }
.hh-chip-goal   { color: var(--accent-tasks); }
.hh-chip-goal b { color: var(--accent-tasks); }

/* ========== MOD SEÇ KARTLARI ========== */
.home-mode-picker {
  margin: 0 0 22px;
}
.hm-title {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin: 0 4px 10px;
}
.hm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.hm-card {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--surf-1);
  border: 1.5px solid var(--hairline);
  border-radius: 16px;
  cursor: pointer;
  transition: all 260ms var(--ease);
  position: relative;
  box-sizing: border-box;
}
.hm-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
}
/* Mod ikonları — eskiden köşeleri yuvarlanmış menekşe/mavi kare "blob" arkaplanı vardı
   (kare çerçeve gibi duruyordu), kaldırıldı. İkonun kendi SVG gradyanı rengi taşıyor,
   pasif kartta soluk/gri, seçilide tam renkli + odadaki "Hazırım" halkasıyla aynı
   dönen radar halkaları (bkz. .rm-ready-ring, aynı görsel dil burada da). */
.hm-blob {
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  filter: saturate(0.35);
  transition: opacity 260ms var(--ease), filter 260ms var(--ease);
}
.hm-card.active .hm-blob { opacity: 1; filter: none; }
.hm-orbit {
  position: absolute; border-radius: 50%; border: 1.5px solid rgba(154,140,255,0.28);
  opacity: 0; transition: opacity 300ms ease; pointer-events: none;
}
.hm-orbit.r1 { inset: -8px; }
.hm-orbit.r2 { inset: -15px; border-color: rgba(154,140,255,0.14); border-style: dashed; }
.hm-card.active .hm-orbit { opacity: 1; }
.hm-card.active .hm-orbit.r1 { animation: rm-spin-slow 16s linear infinite; }
.hm-card.active .hm-orbit.r2 { animation: rm-spin-slow 24s linear infinite reverse; }
.hm-infinity-flow { stroke-dasharray: 3 2.2; animation: hmInfinityFlow 2.4s linear infinite; }
@keyframes hmInfinityFlow { to { stroke-dashoffset: -20.8; } }
.hm-blob.hm-wobble { animation: rm-wave 0.5s ease; }
.hm-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
}
.hm-desc {
  font-size: 10.5px;
  color: rgba(255,255,255,0.45);
}
.hm-card.active {
  border-color: var(--violet-500);
  box-shadow: 0 0 0 1px var(--violet-500), 0 10px 26px var(--violet-glow);
}
.hm-check-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--violet-500);
  color: #fff;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px var(--violet-glow);
}
.hm-card.active .hm-check-badge { display: flex; }

.hm-soon {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  background: rgba(139,92,246,0.16);
  color: var(--accent-market);
  border-radius: 999px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(139,92,246,0.3);
}

.hm-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.hm-locked:hover {
  transform: none;
  border-color: var(--hairline);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.hm-locked:hover::before { opacity: 0; }

/* ========== "NE ÜZERİNE ODAKLANIYORSUN?" BAŞLIĞI ========== */
.home-course-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 4px 12px;
  flex-wrap: wrap;
}
.hct-label {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.62);
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.hct-hint {
  font-size: 11.5px;
  color: rgba(255,255,255,0.42);
  font-style: italic;
}

/* ========== MOBIL ========== */
@media (max-width: 640px) {
  .hh-greeting { font-size: 22px !important; }
  .hh-chip { padding: 6px 12px 6px 10px; font-size: 11.5px; }
  .hm-cards { grid-template-columns: 1fr !important; }
  .hm-card { padding: 14px 16px; }
  .hm-blob { width: 42px; height: 42px; }
}


/* =====================================================================
   FAZ 21 — TIMER FLIP-DIGIT + HALKA GİZLE + KOMPAKT + EFEKTLER
   ================================================================= */

/* ========== HALKA'YI GİZLE ========== */
#page-home .hero-timer-ring-wrap svg,
#page-home #home-timer-ring,
#page-home .hero-ring-bg,
#page-home .hero-ring-fg {
  display: none !important;
}
#page-home .hero-timer-ring-wrap {
  padding: 20px 0 !important;
  min-height: unset !important;
  background: none !important;
  border: none !important;
  position: relative !important;
}

/* Timer card padding'ini azalt, daha kompakt */
#page-home .card-hero {
  padding: 24px 20px !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Halkaların içindeki merkez artık statik konumda */
#page-home .hero-timer-ring-center {
  position: static !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
}
#page-home .hero-timer-ring-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.4) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

/* ========== TIMER — "modern" cam kart üniteleri ==========
   ODAKLA: kullanıcı kararı — referans "animated-countdown" bileşeninin modern
   varyantı uygulandı: eskiden her RAKAM ayrı bir flip-kart'tı (.fd-digit/.fd-sep,
   8 kutu), şimdi her BİRİM (saat/dakika/saniye) tek bir cam kutu — gün birimi
   yok (oturum sayacı, günlere ihtiyacı yok). JS tarafı odakla-features.js'teki
   wrapTimerUnits() — MutationObserver ile aynı eski desen, sadece gruplama değişti. */
#page-home #timer-main {
  font-family: var(--font-mono) !important;
  font-size: 0 !important; /* Reset parent, child'lar kendi boyutunu alacak */
  letter-spacing: 0 !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
  background: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.tmu-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
  padding: 16px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tmu-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 16px 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,0.045);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.22,1,.36,1), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.tmu-unit:hover {
  transform: translateY(-3px);
  border-color: rgba(106,92,255,0.4);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 10px 24px rgba(106,92,255,0.15);
}
.tmu-unit::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet-400), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.tmu-unit::after {
  content: attr(data-label);
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.tmu-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  color: var(--text-primary);
  animation: tmuNumberIn 320ms cubic-bezier(.22,1,.36,1);
}
@keyframes tmuNumberIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.tmu-sep {
  align-self: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 28px;
  color: rgba(255,255,255,0.3);
}

/* Timer akıyorken glow — menekşe (bkz. Odak Zamanı kartındaki diğer sarı-ışık düzeltmeleri) */
body.timer-active .tmu-unit {
  border-color: rgba(106,92,255,0.4);
  background: rgba(106,92,255,0.06);
  box-shadow: 0 0 22px rgba(106,92,255,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
}
body.timer-active .tmu-num { color: #ffffff; }
body.timer-active .tmu-sep { color: rgba(255,255,255,0.5); }

/* Phase badge kompakt */
#page-home #phase-badge {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
}
/* "Çalışıyor" durumu artık sarı değil menekşe — sayaç/rozet halkasıyla aynı sinyal rengi. */
#page-home #phase-badge.studying {
  color: var(--violet-ink) !important;
  background: rgba(106,92,255,0.14) !important;
}
#page-home #phase-badge.studying .dot {
  animation: phaseBadgeDotPulse 1.6s ease-in-out infinite;
}
@keyframes phaseBadgeDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ========== KOMPAKT — sayfayı daralt ========== */
@media (min-width: 1024px) {
  body:not(.centered-auth) #page-home {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ODAKLA: "Ne üzerine odaklanıyorsun" chip'leri artık index.html'deki .pill-chip/
   .pill-dot/.pill-label/.pill-del kurallarında tanımlı — burada üç farklı, birbiriyle
   çakışan eski katman (bu blok + üstteki shimmer bloğu + temel .pill kuralı) vardı,
   hepsi kaldırılıp tek bir tasarımda birleştirildi (2026-08-14, "ders butonu çok kötü"
   geri bildirimi üzerine — sonsuz pulse animasyonu + rastgele-renkli dolgu + üstüste
   binen ✕ kaynaktı). */

/* Streak chip paylaş — kopya feedback */
.hh-chip-copied {
  background: rgba(255,126,74,0.2) !important;
  border-color: rgba(255,126,74,0.5) !important;
  transform: translateY(-2px) scale(1.02);
}

/* Mobil */
@media (max-width: 640px) {
  .tmu-wrap { gap: 6px; padding: 10px; }
  .tmu-unit { min-width: 62px; padding: 12px 8px 10px; }
  .tmu-num { font-size: 28px; }
  .tmu-unit::after { font-size: 9px; letter-spacing: 1.2px; }
  .tmu-sep { font-size: 22px; }
  #page-home .card-hero { padding: 18px 14px !important; }
}


/* =====================================================================
   FAZ 23 — GÖREVLER SAYFASI STEAM TARZI (sol menü + view geçişi)
   ================================================================= */

#page-tasks { padding: 0 !important; }

.tasks-steam {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  min-height: calc(100vh - 200px);
  align-items: flex-start;
}
@media (max-width: 900px) {
  .tasks-steam { grid-template-columns: 1fr; gap: 16px; }
}

/* ========== SOL MENÜ ========== */
.tsteam-menu {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.tsm-title-block {
  padding: 10px 12px 16px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 10px;
}
.tsm-title-main {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-tasks);
  letter-spacing: -0.3px;
}
.tsm-title-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 4px;
}

.tsm-group-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1.2px;
  padding: 12px 10px 6px;
}

/* Item */
.tsm-item {
  all: unset;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.tsm-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
}
.tsm-item-icon svg { width: 16px; height: 16px; }
.tsm-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tsm-item:hover {
  background: var(--surf-2);
  color: var(--text-primary);
  transform: translateX(2px);
}
.tsm-item:hover .tsm-item-icon { opacity: 1; }
.tsm-item.active {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}
.tsm-item.active .tsm-item-icon { opacity: 1; }

/* Badge */
.tsm-badge {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.tsm-item.active .tsm-badge {
  background: rgba(255,255,255,0.16);
  color: var(--text-primary);
}

/* Filter kategori chip'leri (menü içinde) */
.tsm-filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tsm-cat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.tsm-filter-item.active .tsm-cat-dot {
  box-shadow: 0 0 10px currentColor;
}

/* ========== ANA VIEW ========== */
.tsteam-main {
  position: relative;
  min-height: 400px;
}
.tsv-view {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  animation: fsteamViewIn 320ms cubic-bezier(.22,1,.36,1) forwards;
}
.tsv-view.active { display: block; }

.tsv-header {
  padding: 6px 4px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.tsv-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  color: var(--text-primary);
}
.tsv-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

.tsv-body { padding: 0 4px; }

/* Empty state */
.tsv-empty {
  padding: 60px 20px;
  text-align: center;
  background: var(--surf-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: 16px;
}
.tsv-empty-emoji { font-size: 44px; margin-bottom: 12px; opacity: 0.7; }
.tsv-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
}
.tsv-empty-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}

/* Tamamlanan görev satırı */
.tsv-done-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background:
    linear-gradient(135deg, rgba(111,232,111,0.05), rgba(111,232,111,0.01));
  border: 1px solid rgba(111,232,111,0.22);
  border-radius: 14px;
  margin-bottom: 8px;
  transition: all 200ms ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tsv-done-item:hover {
  transform: translateX(3px);
  border-color: rgba(111,232,111,0.4);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 0 20px rgba(111,232,111,0.08);
}
.tsv-done-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6FE86F, #3FA83F);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14100A;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(111,232,111,0.3);
}
.tsv-done-info { min-width: 0; }
.tsv-done-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-decoration: line-through;
  text-decoration-color: rgba(111,232,111,0.6);
  text-decoration-thickness: 1.5px;
  margin-bottom: 3px;
}
.tsv-done-meta {
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.tsv-done-xp {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-tasks);
  padding: 6px 12px;
  background: rgba(111,232,111,0.12);
  border: 1px solid rgba(111,232,111,0.3);
  border-radius: 999px;
  flex-shrink: 0;
}

/* Mobil */
@media (max-width: 900px) {
  .tsteam-menu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    max-height: none;
  }
  .tsm-title-block { display: none; }
  .tsm-group-label { display: none; }
  .tsm-item {
    flex-direction: column;
    text-align: center;
    padding: 8px 12px;
    min-width: 82px;
    gap: 4px;
    white-space: nowrap;
  }
  .tsm-item-label { font-size: 10.5px; }
  .tsm-badge { position: absolute; top: 3px; right: 3px; }
  .tsm-filter-list { flex-direction: row; }
}


/* =====================================================================
   FAZ 23b — TASK ADD CONTROLS FIX (stepper + ekle butonu tek satır)
   ================================================================= */
#page-tasks .task-add-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 12px !important;
}
#page-tasks .task-add-controls > * {
  flex-shrink: 0;
}
#page-tasks .task-add-controls .task-pomo-stepper {
  margin-right: auto !important;
}
#page-tasks #task-add-btn {
  background: #ffffff !important;
  color: #0A0A0C !important;
  border: none !important;
  padding: 10px 20px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 14px -4px rgba(255,255,255,0.18) !important;
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms ease, background-color 200ms ease !important;
}
#page-tasks #task-add-btn:hover {
  background: #EDEDED !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 22px -6px rgba(255,255,255,0.24) !important;
}
#page-tasks #task-add-btn:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* =====================================================================
   FAZ 24 — PAGE HEADER BAR + BOTTOM NAV PREMIUM + MARKET STEAM
   ================================================================= */

/* ========== BOTTOM NAV PREMIUM (glassmorphism + 3D lift) ========== */
.bottom-nav,
#bottom-nav {
  position: fixed !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2000 !important;
  display: flex !important;
  gap: 4px !important;
  padding: 8px !important;
  width: auto !important;
  max-width: calc(100vw - 32px) !important;
  background: rgba(15, 17, 22, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.bottom-nav::-webkit-scrollbar,
#bottom-nav::-webkit-scrollbar { display: none; }

/* Alt nav içindeki .wrap için padding — bar altta float ettiği için */
body {
  padding-bottom: 100px !important;
}

.bottom-nav .nav-item,
#bottom-nav .nav-item {
  all: unset;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px !important;
  padding: 8px 14px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 260ms cubic-bezier(.22,1,.36,1) !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  min-width: 60px !important;
  box-sizing: border-box;
  position: relative;
}
.bottom-nav .nav-item svg,
#bottom-nav .nav-item svg {
  width: 18px !important;
  height: 18px !important;
  transition: all 220ms ease !important;
}
.bottom-nav .nav-item:hover,
#bottom-nav .nav-item:hover {
  color: var(--text-primary) !important;
  background: rgba(255,255,255,0.06) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.5) !important;
}
.bottom-nav .nav-item.active,
#bottom-nav .nav-item.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)) !important;
  color: #ffffff !important;
  transform: translateY(-5px) !important;
  box-shadow:
    0 10px 24px -6px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  animation: navItemPop 380ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes navItemPop {
  0% { transform: translateY(-5px) scale(0.9); }
  60% { transform: translateY(-6px) scale(1.06); }
  100% { transform: translateY(-5px) scale(1); }
}
.bottom-nav .nav-item.active svg,
#bottom-nav .nav-item.active svg {
  filter: none;
  transform: scale(1.08);
}
.bottom-nav .nav-item.active::before,
#bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}

/* ========== MARKET STEAM ========== */
#page-market { padding: 0 !important; }

.market-steam {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  min-height: calc(100vh - 200px);
  align-items: flex-start;
}
@media (max-width: 900px) {
  .market-steam { grid-template-columns: 1fr; gap: 16px; }
}

/* SOL MENÜ */
.mkm-menu {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  background:
    linear-gradient(180deg, rgba(185,140,255,0.05), rgba(255,255,255,0.01)),
    var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* Coin kart */
.mkm-coin-card {
  padding: 14px 16px;
  margin-bottom: 12px;
  background:
    radial-gradient(ellipse 200px 100px at 20% 30%, rgba(185,140,255,0.22), transparent 65%),
    linear-gradient(135deg, rgba(185,140,255,0.15), rgba(185,140,255,0.03));
  border: 1px solid rgba(185,140,255,0.35);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(185,140,255,0.15);
}
.mkm-coin-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.2px;
}
.mkm-coin-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent-market);
  margin-top: 4px;
  text-shadow: 0 0 12px rgba(185,140,255,0.4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mkm-coin-unit { font-size: 18px; }
.mkm-coin-hint {
  font-size: 10.5px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
  font-style: italic;
}

.mkm-group-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1.2px;
  padding: 12px 10px 6px;
}
.mkm-item {
  all: unset;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
  position: relative;
}
.mkm-item-icon {
  font-size: 16px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.mkm-item-label { flex: 1; }
.mkm-badge {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.mkm-item:hover {
  background: var(--surf-2);
  color: var(--text-primary);
  transform: translateX(2px);
}
.mkm-item.active {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}
.mkm-item.active .mkm-badge {
  background: rgba(255,255,255,0.16);
  color: var(--text-primary);
}

/* MAIN */
.mkm-main {
  position: relative;
  min-height: 400px;
}
.mkm-view {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  animation: fsteamViewIn 320ms cubic-bezier(.22,1,.36,1) forwards;
}
.mkm-view.active { display: block; }

.mkm-header {
  padding: 6px 4px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.mkm-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}
.mkm-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
}

.mkm-section-title {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.1px;
  margin: 0 4px 10px;
}
.mkm-body { padding: 0 4px; }

/* Grid */
.mkm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* Kart temel */
.mkm-card {
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  transition: all 260ms cubic-bezier(.22,1,.36,1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  cursor: default;
}
.mkm-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-strong, rgba(255,255,255,0.16));
  box-shadow: 0 14px 32px rgba(0,0,0,0.32);
}
.mkm-card.is-active {
  border-color: rgba(111,232,111,0.5);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 0 30px rgba(111,232,111,0.14);
}
.mkm-card-info {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mkm-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.mkm-card-btn {
  all: unset;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 200ms ease;
}
.mkm-btn-buy {
  background: #ffffff;
  color: #0A0A0C;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px -4px rgba(255,255,255,0.18);
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms ease, background-color 200ms ease;
}
.mkm-btn-buy:hover { background: #EDEDED; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 18px -6px rgba(255,255,255,0.24); }
.mkm-btn-buy:active { transform: translateY(0) scale(0.97); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.mkm-btn-activate {
  background: var(--surf-2, rgba(255,255,255,0.07));
  border: 1px solid var(--hairline-strong, rgba(255,255,255,0.16));
  color: var(--text-primary);
  box-shadow: none;
}
.mkm-btn-activate:hover { transform: translateY(-1px); background: var(--surf-3, rgba(255,255,255,0.1)); }
.mkm-card-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 1px;
}
.mkm-badge-active {
  background: rgba(111,232,111,0.18);
  color: #6FE86F;
  border: 1px solid rgba(111,232,111,0.35);
}

/* Frame kart preview */
.mkm-frame-preview {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 200px 120px at 50% 50%, rgba(255,255,255,0.03), transparent 70%);
  position: relative;
}
.mkm-frame-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surf-2, rgba(255,255,255,0.09));
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  position: relative;
  z-index: 2;
}

/* Frame önizlemeleri */
.frame-preview-gold .mkm-frame-avatar {
  box-shadow: 0 0 0 3px #E8B93D, 0 0 20px rgba(232,185,61,0.6);
  animation: framePulse 2s ease-in-out infinite;
}
.frame-preview-neon .mkm-frame-avatar {
  box-shadow: 0 0 0 3px #B98CFF, 0 0 25px rgba(185,140,255,0.7);
  animation: framePulse 1.8s ease-in-out infinite;
}
.frame-preview-fire .mkm-frame-avatar {
  box-shadow: 0 0 0 3px #FF6B4A, 0 0 25px rgba(255,107,74,0.7);
  animation: frameFireRotate 3s linear infinite;
}
.frame-preview-ice .mkm-frame-avatar {
  box-shadow: 0 0 0 3px #43D9FF, 0 0 25px rgba(67,217,255,0.6);
}
.frame-preview-stardust .mkm-frame-avatar {
  box-shadow: 0 0 0 2px #FFF, 0 0 30px rgba(255,255,255,0.4), 0 0 60px rgba(232,185,61,0.3);
  animation: framePulse 2.5s ease-in-out infinite;
}
.frame-preview-electric .mkm-frame-avatar {
  box-shadow: 0 0 0 3px #4AB8FF, 0 0 25px rgba(74,184,255,0.7);
  animation: frameElectric 1.5s ease-in-out infinite;
}
.frame-preview-nature .mkm-frame-avatar {
  box-shadow: 0 0 0 3px #6FE86F, 0 0 20px rgba(111,232,111,0.5);
}
.frame-preview-legendary .mkm-frame-avatar {
  box-shadow: 0 0 0 3px transparent, 0 0 30px rgba(255,74,195,0.4);
  background-clip: padding-box;
  position: relative;
}
.frame-preview-legendary .mkm-frame-avatar::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #FF4AC3, #E8B93D, #43D9FF, #6FE86F, #FF6B4A, #FF4AC3);
  z-index: -1;
  animation: frameLegendaryRotate 4s linear infinite;
}
@keyframes framePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes frameFireRotate {
  0%, 100% { box-shadow: 0 0 0 3px #FF6B4A, 0 0 25px rgba(255,107,74,0.7); }
  50% { box-shadow: 0 0 0 3px #FFB84A, 0 0 30px rgba(255,184,74,0.8); }
}
@keyframes frameElectric {
  0%, 100% { box-shadow: 0 0 0 3px #4AB8FF, 0 0 25px rgba(74,184,255,0.7); }
  50% { box-shadow: 0 0 0 3px #FFF, 0 0 30px rgba(255,255,255,0.9); }
}
@keyframes frameLegendaryRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* ODAKLA: kullanıcı kararı — Mağaza'ya 3 yeni çerçeve eklendi (aurora/kristal/gölge) */
.frame-preview-aurora .mkm-frame-avatar {
  animation: frameAurora 3s ease-in-out infinite;
}
.frame-preview-shadow .mkm-frame-avatar {
  box-shadow: 0 0 0 3px #4A3A8F, 0 0 16px rgba(90,60,180,0.5);
  animation: frameShadow 2.5s ease-in-out infinite;
}
.frame-preview-crystal .mkm-frame-avatar {
  box-shadow: 0 0 0 2px transparent, 0 0 24px rgba(154,140,255,0.4);
  position: relative;
}
.frame-preview-crystal .mkm-frame-avatar::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #FFFFFF, #9A8CFF, #43D9FF, #C9BBFF, #FFFFFF);
  z-index: -1;
  animation: frameLegendaryRotate 5s linear infinite;
}
@keyframes frameAurora {
  0%, 100% { box-shadow: 0 0 0 3px #6A5CFF, 0 0 24px rgba(106,92,255,0.6); }
  33% { box-shadow: 0 0 0 3px #43D9FF, 0 0 24px rgba(67,217,255,0.6); }
  66% { box-shadow: 0 0 0 3px #6FE88E, 0 0 24px rgba(111,232,142,0.55); }
}
@keyframes frameShadow {
  0%, 100% { box-shadow: 0 0 0 3px #4A3A8F, 0 0 16px rgba(90,60,180,0.5); }
  50% { box-shadow: 0 0 0 3px #6A4FC9, 0 0 26px rgba(106,79,201,0.7); }
}
/* ODAKLA: kullanıcı kararı — diğer çerçeveler (altın/neon/buz) gibi sade tek
   renk halka + glow olsun, gradient/parıltı/dönme yok — nav'daki temiz halka
   görünümüyle aynı aile */
.frame-preview-menekse_girdap .mkm-frame-avatar {
  box-shadow: 0 0 0 3px #9A8CFF, 0 0 24px rgba(154,140,255,0.6);
  animation: framePulse 2.2s ease-in-out infinite;
}

/* PLAYLIST */
.mkm-playlist-add {
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px;
}
.mkm-pl-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.mkm-pl-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 12px;
}
.mkm-pl-input-row {
  display: flex;
  gap: 8px;
}
.mkm-pl-input-row input {
  flex: 1;
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  color-scheme: dark;
}
.mkm-pl-input-row input:focus {
  background: rgba(0,0,0,0.4) !important;
  box-shadow: 0 0 0 2px rgba(29,185,84,0.22) !important;
}
.mkm-pl-add-btn {
  all: unset;
  padding: 0 18px;
  background: linear-gradient(180deg, #1DB954, #159441);
  color: #FFF;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(29,185,84,0.28);
  transition: transform 180ms ease;
  font-size: 13px;
}
.mkm-pl-add-btn:hover { transform: translateY(-1px); }
.mkm-pl-msg { min-height: 18px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.mkm-pl-item {
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  transition: all 200ms ease;
}
.mkm-pl-item:hover {
  border-color: rgba(29,185,84,0.35);
}
.mkm-pl-embed iframe {
  border-radius: 8px;
  display: block;
}
.mkm-pl-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
.mkm-pl-remove {
  all: unset;
  padding: 6px 12px;
  background: rgba(255,110,90,0.12);
  color: #FF7060;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease;
}
.mkm-pl-remove:hover {
  background: rgba(255,110,90,0.22);
}

/* Empty state */
.mkm-empty {
  padding: 50px 20px;
  text-align: center;
  background: var(--surf-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: 16px;
}
.mkm-empty-icon { font-size: 42px; margin-bottom: 12px; opacity: 0.7; }
.mkm-empty-title { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.mkm-empty-sub { font-size: 13px; color: rgba(255,255,255,0.4); }

/* ========== GLOBAL AVATAR FRAME CLASSES ========== */
/* body.frame-<id> — .settings-avatar, .friend-avatar (is-me), avatar mini vs. hedeflenir */
body.frame-gold .ssm-avatar,
body.frame-gold #ssv-hero-avatar,
body.frame-gold .friend-avatar.is-me,
body.frame-gold #home-avatar,
body.frame-gold #profile-avatar,
body.frame-gold #profile-toggle-btn,
body.frame-gold #spp-avatar,
.avatar-frame-slot.frame-gold {
  box-shadow: 0 0 0 3px #E8B93D, 0 0 18px rgba(232,185,61,0.55);
}
body.frame-neon .ssm-avatar,
body.frame-neon #ssv-hero-avatar,
body.frame-neon .friend-avatar.is-me,
body.frame-neon #home-avatar,
body.frame-neon #profile-avatar,
body.frame-neon #profile-toggle-btn,
body.frame-neon #spp-avatar,
.avatar-frame-slot.frame-neon {
  box-shadow: 0 0 0 3px #B98CFF, 0 0 22px rgba(185,140,255,0.65);
  animation: framePulse 1.8s ease-in-out infinite;
}
body.frame-fire .ssm-avatar,
body.frame-fire #ssv-hero-avatar,
body.frame-fire .friend-avatar.is-me,
body.frame-fire #home-avatar,
body.frame-fire #profile-avatar,
body.frame-fire #profile-toggle-btn,
body.frame-fire #spp-avatar,
.avatar-frame-slot.frame-fire {
  box-shadow: 0 0 0 3px #FF6B4A, 0 0 22px rgba(255,107,74,0.6);
  animation: frameFireRotate 3s linear infinite;
}
body.frame-ice .ssm-avatar,
body.frame-ice #ssv-hero-avatar,
body.frame-ice .friend-avatar.is-me,
body.frame-ice #home-avatar,
body.frame-ice #profile-avatar,
body.frame-ice #profile-toggle-btn,
body.frame-ice #spp-avatar,
.avatar-frame-slot.frame-ice {
  box-shadow: 0 0 0 3px #43D9FF, 0 0 22px rgba(67,217,255,0.55);
}
body.frame-stardust .ssm-avatar,
body.frame-stardust #ssv-hero-avatar,
body.frame-stardust .friend-avatar.is-me,
body.frame-stardust #home-avatar,
body.frame-stardust #profile-avatar,
body.frame-stardust #profile-toggle-btn,
body.frame-stardust #spp-avatar,
.avatar-frame-slot.frame-stardust {
  box-shadow: 0 0 0 2px #FFF, 0 0 28px rgba(255,255,255,0.35);
  animation: framePulse 2.5s ease-in-out infinite;
}
body.frame-electric .ssm-avatar,
body.frame-electric #ssv-hero-avatar,
body.frame-electric .friend-avatar.is-me,
body.frame-electric #home-avatar,
body.frame-electric #profile-avatar,
body.frame-electric #profile-toggle-btn,
body.frame-electric #spp-avatar,
.avatar-frame-slot.frame-electric {
  box-shadow: 0 0 0 3px #4AB8FF, 0 0 22px rgba(74,184,255,0.6);
  animation: frameElectric 1.5s ease-in-out infinite;
}
body.frame-nature .ssm-avatar,
body.frame-nature #ssv-hero-avatar,
body.frame-nature .friend-avatar.is-me,
body.frame-nature #home-avatar,
body.frame-nature #profile-avatar,
body.frame-nature #profile-toggle-btn,
body.frame-nature #spp-avatar,
.avatar-frame-slot.frame-nature {
  box-shadow: 0 0 0 3px #6FE86F, 0 0 18px rgba(111,232,111,0.55);
}
body.frame-legendary .ssm-avatar,
body.frame-legendary #ssv-hero-avatar,
body.frame-legendary .friend-avatar.is-me,
body.frame-legendary #home-avatar,
body.frame-legendary #profile-avatar,
body.frame-legendary #profile-toggle-btn,
body.frame-legendary #spp-avatar,
.avatar-frame-slot.frame-legendary {
  position: relative;
}
body.frame-legendary .ssm-avatar::before,
body.frame-legendary #ssv-hero-avatar::before,
body.frame-legendary .friend-avatar.is-me::before,
body.frame-legendary #home-avatar::before,
body.frame-legendary #profile-avatar::before,
body.frame-legendary #profile-toggle-btn::before,
body.frame-legendary #spp-avatar::before,
.avatar-frame-slot.frame-legendary::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #FF4AC3, #E8B93D, #43D9FF, #6FE86F, #FF6B4A, #FF4AC3);
  z-index: -1;
  animation: frameLegendaryRotate 4s linear infinite;
}
body.frame-aurora .ssm-avatar,
body.frame-aurora #ssv-hero-avatar,
body.frame-aurora .friend-avatar.is-me,
body.frame-aurora #home-avatar,
body.frame-aurora #profile-avatar,
body.frame-aurora #profile-toggle-btn,
body.frame-aurora #spp-avatar,
.avatar-frame-slot.frame-aurora {
  animation: frameAurora 3s ease-in-out infinite;
}
body.frame-shadow .ssm-avatar,
body.frame-shadow #ssv-hero-avatar,
body.frame-shadow .friend-avatar.is-me,
body.frame-shadow #home-avatar,
body.frame-shadow #profile-avatar,
body.frame-shadow #profile-toggle-btn,
body.frame-shadow #spp-avatar,
.avatar-frame-slot.frame-shadow {
  animation: frameShadow 2.5s ease-in-out infinite;
}
body.frame-crystal .ssm-avatar,
body.frame-crystal #ssv-hero-avatar,
body.frame-crystal .friend-avatar.is-me,
body.frame-crystal #home-avatar,
body.frame-crystal #profile-avatar,
body.frame-crystal #profile-toggle-btn,
body.frame-crystal #spp-avatar,
.avatar-frame-slot.frame-crystal {
  position: relative;
}
body.frame-crystal .ssm-avatar::before,
body.frame-crystal #ssv-hero-avatar::before,
body.frame-crystal .friend-avatar.is-me::before,
body.frame-crystal #home-avatar::before,
body.frame-crystal #profile-avatar::before,
body.frame-crystal #profile-toggle-btn::before,
body.frame-crystal #spp-avatar::before,
.avatar-frame-slot.frame-crystal::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #FFFFFF, #9A8CFF, #43D9FF, #C9BBFF, #FFFFFF);
  z-index: -1;
  animation: frameLegendaryRotate 5s linear infinite;
}
body.frame-menekse_girdap .ssm-avatar,
body.frame-menekse_girdap #ssv-hero-avatar,
body.frame-menekse_girdap .friend-avatar.is-me,
body.frame-menekse_girdap #home-avatar,
body.frame-menekse_girdap #profile-avatar,
body.frame-menekse_girdap #profile-toggle-btn,
body.frame-menekse_girdap #spp-avatar,
.avatar-frame-slot.frame-menekse_girdap {
  box-shadow: 0 0 0 3px #9A8CFF, 0 0 22px rgba(154,140,255,0.6);
  animation: framePulse 2.2s ease-in-out infinite;
}

/* ========== KART ÇERÇEVESİ (CARD_FRAMES) ========== */
/* ODAKLA: kullanıcı kararı — yeni kategori: profil kartının tamamını saran çerçeve.
   .ssv-hero-card (kendi ayarlar sayfam) ve .fpm-content (arkadaş modalı, arkadaşın
   kendi activeCardFrame'ine göre .card-frame-slot ile) hedeflenir. inset:0 + padding
   mask-composite border-only tekniği bilerek kullanıldı — her iki konteynerde de
   overflow:hidden/auto var (bkz. .ssv-hero-card ve #friend-profile-modal .fpm-content
   yorumu), negatif inset ile taşan bir ::before daha önce tam bu yüzden kesiliyordu. */
body.cardframe-menekse_prestij_kart .ssv-hero-card,
.card-frame-slot.cardframe-menekse_prestij_kart {
  position: relative;
}
body.cardframe-menekse_prestij_kart .ssv-hero-card::before,
.card-frame-slot.cardframe-menekse_prestij_kart::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, #C9BBFF, #6A5CFF 30%, #3D2E99 55%, #9A8CFF 80%, #C9BBFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
}
/* Market önizleme mockup'ı — küçük dikdörtgen üzerinde aynı border-only halka */
.mkm-cardframe-preview {
  height: 84px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 200px 120px at 50% 50%, rgba(255,255,255,0.03), transparent 70%);
  position: relative;
}
.mkm-cf-mock {
  width: 84%;
  height: 60%;
  border-radius: 10px;
  background: var(--surf-2, rgba(255,255,255,0.09));
  position: relative;
}
.cardframe-preview-menekse_prestij_kart .mkm-cf-mock::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, #C9BBFF, #6A5CFF 30%, #3D2E99 55%, #9A8CFF 80%, #C9BBFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ODAKLA: kullanıcı kararı — yeni kategori Unvanlar. İsim yanında görünen küçük rozet;
   Bugün sayfası selamlaması (#hh-title-badge), Mağaza kartı önizlemesi ve Arkadaşlar
   listesindeki kartlarda aynı stil kullanılır. */
.title-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--title-color, #C9BBFF);
  background: color-mix(in srgb, var(--title-color, #C9BBFF) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--title-color, #C9BBFF) 40%, transparent);
  vertical-align: middle;
  white-space: nowrap;
}
.mkm-title-preview {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 200px 120px at 50% 50%, rgba(255,255,255,0.03), transparent 70%);
}
.mkm-title-preview .title-badge {
  font-size: 14px;
  padding: 8px 18px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--title-color, #C9BBFF) 35%, transparent);
}

/* Mobil */
@media (max-width: 640px) {
  .bottom-nav .nav-item,
  #bottom-nav .nav-item {
    padding: 6px 10px !important;
    min-width: 52px !important;
    font-size: 10px !important;
  }
  .mkm-menu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    max-height: none;
  }
  .mkm-coin-card { min-width: 160px; }
  .mkm-group-label { display: none; }
  .mkm-item {
    flex-direction: column;
    text-align: center;
    padding: 8px 12px;
    min-width: 88px;
    gap: 4px;
    white-space: nowrap;
  }
  .mkm-item-label { font-size: 10.5px; }
}


/* =====================================================================
   FAZ 25 — İSTATİSTİK SAYFASI STEAM (sol menü + view geçişi)
   Cyan accent (--accent-stats)
   ================================================================= */

#page-stats { padding: 0 !important; }

.stats-steam {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  min-height: calc(100vh - 200px);
  align-items: flex-start;
}
@media (max-width: 900px) {
  .stats-steam { grid-template-columns: 1fr; gap: 16px; }
}

/* SOL MENÜ */
.stm-menu {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  background:
    linear-gradient(180deg, rgba(67,217,255,0.05), rgba(255,255,255,0.01)),
    var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.stm-title-block {
  padding: 10px 12px 16px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 10px;
}
.stm-title-main {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}
.stm-title-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 4px;
}
.stm-group-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1.2px;
  padding: 12px 10px 6px;
}
.stm-item {
  all: unset;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
  position: relative;
}
.stm-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  opacity: 0.75;
  font-size: 15px;
}
.stm-item-icon svg { width: 16px; height: 16px; }
.stm-item-label { flex: 1; }
.stm-item:hover {
  background: var(--surf-2);
  color: var(--text-primary);
  transform: translateX(2px);
}
.stm-item.active {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

/* MAIN */
.stm-main { position: relative; min-height: 400px; }
.stv-view {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  animation: fsteamViewIn 320ms cubic-bezier(.22,1,.36,1) forwards;
}
.stv-view.active { display: block; }

.stv-header {
  padding: 6px 4px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.stv-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}
.stv-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
}
.stv-body { padding: 0 4px; }

.stv-section-title {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.1px;
  margin: 20px 4px 10px;
}
.stv-soon {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(185,140,255,0.15);
  color: var(--accent-market);
  border-radius: 999px;
  margin-left: 6px;
  border: 1px solid rgba(185,140,255,0.3);
}

/* HERO STAT KARTLARI (Genel Bakış) */
.stv-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.stv-hero-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  transition: all 240ms var(--ease);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}
.stv-hero-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
}
.stv-hero-time,
.stv-hero-rounds,
.stv-hero-xp,
.stv-hero-streak { color: var(--text-primary); }

.stv-hero-icon {
  font-size: 30px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  flex-shrink: 0;
}
.stv-hero-info { min-width: 0; }
.stv-hero-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 3px;
}
.stv-hero-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}

/* Chart card (weekly/course/breakdown/activity) */
.stv-chart-card {
  background: var(--surf-1) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
  margin-bottom: 16px !important;
}

/* Highlights (en verimli saat + dün vs bugün) */
.stv-hilights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.stv-hilight-card {
  padding: 20px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  transition: all 220ms ease;
}
.stv-hilight-card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
}
.stv-hilight-title {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.2px;
  margin-bottom: 8px;
}
.stv-hilight-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.stv-hilight-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
}

/* Kişisel Rekorlar grid */
.stv-records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.stv-record-card {
  padding: 22px 20px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  transition: all 260ms var(--ease);
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.stv-record-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-strong);
  box-shadow: 0 14px 32px rgba(0,0,0,0.3);
}
.stv-record-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.stv-record-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}
.stv-record-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.stv-record-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
}

/* Empty state */
.stv-empty {
  padding: 60px 20px;
  text-align: center;
  background: var(--surf-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: 16px;
}
.stv-empty-icon { font-size: 44px; margin-bottom: 12px; opacity: 0.7; }
.stv-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
}
.stv-empty-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Mobil */
@media (max-width: 900px) {
  .stm-menu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    max-height: none;
  }
  .stm-title-block { display: none; }
  .stm-group-label { display: none; }
  .stm-item {
    flex-direction: column;
    text-align: center;
    padding: 8px 12px;
    min-width: 82px;
    gap: 4px;
    white-space: nowrap;
  }
  .stm-item-label { font-size: 10.5px; }
}


/* =====================================================================
   FAZ 25b — EMOJI YERİNE SVG BOYUTLARI + AKTİVİTE FEED BOŞLUK
   ================================================================= */

/* Hero icon SVG boyut */
.stv-hero-icon {
  padding: 12px !important;
}
.stv-hero-icon svg {
  width: 28px !important;
  height: 28px !important;
  color: currentColor !important;
}

/* Record icon SVG boyut */
.stv-record-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  color: var(--text-primary);
}
.stv-record-icon svg {
  width: 34px !important;
  height: 34px !important;
}

/* Empty icon SVG */
.stv-empty-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
}
.stv-empty-icon svg {
  width: 48px !important;
  height: 48px !important;
}

/* AKTİVİTE FEED — Empty state text'te yapışıklık düzelt */
#activity-feed-list {
  padding: 4px 0;
}
#activity-feed-list > * {
  line-height: 1.6;
}
/* Boş durum: "Bugün henüz bir hareketin yok" + "Bir oturum başlat..." — b'lerden sonra boşluk */
#activity-feed-list b,
#activity-feed-list strong {
  margin-right: 6px;
  display: inline-block;
}
/* Boş durum kartı için özel — büyük ikon + text stack */
#activity-feed-list > div:first-child:last-child {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
}
#activity-feed-list > div:first-child:last-child > b,
#activity-feed-list > div:first-child:last-child > strong {
  display: block !important;
  margin: 0 0 4px !important;
  font-size: 15px;
  color: var(--text-primary);
}

/* Period button — Bugün / Bu Hafta ikon renk uyumu */
.stm-period .stm-item-icon svg {
  color: currentColor;
}


/* =====================================================================
   FAZ 26 — XP BOOST + TIMER STİLLERİ (Market yeni kategoriler)
   ================================================================= */

/* Card-info-block (dikey layout — boost + timerstyle için) */
.mkm-card-info-block {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mkm-card-info-block .mkm-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.mkm-card-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin-bottom: 4px;
  min-height: 30px;
}
.mkm-card-info-block .mkm-card-btn {
  align-self: flex-start;
  margin-top: 4px;
}
.mkm-card-info-block .mkm-card-badge {
  align-self: flex-start;
  margin-top: 4px;
}

/* ========== XP BOOST KART ========== */
.mkm-boost-card { border-color: rgba(232,185,61,0.22); }
.mkm-boost-card:hover {
  border-color: rgba(232,185,61,0.45);
  box-shadow: 0 14px 32px rgba(0,0,0,0.32), 0 0 30px rgba(232,185,61,0.14);
}

.mkm-boost-preview {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(ellipse 200px 100px at 50% 50%, rgba(232,185,61,0.16), transparent 65%),
    linear-gradient(135deg, rgba(232,185,61,0.06), rgba(232,185,61,0.01));
  position: relative;
  overflow: hidden;
}
.mkm-boost-mult {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(232,185,61,0.5);
  letter-spacing: -1px;
}
.mkm-boost-icon svg {
  width: 34px;
  height: 34px;
  color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(232,185,61,0.6));
  animation: boostPulse 2s ease-in-out infinite;
}
@keyframes boostPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}

/* Aktif boost banner (üstte) */
.mkm-boost-active {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  background:
    radial-gradient(ellipse 400px 100px at 20% 50%, rgba(232,185,61,0.16), transparent 65%),
    linear-gradient(135deg, rgba(232,185,61,0.10), rgba(232,185,61,0.02));
  border: 1px solid rgba(232,185,61,0.35);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 0 20px rgba(232,185,61,0.1);
  animation: boostBannerGlow 3s ease-in-out infinite;
}
@keyframes boostBannerGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 0 20px rgba(232,185,61,0.1); }
  50% { box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 0 32px rgba(232,185,61,0.24); }
}
.mkm-boost-active-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), #C89A2E);
  border-radius: 12px;
  color: #14100A;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(200,154,46,0.5);
}
.mkm-boost-active-icon svg { width: 24px; height: 24px; }
.mkm-boost-active-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 3px;
}
.mkm-boost-active-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.mkm-boost-active-sub b {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 800;
}

/* Timer Stilleri (Market kategorisi) kaldırıldı — kullanıcı kararı, sadece
   "Klasik Flip" varsayılan hâli vardı zaten, artık her zaman o kullanılıyor. */
.mkm-badge-soon {
  background: rgba(139,92,246,0.16);
  color: var(--accent-market);
  border: 1px solid rgba(139,92,246,0.3);
}


/* =====================================================================
   FAZ 27 — AYLIK LİG SİSTEMİ
   ================================================================= */

:root {
  --league-color: #E8B93D;
  --league-gradient-end: #B8871E;
}

/* ========== LEAGUE HERO CARD (Arkadaşlar > Aylık Lig) ========== */
.league-hero-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 30px;
  margin-bottom: 22px;
  background:
    radial-gradient(ellipse 600px 200px at 15% 40%, color-mix(in srgb, var(--league-color) 20%, transparent), transparent 65%),
    radial-gradient(ellipse 400px 200px at 85% 60%, color-mix(in srgb, var(--league-gradient-end) 12%, transparent), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
  border: 1px solid color-mix(in srgb, var(--league-color) 42%, transparent);
  border-radius: 20px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.4),
    0 0 60px color-mix(in srgb, var(--league-color) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--league-color) 25%, transparent);
  position: relative;
  overflow: hidden;
  animation: leagueHeroGlow 4s ease-in-out infinite;
}
@keyframes leagueHeroGlow {
  0%, 100% { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 60px color-mix(in srgb, var(--league-color) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--league-color) 25%, transparent); }
  50% { box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 80px color-mix(in srgb, var(--league-color) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--league-color) 35%, transparent); }
}

/* Rozet wrap — hafif floating animasyon */
.lhc-badge-wrap {
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--league-color) 40%, transparent));
  animation: leagueBadgeFloat 4s ease-in-out infinite;
}
@keyframes leagueBadgeFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}

.lhc-info { min-width: 0; }
.lhc-league-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.lhc-league-name {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--league-color) 0%, #FFF 60%, var(--league-color) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: leagueNameShimmer 4s ease-in-out infinite;
}
@keyframes leagueNameShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.lhc-xp {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
.lhc-xp b {
  color: var(--league-color);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 16px;
}

/* Progress bar */
.lhc-progress { max-width: 380px; }
.lhc-progress-track {
  height: 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.lhc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--league-gradient-end), var(--league-color));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--league-color);
  transition: width 500ms cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
.lhc-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progressShimmer 2s ease-in-out infinite;
}
@keyframes progressShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.lhc-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}
.lhc-progress-labels span:first-child {
  color: var(--league-color);
  font-family: var(--font-mono);
}
.lhc-max {
  color: var(--league-color) !important;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Meta (sağ taraf — geri sayım + ödül) */
.lhc-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 120px;
}
.lhc-timeleft, .lhc-reward {
  padding: 12px 16px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  text-align: center;
}
.lhc-timeleft-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.lhc-timeleft-label, .lhc-reward-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.2px;
  margin-top: 4px;
}
.lhc-reward-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
  margin-top: 4px;
  text-shadow: 0 0 10px rgba(232,185,61,0.35);
}

/* Aylık Sıralama section title */
.league-section-title {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.3px;
  margin: 8px 4px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.league-section-range {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255,255,255,0.32);
  text-transform: none;
  white-space: nowrap;
}

/* Mobil */
@media (max-width: 720px) {
  .league-hero-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 20px;
    text-align: center;
  }
  .lhc-badge-wrap { display: flex; justify-content: center; }
  .lhc-progress { max-width: none; }
  .lhc-meta { flex-direction: row; }
  .lhc-timeleft, .lhc-reward { flex: 1; }
}

/* ========== HOME LEAGUE CHIP ========== */
.hh-chip-league {
  color: var(--league-color) !important;
  border-color: color-mix(in srgb, var(--league-color) 30%, transparent) !important;
}
.hh-chip-league b {
  color: var(--league-color) !important;
}
.hh-chip-league:hover {
  background: color-mix(in srgb, var(--league-color) 10%, var(--surf-1)) !important;
  border-color: var(--league-color) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--league-color) 20%, transparent) !important;
}
.hh-league-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 4px var(--league-color));
}

/* ========== RANK-UP OVERLAY (tam ekran, ligeşen atlarken) ========== */
.league-promotion-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 400ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.league-promotion-overlay.show {
  opacity: 1;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}
.lp-content {
  text-align: center;
  transform: scale(0.8);
  transition: transform 500ms cubic-bezier(.22,1.4,.36,1);
}
.league-promotion-overlay.show .lp-content {
  transform: scale(1);
}
.lp-rank-up {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 6px;
  margin-bottom: 20px;
  animation: lpRankUpBounce 1.5s ease-in-out infinite;
}
@keyframes lpRankUpBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-4px); opacity: 0.85; }
}
.lp-badge {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  filter: drop-shadow(0 0 40px currentColor);
  animation: lpBadgeGlow 2s ease-in-out infinite;
}
@keyframes lpBadgeGlow {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(2deg); }
}
.lp-league-name {
  font-size: 36px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.lp-sub {
  font-size: 13.5px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}
.lp-close-btn {
  all: unset;
  position: relative;
  overflow: hidden;
  padding: 12px 32px;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px -8px var(--cta-glow);
  transition: transform 180ms ease, background-color 180ms ease;
}
.lp-close-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 550ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.lp-close-btn:hover { background: var(--cta-hover); transform: translateY(-2px); }
.lp-close-btn:hover::after { left: 125%; }
.lp-close-btn:active { background: var(--cta-active); transform: translateY(0) scale(0.97); }

/* ========== AY SONU MODAL ========== */
.league-month-end-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.league-month-end-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.lme-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lme-card {
  position: relative;
  max-width: 420px;
  width: calc(100% - 40px);
  padding: 32px 28px;
  background: linear-gradient(135deg, #14161e, #1a1c26);
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  text-align: center;
  transform: scale(0.9);
  transition: transform 300ms cubic-bezier(.22,1.4,.36,1);
}
.league-month-end-modal.show .lme-card { transform: scale(1); }

.lme-badge {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.lme-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.lme-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.lme-sub b {
  color: var(--gold);
  font-weight: 800;
}
.lme-xp {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(232,185,61,0.35);
}
.lme-reward {
  padding: 16px;
  background: rgba(232,185,61,0.08);
  border: 1px solid rgba(232,185,61,0.3);
  border-radius: 12px;
  margin-bottom: 24px;
}
.lme-reward-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1.4px;
  margin-bottom: 6px;
}
.lme-reward-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(232,185,61,0.45);
}
.lme-close-btn {
  all: unset;
  position: relative;
  overflow: hidden;
  padding: 12px 32px;
  background: var(--cta);
  color: var(--cta-ink);
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 2px rgba(0,0,0,0.35), 0 8px 20px -8px var(--cta-glow);
  transition: transform 180ms ease, background-color 180ms ease;
}
.lme-close-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 550ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.lme-close-btn:hover { background: var(--cta-hover); transform: translateY(-2px); }
.lme-close-btn:hover::after { left: 125%; }
.lme-close-btn:active { background: var(--cta-active); transform: translateY(0) scale(0.97); }


/* =====================================================================
   FAZ 28 — LOGIN FIX + LİG SAYFASI + ARKADAŞ SİL
   ================================================================= */

/* ========== LOGIN EKRANINDA BOTTOM NAV GİZLE ========== */
body.centered-auth .bottom-nav,
body.centered-auth #bottom-nav {
  display: none !important;
}
body.centered-auth {
  padding-bottom: 0 !important;
}

/* ========== LİG SAYFASI STEAM LAYOUT ========== */
#page-league { padding: 0 !important; }
.league-steam {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  min-height: calc(100vh - 200px);
  align-items: flex-start;
}
@media (max-width: 900px) {
  .league-steam { grid-template-columns: 1fr; gap: 16px; }
}

.lgm-menu {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--league-color) 6%, transparent), rgba(255,255,255,0.01)),
    var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.lgm-title-block {
  padding: 10px 12px 16px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 10px;
}
.lgm-title-main {
  font-size: 18px;
  font-weight: 800;
  color: var(--league-color);
}
.lgm-title-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 4px;
}
.lgm-group-label {
  font-size: 9.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.32);
  letter-spacing: 1.2px;
  padding: 12px 10px 6px;
}
.lgm-item {
  all: unset;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 200ms ease;
  box-sizing: border-box;
  position: relative;
}
.lgm-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.lgm-item-icon svg { width: 16px; height: 16px; opacity: 0.75; }
.lgm-item-label { flex: 1; }
.lgm-item:hover {
  background: var(--surf-2);
  color: var(--text-primary);
  transform: translateX(2px);
}
.lgm-item.active {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

.lgm-main { position: relative; min-height: 400px; }
.lgv-view {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  animation: fsteamViewIn 320ms cubic-bezier(.22,1,.36,1) forwards;
}
.lgv-view.active { display: block; }

.lgv-header {
  padding: 6px 4px 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.lgv-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}
.lgv-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.45);
}
.lgv-body { padding: 0 4px 100px; }

/* Lig sıralama satırları */
.lgv-row {
  display: grid;
  grid-template-columns: 34px 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: all 200ms ease;
  cursor: pointer;
}
.lgv-row:hover {
  transform: translateX(4px) scale(1.01);
  border-color: rgba(106,92,255,0.4);
  box-shadow: 0 6px 20px rgba(106,92,255,0.14);
}
.lgv-row.is-me {
  background: rgba(255,255,255,0.06);
  border-color: var(--hairline-strong);
}
.lgv-rank {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  text-align: center;
}
.lgv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* ODAKLA: bug fix — overflow:hidden vardı, negatif inset kullanan Efsanevi Ejder/Kristal
     çerçevelerini (bkz. .avatar-frame-slot.frame-legendary/.frame-crystal) tamamen
     kesiyordu. İçerideki <img> zaten kendi border-radius'uyla dairesel kırpılıyor,
     overflow:hidden burada gereksizdi. */
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border: 1.5px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  transition: transform 200ms ease;
}
.lgv-row:hover .lgv-avatar { transform: scale(1.08); }
.lgv-row.is-me .lgv-avatar {
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
  border-color: var(--hairline-strong);
  color: var(--text-primary);
}
.lgv-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.lgv-meta { font-size: 11.5px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.lgv-me-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255,255,255,0.14);
  color: var(--text-primary);
  border: 1px solid var(--hairline-strong);
  font-size: 9.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 1px;
  margin-left: 6px;
  vertical-align: middle;
}
.lgv-xp {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
.lgv-xp b {
  color: var(--gold);
  font-weight: 800;
  font-size: 15px;
}

/* ODAKLA: kullanıcı isteğiyle eklenen podyum (ilk 3) — referans "leaderboard-card"
   bileşeninin LeaderboardPodium'una karşılık gelir. 1. ortada en yüksek, 2. solda,
   3. sağda; "stand" yüksekliği rank'e göre değişir. */
.lgv-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin: 4px 4px 20px;
  padding: 20px 12px 0;
}
.lgv-podium-item {
  flex: 1 1 0;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 10px 0;
  border-radius: 14px 14px 0 0;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-bottom: none;
  position: relative;
  cursor: pointer;
  transition: transform 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease, border-color 240ms ease;
}
.lgv-podium-item:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
}
.lgv-podium-item.rank-1 {
  border-color: rgba(232,185,61,0.4);
  background: linear-gradient(180deg, rgba(232,185,61,0.1), var(--surf-1));
  box-shadow: 0 0 24px rgba(232,185,61,0.12);
  z-index: 2;
}
.lgv-podium-item.rank-1:hover { box-shadow: 0 16px 36px rgba(232,185,61,0.28); }
.lgv-podium-item.rank-2 {
  border-color: rgba(200,205,215,0.3);
  background: linear-gradient(180deg, rgba(200,205,215,0.07), var(--surf-1));
}
.lgv-podium-item.rank-2:hover { box-shadow: 0 16px 36px rgba(200,205,215,0.2); }
.lgv-podium-item.rank-3 {
  border-color: rgba(205,140,90,0.3);
  background: linear-gradient(180deg, rgba(205,140,90,0.08), var(--surf-1));
}
.lgv-podium-item.rank-3:hover { box-shadow: 0 16px 36px rgba(205,140,90,0.24); }
.lgv-podium-item:hover .lgv-podium-avatar { transform: scale(1.08); }
/* ODAKLA: bug fix — :not(.avatar-frame-slot) eklendi, aksi halde 1.'nin altın parıltısı
   (specificity avantajıyla) equiplenmiş bir Market çerçevesini her zaman eziyordu —
   tam da çerçevenin en çok görünmesi gereken yerde hiç görünmüyordu. */
.lgv-podium-item.rank-1:hover .lgv-podium-avatar:not(.avatar-frame-slot) { box-shadow: 0 0 24px rgba(232,185,61,0.45); }
.lgv-podium-medal { display: flex; justify-content: center; margin-bottom: 6px; }
.lgv-podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  /* ODAKLA: bug fix — aynı gerekçe, bkz. .lgv-avatar yorumu */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 19px;
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1.5px solid var(--hairline-strong);
  margin-bottom: 10px;
  transition: transform 240ms cubic-bezier(.22,1,.36,1), box-shadow 240ms ease;
}
.lgv-podium-item.rank-1 .lgv-podium-avatar {
  width: 64px;
  height: 64px;
  font-size: 22px;
}
/* ODAKLA: bug fix — border/glow sadece çerçevesiz avatarda, bkz. yukarıdaki hover yorumu */
.lgv-podium-item.rank-1 .lgv-podium-avatar:not(.avatar-frame-slot) {
  border-color: rgba(232,185,61,0.55);
  box-shadow: 0 0 18px rgba(232,185,61,0.3);
}
.lgv-podium-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lgv-podium-level {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--violet-ink, #C9BBFF);
  margin-top: 3px;
  letter-spacing: 0.3px;
}
.lgv-podium-xp {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold);
  margin: 4px 0 12px;
}
.lgv-podium-stand {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 900;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.04);
  border-top: 1px solid var(--hairline);
}
.lgv-podium-item.rank-1 .lgv-podium-stand { height: 56px; font-size: 20px; color: rgba(232,185,61,0.7); }
.lgv-podium-item.rank-2 .lgv-podium-stand { height: 40px; font-size: 17px; }
.lgv-podium-item.rank-3 .lgv-podium-stand { height: 28px; font-size: 15px; }

.lgv-rank-list { margin-top: 4px; }

.lgv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 4px 4px;
}
.lgv-page-btn {
  all: unset;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}
.lgv-page-btn:hover:not(:disabled) {
  border-color: var(--hairline-strong);
  transform: translateY(-1px);
}
.lgv-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.lgv-page-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
@media (max-width: 640px) {
  .lgv-podium { gap: 6px; }
  .lgv-podium-item { padding: 12px 6px 0; }
  .lgv-podium-name { font-size: 11.5px; }
  .lgv-podium-avatar { width: 42px; height: 42px; font-size: 15px; }
  .lgv-podium-item.rank-1 .lgv-podium-avatar { width: 52px; height: 52px; font-size: 17px; }
}
.lgv-empty {
  padding: 40px 20px;
  text-align: center;
  background: var(--surf-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: 14px;
}
.lgv-empty-title { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.lgv-empty-sub { font-size: 12.5px; color: rgba(255,255,255,0.45); max-width: 360px; margin: 0 auto; line-height: 1.5; }

/* ALL LEAGUES grid — 7 lig mini kart */
.league-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.league-mini-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background:
    radial-gradient(ellipse 200px 100px at 20% 50%, color-mix(in srgb, var(--l-color) 12%, transparent), transparent 65%),
    var(--surf-1);
  border: 1px solid color-mix(in srgb, var(--l-color) 25%, transparent);
  border-radius: 14px;
  transition: all 240ms ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  position: relative;
}
.league-mini-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--l-color) 50%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28), 0 0 24px color-mix(in srgb, var(--l-color) 15%, transparent);
}
.league-mini-card.is-current {
  border-color: color-mix(in srgb, var(--l-color) 60%, transparent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22), 0 0 30px color-mix(in srgb, var(--l-color) 22%, transparent);
}
.lmc-badge {
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--l-color) 40%, transparent));
  flex-shrink: 0;
}
.lmc-info { min-width: 0; flex: 1; }
.lmc-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--l-color);
  margin-bottom: 3px;
}
.lmc-range {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 3px;
}
.lmc-reward {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.lmc-badge-current {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--l-color) 20%, transparent);
  color: var(--l-color);
  border: 1px solid color-mix(in srgb, var(--l-color) 40%, transparent);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 999px;
}

/* Arkadaş sil butonu */
.fr-remove-btn {
  all: unset;
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255,110,90,0.1);
  color: rgba(255,110,90,0.7);
  cursor: pointer;
  opacity: 0;
  transition: all 200ms ease;
}
.friend-row:hover .fr-remove-btn,
[data-uid]:hover .fr-remove-btn {
  opacity: 1;
}
.fr-remove-btn:hover {
  background: rgba(255,110,90,0.25);
  color: #FF7060;
  transform: scale(1.1);
}
.friend-row, [data-uid] { position: relative; }

/* Mobil */
@media (max-width: 900px) {
  .lgm-menu {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    max-height: none;
  }
  .lgm-title-block { display: none; }
  .lgm-group-label { display: none; }
  .lgm-item {
    flex-direction: column;
    text-align: center;
    padding: 8px 12px;
    min-width: 100px;
    gap: 4px;
    white-space: nowrap;
  }
  .lgm-item-label { font-size: 10.5px; }
}


/* =====================================================================
   FAZ 28b — LİG SAYFASI FIX (sol menü yükseklik + üst boşluk)
   ================================================================= */

#page-league {
  padding-top: 24px !important;
}

.lgm-menu {
  min-height: 280px !important;
}

/* Lig sayfası açıldığında diğer sayfalar tam gizlensin */
#page-league {
  position: relative;
  z-index: 5;
  background: transparent;
}


/* =====================================================================
   FAZ 28c — ARKADAŞ SİL BUTONU GÖRÜNÜR + FRIEND TAG
   ================================================================= */

/* Arkadaş sil butonu — DAİMA görünür (hover-gizli değil) */
.fr-remove-btn {
  opacity: 0.6 !important;
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(255,110,90,0.12) !important;
  color: #FF7060 !important;
  border: 1px solid rgba(255,110,90,0.25) !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  z-index: 3;
}
.fr-remove-btn:hover {
  opacity: 1 !important;
  background: rgba(255,110,90,0.3) !important;
  transform: translateY(-50%) scale(1.1) !important;
  border-color: rgba(255,110,90,0.5) !important;
}

/* Friend tag (Lig sayfasında arkadaş ise gösterge) */
.lgv-friend-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(127,169,255,0.15);
  color: #7FA9FF;
  border: 1px solid rgba(127,169,255,0.3);
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 1px;
  margin-left: 6px;
  vertical-align: middle;
}

/* =====================================================================
   FAZ 28e — ARKADAŞ SİL BUTONU SAĞ ÜST KÖŞE (XP ile çakışmasın)
   ================================================================= */

.fr-remove-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  transform: none !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: rgba(255,110,90,0.14) !important;
  color: #FF7060 !important;
  border: 1px solid rgba(255,110,90,0.3) !important;
  cursor: pointer !important;
  opacity: 0.75 !important;
  transition: all 200ms ease !important;
  z-index: 5;
}
.fr-remove-btn:hover {
  opacity: 1 !important;
  background: rgba(255,110,90,0.28) !important;
  transform: scale(1.15) !important;
  border-color: rgba(255,110,90,0.55) !important;
  box-shadow: 0 0 12px rgba(255,110,90,0.35) !important;
}
.fr-remove-btn svg {
  width: 12px !important;
  height: 12px !important;
}
.fsv-friend-card { position: relative; }
/* XP değeri sil butonunun altına gelmesin, biraz sola çek */
.fsv-friend-card [style*="⚡"], 
.fsv-friend-card .friend-xp {
  padding-right: 8px;
}

/* =====================================================================
   FAZ 28e — ARKADAŞ SİL: DIŞ SAĞ ÜST KÖŞE (XP'ye binmesin)
   ================================================================= */

/* Kartın kendisi overflow visible olmalı ki dışarı çıkan × görünsün */
.fsv-friend-card {
  overflow: visible !important;
  position: relative !important;
}

/* × butonu kartın dış sağ üst köşesinde, kırmızı yuvarlak */
.fr-remove-btn {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  transform: none !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #FF6B60, #D64530) !important;
  color: #FFF !important;
  border: 2px solid #0d1017 !important;
  box-shadow: 0 4px 12px rgba(214,69,48,0.5), 0 0 0 1px rgba(255,110,90,0.3) !important;
  cursor: pointer !important;
  opacity: 0.9 !important;
  transition: all 200ms cubic-bezier(.22,1.4,.36,1) !important;
  z-index: 10;
  padding: 0 !important;
}
.fr-remove-btn:hover {
  opacity: 1 !important;
  transform: scale(1.15) rotate(90deg) !important;
  box-shadow: 0 6px 16px rgba(214,69,48,0.6), 0 0 0 2px rgba(255,110,90,0.4) !important;
}
.fr-remove-btn svg {
  width: 12px !important;
  height: 12px !important;
  color: #FFF !important;
}


/* =====================================================================
   FAZ 28e — ARKADAŞ SİL BUTONU sağ üst köşeye
   ================================================================= */

.fsv-friend-card {
  position: relative !important;
}

/* Sağ üst köşe — XP göstergesiyle çakışmaz */
.fr-remove-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  transform: none !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  opacity: 0.75 !important;
  border-radius: 6px !important;
  background: rgba(255,110,90,0.14) !important;
  color: #FF7060 !important;
  border: 1px solid rgba(255,110,90,0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  z-index: 5 !important;
}
.fr-remove-btn svg {
  width: 12px !important;
  height: 12px !important;
}
.fr-remove-btn:hover {
  opacity: 1 !important;
  background: rgba(255,110,90,0.3) !important;
  border-color: rgba(255,110,90,0.55) !important;
  transform: scale(1.15) !important;
}


/* =====================================================================
   FAZ 28f — BATCH DELETE (arama yanı buton + seçim modu)
   ================================================================= */

/* Eski köşe × butonlarını GİZLE */
.fr-remove-btn { display: none !important; }

/* Arama yanı Arkadaş Sil butonu — profil modalindeki .fpm-action-btn.is-remove ile
   aynı tasarım dili (yuvarlak pill, cam efekti, hover'da kalkış+parıltı), sadece
   araç çubuğuna sığacak ölçekte. */
.friend-delete-toggle {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  margin-left: 8px;
  background: rgba(255,110,90,0.10);
  border: 1px solid rgba(255,110,90,0.32);
  color: #FF7060;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: all 220ms cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
  flex-shrink: 0;
}
.friend-delete-toggle:hover {
  background: rgba(255,110,90,0.22);
  border-color: rgba(255,110,90,0.55);
  color: #FFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255,110,90,0.3);
}
.friend-delete-toggle.is-active {
  background: rgba(255,110,90,0.28);
  border-color: rgba(255,110,90,0.6);
  color: #FFF;
  box-shadow: 0 4px 14px rgba(255,110,90,0.28);
}

/* Silme action bar (üstte) */
.friend-delete-actionbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background:
    radial-gradient(ellipse 400px 100px at 20% 50%, rgba(255,110,90,0.14), transparent 65%),
    linear-gradient(135deg, rgba(255,110,90,0.10), rgba(255,110,90,0.02));
  border: 1px solid rgba(255,110,90,0.35);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15), 0 0 20px rgba(255,110,90,0.08);
  animation: fdabSlideIn 320ms cubic-bezier(.22,1,.36,1);
}
@keyframes fdabSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fdab-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.fdab-info svg { color: #FF7060; }
.fdab-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.fdab-cancel {
  all: unset;
  padding: 8px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}
.fdab-cancel:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
}
.fdab-delete {
  all: unset;
  padding: 8px 18px;
  background: linear-gradient(180deg, #FF7060, #D64530);
  color: #FFF;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0 4px 12px rgba(214,69,48,0.3);
}
.fdab-delete:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(214,69,48,0.45);
}
.fdab-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Silme modunda kart görünümü */
body.friend-delete-mode .fsv-friend-card {
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
}
body.friend-delete-mode .fsv-friend-card:hover {
  border-color: rgba(255,110,90,0.4);
  transform: translateY(-2px);
}
body.friend-delete-mode .fsv-friend-card::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  transition: all 180ms ease;
  z-index: 3;
}
body.friend-delete-mode .fsv-friend-card.selected-to-delete {
  border-color: #FF7060 !important;
  background:
    radial-gradient(ellipse 300px 120px at 20% 50%, rgba(255,110,90,0.14), transparent 65%),
    var(--surf-1) !important;
  box-shadow: 0 0 0 2px rgba(255,110,90,0.4), 0 8px 22px rgba(0,0,0,0.28), 0 0 24px rgba(255,110,90,0.16) !important;
}
body.friend-delete-mode .fsv-friend-card.selected-to-delete::before {
  background: linear-gradient(135deg, #FF7060, #D64530);
  border-color: #FF7060;
  box-shadow: 0 0 12px rgba(255,110,90,0.55);
}
body.friend-delete-mode .fsv-friend-card.selected-to-delete::after {
  content: '';
  position: absolute;
  top: 15px;
  right: 15px;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(45deg, transparent 45%, #FFF 45%, #FFF 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #FFF 45%, #FFF 55%, transparent 55%);
  z-index: 4;
  pointer-events: none;
}


/* =====================================================================
   FAZ 28g — FRIEND PROFILE MODAL PREMIUM + SİLME MODUNDA XP GİZLE
   ================================================================= */

/* Silme modunda XP göstergesi gizli (sadece checkbox görünsün) */
body.friend-delete-mode .fsv-fc-xp {
  visibility: hidden !important;
}

/* ========== FRIEND PROFILE MODAL — PREMIUM SİNEMATİK ========== */
#friend-profile-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9500 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.72) !important;
  backdrop-filter: blur(14px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
  animation: fpmFadeIn 300ms cubic-bezier(.22,1,.36,1);
}
#friend-profile-modal.show { display: flex !important; }
@keyframes fpmFadeIn {
  from { background: rgba(0,0,0,0); backdrop-filter: blur(0px); }
  to { background: rgba(0,0,0,0.72); backdrop-filter: blur(14px); }
}

/* ODAKLA: kullanıcı kararı — "kart böyle olsun arka plan falan" — referans
   glassmorphism karta uyacak şekilde: yarı saydam+blur'lu cam yüzey + arkasında
   yumuşak menekşe glow blob'u (reference'ın indigo/purple glow'unun karşılığı). */
#friend-profile-modal .fpm-content {
  max-width: 480px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(30,26,50,0.55) 0%, rgba(14,15,22,0.75) 100%) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 24px !important;
  /* ODAKLA: dış menekşe ışıması eskiden ayrı bir ::before pseudo-element'ti
     (inset:-30px, absolute) — bu, overflow-y:auto olan bir kutunun İÇİNDE
     olduğu için tarayıcıya "içerik kutunun 30px dışına taşıyor" dedirtip
     hem yatay hem dikey sahte scrollbar'a sebep oluyordu (kullanıcı bunu
     "kenarda scroll var, ağır kasıyor" diye bildirdi). box-shadow, outline
     gibi salt görsel efektler scrollable overflow'a dahil edilmediği için
     aynı ışımayı burada ekstra bir box-shadow katmanıyla veriyoruz — hem
     scroll bug'ı gidiyor hem de ayrı bir blur(48px) katmanı/ölçüm maliyeti
     azalıyor (performans şikayetine de kısmen katkı olabilir). */
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 70px 6px rgba(106,92,255,0.22) !important;
  animation: fpmSlideUp 400ms cubic-bezier(.22,1.2,.36,1);
  position: relative;
  z-index: 1;
}
@keyframes fpmSlideUp {
  from { transform: translateY(20px) scale(0.94); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Kapat butonu */
#friend-profile-modal .fpm-close {
  all: unset !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,0.7) !important;
  cursor: pointer !important;
  transition: all 200ms ease !important;
  z-index: 3;
}
#friend-profile-modal .fpm-close:hover {
  background: rgba(255,110,90,0.18) !important;
  border-color: rgba(255,110,90,0.4) !important;
  color: #FF7060 !important;
  transform: scale(1.05) !important;
}
#friend-profile-modal .fpm-close svg { width: 16px; height: 16px; }

/* ODAKLA: kullanıcı kararı — Discord'un profil kartının aslı: üstte lig renginize
   göre değişen bir banner (JS'te showFriendModal() background yazıyor), avatar
   onun üzerine sol tarafa taşıyor, isim/etiketler/bio artık ortalı değil sola
   hizalı. Eskiden hepsi ortalıydı — bu, kullanıcının seçtiği "B" mockup yönü. */
/* ODAKLA: banner ilk sürümde sürekli (infinite) kayan bir gradient animasyonuydu —
   backdrop-filter blur'lu karta ek bir sürekli GPU maliyeti daha bindirip "ağır
   kasıyor" şikayetine katkı yapmış olabilir, statik gradiente çevrildi. */
#friend-profile-modal .fpm-banner {
  height: 84px;
  width: 100%;
  background: linear-gradient(120deg, var(--violet-500), var(--violet-400));
}

/* Header — avatar + isim, banner'ın altında */
#friend-profile-modal .fpm-header {
  padding: 0 24px 20px !important;
  text-align: left !important;
  position: relative;
}
#friend-profile-modal .fpm-avatar-wrap {
  position: relative;
  width: 88px;
  margin: -44px 0 12px 4px;
}
#friend-profile-modal .fpm-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--violet-glow), transparent 70%);
  z-index: 0;
}
#friend-profile-modal .fpm-avatar {
  width: 88px !important;
  height: 88px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)) !important;
  color: var(--text-primary) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 4px solid #16151c !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(255,255,255,0.10),
    inset 0 -4px 10px rgba(0,0,0,0.4) !important;
  position: relative;
  z-index: 1;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease;
}
#friend-profile-modal .fpm-avatar-wrap:hover .fpm-avatar {
  transform: scale(1.05);
  box-shadow: 0 14px 32px rgba(0,0,0,0.55), inset 0 2px 4px rgba(255,255,255,0.14);
}
#friend-profile-modal .fpm-name {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}
#friend-profile-modal .fpm-tags {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}
#friend-profile-modal .fpm-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 14px 0 2px;
}
/* ODAKLA: kullanıcı kararı — eski "bio" satırının yerine kendi serinle arkadaşının
   serisini kıyaslayan rozet ("3 gün öndesin" gibi) — önde/geride/eşit durumuna göre renk. */
#friend-profile-modal .fpm-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
}
#friend-profile-modal .fpm-compare-chip svg { width: 12px; height: 12px; }
#friend-profile-modal .fpm-compare-chip b { color: var(--text-primary); }
#friend-profile-modal .fpm-compare-chip.ahead { color: #8FE39A; border-color: rgba(143,227,154,0.3); background: rgba(111,232,111,0.08); }
#friend-profile-modal .fpm-compare-chip.behind { color: #FFB870; border-color: rgba(255,184,112,0.3); background: rgba(255,144,64,0.08); }
#friend-profile-modal .fpm-compare-chip.even { color: #C9BBFF; border-color: rgba(154,140,255,0.3); background: rgba(106,92,255,0.08); }
#friend-profile-modal .fpm-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--text-secondary) !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  padding: 3px 12px;
  display: inline-block;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
}

/* ODAKLA: kullanıcı kararı — arkadaş profilindeki Seri kartı (fsm-streak-card yeniden
   kullanılıyor), header ile stats bloğu arasına, aynı 24px yatay boşlukla oturuyor. */
#friend-profile-modal .fpm-streak-card {
  margin: 0 24px 4px !important;
  border-radius: 14px !important;
}

/* ODAKLA: kullanıcı kararı — referans "info-card" bileşeni birebir uygulandı, eski
   Level/XP stat grid'i + İlgi Alanları + Karşılaştırma bölümleri (ve CSS'leri) kaldırıldı. */

/* Durum noktası — referans karttaki online/away/offline göstergesi, avatarın sağ üstünde */
#friend-profile-modal .fpm-status-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #16151c;
  background: rgba(255,255,255,0.25);
  z-index: 2;
}
#friend-profile-modal .fpm-status-dot.status-online {
  background: #6FE86F;
  box-shadow: 0 0 10px rgba(111,232,111,0.6);
}
#friend-profile-modal .fpm-status-dot.status-focused {
  background: #6FE86F;
  box-shadow: 0 0 10px rgba(111,232,111,0.6);
  animation: fpmStatusPulse 1.6s ease-in-out infinite;
}
@keyframes fpmStatusPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(111,232,111,0.5); }
  50% { box-shadow: 0 0 14px rgba(111,232,111,0.9); }
}

/* ODAKLA: kullanıcı kararı — "arkadaş ekle yazsın o butonlarda çok premium olsun" —
   ikon+yazılı pill buton, iki mod: arkadaşsan kırmızı "çıkar", değilsen menekşe
   "ekle" (parıltı sweep'li, referans kartın UserPlus butonunun karşılığı). */
#friend-profile-modal .fpm-actions {
  display: flex;
  justify-content: center;
  padding: 20px 24px 24px;
}
#friend-profile-modal .fpm-action-btn {
  all: unset;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 13px 26px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
  transition: all 220ms cubic-bezier(.22,1,.36,1) !important;
}
#friend-profile-modal .fpm-action-icon { display: inline-flex; }
#friend-profile-modal .fpm-action-icon svg { width: 17px; height: 17px; }
#friend-profile-modal .fpm-action-btn.is-remove {
  background: rgba(255,110,90,0.10) !important;
  border: 1px solid rgba(255,110,90,0.32) !important;
  color: #FF7060 !important;
}
#friend-profile-modal .fpm-action-btn.is-remove::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  background-size: 220% 100%;
  background-position: 150% 0;
  pointer-events: none;
}
#friend-profile-modal .fpm-action-btn.is-remove:hover::after { animation: fpmRemoveSweep .75s ease-out 1; }
@keyframes fpmRemoveSweep { from{ background-position: 150% 0; } to{ background-position: -50% 0; } }
#friend-profile-modal .fpm-action-btn.is-remove:hover:not(:disabled) {
  background: rgba(255,110,90,0.22) !important;
  border-color: rgba(255,110,90,0.55) !important;
  color: #FFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(255,110,90,0.32) !important;
}
#friend-profile-modal .fpm-action-btn.is-add {
  background: linear-gradient(135deg, var(--violet-500), var(--violet-400)) !important;
  border: 1px solid rgba(154,140,255,0.5) !important;
  color: #FFF !important;
  box-shadow: 0 6px 20px var(--violet-glow) !important;
}
#friend-profile-modal .fpm-action-btn.is-add::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%);
  animation: fpmActionShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fpmActionShine {
  0%, 100% { transform: translateX(-120%); opacity: 0; }
  50% { transform: translateX(120%); opacity: 1; }
}
#friend-profile-modal .fpm-action-btn.is-add:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 12px 28px var(--violet-glow-strong) !important;
}
#friend-profile-modal .fpm-action-btn:disabled,
#friend-profile-modal .fpm-action-btn.is-loading {
  opacity: 0.55 !important;
  cursor: wait !important;
  transform: none !important;
}

/* Mobil */
@media (max-width: 480px) {
  #friend-profile-modal .fpm-content { max-width: 100% !important; border-radius: 16px !important; }
  #friend-profile-modal .fpm-banner { height: 68px; }
  #friend-profile-modal .fpm-header { padding: 0 20px 16px !important; }
  #friend-profile-modal .fpm-avatar-wrap { width: 76px; margin: -38px 0 10px 2px; }
  #friend-profile-modal .fpm-avatar { width: 76px !important; height: 76px !important; font-size: 30px !important; }
  #friend-profile-modal .fpm-name { font-size: 19px !important; }
}


/* =====================================================================
   FAZ 28i — Profil modal içi "Arkadaşlıktan Çıkar" + eski batch UI gizle
   ================================================================= */

/* ODAKLA: kullanıcı kararı — kart üstündeki hover-sil ikonu "çok kötü" bulundu,
   arama kutusunun yanındaki bu eski toggle+action-bar sistemi (zaten tam kodlanmış
   ama hiç enjekte edilmiyordu, bkz. injectFriendDeleteControls/bindFriendCardClicks)
   yeniden etkinleştirildi — artık gizlenmiyor. */
body.friend-delete-mode .fsv-friend-card::before,
body.friend-delete-mode .fsv-friend-card::after {
  display: none !important;
}

/* Modal kapatma × butonuna güçlü stil (garanti tıklanabilir) */
#friend-profile-modal .fpm-close {
  z-index: 999 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}


/* =====================================================================
   FAZ 29 — GÜNLÜK GÖREVLER (Bugün sayfası hero kart)
   ================================================================= */

.daily-tasks-section {
  margin: 16px 0 20px;
  padding: 18px 20px;
  background:
    radial-gradient(ellipse 600px 200px at 15% 40%, rgba(232,185,61,0.08), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
  border: 1px solid rgba(232,185,61,0.18);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  animation: dtSectionIn 400ms cubic-bezier(.22,1,.36,1);
}
@keyframes dtSectionIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dt-title-block {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dt-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.dt-progress-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  padding: 3px 10px;
  background: rgba(232,185,61,0.14);
  border: 1px solid rgba(232,185,61,0.3);
  border-radius: 999px;
}
.dt-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  padding: 4px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
}

.dt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.dt-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse 250px 120px at 15% 50%, color-mix(in srgb, var(--tier-color) 12%, transparent), transparent 65%),
    var(--surf-1);
  border: 1px solid color-mix(in srgb, var(--tier-color) 22%, transparent);
  border-radius: 14px;
  transition: all 240ms cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.dt-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tier-color) 50%, transparent);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28), 0 0 26px color-mix(in srgb, var(--tier-color) 18%, transparent);
}
.dt-card.is-completed {
  background:
    radial-gradient(ellipse 250px 120px at 15% 50%, rgba(111,232,111,0.10), transparent 65%),
    var(--surf-1);
  border-color: rgba(111,232,111,0.4);
}
.dt-card.is-completed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(111,232,111,0.06), transparent 65%);
  pointer-events: none;
}

.dt-icon {
  font-size: 28px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tier-color) 35%, transparent));
  flex-shrink: 0;
}

.dt-info { min-width: 0; flex: 1; }
.dt-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: -0.1px;
}
.dt-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
  line-height: 1.35;
}
.dt-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dt-progress-track {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.dt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tier-color), color-mix(in srgb, var(--tier-color) 70%, #FFF));
  border-radius: 999px;
  box-shadow: 0 0 8px var(--tier-color);
  transition: width 400ms cubic-bezier(.22,1,.36,1);
}
.dt-progress-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--tier-color);
  min-width: 40px;
  text-align: right;
}

.dt-reward {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.dt-tier-badge {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--tier-color);
  letter-spacing: 1.1px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--tier-color) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 35%, transparent);
  border-radius: 999px;
  margin-bottom: 4px;
}
.dt-reward-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold);
}
.dt-reward-coin {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
}

.dt-checkmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6FE86F;
  color: #14100A;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(111,232,111,0.6);
  animation: dtCheckPop 500ms cubic-bezier(.22,1.4,.36,1);
}
@keyframes dtCheckPop {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Mobil */
@media (max-width: 720px) {
  .dt-cards { grid-template-columns: 1fr; }
  .dt-card { grid-template-columns: auto 1fr; padding: 12px 14px; }
  .dt-reward { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
}

/* ========== TAMAMLANMA MODAL ========== */
.daily-task-modal {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
.daily-task-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.dtm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dtm-card {
  position: relative;
  max-width: 400px;
  width: calc(100% - 40px);
  padding: 32px 26px 26px;
  background:
    radial-gradient(ellipse 400px 200px at 50% 0%, color-mix(in srgb, var(--tier-color) 20%, transparent), transparent 65%),
    linear-gradient(135deg, #14161e, #1a1c26);
  border: 1px solid color-mix(in srgb, var(--tier-color) 45%, transparent);
  border-radius: 20px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 0 60px color-mix(in srgb, var(--tier-color) 25%, transparent);
  text-align: center;
  transform: scale(0.9);
  transition: transform 300ms cubic-bezier(.22,1.4,.36,1);
}
.daily-task-modal.show .dtm-card { transform: scale(1); }

.dtm-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tier-color), color-mix(in srgb, var(--tier-color) 70%, #FFF));
  color: #14100A;
  border-radius: 50%;
  box-shadow: 0 0 30px color-mix(in srgb, var(--tier-color) 50%, transparent);
  animation: dtmCheckSpin 700ms cubic-bezier(.22,1.4,.36,1);
}
.dtm-check svg { width: 34px; height: 34px; }
@keyframes dtmCheckSpin {
  0% { transform: rotate(-180deg) scale(0); opacity: 0; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
.dtm-tier {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--tier-color);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.dtm-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.dtm-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  line-height: 1.4;
}
.dtm-rewards {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}
.dtm-reward-item {
  padding: 12px 20px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dtm-reward-icon { font-size: 18px; }
.dtm-reward-val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(232,185,61,0.4);
}
.dtm-reward-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 1px;
}
.dtm-close-btn {
  all: unset;
  padding: 12px 32px;
  background: linear-gradient(180deg, var(--tier-color), color-mix(in srgb, var(--tier-color) 60%, #000));
  color: #14100A;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--tier-color) 30%, transparent);
  transition: transform 180ms ease;
}
.dtm-close-btn:hover { transform: translateY(-2px); }


/* =====================================================================
   FAZ 29b — GÖREVLER SAYFASI: Large variant + Tamamlananlar tarihçesi
   ================================================================= */

/* Large variant (Görevler sayfasında) */
.daily-tasks-large {
  margin: 0 !important;
  padding: 24px 28px !important;
  border-radius: 20px !important;
}
.daily-tasks-large .dt-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
}
.daily-tasks-large .dt-title {
  font-size: 22px !important;
}
.daily-tasks-large .dt-page-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin: -8px 0 20px;
  line-height: 1.5;
  max-width: 640px;
}
.daily-tasks-large .dt-cards {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
.daily-tasks-large .dt-card {
  padding: 20px 24px !important;
  gap: 18px !important;
}
.daily-tasks-large .dt-icon {
  font-size: 36px !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 14px !important;
}
.daily-tasks-large .dt-name { font-size: 16px !important; }
.daily-tasks-large .dt-desc { font-size: 13px !important; margin-bottom: 12px !important; }
.daily-tasks-large .dt-reward-val { font-size: 13.5px !important; }
.daily-tasks-large .dt-tier-badge { font-size: 9.5px !important; padding: 3px 12px !important; }

@media (max-width: 720px) {
  .daily-tasks-large { padding: 18px 20px !important; }
  .daily-tasks-large .dt-card { padding: 14px 16px !important; }
}

/* ========== TAMAMLANANLAR TARİHÇESİ ========== */
.completed-tasks-section { padding: 4px 2px; }
.ct-header {
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.ct-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.ct-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* Toplam istatistik kartları */
.ct-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ct-stat-card {
  padding: 16px 18px;
  background:
    radial-gradient(ellipse 200px 100px at 20% 50%, color-mix(in srgb, var(--st-color, var(--gold)) 12%, transparent), transparent 65%),
    var(--surf-1);
  border: 1px solid color-mix(in srgb, var(--st-color, var(--gold)) 22%, transparent);
  border-radius: 14px;
  text-align: center;
  transition: all 240ms ease;
  --st-color: var(--gold);
}
.ct-stat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--st-color) 45%, transparent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25), 0 0 20px color-mix(in srgb, var(--st-color) 15%, transparent);
}
.ct-stat-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--st-color, var(--gold));
  text-shadow: 0 0 12px color-mix(in srgb, var(--st-color, var(--gold)) 35%, transparent);
  margin-bottom: 4px;
}
.ct-stat-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1.3px;
}

/* Tier breakdown */
.ct-tier-breakdown {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin-bottom: 20px;
}
.ct-tier-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-left: 3px solid var(--tier-color);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--tier-color) 6%, transparent);
}
.ct-tier-item span {
  font-size: 11px;
  font-weight: 700;
  color: var(--tier-color);
}
.ct-tier-item b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.ct-section-title {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.4px;
  margin: 8px 4px 12px;
}

/* Günlük gruplar */
.ct-days {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ct-day {
  padding: 16px 18px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: all 200ms ease;
}
.ct-day.is-today {
  background:
    radial-gradient(ellipse 400px 100px at 20% 50%, rgba(232,185,61,0.10), transparent 65%),
    var(--surf-1);
  border-color: rgba(232,185,61,0.35);
}
.ct-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ct-day-date {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.ct-day.is-today .ct-day-date {
  color: var(--gold);
}
.ct-day-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  padding: 3px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
}
.ct-day-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ct-task-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  border-left: 2px solid var(--tier-color);
  transition: all 180ms ease;
}
.ct-task-row:hover {
  background: rgba(0,0,0,0.28);
  transform: translateX(2px);
}
.ct-task-icon { font-size: 16px; }
.ct-task-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.ct-task-tier {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--tier-color);
  letter-spacing: 1px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--tier-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-color) 30%, transparent);
  border-radius: 999px;
}
.ct-task-reward {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
}

/* Empty state */
.ct-empty {
  padding: 50px 20px;
  text-align: center;
  background: var(--surf-1);
  border: 1px dashed var(--hairline-strong);
  border-radius: 16px;
}
.ct-empty-icon { font-size: 42px; margin-bottom: 12px; opacity: 0.7; }
.ct-empty-title { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.75); margin-bottom: 6px; }
.ct-empty-sub { font-size: 12.5px; color: rgba(255,255,255,0.45); max-width: 360px; margin: 0 auto; line-height: 1.5; }

@media (max-width: 560px) {
  .ct-task-row { grid-template-columns: auto 1fr auto; }
  .ct-task-tier { display: none; }
  .ct-tier-breakdown { flex-direction: column; gap: 6px; }
}


/* =====================================================================
   FAZ 30 — POMODORO ALTI: MOTIVASYON QUOTE + BUGÜNKÜ HEDEF
   ================================================================= */

.home-focus-companion {
  margin: 16px 0 18px;
  animation: fcSectionIn 500ms cubic-bezier(.22,1,.36,1);
}
@keyframes fcSectionIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.fc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fc-label svg { opacity: 0.75; }

.fc-quote-refresh {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(232,185,61,0.08);
  border: 1px solid rgba(232,185,61,0.22);
  color: var(--gold);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
}
.fc-quote-refresh:hover {
  background: rgba(232,185,61,0.18);
  border-color: rgba(232,185,61,0.45);
  transform: translateY(-1px);
}
.fc-quote-refresh:hover svg {
  animation: fcSpin 500ms ease;
}
@keyframes fcSpin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}



/* =====================================================================
   FAZ 32 — ŞU AN ODAKTA LIVE VIEW
   ================================================================= */

.foc-header {
  margin-bottom: 16px;
}
.foc-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background:
    radial-gradient(ellipse 200px 60px at 20% 50%, rgba(111,232,111,0.14), transparent 65%),
    linear-gradient(135deg, rgba(111,232,111,0.10), rgba(111,232,111,0.02));
  border: 1px solid rgba(111,232,111,0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.foc-count-badge b {
  color: #6FE86F;
  font-family: var(--font-mono);
  font-size: 15px;
}
.foc-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6FE86F;
  box-shadow: 0 0 8px #6FE86F;
  animation: focBadgePulse 1.4s ease-in-out infinite;
}
@keyframes focBadgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

/* Grid */
.foc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* Kart */
.foc-card {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse 260px 120px at 15% 50%, rgba(111,232,111,0.08), transparent 65%),
    var(--surf-1);
  border: 1px solid rgba(111,232,111,0.24);
  border-radius: 14px;
  transition: all 240ms cubic-bezier(.22,1,.36,1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 20px rgba(111,232,111,0.04);
  animation: focCardIn 400ms cubic-bezier(.22,1,.36,1);
  position: relative;
  overflow: hidden;
}
@keyframes focCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.foc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(111,232,111,0.5);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28), 0 0 30px rgba(111,232,111,0.12);
}
.foc-card.is-me {
  border-color: rgba(127,169,255,0.5);
  background:
    radial-gradient(ellipse 260px 120px at 15% 50%, rgba(127,169,255,0.12), transparent 65%),
    var(--surf-1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 20px rgba(127,169,255,0.1);
}

.foc-status-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6FE86F;
  box-shadow: 0 0 10px #6FE86F;
  flex-shrink: 0;
}
.foc-card.is-me .foc-status-dot {
  background: var(--accent-friends);
  box-shadow: 0 0 10px var(--accent-friends);
}
.foc-status-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: currentColor;
  color: #6FE86F;
  opacity: 0.3;
  animation: focStatusPulse 1.6s ease-out infinite;
}
.foc-card.is-me .foc-status-pulse { color: var(--accent-friends); }
@keyframes focStatusPulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

.foc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border: 1.5px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.foc-card.is-me .foc-avatar {
  background: linear-gradient(135deg, rgba(127,169,255,0.28), rgba(127,169,255,0.08));
  border-color: rgba(127,169,255,0.5);
  color: var(--accent-friends);
}

.foc-info { min-width: 0; }
.foc-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foc-me-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(127,169,255,0.22);
  color: var(--accent-friends);
  border: 1px solid rgba(127,169,255,0.4);
  font-size: 9.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 1px;
  margin-left: 6px;
  vertical-align: middle;
}
.foc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
}
.foc-label {
  font-weight: 700;
  color: #6FE86F;
}
.foc-card.is-me .foc-label { color: var(--accent-friends); }
.foc-sep { opacity: 0.4; }
.foc-time { font-style: italic; }

/* Clap button */
.foc-clap-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(255,110,140,0.10);
  border: 1px solid rgba(255,110,140,0.28);
  color: #FF7090;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: visible;
}
.foc-clap-btn:hover {
  background: rgba(255,110,140,0.22);
  border-color: rgba(255,110,140,0.5);
  transform: scale(1.05);
}
.foc-clap-btn.has-clapped {
  background: linear-gradient(135deg, rgba(255,110,140,0.28), rgba(255,60,90,0.16));
  color: #FF9AB0;
  border-color: rgba(255,110,140,0.55);
  box-shadow: 0 0 12px rgba(255,110,140,0.25);
}
.foc-clap-btn.has-clapped svg {
  fill: #FF7090;
}
.foc-clap-count {
  font-family: var(--font-mono);
  font-weight: 800;
}
.foc-clap-btn.is-shaking {
  animation: focClapShake 400ms ease-out;
}
@keyframes focClapShake {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.2); }
  40% { transform: scale(0.95); }
  60% { transform: scale(1.15); }
  80% { transform: scale(1); }
}

/* Heart pop animasyonu */
.foc-heart-pop {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(0, -50%);
  color: #FF3060;
  font-size: 16px;
  pointer-events: none;
  animation: focHeartPop 1.2s cubic-bezier(.22,1,.36,1) forwards;
  z-index: 5;
}
@keyframes focHeartPop {
  0% {
    opacity: 0;
    transform: translate(0, -50%) scale(0.5);
  }
  25% {
    opacity: 1;
    transform: translate(0, -70%) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: translate(0, -180%) scale(0.8);
  }
}

@media (max-width: 640px) {
  .foc-grid { grid-template-columns: 1fr; }
  .foc-card { grid-template-columns: auto auto 1fr; padding: 12px 14px; }
  .foc-clap-btn { grid-column: 1 / -1; justify-self: flex-end; margin-top: 4px; }
}


/* =====================================================================
   FAZ 33 — REAL-TIME TOAST + NAV PENDING BADGE
   ================================================================= */

/* Toast container — sağ üstte fixed */
.odakla-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 15000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100% - 40px);
}

.odakla-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse 260px 100px at 15% 40%, rgba(232,185,61,0.14), transparent 65%),
    linear-gradient(135deg, #1a1c26, #14161e);
  border: 1px solid rgba(232,185,61,0.35);
  border-radius: 14px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.5),
    0 0 30px rgba(232,185,61,0.12);
  opacity: 0;
  transform: translateX(120%);
  transition: all 400ms cubic-bezier(.22,1.4,.36,1);
  pointer-events: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.odakla-toast.is-in {
  opacity: 1;
  transform: translateX(0);
}
.odakla-toast.is-out {
  opacity: 0;
  transform: translateX(120%) scale(0.95);
}

/* Kind-specific renkler */
.odakla-toast.toast-friend-request {
  border-color: rgba(127,169,255,0.45);
  background:
    radial-gradient(ellipse 260px 100px at 15% 40%, rgba(127,169,255,0.18), transparent 65%),
    linear-gradient(135deg, #1a1c26, #14161e);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(127,169,255,0.16);
}
.odakla-toast.toast-friend-request .ort-icon {
  background: linear-gradient(135deg, #7FA9FF, #4A78D9);
  color: #FFF;
}

.odakla-toast.toast-friend-accepted {
  border-color: rgba(111,232,111,0.5);
  background:
    radial-gradient(ellipse 260px 100px at 15% 40%, rgba(111,232,111,0.18), transparent 65%),
    linear-gradient(135deg, #1a1c26, #14161e);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(111,232,111,0.16);
}
.odakla-toast.toast-friend-accepted .ort-icon {
  background: linear-gradient(135deg, #6FE86F, #3E9E4A);
  color: #FFF;
}

.ort-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), #C89A2E);
  color: #14100A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,0.3);
}
.ort-icon svg {
  width: 20px;
  height: 20px;
}
.ort-content {
  min-width: 0;
  flex: 1;
}
.ort-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.1px;
  margin-bottom: 3px;
  line-height: 1.3;
}
.ort-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.68);
  line-height: 1.4;
}
.ort-close {
  all: unset;
  padding: 4px;
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 180ms ease;
  align-self: flex-start;
}
.ort-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

/* Progress bar (görsel — süre biterken) */
.odakla-toast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent);
  opacity: 0.4;
  animation: toastTimeBar 5s linear;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.odakla-toast { position: relative; overflow: hidden; }
.odakla-toast.toast-friend-request::after { color: #7FA9FF; }
.odakla-toast.toast-friend-accepted::after { color: #6FE86F; }
@keyframes toastTimeBar {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Nav bar üstünde pending badge (Arkadaşlar butonunda) */
.nav-pending-dot {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7060, #D64530);
  color: #FFF;
  font-size: 9.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(214,69,48,0.5), 0 0 12px rgba(255,110,90,0.35);
  border: 2px solid #0d1017;
  animation: navPendingPulse 2s ease-in-out infinite;
  z-index: 5;
}
@keyframes navPendingPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Mobil */
@media (max-width: 640px) {
  .odakla-toast-container { top: 12px; right: 12px; max-width: calc(100% - 24px); }
  .odakla-toast { padding: 12px 14px; }
  .ort-title { font-size: 12.5px; }
  .ort-text { font-size: 11.5px; }
}


/* =====================================================================
   FAZ 34 — PRESENCE (çevrimiçi + odakta kart görünümleri)
   ================================================================= */

.fsv-online-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background:
    radial-gradient(ellipse 240px 100px at 15% 40%, rgba(111,232,111,0.08), transparent 65%),
    var(--surf-1);
  border: 1px solid rgba(111,232,111,0.28);
  border-radius: 12px;
  transition: all 240ms ease;
  animation: fsvOnlineIn 400ms cubic-bezier(.22,1,.36,1);
}
@keyframes fsvOnlineIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fsv-online-card:hover {
  transform: translateY(-2px);
  border-color: rgba(111,232,111,0.5);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28), 0 0 24px rgba(111,232,111,0.14);
}
.fsv-online-card.is-focused {
  background:
    radial-gradient(ellipse 240px 100px at 15% 40%, rgba(185,140,255,0.14), transparent 65%),
    var(--surf-1);
  border-color: rgba(185,140,255,0.4);
}
.fsv-online-card.is-focused .foc-status-dot {
  background: var(--accent-market);
  box-shadow: 0 0 10px var(--accent-market);
}
.fsv-online-card.is-focused .foc-status-pulse { color: var(--accent-market); }
.fsv-online-card.is-focused .foc-label { color: var(--accent-market); }

/* Ana sayfa chip'lerinde "SEN ÇEVRİMİÇİSİN" indicator */
.hh-online-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(111,232,111,0.08);
  border: 1px solid rgba(111,232,111,0.28);
  position: relative;
  vertical-align: middle;
  margin-right: 4px;
}
.hh-online-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6FE86F;
  box-shadow: 0 0 10px #6FE86F;
  position: relative;
}
.hh-online-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #6FE86F;
  opacity: 0.35;
  animation: hhOnlinePulse 1.6s ease-out infinite;
}
@keyframes hhOnlinePulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(2); opacity: 0; }
}
.hh-online-indicator::after {
  content: 'ÇEVRİMİÇİ';
  font-size: 9px;
  font-weight: 800;
  color: #6FE86F;
  letter-spacing: 1.2px;
}



/* FAZ 35d — Presence teşhis paneli */
.presence-diagnostic-box {
  margin: 0 0 20px;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse 260px 100px at 15% 40%, rgba(232,185,61,0.06), transparent 65%),
    var(--surf-1);
  border: 1px solid rgba(232,185,61,0.20);
  border-radius: 12px;
}
.pdb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.2px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pdb-header svg { color: var(--gold); }
.pdb-refresh {
  all: unset;
  margin-left: auto;
  padding: 4px 6px;
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 180ms ease;
}
.pdb-refresh:hover { color: var(--gold); background: rgba(232,185,61,0.1); }
.pdb-body { display: flex; flex-direction: column; gap: 4px; }
.pdb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.pdb-row b { font-family: var(--font-mono); color: var(--text-primary); font-weight: 800; }
.pdb-hint {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255,110,90,0.06);
  border-left: 2px solid rgba(255,110,90,0.4);
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}
.pdb-rules {
  margin: 10px 0 8px;
  padding: 10px 12px;
  background: #0a0c12;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
  max-height: 200px;
}
.pdb-copy-btn {
  all: unset;
  padding: 6px 12px;
  background: rgba(232,185,61,0.14);
  border: 1px solid rgba(232,185,61,0.35);
  color: var(--gold);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}
.pdb-copy-btn:hover { background: rgba(232,185,61,0.28); }

/* =====================================================================
   FAZ 37 — SINEMATIK LOADING SCREEN + SAYFA GEÇİŞLERİ
   ================================================================= */

/* ========== İLK YÜKLEME OVERLAY ========== */
.odakla-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms cubic-bezier(.22,1,.36,1), visibility 700ms;
  pointer-events: all;
}
.odakla-loading-screen.is-visible {
  opacity: 1;
  visibility: visible;
}
.odakla-loading-screen.is-fading {
  opacity: 0;
  visibility: hidden;
  transition: opacity 700ms cubic-bezier(.22,1,.36,1), visibility 700ms;
}

/* FAZ 38 — Menekşe "Constellation Assembly": kullanıcı onayıyla, kırmızı şeritli eski
   sinematik ekranın yerine geçti. Grain + vinyet, yıldız/bağlantı dokusu, iki katmanlı
   halka (dış: sürekli dönen noktalı; iç: logoyla eşzamanlı kendini çizen gradyan),
   materyalize olan logo + üstünden geçen ışık parıltısı, harflerin blur'dan netliğe
   gelişi. Tüm zamanlama premium ürünlerin imza eğrisi cubic-bezier(.16,1,.3,1) ile. */
.ols-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 900px 700px at 50% 45%, #0a0a0d, #000 75%);
}
.ols-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}
.ols-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 46%, transparent 40%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}
.ols-star {
  position: absolute;
  border-radius: 50%;
  background: #B7A6FF;
  animation: olsTwinkle 4.5s ease-in-out infinite, olsStarDrift 7s ease-in-out infinite;
}
.ols-star::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154,140,255,.5), transparent 70%);
}
@keyframes olsTwinkle { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes olsStarDrift { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(6px,-8px); } }
.ols-links { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .28; }
.ols-links line { stroke: url(#olsLinkGrad); stroke-width: .75; animation: olsLinkFade 5s ease-in-out infinite; }
@keyframes olsLinkFade { 0%, 100% { opacity: .1; } 50% { opacity: .55; } }

.ols-content {
  position: relative;
  text-align: center;
  padding: 0 40px;
  animation: olsContentIn 800ms cubic-bezier(.22,1,.36,1);
}
@keyframes olsContentIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.ols-ring-wrap {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0 auto 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ols-ring-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ols-ring-outer {
  fill: none;
  stroke: rgba(154,140,255,.14);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  transform-origin: 50% 50%;
  animation: olsOuterSpin 18s linear infinite;
}
.ols-ring-track { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 1.5; }
.ols-ring-prog {
  fill: none;
  stroke: url(#olsRingGrad);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(106,92,255,.8));
  stroke-dasharray: 264;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: olsRingDraw 4.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes olsOuterSpin { to { transform: rotate(360deg); } }
@keyframes olsRingDraw { 0% { stroke-dashoffset: 264; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }

.ols-logo {
  position: relative;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: olsMaterialize 4.4s cubic-bezier(.16,1,.3,1) infinite;
  overflow: visible;
}
.ols-logo::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(154,140,255,.6);
  opacity: 0;
  animation: olsPulseRing 4.4s cubic-bezier(.16,1,.3,1) infinite;
}
.ols-logo-img {
  width: 62px;
  height: 62px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 18px rgba(106,92,255,.55));
}
.ols-logo-fallback { width: 62px; height: 62px; position: relative; z-index: 1; color: #C9BBFF; filter: drop-shadow(0 0 18px rgba(106,92,255,.55)); }
.ols-sheen {
  position: absolute;
  top: -12px; left: -34px;
  width: 22px; height: 100px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: rotate(22deg);
  opacity: 0;
  animation: olsSheen 4.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes olsMaterialize {
  0% { opacity: 0; transform: scale(.4); filter: blur(10px); }
  16% { opacity: 1; transform: scale(1.1); filter: blur(0); }
  24% { transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.4); filter: blur(10px); }
}
@keyframes olsPulseRing {
  0%, 13% { opacity: 0; transform: scale(.6); }
  20% { opacity: .9; transform: scale(1.7); }
  38% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; }
}
@keyframes olsSheen {
  0%, 15% { opacity: 0; left: -34px; }
  22% { opacity: .9; }
  32% { opacity: 0; left: 84px; }
  100% { opacity: 0; left: 84px; }
}

.ols-title {
  display: flex;
  justify-content: center;
  gap: .3em;
  margin-bottom: 9px;
}
.ols-title span {
  opacity: 0;
  display: inline-block;
  animation: olsLetterIn 4.4s cubic-bezier(.16,1,.3,1) both infinite;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .1em;
  background: linear-gradient(180deg, #FFFFFF, #C9BBFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes olsLetterIn {
  0%, 13% { opacity: 0; transform: translateY(8px) scale(.92); filter: blur(3px); }
  28% { opacity: 1; transform: none; filter: blur(0); }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

.ols-sub {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  letter-spacing: 1.2px;
  margin-bottom: 4px;
  opacity: 0;
  animation: olsSubIn 4.4s ease both infinite;
}
@keyframes olsSubIn { 0%, 42% { opacity: 0; } 54% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }

/* ========== GEÇİŞ OVERLAY (küçük, hızlı) ========== */
.odakla-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 18, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms;
  pointer-events: none;
}
.odakla-transition-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.oto-spinner {
  width: 44px;
  height: 44px;
  color: #F4F4F6;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.25));
}
.oto-spinner svg {
  width: 100%;
  height: 100%;
  animation: otoSpin 900ms linear infinite;
}
@keyframes otoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========== SAYFA GEÇİŞ ANIMASYONU ========== */
main.is-transitioning {
  animation: mainTransition 350ms cubic-bezier(.22,1,.36,1);
}
@keyframes mainTransition {
  0%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  30%  { opacity: 0.4; transform: translateY(4px) scale(0.995); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Sayfa geçişinde .page-* elementleri de kısa fade in yapsın */
[id^="page-"]:not([style*="display:none"]):not([style*="display: none"]) {
  animation: pageFadeIn 300ms cubic-bezier(.22,1,.36,1);
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== MANUAL REFRESH BUTONU ========== */
.hh-refresh-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 240ms ease;
  vertical-align: middle;
  margin-left: 4px;
}
.hh-refresh-btn:hover {
  color: var(--gold);
  background: rgba(232,185,61,0.10);
  border-color: rgba(232,185,61,0.32);
  transform: rotate(60deg);
}
.hh-refresh-btn:active { transform: rotate(120deg) scale(0.94); }
.hh-refresh-btn.is-spinning svg {
  animation: refreshSpin 800ms cubic-bezier(.22,1,.36,1);
}
@keyframes refreshSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .ols-logo-stage { width: 120px; height: 120px; }
  .ols-logo { width: 66px; height: 66px; }
  .ols-title { font-size: 24px; letter-spacing: 6px; }
  .ols-sub { font-size: 11.5px; }
  .ols-progress { width: 220px; }
}


/* =====================================================================
   FAZ 38 — BİLDİRİM ÇANI + PANEL (sağ üst köşe)
   ================================================================= */

/* Eski Rozetler kalıntısını gizle */
[data-settings-tab="achievements"],
#settings-tab-achievements,
.stv-empty-title:has-text("24 rozet") {
  display: none !important;
}

/* ============ ÇAN BUTONU ============ */
.odakla-notif-bell {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 12000;
}

/* ODAKLA: kullanıcı kararı — indir/yenile/bildirim ikonları çok büyük ve tam
   yuvarlaktı; küçültüldü ve "kare ama kenarları yumuşak" (squircle) yapıldı. */
.onb-btn {
  all: unset;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(20,22,30,0.9), rgba(14,16,22,0.9));
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 240ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.onb-btn svg { width: 15px; height: 15px; }
.onb-btn:hover {
  color: #C9BBFF;
  border-color: rgba(106,92,255,0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 20px rgba(106,92,255,0.2);
}

/* ODAKLA: bildirim varsa altın yerine menekşe uyarı — marka rengiyle tutarlı */
.odakla-notif-bell.has-unseen .onb-btn,
.onb-btn.has-new,
.onb-btn.has-live-announcement {
  color: #C9BBFF;
  border-color: rgba(154,140,255,0.6);
  animation: onbBellRing 2s ease-in-out infinite;
}
@keyframes onbBellRing {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-8deg); }
  20%, 40% { transform: rotate(8deg); }
  50% { transform: rotate(0); }
}

.onb-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF7060, #D64530);
  color: #FFF;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(214,69,48,0.55), 0 0 12px rgba(255,110,90,0.4);
  border: 2px solid #0d1017;
  animation: onbBadgePulse 1.8s ease-in-out infinite;
}
@keyframes onbBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ============ PANEL ============
   ODAKLA: kullanıcı kararı — referans "Vercel notification popover" bileşeni
   birebir uygulandı (Tümü/Okunmamış/Arşiv sekmeleri, ayarlar dişlisi, kart üstü
   arşivle ikonu). Eski panel altın/gold vurgu kullanıyordu (Menekşe geçişinden
   kaçmış kalıntı) — menekşeye çevrildi. */
.onb-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 380px;
  max-height: 500px;
  background:
    radial-gradient(ellipse 300px 200px at 30% 0%, rgba(106,92,255,0.12), transparent 60%),
    linear-gradient(135deg, #1a1c26 0%, #14161e 100%);
  border: 1px solid rgba(106,92,255,0.3);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 0 40px rgba(106,92,255,0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 300ms cubic-bezier(.22,1.4,.36,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.onb-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.onb-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 6px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.onb-tabs { display: flex; align-items: center; height: 100%; }
.onb-tab {
  all: unset;
  position: relative;
  height: 100%;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: color 180ms ease;
}
.onb-tab:hover { color: rgba(255,255,255,0.75); }
.onb-tab.active { color: var(--text-primary); }
.onb-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--violet-400);
  box-shadow: 0 0 8px var(--violet-glow);
}
.onb-settings-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 180ms ease;
}
.onb-settings-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  transform: rotate(30deg);
}

.onb-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(106,92,255,0.3) transparent;
}
.onb-panel-body::-webkit-scrollbar { width: 6px; }
.onb-panel-body::-webkit-scrollbar-thumb {
  background: rgba(106,92,255,0.3);
  border-radius: 999px;
}

.onb-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.onb-mark-all {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 180ms ease;
}
.onb-mark-all:hover {
  background: rgba(106,92,255,0.08);
  color: var(--violet-ink);
}

.onb-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  margin: 4px 6px;
  border-radius: 12px;
  transition: all 220ms ease;
  cursor: default;
  border-left: 3px solid transparent;
}
.onb-item:hover {
  background: rgba(255,255,255,0.03);
}
.onb-item.is-unseen {
  background: rgba(106,92,255,0.08);
  border-left-color: var(--violet-400);
  animation: onbItemHighlight 4s ease-in-out infinite;
}
@keyframes onbItemHighlight {
  0%, 100% { background: rgba(106,92,255,0.08); }
  50% { background: rgba(106,92,255,0.14); }
}

.onb-item-dot {
  position: absolute;
  top: 14px;
  right: 40px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet-400);
  box-shadow: 0 0 10px var(--violet-glow);
  transition: opacity 400ms ease;
}

.onb-item-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(106,92,255,0.10);
  border: 1px solid rgba(106,92,255,0.24);
  border-radius: 10px;
  flex-shrink: 0;
}
.onb-item-content { min-width: 0; }
.onb-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.onb-item-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.onb-item-date {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.onb-item-body {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.45;
}

/* Kart üstü arşivle ikonu — hover'da belirir (referans kartın group-hover davranışı) */
.onb-item-archive-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: rgba(255,255,255,0.35);
  opacity: 0;
  transform: scale(0.85);
  cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, color 180ms ease;
  align-self: center;
}
.onb-item:hover .onb-item-archive-btn { opacity: 1; transform: scale(1); }
.onb-item-archive-btn:hover {
  background: rgba(106,92,255,0.16);
  color: var(--violet-ink);
}

.onb-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
}
.onb-empty-archived {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.onb-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.35);
}

@media (max-width: 640px) {
  .odakla-notif-bell { top: 14px; right: 14px; }
  .onb-btn { width: 30px; height: 30px; }
  .onb-panel {
    width: calc(100vw - 28px);
    max-width: 380px;
    right: 0;
  }
}


/* FAZ 39 — Mini widget butonu */
.hh-mini-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: linear-gradient(135deg, rgba(232,185,61,0.10), rgba(232,185,61,0.04));
  border: 1px solid rgba(232,185,61,0.28);
  color: var(--gold);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 200ms ease;
  vertical-align: middle;
  margin-left: 6px;
}
.hh-mini-btn:hover {
  background: linear-gradient(135deg, rgba(232,185,61,0.22), rgba(232,185,61,0.08));
  border-color: rgba(232,185,61,0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(232,185,61,0.15);
}

/* FAZ 41 — Custom Input Modal (Electron prompt() yerine) */
.odakla-input-modal {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms;
}
.odakla-input-modal.is-open { opacity: 1; visibility: visible; }
.oim-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,6,10,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.oim-card {
  position: relative;
  width: calc(100% - 40px);
  max-width: 400px;
  background: radial-gradient(ellipse 300px 200px at 30% 0%, rgba(232,185,61,0.12), transparent 60%), linear-gradient(135deg, #1a1c26 0%, #14161e 100%);
  border: 1px solid rgba(232,185,61,0.32);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(232,185,61,0.10);
  overflow: hidden;
  transform: scale(0.94);
  transition: transform 300ms cubic-bezier(.22,1.4,.36,1);
}
.odakla-input-modal.is-open .oim-card { transform: scale(1); }
.oim-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.1px;
}
.oim-body { padding: 18px 20px 8px; }
.oim-label {
  display: block;
  font-size: 10.5px; font-weight: 800;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.2px;
  margin-bottom: 8px;
}
.oim-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font-mono);
  font-weight: 700;
  transition: all 200ms ease;
  outline: none;
}
.oim-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232,185,61,0.18);
  background: rgba(0,0,0,0.4);
}
.oim-hints {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 12px;
  font-size: 10.5px; color: rgba(255,255,255,0.42);
}
.oim-footer {
  padding: 12px 20px 16px;
  display: flex; gap: 8px; justify-content: flex-end;
}
.oim-btn {
  all: unset;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 200ms ease;
}
.oim-cancel {
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.oim-cancel:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.oim-ok {
  background: linear-gradient(180deg, var(--gold), #C89A2E);
  color: #14100A;
  box-shadow: 0 6px 18px rgba(200,154,46,0.3);
}
.oim-ok:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(200,154,46,0.45); }

/* FAZ 42 — Offline / Reconnect Banner */
.odakla-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 14000;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  transform: translateY(-100%);
  transition: transform 400ms cubic-bezier(.22,1,.36,1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.odakla-offline-banner.is-visible { transform: translateY(0); }

.odakla-offline-banner.is-offline {
  background: linear-gradient(90deg, rgba(214,69,48,0.95), rgba(232,120,90,0.95));
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.odakla-offline-banner.is-offline svg {
  animation: offlineBannerPulse 1.6s ease-in-out infinite;
}
@keyframes offlineBannerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.odakla-offline-banner.is-back {
  background: linear-gradient(90deg, rgba(63,166,90,0.95), rgba(111,232,111,0.95));
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.odakla-offline-banner.is-back svg {
  animation: onlineBannerCheck 500ms cubic-bezier(.22,1.4,.36,1);
}
@keyframes onlineBannerCheck {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* =====================================================================
   FAZ 43 — FOCUS SHIELD (Desktop app engelleyici)
   ================================================================= */

#ssv-focusshield { padding: 0 !important; }

.fs-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 4px 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
}
.fs-header-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232,185,61,0.22), rgba(232,185,61,0.06));
  border: 1px solid rgba(232,185,61,0.4);
  color: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(232,185,61,0.15);
}
.fs-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
.fs-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

.fs-info-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(232,185,61,0.06);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.fs-info-card b { color: var(--gold); }
.fs-info-card svg { flex-shrink: 0; margin-top: 2px; }

.fs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.fs-primary-btn, .fs-secondary-btn, .fs-danger-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 200ms ease;
}
.fs-primary-btn {
  background: linear-gradient(180deg, var(--gold), #C89A2E);
  color: #14100A;
  box-shadow: 0 6px 18px rgba(200,154,46,0.3);
}
.fs-primary-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(200,154,46,0.45); }
.fs-primary-btn:disabled { opacity: 0.6; cursor: wait; }
.fs-secondary-btn {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.08);
}
.fs-secondary-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); }
.fs-danger-btn {
  background: rgba(255,110,90,0.10);
  color: #FF7060;
  border: 1px solid rgba(255,110,90,0.32);
}
.fs-danger-btn:hover { background: rgba(255,110,90,0.22); border-color: rgba(255,110,90,0.6); color: #FFF; }

.fs-mini-spinner {
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fsSpin 700ms linear infinite;
}
@keyframes fsSpin { to { transform: rotate(360deg); } }

.fs-section-title {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1.4px;
  margin: 8px 4px 12px;
}

/* KAYITLI LİSTE */
.fs-saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.fs-saved-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(232,185,61,0.10), rgba(232,185,61,0.02));
  border: 1px solid rgba(232,185,61,0.32);
  border-radius: 10px;
  transition: all 200ms ease;
}
.fs-saved-item:hover { border-color: rgba(232,185,61,0.55); }
.fs-shield-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,185,61,0.15);
  border-radius: 6px;
  color: var(--gold);
  flex-shrink: 0;
}
.fs-saved-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-remove-btn {
  all: unset;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 180ms ease;
}
.fs-remove-btn:hover {
  background: rgba(255,110,90,0.2);
  color: #FF7060;
}

/* EMPTY */
.fs-empty-state {
  padding: 40px 20px;
  text-align: center;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 14px;
  margin-bottom: 20px;
}
.fs-empty-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.6; }
.fs-empty-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.72); margin-bottom: 4px; }
.fs-empty-sub { font-size: 12px; color: rgba(255,255,255,0.42); }

/* TARAMA SONUCU */
.fs-scan-hint {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.fs-scan-hint b { color: var(--gold); }
.fs-scan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
  margin-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,185,61,0.25) transparent;
}
.fs-scan-grid::-webkit-scrollbar { width: 6px; }
.fs-scan-grid::-webkit-scrollbar-thumb { background: rgba(232,185,61,0.25); border-radius: 999px; }

.fs-scan-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: all 180ms ease;
}
.fs-scan-item:hover { border-color: rgba(232,185,61,0.4); background: rgba(232,185,61,0.04); }
.fs-scan-item.is-checked {
  background: linear-gradient(135deg, rgba(232,185,61,0.14), rgba(232,185,61,0.04));
  border-color: rgba(232,185,61,0.55);
}
.fs-scan-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fs-check-mark {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  color: transparent;
  transition: all 180ms ease;
  flex-shrink: 0;
}
.fs-scan-item.is-checked .fs-check-mark {
  background: var(--gold);
  border-color: var(--gold);
  color: #14100A;
}
.fs-scan-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-scan-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}


/* =====================================================================
   FAZ 44 — LANDING SAYFASI (odakla.app hoşgeldin ekranı)
   ================================================================= */

/* =====================================================================
   FAZ 31 — Menekşe: Giriş öncesi tanıtım ekranı (showLanding, Bölüm 9)
   Kapsam: showLanding() (odakla-features.js:8949+) tarafından enjekte
   edilen #odakla-landing overlay'i. 10 görevlik redesign'ın hiçbirinde
   dokunulmamıştı — hâlâ eski altın marka kimliğini kullanıyordu.
   Altın → menekşe: .lnd-bg ambiyans gradyanı, .lnd-orb-1/2 (orb-3 zaten
   menekşe tonluydu, dokunulmadı), .lnd-stars parıltıları, .lnd-logo
   (fallback ikon), .lnd-brand + yeni .lnd-brand span vurgusu (diğer
   ekranlardaki Odakl+span(a) deseniyle aynı), .lnd-btn-primary CTA
   gradyanı/glow'u, .lnd-footer link hover. 4 emoji feature chip
   (odakla-features.js) satır içi SVG ikonlara çevrildi (Adım JS-1).
   ===================================================================== */

.odakla-landing {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms cubic-bezier(.22,1,.36,1), visibility 500ms;
  overflow: hidden;
}
.odakla-landing.is-open { opacity: 1; visibility: visible; }

/* Background — sinematik gradient + orbs */
.lnd-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 700px at 50% 30%, rgba(106,92,255,0.14), transparent 55%),
    linear-gradient(180deg, #0a0b0f 0%, #14161e 60%, #0a0b0f 100%);
  overflow: hidden;
}
.lnd-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: lndOrbFloat 12s ease-in-out infinite;
}
.lnd-orb-1 {
  width: 380px; height: 380px;
  top: -120px; left: -80px;
  background: radial-gradient(circle, rgba(106,92,255,0.7), transparent 65%);
  animation-delay: 0s;
}
.lnd-orb-2 {
  width: 300px; height: 300px;
  bottom: -100px; right: -60px;
  background: radial-gradient(circle, rgba(154,140,255,0.5), transparent 65%);
  animation-delay: -4s;
}
.lnd-orb-3 {
  width: 260px; height: 260px;
  top: 50%; left: 65%;
  background: radial-gradient(circle, rgba(185,140,255,0.35), transparent 65%);
  animation-delay: -8s;
}
@keyframes lndOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.1); }
}

.lnd-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 75% 45%, rgba(106,92,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 90%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 60% 10%, rgba(106,92,255,0.4), transparent);
  background-size: 100% 100%;
}

/* Kapama X */
.lnd-close {
  all: unset;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 200ms ease;
  backdrop-filter: blur(10px);
  z-index: 5;
}
.lnd-close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
  transform: rotate(90deg);
}

/* Ana içerik */
.lnd-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  width: calc(100% - 40px);
  padding: 40px 20px;
  text-align: center;
  animation: lndContentIn 900ms cubic-bezier(.22,1,.36,1);
}
@keyframes lndContentIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Logo */
.lnd-logo {
  width: 110px;
  height: 110px;
  margin: 0 auto 20px;
  color: var(--violet-ink);
  filter: drop-shadow(0 0 40px var(--violet-glow-strong));
}
.lnd-logo svg { width: 100%; height: 100%; }
.lnd-ring-1 {
  transform-origin: 50px 50px;
  animation: lndRing 4s linear infinite;
  stroke-dasharray: 60 40;
}
.lnd-ring-2 {
  transform-origin: 50px 50px;
  animation: lndRing 3s linear infinite reverse;
  stroke-dasharray: 40 30;
}
.lnd-ring-3 {
  transform-origin: 50px 50px;
  animation: lndRing 2s linear infinite;
  stroke-dasharray: 25 20;
}
@keyframes lndRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.lnd-brand {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 10px;
  color: var(--text-primary);
  text-shadow: 0 0 40px rgba(106,92,255,0.6);
  margin-bottom: 6px;
}
.lnd-brand span { color: var(--violet-ink); }

.lnd-tagline {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}
.lnd-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin: 0 auto 26px;
  max-width: 520px;
}

/* Feature chips */
.lnd-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.lnd-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
}
.lnd-feat-icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; }

/* CTA Butonlar */
.lnd-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.lnd-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 260ms cubic-bezier(.22,1,.36,1);
  min-width: 230px;
}
.lnd-btn-primary {
  background: linear-gradient(135deg, var(--violet-400) 0%, #B7A6FF 50%, var(--violet-500) 100%);
  color: var(--cta-ink);
  box-shadow: 0 10px 30px rgba(106,92,255,0.35), 0 0 30px rgba(106,92,255,0.2);
  border: 1px solid rgba(201,187,255,0.45);
}
.lnd-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(106,92,255,0.55), 0 0 40px rgba(106,92,255,0.35);
}
.lnd-btn-secondary {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.lnd-btn-secondary:hover {
  transform: translateY(-3px) scale(1.02);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.25);
}
.lnd-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.lnd-btn-top {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.lnd-btn-bot {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 0.2px;
  margin-top: 2px;
}
.lnd-btn-primary .lnd-btn-bot { opacity: 0.65; }

/* Footer */
.lnd-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
.lnd-footer a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 180ms ease;
}
.lnd-footer a:hover { color: var(--violet-ink); }
.lnd-dot { opacity: 0.4; }

/* Mobil */
@media (max-width: 640px) {
  .lnd-logo { width: 80px; height: 80px; }
  .lnd-brand { font-size: 28px; letter-spacing: 7px; }
  .lnd-tagline { font-size: 18px; }
  .lnd-desc { font-size: 13px; }
  .lnd-cta { flex-direction: column; align-items: stretch; }
  .lnd-btn { min-width: 0; }
  .lnd-close { top: 12px; right: 12px; }
}


/* Eski onboarding modal'ını tamamen gizle — Landing sayfası artık bu işi yapıyor */
#onboarding-modal-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =====================================================================
   FAZ 46 — PREMIUM CHIP STİLLERİ (her rozet farklı, daha lüks)
   ================================================================= */

.hh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

/* Genel chip taban */
.hh-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  transition: all 220ms cubic-bezier(.22,1,.36,1);
  cursor: default;
  border: 1px solid transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
.hh-chip:hover { transform: translateY(-1px); }
.hh-chip b { font-weight: 900; font-family: var(--font-mono); }
.hh-chip svg { width: 13px; height: 13px; flex-shrink: 0; }

/* 🔥 SERI — Ateş / turuncu */
.hh-chip-streak {
  background: linear-gradient(135deg, rgba(255,120,60,0.14), rgba(255,80,40,0.06));
  border-color: rgba(255,120,60,0.32);
  color: #FF9060;
  box-shadow: inset 0 0 0 1px rgba(255,120,60,0.10), 0 2px 8px rgba(255,120,60,0.10);
}
.hh-chip-streak svg { color: #FF7040; filter: drop-shadow(0 0 6px rgba(255,112,64,0.5)); }
.hh-chip-streak b { color: #FFB080; }
.hh-chip-streak::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40px 20px at 15% 50%, rgba(255,120,60,0.25), transparent);
  pointer-events: none;
}
.hh-chip-streak:hover { border-color: rgba(255,120,60,0.55); box-shadow: 0 6px 20px rgba(255,120,60,0.22); }

/* ⚡ LEVEL — Mavi/mor gradient */
.hh-chip-level {
  background: linear-gradient(135deg, rgba(127,169,255,0.14), rgba(185,140,255,0.08));
  border-color: rgba(127,169,255,0.32);
  color: #A5BEFF;
  box-shadow: inset 0 0 0 1px rgba(127,169,255,0.10), 0 2px 8px rgba(127,169,255,0.10);
}
.hh-chip-level svg { color: #7FA9FF; filter: drop-shadow(0 0 6px rgba(127,169,255,0.5)); }
.hh-chip-level b { color: #C8D8FF; }
.hh-chip-level:hover { border-color: rgba(127,169,255,0.55); box-shadow: 0 6px 20px rgba(127,169,255,0.22); }

/* 🪙 COIN — Altın metallic */
.hh-chip-coin {
  background: linear-gradient(135deg, rgba(232,185,61,0.16), rgba(200,154,46,0.06));
  border-color: rgba(232,185,61,0.4);
  color: #FFD97D;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(232,185,61,0.15),
    0 2px 10px rgba(232,185,61,0.15);
}
.hh-chip-coin svg { color: #E8B93D; filter: drop-shadow(0 0 8px rgba(232,185,61,0.55)); }
.hh-chip-coin b { color: #FFE499; text-shadow: 0 0 8px rgba(232,185,61,0.4); }
.hh-chip-coin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,229,150,0.15) 45%, transparent 60%);
  animation: chipShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chipShimmer {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  50% { transform: translateX(100%); opacity: 1; }
}
.hh-chip-coin:hover { border-color: rgba(232,185,61,0.7); box-shadow: 0 8px 24px rgba(232,185,61,0.35); }

/* ✓ GÖREV — Yeşil / teal */
.hh-chip-goal {
  background: linear-gradient(135deg, rgba(64,180,140,0.14), rgba(72,200,150,0.06));
  border-color: rgba(64,180,140,0.32);
  color: #7DDCB0;
  box-shadow: inset 0 0 0 1px rgba(64,180,140,0.10), 0 2px 8px rgba(64,180,140,0.10);
}
.hh-chip-goal svg { color: #40B48C; filter: drop-shadow(0 0 6px rgba(64,180,140,0.5)); }
.hh-chip-goal b { color: #A5F0C8; }
.hh-chip-goal:hover { border-color: rgba(64,180,140,0.55); box-shadow: 0 6px 20px rgba(64,180,140,0.22); }

/* ● ÇEVRİMİÇİ — Kompakt yeşil dot chip (Faz 39) */
.hh-online-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  background: linear-gradient(135deg, rgba(64,180,80,0.16), rgba(50,160,70,0.05));
  border: 1px solid rgba(64,180,80,0.38);
  border-radius: 999px;
  color: #6FE86F;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-right: 4px;
}
.hh-online-indicator::after {
  content: 'Çevrimiçi';
  color: #7DE895;
}
.hh-online-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6FE86F;
  box-shadow: 0 0 10px rgba(111,232,111,0.7);
  animation: onlinePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes onlinePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(111,232,111,0.7); }
  50% { transform: scale(1.35); box-shadow: 0 0 14px rgba(111,232,111,1); }
}

/* Çırak (league) chip — gizle */
#hh-league-chip { display: none !important; }

/* Eski chip yanı yenile butonu — gizle (bildirim yanına taşındı) */
#hh-refresh-btn { display: none !important; }

/* =====================================================================
   FAZ 46 — YENİ YENİLE BUTONU (Bildirim çanının solunda)
   ================================================================= */
/* ODAKLA: kullanıcı kararı — küçültüldü + kare-yumuşak-köşe (squircle) yapıldı */
.onb-refresh-btn {
  all: unset;
  position: fixed;
  top: 18px;
  right: 64px; /* çanın solunda, 34px + 10px boşluk */
  z-index: 12000;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(20,22,30,0.9), rgba(14,16,22,0.9));
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: all 240ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.onb-refresh-btn svg { width: 13px; height: 13px; }
.onb-refresh-btn:hover {
  color: #C9BBFF;
  border-color: rgba(106,92,255,0.4);
  transform: translateY(-2px) rotate(60deg);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 20px rgba(106,92,255,0.2);
}
.onb-refresh-btn.is-spinning svg {
  animation: refreshSpin 800ms cubic-bezier(.22,1,.36,1);
}

@media (max-width: 640px) {
  .onb-refresh-btn { top: 14px; right: 52px; width: 30px; height: 30px; }
}


/* FAZ 46 — Logo img (loading + landing içi) — SİNEMATIK ANIMASYON */

.ols-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.25));
  animation: olsLogoPulse 3s ease-in-out infinite;
  transform-origin: center;
}
@keyframes olsLogoPulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.05; }
}

/* Beyaz arka planları temizle — transparent zaten */
.ols-logo, .lnd-logo, .mini-logo-img {
  background: transparent !important;
}

.lnd-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(255,255,255,0.25));
  animation: lndLogoFloat 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes lndLogoFloat {
  0%, 100% { scale: 1; translate: 0 0; }
  50%      { scale: 1.04; translate: 0 -6px; }
}


/* Logo aspect ratio korunsun */
.ols-logo-img,
.lnd-logo-img {
  object-fit: contain;
}

/* FAZ 46 — Sağ üst indirme butonu (bildirim çanı ve yenile arasında) */
/* ODAKLA: kullanıcı kararı — küçültüldü + kare-yumuşak-köşe (squircle) yapıldı */
.onb-download-btn {
  all: unset;
  position: fixed;
  top: 18px;
  right: 108px; /* yenile-btn'in solunda, 34px + 10px boşluk */
  z-index: 12000;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(106,92,255,0.18), rgba(106,92,255,0.06));
  border: 1px solid rgba(106,92,255,0.42);
  color: #C9BBFF;
  cursor: pointer;
  transition: all 240ms ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 12px rgba(106,92,255,0.15);
}
.onb-download-btn svg { width: 13px; height: 13px; }
.onb-download-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(106,92,255,0.32), rgba(106,92,255,0.12));
  border-color: rgba(154,140,255,0.7);
  box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 22px rgba(106,92,255,0.35);
}
.onb-download-btn:hover svg {
  animation: dlBtnBounce 500ms cubic-bezier(.22,1.4,.36,1);
}
@keyframes dlBtnBounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@media (max-width: 640px) {
  .onb-download-btn { top: 14px; right: 90px; width: 30px; height: 30px; }
}

/* =====================================================================
   FAZ 31 — MENEKŞE REDESIGN: NAV DOCK
   Alt navigasyondaki eski sayfa-bazlı gökkuşağı vurgu renkleri (gold/
   green/blue/cyan/gray) yerini tek, tutarlı menekşe marka rengine
   bırakıyor. Bu kural [data-page] niteliğini de eşleyerek daha önceki
   "SAYFA-BAZLI VURGU RENKLERİ" (#bottom-nav .nav-item[data-page="x"].active)
   kurallarıyla aynı özgüllükte olup dosyada onlardan sonra geldiği için
   kazanır; ayrıca "BOTTOM NAV PREMIUM" bloğundaki .active kuralından da
   daha özgüldür.
   ================================================================= */
#bottom-nav .nav-item[data-page].active {
  color: var(--text-primary) !important;
  background: linear-gradient(90deg, rgba(106,92,255,0.18), rgba(106,92,255,0.04)) !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(106,92,255,0.35) !important;
}
#bottom-nav .nav-item[data-page].active svg {
  filter: drop-shadow(0 0 6px rgba(106,92,255,0.55)) !important;
}
#bottom-nav .nav-item[data-page].active::before {
  background: var(--violet-500) !important;
  box-shadow: 0 0 6px var(--violet-glow) !important;
}

/* =====================================================================
   FAZ 32 — DAİRESEL HUD DOCK (kullanıcı seçimi: mockup galerisi #9)
   Her sayfa kendi çemberinde, aralıklı — oyun HUD'u gibi. Etiketler
   (ikon altındaki metin) kaldırılmıyor, sadece görsel olarak gizleniyor
   (erişilebilirlik için DOM'da kalıyor). Yukarıdaki "BOTTOM NAV PREMIUM"
   ve "MENEKŞE REDESIGN: NAV DOCK" bloklarından SONRA geldiği ve o da
   !important olduğu için kazanıyor. */
.bottom-nav,
#bottom-nav {
  gap: 14px !important;
  padding: 14px 20px !important;
  border-radius: 999px !important;
  background: rgba(12, 11, 16, 0.65) !important;
  border: 1px solid rgba(138, 116, 255, 0.2) !important;
  box-shadow:
    0 0 40px rgba(106, 92, 255, 0.15),
    0 16px 40px rgba(0, 0, 0, 0.5) !important;
}
.bottom-nav .nav-item,
#bottom-nav .nav-item {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}
.bottom-nav .nav-item span,
#bottom-nav .nav-item span {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.bottom-nav .nav-item:hover,
#bottom-nav .nav-item:hover {
  transform: none !important;
  border-color: rgba(154, 140, 255, 0.4) !important;
  background: rgba(138, 116, 255, 0.08) !important;
  box-shadow: none !important;
}
.bottom-nav .nav-item.active,
#bottom-nav .nav-item.active,
#bottom-nav .nav-item[data-page].active {
  transform: none !important;
  color: #fff !important;
  border-color: rgba(154, 140, 255, 0.7) !important;
  background: radial-gradient(circle, rgba(138, 116, 255, 0.35), transparent 70%) !important;
  box-shadow: 0 0 16px rgba(106, 92, 255, 0.5) !important;
  animation: none !important;
}
.bottom-nav .nav-item.active svg,
#bottom-nav .nav-item.active svg,
#bottom-nav .nav-item[data-page].active svg {
  transform: none !important;
  filter: none !important;
}
.bottom-nav .nav-item.active::before,
#bottom-nav .nav-item.active::before,
#bottom-nav .nav-item[data-page].active::before {
  display: none !important;
}

/* =====================================================================
   FAZ 31 — Menekşe: Bugün
   Header chip'leri, Mod Seç aktif kartı, Günün Sözü / Bugünkü Hedef
   kartları ve Başlat CTA'sının shine-sweep'i için menekşe vurgular.
   Bu blok dosyanın en sonunda olduğu için, eşit özgüllükteki önceki
   kurallarla (altın/mavi Yön C kalıntıları) çakıştığında kaynak sırası
   sayesinde kazanır; !important gerektiren tek istisnalar aşağıda
   açıklanmıştır.
   ===================================================================== */

/* --- Adım 1: Header chip'leri — kullanıcı kararıyla dördü de (seri/level/
   coin/görev) aynı premium menekşe tona döndü; eskiden sadece level chip
   menekşeydi, diğer üçü kendi rengini (turuncu/altın/yeşil) koruyordu —
   dağınık/tutarsız durduğu için hepsi tek tona indirildi. --- */
.hh-chip-level, .hh-chip-streak, .hh-chip-coin, .hh-chip-goal{ color: var(--violet-ink); border-color: rgba(106,92,255,0.35); background: rgba(106,92,255,0.1); }
/* .hh-chip-* b / svg alt öğeleri kendi renklerini ayrı kurallarla
   (satır ~13345-13409) belirlediği için üstteki tek kural onları
   değiştirmez — chip'lerin tamamen menekşe görünmesi için burada da
   eşliyoruz. */
.hh-chip-level b, .hh-chip-streak b, .hh-chip-coin b, .hh-chip-goal b{ color: var(--violet-ink); }
.hh-chip-level svg, .hh-chip-streak svg, .hh-chip-coin svg, .hh-chip-goal svg{ color: var(--violet-400); filter: drop-shadow(0 0 6px var(--violet-glow)); }
/* aynı gerekçeyle: orijinal kurallar kendi renginde inset box-shadow/gradient sweep de bırakıyordu */
.hh-chip-level, .hh-chip-streak, .hh-chip-coin, .hh-chip-goal{ box-shadow: inset 0 0 0 1px rgba(106,92,255,0.10), 0 2px 8px var(--violet-glow); }
.hh-chip-level:hover, .hh-chip-streak:hover, .hh-chip-coin:hover, .hh-chip-goal:hover{ border-color: rgba(106,92,255,0.55); box-shadow: 0 6px 20px var(--violet-glow); }
.hh-chip-streak::before{ background: radial-gradient(ellipse 40px 20px at 15% 50%, rgba(106,92,255,0.25), transparent); }
.hh-chip-coin::before{ background: linear-gradient(115deg, transparent 30%, rgba(190,180,255,0.18) 45%, transparent 60%); }


/* --- Adım 3: Günün Sözü — menekşe vurgular.
   (Bugünkü Hedef kartı Task 5/6'da bento-grid'e taşındı; .fc-goal-fill
   ve .fc-week-fill artık DOM'da hiç üretilmiyor, o yüzden bu bloktaki
   eski .fc-goal-fill override'ı final review'da (Finding 2) silindi —
   bkz. final-fix-report.md.) --- */
.fc-quote-refresh{ color: var(--violet-ink); background: rgba(106,92,255,0.08); border-color: rgba(106,92,255,0.22); }
.fc-quote-refresh:hover{ background: rgba(106,92,255,0.18); border-color: rgba(106,92,255,0.45); }

/* --- Adım 4: Başlat CTA shine-sweep — #start-btn'e özel düzeltme.
   index.html'deki yeni ".primary::after" kuralı animasyonu ekliyor,
   ama #page-home #start-btn kendi ID-özgül ::after kuralına sahip
   (satır ~3141, sabit left:-75%/hover'da 125%) ve bu, class-seviyeli
   düzeltmeden (button.primary::after{left:0}) daha yüksek özgüllükte
   olduğu için "left" için hâlâ kazanır. Menekşe sweep'in görünür
   olması için burada da aynı ID özgüllüğüyle left:0'a sabitliyoruz. */
#page-home #start-btn::after{ left: 0; }

/* FAZ 31 — Menekşe: Görevler
   Görev listesi sol menüsü (.tsm-item, enhanceTasksPage() tarafından
   üretiliyor — app/odakla-features.js:3852-3872) ve görev tamamlama
   mikro-animasyonu (buildTaskRow()'daki checkbox onchange, app/index.html
   ~4935-4970). Gerçek satır/checkbox class'ları .task-check-circle /
   .task-row-main DEĞİL — checkbox class'sız çıplak <input type=checkbox>,
   satır konteyneri .task-row-main (checkbox+body+actions'ı sarar), başlık
   ise .task-text (.task-title-row > .task-main > .task-row-main içinde).
   Aşağıdaki seçiciler gerçek DOM'a göre düzeltildi. */

/* --- Adım 2: Görevler sol menü aktif öğe --- */
.tsm-item.active{ color:#fff; background:linear-gradient(90deg, rgba(106,92,255,0.18), rgba(106,92,255,0.04)); box-shadow: inset 0 0 0 1px rgba(106,92,255,0.35); }

/* --- Adım 2b: #task-add-btn beyaz sabit renk düzeltmesi.
   Brief bu butonun ".primary" class'ı sayesinde zaten menekşe olduğunu
   varsaymıştı, ama Task 1'in raporu tam olarak bunu bir uyarı olarak
   işaretlemişti: "#page-tasks #task-add-btn" (satır ~7493) ID-özgüllüğünde
   background/color/box-shadow'u #ffffff/#0A0A0C ile !important sabitliyor —
   #start-btn'de bulunanla birebir aynı desen. button.primary{background:
   var(--cta)} bunu asla ezemez (düşük özgüllük). Aynı ID özgüllüğüyle
   var(--cta) ailesine yönlendiriyoruz, orijinal box-shadow/geçiş yapısını
   koruyarak sadece renkleri değiştiriyoruz. */
#page-tasks #task-add-btn{
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 14px -4px var(--cta-glow) !important;
}
#page-tasks #task-add-btn:hover{
  background: var(--cta-hover) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 10px 22px -6px var(--cta-glow-strong) !important;
}
#page-tasks #task-add-btn:active{
  background: var(--cta-active) !important;
}

/* --- Adım 3: Görev tamamlama anı — menekşe nabız + üstü çizili solma.
   .quest-done-flash, playTaskCompleteAnimation() (index.html, buildTaskRow
   yakınında) tarafından işaretlenip checkbox tıklanır tıklanmaz satıra (wrap,
   .task-row) ekleniyor; ~700ms sonra renderTasks() satırı zaten yeniden
   çiziyor (yeni satırda .done class'ı kalıcı stili üstleniyor), bu yüzden
   flash sadece ilk 700ms'lik geçiş için görünür kalıyor — bu tasarım gereği.
   ÇAKIŞMA UYARISI: aynı 'wrap' elemanına aynı anda eski ".task-pop" class'ı
   da ekleniyor (index.html satır ~382-431) ve ".task-pop input[type=checkbox]"
   kuralı ZATEN "animation: taskPopRipple ..." (sarı/altın halka) tanımlıyor —
   animasyon özelliği static değerleri her zaman ezdiği için iki animasyon
   aynı elemanda çakışıyor. Burada bilinçli olarak DAHA YÜKSEK özgüllük
   (.task-row-main ek katmanı) kullanılıyor ki yeni menekşe nabız kazansın;
   ayrıca bu dosya index.html'in inline <style>'ından (satır 42) DOM sırasında
   SONRA yükleniyor (link satır 772), yani eşit özgüllükte bile kaynak sırası
   zaten bizim lehimize. .task-pop'un satır-geneli "taskPopRow" scale-pop'una
   dokunulmadı — o çakışmıyor, sadece checkbox'un kendi animasyonu çakışıyor. */
@keyframes questCheckPulse{ 0%{ box-shadow:0 0 0 0 rgba(106,92,255,0.6);} 70%{ box-shadow:0 0 0 16px rgba(106,92,255,0);} 100%{ box-shadow:0 0 0 0 rgba(106,92,255,0);} }
.quest-done-flash .task-row-main input[type=checkbox]{ animation: questCheckPulse 1.8s ease-out 1; background: var(--violet-500) !important; border-color: var(--violet-500) !important; }
.quest-done-flash .task-text{ transition: color 400ms ease; color: rgba(255,255,255,0.4) !important; text-decoration: line-through; }
#page-home #start-btn:hover::after{ left: 0; }

/* ==================================================================
   FAZ 31 — Menekşe: Market (Bölüm 3)
   Kapsam: enhanceMarketPage() sidebar/coin emoji → SVG (Adım 1-2, JS
   tarafında saf innerHTML string değişimi, burada ek CSS gerekmedi —
   .mkm-item-icon/.mkm-coin-unit/.mkm-btn-buy zaten !important veya
   animation çakışması içermiyordu, grep ile doğrulandı), Menekşe Prestij
   Paketi kartı (Adım 3, _mkm_prestigeBundleCard()) ve Kutlamalar kategorisi
   (Adım 4, _mkm_celebrationCard()) + görev tamamlama efekt varyantları
   (Adım 5, playTaskCompleteAnimation() → .quest-done-<id>, index.html).
   ================================================================== */

/* --- Adım 3: Menekşe Prestij Paketi — geniş bundle kartı (Öne Çıkanlar üstü) --- */
.mkm-prestige-card{
  position: relative;
  display: flex;
  gap: 22px;
  align-items: center;
  background: linear-gradient(135deg, rgba(138,116,255,0.14), rgba(20,18,26,0.6));
  border: 1px solid rgba(154,140,255,0.4) !important;
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 28px;
  animation: prestigeGlow 3.5s ease-in-out infinite;
  overflow: hidden;
  cursor: default;
}
.mkm-prestige-card:hover{ transform:none; box-shadow:none; }
.mkm-prestige-card.is-active{ border-color: rgba(111,232,111,0.5) !important; animation: none; }
@keyframes prestigeGlow{ 0%,100%{ box-shadow:0 0 24px rgba(154,140,255,0.25);} 50%{ box-shadow:0 0 40px rgba(154,140,255,0.5);} }
.mkm-prestige-tag{
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1A1230;
  background: linear-gradient(90deg, #FFD84D, #FFB84D);
  padding: 4px 10px;
  border-radius: 999px;
}
.mkm-prestige-previews{ display:flex; gap:10px; flex-shrink:0; }
.mkm-pp-item{
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 13px; background: #15131c;
}
.mkm-pp-badge{ background: rgba(154,140,255,0.15); border: 1px solid rgba(154,140,255,0.4); color: #C9BBFF; }
.mkm-prestige-info{ flex: 1; }
.mkm-prestige-name{ font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.mkm-prestige-desc{ font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); margin-bottom: 12px; line-height: 1.5; }
.mkm-prestige-includes{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.mkm-pi-chip{ font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); }
.mkm-prestige-buy{
  all: unset;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 24px;
  border-radius: 11px;
  background: linear-gradient(180deg, #9A8CFF, #6A5CFF);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(106,92,255,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.mkm-prestige-buy:hover{ transform: translateY(-2px); }
.mkm-prestige-shine{ position:absolute; top:0; left:0; width:40%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent); animation: shineSweepMkm 4s ease-in-out infinite; }
@keyframes shineSweepMkm{ 0%{ transform: translateX(-120%) skewX(-15deg);} 100%{ transform: translateX(220%) skewX(-15deg);} }
.mkm-prestige-old-price{ font-size: 11.5px; color: rgba(255,255,255,0.3); text-decoration: line-through; margin-left: 10px; }
@media (max-width: 720px){
  .mkm-prestige-card{ flex-direction: column; align-items: flex-start; }
}

/* --- Adım 4: Kutlamalar kategorisi — kart önizlemeleri --- */
.mkm-cel-preview{
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #0d0c11;
}
.mkm-cel-check{
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--violet-500, #8A74FF);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.mkm-cel-check svg{ width: 15px; height: 15px; color: #fff; }
.cel-check-gold{ background: #FFC94D; }
.cel-check-confetti{ background: #3DDC97; }
.cel-check-zen{ background: rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }
.cel-check-zen svg{ color: rgba(255,255,255,0.6); }
.mkm-cel-burst{ position:absolute; width:6px; height:6px; border-radius:50%; }
.cel-burst-gold{ background:#FFD84D; animation: mkmBurstGold 1.6s ease-in-out infinite; }
@keyframes mkmBurstGold{ 0%{ transform:scale(.3); opacity:0; } 40%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(1.6); opacity:0; } }
.mkm-cel-confetti{ position:absolute; width:5px; height:8px; }
.mkm-cel-confetti{ animation: mkmBurstConfetti 1.4s ease-in-out infinite; }
@keyframes mkmBurstConfetti{ 0%{ transform:translateY(0) rotate(0); opacity:1; } 100%{ transform:translateY(-26px) rotate(180deg); opacity:0; } }
.mkm-cel-zen-ring{
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  animation: mkmZenPulse 2s ease-in-out infinite;
}
@keyframes mkmZenPulse{ 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:1; transform:scale(1.08);} }

/* Elektrik Halka çerçevesi (Menekşe Prestij Paketi'nin parçası) — menekşe tonlarında elektrik halkası */
.frame-preview-elektrik_halka .mkm-frame-avatar{
  box-shadow: 0 0 0 3px var(--violet-400, #9A8CFF), 0 0 25px rgba(154,140,255,0.7);
  animation: frameElectric 1.5s ease-in-out infinite;
}

/* --- Adım 3b: Lig satırında "ÖNCÜ" rozeti (renderLeagueFriendsList, odakla_badge_oncu) --- */
.lgv-oncu-tag{
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(90deg, rgba(154,140,255,0.25), rgba(106,92,255,0.15));
  color: var(--violet-ink, #C9BBFF);
  border: 1px solid rgba(154,140,255,0.4);
  font-size: 9.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 1px;
  margin-left: 6px;
  vertical-align: middle;
}

/* --- Adım 5: Görev tamamlama — Kutlamalar efekt varyantları.
   playTaskCompleteAnimation() (index.html) .quest-done-flash İLE BİRLİKTE
   .quest-done-<id>'yi de ekliyor; aşağıdaki seçiciler .quest-done-flash'ınkiyle
   AYNI özgüllükte (.quest-done-X .task-row-main input[type=checkbox]) ama
   dosyada SONRA geldiği için background/animation gibi çakışan static
   özellikler için kazanıyor (bu dosyanın önceki bölümlerinde birkaç kez
   doğrulanmış "sonraki kural kazanır" deseni). .quest-done-menekse_dalga
   (varsayılan) zaten .quest-done-flash'ın kendi görünümü — ek kural gerekmiyor. */
.quest-done-altin_yagmuru .task-row-main{ position: relative; }
.quest-done-altin_yagmuru .task-row-main input[type=checkbox]{ animation: questCheckPulse 1.8s ease-out 1; background:#FFC94D !important; border-color:#FFC94D !important; }
.quest-done-altin_yagmuru .task-row-main::after{
  content:''; position:absolute; left:8px; top:2px; width:36px; height:36px; pointer-events:none;
  background:
    radial-gradient(circle 3px at 6px 4px, #FFD84D, transparent 70%),
    radial-gradient(circle 3px at 26px 10px, #FFB84D, transparent 70%),
    radial-gradient(circle 3px at 16px 26px, #FFE29A, transparent 70%);
  animation: questGoldRain 1.4s ease-out 1;
}
@keyframes questGoldRain{
  0%{ opacity:0; transform:translateY(-6px) scale(.6); }
  35%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(14px) scale(1.15); }
}

.quest-done-konfeti_patlamasi .task-row-main{ position: relative; }
.quest-done-konfeti_patlamasi .task-row-main input[type=checkbox]{ animation: questCheckPulse 1.8s ease-out 1; background:#3DDC97 !important; border-color:#3DDC97 !important; }
.quest-done-konfeti_patlamasi .task-row-main::after{
  content:''; position:absolute; left:6px; top:0; width:40px; height:40px; pointer-events:none;
  background:
    linear-gradient(#FF6B9D,#FF6B9D) 4px 6px/5px 8px no-repeat,
    linear-gradient(#4EA8FF,#4EA8FF) 20px 2px/5px 8px no-repeat,
    linear-gradient(#FFD84D,#FFD84D) 30px 12px/5px 8px no-repeat,
    linear-gradient(#9A8CFF,#9A8CFF) 12px 22px/5px 8px no-repeat;
  animation: questConfettiBurst 1.4s ease-out 1;
}
@keyframes questConfettiBurst{
  0%{ opacity:0; transform:translateY(4px) rotate(0deg); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-16px) rotate(160deg); }
}

.quest-done-sessiz_zen .task-row-main{ position: relative; }
.quest-done-sessiz_zen .task-row-main input[type=checkbox]{ animation: none; background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.35) !important; box-shadow: none; }
.quest-done-sessiz_zen .task-row-main::after{
  content:''; position:absolute; left:5px; top:2px; width:26px; height:26px; border-radius:50%;
  border: 1px solid rgba(255,255,255,0.3); pointer-events:none;
  animation: questZenPulse 1.8s ease-out 1;
}
@keyframes questZenPulse{
  0%{ opacity:.9; transform:scale(.7); }
  70%{ opacity:.15; transform:scale(1.6); }
  100%{ opacity:0; transform:scale(1.9); }
}

/* =====================================================================
   FAZ 31 — Menekşe: Arkadaşlar (Bölüm 4)
   Kapsam: enhanceFriendsPage() (app/odakla-features.js:743-926) ve arkadaş
   kartı render'ı (~1078-1093) içindeki 3 emoji boş-durum ikonu → SVG
   (Adım 1, JS tarafında yapıldı — burada sadece .fsv-empty-emoji'nin emoji
   glyph'i için ayarlanmış font-size'ı SVG'ye uyarlıyoruz), sol menü aktif
   öğe (.fsm-item.active, Adım 2 — .tsm-item.active ile birebir aynı
   menekşe desen), arkadaş kartı avatar halkası (.fsv-fc-avatar, Adım 3).
   ===================================================================== */

/* --- Adım 1: Boş-durum SVG ikonları — eskiden emoji glyph'i için ayarlı
   font-size artık kullanılmıyor, SVG boyutu inline style ile geliyor. --- */
.fsv-empty-emoji svg{ color: var(--violet-ink); opacity: 0.7; }

/* --- Adım 2: Arkadaşlar sol menü aktif öğe — diğer sayfalarla aynı desen --- */
.fsm-item.active{ color:#fff; background:linear-gradient(90deg, rgba(106,92,255,0.18), rgba(106,92,255,0.04)); box-shadow: inset 0 0 0 1px rgba(106,92,255,0.35); }
/* .fsm-badge-live (yeşil "canlı" rozeti) kasıtlı olarak dokunulmuyor —
   fonksiyonel bir canlı-durum rengi, marka rengi değil. */

/* --- Adım 3: Arkadaş kartı avatar halkası — ince menekşe halka.
   Mevcut mavi border (rgba(127,169,255,0.28), --accent-friends) kasıtlı
   olarak korunuyor (online-status/sosyal rengi); üstüne ek bir menekşe
   box-shadow halkası ekleniyor, çevrimiçi yeşil nokta stiline dokunulmuyor. --- */
.fsv-fc-avatar{ box-shadow: 0 0 0 2px rgba(154,140,255,0.4); }

/* --- Adım 4: Silme modu doğrulaması + "Arkadaş Sil" toggle butonu.
   body.friend-delete-mode .fsv-friend-card.selected-to-delete (satır ~9963-9986)
   ZATEN #FF7060/#D64530 kırmızı kullanıyor ve DEĞİŞTİRİLMEDİ (Bölüm 4 madde 4
   gereği bilinçli olarak marka renginden ayrı tutuluyor).
   NOT: grep ile doğrulandı — #friend-delete-toggle-btn / .friend-delete-toggle
   (injectFriendDeleteControls(), odakla-features.js:5105) artık HİÇBİR YERDEN
   çağrılmıyor (dead code) ve zaten "FAZ 28i" bloğunda (satır ~10282)
   `display:none !important` ile tamamen gizli — batch-delete UI'ı bir önceki,
   bu redesign planından bağımsız bir oturumda "Legacy — batch delete kaldırıldı,
   artık profil modal içinde silme butonu var" yorumuyla devre dışı bırakılmış
   (odakla-features.js:5224-5227). Gerçek, canlı silme kontrolü artık
   .fpm-remove-friend-btn (profil modal içi, satır ~10295) ve o zaten
   #FF7060 kırmızı/her-zaman-aktif olarak doğru şekilde kodlanmış — bu görev
   kapsamında değiştirilmedi. Yine de brief'te istenen nötr/kırmızı toggle
   kuralını, ileride yeniden etkinleştirilirse diye, zararsız şekilde ekliyoruz
   (mevcut display:none !important üzerine çakışmıyor, sadece renk tanımlıyor). */
#friend-delete-toggle-btn{ color: rgba(255,255,255,0.5); }
body.friend-delete-mode #friend-delete-toggle-btn{ color: #FF9080; border-color: rgba(255,112,96,0.4); background: rgba(255,112,96,0.08); }

/* =====================================================================
   FAZ 31 — Menekşe: İstatistik (Bölüm 5)
   Kapsam: enhanceStatsPage() (app/odakla-features.js:1260-1420+) — hero
   ikonları (Adım 2), sol menü aktif öğe (Adım 2), haftalık akım bar-grow
   animasyonu (Adım 3 — bar elemanları renderWeeklyChart(), index.html
   ~satır 4010'da oluşturuluyor), Seri Takvimi heat-map (Adım 4 — DOM
   enhanceStatsPage() içinde, veri syncStatsValues() içinde perDayMin'den
   hesaplanıyor, gerçek veri yoksa hücreler boş/soluk kalıyor, uydurma
   yok). "İlk günün ✨" emoji'si JS tarafında kaldırıldı (Adım 1, CSS
   değişikliği gerekmiyor).
   ===================================================================== */

/* --- Adım 2: Hero ikon rozetleri — menekşe --- */
.stv-hero-icon{ background: rgba(106,92,255,0.12); color: var(--violet-ink); }

/* --- Adım 2: Sol menü aktif öğe — diğer sayfalarla aynı desen --- */
.stm-item.active{ color:#fff; background:linear-gradient(90deg, rgba(106,92,255,0.18), rgba(106,92,255,0.04)); box-shadow: inset 0 0 0 1px rgba(106,92,255,0.35); }

/* --- Adım 3: Haftalık akım — bar'ların kademeli büyüme animasyonu --- */
@keyframes statBarGrow{ 0%{ transform: scaleY(0); } 100%{ transform: scaleY(1); } }
.stv-bar{ transform-origin: bottom; animation: statBarGrow 0.7s cubic-bezier(.22,1,.36,1) backwards; }

/* --- Adım 4: Seri Takvimi (Son 21 gün) heat-map --- */
.stv-heatmap-row{ display:flex; align-items:center; gap:20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px 18px; }
.stv-heatmap-caption{ flex:1; min-width:0; }
.stv-heatmap-caption-title{ font-size:13.5px; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.stv-heatmap-caption-sub{ font-size:11.5px; color:rgba(255,255,255,0.5); margin-bottom:10px; }
.stv-heatmap-legend{ font-size:10px; font-weight:700; color:rgba(255,255,255,0.4); display:flex; align-items:center; gap:4px; letter-spacing:0.3px; }
.stv-heatmap-legend .stv-hm-cell{ width:10px; height:10px; }
.stv-heatmap-grid{ display:grid; grid-template-columns:repeat(7,16px); grid-auto-rows:16px; gap:3px; flex-shrink:0; }
.stv-hm-cell{ border-radius:3px; background:rgba(255,255,255,.05); }
.stv-hm-cell.l1{ background: rgba(106,92,255,.28); }
.stv-hm-cell.l2{ background: rgba(106,92,255,.55); }
.stv-hm-cell.l3{ background: rgba(106,92,255,.9); }
.stv-hm-cell.today{ box-shadow:0 0 0 1.5px var(--violet-ink); }
@media (max-width: 640px){
  .stv-heatmap-row{ flex-direction:column; align-items:flex-start; }
}

/* =====================================================================
   FAZ 31 — Menekşe: Ayarlar (Bölüm 6)
   Kapsam: enhanceSettingsPage() (app/odakla-features.js:2869+) — sol menü
   aktif öğe (diğer sayfalarla aynı desen), Hesap view hero banner menekşe
   tonu, ve yeni paylaşımlı flashButtonSuccess() helper'ının ürettiği
   .flash-success/.flash-green/.flash-violet durumları (Kaydet/Güncelle/
   Kopyala butonları). Çıkış Yap ve Hesabı Sil butonları için saf CSS
   :active darbe animasyonları (JS metin değişimi yok).
   ===================================================================== */

/* --- Adım 1: Sol menü aktif öğe — diğer sayfalarla aynı desen --- */
.ssm-item.active{ color:#fff; background:linear-gradient(90deg, rgba(106,92,255,0.18), rgba(106,92,255,0.04)); box-shadow: inset 0 0 0 1px rgba(106,92,255,0.35); }

/* --- Adım 1: Hesap view hero banner — menekşe tonu --- */
.ssv-hero-banner{ background: linear-gradient(120deg, rgba(106,92,255,0.3), rgba(106,92,255,0.05)); }

/* --- Adım 2/3: flashButtonSuccess() buton başarı geri bildirimi --- */
.flash-success.flash-green{ background: linear-gradient(180deg,#6EE896,#3DDC7A) !important; box-shadow: 0 4px 14px rgba(61,220,122,.4) !important; color:#08320F !important; }
.flash-success.flash-violet{ background: rgba(106,92,255,.18) !important; border-color: rgba(106,92,255,.5) !important; color: var(--violet-ink) !important; }

/* --- Adım 4: Çıkış Yap / Hesabı Sil — saf CSS :active darbe --- */
@keyframes neutralClickPulse{ 0%{ background:rgba(255,255,255,.03); } 50%{ background:rgba(255,255,255,.09); } 100%{ background:rgba(255,255,255,.03); } }
.ssv-signout-btn:active{ animation: neutralClickPulse 0.4s ease-out 1; }
@keyframes dangerClickPulse{ 0%{ box-shadow:none; } 50%{ box-shadow: 0 0 18px rgba(255,112,96,.45); } 100%{ box-shadow:none; } }
.ssv-danger-btn:active{ animation: dangerClickPulse 0.4s ease-out 1; }

/* =====================================================================
   FAZ 31 — Menekşe: Lig (Bölüm 7)
   Kapsam: enhanceLeaguePage()/refreshLeaguePageContent()/
   renderLeagueFriendsList() (app/odakla-features.js:4838+). Ödül 🪙
   emoji'si SVG'ye çevrildi (JS tarafında, Adım 1). Sadece "SEN" satırı
   (.lgv-row.is-me / .lgv-me-tag) ve sol menü aktif öğe (.lgm-item.active)
   menekşeye çekiliyor. Tier renkleri KASITLI OLARAK dokunulmadı:
   .league-hero-card (--league-color/--league-gradient-end ile per-tier),
   .lhc-league-name (tier rengi gradient text), .lhc-xp b / .lhc-reward-value
   (var(--gold)), _leagueBadgeSvg() (odakla-features.js:4485+, hardcoded
   tier renkleri) — hepsi grep ile doğrulandı, değiştirilmedi.
   ===================================================================== */

/* --- Adım 2: "SEN" satırı — menekşe vurgu (önceden nötr beyazdı) --- */
.lgv-row.is-me{ border-color: rgba(106,92,255,0.45); background: linear-gradient(90deg, rgba(106,92,255,0.12), rgba(106,92,255,0.03)); box-shadow: 0 0 16px rgba(106,92,255,0.15); }
.lgv-me-tag{ background: rgba(106,92,255,0.22); color: var(--violet-ink); }

/* --- Adım 3: Sol menü aktif öğe — diğer sayfalarla aynı desen --- */
.lgm-item.active{ color:#fff; background:linear-gradient(90deg, rgba(106,92,255,0.18), rgba(106,92,255,0.04)); box-shadow: inset 0 0 0 1px rgba(106,92,255,0.35); }

/* =====================================================================
   FAZ 31 — Menekşe: Giriş öncesi (Bölüm 8)
   Kapsam: app/index.html içindeki #app-header-row (wordmark), loading
   ikonları (LOADING_MESSAGES, artık SVG — emoji yok) ve #auth-card
   (email/şifre formu). #quick-start-card ("Bugün ne yapmak istiyorsun?"
   kategori seçici) kullanıcı onayıyla TAMAMEN kaldırıldı — bu, redesign
   boyunca izin verilen iki gerçek davranış değişikliğinden biri.
   ===================================================================== */

/* --- Adım 1: Loading ikonu — menekşe parıltılı rozet (emoji yerine SVG) --- */
@keyframes loadingBadgeGlow{ 0%,100%{ box-shadow:0 0 20px rgba(106,92,255,.35);} 50%{ box-shadow:0 0 32px rgba(106,92,255,.6);} }
#loading-icon{ width:52px; height:52px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(180deg,var(--violet-400),var(--violet-500)); display:flex; align-items:center; justify-content:center; animation: loadingBadgeGlow 2s ease-in-out infinite; font-size: 0; }
#loading-icon svg{ width:24px; height:24px; color:#fff; }

/* --- Adım 4: #auth-card — hafif menekşe tonlu kenarlık --- */
#auth-card{ border-color: rgba(106,92,255,0.28); box-shadow: 0 0 0 1px rgba(106,92,255,0.08) inset, 0 20px 44px -30px rgba(106,92,255,0.35); }
#auth-card:hover{ border-color: rgba(106,92,255,0.4); }

/* =====================================================================
   FAZ 31 — Menekşe: Final inceleme düzeltmesi — Market sol menü aktif öğe
   Bulgu #2: .mkm-item.active diğer sayfalarla aynı menekşe deseni almamıştı
   (hâlâ eski nötr rgba(255,255,255,0.08) kullanıyordu). .tsm-item.active /
   .fsm-item.active / .stm-item.active / .ssm-item.active / .lgm-item.active
   ile birebir aynı desen — bu kural, satır 7785'teki eski kuraldan SONRA
   geldiği için CSS özgüllüğü eşit olduğunda kaynak sırası kazanır ve
   override eder.
   ===================================================================== */
.mkm-item.active{ color:#fff; background:linear-gradient(90deg, rgba(106,92,255,0.18), rgba(106,92,255,0.04)); box-shadow: inset 0 0 0 1px rgba(106,92,255,0.35); }

/* =====================================================================
   GÖREV 12 — Menekşe: DAILY_TASK_POOL ikonları emoji'den SVG'ye çevrildi
   (Bugün/Görevler sayfalarındaki .dt-icon kartları + Geçmiş görünümündeki
   .ct-task-icon satırları). Emoji glyph'i için ayarlı font-size artık
   kullanılmıyor, SVG boyutu burada açıkça veriliyor.
   ===================================================================== */
.dt-icon svg{ width:22px; height:22px; }
.daily-tasks-large .dt-icon svg{ width:30px !important; height:30px !important; }
.ct-task-icon{ display:flex; align-items:center; justify-content:center; }

/* =====================================================================
   ORTAK ODAK OTURUMU — Menekşe temaya geçiş
   Kapsam: odakla-features.js'teki bağımsız "focus_rooms" IIFE'sinin ürettiği
   modal (#odakla-room-overlay). Önceden tamamen inline style.cssText ile,
   sabit sarı (#FFE500) vurgulu, uygulamanın geri kalanından kopuk bir stille
   yazılıydı. Artık uygulamanın gerçek token'larını (--violet-500/400/ink,
   --cta, --surface, --text-*) kullanıyor.
   ===================================================================== */
#odakla-room-overlay{
  position:fixed; inset:0; z-index:100000; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(ellipse 700px 560px at 50% 20%, var(--violet-glow), transparent 60%),
    rgba(6,7,10,0.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--font-sans, -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif);
}
.rm-panel{
  width:100%; max-width:460px; max-height:90vh; overflow-y:auto;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--violet-500) 8%), var(--bg));
  border:1px solid rgba(106,92,255,0.22); border-radius:18px; padding:22px;
  color:var(--text-primary);
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 60px var(--violet-glow), inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
  scrollbar-width:thin; scrollbar-color:rgba(106,92,255,0.35) transparent;
}
#rm-transition{
  position:absolute; inset:0; z-index:5; border-radius:22px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(106,92,255,.28), rgba(8,9,10,.94) 70%);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
#rm-transition.show{ opacity:1; pointer-events:auto; }
.rm-transition-ring{ width:56px; height:56px; border-radius:50%; border:3px solid rgba(154,140,255,.25); border-top-color:var(--violet-ink); animation:rm-spin 1s linear infinite; }
@keyframes rm-spin{ to{ transform:rotate(360deg); } }
.rm-transition-text{ font-size:15px; font-weight:800; color:var(--text-primary); }
.rm-transition-sub{ font-size:12px; color:var(--text-secondary); }
.rm-transition-count{
  font-size:56px; font-weight:800; font-family:var(--font-mono); color:var(--text-primary);
  text-shadow:0 0 30px var(--violet-glow-strong);
}
.rm-transition-count.pop{ animation:rm-count-pop .65s cubic-bezier(.2,.8,.2,1); }
@keyframes rm-count-pop{
  0%{ transform:scale(.4); opacity:0; } 30%{ transform:scale(1.15); opacity:1; }
  70%{ transform:scale(1); opacity:1; } 100%{ transform:scale(.92); opacity:.85; }
}
.rm-panel::-webkit-scrollbar{ width:6px; }
.rm-panel::-webkit-scrollbar-track{ background:transparent; }
.rm-panel::-webkit-scrollbar-thumb{ background:rgba(106,92,255,0.35); border-radius:999px; }
.rm-panel::-webkit-scrollbar-thumb:hover{ background:rgba(154,140,255,0.55); }

.rm-title{ margin:0; font-size:19px; font-weight:800; display:flex; align-items:center; gap:8px; }
.rm-close{ all:unset; cursor:pointer; color:var(--text-secondary); font-size:18px; line-height:1; padding:4px; }
.rm-close:hover{ color:var(--text-primary); }
.rm-desc{ color:var(--text-secondary); font-size:13px; margin:0 0 18px; }
.rm-err{ color:#FF8A8A; font-size:12px; min-height:16px; }

.rm-input{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:10px;
  padding:11px 14px; color:var(--text-primary); font-size:15px; font-family:inherit;
}
.rm-input::placeholder{ color:var(--text-muted); }
.rm-input:focus{ outline:none; border-color:rgba(154,140,255,0.5); box-shadow:0 0 0 3px var(--violet-glow); }
.rm-input-code{ flex:1; letter-spacing:3px; text-align:center; }

.otp-row{ display:flex; gap:7px; justify-content:center; }
.otp-row-sm{ gap:5px; }
.otp-box{
  width:34px; height:44px; border-radius:11px; text-align:center;
  background:rgba(255,255,255,.03); border:1.5px solid var(--glass-border);
  font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--text-primary);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.otp-row-sm .otp-box{ width:28px; height:38px; font-size:15px; border-radius:9px; }
.otp-box:focus{ border-color:var(--violet-400); box-shadow:0 0 0 3px var(--violet-glow); background:rgba(154,140,255,.06); }
.otp-box.filled{ border-color:rgba(154,140,255,.45); animation:otp-pop .22s cubic-bezier(.34,1.56,.64,1); }
@keyframes otp-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
.otp-box.err{ border-color:#FF6B6B; box-shadow:0 0 0 3px rgba(255,107,107,.3); animation:otp-shake .42s ease; }
@keyframes otp-shake{
  10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-5px); } 40%,60%{ transform:translateX(5px); }
}
@media (max-width:420px){
  .otp-row{ gap:4px; }
  .otp-box{ width:26px; height:36px; font-size:14px; border-radius:8px; }
  .otp-row-sm{ gap:4px; }
  .otp-row-sm .otp-box{ width:21px; height:29px; font-size:11px; border-radius:7px; }
}

.rm-btn{ cursor:pointer; border-radius:10px; padding:11px 16px; font-size:14px; font-weight:700; font-family:inherit; border:none; transition:transform .15s var(--ease,ease), box-shadow .15s; }
.rm-btn:active{ transform:scale(.97); }
.rm-btn-primary{ background:var(--cta); color:var(--cta-ink,#fff); box-shadow:0 6px 20px var(--violet-glow); }
.rm-btn-primary:hover{ box-shadow:0 8px 26px var(--violet-glow-strong); }
.rm-btn-secondary{ background:rgba(255,255,255,0.05); color:var(--text-primary); border:1px solid rgba(255,255,255,0.1); font-weight:600; }
.rm-btn-secondary:hover{ background:rgba(255,255,255,0.09); }
.rm-btn-secondary.is-active{ background:var(--cta); color:var(--cta-ink,#fff); border-color:transparent; box-shadow:0 6px 20px var(--violet-glow); }
.rm-btn-danger{ cursor:pointer; background:rgba(255,92,92,0.1); color:#FF8A8A; border:1px solid rgba(255,92,92,0.25); border-radius:10px; padding:8px 12px; font-size:13px; font-family:inherit; font-weight:600; }
.rm-btn-danger:hover{ background:rgba(255,92,92,0.18); }
.rm-btn-sm{ padding:8px 12px; font-size:13px; }
.rm-btn-block{ width:100%; }

.rm-dur-row{ display:flex; gap:8px; margin-bottom:18px; }
.rm-dur-row .rm-btn{ flex:1; }

.rm-access-cards{ display:flex; gap:9px; }
.rm-access-card{
  flex:1; border:1.5px solid var(--glass-border); border-radius:14px; padding:14px 10px; text-align:center; cursor:pointer;
  transition:all .2s ease; background:rgba(255,255,255,.02);
}
.rm-access-card.is-active{ border-color:var(--violet-400); background:rgba(154,140,255,.08); box-shadow:0 0 0 3px var(--violet-glow); }
.rm-access-icon{ display:flex; justify-content:center; margin-bottom:6px; }
.rm-access-icon .ic{ width:22px; height:22px; }
.rm-access-title{ font-size:12.5px; font-weight:700; margin-bottom:3px; }
.rm-access-desc{ font-size:10px; color:var(--text-secondary); line-height:1.35; }

.rm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.rm-code-lbl{ font-size:11px; color:var(--text-secondary); letter-spacing:.06em; }
.rm-code{ font-size:26px; font-weight:800; letter-spacing:5px; color:var(--violet-ink); text-shadow:0 0 18px var(--violet-glow); }
.rm-head-actions{ display:flex; gap:8px; }

.rm-lobby-hint{ font-size:13px; color:var(--text-secondary); margin:4px 0 10px; }
.rm-members{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.rm-member-row{
  display:flex; justify-content:space-between; align-items:center; padding:8px 10px;
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); border-radius:9px; font-size:13px;
}
.rm-member-name{ display:flex; align-items:center; gap:5px; }
.rm-status-ready{ color:var(--violet-ink); font-weight:600; }
.rm-status-waiting{ color:var(--text-secondary); }
.rm-wait-dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--text-muted); position:relative; margin-right:4px; }
.rm-wait-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--text-muted);
  animation:rm-dot-ping 2.4s ease-out infinite;
}
@keyframes rm-dot-ping{ 0%{ transform:scale(.4); opacity:.55; } 100%{ transform:scale(2.4); opacity:0; } }
.rm-member-row{ opacity:0; transform:translateY(6px); animation:rm-row-in .5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes rm-row-in{ to{ opacity:1; transform:translateY(0); } }

.rm-ready-stage{ display:flex; flex-direction:column; align-items:center; margin-bottom:18px; }
.rm-ready-orbit{ position:relative; width:110px; height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.rm-ready-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(154,140,255,.28); }
.rm-ready-ring.r2{ inset:12px; border-color:rgba(154,140,255,.16); animation:rm-spin-slow 22s linear infinite; }
.rm-ready-ring.r3{ inset:-8px; border-color:rgba(154,140,255,.08); animation:rm-spin-slow 30s linear infinite reverse; border-style:dashed; }
@keyframes rm-spin-slow{ to{ transform:rotate(360deg); } }
.rm-ready-orb{
  position:relative; overflow:hidden; width:78px; height:78px; border-radius:50%; background:var(--cta);
  display:flex; align-items:center; justify-content:center; font-size:34px; line-height:1;
  box-shadow:0 0 0 0 var(--violet-glow-strong), 0 10px 26px rgba(106,92,255,.4);
  animation:rm-pulse-glow 2.6s ease-in-out infinite; cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.rm-ready-orb::before{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.6), rgba(255,255,255,0) 46%); mix-blend-mode:overlay;
}
.rm-ready-orb::after{
  content:""; position:absolute; top:-60%; left:-70%; width:55%; height:220%; z-index:0; pointer-events:none;
  background:linear-gradient(75deg, transparent, rgba(255,255,255,.38), transparent);
  transform:rotate(18deg) translateX(-30%); animation:rm-orb-sheen 5s ease-in-out infinite;
}
@keyframes rm-orb-sheen{ 0%{ transform:rotate(18deg) translateX(-160%); } 38%,100%{ transform:rotate(18deg) translateX(260%); } }
.rm-ready-orb:active{ transform:scale(.94); }
.rm-ready-orb.is-ready{
  background:linear-gradient(180deg,#6EE7A8,#4ADE80);
  box-shadow:0 0 0 0 rgba(74,222,128,.35), 0 10px 26px rgba(74,222,128,.4);
  animation:rm-pulse-glow-ready 2.6s ease-in-out infinite;
}
@keyframes rm-pulse-glow{
  0%{ box-shadow:0 0 0 0 var(--violet-glow-strong), 0 10px 26px rgba(106,92,255,.4); }
  70%{ box-shadow:0 0 0 16px rgba(106,92,255,0), 0 10px 26px rgba(106,92,255,.4); }
  100%{ box-shadow:0 0 0 0 rgba(106,92,255,0), 0 10px 26px rgba(106,92,255,.4); }
}
@keyframes rm-pulse-glow-ready{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.35), 0 10px 26px rgba(74,222,128,.4); }
  70%{ box-shadow:0 0 0 16px rgba(74,222,128,0), 0 10px 26px rgba(74,222,128,.4); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0), 0 10px 26px rgba(74,222,128,.4); }
}
.rm-ready-emoji{ position:relative; z-index:1; text-shadow:0 2px 4px rgba(0,0,0,.35), 0 0 10px rgba(255,255,255,.2); transform-origin:60% 90%; }
.rm-ready-orb.just-tapped .rm-ready-emoji{ animation:rm-wave .5s ease; }
@keyframes rm-wave{
  0%{ transform:rotate(0deg) scale(1); } 25%{ transform:rotate(-18deg) scale(1.12); }
  50%{ transform:rotate(14deg) scale(1.12); } 75%{ transform:rotate(-8deg) scale(1.05); } 100%{ transform:rotate(0deg) scale(1); }
}

#rm-copy{ position:relative; }
#rm-copy.is-copied{ background:linear-gradient(180deg,#6EE7A8,#4ADE80); color:#0C1F13; border-color:transparent; }
.rm-spark{
  position:absolute; width:5px; height:5px; border-radius:50%; background:var(--violet-ink);
  top:50%; left:50%; margin:-2.5px; pointer-events:none; animation:rm-spark-fly .72s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes rm-spark-fly{ to{ transform:translate(var(--dx), var(--dy)) scale(0); opacity:0; } }
.rm-status-online{ color:#4ADE80; font-weight:600; }
.rm-status-away{ color:var(--text-secondary); }
.rm-empty{ color:var(--text-secondary); font-size:13px; }

.rm-timer-box{ text-align:center; margin:4px 0 16px; }
.rm-ring-wrap{ position:relative; width:150px; height:150px; margin:0 auto; }
.rm-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
.rm-ring-track{ fill:none; stroke:rgba(255,255,255,0.07); stroke-width:7; }
.rm-ring-prog{ fill:none; stroke:url(#rmRingGrad); stroke-width:7; stroke-linecap:round; filter:drop-shadow(0 0 10px var(--violet-glow-strong)); transition:stroke-dashoffset 1s linear; }
.rm-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rm-timer{ font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.rm-timer-sub{ font-size:10px; color:var(--text-secondary); margin-top:1px; }
.rm-timer-flame{ font-size:12px; color:var(--violet-ink); margin-top:10px; }

.rm-chat{ border-top:1px solid rgba(255,255,255,0.08); padding-top:12px; }
.rm-chat-scroll{
  height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:9px;
  scrollbar-width:thin; scrollbar-color:rgba(106,92,255,0.35) transparent;
}
.rm-chat-scroll::-webkit-scrollbar{ width:6px; }
.rm-chat-scroll::-webkit-scrollbar-track{ background:transparent; }
.rm-chat-scroll::-webkit-scrollbar-thumb{ background:rgba(106,92,255,0.35); border-radius:999px; }
.rm-chat-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(154,140,255,0.55); }
.rm-chat-input-row{ display:flex; gap:7px; }
.rm-chat-send{ padding:9px 14px; font-size:13px; box-shadow:0 4px 14px var(--violet-glow); }

.rm-msg-row{ display:flex; gap:7px; align-items:flex-end; }
.rm-msg-row.is-mine{ flex-direction:row-reverse; }
.rm-av{
  flex:0 0 auto; width:23px; height:23px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:10px; font-weight:800; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.rm-bubble-col{ display:flex; flex-direction:column; max-width:76%; }
.rm-msg-row.is-mine .rm-bubble-col{ align-items:flex-end; }
.rm-msg-name{ font-size:10px; font-weight:700; color:var(--text-secondary); margin:0 3px 3px; }
.rm-bubble{ padding:8px 13px; border-radius:17px; font-size:13px; line-height:1.4; box-shadow:0 2px 8px rgba(0,0,0,0.18); word-break:break-word; }
.rm-bubble.is-mine{ background:var(--cta); color:var(--cta-ink,#fff); border-bottom-right-radius:5px; }
.rm-bubble.is-theirs{ background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.06); color:var(--text-primary); border-bottom-left-radius:5px; }
.rm-msg-meta{ display:flex; align-items:center; gap:6px; margin:4px 3px 0; }
.rm-msg-row.is-mine .rm-msg-meta{ flex-direction:row-reverse; }
.rm-msg-time{ font-size:10px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.rm-read-stack{ display:flex; align-items:center; }
.rm-read-av{
  width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:7px; font-weight:800; color:#fff; border:1.5px solid var(--bg); margin-left:-5px;
}
.rm-read-stack .rm-read-av:first-child{ margin-left:0; }
.rm-msg-sending{ font-size:10px; color:var(--text-muted); }

.rm-done-emoji{ font-size:34px; text-align:center; }
.rm-done-badge{
  width:56px; height:56px; margin:0 auto; border-radius:50%; background:linear-gradient(180deg,#6EE7A8,#4ADE80);
  display:flex; align-items:center; justify-content:center; color:#0C1F13;
  box-shadow:0 10px 26px rgba(74,222,128,.4); animation:rm-done-pop .6s cubic-bezier(.34,1.56,.64,1);
}
.rm-done-badge .ic{ width:26px; height:26px; }
@keyframes rm-done-pop{ 0%{ transform:scale(0) rotate(-20deg); opacity:0; } 60%{ transform:scale(1.2) rotate(8deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }
.rm-done-row{ opacity:0; transform:translateY(6px); animation:rm-row-in .5s cubic-bezier(.2,.8,.3,1) forwards; }
.rm-done-medal{
  width:24px; height:24px; border-radius:50%; flex-shrink:0; font-size:11px; font-weight:800; color:#2b2410;
  display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 32% 26%, var(--mg));
  box-shadow:0 0 6px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.4); margin-right:2px;
}
.rm-done-medal-plain{ width:24px; text-align:center; font-size:11.5px; color:var(--text-muted); font-weight:700; flex-shrink:0; margin-right:2px; }
.rm-confetti-piece{ position:absolute; top:-10px; border-radius:2px; opacity:0; z-index:9; pointer-events:none; animation:rm-confetti-fall linear forwards; }
@keyframes rm-confetti-fall{ 0%{ opacity:1; transform:translateY(0) rotate(0deg); } 100%{ opacity:0; transform:translateY(360px) rotate(400deg); } }
.rm-done-title{ font-size:18px; font-weight:700; margin-top:6px; text-align:center; }
.rm-done-head{ text-align:center; margin:10px 0 16px; }
.rm-done-rows{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.rm-done-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); border-radius:9px; }
.rm-done-mins{ color:var(--violet-ink); font-weight:700; }

.rmd-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.rmd-card{
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px;
  opacity:0; transform:translateY(6px); animation:rmd-row-in .45s cubic-bezier(.2,.8,.3,1) forwards;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rmd-card:hover{ border-color:rgba(154,140,255,.35); transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.3); }
@keyframes rmd-row-in{ to{ opacity:1; transform:translateY(0); } }
.rmd-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rmd-card-name{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px; }
.rmd-card-status{ font-size:11px; color:var(--violet-ink); font-weight:600; white-space:nowrap; }
.rmd-card-bottom{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-secondary); }
.rmd-locked-row{ display:flex; gap:8px; }
.rmd-locked-code{ flex:1; letter-spacing:2px; text-align:center; }
.rmd-icon{ display:inline-flex; align-items:center; color:var(--text-secondary); }
.rmd-icon.is-open{ color:var(--violet-ink); }
.rmd-icon .ic{ width:14px; height:14px; }
.rmd-card-status.is-live{ display:flex; align-items:center; gap:5px; color:var(--violet-ink); }
.rmd-live-dot{ width:5px; height:5px; border-radius:50%; background:var(--violet-400); box-shadow:0 0 6px var(--violet-400); animation:rmd-blink 1.4s ease-in-out infinite; }
@keyframes rmd-blink{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
.rmd-mini-avatars{ display:flex; }
.rmd-mini-av{ width:21px; height:21px; border-radius:50%; margin-left:-7px; box-shadow:0 0 0 2px var(--surface); }
.rmd-mini-avatars .rmd-mini-av:first-child{ margin-left:0; }
.rmd-empty{ text-align:center; padding:26px 10px 10px; }
.rmd-empty-orb{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 0 0 1px var(--glass-border);
}
.rmd-empty-title{ font-weight:700; font-size:14px; margin-bottom:4px; }
.rmd-empty-sub{ font-size:12px; color:var(--text-secondary); }
.ct-task-icon svg{ width:15px; height:15px; }

/* =====================================================================
   FAZ 33a — KOMPAKT TEK-SATIR UYARI ŞERİDİ (home-notice)
   ================================================================= */
.home-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 0 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--surf-1);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.hn-icon { font-size: 15px; flex-shrink: 0; }
.hn-text { flex: 1; min-width: 120px; }
.hn-text strong { color: var(--text-primary); }
.hn-action {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(106,92,255,0.12);
  border: 1px solid rgba(106,92,255,0.3);
  color: var(--violet-ink);
  cursor: pointer;
  flex-shrink: 0;
}
.hn-guest-form { display: flex; gap: 6px; flex-wrap: wrap; flex-basis: 100%; margin-top: 4px; }
.hn-guest-form input { flex: 1; min-width: 100px; padding: 7px 10px; font-size: 12px; border-radius: 8px; }

/* =====================================================================
   FAZ 33b — TIMER KARTI: ASİMETRİK YERLEŞİM (ring solda dekoratif rozet,
   süre/buton sağda). Mevcut gizli-ring + cam-dijit mekanizmasına (FAZ 21)
   dokunulmuyor, sadece .timer-row flex-row yapılıyor ve yanına yeni bir
   dekoratif rozet ekleniyor.
   ================================================================= */
#page-home .timer-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: left;
  /* Rozet artık akıştan çıkıp solda sabitleniyor (aşağıda position:absolute) —
     "Şu an X kişi..." rozetiyle aynı şekilde TAM kart ortasına ortalansın diye
     (rozetin kapladığı genişlik ortalamayı kaydırmasın). */
  position: relative;
}
/* Başlat geri sayımı — odadaki lobi→çalışıyor geçişiyle aynı görsel dil (.rm-transition-count
   global tanımlı, buraya yeniden kullanılıyor), sadece .timer-row'u kaplıyor (tüm kart değil). */
.focus-start-countdown {
  position: absolute; inset: -12px; z-index: 50; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(106,92,255,0.28), rgba(6,7,10,0.92) 72%);
  opacity: 0; pointer-events: none; transition: opacity 280ms ease;
}
.focus-start-countdown.show { opacity: 1; pointer-events: auto; }
/* Faz geçişi (çalışma↔mola) renk dalgası — kısa, engellemeyen, sık tetiklenebilir. */
.phase-flash {
  position: absolute; inset: -12px; z-index: 40; border-radius: 20px; pointer-events: none;
  background: radial-gradient(circle, rgba(106,92,255,0.35), transparent 70%);
  animation: phaseFlashPulse 650ms ease-out forwards;
}
.phase-flash.is-break {
  background: radial-gradient(circle, rgba(255,146,36,0.32), transparent 70%);
}
@keyframes phaseFlashPulse {
  0% { opacity: 0; transform: scale(0.85); }
  35% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .phase-flash { animation: none; display: none; } }
/* Oturum bitişi ödül anı — checkmark + dakika/XP + konfeti (fireDoneConfetti ile aynı
   .rm-confetti-piece parçacığı), önceden sessizce sıfırlanıyordu. */
.focus-complete-celebration {
  position: absolute; inset: -12px; z-index: 50; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(106,92,255,0.3), rgba(6,7,10,0.94) 72%);
  opacity: 0; pointer-events: none; transition: opacity 300ms ease;
}
.focus-complete-celebration.show { opacity: 1; }
.focus-complete-check {
  width: 52px; height: 52px; border-radius: 50%; background: rgba(106,92,255,0.18);
  border: 1.5px solid rgba(106,92,255,0.5); display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 14px var(--violet-glow-strong));
}
.focus-complete-celebration.show .focus-complete-check { animation: focusCheckPop 550ms cubic-bezier(.22,1.4,.36,1); }
@keyframes focusCheckPop { 0%{ transform:scale(0); opacity:0; } 60%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); } }
.focus-complete-title { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.focus-complete-sub { font-size: 13px; color: var(--violet-ink); font-weight: 700; }
#page-home .home-timer-badge {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  /* %50 rozeti .timer-row'un TÜMÜNÜN (etiket+Hazır+saat kutuları) ortasına
     hizalar — göz onu saat kutularıyla kıyaslıyor. Canlıda ölçülüp
     doğrulanmış sabit değerle doğrudan .tmu-wrap'in hizasına indiriyoruz. */
  top: 133px;
  background: radial-gradient(circle, rgba(106,92,255,0.18), rgba(106,92,255,0.04));
  color: var(--violet-ink);
  box-shadow: 0 0 20px rgba(106,92,255,0.15);
}
#page-home .home-timer-badge svg { width: 30px; height: 30px; }
body.timer-active #page-home .home-timer-badge {
  animation: homeTimerBadgePulse 2.4s ease-in-out infinite;
}
@keyframes homeTimerBadgePulse {
  0%, 100% { box-shadow: 0 0 20px rgba(106,92,255,0.15); }
  50% { box-shadow: 0 0 32px rgba(106,92,255,0.35); }
}
/* Rozet çevresindeki gerçek ilerleme halkası — Pomodoro döngüsünde (25dk) ne kadar
   yol alındığını gösterir, aynı hesap eskiden gizlenen büyük halkayla (updateHeroRing,
   bkz. odakla-features.js) — burada küçük rozete taşındı, ayrı fonksiyon günceller. */
/* .home-timer-badge svg{width:30px;height:30px} kuralı (yukarıda) daha yüksek özgüllüğe
   sahip (id+class+tag) — halka SVG'si de o kurala uyup 30px'e küçülüyordu, "svg" etiketini
   de eşleştirip özgüllüğü aşarak 64px'i geri kazandırıyoruz. */
#page-home .home-timer-badge svg.home-timer-badge-ring {
  position: absolute; inset: 0; width: 64px; height: 64px; transform: rotate(-90deg);
  pointer-events: none;
}
#page-home .home-timer-badge-ring-track { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 2.5; }
#page-home .home-timer-badge-ring-prog {
  fill: none; stroke: url(#homeBadgeRingGrad); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 182.2; stroke-dashoffset: 182.2; opacity: 0.35;
  transition: stroke-dashoffset 900ms linear, opacity 400ms ease;
}
body.timer-active #page-home .home-timer-badge-ring-prog { opacity: 1; }
#page-home .hero-timer-ring-wrap {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
#page-home .hero-timer-ring-center {
  /* Saat kutuları (tmu-wrap) sütunun en geniş öğesi — sola yaslarsak
     etiket/rozet kutuların soluna yapışık kalır, saat kutuları geniş
     olduğu için "ortalanmış" gibi görünür ama üsttekiler görünmez.
     Hepsini saat kutularının genişliğine göre ortalıyoruz. */
  align-items: center !important;
}
#page-home .hero-timer-ring-label,
#page-home .phase-badge {
  align-self: center !important;
}

/* =====================================================================
   FAZ 33c — BENTO GRID (Haftalık Hedef + Bugün Süre/XP)
   ================================================================= */
.home-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  margin-bottom: 12px;
}
.hb-cell {
  background: var(--surf-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}
.hb-cell-goal {
  grid-row: span 2;
}
.hb-cell-small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.hb-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0;
}
.hb-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}
@media (max-width: 480px) {
  .home-bento { grid-template-columns: 1fr; }
  .hb-cell-goal { grid-row: auto; }
}

/* =====================================================================
   FAZ 33d — MOTİVASYON ŞERİDİ (tek sütun, ince — eski fc-grid 2-sütun
   quote+goal yapısının yerine; goal kısmı bento-grid'e taşındığı için
   kaldırıldı, bkz. Task 5/6)
   ================================================================= */
#home-focus-companion .fc-quote-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--surf-1);
  border: 1px solid var(--hairline);
}
#home-focus-companion .fc-quote-strip .fc-quote-text {
  flex: 1;
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-secondary);
  margin: 0;
  transition: opacity 200ms ease;
}
#home-focus-companion .fc-quote-author-inline {
  font-style: normal;
  opacity: 0.6;
}
#home-focus-companion .fc-quote-refresh {
  all: unset;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 200ms;
}
#home-focus-companion .fc-quote-refresh:hover { opacity: 1; }

/* =====================================================================
   FAZ 33e — NAV: ALTTAN SOL DİKEY SIDEBAR'A TAŞI
   Önceki tüm #bottom-nav/.nav-item kuralları (FAZ 5, FAZ 28, FAZ 31,
   FAZ 32 dahil — bkz. dosyanın önceki bölümleri) burada, dosyanın en
   sonunda, source-order + !important ile eziliyor. Hiçbiri silinmedi —
   kod tabanının "yeni blok en sonda kazanır" deseni takip edildi.
   ================================================================= */
#bottom-nav {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  transform: none !important;
  width: 72px !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 78px 12px 18px !important;
  /* ODAKLA: kullanıcı kararı — düz var(--bg) rengi bile ana içeriğin GERÇEK
     zemini (body:not(.centered-auth)'un menekşe "aurora" radial-gradient'leri,
     bkz. ~satır 2835 — sol üstte 8%/-10%'de güçlü bir menekşe daire var) ile
     birebir aynı değildi: opak sidebar o gradyanı kendi 72px'lik sütununda
     tamamen kesiyor, içerik tarafında gradyan devam ediyor, aradaki fark bir
     "çizgi" gibi görünüyordu. transparent yapınca sidebar ayrı bir yüzey
     olmaktan çıkıp body'nin kendi zemini üzerinde duruyor — aynı piksel,
     kesinti yok. */
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--glass-border) !important;
  box-shadow: none !important;
  z-index: 900 !important;
}
#bottom-nav .nav-item {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: none !important;
  border-radius: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  color: var(--text-muted) !important;
  transition: all 220ms var(--ease) !important;
}
#bottom-nav .nav-item svg { width: 22px !important; height: 22px !important; }
#bottom-nav .nav-item span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}
#bottom-nav .nav-item:hover { color: var(--text-secondary) !important; background: rgba(255,255,255,0.05) !important; }
#bottom-nav .nav-item[data-page].active {
  background: linear-gradient(180deg, var(--violet-400), var(--violet-500)) !important;
  color: #fff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 6px 16px var(--violet-glow-strong) !important;
}
body.has-bottom-nav {
  padding-left: 96px !important;
  padding-bottom: 32px !important;
}
body.focus-mode.has-bottom-nav,
body.centered-auth.has-bottom-nav {
  padding-left: 16px !important;
}
@media (max-width: 640px) {
  #bottom-nav { width: 60px !important; padding: 68px 9px 14px !important; gap: 10px !important; }
  #bottom-nav .nav-item { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  body.has-bottom-nav { padding-left: 78px !important; }
}
/* =====================================================================
   FAZ 33f — DISCORD İLHAMLI SOL RAY: çizgisiz kenar, alt profil, sol
   hizalı sayfa adı, ileri/geri köşede, başlık altında ayraç çizgi.
   Önceki "Finding 3" çözümü (satır ~14165'teydi — #header-nav-history'yi
   #app-header-row'a göre position:absolute ile ortalıyordu) tamamen
   kaldırıldı: index.html'in base kuralı (satır ~716) zaten
   position:fixed — viewport'a göre sabit olduğu için satırın/başlığın
   yüksekliğiyle hiç ilgilenmesine gerek yok, tek `left` değeri sidebar'ı
   her genişlikte otomatik temizliyor. */

/* Sidebar: çizgi yok, profil en altta */
#bottom-nav { border-right: none !important; }
#bottom-nav #profile-toggle-btn {
  margin-top: auto !important;
  flex-shrink: 0;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--glass-border) !important;
}
@media (max-width: 640px) {
  #bottom-nav #profile-toggle-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; }
}

/* İleri/geri: viewport'a sabit, sidebar'ı temizleyecek kadar sağda —
   row'un/başlığın yüksekliğinden bağımsız, tek değer her genişlikte çalışır. */
body.has-bottom-nav #header-nav-history { left: 84px; }
@media (max-width: 640px) {
  body.has-bottom-nav #header-nav-history { left: 70px; }
}

/* Başlık satırının altında ince ayraç çizgi */
#app-header-row {
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 16px;
}

/* =====================================================================
   FAZ 34 — DISCORD TARZI KENDİ PROFİL POPOVER'I
   #profile-toggle-btn'e tıklayınca açılan, avatara göre konumlanan
   floating kart (gerçek modal overlay değil — arka plan tıklanabilir
   kalıyor, dışarı tıklayınca/Escape ile kapanıyor). Görsel dil
   .fpm-* (arkadaş profil modalı, ~satır 10050) ile aynı aileden ama
   ayrı bir bileşen — .fpm-* sabit ortalı bir modal, bu anchor'lı bir
   popover, mekaniği farklı olduğu için class'lar paylaşılmadı.
   ================================================================= */
#self-profile-popover {
  position: fixed;
  width: 300px;
  z-index: 5000;
  display: none;
  background: linear-gradient(180deg, rgba(30,26,50,0.55) 0%, rgba(14,15,22,0.85) 100%);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 50px 4px rgba(106,92,255,0.18);
  overflow: hidden;
  animation: sppPopIn 180ms cubic-bezier(.22,1.2,.36,1);
}
@keyframes sppPopIn {
  from { transform: translateY(6px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.spp-banner {
  height: 56px;
  width: 100%;
  background: linear-gradient(120deg, var(--violet-500), var(--violet-400));
}
.spp-header { padding: 0 16px 14px; position: relative; }
.spp-avatar-wrap {
  position: relative;
  width: 68px;
  margin: -34px 0 8px;
}
.spp-avatar {
  width: 68px !important;
  height: 68px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)) !important;
  color: var(--text-primary) !important;
  font-size: 27px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 4px solid #16151c !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.10);
  overflow: hidden;
}
.spp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spp-status-dot {
  position: absolute;
  right: 2px;
  bottom: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #16151c;
  background: #6FE86F;
  box-shadow: 0 0 8px rgba(111,232,111,0.6);
}
.spp-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.spp-handle {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.spp-level-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 10px;
  display: inline-block;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  margin-bottom: 10px;
}
.spp-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 0 0 10px; }
.spp-bio {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
}
.spp-bio b { color: var(--text-primary); font-weight: 700; }
.spp-cosmetics-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.spp-cosmetics-row:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.spp-cosmetics-row svg { width: 15px; height: 15px; flex-shrink: 0; }
.spp-actions { padding: 6px 10px 12px; }
.spp-action-row {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 8px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.spp-action-row:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.spp-action-row svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Title bar'da dinamik sayfa adı — Discord tarzı sol üst (app ikonu + aktif sayfa) */
#titlebar-page-info {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 40px;
  display: none;
  align-items: center;
  gap: 8px;
  -webkit-app-region: no-drag;
  z-index: 12000;
  color: rgba(255,255,255,0.68);
  font-size: 12.5px;
  font-weight: 700;
  pointer-events: none;
}
body.has-window-controls.has-bottom-nav #titlebar-page-info { display: flex; }
#titlebar-page-info img { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; opacity: 0.9; }
#titlebar-page-info svg { width: 14px; height: 14px; flex-shrink: 0; }
#titlebar-page-info span { white-space: nowrap; }

.dm-nav-badge{ position:absolute; top:2px; right:14px; min-width:15px; height:15px; border-radius:999px; background:var(--cta); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px; }
#bottom-nav .nav-item{ position:relative; }

.dm-page{ display:flex; height:calc(100vh - 140px); min-height:420px; background:#1a1725; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.dm-list-col{ width:240px; border-right:1px solid rgba(255,255,255,.07); flex-shrink:0; display:flex; flex-direction:column; min-height:0; }
.dm-list-header{ display:flex; align-items:center; justify-content:space-between; padding:13px 14px 9px; flex-shrink:0; }
.dm-list-title{ font-size:13px; font-weight:800; color:#eee; }
.dm-new-chat-btn{ width:26px; height:26px; border-radius:8px; background:rgba(154,140,255,.15); border:1px solid rgba(154,140,255,.3); color:#c9c2ff; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:all 160ms ease; }
.dm-new-chat-btn:hover{ background:rgba(154,140,255,.28); border-color:rgba(154,140,255,.5); }
.dm-new-chat-btn.is-active{ background:#8a7bff; border-color:#8a7bff; color:#fff; transform:rotate(45deg); }
.dm-list-search-row{ padding:0 14px 9px; flex-shrink:0; }
.dm-list-search{ width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:9px; padding:7px 10px; font-size:12px; color:#eee; }
.dm-list-search::placeholder{ color:#6f6a80; }
.dm-list-search:focus{ outline:none; border-color:rgba(154,140,255,.5); background:rgba(255,255,255,.07); }
.dm-list{ padding:0 0 10px; flex:1; overflow-y:auto; min-height:0; }
.dm-pane{ flex:1; display:flex; flex-direction:column; min-width:0; }

.dm-list-empty{ padding:30px 16px; text-align:center; font-size:12px; color:var(--text-muted); line-height:1.6; }
.dm-list-item{ display:flex; gap:9px; align-items:center; padding:8px 12px; cursor:pointer; border-left:2px solid transparent; }
.dm-list-item:hover{ background:rgba(255,255,255,.04); }
.dm-list-item.active{ background:rgba(124,108,255,0.14); border-left-color:#8a7bff; }
.dm-list-av{ width:34px; height:34px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#7FA9FF,#4C7FE0); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; overflow:hidden; }
.dm-list-text{ min-width:0; flex:1; }
.dm-list-name{ font-size:12.5px; font-weight:700; color:#eee; }
.dm-list-preview{ font-size:11px; color:#8a8598; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-unread{ flex-shrink:0; background:#8a7bff; color:#fff; font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.dm-empty-pane{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:13px; }

.dm-conv-header{ padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:9px; flex-shrink:0; position:relative; }
/* ODAKLA: kullanıcı isteği — avatara/isme tıklayınca profil kartı + isim
   altında çevrimiçi/çevrimdışı durumu. */
.dm-conv-identity{ display:flex; align-items:center; gap:9px; min-width:0; cursor:pointer; border-radius:8px; padding:2px 4px; margin:-2px -4px; }
.dm-conv-identity:hover{ background:rgba(255,255,255,.05); }
.dm-conv-title-col{ display:flex; flex-direction:column; min-width:0; gap:1px; }
.dm-conv-title{ font-size:13px; font-weight:700; color:#eee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-conv-status{ display:flex; align-items:center; gap:4px; font-size:10.5px; color:#8a8598; }
.dm-status-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); flex-shrink:0; }
.dm-status-dot.status-online,.dm-status-dot.status-focused{ background:#6FE86F; box-shadow:0 0 6px rgba(111,232,111,.6); }
.dm-msgs{ flex:1; padding:14px 16px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.dm-msg-row{ display:flex; gap:9px; align-items:flex-start; margin-top:11px; }
.dm-msg-row.is-grouped{ margin-top:1px; }
.dm-date-sep{ display:flex; align-items:center; gap:10px; margin:16px 0 6px; }
.dm-date-sep::before, .dm-date-sep::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.08); }
.dm-date-sep span{ font-size:10.5px; font-weight:600; color:#66607a; white-space:nowrap; }
.dm-av{ width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:rgba(0,0,0,.55); overflow:hidden; }
.dm-msg-body.is-grouped{ padding-left:37px; }
.dm-msg-name{ font-size:11.5px; font-weight:700; margin-right:6px; }
.dm-msg-time{ font-size:9.5px; color:#66607a; }
.dm-bub{ font-size:13px; line-height:1.45; color:#e6e2f5; word-break:break-word; }
.dm-invite-card{ position:relative; display:flex; align-items:center; gap:11px; background:linear-gradient(150deg,rgba(154,140,255,.18),rgba(90,77,224,.05)); border:1px solid rgba(154,140,255,.4); border-radius:14px; padding:11px 13px; max-width:270px; box-shadow:0 4px 16px rgba(90,77,224,.15); overflow:hidden; }
.dm-invite-card::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(150deg,rgba(184,172,255,.55),transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.dm-invite-badge{ flex-shrink:0; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; background:linear-gradient(135deg,#8a7bff,#5a4de0); box-shadow:0 2px 8px rgba(90,77,224,.4); }
.dm-invite-body{ min-width:0; flex:1; }
.dm-invite-title{ font-size:12.5px; font-weight:800; color:#f2f0ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-invite-sub{ font-size:10.5px; color:#a89cff; margin-top:1px; }
.dm-invite-join-btn{ flex-shrink:0; background:linear-gradient(135deg,#8a7bff,#5a4de0); border:none; color:#fff; font-size:11.5px; font-weight:700; padding:7px 13px; border-radius:9px; cursor:pointer; box-shadow:0 2px 8px rgba(90,77,224,.35); }
.dm-invite-join-btn:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.dm-invite-join-btn:disabled{ opacity:.55; cursor:default; box-shadow:none; transform:none; }
.dm-input-row{ padding:10px 14px; border-top:1px solid rgba(255,255,255,.07); display:flex; gap:8px; align-items:center; flex-shrink:0; }
.dm-input{ flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:9px 12px; font-size:12.5px; color:#eee; }
.dm-input:focus{ outline:none; border-color:rgba(154,140,255,.5); }
.dm-send-btn{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; background:linear-gradient(135deg,#8a7bff,#5a4de0); border:none; cursor:pointer; flex-shrink:0; }
.dm-input-blocked{ flex:1; text-align:center; padding:9px 12px; font-size:12px; color:#66607a; }
.dm-link{ color:#a89cff; text-decoration:underline; }
.dm-seen{ font-size:10px; color:#66607a; margin-top:2px; display:block; }
.dm-typing-row{ display:flex; gap:3px; padding:8px 0 0 37px; }
.dm-typing-row span{ width:5px; height:5px; border-radius:50%; background:#a89cff; opacity:.6; animation:dm-typing-bounce 1.2s infinite; }
.dm-typing-row span:nth-child(2){ animation-delay:.2s; }
.dm-typing-row span:nth-child(3){ animation-delay:.4s; }
@keyframes dm-typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-3px); opacity:1; } }

/* ODAKLA: kullanıcı isteği — Discord'daki hover araç çubuğuyla aynı dil:
   yuvarlak koyu hap, ince kenarlık+gölge, her ikon kendi hover vurgusuyla. */
.dm-msg-actions{
  display:none; position:absolute; top:-16px; right:8px; gap:1px;
  background:#26222f; border:1px solid rgba(255,255,255,.08); border-radius:9px;
  padding:3px; box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:4;
}
.dm-msg-row{ position:relative; }
.dm-msg-row:hover .dm-msg-actions{ display:flex; }
.dm-msg-actions button{
  background:none; border:none; cursor:pointer; font-size:13px; color:#e6e2f5;
  width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center;
}
.dm-msg-actions button:hover{ background:rgba(255,255,255,.09); }
.dm-quick-react{ font-size:14px; }
.dm-act-more{ font-weight:800; letter-spacing:-1px; }
.dm-pinned-banner{ padding:7px 16px; background:rgba(154,140,255,.1); border-bottom:1px solid rgba(255,255,255,.07); font-size:11.5px; color:#c9c2ff; cursor:pointer; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-emoji-pop{ position:absolute; top:-38px; right:0; background:#252031; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:5px 7px; display:flex; gap:5px; font-size:16px; z-index:5; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.dm-emoji-pop span{ cursor:pointer; }
.dm-emoji-pop span:hover{ transform:scale(1.2); }
.dm-reactions{ display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.dm-reaction{ display:inline-flex; gap:3px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:1px 7px; font-size:11px; cursor:pointer; }
.dm-reaction.is-mine{ background:rgba(124,108,255,.25); border-color:rgba(154,140,255,.5); }
.dm-reply-quote{ font-size:11px; color:#8a8598; border-left:2px solid rgba(154,140,255,.5); padding-left:7px; margin-bottom:3px; cursor:pointer; }
.dm-reply-quote:hover{ color:#c9c2ff; border-left-color:#8a7bff; }
.dm-reply-preview{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 14px; background:rgba(124,108,255,.1); border-top:1px solid rgba(255,255,255,.07); font-size:11px; color:#c9c2ff; }
.dm-reply-preview button{ background:none; border:none; color:#8a8598; cursor:pointer; font-size:12px; }
.dm-edited-tag{ font-size:9.5px; color:#66607a; margin-left:4px; }
/* ODAKLA: kullanıcı isteği — mesaj başına "⋯" alt menüsü (Discord'daki gibi),
   sabitle/kopyala/sil buraya taşındı. Konuşma seviyesindeki .dm-conv-menu ile
   aynı görsel dilde. */
.dm-msg-more-menu{ position:absolute; top:12px; right:8px; background:#26222f; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:4px; display:flex; flex-direction:column; min-width:160px; z-index:6; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.dm-msg-more-menu button{ background:none; border:none; color:#eee; text-align:left; padding:8px 10px; font-size:12.5px; cursor:pointer; border-radius:6px; }
.dm-msg-more-menu button:hover{ background:rgba(255,255,255,.06); }
.dm-msg-more-menu .dm-menu-danger{ color:#ff6b6b; }
.dm-edit-row{ display:flex; align-items:center; gap:6px; margin-top:2px; }
.dm-edit-input{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(154,140,255,.5); border-radius:8px; padding:6px 9px; font-size:13px; color:#eee; }
.dm-edit-input:focus{ outline:none; border-color:#8a7bff; }
.dm-edit-save,.dm-edit-cancel{ flex-shrink:0; width:24px; height:24px; border-radius:7px; border:none; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; }
.dm-edit-save{ background:linear-gradient(135deg,#8a7bff,#5a4de0); color:#fff; }
.dm-edit-cancel{ background:rgba(255,255,255,.08); color:#c8c3d8; }
.dm-msg-row.is-pending{ opacity:.65; }
.dm-msg-sending{ font-size:10px; color:#66607a; margin-top:2px; display:block; }
.dm-send-failed{ font-size:10.5px; color:#ff8a7a; margin-top:2px; display:block; cursor:pointer; text-decoration:underline; }
.dm-send-failed:hover{ color:#ffab9f; }
.dm-msg-row.is-flash .dm-bub{ animation: dmFlashHighlight 900ms ease; }
@keyframes dmFlashHighlight{
  0%{ background:rgba(154,140,255,.35); }
  100%{ background:transparent; }
}
.dm-invite-card.is-expired{ opacity:.55; }
.dm-invite-card.is-expired .dm-invite-join-btn{ background:rgba(255,255,255,.08); }

.dm-menu-btn{ margin-left:auto; background:none; border:none; color:#8a8598; font-size:16px; cursor:pointer; padding:2px 8px; }
.dm-conv-menu{ position:absolute; top:38px; right:14px; background:#252031; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:4px; display:flex; flex-direction:column; min-width:170px; z-index:6; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.dm-conv-menu button{ background:none; border:none; color:#eee; text-align:left; padding:8px 10px; font-size:12.5px; cursor:pointer; border-radius:6px; }
.dm-conv-menu button:hover{ background:rgba(255,255,255,.06); }
.dm-conv-menu .dm-menu-danger{ color:#ff6b6b; }
.fsv-fc-dm-btn{
  background: linear-gradient(135deg, rgba(127,169,255,.20), rgba(127,169,255,.08));
  border: 1px solid rgba(127,169,255,.35);
  border-radius: 10px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-friends);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 160ms ease;
}
.fsv-fc-dm-btn svg{ width:16px; height:16px; }
.fsv-fc-dm-btn:hover{
  background: linear-gradient(135deg, rgba(127,169,255,.32), rgba(127,169,255,.14));
  border-color: rgba(127,169,255,.6);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(127,169,255,.25);
}
.fsv-fc-dm-btn:active{ transform: translateY(0); }