/* ==========================================================================
   Biletstore — Yardım merkezi + Blog sayfaları (grup: help-blog)
   Görünüm: destek.html, blog.html, blog-detay.html
   Sadece token renkleri; gölge yok, 1px --border-subtle kenarlık.
   ========================================================================== */

/* --- Hero (yardım merkezi) ---------------------------------------------- */
.bb-help-hero-media {
  width: 100%; max-height: 340px; object-fit: cover;
  border-radius: var(--radius-xl); border: 1px solid var(--border-subtle);
}
.bb-help-search { max-width: 640px; background: var(--surface-raised); }
.bb-help-search .btn { flex: 0 0 auto; }
.bb-lead { max-width: 64ch; }

/* --- Kategori kartları -------------------------------------------------- */
.bb-help-cat {
  display: flex; flex-direction: column; height: 100%;
  padding: 1rem; color: var(--text-primary); text-decoration: none;
}
a.bb-help-cat:hover { border-color: var(--border-default); color: var(--text-primary); }
.bb-help-cat.active { border-color: var(--accent-solid); }
.bb-help-cat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; font-size: 1.25rem; line-height: 1;
  color: var(--text-accent);
}
.bb-help-cat-title { font-size: 1rem; font-weight: 500; margin: .875rem 0 0; overflow-wrap: anywhere; }

/* Mobil kategori şeridi */
.bb-chip-scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .5rem; padding-bottom: .25rem; scrollbar-width: none; }
.bb-chip-scroll::-webkit-scrollbar { display: none; }
.bb-chip-scroll .bb-chip { white-space: nowrap; text-decoration: none; }

/* --- SSS akordeonu (toggleFaq ile .active sınıfı) ----------------------- */
.bb-faq { border-top: 1px solid var(--border-subtle); }
.help-center-faq-item {
  border-bottom: 1px solid var(--border-subtle);
  background: transparent; cursor: pointer;
}
.help-center-faq-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0;
}
.help-center-faq-item .faq-question {
  flex: 1; margin: 0; min-width: 0;
  font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--text-primary);
}
.help-center-faq-item:hover .faq-question { color: var(--text-primary); }
.help-center-faq-item .faq-icon {
  display: inline-flex; flex: 0 0 auto; color: var(--text-muted);
  transition: transform .2s ease, color .2s ease;
}
.help-center-faq-item:hover .faq-icon { color: var(--text-primary); }
.help-center-faq-item.active .faq-icon { transform: rotate(180deg); color: var(--text-accent); }
.help-center-faq-answer { display: none; padding: 0 0 1.125rem; cursor: auto; }
.help-center-faq-item.active .help-center-faq-answer { display: block; }

/* --- Yan menü (kategori / soru listesi) --------------------------------- */
.bb-help-sticky { position: sticky; top: 1rem; }
.bb-help-side .bb-side-link { font-size: .875rem; line-height: 1.4; }
.bb-help-side-group + .bb-help-side-group { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }
.bb-help-side-group .bb-side-link { color: var(--text-secondary); }
.bb-help-side-group .bb-side-link:hover { color: var(--text-primary); }
@media (max-width: 767.98px) { .bb-help-sticky { position: static; } }

/* --- Soru listesi (statik yardım sayfası) ------------------------------- */
.bb-help-q { font-size: .9375rem; }

/* --- Blog kartları ------------------------------------------------------- */
.bb-post-feature-media { position: relative; height: 100%; min-height: 280px; background: var(--surface-overlay); }
.bb-post-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-post-media-fallback { background: var(--surface-canvas); }
.bb-post-media-fallback img { object-fit: contain; padding: 2rem 18%; }
.bb-post-excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.bb-post-feature .bb-post-excerpt { -webkit-line-clamp: 4; }
.bb-post-title { overflow-wrap: anywhere; }
.bb-event-card .bb-event-venue.bb-post-excerpt { line-height: 1.5; }
@media (max-width: 991.98px) { .bb-post-feature-media { min-height: 220px; aspect-ratio: 16 / 9; height: auto; } }

