/* Animasi Masuk & Transisi */
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }

.animate-slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.animate-slide-in-right { animation: slideInRight 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.animate-pop { animation: pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes pop { 0% { transform: scale(0.95); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* Interaksi Touch Mobile */
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.numpad-btn { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.numpad-btn:active:not(:disabled) { transform: scale(0.92); background-color: #d1d5db; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.dark .numpad-btn:active:not(:disabled) { background-color: #4b5563; }

/* Grid Gambar (Logic Test) */
.pattern-box {
    width: 100%; aspect-ratio: 1; border: 2px solid #e5e7eb; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; background: white; cursor: pointer; transition: all 0.2s;
}
.dark .pattern-box { background: #1f2937; border-color: #374151; }
.option-box:hover { border-color: #3b82f6; background-color: #eff6ff; }
.dark .option-box:hover { background-color: #1e3a8a; }
.option-box:active { transform: scale(0.95); }

/* Highlight Kraepelin */
.active-pair { background-color: rgba(59, 130, 246, 0.15); border-radius: 8px; transform: scale(1.05); }
.dark .active-pair { background-color: rgba(59, 130, 246, 0.25); }

/* Gamified Option Button Styling (MC Tests) */
.option-btn { transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-width: 2px; }
.option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); }
.option-btn:active { transform: translateY(0) scale(0.98); }