/*
 * DEVNANOTEK CAR-TOOL — İçerik Sayfası Stili (özellikler · araçlar · cihazlar · yasal)
 * Sayfa başlığı, özellik/seviye kartları, veri tablosu, etiketler, not blokları, CTA.
 *
 * 🔴 Durum renkleri (ok/warn/err) BURADA da yalnız kapsam/destek seviyesi bildirir.
 *    Vurgu ve "bilgi" anlamı --accent (soğuk mavi) ile taşınır.
 * Renk/ölçü değerleri tokens.css jetonlarından gelir.
 * @author DEVNANOTEK
 */

/* ── Sayfa başlığı ──────────────────────────────────────────────────────── */
.page-head { padding-block: var(--sp-5) var(--sp-5); background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 90%); border-bottom: 1px solid var(--line); }
.page-head h1 { margin-top: var(--sp-3); }
.page-lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 68ch; margin-top: var(--sp-3); }

/* ── Bölüm ──────────────────────────────────────────────────────────────── */
.section-title { margin-bottom: var(--sp-3); }
.section-lead { color: var(--text-muted); max-width: 72ch; margin-bottom: var(--sp-5); }

/* ── Özellik kartları ───────────────────────────────────────────────────── */
.feature-grid { list-style: none; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature { border-top: 2px solid var(--accent-line); }
.feature h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); color: var(--text); }
.feature p { color: var(--text-muted); font-size: var(--fs-sm); }
/* Kart altı dürüstlük notu — henüz yayında olmayan yetenek için */
.feature-note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-dim); font-style: italic; }
/* Başlıktaki "yakında" rozeti başlıkla aynı satırda kalsın, sarmalanabilsin */
.feature h3 .tag { margin-left: var(--sp-2); vertical-align: middle; }

/* ── Karşılaştırma (sıradan tarayıcı ↔ DEVNANOTEK) ──────────────────────── */
.compare { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: var(--sp-5); }
.compare-col p { color: var(--text-muted); font-size: var(--fs-sm); }
/* Bizim sütun: vurgu kenarlığı + hafif vurgu zemini ile öne çıkar */
.compare-col-accent { border-color: var(--accent-line); background: var(--accent-soft); }
.compare-title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); color: var(--accent); }
.compare-title-plain { color: var(--text-dim); }
.compare-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); letter-spacing: .02em; margin-bottom: var(--sp-2); color: var(--text); }

/* ── İşaretli liste ─────────────────────────────────────────────────────── */
.check-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.check-list li { position: relative; padding-left: var(--sp-4); color: var(--text-muted); }
.check-list li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ── Sınır (ne yapamaz) listesi ─────────────────────────────────────────── */
.limit-list { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.limit { padding-left: var(--sp-3); border-left: 2px solid var(--line-strong); }
.limit h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.limit p { color: var(--text-muted); max-width: 78ch; }

/* ── Seviye kartları — sol kenar şeridi destek seviyesini bildirir ──────── */
.level-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.level p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.level-ok { border-left: 3px solid var(--ok); }
.level-warn { border-left: 3px solid var(--warn); }
.level-info { border-left: 3px solid var(--accent); }
.level-err { border-left: 3px solid var(--err); }
.level-mut { border-left: 3px solid var(--text-dim); }

/* ── Etiketler (rozet) — renk + METİN birlikte; renge tek başına güvenilmez ─ */
.tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-info { background: var(--accent-soft); color: var(--accent); }
.tag-err { background: var(--err-soft); color: var(--err); }
.tag-mut { background: var(--surface-2); color: var(--text-muted); }

/* ── Veri tablosu — dar ekranda KENDİ içinde yatay kayar (sayfa kaymaz) ─── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elevated); }
.data-table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); min-width: 520px; }
.data-table caption { padding: var(--sp-3) var(--sp-3) 0; text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-dim); }
.data-table th, .data-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { background: var(--surface); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.data-table tbody th { font-weight: 600; color: var(--text); }
.data-table td { color: var(--text-muted); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }

/* ── Not blokları ───────────────────────────────────────────────────────── */
.note { margin-top: var(--sp-4); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--text-muted); font-size: var(--fs-sm); }
.note-warn { border-left: 3px solid var(--warn); }

/* ── SSS listesi ────────────────────────────────────────────────────────
 * Soru <h2>'dir (AEO); grup adı ölçüm etiketiyle verilir, başlık değildir.
 * Numaralandırma her grupta yeniden başlar (mono, cihaz kılavuzu gibi).
 */
.faq-group { padding-block: var(--sp-5); }
.faq-list { list-style: none; padding: 0; margin-top: var(--sp-3); counter-reset: faq; }
.faq-item { counter-increment: faq; padding-block: var(--sp-4); border-top: 1px solid var(--line); }
.faq-q { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-lg); font-weight: 650; }
.faq-q::before { content: counter(faq, decimal-leading-zero); flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.faq-a { margin-top: var(--sp-2); padding-left: calc(var(--sp-3) + 2ch); color: var(--text-muted); max-width: 80ch; }

/* Dar telefonda numara girintisi yer kaplamasın */
@media (max-width: 560px) {
  .faq-a { padding-left: 0; }
}

/* ── Yasal metin gövdesi ────────────────────────────────────────────────
 * Uzun okuma için ölçülü satır uzunluğu; bölümler kılcal çizgiyle ayrılır.
 */
.legal-updated { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-dim); }
.legal-body { display: grid; gap: var(--sp-5); }
.legal-section { display: grid; gap: var(--sp-3); }
.legal-section + .legal-section { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.legal-h { font-size: var(--fs-xl); }
.legal-body p { color: var(--text-muted); max-width: 76ch; }
.legal-contact { list-style: none; padding: var(--sp-3); margin: 0; display: grid; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text-muted); }

/* Diğer yasal metinlere geçiş bloğu */
.legal-nav { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.legal-nav ul { list-style: none; padding: 0; margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.legal-nav a { font-size: var(--fs-sm); }

/* ── Kapanış çağrısı ────────────────────────────────────────────────────── */
.cta { text-align: center; }
.cta p { color: var(--text-muted); margin-top: var(--sp-3); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }