/* ============================================================
   Project : Compro Doodle
   File    : components/back-to-top.css
   Version : 1.2.0
   Tombol kembali ke atas (templates/components/back-to-top.html).
   Kanan bawah, agar tidak bertabrakan dengan pill voucher (kiri bawah).
   ============================================================ */
.btt {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 1050;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    padding: 0;
    border: 1.5px solid #ffd0e2;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 26px rgba(255, 45, 122, .28);
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px) scale(.85);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease;
}
.btt[hidden] { display: none; }
.btt.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.btt:hover { box-shadow: 0 14px 32px rgba(255, 45, 122, .38); transform: translateY(-2px); }
.btt-art { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.btt-logo {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.btt-text {
    fill: #ff2d7a;
    font: 700 6.4px Quicksand, sans-serif;
    letter-spacing: .55px;
}
/* Logo "melompat" sedikit ke atas: petunjuk arah tombol. */
.btt:hover .btt-logo,
.btt:focus-visible .btt-logo { transform: translateY(-4px); }
.btt.is-visible .btt-logo { animation: btt-hop 1.1s ease .35s 1; }
@keyframes btt-hop {
    0%, 100% { transform: none; }
    35% { transform: translateY(-6px); }
    60% { transform: translateY(0); }
    78% { transform: translateY(-2px); }
}
.btt:focus-visible { outline: 3px solid rgba(255, 45, 122, .35); outline-offset: 3px; }
@media (max-width: 768px) {
    .btt { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 66px; height: 66px; }

}
@media (prefers-reduced-motion: reduce) {
    .btt, .btt-logo { transition: none; animation: none !important; }
}