/* SAHNE · ÖĞRENCİ SERVİSİ: DURAĞA ATAMA, KAPASİTE KAPISI, VELİNİN EKRANI (includes/scenes/school-bus.php) — adımlar:
   s1 dolu güzergâhta «Ela Kılınç» yazılır · s2 «Öğrenci ekle» → «Güzergâh dolu» (şerit + kutu) · s3 «Merkez · Kadıköy – Üsküdar» açılır ·
   s4 «Can Kılınç» yazılır · s5 «Durak» açılır · s6 «Defne – Kardelen Mah. (Üsküdar)» seçilir · s7 «Öğrenci ekle» → eklendi, 30/31 ·
   s8 velinin telefonu: «Servisim».
   Pencere sabit yükseklikte; uyarı/başarı şeridi ve kapasite kutusu 0fr → 1fr satırıyla açılır, öğrenci tablosu alta yaslı olduğu
   için yer açılınca üst satırlar yukarı kayar (sayfa kaymış gibi); iki güzergâhın ayrıntısı aynı ızgara hücresinde üst üste. */
.bus { --bus-h: 480px; --bus-list: 200px; --bus-inh: 28px; --bus-sp: cubic-bezier(.34, 1.56, .64, 1);
  --bus-rh: 26px; --bus-thh: 22px; --bus-dlh: 21px;
  --bus-bad: #b91c1c; --bus-bad-ink: #991b1b; --bus-ok: #047857; --bus-warn: #b45309;
  container: bus / inline-size; font-size: 11px; line-height: 1.3; }
.bus-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: aynı hücrede eski (.bus-o) / yeni (.bus-n) */
.bus-x { display: inline-grid; min-width: 0; vertical-align: top; }
.bus-x > * { grid-area: 1 / 1; min-width: 0; transition: opacity .28s var(--ui-ease), translate .32s var(--ui-ease); }
.bus-x > .bus-n { opacity: 0; translate: 0 4px; }

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

