/* =========================================================================
   SMSOnayVer.com — Makale (Blog/Rehber) Zengin İçerik Stilleri
   .prose içindeki referans-makale elementleri: ToC, callout, steps, tablo,
   answer-lead, takeaways, SSS accordion, figure. Tema değişkenleriyle uyumlu.
   ========================================================================= */

.prose { max-width: 820px; font-size: var(--fs-lg); color: var(--slate-800); }
.prose > p { margin-bottom: var(--sp-5); line-height: var(--lh-base); }
.prose h2 { scroll-margin-top: 90px; position: relative; padding-top: var(--sp-2); }
.prose h2::after { content:""; display:block; width:52px; height:3px; margin-top:var(--sp-3);
  background: linear-gradient(90deg, var(--blue-500), var(--green-500)); border-radius:3px; }
.prose a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--navy-900); }

/* --- Öne çıkan ilk cevap (answer-first / snippet hedefi) --- */
.prose .answer-lead {
  font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--navy-900);
  font-weight: 600; margin: 0 0 var(--sp-5);
  border-left: 4px solid var(--blue-500); padding-left: var(--sp-5);
}

/* --- Kutular (callout) --- */
.prose .callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-5) var(--sp-6); border-radius: 14px; margin: var(--sp-6) 0;
  border: 1px solid var(--slate-200); background: var(--surface-2);
  font-size: var(--fs-base); line-height: var(--lh-base);
}
.prose .callout::before { font-size: 1.35rem; line-height: 1; }
.prose .callout > * { grid-column: 2; margin: 0; }
.prose .callout > *:not(:last-child) { margin-bottom: var(--sp-2); }
.prose .callout--summary { background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(16,185,129,.06));
  border-color: rgba(37,99,235,.25); }
.prose .callout--summary::before { content:"⚡"; }
.prose .callout--info::before { content:"ℹ️"; }
.prose .callout--tip { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.3); }
.prose .callout--tip::before { content:"💡"; }
.prose .callout--warning { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.35); }
.prose .callout--warning::before { content:"⚠️"; }
.prose .callout strong { color: var(--navy-900); }
.prose .callout ul { margin: var(--sp-2) 0 0; }

/* --- İçindekiler (ToC) --- */
.prose .toc {
  background: var(--surface-2); border: 1px solid var(--slate-200); border-radius: 14px;
  padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0;
}
.prose .toc .toc__title { font-weight: 700; color: var(--navy-900); font-size: var(--fs-base);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-3); }
.prose .toc ol { counter-reset: toc; list-style: none; display: grid; gap: var(--sp-2); padding: 0; }
.prose .toc ol li { counter-increment: toc; padding-left: var(--sp-6); position: relative; }
.prose .toc ol li::before { content: counter(toc); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; background: var(--navy-900); color:#fff; border-radius: 6px;
  font-size: var(--fs-xs); display: grid; place-items: center; font-weight: 700; }
.prose .toc a { color: var(--slate-800); text-decoration: none; }
.prose .toc a:hover { color: var(--blue-600); }

/* --- Adım adım (HowTo) — KOMPAKT, tek satır akışı --- */
.prose .steps { counter-reset: step; list-style: none; padding: 0; margin: var(--sp-5) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose .steps > li { counter-increment: step; display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--slate-200);
  border-left: 3px solid var(--blue-500); border-radius: 10px; line-height: var(--lh-snug); }
.prose .steps > li::before { content: counter(step); flex: 0 0 auto; width: 26px; height: 26px; position: relative; top: 3px;
  border-radius: 50%; background: linear-gradient(135deg, var(--blue-500), var(--navy-900));
  color:#fff; font-weight:700; font-size: var(--fs-sm); display:grid; place-items:center; }
.prose .steps > li::marker { content: none; }
.prose .steps strong { display: inline; color: var(--navy-900); }
.prose .steps strong::after { content: " — "; color: var(--muted); font-weight: 400; }

/* --- İstatistik kartları (mini) --- */
.prose .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-6) 0; }
.prose .stats .stat-card { background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--slate-200);
  border-radius: 12px; padding: var(--sp-4) var(--sp-3); text-align: center; }
.prose .stats .stat-card b { display: block; font-size: var(--fs-2xl); color: var(--blue-600); line-height: 1.1; }
.prose .stats .stat-card span { font-size: var(--fs-sm); color: var(--muted); }

/* --- İkonlu liste --- */
.prose .icon-list { list-style: none; padding: 0; margin: var(--sp-5) 0; display: grid; gap: var(--sp-3); }
.prose .icon-list li { display: flex; gap: var(--sp-3); align-items: flex-start; padding-left: 0; }
.prose .icon-list li::before { content: none; }
.prose .icon-list .ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 1rem; background: rgba(37,99,235,.10); }
.prose .icon-list strong { color: var(--navy-900); }

