body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background: rgba(245, 61, 63, 1);
    transition: background 0.5s linear;
}

/* Judul */
h1 {
    font-weight: 700;
    font-size: 6rem;
    color: #fff;
}

/* Tombol */
.color-btn {
    padding: 12px 24px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    border-radius: 16px;
    font-weight: 400;
    font-size: 1rem;
    backdrop-filter: blur(4px);
}

/* Wrapper layout */
.hero-wrapper {
    height: 100vh;
    position: relative;
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Gambar (SVG responsive FIX) */
.hero-img {
    max-width: 40vw;      /* responsive, ikuti lebar layar */
    height: auto;         /* jaga rasio */
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translateY(-50%);
    display: block;
}

/* ============================ */
/* ANIMASI WARNA BACKGROUND     */
/* ============================ */
@keyframes bgCycle {
    0%   { background: rgba(245, 61, 63, 1); }
    14%  { background: rgba(50, 57, 65, 1); }
    28%  { background: rgba(40, 48, 208, 1); }
    42%  { background: rgba(247, 72, 27, 1); }
    57%  { background: rgba(0, 160, 98, 1); }
    71%  { background: rgba(147, 120, 249, 1); }
    85%  { background: rgba(241, 148, 175, 1); }
    100% { background: rgba(245, 61, 63, 1); }
}

.animate-body-bg {
    animation: bgCycle 8s linear infinite;
}

/* ============================ */
/* RESPONSIVE RULES             */
/* ============================ */

/* Tablet (≤ 992px) */
@media (max-width: 992px) {
    h1 {
        font-size: 4rem;
    }

    .hero-wrapper {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .hero-img {
        max-width: 50vw;   /* mengecil otomatis */
        right: 1rem;
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    .hero-wrapper {
        align-items: center !important;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        font-size: 3rem;
        line-height: 1.2;
    }

    .color-btn {
        margin-top: 12px;
    }

    .hero-img {
        position: relative;
        max-width: 70vw;   /* lebih kecil */
        height: auto;
        margin: 25px auto 0;
        top: auto;
        right: auto;
        transform: none;
    }
}

/* Extra Small (≤ 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 2.4rem;
    }

    .hero-img {
        max-width: 85vw;   /* full sesuai layar */
        height: auto;
    }
}