/* ==========================================================================
   Legal (gizlilik.html) + 404 — page styles
   Scoped: .legal-* (Gizlilik Politikası: GDPR + KVKK, Çerez Politikası) and .nf-* (404)
   ========================================================================== */

/* ==========================================================================
   Gizlilik Politikası (GDPR, Codice Privacy, KVKK) + Çerez Politikası
   ========================================================================== */

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

.legal-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--col-gap);
  margin-top: clamp(40px, 5vw, 72px);
}
.legal-meta > div { display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line); }
.legal-meta dt {
  white-space: nowrap;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-meta dd { font-size: var(--fs-small); font-weight: 500; line-height: 1.45; }
@media (max-width: 599px) {
  /* phones: label/value rows — no orphan cells, the e-mail never breaks */
  .legal-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-meta > div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 13px 14px; }
}
.legal-meta .link { text-decoration-color: var(--line-strong); }
.legal-meta .link:hover { color: var(--accent); text-decoration-color: currentColor; }
@media (min-width: 900px) {
  /* 9-col body → four meta cells on the grid: 2 + 2 + 3 (e-mail) + 2 columns */
  .legal-meta { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .legal-meta > div { grid-column: span 2; }
  .legal-meta > div:nth-child(3) { grid-column: span 3; }
}

/* ---------- Table of contents (sticky label column) ---------- */
.legal-toc { display: grid; gap: 28px; align-content: start; }
.legal-toc__title { margin-bottom: -4px; }
.legal-toc__head {
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-toc__list { list-style: none; display: grid; }
.legal-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 6px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}
.legal-toc__num {
  flex: none;
  min-width: 1.6em;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s var(--ease);
}
.legal-toc__list a:hover,
.legal-toc__list a:hover .legal-toc__num { color: var(--accent); }

/* Scroll-spy without JS where supported: the entry for the section in view is highlighted */
@supports selector(:target-current) {
  .legal-toc { scroll-target-group: auto; }
  .legal-toc__list a:target-current,
  .legal-toc__list a:target-current .legal-toc__num { color: var(--accent); }
}

@media (max-width: 899px) {
  .legal-toc { gap: 24px; padding-bottom: 8px; }
  .legal-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .legal-toc__list a { padding-block: 7px; border-top: 1px solid var(--line); }
}

/* ---------- Body column ---------- */
.legal-body { min-width: 0; }

.legal-intro__text {
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40rem;
}

.legal-summary {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.legal-summary__list {
  list-style: none;
  display: grid;
  gap: 20px var(--col-gap);
  margin-top: clamp(20px, 2.4vw, 28px);
}
@media (min-width: 700px) { .legal-summary__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legal-summary__list li {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.legal-summary .link { overflow-wrap: anywhere; }

/* ---------- Numbered sections ---------- */
.legal-sec { margin-top: clamp(72px, 8vw, 120px); }
.legal-sec__title {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(20px, 2.2vw, 28px);
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.legal-sec__num {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.legal-sub {
  margin-top: clamp(36px, 4vw, 48px);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.legal-sub + .legal-dl,
.legal-sub + .legal-prose { margin-top: 14px; }

/* Readable measure for running text */
.legal-prose { max-width: 40rem; }
.legal-prose ul { list-style: none; padding-left: 0; }
.legal-prose ul li { position: relative; padding-left: 1.5em; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); }
.legal-prose ul li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: calc(0.775em - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--ink);
}
.legal-prose ul li + li { margin-top: 0.55em; }
.legal-dl + .legal-prose,
.legal-cookies + .legal-prose,
.legal-rights + .legal-prose { margin-top: clamp(24px, 2.6vw, 32px); }
.legal-prose + .legal-prose { margin-top: clamp(20px, 2.4vw, 28px); }
.legal-note p { font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }

/* Cookie names, e.g. __cf_bm */
.legal-code {
  padding: 0.08em 0.36em;
  border-radius: 4px;
  background: var(--paper-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  color: var(--ink);
  white-space: nowrap;
}

/* Definition rows aligned to the page grid (body = 7 columns) */
.legal-dl { margin-top: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--line); }
.legal-dl > div {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 4px;
  padding-block: 16px 18px;
  border-top: 1px solid var(--line);
}
.legal-dl dt {
  grid-column: span 2;
  padding-top: 0.22em;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
}
.legal-dl dd {
  grid-column: span 5;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.legal-dl dd strong { font-weight: 600; color: var(--ink); }
@media (max-width: 699px) {
  .legal-dl > div { grid-template-columns: minmax(0, 1fr); padding-block: 14px 16px; }
  .legal-dl dt, .legal-dl dd { grid-column: 1; }
  .legal-dl dt { padding-top: 0; color: var(--muted); }
}

/* Rights — GDPR article numbers (15–22) or KVKK md. 11 bent letters (a–ğ) in module squares */
.legal-rights { list-style: none; margin-top: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--line); }
.legal-rights li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
  padding-block: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.legal-rights strong { font-weight: 600; color: var(--ink); }
.legal-rights__key {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.legal-rights--gdpr .legal-rights__key { font-size: 0.75rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Application e-mail */
.legal-mail {
  display: inline-grid;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
  color: var(--ink);
}
.legal-mail__label { font-size: var(--fs-label); font-weight: 500; color: var(--muted); }
.legal-mail__addr {
  justify-self: start;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  transition: color 0.2s var(--ease);
}
.legal-mail__addr::after { content: "→"; display: inline-block; margin-left: 0.3em; transition: transform 0.35s var(--ease-out); }
.legal-mail:hover .legal-mail__addr { color: var(--accent); }
.legal-mail:hover .legal-mail__addr::after { transform: translateX(5px); }

/* ---------- Part 2: Çerez Politikası ---------- */
.legal-part { margin-top: clamp(112px, 13vw, 200px); }
.legal-part__head {
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 2px solid var(--ink);
}
.legal-part__title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.legal-part__meta {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--muted);
}
.legal-part__lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 44ch; color: var(--ink-2); }
.legal-part .legal-sec:first-of-type { margin-top: clamp(56px, 6vw, 96px); }

/* Cookie categories */
.legal-cookies { margin-top: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--line); }
.legal-cookie {
  display: grid;
  gap: 12px;
  padding-block: clamp(22px, 2.4vw, 28px) clamp(26px, 2.8vw, 32px);
  border-top: 1px solid var(--line);
}
.legal-cookie__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.legal-cookie__name { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; }
.legal-cookie__state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--ink);
}
.legal-cookie__state--consent::before { background: var(--accent); }
/* "Kullanmıyoruz": an empty module — echoes the open slot in the codariva mark */
.legal-cookie__state--off { color: var(--ink-2); }
.legal-cookie__state--off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.legal-cookie__text { max-width: 40rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.legal-cookie__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px var(--col-gap);
  margin-top: 6px;
}
.legal-cookie__facts > div { display: grid; gap: 4px; align-content: start; }
.legal-cookie__facts dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-cookie__facts dd { font-size: var(--fs-small); font-weight: 500; line-height: 1.4; }
@media (max-width: 699px) {
  .legal-cookie__facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .legal-cookie__facts > div { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
}


/* ==========================================================================
   404
   ========================================================================== */
.nf-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 104px));
  padding-bottom: clamp(72px, 8vw, 136px);
}
.nf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--col-gap);
}

/* Copy */
.nf-hero__label-sep { color: var(--muted); }
.nf-hero__title {
  font-size: clamp(3rem, 1rem + 6.4vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: -0.042em;
}
.nf-hero__line { display: block; }
.nf-hero__lead { margin-top: clamp(24px, 2.6vw, 36px); max-width: 30ch; color: var(--ink-2); }
.nf-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 3.4vw, 48px); }

/* Scene: the codariva module grid with one module fallen out of its slot.
   --s is the grid size; every other measure derives from it (module = .28s, gap = .08s).
   The stage may grow taller than its minimum (desktop: it stretches to the row), so the
   piece is pinned to the stage floor with `top` rather than a fixed offset from its slot. */
.nf-scene { --s: clamp(200px, 56vw, 340px); position: relative; }
.nf-scene__stage {
  position: relative;
  width: calc(var(--s) * 1.2);
  min-height: calc(var(--s) * 1.36);
}
.nf-scene__grid { --size: var(--s); }
.nf-scene__grid i:nth-child(8) {
  background: transparent;
  border: max(1.5px, calc(var(--s) * 0.004)) dashed rgba(11, 11, 12, 0.4);
}
.nf-scene__piece {
  position: absolute;
  left: calc(var(--s) * 0.72);
  /* resting state: tipped 14° with its lowest (rounded) corner on the floor:
     box top = floor − [m/2 + (m/2 − r)(cos14° + sin14°) + r], m = .28s, r = .03s → floor − .303s */
  top: calc(100% - var(--s) * 0.303);
  width: calc(var(--s) * 0.28);
  aspect-ratio: 1;
  border-radius: 10.7%;
  background: var(--accent);
  transform: translateX(50%) rotate(14deg);
  transition: translate 0.6s var(--ease-out);
}
.js .nf-scene__piece { animation: nf-fall 2.6s linear 0.3s both; }
.nf-scene:hover .nf-scene__piece { translate: 0 -24%; }