/* --- Blog detay ---------------------------------------------------------- */
.bb-crumbs a { color: var(--text-muted); text-decoration: none; }
.bb-crumbs a:hover { color: var(--text-primary); }
.bb-crumbs .bb-ico { vertical-align: -3px; }
.bb-article-title { max-width: 24ch; overflow-wrap: anywhere; }
.bb-article-cover {
  display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover;
  border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); background: var(--surface-overlay);
}
.bb-article-cover-fallback {
  display: flex; align-items: center; justify-content: center; height: 240px;
  border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); background: var(--surface-canvas);
}
.bb-article-cover-fallback img { width: min(280px, 60%); height: auto; }
.bb-mini-post-fallback { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-canvas); }
.bb-mini-post .bb-mini-post-fallback img { width: 48px; height: auto; flex: 0 0 auto; border: 0; border-radius: 0; background: transparent; object-fit: contain; }
.bb-mini-post {
  display: flex; align-items: center; gap: .75rem; padding: .5rem; margin: 0 -.5rem;
  border-radius: var(--radius-md); color: var(--text-primary); text-decoration: none;
}
.bb-mini-post:hover { background: var(--surface-overlay); color: var(--text-primary); }
.bb-mini-post img {
  width: 64px; height: 64px; flex: 0 0 64px; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-overlay);
}
.bb-mini-post span { font-size: .875rem; line-height: 1.45; overflow-wrap: anywhere; }

/* --- DB'den gelen zengin metin (blog içeriği, SSS cevabı) ---------------
   Satır içi renkleri/zeminleri/fontları nötralize eder; iki temada okunur. */
.bb-rich {
  color: var(--text-secondary); font-size: 1rem; line-height: 1.75;
  overflow-wrap: anywhere;
}
.bb-rich.bb-rich-lg { font-size: 1.0625rem; }
.bb-rich > :last-child { margin-bottom: 0; }
.bb-rich *,
.bb-rich [style] {
  font-family: var(--font-sans) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.bb-rich [style*="color"],
.bb-rich font[color],
.bb-rich span,
.bb-rich p,
.bb-rich li,
.bb-rich td,
.bb-rich th,
.bb-rich div { color: inherit !important; }
.bb-rich h1, .bb-rich h2, .bb-rich h3, .bb-rich h4, .bb-rich h5, .bb-rich h6,
.bb-rich h1 *, .bb-rich h2 *, .bb-rich h3 *, .bb-rich h4 *, .bb-rich h5 *, .bb-rich h6 *,
.bb-rich strong, .bb-rich b {
  color: var(--text-primary) !important;
}
.bb-rich h1, .bb-rich h2, .bb-rich h3, .bb-rich h4, .bb-rich h5, .bb-rich h6 {
  font-weight: 500; line-height: 1.3; margin: 1.75rem 0 .625rem;
}
.bb-rich h1, .bb-rich h2 { font-size: 1.5rem; }
.bb-rich h3 { font-size: 1.25rem; }
.bb-rich h4, .bb-rich h5, .bb-rich h6 { font-size: 1.0625rem; }
.bb-rich > h1:first-child, .bb-rich > h2:first-child, .bb-rich > h3:first-child { margin-top: 0; }
.bb-rich strong, .bb-rich b { font-weight: 500; }
.bb-rich p { margin: 0 0 1rem; }
.bb-rich ul, .bb-rich ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.bb-rich ul { list-style: disc; }
.bb-rich ol { list-style: decimal; }
.bb-rich ul ul { list-style: circle; }
.bb-rich li { margin-bottom: .375rem; }
.bb-rich li::marker { color: var(--text-muted); }
.bb-rich a[href], .bb-rich a[href] [style], .bb-rich a[href] * { color: var(--text-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
.bb-rich a[href]:hover { color: var(--accent-hover) !important; }
.help-center-faq-answer.bb-rich { font-size: .9375rem; line-height: 1.7; }
.bb-rich img, .bb-rich video, .bb-rich iframe {
  max-width: 100% !important; height: auto; border-radius: var(--radius-lg);
}
.bb-rich iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.bb-rich blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 2px solid var(--accent-solid); color: var(--text-primary) !important;
  font-size: 1.125rem;
}
.bb-rich hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 1.5rem 0; }
.bb-rich table {
  display: block; width: 100% !important; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 0 0 1rem; font-size: .9375rem;
}
.bb-rich th, .bb-rich td { border: 1px solid var(--border-subtle) !important; padding: .5rem .75rem; }
.bb-rich th { color: var(--text-primary) !important; font-weight: 500; }
.bb-rich pre, .bb-rich code {
  background-color: var(--surface-sunken) !important; color: var(--text-primary) !important;
  border-radius: var(--radius-sm); font-size: .875em;
}
.bb-rich code { padding: .125rem .375rem; }
.bb-rich pre { padding: 1rem; overflow-x: auto; }
.bb-rich [style*="font-size"] { font-size: inherit !important; }
.bb-rich [style*="width"] { max-width: 100% !important; }

@media (max-width: 575.98px) { .bb-article-title { font-size: 2rem; line-height: 1.2; } }

/* Blog kart yazar satırı (blog.html: 22px mono rozet) */
.bb-mono.bb-mono-xs { width: 22px; height: 22px; font-size: .6875rem; flex: 0 0 auto; }