/* SAHNE · ETÜT: SINAV SONUCUNDAN KİTLE → CANLI ÖNİZLEME → OLUŞTUR (includes/scenes/study-hall.php) — adımlar:
   s1 «Sınav sonucuna göre» → panel boş açılır, Sınav · Ders · Eşik 12 sırayla dolar, sayfa düğmeye iner ·
   s2 «Öğrencileri getir» → 21 öğrenci, Özet dolar, «Denetleniyor…» · s3 önizleme 21 / 15 / 6,
   başka görevde 1, «Oluştur (15)» · s4 «6 öğrenci eklenmeyecek» açılır · s5 «Oluştur (15)» → üç seçenekli pencere ·
   s6 «Hepsini ekle» → etüt sayfası + «Başarılı» · s7 «Tamam» → katılımcı listesi + öğrenciye/veliye «Yeni etüt planlandı».
   Kaydırma: içerik kendi yüksekliğine göre (translate %) görünür alanın altına hizalanır — metin sarsa da hedef görünür kalır. */
@property --etu-a { syntax: '<integer>'; inherits: false; initial-value: 0; }

.etu { container-type: inline-size; --d: 0s; --etu-spring: cubic-bezier(.34, 1.56, .64, 1); --etu-scroll: cubic-bezier(.32, .12, .2, 1);
  --etu-amb: #78350f; --etu-amb-bg: #fffbeb; --etu-amb-ln: #fcd34d; }
.etu.s1 { --d: .5s; } .etu.s2 { --d: 1.05s; } .etu.s3 { --d: .2s; } .etu.s4 { --d: .5s; } .etu.s5 { --d: .6s; } .etu.s6 { --d: .7s; } .etu.s7 { --d: .55s; }
.etu-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ölçüler: pencere yüksekliği sabit; alt alanların yükseklikleri bundan hesaplanır (kaydırma hedefi için) */
.etu-win { --H: 456px; --bh: 52px; --bm: 12px; --pad: 12px; --ow: 262px; --acts: 72px; --og: 10px; --oh: 36px;
  --inner: calc(var(--H) - var(--bm) - var(--bh) - 2px - 2 * var(--pad));
  --mh: var(--inner);
  --vpo: calc(var(--inner) - var(--acts) - var(--og) - var(--oh));
  position: relative; display: flex; flex-direction: column; height: var(--H); background: #f5f6f8; }

/* çapraz geçiş: katmanlar aynı ızgara hücresinde üst üste; etu-vA-B = A. adımdan B. adıma kadar görünür */
.etu-x { display: grid; min-width: 0; }
.etu-x > * { grid-area: 1 / 1; min-width: 0; }
.etu [class*="etu-v"] { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.etu:not(.s1) .etu-v0-1, .etu.s1 .etu-v1, .etu:not(.s2) .etu-v0-2, .etu.s2 .etu-v2, .etu.s2:not(.s3) .etu-v2-3, .etu:not(.s3) .etu-v0-3,
.etu.s3 .etu-v3, .etu:not(.s6) .etu-v0-6, .etu.s6 .etu-v6 { opacity: 1; transform: none; }

/* imleç: .etu-hit tıklama noktası; ok ucu tam orada, halka dalgası çevresinde */
.etu-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.etu-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); }
.etu-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 etu-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes etu-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 32% { opacity: 1; transform: none; scale: 1; } 46% { scale: .8; } 58% { scale: 1; } 74% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes etu-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes etu-push { 50% { scale: .95; } }
@keyframes etu-say { from { --etu-a: 0; } }

/* ── başlık bandı (kurum rengi) ── */
.etu-band { flex: none; display: flex; align-items: center; gap: 10px; height: var(--bh); margin: var(--bm) var(--bm) 0; padding: 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); }
.etu-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); }
.etu-ico .etu-i { width: 18px; height: 18px; stroke-width: 1.8; }
.etu-ttl { flex: 1; min-width: 0; overflow: hidden; }
.etu-ttl > * > b { display: flex; align-items: center; gap: 5px; font-size: 15px; line-height: 19px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.etu-ttl .etu-q { width: 14px; height: 14px; opacity: .78; }
.etu-ttl small { display: block; margin-top: 1px; font-size: 11px; line-height: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; font-variant-numeric: tabular-nums; }
.etu-bbtn { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 11.5px; font-weight: 700;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.etu-bbtn .etu-i { width: 13px; height: 13px; }

/* ── gövde: bölüm kartı | Özet + eylemler ── */
.etu-body { position: relative; flex: 1; min-height: 0; padding: var(--pad); }
.etu-form { display: grid; height: 100%; grid-template-columns: minmax(0, 1fr) var(--ow); grid-template-rows: minmax(0, 1fr) var(--acts); gap: var(--og) 12px;
  grid-template-areas: "m o" "m a"; transition: opacity .35s var(--ui-ease); }
.etu-main, .etu-oz { position: relative; min-height: 0; border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), 0 12px 24px -20px rgba(16, 37, 64, .35); }
.etu-main { grid-area: m; }
.etu-scr { translate: 0 0; transition: translate .7s var(--etu-scroll) 1.9s; }
/* s1: alanlar dolduktan sonra sayfa «Öğrencileri getir»e iner. Sonuç listesi s1'de kapalı olduğundan içeriğin altı = düğme + panel
   boşlukları; görünür alanın altına hizalanır (her genişlikte, metin sarsa da). s2'de liste açıldıkça aynı hizalama onu izler. */
.etu.s1 .etu-scr { translate: 0 min(0px, calc(-100% + var(--mh))); }
/* kayan sayfanın üst kenarında kalan yarım satır kırıntısı söner (Özet'teki üst solmanın eşi); düğme payı değişmez */
.etu-main::after { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 16px; pointer-events: none;
  background: linear-gradient(#fff 25%, rgba(255, 255, 255, 0)); opacity: 0; transition: opacity .3s var(--ui-ease) 1.9s; }
.etu.s1 .etu-main::after { opacity: 1; }

.etu-sec__h { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 7px 14px; background: linear-gradient(180deg, #f3f6fb, #eef3f9); box-shadow: inset 0 -1px 0 #e1e8f1; }
.etu-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 800;
  box-shadow: 0 0 0 3px rgba(20, 61, 107, .12); }
.etu-sec__t { min-width: 0; line-height: 15px; }
.etu-sec__t b { display: block; font-size: 12.5px; font-weight: 800; color: var(--ui-text); }
.etu-sec__t small { display: block; font-size: 10.5px; line-height: 13px; font-weight: 600; color: #52525b; }
.etu-sec__b { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px 12px; }

/* kaynak seçici (Sınıf ve öğrenci | Sınav sonucuna göre) */
.etu-seg { display: inline-flex; align-self: flex-start; height: 34px; padding: 3px; border-radius: 11px; background: #eef0f3; }
.etu-seg__pill { display: none; }
.etu-seg__o { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #52525b; white-space: nowrap;
  transition: color .25s var(--ui-ease) .5s; }
.etu-seg__o::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: 0 1px 2px rgba(16, 37, 64, .12), 0 0 0 1px rgba(16, 37, 64, .04); opacity: 0; scale: .94;
  transition: opacity .25s var(--ui-ease) .5s, scale .35s var(--ui-ease) .5s; }
.etu-seg__o { isolation: isolate; }
.etu-seg__o .etu-i { width: 13px; height: 13px; }
.etu:not(.s1) .etu-seg__o--a, .etu.s1 .etu-seg__o--b { color: var(--navy-soft); }
.etu:not(.s1) .etu-seg__o--a::before, .etu.s1 .etu-seg__o--b::before { opacity: 1; scale: 1; }
.etu-hit--seg { right: 24px; top: 21px; }
.etu.s1:not(.s2) .etu-hit--seg .ui-cur { animation: etu-cur-out 1.1s var(--ui-ease) both; }
.etu.s1:not(.s2) .etu-hit--seg .etu-rip { animation: etu-rip .55s ease-out .42s both; }

/* paneller (liste | sınav) */
.etu-pan { display: grid; }
.etu-pan > * { grid-area: 1 / 1; min-width: 0; }
.etu-grp { display: flex; flex-direction: column; gap: 9px; padding: 11px 12px 12px; border-radius: 12px; background: #fafbfc; box-shadow: inset 0 0 0 1px #e7eaef;
  transition: opacity .3s var(--ui-ease) .5s, translate .4s var(--ui-ease) .5s; }
.etu-sv { opacity: 0; translate: 0 6px; }
.etu.s1 .etu-sv { opacity: 1; translate: 0 0; }
.etu.s1 .etu-liste { opacity: 0; translate: 0 -4px; }
/* liste paneli içeriği kadar: aynı hücredeki uzun sınav paneline gerilmez (altında boş gri kutu kalmaz) */
.etu-liste { position: relative; align-self: start; }
/* 1. bölüm kartı panelin altındaki dolguyla biter, 12 px sayfa zemini, sonra 2. bölümün başlık şeridi (gök tonu) — s0'da kartın
   altı boş kalmaz. Panelin çocuğu: onunla birlikte s1'de söner, kaydırma yüksekliğine katılmaz (konum mutlak). */
.etu-nx { position: absolute; top: calc(100% + 12px); left: -14px; right: -14px; padding-top: 12px; pointer-events: none;
  background: linear-gradient(#f5f6f8, #f5f6f8) 0 0 / 100% 26px no-repeat, #fff; box-shadow: inset 0 1px 0 var(--ui-line); }
.etu-nx::after { content: ""; display: block; height: 120px; }
.etu-nx .etu-sec__h { border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #f1f8fd, #eaf4fb); box-shadow: inset 0 -1px 0 #dce9f2, 0 -1px 0 var(--ui-line); }
.etu-nx .etu-num { background: #0369a1; box-shadow: 0 0 0 3px rgba(3, 105, 161, .12); }
.etu-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.etu-lbl { display: flex; align-items: center; gap: 5px; font-size: 10.5px; line-height: 14px; font-weight: 700; color: #3f3f46; white-space: nowrap; }
.etu-lbl .etu-i { width: 12px; height: 12px; color: #52525b; }
.etu-lbl em { margin-left: auto; font-style: normal; font-weight: 600; color: #52525b; }
.etu-in { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 600; color: var(--ui-text);
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); }
.etu-in > span { min-width: 0; white-space: nowrap; overflow: hidden; }
.etu-mut { color: var(--ui-muted); font-weight: 500; }
.etu-chev { width: 13px; height: 13px; margin-left: auto; color: var(--ui-muted); }
.etu-srch { width: 13px; height: 13px; color: var(--ui-muted); }
.etu-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.etu-f--grp { width: min(100%, 220px); }
.etu-note { font-size: 10px; line-height: 13px; font-weight: 600; color: #52525b; }
.etu-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px 10px; }
.etu-olcu { display: inline-flex; height: 30px; padding: 3px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2); font-size: 11px; font-weight: 700; white-space: nowrap; }
.etu-olcu > * { display: grid; place-items: center; padding: 0 9px; border-radius: 6px; color: #52525b; }
.etu-olcu > b { background: var(--navy-soft); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.etu-f--esik { flex: 1 1 auto; }
.etu-in--n { width: 104px; justify-content: space-between; }
.etu-in--n b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.etu-in--n em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #52525b; }
/* s1: alanlar sırayla dolar (--t): sınav ,95 sn (Ders «— Önce sınav —» → «— Ders seçin —») · ders 1,3 sn · eşik 1,65 sn; her dolan alanda kısa odak halkası */
.etu-in--f { position: relative; }
.etu-in--f > .etu-x { flex: 1 1 auto; }
.etu-in--f::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .16); }
.etu-bos, .etu-dol { transition: opacity .22s var(--ui-ease) var(--t), translate .3s var(--ui-ease) var(--t); }
.etu-dol, .etu-ara { opacity: 0; translate: 0 3px; }
.etu-bos--d { --t: .95s; }
.etu.s1 .etu-bos { opacity: 0; translate: 0 -3px; }
.etu.s1 .etu-dol { opacity: 1; translate: 0 0; }
.etu.s1:not(.s2) .etu-ara { animation: etu-ara .5s linear .95s both; }
.etu.s1:not(.s2) .etu-in--f::after { animation: etu-odak .8s var(--ui-ease) var(--t) both; }
@keyframes etu-ara { 0% { opacity: 0; translate: 0 3px; } 30%, 66% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -3px; } }
@keyframes etu-odak { 0% { opacity: 0; } 22%, 62% { opacity: 1; } 100% { opacity: 0; } }
/* açıklama cümlesi (uygulamada aria-live): boş → ders seçilince «eşiği yazın» → eşikle son cümle; kutu yüksekliği yumuşak değişir */
.etu-acik { display: grid; grid-template-rows: 1fr 0fr; padding: 6px 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line); font-size: 10.5px; line-height: 14px; font-weight: 500; color: #3f3f46; text-wrap: pretty;
  transition: grid-template-rows .35s var(--ui-ease) 1.3s; }
.etu-acik > * { min-height: 0; overflow: hidden; }
.etu-acik__0 { transition: opacity .2s var(--ui-ease) 1.3s; }
.etu.s1 .etu-acik { grid-template-rows: 0fr 1fr; }
.etu.s1 .etu-acik__0 { opacity: 0; }
.etu-acik__a, .etu-acik__b { transition: opacity .22s var(--ui-ease) 1.65s; }
.etu-acik__b { opacity: 0; }
.etu.s1 .etu-acik__a { opacity: 0; }
.etu.s1 .etu-acik__b { opacity: 1; }
.etu-get { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 10px; background: #18181b; color: #fff; font-size: 11.5px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .2), 0 6px 12px -8px rgba(0, 0, 0, .55); }
.etu-get .etu-i { width: 13px; height: 13px; }
.etu-hit--get { right: 32px; top: 20px; }
.etu.s2:not(.s3) .etu-get { animation: etu-push .3s var(--ui-ease) .42s; }
.etu.s2:not(.s3) .etu-hit--get .ui-cur { animation: etu-cur-out 1.1s var(--ui-ease) both; }
.etu.s2:not(.s3) .etu-hit--get .etu-rip { animation: etu-rip .55s ease-out .42s both; }

/* bulunan öğrenciler */
.etu-resw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .75s var(--etu-scroll) .7s; }
.etu.s2 .etu-resw { grid-template-rows: 1fr; }
/* liste açılırken satırlar ezilmez, kırpılır */
.etu-res > * { flex: none; }
.etu-res { min-height: 0; position: relative; display: flex; flex-direction: column; border-radius: 11px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px #e4e4e7;
  opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease) .7s, translate .45s var(--ui-ease) .7s; }
.etu-res::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.etu.s2 .etu-res { opacity: 1; translate: 0 0; }
.etu-res__h { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; box-shadow: inset 0 -1px 0 #f1f1f3; font-size: 11px; line-height: 15px; font-weight: 700; color: #27272a; }
.etu-res__h .etu-i { width: 14px; height: 14px; margin-top: 1px; color: var(--navy-soft); }
.etu-res__h b { font-weight: 800; font-variant-numeric: tabular-nums; }
.etu-res__h small { font-size: 10.5px; font-weight: 500; color: #52525b; }
.etu-rr { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; box-shadow: inset 0 -1px 0 #f3f4f6;
  opacity: 0; translate: 0 5px; transition: opacity .3s var(--ui-ease) calc(.85s + var(--i) * 60ms), translate .35s var(--ui-ease) calc(.85s + var(--i) * 60ms); }
.etu.s2 .etu-rr { opacity: 1; translate: 0 0; }
.etu-cb { flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--navy-soft); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.etu-cb .etu-i { width: 10px; height: 10px; stroke-width: 3; }
.etu-rr__ad { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 500; color: #52525b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etu-rr__ad b { font-weight: 700; color: var(--ui-text); }
.etu-rr__n { flex: none; font-size: 10.5px; font-weight: 700; color: #3f3f46; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Özet kartı + canlı önizleme ── */
.etu-oz { grid-area: o; display: flex; flex-direction: column; }
.etu-oz__h { flex: none; display: flex; align-items: center; gap: 6px; height: var(--oh); padding: 0 12px; box-shadow: inset 0 -1px 0 var(--ui-line); }
.etu-oz__h > .etu-i { color: var(--navy-soft); }
.etu-oz__h > b { font-size: 12.5px; font-weight: 800; }
.etu-dur { margin-left: auto; justify-items: end; font-size: 10px; font-weight: 600; color: #3f3f46; white-space: nowrap; }
.etu-oz__vp { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.etu-oz__vp::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 14px; pointer-events: none; }
.etu-oz__vp::before { top: 0; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); opacity: 0; transition: opacity .3s var(--ui-ease) .4s; }
.etu.s3 .etu-oz__vp::before { opacity: 1; }
.etu-oz__scr { padding: 10px 12px 12px; translate: 0 0; transition: translate .8s var(--etu-scroll) .35s; }
.etu.s3 .etu-oz__scr { translate: 0 min(0px, calc(-100% + var(--vpo))); }
.etu.s4 .etu-oz__scr { transition-delay: .5s; transition-duration: .5s; }
.etu-dl { display: flex; flex-direction: column; gap: 4px; }
.etu-dl__r { display: block; }
.etu-dl__r small { display: block; font-size: 10px; line-height: 12px; font-weight: 600; color: #52525b; }
.etu-dl__r .etu-x > * { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ui-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.etu-dl__r .etu-v2 { color: var(--navy); }
.etu-on { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef0f3; }
.etu-on__ph { font-size: 10.5px; line-height: 15px; font-weight: 500; color: #3f3f46; transition: opacity .25s var(--ui-ease) .2s; }
.etu.s3 .etu-on__ph { opacity: 0; }
.etu-on__r { display: flex; flex-direction: column; gap: 8px; opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) .25s, translate .4s var(--ui-ease) .25s; }
.etu.s3 .etu-on__r { opacity: 1; translate: 0 0; }
.etu-k3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.etu-k { display: flex; flex-direction: column; align-items: center; padding: 5px 4px 5px; border-radius: 10px; line-height: 1; }
.etu-k b { font-size: 17px; line-height: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.etu-k small { margin-top: 1px; font-size: 10px; line-height: 12px; font-weight: 700; }
.etu-k--d { background: #fafafa; box-shadow: inset 0 0 0 1px #e4e4e7; color: #52525b; } .etu-k--d b { color: #18181b; }
.etu-k--a { background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; color: #065f46; }
.etu-k--e { background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; color: #991b1b; }
.etu-n { counter-reset: n var(--etu-a); transition: --etu-a .9s var(--ui-ease) .35s; }
.etu-n::after { content: counter(n); }
.etu.s3 .etu-n--sec { --etu-a: 21; } .etu.s3 .etu-n--ekl { --etu-a: 15; } .etu.s3 .etu-n--dus { --etu-a: 6; }
/* başka görevde (kulüp) */
.etu-bk { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px 9px; border-radius: 11px; background: var(--etu-amb-bg); box-shadow: inset 0 0 0 1px var(--etu-amb-ln); color: var(--etu-amb); }
.etu-bk__s { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 14px; font-weight: 800; }
.etu-bk__s .etu-i { width: 13px; height: 13px; margin-top: 1px; }
.etu-bk__li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 10.5px; line-height: 14px; font-weight: 600; }
.etu-bk__li em { font-style: normal; padding: 0 6px; border-radius: 999px; background: #fde68a; font-size: 10px; line-height: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.etu-bk__li b { font-weight: 800; }
.etu-bk__p { font-size: 10px; line-height: 13px; font-weight: 500; }
/* eklenmeyecekler (5'ten çok: kapalı gelir) */
.etu-ds { border-radius: 11px; box-shadow: inset 0 0 0 1px #e4e4e7; }
.etu-ds__s { position: relative; display: flex; align-items: center; height: 32px; padding: 0 10px; font-size: 11px; font-weight: 800; color: #27272a; }
.etu-ds__l { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ui-ease) .5s; }
.etu.s4 .etu-ds__l { grid-template-rows: 1fr; }
.etu-ds__in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 0 10px; }
.etu-ds__in > span { font-size: 10px; line-height: 13px; font-weight: 500; color: #3f3f46; opacity: 0; translate: 0 4px; transition: opacity .3s var(--ui-ease) calc(.6s + var(--i) * 50ms), translate .35s var(--ui-ease) calc(.6s + var(--i) * 50ms); }
.etu-ds__in > span:last-child { margin-bottom: 9px; }
.etu.s4 .etu-ds__in > span { opacity: 1; translate: 0 0; }
.etu-hit--ds { left: 62%; top: 21px; }
.etu.s4:not(.s5) .etu-hit--ds .ui-cur { animation: etu-cur-out 1.1s var(--ui-ease) both; }
.etu.s4:not(.s5) .etu-hit--ds .etu-rip { animation: etu-rip .55s ease-out .42s both; }

/* eylemler: Önizle · Oluştur (yalnız temiz önizlemeden sonra) */
.etu-acts { grid-area: a; display: flex; flex-direction: column; gap: 8px; }
.etu-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.etu-btn .etu-i { width: 14px; height: 14px; }
.etu-btn--on { background: #fff; color: var(--navy-soft); box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .38), 0 1px 2px rgba(16, 37, 64, .05); }
.etu-btn--ok { 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 8px 16px -9px rgba(20, 61, 107, .8);
  opacity: 0; translate: 0 5px; transition: opacity .3s var(--ui-ease) .7s, translate .45s var(--etu-spring) .7s; }
.etu.s3 .etu-btn--ok { opacity: 1; translate: 0 0; }
.etu-hit--ok { right: 36px; top: 21px; }
.etu.s5 .etu-btn--ok { animation: etu-push .3s var(--ui-ease) .42s; }
.etu.s5:not(.s6) .etu-hit--ok .ui-cur { animation: etu-cur .9s var(--ui-ease) both; }
.etu.s5:not(.s6) .etu-hit--ok .etu-rip { animation: etu-rip .55s ease-out .42s both; }

/* ── kayıttan sonra: etüt sayfası ── */
.etu-det { position: absolute; z-index: 3; inset: 0; padding: var(--pad); overflow: hidden; background: #f5f6f8; opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ui-ease) .7s; }
.etu.s6 .etu-det { opacity: 1; }
.etu-det__scr { display: flex; flex-direction: column; gap: 10px; translate: 0 0; transition: translate .9s var(--etu-scroll) .75s; }
/* s7: sayfa katılımcı listesine iner — üst kenar bir SATIR SINIRINA oturur (yarım satır kalmaz): Ilgın Bozkurt (7. satır) tam
   tepede. 344 = rozet şeridi 46 + 10 + kart üst dolgusu 2 + başlık 46 + 6 satır × 40. Tolga'nın notu sarsa da tepe kaymaz
   (üstten sayılır); kalan 9 satır + alt dolgu her genişlikte sığar. */
.etu.s7 .etu-det__scr { translate: 0 calc(-344px - var(--pad)); }
.etu-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); }
.etu-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; font-size: 11px; font-weight: 700; color: #27272a; white-space: nowrap; }
.etu-chip .etu-i { width: 12px; height: 12px; color: #52525b; }
.etu-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.etu-kat { display: flex; flex-direction: column; padding: 2px 14px 18px; border-radius: 14px; 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); }
.etu-kat__h { display: flex; align-items: center; gap: 8px; height: 46px; }
.etu-kat__ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ui-primary-soft); color: var(--navy-soft); }
.etu-kat__ico .etu-i { width: 14px; height: 14px; }
.etu-kat__h > b { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.etu-kat__a { margin-left: auto; display: flex; gap: 6px; }
.etu-kat__a > span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px #e4e4e7; font-size: 11px; font-weight: 700; color: #3f3f46; white-space: nowrap; }
.etu-kat__a > .etu-kat__odev { color: var(--navy-soft); box-shadow: inset 0 0 0 1px #c7d7ea; }
.etu-kat__a i { font-style: normal; }
.etu-kat__a .etu-i { width: 13px; height: 13px; }
.etu-kr { display: flex; flex-direction: column; justify-content: center; min-height: 40px; padding: 5px 0; box-shadow: inset 0 1px 0 #f1f2f4; }
.etu-kr b { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ui-text); }
.etu-kr small { font-size: 10.5px; line-height: 14px; font-weight: 500; color: #52525b; }
/* başka görevdeki öğrencinin notu (uygulamada text-amber-800; satırın kendisi düz — «listede işaretli» = bu sarı not) */
.etu-kr em { font-style: normal; color: #92400e; font-weight: 600; }

/* ── pencereler (SweetAlert) ── */
.etu-ov { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .42); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ui-ease); }
.etu-dlg { display: flex; flex-direction: column; align-items: center; width: min(400px, 100%); padding: 18px 16px 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 48px -18px rgba(0, 0, 0, .55); scale: .92; transition: scale .45s var(--etu-spring); }
.etu-dlg__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.etu-dlg__i--w { box-shadow: inset 0 0 0 3px #f8bb86; color: #f8bb86; font-size: 26px; font-weight: 600; line-height: 1; }
.etu-dlg__i--s { box-shadow: inset 0 0 0 3px rgba(165, 220, 134, .45); color: #a5dc86; }
.etu-dlg__i--s .etu-i { width: 24px; height: 24px; stroke-width: 3; }
.etu-dlg__t { margin-top: 10px; font-size: 15px; line-height: 19px; font-weight: 800; color: #18181b; letter-spacing: -.01em; }
.etu-dlg__x { margin-top: 6px; font-size: 11.5px; line-height: 16px; font-weight: 500; color: #3f3f46; text-wrap: balance; }
.etu-dlg__li { align-self: stretch; margin: 7px 0 1px; font-size: 11px; line-height: 15px; font-weight: 500; color: #3f3f46; text-align: left; }
.etu-dlg__b { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.etu-sw { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.etu-sw--c { background: #71717a; } .etu-sw--d { background: #52525b; } .etu-sw--y { background: #18181b; }
.etu-hit--all { right: 24px; top: 20px; }
.etu-hit--tamam { right: 16px; top: 20px; }
.etu.s5:not(.s6) .etu-ov--q { opacity: 1; transition-delay: .6s; }
.etu.s5:not(.s6) .etu-ov--q .etu-dlg { scale: 1; transition-delay: .6s; }
.etu.s6:not(.s7) .etu-ov--q { animation: etu-ovq .75s linear both; }
@keyframes etu-ovq { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.etu.s6:not(.s7) .etu-ov--q .etu-dlg { scale: 1; }
.etu.s6:not(.s7) .etu-ov--q .etu-sw--y { animation: etu-push .3s var(--ui-ease) .4s; }
.etu.s6:not(.s7) .etu-hit--all .ui-cur { animation: etu-cur .7s var(--ui-ease) both; }
.etu.s6:not(.s7) .etu-hit--all .etu-rip { animation: etu-rip .55s ease-out .38s both; }
.etu.s6:not(.s7) .etu-ov--s { opacity: 1; transition-delay: 1.15s; }
.etu.s6:not(.s7) .etu-ov--s .etu-dlg { scale: 1; transition-delay: 1.15s; }
.etu.s7 .etu-ov--s { animation: etu-ovs .7s linear both; }
@keyframes etu-ovs { 0%, 64% { opacity: 1; } 100% { opacity: 0; } }
.etu.s7 .etu-ov--s .etu-dlg { scale: 1; }
.etu.s7 .etu-ov--s .etu-sw--y { animation: etu-push .3s var(--ui-ease) .36s; }
.etu.s7 .etu-hit--tamam .ui-cur { animation: etu-cur-out .9s var(--ui-ease) both; }
.etu.s7 .etu-hit--tamam .etu-rip { animation: etu-rip .55s ease-out .36s both; }

/* ── öğrenciye ve veliye giden bildirim ── */
.etu-nt { position: absolute; z-index: 9; top: 8px; right: 10px; width: min(318px, calc(100% - 20px)); display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px;
  padding: 9px 11px 13px 10px; border-radius: 15px; background: rgba(255, 255, 255, .96); -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 22px 38px -14px rgba(16, 37, 64, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10.5px; font-weight: 500; line-height: 1.38; color: var(--ui-text-2); opacity: 0; translate: 0 -125%;
  transition: opacity .3s var(--ui-ease), translate .7s cubic-bezier(.34, 1.4, .64, 1); }
.etu-nt img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.etu-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.etu-nt__h b { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 800; color: var(--ui-text); letter-spacing: -.005em; }
.etu-nt__h em { flex: none; font-style: normal; font-size: 10px; color: var(--ui-muted); }
.etu-nt__tag { position: absolute; right: 10px; bottom: -10px; 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(--etu-spring); }
.etu-nt__tag .etu-i { width: 11px; height: 11px; stroke-width: 2.4; }
.etu-nt__nb { white-space: nowrap; }
.etu.s7 .etu-nt { opacity: 1; translate: 0 0; transition-delay: 1.25s; }
.etu.s7 .etu-nt__tag { opacity: 1; scale: 1; transition-delay: 1.85s; }

/* ══ DAR KAP: tek sütun — bölüm kartı ve Özet aynı hücrede (telefonda sayfa aşağı kayar), eylemler altta yapışkan çubuk ══ */
@container (max-width: 599px) {
  .etu-win { --H: 470px; --bm: 10px; --pad: 10px; --acts: 32px; --mh: calc(var(--inner) - var(--acts) - var(--og)); }
  .etu-form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "m" "a"; }
  .etu-oz { grid-area: m; opacity: 0; translate: 0 24px; transition: opacity .35s var(--ui-ease) .15s, translate .6s var(--etu-scroll) .15s; }
  .etu-main { transition: opacity .3s var(--ui-ease) .1s, translate .6s var(--etu-scroll) .1s; }
  .etu.s3 .etu-main { opacity: 0; translate: 0 -24px; }
  /* dar kapta s2'de liste açılınca «Öğrencileri getir» tepeye çıkar: solma düğmeyi beyazlatmasın (liste açılmaya başlarken söner) */
  .etu.s2 .etu-main::after { opacity: 0; transition-delay: .7s; }
  .etu.s3 .etu-oz { opacity: 1; translate: 0 0; }
  .etu-acts { flex-direction: row; gap: 0; }
  .etu-btn--on { flex: 1 1 0; }
  .etu-btn--ok { flex: 0 0 auto; max-width: 0; padding: 0; margin-left: 0; overflow: hidden;
    transition: opacity .3s var(--ui-ease) .7s, translate .45s var(--etu-spring) .7s, max-width .45s var(--ui-ease) .6s, padding .45s var(--ui-ease) .6s, margin .45s var(--ui-ease) .6s; }
  .etu.s3 .etu-btn--ok { max-width: 200px; padding: 0 14px; margin-left: 8px; overflow: visible; }
  .etu-kat__a i { display: none; }
  .etu-kat__a > span { padding: 0 8px; }
}
@container (max-width: 560px) {
  .etu-okul, .etu-don { display: none; }
}
@container (max-width: 470px) {
  .etu-two { grid-template-columns: minmax(0, 1fr); }
  .etu-two > :last-child { display: none; }
  .etu-f--grp { width: 100%; }
}
@container (max-width: 420px) {
  .etu-ico { display: none; }
  .etu-seg { align-self: stretch; }
  .etu-seg__o { flex: 1; padding: 0 6px; }
  .etu-seg__o .etu-i { display: none; }
  .etu-tarih, .etu-esik-x { display: none; }
  .etu-sec__h { padding: 7px 12px; }
  .etu-sec__b { padding: 10px 12px; }
  .etu-nx { top: calc(100% + 10px); left: -12px; right: -12px; }
  /* rozet şeridi tek satırda kalır (s7 kaydırması 46 px'lik şeride göre sayılır) */
  .etu-chips { gap: 5px; padding: 10px; }
  .etu-chip { padding: 0 8px; }
  .etu-grp { padding: 10px; }
  .etu-rr { gap: 7px; padding: 0 8px; }
  .etu-rr__ad { font-size: 11px; }
  .etu-rr__n { font-size: 10px; }
  .etu-dlg { padding: 16px 12px 14px; }
}
/* 360 px telefonda kap ~320 px: bildirim kartı 10 px genişler — gövde iki satırda kalır, listedeki ilk adı örtmez */
@container (max-width: 329px) {
  .etu-nt { right: 5px; width: calc(100% - 10px); }
}
@container (max-width: 319px) {
  .etu-chip .etu-i { display: none; }
}