/* ============================================================
   WORLD MEMORY TEST — Ana CSS Sistemi
   Tek dosya, tüm sayfalar bu dosyayı kullanır
   ============================================================ */

/* ── Google Fonts (Neumorphism: Plus Jakarta Sans + DM Sans + Fraunces) ──
   Fraunces HYBRID UPGRADE: Sadece hero başlıkları + analysis card'da kullanılır.
   Geri almak: Fraunces satırını sil, style.css'te başka yerde geçmez. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── CSS Değişkenleri — Açık Tema (Neumorphism referans) ──── */
:root {
  /* Marka renkleri (referans sadık: mor/turkuaz) */
  --brand-primary:   #6C63FF;   /* accent (violet) */
  --brand-secondary: #38B2AC;   /* secondary (teal) */
  --brand-accent:    #8B84FF;   /* accent light */

  /* Neumorphism yüzey (light) */
  --bg-page:         #E0E5EC;
  --bg-card:         #E0E5EC;   /* == bg-page (kritik kural) */
  --bg-nav:          #E0E5EC;
  --bg-hero:         #E0E5EC;   /* düz taban, gradient yok */
  --bg-input:        #E0E5EC;
  --bg-modal:        rgba(58,72,90,0.35);

  --text-primary:    #3D4852;
  --text-secondary:  #6B7280;
  --text-muted:      #97A0AD;
  --text-on-brand:   #ffffff;
  --text-on-accent:  #ffffff;

  --border-color:    transparent;   /* neumo sınır kullanmaz */
  --border-focus:    #6C63FF;

  /* Neumorphism gölge paleti (LIGHT) */
  --neu-light: rgba(255,255,255,0.60);
  --neu-dark:  rgba(163,177,198,0.60);

  --neu-1:  10px 10px 22px var(--neu-dark), -10px -10px 22px var(--neu-light);          /* extruded default — güçlü 3D */
  --neu-2:  14px 14px 30px rgba(163,177,198,0.75), -14px -14px 30px rgba(255,255,255,0.85); /* hover — daha da belirgin */
  --neu-in: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light);    /* pressed */
  --neu-input: inset 5px 5px 10px rgba(163,177,198,0.55), inset -5px -5px 10px rgba(255,255,255,0.65);
  --neu-input-focus: inset 5px 5px 10px rgba(163,177,198,0.55), inset -5px -5px 10px rgba(255,255,255,0.65), 0 0 0 3px rgba(108,99,255,0.28);
  --neu-deep: 16px 16px 36px var(--neu-dark), -16px -16px 36px var(--neu-light);        /* hero / large */

  /* Legacy shadow alias'ları — eski bileşenler zarar görmesin */
  --shadow-sm:   var(--neu-1);
  --shadow-md:   var(--neu-2);
  --shadow-lg:   var(--neu-deep);
  --shadow-card: var(--neu-1);

  /* Köşe yuvarlakları */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Geçişler (referans: 300ms ease-out) */
  --transition: 0.3s ease-out;
  --transition-slow: 0.4s ease-out;

  /* Navbar yüksekliği */
  --navbar-h: 64px;

  /* Tema adı (JS için) */
  --theme-name: 'light';
}

/* ============================================================
   MOTION TOKENS — Tüm Site İçin Unified Motion Modeli
   (Jakub Krehel primary — production polish)
   ============================================================ */
:root {
  /* ── Duration ── */
  --m-instant:    100ms;  /* Cursor blink (Major counter) */
  --m-fast:       180ms;  /* Button press feedback, micro */
  --m-base:       250ms;  /* Default UI transitions */
  --m-slow:       350ms;  /* Cards, hero elements */
  --m-deliberate: 500ms;  /* Page-level reveals */

  /* ── Easing ── */
  --m-out:         cubic-bezier(.22, 1, .36, 1);  /* PRIMARY — enter/exit */
  --m-in-out:      cubic-bezier(.65, 0, .35, 1);  /* State changes */
  --m-soft-spring: cubic-bezier(.2, .8, .2, 1);   /* Cards, playful */
  --m-linear:      linear;                          /* Continuous loops */

  /* ── Distance (Lift) ── */
  --m-lift-sm: -4px;   /* Buttons, chips, nav items */
  --m-lift-md: -8px;   /* Small cards */
  --m-lift-lg: -10px;  /* Featured cards (edepola.com) */
  --m-lift-xl: -14px;  /* Hero elements */

  /* ── Scale ── */
  --m-press: 0.97;  /* Button :active feedback */
  --m-grow:  1.02;  /* Rare, hero CTA only */

  /* ── Composite — Kullanıma hazır ── */
  --transition-card:  transform var(--m-slow) var(--m-soft-spring),
                      box-shadow var(--m-slow) var(--m-out),
                      border-color var(--m-slow) var(--m-out);
  --transition-button: transform var(--m-base) var(--m-out),
                       box-shadow var(--m-base) var(--m-out);
  --transition-input:  border-color var(--m-base) var(--m-out),
                       box-shadow var(--m-base) var(--m-out);
}

/* ============================================================
   PROTECTED ANIMATIONS — Uzay/Sayı animasyonları
   Bu keyframe'ler motion system'den muaf tutulur.
   Dokunma: hc-pulse-dot, hc-scroll-bounce, hc-scroll-wheel,
            hc-fade-in-up, hc-mc-shake, hc-mc-blink,
            hybridLogoFloat, hybridPulse, hybridStatIn
   Three.js parçacık ağı (JS tarafı) da korunur.
   ============================================================ */

/* ============================================================
   MOTION HELPER CLASSES — Utility'ler (sayfa HTML'inde kullan)
   ============================================================ */

/* Lift helpers — translateY için */
.m-lift-sm { transition: transform var(--m-slow) var(--m-soft-spring); }
.m-lift-sm:hover { transform: translateY(var(--m-lift-sm)); }

.m-lift-md { transition: transform var(--m-slow) var(--m-soft-spring); }
.m-lift-md:hover { transform: translateY(var(--m-lift-md)); }

.m-lift-lg { transition: var(--transition-card); }
.m-lift-lg:hover { transform: translateY(var(--m-lift-lg)); }

.m-lift-xl { transition: transform var(--m-deliberate) var(--m-soft-spring); }
.m-lift-xl:hover { transform: translateY(var(--m-lift-xl)); }

/* Press feedback — button :active */
.m-press {
  transition: var(--transition-button);
}
.m-press:active {
  transform: scale(var(--m-press));
}

/* Glow on hover — özellikle hero CTA'lar için */
.m-glow {
  transition: box-shadow var(--m-slow) var(--m-out);
}

/* Stagger enter — sayfa yüklendiğinde sıralı giriş (1-5 item) */
.m-stagger-in {
  animation: m-stagger-in var(--m-deliberate) var(--m-out) backwards;
}
.m-stagger-in:nth-child(1) { animation-delay: 0ms; }
.m-stagger-in:nth-child(2) { animation-delay: 80ms; }
.m-stagger-in:nth-child(3) { animation-delay: 160ms; }
.m-stagger-in:nth-child(4) { animation-delay: 240ms; }
.m-stagger-in:nth-child(5) { animation-delay: 320ms; }
.m-stagger-in:nth-child(6) { animation-delay: 400ms; }
.m-stagger-in:nth-child(7) { animation-delay: 480ms; }
.m-stagger-in:nth-child(8) { animation-delay: 560ms; }

@keyframes m-stagger-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion: utility animations kapatılır */
@media (prefers-reduced-motion: reduce) {
  .m-lift-sm,
  .m-lift-md,
  .m-lift-lg,
  .m-lift-xl,
  .m-press,
  .m-glow,
  .m-stagger-in {
    transition: none !important;
    animation: none !important;
  }
  .m-stagger-in {
    opacity: 1;
    transform: none;
  }
}

