/* =====================================================================
   service-detail.css — service detail template (/hizmetler/<slug>/)
   ===================================================================== */

/* 1. hero ------------------------------------------------------------ */
.sd-hero { padding-top: 220px; padding-bottom: 120px; }
.sd-hero__inner { position: relative; z-index: 1; gap: 16px; }
.sd-hero__inner .lead { max-width: 720px; }
.sd-hero .h1 { font-size: 48px; line-height: 50px; max-width: 1000px; }

/* 2. body ------------------------------------------------------------ */
.sd-body { padding-top: 120px; padding-bottom: 75px; }
.sd-body__inner { width: 100%; max-width: 800px; margin-inline: auto; }
.sd-body__photo { border-radius: var(--radius); overflow: hidden; }
.sd-body__photo img { width: 100%; height: 534px; object-fit: cover; }
.sd-byline { margin-top: 20px; font-size: 14px; line-height: 20px; color: var(--gray); }
.sd-byline a { color: var(--brown); font-weight: 600; }
.sd-byline a:hover { color: var(--red); }
.sd-intro { margin-top: 24px; font-size: 18px; line-height: 30px; }
.sd-intro + .sd-intro { margin-top: 14px; font-size: 16px; line-height: 26px; }
.sd-h2 { margin-top: 50px; }
.sd-h2 + .text, .sd-h2 + .sd-list { margin-top: 16px; }
.sd-body p.text + p.text { margin-top: 12px; }
.sd-list { margin-top: 12px; list-style: disc; padding-left: 20px; display: grid; gap: 6px; }
.sd-list li { padding-left: 4px; }
.sd-fee { margin-top: 40px; padding: 16px 20px; border-radius: 10px; background: var(--cream-2); font-size: 15px; line-height: 24px; }
.sd-cta { margin-top: 50px; padding: 40px; display: grid; gap: 16px; }
.sd-cta .hours { max-width: 420px; margin-top: 10px; }
.sd-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* 3. related services --------------------------------------------------- */
.sd-related { padding-top: 75px; padding-bottom: 150px; }
.sd-related__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 1359px) {
  .sd-hero { padding-top: 180px; padding-bottom: 90px; }
  .sd-body { padding-top: 90px; }
  .sd-body__photo img { height: auto; aspect-ratio: 800 / 534; }
  .sd-related__grid { grid-template-columns: repeat(2, 1fr); }
  .sd-related { padding-bottom: 100px; }
}
@media (max-width: 809px) {
  .sd-hero { padding-top: 140px; padding-bottom: 60px; }
  .sd-hero .h1 { font-size: 30px; line-height: 32px; }
  .sd-hero .hero-paw-bg { left: auto; right: -120px; top: -40px; width: 300px; height: 307px; }
  .sd-body { padding-top: 50px; padding-bottom: 40px; }
  .sd-h2 { margin-top: 36px; }
  .sd-intro { font-size: 17px; line-height: 28px; }
  .sd-cta { padding: 24px; }
  .sd-related { padding-top: 40px; padding-bottom: 60px; }
  .sd-related__grid { margin-top: 30px; grid-template-columns: 1fr; }
}