/* Responsivitas Komprehensif */
@media screen and (max-width: 1440px) {
    .container {
      padding: 0 5%;
    }
  }
  
  @media screen and (max-width: 1200px) {
    .container {
      padding: 0 4%;
    }
  
    .hero {
      gap: 40px;
    }
  
    .hero-title {
      font-size: 2.5rem;
    }
  
    .features {
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;
    }
  }
  
  @media screen and (max-width: 992px) {
    .hero {
      flex-direction: column;
      text-align: center;
    }
  
    .hero-content {
      order: 1;
      width: 100%;
    }
  
    .hero-image {
      order: 2;
      width: 100%;
    }
  
    .hero-buttons {
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }
  
    md-filled-button, 
    md-outlined-button {
      width: 100%;
      max-width: 300px;
    }
  
    .features {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  
    .navbar-menu {
      display: none;
    }
  
    .navbar-toggle {
      display: block;
    }
  }
  
  @media screen and (max-width: 768px) {
    .container {
      padding: 0 3%;
    }
  
    .hero-title {
      font-size: 2rem;
    }
  
    .hero-subtitle {
      font-size: 1rem;
    }
  
    .features {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  
    .pricing-cards {
      flex-direction: column;
      align-items: center;
    }
  
    .pricing-card {
      width: 100%;
      max-width: 350px;
    }
  
    .integration-logos {
      gap: 20px;
    }
  
    .integration-logo {
      max-width: 100px;
    }
  
    /* Sidebar Styles */
    .sidebar-menu {
      width: 100%;
      right: -100%;
    }
  }
  
  @media screen and (max-width: 480px) {
    .hero-title {
      font-size: 1.8rem;
    }
  
    .section-title {
      font-size: 2rem;
    }
  
    .cta-title {
      font-size: 2rem;
    }
  
    .hero-buttons md-filled-button,
    .hero-buttons md-outlined-button {
      width: 100%;
    }
  
    .features {
      grid-template-columns: 1fr;
      gap: 15px;
    }
  
    .feature-card {
      padding: 20px;
    }
  
    .feature-icon {
      font-size: 2.5rem;
    }
  
    .feature-title {
      font-size: 1.3rem;
    }
  
    /* Sidebar Full Width */
    .sidebar-menu {
      width: 100%;
      right: -100%;
    }
  }
  
  /* Tambahan untuk perangkat touchscreen */
  @media (hover: none) and (pointer: coarse) {
    .feature-card:hover,
    .pricing-card:hover {
      transform: none;
      box-shadow: none;
    }
  }
  
  /* Optimasi Teks Responsif */
  @media screen and (max-width: 768px) {
    html {
      font-size: 14px;
    }
  }