/* ── Karanlık Tema ────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page:         #292D38;
  --bg-card:         #292D38;
  --bg-nav:          #292D38;
  --bg-hero:         #292D38;
  --bg-input:        #292D38;
  --bg-modal:        rgba(0,0,0,0.6);

  --text-primary:    #E2E6EF;
  --text-secondary:  #A6AEC0;
  --text-muted:      #6E7688;
  --text-on-brand:   #ffffff;
  --text-on-accent:  #ffffff;

  --border-color:    transparent;
  --border-focus:    #8B84FF;

  /* Neumorphism gölge paleti (DARK) */
  --neu-light: rgba(60,66,84,0.55);   /* base'ten açık slate */
  --neu-dark:  rgba(0,0,0,0.55);

  --neu-1:  10px 10px 22px var(--neu-dark), -10px -10px 22px var(--neu-light);
  --neu-2:  14px 14px 30px rgba(0,0,0,0.65), -14px -14px 30px rgba(66,73,92,0.65);
  --neu-in: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light);
  --neu-input: inset 5px 5px 10px rgba(0,0,0,0.5), inset -5px -5px 10px rgba(60,66,84,0.5);
  --neu-input-focus: inset 5px 5px 10px rgba(0,0,0,0.5), inset -5px -5px 10px rgba(60,66,84,0.5), 0 0 0 3px rgba(139,132,255,0.35);
  --neu-deep: 16px 16px 36px var(--neu-dark), -16px -16px 36px var(--neu-light);

  --shadow-sm: var(--neu-1); --shadow-md: var(--neu-2);
  --shadow-lg: var(--neu-deep); --shadow-card: var(--neu-1);

  --theme-name: 'dark';
}

/* Dark tema motion override: gölgeler derinleşir */
[data-theme="dark"] {
  /* Motion tokens değişmez (süreler/easing tutarlı kalır) */
  /* Sadece gölge yoğunluğu tema-uyumlu olur — zaten neu shadow'lar handle ediyor */
}

/* ── Renk Temaları (Devre Dışı — Strict Referans) ─────────── */
[data-color] {
  --brand-primary:   #6C63FF;
  --brand-secondary: #38B2AC;
  --brand-accent:    #8B84FF;
  --bg-hero:         var(--bg-page);
}

/* ── HT Kutu Önizleme (admin renk paneli — temel kural korunur) */
.ht-box-preview {
  aspect-ratio:1;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem;font-weight:900;
  border:2px solid rgba(255,255,255,.2);background:var(--ht-bg,#222238);
}

/* ── body.neu: Neumorphism tasarım sistemi ────────────────── */
/* home.php + landing sayfaları bu sınıfı alır; oyun/admin korunur */

body.neu {
  --bg-page: #E0E5EC;
}
body.neu[data-theme="dark"] {
  --bg-page: #292D38;
}

/* Yellow top border: neu sayfalarda gizle */
body.neu::before { display: none; }

/* Hero: orijinal renkli gradient korunur — neu sadece shadow/text override eder */
body.neu [class*="page-hero--"] {
  --ph-accent: var(--brand-primary);
}

/* Floating emojis: gradient hero'da standart opacity (.08) korunur */
body.neu .page-hero__float span {
  opacity: .10;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
}

/* ── Card ─────────────────────────────────────────────────── */
body.neu .card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--neu-1);
  transition: box-shadow var(--transition), transform var(--transition);
}
body.neu .card:hover {
  box-shadow: var(--neu-2);
  transform: translateY(-3px);
}
body.neu .card-sm { border-radius: var(--radius-lg); }
body.neu .card-lg { border-radius: var(--radius-2xl); }
body.neu .card-accent {
  border: none;
  box-shadow: var(--neu-1), inset 0 0 0 2px rgba(108,99,255,0.35);
}

/* ── Buttons ──────────────────────────────────────────────── */
body.neu .btn {
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
}

/* Primary / Accent / Hero: solid accent + extruded */
body.neu .btn-primary,
body.neu .btn-accent,
body.neu .btn-hero,
body.neu .btn-hero-primary {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: var(--neu-1);
}
body.neu .btn-primary:hover,
body.neu .btn-accent:hover,
body.neu .btn-hero:hover,
body.neu .btn-hero-primary:hover {
  box-shadow: var(--neu-2);
  transform: translateY(-2px);
}
body.neu .btn-primary:active,
body.neu .btn-accent:active,
body.neu .btn-hero:active,
body.neu .btn-hero-primary:active {
  box-shadow: var(--neu-in);
  transform: translateY(0);
  background: #5b52e6;
}

