/*
Theme Name: Büşra Demir Fizyoterapi
Theme URI: https://busrademirfizyoterapi.com
Author: Büşra Demir Fizyoterapi & Rehabilitasyon
Description: Fizyoterapi ve rehabilitasyon kliniği için steel-blue teknik/blueprint temalı block teması.
Version: 1.3.1
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: busra-demir-fizyoterapi
*/

/* === Reset / base === */
.wp-site-blocks > footer {
  margin-block-start: 0;
}

.wp-block-group[style*="margin-top"] {
  margin-top: 0;
}

hr.wp-block-separator {
  border-top: 1px solid var(--wp--preset--color--border);
  opacity: 1;
}

/* === Responsive gutter =====================================================
   WordPress only auto-centers "wide" (<=1280px) / "constrained" (<=800px)
   content once the viewport is WIDER than those breakpoints. Below them —
   which is every phone and tablet, and plenty of laptops — that content is
   simply 100% width with zero side inset, so headings/paragraphs/nav links
   run edge-to-edge. This gives every section a real, always-present gutter
   at any viewport size without touching the full-bleed background colors
   (padding is applied to the CONTENT box, box-sizing keeps the declared
   width/max-width intact, so colored full-bleed bands are unaffected). */
.alignwide,
.site-nav,
main.wp-block-group.alignfull > .fade-up,
main.wp-block-group.alignfull > .wp-block-post-content {
  padding-inline: clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}

/* Header görünürlüğü: gövdeyle kaynaşmasın diye alt ayraç + yumuşak gölge. */
.site-nav {
  border-bottom: 1px solid var(--wp--preset--color--border);
  box-shadow: 0 1px 10px rgba(29, 31, 32, 0.05);
  position: relative;
  z-index: 10;
  /* Header'daki üç blok (logo, menü, arama+CTA) dikeyde ortalansın — CTA
     grubunun üste yaslanma sorununu giderir. */
  align-items: center;
  /* Kontroller sayfanın en üstüne ve alt ayraca yapışmasın — üstte/altta
     nefes payı. */
  padding-block: 14px;
}

/* Mobil yapışkan header: aşağı kaydırınca gizlenir, yukarı kaydırınca geri
   gelir (footer'daki scroll script'i .site-nav-sticky sınıfını header template
   part SARMALAYICISINA ekler ve .nav-gizli'yi yönetir). Sticky, sarmalayıcıya
   uygulanır — .site-nav'ın ebeveyni sarmalayıcı olduğundan nav'ın kendisi
   yapışamaz (sticky yalnız ebeveyn içinde çalışır). Masaüstünde davranış
   değişmez. NOT: Görünür durumda transform ÖZELLİĞİ hiç uygulanmaz — transform'lu
   ata, içindeki position:fixed mobil menü overlay'inin konumunu bozar. */
@media (max-width: 781px) {
  .site-nav-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    transition: transform 0.25s ease;
  }
  .site-nav-sticky.nav-gizli {
    transform: translateY(-110%);
  }
}

/* Mobil header sırası (hamburger 600px altında çıkar): soldan sağa
   Randevu Al → WhatsApp → arama → menü (hamburger). Masaüstü düzeni değişmez;
   yalnız CSS order ile, blok sırası korunur. */
@media (max-width: 600px) {
  /* Randevu/WhatsApp/arama + hamburger aynı satıra sığsın diye header
     boşluğunu daralt (varsayılan blockGap ~22px hamburger'ı alt satıra itiyordu). */
  .site-nav { gap: 0.6rem 0.7rem; }
  .site-nav > .wp-block-group:first-of-type { order: 1; } /* logo — üst satır */
  .site-nav > .wp-block-group:last-of-type  { order: 2; } /* Randevu/WhatsApp/arama grubu */
  .site-nav > .wp-block-navigation          { order: 3; } /* hamburger menü — son */
  .site-nav > .wp-block-group:last-of-type > .wp-block-buttons { order: 1; } /* Randevu + WhatsApp önce */
  .site-nav > .wp-block-group:last-of-type > p                 { order: 2; } /* arama sonra */

  /* Mobil footer alt bandı (telif + menü): alt alta, soldan hizalı — menü
     sağa yaslı kalmasın, yönetmelik satırıyla aynı sol hatta dursun. */
  footer > .wp-block-group.alignwide {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  footer > .wp-block-group.alignwide .wp-block-navigation {
    justify-content: flex-start;
  }
}

/* === Kicker label (small uppercase accent eyebrow) === */
.kicker {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--accent-deep);
  margin: 0 0 0.6rem;
}

/* === Tags === */
.tag-outline {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-deep);
  border-radius: 8px;
}

/* === Cards (yumuşak köşe + silik kontur/gölge; zeminden belirgin ayrışsın) === */
.svc-card,
.step-card,
.post-card {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: 1.4rem;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(29, 31, 32, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.svc-card:hover,
.step-card:hover,
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(29, 31, 32, 0.12);
  border-color: var(--wp--preset--color--accent);
}
.svc-card h3,
.step-card h3,
.post-card h3 {
  margin-top: 0;
}
/* Arama sonuç kartı: <div> sarmalayıcı (wpautop-güvenli) + başlıktaki bağlantıyı
   tüm karta yay (stretch-link) → kartın her yeri tıklanabilir kalır. */
.post-card { position: relative; }
.post-card .stretch-link {
  text-decoration: none;
  color: inherit;
}
.post-card .stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.post-card .stretch-link:hover {
  color: var(--wp--preset--color--accent-deep);
}
/* === SSS gruplu görünüm ([sss gruplu]) — çipler, grup başlıkları, Devamını Gör === */
.sss-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin: 0 0 var(--wp--preset--spacing--50);
}
.sss-cip {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--wp--preset--color--accent-deep);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: 0.35rem 0.8rem;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.sss-cip:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.sss-grup {
  margin-top: var(--wp--preset--spacing--60);
  scroll-margin-top: 90px;
}
.sss-grup > h2 {
  margin-bottom: var(--wp--preset--spacing--30);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--wp--preset--color--accent);
}
.sss-daha {
  margin-top: var(--wp--preset--spacing--30);
  cursor: pointer;
}
/* Progressive enhancement: fazla sorular yalnızca JS çalıştığında gizlenir
   (js-animations bayrağı), buton yalnızca JS'liyken görünür. JS yoksa tüm
   sorular açık, buton gizli. */
.sss-daha { display: none; }
.js-animations .sss-daha { display: inline-flex; }
.js-animations .sss-kalan { display: none; }
.js-animations .sss-kalan.is-open { display: block; }

/* === SSS canlı arama ([sss gruplu]) — arama kutusu + kategori çipleri bir satırda === */
.sss-arac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin: 0 0 var(--wp--preset--spacing--50);
}
.sss-arac .sss-cipler {
  margin: 0;
  flex: 1 1 auto;
}
.sss-arama {
  flex: 0 1 340px;
  min-width: 220px;
}
.sss-arama-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  background: var(--wp--preset--color--background);
}
.sss-arama-form:focus-within {
  border-color: var(--wp--preset--color--accent);
}
.sss-arama-input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.8rem;
  font-size: 0.95rem;
  color: var(--wp--preset--color--foreground);
}
.sss-arama-input:focus { outline: none; }
.sss-arama-ikon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  color: var(--wp--preset--color--accent-deep);
}
.sss-arama-bos {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--wp--preset--color--foreground) 80%, transparent);
}
/* Canlı filtre görünürlük sınıfları */
.faq-row.sss-gizli,
.sss-grup.sss-gizli,
.sss-cipler.sss-gizli { display: none; }
/* Arama sırasında "Devamını Gör" ile gizli sorular da taransın/görünsün */
.sss-ariyor .sss-kalan { display: block; }

/* === Blog canlı arama ([blog_arama]) === */
.blog-arama {
  position: relative;
  max-width: 420px;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.blog-arama-form {
  display: flex;
  align-items: center;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--background);
}
.blog-arama-input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  color: var(--wp--preset--color--foreground);
}
.blog-arama-input:focus { outline: none; }
.blog-arama-form:focus-within { border-color: var(--wp--preset--color--accent); }
.blog-arama-btn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0 0.7rem;
  color: var(--wp--preset--color--accent-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.blog-arama-sonuc {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--wp--preset--color--background);
  border: 1px solid var(--wp--preset--color--accent);
  border-top: 0;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 12px 24px rgba(29, 31, 32, 0.12);
}
.blog-arama-oge {
  display: block;
  padding: 0.6rem 0.8rem;
  text-decoration: none;
  color: var(--wp--preset--color--foreground);
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: 0.9rem;
}
.blog-arama-oge:last-child { border-bottom: 0; }
.blog-arama-oge:hover,
.blog-arama-oge:focus {
  background: var(--wp--preset--color--accent-tint);
  color: var(--wp--preset--color--accent-deep);
}
.blog-arama-bos {
  padding: 0.6rem 0.8rem;
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--wp--preset--color--foreground) 70%, transparent);
  border-bottom: 1px solid var(--wp--preset--color--border);
}

