/* SAHNE · KOÇLUK: HAFTALIK ÇALIŞMA PLANI (includes/scenes/coaching.php) — adımlar:
   s0 «Plan açılıyor…» · s1 taslak: özet sayaçları, gün gün görev hapları · s2 «Öğrenciye gönder» → onay penceresi ·
   s3 «Gönder» → yeşil bildirim, durum «Gönderildi — henüz çalışılmadı», «Kaydet» → «Değişiklikleri kaydet» ·
   s4 öğrencinin telefonu: «Yeni çalışma planın hazır» · s5 Salı 20:04 Koçluk görevlerim (4/20, Sal 1/3): «Doğru» alanına 19 ·
   s6 «Yaptım» → 5/20, Sal 2/3, «Ben: Yaptım · 19/20 doğru» · s7 koçun plan ekranı: kilitli «yapıldı» görevler, «11/20 doğru · %55»,
   «19/20 doğru · %95», «Gönderildi · 5 görevde çalışıldı», «· gelecek hafta» eki düşer */
@property --coa-a { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --coa-b { syntax: '<integer>'; inherits: false; initial-value: 0; }

.coa { container-type: inline-size; --d: 0s; --coa-h: 470px; --coa-pw: 232px; --coa-spring: cubic-bezier(.34, 1.56, .64, 1);
  --coa-ok: #047857; --coa-ok-ink: #065f46; position: relative; height: var(--coa-h); }
.coa.s1 { --d: .25s; } .coa.s2 { --d: .55s; } .coa.s3 { --d: .45s; } .coa.s4 { --d: 0s; } .coa.s5 { --d: .4s; } .coa.s6 { --d: .5s; } .coa.s7 { --d: .2s; }
.coa-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; on-A-B = A. adımdan B. adıma kadar görünür */
.coa-x { display: inline-grid; min-width: 0; vertical-align: top; }
.coa-x > * { grid-area: 1 / 1; min-width: 0; }
.coa [class*="on-"] { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.coa:not(.s3) .on-0-3, .coa:not(.s5) .on-0-5, .coa:not(.s6) .on-0-6, .coa.s3 .on-3, .coa.s3:not(.s7) .on-3-7, .coa.s5 .on-5, .coa.s6 .on-6,
.coa.s7 .on-7 { opacity: 1; transform: none; }

/* imleç (masaüstü) ve dokunuş (telefon) */
.coa-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.coa-hit .ui-cur { left: -5px; top: -3px; transform: translate(26px, 22px); }
.coa-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; }
.coa-tap { position: absolute; z-index: 8; width: 0; height: 0; pointer-events: none; }
.coa-tap i { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 61, 107, .2); box-shadow: 0 0 0 1.5px rgba(20, 61, 107, .35); opacity: 0; }
@keyframes coa-cur { 0% { opacity: 0; transform: translate(26px, 22px); } 38% { opacity: 1; transform: none; scale: 1; } 52% { scale: .8; } 66%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes coa-cur-out { 0% { opacity: 0; transform: translate(26px, 22px); } 34% { opacity: 1; transform: none; scale: 1; } 48% { scale: .8; } 60% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes coa-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes coa-tap { 0% { opacity: 0; scale: .4; } 25% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.5; } }
@keyframes coa-push { 50% { scale: .94; } }
@keyframes coa-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── pencere ── */
.coa-win { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ui-bg-2); }
.coa-load { position: absolute; inset: 12px 12px auto; z-index: 4; display: grid; place-items: center; height: 96px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); font-size: 12px; font-weight: 600; color: #52525b; transition: opacity .25s var(--ui-ease); }
.coa.s1 .coa-load { opacity: 0; }

/* bant (kurum rengi) */
.coa-band { flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 9px 10px 9px 9px; border-radius: 14px; 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);
  opacity: 0; translate: 0 -6px; transition: opacity .35s var(--ui-ease) .1s, translate .45s var(--ui-ease) .1s; }