/* Secondary / Ghost / Outline: monochrome extruded */
body.neu .btn-secondary,
body.neu .btn-ghost,
body.neu .btn-outline {
  background: var(--bg-card);
  color: var(--text-primary);
  border: none;
  box-shadow: var(--neu-1);
}
body.neu .btn-secondary:hover,
body.neu .btn-ghost:hover,
body.neu .btn-outline:hover {
  box-shadow: var(--neu-2);
  color: var(--text-primary);
}
body.neu .btn-secondary:active,
body.neu .btn-ghost:active,
body.neu .btn-outline:active {
  box-shadow: var(--neu-in);
}

/* Theme toggle: neu yüzeyde inset/extruded */
body.neu .btn-theme-toggle {
  background: var(--bg-card);
  color: var(--brand-primary);
  box-shadow: var(--neu-1);
}
body.neu .btn-theme-toggle:hover {
  box-shadow: var(--neu-2);
  transform: none;
}
body.neu .btn-theme-toggle:active {
  box-shadow: var(--neu-in);
}

/* ── Forms ────────────────────────────────────────────────── */
body.neu .form-input,
body.neu .form-select,
body.neu .form-textarea {
  background: var(--bg-input);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--neu-input);
  color: var(--text-primary);
}
body.neu .form-input:focus,
body.neu .form-select:focus,
body.neu .form-textarea:focus {
  outline: none;
  box-shadow: var(--neu-input-focus);
}

/* ── Badges ───────────────────────────────────────────────── */
body.neu .badge {
  box-shadow: var(--neu-in);
  border: none;
}
body.neu .badge-primary {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: var(--neu-1);
}
body.neu .badge-accent {
  background: var(--brand-accent);
  color: #fff;
  box-shadow: var(--neu-1);
}
body.neu .badge-warning {
  background: var(--brand-secondary);
  color: #fff;
  box-shadow: var(--neu-1);
}
body.neu .badge-muted {
  background: var(--bg-card);
  color: var(--text-secondary);
  box-shadow: var(--neu-in);
}

/* ── Alerts ───────────────────────────────────────────────── */
body.neu .alert {
  border: none;
  box-shadow: var(--neu-1);
}

/* ── Hero ─────────────────────────────────────────────────── */
/* Orijinal gradient hero korunur (style.css .page-hero--{variant}).
   neu'da sadece daha güçlü shadow + pill button glow eklenir. */
body.neu .page-hero {
  box-shadow: 0 18px 56px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16);
}
body.neu .page-hero__cta {
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}
body.neu .page-hero__cta:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.42);
}
/* Ghost CTA: gradient hero üstünde yarı saydam beyaz (eski davranış) */
body.neu .page-hero__cta.is-ghost {
  background: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.neu .page-hero__cta.is-ghost:hover {
  background: rgba(255,255,255,.26);
  color: #fff;
}

/* ── Navbar (neu sayfada renkleri yumuşat) ───────────────── */
body.neu .navbar {
  background: var(--bg-nav);
  box-shadow: var(--neu-1);
  border: none;
}
body.neu .navbar-nav a {
  border-radius: var(--radius-md);
}
body.neu .navbar-nav a:hover,
body.neu .navbar-nav a.active {
  box-shadow: var(--neu-in);
  background: transparent;
  color: var(--brand-primary);
}

/* ── Footer ───────────────────────────────────────────────── */
body.neu .footer {
  background: var(--bg-page);
  box-shadow: none;
  border-top: 1px solid rgba(0,0,0,0.04);
}
body.neu[data-theme="dark"] .footer {
  border-top-color: rgba(255,255,255,0.04);
}
body.neu .footer-social a {
  background: var(--bg-card);
  box-shadow: var(--neu-1);
  border: none;
  color: var(--brand-primary);
}
body.neu .footer-social a:hover {
  box-shadow: var(--neu-2);
}

/* ── Color swatch UI (admin tema paneli) — neu sayfada gizle */
body.neu .theme-color-swatches,
body.neu .color-swatches,
body.neu [data-color-swatches] {
  display: none !important;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.neu * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Reset & Temel ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  padding-top: var(--navbar-h);
  transition: background var(--transition-slow), color var(--transition);
}

/* ── Sarı Border (marka imzası) ───────────────────────────── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand-secondary);
  z-index: 1000;
}

/* ── Tipografi ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', sans-serif;
  color: var(--text-primary);
  font-weight: 800;
  line-height: 1.25;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p  { color: var(--text-secondary); line-height: 1.7; }
a  { color: var(--brand-accent); text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.8; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 4px; left: 0; right: 0;
  height: var(--navbar-h);
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  z-index: 900;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  transition: background var(--transition-slow), border-color var(--transition);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-brand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.navbar-brand-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: var(--brand-primary);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Nav menü */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 0 8px;
}
.navbar-nav > li { min-width: 0; flex-shrink: 1; }