/* === Blog kategori şeridi ([blog_kategoriler]) + kategori açıklaması === */
.blog-kategoriler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  margin: 0 0 var(--wp--preset--spacing--40);
}
.blog-kategoriler .blog-kat {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--wp--preset--color--accent-deep);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: 0.35rem 0.8rem;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.blog-kategoriler .blog-kat:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.blog-kategoriler .blog-kat.is-active {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--background);
}
.kategori-aciklama {
  margin: var(--wp--preset--spacing--30) 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--wp--preset--color--foreground) 82%, transparent);
}

/* Blog sayfası ve kategori arşivleri: içerik sütununu geniş banda (wide) taşı —
   yazı gridi dar/orta alanda sıkışmasın; başlık/arama/kategoriler/grid soldan
   hizalı ve geniş olsun. Yalnız /blog/ (page-slug-blog) ve arşiv (.archive)
   sayfaları; diğer içerik sayfaları (hizmet detayları vb.) etkilenmez. */
.page-slug-blog .fade-up,
.page-slug-blog .wp-block-post-content,
.page-slug-iletisim .fade-up,
.page-slug-iletisim .wp-block-post-content {
  max-width: var(--wp--style--global--wide-size);
}
.page-slug-blog .fade-up > *,
.page-slug-iletisim .fade-up > * {
  max-width: none;
}
/* İletişim sayfası: içerik geniş banda taşınınca yazılar sola hizalı olur ve
   harita sütunu genişler; ek olarak iletişim metnini bir tık büyüt. */
.page-slug-iletisim .contact-row .val,
.page-slug-iletisim .contact-row .lbl {
  font-size: 1rem;
}
/* alignwide columns kendi iç padding'ini de aldığından içerik başlıktan 48px
   daha içeride kalıyordu; iletişimde bunu sıfırla → sütunlar başlıkla (sol=48)
   hizalı, harita sağ kenara kadar geniş. */
.page-slug-iletisim .wp-block-post-content .wp-block-columns {
  padding-inline: 0;
}
/* Kategori arşivleri (archive.html): bloklar main'in doğrudan çocuğu olduğundan
   fade-up dışındakiler padding kuralına uymuyor — geniş banda + 48px iç boşluğa
   elle hizala (/blog/ ile aynı görünüm). */
.archive .fade-up,
.archive .blog-kategoriler,
.archive .blog-grid {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}
.archive .fade-up > * {
  max-width: none;
}

/* === Blog listing (Blog page, [blog_yazilari] shortcode) — latest 9 posts,
   real WP posts so it grows automatically as more articles are published. === */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--40);
  margin-top: 0.6rem;
}
@media (min-width: 620px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .blog-grid {
    /* Fixed 3-per-row on desktop, as requested — not auto-fill, so a 4th
       post always wraps to a new row instead of squeezing a 4th column in. */
    grid-template-columns: repeat(3, 1fr);
  }
}
.blog-grid .post-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.blog-grid .post-card .meta {
  margin: 0.9rem 0 0.3rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--accent-deep);
}
.blog-grid .post-card p:not(.meta) {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--wp--preset--color--text) 80%, transparent);
}
.blog-grid .post-card .cta-bottom-text {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--accent-deep);
}
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--wp--preset--spacing--50);
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.7rem;
  border: 1px solid var(--wp--preset--color--border);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--wp--preset--color--text);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.blog-pagination a.page-numbers:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.blog-pagination .page-numbers.current {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--background);
}
.blog-pagination .page-numbers.dots {
  border: none;
}

