/* =============================================================================
   Legal pages — Privacy Policy / Terms of Use / Data Retention Policy
   =============================================================================
   Loaded AFTER styles.css, which supplies the brand tokens (--ink, --heat, --b,
   --d, .wrap, .nav, footer). This file adds only the long-form prose layout the
   marketing page has no need for. Six pages share it:
     /gizlilik  /kosullar  /saklama   and  /en/privacy  /en/terms  /en/retention
   ========================================================================== */

.legal {
  padding: 140px 0 90px;
}
.legal-in {
  max-width: 760px;
  margin: 0 auto;
}
.legal h1 {
  font-size: clamp(32px, 4vw, 46px);
  margin-bottom: 10px;
}
.legal .legal-meta {
  color: var(--ink-3);
  font-size: 14px;
  margin-bottom: 40px;
}
.legal h2 {
  font-size: 23px;
  letter-spacing: -.02em;
  margin: 44px 0 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.legal h3 {
  font-size: 17px;
  margin: 26px 0 8px;
}
.legal p,
.legal li {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.72;
}
.legal p + p {
  margin-top: 14px;
}
.legal ul,
.legal ol {
  margin: 14px 0;
  padding-inline-start: 22px;
}
.legal li + li {
  margin-top: 7px;
}
.legal strong {
  color: var(--ink);
  font-weight: 600;
}
.legal a:not(.btn) {
  color: var(--heat);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Contact / controller identity block */
.legal-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 18px 0;
}
.legal-card p {
  font-size: 15px;
}

/* Sub-processor and retention tables scroll on their own, never the page. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.legal-table th,
.legal-table td {
  text-align: start;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--d);
  font-weight: 600;
  color: var(--ink);
  background: var(--soft);
  white-space: nowrap;
}
.legal-table tr:last-child td {
  border-bottom: 0;
}

/* Cross-links between the three documents. */
.legal-also {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal-also a {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2) !important;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none !important;
  transition: .2s;
}
.legal-also a:hover {
  color: var(--ink) !important;
  border-color: var(--ink-3);
}

/* Slim footer for the legal pages: styles.css sizes .f-bot as the rule UNDER a
   four-column grid, so drop the separator it inherits when it stands alone. */
.legal-foot {
  margin-top: 0;
  padding: 40px 0 32px;
}
.legal-foot .f-bot {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* -----------------------------------------------------------------------------
   UNRESOLVED FIELDS — must be zero before these pages go live.
   Highlighted on purpose so a blank cannot be published by accident. Grep the
   landing folder for "legal-todo" as the pre-publish check.
   -------------------------------------------------------------------------- */
.legal-todo {
  background: #FFF3C4;
  border-bottom: 2px dotted #B7791F;
  color: #7B4E02 !important;
  font-weight: 600;
  padding: 0 3px;
  border-radius: 3px;
}