/* ============================================================
   dtfiratkarabulut.com site-wide CSS overrides
   BeTheme/MFN runtime'ından sapma gereken yerler burada.
   ============================================================ */

/* ChatWidget izolasyonu artık src/styles/global.css'de (Tailwind @layer base
   ile birlikte yüklenir, BeTheme'in unlayered rule'larını söndürür). */

/* ── AI chat section: ferah, açık tonlu, alttaki Klinik Hizmetlerimiz'den
   ayrışan kendi havası. Soft mavi-mor diagonal gradient + soft float shadow. ── */
.leo-chat-section {
  background:
    radial-gradient(circle at 80% 0%, rgba(125, 160, 220, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 0% 90%, rgba(244, 200, 180, 0.10) 0%, transparent 45%),
    linear-gradient(135deg, #fafcff 0%, #f1f5fc 50%, #faf6f3 100%) !important;
  border-radius: 32px !important;
  margin: 32px 24px !important;
  padding: 64px 28px !important;
  box-shadow:
    0 1px 3px rgba(32, 66, 137, 0.04),
    0 18px 50px -10px rgba(32, 66, 137, 0.08) !important;
}

/* ── Mobile (≤767px): chat widget her şey küçülsün, padding daralsın,
   typography sıkışmasın. Selim'in özel vurgusu: mobile çok düzgün olsun. ── */
@media (max-width: 767px) {
  .leo-chat-section {
    border-radius: 20px !important;
    margin: 16px 12px !important;
    padding: 32px 14px !important;
  }
  .leo-chat-section .leo-chat-card,
  #leo-chat-embedded .leo-chat-card {
    border-radius: 20px !important;
  }
  /* Header: brand label + AI badge sığsın */
  .leo-chat-section .leo-chat-header,
  #leo-chat-embedded .leo-chat-header {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .leo-chat-section .leo-chat-brand-label,
  #leo-chat-embedded .leo-chat-brand-label {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }
  .leo-chat-section .leo-chat-brand-badge,
  #leo-chat-embedded .leo-chat-brand-badge {
    padding: 4px 8px !important;
    gap: 4px !important;
    font-size: 10px !important;
  }
  /* Messages alanı: yükseklik mobile'a uyarla, padding daralt */
  .leo-chat-section .leo-chat-messages,
  #leo-chat-embedded .leo-chat-messages {
    height: 320px !important;
    padding: 16px 12px !important;
  }
  /* Empty state typewriter küçük */
  .leo-chat-section .leo-chat-typewriter,
  #leo-chat-embedded .leo-chat-typewriter {
    font-size: 15px !important;
    padding: 0 8px !important;
  }
  /* Starter butonları: wrap edebilir, font 13px, padding daralt */
  .leo-chat-section .leo-chat-empty button,
  #leo-chat-embedded .leo-chat-empty button {
    font-size: 12.5px !important;
    padding: 8px 12px !important;
    line-height: 1.3 !important;
    border-radius: 999px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  /* Input row */
  .leo-chat-section .leo-chat-input-row,
  #leo-chat-embedded .leo-chat-input-row {
    padding: 12px 12px 14px !important;
  }
  .leo-chat-section .leo-chat-input-inner,
  #leo-chat-embedded .leo-chat-input-inner {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .leo-chat-section .leo-chat-textarea,
  #leo-chat-embedded .leo-chat-textarea {
    font-size: 14px !important;
    min-height: 40px !important;
  }
  /* Disclaimer satırı */
  .leo-chat-section .leo-chat-disclaimer,
  #leo-chat-embedded .leo-chat-disclaimer {
    font-size: 10.5px !important;
    line-height: 1.45 !important;
    padding: 6px 8px 0 !important;
    gap: 6px !important;
  }
  /* Bubble (kullanıcı/asistan mesajları) */
  .leo-chat-section .leo-chat-bubble,
  #leo-chat-embedded .leo-chat-bubble {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    max-width: 88% !important;
  }
}


/* ── Font-size patch: BeTheme baseline (h1:65 h2:50 h3:38 h4:28) okunaksız
   olduğu için tüm headings tonu düşürüldü. Lokal-only "birebir aynı"
   sözünden minimum sapma — canlı'ya dokunulmuyor. ── */
