* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    /* JURUS MAUT HILANGIN BIRU-BIRU DI HP */
    -webkit-tap-highlight-color: transparent !important; 
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-touch-callout: none; /* Mencegah menu popup pas ditahan lama */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard */
}

/* TAMBAHKAN HTML DI SINI BIAR KUNCIAN OVERFLOW NYA MAKSIMAL */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Potong semua yang keluar layar */
    overscroll-behavior: none; /* Matiin efek layarnya bisa ditarik/mantul di HP */
    touch-action: none; /* Mencegah layar bisa di-scroll pakai jari */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #040708;
    background-image:
        linear-gradient(rgba(180,220,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,220,255,.045) 1px, transparent 1px),
        linear-gradient(rgba(180,220,255,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180,220,255,.11) 1px, transparent 1px);
    background-size: 28px 22px, 28px 22px, 180px 130px, 180px 130px;
    background-position: 0 0, 0 0, 18px 9px, 18px 9px;
}

.orb-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    z-index: 10; /* TAMBAHAN: Biar bola selalu di depan bangun ruang */
    cursor: pointer; /* TAMBAHAN: Biar keliatan bisa diklik */
}

.orb, .orb-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: 
        transform 100ms linear,
        border-radius 250ms ease;
}

/* Bola Gelap (Belakang) */
.orb-dark {
    background: #660000;
    z-index: 1;
    animation: morph 3.3s ease-in-out infinite;
}

/* Bola Utama (Depan) */
.orb {
    background: #ff0000;
    z-index: 2;
    animation: morph 2.8s ease-in-out infinite;
}

.orb::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 105px;
    height: 105px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: rgba(255,0,0,.18);
    filter: blur(12px);
    z-index: -1;
}

.orb::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: rgba(255,0,0,.04);
    filter: blur(25px);
    z-index: -2;
}

@keyframes morph {
    0%,100% { border-radius: 50%; }
    25% { border-radius: 49% 51% 50% 50% / 50% 49% 51% 50%; }
    50% { border-radius: 51% 49% 50% 50% / 49% 50% 50% 51%; }
    75% { border-radius: 50% 50% 49% 51% / 50% 51% 49% 50%; }
}

/* ==========================================
   TAMBAHAN: STYLE UNTUK BANGUN RUANG
   ========================================== */
.shape-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Biar klik nggak terhalang shape */
    z-index: 1;
}