/* ==========================================================================
   Atahan Otomasyon Makina — ana marka anlatımı (editoryal iki kolon)
   ========================================================================== */
.about__grid {
  display: grid;
  gap: var(--space-6);
}
.about__title { margin-top: var(--space-3); }

.about__statement {
  font-size: var(--fs-statement);
  line-height: 1.25;
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--color-text);
}

.about__text {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  max-width: 62ch;
  color: var(--color-muted);
}

@media (min-width: 992px) {
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }
  .about__intro { position: sticky; top: calc(var(--header-h-scrolled) + var(--space-6)); align-self: start; }
  .about__text { grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: none; }
}

/* Görsel kompozisyon */
.about__media {
  position: relative;
  display: grid;
  gap: var(--space-4);
  margin-top: clamp(var(--space-6), 4vw, var(--space-7));
}
.about__figure { border-radius: var(--radius); }
.about__figure--main { aspect-ratio: 4 / 3; }
.about__figure--side { aspect-ratio: 16 / 10; }

/* Tablet: iki görsel yan yana (alt alta çok uzuyordu) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .about__media { grid-template-columns: 3fr 2fr; }
  .about__figure--main,
  .about__figure--side { aspect-ratio: auto; height: 100%; min-height: 280px; }
}

.about__caption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-white);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}

@media (min-width: 992px) {
  .about__media {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }
  .about__media { padding-bottom: var(--space-7); }
  .about__figure--main { grid-column: 1 / span 8; grid-row: 1; aspect-ratio: 16 / 8; }
  .about__figure--side {
    grid-column: 9 / span 4;
    grid-row: 1;
    align-self: end;
    aspect-ratio: 4 / 3;
    transform: translateY(var(--space-7));
    border: 8px solid var(--color-light);
    box-shadow: var(--shadow-lg);
    z-index: 1;
  }
  .js .about__figure--side[data-reveal] { transform: translateY(calc(var(--space-7) + 24px)); }
  .js .about__figure--side[data-reveal].is-visible { transform: translateY(var(--space-7)); }
}

/* İlkeler — kart değil, ince çizgili liste */
.about__pillars {
  display: grid;
  gap: 0;
  margin-top: clamp(var(--space-7), 6vw, var(--space-9));
  border-top: 1px solid var(--color-line-strong);
}
.about__pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-line);
}
.about__pillar-no {
  grid-row: span 2;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary-text);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.about__pillar-title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.01em; }
.about__pillar p { color: var(--color-muted); font-size: var(--fs-small); max-width: 36ch; }

@media (min-width: 768px) {
  .about__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
}
@media (min-width: 1200px) {
  .about__pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--color-line); }
  .about__pillar {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-5) var(--space-5) 0;
    border-bottom: 0;
  }
  .about__pillar + .about__pillar { padding-left: var(--space-5); border-left: 1px solid var(--color-line); }
  .about__pillar-no { grid-row: auto; margin-bottom: var(--space-2); }
}