.navbar-nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
  min-width: 0;
}

.navbar-nav a:hover {
  background: var(--bg-input);
  color: var(--text-primary);
  opacity: 1;
}

.navbar-nav a.active {
  background: var(--brand-primary);
  color: #fff;
}

/* "More" trigger nav'ın dışında, navbar-flex'in bir parçası */
.nav-more { position: relative; flex-shrink: 0; }

/* Navbar sağ kontroller */
.navbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Dil seçici */
.lang-select {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  appearance: none;
  -webkit-appearance: none;
  min-width: 100px;
}

.lang-select:focus {
  outline: none;
  border-color: var(--border-focus);
}

.lang-select-wrapper {
  position: relative;
}

.lang-select-wrapper::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Gece/Gündüz butonu */
.btn-theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--brand-primary);
  color: var(--brand-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}

.btn-theme-toggle:hover {
  transform: scale(1.08);
}

/* ── Kartlar (edepola.com birebir değerleri) ──────────────── */
.card {
  background: var(--bg-card);
  border-radius: 22px;
  border: 1px solid rgba(23, 32, 44, 0.08);
  box-shadow: 0 18px 45px rgba(31, 36, 50, 0.08);
  padding: 28px;
  transition: var(--transition-card);
}

.card:hover {
  box-shadow: 0 28px 60px rgba(31, 36, 50, 0.14);
  border-color: rgba(23, 32, 44, 0.14);
  transform: translateY(var(--m-lift-lg));
}

.card-sm { padding: 16px; border-radius: var(--radius-md); }
.card-lg { padding: 36px; border-radius: 30px; }

/* Vurgulu kart */
.card-accent {
  border-color: var(--brand-accent);
  border-width: 2px;
}

/* Tıklanabilir kart — link gibi davranır (örn. dashboard, blog listesi) */
a.card:hover { transform: translateY(-10px); }

