/* ==========================================================================
   Kredi kartı ekranı (assets/js/card.js) — cüzdanın "Kredi Kartı" yöntemi
   3B kart: yazarken canlı güncellenir, CVV'ye geçince arkasını döner, ilk
   hanelerden bulunan kart türünün rengine bürünür. Animasyonlar yalnızca
   transform / opacity; sonsuz döngü yok (PLAN.md › Performans kuralları).
   ========================================================================== */

.cc { display: grid; gap: 14px; }
.wlt__view.is-entering > .cc > * { animation: wlt-in .5s var(--ease) backwards; animation-delay: calc(60ms + var(--i, 0) * 45ms); }

/* ---------- tutar şeridi ---------- */
.cc-due { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.cc-due .pm-logo { flex-shrink: 0; }
.cc-due__text { display: grid; min-width: 0; }
.cc-due__text small { font-size: 12px; color: var(--text-mute); }
.cc-due__text b { font: 800 20px var(--font-display); font-variant-numeric: tabular-nums; }
.cc-due__edit { margin-left: auto; padding: 6px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 800; color: var(--pm); background: rgba(var(--pm-rgb), .1); transition: background-color .2s; }
.cc-due__edit:hover { background: rgba(var(--pm-rgb), .18); }

/* ---------- sahne ---------- */
.cc-stage { position: relative; display: grid; justify-items: center; padding: 4px 0 16px; }
/* perspektif ve kart boyutu burada; kart yazıları bu kutunun genişliğine göre (cqi) ölçeklenir */
.cc-box { position: relative; width: min(100%, 340px); aspect-ratio: 1.586; perspective: 1100px; container-type: inline-size; }
.cc-tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease);
  animation: cc-in .95s var(--ease) backwards;
}
.cc-stage.is-tracking .cc-tilt { transition-duration: .14s; }
@keyframes cc-in { from { opacity: 0; transform: translateY(28px) rotateX(32deg) rotateY(-26deg) scale(.86); } }

.cc-card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.3, 1.25, .5, 1); }
.cc.is-flipped .cc-card { transform: rotateY(180deg); }
.cc.is-sending .cc-card { animation: cc-send .7s var(--ease) both; }
@keyframes cc-send { 40% { transform: translateY(-6px) scale(1.03); } to { transform: translateY(0) scale(.97); } }
.cc.is-wrong .cc-card { animation: cc-wrong .42s ease-out; }
@keyframes cc-wrong { 20% { transform: rotateZ(-2.5deg); } 45% { transform: rotateZ(2deg); } 70% { transform: rotateZ(-1deg); } }

.cc-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 6cqi;
  color: #fff;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.cc-face--back { transform: rotateY(180deg); }
/* ince kontur deseni: bir kez boyanır */
.cc-face::before { content: ''; position: absolute; inset: 0; z-index: 1; background: repeating-radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .055) 0 1px, transparent 1px 13px); pointer-events: none; }

