/* =========================================================
   EFM Teknoloji — Design Tokens
   ========================================================= */
:root {

  /* ---------- Colors (EFM brand: amber → orange + silver on graphite) ---------- */
  --color-bg: #0c0e14;
  --color-bg-deep: #07090e;
  --color-surface: #14171f;
  --color-surface-soft: #1a1e28;
  --color-surface-elevated: #222632;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-divider: rgba(255, 255, 255, 0.05);

  /* Section alternation — hero (#0c0e14) sonrası kurumsal akış */
  --section-bg-light: #f1f3f6;
  /* cool stone paper — amber/turuncu aksenti öne çıkarır, sıcak görünmez */
  --section-bg-dark: #14171f;
  /* graphite surface — hero ile aynı aileden, bir kademe yukarı */

  --color-text: #f4f5f7;
  --color-text-soft: #cfd1d6;
  --color-muted: #8a8d96;
  --color-muted-2: #6c6f78;

  --color-primary: #ff6b1f;
  /* turuncu — logodaki F */
  --color-primary-hover: #ff8541;
  --color-primary-soft: rgba(255, 107, 31, 0.14);
  --color-primary-line: rgba(255, 107, 31, 0.38);
  --color-primary-glow: rgba(255, 107, 31, 0.30);

  /* Başlık — dark .title-mark primary; light 2. satır soluk (span yok) */
  --title-mark-on-dark: var(--color-primary);

  --color-accent: #ffb81c;
  /* amber — logodaki E */
  --color-accent-soft: rgba(255, 184, 28, 0.14);
  --color-accent-line: rgba(255, 184, 28, 0.38);

  --color-orange: #f2840a;

  --color-secondary: #b8bcc0;
  /* gümüş — logodaki M */
  --color-secondary-soft: rgba(184, 188, 192, 0.10);

  /* ---------- Light surface (kurumsal modallar için) ---------- */
  --color-light-bg: #f6f6f4;
  /* warm off-white — ana zemin */
  --color-light-surface: #ffffff;
  /* iç paneller */
  --color-light-soft: #eeeeea;
  /* input zemini, divider arası */
  --color-light-border: #e3e2dd;
  /* hairline çizgi */
  --color-light-border-strong: #d4d3cd;
  --color-light-text: #1a1d24;
  /* ana metin */
  --color-light-text-soft: #4a4d56;
  /* alt metin */
  --color-light-muted: #8a8d96;
  /* placeholder, micro etiket */
  --color-light-text-subtle: rgba(26, 29, 36, 0.65);
  --color-light-text-faint: rgba(26, 29, 36, 0.55);
  --color-light-line: rgba(26, 29, 36, 0.1);
  --color-light-line-subtle: rgba(26, 29, 36, 0.08);
  --color-light-line-soft: rgba(26, 29, 36, 0.12);
  --color-light-line-strong: rgba(26, 29, 36, 0.16);
  --color-light-muted-faint: rgba(26, 29, 36, 0.35);
  --color-light-muted-soft: rgba(26, 29, 36, 0.45);
  --color-light-muted-strong: rgba(26, 29, 36, 0.48);
  --color-dark-text-subtle: rgba(244, 245, 247, 0.62);
  --color-dark-text-faint: rgba(244, 245, 247, 0.55);
  --color-dark-line: rgba(255, 255, 255, 0.08);
  --color-dark-line-soft: rgba(255, 255, 255, 0.12);
  --color-dark-muted-soft: rgba(255, 255, 255, 0.45);
  --color-dark-copy-subtle: rgba(255, 255, 255, 0.62);
  --color-dark-muted-strong: rgba(255, 255, 255, 0.65);

  --color-success: #2ecc8b;
  --color-warning: #ffb81c;
  --color-danger: #ef4444;

  /* ---------- Gradients ---------- */
  --gradient-brand: linear-gradient(135deg, #ffb81c 0%, #ff6b1f 65%, #ea5a0b 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(255, 184, 28, 0.18), rgba(255, 107, 31, 0.18));
  --gradient-hero: radial-gradient(1200px 600px at 85% -10%, rgba(255, 107, 31, 0.18), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(255, 184, 28, 0.10), transparent 60%);
  --gradient-panel: linear-gradient(180deg, rgba(255, 107, 31, 0.05), rgba(255, 107, 31, 0));
  --gradient-line: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  --gradient-overlay: linear-gradient(100deg, rgba(8, 10, 16, 0.92) 0%, rgba(8, 10, 16, 0.78) 40%, rgba(8, 10, 16, 0.55) 70%, rgba(8, 10, 16, 0.35) 100%);
  --gradient-dark-section-glow: radial-gradient(900px 600px at 8% 18%, rgba(255, 107, 31, 0.08), transparent 60%),
    radial-gradient(1100px 700px at 92% 88%, rgba(255, 184, 28, 0.05), transparent 65%);

  /* ---------- Typography ---------- */
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-60: 3.66rem;
  --fs-64: 4rem;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.55;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  --space-section: 120px;
  --space-section-sm: 80px;

  /*
   * Ana sayfa / kurumsal bölümler — dikey padding tek kaynak.
   * Üst: daha geniş vw; alt: hafif sıkı (10vw) ile içerik kapanışı dengeli.
   */
  
  
  /* Bölüm içi alt şeritler (ör. istatistik bandı) — üst boşluk */
  --section-strip-pad-start: 52px;
  --section-head-gap: var(--space-24);
  --section-title-size: var(--fs-48);
  --section-title-size-compact: 46px;
  --section-title-line-height: 1.08;
  --section-title-tracking: -0.022em;
  --section-desc-width: 48ch;
  --section-desc-width-sm: 46ch;
  --section-head-margin: var(--space-24);
  --section-head-margin-sm: var(--space-20);
  --section-stage-gap: var(--space-24);
  --section-stage-gap-md: var(--space-18);
  --section-content-gap: var(--space-12);
  --section-card-gap: var(--space-8);
  --section-strip-gap: var(--space-14);
  --section-metric-gap: var(--space-10);
  /* Kurumsal istatistik şeridi — ayırıcı çizgiler */
  --about-stats-border: var(--color-light-border-strong);
  --about-stats-gap-top: var(--space-12);
  --about-stats-pad-block: var(--space-8);

  /* Referanslar — metrikler (about stats ile paralel) */
  --refs-stats-border: var(--about-stats-border);
  --refs-stats-pad-top: var(--space-5);

  /* Referanslar — mobil ortak paneli */
  --refs-panel-radius: 22px;
  --refs-panel-border: rgba(26, 29, 36, 0.09);
  --refs-lane-pad-inline: 16px;
  --refs-chip-width: 96px;
  --refs-chip-height: 58px;
  --refs-hub-height: 72px;

  /* Mobil arama chip — accent + koyu yüzey */
  --call-fab-dial-size: 60px;
  --call-fab-surface: var(--color-surface-elevated);
  --call-fab-surface-deep: var(--color-bg-deep);
  --call-fab-dial-bg: var(--color-accent);
  --call-fab-shadow: 0 12px 32px -10px rgba(7, 9, 14, 0.72);
  --call-fab-shadow-accent: 0 8px 24px -6px var(--color-primary-glow);
  --call-fab-accent-edge: var(--color-accent);
  --call-fab-panel-width: 244px;

  /* Projeler — editoryal spec matrisi */
  --projects-meta-rail-bg: #14171f;
  --projects-meta-scroll-gap: 8px;
  --projects-meta-scroll-pad: 12px;
  --projects-meta-scroll-pad-block: 0px;

  /* İletişim — brand shell + koyu iç yüzey */
  --contact-bg-base: var(--color-bg-deep);
  --contact-shell-bg: var(--gradient-brand);
  --contact-shell-padding: 10px;
  --contact-shell-gap: 10px;
  --contact-shell-radius: 26px;
  --contact-inner-bg: var(--color-bg-deep);
  --contact-inner-radius: 20px;
  --contact-action-bg: rgba(255, 255, 255, 0.045);
  --contact-action-border: rgba(255, 255, 255, 0.09);
  --contact-action-hover-bg: rgba(255, 255, 255, 0.075);
  --contact-panel-shadow: 0 32px 80px -24px rgba(255, 107, 31, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.08);

  --fs-hero-title: 3.66rem;
  --fs-section-title: 2.75rem;
  --fs-subtitle: 1.375rem;
  --fs-display-md: 52px;
  --fs-display-lg: 56px;
  --fs-modal-input: 32px;

  /* ---------- Container ---------- */
  --container-xl: 1280px;
  --container-lg: 1120px;
  --container-md: 960px;
  --container-padding: 24px;
  --section-inline-gutter: var(--container-padding);

  /*
   * Responsive kesimler (tek kaynak — responsive.css ile aynı ladder)
   * 2xl≥1440 · xl≤1199 · lg≤1023 · md≤991 · sm≤899 · xs≤767 · 2xs≤639 · 3xs≤479
   */

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-card: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---------- Border ---------- */
  --border-1: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px var(--color-primary-line), 0 18px 48px rgba(255, 107, 31, 0.20);
  --shadow-light-card: 0 14px 36px -22px rgba(26, 29, 36, 0.18);
  --shadow-light-card-hover: 0 24px 56px -22px rgba(255, 107, 31, 0.28);
  --shadow-accent : 0 0 0 1px rgb(237 184 82 / 34%), 0 18px 48px rgb(173 141 16 / 15%);

  /* ---------- Transitions ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-fluid: 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-ui: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-header: 500;
  --z-fab: 520;
  --z-overlay: 800;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-gallery: 1300;
}