/* =====================================================================
   Online ödeme (web-online-odeme.php) + ödeme sonucu (odeme-sonuc.php)
   bs-ortak.css üzerine ek stiller · Önek: .oop-*
   Ödeme formu (online-odeme-form.php / online-odeme.css) aynen korunur;
   burada yalnızca çevresindeki görünüm düzenlenir.
   ===================================================================== */

/* ---------- Hero ---------- */
.oop-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.oop-hero h1 { font-size: clamp(32px, 4.4vw, 54px); }
.oop-guven { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.oop-guven li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px; background: rgba(255,255,255,.85); border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g1); font-size: 13.5px; font-weight: 700; color: var(--bo-lac); }
.oop-guven .bi { color: #059669; font-size: 16px; }
.oop-akis { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: o; font-size: 13.5px; font-weight: 600; color: var(--bo-yazi-2); }
.oop-akis li { display: inline-flex; align-items: center; gap: 8px; }
.oop-akis li::before { counter-increment: o; content: counter(o); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--bo-lac); color: #fff; font: 800 13px/1 var(--bo-f-bas); }
.oop-akis li + li::after { order: -1; content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--bo-cizgi-2); margin-right: 2px; }

/* Hero illüstrasyonu: 3D kart + kalkan + 3D Secure telefonu */
.oop-sahne .oop-yuz { animation: oopYuz 6s ease-in-out infinite; transform-box: fill-box; }
.oop-sahne .oop-yuz--2 { animation-duration: 7s; animation-delay: -2.5s; }
.oop-sahne .oop-yuz--3 { animation-duration: 5s; animation-delay: -1s; }
.oop-sahne .oop-kart { animation: oopKart 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.oop-sahne .oop-parilti { animation: oopParilti 4.5s ease-in-out infinite; }
.oop-sahne .oop-nabiz { animation: oopNabiz 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.oop-sahne .oop-akis-cizgi { stroke-dasharray: 5 8; animation: oopAkis 1.3s linear infinite; }
.oop-sahne .oop-kod { animation: oopKod 3s steps(1, end) infinite; }
.oop-sahne .oop-kod:nth-of-type(2) { animation-delay: .25s; } .oop-sahne .oop-kod:nth-of-type(3) { animation-delay: .5s; }
.oop-sahne .oop-kod:nth-of-type(4) { animation-delay: .75s; } .oop-sahne .oop-kod:nth-of-type(5) { animation-delay: 1s; }
.oop-sahne .oop-kod:nth-of-type(6) { animation-delay: 1.25s; }
.oop-sahne .oop-tik { stroke-dasharray: 40; stroke-dashoffset: 40; animation: oopTik 3s ease-in-out infinite; }
@keyframes oopYuz { 50% { transform: translateY(-10px); } }
@keyframes oopKart { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-2.5deg); } }
@keyframes oopParilti { 0%, 30% { transform: translateX(-260px); } 70%, 100% { transform: translateX(300px); } }
@keyframes oopNabiz { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes oopAkis { to { stroke-dashoffset: -26; } }
@keyframes oopKod { 0% { opacity: .25; } 50% { opacity: 1; } }
@keyframes oopTik { 0%, 40% { stroke-dashoffset: 40; } 65%, 100% { stroke-dashoffset: 0; } }

/* ---------- Ödeme formu çevresi ---------- */
.oop-form-bolum { position: relative; padding: 0 0 clamp(36px, 5vw, 64px); scroll-margin-top: 110px; }
.oop-sayfa .oo-page { background: transparent; padding-top: 6px; }
/* Sayfanın H1'i hero'da; formun kendi başlık satırı bu sayfada gizlenir (güven rozetleri hero'da) */
.oop-sayfa .oo-page:not(.oo-page--embed) .oo-bar { display: none; }
.oop-sayfa .oo-card { box-shadow: var(--bo-g2); border-radius: 20px; }
.oop-uyari-kap { padding-top: 16px; }
.oop-uyari-kap .alert { border-radius: 14px; }

/* ---------- Güvenlik kartları / adımlar ---------- */
.oop-adimlar li h3 { margin: 0 0 6px; font-size: 18px; }
.oop-adimlar li p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bo-yazi-2); }
.oop-adimlar li .bi { position: absolute; top: 24px; right: 22px; font-size: 26px; color: var(--bo-lac-3); opacity: .35; }
.oop-guvenlik .bo-kart__ikon { font-size: 22px; }
.oop-sss summary { font-size: 16px; }

