/* SAHNE · ÜCRET, SÖZLEŞME VE TAKSİT PLANI (includes/scenes/fee-plan.php) — adımlar:
   s0 «4. Ödeme Planı (Karma)»: tek Nakit satırı, toplam yeşil · s1 tutar 65000 → toplam kırmızı · s2 «Ödeme türü ekle»: kalan
   360000 kendiliğinden, toplam yeşil · s3 yöntem «Kredi Kartı» · s4 taksit 8 · s5 «Devam →» → «5. Onay» · s6 «Sözleşme oluştur»
   → kayıt detayı · s7 «Oluştur» → MEB sözleşmesinin ödeme tablosu kayıttan dolar. Önek: fee- */
.fee { container-type: inline-size; --d: 0s; --fee-bh: 392px; --fee-ok: #059669; --fee-bad: #dc2626;
  --fee-spring: cubic-bezier(.34, 1.56, .64, 1); --fee-z: #e4e4e7; --fee-z2: #d4d4d8; --fee-mut: #71717a; }
.fee.s1 { --d: .78s; } .fee.s2 { --d: .42s; } .fee.s3 { --d: 1.22s; } .fee.s4 { --d: .5s; } .fee.s5 { --d: .48s; } .fee.s6 { --d: .55s; } .fee.s7 { --d: .5s; }
.fee-win { position: relative; border-radius: 14px; }
.fee-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ı hücrede; kAB = A. adımdan B. adıma kadar görünür (9 = sona dek) */
.fee-x { display: inline-grid; min-width: 0; vertical-align: top; }
.fee-x > * { grid-area: 1 / 1; min-width: 0; }
.fee-v { opacity: 0; transform: translateY(3px); transition: opacity .28s var(--ui-ease) var(--d), transform .34s var(--ui-ease) var(--d); }
.fee:not(.s1) .k01, .fee.s1 .k19, .fee.s1:not(.s2) .k12, .fee.s2 .k29, .fee:not(.s3) .k03, .fee.s3 .k39, .fee:not(.s4) .k04, .fee.s4 .k49,
.fee:not(.s6) .k06, .fee.s6 .k69 { opacity: 1; transform: none; }
/* alan içindeki değer değişimi üst üste binmez: eski söner, sonra yenisi gelir */
.fee-in .fee-v { transform: none; transition: opacity .14s linear var(--d); }
.fee.s1 .fee-in .k19, .fee.s3 .fee-in .k39, .fee.s4 .fee-in .k49 { transition-delay: calc(var(--d) + .14s); }

/* imleç: .fee-hit tıklama noktası; ok ucu tam orada, halka dalgası çevresinde */
.fee-hit { position: absolute; z-index: 9; width: 0; height: 0; pointer-events: none; }
.fee-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); }
.fee-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 fee-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 48% { scale: .8; } 62%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes fee-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 30% { opacity: 1; transform: none; scale: 1; } 44% { scale: .8; } 56% { scale: 1; } 74% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes fee-cur-dd { 0% { opacity: 0; transform: translate(14px, 12px); translate: 0 0; } 22% { opacity: 1; transform: none; scale: 1; } 30% { scale: .8; } 38% { scale: 1; translate: 0 0; }
  60% { translate: 0 var(--fee-dy); scale: 1; } 67% { scale: .8; } 74% { scale: 1; } 86% { opacity: 1; transform: none; translate: 0 var(--fee-dy); } 100% { opacity: 0; transform: none; translate: 0 var(--fee-dy); } }
@keyframes fee-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes fee-push { 50% { scale: .95; } }
@keyframes fee-fill { 0% { background-color: rgba(255, 199, 44, 0); } 18% { background-color: rgba(255, 199, 44, .45); } 100% { background-color: rgba(255, 199, 44, 0); } }
@keyframes fee-caret { 50% { opacity: 0; } }

