/* =========================================
   BOSPHORUS BREWLINE — EXPERIENCE PAGE
   ========================================= */

.bb-main--experience {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--bb-header-height) + 18px) 24px 40px;
}

/* гарантируем ширину фоток <= 350px на этой странице */
.bb-main--experience img.bb-content-image {
  display: block;
  width: 100%;
  max-width: 350px;
  height: auto;
}

/* Базовый контейнер секций опыта */

.bb-exp-section {
  margin-top: 30px;
  padding: 26px 22px 30px;
  border-radius: 32px;
  border: 1px solid rgba(255, 244, 233, 0.18);
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.10), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.10), transparent 60%),
    rgba(6, 3, 34, 0.98);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.9);
}

/* ===============================
   SECTION 1 — HERO / GECE SAHNESİ
   =============================== */

.bb-exp-section--hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.18), transparent 60%),
    radial-gradient(circle at 100% 0, rgba(240, 89, 184, 0.22), transparent 60%),
    linear-gradient(145deg, #080225, #02000f);
}

.bb-exp-section--hero::before {
  content: "";
  position: absolute;
  inset-inline: 14%;
  top: -70px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 241, 255, 0.25), transparent 70%);
  opacity: 0.8;
  pointer-events: none;
}

.bb-exp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
}

.bb-exp-hero-copy {
  max-width: 640px;
}

.bb-exp-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 244, 233, 0.25);
  background: rgba(10, 3, 44, 0.96);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-text-soft);
}

.bb-exp-hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, var(--bb-accent-azure), #3ac7ff);
  box-shadow:
    0 0 10px rgba(70, 241, 255, 0.9),
    0 0 16px rgba(70, 241, 255, 0.5);
}

.bb-exp-hero-title {
  margin-top: 18px;
  font-size: 26px;
  line-height: 1.25;
}

.bb-exp-hero-lead {
  margin-top: 15px;
  font-size: 14px;
  color: var(--bb-text-muted);
}

.bb-exp-hero-pills {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bb-exp-hero-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 244, 233, 0.26);
  background: rgba(9, 3, 44, 0.96);
  color: var(--bb-text-soft);
}

/* hero media */

.bb-exp-hero-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-hero-main {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.26);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.92);
  animation: bbExpHeroFloat 18s ease-in-out infinite;
}

.bb-exp-hero-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bb-exp-hero-thumb {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(5, 2, 30, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.20);
}

.bb-exp-hero-thumb--bar {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.85);
}

/* hero route line */

.bb-exp-hero-route {
  margin-top: 24px;
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 244, 233, 0.24);
  background: rgba(8, 3, 40, 0.95);
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-hero-route::before {
  content: "";
  position: absolute;
  inset-inline: 16px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background-image: linear-gradient(
    90deg,
    rgba(70, 241, 255, 0.1) 0,
    rgba(70, 241, 255, 0.8) 40%,
    rgba(255, 180, 81, 0.8) 60%,
    rgba(255, 180, 81, 0.1) 100%
  );
  opacity: 0.8;
  pointer-events: none;
}

.bb-exp-hero-route-label {
  font-weight: 600;
  margin-right: 6px;
}

.bb-exp-hero-route-step {
  padding-inline: 6px;
}

.bb-exp-hero-route-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #130412;
  border: 2px solid var(--bb-accent-azure);
  box-shadow: 0 0 10px rgba(70, 241, 255, 0.9);
}

/* hero animation */

@keyframes bbExpHeroFloat {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-4px);
  }
  70% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ===============================
   SECTION 2 — AKŞAM AKIŞI
   =============================== */

.bb-exp-section--evening {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.14), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.16), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-evening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.bb-exp-evening-timeline {
  position: relative;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.bb-exp-evening-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bb-accent-azure), var(--bb-accent-amber));
  opacity: 0.7;
}

.bb-exp-evening-stage {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
}

