/* ============================================

   Login & Register Page Styles

   ============================================ */



.login-page,

.register-page {

    height: 100vh;

    display: flex;

    background-color: var(--color-background);

    overflow: hidden;

}



/* Split Layout */

.login-container,

.register-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;

    height: 100vh;

    overflow: hidden;

}



/* Left Side - Visual Section */

.login-visual,

.register-visual {

    position: relative;

    background: linear-gradient(135deg, #0e2a47 0%, #1a365d 100%);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: var(--spacing-2xl);

    color: white;

    overflow: hidden;

    height: 100vh;

}



/* Image Slider Container */

.image-slider-container {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 0;

    overflow: hidden;

}



.image-slider-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

}



.image-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    transition: opacity 0.6s ease-in-out;

    object-fit: cover;

}



.image-slide.active {

    opacity: 1;

    z-index: 1;

}





/* Slider Dots */

.slider-dots {

    position: absolute;

    bottom: var(--spacing-xl);

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: var(--spacing-sm);

    z-index: 2;

}



.slider-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.4);

    border: 2px solid rgba(255, 255, 255, 0.6);

    cursor: pointer;

    transition: all 0.3s ease;

    padding: 0;

}



.slider-dot.active {

    background: white;

    width: 30px;

    border-radius: 15px;

}



.login-visual-content,

.register-visual-content {

    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.login-logo,

.register-logo {

    display: flex;

    align-items: center;

    gap: var(--spacing-sm);

    margin-bottom: var(--spacing-4xl);

}



.logo-icon {

    width: 50px;

    height: 50px;

    background: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-primary);

    font-weight: var(--font-weight-bold);

    font-size: var(--font-size-xl);

}



.logo-text {

    font-size: var(--font-size-2xl);

    font-weight: var(--font-weight-bold);

    color: white;

}



.login-visual-text,

.register-visual-text {

    margin-top: auto;

    padding-bottom: var(--spacing-2xl);

    position: relative;

    z-index: 2;

}



.login-visual-title,

.register-visual-title {

    font-size: var(--font-size-4xl);

    font-weight: var(--font-weight-bold);

    margin-bottom: var(--spacing-md);

    line-height: var(--line-height-tight);

}



.login-visual-subtitle,

.register-visual-subtitle {

    font-size: var(--font-size-lg);

    opacity: 0.9;

    line-height: var(--line-height-relaxed);

}



/* Right Side - Form Section */

.login-form-section,

.register-form-section {

    display: flex;

    flex-direction: column;

    background: white;

    padding: var(--spacing-2xl);

    overflow-y: auto;

    height: 100vh;

    box-sizing: border-box;

}



.login-header{

    display: flex;

    justify-content: flex-end;

    margin-bottom: var(--spacing-3xl);

}



.register-header {

    display: flex;

    justify-content: flex-end;

    margin-bottom: var(--spacing-2xl);

}



.sign-in-btn {

    padding: var(--spacing-xs) var(--spacing-lg);

    background: var(--color-text);

    color: white;

    border: none;

    border-radius: 6px;

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);

    text-decoration: none;

    transition: background var(--transition-base);

    cursor: pointer;

}



.sign-in-btn:hover {

    background: var(--color-primary);

}



.form-wrapper {

    max-width: 450px;

    width: 100%;

    margin: 0 auto;

}



.form-title {

    font-size: var(--font-size-3xl);

    font-weight: var(--font-weight-bold);

    color: var(--color-primary);

    margin-bottom: var(--spacing-xs);

    text-align: left;

}



.form-subtitle {

    font-size: var(--font-size-base);

    color: var(--color-text-muted);

    margin-bottom: 40px;

    text-align: left;

}



/* Form Groups */

.form-group {

    margin-bottom: var(--spacing-sm);

}



.form-label {

    display: block;

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);

    color: var(--color-text);

    margin-bottom: var(--spacing-xs);

}



.form-input {

    width: 100%;

    padding: 14px 16px;

    font-size: var(--font-size-base);

    font-family: inherit;

    border: 1px solid #E2E8F0;

    border-radius: 8px;

    background-color: white;

    color: var(--color-text);

    transition: border-color var(--transition-base), box-shadow var(--transition-base);

}



.form-input:focus {

    outline: none;

    border-color: var(--color-primary);

    box-shadow: 0 0 0 3px rgba(14, 42, 71, 0.08);

}



