/* Scroll Behavior halus & Tema Eye-care Pastel */
html { scroll-behavior: smooth; }
body { background-color: #fffdf5; }

/* Utilitas Pembantu */
.transform-none { transform: none !important; }
.cursor-default { cursor: default; }
.isolate { isolation: isolate; }

/* =========================================================
   [ NAV TABS (Sliding Background Logic) ]
========================================================= */
.nav-tab-btn:hover:not(.active-tab) {
    background-color: rgba(0, 0, 0, 0.05);
}

/* =========================================================
   [ PERBAIKAN UI: TEKS BREAK MOBILE ]
========================================================= */
@media (max-width: 768px) {
    .premium-badge-text {
        font-size: 15px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   [ VARIASI ANIMASI INTERAKTIF (HOVER/CLICK) ]
========================================================= */

.anim-btn-action { transition: all 0.2s ease; cursor: pointer; }
.anim-btn-action:hover { transform: scale(1.02); box-shadow: 6px 6px 0 0 rgba(0,0,0,1); }
.anim-btn-action:active { transform: scale(0.98); box-shadow: 2px 2px 0 0 rgba(0,0,0,1); }

.anim-btn-close { transition: all 0.2s ease; cursor: pointer; }
.anim-btn-close:hover { transform: rotate(90deg); background-color: #fbcfe8; }
.anim-btn-close:active { transform: scale(0.9) rotate(90deg); box-shadow: 1px 1px 0 0 rgba(0,0,0,1); }

.anim-btn-social { transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.anim-btn-social:hover { transform: translateY(-5px) rotate(-3deg); box-shadow: 5px 5px 0 0 rgba(0,0,0,1); }
.anim-btn-social:active { transform: translateY(0) rotate(0); box-shadow: 1px 1px 0 0 rgba(0,0,0,1); }

.anim-btn-float { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.anim-btn-float:hover { transform: scale(1.1) rotate(5deg); box-shadow: 6px 6px 0 0 rgba(0,0,0,1); }
.anim-btn-float:active { transform: scale(0.9); box-shadow: 2px 2px 0 0 rgba(0,0,0,1); }

.anim-btn-history, .anim-btn-tutup { transition: all 0.2s ease; cursor: pointer; }
.anim-btn-history:hover, .anim-btn-tutup:hover { transform: translateY(-3px); box-shadow: 4px 4px 0 0 rgba(0,0,0,1); }
.anim-btn-history:active, .anim-btn-tutup:active { transform: translateY(0) scale(0.98); box-shadow: 2px 2px 0 0 rgba(0,0,0,1); }

.anim-list-hover { transition: background-color 0.2s, transform 0.2s; }
.anim-list-hover:hover { background-color: #f1f5f9; transform: translateX(4px); }

.anim-btn-danger { transition: all 0.2s; cursor: pointer; }
.anim-btn-danger:hover { background-color: #ef4444; color: white; border-color: black; transform: translateY(-2px); box-shadow: 4px 4px 0 0 rgba(0,0,0,1); }
.anim-btn-danger:active { transform: translateY(0); box-shadow: 1px 1px 0 0 rgba(0,0,0,1); }

.anim-btn-back { transition: all 0.2s ease; cursor: pointer; }
.anim-btn-back:hover { transform: translateX(-4px); box-shadow: 4px 4px 0 0 rgba(0,0,0,1); }
.anim-btn-back:active { transform: translateX(0); box-shadow: 2px 2px 0 0 rgba(0,0,0,1); }

.anim-feature-3 { transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; }
.anim-feature-3:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 6px 6px 0 0 rgba(0,0,0,1); }
.anim-feature-3:active { transform: translateY(0) rotate(0deg); box-shadow: 2px 2px 0 0 rgba(0,0,0,1); }

.anim-stats-scale { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; }
.anim-stats-scale:hover { transform: scale(1.02); box-shadow: 8px 8px 0 0 rgba(0,0,0,1); }
.anim-stats-scale:active { transform: scale(0.98); box-shadow: 2px 2px 0 0 rgba(0,0,0,1); }
.anim-stats-scale > * { transform: translateZ(0); } 

.anim-premium-4 { transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; cursor: pointer; }
.anim-premium-4:hover { transform: translate(-3px, -4px); box-shadow: 7px 7px 0 0 rgba(0,0,0,1); }
.anim-premium-4:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 rgba(0,0,0,1); }

.anim-faq-frame { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease; }
.anim-faq-frame:hover { transform: scale(1.02); box-shadow: 8px 8px 0 0 rgba(0,0,0,1); z-index: 10; position: relative; }


/* =========================================================
   [ UI & ANIMASI: FAQ SMOOTH COLLAPSE (Grid Trick) ]
========================================================= */
.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s ease-out, opacity 0.3s ease-out;
}
.faq-content.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}
.faq-content > div {
    overflow: hidden;
}

/* ========================================================= */

/* Tab & Step transitions OOB */
.step-container { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; width: 100%; }
.hidden-step {
    opacity: 0; transform: translateY(10px);
    pointer-events: none; position: absolute; top: 0; left: 0; visibility: hidden;
}
.active-step {
    opacity: 1; transform: translateY(0);
    position: relative; visibility: visible;
}

/* Ikon Jam Diam Tanpa Animasi */
.static-clock { animation: none !important; transform: rotate(0deg) !important; }

/* Loading Spinner */
.spinner {
    border: 3px solid rgba(0,0,0,0.1); border-left-color: #000;
    border-radius: 50%; width: 20px; height: 20px;
    animation: spin 1s linear infinite; display: none;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.is-loading .spinner { display: inline-block; }
.is-loading .btn-text { display: none; }

.animate-spin-fast { animation: spin 1.5s linear infinite; }

/* Animasi Emoji Tada */
.animate-tada { animation: tada 1.5s ease-in-out infinite; display: inline-block; }
@keyframes tada {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-6deg); }
    30%, 50%, 70%, 90% { transform: scale(1.2) rotate(6deg); }
    40%, 60%, 80% { transform: scale(1.2) rotate(-6deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ANIMASI LEDAKAN CONFETTI */
@keyframes confetti-burst {
    0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    5% { transform: translate(calc(-50% + var(--tx) * 0.4), calc(-50% + var(--ty) * 0.4)) scale(1.5) rotate(calc(var(--rot) * 0.3)); opacity: 1; }
    70% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 60px)) scale(0.6) rotate(calc(var(--rot) + 90deg)); opacity: 0; }
}
.animate-burst {
    animation-name: confetti-burst;
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
    animation-fill-mode: forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; border-left: 2px solid black; }
::-webkit-scrollbar-thumb { background: #000; border: 2px solid #000; border-radius: 0px; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; border-left: none; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border: 1px solid #000; border-radius: 10px; }

/* =========================================================
   [ ANIMASI SCROLL ("FADE UP ON SCROLL") GLOBAL ]
========================================================= */
.reveal {
    opacity: 0; transform: translateY(40px);
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* Modal Animations */
.modal-enter { animation: modalPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards; }
.modal-exit { animation: modalPopOut 0.2s ease-in forwards; }
@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.95) translateY(30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalPopOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.95) translateY(20px); }
}

.backdrop-enter { animation: fadeIn 0.3s ease-out forwards; }
.backdrop-exit { animation: fadeOut 0.2s ease-in forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }