/* ============================================================
   custom.css — elle yapılan tasarım override'ları
   style.css (derlenmiş Tailwind) DEĞİŞTİRİLMEZ; tüm özelleştirmeler buraya.
   Bu dosya head'de style.css'ten SONRA yüklenir → cascade'i kazanır.
   ============================================================ */

/* Buton köşelerini yuvarla.
   Not: base kural `.logo>span,.btn,.nav .btn{border-radius:0}` olduğu için
   nav CTA'sını da kapsamak adına `.nav .btn` selektörünü ayrıca hedefliyoruz. */
.btn,
.nav .btn {
  border-radius: 14px;
}

/* Yeşil (WhatsApp) butonlarda metin rengi beyaz.
   Koyu yeşil (#082d19) `[href*="wa.me"]` kurallarından geliyordu; base + hover +
   focus + mobil bar dahil aynı selektörleri hedefleyip beyaza çeviriyoruz. */
a.btn[href*="wa.me"],
.emergency-phone[href*="wa.me"],
.site-header a.btn[href*="wa.me"],
.mobile-bar a[href*="wa.me"],
.mobile-bar a[href*="wa.me"] b,
a.btn[href*="wa.me"]:hover,
.emergency-phone[href*="wa.me"]:hover,
.mobile-bar a[href*="wa.me"]:hover,
a.btn[href*="wa.me"]:focus-visible,
.emergency-phone[href*="wa.me"]:focus-visible,
.mobile-bar a[href*="wa.me"]:focus-visible {
  color: #fff;
}

/* ============================================================
   Buton boyutlandırma — Apple HIG / apple.com best-practice
   Referans: apple.com primary buton ~17px / weight 400, padding ~11×22px,
   pill; min tap 44–48px (HIG). Önceki durum: weight 800 + .large 16/26 +
   1.05rem + tam-genişlik → ~62px "chunky slab". Aşağısı bunu ~46-48px'e,
   içeriğe göre genişliğe ve daha hafif metne indirir.
   ============================================================ */

/* Tüm butonlar: daha hafif metin ağırlığı, dengeli tap yüksekliği */
.btn {
  font-weight: 600;
  min-height: 46px;
  letter-spacing: -0.01em;
}

/* Hero / büyük CTA: apple.com ölçülerine yakın (~48px) */
.btn.large {
  padding: 13px 24px;
  font-size: 1rem;          /* ~16px — Apple 17px aralığı */
}

/* Hero CTA'yı içeriğe göre daralt — tam genişlik slab yerine hug-content, ortalı.
   Not: masaüstünde grid kolonu içeriğe göre daralıp (auto) sola yerleşiyordu;
   kolonu her ekranda 1fr yapıp item'ları ortalıyoruz (buton + alt açıklama). */
.actions.single-action {
  grid-template-columns: 1fr;
  justify-items: center;
}
.single-action .btn {
  width: auto;
  max-width: 100%;
  justify-self: center;
}

/* Hero metinlerini ortala — başlık, lead paragraf ve alt açıklama.
   (Buton grid item olduğu için justify-self:center ile zaten ortalı kalır.) */
.hero-copy {
  text-align: center;
}

/* Mobil menü açık: beyaz zemin üzerinde linkler görünür olsun.
   Kapalıyken linkler mavi başlık için beyazdı; menü açılınca zemin beyaz
   oluyordu → beyaz-üstü-beyaz (görünmez). Açık durumda koyu maviye çeviriyoruz. */
#nav-toggle:checked ~ nav a {
  color: #073b92;
}
#nav-toggle:checked ~ nav .drop > a::after {
  border-top-color: #073b92; /* dropdown ok işareti de görünür olsun */
}

/* Mobil: hamburger ikonu sağ üste hizalansın.
   Header container flex + justify:normal olduğu için hamburger logodan hemen
   sonra ortada kalıyordu; margin-left:auto ile sağ kenara itiyoruz.
   (.hamb masaüstünde display:none, orada etkisi yok.) */
.site-header .hamb {
  margin-left: auto;
}

/* Footer sosyal medya ikonları (Instagram / Facebook / Google İşletme) */
.footer-social {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}
.footer-social a {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: #ffffff;               /* beyaz — iletişim ikonlarıyla aynı */
  opacity: .95;
  transition: opacity .2s ease, color .2s ease;
}
.footer-social a:hover {
  opacity: 1;
  color: #ffffff;               /* hover: beyaz */
}
.footer-social svg { width: 100%; height: 100%; display: block; }

/* Footer iletişim bloğu — ikonlu, dengeli (adres / telefon / saat) */
.footer-contact {
  list-style: none;
  margin: 22px 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.footer-contact .fc-ic {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: #ffffff;               /* beyaz ikonlar */
}
.footer-contact span {
  color: #b9bfba;
  font-size: .9rem;
  line-height: 1.55;
}
.footer-contact a {
  color: #b9bfba;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-contact a:hover { color: #fff; }

/* ============================================================
   MOBİL RAFİNE DÜZENLEME (≤640px)
   Marka renk/metin/pattern korunur; yalnızca oran, boşluk, tip ölçeği.
   Apple mantığı: ölçülü başlık, dengeli boşluk, kompakt kart.
   ============================================================ */
@media (max-width: 640px) {
  /* — Tipografi: bağırmayan başlık ölçeği — */
  .hero-v2 h1 { font-size: 2.05rem; line-height: 1.08; margin: 8px 0 18px; letter-spacing: -.03em; }
  .page-hero h1 { font-size: 1.8rem; line-height: 1.16; }
  .intro-v2 h2, .experience-v2 h2, .services-v2 h2, .doctors-v2 h2,
  .emergency-v2 h2, .location-v2 h2, .faq-v2 h2, .final h2,
  .article h2, main .container h2 { font-size: 1.5rem; line-height: 1.24; margin-bottom: 16px; }
  .experience-v2 h3, .services-v2 h3, .doctors-v2 h3, .doctor-card h3,
  main .container h3, .article h3 { font-size: 1.16rem; line-height: 1.3; }
  .hero-v2 .lead, .hero-copy .lead, .page-hero .lead { font-size: 1rem; line-height: 1.55; -webkit-line-clamp: unset; display: block; overflow: visible; }

  /* — Bölüm dikey boşlukları (76/80 → 46) — */
  .intro-v2, .experience-v2, .faq-v2, .final,
  .services-v2, .doctors-v2, .location-v2, .emergency-v2 {
    padding-top: 46px; padding-bottom: 46px;
  }
  .page-hero { padding-top: 34px; padding-bottom: 34px; }

  /* — Tutarlı kenar boşluğu (her yerde 20px) — */
  .container { padding-left: 20px; padding-right: 20px; }

  /* — Kompakt kartlar: görselleri kısalt — */
  .doctor-card img, .portrait-photo { height: 200px; object-fit: cover; }
  .clinic-photo, .site-photo { max-height: 220px; object-fit: cover; }

  /* — FAQ: daha sıkı satır — */
  .faq summary { padding: 17px 0; }

  /* — Footer sosyal ikonları mobilde ortala + ayraçla arasına boşluk — */
  .footer-social { justify-content: center; margin-bottom: 24px !important; }

  /* — Hero stat satırı: dengeli 3 kolonlu YATAY düzen — */
  .hero-meta { grid-template-columns: repeat(3, 1fr); gap: 10px; column-gap: 6px; text-align: center; align-items: start; padding-top: 20px; }
  .hero-meta span, .hero-meta a { grid-column: auto; margin: 0; padding: 0; display: block; font-size: .75rem; line-height: 1.32; }
  .hero-meta b { display: block; font-size: .8rem; margin-bottom: 3px; }
}

/* ============================================================
   HERO — bina fotoğrafı TAM ARKAPLAN (metin üstte, beyaz)
   Foto zaten %18 karartıldı; üzerine hafif gradient overlay
   (üstte/altta daha koyu) → başlık ve metin okunur kalır.
   ============================================================ */
.hero-v2 {
  background:
    linear-gradient(180deg, rgba(8,17,44,.78) 0%, rgba(8,17,44,.66) 45%, rgba(8,17,44,.84) 100%),
    url('/assets/img/hero-serra.jpg') center 32% / cover no-repeat !important;
  color: #fff !important;
}
/* dekoratif beyaz halkaları/kavisleri kaldır */
.hero-v2::before, .hero-v2::after { display: none !important; }
/* eski foto kartını gizle (artık arkaplan) */
.hero-v2 > img,
.hero-content > img,
.hero-v2 .clinic-photo,
.hero-photo, .hero-shade { display: none !important; }  /* eski foto/gölge katmanları (boş yer kaplıyordu) */
/* tek kolon, ortalı, eski dev padding/negatif margin sıfırlanır */
.hero-content {
  grid-template-columns: 1fr !important;
  margin-top: 0 !important;
  padding-top: 70px !important;
  padding-bottom: 56px !important;
  min-height: 56vh;
}
.hero-copy { max-width: 720px; margin-inline: auto; text-align: center; }
/* metin beyaz */
.hero-v2 h1 { color: #fff !important; }
.hero-v2 h1 em, .hero-v2 h1 i, .hero-v2 h1 span { color: #a7c7ff !important; }  /* "SerraDent." koyu foto üstünde okunur açık mavi */
.hero-v2 .lead { color: rgba(255,255,255,.92) !important; }
.hero-v2 .hero-copy small { color: rgba(255,255,255,.78) !important; }
.hero-meta { border-top-color: rgba(255,255,255,.28) !important; }
.hero-meta b { color: #fff !important; }
.hero-meta span, .hero-meta a { color: rgba(255,255,255,.82) !important; }

/* Acil sayfası hero'su ("page-hero urgent"): metin beyaz/sarı ama .page-hero'nun
   açık zemini .urgent'in koyu zeminini eziyordu → beyaz-üstü-açık (görünmez).
   Yüksek specificity ile koyu zemini geri getiriyoruz. */
.page-hero.urgent {
  background: var(--blue-dark, #0a2450);
}

/* Acil hero: tüm metinler beyaz + dengeli boşluk */
.page-hero.urgent .eyebrow { color: #ffffff; margin-bottom: 16px; }
.page-hero.urgent .lead,
.page-hero.urgent p { color: rgba(255,255,255,.9); margin-bottom: 28px; }
.page-hero.urgent .crumb,
.page-hero.urgent .crumb a,
.page-hero.urgent .crumb span { color: rgba(255,255,255,.65); }
.page-hero.urgent .crumb { margin-bottom: 24px; }
.page-hero.urgent h1 { margin-bottom: 18px; }

/* Klinik sayfası: dengeli boşluk
   - detail başlıkları paragrafa yapışıktı → üstlerine boşluk
   - bölüm padding'leri fazlaydı (64px) → dengele */
main > section:has(.clinic-copy),
main > section:has(.clinic-detail) { padding-top: 52px; padding-bottom: 52px; }
.clinic-detail h2 { margin-top: 34px; }
.clinic-detail h2:first-child { margin-top: 0; }
.clinic-copy p + p, .clinic-detail p + p { margin-top: 13px; }  /* ardışık paragraflar arası ritim */
@media (max-width: 640px) {
  main > section:has(.clinic-copy),
  main > section:has(.clinic-detail) { padding-top: 40px; padding-bottom: 40px; }
  .clinic-detail h2 { margin-top: 26px; }
}

/* ============================================================
   Sabit alt bar kaldırıldı + KOMPAKT FOOTER (Apple mantığı:
   küçük logo, minimal padding, sıkı satırlar, küçük tipografi)
   ============================================================ */
.mobile-bar { display: none !important; }
/* sabit bar için ayrılmış body alt boşluğu (padding-bottom:67px) kaldı → sıfırla */
body { padding-bottom: 0 !important; }

footer { padding-top: 34px !important; padding-bottom: 26px !important; }
.footer-logo, .footer-logo img { width: 116px !important; }
.footer-logo { margin-bottom: 10px !important; }
.footer-grid { gap: 22px !important; }
.footer-grid h3 { font-size: .74rem !important; margin-bottom: 7px !important; }
.footer-contact { gap: 8px !important; margin: 10px 0 2px !important; }
.footer-contact span { font-size: .78rem !important; line-height: 1.35 !important; }
.footer-contact .fc-ic { flex-basis: 15px !important; width: 15px !important; height: 15px !important; margin-top: 2px !important; }
.footer-social { margin-top: 12px !important; gap: 13px !important; }
.footer-social a { width: 18px !important; height: 18px !important; }
.footer .legal, footer .legal { font-size: .7rem !important; padding-top: 12px !important; margin-top: 2px !important; }

/* footer daha sıkı: iletişim satır arası + footer-grid dikey */
.footer-contact li { gap: 10px !important; }

/* Hero stat satırı desktop'ta da ortalı olsun (sola dayalıydı).
   Mobilde 3-kolon grid zaten ortalı; bu kural flex satırı da merkezler. */
.hero-meta { justify-content: center; }

/* Desktop hero-meta: item sağ margin/padding'i merkezi bozuyordu →
   gap ile eşit boşluk, tam ortalama (mobil grid etkilenmez, min-width:641). */
@media (min-width: 641px) {
  /* kutu parent'tan dar ve sola dayalıydı → kutuyu da ortala + gap ile eşit boşluk */
  .hero-meta { gap: 44px; margin-left: auto; margin-right: auto; justify-content: center; }
  .hero-meta > span, .hero-meta > a { margin-right: 0 !important; padding-right: 0 !important; }
}

/* ============================================================
   HİZALAMA / BOŞLUK DÜZELTMELERİ
   ============================================================ */

/* Hero lead paragrafı: max-width'li blok (640px) 720px'lik hero-copy içinde
   sola dayalı kalıyordu → metin ortalı ama blok merkezden ~40px solda.
   Bloğu da ortala. */
.hero-copy .lead,
.hero-v2 .lead {
  margin-left: auto;
  margin-right: auto;
}

/* Mobil: style.css'teki `.hero-content{margin:0}` kuralı container'ın
   `margin:auto` ortalamasını eziyordu → tüm hero içeriği (başlık, buton,
   hero-meta "Konum/Yol tarifi" satırı) 28px sola kayık görünüyordu.
   Yatay auto margin'i geri getir. */
.hero-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Acil bölümü (emergency-v2): yeşil buton ile "Acil durum rehberi" linki
   inline aktığı için bitişikti (aralarında 0px). Flex + gap ile ayır,
   dikeyde ortala. */
.emergency-v2 .container > div:last-child {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.emergency-v2 .container > div:last-child .text-link {
  margin-top: 0; /* base kuraldan gelen 20px, flex ortalamasını bozuyordu */
}

/* Konum bölümü: adres paragrafı ile "Yol Tarifi Al" butonu bitişikti
   (aralarında 0px) → nefes payı. Paragraflar arasına da küçük ritim. */
.location-v2 .location-grid a.btn {
  margin-top: 22px;
}
.location-v2 .location-grid p + p {
  margin-top: 10px;
}

/* ============================================================
   HARİTA — etkileşim kapalı, tıklayınca Google Haritalar (yeni sekme)
   Ana sayfa: .map-wrap (zaten position:relative) içine .map-link overlay.
   İletişim: .contact-map iframe'i .map-click ile sarıldı; iframe'in
   grid-column:1/-1 görevi sarmalayıcıya taşındı.
   ============================================================ */
.map-wrap iframe,
.map-click iframe {
  pointer-events: none;           /* kaydırma/zoom/tıklama iframe'e gitmesin */
}
.map-click {
  position: relative;
  display: block;
  grid-column: 1 / -1;            /* iletişim grid'inde iframe'in yerini alır */
}
.map-click iframe { display: block; }
.map-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

/* Uzayan CTA metni ("... İçin Tıklayın") dar ekranda taşmasın */
.btn {
  white-space: normal;
  text-align: center;
}

/* WhatsApp CTA butonu — yeni yapı: ikon + kısa metin, tek satır.
   .btn zaten inline-flex + ortalı; gap ikon/metin arasını açar. */
.btn { gap: 9px; }
.btn .wa-ic {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}
.btn > span { white-space: nowrap; }  /* "Bilgi Almak İçin Tıklayın" tek satır kalsın */