/* SAHNE · OKUL ÖNCESİ (includes/scenes/preschool.php) — öğretmenin telefonu + velinin telefonu. Adımlar:
   s1 Ahmet A. → «Yemedi» · s2 liste kaydırılır · s3 Mete U. → «Yemedi» · s4 Kaydet → «Kaydediliyor…» → sınıf ekranı + geri alma ·
   s5 velinin kilit ekranına «yemek bilgisi» (10 dk sonra) · s6 «Günü kapat» ekranı → onay yaprağı · s7 «Günü kapat» → şerit +
   veliye «Günün özeti» · s8 bildirime dokunulur → «Günlük» · s9 gün kaydırılır (İkindi · Yemedi … İlaç · Verildi … Gün kapandı).
   Ölçüler sabit: liste satırı 76 px (izinli 40 px), listenin başı 106 px → s2 kaydırması 334 px (Demir G.'nin satır başı).
   Veli telefonu her kapta 252 px: «Günlük» satırlarının yeri sabit → s9 kaydırması 262 px (Öğle yemeği satırı üstte; ölçüldü).
   Öğretmen telefonu her kapta 330 px (dar kapta en çok %100): Sınıfım'daki «Ahmet A.» satırının alt metni s4'te 2, s7'de («Not var»
   ile) 3 satır; satır sekme çubuğunun üstünde biter (ölçüldü: 393 / 397 < 400). */
