/* ============================================================
   DxCase — metin sayfaları ortak stili
   (gizlilik, kullanım şartları, bağış)
   index.html'deki tasarım sistemiyle aynı dili konuşur.
   ============================================================ */
:root {
  --bg: #eff2f5; --panel: #ffffff; --panel2: #f3f6f9;
  --line: #dde4ec; --text: #16202e; --text-2: #3d4c5f;
  --dim: #64748b; --accent: #0d8f83; --accent2: #0b7268;
  --accent-bg: #e3f6f3; --accent-line: #a5ded7;
  --shadow: 0 1px 3px rgba(16,24,40,.07), 0 4px 12px rgba(16,24,40,.05);
  --r-sm: 9px; --r-md: 12px; --r-lg: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1017; --panel: #141b26; --panel2: #1a2330;
    --line: #26313f; --text: #e8eef6; --text-2: #c2cddb;
    --dim: #8fa0b4; --accent: #2dd4bf; --accent2: #5eead4;
    --accent-bg: rgba(45,212,191,.13); --accent-line: rgba(45,212,191,.32);
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1017; --panel: #141b26; --panel2: #1a2330;
  --line: #26313f; --text: #e8eef6; --text-2: #c2cddb;
  --dim: #8fa0b4; --accent: #2dd4bf; --accent2: #5eead4;
  --accent-bg: rgba(45,212,191,.13); --accent-line: rgba(45,212,191,.32);
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15.5px; line-height: 1.68;
  background-image: radial-gradient(1000px 420px at 50% -200px, var(--accent-bg), transparent 70%);
  background-repeat: no-repeat; background-attachment: fixed;
  padding: calc(30px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           calc(90px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  display: flex; justify-content: center;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.wrap { max-width: 800px; width: 100%; }

.back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px;
  color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: 999px; padding: 8px 16px; transition: color .16s, border-color .16s;
}
.back:hover { color: var(--text); border-color: var(--accent); }

h1 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 8px; line-height: 1.2; }
h2 {
  font-size: 17px; font-weight: 700; color: var(--accent2); margin: 32px 0 10px;
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 10px;
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
p { margin: 10px 0; color: var(--text-2); }
p b, li b, td b { color: var(--text); }
a { color: var(--accent); text-underline-offset: 2px; }
.dim { color: var(--dim); font-size: 14px; }

/* içerik kartı */
.wrap > h2, .wrap > p, .wrap > ul, .wrap > table { max-width: 100%; }
ul { padding-left: 20px; margin: 10px 0; }
li { margin: 7px 0; color: var(--text-2); }

table {
  border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14.5px; margin: 12px 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow);
}
td, th { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
th { color: var(--dim); font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; background: var(--panel2); }
td { color: var(--text-2); }
td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }

@media (max-width: 620px) {
  body { font-size: 15px;
    padding: calc(20px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
             calc(60px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    background-image: radial-gradient(600px 280px at 50% -140px, var(--accent-bg), transparent 70%); }
  h1 { font-size: 23px; }
  h2 { font-size: 15.5px; margin-top: 26px; }
  table { font-size: 13.5px; }
  td, th { padding: 10px 11px; }
  td:first-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}