/* =====================================================================
   Gloria CRM · Misafir & Personel sohbet arayüzü
   ===================================================================== */
:root {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f7f7fa;
  --text: #111114;
  --muted: #6e6e73;
  --line: rgba(60, 60, 67, .14);
  --accent: #ff9500;
  --accent-2: #ffc300;
  --accent-ink: #fff;
  --accent-soft: rgba(255, 149, 0, .12);
  --accent-text: #b85400; /* metin için koyu ton: beyaz zeminde ≥ 4.5:1 */
  --ok-text: #13732f;
  --blue: #007aff;
  --green: #34c759;
  --red: #ff3b30;
  --me-bg: linear-gradient(135deg, #ffad33 0%, #ff8a00 100%);
  --me-ink: #fff;
  --them-bg: #ffffff;
  --bot-bg: #eef5ff;
  --glass: rgba(255, 255, 255, .78);
  --radius: 22px;
  --shadow: 0 12px 34px rgba(17, 17, 20, .08);
  --shadow-sm: 0 2px 10px rgba(17, 17, 20, .06);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Tüm sayfalar her zaman açık tema (cihaz koyu modda olsa da) */
  color-scheme: light only;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  font-size: 16px;
  line-height: 1.45;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--blue); text-decoration: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(0, 122, 255, .55); outline-offset: 2px; border-radius: 12px; }
svg { display: block; }

/* ---------- Ekranlar ---------- */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; background: var(--bg); }
/* Yatay iPhone: çentik / Dynamic Island tarafında içerik güvenli alanda kalır (zemin kenara kadar) */
.screen { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.screen.active { display: flex; animation: screenIn .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Üst bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + var(--safe-t)) 18px 10px;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -.01em; }
.brand b { font-weight: 700; }
.brand-logo {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 800; font-size: 19px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.lang-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-sm); font-size: 15px; font-weight: 500; max-width: 55vw;
}
.lang-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-pill svg { width: 18px; height: 18px; flex: none; opacity: .75; }

/* ---------- Karşılama ---------- */
/* Selam → başlık → mikrofon → "Konuşmayı başlat" → düğme: ekranda dikeyde ortalı, üstte ve altta hafif boşlukla.
   Tüm ölçüler tek bir ölçek değişkeninden (--k) gelir; fitWelcome() --k'yı ekranın boş alanını dolduracak şekilde hesaplar
   (küçük ekranda küçülür, büyük ekranda / kioskta iri ve dolgun görünür). */
.welcome-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding-top: var(--safe-t); }
.welcome {
  --k: 1;
  /* --g: içerik arası boşluk çarpanı, --mg: mikrofon çarpanı. Telefonda içerik genişlikten dolayı büyüyemezse fitWelcome()
     artan dikey alanı üst/alta değil bu aralıklara ve mikrofona dağıtır (üstte / altta aşırı boşluk kalmaz) */
  --g: 1; --mg: 1;
  /* Üst boşluk alttakinden biraz fazla: içerik ekranda hafif aşağıda, "Merhaba"nın üstü ferah (centerInk bu orana göre yerleştirir;
     köşedeki QR yerleşimi etkilemez) */
  flex: 1 0 auto; width: 100%; margin: 0 auto;
  padding: clamp(56px, 10.5dvh, 110px) 20px calc(clamp(32px, 5.5dvh, 64px) + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Dikey telefon: üst / alt boşluk daha az (içerik ekranı doldurur). Üst pay, sağ üstteki tam ekran düğmesinin
   (12 px + 44 px) altında kalacak kadar */
@media (max-width: 640px) and (orientation: portrait) {
  .welcome { padding-top: clamp(60px, 8.5dvh, 76px); padding-bottom: calc(var(--maker-zone) + var(--safe-b)); }
}
/* Yatay telefon (çok alçak ekran): boşluk içeriği aşırı küçültmesin */
@media (max-height: 450px) { .welcome { padding-top: 22px; padding-bottom: calc(var(--maker-zone) + var(--safe-b)); } }
.w-main { transition: transform .35s ease; flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(22px * var(--k) * var(--g)); }
/* Karşılama metni: kartsız, doğrudan zemin üzerinde */
.w-card { width: 100%; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 4px; }
/* Büyük mikrofon + "Konuşmayı başlat"; mikrofonun üstünde ve yazının altında ferah boşluk (dalga halkası başlığa değmez) */
.welcome .mic-hero-wrap { --mic: calc(156px * var(--k) * var(--mg)); margin: calc(var(--mic) * .26) 0 calc(16px * var(--k) * var(--g)); }
.welcome .mic-hero-label { width: 100%; font-size: calc(33px * var(--k) * var(--ls, 1)); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.mic-hero-label span { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; vertical-align: middle; }
.w-actions { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: calc(560px * var(--k)); }
.w-sos { background: rgba(255, 59, 48, .12); color: var(--red); }
/* Karşılama: "Konuşmayı başlat"ın altında kırmızı "Acil durum" düğmesi (ölçü --k ile birlikte büyür / küçülür) */
/* "Konuşmayı başlat" ile acil durum düğmesi arasında ince, uçları silik ayraç */
.w-sep {
  flex: none; width: min(100%, calc(360px * var(--k))); height: 1px; border: 0; margin: calc(20px * var(--k) * var(--g)) auto calc(18px * var(--k) * var(--g));
  background: linear-gradient(90deg, transparent, rgba(60, 60, 67, .22) 18%, rgba(60, 60, 67, .22) 82%, transparent);
}
.welcome .w-sos {
  margin-top: 0; min-height: max(44px, calc(66px * var(--k) * var(--ss, 1))); padding: 0 calc(34px * var(--k) * var(--ss, 1)); border-radius: 999px;
  gap: max(6px, calc(12px * var(--k) * var(--ss, 1))); font-size: max(15px, calc(25px * var(--k) * var(--ss, 1))); font-weight: 800; letter-spacing: -.01em;
  background: var(--red); color: #fff; box-shadow: 0 10px 26px rgba(255, 59, 48, .35); max-width: 100%;
}
.welcome .w-sos svg { width: max(18px, calc(29px * var(--k) * var(--ss, 1))); height: max(18px, calc(29px * var(--k) * var(--ss, 1))); flex: none; }
.welcome .w-sos span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.welcome .w-sos:active { transform: scale(.96); }
.welcome .w-sos:focus-visible { outline: 4px solid rgba(255, 59, 48, .4); outline-offset: 4px; }

/* Selam + başlık: birlikte döner. Satır yükseklikleri sabit (dil değişince düzen zıplamaz); metin tek satır,
   en büyük boyut --fs, sığmazsa JS (fitLine) genişliğe göre küçültür */
.w-hello { --hw: calc(98px * var(--k) * var(--hs, 1)); --ht: calc(45px * var(--k) * var(--ts, 1)); width: 100%; display: flex; flex-direction: column; align-items: center; }
/* Dil döngüsü: tüm [data-rot] yazıları birlikte söner, yeni dilde belirir */
[data-rot] { transition: opacity .35s, transform .35s; }
.rot-out [data-rot] { opacity: 0; }
.rot-out .w-hello [data-rot] { transform: translateY(-10px); }
.wh-word, .wh-title { width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wh-word { height: calc(var(--hw) * 1.18); }
.wh-title { height: calc(var(--ht) * 1.3); margin-top: calc(6px * var(--k)); }
.wh-word span, .wh-title span { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; vertical-align: middle; }
.wh-word span {
  font-size: var(--hw); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; padding: 0 .04em;
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 55%, #ff5e00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wh-title span { font-size: var(--ht); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--text); }
@media (prefers-reduced-motion: reduce) { [data-rot] { transition: opacity .2s; } .rot-out .w-hello [data-rot] { transform: none; } }
.welcome .w-card .open-pill:not([hidden]) { margin-top: clamp(8px, 1.4dvh, 12px); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 78%, #000); font-weight: 600; font-size: 14px;
}
.chip svg { width: 16px; height: 16px; }

.mic-hero-wrap { --mic: clamp(84px, 14dvh, 128px); position: relative; margin: 0 0 clamp(6px, 1.2dvh, 12px); width: calc(var(--mic) * 1.12); height: calc(var(--mic) * 1.12); display: grid; place-items: center; }
.mic-hero {
  position: relative; z-index: 2; width: var(--mic); height: var(--mic); border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-2), var(--accent) 60%, #ff6a00);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 18px 40px rgba(255, 128, 0, .45), inset 0 -6px 16px rgba(0, 0, 0, .12), inset 0 6px 14px rgba(255, 255, 255, .35);
  transition: transform .15s;
}
.mic-hero:active { transform: scale(.95); }
/* Dokunan parmak (karşılama): mikrofonun sağ altından gelip basar; bastığı anda mikrofon hafifçe içeri çöker */
.mh-tap {
  position: absolute; z-index: 3; right: -6%; bottom: -12%; font-size: calc(var(--mic) * .36); line-height: 1; pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .22)); transform-origin: 50% 0; animation: mhTap 2.4s ease-in-out infinite;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
@keyframes mhTap {
  0%, 30%, 82%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  48%, 60% { transform: translate(-26%, -26%) scale(.86); }
}
.welcome .mic-hero { animation: mhPress 2.4s ease-in-out infinite; }
.welcome .mic-hero:active { animation: none; transform: scale(.95); }
@keyframes mhPress { 0%, 44%, 66%, 100% { transform: scale(1); } 50%, 58% { transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .mh-tap, .welcome .mic-hero { animation: none; } }
.mic-hero svg { width: calc(var(--mic) * .42); height: calc(var(--mic) * .42); }
.mic-hero-wrap::before, .mic-hero-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent);
  animation: ripple 2.4s ease-out infinite;
}
.mic-hero-wrap::after { animation-delay: 1.2s; }
@keyframes ripple { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }

/* Mikrofonun arkasında silik, kayan bayrak şeridi (tüm diller destekleniyor). Düzeni etkilemez (mutlak konum); dalga
   halkalarının ve mikrofonun altında kalır (isolation: kendi katmanı). Kenarlara doğru silinir. guest.js buildFlagBand */
.welcome .mic-hero-wrap { isolation: isolate; }
.mh-flags {
  position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; user-select: none;
  width: min(calc(100vw - 24px), calc(var(--mic) * 5.4)); overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--mic) * .1);
  opacity: .2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.mh-row { display: flex; flex: none; width: max-content; animation: mhSlide var(--d, 60s) linear infinite; will-change: transform; }
.mh-row:nth-child(2) { animation-direction: reverse; }
/* Aralık boşluk (gap) değil, her bayrağın sağ payı: iki kopyanın toplamı tam yarıda bölünür → döngüde zıplama olmaz */
.mh-row > i { flex: none; display: grid; place-items: center; height: calc(var(--mic) * .22); margin-right: calc(var(--mic) * .13); font-style: normal; }
.mh-row .lf { font-size: calc(var(--mic) * .21); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.mh-row .lf.code { font: 800 calc(var(--mic) * .085)/1 var(--font); padding: .35em .5em; border-radius: .35em; background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
@keyframes mhSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mh-row { animation: none; } }

/* Sol alt köşe (sağdan sola dillerde sağ alt): yazılımı geliştiren firmanın mini logosu; sağ alttaki QR kartıyla aynı hizada */
.w-maker {
  position: absolute; z-index: 3; bottom: calc(var(--safe-b) + 14px); inset-inline-start: calc(env(safe-area-inset-left, 0px) + 16px);
  /* ADK Tercüman logosu (logo.png, ~2,2:1, iki satır): yükseklik ~34–56 px, genişlik ~75–125 px.
     Beyaz zemin, karışım modu ile açık gri karşılama zeminine karışır (beyaz kutu görünmez) */
  height: 75px; width: auto; /* genişlik orantılı: 1770×800 → ~166 px */ opacity: .9; mix-blend-mode: multiply;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
/* Mobil (dikey telefon + yatay telefon): logo altta ortalı, daha şeffaf / silik.
   Logo içeriğin üstüne binmesin diye karşılamanın alt dolgusu logo için ayrılan bölgeyi (--maker-zone) içerir:
   alt pay (--mk-b) + logo (--mk-h) + acil durum düğmesiyle arası (--mk-gap; düğmenin gölgesi de bu aralığa düşer).
   Üstteki boşluk alttakinin ~2 katı: logo düğmeye yapışmaz, ekranın dibine de oturmaz. Ölçüler ekran yüksekliğiyle orantılı */
@media (max-width: 640px) and (orientation: portrait) {
  #screen-welcome { --mk-h: calc((clamp(78px, 10.8dvh, 102px) + 10px) * .1875); --mk-b: clamp(12px, 2dvh, 20px); --mk-gap: clamp(24px, 3.8dvh, 38px); }
}
@media (max-height: 450px) {
  #screen-welcome { --mk-h: 16px; --mk-b: 8px; --mk-gap: 16px; }
}
@media (max-width: 640px) and (orientation: portrait), (max-height: 450px) {
  #screen-welcome { --maker-zone: calc(var(--mk-b) + var(--mk-h) + var(--mk-gap)); }
  .w-maker {
    inset-inline: auto; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + var(--mk-b)); height: var(--mk-h);
    opacity: .4; filter: grayscale(.35);
  }
}
.mic-hero-label { font-size: clamp(17px, 2.6dvh, 21px); font-weight: 700; letter-spacing: -.01em; margin-bottom: clamp(8px, 1.6dvh, 14px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px;
  border-radius: 16px; font-weight: 600; font-size: 17px; transition: transform .12s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-secondary { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-ghost { color: var(--muted); }
.btn-danger { background: rgba(255, 59, 48, .12); color: var(--red); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Yatay telefon: dalga halkası kapanır (ölçek zaten küçülür) */
@media (orientation: landscape) and (max-height: 460px) { .welcome .mic-hero-wrap::before, .welcome .mic-hero-wrap::after { display: none; } }

/* ---------- Ortak cihaz (kasa ekranı): "buradan başla" + "kendi telefonunla devam et" (dönen QR) ---------- */
.w-here { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: clamp(6px, 1.4dvh, 14px); text-align: center; }
.w-here b { font-size: clamp(15px, 2.2dvh, 18px); font-weight: 700; letter-spacing: -.01em; }
.w-here small { font-size: 13.5px; color: var(--muted); line-height: 1.35; max-width: 340px; text-wrap: balance; }
/* Ortak Ekran: yalnızca büyük mikrofon */

/* ---------- Üst bar: dil · ⚙️ ayarlar · ⎋ çıkış ---------- */
.tb-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-right .lang-pill { max-width: calc(100vw - 230px); min-width: 0; }
.tb-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); }
.tb-icon svg { width: 20px; height: 20px; }
.tb-icon:active { transform: scale(.94); }
/* Dar telefon: işletme adı gizlenir (logo kalır), dil adı kesilmeden sığar */
@media (max-width: 430px) { #screen-welcome .brand b { display: none; } .tb-right .lang-pill { max-width: calc(100vw - 150px); } }

/* ---------- ⚙️ Yan menü (sağdan sola açılır, dikey) ---------- */
.drawer-bg { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .28s; }
.drawer-bg.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 91; width: min(360px, 88vw); display: flex; flex-direction: column;
  background: var(--bg); box-shadow: -12px 0 40px rgba(0, 0, 0, .18); border-radius: 22px 0 0 22px;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b); padding-right: env(safe-area-inset-right, 0px);
  transform: translateX(105%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
}
.drawer.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.drawer:focus { outline: none; }
.dr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 6px 20px; }
.dr-head h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.dr-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; }
.dr-body .sec-title { margin-top: 8px; }
.dr-foot { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.dr-foot .btn { min-height: 48px; }
.dr-device { font-size: 13px; color: var(--muted); margin: 14px 4px 0; line-height: 1.4; }
.mode-list { display: flex; flex-direction: column; gap: 10px; }
/* Cevap tipi: sağ-sol kayan anahtar (Agent + Personel | Personel) */
.dr-reply { margin-top: 16px; }
.rs-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.rs-switch::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.rs-switch[data-cur="staff"]::before { transform: translateX(100%); }
.rs-switch[data-cur="mixed"]::before { opacity: 0; }
.rs-switch button {
  position: relative; z-index: 1; min-height: 56px; padding: 6px 6px; border-radius: 12px; font-weight: 700; font-size: 14px; line-height: 1.15; color: var(--text); transition: color .2s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center;
}
.rs-switch button > span { font-size: 17px; line-height: 1; }
.rs-switch button[aria-checked="true"] { color: #fff; }
.rs-desc { font-size: 12.5px; color: var(--muted); margin: 8px 4px 0; line-height: 1.4; min-height: 2.8em; }
@media (prefers-reduced-motion: reduce) { .rs-switch::before { transition: none; } }
.mode-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 14px; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-sm); border: 2px solid transparent; transition: border-color .15s, transform .12s;
}
.mode-opt:active { transform: scale(.98); }
.mode-opt[aria-checked="true"] { border-color: var(--accent); }
.mo-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.mo-ic svg { width: 26px; height: 26px; }
.mo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mo-t b { font-size: 16px; }
.mo-t small { font-size: 13px; color: var(--muted); line-height: 1.35; }
.mo-badge { align-self: flex-start; margin-top: 2px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255, 149, 0, .14); color: var(--accent-text); }
.mo-check { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.mo-check svg { width: 14px; height: 14px; }
.mode-opt[aria-checked="true"] .mo-check { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer.open, .drawer-bg { transition: none; } }

/* ---------- QR kodu (kendi telefonundan devam): kod parçaları — karşılamadaki QR penceresi ve sohbet taşıma ortak ---------- */
.kq-code {
  position: relative; width: clamp(112px, 17dvh, 150px); aspect-ratio: 1; border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 18px rgba(17, 17, 20, .08);
}
.kq-code > svg { width: 100%; height: 100%; display: block; transition: opacity .25s; }
.kq-code.swap > svg { opacity: .15; }
.kq-skel { position: absolute; inset: 14%; border-radius: 8px; background: repeating-linear-gradient(45deg, #eee 0 8px, #f7f7f7 8px 16px); animation: kqPulse 1.2s ease-in-out infinite alternate; }
@keyframes kqPulse { from { opacity: .5; } to { opacity: 1; } }
.kq-bar { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.kq-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: inherit; transform-origin: left center; }
[dir="rtl"] .kq-bar i { transform-origin: right center; }
.kq-sec { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.kq-sec svg { width: 14px; height: 14px; flex: none; }
.kq-done {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
  background: var(--surface); text-align: center; font-size: 16px; line-height: 1.3; animation: screenIn .3s ease;
}
.kq-done b { font-weight: 700; text-wrap: balance; }
.kq-check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(52, 199, 89, .35); }
.kq-check svg { width: 30px; height: 30px; }
.kq-done .chip-btn { font-size: 13px; padding: 8px 12px; background: var(--surface-2); color: var(--text); border-radius: 12px; }

/* Karşılama ekranı sağ alt köşe (sabit; sağdan sola dillerde sol alt): 150×150 px QR kodu + yenilenme çubuğu + kısa açıklama */
.w-qr {
  position: absolute; z-index: 4; bottom: calc(var(--safe-b) + 12px); inset-inline-end: calc(env(safe-area-inset-right, 0px) + 12px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 8px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 10px 34px rgba(17, 17, 20, .12), 0 0 0 1px rgba(0, 0, 0, .04);
}
.w-qr[hidden] { display: none; }
/* --qs: kod kenarı = ekran alanının %3'ü (guest.js qrPlace) */
.w-qr .kq-code { width: var(--qs, 150px); height: var(--qs, 150px); border-radius: 10px; box-shadow: none; }
.w-qr .kq-bar { width: var(--qs, 150px); margin-top: 0; height: 3px; }
.w-qr.kq-static .kq-bar { display: none; }
/* Açıklama en çok 2 satır; dil değişirken kutu boyu zıplamasın diye 2 satırlık yer ayrılır */
.wq-cap {
  display: flex; align-items: center; justify-content: center; width: var(--qs, 150px); min-height: calc(2 * 1.25em); text-align: center;
  font-size: max(12px, calc(var(--qs, 150px) * .075)); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--text);
}
.wq-cap span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
/* "Bağlandı" katmanı küçük kutuya sığsın */
.w-qr .kq-done { gap: 6px; padding: 8px; font-size: 13px; }
.w-qr .kq-check { width: 38px; height: 38px; }
.w-qr .kq-check svg { width: 22px; height: 22px; }
.w-qr .kq-done .chip-btn { font-size: 11.5px; padding: 6px 8px; border-radius: 10px; }



/* Kişisel mod: sohbet yalnızca kasadaki QR ile başlıyorsa */
.w-qrneed {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 440px; text-align: center;
  background: var(--surface); border-radius: 24px; box-shadow: var(--shadow-sm); padding: 22px 20px;
}
.w-qrneed .qn-ill { width: 56px; height: 56px; color: var(--accent-text); }
.w-qrneed b { font-size: 19px; letter-spacing: -.01em; }
.w-qrneed p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
/* Kilitli: konuş gizlenir; QR kodu ve acil yardım (112) açık kalır */
.welcome.qr-locked .mic-hero-wrap, .welcome.qr-locked .mic-hero-label { display: none; }
/* QR süresi doldu ama sohbet yine başlatılabiliyor: uyarı kartı küçük, düğmeler görünür */
.welcome.qr-warn .w-qrneed { padding: 12px 16px; flex-direction: row; text-align: start; gap: 12px; }
.welcome.qr-warn .w-qrneed .qn-ill { width: 34px; height: 34px; flex: none; }
.welcome.qr-warn .w-qrneed b { display: none; }
.welcome.qr-warn .w-qrneed p { font-size: 14px; }

/* ---------- Sohbet başlığı ---------- */
.chat-head {
  display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-t)) 14px 10px;
  background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); position: relative; z-index: 5;
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 800; font-size: 18px;
}
.ch-info { flex: 1; min-width: 0; }
.ch-title { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sub { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; box-shadow: 0 0 0 3px rgba(52, 199, 89, .2); }
.dot.off { background: #c7c7cc; box-shadow: none; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--text);
}
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn.on { background: var(--accent-soft); color: var(--accent-text); }
.pill-btn { padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 15px; background: var(--surface-2); flex: none; }
.pill-btn.danger { color: var(--red); background: rgba(255, 59, 48, .1); }
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 78%, #000);
}

/* ---------- Mesajlar ---------- */
.messages {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 12px 12px;
  display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth;
}
.msg-intro {
  align-self: center; max-width: 420px; text-align: center; color: var(--muted); font-size: 14.5px;
  background: var(--surface); border-radius: 18px; padding: 12px 16px; box-shadow: var(--shadow-sm); margin-bottom: 6px;
}
/* Sohbet boşken tanıtım metni dilden dile döner: 3 satırlık yer ayrılır (kutu boyu her dilde zıplamasın) */
.msg-intro.rot { display: flex; align-items: center; justify-content: center; width: 100%; line-height: 1.45; min-height: calc(3 * 1.45em + 24px); box-sizing: border-box; }
/* Yazı alanı ipucu da diğer yazılarla birlikte söner, yeni dilde belirir */
.msg { display: flex; flex-direction: column; max-width: 82%; min-width: 0; animation: msgIn .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.them { align-self: flex-start; align-items: flex-start; }
.msg.system { align-self: center; max-width: 90%; }
.msg .who { font-size: 12px; color: var(--muted); font-weight: 600; margin: 0 10px 3px; display: flex; gap: 6px; align-items: center; }
.bubble {
  position: relative; padding: 10px 14px; border-radius: 20px; font-size: 17px; line-height: 1.38;
  word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.msg.me .bubble { background: var(--me-bg); color: var(--me-ink); border-bottom-right-radius: 6px; }
.msg.them .bubble { background: var(--them-bg); box-shadow: var(--shadow-sm); border-bottom-left-radius: 6px; }
.msg.bot .bubble { background: var(--bot-bg); }
.msg.system .bubble { background: transparent; color: var(--muted); font-size: 13.5px; text-align: center; padding: 4px 10px; }
.bubble .orig { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13.5px; opacity: .7; }
.msg.me .bubble .orig { border-top-color: rgba(255, 255, 255, .4); opacity: .85; }
.meta { display: flex; align-items: center; gap: 6px; margin: 3px 8px 0; font-size: 11.5px; color: var(--muted); }
.meta svg { width: 12px; height: 12px; }
.speak-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: var(--surface);
  box-shadow: var(--shadow-sm); color: var(--blue); font-size: 12px; font-weight: 600;
}
.speak-btn svg { width: 14px; height: 14px; }
.speak-btn.playing { color: #fff; background: var(--blue); }
.typing { align-self: flex-start; background: var(--them-bg); box-shadow: var(--shadow-sm); border-radius: 20px; padding: 12px 16px; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
/* Gönderiliyor: kendi mesajım beklemeden görünür (sunucu çevirip kaydedince asıl baloncuk yerini alır) */
.msg.pending { opacity: .7; }
.msg.instant { animation: none; }
.msg.pending .bubble.pv { display: flex; align-items: center; gap: 10px; }
.msg.pending .bubble.pv > svg { width: 18px; height: 18px; flex: none; }
.pend-dots { display: inline-flex; gap: 5px; }
.pend-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; }
.pend-dots i:nth-child(2) { animation-delay: .2s; } .pend-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Yazma alanı ---------- */
.composer {
  padding: 8px 10px calc(10px + var(--safe-b)); background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
}
.quick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick button { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 14px; white-space: nowrap; }
.composer-bar { position: relative; display: flex; align-items: flex-end; gap: 8px; }
.composer textarea {
  flex: 1; min-width: 0; resize: none; max-height: 140px; min-height: 48px; padding: 12px 16px; border-radius: 24px;
  border: 1px solid var(--line); background: var(--surface); font-size: 17px; line-height: 1.35;
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.mic-btn, .send-btn {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; transition: transform .12s, background .2s;
}
.mic-btn { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.mic-btn svg, .send-btn svg { width: 24px; height: 24px; }
.send-btn { background: var(--blue); color: #fff; }
.send-btn[disabled] { background: #c7c7cc; }
.mic-btn:active, .send-btn:active { transform: scale(.92); }
.mic-btn .ic-stop { display: none; }
.rec-overlay {
  position: absolute; inset: 0 56px 0 56px; border-radius: 24px; background: var(--surface); border: 1px solid rgba(255, 59, 48, .35);
  display: none; align-items: center; gap: 10px; padding: 0 12px 0 16px; font-size: 15px; color: var(--red); font-weight: 600;
}
.rec-overlay .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: blink 1s infinite; flex: none; }
.rec-overlay .rec-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-overlay .rec-time { font-variant-numeric: tabular-nums; color: var(--muted); }
/* Mikrofon açılıyor (soğuk açılış, birkaç yüz ms): nokta yanıp sönmez, sayaç gizli */
.composer.rec-wait .rec-overlay .rec-dot { animation: none; opacity: .35; }
.composer.rec-wait .rec-overlay .rec-time { visibility: hidden; }
.rec-overlay .rec-cancel { color: var(--muted); padding: 6px; }
.rec-overlay .rec-cancel svg { width: 18px; height: 18px; }
.composer.recording .rec-overlay { display: flex; right: 0; }
.composer.recording .send-btn { display: none; }
.composer textarea:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer.recording .mic-btn { background: var(--red); box-shadow: 0 0 0 calc(var(--lvl, 0) * 18px) rgba(255, 59, 48, .22), 0 6px 16px rgba(255, 59, 48, .4); }
.composer.recording .mic-btn .ic-mic { display: none; }
.composer.recording .mic-btn .ic-stop { display: block; }
.composer.busy .mic-btn, .composer.busy .send-btn { opacity: .5; pointer-events: none; }
/* Basılı tutma, izin kilidi, gönderilemeyen ses */
.mic-btn { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; position: relative; }
.composer.holding .mic-btn { transform: scale(1.12); }
.composer.holding .mic-btn .ic-stop { display: none; }
.composer.holding .mic-btn .ic-mic { display: block; }
.mic-btn.locked { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.mic-btn.locked::after { content: "🔒"; position: absolute; right: -3px; bottom: -3px; font-size: 13px; line-height: 1; }
.msg.failed .bubble { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--danger-soft) !important; color: var(--red) !important; }
.msg.failed .bubble > svg { width: 18px; height: 18px; }
.msg.failed .bubble .chip-btn { background: var(--surface) !important; color: var(--red) !important; opacity: 1 !important; border: 1px solid rgba(255, 59, 48, .25); }
.msg.failed .bubble .chip-btn svg { color: var(--red); }
.mic-help-ic.pre { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.composer.disabled { pointer-events: none; opacity: .5; }

.closed-banner { margin: 8px auto; padding: 10px 16px; border-radius: 14px; background: var(--surface); color: var(--muted); text-align: center; font-size: 14.5px; box-shadow: var(--shadow-sm); }

/* ---------- Alt sayfa (sheet) ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 50; display: none; animation: fade .2s; }
.sheet-backdrop.open { display: block; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 88dvh; display: none; flex-direction: column;
  background: var(--surface); border-radius: 26px 26px 0 0; padding: 8px max(18px, env(safe-area-inset-right, 0px)) calc(18px + var(--safe-b)) max(18px, env(safe-area-inset-left, 0px)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
  max-width: 620px; margin: 0 auto; animation: sheetUp .32s cubic-bezier(.2, .9, .3, 1);
}
.sheet.open { display: flex; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet .grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 4px auto 12px; flex: none; }
.sheet h2 { margin: 4px 0 12px; font-size: 21px; text-align: center; letter-spacing: -.01em; }
.sheet .search { width: 100%; padding: 12px 14px; border-radius: 12px; border: 0; background: var(--surface-2); margin-bottom: 10px; font-size: 16px; }
.sheet .search:focus { outline: 2px solid var(--accent); }
/* Dil seçimi: bayraklı ızgara — mobilde 2, tablette 3, genişte 4 sütun (az kaydırma) */
#langSheet { max-width: 880px; }
.lang-list {
  overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -18px; padding: 2px 12px 6px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start;
}
@media (min-width: 560px) { .lang-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .lang-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lang-list > .empty-sm { grid-column: 1 / -1; }
.lang-list button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 54px; padding: 8px 10px; border-radius: 14px;
  background: var(--surface-2); text-align: start; position: relative; transition: transform .1s;
}
.lang-list button:active { transform: scale(.97); }
.lang-list .lf { flex: none; width: 30px; font-size: 25px; line-height: 1; text-align: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.lang-list .lf.code { width: 30px; height: 22px; display: grid; place-items: center; font: 800 10.5px/1 var(--font); letter-spacing: .02em; border-radius: 5px; background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.lang-list .ln { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lang-list .ln b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-list .ln small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Arapça / Farsça adlar da diğerleriyle aynı hizada (sayfa yönüne göre) */
.lang-list .ln > * { text-align: left; }
[dir="rtl"] .lang-list .ln > * { text-align: right; }
.lang-pill.has-flag > svg:first-child { display: none; }
.lang-list button.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.lang-list button.sel::after { content: "✓"; position: absolute; top: 5px; right: 8px; color: var(--accent-text); font-weight: 800; font-size: 13px; }
[dir="rtl"] .lang-list button.sel::after { right: auto; left: 8px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 14px; }
.sheet-actions .btn { flex: 1; }
.sheet .btn-secondary { background: var(--surface-2); box-shadow: none; }
.dialog-text { text-align: center; font-size: 17px; margin: 6px 0 4px; }

/* ---------- Anket ---------- */
.survey { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stars { display: flex; gap: 6px; direction: ltr; }
.stars button { width: 50px; height: 50px; display: grid; place-items: center; color: #d1d1d6; transition: transform .12s, color .15s; }
.stars button svg { width: 42px; height: 42px; }
.stars button.on { color: #ffcc00; }
.stars button:active { transform: scale(.88); }
.survey .q { font-weight: 600; font-size: 16px; color: var(--muted); }
.thumbs { display: flex; gap: 12px; }
.thumbs button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 16px; background: var(--surface-2); font-weight: 600; font-size: 16px; }
.thumbs button svg { width: 22px; height: 22px; }
.thumbs button.on[data-v="1"] { background: rgba(52, 199, 89, .16); color: #1f9e45; }
.thumbs button.on[data-v="0"] { background: rgba(255, 59, 48, .14); color: var(--red); }
.survey textarea { width: 100%; min-height: 80px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); resize: vertical; font-size: 16px; }

/* ---------- Teşekkür ---------- */
.thanks { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; gap: 10px; }
.check-anim { width: 110px; height: 110px; border-radius: 50%; background: var(--green); display: grid; place-items: center; color: #fff; box-shadow: 0 18px 40px rgba(52, 199, 89, .35); animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.check-anim svg { width: 58px; height: 58px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.thanks h1 { margin: 14px 0 0; font-size: 30px; letter-spacing: -.02em; }
.thanks p { color: var(--muted); font-size: 17px; margin: 0 0 18px; max-width: 420px; }

/* ---------- Bildirim ---------- */
.toast {
  position: fixed; left: 50%; top: calc(16px + var(--safe-t)); transform: translate(-50%, -150%); z-index: 80;
  background: rgba(30, 30, 32, .92); color: #fff; padding: 12px 18px; border-radius: 16px; font-size: 15px; max-width: 92vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .25s, visibility 0s .3s; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), opacity .2s; }

/* ---------- Ortak cihaz (bölünmüş ekran) ---------- */
.split { flex-direction: column; }
.split.active { display: flex; }
.pane { flex: 1 1 50%; min-height: 0; display: flex; flex-direction: column; position: relative; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.pane + .pane { border-top: 2px solid var(--line); }
.pane-staff { background: var(--surface-2); }
.pane-staff.flipped { transform: rotate(180deg); }
.pane-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.pane-staff .pane-head { padding-top: calc(10px + var(--safe-t)); }
.pane-head .ph-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.pane-head .ph-title small { font-weight: 500; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pane-head .icon-btn { width: 36px; height: 36px; }
.pane-head .icon-btn svg { width: 19px; height: 19px; }
.pane .composer { padding-bottom: 10px; }
.pane-guest .composer { padding-bottom: calc(10px + var(--safe-b)); }
.pane .messages { padding-top: 10px; }
/* Paneller içerik genişliğine göre büyümesin: yatay kayan çip satırları (hızlı istekler, personel araçları,
   hazır yanıtlar) aksi halde paneli ekran dışına iter ve karşı panel kayar */
.split { overflow: hidden; }
.pane, .pane > .chat-wrap, .pane .messages, .pane .qbar-wrap, .pane .composer { min-width: 0; }
.pane .quick, .pane .staff-tools { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
[dir="rtl"] .pane .quick { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); }
/* Tablet ve üstü (her yönde): yan yana — solda personel, sağda misafir. Dar telefonda alt alta kalır */
@media (min-width: 600px) {
  .split { flex-direction: row; }
  .split > .pane { flex: 1 1 0; }
  .pane + .pane { border-top: 0; border-left: 2px solid var(--line); }
  [dir="rtl"] .split, .split[dir="rtl"] { flex-direction: row; direction: ltr; } /* misafir RTL dilinde de personel solda kalır */
  .pane-staff.flipped { transform: none; }
  .pane-guest .pane-head { padding-top: calc(10px + var(--safe-t)); }
  .pane-staff .composer { padding-bottom: calc(10px + var(--safe-b)); }
  .flip-btn { display: none !important; }
}
/* Ekran misafirde (misafir tek başına; personel SMS / panelden kendi telefonundan yanıtlar) */
.split.solo > .pane-staff { display: none; }
.split.solo > .pane-guest { flex: 1 1 100%; border: 0; }
.split.solo .pane-guest .pane-head { padding-top: calc(10px + var(--safe-t)); }
.split.solo .pane-guest .composer { padding-bottom: calc(10px + var(--safe-b)); }
.solo-back { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .75; }
.solo-back svg { width: 16px; height: 16px; flex: none; }
.solo-status { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px 0; font-size: 13px; color: var(--muted); }
@media (min-width: 760px) {
  .split.solo .messages { padding-left: max(16px, calc(50% - 380px)); padding-right: max(16px, calc(50% - 380px)); }
}

/* ---------- Personel konsolu ---------- */
.console { flex: 1; overflow-y: auto; padding: 14px 14px calc(20px + var(--safe-b)); max-width: 760px; width: 100%; margin: 0 auto; }
.console h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 6px 8px; }
.c-card { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 10px; color: var(--text); }
.c-card:active { transform: scale(.99); }
.c-card .avatar { width: 46px; height: 46px; font-size: 15px; }
.c-card .cc-body { flex: 1; min-width: 0; }
.c-card .cc-top { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.c-card .cc-top .time { margin-left: auto; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.c-card .cc-msg { color: var(--muted); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-card.need { box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm); }
.empty { text-align: center; color: var(--muted); padding: 50px 20px; }
.empty svg { width: 60px; height: 60px; margin: 0 auto 10px; opacity: .4; }

@media (min-width: 700px) {
  .messages { padding-left: max(16px, calc(50% - 380px)); padding-right: max(16px, calc(50% - 380px)); }
  .composer-bar, .quick { max-width: 760px; margin-left: auto; margin-right: auto; }
  .split .messages { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   v2 · Uygulama çubuğu, filigran, döviz, acil, ayarlar
   ===================================================================== */
:root { --danger-soft: rgba(255, 59, 48, .1); --ok-soft: rgba(52, 199, 89, .14); }

/* ---------- Uygulama çubuğu ---------- */
.appbar {
  display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t)) 10px 8px 12px;
  background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); position: relative; z-index: 6;
}
.appbar .ab-brand { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.appbar .ab-logo { width: 38px; height: 38px; border-radius: 11px; object-fit: contain; background: #fff; flex: none; box-shadow: var(--shadow-sm); }
.appbar .ab-name { min-width: 0; }
.appbar .ab-name b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.appbar .ab-name small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; }
.appbar .ab-name small > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hbtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; flex: none;
  background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600; font-size: 14px; color: var(--text);
}
.hbtn svg { width: 19px; height: 19px; }
.hbtn.icon { width: 38px; padding: 0; justify-content: center; }
.hbtn.danger { background: var(--danger-soft); color: var(--red); box-shadow: none; }
.hbtn .cnt {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 11.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg);
}
@media (max-width: 400px) { .hbtn .lbl-sm-hide { display: none; } .hbtn { padding: 0 10px; } .appbar .ab-logo { width: 34px; height: 34px; } }

/* Sohbet üst çubuğu sağ: ⚙️ ayarlar · ⎋ çıkış (yalnızca simge) */
.hbtn.ab-icon { width: 42px; height: 42px; }
.hbtn.ab-icon svg { width: 21px; height: 21px; }
/* Sohbeti sonlandır: simgeler ile aynı yükseklikte metin düğmesi (uzun çevirilerde kesilir) */
.hbtn.ab-end { height: 42px; padding: 0 14px; font-weight: 700; }
.hbtn.ab-end > span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .hbtn.ab-end { padding: 0 11px; font-size: 13px; } .hbtn.ab-end > span { max-width: 7em; } }
/* "xxx dilini seç": dil kendiliğinden yanlış dile geçtiyse önceki dile dönüş (bayrak + metin, dikkat çeken açık turuncu) */
.hbtn.ab-uselang {
  height: 42px; padding: 0 14px 0 10px; gap: 8px; font-weight: 700; min-width: 0;
  background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: ulIn .3s ease;
}
.hbtn.ab-uselang[hidden] { display: none; }
.hbtn.ab-uselang > span:last-child { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-uselang .ul-f { display: grid; place-items: center; font-size: 22px; line-height: 1; }
.ab-uselang .ul-f .lf { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ab-uselang .ul-f .lf.code { font: 800 10px/1 var(--font); padding: 3px 4px; border-radius: 4px; background: var(--surface); }
@keyframes ulIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .hbtn.ab-uselang > span:last-child { max-width: 8em; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .hbtn.ab-uselang { animation: none; } }
/* Tam ekran düğmesi: girince "küçült" simgesine döner */
.fs-toggle .fs-out, .fs-toggle.on .fs-in { display: none; }
.fs-toggle.on .fs-out { display: block; }
/* ?type=app (uygulama modu): ekran kendiliğinden tam ekran çalışır; tam ekran / tam ekrandan çık düğmeleri hiç görünmez */
.app-mode [data-fs] { display: none !important; }
/* Karşılama ekranı sağ üst köşe (sağdan sola dillerde sol üst). İçerik üst dolgunun (en az 60 px) altından başladığı için "Merhaba" düğmenin altına girmez
   (eskiden "Merhaba" satırına iki yandan 50 px pay veriliyordu; dar telefonda selamı gereksiz küçültüyordu) */
.w-fs { position: absolute; z-index: 5; top: calc(var(--safe-t) + 12px); inset-inline-end: calc(env(safe-area-inset-right, 0px) + 12px); }
/* Kişisel sohbet: ⚙️ ayarlar sağdan sola açılan dikey menü */
body.mode-personal #settingsSheet {
  top: 0; bottom: 0; left: auto; right: 0; margin: 0; width: min(400px, 90vw); max-width: none; height: 100dvh; max-height: none;
  border-radius: 24px 0 0 24px; padding-top: calc(12px + var(--safe-t)); box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
  animation: setSideIn .3s cubic-bezier(.2, .8, .2, 1);
}
body.mode-personal #settingsSheet .grabber { display: none; }
[dir="rtl"] body.mode-personal #settingsSheet { right: auto; left: 0; border-radius: 0 24px 24px 0; box-shadow: 12px 0 40px rgba(0, 0, 0, .18); animation-name: setSideInRtl; }
@keyframes setSideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes setSideInRtl { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { body.mode-personal #settingsSheet { animation: none; } }

/* Üst çubuk eylemleri: ⚙️ ayarlar · tam ekran · Sohbeti sonlandır (en sağ) */
.ab-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.hbtn.stack { gap: 7px; transition: transform .15s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.hbtn.stack:active { transform: scale(.94); }
.hbtn.stack .hl { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; white-space: nowrap; }
.hbtn.stack.danger svg { width: 17px; height: 17px; }
.hbtn:focus-visible { outline: 3px solid rgba(0, 122, 255, .45); outline-offset: 2px; }
/* Dar ekran: simge üstte, etiket altta (iOS sekme çubuğu gibi) */
@media (max-width: 640px) {
  .appbar { gap: 6px; padding-right: 8px; }
  /* Durum satırı ("Dilinizde yanıtlıyoruz" / çevrimiçi) telefonda da görünür; sığmazsa üç noktayla kısalır */
  .appbar .ab-name small { font-size: 11.5px; }
  .ab-actions { gap: 4px; }
  .hbtn.stack { flex-direction: column; justify-content: center; gap: 2px; height: 48px; min-width: 52px; max-width: 78px; padding: 3px 6px; border-radius: 14px; font-size: 10.5px; }
  .hbtn.stack svg { width: 20px; height: 20px; }
  .hbtn.stack .hl { align-items: center; text-align: center; white-space: normal; max-width: 70px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .hbtn.stack .cnt { top: -3px; right: -3px; }
}
@media (max-width: 360px) {
  .appbar .ab-name b { font-size: 14px; }
  .hbtn.stack { min-width: 46px; padding: 3px 4px; font-size: 10px; }
}
/* Ortak modda misafir paneli başlığı */
.pane-head .hbtn.stack { flex-direction: column; justify-content: center; gap: 1px; height: 44px; min-width: 50px; max-width: 80px; padding: 2px 6px; border-radius: 12px; font-size: 10.5px; }
.pane-head .hbtn.stack svg { width: 18px; height: 18px; }
.pane-head .hbtn.stack .hl { align-items: center; text-align: center; white-space: normal; max-width: 72px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---------- Algılanan dil kartı ---------- */
.lang-card {
  display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 8px 12px; border-radius: 14px; background: var(--surface);
  box-shadow: var(--shadow-sm); font-size: 14px; position: relative; z-index: 2; text-align: start; width: calc(100% - 20px);
}
.lang-card svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.lang-card .lc-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-card .lc-t b { font-weight: 700; }
/* Tek satırlı kart: dar ekranda / uzun dillerde önce etiket ve ipucu kısalır, dil adı görünür kalır */
.lang-card .lc-t:not(.lc-2) { display: flex; align-items: baseline; }
.lang-card .lc-t:not(.lc-2) > span:first-child { flex: 0 1 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; }
.lang-card .lc-t:not(.lc-2) > b { flex: 0 0 auto; max-width: 75%; overflow: hidden; text-overflow: ellipsis; }
.lang-card .lc-t:not(.lc-2) > b::before { content: ':\00a0'; font-weight: 400; }
.lang-card .lc-t:not(.lc-2) > .lc-h { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lang-card .lc-2 { display: flex; flex-direction: column; line-height: 1.15; }
.lang-card .lc-2 small { font-size: 11px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.lang-card .lc-2 b { overflow: hidden; text-overflow: ellipsis; }
.lang-card .lc-c { color: var(--blue); font-weight: 600; flex: none; }
.lang-card.flash { animation: flashCard 1.2s ease; }
.lang-card .lc-h { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.lang-list button.lang-auto { grid-column: 1 / -1; min-height: 48px; color: var(--blue); }
.lang-list button.lang-auto .ln b { font-weight: 700; }
@keyframes flashCard { 0%, 100% { box-shadow: var(--shadow-sm); } 30% { box-shadow: 0 0 0 3px rgba(0, 122, 255, .35); } }

/* ---------- Sohbet gövdesi + logo filigranı ---------- */
.chat-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-wrap::before {
  /* Filigran yalnızca mesajların kaydığı alana oturur (üst durum satırı, hızlı istek çubuğu ve yazı alanı hariç);
     --wm-top/--wm-bot değerleri chat-core.js tarafından .messages ölçülerine göre güncellenir */
  content: ""; position: absolute; left: 0; right: 0; top: var(--wm-top, 0); bottom: var(--wm-bot, 0); pointer-events: none; z-index: 0;
  background: var(--wm, none) var(--wm-pos, center 50%) / var(--wm-size, min(62%, 320px)) auto no-repeat; opacity: var(--wm-op, .085);
  filter: grayscale(.2);
}
.chat-wrap > * { position: relative; z-index: 1; }

/* ---------- Hızlı istek çubuğu ---------- */
.qbar { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 8px; scrollbar-width: none; }
.qbar::-webkit-scrollbar { display: none; }
.qbar button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 14px; white-space: nowrap; }
.qbar button svg { width: 16px; height: 16px; }
.qbar .q-sos { background: var(--red); color: #fff; font-weight: 700; box-shadow: 0 6px 14px rgba(255, 59, 48, .3); }
/* Vurgulu çip (personel "Fiyat söyle" aracında seçili etiket) */
.qbar .q-menu { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 75%, #000); font-weight: 600; }

/* ---------- Mesaj ekleri ---------- */
.fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.fx-eq { opacity: .6; font-weight: 700; }
.fx-chip { padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(0, 0, 0, .06); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-chip.main { background: rgba(0, 122, 255, .14); color: var(--blue); }
.msg.me .fx-chip { background: rgba(255, 255, 255, .25); color: #fff; }
.price-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.amt-line { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 15px; }
.msg.k-price .bubble { min-width: 200px; }
.msg.k-emergency .bubble { background: var(--red) !important; color: #fff !important; font-weight: 700; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.chip-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .07); font-size: 13px; font-weight: 600; color: inherit; }
.chip-btn svg { width: 15px; height: 15px; }
.chip-btn.accent { background: var(--accent); color: #fff; }
.chip-btn.playing { background: var(--blue); color: #fff; }
.msg.me .chip-btn, .k-emergency .chip-btn { background: rgba(255, 255, 255, .25); color: #fff; }


/* ---------- Sheet genişletmeleri ---------- */
.sheet.under { filter: brightness(.92); transform: scale(.98); transition: transform .2s; }
.sheet-sm { max-height: 70dvh; }
.sheet-full { height: 92dvh; max-height: 92dvh; padding-left: 0; padding-right: 0; }
.sheet-full > .sh-head, .sheet-full > .sh-foot { padding-left: 16px; padding-right: 16px; }
.sh-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; flex: none; }
.sh-head h2 { flex: 1; margin: 0; text-align: start; font-size: 22px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-head .icon-btn { width: 36px; height: 36px; }
.sh-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; overscroll-behavior: contain; }
.sh-foot { flex: none; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- Acil durum / yardım merkezi: tam ekran, tam genişlik sayfa ----------
   Her girişte (karşılamadan dil seçilerek = .em-page veya sohbetten) ekranı tamamen kaplar.
   Üst çubuk: solda geri (‹) düğmesi, kırmızı acil rozeti, başlık · altında simgeli sekmeler · içerik kaydırılır (üst çubuk sabit).
   Acil sekmesi geniş / yatay ekranda iki sütun: solda 112 + acil numaralar (yapışkan), sağda "personeli hemen uyar" kutuları.
   Izgaralar sütun sayısını genişliğe göre seçer (auto-fill); yazı ve dokunma alanları ekranla büyür; yan boşluklar çentiği hesaba katar. */
#emSheet {
  --em-pl: max(clamp(14px, 3vw, 44px), env(safe-area-inset-left, 0px));
  --em-pr: max(clamp(14px, 3vw, 44px), env(safe-area-inset-right, 0px));
  --em-gap: clamp(10px, 1.1vw, 16px);
  --em-r: clamp(16px, 1.4vw, 22px);
  --em-red-ink: #d70015; /* beyaz zeminde okunur kırmızı metin (≥ 4.5:1) */
  --em-card: var(--surface);
  --em-card-sh: 0 1px 2px rgba(17, 17, 20, .05), 0 4px 14px rgba(17, 17, 20, .05);
  inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; box-shadow: none;
  padding: calc(var(--safe-t) + clamp(10px, 1.8dvh, 20px)) 0 0;
  background: radial-gradient(120% 55% at 0% 0%, rgba(255, 59, 48, .07), transparent 62%), var(--bg);
}
#emSheet.em-page { animation: lpIn .25s ease; }
#emSheet > .grabber { display: none; }

/* Üst çubuk */
#emSheet > .em-head { padding: 0 var(--em-pr) clamp(10px, 1.6dvh, 16px) var(--em-pl); gap: clamp(10px, 1.2vw, 16px); }
#emSheet .em-back {
  width: clamp(46px, 5.4dvh, 56px); height: clamp(46px, 5.4dvh, 56px); background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgba(17, 17, 20, .06), 0 6px 16px rgba(17, 17, 20, .08); transition: transform .15s, box-shadow .2s;
}
#emSheet .em-back svg { width: 55%; height: 55%; stroke-width: 2.6; }
#emSheet .em-back:active { transform: scale(.94); }
[dir="rtl"] #emSheet .em-back svg, #emSheet[dir="rtl"] .em-back svg { transform: scaleX(-1); }
#emSheet .em-badge {
  flex: none; width: clamp(38px, 4.6dvh, 48px); height: clamp(38px, 4.6dvh, 48px); border-radius: 30%; display: grid; place-items: center;
  background: linear-gradient(145deg, #ff6259, #e0241a); color: #fff; box-shadow: 0 6px 16px rgba(255, 59, 48, .32);
}
#emSheet .em-badge svg { width: 58%; height: 58%; stroke-width: 2.4; }
/* Uzun başlık ("Надзвичайна ситуація та допомога") telefonda kesilmesin: en çok 2 satır */
#emSheet > .em-head h2 {
  font-size: clamp(20px, min(2.3vw, 3.6dvh) + 8px, 36px); line-height: 1.12; letter-spacing: -.02em; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}

/* Sekmeler: simge + ad (telefonda simge üstte, ad altta) */
#emSheet > .em-tabs {
  margin: 0 var(--em-pr) clamp(12px, 1.8dvh, 20px) var(--em-pl); padding: 4px; gap: 4px; border-radius: 16px;
  background: rgba(118, 118, 128, .12);
}
#emSheet > .em-tabs button {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: clamp(46px, 5.6dvh, 58px); padding: 6px 8px;
  border-radius: 12px; font-size: clamp(13px, min(.9vw, 1.6dvh) + 7px, 18px); font-weight: 650; line-height: 1.15; color: #48484d;
  overflow-wrap: anywhere; transition: background .2s, color .2s, box-shadow .2s;
}
#emSheet > .em-tabs button svg { width: 1.25em; height: 1.25em; flex: none; stroke-width: 2.2; }
#emSheet > .em-tabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 3px 10px rgba(0, 0, 0, .08); }
#emSheet > .em-tabs button.on svg { color: var(--accent-text); }
#emSheet > .em-tabs button[data-tab="urgent"].on svg { color: var(--red); }
@media (hover: hover) { #emSheet > .em-tabs button:not(.on):hover { background: rgba(255, 255, 255, .55); color: var(--text); } }

#emSheet > .sh-body { padding: 2px var(--em-pr) calc(var(--safe-b) + clamp(20px, 3dvh, 36px)) var(--em-pl); scroll-padding-top: 8px; }
#emSheet .sec-title { display: flex; align-items: center; gap: 8px; font-size: clamp(12.5px, .3vw + 10.5px, 15px); margin: clamp(18px, 2.4dvh, 26px) 2px 10px; color: #5a5a60; }

/* Bilgi satırı (sekme açıklaması) */
#emSheet .em-intro {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 var(--em-gap); padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 20px);
  border-radius: var(--em-r); background: var(--accent-soft); color: #5b3200; font-size: clamp(15px, .4vw + 12px, 18px); line-height: 1.4; text-align: start;
}
#emSheet .em-intro svg { flex: none; width: 1.35em; height: 1.35em; color: var(--accent-text); margin-top: .02em; }

/* ---- Acil sekmesi ---- */
#emSheet .em-urgent { display: block; }
#emSheet .call-112 {
  position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.2vw, 18px);
  min-height: clamp(64px, 9dvh, 92px); margin: 0 0 var(--em-gap); padding: 10px clamp(16px, 2vw, 28px); border-radius: calc(var(--em-r) + 4px);
  background: linear-gradient(135deg, #ff5b50 0%, #ff3b30 45%, #e0241a 100%); color: #fff;
  font-size: clamp(19px, min(1.3vw, 2.4dvh) + 10px, 30px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-align: center;
  box-shadow: 0 12px 28px rgba(255, 59, 48, .34), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s, box-shadow .2s;
}
#emSheet .call-112:active { transform: scale(.985); }
#emSheet .call-112 .c-ic {
  position: relative; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--red);
}
#emSheet .call-112 .c-ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); animation: emRing 1.8s ease-out infinite; }
#emSheet .call-112 .c-ic svg { width: 52%; height: 52%; stroke-width: 2.4; }
#emSheet .call-112 .c-l { min-width: 0; overflow-wrap: anywhere; }
@keyframes emRing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 80%, 100% { box-shadow: 0 0 0 .55em rgba(255, 255, 255, 0); } }

/* Acil numaralar: emoji rozeti, ad, kırmızı numara hapı */
#emSheet .em-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--em-gap); margin: 0; }
#emSheet .em-num {
  display: flex; align-items: center; gap: 12px; min-height: clamp(58px, 7dvh, 72px); padding: 8px 10px 8px 10px; border-radius: var(--em-r);
  background: var(--em-card); color: var(--text); box-shadow: var(--em-card-sh); transition: transform .15s, box-shadow .2s;
}
#emSheet .em-num .e { flex: none; width: clamp(40px, 4.4dvh, 48px); height: clamp(40px, 4.4dvh, 48px); border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: clamp(21px, 2.4dvh, 26px); line-height: 1; }
#emSheet .em-num .l { flex: 1; min-width: 0; font-size: clamp(14px, .3vw + 11.5px, 17px); font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
#emSheet .em-num b {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgba(255, 59, 48, .1); color: var(--em-red-ink); font-size: clamp(17px, .5vw + 13px, 22px); font-weight: 800;
}
#emSheet .em-num b svg { width: .85em; height: .85em; stroke-width: 2.4; }

/* "Personeli hemen uyar" başlığı: yanıp sönen canlı nokta */
#emSheet .em-live { color: var(--em-red-ink); }
#emSheet .em-live-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 59, 48, .5); animation: emDot 1.6s ease-out infinite; }
@keyframes emDot { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .5); } 80%, 100% { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); } }

/* Talep kutuları (acil = kırmızı, personele sor = nötr) */
#emSheet .em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--em-gap); }
#emSheet .em-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: clamp(10px, 1.2dvh, 14px);
  min-height: clamp(100px, min(14dvh, 11vw), 156px); padding: clamp(14px, 1.4vw, 20px); border-radius: var(--em-r);
  background: var(--em-card); color: var(--text); box-shadow: var(--em-card-sh); border: 1.5px solid transparent;
  font-size: clamp(15px, .45vw + 11.5px, 19px); font-weight: 700; line-height: 1.25; text-align: start; transition: transform .15s, box-shadow .2s, border-color .2s;
}
#emSheet .em-tile .e {
  flex: none; width: clamp(48px, 5.6dvh, 60px); height: clamp(48px, 5.6dvh, 60px); border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); font-size: clamp(26px, 3dvh, 32px); line-height: 1;
}
#emSheet .em-tile .t { min-width: 0; padding-inline-end: 22px; overflow-wrap: anywhere; }
#emSheet .em-tile .go {
  position: absolute; top: clamp(12px, 1.2vw, 16px); inset-inline-end: clamp(12px, 1.2vw, 16px); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); color: var(--muted);
}
#emSheet .em-tile .go svg { width: 16px; height: 16px; stroke-width: 2.6; }
[dir="rtl"] #emSheet .go svg, #emSheet[dir="rtl"] .go svg { transform: scaleX(-1); }
#emSheet .em-tile.hot { background: linear-gradient(160deg, #fff 0%, #fff4f3 100%); border-color: rgba(255, 59, 48, .18); color: var(--em-red-ink); }
#emSheet .em-tile.hot .e { background: rgba(255, 59, 48, .1); }
#emSheet .em-tile.hot .go { background: var(--red); color: #fff; }
#emSheet .em-tile:active, #emSheet .em-num:active, #emSheet .em-place:active, #emSheet .em-emb:active { transform: scale(.975); }
#emSheet .em-tile:disabled { opacity: .55; }
@media (hover: hover) {
  #emSheet .em-tile:hover, #emSheet .em-num:hover, #emSheet .em-place:hover, #emSheet .em-emb:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(17, 17, 20, .06), 0 10px 24px rgba(17, 17, 20, .1); }
  #emSheet .em-tile.hot:hover { border-color: rgba(255, 59, 48, .4); }
}

/* Konum paylaş */
#emSheet .em-loc {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: clamp(56px, 7dvh, 68px); margin-top: var(--em-gap); padding: 8px 18px;
  border-radius: var(--em-r); background: var(--em-card); color: var(--text); box-shadow: var(--em-card-sh);
  font-size: clamp(15px, .4vw + 12px, 18px); font-weight: 650; text-align: center; transition: transform .15s, opacity .2s;
}
#emSheet .em-loc .l-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 122, 255, .12); color: var(--blue); }
#emSheet .em-loc .l-ic svg { width: 20px; height: 20px; }
#emSheet .em-loc:active { transform: scale(.985); }
#emSheet .em-loc:disabled { opacity: .6; }

/* Geniş / yatay ekran: iki sütun. Sol sütun (112 + numaralar) kaydırırken üstte kalır */
@media (min-width: 960px), (orientation: landscape) and (min-width: 740px) {
  #emSheet .em-urgent { display: grid; grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); gap: clamp(16px, 2.2vw, 36px); align-items: start; }
  #emSheet .em-col-alert .em-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); }
  #emSheet .em-col-alert .sec-title { margin-top: 2px; }
  #emSheet .em-col-call .em-nums { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
}

/* Yeterince yüksek ekranda sol sütun kaydırırken üstte kalır (kısa ekranda kalırsa alt numaralar geç görünür) */
@media (min-width: 960px) and (min-height: 700px) {
  #emSheet .em-col-call { position: sticky; top: 0; }
}

/* ---- Yakınımda: yer kutuları ---- */
#emSheet .em-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--em-gap); }
#emSheet .em-place, #emSheet .em-emb {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: clamp(64px, 8dvh, 80px); padding: 10px 14px; border-radius: var(--em-r);
  background: var(--em-card); color: var(--text); box-shadow: var(--em-card-sh); text-align: start; transition: transform .15s, box-shadow .2s;
}
#emSheet .em-place .e { flex: none; width: clamp(44px, 5dvh, 54px); height: clamp(44px, 5dvh, 54px); border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: clamp(22px, 2.6dvh, 28px); line-height: 1; }
#emSheet .em-place .l { flex: 1; min-width: 0; font-size: clamp(15px, .4vw + 12px, 18px); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
#emSheet .em-place .go { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
#emSheet .em-place .go svg { width: 16px; height: 16px; stroke-width: 2.6; }

/* ---- Personele sor: elçilikler ---- */
#emSheet .em-embs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--em-gap); }
#emSheet .em-emb { justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
#emSheet .em-emb .l { flex: 1 1 140px; min-width: 0; font-size: clamp(15px, .3vw + 12.5px, 17px); font-weight: 650; line-height: 1.25; }
#emSheet .em-emb .p { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(0, 122, 255, .1); color: #0058c4; font-weight: 700; font-variant-numeric: tabular-nums; }
#emSheet .em-emb .p svg { width: 16px; height: 16px; }

/* ---- Kartlar (Türkçe göster / oku) ---- */
#emSheet .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--em-gap); }
#emSheet .h-card { display: flex; flex-direction: column; padding: clamp(14px, 1.4vw, 20px); border-radius: var(--em-r); background: var(--em-card); box-shadow: var(--em-card-sh); }
#emSheet .h-card .hc-t { font-size: clamp(16.5px, .4vw + 13px, 20px); line-height: 1.3; }
#emSheet .h-card .hc-tr { margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: clamp(14px, .3vw + 11.5px, 16px); line-height: 1.35; color: #4a4a50; }
#emSheet .h-card .field-sm { margin-top: 10px; background: var(--surface-2); }
#emSheet .h-card .row-actions { margin-top: auto; padding-top: 12px; flex-wrap: nowrap; }
#emSheet .h-card .hc-show { flex: 1; background: var(--accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); font-weight: 700; }
#emSheet .h-card .hc-read { flex: 0 0 52px; padding: 0; background: var(--surface-2); box-shadow: none; }
#emSheet .h-card .hc-read.playing { background: var(--blue); color: #fff; }

/* Yüksek kontrast */
html.hc #emSheet .em-num, html.hc #emSheet .em-tile, html.hc #emSheet .em-place, html.hc #emSheet .em-emb, html.hc #emSheet .em-loc, html.hc #emSheet .h-card { border: 1.5px solid rgba(0, 0, 0, .55); }
html.hc #emSheet .em-intro { color: #3a2000; }

/* Telefon (dikey): sekmelerde simge üstte; numaralar ve kutular 2 sütun, sıkı */
@media (max-width: 560px) {
  #emSheet > .em-tabs { padding: 3px; gap: 3px; }
  #emSheet > .em-tabs button { flex-direction: column; gap: 3px; min-height: 54px; padding: 5px 2px; font-size: 12px; }
  #emSheet > .em-tabs button svg { width: 21px; height: 21px; }
  #emSheet .em-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Numara kutusu: solda emoji, sağında ad ve altında numara (kompakt, iki satır) */
  #emSheet .em-num { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 3px; align-items: center; padding: 9px 10px; min-height: 0; }
  #emSheet .em-num .e { grid-row: 1 / 3; width: 36px; height: 36px; font-size: 19px; }
  #emSheet .em-num .l { font-size: 13px; align-self: end; }
  #emSheet .em-num b { justify-self: start; align-self: start; padding: 3px 10px 3px 8px; font-size: 18px; }
  #emSheet .em-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #emSheet .em-tile { min-height: 118px; padding: 12px; gap: 10px; font-size: 15px; }
  #emSheet .em-tile .e { width: 44px; height: 44px; font-size: 24px; }
  #emSheet .em-tile .go { top: 10px; inset-inline-end: 10px; width: 24px; height: 24px; }
  #emSheet .em-tile .go svg { width: 14px; height: 14px; }
  #emSheet .call-112 { min-height: 64px; font-size: 19px; }
}
/* Yatay telefon / kısa ekran: başlık, sekmeler ve kutular alçak; içerik için yer kalsın */
@media (orientation: landscape) and (max-height: 560px) {
  #emSheet { padding-top: calc(var(--safe-t) + 8px); }
  #emSheet > .em-head { padding-bottom: 8px; }
  #emSheet > .em-head h2 { -webkit-line-clamp: 1; font-size: 20px; }
  #emSheet .em-back { width: 42px; height: 42px; }
  #emSheet .em-badge { width: 34px; height: 34px; }
  #emSheet > .em-tabs { margin-bottom: 10px; }
  #emSheet > .em-tabs button { min-height: 40px; font-size: 14px; }
  #emSheet .call-112 { min-height: 54px; font-size: 18px; }
  #emSheet .em-num { min-height: 50px; }
  #emSheet .em-num .e { width: 34px; height: 34px; font-size: 19px; }
  #emSheet .em-tile { min-height: 70px; flex-direction: row; align-items: center; padding: 10px 12px; }
  #emSheet .em-tile .e { width: 42px; height: 42px; font-size: 22px; }
  #emSheet .em-tile .go { top: 50%; transform: translateY(-50%); }
  #emSheet .em-place { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  #emSheet .call-112 .c-ic::after, #emSheet .em-live-dot { animation: none; }
  #emSheet .em-tile, #emSheet .em-num, #emSheet .em-place, #emSheet .em-emb { transition: none; }
}
html[data-ts] #emSheet { max-height: none; }

/* ---------- Tam ekran dil seçimi (karşılama → mikrofon / acil durum), yatay tablet için ----------
   İlk görünüm: 15 sık dil + "Diğer diller" iri kartlarla ekranı kaydırmadan doldurur (guest.js lpFit: --cols, --rowh, --ff bayrak, --nf ad).
   "Diğer diller": tüm diller, arama kutusu, kaydırmalı ızgara. */
#screen-lang { background: var(--bg); }
/* Başlık yok. Sol kenar: yukarıdan aşağıya tamamı "geri" düğmesi (dikey şerit; her yerine dokunulabilir).
   Diller şeridin hemen sağından başlar ve ekranın sağ kenarına kadar uzanır (sağda boşluk yok). Sayfa her dilde soldan sağa: şerit hep solda. --lp-side: şerit genişliği */
#screen-lang { --lp-side: clamp(60px, 6.5vw, 88px); }
.lp-back {
  position: absolute; z-index: 3; top: 0; bottom: 0; inset-inline-start: 0;
  width: calc(var(--lp-side) + env(safe-area-inset-left, 0px)); padding-inline-start: env(safe-area-inset-left, 0px);
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; color: var(--text);
  transition: color .15s, opacity .15s; -webkit-tap-highlight-color: transparent;
}
/* Ayrı katman / yuvarlak düğme yok: yalnızca iri "<" işareti (şeridin tamamı dokunulabilir) */
.lp-back:hover { color: var(--accent-text); }
.lp-back:active { opacity: .55; }
.lp-back:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.lp-back svg { width: min(calc(var(--lp-side) * .8), 64px); height: auto; aspect-ratio: 1; stroke-width: 2.6; }
.lp-allbar { flex: none; width: 100%; padding: calc(var(--safe-t) + 12px) calc(env(safe-area-inset-right, 0px) + 12px) 10px calc(var(--lp-side) + env(safe-area-inset-left, 0px) + 12px); }
.lp-allbar input { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: clamp(46px, 7dvh, 58px); padding: 0 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); font-size: 18px; box-shadow: var(--shadow-sm); }
.lp-allbar input:focus { outline: none; border-color: var(--accent); }
/* Şeridin sağında 12 px ara; sağ kenarda yalnızca 12 px (çentikli cihazda güvenli alan) */
.lp-body {
  flex: 1; min-height: 0; overflow: hidden;
  padding: calc(var(--safe-t) + 12px) calc(env(safe-area-inset-right, 0px) + 12px) calc(var(--safe-b) + 12px) calc(var(--lp-side) + env(safe-area-inset-left, 0px) + 12px);
}
#screen-lang.lp-all .lp-body { padding-top: 0; }
#screen-lang.lp-all .lp-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* İlk görünüm: --rowh yükseklikte satırlar (kaydırma yok) */
.lp-grid {
  --ff: 64px; --nf: 20px; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--gap, 16px);
}
/* Son satır eksikse kartlar ortalanır */
.lp-grid > .lp-card { flex: 0 0 calc((100% - var(--gap, 16px) * (var(--cols, 4) - 1)) / var(--cols, 4)); height: var(--rowh, 160px); }
/* Tüm diller: sabit iri kartlar, kaydırmalı */
#screen-lang.lp-all .lp-grid { --ff: 52px; --nf: 18px; height: auto; display: grid; align-content: start; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(168px, 46%), 1fr)); grid-auto-rows: 140px; }
#screen-lang.lp-all .lp-grid > .lp-card { height: auto; }
.lp-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--nf) * .45);
  min-width: 0; min-height: 0; padding: 8px 10px; border-radius: clamp(18px, calc(var(--rowh, 140px) * .14), 28px); text-align: center; overflow: hidden;
  background: var(--surface); box-shadow: 0 4px 16px rgba(17, 17, 20, .07), inset 0 0 0 1px var(--line);
  transition: transform .12s, box-shadow .15s; -webkit-tap-highlight-color: transparent;
}
.lp-card:hover { box-shadow: 0 8px 22px rgba(17, 17, 20, .1), inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
.lp-card:active { transform: scale(.96); }
.lp-card:focus-visible { outline: 4px solid var(--accent); outline-offset: 3px; }
.lp-card.sel { box-shadow: inset 0 0 0 3px var(--accent); }
#screen-lang.lp-em .lp-card:hover, #screen-lang.lp-em .lp-card.sel { box-shadow: 0 8px 22px rgba(17, 17, 20, .1), inset 0 0 0 3px rgba(255, 59, 48, .6); }
#screen-lang.lp-em .lp-card:focus-visible { outline-color: var(--red); }
/* Bayrak (emoji; Windows'ta ülke kodu rozeti) */
.lp-flag { display: grid; place-items: center; height: var(--ff); line-height: 1; }
.lp-flag .lf { font-size: var(--ff); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .15)); }
.lp-flag .lf.code { font: 800 calc(var(--ff) * .38)/1 var(--font); padding: .35em .5em; border-radius: .3em; background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); filter: none; }
.lp-globe { font-size: calc(var(--ff) * .92); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.lp-name { max-width: 100%; font-size: var(--nf); font-weight: 700; line-height: 1.2; color: var(--text); white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Kendi adı ve "(Türkçe)" kendi içinde bölünmez: yer yoksa Türkçesi alt satıra geçer */
.lp-name > bdi, .lp-name > .lp-tr { white-space: nowrap; }
/* Emojisi olmayan dil / bölge bayrakları (Katalanca, Baskça, Galiçyaca, Kürtçe, Esperanto, Tatarca): emoji bayrak boyutunda SVG */
.lf.svgf { display: inline-grid; place-items: center; line-height: 1; vertical-align: middle; }
.lf.svgf svg { display: block; width: .95em; height: .64em; border-radius: .09em; box-shadow: 0 0 0 .025em rgba(0, 0, 0, .12), 0 .04em .1em rgba(0, 0, 0, .18); }
/* Ad yanında parantez içinde Türkçesi: kalın değil */
.lp-tr { font-weight: 400; color: var(--muted); }
.lp-tr::before { content: "("; }
.lp-tr::after { content: ")"; }
.lp-local { max-width: 100%; font-size: calc(var(--nf) * .72); line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: calc(var(--nf) * -.3); }
/* "Diğer diller" kartı */
.lp-more { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.lp-more .lp-local { font-weight: 700; }
.lp-more .lp-name > bdi { white-space: normal; } /* dar kartta "More / languages" iki satır */
.lp-grid .empty-sm { grid-column: 1 / -1; width: 100%; }
/* Tüm diller görünümü (her ekranda): kendi adı (kalın) üstte, tam altında Türkçesi (parantezsiz, normal).
   Çok kelimeli adlar ("Kreyòl ayisyen") boşluktan alt satıra iner; kelime ortadan bölünmez. Tek kelimesi sığmayan ad
   ("Azərbaycanca", "Lëtzebuergesch") sığacak kadar küçülür (guest.js lpFitNames) */
#screen-lang.lp-all .lp-card .lp-name { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
#screen-lang.lp-all .lp-card .lp-name > bdi, #screen-lang.lp-all .lp-card .lp-tr { max-width: 100%; white-space: normal; overflow-wrap: normal; overflow: hidden; }
#screen-lang.lp-all .lp-card .lp-tr { font-size: .82em; }
#screen-lang.lp-all .lp-card .lp-tr::before, #screen-lang.lp-all .lp-card .lp-tr::after { content: none; }
/* Telefon (dar ekran): başlıkta yer kazan */
@media (max-width: 560px) {
  #screen-lang { --lp-side: 52px; }
  .lp-more .lp-local { display: none; } /* küçük kartta (telefon) yalnızca "More languages" */
  #screen-lang.lp-all .lp-grid { gap: 10px; grid-auto-rows: 118px; --ff: 44px; --nf: 16px; }
}
/* Telefon (dikey): sol "<" şeridi tepeye yatay şerit olarak taşınır, işaret yukarı bakar ("^"). Şeridin tamamı dokunulabilir,
   basınca karşılamaya dönülür. Başlık, kapat ve arama yok: altında yalnızca diller. Geniş ekranda (tablet / kiosk) sol şerit kalır */
@media (max-width: 640px) and (orientation: portrait) {
  #screen-lang { --lp-side: 0px; }
  .lp-back {
    position: relative; flex: none; top: auto; bottom: auto; width: 100%;
    height: calc(var(--safe-t) + 60px); padding: var(--safe-t) 0 0;
  }
  .lp-back svg { width: 52px; transform: rotate(90deg); }
  .lp-allbar { display: none !important; }
  /* Üst güvenli alan şeritte: liste şeridin hemen altından başlar */
  #screen-lang .lp-body, #screen-lang.lp-all .lp-body { padding-top: 0; }
  /* "Diğer diller" kartı yok: tüm diller bir satırda iki kart, kaydırmalı. Kartta solda bayrak, sağında kendi adı (kalın),
     tam altında Türkçesi (parantezsiz, normal) */
  #screen-lang.lp-all .lp-grid { --ff: 30px; --nf: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
  #screen-lang.lp-all .lp-grid > .lp-card {
    min-height: 64px; flex-direction: row; justify-content: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: 16px; text-align: start;
  }
  #screen-lang.lp-all .lp-card .lp-flag { flex: none; width: 34px; }
  /* Ad ve Türkçesi bayrağın sağında, sola hizalı (alt alta düzen yukarıdaki genel kuraldan) */
  #screen-lang.lp-all .lp-card .lp-name { flex: 1; min-width: 0; align-items: flex-start; }
  #screen-lang.lp-all .lp-card:active { transform: scale(.97); }
}
@keyframes lpIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #emSheet.em-page { animation: none; } }
.dialog-sub { text-align: center; color: var(--muted); font-size: 13px; word-break: break-all; }
.mic-help-ic { width: 64px; height: 64px; border-radius: 50%; margin: 4px auto 6px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.mic-help-ic svg { width: 32px; height: 32px; }

/* ---------- Bölüm başlığı, boş durum, not / yorum kutusu (anket), alt eylemler, küçük alanlar ---------- */
.sec-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 16px 2px 8px; }
.empty-sm { text-align: center; color: var(--muted); padding: 30px 10px; }

.note-box { display: flex; gap: 8px; align-items: flex-start; }
.note-box textarea { flex: 1; min-height: 52px; max-height: 120px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); resize: none; font-size: 16px; }
.note-box textarea:focus { outline: none; border-color: var(--accent); }
.rec-btn { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.rec-btn svg { width: 22px; height: 22px; }
.rec-btn.recording { background: var(--red); color: #fff; animation: pulse 1.1s infinite; }
.rec-btn.busy { opacity: .5; pointer-events: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 59, 48, .15); } }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.row-actions .btn { flex: 1; min-height: 44px; font-size: 15px; padding: 0 12px; }

.pay-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 6px 0 0; }
.field-sm { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font-size: 16px; margin-top: 8px; }
.field-sm:focus { outline: none; border-color: var(--accent); }

/* ---------- Personele göster (tam ekran) ----------
   Üst çubuk: solda "Bu ekranı personelimize gösterin" etiketi (misafirin dilinde; QR ekranlarında boş → gizli), sağda kapat (×).
   Orta: "🇹🇷 Türkçe" etiketi, iri Türkçe metin (personel için), altında misafirin dilindeki karşılığı veya durum bildirimi.
   Alt: "Türkçe sesli oku" (acilde 112 ile yan yana).
   Tam genişlik: içerik ve düğmeler ekranın tamamını kullanır; yazı, düğme ve boşluklar genişliğe (vw) ve yüksekliğe (dvh) göre
   orantılı büyür / küçülür. --ss-k: JS (ssFit) içerik ekrana sığmazsa yazıları küçültür; böylece kaydırma ve taşma olmaz. */
.show-staff {
  --ss-k: 1;
  --ss-pl: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  --ss-pr: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px));
  position: fixed; inset: 0; z-index: 90; height: 100dvh; overflow: hidden; color: #111; display: none; flex-direction: column;
  padding: calc(clamp(12px, 2.2dvh, 26px) + var(--safe-t)) var(--ss-pr) calc(clamp(12px, 2.4dvh, 28px) + var(--safe-b)) var(--ss-pl);
  background: radial-gradient(90% 65% at 50% 45%, #fff 0%, #fff 55%, #f4f4f8 100%);
}
.show-staff.open { display: flex; animation: screenIn .3s; }
/* Tam genişlik: tüm bölümler ekranın kenarlarına kadar (yalnızca güvenli alan / kenar boşluğu kadar içeride) */
.show-staff > * { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* Üst çubuk: etiket solda (uzunsa satır kırar), kapat sağda */
.show-staff .ss-top { display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 2vw, 28px); flex: none; }
.show-staff .ss-close {
  flex: none; width: clamp(46px, min(6.5vw, 7dvh), 76px); height: clamp(46px, min(6.5vw, 7dvh), 76px); background: #fff; color: #111;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .1); transition: transform .15s;
}
.show-staff .ss-close svg { width: 46%; height: 46%; stroke-width: 2.6; }
.show-staff .ss-close:active { transform: scale(.94); }
.show-staff .ss-hint {
  min-width: 0; max-width: calc(100% - clamp(46px, min(6.5vw, 7dvh), 76px) - clamp(10px, 2vw, 28px)); display: inline-flex; align-items: center; gap: .55em;
  padding: .62em 1.1em; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text);
  font-size: clamp(14px, min(2vw, 2.3dvh) + 5px, 28px); line-height: 1.2; text-align: start;
}
.show-staff .ss-hint svg { flex: none; width: 1.25em; height: 1.25em; stroke-width: 2.3; }
.show-staff .ss-hint b { min-width: 0; font-weight: 750; overflow-wrap: anywhere; }
.show-staff .ss-hint:has(> b:empty) { visibility: hidden; }

/* Orta: Türkçe etiketi, iri metin, misafir dilinde karşılığı / durum */
.show-staff .ss-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(10px, 2.4dvh, 32px) 0; display: flex; flex-direction: column; }
.show-staff:is(.em, .card) .ss-body { justify-content: center; align-items: center; text-align: center; }
.show-staff .ss-lang {
  display: inline-flex; align-items: center; gap: .5em; margin-bottom: clamp(12px, 2.4dvh, 28px); padding: .4em .95em; border-radius: 999px;
  background: #f0f0f4; color: #48484d; font-size: max(12px, calc(clamp(13px, min(1.3vw, 2dvh) + 5px, 26px) * var(--ss-k)));
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.show-staff .ss-lang .lf, .show-staff .ss-sub .lf { font-size: 1.3em; line-height: 1; letter-spacing: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.show-staff .ss-lang .lf.code, .show-staff .ss-sub .lf.code { font: 800 .62em/1 var(--font); padding: .3em .45em; border-radius: .3em; background: #fff; color: #6e6e73; box-shadow: inset 0 0 0 1px var(--line); }
/* max(…): küçültme sırasında da okunur alt sınırın altına inmez */
.show-staff .ss-text {
  max-width: 100%; font-size: max(24px, calc(clamp(32px, min(9vw, 12.5dvh), 200px) * var(--ss-k)));
  font-weight: 900; line-height: 1.1; letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance;
}
.show-staff .ss-sub {
  max-width: 100%; margin-top: clamp(16px, 3.2dvh, 44px); color: #3a3a3c;
  font-size: max(15px, calc(clamp(18px, min(3.2vw, 4.8dvh), 60px) * var(--ss-k))); line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance;
}
/* Ayraç: Türkçe metin ile misafirin dilindeki karşılığı arasında kısa çizgi */
.show-staff .ss-sub::before { content: ""; display: block; width: 64px; height: 4px; margin: 0 auto clamp(12px, 2.4dvh, 26px); border-radius: 4px; background: #e3e3e8; }
.show-staff .ss-sub .lf { margin-inline-end: .35em; vertical-align: -.1em; }
.show-staff .ss-status {
  display: inline-flex; align-items: center; gap: .55em; max-width: 100%; margin-top: clamp(16px, 3.2dvh, 44px); padding: .6em 1.1em; border-radius: clamp(16px, 2.4dvh, 28px);
  background: var(--ok-soft); color: var(--ok-text); font-size: max(14px, calc(clamp(16px, min(2.2vw, 3.4dvh), 40px) * var(--ss-k))); font-weight: 650; line-height: 1.3; text-align: start;
}
.show-staff .ss-status svg { flex: none; width: 1.2em; height: 1.2em; }

/* Alt düğmeler: iri, tek satırda yan yana */
.show-staff .row-actions { flex: none; flex-wrap: nowrap; gap: clamp(10px, 1.6vw, 24px); max-width: none; margin-top: clamp(8px, 1.6dvh, 20px); }
.show-staff .row-actions:empty { display: none; }
.show-staff .btn {
  flex: 1; min-height: clamp(58px, 10dvh, 120px); padding: 0 clamp(14px, 2vw, 36px); border-radius: clamp(18px, 2.6dvh, 32px); gap: .55em;
  font-size: clamp(18px, min(3.2vw, 3.6dvh), 40px); font-weight: 800;
}
.show-staff .btn svg { flex: none; width: 1.2em; height: 1.2em; }
.show-staff .ss-read { background: linear-gradient(135deg, #ffad33 0%, #ff8a00 100%); color: #fff; box-shadow: 0 10px 26px rgba(255, 138, 0, .35); }
/* "Türkçe sesli oku" altında misafir dilinde küçük alt yazı */
.show-staff .ss-read span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: start; min-width: 0; }
.show-staff .ss-read small { display: block; font-size: max(13px, .52em); font-weight: 600; opacity: .88; }
.show-staff .ss-read.playing svg { animation: ssWave 1s ease-in-out infinite; }
@keyframes ssWave { 50% { transform: scale(1.18); } }
.show-staff .ss-call { flex: 0 0 26%; min-width: 104px; background: #fff; color: #d70015; font-size: clamp(22px, min(4vw, 4.8dvh), 52px); font-weight: 900; box-shadow: 0 8px 26px rgba(0, 0, 0, .18); }

/* Acil: kırmızı zemin hafifçe nabız gibi atar, yazılar beyaz ve gölgeli */
.show-staff.em { background: #ff3b30; color: #fff; animation: screenIn .3s, ssEmPulse 1.6s ease-in-out .3s infinite; }
.show-staff.em .ss-close { background: rgba(255, 255, 255, .95); }
.show-staff.em .ss-hint, .show-staff.em .ss-lang { background: rgba(255, 255, 255, .2); color: #fff; }
.show-staff.em .ss-text { text-shadow: 0 2px 18px rgba(0, 0, 0, .18); }
.show-staff.em .ss-sub { color: rgba(255, 255, 255, .92); }
.show-staff.em .ss-sub::before { background: rgba(255, 255, 255, .4); }
.show-staff.em .ss-status { background: rgba(255, 255, 255, .18); color: #fff; }
.show-staff.em .ss-read { background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
@keyframes ssEmPulse { 50% { background-color: #d70015; } }

/* Telefon (dikey): etiket kısa satırlarda kırılır, düğmeler sıkı */
@media (max-width: 560px) {
  .show-staff .ss-hint { padding: .55em .9em; font-size: 13.5px; }
  /* Dar ekranda sınır genişlik: ana metin genişliğe göre biraz daha iri (sığmazsa ssFit küçültür) */
  .show-staff .ss-text { font-size: max(24px, calc(clamp(30px, min(11vw, 12.5dvh), 200px) * var(--ss-k))); }
  .show-staff .ss-call { flex-basis: 30%; }
  .show-staff .btn { padding: 0 12px; }
}
/* Yatay telefon / kısa ekran: düğmeler sağda dikey sütun, içerik solda; tüm yükseklik içeriğe kalır (kaydırma gerekmez) */
@media (orientation: landscape) and (max-height: 560px) {
  .show-staff.open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 26%); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(12px, 2.4vw, 28px); }
  .show-staff.open:has(> .row-actions:empty) { grid-template-columns: minmax(0, 1fr); }
  .show-staff > * { max-width: none; }
  .show-staff .ss-top { grid-column: 1 / -1; }
  .show-staff .ss-close { width: 44px; height: 44px; }
  .show-staff .ss-hint { font-size: 14px; padding: .5em .9em; }
  .show-staff .ss-body { grid-column: 1; grid-row: 2; padding: 6px 0; }
  .show-staff .ss-lang { margin-bottom: 8px; }
  .show-staff .ss-sub, .show-staff .ss-status { margin-top: 10px; }
  .show-staff .ss-sub::before { margin-bottom: 8px; }
  .show-staff .row-actions { grid-column: 2; grid-row: 2; flex-direction: column; justify-content: flex-end; margin-top: 0; padding-bottom: clamp(8px, 2dvh, 20px); }
  .show-staff .row-actions .btn { flex: 1 1 0; min-height: 52px; max-height: 110px; font-size: clamp(16px, 2.1vw, 22px); padding: 0 10px; }
  .show-staff .ss-call { min-width: 0; }
  .show-staff .ss-read span { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .show-staff.em, .show-staff .ss-read.playing svg { animation: none; } }

/* ---------- Acil ---------- */
.em-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .em-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.em-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 18px; background: var(--surface-2); text-align: start; min-height: 92px; font-weight: 700; font-size: 15px; color: var(--text); }
.em-tile .e { font-size: 30px; line-height: 1; }
.em-tile.hot { background: var(--danger-soft); color: var(--red); }
.call-112 { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border-radius: 18px; background: var(--red); color: #fff; font-size: 19px; font-weight: 800; margin: 4px 0 14px; box-shadow: 0 10px 24px rgba(255, 59, 48, .35); }
.call-112 svg { width: 24px; height: 24px; }

/* ---------- Ayarlar / bilgi ---------- */
.set-group { border-radius: 16px; background: var(--surface-2); overflow: hidden; margin-bottom: 16px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); width: 100%; text-align: start; color: var(--text); font-size: 16px; }
.set-row:last-child { border-bottom: 0; }
.set-row .sr-l { flex: 1; min-width: 0; }
.set-row .sr-l small { display: block; color: var(--muted); font-size: 13px; }
.set-row .sr-v { color: var(--muted); font-size: 15px; display: flex; align-items: center; gap: 4px; }
.set-row .sr-v svg { width: 16px; height: 16px; }
.set-row .sr-voice { display: flex; align-items: center; gap: 10px; }
.set-row .sr-voice .vg { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 17px; flex: none; }
.set-row.sel::after { content: "✓"; color: var(--accent-text); font-weight: 800; }
.set-row a { color: var(--blue); }
.seg { display: flex; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 9px 6px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.switch-ios { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 999px; background: #e9e9eb; position: relative; flex: none; transition: background .2s; }
.switch-ios::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch-ios:checked { background: var(--green); }
.switch-ios:checked::after { transform: translateX(20px); }

/* ---------- Döviz çevirici ---------- */
.conv-input { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--surface-2); margin-bottom: 12px; }
.conv-input input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.conv-input input:focus { outline: none; }
.conv-input span { font-size: 26px; font-weight: 800; color: var(--muted); }
.conv-list .set-row b { font-variant-numeric: tabular-nums; font-size: 17px; }
.conv-list .set-row .code { width: 44px; font-weight: 800; color: var(--muted); flex: none; }

/* ---------- Çok sorulu anket ---------- */
.sq { padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; }
.sq:last-of-type { border-bottom: 0; }
.sq .sq-t { font-weight: 600; font-size: 15.5px; margin-bottom: 6px; text-align: center; }
.sq .stars { justify-content: center; }
.sq .stars button { width: 44px; height: 44px; }
.sq .stars button svg { width: 34px; height: 34px; }
.survey .intro { color: var(--muted); text-align: center; font-size: 14.5px; margin: -4px 0 4px; }
.sheet .survey { overflow-y: auto; }

/* ---------- Personel paneli ekleri ---------- */
.staff-tools { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 8px; scrollbar-width: none; }
.staff-tools::-webkit-scrollbar { display: none; }
.staff-tools button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 600; font-size: 14px; }
.staff-tools button svg { width: 17px; height: 17px; }
.staff-tools .t-price { background: var(--accent); color: #fff; }
/* Hazır yanıt satırında 1. sıradaki "Fiyat söyle" */
.quick .t-price { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; font-weight: 600; }
.quick .t-price svg { width: 17px; height: 17px; flex: none; }
.em-banner { margin: 8px 10px 0; padding: 12px 14px; border-radius: 16px; background: var(--red); color: #fff; font-weight: 700; display: flex; align-items: center; gap: 10px; animation: emBlink 1.4s infinite; position: relative; z-index: 2; }
.em-banner span { flex: 1; }
.em-banner button { background: rgba(255, 255, 255, .25); color: #fff; padding: 6px 12px; border-radius: 999px; font-weight: 700; }
@keyframes emBlink { 50% { box-shadow: 0 0 0 6px rgba(255, 59, 48, .25); } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.keypad button { height: 58px; border-radius: 16px; background: var(--surface-2); font-size: 24px; font-weight: 700; }
.keypad button:active { background: var(--line); }

/* ---------- v2 yerleşim ekleri ---------- */
.qbar-wrap { padding: 4px 10px 0; background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); }
.qbar-wrap + .composer { border-top: 0; padding-top: 2px; }
.qbar-wrap .staff-tools { padding-top: 6px; }
.topbar .brand .ab-logo { width: 36px; height: 36px; }
.brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
.lang-pill svg, .btn svg, .chip svg { flex: none; }
.welcome .row-actions .btn { flex: 1 1 150px; min-height: 48px; }
.pane .chat-wrap .messages { padding-top: 10px; }
.pane-head .lang-card { padding: 7px 10px; min-width: 0; }
.pane-head > .hbtn, .pane-head > .icon-btn { flex: none; }
/* Dar ortak ekran: "Değiştir" yazısı görsel olarak gizlenir (kartın tamamı dokunulabilir; ekran okuyucu adı korunur) */
@media (max-width: 440px) {
  .pane-head .lang-card .lc-c { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pane-head { gap: 6px; padding-left: 10px; padding-right: 10px; }
}
.pane-head .hbtn { height: 36px; }
.pane-head .hbtn.icon { width: 36px; }
.sheet h2 { word-break: break-word; }
.k-emergency .speak-btn { box-shadow: none; }
.set-row b { margin-left: auto; }
.sh-foot .row-actions .btn { font-size: 14px; min-height: 48px; line-height: 1.2; padding: 6px 10px; }
.sh-foot .row-actions .btn span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; }
.sr-select { margin-left: auto; max-width: 60%; font: inherit; font-size: 15px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
/* Üst çubuk: otomatik okuma düğmesi + dil seçim kutusu (kişisel mod, "Sohbeti sonlandır"ın solunda) */
.ab-speak { color: var(--muted); }
.ab-speak.on { color: var(--blue); }
.lang-sel { cursor: pointer; padding-inline-end: 10px; }
.lang-sel .ls-f { flex: none; display: grid; place-items: center; min-width: 20px; }
.lang-sel .lf { font-size: 19px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.lang-sel .lf.code { height: 18px; padding: 0 4px; font: 800 10px/18px var(--font); border-radius: 4px; background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.lang-sel .hl small { font-size: 11px; font-weight: 600; color: var(--muted); }
.lang-sel .hl b { font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.lang-sel > svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
/* Gerçek seçim kutusu görünmez olarak kartın tamamını kaplar (tıklayınca yerel liste açılır; 16px: iOS yakınlaştırmasın) */
.lang-sel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; -webkit-appearance: none; appearance: none; }
.lang-sel:focus-within { outline: 3px solid rgba(0, 122, 255, .45); outline-offset: 2px; }
.lang-sel.flash { animation: flashCard 1.2s ease; }
@media (max-width: 640px) {
  .ab-speak { width: 40px; height: 48px; border-radius: 14px; }
  .lang-sel { padding-inline-end: 6px; }
  .lang-sel .hl small { display: none; }
  .lang-sel .hl b { max-width: 66px; font-weight: 600; }
  .lang-sel > svg { position: absolute; top: 4px; inset-inline-end: 3px; width: 12px; height: 12px; }
}
/* Ses ayarları */
.speed-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.speed-row input[type=range] { flex: 1; accent-color: var(--accent); height: 28px; }
#setVoiceG { margin-bottom: 8px; }
.sr-voice .vg-l { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
/* Döviz: misafirin para birimi büyük satır, dokunulabilir çipler, personel karşılığı */
.fx-main { font-size: 22px; font-weight: 800; color: var(--blue); margin-top: 2px; font-variant-numeric: tabular-nums; }
.msg.me .fx-main { color: #fff; }
button.fx-chip { border: 0; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
button.fx-chip:active { transform: scale(.94); }
.fx-staff { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Döviz çevirici: yön seçimi + ters çeviri sonucu */
#convDir { margin-bottom: 12px; }
.conv-result { text-align: center; margin: -4px 0 12px; }
.conv-result .cr-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.conv-result small { color: var(--muted); font-size: 12.5px; }
#convSearch { margin-bottom: 10px; }
/* Fiyat söyle aracı */
.pr-field { position: relative; cursor: pointer; border: 2px solid transparent; }
.pr-field.on { border-color: var(--accent); }
.pr-field .pr-lbl { position: absolute; top: 6px; left: 16px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pr-field input { padding-top: 10px; }
.pr-change { text-align: center; font-size: 18px; margin: 4px 0 6px; }
.pr-change b { font-size: 24px; color: var(--green, #34c759); }
.pr-quick button { font-variant-numeric: tabular-nums; }
/* Fiyat söyle: etiket ve hızlı tutar düğmeleri sağdan kesilmesin; satıra sığmayan alt satıra geçer */
#stLabels, #stQuick { flex-wrap: wrap; gap: 6px; overflow: visible; -webkit-mask-image: none; mask-image: none; margin-bottom: 0; padding: 4px 2px 6px; }
#stLabels button, #stQuick button { padding: 6px 11px; font-size: 13.5px; }
.lang-card .lc-2 .lc-h { display: none; }
.msg.me .fx-staff { color: rgba(255, 255, 255, .92); }
/* Yardım merkezi */
.em-tabs { margin: 0 2px 10px; }
.em-tabs button { font-size: 13.5px; padding-left: 4px; padding-right: 4px; }
.em-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.em-num { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); color: var(--text); min-height: 52px; }
.em-num .e { font-size: 22px; }
.em-num .l { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.2; }
.em-num b { font-size: 19px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.em-loc { margin-top: 14px; min-height: 52px; }
.em-loc svg { width: 20px; height: 20px; }
.card-list { display: flex; flex-direction: column; gap: 10px; }
.h-card { padding: 14px; border-radius: 18px; background: var(--surface-2); }
.h-card .hc-t { font-size: 16.5px; font-weight: 700; }
.h-card .hc-tr { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.h-card .row-actions { margin-top: 10px; }
.h-card .row-actions .btn:last-child { flex: 0 0 56px; }
/* Anket v2 */
.sv-prog { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; }
.sv-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sv-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .3s ease; }
.sv-prog small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sq-l { text-align: center; min-height: 20px; font-size: 14px; font-weight: 700; margin-top: 4px; color: var(--muted); }
.sq-l.r1, .sq-l.r2 { color: var(--red); } .sq-l.r3 { color: var(--accent-text); } .sq-l.r4, .sq-l.r5 { color: #34c759; }
.sq-c { margin-top: 6px; }
.sv-nps { width: 100%; margin: 6px 0 12px; }
.nps-row { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.nps-row button { min-height: 40px; border-radius: 10px; background: var(--surface-2); font-weight: 700; font-size: 14px; color: var(--text); }
.nps-row button.on.nd { background: var(--red); color: #fff; } .nps-row button.on.np { background: var(--accent); color: #fff; } .nps-row button.on.nr { background: #34c759; color: #fff; }
.nps-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
.sv-comment { width: 100%; }
#reviewBtn { margin-bottom: 10px; }
/* Karşı taraf yazıyor, okundu bilgisi, bağlantı bandı */
.typing.remote span { color: var(--blue); }
.msg .meta .tick { font-size: 11px; color: var(--muted); letter-spacing: -4px; margin-inline-start: 2px; }
.msg .meta .tick b { opacity: 0; font-weight: 400; }
.msg.seen .meta .tick { color: var(--blue); }
.msg.seen .meta .tick b { opacity: 1; }
.net-banner { position: fixed; left: 50%; top: calc(var(--safe-t) + 8px); transform: translate(-50%, -140%); z-index: 200; max-width: calc(100% - 24px); padding: 10px 16px; border-radius: 14px; background: #1c1c1e; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .3s ease; text-align: center; }
.net-banner.show { transform: translate(-50%, 0); }
/* Eylemli bildirim */
.toast-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.toast-act .ta-m { font-weight: 600; margin-inline-end: 4px; }
.toast-act button { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 700; font-size: 14px; }
/* Çalışma saatleri, Wi-Fi */
.open-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.open-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.open-pill.on { background: var(--ok-soft); color: var(--ok-text); }
.open-pill.off { background: var(--danger-soft); color: #d70015; }
.hours-list { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.hours-list .hl-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.hours-list .hl-row.today { font-weight: 800; }
.hours-list small { margin-top: 4px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.set-row .chip-btn { flex: none; }
.wifi-qr { text-align: center; margin-top: clamp(8px, 2dvh, 20px); }
/* QR: ekran yüksekliğine göre de sınırlı (yatay telefonda / kısa ekranda taşmaz) */
.wifi-qr svg { width: min(70vw, 44dvh, 380px); height: auto; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); }
.wifi-qr p { font-size: max(14px, calc(clamp(15px, min(2.6vw, 2.8dvh), 24px) * var(--ss-k, 1))); color: #3a3a3c; margin: clamp(6px, 1.4dvh, 14px) auto 0; max-width: 560px; }
.wifi-qr .mono { font-size: max(18px, calc(clamp(22px, min(4.4vw, 5dvh), 44px) * var(--ss-k, 1))); font-weight: 800; color: #111; }
/* Sohbeti başka telefona taşıma QR'ı (personele göster katmanında) */
.ho-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ho-code { position: relative; width: min(70vw, 44dvh, 380px); aspect-ratio: 1; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); }
.ho-code svg { width: 100%; height: 100%; box-shadow: none; border-radius: 0; }
.ho-qr .kq-bar { width: min(70vw, 44dvh, 380px); background: #e5e5ea; }
.ho-qr p { margin: 4px 0 0; max-width: 340px; }
.ho-qr .kq-sec { font-size: 14px; color: #6e6e73; justify-content: center; align-self: center; }
/* =====================================================================
   Görsel cila ve erişilebilirlik
   ===================================================================== */
/* Yazı tipleri: sistem yazı tipi + yazı sistemine göre Noto yedekleri (indirme yok, çevrimdışı çalışır) */
:lang(ar), :lang(fa), :lang(ur), :lang(ps), :lang(ku) { font-family: -apple-system, "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, var(--font); }
:lang(he), :lang(yi) { font-family: -apple-system, "SF Hebrew", "Arial Hebrew", "Noto Sans Hebrew", var(--font); }
:lang(zh) { font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", var(--font); }
:lang(zh-TW), :lang(zh-Hant) { font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", var(--font); }
:lang(ja) { font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", var(--font); }
:lang(ko) { font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", var(--font); }
:lang(hi), :lang(mr), :lang(ne) { font-family: -apple-system, "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", var(--font); }
:lang(bn) { font-family: -apple-system, "Kohinoor Bangla", "Noto Sans Bengali", "Nirmala UI", var(--font); }
:lang(th) { font-family: -apple-system, Thonburi, "Noto Sans Thai", "Leelawadee UI", var(--font); }
:lang(ka) { font-family: -apple-system, "Noto Sans Georgian", Sylfaen, var(--font); }
:lang(hy) { font-family: -apple-system, "Noto Sans Armenian", Sylfaen, var(--font); }
:lang(am) { font-family: -apple-system, "Kefa", "Noto Sans Ethiopic", "Nyala", var(--font); }
:lang(ta) { font-family: -apple-system, "Tamil Sangam MN", "Noto Sans Tamil", "Nirmala UI", var(--font); }
/* Personel bölgeleri her zaman Türkçe yazı tipi */
[lang="tr"] { font-family: var(--font); }

/* Basma geri bildirimi */
.chip-btn, .set-row, .seg button { transition: transform .12s ease, background-color .2s, opacity .2s; }
.chip-btn:active, .seg button:active { transform: scale(.95); }
.set-row:active { transform: scale(.985); }

/* Dokunma hedefi ≥ 44 px: küçük görünen denetimlerin tıklanabilir alanı görünmez katmanla büyütülür */
.chip-btn, .speak-btn, .sh-head .icon-btn, .pane-head .icon-btn, .lang-pill { position: relative; }
.chip-btn::after, .speak-btn::after, .sh-head .icon-btn::after, .pane-head .icon-btn::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
/* Odak halkası tüm etkileşimli öğelerde görünür (yalnızca klavye) */
.set-row:focus-visible, .msg .bubble:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(0, 122, 255, .6); outline-offset: 2px; }
a { color: #0060d6; }

/* Sağdan sola dillerde yön bildiren simgeler aynalanır */
[dir="rtl"] .sr-v svg, [dir="rtl"] .ic-dir, [dir="rtl"] .back-ic svg { transform: scaleX(-1); }
/* Personel menüsü daima Türkçe / soldan sağa: misafir sağdan sola dil seçse de oklar aynalanmaz */
[dir="rtl"] [dir="ltr"] .sr-v svg, [dir="rtl"] [dir="ltr"] .ic-dir, [dir="rtl"] [dir="ltr"] .back-ic svg { transform: none; }

/* Boş durumlar */
.empty-sm { text-align: center; padding: 28px 12px; color: var(--muted); }
.empty-ill { display: block; font-size: 46px; line-height: 1; margin: 0 auto 10px; opacity: .85; }

/* Büyük yazı modu (ayarlar: A− / A / A+ / A++) */
html[data-ts] { --z: 1; }
html[data-ts="1"] { --z: 1.12; }
html[data-ts="2"] { --z: 1.25; }
html[data-ts="3"] { --z: 1.4; }
html[data-ts] .messages, html[data-ts] .welcome, html[data-ts] .composer, html[data-ts] .qbar-wrap, html[data-ts] .show-staff .ss-body { zoom: var(--z); }
html[data-ts] .sheet { zoom: var(--z); max-height: calc(88dvh / var(--z)); }
html[data-ts] .sheet.sheet-full { max-height: calc(100dvh / var(--z)); }
.ts-seg { display: flex; gap: 6px; }
.ts-seg button { min-width: 44px; min-height: 44px; border-radius: 12px; background: var(--surface-2); font-weight: 800; }
.ts-seg button[aria-pressed="true"] { background: var(--text); color: var(--surface); }
.ts-seg button:nth-child(1) { font-size: 13px; } .ts-seg button:nth-child(2) { font-size: 15px; } .ts-seg button:nth-child(3) { font-size: 18px; } .ts-seg button:nth-child(4) { font-size: 21px; }

/* Yüksek kontrast (ayarlardan veya sistem "kontrastı artır") */
html.hc { --muted: #3a3a3c; --line: rgba(0, 0, 0, .45); --accent: #b85400; --accent-text: #8a3f00; --accent-soft: rgba(184, 84, 0, .16); --me-bg: #8a3f00; --bot-bg: #e2ecff; --surface-2: #ececf1; --blue: #0050b3; }
html.hc .bubble, html.hc .btn-secondary, html.hc .chip-btn, html.hc .set-group { border: 1.5px solid rgba(0, 0, 0, .55); }
html.hc .msg.me .bubble { border-color: transparent; }
@media (prefers-contrast: more) {
  :root { --muted: #3a3a3c; --line: rgba(0, 0, 0, .4); --accent-text: #8a3f00; }
}

/* Tablet yatay + ortak mod: misafir alt sayfaları (dil, döviz, yardım, ayarlar) misafir panelinin üzerinde yan çekmece */
@media (min-width: 900px) and (orientation: landscape) {
  body.mode-shared .sheet:not([lang="tr"]) {
    left: auto; right: 0; top: 0; bottom: 0; margin: 0; width: min(480px, 46vw); max-width: none; max-height: none; height: 100dvh;
    border-radius: 26px 0 0 26px; padding-top: calc(12px + var(--safe-t)); animation: drawerIn .32s cubic-bezier(.2, .9, .3, 1);
  }
  body.mode-shared .sheet:not([lang="tr"]) .grabber { display: none; }
  [dir="rtl"] body.mode-shared .sheet:not([lang="tr"]), body.mode-shared .sheet[dir="rtl"] { right: auto; left: 0; border-radius: 0 26px 26px 0; }
  html[data-ts] body.mode-shared .sheet:not([lang="tr"]) { height: calc(100dvh / var(--z)); }
}
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .chip-btn, .set-row { transition: none; } }

/* Hızlı çubuk: gölge kırpılmasın + kaydırılabilir olduğu kenarda solarak belli olsun */
.qbar { padding: 6px 4px 12px; margin-bottom: -4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
[dir="rtl"] .qbar { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 28px), transparent); }
.qbar .q-sos { box-shadow: 0 4px 10px rgba(255, 59, 48, .28); }

/* Konsol kartları: dar ekranda rozetler alt satıra geçsin, kart dışına taşmasın */
.c-card .cc-top { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.c-card .cc-top > span:first-child { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-card .cc-top .badge { white-space: nowrap; }
.c-card .cc-top .time { margin-left: 0; margin-inline-start: auto; white-space: nowrap; }
/* Ses kilidi açma bandı (kasa / personel ekranı): kenarlara yapışmasın */
button.closed-banner { display: block; width: calc(100% - 28px); margin: 10px 14px 0; font: inherit; font-size: 14.5px; border: 0; cursor: pointer; }

/* ---------- Personel sohbet ekranı (s.php) ---------- */
/* Telefonda da durum satırı (dil · çevrimiçi / sona erdi) görünür: personel için önemli bilgi */
@media (max-width: 640px) { .staff-app .appbar .ab-name small { display: flex; } }
.staff-app .appbar .avatar { flex: none; }
/* Ses bandı: tek satır, sade; altında mesajlarla arasında boşluk */
.staff-app #unlockAudio { width: calc(100% - 24px); margin: 8px 12px 6px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-app #unlockAudio:active { transform: scale(.98); }
/* Sol menü: aktif sohbetler (sol üstteki düğmeyle gizle / göster). Geniş ekranda sohbeti sağa iter, dar ekranda üstüne açılır */
.sl-toggle.on { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.sl-toggle .cnt { top: -5px; right: -5px; }
.sl {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 300px; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
  padding-top: var(--safe-t); padding-bottom: var(--safe-b); padding-left: env(safe-area-inset-left, 0px);
}
.sl-bg { position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .32); animation: fade .2s; }
.sl-head { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 16px; min-height: 58px; border-bottom: 1px solid var(--line); }
.sl-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.sl-num { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 700; display: inline-grid; place-items: center; }
.sl-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.sl-item {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; border: 0; border-radius: 14px; background: transparent;
  color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: background-color .15s; -webkit-tap-highlight-color: transparent;
}
.sl-item:hover { background: var(--surface-2); }
.sl-item:active { transform: scale(.985); }
.sl-item.sel { background: var(--accent-soft); }
.sl-item.need { box-shadow: inset 3px 0 0 var(--accent); }
.sl-item.em { box-shadow: inset 3px 0 0 var(--red); background: var(--danger-soft); }
.sl-item.busy { opacity: .55; pointer-events: none; }
.sl-av { width: 38px; height: 38px; font-size: 13px; }
.sl-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sl-r b { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-r time { flex: none; font-size: 11.5px; color: var(--muted); }
.sl-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-msg { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-item.unread b { font-weight: 800; }
.sl-item.unread .sl-msg { color: var(--text); font-weight: 600; }
.sl-cnt { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.sl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sl-tag { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.sl-tag.red { background: var(--red); color: #fff; }
.sl-tag.orange { background: var(--accent-soft); color: var(--accent-text); }
.sl-tag.blue { background: rgba(0, 122, 255, .12); color: var(--blue); }
.sl-empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.45; }
@media (min-width: 900px) { body.sl-open #paneStaff { left: 300px; } }
@media (max-width: 899px) {
  .sl { width: min(330px, 86vw); border-radius: 0 22px 22px 0; border-right: 0; box-shadow: 12px 0 40px rgba(0, 0, 0, .18); animation: slIn .26s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes slIn { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sl { animation: none; } }

/* "Sohbet sona erdi" kutusu: kenarlara yapışmasın */
.staff-app #closedBox { margin: 8px 12px; }
.staff-app #closedBox[hidden] { display: none; }
/* Geniş ekran: bant, kapanış kutusu ve araç çubuğu mesaj sütunuyla (760 px, ortada) aynı hizada */
@media (min-width: 700px) {
  .staff-app #unlockAudio, .staff-app #closedBox, .staff-app .staff-tools { max-width: 760px; margin-left: auto; margin-right: auto; }
  .staff-app #unlockAudio, .staff-app #closedBox { width: calc(100% - 32px); }
}

/* RTL: döviz çipleri soldan sağa yalıtılır */
.fx-chip { unicode-bidi: isolate; }
.fx-chip { direction: ltr; }

/* =====================================================================
   Sohbet ekranları — misafir (kişisel mod, index.php) ve personel (s.php, aynı görünüm): tablet / geniş ekranda tam genişlik, dolgun, uygulama gibi
   Tüm ölçüler iki değişkenden gelir; telefonda bugünkü boyutlar (alt sınırlar), tablet ve bilgisayarda orantılı büyür:
     --cs-fs : mesaj yazı boyutu (genişlik ve yüksekliğe göre, 17–24 px)
     --cs-btn: düğme / yazı alanı yüksekliği (48–66 px)
     --cs-px : yan boşluk (çentik / güvenli alan dahil)
   Mesajlar, hızlı istek çubuğu ve yazı alanı ekranın tamamını kullanır (eski 760 px sınırı yok). Ortak (bölünmüş) ekran etkilenmez.
   ===================================================================== */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) {
  --cs-fs: clamp(17px, min(2.3vw, 2.6dvh) + 3px, 24px);
  --cs-btn: clamp(48px, min(6.6vw, 7.5dvh), 66px);
  --cs-px: clamp(12px, 3vw, 48px);
  background: linear-gradient(180deg, #f7f7fb 0%, #eff0f5 100%);
}

/* Üst çubuk: logo + işletme adı + "Size kendi dilinizde yanıt veriyoruz" · sağda tam ekran, dil, Sonlandır */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .appbar {
  padding: calc(var(--safe-t) + clamp(8px, 1.2dvh, 14px)) var(--cs-px) clamp(8px, 1.2dvh, 14px); gap: clamp(8px, 1.2vw, 16px);
  background: rgba(255, 255, 255, .88); border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(17, 17, 20, .04);
}
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-brand { gap: clamp(10px, 1.2vw, 16px); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-logo {
  width: calc(var(--cs-btn) + 4px); height: calc(var(--cs-btn) + 4px); border-radius: 28%; padding: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(17, 17, 20, .08);
}
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g b { font-size: clamp(16px, min(1.7vw, 2.6dvh) + 4px, 27px); font-weight: 800; letter-spacing: -.02em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g small { display: flex; align-items: center; gap: 7px; color: var(--ok-text); font-size: clamp(12px, min(1vw, 1.6dvh) + 3.5px, 17px); font-weight: 600; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g small > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g .dot { width: 9px; height: 9px; animation: csLive 2s ease-out infinite; }
@keyframes csLive { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .45); } 80%, 100% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); } }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-actions { gap: clamp(6px, .8vw, 12px); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-icon { width: var(--cs-btn); height: var(--cs-btn); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(17, 17, 20, .07); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-icon svg { width: 44%; height: 44%; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-end { height: var(--cs-btn); padding: 0 clamp(14px, 1.8vw, 26px); font-size: clamp(14px, min(1.2vw, 1.9dvh) + 4px, 20px); font-weight: 800; }
/* WhatsApp tarzı: solda ‹ geri (zeminsiz, iri ok), "Sohbeti Sonlandır" güç simgeli ve tam yazılı */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .appbar.ab-wa { gap: clamp(4px, .8vw, 12px); padding-left: max(calc(var(--cs-px) - 10px), 4px); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-back {
  width: var(--cs-btn); height: var(--cs-btn); background: none; box-shadow: none; color: var(--accent-text); border-radius: 50%; transition: background .15s, transform .12s;
}
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-back svg { width: calc(var(--cs-btn) * .58); height: calc(var(--cs-btn) * .58); stroke-width: 2.6; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-back:active { background: var(--accent-soft); transform: scale(.94); }
@media (hover: hover) { :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-back:hover { background: var(--accent-soft); } }
[dir="rtl"] :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-back svg { transform: scaleX(-1); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-end { gap: .45em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-end svg { width: 1.15em; height: 1.15em; flex: none; stroke-width: 2.4; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-end > span { max-width: 16em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-uselang { height: var(--cs-btn); font-size: clamp(13px, min(1.1vw, 1.8dvh) + 4px, 19px); }

/* Mesajlar: tam genişlik, iri ve okunur baloncuklar */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .messages { padding: clamp(14px, 2.4dvh, 30px) var(--cs-px) clamp(12px, 2dvh, 24px); gap: clamp(8px, 1.4dvh, 16px); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg { max-width: min(80%, 1000px); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg.system { max-width: 92%; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .bubble { font-size: var(--cs-fs); line-height: 1.4; padding: .6em .95em; border-radius: 1.25em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg.me .bubble { border-bottom-right-radius: .35em; box-shadow: 0 6px 18px rgba(255, 138, 0, .22); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg.them .bubble { border-bottom-left-radius: .35em; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(17, 17, 20, .06); }
[dir="rtl"] :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg.me .bubble { border-bottom-right-radius: 1.25em; border-bottom-left-radius: .35em; }
[dir="rtl"] :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg.them .bubble { border-bottom-left-radius: 1.25em; border-bottom-right-radius: .35em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg.system .bubble { font-size: calc(var(--cs-fs) * .78); padding: 4px 10px; box-shadow: none; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .bubble .orig { font-size: .8em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg .who { font-size: calc(var(--cs-fs) * .68); margin: 0 .9em 4px; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .meta { font-size: calc(var(--cs-fs) * .64); gap: .5em; margin: 5px .7em 0; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .meta svg { width: 1.1em; height: 1.1em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .speak-btn { font-size: calc(var(--cs-fs) * .7); padding: .4em .85em; gap: .4em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .speak-btn svg { width: 1.2em; height: 1.2em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .typing { font-size: calc(var(--cs-fs) * .82); padding: .75em 1em; border-radius: 1.25em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .price-big { font-size: calc(var(--cs-fs) * 1.75); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .chip-btn { font-size: calc(var(--cs-fs) * .72); padding: .45em .8em; }

/* Karşılama kartı (sohbetin başı): geniş, sıcak renkli, solda turuncu sohbet rozeti */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg-intro {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); width: 100%; max-width: min(100%, 900px); margin-bottom: clamp(4px, 1dvh, 12px);
  padding: clamp(14px, 2dvh, 24px) clamp(16px, 2.2vw, 30px); border-radius: clamp(18px, 2.2dvh, 28px); text-align: start;
  font-size: calc(var(--cs-fs) * .9); line-height: 1.45; color: #3a3a3c;
  background: linear-gradient(135deg, rgba(255, 255, 255, .97) 0%, rgba(255, 246, 234, .97) 100%);
  border: 1px solid rgba(255, 149, 0, .18); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(255, 149, 0, .12);
}
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg-intro::before {
  content: ""; flex: none; width: calc(var(--cs-fs) * 2.5); height: calc(var(--cs-fs) * 2.5); border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.4 7.6L3 21l1.4-5.2A8.5 8.5 0 1 1 21 12z'/%3E%3Cpath d='M8.5 10.5h7M8.5 14h4.5'/%3E%3C/svg%3E") center / 52% no-repeat,
    linear-gradient(145deg, var(--accent-2), var(--accent));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent);
}
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .msg-intro.rot { justify-content: flex-start; min-height: calc(3 * 1.45em + 2 * clamp(14px, 2dvh, 24px)); }

/* Hızlı istek çubuğu: iri çipler; geniş ekranda kaydırmadan iki satıra sığar */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar-wrap { padding: clamp(6px, 1dvh, 12px) var(--cs-px) 0; background: rgba(255, 255, 255, .9); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar { gap: clamp(8px, 1vw, 12px); padding: 4px 4px clamp(10px, 1.4dvh, 14px); margin-bottom: 0; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar button {
  min-height: clamp(42px, min(5vw, 6.2dvh), 58px); padding: 0 clamp(14px, 1.5vw, 24px); gap: .5em; border-radius: 999px;
  font-size: calc(var(--cs-fs) * .78); font-weight: 600; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(17, 17, 20, .07);
  transition: transform .12s;
}
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar button svg { width: 1.2em; height: 1.2em; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar button:active { transform: scale(.96); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar .q-sos { background: linear-gradient(135deg, #ff5b50, #e0241a); color: #fff; font-weight: 800; box-shadow: 0 6px 16px rgba(255, 59, 48, .3); }
/* Çipler tek satırda kalır (alta kaymaz); sığmayanlar yana kaydırılır (fare tekerleği / dokunarak), kenarda solarak belli olur */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar button { scroll-snap-align: start; }

/* Yazı alanı: tam genişlik, iri mikrofon / gönder düğmeleri */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .composer { padding: clamp(6px, 1dvh, 12px) var(--cs-px) calc(clamp(10px, 1.6dvh, 18px) + var(--safe-b)); background: rgba(255, 255, 255, .9); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .composer-bar { max-width: none; gap: clamp(8px, 1vw, 14px); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .composer textarea {
  min-height: var(--cs-btn); max-height: 30dvh; font-size: max(16px, calc(var(--cs-fs) * .95)); line-height: 1.35;
  padding: calc((var(--cs-btn) - 1.35em) / 2 - 1.5px) clamp(16px, 1.8vw, 26px); border-radius: calc(var(--cs-btn) / 2);
  border: 1.5px solid var(--line); background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .03);
}
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .composer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .mic-btn, :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .send-btn { width: var(--cs-btn); height: var(--cs-btn); }
/* Simge boyutu düğmeye göre (mikrofon simgesi bir span içinde: yüzde değer span'a göre hesaplanırdı) */
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .mic-btn svg, :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .send-btn svg { width: calc(var(--cs-btn) * .46); height: calc(var(--cs-btn) * .46); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .mic-btn { box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 38%, transparent); }
:is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .rec-overlay { inset: 0 calc(var(--cs-btn) + 8px); border-radius: calc(var(--cs-btn) / 2); font-size: calc(var(--cs-fs) * .85); }

/* Dar telefon: ad kısalır, durum satırı gizlenir; çok darsa yalnızca logo */
@media (max-width: 420px) {
  :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g small { display: none; }
  :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-end { padding: 0 12px; font-size: 13.5px; }
  :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .hbtn.ab-end > span { max-width: 10em; }
}
@media (max-width: 340px) { :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g { display: none; } }
/* Yatay telefon / kısa ekran: üst çubuk ve çipler alçak (mesajlara yer kalsın) */
@media (orientation: landscape) and (max-height: 500px) {
  :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) { --cs-btn: 44px; }
  :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g small { display: none; }
  :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .qbar button { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) { :is(body.mode-personal #screen-chat, body.staff-app #paneStaff) .ab-name-g .dot { animation: none; } }

/* ---------- Personel sohbet ekranı (s.php): misafir ekranıyla aynı görünümün personele özel parçaları ----------
   Sol üstteki "aktif sohbetleri göster / gizle" düğmesi, dil rozeti (DE, EN …), durum satırı (dil · masa · aktif / sona erdi),
   ses ayarları, sesli oku, Fiyat söyle araç çubuğu ve hazır yanıtlar. */
body.staff-app #paneStaff .appbar { padding-left: var(--cs-px); }
body.staff-app #paneStaff .hbtn.sl-toggle.on { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
body.staff-app #paneStaff .hbtn.ab-icon.on { color: var(--blue); }
body.staff-app #paneStaff #langAvatar {
  width: calc(var(--cs-btn) + 4px); height: calc(var(--cs-btn) + 4px); font-size: calc(var(--cs-fs) * .78); font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Durum satırı personel için önemli: telefonda da görünür; renk duruma göre (aktif yeşil, sona erdi gri) */
body.staff-app #paneStaff .ab-name-g small { color: var(--muted); }
body.staff-app #paneStaff .ab-name-g small:has(.dot:not(.off)) { color: var(--ok-text); }
body.staff-app #paneStaff .ab-name-g .dot.off { animation: none; box-shadow: none; }
@media (max-width: 420px) { body.staff-app #paneStaff .ab-name-g small { display: flex; } }
/* Bant ve kapanış kutusu: tam genişlik (eski 760 px sınırı yok) */
body.staff-app #paneStaff #unlockAudio, body.staff-app #paneStaff #closedBox {
  width: auto; max-width: none; margin: clamp(8px, 1.4dvh, 14px) var(--cs-px) 0; font-size: calc(var(--cs-fs) * .72);
}
/* Fiyat söyle araç çubuğu ve hazır yanıtlar: misafir ekranındaki hızlı istek çipleriyle aynı (tek satır, yana kaydırılır) */
body.staff-app #paneStaff .staff-tools, body.staff-app #paneStaff .composer .quick {
  max-width: none; margin-left: 0; margin-right: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  gap: clamp(8px, 1vw, 12px); padding: 4px 4px clamp(10px, 1.4dvh, 14px);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
body.staff-app #paneStaff .staff-tools button, body.staff-app #paneStaff .composer .quick button {
  min-height: clamp(42px, min(5vw, 6.2dvh), 58px); padding: 0 clamp(14px, 1.5vw, 24px); gap: .5em; border-radius: 999px;
  font-size: calc(var(--cs-fs) * .78); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(17, 17, 20, .07); transition: transform .12s;
}
body.staff-app #paneStaff .staff-tools button:active, body.staff-app #paneStaff .composer .quick button:active { transform: scale(.96); }
body.staff-app #paneStaff .staff-tools button svg { width: 1.2em; height: 1.2em; }
body.staff-app #paneStaff .staff-tools .t-price { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 800; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent); }
body.staff-app #paneStaff .composer .quick { padding-top: 2px; }
/* Üst çubuk dar ekranda: ad kısalır (üç nokta), düğmeler sabit kalır; "Sohbeti Sonlandır" telefonda "Sonlandır" olur */
body.staff-app #paneStaff .ab-brand { overflow: hidden; }
body.staff-app #paneStaff .ab-actions { flex: none; }
body.staff-app #paneStaff .ab-end .lbl-short { display: none; }
/* Klavye Açık / Kapalı (sesli okuma düğmesinin sağında): simge + durum yazısı; açıkken mavi */
body.staff-app #paneStaff .hbtn.ab-kb {
  height: var(--cs-btn, 42px); padding: 0 clamp(10px, 1.4vw, 18px); gap: 8px; font-weight: 700; white-space: nowrap;
  font-size: clamp(13.5px, min(1.1vw, 1.8dvh) + 4px, 18px); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(17, 17, 20, .07);
}
body.staff-app #paneStaff .hbtn.ab-kb svg { width: 1.35em; height: 1.35em; flex: none; }
body.staff-app #paneStaff .hbtn.ab-kb:not(.on) { color: var(--muted); }
body.staff-app #paneStaff .hbtn.ab-kb.on { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 45%, transparent); }
body.staff-app #paneStaff.st-idle #kbToggle { display: none; }
/* Dar telefonda yalnızca simge (açıkken mavi; kapalıyken üstü çizili) */
@media (max-width: 480px) {
  body.staff-app #paneStaff .hbtn.ab-kb { width: var(--cs-btn, 42px); padding: 0; justify-content: center; }
  body.staff-app #paneStaff .hbtn.ab-kb .kb-l { display: none; }
  body.staff-app #paneStaff .hbtn.ab-kb:not(.on) { position: relative; }
  body.staff-app #paneStaff .hbtn.ab-kb:not(.on)::after { content: ""; position: absolute; width: 58%; height: 2px; background: currentColor; transform: rotate(-35deg); border-radius: 2px; }
}
@media (max-width: 560px) {
  body.staff-app #paneStaff .ab-end .lbl-long { display: none; }
  body.staff-app #paneStaff .ab-end .lbl-short { display: inline; }
}
@media (max-width: 420px) {
  body.staff-app #paneStaff { --cs-btn: 44px; --cs-px: 10px; }
  body.staff-app #paneStaff .appbar { gap: 6px; }
  body.staff-app #paneStaff .ab-actions { gap: 5px; }
  body.staff-app #paneStaff .hbtn.ab-end { padding: 0 11px; }
}
/* Çok dar telefon: dil rozeti gizlenir (dil, adın altındaki durum satırında yazar) */
@media (max-width: 380px) { body.staff-app #paneStaff #langAvatar { display: none; } }
@media (max-width: 340px) { body.staff-app #paneStaff .ab-name-g { display: flex; } }
/* Personel karşılama kartı: kalın vurgular okunur kalsın */
body.staff-app #paneStaff .msg-intro b { color: var(--text); }
/* Sol menü altı (personel girişiyle gelindi): oturum sahibi + "Oturumu Sonlandır" */
.sl-foot { flex: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--surface); }
.sl-me { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sl-me b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-me small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-out { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--danger-soft); color: var(--red); font-weight: 700; font-size: 13.5px; }
.sl-out:active { transform: scale(.96); }
.st-logout { margin-top: 16px; min-height: 52px; background: var(--danger-soft); color: var(--red); font-weight: 700; }

/* ---------- Personel bekleme ekranı (personel/index.php: aktif sohbet yokken) ---------- */
body.staff-app #paneStaff .pw-out { margin: 0; }
.pw-main { flex: 1; min-height: 0; display: grid; place-items: center; padding: clamp(16px, 4dvh, 48px) var(--cs-px, 16px) calc(clamp(16px, 4dvh, 48px) + var(--safe-b)); }
.pw-card {
  width: min(100%, 640px); display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.6dvh, 16px); text-align: center;
  padding: clamp(28px, 5dvh, 56px) clamp(20px, 4vw, 48px); border-radius: clamp(22px, 3dvh, 32px);
  background: linear-gradient(160deg, #fff 0%, #fff7ec 100%); border: 1px solid rgba(255, 149, 0, .16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 48px rgba(255, 149, 0, .14);
}
.pw-ic { position: relative; width: clamp(76px, 11dvh, 108px); height: clamp(76px, 11dvh, 108px); border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 36%, transparent); }
.pw-ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: pwRing 2.2s ease-out infinite; }
.pw-ic svg { width: 46%; height: 46%; }
@keyframes pwRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 80%, 100% { box-shadow: 0 0 0 26px color-mix(in srgb, var(--accent) 0%, transparent); } }
.pw-card h1 { margin: 6px 0 0; font-size: clamp(22px, min(3vw, 3.6dvh) + 6px, 34px); letter-spacing: -.02em; }
.pw-card p { margin: 0; max-width: 46ch; color: #48484d; font-size: clamp(15px, min(1.4vw, 2dvh) + 6px, 20px); line-height: 1.45; }
.pw-list { margin-top: 6px; font-weight: 600; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .pw-ic::after { animation: none; } }

/* ---------- Personel girişi (personel/login.php): uygulama gibi tam ekran ---------- */
.pl-page { min-height: 100dvh; background: radial-gradient(120% 70% at 50% 0%, #fff3e0 0%, #f6f6fa 55%, #eef0f5 100%); }
.pl-wrap {
  min-height: 100dvh; display: grid; place-items: center;
  padding: calc(var(--safe-t) + clamp(16px, 4dvh, 48px)) max(16px, env(safe-area-inset-right, 0px)) calc(var(--safe-b) + clamp(16px, 4dvh, 48px)) max(16px, env(safe-area-inset-left, 0px));
}
.pl-card {
  width: min(100%, 460px); display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 4dvh, 40px) clamp(20px, 4vw, 36px);
  border-radius: 30px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 24px 60px rgba(17, 17, 20, .1); animation: screenIn .4s cubic-bezier(.2, .8, .2, 1);
}
.pl-logo { align-self: center; width: 88px; height: 88px; border-radius: 26px; padding: 8px; background: #fff; box-shadow: 0 10px 28px rgba(17, 17, 20, .12); margin-bottom: 4px; }
.pl-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 18px; }
.pl-card h1 { margin: 0; text-align: center; font-size: 28px; letter-spacing: -.025em; }
.pl-sub { margin: -8px 0 4px; text-align: center; color: var(--muted); font-size: 15px; }
.pl-error { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--danger-soft); color: #c4161c; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.pl-error svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.pl-field { display: flex; flex-direction: column; gap: 6px; }
.pl-lbl { font-size: 13.5px; font-weight: 700; color: #48484d; padding-left: 4px; }
.pl-in { position: relative; display: flex; align-items: center; }
.pl-in > svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.pl-in input {
  width: 100%; min-height: 56px; padding: 0 16px 0 48px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff;
  font-size: 17px; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.pl-in input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pl-in input:focus + svg, .pl-in:focus-within > svg { color: var(--accent-text); }
.pl-in input[type="password"], .pl-in input#password { padding-right: 56px; }
.pl-eye { position: absolute; right: 6px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.pl-eye svg { width: 21px; height: 21px; }
.pl-eye[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-soft); }
.pl-remember { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); cursor: pointer; }
.pl-remember span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pl-remember b { font-size: 15px; }
.pl-remember small { font-size: 12.5px; color: var(--muted); }
.pl-remember .switch-ios { order: 2; margin-left: auto; }
.pl-remember .switch-ios:checked { background: var(--green); }
.pl-remember .switch-ios:checked::after { transform: translateX(20px); }
.pl-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; margin-top: 4px; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-size: 18px; font-weight: 800;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 36%, transparent); transition: transform .12s, opacity .2s;
}
.pl-submit svg { width: 22px; height: 22px; }
.pl-submit:active { transform: scale(.98); }
.pl-submit.busy { opacity: .75; }
.pl-submit.busy svg { animation: plGo .9s ease-in-out infinite; }
@keyframes plGo { 50% { transform: translateX(5px); } }
.pl-note { margin: 2px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.pl-back { text-align: center; font-size: 14px; color: var(--muted); font-weight: 600; }
/* Telefon: kart ekranı doldurur (uygulama gibi) */
@media (max-width: 520px) {
  .pl-wrap { place-items: stretch; padding: 0; }
  .pl-card { width: 100%; min-height: 100dvh; border-radius: 0; justify-content: center; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: calc(var(--safe-t) + 28px) max(20px, env(safe-area-inset-right, 0px)) calc(var(--safe-b) + 24px) max(20px, env(safe-area-inset-left, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .pl-card, .pl-submit.busy svg { animation: none; } }

/* Personel ekranı: aktif sohbetler menüsü açıkken üst çubuktaki göster / gizle düğmesi gizlenir (menünün kendi ‹ kapat düğmesi var) */
body.staff-app.sl-open #paneStaff #slBtn { display: none; }
/* Aktif sohbetler listesi: misafirin dili bayrakla (emoji; Windows'ta ülke kodu rozeti) */
.sl-flag {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sl-flag .lf { font-size: 26px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.sl-flag .lf.code { font: 800 12px/1 var(--font); letter-spacing: .02em; color: var(--muted); }
.sl-item.sel .sl-flag { background: #fff; }
.sl-item.em .sl-flag { box-shadow: inset 0 0 0 2px var(--red); }

/* Onay penceresi: çok satırlı soru (ör. dil değişimi: yeni dilde + şimdiki dilde) satır sonlarını korur */
#sc-confirm .dialog-text { white-space: pre-line; }

/* ---------- Personel: "Sohbet sonlandırıldı" penceresi (misafir sonlandırdı) — ekranın ortasında ---------- */
.sheet.st-modal {
  top: 50%; bottom: auto; left: 50%; right: auto; width: min(92vw, 440px); max-width: none; margin: 0; transform: translate(-50%, -50%);
  border-radius: 28px; padding: 28px 24px 22px; align-items: center; text-align: center; gap: 10px; animation: stModalIn .28s cubic-bezier(.2, .9, .3, 1.1);
}
.st-modal-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #ff6259, #e0241a); box-shadow: 0 10px 26px rgba(255, 59, 48, .32); }
.st-modal-ic svg { width: 46%; height: 46%; }
.sheet.st-modal h2 { margin: 6px 0 0; font-size: 23px; }
.sheet.st-modal .dialog-text { margin: 0 0 6px; color: #48484d; }
.st-modal-btn.btn-danger { min-height: 56px; background: var(--red); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 10px 24px rgba(255, 59, 48, .32); }
@keyframes stModalIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .sheet.st-modal { animation: none; } }

/* ---------- Personel: sohbetten çıkıldı → boş ekran (WhatsApp gibi; ortada logo) ---------- */
body.staff-app #paneStaff.st-idle .messages, body.staff-app #paneStaff.st-idle .qbar-wrap, body.staff-app #paneStaff.st-idle .composer,
body.staff-app #paneStaff.st-idle #closedBox, body.staff-app #paneStaff.st-idle #emBox, body.staff-app #paneStaff.st-idle #unlockAudio,
body.staff-app #paneStaff.st-idle #endBtn, body.staff-app #paneStaff.st-idle #speakToggle { display: none !important; }
.st-empty {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 1.6dvh, 16px);
  padding: 32px var(--cs-px, 16px) calc(32px + var(--safe-b)); text-align: center; color: #48484d;
}
.st-empty[hidden] { display: none; }
.st-empty-logo { width: clamp(110px, 18dvh, 180px); height: clamp(110px, 18dvh, 180px); object-fit: contain; border-radius: 30%; padding: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 48px rgba(17, 17, 20, .1); }
.st-empty h2 { margin: 8px 0 0; font-size: clamp(22px, min(2.4vw, 3.4dvh) + 6px, 34px); color: var(--text); letter-spacing: -.02em; }
.st-empty p { margin: 0; max-width: 46ch; font-size: clamp(15px, min(1.2vw, 2dvh) + 6px, 19px); line-height: 1.45; }
.st-empty-btn { margin-top: 6px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent); }
.st-empty-btn[hidden] { display: none; }
/* Liste zaten açıkken "Aktif sohbetleri göster" düğmesi gereksiz */
body.staff-app.sl-open .st-empty-btn { display: none; }

/* ---------- Personel: "Misafir Ekranında Çağrı Yap" (boş ekran ve bekleme ekranı) ---------- */
.gc {
  width: min(100%, 760px); margin-top: clamp(14px, 2.4dvh, 26px); padding: clamp(16px, 2.4dvh, 24px) clamp(16px, 2vw, 24px);
  border-radius: 26px; background: #fff; border: 1px solid rgba(0, 122, 255, .14); text-align: start;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 14px 40px rgba(0, 122, 255, .1);
}
.gc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.gc-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3d9bff, #0063d6); box-shadow: 0 8px 20px rgba(0, 122, 255, .3); }
.gc-ic svg { width: 54%; height: 54%; }
.gc-head h3 { margin: 0; font-size: clamp(18px, min(1.6vw, 2.4dvh) + 6px, 24px); letter-spacing: -.02em; color: var(--text); }
.gc-head p { margin: 3px 0 0; font-size: clamp(13.5px, .4vw + 11px, 15.5px); color: var(--muted); line-height: 1.4; max-width: none; }
/* Tek satır: en çok 8 dil + "Diğer" (9 eşit sütun); kart içinde üstte bayrak, altında dil adları */
.gc-langs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.gc-lang {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border-radius: 18px; background: var(--surface-2);
  color: var(--text); text-align: start; box-shadow: inset 0 0 0 1px var(--line); transition: transform .12s, background .15s, box-shadow .15s;
}
.gc-lang:active { transform: scale(.97); }
@media (hover: hover) { .gc-lang:hover { background: rgba(0, 122, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(0, 122, 255, .35); } }
.gc-lang.sel { background: rgba(0, 122, 255, .1); box-shadow: inset 0 0 0 2px var(--blue); }
.gc-flag { flex: none; font-size: 28px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.gc-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.gc-name b { font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.gc-name small { font-size: 12.5px; color: var(--muted); }
.gc-langs .gc-lang { flex-direction: column; justify-content: center; gap: 7px; min-width: 0; min-height: 92px; padding: 10px 4px; text-align: center; }
.gc-langs .gc-flag { font-size: 32px; }
.gc-langs .gc-name { width: 100%; align-items: center; }
.gc-langs .gc-name b { max-width: 100%; font-size: 14px; text-align: center; }
.gc-langs .gc-name small { max-width: 100%; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-lang-more .gc-flag { filter: saturate(.9); }

/* "Diğer diller" penceresi (guest-call.js gövdeye taşır; mobil anons penceresinin de üstünde) */
.gc-mdl { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gc-mdl[hidden] { display: none; }
.gc-mdl-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.gc-mdl-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; width: min(100%, 720px); max-height: min(86dvh, 720px);
  padding: 18px 18px calc(18px + var(--safe-b, 0px)); border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  animation: gcUp .22s ease-out; outline: none;
}
.gc-mdl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gc-mdl-head h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; color: var(--text); }
.gc-mdl-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--text); }
.gc-mdl-x svg { width: 18px; height: 18px; }
.gc-mdl-q { flex: none; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; color: var(--text); }
.gc-mdl-q:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 122, 255, .18); }
.gc-mdl-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); align-content: start; gap: 8px; padding: 2px; }
.gc-opt {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border-radius: 16px; background: var(--surface-2);
  color: var(--text); text-align: start; box-shadow: inset 0 0 0 1px var(--line); transition: transform .12s, background .15s, box-shadow .15s;
}
.gc-opt[hidden] { display: none; }
.gc-opt:active { transform: scale(.97); }
@media (hover: hover) { .gc-opt:hover { background: rgba(0, 122, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(0, 122, 255, .35); } }
.gc-opt:focus-visible, .gc-lang:focus-visible { outline: 3px solid rgba(0, 122, 255, .45); outline-offset: 2px; }
.gc-mdl-none { margin: 0; padding: 18px 0; text-align: center; color: var(--muted); font-weight: 600; }
html.gc-mlock, html.gc-mlock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gc-mdl-card { animation: none; } }
.gc-status { min-height: 1.4em; margin: 12px 2px 0; font-size: 14.5px; font-weight: 600; color: var(--muted); max-width: none; }
.gc-status.wait { color: var(--blue); }
.gc-status.ok { color: var(--ok-text); }
.gc-status.err { color: #c4161c; }
.gc-status:empty { display: none; }
/* Bekleme ekranında kart + çağrı alanı alt alta, ortada */
.pw-main { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-y: auto; }
.st-empty { overflow-y: auto; }

/* ---------- Mikrofonda nabız ("Tekrar konuşmak için mikrofona dokunun") ---------- */
.mic-btn.nudge { animation: micNudge 1.4s ease-in-out infinite; }
@keyframes micNudge { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); } 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.nudge { animation: none; } }

/* Karşılama: "Sesi açmak için dokunun" (ses kilidi açılana kadar; personel çağrısı anonsu kendiliğinden çalabilsin) */
.snd-pill {
  position: absolute; z-index: 5; top: calc(var(--safe-t) + 14px); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(28, 28, 30, .86); color: #fff; font-size: 14.5px; font-weight: 700; box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
  animation: sndPulse 2.2s ease-in-out infinite; white-space: nowrap; max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis;
}
.snd-pill[hidden] { display: none; }
.snd-pill svg { width: 18px; height: 18px; flex: none; }
@keyframes sndPulse { 50% { box-shadow: 0 0 0 8px rgba(28, 28, 30, .12), 0 8px 22px rgba(0, 0, 0, .2); } }
@media (prefers-reduced-motion: reduce) { .snd-pill { animation: none; } }

/* ---------- Sohbet üst çubuğu: dil düğmesi ("Sohbeti sonlandır"ın solunda): bayrak + dilin kendi adı + ⌄ ---------- */
.hbtn.ab-lang { gap: .4em; height: 42px; padding: 0 10px 0 8px; font-weight: 700; max-width: 13em; }
.hbtn.ab-lang .ab-lang-f { display: inline-flex; flex: none; font-size: 1.3em; line-height: 1; }
.hbtn.ab-lang .ab-lang-f .lf.svgf svg { width: 1.3em; height: .87em; border-radius: 2px; display: block; }
.hbtn.ab-lang .ab-lang-f .lf.code { font-size: .62em; padding: 2px 4px; border-radius: 4px; background: var(--surface-2); }
.hbtn.ab-lang .ab-lang-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbtn.ab-lang > svg { width: 15px; height: 15px; flex: none; opacity: .6; }
/* Otomatik algılama: bayrağın köşesinde küçük 🔄 */
.hbtn.ab-lang.auto .ab-lang-f { position: relative; }
.hbtn.ab-lang.auto .ab-lang-f::after { content: "🔄"; position: absolute; right: -.45em; bottom: -.35em; font-size: .5em; }
body.mode-personal #screen-chat .hbtn.ab-lang { height: var(--cs-btn, 42px); font-size: clamp(14px, min(1.1vw, 1.8dvh) + 4px, 19px); }
@media (max-width: 560px) { body.mode-personal #screen-chat .hbtn.ab-lang .ab-lang-n { max-width: 5.5em; } }
@media (max-width: 380px) { body.mode-personal #screen-chat .hbtn.ab-lang .ab-lang-n { display: none; } }

/* Personel ekranı: "Manuel dil seçimi" anahtarı (sohbet ekranı sol menüsü, bekleme ekranı) */
.sl-set { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.sl-set .sr-l { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }
.sl-set .sr-l small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.pw-set { width: min(100%, 640px); margin: clamp(10px, 2dvh, 18px) 0 0; text-align: start; cursor: pointer; }

/* ---------- Personel ekranı, mobil: "Anons Gönder" + "QR Göster" (tablet / masaüstünde gizli; görünüm değişmez) ---------- */
.gc-mtools, .sl-mtools { display: none; }
.gc-x { display: none; }
@media (max-width: 640px) {
  .gc-mtools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 520px); margin-top: clamp(14px, 2.4dvh, 22px); }
  .sl-mtools { display: block; flex: none; padding: 10px 12px 0; border-top: 1px solid var(--line); background: var(--surface); }
  .sl-mtools .gc-mtools { margin: 0 0 10px; width: 100%; }
  .gc-mbtn {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 12px; border-radius: 18px;
    font-weight: 800; font-size: 15.5px; color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); transition: transform .12s;
  }
  .gc-mbtn:active { transform: scale(.97); }
  .gc-mbtn svg { width: 22px; height: 22px; flex: none; }
  .gc-mbtn-call { background: linear-gradient(145deg, #3d9bff, #0063d6); }
  .gc-mbtn-qr { background: linear-gradient(135deg, var(--accent-2, #ffb340), var(--accent, #ff8a00)); }

  /* Anons bölümü sayfada gizli; açılınca alttan pencere */
  .gc-host { display: none; }
  .gc-host.open { display: flex; position: fixed; inset: 0; z-index: 90; align-items: flex-end; justify-content: center; }
  .gc-host-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
  .gc-host.open .gc {
    position: relative; margin: 0; width: 100%; max-height: 88dvh; overflow-y: auto; border-radius: 26px 26px 0 0;
    padding-bottom: calc(18px + var(--safe-b)); animation: gcUp .22s ease-out;
  }
  .gc-host.open .gc-head { padding-right: 44px; }
  .gc-x {
    display: grid; place-items: center; position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
    background: var(--surface-2); color: var(--text); z-index: 1;
  }
  .gc-x svg { width: 18px; height: 18px; }
  html.gc-lock, html.gc-lock body { overflow: hidden; }
  /* Telefonda 9 kart tek satıra sığmaz: 3 × 3 */
  .gc-langs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gc-mdl { align-items: flex-end; padding: 0; }
  .gc-mdl-card { width: 100%; max-height: 88dvh; border-radius: 26px 26px 0 0; }
}
@keyframes gcUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* QR penceresi (misafir kendi telefonundan sohbet başlatır): tam ekran, ortada büyük QR */
.sqr { display: none; }
.sqr.open { display: grid; place-items: center; position: fixed; inset: 0; z-index: 95; padding: 16px; background: rgba(0, 0, 0, .55); }
.sqr-card {
  position: relative; width: min(100%, 420px); padding: 22px 18px calc(18px + var(--safe-b)); border-radius: 28px; background: #fff;
  text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: gcUp .22s ease-out;
}
.sqr-card .gc-x { display: grid; place-items: center; position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--text); }
.sqr-card .gc-x svg { width: 18px; height: 18px; }
.sqr-card h3 { margin: 6px 44px 4px; font-size: 20px; letter-spacing: -.02em; color: var(--text); }
/* QR üstünde dilden dile dönen uyarı + bilgi; yükseklik sabit (en uzun dilde de QR yerinden oynamaz) */
.sqr-rot {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 7.6em; margin: 4px 40px 12px;
  transition: opacity .22s ease, transform .22s ease;
}
.sqr-rot.fade { opacity: 0; transform: translateY(4px); }
.sqr-l1 { font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.sqr-l2 { font-size: 15px; line-height: 1.35; color: #48484d; }
@media (prefers-reduced-motion: reduce) { .sqr-rot { transition: none; } }
.sqr-code { width: min(100%, 340px); margin: 0 auto; aspect-ratio: 1; }
.sqr-code svg { width: 100%; height: 100%; display: block; }
.sqr-url { margin: 10px 0 0; font-weight: 700; font-size: 15px; color: var(--text); word-break: break-all; }
.sqr-site { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .gc-host.open .gc, .sqr-card { animation: none; } }

/* ---------- Personel bekleme ekranı v2 (personel/index.php): tek akış, kart içinde kart yok ---------- */
.pw2 { justify-content: flex-start; gap: 0; padding-top: clamp(20px, 6dvh, 64px); }
.pw2 .pw-hero { width: min(100%, 760px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(8px, 1.4dvh, 14px); }
/* Bekleme simgesi: hafif dalgalanan halka ("bekleniyor") */
.pw-pulse { position: relative; display: grid; place-items: center; width: clamp(72px, 11dvh, 96px); aspect-ratio: 1; margin-bottom: 4px; }
.pw-pulse::before, .pw-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent);
  animation: pwRing2 2.4s ease-out infinite;
}
.pw-pulse::after { animation-delay: 1.2s; }
.pw2 .pw-ic {
  position: relative; z-index: 1; width: 78%; aspect-ratio: 1; height: auto; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--accent-2, #ffb340), var(--accent, #ff8a00)); box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pw2 .pw-ic svg { width: 46%; height: 46%; }
@keyframes pwRing2 { from { transform: scale(.75); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.pw2 .pw-ic::after { content: none; }
.pw2 .pw-hero h1 { margin: 0; font-size: clamp(24px, min(2.6vw, 3.6dvh) + 8px, 38px); letter-spacing: -.025em; color: var(--text); }
.pw2 .pw-hero p { margin: 0; max-width: 54ch; font-size: clamp(15px, min(1.1vw, 1.9dvh) + 6px, 18px); line-height: 1.5; color: #55555c; }

/* Eylem düğmeleri: aynı yükseklikte hap düğmeler, ortalı, sığmazsa alt satıra */
.pw-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(10px, 2dvh, 18px); }
.pw-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 20px; border-radius: 999px;
  background: #fff; color: var(--text); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .04), 0 6px 16px rgba(17, 17, 20, .06);
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
.pw-btn svg { width: 20px; height: 20px; flex: none; color: var(--accent-text, var(--accent)); }
.pw-btn:active { transform: scale(.97); }
@media (hover: hover) { .pw-btn:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 22px rgba(17, 17, 20, .09); } }
.pw-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.pw-btn-accent { background: linear-gradient(135deg, var(--accent-2, #ffb340), var(--accent, #ff8a00)); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent); }
.pw-btn-accent svg, .pw-btn-blue svg { color: #fff; }
.pw-btn-blue { background: linear-gradient(145deg, #3d9bff, #0063d6); color: #fff; box-shadow: 0 8px 22px rgba(0, 122, 255, .28); }
@media (hover: hover) { .pw-btn-accent:hover, .pw-btn-blue:hover { filter: brightness(1.05); } }
.pw-toggle { gap: 12px; padding-right: 8px; }
.pw-tg-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: start; }
.pw-tg-t small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.pw-only-m { display: none; }

/* Anons bölümü: kart yok; üstte ince ayraç, başlık solda, dil düğmeleri ızgara */
/* Ekran genişliğinde: sarmalayıcı (.gc-host) da tam genişlik, yoksa ortalı flex içinde içeriği kadar daralır */
.pw2 > .gc-host { width: 100%; }
.pw2 .gc {
  width: 100%; margin-top: clamp(26px, 5dvh, 48px); padding: clamp(20px, 3.4dvh, 32px) 0 0;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
/* Kartlar genişlikle büyür (bayrak, adlar, yükseklik); yatay tablette yükseklik ekranı taşırmaz */
.pw2 .gc-langs .gc-lang { min-height: clamp(96px, min(10vw, 18dvh), 168px); gap: clamp(6px, .8vw, 12px); padding: 12px 6px; }
.pw2 .gc-langs .gc-flag { font-size: clamp(32px, min(3.6vw, 6.4dvh), 60px); }
.pw2 .gc-langs .gc-name b { font-size: clamp(14px, .9vw + 6px, 20px); }
.pw2 .gc-langs .gc-name small { font-size: clamp(11.5px, .5vw + 7px, 15px); }
.pw2 .gc-head { gap: 12px; margin-bottom: 16px; }
.pw2 .gc-ic { width: 42px; height: 42px; box-shadow: 0 6px 16px rgba(0, 122, 255, .25); }
.pw2 .gc-head h3 { font-size: clamp(17px, min(1.3vw, 2.1dvh) + 6px, 21px); }
.pw2 .gc-langs { gap: 10px; }
.pw2 .gc-lang {
  border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .03);
}
@media (hover: hover) { .pw2 .gc-lang:hover { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 122, 255, .45), 0 8px 18px rgba(0, 122, 255, .1); transform: translateY(-1px); } }
.pw2 .gc-lang.sel { background: rgba(0, 122, 255, .08); box-shadow: inset 0 0 0 2px var(--blue); }
/* Bu ekranın kendi düğmeleri var: ortak mobil düğme satırı gösterilmez */
.pw2 .gc-mtools { display: none !important; }
@media (max-width: 640px) {
  .pw2 { padding-top: clamp(16px, 4dvh, 32px); }
  .pw-only-m { display: inline-flex; }
  .pw-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .pw-actions .pw-btn { justify-content: center; padding: 0 12px; }
  /* Liste bağlantısı ve dil seçimi anahtarı tam genişlik */
  .pw-actions > a.pw-btn, .pw-actions .pw-toggle { grid-column: 1 / -1; }
  .pw-actions .pw-toggle { justify-content: space-between; padding: 0 10px 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .pw-pulse::before, .pw-pulse::after { animation: none; opacity: .35; } }

/* Personel bekleme ekranı: avatar yerinde "Ekranı yenile" düğmesi */
.pw-reload { cursor: pointer; border: 0; padding: 0; color: #fff; transition: transform .15s ease, filter .15s ease; }
.pw-reload svg { width: 52%; height: 52%; }
.pw-reload:active { transform: scale(.92); }
@media (hover: hover) { .pw-reload:hover { filter: brightness(1.06); } }
.pw-reload:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.pw-reload.spin svg { animation: pwSpin .7s linear infinite; }
@keyframes pwSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pw-reload.spin svg { animation: none; } }

/* ---------- Personel: "Fiyat söyle" — tam ekran ----------
   Tuş takımı kalan alanı doldurur; "Misafire kendi dilinde gönder" düğmesi sabit alt çubukta (kaydırılmaz, her ekranda tam görünür).
   Çok kısa ekranlarda yalnızca gövde kayar. Geniş ekranda içerik ortada en fazla 560 px. */
.sheet.pr-sheet {
  top: 0; bottom: 0; left: 0; right: 0; margin: 0; max-width: none; max-height: none;
  height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none;
  padding-top: calc(8px + var(--safe-t)); padding-bottom: calc(10px + var(--safe-b));
}
html[data-ts] .sheet.pr-sheet { height: calc(100dvh / var(--z)); max-height: none; }
.sheet.pr-sheet > .grabber { display: none; }
.sheet.pr-sheet > .sh-head,
.sheet.pr-sheet > .sh-body,
.sheet.pr-sheet > .sh-foot {
  padding-left: max(16px, env(safe-area-inset-left, 0px), calc((100% - 560px) / 2));
  padding-right: max(16px, env(safe-area-inset-right, 0px), calc((100% - 560px) / 2));
}
.sheet.pr-sheet > .sh-body { display: flex; flex-direction: column; min-height: 0; padding-bottom: 6px; }
.sheet.pr-sheet > .sh-body > * { flex: none; }
.sheet.pr-sheet .keypad { flex: 1 0 auto; grid-auto-rows: minmax(46px, 1fr); max-height: 400px; margin: auto 0 0; padding-top: 8px; }
.sheet.pr-sheet .keypad button { height: auto; min-height: 46px; }
.sheet.pr-sheet > .sh-foot { padding-top: 10px; }
.sheet.pr-sheet #stSend { min-height: 56px; font-size: 17px; }
.sheet.pr-sheet .pay-note { margin-top: 6px; }
@media (max-height: 620px) {
  .sheet.pr-sheet .conv-input { padding-top: 10px; padding-bottom: 10px; }
  .sheet.pr-sheet .conv-input input { font-size: 28px; }
  .sheet.pr-sheet .pay-note { display: none; }
}

/* ---------- Misafir sohbeti: yalnızca ses (yazma satırı YOK) ----------
   Boşta: ortada, biraz yukarıda büyük mikrofon (karşılamadaki ile aynı), dokunan parmak 👆, dalga halkaları; altında
   "Mikrofona basın ve konuşun" ve dil gerektirmeyen resimli adımlar 👆🎤 › 🗣️ › ➤.
   Dinlerken: mikrofon kırmızı, sesle birlikte büyür (duyduğunu gösterir); solunda ✕ (iptal), sağında yeşil ➤ (gönder).
   Mikrofonun üstünde kutu: ● süre + ses dalgası + anlaşılan metin (canlı). Konuşan susunca ➤ çevresindeki halka dolar,
   dolunca kendiliğinden gönderilir. Mikrofonun yeri hiç değişmez (kutu üstte açılır; alan zıplamaz). */
.composer.voice-only { padding-bottom: calc(clamp(16px, 4.5dvh, 52px) + var(--safe-b)) !important; }
/* Personel: Klavye Açık ↔ Kapalı. Kapalıyken yazma satırı gizli, büyük mikrofon görünür (hazır yanıtlar / "Fiyat söyle" her iki durumda da kalır) */
.composer.voice-only .composer-bar { display: none; }
.composer:not(.voice-only) .vd { display: none; }
.vd {
  --vm: clamp(96px, 15dvh, 140px);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.3dvh, 14px);
  padding-top: clamp(10px, 1.8dvh, 22px);
}
.vd-ctrl { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 7vw, 64px); }
.vd-mic {
  position: relative; width: var(--vm); height: var(--vm); border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--accent-2), var(--accent) 60%, #ff6a00);
  box-shadow: 0 16px 36px rgba(255, 128, 0, .42), inset 0 -6px 16px rgba(0, 0, 0, .12), inset 0 6px 14px rgba(255, 255, 255, .35);
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .15s, opacity .2s, background .2s;
}
.vd-mic > svg { width: 44%; height: 44%; }
.vd-mic:active { transform: scale(.93); }
.vd-mic.locked { background: var(--surface-2); color: var(--muted); box-shadow: var(--shadow-sm); }
.vd-mic.locked::after { content: "🔒"; position: absolute; right: 4%; bottom: 4%; font-size: calc(var(--vm) * .2); line-height: 1; }
.vd-mw { position: relative; flex: none; width: var(--vm); height: var(--vm); }
.vd-mw .vd-mic { position: relative; z-index: 1; }
.vd-ring, .vd-ring::after {
  position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 24%, transparent);
  animation: ripple 2.4s ease-out infinite; pointer-events: none;
}
.vd-ring::after { content: ""; animation-delay: 1.2s; }
/* Dinlerken: sesin düzeyiyle büyüyen kırmızı hale (konuşan kişi mikrofonun onu duyduğunu görür) */
.vd-lvl {
  position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 59, 48, .2); pointer-events: none; display: none;
  transform: scale(calc(1 + var(--lvl, 0) * .55)); transition: transform .08s linear;
}
.vd-hand {
  position: absolute; z-index: 2; right: -14%; bottom: -16%; font-size: calc(var(--vm) * .36); line-height: 1; pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .22)); transform-origin: 50% 0; animation: mhTap 2.4s ease-in-out infinite;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.vd-mic.nudge { animation: mhPress 1.2s ease-in-out infinite; }
.composer.recording .vd-ring, .composer.recording .vd-hand { display: none; }
.composer.recording .vd-lvl { display: block; }
.composer.recording .vd-mic {
  background: linear-gradient(145deg, #ff6b5e, #ff3b30 60%, #e0261b); animation: none;
  box-shadow: 0 14px 32px rgba(255, 59, 48, .42), inset 0 -6px 16px rgba(0, 0, 0, .12), inset 0 6px 14px rgba(255, 255, 255, .3);
}
.composer.rec-wait .vd-mic { opacity: .7; }

/* ✕ iptal ve ➤ gönder: boşta gizli (mikrofon ortada kalır), dinlemeye geçince mikrofonun iki yanından açılır */
.vd-cancel, .vd-send {
  position: relative; flex: none; width: calc(var(--vm) * .62); height: calc(var(--vm) * .62); border-radius: 50%; display: grid; place-items: center;
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.3), opacity .2s;
}
.composer:not(.recording) .vd-cancel, .composer:not(.recording) .vd-send { opacity: 0; transform: scale(.3); pointer-events: none; visibility: hidden; }
.vd-cancel { background: var(--surface); color: var(--muted); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
.vd-cancel svg { width: 40%; height: 40%; }
.vd-send { color: #fff; background: linear-gradient(145deg, #3ddc6a, #1fae4b); box-shadow: 0 10px 24px rgba(31, 174, 75, .38); }
.vd-send > svg:not(.vd-auto) { width: 44%; height: 44%; }
.vd-cancel:active, .vd-send:active { transform: scale(.92); }
/* Konuşan sustu: ➤ çevresindeki halka dolar; dolunca kendiliğinden gönderilir */
.vd-auto { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.vd-auto circle { fill: none; stroke: #1fae4b; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: opacity .15s; }
.composer.auto-on .vd-auto circle { opacity: 1; }
.composer.recording:not(.auto-on):not(.rec-wait) .vd-send { animation: vdSendPulse 1.6s ease-in-out infinite; }
@keyframes vdSendPulse { 50% { box-shadow: 0 0 0 10px rgba(52, 199, 89, .14), 0 10px 24px rgba(31, 174, 75, .38); } }
.composer.rec-wait .vd-send { opacity: .6; }

/* Mikrofonun altı: boşta "Mikrofona basın ve konuşun" + adımlar; dinlerken ● "Dinliyorum… konuşun" (alan yüksekliği aynı kalır) */
.vd-under { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1dvh, 12px); margin-top: clamp(6px, 1.2dvh, 14px); min-height: calc(clamp(17px, 2.5dvh, 25px) * 1.3); }
.vd-label, .vd-rlabel { max-width: min(92vw, 640px); text-align: center; font-size: clamp(17px, 2.5dvh, 25px); font-weight: 700; line-height: 1.3; color: var(--text); }
.vd-rlabel { display: none; align-items: center; gap: 10px; color: var(--red); }
.composer.recording .vd-label { display: none; }
.composer.recording .vd-rlabel { display: flex; }
.vd-rdot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--red); animation: vdBlink 1s ease-in-out infinite; }
.composer.rec-wait .vd-rdot { animation: none; opacity: .35; }
.vd-steps { display: flex; align-items: center; gap: clamp(8px, 1vw, 12px); font-size: clamp(18px, 2.4dvh, 24px); line-height: 1; color: var(--muted); }
.vd-steps > span { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.vd-steps i { font-style: normal; font-weight: 800; opacity: .45; }
.vd-st-send { width: 1.45em; height: 1.45em; border-radius: 50%; background: #25c35a; color: #fff; display: grid; place-items: center; }
.vd-st-send svg { width: .8em; height: .8em; }
.composer.recording .vd-steps { visibility: hidden; }
[dir="rtl"] .vd-steps i, [dir="rtl"] .vd-st-send svg, [dir="rtl"] .vd-send > svg:not(.vd-auto) { transform: scaleX(-1); }
.composer.busy .vd-mic { opacity: .45; pointer-events: none; }
.composer.busy .vd-ring, .composer.busy .vd-hand, .composer.busy .vd-steps { visibility: hidden; }

/* Dinleme kutusu: mikrofonun üstünde açılır (son mesajların üstüne biner, mikrofonun yeri değişmez) */
.vd-live {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(100% + clamp(8px, 1.4dvh, 16px)); margin: 0 auto;
  max-width: 720px; display: none; flex-direction: column; gap: 6px; padding: 10px 16px 12px; border-radius: 22px;
  background: var(--surface); border: 1.5px solid rgba(255, 59, 48, .3);
  box-shadow: 0 0 0 calc(var(--lvl, 0) * 8px) rgba(255, 59, 48, .08), 0 10px 30px rgba(0, 0, 0, .14); transition: box-shadow .08s;
}
.composer.recording .vd-live { display: flex; animation: vdLiveIn .2s ease; }
@keyframes vdLiveIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vd-status { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.vd-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--red); animation: vdBlink 1s ease-in-out infinite; }
@keyframes vdBlink { 50% { opacity: .2; } }
.composer.rec-wait .vd-dot { animation: none; opacity: .35; }
.composer.rec-wait .vd-time { visibility: hidden; }
.vd-time { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: clamp(15px, 2dvh, 19px); color: var(--text); }
.vd-wave { flex: 1; min-width: 0; height: clamp(22px, 3.2dvh, 32px); display: block; color: #55555b; }
/* Anlaşılan metin (konuşanın dilinde; yazıldıkça son satırlar görünür) */
.vd-text {
  font-size: clamp(17px, 2.5dvh, 24px); font-weight: 600; line-height: 1.35; color: var(--text); text-align: start;
  max-height: calc(3 * 1.35em); overflow: hidden; overflow-wrap: anywhere; animation: screenIn .2s ease;
}
.vd-text:empty { display: none; }
/* Yatay telefon / kısa ekran: alçak */
@media (orientation: landscape) and (max-height: 500px) { .vd { --vm: 68px; } .vd-steps { display: none; } .vd-text { max-height: calc(2 * 1.35em); } }
@media (max-height: 640px) { .vd-steps { display: none; } }
@media (prefers-reduced-motion: reduce) { .vd-ring, .vd-ring::after, .vd-hand, .vd-mic.nudge, .vd-send, .vd-dot, .vd-rdot { animation: none !important; } .vd-lvl { transition: none; } }

/* Yazma satırı (personel): dinlerken mikrofon düğmesi yeşil "Gönder" olur (kırmızı nokta + dalga kaydı gösterir) */
.composer.recording:not(.holding) .mic-btn {
  background: linear-gradient(145deg, #3ddc6a, #1fae4b);
  box-shadow: 0 0 0 calc(var(--lvl, 0) * 14px) rgba(52, 199, 89, .2), 0 6px 16px rgba(31, 174, 75, .4);
}
/* Personel / yazma satırı: kayıt şeridinde canlı ses dalgası */
.rec-overlay .rec-text { flex: 0 1 auto; }
.rec-overlay .rec-wave { flex: 1; min-width: 24px; height: 22px; color: color-mix(in srgb, var(--red) 70%, #555); }