/* ==========================================================================
   HAKKIMIZDA — Webflow "About" değerleri. Tokenlar style.css'ten gelir.
   ========================================================================== */

/* ---------- 1. Başlık + kartlar ---------- */
.about-hero { padding-top: calc(4.75rem + 8rem); text-align: center; }
.about-hero__label { margin-bottom: 1.5rem; }
.about-hero__title {
  max-width: 72rem; margin-inline: auto; /* Webflow: 1440px'te 1152px, iki satır */
  font-size: var(--h2); line-height: 1; letter-spacing: -.02em; font-weight: 500;
}

.about-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  max-width: 64rem; margin: 5rem auto 0; text-align: left;
}
.about-card {
  position: relative; overflow: clip;
  aspect-ratio: 1 / 1.85; border-radius: max(3vh, 1.25rem); background: var(--black);
}
.about-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 2. Giriş ---------- */
.about-intro { padding-block: 8rem; }
.about-intro__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); column-gap: 5rem; align-items: start;
}
.about-intro__text { display: flex; flex-direction: column; gap: 1.25rem; max-width: 46rem; }
.about-intro__text p { font-size: 1.125rem; line-height: 1.6; opacity: .75; }
.about-intro__text .about-intro__lead {
  margin-bottom: .5rem; font-size: 1.625rem; line-height: 1.3; letter-spacing: -.01em; opacity: 1;
}

/* ---------- 3. Yaklaşım ---------- */
.about-approach { padding-top: 10rem; }
.about-approach::before {
  content: ""; display: block; height: 1px; margin: 0 var(--gutter) 4rem; background: var(--grey-100);
}
.about-approach__label { display: flex; align-items: center; gap: .5rem; }
.about-approach__line {
  width: 3.5rem; height: 2px;
  background: linear-gradient(90deg, #ff4d00, #e7eb4c 31%, #0b90cb 68%, #0c59c1);
}
.about-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2rem; }
.about-step { display: flex; flex-direction: column; gap: 1.5rem; }
.about-step__media { aspect-ratio: 3 / 2; border-radius: 1.125rem; overflow: clip; background: var(--surface); }
.about-step__media video { width: 100%; height: 100%; object-fit: cover; }
.about-step__body { display: flex; flex-direction: column; gap: 1rem; }
.about-step__body p { color: var(--grey-400); }

/* ---------- 4. Değerler ---------- */
.about-values { display: flex; padding: 8rem var(--gutter) 0; }
.about-values__media {
  position: sticky; top: 0; flex: 0 0 50%; height: 100vh; padding-block: 3rem;
}
.about-values__frame {
  position: relative; height: 100%; border-radius: 1.75rem; overflow: clip; background: var(--surface);
}
.about-values__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
.about-values__frame img.is-active { opacity: 1; }
.about-values__list { flex: 0 0 50%; padding-block: 10vh; }
.about-value {
  display: flex; flex-direction: column; justify-content: center;
  padding: 20vh 15% 20vh 20%;
}
.about-value__img { display: none; }
.about-value__body { display: flex; flex-direction: column; gap: 1.75rem; max-width: 21rem; }
.about-value__body p { color: var(--grey-400); }

/* ---------- 5. Kurucular ---------- */
.about-founders { padding-block: 8rem; }
.about-founders__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8rem; row-gap: 5rem;
  max-width: 64rem; margin-top: 3rem;
}
.about-person { display: flex; flex-direction: column; gap: 1.125rem; }
.about-person img { width: 100%; aspect-ratio: 2 / 2.4; object-fit: cover; border-radius: .75rem; background: var(--surface); }
.about-person__name { font-size: 1rem; line-height: 1.3; font-weight: 500; letter-spacing: 0; }
.about-person__role { margin-top: .25rem; font-size: .875rem; color: var(--grey-300); }
.about-person__bio { margin-top: 1rem; font-size: .9375rem; line-height: 1.6; color: var(--grey-400); max-width: 28rem; }

/* ---------- Duyarlı ---------- */
@media (max-width: 991px) {
  .about-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 36rem; }
  .about-intro__grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-values { display: block; }
  .about-values__media { display: none; }
  .about-values__list { padding: 0; }
  .about-value { padding: 3rem 0; }
  .about-value__img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius-l); margin-bottom: 1.5rem; background: var(--surface);
  }
  .about-value__body { max-width: none; }
  .about-founders__grid { column-gap: 3rem; }
}
@media (max-width: 767px) {
  .about-hero { padding-top: calc(4.75rem + 4rem); }
  .about-hero__title { font-size: var(--h3); line-height: 1.05; } /* Webflow: is-mobile-h3 */
  .about-cards { margin-top: 3rem; }
  .about-intro { padding-block: 5rem; }
  .about-approach { padding-top: 5rem; }
  .about-approach::before { margin-bottom: 3rem; }
  .about-steps { grid-template-columns: 1fr; }
  .about-values { padding-top: 5rem; }
  .about-founders { padding-block: 5rem; }
  /* Biyografiler uzun: mobilde iki dar sütun yerine tek sütun */
  .about-founders__grid { grid-template-columns: 1fr; row-gap: 3.5rem; max-width: 26rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-values__frame img { transition: none; }
}