/* =========================================================
   Services — Home Section
   File: assets/css/pages/services.css
   ========================================================= */

.top-services{
  width: 100%;
  background: #0b0b0c; /* siyaha yakın */
  padding: clamp(44px, 6vw, 92px) 0;
  border-radius: 0;
}

/* Head */
.top-services__head{
  max-width: 860px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  text-align: left;
  color: #fff;
}
.top-services__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .92;
}
.top-services__title{
  margin:0 0 10px;
  font-size: clamp(26px, 2.7vw, 44px);
  line-height: 1.1;
}
.top-services__lead{
  margin:0;
  color: rgba(255,255,255,.75);
  font-size: 15px;
}

/* Cards */
.top-svcCard{
  background: #fff;                /* istenen */
  border-radius: 14px;             /* card radius olabilir */
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  height: 100%;
  display:flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}

.top-svcCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(0,0,0,.34);
}

.top-svcCard__media{
  aspect-ratio: 16 / 10;
  width: 100%;
  background: #f2f2f2;
  overflow: hidden;
}
.top-svcCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .5s ease;
}
.top-svcCard:hover .top-svcCard__media img{
  transform: scale(1.06);
}

.top-svcCard__body{
  padding: 16px 16px 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.top-svcCard__title{
  margin:0;
  font-weight: 900;
  font-size: 18px;
  color:#0f172a;
}

.top-svcCard__text{
  margin:0;
  color: rgba(15,23,42,.78);
  font-size: 14px;
  line-height: 1.55;
}

/* Buton (mevcut top-btn sistemin varsa ona uyar) */
.top-svcCard__btn{
  margin-top: 6px;
  align-self: flex-start;
}

/* Satırlar arası boşluk: Bootstrap g-4 zaten verir, destek olsun */
.top-services__grid{ margin-top: clamp(18px, 2.6vw, 28px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .top-svcCard,
  .top-svcCard__media img{ transition:none; }
  .top-svcCard:hover{ transform:none; }
}