/* ════════════════════════════════════════════════════════════════════
 * YZP TTS — Hata uyarısı için animasyonlar.
 *
 * Kullanım:
 *   .yzp-shake     → 0.7s shake (horizontal titreşim)
 *   .yzp-pulse-err → 2.4s kırmızı parlama (dikkat çekici glow + border)
 * ════════════════════════════════════════════════════════════════════ */

@keyframes yzp-shake-kf {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80%       { transform: translateX(8px); }
}

.yzp-shake {
    animation: yzp-shake-kf 0.7s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes yzp-pulse-err-kf {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6),
                    0 0 0 0 rgba(220, 38, 38, 0.4);
        border-color: rgba(220, 38, 38, 0.8);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(220, 38, 38, 0),
                    0 0 32px 8px rgba(220, 38, 38, 0.25);
        border-color: rgba(220, 38, 38, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0),
                    0 0 0 0 rgba(220, 38, 38, 0);
        border-color: rgba(220, 38, 38, 0.5);
    }
}

.yzp-pulse-err {
    animation: yzp-pulse-err-kf 0.8s ease-out 3;
    border: 2px solid rgba(220, 38, 38, 0.8) !important;
    border-radius: 10px;
    background-color: rgba(254, 226, 226, 0.4);
    transition: border-color 0.2s, background-color 0.2s;
}

/* Mobil: küçük ekran için biraz daha agresif shake (daha fark edilsin) */
@media (max-width: 768px) {
    @keyframes yzp-shake-kf {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-12px); }
        20%, 40%, 60%, 80%       { transform: translateX(12px); }
    }
}