/* Ortak gradient renkli yazılar */
.gradient-text {
  background: linear-gradient(90deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  transition: background 0.5s ease;
}

/* Şehir ismi */
.city-name {
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Hizmet Bölgeleri başlığı */
h2.gradient-text {
  font-size: 1.8rem;
}

/* Grid yapı */
.district-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: -20px;
}

.district-card {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  margin-left: 20px;
  margin-right: 20px;
}

.district-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.district-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-body {
  padding: 0.75rem;
}

.card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.btn-sm {
  font-size: 0.8rem;
}


/* Container üst boşluğu navbar'a yakın */
/* padding-top değerini artırarak veya azaltarak tüm içeriyi yukarı/aşağı taşıyabilirsin */
.container {
  padding-top: 0; /* Önerilen: 0 ile navbar'a yapışık */
  padding-bottom: 5rem; /* Alt boşluğu ayarlamak için değiştirilebilir */
  margin-top: -150px; 
}

/* Grid yapı */
/* margin-top ile card'ları başlığa göre yukarı/aşağı çekebilirsin */
.district-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem; /* Negatif değer vererek yukarı taşıyabilirsin */
}

/* Ortak gradient renkli yazılar */
.gradient-text {
  background: linear-gradient(90deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  transition: background 0.5s ease;
}

/* Şehir ismi */
/* margin-bottom ile alt başlık ve card'lar arasındaki boşluğu ayarlayabilirsin */
.city-name {
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: -50px;  /* şehir adını yukarı taşır */

  margin-bottom: 0; /* Daha küçük yaparsan başlık ve gradient başlık birbirine yaklaşır */
}

/* Hizmet Bölgeleri başlığı */
/* margin-bottom ile grid ile aralığı ayarlayabilirsin */
h2.gradient-text {
  font-size: 1.8rem;
  margin-bottom: 1rem; /* Küçültüp grid'i yukarı taşıyabilirsin */
}

/* Kartlar */
.district-card {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;

  /* Elle yukarı taşıma için margin-top ekleyebilirsin */
  /* margin-top: -20px; gibi negatif değer deneyebilirsin */
}

.district-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.district-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-body {
  padding: 0.75rem;
}

.card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.btn-sm {
  font-size: 0.8rem;
}