@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Theme CSS variables */
  :root {
    --background: #000000;
    --foreground: #ffffff;
    --muted: #52525b;
    --muted-foreground: #a1a1aa;
    --border: #27272a;
    --input: #27272a;
    --primary: #ffffff;
    --primary-foreground: #000000;
    --secondary: #27272a;
    --secondary-foreground: #ffffff;
    --accent: #3f3f46;
    --accent-foreground: #ffffff;
    --destructive: #ef4444;
    --destructive-foreground: #ffffff;
    --ring: #52525b;
  }

  .light {
    --background: #ffffff;
    --foreground: #000000;
    --muted: #f4f4f5;
    --muted-foreground: #71717a;
    --border: #e4e4e7;
    --input: #e4e4e7;
    --primary: #000000;
    --primary-foreground: #ffffff;
    --secondary: #f4f4f5;
    --secondary-foreground: #000000;
    --accent: #f4f4f5;
    --accent-foreground: #000000;
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --ring: #52525b;
    --zinc-50: #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;
  }

  /* Critical gradient definitions - Preloaded for performance */
  .bg-gradient-critical-dark {
    background: linear-gradient(to bottom, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  }
  
  .bg-gradient-critical-light {
    background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 100%);
  }
  
  .bg-gradient-radial-white {
    background: radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.1) 100%);
  }
  
  .bg-gradient-footer-light {
    background: linear-gradient(to top, rgba(244,244,245,0.5) 0%, transparent 100%);
  }
  
  .bg-gradient-footer-dark {
    background: linear-gradient(to top, rgba(24,24,27,0.5) 0%, transparent 100%);
  }

  /* Critical CSS optimizations */
  html {
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
  }
  
  body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-montserrat), system-ui, -apple-system, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
  }
  
  /* Optimize text rendering */
  * {
    box-sizing: border-box;
  }
  
  /* Reduce layout shift */
  img, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
  }
  
  .text-edge-outline {
    -webkit-text-stroke: 1px rgba(255,255,255,0.3);
  }
  
  /* Sayfa yüklenirken background garantisi */
  html, body {
    background-color: var(--background) !important;
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: none;
  }
  
  /* Mobilde sadece anasayfa için scroll'u engelle */
  @media (max-width: 768px) {
    html, body {
      overflow-y: auto;
      height: auto;
      position: relative;
      width: 100%;
    }
  }
  
  /* Optimize animations */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* Blinking cursor animasyonu */
  .animate-blink { animation: blink 1s step-end infinite; }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

  /* Fade-in animasyonu */
  .animate-fade-in { animation: fadeIn 0.7s ease-in both; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* Fade-left animasyonu */
  .animate-fade-left { animation: fadeLeft 0.7s ease-in both; }
  @keyframes fadeLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

  /* Fade-right animasyonu */
  .animate-fade-right { animation: fadeRight 0.7s ease-in both; }
  @keyframes fadeRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
  
  /* Diğer utility animasyonlar buraya eklenebilir */
  
  /* Title animation - Updated to 1s duration */
  .animate-title {
    animation: title 1s ease-out forwards;
  }

  @keyframes title {
    0% {
      line-height: 0%;
      letter-spacing: 0.25em;
      opacity: 0;
    }
    25% {
      line-height: 0%;
      opacity: 0%;
    }
    80% {
      opacity: 100%;
    }
    100% {
      line-height: 100%;
      opacity: 100%;
    }
  }

  /* Divider styles */
  .divider-white {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
    margin: 2rem 0;
  }
}