/* =========================================================
   SECTIONS — About / Covers / Rig
   Dikey mesafeler Figma'dan piksel; yatay ölçüler grid'e oranlı
   ========================================================= */

/* Ortak: başlık → açıklama 160px (desktop) / 110px (mobil) */
.section__desc {
  margin-top: 45px;          /* 92px başlık kutusu 115px: 160 − 115 = 45 */
  font-size: 16px;
  line-height: 32px;
  color: var(--c-white);
}

/* ---------- ABOUT (beyaz zemin, koyu header) ---------- */
.about {
  position: relative;
  z-index: 2;                /* manifesto sticky metninin üstünden kayar */
  margin-top: calc(-1 * var(--manifesto-overlap));
  padding: 103px 0 196px;
  background: var(--c-white);
  color: var(--c-bg);
}
.about .section-title { color: var(--c-gray); }

.about__grid {
  display: grid;
  grid-template-columns:
    calc(7 * var(--col) + 6 * var(--gutter))
    calc(5 * var(--col) + 4 * var(--gutter));
  column-gap: var(--gutter);
  margin-top: 46px;          /* başlık kutusu altı → paragraf: 264 − 103 − 115 */
}

.about__bio {
  padding-right: calc(var(--col) + var(--gutter)); /* Figma: 788px metin genişliği */
  font-size: 16px;
  line-height: 32px;
}
.about__bio p + p { margin-top: 32px; } /* boş satır */

.about__side .sub-title {
  font-size: 32px;
  color: var(--c-gray);
}
.about__list {
  list-style: none;
  margin: 24px 0 0;          /* 32px başlık kutusu 40px: 64 − 40; ul'nin varsayılan alt marjı sıfır */
  padding: 0;
  font-size: 14px;
  line-height: 26px;
}
.about__list h4 {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
}
.about__list h4.is-bold { font-weight: 700; }
.about__list li + li { margin-top: 26px; } /* boş satır */
.about__side .sub-title + .sub-title,
.about__list + .sub-title { margin-top: 42px; }

/* ---------- COVERS ---------- */
.covers {
  position: relative;
  z-index: 2;
  padding-top: 104px;
  background: var(--c-bg);
}

.covers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  margin-top: 34px;          /* buton üstü: 253 − 104 − 115; açıklama flex ile ortalanınca 264 */
}
.covers__head .section__desc { margin-top: 0; } /* hizalama flex'te, margin burada olmasın */

/* Follow butonu — hover'da sadece metin beyaz */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 10px 20px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 32px;
  color: var(--c-light);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.btn-outline:hover,
.btn-outline:focus-visible { color: var(--c-white); }

.covers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 93px;          /* buton altı → kartlar (açıklama altından 104) */
}

/* Kart: görsel (radius 20, CSS'te) + ikon + başlık */
.cover-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
  text-align: left;
}
.cover-card__media {
  width: 100%;
  aspect-ratio: 840 / 1260;
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
}
.cover-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 32px;
  color: var(--c-white);
}
.cover-card__meta img { width: 34.28px; height: 24px; }

/* Covers → Rig geçiş görseli: sayfa kenarından 20px */
.outro {
  position: relative;
  z-index: 2;
  padding-top: 207px;
  background: var(--c-bg);
}
.outro__img {
  width: calc(100% - 40px);
  margin: 0 20px;
  aspect-ratio: 1687 / 940;
}

/* ---------- RIG ---------- */
.rig {
  position: relative;
  z-index: 2;
  padding-top: 60px;
  background: var(--c-bg);
}

/* Üçlü kolaj: container'a oranlı kutu, yanlar ortadakinin üstünde */
.rig__collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1608 / 941;
  margin-top: 45px;
}
.rig__collage figure {
  position: absolute;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}
.rig__collage--strat  { left: 29.17%; top: 18.7%;  width: 41.6%;  height: 81.3%;  z-index: 1; }
.rig__collage--pedal  { right: var(--col); top: 0;  width: 36.72%; height: 37.46%; z-index: 2; }
.rig__collage--hiwatt { left: var(--col);  top: 37.4%; width: 29.27%; height: 33.3%; z-index: 2; }

