/* Style untuk body */
body {
    background-size: cover; /* Menjaga agar gambar latar belakang menutupi seluruh layar */
    background-position: center; /* Memusatkan gambar latar belakang */
    background-attachment: fixed; /* Menjaga gambar tetap pada tempatnya saat di-scroll */
    background-repeat: no-repeat; /* Menghindari gambar berulang */
    height: 100vh; /* Menyeting tinggi body menjadi tinggi layar */
    margin: 0; /* Menghilangkan margin default */
    display: flex; /* Membuat elemen di dalam body fleksibel */
    flex-direction: column; /* Mengatur elemen secara vertikal */
    justify-content: center; /* Memusatkan konten secara vertikal */
    align-items: center; /* Memusatkan konten secara horizontal */
    position: relative; /* Menjaga elemen berada dalam konteks relatwif */
    overflow: hidden; /* Menghapus scroll untuk semua arah */
  }

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Menghapus scroll secara keseluruhan */
  }

  /* Menambahkan gambar bawah1.png sebagai latar belakang penuh halaman */
  .full-background {
    background-size: cover; /* Memastikan gambar menutupi seluruh halaman */
    background-position: center; /* Memusatkan gambar */
    z-index: 1; /* Menjadikan gambar berada di bawah semua elemen */
  }

  /* Gambar p1.png di tengah halaman */

  /* Default styling for mobile-first approach */
  .middle-image, .left-image, .right-image {
    position: absolute;
    transform: translate(-50%, -50%);
    animation: riseUp 2s ease-out forwards;
  }

  /* Styling khusus untuk desktop */
  @media (min-width: 1024px) {
    body {
      background-image: url('../images/bg-utama-detskop.jpg');
    }

    .middle-image {
        top: 49%;
        left: 50%;
        width: 416px !important;
        height: auto;
        z-index: 0;
    }
    .text-bawah {
        top: 28%;
        left: 0%;
        font-size: 2rem;
    }
    .left-image {
        top: 47%;
        left: 48%;
        width: 413px !important;
        height: auto;
        z-index: -3;
    }

    .right-image {
        top: 57%;
        left: 64%;
        width: 435px !important;
        height: auto;
        z-index: -3;
    }

    .full-background {
      position: absolute;
      top: -414px;
      left: 0;
      width: 100%;
      height: 167%;
      background-image: url(../images/bawah1.png);
    }

    .vampiro-one-regular {
      font-size: 9rem;
      top: 45%;
      left: 53%;
    }
  }

  /* Optional: Untuk layar ultra-wide seperti 1440px ke atas */
  @media (min-width: 1440px) {
    .middle-image {
      width: 600px; /* Lebih besar untuk layar lebih lebar */
    }

    .left-image {
      width: 400px;
    }

    .right-image {
      width: 420px;
    }
  }

  /* Styling untuk mobile */
  @media (max-width: 768px) {
    body {
      background-image: url('../images/bg-2.jpg');
    }

    .vampiro-one-regular {
      font-size: 2rem;
      top: 50%;
      left: 50%;
    }

    .text-bawah {
        top: 22%;
        left: 0%;
    }

    .full-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../images/bawah1.png');
    }

    .middle-image {
      top: 50%;
      left: 43%;
      width: 450px;
      transform: translate(-50%, -50%);
      z-index: 0;
    }

    .left-image {
        top: 47%;
        left: 43%;
        width: 332px;
        transform: translate(-50%, -50%);
        z-index: -3;
    }

    .right-image {
      top: 54%;
      left: 79%;
      width: 373px;
      transform: translate(-50%, -50%);
      z-index: -3;
    }

    .vampiro-one-regular {
      font-size: 6rem;
    }

    .play-button {
      width: 80px;
      height: 80px;
    }

    /* Untuk mengubah behavior scroll pada layar kecil */
    body {
      background-attachment: scroll; /* Memastikan gambar mengikuti scroll pada perangkat kecil */
    }
  }

  /* Efek animasi rise up */
  @keyframes riseUp {
    0% {
      transform: translate(-50%, 50%); /* Gambar dimulai di bawah */
    }
    100% {
      transform: translate(-50%, -50%); /* Gambar berakhir di posisi tengah */
    }
  }

  /* Efek echo pada teks */
  @keyframes echoEffect {
    0% {
      text-shadow:
        2px 2px 0 #bc473d,
        4px 4px 0 #bc473d,
        6px 6px 0 rgba(188, 71, 61, 0.5);
    }
    50% {
      text-shadow:
        3px 3px 5px #bc473d,
        5px 5px 10px #bc473d,
        8px 8px 15px rgba(188, 71, 61, 0.3);
    }
    100% {
      text-shadow:
        2px 2px 0 #bc473d,
        4px 4px 0 #bc473d,
        6px 6px 0 rgba(188, 71, 61, 0.5);
    }
  }

  /* Styling untuk teks dengan efek echo */
  .vampiro-one-regular {
    font-family: "Vampiro One", serif;
    color: white;
    z-index: 2;
    text-shadow:
      2px 2px 0 #bc473d,
      4px 4px 0 #bc473d,
      6px 6px 0 rgba(188, 71, 61, 0.5);
    animation: echoEffect 1.5s infinite;
    position: absolute;
    transform: translateX(-50%);
  }

  .text-bawah{
    font-family: "Vampiro One", serif;
    color: white;
    z-index: 2;
    position: relative;
    text-shadow:
      2px 2px 0 #bc473d,
      4px 4px 0 #bc473d,
      6px 6px 0 rgba(188, 71, 61, 0.5);
  }

  /* Styling untuk tombol play */
  .button-container {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .play-button {
    background-image: url('../images/play.png');
    background-size: cover;
    background-position: center;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .play-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  }

  .play-button:active {
    transform: scale(0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }