/* ==========================================================================
   Etkinlik detay (site/event/detail.blade.php)
   Tasarım: etkinlik.html — başlık şeridi, ilan satırları, harita alanı.
   Legacy style.css'teki .event-detail-page / .event-ticket-card / #stadiumMap
   kurallarını bu dosya daha spesifik seçicilerle nötralize eder.
   ========================================================================== */

.bb-ed .min-w-0 { min-width: 0; }

/* --- Legacy nötralizasyon --------------------------------------------- */
body.event-detail-page-body { padding-top: 0 !important; }
.event-detail-page.bb-ed { padding: 0; background: var(--surface-canvas); color: var(--text-primary); }

/* --- Başlık şeridi ------------------------------------------------------ */
.bb-ed .bb-ed-date { min-width: 52px; padding: .5rem .625rem; }
.bb-ed .bb-ed-date strong { font-size: 1.25rem; font-weight: 500; }
.bb-ed-crumbs a { text-decoration: none; }
.bb-ed-crumbs a:hover { color: var(--text-primary) !important; }

@media (max-width: 575.98px) {
  .bb-ed .bb-ed-date { display: none !important; }
  .bb-ed h1.h3 { font-size: 1.375rem; }
}

/* --- İlan listesi -------------------------------------------------------- */
.bb-ed-toolbar #totalTicketsCount { color: var(--text-primary); }

.bb-ed .event-tickets.bb-ed-tickets {
  display: grid;
  gap: .5rem;
  padding: 0;
  position: relative;
}

.bb-ed .event-ticket-card.bb-ed-ticket {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto auto auto;
  grid-template-areas: "accent main stock price cta";
  align-items: center;
  column-gap: 1rem;
  row-gap: .5rem;
  margin: 0;
  padding: .875rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: visible;
  position: relative;
  flex-direction: initial;
  color: var(--text-primary);
  transition: border-color .15s ease;
}
.bb-ed .event-ticket-card.bb-ed-ticket:hover { border-color: var(--border-default); }

.bb-ed-ticket-accent {
  grid-area: accent;
  align-self: stretch;
  width: 3px;
  min-height: 44px;
  border-radius: 2px;
  background: var(--accent-color, var(--accent-solid));
}
.bb-ed-ticket-main { grid-area: main; min-width: 0; }
.bb-ed-ticket-sub { font-size: .9375rem; color: var(--text-primary); margin-top: .125rem; }
.bb-ed-ticket-stock { grid-area: stock; text-align: center; white-space: nowrap; }
.bb-ed-ticket-sub:empty { display: none; }
.bb-ed-ticket-price { grid-area: price; text-align: right; white-space: nowrap; }
.bb-ed-ticket-cta { grid-area: cta; justify-self: end; }
.bb-ed-ticket-cta .btn { white-space: nowrap; }

.bb-ed .event-ticket-card.bb-ed-ticket.ticket-sold-out { opacity: .6; background: var(--surface-raised); }
.bb-ed .event-ticket-card.bb-ed-ticket.ticket-sold-out .bb-ed-ticket-accent { background: var(--border-default); }

@media (max-width: 575.98px) {
  .bb-ed .event-ticket-card.bb-ed-ticket {
    grid-template-columns: 3px minmax(0, 1fr) auto;
    grid-template-areas:
      "accent main price"
      "accent main cta";
    column-gap: .75rem;
    padding: .75rem;
  }
  .bb-ed-ticket-price { align-self: end; }
  .bb-ed-ticket-cta { align-self: start; }
  .bb-ed-ticket-price .text-price { font-size: 1.0625rem; }
}

/* Etkinlik makalesi önizleme */
.bb-ed-article-preview {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bb-ed-article-card .btn-ghost { margin-left: -1rem; }

/* Makale / notlar zengin metin */
.bb-ed-article { color: var(--text-secondary); font-size: .9375rem; line-height: 1.7; }
.bb-ed-article h1, .bb-ed-article h2, .bb-ed-article h3,
.bb-ed-article h4, .bb-ed-article h5, .bb-ed-article h6,
.bb-ed-article .category, .bb-ed-article .match-title {
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.3;
  margin: 1.25rem 0 .5rem;
}
.bb-ed-article > :first-child { margin-top: 0; }
.bb-ed-article h1 { font-size: 1.5rem; }
.bb-ed-article h2 { font-size: 1.3125rem; }
.bb-ed-article h3 { font-size: 1.125rem; }
.bb-ed-article h4, .bb-ed-article h5, .bb-ed-article h6 { font-size: 1rem; }
.bb-ed-article p { margin-bottom: .875rem; color: var(--text-secondary); }
.bb-ed-article p:last-child { margin-bottom: 0; }
.bb-ed-article strong, .bb-ed-article b { color: var(--text-primary); font-weight: 500; }
.bb-ed-article a { color: var(--text-accent); text-decoration: none; }
.bb-ed-article a:hover { text-decoration: underline; }
.bb-ed-article ul, .bb-ed-article ol { padding-left: 1.25rem; margin-bottom: .875rem; }
.bb-ed-article li { margin-bottom: .375rem; }
.bb-ed-article img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.bb-ed-article table { max-width: 100%; display: block; overflow-x: auto; }
.bb-ed-article * { background-color: transparent !important; }

/* --- Harita alanı ------------------------------------------------------ */
.bb-ed .bb-ed-map {
  position: relative;
  height: 300px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (min-width: 576px) { .bb-ed .bb-ed-map { height: 380px; } }
@media (min-width: 992px) {
  .bb-ed .bb-ed-map {
    position: sticky;
    top: 1rem;
    height: calc(100vh - 2rem);
    min-height: 480px;
    max-height: 920px;
  }
}

.bb-ed #stadiumMap.bb-ed-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}
.bb-ed #stadiumMap.bb-ed-map-canvas:active { cursor: grabbing; }
.bb-ed #stadiumMap svg {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.bb-ed #stadiumMap .alert { margin: 1rem; }

.bb-ed-map-controls {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 5;
  display: flex;
  gap: .375rem;
  padding: .25rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
}
.bb-ed-map-controls .bb-icon-btn { width: 32px; height: 32px; border-color: transparent; }
.bb-ed-map-controls .bb-icon-btn:hover { background: var(--surface-overlay); color: var(--text-accent); }

/* Harita tooltip'i (bölüm min fiyat) */
.tooltip { --bs-tooltip-bg: var(--surface-inverse); --bs-tooltip-color: var(--text-inverse); }

/* --- Offcanvas (notlar + filtre) --------------------------------------- */
.offcanvas.bb-ed-offcanvas { width: min(420px, 90vw); }
.bb-ed-offcanvas .offcanvas-header { padding: 1rem 1.25rem; }
.bb-ed-offcanvas .offcanvas-title { font-weight: 500; }
#eventFilterOffcanvas.bb-ed-offcanvas .offcanvas-body {
  background: transparent;
  padding: 1.25rem;
  display: block;
  overflow-y: auto;
}
.bb-ed-filter-group { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.bb-ed-filter-group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.bb-ed-offcanvas .filter-section-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .25rem 0; margin: 0; background: none; border: 0; color: var(--text-muted);
}
.bb-ed-offcanvas .filter-section-toggle:hover { color: var(--text-primary); }
.bb-ed-offcanvas .filter-section-toggle .bb-foot-title { color: inherit; }
.bb-ed-offcanvas .filter-toggle-icon { transition: transform .2s ease; }
.bb-ed-offcanvas .filter-section-toggle[aria-expanded="true"] .filter-toggle-icon { transform: rotate(180deg); }
.bb-ed-offcanvas .bb-chip .category-check-icon,
.bb-ed-offcanvas .bb-chip .category-check-icon-checked { width: .875rem; text-align: initial; margin: 0; }
.bb-ed-offcanvas .bb-chip.active .category-check-icon-checked { color: var(--text-accent); }
.bb-ed-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--surface-raised);
}

/* --- Yükleniyor ekranı ------------------------------------------------- */
.event-loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--surface-canvas) !important;
  color: var(--text-primary);
  z-index: 9999 !important;
  overflow: hidden;
  transition: opacity .4s ease-out;
}
.event-loading-overlay.hidden { opacity: 0; pointer-events: none; }

.event-loading-content {
  width: 100%;
  max-width: 640px;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  text-align: center;
}
.event-loading-info { display: flex; align-items: center; justify-content: center; gap: 1.25rem; width: 100%; }
.event-loading-date {
  display: flex; flex-direction: column; align-items: center; flex: 0 0 auto;
  min-width: 64px; padding: .5rem .75rem; line-height: 1.15;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.event-loading-day { font-size: 1.75rem; font-weight: 500; color: var(--text-primary); }
.event-loading-month { font-size: .6875rem; letter-spacing: .06em; color: var(--text-muted); }
.event-loading-time { font-size: .75rem; color: var(--text-secondary); margin-top: .125rem; }
.event-loading-match { display: flex; flex-direction: column; gap: .25rem; text-align: left; min-width: 0; }
.event-loading-league { font-size: .71875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.event-loading-title { font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--text-primary); }
.event-loading-venue { font-size: .8125rem; color: var(--text-secondary); }

.event-loading-progress-container {
  width: 100%; max-width: 480px; height: 4px;
  background: var(--surface-overlay); border-radius: var(--radius-full); overflow: hidden;
}
.event-loading-progress-bar {
  height: 100%; width: 0; background: var(--accent-solid); border-radius: var(--radius-full);
  animation: bbEdLoadingProgress 2.5s ease-in-out forwards;
}
.event-loading-steps { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.loading-step {
  display: flex; align-items: center; gap: .5rem; color: var(--text-secondary); font-size: .8125rem;
  opacity: 0; animation: bbEdFadeInUp .4s ease-out forwards;
}
.loading-step .bb-ico { color: var(--text-accent); }
.loading-step:nth-child(1) { animation-delay: .5s; }
.loading-step:nth-child(2) { animation-delay: 1s; }
.event-loading-messages { display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.event-loading-label { font-size: .71875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-accent); }
.event-loading-main-text { font-size: 1.375rem; font-weight: 500; color: var(--text-primary); }
.event-loading-description { font-size: .8125rem; color: var(--text-secondary); max-width: 44ch; }

@keyframes bbEdLoadingProgress { from { width: 0; } to { width: 100%; } }
@keyframes bbEdFadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
  .event-loading-info { flex-direction: column; }
  .event-loading-match { text-align: center; align-items: center; }
  .event-loading-title { font-size: 1.25rem; }
  .event-loading-main-text { font-size: 1.125rem; }
  .event-loading-steps { gap: 1rem; }
}

/* --- Canlı izleyici toast'u -------------------------------------------- */
.event-viewer-toast { min-width: 280px; max-width: calc(100vw - 2rem); }

/* Saha haritası blokları (bbMap): etiketler tıklamayı yutmasın, bloklar tıklanabilir, seçili blok belirgin */
.bb-ed #stadiumMap svg text, .bb-ed #stadiumMap svg tspan { pointer-events: none; user-select: none; }
.bb-ed #stadiumMap svg [data-zoneid] { cursor: pointer; }
.bb-ed #stadiumMap svg [data-zoneid] path, .bb-ed #stadiumMap svg [data-zoneid] rect,
.bb-ed #stadiumMap svg [data-zoneid] polygon, .bb-ed #stadiumMap svg [data-zoneid] polyline,
.bb-ed #stadiumMap svg [data-zoneid] ellipse, .bb-ed #stadiumMap svg [data-zoneid] circle { transition: fill .15s ease, filter .15s ease, stroke .15s ease; }
.bb-ed #stadiumMap svg [data-zoneid]:hover path, .bb-ed #stadiumMap svg [data-zoneid]:hover rect,
.bb-ed #stadiumMap svg [data-zoneid]:hover polygon, .bb-ed #stadiumMap svg [data-zoneid]:hover ellipse { filter: brightness(1.08) saturate(1.15); }
.bb-ed #stadiumMap svg .bb-map-selected path, .bb-ed #stadiumMap svg .bb-map-selected rect,
.bb-ed #stadiumMap svg .bb-map-selected polygon, .bb-ed #stadiumMap svg .bb-map-selected polyline,
.bb-ed #stadiumMap svg .bb-map-selected ellipse, .bb-ed #stadiumMap svg .bb-map-selected circle {
  stroke: var(--text-primary, #161617); stroke-width: 2.5px; stroke-linejoin: round; paint-order: stroke; filter: none;
}
.bb-ed #stadiumMap svg .bb-map-selected text { font-weight: 700; }