/* skortabelasi.com — mağaza stilleri.
 *
 * YALNIZCA /shop/, /checkout/ ve /order/ sayfalarına yüklenir
 * (src/site.config.mjs → PAGES[].styles). site-v9.css'in üstüne biner;
 * token'lar (--surface, --ball, --s3…) oradan gelir, burada yeniden
 * tanımlanmaz — tema tek yerden değişsin.
 *
 * ÖNBELLEK KURALI site CSS'iyle aynı: /css/ 7 gün önbellekli ve önde
 * Cloudflare var. Bu dosyayı DEĞİŞTİRME — yeni sürüm = yeni ad
 * (shop-v7.css → shop-v8.css) + site.config.mjs'teki SHOP_CSS satırı.
 */

/* [hidden] her şeyi yenmeli. Bu dosyadaki .cart-totals{display:grid} ve
 * .btn{display:inline-flex} gibi kurallar tarayıcının [hidden]{display:none}
 * kuralından daha spesifik; onlar olmadan boş sepette "Toplam 0,00 ₺" ve
 * "Ödemeye geç" düğmesi görünür kalıyordu. */
[hidden] { display: none !important; }

/* ---------- Vitrin başlığı ---------- */

.shop-hero { padding-bottom: 0; }
.shop-hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: -1px;
  margin: 0 0 var(--s2);
}
.shop-hero .sub { max-width: 60ch; }

/* ---------- Yerleşim: ürünler + sepet ---------- */

/* Sepet geniş ekranda sağda yapışkan bir sütun, darda ürünlerin altına iner. */
.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s4);
  align-items: start;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
}

/* Ürünler kategori grupları hâlinde alt alta; her grup kendi ızgarasını
   taşır. scroll-margin: kategori kartından çapayla gelinince başlık üstte
   ezik durmasın. */
.shop-main { display: grid; gap: var(--s5); }
.shop-group { scroll-margin-top: var(--s3); }
/* İki sınıflı seçici bilerek: site-v9'daki .section h2 (clamp'li, ekrana göre
   değişken boy) bunu ezmesin. Boy ve satır yüksekliği SABİT çünkü sepet
   paneli aşağıda bu yüksekliğe göre ilk kart sırasına hizalanıyor. */
.shop-main .shop-group-title {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.4px;
}

/* ---------- Kategori kartları ---------- */

.shop-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
  margin-top: var(--s2);
}

.shop-cat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.shop-cat:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-md);
}

/* Ürün kartlarıyla aynı muamele (bkz. .shop-media). */
.shop-cat-media {
  display: block;
  background:
    radial-gradient(ellipse 72% 62% at 50% 42%, rgba(30, 155, 240, 0.13), transparent 72%),
    rgba(255, 255, 255, 0.035);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s2);
}
.shop-cat-media img {
  display: block;
  width: 100%;
  height: auto;
  /* Kaynak görseller KARE. 2:1'de yanlarda geniş boş bant kalıyor, görsel de
     gereksiz küçülüyordu; 3:2 kartı bozmadan görseli büyütüyor. contain şart:
     cover, kumanda paketi karesindeki başlığı kırpardı. */
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.shop-cat-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.shop-cat-count { font-size: 13.5px; color: var(--text-3); }

/* ---------- Bölge seçici ---------- */

/* Yalnız TR dışı IP'de görünür; kabuk HTML'de hep var, shop.js hidden'ı
   kaldırır. Pill reçetesi dil değiştiriciyle (site-v9.css .lang-switch)
   aynı dilde: yüzey zemin, seçilide mavi CTA gradyanı. */
.shop-region {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
}
.shop-region h2 {
  margin: 0 0 var(--s1);
  font-size: 19px;
  letter-spacing: -0.3px;
}
.shop-region p {
  margin: 0 0 var(--s2);
  font-size: 14.5px;
  color: var(--text-2);
  max-width: 72ch;
}

.region-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.region-pill {
  padding: 8px 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--fill);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.region-pill:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.region-pill[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(30, 155, 240, 0.4);
}

/* ---------- Ürün kartı ---------- */

.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.shop-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-md);
}

/* Ürün fotoğrafları ŞEFFAF zeminli (alfa kanallı webp) — koyu kartın üstünde
   doğrudan duruyorlar, beyaz vitrin kutusu yok. Zemin yerine yumuşak bir
   projektör hüzmesi: ürünü kartın içinde ayırıyor ama kenar çizgisi çizmiyor.
   Kumanda paketi kareleri (kumanda-*li-1) siyah zeminli TASARIM görselleri;
   kare oldukları için çerçeveyi tam doldurur, bu hüzme onlarda görünmez.
   Kare oran build'de üretiliyor (800×800). */
.shop-media {
  position: relative;
  background:
    radial-gradient(ellipse 72% 62% at 50% 38%, rgba(30, 155, 240, 0.13), transparent 72%),
    rgba(255, 255, 255, 0.035);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s3);
}

.shop-slide { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.shop-slide[hidden] { display: none; }

.shop-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #0a1832;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(10, 24, 50, 0.12);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.shop-arrow:hover { background: #fff; }
.shop-prev { left: 10px; }
.shop-next { right: 10px; }

.shop-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.shop-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(10, 24, 50, 0.25);
  cursor: pointer;
}
.shop-dot.is-on { background: #0a1832; }

.shop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.shop-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.3px;
}

.shop-stock {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--text-2);
}
.shop-stock.is-in { color: var(--ball); background: rgba(201, 229, 65, 0.12); }
.shop-stock.is-out { color: var(--text-3); }

.shop-tagline {
  margin: var(--s1) 0 0;
  color: var(--ball);
  font-size: 15px;
}

.shop-desc {
  margin: var(--s1) 0 var(--s2);
  color: var(--text-2);
  font-size: 15.5px;
}

.shop-specs { margin-bottom: var(--s3); }
.shop-specs summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-2);
  padding: var(--s1) 0;
}
.shop-specs summary:hover { color: var(--text); }
.shop-specs ul {
  margin: 0 0 var(--s1);
  padding-left: 1.2em;
  color: var(--text-2);
  font-size: 15px;
}
.shop-specs li { margin: 4px 0; }

/* Fiyat ve buton kartın dibine yapışsın — farklı uzunluktaki açıklamalarda
   kartlar aynı hizada bitsin. */
.shop-price { margin-top: auto; }
.shop-price b {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.5px;
}
.shop-price span {
  margin-left: 8px;
  font-size: 13.5px;
  color: var(--text-3);
}

.shop-card .btn,
.shop-card .badge-soon { margin-top: var(--s2); width: 100%; }

/* "Satıcı bul" — TR görünümünde HİÇ görünmez (satış zaten burada). Yalnız
   TR dışı bölge seçildiğinde ortaya çıkar; shop.js .btn ekleyip ana düğme
   yapar, aşağıdaki .shop-abroad kuralları da sepet/fiyat katmanını gizler. */
.shop-sellers { display: none; }

/* ---------- TR dışı görünüm ---------- */

/* Bölge seçilince satın alma katmanı (fiyat, sepete ekle, sepet sütunu)
   gizlenir — gönderim yalnız Türkiye içi. Tek sütuna inilir ki boş sepet
   sütunu 320px'lik bir delik bırakmasın. */
body.shop-abroad .shop-cart,
body.shop-abroad .shop-add,
body.shop-abroad .shop-price { display: none; }
body.shop-abroad .shop-layout { grid-template-columns: 1fr; }
/* Satıcı düğmesi yalnız burada var; fiyat gizlendiği için kartın alta itme
   görevini de o devralır. */
body.shop-abroad .shop-sellers { display: block; margin-top: auto; width: 100%; }

.shop-note {
  margin: var(--s2) 0 0;
  font-size: 14px;
  color: var(--text-3);
}

/* ---------- Sepet ---------- */

.shop-cart {
  position: sticky;
  /* Üst menü de sticky ve ~64px (site-v9.css .site-header) — ofset ona
     eklenmezse "Sepetim" başlığı menünün altında kalıyor. Dar ekranda sorun
     yok: 900px altında panel static'e düşüyor. */
  top: calc(64px + var(--s3));
  /* Panelin üst kenarı, "Kumanda Paketleri" başlığıyla değil İLK ÜRÜN KARTI
     sırasıyla hizalanır: grup başlığının satır yüksekliği (30px) + alt
     boşluğu (--s3) kadar aşağı iner. Dar ekranda sıfırlanır (aşağıdaki media). */
  margin-top: calc(30px + var(--s3));
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
}

/* Başlık + adet rozeti; altındaki ince çizgi paneli "kart" gibi toparlıyor. */
.shop-cart h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--separator);
  font-size: 19px;
  letter-spacing: -0.3px;
}

.cart-count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  border-radius: var(--r-pill);
}

/* Boş durum: ikon + metin, ortalı — çıplak tek satırdan daha az "bozuk" durur.
   Ödeme sayfasındaki özet sade <p> kullanır, oradaki görünüm değişmez. */
div.cart-empty {
  display: grid;
  justify-items: center;
  gap: var(--s1);
  padding: var(--s3) 0 var(--s2);
  color: var(--text-3);
  font-size: 14.5px;
  text-align: center;
}
div.cart-empty svg { opacity: 0.5; }
div.cart-empty p { margin: 0; }
p.cart-empty { margin: 0; color: var(--text-3); font-size: 15px; }

