/* EKO Global — Modern Giriş Sayfası (2026-08-19)
 *
 * Tasarım login.osgbpro.com'daki bölünmüş düzenden alındı; palet EKO'nun KENDİ logosundan
 * ölçülerek türetildi (baskın #1B3A37 koyu teal, #9B1C24 bordo, #6D6E71 gri).
 *
 * 🔒 DIŞ CDN YOK — bilinçli: bu sayfa oturum açma kapısı; Google Fonts / boxicons gibi
 *    üçüncü taraf istekleri hem erişim riski hem izleme yüzeyi. İkonlar YEREL Font Awesome
 *    4.6.3'ten, yazı tipi sistem yığınından geliyor. (Aynı gerekçeyle yetkiHatasi.php de
 *    2026-08-19'da CDN'den kurtarıldı.)
 */

:root {
    --eko-koyu:  #1B3A37;   /* logo baskın rengi */
    --eko-bordo: #9B1C24;   /* logo vurgu rengi  */
    --eko-bordo-koyu: #7d161d;
    --eko-gri:   #6D6E71;
    --cizgi:     #e5e7eb;
    --soluk:     #9ca3af;
    --metin:     #1a1a2e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Bölünmüş düzen ---------- */
.login-split-container { display: flex; min-height: 100vh; width: 100%; }

.login-image-side {
    flex: 0 0 65%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: background-image 1s ease-in-out;
}
.login-image-side::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(27, 58, 55, .35) 0%, rgba(15, 32, 30, .45) 100%);
}

.login-branding-overlay {
    position: absolute; bottom: 40px; left: 40px; z-index: 2;
    transition: color .5s ease; max-width: 70%;
}
.login-branding-overlay h2 {
    font-size: 28px; font-weight: 700; margin-bottom: 10px;
    transition: opacity .5s ease, color .5s ease, text-shadow .5s ease;
}
.login-branding-overlay p {
    font-size: 16px;
    transition: opacity .5s ease, color .5s ease, text-shadow .5s ease;
}
.login-branding-overlay.theme-dark { color: #fff; }
.login-branding-overlay.theme-dark h2 { text-shadow: 2px 2px 10px rgba(0,0,0,.7); }
.login-branding-overlay.theme-dark p  { text-shadow: 1px 1px 5px rgba(0,0,0,.7); }
.login-branding-overlay.theme-light { color: var(--metin); }
.login-branding-overlay.theme-light h2 { text-shadow: 2px 2px 10px rgba(255,255,255,.85); }
.login-branding-overlay.theme-light p  { text-shadow: 1px 1px 5px rgba(255,255,255,.85); }

/* ---------- Sağ panel ---------- */
.login-panel-side {
    flex: 0 0 35%;
    background: #fff;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 40px; position: relative; overflow-y: auto;
    box-shadow: -5px 0 30px rgba(0,0,0,.1);
}

.login-logo-section { text-align: center; margin-bottom: 20px; }
.login-logo-section img { max-width: 190px; height: auto; margin-bottom: 10px; }
.login-logo-section .subtitle { font-size: 14px; color: var(--eko-gri); margin-top: 5px; }

.login-form-section {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    max-width: 360px; margin: 0 auto; width: 100%;
}
.login-form-section h2 {
    font-size: 22px; font-weight: 600; color: var(--metin);
    margin-bottom: 25px; text-align: center;
}

/* ---------- Uyarı ---------- */
.login-alert {
    padding: 14px 18px; border-radius: 10px; margin-bottom: 20px;
    font-size: 14px; display: flex; align-items: center; gap: 10px;
}
.login-alert i { font-size: 18px; flex-shrink: 0; }
.login-alert-danger  { background: #fff5f5; border: 1px solid #fecaca; color: #b91c1c; }
.login-alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }

/* ---------- Alanlar ---------- */
.form-group { position: relative; margin-bottom: 18px; }

.form-group .input-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--soluk); font-size: 17px; transition: color .3s; z-index: 2;
}

.form-group .form-control {
    width: 100%;
    padding: 16px 16px 16px 50px;
    font-size: 15px;
    border: 2px solid var(--cizgi);
    border-radius: 12px;
    background: #f9fafb;
    transition: all .3s ease;
    font-family: inherit;
}
.form-group .form-control:focus {
    outline: none;
    border-color: var(--eko-bordo);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(155, 28, 36, .1);
}
.form-group:focus-within .input-icon { color: var(--eko-bordo); }
.form-group .form-control::placeholder { color: var(--soluk); }

.password-toggle {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--soluk);
    cursor: pointer; font-size: 17px; transition: color .3s; z-index: 2;
    padding: 6px;                                   /* dokunma hedefi */
}
.password-toggle:hover { color: var(--eko-bordo); }

