/* ═══════════════════════════════════════════════════════════════════
   AI WIDGET · HAYAT MAKKAH MARKA GİYDİRMESİ
   -------------------------------------------------------------------
   Çekirdeğin <x-ai.floating-widget> bileşeni PAYLAŞIMLIDIR (52 tenant
   kullanıyor) ve değiştirilemez. Renk `theme="gold"` ile geliyor:
   lacivert + altın. Bu proje toprak/zeytin paletinde; fark YALNIZ bu
   temanın kendi dosyasından kapatılır.

   `theme="gold"` RENK için değil DÜZEN için seçildi: bileşende ChatGPT
   tarzı mesaj dizilimini, mobilde tam ekranı ve sesli yanıtın
   kendiliğinden başlamamasını (tts_autospeak=0) o değer açıyor.

   ⚠️ ÖZGÜLLÜK — 28 Ağu 2026'da ölçülerek bulundu:
   Bileşen, kurallarını GÖVDE İÇİNDEKİ bir <style> bloğunda basıyor
   (ör. `.ai-brand-gold .bg-blue-600{…!important}` · özgüllük 0,2,0).
   Benim <head>'deki dosyam AYNI özgüllükte yazıldığında, belge sırasında
   sonra gelen kazanıyor ve gönder düğmesi lacivert kalıyordu.
   Bu yüzden her kural `.ai-chat-root.ai-brand-gold …` (0,3,0) ile
   yazılır — aynı elemana iki sınıf. Bu satırı sadeleştirmeyin.

   Kapsam: her seçici .ai-chat-root ile başlar; sitenin hiçbir öğesine
   dokunmaz.
   ═══════════════════════════════════════════════════════════════════ */

/* 🔴 30 Ağu 2026 · TOKEN'LAR :root'A TAŞINDI — #71 kök nedeni.
   Önceden yalnız `.ai-chat-root{}` içinde tanımlıydılar. Sohbet t-23'te İKİ
   yüzeyde var; gömülü yüzeyin kökü `.hmk-sohbet-ic` ve token oraya MİRAS
   KALMIYOR (kardeş kapsam, ata değil). Sonuç:
     `.hmk-sohbet-ic .tb-usermsg{background:var(--hmk-koyu)}` seçici EŞLEŞİYOR,
     ama token tanımsız → bildirim GEÇERSİZ → background `initial` =
     rgba(0,0,0,0). Yani kural "var" ama etkisi yok — hata da vermiyor.
   Bu, hafızadaki `css-degisken-kardes-mirasi` dersinin aynısı: ÖLÇÜLER :root'TA
   DURUR. Kuralı biliyordum, yeni kuralı yazarken uygulamadım.
   Dosya yalnız t-23'e yükleniyor; `:root` burada güvenli ve iki yüzeyi de besler. */
:root{
  --hmk-gece:#0B0F0E;      /* en koyu — gradyan ucu */
  --hmk-koyu:#1E2522;      /* gece yeşili — birincil zemin */
  --hmk-zeytin:#7F8E73;    /* aksan */
  --hmk-toprak:#AA7651;    /* ikincil vurgu (altının yerine) */
  --hmk-keten:#ECE6DA;     /* açık mürekkep */
}

/* ── Lacivert ailesi → gece yeşili ailesi ── */
.ai-chat-root.ai-brand-gold .bg-blue-600,
.ai-chat-root.ai-brand-gold .bg-blue-500{ background-color:var(--hmk-koyu)!important }
.ai-chat-root.ai-brand-gold .bg-blue-600:hover,
.ai-chat-root.ai-brand-gold .hover\:bg-blue-700:hover{ background-color:var(--hmk-zeytin)!important }

.ai-chat-root.ai-brand-gold [class*="from-indigo-6"],
.ai-chat-root.ai-brand-gold [class*="from-blue-5"],
.ai-chat-root.ai-brand-gold [class*="from-blue-6"],
.ai-chat-root.ai-brand-gold [class*="from-purple-"]{
  --tw-gradient-from:var(--hmk-gece) var(--tw-gradient-from-position)!important;
  --tw-gradient-to:rgb(11 15 14/0) var(--tw-gradient-to-position)!important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via,var(--tw-gradient-to))!important;
}
.ai-chat-root.ai-brand-gold [class*="via-purple-6"]{
  --tw-gradient-via:var(--hmk-koyu)!important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-via),var(--tw-gradient-to)!important;
}
.ai-chat-root.ai-brand-gold [class*="to-pink-6"],
.ai-chat-root.ai-brand-gold [class*="to-indigo-6"],
.ai-chat-root.ai-brand-gold [class*="to-indigo-7"],
.ai-chat-root.ai-brand-gold [class*="to-blue-6"],
.ai-chat-root.ai-brand-gold [class*="to-blue-7"]{ --tw-gradient-to:var(--hmk-zeytin)!important }

/* ── Altın → toprak ── */
.ai-chat-root.ai-brand-gold .text-blue-600,
.ai-chat-root.ai-brand-gold .text-blue-500{ color:var(--hmk-toprak)!important }
.ai-chat-root.ai-brand-gold .border-blue-500{ border-color:var(--hmk-zeytin)!important }
.ai-chat-root.ai-brand-gold .focus\:ring-blue-500:focus,
.ai-chat-root.ai-brand-gold .focus\:border-blue-500:focus{
  --tw-ring-color:var(--hmk-zeytin)!important; border-color:var(--hmk-zeytin)!important;
}
.ai-chat-root.ai-brand-gold .bg-blue-600.text-white,
.ai-chat-root.ai-brand-gold .bg-blue-500.text-white{ color:var(--hmk-keten)!important }

/* ── Maskot ──
   Serbest duran görsel. Kutu gölgesi değil, siluete oturan yumuşak taban
   gölgesi: kart hover'ında renk halkası kullanılmaz (kaçınma listesi). */
.ai-chat-root img[src*="asistan-orb"]{
  filter:drop-shadow(0 10px 18px rgba(11,15,14,.28));
}
/* Hareket azaltma: bileşen durgun kareyi servis etmiyor; hareketli WebP'yi
   durdurmanın tarayıcı yolu yok, bu yüzden durgun sürüme geçilir. */
@media (prefers-reduced-motion:reduce){
  .ai-chat-root img[src*="asistan-orb.webp"]{
    content:url("/themes/t-23/assets/img/asistan-orb-durgun.webp");
  }
}

/* ── Seçenek düğmeleri ve görsel ──
   Danışman [[SEC: a | b | c]] ve [[GORSEL: anahtar]] gönderir; ai-secenek.js
   onları düğmeye ve görsele çevirir.

   ⚠️ İKİ YÜZEY: sağ alttaki pencere `.ai-chat-root` altında, SSS bölümündeki
   klon ise `.hmk-sohbet-ic` altında — klon .ai-chat-root İÇİNDE DEĞİL
   (29 Ağu'da ölçüldü). Seçiciler İKİ köke birden bağlanır; yalnız
   .ai-chat-root yazılırsa SSS'de düğmeler stilsiz kalır.
   Yuva (`[data-sss-bot]`) değil KLONUN KENDİSİ (`.hmk-sohbet-ic`) hedeflenir:
   klon bozulduğunda yuva onu gizleyip yerel paneli açıyor, o panelin kendi
   `sss-sec-*` sınıfları var — bu kurallar oraya sızmamalı.

   ⚠️ ÖZGÜLLÜK: Çekirdek, .ai-chat-root altındaki düğmelere kendi kurallarını
   (0,1,1) uyguluyor ve GÖVDE İÇİNDEKİ bir <style> bloğunda basıyor. Sade
   `.sec-dgm` (0,1,0) onu yenemez — düğmeler düz metin gibi görünür. Kök sınıf
   zincirlenir; zemin ve kenarda ayrıca !important gerekir. Sadeleştirmeyin. */
