/* ============================================================
   Online Koçunuz — Mesafeli Satış Sözleşmesi sayfası stilleri
   Kaynak: design_system/standalone/mesafeli-satis-sozlesmesi.html (inline)
   Tüm kurallar .okt-mesafeli-satis-sozlesmesi altına scope'landı.
   Token'lar globalde tanımlı (style.css): var(--ink-700), var(--ink-900),
   var(--fg-muted), var(--border), var(--ink-10) vb.
   @keyframes global; helper sınıflar (page-hero, container-narrow, lead,
   crumbs, display-md) global style.css'ten gelir.
   Mobil öncelikli, okunaklı yasal tipografi.
   ============================================================ */

/* ---- HERO ---- */
.okt-mesafeli-satis-sozlesmesi .okt-mss-hero{ overflow:hidden; }
.okt-mesafeli-satis-sozlesmesi .okt-mss-crumbs{ margin-bottom:14px; }

.okt-mesafeli-satis-sozlesmesi .okt-mss-pill{
  display:inline-flex; align-items:center;
  padding:6px 13px; border-radius:999px;
  background:var(--ink-10); color:var(--fg-muted);
  font-size:12px; font-weight:600; letter-spacing:.01em;
}
.okt-mesafeli-satis-sozlesmesi .okt-mss-title{
  margin:14px 0 12px; color:var(--ink-900); max-width:780px;
}
.okt-mesafeli-satis-sozlesmesi .okt-mss-lead{ max-width:660px; }

/* ---- ANA BÖLÜM ---- */
.okt-mesafeli-satis-sozlesmesi .okt-mss-main{
  padding:56px 0 80px; background:#fff;
}

/* ---- GÖVDE TİPOGRAFİSİ (okunaklı yasal metin) ---- */
.okt-mesafeli-satis-sozlesmesi .okt-mss-body{
  font-size:15px; color:var(--ink-700); line-height:1.75;
}
.okt-mesafeli-satis-sozlesmesi .okt-mss-body h2{
  color:var(--ink-900); font-size:20px; margin:28px 0 10px;
}
.okt-mesafeli-satis-sozlesmesi .okt-mss-body h2:first-child{ margin-top:0; }
.okt-mesafeli-satis-sozlesmesi .okt-mss-body p{
  margin:0 0 6px;
}
.okt-mesafeli-satis-sozlesmesi .okt-mss-body strong{ color:var(--ink-900); }

/* ---- ALT NOT KUTUSU ---- */
.okt-mesafeli-satis-sozlesmesi .okt-mss-note{
  margin-top:40px; padding:20px;
  background:var(--ink-10); border-radius:12px;
  font-size:13.5px; color:var(--fg-muted); line-height:1.7;
}
.okt-mesafeli-satis-sozlesmesi .okt-mss-note a{
  color:var(--primary-500, #3B5BFF); font-weight:600; text-decoration:underline;
}
.okt-mesafeli-satis-sozlesmesi .okt-mss-note a:hover{ text-decoration:none; }