/* SAHNE · ÖĞRENCİ RAPORU (includes/scenes/reports.php) — adımlar:
   s1 «Sınıf» → 8-A (kutu etkin, kapsam çipi, Süzgeçler rozeti) · s2 «Kolonlar» bölümü açılır, eylem çubuğu alta yapışır ·
   s3 «Kolon ara…» → «veli»: yalnız Veli grubu kalır · s4 Veli (birincil) ✓ · s5 Veli Telefonu ✓ (4 kolon) ·
   s6 açık «Kolonlar» sekmesine yeniden basılır → bölüm kapanır, önizleme 4 kolonu gösterir · s7 «Raporu göster» → Sonuç: 19 öğrenci ·
   s8 «Yazdır» → Çıktı önizleme «Çıktı hazırlanıyor…» · s9 A4 çıktı.
   Yerleşim değişkenlerle: sayfa başlığı (--rpt-phh), bant (--rpt-bh), süzgeç bölümü (--rpt-hs), kapsam şeridi (--rpt-kh),
   eylem çubuğu (--rpt-barh). Kayan bloklar bu değişkenlerden HESAPLANIR — kap genişliği değişince yerine oturur. */
@property --rpt-n { syntax: '<integer>'; inherits: false; initial-value: 0; }
/* kapsam şeridi yüksekliği: ≤384 px sınıf çipi gelince şerit uzar, altındaki her şey yumuşakça kayar */
@property --rpt-kh { syntax: '<length>'; inherits: true; initial-value: 40px; }