/* ── başlık bandı (kurum rengi) ── */
.fee-band { display: flex; align-items: center; gap: 12px; margin: 12px 12px 0; padding: 10px 12px; 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); }
.fee-ico { flex: none; width: 36px; height: 36px; }
.fee-ico > * { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.fee-ico .fee-i { width: 18px; height: 18px; stroke-width: 1.8; }
.fee-av { border-radius: 50% !important; background: #dbe7f6 !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5) !important; color: var(--navy); font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.fee-ttl { flex: 1; display: grid; min-width: 0; }
.fee-ttl b { display: block; font-size: 15px; font-weight: 800; line-height: 20px; letter-spacing: -.01em; white-space: nowrap; }
.fee-ttl small { display: block; margin-top: 1px; font-size: 11.5px; line-height: 15px; font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; }

/* ── gövde: iki sayfa aynı hücrede ── */
.fee-body { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); height: var(--fee-bh); overflow: hidden; }
.fee-pg { grid-area: 1 / 1; min-width: 0; min-height: 0; padding: 10px 14px 0; }
.fee-wiz { display: flex; flex-direction: column; transition: opacity .3s var(--ui-ease) var(--d), translate .45s var(--ui-ease) var(--d); }
.fee.s6 .fee-wiz { opacity: 0; translate: -14px 0; }
.fee-det { opacity: 0; translate: 14px 0; transition: opacity .32s var(--ui-ease) var(--d), translate .5s var(--ui-ease) var(--d); }
.fee.s6 .fee-det { opacity: 1; translate: 0 0; }

/* adım hapları (etkin = kurum rengi; tamamlananda işaret yok) */
.fee-pills { display: flex; gap: 6px; height: 26px; margin-bottom: 10px; }
.fee-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 13px; background: #f4f4f5; color: #52525b; font-size: 11px; font-weight: 800; white-space: nowrap;
  transition: background-color .3s var(--ui-ease) var(--d), color .3s var(--ui-ease) var(--d); }
