/* SAHNE · TAHSİLAT → MAKBUZ → VELİYE BİLDİRİM (includes/scenes/payment-receipt.php) — modül sayfası, kap ~330–680 px. Adımlar:
   s1 «Can Kı» yazılır → sonuç · s2 öğrenci seçilir → kayıtlar · s3 2026-2027 → «Hangi taksit?» + form (sayfa kayar) ·
   s4 7/10. taksit → tutar 37900 · s5 sayfa kayar, «Ödeme yöntemi» → Havale/EFT · s6 dekont no yazılır ·
   s7 «Tahsilatı kaydet» → başarı kartı · s8 «Makbuz (yazdır)» → A5 makbuz · s9 velinin telefonu: «Ödeme alındı».
   Yükseklikler değişkenlerde: kart boyu ve kaydırma miktarları aynı değişkenlerden HESAPLANIR (kap daralınca da doğru). */
.pay { container-type: inline-size; --pay-spring: cubic-bezier(.34, 1.56, .64, 1); --pay-ok: #047857; --pay-go: #059669; }
.pay-win {
  --H: 480px; --bm: 12px; --bh: 52px; --vt: calc(var(--bm) + var(--bh) + 10px); --vh: calc(var(--H) - var(--vt));
  --px: 12px; --cp: 12px; --sb: 30px; --g: 12px; --lb: 19px; --er: 44px; --enb: calc(3 * var(--er) + 10px);
  --tr: 28px; --tkb: calc(5 * var(--tr) + 12px); --fr: 48px; --fg: 10px; --frows: 4; --btn: 32px; --hint: 18px;
  --yf: calc(var(--cp) + var(--sb) + var(--g) + var(--lb) + var(--enb) + var(--g) + var(--lb) + var(--tkb) + var(--g));
  --hc: calc(var(--yf) + var(--frows) * var(--fr) + (var(--frows) - 1) * var(--fg) + var(--fg) + var(--btn) + var(--cp));
  --h0: calc(2 * var(--cp) + var(--lb) + 32px + var(--hint));
  --h1: calc(var(--h0) + 38px);
  --h2: calc(2 * var(--cp) + var(--sb) + var(--g) + var(--lb) + var(--enb));
  /* s3: ilk kayıt satırının hemen üstü; s5: 8/10. taksitin hemen üstü (geniş kap) — satır ortadan kesilmez */
  --sc3: calc(var(--cp) + var(--sb) + var(--g) + var(--lb) - 4px);
  --sc5: calc(var(--yf) - var(--g) - var(--tkb) + 2 * (var(--tr) + 3px) - 2px);
  --shw: 390px; --pw: 224px; --phh: 412px; --pr: 20px; --ptop: 46px;
  position: relative; height: var(--H); background: var(--ui-bg-2);
}
.pay-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: katmanlar aynı ızgara hücresinde; on-A-B = A. adımdan B. adıma kadar görünür */
.pay-x { display: grid; min-width: 0; }
.pay-x > * { grid-area: 1 / 1; min-width: 0; white-space: nowrap; }
.pay [class*="on-"] { opacity: 0; transform: translateY(3px); transition: opacity .25s var(--ui-ease) var(--d, 0s), transform .3s var(--ui-ease) var(--d, 0s); }
.pay:not(.s1) .on-0-1, .pay.s1 .on-1, .pay.s3:not(.s4) .on-3-4, .pay.s4 .on-4, .pay:not(.s5) .on-0-5, .pay.s5 .on-5 { opacity: 1; transform: none; }
.pay.s4 .pay-in--amt [class*="on-"] { --d: .5s; }
.pay.s5 .pay-in--met [class*="on-"] { --d: 1.14s; }

/* imleç: .pay-hit tıklama noktası; ok ucu tam orada, halka dalgası çevresinde */
.pay-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.pay-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.pay-rip { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .55); opacity: 0; }
@keyframes pay-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 36% { opacity: 1; transform: none; scale: 1; } 52% { scale: .8; } 66%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes pay-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 32% { opacity: 1; transform: none; scale: 1; } 46% { scale: .8; } 58% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes pay-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes pay-push { 50% { scale: .95; } }
@keyframes pay-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pay-sheen { from { transform: translateX(-120%); } to { transform: translateX(260%); } }

/* ── başlık bandı (kurum rengi) ── */
.pay-band { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: var(--bh); margin: var(--bm) var(--bm) 0; padding: 0 10px 0 10px; border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(11, 36, 64, .18), 0 10px 20px -14px rgba(11, 36, 64, .7); }
.pay-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pay-ico .pay-i { width: 18px; height: 18px; stroke-width: 1.8; }
.pay-ttl { flex: 1; min-width: 0; }
.pay-ttl b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; line-height: 19px; letter-spacing: -.01em; }
.pay-help { width: 15px; height: 15px; opacity: .72; }
.pay-ttl small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; line-height: 14px; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.pay-back { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px; border-radius: 8px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: 11px; font-weight: 700; white-space: nowrap; }
.pay-back .pay-i { width: 13px; height: 13px; }