.password-input-wrapper {

    position: relative;

}



.password-toggle {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    background: none;

    border: none;

    cursor: pointer;

    color: var(--color-text-muted);

    display: flex;

    align-items: center;

    padding: 4px;

    transition: color var(--transition-fast);

}



.password-toggle:hover {

    color: var(--color-primary);

}



.form-input.password-input {

    padding-right: 50px;

}



/* Form Options */

.form-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: var(--spacing-xl);

}



.remember-me {

    display: flex;

    align-items: center;

    gap: var(--spacing-xs);

}



.remember-me input[type="checkbox"] {

    width: 18px;

    height: 18px;

    cursor: pointer;

    accent-color: var(--color-primary);

}



.remember-me label {

    font-size: var(--font-size-sm);

    color: var(--color-text);

    cursor: pointer;

}



.forgot-password {

    font-size: var(--font-size-sm);

    color: var(--color-text-muted);

    text-decoration: none;

    transition: color var(--transition-fast);

}



.forgot-password:hover {

    color: var(--color-primary);

}



/* Primary Button */

.btn-login-submit,

.btn-register-submit {

    width: 100%;

    padding: 14px;

    background: var(--color-text);

    color: white;

    border: none;

    border-radius: 8px;

    font-size: var(--font-size-base);

    font-weight: var(--font-weight-semibold);

    cursor: pointer;

    transition: background var(--transition-base), transform var(--transition-fast);

    margin-bottom: var(--spacing-xl);

}



.btn-login-submit:hover,

.btn-register-submit:hover {

    background: var(--color-primary);

    transform: translateY(-2px);

}



.btn-login-submit:active,

.btn-register-submit:active {

    transform: translateY(0);

}



/* Register/Login Link */

.form-footer {

    text-align: center;

    margin-top: 0;

}



.form-footer-text {

    font-size: var(--font-size-sm);

    color: var(--color-text-muted);

}



.form-footer-link {

    color: var(--color-primary);

    text-decoration: none;

    font-weight: var(--font-weight-semibold);

    transition: color var(--transition-fast);

}



.form-footer-link:hover {

    color: var(--color-primary-dark);

    text-decoration: underline;

}



/* Responsive Design */

@media (max-width: 1024px) {

    .login-container,

    .register-container {

        grid-template-columns: 1fr;

        height: 100vh;

    }

    

    .login-visual,

    .register-visual {

        display: none;

    }

    

    .login-form-section,

    .register-form-section {

        padding: var(--spacing-2xl);

        height: 100vh;

        overflow-y: auto;

    }

    

    .form-wrapper {

        max-width: 100%;

    }

}



@media (max-width: 768px) {

    .login-page,

    .register-page {

        height: 100vh;

        overflow: hidden;

    }

    

    .login-form-section,

    .register-form-section {

        padding: var(--spacing-xl);

        height: 100vh;

        overflow-y: auto;

    }

    

    .form-title {

        font-size: var(--font-size-2xl);

    }

    

    .form-subtitle {

        font-size: var(--font-size-sm);

        margin-bottom: var(--spacing-2xl);

    }

    

    

    .form-wrapper {

        max-width: 100%;

    }

    

    .login-visual,

    .register-visual {

        padding: var(--spacing-lg);

    }

    

    .login-visual-title,

    .register-visual-title {

        font-size: var(--font-size-2xl);

    }

    

    .login-visual-subtitle,

    .register-visual-subtitle {

        font-size: var(--font-size-base);

    }

}



@media (max-width: 480px) {

    .login-form-section,

    .register-form-section {

        padding: var(--spacing-lg);

        height: 100vh;

        overflow-y: auto;

    }

    

    .login-header,

    .register-header {

        margin-bottom: var(--spacing-lg);

    }

    

    .form-title {

        font-size: var(--font-size-xl);

        margin-bottom: var(--spacing-xs);

    }

    

    .form-subtitle {

        font-size: var(--font-size-sm);

        margin-bottom: var(--spacing-xl);

    }

    

    .form-group {

        margin-bottom: var(--spacing-md);

    }

    

    .form-options {

        margin-bottom: var(--spacing-lg);

    }

    

    .btn-login-submit,

    .btn-register-submit {

        margin-bottom: var(--spacing-lg);

    }

    

}