/* =============================================================
 * about.css — ABOUT US (494:870) SIFIRDAN pixel-perfect.
 * Container: 840px kolon (x=220-1060), sol hiza x=220.
 * Tüm font/konum tasarımdan sabit px. Bölümler tasarımın y-farklarıyla.
 * ============================================================= */

.about {
  --ab-col: 840px; /* İçerik genişliği (x220→1060) */
  --ab-blue: #0074ff;
  --ab-heading: #161614;
  --ab-body: #5c5c58;
  --ab-border: #e5e5e3;
}

/* Ortak 840px kolon (yatay ortalı) */
.about section {
  width: var(--ab-col);
  max-width: calc(100% - 48px);
  margin-inline: auto;
}

/* Ortak başlık stilleri */
.ab-h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 36px;
  line-height: 48px;
  color: var(--ab-heading);
  margin: 0;
}
.ab-h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 26px;
  line-height: 36px;
  color: #000;
  margin: 0;
}
.ab-h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: var(--ab-heading);
  margin: 0;
}

/* ---- Hero (494:882): başlık y179, lead y349 ---- */
.ab-hero {
  padding-top: 139px;
} /* frame y40 + 139 = 179 */
.ab-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 46px;
  line-height: 56px;
  margin: 0;
}
.ab-hero__title-1 {
  color: var(--ab-heading);
}
.ab-hero__title-2 {
  color: var(--ab-blue);
}
/* Lead (494:886): Manrope 18/28, w744, magenta bold vurgu. Başlık y293 biter → lead y349 (~56px sonra) */
.ab-hero__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ab-body);
  width: 744px;
  max-width: 100%;
  margin: 36px 0 0;
}
.ab-hero__lead .hl {
  font-weight: 700;
  color: var(--c-secondary);
}

/* ---- Mozaik (494:887): y596, 5 tile, 3 sütun 275px, ara 8px, konteyner 841×451 ----
   Grid: R11(sol üst 296) R16(orta 451) R12(sağ üst 149) / R15(sol alt 149) R14(sağ alt 296)
   Konumlar (x220 baz): R11 0/0, R16 283/0, R12 566/0, R15 0/302, R14 566/155 */
.ab-mosaic {
  margin-top: 193px; /* hero lead y349(+2 satır) → mozaik y596 */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.3304fr 0.0133fr 0.3126fr 0.0133fr 0.3304fr;
  gap: 0 8px;
  width: 100%;
  aspect-ratio: 841 / 451;
}
.ab-mosaic__tile {
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-surface);
}
.ab-mosaic__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* R11 sol üst: col1, y0 h296 → row1-3 */
.ab-mosaic__tile--1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
/* R16 orta uzun: col2, y0 h451 → row1-5 (tam) */
.ab-mosaic__tile--mid {
  grid-column: 2;
  grid-row: 1 / 6;
}
/* R12 sağ üst kısa: col3, y0 h149 → row1 */
.ab-mosaic__tile--tr {
  grid-column: 3;
  grid-row: 1;
}
/* R15 sol alt kısa: col1, y302 h149 → row5 */
.ab-mosaic__tile--bl {
  grid-column: 1;
  grid-row: 5;
}
/* R14 sağ alt: col3, y155 h296 → row3-5 */
.ab-mosaic__tile--br {
  grid-column: 3;
  grid-row: 3 / 6;
}

/* ---- How We Started (494:893): y1172 ---- */
.ab-started {
  margin-top: 125px;
} /* mozaik sonu y1047 → y1172 = 125px */
/* How We Started metni (494:895): Manrope 16/24 (Body/Genel İçerik) */
.ab-started__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-body);
  margin: 15px 0 0; /* başlık y1172 h36 → text y1223 */
}

/* =============================================================
 * TIMELINE (494:901 / component set 461:2295) — ATOMIC BUILD
 * Yatay çizgi y135. 5 item (x 6,157,308,459,610, w151). Nokta çizgide (y135).
 *   UP  (2019/2021/2023, i çift): yıl ÜSTTE, nokta çizgide, stem+açıklama ALTTA.
 *   DOWN(2020/2022, i tek): açıklama+stem ÜSTTE, nokta çizgide, yıl ALTTA.
 * ANİMASYON: beyaz perde soldan sağa WIPE (2.2s). Perdenin sol kenarı bir yılı geçince o yıl belirir.
 *   Trigger: scroll (viewport %25). Fallback: JS yoksa hepsi GÖRÜNÜR (perde gizli).
 * ============================================================= */
