/* ============================================================
   MARKA YAZI TIPLERI — logodan tespit edildi
     "ÜTOPYA"                      -> Marcellus  (Roma kapitali, yayvan serifler)
     "TASARIM | MİMARLIK | İNŞAAT" -> Montserrat (geometrik sans, yayvan M)
   Turkce alt kumeye indirilip woff2'ye cevrildi, kendi sunucumuzda barinir.
   Google CDN kullanilmiyor: harici bagimlilik ve engellenme riski yok.
   ============================================================ */
@font-face{ font-family:"Marcellus"; src:url("../fonts/marcellus-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("../fonts/montserrat-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap; }

/* ============================================================
   ÜTOPYA — Tasarım Değişkenleri
   Marka dosyaları geldiğinde sadece bu dosya değişir.
   ============================================================ */

:root{
  /* --- Renk --- */
  --bg:            #F0F0F0;   /* sayfa zemini */
  --bg-alt:        #E8E8E8;   /* ikincil zemin */
  --ink:           #414145;   /* gövde metni */
  --ink-strong:    #16202B;   /* başlık */
  --ink-mute:      #8A8A90;   /* ikincil metin */
  --line:          #D6D6D6;   /* ince çizgi */
  --light:         #FFFFFF;   /* koyu zemin üstü metin */
  --dark:          #12263D;   /* koyu bloklar — lacivert */
  --accent:        #1B3A5F;   /* VURGU — marka laciverti */
  --accent-soft:   #2C5580;   /* açık lacivert */
  --overlay:       rgba(10,22,38,.46);

  /* --- Tipografi --- */
  --font: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --font-marka: "Marcellus", "Times New Roman", Georgia, serif;
  /* Arial'in 300 agirligi yok, tarayici 400'e dusuruyordu. Montserrat'in gercek
     300'u var; ayni gorunumu korumak icin gövde 400'de tutuluyor.
     Daha ferah/ince bir his istenirse 300 yapmak yeterli. */
  --w-light: 400;
  --w-ince:  300;   /* gercekten ince istenen yerler icin */
  --w-reg:   400;
  --w-med:   500;
  --w-bold:  600;

  --fs-nav:    15px;
  --fs-body:   17px;
  --fs-small:  14px;
  --fs-micro:  12px;
  --fs-h1:     clamp(30px, 5.2vw, 62px);
  --fs-h2:     clamp(20px, 2.4vw, 30px);
  --fs-h3:     19px;

  --lh-body: 1.6;
  --lh-tight: 1.15;
  --ls-wide: .14em;
  --ls-mid:  .02em;

  /* --- Ölçü --- */
  --pad-x:     clamp(20px, 5vw, 72px);
  --gap:       clamp(14px, 1.6vw, 24px);
  --sec-y:     clamp(64px, 9vw, 140px);
  --head-h:    92px;
  --head-h-sm: 58px;
  --maxw:      1680px;

  /* --- Hareket --- */
  --t-fast: .25s;
  --t-mid:  .4s;
  --t-slow: .8s;
  --ease:   cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 820px){
  :root{
    --fs-body: 15px;
    --fs-nav: 14px;
    --fs-h3: 16px;
    --head-h: 58px;
  }
}