/* ── Hero Bölümü ──────────────────────────────────────────── */
.hero {
  background: var(--bg-hero);
  border-radius: var(--radius-xl);
  padding: 72px 48px 68px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero p { color: rgba(255,255,255,0.85); }

/* ── Butonlar ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--brand-primary);
  color: #fff;
}

.btn-secondary {
  background: var(--brand-secondary);
  color: var(--brand-primary);
}

.btn-accent {
  background: var(--brand-accent);
  color: #fff;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--brand-primary);
  color: var(--brand-primary);
  box-shadow: 4px 4px 10px rgba(163,177,198,0.40), -4px -4px 10px rgba(255,255,255,0.75);
}

.btn-ghost {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: 4px 4px 10px rgba(163,177,198,0.35), -4px -4px 10px rgba(255,255,255,0.75);
}

.btn-ghost:hover {
  border-color: var(--brand-accent);
  box-shadow: 6px 6px 14px rgba(163,177,198,0.50), -6px -6px 14px rgba(255,255,255,0.90);
}

.btn-hero {
  background: #fff;
  color: var(--brand-primary);
  padding: 14px 36px;
  font-size: 1rem;
  border-radius: var(--radius-pill);
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-sm { padding: 7px 14px; font-size: 0.8rem; }

/* ── Form Elemanları ──────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(74,158,255,0.15);
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── Layout Konteynerleri ─────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-sm { max-width: 768px; margin: 0 auto; padding: 0 20px; }
.container-lg { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.page-content {
  padding: 28px 0 60px;
}

/* Grid sistemleri */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Flex yardımcıları */
.flex       { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

/* ── AI Chat Widget ───────────────────────────────────────── */
.ai-chat-bubble {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 850;
}

.ai-chat-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 3px solid var(--brand-secondary);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.ai-chat-btn:hover { transform: scale(1.1); }

.ai-chat-window {
  position: absolute;
  bottom: 68px;
  left: 0;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.9) translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: bottom left;
  max-height: 480px;
}

.ai-chat-window.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

.ai-chat-header {
  padding: 14px 16px;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}

.ai-msg {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  line-height: 1.5;
}

.ai-msg.bot {
  background: var(--bg-input);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

.ai-msg.user {
  background: var(--brand-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.ai-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
}

.ai-chat-input-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
}

.ai-chat-input-row input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.ai-chat-input-row button {
  padding: 8px 14px;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  transition: opacity var(--transition);
}

.ai-chat-input-row button:hover { opacity: 0.85; }

/* ── Badge & Etiketler ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
}

.badge-primary { background: var(--brand-primary); color: #fff; }
.badge-accent   { background: var(--brand-accent); color: #fff; }
.badge-warning  { background: var(--brand-secondary); color: var(--brand-primary); }
.badge-muted    { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); }

/* ── Tablo ────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

thead tr {
  background: var(--brand-primary);
  color: #fff;
}

thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition);
}

tbody tr:last-child { border-bottom: none; }

tbody tr:hover { background: var(--bg-input); }

tbody td { padding: 11px 16px; color: var(--text-primary); }

/* ── Alert Mesajları ──────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.alert-warn    { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

[data-theme="dark"] .alert-success { background: #064e3b; color: #6ee7b7; border-color: #065f46; }
[data-theme="dark"] .alert-error   { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; }
[data-theme="dark"] .alert-info    { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; }
[data-theme="dark"] .alert-warn    { background: #78350f; color: #fcd34d; border-color: #92400e; }

/* ── Skor & İstatistik Kartları ───────────────────────────── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  text-align: center;
  transition: box-shadow var(--transition), background var(--transition-slow);
}

.stat-number {
  font-family: 'Nunito', sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--brand-primary);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-modal);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  padding: 28px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform var(--transition);
}

.modal-overlay.open .modal { transform: scale(1); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

/* ── Progress / Oyun Elemanları ───────────────────────────── */
.progress-bar {
  height: 8px;
  background: var(--border-color);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: var(--radius-pill);
  transition: width 0.5s ease;
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.breadcrumb a { color: var(--brand-accent); }
.breadcrumb-sep { opacity: 0.4; }

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  padding: 28px 0;
  margin-top: 60px;
  transition: background var(--transition-slow);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-text { font-size: 0.82rem; color: var(--text-muted); }
.footer-links { display: flex; gap: 16px; }
.footer-links a { font-size: 0.82rem; color: var(--text-muted); }
.footer-links a:hover { color: var(--brand-accent); opacity: 1; }

/* ── Yardımcı Sınıflar ────────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--text-muted); }
.text-primary { color: var(--brand-primary); }
.text-accent  { color: var(--brand-accent); }
.text-sm      { font-size: 0.85rem; }
.text-xs      { font-size: 0.75rem; }
.font-bold    { font-weight: 700; }
.font-black   { font-weight: 900; }

.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── Mobil ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar-brand-text {
    font-size: 1.05rem !important;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 900 !important;
  }
  .navbar-brand { flex-shrink: 0; }
  .navbar-nav { padding: 0 8px; }
  .navbar-nav a { padding: 7px 10px; font-size: 0.8rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .hero { padding: 40px 20px; }

  .ai-chat-window { width: 280px; }

  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .navbar { padding: 0 12px; gap: 8px; }
  .lang-select { min-width: 80px; font-size: 0.8rem; }
  .container { padding: 0 14px; }
  .card { padding: 16px; }
}

/* ── Animasyonlar ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.animate-fadeInUp { animation: fadeInUp 0.4s ease both; }
.animate-pulse     { animation: pulse 2s ease infinite; }

/* Staggered kartlar */
.card-grid-animate .card:nth-child(1) { animation: fadeInUp 0.4s 0.05s ease both; }
.card-grid-animate .card:nth-child(2) { animation: fadeInUp 0.4s 0.10s ease both; }
.card-grid-animate .card:nth-child(3) { animation: fadeInUp 0.4s 0.15s ease both; }
.card-grid-animate .card:nth-child(4) { animation: fadeInUp 0.4s 0.20s ease both; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ══════════════════════════════════════════════════════
   GLOBAL UNIFIED HERO — Tüm sayfalarda aynı boyut/stil
   Hatırlama Testi referans alınarak hazırlanmıştır
   ══════════════════════════════════════════════════════ */

.page-hero {
  padding: 52px 28px 46px;
  text-align: center;
  background: var(--ph-color, var(--bg-hero));
  border-radius: 20px;
  margin: 0 auto 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14);
  min-height: 260px;
  max-height: 320px;
  max-width: 1120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.14), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.08), transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.page-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  padding: 5px 14px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(4px);
}

.page-hero__title {
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  font-weight: 900;
  margin: 0 0 10px;
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  letter-spacing: -.01em;
  line-height: 1.18;
}

.page-hero__sub {
  font-size: clamp(.96rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.88);
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 620px;
  line-height: 1.55;
}

.page-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--ph-accent, #1e3a8a);
  font-size: .92rem;
  font-weight: 800;
  padding: 11px 26px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  margin-top: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s;
  position: relative;
  z-index: 1;
}
.page-hero__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  color: var(--ph-accent, #1e3a8a);
}

