/* Back-to-top button styles (extracted) */
:root{
    --primary-color: #49B000; /* hijau primary */
    --btn-size: 56px;
}

#backToTop{
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--primary-color) 0%, #56ce01 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(39, 174, 96, 0.18);
    transform: translateY(20px) scale(.85) rotate(-8deg);
    opacity: 0;
    pointer-events: none;
    border: none;
    z-index: 9999;
    transition: opacity .35s cubic-bezier(.2,.9,.3,1), transform .6s cubic-bezier(.2,.9,.3,1);
    -webkit-tap-highlight-color: transparent;
}

#backToTop.visible{
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    pointer-events: auto;
    animation: popIn 650ms cubic-bezier(.2,.9,.3,1);
}

#backToTop:focus{ outline: 3px solid rgba(255,255,255,.18); outline-offset: 3px; }

#backToTop .arrow{
    width: 20px;
    height: 20px;
    display: inline-block;
    fill: #ffffff;
    transition: transform .28s cubic-bezier(.2,.9,.3,1);
}

#backToTop:hover .arrow{ transform: translateY(-2px); }

@keyframes popIn{
    0%{ transform: translateY(20px) scale(.8) rotate(-10deg); opacity: 0 }
    60%{ transform: translateY(-8px) scale(1.05) rotate(4deg); opacity: 1 }
    100%{ transform: translateY(0) scale(1) rotate(0deg); }
}

/* subtle pulse to draw attention after appearing */
#backToTop.visible.pulse{
    animation: popIn 650ms cubic-bezier(.2,.9,.3,1), pulse 2.2s 650ms ease-in-out infinite;
}

@keyframes pulse{
    0%{ box-shadow: 0 6px 18px rgba(39,174,96,.18) }
    50%{ box-shadow: 0 12px 30px rgba(39,174,96,.12) }
    100%{ box-shadow: 0 6px 18px rgba(39,174,96,.18) }
}