/* appear in the slot → wobble → drop (ease-in) → hit → small bounce → settle */
@keyframes nf-fall {
  0%   { opacity: 0; top: calc(var(--s) * 0.72); transform: translateX(0) rotate(-12deg) scale(0.4); animation-timing-function: var(--ease-out); }
  14%  { opacity: 1; top: calc(var(--s) * 0.72); transform: translateX(0) rotate(0deg) scale(1); animation-timing-function: ease-in-out; }
  23%  { top: calc(var(--s) * 0.72); transform: translateX(0) rotate(-6deg) scale(1); animation-timing-function: ease-in-out; }
  31%  { top: calc(var(--s) * 0.72); transform: translateX(0) rotate(5deg) scale(1); animation-timing-function: ease-in-out; }
  38%  { top: calc(var(--s) * 0.706); transform: translateX(0) rotate(-1deg) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  68%  { top: calc(100% - var(--s) * 0.317); transform: translateX(36%) rotate(26deg) scale(1); animation-timing-function: cubic-bezier(0.15, 0.6, 0.4, 1); }
  79%  { top: calc(100% - var(--s) * 0.36); transform: translateX(45%) rotate(9deg) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  89%  { top: calc(100% - var(--s) * 0.306); transform: translateX(50%) rotate(16deg) scale(1); animation-timing-function: ease-out; }
  100% { opacity: 1; top: calc(100% - var(--s) * 0.303); transform: translateX(50%) rotate(14deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .js .nf-scene__piece { animation: none; }
  .nf-scene:hover .nf-scene__piece { translate: none; }
}

.nf-scene__caption {
  position: absolute;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--muted);
}

/* Popular links — the scene's floor on desktop */
.nf-links__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.nf-links__link {
  display: grid;
  gap: 6px;
  align-content: start;
  height: 100%;
  padding-block: 18px 24px;
  color: inherit;
}
.nf-links__num { font-size: var(--fs-label); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.nf-links__name {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
  transition: color 0.25s var(--ease);
}
.nf-links__arrow { font-weight: 400; opacity: 0.35; transition: transform 0.45s var(--ease-out), opacity 0.3s; }
.nf-links__desc { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.nf-links__link:hover .nf-links__name { color: var(--accent); }
.nf-links__link:hover .nf-links__arrow { opacity: 1; transform: translateX(5px); }

/* Mobile / tablet: scene → copy → links */
@media (max-width: 899px) {
  .nf-scene { order: -1; margin-bottom: clamp(40px, 8vw, 64px); }
  .nf-scene__stage { width: auto; border-bottom: 1px solid var(--ink); }
  .nf-scene__caption { position: static; display: block; margin-top: 12px; }
  .nf-hero__label { margin-bottom: 20px; }
  .nf-links { margin-top: clamp(56px, 10vw, 80px); }
  .nf-links__list { row-gap: 0; }
  .nf-links__link { border-top: 1px solid var(--line); }
}
@media (max-width: 479px) {
  .nf-hero__actions .btn { flex: 1 1 100%; }
  .nf-links__name { font-size: var(--fs-h4); }
  .nf-links__desc { font-size: 0.9375rem; }
}

/* Desktop: copy (cols 1–6) | scene (cols 8–12), links run along the floor */
@media (min-width: 900px) {
  .nf-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nf-hero__text {
    grid-column: 1 / span 6;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding-bottom: clamp(48px, 4.6vw, 72px);
  }
  .nf-scene { --s: clamp(270px, 30vw, 460px); grid-column: 8 / -1; grid-row: 1; display: flex; flex-direction: column; }
  .nf-scene__stage { flex: 1 0 auto; }
  .nf-scene__caption { left: 0; bottom: clamp(16px, 1.6vw, 24px); }
  .nf-links { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--ink); }
  .nf-links__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}