/* SAHNE · KARNE: ÜRET → İNCELE → YAYINLA → VELİNİN TELEFONU (includes/scenes/report-card.php) — modül sayfası /modul/karne.
   s1 «Karneleri üret» → 19 taslak (ortalama ileri sayar, belge yongaları) · s2 Can Kılınç «İncele» → Karne detayı ·
   s3 «Tümünü yayınla (19)» → onay · s4 «Evet» → «19 karne yayınlandı.», durumlar «Yayında» · s5 velinin telefonuna bildirim ·
   s6 bildirime dokunulur · s7 veli uygulamasında karne (son adım tek başına sonuç). Yükseklik bütün adımlarda 456 px. */
@property --rpc-a { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --rpc-b { syntax: '<integer>'; inherits: false; initial-value: 0; }

.rpc { container-type: inline-size; position: relative; height: 456px;
  --rpc-fl: 38px; --rpc-cols: minmax(0, 1fr) 62px 100px 104px 62px 132px; --rpc-spring: cubic-bezier(.34, 1.56, .64, 1);
  --rpc-ok: #047857; --rpc-ok-ink: #065f46; }
.rpc-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rpc-x { display: grid; min-width: 0; }
.rpc-x > * { grid-area: 1 / 1; min-width: 0; }

/* ── imleç: .rpc-hit tıklama noktası; ok ucu tam orada, halka dalgası çevresinde ── */
.rpc-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.rpc-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.rpc-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 rpc-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 rpc-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 rpc-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes rpc-push { 50% { scale: .95; } }

/* ── pencere ── */
.rpc-win { position: absolute; inset: 0; display: flex; flex-direction: column; }
.rpc-top { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: #fff; box-shadow: inset 0 -1px 0 var(--ui-line); }
.rpc svg.rpc-logo { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(16, 37, 64, .1), 0 2px 4px -2px rgba(16, 37, 64, .4); }
.rpc-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; margin-left: 4px; font-size: 11.5px; line-height: 16px; white-space: nowrap; }
.rpc-crumb__m { font-weight: 600; color: var(--ui-muted); }
.rpc-crumb .rpc-crumb__s { width: 12px; height: 12px; color: #a3abb8; }
.rpc-crumb b { font-weight: 800; color: var(--ui-text); }
.rpc-year { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; border-radius: 7px; background: #fff; font-size: 11px; font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .04); }
.rpc-year .rpc-i { width: 13px; height: 13px; color: var(--ui-muted); }
.rpc-year .rpc-chev { width: 11px; height: 11px; }
.rpc-tic { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: #3d4a5c; }
.rpc-tic .rpc-i { width: 15px; height: 15px; }
.rpc-tic--b::after { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #fff; }
.rpc-me { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--ui-text); white-space: nowrap; }
.rpc-me i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--navy-soft); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }

.rpc-head { flex: none; padding: 12px 16px 0; }
.rpc-h1 { display: flex; align-items: center; gap: 7px; }
.rpc-h1 b { font-size: 18px; font-weight: 800; line-height: 22px; letter-spacing: -.02em; color: #0f172a; }
.rpc-h1 .rpc-help { width: 17px; height: 17px; color: var(--navy-soft); stroke-width: 1.9; }
.rpc-desc { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 15px; color: var(--ui-muted); white-space: nowrap; }

/* sayfa gövdesi: başarı şeridi gelince altındakiler aşağı kayar (sayfanın kendi akışı) */
.rpc-view { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 10px 14px 0; }
.rpc-view::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; }
.rpc-pg { translate: 0 calc(-1 * var(--rpc-fl)); transition: translate .5s var(--ui-ease) .55s; }
.rpc.s1:not(.s2) .rpc-pg { translate: 0 0; transition-delay: .62s; }
.rpc.s4 .rpc-pg { translate: 0 0; transition-delay: .7s; }

.rpc-flash { height: 30px; margin-bottom: 8px; align-items: center; padding: 0 12px; border-radius: 10px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0;
  font-size: 11.5px; font-weight: 700; line-height: 16px; color: var(--rpc-ok); white-space: nowrap; opacity: 0; transition: opacity .25s var(--ui-ease) .55s; }
.rpc.s1:not(.s2) .rpc-flash { opacity: 1; transition-delay: .62s; }
.rpc.s4 .rpc-flash { opacity: 1; transition-delay: .7s; }
.rpc-flash > * { opacity: 0; transition: opacity .25s var(--ui-ease) .62s; }
.rpc.s1:not(.s4) .rpc-fl1, .rpc.s4 .rpc-fl2 { opacity: 1; }

/* süzgeç: Sınıf · Sömestr · Karneleri üret · Tümünü yayınla */
.rpc-flt { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .04), inset 0 1px 0 rgba(255, 255, 255, .6); }
.rpc-flds { display: flex; gap: 8px; min-width: 0; }
.rpc-fld { display: block; min-width: 0; }
.rpc-lbl { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.rpc-sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 28px; min-width: 86px; padding: 0 7px 0 9px; border-radius: 7px; background: #fff;
  font-size: 11.5px; font-weight: 800; color: var(--ui-text); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); }
.rpc-sel .rpc-chev { width: 12px; height: 12px; color: var(--ui-muted); }
.rpc-acts { flex: none; display: flex; align-items: center; justify-content: flex-end; margin-left: auto; }
.rpc-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap; }
.rpc-btn .rpc-i { width: 13px; height: 13px; stroke-width: 2.2; }
.rpc-btn--gen { 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 6px 14px -8px rgba(20, 61, 107, .75); }
.rpc-btn--pub { background: var(--rpc-ok); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(4, 120, 87, .3), 0 6px 12px -8px rgba(4, 120, 87, .8); }
.rpc-pubw { display: block; max-width: 0; padding-left: 0; overflow: hidden; opacity: 0; transition: max-width .45s var(--ui-ease) .8s, padding .45s var(--ui-ease) .8s, opacity .25s var(--ui-ease) .82s; }
.rpc.s1:not(.s4) .rpc-pubw { max-width: 170px; padding-left: 8px; opacity: 1; }
.rpc.s2:not(.s4) .rpc-pubw { overflow: visible; }
.rpc-btn--gen .rpc-hit { right: 26px; bottom: 9px; }
.rpc.s1:not(.s2) .rpc-btn--gen { animation: rpc-push .3s var(--ui-ease) .38s; }
.rpc.s1:not(.s2) .rpc-hit--gen .ui-cur { animation: rpc-cur-out 1.05s var(--ui-ease) both; }
.rpc.s1:not(.s2) .rpc-hit--gen .rpc-rip { animation: rpc-rip .55s ease-out .4s both; }
.rpc-btn--pub .rpc-hit { right: 30px; bottom: 9px; }
.rpc.s3:not(.s4) .rpc-btn--pub { animation: rpc-push .3s var(--ui-ease) .38s; }
.rpc.s3:not(.s4) .rpc-hit--pub .ui-cur { animation: rpc-cur .85s var(--ui-ease) both; }
.rpc.s3:not(.s4) .rpc-hit--pub .rpc-rip { animation: rpc-rip .55s ease-out .4s both; }

