3D İnteraktif Kredi Kartı

<div class="checkout-wrapper">
  <div class="card-container">
    <div class="card-3d" id="creditCard">
      <div class="card-front">
        <div class="card-chip"></div>
        <div class="bank-logo" id="bankLogo">Banka/Ağ</div>
        <div class="card-number" id="cardNumDisp">#### #### #### ####</div>
        <div class="card-details">
          <div class="card-date">
            <span>Tarih</span><div id="cardDateDisp">AA/YY</div>
          </div>
          <div class="card-holder">
            <span>Sahibi</span><div>MÜŞTERİ</div>
          </div>
        </div>
      </div>
      <div class="card-back">
        <div class="magnetic-strip"></div>
        <div class="cvv-box">
          <span>CVV</span>
          <div class="cvv-strip" id="cvvDisp">***</div>
        </div>
      </div>
    </div>
  </div>

  <div class="form-group">
    <input type="text" id="ccNumber" placeholder="Kart Numarası" maxlength="19">
    <div style="display:flex; gap:10px; margin-top:10px;">
      <input type="text" id="ccDate" placeholder="AA/YY" maxlength="5">
      <input type="text" id="ccCvv" placeholder="CVV" maxlength="3">
    </div>
  </div>
  <p class="security-note"><i class="fas fa-shield-alt"></i> Güvenli: Bu alan sadece ön yüz tasarımıdır. Şifreleme (SSL/PCI-DSS) yoktur.</p>
</div>

.checkout-wrapper { width: 100%; max-width: 350px; font-family: 'Inter', sans-serif; }
.card-container { perspective: 1000px; margin-bottom: 25px; }
.card-3d { width: 100%; height: 200px; position: relative; transition: transform 0.8s; transform-style: preserve-3d; }
.card-3d.flipped { transform: rotateY(180deg); }
.card-front, .card-back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; border-radius: 15px; box-shadow: 0 15px 25px rgba(0,0,0,0.5); padding: 20px; box-sizing: border-box; color: white; background: linear-gradient(135deg, #1e1e2f, #3a3a52); background-image: url('data:image/svg+xml,%3Csvg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z\' fill=\'rgba(255,255,255,0.05)\' fill-rule=\'evenodd\'/%3E%3C/svg%3E'); }
.card-back { transform: rotateY(180deg); padding: 0; padding-top: 20px; }
.card-chip { width: 45px; height: 35px; background: linear-gradient(135deg, #d4af37, #ab8212); border-radius: 5px; margin-bottom: 20px; }
.bank-logo { position: absolute; top: 20px; right: 20px; font-weight: bold; font-style: italic; font-size: 20px; }
.card-number { letter-spacing: 2px; font-size: 22px; font-family: monospace; margin-bottom: 20px; }
.card-details { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; }
.card-details span { color: #a0a0b0; display: block; font-size: 10px; }
.magnetic-strip { width: 100%; height: 40px; background: #000; margin-bottom: 20px; }
.cvv-box { padding: 0 20px; text-align: right; }
.cvv-strip { background: #fff; color: #000; height: 30px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-weight: bold; font-family: monospace; border-radius: 4px; }
.form-group input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #444; background: #2a2a35; color: #fff; font-size: 14px; outline: none; }
.form-group input:focus { border-color: #6C5CE7; }
.security-note { font-size: 11px; color: #a0a0b0; margin-top: 15px; }

const numIn = document.getElementById('ccNumber');
const dateIn = document.getElementById('ccDate');
const cvvIn = document.getElementById('ccCvv');
const numDisp = document.getElementById('cardNumDisp');
const dateDisp = document.getElementById('cardDateDisp');
const cvvDisp = document.getElementById('cvvDisp');
const logo = document.getElementById('bankLogo');
const card = document.getElementById('creditCard');

numIn.addEventListener('input', function(e) {
  let val = e.target.value.replace(/\D/g, '');
  let formatted = '';
  for(let i=0; i<val.length; i++) {
    if(i > 0 && i % 4 === 0) formatted += ' ';
    formatted += val[i];
  }
  e.target.value = formatted;
  numDisp.innerText = formatted || '#### #### #### ####';

  let txt = val;
  if(txt.startsWith('4')) logo.innerText = 'VISA';
  else if(txt.startsWith('5')) logo.innerText = 'MasterCard';
  else if(txt.startsWith('9792')) logo.innerText = 'TROY';
  else if(txt.startsWith('467153')) logo.innerText = 'Ziraat';
  else if(txt.startsWith('540062')) logo.innerText = 'Garanti';
  else logo.innerText = 'Banka/Ağ';
});

dateIn.addEventListener('input', function(e) {
  let val = e.target.value.replace(/\D/g, '');
  if(val.length > 2) val = val.substring(0,2) + '/' + val.substring(2);
  e.target.value = val;
  dateDisp.innerText = val || 'AA/YY';
});

cvvIn.addEventListener('input', function(e) {
  cvvDisp.innerText = e.target.value || '***';
});

cvvIn.addEventListener('focus', () => card.classList.add('flipped'));
cvvIn.addEventListener('blur', () => card.classList.remove('flipped'));