/* ==========================================================================
   Biletstore — Anasayfa (site/homepage + partials) ve paylaşılan etkinlik kartı
   (site/partials/event-grid-items: kategori/takım/turnuva sayfalarında da yüklenir).
   Yalnızca token renkleri; gölge yok.
   ========================================================================== */

/* --- Skeleton (legacy açık gri shimmer yerine token) -------------------- */
.skeleton-hidden { display: none !important; }
.bb-home .skeleton {
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-overlay) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: bb-shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
@keyframes bb-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bb-skel-card {
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.bb-home .bb-skel-media { aspect-ratio: 16 / 9; border-radius: 0; }
.bb-skel-body { padding: 1rem 1.125rem 1.125rem; display: grid; gap: .5rem; }
.bb-skel-line { height: 14px; width: 85%; }
.bb-skel-line-sm { height: 10px; width: 35%; }
.bb-skel-line-md { height: 12px; width: 60%; }
.bb-home .bb-skel-cat { height: 52px; border-radius: var(--radius-full); }

/* --- Hero ---------------------------------------------------------------- */
.bb-home-hero { padding: 0; overflow: visible; }
.bb-home-hero .bb-hero-backdrop,
.bb-home-hero .bb-hero-scrim { overflow: hidden; }
.bb-home-hero .bb-hero-inner { position: relative; padding-bottom: 3rem; }
.bb-home-hero-head { max-width: 720px; }
.bb-home-ticket { max-width: 880px; z-index: 30; }
.bb-home-ticket .bb-ticket-main { display: flex; flex-direction: column; justify-content: center; }
.bb-home-search-wrap { position: relative; width: 100%; }
.bb-home-search { cursor: text; }
.bb-home .bb-home-search .search-input {
  width: auto; height: auto; padding: .25rem 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--text-primary); font-size: 1rem; font-family: inherit;
}

/* Arama sonuç açılır listesi (JS içerik üretir; sınıflar korunur) */
.bb-home #hero-search-results.search-results-dropdown {
  top: calc(100% + .5rem); margin-top: 0;
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: none; max-height: 420px; text-align: left;
}
.bb-home #hero-search-results .search-section { padding: .75rem; border-bottom: 1px solid var(--border-subtle); }
.bb-home #hero-search-results .search-section:last-child { border-bottom: 0; }
.bb-home #hero-search-results .search-section h3 {
  font-size: .71875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: .25rem .5rem .5rem;
}
.bb-home #hero-search-results .search-item {
  padding: .5rem; margin: 0; border-radius: var(--radius-md);
  color: var(--text-primary); text-decoration: none;
}
.bb-home #hero-search-results .search-item:hover { background: var(--surface-overlay); }
.bb-home #hero-search-results .search-item-icon,
.bb-home #hero-search-results .search-item-icon.event,
.bb-home #hero-search-results .search-item-icon.team,
.bb-home #hero-search-results .search-item-icon.league {
  width: 36px; height: 36px; margin-right: .75rem; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--text-accent); font-size: .875rem;
}
.bb-home #hero-search-results .search-item-title { font-size: .9375rem; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.bb-home #hero-search-results .search-item-subtitle { font-size: .75rem; color: var(--text-secondary); }
.bb-home #hero-search-results .search-empty,
.bb-home #hero-search-results .search-loading { color: var(--text-muted); padding: 1.5rem 1rem; }
.bb-home #hero-search-results .search-empty i { font-size: 1.75rem; color: var(--border-strong); }

/* Hero altı: öne çıkan etkinlik kaydırıcısı */
.bb-home-slider { position: relative; margin-top: 2.5rem; }
.bb-home .bb-home-slider .event-carousel-swiper {
  padding-bottom: 2.25rem; margin: 0 -.5rem;
}
.bb-home .bb-home-slider .event-carousel-swiper .swiper-wrapper { align-items: stretch; }
.bb-home .bb-home-slider .event-carousel-swiper .swiper-slide {
  height: auto; padding: 0 .5rem; transition: none;
}
/* style.css'teki sabit %25 genişliği Swiper kırılımlarıyla eşle */
@media (min-width: 1600px) { .bb-home .bb-home-slider .event-carousel-swiper .swiper-slide { width: 25% !important; } }
@media (min-width: 768px) and (max-width: 1599.98px) { .bb-home .bb-home-slider .event-carousel-swiper .swiper-slide { width: 33.333% !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .bb-home .bb-home-slider .event-carousel-swiper .swiper-slide { width: 50% !important; } }
@media (max-width: 575.98px) { .bb-home .bb-home-slider .event-carousel-swiper .swiper-slide { width: 100% !important; } }
.bb-home .bb-home-slider .carousel-dots.swiper-pagination { bottom: 0; gap: .375rem; }
.bb-home .bb-home-slider .carousel-dots .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: var(--radius-full); margin: 0;
  background: var(--border-default); opacity: 1;
}
.bb-home .bb-home-slider .carousel-dots .swiper-pagination-bullet-active {
  width: 20px; background: var(--accent-solid);
}

/* --- Filtre çipleri (Tümü / Popüler) ------------------------------------ */
/* JS tıklamada inline arka plan/renk yazar; tasarım renkleri korunur */
.bb-home-filters { scrollbar-width: none; }
.bb-home-filters::-webkit-scrollbar { display: none; }
.bb-home .bb-home-filters .bb-chip.cat-btn {
  width: auto; height: auto; flex-direction: row; gap: .5rem;
  padding: .5rem 1rem; border-width: 1px; border-radius: var(--radius-full);
  background-color: var(--surface-raised) !important; border-color: var(--border-subtle) !important;
  color: var(--text-secondary); transform: none; box-shadow: none; opacity: 1;
}
.bb-home .bb-home-filters .bb-chip.cat-btn:hover { color: var(--text-primary); border-color: var(--border-default) !important; }
.bb-home .bb-home-filters .bb-chip.cat-btn.active {
  background-color: var(--accent-soft) !important; border-color: var(--accent-solid) !important; color: var(--text-accent);
}
.bb-home .bb-home-filters .bb-chip.cat-btn span {
  font-family: inherit; font-size: .8125rem; font-weight: 400; color: inherit !important;
}
#event-grid-section { transition: opacity .15s ease; }

/* --- Etkinlik kartı (event-grid-items, tüm sayfalar) --------------------- */
a.bb-event-col { display: block; color: var(--text-primary); text-decoration: none; }
a.bb-event-col:hover { color: var(--text-primary); }
/* İlk yüklemede kartlar display:contents sarmalayıcı içinde: .row > * kurallarını uygula */
.row > #event-grid-content > * {
  flex-shrink: 0; max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
.bb-event-card .bb-event-date span { text-transform: uppercase; }
.bb-event-card.grid-card {
  width: auto; max-width: none; height: 100%;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: none; transform: none; cursor: pointer;
  transition: border-color .15s ease;
}
.bb-event-card.grid-card:hover { box-shadow: none; transform: none; border-color: var(--border-default); }
.bb-event-card .bb-event-media { overflow: hidden; }
.bb-event-card .bb-event-demand { position: absolute; left: .75rem; bottom: .75rem; }
.bb-event-actions { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .375rem; z-index: 2; }
.bb-event-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: var(--radius-full);
  background: var(--surface-raised);
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  border: 1px solid var(--border-subtle); color: var(--text-primary);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.bb-event-action:hover { background: var(--surface-overlay); border-color: var(--border-default); }
.bb-event-action i { font-size: .8125rem; line-height: 1; color: var(--text-primary); }
.bb-event-card .bb-event-title { color: var(--text-primary); }

/* --- Promo kartları ------------------------------------------------------ */
.bb-promo .bb-promo-media { aspect-ratio: 19 / 10; }
.bb-promo .bb-promo-media img { transition: none; }
.bb-promo-cta { margin-top: auto; padding-top: .5rem; font-size: .8125rem; color: var(--text-accent); }

/* --- Kategoriler --------------------------------------------------------- */
.bb-home-categories .bb-cat { min-width: 0; }
.bb-home-categories .bb-cat-fa { width: 1.125rem; text-align: center; font-size: 1rem; color: var(--text-accent); flex: 0 0 auto; }

/* --- Özellik / güven kartları ------------------------------------------- */
.bb-home-features .bb-trust .h5 { color: var(--text-primary); }

@media (max-width: 767.98px) {
  .bb-home-hero .bb-hero-inner { padding-bottom: 2rem; }
  .bb-home-slider { margin-top: 1.75rem; }
  .bb-home-filters { width: 100%; }
}