/* =========================================================================
   ÇELİK İNŞAAT — Design tokens
   Tüm renk, tipografi, boşluk ve hareket değerleri burada tanımlıdır.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------- Renk */
  --color-bg:          #F3F7FB;   /* cool off-white — ana zemin */
  --color-bg-alt:      #E3EDF6;   /* ara bölüm zemini */
  --color-bg-dark:     #17456B;   /* açık lacivert-mavi */
  --color-bg-charcoal: #1D5482;   /* orta mavi */

  --color-text:        #14385A;
  --color-text-invert: #F3F7FB;
  --color-muted:       #506980;   /* mavi-gri */
  --color-muted-dark:  #46607A;
  --color-stone:       #BFD2E2;   /* açık mavi-gri */

  --color-line:        #D7E3ED;
  --color-line-strong: #BCCEDD;
  --color-line-dark:   rgba(243, 247, 251, .20);

  --color-accent:      #63A3D3;   /* marka mavisi — dolgu ve çizgilerde */
  --color-accent-ink:  #2A6299;   /* açık zeminde okunur mavi */
  --color-accent-lt:   #8FC1E6;   /* koyu zeminde okunur mavi */
  --color-accent-soft: #8DBEE2;

  /* ---------------------------------------------------------- Tipografi */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display: clamp(3.2rem, 8.2vw, 9rem);      /* hero */
  --fs-h1:      clamp(2.5rem, 5.6vw, 5.4rem);
  --fs-h2:      clamp(1.9rem, 3.6vw, 3.5rem);
  --fs-h3:      clamp(1.1rem, 1.3vw, 1.45rem);
  --fs-lead:    clamp(1.02rem, 1.05vw, 1.22rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;
  --fs-eyebrow: .69rem;

  --lh-tight: 0.98;
  --lh-head: 1.06;
  --lh-body: 1.7;
  --ls-tight: -.035em;
  --ls-wide: .22em;

  /* ------------------------------------------------------------- Ölçek */
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 72px);
  /* Yumuşak köşe ölçeği — hiçbir yerde keskin hat kalmaz */
  --radius-xs:   8px;    /* rozet, küçük etiket */
  --radius-sm:  12px;    /* form alanı, küçük kutu */
  --radius:     16px;    /* kart, görsel, panel */
  --radius-lg:  24px;    /* galeri, büyük görsel */
  --radius-xl:  36px;    /* hero alt kavisi, tam genişlik bloklar */
  --radius-pill: 999px;  /* buton */

  /* Gölge ölçeği — sert çerçeve yerine yumuşak yükseklik */
  --shadow-xs: 0 1px 3px  rgba(15, 44, 70, .04);
  --shadow-sm: 0 4px 14px rgba(15, 44, 70, .05);
  --shadow:    0 12px 32px rgba(15, 44, 70, .07);
  --shadow-lg: 0 26px 60px rgba(15, 44, 70, .10);

  /* Üst bant: soldan beyaz, sağa doğru logonun açık mavisi */
  --header-bg: linear-gradient(103deg,
    rgba(255, 255, 255, .95) 0%,
    rgba(244, 249, 253, .93) 28%,
    rgba(212, 231, 246, .92) 60%,
    rgba(150, 197, 232, .93) 100%);

  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  16px;
  --space-sm:  24px;
  --space-md:  40px;
  --space-lg:  64px;
  --space-xl:  clamp(72px, 9vw, 128px);
  --space-2xl: clamp(104px, 13vw, 200px);

  --header-h: 112px;
  --header-h-stuck: 76px;

  /* ------------------------------------------------------------ Hareket */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --duration: .6s;
  --duration-fast: .32s;
  --duration-slow: 1.1s;

  /* -------------------------------------------------------------- Z-index */
  --z-drawer: 120;
  --z-header: 130;
  --z-float: 90;
  --z-veil: 200;    /* sayfa geçiş perdesi */
  --z-intro: 210;   /* ilk giriş perdesi */
}