Akıllı Hata/Başarı Login Formu

<div class="login-wrapper">
  <div class="login-box" id="loginBox">
    <h2>Giriş Yap</h2>
    <div class="input-box">
      <input type="text" id="username" required>
      <label>Kullanıcı Adı</label>
    </div>
    <div class="input-box">
      <input type="password" id="password" required>
      <label>Şifre</label>
    </div>
    <button id="loginBtn" onclick="checkLogin()">Giriş</button>
  </div>
  
  <div class="result-card" id="successCard">
    <div class="success-checkmark">
      <div class="check-icon">
        <span class="icon-line line-tip"></span>
        <span class="icon-line line-long"></span>
        <div class="icon-circle"></div>
        <div class="icon-fix"></div>
      </div>
    </div>
    <h3>Giriş Başarılı</h3>
    <p>Yönlendiriliyorsunuz...</p>
  </div>
  
  <div class="result-card error-card" id="errorCard">
    <div class="error-cross">
      <div class="cross-icon">
        <span class="cross-line line-left"></span>
        <span class="cross-line line-right"></span>
        <div class="cross-circle"></div>
      </div>
    </div>
    <h3>Hatalı Giriş</h3>
    <p>Kullanıcı adı veya şifre yanlış.</p>
    <button onclick="resetForm()" style="margin-top:15px;background:#ff4757;border:none;color:#fff;padding:8px 20px;border-radius:5px;cursor:pointer;">Tekrar Dene</button>
  </div>
</div>

.login-wrapper { position: relative; width: 320px; height: 380px; perspective: 1000px; }
.login-box { width: 100%; height: 100%; padding: 40px; background: rgba(255, 255, 255, 0.05); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; font-family: 'Inter', sans-serif; backdrop-filter: blur(10px); transition: transform 0.6s; position: absolute; backface-visibility: hidden; }
.login-box h2 { margin: 0 0 30px; color: #fff; text-align: center; }
.input-box { position: relative; margin-bottom: 30px; }
.input-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; }
.input-box input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #2a2a35 inset !important; -webkit-text-fill-color: white !important; }
.input-box label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; }
.input-box input:focus ~ label, .input-box input:valid ~ label { top: -20px; color: #4d5bf9; font-size: 12px; }
#loginBtn { background: #4d5bf9; border: none; color: #fff; padding: 10px 20px; cursor: pointer; border-radius: 5px; width: 100%; font-size: 16px; }

/* Result Cards (Flip to show) */
.result-card { width: 100%; height: 100%; position: absolute; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 10px; text-align: center; padding: 40px; box-sizing: border-box; color: #fff; transform: rotateY(180deg); backface-visibility: hidden; transition: transform 0.6s; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 15px 25px rgba(0,0,0,.6); }
.success-card-active .login-box { transform: rotateY(180deg); }
.success-card-active #successCard { transform: rotateY(0deg); }
.error-card-active .login-box { transform: scale(0.95); opacity: 0; }
.error-card-active #errorCard { transform: rotateY(0deg); }

/* SVG-like pure CSS Animated Checkmark */
.success-checkmark { width: 80px; height: 115px; margin: 0 auto; }
.check-icon { width: 80px; height: 80px; position: relative; border-radius: 50%; box-sizing: content-box; border: 4px solid #4CAF50; }
.check-icon::before, .check-icon::after { content: ''; height: 100px; position: absolute; background: var(--bg-color); transform: rotate(-45deg); }
.check-icon::before { border-radius: 120px 0 0 120px; top: -7px; left: -33px; transform: rotate(-45deg); transform-origin: 60px 60px; animation: 0.4s rotatePlaceholder ease-in; }
.check-icon::after { border-radius: 0 120px 120px 0; top: -11px; left: 30px; transform: rotate(-45deg); transform-origin: 0px 60px; animation: 4.25s rotatePlaceholder ease-in; }
.icon-line { height: 5px; background-color: #4CAF50; display: block; border-radius: 2px; position: absolute; z-index: 10; }
.icon-line.line-tip { top: 46px; left: 14px; width: 25px; transform: rotate(45deg); animation: 0.8s icon-line-tip ease; }
.icon-line.line-long { top: 38px; right: 8px; width: 47px; transform: rotate(-45deg); animation: 0.8s icon-line-long ease; }
.icon-circle { top: -4px; left: -4px; z-index: 10; width: 80px; height: 80px; border-radius: 50%; position: absolute; box-sizing: content-box; border: 4px solid rgba(76, 175, 80, .5); }
.icon-fix { top: 8px; width: 5px; left: 26px; z-index: 1; height: 85px; position: absolute; transform: rotate(-45deg); background-color: transparent; }

/* CSS Error Cross */
.error-cross { width: 80px; height: 80px; margin: 0 auto 20px; position: relative; border-radius: 50%; border: 4px solid #ff4757; }
.cross-circle { top: -4px; left: -4px; z-index: 10; width: 80px; height: 80px; border-radius: 50%; position: absolute; border: 4px solid rgba(255, 71, 87, .5); animation: 0.5s rotatePlaceholder ease-in; }
.cross-line { height: 5px; background-color: #ff4757; display: block; border-radius: 2px; position: absolute; z-index: 10; top: 37px; width: 40px; left: 20px; }
.line-left { transform: rotate(45deg); animation: 0.5s icon-line-long ease; }
.line-right { transform: rotate(-45deg); animation: 0.5s icon-line-tip ease; }

@keyframes icon-line-tip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } }
@keyframes icon-line-long { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } }
@keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); } 5% { transform: rotate(-45deg); } 12% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); } }

.shake { animation: shake 0.5s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }

function checkLogin() {
  const pass = document.getElementById('password').value;
  const wrapper = document.querySelector('.login-wrapper');
  
  if (pass === '123') {
     wrapper.classList.remove('error-card-active');
     wrapper.classList.remove('shake');
     wrapper.classList.add('success-card-active');
  } else {
     wrapper.classList.add('shake');
     setTimeout(() => { wrapper.classList.add('error-card-active'); }, 500);
  }
}
function resetForm() {
    const wrapper = document.querySelector('.login-wrapper');
    wrapper.classList.remove('error-card-active');
    wrapper.classList.remove('shake');
    document.getElementById('password').value = '';
}