/* =========================================================
   VARIABLES.CSS
   Site geneli renk paleti, tipografi, spacing, breakpoint
   değişkenleri. Diğer tüm CSS dosyalarından ÖNCE yüklenir.
   ========================================================= */

:root {
	/* Marka renkleri */
	--color-primary: #2075D7;
	--color-primary-dark: #1a5cad;
	--color-primary-light: #eaf3fd;
	--color-accent: #ff5a5f;

	/* Nötr / arka plan renkleri */
	--color-bg: #f4f6f9;
	--color-surface: #ffffff;
	--color-border: #e3e7ee;
	--color-text: #1f2430;
	--color-text-muted: #6b7280;
	--color-text-inverse: #ffffff;

	/* Footer koyu zemin */
	--color-footer-bg: #14181f;
	--color-footer-text: #b8bfc9;
	--color-footer-heading: #ffffff;

	/* Tipografi */
	--font-base: 'Segoe UI', 'Inter', system-ui, -apple-system, Arial, sans-serif;
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.375rem;
	--fs-xl: 1.75rem;
	--fs-xxl: 2.25rem;

	/* Boşluk skalası */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2.5rem;
	--space-xxl: 4rem;

	/* Kenar yuvarlama / gölge */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--shadow-sm: 0 1px 3px rgba(20, 24, 31, 0.08);
	--shadow-md: 0 6px 20px rgba(20, 24, 31, 0.10);
	--shadow-hover: 0 10px 24px rgba(32, 117, 215, 0.25);

	/* Layout */
	--container-width: 1240px;
	--header-height: 76px;
	--transition-base: 0.2s ease;
}