.ai-chat-root .sec-kap,
.hmk-sohbet-ic .sec-kap{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-block-start:.7rem;
}
/* Renkler SİTENİN token'larından alınır (--z1 · --mrk · --cizgi2 · --aksan):
   bu token'lar tema değişince kendiliğinden dönüyor. Sabit #fff yazılmıştı ve
   koyu temada çekirdeğin `dark:text-white` kuralı metni de beyaz yapınca
   BEYAZ ÜSTÜNE BEYAZ oluyordu — okunmuyordu (29 Ağu'da ekran görüntüsüyle
   bildirildi). Rengi de !important ile sabitliyoruz; yalnız zemini
   sabitlemek yetmiyor, metin çekirdekten geliyor. */
.ai-chat-root .sec-dgm,
.hmk-sohbet-ic .sec-dgm{
  font:inherit; font-size:.82rem; line-height:1.25; font-weight:600;
  padding:.45rem .8rem; border-radius:999px; cursor:pointer;
  background:var(--z1)!important;
  color:var(--mrk)!important;
  border:1px solid var(--cizgi2)!important;
  box-shadow:0 1px 1px rgba(11,15,14,.04);
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ai-chat-root .sec-dgm:hover:not(:disabled),
.hmk-sohbet-ic .sec-dgm:hover:not(:disabled){
  background:var(--z2)!important;
  border-color:var(--aksan)!important;
  box-shadow:0 1px 2px rgba(11,15,14,.06), 0 6px 16px -8px rgba(11,15,14,.22);
}
/* Kullanılmış ya da geçmişte kalmış küme: soluk DEĞİL, SESSİZ.
   opacity ile soldurmak koyu temada okunmaz hâle getiriyordu; bunun yerine
   zemin ve mürekkep bir ton geri çekiliyor, metin okunur kalıyor. */
.ai-chat-root .sec-dgm:disabled,
.hmk-sohbet-ic .sec-dgm:disabled{
  cursor:default; opacity:1;
  background:transparent!important;
  color:var(--mrk3)!important;
  border-color:var(--cizgi)!important;
  box-shadow:none;
}
.ai-chat-root .sec-dgm[data-sec-secili],
.hmk-sohbet-ic .sec-dgm[data-sec-secili]{
  background:var(--aksan)!important;
  color:var(--z1)!important;
  border-color:var(--aksan)!important;
}

/* Görsel: yanıtın içinde, tıklanınca büyüğü yeni sekmede açılır.
   Oran korunur, yükseklik sınırlı — uzun bir kat planı sohbeti doldurmasın. */
.ai-chat-root .sec-gor,
.hmk-sohbet-ic .sec-gor{
  display:block; margin-block-start:.7rem; border-radius:.8rem; overflow:hidden;
  border:1px solid var(--cizgi2); background:var(--z1);
  text-decoration:none; color:inherit;
}
.ai-chat-root .sec-gor img,
.hmk-sohbet-ic .sec-gor img{
  display:block; inline-size:100%; block-size:auto;
  max-block-size:14rem; object-fit:cover;
}
.ai-chat-root .sec-gor-yzi,
.hmk-sohbet-ic .sec-gor-yzi{
  display:block; padding:.4rem .65rem; font-size:.76rem; font-weight:600;
  color:var(--mrk); background:var(--z1);
}
.ai-chat-root .sec-gor:hover,
.hmk-sohbet-ic .sec-gor:hover{
  box-shadow:0 2px 4px rgba(11,15,14,.07), 0 10px 24px -12px rgba(11,15,14,.3);
}
/* Kat planı ve metrekare paftası kırpılmamalı — tamamı görünsün.
   ⚠️ ALTLIK BİLİNÇLİ OLARAK BEYAZ, token DEĞİL: bunlar siyah-beyaz
   teknik çizim; koyu zemine oturtulursa çizgiler kaybolur. Ayrım şu —
   METİN zemini temayla döner (--z1), ÇİZİM altlığı dönmez. */
.ai-chat-root .sec-gor img[src*="zemin"],
.ai-chat-root .sec-gor img[src*="ust"],
.ai-chat-root .sec-gor img[src*="metrekare"],
.ai-chat-root .sec-gor img[src*="yerleske"],
.hmk-sohbet-ic .sec-gor img[src*="zemin"],
.hmk-sohbet-ic .sec-gor img[src*="ust"],
.hmk-sohbet-ic .sec-gor img[src*="metrekare"],
.hmk-sohbet-ic .sec-gor img[src*="yerleske"]{
  object-fit:contain; max-block-size:18rem; background:#fff;
}

/* ── Künye numarası ──
   Alt ibaredeki telefon bağlantısı. Çekirdeğin mavi bağlantı rengi
   .ai-chat-root altında zaten toprağa çevriliyor; burada yalnız
   altı çizili ve tıklanabilir olduğu belli olsun. */
.ai-chat-root .ai-kunye-tel{
  color:var(--hmk-toprak)!important; font-weight:600;
  text-decoration:underline; text-underline-offset:.18em;
  text-decoration-thickness:.06em; white-space:nowrap;
}
.ai-chat-root .ai-kunye-tel:hover{ color:var(--hmk-koyu)!important }

/* ══════════════════ GALERİ ŞERİDİ ══════════════════
   [[GALERI: villa-a]] işaretinden kurulur: villanın tüm görselleri yan yana,
   yatay kaydırmalı. Tıklanınca lightbox açılır.

   ⚠️ İKİ KAYDIRMA SAVUNMASI — biri yetmiyor:
   1) data-lenis-prevent (JS'te veriliyor) → Lenis'in belge düzeyindeki
      wheel/touch dinleyicisini bu kabın üstünde susturur.
   2) overscroll-behavior-inline:contain → şeridin UCUNA gelindiğinde
      tarayıcının kaydırmayı sayfaya devretmesini (zincirleme) durdurur.
   Birincisi JS katmanı, ikincisi tarayıcı katmanı; ayrı mekanizmalar.

   min-inline-size:0 → şerit bir flex sütununun içindeyken varsayılan
   min-width:auto taşmayı engelliyor ve kaydırma hiç doğmuyor. */
.ai-chat-root .sec-gal,
.hmk-sohbet-ic .sec-gal{
  display:flex; gap:.5rem;
  margin-block-start:.7rem;
  padding-block-end:.45rem;
  min-inline-size:0;
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:inline proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--cizgi2) transparent;
}
.ai-chat-root .sec-gal::-webkit-scrollbar,
.hmk-sohbet-ic .sec-gal::-webkit-scrollbar{ block-size:.35rem }
.ai-chat-root .sec-gal::-webkit-scrollbar-track,
.hmk-sohbet-ic .sec-gal::-webkit-scrollbar-track{ background:transparent }
.ai-chat-root .sec-gal::-webkit-scrollbar-thumb,
.hmk-sohbet-ic .sec-gal::-webkit-scrollbar-thumb{
  background:var(--cizgi2); border-radius:999px;
}

/* Öğe <button> — çekirdeğin düğme kuralları sızmasın diye görünüm sıfırlanır. */
.ai-chat-root .sec-gal-oge,
.hmk-sohbet-ic .sec-gal-oge{
  flex:0 0 auto; inline-size:8.5rem;
  display:block; padding:0; cursor:pointer;
  scroll-snap-align:start;
  border-radius:.7rem; overflow:hidden;
  background:var(--z1)!important;
  border:1px solid var(--cizgi2)!important;
  box-shadow:0 1px 1px rgba(11,15,14,.04);
  transition:box-shadow .18s ease, transform .18s ease;
}
.ai-chat-root .sec-gal-oge img,
.hmk-sohbet-ic .sec-gal-oge img{
  display:block; inline-size:100%; block-size:5.6rem;
  object-fit:cover; background:var(--z2);
}
/* Pafta ve kat planı kırpılmaz — şeritte de tamamı görünür. */
.ai-chat-root .sec-gal-oge img[src*="zemin"],
.ai-chat-root .sec-gal-oge img[src*="ust"],
.ai-chat-root .sec-gal-oge img[src*="metrekare"],
.ai-chat-root .sec-gal-oge img[src*="yerleske"],
.hmk-sohbet-ic .sec-gal-oge img[src*="zemin"],
.hmk-sohbet-ic .sec-gal-oge img[src*="ust"],
.hmk-sohbet-ic .sec-gal-oge img[src*="metrekare"],
.hmk-sohbet-ic .sec-gal-oge img[src*="yerleske"]{
  object-fit:contain;
}
.ai-chat-root .sec-gal-yzi,
.hmk-sohbet-ic .sec-gal-yzi{
  display:block; padding:.35rem .5rem;
  font:inherit; font-size:.7rem; font-weight:600; line-height:1.3;
  text-align:start; color:var(--mrk)!important; background:var(--z1)!important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ai-chat-root .sec-gal-oge:hover,
.hmk-sohbet-ic .sec-gal-oge:hover{
  box-shadow:0 2px 4px rgba(11,15,14,.07), 0 10px 24px -12px rgba(11,15,14,.32);
}

/* ══════════════════ LIGHTBOX ══════════════════
   document.body'ye ekleniyor (widget'ın backdrop-filter'lı kabuğu içinde
   kalırsa position:fixed hapsolur — ölçüldü). Tema içindeki en yüksek
   z-index 9999; bunun üstünde durmalı. */
.sec-lb{
  position:fixed; inset:0; z-index:10050;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.9rem; padding:2.6rem 1rem 1.6rem;
  background:rgba(11,15,14,.9);
  opacity:0; transition:opacity .2s ease;
}
.sec-lb[data-acik]{ opacity:1 }
.sec-lb img{
  max-inline-size:min(92vw, 1180px);
  max-block-size:78vh;
  inline-size:auto; block-size:auto;
  object-fit:contain;
  border-radius:.6rem;
  background:#fff;
}
.sec-lb-yzi{
  margin:0; text-align:center;
  font-size:.85rem; font-weight:600; line-height:1.4;
  color:var(--hmk-keten);
  max-inline-size:min(92vw, 1180px);
}
/* Oklar ve kapatma: konumlar MANTIKSAL — RTL'de kendiliğinden aynalanır.
   Ama ‹ › GLİFİ dönmez; onu ayrıca scaleX ile aynalıyoruz. */
.sec-lb-ok,
.sec-lb-kapat{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  font:inherit; line-height:1; cursor:pointer;
  color:var(--hmk-keten);
  background:rgba(236,230,218,.12);
  border:1px solid rgba(236,230,218,.24);
  border-radius:999px;
  transition:background .18s ease, border-color .18s ease;
}
.sec-lb-ok:hover,
.sec-lb-kapat:hover{
  background:rgba(236,230,218,.22);
  border-color:rgba(236,230,218,.45);
}
.sec-lb-ok{
  inset-block-start:50%; transform:translateY(-50%);
  inline-size:2.9rem; block-size:2.9rem; font-size:1.7rem;
}
.sec-lb-onceki{ inset-inline-start:1rem }
.sec-lb-sonraki{ inset-inline-end:1rem }
[dir="rtl"] .sec-lb-ok{ transform:translateY(-50%) scaleX(-1) }
.sec-lb-kapat{
  inset-block-start:1rem; inset-inline-end:1rem;
  inline-size:2.4rem; block-size:2.4rem; font-size:1.5rem;
}
@media (max-width:480px){
  .sec-lb-ok{ inline-size:2.4rem; block-size:2.4rem; font-size:1.4rem }
  .sec-lb-onceki{ inset-inline-start:.5rem }
  .sec-lb-sonraki{ inset-inline-end:.5rem }
  .sec-lb img{ max-block-size:70vh }
}
@media (prefers-reduced-motion:reduce){
  .sec-lb{ transition:none }
  .ai-chat-root .sec-gal-oge,
  .hmk-sohbet-ic .sec-gal-oge{ transition:none }
}

/* ══════════════════ 360° GEZİNTİ BAĞLANTILARI ══════════════════
   [[TUR: kusbakisi | villa-a-salon]] işaretinden kurulur. Sıradan seçenek
   düğmesiyle aynı gövdeyi paylaşır (.sec-dgm) ama <a> ve yeni sekmede
   açılıyor — ziyaretçi bunun bir GEZİNTİ olduğunu tıklamadan anlamalı.
   Ayrımı renkle değil, küçük bir işaretle kuruyoruz: hover'da kenar rengi
   değiştirmek projede yasak, çok katmanlı gölge kullanılır. */
.ai-chat-root .sec-tur,
.hmk-sohbet-ic .sec-tur{
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none;
  border-color:var(--aksan)!important;
}
/* 360° rozeti — inline SVG değil, tipografik: ek istek yok, ölçekle büyür.
   Mantıksal yön: RTL'de kendiliğinden diğer tarafa geçer. */
.ai-chat-root .sec-tur::before,
.hmk-sohbet-ic .sec-tur::before{
  content:"360°";
  font-size:.62rem; font-weight:800; letter-spacing:.02em;
  line-height:1; padding:.2rem .3rem;
  border-radius:.3rem;
  color:var(--z1); background:var(--aksan);
}
.ai-chat-root .sec-tur:hover,
.hmk-sohbet-ic .sec-tur:hover{
  box-shadow:0 1px 2px rgba(11,15,14,.06), 0 8px 20px -10px rgba(11,15,14,.3);
}
.ai-chat-root .sec-tur-kap,
.hmk-sohbet-ic .sec-tur-kap{ margin-block-start:.6rem }

/* ══════════ KATMAN · panel navigasyonun üstünde durmalı ══════════
   KUSUR (29 Ağu, t4k denetimi · 390×844'te ölçüldü): mobilde panel TAM EKRAN
   açılıp y=0'dan başlıyor, navigasyon ise y=8–78 arasında z-index 80 ile
   duruyor. Panelin başlığı ve KAPATMA DÜĞMESİ navın arkasında kalıyordu;
   ziyaretçi sohbeti kapatamıyordu.

   MEKANİZMA — "50 < 80" değil, YIĞIN BAĞLAMI: panelin sarmalayıcısı
   .tb-chatwin 9999 taşıyor, ama .ai-chat-root z-index:50 ile bir yığın
   bağlamı açtığı için o 9999 kutunun DIŞINA çıkamıyor. Çocuk ne kadar
   yüksek olursa olsun ebeveyninin komşuları arasındaki sırasını
   değiştiremez. Düzeltme bu yüzden KÖKTE.

   8300 NEDEN: sayfa kabuğunun tamamının üstünde (nav 80 · kahraman marka
   bloğu 120 · diğerleri ≤200), ama ÇEREZ BANDININ (9000) ALTINDA. Rıza
   bandını örtmek hukuken istenmez; çerez–giriş kutusu çakışması bir
   YERLEŞİM sorunudur, katman sorunu değil — o parça bu dosyaya ait değil.
   .nv07 YÜKSELTİLMEDİ (proje kuralı).

   ÖZGÜLLÜK: çekirdek z-index'i GÖVDE içindeki bir <style> bloğunda basıyor;
   eşit özgüllükte belge sırası kazanır ve baştaki dosyamız sessizce etkisiz
   kalır. Kök sınıf zincirlenir + !important — bu dosyadaki diğer kurallarla
   aynı sebep. Sadeleştirmeyin, etkisi ölçülerek doğrulandı. */
.ai-chat-root,
.ai-chat-root.ai-brand-gold{ z-index:8300 !important }

/* ═════ ÇEREZ BANDI · sohbet girişini örtmesin (t4k bulgu 2) ═════
   KUSUR (29 Ağu · 390×844 · İLK ZİYARET): çerez bandı ve sohbetin yazı kutusu
   ikisi de ekranın alt kenarına sabitlenmiş. Ölçüm:
       bant  y=710–836 (h=126) z=9000
       giriş y=792–824            → tamamen bandın içinde
       elementFromPoint(giriş merkezi) → ÇEREZ BANDI
   İlk kez gelen mobil ziyaretçi çerezi kapatmadan sohbete YAZAMIYOR. Sitenin
   tek iş hedefi lead toplamak; mobil + ilk ziyaret bu hedefin en kritik
   kesişimi. Parça sahibi (arayuz-oturumu) onay verdi, hafifletme burada.

   NEDEN KATMANLA ÇÖZÜLMEDİ: paneli 9000'in üstüne almak "çözer" gibi görünür
   ama rıza bandını örter — hukuken istenmez. Bu bir YERLEŞİM sorunu.

   ⚠️ :not([hidden]) ŞART: bant kapatılınca DOM'dan SİLİNMİYOR, yalnız
   `hidden` niteliği + display:none alıyor (ölçüldü). Sade :has(.crz-bant)
   yazılsaydı boşluk kalıcı olurdu — çerez kapatıldıktan sonra da panelin
   altında sebepsiz bir boşluk dururdu. */
/* 🔴 K2 · DÜZELTME 2 · 30 Ağu — İLK DÜZELTMEM 768'DE REGRESYON AÇTI.
   Önce kuralı `@media (max-width:767.98px)` ile daralttım. 768 px (iPad dikey)
   sınırın DIŞINDA kaldı → çerez bandı giriş kutusunu örttü, ölçüldü:
   kesişim 186×39 · elementFromPoint(giriş merkezi) → section.crz-bant
   ⇒ KULLANICI YAZAMIYOR. Ölü alanı ölçmüştük, ERİŞİLEBİLİRLİĞİ ölçmemiştik;
   ölçüt neyi sorarsa onu buluyor.

   ✅ YENİ YAKLAŞIM · genişlik tahmini YOK. Panelin İÇİNİ doldurmak yerine
   panelin KENDİSİNİ bandın üstüne alıyoruz. Kırılma noktası tahmini
   gerekmiyor; her ölçüde çalışır.
   `.ai-chat-root` düz bir `fixed` kap — üzerinde transform/filter/backdrop-filter
   YOK (denetlendi), dolayısıyla `fixed` çocuğu hapsetmiyor.

   ⚠️ 54px SABİT DEĞİL, TÜRETİLİYOR: `--hmk-crz-h` bandın gerçek yüksekliğinden
   ai-kunye.js'te ölçülür. Bant metni dile göre farklı sarıyor (AR/EN), sabit
   sayı yarın bayatlardı. Yedek değer 54px yalnız JS yoksa devreye girer. */
body:has(.crz-bant:not([hidden])) .ai-chat-root{
  inset-block-end: calc(1.5rem + var(--hmk-crz-h, 54px) + .5rem);
}

/* ⚠️ MOBİLDE KÖKÜ YUKARI ALMAK İŞE YARAMAZ — burada `.tb-chatwin` KENDİSİ
   `position:fixed` ve `inset-block-start:0` (tam ekran kuralı, yukarıda).
   Kökü kaydırmak ona dokunmaz; composer yine bandın altında kalırdı — ekibin
   kendi ölçtüğü mobil örtüşme (203×47) geri gelirdi.
   Dolgu da doğru araç değil: ölü alan üretiyor. Doğrusu PANELİ KISALTMAK —
   composer bandın üstüne çıkar, ölü alan oluşmaz. */
@media (max-width:767.98px){
  /* ⚠️ `:not(.tb-chat-lock)` ŞART — iki düzeltme birbirini sessizce iptal ediyordu.
     Aşağıda sohbet açıkken bant ERTELENİYOR (`display:none`), ama bu seçici
     `hidden` NİTELİĞİNE bakıyor, `display` özelliğine değil. Yani bant görünmez
     olduğu hâlde kısaltma çalışmaya devam eder ve ekranın altında tam da
     şikâyet edilen 47px'lik ÖLÜ ŞERİT kalırdı.
     Kısaltma yalnız sohbet KAPALIYKEN gerekli: o zaman bant gerçekten orada. */
  body:has(.crz-bant:not([hidden])):not(.tb-chat-lock) .ai-chat-root .tb-chatwin{
    block-size: calc(var(--tb-vvh, 100dvh) - var(--hmk-crz-h, 54px)) !important;
    padding-block-end:0;
  }
}

/* ═══ MOBİL PAKETİ · 30 Ağu · Beyefendi: "mobilde berbat" ═══════════════ */
@media (max-width:640px){
  /* ② ÇEREZ BANDI ERTELENİR — SİLİNMEZ. Rıza bandı hukuki; sohbet kapanınca
     `tb-chat-lock` kalkar ve bant kendiliğinden geri gelir. Kalıcı gizleme YOK. */
  body.tb-chat-lock .crz-bant{ display:none; }

  /* ①+⑤ TAM EKRAN · alttaki 47px şerit sıfırlanıyor (bant artık orada değil).
     ③ KENARLIK 0 — tam ekranda ayıracak komşu yüzey yok; panel kenarı
     masaüstü kuralı (yukarıda) burada anlamsız, sadece 1px yer yiyor.
     Kök sınıf TEKRARLANIYOR: tek yazımla çekirdeğin gövde içi kuralı kazanıyor
     (panel kenarında bunu yaşadık). */
  .ai-chat-root.ai-chat-root .tb-chatwin.tb-chatwin{
    border:0 !important;

    /* ⑤ GÜVENLİ ALAN (çentik + ana çubuk) — ① OLMADAN GEREKSİZDİ, ①'LE ZORUNLU.
       Tam ekran yapmadan önce panel ekranın altına yaslanmıyordu; şimdi
       yaslanıyor, dolayısıyla çentikli iPhone'da başlık çentiğin ALTINDA,
       composer ana çubuğun ALTINDA kalır. Kusur ①'i yazınca DOĞDU.
       Ölçülen: bugün padding-top/bottom ikisi de 0.

       📌 SPEC `> *:first-child` / `> *:last-child` diyordu; panele verdim.
       Sebep: panelin ilk çocuğu KOŞULLU (`@if($isMagenta)` başlık dalı) ve
       sarmalayıcılar `display:contents` kullanıyor. İlk çocuk beklenmedik
       şekilde MESAJ LİSTESİ olursa üst dolgu kaydırılabilir alana düşer ve
       kullanıcı aşağı kaydırınca içerik çentiğin altına girer — düzeltme
       rastgele çalışırdı. Panelde `box-sizing:border-box` olduğu için dış
       yükseklik DEĞİŞMEZ; içerik güvenli alanın dışına itilir ve panelin
       zemini çentik bölgesini kaplar (beyaz boşluk kalmaz).
       `env()` desteklenmeyen tarayıcıda yedek 0 → bugünkü davranış. */
    padding-block-start: env(safe-area-inset-top, 0px) !important;
    padding-block-end: env(safe-area-inset-bottom, 0px) !important;
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px) !important;
  }

  /* ④ GİRİŞ FONTU 16px — iOS EŞİĞİ, tercih değil.
     iOS Safari, 16px'in ALTINDAKİ bir girdiye odaklanınca sayfayı
     KENDİLİĞİNDEN yakınlaştırır. Ölçülen değer 14px'ti.
     📌 "Klavye açılınca her şey kayıyor" şikâyetinin asıl sebebi bu olabilir:
     kayma bizim klavye kodumuzdan değil, TARAYICININ ZOOM'undan geliyor.
     Bu düzeltilmeden klavye davranışını ölçmek, zoom'un yan etkisini ölçmek olur. */
  .ai-chat-root.ai-chat-root input[type="text"],
  .ai-chat-root.ai-chat-root input[type="search"],
  .ai-chat-root.ai-chat-root input[type="email"],
  .ai-chat-root.ai-chat-root input[type="tel"],
  .ai-chat-root.ai-chat-root textarea{
    font-size:16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   #71 · KULLANICI MESAJI BALONU  ·  #70a · PARAGRAF ARALIĞI
   30 Ağu 2026 · Beyefendi'nin canlı denemesinden
   ═══════════════════════════════════════════════════════════════════
   #71 TEŞHİS: Çekirdek işaretlemede sınıf ZATEN VAR —
       `tb-usermsg max-w-[82%] rounded-2xl rounded-tr-sm px-3.5 py-2`
   yani köşe ve iç boşluk tanımlı, ama ZEMİN RENGİ hiçbir yerde yok:
   `.tb-usermsg` tema CSS'inde 0 kural. Sonuç: "8" yazınca ekranda
   zeminsiz, çerçevesiz tek bir rakam duruyor — Beyefendi'nin deyişiyle
   "varlığı yokluğu anlaşılmıyor". Kusur eksik kural, yanlış kural değil.

   #70a TEŞHİS — ÜÇ HALKA, üçü de ölçüldü:
     1. içerik markdown olarak basılıyor, paragraflar <p> oluyor
     2. çekirdek yüklemesinde bir reset `p{margin:0}` uyguluyor (1 dosyada bulundu)
     3. boşluğu geri verecek `prose` sınıfları tenant derlemesinde ÜRETİLMİYOR
        (aranan: `prose` → 0 eşleşme) — `max-lg:opacity-0` tuzağının aynısı:
        işaretlemede yazılı, derlemede yok.
   Üçü birleşince satırlar birbirine yapışıyor. Kural burada ELLE yazılıyor,
   derlemeye bağımlı değil.

   YÜKLEME SIRASI: /assets/css/ai-chat.css (çekirdek) ÖNCE, bu dosya SONRA
   → eşit özgüllükte biz kazanıyoruz, !important gerekmiyor.
   Yön: logical property (margin-block / padding-inline) — RTL'de aynalanır. */

/* ═══════════════════════════════════════════════════════════════════
   #71 · KULLANICI BALONU · DÖRT KOMBİNASYON AÇIKÇA YAZILIR
   ═══════════════════════════════════════════════════════════════════
   ⚠️ İKİ KAPSAM ZORUNLU — bu projede BEŞ kez vurdu:
     querySelector('.tb-chatwin') · isOpen() · --tb-vvh · .tb-usermsg · ai-kunye
   Sohbet t-23'te iki yüzeyde: `.ai-chat-root` (yüzen) ve `.hmk-sohbet-ic`
   (gömülü klon). Klon aynı sınıfları taşır ama BAŞKA kökün altındadır.

   ÖLÇÜLEN İKİ KUSUR (TESTÇİ-2):
     1. KONTRAST: çekirdeğin İKİ rengi de kendi panelinde görünmüyor —
        açık krem #EFEADF ↔ panel #ECE6DA = 1,04 · koyu #1E2B47 ↔ #121715 = 1,29
        (eşik 3,0). Koyu balona geçmek de çözmüyordu.
     2. YARIM BOYALI BALON: gömülü yüzeyde zemin bildirimi geçersize düşüp
        `initial` oluyordu ama `color:#fff` AYAKTA kalıyordu → kullanıcı kendi
        yazdığını okuyamıyordu (1,24:1).
        SEBEP: geçersiz bir bildirim YALNIZ KENDİNİ düşürür, kardeşini değil.
        Token'lar :root'a taşındı; ama ders kalıcı — zemin ve mürekkep AYRI
        bildirimlerdir, biri düşerse öteki yanlış değeriyle yaşamaya devam eder.

   ÇÖZÜM: dolgu krem KALIR (marka dili + çekirdekle tutarlı), ayırt edicilik
   KENARLIKTAN gelir. Ölçüldü: toprak #AA7651 → balona 3,23 ✓ · panele 3,12 ✓
   Kenarlık kaçınma listesine takılmaz: yasak olan HOVER'da border rengi
   değiştirmek ve renkli ring; sabit ayırıcı kenar değil.

   `!important` NEDEN VAR: çekirdek sayfa içi <style> ile
   `html:not(.dark) .ai-brand-gold .tb-usermsg{background:#EFEADF!important}`
   basıyor. Ölçüldü — onsuz kuralımız eziliyor. DEĞERİ FARKLI OLAN bildirimlere
   konuldu; aynı değeri tekrar `!important`'la yazmak gereksiz ağırlık olurdu.

   Bu GEÇİCİ bir karar: renk sistemini tasarımcı kuracak. Şu an düzeltilen şey
   zevk değil, kullanıcının kendi yazdığını okuyamaması. */

/* ⚠️ İKİ GRUP AYRI — `*` YALNIZ RENKTE KULLANILIR.
   Kural: EZDİĞİN KURALIN SEÇİCİ GENİŞLİĞİNİ DE DEVRAL. Çekirdek rengi iki
   seçiciyle yazıyor (`.tb-usermsg` VE `.tb-usermsg *`); yalnız birincisini
   ezersek çekirdeğin ulaşmadığı yüzeyde çocuğu HİÇ KİMSE boyamaz.
   ÖLÇÜLDÜ (açık/gömülü): DIV.tb-usermsg #0B0F0E ✓ ama metni taşıyan P.mb-3
   #FFFFFF → krem üstüne beyaz, 1,24:1. Kullanıcı kendi yazdığını okuyamıyor.
   Widget'ta kusur GÖRÜNMÜYOR çünkü orada `.ai-brand-gold` var ve çekirdeğin
   `*` kuralı çocuğu kurtarıyor — yani tek yüzeyde ölçen "geçti" der.

   🚫 `*` DÖRT BLOĞA EKLENMEZ. Bu bloklarda `border` ve `background` da var;
      seçiciye `*` koymak balonun içindeki HER <p>/<span> öğesine kendi
      kenarlığını ve zeminini verirdi. Çekirdek de böyle yapmıyor: onun `*`
      kuralı YALNIZ `color` taşıyor. Geniş seçiciye yalnız KALITSAL özellik
      yazılır — devralınan şey seçici genişliği kadar bildirim ayrımıdır. */

/* ── KUTU (kalıtsal DEĞİL) · yalnız balonun kendisi ── */
html:not(.dark) .ai-chat-root .tb-usermsg{
  border:1px solid var(--hmk-toprak) !important;
}
html:not(.dark) .hmk-sohbet-ic .tb-usermsg{
  background:var(--hmk-keten) !important;
  border:1px solid var(--hmk-toprak) !important;
}
html.dark .ai-chat-root .tb-usermsg{
  border:1px solid var(--hmk-toprak) !important;
}
html.dark .hmk-sohbet-ic .tb-usermsg{
  background:var(--hmk-koyu) !important;
  border:1px solid var(--hmk-toprak) !important;
}

/* ── MÜREKKEP (kalıtsal) · balon + İÇİNDEKİ HER ŞEY · çekirdeğin deseni ── */
html:not(.dark) .ai-chat-root .tb-usermsg,
html:not(.dark) .ai-chat-root .tb-usermsg *,
html:not(.dark) .hmk-sohbet-ic .tb-usermsg,
html:not(.dark) .hmk-sohbet-ic .tb-usermsg *{
  color:var(--hmk-gece) !important;
}
html.dark .ai-chat-root .tb-usermsg,
html.dark .ai-chat-root .tb-usermsg *,
html.dark .hmk-sohbet-ic .tb-usermsg,
html.dark .hmk-sohbet-ic .tb-usermsg *{
  color:#fff !important;
}
/* Ortak: köşe/gölge/GENİŞLİK — dördünde de aynı, tema/yüzey ayrımı gerektirmiyor.

   🔴 K1 · GENİŞLİK · 30 Ağu — #71'in EKSİK YARISI.
   Balon iki sınıfı birden taşıyor ve ikisi de (0,1,0):
       "prose prose-sm max-w-none … tb-usermsg max-w-[82%]"
   Eşit özgüllükte belge sırası karar veriyor; ai-widget-tw.css'te
   `.max-w-none` SONRA geldiği için kazanıyor → hesaplanmış `max-width:none`.
   Ölçüldü: 1440'ta kullanıcı 344px · bot 344px → ASİMETRİ 0.

   📌 Bu yüzden #71'de eklediğimiz RENK doğruydu ama YETMİYORDU: balon, bot
   paragrafıyla aynı kutuyu kaplıyordu. Aynı genişlikteki iki kutu, farklı
   renkte olsa bile "aynı şey" diye okunuyor — ayrım rengin değil önce
   GEOMETRİNİN işi. Beyefendi "anlaşılmıyor" derken ikisini kastediyormuş.

   (0,2,0) her iki yardımcı sınıfı da yener; `!important` GEREKMİYOR —
   özgüllük yetiyorsa ağırlık eklemek borç biriktirmektir.
   ⚠️ `max-inline-size` (mantıksal) — `max-width` değil, RTL'de aynalanmalı. */
.ai-chat-root .tb-usermsg,
.hmk-sohbet-ic .tb-usermsg{
  box-shadow:0 1px 2px rgb(11 15 14/.18), 0 6px 16px -8px rgb(11 15 14/.22);
  max-inline-size:82%;
}

/* 🔄 GERİ ALINDI · 30 Ağu 2026 — `color` BİLEREK YOK.
   Kısa süre bağlantıya zeytin (#7F8E73) `!important` ile basıldı: gerekçe
   "çekirdeğin `*` kuralı bizimkini eziyordu" idi. Tespit DOĞRUYDU, düzeltme
   YANLIŞTI. Karşı-olgu canlıda ölçüldü (tema kuralı çalışma anında silinip
   çekirdeğin ne verdiğine bakıldı):

       zeytin (bizim)     2,91 · 2,81 · 4,03 · 4,48   → dördü de AA ALTI ✗
       çekirdeğin verdiği 14,35 · 15,52                → AA ✓

   Yani ezilmek ZARAR DEĞİL KORUMAYDI; `!important` ile kazanmak AA'dan
   AA-altına DÜŞÜRDÜ. Palette dört kombinasyonu birden geçen renk yok: gece
   açıkta geçer koyuda kalır, keten tersi, toprak dördünde kalır. Geçen tek
   bileşim (açıkta gece · koyuda keten) zaten GÖVDE MÜREKKEBİNİN KENDİSİ —
   yani doğru davranış, rengi hiç yazmamak.

   ⛔ BURAYA `color` EKLEME. Eklemeden önce ezilen VE ezen değerin ikisini de
      ölç; "bizim kuralımız kazanmalı" gerekçe değildir.

   `text-decoration` KALIYOR: altı çizgi iki durumda da ölçüldü ama ONU KİMİN
   VERDİĞİ ölçülmedi — bizimse ve blok silinirse ayırt edicilik de giderdi.
   Seçici özgüllüğü (0,3,2) de bilerek korundu: düşürmek ölçülmemiş bir
   değişiklik olurdu (çekirdek `text-decoration:none` basıyor olabilir).
   `!important` YOK — bu bildirimde gerek görülmedi. */
html:not(.dark) .ai-chat-root .tb-usermsg a,
html:not(.dark) .hmk-sohbet-ic .tb-usermsg a,
html.dark .ai-chat-root .tb-usermsg a,
html.dark .hmk-sohbet-ic .tb-usermsg a{
  text-decoration:underline;
}

/* Bot balonu zeminsiz kalıyor (tasarım böyle); ayırt edicilik kullanıcı tarafında. */
.ai-chat-root .tb-botmsg,
.hmk-sohbet-ic .tb-botmsg{ margin-block-start:.15rem; }

/* #70a · paragraf ve liste aralığı — çekirdek reset'inin sildiğini geri veriyoruz.
   (Bu blok widget'ta ZATEN geçmişti; ikinci kapsam yine de yazılıyor —
   "bir yüzeyde geçti" bu temada "geçti" demek değil.) */
.ai-chat-root .ai-floating-message-content > p + p,
.ai-chat-root .ai-floating-message-content > ul,
.ai-chat-root .ai-floating-message-content > ol,
.ai-chat-root .ai-floating-message-content > blockquote,
.hmk-sohbet-ic .ai-floating-message-content > p + p,
.hmk-sohbet-ic .ai-floating-message-content > ul,
.hmk-sohbet-ic .ai-floating-message-content > ol,
.hmk-sohbet-ic .ai-floating-message-content > blockquote{
  margin-block-start:.62rem;
}
.ai-chat-root .ai-floating-message-content li + li,
.hmk-sohbet-ic .ai-floating-message-content li + li{ margin-block-start:.28rem; }
.ai-chat-root .ai-floating-message-content ul,
.ai-chat-root .ai-floating-message-content ol,
.hmk-sohbet-ic .ai-floating-message-content ul,
.hmk-sohbet-ic .ai-floating-message-content ol{ padding-inline-start:1.15rem; }

/* ══════════════════════════════════════════════════════════════════════════
   📱 MOBİL · WhatsApp DAVRANIŞI · 30 Ağu 2026 · Beyefendi'nin dört maddesi
   ──────────────────────────────────────────────────────────────────────────
   TEŞHİS: dört davranışın da JS'i ÇEKİRDEKTE VE KOŞULSUZ çalışıyor
   (visualViewport → --tb-vvh · --tb-kb-h · tb-chat-lock/tb-kb-open · __tbCloseKb).
   Eksik olan TÜKETİCİ CSS: tam ekran ve height:var(--tb-vvh) kuralları yalnız
   `@if($theme === 'magenta')` ve `@if($isGold)` bloklarının İÇİNDE tanımlı.
   t-23 ikisi de değil → değişken panele YAZILIYOR, kimse OKUMUYOR.

   ⚠️ TUZAK: widget kökünde `ai-brand-gold` sınıfı DURUYOR ama tam ekran kuralı
   gelmiyor — çünkü marka sınıfı `$brandClass`'tan, kural `$theme`/`$isGold`'dan
   geliyor. AYNI KELİME İKİ FARKLI DEĞİŞKENDE. Köke bakıp "t-23 gold" diyen biri
   bu teşhisi haklı olarak reddederdi.

   📌 BU DESEN BİR KEZ DÜZELTİLDİ: 17.08.2026'da `.tb-kbclose` tam bu sebeple
   koşulsuza alınmıştı (kural magenta/gold içinde kaldığı için buton öbür
   temalarda çıplak chevron olarak görünüyordu). Tam ekran kuralında AYNI HATA
   tekrar ediyor — bu ikinci örneği. Üçüncüsünü arayan olursa: `@if($theme` ve
   `@if($isGold)` içinde kalmış, koşulsuz JS'i olan her kural adaydır.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:640px){
  /* 🔴 KAPSAM PAZARLIKSIZ: yalnız YÜZEN panel. Çekirdeğin magenta kuralı çıplak
     `.tb-chatwin` hedefliyor; gömülü sohbet (`.hmk-sohbet-ic`) klon olduğu için
     O SINIFI DA TAŞIYOR. Çıplak yazılsaydı sayfa içi sohbet tam ekran olur ve
     sayfa kilitlenirdi — bu gece bir kez yaşandı. */
  /* 📌 NOT (30 Ağu, sonradan ölçüldü): ÇEKİRDEK BUNU ZATEN YAPIYOR.
     t-23 `$isGold` = TRUE ve çekirdeğin tam ekran kuralı canlıda VAR. Bunu
     başta göremedik: "kural yok" ölçümü SAHTE SIFIRDI — `grep` satır bazlı
     çalışıyor, CSS kuralı çok satırlı, kalıp hiç eşleşemezdi.
     Asıl kusur CSS değildi: `isOpen()` mobilde hiç true olmuyordu
     (`offsetParent` hatası) → `--tb-vvh` hiç YAZILMIYORDU → panel 100dvh
     yedeğinde kalıyordu. O ayrıca düzeltildi.
     Bu blok dar kapsamlı bir TEKRAR — zararsız (aynı değerler, `.ai-chat-root`
     kapsamı) ve canlıda çalışan bir şeye dokunmamak için bırakıldı. */
  .ai-chat-root .tb-chatwin{
    position:fixed !important;
    inset-block-start:0 !important;  inset-block-end:auto !important;
    inset-inline-start:0 !important; inset-inline-end:auto !important;
    inline-size:100vw !important;    block-size:var(--tb-vvh, 100dvh) !important;
    max-inline-size:none !important; max-block-size:none !important;
    border-radius:0 !important; margin:0 !important; z-index:9999 !important;
    /* (4) klavye inince alan geri uzasın — aynı kural, geçişi yumuşatıyor */
    transition:height .18s ease !important;
  }
  /* Panel tam ekranken arkadaki sayfa kaymasın. `tb-chat-lock` YALNIZ yüzen
     panelden basılıyor: win() = '.ai-chat-root .tb-chatwin' (çekirdek, 1483). */
  body.tb-chat-lock{ overflow:hidden !important; }
}

/* 🔴 RTL · klavye kapatma düğmesi — çekirdek üç yerde de `right:14px` yazıyor
   (352 · 444 · 519), FİZİKSEL yön. Arapça ana dil olacak, düğme yanlış kenarda.
   ⚠️ `inset-inline-end` TEK BAŞINA YETMEZ: left/right/width üçü birden belirliyse
      kutu modeli birini yok sayar ve RTL'de yok sayılan `left`'tir → çekirdeğin
      `right`i hayatta kalır, düğme yine sağda durur, düzeltme SESSİZCE ÇALIŞMAZ.
      Bu yüzden önce iki fiziksel yön de auto'ya çekiliyor, sonra mantıksal yazılıyor.
   ⚠️ `!important` gerekli: çekirdeğin taban kuralı sayfa içi <style> ile
      bizden SONRA basılıyor, `!important`siz kural eziliyordu.
   📌 Renk (#334155) BİLEREK DEĞİŞTİRİLMEDİ — bozuk olmayanı zevkle değiştirmek
      bu gece bir tur kaybettirdi. Kontrast ölçülür, <3,0 çıkarsa o zaman token. */
/* 🎨 K10 · 30 Ağu · RENK — tasarımcı canlıdan ölçtü, Beyefendi'nin paleti.
   Çekirdek `$isGold` bloğu `background:#16365F; color:#E8C982` basıyor
   (lacivert + altın). İki kusuru var:
     1. Palet dışı ve "altın-siyah lüks klişesi" kaçınma listesinde
     2. İŞLEVSEL: koyu temada panele karşı 1,49:1 — düğme zemine gömülüyor
   Onaylanan çözüm sitenin kendi birincil düğme mantığı: MÜREKKEP zemin,
   tema ile döner. Ölçüldü → açık 13,17:1 · koyu 14,71:1.
   Toprak (3,12) ve zeytin (4,69) elendi; toprak odak halkasında kullanılacak.
   ⚠️ `!important` ŞART: `$isGold` bloğu sayfa içi <style> ile bizden SONRA
      basılıyor; eşit özgüllükte (0,1,0) belge sırası onu kazandırırdı.
   ⚠️ Altın çerçeve de kaldırılıyor (`border:1px solid rgba(200,162,74,.5)`) —
      renkli ring kaçınma listesinde. */
.tb-kbclose{
  right:auto !important; left:auto !important;
  inset-inline-end:14px !important;
  background:var(--mrk) !important;
  color:var(--z1) !important;
  border:0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ① TEASER OKU · ② PANEL KENARI · ③ KÜÇÜK BOY   ·  30 Ağu 2026
   ═══════════════════════════════════════════════════════════════════════ */

/* ① TEASER OKU — beyaz üçgen sitenin çizgi diline dönüyor.
   🔴 SPEC'TEKİ SEÇİCİ YOK: `.tb-teaser-ok` çekirdekte hiç geçmiyor (0 sonuç,
   hem kaynakta hem canlı HTML'de). O seçiciyle yazsaydık kural SESSİZCE
   hiçbir şey yapmazdı. Gerçek işaretleme (canlıdan doğrulandı, 1 örnek):
       <div class="absolute w-0 h-0 bottom-[-10px]"
            style="… border-top:11px solid white;">
   ⚠️ Renk SATIR İÇİ stille geliyor → `!important` ŞART; onsuz seçici doğru
      olsa bile satır içi stil kazanır.
   Kök sebep spec'in dediği gibi: marka giydirmesi `background-color`'ı ezmiş,
   üçgen ise `border-*-color` ile boyanıyor — atlanmış bir ÖZELLİK, tercih değil.
   Ölçülen: #FFFFFF · açıkta balona 1,24:1 · koyuda 18,12:1 (ışık lekesi). */
.ai-chat-root .w-0.h-0{
  border-block-start-color:transparent !important;
}
/* Bağ çizgisi — dikey, tek taraflı sönüm. `.vil-imlec` deyiminden alınan:
   token · 999px yuvarlaklık · noktanın .75 opaklığı · sönümlenme.
   Ayrılan: referans YATAY ayraç, bu DİKEY bağ.
   📌 Degrade `to bottom`: spec `to inline-end` diyordu ama o YATAY degrade
   içindir; bu dikey, RTL'de aynalanma sorunu doğurmaz.
   Öğe 0×0 + 11px yan kenarlıklı → padding kutusu üçgenin TAM ORTASINDA,
   bu yüzden `inset-inline-start:0` merkezi verir. */
.ai-chat-root .w-0.h-0::after{
  content:""; position:absolute;
  inset-inline-start:0; inset-block-start:0;
  inline-size:1px; block-size:22px;
  background:linear-gradient(to bottom, var(--toprak-mtn), transparent);
  opacity:.85;
}
.ai-chat-root .w-0.h-0::before{
  content:""; position:absolute;
  inset-inline-start:0; inset-block-start:22px;
  inline-size:5px; block-size:5px; border-radius:999px;
  background:var(--toprak-mtn); opacity:.75;
  /* 5px noktayı 1px çizgiye ortalar. `margin-inline-start` LOGICAL —
     `translateX(-2px)` RTL'de ters tarafa kaçardı. */
  margin-inline-start:-2px;
}

/* ② PANEL KENARI — panel ↔ komşu zemin ayrımı (açık 1,19 · koyu 1,20 idi).
   🔴 ÖZGÜLLÜK: çekirdek `.dark .ai-brand-gold .dark\:border-gray-700`
   kuralını GÖVDE İÇİNDE basıyor = (0,3,0). Bizim (0,3,0) yazsaydık eşit
   özgüllükte belge sırası ONU kazandırırdı → açık temada çalışır, KOYUDA
   ÇALIŞMAZ (tasarımcı ilk denemesinde tam bunu yaşadı).
   Çözüm `!important` yarışı değil, KÖK SINIFI TEKRARLAMAK → (0,4,0).
   Çekirdeğin kendi CSS'i de bu deyimi kullanıyor.
   %34 bilerek: tam güçte 1px toprak = kaçınma listesindeki "kutu çerçeve". */
.ai-chat-root.ai-chat-root .tb-chatwin.tb-chatwin{
  border:1px solid color-mix(in srgb, var(--toprak-mtn) 34%, transparent);
  box-shadow:
    0 1px 2px rgb(11 15 14/.10),
    0 8px 20px -10px rgb(11 15 14/.22),
    0 24px 48px -24px rgb(11 15 14/.30);
}

/* ③ KÜÇÜK BOY — #79: "açılsın ama küçük".
   📌 YAPISI SPEC'TEN FARKLI KURULDU, sebebiyle: panel yüksekliği ZATEN
   Alpine'dan SATIR İÇİ geliyor (`panelHeight` → ['600px','720px',
   'calc(100vh - 110px)'][widthStage]) ve ⤢ düğmesi bu üç aşamayı çeviriyor.
   Yani "üç boy" diye yeni bir sistem kurmak, var olanla YARIŞAN ikinci bir
   sistem olurdu. Onun yerine TEK sınıf: küçük boy.
       küçük  → bu sınıf (clamp)          · yalnız sınıf varken
       orta   → sınıf KALKAR, çekirdeğin kendi 600px'i devralır  ← zaten ORTA
       büyük  → çekirdeğin ⤢ düğmesi, dokunulmuyor
   Böylece "tek yön, küçülme yok" kuralı yapının kendisinden geliyor.
   ⚠️ `!important` ŞART: satır içi `height` aksi hâlde kazanır.
   ⚠️ `@media (min-width:641px)`: 640 altındaki blok `block-size:var(--tb-vvh)
      !important` basıyor; karışırsa mobil kilitlenmesi geri gelir. */
@media (min-width:641px){
  .ai-chat-root .tb-chatwin.hmk-boy-kucuk{
    block-size: clamp(17rem, 38vh, 22rem) !important;
  }
  .ai-chat-root .tb-chatwin{
    transition: height .28s cubic-bezier(.22,.61,.36,1);
  }
  /* Küçük boyda avatar gizlenir — 342px'e bugünkü açılış sığmıyor ve
     küçük, büyüğün kırpılmışı olamaz. */
  .ai-chat-root .tb-chatwin.hmk-boy-kucuk .ai-chat-avatar,
  .ai-chat-root .tb-chatwin.hmk-boy-kucuk [class*="avatar"]{ display:none; }
}

/* Alttan yığma · sütun düzeni. `justify-content` BİLEREK YAZILMIYOR —
   gerekçesi ai-kunye.js'te (taşınca geçmiş erişilemez oluyor, ölçüldü). */
.ai-chat-root .ai-chat-messages{ display:flex; flex-direction:column; }
