/* Sinop Belediyesi Personel Portalı — Giriş ekranı stilleri
   Renkler logoyla uyumlu: lacivert (--brand) + mercan turuncu aksan (--accent) */


* { margin:0; padding:0; box-sizing:border-box; }
/* Renkler Sinop Belediyesi logosuyla uyumlu: lacivert + mercan turuncu aksan */
:root{ --brand:#17527f; --brand-dark:#0f3d6d; --accent:#e2531f; --ink:#1f2d3d; --muted:#64748b; }
html,body{ height:100%; }
body{
    font-family:'Montserrat',sans-serif;
    min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:40px 20px; color:var(--ink); position:relative;
    background:#eef2f7;
    background:
        radial-gradient(1100px 600px at 50% -12%, rgba(23,82,127,.10), transparent 60%),
        radial-gradient(680px 360px at 50% -6%, rgba(226,83,31,.07), transparent 60%),
        linear-gradient(180deg, #f7f9fc 0%, #e9eef5 100%);
    overflow-x:hidden;
}
.login-wrap{ width:100%; max-width:400px; text-align:center;
    animation:riseIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes riseIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

/* Adım (step) görünürlüğü */
.login-wrap[data-step="phone"] .step-sms{ display:none; }
.login-wrap[data-step="sms"] .step-phone{ display:none; }
/* Kullanıcı adı (TC) + şifre ile giriş: üçüncü adım, diğer ikisini gizler */
.login-wrap:not([data-step="sifre"]) .step-sifre{ display:none; }
.login-wrap[data-step="sifre"] .step-phone,
.login-wrap[data-step="sifre"] .step-sms{ display:none; }

.login-logo{ width:72px; height:72px; border-radius:50%; object-fit:cover; margin:0 auto 16px; box-shadow:0 8px 22px rgba(16,32,64,.14); display:block; }
.login-header{ margin-bottom:34px; }
.login-title{ font-size:26px; font-weight:700; letter-spacing:.5px; color:var(--brand); }
.login-subtitle{ position:relative; display:inline-block; font-size:14px; font-weight:600; letter-spacing:2px; color:var(--muted); margin-top:8px; padding-bottom:12px; }
.login-subtitle::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:44px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--accent), #f2a03f); }
.login-desc{ font-size:14px; color:#6b7686; margin-top:22px; line-height:1.55; }

.form-group{ margin-bottom:18px; text-align:left; }
.form-label{ display:block; margin-bottom:9px; font-size:13px; font-weight:500; color:#4a5568; }
.form-control{
    width:100%; padding:15px 16px; font-size:15px; font-family:inherit; color:var(--ink);
    border:1px solid #dbe2ea; border-radius:12px; background:#fff;
    box-shadow:0 1px 2px rgba(16,32,64,.04);
    transition:border-color .25s, box-shadow .25s;
}
.form-control::placeholder{ color:#9aa6b4; }
.form-control:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(25,83,138,.14); }
.code-input{ text-align:center; letter-spacing:.5em; font-weight:700; font-size:18px; }

.btn{ width:100%; padding:15px 20px; border:none; border-radius:12px; font-size:15px; font-weight:700; font-family:inherit; letter-spacing:.3px; cursor:pointer; transition:transform .2s, box-shadow .25s, filter .2s; }
.btn-primary{ background:linear-gradient(180deg, #1f5f9c, #19538a); color:#fff; box-shadow:0 10px 24px rgba(25,83,138,.28); }
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 14px 30px rgba(25,83,138,.34); }
.btn-primary:active{ transform:translateY(0); }
.btn:disabled{ opacity:.7; cursor:not-allowed; transform:none; box-shadow:none; }

.login-footer{ margin-top:20px; }
.login-footer a{ color:var(--brand); text-decoration:none; font-weight:500; font-size:14px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.login-footer a:hover{ text-decoration:underline; }

.signature{ margin-top:44px; font-size:12px; font-weight:600; letter-spacing:1.5px; }
.signature a{ position:relative; display:inline-block; padding-bottom:6px; color:#8a97a8; text-decoration:none; transition:color .22s; }
.signature a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,#c3ccd8 30%,#c3ccd8 70%,transparent); transition:background .22s; }
.signature a:hover{ color:var(--accent); }
.signature a:hover::after{ background:linear-gradient(90deg,transparent,rgba(226,83,31,.55) 30%,rgba(226,83,31,.55) 70%,transparent); }

/* Bilgi / hata mesajı — düz, satır içi, formun üstünde. Kayan kart, ikon, gölge ve animasyon yok. */
.notice{ display:block; text-align:left; font-size:13px; line-height:1.5; padding:10px 12px; margin:0 0 18px;
    border:1px solid #d5dbe4; border-radius:6px; background:#f3f5f8; color:#3b4656; }
.notice.error{ border-color:#e8b4b4; background:#fbf1f1; color:#8f2626; }
.notice.info{ border-color:#c6d5e4; background:#eef3f9; color:#1f4a72; }
.notice[hidden]{ display:none; }

.preloader{ position:fixed; inset:0; background:#f7f9fc; display:flex; justify-content:center; align-items:center; z-index:9999; transition:opacity .5s; }
.spinner{ width:40px; height:40px; border:3px solid rgba(25,83,138,.2); border-top-color:var(--brand); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:576px){
    .login-title{ font-size:22px; }
}


/* ---- Tekrar gönder / ipuçları (2026-09-13 güvenlik sürümü) ---- */
.resend-row { margin-top: 14px; text-align: center; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand, #19538a); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: #9aa6b4; cursor: not-allowed; text-decoration: none; }
.tel-vurgu { font-weight: 700; color: var(--ink, #1f2d3d); white-space: nowrap; }
.otp-hint { font-size: 12px; color: #8a97a8; margin-top: 12px; line-height: 1.55; text-align: center; }
.mod-satiri { margin-top: 16px; text-align: center; }
.mod-satiri .link-btn i { margin-right: 4px; }