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

/* ChatWidget izolasyonu artık src/styles/global.css'de (Tailwind @layer base
   ile birlikte yüklenir, DijitalPi'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: DijitalPi 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;
}

/* İçerik prose gövdesi (.dt-article): ChatGPT scaffold sökülünce (build-page
   stripChatGptScaffold) içteki `text-base` (16px) wrapper'ı gitti → metin DijitalPi
   default 13px'e düşüyordu. Okunur 16px gövde + ferah satır aralığı (tüm viewport). */
.section .dt-article {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.section .dt-article li {
  font-size: 16px !important;
}
/* Liste maddeleri: DijitalPi `.section li` rengi (#737e86 gri) sızıyordu; gövde
   paragraflarıyla (navy #204289) tutarlı olsun (Selim: "maddeler neden gri"). */
.section .dt-article li,
.section .dt-article li p,
.section .dt-article ul,
.section .dt-article ol {
  color: #204289 !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 DijitalPi 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ı: DijitalPi 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-asistan button svg,
#ai-asistan button.shrink-0 svg,
.ai-chat-floating button svg,           /* floating panel #ai-asistan dışında, ona da uygula */
.dt-svc-right button svg,               /* tedavi sayfası ServiceChatCompact (#ai-asistan dışında) */
.dt-svc-right button.shrink-0 svg {
  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: DijitalPi 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;
}

/* Header logo'yu hero/içerik sol hizasına çek (DijitalPi logo column 5px sağdaydı) */
.mfn-header-tmpl a.logo-wrapper {
  margin-left: -5px;
}

/* Masaüstü: DijitalPi içerik bölümü (.dt-article) kit bileşenleriyle (ServiceHero/
   ServiceToc/RelatedVideos — hepsi max-width:1320px + 16px gutter, L=16) BİREBİR
   hizalansın. Lift-and-shift'te içerik section_wrapper'ı 1227 + kolon 12px inset
   ile 31px'den başlıyordu (tek aykırı). Selim: "masaüstünü de hizala". */
@media (min-width: 768px) {
  .mcb-section:has(.dt-article) .section_wrapper {
    max-width: 1320px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mcb-section:has(.dt-article) .mcb-wrap,
  .mcb-section:has(.dt-article) .mcb-wrap-inner,
  .mcb-section:has(.dt-article) .mcb-column,
  .mcb-section:has(.dt-article) .mcb-column-inner {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── Mobil "geniş ferah" düzen (2026-06-02, Selim onaylı) ──────────────────
   WP→Astro lift-and-shift'te DijitalPi mobil section padding 33px + (sökülen)
   ChatGPT scaffold iç 16px = 49px gutter → metin sütunu daracık/sıkışıktı.
   Scaffold build-page `stripChatGptScaffold` ile soyuldu; burada section
   gutter'ı 16px'e indirip kit kartlarıyla hizalı, ferah okuma genişliği sağlanır.
   TÜM bölümlere uygulanır (yazı + kart + diğer alanlar). Bu blok batch'teki
   diğer sitelere astro-clinic-kit ile taşınacak reçetenin parçasıdır. ── */
@media (max-width: 767px) {
  /* Tutarlı yan boşluk: HER bölüm tam-genişlik + içerik 16px gutter. DijitalPi
     bazı section'ları "kutuluyor" (max-width/margin → ortalı-dar) ve bazılarına
     ek section padding veriyordu → bölümler farklı sol kenardan başlıyordu
     ("hizalama kalmadı"). Section kutulamasını söndür, gutter'ı section_wrapper'da
     tek tip 16px'e sabitle (RelatedVideos/ServiceToc kart kenarıyla aynı). */
  #Content .section.mcb-section,
  .mfn-default-content-buider .section.mcb-section {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .section .section_wrapper {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Kart wrap'lerinin dış yatay gutter'ı (12px) — beyaz kutu kenarı section
     metniyle aynı 16px'e otursun; iç panel padding'i (ikon/yazı) korunur. */
  .section .mcb-wrap > .mcb-wrap-inner { margin-left: 0 !important; margin-right: 0 !important; }
  .section .mcb-wrap { padding-left: 0 !important; padding-right: 0 !important; }
  /* Gövde metni: ferah okuma ritmi */
  .section .column_attr,
  .section .dt-article {
    line-height: 1.62 !important;
  }
  /* İçerik prose (.dt-article): yabancı scaffold gidince temiz prose ritmi */
  .section .dt-article > *:first-child { margin-top: 0 !important; }
  .section .dt-article p { margin-bottom: 14px !important; }
  .section .dt-article h2 { margin-top: 30px !important; margin-bottom: 10px !important; }
  .section .dt-article h3 { margin-top: 22px !important; margin-bottom: 8px !important; }
  .section .dt-article ul,
  .section .dt-article ol { margin-bottom: 14px !important; }
}

/* ── Ana sayfa hero: "AI Asistanı aç" butonu — chat bölümüne (#ai-asistan) smooth
   scroll + kenarında dönen ince lazer ışını (conic-gradient border beam).
   "Hemen Randevu Al"ın üstüne eklendi (Selim 2026-06-02). ── */
html { scroll-behavior: smooth; }
#ai-asistan { scroll-margin-top: 90px; }

/* AI butonu: MOBİLDE ortalı (Selim "ortala"); MASAÜSTÜNDE sola — altındaki
   "Hemen Randevu Al" + "Hakkımda" butonlarıyla aynı sol kenara hizalı (3 buton
   tek hizada, Selim "hizaları farklı" düzeltmesi). */
.dt-ai-cta-col { margin-bottom: 16px; text-align: center !important; }
.dt-ai-cta-col .mcb-column-inner { padding: 0 !important; text-align: center !important; }
@media (min-width: 768px) {
  .dt-ai-cta-col,
  .dt-ai-cta-col .mcb-column-inner { text-align: left !important; }
}
.dt-ai-cta {
  position: relative;
  display: inline-flex;
  padding: 2px;                 /* lazer ring kalınlığı */
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none !important;
  background: #d8deec;          /* beam yokken görünen statik ince kenar */
  line-height: 0;
  box-shadow: 0 6px 18px -8px rgba(43, 108, 245, 0.45);
}
.dt-ai-cta__beam {
  position: absolute;
  inset: -60%;
  z-index: 0;
  background: conic-gradient(from 0deg,
    transparent 0 66%,
    rgba(91, 141, 239, 0.30) 73%,
    #5b8def 82%,
    #9fd8ff 88%,
    #5b8def 94%,
    transparent 100%);
  animation: dt-ai-beam 2.8s linear infinite;
}
.dt-ai-cta__inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #f6f8fd;
  color: #2a3550 !important;    /* DijitalPi `.section a{color:#204289}` sızmasını yen */
  font: 600 15px/1 "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  letter-spacing: 0.01em;
  transition: background 0.18s ease;
}
.dt-ai-cta:hover .dt-ai-cta__inner { background: #ffffff; }
.dt-ai-cta__icon {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;   /* DijitalPi `.section svg{width:..}` sızması */
  color: #2B6CF5;
  flex-shrink: 0;
}
.dt-ai-cta__label { white-space: nowrap; }
@keyframes dt-ai-beam { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .dt-ai-cta__beam { animation: none; }
}