:root {
    --primary-blue: #007bff; /* Örnek mavisini daha canlı bir tona çevirdim */
    --google-btn-border: #dadce0;
    --text-color: #333;
    --light-text-color: #666;
    --panel-background: #fff;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif; /* Görseldeki fonta yakın bir alternatif */
    overflow: hidden; /* Taşmayı engelle */
}

.main-container {
    display: flex;
    height: 100vh; /* Tam ekran yüksekliği */
}

.left-panel {
    flex: 1; /* Sol panelin genişlemesini sağlar */
    background-image: url('https://images.pexels.com/photos/4604663/pexels-photo-4604663.jpeg?_gl=1*81w4pr*_ga*OTYwMjM5NTMyLjE3NTIwNDg5MDU.*_ga_8JE65Q40S6*czE3NTIwNTA5NzkkbzIkZzEkdDE3NTIwNTExMDUkajU5JGwwJGgw'); /* Resmin yolu */
    background-size: cover; /* Resmi paneli kaplayacak şekilde ayarlar */
    background-position: center; /* Resmi ortalar */
    position: relative;
}

.image-credit {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8em;
}

.right-panel {
    width: 450px; /* Sağ panelin sabit genişliği (görsele göre ayarlandı) */
    background-color: var(--panel-background);
    padding: 40px; /* İç boşluklar */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Header */
.logo-text {
    font-weight: bold;
    color: var(--text-color);
    font-size: 1.1em;
}

/* Form Section */
.login-form-section {
    max-width: 350px; /* Form içeriğinin genişliğini sınırlar */
    margin: 0 auto; /* Formu ortalar */
}

    .login-form-section h4 {
        font-weight: 600;
        color: var(--text-color);
        font-size: 1.6em;
    }

.login-label {
    font-size: 0.9em;
    color: var(--light-text-color);
    margin-bottom: 5px;
}

.form-control {
    border-radius: var(--border-radius-sm);
    padding: 12px 15px;
    border: 1px solid #ddd;
    font-size: 0.95em;
}

    .form-control::placeholder {
        color: #aaa;
    }

    .form-control:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }

.password-toggle-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
}

.form-check-input {
    border-radius: 4px; /* Checkbox'ın köşeleri */
    border: 1px solid #ccc;
    width: 20px;
    height: 20px;
}

    .form-check-input:checked {
        background-color: var(--primary-blue);
        border-color: var(--primary-blue);
    }

.form-check-label {
    font-size: 0.9em;
    color: var(--light-text-color);
}

.forgot-password-link {
    font-size: 0.9em;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

    .forgot-password-link:hover {
        text-decoration: underline;
    }

.btn-sign-in {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
    font-weight: 600;
    padding: 12px 0;
    border-radius: var(--border-radius-sm);
    font-size: 1em;
    transition: background-color 0.2s ease;
}

    .btn-sign-in:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

.btn-sign-in-google {
    background-color: #fff;
    border-color: var(--google-btn-border);
    color: var(--text-color);
    font-weight: 500;
    padding: 12px 0;
    border-radius: var(--border-radius-sm);
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    .btn-sign-in-google:hover {
        background-color: #f8f8f8;
        border-color: #cdd0d3;
    }

.don-t-have-account {
    font-size: 0.9em;
    color: var(--light-text-color);
    margin-top: 20px;
}

.signup-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

    .signup-link:hover {
        text-decoration: underline;
    }

/* Footer */
.footer-left img {
    width: auto;
    height: 18px;
}

.footer-text, .copyright-text {
    font-size: 0.8em;
    color: var(--light-text-color);
}

/* Responsive Düzenlemeler */
@media (max-width: 992px) {
    .main-container {
        flex-direction: column; /* Küçük ekranlarda dikey sıralama */
    }

    .left-panel {
        display: none; /* Ekran 992px'ten küçükse sol paneli tamamen gizle */
    }

    .right-panel {
        width: 100%; /* Sağ panel tam genişliği kaplasın */
        padding: 30px 20px;
        flex-grow: 1; /* Sağ panelin kalan alanı doldurmasını sağlar */
        border-radius: 0; /* Köşelerdeki yuvarlaklığı kaldır */
    }

    .login-form-section {
        max-width: 350px; /* Form içeriğinin genişliğini yine de sınırlı tut */
        margin-left: auto;
        margin-right: auto;
    }

    .footer {
        flex-direction: column; /* Alt bilgi içeriğini dikeyde sırala */
        text-align: center;
    }

    .footer-left, .footer-right {
        margin-bottom: 10px; /* Alt bilgi öğeleri arasına boşluk ekle */
    }
}

@media (max-width: 768px) {
    .right-panel {
        padding: 20px 15px;
    }

    .login-form-section h4 {
        font-size: 1.4em;
    }

    .btn-sign-in, .btn-sign-in-google {
        padding: 10px 0;
        font-size: 0.95em;
    }
}