/* Shared responsive overrides for all Petdent site pages */

.pd-nav-mobile { display: none; }
@media (max-width: 980px) {
  .pd-nav-desktop { display: none !important; }
  .pd-nav-mobile  { display: inline-flex !important; }
  header .container-wide { grid-template-columns: auto 1fr auto !important; }
}

/* Any 2-col head (eyebrow+h2 on left, lede on right) → stack on mobile */
@media (max-width: 900px) {
  [data-2col-head], [data-hero-grid], [data-cta-row],
  [data-bio-grid], [data-philos-head], [data-clinic-head],
  [data-svc-head], [data-svc-block-grid],
  [data-cases-head], [data-faq-grid],
  [data-form-head], [data-loc-head], [data-loc-grid] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  [data-hero-grid] { gap: 48px !important; }
}

@media (max-width: 900px) {
  /* Sticky → static on mobile */
  [data-sticky] { position: static !important; }
}

/* Service blocks: alternate gridReverse used `direction: rtl` — neutralize */
@media (max-width: 900px) {
  [data-svc-block-grid] { direction: ltr !important; }
}

/* Step / pillar grids */
@media (max-width: 980px) {
  [data-grid-4] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-grid-3] { grid-template-columns: 1fr !important; }
  [data-grid-3] > * { border-right: 0 !important; border-bottom: 1px solid var(--pd-border-1) !important; }
  [data-grid-3] > *:last-child { border-bottom: 0 !important; }
  /* Stack olunca grid satırlarını eşit dağıtıp en uzun kartı kırpıyordu.
     display:block → her kart doğal yüksekliğini alır; overflow:visible güvence. */
  [data-grid-3], [data-grid-4] { display: block !important; overflow: visible !important; grid-auto-rows: min-content !important; }
}
@media (max-width: 560px) {
  [data-grid-4] { grid-template-columns: 1fr !important; }
  [data-grid-4] > * { border-right: 0 !important; border-bottom: 1px solid var(--pd-border-1) !important; }
  [data-grid-4] > *:last-child { border-bottom: 0 !important; }
}

