/* Design A (2026-10-29): light grey box in Manrope (the band's own font, --bike-font-finder). Tablet and phones: one
   column — text, steps as rows, full-width button. Desktop (≥1024px): text + button left, step cards right (1 : 1.25).
   No layout shift: the desktop box has a fixed minimum height and the steps a fixed card height; Arial (the fallback) is
   close to Manrope's width, so the font swap barely moves text. */
.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__box, .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__box * {
  font-family: var(--bike-font-finder);
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  padding: 1.75rem 1.375rem;
  border-radius: 20px;
  background: var(--bike-finder-bg);
  color: var(--bike-finder-ink);
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas:
      "text steps"
      "buttons steps";
    align-content: center;
    align-items: center;
    gap: 1.5rem 3.5rem;
    min-height: 21.25rem;
    padding: 3rem 3.5rem;
    border-radius: 24px;
  }
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__text {
    grid-area: text;
    align-self: end;
    gap: 1rem;
  }
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__eyebrow {
  letter-spacing: 0.14em;
  color: var(--bike-finder-eyebrow);
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__title {
  margin: 0;
  letter-spacing: -0.02em;
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__desc {
  margin: 0;
  color: var(--bike-finder-muted);
}

/* steps: rows on tablet / phones, equal cards side by side on desktop */
.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__steps {
    grid-area: steps;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 1rem;
  }
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 14px;
  background: var(--bike-white);
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__step {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
    min-height: 10.625rem;
    padding: 1.5rem 1.375rem;
    border-radius: 18px;
  }
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__num {
  flex: none;
  color: var(--bike-finder-num);
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__num {
    letter-spacing: -0.02em;
  }
}

/* button: full width and 50px on tablet / phones, 52px pill on desktop (red #dc1e35 of the design) */
.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__buttons {
    grid-area: buttons;
    align-self: start;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-btn.bike-finder__cta {
  min-height: 3.125rem;
  border-radius: var(--bike-radius-pill);
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-btn--primary.bike-finder__cta {
  border-color: var(--bike-finder-cta);
  background: var(--bike-finder-cta);
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__cta .bike-icon {
  font-size: 1.125rem;
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-btn.bike-finder__cta {
    min-height: 3.25rem;
    padding: 0 1.625rem;
  }
}

/* first question as cards → /bisiklet-secici?tur=… */
.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__cards {
  display: grid;
  grid-template-columns: repeat(var(--finder-cols-m, 2), minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__cards {
    grid-template-columns: repeat(var(--finder-cols-t, 3), minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__cards {
    grid-template-columns: repeat(var(--finder-cols-d, 6), minmax(0, 1fr));
  }
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
  min-height: 4.5rem;
  padding: 0.875rem 0.75rem;
  border: 1px solid var(--bike-line);
  border-radius: var(--bike-radius-card);
  background: var(--bike-white);
  color: var(--bike-text);
  text-align: center;
  text-decoration: none;
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__card:hover {
  border-color: var(--bike-navy);
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__card-img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 8rem;
  aspect-ratio: 16 / 10;
}

.cc_J2aTpvNHJ1_Jtot0AzS1m .bike-finder__card-desc {
  color: var(--bike-text-secondary);
}