/* --- Karşılaştırma kartları (artı / eksi) --- */
.prose .compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-6) 0; }
.prose .compare .col { border-radius: 14px; padding: var(--sp-5); border: 1px solid; }
.prose .compare .col--pro { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.3); }
.prose .compare .col--con { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.3); }
.prose .compare .col h4 { margin: 0 0 var(--sp-3); color: var(--navy-900); font-size: var(--fs-lg); }
.prose .compare ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); margin: 0; }
.prose .compare li { padding-left: var(--sp-6); position: relative; }
.prose .compare .col--pro li::before { content: "✓"; position: absolute; left: 0; color: var(--green-600); font-weight: 700; }
.prose .compare .col--con li::before { content: "✕"; position: absolute; left: 0; color: #DC2626; font-weight: 700; }

/* --- Özellik/kıyas tablosu (2. stil: yeşil başlık + ✓/✕) --- */
.prose table.feature { width: 100%; border-collapse: collapse; background: var(--surface); font-size: var(--fs-base); min-width: 460px; }
.prose table.feature thead th { background: linear-gradient(135deg, var(--green-600), var(--green-500)); color: #fff;
  padding: var(--sp-3) var(--sp-4); text-align: left; }
.prose table.feature th, .prose table.feature td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--slate-200); }
.prose table.feature tbody th { text-align: left; color: var(--navy-900); font-weight: 600; }
.prose table.feature td.yes { color: var(--green-600); font-weight: 700; }
.prose table.feature td.no { color: #DC2626; font-weight: 700; }
.prose table.feature tbody tr:nth-child(even) { background: var(--surface-2); }

/* --- Karşılaştırma / veri tablosu --- */
.prose .table-wrap { overflow-x: auto; margin: var(--sp-6) 0; border-radius: 12px; border: 1px solid var(--slate-200); }
.prose table.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-base); background: var(--surface); min-width: 480px; }
.prose table.cmp thead th { background: var(--navy-900); color:#fff; text-align:left; padding: var(--sp-3) var(--sp-4); font-weight:600; white-space:nowrap; }
.prose table.cmp td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--slate-200); color: var(--slate-800); }
.prose table.cmp tbody tr:nth-child(even) { background: var(--surface-2); }
.prose table.cmp td strong { color: var(--green-600); }

/* --- Key takeaways --- */
.prose .takeaways { background: var(--navy-900); color:#fff; border-radius: 16px; padding: var(--sp-6) var(--sp-8); margin: var(--sp-8) 0; }
.prose .takeaways .takeaways__title { font-weight:700; font-size: var(--fs-lg); margin-bottom: var(--sp-3); color:#fff; }
.prose .takeaways ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.prose .takeaways li { padding-left: var(--sp-6); position: relative; color: rgba(255,255,255,.9); }
.prose .takeaways li::before { content:"✓"; position:absolute; left:0; color: var(--green-400); font-weight:700; }

/* --- Görsel --- */
.prose figure { margin: var(--sp-6) 0; }
.prose figure img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 10px 30px rgba(11,18,32,.10); }
.prose figure figcaption { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin-top: var(--sp-3); }

/* --- SSS accordion --- */
.prose .faq { margin: var(--sp-6) 0; display: grid; gap: var(--sp-3); }
.prose .faq details { border: 1px solid var(--slate-200); border-radius: 12px; background: var(--surface); overflow: hidden; }
.prose .faq summary { cursor: pointer; padding: var(--sp-4) var(--sp-5); font-weight: 600; color: var(--navy-900);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.prose .faq summary::-webkit-details-marker { display: none; }
.prose .faq summary::after { content:"+"; font-size: 1.4rem; color: var(--blue-500); transition: transform .2s; }
.prose .faq details[open] summary::after { transform: rotate(45deg); }
.prose .faq details > p { padding: 0 var(--sp-5) var(--sp-5); margin: 0; color: var(--slate-600); line-height: var(--lh-base); }

/* --- Makale içi CTA --- */
.prose .article-cta { background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  border-radius: 18px; padding: var(--sp-8); text-align: center; margin: var(--sp-8) 0; color:#fff; }
.prose .article-cta h3 { color:#fff; margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); }
.prose .article-cta p { color: rgba(255,255,255,.8); margin: 0 auto var(--sp-5); max-width: 520px; }
.prose .article-cta .btn { background: var(--green-500); color: #04231a; font-weight: 700; }
.prose .article-cta .btn:hover { background: var(--green-400); }

/* --- Makale TAM GENİŞLİK (header/footer genişliği, tek kolon) --- */
.prose.article-full { max-width: none; margin-inline: 0; width: 100%; }

@media (max-width: 640px) {
  .prose { font-size: var(--fs-base); }
  .prose .answer-lead { font-size: var(--fs-lg); }
  .prose .callout { padding: var(--sp-4); }
  .prose .stats { grid-template-columns: repeat(2, 1fr); }
  .prose .compare { grid-template-columns: 1fr; }
  .prose .table-wrap table { min-width: 520px; }
}