/* türe göre zemin: katmanlar üst üste, seçilen yumuşakça belirir */
.cc-bg, .cc-bg i { position: absolute; inset: 0; }
.cc-bg i { opacity: 0; transition: opacity .7s var(--ease); }
.cc-bg i[data-b=""] { background: radial-gradient(110% 85% at 0% 0%, rgba(var(--pm-rgb), .6), transparent 58%), radial-gradient(70% 70% at 100% 100%, rgba(34, 211, 238, .25), transparent 60%), linear-gradient(140deg, #182650, #0b1226 55%, #1c2c58); }
.cc-bg i[data-b="visa"] { background: radial-gradient(90% 80% at 100% 0%, rgba(247, 182, 0, .28), transparent 55%), radial-gradient(110% 90% at 0% 100%, rgba(93, 135, 255, .45), transparent 60%), linear-gradient(140deg, #1a1f71, #2a42c0 52%, #0c1250); }
.cc-bg i[data-b="mastercard"] { background: radial-gradient(80% 80% at 100% 0%, rgba(247, 158, 27, .5), transparent 58%), radial-gradient(90% 90% at 0% 100%, rgba(235, 0, 27, .42), transparent 60%), linear-gradient(140deg, #201a1e, #2d1b17 50%, #120d10); }
.cc-bg i[data-b="troy"] { background: radial-gradient(90% 80% at 100% 0%, rgba(0, 220, 200, .4), transparent 55%), linear-gradient(140deg, #003a48, #00808c 55%, #00a99d); }
.cc-bg i[data-b="amex"] { background: radial-gradient(90% 80% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(140deg, #0d4a86, #2e77bb 55%, #5fa8e2); }
.cc-card[data-brand=""] .cc-bg i[data-b=""],
.cc-card[data-brand="visa"] .cc-bg i[data-b="visa"],
.cc-card[data-brand="mastercard"] .cc-bg i[data-b="mastercard"],
.cc-card[data-brand="troy"] .cc-bg i[data-b="troy"],
.cc-card[data-brand="amex"] .cc-bg i[data-b="amex"] { opacity: 1; }

/* imleçle gezen parıltı (yalnızca transform) ve tür değişince bir kez geçen ışık */
.cc-glare { position: absolute; inset: -60%; z-index: 2; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .26), transparent 34%); transform: translate(var(--gx, -12%), var(--gy, -16%)); transition: transform .6s var(--ease), opacity .4s; opacity: .7; pointer-events: none; }
.cc-stage.is-tracking .cc-glare { transition-duration: .14s, .4s; opacity: 1; }
.cc-sheen { position: absolute; inset: 0; z-index: 2; background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .34) 50%, transparent 68%); transform: translateX(-130%); pointer-events: none; }

/* ---------- ön yüz ---------- */
.cc-top { position: absolute; z-index: 3; left: 7%; right: 7%; top: 9%; display: flex; align-items: center; gap: 4cqi; }
.cc-chip { position: relative; width: 14cqi; aspect-ratio: 1.3; overflow: hidden; border-radius: 1.8cqi; background: linear-gradient(135deg, #fbe7aa, #caa24d 42%, #f4d78e 58%, #a98430); box-shadow: inset 0 0 0 1px rgba(90, 60, 10, .35); }
.cc-chip i { position: absolute; background: rgba(95, 64, 12, .42); }
.cc-chip i:nth-child(1) { left: 0; right: 0; top: 33%; height: 1px; }
.cc-chip i:nth-child(2) { left: 0; right: 0; top: 66%; height: 1px; }
.cc-chip i:nth-child(3) { top: 0; bottom: 0; left: 42%; width: 1px; }
.cc-nfc { width: 6.5cqi; height: 6.5cqi; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .75; }
.cc-logo { position: relative; margin-left: auto; width: 24cqi; height: 10cqi; }
.cc-logo i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; opacity: 0; transform: translateY(2cqi) scale(.7); transition: opacity .35s, transform .55s var(--ease-spring); }
.cc-logo i.is-on { opacity: 1; transform: none; }
.cc-logo .cbrand { height: 100%; width: auto; max-width: 100%; }
.cc-logo .cbrand--visa { height: 62%; color: #fff; }
.cc-logo .cbrand--troy { height: 78%; color: #fff; }
.cc-logo .cbrand--amex { height: 82%; }
.cc-logo__none { font: 800 3cqi var(--font-display); letter-spacing: .14em; opacity: .55; }

.cc-num {
  position: absolute; z-index: 3; left: 7%; right: 7%; top: 46%;
  display: flex; gap: 2.6cqi;
  font: 700 6.4cqi/1 var(--font-display); letter-spacing: .05em; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  white-space: nowrap;
}
.cc-num--long { font-size: 5.2cqi; gap: 2cqi; }
.cc-grp { display: inline-flex; }
.cc-d { display: inline-block; width: .64em; text-align: center; }
.cc-d.is-empty { opacity: .38; }

.cc-bottom { position: absolute; z-index: 3; left: 7%; right: 7%; bottom: 10%; display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqi; }
.cc-label { display: block; margin-bottom: 1cqi; font-size: 2.55cqi; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.cc-holder { min-width: 0; }
.cc-holder b, .cc-exp b { display: block; font: 700 4.3cqi/1.15 var(--font-display); letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.cc-holder b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cc-exp { flex-shrink: 0; text-align: right; }
.cc-exp b { font-variant-numeric: tabular-nums; }
.cc-holder b.is-empty, .cc-exp b.is-empty { opacity: .45; }

/* yazılan alan kartta çerçeveyle gösterilir */
.cc-zone::after { content: ''; position: absolute; inset: -1.8cqi -2.4cqi; border-radius: 2.6cqi; border: 1.5px solid rgba(255, 255, 255, .8); box-shadow: 0 0 0 1cqi rgba(255, 255, 255, .07), 0 0 4cqi rgba(255, 255, 255, .12); opacity: 0; transform: scale(1.08); transition: opacity .3s, transform .45s var(--ease-spring); pointer-events: none; }
.cc-holder, .cc-exp { position: relative; }
.cc-zone.is-focus::after { opacity: 1; transform: none; }
.cc-zone.is-ok::after { border-color: rgba(74, 222, 128, .9); }

/* ---------- arka yüz ---------- */
.cc-stripe { position: absolute; z-index: 3; left: 0; right: 0; top: 12%; height: 19%; background: linear-gradient(180deg, #08080c, #1d1d26); }
.cc-sign { position: absolute; z-index: 3; left: 7%; right: 7%; top: 41%; display: flex; height: 15%; }
.cc-sign__pad { flex: 1; border-radius: 1.2cqi 0 0 1.2cqi; background: repeating-linear-gradient(-14deg, #f4f4f7 0 2cqi, #e3e3ea 2cqi 4cqi); }
.cc-cvv { position: relative; display: grid; place-items: center; width: 24%; border-radius: 0 1.2cqi 1.2cqi 0; background: #fff; color: #10131c; font: 800 4.8cqi var(--font-display); letter-spacing: .22em; font-style: italic; }
.cc-cvv.is-empty { color: #b3b7c4; }
.cc-cvv.cc-zone::after { border-color: var(--pm); }
.cc-back-note { position: absolute; z-index: 3; left: 7%; right: 34%; top: 62%; font-size: 2.7cqi; line-height: 1.4; opacity: .62; }
.cc-logo--back { position: absolute; z-index: 3; right: 7%; bottom: 9%; margin: 0; }

/* kartın altındaki ışık gölgesi (bulanıklaştırma yok, degrade) */
.cc-shadow { position: absolute; left: 50%; bottom: 0; width: min(78%, 270px); height: 26px; margin-left: calc(min(78%, 270px) / -2); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--pm-rgb), .5), transparent); transform: translateX(var(--sx, 0)) scaleX(var(--ss, 1)); transition: transform .6s var(--ease); pointer-events: none; }

/* ---------- form ---------- */
.cc-form { display: grid; gap: 12px; }
/* align-items: start — CVV'nin altındaki yardım yazısı tarih kutusunu aşağı itmesin */
.cc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 10px; }
.cc-form .field__control input { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.cc-form [data-cc-in="number"] { padding-right: 64px; font-size: 15.5px; letter-spacing: .06em; }
.cc-form [data-cc-in="holder"] { text-transform: uppercase; letter-spacing: .05em; }
.cc-form [data-cc-in="holder"]::placeholder { text-transform: none; letter-spacing: 0; }

.cc-badge { position: absolute; right: 10px; display: grid; place-items: center; width: 46px; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, .06); opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .25s, transform .45s var(--ease-spring); pointer-events: none; }
.cc-badge.is-on { opacity: 1; transform: none; }
.cc-badge .cbrand { max-height: 18px; width: auto; max-width: 38px; }
.cc-badge .cbrand--visa, .cc-badge .cbrand--troy { color: var(--text); }

.cc-help { font-size: 12px; color: var(--text-mute); }
.field.has-error .cc-help { display: none; }

.cc-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-brands > span { margin-right: 2px; font-size: 12px; font-weight: 700; color: var(--text-mute); }
.cc-brands li { display: grid; place-items: center; height: 30px; padding: 0 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); opacity: .6; transition: opacity .3s, transform .4s var(--ease-spring), border-color .3s, background-color .3s; }
.cc-brands li.is-on { opacity: 1; border-color: rgba(var(--pm-rgb), .65); background: rgba(var(--pm-rgb), .1); transform: translateY(-2px); }
.cc-brands .cbrand { height: 15px; width: auto; }
.cc-brands .cbrand--mastercard, .cc-brands .cbrand--amex { height: 20px; }
.cc-brands .cbrand--visa, .cc-brands .cbrand--troy { color: var(--text); }

.cc-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--text-mute); }
.cc-note .ico { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; }

/* ---------- yöntem kartında küçük logolar ---------- */
.pm-card__brands { display: inline-flex; align-items: center; gap: 5px; }
.pm-card__brands .cbrand { height: 11px; width: auto; }
.pm-card__brands .cbrand--mastercard, .pm-card__brands .cbrand--amex { height: 14px; }
.pm-card__brands .cbrand--visa, .pm-card__brands .cbrand--troy { color: var(--text-dim); }

/* ---------- "Öde" sonrası bilgi ---------- */
.cc-result__badge { position: relative; display: grid; place-items: center; width: 92px; height: 92px; }
.cc-result__badge > span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 26px; background: rgba(var(--pm-rgb), .14); border: 1.5px solid rgba(var(--pm-rgb), .55); color: var(--pm); animation: pm-pop .5s var(--ease-spring) both; }
.cc-result__badge .ico { width: 34px; height: 34px; }
.cc-result__badge::after { content: ''; position: absolute; inset: 4px; border-radius: 30px; border: 2px solid rgba(var(--pm-rgb), .5); opacity: 0; animation: wlt-burst .9s var(--ease) .25s; }

/* açık tema: logolar koyu yazıyla */
[data-theme="light"] .cc-badge .cbrand--visa,
[data-theme="light"] .cc-brands .cbrand--visa { color: #1a1f71; }
[data-theme="light"] .cc-badge .cbrand--troy,
[data-theme="light"] .cc-brands .cbrand--troy { color: #00808c; }
[data-theme="light"] .cc-badge { background: rgba(10, 20, 50, .05); }

/* 5 sekmeli kategori çubuğu telefonda sığsın */
@media (max-width: 767.98px) {
  .wlt-cat[style*="--n:5"] .wlt-cat__tab { padding: 0 4px; font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-tilt { animation: none; }
  .cc-card, .cc-tilt, .cc-glare, .cc-shadow { transition: none; }
}