.pre { container-type: inline-size; --d: 0s; --H: 456px; --pv: 336px;
  --pre-spring: cubic-bezier(.34, 1.56, .64, 1); --pre-scroll: cubic-bezier(.32, .12, .2, 1);
  --pre-card: rgba(191, 201, 195, .4);
  --oo-bg: #fff8f1; --oo-ink: #2b2118; --oo-var: #5c4d40; --oo-acc: #b93f2a; }
.pre.s1 { --d: .42s; } .pre.s2 { --d: 0s; } .pre.s3 { --d: .42s; } .pre.s4 { --d: .4s; } .pre.s6 { --d: .1s; }
.pre svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: aynı hücrede üst üste; on-A-B = A. adımdan B. adıma kadar görünür */
.pre-x { display: inline-grid; min-width: 0; }
.pre-x > * { grid-area: 1 / 1; min-width: 0; }
.pre [class^="on-"], .pre [class*=" on-"] { opacity: 0; transform: translateY(3px); transition: opacity .28s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.pre:not(.s1) .on-0-1, .pre.s1:not(.s3) .on-1-3, .pre.s3 .on-3, .pre:not(.s6) .on-0-6, .pre.s6 .on-6,
.pre:not(.s5) .on-0-5, .pre.s5:not(.s6) .on-5-6 { opacity: 1; transform: none; }
.pre.s5 .pre-lk [class^="on-"], .pre.s5 .pre-lk [class*=" on-"] { transition-delay: .2s; }
.pre.s6 .pre-lk [class^="on-"], .pre.s6 .pre-lk [class*=" on-"] { transition-delay: .1s; }

/* ── sahne: iki telefon ── */
.pre-stage { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 22px; height: calc(var(--H) + 20px); }
.pre-ph { position: relative; flex: none; height: var(--H); padding: 6px; border-radius: 34px; background: linear-gradient(160deg, #22344d, var(--navy-night) 40%, #0a1626);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 4px rgba(11, 22, 38, .2), 0 24px 44px -24px rgba(11, 36, 64, .7); }
.pre-ph--t { width: 330px; transition: opacity .45s var(--ui-ease), scale .5s var(--ui-ease), translate .5s var(--ui-ease); }
.pre-ph--v { width: 252px; transition: opacity .45s var(--ui-ease), translate .6s cubic-bezier(.3, 1.2, .5, 1); }
.pre-sc { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #fafafa; isolation: isolate; }

/* durum çubuğu */
.pre-sb { position: absolute; z-index: 9; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 20px; pointer-events: none; }
.pre-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pre-sb--d { color: #0b1526; } .pre-sb--l { justify-content: flex-end; color: #fff; }
.pre-isl { position: absolute; left: 50%; top: 5px; width: 56px; height: 15px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.pre-sb--l::before { content: ""; position: absolute; left: 50%; top: 5px; width: 56px; height: 15px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.pre-sbi { display: flex; align-items: center; gap: 3px; }
.pre-sbi svg { width: 11px; height: 11px; stroke-width: 2.4; }
.pre-sbi .pre-bat { width: 16px; height: 12px; }

/* ══ ÖĞRETMENİN TELEFONU ══ */
.pre-v { position: absolute; inset: 0; z-index: 1; background: #fafafa; transition: opacity .32s var(--ui-ease), scale .45s var(--ui-ease); }
.pre-v2, .pre-v3, .pre-v4 { opacity: 0; scale: 1.02; }
.pre-hd { position: absolute; z-index: 3; inset: 0 0 auto; height: 68px; display: flex; align-items: center; gap: 7px; padding: 24px 9px 0;
  background: linear-gradient(180deg, #dfe7f2 0%, #edf1f7 72%, #f3f5f9 100%); box-shadow: inset 0 -1px 0 #d9e0ea; }
.pre-ib { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .82); color: #273246;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .08), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pre-ib svg { width: 15px; height: 15px; }
.pre-ib--bell::after { content: ""; position: absolute; top: 4px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #fff; }
.pre-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px -2px rgba(16, 37, 64, .55); }
.pre-tt { flex: 1; min-width: 0; line-height: 1.2; }
.pre-tt b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: -.015em; color: #18181b; white-space: nowrap; }
.pre-tt span { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; color: #52525b; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* yemek ekranı: kayan içerik */
.pre-pg { position: absolute; left: 0; right: 0; top: 68px; bottom: 44px; overflow: hidden; }
.pre-scr { padding: 10px 10px 0; translate: 0 0; transition: translate .8s var(--pre-scroll) .1s; }
.pre-og { display: flex; gap: 5px; height: 30px; }
.pre-og > * { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 9px; border-radius: 10px; background: #fff; color: #3f3f46; font-size: 11px; font-weight: 800; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 1px rgba(16, 37, 64, .03); }
.pre-og svg { width: 11px; height: 11px; stroke-width: 2.6; color: #047857; }
.pre-og > b { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(16, 37, 64, .7); }
.pre-mn { display: flex; flex-direction: column; justify-content: center; height: 50px; margin-top: 8px; padding: 0 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px var(--pre-card), 0 2px 8px -2px rgba(46, 107, 86, .05), 0 6px 16px -4px rgba(216, 106, 56, .06), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pre-mn small { font-size: 10px; font-weight: 800; line-height: 13px; letter-spacing: .05em; text-transform: uppercase; color: #71717a; }
.pre-mn b { margin-top: 3px; font-size: 12px; font-weight: 700; line-height: 15px; color: #18181b; white-space: nowrap; }
.pre-li { margin-top: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--pre-card), 0 2px 8px -2px rgba(46, 107, 86, .05), 0 6px 16px -4px rgba(216, 106, 56, .06); }
.pre-r { position: relative; display: flex; flex-direction: column; height: 76px; padding: 8px 10px; box-shadow: inset 0 -1px 0 #f4f4f5; }
.pre-r--yok { height: 40px; }
.pre-r__h { display: flex; align-items: center; gap: 8px; height: 24px; }
.pre-r__h i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #fffbeb; color: #92400e; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: -.02em; }
.pre-r--yok .pre-r__h i { background: #f4f4f5; color: #3f3f46; }
.pre-r__h b { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: #18181b; white-space: nowrap; }
.pre-r__h em { flex: none; height: 18px; padding: 0 7px; border-radius: 999px; background: #f4f4f5; color: #3f3f46; font-style: normal; font-size: 10px; font-weight: 700; line-height: 18px; letter-spacing: .02em; white-space: nowrap; }
.pre-r__b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; height: 30px; margin-top: 6px; }
.pre-r__b > span { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 3px; border-radius: 9px; background: #fff; color: #52525b; text-align: center;
  font-size: 10px; font-weight: 800; line-height: 11px; box-shadow: inset 0 0 0 1px #e4e4e7;
  transition: background-color .22s var(--ui-ease) var(--d), color .22s var(--ui-ease) var(--d), box-shadow .22s var(--ui-ease) var(--d); }
/* seçili (care.php :184–189): Yedi emerald · Yemedi red */
.pre-r__b > .pre-ch--ate { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px #059669; }
.pre-thumb { position: absolute; right: 2px; top: 4px; width: 3px; height: 62px; border-radius: 2px; background: rgba(16, 37, 64, .34); opacity: 0; transition: translate .8s var(--pre-scroll) .1s; }

/* yapışkan eylem çubuğu (oEylemCubugu) */
.pre-ec { position: absolute; z-index: 2; left: 0; right: 0; bottom: 44px; height: 84px; padding: 8px 10px 0; background: rgba(250, 250, 250, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 #e4e4e7; }
.pre-ec__r { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 30px; }
.pre-oz { flex: 1 1 auto; font-size: 10px; font-weight: 700; line-height: 13px; color: #52525b; font-variant-numeric: tabular-nums; }
.pre-oz > * { align-self: center; }
.pre-ec__r .pre-u { flex: none; font-size: 10px; font-weight: 800; color: #3f3f46; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.pre-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 11px; background: var(--navy); color: #fff; font-weight: 800; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 64, .22), 0 8px 16px -10px rgba(16, 37, 64, .6); }
.pre-btn svg { width: 13px; height: 13px; stroke-width: 2.6; }
.pre-btn--kay { height: 34px; margin-top: 6px; font-size: 12px; }

/* sınıf ekranı (Sınıfım) ve «Günü kapat» */
.pre-cl { position: absolute; left: 0; right: 0; top: 68px; padding: 8px; }
.pre-cl > * { opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease), translate .5s var(--pre-spring); }
.pre-fl { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; border-radius: 11px; background: #ecfdf5; color: #047857; font-size: 10.5px; font-weight: 600; line-height: 14px; }
.pre-fl svg { flex: none; width: 13px; height: 13px; margin-top: .5px; stroke-width: 2.3; }
.pre-un { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 5px 5px 10px; border-radius: 11px; background: #f4f4f5; color: #3f3f46; font-size: 10.5px; font-weight: 700; line-height: 14px; }
.pre-un span { flex: 1; min-width: 0; }
.pre-un b { flex: none; display: grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: #fff; color: #27272a; font-size: 10.5px; font-weight: 800; box-shadow: 0 1px 2px rgba(16, 37, 64, .08); }
.pre-yk { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; padding: 8px 11px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px var(--pre-card), 0 2px 8px -2px rgba(46, 107, 86, .05), 0 6px 16px -4px rgba(216, 106, 56, .06); }
.pre-rz { flex: none; height: 18px; padding: 0 7px; border-radius: 999px; background: #f4f4f5; color: #3f3f46; font-size: 10px; font-weight: 700; line-height: 18px; letter-spacing: .02em; white-space: nowrap; }
.pre-rz--ok { background: #ecfdf5; color: #047857; } .pre-rz--sky { background: #f0f9ff; color: #0369a1; }
.pre-yk .pre-u { margin-left: auto; font-size: 10px; font-weight: 800; line-height: 18px; color: #3f3f46; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.pre-kr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.pre-ka { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 50px; border-radius: 14px; background: #fff; font-size: 11px; font-weight: 800; color: #18181b;
  box-shadow: 0 0 0 1px var(--pre-card), 0 2px 8px -2px rgba(46, 107, 86, .05), 0 6px 16px -4px rgba(216, 106, 56, .06), inset 0 1px 0 rgba(255, 255, 255, .6); }
.pre-ka__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.pre-ka__i svg { width: 15px; height: 15px; }
.pre-ka__i--am { background: #fffbeb; color: #92400e; } .pre-ka__i--pk { background: #fdf2f8; color: #be185d; }
.pre-ka__i--vi { background: #f5f3ff; color: #6d28d9; } .pre-ka__i--sk { background: #f0f9ff; color: #0369a1; }
.pre-ls { margin-top: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--pre-card), 0 2px 8px -2px rgba(46, 107, 86, .05); }
.pre-sr { display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; }
.pre-sr__i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #fffbeb; color: #92400e; }
.pre-sr__i svg { width: 15px; height: 15px; }
.pre-sr__t { flex: 1; min-width: 0; }
.pre-sr__t b { display: block; font-size: 12px; font-weight: 600; line-height: 15px; color: #18181b; }
/* rozet + alt metin: flex-wrap → uzun metin rozetin altına iner; metin sarar, en çok 3 satır (gerçekte line-clamp-2) */
.pre-sr__m { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin-top: 3px; }
.pre-sr__m > em { flex: none; height: 16px; padding: 0 6px; border-radius: 999px; background: #ecfdf5; color: #047857; font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; }
.pre-sr__m > span { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: break-word;
  font-size: 10px; font-weight: 500; line-height: 13px; color: #52525b; }
.pre .pre-sr__c { flex: none; width: 13px; height: 13px; margin-top: 8px; color: #bfc9c3; }
.pre-gk { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--pre-card), 0 2px 8px -2px rgba(46, 107, 86, .05), 0 6px 16px -4px rgba(216, 106, 56, .06); }
.pre-gk b { display: block; font-size: 12.5px; font-weight: 800; line-height: 16px; color: #18181b; text-wrap: balance; }
.pre-gk span { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; line-height: 14px; color: #52525b; text-wrap: pretty; }
.pre-btn--gk { height: 38px; margin-top: 10px; font-size: 11.5px; }

/* alt sekmeler */
.pre-tab { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 44px; padding: 5px 2px 0;
  background: #fff; box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08), 0 -6px 14px -10px rgba(16, 37, 64, .2); }
.pre-tab > span { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #3f3f46; font-size: 10px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.pre-tab svg { width: 15px; height: 15px; color: #52525b; }

/* «Kaydediliyor…» katmanı */
.pre-busy { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 0 22px; background: rgba(24, 24, 27, .7); opacity: 0; pointer-events: none; }
.pre-busy__c { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 224px; padding: 15px 12px 14px; border-radius: 16px; background: #fff; text-align: center;
  box-shadow: inset 0 0 0 2px #e4e4e7, 0 24px 40px -16px rgba(0, 0, 0, .55); }
.pre-busy__c b { margin-top: 9px; font-size: 13px; font-weight: 800; color: #18181b; }
.pre-busy__c span { margin-top: 3px; font-size: 10px; font-weight: 700; line-height: 13px; color: #52525b; text-wrap: balance; }
.pre-spin { width: 28px; height: 28px; color: var(--navy-soft); stroke-width: 3; animation: pre-don .8s linear infinite; }
.pre-spin circle { opacity: .22; }
@keyframes pre-don { to { rotate: 360deg; } }
@keyframes pre-busy { 0% { opacity: 0; } 14%, 82% { opacity: 1; } 100% { opacity: 0; } }

/* onay yaprağı (SweetAlert2 → mobile.css alttan yaprak) */
.pre-sh { position: absolute; inset: 0; z-index: 8; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .28s var(--ui-ease); }
.pre-sh__p { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 8px 14px 12px; border-radius: 20px 20px 0 0; background: #fff; text-align: center;
  box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .45); translate: 0 105%; transition: translate .34s cubic-bezier(.32, .72, 0, 1); }
.pre-sh__p::before { content: ""; width: 34px; height: 4px; margin-bottom: 10px; border-radius: 999px; background: #d4d4d8; }
.pre-sh__q { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 3px #87adbd; color: #87adbd; font-style: normal; font-size: 20px; font-weight: 600; line-height: 1; }
.pre-sh__p > b { margin-top: 7px; font-size: 13.5px; font-weight: 700; color: #18181b; }
.pre-sh__p > span:not([class]) { margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 14px; color: #545454; text-wrap: balance; }
.pre-sh__ok, .pre-sh__no { position: relative; display: grid; place-items: center; width: 100%; height: 32px; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 700; }
.pre-sh__ok { margin-top: 10px; background: #dc2626; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.pre-sh__no { margin-top: 5px; background: #71717a; }

/* parmak dokunuşu ve kaydırma */
.pre-tap { position: absolute; z-index: 5; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .75), rgba(226, 233, 243, .5) 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); }
.pre-tap i { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(16, 37, 64, .28); opacity: 0; }
@keyframes pre-tap { 0% { opacity: 0; transform: translate(10px, 14px); scale: 1.1; } 28% { opacity: 1; transform: none; scale: 1; } 42% { scale: .76; } 58% { scale: 1; opacity: 1; } 100% { opacity: 0; transform: translate(6px, 8px); } }
@keyframes pre-ring { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: 2.3; } }
@keyframes pre-push { 50% { scale: .96; filter: brightness(.88); } }
@keyframes pre-pop { 0% { scale: 1; } 45% { scale: 1.07; } 100% { scale: 1; } }
.pre-swipe { position: absolute; z-index: 6; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .75), rgba(226, 233, 243, .5) 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); }
.pre-swipe--t { left: 62%; translate: 0 290px; }
@keyframes pre-surukle-t { 0% { opacity: 0; translate: 0 290px; } 14% { opacity: 1; translate: 0 290px; } 78% { opacity: 1; translate: 0 140px; } 100% { opacity: 0; translate: 0 128px; } }

/* ══ VELİNİN TELEFONU ══ */
.pre-sc--v { background: #0b2440; }
.pre-lk { position: absolute; z-index: 0; inset: 0; color: #fff; isolation: isolate; transition: opacity .4s var(--ui-ease), scale .55s var(--ui-ease);
  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(77, 140, 214, .45), rgba(77, 140, 214, 0) 60%),
              linear-gradient(165deg, #0b2440 0%, var(--navy) 55%, var(--navy-soft) 100%); }
.pre-lk__c { position: absolute; left: 0; right: 0; top: 32px; display: flex; flex-direction: column; align-items: center; }
.pre-lk__c svg { width: 12px; height: 12px; stroke-width: 2.2; opacity: .9; }
.pre-lk__c b { margin-top: 3px; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pre-lk__c b > * { justify-self: center; }
.pre-lk__c small { margin-top: 5px; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .86); }
.pre-lk__b { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; justify-content: space-between; }
.pre-lk__b span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pre-lk__b svg { width: 14px; height: 14px; }
.pre-lk__h { position: absolute; left: 50%; bottom: 7px; width: 84px; height: 4px; margin-left: -42px; border-radius: 2px; background: rgba(255, 255, 255, .85); }
/* bildirim yığını: en yenisi üstte; yeni gelen yerini açarak (satır 0fr → 1fr) iner */
.pre-nl { position: absolute; z-index: 2; left: 7px; right: 7px; top: 118px; display: flex; flex-direction: column; }
.pre-nw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ui-ease); }
.pre-nw > div { min-height: 0; overflow: hidden; margin: 0 -3px; padding: 0 3px; }
.pre-nw--il { grid-template-rows: 1fr; }
.pre-nt { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin: 1px 0 6px; padding: 8px 9px 9px 8px; border-radius: 15px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 1px 3px rgba(4, 14, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10px; font-weight: 500; line-height: 13px; color: #3d4a5c; text-align: left; transition: opacity .3s var(--ui-ease), translate .55s var(--pre-spring), scale .4s var(--ui-ease); }
.pre-nw--ym .pre-nt, .pre-nw--oz .pre-nt { opacity: 0; translate: 0 -10px; scale: .96; }
.pre-nt img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.pre-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.pre-nt__h b { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 800; line-height: 13px; color: #172238; letter-spacing: -.005em; }
.pre-nt__h em { flex: none; font-style: normal; font-size: 10px; color: #6a7486; font-variant-numeric: tabular-nums; }
.pre-nt__h em > * { justify-self: end; }
.pre-nt__l { display: block; }
.pre-tag { position: absolute; z-index: 8; left: 50%; top: calc(100% + 2px); display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 9px 0 7px; border-radius: 999px; translate: -50% 0;
  background: var(--sun); color: #2a1c00; font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(16, 37, 64, .45);
  opacity: 0; scale: .7; transition: opacity .3s var(--ui-ease), scale .45s var(--pre-spring); }
.pre-tag svg { width: 11px; height: 11px; stroke-width: 2.4; }

/* veli uygulaması: Günlük (sıcak pastel — OO_TEMA) */
.pre-app { position: absolute; z-index: 1; inset: 0; background: var(--oo-bg); opacity: 0; scale: 1.04; transition: opacity .4s var(--ui-ease), scale .55s var(--ui-ease); }
.pre-phd { position: absolute; z-index: 3; left: 0; right: 0; top: 24px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--oo-bg); }
.pre-pb { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--oo-ink); }
.pre-pb svg { width: 16px; height: 16px; }
.pre-pb--bell { position: relative; margin-left: auto; }
.pre-pb--bell::after { content: ""; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 1.5px var(--oo-bg); }
.pre .pre-logo { flex: none; width: 28px; height: 28px; border-radius: 50%; stroke: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 2px 5px -1px rgba(16, 37, 64, .4); }
.pre-pav { flex: none; 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 1.5px #ece3d8, 0 2px 6px -3px rgba(43, 33, 24, .3); }
.pre-ppg { position: absolute; left: 0; right: 0; top: 64px; bottom: 44px; overflow: hidden; }
.pre-ppg::before, .pre-ppg::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(var(--oo-bg), rgba(255, 248, 241, 0)); opacity: 0; transition: opacity .3s var(--ui-ease) .5s; }
.pre-ppg::after { top: auto; bottom: 0; background: linear-gradient(rgba(255, 248, 241, 0), var(--oo-bg)); opacity: 1; }
.pre-pscr { padding: 6px 12px 12px; translate: 0 0; transition: translate .9s var(--pre-scroll) .15s; }
.pre-pt b { display: block; font-size: 17px; font-weight: 800; line-height: 21px; letter-spacing: -.02em; color: var(--oo-ink); }
.pre-pt span { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; line-height: 13px; color: var(--oo-var); }
.pre-dg { display: flex; gap: 5px; margin-top: 9px; padding-bottom: 4px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.pre-dg > span { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 38px; border-radius: 11px; background: #fff; color: var(--oo-var);
  box-shadow: 0 0 0 1px rgba(43, 33, 24, .07), 0 2px 5px -3px rgba(43, 33, 24, .2); }
.pre-dg small { font-size: 10px; font-weight: 600; line-height: 12px; }
.pre-dg b { font-size: 13px; font-weight: 800; line-height: 16px; font-variant-numeric: tabular-nums; }
.pre-dg > .pre-dg__on { background: var(--oo-acc); color: #fff; box-shadow: 0 4px 10px -4px rgba(185, 63, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .16); }
.pre-gc { margin-top: 8px; padding: 11px 11px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #f1ede6, 0 6px 18px -6px rgba(43, 33, 24, .1); }
.pre-gc__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.pre-gc__h small { display: block; font-size: 10px; font-weight: 700; line-height: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--oo-var); }
.pre-gc__h b { display: block; margin-top: 1px; font-size: 15px; font-weight: 800; line-height: 19px; letter-spacing: -.015em; color: var(--oo-ink); }
.pre-gc__h em { flex: none; height: 20px; padding: 0 9px; border-radius: 999px; background: #ddf5ec; color: #0f6b50; font-style: normal; font-size: 10px; font-weight: 700; line-height: 20px; }
.pre-tl { position: relative; padding-left: 30px; }
.pre-tl::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 8px; width: 2px; border-radius: 1px; background: #f1ede6; }
.pre-tl__r { position: relative; }
.pre-tl__r + .pre-tl__r { margin-top: 9px; }
.pre-tl__r b { display: block; font-size: 11px; font-weight: 700; line-height: 14px; color: var(--oo-ink); }
.pre-tl__r > span { display: block; margin-top: 1px; font-size: 10px; font-weight: 500; line-height: 13px; color: var(--oo-var); }
.pre-tl__d { position: absolute; left: -30px; top: -2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; }
.pre-tl__d svg { width: 11px; height: 11px; stroke-width: 2.2; }
.pre-tl__d--nn { background: #ddf5ec; color: #0f6b50; } .pre-tl__d--gn { background: #fff1c7; color: #8a4b00; } .pre-tl__d--mr { background: #ffe4e0; color: #a3321f; } .pre-tl__d--ts { background: #f1ede6; color: #57534e; }
.pre-app .pre-pt, .pre-app .pre-dg, .pre-app .pre-gc__h, .pre-tl__r { opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease), translate .45s var(--ui-ease); }
.pre-ptab { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, .9fr)) minmax(0, 1.1fr) minmax(0, .9fr); height: 44px; padding: 5px 2px 0; background: #fff;
  box-shadow: inset 0 1px 0 rgba(43, 33, 24, .08), 0 -6px 14px -10px rgba(43, 33, 24, .2); }
.pre-ptab > span { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #3f3f46; font-size: 10px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.pre-ptab svg { width: 15px; height: 15px; }
.pre-swipe--v { left: 52%; translate: 0 330px; }
@keyframes pre-surukle-v { 0% { opacity: 0; translate: 0 330px; } 14% { opacity: 1; translate: 0 330px; } 80% { opacity: 1; translate: 0 150px; } 100% { opacity: 0; translate: 0 138px; } }

/* ══ ADIMLAR ══ */
/* s1: Ahmet A. → Yemedi */
.pre.s1:not(.s2) .pre-tap--ah { animation: pre-tap .95s var(--ui-ease) .05s both; }
.pre.s1:not(.s2) .pre-tap--ah i { animation: pre-ring .55s ease-out .4s both; }
.pre.s1 .pre-r--ah .pre-ch--ate, .pre.s3 .pre-r--me .pre-ch--ate { background: #fff; color: #52525b; box-shadow: inset 0 0 0 1px #e4e4e7; }
.pre.s1 .pre-r--ah .pre-ch--none, .pre.s3 .pre-r--me .pre-ch--none { background: #fef2f2; color: #991b1b; box-shadow: inset 0 0 0 1px #dc2626, 0 4px 10px -6px rgba(220, 38, 38, .55); animation: pre-pop .4s var(--ui-ease) .42s both; }
/* s2: liste kaydırılır (Demir G. üstte → Efe A. kilitli, Mete U. görünür) */
.pre.s2 .pre-scr { translate: 0 -334px; }
.pre.s2 .pre-thumb { translate: 0 64px; }
.pre.s2:not(.s3) .pre-thumb { animation: pre-cubuk 1s ease .05s both; }
@keyframes pre-cubuk { 0% { opacity: 0; } 18%, 72% { opacity: 1; } 100% { opacity: 0; } }
.pre.s2:not(.s3) .pre-swipe--t { animation: pre-surukle-t .85s cubic-bezier(.32, .12, .2, 1) .02s both; }
/* s3: Mete U. → Yemedi */
.pre.s3:not(.s4) .pre-tap--me { animation: pre-tap .95s var(--ui-ease) .05s both; }
.pre.s3:not(.s4) .pre-tap--me i { animation: pre-ring .55s ease-out .4s both; }
/* s4: Kaydet → «Kaydediliyor…» → Sınıfım + şerit */
.pre.s4:not(.s5) .pre-tap--kay { animation: pre-tap .95s var(--ui-ease) 0s both; }
.pre.s4:not(.s5) .pre-tap--kay i { animation: pre-ring .55s ease-out .35s both; }
.pre.s4:not(.s5) .pre-btn--kay { animation: pre-push .3s var(--ui-ease) .34s; }
.pre.s4:not(.s5) .pre-busy { animation: pre-busy .75s linear .48s both; }
.pre.s4 .pre-v1 { opacity: 0; transition-delay: 1.05s; }
.pre.s4:not(.s6) .pre-v2 { opacity: 1; scale: 1; transition-delay: 1.05s; }
.pre.s4:not(.s6) .pre-v2 .pre-cl > * { opacity: 1; translate: 0 0; transition-delay: calc(1.15s + var(--i) * 70ms); }
/* s5: 10 dk sonra velinin kilit ekranına «yemek bilgisi» */
.pre.s5 .pre-nw--ym { grid-template-rows: 1fr; transition-delay: .3s; }
.pre.s5 .pre-nw--ym .pre-nt { opacity: 1; translate: 0 0; scale: 1; transition-delay: .5s; }
.pre.s5 .pre-tag { opacity: 1; scale: 1; transition-delay: .7s; }
/* s6: 15:09 «Günü kapat» ekranı → düğme → onay yaprağı */
.pre.s6 .pre-v2 { transition-delay: 0s; }
.pre.s6 .pre-v3 { opacity: 1; scale: 1; transition-delay: .12s; }
.pre.s6 .pre-v3 .pre-cl > * { opacity: 1; translate: 0 0; transition-delay: .2s; }
.pre.s6:not(.s7) .pre-tap--gk { animation: pre-tap .9s var(--ui-ease) .38s both; }
.pre.s6:not(.s7) .pre-tap--gk i { animation: pre-ring .55s ease-out .72s both; }
.pre.s6:not(.s7) .pre-btn--gk { animation: pre-push .3s var(--ui-ease) .7s; }
.pre.s6:not(.s7) .pre-sh { opacity: 1; transition-delay: .82s; }
.pre.s6:not(.s7) .pre-sh__p { translate: 0 0; transition-delay: .82s; }
/* s7: «Günü kapat» → yaprak iner → Sınıfım «Gün kapatıldı»; veliye «Günün özeti» (anında) */
.pre.s7:not(.s8) .pre-tap--ok { animation: pre-tap .9s var(--ui-ease) 0s both; }
.pre.s7:not(.s8) .pre-tap--ok i { animation: pre-ring .55s ease-out .34s both; }
.pre.s7 .pre-sh { transition-delay: .5s; }
.pre.s7 .pre-sh__p { transition-delay: .48s; transition-duration: .22s; }
.pre.s7 .pre-v3 { opacity: 0; transition-delay: .72s; }
.pre.s7 .pre-v4 { opacity: 1; scale: 1; transition-delay: .72s; }
.pre.s7 .pre-v4 .pre-cl > * { opacity: 1; translate: 0 0; transition-delay: calc(.82s + var(--i) * 70ms); }
.pre.s7 .pre-nw--oz { grid-template-rows: 1fr; transition-delay: 1.05s; }
.pre.s7 .pre-nw--oz .pre-nt { opacity: 1; translate: 0 0; scale: 1; transition-delay: 1.25s; }
/* s8: bildirime dokunulur → veli uygulamasında «Günlük» */
.pre.s8 .pre-nw > div { overflow: visible; }
.pre.s8:not(.s9) .pre-tap--nt { animation: pre-tap .9s var(--ui-ease) .05s both; }
.pre.s8:not(.s9) .pre-tap--nt i { animation: pre-ring .55s ease-out .4s both; }
.pre.s8 .pre-nw--oz .pre-nt { scale: .97; transition-delay: .38s; }
.pre.s8 .pre-lk { opacity: 0; scale: 1.05; transition-delay: .62s; }
.pre.s8 .pre-app { opacity: 1; scale: 1; transition-delay: .62s; }
.pre.s8 .pre-app .pre-pt, .pre.s8 .pre-app .pre-dg, .pre.s8 .pre-app .pre-gc__h { opacity: 1; translate: 0 0; transition-delay: .8s; }
.pre.s8 .pre-tl__r { opacity: 1; translate: 0 0; transition-delay: calc(.9s + var(--i) * 60ms); }
/* s9: gün kaydırılır — İkindi · Yemedi, Uyku, İlaç · Verildi, Öğretmen notu, Gün kapandı */
.pre.s9 .pre-pscr { translate: 0 -262px; }
.pre.s9 .pre-ppg::before { opacity: 1; }
.pre.s9 .pre-swipe--v { animation: pre-surukle-v .95s cubic-bezier(.32, .12, .2, 1) .02s both; }

/* ══ DAR KAP: tek telefon; velinin telefonu üste biner ══ */
@container (max-width: 599px) {
  .pre-stage { display: block; }
  .pre-ph--t { width: min(330px, 100%); margin: 0 auto; }
  .pre-ph--v { position: absolute; z-index: 5; top: 0; right: max(0px, calc(50% - 165px)); opacity: 0; translate: 46px 0; }
  /* öğretmen tarafının sonucu önce okunur: s4 «İkindi kaydedildi» bayrağı ~1,5 s'de tam → s5'te telefon .25 s sonra biner;
     s7 «Gün kapatıldı» bayrağı ~1,1 s'de tam → veli telefonu 1,85 s'de gelir (bayrak ~0,75 s tam okunur); özet bildirimi
     2,85 s'de tam, adım 3,5 s → s8 dokunuşuna dek ~0,9 s okunur */
  .pre.s5:not(.s6) .pre-ph--v { opacity: 1; translate: 0 0; transition-delay: .25s; }
  .pre.s5:not(.s6) .pre-ph--t { opacity: .4; scale: .97; translate: -6px 0; transition-delay: .25s; }
  .pre.s5 .pre-nw--ym { transition-delay: .75s; }
  .pre.s5 .pre-nw--ym .pre-nt { transition-delay: .95s; }
  .pre.s7 .pre-ph--v { opacity: 1; translate: 0 0; transition-delay: 1.85s; }
  .pre.s7 .pre-ph--t { opacity: .4; scale: .97; translate: -6px 0; transition-delay: 1.85s; }
  .pre.s7 .pre-nw--oz { transition-delay: 2.15s; }
  .pre.s7 .pre-nw--oz .pre-nt { transition-delay: 2.3s; }
  .pre.s8:not(.s9) .pre-tap--nt { animation-delay: .25s; }
  .pre.s8:not(.s9) .pre-tap--nt i { animation-delay: .6s; }
  .pre.s8 .pre-nw--oz .pre-nt { transition-delay: .58s; }
  .pre.s8 .pre-lk, .pre.s8 .pre-app { transition-delay: .8s; }
}
@container (max-width: 359px) {
  .pre-ph--v { right: 0; }
}