.coa.s1 .coa-band { opacity: 1; translate: 0 0; }
.coa-back, .coa-b2 { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 9px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); font-size: 11.5px; font-weight: 800; }
.coa-b2--ic { width: 30px; padding: 0; justify-content: center; }
.coa-ttl { flex: 1; min-width: 0; }
.coa-ttl > b { display: block; font-size: 15px; font-weight: 800; line-height: 19px; letter-spacing: -.01em; white-space: nowrap; }
.coa-ttl > b span { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.coa-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 18px; color: rgba(255, 255, 255, .82); }
.coa-sub > span { white-space: nowrap; }
.coa-dot { font-style: normal; color: rgba(255, 255, 255, .55); }
/* «· gelecek hafta» yalnız 24.10'daki açılışta; Salı'dan bakınca aralık 'ozel' → ek yok (s7'de yumuşak düşer) */
.coa-gh { display: inline-block; max-width: 110px; overflow: hidden; vertical-align: top; white-space: nowrap;
  transition: max-width .45s var(--ui-ease) var(--d), opacity .25s var(--ui-ease) var(--d); }
.coa.s7 .coa-gh { max-width: 0; opacity: 0; }
.coa-stc { justify-items: start; }
.coa-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.coa-chip--amber { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px #fde68a; }
.coa-chip--em { background: #ecfdf5; color: var(--coa-ok-ink); box-shadow: inset 0 0 0 1px #a7f3d0; }
.coa-chip--sky { background: #f0f9ff; color: #075985; box-shadow: inset 0 0 0 1px #bae6fd; }
.coa-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.coa-acts__x { justify-items: end; }
.coa-acts__d { display: flex; align-items: center; gap: 6px; }
.coa-b2--off { opacity: .5; }
.coa-b1 { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; background: #fff; color: var(--navy); font-size: 11.5px; font-weight: 800; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(11, 36, 64, .25), 0 6px 14px -8px rgba(11, 36, 64, .8); }
.coa-b1--off { background: rgba(255, 255, 255, .55); color: rgba(20, 61, 107, .7); box-shadow: none; }
.coa-b1 .coa-hit { right: 30px; bottom: 9px; }
.coa.s2:not(.s3) .coa-b1:not(.coa-b1--off) { animation: coa-push .3s var(--ui-ease) .62s; }
.coa.s2:not(.s3) .coa-hit--send .ui-cur { animation: coa-cur-out 1.2s var(--ui-ease) .1s both; }
.coa.s2:not(.s3) .coa-hit--send .coa-rip { animation: coa-rip .55s ease-out .62s both; }

/* sahne gövdesi */
.coa-stage { position: relative; flex: 1; min-height: 0; margin-top: 8px; overflow: hidden; opacity: 0; transition: opacity .35s var(--ui-ease) .2s; }
.coa.s1 .coa-stage { opacity: 1; }
.coa-stage::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(246, 247, 249, 0), var(--ui-bg-2) 85%); pointer-events: none; }
.coa-page { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; transition: translate .7s var(--ui-ease); }
.coa-thumb { position: absolute; z-index: 4; right: 3px; top: 6px; width: 4px; height: 92px; border-radius: 2px; background: rgba(23, 34, 56, .2); opacity: 0; transition: opacity .3s var(--ui-ease) 1.6s; }
.coa.s1 .coa-thumb { opacity: 1; }
.coa.s4 .coa-thumb { opacity: 0; transition-delay: 0s; }

/* yeni taslak şeridi: gönderilince kapanır (yükseklik yumuşak) */
.coa-new { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 7px; padding: 7px 10px 8px; border-radius: 12px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0;
  font-size: 11px; font-weight: 800; line-height: 15px; color: #064e3b; overflow: hidden; max-height: 64px;
  transition: max-height .5s var(--ui-ease) var(--d), padding .5s var(--ui-ease) var(--d), opacity .25s var(--ui-ease) var(--d), margin .5s var(--ui-ease) var(--d); }
.coa-new .coa-i { width: 15px; height: 15px; margin-top: 0; color: #059669; }
.coa-new em { font-style: normal; font-weight: 600; }
.coa.s3 .coa-new { max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; opacity: 0; box-shadow: none; }

/* özet şeridi */
.coa-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; border-radius: 12px; 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); font-size: 11px; font-weight: 700; color: #52525b; }
.coa-sum__n { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.coa-sum__n b { margin-right: 2px; font-size: 16px; font-weight: 900; letter-spacing: -.02em; color: #18181b; }
.coa-sum__d { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: #27272a; white-space: nowrap; }
.coa-sum__z { font-weight: 600; color: #3f3f46; white-space: nowrap; }
.coa-sum__z b { font-weight: 800; }
.coa-n { counter-reset: coa-a var(--coa-a) coa-b var(--coa-b); font-variant-numeric: tabular-nums; transition: --coa-a .9s var(--ui-ease) .35s, --coa-b .9s var(--ui-ease) .35s; }
.coa-n::after { content: counter(coa-a); }
.coa-n--h::after { content: counter(coa-a) "," counter(coa-b); }
.coa.s1 .coa-n--g { --coa-a: 20; }
.coa.s1 .coa-n--s { --coa-a: 366; }
.coa.s1 .coa-n--h { --coa-a: 14; --coa-b: 9; }

/* hafta kartı (Satır görünümü) */
.coa-week { border-radius: 12px; 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); overflow: hidden; }
.coa-wh { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px 0 12px; border-bottom: 1px solid #f1f1f3; background: #fafafa; }
.coa-wh > b { font-size: 12.5px; font-weight: 800; color: #18181b; }
.coa-key { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 9px; font-size: 10.5px; font-weight: 700; color: #3f3f46; white-space: nowrap; overflow: hidden; height: 15px; }
.coa-key span { display: inline-flex; align-items: center; gap: 4px; }
.coa-key i, .coa-pill__a > i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.coa-seg { flex: none; display: inline-flex; padding: 2px; border-radius: 8px; background: #f1f1f4; }
.coa-seg span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; color: #52525b; }
.coa-seg .coa-seg__on { background: #fff; color: var(--navy-soft); box-shadow: 0 1px 2px rgba(16, 37, 64, .12), 0 0 0 1px rgba(16, 37, 64, .05); }
.coa-seg .coa-i { width: 12px; height: 12px; }
.coa-t-konu { --c-bg: #fff1f2; --c-ink: #4c0519; --c-ring: #fecdd3; --c-dot: #f43f5e; }
.coa-t-pekistirme { --c-bg: #f0fdfa; --c-ink: #042f2e; --c-ring: #99f6e4; --c-dot: #14b8a6; }
.coa-t-tekrar { --c-bg: #fffbeb; --c-ink: #451a03; --c-ring: #fde68a; --c-dot: #f59e0b; }
.coa-t-paragraf { --c-bg: #fdf4ff; --c-ink: #4a044e; --c-ring: #f5d0fe; --c-dot: #d946ef; }
.coa-t-sabit { --c-bg: #f1f5f9; --c-ink: #0f172a; --c-ring: #e2e8f0; --c-dot: #94a3b8; }
.coa-key i { background: var(--c-dot); }

.coa-day { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; padding: 8px 10px 9px 12px; border-top: 1px solid #f1f1f3; }
.coa-wh + .coa-day { border-top: 0; }
.coa-day__h b { display: block; font-size: 12.5px; font-weight: 800; line-height: 17px; color: #18181b; white-space: nowrap; }
.coa-day__h small { font-size: 10.5px; font-weight: 600; color: #52525b; font-variant-numeric: tabular-nums; }
.coa-yuk { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.coa-yuk > i { position: relative; flex: none; width: 34px; height: 5px; border-radius: 3px; background: #e4e4e7; overflow: hidden; }
.coa-yuk > i > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #10b981; scale: 0 1; transform-origin: left; transition: scale .6s var(--ui-ease) .5s; }
.coa-yuk em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #065f46; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coa-yuk--dolu > i > i { background: #f59e0b; } .coa-yuk--dolu em { color: #92400e; }
.coa.s1 .coa-yuk > i > i { scale: 1 1; }
.coa-pills { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px; min-width: 0; }
.coa-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; max-width: 100%; min-height: 24px; padding: 3px 8px; border-radius: 8px; background: var(--c-bg); color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-ring); font-size: 11px; line-height: 16px;
  opacity: 0; translate: 0 5px; scale: .96; transition: opacity .3s var(--ui-ease) calc(.45s + var(--i) * 65ms), translate .4s var(--coa-spring) calc(.45s + var(--i) * 65ms), scale .4s var(--coa-spring) calc(.45s + var(--i) * 65ms), box-shadow .3s var(--ui-ease); }
.coa.s1 .coa-pill { opacity: 1; translate: 0 0; scale: 1; }
.coa-pill__a, .coa-pill__b { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; }
.coa-pill__a > *, .coa-pill__b > * { white-space: nowrap; }
.coa-pill__a > i { background: var(--c-dot); }
.coa-pill__a b { font-weight: 800; }
.coa-pill__a span { font-weight: 600; }
.coa-pill__b em { font-style: normal; font-weight: 700; opacity: .78; font-variant-numeric: tabular-nums; }
/* kilit + sonuç (öğrenci işaretleyince): hep akışta, display değişmez. Geniş kapta satır içinde genişliği 0'dan açılır
   (eksi pay boş aralığı siler); dar kapta kendi satırında yüksekliği 0'dan açılır — hap ve gün satırı yumuşak büyür */
.coa-pill__r { --t: .35s; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 0; margin-left: -6px; overflow: hidden; white-space: nowrap;
  transition: max-width .55s var(--ui-ease) var(--t), max-height .45s var(--ui-ease) var(--t), margin .45s var(--ui-ease) var(--t); }
.coa-pill--s .coa-pill__r { --t: .75s; }
.coa-pill__r > * { opacity: 0; scale: .8; transition: opacity .25s var(--ui-ease) calc(var(--t) + .15s), scale .4s var(--coa-spring) calc(var(--t) + .15s); }
.coa-pill__r > .coa-res { transition-delay: calc(var(--t) + .25s); }
.coa.s7 .coa-pill__r { max-width: 220px; margin-left: 0; }
.coa.s7 .coa-pill__r > * { opacity: 1; scale: 1; }
.coa.s7 .coa-pill__r > .coa-lock { opacity: .82; }
.coa-lock { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 800; }
.coa-lock .coa-i { width: 11px; height: 11px; stroke-width: 2.2; }
.coa-res { display: inline-block; height: 16px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px #bae6fd; font-size: 10px; font-weight: 800; line-height: 16px; color: #075985; font-variant-numeric: tabular-nums; }
.coa.s7 .coa-pill--s { box-shadow: inset 0 0 0 1px var(--c-ring), 0 0 0 3px rgba(29, 79, 134, .16); transition-delay: .7s; }
.coa-add { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 8px; border: 1px dashed #d4d4d8; font-size: 10.5px; font-weight: 800; color: #52525b;
  opacity: 0; transition: opacity .3s var(--ui-ease) calc(.6s + var(--i) * 65ms); }
.coa-add .coa-i { width: 12px; height: 12px; }
.coa.s1 .coa-add { opacity: 1; }

/* yeşil bildirim (altta ortada; uygulamada üst çubuğun üstünde çıkar — sahnede bandı ve adı örtmesin diye altta) */
.coa-toast { position: absolute; z-index: 9; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 24px); padding: 8px 13px; border-radius: 11px; background: #047857; color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 15px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(4, 60, 40, .3), 0 14px 28px -12px rgba(4, 60, 40, .7); opacity: 0; translate: -50% 14px; transition: opacity .3s var(--ui-ease), translate .45s var(--coa-spring); }
.coa-toast .coa-i { width: 15px; height: 15px; }
.coa.s3:not(.s4) .coa-toast { opacity: 1; translate: -50% 0; transition-delay: .55s; }

/* onay penceresi */
.coa-dlg { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .38); opacity: 0; transition: opacity .25s var(--ui-ease); }
.coa.s2:not(.s3) .coa-dlg { opacity: 1; transition-delay: .78s; }
.coa-dlg__box { display: flex; flex-direction: column; align-items: center; width: min(330px, 100%); padding: 16px 18px 14px; border-radius: 14px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 2px 6px rgba(16, 37, 64, .1), 0 30px 60px -24px rgba(16, 37, 64, .6);
  scale: .9; transition: scale .4s var(--coa-spring); }
.coa.s2:not(.s3) .coa-dlg__box { scale: 1; transition-delay: .78s; }
.coa-dlg__q { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px #c9dae1; font-size: 22px; font-weight: 600; color: #87adbd; }
.coa-dlg__box > b { margin-top: 9px; font-size: 15px; font-weight: 800; line-height: 20px; color: #18181b; }
.coa-dlg__t { margin-top: 5px; font-size: 11px; font-weight: 500; line-height: 16px; color: #3f3f46; text-wrap: pretty; }
.coa-dlg__b { display: flex; gap: 8px; margin-top: 12px; }
.coa-dlg__b > span { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #fff; }
.coa-dlg__no { background: #71717a; }
.coa-dlg__yes { background: #18181b; }
.coa-dlg__yes .coa-hit { right: 18px; bottom: 9px; }
.coa.s3:not(.s4) .coa-dlg { transition-delay: .35s; }
.coa.s3:not(.s4) .coa-dlg__yes { animation: coa-push .3s var(--ui-ease) .28s; }
.coa.s3:not(.s4) .coa-hit--yes .ui-cur { animation: coa-cur-out .75s var(--ui-ease) both; }
.coa.s3:not(.s4) .coa-hit--yes .coa-rip { animation: coa-rip .5s ease-out .28s both; }

/* telefon gelince pencere söner */
.coa-win::after { content: ""; position: absolute; z-index: 7; inset: 0; background: rgba(15, 23, 42, .32); opacity: 0; pointer-events: none; transition: opacity .4s var(--ui-ease); }
.coa.s4:not(.s7) .coa-win::after { opacity: 1; }

/* ══ ÖĞRENCİNİN TELEFONU ══ */
.coa-ph { position: absolute; z-index: 10; top: 10px; right: 18px; bottom: 10px; width: var(--coa-pw); opacity: 0; translate: 0 40px;
  transition: opacity .35s var(--ui-ease), translate .6s cubic-bezier(.3, 1.2, .5, 1); }
.coa.s4:not(.s7) .coa-ph { opacity: 1; translate: 0 0; }
.coa.s7 .coa-ph { translate: 40px 0; transition-duration: .3s, .45s; }
.coa-phone { position: relative; height: 100%; background: #f6f8fc; border-radius: 28px; }
.coa-sb { position: absolute; z-index: 6; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 18px; color: #0b1526; pointer-events: none; transition: color .3s var(--ui-ease); }
.coa-sb__t b { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coa.s4:not(.s5) .coa-sb { color: #fff; }
.coa-isl { position: absolute; left: 50%; top: 6px; width: 52px; height: 15px; margin-left: -26px; border-radius: 999px; background: #05070b; }
.coa-sbi { display: flex; align-items: center; gap: 3px; }
.coa-sbi .coa-i { width: 11px; height: 11px; stroke-width: 2.4; }
.coa-sbi .coa-bat { width: 16px; height: 12px; }

/* kilit ekranı */
.coa-lk { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 40px 8px 0; color: #fff;
  background: radial-gradient(120% 70% at 20% 0%, #2b5a8f 0%, transparent 60%), linear-gradient(165deg, var(--navy-soft), var(--navy) 45%, var(--navy-night));
  opacity: 0; transition: opacity .35s var(--ui-ease); }
.coa.s4:not(.s5) .coa-lk { opacity: 1; }
.coa.s5 .coa-lk { transition-delay: .3s; }
.coa-lk__d { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.coa-lk__t { font-size: 50px; font-weight: 700; line-height: 56px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.coa-nt { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin-top: 22px; padding: 9px 10px 10px 9px; border-radius: 15px; text-align: left;
  background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 2px 4px rgba(16, 37, 64, .1), 0 18px 30px -16px rgba(5, 15, 30, .65), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10px; font-weight: 500; line-height: 14px; color: var(--ui-text-2); opacity: 0; translate: 0 -16px; scale: .96; transition: opacity .3s var(--ui-ease), translate .6s var(--coa-spring), scale .6s var(--coa-spring); }
.coa.s4 .coa-nt { opacity: 1; translate: 0 0; scale: 1; transition-delay: .55s; }
.coa-nt img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.coa-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.coa-nt__h b { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 800; color: var(--ui-text); }
.coa-nt__h em { flex: none; font-style: normal; font-size: 10px; color: var(--ui-muted); }

/* portal: Ödevler › Koçluk görevlerim */
.coa-ap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding-top: 24px; background: #f6f8fc; }
.coa-ah { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 8px; background: #f6f8fc; position: relative; z-index: 2; }
.coa-ah__b { display: grid; place-items: center; width: 22px; height: 22px; color: #1f2937; }
.coa-ah__b .coa-i { width: 15px; height: 15px; }
.coa-logo { width: 24px; height: 24px; flex: none; }
.coa-ah__s { flex: 1; }
.coa-ah__bell { position: relative; display: grid; place-items: center; width: 22px; height: 22px; color: #374151; }
.coa-ah__bell .coa-i { width: 15px; height: 15px; }
.coa-ah__bell::after { content: ""; position: absolute; right: 3px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px #f6f8fc; }
.coa-ah__av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #e5e7eb; font-size: 12px; font-weight: 800; color: var(--navy-soft); }
.coa-scr { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.coa-sec { margin: 0 5px; padding: 9px 8px 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(199, 197, 208, .45), 0 1px 2px rgba(16, 37, 64, .04);
  transition: translate .7s var(--ui-ease) var(--d); }
.coa.s5 .coa-sec { translate: 0 var(--coa-scroll, -96px); transition-delay: .4s; }
/* «Yaptım» formu gönderilir, sayfa /portal/homework#koc-gorevleri'ye döner: kısa yenilenme, bölümün başı */
.coa.s6 .coa-sec { translate: 0 0; transition: translate 0s .45s; }
@keyframes coa-reload { 0%, 100% { opacity: 1; } 40% { opacity: .2; } }
.coa.s6 .coa-scr { animation: coa-reload .6s ease .22s both; }
.coa-sec__h { display: flex; align-items: center; height: 18px; margin-bottom: 7px; }
.coa-sec__h b { font-size: 12.5px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.coa-pc { padding: 8px 9px 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(199, 197, 208, .55); }
.coa-pc__h { display: flex; align-items: flex-start; gap: 7px; }
.coa-pc__ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ui-primary-soft); color: var(--navy-soft); }
.coa-pc__ic .coa-i { width: 14px; height: 14px; }
.coa-pc__t { flex: 1; min-width: 0; line-height: 13px; }
.coa-pc__t b { display: block; font-size: 10.5px; font-weight: 800; color: #0f172a; }
.coa-pc__t small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: #46464f; }
.coa-pdf { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 6px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(199, 197, 208, .8); font-size: 10px; font-weight: 800; color: var(--navy-soft); }
.coa-pdf .coa-i { width: 11px; height: 11px; }
.coa-pg { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.coa-pg > i { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #eff4ff; overflow: hidden; }
.coa-pg > i > i { position: absolute; inset: 0 auto 0 0; width: 20%; border-radius: inherit; background: #10b981; transition: width .6s var(--ui-ease) var(--d); }
.coa.s6 .coa-pg > i > i { width: 25%; transition-delay: .65s; }
.coa-pg b { font-size: 10px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coa-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 7px; }
.coa-wd { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.coa-wd small { font-size: 10px; font-weight: 700; line-height: 12px; color: #46464f; }
.coa-wd__c { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.coa-wd__c .coa-i { width: 12px; height: 12px; stroke-width: 2.6; }
.coa-wd__c--tamam { background: #10b981; color: #fff; }
.coa-wd__c--kismen { background: #fbbf24; color: #2a1800; }
.coa-wd__c--gelecek { background: #eff4ff; color: #46464f; }
.coa-pc__n { margin-top: 6px; font-size: 10px; font-weight: 600; line-height: 13px; color: #46464f; }

.coa-tk { padding: 10px 0 0; }
.coa-tk__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 4px; }
.coa-tk__l { display: contents; }
.coa-tk__l b { order: 3; flex-basis: 100%; font-size: 12px; font-weight: 800; line-height: 16px; color: #0f172a; }
.coa-bdg { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.coa-bdg--red { background: #ffdad6; color: #93000a; }
.coa-bdg--mint { background: #d1fae5; color: #065f46; }
.coa-tk__me { order: 2; opacity: 0; scale: .6; transform-origin: left center; transition: opacity .3s var(--ui-ease), scale .45s var(--coa-spring); }
.coa.s6 .coa-tk__me { opacity: 1; scale: 1; transition-delay: .5s; }
.coa-tk__m { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; line-height: 13px; color: #46464f; }
.coa-tk__d { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; line-height: 13.5px; color: #46464f; }
.coa-in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin-top: 7px; }
.coa-fl small { display: block; font-size: 10px; font-weight: 800; line-height: 13px; color: #46464f; white-space: nowrap; }
.coa-fl small em { font-style: normal; font-weight: 600; }
.coa-box { position: relative; display: flex; align-items: center; width: 64px; height: 28px; margin-top: 2px; padding: 0 9px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(199, 197, 208, .8);
  font-size: 12px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; transition: box-shadow .3s var(--ui-ease); }
.coa-ph0 { color: #9ca3af; font-weight: 600; }
.coa-caret { width: 1.5px; height: 14px; margin-left: 1px; background: var(--navy-soft); opacity: 0; }
.coa.s5:not(.s6) .coa-box--dg { box-shadow: inset 0 0 0 1.5px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: 1.2s; }
.coa.s5:not(.s6) .coa-caret { animation: coa-blink .5s steps(1) 1.2s 2 both; }
.coa.s5 .coa-box--dg .on-5 { transition-delay: 1.55s; }
.coa.s5 .coa-box--dg .on-0-5 { transition-delay: 1.25s; }
.coa-tap--dg { left: 30px; top: 14px; }
.coa.s5:not(.s6) .coa-tap--dg i { animation: coa-tap .5s ease-out 1.15s both; }
.coa-mk { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.coa-mb { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(199, 197, 208, .8);
  font-size: 11px; font-weight: 800; color: #0f172a; transition: background-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease), color .3s var(--ui-ease); }
.coa-mb .coa-i { width: 12px; height: 12px; stroke-width: 2.4; }
.coa-tap--yes { left: 50%; top: 50%; }
.coa.s6 .coa-tap--yes i { animation: coa-tap .55s ease-out .2s both; }
.coa.s6 .coa-mb--yes { background: #d1fae5; color: #065f46; box-shadow: inset 0 0 0 1px transparent; transition-delay: .55s; animation: coa-push .3s var(--ui-ease) .2s; }
.coa-mb--save { max-width: 0; padding: 0; overflow: hidden; white-space: nowrap; color: var(--navy-soft); opacity: 0; box-shadow: none; transition: max-width 0s .45s, padding 0s .45s, opacity .2s var(--ui-ease) .45s; }
.coa.s6 .coa-mb--save { max-width: 140px; padding: 0 9px; opacity: 1; box-shadow: inset 0 0 0 1px rgba(199, 197, 208, .8); }

.coa-nav { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; height: 46px; padding: 0 5px 6px; background: rgba(255, 255, 255, .96); box-shadow: 0 -1px 0 rgba(199, 197, 208, .5); position: relative; z-index: 2; }
.coa-nav span { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; font-weight: 700; letter-spacing: -.02em; color: #374151; white-space: nowrap; }
.coa-nav .coa-i { width: 14px; height: 14px; }
.coa-nav .coa-nav__on { margin: 0 1px; padding: 3px 0 2px; border-radius: 10px; background: var(--navy-soft); color: #fff; }

/* ── DAR KAPLAR ── */
@container (max-width: 760px) {
  /* bant tek satırken başlık sütunu dar: aralık · sınav · çip üç satır; aralık satırı sabit, s7'de ek düşünce sarma değişmez */
  .coa-rng { flex-basis: 100%; }
  .coa-dot { display: none; }
}
@container (min-width: 471px) and (max-width: 660px) {
  /* sonuçlu hap satır içine sığmıyor (sarınca zıplardı): kilit + sonuç kendi satırında, yüksekliği açılır;
     hap satırın tamamını alır (yoksa genişliği gizli satırın payıyla rastgele uzardı, sağ kenarlar hizasız) */
  .coa-pill--r { flex-basis: 100%; }
  .coa-pill--r .coa-pill__r { flex-basis: 100%; max-width: none; margin: -2px 0 0; max-height: 0; }
  .coa.s7 .coa-pill--r .coa-pill__r { max-height: 18px; margin-top: 0; }
}
@container (max-width: 660px) {
  .coa-gh, .coa-key { display: none; }
  .coa-wh { justify-content: space-between; }
  .coa-sum__z { display: none; }
}
@container (max-width: 560px) {
  /* son adımda sayfa kayar: Salı'nın sonucu görünür (özet kartı yukarıda kalır) */
  .coa.s7 .coa-page { translate: 0 -50px; transition-delay: .5s; }
  .coa.s7 .coa-thumb { translate: 0 24px; transition: opacity .3s var(--ui-ease), translate .7s var(--ui-ease) .5s; }
  .coa-exam, .coa-dot { display: none; }
  .coa-rng { flex-basis: auto; }
  .coa-band { flex-wrap: wrap; row-gap: 6px; }
  .coa-ttl { flex-basis: calc(100% - 50px); order: 2; }
  .coa-back { order: 1; }
  .coa-acts { order: 3; width: 100%; justify-content: flex-end; }
  .coa-back__t { display: none; }
  .coa-back { width: 30px; padding: 0; justify-content: center; }
  .coa-day { grid-template-columns: 1fr; row-gap: 5px; }
  .coa-day__h { display: flex; align-items: center; justify-content: space-between; }
  .coa-yuk { margin-top: 0; }
}
@container (max-width: 470px) {
  /* sonuçlu hapta miktar hep ikinci satırda, kilit + sonuç onun yanında açılır; yalnız kilitli hap («+ Ekle»yi itmesin) kendi satırında */
  .coa-pill--r .coa-pill__a { flex-basis: 100%; }
  .coa-pill:not(.coa-pill--r) .coa-pill__r { flex-basis: 100%; max-width: none; margin: -2px 0 0; max-height: 0; }
  .coa.s7 .coa-pill:not(.coa-pill--r) .coa-pill__r { max-height: 18px; margin-top: 0; }
  .coa.s7 .coa-page { translate: 0 -74px; }
  .coa-sum__d { flex-basis: 100%; }
  .coa-band { margin: 10px 10px 0; }
  .coa-page { padding: 0 10px; }
  .coa-ttl > b { font-size: 14px; }
  .coa-ph { left: 50%; right: auto; margin-left: calc(var(--coa-pw) / -2); }
  .coa.s7 .coa-ph { translate: 0 40px; }
  /* dar kapta ileti iki satıra sarar */
  .coa-toast { white-space: normal; width: calc(100% - 24px); }
  .coa-sum { gap: 6px 12px; }
}
@container (max-width: 380px) {
  .coa-pill { gap: 1px 6px; }
  .coa-pill:not(.coa-pill--r) .coa-pill__r { margin-top: -1px; }
  .coa-dlg { padding: 10px; }
  .coa-dlg__box { padding: 14px 12px 12px; }
}