/* Şifremi unuttum / şifre değiştir — ortak görünüm (6 Ekim 2026). Davranış: assets/js/sifre_formu.js. Kapsam .sf-* */

.sf-kutu { margin: 3% auto; max-width: 400px; width: 100%; padding: 0 16px; }
.sf-kutu .login-logo { margin-bottom: 14px; }
.sf-kutu .login-logo p { font-size: 28px; margin: 8px 0 0; }
.sf-govde { border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); padding: 22px 22px 18px; }

.sf-baslik { color: #c0392b; font-size: 18px; font-weight: 600; margin: 0 0 12px; text-align: center; }

/* Adım göstergesi */
.sf-adimlar { counter-reset: adim; display: flex; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; }
.sf-adimlar li { border-top: 3px solid #e3e8ec; color: #9aa5ad; counter-increment: adim; flex: 1; font-size: 12px; padding-top: 6px; }
.sf-adimlar li::before { content: counter(adim) ". "; font-weight: 700; }
.sf-adimlar li.aktif { border-color: #3c8dbc; color: #2b3a42; font-weight: 600; }
.sf-adimlar li.bitti { border-color: #00a65a; color: #00a65a; }

.sf-aciklama { color: #555; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }

/* Mesaj kutuları — sol şeritli (uygulamadaki mesajKutusu diliyle aynı) */
.sf-mesaj { align-items: flex-start; border-left: 3px solid; border-radius: 6px; display: flex; font-size: 13px; gap: 8px; line-height: 1.45; margin-bottom: 14px; padding: 9px 12px; }
.sf-mesaj > .fa { margin-top: 2px; }
.sf-mesaj-bilgi { background: #eef6fb; border-color: #3c8dbc; color: #2b5f80; }
.sf-mesaj-hata { background: #fdecea; border-color: #dd4b39; color: #a33a2c; }

.sf-form label { color: #444; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.sf-form .form-control { border-radius: 6px; font-size: 15px; height: 40px; }

/* Girdi + sağdaki simge / göz düğmesi */
.sf-girdi { position: relative; }
.sf-girdi .form-control { padding-right: 40px; }
.sf-girdi > .fa { color: #9aa5ad; pointer-events: none; position: absolute; right: 13px; top: 12px; }
.sf-goster { background: none; border: 0; color: #8a96a0; height: 40px; outline: none; position: absolute; right: 0; top: 0; width: 40px; }
.sf-goster:hover { color: #3c8dbc; }
.sf-goster:focus-visible { box-shadow: inset 0 0 0 2px #9cc6e0; border-radius: 6px; }

/* 6 haneli kod */
.sf-form .sf-kod { font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 700; height: 52px; letter-spacing: 10px; text-align: center; }

.sf-alan-hata { color: #c0392b; font-size: 12.5px; margin-top: 5px; }
.sf-alan-uyari { color: #b8770a; font-size: 12.5px; margin-top: 5px; }

/* Şifre gücü */
.sf-olcer { margin-top: 8px; }
.sf-olcer-cubuk { background: #eef1f4; border-radius: 3px; height: 6px; overflow: hidden; }
.sf-olcer-cubuk span { background: #dd4b39; display: block; height: 100%; transition: width .2s, background .2s; width: 0; }
.sf-olcer-etiket { color: #666; font-size: 12px; margin-top: 4px; }
.sf-olcer[data-duzey="zayif"] .sf-olcer-cubuk span { background: #dd4b39; width: 33%; }
.sf-olcer[data-duzey="orta"] .sf-olcer-cubuk span { background: #f39c12; width: 66%; }
.sf-olcer[data-duzey="guclu"] .sf-olcer-cubuk span { background: #00a65a; width: 100%; }
.sf-olcer[data-duzey="zayif"] .sf-olcer-etiket strong { color: #c0392b; }
.sf-olcer[data-duzey="orta"] .sf-olcer-etiket strong { color: #b8770a; }
.sf-olcer[data-duzey="guclu"] .sf-olcer-etiket strong { color: #1e7e4a; }

.sf-kurallar { list-style: none; margin: 6px 0 0; padding: 0; }
.sf-kurallar li { color: #8a96a0; font-size: 12.5px; padding-left: 18px; position: relative; }
.sf-kurallar li::before { content: "\f10c"; font-family: FontAwesome; font-size: 11px; left: 0; position: absolute; top: 2px; }
.sf-kurallar li.tamam { color: #1e7e4a; }
.sf-kurallar li.tamam::before { content: "\f00c"; }
.sf-not { color: #8a96a0; font-size: 12px; margin-top: 4px; }

.sf-eslesme { font-size: 12.5px; margin-top: 5px; }
.sf-eslesme.evet { color: #1e7e4a; }
.sf-eslesme.hayir { color: #c0392b; }

/* Düğmeler */
.sf-dugmeler { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 6px; }
.sf-dugmeler .btn { border-radius: 6px; font-weight: 600; padding: 9px 10px; }
.sf-govde .btn:focus, .sf-govde .btn:active:focus { box-shadow: none; outline: none; }
.sf-govde .btn:focus-visible { box-shadow: inset 0 0 0 2px #9cc6e0; }
.sf-govde .btn[disabled] { cursor: progress; }

.sf-yeniden { align-items: center; border-top: 1px solid #f0f0f0; color: #777; display: flex; flex-wrap: wrap; font-size: 13px; gap: 4px; justify-content: center; margin-top: 14px; padding-top: 10px; }
.sf-yeniden .btn-link { font-size: 13px; padding: 0 2px; }
.sf-yeniden .btn-link[disabled] { color: #9aa5ad; text-decoration: none; }

/* Tamam */
.sf-tamam { padding: 6px 0; text-align: center; }
.sf-tamam > .fa { color: #00a65a; font-size: 54px; }
.sf-tamam h4 { font-size: 19px; font-weight: 600; margin: 10px 0 6px; }
.sf-tamam p { color: #666; margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) { .sf-olcer-cubuk span { transition: none; } }