/* =========================================================
   Responsive overrides
   ========================================================= */

/* ---- Normal desktop: 992–1169px ---- */
@media (min-width: 992px) and (max-width: 1169px) {
  .music-features-pro {
    left: 0;
  }
}

/* ---- Tablet: 768–991px ---- */
@media (min-width: 768px) and (max-width: 991px) {

  /* Header & hero */
  .music-header-area {
    height: auto !important;          /* jangan fixed tinggi */
    padding: 72px 0 56px !important;  /* seimbang */
  }

  /* Box hero tidak nempel logo */
  .music-hero-content {
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 20px !important;
  }

  /* Foto akrilik lebih kecil dan rapi */
  .music-hero-product {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .music-hero-product img {
    max-width: 82% !important;
    height: auto !important;
    border-radius: 12px;
    margin: 0 auto;
    display: block;
  }

  /* Gambar fitur tidak nyodok kiri */
  .music-features-pro {
    left: 0 !important;
    margin: 0 auto 12px;
    width: 100%;
  }

  .music-features-pro img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
  }

  .music-single-feature {
    margin-bottom: 24px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---- Small mobile: <=767px ---- */
@media (max-width: 767px) {

  /* Header & hero */
  .music-header-area {
    height: auto !important;
    padding: 72px 0 56px !important;
  }

  .music-hero-content {
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 20px !important;
  }

  .music-hero-content h1 {
    font-size: 40px;
    line-height: 54px;
  }

  .music-hero-product {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .music-hero-product img {
    max-width: 82% !important;        /* cukup kecil agar tidak menekan layout */
    height: auto !important;
    border-radius: 12px;
    margin: 0 auto;
    display: block;
  }

  /* Keunggulan – gambar tidak keluar kiri */
  .music-features-pro {
    left: 0 !important;
    margin: 0 auto 12px;
    width: 100%;
  }

  .music-features-pro img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
  }

  /* Tambahan napas antar elemen */
  .music-single-feature {
    margin-bottom: 24px;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Opsional: hilangkan radius top-left yang pernah ada */
  .music-buy-area {
    border-top-left-radius: 0 !important;
  }
}

/* ---- Large mobile: 480–767px (penyesuaian minor) ---- */
@media (min-width: 480px) and (max-width: 767px) {
  .music-hero-product img {
    max-width: 78% !important;
  }
}

/* =========================================================
   MeanMenu overrides agar burger selalu rapi di mobile
   (tetap di sini untuk memastikan prioritas di bawah)
   ========================================================= */
@media (max-width: 991px) {

  .mean-container .mean-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--header-h) !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    z-index: 10050 !important;
  }

  .mean-container a.meanmenu-reveal {
    position: absolute !important;       /* di dalam .mean-bar */
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    text-indent: -9999px !important;
    background: transparent !important;
    z-index: 10051 !important;
  }

  .header-area.scroll-header .mean-container a.meanmenu-reveal {
    color: #333 !important;
  }

  .mean-container a.meanmenu-reveal span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    margin: 3px 0 !important;
    background: currentColor !important;
    border-radius: 2px;
  }

  .mean-container .mean-nav {
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    background: rgba(0,0,0,.92) !important;
    z-index: 10040 !important;
  }
}

/* === HERO: spasi & ukuran foto akrilik di mobile === */
@media (max-width: 991px) {
  /* beri napas di bawah kartu hero */
  .music-hero-content {
    margin-bottom: 50px !important;   /* jarak ke gambar */
  }

  /* jangan ada gap aneh dari container gambar */
  .music-hero-product {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* kecilkan foto + center + beri jarak bawah sedikit */
  .music-hero-product img {
    max-width: 80% !important;        /* sebelumnya terlalu besar */
    height: auto !important;
    display: block !important;
    margin: 0 auto 8px !important;    /* jarak kecil dari bawah hero */
    border-radius: 12px;
  }
}

/* lebih kecil lagi untuk layar mungil */
@media (max-width: 400px) {
  .music-hero-product img {
    max-width: 74% !important;
  }
}
@media (max-width: 340px) {
  .music-hero-product img {
    max-width: 70% !important;
  }
}