/* Odeme formu (body.v2). stil.css uzerine yuklenir; eczane sayfasi ayrica eczane.css yukler. */

.v2 {
  --kart: #ffffff;
  --kart-cizgi: #e3e8ee;
  --golge: 0 1px 2px rgba(20, 36, 58, .04), 0 10px 30px -18px rgba(20, 36, 58, .22);
  --secili: #0060aa;
  --secili-zemin: #f2f7fc;
  --ok: #157347;
  --ok-zemin: #e7f4ec;
  --rk: 14px;
  background: linear-gradient(180deg, #e9f1f9 0, #f3f4f6 340px) no-repeat, #f3f4f6;
}

.v2 .sayfa { max-width: 1120px; }
.v2 .ust { padding-top: 18px; }
.v2 .ust img { height: 56px; }

/* ---------- Baslik ve adimlar ---------- */

.v2-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 34px 0 22px; }
.v2-baslik h1 { font-size: 34px; letter-spacing: -.015em; }

.adimlar { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; font-size: 13px; color: var(--soluk); }
.adimlar li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--kart-cizgi); transition: background .15s, color .15s, border-color .15s; }
.adim-no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: var(--cizgi-acik); color: var(--soluk); transition: background .15s, color .15s; }
.adimlar li.aktif { color: var(--murekkep); border-color: #c5dbef; background: #fff; }
.adimlar li.aktif .adim-no { background: var(--secili); color: #fff; }
.adimlar li.tamam { color: var(--ok); }
.adimlar li.tamam .adim-no { background: var(--ok); color: #fff; font-size: 0; }
.adimlar li.tamam .adim-no::after { content: "✓"; font-size: 12px; }

/* ---------- Izgara ve kartlar ---------- */

.v2 .izgara { margin-top: 0; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; }
.v2-ana { display: grid; gap: 18px; }

.kart { background: var(--kart); border: 1px solid var(--kart-cizgi); border-radius: var(--rk); box-shadow: var(--golge); padding: 24px 26px 8px; }
.kart-ust { margin-bottom: 18px; }
.kart-ust h2 { font-size: 19px; }
.kart-ust p { color: var(--soluk); font-size: 13.5px; margin-top: 4px; max-width: 60ch; }
.istege-bagli { color: var(--soluk); font-weight: 400; }

.v2 input[type=text], .v2 input[type=email], .v2 input[type=tel], .v2 textarea { border-radius: 10px; background: #fbfcfd; }
.v2 input:focus, .v2 textarea:focus { background: #fff; }
.v2 .alan.gecerli input, .v2 .alan.gecerli textarea { border-color: #9fd3b4; }
.v2 .alan.hatali input, .v2 .alan.hatali textarea { border-color: #e8a9a3; }
.v2 .hata-metin[hidden] { display: none; }

/* Bilgi alanlari: iki sutun; "genis" alanlar tum satiri kaplar. Sira yonteme gore JS ile degisir. */
.bilgi-alanlar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.bilgi-alanlar .genis { grid-column: 1 / -1; }

.kurumsal-sec { margin: 4px 0 14px; }
.kurumsal-alanlar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 16px 16px 0; margin-bottom: 18px;
  border: 1px solid var(--kart-cizgi); border-radius: 12px; background: #fbfcfd; }
.kurumsal-alanlar[hidden] { display: none; }
.kurumsal-alanlar .genis { grid-column: 1 / -1; }
.hatirla { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin: 2px 0 18px; cursor: pointer; }
.hatirla input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--secili); }
.hatirla small { display: block; color: var(--soluk); font-size: 12.5px; margin-top: 2px; }

/* ---------- Yontem secimi ---------- */

.yontemler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.yontem { display: flex; gap: 12px; align-items: flex-start; text-align: left; font: inherit; color: var(--murekkep); background: #fbfcfd;
  border: 1.5px solid var(--kart-cizgi); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.yontem:hover { border-color: #b9c9da; }
.yontem[aria-selected=true] { border-color: var(--secili); background: var(--secili-zemin); box-shadow: 0 0 0 3px rgba(0, 96, 170, .10); }
.yontem-ikon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--cizgi-acik); color: var(--soluk); }
.yontem-ikon svg { width: 22px; height: 22px; }
.yontem[aria-selected=true] .yontem-ikon { background: var(--secili); color: #fff; }
.yontem-metin strong { display: block; font-size: 15px; font-weight: 600; }
.yontem-metin small { display: block; color: var(--soluk); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }

.panel-not { color: var(--soluk); font-size: 13.5px; margin: -4px 0 16px; }

/* ---------- Urun kartlari ---------- */

/* Urunler alt alta: her satirda solda ad ve fiyat, sagda adet secici */
.urun-izgara { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.urun-kart { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 16px;
  border: 1.5px solid var(--kart-cizgi); border-radius: 12px; background: #fbfcfd; transition: border-color .15s, box-shadow .15s, background .15s; }
.urun-kart:hover { border-color: #c8d3de; }
.urun-kart.secili { border-color: var(--secili); background: var(--secili-zemin); box-shadow: 0 0 0 3px rgba(0, 96, 170, .10); }
.urun-bilgi { min-width: 0; }
.v2 .urun-ad { font-weight: 700; font-size: 15px; line-height: 1.3; }
.v2 .urun-birim { font-size: 13px; color: var(--soluk); font-variant-numeric: tabular-nums; margin-top: 2px; }
.urun-kart .adet { flex: 0 0 auto; grid-template-columns: 40px 56px 40px; border-radius: 10px; background: #fff; }
.urun-kart.secili .adet { border-color: #9cc2e3; }

/* ---------- Tutar girisi ---------- */

.tutar-kutu { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 16px; border-radius: 12px; background: var(--sayfa); margin-bottom: 14px; }
.tutar-kutu .alan { margin: 0; flex: 1 1 220px; }
.tutar-giris { position: relative; max-width: 280px; }
.tutar-giris input { font-family: var(--baslik); font-size: 22px !important; font-weight: 700; padding-right: 46px !important; font-variant-numeric: tabular-nums; }
.tutar-giris .birim { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--soluk); font-weight: 500; }
.tutar-kutu .dugme { width: auto; margin-top: 27px; padding: 12px 18px; }
.tutar-sonuc { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.tutar-sonuc.ok { background: var(--ok-zemin); color: var(--ok); border: 1px solid #b9dfc8; }
.tutar-sonuc.yok { background: #fbeae9; color: #7d1b16; border: 1px solid #f1c6c2; }
.tutar-sonuc.bekle { background: var(--mavi-acik); color: #123d63; border: 1px solid #c5dbef; }

/* ---------- Ozet ---------- */

.v2 .makbuz-sarmal { top: 20px; }
.v2 .makbuz { border-radius: var(--rk); border-color: var(--kart-cizgi); box-shadow: var(--golge); padding: 24px; }
.v2 .makbuz h2 { font-family: var(--baslik); font-weight: 700; font-size: 17px; color: var(--murekkep); }
.v2 .makbuz-satir .k { overflow-wrap: anywhere; }

.eksikler { list-style: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: #fff8ec; border: 1px solid #f3dfb8; font-size: 13px; color: var(--uyari-metin); }
.eksikler:empty { display: none; }
.eksikler::before { content: "Ödemeye geçmeden önce"; display: block; font-weight: 600; margin-bottom: 4px; color: #6a4100; }
.eksikler li { padding: 3px 0 3px 18px; position: relative; }
.eksikler li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: #e0a43a; }
.eksikler button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.eksikler button:focus-visible { outline: 2px solid var(--mavi); border-radius: 3px; }

.v2 #gonder { gap: 10px; padding: 14px 20px; border-radius: 10px; font-size: 15.5px; }
.v2 #gonder svg { width: 18px; height: 18px; }

.guven { margin-top: 16px; display: grid; gap: 8px; font-size: 12.5px; color: var(--soluk); }
.guven-satir { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.guven-satir svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ok); margin-top: 1px; }
.guven-satir strong { color: var(--murekkep); font-weight: 500; }
.kart-markalar { display: flex; gap: 6px; margin-top: 4px; }
.kart-markalar span { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--kart-cizgi); color: #44546a; background: #fbfcfd; }

/* ---------- Mobil ---------- */

@media (max-width: 960px) {
  .v2 .izgara { grid-template-columns: 1fr; }
  .v2 .makbuz { margin-top: 0; box-shadow: var(--golge); }
}
@media (max-width: 860px) {
  .v2 .alt-cubuk { border-radius: 16px 16px 0 0; }
  .v2 .alt-cubuk .dugme { border-radius: 10px; }
}
@media (max-width: 620px) {
  .v2-baslik { margin: 24px 0 16px; }
  .v2-baslik h1 { font-size: 27px; }
  .adimlar { width: 100%; justify-content: space-between; }
  .adimlar li { padding: 5px 10px 5px 5px; font-size: 12px; }
  .kart { padding: 20px 16px 4px; border-radius: 12px; }
  .yontemler { grid-template-columns: 1fr; }
  .bilgi-alanlar, .kurumsal-alanlar { grid-template-columns: 1fr; }
  .v2 .ust img { height: 46px; }
  .urun-kart { padding: 10px 10px 10px 14px; gap: 12px; }
  .urun-kart .adet { grid-template-columns: 36px 46px 36px; }
  .tutar-kutu .dugme { margin-top: 0; width: 100%; }
}
@media (max-width: 380px) {
  .adimlar li span:not(.adim-no) { display: none; }
  .adimlar { justify-content: flex-start; }
}