/* Ana sayfa hero panelleri — mobil (≤899px) */
@media (max-width: 899px) {
  .hero-grid.hero-grid--media {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-content: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
  }

  .hero-media-stack {
    display: contents !important;
  }

  .hero-media-stack > .feature-card:not(.compact) {
    display: none !important;
  }

  .hero-media-stack > .panel.hero-card,
  .hero-media-stack > .panel.feature-card.compact {
    box-sizing: border-box !important;
    width: 33% !important;
    min-width: 33% !important;
    max-width: 200px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    justify-self: start !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .hero-media-stack > .panel.hero-card.has-hero-media {
    padding: 0 !important;
    justify-content: center !important;
  }

  .hero-media-stack .hero-card__media {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .hero-media-stack .hero-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center;
  }

  .hero-media-stack .hero-copy,
  .hero-media-stack .feature-meta {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: stretch !important;
    text-align: left;
  }

  .hero-media-stack .hero-copy h1 {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.22 !important;
    max-width: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-media-stack .feature-title {
    font-size: 16px !important;
    margin: 0 0 3px !important;
    line-height: 1.05;
  }

  .hero-media-stack .active-count {
    font-size: 10px !important;
    gap: 4px;
    line-height: 1.15;
  }

  .hero-media-stack .active-count .dot {
    width: 6px;
    height: 6px;
  }

  .hero-media-stack .bubble-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 6px !important;
  }

  .hero-media-stack .feature-card.compact .bubble-icon {
    margin-bottom: 4px !important;
  }

  .hero-media-stack .arrow-round {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
  }

  .hero-media-stack .arrow-round svg {
    width: 14px;
    height: 14px;
  }

  .hero-media-stack .feature-card.has-custom-bg,
  .hero-media-stack .feature-card.has-mobile-bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .hero-media-stack .feature-card:not(.sport-panel).has-custom-bg,
  .hero-media-stack .feature-card:not(.sport-panel).has-mobile-bg {
    background-image:
      linear-gradient(180deg, rgba(12, 8, 36, .1) 0%, rgba(12, 8, 36, .72) 100%),
      var(--home-bg-feature-card-mobile, var(--home-bg-feature-card));
  }

  .hero-media-stack .feature-card.sport-panel.has-custom-bg,
  .hero-media-stack .feature-card.sport-panel.has-mobile-bg {
    background-image:
      linear-gradient(180deg, rgba(12, 8, 36, .1) 0%, rgba(12, 8, 36, .72) 100%),
      var(--home-bg-sport-panel-mobile, var(--home-bg-sport-panel));
  }

  .hero-media-stack .hero-copy h1,
  .hero-media-stack .feature-title,
  .hero-media-stack .active-count {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .72);
  }
}

@media (max-width: 640px) {
  .hero-media-stack > .panel.hero-card,
  .hero-media-stack > .panel.feature-card.compact {
    padding: 14px !important;
    min-height: 0 !important;
  }

  .hero-media-stack > .panel.hero-card.has-hero-media {
    padding: 0 !important;
  }

  .hero-media-stack .hero-copy h1 {
    font-size: 20px !important;
  }

  .hero-media-stack .hero-title-main,
  .hero-media-stack .hero-title-sub,
  .hero-media-stack .hero-title-tail {
    display: inline !important;
  }
}

@media (min-width: 900px) {
  .hero-media-stack {
    display: contents;
  }

  .hero-card.has-hero-media {
    min-height: 232px;
  }
}