/* ============================================================
   Bildirimler — SweetAlert2 görünümü, kütüphanesiz
   ============================================================
   Sonuç mesajı sayfanın en üstünde ince bir şeritti: liste aşağı
   kaydırılmışken kaydedilen kaydın sonucu ekranın dışında kalıyor,
   kullanıcı "oldu mu" diye tekrar deniyordu.

   PANEL VE VİTRİN AYNI DOSYAYI KULLANIYOR. İki kopya dururken birinde
   düzeltilen bir davranış diğerinde eskisi gibi kalırdı.

   DURUM RENKLERİ BURADA TANIMLI: panel bunları kendi değişkenlerinden
   veriyor, vitrinin ise başarı/hata paleti hiç yoktu — bildirimlerin
   tamamı renksiz çıkıyordu. Aşağıdaki değerler yalnızca EKSİKSE
   devreye giriyor; panelin kendi teması (koyu görünüm dâhil) olduğu
   gibi kazanıyor. */

:root {
  --bildirim-success: var(--success, #15803d);
  --bildirim-warning: var(--warning, #a35c00);
  --bildirim-danger:  var(--danger,  #b42318);
  --bildirim-info:    var(--info,    #175cd3);
  --bildirim-accent:  var(--accent,  #b08d3f);
  --bildirim-zemin2:  var(--surface-2, rgba(127, 127, 127, .14));
  --bildirim-solgun:  var(--text-faint, var(--text-muted, #64748b));
}

/* ---------- Sunucunun bastığı şerit ----------
   JS bunu köşedeki kutuya çeviriyor ve şeridi kaldırıyor. Betik
   çalışmazsa şerit olduğu yerde kalıyor: mesajın sessizce kaybolmasındansa
   eski biçimiyle görünmesi yeğdir. */

.alert {
  display: flex;
  gap: .6rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid transparent;
  font-size: .9rem;
  margin-bottom: .75rem;
}
.alert--success { background: var(--success-soft, #dcf5e5); border-color: var(--bildirim-success); color: var(--bildirim-success); }
.alert--error   { background: var(--danger-soft,  #fdeae8); border-color: var(--bildirim-danger);  color: var(--bildirim-danger); }
.alert--warning { background: var(--warning-soft, #fdefd8); border-color: var(--bildirim-warning); color: var(--bildirim-warning); }
.alert--info    { background: var(--info-soft,    #e4edfd); border-color: var(--bildirim-info);    color: var(--bildirim-info); }

.swal-toast-alan {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(380px, calc(100vw - 2rem));
}

.swal-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .7rem .75rem .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
  overflow: hidden;
  animation: swal-gir .22s ease-out;
}
.swal-toast--cikis { animation: swal-cik .18s ease-in forwards; }
.swal-toast__metin { font-size: .88rem; line-height: 1.35; color: var(--text); }
.swal-toast__kapat {
  padding: 0 .2rem;
  background: none;
  border: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--bildirim-solgun);
  cursor: pointer;
}
.swal-toast__kapat:hover { color: var(--text); }

/* Süre çubuğu: mesajın ne zaman kapanacağı görünüyor, imleç üstündeyken
   duruyor — okunacak mesaj okunmadan kaybolmasın */
.swal-toast__cizgi {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: .35;
  transform-origin: left;
  animation: swal-sure linear forwards;
}
.swal-toast--durdu .swal-toast__cizgi { animation-play-state: paused; }

.swal-toast--success { color: var(--bildirim-success); }
.swal-toast--info    { color: var(--bildirim-info); }
.swal-toast--warning { color: var(--bildirim-warning); }
.swal-toast--error,
.swal-toast--danger  { color: var(--bildirim-danger); }

/* ---------- Ortadaki onay penceresi ---------- */

.swal-katman {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(16, 24, 40, .45);
  animation: swal-solgun .15s ease-out;
}

.swal-kutu {
  width: 100%;
  max-width: 400px;
  padding: 1.6rem 1.4rem 1.2rem;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .3);
  text-align: center;
  animation: swal-buyu .2s ease-out;
}
.swal-baslik { margin: .9rem 0 .3rem; font-size: 1.15rem; font-weight: 640; color: var(--text); }
.swal-metin  { margin: 0 0 1.2rem; font-size: .92rem; line-height: 1.5; color: var(--text-muted); }
.swal-dugmeler { display: flex; gap: .5rem; justify-content: center; }
.swal-btn {
  padding: .55rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 560;
  cursor: pointer;
}
.swal-btn--onay  { background: var(--bildirim-danger); color: #fff; }
.swal-btn--onay:hover { filter: brightness(.94); }
.swal-btn--iptal { background: var(--bildirim-zemin2); border-color: var(--border); color: var(--text-muted); }
.swal-btn--iptal:hover { color: var(--text); }

/* ---------- İkonlar ----------
   Yuvarlak çerçeve + içindeki işaret; hepsi CSS, ek dosya yok. */

.swal-ikon {
  position: relative;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 50%;
  flex: none;
}
.swal-kutu > .swal-ikon { width: 64px; height: 64px; margin: 0 auto; border-width: 3px; }

.swal-ikon::before,
.swal-ikon::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }

/* Onay işareti: iki çizgi, uzun kolu döndürülmüş */
.swal-ikon--basari { color: var(--bildirim-success); }
.swal-ikon--basari::before {
  width: 26%; height: 10%; left: 20%; top: 52%;
  transform: rotate(45deg); transform-origin: left center;
}
.swal-ikon--basari::after {
  width: 48%; height: 10%; left: 34%; top: 60%;
  transform: rotate(-50deg); transform-origin: left center;
}

/* Çarpı */
.swal-ikon--hata { color: var(--bildirim-danger); }
.swal-ikon--hata::before,
.swal-ikon--hata::after { width: 52%; height: 10%; left: 24%; top: 45%; }
.swal-ikon--hata::before { transform: rotate(45deg); }
.swal-ikon--hata::after  { transform: rotate(-45deg); }

/* Ünlem ve soru: gövde + nokta */
.swal-ikon--uyari { color: var(--bildirim-warning); }
.swal-ikon--uyari::before { width: 10%; height: 34%; left: 45%; top: 22%; border-radius: 3px; }
.swal-ikon--uyari::after  { width: 10%; height: 10%; left: 45%; top: 65%; border-radius: 50%; }

.swal-ikon--bilgi { color: var(--bildirim-info); }
.swal-ikon--bilgi::before { width: 10%; height: 10%; left: 45%; top: 22%; border-radius: 50%; }
.swal-ikon--bilgi::after  { width: 10%; height: 34%; left: 45%; top: 40%; border-radius: 3px; }

.swal-ikon--soru { color: var(--bildirim-accent); }
.swal-ikon--soru::before {
  width: 26%; height: 26%; left: 37%; top: 20%;
  border: 2px solid currentColor; border-bottom: 0; border-right: 0;
  background: none; border-radius: 50% 50% 0 0; transform: rotate(45deg);
}
.swal-ikon--soru::after { width: 10%; height: 10%; left: 45%; top: 66%; border-radius: 50%; }

@keyframes swal-gir    { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes swal-cik    { to   { opacity: 0; transform: translateX(24px); } }
@keyframes swal-solgun { from { opacity: 0; } to { opacity: 1; } }
@keyframes swal-buyu   { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes swal-sure   { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Devinim istemeyen kullanıcıda animasyon yok; bildirim yine görünüyor */
@media (prefers-reduced-motion: reduce) {
  .swal-toast, .swal-kutu, .swal-katman { animation: none; }
  .swal-toast__cizgi { animation-duration: 0s; }
}

/* Dar ekran: bildirim köşede sıkışmasın, genişliğe yayılsın */
@media (max-width: 720px) {
  .swal-toast-alan { left: .5rem; right: .5rem; max-width: none; }
}