/* Sodo CRM giriş maskotları.
   İmleci takip eden, şifre yazılırken gözlerini elleriyle kapatan karakterler.
   Bağımlılık yok; hareketin tamamı CSS geçişleri ve küçük bir rAF döngüsüyle. */

.sodo-maskotlar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin: 0 0 34px;
    padding: 0;
    min-height: 150px;
}

.sodo-maskot {
    display: block;
    overflow: visible;
    flex: 0 0 auto;
}

/* Nefes alma: her karakter kendi gecikmesiyle, imleç takibinden bağımsız */
.sodo-maskot .mk-salinim {
    animation: sodo-mk-salin 3.6s ease-in-out infinite;
}

.sodo-maskot:nth-child(2) .mk-salinim { animation-delay: -1.2s; animation-duration: 4.1s; }
.sodo-maskot:nth-child(3) .mk-salinim { animation-delay: -2.4s; animation-duration: 3.9s; }

@keyframes sodo-mk-salin {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Gövde eğimi ve gözbebeği konumu JS ile yazılır; yumuşatmayı CSS üstlenir */
.sodo-maskot .mk-govde {
    transition: transform 0.42s cubic-bezier(0.22, 0.9, 0.28, 1);
}

.sodo-maskot .mk-goz {
    transition: transform 0.09s ease-out;
}

.sodo-maskot.is-kirpiyor .mk-goz {
    transform: scaleY(0.08);
}

.sodo-maskot .mk-bebek {
    transition: transform 0.12s linear;
}

/* Eller: normalde gövdenin alt yanlarında, şifre yazılırken gözlerin üstünde */
.sodo-maskot .mk-el {
    transition: transform 0.42s cubic-bezier(0.34, 1.3, 0.42, 1);
}

.sodo-maskotlar.is-gizli .mk-el-sol { transform: translate(22px, -50px) rotate(-7deg); }
.sodo-maskotlar.is-gizli .mk-el-sag { transform: translate(-20px, -50px) rotate(7deg); }

/* Şifre görünür yapıldığında eller iner, karakterler alana bakar */
.sodo-maskotlar.is-dikizliyor .mk-el { transform: none; }

/* Ağız durumları */
.sodo-maskot .mk-agiz {
    transition: opacity 0.22s ease;
}

.sodo-maskot .mk-agiz-mutlu,
.sodo-maskot .mk-agiz-uzgun { opacity: 0; }

.sodo-maskotlar.is-basarili .mk-agiz-normal { opacity: 0; }
.sodo-maskotlar.is-basarili .mk-agiz-mutlu { opacity: 1; }
.sodo-maskotlar.is-hatali .mk-agiz-normal { opacity: 0; }
.sodo-maskotlar.is-hatali .mk-agiz-uzgun { opacity: 1; }

.sodo-maskotlar.is-hatali .sodo-maskot {
    animation: sodo-mk-titre 0.42s ease-in-out 2;
}

@keyframes sodo-mk-titre {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.sodo-maskotlar.is-basarili .sodo-maskot {
    animation: sodo-mk-zipla 0.5s cubic-bezier(0.3, 1.4, 0.4, 1);
}

.sodo-maskot:nth-child(2) { animation-delay: 0.07s; }
.sodo-maskot:nth-child(3) { animation-delay: 0.14s; }

@keyframes sodo-mk-zipla {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-16px); }
}

@media (max-width: 900px) {
    .sodo-maskotlar {
        gap: 12px;
        margin-bottom: 28px;
        min-height: 0;
    }

    .sodo-maskotlar .sodo-maskot { width: auto; height: 116px; }
    .sodo-maskotlar .sodo-maskot:nth-child(2) { height: 138px; }
}

@media (max-width: 760px) {
    /* Ölçek yerine gerçek boyut: transform yerleşim kutusunu küçültmediği için
       üstte boşluk bırakıyor. */
    .sodo-maskotlar {
        gap: 8px;
        margin-bottom: 20px;
    }

    .sodo-maskotlar .sodo-maskot { height: 100px; }
    .sodo-maskotlar .sodo-maskot:nth-child(2) { height: 120px; }
}

/* Dar ekranda betik maskotları kartın içine taşır (bkz. ncr-login-maskot.js) */
.sodo-maskotlar.is-kartta {
    justify-content: center;
    gap: 6px;
    margin: 0 0 22px;
}

.sodo-maskotlar.is-kartta .sodo-maskot { height: 92px; }
.sodo-maskotlar.is-kartta .sodo-maskot:nth-child(2) { height: 110px; }

@media (max-width: 380px) {
    .sodo-maskotlar .sodo-maskot { height: 86px; }
    .sodo-maskotlar .sodo-maskot:nth-child(2) { height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
    .sodo-maskot .mk-salinim,
    .sodo-maskotlar.is-hatali .sodo-maskot,
    .sodo-maskotlar.is-basarili .sodo-maskot {
        animation: none;
    }

    .sodo-maskot .mk-govde,
    .sodo-maskot .mk-el {
        transition-duration: 0.01ms;
    }
}