.toast{
    position:fixed;
    top:24px;
    right:-420px;
    width:340px;
    padding:16px 18px;
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.97),
            rgba(248,245,255,.94)
        );
    backdrop-filter:blur(18px);
    border:1px solid rgba(124,58,237,.10);
    display:flex;
    align-items:center;
    gap:14px;
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        right .45s cubic-bezier(.22,1,.36,1),
        opacity .35s ease;
    z-index:9999;
    opacity:0;
    transform:translateY(-18px) scale(.96);
    overflow:hidden;
    box-shadow:
        0 22px 60px rgba(63,38,120,.16),
        inset 0 1px 0 rgba(255,255,255,.85);
}

.toast.show{
    right:24px;
    opacity:1;
    transform:translateY(0) scale(1);
}

.toast-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    box-shadow:0 10px 22px rgba(34,197,94,.28);
    flex-shrink:0;
    transition:.3s;
}

.toast-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.toast-content strong{
    margin-bottom:4px;
    line-height:1.2;
}

.toast-content span{
    line-height:1.45;
    color:#666;
}

.toast-content strong{
    font-size:15px;
}

.toast-content span{
    display:block;
    line-height:1.45;
    word-break:break-word;
}



/* =========================================
   TOAST DURUM RENKLERİ
========================================= */

.toast.toast-success .toast-icon{
    background:linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );
    color:#ffffff;
    box-shadow:
        0 10px 24px rgba(34,197,94,.28),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.toast.toast-error .toast-icon{
    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );
    color:#ffffff;
    box-shadow:
        0 10px 24px rgba(239,68,68,.28),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.toast.toast-warning .toast-icon{
    background:linear-gradient(
        135deg,
        #facc15,
        #f59e0b
    );
    color:#ffffff;
    box-shadow:
        0 10px 24px rgba(245,158,11,.28),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.toast.toast-info .toast-icon{
    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );
    color:#ffffff;
    box-shadow:
        0 10px 24px rgba(59,130,246,.28),
        inset 0 1px 0 rgba(255,255,255,.35);
}
/* Toast kapanma süresi çubuğu */
.toast::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:4px;
    border-radius:0 0 18px 18px;
    transform-origin:left center;
    transform:scaleX(0);
}

.toast.show::after{
    animation:toastProgress 2s linear forwards;
}

@keyframes toastProgress{
    from{
        transform:scaleX(0);
    }

    to{
        transform:scaleX(1);
    }
}

.toast-content strong{
    color:#1f1b2d;
    font-weight:800;
    letter-spacing:-.01em;
}

.toast-content span{
    color:#777184;
    font-size:14px;
}

/* =========================================
   TOAST DURUM ÇERÇEVELERİ
========================================= */

.toast.toast-success{
    border-color:rgba(34,197,94,.35);
}

.toast.toast-error{
    border-color:rgba(239,68,68,.35);
}

.toast.toast-warning{
    border-color:rgba(245,158,11,.38);
}

.toast.toast-info{
    border-color:rgba(59,130,246,.35);
}


/* =========================================
   TOAST ALT SÜRE ÇUBUĞU RENKLERİ
========================================= */

.toast.toast-success::after{
    background:linear-gradient(
        90deg,
        #22c55e,
        #16a34a
    );
}

.toast.toast-error::after{
    background:linear-gradient(
        90deg,
        #ef4444,
        #dc2626
    );
}

.toast.toast-warning::after{
    background:linear-gradient(
        90deg,
        #facc15,
        #f59e0b
    );
}

.toast.toast-info::after{
    background:linear-gradient(
        90deg,
        #3b82f6,
        #2563eb
    );
}

/* =========================================
   TOAST ICON POP ANIMATION
========================================= */

.toast.show .toast-icon{
    animation:toastIconPop .45s ease;
}

@keyframes toastIconPop{

    0%{
        transform:scale(.75);
    }

    55%{
        transform:scale(1.18);
    }

    100%{
        transform:scale(1);
    }

}