/* SAHNE · EK DERS PUANTAJI (includes/scenes/extra-lesson.php) — küçük bento sahnesi, uygulamanın kişi dökümü tablosu:
   s1 «Gün gün (plan / ek)» çipleri haftalara dolar (Planlanan 110) · s2 Maaş k. 15 / Ek ders 10 · s3 «Per 29 8/0 −8» bayram
   düşer (10 → 2, Tatil −8) · s4 «Sal 13 4/0 −2» izin düşer, «Per 15 8/6» (10 → 8, İzin −2) · s5 ödenecek 48 saat · 12.000,00 ₺ */
@property --exl-e { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --exl-p { syntax: '<integer>'; inherits: false; initial-value: 0; }
.exl { container-type: inline-size; }
.exl-win { display: flex; flex-direction: column; height: 216px; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(16, 37, 64, .07), 0 6px 14px -6px rgba(16, 37, 64, .14), 0 22px 44px -24px rgba(16, 37, 64, .34); }
.exl svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* başlık bandı: user-round simgesi · ad · ay / branş · maaş k. · ücret · «Kapat» */
.exl-head { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 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, .08); }
.exl-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.exl-av svg { width: 14px; height: 14px; }
.exl-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.exl-who b { font-size: 12px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.exl-who small { font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .8); white-space: nowrap; overflow: hidden; }
.exl-close { flex: none; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .86); }
.exl-xl, .exl-md, .exl-sh { display: none; }