/* ── sayfa görünümü (kayan içerik) ── */
.pay-view { position: absolute; left: 0; right: 0; top: var(--vt); bottom: 0; overflow: hidden; }
.pay-view::before, .pay-view::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; pointer-events: none; }
.pay-view::before { top: 0; height: 8px; background: linear-gradient(var(--ui-bg-2), rgba(246, 247, 249, 0)); }
.pay-view::after { bottom: 0; height: 18px; background: linear-gradient(rgba(246, 247, 249, 0), var(--ui-bg-2)); }
.pay-scr { padding: 0 var(--px) 12px; translate: 0 0; transition: translate .6s cubic-bezier(.32, .12, .2, 1) var(--sd, 0s); }
.pay-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); height: var(--h0); padding: var(--cp); border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), 0 14px 28px -22px rgba(16, 37, 64, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: height .5s var(--ui-ease) var(--hd, 0s), opacity .3s var(--ui-ease) var(--od, 0s); }
.pay-st1, .pay-st2 { grid-area: 1 / 1; align-self: start; min-width: 0; transition: opacity .3s var(--ui-ease), translate .4s var(--ui-ease); }
.pay-st2 { opacity: 0; translate: 0 6px; }
.pay-lbl { display: block; height: 14px; margin-bottom: 5px; font-size: 11px; font-weight: 800; line-height: 14px; color: #3f3f46; white-space: nowrap; }
.pay-lbl em { font-style: normal; color: #b91c1c; }
.pay-fld .pay-lbl { margin-bottom: 4px; }
.pay-in { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--ui-text); white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); transition: box-shadow .25s var(--ui-ease) var(--fd, 0s); }
.pay-in > span:first-child, .pay-in .pay-x { flex: 1; min-width: 0; }
.pay-in__ic { width: 13px; height: 13px; color: var(--ui-muted); }

