/**
 * BelliOlmaz — Resmi Marka Teması
 *
 * Ana Marka Rengi : #FF176B (Logo ana rengi — Canlı Fuşya)
 * İkincil Renk    : #0097A7 (Logo göbek rengi — Turkuaz)
 * Eylem Rengi     : #ea580c / #c2410c (Sevilen canlı turuncu — ince yazılarda parlamayan, yüksek kontrastlı WCAG AAA)
 * Tipografi       : Baloo 2 (Google Fonts)
 * Zemin           : Aydınlık, ferah, pırıl pırıl ve yüksek okunabilirlikli.
 */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');

:root {
  /* Marka Tipografisi */
  --font-gamer: 'Baloo 2', system-ui, -apple-system, sans-serif;

  /* Logo Resmi Renkleri */
  --bo-brand-primary: #FF176B;
  --bo-brand-secondary: #0097A7;

  /* Sevilen Canlı Turuncu Rampa (İnce yazılarda parlamayan, kontrastlı) */
  --bo-orange-bright: #ff5722;
  --bo-orange-action: #ea580c;
  --bo-orange-text: #c2410c;     /* İnce metinler için parlamayan doygun turuncu */
  --bo-orange-dark: #9a3412;     /* Yüksek kontrast metin */
  --bo-orange-soft: #fff7ed;     /* Yumuşak arka plan */

  /* Genel Tema Değişkenleri */
  --primary-color: #FF176B;
  --primary-dark: #d80f58;
  --secondary-color: #0097A7;
  --accent-color: #ea580c;

  /* Yüzey & Metin */
  --bo-bg: #fcfcfd;
  --bo-text: #0f172a;
  --bo-muted: #475569;
  --bo-border: #fed7aa;
}

/* ==========================================================================
   1. Tipografi & Gövde Zemin (Aydınlık & Ferah)
   ========================================================================== */

body {
  font-family: var(--font-gamer) !important;
  font-size: 1.05rem;
  color: var(--bo-text) !important;
  background-color: var(--bo-bg) !important;
  background-image: 
    radial-gradient(#e2e8f0 1.2px, transparent 1.2px),
    linear-gradient(135deg, rgba(255, 23, 107, 0.02) 0%, rgba(234, 88, 12, 0.03) 100%) !important;
  background-size: 24px 24px, 100% 100% !important;
  background-attachment: fixed !important;
}

h1, h2, h3, h4, h5, h6,
.logo-text,
.btn,
.nav-btn,
.category-card h3,
.atolye-baslik,
.test-sonuc-sayi,
.hero h1 {
  font-family: var(--font-gamer) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   2. Header — Aydınlık, Bembeyaz & Fuşya-Turuncu Vurgulu
   ========================================================================== */

.main-header {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 2px solid rgba(255, 23, 107, 0.16) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  padding: 10px 0 !important;
}

/* Logo */
.main-header .logo-text,
.logo-text {
  font-family: 'Baloo 2', system-ui, sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
}

.logo-text .logo-belli {
  color: #FF176B !important;
}

.logo-text .logo-olmaz {
  color: #0097A7 !important;
}

/* Menü Butonları */
.main-header .nav-btn {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  border-radius: 9999px !important;
  transition: all 0.18s ease !important;
}

.main-header .nav-btn:hover {
  background: var(--bo-orange-soft) !important;
  color: var(--bo-orange-text) !important;
}

.main-header .nav-btn i {
  color: var(--bo-brand-primary) !important;
}

.main-header .nav-btn:hover i {
  color: var(--bo-orange-action) !important;
}

/* BelliOlur Geçiş Butonu (Kompakt ve Zarif Kardeş Buton) */
.main-header .nav-gecis-btn {
  background: rgba(0, 151, 167, 0.06) !important;
  border: 1px solid rgba(0, 151, 167, 0.22) !important;
  border-radius: 9999px !important;
  padding: 4px 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  gap: 5px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.main-header .nav-gecis-btn i {
  color: #0097A7 !important;
}

.main-header .nav-gecis-btn:hover {
  background: rgba(0, 151, 167, 0.12) !important;
  border-color: rgba(0, 151, 167, 0.4) !important;
  transform: translateY(-1px);
}

/* Header Aksiyon Butonları */
.main-header .btn-rumuz {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
}

.main-header .btn-rumuz:hover {
  background: var(--bo-orange-soft) !important;
  color: var(--bo-orange-text) !important;
  border-color: #fed7aa !important;
}

.main-header .btn-icon {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.main-header .btn-icon:hover {
  background: var(--bo-brand-primary) !important;
  color: #ffffff !important;
  border-color: var(--bo-brand-primary) !important;
}

/* "Beni Şaşırt" Butonu (Canlı Turuncu) */
.main-header .js-surprise {
  background: linear-gradient(135deg, #ea580c 0%, #ff5722 100%) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
  font-weight: 700 !important;
  border: none !important;
}

.main-header .js-surprise:hover {
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.45) !important;
}

/* ==========================================================================
   3. Hero, Rozetler & Kartlar
   ========================================================================== */

.main-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05) !important;
}

.hero-atolye,
.hero-eglence {
  background: linear-gradient(135deg, #fff1f2 0%, #fff7ed 100%) !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 20px !important;
}

/* Rozet: BelliOlmaz Resmi Ana Rengi (#FF176B) */
.hero-rozet-atolye {
  background: var(--bo-brand-primary) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* İnce Yazı & Linklerde Okunabilirlik Koruması (Parlama Engeli) */
.category-card p,
.atolye-kart small,
.footer-satir,
small,
p {
  color: #475569; /* Koyu slate — asla parlamaz */
}

/* Linkler ve Vurgulu İnce Yazılar */
a.katalog-link:hover,
.nav-link:hover,
.text-orange {
  color: var(--bo-orange-text) !important; /* Doygun koyu turuncu */
  font-weight: 600;
}

/* Oyun Kartları */
.category-card,
.atolye-kart {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.category-card:hover,
.atolye-kart:hover {
  transform: translateY(-4px) !important;
  border-color: var(--bo-brand-primary) !important;
  box-shadow: 0 12px 28px rgba(255, 23, 107, 0.12) !important;
}

.category-count {
  border-radius: 12px !important;
  background: #fdf2f8 !important;
  color: var(--bo-brand-primary) !important;
  font-weight: 700 !important;
}

/* Butonlar: Canlı Turuncu Arka Plan, Beyaz Kalın Metin */
.btn-primary {
  background: linear-gradient(135deg, #ea580c 0%, #ff5722 100%) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.45) !important;
}

/* Liderlik Tablosu & Keşif Paneli */
.leaderboard-container,
.lider-tablosu {
  border-radius: 18px !important;
  border: 1px solid #fce7f3 !important;
  background: #fffdfd !important;
}

/* Açılır Menü (Mega Panel) */
.mega-panel {
  border-radius: 20px !important;
  border: 1px solid #fed7aa !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12) !important;
}

.mega-kart:hover {
  background: #fff7ed !important;
}