/* ================================= */
/* CONTAINER */
/* ================================= */
.toast-container{
    position:fixed;
    top:20px;
    right:20px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:12px;
    }
    
    /* ================================= */
    /* TOAST BASE */
    /* ================================= */
    .custom-toast{
    
    min-width:300px;
    max-width:350px;
    
    border-radius:12px;
    padding:14px 16px;
    
    color:#fff;
    
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    
    position:relative;
    overflow:visible;
    }
    
    /* ================================= */
    /* VARIANT WARNA */
    /* ================================= */
    .toast-success{
    background:linear-gradient(135deg,#28c76f,#1f9d57);
    }
    
    .toast-error{
    background:linear-gradient(135deg,#ea5455,#c0392b);
    }
    
    .toast-info{
    background:linear-gradient(135deg,#4dabf7,#339af0);
    }
    .toast-warning{
        background:linear-gradient(135deg,#ad9103,#9f7a00);
        }
    
    /* ================================= */
    /* HEADER */
    /* ================================= */
    .toast-header-custom{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    }
    
    /* waktu */
    .toast-time{
    margin-left:auto;
    font-size:12px;
    opacity:.8;
    }
    
    /* body */
    .toast-body-custom{
    font-size:13px;
    margin-top:6px;
    opacity:.95;
    }
    
    /* ================================= */
    /* CLOSE BUTTON (NAIK KE ATAS) */
    /* ================================= */
    .toast-close{
    position:absolute;
    top:-8px;
    right:-8px;
    
    background:#fff;
    color:#333;
    
    width:22px;
    height:22px;
    
    border-radius:50%;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    font-size:12px;
    cursor:pointer;
    
    box-shadow:0 4px 10px rgba(0,0,0,.2);
    }
    
    /* ================================= */
    /* ANIMASI */
    /* ================================= */
    
    /* SUCCESS & INFO (slide smooth) */
    .toast-slide-in{
    animation:slideIn .4s ease;
    }
    
    @keyframes slideIn{
    from{
    transform:translateX(120%);
    opacity:0;
    }
    to{
    transform:translateX(0);
    opacity:1;
    }
    }
    
    /* ERROR (bubble effect 🔥) */
    .toast-bubble{
    animation:bubbleIn .4s cubic-bezier(.22,1.5,.36,1);
    }
    
    @keyframes bubbleIn{
    0%{
    transform:scale(.5) translateX(100%);
    opacity:0;
    }
    70%{
    transform:scale(1.05);
    opacity:1;
    }
    100%{
    transform:scale(1);
    }
    }
    
    /* keluar */
    .toast-out{
    animation:slideOut .3s ease forwards;
    }
    
    @keyframes slideOut{
    to{
    transform:translateX(120%);
    opacity:0;
    }
    }
    .toast-close:active{
        transform: scale(0.85);
    }

    .toast-close{
        pointer-events: auto;
    }