> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stil

> ThunderPhone sesli bileşeninin görünümünü CSS ile özelleştirin

Widget, yerleşik açık ve koyu temalara sahip cam efektli bir çubuk olarak oluşturulur. Özelleştirme üç düzeyde yapılabilir: yaygın seçenekler için prop'lar, tema oluşturma için CSS özel özellikleri ve tam kontrol için CSS sınıf geçersiz kılmaları.

<Note>
  Bu stil seçenekleri, `ThunderPhoneWidget` React bileşeni ve `ThunderPhone.mount()` CDN yöntemi tarafından oluşturulan önceden hazırlanmış widget için geçerlidir. Tamamen özel bir kullanıcı arayüzüne ihtiyacınız varsa bunun yerine [headless hook'u](/tr/widget/headless-hook) kullanın.
</Note>

***

## Temalar

`theme` prop'u, widget'ın renk şemasını kontrol eder. Widget köküne `tp--light` veya `tp--dark` sınıfını uygular:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>
```

| Tema      | Sınıf       | Açıklama                                 |
| --------- | ----------- | ---------------------------------------- |
| `'light'` | `tp--light` | Koyu metinli açık arka plan. Varsayılan. |
| `'dark'`  | `tp--dark`  | Açık metinli koyu arka plan.             |

Her iki tema da arka plan bulanıklığı ve hafif saydamlık içeren cam efektli çubuk tasarımını kullanır.

***

## CSS Özel Özellikleri

Widget, tek tek sınıflara dokunmadan renkleri değiştirmek için geçersiz kılabileceğiniz CSS özel özelliklerini (değişkenlerini) sunar. Bunlar, `.tp-widget` köküne uygulanan tema sınıfı (`.tp--light` veya `.tp--dark`) tarafından tanımlanır:

| Özellik              | Varsayılan (açık)                       | Varsayılan (koyu)                        | Açıklama                                                                                                                                                     |
| -------------------- | --------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `--tp-accent`        | `#000`                                  | `#fff`                                   | Vurgu rengi: başlat düğmesi, dalga biçimi çubukları, bağlanma noktası, bağlı durum metni. `primaryColor` prop'u aracılığıyla **satır içi** olarak ayarlanır. |
| `--tp-bg`            | `rgba(255, 255, 255, 0.82)`             | `rgba(15, 15, 15, 0.85)`                 | Çubuk arka planı (yarı saydam; `--tp-glass` tarafından bulanıklaştırılır).                                                                                   |
| `--tp-surface`       | `rgba(0, 0, 0, 0.04)`                   | `rgba(255, 255, 255, 0.07)`              | Sessize alma düğmesi arka planı.                                                                                                                             |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)`                   | `rgba(255, 255, 255, 0.12)`              | Sessize alma düğmesinin üzerine gelindiğindeki arka planı.                                                                                                   |
| `--tp-border`        | `rgba(0, 0, 0, 0.08)`                   | `rgba(255, 255, 255, 0.1)`               | Çubuk ve düğme kenarlıkları.                                                                                                                                 |
| `--tp-border-hover`  | `rgba(0, 0, 0, 0.14)`                   | `rgba(255, 255, 255, 0.18)`              | Üzerine gelindiğindeki kenarlık rengi.                                                                                                                       |
| `--tp-text`          | `rgba(0, 0, 0, 0.88)`                   | `rgba(255, 255, 255, 0.95)`              | Birincil metin (başlık, ajan adı).                                                                                                                           |
| `--tp-text-2`        | `rgba(0, 0, 0, 0.5)`                    | `rgba(255, 255, 255, 0.55)`              | İkincil metin (alt başlık, durum satırı, arama zamanlayıcısı).                                                                                               |
| `--tp-glass`         | `blur(32px) saturate(180%)`             | `blur(32px) saturate(180%)`              | Çubuk üzerinde cam efektini oluşturan `backdrop-filter`.                                                                                                     |
| `--tp-shadow`        | üç katmanlı gölge yığını                | üç katmanlı gölge yığını                 | Çubuğun `box-shadow` değeri (halka + yakın + uzak katmanlar).                                                                                                |
| `--tp-shadow-hover`  | üç katmanlı gölge yığını                | üç katmanlı gölge yığını                 | Üzerine gelindiğinde yükselme efekti için tanımlanmıştır; şu anda hiçbir kural tarafından uygulanmaz.                                                        |
| `--tp-glow`          | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Çubuk gölgesine katman olarak eklenen iç üst vurgulama.                                                                                                      |
| `--tp-connected`     | `#059669`                               | `#34d399`                                | Bağlı durum göstergesi rengi (durum noktası).                                                                                                                |
| `--tp-error`         | `#dc2626`                               | `#fb7185`                                | Hata durumu metin rengi.                                                                                                                                     |
| `--tp-end-bg`        | `rgba(239, 68, 68, 0.08)`               | `rgba(251, 113, 133, 0.12)`              | Aramayı sonlandır düğmesi arka planı.                                                                                                                        |
| `--tp-end-color`     | `#ef4444`                               | `#fb7185`                                | Aramayı sonlandır düğmesi simge rengi.                                                                                                                       |
| `--tp-end-border`    | `rgba(239, 68, 68, 0.12)`               | `rgba(251, 113, 133, 0.15)`              | Aramayı sonlandır düğmesi kenarlığı.                                                                                                                         |
| `--tp-end-hover`     | `rgba(239, 68, 68, 0.14)`               | `rgba(251, 113, 133, 0.2)`               | Aramayı sonlandır düğmesinin üzerine gelindiğindeki arka planı.                                                                                              |
| `--tp-idle-opacity`  | `0.4`                                   | `0.3`                                    | Boşta durumunda karartma için tanımlanmıştır; şu anda hiçbir kural tarafından uygulanmaz.                                                                    |

