/* SAHNE · ETKİNLİK: KİTLE SEÇ → YAYINLA → VELİNİN TELEFONU (includes/scenes/announcements.php) — modül sayfası sağ sütunu
   (kap ~640–680 px; telefonda ~330). Geniş kapta (≥600) yönetim penceresi tam genişlik, velinin telefonu s6'da sağdan üste biner;
   dar kapta telefon pencerenin yerine çapraz geçişle gelir. Adımlar:
   s1 sayfa «Kimler görecek»e kayar · s2 Veliler, Öğrenciler, Personel işaretlenir · s3 sınıf listesinde 8-A, Ctrl ile 8-B →
   «2 seçili», öğrenci listesi daralır · s4 «Kitleyi kaydet» → «Şu an: 8-A · 8-B», kırmızı uyarı kalkar · s5 «Yayınla» →
   «Yayında», başarı penceresi «131 kişiye bildirim gönderildi.» · s6 «Tamam» ile pencere kapanır, velinin kilit ekranına bildirim ·
   s7 dokununca etkinlik sayfası.
   Kaydırma miktarları bölüm yüksekliklerinden HESAPLANIR (--y1, --y3); bölümler her kap genişliğinde sabit yüksekliklidir. */
@property --anc-a { syntax: '<integer>'; inherits: false; initial-value: 0; }

.anc { container-type: inline-size; --d: 0s; font-size: 11px; line-height: 1.3; }
/* ölçü değişkenleri kökün çocuğunda: kap sorgusu kökün kendisini biçemez */
.anc-st { position: relative; height: var(--H); --H: 448px; --spring: cubic-bezier(.34, 1.56, .64, 1);
  --top: 32px; --band: 48px; --stat: 42px; --s1h: 254px; --s2a: 100px; --kw: 228px; --kh: 128px;
  --y1: calc(var(--s1h) + 18px); --y3: calc(var(--y1) + var(--s2a));
  --row: 16px; --rows: 8; --lsth: calc(var(--rows) * var(--row) + 6px);
  --ok: #047857; --ok-ink: #065f46; --line: #e4e7ec; --in: #d3d9e2; --lab: #52525b;
  --phw: 214px; }
