@media (max-width: 360px) {
  .h5, h5 {
    font-size: 1.0rem;
  }
  .mobile-logo {
      max-width: 135px !important; /* Sedikit diperkecil untuk HP kecil */
      height: auto;
  }
  .ribbon span {
    width: 80px;
    padding:0px;
    font-size: 9px;
    top: 5px;
    right: -27px;
  }
  .categories .btn {
        border-radius: 5px;
    }
    .gosend-icon {
    max-width:30%;
  }

  .image-title {
    width:60%;
  }
  
}  

@media (min-width: 361px) and (max-width: 480px) {
  .row.product-page > *{
    padding-right: calc(var(--bs-gutter-x) * .4) !important;
  }
  h5.card-title.fw-bold.text-gold.mt-auto {
      font-size: 1.2rem;
  }
  .mobile-logo {
      max-width: 70px; /* Sedikit diperkecil untuk HP kecil */
      height: auto;
  }
  .ribbon span {
      width: 80px;
      padding: 0px;
      font-size: 11px;
      top: 5px;
      right: -25px;
  }
  .categories .btn {
        border-radius: 5px;
    }

  .gosend-icon {
    max-width:25%;
  }

  .image-title {
    width:60%;
  }
}  
  
  /* Extra small devices (portrait phones, <576px) */
@media (min-width: 481px) and (max-width: 575.98px) {
  /* CSS khusus HP kecil */
  .mobile-logo {
      max-width: 180px; /* Sedikit diperkecil untuk HP kecil */
      height: auto;
  }
  .top-bar .info {
    display: none;
  }
  .sm-none {
    display: none !important;
  }
  .main-header .logo img {
      max-height: 35px;
  }

  marquee.d-md-none.text-white.small {
      font-size: 14px;
  }
  /* PRODUCT CARD */
  .card-body.d-flex.flex-column {
      padding: 5px !important;
  }
    .small, small {
      font-size: 16px;
  }

    .xsmall {
      font-size: 12px !important;
    }

  /* CATEGORY FILTER BUTTON */
  .categories .btn {
      border-radius: 2px;
  }

  /* SLIDER LOGO */
  .logo-track img {
      width: 150px;
  }

  /* LOGIN BACKGROUND */
  .login-section {
    /* background-position: right center;
    min-height: 80vh; */
    background: none !important;
  }

  /* SLIDER */
  #heroCarousel.carousel .carousel-control-prev, #heroCarousel.carousel .carousel-control-next {
    top: 20% !important;
  }

  img.carousel-image.slider-image.img-fluid.rounded.mx-auto.d-block {
      width: 69%;
  }

  h2.animate-title {
    font-size: 1.5rem;
  }

  section.footer-section {
      margin-top: -50px;
  }

  .gosend-icon {
    max-width:30%;
  }

  /* Admin Panel Product List */
    table.table-modern th,
    table.table-modern td {
      white-space: nowrap;
      font-size: 12px;
      padding: 6px;
    }

    /* Gambar produk mengecil */
    table.table-modern img {
      width: 38px !important;
      height: 38px !important;
    }

    /* Tombol aksi lebih ringkas */
    .btn-group .btn {
      padding: 2px 6px !important;
      font-size: 12px !important;
    }

    /* Quick-edit: form lebih rapat */
    .form-control-sm, .form-select-sm {
      font-size: 12px !important;
      padding: 2px 30px !important;
    }
  
}

/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* CSS khusus HP besar */
  .top-bar .info {
    display: none;
  }
   
  .mobile-logo {
      max-width: 100px; /* Sedikit diperkecil untuk HP kecil */
      height: auto;
  }
  
}

/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* CSS khusus tablet */
  .top-bar {
    font-size: 12px;
  }
  .small, small {
      font-size: 10px;
  }
  section.footer-section {
      margin-top: -100px;
  }
  .categories .btn {
      border-radius: 10px;
  }
}

/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  
  /* Product Slider Nav */
  .swiper-button-next, .swiper-button-prev {
    display:none !important;
  }
  /* CSS khusus laptop / desktop standar */
   section.footer-section {
      margin-top: -200px;
  }
  
}

/* Extra large devices (large desktops, ≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Product Slider Nav */
  .swiper-button-next, .swiper-button-prev {
    display:none !important;
  }
  /* CSS khusus layar besar */
   section.footer-section {
      margin-top: -200px;
  }
}

/* Extra extra large devices (ultra wide, ≥1400px) */
@media (min-width: 1400px) {
  /* Product Slider Nav */
  .swiper-button-next, .swiper-button-prev {
    display:none !important;
  }
  /* CSS khusus monitor sangat besar */
  section.footer-section {
      margin-top: -200px;
  }
}