/* ── pencere ── */
.bus-win { position: relative; display: flex; flex-direction: column; height: var(--bus-h); border-radius: 14px; background: #fff; }

/* sayfa başlığı */
.bus-hd { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; }
.bus-hd__t { flex: 1; min-width: 0; }
.bus-hd__t > b { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 800; line-height: 20px; letter-spacing: -.02em; color: #0f172a; }
.bus-hd__h { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ui-primary-soft); color: var(--navy-soft); box-shadow: inset 0 0 0 1px #c9d8ec; }
.bus-hd__h .bus-i { width: 12px; height: 12px; }
.bus-hd__t small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 15px; color: #52525b; white-space: nowrap; }
.bus-hd__a { flex: none; display: flex; gap: 6px; }
.bus-b { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 800; color: #27272a; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .06), inset 0 1px 0 rgba(255, 255, 255, .6); }
.bus-b .bus-i { width: 13px; height: 13px; }
.bus-b--pri { color: #fff; background: linear-gradient(135deg, var(--navy-soft), var(--navy));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 14px -8px rgba(20, 61, 107, .75); }
.bus-b--pri .bus-i { stroke-width: 2.4; }
.bus-b--ar { display: none; }
.bus-b--ar .bus-i { color: var(--navy-soft); }

/* uyarı / başarı şeridi (sayfanın üstünde) — 0fr → 1fr ile açılır */
.bus-fl { flex: none; display: grid; grid-template-rows: 0fr; padding: 0 12px; transition: grid-template-rows .42s var(--ui-ease); }
.bus-fl > div { min-height: 0; overflow: hidden; }
.bus-fl__m { display: block; margin-bottom: 8px; padding: 7px 12px; border-radius: 10px; font-size: 11px; font-weight: 800; line-height: 15px; text-wrap: pretty;
  opacity: 0; transition: opacity .3s var(--ui-ease); }
.bus-fl--bad .bus-fl__m { background: #fef2f2; color: var(--bus-bad); box-shadow: inset 0 0 0 1px #fecaca; }
.bus-fl--ok .bus-fl__m { background: #ecfdf5; color: var(--bus-ok); box-shadow: inset 0 0 0 1px #a7f3d0; }

/* ── gövde: güzergâh listesi | ayrıntı ── */
.bus-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--bus-list) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; padding: 0 12px 12px; }
.bus-ls { position: relative; min-height: 0; overflow: hidden; 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); }
/* liste tam (Demo Koleji'nde 8 güzergâh): yalnız TAM satır görünür — sığmayan satır sütun kırılımıyla görünmeyen ikinci sütuna
   geçer (üst şerit açılınca alttaki yarım satır kalmaz) */
.bus-ls { display: flex; flex-flow: column wrap; align-content: flex-start; }
.bus-rt { flex: none; width: 100%; position: relative; display: block; padding: 7px 10px 7px 12px; box-shadow: inset 0 -1px 0 #f1f2f4; transition: background-color .3s var(--ui-ease); }
.bus-rt__h { display: block; font-size: 11px; font-weight: 800; line-height: 15px; letter-spacing: -.01em; color: #27272a; }
.bus-rt small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 10px; font-weight: 600; line-height: 15px; color: var(--ui-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* «S+A» yongası alt satırın sağında (uygulamada ad satırının sağında; uzun ad kesilmesin diye alta alındı) */
.bus-rt em { margin-left: auto; padding: 0 5px; border-radius: 999px; background: #ede9fe; color: #6d28d9; font-style: normal; font-size: 10px; font-weight: 800; line-height: 15px; }
.bus-rt--y { background: #edf2f9; }
.bus-rt--m .bus-hit { left: 58%; top: 21px; }

.bus-det { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; }
.bus-pane { grid-area: 1 / 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; transition: opacity .32s var(--ui-ease), translate .4s var(--ui-ease); }
.bus-pane--m { opacity: 0; translate: 0 6px; }

/* araç özeti */
.bus-veh { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 12px; border-radius: 12px; background: #f8f9fb; font-size: 11px; font-weight: 600; line-height: 16px; color: #52525b;
  box-shadow: inset 0 0 0 1px var(--ui-line); white-space: nowrap; }
.bus-veh b { font-weight: 800; color: #27272a; }
.bus-veh__p { display: inline-flex; align-items: center; gap: 5px; }
.bus-veh__p .bus-i { color: var(--navy-soft); width: 15px; height: 15px; }
.bus-veh__p b { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; letter-spacing: .02em; color: #18181b; }

/* öğrenciler kartı */
.bus-cd { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 9px 11px 11px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), 0 12px 24px -20px rgba(16, 37, 64, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.bus-cd__h { flex: none; margin-bottom: 6px; font-size: 10px; font-weight: 800; line-height: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); font-variant-numeric: tabular-nums; }
/* ölçü kabı (tablo + doluluk satırı): satır alanı yüksekliği satır yüksekliğinin tam katına yuvarlanır → tabloda yarım satır
   kalmaz; artan (< 1 satır) boşluk doluluk satırının altına düşer. Satırlar alta yaslı (listenin sonu görünür); yükseklik
   bir satır değişince kayarak geçer. */
.bus-tbw { flex: 1; min-height: 0; container-type: size; }
.bus-tb { display: flex; flex-direction: column; border-radius: 10px; box-shadow: 0 0 0 1px var(--ui-line); overflow: hidden; }
.bus-rows { flex: none; height: max(var(--bus-rh), round(down, 100cqh - var(--bus-thh) - var(--bus-dlh), var(--bus-rh)));
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; transition: height .3s var(--ui-ease); }
.bus-tr { flex: none; display: grid; grid-template-rows: 1fr; }
.bus-tr__in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 58px 176px 14px; align-items: center; column-gap: 8px; padding: 0 10px;
  box-shadow: inset 0 1px 0 #f1f2f4; }
.bus-tr__in > * { min-width: 0; padding: 6px 0; line-height: 14px; white-space: nowrap; }
.bus-tr__ad { font-size: 11px; font-weight: 800; color: #27272a; overflow: hidden; text-overflow: ellipsis; }
.bus-c-sn { font-size: 10.5px; font-weight: 600; color: var(--ui-muted); }
.bus-tr__dk { font-size: 10.5px; font-weight: 600; color: #3f3f46; }
.bus-c-x { display: flex; justify-content: flex-end; color: #a1a1aa; }
.bus-c-x .bus-i { width: 13px; height: 13px; }
.bus-tr--h .bus-tr__in { box-shadow: none; background: var(--ui-bg-2); }
.bus-tr--h .bus-tr__in > * { padding: 5px 0; line-height: 12px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.bus-tr--new { grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ui-ease); }

/* doluluk satırı */
.bus-dl { flex: none; margin-top: 7px; font-size: 10.5px; font-weight: 800; line-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bus-dl--bad { color: var(--bus-bad); }
.bus-dl--warn { display: grid; color: var(--bus-warn); }

/* kapasite kutusu */
.bus-bx { flex: none; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ui-ease); }
.bus-bx > div { min-height: 0; overflow: hidden; }
.bus-bx__in { display: block; margin-top: 6px; padding: 7px 10px 8px; border-radius: 10px; background: #fef2f2; box-shadow: inset 0 0 0 1px #fca5a5; opacity: 0; transition: opacity .3s var(--ui-ease); }
.bus-bx__in b { display: block; font-size: 11px; font-weight: 800; line-height: 15px; color: var(--bus-bad-ink); font-variant-numeric: tabular-nums; }
.bus-bx__p { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; line-height: 14px; color: var(--bus-bad); text-wrap: pretty; }
.bus-bx__b { display: inline-flex; align-items: center; height: 24px; margin-top: 6px; padding: 0 10px; border-radius: 7px; background: #fff; font-size: 10.5px; font-weight: 800; color: var(--bus-bad);
  box-shadow: inset 0 0 0 1px #f87171, 0 1px 2px rgba(185, 28, 28, .08); white-space: nowrap; }

/* atama formu */
.bus-fm { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); grid-template-areas: "q s" "n b"; gap: 6px 8px; margin-top: 8px; }
.bus-f { display: block; min-width: 0; }
.bus-f--q { grid-area: q; } .bus-f--s { grid-area: s; position: relative; } .bus-f--n { grid-area: n; }
.bus-lb { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; font-size: 10px; font-weight: 800; line-height: 13px; color: #3f3f46; white-space: nowrap; }
.bus-lb__h { width: 11px !important; height: 11px !important; color: var(--ui-muted); }
.bus-in { position: relative; display: flex; align-items: center; height: var(--bus-inh); padding: 0 9px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 700; color: #18181b;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); transition: box-shadow .25s var(--ui-ease); }
.bus-ph { position: absolute; left: 9px; right: 9px; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 500; color: #a1a1aa; white-space: nowrap; overflow: hidden; transition: opacity .1s linear; }
.bus-ty { display: flex; align-items: center; min-width: 0; white-space: pre; }
.bus-ty i { display: inline-block; max-width: 0; overflow: hidden; font-style: normal; transition: max-width 0s linear var(--td, 0s); }
.bus-caret { position: relative; display: inline-block; width: 1px; height: 14px; margin-left: 1px; opacity: 0; transition: opacity .1s linear; }
.bus-caret::after { content: ""; position: absolute; inset: 0; background: var(--navy); }
@keyframes bus-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.bus-in--q .bus-hit { left: 32%; top: 15px; }
.bus-in--s { gap: 6px; padding-right: 8px; font-weight: 500; color: #27272a; }
.bus-in--s > .bus-x { flex: 1; }
.bus-in--s > .bus-x > * { white-space: nowrap; overflow: hidden; }
.bus-chev { width: 13px !important; height: 13px !important; color: var(--ui-muted); }
.bus-in--s .bus-hit { right: 26px; top: 15px; }
.bus-btn { grid-area: b; justify-self: end; align-self: end; position: relative; display: inline-flex; align-items: center; height: var(--bus-inh); padding: 0 13px; border-radius: 8px;
  font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; background: linear-gradient(135deg, var(--navy-soft), var(--navy));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 14px -8px rgba(20, 61, 107, .75); }
.bus-btn .bus-hit { left: 62%; top: 16px; }

/* durak seçimi: açılan liste (seçimin üstüne açılır, alttan yer yok) */
.bus-dd { position: absolute; z-index: 9; left: 0; bottom: calc(var(--bus-inh) + 3px); display: block; width: max(100%, 236px); padding: 4px; border-radius: 9px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .12), 0 2px 4px rgba(16, 37, 64, .08), 0 18px 34px -12px rgba(16, 37, 64, .45);
  opacity: 0; scale: .97 .94; transform-origin: 50% 100%; transition: opacity .18s var(--ui-ease), scale .24s var(--ui-ease); }
.bus-dd__o { display: block; height: 19px; padding: 0 8px; border-radius: 5px; font-size: 10.5px; font-weight: 600; line-height: 19px; color: #27272a; white-space: nowrap; transition: background-color .12s linear, color .12s linear; }
.bus-dd__o.is-cur { font-weight: 800; }
.bus-f--s > .bus-hit--mo { z-index: 10; left: 52px; bottom: 63px; }

/* ── velinin telefonu ── */
.bus-scrim { position: absolute; z-index: 9; inset: 0; border-radius: 14px; background: rgba(11, 25, 46, .3); opacity: 0; pointer-events: none; transition: opacity .35s var(--ui-ease); }
.bus-pho { position: absolute; z-index: 10; top: 10px; right: 22px; width: 262px; height: calc(var(--bus-h) - 20px); border-radius: 32px; overflow: hidden; background: #f8f9ff; color: #0b1c30;
  box-shadow: 0 0 0 6px #0b1526, 0 0 0 7px rgba(255, 255, 255, .14), 0 34px 60px -22px rgba(8, 20, 40, .7), 0 12px 24px -12px rgba(8, 20, 40, .4);
  opacity: 0; translate: 0 34px; transition: opacity .3s var(--ui-ease), translate .7s cubic-bezier(.3, 1.3, .5, 1); }
.bus-pho svg:not(.bus-logo) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bus-sb { position: relative; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 16px 0 22px; }
.bus-sb > b { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bus-isl { position: absolute; left: 50%; top: 6px; width: 64px; height: 18px; margin-left: -32px; border-radius: 999px; background: #05070b; }
.bus-sbi { display: flex; align-items: center; gap: 3px; }
.bus-sbi svg { width: 12px; height: 12px; stroke-width: 2.4 !important; }
.bus-sbi .bus-bat { width: 17px; height: 13px; }
.bus-ptop { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; }
.bus-pib { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: #273246; }
.bus-pib .bus-i { width: 16px; height: 16px; }
.bus-pib--bell { margin-left: auto; }
.bus-pib--bell::after { content: ""; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ff5449; box-shadow: 0 0 0 1.5px #f8f9ff; }
.bus-logo { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 2px 5px -1px rgba(16, 37, 64, .4); }
.bus-pav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 12px; font-weight: 800;
  box-shadow: 0 0 0 1px #e2e6ef, 0 1px 2px rgba(16, 37, 64, .08); }
.bus-kids { display: flex; gap: 6px; padding: 4px 12px 0; }
.bus-kid { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px 0 3px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; color: #27272a;
  box-shadow: 0 0 0 1px #e2e6ef, 0 1px 2px rgba(16, 37, 64, .05); }
.bus-kid i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--navy-soft); }
.bus-kid.is-on { background: linear-gradient(135deg, var(--navy-soft), var(--navy)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(16, 37, 64, .7); }
.bus-kid.is-on i { background: rgba(255, 255, 255, .2); color: #fff; }
.bus-pt { padding: 9px 14px 0; }
.bus-pt b { display: block; font-size: 16px; font-weight: 800; line-height: 20px; letter-spacing: -.02em; }
.bus-pt small { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; line-height: 13px; color: #46464f; }
.bus-ptt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 11px 14px 6px; }
.bus-ptt b { min-width: 0; font-size: 12.5px; font-weight: 800; line-height: 16px; letter-spacing: -.01em; text-wrap: balance; }
.bus-ptt span { flex: none; font-size: 10px; font-weight: 700; color: #46464f; }
.bus-pl { margin: 0 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(199, 197, 208, .45), 0 4px 12px rgba(30, 34, 86, .05); }
.bus-pr { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 6px 11px 6px 9px; box-shadow: inset 0 1px 0 rgba(199, 197, 208, .35);
  opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(.45s + var(--i) * 70ms), translate .45s var(--bus-sp) calc(.45s + var(--i) * 70ms); }
.bus-pr:first-child { box-shadow: none; }
.bus-pr__i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.bus-pr__i .bus-i { width: 14px; height: 14px; }
.bus-pr__i.is-indigo { background: #e0e0ff; color: #3e4277; } .bus-pr__i.is-amber { background: #fffbeb; color: #92400e; }
.bus-pr__i.is-sky { background: #dce9ff; color: #1e2256; } .bus-pr__i.is-mint { background: #ecfdf5; color: #047857; }
.bus-pr__t { flex: 1; min-width: 0; }
.bus-pr__t b { display: block; font-size: 11px; font-weight: 700; line-height: 14px; color: #0b1c30; }
.bus-pr__t small { display: block; margin-top: 1px; font-size: 10px; font-weight: 500; line-height: 13px; color: #46464f; white-space: nowrap; }
.bus-pr em { flex: none; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: -.01em; color: #0b1c30; font-variant-numeric: tabular-nums; }
.bus-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 48px; padding: 5px 10px 0; background: #fff;
  box-shadow: inset 0 1px 0 rgba(199, 197, 208, .5); }
.bus-tabs > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: #3c3f4a; white-space: nowrap; }
.bus-tabs .bus-i { width: 16px; height: 16px; }
.bus-tabs__m i { position: absolute; top: -3px; left: calc(50% + 3px); display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; background: #ba1a1a;
  color: #fff; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 1.5px #fff; }

/* ══ ADIMLAR ══ */
/* s0–s2: dolu güzergâh seçili */
/* s1: «Ela Kılınç» yazılır */
.bus.s1 .bus-pane--y .bus-in--q { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .38s; }
.bus.s2 .bus-pane--y .bus-in--q { box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); transition-delay: .3s; }
.bus.s1 .bus-pane--y .bus-in--q .bus-ph { opacity: 0; transition-delay: .4s; }
.bus.s1 .bus-pane--y .bus-ty i { max-width: 1em; --td: calc(.5s + var(--c) * 55ms); }
.bus.s1:not(.s2) .bus-pane--y .bus-caret { opacity: 1; transition-delay: .4s; }
.bus.s1:not(.s2) .bus-pane--y .bus-caret::after { animation: bus-blink 1s steps(1) 1.1s infinite; }
.bus.s1:not(.s2) .bus-hit--yq .ui-cur { animation: bus-cur-out 1.05s var(--ui-ease) both; }
.bus.s1:not(.s2) .bus-hit--yq .bus-rip { animation: bus-rip .5s ease-out .36s both; }
/* s2: «Öğrenci ekle» → güzergâh dolu: üst şerit + kapasite kutusu */
.bus.s2:not(.s3) .bus-hit--yb .ui-cur { animation: bus-cur .9s var(--ui-ease) both; }
.bus.s2:not(.s3) .bus-hit--yb .bus-rip { animation: bus-rip .55s ease-out .42s both; }
.bus.s2 .bus-pane--y .bus-btn { animation: bus-push .3s var(--ui-ease) .4s; }
.bus.s2:not(.s3) .bus-fl--bad { grid-template-rows: 1fr; transition-delay: .62s; }
.bus.s2:not(.s3) .bus-fl--bad .bus-fl__m { opacity: 1; transition-delay: .72s; }
.bus.s2 .bus-bx { grid-template-rows: 1fr; transition-delay: .66s; }
.bus.s2 .bus-bx__in { opacity: 1; transition-delay: .8s; }
/* s3: soldan «Merkez · Kadıköy – Üsküdar» → yeni sayfa (şerit yok, form boş) */
.bus.s3:not(.s4) .bus-hit--rt .ui-cur { animation: bus-cur .8s var(--ui-ease) both; }
.bus.s3:not(.s4) .bus-hit--rt .bus-rip { animation: bus-rip .55s ease-out .34s both; }
.bus.s3 .bus-rt--y { background: #fff; transition-delay: .4s; }
.bus.s3 .bus-rt--m { background: #edf2f9; transition-delay: .4s; }
.bus.s3 .bus-fl--bad, .bus.s3 .bus-fl--bad .bus-fl__m { transition-delay: .42s; }
.bus.s3 .bus-pane--y { opacity: 0; translate: 0 -4px; transition-delay: .42s; }
.bus.s3 .bus-pane--m { opacity: 1; translate: 0 0; transition-delay: .5s; }
/* s4: «Can Kılınç» yazılır */
.bus.s4 .bus-pane--m .bus-in--q { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .38s; }
.bus.s5 .bus-pane--m .bus-in--q { box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); transition-delay: .3s; }
.bus.s4 .bus-pane--m .bus-in--q .bus-ph { opacity: 0; transition-delay: .4s; }
.bus.s4 .bus-pane--m .bus-ty i { max-width: 1em; --td: calc(.5s + var(--c) * 55ms); }
.bus.s4:not(.s5) .bus-pane--m .bus-caret { opacity: 1; transition-delay: .4s; }
.bus.s4:not(.s5) .bus-pane--m .bus-caret::after { animation: bus-blink 1s steps(1) 1.1s infinite; }
.bus.s4:not(.s5) .bus-hit--mq .ui-cur { animation: bus-cur-out 1.05s var(--ui-ease) both; }
.bus.s4:not(.s5) .bus-hit--mq .bus-rip { animation: bus-rip .5s ease-out .36s both; }
/* s5: «Durak» açılır */
.bus.s5:not(.s7) .bus-pane--m .bus-in--s { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .35s; }
.bus.s5:not(.s6) .bus-hit--ms .ui-cur { animation: bus-cur .8s var(--ui-ease) both; }
.bus.s5:not(.s6) .bus-hit--ms .bus-rip { animation: bus-rip .5s ease-out .32s both; }
.bus.s5 .bus-dd { opacity: 1; scale: 1; transition-delay: .36s; }
.bus.s5:not(.s6) .bus-dd__o.is-cur, .bus.s6 .bus-dd__o.is-hd { background: var(--navy-soft); color: #fff; }
.bus.s5:not(.s6) .bus-dd__o.is-cur { transition-delay: .36s; }
.bus.s6 .bus-dd__o.is-hd { transition-delay: .22s; }
/* s6: «Defne – Kardelen Mah. (Üsküdar)» seçilir, liste kapanır */
.bus.s6:not(.s7) .bus-hit--mo .ui-cur { animation: bus-cur-out .9s var(--ui-ease) both; }
.bus.s6:not(.s7) .bus-hit--mo .bus-rip { animation: bus-rip .45s ease-out .28s both; }
.bus.s6 .bus-dd { opacity: 0; scale: .97 .94; transition-delay: .5s; }
.bus.s6 .bus-in--s .bus-o { opacity: 0; translate: 0 -4px; transition-delay: .5s; }
.bus.s6 .bus-in--s .bus-n { opacity: 1; translate: 0 0; transition-delay: .55s; }
/* s7: «Öğrenci ekle» → eklendi: şerit, yeni satır, sayılar; sayfa yenilenir → form boş */
.bus.s7:not(.s8) .bus-hit--mb .ui-cur { animation: bus-cur .9s var(--ui-ease) both; }
.bus.s7:not(.s8) .bus-hit--mb .bus-rip { animation: bus-rip .55s ease-out .42s both; }
.bus.s7 .bus-pane--m .bus-btn { animation: bus-push .3s var(--ui-ease) .4s; }
.bus.s7 .bus-fl--ok { grid-template-rows: 1fr; transition-delay: .62s; }
.bus.s7 .bus-fl--ok .bus-fl__m { opacity: 1; transition-delay: .72s; }
.bus.s7 .bus-tr--new { grid-template-rows: 1fr; transition-delay: .66s; }
.bus.s7 .bus-tr--new .bus-tr__in { animation: bus-yeni 2.6s ease .66s both; }
@keyframes bus-yeni { 0%, 45% { background-color: #e3f5ea; } 100% { background-color: rgba(227, 245, 234, 0); } }
.bus.s7 .bus-x--n .bus-o, .bus.s7 .bus-dl--warn .bus-o { opacity: 0; translate: 0 -4px; transition-delay: .66s; }
.bus.s7 .bus-x--n .bus-n, .bus.s7 .bus-dl--warn .bus-n { opacity: 1; translate: 0 0; transition-delay: .72s; }
.bus.s7 .bus-pane--m .bus-ty i { max-width: 0; --td: .62s; }
.bus.s7 .bus-pane--m .bus-in--q .bus-ph { opacity: 1; transition-delay: .62s; }
.bus.s7 .bus-in--s .bus-o { opacity: 1; translate: 0 0; transition-delay: .62s; }
.bus.s7 .bus-in--s .bus-n { opacity: 0; translate: 0 4px; transition-delay: .58s; }
/* s8: velinin telefonu — «Servisim» */
.bus.s8 .bus-scrim { opacity: 1; transition-delay: .1s; }
.bus.s8 .bus-pho { opacity: 1; translate: 0 0; transition-delay: .15s; }
.bus.s8 .bus-pr { opacity: 1; translate: 0 0; }

/* ── DAR KAPLAR ── */
@container bus (min-width: 720px) { .bus-b--ar { display: inline-flex; } }
/* ≤670: atama formu sarar (uygulamada flex-wrap) — öğrenci tam satır, altta durak + düğme; «Not» çizilmez */
@container bus (max-width: 670px) {
  .bus-fm { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q q" "s b"; }
  .bus-f--n, .bus-bx__p { display: none; }
  .bus-tr__in { grid-template-columns: minmax(0, 1fr) 56px 176px; }
  .bus-c-x { display: none; }
}
@container bus (max-width: 600px) {
  .bus { --bus-h: 480px; }
  .bus-hd { padding: 11px 12px 9px; }
  .bus-hd__a { display: none; }
  .bus-hd__t small { font-size: 10.5px; }
  .bus-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
  /* liste: yalnız sahnedeki iki güzergâh (uygulamada liste ayrıntının üstünde, tam) */
  .bus-ls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bus-rt { display: none; box-shadow: none; }
  .bus-rt--m, .bus-rt--y { display: block; }
  .bus-rt--y { box-shadow: inset 1px 0 0 #f1f2f4; }
  .bus-veh, .bus-f--n, .bus-bx__p { display: none; }
  .bus-fm { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q q" "s b"; }
  .bus-pho { right: 50%; margin-right: -131px; }
  /* tek sütunda tablo başlığı çizilmez (sütunlar kendini anlatır), satır 25 px: yeni eklenen satır görünür kalsın */
  .bus-tr--h { display: none; }
  .bus-tr__in > * { padding: 5px 0 6px; }
  .bus-tbw { --bus-rh: 25px; --bus-thh: 0px; }
}
@container bus (max-width: 470px) {
  .bus-hd { padding: 10px 10px 8px; }
  .bus-hd__t > b { font-size: 15px; }
  .bus-hd__t small { display: none; }
  .bus-fl { padding: 0 10px; }
  .bus-fl__m { padding: 6px 10px; font-size: 10.5px; line-height: 14px; }
  .bus-grid { padding: 0 10px 10px; }
  .bus-ls { grid-template-columns: minmax(0, 1fr); }
  .bus-rt--m { box-shadow: inset 0 -1px 0 #f1f2f4; }
  .bus-rt--y { box-shadow: none; }
  .bus-rt { padding: 6px 10px; }
  .bus-cd { padding: 9px 10px 10px; }
  .bus-tr__in { grid-template-columns: minmax(0, 1fr) 166px; padding: 0 8px; }
  .bus-c-sn, .bus-c-x { display: none; }
  .bus-tr__dk { font-size: 10px; }

  .bus-in--s { gap: 4px; padding: 0 7px 0 8px; font-size: 10px; }
  .bus-btn { padding: 0 11px; }
  .bus-pho { width: 256px; margin-right: -128px; }
}