/* ============================================================
   SEMBOL ÇELİK — Design System Variables
   ============================================================
   Marka Konsepti : Güvenlik · Dayanıklılık · Profesyonellik
   Ana Renk       : Kurumsal Mavi #005eb8
   İkincil Renk   : Endüstriyel Çelik Gri Tonları
   Tipografi      : Montserrat (Başlık) / Inter (Gövde)
   Spacing Tabanı : 8 px
   ============================================================ */

/* —————————————————————————————————————————————
   0. GOOGLE FONTS IMPORT
   ————————————————————————————————————————————— */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap");

:root {
  /* =========================================================
     1. RENK PALETİ — ANA RENK (Primary Blue)
        Tint (+beyaz) ➜ Shade (+siyah)
     ========================================================= */
  --color-primary-50: #e6f0fa; /* En açık tint  */
  --color-primary-100: #b3d4f0;
  --color-primary-200: #80b8e6;
  --color-primary-300: #4d9cdc;
  --color-primary-400: #1a80d2;
  --color-primary-500: #005eb8; /* ★ Ana kurumsal mavi */
  --color-primary-600: #004fa0;
  --color-primary-700: #004088;
  --color-primary-800: #003170;
  --color-primary-900: #002258;
  --color-primary-950: #001840; /* En koyu shade */

  /* =========================================================
     2. RENK PALETİ — İKİNCİL RENK (Steel Grey)
        Endüstriyel çelik tonları
     ========================================================= */
  --color-steel-50: #f0f2f4;
  --color-steel-100: #d9dde2;
  --color-steel-200: #c2c8d0;
  --color-steel-300: #abb3be;
  --color-steel-400: #949eac;
  --color-steel-500: #7d8a9a; /* Orta çelik grisi */
  --color-steel-600: #6a7585;
  --color-steel-700: #566170;
  --color-steel-800: #434d5b;
  --color-steel-900: #303946;
  --color-steel-950: #1e2530;

  /* =========================================================
     3. RENK PALETİ — NÖTR GRİ TONLARI (Neutral 0–1000)
     ========================================================= */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-150: #eeeeee;
  --color-neutral-200: #e5e5e5;
  --color-neutral-250: #dcdcdc;
  --color-neutral-300: #d4d4d4;
  --color-neutral-350: #c4c4c4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-450: #8e8e8e;
  --color-neutral-500: #737373;
  --color-neutral-550: #636363;
  --color-neutral-600: #525252;
  --color-neutral-650: #474747;
  --color-neutral-700: #404040;
  --color-neutral-750: #363636;
  --color-neutral-800: #262626;
  --color-neutral-850: #1f1f1f;
  --color-neutral-900: #171717;
  --color-neutral-950: #0f0f0f;
  --color-neutral-1000: #000000;

  /* =========================================================
     4. VURGU / AKSAN RENGİ (Accent)
        Altın / Bronz — güvenlik ve prestij vurgusu
     ========================================================= */
  --color-accent-50: #fdf6e8;
  --color-accent-100: #fae7b8;
  --color-accent-200: #f6d888;
  --color-accent-300: #f2c958;
  --color-accent-400: #eeba28;
  --color-accent-500: #d4a017; /* ★ Ana aksan — altın */
  --color-accent-600: #b38714;
  --color-accent-700: #926e11;
  --color-accent-800: #71550d;
  --color-accent-900: #503c0a;
  --color-accent-950: #352806;

  /* =========================================================
     5. SEMANTİK RENKLER
        Endüstriyel palete uyumlu tonlar
     ========================================================= */

  /* — Başarı (Success) — Koyu zümrüt yeşili */
  --color-success-50: #e8f5ec;
  --color-success-100: #b9e2c5;
  --color-success-200: #8acf9e;
  --color-success-300: #5bbc77;
  --color-success-400: #2ca950;
  --color-success-500: #1a8a3e; /* ★ */
  --color-success-600: #167534;
  --color-success-700: #12602b;
  --color-success-800: #0e4b21;
  --color-success-900: #0a3618;

  /* — Uyarı (Warning) — Endüstriyel amber */
  --color-warning-50: #fff8e6;
  --color-warning-100: #ffe9b3;
  --color-warning-200: #ffda80;
  --color-warning-300: #ffcb4d;
  --color-warning-400: #ffbc1a;
  --color-warning-500: #e6a200; /* ★ */
  --color-warning-600: #c48a00;
  --color-warning-700: #a27200;
  --color-warning-800: #805a00;
  --color-warning-900: #5e4200;

  /* — Hata (Error / Danger) — Derin kırmızı */
  --color-error-50: #fde8e8;
  --color-error-100: #f8b9b9;
  --color-error-200: #f38a8a;
  --color-error-300: #ee5b5b;
  --color-error-400: #e92c2c;
  --color-error-500: #c91a1a; /* ★ */
  --color-error-600: #ab1616;
  --color-error-700: #8d1212;
  --color-error-800: #6f0e0e;
  --color-error-900: #510a0a;

  /* — Bilgi (Info) — Primary mavi zaten bilgiyi temsil eder */
  --color-info-50: var(--color-primary-50);
  --color-info-100: var(--color-primary-100);
  --color-info-200: var(--color-primary-200);
  --color-info-300: var(--color-primary-300);
  --color-info-400: var(--color-primary-400);
  --color-info-500: var(--color-primary-500);
  --color-info-600: var(--color-primary-600);
  --color-info-700: var(--color-primary-700);
  --color-info-800: var(--color-primary-800);
  --color-info-900: var(--color-primary-900);

  /* =========================================================
     6. YÜZEY (Surface) ve ARKA PLAN RENKLERİ
     ========================================================= */
  --surface-ground: #f4f5f7; /* Sayfa genel arka planı          */
  --surface-card: #ffffff; /* Kart / panel arka planı         */
  --surface-overlay: #ffffff; /* Modal / dropdown arka planı     */
  --surface-section: #f9fafb; /* Alternatif section arka planı   */
  --surface-section-alt: var(--color-primary-50); /* Vurgulu section       */
  --surface-dark: var(--color-neutral-900); /* Koyu yüzey (footer)  */
  --surface-dark-alt: var(--color-neutral-800); /* Koyu yüzey alternatif*/
  --surface-hover: var(--color-neutral-100); /* Hover arka planı     */
  --surface-active: var(--color-primary-50); /* Aktif öğe arka planı */

  /* =========================================================
     7. METİN RENKLERİ
     ========================================================= */
  --text-primary: var(--color-neutral-900); /* Ana metin              */
  --text-secondary: var(--color-neutral-600); /* İkincil metin          */
  --text-tertiary: var(--color-neutral-450); /* Üçüncül / açıklama     */
  --text-disabled: var(--color-neutral-350); /* Devre dışı metin       */
  --text-placeholder: var(--color-neutral-400); /* Input placeholder      */
  --text-inverse: var(--color-neutral-0); /* Koyu zemin üstü metin  */
  --text-link: var(--color-primary-500); /* Link rengi             */
  --text-link-hover: var(--color-primary-700); /* Link hover rengi       */

  /* =========================================================
     8. KENARLIK (Border) RENKLERİ
     ========================================================= */
  --border-light: var(--color-neutral-200); /* Hafif kenarlık          */
  --border-default: var(--color-neutral-300); /* Standart kenarlık       */
  --border-strong: var(--color-neutral-400); /* Güçlü kenarlık          */
  --border-focus: var(--color-primary-500); /* Focus durumu            */
  --border-error: var(--color-error-500); /* Hata durumu             */
  --border-success: var(--color-success-500); /* Başarı durumu           */

  /* =========================================================
     9. TİPOGRAFİ SİSTEMİ
     ========================================================= */

  /* — Font Aileleri — */
  --font-heading: "Montserrat", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;

  /* — Font Ağırlıkları (Weight) — */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* — Font Büyüklükleri (Size) — Modular Scale ~1.25 — */
  --fs-2xs: 0.625rem; /* 10px */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-md: 1.125rem; /* 18px */
  --fs-lg: 1.25rem; /* 20px */
  --fs-xl: 1.5rem; /* 24px */
  --fs-2xl: 1.875rem; /* 30px */
  --fs-3xl: 2.25rem; /* 36px */
  --fs-4xl: 3rem; /* 48px */
  --fs-5xl: 3.75rem; /* 60px */
  --fs-6xl: 4.5rem; /* 72px */

  /* — Satır Aralıkları (Line Height) — */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;
  --lh-loose: 1.8;

  /* — Harf Aralıkları (Letter Spacing) — */
  --ls-tighter: -0.04em;
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.04em;
  --ls-widest: 0.08em;

  /* — Başlık Boyutları (Heading Presets) — */
  /* Display */
  --heading-display-size: var(--fs-5xl);
  --heading-display-weight: var(--fw-black);
  --heading-display-lh: var(--lh-tight);
  --heading-display-ls: var(--ls-tighter);

  /* H1 */
  --heading-h1-size: var(--fs-4xl);
  --heading-h1-weight: var(--fw-extrabold);
  --heading-h1-lh: var(--lh-tight);
  --heading-h1-ls: var(--ls-tight);

  /* H2 */
  --heading-h2-size: var(--fs-3xl);
  --heading-h2-weight: var(--fw-bold);
  --heading-h2-lh: var(--lh-tight);
  --heading-h2-ls: var(--ls-tight);

  /* H3 */
  --heading-h3-size: var(--fs-2xl);
  --heading-h3-weight: var(--fw-bold);
  --heading-h3-lh: var(--lh-snug);
  --heading-h3-ls: var(--ls-normal);

  /* H4 */
  --heading-h4-size: var(--fs-xl);
  --heading-h4-weight: var(--fw-semibold);
  --heading-h4-lh: var(--lh-snug);
  --heading-h4-ls: var(--ls-normal);

  /* H5 */
  --heading-h5-size: var(--fs-lg);
  --heading-h5-weight: var(--fw-semibold);
  --heading-h5-lh: var(--lh-normal);
  --heading-h5-ls: var(--ls-normal);

  /* H6 */
  --heading-h6-size: var(--fs-md);
  --heading-h6-weight: var(--fw-semibold);
  --heading-h6-lh: var(--lh-normal);
  --heading-h6-ls: var(--ls-normal);

  /* — Gövde Metin Presetleri — */
  --body-lg-size: var(--fs-lg);
  --body-lg-lh: var(--lh-relaxed);

  --body-base-size: var(--fs-base);
  --body-base-lh: var(--lh-normal);

  --body-sm-size: var(--fs-sm);
  --body-sm-lh: var(--lh-normal);

  --body-xs-size: var(--fs-xs);
  --body-xs-lh: var(--lh-normal);

  /* =========================================================
     10. SPACING SİSTEMİ — 8px tabanlı (4px alt-grid ile)
     ========================================================= */
  --space-0: 0;
  --space-0-5: 0.125rem; /*  2px  — mikroskobik */
  --space-1: 0.25rem; /*  4px  — alt-grid    */
  --space-1-5: 0.375rem; /*  6px                */
  --space-2: 0.5rem; /*  8px  ★ temel birim */
  --space-2-5: 0.625rem; /* 10px                */
  --space-3: 0.75rem; /* 12px                */
  --space-3-5: 0.875rem; /* 14px                */
  --space-4: 1rem; /* 16px                */
  --space-5: 1.25rem; /* 20px                */
  --space-6: 1.5rem; /* 24px                */
  --space-7: 1.75rem; /* 28px                */
  --space-8: 2rem; /* 32px                */
  --space-9: 2.25rem; /* 36px                */
  --space-10: 2.5rem; /* 40px                */
  --space-11: 2.75rem; /* 44px                */
  --space-12: 3rem; /* 48px                */
  --space-14: 3.5rem; /* 56px                */
  --space-16: 4rem; /* 64px                */
  --space-20: 5rem; /* 80px                */
  --space-24: 6rem; /* 96px                */
  --space-28: 7rem; /* 112px               */
  --space-32: 8rem; /* 128px               */
  --space-36: 9rem; /* 144px               */
  --space-40: 10rem; /* 160px               */
  --space-48: 12rem; /* 192px               */
  --space-56: 14rem; /* 224px               */
  --space-64: 16rem; /* 256px               */

  /* =========================================================
     11. BORDER RADIUS — Keskin → Hafif Yuvarlatılmış
         Endüstriyel his: küçük radius değerleri
     ========================================================= */
  --radius-none: 0;
  --radius-xs: 0.125rem; /*  2px — çok hafif  */
  --radius-sm: 0.25rem; /*  4px — varsayılan */
  --radius-md: 0.375rem; /*  6px              */
  --radius-lg: 0.5rem; /*  8px              */
  --radius-xl: 0.75rem; /* 12px              */
  --radius-2xl: 1rem; /* 16px — en yuvarlak */
  --radius-full: 9999px; /* Tam yuvarlak (avatar, badge) */

  /* =========================================================
     12. ELEVATION / GÖLGE SİSTEMİ (Box Shadow)
         Katmanlı derinlik hissi
     ========================================================= */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:
    0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);

  /* — Renkli gölgeler (CTA butonları, kartlar) — */
  --shadow-primary: 0 4px 14px 0 rgba(0, 94, 184, 0.3);
  --shadow-accent: 0 4px 14px 0 rgba(212, 160, 23, 0.3);
  --shadow-error: 0 4px 14px 0 rgba(201, 26, 26, 0.25);

  /* — Inner shadow (inset) — endüstriyel derinlik — */
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);

  /* — Hiç gölge yok — */
  --shadow-none: none;

  /* =========================================================
     13. GEÇİŞ SÜRELERİ (Transition / Animation)
     ========================================================= */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-slower: 500ms ease;

  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* =========================================================
     14. Z-INDEX KATMANLARı
     ========================================================= */
  --z-behind: -1;
  --z-default: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-max: 9999;

  /* =========================================================
     15. LAYOUT / KONTEYNER GENİŞLİKLERİ
     ========================================================= */
  --container-xs: 20rem; /* 320px  */
  --container-sm: 36rem; /* 576px  */
  --container-md: 48rem; /* 768px  */
  --container-lg: 64rem; /* 1024px */
  --container-xl: 80rem; /* 1280px */
  --container-2xl: 90rem; /* 1440px */
  --container-3xl: 100rem; /* 1600px */

  /* =========================================================
     16. BREAKPOINT DEĞERLERİ (referans — media query)
         CSS'de doğrudan kullanılamaz ama dökümantasyon için
     ========================================================= */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* =========================================================
     17. FORM ELEMANLARI
     ========================================================= */
  --input-height-sm: 2rem; /* 32px */
  --input-height-md: 2.5rem; /* 40px */
  --input-height-lg: 3rem; /* 48px */
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-border-width: 1px;
  --input-radius: var(--radius-sm);
  --input-bg: var(--color-neutral-0);
  --input-border-color: var(--border-default);
  --input-focus-ring: 0 0 0 3px rgba(0, 94, 184, 0.2);

  /* =========================================================
     18. BUTON DEĞİŞKENLERİ
     ========================================================= */
  --btn-padding-x-sm: var(--space-3);
  --btn-padding-y-sm: var(--space-1-5);
  --btn-padding-x-md: var(--space-5);
  --btn-padding-y-md: var(--space-2-5);
  --btn-padding-x-lg: var(--space-8);
  --btn-padding-y-lg: var(--space-3-5);
  --btn-radius: var(--radius-sm);
  --btn-font-weight: var(--fw-semibold);
  --btn-transition: all var(--transition-fast);

  /* =========================================================
     19. KART (Card) DEĞİŞKENLERİ
     ========================================================= */
  --card-bg: var(--surface-card);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-border: 1px solid var(--border-light);
  --card-padding: var(--space-6);

  /* =========================================================
     20. OVERLAY / BACKDROP
     ========================================================= */
  --overlay-bg: rgba(23, 23, 23, 0.6);
  --overlay-blur: 8px;

  /* =========================================================
     21. ÖZEL MARKA DEĞİŞKENLERİ
         "Çelik" temalı gradyanlar ve efektler
     ========================================================= */

  /* — Çelik gradyanı (metalik his) — */
  --gradient-steel: linear-gradient(
    135deg,
    var(--color-steel-100) 0%,
    var(--color-steel-300) 50%,
    var(--color-steel-200) 100%
  );

  /* — Kurumsal mavi gradyanı — */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary-500) 0%,
    var(--color-primary-800) 100%
  );

  /* — Koyu arka plan gradyanı (hero, footer) — */
  --gradient-dark: linear-gradient(
    135deg,
    var(--color-neutral-900) 0%,
    var(--color-steel-950) 50%,
    var(--color-primary-950) 100%
  );

  /* — Aksan / CTA gradyanı — */
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-accent-400) 0%,
    var(--color-accent-600) 100%
  );

  /* — Subtle section gradyanı — */
  --gradient-subtle: linear-gradient(
    180deg,
    var(--surface-ground) 0%,
    var(--color-neutral-0) 100%
  );

  /* — Glass / Cam efekti — */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: 12px;

  /* =========================================================
     22. FONKSİYONEL KISA YOLLAR
     ========================================================= */
  --focus-ring: 0 0 0 3px rgba(0, 94, 184, 0.25);
  --focus-ring-error: 0 0 0 3px rgba(201, 26, 26, 0.2);
  --scrollbar-thumb: var(--color-steel-400);
  --scrollbar-track: var(--color-neutral-100);
  --selection-bg: rgba(0, 94, 184, 0.15);
  --selection-text: var(--color-primary-900);
}