.fee-pill i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .7); font-style: normal; font-size: 10px; font-variant-numeric: tabular-nums; transition: background-color .3s var(--ui-ease) var(--d); }
.fee-pill > span { overflow: hidden; }
.fee:not(.s5) .fee-pill--4, .fee.s5 .fee-pill--5 { background: var(--navy-soft); color: #fff; box-shadow: 0 1px 2px rgba(20, 61, 107, .25); }
.fee:not(.s5) .fee-pill--4 i, .fee.s5 .fee-pill--5 i { background: rgba(255, 255, 255, .26); }

/* form kartı: iki panel aynı hücrede */
.fee-card { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 12px 0; border-radius: 12px 12px 0 0; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.fee-stack { flex: 1; min-height: 0; display: grid; }
.fee-pane { grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; transition: opacity .3s var(--ui-ease) var(--d), translate .4s var(--ui-ease) var(--d); }
.fee.s5 .fee-pay { opacity: 0; translate: 0 -6px; pointer-events: none; }
.fee-onay { opacity: 0; translate: 0 8px; }
.fee.s5 .fee-onay { opacity: 1; translate: 0 0; }
.fee-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.fee-h b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.fee-hint { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; line-height: 14px; color: var(--fee-mut); }

/* ödeme türü satırları (yöntem · tutar · taksit · tarih · sil); aralıklar uygulamanın oranında (space-y-4 · space-y-3 · p-2) */
.fee-segs { display: grid; gap: 12px; margin-top: 14px; }
.fee-seg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 1.6fr) minmax(0, 3fr) 30px; gap: 6px; padding: 6px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px var(--fee-z), 0 1px 2px rgba(16, 37, 64, .04); }
/* açılırken kırpar ama satırın 1 px dış çerçevesi ve gölgesi (3 px) kesilmez */
.fee-seg2 { display: grid; grid-template-rows: 0fr; overflow: clip; overflow-clip-margin: 3px; opacity: 0; transition: grid-template-rows .45s var(--ui-ease) var(--d), opacity .3s var(--ui-ease) calc(var(--d) + .12s); }
.fee-seg2 > .fee-seg { min-height: 0; }
.fee.s2 .fee-seg2 { grid-template-rows: 1fr; opacity: 1; }
.fee.s3 .fee-seg2 { overflow: visible; }
.fee-segs:has(.fee-seg2) { row-gap: 0; }
.fee-seg2 { margin-top: 0; transition-property: grid-template-rows, opacity, margin-top; }
.fee.s2 .fee-seg2 { margin-top: 12px; }
.fee-in { position: relative; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 700; color: #27272a; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--fee-z2); transition: box-shadow .25s var(--ui-ease); }
.fee-in--n { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fee-in--m { justify-content: space-between; }
.fee-in--m .fee-x { flex: 1; }
.fee-chev { width: 13px; height: 13px; color: var(--fee-mut); }
.fee-in--d { justify-content: space-between; font-weight: 600; font-variant-numeric: tabular-nums; }
.fee-cal { width: 13px; height: 13px; color: #3f3f46; }
.fee-del { display: grid; place-items: center; border-radius: 8px; color: var(--fee-mut); box-shadow: inset 0 0 0 1px var(--fee-z2); }
.fee-del .fee-i { width: 14px; height: 14px; }
.fee-in em { font-style: normal; border-radius: 2px; transition: background-color .15s var(--ui-ease) .34s, color .15s var(--ui-ease) .34s; }
.fee.s1:not(.s2) .fee-in--t .k01 em, .fee.s4:not(.s5) .fee-seg2 .fee-in--k .k04 em { background: #2b64c5; color: #fff; }
.fee.s4:not(.s5) .fee-seg2 .fee-in--k .k04 em { transition-delay: .3s; }
/* yazılan değer soldan açılır, imleç çizgisi yanıp söner */
.fee-typed { position: relative; clip-path: inset(0 100% 0 0); }
.fee.s1 .fee-in--t .fee-typed, .fee.s4 .fee-seg2 .fee-in--k .fee-typed { clip-path: inset(0 -3px 0 0); transition: clip-path .4s steps(5, end) var(--d), opacity .01s linear var(--d); }
.fee.s4 .fee-seg2 .fee-in--k .fee-typed { transition: clip-path .1s steps(1, end) var(--d), opacity .01s linear var(--d); }
.fee-typed::after { content: ""; position: absolute; right: -3px; top: 1px; bottom: 1px; width: 1px; background: #18181b; opacity: 0; }
.fee.s1:not(.s2) .fee-in--t .fee-typed::after, .fee.s4:not(.s5) .fee-seg2 .fee-in--k .fee-typed::after { opacity: 1; animation: fee-caret 1s steps(1, end) infinite; }
/* odak halkası yalnız yazılan alanda: s1 ilk satırın tutarı, s4 ikinci satırın taksiti, s3 ikinci satırın yöntemi */
.fee.s1:not(.s2) .fee-segs > .fee-seg .fee-in--t, .fee.s4:not(.s5) .fee-seg2 .fee-in--k, .fee.s3:not(.s4) .fee-in--m2 { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .16); }
/* odak imlecin tıklamasıyla gelir (seçim vurgusu ve açılır listeyle aynı an); s4'te yöntem alanı odağı o an bırakır */
.fee.s1:not(.s2) .fee-segs > .fee-seg .fee-in--t { transition-delay: .34s; }
.fee.s3:not(.s5) .fee-in--m2, .fee.s4:not(.s5) .fee-seg2 .fee-in--k { transition-delay: .3s; }
.fee-in--t .fee-hit { right: 16px; bottom: 9px; }
.fee-in--k .fee-hit { right: 10px; bottom: 9px; }
.fee.s1:not(.s2) .fee-hit--tot .ui-cur { animation: fee-cur-out 1.25s var(--ui-ease) both; }
.fee.s1:not(.s2) .fee-hit--tot .fee-rip { animation: fee-rip .55s ease-out .4s both; }
.fee.s4:not(.s5) .fee-hit--ins .ui-cur { animation: fee-cur-out 1.05s var(--ui-ease) both; }
.fee.s4:not(.s5) .fee-hit--ins .fee-rip { animation: fee-rip .55s ease-out .38s both; }

/* açılır seçenek listesi (yöntem) */
.fee-in--m2 { --fee-dy: 70px; }
.fee-in--m2 .fee-hit { right: 30px; bottom: 9px; }
.fee-dd { position: absolute; z-index: 8; left: -1px; top: calc(100% + 3px); display: grid; min-width: calc(100% + 2px); padding: 4px; border-radius: 9px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .12), 0 4px 8px rgba(16, 37, 64, .08), 0 16px 28px -12px rgba(16, 37, 64, .45);
  opacity: 0; translate: 0 -4px; scale: .98; transform-origin: top left; pointer-events: none; transition: opacity .16s var(--ui-ease), translate .2s var(--ui-ease), scale .2s var(--ui-ease); }
.fee.s3:not(.s4) .fee-dd { animation: fee-dd 1.2s var(--ui-ease) .3s both; }
@keyframes fee-dd { 0% { opacity: 0; translate: 0 -4px; scale: .98; } 14% { opacity: 1; translate: 0 0; scale: 1; } 86% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 0; scale: 1; } }
.fee-op { height: 22px; padding: 0 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; line-height: 22px; color: #27272a; white-space: nowrap; }
.fee-op--a { background: #e8eef7; }
.fee.s3:not(.s4) .fee-op--a { animation: fee-op-off .01s linear 1.02s both; }
.fee.s3:not(.s4) .fee-op--kk { animation: fee-op-on .01s linear 1.02s both; }
@keyframes fee-op-off { to { background: transparent; } }
@keyframes fee-op-on { to { background: var(--navy-soft); color: #fff; } }
.fee.s3:not(.s4) .fee-hit--met .ui-cur { animation: fee-cur-dd 1.5s var(--ui-ease) both; }
.fee.s3:not(.s4) .fee-hit--met .fee-rip { animation: fee-rip .5s ease-out .38s both; }

/* alt satır: ödeme türü ekle · toplam */
.fee-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; }
.fee-add { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 700; color: #27272a; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--fee-z2), 0 1px 2px rgba(16, 37, 64, .06); }
.fee-add .fee-i { width: 13px; height: 13px; }
.fee-add .fee-hit { right: 22px; bottom: 9px; }
.fee.s2:not(.s3) .fee-add { animation: fee-push .3s var(--ui-ease) .3s; }
.fee.s2:not(.s3) .fee-hit--add .ui-cur { animation: fee-cur-out 1.05s var(--ui-ease) both; }
.fee.s2:not(.s3) .fee-hit--add .fee-rip { animation: fee-rip .55s ease-out .32s both; }
.fee-sum { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 5px; margin-left: auto; font-size: 11.5px; font-weight: 700; color: #27272a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-sum__v { vertical-align: baseline; }   /* .fee-x üste yaslar; değer etiketle aynı taban çizgisinde (uygulamada metnin içinde) */
.fee-sum__v b { font-size: 13px; font-weight: 800; }
.fee-sum .ok { color: var(--fee-ok); } .fee-sum .bad { color: var(--fee-bad); }
/* değer metnin içinde: genişlik görünen değerinki («₺65.000,00» ile «/» arasında boşluk kalmaz). Eski söner, genişlik
   o an değişir, yenisi gelir (üst üste binmez). s2: toplam, kalanı alan yeni satır belirirken yeşile döner (satırdan önce değil) */
.fee-sum__v > .fee-v { --fee-sd: 0s; max-width: 0; transform: none;
  transition: opacity .14s linear calc(var(--d) + var(--fee-sd)), max-width 0s linear calc(var(--d) + var(--fee-sd) + .14s); }
.fee.s2:not(.s3) .fee-sum__v > .fee-v { --fee-sd: .22s; }
.fee:not(.s1) .fee-sum__v > .k01, .fee.s1:not(.s2) .fee-sum__v > .k12, .fee.s2 .fee-sum__v > .k29 { max-width: 8em; transition-delay: calc(var(--d) + var(--fee-sd) + .14s); }
.fee-net { font-weight: 700; color: var(--fee-mut); }

/* 5. Onay özeti */
.fee-btn2 { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 700; color: #3f3f46; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--fee-z2), 0 1px 2px rgba(16, 37, 64, .05); }
.fee-btn2 .fee-i { width: 13px; height: 13px; }
.fee-sm { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px; margin-top: 8px; }
.fee-sm__l { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fee-box { display: block; min-width: 0; padding: 7px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--fee-z);
  opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(.6s + var(--i) * 80ms), translate .4s var(--ui-ease) calc(.6s + var(--i) * 80ms); }
.fee.s5 .fee-box { opacity: 1; translate: 0 0; }
.fee-cap { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 13px; text-transform: uppercase; color: var(--fee-mut); }
.fee-ln { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 18px; font-size: 11.5px; line-height: 15px; font-variant-numeric: tabular-nums; }
.fee-ln > span { min-width: 0; }
.fee-ln b { font-weight: 800; } .fee-ln small { font-size: 10.5px; font-weight: 600; color: var(--fee-mut); }
.fee-ln em { flex: none; font-style: normal; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; color: #27272a; }
.fee-ln--b > span { font-weight: 800; }
.fee-ln--kk { margin-top: 3px; padding-top: 4px; border-top: 1px solid #f1f1f3; }
.fee-tot { display: block; flex: none; margin-top: 5px; padding-top: 5px; border-top: 1px solid #ececef; text-align: right; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fee-box--net { padding: 9px 10px; background: #f3f7fc; box-shadow: inset 0 0 0 1px #c9d9ee; text-align: right; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fee-box--net b { font-size: 13.5px; color: var(--navy); }
.fee-box--seg { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.fee-tt { display: block; position: relative; min-height: 0; margin-top: 4px; border-top: 1px solid var(--fee-z); overflow: hidden; }
.fee-tt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.fee-tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; height: 15px; padding: 0 2px; align-items: center; font-size: 10.5px; line-height: 15px; font-variant-numeric: tabular-nums; color: #27272a;
  opacity: 0; transition: opacity .25s var(--ui-ease) calc(.85s + var(--j) * 45ms); }
.fee-tr > :first-child { color: var(--fee-mut); }
.fee-tr > :last-child { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 10.5px; text-align: right; }
.fee-tr--h { height: 17px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fee-mut); opacity: 1; }
.fee-tr--h > :last-child { font-family: inherit; font-size: 10px; }
.fee.s5 .fee-tr { opacity: 1; }

/* alt gezinme: uygulamada içeriğin hemen altında (mt-6 border-t pt-4) — her panelin kendi çubuğu, paneller çapraz geçer */
.fee-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 46px; margin-top: 8px; border-top: 1px solid var(--ui-line); }
.fee-pay .fee-nav { margin-top: 18px; }
.fee-back { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 9px; font-size: 11.5px; font-weight: 700; color: #3f3f46; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--fee-z2); }
.fee-nav__f { display: flex; gap: 6px; }
.fee-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.fee-btn .fee-i { width: 13px; height: 13px; }
.fee-btn--go { color: #fff; background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 14px -8px rgba(20, 61, 107, .75); }
.fee-btn--no { color: #92400e; background: #fffbeb; box-shadow: inset 0 0 0 1px #fcd34d; }
.fee-btn--ok { color: #fff; background: #10b981; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(5, 150, 105, .3), 0 6px 12px -8px rgba(5, 150, 105, .85); }
.fee-btn--go .fee-hit { right: 18px; bottom: 9px; }
.fee-btn--ok .fee-hit { right: 26px; bottom: 9px; }
.fee.s5:not(.s6) .fee-btn--go { animation: fee-push .3s var(--ui-ease) .3s; }
.fee.s5:not(.s6) .fee-hit--next .ui-cur { animation: fee-cur-out .9s var(--ui-ease) both; }
.fee.s5:not(.s6) .fee-hit--next .fee-rip { animation: fee-rip .55s ease-out .3s both; }
.fee.s6:not(.s7) .fee-btn--ok { animation: fee-push .3s var(--ui-ease) .3s; }
.fee.s6:not(.s7) .fee-hit--make .ui-cur { animation: fee-cur .7s var(--ui-ease) both; }
.fee.s6:not(.s7) .fee-hit--make .fee-rip { animation: fee-rip .55s ease-out .3s both; }

/* ── kayıt detayı ── */
.fee-det { display: flex; flex-direction: column; gap: 10px; }
.fee-flash { display: flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: 10px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; font-size: 11.5px; font-weight: 700; color: #065f46;
  opacity: 0; translate: 0 -6px; transition: opacity .3s var(--ui-ease) calc(var(--d) + .2s), translate .45s var(--fee-spring) calc(var(--d) + .2s); }
.fee.s6 .fee-flash { opacity: 1; translate: 0 0; }
.fee-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fee-kpi { display: block; min-width: 0; padding: 8px 10px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
  opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(var(--d) + .25s + var(--i) * 60ms), translate .4s var(--ui-ease) calc(var(--d) + .25s + var(--i) * 60ms); }
.fee.s6 .fee-kpi { opacity: 1; translate: 0 0; }
.fee-kpi__h { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 22px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fee-mut); white-space: nowrap; }
.fee-kpi__h i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; }
.fee-kpi__h .fee-i { width: 13px; height: 13px; }
.fee-kpi .c-b { background: #dbeafe; color: #2563eb; } .fee-kpi .c-g { background: #d1fae5; color: #059669; }
.fee-kpi .c-a { background: #fef3c7; color: #d97706; } .fee-kpi .c-n { background: var(--ui-primary-soft); color: var(--navy-soft); }
.fee-kpi > b { display: block; margin-top: 4px; font-size: 15.5px; font-weight: 800; line-height: 20px; letter-spacing: -.015em; color: #0f172a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-pc { padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
  opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease) calc(var(--d) + .45s), translate .45s var(--ui-ease) calc(var(--d) + .45s); }
.fee.s6 .fee-pc { opacity: 1; translate: 0 0; }
.fee-pc__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.fee-pc__h b { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.fee-pc__h b .fee-i { color: var(--navy-soft); }
.fee-pc__h small { font-size: 10.5px; font-weight: 700; color: var(--fee-mut); white-space: nowrap; }
.fee-cap--p { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; }
.fee-cap--p .fee-i { width: 12px; height: 12px; color: var(--navy-soft); }
.fee-pc__s { display: block; font-size: 10.5px; font-weight: 600; line-height: 14px; color: var(--fee-mut); }
.fee-pr { display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 7px 10px 7px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--fee-z); }
.fee-pr__c { flex: none; color: var(--fee-mut); }
.fee-pr__ad { flex: 1; min-width: 0; line-height: 15px; }
.fee-pr__ad b { display: block; font-size: 12px; font-weight: 800; white-space: nowrap; }
.fee-pr__ad small { display: block; font-size: 10.5px; font-weight: 600; color: var(--fee-mut); white-space: nowrap; }
.fee-pr__v { flex: none; text-align: right; line-height: 15px; }
.fee-pr__v small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fee-mut); }
.fee-pr__v b { display: block; font-size: 12px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-pr__v--b b { color: #b45309; }
.fee-mk { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; background: var(--ui-primary-soft); color: var(--navy-soft); font-size: 11px; font-weight: 800; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #bcd0ea; }
.fee-mk .fee-i { width: 12px; height: 12px; }
.fee-mk .fee-hit { right: 18px; bottom: 8px; }
.fee.s7 .fee-mk { animation: fee-push .3s var(--ui-ease) .3s; }
.fee.s7 .fee-hit--pdf .ui-cur { animation: fee-cur-out .85s var(--ui-ease) both; }
.fee.s7 .fee-hit--pdf .fee-rip { animation: fee-rip .55s ease-out .3s both; }
.fee-pt { display: grid; gap: 1px; margin-top: 8px; padding-top: 7px; border-top: 2px dashed var(--fee-z2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fee-pt > span { display: flex; justify-content: space-between; gap: 8px; color: #52525b; }
.fee-pt b { font-weight: 800; color: #18181b; }
.fee-pt__s { font-size: 12.5px; font-weight: 800; }
.fee-pt__s > span { color: #18181b; }
.fee-pt__s b { color: var(--navy-soft); }

/* ── sözleşme PDF'i: MEB öğrenci kayıt sözleşmesi, «ÖDEME BİLGİLERİ» ── */
.fee-doc { --lab: minmax(0, 1fr); --cols: 74px 52px 74px 74px 52px 74px; --mb: #8c8c8c;
  position: absolute; z-index: 10; left: 16px; right: 16px; top: 72px; bottom: 0; padding: 8px 14px 0; border-radius: 6px 6px 0 0; background: #fff; color: #111; overflow: hidden; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .1), 0 -1px 3px rgba(16, 37, 64, .06), 0 -22px 44px -18px rgba(16, 37, 64, .55);
  opacity: 0; translate: 0 46px; transition: opacity .3s var(--ui-ease) var(--d), translate .65s cubic-bezier(.3, 1.2, .5, 1) var(--d); }
.fee-doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); }
.fee.s7 .fee-doc { opacity: 1; translate: 0 0; }
.fee-doc__hd { text-align: center; line-height: 14px; }
.fee-doc__hd small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #333; white-space: nowrap; }
.fee-doc__hd b { display: block; margin-top: 1px; font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.fee-doc__hd b span { font-weight: 700; }
.fee-doc__ok { display: block; margin: 4px 0 4px; font-size: 10.5px; font-weight: 700; line-height: 14px; }
.fee-mt { border-top: 1px solid var(--mb); border-left: 1px solid var(--mb); font-size: 10px; line-height: 12px; font-variant-numeric: tabular-nums; }
.fee-mr { display: grid; grid-template-columns: var(--l, var(--lab)) var(--cols); }
.fee-mr > * { min-width: 0; min-height: 15px; padding: 1px 4px; border-right: 1px solid var(--mb); border-bottom: 1px solid var(--mb); display: flex; align-items: center; }
.fee-mr .c2, .fee-mr .c1 { grid-column: 1; }
.fee-mr .c4 { grid-column: 2 / 5; }
.fee-mr .c3 { grid-column: 5 / -1; }
.fee-mr .c7 { grid-column: 2 / -1; }
.fee-mr .c9 { grid-column: 1 / -1; flex-direction: column; justify-content: center; padding: 2px 4px; }
.fee-mr .c9 small { font-size: 10px; }
.fee-mr .cc { justify-content: center; text-align: center; }
.fee-mr .cn { justify-content: center; font-weight: 700; white-space: nowrap; }
.fee-mr .c1 em { font-style: italic; font-synthesis: style; }   /* site gövdesi font-synthesis: none; Jakarta'nın italiği yüklü değil */
.fee-mr--g > * { font-weight: 600; }
.fee-mr--sec > * { background: #d0cece; }
.fee-mr--sec b { font-weight: 800; }
.fee-op2 { justify-content: space-around; }
.fee-mr--hl .c7 { font-weight: 800; }
.fee-grp { display: grid; grid-template-columns: 26px minmax(0, 1fr); }
.fee-grp__v { position: relative; border-right: 1px solid var(--mb); border-bottom: 1px solid var(--mb); background: #d0cece; overflow: hidden; }
.fee-grp__v > span { position: absolute; inset: 3px 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; rotate: 180deg; font-size: 10px; font-weight: 800; line-height: 11px; text-align: center; }
.fee-grp__r { --l: minmax(0, 1fr); display: block; }
.fee-grp__r .fee-mr > * { min-height: 12px; padding-top: 0; padding-bottom: 0; }
/* indirim nedeni: iki satır × iki kutu (contract-template-helper: colspan 3 | colspan 4), altında «Diğer İndirimler:» */
.fee-why .c2 { grid-row: span 2; }
.fee-why__a { grid-column: 2 / 5; }
.fee-why__b { grid-column: 5 / -1; }
.fee-note { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; line-height: 13px; }
.fee .fill { border-radius: 2px; opacity: 0; transition: opacity .25s var(--ui-ease) calc(var(--d) + .75s + var(--f) * 110ms); }
.fee.s7 .fill { opacity: 1; animation: fee-fill 1.1s ease-out calc(var(--d) + .75s + var(--f) * 110ms) both; }

/* ── DAR KAPLAR ── */
@container (max-width: 600px) {
  .fee-seg { grid-template-columns: minmax(0, 3.2fr) minmax(0, 3fr) minmax(0, 1.3fr) minmax(0, 3.4fr) 28px; gap: 5px; }
  .fee-in { padding: 0 7px; font-size: 11.5px; }
  .fee-in--n { font-size: 11.5px; }
  .fee-sm { grid-template-columns: minmax(0, 1fr); }
  .fee-sm__l .fee-box:first-child { display: none; }
  .fee-sm__l .fee-box--net { text-align: left; }
  .fee-hint--o { display: none; }
  .fee-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fee-kpi { padding: 6px 10px; }
  .fee-kpi > b { margin-top: 2px; }
  .fee-pc__s { display: none; }
  .fee-doc { --cols: 74px 52px 76px; left: 12px; right: 12px; }
  .fee-doc .ka { display: none; }
  .fee-mr .c3 { grid-column: 2 / -1; }
  .fee-why__a { grid-column: 2 / 4; }
  .fee-why__b { grid-column: 4 / -1; }
  .fee-gm { display: none; }
}
@container (max-width: 470px) {
  .fee { --fee-bh: 372px; }
  .fee-band { margin: 10px 10px 0; padding: 9px 10px; gap: 10px; }
  .fee-ico, .fee-ico > * { width: 32px; height: 32px; }
  .fee-ttl b { font-size: 14px; }
  .fee-ttl .k06 small { display: none; }
  .fee-ttl .k06 b { line-height: 32px; }
  .fee-pg { padding: 10px 10px 0; }
  .fee-pills { gap: 4px; }
  .fee-pill { gap: 0; padding: 0 4px; }
  .fee-pill > span { max-width: 0; opacity: 0; transition: max-width .35s var(--ui-ease) var(--d), opacity .25s var(--ui-ease) var(--d), margin .35s var(--ui-ease) var(--d); }
  .fee:not(.s5) .fee-pill--4 > span, .fee.s5 .fee-pill--5 > span { max-width: 60px; opacity: 1; margin: 0 6px 0 5px; }
  .fee-card { padding: 10px; }
  .fee-h b { font-size: 13px; }
  .fee-hint { font-size: 10.5px; }
  .fee-seg { grid-template-columns: minmax(0, 1fr) 64px 26px 76px; gap: 4px; padding: 4px; }
  .fee-del, .fee-cal { display: none; }
  .fee-in { height: 28px; padding: 0 6px; font-size: 11px; }
  .fee-in--n { font-size: 11px; }
  .fee-in--k { justify-content: center; }
  .fee-in--m2 { --fee-dy: 68px; }
  .fee-in--t .fee-hit { right: 12px; bottom: 8px; }
  .fee-in--k .fee-hit { right: 6px; }
  .fee-in--m2 .fee-hit { right: 24px; }
  .fee-foot { margin-top: 12px; }
  .fee-pay .fee-nav { margin-top: 14px; }
  .fee-box--net { padding: 6px 10px; }   /* taksit tablosu satır sınırında biter: 5. satır tam boy, solma onu örter */
  .fee-sum { flex-direction: column; align-items: flex-end; margin-left: 0; width: 100%; font-size: 11px; line-height: 16px; }
  .fee-sum__v b { font-size: 12px; }
  .fee-btn--no { display: none; }
  .fee-btn2 { padding: 0 8px; }
  .fee-pc__h small { display: none; }
  .fee-pr { flex-wrap: wrap; row-gap: 6px; }
  .fee-pr__ad { flex-basis: calc(100% - 24px); }
  .fee-pr__v:first-of-type { margin-left: 24px; }
  .fee-pr__v { text-align: left; }
  .fee-mk { margin-left: auto; }
  .fee-kpi__h { font-size: 10px; letter-spacing: .03em; }
  .fee-kpi > b { font-size: 14px; }
  .fee-doc { --lab: 128px; --cols: minmax(0, 1fr); left: 8px; right: 8px; top: 66px; padding: 8px 10px 0; }
  .fee-doc .fw, .fee-doc .fk, .fee-grp { display: none; }
  .fee-doc::after { height: 12px; }   /* tablo + dipnot kâğıdı doldurur; solma dipnotun son satırını soldurmaz */
  .fee-why .c2 { grid-row: span 4; }
  .fee-why__a, .fee-why__b { grid-column: 2 / -1; }
  .fee-doc__hd b { font-size: 11.5px; line-height: 14px; }
  .fee-doc__hd b span { display: block; }
  .fee-pt > span:first-child { display: none; }
  .fee-pt { margin-top: 6px; padding-top: 6px; }
}