/* ============================================================
   responsive.css
   -----------------------------------------------------------
   Semua file CSS lain ditulis mobile-first (default = HP).
   File ini cuma nge-override buat layar yang lebih gede.
   Urutan breakpoint: 640px (tablet kecil) -> 880px (tablet
   besar/laptop kecil) -> 1140px (desktop).

   Kalau nambah breakpoint baru, taro di sini juga — jangan
   sebar media query di file lain, biar gampang dicari nanti
   (sudah pernah nyasar nyari media query 20 menit gara-gara
   nyebar di 4 file berbeda, trauma).
============================================================ */

/* ====================================
   >= 640px — tablet kecil / phablet
==================================== */
@media (min-width: 640px){

  .trustbar .grid{
    grid-template-columns: repeat(4, 1fr);
  }

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

  .hero .hero-ctas{
    flex-direction: row;
  }

}


/* ====================================
   >= 880px — tablet besar / laptop kecil
==================================== */
@media (min-width: 880px){

  /* Navbar desktop: ilangin hamburger, munculin link horizontal */
  .navbar-toggle{ display: none; }
  .navbar-links{ display: flex; }
  .navbar-mobile{ display: none !important; }

  .services-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

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

  .footer-top{
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer-cols{
    flex-direction: row;
    gap: var(--sp-2xl);
  }

}


/* ====================================
   >= 1140px — desktop penuh
==================================== */
@media (min-width: 1140px){

  .pricing-grid{
    grid-template-columns: repeat(4, 1fr);
  }

  .hero{
    padding: 170px 0 var(--sp-2xl);
  }

  .contact-grid{
    flex-direction: row;
    max-width: none;
  }
  .contact-card{
    flex: 1;
  }

  /* Projects: 2 kolom side by side di desktop */
  .projects-list{
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-lg);
  }
  .project-real{
    flex: 1;
  }
  .project-real-img{
    aspect-ratio: 9/14;
    max-height: none;
  }

}