/* ============================================================
   İZMİR TESİSATÇISI — CSS VARIABLES (DESIGN TOKENS)
   ============================================================ */

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

:root {

  /* ── RENKLER ──────────────────────────────────────────── */
  --color-primary:          #10233F;
  --color-primary-dark:     #0A172B;
  --color-secondary:        #E8A317;
  --color-secondary-hover:  #D48B12;
  --color-accent:           #10233F;
  --color-success:          #25D366;
  --color-danger:           #DC2626;
  --color-warning:          #F59E0B;
  --color-info:             #3B82F6;

  /* ── METİN ────────────────────────────────────────────── */
  --color-text-dark:        #1A1A2E;
  --color-text-medium:      #4B5563;
  --color-text-light:       #6B7280;

  /* ── ARKA PLAN ────────────────────────────────────────── */
  --color-bg-white:         #FFFFFF;
  --color-bg-light:         #F8F9FA;
  --color-border:           #E5E7EB;

  /* ── BÖLÜM ARKAPLANLAR ────────────────────────────────── */
  --color-footer-bg:        #0D1527;
  --color-topbar-bg:        #0A1020;
  --color-nav-bg:           #1B2A4A;

  /* ── TİPOGRAFİ ────────────────────────────────────────── */
  --font-display:           'Outfit', sans-serif;
  --font-body:              'Inter', sans-serif;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --container-max:          1200px;
  --section-padding:        80px 0;
  --section-padding-mobile: 48px 0;
  --input-radius:           8px;

  /* ── BORDER RADIUS ────────────────────────────────────── */
  --card-radius:            12px;
  --btn-radius:             8px;
  --pill-radius:            50px;

  /* ── GÖLGELER ─────────────────────────────────────────── */
  --shadow-card:            0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:      0 8px 30px rgba(0, 0, 0, 0.14);
  --shadow-nav:             0 2px 20px rgba(0, 0, 0, 0.20);
  --shadow-btn:             0 4px 15px rgba(232, 163, 23, 0.35);
  --shadow-modal:           0 20px 60px rgba(0, 0, 0, 0.25);
  --shadow-dropdown:        0 8px 24px rgba(0, 0, 0, 0.30);

  /* ── GEÇİŞLER ─────────────────────────────────────────── */
  --transition:             all 0.3s ease;
  --transition-fast:        all 0.15s ease;
  --transition-slow:        all 0.5s ease;

  /* ── Z-INDEX ──────────────────────────────────────────── */
  --z-topbar:               1000;
  --z-nav:                  999;
  --z-popup:                9999;
  --z-cookie:               9998;
  --z-bottom-bar:           997;
  --z-modal:                9997;
  --z-tooltip:              9996;
  --z-dropdown:             500;
  --z-overlay:              100;

  /* ── SPACING ──────────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;

  /* ── GRID ─────────────────────────────────────────────── */
  --grid-gap:    24px;
  --grid-gap-sm: 16px;
}