/* Case grid */
@media (max-width: 980px) {
  [data-cases-grid] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Vaka kartlarının (Vakalar galerisi + Anasayfa cases) görünürlüğü mobilde
   IntersectionObserver / WebKit repaint zamanlamasına BAĞLI KALMASIN: her durumda
   görünür. (iOS Safari'de IO initial-dispatch'i deterministik olmadığından kartlar
   opacity:0'da takılıp "filtreleme patlıyor" algısı yaratıyordu — bu kuralla
   görünürlük yapı gereği garanti; masaüstünde reveal animasyonu korunur.) */
@media (max-width: 980px) {
  [data-cv-card].scroll-rise,
  [data-case].scroll-rise {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (max-width: 560px) {
  [data-cases-grid] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* Case filter bar */
@media (max-width: 900px) {
  [data-filter-bar] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  [data-filter-bar] > *:last-child {
    align-items: flex-start !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--pd-border-1) !important;
    padding-top: 16px !important;
  }
}

/* FAQ layout — sticky nav goes top on mobile */
@media (max-width: 900px) {
  [data-faq-layout] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-faq-nav] { position: static !important; }
}

/* Form rows collapse */
@media (max-width: 720px) {
  [data-row2] { grid-template-columns: 1fr !important; }
  [data-form-card] { padding: 28px 22px !important; }
}

/* Footer */
@media (max-width: 900px) {
  [data-footer-grid] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  [data-footer-referral] { grid-template-columns: 1fr !important; }
  [data-footer-referral] [data-actions] { justify-content: flex-start !important; }
}
@media (max-width: 560px) {
  [data-footer-grid] { grid-template-columns: 1fr !important; }
  [data-legal-inner] { flex-direction: column !important; align-items: flex-start !important; }
}

/* Hero stacking */
@media (max-width: 980px) {
  #anasayfa > .container-wide {
    grid-template-columns: 1fr !important;
    gap: 56px !important;
    padding: 32px 22px 72px !important;
  }
}

/* Başlık <br>'leri mobilde GÖRÜNÜR bırakıldı.
   (Gizlemek, boşluksuz <br> içeren başlıklarda kelimeleri birleştiriyordu —
   ör. "ettiğimiz<br>vakaların" → "ettiğimizvakaların". Küçültülmüş mobil font
   ile authored kırılmalar mobilde de temiz görünüyor.) */

/* Modal — single column on mobile */
@media (max-width: 720px) {
  [data-case-modal] { grid-template-columns: 1fr !important; }
}

/* Service block visual smaller on mobile */
@media (max-width: 900px) {
  [data-svc-visual] { aspect-ratio: 16/10 !important; }
}

/* Appointment progress */
@media (max-width: 560px) {
  [data-progress-label] { font-size: 9px !important; }
}

/* Generic narrow */
@media (max-width: 560px) {
  .section { padding: 56px 0 !important; }
}

/* ============= Anasayfa-specific (homepage previews) ============= */

@media (max-width: 1080px) {
  [data-myth-grid] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  [data-myth-grid] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

@media (max-width: 980px) {
  [data-services-grid] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  [data-services-grid] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

@media (max-width: 900px) {
  [data-batuhan-grid] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-batuhan-badges] { grid-template-columns: 1fr !important; }
  [data-contact-grid] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-map-sticky] { position: static !important; }
}

/* iOS: 16px input font-size prevents zoom-on-focus */
@media (max-width: 720px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Hakkımızda ClinicStrip 5'li öğe gridi */
@media (max-width: 980px) {
  [data-clinic-grid] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 760px) {
  [data-clinic-grid] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  [data-clinic-grid] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===================================================================
   MOBİL UI/UX OPTİMİZASYONU (kapsamlı denetim sonrası)
   =================================================================== */

/* Hero float kartları + rozet → mobilde normal akışa (kırpılma/çakışma/yatay scroll biter) */
@media (max-width: 980px) {
  .hero-float-card, .hero-refer-badge {
    position: static !important; inset: auto !important;
    margin-top: 14px !important; width: 100% !important; min-width: 0 !important;
    box-shadow: var(--pd-shadow-1) !important;
  }
  .hero-visual { display: flex; flex-direction: column; }
}

/* Hero alt öğeleri (eyebrow / CTA / sub-band) mobilde */
@media (max-width: 560px) {
  .hero-eyebrow-row { white-space: normal !important; flex-wrap: wrap !important; }
  .hero-cta-row { flex-direction: column !important; align-items: stretch !important; }
  .hero-cta-row .btn { width: 100% !important; justify-content: center !important; }
  .hero-subband-row { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 10px !important; }
  .hero-subband-row > div { padding: 4px 0; }
  #anasayfa > .container-wide { padding: 24px 18px 40px !important; }
}

/* Global başlık tipografisi — mobilde h1/h2 tabanını küçült (44px taban devasa idi) */
@media (max-width: 480px) {
  .h1 { font-size: clamp(30px, 8.5vw, 40px) !important; line-height: 1.12 !important; }
  .h2 { font-size: clamp(25px, 7.2vw, 34px) !important; }
}
@media (max-width: 360px) {
  .h1 { font-size: 30px !important; }
}

/* Form kontrol satırları (contact step + referral submit) — dikey + tam genişlik */
@media (max-width: 560px) {
  [data-form-controls] { flex-direction: column-reverse !important; gap: 10px !important; }
  [data-form-controls] .btn { width: 100% !important; justify-content: center !important; margin-left: 0 !important; }
  [data-submit-row] { flex-direction: column !important; gap: 10px !important; }
  [data-submit-row] .btn { width: 100% !important; justify-content: center !important; }
}

/* Hizmetler hero TOC tek kolon + dokunma hedefi */
@media (max-width: 560px) {
  [data-svc-toc] { grid-template-columns: 1fr !important; }
  [data-svc-toc] a { min-height: 44px; }
}

/* Filtre chip'leri (Vakalar + Anasayfa Cases) dokunma hedefi.
   Breakpoint, filter-bar'ın gerçek collapse noktası (900px) ile hizalı —
   721-900px (iPad portrait) aralığında chip'ler 44px altına düşmesin. */
@media (max-width: 900px) {
  [data-filter-bar] button, [data-cases-head] button { min-height: 44px !important; padding: 11px 15px !important; }
}

/* Footer link dokunma hedefi + hizalama */
@media (max-width: 900px) {
  [data-footer-grid] a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; }
}
@media (max-width: 560px) {
  [data-legal-inner] a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Sayfa hero üst boşluğu (about/services/cases inline paddingTop:96) mobilde küçült */
@media (max-width: 560px) {
  [data-page-hero] { padding-top: 60px !important; padding-bottom: 32px !important; }
}

/* Hakkımızda timeline satırı mobilde üstten hizala */
@media (max-width: 480px) {
  [data-timeline] > div { align-items: start !important; }
}

/* Myth kartı mobilde iç-scroll yerine uzasın */
@media (max-width: 980px) {
  .myth-card { min-height: auto !important; }
}
@media (max-width: 560px) {
  .myth-card .myth-truth-body { overflow: visible !important; }
}

/* Chip/seçenek satırları (saat/tür/radio) mobilde sar + dokunma hedefi */
@media (max-width: 560px) {
  [data-chip-row] { flex-wrap: wrap !important; }
  [data-chip-row] > button { flex: 1 1 calc(50% - 6px) !important; min-height: 44px !important; }
}

/* Sevk süreci connector noktaları mobilde gizle (stack olunca anlamsız) */
@media (max-width: 560px) {
  .proc-connector { display: none !important; }
}

/* Vaka kartı overlay — dokunmatik cihazda görünür ipucu (masaüstü hover korunur) */
@media (hover: none) {
  .cv-overlay, .case-overlay { opacity: 1 !important; background: rgba(58, 58, 60, 0.32) !important; }
}

/* Banner oranları mobilde daha dengeli */
@media (max-width: 560px) {
  [data-hero-banner], [data-clinic-banner] { aspect-ratio: 4 / 3 !important; }
}