/* ---------- Hatırla + şifremi unuttum satırı ---------- */
.login-secenek-satiri {
    display: flex; align-items: center; justify-content: space-between;
    margin: 4px 2px 6px; font-size: 14px;
}
.login-secenek-satiri label {
    display: flex; align-items: center; gap: 8px;
    color: var(--eko-gri); cursor: pointer; margin: 0; font-weight: 400;
}
.login-secenek-satiri input[type="checkbox"] {
    width: 17px; height: 17px; cursor: pointer; accent-color: var(--eko-bordo);
}
.login-secenek-satiri .forgot-link {
    color: var(--eko-bordo); text-decoration: none; transition: color .3s;
}
.login-secenek-satiri .forgot-link:hover { color: var(--eko-bordo-koyu); text-decoration: underline; }

/* ---------- Düğmeler ---------- */
.btn-login-primary {
    width: 100%; padding: 16px 20px; font-size: 16px; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, var(--eko-bordo) 0%, var(--eko-bordo-koyu) 100%);
    border: none; border-radius: 12px; cursor: pointer; transition: all .3s ease;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 10px; font-family: inherit;
}
.btn-login-primary:hover {
    background: linear-gradient(135deg, var(--eko-bordo-koyu) 0%, #6a1219 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(155, 28, 36, .35);
}
.btn-login-primary i { font-size: 17px; }

.login-divider { display: flex; align-items: center; margin: 25px 0; }
.login-divider::before, .login-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--cizgi);
}
.login-divider span { padding: 0 15px; color: var(--soluk); font-size: 13px; font-weight: 500; }

.btn-login-secondary {
    width: 100%; padding: 14px 20px; font-size: 15px; font-weight: 500;
    color: var(--eko-koyu); background: transparent;
    border: 2px solid var(--eko-koyu); border-radius: 12px;
    cursor: pointer; transition: all .3s ease; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 10px;
}
.btn-login-secondary:hover { background: var(--eko-koyu); color: #fff; text-decoration: none; }

.help-text { text-align: center; color: var(--eko-gri); font-size: 13px; margin-top: 15px; }

/* ---------- Alt bilgi ---------- */
.login-footer-section {
    text-align: center; padding-top: 20px;
    border-top: 1px solid #f3f4f6; margin-top: 20px;
}
.login-footer-links { margin-bottom: 12px; }
.login-footer-links a {
    font-size: 13px; color: var(--eko-gri); text-decoration: none;
    margin: 0 12px; transition: color .3s;
}
.login-footer-links a:hover { color: var(--eko-bordo); }
.login-footer-section .copyright { font-size: 12px; color: var(--soluk); }

/* ---------- Şifre sıfırlama kutusu (modal yerine satır içi panel) ---------- */
.sifre-panel {
    display: none; margin-top: 16px; padding: 18px;
    border: 2px solid var(--cizgi); border-radius: 12px; background: #f9fafb;
}
.sifre-panel.acik { display: block; }
.sifre-panel p { font-size: 13.5px; color: var(--eko-gri); margin-bottom: 12px; }
.sifre-panel .btn-sira { display: flex; gap: 8px; margin-top: 12px; }
.sifre-panel .btn-sira button { flex: 1; }
.btn-kucuk {
    padding: 11px 14px; border-radius: 10px; border: none; font-size: 14px;
    font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn-kucuk.bordo { background: var(--eko-bordo); color: #fff; }
.btn-kucuk.bordo:hover { background: var(--eko-bordo-koyu); }
.btn-kucuk.sade { background: #eef0f3; color: var(--metin); }
.btn-kucuk.sade:hover { background: #e2e5ea; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1024px) {
    .login-image-side { flex: 0 0 50%; }
    .login-panel-side { flex: 0 0 50%; }
}
@media (max-width: 768px) {
    .login-split-container { flex-direction: column; }
    .login-image-side { flex: 0 0 200px; min-height: 200px; }
    .login-panel-side { flex: 1; padding: 30px 25px; }
    .login-branding-overlay { bottom: 20px; left: 20px; }
    .login-branding-overlay h2 { font-size: 20px; }
    .login-branding-overlay p { font-size: 14px; }
}
@media (max-width: 480px) {
    .login-image-side { flex: 0 0 150px; min-height: 150px; }
    .login-panel-side { padding: 25px 20px; }
    .form-group .form-control { padding: 14px 14px 14px 45px; }
}

.login-image-side.fade-transition { animation: fadeBackground 1s ease-in-out; }
@keyframes fadeBackground { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}