### Özel Özellikleri Geçersiz Kılma

Vurgu rengini `primaryColor` prop'u aracılığıyla ayarlayın:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--tp-accent`, `primaryColor` prop'undan **satır içi stil** olarak ayarlanır; bu nedenle `--tp-accent` için stil sayfası geçersiz kılmaları etkili olmaz. Vurgu rengini prop ile değiştirin. Diğer tüm özel özellikler CSS'te geçersiz kılınabilir.
</Warning>

Diğer özel özellikleri CSS ile geçersiz kılın. Stil sayfası sırasından bağımsız olarak kuralınızın varsayılanları tanımlayan tema sınıfından daha yüksek önceliğe sahip olması için iki sınıflı bir seçici (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) kullanın:

```css theme={null}
.tp-widget.tp--light {
  --tp-bg: rgba(0, 0, 0, 0.9);
  --tp-text: rgba(255, 255, 255, 0.95);
  --tp-text-2: rgba(255, 255, 255, 0.55);
  --tp-border: rgba(255, 255, 255, 0.15);
}
```

***

## CSS Sınıfları

Mevcut stillerinizle çakışmaları önlemek için tüm widget sınıfları `tp-` ile başlar.

| Sınıf                         | Öğe                           | Açıklama                                                                                                                                                                                               |
| ----------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `.tp-widget`                  | Kök sarmalayıcı               | Sabit konumlu kapsayıcı (`position: fixed`, köşe `position` prop'u tarafından ayarlanır, `z-index: 9999`). Tema sınıfını ve temel yazı tipi ayarlarını taşır; kendine ait görsel bir çerçevesi yoktur. |
| `.tp--light` / `.tp--dark`    | Tema değiştiricileri          | Temayla birlikte `.tp-widget` öğesine uygulanır; tüm `--tp-*` özel özelliklerini tanımlar.                                                                                                             |
| `.tp-bar`                     | Çubuk                         | Cam görünümlü hap şeklinin kendisi: arka plan, arka plan bulanıklığı, kenarlık, `99px` yarıçap, gölge. `300px` genişliğindedir.                                                                        |
| `.tp-meta`                    | Metin bloğu                   | Tüm metinlerin kapsayıcısıdır -- boşta başlık ve alt başlık, arama sırasında ajan adı ve durum.                                                                                                        |
| `.tp-name`                    | Birincil etiket               | Boştayken `title` prop'unu, arama sırasında ise bağlı yapay zeka ajanının adını (`title` yedek olarak kullanılır) gösterir.                                                                            |
| `.tp-sub`                     | Alt başlık                    | Boştayken gösterilen "Şimdi kullanılabilir" satırı.                                                                                                                                                    |
| `.tp-start`                   | Boşta arama düğmesi           | Dairesel vurgu renkli başlatma düğmesi (42px). Arka plan olarak `--tp-accent` kullanır.                                                                                                                |
| `.tp-dot`                     | Bağlanma noktası              | Bağlanırken çubuğun solunda gösterilen, titreşimli vurgu renkli nokta.                                                                                                                                 |
| `.tp-wave` / `.tp-wave--idle` | Dalga formu                   | Beş çubuklu dalga formu. `--idle` yavaş nefes alma animasyonunu ekler; arama sırasında çubuklar sese duyarlıdır.                                                                                       |
| `.tp-button`                  | Arama sırasındaki düğmeler    | Arama sırasındaki kontroller için temel stil (42px, yuvarlatılmış 12px).                                                                                                                               |
| `.tp-button-group`            | Düğme satırı                  | Arama sırasında sessize alma ve sonlandırma düğmelerini sarar.                                                                                                                                         |
| `.tp-button--start`           | Bağlan düğmesi varyantı       | Arama başlatılırken gösterilen vurgu renkli varyant.                                                                                                                                                   |
| `.tp-button--mute`            | Sessize alma anahtarı         | Arama sırasında mikrofonu sessize alır/sessizi kaldırır. `--tp-surface` kullanır.                                                                                                                      |
| `.tp-button--end`             | Aramayı sonlandır düğmesi     | Aramayı kapatır. `--tp-end-*` paletini kullanır.                                                                                                                                                       |
| `.tp-button--loading`         | Yükleme değiştiricisi         | Bağlanırken düğmeyi soluklaştırır.                                                                                                                                                                     |
| `.tp-icon` / `.tp-spin`       | Simgeler                      | Düğme simgesi boyutlandırması; `tp-spin` bağlanma yükleme simgesini canlandırır.                                                                                                                       |
| `.tp-status`                  | Arama sırasındaki durum bloğu | Bağlanıyor/bağlı/hata durumları sırasında durum satırını sarar.                                                                                                                                        |
| `.tp-status__text`            | Durum satırı                  | Bağlantı durumu metni (ör. "Bağlanıyor...") veya arama zamanlayıcısı. Duruma göre `.tp-status--connected` (vurgu rengi) ya da `.tp-status--error` (hata rengi) alır.                                   |
| `.tp-status__name`            | Ajan adı alanı                | Durum bloğunun bir parçasıdır, ancak mevcut çubuk düzeninde görüntülenmez -- ajan adı bunun yerine `.tp-name` içinde görünür.                                                                          |
| `.tp-status__dot`             | Durum noktası                 | Titreşimli bağlı durum noktası stili (`--tp-connected` kullanır).                                                                                                                                      |

***

## Örnekler

### Props ile Özel Vurgu Rengi

Widget'ı markanıza uyarlamanın en basit yolu:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="light"
  primaryColor="#059669"
  title="Talk to support"
/>
```

### CSS ile Özel Renkler

Renkleri tamamen kontrol etmek için özel özellikleri geçersiz kılın. Vurgu renginin CSS'den değil, `primaryColor` prop'undan geldiğini unutmayın:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
```

```css theme={null}
/* Emerald theme for everything else */
.tp-widget.tp--light {
  --tp-bg: rgba(236, 253, 245, 0.85);
  --tp-text: rgba(6, 78, 59, 0.95);
  --tp-text-2: rgba(4, 120, 87, 0.8);
  --tp-border: rgba(5, 150, 105, 0.2);
}
```

### Özel Boyut

Çubuk, düğme ve metin boyutlarını ayarlayarak widget'ı büyütün veya küçültün:

```css theme={null}
/* Wider bar */
.tp-bar {
  width: 340px;
}

/* Larger buttons (42px by default) */
.tp-start,
.tp-button {
  width: 56px;
  height: 56px;
}

/* Larger text */
.tp-name {
  font-size: 16px;
}

.tp-sub,
.tp-status__text {
  font-size: 14px;
}
```

### Metin Etiketlerini Gizleme

Widget'taki tüm metinler `.tp-meta` içinde bulunur. Yalnızca dalga formunu ve düğmeleri bırakmak için bunu tamamen gizleyin:

```css theme={null}
.tp-meta {
  display: none;
}
```

Ya da tek tek bölümleri gizleyin:

```css theme={null}
/* Hide only the idle "Available now" subtitle */
.tp-sub {
  display: none;
}

/* Hide only the in-call status line (connection state / timer) */
.tp-status {
  display: none;
}
```

<Note>
  Boşta durum etiketi `.tp-name`/`.tp-sub` içinde bulunur, `.tp-status` içinde değil -- yalnızca `.tp-status` öğesini gizlemek, widget boşta olduğunda başlığı göstermeye devam eder.
</Note>

### Temaya Özgü Geçersiz Kılmalar

Tema sınıfıyla belirli bir temayı hedefleyin:

```css theme={null}
/* Only affect dark theme */
.tp--dark .tp-start {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

/* Only affect light theme */
.tp-widget.tp--light {
  --tp-bg: rgba(255, 255, 255, 0.95);
}
```

***

## className ile Kapsam Belirleme

React bileşenini kullanırken, geçersiz kılmalarınızı belirli bir widget örneğiyle sınırlamak için bir `className` prop'u geçirin:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>
```

Ardından CSS'nizde bu sınıfı hedefleyin:

```css theme={null}
.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}

.support-widget .tp-name {
  font-weight: 700;
}
```

Bu sayede aynı sayfada farklı stillere sahip birden fazla widget örneği kullanabilirsiniz. Her örneğe `primaryColor` prop'u üzerinden kendi vurgu rengini verin (CSS, `--tp-accent` özelliğini geçersiz kılamaz -- bu özellik satır içi olarak ayarlanır).

***

## Tamamen Özel Arayüz

CSS geçersiz kılmaları yeterli değilse [headless hook](/tr/widget/headless-hook) size tam kontrol sağlar. Tüm HTML'yi ve stillendirmeyi siz sağlarken, `useThunderPhone` ses oturumunu yönetir. Hook ayrıca dalga formları gibi sese tepki veren görselleştirmeler oluşturmak için `audioLevelRef` sağlar.

```tsx theme={null}
import { useThunderPhone } from '@thunderphone/widget'

function MyWidget() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })

  return (
    <div className="my-totally-custom-widget">
      {/* Your own buttons, animations, layouts -- anything */}
      <button onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}>
        {phone.state === 'connected' ? 'Hang up' : 'Call us'}
      </button>
      {phone.audio}
    </div>
  )
}
```

<Tip>
  Sese tepki veren animasyonlara, özel düzenlere veya mevcut bir bileşen kitaplığıyla entegrasyona ihtiyacınız olduğunda headless hook doğru seçimdir. Hızlı tema ayarlamaları için CSS geçersiz kılmaları ve özel özellikler daha uygundur.
</Tip>