/* ==========================================================================
   Hizmetler makalesi ("Size nasıl yardımcı olabiliriz?")
   Sadece hizmetler.html yükler; site genelindeki styles.css'e dokunmaz.
   ========================================================================== */
.sa-hero h1 { max-width: 20ch; }
.sa-top-ctas { justify-content: flex-start; margin-top: 1.75rem; }

/* Tek sütun: içindekiler makalenin üstünde yatay bir satır, makale hero ile aynı hizada. */
.sa-body { padding-top: 3.5rem; }
.sa-layout { max-width: 50rem; }
.sa-toc {
  padding: 0 0 1.75rem; border: 0; border-bottom: 1px solid rgb(var(--fg-rgb) / 0.1);
  border-radius: 0; background: none;
}
.sa-toc ol {
  list-style: none; padding: 0; margin-top: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.sa-toc li { margin: 0; }
.sa-toc a {
  display: inline-block; padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.88rem;
  border: 1px solid rgb(var(--fg-rgb) / 0.14); color: rgb(var(--fg-rgb) / 0.75);
  transition: border-color 0.2s, color 0.2s;
}
.sa-toc a:hover { border-color: rgb(var(--accent-rgb) / 0.6); }
.sa-article { max-width: none; margin-top: 3rem; }
.sa-article > h2:first-child { margin-top: 0; }
.sa-article h3 { font-size: 1.1rem; font-weight: 600; color: rgb(var(--fg-rgb)); }

/* 5 needs */
.sa-needs { list-style: none !important; padding: 0 !important; margin-top: 1.5rem; display: grid; gap: 1rem; }
.sa-needs li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; margin: 0 !important;
  padding: 1.25rem; border-radius: 1.25rem; border: 1px solid rgb(var(--fg-rgb) / 0.1); background: rgb(var(--card) / 0.5);
}
.sa-num {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem;
  background: var(--grad); color: rgb(var(--accent-fg-rgb)); font-weight: 600;
}
.sa-needs p { margin-top: 0.4rem; font-size: 0.97rem; }
.sa-help { font-size: 0.88rem !important; color: rgb(var(--fg-rgb) / 0.6); }
.sa-help span { font-weight: 500; }

/* statistics */
.sa-stats { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .sa-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sa-stats { grid-template-columns: repeat(3, 1fr); } }
.sa-stat {
  margin: 0; padding: 1.25rem; border-radius: 1.25rem;
  border: 1px solid rgb(var(--fg-rgb) / 0.1); background: rgb(var(--card) / 0.6);
  display: grid; gap: 0.5rem; align-content: start;
}
.sa-stat strong {
  font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1; letter-spacing: -0.03em; font-weight: 700;
  background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sa-stat figcaption { font-size: 0.9rem; line-height: 1.5; color: rgb(var(--fg-rgb) / 0.75); }
.sa-stat cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.75rem; }
.sa-stat cite a { color: rgb(var(--fg-rgb) / 0.55); text-decoration: underline; text-underline-offset: 3px; }

/* what makes a brand stand out */
.sa-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .sa-grid { grid-template-columns: repeat(2, 1fr); } }
.sa-card { padding: 1.25rem; border-radius: 1.25rem; border: 1px solid rgb(var(--fg-rgb) / 0.1); }
.sa-card p { margin-top: 0.4rem; font-size: 0.95rem; }
.sa-card .text-link { display: inline-block; margin-top: 0.6rem; font-size: 0.9rem; }

/* services */
.sa-services { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 760px) { .sa-services { grid-template-columns: repeat(2, 1fr); } }
.sa-service {
  padding: 1.5rem; border-radius: 1.25rem;
  border: 1px solid rgb(var(--fg-rgb) / 0.1); background: rgb(var(--card) / 0.6);
}
.sa-service h3 { margin-top: 0.35rem; }
.sa-service p { margin-top: 0.5rem; font-size: 0.95rem; }
.sa-deliver-title { margin-top: 1rem !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.14em; color: rgb(var(--fg-rgb) / 0.5); }
.sa-deliver { list-style: none !important; padding: 0 !important; margin-top: 0.5rem !important; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sa-deliver li {
  margin: 0 !important; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.8rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.35);
}

/* process */
.sa-steps { list-style: none !important; padding: 0 !important; margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 760px) { .sa-steps { grid-template-columns: repeat(2, 1fr); } }
.sa-steps li { margin: 0 !important; padding-top: 1rem; border-top: 2px solid rgb(var(--accent-rgb) / 0.4); }
.sa-steps strong { display: block; margin-top: 0.3rem; }
.sa-steps p { margin-top: 0.3rem; font-size: 0.93rem; }

.sa-faq { margin-top: 1rem; }