/* KelimeYAP legal pages — standalone stylesheet.
   These pages are plain static HTML, served without the React bundle, so that
   store review bots and users with JS disabled see the full text. Palette and
   spacing follow the ObliqueX design system (src/index.css); the font stack is
   deliberately system-native rather than the site's self-hosted webfonts, so
   Turkish characters always render and the page has no asset dependencies. */

:root {
  --background: 210 16% 5%;
  --foreground: 0 0% 98%;
  --surface: 210 14% 8%;
  --muted-foreground: 0 0% 55%;
  --border: 210 10% 14%;
  --primary: 205 42% 60%;
  --radius: 0.625rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 450;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: -0.011em;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}

/* ---- header ---- */

.topbar {
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 3rem;
}

.topbar-inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.brand img {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.brand span {
  color: hsl(var(--muted-foreground));
  font-weight: 450;
}

.lang {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.lang a {
  color: hsl(var(--primary));
}

/* ---- type ---- */

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(1.875rem, 5vw, 2.5rem);
}

h2 {
  font-size: 1.25rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border));
}

h3 {
  font-size: 1rem;
  margin-top: 2rem;
  color: hsl(var(--foreground));
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
}

li::marker {
  color: hsl(var(--muted-foreground));
}

a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

strong {
  font-weight: 600;
  color: hsl(var(--foreground));
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

.updated {
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
  margin-bottom: 2.5rem;
}

.lede {
  font-size: 1.0625rem;
  color: hsl(var(--foreground));
}

/* ---- surface panel ---- */

.surface {
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.25rem 1.375rem;
  margin: 0 0 1.5rem;
}

.surface > :last-child {
  margin-bottom: 0;
}

.surface h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---- table ---- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
}

th {
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  background: hsl(var(--surface));
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- footer ---- */

.pagefoot {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
}

@media (max-width: 30rem) {
  .wrap {
    padding-bottom: 3.5rem;
  }

  h2 {
    margin-top: 2.5rem;
  }
}