/* === Related posts ("Bunu da Okumak İsteyebilirsiniz") on single blog posts === */
.related-posts {
  max-width: var(--wp--style--global--content-size, 800px);
  margin: var(--wp--preset--spacing--70) auto 0;
  padding-top: var(--wp--preset--spacing--60);
  border-top: 1px solid var(--wp--preset--color--border);
}
/* Related posts render inside the shared .h-slider (see the [ilgili_yazilar]
   shortcode): a horizontal auto-scrolling strip. Each card is a fixed-width
   flex column so the "Devamını Oku" line pins to the bottom (margin-top:auto)
   and every card lines up on one baseline regardless of title/excerpt length. */
.related-slider .related-post-card {
  flex: 0 0 auto;
  width: min(80vw, 300px);
}
/* Anasayfa blog slider'ı ([son_yazilar]) related-slider ile aynı kart yapısını
   kullanır; kartın üstünde öne çıkan görsel (varsa) ya da placeholder olur. */
.blog-slider .related-post-card .card-thumb,
.blog-slider .related-post-card .img-placeholder {
  display: block;
  margin-bottom: 0.8rem;
}
.blog-slider .related-post-card .card-thumb img {
  display: block;
  width: 100%;
}
.related-post-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: 1.2rem;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(29, 31, 32, 0.07);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.related-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(29, 31, 32, 0.12);
  border-color: var(--wp--preset--color--accent);
}
.related-post-card h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.05rem;
  margin: 0.3rem 0 0.5rem;
}
.related-post-card h3 a {
  color: inherit;
  text-decoration: none;
}
.related-post-card h3 a:hover {
  color: var(--wp--preset--color--accent-deep);
}
.related-post-excerpt {
  font-size: 0.88rem;
  margin: 0 0 0.7rem;
  color: color-mix(in srgb, var(--wp--preset--color--text) 78%, transparent);
}
/* Inside the slider every card is stretched to the tallest card's height;
   letting the excerpt grow absorbs the extra space so the "Devamını Oku"
   link lands on the same baseline across all cards. */
.related-slider .related-post-excerpt {
  flex: 1 1 auto;
}
.related-post-card .cta-bottom-text {
  margin-top: auto;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--accent-deep);
  text-decoration: none;
}

/* === Hizmetler detail rows: every row keeps the same image/text order and
   the same CTA layout, so nothing alternates left/right down the page. === */
/* Hizmet satırları ([hizmet_listesi] dinamik çıktısı): görsel ile metin
   kolonu arasında yatay boşluk + ardışık satırlar arası dikey boşluk.
   (Faz 7 dinamikleştirmesinde eski inline margin'ler düşmüştü — burada
   tek kaynaktan veriliyor.) */
.svc-row {
  gap: var(--wp--preset--spacing--50);
  align-items: stretch; /* kolonlar eşit yükseklik → görsel/metin üst hizalı */
}
/* Mobilde kolonlar alt alta yığılınca görsel↔metin arası boşluk çok açılıyordu;
   dikey yığılımda daha sıkı bir aralık. */
@media (max-width: 781px) {
  .svc-row { gap: 1.1rem; }
}
.svc-row + .svc-row {
  margin-top: var(--wp--preset--spacing--50);
}
/* Metin kolonu dikey akış: başlık üstte, "Devamını Oku" altta sabit */
.svc-row .svc-text {
  display: flex;
  flex-direction: column;
}
.svc-row .svc-text > h2:first-child {
  margin-top: 0; /* başlık tepesi görselin tepesiyle hizalı */
  margin-bottom: 0.55rem; /* başlık↔açıklama boşluğunu sıkıştır (eskiden ~40px) */
}
.svc-row .svc-text > p:not(.svc-more) {
  margin-top: 0;
}
.svc-cta {
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
}
.svc-more {
  margin: 0.9rem 0 0;
  margin-top: auto; /* CTA kolon altına sabit → her satırda görsel altıyla hizalı */
  padding-top: 0.9rem;
}
.svc-more a {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--accent-deep);
  text-decoration: none;
}
.svc-more a:hover {
  color: var(--wp--preset--color--accent);
}


/* Sub-headings inside a service row (e.g. surgery types under "Ameliyat
   Öncesi ve Sonrası Rehabilitasyon") — duplicate one .svc-subsection group
   per extra topic to extend a service with more detail later. */
.svc-subsection {
  margin: 1.1rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--wp--preset--color--border);
}
.svc-subsection h3 {
  margin: 0 0 0.3rem;
}
.svc-subsection p {
  margin: 0;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--wp--preset--color--text) 82%, transparent);
}

.step-card .num {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--wp--preset--color--accent-deep);
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}

