Glassmorphism Bildirim Toast'u

<button onclick="showToast('success')" class="toast-trigger">✅ Başarı</button>
<button onclick="showToast('error')" class="toast-trigger" style="background:#ff4757">❌ Hata</button>
<button onclick="showToast('info')" class="toast-trigger" style="background:#0984e3">ℹ️ Bilgi</button>

<div id="toastContainer"></div>

.toast-trigger {
  padding: 10px 20px; border: none; border-radius: 8px;
  background: #00b894; color: #fff; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif;
  font-size: 14px; margin: 5px; transition: 0.2s;
}
.toast-trigger:hover { transform: translateY(-2px); opacity: 0.9; }

#toastContainer {
  position: fixed; top: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 10px; z-index: 9999;
}

.toast {
  min-width: 280px; padding: 16px 20px; border-radius: 14px;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 15px;
  display: flex; align-items: center; gap: 12px;
  animation: toast-in 0.4s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
.toast.removing { animation: toast-out 0.3s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(120px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); max-height: 80px; }
  to   { opacity: 0; transform: translateX(80px); max-height: 0; padding: 0; }
}
.toast-icon { font-size: 22px; flex-shrink: 0; }
.toast-msg  { flex: 1; }
.toast-progress {
  position: absolute; bottom: 0; left: 0; height: 3px;
  border-radius: 0 0 14px 14px; animation: progress 3s linear forwards;
}
@keyframes progress { from { width: 100%; } to { width: 0; } }

const messages = {
  success: { icon: '✅', msg: 'İşlem başarıyla tamamlandı!', color: '#00b894' },
  error:   { icon: '❌', msg: 'Bir hata oluştu. Tekrar deneyin.', color: '#ff4757' },
  info:    { icon: 'ℹ️', msg: 'Yeni güncellemeler mevcut.', color: '#0984e3' }
};

function showToast(type) {
  const { icon, msg, color } = messages[type];
  const container = document.getElementById('toastContainer');
  const t = document.createElement('div');
  t.className = 'toast';
  t.style.borderTop = `3px solid ${color}`;
  t.innerHTML = `
    <span class="toast-icon">${icon}</span>
    <span class="toast-msg">${msg}</span>
    <div class="toast-progress" style="background:${color}"></div>
  `;
  container.appendChild(t);
  setTimeout(() => {
    t.classList.add('removing');
    setTimeout(() => t.remove(), 300);
  }, 3000);
}