.page-hero__float {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.page-hero__float span {
  position: absolute;
  font-size: clamp(1rem, 2.5vw, 1.7rem);
  opacity: .08;
  animation: pageHeroFloat var(--dur, 12s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}
@keyframes pageHeroFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-16px) rotate(6deg); }
}

/* Her sayfa için renk — Ortak tek tip ölçüye uygun */
.page-hero--home      { --ph-color: linear-gradient(135deg,#0b1c4d 0%,#1e3a8a 45%,#0ea5e9 100%); --ph-accent:#1e3a8a; }
.page-hero--memory    { --ph-color: linear-gradient(135deg,#1e3a8a 0%,#2563eb 45%,#1d4ed8 100%); --ph-accent:#1d4ed8; }
.page-hero--hatirlama { --ph-color: linear-gradient(135deg,#4c1d95 0%,#7c3aed 45%,#5b21b6 100%); --ph-accent:#4c1d95; }
.page-hero--major     { --ph-color: linear-gradient(135deg,#7c1a4a 0%,#c0397b 45%,#9d174d 100%); --ph-accent:#9d174d; }
.page-hero--major_anket{ --ph-color: linear-gradient(135deg,#92400e 0%,#f59e0b 45%,#b45309 100%); --ph-accent:#b45309; }
.page-hero--lingua    { --ph-color: linear-gradient(135deg,#0c4a6e 0%,#0284c7 45%,#075985 100%); --ph-accent:#0c4a6e; }
.page-hero--galeri    { --ph-color: linear-gradient(135deg,#134e4a 0%,#14b8a6 45%,#0d9488 100%); --ph-accent:#0d9488; }
.page-hero--iq        { --ph-color: linear-gradient(135deg,#064e3b 0%,#059669 45%,#047857 100%); --ph-accent:#064e3b; }
.page-hero--leaderboard{ --ph-color: linear-gradient(135deg,#1a1a2e 0%,#6d28d9 45%,#4c1d95 100%); --ph-accent:#4c1d95; }
.page-hero--blog      { --ph-color: linear-gradient(135deg,#1e1b4b 0%,#4f46e5 45%,#3730a3 100%); --ph-accent:#3730a3; }
.page-hero--about     { --ph-color: linear-gradient(135deg,#78350f 0%,#d97706 45%,#92400e 100%); --ph-accent:#92400e; }
.page-hero--contact   { --ph-color: linear-gradient(135deg,#134e4a 0%,#0d9488 45%,#0f766e 100%); --ph-accent:#0f766e; }
.page-hero--privacy   { --ph-color: linear-gradient(135deg,#1f2937 0%,#475569 45%,#334155 100%); --ph-accent:#1f2937; }
.page-hero--terms     { --ph-color: linear-gradient(135deg,#0c4a6e 0%,#0369a1 45%,#075985 100%); --ph-accent:#075985; }

@media (max-width: 768px) {
  .page-hero { padding: 38px 18px 34px; border-radius: 16px; min-height: 200px; max-height: 260px; }
  .page-hero__title { font-size: clamp(1.15rem, 5.5vw, 1.7rem); }
  .page-hero__sub { font-size: .92rem; }
  .page-hero__cta { font-size: .82rem; padding: 9px 20px; margin-top: 16px; }
}