/* Bildirim kutulari — PAYLASILAN.
 *
 * Panel (style.css) ve kimlik sayfalari (tanitim.css) ayri temalar kullaniyor
 * ama bildirim ikisinde de ayni. Iki dosyaya kopyalanirsa biri guncellenip
 * oteki unutulur; o yuzden kendi dosyasinda ve her sayfa ayrica yukluyor.
 */

/* ═══════════════════════════════ bildirimler ═════════════════════════════ */

/* Bildirim EKRANA sabit, sayfaya değil.

   Önceden mesaj, onu doğuran düğmenin bölümündeki kutuya yazılıyordu. "Verileri
   indir" sayfanın epey aşağısında, o bölümün mesaj kutusu ise en üstünde: kullanıcı
   düğmeye basıyor, "12 cevap indirildi" yazılıyor ve kullanıcı bunu hiç görmüyordu.

   Sağ altta duruyor — sol alt yapışkan indirme şeridiyle, üst taraf da üst şeritle
   çakışıyor. Alttaki şerit için `bottom` payı bırakıldı. */
.bildirim-alani {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;   /* en yenisi en altta, göze en yakın */
  gap: .5rem;
  width: min(28rem, calc(100vw - 2rem));
  pointer-events: none;             /* boş alan altındaki sayfayı engellemesin */
}
.bildirim {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .7rem .8rem .7rem .95rem;
  border-radius: var(--r-buyuk);
  border: 1px solid var(--kenar);
  border-left: 4px solid var(--soluk-2);
  background: var(--yuzey);
  box-shadow: 0 6px 20px rgba(15, 27, 51, .16);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--murekkep-2);
  animation: bildirim-gir .18s ease-out;
}
@keyframes bildirim-gir {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bildirim { animation: none; } }

.bildirim-metin { flex: 1; }
.bildirim-kapat {
  flex: none;
  padding: 0 .3rem;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--soluk);
  cursor: pointer;
}
.bildirim-kapat:hover { color: var(--murekkep); background: none; }

.bildirim.bilgi  { border-left-color: var(--vurgu); background: var(--vurgu-soluk); }
.bildirim.basari { border-left-color: var(--basari); background: var(--basari-zemin); color: #0d5230; }
.bildirim.dikkat { border-left-color: var(--uyari); background: var(--uyari-zemin); color: #7d4a05; }
.bildirim.hata {
  border-left-color: var(--hata);
  border-left-width: 5px;
  background: var(--hata-zemin);
  color: #8e1515;
  font-weight: 500;
}

@media (max-width: 700px) {
  .bildirim-alani { right: .6rem; left: .6rem; width: auto; bottom: 5rem; }
}