/* Shared layout for the legal pages (aydinlatma / açık rıza / ticari ileti onayı). Uses tokens from styles.css. */
.legal { max-width: 760px; margin: 0 auto; padding: 32px var(--gutter) 96px; position: relative; z-index: 1; }
.legal h1 { font: 400 clamp(26px, 6.4vw, 38px)/1.15 var(--font-display); margin: 0 0 10px; }
.legal h2 { font: 600 16px/1.35 var(--font-body); margin: 34px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal .updated { font: 12px var(--font-mono); letter-spacing: .06em; color: var(--ink-mute); }
.legal .callout { border-left: 3px solid var(--accent); background: var(--paper-raised); padding: 12px 16px; margin: 16px 0; }
.legal .callout p { margin: 0; }
.legal .declaration { border: 1px solid var(--line-strong); background: var(--paper-raised); padding: 14px 16px; margin: 18px 0; }
.legal .declaration p { margin: 6px 0; color: var(--ink); }
.legal .box { font-family: var(--font-mono); margin-right: 6px; }

/* tables: scroll inside their own wrapper on narrow screens, never the whole page */
.table-wrap { overflow-x: auto; margin: 14px 0 18px; border: 1px solid var(--line); background: var(--paper-raised); }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); line-height: 1.5; color: var(--ink-soft); }
.legal th { font: 500 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); background: var(--paper); }
.legal tr:last-child td { border-bottom: 0; }
.legal td:first-child { color: var(--ink); }
.legal .kv td:first-child { width: 34%; }

/* narrow screens: each row becomes a card, each cell shows its column name */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; border: 0; background: none; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; min-width: 0; }
  .legal thead { display: none; }
  .legal tr { border: 1px solid var(--line); background: var(--paper-raised); margin-bottom: 10px; }
  .legal td { border-bottom: 1px dashed var(--line); padding: 8px 12px; }
  .legal td::before { content: attr(data-label); display: block; font: 500 10px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; }
  .legal .kv td:first-child { width: 100%; }
}

.legal .related { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.legal .related a { display: inline-block; margin: 4px 16px 4px 0; }
@media print { .grid-bg, .topbar { display: none; } .table-wrap { overflow: visible; } .legal table { min-width: 0; } }