/* ==========================================================================
   Hizmetler — services hub (v6, BRIEF §11.1)
   Order: hero → beş hizmet (links to /hizmetler/<slug>) → altı yetkinlik
   (ids kept for /yetkinlikler#… redirects) → çalışma modelleri → süreç ve
   teslim → SSS. Scoped under .svc-* (page-only classes). Core components
   (.split, .acc, .next-step …) are only adjusted inside these scopes.
   Every section uses the split: the label column carries the section's
   label (+ heading / note), the body carries the content.
   ========================================================================== */

/* ---------- Hero ---------- */
.svc-hero { padding-bottom: clamp(28px, 3.2vw, 48px); }
.svc-hero__title { max-width: none; }
.svc-hero .page-hero__lead { max-width: 52ch; color: var(--ink-2); }

/* ---------- Label column (shared by all sections) ---------- */
.svc-side { display: grid; gap: 12px; align-content: start; justify-items: start; }
.svc-side__title { font-size: var(--fs-h3); line-height: 1.16; letter-spacing: -0.02em; max-width: 16ch; }
.svc-side__note { font-size: 1rem; line-height: 1.5; color: var(--muted); max-width: 36ch; }
.svc-side__note .link { color: var(--ink); }
.svc-nb { white-space: nowrap; }
@media (min-width: 900px) {
  .svc-side { padding-right: 8px; }
  .svc-side__note { font-size: var(--fs-small); }
}
/* Stacked split (services list, capabilities): the list follows the heading and first note;
   the secondary note (guides / concepts) follows the list */
@media (max-width: 899px) {
  :is(.svc-index-section, .svc-section) .svc-side { display: contents; }
  :is(.svc-index-section, .svc-section) .svc-side > * { grid-column: 1 / -1; }
  :is(.svc-index-section, .svc-section) .svc-side__note--sub { order: 2; margin-top: 8px; }
  :is(.svc-index-section__inner, .svc-section__inner) { row-gap: 12px; }
  :is(.svc-index-section__inner, .svc-section__inner) > .split__body { margin-top: 16px; }
}

/* ---------- Beş hizmet: the hub index (one link per row) ---------- */
.svc-index-section__inner {
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: clamp(32px, 3vw, 44px);
}
.svc-index { list-style: none; border-bottom: 1px solid var(--line); }
.svc-index__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem;
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
}
.svc-index__item:first-child { border-top-color: var(--line-strong); }
/* the arrow is the row's last grid cell */
.svc-index__item::after {
  content: "→";
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  transition: transform 0.35s var(--ease-out), color 0.2s var(--ease);
}
.svc-index__num {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.svc-index__name {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.svc-index__link { color: inherit; text-decoration: none; transition: color 0.2s var(--ease); }
/* the whole row is the link's hit area; the accessible name stays the service name */
.svc-index__link::after { content: ""; position: absolute; inset: 0; }
.svc-index__link:focus-visible { outline: none; }
.svc-index__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.svc-index__text { grid-column: 2; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.45; max-width: 62ch; }
.svc-index__item:hover .svc-index__link { color: var(--accent); }
.svc-index__item:hover::after { color: var(--accent); transform: translateX(4px); }
/* desktop: name and one-liner side by side */
@media (min-width: 900px) {
  .svc-index__item { grid-template-columns: 2.25rem minmax(0, 0.6fr) minmax(0, 1.4fr) 1.25rem; padding: 16px 0 18px; }
  .svc-index__item::after { grid-column: 4; }
  .svc-index__text { grid-column: 3; grid-row: 1; max-width: none; }
}

/* ---------- Altı yetkinlik: compact cards ---------- */
.svc-section__inner {
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: clamp(32px, 3.6vw, 56px);
}
.svc-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.svc-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px 0 clamp(28px, 2.4vw, 34px);
  border-top: 1px solid var(--line-strong);
}
.svc-card:last-child { padding-bottom: 0; }
/* two columns; rows line up across a pair via subgrid */
@media (min-width: 700px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .svc-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
  .svc-card:nth-last-child(2) { padding-bottom: 0; }
}

.svc-card__name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--fs-h3);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.svc-card__num {
  flex: none;
  min-width: 1.6em;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.svc-card__text { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; }

.svc-card__k {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* deliverables: a run of inline items separated by " · "; an item only
   breaks inside itself when it is longer than the line */
.svc-card__deliv { display: grid; gap: 6px; align-content: start; }
.svc-card__list {
  list-style: none;
  max-width: 60ch;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.6;
}
.svc-card__list li { display: inline-block; }
.svc-card__list li.svc-card__flow { display: inline; } /* long item: may wrap with the run */
.svc-card__list li:not(:last-child)::after { content: "\00a0·"; margin-right: 0.4em; font-weight: 400; color: var(--muted); }

/* related service page(s) + product concept: label column, link column */
.svc-card__rel {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  align-items: baseline;
  align-content: start;
  padding-top: 2px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.svc-card__rel dd { display: grid; gap: 4px; justify-items: start; }
.svc-card__ref {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.24em;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.svc-card__ref::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.35s var(--ease-out);
}
.svc-card__ref--concept::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--mark, var(--accent));
  box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.16);
  vertical-align: 0.06em;
}
.svc-card__ref:not(.svc-card__ref--concept) { margin-left: 16px; }
.svc-card__ref:hover { color: var(--accent); text-decoration-color: currentColor; }
.svc-card__ref:hover::after { transform: translateX(4px); }