.bb-exp-evening-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #130412;
  border: 2px solid var(--bb-accent-azure);
  box-shadow: 0 0 10px rgba(70, 241, 255, 0.9);
  margin-top: 4px;
}

.bb-exp-evening-body {
  padding: 7px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-evening-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.bb-exp-evening-time {
  font-size: 13px;
  font-family: var(--bb-font-display);
}

.bb-exp-evening-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bb-text-soft);
}

.bb-exp-evening-text {
  margin-top: 3px;
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-evening-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--bb-text-soft);
}

/* media для evening */

.bb-exp-evening-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-evening-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-evening-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-evening-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bb-exp-evening-thumb {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* ===============================
   SECTION 3 — ROTALAR / HARİTA
   =============================== */

.bb-exp-section--routes {
  background:
    radial-gradient(circle at 100% 0, rgba(240, 89, 184, 0.18), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(70, 241, 255, 0.14), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-routes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr);
  gap: 20px;
  align-items: stretch;
}

/* слева медиа */

.bb-exp-routes-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-routes-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-routes-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-routes-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bb-exp-routes-thumb {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* справа текст */

.bb-exp-routes-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-routes-title {
  font-size: 22px;
}

.bb-exp-routes-kicker {
  margin-top: 6px;
  font-size: 13px;
  color: var(--bb-text-soft);
}

.bb-exp-routes-list {
  display: grid;
  gap: 10px;
}

.bb-exp-route-card {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-route-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-route-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* ===============================
   RESPONSIVE — EXPERIENCE PAGE
   =============================== */

@media (max-width: 1024px) {
  .bb-main--experience {
    padding-inline: 18px;
  }

  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .bb-main--experience {
    padding-inline: 18px;
  }

  .bb-exp-section {
    padding-inline: 18px;
  }

  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-exp-hero-route {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .bb-main--experience {
    padding-inline: 14px;
  }

  .bb-exp-section {
    padding-inline: 14px;
    border-radius: 26px;
  }

  .bb-exp-hero-title {
    font-size: 22px;
  }

  .bb-exp-hero-pills {
    flex-direction: column;
    align-items: stretch;
  }
}
/* ===============================
   SECTION 4 — OTURMA BÖLGELERİ
   =============================== */

.bb-exp-section--seating {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.16), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255, 180, 81, 0.20), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-seating-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.bb-exp-seating-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-seating-title {
  font-size: 22px;
}

.bb-exp-seating-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-seating-zones {
  display: grid;
  gap: 10px;
}

.bb-exp-seating-zone {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-seating-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bb-text-soft);
  margin-bottom: 3px;
}

.bb-exp-seating-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* media */

.bb-exp-seating-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

bb-exp-seating-main,
.bb-exp-seating-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-seating-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-seating-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* ===============================
   SECTION 5 — CEZVE BAR
   =============================== */

.bb-exp-section--cezve {
  background:
    radial-gradient(circle at 100% 0, rgba(240, 89, 184, 0.20), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(70, 241, 255, 0.16), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-cezve-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr);
  gap: 20px;
  align-items: stretch;
}

/* media слева */

.bb-exp-cezve-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-cezve-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-cezve-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-cezve-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* текст справа */

.bb-exp-cezve-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-cezve-title {
  font-size: 22px;
}

.bb-exp-cezve-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-cezve-rituals {
  display: grid;
  gap: 10px;
}

.bb-exp-cezve-ritual {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-cezve-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-cezve-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* ===============================
   SECTION 6 — BULUŞMALAR & ATÖLYE
   =============================== */

.bb-exp-section--gatherings {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.16), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.18), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-gatherings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}

.bb-exp-gatherings-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-gatherings-title {
  font-size: 22px;
}

.bb-exp-gatherings-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-gatherings-board {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 20px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px dashed rgba(255, 244, 233, 0.28);
  display: grid;
  gap: 10px;
}

.bb-exp-gathering-item {
  padding: 7px 9px;
  border-radius: 16px;
  background: rgba(7, 2, 35, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-gathering-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-gathering-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* media справа */

.bb-exp-gatherings-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-gatherings-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-gatherings-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-gatherings-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}
@media (max-width: 1024px) {
  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid,
  .bb-exp-seating-grid,
  .bb-exp-cezve-grid,
  .bb-exp-gatherings-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid,
  .bb-exp-seating-grid,
  .bb-exp-cezve-grid,
  .bb-exp-gatherings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ===============================
   SECTION 7 — SES & IŞIK
   =============================== */

.bb-exp-section--sound {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.22), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-sound-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr);
  gap: 20px;
  align-items: stretch;
}

/* media слева */

.bb-exp-sound-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-sound-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-sound-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-sound-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bb-exp-sound-thumb {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* текст справа */

.bb-exp-sound-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-sound-title {
  font-size: 22px;
}

.bb-exp-sound-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-sound-list {
  display: grid;
  gap: 10px;
}

.bb-exp-sound-item {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-sound-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-sound-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* ===============================
   SECTION 8 — MEKÂN DETAYLARI
   =============================== */

.bb-exp-section--details {
  background:
    radial-gradient(circle at 100% 0, rgba(240, 89, 184, 0.20), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(70, 241, 255, 0.16), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}

/* текст слева */

.bb-exp-details-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-details-title {
  font-size: 22px;
}

.bb-exp-details-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-details-tags {
  display: grid;
  gap: 10px;
}

.bb-exp-details-tag {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-details-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bb-text-soft);
  margin-bottom: 3px;
}

.bb-exp-details-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* медиа справа */

.bb-exp-details-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-details-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-details-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-details-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* ===============================
   SECTION 9 — SOLO ZİYARETLER
   =============================== */

.bb-exp-section--solo {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.16), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.18), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-solo-layout {
  display: grid;
  gap: 14px;
}

.bb-exp-solo-board {
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  display: grid;
  gap: 10px;
}

.bb-exp-solo-title {
  font-size: 22px;
}

.bb-exp-solo-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-solo-lines {
  display: grid;
  gap: 8px;
}

.bb-exp-solo-item {
  padding: 7px 9px;
  border-radius: 16px;
  background: rgba(7, 2, 35, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-solo-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-solo-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* медиа снизу */

.bb-exp-solo-media {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.bb-exp-solo-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-solo-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-solo-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}
@media (max-width: 1024px) {
  .bb-main--experience {
    padding-inline: 18px;
  }

  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid,
  .bb-exp-seating-grid,
  .bb-exp-cezve-grid,
  .bb-exp-gatherings-grid,
  .bb-exp-sound-grid,
  .bb-exp-details-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .bb-exp-solo-media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .bb-main--experience {
    padding-inline: 18px;
  }

  .bb-exp-section {
    padding-inline: 18px;
  }

  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid,
  .bb-exp-seating-grid,
  .bb-exp-cezve-grid,
  .bb-exp-gatherings-grid,
  .bb-exp-sound-grid,
  .bb-exp-details-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-exp-solo-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-exp-hero-route {
    max-width: 100%;
  }
}

/* блок @media (max-width: 640px) оставь как есть */
/* ===============================
   SECTION 10 — MİSAFİR PROFİLLERİ
   =============================== */

.bb-exp-section--guests {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(255, 180, 81, 0.22), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-guests-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}

.bb-exp-guests-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-guests-title {
  font-size: 22px;
}

.bb-exp-guests-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-guests-list {
  display: grid;
  gap: 10px;
}

.bb-exp-guest-card {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-guest-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-guest-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* media справа */

.bb-exp-guests-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-guests-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-guests-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-guests-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* ===============================
   SECTION 11 — DIŞARISI & SOKAK
   =============================== */

.bb-exp-section--outside {
  background:
    radial-gradient(circle at 100% 0, rgba(240, 89, 184, 0.20), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(70, 241, 255, 0.16), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-outside-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr);
  gap: 20px;
  align-items: stretch;
}

/* media слева */

.bb-exp-outside-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-outside-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-outside-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-outside-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* текст справа */

.bb-exp-outside-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-outside-title {
  font-size: 22px;
}

.bb-exp-outside-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-outside-points {
  display: grid;
  gap: 10px;
}

.bb-exp-outside-point {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-outside-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bb-text-soft);
  margin-bottom: 3px;
}

.bb-exp-outside-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* ===============================
   SECTION 12 — FOTOĞRAF KÖŞESİ
   =============================== */

.bb-exp-section--memory {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.16), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.18), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-memory-layout {
  display: grid;
  gap: 14px;
}

.bb-exp-memory-board {
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  display: grid;
  gap: 10px;
}

.bb-exp-memory-title {
  font-size: 22px;
}

.bb-exp-memory-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-memory-lines {
  display: grid;
  gap: 8px;
}

.bb-exp-memory-item {
  padding: 7px 9px;
  border-radius: 16px;
  background: rgba(7, 2, 35, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-memory-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-memory-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* медиа снизу */

.bb-exp-memory-media {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.bb-exp-memory-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-memory-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-memory-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}
@media (max-width: 1024px) {
  .bb-main--experience {
    padding-inline: 18px;
  }

  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid,
  .bb-exp-seating-grid,
  .bb-exp-cezve-grid,
  .bb-exp-gatherings-grid,
  .bb-exp-sound-grid,
  .bb-exp-details-grid,
  .bb-exp-guests-grid,
  .bb-exp-outside-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .bb-exp-solo-media,
  .bb-exp-memory-media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .bb-main--experience {
    padding-inline: 18px;
  }

  .bb-exp-section {
    padding-inline: 18px;
  }

  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid,
  .bb-exp-seating-grid,
  .bb-exp-cezve-grid,
  .bb-exp-gatherings-grid,
  .bb-exp-sound-grid,
  .bb-exp-details-grid,
  .bb-exp-guests-grid,
  .bb-exp-outside-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-exp-solo-media,
  .bb-exp-memory-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-exp-hero-route {
    max-width: 100%;
  }
}
/* ===============================
   SECTION 13 — ÇALIŞMA AKŞAMLARI
   =============================== */

.bb-exp-section--work {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.20), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}

.bb-exp-work-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-work-title {
  font-size: 22px;
}

.bb-exp-work-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-work-lines {
  display: grid;
  gap: 10px;
}

.bb-exp-work-item {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-work-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-work-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* media справа */

.bb-exp-work-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-work-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-work-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-work-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* ===============================
   SECTION 14 — BOĞAZ EŞLEŞMELERİ
   =============================== */

.bb-exp-section--pairings {
  background:
    radial-gradient(circle at 100% 0, rgba(240, 89, 184, 0.20), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(70, 241, 255, 0.16), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-pairings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr);
  gap: 20px;
  align-items: stretch;
}

/* media слева */

.bb-exp-pairings-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-pairings-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-pairings-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-pairings-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* текст справа */

.bb-exp-pairings-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-pairings-title {
  font-size: 22px;
}

.bb-exp-pairings-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-pairings-list {
  display: grid;
  gap: 10px;
}

.bb-exp-pairing-item {
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-pairing-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-pairing-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* ===============================
   SECTION 15 — GECE KAPANIŞI
   =============================== */

.bb-exp-section--closing {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.16), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.18), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-closing-layout {
  display: grid;
  gap: 14px;
}

.bb-exp-closing-board {
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  display: grid;
  gap: 10px;
}

.bb-exp-closing-title {
  font-size: 22px;
}

.bb-exp-closing-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-closing-steps {
  display: grid;
  gap: 8px;
}

.bb-exp-closing-step {
  padding: 7px 9px;
  border-radius: 16px;
  background: rgba(7, 2, 35, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-closing-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-closing-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* медиа снизу */

.bb-exp-closing-media {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: stretch;
}

.bb-exp-closing-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-closing-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-closing-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* ===============================
   SECTION 16 — KÜÇÜK NOTLAR & SSS
   =============================== */

.bb-exp-section--notes {
  background:
    radial-gradient(circle at 100% 0, rgba(240, 89, 184, 0.20), transparent 60%),
    radial-gradient(circle at 0 100%, rgba(70, 241, 255, 0.16), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-notes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}

.bb-exp-notes-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-notes-title {
  font-size: 22px;
}

.bb-exp-notes-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-notes-board {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 20px;
  background: rgba(10, 3, 44, 0.96);
  border: 1px dashed rgba(255, 244, 233, 0.28);
  display: grid;
  gap: 8px;
}

.bb-exp-note-item {
  padding: 7px 9px;
  border-radius: 16px;
  background: rgba(7, 2, 35, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.22);
}

.bb-exp-note-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.bb-exp-note-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

/* медиа справа */

.bb-exp-notes-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-notes-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-notes-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-notes-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}

/* ===============================
   SECTION 17 — DENEYİM ÖZETİ
   =============================== */

.bb-exp-section--summary {
  background:
    radial-gradient(circle at 0 0, rgba(70, 241, 255, 0.16), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(240, 89, 184, 0.18), transparent 60%),
    rgba(7, 3, 40, 0.98);
}

.bb-exp-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: stretch;
}

.bb-exp-summary-copy {
  display: grid;
  gap: 12px;
}

.bb-exp-summary-title {
  font-size: 22px;
}

.bb-exp-summary-lead {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-summary-text {
  font-size: 13px;
  color: var(--bb-text-muted);
}

.bb-exp-summary-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* медиа справа */

.bb-exp-summary-media {
  display: grid;
  grid-template-rows: minmax(0, 1.1fr) auto;
  gap: 10px;
  justify-items: start;
}

.bb-exp-summary-main {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(8, 3, 40, 0.96);
  border: 1px solid rgba(255, 244, 233, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.9);
}

.bb-exp-summary-caption {
  padding: 8px 10px 10px;
  font-size: 11px;
  color: var(--bb-text-soft);
}

.bb-exp-summary-side {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6, 2, 35, 0.98);
  border: 1px solid rgba(255, 244, 233, 0.18);
}
@media (max-width: 1024px) {
  .bb-main--experience {
    padding-inline: 18px;
  }

  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid,
  .bb-exp-seating-grid,
  .bb-exp-cezve-grid,
  .bb-exp-gatherings-grid,
  .bb-exp-sound-grid,
  .bb-exp-details-grid,
  .bb-exp-guests-grid,
  .bb-exp-outside-grid,
  .bb-exp-notes-grid,
  .bb-exp-summary-grid,
  .bb-exp-work-grid,
  .bb-exp-pairings-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .bb-exp-solo-media,
  .bb-exp-memory-media,
  .bb-exp-closing-media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

@media (max-width: 880px) {
  .bb-main--experience {
    padding-inline: 18px;
  }

  .bb-exp-section {
    padding-inline: 18px;
  }

  .bb-exp-hero-grid,
  .bb-exp-evening-grid,
  .bb-exp-routes-grid,
  .bb-exp-seating-grid,
  .bb-exp-cezve-grid,
  .bb-exp-gatherings-grid,
  .bb-exp-sound-grid,
  .bb-exp-details-grid,
  .bb-exp-guests-grid,
  .bb-exp-outside-grid,
  .bb-exp-notes-grid,
  .bb-exp-summary-grid,
  .bb-exp-work-grid,
  .bb-exp-pairings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-exp-solo-media,
  .bb-exp-memory-media,
  .bb-exp-closing-media {
    grid-template-columns: minmax(0, 1fr);
  }

  .bb-exp-summary-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bb-exp-hero-route {
    max-width: 100%;
  }
}

/* @media (max-width: 640px) оставь как прописано раньше */