/**
 * Study360 - Responsive 2-Column Login Screen
 */

/* ==========================================================================
   Base & Layout
   ========================================================================== */

html {
    height: 100%;
}

body.login {
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mobil için dikey scroll'a izin ver */
    min-height: 100%;
    height: auto;
    padding: 40px 0; /* Scroll durumunda üst ve altta boşluk */
}

/* On large screens, we use a 2-column grid.
   Breakpoint 960px'ten 1200px'e çıkarılarak tabletlerdeki
   görselin uzun görünme sorunu düzeltildi. */
@media (min-width: 1200px) {
    body.login {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        height: 100%;
        overflow: hidden; /* Sayfanın tamamının scroll olmasını engelle */
    }

    /* The right column with the banner image */
    body.login::after {
        content: '';
        /* ==========================================================================
           <<< GÖRSELİ BURADAN DEĞİŞTİRİN >>>
           ========================================================================== */
        background-image: url('https://www.study360.com.tr/wp-content/uploads/2025/06/login-kapak-gorseli.png'); /* Örnek eğitim görseli */
        background-size: cover;
        background-position: center;
        height: 100%;
    }

    #login {
        max-width: 380px;
        margin: auto; /* Center in the grid cell */
        height: 100vh; /* Tam ekran yüksekliği */
        overflow-y: auto; /* GEREKTİĞİNDE DİKEY SCROLL'U AKTİF ET */
        padding: 40px; /* Dikey boşluk ve scrollbar için iç boşluk */
        /* Flexbox'ın neden olduğu daralma sorununu önlemek için tüm flex kuralları kaldırıldı. */
        /* İçerik artık doğal akışında ve sadece gerektiğinde kaydırılacak. */
    }

    /* Önceki flexbox ve auto-margin çözümlerinden kalanlar temizlendi. */
}

/* ==========================================================================
   Login Form Container (#login)
   ========================================================================== */

#login {
    width: 90%; /* Mobile first */
    max-width: 400px; /* Max width on mobile */
    padding: 0 20px; /* Yatayda boşluk */
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 1200px) {
    #login {
        max-width: 380px;
        margin: auto; /* Center in the grid cell */
        height: 100vh; /* Tam ekran yüksekliği */
        overflow-y: auto; /* GEREKTİĞİNDE DİKEY SCROLL'U AKTİF ET */
        padding: 40px; /* Dikey boşluk ve scrollbar için iç boşluk */
        /* Flexbox'ın neden olduğu daralma sorununu önlemek için tüm flex kuralları kaldırıldı. */
        /* İçerik artık doğal akışında ve sadece gerektiğinde kaydırılacak. */
    }
}

/* ==========================================================================
   Logo
   ========================================================================== */

#login h1 {
    margin-bottom: 0!important; /* Ufak bir boşluk bırakıldı */
}

#login h1 a {
    background-image: url('https://www.study360.com.tr/wp-content/uploads/2025/06/Study360-Logo.svg'); /* Logonuz bu yolda olmalı */
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 60px;
}

#loginform, .login .message, #registerform, #lostpasswordform {
    background: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 30px;
    margin-top: 0 !important; /* Hata mesajı ile form arası boşluk sıfırlandı */
}

.login form {
          margin:0!important;
}

#login label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

#login form .input,
#login input[type="text"],
#login input[type="password"],
#login input[type="email"] {
    font-size: 16px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: none;
    margin-top: 5px;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

#login form .input:focus,
#login input[type="text"]:focus,
#login input[type="password"]:focus,
#login input[type="email"]:focus {
    border-color: var(--primary-color, #0073e1);
    box-shadow: 0 0 0 2px rgba(0, 115, 225, 0.2);
}

/* Parola alanına, ikonun metnin üzerine gelmemesi için sağdan iç boşluk ekleniyor */
#login input[type="password"] {
    padding-right: 45px !important;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

#login .button-primary {
    width: 100%;
    background: var(--primary-color, #0073e1);
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    text-shadow: none;
    box-shadow: none;
    margin-top: 15px;
    height: auto;
    line-height: normal;
    float: none;
}

#login .button-primary:hover {
    background: var(--secondary-color, #005bbd);
}

.forgetmenot {
    margin-top: 15px;
}

/* ==========================================================================
   Bottom Links & Language Switcher
   ========================================================================== */

#nav,
#backtoblog {
    margin-top: 10px;
    padding: 0;
    text-align: center;
}

#nav a,
#backtoblog a {
    color: #555;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease-in-out;
}

#nav a:hover,
#backtoblog a:hover {
    color: var(--primary-color, #0073e1);
}

/* Language Switcher moved via JS */
.language-switcher {
    text-align: center;
    
    
    border-top: 1px solid #e7e7e7;
}

.language-switcher form {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.language-switcher .wp-element-button {
    padding: 5px 10px;
    font-size: 12px;
    background: #f0f2f5;
    border: 1px solid #ddd;
    color: #333;
    height: auto;
    line-height: normal;
}

/* Hide the label for the language dropdown */
.language-switcher label {
    display: none;
}

/* Uyarı Mesajları */
.login .message,
#login_error {
    padding: 20px;
    border-left-color: var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Password Visibility Toggle - İkonu ortalamak için eklendi
   ========================================================================== */
.wp-pwd {
    position: relative;
}

.wp-pwd .button.wp-hide-pw {
    position: absolute;
    top: 2px; /* input'un margin-top'u ile aynı */
    bottom: 0;
    right: 5px;
    margin: 0 0; /* Dikey ortalama için sihirli dokunuş */
    height: fit-content;
    padding: 0px;
    border: none;
    background: transparent !important;
    box-shadow: none !important;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

.wp-pwd .button.wp-hide-pw:hover .dashicons {
    color: #333;
}

.wp-pwd .button.wp-hide-pw .dashicons {
    font-size: 25px;
    vertical-align: middle;
}