/* SNN Core – PayTR taksit tablosu (ürün sayfası "Taksit Seçenekleri" sekmesi; modules/paytr-taksit.php).
   Yalnız sekmenin basıldığı ürün sayfasında yüklenir. Kutunun içini PayTR'ın betiği doldurur ve stil
   GÖNDERMEZ (PayTR panelindeki kod kendi <style> bloğuyla gelir, paytr.md 11602): stilsiz hâlde her banka
   hücresi alt alta satır olur. Bu yüzden PayTR'ın sınıflarına yalnız düzen verilir (banka başına kart ızgarası,
   iki sütunlu satır); PayTR'ın metnine, logosuna, sırasına dokunulmaz. Yapı (2026-09-30 yanıtından):
     .taksit-tablosu-wrapper (banka)
       > .taksit-logo > img
       > .taksit-baslik > .taksit-tutari-text × 2   ("Taksit Tutarı", "Toplam Tutar")
       > .taksit-tutar-wrapper × N > .taksit-tutari × 2
   Renkler çocuk temanın tokens.css değişkenlerinden (açık gövde; tema yoksa yedek değerler). Kutu 390 px'te de
   sayfayı yatay taşırmaz (kartlar sütuna iner; kap yine de yatay kaydırılabilir). Hareket azaltma tercihine uyar. */

.snn-paytr-taksit {
  min-width: 0;
  max-width: 100%;
}

.snn-paytr-taksit__giris {
  max-width: 960px;
  margin: 0 0 16px;
  color: var(--snn-kart-ikincil, #5C5C52);
}

/* Banka kartları ızgarası: geniş ekranda yan yana, 390 px'te tek sütun. Kap kayar, sayfa taşmaz. */
.snn-paytr-taksit__tablo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  transition: opacity .2s ease;
}

.snn-paytr-taksit__tablo:focus-visible {
  outline: 2px solid var(--snn-vurgu-koyu, #8F5308);
  outline-offset: 2px;
}

/* Yeni tutarın tablosu yüklenirken eski tablo soluk durur (içerik yerinden oynamaz). */
.snn-paytr-taksit__tablo[aria-busy="true"] {
  opacity: .55;
}

/* Bizim durum metnimiz (yükleniyor / hata) ızgarada tüm satırı kaplar. */
.snn-paytr-taksit__durum {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 0;
  color: var(--snn-kart-ikincil, #5C5C52);
}

/* ---- PayTR'ın kartları (yalnız düzen) ---- */

.snn-paytr-taksit__tablo .taksit-tablosu-wrapper {
  min-width: 0;
  overflow: hidden;
  background: var(--snn-kart, #FFFFFF);
  border: 1px solid var(--snn-kenar, #DDDBD0);
  border-radius: var(--snn-radius-kart, 6px);
  color: var(--snn-kart-metin, #1A1A18);
  font-size: 14px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.snn-paytr-taksit__tablo .taksit-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 12px;
}

.snn-paytr-taksit__tablo .taksit-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 28px;
}

.snn-paytr-taksit__tablo .taksit-baslik,
.snn-paytr-taksit__tablo .taksit-tutar-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  padding: 6px 12px;
}

.snn-paytr-taksit__tablo .taksit-baslik {
  background: var(--snn-bolum, #E9E8E0);
  color: var(--snn-ikincil, #5C5C52);
  font-size: 12px;
  font-weight: 700;
}

.snn-paytr-taksit__tablo .taksit-tutar-wrapper + .taksit-tutar-wrapper {
  border-top: 1px solid var(--snn-kart-kenar, #E1DFD5);
}

.snn-paytr-taksit__tablo .taksit-tutari,
.snn-paytr-taksit__tablo .taksit-tutari-text {
  white-space: nowrap;
}

.snn-paytr-taksit__tablo .taksit-baslik > :last-child,
.snn-paytr-taksit__tablo .taksit-tutar-wrapper > :last-child {
  text-align: right;
}

.snn-paytr-taksit__tablo .taksit-tutari-bold {
  font-weight: 700;
}

/* Elle yazılan not (Ürün Sayfası → Bilgi Sekmeleri → Taksit tablosu metni). */
.snn-paytr-taksit__not {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--snn-kart-kenar, #E1DFD5);
}

.snn-paytr-taksit__not > :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .snn-paytr-taksit__tablo {
    transition: none;
  }
}