/* ======================================== */
/*         HİZMETLER SLIDER BÖLÜMÜ          */
/* ======================================== */

.services-section {
  width: 100%;
  background: transparent;
  margin: 0;
  padding: 0 0 20px 0;
  position: absolute; /* hero'nun dibine sabitle */
  bottom: 0;
  left: 0;
  z-index: 2;
}

.services-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* Taşmayı engeller */
  padding: 0 40px;
}

.services-slider {
  display: flex;
  /* transition: transform 0.5s ease; - JavaScript ile kaydırma yapılacağı için kaldırıldı */
  gap: 30px;
  /* Yeni eklenen kaydırma stilleri */
  overflow-x: auto; /* Yatay kaydırmayı etkinleştir */
  -webkit-overflow-scrolling: touch; /* iOS'ta akıcı kaydırma */
  cursor: grab; /* Mouse ile kaydırma için imleç */
  user-select: none; /* Kaydırma sırasında metin seçimini engelle */
  scroll-behavior: smooth; /* Smooth scroll */
}

/* Scrollbar gizleme (tüm tarayıcılar için) */
.services-slider::-webkit-scrollbar {
    display: none;
}

.services-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.services-slider:active {
    cursor: grabbing;
}

.service-slide {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  flex: 0 0 250px;       /* grow=0 */
  min-width: 250px;
  max-width: 280px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  scroll-snap-align: start; /* Kaydırma noktası */
}

.service-slide:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.service-slide-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.service-slide-title {
  padding: 15px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
}

/* Slider butonları - JavaScript ile kaydırma yapılacağı için kaldırıldı */
/* .slider-nav, .slider-prev, .slider-next stilleri kaldırıldı */

/* ======================================== */
/*           RESPONSIVE DÜZENLEMELER        */
/* ======================================== */

/* (≤992px) BÜYÜK TABLET */
@media (max-width: 992px) {
  .services-section {
    /* Mobilde slider'ı akışa al */
    position: static !important;
    padding: 20px 0;
    background-color: #f8f9fa; /* Hafif arka plan */
    order: 2; /* location-info (order: 1) ve hero-content (order: 0) altı */
  }
  .services-container {
    padding: 0 20px;
  }
  .service-slide {
    min-width: 200px;
    max-width: 220px;
  }
  .service-slide-image {
    height: 150px;
  }
}

/* (≤768px) KÜÇÜK TABLET / BÜYÜK TELEFON */
@media (max-width: 768px) {
  .services-container {
    padding: 0 20px;
  }
  .service-slide {
    min-width: 160px;
    max-width: 180px;
  }
  .service-slide-image {
    height: 120px;
  }
  .service-slide-title {
    font-size: 14px;
  }
}

/* (≤480px) KÜÇÜK TELEFON */
@media (max-width: 480px) {
  .services-container {
    padding: 0 10px;          /* Kenar boşluklarını 10px'e düşür */
  }
  .services-slider {
    gap: 15px;                /* Kart arası boşluk 15px */
  }
  .service-slide {
    flex: 1 0 140px;          /* Kart min genişliği 140px */
    min-width: 140px;
  }
  .service-slide-image {
    height: 110px;            /* Görsel yüksekliği */
  }
  .service-slide-title {
    font-size: 13px;
  }
}