.anc.s5 { --d: .5s; }
.anc-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: katmanlar aynı ızgara hücresinde üst üste; anc-onA-B = A. adımdan B. adıma kadar görünür */
.anc-x { display: grid; min-width: 0; }
.anc-x > * { grid-area: 1 / 1; min-width: 0; }
.anc [class*="anc-on"] { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.anc:not(.s5) .anc-on0-5, .anc.s5 .anc-on5 { opacity: 1; transform: none; }

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

/* ═══ YÖNETİM PENCERESİ ═══ */
.anc-win { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity .4s var(--ui-ease), translate .5s var(--ui-ease); }

/* üst çubuk: kurum işareti · yol · zil · hesap */
.anc-top { flex: none; display: flex; align-items: center; gap: 8px; height: var(--top); padding: 0 10px 0 12px; background: #fff; box-shadow: inset 0 -1px 0 var(--ui-line); }
.anc svg.anc-logo { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 1px 2px rgba(16, 37, 64, .25); }
.anc-bc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--ui-muted); white-space: nowrap; overflow: hidden; }
.anc-bc > span { display: inline-flex; align-items: center; gap: 3px; }
.anc-bc .anc-i { width: 11px; height: 11px; color: #a1a1aa; stroke-width: 2.2; }
.anc-bc b { font-weight: 800; color: var(--ui-text); }
.anc-bell { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: #3f3f46; }
.anc-bell .anc-i { width: 15px; height: 15px; }
.anc-bell i { position: absolute; top: -2px; right: -6px; min-width: 15px; height: 13px; padding: 0 3px; border-radius: 999px; background: #dc2626; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; line-height: 13px; text-align: center; box-shadow: 0 0 0 1.5px #fff; }
.anc-av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(16, 37, 64, .35); }

.anc-pg { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 0; background: #f6f7f9; }

/* başlık bandı (kurum rengi) */
.anc-band { flex: none; display: flex; align-items: center; gap: 10px; height: var(--band); padding: 0 10px 0 8px; 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); }
.anc-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.anc-ico .anc-i { width: 17px; height: 17px; stroke-width: 1.8; }
.anc-ttl { flex: 1; min-width: 0; line-height: 18px; }
.anc-ttl > b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.anc-ttl small { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 15px; font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.anc-dur { display: inline-grid; }
.anc-dur > * { display: inline-flex; align-items: center; gap: 4px; }
.anc-help { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.anc-help .anc-i { width: 15px; height: 15px; }

/* durum şeridi */
.anc-stat { flex: none; display: flex; align-items: center; gap: 10px; height: var(--stat); padding: 0 7px 0 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.anc-stat__t { flex: 1; font-size: 11.5px; font-weight: 700; line-height: 15px; color: #52525b; }
.anc-tx--w { color: #b45309; font-weight: 800; } .anc-tx--o { color: var(--ok); font-weight: 800; }
.anc-warn { font-style: normal; color: #b91c1c; white-space: nowrap; transition: opacity .3s var(--ui-ease); }
.anc.s4 .anc-warn { opacity: 0; transition-delay: .95s; }
.anc-stat__b { flex: none; justify-items: end; }
.anc-stat__b > * { display: flex; gap: 6px; }
.anc-b { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; background: #fff; font-size: 11.5px; font-weight: 800; color: #3f3f46; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #d4d4d8, 0 1px 2px rgba(16, 37, 64, .05); }
.anc-b--pub { color: #fff; background: var(--ok); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(4, 120, 87, .3), 0 6px 12px -8px rgba(4, 120, 87, .8); }
.anc-b--pub .anc-hit { right: 20px; bottom: 8px; }
.anc.s5 .anc-b--pub { animation: anc-push .3s var(--ui-ease) .42s; }
.anc.s5:not(.s6) .anc-hit--pub .ui-cur { animation: anc-cur-out 1s var(--ui-ease) both; }
.anc.s5:not(.s6) .anc-hit--pub .anc-rip { animation: anc-rip .55s ease-out .44s both; }

/* sayfa gövdesi: kayan içerik */
.anc-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.anc-stage::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(rgba(246, 247, 249, 0), #f6f7f9); pointer-events: none; }
.anc-scr { translate: 0 0; transition: translate .75s cubic-bezier(.3, .1, .2, 1); }
.anc.s1 .anc-scr { translate: 0 calc(-1 * var(--y1)); transition-delay: .1s; }
.anc.s4 .anc-scr { translate: 0 calc(-1 * var(--y3)); transition-duration: .5s; transition-delay: 0s; }
.anc-card { position: relative; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.anc-card + .anc-card { margin-top: 10px; }
.anc-sh { display: flex; align-items: center; gap: 9px; height: 30px; }
.anc-no { 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: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 5px -2px rgba(16, 37, 64, .6); }
.anc-sh > span:last-child { min-width: 0; line-height: 14px; }
.anc-sh b { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #3f3f46; }
.anc-sh small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 600; color: var(--ui-muted); }
.anc-lb { display: block; font-size: 10px; font-weight: 800; line-height: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--lab); white-space: nowrap; }

/* 1 · içerik */
.anc-c1 { height: var(--s1h); }
.anc-c1__g { display: grid; grid-template-columns: minmax(0, 1fr) var(--kw); gap: 14px; margin-top: 10px; }
.anc-c1__f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.anc-tur { display: flex; gap: 6px; height: 26px; }
.anc-rd { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 7px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #3f3f46; box-shadow: inset 0 0 0 1px var(--in); }
.anc-rd i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #a1a1aa; }
.anc-rd--on { background: var(--ui-primary-soft); color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy-soft); }
.anc-rd--on i { box-shadow: inset 0 0 0 1.5px var(--navy-soft), inset 0 0 0 4px #fff; background: var(--navy-soft); }
.anc-f { display: block; min-width: 0; }
.anc-f .anc-lb { margin-bottom: 4px; }
.anc-in { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--ui-text); white-space: nowrap; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--in), 0 1px 1px rgba(16, 37, 64, .03); font-variant-numeric: tabular-nums; }
.anc-in .anc-i { width: 13px; height: 13px; color: #52525b; }
.anc-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.anc-c1__k { min-width: 0; }
.anc-cur { display: block; margin: 0 0 3px; font-size: 10px; font-weight: 700; line-height: 13px; color: var(--ui-muted); }
.anc-cov { position: relative; display: block; overflow: hidden; background: linear-gradient(180deg, #dcebfd 0%, #e3effd 45%, #edf4fd 58%); }
.anc .anc-cov svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; }
.anc-c1__k .anc-cov { height: var(--kh); border-radius: 10px; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 37, 64, .06); }
.anc-chg { display: flex; align-items: center; gap: 6px; height: 26px; margin-top: 6px; padding: 0 9px; border-radius: 8px; border: 1px dashed #c3cbd6; font-size: 11px; font-weight: 800; color: #3f3f46; white-space: nowrap; }
.anc-chg .anc-i { width: 13px; height: 13px; }

/* 2 · kimler görecek */
.anc-c2 { padding-bottom: 12px; }
.anc-lb--rt { margin-top: 10px; }
.anc-rt { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.anc-cb { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 8px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 700; color: var(--ui-text); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--in); transition: background-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease); }
.anc-cb > i { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: #fff; color: #fff; box-shadow: inset 0 0 0 1.5px #a1a1aa;
  transition: background-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease); }
.anc-cb > i .anc-i { width: 10px; height: 10px; stroke-width: 3.4; scale: 0; transition: scale .3s var(--spring); }
/* s2: üç tık sırayla (Mezunlar boş kalır) */
.anc.s2 .anc-cb--vel, .anc.s2 .anc-cb--ogr, .anc.s2 .anc-cb--per { background: var(--ui-primary-soft); box-shadow: inset 0 0 0 1px var(--navy-soft); }
.anc.s2 .anc-cb--vel > i, .anc.s2 .anc-cb--ogr > i, .anc.s2 .anc-cb--per > i { background: var(--navy-soft); box-shadow: inset 0 0 0 1.5px var(--navy-soft); }
.anc.s2 .anc-cb--vel > i .anc-i, .anc.s2 .anc-cb--ogr > i .anc-i, .anc.s2 .anc-cb--per > i .anc-i { scale: 1; }
.anc.s2 .anc-cb--vel, .anc.s2 .anc-cb--vel > i, .anc.s2 .anc-cb--vel > i .anc-i { transition-delay: .35s; }
.anc.s2 .anc-cb--ogr, .anc.s2 .anc-cb--ogr > i, .anc.s2 .anc-cb--ogr > i .anc-i { transition-delay: .75s; }
.anc.s2 .anc-cb--per, .anc.s2 .anc-cb--per > i, .anc.s2 .anc-cb--per > i .anc-i { transition-delay: 1.15s; }
/* üç tık imleci: konumlar ızgaradan hesaplanır (geniş: 4 sütun) */
.anc-rt { --c: calc((100% - 24px) / 4 + 8px);
  --p1x: 15px; --p1y: 15px; --p2x: calc(var(--c) + 15px); --p2y: 15px; --p3x: calc(3 * var(--c) + 15px); --p3y: 15px; }
.anc-hit--tick { left: var(--p1x); top: var(--p1y); }
.anc.s2:not(.s3) .anc-hit--tick { animation: anc-tk-mv 1.3s var(--ui-ease) both; }
.anc.s2:not(.s3) .anc-hit--tick .ui-cur { animation: anc-tk-cur 1.3s linear both; }
.anc.s2:not(.s3) .anc-hit--tick .anc-rip { animation: anc-tk-rip 1.3s linear both; }
@keyframes anc-tk-mv { 0%, 27% { left: var(--p1x); top: var(--p1y); } 46%, 58% { left: var(--p2x); top: var(--p2y); } 77%, 100% { left: var(--p3x); top: var(--p3y); } }
@keyframes anc-tk-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 16% { opacity: 1; transform: none; scale: 1; } 24% { scale: 1; } 27% { scale: .8; } 31%, 55% { scale: 1; } 58% { scale: .8; } 62%, 85% { scale: 1; } 88% { scale: .8; } 92%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes anc-tk-rip { 0%, 26% { opacity: 0; scale: .25; } 28% { opacity: .9; scale: .4; } 40% { opacity: 0; scale: 1.7; } 40.1%, 57% { opacity: 0; scale: .25; } 59% { opacity: .9; scale: .4; } 71% { opacity: 0; scale: 1.7; }
  71.1%, 87% { opacity: 0; scale: .25; } 89% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.7; } }

/* okul · sınıf · öğrenci liste kutuları (çoklu seçim) */
.anc-ap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 10px; margin-top: 10px; }
.anc-col { position: relative; min-width: 0; }
.anc-ch { display: flex; align-items: center; gap: 4px; height: 14px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lab); white-space: nowrap; }
.anc-ch .anc-i { width: 11px; height: 11px; stroke-width: 2.2; }
.anc-ch em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ui-muted); }
.anc-cnt { justify-items: end; }
.anc-cnt > * { opacity: 0; transition: opacity .2s var(--ui-ease); }
.anc:not(.s3) .anc-cnt0 { opacity: 1; }
.anc.s3 .anc-cnt0 { transition-delay: .7s; }
.anc.s3:not(.s4) .anc-cnt1 { animation: anc-mid 1.1s linear both; }
.anc.s3 .anc-cnt2 { opacity: 1; transition-delay: 1.1s; }
@keyframes anc-mid { 0%, 63% { opacity: 0; } 64%, 99% { opacity: 1; } 100% { opacity: 0; } }
.anc-sr { display: flex; align-items: center; height: 24px; margin-top: 4px; padding: 0 8px; border-radius: 7px; background: #fff; font-size: 10.5px; font-weight: 600; color: #8b93a1; box-shadow: inset 0 0 0 1px var(--in); white-space: nowrap; }
.anc-lst { position: relative; display: block; height: var(--lsth); margin-top: 4px; padding: 2px; border: 1px solid var(--in); border-radius: 8px; background: #fff; overflow: hidden; }
.anc-lst--sn, .anc-lst--og { padding-right: 9px; }
.anc-ol { display: block; }
.anc-op { display: block; height: var(--row); padding: 0 5px; border-radius: 3px; font-size: 10.5px; font-weight: 600; line-height: var(--row); color: #27272a; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums;
  transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease); }
.anc-op--all { background: #e4e4e7; }
.anc-op--g { font-weight: 800; color: #18181b; }
.anc-op--i { padding-left: 14px; }
.anc-lst::before, .anc-lst::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; height: 2px; background: #fff; }
.anc-lst::before { top: 0; } .anc-lst::after { bottom: 0; }
.anc-thumb { position: absolute; z-index: 2; right: 2px; top: 2px; width: 3px; height: 26px; border-radius: 2px; background: rgba(16, 37, 64, .3); }
/* sınıf listesi: aşağı kaydırılır, 8-A tıklanır, Ctrl ile 8-B eklenir */
.anc-ol--sn { translate: 0 0; transition: translate .5s cubic-bezier(.3, .1, .2, 1) .05s; }
.anc.s3 .anc-ol--sn { translate: 0 calc((var(--rows) - 29) * var(--row)); }
.anc-lst--sn .anc-thumb { transition: translate .5s cubic-bezier(.3, .1, .2, 1) .05s; }
.anc.s3 .anc-lst--sn .anc-thumb { translate: 0 calc(var(--lsth) - 32px); }
.anc.s3 .anc-col--sn .anc-op--all { background: transparent; transition-delay: .7s; }
.anc.s3 .anc-op--8a, .anc.s3 .anc-op--8b { background: var(--navy-soft); color: #fff; }
.anc.s3 .anc-op--8a { transition-delay: .7s; } .anc.s3 .anc-op--8b { transition-delay: 1.1s; }
.anc-hit--cls { left: 46px; top: calc(46px + 3px + (var(--rows) - 2) * var(--row) + 8px); }
.anc.s3:not(.s4) .anc-hit--cls { animation: anc-cls-mv 1.3s var(--ui-ease) both; }
.anc.s3:not(.s4) .anc-hit--cls .ui-cur { animation: anc-cls-cur 1.3s linear both; }
.anc.s3:not(.s4) .anc-hit--cls .anc-rip { animation: anc-cls-rip 1.3s linear both; }
@keyframes anc-cls-mv { 0%, 62% { translate: 0 0; } 77%, 100% { translate: 0 var(--row); } }
@keyframes anc-cls-cur { 0%, 18% { opacity: 0; transform: translate(14px, 12px); } 42% { opacity: 1; transform: none; scale: 1; } 52% { scale: 1; } 55% { scale: .8; } 59%, 82% { scale: 1; } 85% { scale: .8; } 89%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes anc-cls-rip { 0%, 53% { opacity: 0; scale: .25; } 55% { opacity: .9; scale: .4; } 68% { opacity: 0; scale: 1.7; } 68.1%, 83% { opacity: 0; scale: .25; } 85% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.7; } }
/* Ctrl tuşu (çoklu seçim) — ikinci tıkta imlecin sağ üstünde, liste kutusunun İÇİNDE (8-A satırının üstü) */
.anc-kbd { position: absolute; z-index: 8; left: 66px; top: calc(46px + 3px + (var(--rows) - 2) * var(--row) - 20px); display: grid; place-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: #fff; color: #27272a;
  font-size: 10px; font-weight: 800; box-shadow: 0 0 0 1px #c9cfd8, 0 2px 0 #c9cfd8, 0 4px 8px -3px rgba(16, 37, 64, .35); opacity: 0; pointer-events: none; }
.anc.s3:not(.s4) .anc-kbd { animation: anc-kbd 1.3s var(--ui-ease) both; }
@keyframes anc-kbd { 0%, 64% { opacity: 0; translate: 0 4px; } 72%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
/* öğrenci listesi: tümü → yalnız 8-A → 8-A + 8-B */
.anc-lst--og { display: grid; }
.anc-lst--og > .anc-ol { transition: opacity .2s var(--ui-ease); opacity: 0; }
.anc:not(.s3) .anc-og0 { opacity: 1; }
.anc.s3 .anc-og0 { transition-delay: .7s; }
.anc.s3:not(.s4) .anc-og1 { animation: anc-mid 1.1s linear both; }
.anc.s3 .anc-og2 { opacity: 1; transition-delay: 1.1s; }
.anc-lst--og .anc-thumb { height: 12px; transition: height .25s var(--ui-ease) .7s; }
.anc.s3 .anc-lst--og .anc-thumb { height: 20px; }

.anc-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; font-size: 10px; font-weight: 700; line-height: 13px; color: var(--ui-muted); }
.anc-note .anc-i { width: 12px; height: 12px; margin-top: 1px; }
.anc-now { display: flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 8px; background: #f4f4f5; font-size: 11px; font-weight: 700; color: #52525b; opacity: 0; translate: 0 3px;
  transition: opacity .3s var(--ui-ease), translate .35s var(--ui-ease); }
.anc.s4 .anc-now { opacity: 1; translate: 0 0; transition-delay: .95s; }
.anc-b2 { position: relative; display: inline-flex; align-items: center; height: 30px; margin-top: 8px; padding: 0 14px; border-radius: 9px; font-size: 11.5px; font-weight: 800; color: #fff; 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); }
.anc-b2 .anc-hit { right: 26px; bottom: 9px; }
.anc.s4 .anc-b2 { animation: anc-push .3s var(--ui-ease) .74s; }
.anc.s4:not(.s5) .anc-hit--save .ui-cur { animation: anc-cur .9s var(--ui-ease) .3s both; }
.anc.s4:not(.s5) .anc-hit--save .anc-rip { animation: anc-rip .55s ease-out .75s both; }

/* başarı penceresi (SweetAlert: «Başarılı» + ileti + «Tamam») */
.anc-dim { position: absolute; z-index: 9; inset: 0; background: rgba(15, 23, 42, .42); opacity: 0; transition: opacity .3s var(--ui-ease); pointer-events: none; }
.anc.s5 .anc-dim { opacity: 1; transition-delay: .68s; }
.anc-swal { position: absolute; z-index: 10; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; width: 252px; margin: -88px 0 0 -126px; padding: 16px 18px 16px; border-radius: 14px; 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 24px 44px -16px rgba(0, 0, 0, .5); opacity: 0; scale: .7; pointer-events: none; }
.anc.s5 .anc-swal { opacity: 1; scale: 1; animation: anc-swal .45s ease-out .72s both; }
@keyframes anc-swal { 0% { opacity: 0; scale: .7; } 45% { opacity: 1; scale: 1.05; } 80% { scale: .97; } 100% { opacity: 1; scale: 1; } }
.anc-ok { display: block; width: 46px; height: 46px; }
.anc-ok svg { width: 46px; height: 46px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.anc-ok circle { stroke: rgba(165, 220, 134, .45); stroke-width: 3; }
.anc-ok path { stroke: #7cc85a; stroke-width: 4; stroke-dasharray: 36; stroke-dashoffset: 36; }
.anc.s5 .anc-ok path { stroke-dashoffset: 0; animation: anc-draw .4s ease-out 1.05s both; }
@keyframes anc-draw { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
.anc-swal > b { margin-top: 8px; font-size: 16px; font-weight: 800; line-height: 20px; color: #18181b; }
.anc-swal__t { margin-top: 4px; font-size: 11.5px; font-weight: 600; line-height: 16px; color: #3f3f46; text-wrap: balance; }
.anc-swal__b { position: relative; display: grid; place-items: center; height: 30px; margin-top: 12px; padding: 0 18px; border-radius: 8px; background: #18181b; color: #fff; font-size: 11.5px; font-weight: 800; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
/* s6: «Tamam»a basılır, pencere ve karartma kapanır. Kapanış da @keyframes: giriş animasyonu aynı anda kalkınca Chrome geçiş
   başlatmıyor (pencere anında kayboluyordu). Temel değer opaklık 0 → hareket azaltmada (animation:none) pencere gizli. */
.anc-swal__b .anc-hit { right: 16px; bottom: 9px; }
.anc.s6:not(.s7) .anc-hit--ok .ui-cur { animation: anc-ok-cur .5s var(--ui-ease) both; }
.anc.s6:not(.s7) .anc-hit--ok .anc-rip { animation: anc-rip .45s ease-out .2s both; }
.anc.s6 .anc-swal__b { animation: anc-push .22s var(--ui-ease) .18s; }
@keyframes anc-ok-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 40% { opacity: 1; transform: none; scale: 1; } 52% { scale: .8; } 66%, 100% { opacity: 1; transform: none; scale: 1; } }
.anc.s6 .anc-swal { opacity: 0; scale: .94; animation: anc-swal-out .2s var(--ui-ease) .36s both; }
@keyframes anc-swal-out { from { opacity: 1; scale: 1; } to { opacity: 0; scale: .94; } }
.anc.s6 .anc-dim { opacity: 0; transition-delay: .36s; }

/* ═══ VELİNİN TELEFONU ═══ */
.anc-ph { position: absolute; z-index: 12; right: 10px; top: 8px; width: var(--phw); height: calc(var(--H) - 16px); padding: 6px; border-radius: 34px;
  background: linear-gradient(150deg, #23466f 0%, var(--navy-night) 38%, #061628 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(11, 36, 64, .3), 0 30px 50px -22px rgba(11, 36, 64, .75), 0 0 0 1px rgba(255, 255, 255, .5);
  opacity: 0; translate: 0 44px; transition: opacity .35s var(--ui-ease), translate .7s var(--spring); }
.anc.s6 .anc-ph { opacity: 1; translate: 0 0; transition-delay: .45s; }
.anc-key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2b4c74, #0d2440); }
.anc-key--a { left: -2px; top: 88px; height: 26px; } .anc-key--b { left: -2px; top: 124px; height: 40px; }
.anc-key--c { right: -2px; top: 112px; height: 56px; background: linear-gradient(270deg, #2b4c74, #0d2440); }
.anc-scrn { position: relative; height: 100%; overflow: hidden; border-radius: 28px; background: #0b2440; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.anc-scrn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* durum çubuğu (saat · ada · sinyal, wi-fi, pil) */
.anc-sb { position: absolute; z-index: 6; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px 0 19px; color: #fff; transition: color .3s var(--ui-ease); }
.anc.s7 .anc-sb { color: #0b1526; transition-delay: .45s; }
.anc-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.anc-isl { position: absolute; left: 50%; top: 5px; width: 54px; height: 15px; margin-left: -27px; border-radius: 999px; background: #05070b; }
.anc-sbi { display: flex; align-items: center; gap: 3px; }
.anc-sbi .anc-i { width: 11px; height: 11px; stroke-width: 2.4; }
.anc-sbi .anc-bat { width: 16px; height: 12px; }

/* kilit ekranı */
.anc-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 40px; color: #fff;
  background: radial-gradient(120% 60% at 85% 8%, rgba(255, 182, 39, .32), rgba(255, 182, 39, 0) 55%), radial-gradient(90% 55% at 0% 100%, rgba(84, 146, 214, .55), rgba(84, 146, 214, 0) 60%),
              linear-gradient(170deg, #2a5587 0%, var(--navy) 46%, var(--navy-night) 100%);
  transition: opacity .35s var(--ui-ease), scale .5s var(--ui-ease); }
.anc.s7 .anc-lock { opacity: 0; scale: 1.06; transition-delay: .45s; }
.anc-lock__d { font-size: 11px; font-weight: 700; line-height: 14px; color: rgba(255, 255, 255, .86); }
.anc-lock__t { font-size: 48px; font-weight: 700; line-height: 52px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(5, 15, 30, .25); }
.anc-nt { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; width: calc(100% - 16px); margin-top: 22px; padding: 9px 10px 10px 9px; border-radius: 15px; color: var(--ui-text-2);
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 2px 4px rgba(5, 15, 30, .12), 0 18px 32px -14px rgba(5, 15, 30, .6), inset 0 1px 0 rgba(255, 255, 255, .8);
  font-size: 10px; font-weight: 500; line-height: 13.5px; text-align: left; opacity: 0; translate: 0 -40px; scale: .96; transition: opacity .3s var(--ui-ease), translate .7s var(--spring), scale .5s var(--ui-ease); }
.anc.s6 .anc-nt { opacity: 1; translate: 0 0; scale: 1; transition-delay: 1.05s; }
.anc-nt img { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.anc-nt__h { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px; }
.anc-nt__h b { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 800; line-height: 13.5px; color: var(--ui-text); letter-spacing: -.005em; }
.anc-nt__h em { flex: none; font-style: normal; font-size: 10px; line-height: 13.5px; color: var(--ui-muted); }
.anc-lk { position: absolute; bottom: 26px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.anc-lk .anc-i { width: 15px; height: 15px; stroke-width: 1.9; }
.anc-lk--f { left: 22px; } .anc-lk--k { right: 22px; }
.anc-home { position: absolute; left: 50%; bottom: 7px; width: 70px; height: 4px; margin-left: -35px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
/* dokunuş (parmak) */
.anc-touch { position: absolute; z-index: 3; left: 50%; top: 48%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .8), rgba(226, 233, 243, .55) 70%);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .3), 0 2px 5px rgba(16, 37, 64, .25), 0 10px 18px -8px rgba(16, 37, 64, .45); opacity: 0; }
.anc-touch i { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(16, 37, 64, .28); opacity: 0; }
.anc.s7 .anc-touch { animation: anc-tap .75s var(--ui-ease) both; }
.anc.s7 .anc-touch i { animation: anc-ring .55s ease-out .22s both; }
.anc.s7 .anc-nt { scale: .97; transition: scale .2s var(--ui-ease) .2s; }
@keyframes anc-tap { 0% { opacity: 0; scale: 1.3; } 25% { opacity: 1; scale: 1; } 36% { scale: .8; } 55% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes anc-ring { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: 2.3; } }

/* veli uygulaması: etkinlik sayfası */
.anc-app { position: absolute; inset: 0; z-index: 2; background: #fafafa; color: var(--ui-text); opacity: 0; scale: .9; transform-origin: 50% 32%;
  transition: opacity .35s var(--ui-ease), scale .55s var(--ui-ease); }
.anc.s7 .anc-app { opacity: 1; scale: 1; transition-delay: .45s; }
.anc-ah { display: flex; align-items: center; gap: 8px; height: 40px; margin-top: 24px; padding: 0 10px; }
.anc-ah__b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: #18181b; }
.anc-ah__b .anc-i { width: 16px; height: 16px; }
.anc svg.anc-ah__l { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 1px 3px rgba(16, 37, 64, .3); }
.anc-ah__s { flex: 1; }
.anc-ah__n { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: #27272a; }
.anc-ah__n .anc-i { width: 15px; height: 15px; }
.anc-ah__n::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px #fafafa; }
.anc-ah__a { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 11.5px; font-weight: 900; box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .08); }
.anc-kid { display: flex; gap: 6px; padding: 0 10px; }
.anc-kid > span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 3px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; color: #3f3f46; box-shadow: inset 0 0 0 1px #e4e4e7; }
.anc-kid i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 900; color: var(--navy-soft); }
.anc-kid .anc-kid--on { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(16, 37, 64, .7); }
.anc-kid .anc-kid--on i { background: rgba(255, 255, 255, .2); color: #fff; }
.anc-ad { padding: 8px 10px 0; }
.anc-ad > * { opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease), translate .5s var(--spring); }
.anc.s7 .anc-ad > * { opacity: 1; translate: 0 0; }
.anc.s7 .anc-ad > :nth-child(1) { transition-delay: .55s; } .anc.s7 .anc-ad > :nth-child(2) { transition-delay: .63s; }
.anc.s7 .anc-ad > :nth-child(3) { transition-delay: .71s; } .anc.s7 .anc-ad > :nth-child(4) { transition-delay: .79s; } .anc.s7 .anc-ad > :nth-child(5) { transition-delay: .87s; }
.anc-ad .anc-cov { height: 102px; }
.anc-ad__m { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.anc-bdg { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px; background: var(--ui-primary-soft); color: var(--navy-soft); font-size: 10px; font-weight: 800; }
.anc-ad__m small { font-size: 10px; font-weight: 700; color: #52525b; }
.anc-ad__h { display: block; margin-top: 5px; font-size: 13px; font-weight: 900; line-height: 16px; letter-spacing: -.01em; color: #18181b; }
.anc-rows { display: block; margin-top: 8px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #ececef, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.anc-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; }
.anc-row + .anc-row { box-shadow: inset 0 1px 0 #f1f1f3; }
.anc-row__i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.anc-row__i .anc-i { width: 14px; height: 14px; }
.anc-row__i--c { background: var(--ui-primary-soft); color: var(--navy-soft); }
.anc-row__i--p { background: #e5f6ee; color: #047857; }
.anc-row > span:last-child { min-width: 0; line-height: 14px; }
.anc-row b { display: block; font-size: 11px; font-weight: 800; color: #18181b; }
.anc-row small { display: block; font-size: 10px; font-weight: 600; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.anc-tab { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; height: 48px; padding: 4px 9px 9px;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08); }
.anc-tab > span { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 700; color: #52525b; white-space: nowrap; letter-spacing: -.01em; }
.anc-tab .anc-i { width: 15px; height: 15px; stroke-width: 1.9; }
.anc-tab__m i { position: absolute; top: -1px; left: calc(50% + 3px); min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: #dc2626; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; line-height: 14px; text-align: center; box-shadow: 0 0 0 1.5px #fff; }

/* GENİŞ KAP: telefon pencerenin sağ üstüne biner; yuvarlak köşesinden taşan zil rozeti ve hesap avatarı söner */
@container (min-width: 600px) { .anc.s6 .anc-bell, .anc.s6 .anc-av { opacity: 0; transition: opacity .2s var(--ui-ease) .45s; } }
/* 660 px'ten dar: liste kutusu satırları 10 px (okul adlı sınıf etiketi sığsın) */
@container (max-width: 660px) { .anc-op { font-size: 10px; } }
/* ── ORTA KAP (600 px'ten dar): okul kutusu gizli; telefon pencerenin yerine gelir ── */
@container (max-width: 599px) {
  .anc-st { --kw: 172px; --kh: 97px; }
  .anc-bc .anc-bc1 { display: none; }
  .anc-warn { display: block; }
  /* durum yazısı katmanları şeridin ortasında; s4'te uyarı söndükten sonra kalan tek satır ortaya iner */
  .anc-stat__t > * { align-self: center; }
  .anc.s4 .anc-stat__t .anc-on0-5 { translate: 0 7px; transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d), translate .3s var(--ui-ease) .95s; }
  .anc-ap { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .anc-col--ok { display: none; }
  .anc-hit--cls { left: 40px; }
  .anc-ph { right: auto; left: 50%; margin-left: calc(var(--phw) / -2); top: 8px; }
  .anc.s6 .anc-win { opacity: 0; translate: -12px 0; transition-delay: .4s; }
  .anc-st { --s2a: 100px; }
}
/* ── DAR KAP (telefon, ~330): öğrenci kutusu ve not gizli, alıcı türü 2×2, kapak tarih/saatin yanında ── */
@container (max-width: 470px) {
  .anc-st { --H: 468px; --top: 30px; --stat: 46px; --s1h: 300px; --y1: calc(var(--s1h) + 20px); --s2a: 94px; --rows: 7; --kw: 124px; --kh: 70px; }
  .anc-bc .anc-bc2, .anc-bc .anc-bc4 { display: none; }
  .anc-bell i { top: -1px; } /* 30 px çubukta rozet pencere kenarına değmesin */
  .anc-c1__k .anc-chg { display: none; }
  .anc-pg { padding: 8px 10px 0; }
  .anc-band { gap: 9px; padding: 0 8px; }
  .anc-ico { width: 30px; height: 30px; }
  .anc-ttl > b { font-size: 13px; }
  .anc-help { display: none; }
  .anc-stat { padding: 0 6px 0 10px; }
  .anc-stat__t { font-size: 11px; line-height: 14px; }
  .anc-stat__t > * { text-wrap: balance; }
  .anc-stat__b .anc-b--arc { display: none; }
  .anc-card { padding: 10px; }
  .anc-sh { height: auto; min-height: 30px; }
  /* içerik: başlık; altında kapak (sol) + tarih/saat (sağ); en altta yer */
  .anc-c1__g { grid-template-columns: var(--kw) minmax(0, 1fr); grid-template-areas: "f f" "k t" "y y"; column-gap: 10px; row-gap: 8px; }
  .anc-c1__f { display: contents; }
  .anc-tur, .anc-f--bas { grid-column: 1 / -1; }
  .anc-tur { grid-row: 1; } .anc-f--bas { grid-row: 2; }
  .anc-f2 { grid-row: 3; grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .anc-c1__k { grid-row: 3; grid-column: 1; }
  .anc-f--yer { grid-row: 4; grid-column: 1 / -1; }
  .anc-c1__g { grid-template-areas: none; }
  .anc-cur { display: none; }
  .anc-c1__k .anc-cov { margin-top: 4px; }
  .anc-rt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    --c: calc((100% - 6px) / 2 + 6px); --p2x: calc(var(--c) + 15px); --p3x: calc(var(--c) + 15px); --p3y: 51px; }
  .anc-ap { grid-template-columns: minmax(0, 1fr); }
  .anc-col--og, .anc-note, .anc-c2 .anc-sh small { display: none; }
  .anc-now { margin-top: 8px; }
  .anc-swal { width: 236px; margin-left: -118px; }
}