/* SAHNE · ÖDEV KONTROLÜ (includes/scenes/homework.php) — öğretmen telefonu + velinin telefonu. Adımlar:
   s1 liste Cem Özer'e kayar · s2 «Eksik yaptı» · s3 Sami Kartal'a kayar · s4 «Yapmadı» · s5 «Kalan 17 öğrenciyi «Tam yaptı»
   işaretle» → «Geri al» çubuğu · s6 başa kayar: «19 öğrencinin hepsi kontrol edildi» · s7 velinin telefonuna bildirim ·
   s8 bildirime dokunulur → veli uygulamasında kart «Öğretmen kontrolü: Yapmadı».
   Ölçüler sabit (kaydırma miktarı = blok yükseklikleri): --pre listeden önceki içerik, --row satır. */
.hwk { container-type: inline-size; --d: 0s; --H: 456px; --row: 76px; --pre: 333px;
  --hwk-ok: #047857; --hwk-am: #b45309; --hwk-bad: #dc2626; --hwk-spring: cubic-bezier(.34, 1.56, .64, 1); --hwk-scroll: cubic-bezier(.32, .12, .2, 1); }
.hwk.s2 { --d: .45s; } .hwk.s3 { --d: 0s; } .hwk.s4 { --d: .45s; } .hwk.s5 { --d: .55s; } .hwk.s6 { --d: 0s; }
.hwk svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

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

/* ── sahne: iki telefon ── */
.hwk-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; height: var(--H); }
.hwk-ph { position: relative; flex: none; padding: 6px; border-radius: 34px; background: linear-gradient(160deg, #22344d, var(--navy-night) 40%, #0a1626);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 4px rgba(11, 22, 38, .2), 0 24px 44px -24px rgba(11, 36, 64, .7); }
.hwk-ph--t { width: 300px; height: var(--H); transition: opacity .45s var(--ui-ease), scale .5s var(--ui-ease), translate .5s var(--ui-ease); }
.hwk-ph--v { width: 252px; height: 420px; transition: opacity .45s var(--ui-ease), translate .6s cubic-bezier(.3, 1.2, .5, 1); }
.hwk-sc { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #f5f6f8; }

/* durum çubuğu */
.hwk-sb { position: absolute; z-index: 6; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 20px; pointer-events: none; }
.hwk-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hwk-sb--d { color: #0b1526; } .hwk-sb--l { color: #fff; } .hwk-sb--l > b { visibility: hidden; }
.hwk-isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 15px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.hwk-sbi { display: flex; align-items: center; gap: 3px; }
.hwk-sbi svg { width: 11px; height: 11px; stroke-width: 2.4; }
.hwk-sbi .hwk-bat { width: 16px; height: 12px; }

/* ══ ÖĞRETMEN TELEFONU ══ */
.hwk-hd { position: absolute; z-index: 3; inset: 0 0 auto; height: 68px; display: flex; align-items: center; gap: 7px; padding: 24px 9px 0;
  background: linear-gradient(180deg, #e3eaf4 0%, #eef2f8 70%, #f2f5f9 100%); box-shadow: inset 0 -1px 0 #d9e0ea; }
.hwk-ib { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #273246;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .08), inset 0 1px 0 rgba(255, 255, 255, .6); }
.hwk-ib svg { width: 15px; height: 15px; }
.hwk-ib--bell::after { content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #fff; }
.hwk-tt { flex: 1; min-width: 0; line-height: 1.2; }
.hwk-tt b { display: block; font-size: 12px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }
.hwk-tt span { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.hwk-pg { position: absolute; left: 0; right: 0; top: 68px; bottom: 46px; overflow: hidden; }
.hwk-scr { padding: 8px 8px 60px; translate: 0 0; transition: translate .78s var(--hwk-scroll) .1s; }
.hwk-not { display: flex; align-items: center; gap: 6px; height: 30px; margin-bottom: 10px; padding: 0 10px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 11px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(146, 64, 14, .08); }
.hwk-not svg { flex: none; width: 13px; height: 13px; }
.hwk-sube { height: 81px; margin-bottom: 10px; }
.hwk-cap { display: block; height: 14px; font-size: 10px; font-weight: 800; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; color: #71717a; }
.hwk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.hwk-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 10px; background: #fff; font-size: 11.5px; font-weight: 800; color: #3f3f46;
  box-shadow: inset 0 0 0 1.5px #e4e4e7; white-space: nowrap; }
.hwk-chip em { font-style: normal; color: #71717a; font-variant-numeric: tabular-nums; }
.hwk-chip i { font-style: normal; height: 17px; padding: 0 5px; border-radius: 5px; background: #fef3c7; color: #92400e; font-size: 10px; line-height: 17px; font-weight: 800; }
.hwk-chip--on { background: var(--navy-soft); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(20, 61, 107, .7); }
.hwk-chip--on em { color: rgba(255, 255, 255, .8); }
.hwk-chip--on i { background: rgba(255, 255, 255, .2); color: #fff; }
.hwk-h2 { height: 26px; padding-left: 2px; font-size: 15px; font-weight: 800; line-height: 22px; letter-spacing: -.015em; color: #18181b; }

/* özet paneli */
.hwk-card { 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); }
.hwk-oz { display: block; height: 160px; margin-bottom: 8px; padding: 10px; }
.hwk-oz__t b { font-size: 11.5px; font-weight: 800; line-height: 16px; letter-spacing: -.01em; color: #18181b; white-space: nowrap; }
.hwk-oz__k { margin-top: 1px; font-size: 10px; font-weight: 700; line-height: 14px; color: #71717a; white-space: nowrap; }
.hwk-bar { display: flex; height: 6px; margin-top: 8px; border-radius: 999px; background: #e4e4e7; overflow: hidden; }
.hwk-bar i { height: 100%; width: 0; transition: width .5s var(--ui-ease) var(--d); }
.hwk-bar .b-d { background: #059669; } .hwk-bar .b-p { background: #f59e0b; } .hwk-bar .b-n { background: #dc2626; }
.hwk.s2 .hwk-bar .b-p, .hwk.s4 .hwk-bar .b-n { width: 5.26%; }
.hwk.s5 .hwk-bar .b-d { width: 89.47%; }
.hwk-lg { margin-top: 8px; height: 14px; font-size: 10.5px; font-weight: 700; line-height: 14px; color: #52525b; white-space: nowrap; }
.hwk-lg > * { display: flex; gap: 10px; }
.hwk-lg > * > span { display: inline-flex; align-items: center; gap: 4px; }
.hwk-lg b { font-weight: 800; color: #18181b; font-variant-numeric: tabular-nums; }
.hwk-lg i { width: 7px; height: 7px; border-radius: 50%; }
.hwk-lg .o { box-shadow: inset 0 0 0 1px #a1a1aa; } .hwk-lg .d { background: #059669; } .hwk-lg .p { background: #f59e0b; } .hwk-lg .n { background: #dc2626; }
.hwk-suz { display: flex; gap: 3px; height: 30px; margin-top: 8px; padding: 3px; border-radius: 10px; background: #f4f4f5; }
.hwk-suz > span { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 3px; border-radius: 7px; font-size: 10px; font-weight: 800; line-height: 11px; color: #52525b; text-align: center; }
.hwk-suz > .hwk-suz__on { flex: none; padding: 0 8px; background: #fff; color: #18181b; box-shadow: 0 1px 2px rgba(16, 37, 64, .1); }
.hwk-suz em { flex: none; font-style: normal; color: #71717a; font-variant-numeric: tabular-nums; }
.hwk-gec { display: flex; align-items: center; gap: 5px; height: 26px; margin-top: 8px; padding: 0 9px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 10.5px; font-weight: 800; }
.hwk-gec > span { flex: 1; min-width: 0; white-space: nowrap; }
.hwk-gec svg { flex: none; width: 12px; height: 12px; }

/* kontrol listesi */
.hwk-list { 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 26px -18px rgba(16, 37, 64, .35); }
.hwk-r { height: var(--row); padding: 8px 9px; box-shadow: inset 0 -1px 0 #f0f1f3; }
.hwk-r__top { display: flex; align-items: center; gap: 8px; height: 28px; }
.hwk-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; }
.hwk-av.t0 { background: #d1fae5; color: #065f46; } .hwk-av.t1 { background: #e0f2fe; color: #075985; } .hwk-av.t2 { background: #fef3c7; color: #78350f; }
.hwk-av.t3 { background: #ffe4e6; color: #9f1239; } .hwk-av.t4 { background: #ede9fe; color: #5b21b6; } .hwk-av.t5 { background: #cffafe; color: #155e75; }
.hwk-r__ad { flex: 1; min-width: 0; line-height: 1.15; }
.hwk-r__ad b { display: block; font-size: 11.5px; font-weight: 700; color: #18181b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwk-r__ad small { display: block; font-size: 10px; font-weight: 600; color: #52525b; font-variant-numeric: tabular-nums; }
.hwk-r__st { flex: none; justify-items: end; align-items: center; }
.hwk-bos { height: 18px; padding: 0 5px; border-radius: 5px; background: #f4f4f5; color: #52525b; font-size: 10px; font-weight: 700; line-height: 18px; white-space: nowrap;
  transition: opacity .25s var(--ui-ease) var(--rd, var(--d)), scale .3s var(--ui-ease) var(--rd, var(--d)); }
.hwk-gb { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 6px; border: 1px dashed #fb923c; color: #c2410c; font-size: 10.5px; font-weight: 800;
  opacity: 0; scale: .8; transition: opacity .25s var(--ui-ease) var(--rd, var(--d)), scale .4s var(--hwk-spring) var(--rd, var(--d)); }
.hwk-gb svg { width: 10px; height: 10px; stroke-width: 2.4; }
.hwk-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; height: 28px; margin-top: 6px; }
.hwk-o { position: relative; display: grid; place-items: center; min-width: 0; border-radius: 7px; background: #f4f4f5; color: #3f3f46; text-align: center;
  font-size: 10px; font-weight: 800; line-height: 11px; letter-spacing: -.01em; hyphens: manual;
  transition: background-color .22s var(--ui-ease) var(--rd, var(--d)), color .22s var(--ui-ease) var(--rd, var(--d)), box-shadow .22s var(--ui-ease) var(--rd, var(--d)); }
.hwk-o > span { padding: 0 2px; }
.hwk-r--d { --rd: calc(var(--d) + var(--i) * 110ms); }

/* yapışkan eylem: «Tüm/Kalan N öğrenciyi «Tam yaptı» işaretle» → «Geri al» çubuğu */
.hwk-stk { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; }
.hwk-stk > .hwk-x { align-items: end; }
.hwk-kal { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 8px; border-radius: 11px; background: var(--hwk-ok); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(6, 78, 59, .2), 0 10px 18px -10px rgba(6, 78, 59, .7); }
.hwk-kal svg { flex: none; width: 14px; height: 14px; stroke-width: 2.4; }
.hwk-geri { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 5px 6px 5px 10px; border-radius: 11px; background: #18181b; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 13px; box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 12px 22px -12px rgba(0, 0, 0, .6); }
.hwk-geri svg { flex: none; width: 14px; height: 14px; color: #34d399; stroke-width: 2.4; }
.hwk-geri > span { flex: 1; min-width: 0; text-wrap: balance; }
.hwk-geri b { flex: none; padding: 0 7px; font-size: 11px; font-weight: 800; color: #6ee7b7; }

/* kaydırma: parmak sürükler, kaydırma çubuğu belirir */
.hwk-sw { position: absolute; z-index: 4; left: 66%; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .78), rgba(226, 233, 243, .5) 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); }
.hwk-pg::after { content: ""; position: absolute; z-index: 3; right: 2px; top: 0; width: 3px; height: 59px; border-radius: 2px; background: rgba(16, 37, 64, .34); opacity: 0; translate: 0 0;
  transition: translate .78s var(--hwk-scroll) .1s; }

/* parmak dokunuşu (hedefin ortası) */
.hwk-tap { position: absolute; z-index: 5; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .78), rgba(226, 233, 243, .5) 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); }
.hwk-tap 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; }
@keyframes hwk-tap { 0% { opacity: 0; transform: translate(10px, 14px); scale: 1.1; } 28% { opacity: 1; transform: none; scale: 1; } 42% { scale: .76; } 58% { scale: 1; opacity: 1; } 100% { opacity: 0; transform: translate(6px, 8px); } }
@keyframes hwk-ring { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: 2.4; } }
@keyframes hwk-press { 45% { scale: .93; } }

/* tab çubuğu (öğretmen) */
.hwk-tab { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 46px; padding: 4px 3px 0;
  background: #fff; box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08), 0 -6px 14px -10px rgba(16, 37, 64, .25); }
.hwk-tab > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 3px; color: #52525b; font-size: 10px; font-weight: 700; white-space: nowrap; letter-spacing: -.02em; }
.hwk-tab svg { width: 15px; height: 15px; }
.hwk-tab__m i { position: absolute; top: 0; left: calc(50% + 4px); display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #dc2626; color: #fff;
  font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 1.5px #fff; }

/* ══ VELİNİN TELEFONU ══ */
/* kilit ekranı (telefonun kendisi) */
.hwk-lk { position: absolute; z-index: 0; inset: 0; color: #fff; isolation: isolate;
  background: radial-gradient(120% 70% at 85% 8%, rgba(255, 182, 39, .28), rgba(255, 182, 39, 0) 55%), radial-gradient(90% 60% at 0% 100%, rgba(77, 140, 214, .45), rgba(77, 140, 214, 0) 60%),
              linear-gradient(165deg, #0b2440 0%, var(--navy) 55%, var(--navy-soft) 100%); }
.hwk-lk__c { position: absolute; left: 0; right: 0; top: 42px; display: flex; flex-direction: column; align-items: center; }
.hwk-lk__c svg { width: 13px; height: 13px; stroke-width: 2.2; opacity: .9; }
.hwk-lk__c b { margin-top: 4px; font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hwk-lk__c small { margin-top: 5px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .86); }
.hwk-lk__b { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; }
.hwk-lk__b span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.hwk-lk__b svg { width: 15px; height: 15px; }
.hwk-lk__h { position: absolute; left: 50%; bottom: 7px; width: 84px; height: 4px; margin-left: -42px; border-radius: 2px; background: rgba(255, 255, 255, .85); }

/* anlık bildirim */
.hwk-nt { position: absolute; z-index: 7; left: 8px; right: 8px; top: 142px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 9px 10px 10px 9px; border-radius: 16px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 2px 4px rgba(4, 14, 28, .12), 0 18px 32px -14px rgba(4, 14, 28, .6), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10.5px; font-weight: 500; line-height: 1.36; color: #3d4a5c; opacity: 0; translate: 0 -24px; scale: .96;
  transition: opacity .3s var(--ui-ease), translate .7s cubic-bezier(.34, 1.4, .64, 1), scale .5s var(--ui-ease); }
.hwk-nt img { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.hwk-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.hwk-nt__h b { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; color: #172238; letter-spacing: -.005em; }
.hwk-nt__h em { flex: none; font-style: normal; font-size: 10px; color: #6a7486; }
.hwk-tag { position: absolute; z-index: 8; left: 50%; bottom: -9px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 9px 0 7px; border-radius: 999px; translate: -50% 0;
  background: var(--sun); color: #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(--hwk-spring); }
.hwk-tag svg { width: 11px; height: 11px; stroke-width: 2.4; }

/* veli uygulaması: Ödevler › kart */
.hwk-app { position: absolute; z-index: 1; inset: 0; background: #f7f8fb; opacity: 0; scale: 1.04; transition: opacity .4s var(--ui-ease), scale .55s var(--ui-ease); }
.hwk-ph-hd { position: absolute; inset: 0 0 auto; height: 64px; display: flex; align-items: center; gap: 8px; padding: 24px 10px 0; }
.hwk-pb { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: #1f2937; }
.hwk-pb svg { width: 17px; height: 17px; }
.hwk-pb--bell { position: relative; margin-left: auto; }
.hwk-pb--bell::after { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px #f7f8fb; }
.hwk svg.hwk-logo { flex: none; width: 30px; height: 30px; border-radius: 50%; stroke: none; box-shadow: 0 0 0 1.5px #fff, 0 2px 5px -1px rgba(16, 37, 64, .4); }
.hwk-pav { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 13px; font-weight: 800;
  box-shadow: 0 0 0 1px var(--ui-line), 0 2px 5px -2px rgba(16, 37, 64, .3); }
.hwk-pc { position: absolute; left: 0; right: 0; top: 64px; padding: 4px 10px 0; }
.hwk-pc > * { opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease), translate .5s var(--hwk-spring); }
/* tek aktif çocuk (Meltem Kartal ayrıldı) → çocuk şeridi yok (portal/_shell.php:279) */
.hwk-pt { margin-top: 4px; line-height: 1.2; }
.hwk-pt b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #111827; }
.hwk-pt span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: #4b5563; }
.hwk-pk { display: block; margin-top: 10px; padding: 10px 11px 9px; border-radius: 14px; background: #fff5f4; box-shadow: inset 0 0 0 1px #ffdad6, 0 4px 12px rgba(186, 26, 26, .06); }
.hwk-pk > span, .hwk-pk > b { display: block; }
.hwk-pk > .hwk-pk__h { display: flex; align-items: center; gap: 8px; }
.hwk-pk__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #e8eef8; color: var(--navy-soft); }
.hwk-pk__i svg { width: 15px; height: 15px; }
.hwk-pk__h b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: #111827; }
/* «Yapmadı» = pBadge güçlü kırmızı (portal/_ui.php:240): DOLU #ba1a1a, beyaz yazı, yarı kalın (font-semibold), p-label harf aralığı (.04em) */
.hwk-pk__h em { flex: none; height: 19px; padding: 0 8px; border-radius: 999px; background: #ba1a1a; color: #fff; font-style: normal; font-size: 10px; font-weight: 600; line-height: 19px; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  scale: .6; opacity: 0; transition: scale .45s var(--hwk-spring), opacity .25s var(--ui-ease); }
.hwk-pk__t { margin-top: 8px; font-size: 12.5px; font-weight: 800; line-height: 16px; letter-spacing: -.01em; color: #111827; }
.hwk-pk__o { margin-top: 1px; font-size: 10.5px; font-weight: 600; color: #4b5563; }
.hwk-pk__d { margin-top: 5px; font-size: 10.5px; line-height: 14px; color: #4b5563; }
.hwk-pk > .hwk-pk__f { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f5d5d1; font-size: 11px; font-weight: 800; color: #ba1a1a; }
.hwk-pk__f svg { width: 14px; height: 14px; }
.hwk-ptab { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, .9fr)) minmax(0, 1.1fr) minmax(0, .9fr); height: 46px; padding: 5px 2px 0; background: #fff;
  box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08); }
.hwk-ptab > span { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #3f3f46; font-size: 10px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.hwk-ptab svg { width: 15px; height: 15px; }

/* ══ ADIMLAR ══ */
/* s1: Cem Özer'e kaydırılır */
.hwk.s1 .hwk-scr { translate: 0 calc(-1 * (var(--pre) + 5 * var(--row) - 36px)); }
.hwk.s1 .hwk-pg::after { translate: 0 122px; }
.hwk.s1:not(.s2) .hwk-sw { animation: hwk-up1 .95s var(--hwk-scroll) both; }
.hwk.s1:not(.s2) .hwk-pg::after, .hwk.s3:not(.s4) .hwk-pg::after, .hwk.s6:not(.s7) .hwk-pg::after { animation: hwk-thumb 1s ease .05s both; }
@keyframes hwk-up1 { 0% { opacity: 0; translate: 0 270px; scale: .85; } 14% { opacity: 1; scale: 1; translate: 0 270px; } 82% { opacity: 1; translate: 0 120px; } 100% { opacity: 0; translate: 0 120px; } }
@keyframes hwk-up2 { 0% { opacity: 0; translate: 0 270px; scale: .85; } 14% { opacity: 1; scale: 1; translate: 0 270px; } 82% { opacity: 1; translate: 0 120px; } 100% { opacity: 0; translate: 0 120px; } }
@keyframes hwk-down { 0% { opacity: 0; translate: 0 90px; scale: .85; } 14% { opacity: 1; scale: 1; translate: 0 90px; } 82% { opacity: 1; translate: 0 250px; } 100% { opacity: 0; translate: 0 250px; } }
@keyframes hwk-thumb { 0% { opacity: 0; } 18%, 72% { opacity: 1; } 100% { opacity: 0; } }

/* s2: Cem Özer → Eksik yaptı */
.hwk.s2 .hwk-r--cem .hwk-o--partial { background: var(--hwk-am); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px -5px rgba(180, 83, 9, .7); }
.hwk.s2:not(.s3) .hwk-r--cem .hwk-o--partial { animation: hwk-press .3s var(--ui-ease) .3s; }
.hwk.s2:not(.s3) .hwk-tap--cem { animation: hwk-tap .95s var(--ui-ease) .05s both; }
.hwk.s2:not(.s3) .hwk-tap--cem i { animation: hwk-ring .55s ease-out .4s both; }
.hwk.s2 .hwk-r--cem .hwk-bos { opacity: 0; scale: .8; }
.hwk.s2 .hwk-r--cem .hwk-gb { opacity: 1; scale: 1; }

/* s3: Sami Kartal'a kaydırılır */
.hwk.s3 .hwk-scr { translate: 0 calc(-1 * (var(--pre) + 15 * var(--row) - 64px)); }
.hwk.s3 .hwk-pg::after { translate: 0 253px; }
.hwk.s3:not(.s4) .hwk-sw { animation: hwk-up2 .95s var(--hwk-scroll) both; }

/* s4: Sami Kartal → Yapmadı (rozet kalkar, «Geç» çıkmaz) */
.hwk.s4 .hwk-r--sami .hwk-o--not_done { background: var(--hwk-bad); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px -5px rgba(194, 38, 29, .7); }
.hwk.s4:not(.s5) .hwk-r--sami .hwk-o--not_done { animation: hwk-press .3s var(--ui-ease) .3s; }
.hwk.s4:not(.s5) .hwk-tap--sami { animation: hwk-tap .95s var(--ui-ease) .05s both; }
.hwk.s4:not(.s5) .hwk-tap--sami i { animation: hwk-ring .55s ease-out .4s both; }
.hwk.s4 .hwk-r--sami .hwk-bos { opacity: 0; scale: .8; }

/* s5: «Kalan 17 öğrenciyi «Tam yaptı» işaretle» → işaretsizler Tam yaptı (kademeli), «Geri al» çubuğu */
.hwk.s5:not(.s6) .hwk-tap--kal { animation: hwk-tap .95s var(--ui-ease) .05s both; }
.hwk.s5:not(.s6) .hwk-tap--kal i { animation: hwk-ring .55s ease-out .4s both; }
.hwk.s5 .hwk-kal { animation: hwk-press .3s var(--ui-ease) .3s; }
.hwk.s5 .hwk-r--d .hwk-o--done { background: var(--hwk-ok); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(4, 120, 87, .7); }
.hwk.s5 .hwk-r--d .hwk-bos { opacity: 0; scale: .8; }
.hwk.s5 .hwk-r--d .hwk-gb { opacity: 1; scale: 1; }
.hwk.s5 .hwk-geri { transition-delay: .7s; }

/* s6: başa kaydırılır — özet */
.hwk.s6 .hwk-scr { translate: 0 -135px; transition-duration: .9s; }
.hwk.s6 .hwk-pg::after { translate: 0 24px; transition-duration: .9s; }
.hwk.s6:not(.s7) .hwk-sw { animation: hwk-down 1s var(--hwk-scroll) both; }

/* s7: velinin telefonuna anlık bildirim */
.hwk.s7 .hwk-nt { opacity: 1; translate: 0 0; scale: 1; transition-delay: .35s; }
.hwk.s7 .hwk-tag { opacity: 1; scale: 1; transition-delay: .9s; }
/* s8: bildirime dokunulur → veli uygulaması (kart «Yapmadı») */
.hwk.s8:not(.is-static) .hwk-tap--nt { animation: hwk-tap .7s var(--ui-ease) both; }
.hwk.s8 .hwk-tap--nt i { animation: hwk-ring .5s ease-out .25s both; }
.hwk.s8 .hwk-nt { opacity: 0; scale: .92; translate: 0 -10px; transition: opacity .3s var(--ui-ease) .5s, scale .4s var(--ui-ease) .5s, translate .4s var(--ui-ease) .5s; }
.hwk.s8 .hwk-app { opacity: 1; scale: 1; transition-delay: .55s; }
.hwk.s8 .hwk-pc > * { opacity: 1; translate: 0 0; }
.hwk.s8 .hwk-pt { transition-delay: .78s; } .hwk.s8 .hwk-pk { transition-delay: .9s; }
.hwk.s8 .hwk-pk__h em { opacity: 1; scale: 1; transition-delay: 1.3s; }

/* ══ DAR KAP: tek telefon; veli telefonu s7'de önüne kayar ══ */
@container (max-width: 599px) {
  .hwk-stage { display: block; }
  .hwk-ph--t { width: min(330px, 100%); margin: 0 auto; }
  .hwk-ph--v { position: absolute; z-index: 5; top: 18px; right: max(0px, calc(50% - 165px)); width: min(272px, 84%); opacity: 0; translate: 40px 0; }
  .hwk.s7 .hwk-ph--v { opacity: 1; translate: 0 0; }
  .hwk.s7 .hwk-ph--t { opacity: .42; scale: .97; translate: -6px 0; }
  .hwk.s7 .hwk-nt { transition-delay: .7s; }
  .hwk.s7 .hwk-tag { transition-delay: 1.2s; }
}