/* SAHNE · TOPLU KAYIT YENİLEME VE SINIF GEÇİŞİ (includes/scenes/re-enrollment.php) — «Öğrencileri Yeni Döneme Taşı». Adımlar:
   s1 «Hedef dönem» açılır · s2 2027-2028 seçilir: kartlar + öneriler + özet sayaçları · s3 liste 12-A/12-B'ye kayar (Mezun et) ·
   s4 liste sona kayar: 8-A «Üst okula geçiş» + yeni 9-A · s5 «Yenilemeyi Uygula» → «Yenilemeyi onayla» · s6 «Uygula» → Yenileme Sonucu ·
   s7 velinin telefonu: Ela'nın, sonra Can'ın «kaydı yenilendi» bildirimi (yığın).
   Kırılımlar 620 / 470 px. Ölçüler değişkenlerde; kart yükseklikleri SABİT (kaydırma durakları PHP'de aynı sayılarla hesaplanır: geniş 78/93, alt alta 114/129). */
@property --ren-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.ren { container-type: inline-size; --d: 0s; --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ren-page: #f3f5f8; --ren-ink: #27272a; --ren-mut: #71717a; --ren-ok: #047857; --ren-ok-ink: #065f46; }
.ren.s2 { --d: .55s; } .ren.s3, .ren.s4, .ren.s5 { --d: 0s; } .ren.s6 { --d: .6s; } .ren.s7 { --d: 0s; }
.ren-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ölçüler — geniş kap (> 620 px) */
.ren-win { --H: 448px; --bh: 56px; --fr: 42px; --tr: 38px; --bar: 48px; --c: 78px; --cn: 93px; --sw: 316px;
  --vt: calc(10px + var(--bh) + var(--fr) + var(--tr) + 8px); --Vn: 236;
  position: relative; height: var(--H); background: var(--ren-page); overflow: hidden; }

/* görünürlük katmanları: aynı ızgara hücresinde üst üste, çapraz geçiş */
.ren-x { display: grid; min-width: 0; }
.ren-x > * { grid-area: 1 / 1; min-width: 0; }
.ren .rv { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.ren:not(.s2) .rv-a, .ren.s6 .rv-a, .ren.s2:not(.s6) .rv-b, .ren:not(.s2) .rv-t0, .ren.s2 .rv-t1 { opacity: 1; transform: none; }

/* imleç: .ren-hit tıklama noktasıdır; ok ucu tam orada, halka dalgası çevresinde */
.ren-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.ren-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.ren-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 ren-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 36% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes ren-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 48% { scale: .8; } 60% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
/* seçenekten seçeneğe kayar: seçicinin üstünden açılır listedeki «2027-2028»e */
@keyframes ren-cur-glide { 0% { opacity: 1; transform: translate(-4px, -58px); } 38% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 60% { scale: 1; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ren-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes ren-push { 50% { scale: .95; } }
@keyframes ren-pop { 0% { scale: 1; } 45% { scale: 1.14; } 100% { scale: 1; } }
@keyframes ren-sw-in { 0% { scale: .7; } 45% { scale: 1.04; } 78% { scale: .98; } 100% { scale: 1; } }

/* ── sayfa başlığı kartı ── */
.ren-head { position: absolute; z-index: 4; top: 10px; left: 10px; right: 10px; border-radius: 14px; background-color: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .05), 0 10px 24px -18px rgba(16, 37, 64, .35);
  transition: background-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease); }
/* sonuçta bant tek başına kalır: altı yuvarlanır; kartın beyaz zemini ve çerçevesi köşelerde kıymık bırakmasın.
   Sonuç katmanı tamamen örttükten sonra (.7 s + .35 s) söner: geçişte yalnız iki köşe değişir */
.ren.s6 .ren-head { background-color: rgba(255, 255, 255, 0); box-shadow: 0 0 0 1px rgba(16, 37, 64, 0), 0 1px 2px rgba(16, 37, 64, 0), 0 10px 24px -18px rgba(16, 37, 64, 0);
  transition-delay: 1.05s; }
.ren-band { position: relative; display: flex; align-items: center; gap: 12px; height: var(--bh); padding: 0 12px; border-radius: 14px 14px 0 0; 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); transition: border-radius .3s var(--ui-ease) var(--d); }
.ren.s6 .ren-band { border-radius: 14px; transition-delay: 1.05s; }
.ren-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.ren-ico .ren-i { width: 17px; height: 17px; stroke-width: 1.8; }
.ren-ttl { flex: 1; min-width: 0; }
.ren-h1 { display: flex; align-items: center; gap: 7px; height: 19px; }
.ren-h1 b { font-size: 15px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }
.ren-hb { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ren-hb .ren-i { width: 12px; height: 12px; }
.ren-sub { margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 15px; color: #cfe0f3; }
.ren-sub > * { white-space: nowrap; }
.ren-how { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 9px 0 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
.ren-how .ren-i { width: 14px; height: 14px; }

/* süzgeç satırı */
.ren-row { display: flex; align-items: center; gap: 6px; padding: 0 10px; box-shadow: inset 0 1px 0 #eef0f3; }
.ren-flt { position: relative; z-index: 2; height: var(--fr); }
.ren-lbl { flex: none; font-size: 10.5px; font-weight: 700; color: #52525b; white-space: nowrap; }
.ren-sel { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border-radius: 9px; background: #fff;
  font-size: 11px; font-weight: 600; color: var(--ren-ink); white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05); transition: background-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease); }
.ren-sel > .ren-x { flex: 1; }
.ren-chev { width: 13px; height: 13px; margin-left: auto; color: #8a919e; }
.ren-mut { color: #4b5563; }
.ren-sel--term { flex: none; width: 146px; background: #eef4fb; box-shadow: inset 0 0 0 1px #8fb2d8, 0 1px 2px rgba(16, 37, 64, .05); }
.ren.s2 .ren-sel--term { background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05); transition-delay: .5s; }
.ren.s1:not(.s2) .ren-sel--term { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .16); transition-delay: .4s; }
.ren-sel--term > .ren-hit--term { left: 112px; top: 19px; }
.ren.s1:not(.s2) .ren-hit--term .ui-cur { animation: ren-cur .95s var(--ui-ease) both; }
.ren.s1:not(.s2) .ren-hit--term .ren-rip { animation: ren-rip .55s ease-out .42s both; }
.ren-more { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; opacity: 0; transition: opacity .35s var(--ui-ease) var(--d); }
.ren.s2 .ren-more { opacity: 1; }
.ren-more .ren-sel { padding-right: 8px; }

/* açılır liste (yerel seçici) */
.ren-dd { position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; width: 100%; padding: 4px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .1), 0 4px 8px rgba(16, 37, 64, .08), 0 18px 34px -14px rgba(16, 37, 64, .45);
  opacity: 0; translate: 0 -4px; transform-origin: top; transition: opacity .2s var(--ui-ease), translate .25s var(--ui-ease); }
.ren.s1 .ren-dd { opacity: 1; translate: 0 0; transition-delay: .45s; }
.ren.s2 .ren-dd { opacity: 0; translate: 0 -4px; transition-delay: .48s; }
.ren-op { position: relative; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--ren-ink);
  transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease); }
.ren-op .ren-i { width: 12px; height: 12px; stroke-width: 2.6; color: var(--navy-soft); }
.ren-op--0 { background: #edf2f8; }
.ren.s2 .ren-op--0 { background: transparent; transition-delay: .22s; }
.ren.s2 .ren-op--1 { background: var(--navy-soft); color: #fff; transition-delay: .22s; }
.ren-op--1 > .ren-hit { left: 112px; top: 13px; }
.ren.s2:not(.s3) .ren-hit--opt .ui-cur { animation: ren-cur-glide .9s var(--ui-ease) both; }
.ren.s2:not(.s3) .ren-hit--opt .ren-rip { animation: ren-rip .55s ease-out .4s both; }

/* toplu seçim satırı (kartlar gelince açılır) */
.ren-tp { height: 0; overflow: hidden; border-radius: 0 0 14px 14px; transition: height .45s var(--ui-ease) var(--d); }
.ren.s2 .ren-tp { height: var(--tr); }
.ren-tp__in { height: var(--tr); }
.ren-tp__w { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ren-tp__l { flex: none; margin-right: 2px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #52525b; }
.ren-tb { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px; background: #fff; font-size: 10.5px; font-weight: 800; color: #3f3f46; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #d4d4d8; }
.ren-tb .ren-i { width: 12px; height: 12px; }
.ren-tb--sky { background: #f0f9ff; color: #075985; box-shadow: inset 0 0 0 1px #7dd3fc; }
.ren-tb--em { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px #6ee7b7; }
.ren-tp__n { display: none; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: #52525b; white-space: nowrap; }
.ren-tp__n > .ren-i:first-child { width: 14px; height: 14px; color: var(--navy-soft); }
.ren-tp__n > span { flex: 1; min-width: 0; }
.ren-tp__n b { font-weight: 800; color: #27272a; }

/* ── kartlar (sayfa kayar) ── */
.ren-vp { position: absolute; z-index: 1; top: var(--vt); left: 10px; right: 10px; bottom: calc(var(--bar) + 10px); overflow: hidden;
  --ya: var(--y3w); --yb: var(--y4w); --L: var(--Lw); }
.ren-list { transition: translate 1s cubic-bezier(.55, .05, .22, 1) .1s; }
/* yapışkan özetin üstünde kartlar sayfa rengine solar (altına kayan kartın kesik yazısı görünmez) */
.ren-vp::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none;
  background: linear-gradient(rgba(243, 245, 248, 0), var(--ren-page) 85%); opacity: 0; transition: opacity .3s var(--ui-ease) .95s; }
.ren.s2 .ren-vp::after { opacity: 1; }
.ren-vp { --th: max(18px, round(calc(var(--Vn) * var(--Vn) / var(--L) * 1px), 1px)); }
.ren.s3 .ren-list { translate: 0 calc(-1 * var(--ya)); }
.ren.s4 .ren-list { translate: 0 calc(-1 * var(--yb)); }
.ren-card { display: flex; flex-direction: column; height: var(--c); margin-bottom: 8px; border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .075), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
  position: relative; opacity: 0; translate: 0 10px;
  transition: opacity .35s var(--ui-ease) calc(.72s + var(--i) * 80ms), translate .55s var(--spring) calc(.72s + var(--i) * 80ms), box-shadow .35s var(--ui-ease) .15s, background-color .35s var(--ui-ease) .15s; }
.ren-card--n, .ren-card--z { height: var(--cn); }
/* vurgu halkası kartın İÇİNDE ve içeriğin üstünde çizilir: kart görünüm alanının tam genişliğinde olduğundan dış halka yan
   kenarlarda kesilirdi; içerik altında kalsa «Öğrenciler» ayracı halkayı bölerdi */
.ren-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0), inset 0 0 0 4px rgba(56, 189, 248, 0); transition: box-shadow .35s var(--ui-ease) .15s; }
.ren.s2 .ren-card { opacity: 1; translate: 0 0; }
.ren-ch { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 0; padding: 0 12px; }
.ren-ct { flex: 1; min-width: 0; }
.ren-ct > b { display: flex; align-items: center; gap: 6px; height: 18px; font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: #18181b; }
.ren-ct small { display: block; font-size: 10.5px; font-weight: 700; line-height: 15px; color: var(--ren-mut); white-space: nowrap; }
.ren-ct .ren-zk { color: var(--ren-ok); }
.ren-ct .ren-why { width: fit-content; color: #b45309; background: linear-gradient(#fdecc8, #fdecc8) no-repeat 0 0 / 0% 100%; border-radius: 3px;
  transition: background-size .6s var(--ui-ease) .55s; }
.ren-bdg { flex: none; height: 16px; padding: 0 5px; border-radius: 4px; background: #e0f2fe; color: #0369a1; font-style: normal; font-size: 10px; font-weight: 800; line-height: 16px; letter-spacing: .01em; }
.ren-sel--card { flex: none; width: var(--sw); height: 30px; gap: 5px; padding: 0 8px 0 9px; font-size: 11px; font-weight: 600; }
.ren-sel--card > span { display: flex; min-width: 0; white-space: nowrap; }
/* okul adı tam; seçiciye sığmazsa yalnız o kırpılır («(önerilen)» kalır) */
.ren-so { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ren-sel--card .ren-pl { width: 12px; height: 12px; stroke-width: 2.4; color: #3f3f46; }
.ren-sel--g { color: #0c4a6e; }
.ren-sel--g > .ren-i:first-child { width: 14px; height: 14px; color: #0369a1; }
.ren-cs { flex: none; display: flex; align-items: center; gap: 5px; height: 25px; padding: 0 12px; box-shadow: inset 0 1px 0 #f1f1f3; font-size: 10px; font-weight: 800; letter-spacing: .035em; color: var(--ren-mut); white-space: nowrap; }
.ren-tri { flex: none; width: 8px; height: 8px; fill: #8a919e; }
/* s3: mezuniyet sınıfları · s4: 8-A (üst okula geçiş) */
.ren.s3:not(.s4) .ren-card--g::after { box-shadow: inset 0 0 0 1px #38bdf8, inset 0 0 0 4px rgba(56, 189, 248, .16); }
.ren.s3:not(.s4) .ren-card--g .ren-bdg { animation: ren-pop .5s var(--spring) .75s both; }
.ren.s3:not(.s4) .ren-card--g .ren-sel--g { background: #f0f9ff; box-shadow: inset 0 0 0 1px #7dd3fc; transition-delay: .7s; }
.ren.s4:not(.s6) .ren-card--can::after { box-shadow: inset 0 0 0 1px var(--navy-soft), inset 0 0 0 4px rgba(29, 79, 134, .14); transition-delay: .85s; }
.ren.s4 .ren-card--can .ren-why { background-size: 100% 100%; transition-delay: 1s; }

/* kaydırma çubuğu ipucu */
.ren-thumb { position: absolute; z-index: 2; right: 2px; top: 4px; width: 4px; border-radius: 2px; background: rgba(16, 37, 64, .3); opacity: 0;
  height: var(--th);
  transition: translate 1s cubic-bezier(.55, .05, .22, 1) .1s, opacity .3s var(--ui-ease); }
.ren.s2 .ren-thumb { opacity: 1; transition-delay: .1s, 1s; }
.ren.s3 .ren-thumb { translate: 0 min(round(calc(var(--ya) * var(--Vn) / var(--L)), 1px), calc(var(--Vn) * 1px - var(--th) - 8px)); }
.ren.s4 .ren-thumb { translate: 0 min(round(calc(var(--yb) * var(--Vn) / var(--L)), 1px), calc(var(--Vn) * 1px - var(--th) - 8px)); }
.ren.s6 .ren-thumb { opacity: 0; }

/* ── yapışkan özet ── */
.ren-bar { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; height: var(--bar); padding: 0 7px 0 12px; border-radius: 14px;
  background: rgba(239, 245, 252, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px #c6d7ea, 0 2px 4px rgba(16, 37, 64, .06), 0 14px 28px -14px rgba(20, 61, 107, .45);
  opacity: 0; translate: 0 14px; transition: opacity .35s var(--ui-ease) .95s, translate .5s var(--ui-ease) .95s; }
.ren.s2 .ren-bar { opacity: 1; translate: 0 0; }
.ren.s6 .ren-bar { opacity: 0; translate: 0 14px; transition-delay: .5s; }
.ren-bar__t { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; line-height: 15px; color: #173a63; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.ren-bar__t--k { display: none; font-weight: 800; }
.ren-n { counter-reset: ren-c var(--ren-n); font-variant-numeric: tabular-nums; transition: --ren-n .9s var(--ui-ease) 1.05s; }
.ren-n::after { content: counter(ren-c); }
.ren.s2 .ren-n--a { --ren-n: 504; } .ren.s2 .ren-n--b { --ren-n: 43; } .ren.s2 .ren-n--c { --ren-n: 26; }
.ren-go { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap;
  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); }
.ren-go .ren-i { width: 14px; height: 14px; stroke-width: 2.2; }
.ren-go > .ren-hit { right: 30px; bottom: 11px; }
.ren.s5:not(.s6) .ren-go { animation: ren-push .3s var(--ui-ease) .42s; }
.ren.s5:not(.s6) .ren-hit--go .ui-cur { animation: ren-cur-out 1.1s var(--ui-ease) both; }
.ren.s5:not(.s6) .ren-hit--go .ren-rip { animation: ren-rip .55s ease-out .42s both; }

/* ── onay penceresi (SweetAlert) ── */
.ren-dlg { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(9, 18, 32, .46); opacity: 0;
  transition: opacity .25s var(--ui-ease); }
.ren.s5 .ren-dlg { opacity: 1; transition-delay: .5s; }
.ren.s6 .ren-dlg { opacity: 0; transition-delay: .55s; }
.ren-sw { display: flex; flex-direction: column; align-items: center; width: 310px; max-width: 100%; padding: 18px 18px 16px; border-radius: 16px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 2px 4px rgba(0, 0, 0, .08), 0 28px 50px -18px rgba(0, 0, 0, .55);
  transition: scale .25s var(--ui-ease); }
.ren.s5:not(.s6) .ren-sw { animation: ren-sw-in .42s ease-out .52s both; }
.ren.s6 .ren-sw { scale: .9; transition-delay: .55s; }
.ren-q { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 3px #9db8d8; color: var(--navy-soft); font-size: 25px; font-weight: 600; line-height: 1; }
.ren-sw__t { margin-top: 10px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #1f2937; }
.ren-sw__b { display: flex; flex-direction: column; align-self: stretch; gap: 2px; margin-top: 8px; text-align: left; font-size: 11.5px; font-weight: 600; line-height: 16px; color: #4b5563; font-variant-numeric: tabular-nums; }
.ren-sw__b small { margin-top: 3px; font-size: 10.5px; line-height: 14px; color: var(--ren-mut); }
.ren-sw__a { display: flex; gap: 8px; margin-top: 14px; }
.ren-sw__a > span { position: relative; display: grid; place-items: center; height: 32px; padding: 0 18px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.ren-ok { color: #fff; background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: 0 4px 8px -3px rgba(20, 61, 107, .45); }
.ren-no { color: #6b7280; background: #f3f4f6; }
.ren-ok > .ren-hit { right: 22px; bottom: 9px; }
.ren.s6:not(.s7) .ren-ok { animation: ren-push .3s var(--ui-ease) .4s; }
.ren.s6:not(.s7) .ren-hit--ok .ui-cur { animation: ren-cur-out .95s var(--ui-ease) both; }
.ren.s6:not(.s7) .ren-hit--ok .ren-rip { animation: ren-rip .55s ease-out .4s both; }

/* ── SONUÇ ── */
.ren-res { position: absolute; z-index: 5; top: calc(10px + var(--bh)); left: 0; right: 0; bottom: 0; padding: 10px 10px 0; background: var(--ren-page);
  opacity: 0; translate: 0 10px; transition: opacity .35s var(--ui-ease), translate .5s var(--ui-ease); }
.ren.s6 .ren-res { opacity: 1; translate: 0 0; transition-delay: .7s; }
.ren-flash { display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; font-size: 12px; font-weight: 700; color: var(--ren-ok); }
.ren-sum { margin-top: 8px; padding: 11px 12px 12px; border-radius: 14px; background: #effcf6; box-shadow: inset 0 0 0 1px #86efc4, inset 0 1px 0 rgba(255, 255, 255, .7); }
.ren-sum__h { display: block; font-size: 13px; font-weight: 800; line-height: 18px; color: #064e3b; }
.ren-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ren-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 64px; padding: 8px 4px 0; border-radius: 10px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px rgba(6, 78, 59, .06), 0 1px 2px rgba(6, 78, 59, .06), inset 0 1px 0 rgba(255, 255, 255, .6);
  opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(.85s + var(--i) * 60ms), translate .45s var(--spring) calc(.85s + var(--i) * 60ms); }
.ren.s6 .ren-tile { opacity: 1; translate: 0 0; }
.ren-tile b { font-size: 21px; font-weight: 900; line-height: 24px; letter-spacing: -.02em; }
.ren-tile small { display: block; margin-top: 1px; font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--ren-mut); text-wrap: balance; }
.ren-tile--ok b { color: #059669; } .ren-tile--zn b { color: #52525b; } .ren-tile--sky b { color: #0284c7; } .ren-tile--amb b { color: #d97706; } .ren-tile--nv b { color: var(--navy-soft); }
.ren.s6 .ren-n--r0 { --ren-n: 418; } .ren.s6 .ren-n--r1 { --ren-n: 86; } .ren.s6 .ren-n--r2 { --ren-n: 43; } .ren.s6 .ren-n--r4 { --ren-n: 26; }
.ren-tile .ren-n { transition-delay: 1s; }
.ren-ln { display: block; max-width: calc(100% - 270px); margin-top: 8px; font-size: 11px; font-weight: 700; line-height: 15px; color: var(--ren-ok-ink); text-wrap: pretty;
  transition: opacity .3s var(--ui-ease); }
.ren-ln--k { margin-top: 3px; }
.ren-ln b { font-weight: 800; }
.ren-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; transition: opacity .3s var(--ui-ease); }
.ren-ab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 700; color: #3f3f46; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #d4d4d8, 0 1px 2px rgba(16, 37, 64, .05); }
.ren-ab .ren-i { width: 13px; height: 13px; }
.ren-ab--p { color: #fff; background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(20, 61, 107, .7); }

/* ── velinin telefonu (pencerenin altından yükselir) ── */
.ren-ph { --phv: 214px; position: absolute; z-index: 9; right: 22px; bottom: calc(var(--phv) - 380px); width: 232px; height: 380px; padding: 6px; border-radius: 34px;
  background: linear-gradient(145deg, #2a3d57, var(--navy-night) 40%, #071a30);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 4px rgba(7, 26, 48, .3), 0 30px 56px -16px rgba(7, 26, 48, .7);
  translate: 0 calc(var(--phv) + 30px); transition: translate .85s cubic-bezier(.3, 1.18, .5, 1) .1s; }
.ren.s7 .ren-ph { translate: 0 0; }
.ren-ph__sc { position: relative; height: 100%; border-radius: 28px; overflow: hidden;
  background: radial-gradient(110% 60% at 12% 0%, #4f86c6 0%, rgba(79, 134, 198, 0) 62%), radial-gradient(90% 55% at 100% 70%, rgba(255, 182, 39, .32), transparent 70%), linear-gradient(180deg, #1d4f86, var(--navy) 45%, var(--navy-night)); }
.ren-ph__sb { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 14px 0 20px; color: #fff; }
.ren-ph__sb > b { font-size: 11px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ren-isl { position: absolute; left: 50%; top: 6px; width: 62px; height: 17px; margin-left: -31px; border-radius: 999px; background: #050d18; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.ren-ph__si { display: flex; align-items: center; gap: 3px; }
.ren-ph__si > .ren-i { width: 12px; height: 12px; stroke-width: 2.6; }
.ren-bat { position: relative; width: 17px; height: 9px; margin-right: 2px; padding: 1.5px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
.ren-bat::after { content: ""; position: absolute; right: -3px; top: 3px; width: 1.5px; height: 3px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, .75); }
.ren-bat i { display: block; width: 72%; height: 100%; border-radius: 1px; background: #fff; }
.ren-nt { position: absolute; left: 8px; right: 8px; top: 34px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 7px; row-gap: 2px; align-content: start; align-items: center;
  height: 92px; padding: 9px 10px 0; border-radius: 16px; background: rgba(250, 251, 253, .93); color: var(--ui-text-2); font-size: 10px; line-height: 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 22px -12px rgba(0, 0, 0, .5);
  opacity: 0; translate: 0 -16px; scale: .94; transform-origin: 50% 100%;
  transition: opacity .35s var(--ui-ease), translate .6s var(--spring), scale .6s var(--spring), background-color .4s var(--ui-ease); }
.ren-nt img { width: 20px; height: 20px; border-radius: 5px; }
.ren-nt__app { min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--ui-muted); }
.ren-nt em { font-style: normal; font-size: 10px; color: var(--ui-muted); }
.ren-nt b { grid-column: 1 / -1; margin-top: 3px; font-size: 10.5px; font-weight: 800; line-height: 13px; color: var(--ui-text); }
.ren-nt__m { grid-column: 1 / -1; }
/* yığının arkasındaki kartın yazısı öndekinin altından sızmaz */
.ren-nt--2 > * { transition: opacity .3s var(--ui-ease); }
.ren.s7 .ren-nt--2 > * { opacity: 0; transition-delay: 1.5s; }
/* önce Ela'nın bildirimi gelir; Can'ınki üste oturunca Ela'nınki yığının arkasına iner */
.ren-nt--1 { z-index: 1; background-color: #fafbfd; }   /* öndeki kart opak: arkadaki kart içinden görünmesin */
.ren.s7 .ren-nt--1 { opacity: 1; translate: 0 0; scale: 1; transition-delay: 1.45s; }
.ren.s7 .ren-nt--2 { opacity: 1; translate: 0 10px; scale: .93; background-color: rgba(226, 232, 241, .84); animation: ren-stack 1.3s linear .7s both; }
@keyframes ren-stack {
  0% { opacity: 0; translate: 0 -16px; scale: .94; background-color: rgba(250, 251, 253, .93); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  31% { opacity: 1; translate: 0 0; scale: 1; background-color: rgba(250, 251, 253, .93); }
  58% { opacity: 1; translate: 0 0; scale: 1; background-color: rgba(250, 251, 253, .93); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  100% { opacity: 1; translate: 0 10px; scale: .93; background-color: rgba(226, 232, 241, .84); } }
.ren-ph__home { position: absolute; left: 50%; bottom: 8px; width: 74px; height: 4px; margin-left: -37px; border-radius: 999px; background: rgba(255, 255, 255, .8); }

/* ── DAR KAPLAR ── */
/* 621–660: «Nasıl çalışır?» yazılı düğmenin yanında bandın uzun alt satırı tek satıra sığsın */
@container (620px < width <= 660px) {
  .ren-sub { font-size: 10.5px; }
}
@container (max-width: 620px) {
  .ren-win { --H: 464px; --bh: 70px; --tr: 34px; --c: 114px; --cn: 129px; --Vn: 242; }
  .ren-vp { --ya: var(--y3s); --yb: var(--y4s); --L: var(--Ls); }
  .ren-sub > * { white-space: normal; text-wrap: balance; }
  .ren-sub { min-height: 30px; }
  .ren-kad { display: none; }
  .ren-tp__w { display: none; }
  .ren-tp__n { display: flex; }
  .ren-ch { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
  .ren-ct { flex: none; }
  .ren-sel--card { width: 100%; }
  .ren-bar__t--l { display: none; }
  .ren-bar__t--k { display: block; }
  .ren-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ren-tile { height: 64px; padding-top: 7px; }
  .ren-ln { max-width: calc(100% - 36px); }   /* telefonun yuvarlak sağ üst köşesinin yanında satır sonu kalmasın */
  .ren-ph { --phv: 166px; }
  .ren-how { width: 30px; padding: 0; }
  .ren-how__t { display: none; }
}
@container (max-width: 470px) {
  .ren-win { --H: 480px; --bh: 66px; --fr: 40px; --Vn: 262; }
  .ren-band { gap: 10px; padding: 0 10px; }
  .ren-ico, .ren-hb { display: none; }
  .ren-h1 b { font-size: 13.5px; }
  .ren-sub { font-size: 10.5px; line-height: 14px; min-height: 28px; }
  .ren-okul { display: none; }
  .ren-sel--term { flex: 1; width: auto; }
  .ren-sel--term > .ren-hit--term, .ren-op--1 > .ren-hit { left: auto; right: 34px; }
  .ren-ch { padding: 0 10px; }
  .ren-cs { padding: 0 10px; }
  .ren-so, .ren-cs__l { display: none; }
  .ren-bar { gap: 8px; padding: 0 6px 0 10px; height: 50px; }
  .ren-go { padding: 0 11px; font-size: 11.5px; }
  .ren-go .ren-i { display: none; }
  .ren-go > .ren-hit { right: 24px; }
  .ren-res { padding: 10px 10px 0; }
  .ren-sum { padding: 10px 10px 12px; }
  .ren-tile b { font-size: 19px; }
  .ren-sw { padding: 16px 14px 14px; }
  .ren-sw__b { font-size: 11px; }
  .ren-ph { --phv: 184px; right: 50%; margin-right: -116px; }
  .ren-ln { max-width: none; }
  /* telefon ortada, sonuç satırlarının üstüne oturur: arkada kesik yazı kalmasın (471–620'de satırlar görünür, telefon sağda) */
  .ren.s7 .ren-ln, .ren.s7 .ren-acts { opacity: 0; }
}