/* ── 3D Button – Hijau ── */
.btn-3d-green {
    background: linear-gradient(180deg, #1db864 0%, #0c8a4a 100%);
    box-shadow: 0 6px 0 #076b38, 0 8px 16px rgba(15, 157, 88, 0.35);
    transform: translateY(0);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-3d-green:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #076b38, 0 12px 20px rgba(15, 157, 88, 0.4);
}

.btn-3d-green:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #076b38, 0 4px 8px rgba(15, 157, 88, 0.25);
}

/* ── 3D Button – Orange ── */
.btn-3d-white {
    background: linear-gradient(180deg, #FF8C2A 0%, #E06010 100%);
    box-shadow: 0 6px 0 #a83f00, 0 8px 16px rgba(224, 96, 16, 0.35);
    transform: translateY(0);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-3d-white:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #a83f00, 0 12px 20px rgba(224, 96, 16, 0.4);
}

.btn-3d-white:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #a83f00, 0 4px 8px rgba(224, 96, 16, 0.25);
}

/* ── Counter bump ── */
@keyframes zikirBump {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.zikir-bump {
    animation: zikirBump .25s ease;
}

/* ── Daily pop ── */
@keyframes dailyPop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.35);
    }

    70% {
        transform: scale(0.92);
    }

    100% {
        transform: scale(1);
    }
}

.daily-pop {
    animation: dailyPop 0.3s ease forwards;
}

/* ── Calendar tooltip on hover ── */
.cal-cell .cal-tooltip {
    opacity: 0;
    transform: translateY(2px);
    transition: all 0.18s ease;
    pointer-events: none;
}

.cal-cell:hover .cal-tooltip {
    opacity: 1;
    transform: translateY(-2px);
}

.btn-kembali-green {
    padding: 10px 24px;
    background: linear-gradient(180deg, #1db864 0%, #0c8a4a 100%);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transform: translateY(0);
    box-shadow: 0 6px 0 #076b38, 0 8px 16px rgba(15, 157, 88, 0.35);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-kembali-green:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #076b38, 0 12px 20px rgba(15, 157, 88, 0.4);
}

.btn-kembali-green:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #076b38, 0 4px 8px rgba(15, 157, 88, 0.25);
}