/* ==========================================================
   HALO KEBUNI — Responsive Rules
   ========================================================== */

/* Tablet */
@media (max-width: 991.98px) {
  .hk-navbar__menu { background: var(--hk-white); padding: 1.2rem; border-radius: var(--hk-radius); margin-top: 1rem; box-shadow: var(--hk-shadow); }
  .hk-navbar__menu .nav-item { margin-bottom: 0.3rem; }

  .hk-quality-timeline { grid-template-columns: repeat(3, 1fr); }
  .hk-check-list { grid-template-columns: 1fr; }
  .hk-service-card { grid-template-columns: 1fr; }
  .hk-service-card--reverse { direction: ltr; }
  .hk-article-featured { grid-template-columns: 1fr; }
  .hk-article-featured__image { height: 240px; }

  .hk-section { padding: 4rem 0; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .hk-hero { min-height: 82vh; }
  .hk-hero__actions { flex-direction: column; align-items: stretch; }
  .hk-hero__actions .hk-btn { justify-content: center; }

  .hk-quality-timeline { grid-template-columns: 1fr 1fr; }
  .hk-process-flow { flex-direction: column; }
  .hk-process-flow__arrow { transform: rotate(90deg); }

  .hk-cta__box { flex-direction: column; text-align: center; padding: 2.2rem 1.6rem; }
  .hk-cta__box .hk-btn { width: 100%; justify-content: center; }

  .hk-about-visual { padding-right: 1.2rem; }
  .hk-about-visual__main { height: 300px; }
  .hk-about-visual__secondary { height: 150px; }

  .hk-product-detail__image { height: 280px; }
  .hk-product-detail__spec { flex-direction: column; gap: 0.2rem; }
  .hk-product-detail__spec-value { text-align: left; }

  .hk-partners__logos { gap: 1.2rem; }

  .hk-product-filter { flex-direction: column; align-items: stretch; border-radius: var(--hk-radius); }
  .hk-filter-clear { align-self: flex-start; }
}

@media (max-width: 575.98px) {
  .hk-quality-timeline { grid-template-columns: 1fr; }
  .container { padding-left: 1.1rem; padding-right: 1.1rem; }
  .hk-whatsapp-float { width: 52px; height: 52px; font-size: 1.5rem; bottom: 16px; right: 16px; }
  .hk-back-to-top { bottom: 16px; left: 16px; }
}

/* Prevent horizontal overflow globally */
html, body { max-width: 100%; overflow-x: hidden; }