.border-violet {
    border: 1px solid #6900a3;
    border-radius: 50rem;
   
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 0 12px rgba(186, 85, 211, 0.8);
    transition: box-shadow 0.3s;
}

.border-violet:focus {
    box-shadow: 0 0 18px rgba(186, 85, 211, 1);
}
.btn-violet {
    background: linear-gradient(45deg, #6900A3, #4B0082);
    color: #fff;
    border: none;
    border-radius: 50rem;
    padding: 8px 20px;
    font-weight: 500;
    transition: background 0.3s, transform 0.2s;
}

.btn-violet:hover {
    background: linear-gradient(45deg, #7B1FA2, #5E35B1); /* sedikit lebih terang pas hover */
    transform: translateY(-2px); /* kesan interaktif */
    color: #fff;
}

.btn-violet:active {
    transform: translateY(0); /* balik normal pas klik */
}

.btn-violet:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(105, 0, 163, 0.4); /* subtle focus glow */
}