/* SAHNE · DERS DAĞITIMI (includes/scenes/timetable.php) — adımlar:
   s0 «Yeni dağıtım üret» sayfası, imleç «Programı Üret»te · s1 basılır → tam pencere koyu bekleme katmanı (appBusy):
   «Program üretiliyor… / Binlerce ders saati deneniyor…» · s2–s4 «1–3 saniyedir çalışıyor» · s5 dağıtım sayfası açılır:
   yol + bant «Eylül yayını — #5044», Taslak rozeti + künye, dersler kademeli belirir, «Yayına Al» ·
   s6 Müzik (Salı 8) tutulur, yerinde kesikli iz · s7 Pazartesi 7'ye kayar, yalnız hedef hücre ince çerçeveyle vurgulanır ·
   s8 bırakılır (onay penceresi yok), kilit rozeti belirir · s9 Yayına Al → Yayında, düğme «Yeniden Yayına Al» + veliye bildirim */
.tts { container-type: inline-size; --tts-spring: cubic-bezier(.34, 1.56, .64, 1); }
.tts-win { position: relative; border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, var(--ui-shadow); }
.tts svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş yığını: iki durum aynı hücrede, opaklık + küçük kayma ile yer değiştirir */
.tts-x { display: inline-grid; align-items: center; }
.tts-x > * { grid-area: 1 / 1; transition: opacity .35s var(--ui-ease), transform .5s var(--ui-ease), translate .5s var(--ui-ease); }
.tts-nw { white-space: nowrap; }

