/* SAHNE · SINAV SONUÇ KARNESİ VE KAZANIM RAPORU (includes/scenes/exam-report-card.php) — adımlar:
   s1 «Sonuç özeti» göstergeleri ileri sayar (dar kapta sayfa --y1 kadar kayar, alt sıra görünsün) · s2 sayfa «Soru analizi»ne kayar (kolayı kaçırdın / zoru bildin) ·
   s3 «Kazanım raporu»na kayar, soru kutuları belirir · s4 velinin telefonu gelir (Özet: 81 / 8 / 1) ·
   s5 «Konular» sekmesine dokunulur · s6 telefon sayfası kayar, sekme şeridi yapışır · s7 «Dinleme/izleme» açılır:
   kazanımlar ve kitapçıktaki soru numaraları.
   Kaydırma miktarları sabit bölüm yüksekliklerinden HESAPLANIR (--tl, --hero, --sum, --sa); kap daraldıkça bu yükseklikler
   kademe kademe değişir ve kaydırma hedefi (bölümün üstü) aynı yere düşer. Telefonun eni her kapta aynıdır (270 px). */
@property --erc-a { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --erc-b { syntax: '<integer>'; inherits: false; initial-value: 0; }

.erc {
  --pht: 170px; --s6: 140px; --s7: 326px;   /* s6: Türkçe kartı alt çubuğun üstünde biter · s7: «Dinleme/izleme» satırı sekmelerin altında (ders bağlantı satırı 50 px dahil) */
  --erc-ok: #047857; --erc-ok-ink: #065f46; --erc-red: #dc2626; --erc-red-ink: #b91c1c; --erc-amb: #d97706; --erc-amb-ink: #92400e;
  --erc-mute: #52606f; --erc-spring: cubic-bezier(.34, 1.56, .64, 1); --erc-scroll: cubic-bezier(.65, 0, .25, 1);
  --p-surf: #f6f7fc; --p-ink: #1b1d29; --p-var: #5b6072; --p-line: rgba(199, 197, 208, .45);
  container-type: inline-size; position: relative; height: 470px; font-size: 11px; line-height: 1.35; color: var(--ui-text);
}
.erc .erc-i { display: block; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.erc b { font-weight: 800; }
.erc small { font-size: inherit; }

/* ══ YÖNETİM PENCERESİ ══ */
/* bölüm yükseklikleri ve kaydırma hedefleri pencerede tanımlı: kap sorgusu kökün kendisine değil, içindekilere işler */
.erc-win { --tl: 32px; --hero: 182px; --sum: 116px; --sa: 230px; --y1: 0px;
  --y2: calc(var(--tl) + var(--hero) + var(--sum) + 34px);
  --y3: calc(var(--tl) + var(--hero) + var(--sum) + var(--sa) + 46px);
  position: absolute; inset: 0; display: flex; flex-direction: column; background: #f5f6f8; }
.erc-ah { position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 8px; background: #fff;
  box-shadow: 0 1px 0 var(--ui-line), 0 2px 6px -4px rgba(16, 37, 64, .18); }
.erc-ah__ib { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #52525b; }
.erc-ah__ib .erc-i { width: 16px; height: 16px; }
.erc-ah__logo { flex: none; width: 24px; height: 24px; }
.erc-bc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #52525b; white-space: nowrap; overflow: hidden; }
.erc-bc .erc-i { width: 12px; height: 12px; color: #a1a1aa; }
.erc-bc b { color: #0f172a; }
.erc-ah__srch { margin-left: auto; }
.erc-ah__bell { position: relative; }
.erc-ah__bell em { position: absolute; top: 0; right: 0; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--erc-red); color: #fff;
  font-size: 10px; font-style: normal; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px #fff; }
.erc-ah__me { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #18181b; white-space: nowrap; }
.erc-ah__me i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--navy-soft); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; }

.erc-vp { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.erc-pg { padding: 10px 14px 0; transition: translate .95s var(--erc-scroll) .1s; }
/* s1: dar kapta göstergelerin alt sırası (genel sıra, yüzdelik dilim) görünür alanın altında kalmasın diye sayfa biraz kayar */
.erc.s1 .erc-pg { translate: 0 calc(-1 * var(--y1)); }
.erc.s2 .erc-pg { translate: 0 calc(-1 * var(--y2)); }
.erc.s3 .erc-pg { translate: 0 calc(-1 * var(--y3)); }
.erc-sbar { position: absolute; z-index: 2; top: 4px; right: 3px; width: 4px; height: 64px; border-radius: 2px; background: rgba(15, 23, 42, .26); opacity: 0;
  transition: opacity .3s var(--ui-ease), translate .95s var(--erc-scroll) .1s; }
.erc.s2 .erc-sbar { opacity: 1; translate: 0 150px; }
.erc.s3 .erc-sbar { translate: 0 270px; }
.erc.s4 .erc-sbar { opacity: 0; }
.erc-dim { position: absolute; inset: 0; z-index: 4; background: rgba(11, 31, 58, .14); opacity: 0; pointer-events: none; transition: opacity .5s var(--ui-ease) .05s; }
.erc.s4 .erc-dim { opacity: 1; }

/* üst satır */
.erc-tl { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--tl); margin-bottom: 10px; }
.erc-tl__back { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #52525b; white-space: nowrap; }
.erc-tl__back .erc-i { width: 13px; height: 13px; }
.erc-tl__r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.erc-ob { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 9px; background: #fff; font-size: 10.5px; font-weight: 800; color: #52525b; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 1px rgba(16, 37, 64, .04); }
.erc-ob .erc-i { width: 12px; height: 12px; }
.erc-cb { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: #52525b; white-space: nowrap; }
.erc-cb i { width: 13px; height: 13px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #a1a1aa; }
.erc-pdf { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 9px; background: #18181b; color: #fff; font-size: 10.5px; font-weight: 800; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .2); }
.erc-pdf .erc-i { width: 12px; height: 12px; }

/* karne başı: kurum bandı + öğrenci kartı */
.erc-hero { position: relative; height: var(--hero); margin-bottom: 12px; }
.erc-band { position: relative; height: 124px; padding: 13px 18px 0; border-radius: 16px; overflow: hidden; 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, .2); }
.erc-band__c1, .erc-band__c2 { position: absolute; border-radius: 50%; pointer-events: none; }
.erc-band__c1 { right: -60px; top: -80px; width: 240px; height: 240px; background: rgba(255, 255, 255, .07); }
.erc-band__c2 { right: -6px; top: 6px; width: 140px; height: 140px; background: rgba(255, 255, 255, .06); }
.erc-band__top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 14px; font-size: 10px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.erc-band__top > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.erc-band__top > span:first-child i { width: 18px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .7); }
.erc-band__mk { color: rgba(255, 255, 255, .62); }
.erc-band__t { position: relative; display: block; margin-top: 7px; font-size: 19px; font-weight: 900; line-height: 24px; letter-spacing: -.01em; }
.erc-band__s { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .82); }
.erc-band__s em { height: 20px; padding: 0 9px; border-radius: 10px; background: rgba(255, 255, 255, .16); font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 20px; color: #fff; white-space: nowrap; }
.erc-stu { position: absolute; left: 12px; right: 12px; top: 92px; padding: 11px 16px 10px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 2px 4px rgba(16, 37, 64, .06), 0 14px 26px -16px rgba(16, 37, 64, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.erc-stu__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.erc-stu__g > span { min-width: 0; }
.erc-stu small, .erc-kpi small { text-transform: uppercase; }
.erc-stu small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .05em; line-height: 13px; color: #475569; }
.erc-stu__g b { display: block; margin-top: 1px; font-size: 15px; font-weight: 900; line-height: 20px; color: #0f172a; white-space: nowrap; }
.erc-stu__no { font-variant-numeric: tabular-nums; }
.erc-stu__f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 11.5px; font-weight: 700; line-height: 16px; color: #334155; white-space: nowrap; }
.erc-stu__f small { display: inline; margin-right: 7px; }
.erc-stu__f b { color: #334155; }

/* sonuç özeti */
.erc-sum { display: block; height: var(--sum); margin-bottom: 12px; }
.erc-h2 { display: block; font-size: 13px; font-weight: 800; line-height: 18px; color: #0f172a; }
.erc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.erc-kpi { position: relative; display: block; min-width: 0; height: 90px; padding: 9px 12px 0; border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px #e2e8f0, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.erc-kpi__v, .erc-kpi__s { opacity: 0; translate: 0 5px; transition: opacity .35s var(--ui-ease) calc(var(--i) * 70ms), translate .5s var(--erc-spring) calc(var(--i) * 70ms); }
.erc.s1 .erc-kpi__v, .erc.s1 .erc-kpi__s { opacity: 1; translate: 0 0; }
.erc-kpi--net::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--navy-soft); }
.erc-kpi small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .05em; line-height: 13px; color: #475569; white-space: nowrap; }
.erc-kpi__v { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; font-size: 22px; font-weight: 900; line-height: 26px; letter-spacing: -.02em; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.erc-kpi__v em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: #475569; }
.erc-kpi__v--b { color: var(--navy-soft); }
.erc-kbar { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: #f1f5f9; overflow: hidden; }
.erc-kbar i { display: block; width: 87%; height: 100%; border-radius: inherit; background: var(--navy-soft); scale: 0 1; transform-origin: left; transition: scale 1s var(--ui-ease) .25s; }
.erc.s1 .erc-kbar i { scale: 1 1; }
.erc-kpi__s { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; line-height: 13px; color: #475569; }
.erc-z { display: inline-block; padding: 0 4px; border-radius: 4px; background: #d1fae5; color: #065f46; font-style: normal; font-weight: 800; white-space: nowrap; }
.erc-n { counter-reset: ea var(--erc-a) eb var(--erc-b); transition: --erc-a 1.05s var(--ui-ease) .2s, --erc-b 1.05s var(--ui-ease) .2s; }
.erc-n--net::after, .erc-n--puan::after { content: counter(ea) "," counter(eb, decimal-leading-zero); }
.erc-n--sira::after { content: counter(ea); }
.erc-n--ust::after { content: "üst %" counter(ea) "," counter(eb); }
.erc.s1 .erc-n--net { --erc-a: 78; --erc-b: 33; }
.erc.s1 .erc-n--puan { --erc-a: 457; --erc-b: 96; }
.erc.s1 .erc-n--sira { --erc-a: 7; }
.erc.s1 .erc-n--ust { --erc-a: 17; --erc-b: 9; }

/* kart */
.erc-card { display: block; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e2e8f0, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.erc-hint { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 700; line-height: 14px; color: #475569; text-transform: none; }

/* soru analizi */
.erc-sa { height: var(--sa); margin-bottom: 12px; padding: 12px 14px; overflow: hidden; }
.erc-sa__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 10px; }
.erc-sa__c { display: block; min-width: 0; }
.erc-sa__h { display: block; height: 26px; margin-bottom: 6px; }
.erc-sa__h b { display: block; font-size: 10px; font-weight: 800; letter-spacing: .05em; line-height: 13px; text-transform: uppercase; }
.erc-sa__c--k .erc-sa__h b { color: var(--erc-red-ink); }
.erc-sa__c--z .erc-sa__h b { color: var(--erc-ok-ink); }
.erc-sa__h small { display: block; font-size: 10px; font-weight: 700; line-height: 13px; color: #475569; }
.erc-sa__r { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 5px; border-radius: 7px;
  opacity: 0; translate: 0 5px; transition: opacity .3s var(--ui-ease) calc(.5s + var(--i) * 60ms), translate .4s var(--ui-ease) calc(.5s + var(--i) * 60ms); }
.erc-sa__r:nth-of-type(even) { background: #f8fafc; }
.erc.s2 .erc-sa__r { opacity: 1; translate: 0 0; }
.erc-sa__no { flex: none; display: grid; place-items: center; width: 26px; height: 20px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 900; font-variant-numeric: tabular-nums; }
.erc-sa__c--k .erc-sa__no { background: #fef2f2; color: var(--erc-red-ink); box-shadow: inset 0 0 0 1px #fecaca; }
.erc-sa__c--z .erc-sa__no { background: #ecfdf5; color: var(--erc-ok-ink); box-shadow: inset 0 0 0 1px #a7f3d0; }
.erc-sa__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #334155; }
.erc-sa__t b { color: #0f172a; }
.erc-sa__p { flex: none; font-size: 10.5px; font-weight: 800; color: #1e293b; font-variant-numeric: tabular-nums; }

/* kazanım raporu */
.erc-kz { padding: 12px 14px 4px; }
.erc-kz__hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.erc-kz__sum { font-size: 10.5px; font-weight: 700; line-height: 14px; color: #475569; font-variant-numeric: tabular-nums; }
.erc-kz__sum .y { color: var(--erc-red-ink); } .erc-kz__sum .b { color: var(--erc-amb-ink); }
.erc-kz__sum span { white-space: nowrap; }
.erc-kz__hint { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 14px; margin-top: 3px; }
.erc-kz__hint .erc-hint { flex: 1; min-width: 0; margin: 0; font-size: 10px; line-height: 14px; }
.erc-lg { flex: none; display: flex; align-items: center; gap: 10px; height: 18px; font-size: 10.5px; font-weight: 700; color: #475569; }
.erc-lg > span { display: inline-flex; align-items: center; gap: 5px; }
.erc-lg .erc-bx { min-width: 22px; height: 16px; }
.erc-bx { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 4px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.erc-bx--d { background: #d1fae5; color: var(--erc-ok-ink); }
.erc-bx--y { background: var(--erc-red); color: #fff; box-shadow: 0 1px 2px rgba(185, 28, 28, .3); }
.erc-bx--b { background: #fff; color: var(--erc-amb-ink); box-shadow: inset 0 0 0 1px var(--erc-amb); }
.erc-dh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; margin-top: 10px; padding: 7px 12px; border-radius: 8px; background: #f8fafc;
  box-shadow: inset 3px 0 0 var(--navy-soft), inset 0 0 0 1px #eef2f6; }
.erc-dh b { font-size: 12px; line-height: 16px; color: #0f172a; }
.erc-dh span { font-size: 10.5px; font-weight: 700; line-height: 16px; color: #475569; }
.erc-kr { display: grid; grid-template-columns: minmax(0, 1fr) 112px 62px; align-items: start; column-gap: 12px; row-gap: 6px; padding: 8px 0 8px 11px;
  border-bottom: 1px solid #f1f5f9; box-shadow: inset 3px 0 0 transparent; }
.erc-kr--y { box-shadow: inset 3px 0 0 var(--erc-red); }
.erc-kr__t { display: block; min-width: 0; }
.erc-kr__t b { display: block; font-size: 11px; font-weight: 600; line-height: 15px; color: #1e293b; }
.erc-kr__t small { display: block; font-size: 10px; font-weight: 700; line-height: 13px; color: #475569; }
.erc-kr__bx { display: flex; flex-wrap: wrap; gap: 4px; }
.erc-kr__bx .erc-bx { scale: 0; transition: scale .45s var(--erc-spring) calc(.75s + var(--i) * 70ms + var(--j) * 60ms); }
.erc.s3 .erc-kr__bx .erc-bx { scale: 1; }
.erc-kr__p { display: block; text-align: right; font-variant-numeric: tabular-nums; }
.erc-kr__p b { display: block; font-size: 12px; font-weight: 900; line-height: 15px; }
.erc-kr--d .erc-kr__p b { color: var(--erc-ok-ink); } .erc-kr--y .erc-kr__p b { color: var(--erc-red-ink); }
.erc-kr__p > i { display: block; height: 5px; margin-top: 3px; border-radius: 3px; background: #f1f5f9; overflow: hidden; }
.erc-kr__p > i > i { display: block; height: 100%; border-radius: inherit; scale: 0 1; transform-origin: left; transition: scale .7s var(--ui-ease) calc(.85s + var(--i) * 70ms); }
.erc-kr--d .erc-kr__p > i > i { background: #059669; } .erc-kr--y .erc-kr__p > i > i { background: var(--erc-red); }
.erc.s3 .erc-kr__p > i > i { scale: 1 1; }
.erc-kr__p small { display: block; margin-top: 2px; font-size: 10px; font-weight: 700; line-height: 13px; color: #475569; }

/* ══ VELİNİN TELEFONU ══ */
.erc-ph { position: absolute; z-index: 6; top: 9px; right: 16px; width: 270px; height: 452px; padding: 6px; border-radius: 38px;
  background: linear-gradient(150deg, #24385a, #0b1a2f 60%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 4px rgba(11, 26, 47, .2), 0 30px 60px -22px rgba(11, 26, 47, .7);
  opacity: 0; translate: 12px 0; scale: .96; transition: opacity .35s var(--ui-ease) .05s, translate .7s var(--erc-spring) .05s, scale .7s var(--erc-spring) .05s; }
.erc.s4 .erc-ph { opacity: 1; translate: 0 0; scale: 1; }
.erc-scr { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: var(--p-surf); color: var(--p-ink); }
.erc-scr::after { content: ""; position: absolute; z-index: 9; left: 50%; bottom: 5px; width: 84px; height: 4px; margin-left: -42px; border-radius: 2px; background: #111827; }

.erc-st { position: relative; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 2px 18px 0 24px; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.erc-isl { position: absolute; left: 50%; top: 6px; width: 64px; height: 18px; margin-left: -32px; border-radius: 10px; background: #000; }
.erc-st__i { display: flex; align-items: center; gap: 4px; }
.erc-st__i .erc-i { width: 12px; height: 12px; stroke-width: 2.4; }
.erc-st__i .erc-bat { width: 17px; height: 17px; stroke-width: 1.8; }
.erc-phd { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; }
.erc-phd__b { display: grid; place-items: center; width: 26px; height: 26px; color: var(--p-ink); }
.erc-phd__b .erc-i { width: 17px; height: 17px; }
.erc-phd__logo { width: 26px; height: 26px; }
.erc-phd__bell { position: relative; display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; color: var(--p-ink); }
.erc-phd__bell .erc-i { width: 16px; height: 16px; }
.erc-phd__bell i { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px var(--p-surf); }
.erc-phd__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 1.5px #d6dbe6; }

.erc-pb { position: absolute; left: 0; right: 0; top: 64px; bottom: 48px; overflow: hidden; }
.erc-pt { position: absolute; left: 0; right: 0; top: 0; height: var(--pht); padding: 4px 8px 0; transition: translate .8s var(--erc-scroll) .05s; }
.erc-pt__t { display: block; font-size: 12.5px; font-weight: 800; line-height: 16px; letter-spacing: -.01em; }
.erc-pt__s { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--p-var); }
.erc-hc { display: block; margin-top: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--p-line), 0 1px 3px rgba(30, 34, 86, .06); }
.erc-hc__k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.erc-hc__k > span { min-width: 0; padding: 8px 5px 7px 7px; }
.erc-hc__k > span + span { box-shadow: inset 1px 0 0 var(--p-line); }
.erc-hc__v { display: flex; align-items: baseline; gap: 2px; font-size: 14.5px; font-weight: 800; line-height: 17px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.erc-hc__v em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--p-var); }
.erc-hc__k small { display: block; font-size: 10px; font-weight: 600; line-height: 12px; letter-spacing: -.01em; color: var(--p-var); }
.erc-hc__k small:first-of-type { margin-top: 4px; }
.erc-hc__r { display: block; padding: 4px 8px 5px; box-shadow: inset 0 1px 0 var(--p-line); }
.erc-sr { display: grid; grid-template-columns: 56px minmax(0, 1fr) 62px; align-items: center; gap: 6px; height: 20px; font-size: 10px; font-weight: 600; color: var(--p-var); }
.erc-sr__l { display: flex; align-items: center; gap: 4px; }
.erc-sr__l > i { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #eef0f7; }
.erc-sr__l > i > i:first-child { position: absolute; left: 0; top: 0; bottom: 0; width: calc(6px + (100% - 12px) * var(--y)); border-radius: inherit; background: #c9d6ea; }
.erc-sr__l > i > i:last-child { position: absolute; top: 50%; left: calc(6px + (100% - 12px) * var(--y)); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--navy-soft); box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, .25); }
.erc-sr__n { text-align: right; font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.erc-sr__n b { color: var(--p-ink); }

/* sekme şeridi (sayfa kayınca üstte yapışır) */
.erc-tabs { position: absolute; z-index: 2; left: 0; right: 0; top: var(--pht); padding: 6px 8px; background: var(--p-surf); transition: translate .8s var(--erc-scroll) .05s, box-shadow .3s var(--ui-ease) .6s; }
.erc-seg { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; height: 34px; padding: 3px; border-radius: 12px; background: #e9ebf3; }
.erc-seg > span { position: relative; z-index: 1; display: grid; place-items: center; border-radius: 9px; font-size: 10.5px; font-weight: 700; color: var(--p-var); transition: color .3s var(--ui-ease) .45s; }
.erc-seg__ind { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc((100% - 15px) / 4); border-radius: 9px; background: #fff; box-shadow: 0 1px 4px rgba(30, 34, 86, .14);
  transition: translate .45s var(--ui-ease) .38s; }
.erc .erc-seg__a { color: var(--navy-soft); }
.erc.s5 .erc-seg__ind { translate: calc(2 * (100% + 3px)) 0; }
.erc.s5 .erc-seg__a { color: var(--p-var); }
.erc.s5 .erc-seg__k { color: var(--navy-soft); }

/* içerik: Özet ve Konular aynı hücrede */
.erc-pc { position: absolute; left: 0; right: 0; top: calc(var(--pht) + 46px); display: grid; padding: 0 8px; transition: translate .8s var(--erc-scroll) .05s; }
.erc-pc > * { grid-area: 1 / 1; min-width: 0; transition: opacity .3s var(--ui-ease) .45s, translate .4s var(--ui-ease) .45s; }
.erc-pc__kn { opacity: 0; translate: 0 6px; }
.erc.s5 .erc-pc__oz { opacity: 0; }
.erc.s5 .erc-pc__kn { opacity: 1; translate: 0 0; }
.erc.s6 .erc-pt { translate: 0 calc(-1 * var(--pht)); }
.erc.s6 .erc-tabs { translate: 0 calc(-1 * var(--pht)); box-shadow: 0 6px 10px -8px rgba(30, 34, 86, .35); }
.erc.s6 .erc-pc { translate: 0 calc(-1 * (var(--pht) + var(--s6))); }
.erc.s7 .erc-pc { translate: 0 calc(-1 * (var(--pht) + var(--s7))); transition-duration: .75s; transition-delay: .5s; }

.erc-pk { display: block; margin-bottom: 8px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--p-line), 0 1px 3px rgba(30, 34, 86, .06); }
.erc-pkh { display: flex; align-items: flex-start; gap: 8px; }
.erc-pkh__i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #e8eef7; color: var(--navy-soft); }
.erc-pkh__i .erc-i { width: 15px; height: 15px; }
.erc-pkh > b, .erc-pkh > span > b { display: block; font-size: 12.5px; font-weight: 800; line-height: 26px; }
.erc-pkh > span { min-width: 0; }
.erc-pkh > span > b { line-height: 16px; padding-top: 1px; }
.erc-pkh small { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; line-height: 13px; color: var(--p-var); }

.erc-oz { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.erc-donut { position: relative; flex: none; width: 66px; height: 66px; }
.erc-donut svg { width: 66px; height: 66px; }
/* yayların başlangıcı PHP'deki stroke-dashoffset özniteliğinde (perHalka); CSS'te stroke-dashoffset YAZMA — özniteliği ezer */
.erc-arc { fill: none; }
.erc-donut svg { transform: rotate(-90deg) scale(.6); opacity: 0; transition: transform .8s var(--erc-spring) .35s, opacity .3s var(--ui-ease) .35s; }
.erc.s4 .erc-donut svg { transform: none; opacity: 1; }
.erc-donut > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.erc-donut b { font-size: 17px; font-weight: 800; line-height: 18px; font-variant-numeric: tabular-nums; }
.erc-donut small { font-size: 10px; font-weight: 700; line-height: 12px; color: var(--p-var); }
.erc-oz__l { display: grid; gap: 6px; }
.erc-oz__l > span { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--p-var); white-space: nowrap; }
.erc-oz__l b { width: 20px; text-align: right; font-size: 15px; font-weight: 800; line-height: 17px; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.erc-mk { flex: none; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 5px; font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; }
.erc-mk--d { background: #dcf3e8; color: #065f46; } .erc-mk--y { background: #ffe1dc; color: #93000a; } .erc-mk--b { background: #eceef3; color: #3f424c; }

.erc-yg { display: flex; gap: 2px; height: 10px; margin-top: 10px; }
.erc-yg i { border-radius: 3px; }
.erc-yg i:nth-child(1) { background: #047857; } .erc-yg i:nth-child(2) { background: #ba1a1a; } .erc-yg i:nth-child(3) { background: #b9bdc8; }
.erc-yg--s { height: 6px; margin-top: 6px; }
.erc-kzd__l { display: grid; gap: 6px; margin-top: 9px; }
.erc-kzd__l > span { display: grid; grid-template-columns: 18px 20px minmax(0, 1fr); align-items: start; gap: 6px; }
.erc-kzd__l b { text-align: right; font-size: 13px; font-weight: 800; line-height: 18px; font-variant-numeric: tabular-nums; }
.erc-kzd__l > span > span { padding-top: 2px; font-size: 10.5px; font-weight: 500; line-height: 13px; color: var(--p-var); }

/* ders bağlantı satırı (birden çok ders varsa; uygulamada kurum renginde «Türkçe ↓ …», sarar) */
.erc-dl { display: flex; flex-wrap: wrap; column-gap: 10px; margin: -1px 0 7px; padding: 0 3px; font-size: 10.5px; font-weight: 700; line-height: 13px; color: var(--navy-soft); }
.erc-dl > span { display: inline-flex; align-items: center; gap: 1px; height: 22px; white-space: nowrap; }
.erc .erc-dl .erc-i { width: 11px; height: 11px; }

.erc-tk { padding-bottom: 2px; }
.erc-tk__h { display: flex; align-items: baseline; gap: 6px; }
.erc-tk__h > b { font-size: 13px; font-weight: 800; line-height: 17px; }
.erc-tk__h small { font-size: 10px; font-weight: 500; color: var(--p-var); }
.erc-tk__h > span { margin-left: auto; font-size: 10.5px; font-weight: 500; color: var(--p-var); white-space: nowrap; font-variant-numeric: tabular-nums; }
.erc-tk__h > span b { font-size: 12px; color: var(--p-ink); }
.erc-tk__c { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px 12px; gap: 6px; margin-top: 8px; padding-bottom: 4px; font-size: 10px; font-weight: 700; line-height: 13px; color: var(--p-var); white-space: nowrap; }
.erc-tk__c > :nth-child(n+2) { text-align: right; }
.erc-un { display: block; box-shadow: inset 0 1px 0 var(--p-line); }
.erc-un__r { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 73px 32px 12px; align-items: center; gap: 6px; padding: 7px 0; }
.erc-un__r > b { font-size: 11px; font-weight: 700; line-height: 15px; }
.erc-un__p { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.erc-pip { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; color: #fff; }
.erc-pip--d { background: #047857; } .erc-pip--y { background: #ba1a1a; }
.erc .erc-pip .erc-i { width: 9px; height: 9px; stroke-width: 3.2; }
.erc-un__n { text-align: right; font-size: 10px; font-weight: 600; color: var(--p-var); white-space: nowrap; font-variant-numeric: tabular-nums; }
.erc-un__n b { font-size: 12px; color: var(--p-ink); }
.erc .erc-un__ch { width: 12px; height: 12px; color: var(--p-var); transition: rotate .4s var(--ui-ease) .35s; }
.erc.s7 .erc-un__ch { rotate: 180deg; }
.erc-un__r .erc-tap { left: 30px; top: 50%; }
.erc-un__x { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ui-ease) .38s; }
.erc.s7 .erc-un__x { grid-template-rows: 1fr; }
.erc-un__in { display: block; min-height: 0; overflow: hidden; margin-bottom: 0; border-radius: 10px; background: var(--p-surf); box-shadow: inset 0 0 0 1px var(--p-line);
  opacity: 0; transition: opacity .35s var(--ui-ease) .45s; }
.erc.s7 .erc-un__in { opacity: 1; }
.erc-un__lt { display: block; padding: 6px 8px 0; font-size: 10px; font-weight: 700; line-height: 13px; color: var(--p-var); }
.erc-uk { display: block; margin: 0 8px; padding: 6px 0 7px; font-size: 10.5px; font-weight: 600; line-height: 14px; }
.erc-uk + .erc-uk { box-shadow: inset 0 1px 0 var(--p-line); }
.erc-uk__m { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.erc-ch { display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.erc-ch--d { background: #dcf3e8; color: #065f46; } .erc-ch--y { background: #ffe1dc; color: #93000a; }
.erc-uk__m small { margin-left: auto; font-size: 10px; font-weight: 500; color: var(--p-var); white-space: nowrap; }
.erc-uk__m small b { color: var(--p-ink); }
.erc-tk__g { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 0; font-size: 10.5px; font-weight: 700; line-height: 13px; color: #065f46; }
.erc-tk__g .erc-mk { min-width: 16px; height: 16px; font-size: 10px; }
.erc-tk__g .erc-i { width: 12px; height: 12px; }

/* dokunuş: parmak dairesi + halka */
.erc-tap { position: absolute; z-index: 3; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.erc-tap i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(20, 61, 107, .2); box-shadow: 0 0 0 2px rgba(20, 61, 107, .35); opacity: 0; }
@keyframes erc-tap { 0% { opacity: 0; scale: .5; } 25% { opacity: 1; scale: .85; } 45% { scale: .7; } 100% { opacity: 0; scale: 1.7; } }
.erc.s5:not(.s6) .erc-seg__k .erc-tap i { animation: erc-tap .75s ease-out .15s both; }
.erc.s7 .erc-un__r .erc-tap i { animation: erc-tap .75s ease-out .1s both; }
.erc-seg__k .erc-tap { top: 60%; }

/* alt sekmeler */
.erc-bn { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 48px; padding: 4px 12px 0; background: #fff; box-shadow: 0 -1px 0 var(--p-line); }
.erc-bn > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; letter-spacing: -.01em; color: var(--p-var); white-space: nowrap; }
.erc-bn .erc-i { width: 16px; height: 16px; stroke-width: 1.9; }
.erc-bn em { position: absolute; top: -4px; left: calc(50% + 3px); display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #b91c1c; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 1.5px #fff; }

/* ── KAP DARALDIKÇA ── */
@container (max-width: 640px) {
  .erc-ob--w { display: none; }
  .erc-bc .erc-bc__u { display: none; }
}
@container (max-width: 600px) {
  .erc-win { --sum: 204px; --sa: 404px; --y1: 40px; }
  .erc.s1:not(.s2) .erc-sbar { opacity: 1; translate: 0 12px; }
  .erc-band__mk { display: none; }
  .erc-band__t { font-size: 17px; }
  .erc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .erc-kpi { height: 84px; }
  .erc-sa__g { grid-template-columns: minmax(0, 1fr); }
  .erc-kz__hint { flex-direction: column; }
  .erc-kr { grid-template-columns: minmax(0, 1fr) 70px; padding-left: 11px; }
  .erc-kr__t { grid-column: 1 / -1; }
  .erc-kr__bx { align-self: start; padding-top: 1px; }
  .erc-ph { right: 14px; }
  .erc-ah__me span { display: none; }
  .erc-dim { background: rgba(11, 31, 58, .2); }
}
@container (max-width: 470px) {
  .erc-win { --hero: 222px; --sum: 206px; --sa: 440px; --y1: 80px; }
  .erc.s1:not(.s2) .erc-sbar { translate: 0 24px; }
  .erc-pg { padding: 10px 10px 0; }
  .erc-cb, .erc-bc .erc-bc__m, .erc-ah__srch { display: none; }
  .erc-band { height: 126px; padding: 12px 14px 0; }
  .erc-band__t { font-size: 15.5px; line-height: 20px; margin-top: 8px; }
  .erc-stu { left: 8px; right: 8px; top: 92px; padding: 10px 12px 9px; }
  .erc-stu__g { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .erc-kpis { gap: 8px; }
  .erc-kpi { height: 86px; padding: 8px 10px 0; }
  .erc-kpi__v { font-size: 20px; }
  .erc-sa { padding: 12px 12px; }
  .erc-sa__h { height: 39px; }
  .erc-kz { padding: 12px 12px 4px; }
  .erc-dh { padding: 7px 10px; }
  .erc-ph { left: 50%; right: auto; margin-left: -135px; }
  .erc-dim { background: rgba(11, 31, 58, .42); }
}