/* ==========================================================================
   Concept demos — shared page layer (cozumler/*.html)
   Loaded by all six demo pages before their own case-<slug>.css, scoped
   under main.case-page. Keeps the six pages on one rhythm; each
   case-<slug>.css only adds that demo's art direction.
   Workarounds for core behaviour are also reported to the core owner.
   ========================================================================== */

/* ---------- Running text ---------- */
/* Core `.prose p` (0,1,1) outranks `.lead` (0,1,0), so a lead inside a prose
   block rendered at body size. Restore the lead scale. */
.case-page .prose > p.lead {
  font-size: var(--fs-lead);
  line-height: 1.38;
  color: var(--ink);
  text-wrap: balance;
}
/* Book measure for body copy in the 8-column prose column (~75 characters
   instead of ~110 at 1440px); the lead and h2 keep the full column. */
.case-page .prose > p:not(.lead) { max-width: 39rem; }
/* More air after the lead and after a section statement (core gives ~19px). */
.case-page .prose > .lead + p { margin-top: clamp(24px, 2.6vw, 40px); }
.case-page .prose > .h2 + p { margin-top: clamp(20px, 2.2vw, 32px); }

/* figcaption is not a <p>, so it misses the core `p { text-wrap: pretty }`. */
.case-page .case-figure figcaption { text-wrap: pretty; }
.case-page .stat__label { text-wrap: balance; }

/* ---------- Cover ---------- */
/* Core crops the cover to 4:3 below 700px, which cuts into the UI at the
   sides of the 16:10 cover art. Show the whole composition, like the cards. */
@media (max-width: 699px) {
  .case-page .case-cover { aspect-ratio: 16 / 10; }
}

/* ---------- Wide product shot on the soft band ----------
   wide.svg draws its app window inside a margin painted in --case-soft (the
   band colour), so the window used to float narrower than the cover above and
   the image pair below. Enlarge the media box so the window's edges sit
   exactly on the container edges, and trim the canvas margin above/below it.
   Each case page sets the window geometry of its wide.svg (1600×1000 canvas):
     --win-x  left/right canvas margin   --win-y  top/bottom canvas margin
   Percent margins resolve against the container width. */
.case-page .case-wide { overflow-x: clip; }
.case-page .case-wide .case-figure__media {
  margin-inline: calc(var(--win-x) * -100% / (1600 - 2 * var(--win-x)));
  margin-top: calc(var(--win-y) * -100% / (1600 - 2 * var(--win-x)));
  margin-bottom: calc(var(--win-y) * -100% / (1600 - 2 * var(--win-x)) + 12px);
  border-radius: 0;
}

/* ---------- Image pair ---------- */
/* Stacked portrait figures on phones: core .case-pair uses the 16px column gap
   as row gap, which glued the first caption to the next image. */
@media (max-width: 759px) {
  .case-page .case-pair { row-gap: clamp(40px, 11vw, 56px); }
}

/* ---------- Targets band ("Neyi ölçeriz") ---------- */
/* Core mutes band labels to 72% of --case-ink, which drops below AA on the
   orange, teal and violet bands. Full ink on every demo for one treatment. */
.case-page .case-band .stat__label { color: var(--case-ink); }
/* Core stat values (up to 80px) are wider than a 4-up column inside
   .split__body, so values such as "%99,5" or "30 dk" ran into the next stat.
   Size the values to the stats row — identical on all six demos. */
.case-page .case-band .stats { container-type: inline-size; }
.case-page .case-band .stat__value {
  white-space: nowrap;
  font-size: min(clamp(2.5rem, 1.6rem + 3.2vw, 5rem), 13.5cqi);
}
@media (min-width: 900px) {
  .case-page .case-band .stat__value { font-size: min(clamp(2.5rem, 1.6rem + 3.2vw, 5rem), 6.2cqi); }
}
/* The target disclaimer under the KPI row (§1.1-5): one treatment on all six
   demos — body serif in full band ink (AA on every band colour). */
.case-page .case-band__note {
  margin-top: clamp(32px, 4vw, 56px);
  max-width: 62ch;
  color: var(--case-ink);
}

/* ---------- Tasarım ilkesi ----------
   codariva's own statement: set at quote scale, but without quotation marks
   or attribution, so it can never read as a client testimonial. Same scale as
   the home page statement. */
.case-page .case-principle__text {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.15rem + 1.75vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- Teknoloji ve ekip: credits block ----------
   Two columns on the hero-meta rhythm (2 + 2 of 4); the team as a small index. */
.case-page .case-credits { display: grid; gap: 48px var(--col-gap); }
@media (min-width: 640px) {
  .case-page .case-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.case-page .case-credits__col { display: grid; gap: 14px; align-content: start; }
/* Same line box as .split__label (body size, 1.55, .35em top padding) with the
   small text inline on its baseline, so the column titles share a baseline
   with "Teknoloji ve ekip". text-align-last pushes the team count right. */
.case-page .case-credits__title {
  padding-top: 0.35em;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: justify;
  text-align-last: justify;
}
.case-page .case-credits__name,
.case-page .case-credits__meta { font-size: var(--fs-micro); color: var(--muted); }
.case-page .case-credits__name { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.case-page .case-credits__meta { display: inline-block; text-align-last: auto; font-weight: 500; letter-spacing: 0.02em; }
.case-page .case-credits .case-stack { border-top: 1px solid var(--line); padding-top: 16px; }
.case-page .case-team { list-style: none; border-top: 1px solid var(--line); }
.case-page .case-team li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: 13px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--ink-2);
}
.case-page .case-team__n {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}