.section h1,
.section .title h1,
.section h1.title {
  font-size: 40px !important;
  line-height: 1.25 !important;
}
.section h2,
.section h2.title {
  font-size: 30px !important;
  line-height: 1.3 !important;
}
.section h3,
.section h3.title {
  font-size: 22px !important;
  line-height: 1.4 !important;
}
.section h4,
.section h4.title {
  font-size: 18px !important;
  line-height: 1.45 !important;
}
.section h5,
.section h5.title {
  font-size: 16px !important;
}
.section h6,
.section h6.title {
  font-size: 13px !important;
}

@media (max-width: 767px) {
  .section h1,
  .section .title h1,
  .section h1.title { font-size: 28px !important; }
  .section h2, .section h2.title { font-size: 22px !important; }
  .section h3, .section h3.title { font-size: 18px !important; }
  .section h4, .section h4.title { font-size: 16px !important; }
}


/* ── Tedaviler sayfası: yapışık #f2f6fa bölümleri ana sayfadaki gibi ayrık
   yuvarlak kartlara çevir. Orijinal BeTheme tasarımı tüm içerik bölümlerini
   tek bloğa yapıştırıyordu (hero üst köşe 24px, gerisi düz). Selim onayıyla
   ana sayfa "ayrık kart" stiline getirildi (2026-05-30). Selector'lar bu
   sayfaya özgü (mcb-section ID'leri), başka sayfayı etkilemez. ── */
.mcb-section-2jjs0vuim,   /* hero — "Tedaviler" başlık */
.mcb-section-xveonr9l,    /* İmplant Tedavileri */
.mcb-section-ya97p5u2m,   /* Estetik Diş Hekimliği */
.mcb-section-1fvjg4ezo,   /* Ortodonti */
.mcb-section-lnyb4332 {   /* Genel Diş Tedavileri */
  border-radius: 24px !important;
  margin-bottom: 24px !important;
}

/* ── Alt sayfa hero'ları: kategori (estetik/ortodonti/implant/genel) + tüm
   tedavi detay sayfaları aynı açık-mavi hero section'ı (mcb-section-d8c15a1b5)
   paylaşıyor — orijinalde full-width + düz köşeli. Ana sayfadaki gibi yan
   boşluklu yuvarlak karta çevrildi. Tek kural ~28 sayfayı kapsar (2026-05-30).
   ab0b10b85: iletişim sayfası hero'su (Adres + harita), aynı şekilde. ── */
.mcb-section-d8c15a1b5,
.mcb-section-ab0b10b85 {
  border-radius: 24px !important;
  margin: 24px !important;
}

/* ── Tedavi detay sayfalarındaki gereksiz "sayfa başlığı" barı: hero'dan
   (d8c15a1b5) hemen önce gelen ince #ebf3fd şerit (örn "E-Max Kaplama").
   Hero ayrı karta çevrilince açığa çıktı; Selim onayıyla gizlendi (2026-05-30).
   :has() ile her detay sayfasındaki barı yakalar (her birinin ID'si farklı);
   kategori sayfalarında bu bar yok, etkilenmez. ── */
.mcb-section:has(+ .mcb-section-d8c15a1b5) {
  display: none !important;
}


/* ── AI chat "Gönder" + "Dosya ekle" buton ikonları: BeTheme bir kuralı SVG
   width'ini 0'a eziyordu (height doğru, ikon görünmüyordu — boş gri pill).
   id'li selector + width:auto ile viewBox oranına bırak, kare Lucide ikonu
   height'ına eşit genişlik alır. Selim "buton sorunlu" (2026-05-30).
   (width:auto SVG'de 0 verdi; bir kural width:0'ı dayatıyor, min-width ile
   layout'u zorla + specificity için .shrink-0 varyantı.) ── */
#ai-chat button svg,
#ai-chat button.shrink-0 svg,
.ai-chat-floating button svg {            /* floating panel #ai-chat dışında, ona da uygula */
  width: 1.25rem !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
}


/* ── Ana sayfa "Diş Tedavileri" kartları: orijinalde ikon (turuncu daire)
   beyaz kartın ÜSTÜNDE havada duruyordu, kart üst köşeleri düz (0 0 24 24).
   Selim isteği: beyaz panel ikonu da kapsasın = ikon + başlık + metin + buton
   tek yuvarlak beyaz kart. Kapsayıcı wrap-inner'ı beyaz panel yap, içteki
   kartın çift beyaz katmanını sıfırla (2026-05-30). ── */
.mcb-wrap-inner-1ad2a558b,
.mcb-wrap-inner-a21acb8be,
.mcb-wrap-inner-e18cdff67,
.mcb-wrap-inner-50062179c {
  background: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px -12px rgba(32, 66, 137, 0.14) !important;
  padding-top: 24px !important;
  overflow: hidden !important;
  height: 100% !important;            /* kart, column yüksekliğini tam doldursun */
}
/* 4 kart column'unu eşit yükseklik yap → alt kenarlar hizalansın (Selim isteği
   2026-05-30). align-self container'ın flex-start'ını sadece bu 4 column için
   geçersiz kılar; başlık bölümü etkilenmez. ── */
.mcb-wrap-1ad2a558b,
.mcb-wrap-a21acb8be,
.mcb-wrap-e18cdff67,
.mcb-wrap-50062179c {
  align-self: stretch !important;
}
/* Kart başlıkları: Estetik tek satır (26px), diğerleri iki satır (52px). Bu fark
   "Bilgi Al" butonlarını hizasız bırakıyordu. Başlığa 2-satır min-height ver →
   içerik+buton aynı seviyeye iner (2026-05-30). ── */
.mcb-section-e9165b8a8 h4 {
  min-height: 52px !important;
}
.mcb-wrap-inner-6515898f0,
.mcb-wrap-inner-41ccdfb24,
.mcb-wrap-inner-89be6c09a,
.mcb-wrap-inner-b3d11ec62 {
  background: transparent !important;
  border-radius: 0 !important;
}


/* ── Floating AI launcher: BeTheme global `button { padding }` kuralı butonu
   ovalleştiriyordu (66x56). Kare 56x56'ya zorla + padding sıfırla. ── */
.ai-chat-launcher {
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
}

/* ── Floating launcher ŞİMDİLİK KAPALI (Selim beğenmedi 2026-05-30). CSS ile
   gizlenemedi (Tailwind layered-!important unlayered'ı yeniyor); render
   kaynağından kapatıldı: index.astro `showFloatingChat` flag + build-page
   `FLOATING_ENABLED` flag. Geri açmak için ikisini true yap + bundle inject. ── */


/* ── Mobile sidemenu: default sol, sağa al ── */
/* HTML rewrite (build-page.mjs flipSidemenuToRight) + CSS belt-and-braces. */
.mfn-sidemenu-align-left {
  left: auto !important;
  right: 0 !important;
}
/* Sidemenu kapalıyken sağ-dışına it; açıldığında 0'a gelir. */
.mfn-sidemenu-tmpl[data-align="left"],
.mfn-sidemenu-align-left.mfn-sidemenu-tmpl {
  transform: translateX(100%);
}
.mfn-sidemenu-tmpl.is-open[data-align="left"],
.mfn-sidemenu-align-left.mfn-sidemenu-tmpl.is-open {
  transform: translateX(0);
}

/* ── Kapatma (X) butonu: menü sağdan açıldığı için X de SAĞ üst köşede olsun
   (mobilde başparmak sağa kolay ulaşır, sol köşe zor). Daire + dokunma alanı
   + hover/active dolgu ile güzelleştirildi. Selim isteği (2026-05-30). ── */
.mfn-sidemenu-closebutton {
  left: auto !important;
  right: 14px !important;
  top: 14px !important;
  width: 46px !important;
  height: 46px !important;
  line-height: 46px !important;
  text-align: center !important;
  font-size: 20px !important;
  border-radius: 50% !important;
  background: #eef2f9 !important;
  color: #204289 !important;
  box-shadow: 0 2px 10px rgba(32, 66, 137, 0.12) !important;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease !important;
}
.mfn-sidemenu-closebutton:hover,
.mfn-sidemenu-closebutton:active {
  background: #204289 !important;
  color: #ffffff !important;
  transform: scale(1.06) !important;
}