/* The payment step (ARCP-93), taken from Claude Design project
   77f69ab2-febe-4e17-87bc-ec431a5418c0, file "X - Odeme adimi", as written - the source is
   docs/design/import/yeni-siniflar-odeme.css. Loaded only by Pages/Shared/_BareLayout.cshtml,
   after onboarding.css: the shell (.tapp-kt-frame, .tapp-kt-page, .tapp-kt-top, the form
   controls) is inherited from there, this file only adds the .tapp-od-* classes the payment
   screen itself needs. */

/* ── Ödeme adımı ve sonuç — yeni sınıflar ──────────────────
   yeni-siniflar-kayit.css'ten SONRA yüklenir. Çerçeve (.tapp-kt-frame),
   sayfa gövdesi ve form alanları (.tapp-kt-*) oradan devralınır.
   Genişlik duyarlılığı @container ile; çerçeve container'dır. */

.cr{
  --od-r:12px;
  --od-r-ctl:8px;
  --od-t-lbl:10.5px;
  --od-t-note:12px;
  --od-t-body:13.5px;
}

.tapp-od-wrap{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2cqi,22px);
  width:100%;
  max-width:1100px;
  margin:0 auto;
  min-width:0;
}
.tapp-od-split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  align-items:start;
  min-width:0;
}
@container (min-width:900px){
  .tapp-od-split{ grid-template-columns:minmax(0,1fr) 340px; gap:20px; }
}

.tapp-od-head{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.tapp-od-h{
  font-size:clamp(19px,2.4cqi,25px);
  font-weight:700;
  color:var(--head);
  letter-spacing:-.5px;
  margin:0;
  text-wrap:pretty;
}
.tapp-od-p{
  font-size:var(--od-t-body);
  color:var(--muted);
  line-height:1.55;
  margin:0;
  max-width:70ch;
  text-wrap:pretty;
}

/* ── Panel ──────────────────────────────────────────────── */

.tapp-od-card{
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--od-r);
  background:var(--card);
  min-width:0;
}
.tapp-od-card.is-quiet{ background:var(--hover); }
.tapp-od-card-h{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  min-width:0;
}
.tapp-od-card-h h3{
  font-size:15px;
  font-weight:700;
  color:var(--head);
  letter-spacing:-.2px;
  margin:0;
}
.tapp-od-card-h .tapp-ms-link{ margin-left:auto; }
.tapp-od-note{
  font-size:var(--od-t-note);
  color:var(--muted);
  line-height:1.55;
  margin:0;
  text-wrap:pretty;
}

/* ── Tutar satırları ────────────────────────────────────── */

.tapp-od-lines{ display:flex; flex-direction:column; min-width:0; }
.tapp-od-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:var(--od-t-body);
  color:var(--body);
  min-width:0;
}
.tapp-od-line-k{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tapp-od-line-k b{ color:var(--head); font-weight:600; }
.tapp-od-line-k span{ font-size:11.5px; color:var(--muted); line-height:1.45; }
.tapp-od-line-v{
  flex:0 0 auto;
  color:var(--head);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tapp-od-line.is-sub .tapp-od-line-k,
.tapp-od-line.is-sub .tapp-od-line-v{ color:var(--muted); }
.tapp-od-line.is-total{
  border-bottom:0;
  padding-top:12px;
  font-size:15px;
}
.tapp-od-line.is-total .tapp-od-line-k b{ font-size:15px; }
.tapp-od-line.is-total .tapp-od-line-v{
  font-size:21px;
  font-weight:700;
  letter-spacing:-.4px;
}

/* ── Güven şeridi ───────────────────────────────────────── */

.tapp-od-trust{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--od-r-ctl);
  background:var(--hover);
  min-width:0;
}
.tapp-od-trust-i{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:var(--od-t-note);
  color:var(--body);
  line-height:1.5;
  text-wrap:pretty;
}
.tapp-od-trust-i i{ color:var(--ok); margin-top:2px; flex:0 0 auto; width:12px; text-align:center; }
.tapp-od-trust-i.is-quiet i{ color:var(--muted); }

/* ── Ödeme sağlayıcı çerçevesi (PayTR) ──────────────────── */

.tapp-od-iframe{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--od-r);
  background:var(--input);
  overflow:hidden;
  min-width:0;
}
.tapp-od-iframe-bar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  background:var(--hover);
  font-size:11.5px;
  color:var(--muted);
}
.tapp-od-iframe-bar i{ color:var(--ok); }
.tapp-od-iframe-bar b{ color:var(--body); font-weight:600; }
.tapp-od-iframe-foot{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  padding:0 16px 16px;
  font-size:11.5px;
  color:var(--muted);
}