.rpt { container-type: inline-size; --d: 0s; --rpt-spring: cubic-bezier(.34, 1.56, .64, 1);
  --rpt-h: 480px; --rpt-phh: 58px; --rpt-bh: 92px; --rpt-hs: 130px; --rpt-kh: 40px; --rpt-barh: 50px; --rpt-gp: 14px;
  --rpt-chh: 24px; --rpt-kimh: 131px;
  --rpt-tint: #eef3fa; --rpt-tint-line: #c6d6ea; --rpt-deep: #0f3157;
  --rpt-z2: #e4e4e7; --rpt-z5: #71717a; --rpt-z6: #52525b; --rpt-z7: #3f3f46; --rpt-z8: #27272a; }
.rpt.s1 { --d: .5s; } .rpt.s2 { --d: .45s; } .rpt.s3 { --d: .3s; } .rpt.s4 { --d: .45s; } .rpt.s5 { --d: .45s; }
.rpt.s6 { --d: .45s; } .rpt.s7 { --d: .66s; } .rpt.s8 { --d: .45s; } .rpt.s9 { --d: .05s; }

.rpt-win { position: relative; height: var(--rpt-h); background: #f5f6f8; border-radius: 14px; }
.rpt-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* adım katmanları: aynı ızgara hücresinde üst üste; v01 = 0. adımdan 1.'ye, v1 = 1.'den sonra, v45 = 4.–5. … */
.rpt-x { display: inline-grid; min-width: 0; vertical-align: top; }
.rpt-x > * { grid-area: 1 / 1; min-width: 0; }
.rpt-v { opacity: 0; translate: 0 3px; transition: opacity .28s var(--ui-ease) var(--d), translate .32s var(--ui-ease) var(--d); }
.rpt:not(.s1) .v01, .rpt.s1 .v1, .rpt.s1:not(.s4) .v14, .rpt:not(.s4) .v04, .rpt.s4:not(.s5) .v45, .rpt.s5 .v5,
.rpt.s5:not(.s7) .v57, .rpt.s7 .v7 { opacity: 1; translate: 0 0; }

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

/* ── sayfa başlığı ── */
.rpt-ph { height: var(--rpt-phh); padding: 12px 16px 0; }
.rpt-ph__t { display: flex; align-items: center; gap: 7px; height: 22px; }
.rpt-ph__t b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #18181b; }
.rpt-ph__q { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--navy-soft); box-shadow: inset 0 0 0 1px var(--rpt-tint-line); background: #fff; }
.rpt-ph__q .rpt-i { width: 13px; height: 13px; }
.rpt-ph__d { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--rpt-z6); white-space: nowrap; }

/* ── bant (kurum rengi) ── */
.rpt-band { position: relative; display: flex; flex-direction: column; height: var(--rpt-bh); margin: 0 12px; padding: 12px 14px 0; border-radius: 14px 14px 0 0; color: #fff;
  background: radial-gradient(26rem 9rem at 100% -30%, rgba(124, 168, 228, .38), transparent 62%), radial-gradient(20rem 8rem at -8% 135%, rgba(45, 212, 191, .16), transparent 60%),
              linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.rpt-band__top { display: flex; align-items: center; gap: 10px; }
.rpt-bico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.rpt-bico .rpt-i { width: 17px; height: 17px; stroke-width: 1.8; }
.rpt-bt { flex: 1; min-width: 0; line-height: 18px; }
.rpt-bt b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.rpt-bt small { display: block; font-size: 11px; line-height: 15px; font-weight: 600; color: rgba(255, 255, 255, .8); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-sab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px 0 10px; border-radius: 9px; font-size: 11.5px; font-weight: 700;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.rpt-sab .rpt-i { width: 13px; height: 13px; }
.rpt-sab .rpt-chv { width: 12px; height: 12px; opacity: .8; }

.rpt-tabs { display: flex; gap: 4px; height: 34px; margin-top: auto; }
.rpt-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 10px 10px 0 0; font-size: 11.5px; font-weight: 800; color: #d6e2f2; white-space: nowrap;
  transition: background-color .25s var(--ui-ease) var(--d), color .25s var(--ui-ease) var(--d); }
.rpt-tab .rpt-i { width: 13px; height: 13px; }
.rpt-tab .rpt-chv { width: 12px; height: 12px; opacity: .7; transition: rotate .25s var(--ui-ease) var(--d); }
.rpt-bdg { display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 16px; color: #fff;
  background: rgba(255, 255, 255, .2); font-variant-numeric: tabular-nums; transition: background-color .25s var(--ui-ease) var(--d); }
.rpt-bdg > b { font-weight: 800; }
/* açık bölüm beyaz sekme: s0–s1 Süzgeçler, s2–s5 Kolonlar; s6 açık sekmeye yeniden basılır → ikisi de kapalı (:1161–1168) */
.rpt:not(.s2) .rpt-tab--s, .rpt.s2:not(.s6) .rpt-tab--k { background: #fff; color: var(--navy); }
.rpt:not(.s2) .rpt-tab--s .rpt-chv, .rpt.s2:not(.s6) .rpt-tab--k .rpt-chv { rotate: 180deg; }
.rpt:not(.s2) .rpt-tab--s .rpt-bdg, .rpt.s2:not(.s6) .rpt-tab--k .rpt-bdg { background: var(--navy-soft); }
/* Süzgeçler rozeti: süzgeç yokken gizli, 8-A seçilince açılır */
.rpt-bdg--s { max-width: 0; min-width: 0; padding: 0; margin-left: -6px; opacity: 0; scale: .5;
  transition: max-width .3s var(--ui-ease) var(--d), padding .3s var(--ui-ease) var(--d), margin .3s var(--ui-ease) var(--d), min-width .3s var(--ui-ease) var(--d), opacity .25s var(--ui-ease) var(--d), scale .4s var(--rpt-spring) var(--d), background-color .25s var(--ui-ease) var(--d); }
.rpt.s1 .rpt-bdg--s { max-width: 24px; min-width: 18px; padding: 0 5px; margin-left: 0; opacity: 1; scale: 1; }
.rpt-tab--k .rpt-hit { left: 56%; top: 21px; }
.rpt.s2:not(.s3) .rpt-hit--tab .ui-cur { animation: rpt-cur .85s var(--ui-ease) both; }
.rpt.s2:not(.s3) .rpt-hit--tab .rpt-rip { animation: rpt-rip .55s ease-out .38s both; }
.rpt.s6:not(.s7) .rpt-hit--tab .ui-cur { animation: rpt-cur-out .9s var(--ui-ease) both; }
.rpt.s6:not(.s7) .rpt-hit--tab .rpt-rip { animation: rpt-rip .55s ease-out .38s both; }

/* ── gövde: bant altı ── */
.rpt-main { position: absolute; left: 12px; right: 12px; top: calc(var(--rpt-phh) + var(--rpt-bh)); bottom: 0; }
/* pencerenin alt kenarı: sayfa aşağı sürer — yumuşak geçiş (yapışkan çubuğun altında kalır) */
.rpt-main::after { content: ""; position: absolute; z-index: 4; left: -12px; right: -12px; bottom: 0; height: 18px; background: linear-gradient(rgba(245, 246, 248, 0), #f5f6f8); pointer-events: none; }
.rpt-pan { position: absolute; z-index: 2; top: 0; left: 0; right: 0; background: #fff; box-shadow: inset 1px 0 0 rgba(24, 24, 27, .07), inset -1px 0 0 rgba(24, 24, 27, .07); }
.rpt-pS { height: var(--rpt-hs); padding: 14px 14px 0; transition: opacity .25s var(--ui-ease) var(--d); }
.rpt.s2 .rpt-pS { opacity: 0; }
.rpt-pK { bottom: calc(var(--rpt-barh) + 10px); padding: 12px 14px 0; overflow: hidden; opacity: 0; transition: opacity .3s var(--ui-ease) var(--d);
  box-shadow: inset 1px 0 0 rgba(24, 24, 27, .07), inset -1px 0 0 rgba(24, 24, 27, .07), 0 calc(var(--rpt-barh) + 10px) 0 #fff; }
.rpt-pK::after { content: ""; position: absolute; z-index: 3; left: 1px; right: 1px; bottom: 0; height: 26px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; }
.rpt.s2:not(.s6) .rpt-pK { opacity: 1; }

/* süzgeçler */
.rpt-flds { display: grid; grid-template-columns: 150px repeat(4, minmax(0, 1fr)); gap: 8px; }
.rpt-fld { min-width: 0; }
.rpt-lbl { display: flex; align-items: center; gap: 5px; height: 14px; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; color: var(--rpt-z6); white-space: nowrap; }
.rpt-lbl .rpt-i { width: 12px; height: 12px; color: var(--rpt-z5); transition: color .3s var(--ui-ease) var(--d); }
.rpt-sel { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 600; color: var(--rpt-z8);
  box-shadow: inset 0 0 0 1px var(--rpt-z2), 0 1px 2px rgba(24, 24, 27, .05);
  transition: background-color .3s var(--ui-ease) var(--d), box-shadow .3s var(--ui-ease) var(--d), color .3s var(--ui-ease) var(--d); }
.rpt-sel__v, .rpt-sel .rpt-x { flex: 1; min-width: 0; white-space: nowrap; }
.rpt-sel .rpt-chv { width: 13px; height: 13px; color: var(--rpt-z5); }
.rpt.s1 .rpt-fld--sinif .rpt-sel { background: var(--rpt-tint); color: var(--rpt-deep); font-weight: 700; box-shadow: inset 0 0 0 1px #7d9dc8, 0 0 0 3px rgba(29, 79, 134, .12); }
.rpt.s2 .rpt-fld--sinif .rpt-sel { box-shadow: inset 0 0 0 1px #7d9dc8, 0 1px 2px rgba(24, 24, 27, .05); }
.rpt.s1 .rpt-fld--sinif .rpt-lbl .rpt-i { color: var(--navy-soft); }
.rpt-sel .rpt-hit { right: 24px; bottom: 9px; }
.rpt.s1:not(.s2) .rpt-hit--sinif .ui-cur { animation: rpt-cur .9s var(--ui-ease) both; }
.rpt.s1:not(.s2) .rpt-hit--sinif .rpt-rip { animation: rpt-rip .55s ease-out .42s both; }
.rpt-adv { display: flex; align-items: center; gap: 9px; height: 40px; margin-top: 12px; padding: 0 12px 0 6px; border-radius: 12px; background: #fafafa; box-shadow: inset 0 0 0 1px rgba(228, 228, 231, .85); }
.rpt-adv__i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff; color: var(--navy-soft); box-shadow: 0 1px 2px rgba(24, 24, 27, .06), inset 0 0 0 1px var(--rpt-z2); }
.rpt-adv__i .rpt-i { width: 13px; height: 13px; }
.rpt-adv__t { flex: 1; min-width: 0; line-height: 14px; }
.rpt-adv__t b { display: block; font-size: 11.5px; font-weight: 800; color: #18181b; }
.rpt-adv__t small { display: block; font-size: 10.5px; font-weight: 600; color: var(--rpt-z6); white-space: nowrap; }
.rpt-adv > .rpt-chv { width: 13px; height: 13px; color: var(--rpt-z5); }

/* kolonlar */
.rpt-selh { display: flex; align-items: center; gap: 6px; height: 18px; }
.rpt-selh > b { font-size: 12px; font-weight: 800; color: #18181b; }
.rpt-cnt { display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--navy-soft); color: #fff; font-style: normal; font-size: 10px; line-height: 16px; font-variant-numeric: tabular-nums; }
.rpt-clr { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--navy-soft); }
.rpt-clr .rpt-i { width: 12px; height: 12px; }
.rpt-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; height: var(--rpt-chh); margin-top: 6px; }
.rpt-sc { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 3px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 600; color: var(--rpt-z8); white-space: nowrap;
  box-shadow: 0 0 0 1px var(--rpt-z2), 0 1px 2px rgba(24, 24, 27, .05); }
.rpt-sc--k { padding-right: 7px; }
.rpt-no { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--navy-soft); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rpt-lk { width: 12px; height: 12px; color: var(--navy-soft); stroke-width: 2.4; }
.rpt-cx { width: 18px; height: 18px; padding: 3px; border-radius: 5px; color: var(--rpt-z5); }
.rpt-ozel { flex: none; display: inline-block; height: 15px; padding: 0 4px; border-radius: 4px; background: #fef3c7; color: #92400e; font-style: normal; font-size: 10px; font-weight: 800; line-height: 15px; }
.rpt-sc--n { opacity: 0; scale: .6; transition: opacity .25s var(--ui-ease) var(--d), scale .45s var(--rpt-spring) var(--d); }
.rpt.s4 .rpt-sc--4, .rpt.s5 .rpt-sc--5 { opacity: 1; scale: 1; }

.rpt-find { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.rpt-srch { position: relative; flex: none; display: flex; align-items: center; width: 200px; height: 28px; padding-left: 28px; border-radius: 9px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--rpt-z2), 0 1px 2px rgba(24, 24, 27, .05); transition: box-shadow .3s var(--ui-ease) var(--d); }
.rpt-srch > .rpt-i { position: absolute; left: 9px; top: 7px; width: 13px; height: 13px; color: var(--rpt-z5); }
.rpt-srch__ph, .rpt-srch__q { position: absolute; left: 28px; top: 0; font-size: 11px; line-height: 28px; white-space: nowrap; }
.rpt-srch__ph { font-weight: 500; color: var(--rpt-z5); transition: opacity .15s var(--ui-ease) .38s; }
.rpt-srch__q { font-weight: 700; color: var(--rpt-z8); }
.rpt-srch__q i { font-style: normal; opacity: 0; transition: opacity .06s linear calc(.45s + var(--i) * 95ms); }
.rpt.s3 .rpt-srch__ph { opacity: 0; }
.rpt.s3 .rpt-srch__q i { opacity: 1; }
.rpt.s3:not(.s4) .rpt-srch { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); }
.rpt-srch .rpt-hit { left: 64px; top: 15px; }
.rpt.s3:not(.s4) .rpt-hit--ara .ui-cur { animation: rpt-cur-out 1.05s var(--ui-ease) both; }
.rpt.s3:not(.s4) .rpt-hit--ara .rpt-rip { animation: rpt-rip .55s ease-out .32s both; }
.rpt-find__n { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--rpt-z6); white-space: nowrap; }

.rpt-grps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; margin-top: 10px; }
.rpt-gc { min-width: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--rpt-z2), 0 1px 2px rgba(24, 24, 27, .04), inset 0 1px 0 rgba(255, 255, 255, .6); }
.rpt-gc--dolu, .rpt.s4 .rpt-gc--veli { box-shadow: 0 0 0 1px var(--rpt-tint-line), 0 1px 2px rgba(24, 24, 27, .04); }
.rpt-gc--veli { transition: translate .55s var(--ui-ease) calc(var(--d) + .78s), box-shadow .3s var(--ui-ease) var(--d); }
.rpt-gc--kim { height: var(--rpt-kimh); overflow: hidden; transition: opacity .3s var(--ui-ease) calc(var(--d) + .72s), scale .3s var(--ui-ease) calc(var(--d) + .72s); }
.rpt.s3 .rpt-gc--kim { opacity: 0; scale: .97; }
.rpt.s3 .rpt-gc--veli { translate: 0 calc(-1 * (var(--rpt-kimh) + 10px)); }
.rpt-gc__h { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 6px; }
.rpt-gi { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.rpt-gi .rpt-i { width: 14px; height: 14px; }
.rpt-gi--kim { background: var(--rpt-tint); color: var(--navy); }
.rpt-gi--veli { background: #e0f2fe; color: #0369a1; }
.rpt-gc__t { flex: 1; min-width: 0; line-height: 13px; }
.rpt-gc__t b { display: block; font-size: 11.5px; font-weight: 800; color: #18181b; }
.rpt-gc__t small { display: grid; font-size: 10px; font-weight: 600; color: var(--rpt-z6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-gc__h > .rpt-chv { width: 13px; height: 13px; color: var(--rpt-z5); }
.rpt-chv--up { rotate: 180deg; }
.rpt-all { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px; border-radius: 7px; font-size: 10.5px; font-weight: 700; color: var(--rpt-z6); }
.rpt-gc__b { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border-top: 1px solid #f1f1f3; }
.rpt-kc { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px 0 5px; border-radius: 7px; background: #fff; font-size: 10.5px; font-weight: 600; color: var(--rpt-z7); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--rpt-z2); transition: background-color .25s var(--ui-ease) var(--d), box-shadow .25s var(--ui-ease) var(--d), color .25s var(--ui-ease) var(--d); }
.rpt-cb { flex: none; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 4px; background: #fff; color: transparent; box-shadow: inset 0 0 0 1px #d4d4d8;
  transition: background-color .2s var(--ui-ease) var(--d), box-shadow .2s var(--ui-ease) var(--d), color .2s var(--ui-ease) var(--d); }
.rpt-cb .rpt-i { width: 9px; height: 9px; stroke-width: 3.6; }
.rpt-cb--on { background: var(--navy-soft); color: #fff; box-shadow: none; }
.rpt-kc--k .rpt-cb .rpt-i { width: 8px; height: 8px; stroke-width: 3; }
.rpt-kc--k, .rpt-kc--on { background: var(--rpt-tint); color: var(--rpt-deep); box-shadow: inset 0 0 0 1px var(--rpt-tint-line); }
.rpt.s4 .rpt-kc--4, .rpt.s5 .rpt-kc--5 { background: var(--rpt-tint); color: var(--rpt-deep); box-shadow: inset 0 0 0 1px var(--rpt-tint-line); }
.rpt.s4 .rpt-kc--4 .rpt-cb, .rpt.s5 .rpt-kc--5 .rpt-cb { background: var(--navy-soft); color: #fff; box-shadow: none; }
.rpt.s4 .rpt-cb--mx { background: var(--navy-soft); color: #fff; box-shadow: none; }
.rpt-kc .rpt-hit { left: 11px; top: 12px; }
.rpt.s4:not(.s5) .rpt-hit--v4 .ui-cur, .rpt.s5:not(.s6) .rpt-hit--v5 .ui-cur { animation: rpt-cur .85s var(--ui-ease) both; }
.rpt.s4:not(.s5) .rpt-hit--v4 .rpt-rip, .rpt.s5:not(.s6) .rpt-hit--v5 .rpt-rip { animation: rpt-rip .55s ease-out .38s both; }

/* ── kapsam şeridi + önizleme / sonuç: sayfanın akışı ── */
.rpt-low { position: absolute; z-index: 1; top: var(--rpt-hs); left: 0; right: 0;
  transition: opacity .3s var(--ui-ease) var(--d), translate .55s var(--ui-ease) var(--d); }
.rpt.s2 .rpt-low { opacity: 0; translate: 0 24px; }
.rpt.s6 .rpt-low { opacity: 1; translate: 0 calc(-1 * var(--rpt-hs)); }
.rpt-kap { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 5px; height: var(--rpt-kh); padding: 0 12px 0 14px; background: #fff; border-top: 1px solid #f1f1f3;
  box-shadow: inset 1px 0 0 rgba(24, 24, 27, .07), inset -1px 0 0 rgba(24, 24, 27, .07); }
.rpt-kap__l { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rpt-z6); }
.rpt-kap__l .rpt-i { width: 12px; height: 12px; }
.rpt-cip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 10.5px; white-space: nowrap; }
.rpt-cip > span { font-weight: 600; }
.rpt-cip > b { font-weight: 800; }
.rpt-cip--n { background: #f4f4f5; box-shadow: inset 0 0 0 1px var(--rpt-z2); color: var(--rpt-z8); }
.rpt-cip--n > span { color: var(--rpt-z6); }
.rpt-cip--e { padding-right: 2px; background: var(--rpt-tint); box-shadow: inset 0 0 0 1px var(--rpt-tint-line); color: var(--rpt-deep); opacity: 0; scale: .6; transform-origin: left center;
  transition: opacity .25s var(--ui-ease) var(--d), scale .45s var(--rpt-spring) var(--d); }
.rpt-cip--e > span { color: var(--navy-soft); }
.rpt-cip--e > i { display: grid; place-items: center; width: 18px; height: 18px; margin-left: 1px; border-radius: 50%; color: var(--navy-soft); }
.rpt-cip--e > i .rpt-i { width: 11px; height: 11px; stroke-width: 2.4; }
.rpt.s1 .rpt-cip--e { opacity: 1; scale: 1; }
.rpt-kap__c { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 10.5px; font-weight: 700; color: #a1a1aa; transition: color .3s var(--ui-ease) var(--d); }
.rpt-kap__c .rpt-i { width: 13px; height: 13px; }
.rpt-kap__ct { display: inline; }
.rpt.s1 .rpt-kap__c { color: var(--rpt-z7); }
.rpt-gap { height: var(--rpt-barh); }
.rpt-out { display: grid; margin-top: var(--rpt-gp); }
.rpt-out > * { grid-area: 1 / 1; min-width: 0; }

/* önizleme iskeleti */
.rpt-prev { padding: 12px 14px; border-radius: 14px; border: 1px dashed #d4d4d8; background: rgba(255, 255, 255, .72); transition: opacity .25s var(--ui-ease) var(--d); }
.rpt.s7 .rpt-prev { opacity: 0; }
.rpt-prev__h { display: flex; align-items: flex-start; gap: 10px; }
.rpt-prev__h > span:last-child { min-width: 0; line-height: 14px; }
.rpt-prev__h b { display: block; font-size: 12px; font-weight: 800; line-height: 16px; color: #18181b; }
.rpt-prev__h small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--rpt-z6); }
.rpt-ti { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
.rpt-ti .rpt-i { width: 16px; height: 16px; }
.rpt-ti--b { background: var(--rpt-tint); color: var(--navy); box-shadow: inset 0 0 0 1px var(--rpt-tint-line); }
.rpt-ti--g { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1px #a7f3d0; }
.rpt-skel { margin-top: 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--rpt-z2); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.rpt-skel__h, .rpt-skel__r { display: grid; grid-template-columns: 150px 120px 120px 120px; }
.rpt-skel__h { height: 26px; align-items: center; background: #fafafa; }
.rpt-skel__h > span { padding: 0 10px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rpt-z6); white-space: nowrap; overflow: hidden; }
.rpt-skel__r { height: 24px; align-items: center; border-top: 1px solid #f4f4f5; }
.rpt-skel__r > i { display: block; height: 8px; margin: 0 10px; border-radius: 4px; background: #e4e4e7; max-width: calc(100% - 20px); }
/* önizleme başlığı seçili kolonlarla canlı (onizlemeCiz) */
.rpt-sk4, .rpt-sk5 { opacity: 0; transition: opacity .3s var(--ui-ease) var(--d); }
.rpt.s4 .rpt-sk4, .rpt.s5 .rpt-sk5 { opacity: 1; }

/* sonuç */
.rpt-res { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(24, 24, 27, .06), 0 1px 2px rgba(16, 37, 64, .05); opacity: 0; translate: 0 8px;
  transition: opacity .3s var(--ui-ease) calc(var(--d) + .3s), translate .45s var(--ui-ease) calc(var(--d) + .3s); }
.rpt.s7 .rpt-res { opacity: 1; translate: 0 0; }
.rpt-res__h { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; }
.rpt-res__t { flex: 1; min-width: 0; line-height: 15px; }
.rpt-res__t b { display: block; font-size: 12.5px; font-weight: 800; color: #18181b; }
.rpt-res__t small { display: block; font-size: 10.5px; font-weight: 600; color: var(--rpt-z6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-res__n { flex: none; display: flex; align-items: baseline; gap: 5px; font-size: 11px; font-weight: 700; color: var(--rpt-z6); }
.rpt-n { counter-reset: rpt-n var(--rpt-n); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 26px; color: #18181b; font-variant-numeric: tabular-nums;
  transition: --rpt-n .8s var(--ui-ease) calc(var(--d) + .45s); }
.rpt-n::after { content: counter(rpt-n); }
.rpt.s7 .rpt-n { --rpt-n: 19; }
.rpt-tb { --rpt-tc: 30px 136px 108px minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid #f1f1f3; }
.rpt-tr { display: grid; grid-template-columns: var(--rpt-tc); align-items: center; height: 25px; border-bottom: 1px solid #f4f4f5; font-size: 11px; font-weight: 500; color: var(--rpt-z7); font-variant-numeric: tabular-nums;
  opacity: 0; translate: 0 5px; transition: opacity .3s var(--ui-ease) calc(var(--d) + .5s + var(--i) * 50ms), translate .35s var(--ui-ease) calc(var(--d) + .5s + var(--i) * 50ms); }
.rpt.s7 .rpt-tr { opacity: 1; translate: 0 0; }
.rpt-tr > span { min-width: 0; height: 100%; display: flex; align-items: center; gap: 4px; padding: 0 10px; white-space: nowrap; }
.rpt-tr--h { height: 26px; background: #fafafa; border-bottom-color: var(--rpt-z2); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rpt-z6); opacity: 1; translate: 0 0; }
.rpt-tr--h .rpt-i { width: 11px; height: 11px; stroke-width: 2.4; }
.rpt-tr--h .rpt-ud { opacity: .5; }
.rpt-tr--h .rpt-ozel { text-transform: none; letter-spacing: 0; }
.rpt-srt { color: var(--navy-soft); }
.rpt-tr .rpt-c0 { justify-content: flex-end; padding: 0 6px 0 0; font-size: 10.5px; color: #a1a1aa; }
.rpt-tr--h .rpt-c0 { justify-content: center; padding: 0; color: var(--rpt-z6); }
.rpt-tr .rpt-c1 { box-shadow: inset -1px 0 0 var(--rpt-z2); font-weight: 700; color: #18181b; }
.rpt-tr--h .rpt-c1 { font-weight: 800; color: var(--navy-soft); }

/* ── eylem çubuğu ── */
.rpt-bar { position: absolute; z-index: 5; top: calc(var(--rpt-hs) + var(--rpt-kh)); left: 0; right: 0; display: flex; align-items: center; gap: 10px; height: var(--rpt-barh); padding: 0 12px;
  border-radius: 0 0 14px 14px; background: #fff; border-top: 1px solid var(--rpt-z2);
  box-shadow: 0 1px 2px rgba(16, 37, 64, .05), inset 1px 0 0 rgba(24, 24, 27, .07), inset -1px 0 0 rgba(24, 24, 27, .07), inset 0 -1px 0 rgba(24, 24, 27, .07);
  transition: translate .55s var(--ui-ease) var(--d), border-radius .3s var(--ui-ease) var(--d), box-shadow .35s var(--ui-ease) var(--d), border-color .3s var(--ui-ease) var(--d); }
/* kurulumda yapışkan: ekranın altında yüzen kart (.sr-yuzen) */
.rpt.s2 .rpt-bar { border-radius: 14px; border-top-color: transparent;
  translate: 0 calc(var(--rpt-h) - var(--rpt-phh) - var(--rpt-bh) - var(--rpt-barh) - 10px - var(--rpt-hs) - var(--rpt-kh));
  box-shadow: 0 18px 40px -16px rgba(24, 24, 27, .4), 0 0 0 1px rgba(24, 24, 27, .08); }
.rpt.s6 .rpt-bar { border-radius: 0 0 14px 14px; border-top-color: var(--rpt-z2); translate: 0 calc(-1 * var(--rpt-hs));
  box-shadow: 0 1px 2px rgba(16, 37, 64, .05), inset 1px 0 0 rgba(24, 24, 27, .07), inset -1px 0 0 rgba(24, 24, 27, .07), inset 0 -1px 0 rgba(24, 24, 27, .07); }
.rpt-st { flex: 1; font-size: 10.5px; font-weight: 600; color: var(--rpt-z6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-dl { flex: none; display: inline-flex; gap: 1px; margin-left: auto; padding: 2px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--rpt-z2), 0 1px 2px rgba(24, 24, 27, .05); }
.rpt-dl__b { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--rpt-z7); white-space: nowrap; }
.rpt-dl__b .rpt-i { width: 13px; height: 13px; }
.rpt-dl__b--x { color: #047857; }
.rpt-dl__t { display: inline; }
.rpt-dl__b--p { transition: background-color .2s var(--ui-ease) .3s; }
.rpt.s8 .rpt-dl__b--p { background: #f4f4f5; animation: rpt-push .3s var(--ui-ease) .36s; }
.rpt-dl__b .rpt-hit { right: 16px; bottom: 9px; }
.rpt.s8:not(.s9) .rpt-hit--yaz .ui-cur { animation: rpt-cur-out 1s var(--ui-ease) both; }
.rpt.s8:not(.s9) .rpt-hit--yaz .rpt-rip { animation: rpt-rip .55s ease-out .38s both; }
.rpt-go { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 10px; font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, var(--navy-soft), var(--navy));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 8px 16px -8px rgba(20, 61, 107, .7); }
.rpt-go .rpt-i { width: 13px; height: 13px; }
.rpt-go .rpt-hit { right: 28px; bottom: 10px; }
.rpt.s7 .rpt-go { animation: rpt-push .3s var(--ui-ease) .34s; }
.rpt.s7:not(.s8) .rpt-hit--go .ui-cur { animation: rpt-cur-out .85s var(--ui-ease) both; }
.rpt.s7:not(.s8) .rpt-hit--go .rpt-rip { animation: rpt-rip .5s ease-out .34s both; }

/* ── çıktı önizleme katmanı (print-overlay) ── */
.rpt-ov { position: absolute; z-index: 20; inset: 0; border-radius: inherit; background: rgba(24, 24, 27, 0); pointer-events: none;
  transition: background-color .35s var(--ui-ease) calc(var(--d) + .2s); }
.rpt.s8 .rpt-ov { background: rgba(24, 24, 27, .6); }
.rpt-dlg { position: absolute; inset: 14px; display: flex; flex-direction: column; border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(24, 24, 27, .08), 0 24px 48px -16px rgba(0, 0, 0, .45);
  opacity: 0; translate: 0 14px; scale: .985; transition: opacity .3s var(--ui-ease) calc(var(--d) + .3s), translate .45s var(--ui-ease) calc(var(--d) + .3s), scale .45s var(--ui-ease) calc(var(--d) + .3s); }
.rpt.s8 .rpt-dlg { opacity: 1; translate: 0 0; scale: 1; }
.rpt-dlg__h { flex: none; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--rpt-z2); }
.rpt-dlg__h > b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: #18181b; white-space: nowrap; }
.rpt-pb { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; background: var(--navy-soft); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 64, .2); }
.rpt-pb .rpt-i { width: 13px; height: 13px; }
.rpt-nb { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: 9px; box-shadow: inset 0 0 0 2px #d4d4d8; color: var(--rpt-z7); font-size: 11px; font-weight: 700; white-space: nowrap; }
.rpt-nb .rpt-i { width: 13px; height: 13px; }
.rpt-xb { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--rpt-z6); }
.rpt-xb .rpt-i { width: 16px; height: 16px; }
.rpt-dlg__b { position: relative; flex: 1; min-height: 0; background: #f4f4f5; overflow: hidden; }
.rpt-dlg__b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(rgba(244, 244, 245, 0), #f4f4f5); pointer-events: none; }
.rpt-load { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--rpt-z6); opacity: 0; transition: opacity .25s var(--ui-ease) .5s; }
.rpt.s8:not(.s9) .rpt-load { opacity: 1; }
.rpt.s9 .rpt-load { transition-delay: 0s; }
/* çıktı sayfası (A4 yatay, kabuksuz tablo — yazdırma yazı tipi) */
.rpt-pg { position: absolute; top: 12px; left: 12px; right: 12px; bottom: -60px; padding: 16px 18px; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  font-family: "DejaVu Sans", Arial, sans-serif; color: #111; opacity: 0; translate: 0 10px; transition: opacity .35s var(--ui-ease) .15s, translate .5s var(--ui-ease) .15s; }
.rpt.s9 .rpt-pg { opacity: 1; translate: 0 0; }
.rpt-pg__t { display: block; font-size: 15px; font-weight: 700; line-height: 18px; }
.rpt-pg__a { display: block; margin: 2px 0 10px; font-size: 10px; line-height: 13px; color: #555; font-variant-numeric: tabular-nums; }
.rpt-pt { border-top: 1px solid #bbb; border-left: 1px solid #bbb; }
.rpt-pr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr); font-size: 10.5px; line-height: 13px; }
.rpt-pr > span { min-width: 0; padding: 4px 6px; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; font-variant-numeric: tabular-nums; }
.rpt-pr--h > span { background: #f4f4f5; font-weight: 700; }
.rpt-dlg__f { flex: none; padding: 7px 14px; border-top: 1px solid var(--rpt-z2); font-size: 10px; line-height: 14px; color: var(--rpt-z6); }
.rpt-dlg__f b { font-weight: 800; color: var(--rpt-z7); }

/* ── DAR KAPLAR ── */
@container (max-width: 660px) {
  .rpt-kap__c .rpt-i { display: none; }
  .rpt-kap__l { letter-spacing: .06em; }
}
@container (max-width: 620px) {
  .rpt-win { --rpt-kimh: 158px; }
}
@container (max-width: 600px) {
  .rpt-win { --rpt-phh: 40px; --rpt-hs: 182px; --rpt-kh: 70px; --rpt-chh: 53px; --rpt-kimh: 230px; }
  .rpt-ph__d { display: none; }
  .rpt-flds { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .rpt-fld--kayit { grid-column: span 2; }
  .rpt-kap { align-content: center; row-gap: 6px; }
  .rpt-st, .rpt-find__n { display: none; }
  .rpt-tb { --rpt-tc: 26px 124px 108px minmax(0, 1fr) minmax(0, 1.3fr); }
  /* iskelet: dört kolon sığar; uygulamadaki sağ solma (sr-iskelet maskesi) yalnız kenarda */
  .rpt-skel { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); }
  .rpt-skel__h, .rpt-skel__r { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 530px) {
  /* tablo sığmaz: uygulamada yatay kayar (overflow-x-auto) — sahne sona kaydırılmış çizer: Ad Soyad yapışık (sticky left-0
     border-r), # ve Öğrenci No onun altına kaymış; Veli (birincil) ve Veli Telefonu tam görünür */
  .rpt-tb { --rpt-now: 108px; --rpt-sk: calc(26px + var(--rpt-now)); overflow: hidden; }
  .rpt-tr { width: calc(100% + var(--rpt-sk)); margin-left: calc(-1 * var(--rpt-sk)); }
  .rpt-tr .rpt-c1 { position: relative; z-index: 1; left: var(--rpt-now); background: #fff; }
  .rpt-tr--h .rpt-c1 { background: #fafafa; }
}
@container (max-width: 470px) {
  .rpt-win { --rpt-phh: 36px; --rpt-bh: 86px; --rpt-gp: 12px; }
  .rpt-ph { padding: 10px 14px 0; }
  .rpt-ph__t b { font-size: 15px; }
  .rpt-band { padding: 11px 12px 0; }
  .rpt-bico, .rpt-sab__t { display: none; }
  .rpt-sab { padding: 0 7px; gap: 4px; }
  .rpt-bt b { font-size: 13.5px; }
  .rpt-bt small { font-size: 10px; }
  .rpt-tabs { gap: 2px; }
  .rpt-tab { flex: 1; justify-content: center; gap: 5px; padding: 0 6px; font-size: 11px; }
  .rpt-pS { padding: 12px 12px 0; }
  .rpt-lbl { font-size: 10px; gap: 4px; }
  .rpt-lbl .rpt-i { width: 11px; height: 11px; }
  .rpt-sel { padding: 0 6px 0 8px; font-size: 10.5px; }
  .rpt-adv__t small { display: none; }
  .rpt-pK { padding: 12px 12px 0; }
  .rpt-srch { flex: 1; width: auto; }
  .rpt-kap { padding: 0 12px; }
  .rpt-kap__c .rpt-i { display: block; }
  .rpt-dl__t { display: none; }
  .rpt-kap__c { padding: 0 2px; }
  .rpt-bar { gap: 8px; padding: 0 10px; }
  .rpt-dl__b { width: 30px; padding: 0; justify-content: center; }
  .rpt-dl__b .rpt-i { width: 14px; height: 14px; }
  .rpt-go { gap: 5px; padding: 0 11px; font-size: 11px; }
  .rpt-prev__h small { display: none; }
  .rpt-prev__h { align-items: center; }
  .rpt-res__h { padding: 0 12px; gap: 9px; }
  .rpt-res__d { display: none; }
  /* kaydırılmış tablo daha dar hücreyle: yapışık Ad Soyad + Veli (birincil) + Veli Telefonu 306 px'e sığar */
  .rpt-tb { --rpt-tc: 26px 90px 108px minmax(90px, 1fr) minmax(122px, 1.4fr); }
  .rpt-tr > span { padding: 0 6px; }
  .rpt-tr--h { letter-spacing: .02em; }
  /* iskelet: uygulamadaki gibi ilk iki kolon sığar, gerisi kabın dışında kalır */
  .rpt-skel { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .rpt-skel__h, .rpt-skel__r { grid-template-columns: 54% 46% 46% 46%; }
  .rpt-dlg { inset: 0; border-radius: 0; }
  .rpt-dlg__h { gap: 6px; padding: 0 8px 0 12px; }
  .rpt-nb { padding: 0; width: 30px; justify-content: center; }
  .rpt-nb > span { display: none; }
  .rpt-dlg__f { padding: 7px 12px; }
  .rpt-pg { left: 8px; right: 8px; top: 10px; padding: 12px 10px; }
  .rpt-pr { grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, 1.25fr) minmax(0, 1.35fr); font-size: 10px; }
  .rpt-pr > span { padding: 3px 4px; }
}
@container (max-width: 384px) {
  /* «Süzgeçleri temizle» sınıf çipinin yanına sığmaz (≤374 px ölçüldü; yazı tipi payı için 384): kendi satırında sağda durur —
     s0'da şerit iki satır (çip yer tutmaz), s1'de çip ikinci satıra gelir, temizle üçüncü satıra iner; şerit uzar, eylem
     çubuğu ve altı yumuşakça aşağı kayar */
  .rpt-win { transition: --rpt-kh .3s var(--ui-ease) var(--d); }
  .rpt.s1 .rpt-win { --rpt-kh: 96px; }
  .rpt-kap { align-content: flex-start; padding-top: 9px; }
  .rpt-kap__c { flex-basis: 100%; justify-content: flex-end; }
  .rpt-cip--e { max-width: 0; padding: 0; overflow: hidden;
    transition: opacity .25s var(--ui-ease) var(--d), scale .45s var(--rpt-spring) var(--d), max-width .3s var(--ui-ease) var(--d), padding .3s var(--ui-ease) var(--d); }
  .rpt.s1 .rpt-cip--e { max-width: 240px; padding: 0 2px 0 8px; }
}