/*!
 * Turla360 — Global Toast / Bildirim Sistemi
 * Tüm panellerde başarı / hata / uyarı / bilgi mesajlarını renkli gösterir.
 */

.tn-toasts {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; max-width: calc(100vw - 40px);
}

.tn-toast {
  pointer-events: auto;
  min-width: 300px; max-width: 420px;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; padding-right: 40px;
  border-radius: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px; line-height: 1.45;
  color: #fff; font-weight: 500;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .08);
  position: relative; overflow: hidden;
  animation: tnToastIn .34s cubic-bezier(.21, 1.02, .73, 1) both;
  transform-origin: top right;
}
.tn-toast.hide {
  animation: tnToastOut .28s cubic-bezier(.55, .06, .68, .19) forwards;
}

@keyframes tnToastIn {
  0% { opacity: 0; transform: translateX(50px) scale(.9); }
  100% { opacity: 1; transform: none; }
}
@keyframes tnToastOut {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(80px) scale(.88); }
}

.tn-toast::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: rgba(255, 255, 255, .45);
}
.tn-toast-ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.tn-toast-ico svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.5; fill: none; }
.tn-toast-body { flex: 1; min-width: 0; padding-top: 2px; }
.tn-toast-title {
  font-family: var(--head, system-ui), sans-serif;
  font-weight: 800; font-size: 13.5px; margin-bottom: 2px; letter-spacing: -.01em;
}
.tn-toast-msg { font-size: 13px; opacity: .95; word-wrap: break-word; }
.tn-toast-close {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border: none; background: rgba(255, 255, 255, .18);
  color: #fff; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; transition: background .15s;
}
.tn-toast-close:hover { background: rgba(255, 255, 255, .32); }

/* İlerleme çubuğu — otomatik kapanış geri sayımı */
.tn-toast-bar {
  position: absolute; bottom: 0; left: 0; height: 3px;
  background: rgba(255, 255, 255, .55); width: 100%;
  transform-origin: left; animation: tnBar linear forwards;
}
@keyframes tnBar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Türler — renkli gradientler */
.tn-toast.success {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
}
.tn-toast.error {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%);
}
.tn-toast.warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #422006;
}
.tn-toast.warning .tn-toast-ico { background: rgba(66, 32, 6, .18); box-shadow: inset 0 0 0 1px rgba(66, 32, 6, .2); }
.tn-toast.warning .tn-toast-ico svg { stroke: #422006; }
.tn-toast.warning .tn-toast-close { background: rgba(66, 32, 6, .18); color: #422006; }
.tn-toast.warning::before { background: rgba(66, 32, 6, .35); }
.tn-toast.warning .tn-toast-bar { background: rgba(66, 32, 6, .35); }

.tn-toast.info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
}

/* Mobil */
@media (max-width: 540px) {
  .tn-toasts { top: 12px; right: 12px; left: 12px; }
  .tn-toast { min-width: 0; width: 100%; max-width: 100%; }
}