/* ============================================================================
   SESLİ SOHBET MODU · Hayat Makkah (t-23)
   19 Eylül 2026

   Tam ekran, ChatGPT tarzı kesintisiz sesli sohbet katmanı. Çekirdek sohbet
   bileşenine (52 tenant ortak) DOKUNMAZ; üstüne ayrı bir katman olarak biner.

   Katman düzeni: sohbet paneli 8500 → sesli mod 9500 (her şeyin üstünde).
   Renkler tema jetonlarından beslenir (--vrg-altin, --gece, --keten...);
   jeton yoksa yedek değer devreye girer.
   ============================================================================ */

.ses-kat{
  position:fixed; inset:0; z-index:9500;
  display:grid; grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(217,184,124,.14) 0%, rgba(217,184,124,0) 62%),
    linear-gradient(180deg, #10150F 0%, #0B0F0E 48%, #080B0A 100%);
  color:#EDE7DB;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .42s cubic-bezier(.22,1,.36,1), visibility 0s linear .42s;
  -webkit-tap-highlight-color:transparent;
}
.ses-kat[data-acik]{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s,0s; }
.ses-kat *{ box-sizing:border-box; }

/* ---------- üst şerit ---------- */
.ses-ust{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(1rem,2.4vw,1.6rem) clamp(1rem,4vw,2.4rem);
}
.ses-marka{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.ses-marka img{ width:2.35rem; height:2.35rem; object-fit:contain; opacity:1; }
.ses-marka b{
  font-weight:600; font-size:.95rem; letter-spacing:.055em; text-transform:uppercase;
  color:#C9D0C6;
}
.ses-dgm{
  appearance:none; border:0; background:rgba(237,231,219,.07);
  color:#EDE7DB; width:2.75rem; height:2.75rem; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  transition:background .25s ease, box-shadow .25s ease, color .25s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.ses-dgm:hover{
  background:rgba(237,231,219,.13);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5), 0 24px 64px -24px rgba(0,0,0,.6);
}
.ses-dgm:focus-visible{ outline:2px solid var(--vrg-altin,#D9B87C); outline-offset:3px; }
.ses-dgm svg{ width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- sahne (küre) ---------- */
.ses-sahne{
  display:grid; place-items:center; align-content:center; gap:clamp(2.6rem,1.6rem + 2.4vw,3.4rem);
  padding:1rem clamp(1rem,5vw,3rem); min-height:0;
}

.ses-kure-sar{
  position:relative;
  width:clamp(11rem,34vw,19rem); height:clamp(11rem,34vw,19rem);
  display:grid; place-items:center;
  /* --sev: 0..1 mikrofon seviyesi (JS yazar) */
  --sev:0;
}
/* dış halkalar · yer kaplamaz, konumu değiştirmez (CLS yok) */
.ses-halka{
  position:absolute; inset:0; border-radius:999px; pointer-events:none;
  border:1px solid rgba(217,184,124,.22);
  transform:scale(calc(1 + var(--sev) * .34));
  opacity:calc(.25 + var(--sev) * .6);
  transition:transform .12s linear, opacity .18s linear;
}
.ses-halka.h2{ inset:-12%; border-color:rgba(217,184,124,.12); transform:scale(calc(1 + var(--sev) * .22)); }
.ses-halka.h3{ inset:-26%; border-color:rgba(217,184,124,.07); transform:scale(calc(1 + var(--sev) * .14)); }

.ses-kure{
  position:relative; width:64%; height:64%; border-radius:999px;
  background:
    radial-gradient(70% 70% at 34% 28%, #F6E4C2 0%, #E0BE86 38%, #B98F4E 72%, #7A5C28 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 12px 36px -10px rgba(0,0,0,.6),
    0 34px 90px -30px rgba(0,0,0,.75),
    0 0 0 1px rgba(246,228,194,.16) inset,
    0 0 70px rgba(217,184,124,.18);
  transform:scale(calc(1 + var(--sev) * .1));
  transition:transform .12s linear;
  animation:ses-nefes 5.4s ease-in-out infinite;
}
@keyframes ses-nefes{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.1) } }

/* düşünüyor: ince dönen yay */
.ses-yay{
  position:absolute; inset:-6%; border-radius:999px; pointer-events:none;
  border:2px solid transparent; border-top-color:var(--vrg-altin,#D9B87C);
  opacity:0; transition:opacity .3s ease;
  animation:ses-don 1.15s linear infinite;
}
@keyframes ses-don{ to{ transform:rotate(360deg) } }
.ses-kat[data-durum="dusunuyor"] .ses-yay{ opacity:.85; }
.ses-kat[data-durum="dusunuyor"] .ses-kure{ animation-duration:2.2s; }

/* konuşuyor: dalga çubukları */
.ses-dalga{
  position:absolute; inset-block-end:-2.2rem; inset-inline:0;
  display:flex; align-items:flex-end; justify-content:center; gap:.3rem;
  height:1.6rem; opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.ses-dalga i{
  display:block; width:.28rem; height:.32rem; border-radius:999px;
  background:var(--vrg-altin,#D9B87C); opacity:.85;
}
.ses-kat[data-durum="konusuyor"] .ses-dalga{ opacity:1; }
.ses-kat[data-durum="konusuyor"] .ses-dalga i{ animation:ses-zipla .9s ease-in-out infinite; }
.ses-dalga i:nth-child(1){ animation-delay:0s }
.ses-dalga i:nth-child(2){ animation-delay:.1s }
.ses-dalga i:nth-child(3){ animation-delay:.2s }
.ses-dalga i:nth-child(4){ animation-delay:.3s }
.ses-dalga i:nth-child(5){ animation-delay:.4s }
@keyframes ses-zipla{ 0%,100%{ height:.32rem } 50%{ height:1.5rem } }

/* ---------- durum + döküm ---------- */
.ses-bilgi{ text-align:center; max-width:46ch; display:grid; gap:.85rem; }
.ses-durum{
  margin:0; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
  color:#9BA69A; font-weight:600;
  /* dönen halka ile yazı aynı satırda ve dikey ortalı dursun */
  display:flex; align-items:center; justify-content:center; gap:.55em;
}
/* ⏳ HAZIRLANIYOR İŞARETİ · yalnız bağlantı kurulurken.
   Saf CSS — t-23'te FontAwesome yok, ikon fontu alt küme olduğu için
   yeni glif eklemek pyftsubset gerektirirdi ([[reference_t23_fontawesome_altkume]]).
   Halka satır yüksekliğinden KÜÇÜK (.85em) — görünüp kaybolurken satırı itmez. */
.ses-durum--yukleniyor::before{
  content:''; flex:none; inline-size:.85em; block-size:.85em; border-radius:50%;
  border:2px solid rgba(201,162,39,.22); border-block-start-color:#C9A227;
  animation:ses-donen .75s linear infinite;
}
@keyframes ses-donen{ to{ transform:rotate(360deg) } }
.ses-yazi{
  margin:0; min-height:3.2em;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem); line-height:1.45; color:#EDE7DB;
  transition:color .3s ease;
}
/* ✂️ Yer tutucu «Buyurun, dinliyorum…» kaldırıldı (21.09.2026): aynı cümle
   artık ÜSTTEKİ durum satırında yazıyor, iki yerde tekrar etmesin.
   min-block-size duruyor — döküm gelince satırlar aşağıyı itmesin diye yer saklı. */
.ses-kat[data-durum="dinliyor"] .ses-yazi{ color:#F3EDE1; }

/* ---------- alt kontroller ---------- */
.ses-alt{
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(.8rem,3vw,1.5rem);
  padding:clamp(1.2rem,3vw,2rem) clamp(1rem,4vw,2.4rem) clamp(1.8rem,4vw,2.6rem);
}
.ses-eylem{
  appearance:none; border:0; cursor:pointer; color:#EDE7DB;
  background:rgba(237,231,219,.07);
  min-width:3.6rem; height:3.6rem; padding-inline:0; border-radius:999px;
  display:grid; place-items:center;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:background .25s ease, box-shadow .25s ease, color .25s ease, opacity .25s ease;
}
.ses-eylem:hover{
  background:rgba(237,231,219,.13);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5), 0 24px 64px -24px rgba(0,0,0,.6);
}
.ses-eylem:focus-visible{ outline:2px solid var(--vrg-altin,#D9B87C); outline-offset:3px; }
.ses-eylem svg{ width:1.4rem; height:1.4rem; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ses-eylem[data-kapali]{ background:rgba(200,90,70,.22); color:#F2C9BE; }
.ses-eylem.ses-bitir{ background:#C5533F; color:#fff; min-width:4.3rem; height:4.3rem; }
.ses-eylem.ses-bitir:hover{ background:#B34A37; }
.ses-eylem.ses-bitir svg{ width:1.65rem; height:1.65rem; }
.ses-eylem[disabled]{ opacity:.4; cursor:default; }
.ses-eylem-et{
  display:block; margin-block-start:.5rem; font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:#98A196; text-align:center;
}
.ses-eylem-sar{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }

/* ---------- sohbetteki tetik düğmesi ---------- */
.ses-tetik{
  appearance:none; border:0; cursor:pointer;
  width:2rem; height:2rem; border-radius:999px; flex-shrink:0;
  display:grid; place-items:center;
  background:linear-gradient(140deg,#E0BE86,#B98F4E);
  color:#2A2008;
  box-shadow:0 1px 2px rgba(0,0,0,.28);
  transition:box-shadow .25s ease, filter .25s ease;
}
.ses-tetik:hover{
  filter:brightness(1.08);
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5), 0 24px 64px -24px rgba(0,0,0,.55);
}
.ses-tetik:focus-visible{ outline:2px solid var(--vrg-altin,#D9B87C); outline-offset:2px; }
.ses-tetik svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
/* Çekirdek (cekirdek-sohbet.css) `button:not([class^="bg-"])` kuralıyla arka planı
   şeffafa çekiyor. Düğmeye eklenen `bg-ses-tetik` sınıfı o kuralın kendi kaçış
   kapısı · bu blok yalnızca görünümü tanımlar, ezme (!important) gerekmez. */

/* ---------- uyarı şeridi (tarayıcı desteklemiyorsa) ---------- */
.ses-uyari{
  position:absolute; inset-inline:0; inset-block-start:4.6rem;
  margin-inline:auto; width:min(92%,34rem);
  background:rgba(197,83,63,.16); color:#F2C9BE;
  padding:.8rem 1rem; border-radius:.875rem; text-align:center; font-size:.9rem;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
}

/* ---------- mobil ---------- */
@media (max-width:480px){
  .ses-bilgi{ max-width:90vw; }
  .ses-alt{ gap:1rem; }
}

/* ---------- hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  .ses-kure,.ses-yay,.ses-dalga i{ animation:none !important; }
  /* halka dönmesin ama GÖRÜNSÜN — bekleme işaretinin kendisi bilgi taşır */
  .ses-durum--yukleniyor::before{ animation:none !important; }
  .ses-kat{ transition:none; }
}