/* =========================================================
   DOCULY — Legal pages (Gizlilik & Koşullar)
   Landing ile aynı tasarım dili (mavi-vurgulu, temiz).
   ========================================================= */
:root {
  --bg1: #F4F6F8;
  --paper: #FFFFFF;
  --ink: #0F1013;
  --ink-soft: #46505C;
  --ink-faint: #6B7280;
  --accent: #206EEA;
  --accent-light: #3885F3;
  --tint: #E8F0FE;
  --line: #E4E8EE;
  --line-soft: #EEF1F5;
  --r-md: 16px;
  --r-lg: 22px;
  --sh-soft: 0 6px 18px rgba(15, 16, 19, 0.06);
  --sh-card: 0 18px 44px -14px rgba(15, 16, 19, 0.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg1);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* header */
.legal-nav { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.legal-nav__inner { max-width: 880px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand__logo { width: 40px; height: 40px; border-radius: 11px; object-fit: cover;
  box-shadow: 0 6px 16px rgba(32, 110, 234, 0.3), inset 0 0 0 1px rgba(255,255,255,.08); }
.brand__name { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.legal-nav__back { font-size: 14.5px; font-weight: 700; color: var(--ink-soft); }

/* document */
.legal { max-width: 880px; margin: 0 auto; padding: 56px 24px 96px; }
.legal__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.legal h1 { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.02em; line-height: 1.1; }
.legal__meta { color: var(--ink-faint); font-size: 14.5px; margin-top: 12px; }
.legal__intro { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; margin: 28px 0 8px; box-shadow: var(--sh-soft); color: var(--ink-soft); }
.legal__intro strong { color: var(--ink); }

.legal h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 23px; letter-spacing: -0.01em; margin: 40px 0 12px; padding-top: 8px; }
.legal h3 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 18px; margin: 24px 0 8px; }
.legal p { color: var(--ink-soft); margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 4px; list-style: none; }
.legal li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--ink-soft); }
.legal li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.legal strong { color: var(--ink); font-weight: 700; }

.callout { background: var(--tint); border: 1px solid var(--accent); border-radius: var(--r-md); padding: 18px 20px; margin: 18px 0; color: var(--ink); }
.callout strong { color: var(--accent); }

.legal__toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 22px; margin: 24px 0 8px; box-shadow: var(--sh-soft); }
.legal__toc h4 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 10px; }
.legal__toc ol { padding-left: 20px; color: var(--accent); font-weight: 600; }
.legal__toc li { padding-left: 0; margin-bottom: 6px; }
.legal__toc li::before { display: none; }

.legal__footer { max-width: 880px; margin: 0 auto; padding: 28px 24px 60px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legal__footer a { color: var(--ink-soft); font-weight: 600; }

@media (max-width: 600px) {
  .legal__footer { justify-content: center; text-align: center; }
}