/* === Equal-height card rows === */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: flex-start;
}

/* === Auto-scrolling, hoverable, draggable horizontal sliders ==============
   Shared by the homepage services row and the clinic gallery. Unlike a CSS
   keyframe marquee, this is a real horizontally-scrollable box (overflow-x:
   auto) that busra-demir-fizyoterapi-sliders.js nudges forward every frame —
   so it auto-advances AND still accepts native wheel/touch/trackpad
   scrolling and click-drag at any time. Hovering, touching, dragging, or
   using the prev/next buttons pauses the auto-advance; it resumes shortly
   after the visitor lets go. The track holds each set of items twice back to
   back so the loop point is invisible. */
.h-slider-wrap {
  position: relative;
  margin-top: 0.6rem;
}
.h-slider {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* İlk kartın solu tam görünür kalsın diye yalnızca sağ kenar hafifçe fade
     edilir (kaydırılacak içerik olduğunu ima eder). Sol kenar maskesiz. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 94%, transparent 100%);
}
.h-slider.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.h-slider-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  gap: var(--wp--preset--spacing--40);
}
.h-slider-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
/* The prev/next buttons are each wrapped in their own paragraph; without this
   the block editor's default paragraph/blockGap margin pushes one button
   below the other. Zeroing it keeps both arrows on one baseline. */
.h-slider-controls p {
  margin: 0;
  line-height: 0;
}
.h-slider-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--wp--preset--color--border);
  background: transparent;
  color: var(--wp--preset--color--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
  padding: 0;
}
.h-slider-controls button:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.h-slider-controls button:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.svc-card {
  flex: 0 0 auto;
  width: min(78vw, 280px);
  height: auto;
  display: flex;
  flex-direction: column;
}
.svc-card h3 {
  font-size: 1.05rem;
}
.svc-card p:not(.cta-bottom) {
  font-size: 0.85rem;
}
/* Pins "Detaylı Bilgi →" to the same vertical position on every card
   regardless of how long that card's title/description runs — this is what
   actually makes same-width, stretched-height cards *look* equal, not just
   measure equal. */
.svc-card .cta-bottom {
  margin-top: auto;
  padding-top: 0.8rem;
}

.gallery-slide.img-placeholder {
  flex: 0 0 auto;
  width: min(38vw, 150px);
}
/* Galeri slaytları artık foto galeri sayfasına giden <a> — alt çizgi olmasın. */
a.gallery-slide {
  text-decoration: none;
}

/* === Image / figure framing (blueprint corner marks removed, plain hairline frame kept) === */
.fig-frame {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  overflow: hidden;
}
.fig-frame .wp-block-image,
.fig-frame img {
  margin: 0;
  display: block;
}

/* Duotone placeholder treatment: steel-blue wash gradient standing in for photography */
.img-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg, rgba(29,31,32,0.05) 0px, rgba(29,31,32,0.05) 1px, transparent 1px, transparent 14px),
    linear-gradient(160deg, var(--wp--preset--color--accent-tint) 0%, var(--wp--preset--color--accent) 100%);
  color: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}
.img-placeholder span {
  background: color-mix(in srgb, var(--wp--preset--color--accent-dark) 55%, transparent);
  padding: 0.5rem 1rem;
  border: 1px solid rgba(242, 242, 243, 0.4);
}
.img-placeholder.ratio-4-3 { aspect-ratio: 4 / 3; }
.img-placeholder.ratio-4-5 { aspect-ratio: 4 / 5; }
.img-placeholder.ratio-1-1 { aspect-ratio: 1 / 1; }
.img-placeholder.ratio-16-10 { aspect-ratio: 16 / 10; }
.img-placeholder.ratio-16-9 { aspect-ratio: 16 / 9; }

/* === Randevu CTA ikilisi ([cta_randevu]) — Ara + WhatsApp === */
.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
/* Her iki buton da ikon+yazı hizalı ve AYNI dış yükseklikte olsun (box-sizing
   sayesinde outline WhatsApp'ın 2px kenarlığı dolu Randevu Al ile eşitlenir). */
.cta-pair .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  /* WP outline stili kenarlığı telafi için fazladan padding ekler; sabit
     min yükseklikle iki buton da tam olarak aynı dış yükseklikte olur. */
  min-height: 46px;
}
.cta-wa a.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.cta-wa svg {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  /* WhatsApp marka yeşili — ikon fill="currentColor" olduğu için color yeterli.
     Buton metni/hover rengi değişmez; yalnızca ikon yeşil kalır. */
  color: #25d366;
}

