/* ONLINE ÖDEME — odeme.html. İskelet blog/yasal sayfalarla aynı (hizmet-ortak.css
   + blog.css → .sv-root, .bl-hero, .sv-inset, .sv-btn); bu dosya yalnız formu
   ve yan özeti çiziyor. Ölçüler px/clamp: form telefonda da okunur kalmalı
   (eski sayfa cqw ile çizildiği için telefonda yazılar 3-4 px'e iniyordu).
   Giriş yazıları 16 px: iOS Safari daha küçük yazılı alana dokununca sayfayı
   büyütüyor. */

.od {
  --od-zemin: #121212;
  --od-alan: #151515;
  --od-cizgi: #2a2a2a;
  --od-soluk: rgba(255,255,255,0.62);
  --od-hata: #ff8f9b;
  --od-ok: #7ee2a8;
  padding-top: clamp(28px, 3.2cqw, 64px);
  padding-bottom: clamp(56px, 6cqw, 120px);
  font-family: 'Jost', sans-serif;
  color: #f0f0f0;
}
.od .od-giris {
  max-width: 62ch; margin: 0 0 clamp(24px, 2.6cqw, 48px);
  font-weight: 300; font-size: clamp(16px, 1.05cqw, 19px); line-height: 1.6; color: var(--sv-dim, rgba(255,255,255,0.83));
}

.od-izgara { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(32px, 4cqw, 80px); align-items: start; }

