/* ==================================================================
   odeme.css — Tasarım 8 ödeme sayfası (gate + checkout)
   kurs.css YÜKLENMEZ. Token/buton/dialog → ortak.css.
   Önek: .od-* (kısa .pkg-* çakışmasın — tasarim-tuzaklari.md)
   ================================================================== */

/* ⚠️ 2026-08-14 — ÜST BOŞLUK KISILDI.
   Eski değer clamp(28px,4vw,48px) idi; breadcrumb (1.25rem alt boşluk) ve
   `.od-alt` (1.75rem) ile birlikte içerik başlamadan ~120px harcanıyordu.
   Bu yalnız estetik değil: `.od-grid` aşağı ittiği için SAĞDAKİ SİPARİŞ
   ÖZETİ de aynı miktarda aşağı kayıyor ve ilk ekranda fiyat görünmüyordu.
   Ödeme sayfasında ilk ekran = ne aldığın + kaç para. Yeni toplam ~56px. */
.od-sayfa {
  padding-block: clamp(14px, 1.6vw, 22px) clamp(48px, 6vw, 80px);
  background:
    radial-gradient(120% 80% at 10% -10%, rgba(37, 99, 235, 0.07), transparent 55%),
    radial-gradient(90% 60% at 100% 0%, rgba(14, 165, 233, 0.06), transparent 50%),
    var(--nk-bg, #F4F7FB);
}

.od-wrap {
  width: min(1120px, calc(100% - 2 * clamp(16px, 3vw, 28px)));
  margin-inline: auto;
}

.od-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.4rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--nk-muted, #64748b);
  margin-bottom: 0.5rem;
  /* Uzun kurs adları ikinci satıra taşıp başlığı aşağı itiyordu —
     tek satırda kalsın, taşarsa kaydırılsın. */
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.od-crumb::-webkit-scrollbar { display: none; }
.od-crumb a { color: inherit; text-decoration: none; }
.od-crumb a:hover { color: var(--nk-ink, #0f172a); }
.od-crumb [aria-current="page"] { color: var(--nk-ink, #0f172a); font-weight: 600; }
.od-crumb-sep { opacity: 0.45; }

.od-baslik {
  margin: 0 0 0.2rem;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--nk-ink, #0f172a);
  line-height: 1.2;
}
.od-alt {
  margin: 0 0 0.9rem;
  color: var(--nk-muted, #64748b);
  font-size: 0.875rem;
  max-width: 40rem;
}

/* Başlık + alt satır tek blok; ödeme ekranında sayfa başlığı bir
   "kapak" değil, yalnız yer bildirimi. Yükseklik kazancı doğrudan
   sipariş özetini yukarı çekiyor. */
.od-ustbilgi { margin-bottom: 0.9rem; }
.od-ustbilgi .od-baslik,
.od-ustbilgi .od-alt { margin-bottom: 0; }
.od-ustbilgi .od-baslik + .od-alt { margin-top: 0.15rem; }

.od-grid {
  display: grid;
  gap: 1.5rem;
  /* ⚠️ 2026-08-20 — MOBİL YATAY TAŞMA DÜZELTMESİ (kullanıcı: "sipariş
     özeti sağa doğru epey uzamış, çoğu blok böyle"). Tek kolon şablonsuz
     (auto) kalınca kolon İÇERİĞE göre boyutlanıyor: yorum şeridinin
     kartları kolonu 1813px'e şişiriyor, sayfa 1851px'e taşıyor ve her
     blok "sağa uzamış" görünüyordu (ölçüldü, 390px emülasyon).
     `minmax(0, 1fr)` kolonu kap genişliğine sabitler; şerit kendi içinde
     kayar. Masaüstü şablonu aşağıdaki media bloğunda zaten minmax'lı. */
  grid-template-columns: minmax(0, 1fr);
}
/* Emniyet kemeri: grid öğesinin otomatik min boyutu içerikten gelmesin. */
.od-ana,
.od-yan { min-width: 0; }
@media (min-width: 900px) {
  .od-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.85fr);
    align-items: start;
  }
  /* ⛔ `.od-yan` STICKY DEĞİL (2026-08-18). Sarmalayıcı sticky olunca
     İÇİNDEKİ her şey (özet + sözleşme onayı + "Ödemeyi tamamla") tek
     blok gibi yapışıyor; toplam yükseklik ekranı aşınca ALT KISIM
     GÖRÜNMÜYORDU — kullanıcı havalede tamamla butonunu bulamadı.
     2026-08-14'teki "güven şeridi hiç görünmüyor" hatasının aynısı.
     Yapışkanlık YALNIZ özet panelinde (`.od-ozet-sticky`); sözleşme ve
     buton doğal akışta, sayfa kaydırılınca görünüyor. */
  .od-yan {
    position: static;
    /* ⚠️ `align-self: stretch` ŞART: `.od-grid`'de `align-items:start`
       var ve grid item'ı içerik boyunda bırakıyor. Sarmalayıcı panel
       kadar kısa olunca içindeki `position:sticky` panelin KAYACAK ALANI
       kalmıyor — panel sayfayla birlikte yukarı çıkıp ekrandan çıkıyordu
       (ölçüldü 2026-08-18: `is-ust` sınıfı verilse bile top -167px).
       Sütun sol kolon kadar uzayınca panel o alan içinde yapışıyor. */
    align-self: stretch;
  }
}

.od-panel {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 12px 32px -18px rgba(15, 23, 42, 0.18);
}

.od-panel h2,
.od-panel .od-panel-baslik {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--nk-ink, #0f172a);
}

.od-gate-metin {
  margin: 0 0 1rem;
  color: var(--nk-muted, #475569);
  font-size: 0.95rem;
  line-height: 1.55;
}

.od-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.od-cta-stack .btn { justify-content: center; width: 100%; }

.od-uyari {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  font-size: 0.9rem;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.od-bilgi {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  font-size: 0.9rem;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}
.od-basari {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* ==================================================================
   SEÇİLİ PAKET KARTI — kurs.css'in `.pkg` bileşeni
   ==================================================================
   ⚠️ 2026-08-14 — `.odp-*` kopya seti SİLİNDİ. Kart artık kurs detay
   sayfasındaki gerçek `.pkg` bileşeni; `kurs.css` bu sayfada da
   yükleniyor (gerekçe: partials/odeme_paket.php başındaki not).
   Burada yalnızca ödeme bağlamının gerektirdiği ÜÇ düzeltme var —
   `.pkg`'nin kendi kuralları kurs.css'te kalıyor, kopyalanmıyor.
   ================================================================== */

/* [1] Mobil karusel iptali.
   kurs.css'te `.pkgs` <760px'te yatay kaydırmalı vitrine dönüyor ve
   `margin-inline:-22px` ile bölüm dolgusunu taşıyor. Orada üç kart var;
   burada tek kart var, kaydıracak bir şey yok. Negatif kenar boşluğu
   ödeme sayfasının kendi `.od-wrap` dolgusuyla uyuşmadığı için kartı
   ekranın dışına taşırıyordu. */
@media (max-width: 759px) {
  .od-paket-vitrin.pkgs,
  .od-modal-pkgs.pkgs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    margin-top: 16px;
  }
  .od-paket-vitrin.pkgs > .pkg,
  .od-modal-pkgs.pkgs > .pkg { flex: none; }
}

/* [2] Ribbon payı. Rozet kartın 13px üstünde duruyor; kurs detayda
   bölüm dolgusu bunu yutuyor, burada kart doğrudan bir bloğun altına
   geldiği için kırpılıyordu. */
.od-paket-vitrin { padding-top: 15px; }

/* [3] Kurs adı üst satırı — ödeme ekranına özel.
   Kurs detayda gereksiz (kullanıcı zaten o kursun sayfasında), ödemede
   ise kart tek başına "ne alıyorum"un belgesi; paket adı tek başına
   ("Süper Paket") hangi kursa ait olduğunu söylemiyor. */
.od-pkg-kurs {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, #64748b);
  margin-bottom: 6px;
}

/* [4] KAZANMA GARANTİSİ BLOĞU — ödeme ekranına özel.
   Kurs detayda tek satırlık küçük not (`.pkg-gar`) yeterli, çünkü orada
   hero'da ayrıca büyük bir garanti rozeti var. Ödeme ekranında o rozet
   yok ve bu ürünün 1 numaralı ayırt edici özelliği — gerçek bir blok
   hak ediyor (kullanıcı: "o sınav kazanma metni daha büyük gelebilir").
   ⚠️ Yalnız VİTRİN (ilk 3) paketlerde basılıyor; alt paketlerde garanti
   gerçekte YOK (kurs_detay.php:2323). */
.od-garanti {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFF1F4 0%, #FFF7F8 100%);
  border: 1px solid rgb(225 16 65 / 0.16);
}
.od-garanti-ikon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--red-d, #b91c1c);
}
.od-garanti-bas {
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--red-d, #b91c1c);
  line-height: 1.25;
}
.od-garanti-alt {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink-3, #64748b);
}

/* ==================================================================
   FİYAT DÖKÜMÜ — sayfadaki TEK para bloğu
   ==================================================================
   ⚠️ 2026-08-14 (kullanıcı kararı): fiyat, liste fiyatı, indirim, KDV ve
   e-PARA yalnız sipariş özetinde. Paket kartından tamamen çıkarıldı —
   ödeme yöntemine göre tutar değiştiği için iki yerde yazınca sayılar
   çelişiyordu. ⛔ Buranın dışına para satırı taşıma.
   Kalemler #spantotal'a bağlı olarak JS ile güncelleniyor
   (partials/odeme_ozet.php sonundaki MutationObserver). */
/* ⚠️ Blok panelin İLK elemanı (tablonun üstünde) — üst çizgi/boşluk
   buna göre. Tablonun altındayken ayırıcı `border-top` gerekiyordu;
   burada kurs adının hemen altında duruyor. */
.od-fiyat { margin-top: 0.35rem; }
.od-fiyat-sat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* 0.3rem → 0.18rem: panelin laptop ekranına sığması için (2026-08-18). */
  padding: 0.18rem 0;
  font-size: 0.85rem;
  color: var(--nk-muted, #64748b);
}
.od-fiyat-sat s { color: var(--nk-muted, #94a3b8); font-weight: 600; }
.od-fiyat-ara span:last-child { font-weight: 600; color: var(--nk-ink, #334155); }
.od-fiyat-indirim { color: #0B6B4F; }
.od-fiyat-indirim b { font-weight: 800; }
.od-fiyat-oran {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  color: #0B6B4F;
  background: #DCF3E8;
}
.od-fiyat-oran:empty { display: none; }

/* Toplam: kararın verildiği nokta. Zeminden ayrılan, nefes alan blok. */
.od-fiyat-toplam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02));
  border: 1px solid rgba(37, 99, 235, 0.14);
}
.od-fiyat-toplam > span {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nk-ink, #0f172a);
}
.od-fiyat-toplam strong {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  white-space: nowrap;
  line-height: 1.05;
  color: var(--nk-ink, #0f172a);
}
.od-fiyat-toplam .current_currency {
  font-size: 0.5em;
  font-weight: 700;
  color: var(--nk-muted, #64748b);
  margin-left: 0.15rem;
}

/* e-PARA: ödenecek tutarın parçası DEĞİL, alışverişten kazanılan bakiye.
   Toplamın altında ve farklı renkte durması bu ayrımı taşıyor. */
.od-fiyat-epara {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  background: #F2FAF6;
  border: 1px solid rgb(11 107 79 / 0.12);
  font-size: 0.76rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--nk-muted, #64748b);
}
.od-fiyat-epara svg { flex: none; width: 16px; height: 16px; color: #0B6B4F; margin-top: 1px; }
.od-fiyat-epara b { color: #0B6B4F; font-weight: 900; }

/* ==================================================================
   GENİŞ MODAL (paket kıyası + eğitmen kadrosu)
   ==================================================================
   ⚠️ GENİŞLİK KISITI `.nk-modal-card`'da DEĞİL, `<dialog>`'un kendisinde:
   ortak.css'te `dialog.nk-modal { width: min(440px, calc(100vw - 28px)) }`.
   Sınıf karta konunca kart %100 kalıyor ama dialog 440px'te sabit
   duruyordu — modal "küçük kalmış" görünmesinin sebebi buydu.
   Bu yüzden sınıf `<dialog>` ÜZERİNDE ve seçici de element+sınıf
   (0,1,1) olmak zorunda; tek sınıf seçici ortak.css'i ezemez. */
dialog.nk-modal.od-modal-genis {
  width: min(1160px, calc(100vw - 28px));
}

.od-modal-pkgs.pkgs { margin-top: 4px; }
/* Masaüstünde YAN YANA İKİ paket (kullanıcı kararı). Üç kolon 1160px'te
   bile kartı 340px'e düşürüyor ve madde satırları 4 satıra çıkıyordu;
   iki kolonda kart ~530px, liste iki satırda kalıyor.
   Mobil tek kolon — yukarıdaki karusel iptali bloğunda. */
@media (min-width: 760px) {
  .od-modal-pkgs.pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* "+N madde daha" — gerçek buton (2026-08-17): tıklayınca kalan maddeler
   açılıyor, tekrar tıklayınca kapanıyor. Önce `<p>` idi ve tıklanmıyordu. */
.od-pkg-kalan {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0;
  margin-top: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand-d, #1d4ed8);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.od-pkg-kalan:hover { color: #1e3a5f; }
.od-pkg-kalan-liste[hidden] { display: none; }

/* ⚠️ SEÇİLİ PAKET GÖRSEL OLARAK AYRIŞMALI (kullanıcı 2026-08-17):
   "Şu anki paketin" rozeti kartın tepesinde, listeyi aşağı kaydıran
   kullanıcı rozeti görmeden kartı ayrı bir paket sanabiliyordu.
   Çift halka + hafif zemin + doygunluk kaybı: göz hangi kartın "zaten
   sende" olduğunu okumadan anlıyor. */
.od-pkg-secili {
  outline: 3px solid var(--brand, #2563eb);
  outline-offset: 3px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0.015));
}
.od-pkg-secili .pkg-ribbon {
  background: var(--brand, #2563eb);
  color: #fff;
}
/* Seçili kartın eteğindeki buton zaten pasif (`.od-pkg-mevcut`); rozet
   ile birlikte "buradasın" mesajını tamamlıyor. */
.od-pkg-secili .od-pkg-etek .btn { font-weight: 800; }

/* Kart eteği: fiyat → e-PARA → garanti → buton tek blok hâlinde kartın
   dibine yapışıyor. Kartlar ızgarada eşit yükseklikte olduğu için
   eteğin son elemanı olan BUTONLAR da hizalanıyor. Parçalar tek tek
   aksaydı (kurs detaydaki gibi) içerik farkları butonları kaydırırdı. */
.od-pkg-etek { margin-top: auto; padding-top: 16px; }
.od-pkg-etek .pkg-price { margin-top: 0; }
.od-pkg-etek .btn { width: 100%; margin-top: 16px; justify-content: center; }
/* Seçili paketin butonu tıklanamaz — zaten o pakettesin. */
.od-pkg-mevcut { pointer-events: none; opacity: 0.65; }
.od-modal-alt { margin-top: 1rem; font-size: 0.85rem; }

/* Eğitmen kadrosu modalde ızgara olarak: kurs detayda yatay kaydırmalı
   şerit, burada modal zaten kaydırılıyor, ikinci bir kaydırma eksen
   çakışması yaratıyordu. */
.od-insts.insts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  overflow: visible;
}
.od-insts.insts > .inst { flex: none; width: auto; }

/* ⚠️ 2026-08-20 — KART PALETİ AÇIK ZEMİNE ÇEVRİLDİ (mobil tur bulgusu):
   kurs.css `.inst` kartını kurs detayın KOYU kadro bölümü için boyuyor —
   isim BEYAZ (beyaz modal gövdesinde görünmezdi, ölçüldü: computed
   rgb(255,255,255)), branş #8FB4EA ve özet #BFCDE1 (beyazda ~2:1 kontrast,
   okunmuyor). İptal butonu / İbre §A hikâyesinin aynısı: başka bağlam için
   yazılmış bileşen kuralı yeni zemine biniyor. Seçici element+çift sınıf,
   kurs.css'i kesin ezmek için. */
.od-insts.insts .inst h3 { color: var(--nk-ink, #0f172a); }
.od-insts.insts .inst-brans { color: var(--brand-d, #1d4ed8); }
.od-insts.insts .inst-ozet { color: var(--nk-muted, #475569); }

/* Özgeçmiş 4 satırda kırpılır; metnin tamamı DOM'da durur ve "devamını
   gör" (JS yalnız taşan karta koyar) kırpmayı aynı kartta açar. Sunucu
   kırpsaydı açılacak devam kalmazdı (2026-08-17, kullanıcı isteği). */
.od-insts .inst-ozet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.od-insts .inst.is-acik .inst-ozet {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
.od-inst-daha { margin-top: 4px; }

/* —— Paket (eski sade kart — gate'te hâlâ kullanılan yardımcılar) —— */
.od-paket-ad {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
}
.od-paket-eski {
  margin: 0;
  font-size: 0.85rem;
  color: var(--nk-muted, #94a3b8);
  text-decoration: line-through;
}
.od-paket-fiyat {
  margin: 0.15rem 0 0.35rem;
  font-size: clamp(1.75rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--nk-ink, #0f172a);
}
.od-paket-fiyat small {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--nk-muted, #64748b);
}
.od-paket-matrah {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--nk-muted, #64748b);
}
.od-epara {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #ecfdf5;
  color: #047857;
}
.od-paket-desc {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nk-ink, #0f172a);
}
.od-paket-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
.od-paket-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.875rem;
  color: var(--nk-muted, #475569);
  line-height: 1.4;
}
.od-paket-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #2563eb;
}

/* —— Özet —— */
.od-ozet-kurs {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
}
/* ⚠️ Künye tablosu artık fiyat bloğundan SONRA geliyor (fiyat panelin ilk
   elemanı — gerekçe partials/odeme_ozet.php). Ayırıcı çizgi bu yüzden
   `.od-fiyat`'ın üstünden buranın üstüne taşındı. */
.od-ozet-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 0.6rem;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.od-ozet-tablo th,
.od-ozet-tablo td {
  /* 0.45rem → 0.3rem: panel yüksekliğini kısmak için (2026-08-18). */
  padding: 0.3rem 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.od-ozet-tablo th {
  width: 42%;
  font-weight: 500;
  color: var(--nk-muted, #64748b);
  text-align: left;
}
.od-ozet-tablo td { color: var(--nk-ink, #0f172a); }
/* Paket adı bazı kurslarda 60+ karakter → tek başına üç satır yiyordu.
   Tam adı zaten soldaki kartın başlığında. */
.od-ozet-paket {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* —— Uzun alan kırpma ——
   ⚠️ 2026-08-18 — EĞİTMEN SATIRI TEK SATIR (kullanıcı: "eğitmenleri tek
   satır yap, 'tümünü gör'e basınca zaten hepsini görecekler").
   3 satırlık kırpma panelin laptop ekranına sığmasını engelliyordu. */
.od-kirp { display: block; }
.od-kirp.is-kirpik {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.od-daha {
  appearance: none;
  border: 0;
  background: none;
  padding: 0.15rem 0;
  margin-top: 0.15rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}
.od-daha:hover { color: #1d4ed8; }

/* NOT: `.od-ozet-toplam` (tablo içindeki toplam satırı) 2026-08-14'te
   SİLİNDİ. Toplam artık tablonun değil `.od-fiyat` bloğunun parçası —
   liste fiyatı / indirim / matrah / KDV ile aynı yerde durması gerekiyordu.
   Kuralları `.od-fiyat-toplam`da. */
.od-paket-degistir {
  margin-top: 0.35rem;
}

/* —— Giriş paneli (gate, varsayılan sekme) ——
   Panelde form yok, tek buton var: giriş ana menüdeki `#nk-giris`
   modalından yapılıyor (gerekçe: odeme_gate.php). */
.od-giris-panel .od-gate-metin { margin-bottom: 0.9rem; }
.od-giris-panel .btn svg { flex: none; }
.od-baglanti {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}
.od-baglanti:hover { color: #1d4ed8; }

/* ==================================================================
   YORUMLAR — kurs.css'in `.rev` kartı + kayan şerit
   ==================================================================
   ⚠️ 2026-08-14 — `.od-yorum*` ızgara seti SİLİNDİ. Kart artık kurs
   detaydaki gerçek `.rev` bileşeni, şerit `nkKayanSerit` ile sürülüyor.
   Buradaki tek iş: şeridi ödeme sayfasının dar sol kolonuna oturtmak. */
/* ⚠️ ortak.css'in genel `section{padding-block:clamp(64px,8vw,116px)}`
   kuralı bu <section>'a da biniyordu → başlığın üstünde ve şeridin
   altında ~114'er px görünmez boşluk (ölçüldü 2026-08-17, 1440px).
   Kullanıcının "garanti bloğuyla yorumlar arası epey geniş" dediği tam
   buydu. Tuzaklar §A'daki "element seçicisi yeni bileşene biner"
   sınıfının üçüncü tekrarı. */
.od-yorumlar { margin-top: 1.75rem; padding-block: 0; }
.od-yorumlar h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--nk-ink, #0f172a);
}

/* kurs.css'te kart `flex:0 0 348px` — kurs detayın tam genişlikteki
   bölümü için. Ödeme sayfasının sol kolonu ~620px; 348px'te ikinci kart
   yarım kalıyordu. İki kart TAM sığsın diye yüzdeye çeviriyoruz
   (kullanıcı: "burası 2 kart gösterim sağa sola kaydırılabilir"). */
.od-yrms.yrms > .rev { flex: 0 0 calc(50% - 9px); }
/* ⚠️ 2026-08-20 — TAM 2 KART DURUŞU (kullanıcı bulgusu: "bazen uç
   kartların kenarı görünüyor"). `scrollBy(clientWidth)` yuvarlama
   farklarıyla zamanla kart ortasında kalabiliyordu. Kaydırma artık kart
   başlangıcına KİLİTLENİYOR: ok, elle kaydırma ve otomatik geçiş hep
   tam kart sınırında durur. */
.od-yrms.yrms { scroll-snap-type: x mandatory; }
.od-yrms.yrms > .rev { scroll-snap-align: start; }
/* ⚠️ 2026-08-20 — kurs.css `.yrms` dar ekranda kenara taşan karusel için
   negatif kenar boşluğu veriyor (pkgs iptaliyle aynı hikâye); ödeme
   kolonunda bu 7px'lik yatay kaydırma bırakıyordu (390px'te ölçüldü).
   Şerit ödeme sayfasında kendi kabında kalır. */
.od-yrms.yrms { margin-inline: 0; padding-inline: 0; }
@media (max-width: 640px) {
  /* Dar ekranda iki kart 150px'e düşerdi; tek kart + yandakinin kenarı
     görünsün ki kaydırılabildiği anlaşılsın. */
  .od-yrms.yrms > .rev { flex: 0 0 86%; }
}
/* Şerit taşarken oklar kenarda duruyor; sol kolonda dışarı taşacak yer
   yok, o yüzden kartların üstüne biniyorlar (kurs detayda bölüm dolgusu
   payı var, burada yok). */
.od-yrm-sarma { position: relative; }

/* ⚠️ Kenar soluklaştırması KAPALI (kullanıcı, 2026-08-17): kurs.css
   `.yrm-sarma::before/::after` uçlara 56px'lik zemin-rengi gradyan
   basıyor. Kurs detayın tam genişlik bölümünde kenar yumuşatması olarak
   çalışıyor; ödemenin ~620px kolonunda iki kartlık görünümün üçte biri
   soluklaşıyor ve "beyaz perde" gibi duruyordu.
   Seçici element+çift sınıf: tek sınıflı kurs.css kuralıyla eşitlikte
   kalmasın (yükleme sırasına güvenme). */
.od-yrm-sarma.yrm-sarma::before,
.od-yrm-sarma.yrm-sarma::after { display: none; }

/* ==================================================================
   ÜYELİK BİLGİLERİ KARTI (checkout'un ilk paneli)
   ==================================================================
   ⚠️ 2026-08-14 (2. tur) — `.od-oturum` düz metin dökümünün yerine.
   Eskiden "Tel: …", "Adres: …" diye üç satır düz metindi ve ödeme
   ekranının ilk paneli olmasına rağmen form çıktısı gibi duruyordu.
   Kullanıcının burada yaptığı tek iş "bilgilerim doğru mu" kontrolü;
   alan alan ayrılınca göz tarayabiliyor. */
.od-uye-bas {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.od-uye-rozet {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a5f, #2563eb);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
}
.od-uye-ad { flex: 1 1 auto; min-width: 0; }
.od-uye-ad .od-panel-baslik {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nk-muted, #64748b);
}
.od-uye-ad strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--nk-ink, #0f172a);
}
.od-uye-degistir { flex: none; }

.od-uye-kunye {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.25rem;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
/* Adres tek satıra sığmıyor — tam genişlik. */
.od-uye-adres { grid-column: 1 / -1; }
.od-uye-kunye dt {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nk-muted, #94a3b8);
}
.od-uye-kunye dd {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nk-ink, #0f172a);
  overflow-wrap: anywhere;
}
@media (max-width: 460px) {
  .od-uye-kunye { grid-template-columns: minmax(0, 1fr); }
  .od-uye-degistir { align-self: flex-start; }
}

/* —— Checkout —— */
.od-oturum {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: space-between;
  align-items: flex-start;
}
.od-oturum p { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--nk-muted, #475569); }

.od-form { display: grid; gap: 0.85rem; }
.od-alan label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--nk-ink, #0f172a);
}
.od-alan input,
.od-alan select,
.od-alan textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  font: inherit;
  background: #fff;
}
.od-alan input:focus,
.od-alan select:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  border-color: #2563eb;
}
.od-tel-satir {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.5rem;
}

.od-sekmeler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.od-sekme {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  border-radius: 12px;
  padding: 0.7rem 0.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--nk-muted, #475569);
}
.od-sekme.is-aktif {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}
.od-sekme-panel[hidden] { display: none !important; }
/* ⚠️ 2026-08-14 (2. tur) — SEKME DEĞİŞİMİNDE SIÇRAMA ÖNLEMİ.
   Kredi kartı panelinde iyzico iframe'i 385px; havale panelinde banka
   listesi + taksit tablosu farklı yükseklikte ve tablo AJAX'tan sonra
   bir kez daha büyüyor. Sekmeye basınca kap önce çöküyor, sonra yeni
   içerik kadar açılıyordu — kullanıcının gördüğü "css bi değişip
   düzeliyor" tam olarak bu iki adımlı yerleşim.
   Kaba taban yükseklik iki panelde de aynı olunca çökme adımı kalkıyor;
   içerik daha uzunsa kap zaten büyüyor, kırpma yok. */
.od-sekme-panel { min-height: 400px; }

/* —— Dikkat çekme (sıradaki adım NABZI) ——
   Canlıda Animate.css `animate__tada` vardı (~80 KB kütüphane, tek
   efekt için); ilk karşılık yatay sallamaydı.
   ⚠️ 2026-08-20 — SALLAMA → NABIZ (kullanıcı: "sağa sola hareket
   'hayır hayır hayır' izlenimi veriyor"). Yatay sallama baş sallamayı
   (hayır) çağrıştırıyor, kırmızı halka da hata dili konuşuyordu.
   Yeni hareket: öğe belli belirsiz büyüyüp inerken marka mavisi bir
   halka genişleyip sönüyor — sonar "sıradaki adım burası" nabzı.
   Sınıf adı ve JS tarafı (odDikkat/durtTekrar) aynı kaldı.
   ⚠️ Hareketi kısıtlayan kullanıcıda animasyon YOK ama öğe yine de
   sabit halkayla işaretleniyor, yoksa uyarı o kişiye hiç ulaşmıyor. */
@keyframes odDikkat {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
  50%  { transform: scale(1.02); box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.od-dikkat {
  animation: odDikkat 0.9s ease-out;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .od-dikkat {
    animation: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
  }
}

.od-banka-grid {
  display: grid;
  gap: 0.65rem;
}
@media (min-width: 640px) {
  .od-banka-grid { grid-template-columns: 1fr 1fr; }
}
.od-banka {
  display: block;
  cursor: pointer;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  padding: 0.75rem;
  background: #fff;
}
.od-banka:has(input:checked),
.od-banka.is-secili {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.od-banka input { margin-right: 0.4rem; }
.od-banka table {
  width: 100%;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  border-collapse: collapse;
}
.od-banka td { padding: 0.15rem 0; color: var(--nk-muted, #475569); }
.od-banka img { max-height: 36px; width: auto; margin: 0.35rem 0; }

.od-taksit-form { margin-top: 1rem; }
.od-taksit-form select {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font: inherit;
}
.od-taksit-tablo {
  width: 100%;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  border-collapse: collapse;
}
.od-taksit-tablo th,
.od-taksit-tablo td {
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  text-align: left;
  /* ⚠️ 2026-08-20 — tarih ve tutar kutuları aynı hizada dursun
     (kullanıcı: "biri üstte biri altta görünüyor"). */
  vertical-align: middle;
}
.od-taksit-tablo input {
  width: 100%;
  border: 0;
  background: #ecfdf5;
  color: #065f46;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  font: inherit;
}
/* ⚠️ 2026-08-20 — TUTAR HÜCRESİ HİZALAMASI (kullanıcı bulgusu).
   `input { width:100% }` tutar kutusuna da uygulanınca kutu hücreyi
   tamamen kaplıyor ve yanındaki "TL" simgesi ALT SATIRA düşüyordu;
   satır yükseldiği için tarih kutusuyla hizası da bozuluyordu.
   Tutar kutusu içeriğe göre daralır, TL ile aynı satırda kalır. */
.od-taksit-tablo .txt_para {
  width: auto;
  max-width: 7rem;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}
.od-taksit-tablo td:last-child { white-space: nowrap; }

/* ⚠️ 2026-08-20 — e-PARA MODALINDAKİ "İPTAL" GÖRÜNMEZDİ.
   Buton kapatma davranışı için `nk-modal-close` sınıfını taşıyor; ortak.css
   o sınıfı koyu modal BAŞLIĞINDAKİ × butonu için beyaz boyuyor (beyaz
   metin + beyaz çerçeve + %10 beyaz zemin). Beyaz gövdede buton görünmez
   oluyordu (ölçüldü: computed color rgb(255,255,255)). Gövdedeki buton
   normal outline düzenine dönüyor; başlıktaki × etkilenmiyor
   (o `.btn` sınıfı taşımıyor). */
#od-epara .btn.nk-modal-close {
  color: var(--nk-ink, #0f172a);
  border-color: rgba(15, 23, 42, 0.25);
  background: #fff;
}

.od-iyzico-kutu {
  position: relative;
  min-height: 385px;
}
.od-iyzico-engel {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(37, 99, 235, 0.18);
  border-radius: 12px;
  cursor: not-allowed;
}
.od-iyzico-engel[hidden] { display: none !important; }

.od-soz-onay {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0.85rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.od-soz-onay input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.od-soz-onay a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.od-soz-onay.is-ok { color: #065f46; }
.od-soz-onay.is-bekliyor { color: #991b1b; }

.od-tamamla {
  width: 100%;
  margin-top: 0.5rem;
}

.od-profil-eksik .od-odeme-govde { display: none !important; }
/* Telefon doğrulaması beklenirken de gövde gizli (2026-08-21, §9.1/5c) —
   bayrak oturumda, sayfa yenilemek atlatamaz. */
.od-tel-onay .od-odeme-govde { display: none !important; }

#iyzipay-checkout-form { min-height: 385px; }

.od-doviz {
  display: none;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.od-doviz.is-acik { display: grid; }
@media (min-width: 520px) {
  .od-doviz.is-acik { grid-template-columns: 1fr 1fr; }
}

/* ==================================================================
   TEK EKRAN HESAP ADIMI (odeme_gate) — 2026-08-12
   ================================================================== */

/* —— Adım göstergesi ——
   Kaç adım kaldığını gösterir; ödeme sayfalarında belirsizlik terk
   sebebi. Sayaç `counter` DEĞİL, gerçek <span> — ekran okuyucu okusun. */
.od-adimlar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 0.82rem;
  color: var(--nk-kul, #64748b);
  flex-wrap: wrap;
}
.od-adimlar li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.od-adimlar li + li::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  margin-right: 0.35rem;
}
.od-adimlar span {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 700;
}
.od-adimlar .is-aktif { color: var(--nk-ink, #0f172a); font-weight: 700; }
.od-adimlar .is-aktif span { background: var(--nk-kirmizi, #b91c1c); color: #fff; }

/* —— Hesap paneli —— */
.od-hesap .od-sekmeler { margin-bottom: 1.25rem; }
.od-hesap-panel[hidden] { display: none; }

.od-form-grup {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nk-ink, #0f172a);
}
.od-form-grup:first-of-type { margin-top: 0; }
.od-form-grup small {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--nk-kul, #64748b);
  margin-top: 0.15rem;
}

/* İki alan yan yana — form dikey olarak uzamasın diye.
   ⚠️ minmax(0,1fr): uzun <select> seçeneği sütunu taşırıyordu. */
.od-alan-ikili {
  display: grid;
  gap: 0 0.75rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .od-alan-ikili { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.od-alan-ikili .od-alan[hidden] { display: none; }

.od-genis { width: 100%; justify-content: center; margin-top: 0.5rem; }

.od-kucuk {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--nk-kul, #64748b);
}
.od-kucuk a { color: inherit; text-decoration: underline; }

/* —— SMS adımı —— */
.od-sms .od-alan input {
  font-size: 1.35rem;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* "Kodu onayla" ile aynı genişlikte, hemen altında (24rem = .od-sms bloğu) */
.od-kod-tekrar { max-width: 24rem; margin: 0.25rem auto 0; }
.od-kod-tekrar .od-kucuk { display: block; margin-top: 0.5rem; text-align: center; }
.od-kod-tekrar .od-kucuk:empty { display: none; }

/* —— Güven şeridi —— */
.od-guven {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--nk-cizgi, #e2e8f0);
  border-radius: 14px;
  background: #f8fafc;
}
.od-guven-kalem {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--nk-kul, #475569);
}
.od-guven-kalem + .od-guven-kalem { margin-top: 0.75rem; }

/* ⚠️ 2026-08-14 — YATAY VARYANT, sol kolona taşındığı için.
   Şerit eskiden sağ kolonda, sipariş özetinin ALTINDAYDI ve hiç
   görülmüyordu: özet `sticky` olduğundan ekranda kalıyor, altındaki
   şerit sağ kolonun dibinde kalıp görüş alanına hiç girmiyordu.
   Sol kolon geniş; üç kalem yan yana tek şeride sığıyor ve dikey yer
   harcamıyor. Dar ekranda alt alta dönüyor. */
.od-guven-yatay { margin-top: 1.25rem; }
@media (min-width: 700px) {
  .od-guven-yatay {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
  .od-guven-yatay .od-guven-kalem + .od-guven-kalem { margin-top: 0; }
}
.od-guven-kalem svg {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  color: var(--nk-kirmizi, #b91c1c);
}
.od-guven-kalem strong { color: var(--nk-ink, #0f172a); }

.od-kartlar { margin: 1rem 0 0; text-align: center; }
.od-kartlar img { max-width: 100%; height: auto; }

.od-paket-sarmal { margin-top: 1.25rem; }

/* —— Yapışkan sipariş özeti ——
   Yalnız masaüstünde: dar ekranda `sticky` kart ekranın yarısını yiyor.
   ⚠️ `top` menü yüksekliğini aşmalı, yoksa özet menünün altında kalıyor. */
@media (min-width: 981px) {
  /* ==================================================================
     YAPIŞKAN SİPARİŞ ÖZETİ (2026-08-18 son hâl — SADE)
     ==================================================================
     Panel üstten yapışıyor, o kadar. Uzunsa sayfayla birlikte kayıyor.

     ⛔ ÜÇ SÜRÜM DENENDİ VE KALDIRILDI (hepsi aynı gün):
       · yön duyarlı `is-alt`/`is-ust` → yön değişiminde panel sıçrayıp
         kayboluyordu;
       · negatif `top` (canlının `-140px` deseni) → canlıda çalışıyor
         çünkü ORADAKİ panel kısa; bizimkinde ya üstü ya altı erişilemez
         kalıyordu;
       · panel içi `max-height` + `overflow-y` → kullanıcı: "saçma oldu,
         kullanıcı scroll'u fark etmez bile ve sözleşmeyi arar".

     ✅ DOĞRU ÇÖZÜM PANELİ KISALTMAK (kullanıcı kararı): eğitmen satırı
     tek satıra indi, künye/fiyat satır boşlukları kısıldı. Panel laptop
     ekranına sığdığı sürece yapışkanlık zaten sorunsuz çalışıyor. */
  .od-ozet-sticky {
    position: sticky;
    top: 92px;
    z-index: 5;
  }
}

/* —— Sipariş sonucu / onay ekranı (odeme_sonuc) —— */
.od-sonuc { text-align: center; }
.od-sonuc .od-baslik { margin-bottom: 0.75rem; }
.od-sonuc .od-gate-metin { max-width: 34rem; margin-inline: auto; }
.od-sonuc .od-cta-stack { max-width: 22rem; margin-inline: auto; margin-top: 1.25rem; }

.od-sonuc-ikon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
}
.od-sonuc-ikon svg { width: 2.1rem; height: 2.1rem; }
.od-sonuc-ok .od-bilgi { text-align: left; }

/* Onay kodu alanı — gate'teki SMS adımıyla aynı dil (harf aralıklı, ortalı).
   `.od-sms` sınıfı orada tanımlı; genişlik sınırlı ki 6 haneli kod dev bir
   kutuda yüzmesin.
   ⚠️ 2026-08-19 — ORTALANDI (kullanıcı bulgusu: "kutu sola dayanıp sağı
   boş kalmış, hem metin hem sms giriş inputu"). 24rem'lik blok geniş
   panelin içinde sola yapışıyordu; hem gate'teki SMS adımını hem sonuç
   ekranındaki kod formunu aynı seçici kapsıyor, ikisi de ortalandı. */
.od-hesap .od-sms {
  max-width: 24rem;
  margin-inline: auto;
  text-align: center;
}

/* —— Mobilde özetin yeri ——
   GATE: özet FORMUN ÜSTÜNDE kalır (2026-08-14 kararı, ölçülmüştü:
   kullanıcı 10 alanlık formu geçmeden fiyatı göremiyordu; bu sayfanın
   var oluş sebebi tam olarak bunu önlemek).
   CHECKOUT: özet ödeme sekmelerinin HEMEN ALTINA iner (kullanıcı
   2026-08-20: "sipariş özetini kredi kartı ve havale kısmının tam
   altına koyalım, şu an en üstte"). Girişli kullanıcı ne aldığını
   biliyor; önce ödeme yöntemi, hemen altında döküm.
   Teknik: `.od-ana` ve `.od-odeme-govde` `display:contents` olunca
   içlerindeki bloklar grid çocuğuna dönüşüyor; sekmelerden SONRAKİ
   bloklar order:2'ye itiliyor, özet order:1 ile araya giriyor.
   Desteklemeyen eski tarayıcıda özet en sona düşer — bozulmaz.
   ⚠️ 2026-08-20 — kırılım 980 → 899: grid 900px'te iki kolona geçiyor;
   eski 980 sınırı 900-980 aralığında `order:-1` yüzünden KOLONLARI TERS
   çeviriyordu (özet sola, içerik sağa). Tek doğru sınır 899. */
@media (max-width: 899px) {
  .od-yan { order: -1; }
  /* ⚠️ 2026-08-20 — SONUÇ EKRANI İSTİSNASI (mobil tur bulgusu): kod
     girişi/sonuç mesajı asıl eylemken `order:-1` özeti üste alıp formu
     ekran altına itiyordu. Gate'teki "fiyat önce" kararı burada geçersiz
     — sipariş zaten verilmiş. Ana panel üstte, özet altta. */
  .od-sonuc-sayfa .od-yan { order: 1; }
  /* Kartlar görseli mobilde formdan önce yer kaplamasın. */
  .od-kartlar { display: none; }

  .od-checkout .od-ana,
  .od-checkout .od-odeme-govde { display: contents; }
  .od-checkout .od-yan { order: 1; }
  .od-checkout .od-paket-blok,
  .od-checkout .od-guven-yatay,
  .od-checkout .od-yorumlar { order: 2; }
}