/* === Google Harita gömme ([harita]) — responsive oran kutusu === */
.harita-embed {
  position: relative;
  width: 100%;
  padding-top: 66%; /* ~3:2 oran; mobilde de taşmaz */
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
}
.harita-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* === Kart öne çıkan görseli: görsel varsa aynı karttaki placeholder gizlenir === */
.card-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-card:has(.wp-block-post-featured-image) .img-placeholder {
  display: none;
}

/* Hizmet listesi öne çıkan görseli (panelden atanınca yer tutucu yerine geçer) */
.svc-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.svc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === FAQ accordion (native <details>, styled) === */
/* Soru satırları sabit, sıkı bir dikey ritimde dizilsin — blockGap yerine
   .faq-list'in kendi akışı boşluğu kontrol eder (anasayfa SSS'te aşırı boşluk
   hissini giderir). Uzun cevaplar için okunabilir genişlik sınırı (sola hizalı). */
.faq-list {
  display: flex;
  flex-direction: column;
  max-width: 980px;
}
.faq-row {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 0.6rem 0;
}
.faq-row summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--wp--preset--color--accent);
  transition: transform 0.2s ease;
}
.faq-row[open] summary::after { transform: rotate(45deg); }
.faq-row p {
  margin: 0.4rem 0 0;
  color: color-mix(in srgb, var(--wp--preset--color--foreground) 78%, transparent);
}

/* === Contact rows ===========================================================
   .lbl and .val are flex siblings on one row on wide screens. Without an
   explicit basis, a long .val (e.g. the full clinic address) forces the .lbl
   sibling to shrink — at narrow widths this crushed "ADRES" down to a
   one-letter-per-line column. .lbl now never shrinks/wraps; .val takes the
   remaining space and wraps to a new line under the label if the row is too
   narrow to fit both. */
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  align-items: flex-start;
  margin: 0 0 1.1rem;
}
.contact-row .lbl {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--accent-deep);
  margin: 0 0 0.15rem;
}
.contact-row .val {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 0.95rem;
  margin: 0;
}
/* İletişim sayfası "Telefon / WhatsApp" numarasının başına telefon ikonu
   (::before + mask → link rengini alır). Yalnız .contact-row içindeki numara
   linki; footer telefon linkleri etkilenmez. */
.contact-row .val a[href*="wa.me"]::before,
.contact-row .val a[href^="tel:"]::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* İletişim sayfası Instagram satırının başına Instagram ikonu (aynı ::before +
   mask deseni; link rengini alır). */
.contact-row .val a[href*="instagram"]::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* === Navigation === */
.site-nav a {
  text-decoration: none;
  color: inherit;
  font-size: 0.95rem;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--wp--preset--color--accent);
}

/* Mobile overlay menu: the nav block's desktop "justify right" layout otherwise
   carries over into the overlay dialog and pins the link list flush against
   the screen edge with no breathing room. Give it real padding and left-align
   the list so labels never sit flush against (or run off) the viewport edge. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
  align-items: flex-start !important;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  align-items: flex-start !important;
  text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: inline-block;
  padding: 0.3rem 0;
}
.brand-name {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-deep);
  display: block;
}

/* Logo placeholder: reserved square to the left of the brand text, ready for
   the client's logo file to be dropped in later (assets/images + swap in
   header.html for a real wp:image once it exists). */
.logo-placeholder {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  margin-right: 0.7rem;
}
.logo-placeholder p {
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--neutral-600, #7a7a7d);
}
/* Same box, re-tinted for the dark footer background so it doesn't render
   as a near-invisible light-on-light square. */
.logo-placeholder-dark {
  border-color: #3a4f61;
  background: rgba(242, 242, 243, 0.08);
}
.logo-placeholder-dark p {
  color: #9fb2bf;
}