.ab-timeline {
  margin-top: 172px;
}
.ab-timeline__track {
  position: relative;
  width: 766px;
  max-width: 100%;
  height: 270px;
  margin-inline: auto;
}
.ab-timeline__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 135px;
  height: 1px;
  background: var(--ab-border);
}

/* Yıl item'ı: 151px, çizgi merkezli. Nokta tam y135'te. */
.ab-timeline__item {
  position: absolute;
  width: 151px;
  left: calc(6px + var(--i) * 151px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.ab-timeline__year {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ab-blue);
}
.ab-timeline__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #343434;
  width: 151px;
}
.ab-timeline__stem {
  width: 1px;
  height: 49px;
  background: var(--ab-border);
  flex: none;
}
.ab-timeline__dot {
  width: 24px;
  height: 24px;
  flex: none;
}
.ab-timeline__dot img {
  width: 100%;
  height: 100%;
  display: block;
}
/* UP: yıl(üst) → nokta(çizgide y135) → stem → açıklama(alt). Nokta y135 → item top = 135-28-12-12 = 83. */
.ab-timeline__item.is-up {
  top: 83px;
}
.ab-timeline__item.is-up .ab-timeline__year {
  order: 1;
}
.ab-timeline__item.is-up .ab-timeline__dot {
  order: 2;
}
.ab-timeline__item.is-up .ab-timeline__stem {
  order: 3;
}
.ab-timeline__item.is-up .ab-timeline__desc {
  order: 4;
}
/* DOWN: açıklama(üst) → stem → nokta(çizgide y135) → yıl(alt). Alt hizalı; bottom = 270-135-12-... */
.ab-timeline__item.is-down {
  top: 0;
  height: 187px;
  justify-content: flex-end;
}
.ab-timeline__item.is-down .ab-timeline__desc {
  order: 1;
}
.ab-timeline__item.is-down .ab-timeline__stem {
  order: 2;
}
.ab-timeline__item.is-down .ab-timeline__dot {
  order: 3;
}
.ab-timeline__item.is-down .ab-timeline__year {
  order: 4;
}

/* ---- WIPE animasyon ---- */
.ab-timeline__wipe {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 100%; /* default: perde çekili → içerik görünür (fallback) */
  background: #fff;
  z-index: 3;
  pointer-events: none;
}
.ab-timeline.is-animating .ab-timeline__wipe {
  animation: ab-tl-wipe 2200ms ease-in-out forwards;
}
@keyframes ab-tl-wipe {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}
/* Item fade: default görünür; animasyon sırasında perde geçince belirir.
   delay(ms) ≈ (item_x+75)/766 × 2200. 2019=232 2020=666 2021=1099 2022=1532 2023=1966 */
.ab-timeline.is-animating .ab-timeline__item {
  animation: ab-tl-show 200ms ease forwards;
  animation-delay: calc((var(--i) * 434ms) + 232ms);
  opacity: 0;
}
@keyframes ab-tl-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ---- What We Believe (494:896): başlık y1886, görsel y2036 ---- */
.ab-believe {
  margin-top: 125px;
} /* timeline sonu (~y1761) → y1886 */
/* What We Believe metni (494:900): Manrope 16/24 #5C5C58 */
.ab-believe__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-body);
  margin: 15px 0 0;
}
.ab-believe__media {
  margin-top: 27px;
  aspect-ratio: 841 / 205;
  border-radius: 2px;
  overflow: hidden;
  background: var(--c-surface);
}
.ab-believe__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- One Team. Three Engagement Models. (494:980): başlık y2366, panel y2430 ---- */
.ab-engagement {
  margin-top: 129px;
} /* believe görsel sonu → y2366 */
.ab-engagement__panel {
  position: relative;
  margin-top: 28px;
} /* başlık y2366 h36 → panel y2430 */
/* Üst görsel şerit (494:983): 841×259 */
.ab-engagement__bg {
  aspect-ratio: 841 / 259;
  border-radius: 2px;
  overflow: hidden;
  background: #d9d9d9;
}
.ab-engagement__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Intro (494:984): sol blok w369, y2709 (panel içi ~279) */
.ab-engagement__intro {
  margin-top: 20px;
  width: 369px;
  max-width: 100%;
}
.ab-engagement__intro-bold {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--ab-heading);
  margin: 0;
}
.ab-engagement__intro-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ab-body);
  margin: 15px 0 0;
}
/* 3 model (494:987/993/999): 270px, y2794 (panel içi ~364). Dikey ayraçlar arada. */
.ab-engagement__models {
  display: grid;
  grid-template-columns: repeat(3, 270px);
  gap: 0;
  justify-content: space-between;
  margin-top: 21px;
}
.ab-engagement__model {
  position: relative;
  padding: 11px 18px;
  min-height: 224px;
}
.ab-engagement__model:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 51px;
  height: 122px;
  width: 1px;
  background: var(--ab-border);
}
.ab-engagement__model-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #000;
  margin: 0;
}
.ab-engagement__model-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ab-body);
  text-align: justify;
  margin: 12px 0 0;
}
.ab-engagement__model-text strong {
  font-weight: 700;
  color: var(--ab-body);
}
.ab-engagement__more {
  position: absolute;
  left: 18px;
  bottom: 3px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--ab-heading);
  text-decoration: none;
}

