/* ==========================================================================
   Yetkinlikler — page styles
   Scoped under .svc-* / .svc__* (page-only classes). Core components
   (.split, .index-list, .quote, .acc, .case-card__client …) are only
   adjusted inside these scopes, never globally.
   Inner grids use 9 columns + var(--col-gap) so that, inside the split body
   (page columns 4–12), every edge lands on the page's 12-column grid.
   ========================================================================== */

/* ---------- Hero ---------- */
.svc-hero__title { max-width: none; }
.svc-hero .page-hero__lead { max-width: 46ch; color: var(--ink-2); }

/* ---------- Overview index ---------- */
.svc-overview { padding-bottom: clamp(80px, 9vw, 152px); }
/* in-page anchors: the arrow points down and nudges down on hover */
.svc-index .index-list__meta { max-width: 64ch; }
.svc-index a.index-list__link:hover .index-list__arrow { transform: translateY(5px); }
.svc-overview__note { margin-top: clamp(28px, 3.2vw, 44px); }

/* ---------- Service sections ---------- */
.svc { padding-block: clamp(72px, 8.5vw, 136px); }

.svc__label { display: grid; gap: 10px; align-content: start; }
.svc__num {
  font-size: var(--fs-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.svc__of { color: var(--muted); }
.svc__name {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
@media (max-width: 899px) {
  .svc__label { display: flex; align-items: baseline; gap: 14px; }
}

.svc__title { max-width: 28ch; }

.svc__grid {
  display: grid;
  gap: clamp(36px, 4vw, 48px);
  margin-top: clamp(32px, 4vw, 64px);
}
.svc__text p {
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  line-height: 1.62;
  max-width: 58ch;
}
.svc__text p + p { margin-top: 1em; }

.svc__head { color: var(--muted); }
.svc__deliv .svc__head { margin-bottom: 14px; }
/* rules sit under each item (+ one on the list top) so a short last column
   in the two-column variant ends cleanly instead of leaving an open cell */
.svc__list { list-style: none; border-top: 1px solid var(--line); }
.svc__list li {
  padding-block: 12px 13px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.35;
}
.svc__note { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); }

/* phone + tablet: deliverables as a two-column list under the text */
@media (max-width: 1099px) {
  .svc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
/* desktop: text on body cols 1–5 (page 4–8), deliverables on body cols 7–9 (page 10–12) */
@media (min-width: 1100px) {
  .svc__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .svc__text { grid-column: 1 / span 5; }
  .svc__deliv { grid-column: 7 / span 3; }
}

/* Proof: one screen from a concept demo + the design principle behind it,
   side by side. Image on body cols 6–9 (flip: 1–4), principle on the other
   four, col 5 is air. */
.svc-proof {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(56px, 6.5vw, 104px);
}
.svc-proof__shot .case-figure__media { aspect-ratio: 4 / 5; }
.svc-proof__shot .case-figure__media img { height: 100%; object-fit: cover; }
@media (min-width: 700px) {
  .svc-proof {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: center;
  }
  .svc-proof > * { grid-row: 1; }
  .svc-proof__shot { grid-column: 6 / span 4; }
  .svc-proof > .svc-principle { grid-column: 1 / span 4; }
  .svc-proof--flip .svc-proof__shot { grid-column: 1 / span 4; }
  .svc-proof--flip > .svc-principle { grid-column: 6 / span 4; }
}

/* Design principle: codariva's own statement for the demo (no quote marks,
   no attribution). Label first — demo-colour mark, "Tasarım ilkesi", then the
   demo name on the same text edge — so it never reads as a testimonial. */
.svc-principle { display: grid; gap: 22px; align-content: center; }
.svc-principle__label {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.4;
}
.svc-principle__label::before {
  content: "";
  grid-row: 1;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--mark, var(--accent));
}
.svc-principle__label > * { grid-column: 2; }
.svc-principle__label strong { font-weight: 600; }
.svc-principle__label span { color: var(--muted); }
.svc-principle__text {
  font-size: clamp(1.4rem, 1rem + 1.25vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 30ch;
  text-wrap: balance;
}

/* Related work */
.svc__work { margin-top: clamp(48px, 5.5vw, 88px); }
.svc__work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 14px;
}
.svc__all { font-size: var(--fs-small); }
.svc__cases { list-style: none; border-bottom: 1px solid var(--line); }
.svc__cases > li { border-top: 1px solid var(--line); }

.svc-case {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
  padding-block: 16px;
  color: inherit;
}
.svc-case__media {
  grid-row: 1 / span 2;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background: var(--case);
  isolation: isolate;
}
.svc-case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.svc-case__who { display: grid; gap: 4px; align-content: start; }
.svc-case .case-card__client { font-size: 1.0625rem; }
.svc-case .case-card__tags { margin-top: 0; }
.svc-case__line {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.svc-case__arrow { display: none; }

.svc-case .case-card__client,
.svc-case__line,
.svc-case__arrow { transition: color 0.25s var(--ease), transform 0.5s var(--ease-out), opacity 0.3s; }
.svc-case:hover .svc-case__media img { transform: scale(1.05); }
.svc-case:hover .case-card__client { color: var(--accent); }
.svc-case:hover .svc-case__arrow { color: var(--accent); opacity: 1; transform: translateX(6px); }

@media (max-width: 599px) {
  .svc-case .case-card__tags { display: none; }
  .svc-case__line { font-size: 0.9375rem; }
}
@media (min-width: 600px) {
  .svc-case { grid-template-columns: minmax(0, 168px) minmax(0, 1fr); column-gap: var(--col-gap); }
}
/* split layout (body = 9 page columns): thumb on cols 1–2, text stacked beside it, arrow on col 9 */
@media (min-width: 900px) {
  .svc-case {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    padding-block: 18px;
  }
  .svc-case__media { grid-column: 1 / span 2; }
  .svc-case__who,
  .svc-case__line { grid-column: 3 / span 6; }
  .svc-case__arrow {
    display: block;
    grid-column: 9;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    font-size: var(--fs-h3);
    line-height: 1;
    opacity: 0.35;
  }
}
/* wide desktop row: thumb (2 cols) · demo (2 cols) · line (4 cols) · arrow (1 col) */
@media (min-width: 1280px) {
  .svc-case { align-items: center; }
  .svc-case__media { grid-row: auto; }
  .svc-case__who { grid-column: 3 / span 2; }
  .svc-case__line { grid-column: 5 / span 4; }
  .svc-case__arrow { grid-row: auto; }
}

/* ---------- Çalışma modelleri (dark) ---------- */
.svc-models { --models-flag: #6b75ff; /* cobalt, lifted for contrast on ink */ }
.svc-models__title { max-width: 20ch; }
.svc-models__lead { margin-top: clamp(20px, 2.2vw, 28px); color: var(--ink-2); max-width: 40ch; }

.svc-models__list {
  list-style: none;
  display: grid;
  gap: 56px var(--col-gap);
  margin-top: clamp(56px, 7vw, 112px);
}
.svc-model {
  display: grid;
  row-gap: 14px;
  align-content: start;
  padding-top: 20px;
  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); margin-top: 8px; }
.svc-model__tag { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.45; max-width: 30ch; }
.svc-model__fact {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.svc-model__fact:first-of-type { margin-top: 14px; }
.svc-model__fact dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc-model__fact dd {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 40ch;
}
.svc-model__time dd {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--paper);
}
/* three columns; facts line up across cards via subgrid */
@media (min-width: 900px) {
  .svc-models__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .svc-model { grid-row: span 6; grid-template-rows: subgrid; }
}

.svc-models__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(56px, 6vw, 96px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.svc-models__foot p { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.38; max-width: 46ch; }

/* ---------- Sık sorulanlar ---------- */
.svc-faq__title { max-width: 20ch; }
.svc-faq__acc { margin-top: clamp(40px, 5vw, 72px); }
.svc-faq__acc .acc__body p + p { margin-top: 0.9em; }
.svc-faq__more { margin-top: 28px; color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.svc-faq__more .link { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; color: var(--ink); }

/* keep compound terms ("blue-green") on one line */
.svc-nowrap { white-space: nowrap; }