/* PiyasaKuşu yeni site (13.10.2026) — kayıt (/signup) ve ödeme (/odeme/) sayfaları. Yeni dosya.
   İki sayfa giriş sayfasının parçalarıyla kurulur: sahne, sütun genişlikleri, girdi, etiket, yardımcı yazı, bağlantı
   ve düğme giris.css'ten gelir; o dosyaya dokunulmaz. Burada yalnız giriş sayfasında olmayan parçalar vardır:
   adım satırı, sipariş kutusu, alanın yanındaki hata, onay kutuları, kapalı kart alanı, kapalı düğme. */

/* Bu iki sayfada ziyaretçi satın almanın içindedir: üst çubuğun "Kaydol" düğmesi ve telefon çubuğu sayfaya
   hiç yazılmaz (build/ek-sayfalar.mjs). */

/* form sütunu biraz daha uzun: içerik pencereye sığmazsa üstten başlar, ortalanıp kesilmez */
.k-sayfa .g-form-yan { align-items: flex-start; padding-top: 40px; padding-bottom: 56px; }
.k-sayfa .g-form { margin-block: auto; }

/* ── adım satırı: 1 Hesap · 2 Ödeme ── */
.k-adimlar { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.3; color: #4b5768; }
.k-adimlar li { display: flex; align-items: center; gap: 8px; }
.k-adimlar li + li::before { content: ""; width: 28px; height: 1px; background: #c3ccd9; }
.k-adim-no {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #c3ccd9; background: #fff; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: #4b5768;
}
.k-adimlar [aria-current="step"] { color: #0f1b2d; }
.k-adimlar [aria-current="step"] .k-adim-no { border-color: #2a6eb7; background: #2a6eb7; color: #fff; }
.k-adimlar .k-adim--tamam .k-adim-no { border-color: #2a6eb7; color: #23609f; }

/* ── sipariş kutusu: seçilen paket ve fiyat satırları (Üyelik kartıyla aynı veriden) ── */
/* "Paketi değiştir" bağlantısı kaynakta kutunun SONUNDADIR (ekran okuyucu önce paketi ve fiyatı okur), ekranda
   ilk satırın sağında, paket adının yanında durur. */
.k-siparis { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: baseline; padding: 14px 16px; border: 1px solid #c9d6e6; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15, 27, 45, .06); }
.k-siparis > * { grid-column: 1 / -1; }
.k-siparis > .k-siparis-ad { grid-column: 1; grid-row: 1; }
.k-siparis > .k-siparis-degis { grid-column: 2; grid-row: 1; }
.k-siparis-ad { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: #0f1b2d; }
.k-siparis-degis { font-size: 13px; font-weight: 500; line-height: 1.4; color: #23609f; text-decoration: none; white-space: nowrap; }
.k-siparis-degis:hover { text-decoration: underline; }
.k-siparis-degis:focus-visible, .k-metin a:focus-visible, .k-onay a:focus-visible { outline: 2px solid #2a6eb7; outline-offset: 2px; border-radius: 4px; }
.k-fiyat { margin: 0; font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #0f1b2d; }
.k-fiyat s { color: #4b5768; text-decoration-thickness: 2px; }
.k-ilk { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: #23609f; }
.k-kdv { margin: 0; font-size: 12.5px; line-height: 1.5; color: #4b5768; }
.k-siparis-satir { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid #e3e7ed; font-size: 13.5px; line-height: 1.5; color: #434e5e; }

/* ── alanın yanındaki hata: giriş sayfasının hata rengi ve boyu ── */
.k-hata { margin: 0; font-size: 14px; line-height: 1.5; color: #a3262f; }
.k-hata:empty { display: none; }
.g-girdi input[aria-invalid="true"] { box-shadow: 0 2px 3px -1px rgba(15, 27, 45, .1), 0 0 0 1.5px #a3262f; }
.k-sayfa .g-durum:empty { min-height: 0; }

/* ── düz metinler ve bağlantılar (düğmenin altı, yasal iki satır) ── */
.k-metin { margin: 0; font-size: 13.5px; line-height: 1.6; color: #434e5e; }
.k-metin a, .k-onay a { color: #23609f; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.k-metin--orta { text-align: center; }

/* üç alan tek kapta durur (kayıt tamamlanınca birlikte gizlenir); aralıkları formdaki gibi */
.k-alanlar { display: flex; flex-direction: column; gap: 16px; }
.k-alanlar[hidden], .k-tamam[hidden] { display: none; }

/* ── kayıt tamam: formun yerine geçen bölüm ── */
.k-tamam { display: flex; flex-direction: column; gap: 16px; }
.k-tamam-metin { margin: 0; font-size: 15px; line-height: 1.6; color: #1d6b3e; }
.k-tamam:focus { outline: none; }
/* bağlantı olarak düğme: yazı ile ok arasındaki boşluk korunsun diye satır içi dizilir (esnek kutu boşluğu yutar) */
a.g-gonder { display: block; line-height: 44px; text-align: center; text-decoration: none; box-sizing: border-box; }

/* ── onay kutuları ── */
.k-onaylar { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.k-onay { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.55; color: #0f1b2d; cursor: pointer; }
.k-onay input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #2a6eb7; cursor: pointer; }
.k-onay input:focus-visible { outline: 2px solid #2a6eb7; outline-offset: 2px; }
.k-onay-tur { display: block; font-size: 12.5px; color: #4b5768; }

/* ── kart alanı: bugün kapalı; kart alanı çizilmez, kart bilgisi yalnız iyzico'nun kendi formuna yazılır ── */
.k-kart { padding: 16px; border: 1px dashed #b3c0d1; border-radius: 12px; background: #f5f7fa; }
.k-kart[data-durum="acik"] { padding: 0; border: 0; background: none; }
.k-kart-bekleme { margin: 0; font-size: 14px; line-height: 1.6; color: #434e5e; }
.k-kart[data-durum="acik"] .k-kart-bekleme { display: none; }

/* kapalı düğme: basılamaz ve öyle görünür (giriş sayfasındaki "bekliyor" soluğundan ayrı, renksiz) */
.k-sayfa .g-gonder[disabled] { opacity: 1; border-color: #c3ccd9; background: #dfe5ec; color: #4b5768; box-shadow: none; cursor: not-allowed; }
.k-sayfa .g-gonder[disabled]:hover { background: #dfe5ec; transform: none; }
.k-sayfa .g-gonder[disabled]::after { display: none; }
/* kayıt formunda istek sürerken: aynı düğme, giriş sayfasındaki gibi soluk */
.k-sayfa .g-gonder[aria-busy="true"] { opacity: .6; border-color: #2a6eb7; background: #2a6eb7; color: #fff; cursor: default; }
.k-sayfa .g-gonder[aria-busy="true"]:hover { background: #2a6eb7; }

/* ── ödeme düğmesinin altı: alt bilgideki iyzico bandı ── */
.k-odeme-bant { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.k-odeme-bant img { display: block; width: 100%; max-width: 384px; height: auto; }

@media (max-width: 1023px) {
  .k-sayfa .g-form-yan { padding-top: 40px; padding-bottom: 64px; }
}
@media (max-width: 380px) {
  .k-adimlar li + li::before { width: 16px; }
}

/* Üst çubukta "Kaydol" düğmesi bu iki sayfada yoktur. Telefonda o düğme görünmez ama yer tutucuydu: menü düğmesini
   sağa yaslayan oydu (stil.css, yeni.css). Aynı yerleşim burada, düğme olmadan kurulur. */
/* Çubuğun boyunu da o düğme veriyordu (66 px; giriş sayfası ve sayfanın üst boşluğu buna göre). */
body:has(main.k-sayfa) .ust { min-height: 66px; }
@media (max-width: 860px) {
  html.js body:has(main.k-sayfa) .ust .menu-dugme { margin-left: auto; }
}
