@import "tailwindcss";
@plugin "@tailwindcss/typography";

:root {
  --background: #ffffff;
  --foreground: #0f172a;

  /* Kovak brand palette (WP'den aktarıldı) */
  --navy: #043e8c;          /* primary deep navy — CTA */
  --navy-700: #032d66;
  --navy-50: #eff6ff;
  --sky: #3b82f6;           /* primary bright blue — accent */
  --sky-600: #2563eb;
  --sky-50: #dbeafe;

  /* Dark hero gradient stops */
  --hero-dark-1: #0f172a;
  --hero-dark-2: #1e293b;
  --hero-dark-3: #334155;

  --muted: #64748b;
  --border: #e2e8f0;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-navy: var(--navy);
  --color-navy-700: var(--navy-700);
  --color-navy-50: var(--navy-50);
  --color-sky-brand: var(--sky);
  --color-sky-brand-600: var(--sky-600);
  --color-sky-brand-50: var(--sky-50);
  --color-muted-foreground: var(--muted);
  --color-border-soft: var(--border);
  --font-sans: var(--font-poppins);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-poppins), Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; }

.hero-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(4, 62, 140, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
}

.gradient-text {
  background: linear-gradient(135deg, var(--navy) 0%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-dark {
  background: linear-gradient(135deg, var(--hero-dark-1) 0%, var(--hero-dark-2) 50%, var(--hero-dark-3) 100%);
}

.hero-glow::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  animation: hero-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hero-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.animate-float {
  animation: float-slow 6s ease-in-out infinite;
}