/* SAHNE · VELİ UYGULAMASI: İKİ ÇOCUK, TEK UYGULAMA (includes/scenes/parent-app.php) — üç telefon, aynı velinin üç anı.
   Geniş kapta (≥ 640 px) üç telefon yan yana film şeridi; dar kapta kayan slayt (odaktaki telefon ortada, komşular kenarda).
   s1 «Can Kılınç» kartına dokunulur · s2 Can'ın ana ekranı yanar · s3 Ela'nın ödev bildirimi düşer · s4 bildirime dokunulur ·
   s5 uygulama Ela seçili açılır (şerit + üstteki «E») · s6 «Ödevler»: sekme sayaçları ileri sayar (Yapılacak 4 · Geciken 0 ·
   Teslim edilen 1), ödev kartları gelir.
   Odak: --k (0/1/2) — dar kapta şeridin kayması bundan HESAPLANIR; geniş kapta yalnız odaktaki telefon parlak. */
@property --pap-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.pap { container-type: inline-size; height: 468px; overflow: hidden; font-size: 11px; line-height: 1.3;
  --pap-bg: #f4f6fa; --pap-soft: #e8eef7; --pap-mut: #5b6475; --pap-spring: cubic-bezier(.34, 1.56, .64, 1); }
.pap .pap-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── sahne: telefon şeridi ── */
.pap-st { position: absolute; inset: 0; --pw: 224px; --g: 14px; --k: 0;
  /* dar kapta (kayan slayt) komşu telefonlar kenarda yumuşakça solar: kırpılmış değil, sıradaki slayt gibi okunur */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, #000 14%, #000 86%, rgba(0, 0, 0, .15) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, #000 14%, #000 86%, rgba(0, 0, 0, .15) 100%); }
.pap.s2 .pap-st { --k: 1; }
.pap.s5 .pap-st { --k: 2; }
.pap-row { position: absolute; top: 6px; left: 0; display: flex; gap: var(--g);
  translate: round(50cqw - var(--k) * (var(--pw) + var(--g)) - var(--pw) / 2, 1px) 0;
  transition: translate .8s cubic-bezier(.65, .05, .25, 1) .05s; }

/* telefon gövdesi: ince metal kenar, cam, yan düğmeler. Uzak gölge kısa: telefonun altı 450 px, gölge 468'de (kabın alt
   kenarı) zemine erir — kapta düz bir çizgiyle kesilmez */
.pap-ph { position: relative; flex: none; width: var(--pw); height: 440px; padding: 5px; border-radius: 34px;
  background: linear-gradient(150deg, #2a3c57 0%, #0e1a2b 34%, #0a1321 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px #3a4c66, 0 2px 4px rgba(11, 36, 64, .16), 0 12px 16px -10px rgba(11, 36, 64, .5);
  translate: 0 4px; transition: translate .6s var(--ui-ease) .05s; }
.pap-ph::before, .pap-ph::after { content: ""; position: absolute; width: 2px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #4a5d79, #22324a); }
.pap-ph::before { left: -2px; top: 96px; height: 26px; box-shadow: 0 36px 0 #2c3d56; }
.pap-ph::after { right: -2px; top: 124px; height: 46px; border-radius: 0 2px 2px 0; background: linear-gradient(270deg, #4a5d79, #22324a); }
/* odaktaki telefon 4 px yükselir (tam piksel: 2× ekranda keskin), ötekilerin ekranında açık perde */
.pap:not(.s2) .pap-ph--1, .pap.s2:not(.s5) .pap-ph--2, .pap.s5 .pap-ph--3 { translate: 0 0; }
.pap-scr { position: relative; height: 100%; border-radius: 29px; overflow: hidden; background: var(--pap-bg); isolation: isolate; }
/* odakta olmayan telefon: ekranın üstünde açık bir perde (gövde koyu kalır; kapalı cam perdenin üstünde) */
.pap-scr::after { content: ""; position: absolute; z-index: 8; inset: 0; background: rgba(228, 233, 241, .55); pointer-events: none; transition: opacity .5s var(--ui-ease) .05s; }
.pap:not(.s2) .pap-ph--1 .pap-scr::after, .pap.s2:not(.s5) .pap-ph--2 .pap-scr::after, .pap.s5 .pap-ph--3 .pap-scr::after { opacity: 0; }
/* dar kapta (kayan slayt) komşu telefon kenarda yarım görünür: perde tam örter (yarı saydamda kesik sözcükler okunuyordu,
   .86'da da) — komşu, durum çubuğu duran boş cam olarak sıradaki slayt gibi durur */
@container (max-width: 639px) { .pap .pap-scr::after { background: #ecf0f6; } }

/* durum çubuğu (saat · ada · sinyal, wi-fi, pil) + ev çubuğu */
.pap-sb { position: absolute; z-index: 10; inset: 0 0 auto; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 1px 14px 0 21px; color: #0b1526; pointer-events: none; }
.pap-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pap-isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 16px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.pap-sbi { display: flex; align-items: center; gap: 3px; }
.pap-sbi .pap-i { width: 11px; height: 11px; stroke-width: 2.4; }
.pap-sbi .pap-bat { width: 16px; height: 12px; }
.pap-hi { position: absolute; z-index: 7; left: 50%; bottom: 5px; width: 76px; height: 4px; margin-left: -38px; border-radius: 4px; background: #0f172a; }

/* kapalı ekran (anı henüz gelmedi): koyu cam + çapraz yansıma; yanınca söner */
.pap-off { position: absolute; z-index: 11; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 34%), linear-gradient(170deg, #0c121c, #04070c);
  transition: opacity .5s var(--ui-ease) .3s; }
.pap.s2 .pap-ph--2 .pap-off, .pap.s5 .pap-ph--3 .pap-off { opacity: 0; }

.pap svg.pap-logo { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 2px 6px -1px rgba(16, 37, 64, .45); }

/* ── 1 · çocuk seçim kapısı (portal/child-select) ── */
.pap-gate { position: absolute; left: 0; right: 0; top: 60px; display: flex; flex-direction: column; align-items: flex-start; padding: 0 12px; }
.pap-gate svg.pap-logo { width: 30px; height: 30px; }
.pap-gate__h { margin-top: 12px; font-size: 15.5px; font-weight: 800; line-height: 19px; letter-spacing: -.02em; color: #0f172a; text-wrap: balance; }
.pap-gate__p { margin-top: 5px; font-size: 10.5px; font-weight: 500; line-height: 14.5px; color: #525c6e; text-wrap: pretty; }
.pap-kc { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 8px; padding: 8px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .04), 0 6px 14px -10px rgba(16, 37, 64, .25), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: box-shadow .3s var(--ui-ease), background-color .3s var(--ui-ease); }
.pap-kc--can { margin-top: 14px; }
.pap-kc__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--navy-soft); font-size: 15px; font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .1), 0 1px 2px rgba(16, 37, 64, .05); }
.pap-kc__t { flex: 1; min-width: 0; }
.pap-kc__t b { display: block; font-size: 12.5px; font-weight: 800; line-height: 16px; letter-spacing: -.01em; color: #0f172a; }
.pap-kc__t small { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--pap-mut); }
.pap .pap-kc__ch { width: 14px; height: 14px; color: #6b7280; }
.pap-out { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 10.5px; font-weight: 700; color: #4b5563; }
.pap-out u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pap-out .pap-i { width: 13px; height: 13px; }
/* dokunulan kart: uygulamanın basılı/üzerinde kenarı (child-select.php:78), kurum laciverti */
.pap.s1 .pap-kc--can { background: #f7f9fd; box-shadow: 0 0 0 1.5px var(--navy-soft), 0 6px 16px -8px rgba(29, 79, 134, .45), inset 0 1px 0 rgba(255, 255, 255, .6); transition-delay: .5s; }
.pap.s1:not(.s2) .pap-kc--can { animation: pap-press .36s var(--ui-ease) .46s; }

/* ── parmak (dokunuş) ── */
.pap-touch { position: absolute; z-index: 8; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .82), rgba(226, 233, 243, .58) 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; }
.pap-touch i { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(29, 79, 134, .55); opacity: 0; }
.pap-kc--can .pap-touch { left: 62%; top: 50%; }
.pap.s1:not(.s2) .pap-kc--can .pap-touch { animation: pap-tap 1.05s var(--ui-ease) .08s both; }
.pap.s1:not(.s2) .pap-kc--can .pap-touch i { animation: pap-wave .55s ease-out .5s both; }
@keyframes pap-tap { 0% { opacity: 0; transform: translate(12px, 14px); } 32% { opacity: 1; transform: none; scale: 1; } 44% { scale: .76; } 58% { scale: 1; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(6px, 8px); } }
@keyframes pap-wave { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: 2.3; } }
@keyframes pap-press { 50% { scale: .975; } }
@keyframes pap-pop { 0% { scale: .82; } 60% { scale: 1.08; } 100% { scale: 1; } }

/* ── uygulama üst şeridi ── */
.pap-hd { position: absolute; z-index: 3; left: 0; right: 0; top: 26px; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 11px; }
.pap .pap-hd__bk { width: 16px; height: 16px; color: #111827; stroke-width: 2.2; }
.pap-hd__sp { flex: 1; }
.pap-hd__bell { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: #3a4456; }
.pap-hd__bell .pap-i { width: 15px; height: 15px; }
.pap-hd__bell::after { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #ff5449; box-shadow: 0 0 0 1.5px var(--pap-bg); }
.pap-hd__av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 11.5px; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .1), 0 1px 2px rgba(16, 37, 64, .06); }

/* çocuk şeridi */
.pap-kids { display: flex; gap: 5px; }
.pap-kid { position: relative; display: flex; align-items: center; gap: 5px; height: 27px; padding: 0 11px 0 3px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; color: #4b5565;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 1px 2px rgba(16, 37, 64, .05); }
.pap-kid i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--navy-soft); background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .09); }
.pap-kid--on { background: linear-gradient(180deg, #1d4f86, #143d6b); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(16, 37, 64, .8); }
.pap-kid--on i { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.pap-kid--on::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(29, 79, 134, .5); opacity: 0; pointer-events: none; }

/* kademeli belirme: yanan ekranın içeriği */
.pap-rise, .pap-rise2 { opacity: 0; translate: 0 8px;
  transition: opacity .35s var(--ui-ease) calc(var(--rd, 0s) + var(--i) * 90ms), translate .55s var(--pap-spring) calc(var(--rd, 0s) + var(--i) * 90ms); }
.pap.s2 .pap-ph--2 .pap-rise { opacity: 1; translate: 0 0; --rd: .45s; }
.pap.s5 .pap-ph--3 .pap-rise { opacity: 1; translate: 0 0; --rd: .42s; }
.pap.s6 .pap-ph--3 .pap-rise2 { opacity: 1; translate: 0 0; --rd: .08s; }

/* ── 2 · Can'ın ana ekranı ── */
.pap-home { position: absolute; left: 0; right: 0; top: 66px; padding: 0 6px; }
.pap-id { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 14px; background: linear-gradient(120deg, #e7edf6 0%, #eef1f8 100%);
  box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .7); }
.pap-id__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--navy-soft); font-size: 15px; font-weight: 800;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px -2px rgba(16, 37, 64, .35); }
.pap-id__t { min-width: 0; }
.pap-id__t small { display: block; font-size: 10px; font-weight: 600; line-height: 12px; color: var(--pap-mut); }
.pap-id__t b { display: block; font-size: 13.5px; font-weight: 800; line-height: 17px; letter-spacing: -.015em; color: #0f172a; white-space: nowrap; }
.pap-id__ch { display: flex; gap: 3px; margin-top: 2px; }
.pap-id__ch em { height: 16px; padding: 0 5px; border-radius: 5px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(16, 37, 64, .05);
  font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; color: #4b5565; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pap-home .pap-kids { margin-top: 7px; }
.pap-sec { margin-top: 8px; padding: 9px 2px 10px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .04), 0 10px 20px -16px rgba(16, 37, 64, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pap-sec__h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 9px; }
.pap-sec__h b { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; color: #0f172a; }
.pap-sec__h small { font-size: 10px; font-weight: 700; color: var(--pap-mut); }
/* ~190 px ekranda 3 sütun: en uzun tek sözcük «Öğretmenler» (10 px) sütuna sığsın diye ızgara kartın iç boşluğuna 1 px taşar */
.pap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 9px; margin: 9px -1px 0; }
.pap-mod { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center;
  opacity: 0; scale: .86; transition: opacity .3s var(--ui-ease) calc(.8s + var(--k) * 45ms), scale .5s var(--pap-spring) calc(.8s + var(--k) * 45ms); }
.pap.s2 .pap-mod { opacity: 1; scale: 1; }
.pap-mod__i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--pap-soft); color: var(--navy-soft); box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .06); }
.pap-mod__i .pap-i { width: 17px; height: 17px; stroke-width: 1.9; }
.pap-mod small { display: block; max-width: 100%; font-size: 10px; font-weight: 600; line-height: 12px; letter-spacing: -.03em; color: #4b5565; }

/* alt sekmeler (Ana Sayfa · Akış · Fotoğraf · Mesaj · Profil) */
.pap-tab { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; padding: 6px 6px 0;
  background: #fff; box-shadow: inset 0 1px 0 rgba(16, 37, 64, .07), 0 -8px 16px -12px rgba(16, 37, 64, .25); }
.pap-tab--home { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
.pap-tab > span { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 38px; border-radius: 11px; color: #5b6475; }
.pap-tab .pap-i { width: 16px; height: 16px; }
.pap-tab b { font-size: 10px; font-weight: 800; line-height: 12px; white-space: nowrap; }
.pap-tab--home .pap-tab__on { padding: 0 8px; }
.pap-tab--home .pap-tab__on { background: linear-gradient(180deg, #1d4f86, #143d6b); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(16, 37, 64, .8); }
.pap-tab:not(.pap-tab--home) .pap-tab__on b { display: none; }
.pap-tab__m em { position: absolute; top: 3px; left: calc(50% + 3px); min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #ba1a1a; color: #fff;
  font-style: normal; font-size: 10px; font-weight: 800; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1.5px #fff; }

/* Ela'nın ödev bildirimi (iOS afişi; uygulama öndeyken de gelir) */
.pap-nt { position: absolute; z-index: 5; left: 6px; right: 6px; top: 28px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 8px 9px 9px 8px; border-radius: 15px;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 2px 4px rgba(16, 37, 64, .08), 0 18px 32px -12px rgba(16, 37, 64, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10px; font-weight: 500; line-height: 13px; color: var(--ui-text-2); font-variant-numeric: tabular-nums;
  opacity: 0; translate: 0 -130%; transition: opacity .3s var(--ui-ease), translate .7s cubic-bezier(.34, 1.4, .64, 1); }
.pap.s3 .pap-nt { opacity: 1; translate: 0 0; transition-delay: .15s; }
.pap-nt img { display: block; width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.pap-nt__x { min-width: 0; }
/* afiş kimlik kartının üstünü örter: ad satırı (ç'nin kuyruğu dahil) tümüyle altında kalır, «8-A · No 149» yongaları altında
   tam görünür — yarım harf görünmesin; içerik dikeyde ortalanır */
.pap-nt { min-height: 76px; align-content: center; }
/* başlık tam genişlikte akar, «şimdi» sağ üstte (float) — dar telefonda başlık dört satıra kırılmasın */
.pap-nt__h { display: block; margin-bottom: 2px; }
.pap-nt__h b { font-size: 10.5px; font-weight: 800; line-height: 13px; letter-spacing: -.005em; color: var(--ui-text); }
.pap-nt__h em { float: right; margin-left: 6px; font-style: normal; font-size: 10px; line-height: 13px; color: var(--ui-muted); }
.pap-nt .pap-touch { left: 44%; top: 52%; }
.pap.s4:not(.s5) .pap-nt .pap-touch { animation: pap-tap .95s var(--ui-ease) .05s both; }
.pap.s4:not(.s5) .pap-nt .pap-touch i { animation: pap-wave .55s ease-out .43s both; }
.pap.s4:not(.s5) .pap-nt { animation: pap-press .36s var(--ui-ease) .4s; }

/* ── 3 · Ela seçili «Ödevler» (portal/homework) ── */
.pap-hw { position: absolute; left: 0; right: 0; top: 66px; padding: 0 8px; }
.pap.s5 .pap-ph--3 .pap-hd__av { animation: pap-pop .5s var(--pap-spring) .62s both; }
.pap.s5 .pap-ph--3 .pap-kid--e { animation: pap-pop .5s var(--pap-spring) .72s both; }
.pap.s5 .pap-ph--3 .pap-kid--e::after { animation: pap-halo .7s ease-out .8s both; }
@keyframes pap-halo { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.18 1.4; } }
.pap-ttl { margin-top: 9px; padding: 0 2px; }
.pap-ttl b { display: block; font-size: 15.5px; font-weight: 800; line-height: 19px; letter-spacing: -.02em; color: #0f172a; }
.pap-ttl small { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--pap-mut); text-wrap: balance; }
/* sekme sayaçları: uygulamada yatay kayan şerit, kaydırma çubuğu gizli (_shell.php:139/145) — ray ve solma yok.
   SADELEŞTİRME: sahnedeki telefon ~200 px olduğundan dördüncü sekme «Değerlendirilen 24» çizilmedi (uygulamada 390 px
   ekranda dördü de sığar). Üç sekme satırı eşit büyüyerek doldurur (_ui.php:345 flex-1), hiçbiri camda kesilmez. */
.pap-seg { display: flex; gap: 4px; margin-top: 8px; padding: 1px 1px 2px; }
.pap-sg { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 38px; padding: 0 4px; border-radius: 11px; background: #fff; color: #4b5565;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .05); }
.pap-sg small { font-size: 10px; font-weight: 600; line-height: 12px; letter-spacing: -.02em; white-space: nowrap; }
.pap-sg b { margin-top: 1px; font-size: 13.5px; font-weight: 800; line-height: 16px; color: #1f2937; }
.pap-sg--on { background: linear-gradient(180deg, #1d4f86, #143d6b); color: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -5px rgba(20, 61, 107, .6); }
.pap-sg--on b { color: #fff; }
.pap-n { counter-reset: pap-n var(--pap-n); font-variant-numeric: tabular-nums; transition: --pap-n .8s var(--ui-ease) .35s; }
.pap-n::after { content: counter(pap-n); }
/* hedef sayı satır içi --pap-to (27.10.2026 15:21 ölçümü) */
.pap.s6 .pap-n { --pap-n: var(--pap-to); }
/* ödev kartı */
.pap-card { display: block; margin-top: 8px; padding: 9px 10px; border-radius: 15px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .04), 0 10px 20px -16px rgba(16, 37, 64, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pap-card__h { display: flex; align-items: center; gap: 7px; }
.pap-card__i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; }
.pap-card__i .pap-i { width: 14px; height: 14px; }
/* pDersIkon + pSoft (_ui.php:457–483): Matematik «indigo», Türkçe «mint»; «Bekliyor» rozeti «sky» */
.pap-card__i--mat { background: #e0e0ff; color: #3e4277; }
.pap-card__i--tr { background: #b7eaff; color: #004e60; }
.pap-card__h b { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; letter-spacing: -.01em; color: #0f172a; white-space: nowrap; }
.pap-card__h em { flex: none; height: 17px; padding: 0 7px; border-radius: 999px; background: #dce9ff; color: #1e2256; font-style: normal; font-size: 10px; font-weight: 700; line-height: 17px; }
.pap-card__t { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 800; line-height: 15px; letter-spacing: -.01em; color: #0f172a; }
.pap-card__o { display: block; font-size: 10px; font-weight: 600; line-height: 13px; color: var(--pap-mut); }
.pap-card__d { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #525c6e; }
.pap-card__f { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #eceef3; font-size: 10.5px; font-weight: 800; color: var(--navy-soft); }
.pap-card__f .pap-i { width: 12px; height: 12px; stroke-width: 2.3; }

/* ══ GENİŞ KAP: üç telefon yan yana (film şeridi), kayma yok — 640 px'ten dar kapta telefon ~190 px'e inerdi (ölçüldü) ══ */
@container (min-width: 640px) {
  /* 640'ta telefon 204 px (eskiden 201): ödev şeridinin üç sekmesi camın içinde kalsın diye kenar payı 3 px'e iner */
  .pap-st { -webkit-mask-image: none; mask-image: none; --g: 10px; --pw: round(down, min(212px, (100cqw - 26px) / 3), 1px); }
  .pap-row { translate: round(down, (100cqw - 3 * var(--pw) - 2 * var(--g)) / 2, 1px) 0; }
  /* bildirim başlığı bu genişlikte üç satıra kırılır, afiş uzar: «8-A · No 149» yongalarını da tam örter (yarım harf görünmesin) */
  .pap-nt { min-height: 96px; }
}

/* round() desteklemeyen tarayıcı: yuvarlamasız aynı hesap (yalnız yarım piksel keskinliği kaybolur) */
@supports not (width: round(1px, 1px)) {
  .pap-row { translate: calc(50cqw - var(--k) * (var(--pw) + var(--g)) - var(--pw) / 2) 0; }
  @container (min-width: 640px) {
    .pap-st { --pw: min(212px, (100cqw - 26px) / 3); }
    .pap-row { translate: calc((100cqw - 3 * var(--pw) - 2 * var(--g)) / 2) 0; }
  }
}