/* SAHNE · KURS: PROGRAMDAN DERSLER → HAKEDİŞ (includes/scenes/courses.php) — adımlar:
   s1 «Önizle» → 35 ders oluşturulacak · 1 tatil günü · s2 «Tatil (atlanır) (1)» açılır (Cumhuriyet Bayramı) ·
   s3 «35 dersi oluştur» → Yoklama sekmesi (bu hafta) + «Başarılı» penceresi · s4 Kurs ek ders hakedişi (Eylül 2026): satır yok ·
   s5 «Hakedişi hazırla» → çipler + iki kişi kartı · s6 Cenk Özer «Ders ders döküm (3)» · s7 «Tümünü onayla» → onaylı ·
   s8 «Ayı kilitle» → «Bu ay kilitli (04.10.2026)», «Bordroya aktarıldı / ödendi» */
@property --crs-v { syntax: '<integer>'; inherits: false; initial-value: 0; }

.crs { container-type: inline-size; --d: 0s; --crs-h: 462px; --crs-y: 0px; --crs-y6: -83px;
  --crs-ok: #047857; --crs-ok-ink: #065f46; --crs-spring: cubic-bezier(.34, 1.56, .64, 1); }
.crs.s1 { --d: .55s; } .crs.s2 { --d: .45s; } .crs.s3 { --d: .72s; } .crs.s4 { --d: .1s; } .crs.s5 { --d: .55s; }
.crs.s6 { --d: .45s; } .crs.s7 { --d: .5s; } .crs.s8 { --d: .72s; }
.crs-win { position: relative; display: grid; height: var(--crs-h); border-radius: 14px; }
.crs-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crs b, .crs strong { font-weight: 800; }
.crs em { font-style: normal; }

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

/* iki ekran aynı hücrede: s4'te hakediş ekranına çapraz geçiş */
.crs-pg { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  transition: opacity .45s var(--ui-ease) var(--d), translate .55s var(--ui-ease) var(--d); }
.crs-pg--h { opacity: 0; translate: 0 12px; }
.crs.s4 .crs-pg--k { opacity: 0; translate: 0 -10px; }
.crs.s4 .crs-pg--h { opacity: 1; translate: none; }

/* imleç: .crs-hit tıklama noktasıdır; ok ucu tam orada, halka dalgası çevresinde */
.crs-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.crs-hit .ui-cur { left: -5px; top: -3px; transform: translate(16px, 14px); transition: opacity .2s var(--ui-ease); }
.crs-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 crs-cur { 0% { opacity: 0; transform: translate(16px, 14px); } 34% { opacity: 1; transform: none; scale: 1; } 48% { scale: .8; } 62%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes crs-cur-out { 0% { opacity: 0; transform: translate(16px, 14px); } 22% { opacity: 1; transform: none; scale: 1; } 31% { scale: .8; } 40% { scale: 1; } 76% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes crs-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes crs-push { 50% { scale: .95; } }
.crs.s1:not(.s2) .crs-hit--pre .ui-cur, .crs.s2:not(.s3) .crs-hit--tat .ui-cur, .crs.s5:not(.s6) .crs-hit--haz .ui-cur,
.crs.s6:not(.s7) .crs-hit--dok .ui-cur, .crs.s7:not(.s8) .crs-hit--ony .ui-cur { animation: crs-cur .9s var(--ui-ease) both; }
.crs.s3:not(.s4) .crs-hit--gen .ui-cur, .crs.s8 .crs-hit--kil .ui-cur { animation: crs-cur-out 1.4s var(--ui-ease) both; }
.crs.s1:not(.s2) .crs-hit--pre .crs-rip, .crs.s2:not(.s3) .crs-hit--tat .crs-rip, .crs.s3:not(.s4) .crs-hit--gen .crs-rip,
.crs.s5:not(.s6) .crs-hit--haz .crs-rip, .crs.s6:not(.s7) .crs-hit--dok .crs-rip, .crs.s7:not(.s8) .crs-hit--ony .crs-rip,
.crs.s8 .crs-hit--kil .crs-rip { animation: crs-rip .55s ease-out .38s both; }
.crs.s1:not(.s2) .crs-pre, .crs.s3:not(.s4) .crs-mk, .crs.s5:not(.s6) .crs-haz, .crs.s7:not(.s8) .crs-b2--ony, .crs.s8 .crs-b2--kil { animation: crs-push .3s var(--ui-ease) .38s; }

/* ── başlık bandı (kurum rengi) ── */
.crs-band { flex: none; display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 10px 12px; 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); }
.crs-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.crs-ico .crs-i { width: 18px; height: 18px; stroke-width: 1.8; }
.crs-ttl { flex: 1; min-width: 0; line-height: 20px; }
.crs-ttl > b { display: block; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.crs-ttl small { display: block; margin-top: 1px; font-size: 11px; line-height: 15px; font-weight: 600; color: rgba(255, 255, 255, .84); }
.crs-ttl small:not(.crs-ttl__d) { white-space: nowrap; }
.crs-bb { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.crs-bb--w { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(11, 36, 64, .25); }
.crs-bb--g { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.crs-bb .crs-i { width: 13px; height: 13px; }
.crs-bb .crs-i--s { width: 12px; height: 12px; opacity: .8; }

/* ── kurs sekmeleri ── */
.crs-tabs { flex: none; position: relative; display: flex; gap: 2px; margin: 10px 12px 0; padding: 3px; border-radius: 10px; overflow: hidden;
  background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .04); }
/* soldurma şeridin kenarına kadar örter (1 px açıkta harf çizgisi görünmesin); kenar çizgisi soldurmanın üstüne yeniden çizilir */
.crs-tabs::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; border-radius: 0 10px 10px 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 75%);
  box-shadow: inset -1px 0 0 var(--ui-line), inset 0 1px 0 var(--ui-line), inset 0 -1px 0 var(--ui-line); }
.crs-tab { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 700; color: var(--ui-text-2); white-space: nowrap;
  transition: background-color .3s var(--ui-ease) var(--d), color .3s var(--ui-ease) var(--d), box-shadow .3s var(--ui-ease) var(--d); }
.crs-tab .crs-i { width: 13px; height: 13px; color: var(--ui-muted); transition: color .3s var(--ui-ease) var(--d); }
.crs-tab em { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; background: #eef1f5; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
/* etkin sekme: Program; «35 dersi oluştur»dan sonra Yoklama (sessions_generate dönüşü) */
.crs:not(.s3) .crs-tab--prg, .crs.s3 .crs-tab--yok { background: var(--navy-soft); color: #fff; box-shadow: 0 1px 2px rgba(11, 36, 64, .3), inset 0 1px 0 rgba(255, 255, 255, .14); }
.crs:not(.s3) .crs-tab--prg .crs-i, .crs.s3 .crs-tab--yok .crs-i { color: #fff; }

/* 1. ekranın gövdesi: Program görünümü (s0–s2) ve Yoklama görünümü (s3) aynı hücrede */
.crs-pv { flex: 1; min-height: 0; display: grid; }
.crs-pv > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }

/* ── 1. ekran gövdesi: gruplar + «Dersleri oluştur» ── */
.crs-kb { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px 12px; }
.crs-grps { display: grid; gap: 8px; }
.crs-grp { border-radius: 10px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); }
.crs-grp__h { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 7px; padding: 8px 9px 7px; background: #f4f8fd; box-shadow: inset 0 -1px 0 var(--ui-line); }
.crs-grp__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #e3edf9; color: var(--navy-soft); }
.crs-grp__ic .crs-i { width: 12px; height: 12px; }
.crs-grp__t { min-width: 0; }
.crs-grp__t b { display: block; font-size: 12px; line-height: 16px; }
.crs-grp__t small { display: block; margin-top: 1px; font-size: 10px; line-height: 13px; font-weight: 600; color: #52525b; }
.crs-kont { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: 18px; margin-top: 5px; padding: 0 6px; border-radius: 6px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line); font-size: 10px; font-weight: 800; color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
.crs-kont .crs-i { width: 11px; height: 11px; color: var(--ui-muted); }
.crs-grp__r { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; padding: 7px 9px 8px; }
.crs-grp__r > b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.crs-gun { display: inline-grid; place-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: #e0f2fe; color: #075985; font-size: 10px; font-weight: 800; }
.crs-ogts { display: flex; flex-wrap: wrap; gap: 4px; }
.crs-ogt { display: inline-grid; place-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: #ecfdf5; color: var(--crs-ok-ink); box-shadow: inset 0 0 0 1px #a7f3d0; font-size: 10px; font-weight: 800; white-space: nowrap; }

.crs-gen { min-width: 0; padding: 10px 12px 12px; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px #a7e3c4, 0 0 0 3px rgba(16, 185, 129, .07), 0 1px 2px rgba(16, 37, 64, .05), 0 12px 24px -18px rgba(4, 120, 87, .35); }
.crs-gen__h { display: flex; align-items: center; gap: 8px; }
.crs-gen__h b { font-size: 13px; }
.crs-gen__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e6f7ef; color: var(--crs-ok); }
.crs-gen__ic .crs-i { width: 14px; height: 14px; }
.crs-gen__d { margin-top: 6px; font-size: 10.5px; line-height: 15px; font-weight: 600; color: #52525b; }
.crs-gen__say b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.crs-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.crs-fld { min-width: 0; display: flex; flex-direction: column; }
.crs-lbl { margin-bottom: 3px; font-size: 10.5px; font-weight: 800; line-height: 14px; color: var(--ui-text); }
.crs-in { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 30px; padding: 0 7px; border-radius: 8px; background: #fff;
  box-shadow: inset 0 0 0 1px #d4d4d8, 0 1px 1px rgba(16, 37, 64, .03); font-size: 11px; font-weight: 700; color: var(--ui-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.crs-in .crs-i { width: 12px; height: 12px; color: #52525b; }
.crs-in--sel .crs-i { width: 11px; height: 11px; stroke-width: 2.2; color: #71717a; }
.crs-fld--btn { justify-content: flex-end; }
.crs-pre { position: relative; display: grid; place-items: center; height: 30px; border-radius: 8px; background: #fff; font-size: 11.5px; font-weight: 800;
  box-shadow: inset 0 0 0 1.5px #d4d4d8, 0 1px 2px rgba(16, 37, 64, .06); }
.crs-pre .crs-hit { left: 60%; top: 17px; }

/* önizleme (s1–s2): s0'da yer tutmaz, kart s1'de satır yüksekliğiyle büyür; oluşturulunca söner (s3).
   İç sarmalayıcının alt dolgusu (eksi kenar boşluğuyla dengelenir) «35 dersi oluştur» imlecini ve halkasını kırpmaz. */
.crs-taslak { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; translate: 0 6px;
  transition: grid-template-rows .45s var(--ui-ease) var(--d), margin-top .45s var(--ui-ease) var(--d), opacity .3s var(--ui-ease) var(--d), translate .4s var(--ui-ease) var(--d); }
.crs-taslak__in { display: grid; justify-items: start; gap: 4px; min-height: 0; overflow: hidden; padding-bottom: 14px; margin-bottom: -14px; }
.crs.s1 .crs-taslak { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; translate: none; }
.crs-sum { font-size: 11.5px; font-weight: 700; line-height: 16px; color: #3f3f46; font-variant-numeric: tabular-nums; }
.crs-sum b { color: var(--crs-ok); }
.crs-det { justify-self: stretch; min-width: 0; }
.crs-sm { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 22px; font-size: 10.5px; font-weight: 800; color: #3f3f46; }
.crs-sm--o { color: var(--crs-ok); }
.crs-tri { width: 0; height: 0; border-style: solid; border-width: 3.5px 0 3.5px 5px; border-color: transparent transparent transparent currentColor; transition: rotate .3s var(--ui-ease) var(--d); }
.crs-sm--t .crs-hit { left: calc(100% + 6px); top: 13px; }
.crs-dw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ui-ease) var(--d); }
.crs-dw__in { min-height: 0; overflow: hidden; }
.crs.s2 .crs-det--t .crs-dw, .crs.s6 .crs-kart--c .crs-dw { grid-template-rows: 1fr; }
.crs.s6 .crs-sm--c .crs-tri { rotate: 90deg; }
.crs-li { display: block; margin: 2px 0 2px; padding: 5px 8px; border-radius: 8px; background: #f4f4f5; font-size: 10.5px; line-height: 15px; font-weight: 600; color: #3f3f46; }
.crs-li b { font-variant-numeric: tabular-nums; color: var(--ui-text); }
.crs-li strong { color: var(--ui-text); }
.crs-mk { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-top: 4px; padding: 0 12px; border-radius: 8px; background: var(--crs-ok); color: #fff; font-size: 11.5px; font-weight: 800;
  box-shadow: 0 1px 2px rgba(4, 120, 87, .35), inset 0 1px 0 rgba(255, 255, 255, .16); }
.crs-mk .crs-i { width: 13px; height: 13px; }
.crs-mk .crs-hit { left: 62%; top: 17px; }

/* Yoklama sekmesi, bu hafta (s3) */
.crs-yk { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.crs-yk__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line), inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(16, 37, 64, .05); }
.crs-yk__nav { display: flex; align-items: center; gap: 4px; }
.crs-yk__nav i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #e4e4e7; color: #3f3f46; }
.crs-yk__nav .crs-i { width: 13px; height: 13px; }
.crs-yk__nav b { min-width: 118px; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.crs-yk__grp { margin-left: auto; min-width: 118px; height: 28px; padding: 0 8px; box-shadow: inset 0 0 0 1.5px #e4e4e7; }
/* durum süzgeci: «Bu hafta» seçili (koyu), diğerleri açık gri hap */
.crs-yk__dur { display: flex; flex-wrap: wrap; gap: 4px; }
.crs-yk__f { display: inline-grid; place-items: center; height: 26px; padding: 0 9px; border-radius: 999px; background: #f4f4f5; color: #3f3f46; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.crs-yk__f--on { background: #18181b; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.crs-yk__day { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 12px; color: #3f3f46; }
.crs-yk__day b { font-variant-numeric: tabular-nums; }
/* gün rozeti: bugün değil → gök (bugünse kurum rengi olurdu) */
.crs-yk__gun { display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 7px; background: #e0f2fe; color: #075985; font-size: 11px; font-weight: 900; }
.crs-yk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 10px 9px 13px; border-radius: 11px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line), inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(16, 37, 64, .05), 0 10px 20px -16px rgba(16, 37, 64, .3); }
.crs-yk__m { flex: 1; min-width: 0; display: grid; gap: 3px; }
.crs-yk__l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: 12.5px; line-height: 18px; }
.crs-yk__l1 b { font-weight: 900; font-variant-numeric: tabular-nums; }
.crs-yk__cip { display: inline-grid; place-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 10.5px; font-weight: 800; }
.crs-yk__l2 { font-size: 11px; line-height: 15px; font-weight: 700; color: #52525b; }
.crs-yk__ogt { color: var(--crs-ok-ink); }
.crs-yk__lnk { color: var(--navy); }
.crs-yk__act { flex: none; display: flex; align-items: center; gap: 4px; }
.crs-yk__btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #e4e4e7; font-size: 11.5px; font-weight: 800; color: #3f3f46; }
.crs-yk__btn .crs-i { width: 13px; height: 13px; }
.crs-yk__x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #b91c1c; }
.crs-yk__x .crs-i { width: 15px; height: 15px; }
.crs-yk__tek { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding: 11px 13px; border-radius: 12px; background: #fff; font-size: 12.5px;
  box-shadow: inset 0 0 0 1px var(--ui-line), inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(16, 37, 64, .05); }
.crs-yk__tic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #ede9fe; color: #6d28d9; }
.crs-yk__tic .crs-i { width: 14px; height: 14px; }

/* başarı iletisi (SweetAlert «Başarılı») */
.crs-swal { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .34); opacity: 0;
  transition: opacity .3s var(--ui-ease) var(--d); }
.crs.s3 .crs-swal { opacity: 1; }
.crs-swal__b { display: grid; justify-items: center; width: min(296px, 100%); padding: 18px 18px 16px; border-radius: 12px; background: #fff; text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 24px 48px -16px rgba(15, 23, 42, .45); scale: .92; transition: scale .5s var(--crs-spring) var(--d); }
.crs.s3 .crs-swal__b { scale: 1; }
.crs-swal__ok svg { width: 52px; height: 52px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.crs-swal__ok circle { stroke: rgba(165, 220, 134, .35); stroke-width: 3.5; }
.crs-swal__ok path { stroke: #a5dc86; stroke-width: 4; stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset .45s var(--ui-ease) calc(var(--d) + .3s); }
.crs.s3 .crs-swal__ok path { stroke-dashoffset: 0; }
.crs-swal__b > b { margin-top: 10px; font-size: 17px; line-height: 22px; color: #18181b; }
.crs-swal__b > span:not(.crs-swal__ok) { margin-top: 5px; font-size: 12px; line-height: 17px; font-weight: 600; color: #3f3f46; }
.crs-swal__b > i { margin-top: 14px; display: inline-grid; place-items: center; height: 30px; padding: 0 18px; border-radius: 8px; background: #18181b; color: #fff; font-size: 12px; font-weight: 800; font-style: normal; }

/* ── 2. ekran: hakediş ── */
.crs-ttl__d { text-wrap: pretty; }
.crs-pg--h .crs-band { align-items: flex-start; }
.crs-pg--h .crs-bb { margin-top: 3px; }
.crs-bb--exp { opacity: 0; transition: opacity .3s var(--ui-ease) var(--d); }   /* sayfa eylemi yalnız satır varken (payroll.php:145–146) */
.crs.s5 .crs-bb--exp { opacity: 1; }
.crs-tool { flex: none; display: flex; align-items: center; gap: 8px; margin: 10px 12px 0; }
.crs-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line); }
.crs-seg > * { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--ui-text-2); white-space: nowrap; }
.crs-seg > b { background: var(--navy-soft); color: #fff; font-weight: 800; box-shadow: 0 1px 2px rgba(11, 36, 64, .3); }
.crs-seg .crs-i { width: 12px; height: 12px; }
.crs-ay { flex: none; display: flex; align-items: center; gap: 4px; }
.crs-ay i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line); color: #52525b; }
.crs-ay .crs-i { width: 13px; height: 13px; }
.crs-ay b { min-width: 72px; font-size: 12px; text-align: center; }
.crs-ks { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.crs-ks > span:first-child { font-size: 10.5px; font-weight: 700; color: #52525b; }
.crs-ks .crs-in { flex: 1; height: 28px; }
.crs-chips { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 12px 0; padding-top: 8px; box-shadow: inset 0 1px 0 #f1f1f4; }
.crs-cp { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 7px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 600; color: var(--ui-text-2); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ui-line); transition: background-color .35s var(--ui-ease) var(--d), box-shadow .35s var(--ui-ease) var(--d), color .35s var(--ui-ease) var(--d); }
.crs-cp b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.crs-cp small { font-size: 10px; font-weight: 600; opacity: .8; }
.crs-cp .crs-i { width: 13px; height: 13px; }
.crs-cp .c1 { color: var(--navy-soft); } .crs-cp .c2 { color: #0284c7; } .crs-cp .c3 { color: #059669; } .crs-cp .c4 { color: #d97706; }
.crs.s5:not(.s7) .crs-cp--on { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px #fcd34d; }
.crs.s5:not(.s7) .crs-cp--on b { color: #78350f; }
.crs-n { counter-reset: crs var(--crs-v); transition: --crs-v .8s var(--ui-ease) var(--d); }
.crs-n::after { content: counter(crs); }
.crs.s5 .crs-n--d, .crs.s5 .crs-n--o { --crs-v: 4; }
.crs.s5 .crs-n--p { --crs-v: 2; }
.crs.s7 .crs-n--o { --crs-v: 0; }
.crs-cp .crs-x { display: inline-grid; justify-items: end; }   /* tutar yuvası: kısa tutar sağa yaslı, uzun tutarla aynı hizada biter */
.crs-haz { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: auto; padding: 0 9px; border-radius: 8px; background: var(--navy-soft); color: #fff;
  font-size: 11.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 1px 2px rgba(11, 36, 64, .3), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: opacity .3s var(--ui-ease) var(--d), scale .3s var(--ui-ease) var(--d), height .35s var(--ui-ease) calc(var(--d) + .2s), margin .35s var(--ui-ease) calc(var(--d) + .2s); }
.crs-haz .crs-i { width: 13px; height: 13px; }
.crs-haz .crs-hit { left: 64%; top: 17px; }
.crs-haz .crs-x { justify-items: center; }   /* düğme «yeniden hazırla» genişliğinde: kısa etiket ortada */
.crs-n3 { display: none; }
.crs.s8 .crs-haz { opacity: 0; scale: .96; height: 0; margin-top: -4px; overflow: hidden; }
.crs-durum { flex: none; margin: 6px 12px 0; font-size: 10.5px; line-height: 15px; font-weight: 700; color: #52525b; }
.crs-durum em { font-weight: 500; }
.crs-durum .ok { color: var(--crs-ok); }

.crs-lv { flex: 1; min-height: 0; position: relative; margin: 10px 12px 0; overflow: hidden; }
.crs-lc { padding-bottom: 12px; translate: 0 var(--crs-y); transition: translate .55s var(--ui-ease) var(--d); }
.crs.s6 .crs-lc { --crs-y: var(--crs-y6); }
.crs.s7 .crs-lc { --crs-y: var(--crs-y7, var(--crs-y6)); }
.crs-bos { align-self: start; padding: 22px 16px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px #e4e4e7; outline: 1.5px dashed #d4d4d8; outline-offset: -1.5px;
  font-size: 11.5px; line-height: 17px; font-weight: 700; color: #52525b; text-align: center; text-wrap: balance; }
.crs-kart-y { display: grid; gap: 8px; align-content: start; }
.crs-kart { padding: 9px 12px 6px; border-radius: 12px; background: #fff; opacity: 0; translate: 0 8px;
  box-shadow: inset 0 0 0 1px var(--ui-line), inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(16, 37, 64, .05), 0 10px 20px -16px rgba(16, 37, 64, .3);
  transition: opacity .35s var(--ui-ease) calc(var(--d) + var(--i) * 110ms), translate .45s var(--ui-ease) calc(var(--d) + var(--i) * 110ms); }
.crs.s5 .crs-kart { opacity: 1; translate: none; }
.crs-kart__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.crs-kart__h > span { min-width: 0; }
.crs-kart__h b { display: block; font-size: 13px; line-height: 18px; }
.crs-kart__h small { display: block; font-size: 10.5px; line-height: 15px; font-weight: 700; color: #52525b; font-variant-numeric: tabular-nums; }
.crs-bek { color: #b45309; transition: opacity .3s var(--ui-ease) var(--d); }
.crs.s7 .crs-bek { opacity: 0; }
.crs-kart__h strong { flex: none; font-size: 15px; line-height: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.crs-kart .crs-sm { margin-top: 1px; color: #71717a; }
.crs-sm--c .crs-hit { left: 72%; top: 13px; }
.crs-dl { display: flex; align-items: center; gap: 8px; padding: 6px 0; box-shadow: inset 0 1px 0 #f1f1f4; font-size: 10.5px; line-height: 15px; font-weight: 600; color: #3f3f46; }
.crs-cb { flex: none; width: 14px; height: 14px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px #d4d4d8; transition: opacity .3s var(--ui-ease) var(--d), width .3s var(--ui-ease) var(--d), margin .3s var(--ui-ease) var(--d); }
.crs.s8 .crs-cb { opacity: 0; width: 0; margin-right: -8px; }
.crs-dl__t { flex: 1; min-width: 0; }
.crs-dl__t b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.crs-nw { white-space: nowrap; }
.crs-dl__r { flex: none; display: flex; align-items: center; gap: 8px; }
.crs-dl__a { flex: none; font-weight: 800; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.crs-rz { flex: none; justify-items: center; }
.crs-rz > span { display: inline-grid; place-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.crs-rz .t { background: #fef3c7; color: #78350f; }
.crs-rz .o { background: #d1fae5; color: var(--crs-ok-ink); }
.crs.s7 .crs-rz .o { transition-delay: calc(var(--d) + var(--k) * 90ms); }
.crs-act { margin-top: 10px; opacity: 0; transition: opacity .3s var(--ui-ease) calc(var(--d) + .2s); }
.crs.s5 .crs-act { opacity: 1; }
.crs-act__r { display: flex; flex-wrap: wrap; gap: 8px; }
.crs-b2 { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.crs-b2 .crs-i { width: 13px; height: 13px; }
.crs-b2--ony { background: #fff; color: var(--crs-ok-ink); box-shadow: inset 0 0 0 1.5px #6ee7b7; }
.crs-b2--kil { background: #18181b; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .1); }
.crs-b2--pay { background: var(--crs-ok); color: #fff; box-shadow: 0 1px 2px rgba(4, 120, 87, .35), inset 0 1px 0 rgba(255, 255, 255, .16); }
.crs-b2 .crs-hit { left: 62%; top: 17px; }

/* ── DAR KAPLAR ── */
@container (max-width: 640px) {
  .crs-kb { grid-template-columns: 150px minmax(0, 1fr); }
  .crs-okul { display: none; }   /* dar sütunda okul adı düşer; seviye + derslik kalır */
  .crs-w { display: none; }
  .crs-win { --crs-h: 472px; }
  .crs-cp .crs-i { display: none; }
}
@container (max-width: 600px) {
  .crs-w, .crs-bb--w { display: none; }
  /* dar kapta gruplar gerçek sıradaki gibi «Dersleri oluştur»un üstünde, sıkışık kart (sayı yongası başlık satırında);
     «Önizle»den sonra gövde sayfa kayar gibi grupların yüksekliği kadar yukarı çıkar (--crs-gy = iki kart + aralık),
     imleç ekranda yerinde kalıp söner. Pencere yüksekliği adımlar boyunca aynı. */
  .crs-kb { --crs-gy: 172px; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .crs-grp__h { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; padding: 7px 9px; }
  .crs-kont { grid-column: 3; grid-row: 1; margin-top: 0; }
  .crs-grp__r > b { line-height: 18px; }   /* tam sayı satır: kart 69/77 px, kaydırma payı --crs-gy ile birebir */
  .crs-pv { overflow: hidden; }
  .crs .crs-kb { transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d), translate .55s var(--ui-ease) var(--d); }
  .crs.s1 .crs-kb { translate: 0 calc(-1 * var(--crs-gy)); }
  .crs-hit--pre .ui-cur { transition: opacity .2s var(--ui-ease), translate .55s var(--ui-ease) var(--d); }
  .crs.s1 .crs-hit--pre .ui-cur { translate: 0 var(--crs-gy); }
  .crs.s1:not(.s2) .crs-hit--pre .ui-cur { animation: crs-cur-out 1.2s var(--ui-ease) both; }   /* kaydırma biterken söner: boşlukta asılı kalmaz */
  .crs-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crs-bb--exp { display: none; }
  .crs-seg { display: none; }
  .crs-win { --crs-h: 480px; }
  .crs-yk__dur { display: none; }   /* dar kapta durum çipleri düşer: hafta + grup tek satır, iki ders + «Tek seferlik» sığar */
  /* dar kapta durum cümlesi yer kazanmak için yalnız kilitten sonra açılır */
  .crs-durum { grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .4s var(--ui-ease) var(--d), margin .4s var(--ui-ease) var(--d); }
  .crs-durum > * { min-height: 0; overflow: hidden; }
  .crs.s8 .crs-durum { grid-template-rows: 1fr; margin-top: 6px; }
}
@container (max-width: 470px) {
  .crs-win { --crs-h: 480px; }
  .crs-band { margin: 10px 10px 0; padding: 9px 10px; }
  .crs-ico, .crs-w2, .crs-bb--w, .crs-ttl .crs-ttl__d { display: none; }
  .crs-ttl > b { font-size: 13.5px; line-height: 18px; }
  .crs-pg--h .crs-band { align-items: center; }
  .crs-tabs { margin: 8px 10px 0; }
  .crs-tab { padding: 0 7px; font-size: 11px; }
  .crs-tab .crs-i { display: none; }   /* simgesiz: s3'te etkin «Yoklama» sekmesi solmadan görünür */
  .crs-yk { padding: 8px 10px 10px; }
  .crs-yk__bar { gap: 6px; padding: 5px; }
  .crs-yk__nav i { width: 26px; height: 26px; }
  .crs-yk__nav b { min-width: 0; padding: 0 3px; font-size: 11px; }
  .crs-yk__grp { min-width: 0; height: 26px; padding: 0 7px; font-size: 10.5px; }
  .crs-yk__row { padding: 8px 8px 8px 11px; }
  .crs-kb { --crs-gy: 156px; padding: 8px 10px 10px; }
  .crs-grp__t small { display: none; }   /* en dar kapta seviye · derslik alt satırı düşer: ad + sayı + gün satırı kalır */
  .crs-gen { padding: 9px 10px 10px; }
  .crs-gen__d1 { display: none; }
  .crs-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crs-tool { flex-wrap: wrap; row-gap: 6px; margin: 8px 10px 0; }
  .crs-ks { flex: 1 1 100%; order: 2; }
  .crs-chips { margin: 8px 10px 0; gap: 5px; }
  .crs-cp { padding: 0 8px; }
  .crs-cp .crs-i { display: none; }
  .crs-w3 { display: none; }
  .crs-n3 { display: inline; }
  .crs-durum { margin-left: 10px; margin-right: 10px; }
  .crs.s8 .crs-durum { margin-top: 6px; }
  .crs-lv { margin: 8px 10px 0; }
  .crs-dl__k { display: none; }
  .crs-dl { align-items: flex-start; }
  .crs-cb { margin-top: 1px; }
  .crs-dl__r { flex-direction: column; align-items: flex-end; gap: 2px; }
  .crs-swal__b { padding: 16px 14px 14px; }
  .crs.s8 .crs-act .on-8 { opacity: 0; }   /* en dar kapta «Bordroya aktarıldı / ödendi» görünür alanın altında kalır */
}