.notification {
  position: fixed;
  padding: 12px 20px;
  margin: 10px;
  border-radius: 5px;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  z-index: 1000;
  width: 300px;
  font-size: smaller;
  text-align: center;
}


.notification.visible {
    opacity: 1;
}

.notification.top-center {
    top: -100px; /* Animasyon için başlangıç noktası */
    left: 50%;
    transform: translateX(-50%);
    animation: slideIn 0.5s forwards;
}

.notification.top-right {
    top: 20px;
    right: 20px;
}

.notification.bottom-right {
    bottom: 20px;
    right: 20px;
}

.notification.bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.notification.success {
    background-color: #28a745;
}

.notification.warning {
    background-color: #ffc107;
}

.notification.danger {
    background-color: #dc3545;
}

.notification.info {
    background-color: #17a2b8;
}

.notification.dark {
    background-color: #343a40;
}

/* Animasyon tanımlaması */
@keyframes slideIn {
    from {
        top: -100px; /* Animasyon için başlangıç noktası */
        opacity: 0;
    }
    to {
        top: 20px; /* Animasyon tamamlandığında konum */
        opacity: 1;
    }
}


/* Konfirmasyon penceresi arka planı için */
.confirmation-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Arka planı karartma */
  /* backdrop-filter: blur(5px); */
  z-index: 999; /* Konfirmasyon penceresinden önce gelir */
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Konfirmasyon penceresi görünür olduğunda */
.confirmation-overlay.visible {
  opacity: 1;
}

/* Konfirmasyon penceresi stili */
.confirmation {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 8px;
  z-index: 1000; /* Diğerlerinden önce gelir */
  opacity: 0;
  /* transition: opacity 0.3s ease; */
}

/* Konfirmasyon penceresi görünür olduğunda */
.confirmation.visible {
  opacity: 1;
}

.confirmation-boxw {
  width: 430px;
  line-height: 21px;
  background-color: white;
  border-radius: 14px;
  padding: 20px;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.headerw {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.titlew {
  font-size: 18px;
  font-weight: 600;
  color: #334155;
}

.iconw {
  /* İkon burada hizalanır */
}

.messagew {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 34px;
  color: #7a889b;
  margin-top: 16px;
}

.actionsw {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btnw {
  padding: 5px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s ease;
}

.btnw.cancel {
  background-color: #e2e8f0;
  font-weight: bold;
  color: #333;
}.btnw.cancel:hover {
  background-color: #b3b3b3;
}

.btnw.error {
  background-color: #dc3545;
  font-weight: bold;
  color: #fff;
}.btnw.error:hover {
  background-color: #c82333;
}

.btnw.success {
  background-color: #28a745;
  font-weight: bold;
  color: #fff;
}.btnw.success:hover {
  background-color: #218838;
}

.btnw.warning {
  background-color: #ffc107;
  font-weight: bold;
  color: #fff;
}.btnw.warning:hover {
  background-color: #e0a800;
}

.btnw.info {
  background-color: #2196f3;
  font-weight: bold;
  color: #fff;
}.btnw.info:hover {
  background-color: #138496;
}