/* === Footer === */
.foot-heading {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wp--preset--color--accent-deep);
  margin: 0 0 0.9rem;
}
/* Footer sosyal medya bağlantısı (Instagram) */
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  color: #c9d3db;
  text-decoration: none;
  font-size: 0.9rem;
  font-family: var(--wp--preset--font-family--heading);
  transition: color 0.2s ease;
}
.footer-social:hover { color: #ffffff; }
.footer-social svg { flex: 0 0 auto; }
/* Yönetmelik (RG 33075, Madde 5/1-ı) zorunlu satırı: son güncelleme + editör
   iletişimi. Footer'ın koyu zemininde soluk ve küçük. */
.site-guncelleme {
  font-size: 0.78rem;
  color: #9fb2bf;
  margin: 0.4rem 0 0;
}
.site-guncelleme a {
  color: #c9d3db;
}

/* === WhatsApp / phone CTA pairing === */
.cta-group {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.cta-call {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--accent-deep);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cta-single .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cta-call:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

/* === Site search: a toggle icon in the header reveals a full-width bar
   right below it (native GET form to "s=", no JS required for the search
   itself — the toggle button is the only JS-dependent bit, and the input
   still works via normal form submission if JS never runs). === */
.search-toggle-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  background: transparent;
  color: var(--wp--preset--color--text);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.search-toggle-btn:hover,
.search-toggle-btn[aria-expanded="true"] {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
.search-toggle-btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}
/* Hidden via a class (not the HTML `hidden` attribute) so the panel stays
   collapsed even if a block-markup regeneration pass ever rewrites the
   part's raw attributes — the class lives in this stylesheet, not the HTML. */
.site-search {
  display: none;
  padding: 1.1rem clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.site-search.is-open {
  display: block;
}
.site-search-form {
  display: flex;
  gap: 0.6rem;
  max-width: 640px;
  margin: 0 auto;
}
.site-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.95rem;
  padding: 0.6rem 0.9rem;
}
.site-search-input:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 1px;
}
.site-search-submit {
  flex: none;
  width: 42px;
  border: 1px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--background);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-search-submit:hover {
  background: var(--wp--preset--color--accent-deep);
  border-color: var(--wp--preset--color--accent-deep);
}

/* === Animation & motion === */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease forwards;
}
.fade-in {
  opacity: 0;
  animation: fadeIn 0.7s ease forwards;
}
.stagger-children > * {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.5s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.55s; }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }

/* .animate-on-scroll starts fully visible (progressive enhancement). It is only
   hidden pre-reveal when the synchronous head script (functions.php) has already
   set html.js-animations — so content never stays invisible if JS is blocked,
   slow, or errors. */
.animate-on-scroll {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-animations .animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
}
html.js-animations .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(29, 31, 32, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll,
  .fade-up,
  .fade-in,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === Editor: keep animated content visible while editing === */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .fade-in,
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}


/* Header'daki küçük tel: butonu — WhatsApp CTA'sının yanında ikon-only */
.cta-tel .wp-block-button__link {
  padding-inline: 0.7rem;
}
/* Header "Randevu Al": (1) yazı beyaz — .site-nav a{color:inherit} kuralı buton
   beyazını ezdiği için burada geri veriyoruz. (2) dış çerçeve yüksekliği WhatsApp
   ve arama kutusuyla aynı (40px) olsun; üçlü tek hizada dursun (box-sizing ile
   dolu buton ve 2px kenarlı outline buton aynı dış yükseklikte). */
.site-nav .cta-tel a.wp-block-button__link {
  color: #ffffff;
}
.site-nav .cta-single a.wp-block-button__link {
  height: 40px;
  box-sizing: border-box;
  /* .site-nav a{font-size:0.95rem} buton yazısını büyütüyordu; diğer "Randevu Al"
     butonlarıyla aynı (0.85rem) olsun. */
  font-size: 0.85rem;
}
/* Header WhatsApp kutusunun çerçevesi arama kutusuyla aynı olsun: koyu 2px
   yerine açık gri 1px (outline stilinin koyu kenarlığını ezer). */
.site-nav .cta-wa a.wp-block-button__link {
  border-width: 1px;
  border-color: var(--wp--preset--color--border);
}
.site-nav .cta-wa a.wp-block-button__link:hover {
  border-color: var(--wp--preset--color--accent);
}

/* Basit metin breadcrumb (Anasayfa > Kategori > Başlık) */
.breadcrumb p {
  font-size: 0.85rem;
  color: var(--wp--preset--color--foreground);
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* Blog yazısı öne çıkan görseli — mevcut img-placeholder çerçevesiyle aynı oran/çerçeve */
.single-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--wp--preset--color--border);
}