@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ==========================================
     COLOR SYSTEM (Renklendirme Sistemi)
     ========================================== */
  
  /* Brand Core Colors (Talep Edilen Ana Renkler) */
  --color-primary-hex: #bc1e24;       /* Logo / Kurumsal Kırmızı */
  --color-secondary-light: #e3e3e5;   /* Açık Gri / Gümüş */
  --color-secondary-dark: #070709;    /* Zengin Siyah (Derin Koyu Arka Plan) */
  
  /* Proposed Gold Colors (Uyumlu Gold Alternatifi) */
  --color-gold-hex: #cca43b;          /* Fırçalanmış Gold (Siyah ve kırmızı ile uyumlu lüks ton) */
  --color-gold-hover-hex: #e5be4f;    /* Hover / Parlak Gold */
  --color-gold-muted-hex: #96752a;    /* Mat / Koyu Gold */

  /* RGB Values for Transparent Opacity Utilities (rgba kullanımı için) */
  --color-primary-rgb: 188, 30, 36;
  --color-secondary-dark-rgb: 7, 7, 9;
  --color-gold-rgb: 204, 164, 59;
  --color-white-rgb: 255, 255, 255;
  --color-grey-rgb: 227, 227, 229;

  /* Semantic Interface Colors (Arayüz Renk Rolleri) */
  --color-bg-dark: var(--color-secondary-dark);
  --color-bg-light: #ffffff;
  --color-card-dark: rgba(15, 15, 20, 0.7);
  --color-border-dark: rgba(227, 227, 229, 0.08);
  --color-border-light: rgba(7, 7, 9, 0.08);

  /* Text Colors (Yazı Renkleri) */
  --color-text-primary-dark: #ffffff;
  --color-text-secondary-dark: #b5b5ba;
  --color-text-muted-dark: #707075;
  
  --color-text-primary-light: #070709;
  --color-text-secondary-light: #4c4c52;
  --color-text-muted-light: #88888f;

  /* Helper Status Colors (Durum Renkleri) */
  --color-success: #10b981;
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* ==========================================
     TYPOGRAPHY SYSTEM (Yazı Karakterleri)
     ========================================== */
  
  /* Font Families */
  --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* Font Sizes (Fluid Scale / Okunabilirlik Ölçeği) */
  --text-xs: 0.75rem;    /* 12px - Küçük Etiketler / Kicker */
  --text-sm: 0.875rem;   /* 14px - Açıklamalar / Alt bilgi */
  --text-base: 1rem;     /* 16px - Ana Gövde Metni */
  --text-md: 1.125rem;   /* 18px - Küçük Başlıklar / Kart Metinleri */
  --text-lg: 1.25rem;    /* 20px - Kart Başlıkları */
  --text-xl: 1.5rem;     /* 24px - Alt Bölüm Başlıkları */
  --text-2xl: 1.875rem;  /* 30px - Bölüm Başlıkları (Tablet) */
  --text-3xl: 2.25rem;   /* 36px - Bölüm Başlıkları (Desktop) */
  --text-4xl: 3rem;      /* 48px - Büyük Bölüm Başlıkları */
  --text-5xl: 4rem;      /* 64px - Hero Başlığı (Tablet) */
  --text-6xl: 70px;    /* 88px - Hero Başlığı (Desktop - 100vh için) */

  /* Font Weights (Yazı Ağırlıkları) */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights (Satır Yükseklikleri) */
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --lh-meta: 1.4;

  /* Letter Spacings (Harf Boşlukları) */
  --letter-spacing-kicker: 0.15em;
  --letter-spacing-heading: -0.02em;
  --letter-spacing-body: normal;

  /* ==========================================
     SPACING SYSTEM (Boşluk Ölçüleri - 8px Grid)
     ========================================== */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */
  --space-40: 10rem;   /* 160px */

  /* ==========================================
     LAYOUT DEFAULTS (Düzen Standartları)
     ========================================== */
  --container-max-width: 1320px;
  --container-padding: var(--space-6);
  --section-padding: var(--space-24) 0;
  --header-scroll-offset: 96px;
  --hero-service-link-size: 58px;
  --hero-service-link-icon-size: 28px;

  /* ==========================================
     BORDERS & RADIUS (Köşe Yuvarlama ve Sınırlar)
     ========================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-xxl: 32px;
  --radius-full: 9999px;

  --border-width-thin: 1px;
  --border-width-thick: 2px;

  /* ==========================================
     SHADOWS & EFFECTS (Gölge ve Premium Efektler)
     ========================================== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
  
  /* Brand Glow Shadows (Teknolojik Işıma Efektleri) */
  --shadow-glow-red: 0 0 25px rgba(188, 30, 36, 0.25);
  --shadow-glow-gold: 0 0 25px rgba(204, 164, 59, 0.2);
  --shadow-glow-green: 0 0 15px rgba(16, 185, 129, 0.4);

  /* Glassmorphism Defaults */
  --glass-bg: rgba(7, 7, 9, 0.65);
  --glass-border: rgba(227, 227, 229, 0.08);
  --glass-blur: 16px;

  /* ==========================================
     TRANSITIONS & ANIMATIONS (Geçişler ve Süreler)
     ========================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}