/* SAHNE · AYLIK GELİŞİM KARNESİ (includes/scenes/development-report.php) — modül sayfası, kap ~330–680 px, yükseklik 452 px.
   «Öğretmenin ekranı»: s1 2. kazanıma «Edinildi» · s2 3. kazanıma «Devam ediyor» → «Değerlendirme tamam» · s3 «Öğretmeninden
   Öneriler»e kayar, imleç «Tamamlandı, kontrole gönder»e basar · s4 sayfa yenilenir (başa döner): ileti + «Kontrolde» ·
   «Yöneticinin ekranı»: s5 «Yayım»a kayar, imleç «Onayla ve yayımla»ya basar · s6 sayfa yenilenir: ileti + «Yayında», salt
   okunur · s7 velinin telefonuna bildirim · s8 karne açılır · s9 Türkçe kazanımları (düzey çipleri). Her adımda tek odak
   hareketi (kaydır-bas bir adım, yenilenip başa dönme ayrı adım). Geniş kapta satır düğmeleri sağda, 600 px altında metnin
   altında (uygulamanın telefon düzeni). */
.dvr { container-type: inline-size; --d: 0s; --dvr-spring: cubic-bezier(.34, 1.56, .64, 1); --dvr-scroll: cubic-bezier(.3, .7, .2, 1); }
.dvr.s1, .dvr.s2 { --d: .5s; } .dvr.s3 { --d: 0s; }
.dvr-win {
  --H: 452px; --fl: 46px; --hh: 36px; --tb: 196px; --tc: 372px;
  --pw: 224px; --phh: 406px; --ptop: 18px; --pr: 26px;
  position: relative; height: var(--H); border-radius: 14px; background: var(--ui-bg-2);
}
.dvr-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: katmanlar aynı hücrede; dvr-k--A-B = A. adımdan B. adıma kadar görünür */
.dvr-x { display: inline-grid; min-width: 0; }
.dvr-x > * { grid-area: 1 / 1; min-width: 0; white-space: nowrap; }
.dvr-k { opacity: 0; transform: translateY(3px); transition: opacity .25s var(--ui-ease) var(--d), transform .3s var(--ui-ease) var(--d); }
.dvr:not(.s1) .dvr-k--0-1, .dvr.s1:not(.s2) .dvr-k--1-2, .dvr.s2 .dvr-k--2, .dvr:not(.s4) .dvr-k--0-4, .dvr.s4:not(.s5) .dvr-k--4-5,
.dvr.s4:not(.s6) .dvr-k--4-6, .dvr:not(.s5) .dvr-k--0-5, .dvr.s5 .dvr-k--5, .dvr:not(.s6) .dvr-k--0-6, .dvr.s6 .dvr-k--6 { opacity: 1; transform: none; }

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

/* ── pencere ── */
.dvr-vp { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
/* alt kenar: sayfa sürer (solma) */
.dvr-vp::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(rgba(246, 247, 249, 0), var(--ui-bg-2)); pointer-events: none; }
.dvr-seg { position: absolute; inset: 0; padding: 0 12px; }
/* sayfa kayması (s3 → B, s5 → C): A yukarı kayıp söner, B/C alttan gelir. Yenilenme (s4, s6): B/C söner, A başta belirir. */
.dvr-seg--a { transition: opacity .35s var(--ui-ease) .2s, translate 0s linear .2s; }
.dvr.s3:not(.s4) .dvr-seg--a, .dvr.s5:not(.s6) .dvr-seg--a { opacity: 0; translate: 0 -40px; transition: opacity .45s var(--dvr-scroll), translate .6s var(--dvr-scroll); }
.dvr.s5:not(.s6) .dvr-seg--a { transition-delay: .4s; }
.dvr-seg--b, .dvr-seg--c { opacity: 0; translate: 0 48px; display: flex; flex-direction: column; transition: opacity .2s var(--ui-ease), translate 0s linear .2s; }
.dvr.s3:not(.s4) .dvr-seg--b, .dvr.s5:not(.s6) .dvr-seg--c { opacity: 1; translate: 0 0; transition: opacity .45s var(--dvr-scroll) .08s, translate .6s var(--dvr-scroll); }
.dvr.s5:not(.s6) .dvr-seg--c { transition-delay: .48s, .4s; }
.dvr-seg--b { padding-top: 60px; }
.dvr-seg--c { padding-top: 40px; }
.dvr-thumb { position: absolute; z-index: 5; right: 3px; top: 8px; width: 4px; height: 64px; border-radius: 2px; background: rgba(16, 37, 64, .2); transition: translate 0s linear .2s; }
.dvr.s3:not(.s4) .dvr-thumb { translate: 0 var(--tb); transition: translate .6s var(--dvr-scroll); }
.dvr.s5:not(.s6) .dvr-thumb { translate: 0 var(--tc); transition: translate .6s var(--dvr-scroll) .4s; }

