/* SAHNE · ÖĞRENCİ GRUPLARI (includes/scenes/student-groups.php) — adımlar:
   s1 «Öğrenci ekle» → ekleme paneli açılır, sayfa panele kayar · s2 «Sınıftan seç» · s3 «8-B (20)» → Yükleniyor… → aday listesi ·
   s4 üç öğrenci işaretlenir (3 öğrenci seçildi) · s5 «Gruba ekle» → sayfa yenilenir, «3 öğrenci gruba eklendi.», 12 öğrenci ·
   s6 «8-B» yongası → 8-B süzülür, «Yeni» rozetleri · s7 «Ödev ver» · s8 «Yeni ödev» formu grup seçili açılır.
   Kaydırma miktarları (--sc, --sc6) ve liste yüksekliği (--alh) kap genişliğine göre değişkenlerde. */
@property --sgr-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.sgr { container-type: inline-size; --d: 0s;
  --sgr-ok: #047857; --sgr-ok-ink: #065f46; --sgr-spring: cubic-bezier(.34, 1.56, .64, 1); }
.sgr.s1 { --d: .45s; } .sgr.s2 { --d: .4s; } .sgr.s3 { --d: .45s; } .sgr.s4 { --d: .3s; } .sgr.s5 { --d: .7s; } .sgr.s6 { --d: .45s; } .sgr.s7 { --d: 0s; } .sgr.s8 { --d: .2s; }
.sgr-win { --H: 452px; --sc: 112px; --sc6: 44px; --alh: 120px; position: relative; display: flex; flex-direction: column; height: var(--H); }
.sgr-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sgr-chv { width: 12px; height: 12px; stroke-width: 2.2; opacity: .8; }
.sgr-hq { width: 14px; height: 14px; stroke-width: 1.8; }

/* çapraz geçiş: aynı ızgara hücresinde üst üste; data-w="A-B" = A. adımdan B. adıma kadar görünür */
.sgr-x { display: inline-grid; min-width: 0; vertical-align: top; }
.sgr-x > * { grid-area: 1 / 1; min-width: 0; }
.sgr [data-w] { opacity: 0; translate: 0 3px; transition: opacity .28s var(--ui-ease) var(--d), translate .32s var(--ui-ease) var(--d); }
.sgr:not(.s2) [data-w="0-2"], .sgr.s2 [data-w="2"], .sgr:not(.s3) [data-w="0-3"], .sgr.s3 [data-w="3"],
.sgr:not(.s5) [data-w="0-5"], .sgr.s5 [data-w="5"] { opacity: 1; translate: 0 0; }

/* imleç: .sgr-hit tıklama noktasıdır; ok ucu tam orada, halka dalgası çevresinde */
.sgr-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.sgr-hit .ui-cur, .sgr-tk .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.sgr-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 sgr-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 sgr-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 32% { opacity: 1; transform: none; scale: 1; } 45% { scale: .8; } 57% { scale: 1; } 76% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sgr-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes sgr-push { 50% { scale: .95; } }
@keyframes sgr-reload { 0%, 100% { opacity: 1; } 32%, 58% { opacity: 0; } }
@keyframes sgr-pop { 0% { scale: .5; } 60% { scale: 1.18; } 100% { scale: 1; } }

/* onay kutusu (uygulamanın brand-600 işareti, burada lacivert) */
.sgr-cb { position: relative; flex: none; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px #c9cfd8;
  transition: background-color .18s var(--ui-ease), box-shadow .18s var(--ui-ease); }
.sgr-cbk { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale: .4; transition: opacity .15s var(--ui-ease), scale .3s var(--sgr-spring); }
.sgr-cb.on, .sgr-ai--u .sgr-cb { background: var(--navy-soft); box-shadow: none; }
.sgr-cb.on .sgr-cbk, .sgr-ai--u .sgr-cbk { opacity: 1; scale: 1; }
.sgr-ai--u .sgr-cb { opacity: .45; }

/* ── bant (kurum rengi) ── */
.sgr-band { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; margin: 12px 12px 0; padding: 0 10px 0 9px; 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); }
.sgr-bico { 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, .22); }
.sgr-bico .sgr-i { width: 18px; height: 18px; stroke-width: 1.8; }
.sgr-bt { flex: 1; min-width: 0; line-height: 19px; }
.sgr-bt > b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.sgr-bt > b .sgr-hq { width: 15px; height: 15px; opacity: .75; }
.sgr-bt small { display: block; font-size: 11px; line-height: 15px; font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sgr-bb { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sgr-bb .sgr-i { width: 13px; height: 13px; stroke-width: 2.2; }
.sgr-bb--gh { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.sgr-bb--new { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(11, 36, 64, .25), inset 0 -1px 0 rgba(16, 37, 64, .08); }

/* ── sahne gövdesi (sayfa kayar) ── */
.sgr-st { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sgr-st::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.sgr-pg { padding: 0 14px; translate: 0 0; transition: translate .62s cubic-bezier(.3, .1, .2, 1) .55s; }
.sgr.s1 .sgr-pg { translate: 0 calc(-1 * var(--sc)); }
/* s5: «Gruba ekle» → sayfa yenilenir (kısa sönme; panel kapanır, sayfa başa döner — sönükken) */
.sgr.s5 .sgr-pg { translate: 0 0; transition: translate 0s linear .72s; animation: sgr-reload .8s ease .42s both; }
.sgr.s6 .sgr-pg { translate: 0 calc(-1 * var(--sc6)); transition: translate .6s cubic-bezier(.3, .1, .2, 1) .95s; }

/* yenilenen sayfanın iletisi */
.sgr-fl { display: grid; grid-template-rows: 0fr; }
.sgr-fl__o { min-height: 0; overflow: hidden; }
.sgr-fl__in { display: flex; align-items: center; gap: 8px; height: 32px; margin-top: 12px; padding: 0 12px; border-radius: 11px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0;
  font-size: 12px; font-weight: 700; color: var(--sgr-ok-ink); white-space: nowrap; opacity: 0; translate: 0 -4px; transition: opacity .3s var(--ui-ease), translate .4s var(--ui-ease); }
.sgr-fl__in .sgr-i { width: 15px; height: 15px; }
.sgr.s5 .sgr-fl { grid-template-rows: 1fr; transition: grid-template-rows 0s linear .72s; }
.sgr.s5 .sgr-fl__in { opacity: 1; translate: 0 0; transition-delay: .95s; }

/* grup kartı başlığı */
.sgr-hd { display: flex; align-items: flex-start; gap: 12px; height: 52px; margin-top: 12px; }
.sgr-hd__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; 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 12px -8px rgba(20, 61, 107, .7); }
.sgr-hd__ico .sgr-i { width: 19px; height: 19px; stroke-width: 1.8; }
.sgr-hd__t { min-width: 0; flex: 1; }
.sgr-hd__t > b { display: block; font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: -.015em; color: #0f172a; white-space: nowrap; }
.sgr-hd__m { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: #52525b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sgr-hd__m b { font-weight: 800; color: #27272a; }
.sgr-hd__d { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: #52525b; white-space: nowrap; }

/* eylem şeridi (sgEylemler) */
.sgr-acts { display: flex; gap: 6px; margin-top: 10px; }
.sgr-ab { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; background: #fff;
  font-size: 12px; font-weight: 700; color: #27272a; white-space: nowrap; box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.sgr-ab--p { 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); }
.sgr-ab--more { box-shadow: none; background: transparent; color: #52525b; padding: 0 8px; }
.sgr-ab .t-em { color: #059669; } .sgr-ab .t-sky { color: #0284c7; } .sgr-ab .t-vi { color: #7c3aed; }
.sgr-ab--odev .sgr-hit { right: 22px; bottom: 9px; }
.sgr.s7 .sgr-ab--odev { animation: sgr-push .3s var(--ui-ease) .32s; }
.sgr.s7 .sgr-ab--odev { background: #f6f8fb; box-shadow: inset 0 0 0 1px #c9d6e6, 0 0 0 3px rgba(29, 79, 134, .12); transition: background-color .2s var(--ui-ease) .3s, box-shadow .2s var(--ui-ease) .3s; }
.sgr.s7:not(.s8) .sgr-hit--odev .ui-cur { animation: sgr-cur .8s var(--ui-ease) both; }
.sgr.s7:not(.s8) .sgr-hit--odev .sgr-rip { animation: sgr-rip .55s ease-out .34s both; }

/* klasör sekmeleri */
.sgr-tabs { display: flex; align-items: flex-end; gap: 2px; height: 36px; margin-top: 10px; box-shadow: inset 0 -1px 0 #e4e4e7; }
.sgr-tab { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 10px 10px 0 0; font-size: 12.5px; font-weight: 700; color: #52525b; white-space: nowrap; }
.sgr-tab .sgr-i { width: 14px; height: 14px; }
.sgr-tab--on { height: 36px; background: #fff; color: var(--navy-soft); font-weight: 800; box-shadow: inset 1px 0 0 #e4e4e7, inset -1px 0 0 #e4e4e7, inset 0 1px 0 #e4e4e7; }
.sgr-tab__n i { display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: #e6eef8; color: var(--navy-soft); font-style: normal; font-size: 10.5px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sgr-tab__s { display: none; }

/* araç çubuğu: üye arama · şube yongaları · Öğrenci ekle */
.sgr-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 8px; }
.sgr-srch { flex: 1 1 120px; max-width: 200px; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 9px; background: #fff;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 1px rgba(16, 37, 64, .03); font-size: 12px; font-weight: 600; color: #a1a1aa; white-space: nowrap; }
.sgr-srch .sgr-i { color: #a1a1aa; }
.sgr-chips { display: flex; gap: 5px; }
.sgr-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7;
  font-size: 11.5px; font-weight: 700; color: #3f3f46; white-space: nowrap; transition: background-color .22s var(--ui-ease) var(--d), color .22s var(--ui-ease) var(--d), box-shadow .22s var(--ui-ease) var(--d); }
.sgr-chip i { font-style: normal; font-weight: 700; opacity: .72; font-variant-numeric: tabular-nums; }
.sgr-chip--all, .sgr.s6 .sgr-chip--b { background: var(--navy-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--navy-soft); }
.sgr.s6 .sgr-chip--all { background: #fff; color: #3f3f46; box-shadow: inset 0 0 0 1px #e4e4e7; }
.sgr-chip--b .sgr-hit { right: 13px; bottom: 8px; }
.sgr.s6 .sgr-chip--b { animation: sgr-push .28s var(--ui-ease) .32s; }
.sgr.s6:not(.s7) .sgr-hit--chip .ui-cur { animation: sgr-cur-out 1.1s var(--ui-ease) both; }
.sgr.s6:not(.s7) .sgr-hit--chip .sgr-rip { animation: sgr-rip .55s ease-out .36s both; }
.sgr-add { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; color: #fff; background: var(--navy-soft);
  font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 64, .2); }
.sgr-add .sgr-hit { right: 30px; bottom: 10px; }
.sgr.s1:not(.s2) .sgr-add { animation: sgr-push .3s var(--ui-ease) .34s; }
.sgr.s1:not(.s2) .sgr-hit--add .ui-cur { animation: sgr-cur-out 1.05s var(--ui-ease) both; }
.sgr.s1:not(.s2) .sgr-hit--add .sgr-rip { animation: sgr-rip .55s ease-out .36s both; }

/* ── ÖĞRENCİ EKLE paneli (satır içi; açılınca yükseklik büyür) ── */
.sgr-ep { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .48s var(--ui-ease) .4s; }
.sgr-ep__o { min-height: 0; overflow: hidden; }
.sgr-ep__in { margin: 0 0 12px; padding: 10px; border-radius: 12px; background: #f7f8fa; box-shadow: inset 0 0 0 1px rgba(219, 223, 229, .9); }
.sgr.s1 .sgr-ep { grid-template-rows: 1fr; }
.sgr.s5 .sgr-ep { grid-template-rows: 0fr; transition: grid-template-rows 0s linear .72s; }
.sgr-ep__r1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sgr-seg { --wa: 148px; --ws: 112px; position: relative; flex: none; display: flex; height: 32px; padding: 2px; border-radius: 9px; background: rgba(212, 216, 222, .62); }
.sgr-seg__k { position: absolute; left: 2px; top: 2px; bottom: 2px; width: var(--wa); border-radius: 7px; background: #fff; box-shadow: 0 1px 2px rgba(16, 37, 64, .12), 0 0 0 .5px rgba(16, 37, 64, .06);
  transition: translate .38s var(--ui-ease) var(--d), width .38s var(--ui-ease) var(--d); }
.sgr.s2 .sgr-seg__k { translate: var(--wa) 0; width: var(--ws); }
.sgr-seg__o { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; font-size: 12px; font-weight: 700; color: #52525b; white-space: nowrap; transition: color .3s var(--ui-ease) var(--d); }
.sgr-seg__o .sgr-i { width: 13px; height: 13px; }
.sgr-seg__o--a { width: var(--wa); color: var(--navy-soft); }
.sgr-seg__o--s { width: var(--ws); }
.sgr.s2 .sgr-seg__o--a { color: #52525b; } .sgr.s2 .sgr-seg__o--s { color: var(--navy-soft); }
.sgr-seg__o--s .sgr-hit { right: 26px; bottom: 9px; }
.sgr.s2:not(.s3) .sgr-hit--seg .ui-cur { animation: sgr-cur .85s var(--ui-ease) both; }
.sgr.s2:not(.s3) .sgr-hit--seg .sgr-rip { animation: sgr-rip .55s ease-out .32s both; }
.sgr-ep__f { flex: 1 1 248px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sgr-ep__fx { flex: 1; display: grid; }
.sgr-in { position: relative; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 9px; background: #fff; font-size: 12px; font-weight: 600; color: #a1a1aa; white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 0 0 1px #d4d4d8; }
.sgr-in--ara { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); }
.sgr .sgr-in--sel { overflow: visible; color: var(--ui-text); font-weight: 700; transition: box-shadow .3s var(--ui-ease), opacity .28s var(--ui-ease) var(--d), translate .32s var(--ui-ease) var(--d); }
.sgr-in--sel > .sgr-x { flex: 1; }
.sgr-mut { color: #71717a; font-weight: 600; }
.sgr.s3:not(.s4) .sgr-in--sel { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); }
.sgr-in--sel .sgr-hit { right: 36px; bottom: 10px; }
.sgr.s3:not(.s4) .sgr-hit--sel .ui-cur { animation: sgr-cur-out 1.1s var(--ui-ease) both; }
.sgr.s3:not(.s4) .sgr-hit--sel .sgr-rip { animation: sgr-rip .55s ease-out .32s both; }
.sgr-kap { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 6px; font-size: 12px; font-weight: 700; color: #52525b; white-space: nowrap; }
.sgr-kap .sgr-i { width: 14px; height: 14px; }

/* liste yüklenince: başlık + iki sütunlu adaylar (yükseklik bu adımda açılır) */
.sgr-ld { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ui-ease) .5s; }
.sgr.s3 .sgr-ld { grid-template-rows: 1fr; }
.sgr-ld__o { min-height: 0; overflow: hidden; }
.sgr-ep__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding-top: 6px; }
.sgr-ep__h > span:first-child { min-width: 0; font-size: 11px; font-weight: 700; color: #52525b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sgr-tum { flex: none; font-size: 11.5px; font-weight: 700; color: var(--navy-soft); }
.sgr-ep__h > * { opacity: 0; transition: opacity .3s var(--ui-ease) 1s; }
.sgr.s3 .sgr-ep__h > * { opacity: 1; }
.sgr-al { position: relative; }
.sgr-al__ld { position: absolute; left: 0; top: 2px; height: 30px; display: flex; align-items: center; padding: 0 8px; font-size: 12px; font-weight: 600; color: #71717a; opacity: 0; }
@keyframes sgr-ld { 0%, 100% { opacity: 0; } 18%, 72% { opacity: 1; } }
.sgr.s3:not(.s4) .sgr-al__ld { animation: sgr-ld .55s linear .5s both; }
.sgr-al__g { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 30px; column-gap: 12px; height: var(--alh); margin-top: 2px; padding-right: 9px; overflow: hidden; }
/* kaydırma çubuğu ipucu (max-h-72 overflow-y-auto) */
.sgr-al::after { content: ""; position: absolute; right: 0; top: 6px; width: 3px; height: 38%; border-radius: 2px; background: rgba(16, 37, 64, .22); opacity: 0; transition: opacity .3s var(--ui-ease) 1.2s; }
.sgr.s3 .sgr-al::after { opacity: 1; }
.sgr-ai { display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; padding: 0 8px; border-radius: 8px;
  opacity: 0; translate: 0 4px; transition: opacity .28s var(--ui-ease) calc(1.02s + var(--i) * 45ms), translate .32s var(--ui-ease) calc(1.02s + var(--i) * 45ms), background-color .2s var(--ui-ease); }
.sgr.s3 .sgr-ai { opacity: 1; translate: 0 0; }
.sgr-ai b { min-width: 0; flex: 1; font-size: 12px; font-weight: 600; color: #27272a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgr-ai small { flex: none; font-size: 11px; font-weight: 700; color: #71717a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sgr-ai--u b { color: #71717a; }
/* s4: üç işaret — parmak/imleç sırayla Buse Özkan, Ceren Arslan, Elisa Sarı */
.sgr-ai--p .sgr-cb { transition-delay: var(--tk, 0s); }
.sgr-ai--p .sgr-cbk { transition-delay: var(--tk, 0s); }
.sgr-ai--p:nth-child(2) { --tk: .35s; } .sgr-ai--p:nth-child(3) { --tk: .84s; } .sgr-ai--p:nth-child(5) { --tk: 1.33s; }
.sgr.s4 .sgr-ai--p .sgr-cb { background: var(--navy-soft); box-shadow: none; }
.sgr.s4 .sgr-ai--p .sgr-cbk { opacity: 1; scale: 1; }
/* imleç konumları: liste genişliğine göre (öğe = liste kadar geniş, yüzde kendi genişliği) */
.sgr-tk { position: absolute; z-index: 7; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; transform-origin: 0 0;
  --ax: calc((100% - 9px) / 2 + 6px + 15px); --ay: 15px; --bx: 15px; --by: 45px; --cx: 15px; --cy: 75px; translate: var(--ax) var(--ay); }
.sgr-tk .ui-cur { opacity: 1; transform: none; }
@keyframes sgr-tk {
  0% { opacity: 0; translate: calc(var(--ax) + 16px) calc(var(--ay) + 14px); scale: 1; }
  14% { opacity: 1; translate: var(--ax) var(--ay); scale: 1; } 19% { scale: .8; } 24% { scale: 1; translate: var(--ax) var(--ay); }
  41% { translate: var(--bx) var(--by); scale: 1; } 47% { scale: .8; } 52% { scale: 1; translate: var(--bx) var(--by); }
  69% { translate: var(--cx) var(--cy); scale: 1; } 75% { scale: .8; } 80% { scale: 1; opacity: 1; }
  100% { opacity: 0; translate: var(--cx) var(--cy); scale: 1; } }
.sgr-tk { opacity: 0; }
.sgr.s4:not(.s5) .sgr-tk { animation: sgr-tk 1.75s var(--ui-ease) both; }

/* alt satır: seçili sayısı + Gruba ekle */
.sgr-ep__ft { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; box-shadow: inset 0 1px 0 #e4e4e7; }
.sgr-ep__ft-t { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; line-height: 15px; color: #52525b; }
.sgr-sec { font-weight: 900; color: var(--navy-soft); counter-reset: n var(--sgr-n); font-variant-numeric: tabular-nums; transition: --sgr-n 1.47s steps(3, start) .35s; }
.sgr-sec::after { content: counter(n) " öğrenci"; }
.sgr.s4 .sgr-sec { --sgr-n: 3; }
.sgr-gek { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; 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);
  opacity: .5; transition: opacity .2s var(--ui-ease) .38s; }
.sgr.s4 .sgr-gek { opacity: 1; }
.sgr-gek .sgr-hit { right: 28px; bottom: 10px; }
.sgr.s5 .sgr-gek { animation: sgr-push .3s var(--ui-ease) .3s; }
.sgr.s5:not(.s6) .sgr-hit--ok .ui-cur { animation: sgr-cur-out .7s var(--ui-ease) both; }
.sgr.s5:not(.s6) .sgr-hit--ok .sgr-rip { animation: sgr-rip .5s ease-out .26s both; }

/* ── üyeler ── */
.sgr-ml { margin: 0 -14px; }
.sgr-mh, .sgr-mr { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.sgr-mh { height: 26px; background: #f6f7f9; box-shadow: inset 0 1px 0 #eef0f3, inset 0 -1px 0 #eef0f3; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #52525b; }
.sgr-mh__n, .sgr-mr__n { flex: 1; min-width: 0; }
.sgr-c-sb { flex: none; width: 56px; } .sgr-c-no { flex: none; width: 48px; font-variant-numeric: tabular-nums; } .sgr-c-x { flex: none; width: 28px; display: grid; place-items: center; }
.sgr-mx { display: grid; }
.sgr-mx > * { grid-area: 1 / 1; min-width: 0; }
.sgr-mr { height: 36px; box-shadow: inset 0 -1px 0 #f1f1f3; font-size: 12px; font-weight: 600; color: #52525b; }
.sgr-mr__l { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sgr-mr__l b { min-width: 0; font-size: 12.5px; font-weight: 600; color: #27272a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgr-mr__l em { flex: none; display: inline-grid; place-items: center; height: 17px; padding: 0 7px; border-radius: 999px; background: #d1fae5; color: var(--sgr-ok-ink); font-style: normal; font-size: 10.5px; font-weight: 700; }
.sgr-mr__n small { display: none; font-size: 11px; font-weight: 600; line-height: 14px; color: #71717a; font-variant-numeric: tabular-nums; }
.sgr-mr .sgr-c-x .sgr-i { width: 15px; height: 15px; color: #71717a; stroke-width: 1.9; }
.sgr-mr--new { background: rgba(236, 253, 245, .75); }
.sgr-mlist--b { opacity: 0; }
.sgr-mlist--b .sgr-mr { opacity: 0; translate: 0 6px; transition: opacity .28s var(--ui-ease) calc(.5s + var(--i) * 60ms), translate .34s var(--ui-ease) calc(.5s + var(--i) * 60ms); }
.sgr-mlist--b .sgr-mr__l em { scale: .5; transition: scale .4s var(--sgr-spring) calc(.75s + var(--i) * 60ms); }
.sgr-mlist--all { transition: opacity .22s var(--ui-ease) .42s; }
.sgr.s6 .sgr-mlist--all { opacity: 0; }
.sgr.s6 .sgr-mlist--b { opacity: 1; }
.sgr.s6 .sgr-mlist--b .sgr-mr { opacity: 1; translate: 0 0; }
.sgr.s6 .sgr-mlist--b .sgr-mr__l em { scale: 1; }

/* ── YENİ ÖDEV formu (grup seçili) ── */
.sgr-hw { position: absolute; z-index: 9; inset: 6px 6px 0; padding: 12px 12px 0; border-radius: 13px 13px 0 0; background: #f5f6f8; pointer-events: none; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 -1px 3px rgba(16, 37, 64, .06), 0 -20px 40px -18px rgba(16, 37, 64, .5);
  opacity: 0; translate: 0 40px; transition: opacity .3s var(--ui-ease), translate .62s cubic-bezier(.3, 1.2, .5, 1); }
.sgr.s8 .sgr-hw { opacity: 1; translate: 0 0; }
.sgr-hw__top { display: flex; align-items: center; gap: 10px; }
.sgr-hw__tt { flex: 1; min-width: 0; }
.sgr-hw__tt small { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; font-weight: 700; color: #52525b; }
.sgr-hw__tt small .sgr-i { width: 12px; height: 12px; stroke-width: 2.2; }
.sgr-hw__tt b { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 18px; line-height: 22px; font-weight: 800; letter-spacing: -.02em; color: #0f172a; white-space: nowrap; }
.sgr-hw__tt b .sgr-hq { width: 16px; height: 16px; color: var(--navy-soft); }
.sgr-bb2 { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; background: #fff; font-size: 12px; font-weight: 700; color: #27272a; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #d4d4d8, 0 1px 2px rgba(16, 37, 64, .05); }
.sgr-hw__d { margin-top: 5px; font-size: 11.5px; line-height: 15px; font-weight: 500; color: #3f3f46; text-wrap: pretty; }
.sgr-hw__g { display: grid; grid-template-columns: 246px minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 10px; }
.sgr-cd { min-width: 0; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px #e4e4e7, 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(.25s + var(--i) * 80ms), translate .45s var(--ui-ease) calc(.25s + var(--i) * 80ms); }
.sgr.s8 .sgr-cd { opacity: 1; translate: 0 0; }
.sgr-cd__h { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; box-shadow: inset 0 -1px 0 #f1f1f3; }
.sgr-cd__h b { font-size: 12.5px; font-weight: 800; color: #18181b; white-space: nowrap; }
.sgr-cd__h .sgr-hq { color: #71717a; }
.sgr-cd__i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e6eef8; color: var(--navy-soft); }
.sgr-cd__i .sgr-i { width: 14px; height: 14px; }
.sgr-cd__b { padding: 8px 10px 10px; }
.sgr-ht { display: flex; height: 30px; box-shadow: inset 0 -1px 0 #e4e4e7; }
.sgr-ht > span { display: flex; align-items: center; padding: 0 9px; font-size: 12px; font-weight: 700; color: #71717a; }
.sgr-ht > .on { color: var(--navy-soft); box-shadow: inset 0 -2px 0 var(--navy-soft); }
.sgr-gr__h, .sgr-sl__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sgr-gr__h { height: 28px; margin-top: 8px; }
.sgr-gr__h > span:first-child, .sgr-sl__h > span:first-child { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #71717a; }
.sgr-gy { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 10.5px; font-weight: 700; color: #52525b; box-shadow: inset 0 0 0 1px #e4e4e7; white-space: nowrap; }
.sgr-gy .sgr-i { width: 12px; height: 12px; }
.sgr-gr { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px; border-radius: 8px; margin-top: 2px; }
.sgr-gr b { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; color: #18181b; white-space: nowrap; }
.sgr-gr small { flex: none; font-size: 10px; font-weight: 600; color: #71717a; }
.sgr-gr--on { background: rgba(230, 238, 248, .6); }
.sgr-gr--on .sgr-cb { animation: none; }
.sgr.s8 .sgr-gr--on .sgr-cb { animation: sgr-pop .45s var(--sgr-spring) .75s both; }
.sgr-sl__h { height: 30px; margin-top: 6px; box-shadow: inset 0 1px 0 #f1f1f3; padding-top: 4px; }
.sgr-tmz { font-size: 10.5px; font-weight: 700; color: var(--navy-soft); }
.sgr-cip { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-top: 4px; padding: 0 7px 0 9px; border-radius: 7px; background: #fafafa; box-shadow: inset 0 0 0 1px #e4e4e7;
  font-size: 11px; font-weight: 700; color: #27272a; white-space: nowrap; opacity: 0; scale: .8; transition: opacity .25s var(--ui-ease) .9s, scale .45s var(--sgr-spring) .9s; }
.sgr.s8 .sgr-cip { opacity: 1; scale: 1; }
.sgr-cip small { font-size: 10px; font-weight: 600; color: #71717a; }
.sgr-cip .sgr-i { width: 11px; height: 11px; stroke-width: 2.6; color: #52525b; }
/* 2. Ödev bilgileri (boş form) */
.sgr-fl2 { display: flex; align-items: center; gap: 5px; height: 16px; font-size: 11.5px; font-weight: 700; color: #18181b; white-space: nowrap; }
.sgr-fl2 .sgr-hq { width: 13px; height: 13px; color: #71717a; }
.sgr-fi { display: flex; align-items: center; gap: 6px; height: 30px; margin: 4px 0 8px; padding: 0 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 11.5px; font-weight: 600; color: #3f3f46; white-space: nowrap; overflow: hidden; }
.sgr-fi > .sgr-i { margin-left: auto; width: 13px; height: 13px; color: #3f3f46; }
.sgr-fi--dt { color: #71717a; letter-spacing: .02em; }
.sgr-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sgr-f2 > span { min-width: 0; }
.sgr-qd { display: flex; flex-wrap: wrap; gap: 5px; margin: -2px 0 8px; }
.sgr-qd span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 10.5px; font-weight: 700; color: #52525b; white-space: nowrap; }
.sgr-yy { display: block; padding: 0 8px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px #e4e4e7; }
.sgr-yy__l { display: inline-flex; align-items: center; gap: 4px; height: 18px; margin-left: 2px; padding: 0 4px; translate: 0 -8px; background: #fff; font-size: 11.5px; font-weight: 700; color: #18181b; }
.sgr-yy__l .sgr-hq { width: 12px; height: 12px; color: #71717a; }
.sgr-yy__b { display: flex; gap: 6px; margin-top: -6px; }
.sgr-yy__b > span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 11.5px; font-weight: 700; color: #3f3f46; white-space: nowrap; }
.sgr-yy__b .sgr-i { width: 13px; height: 13px; }
.sgr-yy__b > .on { background: #eef3fa; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy-soft); }
.sgr-yy small { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 700; color: #71717a; }
/* alt çubuk */
.sgr-bar { position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; padding: 8px 8px 8px 12px; border-radius: 13px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 1px #e4e4e7, 0 4px 8px -2px rgba(16, 37, 64, .08), 0 14px 28px -12px rgba(16, 37, 64, .3);
  opacity: 0; translate: 0 10px; transition: opacity .3s var(--ui-ease) .45s, translate .5s var(--ui-ease) .45s; }
.sgr.s8 .sgr-bar { opacity: 1; translate: 0 0; }
.sgr-bar__t { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 700; color: #52525b; white-space: nowrap; }
.sgr-bar__b { flex: none; display: flex; gap: 6px; }
.sgr-b3 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 12px; font-weight: 700; color: #3f3f46; white-space: nowrap; }
.sgr-b3 .sgr-i { width: 13px; height: 13px; }
.sgr-b3--yay { color: #fff; background: var(--navy-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 14px -8px rgba(20, 61, 107, .75); }

/* ── DAR KAPLAR ── */
@container (max-width: 700px) {
  .sgr-bb--gh { display: none; }
}
@container (max-width: 600px) {
  .sgr-win { --sc: 140px; --sc6: 98px; --alh: 90px; }
  .sgr-bt__x, .sgr-hd__d { display: none; }
  .sgr-hd { height: 40px; }
  .sgr-ab { padding: 0 9px; gap: 5px; }
  .sgr-acts { gap: 5px; }
  .sgr-ab--more { display: none; }
  .sgr-srch { max-width: none; }
  .sgr-chips { order: 3; flex-basis: 100%; }
  .sgr-hw__g { grid-template-columns: minmax(0, 1fr); }
  .sgr-cd--2 { display: none; }
  .sgr-bar { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; }
  .sgr-bar__t { padding-left: 4px; }
  .sgr-bar__b > .sgr-b3--yay { flex: 1; }
}
/* Arama alanı segmentin yanında (kap ≥ 570 — .sgr-ep__f esası 248 px; altında satır alta iner, alan geniş) tam yer tutucu
   kap 640'a dek sığmaz → parantez düşer, «Ad ya da okul numarası» kalır. Sınır 566: sarılma noktasının birkaç px altı. */
@container (min-width: 566px) and (max-width: 640px) {
  .sgr-in__x { display: none; }
}
@container (max-width: 470px) {
  .sgr-win { --H: 480px; --sc: 187px; --sc6: 108px; --alh: 150px; }
  .sgr-band { height: 46px; margin: 10px 10px 0; padding: 0 8px; gap: 8px; }
  .sgr-bico { display: none; }
  .sgr-bt > b { font-size: 14px; }
  .sgr-bt small { font-size: 10.5px; line-height: 14px; }
  .sgr-bb { height: 28px; padding: 0 9px; }
  .sgr-pg { padding: 0 10px; }
  .sgr-hd { height: 49px; gap: 10px; }
  .sgr-hd__ico { width: 36px; height: 36px; border-radius: 10px; }
  .sgr-hd__ico .sgr-i { width: 17px; height: 17px; }
  .sgr-hd__t > b { font-size: 15px; line-height: 19px; }
  .sgr-hd__m { font-size: 11px; line-height: 15px; white-space: normal; }
  .sgr-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sgr-ab { height: 30px; }
  .sgr-tabs { gap: 0; }
  .sgr-tab { padding: 0 9px; font-size: 12px; gap: 5px; }
  .sgr-tab__l { display: none; } .sgr-tab__s { display: inline; }
  .sgr-ep__in { padding: 10px 8px; }
  .sgr-seg { --wa: 146px; --ws: 110px; }
  .sgr-seg__o { font-size: 11.5px; }
  .sgr-ep__f { flex-basis: 100%; }
  .sgr-kap { padding: 0 7px; }
  .sgr-kap > span { display: none; }
  .sgr-in { font-size: 11.5px; }
  .sgr-al__g { grid-template-columns: minmax(0, 1fr); }
  .sgr-tk { --ax: 15px; --ay: 45px; --bx: 15px; --by: 75px; --cx: 15px; --cy: 135px; }
  .sgr-ep__ft-x { display: none; }
  .sgr-ml { margin: 0 -10px; }
  .sgr-mh, .sgr-mr { padding: 0 10px; gap: 9px; }
  .sgr-mr { height: 40px; }
  .sgr-mr__n small { display: block; }
  .sgr-c-sb, .sgr-c-no { display: none; }
  .sgr-hw { inset: 6px 4px 0; padding: 10px 10px 0; }
  .sgr-hw__tt b { font-size: 17px; }
  .sgr-bb2 { height: 28px; padding: 0 9px; font-size: 11.5px; }
  .sgr-b3--tas { display: none; }
  .sgr-bar { left: 4px; right: 4px; }
}