/* =========================================================
   legal.css — site footer + legal pages (Kullanım Şartları,
   Gizlilik / KVKK Aydınlatma Metni, Telif Bildirimi) and their
   English twins in /en/ (terms, privacy, copyright).
   Loaded after style.css; reuses its tokens with fallbacks so
   the pages still look right if style.css changes.
   No inline styles/scripts anywhere (strict CSP).
   ========================================================= */

/* ---------- Site footer (index.html + legal pages) ---------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2, 8px) var(--s-4, 16px);
  padding: var(--s-4, 16px) var(--gutter, 16px) calc(var(--s-4, 16px) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border, rgba(255, 236, 240, 0.09));
  color: var(--text-faint, #8f8290);
  font-size: var(--fs-xs, 0.75rem);
  line-height: 1.4;
  text-align: center;
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1, 4px) var(--s-4, 16px);
}

.site-footer a {
  color: var(--text-muted, #bdb0b7);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px; /* comfortable tap target without bloating the bar */
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--accent, #ff7a8f);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer a[aria-current="page"] {
  color: var(--accent, #ff7a8f);
}

.site-footer-copy { margin: 0; }

/* ---------- Legal pages ---------- */
.legal-top {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-4, 16px) var(--gutter, 16px) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2, 8px) var(--s-4, 16px);
}

/* TR <-> EN twin page switch */
.legal-lang {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap, 44px);
  padding: 0 var(--s-3, 12px);
  border: 1px solid var(--border-strong, rgba(255, 236, 240, 0.18));
  border-radius: var(--r-md, 14px);
  color: var(--text, #f6eeea);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  text-decoration: none;
}
.legal-lang:hover,
.legal-lang:focus-visible { color: var(--accent, #ff7a8f); border-color: var(--accent, #ff7a8f); }

/* EN pages: "the Turkish version prevails" notice */
.legal-prevails {
  margin: 0 0 var(--s-6, 24px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  border: 1px solid rgba(255, 122, 143, 0.35);
  border-left: 4px solid var(--accent, #ff7a8f);
  border-radius: var(--r-sm, 10px);
  background: var(--accent-soft, rgba(255, 122, 143, 0.14));
  font-size: var(--fs-sm, 0.875rem);
}
.legal-prevails > :last-child { margin-bottom: 0; }

.legal-home {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, 8px);
  min-height: var(--tap, 44px);
  color: var(--text-muted, #bdb0b7);
  font-weight: 600;
  text-decoration: none;
}

.legal-home:hover,
.legal-home:focus-visible { color: var(--accent, #ff7a8f); }

.legal-home-arrow { font-size: 1.1em; line-height: 1; }

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-4, 16px) var(--gutter, 16px) var(--s-12, 48px);
  color: var(--text, #f6eeea);
  font-size: var(--fs-base, 1rem);
  line-height: 1.7;
  overflow-wrap: anywhere; /* long e-mails / URLs never force horizontal scroll */
}

.legal h1 {
  margin: 0 0 var(--s-2, 8px);
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.legal-sub {
  margin: 0 0 var(--s-2, 8px);
  color: var(--text-muted, #bdb0b7);
}

.legal-updated {
  margin: 0 0 var(--s-6, 24px);
  color: var(--text-faint, #8f8290);
  font-size: var(--fs-sm, 0.875rem);
}

.legal h2 {
  margin: var(--s-8, 32px) 0 var(--s-3, 12px);
  padding-top: var(--s-4, 16px);
  border-top: 1px solid var(--border, rgba(255, 236, 240, 0.09));
  font-size: var(--fs-xl, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  scroll-margin-top: var(--s-4, 16px);
}

.legal h3 {
  margin: var(--s-5, 20px) 0 var(--s-2, 8px);
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 600;
  line-height: 1.35;
}

.legal p { margin: 0 0 var(--s-3, 12px); }

/* style.css resets list styles globally; restore them here. */
.legal ul,
.legal ol {
  margin: 0 0 var(--s-4, 16px);
  padding-left: 1.4em;
}
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal ol.legal-alpha { list-style: lower-alpha; }
.legal li { margin: 0 0 var(--s-2, 8px); }
.legal li::marker { color: var(--accent, #ff7a8f); }

.legal a {
  color: var(--accent, #ff7a8f);
  text-underline-offset: 3px;
}

.legal strong { color: var(--text, #f6eeea); font-weight: 600; }

.legal code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--surface-2, #272030);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
}

/* Table of contents */
.legal-toc {
  margin: 0 0 var(--s-6, 24px);
  padding: var(--s-4, 16px) var(--s-5, 20px);
  border: 1px solid var(--border, rgba(255, 236, 240, 0.09));
  border-radius: var(--r-md, 14px);
  background: var(--surface, #1d1823);
}

.legal-toc-title {
  margin: 0 0 var(--s-2, 8px);
  color: var(--text-muted, #bdb0b7);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.legal .legal-toc ol { margin: 0; }
.legal .legal-toc li { margin: 0 0 var(--s-1, 4px); }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover,
.legal-toc a:focus-visible { text-decoration: underline; }

/* Highlighted notice (e.g. WebRTC IP warning) */
.legal-note {
  margin: var(--s-4, 16px) 0;
  padding: var(--s-4, 16px);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-left: 4px solid var(--warn, #fbbf24);
  border-radius: var(--r-sm, 10px);
  background: var(--warn-soft, rgba(251, 191, 36, 0.14));
}
.legal-note > :last-child { margin-bottom: 0; }
.legal-note-title {
  margin: 0 0 var(--s-2, 8px);
  font-weight: 700;
  color: var(--warn, #fbbf24);
}

/* Neutral info box */
.legal-box {
  margin: var(--s-4, 16px) 0;
  padding: var(--s-4, 16px);
  border: 1px solid var(--border, rgba(255, 236, 240, 0.09));
  border-radius: var(--r-sm, 10px);
  background: var(--surface, #1d1823);
}
.legal-box > :last-child { margin-bottom: 0; }

/* Processing-activity cards (stack on small screens, no tables) */
.legal-card {
  margin: 0 0 var(--s-4, 16px);
  padding: var(--s-4, 16px);
  border: 1px solid var(--border, rgba(255, 236, 240, 0.09));
  border-radius: var(--r-md, 14px);
  background: var(--surface, #1d1823);
}
.legal-card > h3:first-child { margin-top: 0; }

.legal-dl { margin: 0; }
.legal-dl dt {
  margin: var(--s-3, 12px) 0 var(--s-1, 4px);
  color: var(--text-muted, #bdb0b7);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
}
.legal-dl dt:first-child { margin-top: 0; }
.legal-dl dd { margin: 0; }

@media (min-width: 600px) {
  .legal-dl {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: var(--s-2, 8px) var(--s-4, 16px);
  }
  .legal-dl dt { margin: 0; }
}

@media print {
  .site-footer, .legal-top, .legal-toc { display: none; }
  .legal { color: #000; max-width: none; }
  .legal a { color: #000; }
}