/* SAHNE · PERSONEL İZNİ: TELEFONDAN BAŞVURU → MÜDÜR ONAYI → ETKİLENEN DERSLER (includes/scenes/staff.php) — modül sayfası sağ sütunu
   (kap ~640–680 px; telefonda ~330). Geniş kapta (≥600) yönetim penceresi tam genişlik, öğretmenin telefonu sağda üste biner;
   dar kapta telefon pencerenin yerine çapraz geçişle gelir. Adımlar:
   s1 «Açıklama»ya dokunulur, gerekçe yazılır · s2 «Başvuruyu gönder» → «Gönderiliyor…» → «Onay bekleyen 1» ·
   s3 telefon çekilir; müdürün listesi yerinde değişmez, zil 1 → 2, zile tıklanır → «Bildirimler» paneli ·
   s4 bildirime tıklanır → ?id= sayfası: ayrıntı + etkilenen dersler (sekmeler 1·7·0·8, zil 1) ·
   s5 «Onayla» → sayfa onaylı yeniden açılır («Onaylandı», karar satırı, «Yerine ata», 0·8·0·8), üstünde «Başarılı · İzin onaylandı.» ·
   s6 «Tamam» → pencere kapanır ·
   s7 telefon döner, «İzniniz onaylandı» bildirimi · s8 bildirime dokunulur → «Onaylı ve yaklaşan · Onaylandı». */

.stf { container-type: inline-size; font-size: 11px; line-height: 1.3; }
/* ölçü değişkenleri kökün çocuğunda: kap sorgusu kökün kendisini biçemez */
.stf-st { position: relative; height: var(--H); --H: 460px; --phw: 236px; --spring: cubic-bezier(.34, 1.56, .64, 1); --dl: 0s; }
.stf.s2 .stf-st { --dl: 1s; } .stf.s3 .stf-st { --dl: .55s; } .stf.s5 .stf-st { --dl: .62s; } .stf.s7 .stf-st { --dl: .25s; } .stf.s8 .stf-st { --dl: .5s; }
.stf-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stf-nw { white-space: nowrap; }

/* çapraz geçiş: katmanlar aynı ızgara hücresinde üst üste; stf-vA-B = A. adımdan B. adıma kadar görünür */
.stf-x { display: inline-grid; min-width: 0; }
.stf-x > * { grid-area: 1 / 1; min-width: 0; }
.stf-ly { opacity: 0; translate: 0 3px; transition: opacity .3s var(--ui-ease) var(--dl), translate .35s var(--ui-ease) var(--dl); }
.stf:not(.s3) .stf-v0-3, .stf.s3:not(.s4) .stf-v3-4, .stf.s4 .stf-v4, .stf:not(.s4) .stf-v0-4, .stf.s4:not(.s5) .stf-v4-5, .stf.s5 .stf-v5,
.stf:not(.s5) .stf-v0-5, .stf:not(.s7) .stf-v0-7, .stf.s7 .stf-v7, .stf.s2:not(.s8) .stf-v2-8, .stf.s8 .stf-v8 { opacity: 1; translate: 0 0; }

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

/* ═══ YÖNETİM PENCERESİ ═══ */
.stf-win { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f4f5f7; border-radius: 14px;
  transition: opacity .35s var(--ui-ease), scale .45s var(--ui-ease); }

