/* ===== BACKGROUND ANIMASI BERGERAK (AURORA STYLE) ===== */
    body {
      margin: 0;
      padding: 0;
      position: relative;
      overflow-x: hidden;
      color: #fff;
      scroll-behavior: smooth;
      background: radial-gradient(ellipse at bottom, #0a192f 0%, #050b16 100%);
    }

    /* Efek aurora: lapisan gradasi lembut bergelombang */
    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      background: conic-gradient(
        from 180deg at 50% 50%,
        rgba(0,188,212,0.15),
        rgba(33,150,243,0.15),
        rgba(156,39,176,0.1),
        rgba(0,188,212,0.15)
      );
      animation: moveAurora 15s linear infinite;
      z-index: -1;
      filter: blur(120px);
      transform: rotate(15deg);
    }

    @keyframes moveAurora {
      0% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(180deg) scale(1.1); }
      100% { transform: rotate(360deg) scale(1); }
    }

    header {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
    }
    
    .header-logo {
      height: 50px;
      width: auto;
      transition: all 0.3s ease;
    }
    
    /* Responsif: kecilkan logo di layar sempit */
    @media (max-width: 768px) {
      .header-logo {
        height: 40px;
      }
    }
    
    @media (max-width: 480px) {
      .header-logo {
        height: 35px;
      }
    }
    
    /* Opsional: efek saat scroll biar makin elegan */
    header.scrolled {
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(8px);
      transition: background 0.3s ease;
    }
    
    header.scrolled .header-logo {
      height: 40px;
    }
    
    
    .hero {
      min-height: 100vh;
      background: rgba(0, 0, 0, 0.4);
      position: relative;
      z-index: 1;
      overflow: hidden;
      color: #fff;
    }
    
    .hero-text h1 {
      font-size: 2.5rem;
      font-weight: 700;
    }
    
    .hero-text p {
      font-size: 1.1rem;
      margin-top: 15px;
      color: #dcdcdc;
    }
    
    .hero-img {
      width: 100%;
      max-width: 450px;
      animation: float 4s ease-in-out infinite;
    }
    
    /* Animasi melayang lembut */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    /* Responsive: kecilkan teks di layar kecil */
    @media (max-width: 768px) {
      .hero-text h1 {
        font-size: 1.8rem;
      }
      .hero-text p {
        font-size: 1rem;
      }
    }

    #services .card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 15px;
      backdrop-filter: blur(10px);
      transition: transform 0.3s ease, background 0.3s ease;
    }
    
    #services .card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.2);
    }
    
    #catalog .card {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 15px;
      backdrop-filter: blur(10px);
      transition: transform 0.3s ease, background 0.3s ease;
    }
    
    #catalog .card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.2);
    }
    
    #catalog h6 {
      color: #00bcd4;
      font-weight: 600;
    }
    
    #catalog p {
      color: #f5f5f5;
    }
    
    
    
    .section-title {
      color: #00bcd4;
      text-transform: uppercase;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .card {
      background-color: rgba(17,34,64,0.85);
      border: none;
      border-radius: 10px;
      transition: transform 0.3s;
    }
    .card:hover {
      transform: translateY(-5px);
    }
    /* Scroll to top */
    #scrollUp {
      position: fixed;
      bottom: 30px;
      right: 30px;
      background: #00bcd4;
      color: white;
      border: none;
      border-radius: 50%;
      width: 45px;
      height: 45px;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1000;
    }
    #scrollUp:hover {
      background: #0097a7;
    }