/* ==========================================================================
   Hizmet sayfaları — site/hizmetler/<slug>.html (şablon: templates/service.html)
   Scope: main.service-page; shared by every service page, nothing page-specific.
   Order (BRIEF §11.1): hero → kimin için → kapsam → senaryolar → örnek ekranlar →
   entegrasyonlar → süreç → bütçe ve süre → teslim şartları → SSS → sonraki adım.
   Every section is a .split: the label column carries the station label (h2.label,
   numbered by the journey rail); an optional .service-side sits under it on desktop
   and after the content on phones. Core components are reused as they are:
   .label, .lead, .features, .steps, .case-card, .chip--demo, .acc, .btn, .link, .crumbs.
   Compact rhythm like the /hizmetler hub: hairline + 28–40px instead of section--tight.
   ========================================================================== */

/* ---------- Hero: crumbs | h1 + lead + two CTAs ---------- */
.service-page .service-hero { padding-bottom: clamp(32px, 3.2vw, 44px); }
.service-page .service-hero__title { max-width: none; }
.service-page .service-hero__lead { max-width: 54ch; }
.service-page .service-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.service-page .service-hero .service-actions { margin-top: clamp(24px, 2.6vw, 36px); }

/* ---------- Section rhythm ---------- */
.service-page .service-sec { padding-block: clamp(28px, 2.6vw, 36px); }
.service-page .service-sec--ruled { padding-top: 0; }
.service-page .service-sec--ruled > .container { border-top: 1px solid var(--line); padding-top: clamp(28px, 2.6vw, 36px); }
/* Each station opens with one answer-first sentence, then its block */
.service-page .service-lede { max-width: 60ch; text-wrap: pretty; }
.service-page .service-lede + * { margin-top: clamp(20px, 2.2vw, 32px); }
@media (max-width: 699px) {
  .service-page .service-lede { font-size: 1.125rem; line-height: 1.4; }
}

/* Side notes: under the label on desktop, after the content on phones */
.service-page .service-side { display: grid; gap: 10px; align-content: start; font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.service-page p.service-side { display: block; } /* a one-line note: text + link stay inline */
.service-page .service-side p { font-family: inherit; }
.service-page .service-side__title { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; color: var(--ink); }
.service-page .service-side__fine { font-size: var(--fs-micro); }
/* A related guide gets its own readable line (not the 12px product-name note) */
.service-page .service-side__guide { color: var(--ink-2); }
.service-page .service-side__guide .link { padding-block: 2px; }
@media (min-width: 900px) {
  .service-page .service-split { grid-template-rows: auto 1fr; }
  .service-page .service-split > .split__body { grid-row: 1 / span 2; }
  .service-page .service-split > .service-side { grid-column: 1 / span 3; grid-row: 2; padding-right: 8px; }
  .service-page.has-journey .service-side { padding-left: 24px; } /* aligns with .journey-col labels */
}

/* Lists with a small module square; --open = outlined square (the logo's empty slot) */
.service-page .service-list { list-style: none; display: grid; gap: 8px; }
.service-page .service-list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.service-page .service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--ink);
}
.service-page .service-list--open li::before { background: transparent; box-shadow: inset 0 0 0 1.25px var(--ink); }
.service-page .service-list strong { font-family: var(--font-sans); font-size: 0.94em; font-weight: 600; color: var(--ink); }

/* Compact numbered grids (core .features): modules, delivery terms. Two columns on phones. */
.service-page .service-grid { gap: 20px var(--col-gap); }
.service-page .service-grid .feature { padding-top: 12px; gap: 6px; }
.service-page .service-grid .feature p { font-size: 1rem; line-height: 1.45; }
@media (max-width: 699px) {
  .service-page .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .service-page .service-grid .feature::before { display: none; } /* the order carries no meaning on a phone grid */
  .service-page .service-grid .feature h3 { font-size: 1.0625rem; }
  .service-page .service-grid .feature p { font-size: 0.9375rem; }
}

