/* =========================================================
   TOKENS — renkler, fontlar, grid değişkenleri
   Figma: 1728 Home (desktop) / Mobil (428) / 1024 kuralları
   ========================================================= */

:root {
  /* Renkler */
  --c-black: #000000;
  --c-bg: #25282c;            /* koyu section zemini */
  --c-white: #ffffff;
  --c-light: #d3d4d5;         /* açık gri metin (hero açıklama, başlık altları) */
  --c-nav: #bfbfbf;           /* pasif nav / footer link */
  --c-gray: #515356;          /* About başlıkları (beyaz zemin) */
  --c-nav-dark: #63686d;      /* koyu header pasif nav */
  --c-border: #a2a2a2;        /* Follow butonu çerçevesi */
  --c-line: rgba(255, 255, 255, 0.2); /* footer çizgisi */
  --c-title-hero: rgba(255, 255, 255, 0.6);
  --c-title-soft: rgba(255, 255, 255, 0.8);
  --c-overlay: rgba(0, 0, 0, 0.25);

  /* Fontlar (Google Fonts) */
  --f-display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Geist", "Helvetica Neue", Arial, sans-serif;

  /* Puntolar — sadece mobilde değişenler ayrıca override edilir */
  --fs-hero: 148px;           /* MUSICIAN / & DESIGNER */
  --fs-manifesto: 92px;       /* I work at the intersection... */
  --lh-manifesto: 90px;
  --fs-section: 92px;         /* ABOUT / COVERS / RIG */
  --fs-footer: 148px;         /* SOUND / COLOR / PERFORM */
  --lh-footer: 165px;
  --footer-img: 144px;        /* kelime arası görsel boyutu */

  /* Grid — desktop (≥1280): 12 kolon, 60px marj, 32px gutter */
  --margin: 60px;
  --gutter: 32px;
  --cols: 12;
  --container: calc(100vw - var(--margin) * 2);
  --col: calc((var(--container) - (var(--cols) - 1) * var(--gutter)) / var(--cols));

  /* Ölçek katsayıları (bkz. hero.css) — 1px = Figma 1728 ölçeği.
     CSS'te uzunluk/sayı bölümü uzunluk verir (100vw/1728 → px), o yüzden
     katsayılar px cinsinden tutulur ve `calc(514 * var(--hs))` gibi çarpılır. */
  --hs: 1px;        /* hero kompozisyonu */
  --mob: 1px;       /* mobil (428) kompozisyon ölçeği — 428–767'de 100vw/428 */
  --ms-size: 1px;   /* manifesto görsel boyutları */
  --ms-pos: 1px;    /* manifesto konumlar + section yüksekliği */

  /* Manifesto sticky metni: --manifesto-stick = viewport'ta yapıştığı üst
     mesafe, --manifesto-flow = akıştaki başlangıç konumu (Figma offset).
     İkisi masaüstünde aynı; mobilde yapışma noktası viewport'a göre ayrı.
     About (stick + metin yüksekliği) kadar manifesto'nun üstüne biner. */
  --manifesto-stick: 323px;
  --manifesto-flow: 323px;
  --manifesto-text-h: 270px;  /* 3 satır × 90px */
  --manifesto-overlap: calc(var(--manifesto-stick) + var(--manifesto-text-h));

  /* Header */
  --header-top: 32px;
  --header-h: 35px;
  --header-hit: calc(var(--header-top) + var(--header-h) / 2); /* header'ın dikey merkezi (tema ölçümü) */

  /* Geçişler */
  --t-fast: 150ms ease;
  --t-theme: 250ms ease;
}

/* ≥1729: hero ve manifesto 100vw/1728 ile büyür (metinler hariç) */
@media (min-width: 1729px) {
  :root {
    --hs: calc(100vw / 1728);
    --ms-size: calc(100vw / 1728);
    --ms-pos: calc(100vw / 1728);
  }
}

/* ≤1512: manifesto görselleri container'a oranlı küçülür (1440'ta iki foto birbirine giriyordu) */
@media (min-width: 1024px) and (max-width: 1512px) {
  :root { --ms-size: calc(var(--container) / 1608); }
}

/* Tablet-yatay (1024–1279): 6 kolon, aynı marj/gutter */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --cols: 6;
    --fs-manifesto: 70px;
    --lh-manifesto: 70px;
    --manifesto-text-h: 210px;  /* 3 satır × 70px */
  }
}

/* Mobil düzen (<1024): hamburger, tek kolon, mobil puntolar */
@media (max-width: 1023px) {
  :root {
    --margin: 10px;
    --gutter: 16px;
    --cols: 4;
    --fs-hero: 66px;
    --fs-manifesto: 36px;
    --lh-manifesto: 36px;
    --manifesto-flow: 186px;
    --manifesto-text-h: 108px;  /* 3 satır × 36px */
    --fs-section: 62px;
    --fs-footer: 72px;
    --lh-footer: 72px;
    --footer-img: 204px;
    --header-top: 30px;
    --header-h: 40px;
  }
}

/* 768–1023: mobil düzen ama 60px marj; hero + manifesto = 1024 kompozisyonunun
   container/904 ile ölçeklenmiş hali (1024'te container 904px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --margin: 60px;
    --gutter: 32px;
    --hs: calc(var(--container) / 904);
    --fs-hero: calc(148 * var(--hs));
    --fs-manifesto: calc(70 * var(--hs));
    --lh-manifesto: calc(70 * var(--hs));
    --manifesto-stick: 323px;
    --manifesto-flow: 323px;
    --manifesto-text-h: calc(210 * var(--hs));
    --ms-size: calc(var(--container) / 1608);
    --ms-pos: var(--hs);
  }
}

/* <768: slogan metnin merkezi viewport'un %45'inde yapışır (ekran ortasına
   yakın, hafif üstü); akıştaki başlangıç konumu Figma'daki gibi kalır */
@media (max-width: 767px) {
  :root {
    --manifesto-stick: calc(45vh - var(--manifesto-text-h) / 2);
    --manifesto-stick: calc(45dvh - var(--manifesto-text-h) / 2); /* dvh destekleyenlerde adres çubuğuna dayanıklı */
  }
}

/* 428–767: mobil hero + manifesto kompozisyonu 100vw/428 ile oranlı büyür
   (~700px'te ortadaki görsel küçük kalıp boşluklar açılıyordu) */
@media (min-width: 428px) and (max-width: 767px) {
  :root {
    --mob: calc(100vw / 428);
    --fs-hero: calc(66 * var(--mob));
    --fs-manifesto: calc(36 * var(--mob));
    --lh-manifesto: calc(36 * var(--mob));
    --manifesto-flow: calc(186 * var(--mob));
    --manifesto-text-h: calc(108 * var(--mob));
  }
}

/* 428 altı: hero başlıkları ve SOUND COLOR PERFORM oranlı küçülür (375'te sığsın) */
@media (max-width: 427px) {
  :root {
    --fs-hero: clamp(56px, 15.42vw, 66px);     /* 66/428 = 15.42vw */
    --fs-footer: clamp(60px, 16.82vw, 72px);   /* 72/428 = 16.82vw */
    --lh-footer: clamp(60px, 16.82vw, 72px);
    --footer-img: clamp(170px, 47.66vw, 204px); /* 204/428 */
  }
}