.phone-login-page-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

.phone-login-bg {
    background: #225193;
}

.flip-container {
    perspective: 1200px;
    width: 100%;
}

.flip-card {
    display: grid;
    width: 100%;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
    position: relative;
}

.flip-card > .card-side {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card > .card-back {
    transform: rotateY(180deg);
}

/* Sabit kart yüksekliği: 3 adımda da (telefon / doğrulama / kayıt) aynı boyut,
   böylece flip animasyonunda zıplama olmaz. */
.phone-login-card {
    height: 440px;
}

@media (max-width: 640px) {
    .phone-login-page-container {
        position: relative;
        height: auto;
        min-height: 100dvh;
        overflow-y: auto;
    }

    .phone-login-card {
        height: 460px;
    }
}