/* gövde: kişi dökümü tablosu (hafta satırları, aralarında 1 px çizgi) */
.exl-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 3px 12px 0; }
.exl-row { flex: none; display: grid; grid-template-columns: 34px 16px minmax(0, 1fr); column-gap: 8px; align-items: center; height: 23px; margin: 0 -6px; padding: 0 6px;
  border-top: 1px solid #edf0f4; border-radius: 4px; transition: background-color .35s var(--ui-ease); }
.exl-row--h { height: 18px; border-top: 0; }
.exl-row--h + .exl-row { border-top-color: var(--ui-line); }
.exl-row--h > span { font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--ui-muted); white-space: nowrap; }
.exl-wk { font-size: 10.5px; font-weight: 600; color: var(--ui-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exl-c { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.exl-c--tt, .exl-c--iz, .exl-c--mk { display: none; }
.exl-ekl { display: none; }
.exl-chips { min-width: 0; display: flex; gap: 3px; white-space: nowrap; }
.exl-z { font-weight: 600; color: #a7b0bd; opacity: 0; transition: opacity .3s var(--ui-ease); }

/* sayaç hücresi (Tatil · İzin · Maaş k. · Ek ders) */
.exl-n { --exl-e: 0; counter-reset: exl-e var(--exl-e); font-weight: 600; color: #a7b0bd; font-variant-numeric: tabular-nums; opacity: 0; transition: --exl-e .7s var(--ui-ease), color .3s var(--ui-ease), opacity .3s var(--ui-ease); }
.exl-n::after { content: counter(exl-e); }
.exl-n--ek { font-weight: 800; }

/* gün çipi «Per 29 8/0 −8» — uygulamadaki gibi gri, tatil/izin gününde amber */
.exl-chip { flex: none; display: inline-block; height: 17px; padding: 0 4px; border-radius: 5px; font-size: 10px; font-weight: 700; line-height: 17px; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: #3f3f46; background: #fafafa; box-shadow: inset 0 0 0 1px #e4e4e7;
  opacity: 0; transform: translateY(3px) scale(.94); transition: opacity .3s var(--ui-ease), transform .4s cubic-bezier(.34, 1.56, .64, 1), background-color .35s var(--ui-ease), color .35s var(--ui-ease), box-shadow .35s var(--ui-ease);
  transition-delay: calc(var(--i) * 32ms); }
.exl-dd { display: none; }
/* değişen ek saat: iki rakam aynı hücrede üst üste */
.exl-x { display: inline-grid; vertical-align: top; }
.exl-x > span { grid-area: 1 / 1; transition: opacity .3s var(--ui-ease), transform .4s var(--ui-ease); }
.exl-x > span + span { opacity: 0; transform: translateY(5px); }
/* düşüm «−8»: genişliği açılarak gelir (sonraki çip yumuşakça kayar) */
.exl-m { display: inline-block; max-width: 0; overflow: hidden; vertical-align: top; opacity: 0; transition: max-width .45s var(--ui-ease), opacity .3s var(--ui-ease); }
.exl-m > span { padding-left: 3px; }

/* alt şerit: iki durum aynı hücrede */
.exl-foot { flex: none; display: grid; align-items: center; height: 38px; padding: 0 12px; border-top: 1px solid var(--ui-line); background: var(--ui-bg-2); }
.exl-fa, .exl-fb { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; transition: opacity .3s var(--ui-ease), transform .45s var(--ui-ease); }
.exl-fb { opacity: 0; transform: translateY(6px); }
.exl-ded { display: flex; gap: 14px; }
.exl-sum { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; }
.exl-sum--l { align-items: flex-start; }
.exl-sum small { font-size: 10px; font-weight: 700; color: var(--ui-muted); }
.exl-sum b { font-size: 14px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.exl-calc { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; min-width: 0; }
.exl-calc b { font-size: 10.5px; font-weight: 800; color: var(--ui-text); }
.exl-calc small { font-size: 10px; font-weight: 600; color: var(--ui-muted); }
.exl-cnt { counter-reset: exl-p var(--exl-p); transition: --exl-p .8s var(--ui-ease), color .3s var(--ui-ease); }
.exl-cnt::after { content: counter(exl-p); }
.exl-cnt--plan, .exl-cnt--pay, .exl-cnt--tt, .exl-cnt--iz { --exl-p: 0; }
.exl-sum b.exl-cnt--tt, .exl-sum b.exl-cnt--iz { font-weight: 700; color: #a7b0bd; }

/* ── ADIMLAR ── */
/* s1: programdaki dersler gün gün haftalara yazılır */
.exl.s1 .exl-chip { opacity: 1; transform: none; }
.exl.s1 .exl-cnt--plan { --exl-p: 110; }
/* s2: her haftanın ilk 15 saati maaş karşılığı, kalanı ek ders */
.exl.s2 .exl-chip { transition-delay: 0s; }
.exl.s2 .exl-n { --exl-e: var(--v); color: var(--ui-text); opacity: 1; }
.exl.s2 .exl-z { opacity: 1; }
.exl.s2 .exl-n--ek { color: var(--navy); }
.exl.s2 .exl-n--tt, .exl.s2 .exl-n--iz { --exl-e: 0; color: #a7b0bd; }
/* s3: 29 Ekim Cumhuriyet Bayramı — perşembenin 8 saati düşer */
.exl.s3 .exl-chip--tt { color: #78350f; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; }
.exl.s3 .exl-chip--tt .exl-m { max-width: 24px; opacity: 1; }
.exl.s3 .exl-chip--xtt .exl-x > span:first-child { opacity: 0; transform: translateY(-5px); }
.exl.s3 .exl-chip--xtt .exl-x > span + span { opacity: 1; transform: none; }
.exl.s3 .exl-w5 .exl-n--ek { --exl-e: 2; transition-delay: .3s; }
.exl.s3 .exl-n--tt { --exl-e: 8; color: #b45309; transition-delay: .3s; }
.exl.s3:not(.s4) .exl-w5 { background: #f4f6f9; }
.exl.s3 .exl-cnt--tt { --exl-p: 8; color: #b45309; transition-delay: .3s; }
.exl.s3 .exl-cnt--tt::before { content: '−'; }
/* s4: 13 Ekim izni — salının 2 saati düşer, maaş karşılığı perşembeden tamamlanır (8/8 → 8/6) */
.exl.s4 .exl-chip--iz { color: #78350f; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; }
.exl.s4 .exl-chip--iz .exl-m { max-width: 24px; opacity: 1; }
.exl.s4 .exl-chip--xiz .exl-x > span:first-child { opacity: 0; transform: translateY(-5px); transition-delay: .5s; }
.exl.s4 .exl-chip--xiz .exl-x > span + span { opacity: 1; transform: none; transition-delay: .5s; }
.exl.s4 .exl-w3 .exl-n--ek { --exl-e: 8; transition-delay: .55s; }
.exl.s4 .exl-n--iz { --exl-e: 2; color: #b45309; transition-delay: .3s; }
.exl.s4:not(.s5) .exl-w3 { background: #f4f6f9; }
.exl.s4 .exl-cnt--iz { --exl-p: 2; color: #b45309; transition-delay: .3s; }
.exl.s4 .exl-cnt--iz::before { content: '−'; }
/* s5: ödenecek */
.exl.s5 .exl-fa { opacity: 0; transform: translateY(-6px); }
.exl.s5 .exl-fb { opacity: 1; transform: none; transition-delay: .1s; }
.exl.s5 .exl-cnt--pay { --exl-p: 48; transition-delay: .15s; }

/* ── KAP GENİŞLİĞİ ── */
/* < 380: çip iç boşluğu 3 px — en geniş satır («Per 8/0 −8») sığsın */
@container (max-width: 379px) { .exl-row { column-gap: 6px; } .exl-chips { gap: 2px; } .exl-chip { padding: 0 3px; } }
/* ≥ 380: «EK DERS» başlığı tam */
@container (min-width: 380px) {
  .exl-row { grid-template-columns: 34px 44px minmax(0, 1fr); }
  .exl-ekl { display: inline; }
}
/* ≥ 430: çipte günün tarihi («Per 29 8/0 −8», uygulamadaki gibi); 430–469'da sığsın diye başlık «EK» */
@container (min-width: 430px) {
  .exl-dd { display: inline; }
  .exl-chips { gap: 4px; }
}
@container (min-width: 430px) and (max-width: 469px) {
  .exl-row { grid-template-columns: 34px 18px minmax(0, 1fr); }
  .exl-ekl { display: none; }
  .exl-chips { gap: 3px; }
}
@container (min-width: 440px) {
  .exl-win { height: 236px; }
  .exl-body { padding-top: 5px; }
  .exl-row { height: 26px; }
  .exl-row--h { height: 20px; }
  .exl-chip { height: 19px; padding: 0 5px; line-height: 19px; font-size: 10.5px; }
  .exl-c { font-size: 11.5px; }
  .exl-wk { font-size: 11px; }
}
/* ≥ 530: Maaş k. sütunu */
@container (min-width: 530px) {
  .exl-row { grid-template-columns: 34px 46px 48px minmax(0, 1fr); }
  .exl-c--mk { display: block; }
  .exl-who .exl-md { display: inline; }
}
/* ≥ 636: Tatil · İzin sütunları, «05.10 haftası», «Branş öğretmeni» — uygulamadaki sütun sırası */
@container (min-width: 636px) {
  .exl-row { grid-template-columns: 68px 32px 28px 46px 48px minmax(0, 1fr); }
  .exl-c--tt, .exl-c--iz { display: block; }
  .exl-xl { display: inline; }
}
/* < 325: hafta sütunu yerine çipte günün tarihi («29 8/0 −8»): beş çip hafta sütunuyla birlikte sığmıyor */
@container (max-width: 324px) {
  .exl-row { grid-template-columns: 16px minmax(0, 1fr); }
  .exl-wk { display: none; }
  .exl-dn { display: none; }
  .exl-dd { display: inline; }
}
@container (max-width: 299px) { .exl-body, .exl-head, .exl-foot { padding-inline: 10px; } .exl-chips { gap: 2px; } .exl-chip { padding: 0 3px; } }
/* en dar kap (≈269 px, 1080 görünümde üçlü bento): alt başlık «maaş k.» — kırılma ve kesik yok */
@container (max-width: 290px) {
  .exl-lg { display: none; }
  .exl-sh { display: inline; }
}