Şifre Güvenlik Ölçer

<div class="pwd-container">
  <label style="color:#fff; font-size:14px;">Şifrenizi Belirleyin</label>
  <input type="password" id="pwdInput" placeholder="Güvenli bir şifre girin...">
  
  <div class="pwd-strength-container">
    <div class="pwd-bar" id="pwdBar"></div>
  </div>
  <div class="pwd-text" id="pwdText">Zayıf (En az 8 karakter)</div>
</div>

.pwd-container { width: 100%; max-width: 320px; font-family: 'Inter', sans-serif; background: #2a2a35; padding: 25px; border-radius: 12px; }
#pwdInput { width: 100%; box-sizing:border-box; margin-top: 10px; margin-bottom: 15px; padding: 12px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 6px; outline: none; transition: 0.3s; }
#pwdInput:focus { border-color: #6C5CE7; }
.pwd-strength-container { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.pwd-bar { height: 100%; width: 0%; border-radius: 3px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.pwd-text { font-size: 12px; color: #a0a0b0; transition: 0.3s; }

/* Strength States */
.pwd-bar.weak { width: 25%; background: #ff4757; box-shadow: 0 0 8px #ff4757; }
.pwd-bar.medium { width: 50%; background: #ffa502; box-shadow: 0 0 8px #ffa502; }
.pwd-bar.good { width: 75%; background: #1e90ff; box-shadow: 0 0 8px #1e90ff; }
.pwd-bar.strong { width: 100%; background: #2ed573; box-shadow: 0 0 8px #2ed573; }

const input = document.getElementById('pwdInput');
const bar = document.getElementById('pwdBar');
const text = document.getElementById('pwdText');

input.addEventListener('input', function() {
  const val = input.value;
  let score = 0;
  
  if (val.length >= 8) score += 1;
  if (/[A-Z]/.test(val)) score += 1;
  if (/[0-9]/.test(val)) score += 1;
  if (/[^A-Za-z0-9]/.test(val)) score += 1;
  
  // Sınıfları temizle
  bar.className = 'pwd-bar';
  
  if (val.length === 0) {
    text.innerText = 'Zayıf (En az 8 karakter)';
    text.style.color = '#a0a0b0';
  } else if (score === 0 || score === 1) {
    bar.classList.add('weak');
    text.innerText = 'Çok Zayıf - Riskli';
    text.style.color = '#ff4757';
  } else if (score === 2) {
    bar.classList.add('medium');
    text.innerText = 'Orta - Daha iyisi olabilir';
    text.style.color = '#ffa502';
  } else if (score === 3) {
    bar.classList.add('good');
    text.innerText = 'İyi - Güvenli';
    text.style.color = '#1e90ff';
  } else if (score >= 4) {
    bar.classList.add('strong');
    text.innerText = 'Çok Güçlü - Kırılması zor';
    text.style.color = '#2ed573';
  }
});