/* ---- The People Behind the Products (494:902): başlık y3143, grid y3263 ---- */
.ab-team {
  margin-top: 114px;
}
.ab-team__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--ab-body);
  margin: 15px 0 0;
}
/* 8 üye: 3 sütun 267px, satır 305px, ara (507-488)=19px yatay / (3589-3568)=21px dikey */
.ab-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 267px);
  gap: 21px 19px;
  justify-content: space-between;
  margin-top: 21px;
}
/* Teammembers (1924:1921 vb., her kişi kendi Default/Hover component set'i): Default = renkli foto, sade.
   Hover = tasarımın kendi kroki/çizim PNG'ine crossfade + köşe + linkedin + isim şeridi.
   Fareyle üzerine gelince/focus'ta görsel değişir ve bilgiler belirir. */
.ab-member {
  position: relative;
  width: 267px;
  height: 305px;
  overflow: hidden;
  border: 1px solid var(--ab-border);
  border-radius: 2px;
  background: var(--c-surface);
}
/* Fotoğraf: tasarımda 305×305, yatay ortalı (x=-19). Default = gerçek renkli fotoğraf,
   hover = tasarımın kendi "Property 1=Hover" varyantındaki kişiye özel krokí/çizim PNG'i
   (CSS filtresiyle taklit değil, iki ayrı gerçek görsel arasında crossfade). */
.ab-member__photo {
  position: absolute;
  inset: 0;
}
.ab-member__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease;
}
.ab-member__photo-hover {
  opacity: 0;
}
.ab-member:hover .ab-member__photo-default,
.ab-member:focus-visible .ab-member__photo-default {
  opacity: 0;
}
.ab-member:hover .ab-member__photo-hover,
.ab-member:focus-visible .ab-member__photo-hover {
  opacity: 1;
}
/* Köşe (sağ üst 84px siyah üçgen) + LinkedIn + şerit: default GİZLİ, hover'da belirir */
.ab-member__corner {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 84px;
  height: 84px;
  background: #000;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ab-member__linkedin {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 25px;
  height: 25px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ab-member__linkedin img {
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0) invert(1);
}
.ab-member__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: #000;
  color: #fff;
  padding: 11px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.ab-member:hover .ab-member__corner,
.ab-member:focus-visible .ab-member__corner,
.ab-member:hover .ab-member__linkedin,
.ab-member:focus-visible .ab-member__linkedin {
  opacity: 1;
}
.ab-member:hover .ab-member__bar,
.ab-member:focus-visible .ab-member__bar {
  transform: none;
}
.ab-member__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
}
.ab-member__role {
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
}

/* ---- Recognized for Our Work (494:914): başlık y4345, daireler y4465 ---- */
.ab-awards {
  margin-top: 113px;
}
.ab-awards__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ab-body);
  margin: 15px 0 0;
}
/* 8 daire: 4 sütated 192px, 2 satır, ara (436-412)=24px */
.ab-awards__grid {
  display: grid;
  grid-template-columns: repeat(4, 192px);
  gap: 24px;
  justify-content: space-between;
  margin-top: 45px;
}
.ab-awards__circle {
  width: 192px;
  height: 192px;
  display: block;
}
.ab-awards__circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---- Keep Exploring (494:927): başlık y4998, kartlar y5038 ---- */
.ab-explore {
  margin-top: 117px;
  padding-bottom: 125px;
}
/* Keep Exploring kart (494:929): 264×264, beyaz+1px border, görsel üst 161px,
   başlık Lora 16/30 (left7/top168), isim Manrope 16/24, rol Manrope 14/20 #8D8D8D */
