@media (max-width: 1280px) {
  .center-on-tablet a,
  .center-on-tablet .btn {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1200px) {
  .kolom-includes-paket {
    grid-template-columns: repeat(2, 1fr);
  }
  .hide-on-mobile {
    display: none !important;
  }
}

@media (max-width: 1170px) {
  .kolom-footer {
    grid-template-columns: 3fr 1.2fr 3fr;
  }

  .kolom-payment {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1050px) {
  footer {
    padding-bottom: var(--gap-veryveryverylarge);
  }

  .kolom-includes-other {
    grid-template-columns: repeat(2, 1fr);
  }

  .kolom-a-b-tentang {
    grid-template-columns: 1fr;
    grid-template-areas:
      "b"
      "a";
  }

  .kolom-2-paket {
    grid-template-columns: 1fr;
  }

  .kolom-footer {
    display: block; /* Matikan sistem grid kaku */
    column-count: 2; /* Bagi menjadi 2 lajur vertikal */
    column-gap: var(--gap-large); /* Jarak antara lajur kiri & kanan */
  }

  .kolom-footer > div {
    display: inline-block; /* Wajib agar konten tidak pecah */
    width: 100%; /* Memenuhi lajur masing-masing */
    margin-bottom: var(--gap-normal); /* Jarak vertikal antar kotak */
    break-inside: avoid; /* Mencegah satu kotak terpotong ke lajur sebelah */
  }

  .logo-index-tentang {
    max-width: auto;
    margin-left: auto !important; /* Dorong dari kiri */
    margin-right: auto !important; /* Dorong dari kanan */
  }
}

@media (max-width: 950px) {
  .kolom-features-index {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 850px) {
  .kolom-footer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .kolom-payment {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (max-width: 785px) {
  nav,
  section,
  footer {
    padding-left: var(--gap-medium);
    padding-right: var(--gap-medium);
  }

  section {
    padding-top: var(--gap-large);
    padding-bottom: var(--gap-large);
  }

  footer {
    padding-top: var(--gap-large);
  }

  .kolom-2-a-b-kontak {
    grid-template-columns: 1fr;
  }

  .paket-catalog-body {
    min-height: 200px;
  }

  .kolom-5 {
    /* Di HP, ubah jadi 1 kolom saja biar tidak sempit */
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .kolom-includes-other {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 675px) {
  .kolom-payment {
    grid-template-columns: repeat(5, 1fr);
  }

  /*  Hero button akan stack vertical */
  .container-btn-responsive {
    flex-direction: column !important; /* Ubah dari row ke column */
    width: 100% !important;
  }

  /* Memaksa link <a> dan .btn di dalamnya menjadi lebar penuh */
  .container-btn-responsive a,
  .container-btn-responsive .btn {
    width: 100% !important;
    display: flex; /* Memastikan flex tetap bekerja di dalam tombol */
    justify-content: center; /* Memastikan konten tombol tetap di tengah */
    align-items: center;
    box-sizing: border-box; /* Agar padding tidak merusak lebar 100% */
  }

  /* HERO */
  .responsive-hero-title {
    font-size: var(--font-size-veryverylarge);
  }

  .responsive-hero-title-404 {
    font-size: var(--font-size-verylarge);
    line-height: var(--font-lineheight-verylarge);
    margin-top: var(--gap-verysmall);
  }

  .responsive-hero-subtitle-404,
  .responsive-hero-subtitle {
    font-size: var(--font-size-medium);
  }

  .responsive-hero-deskripsi {
    font-size: var(--font-size-normal);
    line-height: var(--font-lineheight-p);
  }

  .kolom-features-index {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Max browser small size, best for mobile */
@media (max-width: 580px) {
  .kolom-payment {
    grid-template-columns: repeat(4, 1fr);
  }

  .paket-konten-tanggal,
  .paket-konten-kota {
    font-size: var(--font-size-normal);
  }
}

@media screen and (min-width: 0px) and (max-width: 480px) {
  .responsive-hero-title {
    font-size: var(--font-size-verylarge);
  }

  .footer-logo {
    width: 225px;
  }

  .btn {
    width: 100%;
    min-width: 0px !important;
    margin-left: 0px;
    margin-right: 0px;
  }

  .logo-index-tentang {
    max-width: 270px;
    margin-left: auto !important; /* Dorong dari kiri */
    margin-right: auto !important; /* Dorong dari kanan */
  }

  .kolom-includes-paket {
    grid-template-columns: repeat(1, 1fr);
  }
}