/* ═══════════════════════════════════════════════════════════
   YiYo — Yasal sayfa stilleri

   Ana sayfanın görsel dili: kart yok, gölge yok, yuvarlak köşe
   yok. Bölümler saç teli kalınlığında çizgilerle ayrılıyor,
   numaralar mono etiket olarak duruyor, başlıklar Bricolage.
   Daha önce buradaki yığılmış kartlar ve emoji ikonlar ana
   sayfayla aynı siteye ait görünmüyordu.

   Renk ve tipografi token'ları site.css'ten gelir.
   Sınıf adları korundu — HTML'de yalnız gereksiz süs kaldırıldı.
   ═══════════════════════════════════════════════════════════ */

/* ── Üst şerit: ana sayfanın header'ıyla aynı ──────────── */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 28px);
}

.page-head .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: "Bricolage Grotesque","Bricolage Grotesque Fallback", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--fg);
}

.page-head .wordmark img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.page-head nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.page-head nav a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: "Instrument Sans","Instrument Sans Fallback", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-soft);
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease;
}

.page-head nav a:hover { color: var(--fg); background: var(--edge-soft); }

@media (max-width: 560px) {
  .page-head nav a { display: none; }
}

/* ── Sayfa sarmalayıcı ─────────────────────────────────── */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 28px) clamp(56px, 8vw, 88px);
}

/* ── Başlık ────────────────────────────────────────────── */
.legal-header {
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--edge);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.legal-header .kicker { margin-bottom: 22px; }

/* Çeviri uyarısı yalnız Türkçe DIŞINDAKİ dillerde görünür. <html lang>
   sayfanın <head>'inde, ilk boyamadan önce yazıldığı için burada JS'e
   bağlı bir görünürlük oyunu gerekmiyor. */
:root[lang="tr"] .translation-note { display: none; }

.translation-note {
  margin-top: 14px;
  max-width: 52ch;
  line-height: 1.7;
  color: var(--fg-muted);
  border-left: 2px solid var(--edge);
  padding-left: 12px;
}

.legal-header h1 {
  font-family: "Bricolage Grotesque","Bricolage Grotesque Fallback", sans-serif;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.legal-header .subtitle {
  margin-top: 16px;
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--fg-muted);
}

.legal-header .update-date {
  display: inline-block;
  margin-top: 22px;
  font-family: "Martian Mono","Martian Mono Fallback", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ── Bilgi şeridi ──────────────────────────────────────── */
/* Kart değil: solunda amber bir çizgi olan bir alıntı bloğu. */
.info-banner {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.info-banner p {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--fg-soft);
  line-height: 1.7;
  max-width: 60ch;
}

/* ── İletişim bloğu ────────────────────────────────────── */
.contact-card {
  border-top: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
  padding: 22px 0;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.contact-card .label { margin-bottom: 14px; }

.contact-card .row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin-bottom: 8px;
}

.contact-card .row:last-child { margin-bottom: 0; }

.contact-card .row span {
  font-size: 15px;
  color: var(--fg-soft);
}

.contact-card .row a {
  color: var(--accent-ink);
  text-decoration: none;
}

.contact-card .row a:hover { text-decoration: underline; }

/* ── Bölüm ─────────────────────────────────────────────── */
/* Ana sayfadaki .flow-list ile aynı ritim: üstte saç teli
   çizgi, mono numara, Bricolage başlık, yumuşak gövde. */
.legal-section {
  padding: clamp(26px, 3.4vw, 36px) 0;
  border-top: 1px solid var(--edge-soft);
}

.legal-section:first-of-type { border-top-color: var(--edge); }

.legal-section .section-number {
  display: block;
  margin-bottom: 14px;
  font-family: "Martian Mono","Martian Mono Fallback", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.legal-section h2 {
  font-family: "Bricolage Grotesque","Bricolage Grotesque Fallback", sans-serif;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 16px;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.legal-section p {
  font-size: 15px;
  color: var(--fg-soft);
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: 68ch;
}

.legal-section p:last-child { margin-bottom: 0; }

.legal-section a { color: var(--accent-ink); }

.legal-section ul {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  max-width: 68ch;
}

.legal-section ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--fg-soft);
  line-height: 1.7;
}

.legal-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

.legal-section ul li strong {
  color: var(--fg);
  font-weight: 500;
}

/* ── Sayfa sonu indirme daveti ─────────────────────────── */
/* Yasal metni okuyan biri zaten ilgileniyor; çıkışta boş
   bırakmıyoruz. */
.legal-cta {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--edge);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 34px);
  flex-wrap: wrap;
}

.legal-cta .mascot { flex: none; }

.legal-cta .body { flex: 1 1 260px; min-width: 0; }

.legal-cta h2 {
  font-family: "Bricolage Grotesque","Bricolage Grotesque Fallback", sans-serif;
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--fg);
}

.legal-cta p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--fg-muted);
  max-width: 44ch;
}

.legal-cta .store-row { margin-top: 20px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 600px) {
  .legal-section h2 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-head nav a { transition: none; }
}