/* ==========================================================================
   HAKKIMIZDA SAYFASI
   ========================================================================== */

.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
@media (max-width: 960px) { .about-intro { grid-template-columns: 1fr; } }
.about-intro__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; }
.about-intro p + p { margin-top: var(--space-4); }
.about-intro__text p { color: var(--color-text-muted); line-height: 1.9; }

/* ---- Timeline ---- */
.timeline { position: relative; max-width: 860px; margin-inline: auto; }
.timeline::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--color-hover), transparent); }
.timeline__item { position: relative; padding-left: 60px; padding-bottom: var(--space-8); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: 11px; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-bg); border: 3px solid var(--color-hover); box-shadow: 0 0 0 6px rgba(37,99,235,0.12);
}
.timeline__item h3 { font-size: var(--fs-h3); margin-bottom: 4px; }
.timeline__item span { color: var(--color-hover); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; }
.timeline__item p { color: var(--color-text-muted); margin-top: 6px; }

/* ---- Galeri ---- */
.about-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.about-gallery .media-frame { aspect-ratio: 1/1; border-radius: var(--radius-md); }
.about-gallery a:first-child .media-frame,
.about-gallery a:nth-child(4) .media-frame { aspect-ratio: 1/2.08; grid-row: span 2; }
@media (max-width: 900px) { .about-gallery { grid-template-columns: repeat(2, 1fr); } .about-gallery a:first-child .media-frame, .about-gallery a:nth-child(4) .media-frame { aspect-ratio: 1/1; grid-row: span 1; } }

/* ---- Değerler ---- */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 860px) { .values-grid { grid-template-columns: 1fr; } }
.value-card { padding: var(--space-6); }
.value-card svg { color: var(--color-hover); margin-bottom: var(--space-4); }
.value-card h3 { margin-bottom: var(--space-2); font-size: var(--fs-h3); }
.value-card p { color: var(--color-text-muted); font-size: var(--fs-small); }