/* ============================================================
   TRANOVA — RESPONSIVE
   Breakpoints: 375 / 768 / 1024 / 1440 (mobile-first tuning)
   ============================================================ */

/* ---------- ≤ 1024px ---------- */
@media (max-width: 64rem) {
  .hero__badge {
    top: 7.5rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .cluster {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .cluster__head {
    position: static;
  }

  .work-card,
  .work-card--slot {
    grid-column: span 6;
  }

  .quotes {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }

  .quote:nth-child(2) {
    margin-top: 0;
    margin-left: clamp(0rem, 8vw, 5rem);
  }
}

/* ---------- ≤ 900px : burger navigation ---------- */
@media (max-width: 56.25rem) {
  .nav {
    padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  }

  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__burger {
    display: flex;
  }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 48rem) {
  html {
    scroll-padding-top: 5.5rem;
  }

  .hero {
    padding-top: 6.5rem;
    min-height: 100svh;
  }

  .hero__badge {
    display: none;
  }

  .hero__proof {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .hero__proof .sep {
    display: none;
  }

  .scroll-hint {
    display: none;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .footer__logo img {
    height: 6rem;
  }

  .footer__social {
    text-align: left;
  }

  .shell__index {
    position: static;
    transform: none;
    margin-top: var(--sp-5);
    font-size: clamp(4rem, 20vw, 7rem);
  }

  .shell {
    min-height: 0;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .work-card,
  .work-card--slot {
    grid-column: span 12;
    min-height: 0;
  }

  .work-card {
    min-height: 20rem;
  }

  .svc-row {
    grid-template-columns: 2.5rem 1fr;
  }

  .svc-row__arrow {
    display: none;
  }

  .metrics-row {
    flex-direction: column;
  }

  .metric {
    border-left: 0;
    border-top: 1px solid var(--line-1);
    padding-inline: 0;
    padding-top: var(--sp-5);
  }

  .metric:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .contact {
    min-height: 0;
  }

  .contact__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .case-header {
    padding-top: 7rem;
  }

  .case-header__grid {
    align-items: flex-start;
    flex-direction: column;
  }

  .case-hero-metric {
    text-align: left;
  }

  .meta-bar {
    gap: var(--sp-5);
  }

  .langkah-grid {
    grid-template-columns: 1fr;
  }

  .chart-col__value {
    font-size: var(--fs-label);
  }

  .chart-col__month {
    font-size: var(--fs-micro);
  }

  .case-next__link {
    font-size: var(--fs-h2);
  }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 30rem) {
  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .nav__logo img {
    height: 1.5rem;
  }
}

/* ---------- laptop pendek / landscape rendah ---------- */
@media (min-width: 48rem) and (max-height: 45rem) {
  .hero {
    padding-top: 6rem;
    padding-bottom: 2.5rem;
  }

  .hero__title {
    font-size: clamp(2.75rem, 7vw, 4.75rem);
  }

  .hero__cta {
    margin-bottom: var(--sp-6);
  }

  .hero__sub {
    margin-bottom: var(--sp-5);
  }
}

/* ---------- hover only where hover exists ---------- */
@media (hover: none) {
  .nav__link::after {
    display: none;
  }
}