/* ============================================================
   BTE Üye Sistemi — Giriş Sayfası (Tek Kart, Derli Toplu)
   Palet: Turuncu + Navy + Gri Tonları
   ============================================================ */

:root {
    --o-50:#FFF4E8; --o-100:#FFE3C4; --o-300:#FFB066;
    --o-400:#FF9540; --o-500:#F58220; --o-600:#E5731A; --o-700:#C56214;

    --n-50:#F4F6FA; --n-100:#E2E7F0; --n-200:#C0CADD;
    --n-400:#5C6E92; --n-700:#243152; --n-800:#1F2A44; --n-900:#161E33;

    --g-50:#FAFAFA; --g-100:#F4F5F7; --g-200:#E8EAEE; --g-300:#D1D5DB;
    --g-400:#9CA3AF; --g-500:#6B7280; --g-700:#374151;

    --red:#EF4444; --amber:#F59E0B;

    --card:#fff;
    --shadow-lg:0 20px 60px rgba(31,42,68,.18);
    --radius:18px;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter','Segoe UI',-apple-system,sans-serif; }
html { scroll-behavior:smooth; }
body {
    background:
        radial-gradient(circle at 15% 20%, rgba(245,130,32,.18), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(20,184,166,.12), transparent 45%),
        linear-gradient(135deg, var(--n-800) 0%, var(--n-900) 100%);
    color:var(--n-800);
    line-height:1.6;
    font-size:14px;
    min-height:100vh;
}
a { color:var(--o-500); text-decoration:none; transition:color .15s; }
a:hover { color:var(--o-400); }

/* ============ SAYFA ============ */
.login-page {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px 16px;
    gap:18px;
}

/* ============ KART ============ */
.login-card {
    width:100%;
    max-width:400px;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    padding:36px 32px 28px;
    position:relative;
}

.login-logo {
    width:60px; height:60px;
    margin:0 auto 18px;
    border-radius:16px;
    background:linear-gradient(135deg, var(--o-500), var(--o-700));
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:24px;
    box-shadow:0 10px 24px rgba(245,130,32,.35);
}

.login-title {
    font-size:22px;
    font-weight:800;
    color:var(--n-800);
    text-align:center;
    letter-spacing:-.3px;
    margin-bottom:4px;
}
.login-sub {
    color:var(--g-500);
    font-size:13.5px;
    text-align:center;
    margin-bottom:24px;
}

/* ============ UYARILAR ============ */
.alert {
    padding:11px 14px;
    border-radius:10px;
    margin-bottom:14px;
    font-size:13px;
    display:flex; align-items:center; gap:9px;
    border-left:3px solid;
    line-height:1.4;
}
.alert i { font-size:13px; }
.alert-error { background:#fef2f2; color:#991b1b; border-left-color:var(--red); }
.alert-info  { background:#eff6ff; color:#1e40af; border-left-color:#3b82f6; }
.alert-warn  { background:#fffbeb; color:#92400e; border-left-color:var(--amber); }

/* ============ FORM ============ */
.form-group { margin-bottom:14px; }
.form-group label {
    display:flex; align-items:center; gap:6px;
    font-weight:700; color:var(--n-700);
    margin-bottom:6px; font-size:12.5px;
}
.form-group label i { color:var(--o-500); font-size:11.5px; width:14px; }

.form-input {
    width:100%;
    padding:11px 13px;
    border:1.5px solid var(--g-200);
    border-radius:10px;
    font-size:14px;
    background:var(--g-50);
    color:var(--n-800);
    transition:all .15s;
    font-family:inherit;
}
.form-input:hover { border-color:var(--g-300); }
.form-input:focus {
    outline:none;
    border-color:var(--o-500);
    background:#fff;
    box-shadow:0 0 0 4px rgba(245,130,32,.12);
}
.form-input::placeholder { color:var(--g-400); }
.form-input:disabled { background:var(--g-100); color:var(--g-400); cursor:not-allowed; }

.captcha-row { display:flex; gap:8px; align-items:stretch; }
.captcha-soru {
    flex-shrink:0;
    background:var(--n-800);
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    font-weight:800;
    font-size:16px;
    display:inline-flex; align-items:center;
    letter-spacing:1px;
    user-select:none;
}
.captcha-soru .accent { color:var(--o-400); font-style:italic; margin:0 3px; }
.captcha-row .form-input { flex:1; text-align:center; font-weight:700; font-size:16px; }

/* ============ GİRİŞ BUTONU ============ */
.btn-primary {
    width:100%;
    padding:13px;
    background:linear-gradient(135deg, var(--o-500), var(--o-600));
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:14.5px;
    font-weight:800;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:all .2s;
    box-shadow:0 8px 22px rgba(245,130,32,.32);
    font-family:inherit;
    letter-spacing:.3px;
    margin-top:4px;
}
.btn-primary:hover:not(:disabled) {
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(245,130,32,.42);
}
.btn-primary:disabled {
    background:var(--g-300);
    box-shadow:none;
    cursor:not-allowed;
    opacity:.7;
}

/* ============ ALT ============ */
.login-foot {
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--g-100);
    text-align:center;
    font-size:13px;
}
.login-foot a { color:var(--o-600); font-weight:700; }

.login-page-foot {
    color:rgba(255,255,255,.55);
    font-size:12px;
    text-align:center;
}
.login-page-foot a { color:var(--o-400); }

/* ============ RESPONSIVE ============ */
@media (max-width:480px) {
    .login-page { padding: 16px 12px; }
    .login-card { padding:28px 22px 22px; border-radius:14px; }
    .login-logo { width:52px; height:52px; font-size:20px; }
    .login-title { font-size:19px; }
    .login-sub { font-size:13px; margin-bottom:20px; }
    .form-input { font-size:14px; padding: 10px 12px; }
    .btn-primary { padding: 12px; font-size: 14px; }
}
@media (max-width:380px) {
    .login-card { padding: 22px 18px 18px; }
    .captcha-row { flex-direction: column; gap: 8px; }
    .captcha-soru { width: 100%; justify-content: center; padding: 10px; font-size: 16px; }
    .captcha-row .form-input { text-align: center; }
    .login-title { font-size: 17.5px; }
}