/* =========================================================
   HERO — gradient zemin, serbest kolaj, parallax hedefleri
   Katman sırası: gradient < görseller < başlıklar < header

   Ölçek değişkeni (tokens.css):
   --hs  hero ölçeği (px): 1728 tasarımı 1px; ≥1729'da 100vw/1728 ile büyür;
         768–1023'te 1024 kompozisyonu container/904 ile küçülür.
   ========================================================= */

.hero {
  position: relative;
  height: calc(1000 * var(--hs));
  background: linear-gradient(180deg, var(--c-black) 0%, var(--c-bg) 100%);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  height: 100%;
}

/* Görseller */
.hero__img {
  position: absolute;
  z-index: 1;
  margin: 0;
}
.hero__img--center {
  left: 50%;
  top: calc(229 * var(--hs));
  width: calc(514 * var(--hs));
  height: calc(541 * var(--hs));
  transform: translateX(-50%);
}
.hero__img--left {
  left: calc(var(--col) + var(--gutter));
  top: calc(610 * var(--hs));
  width: calc(200 * var(--hs));
  height: calc(253 * var(--hs));
}
.hero__img--right {
  right: var(--col);                /* Figma: container sağından 1 kolon içeride */
  top: calc(159 * var(--hs));
  width: calc(273 * var(--hs));
  height: calc(329 * var(--hs));
}

/* Başlıklar — %60 beyaz, görsellerin üstünde */
.hero__title {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: normal;
  color: var(--c-title-hero);
  white-space: nowrap;
}
.hero__title--1 { left: 0; top: calc(343 * var(--hs)); }
.hero__title--2 { right: 0; top: calc(528 * var(--hs)); }

/* Sağ alt açıklama — punto ölçeklenmez, konumu ölçeklenir */
.hero__desc {
  position: absolute;
  z-index: 2;
  right: 0;
  top: calc(799 * var(--hs));
  width: 378px;
  color: var(--c-light);
  font-size: 14px;
  line-height: normal;
}
.hero__desc strong {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 19px; /* Figma: bir boş satır (16px normal ≈ 19px) */
}

/* Sol alt SCROLL + ok — ilk scroll'da fade-out (Figma: alttan 45px) */
.hero__scroll {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 45px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  line-height: normal;
  color: var(--c-light);
  transition: opacity 400ms ease;
}
.hero__scroll img { width: 12px; height: 8px; }
.hero__scroll.is-hidden { opacity: 0; pointer-events: none; }

/* Parallax: JS translateY verir; sadece ≥1024 ve reduced-motion kapalıyken */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero__img,
  .hero__title { will-change: transform; }
}

/* ≥1729: hero en az tam ekran, kompozisyon 100vw/1728 ile büyür */
@media (min-width: 1729px) {
  .hero { height: max(100vh, calc(1000 * var(--hs))); }
}

/* 768–1279: yan görseller container kenarına bloklu (1024 kuralı; 768–1023 bunun ölçekli hali) */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero__img--left { left: 0; }
  .hero__img--right { right: 0; }
}

@media (max-width: 1023px) {
  .hero__scroll { display: none; }
}

/* Mobil (<768) — Figma "Mobil" frame (428); 428–767'de --mob ile oranlı büyür */
@media (max-width: 767px) {
  .hero { height: calc(926 * var(--mob)); }
  .hero__title--1 { left: 0; top: calc(104 * var(--mob)); }
  .hero__title--2 { left: 0; right: auto; top: calc(644 * var(--mob)); }
  .hero__img--center {
    left: calc(var(--margin) * -1);   /* sayfa kenarına sıfır */
    top: calc(170 * var(--mob));
    width: calc(299 * var(--mob));
    height: calc(315 * var(--mob));
    transform: none;
  }
  .hero__img--right {
    right: calc(var(--margin) * -1);  /* sayfa kenarına sıfır */
    top: calc(351 * var(--mob));
    width: calc(204 * var(--mob));
    height: calc(246 * var(--mob));
  }
  .hero__img--left {
    left: calc(106 * var(--mob));
    top: calc(477 * var(--mob));
    width: calc(150 * var(--mob));
    height: calc(189 * var(--mob));
    z-index: 1; /* sağ görselin üstünde (DOM sırası) */
  }
  .hero__desc {
    left: 0;
    right: auto;
    top: calc(764 * var(--mob));
    width: 355px;
  }
}

/* =========================================================
   MANIFESTO — sticky slogan + akan görseller
   About bunun üstünden kayar (z-index) ve sloganı örter.
   Sticky eleman kendi parent'ının dışına çıkamaz; metnin About
   gelene kadar sabit kalması için section (stick + metin yüksekliği)
   kadar uzatılır, About aynı miktarda negatif margin ile üstüne biner.

   --ms-size  görsel boyut ölçeği (≤1512 container/1608, ≥1729 100vw/1728)
   --ms-pos   konum/yükseklik ölçeği (≥1729 100vw/1728, 768–1023 container/904)
   ========================================================= */

.manifesto {
  position: relative;
  z-index: 1;
  height: calc(1776 * var(--ms-pos) + var(--manifesto-overlap));
  background: var(--c-bg);
}

.manifesto__inner {
  position: relative;
  height: 100%;
  /* Flex: sticky metnin margin-top'u section'ın dışına "collapse" etmesin
     (block akışında çocuk margin'i parent'a taşıyordu, section 323px aşağı kayıyordu) */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.manifesto__img {
  position: absolute;
  z-index: 1;
  margin: 0;
}
.manifesto__img--top {
  left: 50%;
  top: calc(235 * var(--ms-pos));
  width: calc(514 * var(--ms-size));
  height: calc(524 * var(--ms-size));
  transform: translateX(-50%);
}
.manifesto__img--left {
  left: calc(var(--margin) * -1);
  top: calc(938 * var(--ms-pos));
  width: calc(711 * var(--ms-size));
  height: calc(838 * var(--ms-size));
}
.manifesto__img--right {
  right: calc(var(--margin) * -1);
  top: calc(776 * var(--ms-pos));
  width: calc(711 * var(--ms-size));
  height: calc(676 * var(--ms-size));
}

/* Sticky metin: section başında 323px aşağıda durur, viewport'ta 323px'te yapışır.
   Satır kırılmaları markup'ta sabit (<br>) — her genişlikte 3 satır. */
.manifesto__text {
  position: sticky;
  top: var(--manifesto-stick);
  z-index: 2;
  /* Akıştaki başlangıç konumu (Figma offset). Margin kutunun dışında
     kaldığı için sticky hesabını bozmaz; padding olsaydı iki kat kayardı. */
  margin: var(--manifesto-flow) 0 0;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-manifesto);
  line-height: var(--lh-manifesto);
  color: var(--c-title-soft);
  white-space: nowrap;
}
/* About tamamen örttüğünde: görünmez ve seçilemez (JS) */
.manifesto__text.is-covered {
  visibility: hidden;
  pointer-events: none;
}

/* Mobil (<768); 428–767'de --mob ile oranlı büyür */
@media (max-width: 767px) {
  .manifesto { height: calc(1171 * var(--mob) + var(--manifesto-overlap)); }
  .manifesto__img--top { top: calc(90 * var(--mob)); width: calc(294 * var(--mob)); height: calc(300 * var(--mob)); }
  .manifesto__img--left { top: calc(450 * var(--mob)); width: calc(312 * var(--mob)); height: calc(367 * var(--mob)); }
  .manifesto__img--right { top: calc(877 * var(--mob)); width: calc(309 * var(--mob)); height: calc(294 * var(--mob)); }
}