/* Kapsayıcı */
.img-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px; /* İsteğe bağlı: Köşeleri hafif yuvarlar */
}

.img-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  transition: transform 0.5s ease; /* Resme de hafif hareket katar */
}

/* Overlay (Katman) Ayarları */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Başlangıçta hafif karanlık (yazı okunsun diye) */
  background-color: rgba(0, 0, 0, 0.3); 
  transition: all 0.5s ease;
}

/* Yazı Ayarları */
.text {
  color: white;
  font-size: 22px;
  font-weight: 600;
  position: absolute;
  top: 80%;
  left: 50%;
  /* Yazıyı tam ortalar */
  transform: translate(-50%, -50%); 
  text-align: center;
  transition: all 0.5s ease;
  width: 100%; /* Uzun metinlerde taşmayı önler */
  padding: 0 10px;
}

/* --- HOVER EFEKTLERİ --- */

/* 1. Mouse gelince arka planı iyice karart */
.img-wrapper:hover .overlay {
  background-color: rgba(0, 0, 0, 0.7); 
}

/* 2. Mouse gelince yazıyı biraz büyüt ve yukarı kaydır */
.img-wrapper:hover .text {
  transform: translate(-50%, -50%) scale(1.1); /* %10 büyütür */
  text-shadow: 0px 4px 10px rgba(0,0,0,0.5); /* Hafif gölge ekler */
}

/* 3. (İsteğe bağlı) Mouse gelince arkadaki resim de hafifçe yakınlaşsın */
.img-wrapper:hover img {
  transform: scale(1.05);
}