/* ==============================================
   LOGIN.CSS — POZİTİF Lime-Green Tema
   ============================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap');

:root {
    --green:        #8DC63F;
    --green-light:  #A4D852;
    --green-dark:   #6A9E20;
    --green-glow:   rgba(141,198,63,0.15);
    --bg:           #ffffff;
    --bg-card:      #ffffff;
    --bg-input:     #f7fcf2;
    --border:       #ddf0c0;
    --border-focus: rgba(141,198,63,0.55);
    --text-h:       #1a2e0a;
    --text-b:       #4a6a2a;
    --text-muted:   #88a06a;
    --success:      #7ab82e;
    --danger:       #dc2626;
    --font:         'Plus Jakarta Sans', sans-serif;
    --font-h:       'Space Grotesk', sans-serif;
    --t:            0.22s cubic-bezier(0.4,0,0.2,1);
}

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

.login-page {
    position:fixed; inset:0; display:flex;
    align-items:center; justify-content:center;
    background:var(--bg); font-family:var(--font); overflow:hidden; z-index:999;
}

/* Arka plan grid */
.bg-grid {
    display: none;
}
@keyframes gridMove { to { background-position:56px 56px; } }

/* Işıklı orb'lar */
.bg-orb { display: none; }
@keyframes orbPulse { from { transform:translate(0,0) scale(1); } to { transform:translate(24px,32px) scale(1.06); } }

/* Wrapper */
.login-wrapper { position:relative; z-index:10; width:100%; max-width:430px; padding:1.25rem; }

/* Kart */
.login-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:20px; padding:2.75rem 2.5rem;
    position:relative; overflow:hidden;
    box-shadow:0 4px 6px -1px rgba(26,46,10,0.07), 0 10px 40px rgba(26,46,10,0.09);
    animation:cardIn 0.55s cubic-bezier(0.2,0,0,1) both;
}
@keyframes cardIn { from { opacity:0; transform:translateY(22px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.login-card::after {
    content:''; position:absolute; top:0; left:10%; right:10%; height:3px;
    border-radius:0 0 6px 6px;
    background:linear-gradient(90deg,transparent,var(--green-light) 30%,var(--green-dark) 70%,transparent);
}

/* Marka */
.brand-header { text-align:center; margin-bottom:2.25rem; animation:fadeUp 0.5s 0.05s both; }
.brand-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:60px; height:60px; border-radius:16px;
    background:linear-gradient(135deg,rgba(164,216,82,0.18),rgba(106,158,32,0.14));
    border:1px solid rgba(141,198,63,0.28);
    margin-bottom:1.1rem; font-size:1.6rem; color:var(--green-dark);
    box-shadow:0 4px 20px rgba(141,198,63,0.2);
}
.brand-title { font-family:var(--font-h); font-size:1.55rem; font-weight:700; color:var(--text-h); letter-spacing:-0.025em; margin-bottom:0.3rem; }
.brand-subtitle { font-size:0.845rem; color:var(--text-b); }

/* Alanlar */
.field-group { margin-bottom:1rem; animation:fadeUp 0.5s both; }
.field-group:nth-child(1) { animation-delay:0.15s; }
.field-group:nth-child(2) { animation-delay:0.22s; }
.field-label { display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-b); margin-bottom:0.45rem; }
.field-wrap { position:relative; }
.field-icon { position:absolute; left:0.9rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:1.05rem; pointer-events:none; z-index:1; transition:color var(--t); }
.form-input {
    width:100%; background:var(--bg-input); border:1px solid var(--border);
    border-radius:11px; padding:0.82rem 1rem 0.82rem 2.6rem;
    font-family:var(--font); font-size:0.9rem; color:var(--text-h); outline:none;
    transition:border-color var(--t),box-shadow var(--t),background var(--t);
    -webkit-appearance:none; appearance:none;
    box-shadow:inset 0 1px 2px rgba(26,46,10,0.04);
}
.form-input::placeholder { color:var(--text-muted); }
.form-input:focus { border-color:var(--border-focus); background:#fff; box-shadow:0 0 0 3px var(--green-glow); }
.field-wrap:focus-within .field-icon { color:var(--green-dark); }
.pwd-toggle { position:absolute; right:0.85rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1rem; padding:0; transition:color var(--t); z-index:1; }
.pwd-toggle:hover { color:var(--text-b); }

/* Seçenekler */
.options-row { display:flex; align-items:center; justify-content:space-between; margin:1.1rem 0 1.5rem; animation:fadeUp 0.5s 0.3s both; }
.form-check { display:flex; align-items:center; gap:0.45rem; }
.form-check-input { width:15px; height:15px; background:var(--bg-input); border:1.5px solid #b8e87a; border-radius:4px; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background var(--t),border-color var(--t); position:relative; flex-shrink:0; }
.form-check-input:checked { background:var(--green-dark); border-color:var(--green-dark); }
.form-check-input:checked::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
.form-check-label { font-size:0.83rem; color:var(--text-b); cursor:pointer; user-select:none; }
.forgot-link { font-size:0.83rem; color:var(--green-dark); font-weight:500; text-decoration:none; transition:opacity var(--t); }
.forgot-link:hover { opacity:0.7; }

/* Giriş butonu */
.btn-login {
    width:100%; padding:0.875rem; border:none; border-radius:11px;
    background:linear-gradient(135deg,var(--green-light),var(--green-dark));
    color:#fff; font-family:var(--font-h); font-size:0.925rem; font-weight:700;
    cursor:pointer; position:relative; overflow:hidden;
    transition:transform var(--t),box-shadow var(--t),opacity var(--t);
    box-shadow:0 4px 16px rgba(141,198,63,0.38);
    animation:fadeUp 0.5s 0.38s both;
}
.btn-login:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 28px rgba(141,198,63,0.44); }
.btn-login:active:not(:disabled) { transform:translateY(0); }
.btn-login:disabled { opacity:0.65; cursor:not-allowed; }
.btn-login.success { background:linear-gradient(135deg,#c8f080,#7ab82e); box-shadow:0 4px 14px rgba(141,198,63,0.35); }
.btn-inner { display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.btn-spinner { display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; }
.btn-spinner.active { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Hata */
.error-alert { display:none; align-items:center; gap:0.55rem; margin-top:1rem; padding:0.75rem 0.9rem; background:#fef2f2; border:1px solid #fecaca; border-radius:10px; color:#b91c1c; font-size:0.845rem; animation:fadeUp 0.3s both; }
.error-alert.visible { display:flex; }
.error-alert i { font-size:1rem; flex-shrink:0; color:var(--danger); }
.card-divider { height:1px; background:var(--border); margin:1.75rem 0 1.25rem; }
.card-footer-text { text-align:center; font-size:0.77rem; color:var(--text-muted); animation:fadeUp 0.5s 0.5s both; }
.card-footer-text span { display:inline-flex; align-items:center; gap:0.4rem; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--success); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.75); } }
@keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-7px); } 40% { transform:translateX(7px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(4px); } }
.shake { animation:shake 0.38s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

@media (max-width:480px) {
    .login-card { padding:2rem 1.5rem; }
    .brand-title { font-size:1.3rem; }
}