#site-yonetim .kutu {
  transition: transform 0.3s ease;
}

#site-yonetim .kutu h3 {
  font-size: clamp(1.5rem, 1.6vw, 1.7rem);
  transition: color 0.3s ease;
}

#site-yonetim .kutu:hover {
  transform: translateX(10px);
}

#site-yonetim .kutu:hover h3 {
  color: var(--color-renk-2);
}

/* 3 görseli tutan parent'a bu class'ı ver */
#site-yonetim .gorsel-alani {
  position: relative;
  min-height: 500px; /* görsel yüksekliğine göre değiştirebilirsin */
}

/* Görseller aynı noktada üst üste dursun */
#kolay-yonetim-img,
#seo-odakli-yazilim-img,
#ozel-tasarim-img {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Görsellerin içindeki img varsa tam otursun */
#kolay-yonetim-img img,
#seo-odakli-yazilim-img img,
#ozel-tasarim-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* İlk açılışta görünen görsel */
#kolay-yonetim-img {
  opacity: 1;
  visibility: visible;
}