/* StreamArena yasal metinler — tanıtım sayfasıyla aynı dil: koyu zemin, kırmızı vurgu, dar okuma sütunu */
* { box-sizing: border-box; }
:root {
  --bg: #0e0d0b; --bg2: #171512; --line: #2e2a25; --line2: #4a443b;
  --txt: #ece6d8; --mut: #9d968a; --red: #ec2b2b; --ink: #14110e;
  --cond: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --sans: "Barlow", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--sans); font-size: 17.5px; line-height: 1.65; }
a { color: inherit; }
.nav { position: sticky; top: 0; z-index: 10; height: 60px; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-in { height: 100%; max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 28px/1 var(--cond); letter-spacing: 0.02em; text-transform: uppercase; }
.logo i { width: 13px; height: 13px; background: var(--red); display: block; }
.nav a.back { margin-left: auto; font: 500 12.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--mut); }
.nav a.back:hover { color: var(--txt); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 48px 24px 80px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; }
.side { position: sticky; top: 92px; align-self: start; }
.side h4 { font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); margin: 0 0 12px; }
.side a { display: block; padding: 7px 0 7px 12px; border-left: 2px solid var(--line); text-decoration: none; color: var(--mut); font-size: 15.5px; }
.side a:hover { color: var(--txt); }
.side a.on { border-color: var(--red); color: var(--txt); font-weight: 600; }
article { max-width: 720px; min-width: 0; }
article .kicker { font: 500 12.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
article h1 { font: 800 clamp(42px, 6vw, 68px)/1.06 var(--cond); text-transform: uppercase; margin: 10px 0 14px; }
article .meta { font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); margin-bottom: 30px; }
article h2 { font: 800 28px/1.05 var(--cond); text-transform: uppercase; margin: 40px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
article h3 { font: 700 19px/1.3 var(--sans); margin: 22px 0 6px; }
article p, article ul, article ol { margin: 0 0 14px; }
article ul, article ol { padding-left: 22px; }
article li { margin-bottom: 6px; }
article strong { color: #fff; }
.lead { font-size: 19.5px; color: #d9d2c4; }
.box { margin: 22px 0; padding: 16px 18px; background: var(--bg2); border-left: 4px solid var(--red); }
.box.soft { border-color: var(--line2); }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 15.5px; }
th, td { text-align: left; vertical-align: top; padding: 10px 10px; border-bottom: 1px solid var(--line); }
th { font: 500 11.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); }
.tw { overflow-x: auto; }
.ph { background: rgba(255, 210, 74, 0.16); color: #ffd24a; padding: 0 4px; font-family: var(--mono); font-size: 0.88em; }
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; }
.docs a { display: block; padding: 18px 18px 16px; background: var(--bg2); border: 1px solid var(--line2); text-decoration: none; }
.docs a:hover { border-color: var(--red); }
.docs b { display: block; font: 800 24px/1 var(--cond); text-transform: uppercase; margin-bottom: 6px; }
.docs span { color: var(--mut); font-size: 15px; }
.foot { border-top: 1px solid var(--line); padding: 30px 24px 40px; color: var(--mut); font-size: 14.5px; text-align: center; }
.foot a { margin: 0 10px; }
@media (max-width: 860px) {
  .wrap { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
  .side { position: static; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .side h4 { width: 100%; margin-bottom: 2px; }
  .side a { border-left: 0; padding: 2px 0; }
  .side a.on { color: var(--red); }
}
@media print { .nav, .side, .foot { display: none; } body { background: #fff; color: #000; } .wrap { display: block; } article strong { color: #000; } }
