:root {
    --bg: #0b1220;
    --panel: #ffffff;
    --ink: #0b1220;
    --muted: #6b7280;
    --brand: #2563eb;
    --line: #e5e7eb;
    --slide-ms: 900ms;
    --ease-slide: cubic-bezier(.22,.75,.05,1);
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font: 14px/1.45 "Inter","Plus Jakarta Sans","Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

#MainContainer {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#formContainer {
    width: 100%;
    min-height: 560px;
    background: var(--panel);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    position: relative;
}

.paneheader {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .2px;
    color: white;
}

.panetext {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
    color: white;
    text-align: center;
}

.panecta {
    margin-top: 14px;
    user-select: none;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 12px;
    background: #808693;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(37,99,235,.35);
    color: white;
    text-align: center;
}

/*.pane .cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(37,99,235,.45);
        }

        .pane .cta:active {
            transform: translateY(0);
            opacity: .92;
        }*/

.login-form {
    /*width: min(360px, 92%);
    background: #fff;*/
    /*border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);*/
}

    .login-form .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 14px;
    }

    .login-form label {
        font-size: 12px;
        color: #374151;
    }

    .login-form input {
        outline: none;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        background: #fff;
    }

        .login-form input:focus {
            border-color: #94a3b8;
            box-shadow: 0 0 0 4px rgba(37,99,235,.12);
        }

.login-button {
    margin-top: 10px;
    background: var(--brand);
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
}

    .login-button:hover {
        opacity: .95;
    }

.form-footer {
    margin-top: 12px;
    text-align: center;
}

    .form-footer a {
        color: #2563eb;
        text-decoration: none;
    }

        .form-footer a:hover {
            text-decoration: underline;
        }

/* ================== STATE KURALLARI ================== */
/* Başlangıç: state-login → Signup COVER (sol) + Login FORM (sol) */
#formContainer.state-login #SignupStage {
    transform: translate3d(0%,0,0);
}
/* COVER görünür */
#formContainer.state-login #LoginStage {
    transform: translate3d(0%,0,0);
}
/* *** FIX: FORM görünür (ilk panel) *** */

/* Signup açık: state-signup → Signup FORM + Login COVER */
#formContainer.state-signup #SignupStage {
    transform: translate3d(-50%,0,0);
}
/* FORM görünür (sağ panel) */
#formContainer.state-signup #LoginStage {
    transform: translate3d(-50%,0,0);
}
/* *** FIX: COVER görünür (sağ panel) *** */

@media (max-width: 900px) {
    #formContainer {
        flex-direction: column;
        min-height: 960px;
    }

    #SingupSection, #LoginSection {
        min-height: 480px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stage {
        transition: none;
    }
}