/* SAHNE · SINAV GELİŞİMİ VE ÖĞRENCİ SIRALAMASI (includes/scenes/exam-progress.php) — adımlar:
   s1 «Tüm 8. Sınıf»: sıralama 39 öğrenciyle yeniden dizilir · s2 Can Kılınç'ın adı → öğrenci görünümü, göstergeler sayar ·
   s3 net çizgisi şube ve genel ortalamayla çizilir · s4 «Öne çıkanlar» · s5 sayfa kayar: ders × sınav haritası + tekrarlayan
   eksikler · s6 velinin telefonu (Özet) · s7 «Gelişim» sekmesi · s8 sayfa kayar, sekmeler üstte: 9 sınavın ortalaması (son) */
@property --exp-a { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --exp-b { syntax: '<integer>'; inherits: false; initial-value: 0; }

/* --tby: sekme şeridinin sayfadaki yeri (.exp-tbsp'nin üstü) · --scr: s8 kaydırması; şerit üstte kalır, «Puan gelişimi» kartının
   yalnız üst kenarı görünür (yarım yazı yok) */
.exp { container-type: inline-size; height: 456px; --d: 0s; --rh: 28px; --tby: 164px; --scr: 148px;
  --exp-ok: #047857; --exp-ok-ink: #065f46; --exp-bad-ink: #991b1b; --exp-spring: cubic-bezier(.34, 1.56, .64, 1); }
.exp-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

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

/* imleç: .exp-hit tıklama noktasıdır; ok ucu tam orada, halka dalgası çevresinde */
.exp-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.exp-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.exp-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 exp-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes exp-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 30% { opacity: 1; transform: none; scale: 1; } 44% { scale: .8; } 56% { scale: 1; } 76% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes exp-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes exp-push { 50% { scale: .94; } }
@keyframes exp-pop { 0% { scale: .3; } 60% { scale: 1.18; } 100% { scale: 1; } }

/* sayaçlar (ileri sayar) */
.exp-n { counter-reset: exp-a var(--exp-a) exp-b var(--exp-b); font-variant-numeric: tabular-nums; transition: --exp-a .9s var(--ui-ease), --exp-b .9s var(--ui-ease); }
.exp-n::after { content: counter(exp-a) "," counter(exp-b, decimal-leading-zero); }
.exp.s2 .exp-n--net { --exp-a: 78; --exp-b: 33; transition-delay: .75s; }
.exp.s2 .exp-n--puan { --exp-a: 457; --exp-b: 96; transition-delay: .8s; }
.exp.s8 .exp-n--op { --exp-a: 423; --exp-b: 22; transition-delay: .55s; }
.exp.s8 .exp-n--on { --exp-a: 69; --exp-b: 33; transition-delay: .6s; }

/* ── pencere ── */
.exp-win { position: relative; display: flex; flex-direction: column; height: 100%; }
.exp-win::after { content: ""; position: absolute; inset: 0; z-index: 8; background: rgba(11, 36, 64, .2); opacity: 0; pointer-events: none; transition: opacity .45s var(--ui-ease); }
.exp.s6 .exp-win::after { opacity: 1; }

/* başlık bandı (kurum rengi) */
.exp-band { flex: none; display: flex; align-items: center; gap: 10px; margin: 10px 10px 0; padding: 9px 10px 9px 11px; 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); }
.exp-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.exp-ico .exp-i { width: 17px; height: 17px; stroke-width: 1.8; }
.exp-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.exp-ttl b { font-size: 15px; line-height: 19px; font-weight: 800; letter-spacing: -.01em; }
.exp-ttl small { font-size: 11px; line-height: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; }
.exp-pdf { flex: none; 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;
  box-shadow: 0 1px 2px rgba(11, 36, 64, .25), inset 0 -1px 0 rgba(11, 36, 64, .08); }
.exp-pdf .exp-i { width: 14px; height: 14px; }
.exp-pdf__k { display: none; }

/* seçim satırı */
/* Şube kutusu «8. Sınıf-A · Demo Koleji Ortaokulu (19 öğr.)» sığacak kadar geniş (≥660) */
.exp-sel { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, .85fr); gap: 8px; padding: 8px 14px 10px; border-bottom: 1px solid var(--ui-line); }
.exp-f { min-width: 0; }
.exp-lb { display: flex; align-items: center; gap: 5px; height: 14px; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; color: #52525b; }
.exp-lb .exp-i { width: 12px; height: 12px; }
.exp-in { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 600; color: #27272a; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05); transition: background-color .35s var(--ui-ease) .55s, box-shadow .35s var(--ui-ease) .55s, color .35s var(--ui-ease) .55s; }
.exp-in > span:first-child { flex: 1; min-width: 0; }
.exp-chev { width: 13px; height: 13px; color: #71717a; }
.exp-in.on, .exp.s2 .exp-in--og { background: var(--navy-50); color: #0f3157; box-shadow: inset 0 0 0 1px #a8bfdc, 0 1px 2px rgba(16, 37, 64, .05); }
.exp-in.on .exp-chev, .exp.s2 .exp-in--og .exp-chev { color: var(--navy-soft); }
.exp-in--og [class*="on-"] { transition-delay: .55s; }

/* gövde: iki görünüm aynı yerde */
.exp-body { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fafafb; }
.exp-va, .exp-vb { position: absolute; inset: 0; padding: 10px 14px 0; }
.exp-va { transition: opacity .3s var(--ui-ease) .55s, translate .4s var(--ui-ease) .55s; }
.exp.s2 .exp-va { opacity: 0; translate: 0 -8px; }
.exp-vb { opacity: 0; translate: 0 10px; transition: opacity .35s var(--ui-ease) .6s, translate .45s var(--ui-ease) .6s; }
.exp.s2 .exp-vb { opacity: 1; translate: 0 0; }
.exp-va::after, .exp-vb::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(rgba(250, 250, 251, 0), #fafafb); pointer-events: none; }
/* --y5: harita başlığı üst kenarın ötesine geçer, sütun başlıkları en üstte; iki eksik kartı tam (640'ta en uzun hâliyle) */
.exp-vb__in { --y4: 0px; --y5: 360px; translate: 0 calc(-1 * var(--exp-y, 0px)); transition: translate .85s var(--ui-ease) .1s; }
.exp.s4 .exp-vb__in { --exp-y: var(--y4); }
.exp.s5 .exp-vb__in { --exp-y: var(--y5); }

.exp-card { position: relative; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 24, 27, .07), 0 1px 2px rgba(16, 37, 64, .05), 0 8px 18px -12px rgba(16, 37, 64, .2), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* segment düğmesi (uygulamanın Puan | Net, kapsam) */
.exp-seg { position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 2px; border-radius: 8px; background: #f1f1f3; box-shadow: inset 0 0 0 1px rgba(24, 24, 27, .04); }
.exp-seg > b, .exp-seg > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #52525b; white-space: nowrap; }
.exp-seg > b { background: #fff; color: var(--navy-soft); box-shadow: 0 1px 2px rgba(16, 37, 64, .12), 0 0 0 1px rgba(24, 24, 27, .04); }
.exp-seg em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── ŞUBE GÖRÜNÜMÜ: öğrenci sıralaması ── */
.exp-rk { padding: 10px 12px 0; }
.exp-rk__h { display: flex; flex-direction: column; gap: 7px; }
.exp-rk__t { display: block; line-height: 17px; }
.exp-rk__t > b { font-size: 13px; font-weight: 800; color: #18181b; }
.exp-rk__t > small { font-size: 11px; font-weight: 600; color: #52525b; font-variant-numeric: tabular-nums; }
.exp-x--in { display: inline-grid; text-align: right; }
.exp-rk__s { display: block; font-size: 10.5px; line-height: 14px; font-weight: 600; color: #6b7280; white-space: nowrap; }
.exp-rk__c { display: flex; align-items: center; gap: 8px; }
.exp-seg--k > span { transition: background-color .3s var(--ui-ease) .42s, color .3s var(--ui-ease) .42s, box-shadow .3s var(--ui-ease) .42s; }
.exp-seg--k .k1 { background: #fff; color: var(--navy-soft); box-shadow: 0 1px 2px rgba(16, 37, 64, .12), 0 0 0 1px rgba(24, 24, 27, .04); }
.exp.s1 .exp-seg--k .k1 { background: transparent; color: #52525b; box-shadow: none; }
.exp.s1 .exp-seg--k .k2 { background: #fff; color: var(--navy-soft); box-shadow: 0 1px 2px rgba(16, 37, 64, .12), 0 0 0 1px rgba(24, 24, 27, .04); }
.exp.s1 .exp-seg--k { animation: exp-push .3s var(--ui-ease) .36s; }
.exp-seg--k .exp-hit { right: 24px; bottom: 7px; }
.exp.s1:not(.s2) .exp-hit--kap .ui-cur { animation: exp-cur-out 1.3s var(--ui-ease) both; }
.exp.s1:not(.s2) .exp-hit--kap .exp-rip { animation: exp-rip .55s ease-out .4s both; }
.exp-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 800; color: #27272a;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05); }
.exp-chip .exp-i { width: 13px; height: 13px; }
.exp-chip .exp-i:last-child { width: 12px; height: 12px; color: #71717a; }

.exp-rr { display: grid; grid-template-columns: 24px minmax(0, 1fr) 62px 58px 58px 66px; align-items: center; gap: 8px; padding: 0 6px; }
.exp-rr--h { height: 30px; margin-top: 8px; border-bottom: 1px solid #e4e4e7; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #52525b; }
.exp-rr--h .r { text-align: right; }
.exp-rr--h .c { text-align: center; text-transform: none; letter-spacing: 0; line-height: 12px; }
.exp-rr--h .c small { display: block; font-size: 10px; font-weight: 600; color: #71717a; }
/* ≥471: 7 satır katlama çizgisinin üstünde tam (28 px), 8. yuva çizginin altında — kart sürüp gider, yarım satır yok */
.exp-rl { position: relative; height: calc(8 * var(--rh)); overflow: hidden; }
.exp-rl .exp-rr { position: absolute; left: 0; right: 0; top: 0; height: var(--rh); box-shadow: inset 0 -1px 0 #f1f1f3;
  translate: 0 calc(var(--a) * var(--rh)); transition: translate .65s var(--ui-ease) .45s, opacity .35s var(--ui-ease) .45s, background-color .35s var(--ui-ease) .5s; }
.exp.s1 .exp-rl .exp-rr { translate: 0 calc(var(--b) * var(--rh)); }
.exp-rr--new { opacity: 0; }
.exp.s1 .exp-rr--new { opacity: 1; transition-delay: .45s, .8s, .5s; }
.exp.s1 .exp-rr--A { background: rgba(240, 244, 250, .75); }
.exp-nb { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #e8eef7; color: #163e6a; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: background-color .35s var(--ui-ease) .5s, color .35s var(--ui-ease) .5s; }
.exp-nb > * { display: grid; place-items: center; }
.exp.s1 .exp-rr--A .exp-nb { background: var(--navy-soft); color: #fff; }
.exp-rr__ad { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.exp-sbt { flex: none; max-width: 0; overflow: hidden; padding: 0; border-radius: 4px; background: #f1f1f3; font-size: 10px; font-style: normal; font-weight: 800; line-height: 15px; color: #3f3f46; opacity: 0;
  transition: max-width .45s var(--ui-ease) .45s, padding .45s var(--ui-ease) .45s, opacity .3s var(--ui-ease) .6s; }
.exp.s1 .exp-sbt { max-width: 70px; padding: 0 4px; opacity: 1; }
.exp-rr__ad b { position: relative; font-size: 12.5px; font-weight: 700; color: #18181b; }
.exp-rr__ad small { font-size: 10.5px; font-weight: 600; color: #71717a; font-variant-numeric: tabular-nums; }
.exp-rr__o { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; font-weight: 800; color: #18181b; font-variant-numeric: tabular-nums; }
.exp-rr__fm { display: none; }
.exp-hc { display: grid; place-items: center; height: 22px; border-radius: 6px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.exp-hc.h1, .exp-hm__lg .h1 { background: #d1fae5; color: #064e3b; }
.exp-hc.h2, .exp-hm__lg .h2 { background: #ecfccb; color: #365314; }
.exp-hc.h3, .exp-hm__lg .h3 { background: #fef3c7; color: #78350f; }
.exp-hc.h4, .exp-hm__lg .h4, .exp-tk__p.h4 { background: #fee2e2; color: #7f1d1d; }
.exp-c-fk { display: flex; justify-content: flex-end; }
.exp-fr { display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 10.5px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-fr .exp-i { width: 11px; height: 11px; stroke-width: 2.2; }
.exp-fr.up { background: #d1fae5; color: #065f46; }
.exp-fr.dn { background: #fee2e2; color: #991b1b; }
.exp-rr--can .exp-hit { right: 4px; bottom: 2px; }
.exp.s2:not(.s3) .exp-hit--can .ui-cur { animation: exp-cur-out .95s var(--ui-ease) both; }
.exp.s2:not(.s3) .exp-hit--can .exp-rip { animation: exp-rip .55s ease-out .32s both; }
.exp.s1:not(.s2) .exp-rr--can b, .exp.s2 .exp-rr--can b { text-decoration: underline; text-decoration-color: rgba(29, 79, 134, .55); text-underline-offset: 2px; }
.exp.s1:not(.s2) .exp-rr--can b { text-decoration-color: transparent; }

/* ── ÖĞRENCİ GÖRÜNÜMÜ ── */
.exp-kim { display: flex; align-items: center; gap: 9px; height: 34px; }
.exp-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--navy-soft); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 6px -2px rgba(20, 61, 107, .5); }
.exp-av .exp-i { width: 16px; height: 16px; }
.exp-kim__t { min-width: 0; display: flex; flex-direction: column; }
.exp-kim__t b { font-size: 14px; line-height: 18px; font-weight: 800; color: #18181b; letter-spacing: -.01em; }
.exp-kim__t small { font-size: 10.5px; line-height: 14px; font-weight: 600; color: #52525b; white-space: nowrap; font-variant-numeric: tabular-nums; }

.exp-gs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.exp-g { min-width: 0; display: flex; flex-direction: column; justify-content: center; height: 50px; padding: 0 10px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 24, 27, .07), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
  opacity: 0; translate: 0 6px; transition: opacity .35s var(--ui-ease) calc(.65s + var(--i) * 70ms), translate .45s var(--ui-ease) calc(.65s + var(--i) * 70ms); }
.exp.s2 .exp-g { opacity: 1; translate: 0 0; }
.exp-g small { display: flex; align-items: center; gap: 4px; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #52525b; white-space: nowrap; }
.exp-g small .exp-i { width: 12px; height: 12px; }
.exp-g__v { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 17px; line-height: 21px; font-weight: 800; color: #18181b; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }

.exp-row { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 8px; margin-top: 8px; }
.exp-gr { height: 210px; padding: 10px 10px 0 12px; }
.exp-gr__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; }
.exp-gr__h > b { font-size: 12.5px; font-weight: 800; color: #18181b; white-space: nowrap; }
.exp-lg { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: #52525b; }
.exp-lg span { display: inline-flex; align-items: center; gap: 5px; }
.exp-lg i { width: 16px; height: 3px; border-radius: 2px; background: var(--navy-soft); }
.exp-lg i.l1 { background: #059669; }
.exp-lg i.l2 { height: 0; border-top: 2px dashed #71717a; border-radius: 0; background: none; }

/* çizgi grafik (HTML eksen + esnek SVG çizgi) */
.exp-cv { position: relative; display: block; height: 138px; margin-top: 6px; }
.exp-cv__p { position: absolute; left: 26px; right: 8px; top: 6px; bottom: 30px; }
.exp-cv:not(.exp-cv--t) .exp-cv__p { bottom: 18px; }
.exp-cv__g { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #ececf0; }
.exp-cv__g em { position: absolute; right: calc(100% + 5px); top: -7px; font-size: 10px; line-height: 13px; font-style: normal; font-weight: 600; color: #71717a; font-variant-numeric: tabular-nums; }
.exp-cv__x { position: absolute; top: calc(100% + 4px); translate: -50% 0; font-size: 10px; line-height: 12px; font-weight: 700; color: #52525b; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-cv__x small { display: block; font-size: 10px; font-weight: 600; color: #8a8a94; }
.exp-cv__v { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed rgba(29, 79, 134, .5); }
.exp-plot { position: absolute; inset: 0; clip-path: inset(-8px calc(100% + 9px) -8px -8px); transition: clip-path 1.1s cubic-bezier(.45, 0, .3, 1) .15s; }
.exp-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.exp-plot .l { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.exp-plot .l0 { stroke: var(--navy-soft); stroke-width: 3; }
.exp-plot .l1 { stroke: #059669; }
.exp-plot .l2 { stroke: #71717a; }
.exp-plot .k { stroke-dasharray: 5 4; }
.exp-plot .p { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; scale: 0; transition: scale .35s var(--exp-spring) calc(.25s + var(--j) * 95ms); }
.exp-plot .p0 { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--navy-soft); box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(16, 37, 64, .3); }
.exp-plot .p1 { background: #059669; }
.exp-plot .p2 { background: #71717a; }
.exp.s3 .exp-gr .exp-plot { clip-path: inset(-8px -8px -8px -8px); }
.exp.s3 .exp-gr .exp-plot .p { scale: 1; }

.exp-ic { height: 210px; padding: 10px 12px 0; }
.exp-ic__h { display: block; font-size: 12.5px; line-height: 16px; font-weight: 800; color: #18181b; }
.exp-ic__s { display: block; font-size: 10.5px; line-height: 14px; font-weight: 600; color: #52525b; }
.exp-ic__r { display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; font-size: 10.5px; line-height: 14px; font-weight: 600; color: #27272a;
  opacity: 0; translate: 8px 0; transition: opacity .35s var(--ui-ease) calc(.25s + var(--i) * 150ms), translate .45s var(--ui-ease) calc(.25s + var(--i) * 150ms); }
.exp.s4 .exp-ic__r { opacity: 1; translate: 0 0; }
.exp-ic__i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; }
.exp-ic__i .exp-i { width: 13px; height: 13px; }
.exp-ic__i.iyi { background: #d1fae5; color: #065f46; }
.exp-ic__i.kotu { background: #fee2e2; color: #991b1b; }

/* ders × sınav haritası */
.exp-hm { margin-top: 8px; padding: 10px 12px; }
.exp-hm__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.exp-hm__h > b { font-size: 12.5px; font-weight: 800; color: #18181b; white-space: nowrap; }
.exp-hm__lg { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #52525b; white-space: nowrap; }
.exp-hm__lg i { padding: 1px 4px; border-radius: 4px; font-style: normal; }
.exp-ht { display: grid; grid-template-columns: 112px repeat(9, minmax(0, 1fr)) 52px; align-items: center; gap: 3px; height: 21px; margin-top: 2px; }
.exp-ht--h { height: 26px; margin-top: 6px; font-size: 10px; font-weight: 800; color: #52525b; }
.exp-ht--h > span:first-child { letter-spacing: .05em; text-transform: uppercase; }
.exp-ht--h .c { text-align: center; line-height: 12px; }
.exp-ht--h .c small { display: block; font-size: 10px; font-weight: 600; color: #8a8a94; }
.exp-ht > b { min-width: 0; font-size: 11px; font-weight: 700; color: #27272a; white-space: nowrap; overflow: hidden; }
.exp-ht .exp-hc { height: 19px; font-size: 11px; opacity: 0; scale: .7; transition: opacity .25s var(--ui-ease) calc(.55s + var(--j) * 55ms + var(--r) * 25ms), scale .35s var(--exp-spring) calc(.55s + var(--j) * 55ms + var(--r) * 25ms); }
.exp.s5 .exp-ht .exp-hc { opacity: 1; scale: 1; }
.exp-ht__d { display: flex; justify-content: center; }
.exp-ht__d .exp-fr { padding: 0 5px; }

/* tekrarlayan eksikler */
.exp-tk { margin-top: 8px; padding: 10px 12px 12px; }
.exp-tk__h { font-size: 12.5px; line-height: 16px; white-space: nowrap; }
.exp-tk__h b { font-weight: 800; color: #18181b; }
.exp-tk__h small { font-size: 10.5px; font-weight: 600; color: #52525b; }
.exp-tk__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.exp-tk__r { display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px; border-radius: 10px; background: #fafafa; box-shadow: inset 0 0 0 1px rgba(228, 228, 231, .9);
  opacity: 0; translate: 0 6px; transition: opacity .35s var(--ui-ease) calc(.95s + var(--i) * 120ms), translate .45s var(--ui-ease) calc(.95s + var(--i) * 120ms); }
.exp.s5 .exp-tk__r { opacity: 1; translate: 0 0; }
.exp-tk__p { flex: none; display: grid; place-items: center; width: 38px; height: 30px; border-radius: 7px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.exp-tk__r b { display: block; font-size: 11px; line-height: 14px; font-weight: 700; color: #18181b; }
.exp-tk__r small { display: block; margin-top: 2px; font-size: 10px; line-height: 13px; font-weight: 600; color: #52525b; }

/* ── VELİNİN TELEFONU ── */
.exp-ph { position: absolute; z-index: 9; top: 6px; right: 12px; width: 252px; height: 444px; padding: 6px; border-radius: 38px; background: #0d1b2e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 4px rgba(11, 36, 64, .25), 0 30px 50px -20px rgba(11, 36, 64, .55);
  opacity: 0; translate: 26px 18px; scale: .97; transition: opacity .4s var(--ui-ease), translate .7s var(--ui-ease), scale .7s var(--ui-ease); }
.exp.s6 .exp-ph { opacity: 1; translate: 0 0; scale: 1; }
.exp-ph__scr { position: relative; height: 100%; overflow: hidden; border-radius: 32px; background: #f7f8fc; }
.exp-st { position: relative; display: flex; align-items: center; height: 28px; padding: 0 16px 0 22px; font-size: 11px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.exp-isl { position: absolute; left: 50%; top: 7px; width: 66px; height: 19px; margin-left: -33px; border-radius: 10px; background: #0d1b2e; }
.exp-sti { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.exp-sti .exp-i { width: 12px; height: 12px; stroke-width: 2.4; }
.exp-sti .exp-bat { width: 15px; }
.exp-ah { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; }
.exp-ah__b .exp-i { width: 17px; height: 17px; color: #1f2937; }
.exp-logo { width: 28px; height: 28px; }
.exp-ah__n { position: relative; margin-left: auto; color: #374151; }
.exp-ah__n .exp-i { width: 17px; height: 17px; }
.exp-ah__n i { position: absolute; right: -1px; top: -1px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px #f7f8fc; }
.exp-ah__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: 0 0 0 1px #e5e7eb, 0 1px 2px rgba(16, 37, 64, .08); }
.exp-pv { position: absolute; left: 0; right: 0; top: 68px; bottom: 44px; overflow: hidden; }
.exp-pc { padding: 0 10px; translate: 0 0; transition: translate .8s var(--ui-ease) .15s; }
.exp.s8 .exp-pc { translate: 0 calc(-1 * var(--scr)); }

.exp-kids { display: flex; gap: 6px; height: 24px; }
.exp-kids > span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 2px; border-radius: 12px; background: #fff; font-size: 11px; font-weight: 700; color: #374151; box-shadow: inset 0 0 0 1px #e5e7eb; }
.exp-kids i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10.5px; font-style: normal; font-weight: 800; color: var(--navy-soft); }
.exp-kids .on { background: var(--navy-soft); color: #fff; box-shadow: 0 2px 6px -2px rgba(20, 61, 107, .6); }
.exp-kids .on i { background: rgba(255, 255, 255, .2); color: #fff; }
.exp-pt { display: flex; flex-direction: column; margin-top: 6px; }
.exp-pt b { font-size: 13px; line-height: 16px; font-weight: 800; color: #0f172a; letter-spacing: -.015em; white-space: nowrap; }
.exp-pt small { font-size: 10.5px; line-height: 13px; font-weight: 500; color: #4b5563; }
.exp-sk { margin-top: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(199, 197, 208, .45), 0 1px 2px rgba(16, 37, 64, .05); }
.exp-sk__t { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid rgba(199, 197, 208, .45); }
.exp-sk__t > span { min-width: 0; display: flex; flex-direction: column; padding: 6px 4px 6px 7px; }
.exp-sk__t > span + span { box-shadow: inset 1px 0 0 rgba(199, 197, 208, .45); }
.exp-sk__t b { font-size: 14px; line-height: 18px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-sk__t b em { margin-left: 2px; line-height: 1; font-size: 10px; font-style: normal; font-weight: 700; color: #4b5563; letter-spacing: 0; }
.exp-sk__t small { margin-top: 2px; font-size: 10px; line-height: 12px; font-weight: 600; color: #4b5563; }
.exp-sk__t small.m { margin-top: 0; font-weight: 500; white-space: nowrap; }
.exp-sk__r { display: grid; grid-template-columns: 58px minmax(0, 1fr) 64px; align-items: center; gap: 4px; height: 18px; padding: 0 8px 0 7px; font-size: 10px; font-weight: 600; color: #4b5563; }
.exp-sk__r:first-of-type { margin-top: 3px; }
.exp-sk__r:last-child { margin-bottom: 4px; }
.exp-sk__b { display: flex; align-items: center; gap: 3px; }
.exp-sk__b em { font-style: normal; font-size: 10px; }
.exp-sk__b > i { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #eef0f7; }
.exp-sk__b > i i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(5px + (100% - 10px) * var(--x)); border-radius: 3px; background: #b9cbe3; }
.exp-sk__b > i i::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--navy-soft); box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(16, 37, 64, .3); }
.exp-sk__r .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-sk__r .n b { color: #0f172a; font-weight: 800; }
.exp-tbsp { height: 30px; margin-top: 6px; }

/* sekmeler (yapışkan): sayfa kayınca üstte kalır */
.exp-tb { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0 10px; padding: 2px; border-radius: 10px;
  translate: 0 var(--tby); transition: translate .8s var(--ui-ease) .15s; }
.exp.s8 .exp-tb { translate: 0 0; }
/* şeridin zemini ayrı katmanda: z-index 3 yığın bağlamı kurduğundan -1'lik ::before şeridin kendi zemininin üstüne boyanırdı;
   ::after ::before'dan sonra boyanır → gri zemin sayfa rengindeki bandın üstünde kalır (s7 ile s8 aynı görünür) */
.exp-tb::before { content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; top: -6px; bottom: -6px; background: #f7f8fc; opacity: 0; transition: opacity .3s var(--ui-ease) .7s; }
.exp-tb::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 10px; background: #e9ebf3; }
.exp.s8 .exp-tb::before { opacity: 1; }
.exp-tb > span:not(.exp-tb__p) { position: relative; z-index: 1; display: grid; place-items: center; height: 26px; font-size: 10.5px; font-weight: 700; color: #4b5563; transition: color .3s var(--ui-ease) .25s; }
.exp-tb .t0 { color: var(--navy-soft); }
.exp.s7 .exp-tb .t0 { color: #4b5563; }
.exp.s7 .exp-tb .t3 { color: var(--navy-soft); }
.exp-tb__p { position: absolute; z-index: 0; left: 2px; top: 2px; width: calc((100% - 10px) / 4); height: 26px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(16, 37, 64, .12);
  transition: translate .45s var(--ui-ease) .2s; }
.exp.s7 .exp-tb__p { translate: calc(300% + 6px) 0; }
.exp-tap { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(29, 79, 134, .22); opacity: 0; }
@keyframes exp-tap { 0% { opacity: 0; scale: .4; } 25% { opacity: 1; scale: .8; } 100% { opacity: 0; scale: 2.1; } }
.exp.s7:not(.s8) .exp-tap { animation: exp-tap .65s ease-out .1s both; }
.exp-swipe { position: absolute; z-index: 6; left: 50%; top: 290px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: rgba(15, 23, 42, .18); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); opacity: 0; pointer-events: none; }
@keyframes exp-swipe { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 70% { opacity: 1; translate: 0 -150px; } 100% { opacity: 0; translate: 0 -170px; } }
.exp.s8 .exp-swipe { animation: exp-swipe .9s var(--ui-ease) both; }

/* panel: Özet → Gelişim */
.exp-pn { display: grid; margin-top: 6px; }
.exp-pn > * { grid-area: 1 / 1; min-width: 0; }
.exp-pk { display: block; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(199, 197, 208, .45), 0 1px 2px rgba(16, 37, 64, .05); }
.exp-pk + .exp-pk { margin-top: 8px; }
.exp-pk__h { display: flex; align-items: flex-start; gap: 8px; }
.exp-pk__h > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.exp-pk__h b { font-size: 12px; line-height: 15px; font-weight: 800; color: #0f172a; }
.exp-pk__h small { margin-top: 2px; font-size: 10px; line-height: 13px; font-weight: 500; color: #4b5563; }
.exp-pk__i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e8eef7; color: var(--navy-soft); }
.exp-pk__i .exp-i { width: 13px; height: 13px; }
.exp-pk__h > b { align-self: center; }
.exp-oz { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 6px; position: relative; }
.exp-ring { width: 58px; height: 58px; rotate: -90deg; }
.exp-ring circle { fill: none; stroke-width: 9; }
.exp-ring .t { stroke: #e5e7eb; }
.exp-ring .d { stroke: #047857; stroke-dasharray: 80 10; }
.exp-ring .y { stroke: #b91c1c; stroke-dasharray: 7 83; stroke-dashoffset: -81; }
.exp-oz__n { position: absolute; left: 0; top: 0; width: 58px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #374151; line-height: 11px; }
.exp-oz__n b { font-size: 15px; line-height: 16px; font-weight: 800; color: #0f172a; }
.exp-oz__l { display: flex; flex-direction: column; gap: 4px; }
.exp-oz__l > span { display: flex; align-items: center; gap: 6px; height: 16px; font-size: 10.5px; font-weight: 600; color: #374151; }
.exp-oz__l i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: #f1f1f3; color: #52525b; font-style: normal; }
.exp-oz__l i .exp-i { width: 10px; height: 10px; stroke-width: 2.6; }
.exp-oz__l i.d { background: #d1fae5; color: #047857; }
.exp-oz__l i.y { background: #fee2e2; color: #b91c1c; }
.exp-oz__l b { min-width: 14px; font-size: 13px; font-weight: 800; color: #0f172a; text-align: right; font-variant-numeric: tabular-nums; }

.exp-ob { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.exp-ob > span { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 10px; background: #edf2f9; }
.exp-ob small { font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #2a4a72; }
.exp-ob b { font-size: 17px; line-height: 22px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.exp-ok { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; padding: 6px 8px; border-radius: 10px; background: #e6f6ef; color: #065f46; font-size: 10.5px; line-height: 14px; font-weight: 500;
  opacity: 0; scale: .96; transition: opacity .35s var(--ui-ease) .95s, scale .45s var(--exp-spring) .95s; }
.exp.s8 .exp-ok { opacity: 1; scale: 1; }
.exp-ok .exp-i { width: 13px; height: 13px; margin-top: 1px; }
.exp-ok b { font-weight: 800; font-variant-numeric: tabular-nums; }
.exp-eb { display: block; margin-top: 6px; font-size: 10px; line-height: 13px; font-weight: 500; color: #4b5563; }
.exp-eb b { color: #0f172a; font-weight: 800; }
.exp-seg--p { height: 24px; margin-top: 7px; }
.exp-seg--p > b, .exp-seg--p > span { height: 20px; padding: 0 9px; font-size: 10.5px; }
.exp-pk--g .exp-cv { height: 120px; }
.exp-pk--g .exp-cv__p { bottom: 16px; }
.exp-pk--g .exp-plot .l0 { stroke: #d97706; stroke-width: 1.8; }
.exp-pk--g .exp-plot .l1 { stroke: var(--navy-soft); stroke-width: 2.6; }
.exp-pk--g .exp-plot .p1 { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--navy-soft); box-shadow: 0 0 0 1.5px #fff; }
.exp.s8 .exp-pk--g .exp-plot { clip-path: inset(-8px -8px -8px -8px); transition-delay: .9s; }
.exp.s8 .exp-pk--g .exp-plot .p { scale: 1; transition-delay: calc(1s + var(--j) * 90ms); }

/* bottom nav */
.exp-bn { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr); height: 44px; padding: 4px 10px 0; background: #fff; box-shadow: 0 -1px 0 #eceef4; }
.exp-bn > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; line-height: 12px; font-weight: 600; color: #374151; white-space: nowrap; letter-spacing: -.01em; }
.exp-bn .exp-i { width: 17px; height: 17px; stroke-width: 1.8; }
.exp-bn > span > i { position: absolute; left: calc(50% + 4px); top: -3px; display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #dc2626; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; box-shadow: 0 0 0 1.5px #fff; }

/* ── DAR KAPLAR ── */
@container (max-width: 659px) {
  .exp-okul, .exp-kim__t .exp-w1 { display: none; }
  .exp-sel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr) minmax(0, 1fr); }
  .exp-row { grid-template-columns: minmax(0, 1fr) 216px; }
  .exp-ht { grid-template-columns: 96px repeat(9, minmax(0, 1fr)) 48px; }
  .exp-hm__lg { display: none; }
  .exp-ic { padding: 9px 10px 0 11px; }
  .exp-ic__r { gap: 7px; margin-top: 6px; line-height: 13px; }
}
@container (max-width: 599px) {
  /* dar kapta eksikler alt alta: ilk kart tam, ikincisi katlama çizgisinin altında başlar (ilk kartın yüksekliği sabit) */
  .exp-vb__in { --y4: 317px; --y5: 532px; }
  .exp-ttl small { display: none; }
  .exp-sel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-f--tur { display: none; }
  .exp-kim__t .exp-w2 { display: none; }
  .exp-gs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .exp-g { height: 40px; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; }
  .exp-g__v { margin-top: 0; font-size: 15px; }
  .exp-g__v .exp-fr { display: none; }
  .exp-row { grid-template-columns: minmax(0, 1fr); }
  .exp-gr { height: 176px; }
  .exp-gr .exp-cv { height: 104px; }
  .exp-rr__ad small { display: none; }
  .exp-ic { height: 190px; }
  .exp-rr { grid-template-columns: 24px minmax(0, 1fr) 112px 52px 52px; gap: 6px; }
  .exp-c-fk { display: none; }
  .exp-rr__fm { display: inline-flex; }
  .exp-ht { grid-template-columns: minmax(0, 1fr) repeat(4, 44px) 48px; height: 23px; }
  .exp-ht--h { height: 26px; }
  .exp-ht .exp-hc { height: 21px; }
  .exp.s4 .exp-ht .exp-hc { opacity: 1; scale: 1; } /* --y4 haritayı s4'te gösterir: hücreler rozetlerle birlikte dolar */
  .exp-ht .o { display: none; }
  .exp-ht > b { white-space: normal; font-size: 10.5px; line-height: 11px; }
  .exp-tk__l { grid-template-columns: minmax(0, 1fr); }
  .exp-tk__r { min-height: 59px; align-items: center; }
  .exp-tk__h small { display: none; }
  .exp-ph { right: 10px; }
}
@container (max-width: 470px) {
  /* s4: katlama çizgisi haritanın «Din Kültürü» satırının hemen altına düşer (yarım satır yok) */
  .exp-vb__in { --y4: 335px; --y5: 537px; }
  .exp-rk { --rh: 30px; }
  .exp-rl { height: calc(7 * var(--rh)); }
  .exp-tk__r { min-height: 72px; }
  .exp-band { margin: 8px 8px 0; padding: 8px 8px 8px 9px; gap: 8px; }
  .exp-ico { width: 28px; height: 28px; }
  .exp-ttl b { font-size: 14px; }
  .exp-pdf { height: 28px; padding: 0 9px; }
  .exp-pdf__l { display: none; }
  .exp-pdf__k { display: inline; }
  .exp-sel { padding: 7px 10px 9px; gap: 6px; }
  .exp-in { padding: 0 6px 0 8px; font-size: 11px; }
  .exp-va, .exp-vb { padding: 8px 10px 0; }
  .exp-rk { padding: 9px 8px 0; }
  .exp-rk__s, .exp-seg--m, .exp-chip { display: none; }
  .exp-rr { grid-template-columns: 22px minmax(0, 1fr) 58px 46px 46px; gap: 5px; padding: 0 2px; }
  .exp-rr--h { font-size: 10px; letter-spacing: 0; }
  .exp-rr__fm { display: none; }
  .exp-sbt, .exp-rr__ad small { display: none; }
  .exp-rr__ad b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .exp-rr--can .exp-rr__ad b { overflow: visible; } /* imleç adın içinde durur; kırpılmasın (ad sığıyor) */
  .exp-rr__o { font-size: 12px; }
  .exp-hc { font-size: 11px; }
  .exp-cv__x small { display: none; }
  .exp-gr .exp-cv__p { bottom: 18px; }
  .exp-gr .exp-cv { height: 100px; }
  .exp-gr { height: 172px; }
  .exp-lg { gap: 9px; }
  .exp-g { height: 44px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 0 9px; }
  .exp-g small { letter-spacing: .03em; }
  .exp-g__v { margin-top: 2px; font-size: 15px; line-height: 19px; }
  .exp-ht { grid-template-columns: minmax(0, 1fr) repeat(4, 38px) 46px; gap: 3px; }
  .exp-ph { right: auto; left: calc(50% - 126px); }
}