/* =========================================================================
   TAM Randevu — doc.css
   KURUMSAL + HUKUKİ SAYFALARIN uzun-metin stili (hakkimizda, iletisim,
   gizlilik, sözleşmeler…). Kontrat: docs/SITE-BUYUTME-ARASTIRMA.md §5.1.

   NEDEN AYRI BİR DOSYA:
   Bu 11 sayfa 2026-08-24'e kadar KENDİ <style> bloğunu taşıyordu ve o blok
   11 dosyada birebir kopyaydı: kendi paleti (#15171c…), kendi .wrap'i
   (760px), kendi <footer>'ı. Yani landing'in tasarım dilinin DIŞINDA bir
   ada idiler — üst bar yok, koyu tema yok, dil yok. Kopya stil tek dosyada
   toplandı ve landing token'larına bağlandı; koyu tema artık bedava gelir.

   İKİ BAĞLAYICI KURAL:

   1) HER KURAL `.doc` ALTINDA KAPSANIR. Buradaki hiçbir seçici çıplak
      element (h2, p, ul, footer…) olamaz. Sebebi somut: eski blok
      `.wrap { max-width:760px }` ve `footer { … }` yazıyordu; base.css'in
      `.wrap`i ve chrome'un `<footer>`ü aynı adları kullanıyor. Kapsamsız
      bir kural üst barı ve site footer'ını 760px'e sıkıştırırdı
      (bkz. docs/LANDING-DESIGN.md · jenerik sınıf adı tuzağı).

   2) RENK YAZILMAZ, TOKEN KULLANILIR. base.css'in :root'u iki temayı da
      tanımlar. Buraya `#fff` yazan bir kural koyu temada beyaz kart basar.
      ========================================================================= */

/* ── Sayfa kabuğu ───────────────────────────────────────────────────────
   .nav position:fixed olduğu için üstten nav yüksekliği kadar boşluk
   şart; aksi hâlde H1 üst barın altında kalır. */
.doc-wrap {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: calc(var(--nav-h) + 22px) var(--gutter) 64px;
}

/* Kısa sayfa (veri-silme, kvkk formu): footer ekranın ortasına tırmanmasın.
   page-gate / page-call ile aynı desen. */
body.page-doc { display: flex; flex-direction: column; min-height: 100vh; }
body.page-doc .doc-wrap { flex: 1; }

/* ── Uzun metin gövdesi ─────────────────────────────────────────────────
   2026-08-28: metin bilinçli olarak SIKIŞTIRILDI (kullanıcı kararı).
   Sektördeki sözleşme sayfaları ferah değil yoğun görünür; bizimki
   "çok net" duruyordu. Satır aralığı 1.65 → 1.48, paragraf boşlukları
   ve başlık ölçekleri kısıldı, ölçü 900px'e çıktı.

   ⚠️ font-size 16px'DE KALIR. 16px = 12 punto; 6502 sayılı TKHK m.5 ve
   Mesafeli Sözleşmeler Yönetmeliği tüketiciye sunulan sözleşme metni
   için "en az on iki punto" şartı koyar. Müşterimiz çoğunlukla tacir
   olduğu için kural doğrudan bağlamayabilir, ama Mesafeli Satış
   Sözleşmesi ile Ön Bilgilendirme Formu tüketici diliyle yazılmış
   yüzeylerdir ve sanal POS başvurusunda da bu gözle incelenir.
   Küçültmenin kazancı görsel, riski hukukidir. */
.doc {
  font-size: 16px;
  line-height: 1.48;
  color: var(--text);
  letter-spacing: 0;              /* landing'in -0.012em'i uzun metinde sıkışık durur */
  text-wrap: pretty;              /* tek kelimelik son satır bırakmaz */
}

.doc > header {
  border-bottom: 1px solid var(--hair);
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.doc h1 {
  font-size: clamp(22px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 4px;
}
.doc h2 {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 20px 0 6px;
}
.doc h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 14px 0 4px;
}
.doc .meta { color: var(--text-2); font-size: 13px; }
.doc p { margin: 0 0 8px; }
.doc ul, .doc ol { padding-left: 18px; margin: 0 0 8px; }
.doc li { margin: 2px 0; }
.doc strong, .doc b { color: var(--text); font-weight: 600; }

/* base.css `a { color: inherit; text-decoration: none; }` yazar — hukuki
   metinde bağlantının bağlantı gibi görünmesi zorunlu (KVKK "kolay
   erişilebilir"). Burada geri alınır. */
.doc a {
  color: var(--accent);
  text-decoration: none;
}
.doc a:hover { text-decoration: underline; }
.doc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── Kutular ────────────────────────────────────────────────────────── */
.doc .note {
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.doc .card {
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
}
.doc code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 13px;
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
}

/* ── Künye tablosu (.kv) — hakkimizda, iletisim ─────────────────────── */
.doc .kv { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.doc .kv th {
  text-align: left; vertical-align: top; padding: 6px 14px 6px 0;
  color: var(--text-2); font-weight: 500; white-space: nowrap; width: 190px;
  border-bottom: 1px solid var(--hair);
}
.doc .kv td { padding: 6px 0; border-bottom: 1px solid var(--hair); }
@media (max-width: 560px) {
  .doc .kv th, .doc .kv td { display: block; width: auto; border-bottom: none; padding: 2px 0; }
  .doc .kv tr { display: block; padding: 9px 0; border-bottom: 1px solid var(--hair); }
}

/* ── Veri tablosu (.tbl) — gizlilik, veri-silme ─────────────────────── */
.doc .tbl { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.doc .tbl th {
  text-align: left; padding: 6px 10px 6px 0; color: var(--text-2);
  font-weight: 600; border-bottom: 2px solid var(--hair); vertical-align: bottom;
}
.doc .tbl td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.doc .tbl td:last-child, .doc .tbl th:last-child { padding-right: 0; }
/* Geniş tablo SAYFAYI değil KENDİNİ kaydırır. */
.doc .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) { .doc .tbl { font-size: 13.5px; } }

/* ── Numaralı adımlar (.steps) — islem-rehberi ─────────────────────── */
.doc .steps { counter-reset: step; list-style: none; padding-left: 0; margin: 12px 0; }
.doc .steps > li {
  counter-increment: step; position: relative;
  padding: 14px 16px 14px 54px;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: 12px;
  margin: 10px 0;
}
.doc .steps > li::before {
  content: counter(step); position: absolute; left: 16px; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--text-on-accent);
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.doc .steps b { display: block; margin-bottom: 2px; }