/* ═══════════════════════════════════════════════════════════════════
   SOHBET PENCERESİ · shb
   -------------------------------------------------------------------
   Kalıp: sağ altta orb, açılınca panel. Ölçüler ve renkler sitenin
   token'larından; gölge yok, fiziksel yön yok, ikonlar inline SVG.
   Dar ekranda panel tam ekrana geçer — mesaj alanı kaydırılır,
   giriş satırı altta sabit kalır.
   ═════════════════════════════════════════════════════════════════ */

.shb{ position:fixed; inset-block-end:1.15rem; inset-inline-end:1.15rem; z-index:8500; }

/* ── orb ── */
.shb-orb{
  position:relative; display:grid; place-items:center; cursor:pointer;
  inline-size:3.5rem; block-size:3.5rem; border-radius:var(--yr-tam);
  color:var(--z1); background:var(--mrk); border:1px solid var(--mrk);
  transition:background var(--mikro) var(--egri), color var(--mikro) var(--egri);
}
.shb-orb:hover{ background:var(--aksan); border-color:var(--aksan); }
.shb-orb:focus-visible{ outline:2px solid var(--aksan); outline-offset:3px; }
.shb-orb-ic svg{ inline-size:1.45rem; block-size:1.45rem; }
.shb-nokta{
  position:absolute; inset-block-start:.15rem; inset-inline-end:.15rem;
  inline-size:.6rem; block-size:.6rem; border-radius:var(--yr-tam);
  background:var(--toprak-mtn); border:2px solid var(--z1);
}
.shb[data-acik] .shb-orb{ opacity:0; pointer-events:none; }

/* ── panel ── */
.shb-panel{
  position:absolute; inset-block-end:0; inset-inline-end:0;
  inline-size:min(23.5rem, calc(100vw - 2.3rem));
  block-size:min(33rem, calc(100dvh - 8rem));
  display:grid; grid-template-rows:auto 1fr auto auto;
  background:var(--z1); border:1px solid var(--cizgi2); border-radius:var(--yr-l);
  overflow:clip; color:var(--mrk);
  opacity:0; transform:translateY(10px) scale(.98); transform-origin:100% 100%;
  transition:opacity .2s var(--egri), transform .2s var(--egri);
}
[dir="rtl"] .shb-panel{ transform-origin:0 100%; }
.shb-panel[data-acik]{ opacity:1; transform:translateY(0) scale(1); }

/* `hidden` NİTELİĞİ display:grid'i YENEMEZ. Tarayıcının [hidden]{display:none}
   kuralı düşük özgüllüklü bir varsayılandır; öğeye yazılan her display onu
   ezer. Sonuç: panel kapalıyken de yerleşimde duruyor ve GÖRÜNMEZ hâlde
   sayfanın sağ alt köşesinde ~376×528 px'lik alanı kaplayıp tıklamaları
   yutuyordu (ölçüldü: siluetin sağ yarısında imleç panele düşüyor,
   elementFromPoint 'shb-akis' diyor). Açıkça gizlenmesi gerekiyor.

   Kapanış animasyonu 220 ms sürüyor ve o sırada `hidden` henüz konmuyor;
   pointer-events o aralığı da kapatır. */
.shb-panel[hidden]{ display:none; }
.shb-panel:not([data-acik]){ pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .shb-panel{ transition:none; transform:none; } }

/* ── başlık ── */
.shb-bas{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem;
  padding:.85rem 1rem; border-block-end:1px solid var(--cizgi2); background:var(--z2);
}
.shb-rozet{
  inline-size:2.1rem; block-size:2.1rem; border-radius:var(--yr-tam);
  display:grid; place-items:center; background:var(--z1); color:var(--toprak-mtn);
  border:1px solid var(--cizgi);
}
.shb-rozet svg{ inline-size:1.15rem; block-size:1.15rem; }
.shb-bas-yzi{ display:grid; gap:.1rem; min-inline-size:0; }
.shb-ad{ font-size:var(--yz-gvd); font-weight:700; letter-spacing:-.015em; }
.shb-durum{
  font-size:var(--yz-etk); color:var(--mrk3);
  display:inline-flex; align-items:center; gap:.35rem;
}
.shb-durum::before{
  content:""; inline-size:.4rem; block-size:.4rem; border-radius:var(--yr-tam);
  background:var(--aksan); flex:none;
}
.shb-kapat{
  inline-size:1.9rem; block-size:1.9rem; border-radius:var(--yr-tam); cursor:pointer;
  display:grid; place-items:center; color:var(--mrk2);
  background:transparent; border:1px solid var(--cizgi2);
}
.shb-kapat:hover{ color:var(--mrk); background:var(--z1); }
.shb-kapat svg{ inline-size:.85rem; block-size:.85rem; }

/* ── akış ── */
.shb-akis{
  overflow-y:auto; overscroll-behavior:contain;
  padding:.9rem 1rem; display:grid; gap:.6rem; align-content:start;
  font-size:var(--yz-kck); line-height:var(--sy-gvd);
}
.shb-balon{
  max-inline-size:85%; padding:.6rem .8rem; border-radius:var(--yr-m);
  background:var(--z2); color:var(--mrk); justify-self:start;
  border-start-start-radius:var(--yr-s);
}
.shb-balon[data-kim="ben"]{
  justify-self:end; background:var(--mrk); color:var(--z1);
  border-start-start-radius:var(--yr-m); border-start-end-radius:var(--yr-s);
}
.shb-balon p{ margin:0; }
.shb-balon p + p{ margin-block-start:.4rem; }
.shb-dusun{ display:inline-flex; gap:.25rem; align-items:center; }
.shb-dusun i{
  inline-size:.35rem; block-size:.35rem; border-radius:var(--yr-tam);
  background:var(--mrk3); animation:shb-zipla 1.1s infinite;
}
.shb-dusun i:nth-child(2){ animation-delay:.15s }
.shb-dusun i:nth-child(3){ animation-delay:.3s }
@keyframes shb-zipla{ 0%,60%,100%{opacity:.3} 30%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .shb-dusun i{ animation:none; opacity:.6 } }

/* ── hızlı sorular ── */
.shb-hizli{
  display:flex; flex-wrap:wrap; gap:.35rem;
  padding:0 1rem .7rem; border-block-end:1px solid var(--cizgi2);
}
.shb-hizli button{
  font-size:var(--yz-etk); padding:.35rem .65rem; border-radius:var(--yr-tam);
  cursor:pointer; color:var(--mrk2); background:transparent; border:1px solid var(--cizgi);
  transition:color var(--mikro) var(--egri), background var(--mikro) var(--egri);
}
.shb-hizli button:hover{ color:var(--mrk); background:var(--z2); }

/* ── giriş ── */
.shb-giris{
  display:grid; grid-template-columns:1fr auto auto; gap:.4rem; align-items:center;
  padding:.7rem .8rem; background:var(--z2);
  padding-block-end:max(.7rem, env(safe-area-inset-bottom));
}
.shb-alan{
  inline-size:100%; min-block-size:2.5rem; padding-inline:.85rem;
  background:var(--z1); border:1px solid var(--cizgi2); border-radius:var(--yr-tam);
  color:var(--mrk); font-size:var(--yz-kck);
}
.shb-alan::placeholder{ color:var(--mrk3) }
.shb-alan:focus{ outline:0; border-color:var(--mrk3) }
.shb-ses,.shb-gnd{
  inline-size:2.5rem; block-size:2.5rem; border-radius:var(--yr-tam); cursor:pointer;
  display:grid; place-items:center; border:1px solid var(--cizgi2);
  background:var(--z1); color:var(--mrk2);
}
.shb-ses:hover{ color:var(--mrk) }
.shb-gnd{ background:var(--mrk); border-color:var(--mrk); color:var(--z1) }
.shb-gnd:hover{ background:var(--aksan); border-color:var(--aksan) }
.shb-ses svg,.shb-gnd svg{ inline-size:1.05rem; block-size:1.05rem }
[dir="rtl"] .shb-gnd svg{ transform:scaleX(-1) }

/* ── dar ekran: tam ekran ── */
@media (max-width:40rem){
  .shb[data-acik]{ inset:0; }
  .shb-panel{
    position:fixed; inset:0;
    inline-size:100vw; block-size:100dvh; max-block-size:none;
    border-radius:0; border:0;
  }
}

/* 28 Ağu 2026 · çerez bandı açıkken orb bandın ALTINDA kalıyordu (ölçüldü:
   orb y=848, bandın üst kenarı y=779). Bant yüksekliği --crz-yer olarak
   ölçülüp yayınlanıyor; yüzen düğmelerle aynı kuralı burada da uygula. */
body[data-crz-acik] .shb{ inset-block-end:calc(1.15rem + var(--crz-yer, 0px)); }