.cart-lines { list-style: none; margin: 0 0 var(--s2); padding: 0; }

/* Satır: görsel | ad + birim fiyat + adet | (× kaldır, satır toplamı) */
.cart-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: stretch;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--separator);
}
.cart-line:last-child { border-bottom: 0; }

.cart-line img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.035);
  border-radius: var(--r-md);
  border: 1px solid var(--separator);
}

.cart-name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cart-line-price { margin-top: 2px; font-size: 13px; color: var(--text-3); }

/* Adet: tek parça pill — modern mağazaların standart kontrolü. */
.cart-qty {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s1);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  background: var(--fill);
}
.cart-qty button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--text-2);
  background: none;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.cart-qty button:hover { color: var(--text); background: var(--surface-alt); }
.cart-qty button:disabled { color: var(--text-3); opacity: 0.45; cursor: not-allowed; background: none; }
.cart-qty output { min-width: 2.2ch; text-align: center; font-size: 14px; font-weight: 600; }

/* Sağ sütun: × üstte, satır toplamı altta. */
.cart-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.cart-remove {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  padding: 0;
}
.cart-remove:hover { color: var(--text); background: var(--fill); }

.cart-line-total {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Kargo bedava eşiğine ilerleme çubuğu; dolunca top sarısına döner. */
.cart-progress {
  height: 6px;
  margin: var(--s2) 0 6px;
  background: var(--fill);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cart-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  border-radius: var(--r-pill);
  transition: width 0.35s var(--ease);
}
.cart-progress.is-done .cart-progress-bar { background: var(--ball); }

.cart-freeship {
  margin: 0 0 var(--s2);
  font-size: 13px;
  color: var(--text-2);
}
.cart-freeship.is-done { color: var(--ball); }

.cart-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px var(--s2);
  margin: var(--s2) 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--separator);
  font-size: 14.5px;
}
.cart-totals dt { color: var(--text-2); }
.cart-totals dd { margin: 0; text-align: right; color: var(--text); font-weight: 600; }
.cart-totals .is-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  padding-top: var(--s1);
  border-top: 1px solid var(--separator);
}

.cart-go { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .cart-progress-bar { transition: none; }
}

/* ---------- Ödeme formu ---------- */

.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s4);
  align-items: start;
  margin-top: var(--s4);
}

.checkout fieldset {
  margin: 0 0 var(--s3);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
}

.checkout legend {
  padding: 0 var(--s1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--ball);
  text-transform: uppercase;
}

.checkout label {
  display: block;
  margin-bottom: var(--s2);
  font-size: 14.5px;
  color: var(--text-2);
}

.checkout .opt { color: var(--text-3); }

.checkout input[type="text"],
.checkout input[type="email"],
.checkout input[type="tel"],
.checkout input:not([type]),
.checkout select,
.checkout textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px; /* 16px altı iOS'ta odaklanınca sayfayı yakınlaştırıyor */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
}

.checkout textarea { resize: vertical; }

/* İl/ilçe açılır listeleri. appearance:none olmadan Windows/Chrome yerleşik
   oku beyaz zeminli çiziyor ve koyu temada kutunun sağında beyaz bir blok
   kalıyor; ok kendi SVG'mizle çiziliyor. Renk kodu satır içi çünkü SVG
   data-URI'sinde CSS değişkeni çalışmaz. */
.checkout select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238FA3C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

/* Açılan listenin kendisi işletim sistemi çizer; en azından koyu temaya
   yakın dursun diye seçenekler de boyanıyor. */
.checkout select option { color: var(--text); background: var(--surface); }

.checkout select:disabled {
  color: var(--text-3);
  cursor: not-allowed;
  opacity: 1; /* Safari pasif select'i soluklaştırıyor, okunmaz oluyor */
}

.checkout input:focus,
.checkout select:focus,
.checkout textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 155, 240, 0.2);
}

/* Doğrulama sırasında JS ekliyor — tarayıcının :invalid'i yazarken de
   kırmızıya boyadığı için kullanılmıyor. */
.checkout .is-bad input,
.checkout .is-bad select,
.checkout .is-bad textarea { border-color: #ff6b6b; }
.checkout .field-err {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #ff8f8f;
}

.checkout .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--s2);
  font-size: 14.5px;
  cursor: pointer;
}
.checkout .check input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--blue); }

.checkout-corporate { margin-top: var(--s2); }

.checkout-side {
  position: sticky;
  /* .shop-cart ile aynı gerekçe: sticky üst menünün 64px'i ofsete dahil. */
  top: calc(64px + var(--s3));
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s3);
}

