html {
      scroll-behavior: smooth;
  }


  /* Mencegah seleksi teks dan gambar di seluruh website */
  body {
      -webkit-touch-callout: none;
      /* Mencegah menu pop-up di iOS saat gambar ditahan */
      -webkit-user-select: none;
      /* Safari */
      -khtml-user-select: none;
      /* Konqueror HTML */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* Internet Explorer/Edge */
      user-select: none;
      /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  }

  /* Pengecualian: Izinkan pengguna mengetik di form input/textarea nantinya */
  input,
  textarea {
      -webkit-user-select: auto !important;
      user-select: auto !important;
  }

  /* Mematikan pointer event pada gambar agar tidak bisa dideteksi oleh browser sebagai objek yang bisa disave */
  /* Catatan: Jangan terapkan ini pada elemen yang butuh diklik seperti tombol Lightbox */
  .protected-img {
      pointer-events: none;
  }


  /* FIX: Mengatasi konflik AOS yang merusak Sticky Header */
  html,
  body {
      /* overflow-x: clip adalah pengganti hidden yang tidak merusak fungsi sticky */
      overflow-x: clip !important;
      overflow-y: visible !important;
      height: auto;
  }

  /* Memastikan Navigasi selalu mendapatkan prioritas utama */
  nav.sticky {
      position: -webkit-sticky;
      /* Dukungan Safari */
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
      background-color: #000000de;
      backdrop-filter: blur(10px);
      /* Nilai tinggi agar di atas elemen AOS lainnya */
  }

  /* Memberikan jarak atas agar section tidak tertutup navbar sticky */
  section,
  footer {
      scroll-margin-top: 80px;
  }

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

  h1,
  h2,
  h3 {
      font-family: 'Playfair Display', serif;

  }

  #hero {
      /* Menambahkan padding atas agar saat kembali ke hero, 
       tidak tertutup oleh navbar yang sticky */
      scroll-margin-top: 0px;
  }


  /* Hapus transisi visibility, gunakan display: none & flex */
  #mobile-menu {
      display: block !important;
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
      opacity: 0;
      transform: translateY(-20px);
      pointer-events: none;
      /* Mencegah klik saat menu tertutup */

  }

  #mobile-menu.active {
      /* Mengganti display: none */
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
      background-color: #000000de;
      backdrop-filter: blur(10px);
  }


  .desktop-menu {
      border-radius: 4px;
  }



  /* --- Animasi Accordion Services --- */
  #mobile-services-menu {
      /* JANGAN gunakan hidden. Gunakan max-height untuk animasi slide */
      display: flex !important;
      flex-direction: column;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }

  #mobile-services-menu.open {
      max-height: 600px;
      /* Nilai yang cukup besar untuk menampung semua link */
      opacity: 1;
      margin-top: 0.75rem;
      /* Memberi jarak saat terbuka */
  }



  .swiper-pagination-bullet {
      background-color: white !important;
      opacity: 0.7;
  }

  .swiper-pagination-bullet-active {
      opacity: 1;
  }


  .details {
      font-size: 10pt !important;
      font-weight: 200;
      line-height: normal !important;

  }

  .btn-primary {
      border-radius: 4px;
      color: black;
      border: none;
      font-weight: 600;
  }

  .btn-secondarys {
      border-radius: 4px;
      background-color: #ffffff47;
      border: none;
      color: white;
      font-weight: 300;

  }

  .font-serif {
      font-family: 'Playfair Display', serif;
  }

  /* Memberikan spasi antar paragraf agar lebih enak dibaca */
  p {
      margin-bottom: 1.5rem;
  }


  .cta-services {
      border: solid 1px rgba(0, 0, 0, 0.19);
      border-radius: 4px;
  }

  .cta-footer {
      border: solid 1px rgb(255, 255, 255);
      border-radius: 4px;
  }

  .not-found {
      background-color: rgb(14 14 14);

  }


  /* Animasi Shadow Bergelombang */
  @keyframes recommended-pulse {
      0% {
          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);

      }

      70% {
          box-shadow: 0 0 0 12px rgba(0, 0, 0, 0);
      }

      100% {
          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      }
  }

  .badge-recommended {
      background-color: #222;
      /* Sesuaikan dengan warna hitam desainmu */
      color: white;
      padding: 6px 12px;
      font-size: 10px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      display: inline-block;
      border-radius: 2px;
      position: relative;
      animation: recommended-pulse 2s infinite;
      /* Menjalankan animasi */
  }


  /* Animasi Kilau (Shimmer) yang lebih kontras */
  @keyframes shimmer {
      0% {
          background-position: -1000px 0;
      }

      100% {
          background-position: 1000px 0;
      }
  }

  .skeleton {
      background: #eeeeee;
      /* Warna dasar abu-abu lebih gelap */
      background-image: linear-gradient(to right,
              #eeeeee 0%,
              #f5f5f5 20%,
              #eeeeee 40%,
              #eeeeee 100%);
      background-repeat: no-repeat;
      background-size: 1000px 100%;
      display: inline-block;
      position: relative;
      animation: shimmer 2s infinite linear;
  }

  /* Pastikan skeleton mengikuti bentuk card asli */
  .skeleton-image {
      width: 100%;
      aspect-ratio: 4/5;
      /* Menyamakan dengan aspect ratio fotomu */
      border-radius: 2px;
  }

  .skeleton-text {
      height: 14px;
      border-radius: 2px;
      margin-top: 10px;
  }

  /* Container gambar saat sedang mendownload file asli */
  .img-container-loading {
      position: relative;
      background: #eeeeee;
      overflow: hidden;
  }

  .img-container-loading::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(to right, #eeeeee 0%, #f5f5f5 20%, #eeeeee 40%, #eeeeee 100%);
      background-repeat: no-repeat;
      background-size: 1000px 100%;
      animation: shimmer 2s infinite linear;
  }

  /* Hilangkan efek loading saat gambar sudah muncul */
  .img-loaded::after {
      display: none;
  }

  .onload-fade-in {
      opacity: 0;
      filter: blur(15px);
      /* Gambar sangat blur di awal */
      transform: scale(1.05);
      /* Sedikit diperbesar agar transisi fokus lebih dramatis */
      transition:
          opacity 1.2s ease-in-out,
          filter 1s ease-in-out,
          transform 1.2s ease-in-out;
      will-change: opacity, filter, transform;
  }

  /* Saat gambar selesai dimuat (loading remove), ganti opacity ke 1 */
  .img-container-loading img {
      opacity: 0;
  }

  div:not(.img-container-loading)>img.onload-fade-in {
      opacity: 1;
  }

  .img-loaded {
      opacity: 1 !important;
      filter: blur(0) !important;
      /* Menjadi tajam */
      transform: scale(1) !important;
      /* Kembali ke ukuran asli */
  }



  /* Menyembunyikan Scrollbar Horizontal di Mobile tapi tetap bisa di-swipe */
  .hide-scrollbar {
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */
  }

  .hide-scrollbar::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari and Opera */
  }

  /* Sedikit penyesuaian padding tombol di Mobile agar lebih ringkas */
  @media (max-width: 768px) {
      .filter-btn {
          padding: 8px 16px;
          font-size: 10px;
      }
  }