/* Genel Uyarı Stili */
.custom-alert {
  position: fixed;
  top: 30%; /* Yukarıya kaydırdık */
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Daha belirgin gölge */
  padding: 25px 40px; /* Daha fazla padding ile büyüttük */
  z-index: 1050; /* Modal dahil her şeyin üzerinde */
  width: 600px; /* Genişliği artırdık */
  text-align: center;
  font-family: Arial, sans-serif;
  display: none; /* İlk başta görünmez */
  opacity: 0; /* Görünmezlik için başlangıç */
  animation-duration: 0.5s; /* Animasyon süresi */
  animation-fill-mode: forwards; /* Animasyon tamamlandığında durumunu korur */
}

/* Animasyonlar */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}

/* İçerik */
.custom-alert-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* Daha fazla boşluk */
}

/* Başlık Stili */
.custom-alert h2 {
  font-size: 26px; /* Daha büyük başlık fontu */
  font-weight: bold; /* Daha belirgin başlık */
  margin: 0;
}

/* Metin Stili */
.custom-alert p {
  font-size: 18px; /* Daha büyük metin fontu */
  margin: 0;
  color: #333;
}

/* İkon Stili */
.alert-icon {
  width: 60px; /* İkonu biraz daha büyüttük */
  height: 60px;
}

/* Başarı Durumu */
.custom-alert.success h2 {
  color: #4caf50;
}

.custom-alert.error h2 {
  color: #f44336;
}

.custom-alert.uyari h2 {
  color: #ffc107;
}

/* Başarı ve Hata ikonları */
.custom-alert.success .alert-icon {
  content: url('img/success-icon.png');
}

.custom-alert.error .alert-icon {
  content: url('img/error-icon.png');
}

.custom-alert.uyari .alert-icon {
  content: url('img/uyari-icon.png');
}




/* Responsive Tasarım */
@media (max-width: 768px) {
  .custom-alert {
    width: 80%; /* Mobilde daha dar yapalım */
    padding: 20px 30px;
    top: 25%; /* Yukarı kaydırdık */
  }

  .custom-alert h2 {
    font-size: 22px; /* Mobilde başlık fontu küçült */
  }

  .custom-alert p {
    font-size: 16px; /* Mobilde metin fontu küçült */
  }

  .alert-icon {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .custom-alert {
    width: 90%; /* Çok küçük ekranlar için daha da dar yapalım */
    padding: 20px 25px;
  }

  .custom-alert h2 {
    font-size: 20px; /* Daha küçük başlık fontu */
  }

  .custom-alert p {
    font-size: 14px; /* Daha küçük metin fontu */
  }

  .alert-icon {
    width: 45px;
    height: 45px;
  }
}