/* ---------- Kimin için: fits (by role) | does not fit (soft box) ---------- */
.service-page .service-fit { display: grid; gap: 20px var(--col-gap); align-items: start; }
@media (min-width: 900px) {
  .service-page .service-fit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.service-page .service-fit h3 { font-size: var(--fs-h4); margin-bottom: 12px; }
.service-page .service-fit__col--alt { padding: 18px 22px 20px; border-radius: var(--radius); background: var(--paper-2); }
.service-page .service-fit__col--alt .service-list li { font-size: 1rem; }
.service-page .service-fit__link { margin-top: 14px; font-size: var(--fs-small); }

/* ---------- Kapsam: scope box (out of scope | assumptions) ---------- */
.service-page .service-scope {
  display: grid;
  gap: 16px var(--col-gap);
  margin-top: clamp(22px, 2.4vw, 32px);
  padding: 16px 20px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
@media (min-width: 700px) {
  .service-page .service-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-page .service-scope__title { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.service-page .service-scope .service-list { gap: 5px; }
.service-page .service-scope .service-list li { font-size: var(--fs-small); line-height: 1.45; }
@media (max-width: 699px) {
  .service-page .service-scope { padding: 14px 16px 16px; }
  .service-page .service-scope .service-list li { line-height: 1.4; }
}

/* ---------- Senaryolar: role · input · processing · output ---------- */
.service-page .service-cases { list-style: none; display: grid; gap: 14px var(--col-gap); }
@media (min-width: 700px) {
  .service-page .service-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-page .service-case {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px 18px 18px;
  border-radius: var(--radius);
  background: var(--paper);
}
.service-page .service-case h3 { font-size: var(--fs-h4); }
.service-page .service-case dl { display: grid; gap: 7px; }
.service-page .service-case dl > div { display: grid; gap: 1px; padding-top: 7px; border-top: 1px solid var(--line); }
.service-page .service-case dt,
.service-page .service-times dt {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.service-page .service-case dd { font-family: var(--font-serif); font-size: 0.9875rem; line-height: 1.42; color: var(--ink-2); }

/* ---------- Örnek ekranlar: two concept cards + honesty line ---------- */
.service-page .service-concepts { display: grid; gap: 24px var(--col-gap); }
@media (min-width: 700px) {
  .service-page .service-concepts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-page .service-concept .case-card__meta { padding-top: 12px; gap: 4px; }
.service-page .service-concept .case-card__desc { font-size: 1rem; }
.service-page .service-concept__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.service-page .service-concept__foot .case-card__tags { margin-top: 0; }
.service-page .service-shots { display: grid; gap: clamp(16px, 1.8vw, 24px) var(--col-gap); }
@media (min-width: 1100px) {
  .service-page .service-shots { grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr); align-items: end; }
  .service-page .service-shots .service-note { padding-bottom: 4px; }
}
.service-page .service-note {
  position: relative;
  padding-left: 18px;
  max-width: 82ch;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--ink-2);
}
.service-page .service-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}
.service-page .service-note strong { font-weight: 600; color: var(--ink); }
.service-page .service-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }

/* Swipe row on phones (scenario and concept cards): one card per screen + a peek of the next */
@media (max-width: 699px) {
  .service-page .service-swipe {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .service-page .service-swipe::-webkit-scrollbar { display: none; }
  .service-page .service-swipe > * { scroll-snap-align: start; }
}

/* ---------- Entegrasyonlar: table; rows stack into labelled blocks on phones ---------- */
.service-page .service-table { width: 100%; border-collapse: collapse; }
.service-page .service-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.service-page .service-table th,
.service-page .service-table td {
  padding: 10px 16px 10px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.service-page .service-table thead th {
  padding-top: 0;
  border-top: 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.service-page .service-table tbody th { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.service-page .service-table td { font-family: var(--font-serif); font-size: 1rem; line-height: 1.42; color: var(--ink-2); }
.service-page .service-table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.service-page .service-table :is(th, td):last-child { padding-right: 0; }
@media (max-width: 699px) {
  .service-page .service-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .service-page .service-table,
  .service-page .service-table tbody,
  .service-page .service-table tr,
  .service-page .service-table th,
  .service-page .service-table td { display: block; }
  .service-page .service-table tr { padding: 10px 0 11px; border-top: 1px solid var(--line); }
  .service-page .service-table tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .service-page .service-table tbody tr:last-child > * { border-bottom: 0; }
  .service-page .service-table th,
  .service-page .service-table td { padding: 0; border: 0; }
  .service-page .service-table tbody th { margin-bottom: 1px; white-space: normal; }
  .service-page .service-table td { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 10px; padding-top: 2px; font-size: 0.9375rem; }
  .service-page .service-table td[data-label="Örnek"] { display: block; padding: 0 0 4px; font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--muted); }
  .service-page .service-table td[data-label="Örnek"]::before { content: none; }
  .service-page .service-table td::before {
    content: attr(data-label);
    padding-top: 0.2em;
    font-family: var(--font-sans);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---------- Süreç: core .steps, tighter; two columns on phones ---------- */
.service-page .service-steps .step { padding-bottom: 18px; gap: 8px; }
@media (max-width: 699px) {
  .service-page .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .service-page .service-steps .step h3 { font-size: 1.125rem; }
  .service-page .service-steps .step p { font-size: 0.9375rem; }
}

/* ---------- Bütçe ve süre: cost drivers | durations (side box) ---------- */
.service-page .service-drivers { display: grid; column-gap: var(--col-gap); }
.service-page .service-drivers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) {
  .service-page .service-drivers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.service-page .service-drivers > div { display: grid; gap: 3px; align-content: start; padding: 11px 0 13px; border-top: 1px solid var(--line); }
.service-page .service-drivers dt { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.service-page .service-drivers dd { font-family: var(--font-serif); font-size: 1rem; line-height: 1.42; color: var(--muted); }
.service-page .service-times {
  gap: 14px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
}
.service-page.has-journey .service-times { padding-left: 18px; margin-left: 24px; }
.service-page .service-times dl { display: grid; gap: 12px; }
.service-page .service-times dl > div { display: grid; gap: 2px; }
.service-page .service-times dd { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.service-page .service-times dd small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--muted);
}
.service-page .service-budget__link { margin-top: 14px; font-size: var(--fs-small); }
@media (max-width: 899px) {
  .service-page.has-journey .service-times { margin-left: 0; }
  .service-page .service-times dl > div { grid-template-columns: 6.6rem minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
  .service-page .service-times dd { font-size: 1.0625rem; }
  .service-page .service-times dd small { font-size: 0.875rem; }
}

/* ---------- SSS: two accordion columns on desktop, one list on phones ---------- */
.service-page .service-faq { display: grid; column-gap: var(--col-gap); align-items: start; }
@media (min-width: 900px) {
  .service-page .service-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-page .service-faq .acc__item summary { padding-block: 16px; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.3; }
@media (max-width: 899px) {
  .service-page .service-faq > .acc:first-child { border-bottom: 0; }
  .service-page .service-faq .acc__item summary { padding-block: 14px; }
}
.service-page .service-faq .acc__body { padding-bottom: 20px; }
/* The strong rule of "Sonraki adım" closes the list; a hairline right above it would double it */
.service-page .service-faq .acc { border-bottom: 0; }
.service-page .service-faq .acc__body p { font-size: 1.0625rem; line-height: 1.55; }

/* ---------- Sonraki adım: the page's call (strong rule, the route's last station) ---------- */
.service-page .service-next {
  border-top: 1px solid var(--line-strong);
  padding-block: clamp(24px, 2.8vw, 40px) clamp(40px, 4vw, 56px);
}
.service-page .service-next__body { display: grid; gap: 20px var(--col-gap); }
.service-page .service-next__title {
  max-width: 46ch;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.service-page .service-next__title span { color: var(--muted); }
.service-page .service-next__guides { display: grid; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.service-page .service-next__k { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.service-page .service-next__guides ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: var(--fs-small); }

/* The call above is this page's action; the generic footer CTA would repeat it (§8.2), as on concept pages. */
body:has(main.service-page) .footer-cta { display: none; }
body:has(main.service-page) .site-footer { padding-top: clamp(48px, 6vw, 96px); }
body:has(main.service-page) .footer-cols { border-top: 0; }