/* ── Orta hizalı durum ekranları ────────────────────────── */

.tapp-od-mid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  text-align:center;
  max-width:540px;
  margin:0 auto;
  padding:clamp(20px,3cqi,34px);
  border:1px solid var(--border);
  border-radius:var(--od-r);
  background:var(--card);
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.tapp-od-mid h3{
  font-size:clamp(17px,2.2cqi,21px);
  font-weight:700;
  color:var(--head);
  letter-spacing:-.3px;
  margin:0;
  text-wrap:pretty;
}
.tapp-od-mid p{
  font-size:var(--od-t-body);
  color:var(--muted);
  line-height:1.6;
  margin:0;
  text-wrap:pretty;
}
.tapp-od-mid .tapp-od-card,
.tapp-od-mid .tapp-od-trust{ width:100%; text-align:left; box-sizing:border-box; }
.tapp-od-acts{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }

.tapp-od-spin{
  width:30px; height:30px;
  border-radius:var(--r-pill);
  border:2px solid var(--border);
  border-top-color:var(--brand-indigo);
  animation:tapp-od-turn 1.1s linear infinite;
}
@keyframes tapp-od-turn{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .tapp-od-spin{ animation:none; }
}

.tapp-od-mark{
  width:46px; height:46px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--hover);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:19px;
  color:var(--muted);
}
.tapp-od-mark.is-ok{ color:var(--ok); }
.tapp-od-mark.is-bad{ color:var(--bad); }
.tapp-od-mark.is-warn{ color:var(--warn); }

/* Sonuç ekranındaki döküm satırları */
.tapp-od-facts{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--od-r-ctl);
  overflow:hidden;
  width:100%;
  min-width:0;
}
.tapp-od-fact{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  font-size:var(--od-t-body);
  color:var(--body);
  text-align:left;
  min-width:0;
}
.tapp-od-fact:last-child{ border-bottom:0; }
.tapp-od-fact i{ color:var(--muted); width:14px; text-align:center; flex:0 0 auto; margin-top:2px; }
.tapp-od-fact b{ color:var(--head); font-weight:600; }
.tapp-od-fact span{ color:var(--muted); font-size:var(--od-t-note); line-height:1.5; }
.tapp-od-fact-k{ display:flex; flex-direction:column; gap:2px; min-width:0; }

/* Hata kutusu */
.tapp-od-err{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px;
  border:1px solid var(--bad);
  border-radius:var(--od-r-ctl);
  background:var(--hover);
  font-size:var(--od-t-body);
  color:var(--body);
  line-height:1.55;
  text-align:left;
  width:100%;
  box-sizing:border-box;
  text-wrap:pretty;
}
.tapp-od-err i{ color:var(--bad); margin-top:2px; flex:0 0 auto; }
.tapp-od-err b{ color:var(--head); font-weight:600; display:block; margin-bottom:3px; }
.tapp-od-err code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;
  color:var(--muted);
}

/* Yönlendirme anında hedefi gösteren şerit */
.tapp-od-hop{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:var(--od-t-note);
  color:var(--muted);
}
.tapp-od-hop b{ color:var(--head); font-weight:600; }
.tapp-od-hop i{ color:var(--muted); }

@container (max-width:520px){
  .tapp-od-acts{ width:100%; }
  .tapp-od-acts .tapp-btn{ flex:1 1 100%; }
}

/* ── Sözleşme onayı ve kart logoları (Pages/Account/Billing/Pay) ── */

.tapp-od-accept{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-bottom:12px;
  font-size:var(--od-t-note);
  color:var(--body);
  line-height:1.5;
  cursor:pointer;
}
.tapp-od-accept input{ margin-top:3px; flex:0 0 auto; accent-color:var(--acc-solid); }
.tapp-od-accept a{ color:var(--acc-text); }
.tapp-od-brands{ display:flex; justify-content:center; }
.tapp-od-brands img{ max-width:100%; }