/* üst çubuk: dönem seçici · yol · zil · kullanıcı */
.tts-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--ui-line); background: var(--ui-bg); font-size: 12px; color: var(--ui-muted); white-space: nowrap; }
.tts-term { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--ui-line-2); font-weight: 700; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.tts-term svg { width: 13px; height: 13px; color: var(--ui-muted); }
.tts-crumb { min-width: 0; overflow: hidden; }
.tts-crumb i { font-style: normal; margin: 0 7px; opacity: .55; }
.tts-crumb b { color: var(--ui-text); font-weight: 700; vertical-align: top; }
.tts-crumb b > * { justify-self: start; }
.tts-cr1 { opacity: 0; transform: translateY(4px); }
.tts-me { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
.tts-bell { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: var(--ui-text-2); }
.tts-bell svg { width: 16px; height: 16px; }
.tts-bell em { position: absolute; top: -2px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: #dc2626; color: #fff; font: 800 10px/16px var(--font); font-style: normal; letter-spacing: -.02em; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--ui-bg); }
.tts-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #3b6db0, var(--navy)); color: #fff; font-size: 12px; font-weight: 800; }

/* kurum renginde başlık bandı */
.tts-head { position: relative; display: flex; align-items: center; gap: 12px; margin: 12px 14px 0; padding: 12px 12px 12px 14px; border-radius: 12px; overflow: hidden; color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -16px rgba(11, 36, 64, .9); }
.tts-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.tts-ico svg { grid-area: 1 / 1; width: 19px; height: 19px; stroke-width: 1.7; transition: opacity .35s var(--ui-ease), transform .5s var(--ui-ease); }
.tts-ico1 { opacity: 0; transform: scale(.7); }
/* başlık: yeni dağıtım ↔ dağıtım sayfası, iki blok aynı hücrede */
.tts-title { flex: 1; min-width: 0; display: grid; justify-items: start; }
.tts-ttl { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; line-height: 1.2; }
.tts-ttl > b { font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.tts-ttl1 { opacity: 0; transform: translateY(5px); }
.tts-sub { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.tts-sub b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
/* durum rozeti künyenin başında (uygulamada koyu amber/zümrüt zemin, beyaz yazı) */
.tts-chips { margin-right: 2px; justify-items: start; vertical-align: 1px; }
.tts-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .01em; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.tts-chip--draft { background: #b45309; }
.tts-chip--live { background: #047857; opacity: 0; transform: scale(.7); }
.tts-acts { flex: none; justify-items: end; }
.tts-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px; border-radius: 9px; font-size: 13px; font-weight: 800; white-space: nowrap; transition: opacity .35s var(--ui-ease), transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease); }
.tts-btn > svg:first-child { width: 15px; height: 15px; }
.tts-btn::after { content: ""; position: absolute; inset: -2px; border-radius: 11px; box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; }
.tts-btn--gen { background: #fff; color: var(--navy); box-shadow: inset 0 -1px 0 rgba(16, 37, 64, .12), 0 6px 16px -8px rgba(0, 0, 0, .55); }
.tts-btn--pub { background: linear-gradient(#22a352, #15803d); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 16px -8px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(6px) scale(.96); }
/* yayındaki dağıtımın düğmesi: dolgusuz, yeşil kenarlı (uygulamada $kYesil) */
.tts-btn--re { background: #fff; color: #065f46; box-shadow: inset 0 0 0 1px #6ee7b7, inset 0 -1px 0 rgba(6, 95, 70, .1), 0 6px 16px -8px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(4px) scale(.96); }
.tts-btn--re > svg:first-child { color: #059669; }
.tts-btn .ui-cur { right: -12px; bottom: -17px; transform: translate(18px, 16px); }

/* araç şeridi */
.tts-tools { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; font-size: 12px; }
.tts-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--ui-bg-2); box-shadow: inset 0 0 0 1px var(--ui-line); color: var(--ui-muted); font-weight: 700; }
.tts-seg > * { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; }
.tts-seg b { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(11, 36, 64, .35); }
.tts-seg b svg { width: 13px; height: 13px; stroke-width: 2; }
.tts-seg em { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 999px; background: rgba(16, 37, 64, .07); font-variant-numeric: tabular-nums; }
.tts-seg b em { background: rgba(255, 255, 255, .2); }
.tts-sel { position: relative; display: inline-flex; align-items: center; height: 30px; min-width: 96px; padding: 0 30px 0 11px; border-radius: 8px; background: var(--ui-bg); box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .04); font-weight: 800; color: var(--ui-text); }
.tts-sel::after { content: ""; position: absolute; right: 12px; top: 11px; width: 5px; height: 5px; border-right: 1.7px solid var(--ui-muted); border-bottom: 1.7px solid var(--ui-muted); transform: rotate(45deg); }
.tts-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--ui-muted); font-size: 11px; font-weight: 700; opacity: 0; transform: translateX(6px); transition: opacity .4s var(--ui-ease), transform .5s var(--ui-ease); }
.tts-hint svg { width: 13px; height: 13px; color: var(--navy-soft); }

/* gövde: sınıfın hafta ızgarası */
.tts-body { padding: 0 14px 14px; }
.tts-grid { position: relative; display: grid; grid-template-columns: 46px repeat(5, minmax(0, 1fr)); grid-template-rows: 30px repeat(8, 47px); border-radius: 10px; box-shadow: 0 0 0 1px var(--ui-line); background: var(--ui-bg); overflow: hidden; }
.tts-corner, .tts-day { grid-row: 1; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ui-text-2); background: linear-gradient(var(--ui-bg-2), #f1f3f6); border-left: 1px solid var(--ui-line); border-bottom: 1px solid var(--ui-line-2); }
.tts-corner { grid-column: 1; border-left: 0; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.tts-hr { grid-column: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 10px; letter-spacing: -.01em; color: var(--ui-muted); background: var(--ui-bg-2); border-top: 1px solid var(--ui-line); font-variant-numeric: tabular-nums; line-height: 1.15; }
.tts-hr b { font-size: 11px; color: var(--ui-text-2); }
.tts-day + .tts-hr, .tts-hr:nth-child(7) { border-top: 0; }
.tts-c { border-top: 1px solid var(--ui-line); border-left: 1px solid var(--ui-line); transition: background-color .3s var(--ui-ease), box-shadow .3s var(--ui-ease); }

/* ders kartı (uygulamadaki renk düzeni: açık zemin, sol renk şeridi, koyu yazı) */
.tts-l { position: relative; z-index: 1; margin: 2px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 6px; border-radius: 7px; text-align: center; line-height: 1.15;
  background: linear-gradient(180deg, hsl(var(--h) 82% 96%), hsl(var(--h) 74% 92.5%)); color: hsl(var(--h) 62% 21%); border-left: 3px solid hsl(var(--h) 66% 50%);
  box-shadow: inset 0 0 0 1px hsl(var(--h) 46% 84%), inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px hsl(var(--h) 40% 40% / .12);
  opacity: 0; transform: translateY(-14px) scale(.9); transition: opacity .35s var(--ui-ease), transform .6s var(--tts-spring), translate .9s var(--ui-ease), box-shadow .3s var(--ui-ease); }
.tts-l b { font-size: 11.5px; font-weight: 800; letter-spacing: -.005em; }
/* yalnız yatayda kırp: «ç ş ğ» kuyrukları satır kutusunun altında kesilmesin */
.tts-l > span { max-width: 100%; overflow-x: clip; font-size: 10px; font-weight: 600; opacity: .78; white-space: nowrap; }
.tts-l small { position: absolute; top: 4px; left: 5px; padding: 0 4px; border-radius: 4px; font-size: 10px; font-weight: 800; line-height: 14px; letter-spacing: -.01em; background: hsl(var(--h) 72% 86%); color: hsl(var(--h) 60% 26%); }
/* taşınan dersin kilidi: kartın sağ üst köşesinde, kenarın dışına taşan beyaz rozet (yazının üstüne binmez) */
.tts-lock { position: absolute; z-index: 2; top: -6px; right: -6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: hsl(var(--h) 60% 28%);
  box-shadow: 0 0 0 1px hsl(var(--h) 36% 82%), 0 1px 2px rgba(16, 37, 64, .12), 0 3px 8px -2px rgba(16, 37, 64, .3);
  opacity: 0; transform: scale(.3); transition: opacity .3s var(--ui-ease), transform .45s var(--tts-spring); }
.tts-lock svg { width: 10px; height: 10px; stroke-width: 2.6; }
/* imleç kartın sağ kenarında tutar: ok ucu yazının sağında kalır */
.tts-l .ui-cur { right: -8px; bottom: -2px; transform: translate(18px, 16px); }
/* sürüklenen dersin yerinde kalan kesikli iz */
.tts-ghost { z-index: 0; margin: 3px; border-radius: 7px; border: 1.5px dashed hsl(280 40% 70%); background: hsl(280 60% 97%); opacity: 0; transition: opacity .3s var(--ui-ease); }

/* bekleme katmanı (uygulamada footer.php appBusy: zinc-900/70 perde + ortada beyaz kart, döner simge, saniye sayacı) */
.tts-busy { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 16px; background: rgba(24, 24, 27, .7); opacity: 0; transition: opacity .35s var(--ui-ease); }
.tts-busy__card { display: flex; flex-direction: column; align-items: center; width: min(100%, 288px); padding: 22px 20px 20px; border-radius: 16px; background: #fff; text-align: center;
  box-shadow: inset 0 0 0 2px #e4e4e7, 0 2px 6px rgba(0, 0, 0, .12), 0 24px 48px -16px rgba(0, 0, 0, .55); transform: translateY(10px) scale(.96); transition: transform .5s var(--tts-spring); }
.tts .tts-busy__spin { width: 36px; height: 36px; color: var(--navy); stroke-width: 3; }
.tts-busy__spin circle { opacity: .25; }
.tts-busy__card b { margin-top: 14px; font-size: 15px; font-weight: 900; color: #18181b; letter-spacing: -.01em; }
.tts-busy__card span { margin-top: 4px; font-size: 12px; font-weight: 700; color: #52525b; }
/* «N saniyedir çalışıyor»: ilk saniyede boş, sonra her adımda bir artar */
.tts-busy__n { counter-reset: tts-sn var(--sn, 0); height: 15px; margin-top: 10px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #71717a; font-variant-numeric: tabular-nums; opacity: 0; }
.tts-busy__n::before { content: counter(tts-sn) " "; }

/* veli telefonu: yayından sonra kilit ekranında bildirim */
.tts-phone { position: absolute; z-index: 8; right: 22px; bottom: -26px; width: 178px; height: 262px; padding: 6px; border-radius: 32px; background: linear-gradient(145deg, #2a3d57, var(--navy-night) 40%, #071a30);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 4px rgba(7, 26, 48, .3), 0 34px 60px -18px rgba(7, 26, 48, .7);
  opacity: 0; transform: translateY(70px) rotate(3deg); transition: opacity .5s var(--ui-ease), transform .85s var(--tts-spring); }
.tts-phone__sc { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; border-radius: 26px; padding: 8px 8px 0; overflow: hidden; color: #fff;
  background: radial-gradient(110% 70% at 15% 0%, #4f86c6 0%, rgba(79, 134, 198, 0) 60%), radial-gradient(90% 60% at 100% 100%, rgba(255, 182, 39, .35), transparent 70%), linear-gradient(180deg, #1d4f86, var(--navy) 45%, var(--navy-night)); }
/* durum çubuğu ekranın tam genişliğinde; simgeler adanın SAĞINDAKİ bölgede ortalanır (adanın altına girmez) */
.tts-phone__bar { position: absolute; top: 6px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 3px; height: 18px; padding: 0 8px 0 calc(65% + 2px); }
.tts-island { position: absolute; top: 1px; left: 35%; width: 30%; height: 16px; border-radius: 999px; background: #050d18; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.tts-sig { display: inline-flex; align-items: flex-end; gap: 1px; height: 8px; }
.tts-sig i { width: 2px; border-radius: 1px; background: #fff; }
.tts-sig i:nth-child(1) { height: 3px; } .tts-sig i:nth-child(2) { height: 4.5px; } .tts-sig i:nth-child(3) { height: 6px; } .tts-sig i:nth-child(4) { height: 8px; }
.tts-wifi { flex: none; width: 10px; height: 10px; stroke-width: 2.6; }
.tts-bat { position: relative; flex: none; width: 16px; height: 8px; margin-right: 2px; border-radius: 2.5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); padding: 1.5px; }
.tts-bat::after { content: ""; position: absolute; right: -2.5px; top: 2.5px; width: 1.5px; height: 3px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, .7); }
.tts-bat i { display: block; width: 76%; height: 100%; border-radius: 1px; background: #fff; }
.tts-phone__date { margin-top: 34px; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.tts-phone__time { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tts-note { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 7px; row-gap: 1px; align-items: center; width: 100%; margin-top: 16px; padding: 9px 10px 10px; border-radius: 15px; background: rgba(250, 251, 253, .9); color: var(--ui-text-2); text-align: left; font-size: 10px; line-height: 1.35;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(-14px) scale(.94); transition: opacity .4s var(--ui-ease) .6s, transform .6s var(--tts-spring) .6s; }
.tts-note img { grid-row: 1 / span 3; align-self: start; width: 20px; height: 20px; border-radius: 5px; }
.tts-note__app { min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--ui-muted); white-space: nowrap; }
.tts-note em { font-style: normal; font-size: 10px; color: var(--ui-muted); white-space: nowrap; }
.tts-note b { grid-column: 2 / span 2; font-size: 10.5px; font-weight: 800; color: var(--ui-text); }
.tts-note__msg { grid-column: 2 / span 2; }
.tts-phone__home { position: absolute; bottom: 7px; left: 50%; width: 60px; height: 4px; margin-left: -30px; border-radius: 999px; background: rgba(255, 255, 255, .8); }

@keyframes tts-press { 0%, 100% { scale: 1; } 45% { scale: .8; } }
@keyframes tts-ring { 0% { opacity: .9; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 100% { opacity: 0; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
@keyframes tts-spin { to { rotate: 360deg; } }

/* ── ADIMLAR ── */
/* s0 → s1: imleç düğmeye kayar, basar; bekleme katmanı açılır */
.tts:not(.s2) .tts-btn--gen .ui-cur { opacity: 1; transform: none; transition-delay: .3s; }
.tts.s1 .tts-btn--gen .ui-cur { animation: tts-press .35s var(--ui-ease); }
.tts.s1 .tts-btn--gen { transform: scale(.96); }
.tts.s1 .tts-btn--gen::after { animation: tts-ring .6s var(--ui-ease); }
.tts.s1:not(.s5) .tts-busy { opacity: 1; transition-delay: .3s; }
.tts.s1:not(.s5) .tts-busy__card { transform: none; transition-delay: .3s; }
.tts.s1:not(.s5) .tts-busy__spin { animation: tts-spin .8s linear infinite; }
/* s2–s4: «1, 2, 3 saniyedir çalışıyor» */
.tts.s2 .tts-busy__n { opacity: 1; --sn: 1; }
.tts.s3 .tts-busy__n { --sn: 2; }
.tts.s4 .tts-busy__n { --sn: 3; }
/* s5: dağıtım sayfası (?run=5044) — yol, bant, rozet + künye, düğme çapraz geçer; dersler kademeli belirir */
.tts.s5 .tts-cr0, .tts.s5 .tts-ttl0 { opacity: 0; transform: translateY(-5px); }
.tts.s5 .tts-cr1, .tts.s5 .tts-ttl1 { opacity: 1; transform: none; }
.tts.s5 .tts-ico0 { opacity: 0; transform: scale(.7); }
.tts.s5 .tts-ico1 { opacity: 1; transform: none; }
.tts.s5 .tts-btn--gen { opacity: 0; transform: translateY(-6px) scale(.96); }
.tts.s5 .tts-btn--pub { opacity: 1; transform: none; transition-delay: .2s; }
.tts.s5 .tts-hint { opacity: 1; transform: none; }
.tts.s5 .tts-l { opacity: 1; transform: none; transition-delay: calc(var(--w) * 240ms + var(--i) * 60ms); }
.tts.s6 .tts-l { transition-delay: 0s; }
/* s6: Müzik (Salı 8) tutulur; yerinde kesikli iz. Yerleşmiş ders sürüklenirken ızgara boyanmaz. */
.tts.s6 .tts-l.tts-l--drag { z-index: 6; transform: scale(1.07) rotate(-2.5deg); box-shadow: inset 0 0 0 1px hsl(var(--h) 46% 80%), 0 4px 8px rgba(16, 37, 64, .12), 0 18px 28px -10px rgba(16, 37, 64, .5); }
.tts.s6:not(.s8) .tts-ghost { opacity: 1; }
.tts.s6:not(.s8) .tts-l--drag .ui-cur { opacity: 1; transform: none; }
/* s7: Pazartesi 7'ye kayar (1 sütun sola, 1 satır yukarı; kart + 2×2 px pay = bir hücre); yalnız hedef hücre vurgulanır */
.tts.s7 .tts-l--drag { translate: calc(-100% - 4px) calc(-100% - 4px); }
.tts.s7:not(.s8) .tts-c--to { background: var(--ui-primary-soft); box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .5); transition-delay: .25s; }
/* s8: bırakılır — boş hedef, tek ders: onay penceresi yok, doğrudan taşınır ve kilitlenir */
.tts.s8 .tts-l.tts-l--drag { transform: none; box-shadow: inset 0 0 0 1px hsl(var(--h) 46% 84%), 0 0 0 2px rgba(59, 109, 176, .5); }
.tts.s8 .tts-lock { opacity: 1; transform: none; transition-delay: .2s; }
.tts.s8 .tts-btn--pub .ui-cur { opacity: 1; transform: none; transition-delay: .55s; }
/* s9: Yayına Al → Yayında + veliye bildirim; ~.8 sn sonra düğme «Yeniden Yayına Al» (dolgusuz yeşil) olur.
   Yayındaki dağıtım «Düzenlemeyi aç» basılmadıkça düzenlenemez: sürükleme ipucu gizlenir. */
.tts.s9 .tts-btn--pub .ui-cur { opacity: 0; animation: tts-press .35s var(--ui-ease); transition-delay: .7s; }
.tts.s9 .tts-btn--pub { opacity: 0; transform: scale(.96); transition-delay: .8s, 0s, 0s; }
.tts.s9 .tts-btn--pub::after { animation: tts-ring .6s var(--ui-ease); }
.tts.s9 .tts-btn--re { opacity: 1; transform: none; transition-delay: .8s; }
.tts.s9 .tts-hint { opacity: 0; transform: translateX(6px); }
.tts.s9 .tts-chip--draft { opacity: 0; transform: scale(.7); }
.tts.s9 .tts-chip--live { opacity: 1; transform: none; transition-timing-function: var(--tts-spring); transition-delay: .15s; }
.tts.s9 .tts-phone { opacity: 1; transform: none; transition-delay: .35s; }
.tts.s9 .tts-note { opacity: 1; transform: none; }

/* ── DAR KAPLAR ── */
@container (max-width: 680px) {
  .tts-hint, .tts-crumb > span, .tts-crumb > i, .tts-term { display: none; }
  .tts-l > span { display: none; }
  .tts-phone { width: 148px; height: 226px; right: 14px; bottom: -14px; border-radius: 28px; }
  .tts-phone__sc { border-radius: 23px; }
  .tts-sig { display: none; }
  .tts-phone__time { font-size: 32px; }
  .tts-phone__date { margin-top: 28px; }
  /* bildirim: simge + uygulama adı + zaman tek satırda, başlık ve metin tam genişlikte */
  .tts-note { grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 5px; margin-top: 12px; padding: 8px; border-radius: 13px; }
  .tts-note img { grid-row: 1; align-self: center; width: 16px; height: 16px; border-radius: 4px; }
  .tts-note b, .tts-note__msg { grid-column: 1 / -1; }
  .tts-note b { margin-top: 3px; }
  .tts-note__app { letter-spacing: .02em; }
}
@container (max-width: 470px) {
  .tts-bar { height: 36px; }
  .tts-head { margin: 10px 10px 0; padding: 10px 10px 10px 12px; gap: 10px; }
  .tts-ico, .tts-btn > svg:first-child { display: none; }
  .tts-ttl > b { font-size: 15px; }
  .tts-sub { font-size: 11px; }
  .tts-chip { height: 16px; padding: 0 6px; font-size: 10px; }
  .tts-btn { height: 30px; padding: 0 11px; font-size: 12px; }
  .tts-tools { padding: 10px; }
  .tts-seg { display: none; }
  .tts-body { padding: 0 10px 10px; }
  .tts-grid { grid-template-columns: 26px repeat(5, minmax(0, 1fr)); grid-template-rows: 26px repeat(8, 34px); }
  .tts-hr { font-size: 0; }
  .tts-hr b { font-size: 10px; }
  .tts-corner { font-size: 0; }
  .tts-l { padding: 2px; border-left-width: 2px; border-radius: 5px; }
  .tts-l b { font-size: 0; }
  .tts-l b::after { content: attr(data-short); font-size: 10px; }
  .tts-l small { display: none; }
  .tts-l .ui-cur { right: -12px; bottom: -4px; }
  .tts-busy__card { padding: 18px 14px 16px; border-radius: 14px; }
  .tts .tts-busy__spin { width: 30px; height: 30px; }
  .tts-busy__card b { margin-top: 12px; font-size: 14px; }
  .tts-busy__card span { font-size: 11px; }
  .tts-phone { width: 140px; height: 214px; right: 10px; bottom: 8px; padding: 5px; border-radius: 26px; }
  .tts-phone__sc { border-radius: 21px; padding: 8px 6px 0; }
  .tts-phone__time { font-size: 28px; }
  .tts-phone__date { margin-top: 26px; }
  .tts-note { margin-top: 10px; padding: 7px 8px 8px; }
}