/* SAHNE · SINAV OTURMA PLANI — KELEBEK (includes/scenes/exam-seating.php) — küçük bento sahnesi, adımlar:
   s1 «Yerleşimi üret» · s2 öğrenciler şube renginde sıralara yerleşir (koltukta salon no) + «78 öğrenci … yerleştirildi» ·
   s3 7-A şubesinin öğrencileri öne çıkar (aynı şube yan yana / önlü arkalı yok) · s4 «Çıktılar» → ızgara söner, imza föyü +
   kapı listesi */
@property --kse-n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.kse { container-type: inline-size; }
.kse-win { display: flex; flex-direction: column; height: 216px; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(16, 37, 64, .07), 0 6px 14px -6px rgba(16, 37, 64, .14), 0 22px 44px -24px rgba(16, 37, 64, .34); }
.kse svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* kurum renginde başlık bandı */
.kse-head { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft)); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.kse-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.kse-ico svg { width: 14px; height: 14px; }
.kse-title { font-size: 12px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.kse-date { margin-left: auto; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .8); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* plan sekmeleri (Kurgu · Yerleşim · Çıktılar) */
.kse-tabs { flex: none; display: flex; height: 32px; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--ui-line); }
.kse-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--ui-bg-2); box-shadow: inset 0 0 0 1px var(--ui-line); }
.kse-tab { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; color: var(--ui-muted); white-space: nowrap; transition: color .3s var(--ui-ease); }
.kse-tab::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--navy); box-shadow: 0 1px 2px rgba(11, 36, 64, .3), inset 0 1px 0 rgba(255, 255, 255, .12); opacity: 0; transform: translateX(-10px) scaleX(.8); transition: opacity .3s var(--ui-ease), transform .45s var(--ui-ease); }
.kse-tab svg:not(.ui-cur) { width: 11px; height: 11px; flex: none; }
.kse-tab em { display: inline-grid; place-items: center; min-width: 15px; height: 14px; padding: 0 4px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; background: rgba(16, 37, 64, .08); font-variant-numeric: tabular-nums; }
.kse-tab--yer { color: #fff; }
.kse-tab--yer::before { opacity: 1; transform: none; }
.kse-tab--yer em { background: rgba(255, 255, 255, .2); }
.kse-tab .ui-cur { right: -6px; bottom: -14px; transform: translate(14px, 12px); }

/* sahne gövdesi: üç durum aynı hücrede üst üste, çapraz geçer */
.kse-stage { position: relative; flex: 1; min-height: 0; display: grid; padding: 5px 10px; }
.kse-stage > * { grid-area: 1 / 1; min-width: 0; }

/* 1) üretim öncesi kontrol */
.kse-pre { display: flex; flex-direction: column; gap: 4px; transition: opacity .3s var(--ui-ease), transform .4s var(--ui-ease); }
.kse-pre__top { display: flex; align-items: center; gap: 8px; height: 24px; }
.kse-h { font-size: 11px; font-weight: 800; color: var(--ui-text); white-space: nowrap; }
.kse-btn { position: relative; margin-left: auto; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 10.5px; font-weight: 800; color: #fff; white-space: nowrap;
  background: var(--navy); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(11, 36, 64, .3), 0 4px 10px -4px rgba(11, 36, 64, .5); }
.kse-btn::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(29, 79, 134, .45); opacity: 0; pointer-events: none; }
.kse-btn .ui-cur { right: -8px; bottom: -14px; transform: translate(14px, 12px); }
.kse-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kse-kpis > span { display: flex; flex-direction: column; padding: 4px 7px 5px; border-radius: 8px; background: var(--ui-bg-2); box-shadow: inset 0 0 0 1px var(--ui-line); line-height: 1.2; min-width: 0; }
.kse-kpis small { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.kse-kpis b { font-size: 15px; font-weight: 800; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.kse-kpis em { font-style: normal; font-size: 10px; color: var(--ui-muted); white-space: nowrap; }
.kse-rule { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #1e4a7a; background: #e8f0fa; box-shadow: inset 0 0 0 1px #cfdcee; white-space: nowrap; }
.kse-rule svg { width: 11px; height: 11px; }
.kse-rule b { margin-left: 2px; padding: 0 6px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 800; line-height: 14px; }

/* 2) oturma planı */
.kse-room { position: relative; display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ui-ease), transform .45s var(--ui-ease); }
.kse-room__h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 6px; height: 12px; font-size: 10px; line-height: 12px; color: var(--ui-muted); white-space: nowrap; }
.kse-room__t { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.kse-room__t b { font-weight: 800; color: var(--ui-text); font-size: 10.5px; }
.kse-room__n { display: none; font-weight: 600; }
.kse-key { display: flex; align-items: center; gap: 3px; }
.kse-key small { margin-right: 2px; font-size: 10px; font-weight: 700; color: var(--ui-text-2); }
.kse-key i { height: 12px; padding: 0 4px; border-radius: 3px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 12px;
  background: hsl(var(--h) 80% 93%); color: hsl(var(--h) 65% 24%); box-shadow: inset 0 0 0 1px hsl(var(--h) 52% 83%);
  transition: opacity .3s var(--ui-ease), box-shadow .3s var(--ui-ease); }
.kse-board { justify-self: center; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a93a3; }
.kse-board::before, .kse-board::after { content: ""; width: 12px; height: 1px; background: var(--ui-line-2); }
.kse-rows { display: grid; grid-template-columns: 8px repeat(3, minmax(0, 1fr)); gap: 3px 5px; align-items: center; }
.kse-rn { font-size: 10px; font-weight: 700; color: #8a93a3; text-align: right; font-variant-numeric: tabular-nums; }
.kse-desk { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .04); }
.kse-seat { position: relative; display: flex; align-items: center; gap: 3px; height: 15px; min-width: 0; padding: 0 4px; border-radius: 4px; font-size: 10px; line-height: 15px; white-space: nowrap;
  background: hsl(var(--h) 80% 93%); color: hsl(var(--h) 65% 24%); box-shadow: inset 0 0 0 1px hsl(var(--h) 52% 83%);
  opacity: 0; transform: translateY(-5px) scale(.85);
  transition: opacity .25s var(--ui-ease), transform .38s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s var(--ui-ease); transition-delay: calc(var(--i) * 24ms); }
.kse-seat b { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.kse-seat__ad { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.kse-seat--bos { padding: 0 3px; background: #f8fafc; color: #8a93a3; border: 1px dashed #c3cbd6; box-shadow: none; line-height: 13px; font-style: italic; font-weight: 600; opacity: 1; transform: none; }

/* 3) çıktılar: kâğıtlar */
.kse-papers { position: relative; pointer-events: none; }
.kse-sheet { position: absolute; left: 0; right: 0; margin-inline: auto; width: min(100% - 40px, 272px); border-radius: 4px; background: #fff;
  box-shadow: 0 0 0 1px #e1e5eb, 0 1px 2px rgba(16, 37, 64, .08), 0 14px 28px -12px rgba(16, 37, 64, .42);
  opacity: 0; transform: translate(26px, 8px); transition: opacity .3s var(--ui-ease), transform .55s cubic-bezier(.34, 1.4, .64, 1); }
.kse-sheet--back { top: -2px; bottom: 8px; left: 20px; background: #fbfcfd; transition-delay: .25s; }
.kse-sheet--front { top: 12px; bottom: -2px; padding: 5px 8px 0; transition-delay: .4s; }
.kse-sheet__tag { display: flex; align-items: center; gap: 4px; height: 14px; padding: 0 8px; font-size: 10px; font-weight: 700; color: var(--ui-muted); white-space: nowrap; }
.kse-sheet__tag svg { width: 10px; height: 10px; }
.kse-sheet__head { display: flex; align-items: center; gap: 7px; padding-bottom: 3px; border-bottom: 1px solid var(--navy); }
.kse-plate { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 24px; border-radius: 5px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.kse-plate small { font-size: 10px; font-weight: 600; opacity: .78; }
.kse-sheet__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.18; }
.kse-sheet__t small { font-size: 10px; font-weight: 700; color: var(--navy-soft); white-space: nowrap; }
.kse-sheet__t b { font-size: 11.5px; font-weight: 800; color: var(--ui-text); white-space: nowrap; }
.kse-list { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 7px; margin-top: 2px; font-size: 10px; line-height: 14px; color: var(--ui-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kse-list > span { border-bottom: 1px solid #eef1f5; }
.kse-list__h { font-weight: 800; color: var(--ui-muted); line-height: 12px; border-bottom-color: var(--ui-line-2) !important; }
.kse-list__no { color: var(--ui-muted); }
.kse-list__ad { font-weight: 700; color: var(--ui-text); overflow: hidden; }
.kse-list__sira { text-align: right; color: var(--ui-muted); }
.kse-list__sira b { margin-right: 3px; font-size: 11px; font-weight: 800; color: var(--ui-text); }

/* alt şerit: durum iletileri aynı hücrede çapraz geçer */
.kse-foot { flex: none; display: grid; align-items: center; height: 26px; padding: 0 12px; border-top: 1px solid var(--ui-line); background: var(--ui-bg-2); font-size: 10.5px; font-weight: 700; color: var(--ui-text-2); }
.kse-st { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .3s var(--ui-ease), transform .4s var(--ui-ease); }
.kse-st svg { flex: none; width: 12px; height: 12px; stroke-width: 2.4; }
.kse-st0 { opacity: 1; transform: none; color: var(--ui-muted); }
.kse-dot { width: 6px; height: 6px; border-radius: 50%; background: #b9c1cd; }
.kse-st1 svg { color: var(--ui-ok); }
.kse-st3 svg { color: var(--navy-soft); }

/* ileri sayan sayaç (hareket azaltmada son değer) */
.kse-cnt { --kse-n: 0; counter-reset: kse-n var(--kse-n); transition: --kse-n .7s var(--ui-ease); }
.kse-cnt::after { content: counter(kse-n); }
.kse-cnt--tab { max-width: 0; min-width: 0 !important; margin-left: -4px; padding: 0 !important; opacity: 0; transform: scale(.5);
  transition: --kse-n .7s var(--ui-ease), opacity .25s var(--ui-ease) .1s, transform .4s cubic-bezier(.34, 1.56, .64, 1) .1s, max-width .3s var(--ui-ease), margin .3s var(--ui-ease), padding .3s var(--ui-ease); }

/* ── ADIMLAR ── */
/* s1: imleç «Yerleşimi üret»e kayar, basar; halka dalgası */
.kse.s1:not(.s2) .kse-btn .ui-cur { opacity: 1; transform: none; animation: kse-press .32s ease-in-out .55s; }
.kse.s1:not(.s2) .kse-btn { animation: kse-btn .32s ease-in-out .58s; }
.kse.s1:not(.s2) .kse-btn::after { animation: kse-ring .6s ease-out .62s; }
/* s2: kontrol söner, derslik belirir; öğrenciler karışık sırayla oturur */
.kse.s2 .kse-pre { opacity: 0; transform: translateY(-6px); }
.kse.s2 .kse-room { opacity: 1; transform: none; transition-delay: .1s; }
.kse.s2 .kse-seat { opacity: 1; transform: none; }
.kse.s2 .kse-cnt { --kse-n: 78; }
.kse.s2 .kse-cnt--tab { max-width: 30px; min-width: 15px !important; margin-left: 0; padding: 0 4px !important; opacity: 1; transform: none; }
.kse.s2 .kse-st0 { opacity: 0; transform: translateY(-4px); }
.kse.s2:not(.s4) .kse-st1 { opacity: 1; transform: none; transition-delay: .25s; }
/* s3: 7-A şubesi öne çıkar — altı öğrencinin hiçbiri yan yana ya da önlü arkalı değil */
.kse.s3 .kse-seat { transition-delay: 0s; }
.kse.s3:not(.s4) .kse-seat:not(.kse-seat--a), .kse.s3:not(.s4) .kse-key i:not(.kse-key--a) { opacity: .32; }
.kse.s3:not(.s4) .kse-seat--a, .kse.s3:not(.s4) .kse-key--a { box-shadow: inset 0 0 0 1px hsl(var(--h) 62% 42%), 0 1px 3px -1px hsl(var(--h) 60% 30% / .45); }
/* s4: «Çıktılar» sekmesi; ızgara söner, imza föyü ve kapı listesi gelir */
.kse.s4 .kse-room { opacity: 0; transform: translateY(-6px); transition-delay: 0s; }
.kse.s4 .kse-tab--yer { color: var(--ui-muted); }
.kse.s4 .kse-tab--yer::before { opacity: 0; transform: translateX(10px) scaleX(.8); }
.kse.s4 .kse-tab--yer em { background: rgba(16, 37, 64, .08); }
.kse.s4 .kse-tab--cikti { color: #fff; }
.kse.s4 .kse-tab--cikti::before { opacity: 1; transform: none; transition-delay: .1s; }
.kse.s4 .kse-sheet { opacity: 1; transform: none; }
.kse.s4 .kse-st3 { opacity: 1; transform: none; transition-delay: .5s; }
/* son adım (hareket azaltmada da durulan kare): imleç basar, sonra söner */
.kse.s4 .kse-tab--cikti .ui-cur { opacity: 1; transform: none; animation: kse-press .3s ease-in-out .5s, kse-fade .3s ease-in 1.6s forwards; }
@keyframes kse-press { 0%, 100% { transform: none; } 45% { transform: scale(.82) translate(-1px, -1px); } }
@keyframes kse-btn { 0%, 100% { transform: none; } 45% { transform: scale(.95); } }
@keyframes kse-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.25, 1.6); } }
@keyframes kse-fade { to { opacity: 0; } }
.is-static.kse .ui-cur { opacity: 0 !important; }

/* ── DAR KAPLAR ── */
@container (min-width: 440px) {
  .kse-win { height: 236px; }
  .kse-stage { padding-block: 6px; }
  .kse-pre { justify-content: center; gap: 6px; }
  .kse-kpis > span { padding: 5px 7px 6px; }
  .kse-sheet--back { top: 0; }
  .kse-sheet--front { top: 14px; }
  .kse-sheet__head { padding-bottom: 4px; }
  .kse-plate { height: 26px; }
  .kse-list { line-height: 15px; }
  .kse-list__h { line-height: 13px; }
  .kse-sheet { width: min(100% - 40px, 320px); }
  .kse-seat { height: 18px; line-height: 18px; }
  .kse-rows { row-gap: 4px; }
}
@container (min-width: 470px) { .kse-room__n { display: inline; } }
/* ad soyad yalnız en geniş kapta (680 px): «5 Serkan Kahraman» kesilmeden sığar */
@container (min-width: 680px) { .kse-seat { padding: 0 3px; } .kse-seat__ad { display: block; } }
@container (max-width: 470px) { .kse-date { font-size: 10px; } }
@container (max-width: 324px) {
  .kse-tab { padding: 0 6px; }
  .kse-head, .kse-tabs { padding-inline: 10px; }
}
/* en dar kap (≈269 px): kapı listesinde Salon sütunu düşer (salon, sıranın büyük sayısında zaten yazılı), adlar tam sığar */
@container (max-width: 290px) {
  .kse-list { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kse-list__sl { display: none; }
  .kse-key small { display: none; }
  .kse-seat--bos { justify-content: center; gap: 2px; padding: 0 1px; }
}