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

body {
    overflow: hidden;
    background: radial-gradient(circle at center, #1a001f, #000000);
    height: 100vh;
    font-family: 'Segoe UI', sans-serif;
}

/* FLOATING LOVE */
.love {
    position: fixed;
    bottom: -20px;
    color: #ff4d6d;
    animation: floatUp linear forwards;
}

@keyframes floatUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-110vh); opacity: 0; }
}

/* TEXT */
.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.beat-text {
    font-size: 60px;
    color: white;
    text-shadow: 0 0 25px #ff4d6d;
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    30% { transform: scale(1.12); }
    60% { transform: scale(1); }
    80% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ANAK PANAH */
.arrow {
    position: absolute;
    width: 60px;
    height: 4px;
    background: #ff4d6d;
}

.arrow::after {
    content: "";
    position: absolute;
    right: -10px;
    top: -6px;
    border-left: 12px solid #ff4d6d;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* PARTICLE */
.particle {
    position: absolute;
    font-size: 20px;
    animation: explode 1s forwards;
}

@keyframes explode {
    from {
        transform: translate(0,0);
        opacity: 1;
    }
    to {
        transform: translate(var(--x), var(--y));
        opacity: 0;
    }
}