/* ============================================================
   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;
}

/* Chat içeriğini makul genişlikte ortala — full-width'te seyrek/dağınık duruyordu
   (React widget'ta max-width yok; section-inner sınırlamalı). */
.leo-chat-section-inner {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !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; }
}

/* ============================================================
   TİPOGRAFİ BİRLİĞİ — kök çözüm (font + boyut farklılıkları)
   Sayfanın sistemi: gövde = Manrope, başlık = Lora. BeTheme içeriğinde
   inline font kalıntıları (Times New Roman, Montserrat, serif) + keyword
   font-size (large/x-large) + weight 300 bu birliği bozuyordu. Hepsini
   sisteme bağla. Tüm sayfalar (_site-overrides her yerde yüklenir).
   ============================================================ */
/* 1) Gövde metni TEK font (Manrope). BeTheme içeriğinde hem inline (Times New
   Roman, Montserrat) hem PARENT'tan inherit ile gelen yabancı font'lar vardı →
   gövde içerik elementlerine doğrudan Manrope zorla. Başlıklar (.title, h1-h6)
   HARİÇ — onlar Lora (serif) kalır. */
.section .column_attr,
.section .column_attr p,
.section .column_attr span,
.section .column_attr li,
.section .column_attr div,
.section p, .section li,
.section [style*="Times New Roman"],
.section [style*="Montserrat"],
.section [style*="font-family: serif"],
.section [style*="font-family:serif"],
.section font[face] {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* 2) inline keyword font-size → tutarlı rem ölçek */
.section [style*="font-size: large"],
.section [style*="font-size:large"]      { font-size: 1.0625rem !important; line-height: 1.7 !important; }
.section [style*="font-size: x-large"],
.section [style*="font-size:x-large"]    { font-size: 1.25rem !important; line-height: 1.55 !important; }
.section [style*="font-size: medium"],
.section [style*="font-size:medium"]     { font-size: 1rem !important; }
.section [style*="font-size: small"]     { font-size: 0.9rem !important; }
/* 3) Gövde paragraf: tutarlı boyut + weight (300 ince/dağınık → 400, 16px taban) */
.section p,
.section .column_attr,
.section li {
  font-weight: 400 !important;
}
.section p { font-size: 16px !important; line-height: 1.7 !important; }


/* ── 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);
}

/* Footer dekoratif "göz animasyonu" HTML modülü (footer template — 477 sayfada).
   BeTheme custom-width column'u ~1300px yer kaplıyor (içi ~94px göz, gerisi boş) →
   footer altında gereksiz boşluk. height:auto bu inatçı BeTheme yapısını ezemiyor;
   modül footer altı dekoratif olduğundan SECTION'ı gizliyoruz. Bu boşluk KAYNAK/
   lift-and-shift davranışı (src=raw; build-page bug'ı DEĞİL — araştırıldı).
   Tek kural, tüm sayfalar (:has → eye-icon içeren section). */
.section:has(.eye-icon-wrap) {
  display: none !important;
}

/* Footer logosu üzerine biraz boşluk (footer template — tüm sayfalar). */
#mfn-footer-template img[src*="indir.avif"] {
  margin-top: 36px;
}

/* BeTheme "İlgili Yazılar" related-posts grid (.section-related-ul.col-3) bazı
   sayfalarda container'dan geniş hesaplanıyor (post-<id>.css width kalıntısı) →
   yatay taşma (ServicePage'e taşınmış sayfalarda görünür oldu). Container'a sığdır. */
.section-related-adjustment,
.section-related-ul {
  width: auto !important;
  max-width: 100% !important;
}

/* Megamenu kolon hizalama (tüm mfn megamenu'ler — Tedaviler/Keratokonus/Medikal
   Cihazlar). Kaynak BeTheme: kolonlar float/inline-block, içerik (başlık 1-2 satır,
   paragraf farklı uzunluk) kolon yüksekliklerini kaydırıyor → görseller ve "incele"
   butonları farklı hizada (Selim bulgusu 2026-06-12). Flex: paragraf kolonu (column_column)
   esner, görsel+buton tüm kolonlarda DİPTE aynı hizaya oturur. .mcb-wrap-background-overlay
   absolute olduğundan flex akışını bozmaz. */
@media (min-width: 1240px) {
  /* Sadece desktop: mobil hamburger menüde kolonlar dikey yığılır, flex satıra zorlamasın. */
  .mfn-menu-item-megamenu .section_wrapper {
    display: flex;
    align-items: stretch;
  }
  .mfn-menu-item-megamenu .mcb-wrap {
    display: flex;
    float: none;
  }
  .mfn-menu-item-megamenu .mcb-wrap-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .mfn-menu-item-megamenu .column_column {
    flex: 1 0 auto;
  }
}

/* AI Asistan butonu (anasayfa hero, Randevu Al yanı — Selim isteği 2026-06-12).
   Tema butonuyla aynı pill form (radius 30, h~54); etrafında dönen mavi "lazer"
   şeridi: dış katman conic-gradient (animasyonlu açı), iç katman siyah pill.
   @property desteklemeyen eski tarayıcıda animasyon durur, statik degrade
   border kalır (graceful). */
@property --leo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.leo-ai-btn {
  display: inline-block;
  position: relative;
  padding: 2px !important;
  margin-inline-start: 14px;
  border-radius: 30px;
  background: conic-gradient(
    from var(--leo-angle, 0deg),
    rgba(0, 137, 247, 0.12) 0deg,
    #0089f7 70deg,
    #9bd8ff 100deg,
    rgba(0, 137, 247, 0.12) 130deg 360deg
  );
  animation: leo-laser-spin 2.6s linear infinite;
  vertical-align: middle;
  text-decoration: none;
}
.leo-ai-btn .leo-ai-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 28px;
  background: #000;
}
.leo-ai-btn .button_label {
  color: #fff;
  font-size: 14px;
  padding: 0;
}
.leo-ai-btn:hover .leo-ai-btn-inner { background: #204289; }
@keyframes leo-laser-spin {
  to { --leo-angle: 360deg; }
}
/* #ai-chat'e yumuşak kaydırma */
html { scroll-behavior: smooth; }

/* a11y skip-link (kit §11): focus gelene kadar görünmez, Tab'da sol-üstte belirir. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 10px 18px;
  background: #204289;
  color: #fff;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}