/* SAHNE · VELİ ÖĞRETMEN MESAJLAŞMASI VE RANDEVU (includes/scenes/conversations.php) — iki telefon. Adımlar:
   s1 veli mesajı yazar, «Gönder» · s2 yazışma balonu; öğretmenin kilit ekranına bildirim · s3 öğretmen bildirime dokunur →
   yazışma · s4 (27.10) veli «Görüşme randevusu al»: Çar 04 Kas → 11:50; öğretmenin telefonu kilit ekranına döner · s5 «Randevu
   talebi gönder» → «Onay bekliyor»; öğretmenin kilit ekranına «Yeni veli görüşmesi» · s6 öğretmen ayrıntıyı açar · s7 «Onayla»
   → «Planlandı» · s8 veliye «Görüşme randevunuz kesinleşti».
   Geniş kapta (≥ 470 px) telefonlar yan yana, aralarında giden ileti uçar; dar kapta üst üste durur, sıradaki adımın telefonu
   öne gelir (öğretmenin telefonu bildirim gelirken). Telefon boyu kap genişliğinden hesaplanır; adımlar arasında yükseklik
   değişmez. */
.cnv { container-type: inline-size; --cnv-ok: #047857; --cnv-ok-ink: #065f46; --cnv-spring: cubic-bezier(.34, 1.56, .64, 1); }
.cnv svg { display: block; }
.cnv-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── sahne zemini ── */
.cnv-st {
  --pw: min(232px, round(down, (100cqw - 36px) / 2, 1px));
  --ph: round(var(--pw) * 1.9, 1px);
  --gap: clamp(16px, 100cqw - 2 * var(--pw) - 96px, 124px);
  --top: 84px;                                   /* durum çubuğu 22 + üst çubuk 36 + çocuk şeridi 26 */
  --vis: calc(var(--ph) - 10px - var(--top));    /* kaydırılan gövdenin görünen boyu */
  position: relative; height: calc(var(--ph) + 36px); border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(20, 61, 107, .09) 1px, transparent 1.4px) 0 0 / 16px 16px,
    radial-gradient(120% 80% at 50% 0%, #f3f7fc 0%, #e8eef6 60%, #e2e9f2 100%);
  box-shadow: inset 0 0 0 1px rgba(20, 61, 107, .07), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.cnv-rail { position: absolute; z-index: 0; top: calc(12px + var(--ph) * .44); left: calc(50% - var(--gap) / 2); width: var(--gap); height: 2px;
  background: repeating-linear-gradient(90deg, rgba(20, 61, 107, .28) 0 4px, transparent 4px 9px); border-radius: 2px; }
.cnv-rail i { position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(20, 61, 107, .35); }

/* ── telefon ── */
.cnv-ph { position: absolute; z-index: 2; top: 12px; width: var(--pw); height: var(--ph); padding: 5px; border-radius: 32px;
  background: linear-gradient(160deg, #24364f 0%, #101c2e 45%, #0a1322 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(10, 22, 40, .25), 0 26px 44px -22px rgba(10, 22, 40, .65);
  transition: scale .55s var(--ui-ease), translate .55s var(--ui-ease), z-index 0s linear .2s; }
.cnv-ph--v { left: calc(50% - var(--gap) / 2 - var(--pw)); }
.cnv-ph--t { left: calc(50% + var(--gap) / 2); }
.cnv-scr { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: #f4f6f9; font-size: 10.5px; line-height: 1.35; color: var(--ui-text); }
.cnv-home { position: absolute; z-index: 9; left: 50%; bottom: 5px; width: 76px; height: 4px; margin-left: -38px; border-radius: 3px; background: rgba(13, 22, 36, .7); }
.cnv-dim { position: absolute; z-index: 10; inset: 0; border-radius: inherit; background: rgba(226, 233, 242, .52); opacity: 0; transition: opacity .45s var(--ui-ease); pointer-events: none; }
.cnv-tag { position: absolute; z-index: 3; left: 50%; bottom: -11px; display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 9px 0 7px; border-radius: 999px; translate: -50% 0;
  background: #fff; color: var(--navy); font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 1px rgba(20, 61, 107, .14), 0 4px 10px -4px rgba(16, 37, 64, .4); }
.cnv-tag .cnv-i { width: 11px; height: 11px; stroke-width: 2.4; }

/* durum çubuğu */
.cnv-sb { position: absolute; z-index: 8; inset: 0 0 auto; height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 17px; color: #0b1526; pointer-events: none; }
.cnv-sb > b { display: grid; font-size: 10px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cnv-isl { position: absolute; left: 50%; top: 5px; width: 50px; height: 14px; margin-left: -25px; border-radius: 999px; background: #05070b; }
.cnv-sbi { display: flex; align-items: center; gap: 2px; }
.cnv-sbi .cnv-i { width: 10px; height: 10px; stroke-width: 2.6; }
.cnv-sbi .cnv-bat { width: 15px; height: 11px; }
.cnv-ph--t .cnv-sb { color: #fff; transition: color .3s var(--ui-ease) .7s; }
.cnv.s3:not(.s4) .cnv-ph--t .cnv-sb, .cnv.s6 .cnv-ph--t .cnv-sb { color: #0b1526; }
.cnv.s4 .cnv-ph--t .cnv-sb { transition-delay: .2s; }
.cnv.s6 .cnv-ph--t .cnv-sb { transition-delay: .85s; }

/* çapraz geçiş yığını: katmanlar aynı ızgara hücresinde */
.cnv-x { display: grid; min-width: 0; }
.cnv-x > * { grid-area: 1 / 1; min-width: 0; }
.cnv [class*="on-"] { opacity: 0; transition: opacity .3s var(--ui-ease); }
.cnv:not(.s4) .on-0-4, .cnv.s4:not(.s5) .on-4-5, .cnv.s4:not(.s8) .on-4-8, .cnv.s5:not(.s8) .on-5-8, .cnv.s8 .on-8,
.cnv.s5:not(.s6) .on-5-6, .cnv.s6 .on-6,
.cnv:not(.s7) .on-0-7, .cnv.s7 .on-7, .cnv:not(.s8) .on-0-8 { opacity: 1; }
/* durum çubuğu ve kilit ekranı saati: eskisi söner, yenisi ardından gelir (aynı hücrede iki saat üst üste görünmez) */
.cnv-sb [class*="on-"], .cnv-clock > [class*="on-"] { transition: opacity .15s linear; }
.cnv.s4 .cnv-ph--v .cnv-sb .on-4-5 { transition-delay: .15s; }
.cnv.s5 .cnv-ph--v .cnv-sb .on-4-5 { transition-delay: .6s; }
.cnv.s5 .cnv-ph--v .cnv-sb .on-5-8 { transition-delay: .75s; }
.cnv.s8 .cnv-ph--v .cnv-sb .on-5-8 { transition-delay: 0s; }
.cnv.s8 .cnv-ph--v .cnv-sb .on-8 { transition-delay: .15s; }
/* öğretmen: s4'te 27.10 12:38 kilit ekranı (görünmezken geçer), s5'te bildirimle 12:40 */
.cnv.s4 .cnv-ph--t .on-4-5, .cnv.s4 .cnv-ph--t .on-4-8 { transition-delay: .15s; }
.cnv.s5 .cnv-ph--t .on-4-5 { transition-delay: 1.15s; }
.cnv.s5 .cnv-ph--t .on-5-6, .cnv.s5 .cnv-ph--t .on-5-8 { transition-delay: 1.3s; }
/* s6: «şimdi» yazan bildirime 12:40'ta dokunulur; saat ayrıntı ekranı açılırken 17:13 olur */
.cnv.s6 .cnv-ph--t .cnv-sb .on-5-6 { transition-delay: .8s; }
.cnv.s6 .cnv-ph--t .cnv-sb .on-6 { transition-delay: .95s; }

/* ── ekranlar (aynı kutuda üst üste; yalnız opacity + küçük kayma) ── */
.cnv-pg { position: absolute; inset: 0; padding-top: 22px; opacity: 0; translate: 10px 0; transition: opacity .35s var(--ui-ease), translate .5s var(--ui-ease); }
.cnv-v1, .cnv-t0 { opacity: 1; translate: 0 0; }
.cnv-bd { padding: 4px 10px 0; }
.cnv-h1 { margin: 2px 0 6px; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; line-height: 20px; color: #111a2c; white-space: nowrap; }
.cnv-h2 { display: block; font-size: 11.5px; font-weight: 800; color: #111a2c; }
.cnv-card { display: block; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .07), 0 1px 2px rgba(16, 37, 64, .05), 0 10px 20px -16px rgba(16, 37, 64, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
.cnv-vp { position: absolute; left: 0; right: 0; top: var(--top); bottom: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 8px, #000 calc(100% - 22px), rgba(0, 0, 0, .15) 100%);
  mask-image: linear-gradient(transparent, #000 8px, #000 calc(100% - 22px), rgba(0, 0, 0, .15) 100%); }
.cnv-scrl { padding-bottom: 18px; translate: 0 0; transition: translate .7s cubic-bezier(.32, .12, .2, 1); }
/* kaydırmada yukarı çıkan üst bölüm (başlık + üst kartlar): satır 1fr → 0fr, içerik alta yaslı → kaydırma gibi görünür ve
   kart sınırında durur (görünen alanın tepesinde yarım kart ya da asılı satır kalmaz); kenar payı kart gölgesi için */
.cnv-fold { display: grid; grid-template-rows: 1fr; margin: 0 -4px; padding: 0 4px 7px; overflow: hidden; transition: grid-template-rows .6s cubic-bezier(.32, .12, .2, 1); }
.cnv-fold > div { min-height: 0; align-self: end; transition: opacity .2s linear; }   /* katlanınca söner: son kartın alt gölgesi şerit bırakmaz */
.cnv-fold + .cnv-card { margin-top: 0; }

/* velinin uygulama kabuğu */
.cnv-pt { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; }
.cnv-pt > .cnv-i { width: 15px; height: 15px; color: #1a2233; }
.cnv svg.cnv-logo { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 2px 5px -1px rgba(16, 37, 64, .45); }
.cnv-sp { flex: 1; }
.cnv-bell { position: relative; display: grid; place-items: center; width: 24px; height: 24px; color: #273246; }
.cnv-bell .cnv-i { width: 14px; height: 14px; }
.cnv-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 #f4f6f9; }
.cnv-me { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 11px; font-weight: 800; box-shadow: 0 0 0 1px var(--ui-line-2), 0 1px 2px rgba(16, 37, 64, .1); }
.cnv-kids { display: flex; gap: 5px; height: 26px; padding: 2px 10px 0; }
.cnv-kids > * { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 3px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.cnv-kids i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 800; }
.cnv-kids b { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 8px -4px rgba(20, 61, 107, .8); }
.cnv-kids b i { background: rgba(255, 255, 255, .22); }
.cnv-kids span { background: #fff; color: #1a2233; box-shadow: 0 0 0 1px var(--ui-line-2); }
.cnv-kids span i { color: var(--navy-soft); background: var(--ui-primary-soft); }

/* kişi kartı (Kime · karşı kişi) */
.cnv-to, .cnv-who { display: flex; align-items: center; gap: 8px; padding: 7px 9px; }
.cnv-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ui-primary-soft); color: var(--navy-soft); font-size: 12px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .12); }
.cnv-to__t { flex: 1; min-width: 0; line-height: 1.25; }
.cnv-to__t small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.cnv-to__t b { display: block; font-size: 12px; font-weight: 800; letter-spacing: -.01em; color: #111a2c; }
.cnv-to__t > span { display: block; font-size: 10px; font-weight: 600; color: var(--ui-text-2); text-wrap: pretty; }
.cnv-to__t small.cnv-mut { margin-top: 1px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.3; text-wrap: pretty; }
.cnv-lnk { flex: none; font-size: 10.5px; font-weight: 800; color: var(--navy-soft); }
/* karşı kişi kartı (V2, «Kaldır») ve randevu kişi kartı (V3, «Değiştir»): telefon dar, ad düğmeyle aynı satırda kalır;
   alt satırlar düğmenin altına da uzar (yoksa ad ve görev beş satıra bölünüyordu) */
.cnv-who, .cnv-v3 .cnv-to { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; row-gap: 0; }
.cnv-who .cnv-to__t, .cnv-v3 .cnv-to__t { display: contents; }
.cnv-who .cnv-av { grid-row: 1 / 3; }
.cnv-v3 .cnv-to .cnv-av { grid-row: 1 / 4; }
.cnv-who .cnv-to__t b, .cnv-v3 .cnv-to__t b { grid-column: 2; grid-row: 1; white-space: nowrap; }
.cnv-who .cnv-to__t > span, .cnv-v3 .cnv-to__t > span, .cnv-v3 .cnv-to__t small.cnv-mut { grid-column: 2 / 4; }
.cnv-who .cnv-chip, .cnv-v3 .cnv-to .cnv-lnk { grid-column: 3; grid-row: 1; }
.cnv-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 8px; background: #fff; font-size: 10px; font-weight: 800; color: #1f2937; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .04); }
.cnv-chip .cnv-i { width: 11px; height: 11px; stroke-width: 2.2; }

/* form */
.cnv-form { margin-top: 7px; padding: 8px 9px 9px; }
.cnv-lbl { display: block; margin: 0 0 3px; font-size: 10px; font-weight: 800; color: var(--ui-text-2); }
.cnv-lbl em { font-style: normal; font-weight: 600; }
.cnv-in { position: relative; display: block; min-height: 26px; padding: 5px 8px; border-radius: 8px; background: #fff; font-size: 10.5px; font-weight: 600; color: #111a2c;
  box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.cnv-in + .cnv-lbl { margin-top: 7px; }
.cnv-ta { min-height: 74px; line-height: 14px; }
.cnv-typed { display: block; clip-path: inset(0 0 100% 0); transition: clip-path 1s steps(6, end) .1s; }
.cnv-caret { display: inline-block; width: 1.5px; height: 12px; margin-left: 1px; vertical-align: -2px; background: var(--navy-soft); }
.cnv-v1 .cnv-ta::before { content: ""; position: absolute; left: 8px; top: 6px; width: 1.5px; height: 12px; background: var(--navy-soft); }
.cnv.s1 .cnv-v1 .cnv-ta::before { opacity: 0; }
.cnv-v1 .cnv-ta { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .13); }
.cnv-caret { animation: cnv-blink 1s steps(1) infinite; opacity: 0; transition: opacity .1s linear 1.05s; }
.cnv.s1 .cnv-caret { opacity: 1; }
.cnv-v1 .cnv-ta::before { animation: cnv-blink 1s steps(1) infinite; }
@keyframes cnv-blink { 50% { opacity: 0; } }
.cnv-drop { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 7px; padding: 6px 8px; border-radius: 9px; border: 1.5px dashed #c3ccd8; background: #fafbfd; text-align: center; color: var(--ui-text-2); }
.cnv-drop b { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; }
.cnv-drop .cnv-i { width: 12px; height: 12px; }
.cnv-drop small { font-size: 10px; font-weight: 600; line-height: 13px; color: var(--ui-muted); text-wrap: balance; }
.cnv-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; margin-top: 8px; border-radius: 9px; font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #1d4f86, var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .22), 0 8px 16px -10px rgba(16, 37, 64, .6); }
.cnv-btn .cnv-i { width: 12px; height: 12px; stroke-width: 2.4; }

/* yazışma */
.cnv-day { width: max-content; margin: 9px auto 7px; padding: 2px 9px; border-radius: 999px; background: #e7ebf2; font-size: 10px; font-weight: 700; color: #4a5568; }
.cnv-bub { width: max-content; max-width: 84%; }
.cnv-bub > span { display: block; padding: 7px 10px; border-radius: 13px; font-size: 10.5px; font-weight: 500; line-height: 14px; text-wrap: pretty; }
.cnv-bub small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.cnv-bub--me { margin-left: auto; text-align: right; }
.cnv-bub--me > span { text-align: left; border-bottom-right-radius: 4px; color: #fff; background: linear-gradient(160deg, #1f5590, var(--navy)); box-shadow: 0 6px 14px -8px rgba(20, 61, 107, .8); }
.cnv-bub--in > span { border-bottom-left-radius: 4px; background: #fff; color: #172238; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 6px 14px -10px rgba(16, 37, 64, .35); }
.cnv-v2 .cnv-bub, .cnv-t1 .cnv-bub { opacity: 0; translate: 0 10px; scale: .96; transform-origin: bottom right; transition: opacity .3s var(--ui-ease) .25s, translate .5s var(--cnv-spring) .25s, scale .5s var(--cnv-spring) .25s; }
.cnv-t1 .cnv-bub { transform-origin: bottom left; }
.cnv.s2 .cnv-v2 .cnv-bub, .cnv.s3 .cnv-t1 .cnv-bub { opacity: 1; translate: 0 0; scale: 1; }
.cnv.s3 .cnv-t1 .cnv-bub { transition-delay: .95s; }
.cnv-rep { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 10px; font-weight: 700; color: #5b6475; }
.cnv-rep .cnv-i { width: 10px; height: 10px; }
.cnv-cmp { position: absolute; left: 8px; right: 8px; bottom: 14px; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 10px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line-2), 0 4px 12px -8px rgba(16, 37, 64, .4); }
.cnv-cmp span { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 500; color: var(--ui-muted); white-space: nowrap; }
.cnv-cmp b { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 9px; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 800; }
.cnv-cmp b .cnv-i { width: 11px; height: 11px; stroke-width: 2.4; }

/* randevu: gün ve saat */
.cnv-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; padding: 6px 9px; border-radius: 10px; background: #e7f0fb; color: #1e4a7a; font-size: 10px; font-weight: 700; line-height: 13px; }
.cnv-note .cnv-i { width: 12px; height: 12px; margin-top: 1px; }
.cnv-pick { margin-top: 7px; padding: 8px 9px 9px; }
.cnv-days { display: flex; gap: 6px; margin: 6px 0 8px; }
.cnv-dc { display: flex; flex-direction: column; align-items: center; width: 50px; padding: 4px 0 5px; border-radius: 10px; background: #fff; color: #172238; line-height: 1.15;
  box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.cnv-dc small { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.cnv-dc small + b + small { text-transform: none; font-weight: 600; }
.cnv-dc b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cnv-dc em { margin-top: 1px; font-style: normal; font-size: 10px; font-weight: 700; opacity: .8; }
.cnv-dc.on { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 12px -8px rgba(20, 61, 107, .9); }
.cnv-leg { display: block; margin: 4px 0 5px; font-size: 10px; font-weight: 700; color: var(--ui-text-2); }
.cnv-slot { position: relative; display: inline-grid; place-items: center; width: 62px; height: 28px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #172238;
  box-shadow: inset 0 0 0 1px var(--ui-line-2); transition: background-color .25s var(--ui-ease), color .25s var(--ui-ease), box-shadow .25s var(--ui-ease); }
.cnv-konu { margin-top: 7px; padding: 8px 9px 9px; }
.cnv-konu .cnv-ta { min-height: 0; }
.cnv-sel { margin-top: 7px; padding: 0 2px; font-size: 10px; letter-spacing: -.005em; font-weight: 800; color: #172238; opacity: 0; translate: 0 4px; transition: opacity .3s var(--ui-ease), translate .35s var(--ui-ease); }

/* öğretmen görüşmeleri (veli) */
.cnv-flash { display: block; padding: 6px 9px; border-radius: 10px; background: #e9f8ef; color: #0d6b3a; font-size: 10px; font-weight: 700; line-height: 13px; box-shadow: inset 0 0 0 1px rgba(13, 107, 58, .12); }
.cnv-flash > span { display: block; padding-left: 17px; text-indent: -17px; text-wrap: pretty; }
.cnv-flash .cnv-i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; stroke-width: 2.4; }
.cnv-flash--v { margin: 2px 0 6px; }
.cnv-btn--new { margin-top: 7px; }
.cnv-ttl { display: flex; align-items: baseline; justify-content: space-between; margin: 9px 1px 5px; }
.cnv-ttl b { font-size: 12px; font-weight: 800; color: #111a2c; }
.cnv-ttl small { font-size: 10px; font-weight: 700; color: var(--ui-muted); }
.cnv-mt { padding: 8px 10px 9px; }
.cnv-mt__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 6px; line-height: 1.2; }
.cnv-mt__h small { font-size: 10px; font-weight: 700; color: var(--ui-muted); white-space: nowrap; }
.cnv-mt__h > .cnv-x, .cnv-dt__h > .cnv-x { flex: none; }
.cnv-mt__t { display: block; margin-top: 1px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 19px; font-variant-numeric: tabular-nums; color: #111a2c; white-space: nowrap; }
.cnv-mt__k { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--ui-text-2); }
.cnv-mt__k b { font-weight: 800; color: #111a2c; }
.cnv-bdg { justify-self: start; height: 18px; padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.cnv-bdg--wait { background: #fdf0d5; color: #7a4a05; }
.cnv-bdg--ok { background: #e0eefc; color: #12467e; }
.cnv-bdg.on-8, .cnv-bdg.on-7 { scale: .7; transition: opacity .3s var(--ui-ease), scale .45s var(--cnv-spring); }
.cnv.s8 .cnv-bdg.on-8, .cnv.s7 .cnv-bdg.on-7 { scale: 1; }
.cnv-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 10.5px; font-weight: 600; line-height: 13px; color: var(--ui-text-2); }
.cnv-row:first-of-type { margin-top: 6px; }
.cnv-row .cnv-i { width: 12px; height: 12px; margin-top: .5px; color: #6b7587; }
.cnv-row--wait { overflow: hidden; max-height: 30px; color: #8a4b06; font-weight: 800; transition: max-height .4s var(--ui-ease), margin .4s var(--ui-ease), opacity .3s var(--ui-ease); }
.cnv-row--wait .cnv-i { color: currentColor; }
.cnv-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cnv-mt .cnv-acts { padding-top: 8px; border-top: 1px solid #edf0f4; }
.cnv-chip--b { color: var(--navy-soft); }
.cnv-chip--r { color: #b42318; box-shadow: none; padding: 0 4px; }

/* öğretmen kabuğu */
.cnv-oh { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px; background: linear-gradient(180deg, #e9eef6, #f1f4f9); box-shadow: inset 0 -1px 0 #dde3ec; }
.cnv-ob { position: relative; flex: none; display: grid; place-items: center; width: 26px; height: 26px; 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); }
.cnv-ob .cnv-i { width: 13px; height: 13px; }
.cnv-ob--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; }
.cnv-ot { flex: 1; min-width: 0; line-height: 1.2; }
.cnv-ot b { display: block; font-size: 12px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnv-ot span { display: block; font-size: 10px; font-weight: 600; color: var(--ui-muted); white-space: nowrap; }
.cnv-oav { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.cnv-t1 .cnv-bd, .cnv-t2 .cnv-bd { padding-top: 8px; }
.cnv-stu { padding: 8px 10px 9px; line-height: 1.3; }
.cnv-stu b { display: block; font-size: 11.5px; font-weight: 800; color: #111a2c; }
.cnv-stu b span { font-weight: 600; color: var(--ui-muted); }
.cnv-stu small { display: block; font-size: 10px; font-weight: 600; color: var(--ui-muted); }
.cnv-stu .cnv-acts { margin-top: 6px; }

/* öğretmen: kilit ekranı */
.cnv-t0 { background: radial-gradient(130% 70% at 30% 0%, #2c5d93 0%, transparent 60%), linear-gradient(170deg, var(--navy-night), var(--navy) 55%, #1c4f84); color: #fff; text-align: center; }
.cnv-lk { display: grid; place-items: center; margin-top: 10px; opacity: .85; }
.cnv-lk .cnv-i { width: 12px; height: 12px; }
.cnv-clock { display: grid; margin-top: 2px; font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 46px; font-variant-numeric: tabular-nums; }
.cnv-date { display: grid; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .85); }

/* bildirim kartı */
.cnv-push { position: absolute; z-index: 7; left: 6px; right: 6px; top: 25px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; padding: 8px 9px 9px 8px; border-radius: 14px; text-align: left;
  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 18px 34px -14px rgba(16, 37, 64, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 10px; font-weight: 500; line-height: 13px; color: var(--ui-text-2); opacity: 0; translate: 0 -120%; transition: opacity .3s var(--ui-ease), translate .65s cubic-bezier(.34, 1.4, .64, 1); }
.cnv-push img { width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.cnv-push__h { display: flex; align-items: baseline; gap: 5px; margin-bottom: 1px; }
.cnv-push__h b { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 800; color: var(--ui-text); letter-spacing: -.005em; line-height: 13px; }
.cnv-push__h em { flex: none; font-style: normal; font-size: 10px; color: var(--ui-muted); }
.cnv-push--v8 { min-height: 109px; }
.cnv-push--t2, .cnv-push--t5 { top: 112px; translate: 0 14px; scale: .96; transition: opacity .35s var(--ui-ease), translate .6s var(--cnv-spring), scale .6s var(--cnv-spring); }

/* öğretmen: görüşme ayrıntısı */
.cnv-dt { padding: 8px 10px 4px; }
.cnv-dt__h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 5px 6px; padding-bottom: 6px; line-height: 1.2; }
.cnv-dt__h > span:first-child { flex: 1 1 auto; min-width: 0; }
.cnv-dt__h b { display: block; font-size: 12px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #111a2c; }
.cnv-dt__h b span { white-space: nowrap; }
.cnv-dt__h small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: var(--ui-text-2); }
.cnv-dr { display: flex; gap: 7px; padding: 5px 0; border-top: 1px solid #eef1f5; font-size: 10.5px; font-weight: 700; line-height: 13px; color: #111a2c; }
.cnv-dr > .cnv-i { width: 12px; height: 12px; margin-top: 1px; color: #98a1b0; }
.cnv-dr small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.cnv-dr em { font-style: normal; font-weight: 600; color: var(--ui-muted); }
.cnv-dec { margin-top: 7px; }
.cnv-ap { padding: 8px 10px 9px; }
.cnv-ap .cnv-acts { margin-top: 6px; }
.cnv-ap .cnv-btn { flex: 1; margin: 0; height: 28px; }
.cnv-btn--ok { background: linear-gradient(180deg, #058a63, var(--cnv-ok)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(4, 120, 87, .3), 0 6px 12px -8px rgba(4, 120, 87, .8); }
.cnv-btn--no { background: #fff; color: #b42318; box-shadow: inset 0 0 0 1px #f3c4bf; }
.cnv-dec .cnv-flash { align-self: start; padding: 9px 10px; }
.cnv-dec .on-7 { translate: 0 6px; transition: opacity .3s var(--ui-ease), translate .45s var(--cnv-spring); }
.cnv.s7 .cnv-dec .on-7 { translate: 0 0; transition-delay: .7s; }
.cnv.s7 .cnv-dec .on-0-7 { transition-delay: .55s; }
.cnv.s7 .cnv-bdg.on-7, .cnv.s7 .cnv-dt .on-0-7 { transition-delay: .6s; }

/* ── dokunuş: parmak ucu + halka dalgası (hedefin içinde) ── */
.cnv-tap { position: absolute; z-index: 9; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .8), rgba(226, 233, 243, .55) 70%);
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .3), 0 2px 5px rgba(16, 37, 64, .25), 0 10px 18px -8px rgba(16, 37, 64, .45); opacity: 0; }
.cnv-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; }
.cnv-tap--send { left: 64%; top: 60%; }
.cnv-tap--slot { left: 58%; top: 62%; }
.cnv-tap--req { left: 70%; top: 60%; }
.cnv-tap--n1 { left: 58%; top: 40px; }
.cnv-tap--n2 { left: 58%; top: 34px; }
.cnv-tap--ok { left: 62%; top: 60%; }
@keyframes cnv-tap { 0% { opacity: 0; scale: 1.2; transform: translate(10px, 12px); } 30% { opacity: 1; scale: 1; transform: none; } 45% { scale: .76; } 60% { scale: 1; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(6px, 8px); } }
@keyframes cnv-wave { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: 2.3; } }
@keyframes cnv-push { 50% { scale: .96; filter: brightness(.9); } }
.cnv.s1:not(.s2) .cnv-tap--send { animation: cnv-tap .9s var(--ui-ease) 1.05s both; }
.cnv.s1:not(.s2) .cnv-tap--send i { animation: cnv-wave .55s ease-out 1.38s both; }
.cnv.s1:not(.s2) .cnv-btn--send { animation: cnv-push .35s var(--ui-ease) 1.35s; }
.cnv.s3:not(.s4) .cnv-tap--n1 { animation: cnv-tap .8s var(--ui-ease) .3s both; }
.cnv.s3:not(.s4) .cnv-tap--n1 i { animation: cnv-wave .55s ease-out .57s both; }
.cnv.s4:not(.s5) .cnv-tap--slot { animation: cnv-tap .85s var(--ui-ease) 1.4s both; }
.cnv.s4:not(.s5) .cnv-tap--slot i { animation: cnv-wave .55s ease-out 1.67s both; }
.cnv.s5:not(.s6) .cnv-tap--req { animation: cnv-tap .8s var(--ui-ease) 0s both; }
.cnv.s5:not(.s6) .cnv-tap--req i { animation: cnv-wave .55s ease-out .27s both; }
.cnv.s5:not(.s6) .cnv-btn--req { animation: cnv-push .35s var(--ui-ease) .25s; }
.cnv.s6:not(.s7) .cnv-tap--n2 { animation: cnv-tap .8s var(--ui-ease) .4s both; }
.cnv.s6:not(.s7) .cnv-tap--n2 i { animation: cnv-wave .55s ease-out .67s both; }
.cnv.s7:not(.s8) .cnv-tap--ok { animation: cnv-tap .8s var(--ui-ease) .05s both; }
.cnv.s7:not(.s8) .cnv-tap--ok i { animation: cnv-wave .55s ease-out .32s both; }
.cnv.s7:not(.s8) .cnv-btn--ok { animation: cnv-push .35s var(--ui-ease) .3s; }

/* ── iki telefon arasında uçan ileti (geniş kap) ── */
.cnv-fly { position: absolute; z-index: 5; left: 50%; top: calc(12px + var(--ph) * .44 - 15px); display: grid; place-items: center; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%;
  background: linear-gradient(150deg, #2a64a3, var(--navy)); color: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 8px 18px -6px rgba(20, 61, 107, .75); }
.cnv-fly .cnv-i { width: 14px; height: 14px; stroke-width: 2.2; }
.cnv-fly--3 { background: linear-gradient(150deg, #10a374, var(--cnv-ok)); }
@keyframes cnv-fly-r {
  0% { opacity: 0; transform: translate(calc(var(--gap) / -2 - 22px), 10px) scale(.6); }
  20% { opacity: 1; transform: translate(calc(var(--gap) / -2 - 10px), 0) scale(1); }
  80% { opacity: 1; transform: translate(calc(var(--gap) / 2 + 10px), -6px) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--gap) / 2 + 24px), 0) scale(.6); }
}
@keyframes cnv-fly-l {
  0% { opacity: 0; transform: translate(calc(var(--gap) / 2 + 22px), 10px) scale(.6); }
  20% { opacity: 1; transform: translate(calc(var(--gap) / 2 + 10px), 0) scale(1); }
  80% { opacity: 1; transform: translate(calc(var(--gap) / -2 - 10px), -6px) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--gap) / -2 - 24px), 0) scale(.6); }
}
.cnv.s2:not(.s3) .cnv-fly--1 { animation: cnv-fly-r .85s cubic-bezier(.45, .05, .3, 1) .15s both; }
.cnv.s5:not(.s6) .cnv-fly--2 { animation: cnv-fly-r .85s cubic-bezier(.45, .05, .3, 1) .55s both; }
.cnv.s8 .cnv-fly--3 { animation: cnv-fly-l .85s cubic-bezier(.45, .05, .3, 1) .05s both; }

/* ══ ADIMLAR ══ */
/* s1: mesaj yazılır (satır satır), gövde aşağı kayar, «Gönder» */
.cnv.s1 .cnv-typed { clip-path: inset(0 0 0 0); }
.cnv-v1 .cnv-scrl { translate: 0 0; }
.cnv.s1 .cnv-v1 .cnv-scrl { translate: 0 min(0px, calc(var(--vis) - 100%)); transition-delay: .7s; transition-duration: .55s; }
/* telefon kısa (geniş kap ya da en dar telefon): «Kime» kartı «Gönder» ile birlikte sığmaz → başlıkla birlikte tümüyle yukarı çıkar */
@container (min-width: 470px) {
  .cnv.s1 .cnv-v1 .cnv-fold { grid-template-rows: 0fr; transition-delay: .7s; transition-duration: .55s; }
  .cnv.s1 .cnv-v1 .cnv-fold > div { opacity: 0; transition-delay: 1.15s; }
}
@container (max-width: 329px) {
  .cnv.s1 .cnv-v1 .cnv-fold { grid-template-rows: 0fr; transition-delay: .7s; transition-duration: .55s; }
  .cnv.s1 .cnv-v1 .cnv-fold > div { opacity: 0; transition-delay: 1.15s; }
}
/* s2: yazışma ekranı + balon; öğretmenin kilit ekranına bildirim (s2 2,3 sn: bildirim ≈1,5 sn'de oturur, okunur) */
.cnv.s2 .cnv-v1 { opacity: 0; translate: -10px 0; }
.cnv.s2 .cnv-v2 { opacity: 1; translate: 0 0; }
.cnv.s2 .cnv-push--t2 { opacity: 1; translate: 0 0; scale: 1; transition-delay: .9s; }
/* s3: öğretmen bildirime dokunur (.3 sn) → yazışma (s3 2,2 sn: balon ≈1,45 sn'de oturur) */
.cnv.s3 .cnv-t0 { opacity: 0; transition-delay: .65s; }
.cnv.s3 .cnv-t1 { opacity: 1; translate: 0 0; transition-delay: .7s; }
.cnv.s3 .cnv-push--t2 { opacity: 0; transition-delay: 1.1s; }   /* kilit ekranı söndükten sonra: s4'te geri gelen kilit ekranında eski bildirim yok */
/* s4: veli · Görüşme randevusu al: başlık, Burak Yalçın kartı ve Kasım hakkı notu 1 sn okunur; sonra üst bölüm yukarı
   çıkar (1,0–1,6 sn; «Gün seçin» kartı tepeye oturur), parmak 11:50'ye iner (≈1,75 sn), «Seçilen» satırı gelir.
   s4 süresi 2,7 sn. Öğretmenin telefonu 27.10 12:38 kilit ekranına döner. */
.cnv.s4 .cnv-v2 { opacity: 0; translate: -10px 0; }
.cnv.s4 .cnv-v3 { opacity: 1; translate: 0 0; }
.cnv.s4 .cnv-v3 .cnv-fold { grid-template-rows: 0fr; transition-delay: 1s; }
.cnv.s4 .cnv-v3 .cnv-fold > div { opacity: 0; transition-delay: 1.45s; }
.cnv.s4 .cnv-v3 .cnv-scrl { translate: 0 min(0px, calc(var(--vis) - 100%)); transition-delay: 1s; transition-duration: .6s; }
.cnv.s4 .cnv-t1 { opacity: 0; translate: -10px 0; transition-delay: 0s; }
.cnv.s4 .cnv-t0 { opacity: 1; transition-delay: .2s; }
.cnv.s4 .cnv-slot { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 12px -8px rgba(20, 61, 107, .9); transition-delay: 1.75s; }
.cnv.s4 .cnv-sel { opacity: 1; translate: 0 0; transition-delay: 1.85s; }
/* s5: «Randevu talebi gönder» → Öğretmen görüşmeleri; öğretmene «Yeni veli görüşmesi» */
.cnv.s5 .cnv-v3 { opacity: 0; translate: -10px 0; transition-delay: .6s; }
.cnv.s5 .cnv-v4 { opacity: 1; translate: 0 0; transition-delay: .65s; }
.cnv-v4 .cnv-card, .cnv-v4 .cnv-flash, .cnv-v4 .cnv-btn, .cnv-v4 .cnv-ttl { opacity: 0; translate: 0 8px; transition: opacity .3s var(--ui-ease), translate .5s var(--cnv-spring); }
.cnv.s5 .cnv-v4 .cnv-flash { opacity: 1; translate: 0 0; transition-delay: .8s; }
.cnv.s5 .cnv-v4 .cnv-btn { opacity: 1; translate: 0 0; transition-delay: .88s; }
.cnv.s5 .cnv-v4 .cnv-ttl { opacity: 1; translate: 0 0; transition-delay: .94s; }
.cnv.s5 .cnv-v4 .cnv-card { opacity: 1; translate: 0 0; transition-delay: 1s; }
.cnv.s5 .cnv-push--t5 { opacity: 1; translate: 0 0; scale: 1; transition-delay: 1.15s; }
/* s6: öğretmen kilit ekranındaki bildirime dokunur (.4 sn) → «Veli görüşmesi» */
.cnv.s6 .cnv-t0 { opacity: 0; transition-delay: .8s; }
.cnv.s6 .cnv-t2 { opacity: 1; translate: 0 0; transition-delay: .85s; }
/* s8 kayması üstten sabit: bildirim (en az 109 px, alt kenarı 134 px) başlığı tümüyle örter, kenarı yazı kesmez;
   telefon kısaysa (kap < 336 ya da 470–487 px) düğme de bildirimin altında kalır, kartın alt satırı görünür */
.cnv.s8 .cnv-v4 .cnv-scrl { translate: 0 var(--cnv-s8y, -36px); transition-delay: .3s; }
/* s8: veliye «Görüşme randevunuz kesinleşti»; kart «Planlandı», bekleme satırı kapanır; eski ileti söner */
.cnv.s8 .cnv-push--v8 { opacity: 1; translate: 0 0; transition-delay: .85s; }
.cnv.s8 .cnv-row--wait { max-height: 0; margin-top: 0; opacity: 0; transition-delay: .95s; }
.cnv.s8 .cnv-v4 .cnv-flash { opacity: 0; transition-delay: .3s; }
.cnv.s8 .cnv-bdg.on-8, .cnv.s8 .cnv-bdg.on-0-8 { transition-delay: 1.05s; }

/* ══ DAR KAP: telefonlar üst üste, sıradaki adımın telefonu öne gelir ══ */
@container (max-width: 469px) {
  .cnv-st { --pw: min(232px, round(down, 64cqw, 1px)); }
  .cnv-rail, .cnv-fly { display: none; }
  .cnv-ph--v { left: 8px; transform-origin: 0 50%; }
  .cnv-ph--t { left: auto; right: 8px; transform-origin: 100% 50%; z-index: 1; scale: .9; }
  .cnv-ph--t .cnv-dim { opacity: 1; }
  .cnv-ph--v .cnv-tag { left: 14px; translate: 0 0; }
  .cnv-ph--t .cnv-tag { left: auto; right: 14px; translate: 0 0; }
  /* arkadaki telefonun etiketi öndekinin altında kesik görünmesin: yalnız öndekinin etiketi */
  .cnv-tag { transition: opacity .3s var(--ui-ease); }
  .cnv-ph--t .cnv-tag, .cnv.s2:not(.s4) .cnv-ph--v .cnv-tag, .cnv.s5:not(.s8) .cnv-ph--v .cnv-tag { opacity: 0; }
  .cnv.s2:not(.s4) .cnv-ph--t .cnv-tag, .cnv.s5:not(.s8) .cnv-ph--t .cnv-tag { opacity: 1; }
  /* öğretmen öne: bildirim gelirken s2 (balondan sonra, .8 sn) – s3 ve s5 («Onay bekliyor» kartından sonra, 1,4 sn) – s7;
     bildirim öndeki telefona iner */
  .cnv.s2:not(.s4) .cnv-ph--t, .cnv.s5:not(.s8) .cnv-ph--t { z-index: 3; scale: 1; }
  .cnv.s2:not(.s4) .cnv-ph--v, .cnv.s5:not(.s8) .cnv-ph--v { scale: .9; }
  .cnv.s2:not(.s4) .cnv-ph--t .cnv-dim, .cnv.s5:not(.s8) .cnv-ph--t .cnv-dim { opacity: 0; }
  .cnv.s2:not(.s4) .cnv-ph--v .cnv-dim, .cnv.s5:not(.s8) .cnv-ph--v .cnv-dim { opacity: 1; }
  .cnv.s2:not(.s3) .cnv-ph { transition-delay: .8s, .8s, 1s; }
  .cnv.s2:not(.s3) .cnv-dim, .cnv.s2:not(.s3) .cnv-tag { transition-delay: .8s; }
  .cnv.s5:not(.s6) .cnv-ph { transition-delay: 1.4s, 1.4s, 1.6s; }
  .cnv.s5:not(.s6) .cnv-dim, .cnv.s5:not(.s6) .cnv-tag { transition-delay: 1.4s; }
  .cnv.s5:not(.s6) .cnv-push--t5 { transition-delay: 1.55s; }
  .cnv-drop small { display: none; }
  .cnv-st { --ph: round(var(--pw) * 2, 1px); }
}
/* en dar telefon (~200 px): ekranın yazıları sığsın */
@container (max-width: 360px) {
  .cnv-h1 { font-size: 13.5px; }
  .cnv-pt { gap: 7px; padding: 0 9px; }
  .cnv-bd { padding-left: 8px; padding-right: 8px; }
  .cnv-to, .cnv-who { column-gap: 7px; padding: 7px 8px; }
  .cnv-av { width: 26px; height: 26px; font-size: 11px; }
  .cnv-form, .cnv-pick, .cnv-konu { padding-left: 8px; padding-right: 8px; }
  .cnv-clock { font-size: 36px; line-height: 42px; }
}
/* telefon 230 px'ten darsa öğretmen üst çubuğunda zil çizilmez: konu başlığı kesilmesin */
@container (max-width: 560px) {
  .cnv-oh .cnv-ob--bell { display: none; }
  .cnv-ot b { font-size: 11.5px; }
  .cnv-ot span { letter-spacing: -.01em; }
}

@container (max-width: 335px) { .cnv-st { --cnv-s8y: -73px; } }
@container (max-width: 329px) { .cnv-st { --cnv-s8y: -61px; } }  /* 320 px: bildirim bir satır uzar (147 px) */
@container (min-width: 470px) and (max-width: 487px) { .cnv-st { --cnv-s8y: -73px; } }

/* kısa telefon (kap ≤ 349 ya da 470–499 px): V4'ün görünen alanı ev çubuğunun üstünde biter — kartın alt satırı çubuğun
   altına girmez (üstü çizili görünmez), maskede tümüyle söner. Daha uzun telefonda çubuk yazının altında kalır. s8'de
   bekleme satırı kapanır, alan yeniden açılır: kartın düğme satırı solmaz. */
@container (max-width: 349px) {
  .cnv-v4 .cnv-vp { transition: bottom .5s var(--ui-ease);
    -webkit-mask-image: linear-gradient(transparent, #000 8px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(transparent, #000 8px, #000 calc(100% - 22px), transparent 100%); }
  .cnv:not(.s8) .cnv-v4 .cnv-vp { bottom: 14px; }
}
@container (min-width: 470px) and (max-width: 499px) {
  .cnv-v4 .cnv-vp { transition: bottom .5s var(--ui-ease);
    -webkit-mask-image: linear-gradient(transparent, #000 8px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(transparent, #000 8px, #000 calc(100% - 22px), transparent 100%); }
  .cnv:not(.s8) .cnv-v4 .cnv-vp { bottom: 14px; }
}

/* round() desteklemeyen tarayıcı: yuvarlamasız aynı hesap */
@supports not (width: round(1px, 1px)) {
  .cnv-st { --pw: min(232px, calc((100cqw - 36px) / 2)); --ph: calc(var(--pw) * 1.9); }
  @container (max-width: 469px) { .cnv-st { --pw: min(232px, 64cqw); --ph: calc(var(--pw) * 2); } }
}