/* deep links (hizmetler.html#…, and /yetkinlikler#… via the 301) */
.svc-card:target { border-top-color: var(--accent); }
.svc-card:target .svc-card__num { color: var(--accent); }

/* ---------- Çalışma modelleri (dark; three cards) ---------- */
.svc-models { --models-flag: #6b75ff; /* cobalt, lifted for contrast on ink */ }
.svc-models__list { list-style: none; display: grid; gap: 32px var(--col-gap); }
.svc-model {
  display: grid;
  row-gap: 12px;
  align-content: start;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
}
.svc-model__num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.svc-model__flag { --mark: var(--models-flag); color: var(--paper); font-size: var(--fs-micro); }
.svc-model__title { font-size: var(--fs-h3); }
.svc-model__tag { color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 40ch; }
.svc-model__time {
  display: grid;
  gap: 4px;
  align-content: end; /* values share a baseline when a label wraps */
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.svc-model__time dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc-model__time dd {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--paper);
}
.svc-model__link { justify-self: start; font-size: var(--fs-small); }
.svc-model__link:hover { color: #9aa2ff; }
/* three columns from tablet up; facts and links line up via subgrid */
@media (min-width: 700px) {
  .svc-models__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .svc-model { grid-row: span 5; grid-template-rows: subgrid; }
}
/* Phones: label and value share one row */
@media (max-width: 699px) {
  .svc-models__list { row-gap: 28px; }
  .svc-model__time { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
  .svc-model__time dd { flex: none; }
}

/* ---------- Süreç ve teslim (soft band) ---------- */
/* process: four compact stations; the canonical detail lives on hakkimizda#surec */
.svc-flow { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.svc-flow__step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-sans);
}
.svc-flow__num { font-size: var(--fs-label); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-flow__name { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.svc-flow__time { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }
@media (min-width: 700px) {
  .svc-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .svc-flow__step { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 14px 0 0; }
  .svc-flow__time { text-align: left; }
}

/* delivery terms: what every model hands over */
.svc-terms {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px var(--col-gap);
  margin-top: clamp(28px, 2.6vw, 36px);
}
@media (min-width: 700px) { .svc-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-term { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line); }
.svc-term__title { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.015em; }
.svc-term p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }

/* ---------- Sık sorulanlar (compact accordion) ---------- */
.svc-faq .acc__item summary { padding-block: 17px; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); }
.svc-faq .acc__body { padding-bottom: 20px; }
.svc-faq .acc__body p { font-size: 1.0625rem; line-height: 1.55; }
/* Two accordion columns on desktop, as on the service pages (service.css) */
.svc-faq__cols { display: grid; column-gap: var(--col-gap); align-items: start; }
@media (min-width: 900px) { .svc-faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .svc-faq__cols > .acc:first-child { border-bottom: 0; } }