/* ============================================
   AileBağı — Design System (CSS Tokens + Base)
   ============================================ */

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

/* Force Font Awesome Rendering */
i.fas, i.fa-solid, i.fa {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Brand Colors */
  --c-brand-50:  #faf5ff;
  --c-brand-100: #f3e8ff;
  --c-brand-200: #e9d5ff;
  --c-brand-300: #d8b4fe;
  --c-brand-400: #c084fc;
  --c-brand-500: #a855f7;
  --c-brand-600: #9333ea;
  --c-brand-700: #7c3aed;  /* Primary */
  --c-brand-800: #6d28d9;
  --c-brand-900: #4c1d95;

  /* Accent Colors */
  --c-pink-400:  #f472b6;
  --c-pink-500:  #ec4899;
  --c-rose-400:  #fb7185;
  --c-rose-500:  #f43f5e;

  /* Dark Background Palette */
  --c-bg-deepest: #07021a;
  --c-bg-deep:    #0f0523;
  --c-bg-base:    #130835;
  --c-bg-raised:  #1a0f40;
  --c-bg-card:    #1e1248;
  --c-bg-float:   #251556;

  /* Semantic */
  --c-success:    #10b981;
  --c-success-glow: rgba(16, 185, 129, 0.4);
  --c-danger:     #ef4444;
  --c-danger-glow: rgba(239, 68, 68, 0.4);
  --c-warning:    #f59e0b;
  --c-info:       #06b6d4;

  /* Teams */
  --c-team-a:     #7c3aed;
  --c-team-a-glow: rgba(124, 58, 237, 0.5);
  --c-team-b:     #f472b6;
  --c-team-b-glow: rgba(244, 114, 182, 0.5);

  /* Glassmorphism */
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-hover:  rgba(255, 255, 255, 0.07);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-border-active: rgba(255, 255, 255, 0.18);
  --glass-blur:      blur(20px);
  --glass-blur-heavy: blur(40px);

  /* Text */
  --c-text-primary:   #ffffff;
  --c-text-secondary: rgba(255, 255, 255, 0.7);
  --c-text-muted:     rgba(255, 255, 255, 0.45);
  --c-text-disabled:  rgba(255, 255, 255, 0.25);

  /* Gradients */
  --g-hero:       linear-gradient(135deg, #07021a 0%, #1a0533 45%, #2d0a52 100%);
  --g-brand:      linear-gradient(135deg, var(--c-brand-700) 0%, var(--c-pink-500) 100%);
  --g-brand-soft: linear-gradient(135deg, rgba(124,58,237,0.2) 0%, rgba(244,114,182,0.15) 100%);
  --g-card:       linear-gradient(145deg, rgba(30,18,72,0.8) 0%, rgba(37,21,86,0.6) 100%);
  --g-success:    linear-gradient(135deg, #059669 0%, #10b981 100%);
  --g-danger:     linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  --g-team-a:     linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
  --g-team-b:     linear-gradient(135deg, #be185d 0%, #f472b6 100%);
  --g-gold:       linear-gradient(135deg, #92400e, #f59e0b, #fef08a, #f59e0b);

  /* Neon Glows */
  --glow-brand:   0 0 20px rgba(124, 58, 237, 0.5), 0 0 40px rgba(124, 58, 237, 0.2);
  --glow-pink:    0 0 20px rgba(244, 114, 182, 0.5), 0 0 40px rgba(244, 114, 182, 0.2);
  --glow-success: 0 0 20px var(--c-success-glow), 0 0 40px rgba(16, 185, 129, 0.15);
  --glow-danger:  0 0 20px var(--c-danger-glow),  0 0 40px rgba(239, 68, 68, 0.15);

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.5);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-button: 0 4px 20px rgba(124, 58, 237, 0.4);
  --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Border Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* Spacing */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --s-3xl: 64px;

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-base:   0.25s ease;
  --t-slow:   0.4s ease;
  --t-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* Z-Index */
  --z-base:   1;
  --z-card:   10;
  --z-nav:    100;
  --z-modal:  1000;
  --z-toast:  2000;
  --z-loading: 9999;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--c-bg-deepest);
  color: var(--c-text-primary);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ===== TYPOGRAPHY SCALE ===== */
.text-xs   { font-size: 0.75rem;  line-height: 1.4; }
.text-sm   { font-size: 0.875rem; line-height: 1.5; }
.text-base { font-size: 1rem;     line-height: 1.6; }
.text-lg   { font-size: 1.125rem; line-height: 1.5; }
.text-xl   { font-size: 1.25rem;  line-height: 1.4; }
.text-2xl  { font-size: 1.5rem;   line-height: 1.3; }
.text-3xl  { font-size: 1.875rem; line-height: 1.2; }
.text-4xl  { font-size: 2.25rem;  line-height: 1.1; }
.text-5xl  { font-size: 3rem;     line-height: 1.0; }

.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black   { font-weight: 900; }

.text-primary   { color: var(--c-text-primary); }
.text-secondary { color: var(--c-text-secondary); }
.text-muted     { color: var(--c-text-muted); }
.text-brand     { color: var(--c-brand-400); }
.text-pink      { color: var(--c-pink-400); }
.text-success   { color: var(--c-success); }
.text-danger    { color: var(--c-danger); }

/* ===== LAYOUT ===== */
.container {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 var(--s-md);
}

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--g-hero);
}

/* Mobile safe areas */
.safe-top    { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 16px); }

/* ===== ANIMATED BACKGROUND ===== */
.bg-animated {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-animated::before,
.bg-animated::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: bgFloat 8s ease-in-out infinite alternate;
}

.bg-animated::before {
  width: 400px;
  height: 400px;
  background: var(--c-brand-700);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.bg-animated::after {
  width: 300px;
  height: 300px;
  background: var(--c-pink-500);
  bottom: -80px;
  right: -80px;
  animation-delay: -4s;
}

@keyframes bgFloat {
  from { transform: translate(0, 0) scale(1); opacity: 0.12; }
  to   { transform: translate(30px, 20px) scale(1.1); opacity: 0.2; }
}

/* ===== STARS BACKGROUND ===== */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.3); }
}

/* ===== GLASSMORPHISM ===== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.glass-heavy {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
  background: var(--g-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }