/* ==========================================================================
   Biletstore — Bileşen kiti (Figma bileşenleriyle bire bir)
   Header / Bilet · Footer · Event Card · Schedule Row · Listing Row
   Media Card · Ticket (hero arama) · Mobile Top Bar · Mobile Tab Bar
   ========================================================================== */

/* --- Üst bar: Header / Bilet --------------------------------------------- */
.bb-header { background: var(--surface-canvas); border-bottom: 1px dashed var(--border-strong); }
.bb-header .navbar-brand { display: inline-flex; align-items: center; }
.bb-header .bb-logo { height: 40px; width: auto; display: block; }
.bb-nav-link {
  color: var(--text-secondary); text-decoration: none; font-size: .9375rem; padding: .5rem 0;
}
.bb-nav-link:hover, .bb-nav-link.active { color: var(--text-primary); }
.bb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  border: 1px solid var(--border-default); background: transparent; color: var(--text-primary);
}
.bb-icon-btn:hover { background: var(--surface-overlay); }

/* --- Hero: bilet biçimli arama kartı ------------------------------------- */
.bb-hero { background: var(--surface-canvas); position: relative; overflow: hidden; }
.bb-hero-backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bb-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(22,22,23,.55) 0%, rgba(22,22,23,.45) 40%,
    rgba(22,22,23,.62) 72%, var(--surface-canvas) 100%);
}
/* Light temada fotoğraf açık scrim altında: koyu metin okunur kalır */
[data-theme="light"] .bb-hero-scrim {
  background: linear-gradient(180deg,
    rgba(236,236,241,.78) 0%, rgba(236,236,241,.70) 40%,
    rgba(236,236,241,.84) 72%, var(--surface-canvas) 100%);
}
[data-theme="light"] .bb-hero { border-bottom: 1px solid var(--border-subtle); }
[data-theme="light"] .bb-hero h1 { text-shadow: none; }
.bb-hero > .container, .bb-hero > .container-xxl { position: relative; }
.bb-hero-inner { padding-top: 5.5rem; padding-bottom: 4rem; }
@media (max-width: 767.98px) { .bb-hero-inner { padding-top: 2.5rem; padding-bottom: 2rem; } }
.bb-hero h1 { text-shadow: 0 1px 24px rgba(0,0,0,.35); }

.bb-ticket {
  position: relative; display: flex; align-items: stretch;
  background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
}
.bb-ticket-main { flex: 1; min-width: 0; padding: 1.5rem 1.75rem; }
.bb-ticket-perf {
  position: relative; width: 24px; flex: 0 0 24px;
  background-image: radial-gradient(circle, var(--border-strong) 2px, transparent 2.5px);
  background-size: 100% 16px; background-position: center;
}
.bb-ticket-perf::before, .bb-ticket-perf::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-canvas); border: 0;
}
.bb-ticket-perf::before { top: -15px; }
.bb-ticket-perf::after  { bottom: -15px; }
.bb-ticket-stub {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1.5rem;
}
@media (max-width: 767.98px) {
  .bb-ticket { flex-direction: column; }
  .bb-ticket-main { padding: 1.125rem; }
  .bb-ticket-perf {
    width: auto; height: 24px; flex: 0 0 24px;
    background-image: radial-gradient(circle, var(--border-strong) 2px, transparent 2.5px);
    background-size: 16px 100%;
  }
  .bb-ticket-perf::before, .bb-ticket-perf::after { top: 50%; left: auto; transform: translateY(-50%); }
  .bb-ticket-perf::before { left: -15px; }
  .bb-ticket-perf::after  { right: -15px; left: auto; }
  .bb-ticket-stub { padding: 1rem 1.125rem 1.25rem; }
  .bb-ticket-stub .btn { width: 100%; }
}

/* --- Event Card (görselli etkinlik kartı) -------------------------------- */
.bb-event-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
}
.bb-event-card:hover { border-color: var(--border-default); }
.bb-event-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-overlay); }
.bb-event-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-event-date {
  position: absolute; top: .75rem; left: .75rem; min-width: 46px;
  display: flex; flex-direction: column; align-items: center; padding: .375rem .5rem;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); line-height: 1.1;
}
.bb-event-date strong { font-size: 1.125rem; font-weight: 600; }
.bb-event-date span { font-size: .6875rem; color: var(--text-muted); letter-spacing: .04em; }
.bb-event-body { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.125rem 1.125rem; flex: 1; }
.bb-event-league { display: inline-flex; align-items: center; gap: .5rem; font-size: .71875rem; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; }
.bb-event-league::before { content: ""; width: 3px; height: 11px; background: var(--accent-solid); border-radius: 2px; }
.bb-event-title { font-size: 1rem; font-weight: 500; margin: .125rem 0 0; }
.bb-event-venue { font-size: .8125rem; color: var(--text-secondary); }
.bb-event-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .75rem; }
.bb-event-price small { display: block; font-size: .6875rem; color: var(--text-muted); }

/* --- Schedule Row (liste satırı) ---------------------------------------- */
.bb-list { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.bb-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit;
}
.bb-list .bb-row:last-child { border-bottom: 0; }
.bb-row:hover { background: var(--surface-overlay); }
.bb-row-date {
  flex: 0 0 auto; width: 56px; text-align: center; line-height: 1.15;
  border-right: 1px solid var(--border-subtle); padding-right: .75rem;
}
.bb-row-date small { display: block; font-size: .6875rem; color: var(--text-muted); }
.bb-row-date strong { display: block; font-size: 1.25rem; font-weight: 600; }
.bb-row-main { flex: 1; min-width: 0; }
.bb-row-title { font-size: 1rem; font-weight: 500; }
.bb-row-meta { font-size: .8125rem; color: var(--text-secondary); }
.bb-row-price { text-align: right; white-space: nowrap; }
.bb-row-price small { display: block; font-size: .6875rem; color: var(--text-muted); }
.bb-row-go { color: var(--text-accent); flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .bb-row { padding: .875rem 1rem; gap: .75rem; }
  .bb-row-date { width: 44px; padding-right: .625rem; }
  .bb-row-date strong { font-size: 1.0625rem; }
  .bb-row-title { font-size: .9375rem; }
  .bb-row-meta { font-size: .71875rem; }
}

/* --- Takım kutusu / kategori pill ---------------------------------------- */
.bb-tile {
  display: flex; align-items: center; gap: .75rem; height: 100%;
  padding: 1rem 1.125rem; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
}
.bb-tile:hover { border-color: var(--border-default); }
.bb-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--text-accent);
  font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
}
.bb-cat {
  display: flex; align-items: center; gap: .625rem; width: 100%;
  padding: .875rem 1.125rem; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
  text-decoration: none; color: var(--text-primary); font-size: .9375rem;
}
.bb-cat:hover { border-color: var(--border-default); }
.bb-cat .bb-ico { color: var(--text-accent); }

/* --- Güven kartı --------------------------------------------------------- */
.bb-trust { display: flex; gap: .875rem; padding: 1.25rem; height: 100%; }
.bb-trust .bb-ico { color: var(--text-accent); margin-top: .1875rem; }

/* --- Footer -------------------------------------------------------------- */
.bb-footer { background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); }
.bb-footer a { color: var(--text-secondary); text-decoration: none; font-size: .8125rem; }
.bb-footer a:hover { color: var(--text-primary); }
.bb-footer .bb-logo { height: 36px; width: auto; }
.bb-foot-title { font-size: .71875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem; }
.bb-trust-strip { display: flex; gap: .75rem; }
.bb-trust-strip > div {
  flex: 1; display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.125rem; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}

/* --- Mobil alt tab bar --------------------------------------------------- */
.bb-tabbar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-around;
  padding: .5rem .75rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--surface-raised); border-top: 1px solid var(--border-subtle);
}
.bb-tab { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--text-muted); text-decoration: none; font-size: .6875rem; }
.bb-tab.active { color: var(--text-accent); }

/* --- Tema anahtarı (header) ---------------------------------------------- */
/* Dark temada güneş (light'a geç), light temada ay (dark'a geç) */
.bb-theme-btn .bb-theme-ico-moon { display: none; }
[data-theme="light"] .bb-theme-btn .bb-theme-ico-sun { display: none; }
[data-theme="light"] .bb-theme-btn .bb-theme-ico-moon { display: block; }

/* --- Sekmeler (liste/etkinlik) ------------------------------------------- */
.bb-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.bb-tab-link {
  position: relative; white-space: nowrap; text-decoration: none;
  color: var(--text-secondary); font-size: .9375rem; padding: .75rem 0 .875rem;
}
.bb-tab-link:hover { color: var(--text-primary); }
.bb-tab-link.active { color: var(--text-primary); }
.bb-tab-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-solid); border-radius: 2px;
}

/* --- Bilgi sayfası metin ölçüsü ------------------------------------------ */
.bb-doc p, .bb-doc li { max-width: 72ch; }

/* --- Segment kontrolü (Giriş/Kayıt, Yaklaşan/Geçmiş, Bireysel/Kurumsal) --- */
.bb-seg {
  display: flex; gap: .25rem; padding: .25rem;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
}
.bb-seg-item {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: .5625rem 1rem; border: 1px solid transparent; border-radius: var(--radius-full);
  font-size: .9375rem; font-weight: 500; line-height: 1.4;
  color: var(--text-secondary); text-decoration: none; background: transparent; cursor: pointer;
}
.bb-seg-item:hover { color: var(--text-primary); }
.bb-seg-item.active {
  color: var(--text-primary); background: var(--surface-raised); border-color: var(--border-default);
}

/* --- Link sütunları (sayfa altı) ----------------------------------------- */
.bb-linklist a {
  color: var(--text-secondary); text-decoration: none; font-size: .875rem; line-height: 1.6;
}
.bb-linklist a:hover { color: var(--text-primary); }

/* --- Görsel üstündeki rozetler: her zaman okunur ------------------------- */
.bb-event-media .bb-badge {
  background: rgba(18,18,20,.78); color: #fff; border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bb-event-media .bb-badge-accent { background: var(--accent-solid); color: #fff; border-color: transparent; }

/* Duyuru lightbox */
.bb-announce-media { height: 260px; object-fit: cover; }
@media (max-width: 575.98px) { .bb-announce-media { height: 190px; } }

/* Sekme filtreleri buton olarak kullanılıyor; buton varsayılanları sıfırlanır */
button.bb-tab-link { background: none; border: 0; font: inherit; cursor: pointer; }
button.bb-tab-link:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Stripe Payment Element yer tutucusu — alanların dizilimi Stripe'a ait */
.bb-stripe { display: grid; gap: .5rem; }
.bb-stripe-row { display: flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .625rem .75rem; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-sunken); font-size: .9375rem; }
.bb-stripe-split { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bb-stripe-brands { display: inline-flex; gap: 4px; }
.bb-stripe-brands i { width: 26px; height: 17px; border-radius: 3px; background: var(--surface-overlay);
  border: 1px solid var(--border-subtle); display: block; }

/* Checkout özet kartı uzun formlarda görünür kalsın */
@media (min-width: 992px) { .bb-sticky-summary { position: sticky; top: 1.5rem; } }