/* ─────────────────────────────────────────────────────────────────────────
   DestekMerkezi widget'ı — Nature.co marka uyarlaması

   Widget destek.natureco.me'den geliyor ve gölge DOM kullanmıyor; düğmesini
   ve panelini doğrudan document.body'ye ekliyor. Bu iki sonucu doğuruyor:
   sayfanın CSS'i widget'ın içine sızıyor (aşağıdaki GİRİŞ ALANLARI bölümüne
   bakın) ve biz de widget'ı sayfadan tema verebiliyoruz.

   Neden !important: widget kendi <style> etiketini çalışma anında head'e
   ekliyor, yani bu dosyadan SONRA geliyor. Eşit özgüllükte sonra gelen
   kazanır; sıralamaya güvenmek yerine açıkça bastırıyoruz. Aynı sebeple
   --dm-* değişkenleri html üzerine satır içi yazıldığı için onları da
   !important ile geçiyoruz.

   Kalıcı çözüm not: renkler DestekMerkezi panelindeki ürün temasından
   (TEMA.renk) geliyor. Panelden natureco teması aşağıdaki değerlere
   çekilirse bu dosyanın renk bölümü gereksizleşir; giriş alanı düzeltmesi
   yine de kalmalı.
   ───────────────────────────────────────────────────────────────────────── */

/* ── GÖRÜNÜRLÜK ───────────────────────────────────────────────────────────
   Uygulama içinde widget yalnızca profil sayfasında isteniyor. Betik bir kez
   yüklendikten sonra kendini sökemediği için (kaldırma yöntemi sunmuyor),
   diğer rotalarda kök öğeye .destek-gizli konularak kapatılır —
   src/utils/destekWidget.ts. Landing sayfalarında bu sınıf hiç eklenmez. */
.destek-gizli .dm-buton,
.destek-gizli .dm-panel {
  display: none !important;
}

/* ── MARKA RENKLERİ ───────────────────────────────────────────────────────
   Landing'in sol üst logosundan alındı:
     #0E2318 yaprak gövdesi · #123528 iç yüzey · #10B981 kontur · #22D3EE gözler

   --dm-renk düğmelerin, kendi mesaj balonlarının ve başlığın ZEMİNİ olarak
   kullanılıyor, üstüne de --dm-metin (beyaz) yazılıyor. Bu yüzden logonun
   kontur yeşili #10B981 doğrudan kullanılamaz: beyazla kontrastı 2.6:1,
   okunmuyor. Aynı tondaki (hue ~161°) koyu yeşile çekildi — beyazla 5.4:1. */
html {
  --dm-renk: #0b7a57 !important;
  --dm-vurgu: #075e43 !important;
  --dm-metin: #ffffff !important;
}

/* ── AÇILIŞ DÜĞMESİ ───────────────────────────────────────────────────────
   Widget'ın kendi 💬 emojisi yerine gerçek Nature.co logosu konur; emoji
   bir metin düğümü olduğu için font-size:0 ile gizlenir. Zemin ve emerald
   halka landing'deki koyu nav üzerindeki logonun birebir aynısı, ışıması
   dahil (.logo svg → drop-shadow rgba(16,185,129,.5)). */
.dm-buton {
  font-size: 0 !important;
  background-color: #0e2318 !important;
  background-image:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" fill="none"><path d="M50 20C50 20 15 50 15 80C15 100 30 110 50 110C70 110 85 100 85 80C85 50 50 20 50 20Z" fill="%230E2318" stroke="%2310B981" stroke-width="4"/><rect x="30" y="55" width="40" height="30" rx="8" fill="%23123528"/><circle cx="40" cy="68" r="4.5" fill="%2322D3EE"/><circle cx="60" cy="68" r="4.5" fill="%2322D3EE"/></svg>'),
    linear-gradient(145deg, #0e2318, #123528) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 30px 36px, cover !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 14px 38px rgba(6, 11, 16, .45), 0 0 14px rgba(16, 185, 129, .45) !important;
}

.dm-buton:hover {
  box-shadow: 0 18px 46px rgba(6, 11, 16, .5), 0 0 20px rgba(16, 185, 129, .65) !important;
}

/* ── PANEL ────────────────────────────────────────────────────────────────
   Yazı tipi landing ile aynı sırada isteniyor. Baloo 2 / Nunito yalnızca
   landing'de yükleniyor; uygulama içinde (profil sayfası) yüklenmediği için
   listede yedekler var — widget için ayrıca font indirmiyoruz. */
.dm-panel {
  font-family: 'Baloo 2', 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  border: 1px solid rgba(16, 185, 129, .22) !important;
  box-shadow: 0 26px 80px rgba(6, 11, 16, .32) !important;
}

/* Başlık, logonun yaprak gövdesiyle aynı koyu yeşil; altında emerald kontur.
   Beyaz yazı bu zeminde 15:1'in üzerinde. */
.dm-baslik {
  background: linear-gradient(135deg, #0e2318, #123528) !important;
  border-bottom: 2px solid #10b981 !important;
}

/* ── GİRİŞ ALANLARI — ASIL HATA ───────────────────────────────────────────
   Widget .dm-form input / .dm-on-form input kurallarında `font: inherit`
   diyor ama `color` ve `background` HİÇ vermiyor. Landing'de sorun çıkmıyor
   çünkü tarayıcı öntanımlısı devrede kalıyor; uygulamanın içinde ise CSS
   sıfırlaması devreye girip rengi sayfadan miras aldırıyor ve zemini
   saydamlaştırıyor. Ölçüm: color rgb(227,229,232), background transparent —
   yani beyaz panelde beyaza yakın yazı, gönderene kadar okunmuyor.

   -webkit-text-fill-color da veriliyor: iOS ve tarayıcı otomatik doldurması
   color'ı yok sayıp bu özelliği kullanıyor. */
.dm-panel .dm-form input,
.dm-panel .dm-on-form input {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background-color: #ffffff !important;
  border: 1px solid #cfe0d6 !important;
  caret-color: #0b7a57 !important;
}

.dm-panel .dm-form input::placeholder,
.dm-panel .dm-on-form input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

.dm-panel .dm-form input:focus,
.dm-panel .dm-on-form input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18) !important;
}

/* ── OKUNAKLILIK ──────────────────────────────────────────────────────────
   Sistem satırları (#8a8f8a) gövde zemininde (#f4f7f4) 3.0:1 kalıyordu ve
   .78rem ile zaten küçükler. Aynı gri ailesinde koyultuldu → 5.9:1. */
.dm-panel .dm-mesaj.dm-sistem {
  color: #55605a !important;
}