:root {
      --yptp-blue: #0ea5e9;
      /* Biru langit logo */
      --yptp-green: #16a34a;
      /* Hijau peta logo */
      --yptp-yellow: #facc15;
      /* Kuning logo */
      --yptp-dark-blue: #0369a1;
  }

  body {
      font-family: 'Roboto', sans-serif;
  }

  h1,
  h2,
  h3,
  .font-poppins {
      font-family: 'Poppins', sans-serif;
  }

  .glass-card {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(14, 165, 233, 0.2);
  }

  .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      background-size: cover;
      background-position: center;
  }

  .slide.active {
      opacity: 1;
  }

  /* Overlay menggunakan gradasi Biru Logo ke Hitam */
  .gradient-overlay {
      background: linear-gradient(to bottom, rgba(14, 165, 233, 0.3), rgba(0, 0, 0, 0.8));
  }

  .text-yptp-blue {
      color: var(--yptp-blue);
  }

  .bg-yptp-blue {
      background-color: var(--yptp-blue);
  }

  .border-yptp-blue {
      border-color: var(--yptp-blue);
  }


  /* 1. Slider Optimasi */
  @keyframes kenBurns {
      from {
          transform: scale(1.15);
      }

      to {
          transform: scale(1);
      }
  }

  .swiper-slide-active .slide-bg {
      animation: kenBurns 10s ease-out forwards;
  }

  /* 2. UI/UX Elements */
  .hero-overlay {
      background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%);
  }

  .swiper-pagination-bullet {
      background: white !important;
      opacity: 0.5;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .swiper-pagination-bullet-active {
      background: #facc15 !important;
      width: 40px !important;
      border-radius: 8px !important;
      opacity: 1 !important;
  }

  /* 3. Floating Search Glass Effect */
  .search-glass {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
  }