/* Custom Colors & Borders */
.btn-orange {
    @apply bg-[#ff9f43] text-white px-8 py-4 rounded-full font-bold transition-all hover:scale-105 shadow-lg shadow-[#ff9f43]/20;
}

.btn-cyan {
    @apply bg-[#4ee2c0] text-slate-900 px-8 py-4 rounded-full font-bold transition-all hover:scale-105 shadow-lg shadow-[#4ee2c0]/20;
}

.card {
    @apply bg-[#1e293b] p-8 rounded-[2rem] border-2 transition-all duration-300 flex flex-col;
}

.card-orange {
    border-color: #ff9f43;
    box-shadow: 0 0 20px rgba(255, 159, 67, 0.1);
}

.card-cyan {
    border-color: #4ee2c0;
    box-shadow: 0 0 20px rgba(78, 226, 192, 0.1);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Tab Active State */
.tab-active {
    background: #ff9f43;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 159, 67, 0.3);
}

/* Ribbon/Label */
.ribbon {
    position: absolute;
    top: 15px;
    left: -35px;
    background: #ff9f43;
    padding: 5px 40px;
    transform: rotate(-45deg);
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

.ribbon-cyan {
    position: absolute;
    top: 15px;
    left: -35px;
    background: #4ee2c0;
    color: #0f172a;
    padding: 5px 40px;
    transform: rotate(-45deg);
    font-size: 0.7rem;
    font-weight: bold;
}

/* Hero Background Animation */
.circles {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(78, 226, 192, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(255, 159, 67, 0.1) 0%, transparent 40%);
}

/* Tambahkan ini di paling bawah CSS lu */
.force-hidden {
    display: none !important;
}

/* Biar transisi modal lebih halus */
#order-modal {
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.ribbon {
    z-index: 10;
}
.card {
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.card:hover {
    transform: translateY(-10px);
}