/* SAHNE · ZİYARETÇİ GİRİŞ ÇIKIŞ KAYDI (includes/scenes/visitors.php) — adımlar:
   s1 «Yeni ziyaretçi» bağlantısı → sayfa forma kayar, «Onur Kurt» · s2 firma + yaka kartı · s3 ziyaret amacı ·
   s4 sayfa formun dibine kayar, personel + okul seçilir · s5 «Giriş yaptır» → sayfa yenilenir, yeşil şerit, satır eklenir, sayaçlar ·
   s6 Hira Özdemir «Çıkış» → onay penceresi · s7 «Evet» → «Çıkış alındı.», satır kalkar · s8 «Kayıtlar»: günün kart satırları.
   Kaydırma: Bugün sayfası .vst-scr'de tek sütun durur; kaydırma miktarı blok yüksekliklerinden (--hdr, --rh, --fH, --stH)
   HESAPLANIR — kap daralıp satırlar iki satıra sarınca da hedef blok görünür alana düşer. */
@property --vst-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

.vst { container-type: inline-size; --d: 0s; --vst-ok: #047857; --vst-spring: cubic-bezier(.34, 1.56, .64, 1); }
/* ölçü değişkenleri kabın İÇİNDE (.vst-win): kap sorgusu kabın kendisine uygulanmaz */
.vst-win { position: relative; padding: var(--pad); background: #f5f6f8;
  --pad: 12px; --stH: 352px; --hdr: 40px; --rh: 46px; --fH: 438px; --flH: 48px;
  --sbH: 204px; --sb1: 87px; --sb3: var(--sb1); --sb4: 145px;
  --c2: calc(var(--hdr) + 2 * var(--rh));
  --y1: calc(-18px - var(--c2));
  --y3: var(--y1);
  --y4: calc(var(--stH) - 32px - var(--fH) - var(--c2));
  --y: 0px; --sbT: 0px; }
.vst.s1 .vst-win { --y: var(--y1); --sbT: var(--sb1); }
.vst.s3 .vst-win { --y: var(--y3); --sbT: var(--sb3); }
.vst.s4 .vst-win { --y: var(--y4); --sbT: var(--sb4); }
.vst.s5 .vst-win { --y: 0px; --sbT: 0px; }
.vst-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş: katmanlar aynı ızgara hücresinde üst üste */
.vst-x { display: grid; min-width: 0; }
.vst-x > * { grid-area: 1 / 1; min-width: 0; }
.vst [class*="on-"] { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.vst.s5:not(.s7) .on-5-7, .vst.s7 .on-7 { opacity: 1; transform: none; }
.vst.s5 { --d: .66s; } .vst.s7 { --d: .64s; }
/* ikinci yenilenişte eski ileti örtünün altında anında gider, yenisi belirir (iki metin üst üste görünmesin) */
.vst.s7 .vst-fl .on-5-7 { transition-duration: 0s; transition-delay: .6s; }

/* imleç: .vst-hit tıklama noktasıdır; ok ucu tam orada, halka dalgası çevresinde */
.vst-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.vst-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.vst-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 vst-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 32% { opacity: 1; transform: none; scale: 1; } 46% { scale: .8; } 58% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(3px, 4px); } }
@keyframes vst-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes vst-push { 50% { scale: .94; } }
@keyframes vst-reload { 0% { opacity: 0; } 30% { opacity: .82; } 100% { opacity: 0; } }
@keyframes vst-type { to { clip-path: inset(0 0 0 0); } }
@keyframes vst-carm { from { left: 0; } to { left: 100%; } }
@keyframes vst-focw { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vst-sw-show { 0% { scale: .7; } 45% { scale: 1.05; } 80% { scale: .96; } 100% { scale: 1; } }
@keyframes vst-glow { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* ── başlık bandı + çipler (tdBant kartı) ── */
.vst-bc { position: relative; z-index: 2; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 24, 27, .06), 0 1px 2px rgba(16, 37, 64, .05), 0 10px 22px -16px rgba(16, 37, 64, .4);
  transition: border-radius .2s var(--ui-ease) .55s; }
.vst.s8 .vst-bc { border-radius: 14px 14px 0 0; }
.vst-band { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 14px 14px 0 0; color: #fff; overflow: hidden;
  background: radial-gradient(260px 90px at 100% -20%, rgba(125, 175, 235, .38), transparent 70%), radial-gradient(220px 80px at -6% 130%, rgba(45, 212, 191, .16), transparent 65%),
    linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.vst-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.vst-ico .vst-i { width: 17px; height: 17px; stroke-width: 1.8; }
.vst-ttl { flex: 1; min-width: 0; }
.vst-ttl > b { display: block; font-size: 15px; line-height: 19px; font-weight: 800; letter-spacing: -.015em; white-space: nowrap; }
.vst-ttl small { display: block; margin-top: 1px; font-size: 11px; line-height: 15px; font-weight: 600; color: rgba(226, 236, 248, .9); font-variant-numeric: tabular-nums; text-wrap: balance; }
.vst-ttl small b { font-weight: 800; color: #fff; }
.vst-chips { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 0 0 14px 14px; box-shadow: inset 0 1px 0 #f1f1f3; }
.vst-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; background: #fff; font-size: 11.5px; font-weight: 700; color: #3f3f46; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 1px rgba(16, 37, 64, .03);
  transition: background-color .25s var(--ui-ease) .55s, color .25s var(--ui-ease) .55s, box-shadow .25s var(--ui-ease) .55s; }
.vst-chip .vst-i { width: 13px; height: 13px; }
.vst-chip--bg, .vst.s8 .vst-chip--ky { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1px var(--navy), inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px -3px rgba(20, 61, 107, .7); }
.vst.s8 .vst-chip--bg { background: #fff; color: #3f3f46; box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 1px rgba(16, 37, 64, .03); }
.vst-cn { display: inline-grid; grid-template-columns: 1fr; opacity: .82; font-variant-numeric: tabular-nums; }
.vst-cn > * { min-width: 0; overflow: hidden; }
.vst-cn--k { grid-template-columns: 0fr; margin-left: -5px; opacity: 0; transition: grid-template-columns .35s var(--ui-ease) .55s, margin-left .35s var(--ui-ease) .55s, opacity .25s var(--ui-ease) .65s; }
.vst.s8 .vst-cn--k { grid-template-columns: 1fr; margin-left: 0; opacity: .82; }
.vst-chip--ky .vst-hit { right: 20px; bottom: 8px; }
.vst.s8 .vst-chip--ky { animation: vst-push .3s var(--ui-ease) .36s; }
.vst.s8 .vst-hit--kay .ui-cur { animation: vst-cur 1s var(--ui-ease) both; }
.vst.s8 .vst-hit--kay .vst-rip { animation: vst-rip .55s ease-out .38s both; }

/* sayaçlar (ileri sayar) */
.vst-n { counter-reset: vn var(--vst-n); font-variant-numeric: tabular-nums; transition: --vst-n .55s var(--ui-ease) var(--nd, 0s); }
.vst-n::after { content: counter(vn); }
.vst-n--g { --vst-n: 3; } .vst-n--i { --vst-n: 2; } .vst-n--m { --vst-n: 63; }
.vst.s5 .vst-n--g { --vst-n: 4; } .vst.s5 .vst-n--i { --vst-n: 3; } .vst.s5 .vst-n--m { --vst-n: 64; }
.vst.s7 .vst-n--i { --vst-n: 2; }
.vst.s5 .vst-n { --nd: .8s; } .vst.s7 .vst-n { --nd: .85s; }

/* ── sahne gövdesi: iki sayfa aynı hücrede ── */
.vst-stage { position: relative; display: grid; height: var(--stH); margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad)); overflow: hidden; }
.vst-stage::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(rgba(245, 246, 248, 0), #f5f6f8); pointer-events: none; transition: opacity .3s var(--ui-ease) .55s; }
/* Kayıtlar listesi kartın alt kenarıyla kapanır: alt geçiş son satırı soldurmasın */
.vst.s8 .vst-stage::after { opacity: 0; }
/* sayfa kaydırılınca üst kenarda yumuşak geçiş (içerik bant kartının altına girer) */
.vst-stage::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(#f5f6f8, rgba(245, 246, 248, 0)); opacity: 0; pointer-events: none; transition: opacity .3s var(--ui-ease) var(--sd, 0s); }
.vst.s1:not(.s5) .vst-stage::before { opacity: 1; }
.vst.s5 .vst-stage::before { transition-duration: 0s; transition-delay: .6s; }
.vst-p { grid-area: 1 / 1; min-width: 0; padding: 0 var(--pad); }
.vst-today { position: relative; transition: opacity .3s var(--ui-ease) .55s, translate .4s var(--ui-ease) .55s; }
/* sayfa yenilenişi: sayfa zemini rengindeki örtü kısa an belirir (bölmenin kendi opaklığına dokunmaz — s8'deki geçişi bozmasın) */
.vst-today::after { content: ""; position: absolute; z-index: 2; inset: 0; background: #f5f6f8; opacity: 0; pointer-events: none; }
.vst.s5:not(.s6) .vst-today::after, .vst.s7:not(.s8) .vst-today::after { animation: vst-reload .55s ease-in-out .45s both; }
.vst.s8 .vst-today { opacity: 0; translate: 0 -8px; }
.vst-log { opacity: 0; translate: 0 10px; transition: opacity .3s var(--ui-ease) .58s, translate .45s var(--ui-ease) .58s; }
.vst.s8 .vst-log { opacity: 1; translate: 0 0; }
.vst-scr { padding-top: 12px; translate: 0 var(--y); transition: translate .62s cubic-bezier(.32, .12, .2, 1) var(--sd, 0s); }
.vst.s1 { --sd: .52s; } .vst.s3 { --sd: 0s; } .vst.s4 { --sd: .04s; }
.vst.s5 .vst-scr { transition-duration: 0s; transition-delay: .6s; }
/* kaydırma çubuğu ipucu (yalnız form doldurulurken) */
.vst-sbar { position: absolute; z-index: 4; top: 2px; right: 3px; width: 4px; height: var(--sbH); border-radius: 4px; background: rgba(39, 39, 42, .3); opacity: 0;
  translate: 0 var(--sbT); transition: translate .62s cubic-bezier(.32, .12, .2, 1) var(--sd, 0s), opacity .25s var(--ui-ease) var(--sd, 0s); }
.vst.s1:not(.s5) .vst-sbar { opacity: 1; }
.vst.s5 .vst-sbar { transition-duration: 0s, .15s; transition-delay: .5s; }

/* yeşil şerit (sayfa yenilenince) */
.vst-fl { height: 0; overflow: hidden; transition: height 0s linear .62s; }
.vst.s5 .vst-fl { height: var(--flH); }
.vst-fl__b { align-items: center; height: 36px; padding: 0 14px; border-radius: 14px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; font-size: 12px; font-weight: 700; color: #065f46; white-space: nowrap; }

/* ── kartlar ── */
.vst-card { position: relative; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 24, 27, .06), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* şu an içeride */
.vst-ic__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--hdr); padding: 0 14px; }
.vst-ic__h > b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 900; color: #18181b; white-space: nowrap; }
.vst-ic__h > b .vst-i { width: 15px; height: 15px; color: #059669; }
.vst-yeni { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--navy-soft); white-space: nowrap; text-decoration: underline transparent; text-underline-offset: 2px; transition: text-decoration-color .2s var(--ui-ease) .3s; }
.vst-yeni .vst-i { width: 13px; height: 13px; }
.vst-yeni .vst-hit { right: 30px; bottom: 5px; }
.vst.s1:not(.s2) .vst-yeni { text-decoration-color: currentColor; }
.vst.s1:not(.s2) .vst-hit--yeni .ui-cur { animation: vst-cur .95s var(--ui-ease) both; }
.vst.s1:not(.s2) .vst-hit--yeni .vst-rip { animation: vst-rip .55s ease-out .36s both; }
.vst-r { position: relative; display: flex; align-items: center; gap: 12px; height: var(--rh); padding: 0 14px; box-shadow: inset 0 1px 0 #f1f1f3; }
.vst-r__t { flex: 1; min-width: 0; }
.vst-r__ad { display: block; line-height: 16px; white-space: nowrap; }
.vst-r__ad b { font-size: 12.5px; font-weight: 800; color: #18181b; letter-spacing: -.01em; }
.vst-r__ad small { font-size: 10.5px; font-weight: 700; color: #71717a; }
.vst-r__s { display: block; margin-top: 1px; font-size: 10.5px; line-height: 14px; font-weight: 500; color: #71717a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vst-out { position: relative; flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 8px; background: #27272a; color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .18); }
.vst-out .vst-hit { right: 15px; bottom: 7px; }
.vst.s6 .vst-r--hira .vst-out { animation: vst-push .3s var(--ui-ease) .36s; }
.vst.s6:not(.s7) .vst-hit--cikis .ui-cur { animation: vst-cur .95s var(--ui-ease) both; }
.vst.s6:not(.s7) .vst-hit--cikis .vst-rip { animation: vst-rip .55s ease-out .38s both; }
/* yeni satır: yenilenen sayfada listenin başında; kısa bir vurguyla belirir */
.vst-r--new { height: 0; overflow: hidden; opacity: 0; transition: height .38s var(--ui-ease) .62s, opacity .3s var(--ui-ease) .7s; }
.vst-r--new::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 79, 134, .1), rgba(29, 79, 134, .02)); box-shadow: inset 2px 0 0 var(--navy-soft); opacity: 0; pointer-events: none; }
.vst.s5 .vst-r--new { height: var(--rh); opacity: 1; }
.vst.s5:not(.s6) .vst-r--new::before { animation: vst-glow 1.3s ease-out .75s both; }
/* çıkışı alınan satır kalkar */
.vst-r--hira { transition: height .34s var(--ui-ease) .68s, opacity .15s var(--ui-ease) .6s; }
.vst.s7 .vst-r--hira { height: 0; opacity: 0; overflow: hidden; }

/* yeni ziyaretçi formu */
.vst-form { display: flex; flex-direction: column; height: var(--fH); margin-top: 12px; padding: 14px; }
.vst-form__h { display: flex; align-items: center; gap: 6px; height: 22px; margin-bottom: 10px; font-size: 13.5px; font-weight: 900; color: #18181b; letter-spacing: -.01em; }
.vst-form__h .vst-i { width: 16px; height: 16px; color: var(--navy-soft); }
.vst-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.vst-f { position: relative; display: block; min-width: 0; height: 48px; }
.vst-f--ad, .vst-f--fy, .vst-f--am, .vst-f--pa { grid-column: 1 / -1; }
.vst-f--fy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vst-l { display: block; height: 14px; margin-bottom: 4px; font-size: 10.5px; line-height: 14px; font-weight: 700; color: #52525b; white-space: nowrap; }
.vst-l em { font-style: normal; font-weight: 500; color: #71717a; }
.vst-in { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; font-size: 11.5px; font-weight: 600; color: #18181b; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #d4d4d8, 0 1px 1px rgba(16, 37, 64, .03); }
.vst-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .15); opacity: 0; transition: opacity .15s var(--ui-ease); pointer-events: none; }
.vst-ph { color: #8a909b; font-weight: 500; }
.vst-ph--am { position: absolute; left: 10px; top: 0; line-height: 30px; transition: opacity 0s linear .08s; }
.vst-flag { flex: none; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.vst-chv { width: 12px; height: 12px; color: #71717a; }
.vst-in--tel { gap: 4px; }
.vst-in--tel .vst-chv { width: 10px; height: 10px; margin-right: 3px; }
.vst-dial { font-weight: 600; color: #3f3f46; }
.vst-in--sel { justify-content: space-between; padding-right: 9px; }
.vst-in--sel .vst-x { flex: 1; }
.vst-in--sel .vst-x > * { overflow: hidden; text-overflow: ellipsis; transition: opacity .2s var(--ui-ease); }
.vst-sv1 { opacity: 0; }
.vst-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 10px; box-shadow: inset 0 1px 0 #e4e4e7; }
.vst-btn { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.vst-btn--pre { color: #0369a1; background: #fff; box-shadow: inset 0 0 0 1px #7dd3fc; }
.vst-btn--go { padding: 0 14px; color: #fff; background: var(--vst-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); }
.vst-btn--go .vst-hit { right: 26px; bottom: 9px; }
.vst.s5:not(.s6) .vst-btn--go { animation: vst-push .3s var(--ui-ease) .36s; }
.vst.s5:not(.s6) .vst-hit--giris .ui-cur { animation: vst-cur .9s var(--ui-ease) both; }
.vst.s5:not(.s6) .vst-hit--giris .vst-rip { animation: vst-rip .55s ease-out .38s both; }

/* yazım: harf harf açılır, imleç çizgisi metnin ucunda yürür */
.vst-tw { position: relative; display: inline-block; min-width: 0; vertical-align: top; transition: opacity 0s linear 0s; }
.vst-tt { display: inline-block; clip-path: inset(0 100% 0 0); }
.vst-car { position: absolute; top: 1px; bottom: 1px; left: 0; width: 1.5px; margin-left: 1px; border-radius: 1px; background: var(--navy-soft); opacity: 0; }
.vst.s1 .vst-tw--ad .vst-tt { animation: vst-type .45s steps(9, end) 1.06s both; }
.vst.s1:not(.s2) .vst-tw--ad .vst-car { opacity: 1; transition: opacity 0s linear 1s; animation: vst-carm .45s steps(9, end) 1.06s both; }
.vst.s1:not(.s2) .vst-in--ad::after { opacity: 1; transition-delay: 1s; }
.vst.s2 .vst-tw--fi .vst-tt { animation: vst-type .72s steps(26, end) .1s both; }
.vst.s2:not(.s3) .vst-tw--fi .vst-car { animation: vst-carm .72s steps(26, end) .1s both, vst-focw .86s linear .04s both; }
.vst.s2:not(.s3) .vst-in--fi::after { animation: vst-focw .86s linear .04s both; }
.vst.s2 .vst-tw--yk .vst-tt { animation: vst-type .2s steps(4, end) .96s both; }
.vst.s2:not(.s3) .vst-tw--yk .vst-car { opacity: 1; transition: opacity 0s linear .9s; animation: vst-carm .2s steps(4, end) .96s both; }
.vst.s2:not(.s3) .vst-in--yk::after { opacity: 1; transition-delay: .9s; }
.vst.s3 .vst-ph--am { opacity: 0; }
.vst.s3 .vst-tw--am .vst-tt { animation: vst-type .6s steps(22, end) .1s both; }
.vst.s3:not(.s4) .vst-tw--am .vst-car { opacity: 1; transition: opacity 0s linear .06s; animation: vst-carm .6s steps(22, end) .1s both; }
.vst.s3:not(.s4) .vst-in--am::after { opacity: 1; transition-delay: .06s; }
/* s4: personel ve okul seçilir */
.vst-in--sel .vst-hit { right: 40px; bottom: 10px; }
.vst.s4:not(.s5) .vst-hit--ps .ui-cur { animation: vst-cur .78s var(--ui-ease) .42s both; }
.vst.s4:not(.s5) .vst-hit--ps .vst-rip { animation: vst-rip .5s ease-out .74s both; }
.vst.s4:not(.s5) .vst-in--ps::after { animation: vst-focw .6s linear .74s both; }
.vst.s4 .vst-in--ps .vst-sv0 { opacity: 0; transition-delay: .82s; }
.vst.s4 .vst-in--ps .vst-sv1 { opacity: 1; transition-delay: .82s; }
.vst.s4:not(.s5) .vst-hit--ok .ui-cur { animation: vst-cur .78s var(--ui-ease) 1s both; }
.vst.s4:not(.s5) .vst-hit--ok .vst-rip { animation: vst-rip .5s ease-out 1.32s both; }
.vst.s4:not(.s5) .vst-in--ok::after { opacity: 1; transition-delay: 1.32s; }
.vst.s4 .vst-in--ok .vst-sv0 { opacity: 0; transition-delay: 1.4s; }
.vst.s4 .vst-in--ok .vst-sv1 { opacity: 1; transition-delay: 1.4s; }
/* s5: yenilenen sayfada form boş gelir */
.vst.s5 .vst-tw { opacity: 0; transition-delay: .6s; }
.vst.s5 .vst-ph--am { opacity: 1; transition-delay: .6s; }
.vst.s5 .vst-in--sel .vst-sv0 { opacity: 1; transition: opacity 0s linear .6s; }
.vst.s5 .vst-in--sel .vst-sv1 { opacity: 0; transition: opacity 0s linear .6s; }

/* ── kayıtlar ── */
.vst-flt { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 10px; border-radius: 0 0 14px 14px; background: #fff;
  box-shadow: inset 0 1px 0 #f1f1f3, 0 0 0 1px rgba(24, 24, 27, .06), 0 10px 22px -16px rgba(16, 37, 64, .4); clip-path: inset(0 -24px -30px -24px); }
.vst-q, .vst-sel, .vst-dt { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 10px; background: #fff; font-size: 11.5px; font-weight: 500; color: #71717a; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(24, 24, 27, .05); }
.vst-q { flex: 1 1 0; min-width: 0; }
.vst-q .vst-i { width: 14px; height: 14px; color: #71717a; }
.vst-sel { flex: none; justify-content: space-between; width: 150px; font-weight: 600; color: #27272a; }
.vst-dts { display: flex; gap: 6px; flex-basis: 100%; }
.vst-dt { justify-content: space-between; width: 150px; font-weight: 600; color: #27272a; letter-spacing: .02em; }
.vst-dt .vst-i { width: 13px; height: 13px; color: #27272a; }
.vst-lst { margin-top: 12px; overflow: hidden; }
.vst-lr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; padding: 9px 14px; box-shadow: inset 0 -1px 0 #f1f1f3;
  opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(.72s + var(--i) * 60ms), translate .4s var(--ui-ease) calc(.72s + var(--i) * 60ms); }
.vst.s8 .vst-lr { opacity: 1; translate: 0 0; }
.vst-lr__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-basis: 100%; min-width: 0; height: 18px; }
.vst-lr__h b { min-width: 0; font-size: 12.5px; font-weight: 800; color: #18181b; letter-spacing: -.01em; white-space: nowrap; }
.vst-bd { flex: none; height: 18px; padding: 0 8px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 18px; }
.vst-bd--in { background: #d1fae5; color: #047857; }
.vst-bd--out { background: #f4f4f5; color: #3f3f46; }
.vst-lr__c { flex-basis: 100%; font-size: 10.5px; line-height: 14px; font-weight: 600; color: #71717a; white-space: nowrap; }
.vst-lr__m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 3px; min-width: 0; font-variant-numeric: tabular-nums; }
.vst-lr__ev { font-size: 11.5px; line-height: 16px; font-weight: 500; color: #52525b; white-space: nowrap; }
.vst-lr__d { font-size: 11.5px; line-height: 16px; font-weight: 500; color: #71717a; white-space: nowrap; }
.vst-lr__gc { font-size: 10.5px; line-height: 16px; font-weight: 500; color: #71717a; white-space: nowrap; }
.vst-lr__gc i { font-style: normal; font-size: 10px; font-weight: 600; }

/* ── çıkış onayı (appConfirm) ── */
.vst-sw { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; border-radius: inherit; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .2s var(--ui-ease); }
.vst-sw__c { position: relative; display: flex; flex-direction: column; align-items: center; width: min(286px, 100%); padding: 20px 18px 16px; border-radius: 10px; background: #fff; text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 24px 48px -16px rgba(0, 0, 0, .45); }
.vst-sw__i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px #c9dae1; color: #87adbd; font-size: 27px; font-weight: 600; line-height: 1; }
.vst-sw__t { margin-top: 12px; font-size: 17px; line-height: 21px; font-weight: 700; color: #18181b; }
.vst-sw__m { margin-top: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: #545454; }
.vst-sw__b { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.vst-sb { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #fff; }
.vst-sb--grey { background: #71717a; }
.vst-sb--dark { background: #18181b; }
.vst-sb--dark .vst-hit { right: 16px; bottom: 9px; }
.vst.s6:not(.s7) .vst-sw { opacity: 1; transition-delay: .5s; }
.vst.s6:not(.s7) .vst-sw__c { animation: vst-sw-show .4s var(--ui-ease) .5s both; }
.vst.s7:not(.s8) .vst-sw { transition-duration: .15s; transition-delay: .46s; }
.vst.s7 .vst-sb--dark { animation: vst-push .3s var(--ui-ease) .34s; }
.vst.s7:not(.s8) .vst-hit--evet .ui-cur { animation: vst-cur .85s var(--ui-ease) both; }
.vst.s7:not(.s8) .vst-hit--evet .vst-rip { animation: vst-rip .5s ease-out .36s both; }

/* ── DAR KAPLAR ── */
/* tek sütun (uygulamanın sm altı): personel/okul ve telefon/kimlik alt alta, bant simgesi ve «Giriş/çıkış kaydı» yok */
@container (max-width: 600px) {
  /* sahne 318: «Kayıtlar» kartı (üç kayıt) alt kenardan 8 px içeride kapanır, geniş kaptaki gibi. Kaydırma çubuğu:
     boy = stH² / (stH − y4) (içerik 710), konum = −y · stH / 710; s4'te çubuğun ucu sahnenin dibinde.
     s3: «Ziyaret amacı» odaklanınca sayfa 40 px daha kayar (318'de alan alt geçişin altında kalırdı); form başlığı üstten çıkar. */
  .vst-win { --pad: 10px; --stH: 318px; --fH: 546px; --sbH: 141px; --sb1: 67px; --sb3: 85px; --sb4: 175px; --y3: calc(var(--y1) - 40px); }
  .vst.s3 .vst-tw--am .vst-tt, .vst.s3:not(.s4) .vst-tw--am .vst-car { animation-delay: .3s; }
  .vst-ico, .vst-wd { display: none; }
  .vst-band { padding: 9px 12px; }
  .vst-ttl > b { font-size: 14px; line-height: 18px; }
  .vst-ttl small { font-size: 10.5px; line-height: 14px; }
  .vst-chips { padding: 6px 8px; }
  .vst-form { padding: 12px; }
  .vst-g { grid-template-columns: minmax(0, 1fr); }
  .vst-flt { padding: 8px 8px 9px; }
  .vst-q, .vst-sel, .vst-dts { flex-basis: 100%; }
  .vst-sel { width: auto; }
  .vst-dt { flex: 1; width: auto; }
  /* süzgeç tam satırlara sarınca dört kayıt sığmaz: liste üç kayıtla, kartın alt kenarıyla kapanır (yarım satır yok) */
  .vst-lr:nth-child(n+4) { display: none; }
}
/* telefon: içeridekiler satırının alt metni iki satıra sarar (kesilmez); firma kutusu yaka kutusundan geniş */
@container (max-width: 420px) {
  .vst-win { --rh: 60px; --sbH: 136px; --sb1: 77px; --sb3: 94px; --sb4: 180px; } /* içerik 738 */
  .vst-r { gap: 10px; padding: 0 12px; }
  .vst-r__s { white-space: normal; text-wrap: pretty; }
  .vst-r__ad small { font-size: 10px; }
  .vst-ic__h { padding: 0 12px; }
  .vst-f--fy { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
  .vst-chip { padding: 0 10px; gap: 4px; font-size: 11px; }
  .vst-lr { padding: 9px 12px; }
  .vst-fl__b { padding: 0 12px; }
}