/* =============================================================================
 * hizmet.css — hizmet detay şablonu (13 sayfanın ortağı)
 *
 * Izgara ve responsive kuralların çoğu mulubey.css'te ([data-svc-body],
 * [data-topics], [data-process], [data-4col], [data-3col], [data-prose]).
 * Burada YALNIZ bu şablona özgü olanlar var. Özgüllük (0,2,x) — Elementor
 * Kit'i ve hello-elementor reset'ini yener.
 * ========================================================================== */

/* ── SSS akordeonu ─────────────────────────────────────────────────────────
 * mulubey.js açık/kapalıyı yalnız [hidden] ile yönetir; açık kutunun tasarım
 * durumunu (bronz kenar + fildişi zemin) buradan veriyoruz. JS yoksa paneller
 * açık kalır ve içerik yine görünür.
 * ─────────────────────────────────────────────────────────────────────────── */
.mulubey-app .mu-faq-item:has([data-acc-panel]:not([hidden])) {
  border-color: #C2A374;
  background: #FBF8F2;
}

/* Dokunma hedefi 44px altına düşmesin (kabul kriteri). */
.mulubey-app .mu-faq-item [data-acc-btn] { min-height: 56px; }

/* ── Sticky yan kolon ──────────────────────────────────────────────────────
 * 1199px'de 220px'e iner (mulubey.css), 940px'de sticky kapanır. Tek kolona
 * düştüğünde "Bu Sayfada" + randevu kartı içerikten ÖNCE gelsin.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .mulubey-app [data-svc-body] > [data-sticky] { order: -1; }
  .mulubey-app [data-svc-body] > [data-sticky] { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .mulubey-app [data-svc-body] > [data-sticky] > * { flex: 1 1 260px; }
}
@media (max-width: 640px) {
  .mulubey-app [data-svc-body] > [data-sticky] { flex-direction: column; }
}

/* ── Hero görsel kolonu ────────────────────────────────────────────────────
 * Masaüstünde min-height ile ayakta durur; tek kolona düşünce 4:3 bir blok
 * olur (kabul kriteri: mobilde metin ve görsel ayrı okunaklı bloklar).
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .mulubey-app [data-svc-hero-media] { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ── Görüşme Bilgileri tablosu ─────────────────────────────────────────────
 * gap:1px + kum zemin = saç teli ızgara. Dar ekranda 2, en dar ekranda 1 kolon.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mulubey-app [data-wrows] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .mulubey-app [data-wrows] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Satır uzunluğu ────────────────────────────────────────────────────────
 * KALDIRILDI. Burada gövde paragraflarına `max-width:72ch` uygulanıyordu;
 * gerekçe kabul kriterindeki "68-74 karakter" maddesiydi. Ancak tasarım
 * (03-hizmet-detay.html) hizmet detay gövdesine max-width VERMİYOR — metin
 * içerik sütununu (~920px) tam kullanır. Site sahibi tasarımın birebir
 * uygulanmasını istediği için sınır kaldırıldı.
 *
 * Not: hakkımda ve hizmetler merkezi sayfalarındaki 72ch sınırları tasarımın
 * KENDİSİNDEN gelir (04-hakkimda.html 8, 02-hizmetler.html 2 kez) — onlara
 * dokunulmaz.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Süreç: 1100px altında bağlayıcı okları gizlenir (mulubey.css), kartlar 2x2
 * olur — gizlenen span'lar ızgaradan tamamen çıktığı için ek kural gerekmez.
 *
 * Uzun başlıklar taşmasın (kabul kriteri: uzun başlıkta kart bozulmaz). */
.mulubey-app h1,
.mulubey-app [data-3col] h3,
.mulubey-app [data-related] a > span { overflow-wrap: break-word; }