.ab-explore__grid {
  display: grid;
  grid-template-columns: repeat(3, 264px);
  gap: 0;
  justify-content: space-between;
  margin-top: 25px;
}
.ab-explore__card {
  display: block;
  width: 264px;
  height: 264px;
  border: 1px solid var(--ab-border);
  border-radius: 2px;
  background: #fff;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: border-color 0.15s linear;
}
.ab-explore__card:hover {
  border-color: var(--c-secondary);
}
.ab-explore__img {
  display: block;
  height: 161px;
  background: var(--c-surface);
}
.ab-explore__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ab-explore__img-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: #000;
  margin: 8px 0 0;
  padding-inline: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-explore__name {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000;
  margin: 6px 0 0;
  padding-inline: 7px;
}
.ab-explore__role {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8d8d8d;
  margin: 0;
  padding-inline: 7px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .about section {
    width: 100%;
  }
  .ab-engagement__models {
    grid-template-columns: 1fr;
    height: auto;
  }
  /* Keep Exploring: kademeli düşüş 3→2→1 — kartlar HER ZAMAN orijinal boyutunda (264×264px),
     auto-fit ile sütun sayısı sığdığı kadar otomatik ayarlanır, ortalanmış. */
  .ab-explore__grid {
    grid-template-columns: repeat(auto-fit, 264px);
    justify-content: center;
    gap: 16px;
  }
  /* Team (The People Behind the Products): kartlar HER ZAMAN orijinal boyutunda (267×305px,
     büyümez/küçülmez) — auto-fit ile sütun sayısı sığdığı kadar otomatik ayarlanır
     (3 sütun → sığmazsa 2 → sığmazsa 1), ortalanmış. */
  .ab-team__grid {
    grid-template-columns: repeat(auto-fit, 267px);
    justify-content: center;
  }
  /* Awards: daireler HER ZAMAN orijinal boyutunda (192×192px, büyümez/küçülmez) — auto-fit ile
     sütun sayısı sığdığı kadar otomatik ayarlanır (4 → 3 → 2 → 1), ortalanmış. */
  .ab-awards__grid {
    grid-template-columns: repeat(auto-fit, 192px);
    justify-content: center;
  }
  .ab-hero__title {
    font-size: 34px;
    line-height: 42px;
  }
  /* Timeline: masaüstü yerleşimi (mutlak pozisyon, sabit 151px aralıklarla yatay dizilim,
     yıl üstte/altta zigzag) dar ekranlarda okunmuyordu. Belirli bir genişlikten sonra tamamen
     DİKEY bir listeye çeviriyoruz: soldaki dikey çizgi + noktalar, sağında yıl/açıklama —
     yatay scroll YOK, her item kendi satırında, sırayla okunuyor. */
  .ab-timeline {
    margin-top: 64px;
  }
  .ab-timeline__track {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-left: 12px;
  }
  .ab-timeline__line {
    /* Yatay üst çizgi yerine dikey bağlayıcı çizgi: soldan, tüm item'ların arkasından geçer. */
    left: 12px;
    top: 12px;
    bottom: 12px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .ab-timeline__item,
  .ab-timeline__item.is-up,
  .ab-timeline__item.is-down {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 20px;
  }
  /* Sıra: nokta (solda, çizginin üstünde) → yıl+açıklama (sağda, alt alta). Up/down zigzag
     mobilde anlamsız, tüm item'lar aynı düzende. */
  .ab-timeline__item .ab-timeline__dot,
  .ab-timeline__item.is-up .ab-timeline__dot,
  .ab-timeline__item.is-down .ab-timeline__dot {
    order: 1;
    margin-left: -12px;
  }
  .ab-timeline__item .ab-timeline__stem,
  .ab-timeline__item.is-up .ab-timeline__stem,
  .ab-timeline__item.is-down .ab-timeline__stem {
    display: none;
  }
  .ab-timeline__item .ab-timeline__year,
  .ab-timeline__item.is-up .ab-timeline__year,
  .ab-timeline__item.is-down .ab-timeline__year {
    order: 2;
    flex: none;
    width: 52px;
  }
  .ab-timeline__item .ab-timeline__desc,
  .ab-timeline__item.is-up .ab-timeline__desc,
  .ab-timeline__item.is-down .ab-timeline__desc {
    order: 3;
    width: auto;
    flex: 1 1 auto;
  }
}
/* Team: 2 sütun dar ekranda da sığmadığı noktada (kart min. ~267px + gap) 1 sütuna düşer. */
@media (max-width: 560px) {
  .ab-team__grid {
    grid-template-columns: 1fr;
  }
}