/*
 * gezgez.org -- ana sayfa ve gizlilik politikasi.
 *
 * Renkler uygulamanin temasiyla ayni (mobile/src/theme.ts): zemin
 * #F7F7F7, yuzey beyaz, marka mercani #FE504F. Mercan kucuk metinde
 * 4,5:1 kontrasti gecmiyor; bu yuzden baglantilar ve kucuk vurgular
 * murekkep/koyu kirmizi, mercan yalnizca buyuk basliklarda ve dugme
 * dolgusunda (dolgu ustunde koyu yazi, uygulamadaki `onAccent`).
 *
 * Yazi tipi SITEYE GOMULU (fonts/): Google Fonts'tan yuklemek her
 * ziyaretcinin IP adresini Google'a gonderirdi ve gizlilik metni
 * "site ucuncu tarafa baglanmaz" diyor. Figtree, SIL OFL 1.1.
 */

@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("fonts/Figtree_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("fonts/Figtree_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 900; font-display: swap; src: url("fonts/Figtree_900Black.ttf") format("truetype"); }

:root {
  --zemin: #F7F7F7;
  --yuzey: #FFFFFF;
  --murekkep: #1F1F1F;
  --soluk: #5C5C5C;
  --cizgi: #E2E2E2;
  --mercan: #FE504F;
  --mercan-yumusak: #FEC2C2;
  --baglanti: #B3261E;
  --dolgu-yazi: #1F1F1F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #121212;
    --yuzey: #1C1C1C;
    --murekkep: #F2F2F2;
    --soluk: #B4B4B4;
    --cizgi: #2E2E2E;
    --mercan-yumusak: #4A2222;
    --baglanti: #FF8A85;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font: 17px/1.6 "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--baglanti); }
img { max-width: 100%; height: auto; }

.kap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* --- ust serit --- */
.ust { padding: 20px 0; }
.ust .kap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ust img { width: 84px; display: block; }
.ust nav { display: flex; gap: 20px; font-weight: 700; font-size: 15px; }
.ust nav a { color: var(--murekkep); text-decoration: none; }
/* Dil secici: oteki dildeki AYNI sayfaya gider. */
.ust nav a.dil { border: 1px solid var(--cizgi); border-radius: 9999px; padding: 0 10px; }

/* --- giris --- */
.kahraman { padding: 32px 0 40px; }
.kahraman h1 {
  font-weight: 900;
  font-size: clamp(40px, 9vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.kahraman h1 span { color: var(--mercan); }
.kahraman p { font-size: 19px; color: var(--soluk); margin: 0 0 24px; max-width: 34em; }
.durum {
  display: inline-block;
  background: var(--mercan-yumusak);
  color: var(--murekkep);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: 9999px;
}

/* --- bolumler --- */
section { padding: 28px 0; border-top: 1px solid var(--cizgi); }
h2 { font-weight: 900; font-size: 28px; line-height: 1.1; margin: 0 0 16px; }
h3 { font-weight: 700; font-size: 19px; margin: 24px 0 6px; }

.adimlar { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.adimlar li {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  padding: 16px 18px;
}
.adimlar b { display: block; font-size: 18px; margin-bottom: 2px; }
.adimlar span { color: var(--soluk); }

.ozellikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ozellikler div {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  padding: 16px 18px;
}
.ozellikler b { display: block; margin-bottom: 4px; }
.ozellikler p { margin: 0; color: var(--soluk); font-size: 16px; }

/* --- gizlilik metni --- */
.metin h1 { font-weight: 900; font-size: clamp(34px, 7vw, 48px); line-height: 1; margin: 8px 0 12px; }
.metin h2 { font-size: 24px; margin-top: 8px; }
.kunye { color: var(--soluk); font-size: 15px; margin: 0 0 8px; }
.ozet {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  padding: 4px 18px;
}
.ozet li { margin: 8px 0; }
.uyari {
  background: var(--mercan-yumusak);
  border: 1px solid var(--baglanti);
  border-radius: 12px;
  padding: 12px 16px;
}
.eylem-kutu {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  padding: 18px;
  margin: 16px 0;
}
.eylem-kutu .dugme { margin: 12px 0 8px; }
.icindekiler { columns: 2 220px; padding-left: 20px; }
table { width: 100%; border-collapse: collapse; margin: 12px 0; background: var(--yuzey); font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px; border: 1px solid var(--cizgi); }
th { font-weight: 700; }
.tablo { overflow-x: auto; }

/* --- e-postadaki dugmenin indigi sayfa (dogrula / sifirla) --- */
.ac { padding-top: 24px; padding-bottom: 48px; }
.ac h1 { font-weight: 900; font-size: clamp(32px, 8vw, 44px); line-height: 1.05; margin: 0 0 12px; }
.ac > p { color: var(--soluk); font-size: 18px; margin: 0 0 24px; }
.dugme {
  display: block;
  text-align: center;
  background: var(--mercan);
  color: var(--dolgu-yazi);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: 9999px;
  margin-bottom: 28px;
}
.kod-kutu {
  display: flex;
  gap: 8px;
  align-items: stretch;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  padding: 8px;
  margin: 8px 0 16px;
}
.kod-kutu code {
  flex: 1;
  min-width: 0;
  font: 14px/1.4 Menlo, Consolas, "Courier New", monospace;
  word-break: break-all;
  padding: 6px 4px;
}
.kod-kutu button {
  font: 700 14px "Figtree", system-ui, sans-serif;
  color: var(--murekkep);
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: 9999px;
  padding: 0 14px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}

/* --- alt --- */
footer { border-top: 1px solid var(--cizgi); padding: 24px 0 48px; color: var(--soluk); font-size: 15px; }
footer .kap { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .ust nav { gap: 14px; font-size: 14px; }
  th, td { padding: 8px; }
}