/* ── başlık bandı (kurum rengi) ── */
.dvr-band { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 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), 0 1px 2px rgba(11, 36, 64, .18), 0 10px 20px -14px rgba(11, 36, 64, .7); }
.dvr-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.dvr-ico .dvr-i { width: 17px; height: 17px; stroke-width: 1.8; }
.dvr-ttl { flex: 1; min-width: 0; }
.dvr-ttl > b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; line-height: 20px; letter-spacing: -.01em; }
.dvr-hlp { width: 15px; height: 15px; stroke-width: 1.8; opacity: .8; }
.dvr-ttl small { display: flex; flex-wrap: wrap; align-items: center; column-gap: 5px; margin-top: 1px; font-size: 11.5px; font-weight: 600; line-height: 17px; color: rgba(255, 255, 255, .84); }
.dvr-ttl small > span:first-child { white-space: nowrap; }
.dvr-chips { justify-items: start; }
.dvr-st { height: 17px; padding: 0 5px; border-radius: 4px; font-style: normal; font-size: 10.5px; font-weight: 900; line-height: 17px; }
.dvr-st--dr { background: #f4f4f5; color: #3f3f46; } .dvr-st--rd { background: #fef3c7; color: #78350f; } .dvr-st--pb { background: #d1fae5; color: #065f46; }
.dvr.s4:not(.s6) .dvr-chips { animation: dvr-popk .5s var(--dvr-spring) .55s both; }
.dvr.s6 .dvr-chips { animation: dvr-popy .5s var(--dvr-spring) .55s both; }
.dvr-bbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.dvr-bbtn .dvr-i { width: 13px; height: 13px; }

/* ── ileti + itilen gövde ── */
.dvr-area { position: relative; margin-top: 10px; }
.dvr-flash { position: absolute; left: 0; right: 0; top: 0; height: 36px; align-items: center; padding: 0 14px; border-radius: 12px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0;
  font-size: 11.5px; font-weight: 700; color: #064e3b; opacity: 0; transition: opacity .01s linear; }
/* ileti yalnız yenilenen sayfada (s4 öğretmen, s6 yönetici); s5'te yöneticinin ekranı iletisiz açılır */
.dvr.s4:not(.s5) .dvr-flash, .dvr.s6 .dvr-flash { opacity: 1; }
.dvr.s5:not(.s6) .dvr-flash { transition-duration: .25s; }
.dvr-flash .dvr-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dvr-push { transition: translate .01s linear; }
.dvr.s4:not(.s5) .dvr-push, .dvr.s6 .dvr-push { translate: 0 var(--fl); }
.dvr.s5:not(.s6) .dvr-push { transition: translate .3s var(--ui-ease); }
.dvr-push2 { transition: translate .01s linear; }
.dvr.s6 .dvr-push2 { translate: 0 calc(-1 * var(--hh)); }

/* yapışkan şerit */
.dvr-strip { position: relative; display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 6px; border-radius: 12px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 1px 2px rgba(16, 37, 64, .06), inset 0 1px 0 rgba(255, 255, 255, .6); }
.dvr-strip--stk { position: absolute; z-index: 4; left: 12px; right: 12px; top: 12px; opacity: 0;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 2px 4px rgba(16, 37, 64, .06), 0 10px 18px -12px rgba(16, 37, 64, .4); }
.dvr-strip--stk { transition: opacity .2s var(--ui-ease); }
.dvr.s3:not(.s4) .dvr-strip--stk, .dvr.s5:not(.s6) .dvr-strip--stk { opacity: 1; transition: opacity .3s var(--ui-ease) .15s; }
.dvr.s5:not(.s6) .dvr-strip--stk { transition-delay: .55s; }
.dvr-nav { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 6px; border-radius: 7px; font-size: 12px; font-weight: 700; color: #3f3f46; }
.dvr-nav .dvr-i { width: 14px; height: 14px; color: #52525b; }
.dvr-pos { flex: none; padding: 0 2px; font-size: 11px; font-weight: 700; color: #71717a; font-variant-numeric: tabular-nums; }
.dvr-cnt { margin-left: auto; justify-items: end; font-size: 12px; font-weight: 800; color: #18181b; }
.dvr-first { flex: none; display: inline-flex; align-items: center; height: 28px; max-width: 120px; margin-left: 6px; padding: 0 9px; overflow: hidden; border-radius: 8px; background: #f4f4f5;
  font-size: 11px; font-weight: 700; color: #27272a; white-space: nowrap; }
.dvr-strip:not(.dvr-strip--stk) .dvr-first { transition: opacity .2s var(--ui-ease) var(--d), max-width .01s linear var(--d), padding .01s linear var(--d), margin .01s linear var(--d); }
.dvr.s6 .dvr-strip:not(.dvr-strip--stk) .dvr-first { max-width: 0; margin-left: 0; padding: 0; }

.dvr-hint { height: 28px; margin-top: 8px; padding: 0 2px; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #6b7280; transition: opacity .01s linear; }
.dvr-hint b { font-weight: 800; color: #3f3f46; }
.dvr.s6 .dvr-hint { opacity: 0; }

/* ── ders kartı (Türkçe) ── */
.dvr-subj { margin-top: 10px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); }
.dvr-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.dvr-sh b { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.dvr-sh > .dvr-x { justify-items: end; font-size: 11px; font-weight: 600; color: rgba(226, 232, 255, .82); }
.dvr-r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 8px 12px 8px 6px; border-top: 1px solid #f1f1f3; background: #fff;
  transition: background-color .3s var(--ui-ease) var(--d); }
.dvr-r:first-of-type { border-top: 0; }
.dvr-r--e { background: #fdf2f2; }
.dvr.s1 .dvr-r--r2, .dvr.s2 .dvr-r--r3 { background: #fff; }
.dvr-r__no { align-self: start; font-size: 12px; font-weight: 900; line-height: 16px; color: #71717a; text-align: center; font-variant-numeric: tabular-nums; }
.dvr-r__t { min-width: 0; }
.dvr-r__t b { display: block; font-size: 12.5px; font-weight: 600; line-height: 16px; color: #18181b; }
.dvr-r__t small { display: block; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #71717a; }
.dvr-r__t em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 14px; color: #6d28d9; }
.dvr-r__b { display: flex; align-items: center; gap: 4px; }
.dvr-b { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 8px; border-radius: 7px; background: #fff;
  box-shadow: inset 0 0 0 1px #e4e4e7; font-size: 11px; font-weight: 700; color: #3f3f46; white-space: nowrap;
  transition: background-color .25s var(--ui-ease) var(--d), color .25s var(--ui-ease) var(--d), box-shadow .25s var(--ui-ease) var(--d), opacity .01s linear; }
/* yayında düzey düğmeleri ve «—» disabled (opacity-60); not düğmesi disabled değil, tam opak (:206–213) */
.dvr.s6 .dvr-b:not(.dvr-b--note) { opacity: .6; }
.dvr-b--n { width: 26px; padding: 0; color: #52525b; }
.dvr-b--note { width: 28px; padding: 0; background: transparent; box-shadow: none; color: #52525b; }
.dvr-b--note .dvr-i { width: 15px; height: 15px; }
.dvr-b--a.dvr-on, .dvr.s1 .dvr-r--r2 .dvr-b--a { background: #15803d; color: #fff; box-shadow: inset 0 0 0 1px #15803d, 0 1px 2px rgba(21, 128, 61, .3); }
.dvr-b--d.dvr-on, .dvr.s2 .dvr-r--r3 .dvr-b--d { background: #0369a1; color: #fff; box-shadow: inset 0 0 0 1px #0369a1, 0 1px 2px rgba(3, 105, 161, .3); }
.dvr-b .dvr-hit { left: 62%; top: 64%; }
.dvr.s1:not(.s2) .dvr-r--r2 .dvr-b--a { animation: dvr-push .3s var(--ui-ease) .44s; }
.dvr.s1:not(.s2) .dvr-hit--r2 .ui-cur { animation: dvr-cur .9s var(--ui-ease) .1s both; }
.dvr.s1:not(.s2) .dvr-hit--r2 .dvr-rip { animation: dvr-rip .55s ease-out .45s both; }
.dvr.s2:not(.s3) .dvr-r--r3 .dvr-b--d { animation: dvr-push .3s var(--ui-ease) .44s; }
.dvr.s2:not(.s3) .dvr-hit--r3 .ui-cur { animation: dvr-cur-out 1.05s var(--ui-ease) .1s both; }
.dvr.s2:not(.s3) .dvr-hit--r3 .dvr-rip { animation: dvr-rip .55s ease-out .45s both; }

/* ── B · öğretmeninden öneriler ── */
.dvr-card { border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.dvr-rec { flex: none; overflow: hidden; }
.dvr-sh--rec { height: 38px; }
/* Demo Koleji'de yapay zekâ bağlı değil → düğme disabled (disabled:opacity-60), altında neden cümlesi */
.dvr-ai { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
  font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap; opacity: .6; }
.dvr-ai .dvr-i { width: 12px; height: 12px; }
.dvr-rec__b { display: flex; flex-direction: column; padding: 10px 12px 12px; }
.dvr-rec__info { margin-bottom: 8px; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #52525b; }
.dvr-lbl { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; line-height: 14px; color: #3f3f46; white-space: nowrap; }
.dvr-lbl i { font-style: normal; color: #dc2626; }
.dvr-lbl__s { font-weight: 500; color: #71717a; }
.dvr-ta { display: block; padding: 6px 9px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 11px; font-weight: 500; line-height: 15px; color: #27272a; }
.dvr-ta--sm { height: 66px; padding: 5px 8px; overflow: hidden; font-size: 10.5px; line-height: 13.5px; }
.dvr-ta--own { height: 30px; }
.dvr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 9px; }
.dvr-col { min-width: 0; }
.dvr-own { display: block; margin-top: 9px; }
.dvr-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dvr-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 64, .18); }
.dvr-btn .dvr-i { width: 13px; height: 13px; }
.dvr-btn--blk { background: #18181b; }
.dvr-btn--nx, .dvr-btn--pr { background: linear-gradient(135deg, var(--navy-soft), var(--navy)); }
.dvr-btn--ok { background: #047857; 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); }
.dvr-btn--gray { background: #f4f4f5; color: #27272a; box-shadow: none; }
.dvr-btn .dvr-hit { right: 30px; bottom: 9px; }
/* kayma bitince imleç gelir, basar; düğme ~1 sn görünür kalır */
.dvr.s3:not(.s4) .dvr-btn--done { animation: dvr-push .3s var(--ui-ease) 1.03s; }
.dvr.s3:not(.s4) .dvr-hit--done .ui-cur { animation: dvr-cur .8s var(--ui-ease) .75s both; }
.dvr.s3:not(.s4) .dvr-hit--done .dvr-rip { animation: dvr-rip .55s ease-out 1.03s both; }
.dvr.s5:not(.s6) .dvr-btn--pub { animation: dvr-push .3s var(--ui-ease) 1.43s; }
.dvr.s5:not(.s6) .dvr-hit--pub .ui-cur { animation: dvr-cur .8s var(--ui-ease) 1.15s both; }
.dvr.s5:not(.s6) .dvr-hit--pub .dvr-rip { animation: dvr-rip .55s ease-out 1.43s both; }

/* ── C · sayfanın sonu ── */
.dvr-tail { border-radius: 0 0 12px 12px; padding: 12px 12px 12px; box-shadow: 0 1px 0 var(--ui-line), 1px 0 0 var(--ui-line), -1px 0 0 var(--ui-line), 0 2px 3px rgba(16, 37, 64, .05); }
.dvr-tail .dvr-own { margin-top: 0; }
.dvr-seg--c .dvr-acts { margin-top: 16px; }
.dvr-works { margin-top: 22px; padding: 12px; }
.dvr-works__h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.dvr-works__h b { font-size: 12.5px; font-weight: 800; line-height: 17px; color: #18181b; white-space: nowrap; }
.dvr-works__h small { font-size: 10.5px; font-weight: 500; line-height: 14px; color: #52525b; }
.dvr-works__r { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.dvr-file { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: #3f3f46; white-space: nowrap; }
.dvr-file i { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 7px; background: #f4f4f5; font-style: normal; font-size: 11px; font-weight: 700; color: #27272a; }
.dvr-in { flex: 1; min-width: 0; display: flex; align-items: center; height: 32px; padding: 0 10px; overflow: hidden; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8;
  font-size: 11px; font-weight: 500; color: #9ca3af; white-space: nowrap; }
.dvr-pub { margin-top: 14px; padding: 12px; }
.dvr-pub > b { display: block; font-size: 12.5px; font-weight: 800; line-height: 17px; color: #18181b; }
.dvr-pub__s { display: block; margin: 3px 0 10px; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #52525b; }
.dvr-pub__r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dvr-in--ret { flex: 0 1 244px; }

/* ── velinin telefonu ── */
.dvr-scrim { position: absolute; z-index: 8; inset: 0; border-radius: inherit; background: rgba(11, 21, 38, .16); opacity: 0; transition: opacity .5s var(--ui-ease); }
.dvr.s7 .dvr-scrim { opacity: 1; }
.dvr-phone { position: absolute; z-index: 9; right: var(--pr); top: var(--ptop); width: var(--pw); height: var(--phh); padding: 6px; border-radius: 34px; background: linear-gradient(160deg, #26324a, #0b1322 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 4px rgba(11, 19, 34, .25), 0 30px 50px -22px rgba(11, 19, 34, .7);
  opacity: 0; translate: 0 70px; transition: opacity .35s var(--ui-ease), translate .7s cubic-bezier(.3, 1.25, .5, 1); }
.dvr.s7 .dvr-phone { opacity: 1; translate: 0 0; transition-delay: .15s; }
.dvr-scrn { position: relative; height: 100%; overflow: hidden; border-radius: 28px; background: #f5f6f8; }
.dvr-sb { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 14px 0 20px; background: #f5f6f8; color: #0b1526; }
.dvr-sb > b { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dvr-isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 16px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.dvr-sbi { display: flex; align-items: center; gap: 3px; }
.dvr-sbi .dvr-i { width: 11px; height: 11px; stroke-width: 2.4; }
.dvr-sbi .dvr-bat { width: 16px; height: 12px; }
.dvr-phd { position: absolute; z-index: 2; left: 0; right: 0; top: 26px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; background: #f5f6f8; color: #273246; }
.dvr-phd > .dvr-i { width: 16px; height: 16px; }
.dvr svg.dvr-logo { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 2px 5px -1px rgba(16, 37, 64, .4); }
.dvr-sp { flex: 1; }
.dvr-bell { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.dvr-bell .dvr-i { width: 15px; height: 15px; }
.dvr-bell::after { content: ""; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #f5f6f8; opacity: 0; scale: .4; transition: opacity .25s var(--ui-ease), scale .4s var(--dvr-spring); }
.dvr.s7 .dvr-bell::after { opacity: 1; scale: 1; transition-delay: .95s; }
.dvr-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 1px #e4e7ec, 0 2px 4px -2px rgba(16, 37, 64, .3); }
.dvr-ph { position: absolute; left: 0; right: 0; top: 64px; bottom: 0; overflow: hidden; }
.dvr-pv { position: absolute; inset: 0; padding: 2px 10px 52px; transition: opacity .3s var(--ui-ease), translate .45s var(--ui-ease); }
.dvr.s8 .dvr-pv--list { opacity: 0; translate: -24px 0; transition-delay: .45s; }
.dvr-pv--card { opacity: 0; translate: 28px 0; }
.dvr.s8 .dvr-pv--card { opacity: 1; translate: 0 0; transition-delay: .5s; }
.dvr-kids { display: flex; gap: 6px; margin-bottom: 8px; }
.dvr-kid { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 3px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #e4e7ec; font-size: 10.5px; font-weight: 700; color: #27272a; }
.dvr-kid i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #eef2f8; color: var(--navy-soft); font-style: normal; font-size: 10px; font-weight: 800; }
.dvr-kid.dvr-on { background: var(--navy-soft); color: #fff; box-shadow: 0 2px 6px -2px rgba(20, 61, 107, .6); }
.dvr-kid.dvr-on i { background: rgba(255, 255, 255, .2); color: #fff; }
.dvr-pt { display: block; margin-bottom: 8px; }
.dvr-pt b { display: block; font-size: 14px; font-weight: 800; line-height: 18px; letter-spacing: -.01em; color: #0f172a; }
.dvr-pt small { display: block; font-size: 10px; font-weight: 500; line-height: 13px; color: #52525b; }
.dvr-psec { display: block; margin: 0 0 6px; font-size: 11.5px; font-weight: 800; line-height: 15px; color: #0f172a; }
.dvr-plist { display: block; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e8ebf0, 0 1px 2px rgba(16, 37, 64, .05); }
.dvr-prow { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-top: 1px solid #f1f1f3; }
.dvr-prow:first-child { border-top: 0; }
.dvr-prow > i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #ecfdf5; color: #047857; }
.dvr-prow > i .dvr-i { width: 14px; height: 14px; }
.dvr-prow > span { flex: 1; min-width: 0; }
.dvr-prow b { display: block; font-size: 11px; font-weight: 800; line-height: 14px; color: #0f172a; text-wrap: balance; }
.dvr-prow small { display: block; font-size: 10px; font-weight: 600; line-height: 13px; color: #52525b; }
.dvr-chev { width: 12px; height: 12px; color: #a1a1aa; }
.dvr-pnote { display: flex; gap: 6px; margin-top: 8px; padding: 7px 8px; border-radius: 10px; background: #e8f0fc; font-size: 10px; font-weight: 600; line-height: 13px; color: #1e3a6b; }
.dvr-pnote .dvr-i { width: 13px; height: 13px; margin-top: 0; }
/* tek karne: üst parça kaydırılınca (kendi boyu kadar) Türkçe bölümü üstte durur */
.dvr-pk { position: relative; transition: translate 1s var(--dvr-scroll); }
.dvr.s9 .dvr-pk { translate: 0 calc(-100% - 4px); transition-delay: .2s; }
.dvr-pk2 { position: absolute; left: 0; right: 0; top: 100%; padding-top: 10px; }
.dvr-pbt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.dvr-pb { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e4e4e7; font-size: 11px; font-weight: 800; color: var(--navy-soft); }
.dvr-pb .dvr-i { width: 13px; height: 13px; }
.dvr-pb--pdf { background: var(--navy-soft); color: #fff; box-shadow: 0 2px 6px -2px rgba(20, 61, 107, .55); }
.dvr-pintro { display: block; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e8ebf0, 0 1px 2px rgba(16, 37, 64, .05); }
.dvr-pintro > span { display: block; font-size: 10.5px; font-weight: 500; line-height: 14.5px; color: #3f3f46; }
.dvr-pintro > span:first-child { margin-bottom: 4px; }
.dvr-pintro em { display: block; margin-top: 6px; font-style: normal; font-size: 10px; font-weight: 600; line-height: 13px; color: #6d28d9; }
.dvr-psub { display: block; margin: 0 2px 6px; font-size: 12.5px; font-weight: 800; line-height: 16px; color: #0f172a; }
.dvr-pitems { display: block; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e8ebf0, 0 1px 2px rgba(16, 37, 64, .05); }
.dvr-pit { display: block; padding: 7px 9px 8px; border-top: 1px solid #f1f1f3; }
.dvr-pit:first-child { border-top: 0; }
.dvr-pit > b { display: block; font-size: 10.5px; font-weight: 600; line-height: 14px; color: #18181b; }
.dvr-pit > b i { margin-right: 3px; font-style: normal; font-weight: 900; color: #a1a1aa; }
.dvr-lv { display: inline-flex; align-items: center; height: 18px; margin-top: 4px; padding: 0 6px; border-radius: 6px; font-style: normal; font-size: 10px; font-weight: 800; white-space: nowrap; }
.dvr-lv--ok { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px #a7f3d0; }
.dvr-lv--dev { background: #f0f9ff; color: #075985; box-shadow: inset 0 0 0 1px #bae6fd; }
.dvr.s9 .dvr-lv { animation: dvr-chip .45s var(--dvr-spring) calc(1.05s + var(--i) * 90ms) both; }
.dvr-pit small { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; line-height: 13px; color: #6d28d9; }
.dvr-tab { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 46px; padding: 6px 4px 12px; background: #fff; box-shadow: inset 0 1px 0 rgba(16, 37, 64, .08); }
.dvr-tab > span { position: relative; display: grid; place-items: center; color: #52525b; }
.dvr-tab .dvr-i { width: 16px; height: 16px; }
.dvr-tab__m em { position: absolute; top: -3px; left: calc(50% + 4px); display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #dc2626; box-shadow: 0 0 0 1.5px #fff;
  font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; color: #fff; }
.dvr-home { position: absolute; z-index: 3; left: 50%; bottom: 5px; width: 70px; height: 4px; margin-left: -35px; border-radius: 2px; background: rgba(11, 21, 38, .55); }
.dvr-nt { position: absolute; z-index: 4; left: 6px; right: 6px; top: 28px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; overflow: hidden; padding: 8px 9px 9px 8px; border-radius: 15px;
  background: rgba(255, 255, 255, .96); -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 34px -14px rgba(16, 37, 64, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10px; font-weight: 500; line-height: 13.5px; color: var(--ui-text-2); opacity: 0; translate: 0 -130%; transition: opacity .15s var(--ui-ease), translate .7s cubic-bezier(.34, 1.4, .64, 1); }
/* bildirim durum çubuğunun ALTINDAN iner (çubuk üstte, saatle üst üste binmez); s8'de dokununca yine altına çekilir */
.dvr.s7:not(.s8) .dvr-nt { opacity: 1; translate: 0 0; transition-delay: .85s; }
.dvr.s8 .dvr-nt { transition: opacity .2s var(--ui-ease) .5s, translate .4s var(--ui-ease) .38s; }
.dvr-nt img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.dvr-nt__h { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.dvr-nt__h b { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; line-height: 14px; color: var(--ui-text); }
.dvr-nt__h em { flex: none; font-style: normal; font-size: 10px; color: var(--ui-muted); }
.dvr-touch { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(20, 61, 107, .22); opacity: 0; pointer-events: none; }
.dvr.s8:not(.s9) .dvr-touch { animation: dvr-tap .5s ease-out .1s both; }
.dvr-tag { position: absolute; z-index: 5; left: 50%; bottom: -9px; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px 0 6px; border-radius: 999px; background: var(--sun); color: var(--sun-ink, #2a1c00);
  font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16, 37, 64, .45); opacity: 0; scale: .7; transition: opacity .3s var(--ui-ease), scale .45s var(--dvr-spring); }
.dvr-tag .dvr-i { width: 11px; height: 11px; stroke-width: 2.4; }
.dvr.s7 .dvr-tag { opacity: 1; scale: 1; transition-delay: 1.2s; }
/* pencerenin sahne etiketi (uygulama arayüzü değil, «Velinin telefonu» biçimi): üst kenarda, bandın / yapışkan şeridin üst
   boşluğuna biner, yazının üstüne binmez (altta s2 hedefini örtüyordu). «Öğretmenin ekranı» → s5 «Yöneticinin ekranı»; telefonla söner */
.dvr-wtag { position: absolute; z-index: 6; left: 50%; top: 2px; translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px 0 6px; border-radius: 999px;
  background: var(--sun); color: var(--sun-ink, #2a1c00); font-size: 10px; font-weight: 800; line-height: 19px; white-space: nowrap; box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16, 37, 64, .45);
  transition: opacity .3s var(--ui-ease); }
.dvr-wtag .dvr-i { width: 11px; height: 11px; stroke-width: 2.4; }
.dvr-wtag > .dvr-x { justify-items: center; }
.dvr.s5:not(.s6) .dvr-wtag { animation: dvr-popk .45s var(--dvr-spring) both; }
.dvr.s7 .dvr-wtag { opacity: 0; }

/* ══ DAR KAPLAR ══ */
@container (max-width: 660px) {
  .dvr-win { --hh: 0px; }
  .dvr-hint { display: none; }
}
/* 600 px altı: satır düğmeleri metnin altında (uygulamanın telefon düzeni), bant düğmeleri ve öneri kartının yan kutuları gizli */
@container (max-width: 600px) {
  .dvr-win { --tb: 184px; --pw: 214px; --phh: 398px; --ptop: 22px; --pr: 18px; }
  .dvr-bbtn { display: none; }
  .dvr-r { grid-template-columns: 22px minmax(0, 1fr); align-items: start; padding: 8px 10px 9px 6px; }
  .dvr-r__b { grid-column: 2; margin-top: 6px; }
  .dvr-rec__info, .dvr-lbl__s, .dvr-col--w, .dvr-seg--b .dvr-own { display: none; }
  /* tarayıcının «Dosya seçilmedi» yazısı düşer: «Açıklama (isteğe bağlı)» kutuya sığar (480'de 10 px kesiliyordu) */
  .dvr-file { gap: 0; }
  .dvr-file__s { display: none; }
  .dvr-cols { grid-template-columns: minmax(0, 1fr); }
  .dvr-ta--sm { height: auto; }
}
@container (max-width: 470px) {
  .dvr-win { --tb: 150px; --tc: 372px; --pw: 206px; --phh: 414px; --ptop: 14px; --pr: calc(50% - 103px); }
  .dvr-seg { padding-left: 10px; padding-right: 10px; }
  .dvr-band { margin-top: 10px; padding: 9px 11px; }
  .dvr-ico { display: none; }
  .dvr-ttl > b { font-size: 14px; }
  .dvr-ttl small { font-size: 11px; }
  .dvr-strip--stk { left: 10px; right: 10px; }
  .dvr-nav__w { display: none; }
  .dvr-nav { padding: 0 3px; }
  .dvr-flash { padding: 0 11px; font-size: 11px; }
  .dvr-flash .dvr-k { white-space: normal; line-height: 14px; }
  .dvr-works { display: none; }
  .dvr-in--ret { flex: 1 1 100%; }
  .dvr-pnote { display: none; }
  .dvr-cnt { font-size: 11.5px; }
  .dvr-first { margin-left: 4px; padding: 0 8px; }
  .dvr-sh--rec { flex-wrap: wrap; height: auto; min-height: 38px; padding: 6px 10px; row-gap: 4px; }
}