.popup-root{
  position: fixed;
  right: 14px;
  bottom: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.popup{
  width: min(360px, calc(100vw - 28px));
  pointer-events: auto;
  border-radius: 18px;
  padding: 12px 12px;
  background: linear-gradient(180deg, rgba(14,23,38,.82), rgba(9,14,24,.78));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.50);
  backdrop-filter: blur(12px);
  transform: translateY(10px);
  opacity: 0;
  animation: popIn .18s ease forwards;
}
@keyframes popIn{
  to { transform: translateY(0px); opacity: 1; }
}
.popup.closing{
  animation: popOut .18s ease forwards;
}
@keyframes popOut{
  to { transform: translateY(10px); opacity: 0; }
}

.popup-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.popup-title{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 2px;
}
.popup-msg{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.popup-x{
  border: 0;
  background: transparent;
  color: var(--muted2);
  cursor:pointer;
  padding: 2px 6px;
  font-size: 18px;
  line-height: 1;
}
.popup-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: 10px;
}
.badge-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(43,212,212,.12);
}
.popup[data-type="hata"] .badge-dot{ background: var(--danger); box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.popup[data-type="uyari"] .badge-dot{ background: var(--warning); box-shadow: 0 0 0 4px rgba(245,158,11,.12); }
.popup[data-type="basarili"] .badge-dot{ background: var(--success); box-shadow: 0 0 0 4px rgba(34,197,94,.12); }