/* adım 1: arama */
.pay-in--q { height: 32px; }
.pay-ph-txt { color: #9aa1ad; font-weight: 600; }
.pay-in--q .pay-hit { left: 64px; top: 17px; }
.pay-typed { display: inline-flex; align-items: center; height: 16px; }
.pay-ch { font-size: 0; line-height: 16px; transition: font-size 0s linear calc(var(--t0, 0s) + var(--k) * var(--tk, 50ms)); }
.pay-caret { display: block; width: 1px; height: 14px; margin-left: 1px; background: var(--navy-soft); opacity: 0; }
.pay-res { display: block; height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: height .3s var(--ui-ease) .75s, margin .3s var(--ui-ease) .75s, opacity .25s var(--ui-ease) .8s; }
.pay-res__row { position: relative; display: flex; align-items: baseline; gap: 5px; height: 34px; padding: 0 10px; border-radius: 8px; line-height: 34px; background: #fff; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ui-line), 0 6px 14px -10px rgba(16, 37, 64, .4); transition: background-color .2s var(--ui-ease) .3s; }
.pay-res__row b { font-size: 11.5px; font-weight: 800; color: var(--ui-text); }
.pay-res__row small { font-size: 10.5px; font-weight: 600; color: var(--ui-muted); }
.pay-res__row .pay-hit { left: 40px; top: 19px; }
.pay-hint { display: block; margin-top: 4px; font-size: 10px; font-weight: 600; line-height: 14px; color: var(--ui-muted); }

/* adım 2: öğrenci şeridi, kayıtlar */
.pay-stu { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--sb); margin-bottom: var(--g); padding: 0 10px; border-radius: 8px; background: #f4f5f7; }
.pay-stu > span { display: flex; align-items: center; gap: 6px; }
.pay-stu .pay-i { width: 14px; height: 14px; color: var(--navy-soft); }
.pay-stu b { font-size: 12px; font-weight: 800; }
.pay-stu small { font-size: 10.5px; font-weight: 700; color: var(--navy-soft); white-space: nowrap; }
.pay-enrs, .pay-insts { display: grid; grid-template-columns: minmax(0, 1fr); }
.pay-enrs { gap: 5px; }
.pay-enr { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; height: var(--er); padding: 0 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2);
  transition: background-color .25s var(--ui-ease) .42s, box-shadow .25s var(--ui-ease) .42s; }
.pay-enr__l1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 18px; }
.pay-enr__ad { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; font-weight: 600; color: var(--ui-muted); }
.pay-enr__ad b { font-size: 12px; font-weight: 800; color: var(--ui-text); }
.pay-enr__ad em { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 4px; background: #ede9fe; color: #6d28d9; font-style: normal; font-size: 10px; font-weight: 800; line-height: 15px; vertical-align: 1px; }
.pay-bak { flex: none; padding: 0 6px; border-radius: 5px; background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800; line-height: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-bak--ok { background: #d1fae5; color: var(--pay-ok); }
.pay-enr > small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-enr .pay-hit { left: 44%; top: 13px; }

/* taksitler + form (kayıt seçilince açılır) */
.pay-more { margin-top: var(--g); }
.pay-more > *, .pay-form > * { opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease), translate .4s var(--ui-ease); }
.pay-insts { gap: 3px; }
.pay-inst { position: relative; display: flex; align-items: center; gap: 8px; height: var(--tr); padding: 0 10px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2);
  opacity: 0; translate: 0 5px; transition: opacity .3s var(--ui-ease), translate .35s var(--ui-ease), background-color .2s var(--ui-ease) var(--rd, 0s), box-shadow .2s var(--ui-ease) var(--rd, 0s); }
.pay-inst > span { min-width: 0; font-size: 11.5px; line-height: 14px; color: var(--ui-text); }
.pay-inst b { font-weight: 800; }
.pay-inst small { font-size: 10px; font-weight: 600; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.pay-rad { position: relative; flex: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #a1a1aa; transition: box-shadow .2s var(--ui-ease) var(--rd, 0s); }
.pay-rad::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--navy-soft); scale: 0; transition: scale .25s var(--pay-spring) var(--rd, 0s); }
.pay-inst--fr, .pay.s4 .pay-inst--t7 { background: #f1f6fc; box-shadow: inset 0 0 0 1.5px var(--navy-soft); }
.pay-inst--fr .pay-rad, .pay.s4 .pay-inst--t7 .pay-rad { box-shadow: inset 0 0 0 1.5px var(--navy-soft); }
.pay-inst--fr .pay-rad::after, .pay.s4 .pay-inst--t7 .pay-rad::after { scale: 1; }
.pay.s4 .pay-inst--fr { background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.pay.s4 .pay-inst--fr .pay-rad { box-shadow: inset 0 0 0 1.5px #a1a1aa; }
.pay.s4 .pay-inst--fr .pay-rad::after { scale: 0; }
.pay.s4 { --rd: .42s; }
.pay-inst .pay-hit { right: 56px; top: 15px; }

.pay-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: var(--fg); margin-top: var(--g); }
.pay-fld { position: relative; display: block; height: var(--fr); min-width: 0; }
.pay-fld--not, .pay-act { grid-column: 1 / -1; }
.pay-fld--met { z-index: 3; }   /* açılır liste sonraki alanların üstünde kalsın (alanlar kendi katmanını açar) */
.pay-act { display: flex; justify-content: flex-end; height: var(--btn); }
.pay-in--sel .pay-hit { right: 32px; top: 17px; }
.pay-in--ref .pay-hit { left: 46px; top: 17px; }
.pay-in--ref { font-family: inherit; letter-spacing: .01em; }
.pay-save { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--btn); padding: 0 14px; border-radius: 9px; background: var(--pay-go); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(4, 120, 87, .3), 0 8px 16px -10px rgba(4, 120, 87, .85); }
.pay-save .pay-i { width: 14px; height: 14px; stroke-width: 2.4; }
.pay-save .pay-hit { right: 30px; top: 18px; }

/* yöntem açılır listesi (yerli seçici) */
.pay-dd { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 3px); display: grid; padding: 4px; border-radius: 9px; background: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .1), 0 2px 4px rgba(16, 37, 64, .08), 0 18px 32px -14px rgba(16, 37, 64, .5); transform-origin: top; }
.pay-dd__o { position: relative; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 22px; color: var(--ui-text); white-space: nowrap; transition: background-color .15s var(--ui-ease) .82s, color .15s var(--ui-ease) .82s; }
.pay-dd__o--cur { background: #f1f2f4; }
.pay-dd__o .pay-hit { left: 52px; top: 12px; }
@keyframes pay-dd { 0%, 38% { opacity: 0; transform: translateY(-4px) scaleY(.96); } 44%, 88% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }

/* başarı kartı */
.pay-ok { position: absolute; z-index: 5; left: var(--px); right: var(--px); top: 2px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #ecfdf5;
  box-shadow: inset 0 0 0 1.5px #a7f3d0, 0 12px 26px -20px rgba(4, 120, 87, .6); opacity: 0; translate: 0 10px; scale: .98;
  transition: opacity .3s var(--ui-ease), translate .5s var(--pay-spring), scale .5s var(--pay-spring); }
.pay-ok__ic { width: 22px; height: 22px; margin-top: 1px; color: var(--pay-ok); stroke-width: 2; }
.pay-ok__b { flex: 1; min-width: 0; }
.pay-ok__b > b { display: block; font-size: 13px; font-weight: 800; line-height: 17px; color: #064e3b; }
.pay-ok__b > span:not(.pay-ok__acts) { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; line-height: 15px; color: #065f46; }
.pay-ok__b strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.pay-ok__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pay-b1, .pay-b2 { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 9px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.pay-b1 { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -8px rgba(20, 61, 107, .8); }
.pay-b2 { background: #fff; color: #3f3f46; box-shadow: inset 0 0 0 1px #d4d4d8; }
.pay-b1 .pay-i, .pay-b2 .pay-i { width: 13px; height: 13px; }
.pay-b1 .pay-hit { right: 28px; top: 16px; }

/* ── A5 makbuz (yeni sekme) ── */
.pay-tab { position: absolute; z-index: 8; inset: 0; background: #eceef2; opacity: 0; translate: 0 26px; pointer-events: none;
  transition: opacity .3s var(--ui-ease), translate .55s cubic-bezier(.3, 1.2, .5, 1); }
.pay-tbar { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 10px 0 14px; background: #fff; box-shadow: 0 1px 0 #e4e4e7, 0 1px 3px rgba(0, 0, 0, .04); }
.pay-geri { font-size: 11.5px; font-weight: 800; color: #3f3f46; }
.pay-prn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.pay-prn .pay-i { width: 13px; height: 13px; }
.pay-sheet { position: absolute; top: 50px; bottom: -8px; left: calc((100cqw - 2px - var(--shw)) / 2); width: var(--shw); padding: 16px 18px; border-radius: 6px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px #e4e4e7, 0 2px 12px rgba(0, 0, 0, .06), 0 20px 40px -24px rgba(16, 37, 64, .45); transition: translate .6s var(--ui-ease) .05s, opacity .4s var(--ui-ease); }
.pay-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); }
.pay-sheet > * { opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(.5s + var(--i, 0) * 70ms), translate .4s var(--ui-ease) calc(.5s + var(--i, 0) * 70ms); }
.pay-sheet > :nth-child(2) { --i: 1; } .pay-sheet > :nth-child(3) { --i: 2; } .pay-sheet > :nth-child(4) { --i: 3; } .pay-sheet > :nth-child(5) { --i: 4; }
.pay-sh__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pay-sh__org { min-width: 0; }
.pay-sh__org b { display: block; font-size: 11.5px; font-weight: 700; line-height: 15px; color: #3f3f46; }
.pay-sh__org .pay-sh__t { margin-bottom: 3px; font-size: 15px; font-weight: 900; line-height: 19px; letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.pay-sh__org small { display: block; font-size: 10px; font-weight: 500; line-height: 13px; color: #52525b; }
.pay-sh__no { flex: none; text-align: right; }
.pay-sh__no em { display: inline-block; padding: 0 7px; border-radius: 999px; background: #e3ecf7; color: var(--navy); font-style: normal; font-size: 10px; font-weight: 800; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; }
.pay-sh__no b { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 900; line-height: 17px; font-variant-numeric: tabular-nums; }
.pay-sh__no small { display: block; margin-top: 3px; font-size: 10px; line-height: 13px; color: #71717a; }
.pay-sh__no strong { display: block; font-size: 11.5px; font-weight: 800; line-height: 15px; font-variant-numeric: tabular-nums; }
.pay-sh__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding: 7px 10px; border-radius: 6px; background: #fafafa; box-shadow: inset 0 0 0 1px #e4e4e7;
  font-size: 11px; font-weight: 500; line-height: 14px; color: #18181b; }
.pay-sh__meta small { display: block; margin-bottom: 1px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #71717a; }
.pay-sh__meta i { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: #52525b; white-space: nowrap; }
.pay-amt { position: relative; margin-top: 12px; padding: 9px 12px 10px; border-radius: 8px; text-align: center; overflow: hidden; background: linear-gradient(180deg, #edf3fa, #fff); box-shadow: inset 0 0 0 2px var(--navy-soft); }
.pay-amt::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); transform: translateX(-120%); }
.pay-amt small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .05em; line-height: 13px; text-transform: uppercase; color: var(--navy-soft); }
.pay-amt b { display: block; margin-top: 2px; font-size: 23px; font-weight: 900; line-height: 28px; letter-spacing: -.01em; color: var(--navy-night); font-variant-numeric: tabular-nums; }
.pay-amt i { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; line-height: 13px; color: #52525b; }
.pay-sec { margin-top: 11px; }
.pay-sec__h { display: block; padding-bottom: 3px; margin-bottom: 5px; border-bottom: 1px solid #e4e4e7; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 13px; text-transform: uppercase; color: #71717a; }
.pay-kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); row-gap: 2px; font-size: 11px; line-height: 15px; }
.pay-kv b { font-weight: 600; color: #52525b; }
.pay-kv > span { font-weight: 800; color: #18181b; white-space: nowrap; }
.pay-mono { font: 700 10.5px/15px ui-monospace, "SFMono-Regular", Consolas, monospace; }
.pay-pt { display: flex; justify-content: space-between; gap: 8px; height: 21px; padding: 0 6px; border-bottom: 1px solid #f0f0f2; font-size: 10.5px; line-height: 21px; color: #27272a; white-space: nowrap; }
.pay-pt b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-pt--h { height: 18px; background: #fafafa; font-size: 10px; font-weight: 800; line-height: 18px; letter-spacing: .04em; text-transform: uppercase; color: #71717a; }

/* ── velinin telefonu ── */
.pay-phone { position: absolute; z-index: 9; right: var(--pr); top: var(--ptop); width: var(--pw); height: var(--phh); padding: 6px; border-radius: 34px; background: linear-gradient(160deg, #26324a, #0b1322 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 4px rgba(11, 19, 34, .25), 0 30px 50px -22px rgba(11, 19, 34, .7);
  opacity: 0; translate: 0 70px; transition: opacity .35s var(--ui-ease), translate .7s cubic-bezier(.3, 1.25, .5, 1); }
.pay-scrn { position: relative; height: 100%; overflow: hidden; border-radius: 28px; background: #f5f6f8; }
.pay-sb { position: relative; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 14px 0 20px; color: #0b1526; }
.pay-sb > b { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pay-isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 16px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.pay-sbi { display: flex; align-items: center; gap: 3px; }
.pay-sbi .pay-i { width: 11px; height: 11px; stroke-width: 2.4; }
.pay-sbi .pay-bat { width: 16px; height: 12px; }
.pay-ph { padding: 0 10px; }
.pay-ph__hd { display: flex; align-items: center; gap: 8px; height: 34px; color: #273246; }
.pay-ph__hd > .pay-i { width: 16px; height: 16px; }
.pay svg.pay-logo { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 2px 5px -1px rgba(16, 37, 64, .4); }
.pay-ph__sp { flex: 1; }
.pay-ph__bell { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.pay-ph__bell .pay-i { width: 15px; height: 15px; }
.pay-ph__bell::after { content: ""; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #f5f6f8; }
.pay-ph__av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 1px #e4e7ec, 0 2px 4px -2px rgba(16, 37, 64, .3); }
.pay-ph__kids { display: flex; gap: 6px; margin-top: 4px; }
.pay-ph__kids > span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 3px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; color: #3f3f46; box-shadow: inset 0 0 0 1px #e4e7ec; }
.pay-ph__kids i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 800; color: var(--navy-soft); }
.pay-ph__kids .on { background: var(--navy); color: #fff; box-shadow: 0 4px 10px -6px rgba(20, 61, 107, .8); }
.pay-ph__kids .on i { background: rgba(255, 255, 255, .2); color: #fff; }
.pay-ph__t { display: block; margin-top: 9px; font-size: 16px; font-weight: 800; line-height: 19px; letter-spacing: -.015em; color: #0f172a; }
.pay-ph__lead { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--ui-muted); white-space: nowrap; }
.pay-ph__st { display: flex; gap: 6px; margin: 9px -10px 0 0; overflow: hidden; }
.pay-sc { flex: none; display: block; width: 88px; height: 64px; padding: 6px 7px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e8ebf0, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pay-sc i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; }
.pay-sc i .pay-i { width: 12px; height: 12px; }
.pay-sc .sky { background: #e0f2fe; color: #0369a1; } .pay-sc .em { background: #d1fae5; color: #047857; } .pay-sc .am { background: #fef3c7; color: #b45309; }
.pay-sc b { display: block; margin-top: 6px; font-size: 11px; font-weight: 800; line-height: 13px; letter-spacing: -.01em; color: #0f172a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-sc small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; line-height: 12px; color: var(--ui-muted); }
.pay-ph__sec { display: flex; align-items: baseline; justify-content: space-between; margin-top: 11px; }
.pay-ph__sec b { font-size: 12px; font-weight: 800; color: #0f172a; }
.pay-ph__sec small { font-size: 10px; font-weight: 700; color: var(--ui-muted); }
.pay-ph__list { margin-top: 6px; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px #e8ebf0, 0 1px 2px rgba(16, 37, 64, .05); }
.pay-pr { display: flex; align-items: center; gap: 7px; padding: 6px 8px; box-shadow: inset 0 -1px 0 #f0f1f4; }
.pay-pr > i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fef3c7; color: #b45309; }
.pay-pr > i .pay-i { width: 12px; height: 12px; }
.pay-pr > span { flex: 1; min-width: 0; }
.pay-pr b { display: block; font-size: 11px; font-weight: 800; line-height: 13px; color: #0f172a; }
.pay-pr small { display: block; font-size: 10px; font-weight: 600; line-height: 12px; color: var(--ui-muted); white-space: nowrap; }
/* ayrı hesap adı: geniş kapta ikinci satır (uygulamadaki gibi sonu «…» ile kesik), ≤660 kapta çizilmez */
.pay-pr__h { display: block; overflow: hidden; text-overflow: ellipsis; }
.pay-pr em { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.pay-home { position: absolute; left: 50%; bottom: 6px; width: 70px; height: 4px; margin-left: -35px; border-radius: 2px; background: rgba(11, 21, 38, .55); }
/* bildirim (anlık + uygulama içi, payment.received) */
/* üst: adanın 3 px altı; boy (4 satır × 13 + 15 iç boşluk) «Ödemeler» başlığının üstünde biter — Ö'nün noktaları örtülmez */
.pay-nt { position: absolute; z-index: 3; left: 6px; right: 6px; top: 25px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 7px 9px 8px 8px; border-radius: 15px;
  background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 2px 4px rgba(16, 37, 64, .08), 0 20px 34px -14px rgba(16, 37, 64, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10px; font-weight: 500; line-height: 13px; color: var(--ui-text-2); opacity: 0; translate: 0 -130%; transition: opacity .3s var(--ui-ease), translate .7s cubic-bezier(.34, 1.4, .64, 1); }
.pay-nt img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.pay-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.pay-nt__h b { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; color: var(--ui-text); }
.pay-nt__h em { flex: none; font-style: normal; font-size: 10px; color: var(--ui-muted); }
.pay-tag { position: absolute; z-index: 4; left: 50%; bottom: -9px; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px 0 6px; border-radius: 999px; background: var(--sun); color: var(--sun-ink, #2a1c00);
  font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16, 37, 64, .45); opacity: 0; scale: .7; transition: opacity .3s var(--ui-ease), scale .45s var(--pay-spring); }
.pay-tag .pay-i { width: 11px; height: 11px; stroke-width: 2.4; }

/* ══ ADIMLAR ══ */
/* s1: arama kutusuna tıklanır, «Can Kı» yazılır, sonuç düşer */
.pay.s1:not(.s2) .pay-hit--q .ui-cur { animation: pay-cur-out .8s var(--ui-ease) both; }
.pay.s1:not(.s2) .pay-hit--q .pay-rip { animation: pay-rip .5s ease-out .3s both; }
.pay.s1:not(.s2) .pay-in--q { --fd: .32s; box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); }
.pay.s1 .pay-typed--q .pay-ch { --t0: .5s; font-size: 11.5px; }
.pay.s1:not(.s2) .pay-typed--q .pay-caret { animation: pay-blink .9s step-end .4s infinite; }
.pay.s1 .pay-res { height: 34px; margin-top: 4px; opacity: 1; }
.pay.s1 { --hd: .75s; }
.pay.s1 .pay-card { height: var(--h1); }
/* s2: sonuca tıklanır → kayıtlar */
.pay.s2:not(.s3) .pay-hit--res .ui-cur { animation: pay-cur .8s var(--ui-ease) both; }
.pay.s2:not(.s3) .pay-hit--res .pay-rip { animation: pay-rip .5s ease-out .32s both; }
.pay.s2 .pay-res__row { background: #f1f6fc; }
.pay.s2 .pay-st1 { opacity: 0; translate: 0 -6px; transition-delay: .5s; }
.pay.s2 .pay-st2 { opacity: 1; translate: 0 0; transition-delay: .58s; }
.pay.s2 { --hd: .5s; }
.pay.s2 .pay-card { height: var(--h2); }
.pay-enr { opacity: 0; translate: 0 5px; }
.pay.s2 .pay-enr { opacity: 1; translate: 0 0; transition: opacity .3s var(--ui-ease) calc(.68s + var(--i) * 70ms), translate .4s var(--ui-ease) calc(.68s + var(--i) * 70ms), background-color .25s var(--ui-ease) .42s, box-shadow .25s var(--ui-ease) .42s; }
/* s3: 2026-2027 kaydı seçilir → taksitler + form, sayfa kayar */
.pay.s3:not(.s4) .pay-hit--enr .ui-cur { animation: pay-cur .8s var(--ui-ease) both; }
.pay.s3:not(.s4) .pay-hit--enr .pay-rip { animation: pay-rip .5s ease-out .32s both; }
.pay.s3 .pay-enr--k1 { background: #f1f6fc; box-shadow: inset 0 0 0 1.5px var(--navy-soft); }
.pay.s3 { --hd: .45s; }
.pay.s3 .pay-card { height: var(--hc); }
.pay.s3 .pay-more > *, .pay.s3 .pay-form > * { opacity: 1; translate: 0 0; transition-delay: calc(.55s + var(--i, 0) * 60ms); }
.pay.s3 .pay-more > .pay-insts, .pay.s3 .pay-inst { opacity: 1; translate: 0 0; }
.pay.s3 .pay-inst { transition: opacity .3s var(--ui-ease) calc(.6s + var(--i) * 55ms), translate .35s var(--ui-ease) calc(.6s + var(--i) * 55ms), background-color .2s var(--ui-ease) var(--rd, 0s), box-shadow .2s var(--ui-ease) var(--rd, 0s); }
.pay.s3 .pay-form { --i: 6; }
.pay.s3 .pay-form > * { transition-delay: calc(.9s + var(--i) * 45ms); }
.pay.s3 .pay-scr { --sd: .75s; translate: 0 calc(-1 * var(--sc3)); }
/* s4: 7/10. taksit → tutar 37900 */
.pay.s4:not(.s5) .pay-hit--ins .ui-cur { animation: pay-cur .8s var(--ui-ease) both; }
.pay.s4:not(.s5) .pay-hit--ins .pay-rip { animation: pay-rip .5s ease-out .32s both; }
/* tutar alanına odak VERİLMEZ (admin-collection-new.php:333–341 yalnız değeri yazar) — değer yalnız çapraz geçişle değişir */
/* s5: sayfa formun sonuna kayar; yöntem açılır → Havale/EFT. Tek imleç: seçicideki .76 s'de söner, seçenekteki .8 s'de girer.
   Zaman çizelgesi: seçiciye basış .42–.49 · liste .49–.57 açılır · seçeneğe basış 1.02–1.12 · liste 1.14–1.21 kapanır · değer 1.14 */
.pay.s5 .pay-scr { --sd: 0s; translate: 0 calc(-1 * var(--sc5)); transition-duration: .5s; }
.pay.s5:not(.s6) .pay-hit--met .ui-cur { animation: pay-cur-out .5s var(--ui-ease) .26s both; }
.pay.s5:not(.s6) .pay-hit--met .pay-rip { animation: pay-rip .5s ease-out .45s both; }
.pay.s5:not(.s6) .pay-dd { animation: pay-dd 1.3s linear both; }
.pay.s5:not(.s6) .pay-dd__o { transition-delay: .9s; }
.pay.s5:not(.s6) .pay-dd__o--hv { background: var(--navy-soft); color: #fff; }
.pay.s5:not(.s6) .pay-dd__o--cur { background: transparent; }
.pay.s5:not(.s6) .pay-hit--opt .ui-cur { animation: pay-cur-out .7s var(--ui-ease) .8s both; }
.pay.s5:not(.s6) .pay-hit--opt .pay-rip { animation: pay-rip .5s ease-out 1.05s both; }
.pay.s5:not(.s6) .pay-in--met { --fd: .46s; box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); }
/* s6: dekont numarası yazılır */
.pay.s6:not(.s7) .pay-hit--ref .ui-cur { animation: pay-cur-out .8s var(--ui-ease) both; }
.pay.s6:not(.s7) .pay-hit--ref .pay-rip { animation: pay-rip .5s ease-out .32s both; }
.pay.s6:not(.s7) .pay-in--ref { --fd: .35s; box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); }
.pay.s6 .pay-typed--ref .pay-ch { --t0: .5s; --tk: 38ms; font-size: 11px; }
.pay.s6:not(.s7) .pay-typed--ref .pay-caret { animation: pay-blink .9s step-end .45s infinite; }
/* s7: «Tahsilatı kaydet» → başarı kartı, sayfa başa döner */
.pay.s7:not(.s8) .pay-hit--save .ui-cur { animation: pay-cur .8s var(--ui-ease) both; }
.pay.s7:not(.s8) .pay-hit--save .pay-rip { animation: pay-rip .5s ease-out .34s both; }
.pay.s7 .pay-save { animation: pay-push .3s var(--ui-ease) .36s; }
.pay.s7 { --od: .52s; }
.pay.s7 .pay-card { opacity: 0; }
.pay.s7 .pay-scr { --sd: .85s; translate: 0 0; transition-duration: .01s; }
.pay.s7 .pay-ok { opacity: 1; translate: 0 0; scale: 1; transition-delay: .5s; }
/* s8: «Makbuz (yazdır)» → A5 makbuz yeni sekmede */
.pay.s8:not(.s9) .pay-hit--rc .ui-cur { animation: pay-cur .8s var(--ui-ease) both; }
.pay.s8:not(.s9) .pay-hit--rc .pay-rip { animation: pay-rip .5s ease-out .32s both; }
.pay.s8 .pay-b1 { animation: pay-push .3s var(--ui-ease) .34s; }
.pay.s8 .pay-tab { opacity: 1; translate: 0 0; transition-delay: .55s; }
.pay.s8 .pay-sheet > * { opacity: 1; translate: 0 0; }
.pay.s8 .pay-amt::after { animation: pay-sheen 1s ease-in-out 1.55s both; }
/* s9: velinin telefonu yükselir, bildirim düşer */
.pay.s9 .pay-sheet { translate: calc(16px - (100cqw - 2px - var(--shw)) / 2) 0; }
.pay.s9 .pay-phone { opacity: 1; translate: 0 0; transition-delay: .2s; }
.pay.s9 .pay-nt { opacity: 1; translate: 0 0; transition-delay: .85s; }
.pay.s9 .pay-tag { opacity: 1; scale: 1; transition-delay: 1.45s; }

/* ══ DAR KAPLAR ══ */
@container (max-width: 660px) {
  .pay-win { --shw: 360px; --pw: 210px; --phh: 404px; --ptop: 48px; --pr: 14px; }
  .pay-sc { width: 88px; padding: 6px 7px; }
  .pay-sc b { font-size: 10.5px; }
  .pay-pr__h { display: none; }
}
@container (max-width: 600px) {
  /* telefon makbuzun yanına sığmaz: makbuz yerinde kalır, telefon önüne biner */
  .pay-win { --phh: 344px; --ptop: 114px; }
  .pay.s9 .pay-sheet { translate: 0 0; opacity: .9; }
  /* kısa telefonda üçüncü taksit ekranın altında ortadan kesilirdi: yalnız ilk ikisi */
  .pay-ph__list .pay-pr:nth-child(3) { display: none; }
}
@container (max-width: 470px) {
  .pay-win { --H: 480px; --bm: 10px; --bh: 50px; --px: 10px; --cp: 10px; --g: 10px; --er: 42px; --enb: calc(2 * var(--er) + 5px); --tr: 36px; --tkb: calc(5 * var(--tr) + 12px);
    --frows: 6; --hint: 31px; --sc5: max(0px, var(--hc) + 12px - var(--vh)); --shw: calc(100cqw - 22px); --pw: 196px; --phh: 324px; --ptop: 144px; --pr: 10px; }
  .pay-band { gap: 8px; padding: 0 8px 0 12px; }
  .pay-ico { display: none; }
  .pay-ttl b { font-size: 14px; }
  .pay-ttl small { font-size: 10.5px; line-height: 13px; white-space: normal; }
  .pay-back { width: 28px; padding: 0; justify-content: center; }
  .pay-back span { display: none; }
  .pay-hint { line-height: 13px; }
  .pay-enr--k2 { display: none; }
  .pay-enr__ur { display: none; }
  .pay-inst { align-items: center; }
  .pay-inst > span { line-height: 14px; }
  .pay-form { grid-template-columns: minmax(0, 1fr); }
  .pay-ok { padding: 11px 12px; gap: 8px; }
  .pay-ok__ic { width: 20px; height: 20px; }
  .pay-sheet { top: 48px; padding: 14px 14px; }
  .pay-sh__org .pay-sh__t { font-size: 13.5px; }
  .pay-sh__no b { font-size: 12.5px; }
  .pay-sh__meta { gap: 8px; padding: 7px 9px; }
  .pay-amt b { font-size: 21px; }
  .pay-kv { grid-template-columns: 104px minmax(0, 1fr); }
  .pay.s9 .pay-sheet { opacity: .85; }
  .pay-phone { padding: 5px; border-radius: 31px; }
  .pay-scrn { border-radius: 26px; }
  /* liste ~11 px yukarı: ikinci taksitin yazısı ana çubuğun (home) üstünde boşlukla biter */
  .pay-ph__st { margin-top: 7px; }
  .pay-sc { width: 80px; height: 60px; padding-top: 5px; }
  .pay-sc b { margin-top: 5px; font-size: 10px; }
  .pay-ph__sec { margin-top: 8px; }
  .pay-ph__list { margin-top: 5px; }
  .pay-ph__list .pay-pr { gap: 6px; padding: 5px 7px; }
  .pay-pr > i { width: 20px; height: 20px; }
  .pay-pr em { font-size: 10px; }
}