/* SAHNE · VELİ ANKETİ: DOLDURMAYANA HATIRLATMA → VELİ DOLDURUR (includes/scenes/surveys.php) — adımlar:
   s1 hatırlatma metni yazılır · s2 «Hatırlatma gönder» → onay penceresi · s3 «Evet» → sayfa yenilenir, «Hatırlatma gönderildi:
   279 kişi.» · s4 velinin kilit ekranına bildirim · s5 bildirime dokunur → form · s6 kaydırırken 1. sorunun sıraları dolar, 2. soruya
   iner, «Tamamen Katılıyorum» · s7 formun sonu: 25. soru işaretli, «Anketi gönder»e dek kayar · s8 «Anketi gönder» → «Anketiniz
   kaydedildi…» · s9 telefon çekilir, yönetici sayfayı yeniler: %45 · 246 / 547 · 301 */
.srv { container-type: inline-size; --H: 452px; --scr: 592px; --sp: cubic-bezier(.34, 1.56, .64, 1);
  --amb-50: #fffbeb; --amb-300: #fcd34d; --amb-700: #b45309; --amb-800: #92400e; --amb-900: #78350f; --em-700: #047857; --em-800: #065f46; }
.srv-stage { position: relative; height: var(--H); }
.srv-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* çapraz geçiş (sayı yuvarlanır): eski değer yukarı söner, yenisi aşağıdan gelir */
.srv-x { display: inline-grid; vertical-align: top; }
.srv-x > * { grid-area: 1 / 1; }
.srv .on-0-9, .srv .on-9 { transition: opacity .3s var(--ui-ease) .62s, translate .4s var(--ui-ease) .62s; }
.srv .on-9 { opacity: 0; translate: 0 7px; }
.srv.s9 .on-0-9 { opacity: 0; translate: 0 -7px; }
.srv.s9 .on-9 { opacity: 1; translate: 0 0; }
.srv-x--in .on-0-9, .srv-x--in .on-9 { text-align: left; }

/* imleç (yönetim ekranı) */
.srv-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.srv-hit .ui-cur { left: -5px; top: -3px; transform: translate(16px, 14px); transition: opacity .2s var(--ui-ease); }
.srv-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 srv-cur { 0% { opacity: 0; transform: translate(16px, 14px); } 34% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes srv-cur-out { 0% { opacity: 0; transform: translate(16px, 14px); } 30% { opacity: 1; transform: none; scale: 1; } 44% { scale: .8; } 56% { scale: 1; } 76% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes srv-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes srv-push { 50% { scale: .95; } }
@keyframes srv-rl { 0%, 100% { opacity: 1; } 30% { opacity: .3; } }
@keyframes srv-rl2 { 0%, 100% { opacity: 1; } 30% { opacity: .3; } }
@keyframes srv-blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes srv-hl { 0%, 100% { opacity: 0; } 35% { opacity: 1; } }
/* dokunuş (telefon): parmak dairesi basar, halka yayılır */
.srv-tap { position: absolute; z-index: 6; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.srv-tap::before { content: ""; position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: rgba(23, 34, 56, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); opacity: 0; scale: .6; }
.srv-tap i { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .5); opacity: 0; }
@keyframes srv-touch { 0% { opacity: 0; scale: 1.25; } 30% { opacity: 1; scale: .8; } 62% { opacity: 1; scale: .8; } 100% { opacity: 0; scale: 1; } }
@keyframes srv-wave { 0% { opacity: 0; scale: .4; } 15% { opacity: .9; } 100% { opacity: 0; scale: 1.9; } }

/* ═════════ YÖNETİM EKRANI ═════════ */
.srv-win { position: absolute; inset: 0; transition: opacity .45s var(--ui-ease), scale .5s var(--ui-ease); }
.srv-win::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; }

.srv-band { position: relative; display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 9px 10px 9px 12px; border-radius: 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, .12), 0 1px 2px rgba(11, 36, 64, .18), 0 10px 20px -14px rgba(11, 36, 64, .7); }
.srv-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.srv-ico .srv-i { width: 17px; height: 17px; stroke-width: 1.8; }
.srv-ttl { flex: 1; min-width: 0; }
.srv-ttl b { display: block; font-size: 14.5px; font-weight: 800; line-height: 18px; letter-spacing: -.01em; white-space: nowrap; }
.srv-ttl small { display: flex; align-items: center; gap: 3px; margin-top: 1px; font-size: 11px; font-weight: 700; line-height: 15px; color: rgba(255, 255, 255, .82); white-space: nowrap; }
.srv-ttl small .srv-i { width: 12px; height: 12px; stroke-width: 2.2; }
.srv-seg { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.srv-seg > * { display: flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.srv-seg__d { color: rgba(255, 255, 255, .82); }
.srv-seg b { color: var(--navy); background: #fff; box-shadow: 0 1px 2px rgba(11, 36, 64, .25); font-variant-numeric: tabular-nums; }

.srv-main { position: relative; padding: 10px 14px 0; }
.srv-flash { position: absolute; z-index: 2; left: 14px; right: 14px; top: 10px; display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px;
  background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; font-size: 12px; font-weight: 800; color: var(--em-700); white-space: nowrap;
  opacity: 0; translate: 0 -6px; transition: opacity .3s var(--ui-ease) .3s, translate .35s var(--ui-ease) .3s; }
.srv.s3:not(.s9) .srv-flash { opacity: 1; translate: 0 0; transition-delay: .7s; }
/* «Evet» → yönlendirme: sayfa kısa söner (yenilenir); yeşil şerit uygulama yongalarının yerine gelir (içerik itilmez, alttaki
   bölüm kesilmez; yongalar s9 yenilemesinde geri döner) */
.srv-chips { transition: opacity .25s var(--ui-ease) .3s; }
.srv.s3:not(.s9) .srv-chips { opacity: 0; transition-delay: .5s; }
.srv.s3:not(.s9) .srv-body { animation: srv-rl .55s ease-out .38s; }
.srv.s9 .srv-body { animation: srv-rl2 .55s ease-out .32s; }

/* uygulama seçici */
.srv-chips { display: flex; align-items: center; gap: 6px; height: 30px; }
.srv-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 800; color: #52525b; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); }
.srv-chip em { font-style: normal; font-weight: 700; color: #71717a; font-variant-numeric: tabular-nums; }
.srv-chip--on { color: var(--navy); background: var(--navy-50); box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .09); }
.srv-chip--on em { color: #4b6a8f; }
.srv-new { flex: none; display: none; align-items: center; gap: 5px; height: 30px; margin-left: auto; padding: 0 10px; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 800; color: #3f3f46; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); }
.srv-new .srv-i { width: 13px; height: 13px; }

/* özet kartları */
.srv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.12fr); gap: 8px; margin-top: 10px; }
.srv-tile { position: relative; display: block; min-width: 0; height: 70px; padding: 9px 11px 0; border-radius: 11px; 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); }
.srv-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(29, 79, 134, .35), 0 0 0 5px rgba(29, 79, 134, .08); opacity: 0; pointer-events: none; }
.srv.s9 .srv-tile--rate::after, .srv.s9 .srv-tile--none::after { animation: srv-hl 1.3s var(--ui-ease) .62s; }
.srv-tile small { display: block; font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .04em; text-transform: uppercase; color: #52525b; white-space: nowrap; }
.srv-v { display: grid; margin-top: 3px; font-size: 21px; font-weight: 900; line-height: 25px; letter-spacing: -.02em; color: #18181b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.srv-v--amb { color: var(--amb-700); } .srv-v--zn { color: #3f3f46; }
.srv-s { display: grid; margin-top: 1px; font-size: 10.5px; font-weight: 600; line-height: 13px; color: #71717a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.srv-tile--rate { background: var(--amb-50); box-shadow: 0 0 0 1px var(--amb-300), 0 1px 2px rgba(146, 64, 14, .08), inset 0 1px 0 rgba(255, 255, 255, .7); }
.srv-tile--rate small, .srv-tile--rate .srv-s { color: #57534e; }
.srv-tile--an { background: var(--navy-50); box-shadow: 0 0 0 1px #b9cde6, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .7); }
.srv-tile--an small { color: var(--navy-soft); }
.srv-an { display: flex; align-items: center; gap: 3px; margin-top: 3px; height: 25px; font-size: 12px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.srv-an .srv-i { width: 13px; height: 13px; stroke-width: 2.4; }

/* hatırlatma bölümü */
.srv-rem { margin-top: 10px; padding: 11px 12px 12px; border-radius: 12px; background: var(--amb-50); box-shadow: 0 0 0 1px var(--amb-300), 0 1px 2px rgba(146, 64, 14, .07), inset 0 1px 0 rgba(255, 255, 255, .7); }
.srv-rem__h { display: grid; font-size: 13px; font-weight: 800; line-height: 18px; color: var(--amb-900); font-variant-numeric: tabular-nums; }
.srv-rem__t { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; line-height: 14.5px; color: var(--amb-800); }
.srv-rem__t b { font-weight: 800; }
.srv-ta { position: relative; display: block; height: 46px; margin-top: 8px; padding: 7px 10px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 600; line-height: 16px; color: #18181b;
  box-shadow: inset 0 0 0 1px var(--amb-300), 0 1px 1px rgba(146, 64, 14, .04); transition: box-shadow .3s var(--ui-ease); }
.srv.s1:not(.s3) .srv-ta { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .35s; }
.srv-ta__ph { position: absolute; inset: 7px 10px; font-weight: 500; color: #a1a1aa; white-space: nowrap; overflow: hidden; transition: opacity .15s linear .4s; }
.srv.s1:not(.s3) .srv-ta__ph { opacity: 0; }
.srv.s3 .srv-ta__ph { transition-delay: .5s; }
.srv-ta__tx > span { opacity: 0; transition: opacity .12s linear calc(.5s + var(--i) * 75ms); }
.srv.s1:not(.s3) .srv-ta__tx > span { opacity: 1; }
/* «Evet» → yönlendirme: sayfa yeniden çizilir, metin kutusu boş gelir */
.srv.s3 .srv-ta__tx > span { transition-delay: .45s; }
.srv-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: -2px; vertical-align: -2px; border-radius: 1px; background: var(--navy-soft); opacity: 0; }
.srv.s1:not(.s2) .srv-caret { animation: srv-blink 1s steps(1) 1.2s infinite; }
.srv-ta .srv-hit { left: 46%; top: 24px; }
.srv.s1:not(.s2) .srv-hit--ta .ui-cur { animation: srv-cur-out .9s var(--ui-ease) both; }
.srv.s1:not(.s2) .srv-hit--ta .srv-rip { animation: srv-rip .5s ease-out .32s both; }
.srv-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.srv-ctl__k { display: flex; align-items: center; gap: 7px; min-width: 0; }
.srv-lbl { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--amb-900); }
.srv-sel { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 10px; border-radius: 9px; background: #fff; font-size: 11.5px; font-weight: 700; color: #18181b; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--amb-300), 0 1px 1px rgba(146, 64, 14, .04); }
.srv-sel .srv-i { width: 13px; height: 13px; color: #a16207; }
.srv-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--amb-700); font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(146, 64, 14, .3), 0 6px 14px -8px rgba(146, 64, 14, .8); }
.srv-btn .srv-i { width: 14px; height: 14px; }
.srv-btn .srv-hit { right: 24px; bottom: 8px; }
.srv.s2:not(.s3) .srv-btn { animation: srv-push .3s var(--ui-ease) .42s; }
.srv.s2:not(.s3) .srv-hit--send .ui-cur { animation: srv-cur-out 1s var(--ui-ease) both; }
.srv.s2:not(.s3) .srv-hit--send .srv-rip { animation: srv-rip .55s ease-out .42s both; }

/* okul bazında doldurma (kaydırma ipucu) */
.srv-grp { margin-top: 14px; }
.srv-grp__h { display: block; font-size: 10.5px; font-weight: 800; line-height: 13px; letter-spacing: .05em; text-transform: uppercase; color: #71717a; }
.srv-gr { display: grid; grid-template-columns: 172px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 34px; margin-top: 6px; padding: 0 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); font-variant-numeric: tabular-nums; }
.srv-gr > b { font-size: 11.5px; font-weight: 700; color: #27272a; white-space: nowrap; }
.srv-gr > i { display: block; height: 8px; border-radius: 4px; background: #f4f4f5; overflow: hidden; }
.srv-gr > i > i { display: block; height: 100%; border-radius: inherit; background: #f59e0b; }
.srv-gr > span { font-size: 10.5px; font-weight: 600; color: #71717a; white-space: nowrap; }
.srv-gr > span b { font-size: 11.5px; font-weight: 800; color: #18181b; }

/* onay penceresi (appConfirm) */
.srv-dim { position: absolute; z-index: 8; inset: 0; background: rgba(15, 23, 42, .36); opacity: 0; transition: opacity .3s var(--ui-ease) .3s; pointer-events: none; }
.srv-dlg { position: absolute; z-index: 9; left: 50%; top: 50%; width: 300px; padding: 18px 18px 16px; border-radius: 12px; background: #fff; text-align: center; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .06), 0 2px 6px rgba(16, 37, 64, .1), 0 30px 60px -20px rgba(16, 37, 64, .55);
  opacity: 0; translate: -50% -50%; scale: .9; transition: opacity .25s var(--ui-ease) .42s, scale .25s var(--ui-ease) .42s; }
.srv.s2:not(.s3) .srv-dim { opacity: 1; transition-delay: .55s; }
.srv.s2:not(.s3) .srv-dlg { opacity: 1; scale: 1; transition: opacity .25s var(--ui-ease) .6s, scale .4s var(--sp) .6s; }
.srv-q { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; box-shadow: inset 0 0 0 3px #c9dae1; font-size: 26px; font-weight: 600; line-height: 1; color: #87adbd; }
.srv-dlg__t { display: block; font-size: 16px; font-weight: 800; line-height: 20px; color: #18181b; }
.srv-dlg__m { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; line-height: 16px; color: #52525b; font-variant-numeric: tabular-nums; }
.srv-dlg__b { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.srv-dlg__b > * { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 7px; font-size: 12px; font-weight: 700; color: #fff; }
.srv-no { background: #71717a; }
.srv-yes { background: #18181b; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .6); }
.srv-yes .srv-hit { right: 14px; bottom: 9px; }
.srv.s3:not(.s4) .srv-yes { animation: srv-push .3s var(--ui-ease) .32s; }
.srv.s3:not(.s4) .srv-hit--yes .ui-cur { animation: srv-cur-out .75s var(--ui-ease) both; }
.srv.s3:not(.s4) .srv-hit--yes .srv-rip { animation: srv-rip .5s ease-out .3s both; }

/* ═════════ VELİNİN TELEFONU ═════════ */
.srv-ph { position: absolute; z-index: 10; top: 16px; right: 18px; width: 232px; height: 418px; padding: 6px; border-radius: 34px;
  background: linear-gradient(160deg, #22344d, var(--navy-night) 40%, #0a1626);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 4px rgba(11, 36, 64, .2), 0 30px 60px -24px rgba(11, 36, 64, .65);
  opacity: 0; translate: 36px 30px; transition: opacity .4s var(--ui-ease), translate .6s cubic-bezier(.3, 1.2, .5, 1); }
.srv.s4 .srv-ph { opacity: 1; translate: 0 0; }
.srv.s9 .srv-ph { opacity: 0; translate: 46px 0; transition: opacity .35s var(--ui-ease), translate .45s var(--ui-ease); }
.srv-sc { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #f6f7fb; }
.srv-tag { position: absolute; z-index: 2; left: 50%; bottom: -10px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 9px 0 7px; border-radius: 999px; translate: -50% 0;
  background: var(--sun); color: var(--sun-ink); font-size: 10.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(242, 157, 0, .8);
  opacity: 0; scale: .8; transition: opacity .3s var(--ui-ease), scale .4s var(--sp); }
.srv-tag .srv-i { width: 11px; height: 11px; stroke-width: 2.4; }
.srv.s4 .srv-tag { opacity: 1; scale: 1; transition-delay: 1s; }

/* durum çubuğu */
.srv-sb { position: absolute; z-index: 6; inset: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 20px; pointer-events: none; }
.srv-sb > b { font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.srv-sb--d { color: #0b1526; } .srv-sb--l { color: #fff; } .srv-sb--l > b { visibility: hidden; }
.srv-isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 15px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.srv-sbi { display: flex; align-items: center; gap: 3px; }
.srv-sbi svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.srv-sbi .srv-bat { width: 16px; height: 12px; stroke-width: 2; }

/* kilit ekranı + anlık bildirim */
.srv-lk { position: absolute; z-index: 3; inset: 0; color: #fff; background: radial-gradient(120% 70% at 50% 0%, #2a5488 0%, rgba(42, 84, 136, 0) 60%), linear-gradient(172deg, #1d4f86, var(--navy) 42%, var(--navy-night));
  transition: opacity .35s var(--ui-ease) .38s, translate .45s var(--ui-ease) .38s; }
.srv.s5 .srv-lk { opacity: 0; translate: 0 -26px; }
.srv-lk__c { position: absolute; left: 0; right: 0; top: 40px; display: flex; flex-direction: column; align-items: center; }
.srv-lk__c .srv-i { width: 13px; height: 13px; stroke-width: 2.2; opacity: .9; }
.srv-lk__c b { margin-top: 4px; font-size: 42px; font-weight: 700; line-height: 46px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.srv-lk__c small { font-size: 11px; font-weight: 600; line-height: 14px; color: rgba(255, 255, 255, .86); }
.srv-nt { position: absolute; z-index: 2; left: 7px; right: 7px; top: 140px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; padding: 8px 9px 9px 8px; border-radius: 16px;
  background: rgba(246, 248, 251, .94); color: #3d4a5c; font-size: 10.5px; font-weight: 500; line-height: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 14px 28px -12px rgba(0, 0, 0, .55);
  opacity: 0; translate: 0 -14px; scale: .96; transition: opacity .35s var(--ui-ease), translate .5s var(--sp), scale .5s var(--sp); }
.srv.s4 .srv-nt { opacity: 1; translate: 0 0; scale: 1; transition-delay: .55s; }
.srv-nt img { width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16, 37, 64, .08); }
.srv-nt__h { display: flex; align-items: baseline; gap: 5px; margin-bottom: 1px; }
.srv-nt__h b { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 800; color: #172238; letter-spacing: -.005em; white-space: nowrap; }
.srv-nt__h em { flex: none; font-style: normal; font-size: 10px; color: #6a7486; }
.srv.s5:not(.s6) .srv-tap--nt::before { animation: srv-touch .6s var(--ui-ease) both; }
.srv.s5:not(.s6) .srv-tap--nt i { animation: srv-wave .55s ease-out .18s both; }
.srv-lk__b { position: absolute; left: 22px; right: 22px; bottom: 24px; display: flex; justify-content: space-between; }
.srv-lk__b > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.srv-lk__b .srv-i { width: 14px; height: 14px; stroke-width: 1.8; }
.srv-lk__h { position: absolute; left: 50%; bottom: 7px; width: 84px; height: 4px; margin-left: -42px; border-radius: 2px; background: rgba(255, 255, 255, .85); }

/* veli uygulaması */
.srv-app { position: absolute; z-index: 2; inset: 0; background: #f6f7fb; opacity: 0; translate: 0 14px; transition: opacity .3s var(--ui-ease) .42s, translate .45s var(--ui-ease) .42s; }
.srv.s5 .srv-app { opacity: 1; translate: 0 0; }
.srv-hd { position: absolute; z-index: 4; top: 24px; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 9px 0 6px; background: #f6f7fb; }
.srv-hb { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #3d4a5c; }
.srv-hb .srv-i { width: 17px; height: 17px; }
.srv-logo { flex: none; width: 28px; height: 28px; }
.srv-hb--bell { position: relative; margin-left: auto; }
.srv-hb--bell::after { content: ""; position: absolute; right: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #ff5449; box-shadow: 0 0 0 1.5px #f6f7fb; }
.srv-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-50); color: var(--navy-soft); font-size: 11.5px; font-weight: 800; box-shadow: 0 0 0 2px rgba(0, 0, 0, .05); }
.srv-vp { position: absolute; top: 68px; bottom: 48px; left: 0; right: 0; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.srv-vp::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(#f6f7fb, rgba(246, 247, 251, 0)); pointer-events: none; }
.srv-pv { grid-area: 1 / 1; min-width: 0; min-height: 0; padding: 2px 12px 12px; }
.srv-scr { transition: translate .75s cubic-bezier(.45, .05, .25, 1) .1s; }
.srv.s6 .srv-scr { translate: 0 calc(-1 * var(--scr)); }
.srv-pv1 { transition: opacity .25s var(--ui-ease); }
.srv.s7 .srv-pv1 { opacity: 0; }
/* formun sonu (s7): 3–24. sorular atlanır; 25. soru (işaretli) üstte belirir, sonra «Anketi gönder»e dek kayar. Kaydırma iki iç içe
   translate: dış kutu görünüm yüksekliği kadar iner (100% = görünüm), iç kutu kendi yüksekliği kadar çıkar (−100%) → içeriğin altı
   görünümün altına oturur; ikisi aynı süre ve eğriyle kayar. Alt boşluk 30 px: üst kenar iki seçenek satırının ARASINA düşer. */
.srv-pv2 { position: relative; padding: 0; opacity: 0; translate: 0 22px; transition: opacity .3s var(--ui-ease), translate .45s var(--ui-ease); }
.srv.s7 .srv-pv2 { opacity: 1; translate: 0 0; transition-delay: .12s; }
.srv.s8 .srv-pv2 { opacity: 0; transition-delay: .62s; }
.srv-end { position: absolute; inset: 0; }
.srv-end__in { padding: 2px 12px 30px; }
.srv-end, .srv-end__in { transition: translate .65s cubic-bezier(.45, .05, .25, 1) 1.3s; }
.srv.s7 .srv-end { translate: 0 100%; }
.srv.s7 .srv-end__in { translate: 0 -100%; }
.srv-pv3 { opacity: 0; translate: 0 8px; transition: opacity .35s var(--ui-ease) .72s, translate .45s var(--ui-ease) .72s; }
.srv.s8 .srv-pv3 { opacity: 1; translate: 0 0; }

/* form */
.srv-pt { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; line-height: 20px; letter-spacing: -.02em; color: #0f172a; }
.srv-ft { display: block; margin-top: 6px; }
.srv-ft b { display: block; font-size: 13.5px; font-weight: 900; line-height: 18px; letter-spacing: -.01em; color: #0f172a; }
.srv-ft small { display: block; font-size: 10.5px; font-weight: 500; line-height: 14px; color: #71717a; }
.srv-kid { display: block; margin-top: 8px; padding: 8px 10px 9px; border-radius: 12px; background: var(--navy-50); box-shadow: inset 0 0 0 1px #b9cde6; }
.srv-kid small { display: block; font-size: 10px; font-weight: 800; line-height: 13px; letter-spacing: .01em; text-transform: uppercase; color: var(--navy-soft); }
.srv-kid b { display: block; margin-top: 2px; font-size: 14px; font-weight: 900; line-height: 19px; letter-spacing: -.01em; color: #0f172a; }
.srv-kid > span { display: block; margin-top: 1px; font-size: 10px; font-weight: 500; line-height: 13px; color: #52525b; }
.srv-qc { display: block; margin-top: 10px; padding: 10px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .04); }
.srv-ql { display: block; font-size: 11px; font-weight: 700; line-height: 15px; color: #0f172a; }
.srv-ql i { font-style: normal; color: #b91c1c; }
.srv-qh { display: block; margin-top: 4px; font-size: 10px; font-weight: 500; line-height: 13px; color: #71717a; }
.srv-rk { display: flex; align-items: center; gap: 7px; min-height: 32px; margin-top: 5px; padding: 4px 6px; border-radius: 9px; box-shadow: inset 0 0 0 1px #e4e4e7; font-size: 10.5px; font-weight: 500; line-height: 13px; color: #27272a; }
.srv-rk__s { flex: none; display: flex; align-items: center; justify-content: space-between; width: 40px; height: 22px; padding: 0 4px 0 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #d4d4d8; font-size: 11px; font-weight: 700; color: #3f3f46; }
.srv-rk__s .srv-i { width: 10px; height: 10px; stroke-width: 2.4; }
/* s6: kaydırırken velinin verdiği sıra «—» yerine gelir (aynı hücrede çapraz geçiş, her satır görünüme girerken; satırlar .22–.66 sn arasında görünümden geçer) */
.srv-rk__o, .srv-rk__v { transition: opacity .18s var(--ui-ease) calc(.22s + var(--i) * 40ms), translate .26s var(--ui-ease) calc(.22s + var(--i) * 40ms); }
.srv-rk__v { opacity: 0; translate: 0 5px; color: #18181b; font-variant-numeric: tabular-nums; }
.srv.s6 .srv-rk__o { opacity: 0; translate: 0 -5px; }
.srv.s6 .srv-rk__v { opacity: 1; translate: 0 0; }
.srv-sec { display: block; margin-top: 14px; font-size: 10px; font-weight: 800; line-height: 13px; letter-spacing: .05em; text-transform: uppercase; color: #71717a; }
.srv-ops { display: grid; gap: 5px; margin-top: 7px; }
.srv-op { position: relative; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 9px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; font-size: 10.5px; font-weight: 700; color: #27272a; white-space: nowrap; }
.srv-op--fy { box-shadow: none; border: 1px dashed #d4d4d8; color: #71717a; }
.srv-rd { position: relative; flex: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #a1a1aa; transition: box-shadow .2s var(--ui-ease); }
.srv-rd::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--navy-soft); scale: 0; transition: scale .35s var(--sp); }
/* seçim: yalnız radyo dolar (gerçek formda etiketin seçili hâli yok — survey.php:190–194) */
.srv.s6 .srv-op--sec .srv-rd { box-shadow: inset 0 0 0 1.5px var(--navy-soft); }
.srv.s6 .srv-op--sec .srv-rd::after { scale: 1; }
.srv.s6 .srv-op--sec .srv-rd, .srv.s6 .srv-op--sec .srv-rd::after { transition-delay: 1.02s; }
.srv-op .srv-tap { left: 64px; }
.srv.s6:not(.s7) .srv-tap--op::before { animation: srv-touch .6s var(--ui-ease) .85s both; }
.srv.s6:not(.s7) .srv-tap--op i { animation: srv-wave .55s ease-out 1.02s both; }
.srv-tx { display: block; height: 54px; margin-top: 7px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d4d4d8; }
.srv-go { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; margin-top: 10px; border-radius: 11px; background: var(--navy); font-size: 12px; font-weight: 800; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(11, 36, 64, .3), 0 8px 16px -10px rgba(20, 61, 107, .9); }
.srv-go .srv-i { width: 14px; height: 14px; }
.srv.s8 .srv-go { animation: srv-push .3s var(--ui-ease) .32s; }
.srv.s8:not(.s9) .srv-tap--go::before { animation: srv-touch .6s var(--ui-ease) .15s both; }
.srv.s8:not(.s9) .srv-tap--go i { animation: srv-wave .55s ease-out .32s both; }
.srv-done { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; padding: 14px 12px 15px; border-radius: 13px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #6ee7b7; text-align: center; }
.srv-done .srv-i { width: 30px; height: 30px; stroke-width: 1.8; color: var(--em-700); scale: .5; transition: scale .5s var(--sp) .85s; }
.srv.s8 .srv-done .srv-i { scale: 1; }
.srv-done b { font-size: 11.5px; font-weight: 800; line-height: 16px; color: var(--em-800); }
.srv-tab { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 48px; display: flex; justify-content: space-between; padding: 5px 10px 0; background: #fff; box-shadow: 0 -1px 0 var(--ui-line); }
.srv-tab > span { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; line-height: 12px; color: #52525b; white-space: nowrap; }
.srv-tab .srv-i { width: 16px; height: 16px; stroke-width: 1.9; }

/* ═════════ DAR KAPLAR ═════════ */
@container (max-width: 660px) {
  .srv-chip--2, .srv-grp { display: none; }
  .srv-new { display: inline-flex; }
  .srv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv-tile { height: 58px; padding-top: 7px; }
  .srv-v { margin-top: 1px; font-size: 19px; line-height: 23px; }
  .srv-an { margin-top: 1px; height: 23px; }
  .srv-ph { right: 12px; }
  .srv-win::after { height: 14px; }
}
@container (max-width: 470px) {
  .srv-stage { --H: 480px; }
  .srv-band { margin: 10px 10px 0; padding: 8px 8px 8px 12px; }
  .srv-ico, .srv-seg__d, .srv-new, .srv-rem__3, .srv-grp { display: none; }
  .srv-ttl b { font-size: 13.5px; }
  .srv-seg > * { padding: 0 8px; }
  .srv-main { padding: 10px 10px 0; }
  .srv-flash { left: 10px; right: 10px; }
  .srv-tile { padding: 7px 8px 0; }
  .srv-an { font-size: 11.5px; gap: 2px; }
  .srv-tile small { letter-spacing: .02em; }
  .srv-s { font-size: 10px; letter-spacing: -.02em; }
  .srv-rem { padding: 10px; }
  .srv-ta { height: 54px; }
  .srv-ta__ph { white-space: normal; }
  .srv-dlg { width: calc(100% - 28px); padding: 16px 14px 14px; }
  /* telefon ortada; yönetim ekranı arkada solar */
  .srv-ph { right: auto; left: 50%; margin-left: -116px; top: 18px; translate: 0 40px; }
  .srv.s4 .srv-ph { translate: 0 0; }
  .srv.s9 .srv-ph { translate: 0 30px; }
}
/* telefon pencerenin yarısından çoğunu örtünce arkadaki yönetim ekranı solar (telefonun etiketi düğme yazısına binmesin) */
@container (max-width: 560px) {
  .srv.s4:not(.s9) .srv-win { opacity: .42; scale: .98; }
}
/* kap 448–470 px: «Kanal» seçimi ile düğme tek sıraya sığar (gereken 405 px) → açıklamanın üçüncü cümlesi görünür (gerçek ekrandaki
   gibi); 456 px'ten başlayarak (sığma payı ≥ 9 px) sahne 452 px, alttaki boş şerit kalmaz */
@container (min-width: 448px) and (max-width: 470px) {
  .srv-rem__3 { display: inline; }
}
@container (min-width: 456px) and (max-width: 470px) {
  .srv-stage { --H: 452px; }
}