:root { --primary-color: #6a5af9; --secondary-color: #f7776d; }
		body {
			margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh;
			font-family: 'Poppins', sans-serif; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%; animation: gradientBG 15s ease infinite;
		}
        @keyframes gradientBG { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} }
		
        .main {
			width: 100%;
            max-width: 400px;
			height: 600px; /* افزایش ارتفاع برای محتوای بیشتر */
			background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
			overflow: hidden;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            position: relative;
		}
		#chk{
			display: none;
		}
        
		.login { position: relative; width:100%; height: 95%; }
		label.tab-label{ color: #fff; font-size: 2.3em; justify-content: center; display: flex; margin: 50px; font-weight: bold; cursor: pointer; transition: .5s ease-in-out; }
		.form-group { width: 75%; margin: 15px auto; }
		.form-group input{ width: 100%; height: 45px; background: rgba(255,255,255,0.9); padding: 10px; border: none; outline: none; border-radius: 8px; color: #333; font-family: 'Poppins', sans-serif; box-sizing: border-box; }
		.submit-btn{ width: 75%; height: 45px; margin: 10px auto; display: block; color: #fff; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); font-size: 1.1em; font-weight: bold; margin-top: 20px; outline: none; border: none; border-radius: 8px; transition: .2s ease-in; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
		.submit-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

        /* ===== بخش اصلاح شده برای انیمیشن signup ===== */
		.signup{
			height: 110%;
			background: #fff;
			border-radius: 60% / 5%;
			transform: translateY(-100px); /* کمی پایین تر برای نمایش بهتر هدر */
			transition: .8s ease-in-out;
            display: flex;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: flex-start;
		}
		.signup label.tab-label{
			color: var(--primary-color);
			transform: scale(.6);
            margin-top: 15px;
		}

		#chk:checked ~ .signup{
			transform: translateY(-600px); /* مقدار حرکت کامل به بالا */
		}
		#chk:checked ~ .signup label.tab-label{
			transform: scale(1);	
            margin-top: 40px;
		}
		#chk:checked ~ .login label.tab-label{
			transform: scale(.6);
            
		}
        
        .or-divider { text-align: center; color: rgba(255,255,255,0.7); margin: 15px auto; width: 75%; position: relative; }
        .or-divider::before, .or-divider::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: rgba(255,255,255,0.3); }
        .or-divider::before { left: 0; } .or-divider::after { right: 0; }
        .signup .or-divider { color: #aaa; } .signup .or-divider::before, .signup .or-divider::after { background: #ddd; }
        
        .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 75%; height: 45px; margin: 10px auto; background: #fff; color: #333; border-radius: 8px; border: 1px solid #ddd; font-weight: bold; cursor: pointer; text-decoration: none; transition: background-color 0.2s; }
        .google-btn img { width: 20px; height: 20px; }
        .forgot-password { text-align: center;  }
        .forgot-password a { color: #fff; text-decoration: none; font-size: 0.9rem; }
        .recaptcha-container { display: flex; justify-content: center; margin: 20px 0 10px 0; transform: scale(0.95); }
        .error-message { color: #842029; background-color: #f8d7da; width: 75%; margin: -5px auto 10px auto; padding: 8px; border-radius: 5px; text-align: center; font-size: 0.9em; min-height: 1em; }
        .error-message:empty { display: none; }
.success-container {
        width: 100%;
        max-width: 450px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        padding: 40px;
        text-align: center;
        color: #fff;
    }
    .success-icon {
        font-size: 4rem;
        color: #28a745;
        width: 100px;
        height: 100px;
        line-height: 100px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        margin: 0 auto 20px auto;
        animation: popIn 0.5s ease-out;
    }
    @keyframes popIn {
        0% { transform: scale(0.5); opacity: 0; }
        80% { transform: scale(1.1); }
        100% { transform: scale(1); opacity: 1; }
    }
    .success-container h1 {
        font-size: 2em;
        margin-bottom: 10px;
    }
    .success-container p {
        opacity: 0.9;
        font-size: 1.1rem;
        margin-bottom: 25px;
    }
    .success-container .login-link {
        display: inline-block;
        padding: 12px 30px;
        color: #fff;
        background: linear-gradient(45deg, #28a745, #20c997);
        font-size: 1.1em;
        font-weight: bold;
        text-decoration: none;
        border-radius: 50px;
        transition: transform 0.2s ease;
    }
    .success-container .login-link:hover {
        transform: scale(1.05);
    }        
        .home-btn { position: fixed; top: 20px; left: 20px; background: rgba(255, 255, 255, 0.2); color: #fff; width: 45px; height: 45px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.2rem; backdrop-filter: blur(5px); transition: transform 0.2s ease; z-index: 10; }
        .home-btn:hover { transform: scale(1.1); }
        
        .lang-btn {
    position: fixed;
    top: 20px;
    left: 75px; /* کمی فاصله از دکمه خانه */
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.1rem; /* اندازه فونت کمی کوچکتر */
    font-weight: 600;
    backdrop-filter: blur(5px);
    transition: transform 0.2s ease;
    z-index: 10;
}

.lang-btn:hover {
    transform: scale(1.1);
}
        
.remember-me-container {
   
    margin: -5px 0 0 0;
    display: block;
    align-items: center;
    justify-content: flex-start;
}

.remember-me-container label {
    color: #fff;
    font-size: 0.9em;
    margin-left: 8px; /* در ترکی استانبولی margin-left مناسب است */
    cursor: pointer;
}

.remember-me-container input[type="checkbox"] {
    width: auto;
    height: auto;
}

.login .remember-me-container label {
    color: #680081;
}
.signup .remember-me-container label { /* اگر در ثبت‌نام هم نیاز داشتید */
    color: #555;
}

.hatirla{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
}

.download-btn {
    position: fixed;
    top: 20px;
    right: 20px; /* در سمت مخالف دکمه خانه */
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    backdrop-filter: blur(5px);
    transition: transform 0.2s ease, background-color 0.2s;
    z-index: 10;

    /* مهم: این دکمه در ابتدا مخفی است */
    display: none; 
}

.download-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3);
}