/* =====================================================
   CIVARI — Statik sayfalar (hakkımızda, gizlilik, çerez, hesap silme, KVKK, kullanım koşulları)
   Her sayfanın kendi <style> bloğundan SONRA yüklenir; eski siyah üst çubuk / Outfit / slate renkleri
   ana sitenin tasarım diline (tasarim.css: kâğıt zemin, mürekkep metin, tek turuncu vurgu) çeker.
   Kullanım: sayfanın </head> öncesine  <link rel="stylesheet" href="yasal.css?v=1">  ekle.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #ff9900; --primary-dark: #a85800; /* yazı için AA (4.9:1) */
  --dark: #17130f; --ink: #17130f; --muted: #6b6258; --soft: #f3efe8; --border: #ebe5dc;
  --fd: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --fb: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { font-family: var(--fb); background: #faf8f4; color: #17130f; -webkit-font-smoothing: antialiased; }
a { color: #a85800; }
:focus-visible { outline: 2px solid #17130f; outline-offset: 2px; border-radius: 6px; }

/* Üst çubuk: açık zemin, ana sitedeki gibi */
.topbar { background: rgba(250,248,244,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid #ebe5dc; height: 64px; }
.logo { color: #17130f; font-weight: 750; letter-spacing: -.03em; }
.logo span { color: #ff9900; }
.back { color: #fff; background: #17130f; font-weight: 700; padding: 0 18px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 12px; }
.back:hover { background: #000; color: #fff; }

/* Başlık alanı: koyu gradyan yerine kâğıt zemin ve büyük mürekkep başlık */
.hero, .head { background: #faf8f4; color: #17130f; text-align: left; }
.hero { padding: 56px 22px 40px; }
.head { padding: 48px 22px 32px; }
.hero > *, .head > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.hero h1, .head h1 { font-family: var(--fd); color: #17130f; font-weight: 750; letter-spacing: -.04em; line-height: 1.02; }
.hero h1 span, .head h1 span { color: #a85800; }
.hero p, .head p { color: #6b6258; margin-left: auto; margin-right: auto; max-width: 900px; }
.hero .badge { color: #a85800; background: #fff2de; border: 0; letter-spacing: .08em; }

.container h2 { font-family: var(--fd); color: #17130f; font-weight: 700; letter-spacing: -.02em; }
.container h3, .card h3 { font-family: var(--fd); color: #17130f; }
.container h2 .n { background: #17130f; color: #fff; }
.container p, .container ul, .container ol, .container li { color: #3a332b; }
.intro { background: #fff; border: 1px solid #ebe5dc; color: #3a332b; box-shadow: none; }
.box { background: #fff2de; border: 0; color: #3a332b; }
.card { border: 1px solid #ebe5dc; box-shadow: none; }
.card p { color: #6b6258; }
.card .ico { background: #fff2de; color: #a85800; }
.stats { border: 1px solid #ebe5dc; }
.stats strong { color: #17130f; }
.stats span { color: #6b6258; }
.cta { background: #fff2de; border: 0; }
.cta a, .btn-ayar { background: #17130f; color: #fff; border-radius: 12px; }
.cta a:hover, .btn-ayar:hover { background: #000; color: #fff; }
.btn-ayar:hover { transform: none; }
.tablo-sar, table { background: #fff; border-color: #ebe5dc; }
.tablo-sar { border: 1px solid #ebe5dc; }
th { background: #f3efe8; color: #17130f; border-bottom-color: #ebe5dc; }
td { color: #3a332b; border-bottom-color: #f1ece4; }
code { background: #f3efe8; color: #17130f; }
.foot { border-top-color: #ebe5dc; color: #6b6258; }
.foot a { color: #6b6258; }
.foot a:hover { color: #17130f; }

@media (max-width: 600px) {
  .hero { padding: 36px 16px 28px; }
  .head { padding: 32px 16px 24px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .topbar .wrap { padding: 0 16px; }
}
.card .ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 12px; font: 700 1.1rem var(--fd); }
/* Hizalama: başlık alanı içeriğiyle aynı sütunda başlasın (kapsayıcı 900 / 820 px, kenar boşluğu 22 px) */
.hero > *, .hero p { max-width: 856px; }
.head > *, .head p { max-width: 776px; }
.hero .badge { display: block; width: fit-content; }
.hero .badge { margin-left: max(22px, calc((100% - 856px) / 2)); margin-right: auto; }