/* RESET */
/* ===================================== */
/* DISABLE ZOOM */
/* ===================================== */

html,
body{

  touch-action: pan-x pan-y;

  overscroll-behavior: none;
}

/* ===================================== */
/* HAPUS WARNA BIRU TAP */
/* ===================================== */

*{

  -webkit-tap-highlight-color:
  transparent;

  outline:none;
}

/* ===================================== */
/* HAPUS SELECT TEXT */
/* ===================================== */

img,
a,
button,
div{

  -webkit-user-select:none;
  user-select:none;

  -webkit-touch-callout:none;
}



* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* BODY BACKGROUND (PASTI MUNCUL) */
body {
  background-color: black;

  /* 🔥 PATH FIX */
  background-image: url('../images/bg.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;

  min-height:100vh;

  display:flex;
  justify-content:center;
}

/* WRAPPER */
.wrapper {
  position:relative;
  width:100%;
  max-width:420px;
}

/* IMAGE */
.img-full {
  width:100%;
  display:block;
}

/* HEADER */
.header {
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  z-index:10;
}

.header-left {
  position:absolute;
  left:10px;
  width:130px;
}

.header-right {
  position:absolute;
  right:10px;
  width:130px;
}

/* BUTTON AREA */
.button-area {
  position:relative;
}

/* HOTSPOT */
.btn-click {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
















/* TITLE */
.title-img {
  width:85%;      /* 🔥 atur ukuran */
  display:block;
  margin:60px auto 10px auto; /* atas - tengah */
}








/* HEADER KIRI */
.header-left {
  position:absolute;
  left:10px;
  top:5px;   /* 🔥 naikkan */
  width:130px;
}

/* HEADER KANAN */
.header-right {
  position:absolute;
  right:10px;
  top:15px;  /* tetap */
  width:130px;
}













/* TITLE */
.title-img {
  width:80%;
  display:block;
  margin:60px auto 10px auto;

  animation: titleAnim 4s ease-in-out infinite;
}

/* ANIMASI */
@keyframes titleAnim {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(255,200,0,0.3));
  }

  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 20px rgba(255,200,0,0.8));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(255,200,0,0.3));
  }
}


















/* SECTION */
.motor-section {
  position:relative;
  width:100%;
  margin-top:20px;
}

/* MOTOR */
.motor-img {
  display:block;
  margin:0 auto;
  width:85%;

  position:relative;
  z-index:2;

  
}























/* BUTTON IMAGE */
.btn-img {
  width:85%;          /* 🔥 kecilkan */
  display:block;
  margin:-30px auto 0 auto;  /* lebih naik */
  margin:-50px auto 0 auto;  /* lebih naik lagi */
}

/* HOTSPOT */
.btn-click {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);

  width:85%;
  height:100%;
}




/* BUTTON IMAGE */
.btn-img {
  width:85%;
  display:block;
  margin:-20px auto 0 auto;

  animation: btnPulse 2.5s ease-in-out infinite;
}

/* ANIMASI HALUS */
@keyframes btnPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(255,200,0,0.4));
  }

  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 25px rgba(255,200,0,0.9));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(255,200,0,0.4));
  }
}

















.info-img {
  width:100%;
  display:block;

  margin-top:-90px;  /* 🔥 naik */
}








/* FOOTER (NORMAL / TURUN DIKIT) */
.footer-img {
  width:100%;
  display:block;
  margin-top: -50px;   /* kasih jarak */
}