/* 23.10.2026 — Ödeme adımı (Odeme.aspx, v2 katmanı #castle-exact.exact-payment).
   1) Türev'in kendi kart önizlemesi (.containerCredit: yazılanı gösterir, CVV'de döner, markaya göre logo; TROY'u
      castle-booking.js çizer) v2 katmanında hidden'dı -> kurumsal mürekkep kart olarak geri. Kart verisine yeni kod
      dokunmaz: yalnız görünüm. Eski stili snappy.min.css'teydi; huni artık onu yüklemiyor.
   2) castle-booking.js marka rozetleri (VISA / Mastercard / TROY) ve yardımcıları (.m-sr, .m-gizli) eski
      ".reservation .reservation_payment" kapsamına bağlıydı; v2'de düz metin kalıyordu -> rozet.
   Özgüllük html + #castle-exact ile exact.css'in "[hidden]{display:none!important}" kuralından yüksek. */

/* ---- kart önizlemesi ---- */
html #castle-exact.exact-payment .containerCredit[hidden] { display: block !important; }
html #castle-exact.exact-payment .containerCredit {
  width: 100%; max-width: 360px; height: auto; max-height: none; aspect-ratio: 750 / 471;
  padding: 0; margin: 2px 0 24px; perspective: 1200px;
}
html #castle-exact.exact-payment .creditcard {
  position: relative; width: 100%; height: 100%; max-width: none; direction: ltr;
  transform-style: preserve-3d; transition: transform .6s var(--ease, cubic-bezier(.2, .7, .2, 1)); cursor: pointer;
}
html #castle-exact.exact-payment .creditcard .front,
html #castle-exact.exact-payment .creditcard .back {
  position: absolute; inset: 0; width: 100%; max-width: none;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased;
}
html #castle-exact.exact-payment .creditcard .back,
html #castle-exact.exact-payment .creditcard.flipped { transform: rotateY(180deg); }
html #castle-exact.exact-payment .creditcard svg#cardfront,
html #castle-exact.exact-payment .creditcard svg#cardback {
  display: block; width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 2px 4px rgba(20, 20, 20, .08), 0 20px 38px -20px rgba(20, 20, 20, .6);
}
/* markadan bağımsız kurumsal renk (swapColor sınıfları ne olursa olsun) */
html #castle-exact.exact-payment .creditcard .lightcolor { fill: #2a2a2a !important; transition: fill .5s; }
html #castle-exact.exact-payment .creditcard .darkcolor { fill: #141414 !important; transition: fill .5s; }
html #castle-exact.exact-payment #ccsingle { position: absolute; top: 7%; right: 5%; width: 22%; z-index: 1; }
html #castle-exact.exact-payment #ccsingle svg { display: block; width: 100%; height: auto; max-height: none; }
html #castle-exact.exact-payment #svgname { text-transform: uppercase; }
html #castle-exact.exact-payment #cardfront .st2 { fill: #fff; }
html #castle-exact.exact-payment #cardfront .st3,
html #castle-exact.exact-payment #cardfront .st5,
html #castle-exact.exact-payment #cardfront .st10,
html #castle-exact.exact-payment #cardback .st6 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html #castle-exact.exact-payment #cardfront .st3 { font-weight: 600; }
html #castle-exact.exact-payment #cardfront .st5 { font-weight: 400; }
html #castle-exact.exact-payment #cardfront .st10 { font-weight: 300; }
html #castle-exact.exact-payment #cardfront .st4 { font-size: 54.78px; }
html #castle-exact.exact-payment #cardfront .st6 { font-size: 33.11px; }
html #castle-exact.exact-payment #cardfront .st7 { opacity: .6; fill: #fff; }
html #castle-exact.exact-payment #cardfront .st8 { font-size: 24px; }
html #castle-exact.exact-payment #cardfront .st9 { font-size: 36.55px; }
html #castle-exact.exact-payment #cardfront .st11 { font-size: 16.17px; }
html #castle-exact.exact-payment #cardfront .st12 { fill: #4c4c4c; }
/* küçük etiketler: Türkçe "Son Kullanma Tarih" kart kenarına taşıyordu (750 birimde 740) -> sitenin dar yazısı */
html #castle-exact.exact-payment #cardfront .st7.st8 { font-family: "Castle Sans", Archivo, ui-sans-serif, system-ui, sans-serif; font-stretch: 75%; font-weight: 600; letter-spacing: .02em; }
html #castle-exact.exact-payment #cardback .st0 { fill: none; stroke: #0f0f0f; stroke-miterlimit: 10; }
html #castle-exact.exact-payment #cardback .st2 { fill: #111; }
html #castle-exact.exact-payment #cardback .st3 { fill: #f2f2f2; }
html #castle-exact.exact-payment #cardback .st4 { fill: #d8d2db; }
html #castle-exact.exact-payment #cardback .st5 { fill: #c4c4c4; }
html #castle-exact.exact-payment #cardback .st6 { font-weight: 400; }
html #castle-exact.exact-payment #cardback .st7 { font-size: 27px; }
html #castle-exact.exact-payment #cardback .st8 { opacity: .6; }
html #castle-exact.exact-payment #cardback .st9 { fill: #fff; }
html #castle-exact.exact-payment #cardback .st10 { font-size: 24px; }
html #castle-exact.exact-payment #cardback .st11 { fill: #eaeaea; }
html #castle-exact.exact-payment #cardback .st12 { font-family: "Castle Sans", Archivo, ui-sans-serif, system-ui, sans-serif; font-style: italic; }
html #castle-exact.exact-payment #cardback .st13 { font-size: 34px; }
@media (max-width: 720px) {
  html #castle-exact.exact-payment .containerCredit { max-width: 320px; margin: 0 auto 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html #castle-exact.exact-payment .creditcard { transition: none; }
}

/* ---- kabul edilen kart rozetleri (castle-booking.js .m-kart-markalar) ---- */
html #castle-exact.exact-payment .m-kart-markalar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
html #castle-exact.exact-payment .m-kart-markalar [data-m] {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border: 1px solid var(--line, #d9d9d6); border-radius: 2px; background: var(--white, #fff); color: var(--muted, #666664);
  font-size: 11px; font-weight: 750; font-stretch: 75%; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  transition: opacity .2s, background-color .2s, border-color .2s, color .2s;
}
html #castle-exact.exact-payment .m-kart-markalar.tanindi [data-m]:not(.aktif) { opacity: .35; }
html #castle-exact.exact-payment .m-kart-markalar [data-m].aktif { background: var(--ink, #141414); border-color: var(--ink, #141414); color: #fff; }
html #castle-exact.exact-payment .m-kart-markalar .m-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html #castle-exact.exact-payment .m-gizli { display: none !important; }