/* üst şerit: logo · sayfa yolu · ara · zil · kullanıcı */
.stf-tb { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; background: #fff; box-shadow: inset 0 -1px 0 var(--ui-line); }
.stf svg.stf-logo { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 1px 3px rgba(16, 37, 64, .2); }
.stf-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--ui-muted); white-space: nowrap; }
.stf-crumb b { font-weight: 800; color: var(--ui-text); }
.stf-crumb__s { width: 12px; height: 12px; color: #a1a1aa; }
.stf-tbi { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #3f3f46; }
.stf-tbi .stf-i { width: 16px; height: 16px; stroke-width: 1.9; }
.stf-badge { position: absolute; top: 0; right: -1px; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 15px; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1.5px #fff; }
.stf.s3:not(.s4) .stf-badge { animation: stf-pop .45s var(--spring) .62s both; }
/* zile tıklama (s3, rozet artınca) */
.stf-bell .stf-hit { left: 15px; top: 17px; }
.stf.s3:not(.s4) .stf-hit--bell .ui-cur { animation: stf-cur-out .95s var(--ui-ease) .78s both; }
.stf.s3:not(.s4) .stf-hit--bell .stf-rip { animation: stf-rip .55s ease-out 1.1s both; }
.stf-me { flex: none; display: flex; align-items: center; gap: 6px; margin-left: 4px; }
.stf-me__av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--navy-soft), var(--navy)); color: #fff; font-size: 11px; font-weight: 800; }
.stf-me__ad { font-size: 11.5px; font-weight: 800; color: var(--ui-text); white-space: nowrap; transition: opacity .3s var(--ui-ease) .3s; }
/* telefon öndeyken ad, telefonun kenarından taşan yarım harf bırakmasın */
.stf:not(.s3) .stf-me__ad, .stf.s7 .stf-me__ad { opacity: 0; transition-delay: 0s; }

.stf-bd { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 0; overflow: hidden; }

/* bant kartı: başlık bandı + durum sekmeleri */
.stf-bc { flex: none; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); }
.stf-band { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 10px 0 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.stf-band__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.stf-band__ic .stf-i { width: 17px; height: 17px; stroke-width: 1.8; }
.stf-band__t { flex: 1; min-width: 0; }
.stf-band__t > b { display: block; font-size: 14.5px; font-weight: 800; line-height: 18px; letter-spacing: -.01em; white-space: nowrap; }
.stf-band__t > .stf-x { display: grid; margin-top: 1px; font-size: 11px; font-weight: 600; line-height: 14px; color: rgba(255, 255, 255, .84); white-space: nowrap; }
.stf-band__a { flex: none; display: flex; gap: 6px; }
.stf-bb { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px; font-size: 11px; font-weight: 800; white-space: nowrap; color: #fff;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.stf-bb .stf-i { width: 13px; height: 13px; }
.stf-bb--p { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(5, 15, 30, .25), inset 0 -1px 0 rgba(16, 37, 64, .08); }
.stf-chips { position: relative; display: flex; gap: 6px; padding: 7px 10px; border-top: 1px solid #f1f2f4; white-space: nowrap; overflow: hidden; }
.stf-cp { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7;
  font-size: 11px; font-weight: 700; color: #3f3f46; }
.stf-cp b { font-weight: 800; font-variant-numeric: tabular-nums; }
.stf-cp--on { background: var(--navy-soft); box-shadow: inset 0 0 0 1px var(--navy-soft), 0 1px 2px rgba(20, 61, 107, .3); color: #fff; }
/* «Tümü» çipi telefon öndeyken (geniş kap) gizlenir: telefonun kenarında tek harf kalmasın */
.stf-cp:nth-child(4) { transition: opacity .3s var(--ui-ease) .3s; }

/* içerik: liste görünümü ↔ ayrıntı görünümü aynı hücrede */
.stf-ct { position: relative; flex: 1; min-height: 0; display: grid; }
.stf-ct::after { content: ""; position: absolute; z-index: 3; left: -12px; right: -12px; bottom: 0; height: 16px; background: linear-gradient(rgba(244, 245, 247, 0), #f4f5f7); pointer-events: none; }
.stf-lv, .stf-dv { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.stf-lv { transition: opacity .3s var(--ui-ease) .55s; }
.stf.s4 .stf-lv { opacity: 0; }
.stf-dv { opacity: 0; translate: 0 8px; transition: opacity .35s var(--ui-ease) .62s, translate .5s var(--ui-ease) .62s; }
.stf.s4 .stf-dv { opacity: 1; translate: 0 0; }
.stf-card { flex: none; border-radius: 14px; 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); }
.stf-card.stf-x { display: grid; }
.stf-empty { display: grid; place-items: center; min-height: 64px; padding: 10px 12px; font-size: 11.5px; font-weight: 700; color: #52525b; text-align: center; }
/* boş durum yazısı telefon öndeyken (geniş kap) telefonun solundaki alana ortalanır; ayrıntıdaki katman stf-ly geçişini kullanır */
.stf-lv .stf-empty { transition: translate .4s var(--ui-ease); }

/* liste satırı */
.stf-lr { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 12px; border-radius: 14px; }
.stf-lr__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #f4f4f5; color: #52525b; }
.stf-lr__ic .stf-i { width: 15px; height: 15px; }
.stf-lr__t { flex: 1; min-width: 0; }
.stf-lr__t b { position: relative; display: block; font-size: 12px; font-weight: 800; line-height: 16px; color: #18181b; white-space: nowrap; }
.stf-lr__t b > span { font-weight: 600; color: var(--ui-muted); }
.stf-lr__t small { display: block; font-size: 11px; font-weight: 600; line-height: 15px; color: #52525b; font-variant-numeric: tabular-nums; }
.stf-lr__t .stf-lr__r { font-weight: 500; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* seçili satır: uygulamadaki gibi yalnız açık marka zemini (bg-brand-50/70) */
.stf-lr--sel { background-color: #f1f6fc; }

/* ayrıntı kartı */
.stf-dh { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 10px 14px; }
.stf-dh__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ui-primary-soft); color: var(--navy-soft); }
.stf-dh__ic .stf-i { width: 16px; height: 16px; }
.stf-dh__t { flex: 1; min-width: 0; }
.stf-dh__t > b { display: block; font-size: 14px; font-weight: 800; line-height: 18px; letter-spacing: -.01em; color: #18181b; }
.stf-st8 { display: grid; justify-items: start; margin-top: 4px; }
.stf-oz { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.stf-oz--am { background: #fffbeb; color: #78350f; box-shadow: inset 0 0 0 1px #fcd34d; }
.stf-oz--em { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px #6ee7b7; }
.stf.s5 .stf-oz--em { animation: stf-pop .45s var(--spring) .62s both; }
.stf-dh__m { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; line-height: 15px; color: #52525b; font-variant-numeric: tabular-nums; }
.stf-dh__q { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 15px; color: #3f3f46; }
.stf-dh__k { display: block; padding-top: 3px; font-size: 10.5px; font-weight: 600; line-height: 14px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.stf-dh__x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #52525b; }
.stf-dh__x .stf-i { width: 15px; height: 15px; }
/* açılır/kapanır bölüm: karar satırı gelir, eylem alanı kalkar (yükseklik ızgara satırıyla yumuşak) */
.stf-coll { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ui-ease) .7s; }
.stf-coll > * { min-height: 0; overflow: hidden; }
.stf-coll--k { grid-template-rows: 0fr; }
.stf-coll--k > * { opacity: 0; transition: opacity .3s var(--ui-ease) .95s; }
.stf.s5 .stf-coll--k { grid-template-rows: 1fr; }
.stf.s5 .stf-coll--k > * { opacity: 1; }
.stf-coll--a > * { transition: opacity .22s var(--ui-ease) .62s; }
.stf.s5 .stf-coll--a { grid-template-rows: 0fr; }
.stf.s5 .stf-coll--a > * { opacity: 0; }

.stf-act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 9px 12px 10px 14px; border-top: 1px solid #f1f1f3; }
.stf-af { min-width: 0; }
.stf-lbl { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; line-height: 13px; color: #52525b; }
.stf-af__r { display: flex; align-items: center; gap: 6px; }
.stf-sel, .stf-inp { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 30px; padding: 0 8px 0 9px; border-radius: 8px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); font-size: 11px; font-weight: 600; color: var(--ui-text); white-space: nowrap; overflow: hidden; }
.stf-sel .stf-i { width: 13px; height: 13px; color: var(--ui-muted); }
.stf-inp { color: #8a93a3; font-weight: 500; }
.stf-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.stf-btn .stf-i { width: 13px; height: 13px; stroke-width: 2.4; }
.stf-btn--ok { background: #047857; color: #fff; 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); }
.stf-btn--no { background: #fff; color: #be123c; box-shadow: inset 0 0 0 1px #fecdd3; }
.stf-btn--ok .stf-hit { right: 20px; bottom: 8px; }
.stf.s5:not(.s6) .stf-btn--ok { animation: stf-push .3s var(--ui-ease) .36s; }
.stf.s5:not(.s6) .stf-hit--ok .ui-cur { animation: stf-cur-out .95s var(--ui-ease) both; }
.stf.s5:not(.s6) .stf-hit--ok .stf-rip { animation: stf-rip .55s ease-out .34s both; }

/* etkilenen dersler */
.stf-les { border-top: 1px solid #f1f1f3; padding-bottom: 3px; }
.stf-les__h { padding: 8px 14px 3px; font-size: 10px; font-weight: 800; line-height: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-muted); }
.stf-lz { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 3px 12px 3px 14px;
  opacity: 0; translate: 0 4px; transition: opacity .3s var(--ui-ease) calc(.8s + var(--i) * 70ms), translate .35s var(--ui-ease) calc(.8s + var(--i) * 70ms); }
.stf-lz + .stf-lz { border-top: 1px solid #f4f4f5; }
.stf.s4 .stf-lz { opacity: 1; translate: 0 0; }
.stf-lz__w { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.stf-lz__d { flex: none; width: 104px; font-size: 11.5px; font-weight: 600; line-height: 15px; color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stf-lz__d b { font-weight: 800; color: #18181b; }
.stf-lz__c { min-width: 0; font-size: 11.5px; font-weight: 600; line-height: 15px; color: #3f3f46; white-space: nowrap; }
.stf-lz__c small { font-size: 10px; font-weight: 600; color: var(--ui-muted); }
.stf-lz__s { flex: none; justify-items: end; align-items: center; }
.stf-lz .stf-ly { --dl: calc(.66s + var(--i) * 60ms); }
.stf-bos { font-size: 10.5px; font-weight: 600; color: #a1a1aa; }
.stf-ata { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; background: var(--ui-primary-soft); color: var(--navy-soft);
  font-size: 10.5px; font-weight: 800; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .1); }
.stf-ata .stf-i { width: 13px; height: 13px; }
.stf.s5 .stf-ata { transition-timing-function: var(--spring); }

/* «Başarılı» penceresi (SweetAlert) */
.stf-dim { position: absolute; inset: 0; z-index: 8; border-radius: 14px; background: rgba(15, 23, 42, .36); opacity: 0; pointer-events: none; transition: opacity .3s var(--ui-ease) .42s; }
.stf.s5:not(.s6) .stf-dim { opacity: 1; transition-delay: .86s; }
.stf-swal { position: absolute; z-index: 9; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; width: 236px; margin: -88px 0 0 -118px; padding: 16px 16px 14px; border-radius: 12px;
  background: #fff; text-align: center; box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 2px 6px rgba(16, 37, 64, .1), 0 24px 48px -18px rgba(5, 15, 30, .55);
  opacity: 0; scale: .8; transition: opacity .2s var(--ui-ease) .42s, scale .25s var(--ui-ease) .42s; }
.stf.s5:not(.s6) .stf-swal { opacity: 1; scale: 1; transition: opacity .25s var(--ui-ease) .96s, scale .45s var(--spring) .96s; }
.stf-swal__ic svg { width: 46px; height: 46px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stf-swal__ic circle { stroke: rgba(165, 220, 134, .45); stroke-width: 3.5; }
.stf-swal__ic path { stroke: #8bcf66; stroke-width: 4; stroke-dasharray: 32; stroke-dashoffset: 32; transition: stroke-dashoffset .4s var(--ui-ease) 1.2s; }
.stf.s5 .stf-swal__ic path { stroke-dashoffset: 0; }
.stf-swal > b { margin-top: 8px; font-size: 15px; font-weight: 800; line-height: 19px; color: #18181b; }
.stf-swal__t { margin-top: 3px; font-size: 11.5px; font-weight: 600; line-height: 16px; color: #3f3f46; }
.stf-swal__b { position: relative; display: grid; place-items: center; height: 30px; margin-top: 12px; padding: 0 18px; border-radius: 8px; background: #18181b; color: #fff; font-size: 11.5px; font-weight: 800; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.stf-swal__b .stf-hit { right: 16px; bottom: 8px; }
.stf.s6 .stf-swal__b { animation: stf-push .3s var(--ui-ease) .3s; }
.stf.s6 .stf-hit--tamam .ui-cur { animation: stf-cur-out .8s var(--ui-ease) both; }
.stf.s6 .stf-hit--tamam .stf-rip { animation: stf-rip .5s ease-out .28s both; }

/* zil paneli «Bildirimler» (sidebar.php #notifPanel; öğeler footer.php renderItems) */
.stf-np { position: absolute; z-index: 6; top: 44px; right: 10px; width: 336px; display: flex; flex-direction: column; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px #e4e4e7, 0 2px 6px rgba(16, 37, 64, .08), 0 26px 46px -18px rgba(16, 37, 64, .5); transform-origin: 82% 0;
  opacity: 0; translate: 0 -6px; scale: .97; pointer-events: none; transition: opacity .2s var(--ui-ease) .5s, translate .25s var(--ui-ease) .5s, scale .25s var(--ui-ease) .5s; }
.stf.s3:not(.s4) .stf-np { opacity: 1; translate: 0 0; scale: 1; transition: opacity .22s var(--ui-ease) 1.18s, translate .4s var(--spring) 1.18s, scale .4s var(--spring) 1.18s; }
.stf-np__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid #e4e4e7; }
.stf-np__h b { font-size: 12.5px; font-weight: 800; color: #18181b; }
.stf-np__h span { font-size: 10.5px; font-weight: 700; color: var(--navy-soft); white-space: nowrap; }
.stf-nf { position: relative; display: flex; gap: 10px; padding: 9px 24px 9px 12px; border-bottom: 1px solid #f1f1f3; background: #f4f8fc; }
.stf-nf--r { background: #fff; }
.stf-nf__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #dbeafe; color: #1d4ed8; }
.stf-nf__ic .stf-i { width: 14px; height: 14px; }
.stf-nf__t { flex: 1; min-width: 0; }
.stf-nf__t > b { position: relative; display: block; font-size: 12px; font-weight: 800; line-height: 16px; color: #18181b; }
.stf-nf__t > span { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 700; line-height: 14px; color: #52525b; font-variant-numeric: tabular-nums; }
.stf-nf__t > small { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; line-height: 13px; color: #71717a; }
.stf-nf__dot { position: absolute; top: 11px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--navy-soft); }
.stf-np__f { display: grid; place-items: center; height: 32px; font-size: 10.5px; font-weight: 800; color: var(--navy-soft); }
.stf-nf__t .stf-hit--nf { left: 74px; top: 9px; }
.stf.s4 .stf-hit--nf .ui-cur { animation: stf-cur-out .7s var(--ui-ease) both; }
.stf.s4 .stf-hit--nf .stf-rip { animation: stf-rip .5s ease-out .24s both; }
.stf.s4 .stf-np__h + .stf-nf { animation: stf-push .26s var(--ui-ease) .28s; }

/* telefon öndeyken pencereyi bastıran perde (geniş kap) */
.stf-scrim { position: absolute; inset: 0; z-index: 10; border-radius: 14px; pointer-events: none; background: linear-gradient(90deg, rgba(11, 30, 54, .05), rgba(11, 30, 54, .2) 70%);
  transition: opacity .4s var(--ui-ease); }
.stf.s3:not(.s7) .stf-scrim { opacity: 0; }

/* ═══ ÖĞRETMENİN TELEFONU ═══ */
.stf-ph { position: absolute; z-index: 12; right: 10px; top: 8px; width: var(--phw); height: calc(var(--H) - 16px); padding: 6px; border-radius: 34px;
  background: linear-gradient(150deg, #23466f 0%, var(--navy-night) 38%, #061628 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(11, 36, 64, .3), -16px 0 30px -14px rgba(11, 36, 64, .32), 0 30px 50px -22px rgba(11, 36, 64, .75), 0 0 0 1px rgba(255, 255, 255, .5);
  transition: opacity .35s var(--ui-ease), translate .6s var(--ui-ease); }
.stf.s3:not(.s7) .stf-ph { opacity: 0; translate: 0 22px; }
.stf.s7 .stf-ph { transition: opacity .35s var(--ui-ease) .05s, translate .7s var(--spring) .05s; }
.stf-key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2b4c74, #0d2440); }
.stf-key--a { left: -2px; top: 88px; height: 26px; } .stf-key--b { left: -2px; top: 124px; height: 40px; }
.stf-key--c { right: -2px; top: 112px; height: 56px; background: linear-gradient(270deg, #2b4c74, #0d2440); }
.stf-scr { position: relative; height: 100%; overflow: hidden; border-radius: 28px; background: #f5f6f8; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }

/* durum çubuğu (saat · ada · sinyal, wi-fi, pil) */
.stf-sb { position: absolute; z-index: 7; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px 0 19px; color: #0b1526; }
.stf-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stf-isl { position: absolute; left: 50%; top: 5px; width: 54px; height: 15px; margin-left: -27px; border-radius: 999px; background: #05070b; }
.stf-sbi { display: flex; align-items: center; gap: 3px; }
.stf-sbi .stf-i { width: 11px; height: 11px; stroke-width: 2.4; }
.stf-sbi .stf-bat { width: 16px; height: 12px; }

/* uygulama üst şeridi */
.stf-ah { position: absolute; z-index: 3; inset: 0 0 auto; height: 64px; display: flex; align-items: center; gap: 7px; padding: 24px 9px 0;
  background: linear-gradient(180deg, #e3eaf4 0%, #eef2f8 70%, #f2f5f9 100%); box-shadow: inset 0 -1px 0 #d9e0ea; }
.stf-ah > b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; letter-spacing: -.015em; color: #18181b; white-space: nowrap; }
.stf-ib { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; 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); }
.stf-ib .stf-i { width: 14px; height: 14px; }
.stf-ib--bell::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; }
.stf-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px -2px rgba(16, 37, 64, .55); }

/* form */
.stf-pf { position: absolute; z-index: 1; left: 0; right: 0; top: 64px; bottom: 46px; padding: 9px 11px 0; transition: opacity .3s var(--ui-ease) var(--dl); }
/* form, «Gönderiliyor…» katmanı tam örtükken söner; liste katman kalkarken belirir (iki metin üst üste görünmez) */
.stf.s2 .stf-pf { opacity: 0; transition: opacity .18s linear .7s; }
.stf-fl { margin-bottom: 8px; }
.stf-fl__l { display: block; margin: 0 0 4px 2px; font-size: 10.5px; font-weight: 700; line-height: 13px; color: #3f3f46; }
.stf-fi { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 30px; padding: 0 8px 0 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8;
  font-size: 11.5px; font-weight: 600; color: #18181b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stf-fi .stf-i { width: 13px; height: 13px; color: #3f3f46; }
.stf-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stf-seg > * { display: grid; place-items: center; height: 30px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 11px; font-weight: 800; color: #3f3f46; white-space: nowrap; }
.stf-seg > b { background: #eaf1fa; box-shadow: inset 0 0 0 1px var(--navy-soft); color: var(--navy-soft); }
.stf-fl--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stf-fl--2 > span { display: block; min-width: 0; }
.stf-ta { position: relative; display: grid; min-height: 48px; padding: 6px 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8;
  font-size: 11.5px; font-weight: 600; line-height: 17px; color: #18181b; transition: box-shadow .25s var(--ui-ease) .4s; }
.stf-ta > .stf-ta__ph, .stf-ta > .stf-ta__v { grid-area: 1 / 1; min-width: 0; }
.stf-ta__ph { font-weight: 500; color: #71717a; transition: opacity .15s linear .45s; }
.stf.s1 .stf-ta__ph { opacity: 0; }
.stf.s1:not(.s2) .stf-ta { box-shadow: inset 0 0 0 1.5px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); }
.stf-ta__v > span { opacity: 0; transition: opacity .05s linear calc(.52s + var(--i) * 22ms); }
.stf.s1 .stf-ta__v > span { opacity: 1; }
.stf-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 1px; vertical-align: -2px; border-radius: 1px; background: var(--navy-soft); opacity: 0; }
.stf.s1:not(.s2) .stf-caret { animation: stf-blink 1s steps(1) 1.28s infinite; }
@keyframes stf-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.stf-fl__h { display: block; margin: 4px 0 0 2px; font-size: 10px; font-weight: 600; line-height: 13px; color: #71717a; }
.stf-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 11px; background: rgba(250, 250, 250, .96); box-shadow: inset 0 1px 0 #e4e4e7; }
.stf-send { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 64, .25), 0 8px 14px -10px rgba(20, 61, 107, .8); }
.stf-send .stf-i { width: 13px; height: 13px; }
.stf.s2:not(.s3) .stf-send { animation: stf-push .3s var(--ui-ease) .34s; }

/* başvurularım */
.stf-pl { position: absolute; z-index: 1; left: 0; right: 0; top: 64px; bottom: 46px; display: grid; padding: 9px 11px 0; }
.stf-pl > * { grid-area: 1 / 1; align-self: start; min-width: 0; }
.stf-fla { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 8px; padding: 7px 9px; border-radius: 10px; background: #ecfdf5; color: #047857; font-size: 10.5px; font-weight: 700; line-height: 14px; }
.stf-fla .stf-i { width: 13px; height: 13px; margin-top: 1px; }
.stf-yeni { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; margin-bottom: 10px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 64, .2); }
.stf-yeni .stf-i { width: 13px; height: 13px; stroke-width: 2.4; }
.stf-oh { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 6px; }
.stf-oh b { font-size: 13px; font-weight: 700; line-height: 17px; color: #18181b; }
.stf-oh span { font-size: 11px; font-weight: 800; color: #71717a; font-variant-numeric: tabular-nums; }
.stf-ocard { border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.stf-or { display: flex; align-items: center; gap: 9px; padding: 9px 10px 5px; }
.stf-or__ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.stf-or__ic .stf-i { width: 15px; height: 15px; }
.stf-or .am { background: #fffbeb; color: #92400e; } .stf-or .em { background: #ecfdf5; color: #047857; }
.stf-or__t { flex: 1; min-width: 0; }
.stf-or__t > small { display: block; font-size: 10px; font-weight: 700; line-height: 13px; letter-spacing: .02em; color: #52525b; font-variant-numeric: tabular-nums; }
.stf-or__t > b { display: block; font-size: 12.5px; font-weight: 600; line-height: 16px; color: #18181b; }
.stf-or__a { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin-top: 3px; }
.stf-or__a em { flex: none; height: 17px; padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 700; line-height: 17px; letter-spacing: .02em; }
.stf-or__a > span { font-size: 10.5px; font-weight: 500; line-height: 14px; color: #52525b; }
.stf.s8 .stf-or__a em.em { animation: stf-pop .45s var(--spring) .72s both; }
.stf-geri { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 10px 7px; font-size: 10.5px; font-weight: 700; line-height: 14px; color: #be123c; }
.stf-geri .stf-i { width: 12px; height: 12px; }
.stf-pft { margin-top: 26px; text-align: center; line-height: 14px; }
.stf-pft b { display: block; font-size: 10.5px; font-weight: 700; color: #71717a; }
.stf-pft span { display: block; font-size: 10px; font-weight: 600; color: #71717a; }

/* alt sekmeler (izin sayfası Menü'den açılır; vurgulu sekme yok) */
.stf-tab { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; height: 46px; padding: 4px 9px 8px;
  background: rgba(255, 255, 255, .96); box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08); }
.stf-tab > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 700; color: #52525b; white-space: nowrap; letter-spacing: -.02em; }
.stf-tab .stf-i { width: 15px; height: 15px; stroke-width: 1.9; }

/* «Gönderiliyor…» katmanı */
.stf-busy { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 0 16px; background: rgba(24, 24, 27, .66); opacity: 0; pointer-events: none; }
.stf.s2:not(.s3) .stf-busy { animation: stf-busy .78s var(--ui-ease) .42s both; }
@keyframes stf-busy { 0% { opacity: 0; } 20%, 78% { opacity: 1; } 100% { opacity: 0; } }
.stf-busy__c { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 14px 12px 13px; border-radius: 16px; background: #fff; text-align: center;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 20px 40px -16px rgba(0, 0, 0, .5); }
.stf-busy__c > b { margin-top: 9px; font-size: 12.5px; font-weight: 800; color: var(--ui-text); }
.stf-busy__c > span { margin-top: 3px; font-size: 10px; font-weight: 700; line-height: 1.35; color: var(--ui-muted); text-wrap: balance; }
.stf-spin { width: 26px; height: 26px; fill: none; stroke: var(--navy-soft); stroke-width: 3; stroke-linecap: round; }
.stf-spin circle { opacity: .2; }
.stf.s2:not(.s3) .stf-spin { animation: stf-don .8s linear infinite; }
@keyframes stf-don { to { rotate: 360deg; } }

/* anlık bildirim */
.stf-nt { position: absolute; z-index: 8; left: 7px; right: 7px; top: 27px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 8px 10px 9px 8px; border-radius: 15px;
  background: rgba(255, 255, 255, .95); -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 20px 36px -14px rgba(16, 37, 64, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10.5px; font-weight: 500; line-height: 14px; color: var(--ui-text-2); opacity: 0; translate: 0 -130%;
  transition: opacity .3s var(--ui-ease) .42s, translate .45s var(--ui-ease) .42s; }
.stf.s7:not(.s8) .stf-nt { opacity: 1; translate: 0 0; transition: opacity .3s var(--ui-ease) .75s, translate .7s cubic-bezier(.34, 1.4, .64, 1) .75s; }
.stf-nt img { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.stf-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.stf-nt__h b { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; color: var(--ui-text); letter-spacing: -.005em; }
.stf-nt__h em { flex: none; font-style: normal; font-size: 10px; color: var(--ui-muted); }

/* parmak (dokunuş) */
.stf-tch { position: absolute; z-index: 6; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .78), rgba(226, 233, 243, .52) 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); }
.stf-tch 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 stf-tap { 0% { opacity: 0; scale: 1.3; } 26% { opacity: 1; scale: 1; } 44% { scale: .76; } 62% { scale: 1; } 82% { opacity: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes stf-wave { 0% { opacity: 0; scale: .6; } 15% { opacity: .95; } 100% { opacity: 0; scale: 2.1; } }
.stf-tch--ta { left: 46%; top: 26px; }
.stf-tch--send { left: 64%; top: 50%; }
.stf-tch--nt { left: 62%; top: 55%; }
.stf.s1:not(.s2) .stf-tch--ta { animation: stf-tap .85s var(--ui-ease) .1s both; }
.stf.s1:not(.s2) .stf-tch--ta i { animation: stf-wave .55s ease-out .38s both; }
.stf.s2:not(.s3) .stf-tch--send { animation: stf-tap .8s var(--ui-ease) .08s both; }
.stf.s2:not(.s3) .stf-tch--send i { animation: stf-wave .55s ease-out .34s both; }
.stf.s8 .stf-tch--nt { animation: stf-tap .7s var(--ui-ease) .02s both; }
.stf.s8 .stf-tch--nt i { animation: stf-wave .5s ease-out .26s both; }

/* ── GENİŞ KAP (600 px ve üstü): telefon öndeyken altında yarım kelime / tek harf kalmasın ── */
@container (min-width: 600px) {
  .stf:not(.s3) .stf-cp:nth-child(4), .stf.s7 .stf-cp:nth-child(4) { opacity: 0; transition-delay: 0s; }
  .stf:not(.s3) .stf-empty, .stf.s7 .stf-empty { translate: calc(var(--phw) / -2) 0; }
}
/* ── ORTA KAP (600 px'ten dar): telefon pencerenin yerine gelir; «İzin raporu» ve ret satırı gizli, eylem tek sütun ── */
@container (max-width: 599px) {
  .stf-ph { right: auto; left: 50%; margin-left: calc(var(--phw) / -2); }
  .stf-scrim { display: none; }
  .stf:not(.s3) .stf-win, .stf.s7 .stf-win { opacity: 0; scale: .985; }
  .stf.s3:not(.s7) .stf-win { transition-delay: .2s; }
  .stf-bb--3 { display: none; }
  .stf-act { grid-template-columns: minmax(0, 1fr); }
  .stf-af--ret { display: none; }
  .stf-np { left: 8px; right: 8px; width: auto; }
}
/* ── DAR KAP (telefon, ~330) ── */
@container (max-width: 470px) {
  .stf-st { --H: 476px; }
  .stf-tb { height: 38px; padding: 0 8px 0 10px; }
  .stf-crumb__a, .stf-crumb__s, .stf-tbi:not(.stf-bell), .stf-me__ad { display: none; }
  .stf-bd { padding: 8px 8px 0; gap: 8px; }
  .stf-band { height: 50px; gap: 8px; padding: 0 8px 0 10px; }
  .stf-band__ic { width: 28px; height: 28px; }
  .stf-band__ic .stf-i { width: 15px; height: 15px; }
  .stf-band__t > b { font-size: 13.5px; }
  .stf-band__t > .stf-x { font-size: 10.5px; }
  .stf-bb--2 { display: none; }
  .stf-chips { padding: 6px 8px; gap: 5px; }
  .stf-cp { height: 24px; padding: 0 8px; font-size: 10.5px; gap: 4px; }
  .stf-cp:nth-child(3) { display: none; }
  .stf-lv, .stf-dv { gap: 8px; }
  .stf-ct::after { left: -8px; right: -8px; }
  .stf-np { top: 42px; }
  .stf-lr { gap: 9px; padding: 8px 10px; }
  .stf-dh { gap: 8px; padding: 10px 8px 9px 10px; }
  .stf-dh__ic { width: 28px; height: 28px; }
  .stf-dh__ic .stf-i { width: 14px; height: 14px; }
  .stf-dh__t > b { font-size: 13px; }
  .stf-dh__m, .stf-dh__q { font-size: 10.5px; line-height: 14px; }
  .stf-act { padding: 8px 10px 9px; }
  .stf-les__h { padding: 7px 10px 2px; }
  .stf-lz { gap: 8px; padding: 4px 8px 4px 10px; }
  .stf-lz__w { flex-direction: column; align-items: flex-start; gap: 1px; }
  .stf-lz__d { width: auto; font-size: 11px; line-height: 14px; }
  .stf-lz__c { font-size: 11px; line-height: 14px; }
}