/* Köy Gecesi yasal sayfaları — tek stil dosyası, dış bağımlılık yok.
   Palet uygulamanın gece paletiyle aynı (`src/ui/renkler.ts` → gece). Uygulama yalnız
   koyu temada çalışır; sayfalar da öyle.

   Kontrast (WCAG 2.x, hesaplandı 15 Eylül 2026):
     metin  #F4EAD5 / zemin #120D14  16,08:1   · / kart 14,93:1 · / yüzey 13,04:1
     soluk  #BFB2C4 / zemin          9,49:1    · / kart  8,82:1 · / yüzey  7,70:1
     vurgu  #FFB547 / zemin          10,93:1   · / kart 10,15:1 · / yüzey  8,87:1
     #241505 / vurgu (seçili dil düğmesi)  10,09:1
   Kırmızı YOK: uygulamada kırmızı yalnız vampir takımı demek. */

:root {
  color-scheme: dark;
  --zemin: #120D14;
  --kart: #1C1520;
  --yuzey: #2A2030;
  --cizgi: #3A2E40;
  --metin: #F4EAD5;
  --soluk: #BFB2C4;
  --vurgu: #FFB547;
  --vurgu-ustu: #241505;
  --vurgu-yumusak: rgba(255, 181, 71, 0.12);
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--zemin); }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 17px/1.65 var(--sans);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Korece: kelime ortasından satır kırılmasın. */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- Atlama bağlantısı ---------- */

.atla {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  background: var(--vurgu);
  color: var(--vurgu-ustu);
  font-weight: 700;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
}
.atla:focus { top: 0.75rem; }

/* ---------- Üst şerit ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--zemin) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cizgi);
}

/* Şerit gövdeyle aynı genişlikte: 1. satır marka + dil düğmeleri, 2. satır sayfa bağlantıları. */
.bar {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0.75rem 1.25rem 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem 1rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--metin);
  text-decoration: none;
  white-space: nowrap;
}
.brand svg { width: 22px; height: 22px; margin-right: 0.5rem; flex: none; }

nav.sayfalar {
  order: 3;
  width: 100%;
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
  /* Bağlantı metni gövde kenarıyla hizalansın (bağlantının iç boşluğu kadar). */
  margin-left: -0.65rem;
}

nav.sayfalar a,
.lang button {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--soluk);
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
nav.sayfalar a:hover,
.lang button:hover { color: var(--metin); background: var(--vurgu-yumusak); }
nav.sayfalar a[aria-current="page"] { color: var(--vurgu); font-weight: 700; }

.lang {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.2rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
}
.lang button { min-width: 40px; font-weight: 600; letter-spacing: 0.02em; }
.lang button[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-ustu); }

.lang { margin-left: auto; }

/* Dar ekranda şerit üç satıra kadar çıkar; yapışkan kalırsa ekranın yarısını yer. */
@media (max-width: 44rem) {
  header { position: static; }
}
/* Telefonda dil düğmeleri markanın altına iner ve sola hizalanır. */
@media (max-width: 30rem) {
  .lang { margin-left: 0; }
  .lang button { min-width: 38px; padding-inline: 0.5rem; }
}

/* ---------- Gövde ---------- */

main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

h1 {
  font-size: clamp(1.75rem, 5.5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 0.4rem;
  text-wrap: balance;
}

.updated {
  font-size: 0.85rem;
  color: var(--soluk);
  margin: 0 0 2rem;
}

h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 750;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cizgi);
  text-wrap: balance;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.4rem;
}

p, li { color: var(--soluk); }
p { margin: 0 0 1rem; }
strong { color: var(--metin); font-weight: 700; }

ul, ol { margin: 0 0 1rem; padding-left: 1.3rem; }
li { margin-bottom: 0.45rem; }
li::marker { color: var(--vurgu); }

a { color: var(--vurgu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a[href^="http"], a[href^="mailto"] { overflow-wrap: anywhere; }

/* Uygulamadaki düğme/menü adları birebir. */
code, .yol {
  font-family: var(--sans);
  font-size: 0.92em;
  font-weight: 600;
  color: var(--metin);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  padding: 0.05em 0.4em;
  white-space: normal;
}

/* ---------- Doldurulacak alanlar ---------- */

mark.todo {
  background: var(--yuzey);
  color: var(--vurgu);
  border: 1px dashed var(--vurgu);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  font-family: var(--mono);
  font-size: 0.85em;
}

/* ---------- Kısa cevap kutusu ---------- */

.ozet {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-left: 4px solid var(--vurgu);
  border-radius: 14px;
  padding: 1.1rem 1.3rem 0.2rem;
  margin: 0 0 2.25rem;
}
.ozet p { color: var(--metin); }

/* Dar bilgi notu (ör. "bu metin yalnız Türkçedir"). */
.not {
  background: var(--vurgu-yumusak);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.5rem;
}
.not p { color: var(--metin); margin: 0; }

/* Tablo (reklam yerleri gibi) dar ekranda kendi içinde kayar. */
.tablo { overflow-x: auto; margin: 0 0 1.25rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--cizgi); }
th { color: var(--metin); font-weight: 700; }
td { color: var(--soluk); }

/* ---------- Dil bölümleri ---------- */

[data-lang] { display: none; }
[data-lang].active { display: block; }

/* ---------- Ayak ---------- */

footer {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--cizgi);
  font-size: 0.85rem;
  color: var(--soluk);
}
footer p { margin: 0; }
footer a { color: var(--soluk); }

:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: 6px;
}

@media print {
  header, .lang, .atla { display: none; }
  body, html { background: #fff; color: #000; }
  p, li, td, .ozet p { color: #000; }
  a { color: #000; }
}