/* Rehberler ve içerik sayfaları (scripts/build_blog.py). Renk ve yazı tipleri site.css değişkenlerinden. */
.post { max-width: 46rem; padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 1.2rem; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.post h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 1rem; max-width: 24ch; }
.post-meta { font-size: .9rem; color: var(--muted); }
.post-meta a { color: var(--ink); text-decoration: none; font-weight: 500; }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); margin-top: 1.4rem; }

.prose { margin-top: 2rem; font-size: 1.06rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-top: 2.8rem; line-height: 1.2; }
.prose h3 { font-size: 1.2rem; margin-top: 2rem; line-height: 1.3; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .45rem; }
.prose a { color: var(--blue); font-weight: 500; }
.prose strong { font-weight: 600; }
.prose .answer { background: var(--white); border: 1px solid var(--rule); border-left: 3px solid var(--coral);
  border-radius: 12px; padding: 1.1rem 1.25rem; font-size: 1.04rem; }
.prose .note { font-size: .95rem; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: .96rem; background: var(--white);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { background: var(--paper-deep); font-weight: 600; font-size: .9rem; }
.prose tr:last-child td { border-bottom: 0; }
.prose .stats { list-style: none; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.prose .stats li { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.1rem; margin: 0; }
.prose .stats b { display: block; font: 700 1.7rem/1.1 var(--display); color: var(--ink); margin-bottom: .3rem; }

.faq-block { margin-top: 3rem; }
.faq-block h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-bottom: 1rem; }
.faq-block details { border-bottom: 1px solid var(--rule); padding: .9rem 0; }
.faq-block summary { cursor: pointer; font-weight: 600; }
.faq-block details p { margin-top: .6rem; color: var(--ink-2); }

.cta-box { margin-top: 3rem; background: var(--ink); color: var(--on-ink); border-radius: var(--r); padding: 1.6rem 1.7rem; }
.cta-box .cta-title { font: 700 1.3rem/1.25 var(--display); color: var(--white); margin-bottom: .5rem; }
.cta-box p { margin-bottom: 1.1rem; }
.cta-box .btn { background: var(--white); color: var(--ink); border-color: var(--white); }
.cta-box .btn:hover { background: var(--paper); }

.author-box { margin-top: 2.2rem; display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: start;
  border-top: 1px solid var(--rule); padding-top: 1.6rem; font-size: .95rem; color: var(--ink-2); }
.author-box img, .author-box .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-box .avatar { display: grid; place-items: center; background: var(--coral-tint); color: var(--coral-text);
  font: 700 1.2rem/1 var(--display); }
.author-box p + p { margin-top: .4rem; }
.author-name { font-weight: 600; color: var(--ink); }
.author-name a { text-decoration: none; }
.author-box a { color: var(--blue); }

.related { margin-top: 2.6rem; }
.related h2 { font-size: 1.2rem; margin-bottom: .7rem; }
.related ul { padding-left: 1.2rem; }
.related li + li { margin-top: .4rem; }

.post-list { list-style: none; margin-top: 2rem; display: grid; gap: 1rem; }
.post-card a { display: block; text-decoration: none; background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.4rem 1.5rem; transition: border-color .2s; }
.post-card a:hover { border-color: var(--ink); }
.post-card h2 { font-size: 1.35rem; line-height: 1.25; margin-bottom: .5rem; }
.post-card p { color: var(--muted); }
.post-card .post-meta { margin-top: .7rem; }

/* Görseller ve video (rehberler) */
.prose figure { margin: 2rem 0; }
.prose figure img, .prose figure video { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--white); display: block; }
.prose figcaption { margin-top: .6rem; font-size: .88rem; color: var(--muted); line-height: 1.5; }