.checkout-side h2 {
  margin: 0 0 var(--s2);
  font-size: 19px;
  letter-spacing: -0.3px;
}

.checkout-err {
  margin: 0 0 var(--s2);
  padding: 10px 14px;
  font-size: 14.5px;
  color: #ff8f8f;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--r-md);
}

.checkout-pay { width: 100%; }
.checkout-pay[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- Kabul edilen kartlar ---------- */

/* iyzico'nun bayi logo bandı: iyzico ile öde + Mastercard + Visa + Troy +
   American Express, tek SVG. Koyu zemin için üretilmiş BEYAZ sürüm
   kullanılıyor — renkli banttaki Visa laciverti --bg üstünde okunmuyor.
   Marka renklerine dokunulmaz, bu yüzden filter/opacity yok. */
.pay-marks {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--separator);
}

.pay-marks p { margin: 0 0 var(--s2); font-size: 13px; color: var(--text-3); }

/* En/boy oranı 456:32; max-width dar ekranda taşmayı engelliyor. */
.pay-marks img { display: block; width: 100%; max-width: 300px; height: auto; }

/* ---------- Sipariş sonucu ---------- */

.order-ok h1 { color: var(--ball); }
#order-result .btn { margin-top: var(--s2); }

/* ---------- Dar ekran ---------- */

@media (max-width: 900px) {
  .shop-layout,
  .checkout { grid-template-columns: 1fr; }
  .shop-cart,
  .checkout-side { position: static; }
  /* Tek sütunda hizalama boşluğu anlamsız — sepet ürünlerin altına iner. */
  .shop-cart { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-card { transition: none; }
}

/* ---------- Ödeme modalı ---------- */

/* iyzico ödeme formu sayfadan AYRILMADAN, ortalanmış bir modal içinde açılır
 * (paymentPageUrl + &iframe=true). Kart alanları hâlâ iyzico'nun kendi alan
 * adında çalışıyor — kart verisi bize yine hiç uğramıyor, yalnızca görsel
 * olarak sitenin içinde duruyor.
 *
 * Örtü <body>'nin doğrudan çocuğu olarak eklenir: .checkout-side yapışkan bir
 * sütun ve modal onun içinde açılsaydı position:sticky yeni bir kapsayıcı blok
 * kurup position:fixed'i ona hapsederdi.
 *
 * Zemine tıklamak KAPATMAZ. Ödeme akışında yanlışlıkla kapatmak, 3D Secure'un
 * ortasında müşteriyi kaybetmek demek; kapatma bilinçli olmalı (× ya da Esc). */

.pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2);
  background: rgba(6, 16, 36, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: pay-fade 0.2s var(--ease);
}

.pay-modal {
  display: flex;
  flex-direction: column;
  /* Yükseklik iyzico formunun ihtiyacına göre: kart alanları + taksit tablosu
   * + 3D Secure kutusu + "Öde" düğmesi kaydırmadan sığsın. Sığmazsa çerçeve
   * kendi içinde kayar, akış yine çalışır. */
  width: min(520px, 100%);
  height: min(820px, 94vh);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pay-rise 0.25s var(--ease);
}

.pay-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2);
  border-bottom: 1px solid var(--separator);
}

.pay-bar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
}

.pay-amount {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-2);
}

.pay-close {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--text-2);
  background: var(--fill);
  border: 1px solid var(--separator);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.pay-close:hover {
  color: var(--text);
  background: var(--surface-alt);
}

/* Çerçeve ve "yükleniyor" ÜST ÜSTE durur, yan yana değil: iyzico sayfası
 * gelene kadar bir saniye boyunca boş beyaz kutu görünmesin. */
.pay-body {
  flex: 1;
  position: relative;
  background: var(--surface);
}

.pay-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  font-size: 14px;
  color: var(--text-2);
}

.pay-spin {
  width: 26px;
  height: 26px;
  border: 2px solid var(--separator);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: pay-spin 0.8s linear infinite;
}

.pay-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.pay-frame.is-on { opacity: 1; }

.pay-fallback {
  flex: none;
  margin: 0;
  padding: var(--s1) var(--s2);
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--separator);
}

.pay-fallback a { color: var(--text-2); }
.pay-fallback a:hover { color: var(--blue-light); }

/* Modal açıkken arkadaki sayfa kaymasın */
body.pay-open { overflow: hidden; }

@keyframes pay-fade {
  from { opacity: 0; }
}

@keyframes pay-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes pay-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pay-overlay,
  .pay-modal { animation: none; }
  .pay-frame { transition: none; }
  .pay-spin { animation-duration: 2.4s; }
}