/* ============================================================================
   Likidera — Legal document page layer (/en/privacy/)
   Consumes tokens/base/components. Rebuilt on v5's token and component layer
   rather than ported from the v3 root's styles/kvkk.css: same reading model —
   one measure-limited column with a contents rail beside it — expressed in v5
   primitives (.container, .callout, .eyebrow, .figures, .grid-texture).

   This page carries NO [data-reveal]. Every other page fades sections in on
   intersection; a legal clause must never be unreadable because an observer
   did not fire. The only motion here is a single entrance on the two columns,
   and it consumes a duration token so prefers-reduced-motion zeroes it at the
   token level.
   ============================================================================ */

.legal {
  padding-block: var(--space-8) var(--space-9);
  position: relative;
}
.legal__inner { display: grid; gap: var(--space-7); }

/* The split matches the site's other two-column surfaces (.record splits at
   1000). Below it the rail is redundant with the document itself, which is
   short enough to scroll, so it is removed rather than stacked. */
@media (min-width: 1000px) {
  .legal__inner {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}


/* ═══════════════ The contents rail ═══════════════ */
.legal-toc { display: none; }
@media (min-width: 1000px) {
  .legal-toc {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    min-width: 0;
  }
  .legal-toc ol {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1px;
  }
  .legal-toc a {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
  }
  .legal-toc a .figures { color: var(--text-faint); }
  .legal-toc a:hover {
    color: var(--text);
    background: var(--surface-2);
  }
  .legal-toc a:hover .figures { color: var(--brand); }
}


/* ═══════════════ The document ═══════════════ */
/* 66ch is the measure the root page settled on and it holds here: at 1440 the
   prose column is 890px and the text stops at about 700px, which is a legal
   document read end to end rather than scanned. */
.legal-doc { max-width: 66ch; margin-inline: auto; min-width: 0; }
@media (min-width: 1000px) { .legal-doc { margin-inline: 0; } }

/* Same step under the breadcrumb as .page-head__title, so the two openings
   sit their H1 at the same distance from the trail. */
.legal-doc__title {
  margin-top: var(--space-5);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
/* The Turkish source carries no date, which is a defect: a data subject cannot
   otherwise tell which version applied when they submitted (brief 09, CR-8). */
.legal-doc__updated {
  margin-top: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--text-faint);
}

.legal-doc__summary { margin-top: var(--space-6); }
.legal-doc__summary p + p { margin-top: var(--space-3); }

.legal-doc__intro {
  margin-top: var(--space-6);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--text-muted);
}


/* ═══════════════ One article ═══════════════ */
.article {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.article > h2 {
  /* Clears the sticky header when reached from the rail or a deep link. */
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: var(--space-1);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
}
.article__no { color: var(--text-faint); font-weight: var(--weight-regular); }
/* The KVKK reference is part of the heading, not a second heading. The h2 is a
   two-column grid and this is its third child, so it would otherwise land in
   the narrow number column and stack one word per line — it is placed in the
   text column explicitly. */
.article__ref {
  grid-column: 2;
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.article > p {
  margin-top: var(--space-4);
  line-height: 1.7;
  color: var(--text-muted);
}
.article > p > strong,
.legal-doc__intro strong,
.legal-doc__summary strong { color: var(--text); font-weight: var(--weight-semibold); }

.article > ul,
.article > ol {
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.article > ul > li,
.article > ol > li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.article > ul > li strong,
.article > ol > li strong { color: var(--text); font-weight: var(--weight-semibold); }
.article > ul > li::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
/* Article 9 is a numbered list of statutory rights, so the numbers are content
   and are rendered rather than left to the marker. */
.article > ol { counter-reset: article-item; }
.article > ol > li { counter-increment: article-item; }
.article > ol > li::before {
  content: counter(article-item) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.9;
  color: var(--text-faint);
}

/* The controller's own details: a quiet block, not a callout — it is reference
   data inside Article 1, not an aside about it. */
.article__panel {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.article__panel p { font-size: var(--text-sm); line-height: 1.62; color: var(--text-muted); }
.article__panel p + p { margin-top: var(--space-2); }
.article__panel > p:first-child { color: var(--text); }

.legal-doc code {
  font-family: var(--font-sans);
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
}

/* Links inside the document carry an underline, so identification does not
   depend on colour alone (1.4.1). Scoped past the breadcrumb, which is
   navigation chrome and takes the site-wide .page-head__crumbs treatment. */
.legal-doc a:not(.page-head__crumbs a) {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.legal-doc a:not(.page-head__crumbs a):hover { color: var(--brand-hover); }

/* One entrance for the two columns, never for an individual article. The
   duration is a token, so the reduced-motion kill-switch zeroes it for free. */
.js .legal-toc,
.js .legal-doc { animation: reveal-rise var(--duration-slow) var(--ease-out) both; }

@media (max-width: 560px) {
  .article > h2 { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .article > ul > li,
  .article > ol > li { padding-left: 1.6rem; }
}