/* ── iki görünüm aynı hücrede: A (sınıfın karneleri) · B («İncele»: tablo + Karne detayı) ── */
.rpc-stage { display: grid; margin-top: 10px; }
.rpc-la, .rpc-lb { grid-area: 1 / 1; min-width: 0; }
.rpc-la { position: relative; min-height: 420px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); transition: opacity .28s var(--ui-ease) .62s; }
.rpc.s2:not(.s4) .rpc-la { opacity: 0; transition-delay: .52s; }
.rpc-lb { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 10px; align-items: start; opacity: 0; translate: 0 6px;
  transition: opacity .3s var(--ui-ease) .55s, translate .4s var(--ui-ease) .55s; }
.rpc.s2:not(.s4) .rpc-lb { opacity: 1; translate: 0 0; transition-delay: .6s; }

.rpc-tr { display: grid; grid-template-columns: var(--rpc-cols); align-items: center; column-gap: 8px; height: 31px; padding: 0 10px; box-shadow: inset 0 1px 0 #eff1f4; line-height: 16px; font-variant-numeric: tabular-nums; }
.rpc-tr > * { min-width: 0; }
.rpc-tr--h { height: 26px; border-radius: 12px 12px 0 0; background: var(--ui-bg-2); box-shadow: inset 0 -1px 0 var(--ui-line); font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .05em; text-transform: uppercase; color: #5b6577; white-space: nowrap; }
.rpc-c { display: flex; align-items: center; justify-content: center; text-align: center; }
.rpc-ad { font-size: 12px; font-weight: 700; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpc-la .rpc-tr:not(.rpc-tr--h) { opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(.72s + var(--i) * 55ms), translate .4s var(--ui-ease) calc(.72s + var(--i) * 55ms); }
.rpc.s1 .rpc-la .rpc-tr { opacity: 1; translate: 0 0; }
.rpc-empty { position: absolute; left: 0; right: 0; top: 26px; padding: 26px 16px; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 16px; color: var(--ui-muted); transition: opacity .2s var(--ui-ease) .5s; }
.rpc.s1 .rpc-empty { opacity: 0; }

/* ortalama: hesaplanır gibi ileri sayar (karnenin gerçek değeri) */
.rpc-avg { counter-reset: rpc-a var(--rpc-a) rpc-b var(--rpc-b); font-size: 12px; font-weight: 800; color: #111827;
  transition: --rpc-a .7s var(--ui-ease) calc(.78s + var(--i) * 55ms), --rpc-b .7s var(--ui-ease) calc(.78s + var(--i) * 55ms); }
.rpc-avg::after { content: counter(rpc-a) "," counter(rpc-b, decimal-leading-zero); }
.rpc.s1 .rpc-avg { --rpc-a: var(--rpc-ia); --rpc-b: var(--rpc-ib); }
.rpc-bg { display: inline-block; padding: 1px 6px; border-radius: 5px; background: #fef3c7; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 15px; color: #a3480b; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .14); opacity: 0; scale: .6; transition: opacity .25s var(--ui-ease) calc(1.1s + var(--i) * 55ms), scale .45s var(--rpc-spring) calc(1.1s + var(--i) * 55ms); }
.rpc.s1 .rpc-bg { opacity: 1; scale: 1; }
.rpc-dash { font-style: normal; font-size: 11px; font-weight: 700; color: #a1a1aa; }
.rpc-dv { font-size: 10.5px; font-weight: 700; color: var(--ui-muted); white-space: nowrap; }
.rpc-st { display: grid; }
.rpc-st > span { grid-area: 1 / 1; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.rpc-st--d { background: #f1f2f4; color: #52525b; }
.rpc-st--y { background: #d1fae5; color: var(--rpc-ok); box-shadow: inset 0 0 0 1px rgba(4, 120, 87, .12); }
.rpc-la .rpc-st--d { transition: opacity .2s var(--ui-ease) calc(1s + var(--i) * 60ms); }
.rpc-la .rpc-st--y { opacity: 0; scale: .7; transition: opacity .25s var(--ui-ease) calc(1s + var(--i) * 60ms), scale .45s var(--rpc-spring) calc(1s + var(--i) * 60ms); }
.rpc.s4 .rpc-la .rpc-st--d { opacity: 0; }
.rpc.s4 .rpc-la .rpc-st--y { opacity: 1; scale: 1; }
.rpc-c-ac { display: flex; justify-content: flex-end; align-items: center; }
.rpc-b2, .rpc-b3 { position: relative; flex: none; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; line-height: 22px; white-space: nowrap; }
.rpc-b2 { margin-left: 5px; background: #fff; color: #27272a; box-shadow: inset 0 0 0 1px #d4d4d8, 0 1px 1px rgba(16, 37, 64, .04); }
.rpc-b2:first-child { margin-left: 0; }
.rpc-b3 { max-width: 60px; margin-left: 5px; overflow: hidden; background: var(--rpc-ok); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: max-width .4s var(--ui-ease) calc(.95s + var(--i) * 45ms), padding .4s var(--ui-ease) calc(.95s + var(--i) * 45ms), margin .4s var(--ui-ease) calc(.95s + var(--i) * 45ms), opacity .2s var(--ui-ease) calc(.95s + var(--i) * 45ms); }
.rpc.s4 .rpc-b3 { max-width: 0; padding: 0; margin-left: 0; opacity: 0; }
.rpc-b2 .rpc-hit { right: 12px; bottom: 6px; }
.rpc.s2:not(.s3) .rpc-hit--inc .ui-cur { animation: rpc-cur .85s var(--ui-ease) both; }
.rpc.s2:not(.s3) .rpc-hit--inc .rpc-rip { animation: rpc-rip .55s ease-out .4s both; }
.rpc.s2:not(.s3) .rpc-tr--can .rpc-b2:first-child { animation: rpc-push .3s var(--ui-ease) .38s; }

/* B · dar tablo (seçili satır) */
.rpc-tb { --rpc-cols: minmax(0, 1fr) 62px 62px; min-height: 420px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); }
.rpc-avg2 { font-size: 12px; font-weight: 800; color: #111827; }
.rpc-tr--sel { background: #eef4fb; box-shadow: inset 2px 0 0 var(--navy-soft), inset 0 1px 0 #e1e9f3; }
.rpc-tr--sel .rpc-ad { color: var(--navy); }
/* B · Karne detayı */
.rpc-det { min-height: 420px; padding: 11px 12px 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), 0 14px 28px -20px rgba(16, 37, 64, .35); }
.rpc-det__h { display: block; font-size: 14px; font-weight: 800; line-height: 18px; letter-spacing: -.01em; color: #0f172a; }
.rpc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.rpc-chips i { padding: 0 7px; border-radius: 5px; background: #f1f2f4; font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 18px; color: #52525b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpc-dl { display: grid; grid-template-columns: minmax(0, 1fr) 30px 46px 60px; align-items: center; column-gap: 6px; min-height: 21px; padding: 2px 0; box-shadow: inset 0 -1px 0 #f0f1f4; font-variant-numeric: tabular-nums; }
.rpc-dl > * { min-width: 0; }
.rpc-dl--h { min-height: 20px; margin-top: 9px; box-shadow: inset 0 -2px 0 #e4e4e7; font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .05em; text-transform: uppercase; color: #5b6577; }
.rpc-dl b { font-size: 11px; font-weight: 700; line-height: 13px; color: #1f2937; }
.rpc-dl__h { font-size: 11px; font-weight: 600; color: var(--ui-muted); }
.rpc-dl__p { font-size: 11px; font-weight: 800; color: #111827; }
.rpc-dl__n { font-size: 10.5px; font-weight: 700; color: #3f3f46; white-space: nowrap; }
.rpc-dl:not(.rpc-dl--h) { opacity: 0; translate: 0 4px; transition: opacity .25s var(--ui-ease) calc(.82s + var(--i) * 40ms), translate .35s var(--ui-ease) calc(.82s + var(--i) * 40ms); }
.rpc.s2 .rpc-dl { opacity: 1; translate: 0 0; }

/* ── onay penceresi (appConfirm: soru simgesi · «Emin misiniz?» · Vazgeç / Evet) ── */
.rpc-dim { position: absolute; z-index: 8; inset: 0; background: rgba(15, 23, 42, .42); opacity: 0; transition: opacity .22s var(--ui-ease) .55s; }
.rpc.s3:not(.s4) .rpc-dim { opacity: 1; transition-delay: .56s; }
.rpc-dlg { position: absolute; z-index: 9; inset: 0; width: 300px; height: 218px; margin: auto; display: flex; flex-direction: column; align-items: center; padding: 18px 20px 0; border-radius: 12px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 2px 4px rgba(16, 37, 64, .08), 0 28px 50px -18px rgba(11, 36, 64, .6);
  opacity: 0; scale: .9; transition: opacity .2s var(--ui-ease) .55s, scale .3s var(--ui-ease) .55s; }
.rpc.s3:not(.s4) .rpc-dlg { opacity: 1; scale: 1; transition: opacity .22s var(--ui-ease) .58s, scale .45s var(--rpc-spring) .58s; }
.rpc-dlg__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 3px #c9dae1; color: #87adbd; font-size: 26px; font-weight: 700; line-height: 1; }
.rpc-dlg__t { margin-top: 10px; font-size: 16px; font-weight: 800; line-height: 20px; color: #27272a; }
.rpc-dlg__m { margin-top: 6px; font-size: 11.5px; font-weight: 500; line-height: 16px; color: #545454; text-wrap: balance; }
.rpc-dlg__b { display: flex; gap: 8px; margin-top: 14px; }
.rpc-db { position: relative; height: 30px; padding: 0 14px; border-radius: 7px; font-size: 11.5px; font-weight: 700; line-height: 30px; color: #fff; }
.rpc-db--no { background: #71717a; }
.rpc-db--ok { background: #dc2626; box-shadow: 0 6px 12px -8px rgba(220, 38, 38, .8); }
.rpc-db .rpc-hit { right: 14px; bottom: 9px; }
.rpc.s4 .rpc-db--ok { animation: rpc-push .3s var(--ui-ease) .38s; }
.rpc.s4:not(.s5) .rpc-hit--ok .ui-cur { animation: rpc-cur .85s var(--ui-ease) both; }
.rpc.s4:not(.s5) .rpc-hit--ok .rpc-rip { animation: rpc-rip .55s ease-out .4s both; }

/* telefon gelince masaüstü hafifçe geri çekilir */
.rpc-shade { position: absolute; z-index: 10; inset: 0; background: rgba(15, 23, 42, .16); opacity: 0; pointer-events: none; transition: opacity .4s var(--ui-ease) .1s; }
.rpc.s5 .rpc-shade { opacity: 1; }

/* ── velinin telefonu ── */
.rpc-ph { position: absolute; z-index: 12; top: 8px; right: 18px; width: 244px; height: 440px; border-radius: 34px; overflow: hidden; background: #f5f6fb;
  box-shadow: 0 0 0 6px #0b1a2e, 0 0 0 7px #2b3b52, 0 30px 60px -18px rgba(11, 36, 64, .6), 0 12px 24px -12px rgba(11, 36, 64, .35);
  opacity: 0; translate: 26px 40px; transition: opacity .35s var(--ui-ease) .1s, translate .75s var(--rpc-spring) .1s; }
.rpc.s5 .rpc-ph { opacity: 1; translate: 0 0; }
.rpc-sb { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 2px 18px 0 22px; color: #0b1526; }
.rpc-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rpc-sb--w { color: #fff; }
.rpc-isl { position: absolute; left: 50%; top: 7px; width: 64px; height: 18px; margin-left: -32px; border-radius: 999px; background: #05070b; }
.rpc-sbi { display: flex; align-items: center; gap: 3px; }
.rpc-sbi .rpc-i { width: 12px; height: 12px; stroke-width: 2.4; }
.rpc-sbi .rpc-bat { width: 17px; height: 13px; }
.rpc-home { position: absolute; z-index: 5; left: 50%; bottom: 5px; width: 84px; height: 4px; margin-left: -42px; border-radius: 4px; background: #111827; }
.rpc-home--w { background: rgba(255, 255, 255, .85); }

/* kilit ekranı + bildirim */
.rpc-lock { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; color: #fff;
  background: radial-gradient(120% 70% at 85% 8%, rgba(255, 182, 39, .28), rgba(255, 182, 39, 0) 55%), radial-gradient(90% 60% at 0% 100%, rgba(29, 79, 134, .9), rgba(29, 79, 134, 0) 70%), linear-gradient(165deg, #1d4f86 0%, #143d6b 42%, #0b2440 100%);
  transition: opacity .35s var(--ui-ease), translate .5s var(--ui-ease); }
.rpc-lk__ic { margin-top: 38px; }
.rpc-lk__ic .rpc-i { width: 14px; height: 14px; stroke-width: 2.2; }
.rpc-lk__d { margin-top: 8px; font-size: 11.5px; font-weight: 700; line-height: 15px; color: rgba(255, 255, 255, .86); }
.rpc-lk__t { margin-top: 1px; font-size: 52px; font-weight: 700; line-height: 56px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rpc-nt { position: absolute; left: 9px; right: 9px; top: 160px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 9px 10px 11px 9px; border-radius: 16px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 2px 4px rgba(4, 12, 24, .12), 0 18px 34px -14px rgba(4, 12, 24, .6);
  font-size: 10.5px; font-weight: 500; line-height: 14px; color: var(--ui-text-2); text-align: left;
  opacity: 0; translate: 0 -14px; scale: .96; transition: opacity .3s var(--ui-ease) .75s, translate .6s var(--rpc-spring) .75s, scale .6s var(--rpc-spring) .75s; }
.rpc.s5 .rpc-nt { opacity: 1; translate: 0 0; scale: 1; }
.rpc-nt img { display: block; width: 24px; height: 24px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.rpc-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.rpc-nt__h b { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; color: var(--ui-text); }
.rpc-nt__h em { flex: none; font-style: normal; font-size: 10px; color: var(--ui-muted); }
.rpc-nt__tag { position: absolute; right: 10px; bottom: -10px; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px 0 6px; border-radius: 999px; background: var(--sun); color: var(--sun-ink, #2a1c00);
  font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16, 37, 64, .45);
  opacity: 0; scale: .7; transition: opacity .3s var(--ui-ease) 1.25s, scale .45s var(--rpc-spring) 1.25s; }
.rpc.s5 .rpc-nt__tag { opacity: 1; scale: 1; }
.rpc-nt__tag .rpc-i { width: 11px; height: 11px; stroke-width: 2.4; }
/* parmak: bildirime dokunur */
.rpc-touch { position: absolute; z-index: 2; left: 21px; top: 21px; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .8), rgba(226, 233, 243, .55) 70%);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .3), 0 2px 5px rgba(16, 37, 64, .25), 0 10px 18px -8px rgba(16, 37, 64, .45); opacity: 0; }
.rpc-touch i { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(29, 79, 134, .55); opacity: 0; }
.rpc.s6:not(.s7) .rpc-touch { animation: rpc-tap .7s var(--ui-ease) both; }
.rpc.s6:not(.s7) .rpc-touch i { animation: rpc-wave .5s ease-out .3s both; }
@keyframes rpc-tap { 0% { opacity: 0; transform: translate(10px, 12px); } 35% { opacity: 1; transform: none; scale: 1; } 52% { scale: .78; } 70%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes rpc-wave { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: 2.3; } }
.rpc.s6:not(.s7) .rpc-nt { animation: rpc-push .3s var(--ui-ease) .3s; }
.rpc.s7 .rpc-lock { opacity: 0; translate: 0 -24px; }

/* veli uygulaması: Karne (portal/report-card-detail) */
.rpc-app { position: absolute; inset: 0; z-index: 1; background: #f5f6fb; opacity: 0; scale: .96; transition: opacity .4s var(--ui-ease) .08s, scale .55s var(--ui-ease) .08s; }
.rpc.s7 .rpc-app { opacity: 1; scale: 1; }
.rpc-ah { position: absolute; top: 28px; left: 0; right: 0; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 12px; }
.rpc-ah .rpc-ah__bk { width: 17px; height: 17px; color: #111827; stroke-width: 2.2; }
.rpc svg.rpc-ah__lg { flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 2px 5px -1px rgba(16, 37, 64, .4); }
.rpc-ah__sp { flex: 1; }
.rpc-ah__bell { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: #27303f; }
.rpc-ah__bell .rpc-i { width: 16px; height: 16px; }
.rpc-ah__bell::after { content: ""; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #f5f6fb; }
.rpc-ah__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 1px var(--ui-line-2), 0 1px 2px rgba(16, 37, 64, .06); }
.rpc-kids { position: absolute; top: 72px; left: 12px; display: flex; gap: 6px; }
.rpc-kid { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 3px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; color: #1f2937; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); }
.rpc-kid i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--navy-soft); }
.rpc-kid--on { background: var(--navy-soft); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(16, 37, 64, .8); }
.rpc-kid--on i { background: rgba(255, 255, 255, .2); color: #fff; }
.rpc-body { position: absolute; top: 106px; left: 0; right: 0; bottom: 54px; padding: 0 12px; overflow: hidden; }
.rpc-body > * { opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease) calc(.3s + var(--i) * 90ms), translate .5s var(--rpc-spring) calc(.3s + var(--i) * 90ms); }
.rpc.s7 .rpc-body > * { opacity: 1; translate: 0 0; }
.rpc-ttl b { display: block; font-size: 15px; font-weight: 800; line-height: 19px; letter-spacing: -.015em; color: #0f172a; }
.rpc-ttl small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 700; line-height: 14px; color: var(--ui-muted); }
.rpc-sts { display: flex; gap: 6px; margin: 8px -12px 0 0; }
.rpc-stc { flex: none; display: block; width: 106px; padding: 8px 9px 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.rpc-stc__i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; }
.rpc-stc__i .rpc-i { width: 13px; height: 13px; }
.rpc-stc__i--n { background: var(--ui-primary-soft); color: var(--navy-soft); }
.rpc-stc__i--a { background: #fef3c7; color: #b45309; }
.rpc-stc__i--s { background: #e0f2fe; color: #0369a1; }
.rpc-stc b { display: block; margin-top: 5px; font-size: 16px; font-weight: 800; line-height: 19px; letter-spacing: -.02em; color: #0f172a; font-variant-numeric: tabular-nums; }
.rpc-stc small { display: block; margin-top: 1px; font-size: 10px; font-weight: 700; line-height: 12px; color: var(--ui-muted); }
.rpc-gpa { counter-reset: rpc-a var(--rpc-a) rpc-b var(--rpc-b); transition: --rpc-a .9s var(--ui-ease) .55s, --rpc-b .9s var(--ui-ease) .55s; }
.rpc-gpa::after { content: counter(rpc-a) "," counter(rpc-b, decimal-leading-zero); }
.rpc.s7 .rpc-gpa { --rpc-a: 88; --rpc-b: 15; }
.rpc-sec { display: block; margin-top: 11px; font-size: 13px; font-weight: 800; line-height: 16px; color: #0f172a; }
.rpc-list { margin-top: 6px; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .05); }
.rpc-li { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 11px 0 9px; box-shadow: inset 0 -1px 0 #f0f1f5; }
.rpc-li__i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ui-primary-soft); color: var(--navy-soft); }
.rpc-li__i .rpc-i { width: 13px; height: 13px; }
.rpc-li__t { flex: 1; min-width: 0; line-height: 13px; }
.rpc-li__t b { display: block; font-size: 11px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpc-li__t small { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; color: var(--ui-muted); }
.rpc-li em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 800; color: #0f172a; }
.rpc-tabs { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 54px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 5px 6px 0; background: #fff;
  box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08), 0 -8px 16px -12px rgba(16, 37, 64, .3); }
.rpc-tabs > span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; line-height: 12px; letter-spacing: -.02em; color: #374151; white-space: nowrap; }
.rpc-tabs .rpc-i { width: 16px; height: 16px; stroke-width: 1.9; }

/* ── DAR KAPLAR ── */
@container (max-width: 660px) {
  .rpc-win { --rpc-cols: minmax(0, 1fr) 62px 100px 62px 132px; }
  .rpc-c-dv { display: none; }
}
/* B: sağ panel 312 px sabit; ≤ 610 px'te dar tablonun ad sütunu en uzun ada (85 px) yetmez → tablo gizlenir, detay tek sütun */
@container (max-width: 610px) {
  .rpc-lb { grid-template-columns: minmax(0, 1fr); }
  .rpc-tb { display: none; }
}
@container (max-width: 560px) {
  .rpc-win { --rpc-cols: minmax(0, 1fr) 62px 98px 62px 46px; }
  .rpc-desc, .rpc-crumb__m, .rpc-crumb .rpc-crumb__s, .rpc-me span, .rpc-b2--pdf, .rpc-b3 { display: none; }
  .rpc-flt { flex-wrap: wrap; row-gap: 8px; }
  .rpc-acts { width: 100%; }
}
@container (max-width: 470px) {
  .rpc-win { --rpc-cols: minmax(0, 1fr) 60px 62px 46px; }
  .rpc-tr--h { letter-spacing: .03em; }
  .rpc-top { gap: 6px; padding: 0 10px; }
  .rpc-tic--s { display: none; }
  .rpc-head { padding: 10px 12px 0; }
  .rpc-view { padding: 8px 10px 0; }
  .rpc-c-bl { display: none; }
  .rpc-tr { padding: 0 8px; column-gap: 6px; }
  .rpc-ad { font-size: 11.5px; }
  .rpc-sel { min-width: 80px; }
  .rpc-flt { padding: 8px; }
  .rpc-det { padding: 10px 10px 0; }
  .rpc-dl { grid-template-columns: minmax(0, 1fr) 26px 42px 58px; column-gap: 5px; }
  .rpc-dlg { width: calc(100% - 24px); }
  .rpc-ph { right: auto; left: 50%; margin-left: -122px; }
}