/* ──────────────────────────────────────────────────────────────
   Hakkında sayfası (hakkimizda.html / about-us.html). Uber "Hakkımızda" düzeni örnek alındı:
   görselsiz hero (başlık + alt başlık + kısa metin), metin + görsel bölümü, sade bilgi bölümleri,
   simgeli bağlantı kartları. Ölçek Nasıl Çalışır ile aynı: başlık ≤52px, bölüm başlığı ≤36px, metin 16–18px.
   ────────────────────────────────────────────────────────────── */
.vg-about { font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #000; }

/* Hero: üst bar hariç ekranın tamamını kaplayan, kenardan kenara fotoğraf; sol altta beyaz metin; okunabilirlik için koyu geçiş */
.vg-about-hero { position: relative; display: flex; align-items: flex-end; min-height: 480px; min-height: clamp(480px, calc(100svh - 64px), 860px); padding: 64px 0 56px; overflow: hidden; color: #fff; background: #1b2230; }
.vg-about-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.vg-about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.65) 100%), linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%); }
.vg-about-hero .container { position: relative; z-index: 1; }
.vg-about-hero__title { margin: 0 0 16px; font-family: inherit; font-size: clamp(36px, 4.4vw, 52px); font-weight: 600; line-height: 1.15; color: #fff; }
.vg-about-hero__sub { max-width: 760px; margin: 0 0 12px; font-family: inherit; font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; line-height: 1.35; color: #fff; }
.vg-about-hero__lead { max-width: 640px; margin: 0; font-size: 18px; line-height: 1.6; color: #e6e6e6; }

/* Bölümler */
.vg-about-section { padding: 64px 0; }
.vg-about-title { margin: 0 0 16px; font-family: inherit; font-size: clamp(28px, 3vw, 36px); font-weight: 600; line-height: 1.2; color: #000; }
.vg-about-text { max-width: 560px; margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: #5e5e5e; }
.vg-about-text--lg { max-width: 760px; font-size: 18px; line-height: 1.7; }
/* Metin + fotoğraf (Neye önem veriyoruz): masaüstünde solda iki paragraf, sağda fotoğraf;
   mobilde fotoğraf iki paragrafın arasına girer (başlık + 1. paragraf, fotoğraf, 2. paragraf) */
.vg-about-split { display: grid; gap: 24px; }
.vg-about-split__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: #f3f3f3; }
.vg-about-split__a .vg-about-text, .vg-about-split__b .vg-about-text { margin-bottom: 0; }
@media (min-width: 992px) {
  .vg-about-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; row-gap: 16px; }
  .vg-about-split__a { grid-column: 1; grid-row: 1; align-self: end; }
  .vg-about-split__b { grid-column: 1; grid-row: 2; align-self: start; }
  .vg-about-split__img { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; max-width: 600px; }
}

.vg-about-text--lg { max-width: 760px; font-size: 18px; line-height: 1.7; }
.vg-about-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 16px; font-weight: 600; color: #000; text-decoration: none; }
.vg-about-arrow:hover { color: #c8414b; }
.vg-about-arrow svg { width: 18px; height: 18px; }

/* Bağlantı kartları: simge, başlık, cümle, bağlantı */
.vg-about-cards { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 768px) { .vg-about-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vg-about-card { display: flex; flex-direction: column; align-items: flex-start; }
.vg-about-card__icon { width: 40px; height: 40px; margin-bottom: 16px; color: #000; }
.vg-about-card h3 { margin: 0 0 6px; font-family: inherit; font-size: 20px; font-weight: 600; color: #000; }
.vg-about-card p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: #5e5e5e; }
.vg-about-corp { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid #e6e6e6; font-size: 14px; color: #8a8a8a; }
.vg-about-section--first { padding-top: 104px; }
.vg-about-section--last { padding-bottom: 112px; }

@media (max-width: 767.98px) {
  .vg-about-hero { min-height: 480px; min-height: clamp(480px, calc(100svh - 60px), 760px); padding: 48px 0 36px; }
  .vg-about-hero__img { object-position: 70% 50%; }
  .vg-about-hero__lead { font-size: 17px; }
  .vg-about-section { padding: 44px 0; }
  .vg-about-section--first { padding-top: 64px; }
  .vg-about-section--last { padding-bottom: 80px; }
}