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

/* BODY */
body {
    background: #062434;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

/* WRAPPER (background utama) */
.wrapper {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* BACKGROUND */
.bg-section {
    position: relative;
}
.bg-section img {
    width: 100%;
    display: block;
}

/* UNIVERSAL BUTTON */
.btn-section {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
    z-index: 10;
}

.btn-section img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* BUTTON POSITIONS */
.btn-1 { top: 23%; }
.btn-2 { top: 52.9%; }

/* PULSE tanpa merusak posisi */
.btn-1 img,
.btn-2 img {
    animation: pulse 0.8s infinite linear;
}

@keyframes pulse {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

/* VIDEO (DALAM BACKGROUND) */
.lp-video {
    position: absolute;
    top: 59%;
    left: 50.77%;
    transform: translateX(-50%);
    width: 76%;
    border-radius: 3px;
    overflow: hidden;
    z-index: 9;
}
.lp-video video {
    width: 100%;
    display: block;
}

/* PROMO BUTTON BASE */
.promo-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;             /* 90% dari wrapper → scalable dan responsive */
    max-width: 440px;       /* jaga supaya tidak pecah */
    z-index: 20;
}

/* Image inside */
.promo-btn img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* Atur jarak manual */
.promo-1 { top: 29%; }
.promo-2 { top: 36.4%; }
.promo-3 { top: 44.4%; }



/* FEEDBACK TAP */
.promo-section a img:active {
    transform: scale(0.97);
    transition: 0.1s;
}