---
title: "AI Botları JavaScript Siteleri Okuyabilir mi? | Brantial"
description: "AI crawler’ların JavaScript siteleri ne zaman okuyabildiğini öğrenin; SSR, render edilen HTML, bağlantılar, meta etiketler ve API erişimini test edin."
source_url: "https://brantial.ai/tr/blog/ai-botlari-javascript-siteleri-okuyabilir-mi/"
lang: "tr"
updated: "2026-09-15T00:00:00.000Z"
---
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://brantial.ai/tr/blog/ai-botlari-javascript-siteleri-okuyabilir-mi/#faq","mainEntity":[{"@type":"Question","name":"AI görünürlüğü için SSR zorunlu mu?","acceptedAnswer":{"@type":"Answer","text":"Her durumda değil; ancak temel açık içeriği bilinmeyen bir render motoruna bağlamadan iletmenin en güvenilir yollarından biridir. İstek bazlı çıktı gerektirmeyen içerikte statik üretim de uygundur."}},{"@type":"Question","name":"Hydration güvenli mi?","acceptedAnswer":{"@type":"Answer","text":"Anlamlı HTML önce geliyor ve hydration yalnızca etkileşim ekliyorsa evet. Hydration hatalarını test edin; navigasyon ile formların erişilebilir kaldığından emin olun."}},{"@type":"Question","name":"Uygulamayı yeniden yazmadan prerender kullanılabilir mi?","acceptedAnswer":{"@type":"Answer","text":"Geçiş adımı olabilir. Bota özel dinamik render’ı geçici tutun ve bot ile kullanıcı sürümlerini eşdeğer bırakın. Zaman içinde tek ve bakımı kolay render yolunu tercih edin."}},{"@type":"Question","name":"Tarayıcıda başarılı test crawler’ın sayfayı okuduğunu kanıtlar mı?","acceptedAnswer":{"@type":"Answer","text":"Hayır. Tarayıcı testi yalnızca o ortamdaki kullanıcı yolunun çalıştığını gösterir. Ham yanıtı, render edilen DOM’u, kaynakları, durum kodlarını, bağlantıları ve logları ayrı ayrı inceleyin."}}]}
Rehber 15 Eylül 2026
# AI Botları JavaScript Siteleri Okuyabilir mi? Render Rehberi
AI crawler’ların JavaScript siteleri ne zaman okuyabildiğini öğrenin; SSR, render edilen HTML, bağlantılar, meta etiketler ve API erişimini test edin.
## Öne Çıkanlar: JavaScript ve AI Botları
5
- Bazı crawler’lar JavaScript render eder, bazıları etmez. Temel anlamı tek bir sağlayıcının render yeteneğine bağlamamak gerekir.
- Tarayıcıda eksiksiz görünen bir sayfa, otomatik fetcher’a neredeyse boş uygulama kabuğu, eksik bağlantı veya yanlış meta etiket döndürebilir.
- Statik üretim ve sunucu tarafında render en güvenilir tabanı sağlar; hydration ana içeriği gizlemeden etkileşim ekleyebilir.
- Ham HTML, render edilen DOM, yanıt kodu, engelli kaynaklar ve taranabilir bağlantılar ayrı ayrı test edilmelidir.
- Dinamik render, değiştirebildiğiniz bir site için tercih edilen kalıcı mimari değil, geçici bir çözümdür.
[Atiye Berika Ertaş Proje Koordinatörü](https://brantial.ai/tr/yazarlar/atiye-berika-ertas/) 7 dk okuma
Paylaş [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fbrantial.ai%2Ftr%2Fblog%2Fai-botlari-javascript-siteleri-okuyabilir-mi%2F) [X](https://x.com/intent/post?text=AI%20Botlar%C4%B1%20JavaScript%20Siteleri%20Okuyabilir%20mi%3F%20Render%20Rehberi%20https%3A%2F%2Fbrantial.ai%2Ftr%2Fblog%2Fai-botlari-javascript-siteleri-okuyabilir-mi%2F) [Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbrantial.ai%2Ftr%2Fblog%2Fai-botlari-javascript-siteleri-okuyabilir-mi%2F)
[ChatGPT ile özetle](https://chatgpt.com/?q=Brantial%20i%C3%A7eri%C4%9Fini%20%C3%B6zetle%3A%20https%3A%2F%2Fbrantial.ai%2Ftr%2Fblog%2Fai-botlari-javascript-siteleri-okuyabilir-mi%2F)
 
AI botları **bazı JavaScript siteleri okuyabilir; fakat her AI sisteminin her sayfayı Chrome gibi render edeceğini varsaymamalısınız**. Bir crawler yalnızca sunucu yanıtını alabilir, scriptleri sınırlı çalıştırabilir, kullanıcının isteği üzerine tek URL’ye erişebilir veya API, çerez onayı ya da bot doğrulaması başarısız olduğunda işlemi bırakabilir.
En güvenli teknik standart basittir: sayfanın ana anlamı, temel bağlantıları, canonical URL’si ve indekslenebilirlik sinyalleri sunucu yanıtında bulunmalıdır. JavaScript deneyimi geliştirebilir; cevabın bulunduğu tek yer olmamalıdır.
## Sayfa İyi Görünürken Neden Okunamayabilir?
İstemci tarafında render edilen bir siteyi tarayıcıda açtığınızda bir saniye sonra her şey normal görünebilir. İlk sunucu yanıtında ise yalnızca şuna benzer bir yapı bulunabilir:
```
```
Ürün açıklaması, makale, iç bağlantılar, fiyat ve yapılandırılmış veri; script indirildikten ve API yanıt verdikten sonra gelir. Otomatik sistem bu zinciri tamamlamazsa sayfayı değil yalnızca boş kabuğu görür.
Render süreci ayrıca engelli script, zaman aşımı, bölgesel API kuralı, zorunlu çerez, süresi dolmuş token ve sadece kaydırma ya da tıklamayla yüklenen içerik gibi yeni hata noktaları yaratır.
## Render Modelleri Crawler Erişimini Nasıl Etkiler?
| Render modeli | İlk yanıtta ne bulunur? | Keşif güvenilirliği | Ana risk |
| --- | --- | --- | --- |
| Statik üretim (SSG) | Build sırasında oluşturulmuş eksiksiz HTML | Sabit içerikte yüksek | Build tetiklenmezse eski içerik kalması |
| Sunucu tarafında render (SSR) | Her istekte veya cache üzerinden oluşturulan eksiksiz HTML | Sunucu sağlıklıysa yüksek | Yoğunlukta yavaş veya tutarsız yanıt |
| Hydration | Faydalı HTML hazır gelir, JavaScript etkileşim ekler | İyi uygulandığında yüksek | Hydration hatası kontrolleri bozabilir, ama içerik kalır |
| İstemci tarafında render (CSR) | Minimal kabuk; sayfayı JavaScript kurar | Değişken | Önemli metin ve bağlantılar başarılı çalışmaya bağlıdır |
| Dinamik render | Botlar render edilmiş, kullanıcılar CSR sürümünü görür | Geçici çözüm | İki çıktı zamanla ayrışır ve bakım yükü yaratır |
Google’ın [JavaScript SEO temelleri](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics), tarama, render ve indekslemeyi ayrı aşamalar olarak anlatır. Ayrıca kullanıcılar ve crawler’lar için daha hızlı olduğu, her bot JavaScript çalıştırmadığı için sunucu tarafında veya önceden render yöntemlerini önerir. Google artık [dinamik render’ı kalıcı çözüm değil geçici yöntem](https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering) olarak tanımlıyor.
Bu dokümanlar özellikle Google’ı anlatır. Daha geniş mühendislik dersi yine de geçerlidir: temel erişimi her yanıt motorunun belgelenmemiş render davranışına bağlamayın.
## Beş Aşamalı JavaScript Okunabilirlik Testi
Her şablondan örnek URL seçip beş katmanı ayrı ayrı test edin.
### 1. HTTP yanıtı
Durum kodunu, yönlendirme yolunu, yanıt başlıklarını ve son URL’yi kaydedin. Sayfa tarayıcıda hata gösterirken `200` dönebilir veya yalnızca belirli ülke ve ağlardan gelen isteklere `403` verebilir.
### 2. Ham HTML
Kaynağı görüntüleyerek veya bir HTTP istemcisiyle sunucu yanıtını inceleyin. Sayfa başlığını, H1’i, ilk paragrafı, canonical’ı, robots direktifini, ana ürün ya da makale verisini ve iç bağlantıları arayın.
Bunların hiçbiri JavaScript çalışmadan görünmüyorsa sayfayı render bağımlı olarak kaydedin.
### 3. Render edilen DOM
Sayfayı bir render testinde yükleyip son DOM’u ham yanıtla karşılaştırın. Google’a özgü sorun giderme için URL Denetleme ve Zengin Sonuçlar Testi; render edilen HTML’yi, kaynak hatalarını ve konsol sorunlarını gösterebilir. Google’ın [JavaScript sorun giderme rehberi](https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript) bu akışı açıklar.
### 4. Kaynaklar ve API’ler
Script, stil, font, görsel ve veri API’lerinin kullanıcı oturumu olmadan istenebildiğini kontrol edin. robots.txt engellerini, CORS hatalarını, WAF doğrulamasını, `401`, `403`, `429` ve yavaş API yanıtlarını inceleyin.
### 5. Bağlantılar ve etkileşimler
Önemli keşif yolları gerçek `href` değerli bağlantılar kullanmalıdır. Yalnızca `onclick` ile rota değiştiren kart ziyaretçide çalışsa bile crawler’a hedef göstermeyebilir. Hover, sekme tıklaması veya sonsuz kaydırma sonrasında gelen temel içerik için de erişilebilir URL ya da sunucu çıktısı gerekir.
## En Sık Görülen JavaScript SEO ve AI Hazırlık Sorunları
### Boş uygulama kabuğu
Sayfanın anlamlı içeriği yalnızca istemci paketinde bulunur. Açık içerik için SSR veya SSG kullanıp etkileşimli parçaları sonradan hydrate edin.
### Yalnızca istemcide oluşan title, canonical ve robots direktifi
Meta etiketler sayfa açıldıktan sonra eklenir veya değiştirilir. Son canonical ve indeksleme talimatını mümkünse ilk HTML’ye koyun. Bir canonical gönderip hydration sonrasında başkasıyla değiştirmeyin.
### Yanlış `200` yanıtları
Olmayan ürün veya makale hata mesajı gösterir, fakat sunucu `200` döner. Eksik kaynakta gerçek `404`, geçici sunucu sorununda uygun `5xx` yanıtı verin.
### Buton olarak kurulan bağlantılar
Navigasyon kartları ve sayfalama click handler’a bağlıdır. Gezinme için semantik bağlantı, mevcut sayfadaki işlem için buton kullanın.
### Etkileşim bekleyen lazy loading
İlk ekran gelir, ancak karşılaştırma tablosu veya yazının devamı tıklama ya da kaydırma olmadan DOM’a hiç eklenmez. Ana içeriğin HTML’de olduğundan veya kullanıcı hareketi olmadan yüklendiğinden emin olun.
### Sayfayla çelişen yapılandırılmış veri
JSON-LD sunucudan, görünen stok veya fiyat daha güncel bir istemci API’sinden gelir. İki çıktının aynı veri kaynağına ve güncelleme politikasına bağlanması gerekir.
### İçeriği de geciktiren çerez onayı
Onay yöneticisi analitiği bilinçli olarak bekletirken normal sayfa içeriğini ve bağlantıları da yanlışlıkla gizler. Seçim yapılmamış ve reddedilmiş durumlar dâhil her onay durumunu test edin.
## İlk HTML’de Mutlaka Neler Bulunmalı?
Açık editoryal ve ticari sayfalarda şu alanları ilk yanıta koymayı hedefleyin:
- özgün title ve meta description,
- canonical ve dil alternatifleri,
- ana başlık ve doğrudan yanıt,
- ürün, hizmet veya yazıyı tanımlayan temel bilgi,
- ana navigasyon ve bağlamsal iç bağlantılar,
- gerektiğinde görünür yazar, kurum ve tarih bilgisi,
- görünür sayfayla eşleşen yapılandırılmış veri.
Etkileşimli hesaplayıcı veya canlı stok seçici istemci tarafında kalabilir. Çevresindeki açıklama, mevcut seçenekler ve hedef bağlantılar JavaScript kapanınca kaybolmamalıdır.
## ChatGPT, Claude ve Perplexity İçin Durum Ne?
Sağlayıcı botlarının amaçları farklıdır. Arama crawler’larını, eğitim crawler’larını ve kullanıcı isteğiyle çalışan fetcher’ları tek render motoru gibi değerlendirmemek gerekir. Açık dokümanlar genellikle bot kimliği ve erişim kontrolünü, kalıcı JavaScript çalıştırma özelliklerinden daha net açıklar.
Bu nedenle mimari, tahmin edilen bir yeteneği hedeflemek yerine kontrollü şekilde geriye uyum sağlamalıdır. OpenAI, ChatGPT arama uygunluğu için `OAI-SearchBot`a izin verilmesini önerir ve sunucu ya da CDN engelinin erişimi yine kesebileceğini belirtir. Bot politikalarının ayrıntısı [AI bot trafiği ve crawl log analizi](https://brantial.ai/tr/blog/ai-bot-trafigi-ve-crawl-log-analizi-rehberi/) rehberinde yer alıyor.
## İstemci Tarafında Render Edilen Site İçin Geçiş Listesi
Tüm ürünü bir kerede yeniden yazmanız gerekmez. Keşif ve karar sürecini destekleyen açık şablonlardan başlayın.
1. Rotaları çıkarın ve şablona göre gruplayın.
2. Her gruptan bir URL’nin ham ve render edilmiş HTML’sini kaydedin.
3. Title, canonical, ana metin, temel veri ve iç bağlantıları sunucu ya da statik çıktıya taşıyın.
4. Filtre, kişiselleştirme, hesaplayıcı ve hesap işlemlerinde JavaScript kullanmaya devam edin.
5. Doğru durum kodlarını sunucudan verin.
6. API ve asset erişimini bölgeler ve doğrulanmış crawler’lar arasında tutarlı hâle getirin.
7. Yayından sonra görünür içerikle yapılandırılmış veriyi karşılaştırın.
8. Log, indeksleme, AI kaynak gösterimi ve gerçek yönlendirme oturumlarını izleyin.
Diğer teknik ve editoryal katmanları [AI Site Denetimi Kontrol Listesi](https://brantial.ai/tr/blog/ai-site-denetimi-kontrol-listesi/) ile inceleyebilirsiniz. [Brantial Site Health](https://brantial.ai/tr/features/site-health/) tekrar eden sorunları etkilenen her URL’yi ayrı görev yapmadan şablon bazında gruplamaya yardımcı olur.
## Sık Sorulan Sorular
### AI görünürlüğü için SSR zorunlu mu?
Her durumda değil; ancak temel açık içeriği bilinmeyen bir render motoruna bağlamadan iletmenin en güvenilir yollarından biridir. İstek bazlı çıktı gerektirmeyen içerikte statik üretim de uygundur.
### Hydration güvenli mi?
Anlamlı HTML önce geliyor ve hydration yalnızca etkileşim ekliyorsa evet. Hydration hatalarını test edin; navigasyon ile formların erişilebilir kaldığından emin olun.
### Uygulamayı yeniden yazmadan prerender kullanılabilir mi?
Geçiş adımı olabilir. Bota özel dinamik render’ı geçici tutun ve bot ile kullanıcı sürümlerini eşdeğer bırakın. Zaman içinde tek ve bakımı kolay render yolunu tercih edin.
### Tarayıcıda başarılı test crawler’ın sayfayı okuduğunu kanıtlar mı?
Hayır. Tarayıcı testi yalnızca o ortamdaki kullanıcı yolunun çalıştığını gösterir. Ham yanıtı, render edilen DOM’u, kaynakları, durum kodlarını, bağlantıları ve logları ayrı ayrı inceleyin.
↑ Başa dön
## Diğer Yazılar
[Daha fazla içeriğe göz at](https://brantial.ai/tr/blog/)
Yazı 22 Eki 2026
### AI Motorları Hangi Siteleri Kaynak Gösteriyor?
95.144 AI cevabındaki 639.334 kaynağı inceledik. Atıfların %92’si Vikipedi ya da Reddit’e değil sıradan sitelere gidiyor; her motorun kendi gözdesi var.
[AI Motorları Hangi Siteleri Kaynak Gösteriyor?](https://brantial.ai/tr/blog/ai-motorlari-hangi-siteleri-kaynak-gosteriyor/)
Yazı 22 Eki 2026
### LLM SEO Rehberi: AI Modellerinde Bulunmak ve Kaynak Olmak
LLM SEO, içeriğinizi ChatGPT, Gemini, Claude ve Perplexity için bulunur ve kaynak gösterilebilir kılar. AI cevaplarının %89’u önce web’de arıyor; işte yapılacaklar.
[LLM SEO Rehberi: AI Modellerinde Bulunmak ve Kaynak Olmak](https://brantial.ai/tr/blog/llm-seo-rehberi/)
Yazı 21 Eki 2026
### Arama Botu Nedir? 2026 Arama Motoru ve AI Botları Listesi
Arama botu, sayfalarınızı arama motorları ve AI asistanları için ziyaret eder. 2026’da hangi botun ne yaptığını ve robots.txt’te hangisine izin vermeli?
[Arama Botu Nedir? 2026 Arama Motoru ve AI Botları Listesi](https://brantial.ai/tr/blog/arama-botu-nedir/)
800 bin+ ANALİZ EDİLEN AI CEVABI
8 CEVAP MOTORU
HAFTALIK ENDEKS
TARANAN MOTORLAR:
ChatGPT Gemini Claude Perplexity Grok Mistral Meta AI DeepSeek
ÜRÜN:
[Platforma Genel Bakış](https://brantial.ai/tr/platform/) [Prompt Hacimleri](https://brantial.ai/tr/features/prompt-volumes/) [AI Otorite Endeksi](https://brantial.ai/tr/ai-authority-index/) [AI Sektör Endeksi](https://brantial.ai/tr/ai-sektor-endeksi/) [1 Analiz Hakkı](https://brantial.ai/tr/brandscore/) [Agent Analytics](https://brantial.ai/tr/features/agent-analytics/) [Entegrasyonlar](https://brantial.ai/tr/integrations/) [Fiyatlandırma](https://brantial.ai/tr/pricing/)
ŞİRKET:
[Hakkımızda](https://brantial.ai/tr/about/) [Güven Merkezi](https://brantial.ai/tr/trust/) [Kariyer](https://brantial.ai/tr/careers/) [Partner Programı](https://brantial.ai/tr/agency-partner/) [Brantial University](https://university.brantial.ai/tr) [Visionary Share](https://brantial.ai/community/visionary-share/) [Beyond Click](https://brantial.ai/tr/beyond-click/) [Vaka Çalışmaları](https://brantial.ai/tr/case-studies/) [İletişim](https://brantial.ai/tr/contact/)
KAYNAKLAR:
[Kaynak Merkezi](https://brantial.ai/tr/resources/) [Araştırma Raporları](https://brantial.ai/tr/reports/) [Sektörler](https://brantial.ai/tr/industries/) [Vaka Çalışmaları](https://brantial.ai/tr/case-studies/) [Türkiye AI Otorite Endeksi](https://brantial.ai/tr/ai-authority-index/) [AI Sektör Endeksi](https://brantial.ai/tr/ai-sektor-endeksi/) [Otomotiv AI Raporu](https://brantial.ai/tr/reports/otomotiv-sektorunde-ai-gorunurlugu-brantial-2026-raporu/) [GEO Sözlüğü](https://brantial.ai/tr/glossary/) [GEO Rehberi](https://brantial.ai/generative-engine-optimization-guide/) [Blog](https://brantial.ai/tr/blog/) [Karşılaştırma Merkezi](https://brantial.ai/tr/compare/)
Brantial, AI görünürlüğünü anlamak ve içerik çalışmalarını geliştirmek için araçlar sunar. Agentic commerce yönümüz, ürün bilgisi ve alışveriş görevlerinin doğruluğuna odaklanır. Webtures LTD tarafından işletilir.
WEBTURES LTD. · Şirket No. 11948574 494a Fulham Road, London, England, SW6 5NH [hello@brantial.ai](mailto:hello@brantial.ai)
SERTİFİKALAR:
KVKK GDPR SOC 2 · SÜREÇTE
[ Sertifikalı GEO Partner programı: rozet, dizin ve toptan marj](https://brantial.ai/tr/agency-partner/)
Haftalık Görünürlük Endeksi
Her hafta GEO trendleri ve içgörüler, e-postanda.
[Abone ol](https://www.linkedin.com/newsletters/g%C3%B6r%C3%BCn%C3%BCrl%C3%BCk-raporu-7449413673988583424/)
© 2026 Brantial · Webtures LTD
[TR](https://brantial.ai/tr/blog/ai-botlari-javascript-siteleri-okuyabilir-mi/) [EN](https://brantial.ai/blog/can-ai-crawlers-read-javascript-websites/)
[Gizlilik](https://brantial.ai/privacy-policy/) [Şartlar](https://brantial.ai/terms-of-service/) [Çerezler](https://brantial.ai/cookie-policy/)
ÜCRETSİZ MARKA ANALİZİ
## Analiz hakkınızı kullanın
Brantial University
## Merhaba, hadi başlayalım!
Hızlı çözüm, tek mesaj uzağınızda.
**Sorunuzu ekibe yazın** Genellikle birkaç dakika içinde yanıtlarız
**Brantial University** GENELLİKLE BİRKAÇ DAKİKA İÇİNDE YANITLAR
div { min-width: 0; flex: 1; } .br-chat__header strong { display: block; font-size: 14px; font-weight: 600; line-height: normal; } .br-chat__header small { display: block; margin-top: 3px; color: var(--br-chat-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.55; } .br-chat__log { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 8px; overflow-y: auto; padding: 14px; } .br-chat__messages { display: flex; flex-direction: column; gap: 8px; } .br-chat__bubble { max-width: 85%; margin: 0; padding: 8px 12px; overflow-wrap: anywhere; border-radius: 12px; color: var(--br-chat-copy); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; } .br-chat__bubble--visitor { align-self: flex-end; border: 1px solid var(--br-chat-outer-line); border-radius: 12px 12px 4px; background: var(--br-chat-visitor-bg); color: var(--br-chat-visitor-text); } .br-chat__bubble--team { align-self: flex-start; border-radius: 12px 12px 12px 4px; background: var(--br-chat-team-bg); } .br-chat__email-area { width: 100%; } .br-chat__email-form { display: grid; width: 100%; max-width: 292px; gap: 8px; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--br-chat-team-bg); } .br-chat__email-form label { color: var(--br-chat-copy); font-size: 13.5px; font-weight: 400; line-height: 1.55; } .br-chat__email-form > div { display: flex; gap: 8px; } .br-chat__email-form input { min-width: 0; height: 38px; flex: 1; padding: 9px 10px; border: 1px solid var(--br-chat-line); border-radius: 8px; background: var(--br-chat-input); color: var(--br-chat-copy); font-size: 13.5px; } .br-chat__email-form input[aria-invalid='true'] { border-color: #d14343; } .br-chat__email-form button { display: flex; width: 38px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: var(--br-chat-visitor-bg); color: var(--br-chat-visitor-text); font-size: 16px; cursor: pointer; } .br-chat__email-form button:disabled { cursor: wait; opacity: 0.62; } .br-chat__error { margin: 0; color: #d14343; font-size: 11.5px; line-height: 1.4; } .br-chat__composer { display: flex; min-height: 59px; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--br-chat-line); background: var(--br-chat-surface); } .br-chat__composer input { min-width: 0; height: 38px; flex: 1; padding: 9px 12px; border: 1px solid var(--br-chat-line); border-radius: 10px; background: var(--br-chat-input); color: var(--br-chat-copy); font-size: 13.5px; } .br-chat__composer button { display: flex; width: 40px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--br-chat-muted); cursor: pointer; } .br-chat__composer button:hover:not(:disabled) { color: var(--br-chat-text); } .br-chat__composer button:disabled, .br-chat__composer input:disabled { cursor: default; } .br-chat__composer button span { font-size: 17px; line-height: 1; } .br-chat__composer input::placeholder, .br-chat__email-form input::placeholder { color: var(--br-chat-faint); opacity: 1; } .br-chat__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 480px) { .br-chat__panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); height: min(480px, calc(100dvh - 70px)); } .br-chat__icon-button { width: 44px; height: 44px; } .br-chat__composer input, .br-chat__email-form input { height: 44px; font-size: 16px; } .br-chat__composer button, .br-chat__email-form button { width: 44px; height: 44px; } .br-chat__start-card button { display: inline-flex; min-height: 44px; align-items: center; } } @media (prefers-reduced-motion: reduce) { .br-chat__launcher { transition: none; } }