/* css/login_register.css */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }

body {
    background: linear-gradient(135deg, #d4fcff 0%, #ffffff 100%);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; height: 100vh; margin: 0;
}

.login-container {
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 15px 35px rgba(58, 222, 228, 0.2);
    position: relative; overflow: hidden;
    width: 850px; max-width: 100%; min-height: 550px; /* Yükseklik biraz arttı */
    border: 1px solid rgba(255,255,255,0.8);
    transition: all 0.6s ease-in-out;
}

.login-container p { font-size: 14px; line-height: 20px; letter-spacing: 0.3px; margin: 20px 0; }
.login-container span { font-size: 12px; color: #666; margin-bottom: 15px; }
.login-container a { color: #333; font-size: 13px; text-decoration: none; margin: 15px 0 10px; font-weight: 500; transition: 0.3s; }
.login-container a:hover { color: #3ADEE4; }

/* BUTONLAR */
button {
    background: #3ADEE4; color: #fff; font-size: 12px; padding: 12px 45px;
    border: 1px solid transparent; border-radius: 8px; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; margin-top: 10px; cursor: pointer; transition: 0.3s;
}
button:hover { background: #2BBEC7; transform: translateY(-2px); }
button.hidden { background-color: transparent; border-color: #fff; }
button.hidden:hover { background-color: rgba(255,255,255,0.2); }

/* FORM YAPISI */
form {
    background-color: #fff; display: flex; align-items: center; justify-content: center;
    flex-direction: column; padding: 0 40px; height: 100%; text-align: center;
}

.input-group { position: relative; width: 100%; margin: 8px 0; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 14px; }
.input-group input {
    background-color: #f3f4f6; border: none; margin: 0; padding: 12px 15px 12px 45px;
    font-size: 13px; border-radius: 8px; width: 100%; outline: none; transition: 0.3s;
}
.input-group input:focus { box-shadow: 0 0 0 2px #3ADEE4; background: #fff; }

/* FORMLARIN KONUMLANDIRILMASI */
.form-container {
    position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out;
}

/* 1. GİRİŞ YAP FORMU */
.sign-in { left: 0; width: 50%; z-index: 2; }
.login-container.active .sign-in { transform: translateX(100%); opacity: 0; }

/* 2. KAYIT OL FORMU */
.sign-up { left: 0; width: 50%; opacity: 0; z-index: 1; }
.login-container.active .sign-up { transform: translateX(100%); opacity: 1; z-index: 5; animation: move 0.6s; }

/* 3. ŞİFREMİ UNUTTUM FORMU (GÜNCELLENEN KISIM) */
.forgot-password-container {
    left: 0; width: 50%; height: 100%;
    position: absolute; top: 0;
    z-index: 1; opacity: 0;
    transition: all 0.6s ease-in-out;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100%); /* Aşağıda gizli */
}

/* Şifremi unuttum aktif olunca */
.login-container.reset-active .forgot-password-container {
    z-index: 10;
    opacity: 1;
    transform: translateY(0); /* Yukarı kayarak gelir */
}
.login-container.reset-active .sign-in {
    opacity: 0; /* Giriş formu kaybolur */
}

@keyframes move { 0%, 49.99% { opacity: 0; z-index: 1; } 50%, 100% { opacity: 1; z-index: 5; } }

/* SAĞ/SOL MAVİ PANEL */
.toggle-container {
    position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
    overflow: hidden; transition: all 0.6s ease-in-out; border-radius: 150px 0 0 100px; z-index: 1000;
}
.login-container.active .toggle-container { transform: translateX(-100%); border-radius: 0 150px 100px 0; }

.toggle {
    background: #3ADEE4; background: linear-gradient(to right, #3ADEE4, #2BBEC7);
    color: #fff; position: relative; left: -100%; height: 100%; width: 200%;
    transform: translateX(0); transition: all 0.6s ease-in-out;
}
.login-container.active .toggle { transform: translateX(50%); }

.toggle-panel { position: absolute; width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 30px; text-align: center; top: 0; transform: translateX(0); transition: all 0.6s ease-in-out; }
.toggle-left { transform: translateX(-200%); }
.login-container.active .toggle-left { transform: translateX(0); }
.toggle-right { right: 0; transform: translateX(0); }
.login-container.active .toggle-right { transform: translateX(200%); }

/* POPUP */
#popup-message {
    display: none; position: fixed; top: 20px; right: 20px; padding: 15px 25px;
    border-radius: 8px; color: #fff; font-weight: bold; z-index: 9999; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#popup-message.success { background-color: #2ecc71; }
#popup-message.error { background-color: #e74c3c; }

/* MOBİL */
.mobile-toggle-link { display: none; }

@media (max-width: 768px) {
    .login-container { width: 95%; min-height: 600px; border-radius: 20px; }
    .toggle-container { display: none; }
    .form-container { width: 100%; position: absolute; padding: 20px; transition: 0.3s; }
    .sign-in { width: 100%; z-index: 5; }
    .sign-up { display: none; width: 100%; }
    .forgot-password-container { width: 100%; transform: scale(0.9); opacity: 0; pointer-events: none; }
    
    .login-container.active .sign-in { display: none; }
    .login-container.active .sign-up { display: flex; opacity: 1; transform: none; animation: none; }
    
    /* Mobilde şifremi unuttum */
    .login-container.reset-active .forgot-password-container {
        transform: scale(1); opacity: 1; pointer-events: all; z-index: 20; background: white; height: 100%; top:0;
    }
    
    .mobile-toggle-link {
        display: inline-block; margin-top: 20px; color: #3ADEE4; font-weight: 600;
        border: 2px solid #3ADEE4; padding: 10px 20px; border-radius: 50px;
    }
}