/* =============================================================
 * services.css — SERVICES (527:925) SIFIRDAN pixel-perfect.
 * Tasarımın sabit px'i (clamp/vw YOK). Container: site geneli .container (838px kolon, x=221).
 * ============================================================= */

/* ---- Hero (527:937): frame y40 h556. Başlık y173 h112, lead y300 h56 ---- */
.svc-hero { margin-top: 40px; padding-top: 133px; padding-bottom: 240px; }
.svc-hero__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 46px; line-height: 56px;
  color: var(--c-heading); margin: 0;
}
.svc-hero__lead {
  font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px;
  color: var(--c-body); width: 744px; max-width: 100%; margin: 15px 0 0;
}
.svc-hero__lead .hl { font-weight: 700; color: var(--c-secondary); }

/* ---- Our Expertise (528:1146 title y593 h36 / 528:1147 lead y629 h24 / Frame125 y676 h227) ---- */
.svc-expertise { margin-top: -3px; }
.svc-expertise__title {
  font-family: var(--font-heading); font-weight: 500; font-size: 26px; line-height: 36px;
  color: #000; margin: 0;
}
.svc-expertise__lead {
  font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px;
  color: var(--c-body); width: 744px; max-width: 100%; margin: 0;
}
.svc-expertise__media {
  margin-top: 23px; width: 838px; aspect-ratio: 838 / 227; max-width: 100%; border-radius: 2px;
  overflow: hidden; background: var(--c-surface);
}
.svc-expertise__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 6 servis kartı (2×3, "Services" 279×165) — TEK yatay çizgi (Vector 7, y1087,
   satır1/satır2 arası); dikey ayraç veya dış çerçeve YOK (metadata'da başka vector yok). ---- */
.svc-grid {
  margin-top: 19px;
  display: grid; grid-template-columns: repeat(3, 279px); justify-content: space-between;
}
.svc-card {
  position: relative; width: 279px; height: 165px; padding: 11px 18px; overflow: hidden;
  background: var(--c-bg); transition: background-color var(--transition);
}
.svc-card:nth-child(-n+3) { border-bottom: 1px solid var(--c-border); }
/* Hover (component set 541:1413 "Property 1=Hover"): yüzey rengi + ok kart dışından (gizli,
   left:-24/top:165) içine (left:0/top:141, sağ-alt köşede) çapraz kayarak beliriyor. */
.svc-card:hover { background: var(--c-surface); }
.svc-card__title {
  font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 30px;
  color: #000; margin: 0;
}
.svc-card__text {
  font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px;
  color: var(--c-body); width: 241px; max-width: 100%; margin: 6px 0 0;
}
/* Ok ikonu (541:1403/541:1409): Default left:-24/top:165 (kart dışında, overflow:hidden ile gizli)
   → Hover left:0/top:141 (sağ-alt köşede, kartın içinde). Tüm kartlarda AYNI davranış (kolon farkı yok). */
.svc-card__arrow {
  position: absolute; left: -24px; top: 165px; width: 24px; height: 24px;
  transition: left var(--transition), top var(--transition);
}
.svc-card:hover .svc-card__arrow { left: 0; top: 141px; }

/* ---- CTA (541:1389 title y1300 / 532:1228 text y1333 / Button y1391) ---- */
.svc-cta { margin-top: 48px; padding-bottom: 47px; }
.svc-cta__title {
  font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 28px;
  color: var(--c-heading); width: 841px; max-width: 100%; margin: 0;
}
.svc-cta__text {
  font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 28px;
  color: var(--c-body); width: 841px; max-width: 100%; margin: 5px 0 0;
}
.svc-cta .btn { margin-top: 2px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  /* Kartlar HER ZAMAN orijinal boyutunda (279×165px, büyümez/küçülmez) — auto-fit ile sütun
     sayısı sığdığı kadar otomatik ayarlanır (3 → 2 → 1), ortalanmış. Border-bottom kuralları
     artık nth-child'a göre değil, dinamik sütun sayısına göre yanlış olacağı için kaldırıldı
     (auto-fit'te satır sayısı ekran genişliğine göre değişken). */
  .svc-grid {
    grid-template-columns: repeat(auto-fit, 279px);
    justify-content: center;
    gap: 16px;
  }
  .svc-card:nth-child(-n+3) { border-bottom: 0; }
  .svc-card { border: 1px solid var(--c-border); }
  .svc-card__arrow { display: none; } /* dokunmatikte hover yok */
}
@media (max-width: 560px) {
  .svc-hero__title { font-size: 34px; line-height: 42px; }
}