/* --- Trafik İşaretleri color palette + ample side gaps (Canbey-style breathing room) --- */
.blog-page-banner {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 30%, #7c3aed 60%, #9333ea 100%);
  color: #fff;
  padding: 1.5rem 0;
  margin-bottom: 0;
}
.blog-page-banner .container {
  padding-left: 2rem;
  padding-right: 2rem;
}
@media (min-width: 768px) {
  .blog-page-banner .container { padding-left: 3rem; padding-right: 3rem; }
}
.blog-page-title {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .blog-page-banner { padding: 2rem 0; }
  .blog-page-title { font-size: 1.5rem; }
}
.blog-breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
}
.blog-breadcrumb .breadcrumb-item a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}
.blog-breadcrumb .breadcrumb-item a:hover {
  color: #fff;
  text-decoration: underline;
}
.blog-breadcrumb .breadcrumb-item.active {
  color: rgba(255,255,255,0.85);
}
.blog-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,0.6);
}
.blog-page-lead {
  font-size: 1rem;
  line-height: 1.6;
}

/* Side gaps - content doesn't extend to edges, less tiring to read */
.blog-layout {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .blog-layout { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 1200px) {
  .blog-layout {
    max-width: 1300px;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
.blog-index-layout {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .blog-index-layout { padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media (min-width: 1200px) {
  .blog-index-layout {
    max-width: 1300px;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Blog article styling - colored headings, icons, images */
.blog-content h2 {
  scroll-margin-top: 1rem;
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
  border-left: 4px solid;
}
.blog-content h2 .blog-icon { margin-right: 0.25rem; }
.blog-content h2.blog-heading--blue { border-color: #2563eb; color: #1e40af; }
.blog-content h2.blog-heading--green { border-color: #22c55e; color: #15803d; }
.blog-content h2.blog-heading--orange { border-color: #f59e0b; color: #b45309; }
.blog-content h2.blog-heading--purple { border-color: #7c3aed; color: #5b21b6; }
.blog-content h2.blog-heading--red { border-color: #dc2626; color: #b91c1c; }
.blog-content {
  font-size: 1rem;
  line-height: 1.7;
  color: #1e293b;
}
.blog-content p { margin-bottom: 1rem; }
.blog-content ul, .blog-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.blog-content li { margin-bottom: 0.35rem; }
.blog-content .blog-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.blog-content .blog-figure img {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (min-width: 576px) {
  .blog-content .blog-figure img {
    max-width: 560px;
  }
}
.blog-content .blog-figure figcaption { font-size: 0.9rem; color: #64748b; }

/* Key Takeaways - Trafik İşaretleri purple accent */
.blog-key-takeaways {
  background: #faf5ff;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  border: 1px solid #e9d5ff;
  border-left: 4px solid #7c3aed;
}
.blog-key-takeaways h3 { color: #6b21a8; font-weight: 600; }
.blog-key-takeaways ul { padding-left: 1.25rem; }
.blog-key-takeaways li { margin-bottom: 0.4rem; line-height: 1.5; }

/* Table of Contents - clean sidebar like Canbey */
.blog-toc {
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}
.blog-toc h3 { color: #64748b; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-toc .nav-link { font-size: 0.9rem; color: #475569; }
.blog-toc .nav-link:hover { color: #7c3aed !important; }
@media (min-width: 992px) { .blog-toc.sticky-top { top: 1rem; } }

/* Share buttons */
.blog-share-buttons .btn { padding: 0.25rem 0.5rem; }

/* FAQ - Trafik İşaretleri purple */
.blog-faq .accordion-button:not(.collapsed) { background: #faf5ff; color: #6b21a8; }
.blog-faq .accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(124,58,237,0.25); }

/* Related posts & back button */
.blog-content a[href*="/Blog/"]:hover { color: #7c3aed !important; }

/* Blog index cards - clean, simple */
.blog-index-card {
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid #e2e8f0;
}
.blog-index-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  border-color: #cbd5e1;
}
.blog-index-card .card-title { color: #1e293b; font-weight: 600; }
.blog-index-card:hover .blog-card-cta { color: #7c3aed !important; }
.blog-card-cta { color: #475569; transition: color 0.2s; }