/* Antrio yasal sayfa stili — önizleme sayfasının tasarımıyla aynı dil
   (15 Eyl 2026): karbon zemin, Saira gövde, Tomorrow başlık/etiket,
   kehribar vurgu. Jetonlar index.html :root ile birebir. */
:root {
  --carbon: #111111; --panel: #191919; --rule: #2E2E2E;
  --ink: #F2F3EA; --muted: #A2A498;
  --amber: #F2B84B; --on-amber: #141209;
  --gut: clamp(20px, 5vw, 64px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--carbon); color: var(--ink);
  font-family: 'Saira', system-ui, sans-serif;
  font-size: clamp(17px, .9rem + .25vw, 19px); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.muted { color: var(--muted); }

/* Üst çubuk: figür + kelime işareti, index.html ile aynı ölçüler
   (yazı: Tomorrow Bold Italic SVG'si, antrio tools/brand/build_wordmark.py) */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(17, 17, 17, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav { display: flex; align-items: center; height: 80px; }
.brand { display: flex; align-items: center; gap: 10px; line-height: 1; text-decoration: none; }
.brand-icon { width: auto; height: 48px; display: block; }
.brand-word { width: auto; height: 24px; display: block; }
@media (max-width: 1050px) {
  .brand-icon { height: 42px; }
  .brand-word { height: 23px; }
}
@media (max-width: 820px) {
  .nav { height: 68px; }
}
@media (max-width: 380px) {
  .brand-icon { height: 34px; }
  .brand-word { height: 21px; }
}

main {
  max-width: 860px; margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--gut) clamp(72px, 8vw, 120px);
}
h1 {
  font-family: 'Tomorrow', 'Saira', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.05;
  text-wrap: balance;
}
.updated {
  margin: 22px 0 48px; padding-bottom: 28px; border-bottom: 1px solid var(--rule);
  font-size: 17px; color: var(--muted);
}
h2 {
  font-family: 'Tomorrow', 'Saira', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(19px, .85rem + .6vw, 24px); line-height: 1.3;
  margin: 56px 0 16px; color: var(--ink); text-wrap: balance;
}
h2::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 14px;
  background: var(--amber); vertical-align: .18em;
}
p, li { color: var(--muted); margin-bottom: 14px; }
strong { color: var(--ink); font-weight: 600; }
em { color: var(--ink); font-style: normal; font-weight: 500; }

ul { list-style: none; margin-bottom: 18px; }
/* Madde işareti mutlak konumlu: li içindeki strong/em/a satır akışında kalsın */
ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 8px; height: 8px; background: var(--amber);
}
ol { padding-left: 1.4em; margin-bottom: 18px; }
ol li { padding-left: 6px; margin-bottom: 8px; }
ol li::marker { color: var(--amber); font-family: 'Tomorrow', 'Saira', sans-serif; font-weight: 600; }

table {
  border-collapse: collapse; width: 100%; margin: 20px 0 28px;
  font-size: 17px; line-height: 1.55; background: var(--panel);
}
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: 'Tomorrow', 'Saira', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; font-size: 15px; color: var(--muted);
  border-bottom-color: var(--amber);
}
td { color: var(--muted); }
td:first-child { color: var(--ink); font-weight: 500; }
@media (max-width: 640px) {
  table { display: block; overflow-x: auto; }
  th, td { min-width: 150px; }
}
hr { border: 0; border-top: 1px solid var(--rule); margin: 72px 0 48px; }

footer { border-top: 1px solid var(--rule); }
.foot {
  display: flex; flex-wrap: wrap; gap: 12px 36px; align-items: center;
  padding-top: 40px; padding-bottom: 56px; font-size: 17px; color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .sp { margin-left: auto; }