/* ============================================================
   SESLİ MOD — SOHBET İÇİ DÜZEN (2026-10-14; 10-13'teki tam ekran katman kaldırıldı).
   Mesaj listesi görünür kalır. Giriş çubuğunun ÜSTÜNDE küçük küre + durum metni (.vc-dock), giriş çubuğunda
   "+" ve yazı alanı aynen; sağda mikrofon kapat/aç ve bitir. body.vc-on yalnız sesli mod açıkken.
   Küre bizim görselimiz: turkuaz tonlarında hareketli gradyan, ana renk tema rengi (--accent).
   Kütüphane yok; prefers-reduced-motion'da hareket kapanır. Çıplak vw/vh YOK (--vh, --app-h).
   ============================================================ */
#voiceBtn[hidden]{ display:none !important; }

/* ---- giriş çubuğu sesli moddayken ---- */
.vc-mic, .vc-end{ display:none; }
body.vc-on .vc-mic, body.vc-on .vc-end{ display:inline-flex; }
body.vc-on #voiceBtn, body.vc-on #micBtn, body.vc-on .model-pick, body.vc-on #suggArea, body.vc-on .quick-row{ display:none !important; }
/* Ana ekrandan açılınca da sohbet düzeni: çubuk altta, mesaj alanı esner, büyük wordmark yok. */
body.vc-on .main.home{ justify-content:flex-start; }
body.vc-on .main.home .chat-scroll{ flex:1 1 auto; }
body.vc-on .hero-home{ display:none; }
/* Dokunma hedefleri en az 44 px. */
body.vc-on .composer-row .plus-btn, body.vc-on #sendBtn, .vc-mic, .vc-end{ min-width:44px; min-height:44px; }
.vc-mic{ width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; }
.vc-mic.kapali{ color:var(--text); background:var(--bg-active); }
.vc-end{
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; align-items:center; justify-content:center;
  /* "beyaz dolgulu" bitir: koyu temada açık dolgu, açık temada koyu dolgu (her temada yeterli kontrast) */
  background:var(--text); color:var(--bg-input); transition:transform .1s, opacity .15s;
}
.vc-end:hover{ opacity:.88; }
.vc-end:active{ transform:scale(.95); }
.vc-mic:focus-visible, .vc-end:focus-visible, .vc-ic:focus-visible, .vc-panel button:focus-visible, .vc-set select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---- küre sahnesi (giriş çubuğunun üstünde, sohbet sütunu genişliğinde ve ortalı) ---- */
.vc-dock{
  --vc-kure:clamp(84px, calc(var(--vh, 1vh) * 14), 128px);
  max-width:var(--chat-w, 768px); margin:0 auto 10px; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.vc-dock[hidden]{ display:none; }
/* Dikey boşluk = kürenin en çok büyüme payı (voice.js VC_KURE_PAY = %12 → her yanda %6) + parıltı: şişen küre durum
   metnine ve mesajlara binmez. */
.vc-sahne{ position:relative; display:flex; justify-content:center; padding:calc(var(--vc-kure) * .06 + 10px) 0; }
.vc-orb-box{ position:relative; border-radius:50%; min-width:44px; min-height:44px; outline:none; }
/* Küreye dokunarak bitirme (2026-10-14): yalnız konuşma algılanınca etkin; odak halkası yuvarlak. */
.vc-orb-box[aria-disabled="false"]{ cursor:pointer; }
.vc-orb-box:focus-visible{ box-shadow:0 0 0 3px var(--bg-main, #000), 0 0 0 5px var(--accent); }
.vc-ipucu{ min-height:1.2em; font-size:12px; color:var(--text-muted); text-align:center; max-width:340px; }
.vc-ipucu:empty{ min-height:0; }
.vc-set-btn{ position:absolute; left:calc(50% + var(--vc-kure) / 2 + 12px); top:50%; transform:translateY(-50%); }
.vc-ic{
  width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.vc-ic:hover{ background:var(--bg-active); color:var(--text); }

/* Dış parıltı SARMALAYICIDA (yuvarlak): küre clip-path ile kırpıldığı için kendi gölgesi de kırpılırdı. */
.vc-orb-wrap{
  transform:scale(var(--orb-s, 1)); transition:transform .09s linear, filter .4s, opacity .4s; will-change:transform;
  border-radius:50%; box-shadow:0 0 34px color-mix(in srgb, var(--effmax-b, #00D8FF) 30%, transparent);
}
.vc-orb{
  width:var(--vc-kure); aspect-ratio:1; border-radius:50%;
  position:relative; overflow:hidden; isolation:isolate;
  /* iOS SAFARİ (2026-10-13, "küre kare görünüyor"): animasyonlu + filtreli (::before) ve karışım modlu (::after)
     katmanlar ayrı birleştirme katmanına geçince overflow:hidden + border-radius kırpması onlara UYGULANMIYOR;
     bulanık konik katman (inset:-38%) kare olarak taşıyordu. clip-path katmanın TAMAMINI maskeler
     (bkz. scripts/browser/orb_clip_test.py ve voice_inline_test.py köşe pikseli denetimi). */
  -webkit-clip-path:circle(50%); clip-path:circle(50%);
  /* RENKLER: Maksimum kademe paleti (style.css --effmax-a/b/c, 2026-10-17) — effort seçiciyle aynı aile */
  background:radial-gradient(120% 120% at 30% 25%,
              color-mix(in srgb, var(--effmax-c, #5CF2E4) 35%, #ffffff) 0%, var(--effmax-b, #00D8FF) 40%,
              color-mix(in srgb, var(--effmax-a, #008FAD) 70%, #04252e) 100%);
  transition:width .2s ease;
}
.vc-orb::before{
  content:""; position:absolute; inset:-38%;
  background:conic-gradient(from var(--orb-aci, 0deg), var(--effmax-a, #008FAD), var(--effmax-c, #5CF2E4), var(--effmax-b, #00D8FF), var(--effmax-c, #5CF2E4),
             var(--effmax-a, #008FAD), var(--effmax-b, #00D8FF), var(--effmax-a, #008FAD));
  filter:blur(14px); opacity:.92; animation:vcSpin 10s linear infinite;
}
.vc-orb::after{
  content:""; position:absolute; inset:-22%;
  background:
    radial-gradient(38% 34% at 30% 30%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(46% 40% at 72% 70%, color-mix(in srgb, var(--effmax-a, #008FAD) 70%, #04252e), transparent 72%),
    radial-gradient(30% 28% at 60% 25%, var(--effmax-c, #5CF2E4), transparent 70%);
  mix-blend-mode:soft-light; animation:vcDrift 7s ease-in-out infinite alternate;
}
.vc-halo{
  position:absolute; inset:-6px; border-radius:50%; opacity:0; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 70%, var(--effmax-b, #00D8FF) 85%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  transition:opacity .3s;
}
@keyframes vcSpin{ to{ transform:rotate(360deg); } }
@keyframes vcDrift{ 0%{ transform:translate(-7%,-5%) scale(1); } 100%{ transform:translate(7%,6%) scale(1.14); } }
@keyframes vcBreath{ 0%,100%{ transform:scale(.94); } 50%{ transform:scale(1.03); } }
/* durumlar: boşta (bağlanıyor), dinliyor (ses seviyesi JS'te --orb-s), düşünüyor, konuşuyor, mikrofon kapalı, hata */
.vc-dock[data-s="baglaniyor"] .vc-orb-wrap{ opacity:.5; filter:saturate(.55); }
.vc-dock[data-s="dinliyor"] .vc-orb::before{ animation-duration:8s; }
.vc-dock[data-s="dusunuyor"] .vc-orb{ animation:vcBreath 1.5s ease-in-out infinite; }
.vc-dock[data-s="dusunuyor"] .vc-orb::before{ animation-duration:2.6s; }
.vc-dock[data-s="dusunuyor"] .vc-halo{ opacity:1; animation:vcSpin 1.1s linear infinite; }
.vc-dock[data-s="konusuyor"] .vc-orb::before{ animation-duration:4.5s; }
.vc-dock[data-s="mikkapali"] .vc-orb-wrap{ opacity:.45; filter:saturate(.4); }
.vc-dock[data-s="hata"] .vc-orb-wrap, .vc-dock[data-s="izin"] .vc-orb-wrap{ filter:grayscale(1) brightness(.6); }
.vc-dock[data-s="hata"] .vc-orb::before, .vc-dock[data-s="izin"] .vc-orb::before,
.vc-dock[data-s="hata"] .vc-orb::after, .vc-dock[data-s="izin"] .vc-orb::after{ animation-play-state:paused; }

/* Durum metni küçük ve sakin */
.vc-status{ min-height:1.3em; font-size:13px; color:var(--text-muted); text-align:center; }
.vc-warn{ font-size:13px; color:var(--text); text-align:center; max-width:420px; opacity:.9; }
.vc-warn:empty{ display:none; }

/* ---- karşılama / hata kartı: sahnenin YERİNDE ---- */
.vc-dock.panel-on .vc-sahne, .vc-dock.panel-on .vc-status{ display:none; }
.vc-panel{ display:none; width:100%; }
.vc-panel.on{ display:block; }
.vc-panel-in{
  width:100%; max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:14px;
  background:var(--bg-input); border:1px solid var(--border-input); border-radius:18px; padding:16px;
  max-height:calc(var(--app-h, 100dvh) * .5); overflow:auto;
}
.vc-panel h2{ margin:0; font-size:18px; font-weight:600; }
.vc-panel p{ margin:0; color:var(--text-muted); line-height:1.5; }
.vc-panel ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.vc-panel li{ display:flex; gap:12px; align-items:flex-start; line-height:1.45; }
.vc-panel li b{ display:block; font-weight:600; }
.vc-panel li span{ color:var(--text-muted); font-size:14px; }
.vc-panel li svg{ flex:none; margin-top:2px; color:var(--accent); }
.vc-panel button{
  border:0; border-radius:999px; padding:12px 18px; min-height:44px; font:inherit; font-weight:600; cursor:pointer;
  background:var(--text); color:var(--bg-input);
}
.vc-panel button.ikincil{ background:var(--bg-active); color:var(--text); }
.vc-acts{ display:flex; flex-direction:column; gap:10px; }

/* ---- ayarlar (küre yanındaki küçük düğme; kart sahnenin üstüne açılır) ---- */
.vc-set{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:5;
  width:min(300px, calc(var(--vw, 1vw) * 100 - 32px));
  background:var(--bg-input); border:1px solid var(--border-input); border-radius:14px; padding:14px;
  display:none; flex-direction:column; gap:12px; box-shadow:0 10px 34px rgba(0,0,0,.25); color:var(--text);
}
.vc-set.on{ display:flex; }
.vc-set label{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.vc-set label.yatay{ flex-direction:row; align-items:center; gap:10px; min-height:44px; }
.vc-set select{ font:inherit; padding:8px; min-height:44px; border-radius:8px; border:1px solid var(--border-input); background:var(--bg-main); color:var(--text); }
.vc-set-not{ font-size:12px; color:var(--text-muted); line-height:1.35; }
/* kalabalık ortam ipucu (tek sefer, kapatılabilir) */
.vc-not{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); text-align:left; max-width:420px;
         padding:8px 10px; border-radius:12px; background:var(--bg-hover, rgba(127,127,127,.12)); }
.vc-not[hidden]{ display:none; }
.vc-not button{ flex:none; font:inherit; min-height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--border-input);
                background:var(--bg-main); color:var(--text); cursor:pointer; }
/* bas-konuş: basılıyken küre etkin görünür */
.vc-dock.ptt .vc-orb-box{ cursor:pointer; touch-action:none; -webkit-user-select:none; user-select:none; }
.vc-dock.ptt-basili .vc-orb-wrap{ transform:scale(1.06); }

/* ---- transkript: söylenen yazıya dökülürken üç noktalı yer tutucu balon ---- */
.vc-ph .vc-noktalar{ display:inline-flex; gap:5px; align-items:center; min-height:22px; }
.vc-ph .vc-noktalar span{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.35; animation:vcNokta 1.2s infinite; }
.vc-ph .vc-noktalar span:nth-child(2){ animation-delay:.2s; }
.vc-ph .vc-noktalar span:nth-child(3){ animation-delay:.4s; }
@keyframes vcNokta{ 0%,100%{ opacity:.25; } 50%{ opacity:.9; } }

/* ---- ekran klavyesi açıkken (app.js body.kb-open): küre küçülür, mesajlar ve giriş alanı görünür kalır ---- */
body.vc-on.kb-open .vc-dock{ --vc-kure:44px; flex-direction:row; justify-content:center; gap:10px; margin-bottom:6px; }
body.vc-on.kb-open .vc-sahne{ padding:0; }
body.vc-on.kb-open .vc-set-btn, body.vc-on.kb-open .vc-warn{ display:none; }
body.vc-on.kb-open .vc-orb-wrap{ box-shadow:none; }

/* ---- GİRİŞ GEÇİŞİ (2026-10-14): sesli moda girerken küre sahnesi ve düğmeler yumuşakça belirir.
   Yalnız opaklık + birkaç piksellik kayma; parıltı/ışıma yok. ---- */
@keyframes vcBelir{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes vcSolar{ from{ opacity:0; } to{ opacity:1; } }
body.vc-on .vc-dock:not([hidden]){ animation:vcBelir .32s cubic-bezier(.2,.7,.2,1); }
body.vc-on .vc-mic, body.vc-on .vc-end, body.vc-on .vc-kam-btn{ animation:vcSolar .28s ease-out; }

/* ============================================================
   KAMERA (2026-10-14): görüntü sohbet görünümünün TAM ARKA PLANI, arayüz buzlu cam zeminde üstünde.
   body.vc-kamera yalnız kamera açıkken. Görüntü .main'in içinde z-index:-1 (isolation ile .main'in kendi
   zemininin üstünde, tüm içeriğin altında). Buzlu cam yalnız arayüz öğelerinin arkasında; kameranın büyük kısmı
   açıkta. Mesaj alanı en çok görünümün --vc-kam-mesaj kadarı (varsayılan %45), kaydırılabilir.
   Desteklenmeyen tarayıcıda ve saydamlık azaltmada daha opak yedek zemin.
   ============================================================ */
:root{
  --vc-cam:rgba(28,28,30,.72); --vc-cam-kenar:rgba(255,255,255,.14); --vc-cam-yedek:rgba(28,28,30,.94);
  --vc-cam-blur:blur(18px) saturate(1.15);
  --vc-kam-oran:.78;                  /* kamera açıkken küre bu orana küçülür (öneri %75-80) */
  --vc-kam-mesaj:.45;                 /* mesaj alanının en çok yüksekliği (görünümün oranı) */
}
body.light{ --vc-cam:rgba(255,255,255,.76); --vc-cam-kenar:rgba(0,0,0,.10); --vc-cam-yedek:rgba(255,255,255,.95); }
.vc-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* düğmeler: kamera mikrofonun solunda, çevir yalnız kamera açıkken */
.vc-kam-btn, .vc-cevir{ display:none; }
body.vc-on .vc-kam-btn{ display:inline-flex; }
body.vc-on.vc-kamera .vc-cevir{ display:inline-flex; animation:vcSolar .25s ease-out; }
.vc-kam-btn, .vc-cevir{
  width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%; align-items:center; justify-content:center;
}
.vc-kam-btn.acik{ background:var(--text); color:var(--bg-input); }
.vc-kam-btn.pasif{ opacity:.45; cursor:not-allowed; }
.vc-kam-btn:focus-visible, .vc-cevir:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* arka plan görüntüsü */
body.vc-kamera .main{ isolation:isolate; }
.vc-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; pointer-events:none;
  opacity:0; transform:scale(1.03); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.vc-video.on{ opacity:1; transform:none; }
.vc-video.ayna{ transform:scaleX(-1) scale(1.03); }
.vc-video.ayna.on{ transform:scaleX(-1); }

/* buzlu cam yüzeyler (geçiş: zemin ve kenar rengi yumuşakça değişir) */
body.vc-on .composer, body.vc-on .vc-dock, body.vc-on .chat-scroll, body.vc-on .topbar .chat-title, body.vc-on .topbar-share, body.vc-on .scroll-down{
  transition:background-color .4s ease, border-color .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
body.vc-kamera .composer,
body.vc-kamera .topbar .chat-title,
body.vc-kamera .topbar-share,
body.vc-kamera .scroll-down,
body.vc-kamera #chatCol .user-msg,
body.vc-kamera #chatCol .assistant,
.vc-kam-gosterge{
  background:var(--vc-cam); border:1px solid var(--vc-cam-kenar);
  -webkit-backdrop-filter:var(--vc-cam-blur); backdrop-filter:var(--vc-cam-blur);
}
body.vc-kamera .composer{ box-shadow:0 4px 18px rgba(0,0,0,.18); }
body.vc-kamera .main{ background:transparent; }

/* KAMERALI DÜZEN (2026-10-15; 10-14'teki "küre üstte" sırası güncellendi): üst kontroller → kamera görüntüsü (boş) →
   geçici balonlar → küre → durum → giriş çubuğu → güvenli alan payı. Küre sahnesi kamerasız yerinde (giriş çubuğunun
   hemen üstü, aynı kap) kalır; kalıcı mesaj listesi kamera açıkken GÖRÜNMEZ ama yer kaplar (flex:1) → küre altta sabit.
   Küre konumu mesaj sayısına/balonlara/durum metnine bağlı DEĞİL: balonlar kürenin ÜSTÜNDE akışta (kap alttan sabit,
   balonlar yukarı doğru büyür), durum bölgesi sabit yükseklikte (iki satır + ipucu payı). Kürede KART/zemin yok. */
body.vc-on.vc-kamera .main .chat-scroll, body.vc-on.vc-kamera .main.home .chat-scroll{ flex:1 1 auto; visibility:hidden; }
/* YAZILI TUR (kamera açıkken yazılan mesaj, cevabı sesli okunmaz): liste o turda görünür — balonlar camda, üst kenar
   soluk; sonraki konuşulan turda yine gizlenir (voice.js vc-yazili). Küre yine altta, yeri değişmez. */
body.vc-on.vc-kamera.vc-yazili .main .chat-scroll, body.vc-on.vc-kamera.vc-yazili .main.home .chat-scroll{
  visibility:visible; background:transparent; border:0; -webkit-backdrop-filter:none; backdrop-filter:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22px); mask-image:linear-gradient(to bottom, transparent 0, #000 22px);
}
body.vc-kamera .chat-col{ padding:18px 4px 8px; }
body.vc-kamera #chatCol .user-msg{ color:var(--text); }
body.vc-kamera #chatCol .assistant{ width:fit-content; max-width:100%; padding:10px 14px; border-radius:16px; margin-top:6px; }
body.vc-kamera #chatCol .assistant:empty{ display:none; }
body.vc-kamera #chatCol .actions{ width:fit-content; margin-top:4px; padding:0 4px; border-radius:999px; background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
body.vc-kamera #chatCol .actions .icon-btn{ color:#fff; }
body.vc-kamera .scroll-down{ display:none !important; }
body.vc-kamera .composer-wrap{ position:static; }      /* ayar düğmesi ve menüsü .main'e göre sol üstte kalsın */
/* Ana ekran ile sohbet arasında alt pay ve dipnot farkı yok: ilk mesajda küre zıplamaz; güvenli alan payı korunur. */
body.vc-on.vc-kamera .main .composer-wrap, body.vc-on.vc-kamera .main.home .composer-wrap{ padding-bottom:max(12px, env(safe-area-inset-bottom, 0px)); }
/* dipnot kamerada kapanır — ani değil, küre/durum geçişiyle aynı eğride (giriş çubuğu ve küre sıçramasın) */
body.vc-on .footer-note{ max-height:120px; overflow:hidden; transition:max-height .35s cubic-bezier(.2,.7,.2,1), padding .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
body.vc-on.vc-kamera .footer-note{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; }
body.vc-kamera .topbar .chat-title{ border-radius:999px; }
body.vc-kamera .vc-dock{
  --vc-kure:calc(clamp(84px, calc(var(--vh, 1vh) * 14), 128px) * var(--vc-kam-oran));
  flex:none; margin:0 auto 8px; padding:0; width:100%; max-width:768px;
  background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* yalnız opaklıkla belir (transform, ayar düğmesinin konum kabını değiştirirdi) */
body.vc-on.vc-kamera .vc-dock:not([hidden]){ animation:vcSolar .3s ease-out; }
body.vc-kamera .vc-dock .vc-orb-wrap{ box-shadow:none; }
body.vc-kamera .vc-dock .vc-halo{ display:none; }                 /* kürenin çevresinde hiçbir şey yok */
/* durum bölgesi: küre ile giriş çubuğu arasında, SABİT yükseklik (iki satırlık hata/ipucu sığar, küre zıplamaz).
   Uyarı varken durum ve ipucu gizlenir (uyarı en çok üç satır). Kamerasızda bölge yalnız sarmalayıcı (düzen aynı). */
.vc-metin{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; min-height:0; transition:min-height .35s cubic-bezier(.2,.7,.2,1); }
body.vc-kamera .vc-metin{ min-height:70px; justify-content:flex-start; }
body.vc-kamera .vc-metin:has(.vc-warn:not(:empty)) .vc-status,
body.vc-kamera .vc-metin:has(.vc-warn:not(:empty)) .vc-ipucu{ display:none; }
body.vc-kamera .vc-warn{ max-width:min(420px, calc(100% - 24px)); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
body.vc-kamera .vc-warn:empty{ display:none; }
/* durum metni (ve ipucu/uyarı): beyaz, yalnız metne oturan küçük koyu hap (gölge parlak görüntüde yetmez) */
body.vc-kamera .vc-status:not(:empty), body.vc-kamera .vc-ipucu:not(:empty), body.vc-kamera .vc-warn:not(:empty){
  color:#fff; background:rgba(0,0,0,.62); border-radius:999px; padding:3px 11px;
  text-shadow:0 1px 2px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
body.vc-kamera .vc-warn:not(:empty){ border-radius:14px; }
body.vc-kamera .vc-sahne{ position:static; padding:calc(var(--vc-kure) * .06 + 4px) 0 calc(var(--vc-kure) * .06 + 4px); }
body.vc-kamera .vc-orb-box{ position:relative; }
/* ayar ikonu: sol üst köşe grubunda, kenar çubuğu düğmesinin sağında; koyu cam yuvarlak, 44 px; menü altına açılır */
body.vc-kamera .vc-set-btn{
  position:absolute; z-index:4; top:calc(env(safe-area-inset-top, 0px) + 7px); left:12px; transform:none;
  background:rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:none;
}
body.vc-kamera.sb-closed .vc-set-btn{ left:54px; }                /* kenar çubuğu düğmesi (12 + 34 px) + 8 px */
body.vc-kamera .vc-set-btn:hover{ background:rgba(0,0,0,.6); color:#fff; }
body.vc-kamera .vc-set{
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 57px); bottom:auto; left:12px; transform:none; z-index:5;
}
body.vc-kamera.sb-closed .vc-set{ left:min(54px, calc(var(--vw, 1vw) * 100 - 16px - min(300px, calc(var(--vw, 1vw) * 100 - 32px)))); }
body.vc-kamera .topbar{ padding-left:68px; }
body.vc-kamera.sb-closed .topbar{ padding-left:110px; }
/* GEÇİCİ TRANSKRİPT: büyük kap yok; her söz/cümle kendi küçük cam balonunda, kürenin hemen üstünde, ortalı.
   Dokunmayı engellemez (pointer-events:none); süre/sayı voice.js VC_GECICI_*. Kamerasızda hiç görünmez. */
.vc-gecici{ display:none; }
body.vc-kamera .vc-gecici{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; width:min(768px, calc(100% - 24px));
  margin:0 auto; pointer-events:none;
  /* küçük ekranda balonlar kameranın en çok %32'si; taşan (en eski) üstten kırpılır, küre yerinden oynamaz */
  max-height:calc(var(--app-h, 100dvh) * .32); overflow:hidden;
}
.vc-gecici-b{
  max-width:100%; padding:8px 13px; border-radius:16px; font-size:15px; line-height:1.4; color:var(--text);
  background:var(--vc-cam); border:1px solid var(--vc-cam-kenar);
  -webkit-backdrop-filter:var(--vc-cam-blur); backdrop-filter:var(--vc-cam-blur);
  pointer-events:none; overflow-wrap:anywhere; animation:vcBelir .25s ease-out; transition:opacity .4s ease;
}
.vc-gecici-b.sol{ opacity:0; }
.vc-orb{ transition:width .35s cubic-bezier(.2,.7,.2,1); }
.vc-set-btn{ transition:left .35s cubic-bezier(.2,.7,.2,1); }
/* ekran klavyesi açıkken: küre küçülür, yalnız son balon görünür, durum gizli, giriş alanı görünür */
body.vc-on.kb-open.vc-kamera .vc-dock{ --vc-kure:44px; flex-direction:column; }
body.vc-on.kb-open.vc-kamera .vc-dock .vc-status{ display:none; }
body.vc-on.kb-open.vc-kamera .vc-metin{ min-height:0; }
body.vc-on.kb-open.vc-kamera .vc-gecici-b:not(:last-child){ display:none; }

/* kamera açık göstergesi: kalıcı küçük kırmızı nokta + yazı, camda */
.vc-kam-gosterge{
  position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  top:calc(env(safe-area-inset-top, 0px) + 58px);
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--text); pointer-events:none;
  animation:vcSolar .3s ease-out;
}
.vc-kam-gosterge .nokta{ width:8px; height:8px; border-radius:50%; background:#e5484d; flex:none; }
.vc-kam-gosterge.kapali{ background:none; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
body.vc-on .main.home .vc-kam-gosterge{ top:calc(env(safe-area-inset-top, 0px) + 14px); }

/* saydamlık azaltma ve buzlu cam desteklenmiyorsa: daha opak yedek zemin */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body.vc-kamera .composer, body.vc-kamera #chatCol .user-msg, body.vc-kamera #chatCol .assistant,
  body.vc-kamera .topbar .chat-title, body.vc-kamera .topbar-share, body.vc-kamera .scroll-down, .vc-kam-gosterge, .vc-gecici-b{
    background:var(--vc-cam-yedek);
  }
}
@media (prefers-reduced-transparency: reduce){
  body.vc-kamera .composer, body.vc-kamera #chatCol .user-msg, body.vc-kamera #chatCol .assistant,
  body.vc-kamera .topbar .chat-title, body.vc-kamera .topbar-share, body.vc-kamera .scroll-down, .vc-kam-gosterge, .vc-gecici-b{
    background:var(--vc-cam-yedek); -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .vc-orb, .vc-orb::before, .vc-orb::after, .vc-halo, .vc-ph .vc-noktalar span{ animation:none !important; }
  .vc-orb-wrap{ transform:none !important; transition:none; }
  .vc-orb, .vc-set-btn{ transition:none; }
  .vc-dock[data-s="dusunuyor"] .vc-halo{ opacity:.8; }
  body.vc-on .vc-dock:not([hidden]), body.vc-on.vc-kamera .vc-dock:not([hidden]), body.vc-on .vc-mic, body.vc-on .vc-end, body.vc-on .vc-kam-btn,
  body.vc-on.vc-kamera .vc-cevir, .vc-kam-gosterge{ animation:none; }
  .vc-video{ transition:none; transform:none; }
  .vc-gecici-b{ animation:none; transition:none; }
  .vc-metin, body.vc-on .footer-note{ transition:none; }
  .vc-video.ayna{ transform:scaleX(-1); }
  body.vc-on .composer, body.vc-on .vc-dock, body.vc-on .chat-scroll, body.vc-on .topbar .chat-title, body.vc-on .topbar-share, body.vc-on .scroll-down{ transition:none; }
}

/* KAMERA TEŞHİS KİPİ (yalnız ?kamera_teshis=1; normal kullanıcıda öğe hiç yok). Küçük, sol üstte, salt bilgi. */
.vc-teshis{
  position:fixed; left:8px; top:calc(env(safe-area-inset-top, 0px) + 60px); z-index:60;
  max-width:calc(100% - 16px); padding:8px 10px; border-radius:10px;
  background:rgba(0,0,0,.78); color:#fff; font:12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vc-teshis span{ color:#aab; }
.vc-teshis a, .vc-teshis button{ color:#9cf; background:none; border:0; padding:4px 0; font:inherit; text-decoration:underline; cursor:pointer; }

/* ============================================================
   AYARLAR > SES SEÇİCİ (2026-10-17): sesli moddaki AYNI küre (.vc-orb-wrap/.vc-orb), büyük; yer tutucularda yalnız
   renk tonu kayar (hue-rotate) ve soluk. Çıplak vw yok; 320 px'te taşmaz (oklar 44 px, küre 128 px).
   ============================================================ */
.ses-secici{
  --vc-kure:128px;
  display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:8px; padding:18px 8px 12px;
  border:1px solid var(--border); border-radius:14px; min-width:0;
}
.ses-vitrin{ display:flex; align-items:center; justify-content:center; gap:16px; width:100%; touch-action:pan-y; }
.ses-ok{
  flex:none; width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.ses-ok:hover:not(:disabled){ background:var(--bg-active); color:var(--text); }
.ses-ok:disabled{ opacity:.3; cursor:default; }
.ses-kure{ flex:none; border:0; padding:8px; background:transparent; border-radius:50%; cursor:pointer; }
.ses-kure .vc-orb-wrap, .ses-kure .vc-orb{ display:block; }
.ses-kure.yer{ cursor:not-allowed; }
.ses-kure.yer .vc-orb-wrap{ opacity:.6; filter:saturate(.7); }
.ses-ok:focus-visible, .ses-kure:focus-visible, .ses-n:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.ses-ad{ margin-top:6px; display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--text); }
.ses-acik{ max-width:100%; font-size:13px; color:var(--text-muted); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ses-noktalar{ display:flex; gap:2px; margin-top:6px; }
.ses-n{ width:24px; height:24px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.ses-n::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--border-input); }
.ses-n.on::before{ background:var(--text); }
/* dar ekran (≤ 360 px): ayarlar içeriği ~244 px — küre biraz küçülür, oklar 44 px kalır */
@media (max-width: 360px){
  .ses-secici{ --vc-kure:112px; padding-left:4px; padding-right:4px; }
  .ses-vitrin{ gap:4px; }
}