/* ── Form ─────────────────────────────────────────────────────────────── */
.od-form { display: flex; flex-direction: column; gap: clamp(28px, 2.4cqw, 44px); }
.od-bolum { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.od-baslik {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 0 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--sv-line, rgba(240,240,240,0.13));
  font-family: 'Afacad Flux', sans-serif; font-weight: 600; font-size: clamp(19px, 1.35cqw, 24px); line-height: 1.2; color: #ffffff;
}
.od-no { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: 12px; letter-spacing: 0.06em; color: var(--od-soluk); }
.od-gizli, .od-tuzak { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.od-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.od-alan { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.od-alan label { font-weight: 400; font-size: 15px; line-height: 1.3; color: #e8e8e8; }
.od-zorunlu { color: var(--od-hata); }
.od-istege { color: var(--od-soluk); font-weight: 300; }
.od-alan input {
  width: 100%; box-sizing: border-box; height: 52px; margin: 0; padding: 0 16px;
  border: 1px solid var(--od-cizgi); border-radius: 12px; background: var(--od-alan);
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 16px; color: #f5f5f5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.od-alan input::placeholder { color: #6a6a6a; opacity: 1; }
.od-alan input:hover { border-color: #3a3a3a; }
.od-alan input:focus { outline: none; border-color: #8a8a8a; box-shadow: 0 0 0 3px rgba(240,240,240,0.08); }
.od-alan input[aria-invalid="true"] { border-color: rgba(255,92,110,0.7); }
.od-alan input:-webkit-autofill { -webkit-text-fill-color: #f5f5f5; -webkit-box-shadow: 0 0 0 100px var(--od-alan) inset; caret-color: #f5f5f5; }
.od-hata { min-height: 0; font-size: 14px; line-height: 1.35; color: var(--od-hata); }
.od-hata:empty { display: none; }
.od-not { font-size: 13px; line-height: 1.35; color: var(--od-soluk); }

.od-tutar-kutu { position: relative; }
.od-tutar-kutu input { padding-right: 40px; font-variant-numeric: tabular-nums; }
.od-tl { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--od-soluk); pointer-events: none; }
#od-kart-no, #od-skt, #od-cvc { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* Kabul edilen kartlar: marka algılanınca diğerleri söner */
.od-kartlar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.od-logo { position: relative; display: block; height: 30px; border-radius: 6px; background: #f4f4f4 center / 70% auto no-repeat; transition: opacity .25s ease; }
/* visa.svg dolgusuz (siyah) çizim: maske olarak kullanılıp Visa mavisiyle boyanıyor */
.od-logo-visa { width: 52px; }
.od-logo-visa::after { content: ""; position: absolute; inset: 7px 9px; background: #1a1f71;
  -webkit-mask: url(./assets/pay/visa.svg) center / contain no-repeat; mask: url(./assets/pay/visa.svg) center / contain no-repeat; }
.od-logo-mc { width: 46px; background-image: url(./assets/pay/mastercard.svg); background-size: 58% auto; }
.od-kartlar[data-marka] .od-logo { opacity: .25; }
.od-kartlar[data-marka="visa"] .od-logo-visa, .od-kartlar[data-marka="mastercard"] .od-logo-mc { opacity: 1; }
.od-kart-not { font-size: 14px; color: var(--od-soluk); }

/* Onaylar */
.od-onaylar { gap: 10px; }
.od-onay { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; cursor: pointer; font-weight: 300; font-size: 16px; line-height: 1.5; color: #ececec; }
.od-onay input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: #f0f0f0; cursor: pointer; }
.od-onay a, .od-kvkk a, .od-firma a { color: #ffffff; text-decoration: underline; text-underline-offset: 0.2em; }
.od .od-kvkk { margin: 6px 0 0; font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--od-soluk); }

/* Durum kutusu (hata ya da bilgi) */
.od-durum { padding: 16px 18px; border-radius: 12px; font-size: 15px; line-height: 1.55; border: 1px solid rgba(255,92,110,0.4); background: rgba(255,61,87,0.08); color: #ffd3d8; }
.od-durum[data-tur="bilgi"] { border-color: rgba(240,240,240,0.28); background: rgba(240,240,240,0.05); color: #f0f0f0; }
.od-durum a { color: #ffffff; text-decoration: underline; }

.od-gonder { align-self: flex-start; min-height: 54px; padding: 0 32px; font-size: 17px; gap: 10px; }
.od-gonder svg { width: 18px; height: 18px; }
.od-gonder[disabled] { opacity: .6; pointer-events: none; }
.od .od-alt-not { margin: -12px 0 0; max-width: 60ch; font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--od-soluk); }

/* ── Yan özet ─────────────────────────────────────────────────────────── */
.od-yan { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
.od-ozet { padding: clamp(22px, 1.8cqw, 32px); border-radius: 18px; background: linear-gradient(180deg, #171717 0%, #111111 100%); box-shadow: inset 0 0 0 1px #262626; }
.od .od-ozet-baslik { margin: 0 0 16px; font-family: 'Afacad Flux', sans-serif; font-weight: 600; font-size: 22px; color: #ffffff; }
.od .od-ozet-liste { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.od-ozet-liste > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.od-ozet-liste dt { font-size: 14px; color: var(--od-soluk); }
.od-ozet-liste dd { margin: 0; font-size: 16px; text-align: right; overflow-wrap: anywhere; color: #f0f0f0; }
.od-ozet-toplam { padding-top: 14px; margin-top: 4px; border-top: 1px solid #262626; }
.od-ozet-toplam dd { font-family: 'Afacad Flux', sans-serif; font-weight: 600; font-size: 28px; font-variant-numeric: tabular-nums; color: #ffffff; }
.od .od-guven { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid #262626; display: flex; flex-direction: column; gap: 10px; }
.od-guven li { position: relative; padding-left: 22px; font-weight: 300; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.od-guven li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 5px; border-left: 1.5px solid var(--od-ok); border-bottom: 1.5px solid var(--od-ok); transform: rotate(-45deg); }
.od-firma { padding: 0 4px; font-weight: 300; font-size: 13px; line-height: 1.6; color: var(--od-soluk); }
.od-firma p { margin: 0; }
.od-firma strong { font-weight: 500; color: #e8e8e8; }

/* ── Telefon / dar ekran ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .od-izgara { grid-template-columns: minmax(0, 1fr); }
  .od-yan { position: static; order: -1; }
  .od .od-guven { display: none; }          /* aynı güvence notları formun altında ve sözleşmelerde var */
  .od-firma { order: 2; }
}
@media (max-width: 600px) {
  .od-satir { grid-template-columns: minmax(0, 1fr); }
  .od-satir-dar { grid-template-columns: 1fr 1fr; gap: 12px; }
  .od-gonder { align-self: stretch; justify-content: center; }
}