/* Alt iki kolon: görsel container dışına (sol 20px), metin 5 kolon */
.rig__setup {
  display: flex;
  align-items: flex-start;
  margin-top: 102px;
}
.rig__setup-img {
  flex: 0 0 auto;
  width: 44.96%;                              /* 723 / 1608 */
  margin: 0 0 0 calc(20px - var(--margin));  /* sayfa kenarından 20px */
  aspect-ratio: 723 / 442;
}
.rig__setup-text {
  width: calc(5 * var(--col) + 4 * var(--gutter));
  margin-left: auto;
  font-size: 14px;
  line-height: 26px;
}
.rig__setup-text .sub-title {
  font-size: 24px;
  color: var(--c-light);
  margin-top: 48px;
}
.rig__setup-text .sub-title + p,
.rig__setup-text .sub-title + ul { margin-top: 16px; }
.rig__setup-text ul,
.rig__setup-text p.rig__line {
  font-size: 16px;
  line-height: 26px;
}
.rig__setup-text ul { list-style: none; padding: 0; margin: 0; }
.rig__setup-text li strong { font-weight: 500; }
.rig__setup-text ul + .sub-title,
.rig__line + .sub-title { margin-top: 32px; }

/* ---------- 1024–1279 ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about__grid {
    grid-template-columns: 1fr;
    row-gap: 64px;
  }
  .about__bio { padding-right: 0; }
  .about__side { width: 100%; }
  .rig__setup { flex-direction: column; gap: 72px; }
  .rig__setup-img { width: calc(100% + var(--margin) - 20px); } /* sol 20px'ten container sağına */
  .rig__setup-text { width: 100%; margin-left: 0; }
}

/* ---------- Mobil ---------- */
@media (max-width: 1023px) {
  .section__desc { margin-top: 32px; } /* 62px başlık kutusu ~78: 110 − 78 */

  .about {
    padding: 72px 0 73px; /* Figma beyaz alan 3464'te biter (BANDS bloğu 72px aşağıda başlar) */
  }
  .about__grid {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .about__bio { padding-right: 0; }
  .about__side { margin-top: 72px; }
  .about__list { margin-top: 11px; width: 355px; max-width: 100%; }
  .about__side .sub-title + .sub-title,
  .about__list + .sub-title { margin-top: 42px; }

  .covers { padding-top: 72px; }
  .covers__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .covers__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
  }

  .outro { padding-top: 72px; }
  .outro__img { width: 100%; margin: 0; aspect-ratio: 428 / 238; }

  .rig { padding-top: 72px; }
  .rig__collage {
    aspect-ratio: 408 / 477;
    margin-top: 48px;
  }
  .rig__collage--pedal  { left: 0; right: auto; top: 0; width: 64.95%; height: 33.12%; }
  .rig__collage--strat  { left: 11.27%; top: 16.56%; width: 73.77%; height: 71.9%; }
  .rig__collage--hiwatt { left: auto; right: 0; top: 70.44%; width: 51.96%; height: 29.56%; } /* container sağına bloklu */

  .rig__setup {
    flex-direction: column;
    gap: 72px;
    margin-top: 72px;
  }
  .rig__setup-img {
    width: 100vw;
    margin: 0 calc(var(--margin) * -1);
    aspect-ratio: 428 / 261;
  }
  .rig__setup-text { width: 100%; margin-left: 0; }
  .rig__setup-text .sub-title { margin-top: 72px; }
  .rig__setup-text ul + .sub-title,
  .rig__line + .sub-title { margin-top: 32px; }
}

/* 768–1279: kartlar 2 sütun (mobil bloğundan sonra gelmeli, onu ezer) */
@media (min-width: 768px) and (max-width: 1279px) {
  .covers__grid { grid-template-columns: repeat(2, 1fr); }
}