/* Telefonda canlı destek düğmesi sabit ödeme çubuğunun üstüne binmesin
   (önceden body.oo-web kuralıyla yapılıyordu; bu sayfa artık kaydırılabilir düzen kullanır) */
@media (max-width: 1023px) {
  body.oop-sayfa .bcc-launcher { bottom: 84px; right: 12px; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  body.oop-sayfa .bcc-launcher > span { display: none; }
}
@media (max-width: 991.98px) {
  .oop-hero .bo-illustrasyon svg { max-width: 340px; }
}
@media (max-width: 575.98px) {
  .oop-hero .bo-illustrasyon svg { max-width: 260px; }
  .oop-akis li + li::after { display: none; }
  .oop-guven li { font-size: 12.5px; padding: 7px 10px; }
}

/* =====================================================================
   Ödeme sonucu (odeme-sonuc.php)
   ===================================================================== */
.oop-sonuc-sayfa { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.oop-sonuc-sayfa .bo-main { flex: 1; display: grid; place-items: center; }
.oop-sonuc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.oop-marka { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 20px/1 var(--bo-f-bas); color: var(--bo-lac); letter-spacing: -.02em; }
.oop-marka span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, var(--bo-lac-2), var(--bo-lac)); font-size: 18px; box-shadow: 0 10px 20px -10px rgba(11,33,80,.7); }
.oop-guvenli { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #047857; }
.oop-sonuc { position: relative; width: min(100%, 560px); margin: 24px auto 48px; padding: clamp(28px, 5vw, 48px); border-radius: 30px; text-align: center; background: #fff; border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g3); animation: oopSonucGel .8s var(--bo-ease) both; }
.oop-sonuc::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: 30px 30px 0 0; }
.oop-sonuc--ok::before { background: linear-gradient(90deg, #10b981, #059669); }
.oop-sonuc--hata::before { background: linear-gradient(90deg, var(--bo-kir), var(--bo-kir-2)); }
.oop-sonuc__rozet { position: relative; width: 120px; height: 120px; margin: 0 auto 18px; }
.oop-sonuc__rozet svg { width: 120px; height: 120px; overflow: visible; }
.oop-sonuc__halka { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 302; stroke-dashoffset: 302; transform: rotate(-90deg); transform-origin: 50% 50%; animation: oopCiz 1s .2s var(--bo-ease) forwards; }
.oop-sonuc__isaret { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; animation: oopCiz .6s .9s var(--bo-ease) forwards; }
.oop-sonuc--ok .oop-sonuc__halka, .oop-sonuc--ok .oop-sonuc__isaret { stroke: #059669; }
.oop-sonuc--hata .oop-sonuc__halka, .oop-sonuc--hata .oop-sonuc__isaret { stroke: var(--bo-kir); }
.oop-sonuc__dalga { position: absolute; inset: 0; border-radius: 50%; animation: oopDalga 2.4s 1s ease-out infinite; opacity: 0; }
.oop-sonuc--ok .oop-sonuc__dalga { box-shadow: 0 0 0 2px rgba(5,150,105,.45); }
.oop-sonuc--hata .oop-sonuc__dalga { box-shadow: 0 0 0 2px rgba(225,37,27,.4); }
.oop-sonuc h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 34px); font-weight: 800; }
.oop-sonuc__ust { margin: 0 0 20px; color: var(--bo-yazi-2); font-size: 15px; }
.oop-sonuc__mesaj { margin: 0; padding: 16px 18px; border-radius: 16px; font-size: 15.5px; font-weight: 600; line-height: 1.6; }
.oop-sonuc--ok .oop-sonuc__mesaj { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.oop-sonuc--hata .oop-sonuc__mesaj { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.oop-sonuc__mesaj small { display: inline-block; margin-top: 6px; font-weight: 500; color: var(--bo-yazi-2) !important; word-break: break-word; }
.oop-sonuc .bo-butonlar { justify-content: center; }
.oop-sonuc__not { margin: 22px 0 0; font-size: 13px; color: var(--bo-yazi-3); }
.oop-sonuc__not a { color: var(--bo-lac-2); font-weight: 700; }
@keyframes oopSonucGel { from { opacity: 0; transform: perspective(1000px) rotateX(-18deg) translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes oopCiz { to { stroke-dashoffset: 0; } }
@keyframes oopDalga { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .oop-sonuc__halka, .oop-sonuc__isaret, .oop-sahne .oop-tik { stroke-dashoffset: 0 !important; }
  .oop-sonuc__dalga, .oop-sahne .oop-parilti { display: none; }
  .oop-sahne .oop-kod { opacity: 1 !important; }
}