html {
            scroll-behavior: smooth;
            }
         :root {
            --primary: #1e3a8a;
            --secondary: #3b82f6;
            --accent: #f59e0b;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            scroll-behavior: smooth;
        }
        
        .hero-section {
            background: #1e3a8a center/cover;
        }
        
        .phone-frame {
            border-radius: 30px;
            border: 12px solid #1e3a8a;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: perspective(1000px) rotateY(-15deg);
            transition: all 0.3s ease;
        }
        
        .phone-frame:hover {
            transform: perspective(1000px) rotateY(-5deg);
        }
        
        .feature-card {
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .testimonial-card {
            position: relative;
        }
        
        .testimonial-card::before {
            content: '"';
            font-family: 'Times New Roman', Times, serif;
            font-size: 120px;
            position: absolute;
            top: -40px;
            left: 10px;
            color: rgba(59, 130, 246, 0.8);
            z-index: 0;
        }
        
        .floating-btn {
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .bulat {
            border-radius: 20px;
        }
        
        .border-blue {
            border: 2px solid #1e3a8a;
        }

        /*pemisah*/
        /* Container pembungkus gelombang */
        .moving-wave-wrapper {
        position: relative;
        width: 100%;
        height: 120px;
        overflow: hidden;
        background: #1e3a8a/* Warna latar atas wave */
        }

        /* Elemen wave itu sendiri */
        .moving-wave {
        position: absolute;
        width: 200%;
        height: 100%;
        background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'><path fill='%23ffffff' fill-opacity='1' d='M0,160 C360,280 1080,40 1440,160 L1440,320 L0,320 Z'></path></svg>");
        background-repeat: repeat-x;
        background-size: contain;
        animation: waveMove 10s linear infinite;
        }
        /* Keyframe untuk animasi gerak gelombang */
        @keyframes waveMove {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
        }
         @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeInUp 1s ease forwards; }

    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    body {
      background: linear-gradient(270deg, #eef0f2, #f3f4f5, #f9f9f9);
      background-size: 400% 400%;
      animation: gradientMove 15s ease infinite;
    }

    @keyframes floatLoop {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .float { animation: floatLoop 3s ease-in-out infinite; }

    .scroll-container {
      display: flex;
      overflow-x: auto;
      gap: 2rem;
      padding: 1rem 1.5rem;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
    }
    .scroll-container > div {
      scroll-snap-align: center;
      flex-shrink: 0;
    }
    .scroll-container::-webkit-scrollbar {
      height: 8px;
    }
    .scroll-container::-webkit-scrollbar-thumb {
      background-color: rgba(59, 130, 246, 0.5);
      border-radius: 10px;
    }
    .scroll-container::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.3);
    }

    /* Card Hover */
    .jenjang-card {
      transition: all 0.3s ease;
      background: linear-gradient(145deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2));
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.3);
    }
    .jenjang-card:hover {
      transform: translateY(-6px) scale(1.05);
      box-shadow: 0 0 20px rgba(59,130,246,0.3);
    }

    /* Garis penghubung hanya tampil di layar kecil (tablet & mobile) */
@media (max-width: 1024px) {
  .scroll-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 4px;
    z-index: 0;
  }
}

.title-jenjang {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1e40af;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  transition: all 0.3s ease-in-out;
}

.title-jenjang::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 4px;
  transform: translateX(-50%);
  transition: width 0.5s ease-in-out;
}

.title-jenjang:hover::after {
  width: 100%;
}

.title-jenjang:hover {
  color: #2563eb;
  text-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}

         @keyframes fade-in {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
            }
        @keyframes fade-in-delayed {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        @keyframes pop {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        @keyframes bounce-soft {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        .animate-fade-in { animation: fade-in 1s ease-out forwards; }
        .animate-fade-in-delayed { animation: fade-in-delayed 1.5s ease-out forwards; }
        .animate-float { animation: float 4s ease-in-out infinite; }
        .animate-pop { animation: pop 0.6s ease-out forwards; }
        .animate-bounce-soft { animation: bounce-soft 2s infinite; }
         @keyframes fadeInUp {
         from { opacity: 0; transform: translateY(20px); }
         to { opacity: 1; transform: translateY(0); }
         }
        .fade-up { animation: fadeInUp 1s ease forwards; }